@primer/primitives 6.1.0 → 7.0.0-rc.fe8d621

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 +6 -0
  2. package/dist/js/colors/dark.d.ts +6 -60
  3. package/dist/js/colors/dark.js +6 -60
  4. package/dist/js/colors/dark_colorblind.d.ts +6 -60
  5. package/dist/js/colors/dark_colorblind.js +6 -60
  6. package/dist/js/colors/dark_dimmed.d.ts +6 -60
  7. package/dist/js/colors/dark_dimmed.js +6 -60
  8. package/dist/js/colors/dark_high_contrast.d.ts +6 -60
  9. package/dist/js/colors/dark_high_contrast.js +6 -60
  10. package/dist/js/colors/index.d.ts +36 -360
  11. package/dist/js/colors/light.d.ts +6 -60
  12. package/dist/js/colors/light.js +6 -60
  13. package/dist/js/colors/light_colorblind.d.ts +6 -60
  14. package/dist/js/colors/light_colorblind.js +6 -60
  15. package/dist/js/index.d.ts +36 -360
  16. package/dist/json/colors/dark.json +6 -60
  17. package/dist/json/colors/dark_colorblind.json +6 -60
  18. package/dist/json/colors/dark_dimmed.json +6 -60
  19. package/dist/json/colors/dark_high_contrast.json +6 -60
  20. package/dist/json/colors/light.json +6 -60
  21. package/dist/json/colors/light_colorblind.json +6 -60
  22. package/dist/scss/colors/_dark.scss +5 -31
  23. package/dist/scss/colors/_dark_colorblind.scss +5 -31
  24. package/dist/scss/colors/_dark_dimmed.scss +5 -31
  25. package/dist/scss/colors/_dark_high_contrast.scss +5 -31
  26. package/dist/scss/colors/_light.scss +5 -31
  27. package/dist/scss/colors/_light_colorblind.scss +5 -31
  28. package/dist/ts/colors/dark.ts +6 -60
  29. package/dist/ts/colors/dark_colorblind.ts +6 -60
  30. package/dist/ts/colors/dark_dimmed.ts +6 -60
  31. package/dist/ts/colors/dark_high_contrast.ts +6 -60
  32. package/dist/ts/colors/light.ts +6 -60
  33. package/dist/ts/colors/light_colorblind.ts +6 -60
  34. package/package.json +4 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @primer/primitives
2
2
 
3
+ ## 7.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - [#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
8
+
3
9
  ## 6.1.0
4
10
 
5
11
  ### Minor 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
  };
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
  },
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
  };
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
  },
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
  };
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
  },
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
  };
package/dist/js/colors/dark_high_contrast.js CHANGED
@@ -178,67 +178,13 @@ exports.default = {
178
178
  "gradientOut": "rgba(39,43,51,0)"
179
179
  },
180
180
  "mktg": {
181
- "success": "rgba(9,180,58,1)",
182
- "info": "rgba(64,158,255,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": "#ffffff",
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": "#ffffff"
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": "#ffffff"
218
- },
219
- "outline": {
220
- "text": "#ffffff",
221
- "border": "rgba(255,255,255,0.3)",
222
- "hover": {
223
- "text": "#ffffff",
224
- "border": "rgba(255,255,255,0.5)"
225
- },
226
- "focus": {
227
- "border": "#ffffff",
228
- "borderInset": "rgba(255,255,255,0.5)"
229
- }
230
- },
231
- "dark": {
232
- "text": "#ffffff",
233
- "border": "rgba(255,255,255,0.3)",
234
- "hover": {
235
- "text": "#ffffff",
236
- "border": "rgba(255,255,255,0.5)"
237
- },
238
- "focus": {
239
- "border": "#ffffff",
240
- "borderInset": "rgba(255,255,255,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
  },