@primer/primitives 9.0.0-rc.e0216c44 → 9.0.0

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 (87) hide show
  1. package/dist/css/functional/themes/dark-colorblind.css +262 -258
  2. package/dist/css/functional/themes/dark-dimmed.css +280 -276
  3. package/dist/css/functional/themes/dark-high-contrast.css +432 -428
  4. package/dist/css/functional/themes/dark-tritanopia.css +262 -258
  5. package/dist/css/functional/themes/dark.css +252 -248
  6. package/dist/css/functional/themes/light-colorblind.css +220 -216
  7. package/dist/css/functional/themes/light-high-contrast.css +252 -248
  8. package/dist/css/functional/themes/light-tritanopia.css +220 -216
  9. package/dist/css/functional/themes/light.css +210 -206
  10. package/dist/docs/functional/themes/dark-colorblind.json +325 -353
  11. package/dist/docs/functional/themes/dark-dimmed.json +351 -379
  12. package/dist/docs/functional/themes/dark-high-contrast.json +548 -538
  13. package/dist/docs/functional/themes/dark-tritanopia.json +323 -351
  14. package/dist/docs/functional/themes/dark.json +313 -341
  15. package/dist/docs/functional/themes/light-colorblind.json +305 -327
  16. package/dist/docs/functional/themes/light-high-contrast.json +353 -373
  17. package/dist/docs/functional/themes/light-tritanopia.json +304 -324
  18. package/dist/docs/functional/themes/light.json +294 -314
  19. package/dist/figma/figma.json +3 -3
  20. package/dist/figma/scales/dark-dimmed.json +147 -69
  21. package/dist/figma/scales/dark-high-constrast.json +145 -67
  22. package/dist/figma/scales/dark.json +120 -42
  23. package/dist/figma/scales/light-high-constrast.json +147 -69
  24. package/dist/figma/scales/light.json +118 -40
  25. package/dist/figma/shadows/dark-colorblind.json +179 -179
  26. package/dist/figma/shadows/dark-dimmed.json +179 -179
  27. package/dist/figma/shadows/dark-high-contrast.json +179 -179
  28. package/dist/figma/shadows/dark-tritanopia.json +179 -179
  29. package/dist/figma/shadows/dark.json +179 -179
  30. package/dist/figma/shadows/light-colorblind.json +123 -123
  31. package/dist/figma/shadows/light-high-contrast.json +123 -123
  32. package/dist/figma/shadows/light-tritanopia.json +123 -123
  33. package/dist/figma/shadows/light.json +123 -123
  34. package/dist/figma/themes/dark-colorblind.json +4632 -4613
  35. package/dist/figma/themes/dark-dimmed.json +1929 -1910
  36. package/dist/figma/themes/dark-high-contrast.json +3381 -3354
  37. package/dist/figma/themes/dark-tritanopia.json +4278 -4259
  38. package/dist/figma/themes/dark.json +4636 -4617
  39. package/dist/figma/themes/light-colorblind.json +2212 -2193
  40. package/dist/figma/themes/light-high-contrast.json +1878 -1860
  41. package/dist/figma/themes/light-tritanopia.json +2215 -2195
  42. package/dist/figma/themes/light.json +1873 -1853
  43. package/dist/internalCss/dark-colorblind.css +292 -278
  44. package/dist/internalCss/dark-dimmed.css +310 -296
  45. package/dist/internalCss/dark-high-contrast.css +462 -448
  46. package/dist/internalCss/dark-tritanopia.css +292 -278
  47. package/dist/internalCss/dark.css +282 -268
  48. package/dist/internalCss/light-colorblind.css +250 -236
  49. package/dist/internalCss/light-high-contrast.css +280 -266
  50. package/dist/internalCss/light-tritanopia.css +250 -236
  51. package/dist/internalCss/light.css +240 -226
  52. package/dist/styleLint/functional/themes/dark-colorblind.json +325 -353
  53. package/dist/styleLint/functional/themes/dark-dimmed.json +351 -379
  54. package/dist/styleLint/functional/themes/dark-high-contrast.json +548 -538
  55. package/dist/styleLint/functional/themes/dark-tritanopia.json +323 -351
  56. package/dist/styleLint/functional/themes/dark.json +313 -341
  57. package/dist/styleLint/functional/themes/light-colorblind.json +305 -327
  58. package/dist/styleLint/functional/themes/light-high-contrast.json +353 -373
  59. package/dist/styleLint/functional/themes/light-tritanopia.json +304 -324
  60. package/dist/styleLint/functional/themes/light.json +294 -314
  61. package/package.json +1 -1
  62. package/src/schemas/colorToken.ts +1 -1
  63. package/src/schemas/dimensionToken.ts +1 -0
  64. package/src/schemas/scopes.ts +10 -21
  65. package/src/tokens/base/color/dark/dark.dimmed.json5 +0 -162
  66. package/src/tokens/base/color/dark/dark.high-contrast.json5 +0 -92
  67. package/src/tokens/base/color/dark/dark.json5 +149 -104
  68. package/src/tokens/base/color/light/light.high-contrast.json5 +0 -92
  69. package/src/tokens/base/color/light/light.json5 +148 -103
  70. package/src/tokens/functional/color/dark/app-dark.json5 +5 -5
  71. package/src/tokens/functional/color/dark/overrides/dark.dimmed.json5 +147 -10
  72. package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 +211 -187
  73. package/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 +5 -7
  74. package/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 +5 -6
  75. package/src/tokens/functional/color/dark/patterns-dark.json5 +87 -96
  76. package/src/tokens/functional/color/dark/primitives-dark.json5 +27 -35
  77. package/src/tokens/functional/color/dark/syntax-dark.json5 +14 -14
  78. package/src/tokens/functional/color/light/app-light.json5 +5 -5
  79. package/src/tokens/functional/color/light/overrides/light.high-contrast.json5 +103 -119
  80. package/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 +5 -7
  81. package/src/tokens/functional/color/light/overrides/light.tritanopia.json5 +5 -6
  82. package/src/tokens/functional/color/light/patterns-light.json5 +89 -97
  83. package/src/tokens/functional/color/light/primitives-light.json5 +27 -32
  84. package/src/tokens/functional/color/light/syntax-light.json5 +14 -14
  85. package/src/tokens/functional/shadow/dark.json5 +15 -15
  86. package/src/tokens/functional/shadow/light.json5 +16 -16
  87. package/src/transformers/figmaAttributes.ts +6 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primer/primitives",
