@primer/primitives 10.0.0-rc.d2acd2c0 → 10.0.0-rc.dd3dde40

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 (121) hide show
  1. package/README.md +2 -2
  2. package/dist/build/PrimerStyleDictionary.js +27 -26
  3. package/dist/build/filters/isCubicBezier.d.ts +7 -0
  4. package/dist/build/filters/isCubicBezier.js +10 -0
  5. package/dist/build/formats/typescriptExportDefinition.js +2 -2
  6. package/dist/build/parsers/w3cJsonParser.js +2 -2
  7. package/dist/build/platforms/css.js +1 -0
  8. package/dist/build/schemas/borderToken.d.ts +3 -3
  9. package/dist/build/schemas/colorToken.d.ts +3 -3
  10. package/dist/build/schemas/cubicBezierToken.d.ts +18 -0
  11. package/dist/build/schemas/cubicBezierToken.js +8 -0
  12. package/dist/build/schemas/designToken.js +2 -1
  13. package/dist/build/schemas/dimensionToken.d.ts +3 -3
  14. package/dist/build/schemas/durationToken.d.ts +3 -3
  15. package/dist/build/schemas/fontFamilyToken.d.ts +3 -3
  16. package/dist/build/schemas/fontWeightToken.d.ts +3 -3
  17. package/dist/build/schemas/numberToken.d.ts +3 -3
  18. package/dist/build/schemas/shadowToken.d.ts +3 -3
  19. package/dist/build/schemas/stringToken.d.ts +3 -3
  20. package/dist/build/schemas/tokenType.d.ts +1 -1
  21. package/dist/build/schemas/typographyToken.d.ts +3 -3
  22. package/dist/build/schemas/validTokenType.d.ts +1 -1
  23. package/dist/build/schemas/validTokenType.js +1 -0
  24. package/dist/build/schemas/viewportRangeToken.d.ts +3 -3
  25. package/dist/build/transformers/cubicBezierToCss.d.ts +8 -0
  26. package/dist/build/transformers/cubicBezierToCss.js +23 -0
  27. package/dist/build/transformers/durationToCss.js +2 -2
  28. package/dist/build/transformers/index.d.ts +1 -0
  29. package/dist/build/transformers/index.js +1 -0
  30. package/dist/css/base/motion/motion.css +17 -0
  31. package/dist/css/functional/motion/motion.css +4 -3
  32. package/dist/css/functional/themes/dark-colorblind.css +58 -38
  33. package/dist/css/functional/themes/dark-dimmed.css +44 -24
  34. package/dist/css/functional/themes/dark-high-contrast.css +42 -22
  35. package/dist/css/functional/themes/dark-tritanopia.css +44 -24
  36. package/dist/css/functional/themes/dark.css +42 -22
  37. package/dist/css/functional/themes/light-colorblind.css +60 -40
  38. package/dist/css/functional/themes/light-high-contrast.css +44 -24
  39. package/dist/css/functional/themes/light-tritanopia.css +42 -22
  40. package/dist/css/functional/themes/light.css +42 -22
  41. package/dist/css/functional/typography/typography.css +43 -43
  42. package/dist/css/primitives.css +64 -46
  43. package/dist/docs/base/motion/motion.json +205 -0
  44. package/dist/docs/functional/motion/motion.json +18 -3
  45. package/dist/docs/functional/themes/dark-colorblind.json +564 -282
  46. package/dist/docs/functional/themes/dark-dimmed.json +580 -276
  47. package/dist/docs/functional/themes/dark-high-contrast.json +408 -168
  48. package/dist/docs/functional/themes/dark-tritanopia.json +558 -280
  49. package/dist/docs/functional/themes/dark.json +564 -276
  50. package/dist/docs/functional/themes/light-colorblind.json +388 -108
  51. package/dist/docs/functional/themes/light-high-contrast.json +353 -83
  52. package/dist/docs/functional/themes/light-tritanopia.json +327 -81
  53. package/dist/docs/functional/themes/light.json +356 -78
  54. package/dist/fallbacks/base/motion/motion.json +17 -0
  55. package/dist/fallbacks/functional/motion/motion.json +1 -0
  56. package/dist/figma/dimension/dimension.json +518 -518
  57. package/dist/figma/figma.json +19 -19
  58. package/dist/figma/scales/dark-dimmed.json +3536 -656
  59. package/dist/figma/scales/dark-high-constrast.json +3535 -655
  60. package/dist/figma/scales/dark.json +3371 -491
  61. package/dist/figma/scales/light-high-constrast.json +3533 -653
  62. package/dist/figma/scales/light.json +3370 -490
  63. package/dist/figma/shadows/dark-colorblind.json +285 -285
  64. package/dist/figma/shadows/dark-dimmed.json +285 -285
  65. package/dist/figma/shadows/dark-high-contrast.json +285 -285
  66. package/dist/figma/shadows/dark-tritanopia.json +285 -285
  67. package/dist/figma/shadows/dark.json +285 -285
  68. package/dist/figma/shadows/light-colorblind.json +254 -254
  69. package/dist/figma/shadows/light-high-contrast.json +254 -254
  70. package/dist/figma/shadows/light-tritanopia.json +254 -254
  71. package/dist/figma/shadows/light.json +254 -254
  72. package/dist/figma/themes/dark-colorblind.json +5197 -5068
  73. package/dist/figma/themes/dark-dimmed.json +5526 -5351
  74. package/dist/figma/themes/dark-high-contrast.json +4361 -4251
  75. package/dist/figma/themes/dark-tritanopia.json +5315 -5187
  76. package/dist/figma/themes/dark.json +5740 -5581
  77. package/dist/figma/themes/light-colorblind.json +5104 -4929
  78. package/dist/figma/themes/light-high-contrast.json +4462 -4319
  79. package/dist/figma/themes/light-tritanopia.json +5176 -5050
  80. package/dist/figma/themes/light.json +5657 -5500
  81. package/dist/figma/typography/typography.json +162 -162
  82. package/dist/internalCss/dark-colorblind.css +58 -38
  83. package/dist/internalCss/dark-dimmed.css +44 -24
  84. package/dist/internalCss/dark-high-contrast.css +42 -22
  85. package/dist/internalCss/dark-tritanopia.css +44 -24
  86. package/dist/internalCss/dark.css +42 -22
  87. package/dist/internalCss/light-colorblind.css +60 -40
  88. package/dist/internalCss/light-high-contrast.css +44 -24
  89. package/dist/internalCss/light-tritanopia.css +42 -22
  90. package/dist/internalCss/light.css +42 -22
  91. package/dist/styleLint/base/motion/motion.json +205 -0
  92. package/dist/styleLint/functional/motion/motion.json +18 -3
  93. package/dist/styleLint/functional/themes/dark-colorblind.json +564 -282
  94. package/dist/styleLint/functional/themes/dark-dimmed.json +580 -276
  95. package/dist/styleLint/functional/themes/dark-high-contrast.json +407 -167
  96. package/dist/styleLint/functional/themes/dark-tritanopia.json +558 -280
  97. package/dist/styleLint/functional/themes/dark.json +564 -276
  98. package/dist/styleLint/functional/themes/light-colorblind.json +388 -108
  99. package/dist/styleLint/functional/themes/light-high-contrast.json +353 -83
  100. package/dist/styleLint/functional/themes/light-tritanopia.json +327 -81
  101. package/dist/styleLint/functional/themes/light.json +356 -78
  102. package/package.json +21 -29
  103. package/src/tokens/base/motion/easing.json5 +26 -0
  104. package/src/tokens/base/motion/timing.json5 +50 -0
  105. package/src/tokens/functional/color/dark/app-dark.json5 +203 -88
  106. package/src/tokens/functional/color/dark/data-vis-dark.json5 +20 -20
  107. package/src/tokens/functional/color/dark/display-dark.json5 +95 -95
  108. package/src/tokens/functional/color/dark/overrides/dark.dimmed.json5 +0 -8
  109. package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 +39 -26
  110. package/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 +56 -30
  111. package/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 +37 -14
  112. package/src/tokens/functional/color/dark/patterns-dark.json5 +16 -4
  113. package/src/tokens/functional/color/dark/primitives-dark.json5 +1 -1
  114. package/src/tokens/functional/color/light/app-light.json5 +195 -85
  115. package/src/tokens/functional/color/light/data-vis-light.json5 +20 -20
  116. package/src/tokens/functional/color/light/overrides/light.high-contrast.json5 +25 -25
  117. package/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 +61 -33
  118. package/src/tokens/functional/color/light/overrides/light.tritanopia.json5 +62 -10
  119. package/src/tokens/functional/color/light/patterns-light.json5 +13 -1
  120. package/src/tokens/functional/motion/loading.json5 +1 -1
  121. package/src/tokens/functional/motion/patterns.json5 +9 -2
