@primer/primitives 8.1.0 → 8.1.1-rc.31d9bb87

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.
Files changed (59) hide show
  1. package/dist/css/base/size/size.css +2 -0
  2. package/dist/css/functional/themes/dark-colorblind.css +28 -18
  3. package/dist/css/functional/themes/dark-dimmed.css +28 -18
  4. package/dist/css/functional/themes/dark-high-contrast.css +10 -0
  5. package/dist/css/functional/themes/dark-tritanopia.css +28 -18
  6. package/dist/css/functional/themes/dark.css +28 -18
  7. package/dist/css/functional/themes/light-colorblind.css +10 -0
  8. package/dist/css/functional/themes/light-high-contrast.css +10 -0
  9. package/dist/css/functional/themes/light-tritanopia.css +10 -0
  10. package/dist/css/functional/themes/light.css +10 -0
  11. package/dist/docs/base/size/size.json +50 -0
  12. package/dist/docs/functional/themes/dark-colorblind.json +159 -14
  13. package/dist/docs/functional/themes/dark-dimmed.json +159 -14
  14. package/dist/docs/functional/themes/dark-high-contrast.json +145 -0
  15. package/dist/docs/functional/themes/dark-tritanopia.json +159 -14
  16. package/dist/docs/functional/themes/dark.json +159 -14
  17. package/dist/docs/functional/themes/light-colorblind.json +145 -0
  18. package/dist/docs/functional/themes/light-high-contrast.json +145 -0
  19. package/dist/docs/functional/themes/light-tritanopia.json +145 -0
  20. package/dist/docs/functional/themes/light.json +145 -0
  21. package/dist/docs/functional/typography/typography.json +19 -1
  22. package/dist/fallbacks/base/size/size.json +2 -0
  23. package/dist/figma/dimension/dimension.json +20 -0
  24. package/dist/figma/themes/dark-colorblind.json +108 -28
  25. package/dist/figma/themes/dark-dimmed.json +108 -28
  26. package/dist/figma/themes/dark-high-contrast.json +80 -0
  27. package/dist/figma/themes/dark-tritanopia.json +108 -28
  28. package/dist/figma/themes/dark.json +108 -28
  29. package/dist/figma/themes/light-colorblind.json +80 -0
  30. package/dist/figma/themes/light-high-contrast.json +80 -0
  31. package/dist/figma/themes/light-tritanopia.json +80 -0
  32. package/dist/figma/themes/light.json +80 -0
  33. package/dist/figma/typography/typography.json +12 -1
  34. package/dist/internalCss/dark-colorblind.css +28 -18
  35. package/dist/internalCss/dark-dimmed.css +28 -18
  36. package/dist/internalCss/dark-high-contrast.css +10 -0
  37. package/dist/internalCss/dark-tritanopia.css +28 -18
  38. package/dist/internalCss/dark.css +28 -18
  39. package/dist/internalCss/light-colorblind.css +10 -0
  40. package/dist/internalCss/light-high-contrast.css +10 -0
  41. package/dist/internalCss/light-tritanopia.css +10 -0
  42. package/dist/internalCss/light.css +10 -0
  43. package/dist/styleLint/base/size/size.json +50 -0
  44. package/dist/styleLint/functional/themes/dark-colorblind.json +159 -14
  45. package/dist/styleLint/functional/themes/dark-dimmed.json +159 -14
  46. package/dist/styleLint/functional/themes/dark-high-contrast.json +145 -0
  47. package/dist/styleLint/functional/themes/dark-tritanopia.json +159 -14
  48. package/dist/styleLint/functional/themes/dark.json +159 -14
  49. package/dist/styleLint/functional/themes/light-colorblind.json +145 -0
  50. package/dist/styleLint/functional/themes/light-high-contrast.json +145 -0
  51. package/dist/styleLint/functional/themes/light-tritanopia.json +145 -0
  52. package/dist/styleLint/functional/themes/light.json +145 -0
  53. package/dist/styleLint/functional/typography/typography.json +19 -1
  54. package/package.json +1 -1
  55. package/src/tokens/base/size/size.json +20 -0
  56. package/src/tokens/functional/color/dark/display-dark.json5 +66 -0
  57. package/src/tokens/functional/color/dark/primitives-dark.json5 +3 -3
  58. package/src/tokens/functional/color/light/display-light.json5 +66 -0
  59. package/src/tokens/functional/typography/typography.json +10 -1