3
- "version": "9.0.0-rc.e0216c44",
3
+ "version": "9.0.0",
4
4
  "description": "Typography, spacing, and color primitives for Primer design system",
5
5
  "engines": {
6
6
  "node": ">=18.18.0 <18.19.0"
package/src/schemas/colorToken.ts CHANGED
@@ -42,7 +42,7 @@ export const colorToken = baseToken
42
42
  'light tritanopia',
43
43
  'dark tritanopia',
44
44
  ]).optional(),
45
- scopes: scopes(['all', 'bgColor', 'fgColor', 'borderColor']).optional(),
45
+ scopes: scopes(['all', 'bgColor', 'fgColor', 'borderColor', 'effectColor']).optional(),
46
46
  }),
47
47
  })
48
48
  .optional(),
package/src/schemas/dimensionToken.ts CHANGED
@@ -20,6 +20,7 @@ export const dimensionToken = baseToken
20
20
  'gap',
21
21
  'radius',
22
22
  'borderColor',
23
+ 'effectFloat',
23
24
  'fontSize',
24
25
  'letterSpacing',
25
26
  'lineHeight',
package/src/schemas/scopes.ts CHANGED
@@ -2,33 +2,17 @@ import {z} from 'zod'
2
2
  import {joinFriendly} from '../utilities/joinFriendly'
3
3
  import {schemaErrorMessage} from '../utilities/schemaErrorMessage'
4
4
 
