@primer/primitives 8.2.4-rc.fba4a4ab → 9.0.0-rc.02c27a21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/css/functional/size/size.css +0 -6
- package/dist/css/functional/themes/dark-colorblind.css +26 -20
- package/dist/css/functional/themes/dark-dimmed.css +26 -20
- package/dist/css/functional/themes/dark-high-contrast.css +28 -22
- package/dist/css/functional/themes/dark-tritanopia.css +26 -20
- package/dist/css/functional/themes/dark.css +26 -20
- package/dist/css/functional/themes/light-colorblind.css +26 -20
- package/dist/css/functional/themes/light-high-contrast.css +28 -22
- package/dist/css/functional/themes/light-tritanopia.css +26 -20
- package/dist/css/functional/themes/light.css +26 -20
- package/dist/css/primitives.css +0 -6
- package/dist/docs/functional/size/size.json +0 -162
- package/dist/docs/functional/themes/dark-colorblind.json +117 -30
- package/dist/docs/functional/themes/dark-dimmed.json +117 -30
- package/dist/docs/functional/themes/dark-high-contrast.json +120 -33
- package/dist/docs/functional/themes/dark-tritanopia.json +117 -30
- package/dist/docs/functional/themes/dark.json +117 -30
- package/dist/docs/functional/themes/light-colorblind.json +117 -30
- package/dist/docs/functional/themes/light-high-contrast.json +120 -33
- package/dist/docs/functional/themes/light-tritanopia.json +117 -30
- package/dist/docs/functional/themes/light.json +117 -30
- package/dist/fallbacks/color-fallbacks.json +11 -1
- package/dist/fallbacks/functional/size/size.json +0 -6
- package/dist/figma/dimension/dimension.json +0 -64
- package/dist/figma/themes/dark-colorblind.json +68 -20
- package/dist/figma/themes/dark-dimmed.json +68 -20
- package/dist/figma/themes/dark-high-contrast.json +84 -36
- package/dist/figma/themes/dark-tritanopia.json +68 -20
- package/dist/figma/themes/dark.json +68 -20
- package/dist/figma/themes/light-colorblind.json +68 -20
- package/dist/figma/themes/light-high-contrast.json +84 -36
- package/dist/figma/themes/light-tritanopia.json +68 -20
- package/dist/figma/themes/light.json +68 -20
- package/dist/internalCss/dark-colorblind.css +26 -20
- package/dist/internalCss/dark-dimmed.css +26 -20
- package/dist/internalCss/dark-high-contrast.css +28 -22
- package/dist/internalCss/dark-tritanopia.css +26 -20
- package/dist/internalCss/dark.css +26 -20
- package/dist/internalCss/light-colorblind.css +26 -20
- package/dist/internalCss/light-high-contrast.css +28 -22
- package/dist/internalCss/light-tritanopia.css +26 -20
- package/dist/internalCss/light.css +26 -20
- package/dist/styleLint/functional/size/size.json +0 -162
- package/dist/styleLint/functional/themes/dark-colorblind.json +117 -30
- package/dist/styleLint/functional/themes/dark-dimmed.json +117 -30
- package/dist/styleLint/functional/themes/dark-high-contrast.json +120 -33
- package/dist/styleLint/functional/themes/dark-tritanopia.json +117 -30
- package/dist/styleLint/functional/themes/dark.json +117 -30
- package/dist/styleLint/functional/themes/light-colorblind.json +117 -30
- package/dist/styleLint/functional/themes/light-high-contrast.json +120 -33
- package/dist/styleLint/functional/themes/light-tritanopia.json +117 -30
- package/dist/styleLint/functional/themes/light.json +117 -30
- package/package.json +1 -1
- package/src/tokens/fallback/color-fallbacks.json +11 -1
- package/src/tokens/functional/color/dark/data-vis-dark.json5 +10 -10
- package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 +16 -0
- package/src/tokens/functional/color/dark/patterns-dark.json5 +26 -0
- package/src/tokens/functional/color/dark/primitives-dark.json5 +12 -0
- package/src/tokens/functional/color/light/data-vis-light.json5 +10 -10
- package/src/tokens/functional/color/light/overrides/light.high-contrast.json5 +6 -0
- package/src/tokens/functional/color/light/patterns-light.json5 +26 -0
- package/src/tokens/functional/color/light/primitives-light.json5 +12 -0
- package/src/tokens/functional/size/size.json +0 -68
- package/dist/deprecated/size.json +0 -8
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
data: {
|
|
3
3
|
blue: {
|
|
4
4
|
color: {
|
|
5
|
-
'
|
|
5
|
+
'emphasis': {
|
|
6
6
|
$value: '{base.display.color.blue.5}',
|
|
7
7
|
$type: 'color',
|
|
8
8
|
$extensions: {
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
},
|
|
31
31
|
auburn: {
|
|
32
32
|
color: {
|
|
33
|
-
'
|
|
33
|
+
'emphasis': {
|
|
34
34
|
$value: '{base.display.color.auburn.5}',
|
|
35
35
|
$type: 'color',
|
|
36
36
|
$extensions: {
|
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
},
|
|
59
59
|
orange: {
|
|
60
60
|
color: {
|
|
61
|
-
'
|
|
61
|
+
'emphasis': {
|
|
62
62
|
$value: '{base.display.color.orange.4}',
|
|
63
63
|
$type: 'color',
|
|
64
64
|
$extensions: {
|
|
@@ -86,7 +86,7 @@
|
|
|
86
86
|
},
|
|
87
87
|
yellow: {
|
|
88
88
|
color: {
|
|
89
|
-
'
|
|
89
|
+
'emphasis': {
|
|
90
90
|
$value: '{base.display.color.yellow.4}',
|
|
91
91
|
$type: 'color',
|
|
92
92
|
$extensions: {
|
|
@@ -114,7 +114,7 @@
|
|
|
114
114
|
},
|
|
115
115
|
green: {
|
|
116
116
|
color: {
|
|
117
|
-
'
|
|
117
|
+
'emphasis': {
|
|
118
118
|
$value: '{base.display.color.green.4}',
|
|
119
119
|
$type: 'color',
|
|
120
120
|
$extensions: {
|
|
@@ -142,7 +142,7 @@
|
|
|
142
142
|
},
|
|
143
143
|
teal: {
|
|
144
144
|
color: {
|
|
145
|
-
'
|
|
145
|
+
'emphasis': {
|
|
146
146
|
$value: '{base.display.color.teal.4}',
|
|
147
147
|
$type: 'color',
|
|
148
148
|
$extensions: {
|
|
@@ -170,7 +170,7 @@
|
|
|
170
170
|
},
|
|
171
171
|
purple: {
|
|
172
172
|
color: {
|
|
173
|
-
'
|
|
173
|
+
'emphasis': {
|
|
174
174
|
$value: '{base.display.color.purple.5}',
|
|
175
175
|
$type: 'color',
|
|
176
176
|
$extensions: {
|
|
@@ -198,7 +198,7 @@
|
|
|
198
198
|
},
|
|
199
199
|
pink: {
|
|
200
200
|
color: {
|
|
201
|
-
'
|
|
201
|
+
'emphasis': {
|
|
202
202
|
$value: '{base.display.color.pink.5}',
|
|
203
203
|
$type: 'color',
|
|
204
204
|
$extensions: {
|
|
@@ -226,7 +226,7 @@
|
|
|
226
226
|
},
|
|
227
227
|
red: {
|
|
228
228
|
color: {
|
|
229
|
-
'
|
|
229
|
+
'emphasis': {
|
|
230
230
|
$value: '{base.display.color.red.5}',
|
|
231
231
|
$type: 'color',
|
|
232
232
|
$extensions: {
|
|
@@ -254,7 +254,7 @@
|
|
|
254
254
|
},
|
|
255
255
|
gray: {
|
|
256
256
|
color: {
|
|
257
|
-
'
|
|
257
|
+
'emphasis': {
|
|
258
258
|
$value: '{base.display.color.gray.4}',
|
|
259
259
|
$type: 'color',
|
|
260
260
|
$extensions: {
|
|
@@ -362,6 +362,12 @@
|
|
|
362
362
|
$type: 'color',
|
|
363
363
|
},
|
|
364
364
|
},
|
|
365
|
+
borderColor: {
|
|
366
|
+
rest: {
|
|
367
|
+
$value: '{borderColor.emphasis}',
|
|
368
|
+
$type: 'color',
|
|
369
|
+
},
|
|
370
|
+
},
|
|
365
371
|
},
|
|
366
372
|
button: {
|
|
367
373
|
primary: {
|
|
@@ -902,4 +908,14 @@
|
|
|
902
908
|
},
|
|
903
909
|
},
|
|
904
910
|
},
|
|
911
|
+
tooltip: {
|
|
912
|
+
bgColor: {
|
|
913
|
+
$value: '{bgColor.inverse}',
|
|
914
|
+
$type: 'color',
|
|
915
|
+
},
|
|
916
|
+
fgColor: {
|
|
917
|
+
$value: '{fgColor.onInverse}',
|
|
918
|
+
$type: 'color',
|
|
919
|
+
},
|
|
920
|
+
},
|
|
905
921
|
}
|
|
@@ -3073,4 +3073,30 @@
|
|
|
3073
3073
|
},
|
|
3074
3074
|
},
|
|
3075
3075
|
},
|
|
3076
|
+
tooltip: {
|
|
3077
|
+
bgColor: {
|
|
3078
|
+
$value: '{bgColor.emphasis}',
|
|
3079
|
+
$type: 'color',
|
|
3080
|
+
$extensions: {
|
|
3081
|
+
'org.primer.figma': {
|
|
3082
|
+
collection: 'mode',
|
|
3083
|
+
mode: 'dark',
|
|
3084
|
+
group: 'component',
|
|
3085
|
+
scopes: ['bgColor'],
|
|
3086
|
+
},
|
|
3087
|
+
},
|
|
3088
|
+
},
|
|
3089
|
+
fgColor: {
|
|
3090
|
+
$value: '{fgColor.onEmphasis}',
|
|
3091
|
+
$type: 'color',
|
|
3092
|
+
$extensions: {
|
|
3093
|
+
'org.primer.figma': {
|
|
3094
|
+
collection: 'mode',
|
|
3095
|
+
mode: 'dark',
|
|
3096
|
+
group: 'component',
|
|
3097
|
+
scopes: ['fgColor'],
|
|
3098
|
+
},
|
|
3099
|
+
},
|
|
3100
|
+
},
|
|
3101
|
+
},
|
|
3076
3102
|
}
|
|
@@ -53,6 +53,18 @@
|
|
|
53
53
|
},
|
|
54
54
|
},
|
|
55
55
|
},
|
|
56
|
+
onInverse: {
|
|
57
|
+
$value: '{base.color.black}',
|
|
58
|
+
$type: 'color',
|
|
59
|
+
$extensions: {
|
|
60
|
+
'org.primer.figma': {
|
|
61
|
+
collection: 'mode',
|
|
62
|
+
mode: 'dark',
|
|
63
|
+
group: 'semantic',
|
|
64
|
+
scopes: ['fgColor'],
|
|
65
|
+
},
|
|
66
|
+
},
|
|
67
|
+
},
|
|
56
68
|
white: {
|
|
57
69
|
$value: '{base.color.white}',
|
|
58
70
|
$type: 'color',
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
data: {
|
|
3
3
|
blue: {
|
|
4
4
|
color: {
|
|
5
|
-
'
|
|
5
|
+
'emphasis': {
|
|
6
6
|
$value: '{base.display.color.blue.5}',
|
|
7
7
|
$type: 'color',
|
|
8
8
|
$extensions: {
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
},
|
|
31
31
|
auburn: {
|
|
32
32
|
color: {
|
|
33
|
-
'
|
|
33
|
+
'emphasis': {
|
|
34
34
|
$value: '{base.display.color.auburn.5}',
|
|
35
35
|
$type: 'color',
|
|
36
36
|
$extensions: {
|
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
},
|
|
59
59
|
orange: {
|
|
60
60
|
color: {
|
|
61
|
-
'
|
|
61
|
+
'emphasis': {
|
|
62
62
|
$value: '{base.display.color.orange.4}',
|
|
63
63
|
$type: 'color',
|
|
64
64
|
$extensions: {
|
|
@@ -86,7 +86,7 @@
|
|
|
86
86
|
},
|
|
87
87
|
yellow: {
|
|
88
88
|
color: {
|
|
89
|
-
'
|
|
89
|
+
'emphasis': {
|
|
90
90
|
$value: '{base.display.color.yellow.4}',
|
|
91
91
|
$type: 'color',
|
|
92
92
|
$extensions: {
|
|
@@ -114,7 +114,7 @@
|
|
|
114
114
|
},
|
|
115
115
|
green: {
|
|
116
116
|
color: {
|
|
117
|
-
'
|
|
117
|
+
'emphasis': {
|
|
118
118
|
$value: '{base.display.color.green.4}',
|
|
119
119
|
$type: 'color',
|
|
120
120
|
$extensions: {
|
|
@@ -142,7 +142,7 @@
|
|
|
142
142
|
},
|
|
143
143
|
teal: {
|
|
144
144
|
color: {
|
|
145
|
-
'
|
|
145
|
+
'emphasis': {
|
|
146
146
|
$value: '{base.display.color.teal.4}',
|
|
147
147
|
$type: 'color',
|
|
148
148
|
$extensions: {
|
|
@@ -170,7 +170,7 @@
|
|
|
170
170
|
},
|
|
171
171
|
purple: {
|
|
172
172
|
color: {
|
|
173
|
-
'
|
|
173
|
+
'emphasis': {
|
|
174
174
|
$value: '{base.display.color.purple.5}',
|
|
175
175
|
$type: 'color',
|
|
176
176
|
$extensions: {
|
|
@@ -198,7 +198,7 @@
|
|
|
198
198
|
},
|
|
199
199
|
pink: {
|
|
200
200
|
color: {
|
|
201
|
-
'
|
|
201
|
+
'emphasis': {
|
|
202
202
|
$value: '{base.display.color.pink.5}',
|
|
203
203
|
$type: 'color',
|
|
204
204
|
$extensions: {
|
|
@@ -226,7 +226,7 @@
|
|
|
226
226
|
},
|
|
227
227
|
red: {
|
|
228
228
|
color: {
|
|
229
|
-
'
|
|
229
|
+
'emphasis': {
|
|
230
230
|
$value: '{base.display.color.red.5}',
|
|
231
231
|
$type: 'color',
|
|
232
232
|
$extensions: {
|
|
@@ -254,7 +254,7 @@
|
|
|
254
254
|
},
|
|
255
255
|
gray: {
|
|
256
256
|
color: {
|
|
257
|
-
'
|
|
257
|
+
'emphasis': {
|
|
258
258
|
$value: '{base.display.color.gray.4}',
|
|
259
259
|
$type: 'color',
|
|
260
260
|
$extensions: {
|
|
@@ -3070,4 +3070,30 @@
|
|
|
3070
3070
|
},
|
|
3071
3071
|
},
|
|
3072
3072
|
},
|
|
3073
|
+
tooltip: {
|
|
3074
|
+
bgColor: {
|
|
3075
|
+
$value: '{bgColor.emphasis}',
|
|
3076
|
+
$type: 'color',
|
|
3077
|
+
$extensions: {
|
|
3078
|
+
'org.primer.figma': {
|
|
3079
|
+
collection: 'mode',
|
|
3080
|
+
mode: 'light',
|
|
3081
|
+
group: 'component',
|
|
3082
|
+
scopes: ['bgColor'],
|
|
3083
|
+
},
|
|
3084
|
+
},
|
|
3085
|
+
},
|
|
3086
|
+
fgColor: {
|
|
3087
|
+
$value: '{fgColor.onEmphasis}',
|
|
3088
|
+
$type: 'color',
|
|
3089
|
+
$extensions: {
|
|
3090
|
+
'org.primer.figma': {
|
|
3091
|
+
collection: 'mode',
|
|
3092
|
+
mode: 'light',
|
|
3093
|
+
group: 'component',
|
|
3094
|
+
scopes: ['fgColor'],
|
|
3095
|
+
},
|
|
3096
|
+
},
|
|
3097
|
+
},
|
|
3098
|
+
},
|
|
3073
3099
|
}
|
|
@@ -49,6 +49,18 @@
|
|
|
49
49
|
},
|
|
50
50
|
},
|
|
51
51
|
},
|
|
52
|
+
onInverse: {
|
|
53
|
+
$value: '{base.color.white}',
|
|
54
|
+
$type: 'color',
|
|
55
|
+
$extensions: {
|
|
56
|
+
'org.primer.figma': {
|
|
57
|
+
collection: 'mode',
|
|
58
|
+
mode: 'light',
|
|
59
|
+
group: 'semantic',
|
|
60
|
+
scopes: ['fgColor'],
|
|
61
|
+
},
|
|
62
|
+
},
|
|
63
|
+
},
|
|
52
64
|
white: {
|
|
53
65
|
$value: '{base.color.white}',
|
|
54
66
|
$type: 'color',
|
|
@@ -1,72 +1,4 @@
|
|
|
1
1
|
{
|
|
2
|
-
"space": {
|
|
3
|
-
"xxsmall": {
|
|
4
|
-
"$value": "2px",
|
|
5
|
-
"$type": "dimension",
|
|
6
|
-
"deprecated": "Use --base-size-2 instead",
|
|
7
|
-
"$extensions": {
|
|
8
|
-
"org.primer.figma": {
|
|
9
|
-
"collection": "functional/size",
|
|
10
|
-
"scopes": ["gap"]
|
|
11
|
-
}
|
|
12
|
-
}
|
|
13
|
-
},
|
|
14
|
-
"xsmall": {
|
|
15
|
-
"$value": "{base.size.4}",
|
|
16
|
-
"$type": "dimension",
|
|
17
|
-
"deprecated": "Use --base-size-4 instead",
|
|
18
|
-
"$extensions": {
|
|
19
|
-
"org.primer.figma": {
|
|
20
|
-
"collection": "functional/size",
|
|
21
|
-
"scopes": ["gap"]
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
},
|
|
25
|
-
"small": {
|
|
26
|
-
"$value": "6px",
|
|
27
|
-
"$type": "dimension",
|
|
28
|
-
"deprecated": "Use --base-size-6 instead",
|
|
29
|
-
"$extensions": {
|
|
30
|
-
"org.primer.figma": {
|
|
31
|
-
"collection": "functional/size",
|
|
32
|
-
"scopes": ["gap"]
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
},
|
|
36
|
-
"medium": {
|
|
37
|
-
"$value": "{base.size.8}",
|
|
38
|
-
"$type": "dimension",
|
|
39
|
-
"deprecated": "Use --base-size-8 instead",
|
|
40
|
-
"$extensions": {
|
|
41
|
-
"org.primer.figma": {
|
|
42
|
-
"collection": "functional/size",
|
|
43
|
-
"scopes": ["gap"]
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
},
|
|
47
|
-
"large": {
|
|
48
|
-
"$value": "{base.size.12}",
|
|
49
|
-
"$type": "dimension",
|
|
50
|
-
"deprecated": "Use --base-size-12 instead",
|
|
51
|
-
"$extensions": {
|
|
52
|
-
"org.primer.figma": {
|
|
53
|
-
"collection": "functional/size",
|
|
54
|
-
"scopes": ["gap"]
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
},
|
|
58
|
-
"xlarge": {
|
|
59
|
-
"$value": "{base.size.16}",
|
|
60
|
-
"$type": "dimension",
|
|
61
|
-
"deprecated": "Use --base-size-16 instead",
|
|
62
|
-
"$extensions": {
|
|
63
|
-
"org.primer.figma": {
|
|
64
|
-
"collection": "functional/size",
|
|
65
|
-
"scopes": ["gap"]
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
},
|
|
70
2
|
"control": {
|
|
71
3
|
"minTarget": {
|
|
72
4
|
"fine": {
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"space.xxsmall": "Use --base-size-2 instead",
|
|
3
|
-
"space.xsmall": "Use --base-size-4 instead",
|
|
4
|
-
"space.small": "Use --base-size-6 instead",
|
|
5
|
-
"space.medium": "Use --base-size-8 instead",
|
|
6
|
-
"space.large": "Use --base-size-12 instead",
|
|
7
|
-
"space.xlarge": "Use --base-size-16 instead"
|
|
8
|
-
}
|