package/dist/styleLint/functional/themes/light-tritanopia.json CHANGED
@@ -2043,6 +2043,151 @@
2043
2043
  "attributes": {},
2044
2044
  "path": ["display", "purple", "borderColor", "emphasis"]
2045
2045
  },
2046
+ "display-plum-bgColor-muted": {
2047
+ "value": "#f8e5ff",
2048
+ "$type": "color",
2049
+ "$extensions": {
2050
+ "org.primer.figma": {
2051
+ "collection": "mode",
2052
+ "mode": "light",
2053
+ "group": "component (internal)",
2054
+ "scopes": ["bgColor"]
2055
+ }
2056
+ },
2057
+ "filePath": "src/tokens/functional/color/light/display-light.json5",
2058
+ "isSource": true,
2059
+ "original": {
2060
+ "value": "{base.display.color.plum.0}",
2061
+ "$type": "color",
2062
+ "$extensions": {
2063
+ "org.primer.figma": {
2064
+ "collection": "mode",
2065
+ "mode": "light",
2066
+ "group": "component (internal)",
2067
+ "scopes": ["bgColor"]
2068
+ }
2069
+ }
2070
+ },
2071
+ "name": "display-plum-bgColor-muted",
2072
+ "attributes": {},
2073
+ "path": ["display", "plum", "bgColor", "muted"]
2074
+ },
2075
+ "display-plum-bgColor-emphasis": {
2076
+ "value": "#a830e8",
2077
+ "$type": "color",
2078
+ "$extensions": {
2079
+ "org.primer.figma": {
2080
+ "collection": "mode",
2081
+ "mode": "light",
2082
+ "group": "component (internal)",
2083
+ "scopes": ["bgColor"]
2084
+ }
2085
+ },
2086
+ "filePath": "src/tokens/functional/color/light/display-light.json5",
2087
+ "isSource": true,
2088
+ "original": {
2089
+ "value": "{base.display.color.plum.5}",
2090
+ "$type": "color",
2091
+ "$extensions": {
2092
+ "org.primer.figma": {
2093
+ "collection": "mode",
2094
+ "mode": "light",
2095
+ "group": "component (internal)",
2096
+ "scopes": ["bgColor"]
2097
+ }
2098
+ }
2099
+ },
2100
+ "name": "display-plum-bgColor-emphasis",
2101
+ "attributes": {},
2102
+ "path": ["display", "plum", "bgColor", "emphasis"]
2103
+ },
2104
+ "display-plum-fgColor": {
2105
+ "value": "#961edc",
2106
+ "$type": "color",
2107
+ "$extensions": {
2108
+ "org.primer.figma": {
2109
+ "collection": "mode",
2110
+ "mode": "light",
2111
+ "group": "component (internal)",
2112
+ "scopes": ["fgColor"]
2113
+ }
2114
+ },
2115
+ "filePath": "src/tokens/functional/color/light/display-light.json5",
2116
+ "isSource": true,
2117
+ "original": {
2118
+ "value": "{base.display.color.plum.6}",
2119
+ "$type": "color",
2120
+ "$extensions": {
2121
+ "org.primer.figma": {
2122
+ "collection": "mode",
2123
+ "mode": "light",
2124
+ "group": "component (internal)",
2125
+ "scopes": ["fgColor"]
2126
+ }
2127
+ }
2128
+ },
2129
+ "name": "display-plum-fgColor",
2130
+ "attributes": {},
2131
+ "path": ["display", "plum", "fgColor"]
2132
+ },
2133
+ "display-plum-borderColor-muted": {
2134
+ "value": "#f0cdfe",
2135
+ "$type": "color",
2136
+ "$extensions": {
2137
+ "org.primer.figma": {
2138
+ "collection": "mode",
2139
+ "mode": "light",
2140
+ "group": "component (internal)",
2141
+ "scopes": ["borderColor"]
2142
+ }
2143
+ },
2144
+ "filePath": "src/tokens/functional/color/light/display-light.json5",
2145
+ "isSource": true,
2146
+ "original": {
2147
+ "value": "{base.display.color.plum.1}",
2148
+ "$type": "color",
2149
+ "$extensions": {
2150
+ "org.primer.figma": {
2151
+ "collection": "mode",
2152
+ "mode": "light",
2153
+ "group": "component (internal)",
2154
+ "scopes": ["borderColor"]
2155
+ }
2156
+ }
2157
+ },
2158
+ "name": "display-plum-borderColor-muted",
2159
+ "attributes": {},
2160
+ "path": ["display", "plum", "borderColor", "muted"]
2161
+ },
2162
+ "display-plum-borderColor-emphasis": {
2163
+ "value": "#a830e8",
2164
+ "$type": "color",
2165
+ "$extensions": {
2166
+ "org.primer.figma": {
2167
+ "collection": "mode",
2168
+ "mode": "light",
2169
+ "group": "component (internal)",
2170
+ "scopes": ["borderColor"]
2171
+ }
2172
+ },
2173
+ "filePath": "src/tokens/functional/color/light/display-light.json5",
2174
+ "isSource": true,
2175
+ "original": {
2176
+ "value": "{base.display.color.plum.5}",
2177
+ "$type": "color",
2178
+ "$extensions": {
2179
+ "org.primer.figma": {
2180
+ "collection": "mode",
2181
+ "mode": "light",
2182
+ "group": "component (internal)",
2183
+ "scopes": ["borderColor"]
2184
+ }
2185
+ }
2186
+ },
2187
+ "name": "display-plum-borderColor-emphasis",
2188
+ "attributes": {},
2189
+ "path": ["display", "plum", "borderColor", "emphasis"]
2190
+ },
2046
2191
  "display-red-bgColor-muted": {
2047
2192
  "value": "#ffe2e0",
2048
2193
  "$type": "color",
package/dist/styleLint/functional/themes/light.json CHANGED
@@ -2043,6 +2043,151 @@
2043
2043
  "attributes": {},
2044
2044
  "path": ["display", "purple", "borderColor", "emphasis"]
2045
2045
  },