5
- export type ValidScope =
6
- | 'all'
7
- | 'bgColor'
8
- | 'fgColor'
9
- | 'borderColor'
10
- | 'size'
11
- | 'gap'
12
- | 'radius'
13
- | 'effectColor'
14
- | 'opacity'
15
- | 'fontFamily'
16
- | 'fontStyle'
17
- | 'fontWeight'
18
- | 'fontSize'
19
- | 'lineHeight'
20
- | 'letterSpacing'
21
- | 'paragraphSpacing'
22
- | 'paragraphIndent'
23
- const validScopes: ValidScope[] = [
5
+ const validScopes = [
24
6
  'all',
25
7
  'bgColor',
26
8
  'fgColor',
27
9
  'borderColor',
10
+ 'borderWidth',
28
11
  'size',
29
12
  'gap',
30
13
  'radius',
31
14
  'effectColor',
15
+ 'effectFloat',
32
16
  'opacity',
33
17
  'fontFamily',
34
18
  'fontStyle',
@@ -38,14 +22,19 @@ const validScopes: ValidScope[] = [
38
22
  'letterSpacing',
39
23
  'paragraphSpacing',
40
24
  'paragraphIndent',
41
- ]
25
+ ] as const
26
+
27
+ export type ValidScope = (typeof validScopes)[number]
42
28
 
43
29
  export const scopes = (scopeSubset?: ValidScope[]) => {
44
30
  const scopeArray = scopeSubset ?? validScopes
45
31
  return z.array(z.string()).refine(
46
32
  value => value.every(item => scopeArray.includes(item as ValidScope)),
47
33
  value => ({
48
- message: schemaErrorMessage(`Invalid scope: "${value}"`, `Valid scopes are: ${joinFriendly(scopeArray)}`),
34
+ message: schemaErrorMessage(
35
+ `Invalid scope: "${value}"`,
36
+ `Valid scopes are: ${joinFriendly(scopeArray as string[])}`,
37
+ ),
49
38
  }),
50
39
  )
51
40
  }
package/src/tokens/base/color/dark/dark.dimmed.json5 CHANGED
@@ -13,16 +13,6 @@
13
13
  collection: 'base/color/dark-dimmed',
14
14
  },
15
15
  },
16
- $extensions: {
17
- 'org.primer.figma': {
18
- collection: 'base/color/dark-dimmed',
19
- },
20
- },
21
- $extensions: {
22
- 'org.primer.figma': {
23
- collection: 'base/color/dark-dimmed',
24
- },
25
- },
26
16
  },
27
17
  white: {
28
18
  $value: '#cdd9e5',
@@ -32,158 +22,6 @@
32
22
  collection: 'base/color/dark-dimmed',
33
23
  },
34
24
  },
35
- $extensions: {
36
- 'org.primer.figma': {
37
- collection: 'base/color/dark-dimmed',
38
- },
39
- },
40
- $extensions: {
41
- 'org.primer.figma': {
42
- collection: 'base/color/dark-dimmed',
43
- },
44
- },
45
- },
46
- neutral: {
47
- '0': {
48
- $value: '#cdd9e5',
49
- $type: 'color',
50
- $extensions: {
51
- 'org.primer.figma': {
52
- collection: 'base/color/dark-dimmed',
53
- },
54
- },
55
- $extensions: {
56
- 'org.primer.figma': {
57
- collection: 'base/color/dark-dimmed',
58
- },
59
- },
60
- },
61
- '1': {
62
- $value: '#adbac7',
63
- $type: 'color',
64
- $extensions: {
65
- 'org.primer.figma': {
66
- collection: 'base/color/dark-dimmed',
67
- },
68
- },
69
- $extensions: {
70
- 'org.primer.figma': {
71
- collection: 'base/color/dark-dimmed',
72
- },
73
- },
74
- },
75
- '2': {
76
- $value: '#909dab',
77
- $type: 'color',
78
- $extensions: {
79
- 'org.primer.figma': {
80
- collection: 'base/color/dark-dimmed',
81
- },
82
- },
83
- $extensions: {
84
- 'org.primer.figma': {
85
- collection: 'base/color/dark-dimmed',
86
- },
87
- },
88
- },
89
- '3': {
90
- $value: '#768390',
91
- $type: 'color',
92
- $extensions: {
93
- 'org.primer.figma': {
94
- collection: 'base/color/dark-dimmed',
95
- },
96
- },
97
- $extensions: {
98
- 'org.primer.figma': {
99
- collection: 'base/color/dark-dimmed',
100
- },
101
- },
102
- },
103
- '4': {
104
- $value: '#636e7b',
105
- $type: 'color',
106
- $extensions: {
107
- 'org.primer.figma': {
108
- collection: 'base/color/dark-dimmed',
109
- },
110
- },
111
- $extensions: {
112
- 'org.primer.figma': {
113
- collection: 'base/color/dark-dimmed',
114
- },
115
- },
116
- },
117
- '5': {
118
- $value: '#545d68',
119
- $type: 'color',
120
- $extensions: {
121
- 'org.primer.figma': {
122
- collection: 'base/color/dark-dimmed',
123
- },
124
- },
125
- $extensions: {
126
- 'org.primer.figma': {
127
- collection: 'base/color/dark-dimmed',
128
- },
129
- },
130
- },
131
- '6': {
132
- $value: '#444c56',
133
- $type: 'color',
134
- $extensions: {
135
- 'org.primer.figma': {
136
- collection: 'base/color/dark-dimmed',
137
- },
138
- },
139
- $extensions: {
140
- 'org.primer.figma': {
141
- collection: 'base/color/dark-dimmed',
142
- },
143
- },
144
- },
145
- '7': {
146
- $value: '#373e47',
147
- $type: 'color',
148
- $extensions: {
149
- 'org.primer.figma': {
150
- collection: 'base/color/dark-dimmed',
151
- },
152
- },
153
- $extensions: {
154
- 'org.primer.figma': {
155
- collection: 'base/color/dark-dimmed',
156
- },
157
- },
158
- },
159
- '8': {
160
- $value: '#2d333b',
161
- $type: 'color',
162
- $extensions: {
163
- 'org.primer.figma': {
164
- collection: 'base/color/dark-dimmed',
165
- },
166
- },
167
- $extensions: {
168
- 'org.primer.figma': {
169
- collection: 'base/color/dark-dimmed',
170
- },
171
- },
172
- },
173
- '9': {
174
- $value: '#22272e',
175
- $type: 'color',
176
- $extensions: {
177
- 'org.primer.figma': {
178
- collection: 'base/color/dark-dimmed',
179
- },
180
- },
181
- $extensions: {
182
- 'org.primer.figma': {
183
- collection: 'base/color/dark-dimmed',
184
- },
185
- },
186
- },
187
25
  },
