Skip to content

Commit 5934eaa

Browse files
lee00678lee00678
committed
Component | TopoJSON: Update style.ts to the new css variabel definitations
1 parent 31b3016 commit 5934eaa

File tree

2 files changed

+84
-88
lines changed

2 files changed

+84
-88
lines changed

‎packages/ts/src/components/topojson-map/index.ts‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,10 @@ import { smartTransition } from 'utils/d3'
1717
import { getColor, hexToBrightness } from 'utils/color'
1818
import { getCSSVariableValue, isStringCSSVariable } from 'utils/misc'
1919
import { trimStringMiddle } from 'utils/text'
20-
import Supercluster from 'supercluster'
21-
2220
// Types
2321
import { MapLink } from 'types/map'
22+
import Supercluster from 'supercluster'
23+
2424

2525
// Local Types
2626
import {
@@ -425,7 +425,7 @@ export class TopoJSONMap<
425425
labelsMerged
426426
.text(d => d.labelText)
427427
.attr('transform', d => `translate(${d.centroid[0]},${d.centroid[1]})`)
428-
.style('font-size', `calc(var(--vis-map-point-label-font-size) / ${this._currentZoomLevel})`)
428+
.style('font-size', `calc(var(${s.variables.mapPointLabelFontSize}) / ${this._currentZoomLevel})`)
429429
.style('text-anchor', 'middle')
430430
.style('dominant-baseline', 'middle')
431431

@@ -462,7 +462,7 @@ export class TopoJSONMap<
462462
.attr('cx', pos[0])
463463
.attr('cy', pos[1])
464464
.attr('r', 0)
465-
.style('fill', 'var(--vis-map-cluster-expanded-background-fill-color)')
465+
.style('fill', `var(${s.variables.mapClusterExpandedBackgroundFillColor})`)
466466
.style('opacity', 0)
467467
.style('cursor', 'pointer')
468468
.on('click', () => {
@@ -803,7 +803,7 @@ export class TopoJSONMap<
803803
})
804804
.style('font-size', d => {
805805
if (config.pointLabelPosition === MapPointLabelPosition.Bottom) {
806-
return `calc(var(--vis-map-point-label-font-size) / ${currentZoomLevel})`
806+
return `calc(var(${s.variables.mapPointLabelFontSize}) / ${currentZoomLevel})`
807807
}
808808
const radius = d.isCluster
809809
? (d.radius / currentZoomLevel)
@@ -838,7 +838,9 @@ export class TopoJSONMap<
838838
.style('fill', (d, i) => {
839839
if (d.donutData.length > 0) {
840840
// Cluster background is white, so use dark text
841-
return d.isCluster ? 'var(--vis-map-point-label-text-color-dark)' : 'var(--vis-map-point-label-text-color-light)'
841+
return d.isCluster
842+
? `var(${s.variables.mapPointLabelTextColorDark})`
843+
: `var(${s.variables.mapPointLabelTextColorLight})`
842844
} else {
843845
if (config.pointLabelColor) {
844846
const labelColor = getColor(d.properties as PointDatum, config.pointLabelColor, i)
@@ -850,7 +852,9 @@ export class TopoJSONMap<
850852
if (!hex) return null
851853

852854
const brightness = hexToBrightness(hex)
853-
return brightness > config.pointLabelTextBrightnessRatio ? 'var(--vis-map-point-label-text-color-dark)' : 'var(--vis-map-point-label-text-color-light)'
855+
return brightness > config.pointLabelTextBrightnessRatio
856+
? `var(${s.variables.mapPointLabelTextColorDark})`
857+
: `var(${s.variables.mapPointLabelTextColorLight})`
854858
}
855859
})
856860
.style('opacity', 1)
@@ -880,7 +884,7 @@ export class TopoJSONMap<
880884
return radius + (10 / this._currentZoomLevel) // offset below the point/cluster, scaled with zoom
881885
})
882886
.attr('dy', '0.32em')
883-
.style('font-size', `calc(var(--vis-map-point-bottom-label-font-size, 10px) / ${this._currentZoomLevel})`)
887+
.style('font-size', `calc(var(${s.variables.mapPointBottomLabelFontSize}) / ${this._currentZoomLevel})`)
884888

885889
smartTransition(bottomLabelsMerged, duration)
886890
.style('opacity', d => (d as any).expandedClusterPoint ? 0 : 1)

‎packages/ts/src/components/topojson-map/style.ts‎

Lines changed: 72 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,56 @@
1-
import { css, injectGlobal } from '@emotion/css'
1+
import { css } from '@emotion/css'
22
import { getCssVarNames, injectGlobalCssVariables } from 'utils/style'
33

4-
export const pointPathRing = css`
5-
label: point-path-ring;
6-
fill: var(--vis-map-point-ring-fill-color);
7-
`
4+
const cssVarDefaults = {
5+
// Base map colors
6+
'--vis-map-feature-color': '#dce3eb',
7+
'--vis-map-boundary-color': '#ffffff',
8+
9+
// Point label
10+
'--vis-map-point-label-text-color-dark': '#5b5f6d',
11+
'--vis-map-point-label-text-color-light': '#fff',
12+
'--vis-map-point-label-font-family': undefined as undefined,
13+
'--vis-map-point-label-font-weight': '600',
14+
'--vis-map-point-label-font-size': '12px',
15+
16+
// Area label
17+
'--vis-map-area-label-text-color': '#5b5f6d',
18+
'--vis-map-area-label-font-weight': '600',
19+
'--vis-map-area-label-font-size': '12px',
20+
'--vis-map-area-label-font-family': undefined as undefined,
21+
22+
// Bottom label
23+
'--vis-map-point-bottom-label-text-color': '#5b5f6d',
24+
'--vis-map-point-bottom-label-font-size': '10px',
25+
26+
// Point styles
27+
'--vis-map-point-default-fill-color': '#B9BEC3',
28+
'--vis-map-point-ring-fill-color': '#ffffff',
29+
'--vis-map-point-default-stroke-color': '#959da3',
30+
'--vis-map-point-default-stroke-width': '0px',
31+
32+
// Cluster styles
33+
'--vis-map-cluster-default-fill-color': '#fff',
34+
'--vis-map-cluster-default-stroke-color': '#B9BEC3',
35+
'--vis-map-cluster-default-stroke-width': '1.5px',
36+
'--vis-map-cluster-donut-fill-color': '#959da3',
37+
'--vis-map-cluster-expanded-background-fill-color': '#fff',
38+
39+
// Dark theme defaults (overridable by host)
40+
'--vis-dark-map-feature-color': '#5b5f6d',
41+
'--vis-dark-map-boundary-color': '#2a2a2a',
42+
'--vis-dark-map-point-label-text-color-dark': '#fff',
43+
'--vis-dark-map-point-label-text-color-light': '#5b5f6d',
44+
'--vis-dark-map-area-label-text-color': '#fff',
45+
'--vis-dark-map-point-bottom-label-text-color': '#fff',
46+
'--vis-dark-map-point-default-fill-color': '#B9BEC3',
47+
'--vis-dark-map-point-default-stroke-color': '#959da3',
48+
'--vis-dark-map-point-ring-fill-color': '#5b5f6d',
49+
'--vis-dark-map-cluster-default-fill-color': '#5b5f6d',
50+
'--vis-dark-map-cluster-default-stroke-color': '#B9BEC3',
51+
'--vis-dark-map-cluster-donut-fill-color': '#959da3',
52+
'--vis-dark-map-cluster-expanded-background-fill-color': '#2a2a2a',
53+
} as const
854

955
export const root = css`
1056
label: topojson-map-component;
@@ -18,66 +64,12 @@ export const root = css`
1864
}
1965
`
2066

21-
export const variables = injectGlobal`
22-
:root {
23-
/* Read-only: Current zoom level. Do not override. */
24-
/* --vis-map-current-zoom-level: 1; */
25-
26-
--vis-map-feature-color: #dce3eb;
27-
--vis-map-boundary-color: #ffffff;
28-
29-
--vis-map-point-label-text-color-dark: #5b5f6d;
30-
--vis-map-point-label-text-color-light: #fff;
31-
32-
// Undefined by default to allow proper fallback to var(--vis-font-family)
33-
/* --vis-map-point-label-font-family: */
34-
--vis-map-point-label-font-weight: 600;
35-
--vis-map-point-label-font-size: 12px;
36-
37-
--vis-map-area-label-text-color: #5b5f6d;
38-
--vis-map-area-label-font-weight: 600;
39-
--vis-map-area-label-font-size: 12px;
40-
41-
--vis-map-point-default-fill-color: #B9BEC3;
42-
--vis-map-point-ring-fill-color: #ffffff;
43-
--vis-map-point-default-stroke-color: #959da3;
44-
--vis-map-point-default-stroke-width: 0px;
45-
46-
--vis-map-cluster-default-fill-color: #fff;
47-
--vis-map-cluster-default-stroke-color: #B9BEC3;
48-
--vis-map-cluster-default-stroke-width: 1.5px;
49-
--vis-map-cluster-donut-fill-color: #959da3;
50-
--vis-map-cluster-expanded-background-fill-color: #fff;
51-
52-
/* Dark Theme */
53-
--vis-dark-map-feature-color: #5b5f6d;
54-
--vis-dark-map-boundary-color: #2a2a2a;
55-
--vis-dark-map-point-label-text-color-dark: #fff;
56-
--vis-dark-map-point-label-text-color-light:#5b5f6d;
57-
--vis-dark-map-area-label-text-color: #fff;
58-
--vis-dark-map-point-default-fill-color: #B9BEC3;
59-
--vis-dark-map-point-default-stroke-color: #959da3;
60-
--vis-dark-map-point-ring-fill-color: #5b5f6d;
61-
--vis-dark-map-cluster-default-fill-color: #5b5f6d;
62-
--vis-dark-map-cluster-default-stroke-color: #B9BEC3;
63-
--vis-dark-map-cluster-donut-fill-color: #959da3;
64-
--vis-dark-map-cluster-expanded-background-fill-color: #2a2a2a;
65-
}
67+
export const variables = getCssVarNames(cssVarDefaults)
68+
injectGlobalCssVariables(cssVarDefaults, root)
6669

67-
body.theme-dark ${`.${root}`} {
68-
--vis-map-feature-color: var(--vis-dark-map-feature-color);
69-
--vis-map-boundary-color: var(--vis-dark-map-boundary-color);
70-
--vis-map-point-label-text-color-dark: var(--vis-dark-map-point-label-text-color-dark);
71-
--vis-map-point-label-text-color-light: var(--vis-dark-map-point-label-text-color-light);
72-
--vis-map-area-label-text-color: var(--vis-dark-map-area-label-text-color);
73-
--vis-map-point-default-fill-color: var(--vis-dark-map-point-default-fill-color);
74-
--vis-map-point-default-stroke-color: var(--vis-dark-map-point-default-stroke-color);
75-
--vis-map-point-ring-fill-color: var(--vis-dark-map-point-ring-fill-color);
76-
--vis-map-cluster-default-fill-color: var(--vis-dark-map-cluster-default-fill-color);
77-
--vis-map-cluster-default-stroke-color: var(--vis-dark-map-cluster-default-stroke-color);
78-
--vis-map-cluster-donut-fill-color: var(--vis-dark-map-cluster-donut-fill-color);
79-
--vis-map-cluster-expanded-background-fill-color: var(--vis-dark-map-cluster-expanded-background-fill-color);
80-
}
70+
export const pointPathRing = css`
71+
label: point-path-ring;
72+
fill: var(${variables.mapPointRingFillColor});
8173
`
8274

8375
export const features = css`
@@ -86,8 +78,8 @@ export const features = css`
8678

8779
export const feature = css`
8880
label: feature;
89-
fill: var(--vis-map-feature-color);
90-
stroke: var(--vis-map-boundary-color);
81+
fill: var(${variables.mapFeatureColor});
82+
stroke: var(${variables.mapBoundaryColor});
9183
stroke-opacity: 0.5;
9284
`
9385

@@ -98,10 +90,10 @@ export const areaLabel = css`
9890
cursor: default;
9991
pointer-events: none;
10092

101-
font-size: var(--vis-map-area-label-font-size);
102-
font-family: var(--vis-map-area-label-font-family, var(--vis-font-family));
103-
font-weight: var(--vis-map-area-label-font-weight);
104-
fill: var(--vis-map-area-label-text-color);
93+
font-size: var(${variables.mapAreaLabelFontSize});
94+
font-family: var(${variables.mapAreaLabelFontFamily}, var(--vis-font-family));
95+
font-weight: var(${variables.mapAreaLabelFontWeight});
96+
fill: var(${variables.mapAreaLabelTextColor});
10597
`
10698

10799
export const background = css`
@@ -146,11 +138,11 @@ export const pointLabel = css`
146138
cursor: default;
147139
pointer-events:none;
148140

149-
font-size: var(--vis-map-point-label-font-size);
150-
font-family: var(--vis-map-point-label-font-family, var(--vis-font-family));
151-
font-weight: var(--vis-map-point-label-font-weight);
152-
fill: var(--vis-map-point-default-fill-color);
153-
stroke-width: var(--vis-map-point-default-stroke-width);
141+
font-size: var(${variables.mapPointLabelFontSize});
142+
font-family: var(${variables.mapPointLabelFontFamily}, var(--vis-font-family));
143+
font-weight: var(${variables.mapPointLabelFontWeight});
144+
fill: var(${variables.mapPointDefaultFillColor});
145+
stroke-width: var(${variables.mapPointDefaultStrokeWidth});
154146
`
155147

156148
export const pointBottomLabel = css`
@@ -160,10 +152,10 @@ export const pointBottomLabel = css`
160152
cursor: default;
161153
pointer-events:none;
162154

163-
font-size: var(--vis-map-point-bottom-label-font-size, 10px);
164-
font-family: var(--vis-map-point-label-font-family, var(--vis-font-family));
155+
font-size: var(${variables.mapPointBottomLabelFontSize});
156+
font-family: var(${variables.mapPointLabelFontFamily}, var(--vis-font-family));
165157
font-weight: 600;
166-
fill: var(--vis-map-point-bottom-label-text-color, #5b5f6d);
158+
fill: var(${variables.mapPointBottomLabelTextColor});
167159
`
168160

169161
// Style class exported for custom CSS targeting of donut chart paths
@@ -197,14 +189,14 @@ export const clusterDonut = css`
197189

198190
export const clusterBackground = css`
199191
label: cluster-background;
200-
fill: var(--vis-map-cluster-default-fill-color);
192+
fill: var(${variables.mapClusterDefaultFillColor});
201193
stroke: none;
202194
pointer-events: all;
203195
`
204196

205197
export const pointSelectionRing = css`
206198
label: point-selection-ring;
207-
stroke: var(--vis-map-point-default-fill-color);
199+
stroke: var(${variables.mapPointDefaultFillColor});
208200
`
209201

210202
export const pointSelection = css`

0 commit comments

Comments
 (0)