@@ -20,10 +20,6 @@
20
20
  danger: {
21
21
  $value: '{base.color.orange.5}',
22
22
  $type: 'color',
23
- mix: {
24
- color: '{base.color.orange.4}',
25
- weight: 0.05,
26
- },
27
23
  },
28
24
  },
29
25
  bgColor: {
@@ -40,12 +36,11 @@
40
36
  },
41
37
  open: {
42
38
  muted: {
43
- $value: '{base.color.orange.3}',
39
+ $value: '{base.color.orange.0}',
44
40
  $type: 'color',
45
- alpha: 0.4,
46
41
  },
47
42
  emphasis: {
48
- $value: '{base.color.orange.4}',
43
+ $value: '{base.color.orange.5}',
49
44
  $type: 'color',
50
45
  },
51
46
  },
@@ -119,42 +114,75 @@
119
114
  },
120
115
  },
121
116
  diffBlob: {
122
- addition: {
117
+ additionNum: {
123
118
  bgColor: {
124
- num: {
125
- $value: '{base.color.blue.3}',
126
- $type: 'color',
127
- mix: null,
128
- alpha: 0.4,
129
- },
130
- line: {
131
- $value: '{base.color.blue.0}',
132
- $type: 'color',
133
- alpha: 0.5,
134
- },
135
- word: {
136
- $value: '{base.color.blue.3}',
137
- $type: 'color',
138
- alpha: 0.4,
119
+ $value: '{base.color.blue.1}',
120
+ $type: 'color',
121
+ },
122
+ },
123
+ additionWord: {
124
+ bgColor: {
125
+ $value: '{base.color.blue.1}',
126
+ $type: 'color',
127
+ },
128
+ },
129
+ deletionNum: {
130
+ bgColor: {
131
+ $value: '{base.color.orange.1}',
132
+ $type: 'color',
133
+ },
134
+ },
135
+ deletionWord: {
136
+ bgColor: {
137
+ $value: '{base.color.orange.1}',
138
+ $type: 'color',
139
+ },
140
+ },
141
+ hunkLine: {
142
+ bgColor: {
143
+ $value: '{base.color.neutral.1}',
144
+ $type: 'color',
145
+ $extensions: {
146
+ 'org.primer.figma': {
147
+ collection: 'mode',
148
+ mode: 'light',
149
+ group: 'component',
150
+ scopes: ['bgColor'],
151
+ },
139
152
  },
140
153
  },
141
154
  },
142
- deletion: {
155
+ hunkNum: {
143
156
  bgColor: {
144
- num: {
145
- $value: '{base.color.orange.3}',
157
+ rest: {
158
+ $value: '{base.color.neutral.3}',
146
159
  $type: 'color',
147
- alpha: 0.4,
160
+ $extensions: {
161
+ 'org.primer.figma': {
162
+ collection: 'mode',
163
+ mode: 'light',
164
+ group: 'component',
165
+ scopes: ['bgColor'],
166
+ },
167
+ },
148
168
  },
149
- line: {
150
- $value: '{base.color.orange.0}',
169
+ hover: {
170
+ $value: '{base.color.neutral.7}',
151
171
  $type: 'color',
152
- alpha: 0.5,
172
+ $extensions: {
173
+ 'org.primer.figma': {
174
+ collection: 'mode',
175
+ mode: 'light',
176
+ group: 'component',
177
+ scopes: ['bgColor'],
178
+ },
179
+ },
153
180
  },
154
- word: {
155
- $value: '{base.color.orange.2}',
181
+ },
182
+ fgColor: {
183
+ hover: {
184
+ $value: '{fgColor.default}',
156
185
  $type: 'color',
157
- alpha: 0.5,
158
186
  },
159
187
  },
160
188
  },
@@ -114,22 +114,74 @@
114
114
  },
115
115
  },
116
116
  diffBlob: {
117
- addition: {
117
+ additionNum: {
118
118
  bgColor: {
119
- num: {
120
- $value: '{base.color.blue.1}',
119
+ $value: '{base.color.blue.1}',
120
+ $type: 'color',
121
+ },
122
+ },
123
+ additionWord: {
124
+ bgColor: {
125
+ $value: '{base.color.blue.1}',
126
+ $type: 'color',
127
+ },
128
+ },
129
+ deletionNum: {
130
+ bgColor: {
131
+ $value: '{base.color.red.1}',
132
+ $type: 'color',
133
+ },
134
+ },
135
+ deletionWord: {
136
+ bgColor: {
137
+ $value: '{base.color.red.1}',
138
+ $type: 'color',
139
+ },
140
+ },
141
+ hunkLine: {
142
+ bgColor: {
143
+ $value: '{base.color.neutral.1}',
144
+ $type: 'color',
145
+ $extensions: {
146
+ 'org.primer.figma': {
147
+ collection: 'mode',
148
+ mode: 'light',
149
+ group: 'component',
150
+ scopes: ['bgColor'],
151
+ },
152
+ },
153
+ },
154
+ },
155
+ hunkNum: {
156
+ bgColor: {
157
+ rest: {
158
+ $value: '{base.color.neutral.3}',
121
159
  $type: 'color',
122
- mix: {
123
- color: '{base.color.blue.0}',
124
- weight: 0.8,
160
+ $extensions: {
161
+ 'org.primer.figma': {
162
+ collection: 'mode',
163
+ mode: 'light',
164
+ group: 'component',
165
+ scopes: ['bgColor'],
166
+ },
125
167
  },
126
168
  },
127
- line: {
128
- $value: '{base.color.blue.0}',
169
+ hover: {
170
+ $value: '{base.color.neutral.7}',
129
171
  $type: 'color',
172
+ $extensions: {
173
+ 'org.primer.figma': {
174
+ collection: 'mode',
175
+ mode: 'light',
176
+ group: 'component',
177
+ scopes: ['bgColor'],
178
+ },
179
+ },
130
180
  },
131
- word: {
132
- $value: '{base.color.blue.1}',
181
+ },
182
+ fgColor: {
183
+ hover: {
184
+ $value: '{fgColor.default}',
133
185
  $type: 'color',
134
186
  },
135
187
  },
@@ -772,7 +772,7 @@
772
772
  scopes: ['bgColor'],
773
773
  },
774
774
  },
775
- }
775
+ },
776
776
  },
777
777
  },
778
778
  button: {
@@ -1079,6 +1079,18 @@
1079
1079
  },
1080
1080
  },
1081
1081
  },
1082
+ active: {
1083
+ $value: '{control.fgColor.rest}',
1084
+ $type: 'color',
1085
+ $extensions: {
1086
+ 'org.primer.figma': {
1087
+ collection: 'mode',
1088
+ mode: 'light',
1089
+ group: 'component (internal)',
1090
+ scopes: ['fgColor'],
1091
+ },
1092
+ },
1093
+ },
1082
1094
  disabled: {
1083
1095
  $value: '{control.fgColor.disabled}',
1084
1096
  $type: 'color',
@@ -7,7 +7,7 @@
7
7
  loading: {
8
8
  delay: {
9
9
  default: {
10
- $value: '1000ms',
10
+ $value: '{base.duration.1000}',
11
11
  $type: 'duration',
12
12
  $description: 'The amount of time to wait before showing a loading indicator or announcing a loading state to assistive technologies.',
13
13
  },
@@ -7,17 +7,24 @@
7
7
  spinner: {
8
8
  duration: {
9
9
  rotation: {
10
- $value: '1000ms',
10
+ $value: '{base.duration.1000}',
11
11
  $type: 'duration',
12
12
  $description: 'The amount of time it takes the "Spinner" loading indicator to make a full 360deg rotation',
13
13
  },
14
14
  },
15
+ easing: {
16
+ rotation: {
17
+ $value: '{base.easing.linear}',
18
+ $type: 'cubicBezier',
19
+ $description: 'The easing curve for the "Spinner" loading indicator rotation',
20
+ },
21
+ },
15
22
  },
16
23
  skeletonLoader: {
17
24
  shimmer: {
18
25
  duration: {
19
26
  scale: {
20
- $value: '1000ms',
27
+ $value: '{base.duration.1000}',
21
28
  $type: 'duration',
22
29
  $description: 'The amount of times it takes the "shimmer" effect to go from the start (left) of the skeleton loader to the end (right)',
23
30
  },