Skip to content

Commit 76a1204

Browse files
jperalsjperals
authored
feat: Add new color token for error bar markers in charts (#3634)
1 parent 37247fb commit 76a1204

File tree

5 files changed

+128
-1
lines changed

5 files changed

+128
-1
lines changed

‎src/__integ__/__snapshots__/themes.test.ts.snap

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -218,6 +218,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
218218
"color-charts-blue-2-700": "#314fbf",
219219
"color-charts-blue-2-800": "#2c46b1",
220220
"color-charts-blue-2-900": "#273ea5",
221+
"color-charts-error-bar-marker": "#131920",
221222
"color-charts-green-1000": "#104d01",
222223
"color-charts-green-1100": "#0f4601",
223224
"color-charts-green-1200": "#0d4000",
@@ -896,6 +897,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
896897
"color-charts-blue-2-700": "#a2b8ff",
897898
"color-charts-blue-2-800": "#b1c5ff",
898899
"color-charts-blue-2-900": "#c3d1ff",
900+
"color-charts-error-bar-marker": "#ffffff",
899901
"color-charts-green-1000": "#c5e7a8",
900902
"color-charts-green-1100": "#d5efbe",
901903
"color-charts-green-1200": "#e4f7d5",
@@ -1574,6 +1576,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
15741576
"color-charts-blue-2-700": "#314fbf",
15751577
"color-charts-blue-2-800": "#2c46b1",
15761578
"color-charts-blue-2-900": "#273ea5",
1579+
"color-charts-error-bar-marker": "#131920",
15771580
"color-charts-green-1000": "#104d01",
15781581
"color-charts-green-1100": "#0f4601",
15791582
"color-charts-green-1200": "#0d4000",
@@ -2252,6 +2255,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
22522255
"color-charts-blue-2-700": "#314fbf",
22532256
"color-charts-blue-2-800": "#2c46b1",
22542257
"color-charts-blue-2-900": "#273ea5",
2258+
"color-charts-error-bar-marker": "#131920",
22552259
"color-charts-green-1000": "#104d01",
22562260
"color-charts-green-1100": "#0f4601",
22572261
"color-charts-green-1200": "#0d4000",
@@ -2930,6 +2934,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
29302934
"color-charts-blue-2-700": "#314fbf",
29312935
"color-charts-blue-2-800": "#2c46b1",
29322936
"color-charts-blue-2-900": "#273ea5",
2937+
"color-charts-error-bar-marker": "#131920",
29332938
"color-charts-green-1000": "#104d01",
29342939
"color-charts-green-1100": "#0f4601",
29352940
"color-charts-green-1200": "#0d4000",
@@ -3608,6 +3613,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
36083613
"color-charts-blue-2-700": "#314fbf",
36093614
"color-charts-blue-2-800": "#2c46b1",
36103615
"color-charts-blue-2-900": "#273ea5",
3616+
"color-charts-error-bar-marker": "#131920",
36113617
"color-charts-green-1000": "#104d01",
36123618
"color-charts-green-1100": "#0f4601",
36133619
"color-charts-green-1200": "#0d4000",
@@ -4286,6 +4292,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
42864292
"color-charts-blue-2-700": "#314fbf",
42874293
"color-charts-blue-2-800": "#2c46b1",
42884294
"color-charts-blue-2-900": "#273ea5",
4295+
"color-charts-error-bar-marker": "#131920",
42894296
"color-charts-green-1000": "#104d01",
42904297
"color-charts-green-1100": "#0f4601",
42914298
"color-charts-green-1200": "#0d4000",
@@ -4964,6 +4971,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
49644971
"color-charts-blue-2-700": "#a2b8ff",
49654972
"color-charts-blue-2-800": "#b1c5ff",
49664973
"color-charts-blue-2-900": "#c3d1ff",
4974+
"color-charts-error-bar-marker": "#ffffff",
49674975
"color-charts-green-1000": "#c5e7a8",
49684976
"color-charts-green-1100": "#d5efbe",
49694977
"color-charts-green-1200": "#e4f7d5",

‎src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -825,6 +825,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
825825
"light": "#273ea5",
826826
},
827827
},
828+
"color-charts-error-bar-marker": {
829+
"$description": "Color for the error bar marker in charts.",
830+
"$value": {
831+
"dark": "#ffffff",
832+
"light": "#131920",
833+
},
834+
},
828835
"color-charts-green-1000": {
829836
"$description": "Color from the 'green' data visualization palette at a contrast ratio of 10:1",
830837
"$value": {
@@ -3397,6 +3404,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
33973404
"light": "#273ea5",
33983405
},
33993406
},
3407+
"color-charts-error-bar-marker": {
3408+
"$description": "Color for the error bar marker in charts.",
3409+
"$value": {
3410+
"dark": "#ffffff",
3411+
"light": "#131920",
3412+
},
3413+
},
34003414
"color-charts-green-1000": {
34013415
"$description": "Color from the 'green' data visualization palette at a contrast ratio of 10:1",
34023416
"$value": {
@@ -5969,6 +5983,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
59695983
"light": "#273ea5",
59705984
},
59715985
},
5986+
"color-charts-error-bar-marker": {
5987+
"$description": "Color for the error bar marker in charts.",
5988+
"$value": {
5989+
"dark": "#ffffff",
5990+
"light": "#131920",
5991+
},
5992+
},
59725993
"color-charts-green-1000": {
59735994
"$description": "Color from the 'green' data visualization palette at a contrast ratio of 10:1",
59745995
"$value": {
@@ -8541,6 +8562,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
85418562
"light": "#273ea5",
85428563
},
85438564
},
8565+
"color-charts-error-bar-marker": {
8566+
"$description": "Color for the error bar marker in charts.",
8567+
"$value": {
8568+
"dark": "#ffffff",
8569+
"light": "#131920",
8570+
},
8571+
},
85448572
"color-charts-green-1000": {
85458573
"$description": "Color from the 'green' data visualization palette at a contrast ratio of 10:1",
85468574
"$value": {
@@ -11113,6 +11141,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
1111311141
"light": "#273ea5",
1111411142
},
1111511143
},
11144+
"color-charts-error-bar-marker": {
11145+
"$description": "Color for the error bar marker in charts.",
11146+
"$value": {
11147+
"dark": "#ffffff",
11148+
"light": "#131920",
11149+
},
11150+
},
1111611151
"color-charts-green-1000": {
1111711152
"$description": "Color from the 'green' data visualization palette at a contrast ratio of 10:1",
1111811153
"$value": {
@@ -13685,6 +13720,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
1368513720
"light": "#273ea5",
1368613721
},
1368713722
},
13723+
"color-charts-error-bar-marker": {
13724+
"$description": "Color for the error bar marker in charts.",
13725+
"$value": {
13726+
"dark": "#ffffff",
13727+
"light": "#131920",
13728+
},
13729+
},
1368813730
"color-charts-green-1000": {
1368913731
"$description": "Color from the 'green' data visualization palette at a contrast ratio of 10:1",
1369013732
"$value": {
@@ -16257,6 +16299,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
1625716299
"light": "#273ea5",
1625816300
},
1625916301
},
16302+
"color-charts-error-bar-marker": {
16303+
"$description": "Color for the error bar marker in charts.",
16304+
"$value": {
16305+
"dark": "#ffffff",
16306+
"light": "#131920",
16307+
},
16308+
},
1626016309
"color-charts-green-1000": {
1626116310
"$description": "Color from the 'green' data visualization palette at a contrast ratio of 10:1",
1626216311
"$value": {
@@ -18834,6 +18883,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
1883418883
"light": "#273ea5",
1883518884
},
1883618885
},
18886+
"color-charts-error-bar-marker": {
18887+
"$description": "Color for the error bar marker in charts.",
18888+
"$value": {
18889+
"dark": "#ffffff",
18890+
"light": "#131920",
18891+
},
18892+
},
1883718893
"color-charts-green-1000": {
1883818894
"$description": "Color from the 'green' data visualization palette at a contrast ratio of 10:1",
1883918895
"$value": {
@@ -21406,6 +21462,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
2140621462
"light": "#273ea5",
2140721463
},
2140821464
},
21465+
"color-charts-error-bar-marker": {
21466+
"$description": "Color for the error bar marker in charts.",
21467+
"$value": {
21468+
"dark": "#ffffff",
21469+
"light": "#131920",
21470+
},
21471+
},
2140921472
"color-charts-green-1000": {
2141021473
"$description": "Color from the 'green' data visualization palette at a contrast ratio of 10:1",
2141121474
"$value": {
@@ -23978,6 +24041,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
2397824041
"light": "#273ea5",
2397924042
},
2398024043
},
24044+
"color-charts-error-bar-marker": {
24045+
"$description": "Color for the error bar marker in charts.",
24046+
"$value": {
24047+
"dark": "#ffffff",
24048+
"light": "#131920",
24049+
},
24050+
},
2398124051
"color-charts-green-1000": {
2398224052
"$description": "Color from the 'green' data visualization palette at a contrast ratio of 10:1",
2398324053
"$value": {
@@ -26550,6 +26620,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
2655026620
"light": "#273ea5",
2655126621
},
2655226622
},
26623+
"color-charts-error-bar-marker": {
26624+
"$description": "Color for the error bar marker in charts.",
26625+
"$value": {
26626+
"dark": "#ffffff",
26627+
"light": "#131920",
26628+
},
26629+
},
2655326630
"color-charts-green-1000": {
2655426631
"$description": "Color from the 'green' data visualization palette at a contrast ratio of 10:1",
2655526632
"$value": {
@@ -29122,6 +29199,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
2912229199
"light": "#273ea5",
2912329200
},
2912429201
},
29202+
"color-charts-error-bar-marker": {
29203+
"$description": "Color for the error bar marker in charts.",
29204+
"$value": {
29205+
"dark": "#ffffff",
29206+
"light": "#131920",
29207+
},
29208+
},
2912529209
"color-charts-green-1000": {
2912629210
"$description": "Color from the 'green' data visualization palette at a contrast ratio of 10:1",
2912729211
"$value": {
@@ -31694,6 +31778,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
3169431778
"light": "#273ea5",
3169531779
},
3169631780
},
31781+
"color-charts-error-bar-marker": {
31782+
"$description": "Color for the error bar marker in charts.",
31783+
"$value": {
31784+
"dark": "#ffffff",
31785+
"light": "#131920",
31786+
},
31787+
},
3169731788
"color-charts-green-1000": {
3169831789
"$description": "Color from the 'green' data visualization palette at a contrast ratio of 10:1",
3169931790
"$value": {
@@ -34266,6 +34357,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
3426634357
"light": "#273ea5",
3426734358
},
3426834359
},
34360+
"color-charts-error-bar-marker": {
34361+
"$description": "Color for the error bar marker in charts.",
34362+
"$value": {
34363+
"dark": "#ffffff",
34364+
"light": "#131920",
34365+
},
34366+
},
3426934367
"color-charts-green-1000": {
3427034368
"$description": "Color from the 'green' data visualization palette at a contrast ratio of 10:1",
3427134369
"$value": {
@@ -36838,6 +36936,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
3683836936
"light": "#273ea5",
3683936937
},
3684036938
},
36939+
"color-charts-error-bar-marker": {
36940+
"$description": "Color for the error bar marker in charts.",
36941+
"$value": {
36942+
"dark": "#ffffff",
36943+
"light": "#131920",
36944+
},
36945+
},
3684136946
"color-charts-green-1000": {
3684236947
"$description": "Color from the 'green' data visualization palette at a contrast ratio of 10:1",
3684336948
"$value": {
@@ -39410,6 +39515,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
3941039515
"light": "#273ea5",
3941139516
},
3941239517
},
39518+
"color-charts-error-bar-marker": {
39519+
"$description": "Color for the error bar marker in charts.",
39520+
"$value": {
39521+
"dark": "#ffffff",
39522+
"light": "#131920",
39523+
},
39524+
},
3941339525
"color-charts-green-1000": {
3941439526
"$description": "Color from the 'green' data visualization palette at a contrast ratio of 10:1",
3941539527
"$value": {

‎style-dictionary/utils/token-names.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -392,7 +392,8 @@ export type ColorChartsTokenName =
392392
| 'colorChartsPaletteCategorical47'
393393
| 'colorChartsPaletteCategorical48'
394394
| 'colorChartsPaletteCategorical49'
395-
| 'colorChartsPaletteCategorical50';
395+
| 'colorChartsPaletteCategorical50'
396+
| 'colorChartsErrorBarMarker';
396397
export type ColorSeverityTokenName =
397398
| 'colorSeverityDarkRed'
398399
| 'colorSeverityRed'

‎style-dictionary/visual-refresh/color-charts.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -158,6 +158,7 @@ const tokens: StyleDictionary.ColorChartsDictionary = {
158158
colorChartsPaletteCategorical48: '{colorChartsTeal1000}',
159159
colorChartsPaletteCategorical49: '{colorChartsPurple1200}',
160160
colorChartsPaletteCategorical50: '{colorChartsOrange1000}',
161+
colorChartsErrorBarMarker: { light: '{colorGrey900}', dark: '{colorWhite}' },
161162
};
162163

163164
const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(tokens);

‎style-dictionary/visual-refresh/metadata/color-charts.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -703,6 +703,11 @@ const metadata: StyleDictionary.MetadataIndex = {
703703
public: true,
704704
themeable: true,
705705
},
706+
colorChartsErrorBarMarker: {
707+
description: 'Color for the error bar marker in charts.',
708+
public: true,
709+
themeable: true,
710+
},
706711
};
707712

708713
export default metadata;

0 commit comments

Comments
 (0)