@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/src/tokens/functional/color/dark/app-dark.json5 CHANGED
@@ -372,7 +372,7 @@
372
372
  syntax: {
373
373
  fgColor: {
374
374
  comment: {
375
- $value: '{base.color.neutral.3}',
375
+ $value: '{base.color.neutral.8}',
376
376
  $type: 'color',
377
377
  $extensions: {
378
378
  'org.primer.figma': {
@@ -499,7 +499,7 @@
499
499
  },
500
500
  },
501
501
  bgColor: {
502
- $value: '{base.color.neutral.9}',
502
+ $value: '{base.color.neutral.10}',
503
503
  $type: 'color',
504
504
  $extensions: {
505
505
  'org.primer.figma': {
@@ -512,7 +512,7 @@
512
512
  },
513
513
  borderColor: {
514
514
  divider: {
515
- $value: '{base.color.neutral.3}',
515
+ $value: '{base.color.neutral.4}',
516
516
  $type: 'color',
517
517
  $extensions: {
518
518
  'org.primer.figma': {
@@ -527,7 +527,7 @@
527
527
  },
528
528
  headerSearch: {
529
529
  bgColor: {
530
- $value: '{base.color.neutral.9}',
530
+ $value: '{base.color.neutral.10}',
531
531
  $type: 'color',
532
532
  $extensions: {
533
533
  'org.primer.figma': {
@@ -539,7 +539,7 @@
539
539
  },
540
540
  },
541
541
  borderColor: {
542
- $value: '{base.color.neutral.6}',
542
+ $value: '{base.color.neutral.7}',
543
543
  $type: 'color',
544
544
  $extensions: {
545
545
  'org.primer.figma': {
package/src/tokens/functional/color/dark/overrides/dark.dimmed.json5 CHANGED
@@ -4,6 +4,118 @@
4
4
  * @description All overwrites for functional color tokens for dark dimmed color mode are in this file
5
5
  */
6
6
  {
7
+ bgColor: {
8
+ default: {
9
+ $value: '{base.color.neutral.3}',
10
+ $type: 'color',
11
+ },
12
+ muted: {
13
+ $value: '{base.color.neutral.4}',
14
+ $type: 'color',
15
+ },
16
+ inset: {
17
+ $value: '{base.color.neutral.2}',
18
+ $type: 'color',
19
+ },
20
+ disabled: {
21
+ $value: '{base.color.neutral.5}',
22
+ $type: 'color',
23
+ },
24
+ neutral: {
25
+ emphasis: {
26
+ $value: '{base.color.neutral.8}',
27
+ $type: 'color',
28
+ },
29
+ },
30
+ },
31
+ fgColor: {
32
+ default: {
33
+ $value: '{base.color.neutral.11}',
34
+ $type: 'color',
35
+ },
36
+ onEmphasis: {
37
+ $value: '{base.color.neutral.12}',
38
+ $type: 'color',
39
+ },
40
+ disabled: {
41
+ $value: '{base.color.neutral.8}',
42
+ $type: 'color',
43
+ alpha: 1,
44
+ },
45
+ },
46
+ control: {
47
+ bgColor: {
48
+ rest: {
49
+ $value: '{base.color.neutral.5}',
50
+ $type: 'color',
51
+ },
52
+ hover: {
53
+ $value: '{base.color.neutral.6}',
54
+ $type: 'color',
55
+ },
56
+ active: {
57
+ $value: '{base.color.neutral.7}',
58
+ $type: 'color',
59
+ },
60
+ },
61
+ borderColor: {
62
+ rest: {
63
+ $value: '{borderColor.default}',
64
+ $type: 'color',
65
+ },
66
+ },
67
+ transparent: {
68
+ bgColor: {
69
+ hover: {
70
+ $value: '{base.color.neutral.8}',
71
+ $type: 'color',
72
+ alpha: 0.15,
73
+ },
74
+ active: {
75
+ $value: '{base.color.neutral.8}',
76
+ $type: 'color',
77
+ alpha: 0.2,
78
+ },
79
+ selected: {
80
+ $value: '{base.color.neutral.8}',
81
+ $type: 'color',
82
+ alpha: 0.1,
83
+ },
84
+ },
85
+ },
86
+ },
87
+ controlTrack: {
88
+ bgColor: {
89
+ rest: {
90
+ $value: '{base.color.neutral.5}',
91
+ $type: 'color',
92
+ },
93
+ hover: {
94
+ $value: '{base.color.neutral.6}',
95
+ $type: 'color',
96
+ },
97
+ active: {
98
+ $value: '{base.color.neutral.7}',
99
+ $type: 'color',
100
+ },
101
+ },
102
+ },
103
+ controlKnob: {
104
+ bgColor: {
105
+ rest: {
106
+ $value: '{bgColor.inset}',
107
+ $type: 'color',
108
+ $extensions: {
109
+ 'org.primer.figma': {
110
+ collection: 'mode',
111
+ mode: 'dark',
112
+ group: 'component (internal)',
113
+ scopes: ['bgColor'],
114
+ },
115
+ },
116
+ },
117
+ },
118
+ },
7
119
  diffBlob: {
8
120
  expander: {
9
121
  iconColor: {
@@ -12,6 +124,19 @@
12
124
  },
13
125
  },
14
126
  },
127
+ overlay: {
128
+ backdrop: {
129
+ bgColor: {
130
+ $value: '{base.color.neutral.4}',
131
+ $type: 'color',
132
+ alpha: 0.4,
133
+ },
134
+ },
135
+ bgColor: {
136
+ $value: '{base.color.neutral.5}',
137
+ $type: 'color',
138
+ },
139
+ },
15
140
  button: {
16
141
  primary: {
17
142
  bgColor: {
@@ -39,19 +164,31 @@
39
164
  },
40
165
  invisible: {
41
166
  iconColor: {
167
+ rest: {
168
+ $value: '{base.color.neutral.10}',
169
+ $type: 'color',
170
+ },
42
171
  hover: {
43
- $value: '{fgColor.muted}',
44
- $type: 'color',
45
- $extensions: {
46
- 'org.primer.figma': {
47
- collection: 'mode',
48
- mode: 'dark',
49
- group: 'component',
50
- scopes: ['fgColor'],
51
- },
52
- },
172
+ $value: '{base.color.neutral.10}',
173
+ $type: 'color',
53
174
  },
54
175
  },
55
176
  },
177
+ inactive: {
178
+ bgColor: {
179
+ $value: '{base.color.neutral.5}',
180
+ $type: 'color',
181
+ },
182
+ fgColor: {
183
+ $value: '{base.color.neutral.8}',
184
+ $type: 'color',
185
+ },
186
+ },
187
+ },
188
+ timelineBadge: {
189
+ bgColor: {
190
+ $value: '{base.color.neutral.4}',
191
+ $type: 'color',
192
+ },
56
193
  },
57
194
  }