Skip to content

Commit f959cc7

Browse files
langermanklukasoppermann
langermank
and
lukasoppermann
authoredMar 7, 2024··
Add alpha data-vis colors (#820)
* try referencing display color * comment out * fixes * add data-vis colors * Update docs/storybook/stories/Color/DataVis/Charts.stories.tsx * Update docs/storybook/stories/Color/DataVis/Charts.stories.tsx * Update docs/storybook/stories/Color/DataVis/Charts.stories.tsx * rename * temp display scale stories * address feedback * Create eleven-kings-hug.md * fix snaps * github-actions[bot] Regenerated snapshots --------- Co-authored-by: Lukas Oppermann <lukasoppermann@github.com> Co-authored-by: langermank <langermank@users.noreply.github.com>
·
v10.4.0v7.15.10
1 parent 009bcd7 commit f959cc7

15 files changed

+479
-85
lines changed
 

‎.changeset/eleven-kings-hug.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@primer/primitives": patch
3+
---
4+
5+
Add alpha data-vis colors

‎docs/storybook/stories/Color/DataVis/Charts.stories.tsx

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import React from 'react'
2+
// eslint-disable-next-line import/extensions
3+
import colorTokens from '../../../../../tokens-next-private/docs/functional/themes/light.json'
4+
import {ColorTokenSwatch} from '../../StorybookComponents/ColorTokenSwatch/ColorTokenSwatch'
5+
import {DataTable, Table} from '@primer/react/drafts'
6+
import {InlineCode} from '../../StorybookComponents/InlineCode/InlineCode'
7+
import {getTokensByName} from '../../utilities/getTokensByName'
8+
9+
export default {
10+
title: 'Color/DataVis',
11+
tags: ['excludeSnapshot'],
12+
parameters: {
13+
controls: {hideNoControlsWarning: true},
14+
options: {
15+
showPanel: false,
16+
},
17+
},
18+
}
19+
20+
export const HighchartsAccentColors = () => {
21+
const data = getTokensByName(colorTokens, 'data').map(token => {
22+
return {
23+
id: token.name,
24+
...token,
25+
}
26+
})
27+
return (
28+
<Table.Container>
29+
<Table.Title as="h1" id="pattern">
30+
Data visualization
31+
</Table.Title>
32+
<DataTable
33+
aria-labelledby="pattern"
34+
data={data}
35+
columns={[
36+
{
37+
header: 'Sample',
38+
field: 'name',
39+
rowHeader: true,
40+
renderCell: row => {
41+
return <ColorTokenSwatch bgColor={row.name} />
42+
},
43+
},
44+
{
45+
header: 'Token',
46+
field: 'name',
47+
rowHeader: true,
48+
renderCell: row => {
49+
return <InlineCode value={row.name} copyClipboard />
50+
},
51+
},
52+
{
53+
header: 'Output value',
54+
field: 'value',
55+
rowHeader: true,
56+
renderCell: row => {
57+
return <p>{row.value}</p>
58+
},
59+
},
60+
]}
61+
/>
62+
</Table.Container>
63+
)
64+
}
65+
HighchartsAccentColors.tags = ['excludeSnapshot']

‎scripts/buildPlatforms/buildFigma.ts

+17-4
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@ export const buildFigma = (buildOptions: ConfigGeneratorOptions): void => {
8282
source: [`src/tokens/functional/shadow/light.json5`],
8383
include: [
8484
`src/tokens/base/color/light/light.json5`,
85+
`src/tokens/base/color/light/display-light.json5`,
8586
`src/tokens/functional/color/light/primitives-light.json5`,
8687
`src/tokens/functional/color/light/patterns-light.json5`,
8788
],
@@ -93,6 +94,7 @@ export const buildFigma = (buildOptions: ConfigGeneratorOptions): void => {
9394
include: [
9495
`src/tokens/base/color/light/light.json5`,
9596
`src/tokens/base/color/light/light.high-contrast.json5`,
97+
`src/tokens/base/color/light/display-light.json5`,
9698
`src/tokens/functional/color/light/primitives-light.json5`,
9799
`src/tokens/functional/color/light/patterns-light.json5`,
98100
],
@@ -104,6 +106,7 @@ export const buildFigma = (buildOptions: ConfigGeneratorOptions): void => {
104106
include: [
105107
`src/tokens/base/color/light/light.json5`,
106108
`src/tokens/base/color/light/light.protanopia-deuteranopia.json5`,
109+
`src/tokens/base/color/light/display-light.json5`,
107110
`src/tokens/functional/color/light/primitives-light.json5`,
108111
`src/tokens/functional/color/light/patterns-light.json5`,
109112
],
@@ -115,6 +118,7 @@ export const buildFigma = (buildOptions: ConfigGeneratorOptions): void => {
115118
include: [
116119
`src/tokens/base/color/light/light.json5`,
117120
`src/tokens/base/color/light/light.tritanopia.json5`,
121+
`src/tokens/base/color/light/display-light.json5`,
118122
`src/tokens/functional/color/light/primitives-light.json5`,
119123
`src/tokens/functional/color/light/patterns-light.json5`,
120124
],
@@ -125,6 +129,7 @@ export const buildFigma = (buildOptions: ConfigGeneratorOptions): void => {
125129
source: [`src/tokens/functional/shadow/dark.json5`],
126130
include: [
127131
`src/tokens/base/color/dark/dark.json5`,
132+
`src/tokens/base/color/dark/display-dark.json5`,
128133
`src/tokens/functional/color/dark/primitives-dark.json5`,
129134
`src/tokens/functional/color/dark/patterns-dark.json5`,
130135
],
@@ -136,6 +141,7 @@ export const buildFigma = (buildOptions: ConfigGeneratorOptions): void => {
136141
include: [
137142
`src/tokens/base/color/dark/dark.json5`,
138143
`src/tokens/base/color/dark/dark.high-contrast.json5`,
144+
`src/tokens/base/color/dark/display-dark.json5`,
139145
`src/tokens/functional/color/dark/primitives-dark.json5`,
140146
`src/tokens/functional/color/dark/patterns-dark.json5`,
141147
],
@@ -147,6 +153,7 @@ export const buildFigma = (buildOptions: ConfigGeneratorOptions): void => {
147153
include: [
148154
`src/tokens/base/color/dark/dark.json5`,
149155
`src/tokens/base/color/dark/dark.dimmed.json5`,
156+
`src/tokens/base/color/dark/display-dark.json5`,
150157
`src/tokens/functional/color/dark/primitives-dark.json5`,
151158
`src/tokens/functional/color/dark/patterns-dark.json5`,
152159
],
@@ -158,6 +165,7 @@ export const buildFigma = (buildOptions: ConfigGeneratorOptions): void => {
158165
include: [
159166
`src/tokens/base/color/dark/dark.json5`,
160167
`src/tokens/base/color/dark/dark.protanopia-deuteranopia.json5`,
168+
`src/tokens/base/color/dark/display-dark.json5`,
161169
`src/tokens/functional/color/dark/primitives-dark.json5`,
162170
`src/tokens/functional/color/dark/patterns-dark.json5`,
163171
],
@@ -169,6 +177,7 @@ export const buildFigma = (buildOptions: ConfigGeneratorOptions): void => {
169177
include: [
170178
`src/tokens/base/color/dark/dark.json5`,
171179
`src/tokens/base/color/dark/dark.tritanopia.json5`,
180+
`src/tokens/base/color/dark/display-dark.json5`,
172181
`src/tokens/functional/color/dark/primitives-dark.json5`,
173182
`src/tokens/functional/color/dark/patterns-dark.json5`,
174183
],
@@ -249,7 +258,11 @@ export const buildFigma = (buildOptions: ConfigGeneratorOptions): void => {
249258
// write to file
250259
fs.writeFileSync(`${buildOptions.buildPath}figma/figma.json`, JSON.stringify({collections, files}, null, 2))
251260
}
252-
253-
buildFigma({
254-
buildPath: 'tokens-next-private/',
255-
})
261+
try {
262+
buildFigma({
263+
buildPath: 'tokens-next-private/',
264+
})
265+
} catch (e) {
266+
// eslint-disable-next-line no-console
267+
console.error('🛑 Error trying to build Figma output:', e)
268+
}

‎scripts/buildTokens.ts

+99-76
Original file line numberDiff line numberDiff line change
@@ -51,90 +51,108 @@ export const buildDesignTokens = (buildOptions: ConfigGeneratorOptions): void =>
5151
/** -----------------------------------
5252
* Colors, shadows & borders
5353
* ----------------------------------- */
54-
for (const {filename, source, include} of themes) {
55-
// build functional scales
56-
PrimerStyleDictionary.extend(
57-
getStyleDictionaryConfig(
58-
`functional/themes/${filename}`,
59-
source,
60-
include,
61-
{...buildOptions, themed: true},
62-
// disable fallbacks for themes
63-
{fallbacks: undefined},
64-
),
65-
).buildAllPlatforms()
54+
try {
55+
for (const {filename, source, include} of themes) {
56+
// build functional scales
57+
PrimerStyleDictionary.extend(
58+
getStyleDictionaryConfig(
59+
`functional/themes/${filename}`,
60+
source,
61+
include,
62+
{...buildOptions, themed: true},
63+
// disable fallbacks for themes
64+
{fallbacks: undefined},
65+
),
66+
).buildAllPlatforms()
67+
}
68+
} catch (e) {
69+
// eslint-disable-next-line no-console
70+
console.error('🛑 Error trying to build Colors, shadows & borders for code output:', e)
6671
}
6772

6873
/** -----------------------------------
6974
* Size tokens
7075
* ----------------------------------- */
71-
const sizeFiles = glob.sync('src/tokens/functional/size/*')
72-
//
73-
for (const file of sizeFiles) {
76+
try {
77+
const sizeFiles = glob.sync('src/tokens/functional/size/*')
78+
//
79+
for (const file of sizeFiles) {
80+
PrimerStyleDictionary.extend(
81+
getStyleDictionaryConfig(
82+
`functional/size/${file.replace('src/tokens/functional/size/', '').replace('.json', '')}`,
83+
[file],
84+
['src/tokens/base/size/size.json', ...sizeFiles],
85+
buildOptions,
86+
),
87+
).buildAllPlatforms()
88+
}
89+
// build base scales
7490
PrimerStyleDictionary.extend(
75-
getStyleDictionaryConfig(
76-
`functional/size/${file.replace('src/tokens/functional/size/', '').replace('.json', '')}`,
77-
[file],
78-
['src/tokens/base/size/size.json', ...sizeFiles],
79-
buildOptions,
80-
),
91+
// using includes as source
92+
getStyleDictionaryConfig(`base/size/size`, ['src/tokens/base/size/size.json'], [], {
93+
buildPath: buildOptions.buildPath,
94+
prefix: undefined,
95+
}),
8196
).buildAllPlatforms()
97+
} catch (e) {
98+
// eslint-disable-next-line no-console
99+
console.error('🛑 Error trying to build size tokens for code output:', e)
82100
}
83-
// build base scales
84-
PrimerStyleDictionary.extend(
85-
// using includes as source
86-
getStyleDictionaryConfig(`base/size/size`, ['src/tokens/base/size/size.json'], [], {
87-
buildPath: buildOptions.buildPath,
88-
prefix: undefined,
89-
}),
90-
).buildAllPlatforms()
91-
92101
/** -----------------------------------
93102
* Typography tokens
94103
* ----------------------------------- */
95-
PrimerStyleDictionary.extend(
96-
getStyleDictionaryConfig(
97-
`functional/typography/typography`,
98-
[`src/tokens/functional/typography/*.json`],
99-
[`src/tokens/base/typography/*.json`],
100-
buildOptions,
101-
{
102-
css: css(`css/functional/typography/typography.css`, buildOptions.prefix, buildOptions.buildPath, {
103-
options: {
104-
outputReferences: true,
105-
},
106-
}),
107-
},
108-
),
109-
).buildAllPlatforms()
104+
try {
105+
PrimerStyleDictionary.extend(
106+
getStyleDictionaryConfig(
107+
`functional/typography/typography`,
108+
[`src/tokens/functional/typography/*.json`],
109+
[`src/tokens/base/typography/*.json`],
110+
buildOptions,
111+
{
112+
css: css(`css/functional/typography/typography.css`, buildOptions.prefix, buildOptions.buildPath, {
113+
options: {
114+
outputReferences: true,
115+
},
116+
}),
117+
},
118+
),
119+
).buildAllPlatforms()
110120

111-
PrimerStyleDictionary.extend(
112-
getStyleDictionaryConfig(`base/typography/typography`, [`src/tokens/base/typography/*.json`], [], buildOptions),
113-
).buildAllPlatforms()
121+
PrimerStyleDictionary.extend(
122+
getStyleDictionaryConfig(`base/typography/typography`, [`src/tokens/base/typography/*.json`], [], buildOptions),
123+
).buildAllPlatforms()
124+
} catch (e) {
125+
// eslint-disable-next-line no-console
126+
console.error('🛑 Error trying to build typography tokens for code output:', e)
127+
}
114128

115129
/** -----------------------------------
116130
* Motion tokens
117131
* ----------------------------------- */
118-
PrimerStyleDictionary.extend(
119-
getStyleDictionaryConfig(
120-
`functional/motion/motion`,
121-
[`src/tokens/functional/motion/*.json5`],
122-
[`src/tokens/base/motion/*.json5`],
123-
buildOptions,
124-
{
125-
css: css(`css/functional/motion/motion.css`, buildOptions.prefix, buildOptions.buildPath, {
126-
options: {
127-
outputReferences: true,
128-
},
129-
}),
130-
},
131-
),
132-
).buildAllPlatforms()
133-
134-
PrimerStyleDictionary.extend(
135-
getStyleDictionaryConfig(`base/motion/motion`, [`src/tokens/base/motion/*.json5`], [], buildOptions),
136-
).buildAllPlatforms()
132+
try {
133+
PrimerStyleDictionary.extend(
134+
getStyleDictionaryConfig(
135+
`functional/motion/motion`,
136+
[`src/tokens/functional/motion/*.json5`],
137+
[`src/tokens/base/motion/*.json5`],
138+
buildOptions,
139+
{
140+
css: css(`css/functional/motion/motion.css`, buildOptions.prefix, buildOptions.buildPath, {
141+
options: {
142+
outputReferences: true,
143+
},
144+
}),
145+
},
146+
),
147+
).buildAllPlatforms()
137148

149+
PrimerStyleDictionary.extend(
150+
getStyleDictionaryConfig(`base/motion/motion`, [`src/tokens/base/motion/*.json5`], [], buildOptions),
151+
).buildAllPlatforms()
152+
} catch (e) {
153+
// eslint-disable-next-line no-console
154+
console.error('🛑 Error trying to build motion tokens for code output:', e)
155+
}
138156
/** -----------------------------------
139157
* deprecated tokens
140158
* ----------------------------------- */
@@ -144,6 +162,7 @@ export const buildDesignTokens = (buildOptions: ConfigGeneratorOptions): void =>
144162
filename: 'theme',
145163
source: [
146164
`src/tokens/base/color/light/light.json5`,
165+
`src/tokens/base/color/light/display-light.json5`,
147166
`src/tokens/functional/color/light/*.json5`,
148167
`src/tokens/functional/shadow/light.json5`,
149168
`src/tokens/functional/border/light.json5`,
@@ -170,16 +189,20 @@ export const buildDesignTokens = (buildOptions: ConfigGeneratorOptions): void =>
170189
},
171190
]
172191
//
173-
for (const {filename, source, include} of deprecatedBuilds) {
174-
PrimerStyleDictionary.extend({
175-
source,
176-
include,
177-
platforms: {
178-
deprecated: deprecatedJson(`deprecated/${filename}.json`, buildOptions.prefix, buildOptions.buildPath),
179-
},
180-
}).buildAllPlatforms()
192+
try {
193+
for (const {filename, source, include} of deprecatedBuilds) {
194+
PrimerStyleDictionary.extend({
195+
source,
196+
include,
197+
platforms: {
198+
deprecated: deprecatedJson(`deprecated/${filename}.json`, buildOptions.prefix, buildOptions.buildPath),
199+
},
200+
}).buildAllPlatforms()
201+
}
202+
} catch (e) {
203+
// eslint-disable-next-line no-console
204+
console.error('🛑 Error trying to build deprecated tokens output:', e)
181205
}
182-
183206
/** -----------------------------------
184207
* Copy `removed` files
185208
* ----------------------------------- */

‎scripts/themes.config.ts

+5-5
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ export const themes: TokenBuildInput[] = [
5656
`src/tokens/functional/shadow/dark.json5`,
5757
`src/tokens/functional/border/dark.json5`,
5858
],
59-
include: [`src/tokens/base/color/dark/dark.json5`, `src/tokens/base/color/light/display-dark.json5`],
59+
include: [`src/tokens/base/color/dark/dark.json5`, `src/tokens/base/color/dark/display-dark.json5`],
6060
},
6161
{
6262
filename: 'dark-dimmed',
@@ -70,7 +70,7 @@ export const themes: TokenBuildInput[] = [
7070
include: [
7171
`src/tokens/base/color/dark/dark.json5`,
7272
`src/tokens/base/color/dark/dark.dimmed.json5`,
73-
`src/tokens/base/color/light/display-dark.json5`,
73+
`src/tokens/base/color/dark/display-dark.json5`,
7474
],
7575
},
7676
{
@@ -82,7 +82,7 @@ export const themes: TokenBuildInput[] = [
8282
`src/tokens/functional/border/dark.json5`,
8383
`src/tokens/functional/color/dark/overrides/dark.tritanopia.json5`,
8484
],
85-
include: [`src/tokens/base/color/dark/dark.json5`, `src/tokens/base/color/light/display-dark.json5`],
85+
include: [`src/tokens/base/color/dark/dark.json5`, `src/tokens/base/color/dark/display-dark.json5`],
8686
},
8787
{
8888
filename: 'dark-colorblind',
@@ -93,7 +93,7 @@ export const themes: TokenBuildInput[] = [
9393
`src/tokens/functional/border/dark.json5`,
9494
`src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5`,
9595
],
96-
include: [`src/tokens/base/color/dark/dark.json5`, `src/tokens/base/color/light/display-dark.json5`],
96+
include: [`src/tokens/base/color/dark/dark.json5`, `src/tokens/base/color/dark/display-dark.json5`],
9797
},
9898
{
9999
filename: 'dark-high-contrast',
@@ -107,7 +107,7 @@ export const themes: TokenBuildInput[] = [
107107
include: [
108108
`src/tokens/base/color/dark/dark.json5`,
109109
`src/tokens/base/color/dark/dark.high-contrast.json5`,
110-
`src/tokens/base/color/light/display-dark.json5`,
110+
`src/tokens/base/color/dark/display-dark.json5`,
111111
],
112112
},
113113
]

‎src/tokens/functional/color/dark/data-vis-dark.json5

+144
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
{
2+
data: {
3+
blue: {
4+
color: {
5+
$value: '{base.display.color.blue.5}',
6+
$type: 'color',
7+
$extensions: {
8+
'org.primer.figma': {
9+
collection: 'mode',
10+
mode: 'dark',
11+
group: 'component',
12+
scopes: ['bgColor'],
13+
},
14+
},
15+
},
16+
},
17+
auburn: {
18+
color: {
19+
$value: '{base.display.color.auburn.5}',
20+
$type: 'color',
21+
$extensions: {
22+
'org.primer.figma': {
23+
collection: 'mode',
24+
mode: 'dark',
25+
group: 'component',
26+
scopes: ['bgColor'],
27+
},
28+
},
29+
},
30+
},
31+
orange: {
32+
color: {
33+
$value: '{base.display.color.orange.4}',
34+
$type: 'color',
35+
$extensions: {
36+
'org.primer.figma': {
37+
collection: 'mode',
38+
mode: 'dark',
39+
group: 'component',
40+
scopes: ['bgColor'],
41+
},
42+
},
43+
},
44+
},
45+
yellow: {
46+
color: {
47+
$value: '{base.display.color.yellow.4}',
48+
$type: 'color',
49+
$extensions: {
50+
'org.primer.figma': {
51+
collection: 'mode',
52+
mode: 'dark',
53+
group: 'component',
54+
scopes: ['bgColor'],
55+
},
56+
},
57+
},
58+
},
59+
green: {
60+
color: {
61+
$value: '{base.display.color.green.4}',
62+
$type: 'color',
63+
$extensions: {
64+
'org.primer.figma': {
65+
collection: 'mode',
66+
mode: 'dark',
67+
group: 'component',
68+
scopes: ['bgColor'],
69+
},
70+
},
71+
},
72+
},
73+
teal: {
74+
color: {
75+
$value: '{base.display.color.teal.4}',
76+
$type: 'color',
77+
$extensions: {
78+
'org.primer.figma': {
79+
collection: 'mode',
80+
mode: 'dark',
81+
group: 'component',
82+
scopes: ['bgColor'],
83+
},
84+
},
85+
},
86+
},
87+
purple: {
88+
color: {
89+
$value: '{base.display.color.purple.5}',
90+
$type: 'color',
91+
$extensions: {
92+
'org.primer.figma': {
93+
collection: 'mode',
94+
mode: 'dark',
95+
group: 'component',
96+
scopes: ['bgColor'],
97+
},
98+
},
99+
},
100+
},
101+
pink: {
102+
color: {
103+
$value: '{base.display.color.pink.5}',
104+
$type: 'color',
105+
$extensions: {
106+
'org.primer.figma': {
107+
collection: 'mode',
108+
mode: 'dark',
109+
group: 'component',
110+
scopes: ['bgColor'],
111+
},
112+
},
113+
},
114+
},
115+
red: {
116+
color: {
117+
$value: '{base.display.color.red.5}',
118+
$type: 'color',
119+
$extensions: {
120+
'org.primer.figma': {
121+
collection: 'mode',
122+
mode: 'dark',
123+
group: 'component',
124+
scopes: ['bgColor'],
125+
},
126+
},
127+
},
128+
},
129+
gray: {
130+
color: {
131+
$value: '{base.display.color.gray.4}',
132+
$type: 'color',
133+
$extensions: {
134+
'org.primer.figma': {
135+
collection: 'mode',
136+
mode: 'dark',
137+
group: 'component',
138+
scopes: ['bgColor'],
139+
},
140+
},
141+
},
142+
},
143+
},
144+
}

‎src/tokens/functional/color/light/data-vis-light.json5

+144
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
{
2+
data: {
3+
blue: {
4+
color: {
5+
$value: '{base.display.color.blue.5}',
6+
$type: 'color',
7+
$extensions: {
8+
'org.primer.figma': {
9+
collection: 'mode',
10+
mode: 'dark',
11+
group: 'component',
12+
scopes: ['bgColor'],
13+
},
14+
},
15+
},
16+
},
17+
auburn: {
18+
color: {
19+
$value: '{base.display.color.auburn.5}',
20+
$type: 'color',
21+
$extensions: {
22+
'org.primer.figma': {
23+
collection: 'mode',
24+
mode: 'dark',
25+
group: 'component',
26+
scopes: ['bgColor'],
27+
},
28+
},
29+
},
30+
},
31+
orange: {
32+
color: {
33+
$value: '{base.display.color.orange.4}',
34+
$type: 'color',
35+
$extensions: {
36+
'org.primer.figma': {
37+
collection: 'mode',
38+
mode: 'dark',
39+
group: 'component',
40+
scopes: ['bgColor'],
41+
},
42+
},
43+
},
44+
},
45+
yellow: {
46+
color: {
47+
$value: '{base.display.color.yellow.4}',
48+
$type: 'color',
49+
$extensions: {
50+
'org.primer.figma': {
51+
collection: 'mode',
52+
mode: 'dark',
53+
group: 'component',
54+
scopes: ['bgColor'],
55+
},
56+
},
57+
},
58+
},
59+
green: {
60+
color: {
61+
$value: '{base.display.color.green.4}',
62+
$type: 'color',
63+
$extensions: {
64+
'org.primer.figma': {
65+
collection: 'mode',
66+
mode: 'dark',
67+
group: 'component',
68+
scopes: ['bgColor'],
69+
},
70+
},
71+
},
72+
},
73+
teal: {
74+
color: {
75+
$value: '{base.display.color.teal.4}',
76+
$type: 'color',
77+
$extensions: {
78+
'org.primer.figma': {
79+
collection: 'mode',
80+
mode: 'dark',
81+
group: 'component',
82+
scopes: ['bgColor'],
83+
},
84+
},
85+
},
86+
},
87+
purple: {
88+
color: {
89+
$value: '{base.display.color.purple.5}',
90+
$type: 'color',
91+
$extensions: {
92+
'org.primer.figma': {
93+
collection: 'mode',
94+
mode: 'dark',
95+
group: 'component',
96+
scopes: ['bgColor'],
97+
},
98+
},
99+
},
100+
},
101+
pink: {
102+
color: {
103+
$value: '{base.display.color.pink.5}',
104+
$type: 'color',
105+
$extensions: {
106+
'org.primer.figma': {
107+
collection: 'mode',
108+
mode: 'dark',
109+
group: 'component',
110+
scopes: ['bgColor'],
111+
},
112+
},
113+
},
114+
},
115+
red: {
116+
color: {
117+
$value: '{base.display.color.red.5}',
118+
$type: 'color',
119+
$extensions: {
120+
'org.primer.figma': {
121+
collection: 'mode',
122+
mode: 'dark',
123+
group: 'component',
124+
scopes: ['bgColor'],
125+
},
126+
},
127+
},
128+
},
129+
gray: {
130+
color: {
131+
$value: '{base.display.color.gray.4}',
132+
$type: 'color',
133+
$extensions: {
134+
'org.primer.figma': {
135+
collection: 'mode',
136+
mode: 'dark',
137+
group: 'component',
138+
scopes: ['bgColor'],
139+
},
140+
},
141+
},
142+
},
143+
},
144+
}

0 commit comments

Comments
 (0)
Please sign in to comment.