@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/dist/scss/colors/_dark_high_contrast.scss CHANGED
@@ -146,37 +146,11 @@
146
146
  --color-project-sidebar-bg: #272b33;
147
147
  --color-project-gradient-in: #272b33;
148
148
  --color-project-gradient-out: rgba(39,43,51,0);
149
- --color-mktg-success: rgba(9,180,58,1);
150
- --color-mktg-info: rgba(64,158,255,1);
151
- --color-mktg-bg-shade-gradient-top: rgba(1,4,9,0.065);
152
- --color-mktg-bg-shade-gradient-bottom: rgba(1,4,9,0);
153
- --color-mktg-btn-bg-top: hsla(228,82%,66%,1);
154
- --color-mktg-btn-bg-bottom: #4969ed;
155
- --color-mktg-btn-bg-overlay-top: hsla(228,74%,59%,1);
156
- --color-mktg-btn-bg-overlay-bottom: #3355e0;
157
- --color-mktg-btn-text: #ffffff;
158
- --color-mktg-btn-primary-bg-top: hsla(137,56%,46%,1);
159
- --color-mktg-btn-primary-bg-bottom: #2ea44f;
160
- --color-mktg-btn-primary-bg-overlay-top: hsla(134,60%,38%,1);
161
- --color-mktg-btn-primary-bg-overlay-bottom: #22863a;
162
- --color-mktg-btn-primary-text: #ffffff;
163
- --color-mktg-btn-enterprise-bg-top: hsla(249,100%,72%,1);
164
- --color-mktg-btn-enterprise-bg-bottom: #6f57ff;
165
- --color-mktg-btn-enterprise-bg-overlay-top: hsla(248,65%,63%,1);
166
- --color-mktg-btn-enterprise-bg-overlay-bottom: #614eda;
167
- --color-mktg-btn-enterprise-text: #ffffff;
168
- --color-mktg-btn-outline-text: #ffffff;
169
- --color-mktg-btn-outline-border: rgba(255,255,255,0.3);
170
- --color-mktg-btn-outline-hover-text: #ffffff;
171
- --color-mktg-btn-outline-hover-border: rgba(255,255,255,0.5);
172
- --color-mktg-btn-outline-focus-border: #ffffff;
173
- --color-mktg-btn-outline-focus-border-inset: rgba(255,255,255,0.5);
174
- --color-mktg-btn-dark-text: #ffffff;
175
- --color-mktg-btn-dark-border: rgba(255,255,255,0.3);
176
- --color-mktg-btn-dark-hover-text: #ffffff;
177
- --color-mktg-btn-dark-hover-border: rgba(255,255,255,0.5);
178
- --color-mktg-btn-dark-focus-border: #ffffff;
179
- --color-mktg-btn-dark-focus-border-inset: rgba(255,255,255,0.5);
149
+ --color-mktg-btn-bg: #f6f8fa;
150
+ --color-mktg-btn-shadow-outline: rgb(255 255 255 / 25%) 0 0 0 1px inset;
151
+ --color-mktg-btn-shadow-focus: rgb(255 255 255 / 25%) 0 0 0 4px;
152
+ --color-mktg-btn-shadow-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);
153
+ --color-mktg-btn-shadow-hover-muted: rgb(255 255 255) 0 0 0 2px inset;
180
154
  --color-avatar-bg: rgba(255,255,255,0.1);
181
155
  --color-avatar-border: rgba(255,255,255,0.9);
182
156
  --color-avatar-stack-fade: #525964;
@@ -284,6 +258,13 @@
284
258
  --color-btn-danger-icon: #ff6a69;
285
259
  --color-underlinenav-icon: #f0f3f6;
286
260
  --color-underlinenav-border-hover: #bdc4cc;
261
+ --color-action-list-item-inline-divider: #7a828e;
262
+ --color-action-list-item-default-hover-bg: rgba(217,222,227,0.12);
263
+ --color-action-list-item-default-active-bg: rgba(217,222,227,0.24);
264
+ --color-action-list-item-default-selected-bg: rgba(217,222,227,0.08);
265
+ --color-action-list-item-danger-hover-bg: #ff6a69;
266
+ --color-action-list-item-danger-active-bg: #ff4445;
267
+ --color-action-list-item-danger-hover-text: #0a0c10;
287
268
  --color-fg-default: #f0f3f6;