2046
+ "display-plum-bgColor-muted": {
2047
+ "value": "#f8e5ff",
2048
+ "$type": "color",
2049
+ "$extensions": {
2050
+ "org.primer.figma": {
2051
+ "collection": "mode",
2052
+ "mode": "light",
2053
+ "group": "component (internal)",
2054
+ "scopes": ["bgColor"]
2055
+ }
2056
+ },
2057
+ "filePath": "src/tokens/functional/color/light/display-light.json5",
2058
+ "isSource": true,
2059
+ "original": {
2060
+ "value": "{base.display.color.plum.0}",
2061
+ "$type": "color",
2062
+ "$extensions": {
2063
+ "org.primer.figma": {
2064
+ "collection": "mode",
2065
+ "mode": "light",
2066
+ "group": "component (internal)",
2067
+ "scopes": ["bgColor"]
2068
+ }
2069
+ }
2070
+ },
2071
+ "name": "display-plum-bgColor-muted",
2072
+ "attributes": {},
2073
+ "path": ["display", "plum", "bgColor", "muted"]
2074
+ },
2075
+ "display-plum-bgColor-emphasis": {
2076
+ "value": "#a830e8",
2077
+ "$type": "color",
2078
+ "$extensions": {
2079
+ "org.primer.figma": {
2080
+ "collection": "mode",
2081
+ "mode": "light",
2082
+ "group": "component (internal)",
2083
+ "scopes": ["bgColor"]
2084
+ }
2085
+ },
2086
+ "filePath": "src/tokens/functional/color/light/display-light.json5",
2087
+ "isSource": true,
2088
+ "original": {
2089
+ "value": "{base.display.color.plum.5}",
2090
+ "$type": "color",
2091
+ "$extensions": {
2092
+ "org.primer.figma": {
2093
+ "collection": "mode",
2094
+ "mode": "light",
2095
+ "group": "component (internal)",
2096
+ "scopes": ["bgColor"]
2097
+ }
2098
+ }
2099
+ },
2100
+ "name": "display-plum-bgColor-emphasis",
2101
+ "attributes": {},
2102
+ "path": ["display", "plum", "bgColor", "emphasis"]
2103
+ },
2104
+ "display-plum-fgColor": {
2105
+ "value": "#961edc",
2106
+ "$type": "color",
2107
+ "$extensions": {
2108
+ "org.primer.figma": {
2109
+ "collection": "mode",
2110
+ "mode": "light",
2111
+ "group": "component (internal)",
2112
+ "scopes": ["fgColor"]
2113
+ }
2114
+ },
2115
+ "filePath": "src/tokens/functional/color/light/display-light.json5",
2116
+ "isSource": true,
2117
+ "original": {
2118
+ "value": "{base.display.color.plum.6}",
2119
+ "$type": "color",
2120
+ "$extensions": {
2121
+ "org.primer.figma": {
2122
+ "collection": "mode",
2123
+ "mode": "light",
2124
+ "group": "component (internal)",
2125
+ "scopes": ["fgColor"]
2126
+ }
2127
+ }
2128
+ },
2129
+ "name": "display-plum-fgColor",
2130
+ "attributes": {},
2131
+ "path": ["display", "plum", "fgColor"]
2132
+ },
2133
+ "display-plum-borderColor-muted": {
2134
+ "value": "#f0cdfe",
2135
+ "$type": "color",
2136
+ "$extensions": {
2137
+ "org.primer.figma": {
2138
+ "collection": "mode",
2139
+ "mode": "light",
2140
+ "group": "component (internal)",
2141
+ "scopes": ["borderColor"]
2142
+ }
2143
+ },
2144
+ "filePath": "src/tokens/functional/color/light/display-light.json5",
2145
+ "isSource": true,
2146
+ "original": {
2147
+ "value": "{base.display.color.plum.1}",
2148
+ "$type": "color",
2149
+ "$extensions": {
2150
+ "org.primer.figma": {
2151
+ "collection": "mode",
2152
+ "mode": "light",
2153
+ "group": "component (internal)",
2154
+ "scopes": ["borderColor"]
2155
+ }
2156
+ }
2157
+ },
2158
+ "name": "display-plum-borderColor-muted",
2159
+ "attributes": {},
2160
+ "path": ["display", "plum", "borderColor", "muted"]
2161
+ },
2162
+ "display-plum-borderColor-emphasis": {
2163
+ "value": "#a830e8",
2164
+ "$type": "color",
2165
+ "$extensions": {
2166
+ "org.primer.figma": {
2167
+ "collection": "mode",
2168
+ "mode": "light",
2169
+ "group": "component (internal)",
2170
+ "scopes": ["borderColor"]
2171
+ }
2172
+ },
2173
+ "filePath": "src/tokens/functional/color/light/display-light.json5",
2174
+ "isSource": true,
2175
+ "original": {
2176
+ "value": "{base.display.color.plum.5}",
2177
+ "$type": "color",
2178
+ "$extensions": {
2179
+ "org.primer.figma": {
2180
+ "collection": "mode",
2181
+ "mode": "light",
2182
+ "group": "component (internal)",
2183
+ "scopes": ["borderColor"]
2184
+ }
2185
+ }
2186
+ },
2187
+ "name": "display-plum-borderColor-emphasis",
2188
+ "attributes": {},
2189
+ "path": ["display", "plum", "borderColor", "emphasis"]
2190
+ },
2046
2191
  "display-red-bgColor-muted": {
2047
2192
  "value": "#ffe2e0",
2048
2193
  "$type": "color",
package/dist/styleLint/functional/typography/typography.json CHANGED
@@ -540,6 +540,9 @@
540
540
  "value": 1.6,
541
541
  "$type": "number",
542
542
  "$extensions": {
543
+ "org.primer.data": {
544
+ "fontSize": 20
545
+ },
543
546
  "org.primer.figma": {
544
547
  "collection": "typography",
545
548
  "scopes": ["all"]
@@ -551,6 +554,9 @@
551
554
  "value": 1.6,
552
555
  "$type": "number",
553
556
  "$extensions": {
557
+ "org.primer.data": {
558
+ "fontSize": 20
559
+ },
554
560
  "org.primer.figma": {
555
561
  "collection": "typography",
556
562
  "scopes": ["all"]
@@ -777,11 +783,23 @@
777
783
  "text-body-weight": {
778
784
  "value": 400,
779
785
  "$type": "fontWeight",
786
+ "$extensions": {
787
+ "org.primer.figma": {
788
+ "collection": "typography",
789
+ "scopes": ["all"]
790
+ }
791
+ },
780
792
  "filePath": "src/tokens/functional/typography/typography.json",
781
793
  "isSource": true,
782
794
  "original": {
783
795
  "value": "{base.text.weight.normal}",
784
- "$type": "fontWeight"
796
+ "$type": "fontWeight",
797
+ "$extensions": {
798
+ "org.primer.figma": {
799
+ "collection": "typography",
800
+ "scopes": ["all"]
801
+ }
802
+ }
785
803
  },
786
804
  "name": "text-body-weight",
787
805
  "attributes": {},
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primer/primitives",
3
- "version": "8.1.0",
3
+ "version": "8.1.1-rc.31d9bb87",
4
4
  "description": "Typography, spacing, and color primitives for Primer design system",
5
5
  "files": [
6
6
  "dist",
package/src/tokens/base/size/size.json CHANGED
@@ -1,6 +1,16 @@
1
1
  {
2
2
  "base": {
3
3
  "size": {
4
+ "2": {
5
+ "$value": "2px",
6
+ "$type": "dimension",
7
+ "$extensions": {
8
+ "org.primer.figma": {
9
+ "collection": "base/size",
10
+ "scopes": ["size"]
11
+ }
12
+ }
13
+ },
4
14
  "4": {
5
15
  "$value": "4px",
6
16
  "$type": "dimension",
@@ -11,6 +21,16 @@
11
21
  }
12
22
  }
13
23
  },
24
+ "6": {
25
+ "$value": "6px",
26
+ "$type": "dimension",
27
+ "$extensions": {
28
+ "org.primer.figma": {
29
+ "collection": "base/size",
30
+ "scopes": ["size"]
31
+ }
32
+ }
33
+ },
14
34
  "8": {
15
35
  "$value": "8px",
16
36
  "$type": "dimension",
package/src/tokens/functional/color/dark/display-dark.json5 CHANGED
@@ -264,6 +264,72 @@
264
264
  },
265
265
  },
266
266
  },
267
+ plum: {
268
+ bgColor: {
269
+ muted: {
270
+ $value: '{base.display.color.plum.0}',
271
+ $type: 'color',
272
+ $extensions: {
273
+ 'org.primer.figma': {
274
+ collection: 'mode',
275
+ mode: 'light',
276
+ group: 'component (internal)',
277
+ scopes: ['bgColor'],
278
+ },
279
+ },
280
+ },
281
+ emphasis: {
282
+ $value: '{base.display.color.plum.5}',
283
+ $type: 'color',
284
+ $extensions: {
285
+ 'org.primer.figma': {
286
+ collection: 'mode',
287
+ mode: 'light',
288
+ group: 'component (internal)',
289
+ scopes: ['bgColor'],
290
+ },
291
+ },
292
+ },
293
+ },
294
+ fgColor: {
295
+ $value: '{base.display.color.plum.6}',
296
+ $type: 'color',
297
+ $extensions: {
298
+ 'org.primer.figma': {
299
+ collection: 'mode',
300
+ mode: 'light',
301
+ group: 'component (internal)',
302
+ scopes: ['fgColor'],
303
+ },
304
+ },
305
+ },
306
+ borderColor: {
307
+ muted: {
308
+ $value: '{base.display.color.plum.1}',
309
+ $type: 'color',
310
+ $extensions: {
311
+ 'org.primer.figma': {
312
+ collection: 'mode',
313
+ mode: 'light',
314
+ group: 'component (internal)',
315
+ scopes: ['borderColor'],
316
+ },
317
+ },
318
+ },
319
+ emphasis: {
320
+ $value: '{base.display.color.plum.5}',
321
+ $type: 'color',
322
+ $extensions: {
323
+ 'org.primer.figma': {
324
+ collection: 'mode',
325
+ mode: 'light',
326
+ group: 'component (internal)',
327
+ scopes: ['borderColor'],
328
+ },
329
+ },
330
+ },
331
+ },
332
+ },
267
333
  red: {
268
334
  bgColor: {
269
335
  muted: {
package/src/tokens/functional/color/dark/primitives-dark.json5 CHANGED
@@ -20,7 +20,7 @@
20
20
  },
21
21
  },
22
22
  muted: {
23
- $value: '{base.color.neutral.3}',
23
+ $value: '{base.color.neutral.2}',
24
24
  $type: 'color',
25
25
  $extensions: {
26
26
  'org.primer.figma': {
@@ -34,8 +34,8 @@
34
34
  },
35
35
  },
36
36
  mix: {
37
- color: '{base.color.neutral.4}',
38
- weight: 0.25,
37
+ color: '{base.color.neutral.3}',
38
+ weight: 0.95,
39
39
  },
40
40
  },
41
41
  onEmphasis: {
package/src/tokens/functional/color/light/display-light.json5 CHANGED
@@ -264,6 +264,72 @@
264
264
  },
265
265
  },
266
266
  },
267
+ plum: {
268
+ bgColor: {
269
+ muted: {
270
+ $value: '{base.display.color.plum.0}',
271
+ $type: 'color',
272
+ $extensions: {
273
+ 'org.primer.figma': {
274
+ collection: 'mode',
275
+ mode: 'light',
276
+ group: 'component (internal)',
277
+ scopes: ['bgColor'],
278
+ },
279
+ },
280
+ },
281
+ emphasis: {
282
+ $value: '{base.display.color.plum.5}',
283
+ $type: 'color',
284
+ $extensions: {
285
+ 'org.primer.figma': {
286
+ collection: 'mode',
287
+ mode: 'light',
288
+ group: 'component (internal)',
289
+ scopes: ['bgColor'],
290
+ },
291
+ },
292
+ },
293
+ },
294
+ fgColor: {
295
+ $value: '{base.display.color.plum.6}',
296
+ $type: 'color',
297
+ $extensions: {
298
+ 'org.primer.figma': {
299
+ collection: 'mode',
300
+ mode: 'light',
301
+ group: 'component (internal)',
302
+ scopes: ['fgColor'],
303
+ },
304
+ },
305
+ },
306
+ borderColor: {
307
+ muted: {
308
+ $value: '{base.display.color.plum.1}',
309
+ $type: 'color',
310
+ $extensions: {
311
+ 'org.primer.figma': {
312
+ collection: 'mode',
313
+ mode: 'light',
314
+ group: 'component (internal)',
315
+ scopes: ['borderColor'],
316
+ },
317
+ },
318
+ },
319
+ emphasis: {
320
+ $value: '{base.display.color.plum.5}',
321
+ $type: 'color',
322
+ $extensions: {
323
+ 'org.primer.figma': {
324
+ collection: 'mode',
325
+ mode: 'light',
326
+ group: 'component (internal)',
327
+ scopes: ['borderColor'],
328
+ },
329
+ },
330
+ },
331
+ },
332
+ },
267
333
  red: {
268
334
  bgColor: {
269
335
  muted: {
package/src/tokens/functional/typography/typography.json CHANGED
@@ -245,6 +245,9 @@
245
245
  "$value": 1.6,
246
246
  "$type": "number",
247
247
  "$extensions": {
248
+ "org.primer.data": {
249
+ "fontSize": 20
250
+ },
248
251
  "org.primer.figma": {
249
252
  "collection": "typography",
250
253
  "scopes": ["all"]
@@ -348,7 +351,13 @@
348
351
  },
349
352
  "weight": {
350
353
  "$value": "{base.text.weight.normal}",
351
- "$type": "fontWeight"
354
+ "$type": "fontWeight",
355
+ "$extensions": {
356
+ "org.primer.figma": {
357
+ "collection": "typography",
358
+ "scopes": ["all"]
359
+ }
360
+ }
352
361
  },
353
362
  "shorthand": {
354
363
  "large": {