188
26
  blue: {
189
27
  '0': {
package/src/tokens/base/color/dark/dark.high-contrast.json5 CHANGED
@@ -23,98 +23,6 @@
23
23
  },
24
24
  },
25
25
  },
26
- neutral: {
27
- '0': {
28
- $value: '#ffffff',
29
- $type: 'color',
30
- $extensions: {
31
- 'org.primer.figma': {
32
- collection: 'base/color/dark-high-contrast',
33
- },
34
- },
35
- },
36
- '1': {
37
- $value: '#f0f3f6',
38
- $type: 'color',
39
- $extensions: {
40
- 'org.primer.figma': {
41
- collection: 'base/color/dark-high-contrast',
42
- },
43
- },
44
- },
45
- '2': {
46
- $value: '#d9dee3',
47
- $type: 'color',
48
- $extensions: {
49
- 'org.primer.figma': {
50
- collection: 'base/color/dark-high-contrast',
51
- },
52
- },
53
- },
54
- '3': {
55
- $value: '#bdc4cc',
56
- $type: 'color',
57
- $extensions: {
58
- 'org.primer.figma': {
59
- collection: 'base/color/dark-high-contrast',
60
- },
61
- },
62
- },
63
- '4': {
64
- $value: '#9ea7b3',
65
- $type: 'color',
66
- $extensions: {
67
- 'org.primer.figma': {
68
- collection: 'base/color/dark-high-contrast',
69
- },
70
- },
71
- },
72
- '5': {
73
- $value: '#7a828e',
74
- $type: 'color',
75
- $extensions: {
76
- 'org.primer.figma': {
77
- collection: 'base/color/dark-high-contrast',
78
- },
79
- },
80
- },
81
- '6': {
82
- $value: '#525964',
83
- $type: 'color',
84
- $extensions: {
85
- 'org.primer.figma': {
86
- collection: 'base/color/dark-high-contrast',
87
- },
88
- },
89
- },
90
- '7': {
91
- $value: '#3D424D',
92
- $type: 'color',
93
- $extensions: {
94
- 'org.primer.figma': {
95
- collection: 'base/color/dark-high-contrast',
96
- },
97
- },
98
- },
99
- '8': {
100
- $value: '#272b33',
101
- $type: 'color',
102
- $extensions: {
103
- 'org.primer.figma': {
104
- collection: 'base/color/dark-high-contrast',
105
- },
106
- },
107
- },
108
- '9': {
109
- $value: '#0a0c10',
110
- $type: 'color',
111
- $extensions: {
112
- 'org.primer.figma': {
113
- collection: 'base/color/dark-high-contrast',
114
- },
115
- },
116
- },
117
- },
118
26
  blue: {
119
27
  '0': {
120
28
  $value: '#caeaff',