288
269
  --color-fg-muted: #f0f3f6;
289
270
  --color-fg-subtle: #7a828e;
package/dist/scss/colors/_light.scss CHANGED
@@ -146,37 +146,11 @@
146
146
  --color-project-sidebar-bg: #ffffff;
147
147
  --color-project-gradient-in: #ffffff;
148
148
  --color-project-gradient-out: rgba(255,255,255,0);
149
- --color-mktg-success: rgba(36,146,67,1);
150
- --color-mktg-info: rgba(19,119,234,1);
151
- --color-mktg-bg-shade-gradient-top: rgba(27,31,36,0.065);
152
- --color-mktg-bg-shade-gradient-bottom: rgba(27,31,36,0);
153
- --color-mktg-btn-bg-top: hsla(228,82%,66%,1);
154
- --color-mktg-btn-bg-bottom: #4969ed;
155
- --color-mktg-btn-bg-overlay-top: hsla(228,74%,59%,1);
156
- --color-mktg-btn-bg-overlay-bottom: #3355e0;
157
- --color-mktg-btn-text: #ffffff;
158
- --color-mktg-btn-primary-bg-top: hsla(137,56%,46%,1);
159
- --color-mktg-btn-primary-bg-bottom: #2ea44f;
160
- --color-mktg-btn-primary-bg-overlay-top: hsla(134,60%,38%,1);
161
- --color-mktg-btn-primary-bg-overlay-bottom: #22863a;
162
- --color-mktg-btn-primary-text: #ffffff;
163
- --color-mktg-btn-enterprise-bg-top: hsla(249,100%,72%,1);
164
- --color-mktg-btn-enterprise-bg-bottom: #6f57ff;
165
- --color-mktg-btn-enterprise-bg-overlay-top: hsla(248,65%,63%,1);
166
- --color-mktg-btn-enterprise-bg-overlay-bottom: #614eda;
167
- --color-mktg-btn-enterprise-text: #ffffff;
168
- --color-mktg-btn-outline-text: #4969ed;
169
- --color-mktg-btn-outline-border: rgba(73,105,237,0.3);
170
- --color-mktg-btn-outline-hover-text: #3355e0;
171
- --color-mktg-btn-outline-hover-border: rgba(51,85,224,0.5);
172
- --color-mktg-btn-outline-focus-border: #4969ed;
173
- --color-mktg-btn-outline-focus-border-inset: rgba(73,105,237,0.5);
174
- --color-mktg-btn-dark-text: #ffffff;
175
- --color-mktg-btn-dark-border: rgba(255,255,255,0.3);
176
- --color-mktg-btn-dark-hover-text: #ffffff;
177
- --color-mktg-btn-dark-hover-border: rgba(255,255,255,0.5);
178
- --color-mktg-btn-dark-focus-border: #ffffff;
179
- --color-mktg-btn-dark-focus-border-inset: rgba(255,255,255,0.5);
149
+ --color-mktg-btn-bg: #1b1f23;
150
+ --color-mktg-btn-shadow-outline: rgb(0 0 0 / 15%) 0 0 0 1px inset;
151
+ --color-mktg-btn-shadow-focus: rgb(0 0 0 / 15%) 0 0 0 4px;
152
+ --color-mktg-btn-shadow-hover: 0 3px 2px rgba(0, 0, 0, 0.07), 0 7px 5px rgba(0, 0, 0, 0.04), 0 12px 10px rgba(0, 0, 0, 0.03), 0 22px 18px rgba(0, 0, 0, 0.03), 0 42px 33px rgba(0, 0, 0, 0.02), 0 100px 80px rgba(0, 0, 0, 0.02);
153
+ --color-mktg-btn-shadow-hover-muted: rgb(0 0 0 / 70%) 0 0 0 2px inset;
180
154
  --color-avatar-bg: #ffffff;
