@primer/primitives 6.0.0 → 7.0.0-next.0-rc.41d503c

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 (34) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/js/colors/dark.d.ts +19 -60
  3. package/dist/js/colors/dark.js +19 -60
  4. package/dist/js/colors/dark_colorblind.d.ts +19 -60
  5. package/dist/js/colors/dark_colorblind.js +19 -60
  6. package/dist/js/colors/dark_dimmed.d.ts +19 -60
  7. package/dist/js/colors/dark_dimmed.js +19 -60
  8. package/dist/js/colors/dark_high_contrast.d.ts +19 -60
  9. package/dist/js/colors/dark_high_contrast.js +19 -60
  10. package/dist/js/colors/index.d.ts +114 -360
  11. package/dist/js/colors/light.d.ts +19 -60
  12. package/dist/js/colors/light.js +19 -60
  13. package/dist/js/colors/light_colorblind.d.ts +19 -60
  14. package/dist/js/colors/light_colorblind.js +19 -60
  15. package/dist/js/index.d.ts +114 -360
  16. package/dist/json/colors/dark.json +19 -60
  17. package/dist/json/colors/dark_colorblind.json +19 -60
  18. package/dist/json/colors/dark_dimmed.json +19 -60
  19. package/dist/json/colors/dark_high_contrast.json +19 -60
  20. package/dist/json/colors/light.json +19 -60
  21. package/dist/json/colors/light_colorblind.json +19 -60
  22. package/dist/scss/colors/_dark.scss +12 -31
  23. package/dist/scss/colors/_dark_colorblind.scss +12 -31
  24. package/dist/scss/colors/_dark_dimmed.scss +12 -31
  25. package/dist/scss/colors/_dark_high_contrast.scss +12 -31
  26. package/dist/scss/colors/_light.scss +12 -31
  27. package/dist/scss/colors/_light_colorblind.scss +12 -31
  28. package/dist/ts/colors/dark.ts +19 -60
  29. package/dist/ts/colors/dark_colorblind.ts +19 -60
  30. package/dist/ts/colors/dark_dimmed.ts +19 -60
  31. package/dist/ts/colors/dark_high_contrast.ts +19 -60
  32. package/dist/ts/colors/light.ts +19 -60
  33. package/dist/ts/colors/light_colorblind.ts +19 -60
  34. package/package.json +4 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @primer/primitives
2
2
 
