@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/dist/json/colors/dark_dimmed.json CHANGED
@@ -176,67 +176,13 @@
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
  },
package/dist/json/colors/dark_high_contrast.json CHANGED
@@ -176,67 +176,13 @@
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
  },
package/dist/json/colors/light.json CHANGED
@@ -176,67 +176,13 @@
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
  },
package/dist/json/colors/light_colorblind.json CHANGED
@@ -176,67 +176,13 @@
176
176
  "gradientOut": "rgba(255,255,255,0)"
177
177
  },
178
178
  "mktg": {
179
- "success": "rgba(3,119,234,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
  },
package/dist/scss/colors/_dark.scss CHANGED
@@ -146,37 +146,11 @@
146
146
  --color-project-sidebar-bg: #161b22;
147
147
  --color-project-gradient-in: #161b22;
148
148
  --color-project-gradient-out: rgba(22,27,34,0);
149
- --color-mktg-success: rgba(41,147,61,1);
150
- --color-mktg-info: rgba(42,123,243,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: #f0f6fc;
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: #f0f6fc;
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: #f0f6fc;
168
- --color-mktg-btn-outline-text: #f0f6fc;
169
- --color-mktg-btn-outline-border: rgba(240,246,252,0.3);
170
- --color-mktg-btn-outline-hover-text: #f0f6fc;
171
- --color-mktg-btn-outline-hover-border: rgba(240,246,252,0.5);
172
- --color-mktg-btn-outline-focus-border: #f0f6fc;
173
- --color-mktg-btn-outline-focus-border-inset: rgba(240,246,252,0.5);
174
- --color-mktg-btn-dark-text: #f0f6fc;
175
- --color-mktg-btn-dark-border: rgba(240,246,252,0.3);
176
- --color-mktg-btn-dark-hover-text: #f0f6fc;
177
- --color-mktg-btn-dark-hover-border: rgba(240,246,252,0.5);
178
- --color-mktg-btn-dark-focus-border: #f0f6fc;
179
- --color-mktg-btn-dark-focus-border-inset: rgba(240,246,252,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(240,246,252,0.1);
181
155
  --color-avatar-border: rgba(240,246,252,0.1);
182
156
  --color-avatar-stack-fade: #30363d;
package/dist/scss/colors/_dark_colorblind.scss CHANGED
@@ -146,37 +146,11 @@
146
146
  --color-project-sidebar-bg: #161b22;
147
147
  --color-project-gradient-in: #161b22;
148
148
  --color-project-gradient-out: rgba(22,27,34,0);
149
- --color-mktg-success: rgba(25,119,239,1);
150
- --color-mktg-info: rgba(42,123,243,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: #f0f6fc;
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: #f0f6fc;
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: #f0f6fc;
168
- --color-mktg-btn-outline-text: #f0f6fc;
169
- --color-mktg-btn-outline-border: rgba(240,246,252,0.3);
170
- --color-mktg-btn-outline-hover-text: #f0f6fc;
171
- --color-mktg-btn-outline-hover-border: rgba(240,246,252,0.5);
172
- --color-mktg-btn-outline-focus-border: #f0f6fc;
173
- --color-mktg-btn-outline-focus-border-inset: rgba(240,246,252,0.5);
174
- --color-mktg-btn-dark-text: #f0f6fc;
175
- --color-mktg-btn-dark-border: rgba(240,246,252,0.3);
176
- --color-mktg-btn-dark-hover-text: #f0f6fc;
177
- --color-mktg-btn-dark-hover-border: rgba(240,246,252,0.5);
178
- --color-mktg-btn-dark-focus-border: #f0f6fc;
179
- --color-mktg-btn-dark-focus-border-inset: rgba(240,246,252,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(240,246,252,0.1);
181
155
  --color-avatar-border: rgba(240,246,252,0.1);
182
156
  --color-avatar-stack-fade: #30363d;
package/dist/scss/colors/_dark_dimmed.scss CHANGED
@@ -146,37 +146,11 @@
146
146
  --color-project-sidebar-bg: #2d333b;
147
147
  --color-project-gradient-in: #2d333b;
148
148
  --color-project-gradient-out: rgba(45,51,59,0);
149
- --color-mktg-success: rgba(61,137,66,1);
150
- --color-mktg-info: rgba(56,119,213,1);
151
- --color-mktg-bg-shade-gradient-top: rgba(28,33,40,0.065);
152
- --color-mktg-bg-shade-gradient-bottom: rgba(28,33,40,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: #cdd9e5;
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: #cdd9e5;
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: #cdd9e5;
168
- --color-mktg-btn-outline-text: #cdd9e5;
169
- --color-mktg-btn-outline-border: rgba(205,217,229,0.3);
170
- --color-mktg-btn-outline-hover-text: #cdd9e5;
171
- --color-mktg-btn-outline-hover-border: rgba(205,217,229,0.5);
172
- --color-mktg-btn-outline-focus-border: #cdd9e5;
173
- --color-mktg-btn-outline-focus-border-inset: rgba(205,217,229,0.5);
174
- --color-mktg-btn-dark-text: #cdd9e5;
175
- --color-mktg-btn-dark-border: rgba(205,217,229,0.3);
176
- --color-mktg-btn-dark-hover-text: #cdd9e5;
177
- --color-mktg-btn-dark-hover-border: rgba(205,217,229,0.5);
178
- --color-mktg-btn-dark-focus-border: #cdd9e5;
179
- --color-mktg-btn-dark-focus-border-inset: rgba(205,217,229,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(205,217,229,0.1);
181
155
  --color-avatar-border: rgba(205,217,229,0.1);
182
156
  --color-avatar-stack-fade: #444c56;
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;
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;
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;
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
  },