181
155
  --color-avatar-border: rgba(27,31,36,0.15);
182
156
  --color-avatar-stack-fade: #afb8c1;
@@ -284,6 +258,13 @@
284
258
  --color-btn-danger-hover-icon: #ffffff;
285
259
  --color-underlinenav-icon: #6e7781;
286
260
  --color-underlinenav-border-hover: rgba(175,184,193,0.2);
261
+ --color-action-list-item-inline-divider: rgba(208,215,222,0.48);
262
+ --color-action-list-item-default-hover-bg: rgba(208,215,222,0.32);
263
+ --color-action-list-item-default-active-bg: rgba(208,215,222,0.48);
264
+ --color-action-list-item-default-selected-bg: rgba(208,215,222,0.24);
265
+ --color-action-list-item-danger-hover-bg: rgba(255,235,233,0.64);
266
+ --color-action-list-item-danger-active-bg: #FFEBE9;
267
+ --color-action-list-item-danger-hover-text: #cf222e;
287
268
  --color-fg-default: #24292f;
288
269
  --color-fg-muted: #57606a;
289
270
  --color-fg-subtle: #6e7781;
package/dist/scss/colors/_light_colorblind.scss CHANGED
@@ -146,37 +146,11 @@
146
146
  --color-project-sidebar-bg: #ffffff;
147
147
  --color-project-gradient-in: #ffffff;
148
148
  --color-project-gradient-out: rgba(255,255,255,0);
149
- --color-mktg-success: rgba(3,119,234,1);
150
- --color-mktg-info: rgba(19,119,234,1);
151
- --color-mktg-bg-shade-gradient-top: rgba(27,31,36,0.065);
152
- --color-mktg-bg-shade-gradient-bottom: rgba(27,31,36,0);
153
- --color-mktg-btn-bg-top: hsla(228,82%,66%,1);
154
- --color-mktg-btn-bg-bottom: #4969ed;
155
- --color-mktg-btn-bg-overlay-top: hsla(228,74%,59%,1);
156
- --color-mktg-btn-bg-overlay-bottom: #3355e0;
157
- --color-mktg-btn-text: #ffffff;
158
- --color-mktg-btn-primary-bg-top: hsla(137,56%,46%,1);
159
- --color-mktg-btn-primary-bg-bottom: #2ea44f;
160
- --color-mktg-btn-primary-bg-overlay-top: hsla(134,60%,38%,1);
161
- --color-mktg-btn-primary-bg-overlay-bottom: #22863a;
162
- --color-mktg-btn-primary-text: #ffffff;
163
- --color-mktg-btn-enterprise-bg-top: hsla(249,100%,72%,1);
164
- --color-mktg-btn-enterprise-bg-bottom: #6f57ff;
165
- --color-mktg-btn-enterprise-bg-overlay-top: hsla(248,65%,63%,1);
166
- --color-mktg-btn-enterprise-bg-overlay-bottom: #614eda;
167
- --color-mktg-btn-enterprise-text: #ffffff;
168
- --color-mktg-btn-outline-text: #4969ed;
169
- --color-mktg-btn-outline-border: rgba(73,105,237,0.3);
170
- --color-mktg-btn-outline-hover-text: #3355e0;
171
- --color-mktg-btn-outline-hover-border: rgba(51,85,224,0.5);
172
- --color-mktg-btn-outline-focus-border: #4969ed;
173
- --color-mktg-btn-outline-focus-border-inset: rgba(73,105,237,0.5);
174
- --color-mktg-btn-dark-text: #ffffff;
175
- --color-mktg-btn-dark-border: rgba(255,255,255,0.3);
176
- --color-mktg-btn-dark-hover-text: #ffffff;
177
- --color-mktg-btn-dark-hover-border: rgba(255,255,255,0.5);
178
- --color-mktg-btn-dark-focus-border: #ffffff;
179
- --color-mktg-btn-dark-focus-border-inset: rgba(255,255,255,0.5);
149
+ --color-mktg-btn-bg: #1b1f23;
150
+ --color-mktg-btn-shadow-outline: rgb(0 0 0 / 15%) 0 0 0 1px inset;
151
+ --color-mktg-btn-shadow-focus: rgb(0 0 0 / 15%) 0 0 0 4px;
152
+ --color-mktg-btn-shadow-hover: 0 3px 2px rgba(0, 0, 0, 0.07), 0 7px 5px rgba(0, 0, 0, 0.04), 0 12px 10px rgba(0, 0, 0, 0.03), 0 22px 18px rgba(0, 0, 0, 0.03), 0 42px 33px rgba(0, 0, 0, 0.02), 0 100px 80px rgba(0, 0, 0, 0.02);
153
+ --color-mktg-btn-shadow-hover-muted: rgb(0 0 0 / 70%) 0 0 0 2px inset;
180
154
  --color-avatar-bg: #ffffff;