3
+ ## 7.0.0-next.0
4
+
5
+ ### Major Changes
6
+
7
+ - [#254](https://github.com/primer/primitives/pull/254) [`71bd715`](https://github.com/primer/primitives/commit/71bd715b7bf7ebf65c6c75e123e9a59e379661f5) Thanks [@jonrohan](https://github.com/jonrohan)! - Rename color blind themes
8
+
9
+ * [#265](https://github.com/primer/primitives/pull/265) [`9517ebb`](https://github.com/primer/primitives/commit/9517ebb5ff5ebd5f9f7d681e6c0ab0b1ed4ff9e7) Thanks [@tobiasahlin](https://github.com/tobiasahlin)! - Prepare for new gloss buttons with color mode support
10
+
11
+ ## 6.1.0
12
+
13
+ ### Minor Changes
14
+
15
+ - [#256](https://github.com/primer/primitives/pull/256) [`893d873`](https://github.com/primer/primitives/commit/893d873c57240df02a23a82c178d9a3a0ca6a983) Thanks [@auareyou](https://github.com/auareyou)! - Add `actionListItem` variables
16
+
3
17
  ## 6.0.0
4
18
 
5
19
  ### Major Changes
package/dist/js/colors/dark.d.ts CHANGED
@@ -176,67 +176,13 @@ declare const _default: {
176
176
  gradientOut: string;
177
177
  };
178
178
  mktg: {
179
- success: string;
180
- info: string;
181
- bgShadeGradient: {
182
- top: string;
183
- bottom: string;
184
- };
185
179
  btn: {
186
- bg: {
187
- top: string;
188
- bottom: string;
189
- };
190
- bgOverlay: {
191
- top: string;
192
- bottom: string;
193
- };
194
- text: string;
195
- primary: {
196
- bg: {
197
- top: string;
198
- bottom: string;
199
- };
200
- bgOverlay: {
201
- top: string;
202
- bottom: string;
203
- };
204
- text: string;
205
- };
206
- enterprise: {
207
- bg: {
208
- top: string;
209
- bottom: string;
210
- };
211
- bgOverlay: {
212
- top: string;
213
- bottom: string;
214
- };
215
- text: string;
216
- };
217
- outline: {
218
- text: string;
219
- border: string;
220
- hover: {
221
- text: string;
222
- border: string;
223
- };
224
- focus: {
225
- border: string;
226
- borderInset: string;
227
- };
228
- };
229
- dark: {
230
- text: string;
231
- border: string;
232
- hover: {
233
- text: string;
234
- border: string;
235
- };
236
- focus: {
237
- border: string;
238
- borderInset: string;
239
- };
180
+ bg: string;
181
+ shadow: {
182
+ outline: string;
183
+ focus: string;
184
+ hover: string;
185
+ hoverMuted: string;
240
186
  };
241
187
  };
242
188
  };
@@ -379,6 +325,19 @@ declare const _default: {
379
325
  icon: string;
380
326
  borderHover: string;
381
327
  };
328
+ actionListItem: {
329
+ inlineDivider: string;
330
+ default: {
331
+ hoverBg: string;
332
+ activeBg: string;
333
+ selectedBg: string;
334
+ };
335
+ danger: {
336
+ hoverBg: string;
337
+ activeBg: string;
338
+ hoverText: string;
339
+ };
340
+ };
382
341
  fg: {
383
342
  default: string;
384
343
  muted: string;
package/dist/js/colors/dark.js CHANGED
@@ -178,67 +178,13 @@ exports.default = {
178
178
  "gradientOut": "rgba(22,27,34,0)"
179
179
  },
180
180
  "mktg": {
181
- "success": "rgba(41,147,61,1)",
182
- "info": "rgba(42,123,243,1)",
183
- "bgShadeGradient": {
184
- "top": "rgba(1,4,9,0.065)",
185
- "bottom": "rgba(1,4,9,0)"
186
- },
187
181
  "btn": {
188
- "bg": {
189
- "top": "hsla(228,82%,66%,1)",
190
- "bottom": "#4969ed"
191
- },
192
- "bgOverlay": {
193
- "top": "hsla(228,74%,59%,1)",
194
- "bottom": "#3355e0"
195
- },
196
- "text": "#f0f6fc",
197
- "primary": {
198
- "bg": {
199
- "top": "hsla(137,56%,46%,1)",
200
- "bottom": "#2ea44f"
201
- },
202
- "bgOverlay": {
203
- "top": "hsla(134,60%,38%,1)",
204
- "bottom": "#22863a"
205
- },
206
- "text": "#f0f6fc"
207
- },
208
- "enterprise": {
209
- "bg": {
210
- "top": "hsla(249,100%,72%,1)",
211
- "bottom": "#6f57ff"
212
- },
213
- "bgOverlay": {
214
- "top": "hsla(248,65%,63%,1)",
215
- "bottom": "#614eda"
216
- },
217
- "text": "#f0f6fc"
218
- },
219
- "outline": {
220
- "text": "#f0f6fc",
221
- "border": "rgba(240,246,252,0.3)",
222
- "hover": {
223
- "text": "#f0f6fc",
224
- "border": "rgba(240,246,252,0.5)"
225
- },
226
- "focus": {
227
- "border": "#f0f6fc",
228
- "borderInset": "rgba(240,246,252,0.5)"
229
- }
230
- },
231
- "dark": {
232
- "text": "#f0f6fc",
233
- "border": "rgba(240,246,252,0.3)",
234
- "hover": {
235
- "text": "#f0f6fc",
236
- "border": "rgba(240,246,252,0.5)"
237
- },
238
- "focus": {
239
- "border": "#f0f6fc",
240
- "borderInset": "rgba(240,246,252,0.5)"
241
- }
182
+ "bg": "#f6f8fa",
183
+ "shadow": {
184
+ "outline": "rgb(255 255 255 / 25%) 0 0 0 1px inset",
185
+ "focus": "rgb(255 255 255 / 25%) 0 0 0 4px",
186
+ "hover": "0 4px 7px rgba(0, 0, 0, 0.15), 0 100px 80px rgba(255, 255, 255, 0.02), 0 42px 33px rgba(255, 255, 255, 0.024), 0 22px 18px rgba(255, 255, 255, 0.028), 0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04), 0 3px 2px rgba(255, 255, 255, 0.07)",
187
+ "hoverMuted": "rgb(255 255 255) 0 0 0 2px inset"
242
188
  }
243
189
  }
244
190
  },
@@ -381,6 +327,19 @@ exports.default = {
381
327
  "icon": "#484f58",
382
328
  "borderHover": "rgba(110,118,129,0.4)"
383
329
  },
330
+ "actionListItem": {
331
+ "inlineDivider": "rgba(48,54,61,0.48)",
332
+ "default": {
333
+ "hoverBg": "rgba(177,186,196,0.12)",
334
+ "activeBg": "rgba(177,186,196,0.2)",
335
+ "selectedBg": "rgba(177,186,196,0.08)"
336
+ },
337
+ "danger": {
338
+ "hoverBg": "rgba(248,81,73,0.16)",
339
+ "activeBg": "rgba(248,81,73,0.24)",
340
+ "hoverText": "#ff7b72"
341
+ }
342
+ },
384
343
  "fg": {
385
344
  "default": "#c9d1d9",
386
345
  "muted": "#8b949e",
package/dist/js/colors/dark_colorblind.d.ts CHANGED
@@ -176,67 +176,13 @@ declare const _default: {
176
176
  gradientOut: string;
177
177
  };
178
178
  mktg: {
179
- success: string;
180
- info: string;
181
- bgShadeGradient: {
182
- top: string;
183
- bottom: string;
184
- };
185
179
  btn: {
186
- bg: {
187
- top: string;
188
- bottom: string;
189
- };
190
- bgOverlay: {
191
- top: string;
192
- bottom: string;
193
- };
194
- text: string;
195
- primary: {
196
- bg: {
197
- top: string;
198
- bottom: string;
199
- };
200
- bgOverlay: {
201
- top: string;
202
- bottom: string;
203
- };
204
- text: string;
205
- };
206
- enterprise: {
207
- bg: {
208
- top: string;
209
- bottom: string;
210
- };
211
- bgOverlay: {
212
- top: string;
213
- bottom: string;
214
- };
215
- text: string;
216
- };
217
- outline: {
218
- text: string;
219
- border: string;
220
- hover: {
221
- text: string;
222
- border: string;
223
- };
224
- focus: {
225
- border: string;
226
- borderInset: string;
227
- };
228
- };
229
- dark: {
230
- text: string;
231
- border: string;
232
- hover: {
233
- text: string;
234
- border: string;
235
- };
236
- focus: {
237
- border: string;
238
- borderInset: string;
239
- };
180
+ bg: string;
181
+ shadow: {
182
+ outline: string;
183
+ focus: string;
184
+ hover: string;
185
+ hoverMuted: string;
240
186
  };
241
187
  };
242
188
  };
@@ -379,6 +325,19 @@ declare const _default: {
379
325
  icon: string;
380
326
  borderHover: string;
381
327
  };
328
+ actionListItem: {
329
+ inlineDivider: string;
330
+ default: {
331
+ hoverBg: string;
332
+ activeBg: string;
333
+ selectedBg: string;
334
+ };
335
+ danger: {
336
+ hoverBg: string;
337
+ activeBg: string;
338
+ hoverText: string;
339
+ };
340
+ };
382
341
  fg: {
383
342
  default: string;
384
343
  muted: string;
package/dist/js/colors/dark_colorblind.js CHANGED
@@ -178,67 +178,13 @@ exports.default = {
178
178
  "gradientOut": "rgba(22,27,34,0)"
179
179
  },
180
180
  "mktg": {
181
- "success": "rgba(25,119,239,1)",
182
- "info": "rgba(42,123,243,1)",
183
- "bgShadeGradient": {
184
- "top": "rgba(1,4,9,0.065)",
185
- "bottom": "rgba(1,4,9,0)"
186
- },
187
181
  "btn": {
188
- "bg": {
189
- "top": "hsla(228,82%,66%,1)",
190
- "bottom": "#4969ed"
191
- },
192
- "bgOverlay": {
193
- "top": "hsla(228,74%,59%,1)",
194
- "bottom": "#3355e0"
195
- },
196
- "text": "#f0f6fc",
197
- "primary": {
198
- "bg": {
199
- "top": "hsla(137,56%,46%,1)",
200
- "bottom": "#2ea44f"
201
- },
202
- "bgOverlay": {
203
- "top": "hsla(134,60%,38%,1)",
204
- "bottom": "#22863a"
205
- },
206
- "text": "#f0f6fc"
207
- },
208
- "enterprise": {
209
- "bg": {
210
- "top": "hsla(249,100%,72%,1)",
211
- "bottom": "#6f57ff"
212
- },
213
- "bgOverlay": {
214
- "top": "hsla(248,65%,63%,1)",
215
- "bottom": "#614eda"
216
- },
217
- "text": "#f0f6fc"
218
- },
219
- "outline": {
220
- "text": "#f0f6fc",
221
- "border": "rgba(240,246,252,0.3)",
222
- "hover": {
223
- "text": "#f0f6fc",
224
- "border": "rgba(240,246,252,0.5)"
225
- },
226
- "focus": {
227
- "border": "#f0f6fc",
228
- "borderInset": "rgba(240,246,252,0.5)"
229
- }
230
- },
231
- "dark": {
232
- "text": "#f0f6fc",
233
- "border": "rgba(240,246,252,0.3)",
234
- "hover": {
235
- "text": "#f0f6fc",
236
- "border": "rgba(240,246,252,0.5)"
237
- },
238
- "focus": {
239
- "border": "#f0f6fc",
240
- "borderInset": "rgba(240,246,252,0.5)"
241
- }
182
+ "bg": "#f6f8fa",
183
+ "shadow": {
184
+ "outline": "rgb(255 255 255 / 25%) 0 0 0 1px inset",
185
+ "focus": "rgb(255 255 255 / 25%) 0 0 0 4px",
186
+ "hover": "0 4px 7px rgba(0, 0, 0, 0.15), 0 100px 80px rgba(255, 255, 255, 0.02), 0 42px 33px rgba(255, 255, 255, 0.024), 0 22px 18px rgba(255, 255, 255, 0.028), 0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04), 0 3px 2px rgba(255, 255, 255, 0.07)",
187
+ "hoverMuted": "rgb(255 255 255) 0 0 0 2px inset"
242
188
  }
243
189
  }
244
190
  },
@@ -381,6 +327,19 @@ exports.default = {
381
327
  "icon": "#484f58",
382
328
  "borderHover": "rgba(110,118,129,0.4)"
383
329
  },
330
+ "actionListItem": {
331
+ "inlineDivider": "rgba(48,54,61,0.48)",
332
+ "default": {
333
+ "hoverBg": "rgba(177,186,196,0.12)",
334
+ "activeBg": "rgba(177,186,196,0.2)",
335
+ "selectedBg": "rgba(177,186,196,0.08)"
336
+ },
337
+ "danger": {
338
+ "hoverBg": "rgba(195,128,0,0.16)",
339
+ "activeBg": "rgba(195,128,0,0.24)",
340
+ "hoverText": "#d69a00"
341
+ }
342
+ },
384
343
  "fg": {
385
344
  "default": "#c9d1d9",
386
345
  "muted": "#8b949e",
package/dist/js/colors/dark_dimmed.d.ts CHANGED
@@ -176,67 +176,13 @@ declare const _default: {
176
176
  gradientOut: string;
177
177
  };
178
178
  mktg: {
179
- success: string;
180
- info: string;
181
- bgShadeGradient: {
182
- top: string;
183
- bottom: string;
184
- };
185
179
  btn: {
186
- bg: {
187
- top: string;
188
- bottom: string;
189
- };
190
- bgOverlay: {
191
- top: string;
192
- bottom: string;
193
- };
194
- text: string;
195
- primary: {
196
- bg: {
197
- top: string;
198
- bottom: string;
199
- };
200
- bgOverlay: {
201
- top: string;
202
- bottom: string;
203
- };
204
- text: string;
205
- };
206
- enterprise: {
207
- bg: {
208
- top: string;
209
- bottom: string;
210
- };
211
- bgOverlay: {
212
- top: string;
213
- bottom: string;
214
- };
215
- text: string;
216
- };
217
- outline: {
218
- text: string;
219
- border: string;
220
- hover: {
221
- text: string;
222
- border: string;
223
- };
224
- focus: {
225
- border: string;
226
- borderInset: string;
227
- };
228
- };
229
- dark: {
230
- text: string;
231
- border: string;
232
- hover: {
233
- text: string;
234
- border: string;
235
- };
236
- focus: {
237
- border: string;
238
- borderInset: string;
239
- };
180
+ bg: string;
181
+ shadow: {
182
+ outline: string;
183
+ focus: string;
184
+ hover: string;
185
+ hoverMuted: string;
240
186
  };
241
187
  };
242
188
  };
@@ -379,6 +325,19 @@ declare const _default: {
379
325
  icon: string;
380
326
  borderHover: string;
381
327
  };
328
+ actionListItem: {
329
+ inlineDivider: string;
330
+ default: {
331
+ hoverBg: string;
332
+ activeBg: string;
333
+ selectedBg: string;
334
+ };
335
+ danger: {
336
+ hoverBg: string;
337
+ activeBg: string;
338
+ hoverText: string;
339
+ };
340
+ };
382
341
  fg: {
383
342
  default: string;
384
343
  muted: string;
package/dist/js/colors/dark_dimmed.js CHANGED
@@ -178,67 +178,13 @@ exports.default = {
178
178
  "gradientOut": "rgba(45,51,59,0)"
179
179
  },
180
180
  "mktg": {
181
- "success": "rgba(61,137,66,1)",
182
- "info": "rgba(56,119,213,1)",
183
- "bgShadeGradient": {
184
- "top": "rgba(28,33,40,0.065)",
185
- "bottom": "rgba(28,33,40,0)"
186
- },
187
181
  "btn": {
188
- "bg": {
189
- "top": "hsla(228,82%,66%,1)",
190
- "bottom": "#4969ed"
191
- },
192
- "bgOverlay": {
193
- "top": "hsla(228,74%,59%,1)",
194
- "bottom": "#3355e0"
195
- },
196
- "text": "#cdd9e5",
197
- "primary": {
198
- "bg": {
199
- "top": "hsla(137,56%,46%,1)",
200
- "bottom": "#2ea44f"
201
- },
202
- "bgOverlay": {
203
- "top": "hsla(134,60%,38%,1)",
204
- "bottom": "#22863a"
205
- },
206
- "text": "#cdd9e5"
207
- },
208
- "enterprise": {
209
- "bg": {
210
- "top": "hsla(249,100%,72%,1)",
211
- "bottom": "#6f57ff"
212
- },
213
- "bgOverlay": {
214
- "top": "hsla(248,65%,63%,1)",
215
- "bottom": "#614eda"
216
- },
217
- "text": "#cdd9e5"
218
- },
219
- "outline": {
220
- "text": "#cdd9e5",
221
- "border": "rgba(205,217,229,0.3)",
222
- "hover": {
223
- "text": "#cdd9e5",
224
- "border": "rgba(205,217,229,0.5)"
225
- },
226
- "focus": {
227
- "border": "#cdd9e5",
228
- "borderInset": "rgba(205,217,229,0.5)"
229
- }
230
- },
231
- "dark": {
232
- "text": "#cdd9e5",
233
- "border": "rgba(205,217,229,0.3)",
234
- "hover": {
235
- "text": "#cdd9e5",
236
- "border": "rgba(205,217,229,0.5)"
237
- },
238
- "focus": {
239
- "border": "#cdd9e5",
240
- "borderInset": "rgba(205,217,229,0.5)"
241
- }
182
+ "bg": "#f6f8fa",
183
+ "shadow": {
184
+ "outline": "rgb(255 255 255 / 25%) 0 0 0 1px inset",
185
+ "focus": "rgb(255 255 255 / 25%) 0 0 0 4px",
186
+ "hover": "0 4px 7px rgba(0, 0, 0, 0.15), 0 100px 80px rgba(255, 255, 255, 0.02), 0 42px 33px rgba(255, 255, 255, 0.024), 0 22px 18px rgba(255, 255, 255, 0.028), 0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04), 0 3px 2px rgba(255, 255, 255, 0.07)",
187
+ "hoverMuted": "rgb(255 255 255) 0 0 0 2px inset"
242
188
  }
243
189
  }
244
190
  },
@@ -381,6 +327,19 @@ exports.default = {
381
327
  "icon": "#545d68",
382
328
  "borderHover": "rgba(99,110,123,0.4)"
383
329
  },
330
+ "actionListItem": {
331
+ "inlineDivider": "rgba(68,76,86,0.48)",
332
+ "default": {
333
+ "hoverBg": "rgba(144,157,171,0.12)",
334
+ "activeBg": "rgba(144,157,171,0.2)",
335
+ "selectedBg": "rgba(144,157,171,0.08)"
336
+ },
337
+ "danger": {
338
+ "hoverBg": "rgba(229,83,75,0.16)",
339
+ "activeBg": "rgba(229,83,75,0.24)",
340
+ "hoverText": "#f47067"
341
+ }
342
+ },
384
343
  "fg": {
385
344
  "default": "#adbac7",
386
345
  "muted": "#768390",
package/dist/js/colors/dark_high_contrast.d.ts CHANGED
@@ -176,67 +176,13 @@ declare const _default: {
176
176
  gradientOut: string;
177
177
  };
178
178
  mktg: {
179
- success: string;
180
- info: string;
181
- bgShadeGradient: {
182
- top: string;
183
- bottom: string;
184
- };
185
179
  btn: {
186
- bg: {
187
- top: string;
188
- bottom: string;
189
- };
190
- bgOverlay: {
191
- top: string;
192
- bottom: string;
193
- };
194
- text: string;
195
- primary: {
196
- bg: {
197
- top: string;
198
- bottom: string;
199
- };
200
- bgOverlay: {
201
- top: string;
202
- bottom: string;
203
- };
204
- text: string;
205
- };
206
- enterprise: {
207
- bg: {
208
- top: string;
209
- bottom: string;
210
- };
211
- bgOverlay: {
212
- top: string;
213
- bottom: string;
214
- };
215
- text: string;
216
- };
217
- outline: {
218
- text: string;
219
- border: string;
220
- hover: {
221
- text: string;
222
- border: string;
223
- };
224
- focus: {
225
- border: string;
226
- borderInset: string;
227
- };
228
- };
229
- dark: {
230
- text: string;
231
- border: string;
232
- hover: {
233
- text: string;
234
- border: string;
235
- };
236
- focus: {
237
- border: string;
238
- borderInset: string;
239
- };
180
+ bg: string;
181
+ shadow: {
182
+ outline: string;
183
+ focus: string;
184
+ hover: string;
185
+ hoverMuted: string;
240
186
  };
241
187
  };
242
188
  };
@@ -379,6 +325,19 @@ declare const _default: {
379
325
  icon: string;
380
326
  borderHover: string;
381
327
  };
328
+ actionListItem: {
329
+ inlineDivider: string;
330
+ default: {
331
+ hoverBg: string;
332
+ activeBg: string;
333
+ selectedBg: string;
334
+ };
335
+ danger: {
336
+ hoverBg: string;
337
+ activeBg: string;
338
+ hoverText: string;
339
+ };
340
+ };
382
341
  fg: {
383
342
  default: string;
384
343
  muted: string;