181
155
  --color-avatar-border: rgba(27,31,36,0.15);
182
156
  --color-avatar-stack-fade: #afb8c1;
@@ -284,6 +258,13 @@
284
258
  --color-btn-danger-hover-icon: #ffffff;
285
259
  --color-underlinenav-icon: #6e7781;
286
260
  --color-underlinenav-border-hover: rgba(175,184,193,0.2);
261
+ --color-action-list-item-inline-divider: rgba(208,215,222,0.48);
262
+ --color-action-list-item-default-hover-bg: rgba(208,215,222,0.32);
263
+ --color-action-list-item-default-active-bg: rgba(208,215,222,0.48);
264
+ --color-action-list-item-default-selected-bg: rgba(208,215,222,0.24);
265
+ --color-action-list-item-danger-hover-bg: rgba(254,254,72,0.64);
266
+ --color-action-list-item-danger-active-bg: #fefe48;
267
+ --color-action-list-item-danger-hover-text: #ac5e00;
287
268
  --color-fg-default: #24292f;
288
269
  --color-fg-muted: #57606a;
289
270
  --color-fg-subtle: #6e7781;
package/dist/ts/colors/dark.ts CHANGED
@@ -176,67 +176,13 @@ export default {
176
176
  "gradientOut": "rgba(22,27,34,0)"
177
177
  },
178
178
  "mktg": {
179
- "success": "rgba(41,147,61,1)",
180
- "info": "rgba(42,123,243,1)",
181
- "bgShadeGradient": {
182
- "top": "rgba(1,4,9,0.065)",
183
- "bottom": "rgba(1,4,9,0)"
184
- },
185
179
  "btn": {
186
- "bg": {
187
- "top": "hsla(228,82%,66%,1)",
188
- "bottom": "#4969ed"
189
- },
190
- "bgOverlay": {
191
- "top": "hsla(228,74%,59%,1)",
192
- "bottom": "#3355e0"
193
- },
194
- "text": "#f0f6fc",
195
- "primary": {
196
- "bg": {
197
- "top": "hsla(137,56%,46%,1)",
198
- "bottom": "#2ea44f"
199
- },
200
- "bgOverlay": {
201
- "top": "hsla(134,60%,38%,1)",
202
- "bottom": "#22863a"
203
- },
204
- "text": "#f0f6fc"
205
- },
206
- "enterprise": {
207
- "bg": {
208
- "top": "hsla(249,100%,72%,1)",
209
- "bottom": "#6f57ff"
210
- },
211
- "bgOverlay": {
212
- "top": "hsla(248,65%,63%,1)",
213
- "bottom": "#614eda"
214
- },
215
- "text": "#f0f6fc"
216
- },
217
- "outline": {
218
- "text": "#f0f6fc",
219
- "border": "rgba(240,246,252,0.3)",
220
- "hover": {
221
- "text": "#f0f6fc",
222
- "border": "rgba(240,246,252,0.5)"
223
- },
224
- "focus": {
225
- "border": "#f0f6fc",
226
- "borderInset": "rgba(240,246,252,0.5)"
227
- }
228
- },
229
- "dark": {
230
- "text": "#f0f6fc",
231
- "border": "rgba(240,246,252,0.3)",
232
- "hover": {
233
- "text": "#f0f6fc",
234
- "border": "rgba(240,246,252,0.5)"
235
- },
236
- "focus": {
237
- "border": "#f0f6fc",
238
- "borderInset": "rgba(240,246,252,0.5)"
239
- }
180
+ "bg": "#f6f8fa",
181
+ "shadow": {
182
+ "outline": "rgb(255 255 255 / 25%) 0 0 0 1px inset",
183
+ "focus": "rgb(255 255 255 / 25%) 0 0 0 4px",
184
+ "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)",
185
+ "hoverMuted": "rgb(255 255 255) 0 0 0 2px inset"
240
186
  }
241
187
  }
242
188
  },
@@ -379,6 +325,19 @@ export default {
379
325
  "icon": "#484f58",
380
326
  "borderHover": "rgba(110,118,129,0.4)"
381
327
  },
328
+ "actionListItem": {
329
+ "inlineDivider": "rgba(48,54,61,0.48)",
330
+ "default": {
331
+ "hoverBg": "rgba(177,186,196,0.12)",
332
+ "activeBg": "rgba(177,186,196,0.2)",
333
+ "selectedBg": "rgba(177,186,196,0.08)"
334
+ },
335
+ "danger": {
336
+ "hoverBg": "rgba(248,81,73,0.16)",
337
+ "activeBg": "rgba(248,81,73,0.24)",
338
+ "hoverText": "#ff7b72"
339
+ }
340
+ },
382
341
  "fg": {
383
342
  "default": "#c9d1d9",
384
343
  "muted": "#8b949e",
package/dist/ts/colors/dark_colorblind.ts CHANGED
@@ -176,67 +176,13 @@ export default {
176
176
  "gradientOut": "rgba(22,27,34,0)"
177
177
  },
178
178
  "mktg": {
179
- "success": "rgba(25,119,239,1)",
180
- "info": "rgba(42,123,243,1)",
181
- "bgShadeGradient": {
182
- "top": "rgba(1,4,9,0.065)",
183
- "bottom": "rgba(1,4,9,0)"
184
- },
185
179
  "btn": {
186
- "bg": {
187
- "top": "hsla(228,82%,66%,1)",
188
- "bottom": "#4969ed"
189
- },
190
- "bgOverlay": {
191
- "top": "hsla(228,74%,59%,1)",
192
- "bottom": "#3355e0"
193
- },
194
- "text": "#f0f6fc",
195
- "primary": {
196
- "bg": {
197
- "top": "hsla(137,56%,46%,1)",
198
- "bottom": "#2ea44f"
199
- },
200
- "bgOverlay": {
201
- "top": "hsla(134,60%,38%,1)",
202
- "bottom": "#22863a"
203
- },
204
- "text": "#f0f6fc"
205
- },
206
- "enterprise": {
207
- "bg": {
208
- "top": "hsla(249,100%,72%,1)",
209
- "bottom": "#6f57ff"
210
- },
211
- "bgOverlay": {
212
- "top": "hsla(248,65%,63%,1)",
213
- "bottom": "#614eda"
214
- },
215
- "text": "#f0f6fc"
216
- },
217
- "outline": {
218
- "text": "#f0f6fc",
219
- "border": "rgba(240,246,252,0.3)",
220
- "hover": {
221
- "text": "#f0f6fc",
222
- "border": "rgba(240,246,252,0.5)"
223
- },
224
- "focus": {
225
- "border": "#f0f6fc",
226
- "borderInset": "rgba(240,246,252,0.5)"
227
- }
228
- },
229
- "dark": {
230
- "text": "#f0f6fc",
231
- "border": "rgba(240,246,252,0.3)",
232
- "hover": {
233
- "text": "#f0f6fc",
234
- "border": "rgba(240,246,252,0.5)"
235
- },
236
- "focus": {
237
- "border": "#f0f6fc",
238
- "borderInset": "rgba(240,246,252,0.5)"
239
- }
180
+ "bg": "#f6f8fa",
181
+ "shadow": {
182
+ "outline": "rgb(255 255 255 / 25%) 0 0 0 1px inset",
183
+ "focus": "rgb(255 255 255 / 25%) 0 0 0 4px",
184
+ "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)",
185
+ "hoverMuted": "rgb(255 255 255) 0 0 0 2px inset"
240
186
  }
241
187
  }
242
188
  },
@@ -379,6 +325,19 @@ export default {
379
325
  "icon": "#484f58",
380
326
  "borderHover": "rgba(110,118,129,0.4)"
381
327
  },
328
+ "actionListItem": {
329
+ "inlineDivider": "rgba(48,54,61,0.48)",
330
+ "default": {
331
+ "hoverBg": "rgba(177,186,196,0.12)",
332
+ "activeBg": "rgba(177,186,196,0.2)",
333
+ "selectedBg": "rgba(177,186,196,0.08)"
334
+ },
335
+ "danger": {
336
+ "hoverBg": "rgba(195,128,0,0.16)",
337
+ "activeBg": "rgba(195,128,0,0.24)",
338
+ "hoverText": "#d69a00"
339
+ }
340
+ },
382
341
  "fg": {
383
342
  "default": "#c9d1d9",
384
343
  "muted": "#8b949e",
package/dist/ts/colors/dark_dimmed.ts CHANGED
@@ -176,67 +176,13 @@ export default {
176
176
  "gradientOut": "rgba(45,51,59,0)"
177
177
  },
178
178
  "mktg": {
179
- "success": "rgba(61,137,66,1)",
180
- "info": "rgba(56,119,213,1)",
181
- "bgShadeGradient": {
182
- "top": "rgba(28,33,40,0.065)",
183
- "bottom": "rgba(28,33,40,0)"
184
- },
185
179
  "btn": {
186
- "bg": {
187
- "top": "hsla(228,82%,66%,1)",
188
- "bottom": "#4969ed"
189
- },
190
- "bgOverlay": {
191
- "top": "hsla(228,74%,59%,1)",
192
- "bottom": "#3355e0"
193
- },
194
- "text": "#cdd9e5",
195
- "primary": {
196
- "bg": {
197
- "top": "hsla(137,56%,46%,1)",
198
- "bottom": "#2ea44f"
199
- },
200
- "bgOverlay": {
201
- "top": "hsla(134,60%,38%,1)",
202
- "bottom": "#22863a"
203
- },
204
- "text": "#cdd9e5"
205
- },
206
- "enterprise": {
207
- "bg": {
208
- "top": "hsla(249,100%,72%,1)",
209
- "bottom": "#6f57ff"
210
- },
211
- "bgOverlay": {
212
- "top": "hsla(248,65%,63%,1)",
213
- "bottom": "#614eda"
214
- },
215
- "text": "#cdd9e5"
216
- },
217
- "outline": {
218
- "text": "#cdd9e5",
219
- "border": "rgba(205,217,229,0.3)",
220
- "hover": {
221
- "text": "#cdd9e5",
222
- "border": "rgba(205,217,229,0.5)"
223
- },
224
- "focus": {
225
- "border": "#cdd9e5",
226
- "borderInset": "rgba(205,217,229,0.5)"
227
- }
228
- },
229
- "dark": {
230
- "text": "#cdd9e5",
231
- "border": "rgba(205,217,229,0.3)",
232
- "hover": {
233
- "text": "#cdd9e5",
234
- "border": "rgba(205,217,229,0.5)"
235
- },
236
- "focus": {
237
- "border": "#cdd9e5",
238
- "borderInset": "rgba(205,217,229,0.5)"
239
- }
180
+ "bg": "#f6f8fa",
181
+ "shadow": {
182
+ "outline": "rgb(255 255 255 / 25%) 0 0 0 1px inset",
183
+ "focus": "rgb(255 255 255 / 25%) 0 0 0 4px",
184
+ "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)",
185
+ "hoverMuted": "rgb(255 255 255) 0 0 0 2px inset"
240
186
  }
241
187
  }
242
188
  },
@@ -379,6 +325,19 @@ export default {
379
325
  "icon": "#545d68",
380
326
  "borderHover": "rgba(99,110,123,0.4)"
381
327
  },
328
+ "actionListItem": {
329
+ "inlineDivider": "rgba(68,76,86,0.48)",
330
+ "default": {
331
+ "hoverBg": "rgba(144,157,171,0.12)",
332
+ "activeBg": "rgba(144,157,171,0.2)",
333
+ "selectedBg": "rgba(144,157,171,0.08)"
334
+ },
335
+ "danger": {
336
+ "hoverBg": "rgba(229,83,75,0.16)",
337
+ "activeBg": "rgba(229,83,75,0.24)",
338
+ "hoverText": "#f47067"
339
+ }
340
+ },
382
341
  "fg": {
383
342
  "default": "#adbac7",
384
343
  "muted": "#768390",
package/dist/ts/colors/dark_high_contrast.ts CHANGED
@@ -176,67 +176,13 @@ export default {
176
176
  "gradientOut": "rgba(39,43,51,0)"
177
177
  },
178
178
  "mktg": {
179
- "success": "rgba(9,180,58,1)",
180
- "info": "rgba(64,158,255,1)",
181
- "bgShadeGradient": {
182
- "top": "rgba(1,4,9,0.065)",
183
- "bottom": "rgba(1,4,9,0)"
184
- },
185
179
  "btn": {
186
- "bg": {
187
- "top": "hsla(228,82%,66%,1)",
188
- "bottom": "#4969ed"
189
- },
190
- "bgOverlay": {
191
- "top": "hsla(228,74%,59%,1)",
192
- "bottom": "#3355e0"
193
- },
194
- "text": "#ffffff",
195
- "primary": {
196
- "bg": {
197
- "top": "hsla(137,56%,46%,1)",
198
- "bottom": "#2ea44f"
199
- },
200
- "bgOverlay": {
201
- "top": "hsla(134,60%,38%,1)",
202
- "bottom": "#22863a"
203
- },
204
- "text": "#ffffff"
205
- },
206
- "enterprise": {
207
- "bg": {
208
- "top": "hsla(249,100%,72%,1)",
209
- "bottom": "#6f57ff"
210
- },
211
- "bgOverlay": {
212
- "top": "hsla(248,65%,63%,1)",
213
- "bottom": "#614eda"
214
- },
215
- "text": "#ffffff"
216
- },
217
- "outline": {
218
- "text": "#ffffff",
219
- "border": "rgba(255,255,255,0.3)",
220
- "hover": {
221
- "text": "#ffffff",
222
- "border": "rgba(255,255,255,0.5)"
223
- },
224
- "focus": {
225
- "border": "#ffffff",
226
- "borderInset": "rgba(255,255,255,0.5)"
227
- }
228
- },
229
- "dark": {
230
- "text": "#ffffff",
231
- "border": "rgba(255,255,255,0.3)",
232
- "hover": {
233
- "text": "#ffffff",
234
- "border": "rgba(255,255,255,0.5)"
235
- },
236
- "focus": {
237
- "border": "#ffffff",
238
- "borderInset": "rgba(255,255,255,0.5)"
239
- }
180
+ "bg": "#f6f8fa",
181
+ "shadow": {
182
+ "outline": "rgb(255 255 255 / 25%) 0 0 0 1px inset",
183
+ "focus": "rgb(255 255 255 / 25%) 0 0 0 4px",
184
+ "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)",
185
+ "hoverMuted": "rgb(255 255 255) 0 0 0 2px inset"
240
186
  }
241
187
  }
242
188
  },
@@ -379,6 +325,19 @@ export default {
379
325
  "icon": "#f0f3f6",
380
326
  "borderHover": "#bdc4cc"
381
327
  },
328
+ "actionListItem": {
329
+ "inlineDivider": "#7a828e",
330
+ "default": {
331
+ "hoverBg": "rgba(217,222,227,0.12)",
332
+ "activeBg": "rgba(217,222,227,0.24)",
333
+ "selectedBg": "rgba(217,222,227,0.08)"
334
+ },
335
+ "danger": {
336
+ "hoverBg": "#ff6a69",
337
+ "activeBg": "#ff4445",
338
+ "hoverText": "#0a0c10"
339
+ }
340
+ },
382
341
  "fg": {
383
342
  "default": "#f0f3f6",
384
343
  "muted": "#f0f3f6",
package/dist/ts/colors/light.ts CHANGED
@@ -176,67 +176,13 @@ export default {
176
176
  "gradientOut": "rgba(255,255,255,0)"
177
177
  },
178
178
  "mktg": {
179
- "success": "rgba(36,146,67,1)",
180
- "info": "rgba(19,119,234,1)",
181
- "bgShadeGradient": {
182
- "top": "rgba(27,31,36,0.065)",
183
- "bottom": "rgba(27,31,36,0)"
184
- },
185
179
  "btn": {
186
- "bg": {
187
- "top": "hsla(228,82%,66%,1)",
188
- "bottom": "#4969ed"
189
- },
190
- "bgOverlay": {
191
- "top": "hsla(228,74%,59%,1)",
192
- "bottom": "#3355e0"
193
- },
194
- "text": "#ffffff",
195
- "primary": {
196
- "bg": {
197
- "top": "hsla(137,56%,46%,1)",
198
- "bottom": "#2ea44f"
199
- },
200
- "bgOverlay": {
201
- "top": "hsla(134,60%,38%,1)",
202
- "bottom": "#22863a"
203
- },
204
- "text": "#ffffff"
205
- },
206
- "enterprise": {
207
- "bg": {
208
- "top": "hsla(249,100%,72%,1)",
209
- "bottom": "#6f57ff"
210
- },
211
- "bgOverlay": {
212
- "top": "hsla(248,65%,63%,1)",
213
- "bottom": "#614eda"
214
- },
215
- "text": "#ffffff"
216
- },
217
- "outline": {
218
- "text": "#4969ed",
219
- "border": "rgba(73,105,237,0.3)",
220
- "hover": {
221
- "text": "#3355e0",
222
- "border": "rgba(51,85,224,0.5)"
223
- },
224
- "focus": {
225
- "border": "#4969ed",
226
- "borderInset": "rgba(73,105,237,0.5)"
227
- }
228
- },
229
- "dark": {
230
- "text": "#ffffff",
231
- "border": "rgba(255,255,255,0.3)",
232
- "hover": {
233
- "text": "#ffffff",
234
- "border": "rgba(255,255,255,0.5)"
235
- },
236
- "focus": {
237
- "border": "#ffffff",
238
- "borderInset": "rgba(255,255,255,0.5)"
239
- }
180
+ "bg": "#1b1f23",
181
+ "shadow": {
182
+ "outline": "rgb(0 0 0 / 15%) 0 0 0 1px inset",
183
+ "focus": "rgb(0 0 0 / 15%) 0 0 0 4px",
184
+ "hover": "0 3px 2px rgba(0, 0, 0, 0.07), 0 7px 5px rgba(0, 0, 0, 0.04), 0 12px 10px rgba(0, 0, 0, 0.03), 0 22px 18px rgba(0, 0, 0, 0.03), 0 42px 33px rgba(0, 0, 0, 0.02), 0 100px 80px rgba(0, 0, 0, 0.02)",
185
+ "hoverMuted": "rgb(0 0 0 / 70%) 0 0 0 2px inset"
240
186
  }
241
187
  }
242
188
  },
@@ -379,6 +325,19 @@ export default {
379
325
  "icon": "#6e7781",
380
326
  "borderHover": "rgba(175,184,193,0.2)"
381
327
  },
328
+ "actionListItem": {
329
+ "inlineDivider": "rgba(208,215,222,0.48)",
330
+ "default": {
331
+ "hoverBg": "rgba(208,215,222,0.32)",
332
+ "activeBg": "rgba(208,215,222,0.48)",
333
+ "selectedBg": "rgba(208,215,222,0.24)"
334
+ },
335
+ "danger": {
336
+ "hoverBg": "rgba(255,235,233,0.64)",
337
+ "activeBg": "#FFEBE9",
338
+ "hoverText": "#cf222e"
339
+ }
340
+ },
382
341
  "fg": {
383
342
  "default": "#24292f",
384
343
  "muted": "#57606a",