@stackoverflow/stacks 0.76.0 → 1.0.0-beta.0

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 (86) hide show
  1. package/LICENSE.MD +9 -9
  2. package/README.md +47 -47
  3. package/dist/controllers/index.d.ts +7 -7
  4. package/dist/controllers/s-expandable-control.d.ts +17 -17
  5. package/dist/controllers/s-modal.d.ts +97 -97
  6. package/dist/controllers/s-navigation-tablist.d.ts +36 -36
  7. package/dist/controllers/s-popover.d.ts +155 -155
  8. package/dist/controllers/s-table.d.ts +8 -8
  9. package/dist/controllers/s-tooltip.d.ts +82 -82
  10. package/dist/controllers/s-uploader.d.ts +48 -48
  11. package/dist/css/stacks.css +4321 -2635
  12. package/dist/css/stacks.min.css +1 -1
  13. package/dist/index.d.ts +3 -3
  14. package/dist/js/stacks.js +1978 -1978
  15. package/dist/js/stacks.min.js +1 -1
  16. package/dist/stacks.d.ts +21 -21
  17. package/lib/css/atomic/{_stacks-borders.less → borders.less} +378 -378
  18. package/lib/css/atomic/{_stacks-colors.less → colors.less} +209 -209
  19. package/lib/css/atomic/{_stacks-flex.less → flex.less} +375 -374
  20. package/lib/css/atomic/{_stacks-grid.less → grid.less} +174 -174
  21. package/lib/css/atomic/{_stacks-misc.less → misc.less} +343 -343
  22. package/lib/css/atomic/spacing.less +314 -0
  23. package/lib/css/atomic/{_stacks-typography.less → typography.less} +273 -273
  24. package/lib/css/atomic/width-height.less +194 -0
  25. package/lib/css/base/{_stacks-body.less → body.less} +44 -44
  26. package/lib/css/base/{_stacks-configuration-static.less → configuration-static.less} +61 -59
  27. package/lib/css/base/{_stacks-icons.less → icons.less} +20 -20
  28. package/lib/css/base/{_stacks-internals.less → internals.less} +220 -220
  29. package/lib/css/base/{_stacks-reset-meyer.less → reset-meyer.less} +64 -64
  30. package/lib/css/base/{_stacks-reset-normalize.less → reset-normalize.less} +449 -449
  31. package/lib/css/base/{_stacks-reset.less → reset.less} +20 -20
  32. package/lib/css/components/{_stacks-activity-indicator.less → activity-indicator.less} +45 -45
  33. package/lib/css/components/{_stacks-avatars.less → avatars.less} +189 -189
  34. package/lib/css/components/{_stacks-badges.less → badges.less} +209 -209
  35. package/lib/css/components/{_stacks-banners.less → banners.less} +80 -80
  36. package/lib/css/components/{_stacks-blank-states.less → blank-states.less} +26 -26
  37. package/lib/css/components/{_stacks-breadcrumbs.less → breadcrumbs.less} +44 -44
  38. package/lib/css/components/{_stacks-button-groups.less → button-groups.less} +104 -104
  39. package/lib/css/components/{_stacks-buttons.less → buttons.less} +665 -658
  40. package/lib/css/components/{_stacks-cards.less → cards.less} +44 -44
  41. package/lib/css/components/{_stacks-code-blocks.less → code-blocks.less} +130 -130
  42. package/lib/css/components/{_stacks-collapsible.less → collapsible.less} +104 -104
  43. package/lib/css/components/{_stacks-inputs.less → inputs.less} +728 -728
  44. package/lib/css/components/{_stacks-link-previews.less → link-previews.less} +136 -136
  45. package/lib/css/components/{_stacks-links.less → links.less} +218 -218
  46. package/lib/css/components/{_stacks-menu.less → menu.less} +47 -47
  47. package/lib/css/components/{_stacks-modals.less → modals.less} +133 -133
  48. package/lib/css/components/{_stacks-navigation.less → navigation.less} +146 -146
  49. package/lib/css/components/{_stacks-notices.less → notices.less} +233 -233
  50. package/lib/css/components/{_stacks-page-titles.less → page-titles.less} +60 -60
  51. package/lib/css/components/{_stacks-pagination.less → pagination.less} +55 -55
  52. package/lib/css/components/{_stacks-popovers.less → popovers.less} +197 -197
  53. package/lib/css/components/{_stacks-post-summary.less → post-summary.less} +425 -425
  54. package/lib/css/components/{_stacks-progress-bars.less → progress-bars.less} +330 -331
  55. package/lib/css/components/{_stacks-prose.less → prose.less} +503 -503
  56. package/lib/css/components/{_stacks-spinner.less → spinner.less} +107 -107
  57. package/lib/css/components/{_stacks-tables.less → tables.less} +341 -341
  58. package/lib/css/components/{_stacks-tags.less → tags.less} +236 -236
  59. package/lib/css/components/{_stacks-toggle-switches.less → toggle-switches.less} +144 -144
  60. package/lib/css/components/{_stacks-topbar.less → topbar.less} +427 -425
  61. package/lib/css/components/{_stacks-uploader.less → uploader.less} +210 -210
  62. package/lib/css/components/{_stacks-user-cards.less → user-cards.less} +169 -169
  63. package/lib/css/components/{_stacks-widget-dynamic.less → widget-dynamic.less} +33 -33
  64. package/lib/css/components/{_stacks-widget-static.less → widget-static.less} +273 -272
  65. package/lib/css/exports/{_stacks-constants-colors.less → constants-colors.less} +1092 -1112
  66. package/lib/css/exports/constants-helpers.less +108 -0
  67. package/lib/css/exports/{_stacks-constants-type.less → constants-type.less} +153 -152
  68. package/lib/css/exports/{_stacks-exports.less → exports.less} +15 -15
  69. package/lib/css/exports/{_stacks-mixins.less → mixins.less} +237 -220
  70. package/lib/css/stacks-dynamic.less +35 -35
  71. package/lib/css/stacks-static.less +86 -86
  72. package/lib/ts/controllers/index.ts +7 -7
  73. package/lib/ts/controllers/s-expandable-control.ts +188 -188
  74. package/lib/ts/controllers/s-modal.ts +321 -321
  75. package/lib/ts/controllers/s-navigation-tablist.ts +117 -117
  76. package/lib/ts/controllers/s-popover.ts +547 -547
  77. package/lib/ts/controllers/s-table.ts +220 -220
  78. package/lib/ts/controllers/s-tooltip.ts +246 -246
  79. package/lib/ts/controllers/s-uploader.ts +172 -172
  80. package/lib/ts/index.ts +20 -20
  81. package/lib/ts/stacks.ts +88 -88
  82. package/lib/tsconfig.json +13 -13
  83. package/package.json +87 -87
  84. package/lib/css/atomic/_stacks-spacing.less +0 -168
  85. package/lib/css/atomic/_stacks-width-height.less +0 -195
  86. package/lib/css/exports/_stacks-constants-helpers.less +0 -139
package/lib/css/exports/{_stacks-constants-colors.less → constants-colors.less} RENAMED
@@ -1,1112 +1,1092 @@
1
- @import (reference) "./_stacks-mixins.less";
2
-
3
- //
4
- // STACK OVERFLOW
5
- // CONSTANTS -- COLORS
6
- //
7
- // This CSS comes from Stacks, our CSS & Pattern library for rapidly building
8
- // Stack Overflow. For documentation of all these classes and how to contribute,
9
- // visit https://stackoverflow.design/
10
- //
11
- // ============================================================================
12
- // $ Legacy Less color variables
13
- // ----------------------------------------------------------------------------
14
- // -- Base Hue Values
15
- @white-h: 0;
16
- @black-h: 210;
17
- @orange-h: 27;
18
- @yellow-h: 47;
19
- @green-h: 140;
20
- @blue-h: 206;
21
- @powder-h: 205;
22
- @red-h: 358;
23
- @fog-h: 180;
24
- @gold-h: 48;
25
- @silver-h: 210;
26
- @bronze-h: 28;
27
-
28
- // -- Base Saturation Values
29
- @black-s: 8%;
30
-
31
- // -- Primary Colors
32
- @white: hsl(@white-h, 0%, 100%);
33
- @black: hsl(@black-h, @black-s, 5%);
34
- @orange: hsl(@orange-h, 90%, 55%);
35
-
36
- // -- Accent Colors
37
- @yellow: hsl(@yellow-h, 83%, 91%);
38
- @green: hsl(@green-h, 40%, 55%);
39
- @blue: hsl(@blue-h, 100%, 40%);
40
- @powder: hsl(@powder-h, 46%, 92%);
41
- @red: hsl(@red-h, 62%, 52%);
42
- @fog: hsl(@fog-h, 7%, 97%);
43
-
44
- // Black
45
- @black-025: hsl(@black-h, @black-s, 97.5%);
46
- @black-050: hsl(@black-h, @black-s, 95%);
47
- @black-075: hsl(@black-h, @black-s, 90%);
48
- @black-100: hsl(@black-h, @black-s, 85%);
49
- @black-150: hsl(@black-h, @black-s, 80%);
50
- @black-200: hsl(@black-h, @black-s, 75%);
51
- @black-300: hsl(@black-h, @black-s, 65%);
52
- @black-350: hsl(@black-h, @black-s, 60%);
53
- @black-400: hsl(@black-h, @black-s, 55%);
54
- @black-500: hsl(@black-h, @black-s, 45%);
55
- @black-600: hsl(@black-h, @black-s, 35%);
56
- @black-700: hsl(@black-h, @black-s, 25%);
57
- @black-750: hsl(@black-h, @black-s, 20%);
58
- @black-800: hsl(@black-h, @black-s, 15%);
59
- @black-900: @black;
60
-
61
- // Orange
62
- @orange-050: hsl(@orange-h, 100%, 97%);
63
- @orange-100: hsl(@orange-h, 95%, 90%);
64
- @orange-200: hsl(@orange-h, 90%, 83%);
65
- @orange-300: hsl(@orange-h, 90%, 70%);
66
- @orange-400: @orange;
67
- @orange-500: hsl(@orange-h, 90%, 50%);
68
- @orange-600: hsl(@orange-h, 90%, 45%);
69
- @orange-700: hsl(@orange-h, 90%, 39%);
70
- @orange-800: hsl(@orange-h, 87%, 35%);
71
- @orange-900: hsl(@orange-h, 80%, 30%);
72
-
73
- // Blue
74
- @blue-050: hsl(@blue-h, 100%, 97%);
75
- @blue-100: hsl(@blue-h, 96%, 90%);
76
- @blue-200: hsl(@blue-h, 93%, 83.5%);
77
- @blue-300: hsl(@blue-h, 90%, 69.5%);
78
- @blue-400: hsl(@blue-h, 85%, 57.5%);
79
- @blue-500: hsl(@blue-h, 100%, 52%);
80
- @blue-600: @blue;
81
- @blue-700: hsl(@blue-h + 3, 100%, 37.5%);
82
- @blue-800: hsl(@blue-h + 3, 100%, 32%);
83
- @blue-900: hsl(@blue-h + 3, 100%, 26%);
84
-
85
- // Powder
86
- @powder-050: hsl(@powder-h, 47%, 97%);
87
- @powder-100: @powder;
88
- @powder-200: hsl(@powder-h, 53%, 88%);
89
- @powder-300: hsl(@powder-h, 57%, 81%);
90
- @powder-400: hsl(@powder-h, 56%, 76%);
91
- @powder-500: hsl(@powder-h, 41%, 63%);
92
- @powder-600: hsl(@powder-h, 36%, 53%);
93
- @powder-700: hsl(@powder-h, 47%, 42%);
94
- @powder-800: hsl(@powder-h, 46%, 32%);
95
- @powder-900: hsl(@powder-h, 46%, 22%);
96
-
97
- // Green
98
- @green-025: hsl(@green-h, 42%, 95%);
99
- @green-050: hsl(@green-h, 40%, 90%);
100
- @green-100: hsl(@green-h, 40%, 85%);
101
- @green-200: hsl(@green-h, 40%, 75%);
102
- @green-300: hsl(@green-h, 40%, 65%);
103
- @green-400: @green;
104
- @green-500: hsl(@green-h, 40%, 47%);
105
- @green-600: hsl(@green-h, 40%, 40%);
106
- @green-700: hsl(@green-h, 41%, 31%);
107
- @green-800: hsl(@green-h, 40%, 27%);
108
- @green-900: hsl(@green-h, 40%, 20%);
109
-
110
- // Yellow
111
- @yellow-050: hsl(@yellow-h, 87%, 94%);
112
- @yellow-100: @yellow;
113
- @yellow-200: hsl(@yellow-h, 65%, 84%);
114
- @yellow-300: hsl(@yellow-h, 69%, 69%);
115
- @yellow-400: hsl(@yellow-h, 79%, 58%);
116
- @yellow-500: hsl(@yellow-h, 73%, 50%);
117
- @yellow-600: hsl(@yellow-h, 76%, 46%);
118
- @yellow-700: hsl(@yellow-h, 79%, 40%);
119
- @yellow-800: hsl(@yellow-h, 82%, 34%);
120
- @yellow-900: hsl(@yellow-h, 84%, 28%);
121
-
122
- // Red
123
- @red-050: hsl(@red-h, 75%, 97%);
124
- @red-100: hsl(@red-h, 76%, 90%);
125
- @red-200: hsl(@red-h, 74%, 83%);
126
- @red-300: hsl(@red-h, 70%, 70%);
127
- @red-400: hsl(@red-h, 68%, 59%);
128
- @red-500: @red;
129
- @red-600: hsl(@red-h, 62%, 47%);
130
- @red-700: hsl(@red-h, 64%, 41%);
131
- @red-800: hsl(@red-h, 64%, 35%);
132
- @red-900: hsl(@red-h, 67%, 29%);
133
-
134
- // $ BADGES
135
- // ----------------------------------------------------------------------------
136
- @gold: hsl(@gold-h, 100%, 50%);
137
- @gold-lighter: hsl(@gold-h, 100%, 91%);
138
- @gold-darker: hsl(@gold-h - 3, 100%, 47%);
139
-
140
- @silver: hsl(@silver-h, 6%, 72%);
141
- @silver-lighter: hsl(@silver-h, 0%, 91%);
142
- @silver-darker: hsl(@silver-h, 3%, 61%);
143
-
144
- @bronze: hsl(@bronze-h, 38%, 67%);
145
- @bronze-lighter: hsl(@bronze-h, 40%, 92%);
146
- @bronze-darker: hsl(@bronze-h, 31%, 52%);
147
-
148
- // $ SHADOWS
149
- // ----------------------------------------------------------------------------
150
- @bs-sm: 0 1px 2px hsla(0, 0%, 0%, 0.05), 0 1px 4px hsla(0, 0%, 0%, 0.05), 0 2px 8px hsla(0, 0%, 0%, 0.05);
151
- @bs-md: 0 1px 3px hsla(0, 0%, 0%, 0.06), 0 2px 6px hsla(0, 0%, 0%, 0.06), 0 3px 8px hsla(0, 0%, 0%, 0.09);
152
- @bs-lg: 0 1px 4px hsla(0, 0%, 0%, 0.09), 0 3px 8px hsla(0, 0%, 0%, 0.09), 0 4px 13px hsla(0, 0%, 0%, 0.13);
153
- @bs-xl: 0 10px 24px hsla(0, 0%, 0%, 0.05), 0 20px 48px hsla(0, 0%, 0%, 0.05), 0 1px 4px hsla(0, 0%, 0%, 0.1);
154
-
155
- // $ SCROLLBARS
156
- // ----------------------------------------------------------------------------
157
- @scrollbar: hsla(0, 0%, 0%, 0.2);
158
-
159
- // ============================================================================
160
- // $ CSS Variable Colors
161
- // ----------------------------------------------------------------------------
162
-
163
- .generate-calculated-themed-variables(@primary, @designation: primary, @theme: base) {
164
- // Split into h/s/l/a values
165
- --theme-@{theme}-@{designation}-color-h: hue(@primary);
166
- --theme-@{theme}-@{designation}-color-s: saturation(@primary);
167
- --theme-@{theme}-@{designation}-color-l: lightness(@primary);
168
-
169
- // Split into r/g/b values
170
- --theme-@{theme}-@{designation}-color-r: red(@primary);
171
- --theme-@{theme}-@{designation}-color-g: green(@primary);
172
- --theme-@{theme}-@{designation}-color-b: blue(@primary);
173
- }
174
-
175
- .generate-themed-variables(@theme: theme) {
176
- // Primary color
177
- // Split into h/s/l/a values
178
- --theme-primary-color-h: var(~"--@{theme}-primary-color-h", var(--theme-base-primary-color-h));
179
- --theme-primary-color-s: var(~"--@{theme}-primary-color-s", var(--theme-base-primary-color-s));
180
- --theme-primary-color-l: var(~"--@{theme}-primary-color-l", var(--theme-base-primary-color-l));
181
-
182
- // Split into r/g/b values
183
- --theme-primary-color-r: var(~"--@{theme}-primary-color-r", var(--theme-base-primary-color-r));
184
- --theme-primary-color-g: var(~"--@{theme}-primary-color-g", var(--theme-base-primary-color-g));
185
- --theme-primary-color-b: var(~"--@{theme}-primary-color-b", var(--theme-base-primary-color-b));
186
-
187
- // Secondary color
188
- // Split into h/s/l/a values
189
- --theme-secondary-color-h: var(~"--@{theme}-secondary-color-h", var(--theme-base-secondary-color-h));
190
- --theme-secondary-color-s: var(~"--@{theme}-secondary-color-s", var(--theme-base-secondary-color-s));
191
- --theme-secondary-color-l: var(~"--@{theme}-secondary-color-l", var(--theme-base-secondary-color-l));
192
-
193
- // Split into r/g/b values
194
- --theme-secondary-color-r: var(~"--@{theme}-secondary-color-r", var(--theme-base-secondary-color-r));
195
- --theme-secondary-color-g: var(~"--@{theme}-secondary-color-g", var(--theme-base-secondary-color-g));
196
- --theme-secondary-color-b: var(~"--@{theme}-secondary-color-b", var(--theme-base-secondary-color-b));
197
- }
198
-
199
- .component-colors {
200
- --theme-body-font-color: var(--black-800);
201
- --theme-background-color: var(--white);
202
- // Links
203
- --theme-link-color: var(--theme-secondary-400);
204
- --theme-link-color-hover: var(--theme-secondary-350);
205
- --theme-link-color-visited: var(--theme-secondary-500);
206
-
207
- // Button Default (Secondary)
208
- --theme-button-color: var(--theme-secondary-400);
209
- --theme-button-background-color: transparent;
210
- --theme-button-hover-color: var(--theme-secondary-500);
211
- --theme-button-hover-background-color: var(--theme-secondary-050);
212
- --theme-button-active-background-color: var(--theme-secondary-100);
213
- --theme-button-selected-color: var(--theme-secondary-900);
214
- --theme-button-selected-background-color: var(--theme-secondary-150);
215
-
216
- // Button Primary
217
- --theme-button-primary-color: var(--white);
218
- --theme-button-primary-background-color: var(--theme-secondary-400);
219
- --theme-button-primary-hover-color: var(--white);
220
- --theme-button-primary-hover-background-color: var(--theme-secondary-500);
221
- --theme-button-primary-active-background-color: var(--theme-secondary-700);
222
- --theme-button-primary-selected-color: var(--white);
223
- --theme-button-primary-selected-background-color: var(--theme-secondary-700);
224
- --theme-button-primary-number-color: var(--theme-secondary-900);
225
-
226
- // Button Filled
227
- --theme-button-filled-color: var(--theme-secondary-700);
228
- --theme-button-filled-background-color: var(--theme-secondary-050);
229
- --theme-button-filled-border-color: var(--theme-secondary-350);
230
- --theme-button-filled-hover-color: var(--theme-secondary-800);
231
- --theme-button-filled-hover-background-color: var(--theme-secondary-100);
232
- --theme-button-filled-active-background-color: var(--theme-secondary-150);
233
- --theme-button-filled-active-border-color: var(--theme-secondary-350);
234
- --theme-button-filled-selected-color: var(--theme-secondary-900);
235
- --theme-button-filled-selected-background-color: var(--theme-secondary-300);
236
- --theme-button-filled-selected-border-color: var(--theme-secondary-500);
237
-
238
- // Button Outline
239
- --theme-button-outlined-border-color: var(--theme-secondary-300);
240
- --theme-button-outlined-selected-border-color: var(--theme-secondary-400);
241
-
242
- // Tags
243
- --theme-tag-color: var(--theme-secondary-800);
244
- --theme-tag-background-color: var(--theme-secondary-075);
245
- --theme-tag-border-color: transparent;
246
- --theme-tag-hover-color: var(--theme-secondary-900);
247
- --theme-tag-hover-background-color: var(--theme-secondary-100);
248
- --theme-tag-hover-border-color: transparent;
249
-
250
- // Topbar
251
- --theme-topbar-height: @su48;
252
- --theme-topbar-background-color: var(--black-025);
253
-
254
- // Topbar Search input
255
- --theme-topbar-search-color: var(--black-700);
256
- --theme-topbar-search-background: var(--white);
257
- --theme-topbar-search-placeholder: var(--black-200);
258
- --theme-topbar-search-border: var(--black-200);
259
- --theme-topbar-search-border-focus: var(--blue-300);
260
- --theme-topbar-search-shadow-focus: 0 0 0 @su4 var(--focus-ring);
261
-
262
- // Topbar Search switcher
263
- --theme-topbar-select-color: var(--black-700);
264
- --theme-topbar-select-background: var(--black-075);
265
-
266
- // Topbar items
267
- --theme-topbar-item-color: var(--black-600);
268
- --theme-topbar-item-color-hover: var(--black-800);
269
- --theme-topbar-item-background-hover: var(--black-075);
270
- --theme-topbar-item-color-current: var(--black);
271
- --theme-topbar-item-border-current: var(--theme-primary-color);
272
-
273
- // Topbar themed border accent
274
- --theme-topbar-accent-border: 3px solid var(--theme-primary-color);
275
-
276
- // Post summary
277
- --theme-post-title-color: var(--theme-link-color);
278
- --theme-post-title-color-hover: var(--theme-link-color-hover);
279
- --theme-post-title-color-visited: var(--theme-link-color-visited);
280
- --theme-post-title-font-family: var(--theme-body-font-family);
281
- --theme-post-body-font-family: var(--theme-body-font-family);
282
- }
283
-
284
- // -- Light mode
285
- .light-colors() {
286
- --white: @white;
287
- --black: @black;
288
- --orange: @orange;
289
- --yellow: @yellow;
290
- --green: @green;
291
- --blue: @blue;
292
- --powder: @powder;
293
- --red: @red;
294
-
295
- // Black
296
- --black-025: @black-025;
297
- --black-050: @black-050;
298
- --black-075: @black-075;
299
- --black-100: @black-100;
300
- --black-150: @black-150;
301
- --black-200: @black-200;
302
- --black-300: @black-300;
303
- --black-350: @black-350;
304
- --black-400: @black-400;
305
- --black-500: @black-500;
306
- --black-600: @black-600;
307
- --black-700: @black-700;
308
- --black-750: @black-750;
309
- --black-800: @black-800;
310
- --black-900: @black-900;
311
-
312
- // Orange
313
- --orange-050: @orange-050;
314
- --orange-100: @orange-100;
315
- --orange-200: @orange-200;
316
- --orange-300: @orange-300;
317
- --orange-400: @orange-400;
318
- --orange-500: @orange-500;
319
- --orange-600: @orange-600;
320
- --orange-700: @orange-700;
321
- --orange-800: @orange-800;
322
- --orange-900: @orange-900;
323
-
324
- // Blue
325
- --blue-050: @blue-050;
326
- --blue-100: @blue-100;
327
- --blue-200: @blue-200;
328
- --blue-300: @blue-300;
329
- --blue-400: @blue-400;
330
- --blue-500: @blue-500;
331
- --blue-600: @blue-600;
332
- --blue-700: @blue-700;
333
- --blue-800: @blue-800;
334
- --blue-900: @blue-900;
335
-
336
- // Powder
337
- --powder-050: @powder-050;
338
- --powder-100: @powder-100;
339
- --powder-200: @powder-200;
340
- --powder-300: @powder-300;
341
- --powder-400: @powder-400;
342
- --powder-500: @powder-500;
343
- --powder-600: @powder-600;
344
- --powder-700: @powder-700;
345
- --powder-800: @powder-800;
346
- --powder-900: @powder-900;
347
-
348
- // Green
349
- --green-025: @green-025;
350
- --green-050: @green-050;
351
- --green-100: @green-100;
352
- --green-200: @green-200;
353
- --green-300: @green-300;
354
- --green-400: @green-400;
355
- --green-500: @green-500;
356
- --green-600: @green-600;
357
- --green-700: @green-700;
358
- --green-800: @green-800;
359
- --green-900: @green-900;
360
-
361
- // Yellow
362
- --yellow-050: @yellow-050;
363
- --yellow-100: @yellow-100;
364
- --yellow-200: @yellow-200;
365
- --yellow-300: @yellow-300;
366
- --yellow-400: @yellow-400;
367
- --yellow-500: @yellow-500;
368
- --yellow-600: @yellow-600;
369
- --yellow-700: @yellow-700;
370
- --yellow-800: @yellow-800;
371
- --yellow-900: @yellow-900;
372
-
373
- // Red
374
- --red-050: @red-050;
375
- --red-100: @red-100;
376
- --red-200: @red-200;
377
- --red-300: @red-300;
378
- --red-400: @red-400;
379
- --red-500: @red-500;
380
- --red-600: @red-600;
381
- --red-700: @red-700;
382
- --red-800: @red-800;
383
- --red-900: @red-900;
384
-
385
- // Gold
386
- --gold: @gold;
387
- --gold-lighter: @gold-lighter;
388
- --gold-darker: @gold-darker;
389
-
390
- // Silver
391
- --silver: @silver;
392
- --silver-lighter: @silver-lighter;
393
- --silver-darker: @silver-darker;
394
-
395
- // Bronze
396
- --bronze: @bronze;
397
- --bronze-lighter: @bronze-lighter;
398
- --bronze-darker: @bronze-darker;
399
-
400
- // Border colors
401
- --bc-lightest: var(--black-025);
402
- --bc-lighter: var(--black-050);
403
- --bc-light: var(--black-075);
404
- --bc-medium: var(--black-100);
405
- --bc-dark: var(--black-150);
406
- --bc-darker: var(--black-200);
407
-
408
- // Font colors
409
- --fc-dark: @black-900;
410
- --fc-medium: @black-700;
411
- --fc-light: @black-500;
412
-
413
- // Focus rings
414
- --focus-ring-success: hsla(@green-h, 40%, 75%, 40%);
415
- --focus-ring-warning: hsla(@yellow-h, 79%, 58%, 40%);
416
- --focus-ring-error: hsla(@red-h, 62%, 47%, 15%);
417
- --focus-ring-muted: hsla(@black-h, @black-s, 15%, 10%);
418
-
419
- // Shadows
420
- --bs-sm: @bs-sm;
421
- --bs-md: @bs-md;
422
- --bs-lg: @bs-lg;
423
- --bs-xl: @bs-xl;
424
-
425
- // Scrollbars
426
- --scrollbar: hsla(0, 0, 0, 0.2);
427
-
428
- // Syntax highlighting
429
- --highlight-bg: hsl(0, 0%, 96.5%); // Between black-025 and black-050
430
- --highlight-color: var(--black-750); // AAA 11.78
431
- --highlight-comment: hsl(@black-h, 8%, 43.5%); // ~black-500 AA 4.80
432
- --highlight-punctuation: var(--black-600); // AA 6.48
433
- --highlight-namespace: hsl(@orange-h, 99%, 36%); // Custom orange AA 4.51
434
- --highlight-attribute: hsl(@blue-h, 98.5%, 29%); // Custom blue AAA 7.25
435
- --highlight-literal: hsl(@orange-h, 99%, 36%); // Custom orange AA 4.51
436
- --highlight-symbol: hsl(306, 43%, 35%); // Custom purple AAA 7.30
437
- --highlight-keyword: hsl(@blue-h, 98.5%, 29%); // Custom blue AAA 7.07
438
- --highlight-variable: hsl(80, 80.5%, 26.5%); // Custom green AAA 7.25
439
- --highlight-addition: var(--green-700); // AA 5.59
440
- --highlight-deletion: var(--red-600); // AA 5.31
441
- }
442
-
443
- .light-themed-colors() {
444
- // Reassemble as a single hsl value
445
- --theme-primary-color: .assemble-color(theme-primary-color)[];
446
-
447
- // Steps
448
- --theme-primary-900: .native-darken(theme-primary-color, 26)[];
449
- --theme-primary-800: .native-darken(theme-primary-color, 21)[];
450
- --theme-primary-700: .native-darken(theme-primary-color, 16)[];
451
- --theme-primary-600: .native-darken(theme-primary-color, 10)[];
452
- --theme-primary-500: .native-darken(theme-primary-color, 5)[];
453
- --theme-primary-400: var(--theme-primary-color);
454
- --theme-primary-350: .native-tint(theme-primary-color, 20)[];
455
- --theme-primary-300: .native-tint(theme-primary-color, 35)[];
456
- --theme-primary-200: .native-tint(theme-primary-color, 48)[];
457
- --theme-primary-150: .native-tint(theme-primary-color, 65)[];
458
- --theme-primary-100: .native-tint(theme-primary-color, 78)[];
459
- --theme-primary-075: .native-tint(theme-primary-color, 85)[];
460
- --theme-primary-050: .native-tint(theme-primary-color, 92)[];
461
- --theme-primary-025: .native-tint(theme-primary-color, 96)[];
462
-
463
- // Reassemble as a single hsl value
464
- --theme-secondary-color: .assemble-color(theme-secondary-color)[];
465
-
466
- // Steps
467
- --theme-secondary-900: .native-darken(theme-secondary-color, 26)[];
468
- --theme-secondary-800: .native-darken(theme-secondary-color, 21)[];
469
- --theme-secondary-700: .native-darken(theme-secondary-color, 16)[];
470
- --theme-secondary-600: .native-darken(theme-secondary-color, 10)[];
471
- --theme-secondary-500: .native-darken(theme-secondary-color, 5)[];
472
- --theme-secondary-400: var(--theme-secondary-color);
473
- --theme-secondary-350: .native-tint(theme-secondary-color, 20)[];
474
- --theme-secondary-300: .native-tint(theme-secondary-color, 35)[];
475
- --theme-secondary-200: .native-tint(theme-secondary-color, 48)[];
476
- --theme-secondary-150: .native-tint(theme-secondary-color, 65)[];
477
- --theme-secondary-100: .native-tint(theme-secondary-color, 78)[];
478
- --theme-secondary-075: .native-tint(theme-secondary-color, 85)[];
479
- --theme-secondary-050: .native-tint(theme-secondary-color, 92)[];
480
- --theme-secondary-025: .native-tint(theme-secondary-color, 96)[];
481
-
482
- // Fades
483
- --focus-ring: .native-fade(theme-secondary-color, 15)[];
484
-
485
- // TODO
486
- --theme-body-font-color: var(--black-800);
487
- }
488
-
489
- // -- Dark mode
490
- .dark-colors() {
491
- --white: hsl(@black-h, 0%, 17.5%);
492
- --black: @white;
493
-
494
- // Black
495
- --black-025: hsl(@black-h, 0%, 22.5%);
496
- --black-050: hsl(@black-h, 0%, 24%);
497
- --black-075: hsl(@black-h, 4%, 26%);
498
- --black-100: hsl(@black-h, 4.5%, 30.5%);
499
- --black-150: hsl(@black-h, 5%, 35%);
500
- --black-200: hsl(@black-h, 5.5%, 43.5%);
501
- --black-300: hsl(@black-h, 6.5%, 52%);
502
- --black-350: hsl(@black-h, 7%, 61%);
503
- --black-400: hsl(@black-h, 8%, 65%);
504
- --black-500: hsl(@black-h, 8%, 70%);
505
- --black-600: hsl(@black-h, 7%, 78.5%);
506
- --black-700: hsl(@black-h, 8%, 82.5%);
507
- --black-750: hsl(@black-h, 9%, 86.5%);
508
- --black-800: hsl(@black-h, 9%, 91.5%);
509
- --black-900: hsl(@black-h, 4%, 95%);
510
-
511
- // Orange
512
- --orange-050: hsl(@orange-h, 16.5%, 23.9%);
513
- --orange-100: hsl(@orange-h, 30%, 28.4%);
514
- --orange-200: hsl(@orange-h, 50%, 36.9%);
515
- --orange-300: hsl(@orange-h, 70%, 47.3%);
516
- --orange-400: hsl(@orange-h, 90.5%, 54.9%);
517
- --orange-500: hsl(@orange-h, 100%, 59%);
518
- --orange-600: hsl(@orange-h, 100%, 68.4%);
519
- --orange-700: hsl(@orange-h, 89.5%, 74.1%);
520
- --orange-800: hsl(@orange-h, 92%, 85.7%);
521
- --orange-900: hsl(@orange-h, 95%, 91.8%);
522
-
523
- // Blue
524
- --blue-050: hsl(@blue-h, 40%, 23%);
525
- --blue-100: hsl(@blue-h, 44%, 26%);
526
- --blue-200: hsl(@blue-h, 46%, 30%);
527
- --blue-300: hsl(@blue-h, 53%, 35%);
528
- --blue-400: hsl(@blue-h + 3, 56%, 43%);
529
- --blue-500: hsl(@blue-h, 64%, 51%);
530
- --blue-600: hsl(@blue-h, 100%, 60%);
531
- --blue-700: hsl(@blue-h, 90%, 74%);
532
- --blue-800: hsl(@blue-h, 95%, 86%);
533
- --blue-900: hsl(@blue-h, 91%, 91.5%);
534
-
535
- // Powder
536
- --powder-050: hsl(@powder-h, 5%, 27%);
537
- --powder-100: hsl(@powder-h, 14%, 28%);
538
- --powder-200: hsl(@powder-h, 17.5%, 32%);
539
- --powder-300: hsl(@powder-h, 19.5%, 37%);
540
- --powder-400: hsl(@powder-h, 22.5%, 44%);
541
- --powder-500: hsl(@powder-h, 29%, 54%);
542
- --powder-600: hsl(@powder-h, 50%, 65.5%);
543
- --powder-700: hsl(@powder-h, 46.5%, 73.5%);
544
- --powder-800: hsl(@powder-h, 49.5%, 87%);
545
- --powder-900: hsl(@powder-h, 100%, 95%);
546
-
547
- // Green
548
- --green-025: hsl(@green-h, 18%, 22%);
549
- --green-050: hsl(@green-h, 18%, 25%);
550
- --green-100: hsl(@green-h, 22.5%, 31%);
551
- --green-200: hsl(@green-h, 23.5%, 37%);
552
- --green-300: hsl(@green-h, 25%, 40.5%);
553
- --green-400: hsl(@green-h, 27.5%, 48.5%);
554
- --green-500: hsl(@green-h, 35%, 54.5%);
555
- --green-600: hsl(@green-h, 40%, 61.5%);
556
- --green-700: hsl(@green-h, 39.5%, 69.5%);
557
- --green-800: hsl(@green-h, 39.5%, 78.5%);
558
- --green-900: hsl(@green-h, 38%, 86.5%);
559
-
560
- // Yellow
561
- --yellow-050: hsl(@yellow-h, 13%, 24.5%);
562
- --yellow-100: hsl(@yellow-h, 19%, 27%);
563
- --yellow-200: hsl(@yellow-h, 30.5%, 31%);
564
- --yellow-300: hsl(@yellow-h, 37%, 36%);
565
- --yellow-400: hsl(@yellow-h, 45.5%, 42.5%);
566
- --yellow-500: hsl(@yellow-h, 55.5%, 48%);
567
- --yellow-600: hsl(@yellow-h, 67.5%, 55.5%);
568
- --yellow-700: hsl(@yellow-h, 84.5%, 64%);
569
- --yellow-800: hsl(@yellow-h, 90%, 72.5%);
570
- --yellow-900: hsl(@yellow-h, 93%, 83.5%);
571
-
572
- // Red
573
- --red-050: hsl(@red-h + 3, 30%, 26.5%);
574
- --red-100: hsl(@red-h + 3, 35%, 33%);
575
- --red-200: hsl(@red-h + 3, 37%, 38.5%);
576
- --red-300: hsl(@red-h + 3, 39%, 43.5%);
577
- --red-400: hsl(@red-h + 3, 42%, 49%);
578
- --red-500: hsl(@red-h + 3, 50%, 54%);
579
- --red-600: hsl(@red-h + 3, 56.5%, 59.5%);
580
- --red-700: hsl(@red-h + 3, 62.5%, 65.5%);
581
- --red-800: hsl(@red-h + 3, 64%, 74%);
582
- --red-900: hsl(@red-h + 3, 65.5%, 85.5%);
583
-
584
- // Gold
585
- --gold: @gold;
586
- --gold-lighter: hsl(@gold-h, 22%, 30%);
587
- --gold-darker: @gold-darker;
588
-
589
- // Silver
590
- --silver: @silver;
591
- --silver-lighter: hsl(@silver-h, 0%, 26%);
592
- --silver-darker: @silver-darker;
593
-
594
- // Bronze
595
- --bronze: @bronze;
596
- --bronze-lighter: hsl(@bronze-h, 13%, 27%);
597
- --bronze-darker: @bronze-darker;
598
-
599
- // Border colors
600
- --bc-lightest: var(--black-025);
601
- --bc-lighter: var(--black-050);
602
- --bc-light: var(--black-075);
603
- --bc-medium: var(--black-100);
604
- --bc-dark: var(--black-150);
605
- --bc-darker: var(--black-200);
606
-
607
- // Font colors
608
- --fc-dark: var(--black-900);
609
- --fc-medium: var(--black-700);
610
- --fc-light: var(--black-500);
611
-
612
- // Focus rings
613
- --focus-ring-success: hsla(@green-h, 40%, 75%, 40%);
614
- --focus-ring-warning: hsla(@yellow-h, 79%, 58%, 40%);
615
- --focus-ring-error: hsla(@red-h, 62%, 52%, 30%);
616
- --focus-ring-muted: hsla(@black-h, @black-s, 100%, 10%);
617
-
618
- // Shadows
619
- --bs-sm: 0 1px 2px hsla(0, 0%, 0%, 0.1), 0 1px 4px hsla(0, 0%, 0%, 0.1), 0 2px 8px hsla(0, 0%, 0%, 0.1);
620
- --bs-md: 0 1px 3px hsla(0, 0%, 0%, 0.11), 0 2px 6px hsla(0, 0%, 0%, 0.11), 0 3px 8px hsla(0, 0%, 0%, 0.14);
621
- --bs-lg: 0 1px 4px hsla(0, 0%, 0%, 0.14), 0 3px 8px hsla(0, 0%, 0%, 0.14), 0 4px 13px hsla(0, 0%, 0%, 0.18);
622
- --bs-xl: 0 10px 24px hsla(0, 0%, 0%, 0.1), 0 20px 48px hsla(0, 0%, 0%, 0.1), 0 1px 4px hsla(0, 0%, 0%, 0.15);
623
-
624
- // Scrollbars
625
- --scrollbar: hsla(0, 0%, 100%, 0.2);
626
-
627
- // Syntax highlighting
628
- --highlight-bg: hsl(0, 2%, 11%);
629
- --highlight-color: var(--black); // AAA 17.19
630
- --highlight-comment: hsl(0, 0%, 60%); // AA 6.03
631
- --highlight-punctuation: hsl(0, 0%, 80%); // AAA 10.70
632
- --highlight-namespace: hsl(@orange-h, 85%, 61.5%); // Custom orange AAA 7.05
633
- --highlight-attribute: hsl(@powder-h + 2, 41.5%, 67%); // Custom powder blue AAA 7.63
634
- --highlight-literal: hsl(@orange-h, 85%, 61.5%); // Custom orange AAA 7.05
635
- --highlight-symbol: hsl(306, 43%, 69%); // Custom purple AAA 7.23
636
- --highlight-keyword: hsl(@powder-h + 3, 41.5%, 67%); // Custom powder blue AAA 7.63
637
- --highlight-variable: hsl(65.5, 39%, 57.5%);
638
- --highlight-addition: var(--green-600); // AAA 8.21
639
- --highlight-deletion: var(--red-700); // AA 5.51
640
- }
641
-
642
- .dark-themed-colors() {
643
- // Reassemble as a single hsl value
644
- --theme-primary-color: .assemble-color(theme-primary-color)[];
645
-
646
- // Reassemble as a single hsl value
647
- --theme-secondary-color: .assemble-color(theme-secondary-color)[];
648
-
649
- // Primary Theming
650
- --theme-primary-025: .native-darken-desaturate(theme-primary-color, 17, 82)[];
651
- --theme-primary-050: .native-darken-desaturate(theme-primary-color, 15, 47)[];
652
- --theme-primary-075: .native-darken-desaturate(theme-primary-color, 13, 39)[];
653
- --theme-primary-100: .native-darken-desaturate(theme-primary-color, 11, 32)[];
654
- --theme-primary-150: .native-darken-desaturate(theme-primary-color, 9, 23)[];
655
- --theme-primary-200: .native-darken-desaturate(theme-primary-color, 7, 15)[];
656
- --theme-primary-300: .native-darken-desaturate(theme-primary-color, 5, 7)[];
657
- --theme-primary-350: var(--theme-primary-color);
658
- --theme-primary-400: .native-tint(theme-primary-color, 21)[];
659
- --theme-primary-500: .native-tint(theme-primary-color, 36)[];
660
- --theme-primary-600: .native-tint(theme-primary-color, 51)[];
661
- --theme-primary-700: .native-tint(theme-primary-color, 66)[];
662
- --theme-primary-800: .native-tint(theme-primary-color, 81)[];
663
- --theme-primary-900: .native-tint(theme-primary-color, 96)[];
664
-
665
- // Secondary Theming
666
- --theme-secondary-025: .native-darken-desaturate(theme-secondary-color, 17, 82)[];
667
- --theme-secondary-050: .native-darken-desaturate(theme-secondary-color, 15, 47)[];
668
- --theme-secondary-075: .native-darken-desaturate(theme-secondary-color, 13, 39)[];
669
- --theme-secondary-100: .native-darken-desaturate(theme-secondary-color, 11, 32)[];
670
- --theme-secondary-150: .native-darken-desaturate(theme-secondary-color, 9, 23)[];
671
- --theme-secondary-200: .native-darken-desaturate(theme-secondary-color, 7, 15)[];
672
- --theme-secondary-300: .native-darken-desaturate(theme-secondary-color, 5, 7)[];
673
- --theme-secondary-350: var(--theme-secondary-color);
674
- --theme-secondary-400: .native-tint(theme-secondary-color, 21)[];
675
- --theme-secondary-500: .native-tint(theme-secondary-color, 36)[];
676
- --theme-secondary-600: .native-tint(theme-secondary-color, 51)[];
677
- --theme-secondary-700: .native-tint(theme-secondary-color, 66)[];
678
- --theme-secondary-800: .native-tint(theme-secondary-color, 81)[];
679
- --theme-secondary-900: .native-tint(theme-secondary-color, 96)[];
680
-
681
- // Fades
682
- --focus-ring: .native-fade(theme-secondary-color, 25)[];
683
-
684
- // TODO
685
- --theme-body-font-color: var(--black-800);
686
- }
687
-
688
- // rules shared between .theme-dark and .theme-system w/ prefers-color-scheme: dark
689
- .theme-dark-rules() {
690
- .dark-colors();
691
-
692
- &,
693
- & .themed {
694
- .generate-themed-variables(theme-dark);
695
- // add in the themed "native mixins", making sure to scope to the child .themed elements so they don't use the parent's values
696
- .dark-themed-colors();
697
- }
698
-
699
- & .themed {
700
- &:extend(.component-colors);
701
- }
702
- }
703
-
704
- // -- High contrast modes
705
- .light-highcontrast() {
706
- --white: hsl(0, 0%, 100%);
707
- --black: hsl(0, 0%, 0%);
708
-
709
- // Black
710
- --black-025: hsl(@black-h, @black-s, 97.5%);
711
- --black-050: hsl(@black-h, @black-s, 95%);
712
- --black-075: hsl(@black-h, @black-s, 92.5%);
713
- --black-100: hsl(@black-h, @black-s, 90%);
714
- --black-150: hsl(@black-h, @black-s, 87.5%);
715
- --black-200: hsl(@black-h, @black-s, 85%);
716
- --black-300: hsl(@black-h, @black-s, 35%);
717
- --black-350: hsl(@black-h, @black-s, 32.5%);
718
- --black-400: hsl(@black-h, @black-s, 30%);
719
- --black-500: hsl(@black-h, @black-s, 25%);
720
- --black-600: hsl(@black-h, @black-s, 20%);
721
- --black-700: hsl(@black-h, @black-s, 15%);
722
- --black-750: hsl(@black-h, @black-s, 10%);
723
- --black-800: hsl(@black-h, @black-s, 5%);
724
- --black-900: hsl(@black-h, @black-s, 0%);
725
-
726
- // Orange
727
- --orange-050: hsl(@orange-h, 100%, 97.5%);
728
- --orange-100: hsl(@orange-h, 100%, 94%);
729
- --orange-200: hsl(@orange-h, 100%, 88%);
730
- --orange-300: hsl(@orange-h, 100%, 82%);
731
- --orange-400: hsl(@orange-h, 100%, 34%);
732
- --orange-500: hsl(@orange-h, 100%, 29%);
733
- --orange-600: hsl(@orange-h, 100%, 24%);
734
- --orange-700: hsl(@orange-h, 100%, 19%);
735
- --orange-800: hsl(@orange-h, 100%, 13%);
736
- --orange-900: hsl(@orange-h, 100%, 8%);
737
-
738
- // Blue
739
- --blue-050: hsl(@blue-h, 100%, 97.5%);
740
- --blue-100: hsl(@blue-h, 100%, 95%);
741
- --blue-200: hsl(@blue-h, 100%, 90%);
742
- --blue-300: hsl(@blue-h, 100%, 85%);
743
- --blue-400: hsl(@blue-h, 100%, 25%);
744
- --blue-500: hsl(@blue-h, 100%, 20%);
745
- --blue-600: hsl(@blue-h, 100%, 15%);
746
- --blue-700: hsl(@blue-h, 100%, 10%);
747
- --blue-800: hsl(@blue-h, 100%, 7.5%);
748
- --blue-900: hsl(@blue-h, 100%, 5%);
749
-
750
- // Powder
751
- --powder-050: hsl(@powder-h, 100%, 97.5%);
752
- --powder-100: hsl(@powder-h, 85%, 96%);
753
- --powder-200: hsl(@powder-h, 75%, 92%);
754
- --powder-300: hsl(@powder-h, 70%, 88%);
755
- --powder-400: hsl(@powder-h, 55%, 28%);
756
- --powder-500: hsl(@powder-h, 60%, 24%);
757
- --powder-600: hsl(@powder-h, 70%, 20%);
758
- --powder-700: hsl(@powder-h, 75%, 16%);
759
- --powder-800: hsl(@powder-h, 75%, 12%);
760
- --powder-900: hsl(@powder-h, 75%, 8%);
761
-
762
- // Green
763
- --green-025: hsl(@green-h, 100%, 97%);
764
- --green-050: hsl(@green-h, 100%, 96%);
765
- --green-100: hsl(@green-h, 100%, 94%);
766
- --green-200: hsl(@green-h, 100%, 88%);
767
- --green-300: hsl(@green-h, 100%, 82%);
768
- --green-400: hsl(@green-h, 100%, 18%);
769
- --green-500: hsl(@green-h, 100%, 15%);
770
- --green-600: hsl(@green-h, 100%, 12%);
771
- --green-700: hsl(@green-h, 100%, 9%);
772
- --green-800: hsl(@green-h, 100%, 6%);
773
- --green-900: hsl(@green-h, 100%, 3%);
774
-
775
- // Yellow
776
- --yellow-050: hsl(@yellow-h, 100%, 95%);
777
- --yellow-100: hsl(@yellow-h, 100%, 92%);
778
- --yellow-200: hsl(@yellow-h, 95%, 85%);
779
- --yellow-300: hsl(@yellow-h, 95%, 78%);
780
- --yellow-400: hsl(@yellow-h, 100%, 28%);
781
- --yellow-500: hsl(@yellow-h, 100%, 26%);
782
- --yellow-600: hsl(@yellow-h, 100%, 23%);
783
- --yellow-700: hsl(@yellow-h, 100%, 19%);
784
- --yellow-800: hsl(@yellow-h, 100%, 13%);
785
- --yellow-900: hsl(@yellow-h, 100%, 7%);
786
-
787
- // Red
788
- --red-050: hsl(@red-h, 100%, 97.5%);
789
- --red-100: hsl(@red-h, 100%, 95%);
790
- --red-200: hsl(@red-h, 100%, 90%);
791
- --red-300: hsl(@red-h, 100%, 85%);
792
- --red-400: hsl(@red-h, 100%, 35%);
793
- --red-500: hsl(@red-h, 100%, 29%);
794
- --red-600: hsl(@red-h, 100%, 23%);
795
- --red-700: hsl(@red-h, 100%, 17%);
796
- --red-800: hsl(@red-h, 100%, 11%);
797
- --red-900: hsl(@red-h, 100%, 7%);
798
-
799
- // Gold
800
- --gold: hsl(@gold-h, 100%, 50%);
801
- --gold-lighter: hsl(@gold-h, 100%, 91%);
802
- --gold-darker: hsl(@gold-h - 3, 100%, 20%);
803
-
804
- // Silver
805
- --silver: hsl(@silver-h, 6%, 72%);
806
- --silver-lighter: hsl(@silver-h, 6%, 91%);
807
- --silver-darker: hsl(@silver-h, 6%, 30%);
808
-
809
- // Bronze
810
- --bronze: hsl(@bronze-h, 38%, 65%);
811
- --bronze-lighter: hsl(@bronze-h, 40%, 92%);
812
- --bronze-darker: hsl(@bronze-h, 31%, 25%);
813
-
814
- // Border colors
815
- --bc-lightest: var(--black-400);
816
- --bc-lighter: var(--black-400);
817
- --bc-light: var(--black-400);
818
- --bc-medium: var(--black-400);
819
- --bc-dark: var(--black-700);
820
- --bc-darker: var(--black-900);
821
-
822
- // Font colors
823
- --fc-dark: var(--black-900);
824
- --fc-medium: var(--black-700);
825
- --fc-light: var(--black-500);
826
-
827
- // Focus rings
828
- --focus-ring: fade(@blue-600, 90%);
829
- --focus-ring-success: fade(@green-600, 90%);
830
- --focus-ring-warning: fade(@yellow-600, 90%);
831
- --focus-ring-error: fade(@red-600, 90%);
832
- --focus-ring-muted: fade(@black-400, 95%);
833
-
834
- // Shadows
835
- --bs-sm: none;
836
- --bs-md: none;
837
- --bs-lg: none;
838
- --bs-xl: none;
839
-
840
- // Scrollbars
841
- --scrollbar: var(--black);
842
-
843
- // Syntax highlighting
844
- --highlight-bg: hsl(0, 0%, 96.5%); // Between black-025 and black-050
845
- --highlight-color: var(--black-750);
846
- --highlight-comment: hsl(213, 7%, 33%); // Custom black
847
- --highlight-punctuation: var(--black-600);
848
- --highlight-namespace: hsl(16, 94%, 31%); // Custom orange
849
- --highlight-attribute: hsl(215, 100%, 35%); // Custom blue
850
- --highlight-literal: hsl(16, 94%, 31%); // Custom orange
851
- --highlight-symbol: hsl(309, 45%, 31%); // Custom purple
852
- --highlight-keyword: hsl(215, 100%, 35%); // Custom blue
853
- --highlight-variable: hsl(88, 100%, 19%); // Custom green
854
- --highlight-addition: var(--green-500);
855
- --highlight-deletion: var(--red-500);
856
-
857
- // High contrast theme override
858
- &:extend(.highcontrast-themed-colors);
859
- }
860
-
861
- .dark-highcontrast() {
862
- --white: hsl(0, 0%, 0%);
863
- --black: hsl(0, 0%, 100%);
864
-
865
- // Black
866
- --black-025: hsl(@black-h, @black-s, 2.5%);
867
- --black-050: hsl(@black-h, @black-s, 5%);
868
- --black-075: hsl(@black-h, @black-s, 7.5%);
869
- --black-100: hsl(@black-h, @black-s, 10%);
870
- --black-150: hsl(@black-h, @black-s, 12.5%);
871
- --black-200: hsl(@black-h, @black-s, 15%);
872
- --black-300: hsl(@black-h, @black-s, 65%);
873
- --black-350: hsl(@black-h, @black-s, 67.5%);
874
- --black-400: hsl(@black-h, @black-s, 70%);
875
- --black-500: hsl(@black-h, @black-s, 75%);
876
- --black-600: hsl(@black-h, @black-s, 80%);
877
- --black-700: hsl(@black-h, @black-s, 85%);
878
- --black-750: hsl(@black-h, @black-s, 90%);
879
- --black-800: hsl(@black-h, @black-s, 95%);
880
- --black-900: hsl(@black-h, @black-s, 100%);
881
-
882
- // Orange
883
- --orange-050: hsl(@orange-h, 100%, 4%);
884
- --orange-100: hsl(@orange-h, 100%, 8%);
885
- --orange-200: hsl(@orange-h, 100%, 16%);
886
- --orange-300: hsl(@orange-h, 100%, 24%);
887
- --orange-400: hsl(@orange-h, 100%, 64%);
888
- --orange-500: hsl(@orange-h, 100%, 71%);
889
- --orange-600: hsl(@orange-h, 100%, 77%);
890
- --orange-700: hsl(@orange-h, 100%, 82%);
891
- --orange-800: hsl(@orange-h, 100%, 87%);
892
- --orange-900: hsl(@orange-h, 100%, 91%);
893
-
894
- // Blue
895
- --blue-050: hsl(@blue-h, 100%, 4%);
896
- --blue-100: hsl(@blue-h, 100%, 11%);
897
- --blue-200: hsl(@blue-h, 100%, 18%);
898
- --blue-300: hsl(@blue-h, 100%, 25%);
899
- --blue-400: hsl(@blue-h, 100%, 75%);
900
- --blue-500: hsl(@blue-h, 100%, 80%);
901
- --blue-600: hsl(@blue-h, 100%, 85%);
902
- --blue-700: hsl(@blue-h, 100%, 90%);
903
- --blue-800: hsl(@blue-h, 100%, 92.5%);
904
- --blue-900: hsl(@blue-h, 100%, 95%);
905
-
906
- // Powder
907
- --powder-050: hsl(@powder-h, 100%, 6%);
908
- --powder-100: hsl(@powder-h, 90%, 8%);
909
- --powder-200: hsl(@powder-h, 80%, 14%);
910
- --powder-300: hsl(@powder-h, 60%, 20%);
911
- --powder-400: hsl(@powder-h, 55%, 72%);
912
- --powder-500: hsl(@powder-h, 60%, 76%);
913
- --powder-600: hsl(@powder-h, 70%, 80%);
914
- --powder-700: hsl(@powder-h, 75%, 84%);
915
- --powder-800: hsl(@powder-h, 75%, 88%);
916
- --powder-900: hsl(@powder-h, 75%, 92%);
917
-
918
- // Green
919
- --green-025: hsl(@green-h, 100%, 3%);
920
- --green-050: hsl(@green-h, 100%, 4%);
921
- --green-100: hsl(@green-h, 100%, 6%);
922
- --green-200: hsl(@green-h, 100%, 12%);
923
- --green-300: hsl(@green-h, 100%, 18%);
924
- --green-400: hsl(@green-h, 100%, 65%);
925
- --green-500: hsl(@green-h, 100%, 71%);
926
- --green-600: hsl(@green-h, 100%, 77%);
927
- --green-700: hsl(@green-h, 100%, 83%);
928
- --green-800: hsl(@green-h, 100%, 89%);
929
- --green-900: hsl(@green-h, 100%, 94%);
930
-
931
- // Yellow
932
- --yellow-050: hsl(@yellow-h, 100%, 4%);
933
- --yellow-100: hsl(@yellow-h, 100%, 8%);
934
- --yellow-200: hsl(@yellow-h, 95%, 16%);
935
- --yellow-300: hsl(@yellow-h, 95%, 24%);
936
- --yellow-400: hsl(@yellow-h, 100%, 55%);
937
- --yellow-500: hsl(@yellow-h, 100%, 63%);
938
- --yellow-600: hsl(@yellow-h, 100%, 71%);
939
- --yellow-700: hsl(@yellow-h, 100%, 79%);
940
- --yellow-800: hsl(@yellow-h, 100%, 87%);
941
- --yellow-900: hsl(@yellow-h, 100%, 95%);
942
-
943
- // Red
944
- --red-050: hsl(@red-h, 100%, 4%);
945
- --red-100: hsl(@red-h, 100%, 8%);
946
- --red-200: hsl(@red-h, 100%, 16%);
947
- --red-300: hsl(@red-h, 100%, 24%);
948
- --red-400: hsl(@red-h, 100%, 70%);
949
- --red-500: hsl(@red-h, 100%, 75%);
950
- --red-600: hsl(@red-h, 100%, 80%);
951
- --red-700: hsl(@red-h, 100%, 85%);
952
- --red-800: hsl(@red-h, 100%, 90%);
953
- --red-900: hsl(@red-h, 100%, 95%);
954
-
955
- // Gold
956
- --gold: hsl(@gold-h, 100%, 50%);
957
- --gold-lighter: hsl(@gold-h - 3, 100%, 9%);
958
- --gold-darker: hsl(@gold-h - 3, 100%, 80%);
959
-
960
- // Silver
961
- --silver: hsl(@silver-h, 6%, 72%);
962
- --silver-lighter: hsl(@silver-h, 5%, 9%);
963
- --silver-darker: hsl(@silver-h, 5%, 70%);
964
-
965
- // Bronze
966
- --bronze: hsl(@bronze-h, 38%, 65%);
967
- --bronze-lighter: hsl(@bronze-h, 40%, 8%);
968
- --bronze-darker: hsl(@bronze-h, 46.7%, 75%);
969
-
970
- // Border colors
971
- --bc-lightest: var(--black-400);
972
- --bc-lighter: var(--black-400);
973
- --bc-light: var(--black-400);
974
- --bc-medium: var(--black-400);
975
- --bc-dark: var(--black-700);
976
- --bc-darker: var(--black-900);
977
-
978
- // Focus rings
979
- --focus-ring: fade(@blue-600, 90%);
980
- --focus-ring-success: fade(@green-600, 90%);
981
- --focus-ring-warning: fade(@yellow-600, 90%);
982
- --focus-ring-error: fade(@red-600, 90%);
983
- --focus-ring-muted: fade(@black-400, 95%);
984
-
985
- // Font colors
986
- --fc-dark: var(--black-900);
987
- --fc-medium: var(--black-700);
988
- --fc-light: var(--black-500);
989
-
990
- // Shadows
991
- --bs-sm: none;
992
- --bs-md: none;
993
- --bs-lg: none;
994
- --bs-xl: none;
995
-
996
- // Scrollbars
997
- --scrollbar: var(--black);
998
-
999
- // Syntax highlighting
1000
- --highlight-bg: hsl(0, 0%, 10%);
1001
- --highlight-color: hsl(0, 0%, 100%);
1002
- --highlight-comment: hsl(0, 0%, 99%); // Custom gray
1003
- --highlight-punctuation: hsl(0, 0%, 99%); // Custom gray
1004
- --highlight-namespace: hsl(36, 96%, 71%); // Custom orange
1005
- --highlight-attribute: hsl(200, 57%, 85%); // Custom blue
1006
- --highlight-literal: hsl(36, 96%, 71%); // Custom orange
1007
- --highlight-symbol: hsl(304, 39%, 85%); // Custom purple
1008
- --highlight-keyword: hsl(200, 57%, 85%); // Custom blue
1009
- --highlight-variable: hsl(62, 71%, 81%); // Custom green
1010
- --highlight-addition: var(--green-600);
1011
- --highlight-deletion: var(--red-700);
1012
-
1013
- // High contrast theme override
1014
- &:extend(.highcontrast-themed-colors);
1015
- }
1016
-
1017
- .highcontrast-themed-colors {
1018
- // Primary Theming
1019
- --theme-primary-color: var(--orange-400);
1020
- --theme-primary-025: var(--orange-050);
1021
- --theme-primary-050: var(--orange-050);
1022
- --theme-primary-075: var(--orange-050);
1023
- --theme-primary-100: var(--orange-100);
1024
- --theme-primary-150: var(--orange-100);
1025
- --theme-primary-200: var(--orange-200);
1026
- --theme-primary-300: var(--orange-300);
1027
- --theme-primary-350: var(--orange-300);
1028
- --theme-primary-400: var(--orange-400);
1029
- --theme-primary-500: var(--orange-500);
1030
- --theme-primary-600: var(--orange-600);
1031
- --theme-primary-700: var(--orange-700);
1032
- --theme-primary-800: var(--orange-800);
1033
- --theme-primary-900: var(--orange-900);
1034
-
1035
- // Secondary Theming
1036
- --theme-secondary-color: var(--blue-400);
1037
- --theme-secondary-025: var(--blue-050);
1038
- --theme-secondary-050: var(--blue-050);
1039
- --theme-secondary-075: var(--blue-050);
1040
- --theme-secondary-100: var(--blue-100);
1041
- --theme-secondary-150: var(--blue-100);
1042
- --theme-secondary-200: var(--blue-200);
1043
- --theme-secondary-300: var(--blue-300);
1044
- --theme-secondary-350: var(--blue-300);
1045
- --theme-secondary-400: var(--blue-400);
1046
- --theme-secondary-500: var(--blue-500);
1047
- --theme-secondary-600: var(--blue-600);
1048
- --theme-secondary-700: var(--blue-700);
1049
- --theme-secondary-800: var(--blue-800);
1050
- --theme-secondary-900: var(--blue-900);
1051
- }
1052
-
1053
- :root {
1054
- // specify the default colors in less, then deconstruct them
1055
- // this keeps the hsl/rgb variables below in sync, but consumers will need to set each variable separately
1056
- @defaultPrimaryColor: @orange;
1057
- @defaultSecondaryColor: @blue;
1058
- .generate-calculated-themed-variables(@defaultPrimaryColor, primary);
1059
- .generate-calculated-themed-variables(@defaultSecondaryColor, secondary);
1060
- }
1061
-
1062
- // place component-colors on the body directly (instead of :root) so consumers can use the --theme-* variables
1063
- body {
1064
- &:extend(.component-colors);
1065
- }
1066
-
1067
- // Light mode
1068
- body:not(.theme-dark),
1069
- body.theme-dark .theme-light__forced,
1070
- body.theme-system .theme-light__forced {
1071
- .light-colors();
1072
-
1073
- &,
1074
- & .themed {
1075
- .generate-themed-variables(theme-light);
1076
- // add in the themed "native mixins", making sure to scope to the child .themed elements so they don't use the parent's values
1077
- .light-themed-colors();
1078
- }
1079
-
1080
- & .themed {
1081
- &:extend(.component-colors);
1082
- }
1083
- }
1084
-
1085
- // Dark mode
1086
- body.theme-dark,
1087
- body:not(.theme-dark) .theme-dark__forced {
1088
- .theme-dark-rules();
1089
- }
1090
- body.theme-system {
1091
- @media (prefers-color-scheme: dark) {
1092
- .theme-dark-rules();
1093
- }
1094
- }
1095
-
1096
- // High contrast mode (Light)
1097
- body.theme-highcontrast:not(.theme-dark),
1098
- body.theme-dark.theme-highcontrast .theme-light__forced,
1099
- body.theme-system.theme-highcontrast .theme-light__forced {
1100
- .light-highcontrast();
1101
- }
1102
-
1103
- // High contrast mode (Dark)
1104
- body.theme-dark.theme-highcontrast,
1105
- body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
1106
- .dark-highcontrast();
1107
- }
1108
- body.theme-system.theme-highcontrast {
1109
- @media (prefers-color-scheme: dark) {
1110
- .dark-highcontrast();
1111
- }
1112
- }
1
+ @import (reference) "./mixins.less";
2
+
3
+ //
4
+ // STACK OVERFLOW
5
+ // CONSTANTS -- COLORS
6
+ //
7
+ // This CSS comes from Stacks, our CSS & Pattern library for rapidly building
8
+ // Stack Overflow. For documentation of all these classes and how to contribute,
9
+ // visit https://stackoverflow.design/
10
+ //
11
+ // ============================================================================
12
+ // $ Legacy Less color variables
13
+ // ----------------------------------------------------------------------------
14
+ // -- Base Hue Values
15
+ @white-h: 0;
16
+ @black-h: 210;
17
+ @orange-h: 27;
18
+ @yellow-h: 47;
19
+ @green-h: 140;
20
+ @blue-h: 206;
21
+ @powder-h: 205;
22
+ @red-h: 358;
23
+ @fog-h: 180;
24
+ @gold-h: 48;
25
+ @silver-h: 210;
26
+ @bronze-h: 28;
27
+
28
+ // -- Base Saturation Values
29
+ @black-s: 8%;
30
+
31
+ // -- Primary Colors
32
+ @white: hsl(@white-h, 0%, 100%);
33
+ @black: hsl(@black-h, @black-s, 5%);
34
+ @orange: hsl(@orange-h, 90%, 55%);
35
+
36
+ // -- Accent Colors
37
+ @yellow: hsl(@yellow-h, 83%, 91%);
38
+ @green: hsl(@green-h, 40%, 55%);
39
+ @blue: hsl(@blue-h, 100%, 40%);
40
+ @powder: hsl(@powder-h, 46%, 92%);
41
+ @red: hsl(@red-h, 62%, 52%);
42
+ @fog: hsl(@fog-h, 7%, 97%);
43
+
44
+ // Black
45
+ @black-025: hsl(@black-h, @black-s, 97.5%);
46
+ @black-050: hsl(@black-h, @black-s, 95%);
47
+ @black-075: hsl(@black-h, @black-s, 90%);
48
+ @black-100: hsl(@black-h, @black-s, 85%);
49
+ @black-150: hsl(@black-h, @black-s, 80%);
50
+ @black-200: hsl(@black-h, @black-s, 75%);
51
+ @black-300: hsl(@black-h, @black-s, 65%);
52
+ @black-350: hsl(@black-h, @black-s, 60%);
53
+ @black-400: hsl(@black-h, @black-s, 55%);
54
+ @black-500: hsl(@black-h, @black-s, 45%);
55
+ @black-600: hsl(@black-h, @black-s, 35%);
56
+ @black-700: hsl(@black-h, @black-s, 25%);
57
+ @black-750: hsl(@black-h, @black-s, 20%);
58
+ @black-800: hsl(@black-h, @black-s, 15%);
59
+ @black-900: @black;
60
+
61
+ // Orange
62
+ @orange-050: hsl(@orange-h, 100%, 97%);
63
+ @orange-100: hsl(@orange-h, 95%, 90%);
64
+ @orange-200: hsl(@orange-h, 90%, 83%);
65
+ @orange-300: hsl(@orange-h, 90%, 70%);
66
+ @orange-400: @orange;
67
+ @orange-500: hsl(@orange-h, 90%, 50%);
68
+ @orange-600: hsl(@orange-h, 90%, 45%);
69
+ @orange-700: hsl(@orange-h, 90%, 39%);
70
+ @orange-800: hsl(@orange-h, 87%, 35%);
71
+ @orange-900: hsl(@orange-h, 80%, 30%);
72
+
73
+ // Blue
74
+ @blue-050: hsl(@blue-h, 100%, 97%);
75
+ @blue-100: hsl(@blue-h, 96%, 90%);
76
+ @blue-200: hsl(@blue-h, 93%, 83.5%);
77
+ @blue-300: hsl(@blue-h, 90%, 69.5%);
78
+ @blue-400: hsl(@blue-h, 85%, 57.5%);
79
+ @blue-500: hsl(@blue-h, 100%, 52%);
80
+ @blue-600: @blue;
81
+ @blue-700: hsl(@blue-h + 3, 100%, 37.5%);
82
+ @blue-800: hsl(@blue-h + 3, 100%, 32%);
83
+ @blue-900: hsl(@blue-h + 3, 100%, 26%);
84
+
85
+ // Powder
86
+ @powder-050: hsl(@powder-h, 47%, 97%);
87
+ @powder-100: @powder;
88
+ @powder-200: hsl(@powder-h, 53%, 88%);
89
+ @powder-300: hsl(@powder-h, 57%, 81%);
90
+ @powder-400: hsl(@powder-h, 56%, 76%);
91
+ @powder-500: hsl(@powder-h, 41%, 63%);
92
+ @powder-600: hsl(@powder-h, 36%, 53%);
93
+ @powder-700: hsl(@powder-h, 47%, 42%);
94
+ @powder-800: hsl(@powder-h, 46%, 32%);
95
+ @powder-900: hsl(@powder-h, 46%, 22%);
96
+
97
+ // Green
98
+ @green-025: hsl(@green-h, 42%, 95%);
99
+ @green-050: hsl(@green-h, 40%, 90%);
100
+ @green-100: hsl(@green-h, 40%, 85%);
101
+ @green-200: hsl(@green-h, 40%, 75%);
102
+ @green-300: hsl(@green-h, 40%, 65%);
103
+ @green-400: @green;
104
+ @green-500: hsl(@green-h, 40%, 47%);
105
+ @green-600: hsl(@green-h, 40%, 40%);
106
+ @green-700: hsl(@green-h, 41%, 31%);
107
+ @green-800: hsl(@green-h, 40%, 27%);
108
+ @green-900: hsl(@green-h, 40%, 20%);
109
+
110
+ // Yellow
111
+ @yellow-050: hsl(@yellow-h, 87%, 94%);
112
+ @yellow-100: @yellow;
113
+ @yellow-200: hsl(@yellow-h, 65%, 84%);
114
+ @yellow-300: hsl(@yellow-h, 69%, 69%);
115
+ @yellow-400: hsl(@yellow-h, 79%, 58%);
116
+ @yellow-500: hsl(@yellow-h, 73%, 50%);
117
+ @yellow-600: hsl(@yellow-h, 76%, 46%);
118
+ @yellow-700: hsl(@yellow-h, 79%, 40%);
119
+ @yellow-800: hsl(@yellow-h, 82%, 34%);
120
+ @yellow-900: hsl(@yellow-h, 84%, 28%);
121
+
122
+ // Red
123
+ @red-050: hsl(@red-h, 75%, 97%);
124
+ @red-100: hsl(@red-h, 76%, 90%);
125
+ @red-200: hsl(@red-h, 74%, 83%);
126
+ @red-300: hsl(@red-h, 70%, 70%);
127
+ @red-400: hsl(@red-h, 68%, 59%);
128
+ @red-500: @red;
129
+ @red-600: hsl(@red-h, 62%, 47%);
130
+ @red-700: hsl(@red-h, 64%, 41%);
131
+ @red-800: hsl(@red-h, 64%, 35%);
132
+ @red-900: hsl(@red-h, 67%, 29%);
133
+
134
+ // $ BADGES
135
+ // ----------------------------------------------------------------------------
136
+ @gold: hsl(@gold-h, 100%, 50%);
137
+ @gold-lighter: hsl(@gold-h, 100%, 91%);
138
+ @gold-darker: hsl(@gold-h - 3, 100%, 47%);
139
+
140
+ @silver: hsl(@silver-h, 6%, 72%);
141
+ @silver-lighter: hsl(@silver-h, 0%, 91%);
142
+ @silver-darker: hsl(@silver-h, 3%, 61%);
143
+
144
+ @bronze: hsl(@bronze-h, 38%, 67%);
145
+ @bronze-lighter: hsl(@bronze-h, 40%, 92%);
146
+ @bronze-darker: hsl(@bronze-h, 31%, 52%);
147
+
148
+ // $ SCROLLBARS
149
+ // ----------------------------------------------------------------------------
150
+ @scrollbar: hsla(0, 0%, 0%, 0.2);
151
+
152
+ // ============================================================================
153
+ // $ CSS Variable Colors
154
+ // ----------------------------------------------------------------------------
155
+
156
+ .generate-calculated-themed-variables(@primary, @designation: primary, @theme: base) {
157
+ // Split into h/s/l/a values
158
+ --theme-@{theme}-@{designation}-color-h: hue(@primary);
159
+ --theme-@{theme}-@{designation}-color-s: saturation(@primary);
160
+ --theme-@{theme}-@{designation}-color-l: lightness(@primary);
161
+
162
+ // Split into r/g/b values
163
+ --theme-@{theme}-@{designation}-color-r: red(@primary);
164
+ --theme-@{theme}-@{designation}-color-g: green(@primary);
165
+ --theme-@{theme}-@{designation}-color-b: blue(@primary);
166
+ }
167
+
168
+ .generate-themed-variables(@theme: theme) {
169
+ // Primary color
170
+ // Split into h/s/l/a values
171
+ --theme-primary-color-h: var(~"--@{theme}-primary-color-h", var(--theme-base-primary-color-h));
172
+ --theme-primary-color-s: var(~"--@{theme}-primary-color-s", var(--theme-base-primary-color-s));
173
+ --theme-primary-color-l: var(~"--@{theme}-primary-color-l", var(--theme-base-primary-color-l));
174
+
175
+ // Split into r/g/b values
176
+ --theme-primary-color-r: var(~"--@{theme}-primary-color-r", var(--theme-base-primary-color-r));
177
+ --theme-primary-color-g: var(~"--@{theme}-primary-color-g", var(--theme-base-primary-color-g));
178
+ --theme-primary-color-b: var(~"--@{theme}-primary-color-b", var(--theme-base-primary-color-b));
179
+
180
+ // Secondary color
181
+ // Split into h/s/l/a values
182
+ --theme-secondary-color-h: var(~"--@{theme}-secondary-color-h", var(--theme-base-secondary-color-h));
183
+ --theme-secondary-color-s: var(~"--@{theme}-secondary-color-s", var(--theme-base-secondary-color-s));
184
+ --theme-secondary-color-l: var(~"--@{theme}-secondary-color-l", var(--theme-base-secondary-color-l));
185
+
186
+ // Split into r/g/b values
187
+ --theme-secondary-color-r: var(~"--@{theme}-secondary-color-r", var(--theme-base-secondary-color-r));
188
+ --theme-secondary-color-g: var(~"--@{theme}-secondary-color-g", var(--theme-base-secondary-color-g));
189
+ --theme-secondary-color-b: var(~"--@{theme}-secondary-color-b", var(--theme-base-secondary-color-b));
190
+ }
191
+
192
+ .component-colors {
193
+ --theme-body-font-color: var(--black-800);
194
+ --theme-background-color: var(--white);
195
+ // Links
196
+ --theme-link-color: var(--theme-secondary-400);
197
+ --theme-link-color-hover: var(--theme-secondary-350);
198
+ --theme-link-color-visited: var(--theme-secondary-500);
199
+
200
+ // Button Default (Secondary)
201
+ --theme-button-color: var(--theme-secondary-400);
202
+ --theme-button-background-color: transparent;
203
+ --theme-button-hover-color: var(--theme-secondary-500);
204
+ --theme-button-hover-background-color: var(--theme-secondary-050);
205
+ --theme-button-active-background-color: var(--theme-secondary-100);
206
+ --theme-button-selected-color: var(--theme-secondary-900);
207
+ --theme-button-selected-background-color: var(--theme-secondary-150);
208
+
209
+ // Button Primary
210
+ --theme-button-primary-color: var(--white);
211
+ --theme-button-primary-background-color: var(--theme-secondary-400);
212
+ --theme-button-primary-hover-color: var(--white);
213
+ --theme-button-primary-hover-background-color: var(--theme-secondary-500);
214
+ --theme-button-primary-active-background-color: var(--theme-secondary-700);
215
+ --theme-button-primary-selected-color: var(--white);
216
+ --theme-button-primary-selected-background-color: var(--theme-secondary-700);
217
+ --theme-button-primary-number-color: var(--theme-secondary-900);
218
+
219
+ // Button Filled
220
+ --theme-button-filled-color: var(--theme-secondary-700);
221
+ --theme-button-filled-background-color: var(--theme-secondary-050);
222
+ --theme-button-filled-border-color: var(--theme-secondary-350);
223
+ --theme-button-filled-hover-color: var(--theme-secondary-800);
224
+ --theme-button-filled-hover-background-color: var(--theme-secondary-100);
225
+ --theme-button-filled-active-background-color: var(--theme-secondary-150);
226
+ --theme-button-filled-active-border-color: var(--theme-secondary-350);
227
+ --theme-button-filled-selected-color: var(--theme-secondary-900);
228
+ --theme-button-filled-selected-background-color: var(--theme-secondary-300);
229
+ --theme-button-filled-selected-border-color: var(--theme-secondary-500);
230
+
231
+ // Button Outline
232
+ --theme-button-outlined-border-color: var(--theme-secondary-300);
233
+ --theme-button-outlined-selected-border-color: var(--theme-secondary-400);
234
+
235
+ // Tags
236
+ --theme-tag-color: var(--theme-secondary-800);
237
+ --theme-tag-background-color: var(--theme-secondary-075);
238
+ --theme-tag-border-color: transparent;
239
+ --theme-tag-hover-color: var(--theme-secondary-900);
240
+ --theme-tag-hover-background-color: var(--theme-secondary-100);
241
+ --theme-tag-hover-border-color: transparent;
242
+
243
+ // Topbar
244
+ --theme-topbar-height: var(--su-static48);
245
+ --theme-topbar-background-color: var(--black-025);
246
+
247
+ // Topbar Search input
248
+ --theme-topbar-search-color: var(--black-700);
249
+ --theme-topbar-search-background: var(--white);
250
+ --theme-topbar-search-placeholder: var(--black-200);
251
+ --theme-topbar-search-border: var(--black-200);
252
+ --theme-topbar-search-border-focus: var(--blue-300);
253
+ --theme-topbar-search-shadow-focus: 0 0 0 var(--su-static4) var(--focus-ring);
254
+
255
+ // Topbar Search switcher
256
+ --theme-topbar-select-color: var(--black-700);
257
+ --theme-topbar-select-background: var(--black-075);
258
+
259
+ // Topbar items
260
+ --theme-topbar-item-color: var(--black-600);
261
+ --theme-topbar-item-color-hover: var(--black-800);
262
+ --theme-topbar-item-background-hover: var(--black-075);
263
+ --theme-topbar-item-color-current: var(--black);
264
+ --theme-topbar-item-border-current: var(--theme-primary-color);
265
+
266
+ // Topbar themed border accent
267
+ --theme-topbar-accent-border: 3px solid var(--theme-primary-color);
268
+
269
+ // Post summary
270
+ --theme-post-title-color: var(--theme-link-color);
271
+ --theme-post-title-color-hover: var(--theme-link-color-hover);
272
+ --theme-post-title-color-visited: var(--theme-link-color-visited);
273
+ --theme-post-title-font-family: var(--theme-body-font-family);
274
+ --theme-post-body-font-family: var(--theme-body-font-family);
275
+ }
276
+
277
+ // -- Light mode
278
+ .light-colors() {
279
+ --white: @white;
280
+ --black: @black;
281
+ --orange: @orange;
282
+ --yellow: @yellow;
283
+ --green: @green;
284
+ --blue: @blue;
285
+ --powder: @powder;
286
+ --red: @red;
287
+
288
+ // Black
289
+ --black-025: @black-025;
290
+ --black-050: @black-050;
291
+ --black-075: @black-075;
292
+ --black-100: @black-100;
293
+ --black-150: @black-150;
294
+ --black-200: @black-200;
295
+ --black-300: @black-300;
296
+ --black-350: @black-350;
297
+ --black-400: @black-400;
298
+ --black-500: @black-500;
299
+ --black-600: @black-600;
300
+ --black-700: @black-700;
301
+ --black-750: @black-750;
302
+ --black-800: @black-800;
303
+ --black-900: @black-900;
304
+
305
+ // Orange
306
+ --orange-050: @orange-050;
307
+ --orange-100: @orange-100;
308
+ --orange-200: @orange-200;
309
+ --orange-300: @orange-300;
310
+ --orange-400: @orange-400;
311
+ --orange-500: @orange-500;
312
+ --orange-600: @orange-600;
313
+ --orange-700: @orange-700;
314
+ --orange-800: @orange-800;
315
+ --orange-900: @orange-900;
316
+
317
+ // Blue
318
+ --blue-050: @blue-050;
319
+ --blue-100: @blue-100;
320
+ --blue-200: @blue-200;
321
+ --blue-300: @blue-300;
322
+ --blue-400: @blue-400;
323
+ --blue-500: @blue-500;
324
+ --blue-600: @blue-600;
325
+ --blue-700: @blue-700;
326
+ --blue-800: @blue-800;
327
+ --blue-900: @blue-900;
328
+
329
+ // Powder
330
+ --powder-050: @powder-050;
331
+ --powder-100: @powder-100;
332
+ --powder-200: @powder-200;
333
+ --powder-300: @powder-300;
334
+ --powder-400: @powder-400;
335
+ --powder-500: @powder-500;
336
+ --powder-600: @powder-600;
337
+ --powder-700: @powder-700;
338
+ --powder-800: @powder-800;
339
+ --powder-900: @powder-900;
340
+
341
+ // Green
342
+ --green-025: @green-025;
343
+ --green-050: @green-050;
344
+ --green-100: @green-100;
345
+ --green-200: @green-200;
346
+ --green-300: @green-300;
347
+ --green-400: @green-400;
348
+ --green-500: @green-500;
349
+ --green-600: @green-600;
350
+ --green-700: @green-700;
351
+ --green-800: @green-800;
352
+ --green-900: @green-900;
353
+
354
+ // Yellow
355
+ --yellow-050: @yellow-050;
356
+ --yellow-100: @yellow-100;
357
+ --yellow-200: @yellow-200;
358
+ --yellow-300: @yellow-300;
359
+ --yellow-400: @yellow-400;
360
+ --yellow-500: @yellow-500;
361
+ --yellow-600: @yellow-600;
362
+ --yellow-700: @yellow-700;
363
+ --yellow-800: @yellow-800;
364
+ --yellow-900: @yellow-900;
365
+
366
+ // Red
367
+ --red-050: @red-050;
368
+ --red-100: @red-100;
369
+ --red-200: @red-200;
370
+ --red-300: @red-300;
371
+ --red-400: @red-400;
372
+ --red-500: @red-500;
373
+ --red-600: @red-600;
374
+ --red-700: @red-700;
375
+ --red-800: @red-800;
376
+ --red-900: @red-900;
377
+
378
+ // Gold
379
+ --gold: @gold;
380
+ --gold-lighter: @gold-lighter;
381
+ --gold-darker: @gold-darker;
382
+
383
+ // Silver
384
+ --silver: @silver;
385
+ --silver-lighter: @silver-lighter;
386
+ --silver-darker: @silver-darker;
387
+
388
+ // Bronze
389
+ --bronze: @bronze;
390
+ --bronze-lighter: @bronze-lighter;
391
+ --bronze-darker: @bronze-darker;
392
+
393
+ // Border colors
394
+ --bc-lightest: var(--black-025);
395
+ --bc-lighter: var(--black-050);
396
+ --bc-light: var(--black-075);
397
+ --bc-medium: var(--black-100);
398
+ --bc-dark: var(--black-150);
399
+ --bc-darker: var(--black-200);
400
+
401
+ // Font colors
402
+ --fc-dark: @black-900;
403
+ --fc-medium: @black-700;
404
+ --fc-light: @black-500;
405
+
406
+ // Focus rings
407
+ --focus-ring-success: hsla(@green-h, 40%, 75%, 40%);
408
+ --focus-ring-warning: hsla(@yellow-h, 79%, 58%, 40%);
409
+ --focus-ring-error: hsla(@red-h, 62%, 47%, 15%);
410
+ --focus-ring-muted: hsla(@black-h, @black-s, 15%, 10%);
411
+
412
+ // Shadows
413
+ --bs-sm: 0 1px 2px hsla(0, 0%, 0%, 0.05), 0 1px 4px hsla(0, 0%, 0%, 0.05), 0 2px 8px hsla(0, 0%, 0%, 0.05);
414
+ --bs-md: 0 1px 3px hsla(0, 0%, 0%, 0.06), 0 2px 6px hsla(0, 0%, 0%, 0.06), 0 3px 8px hsla(0, 0%, 0%, 0.09);
415
+ --bs-lg: 0 1px 4px hsla(0, 0%, 0%, 0.09), 0 3px 8px hsla(0, 0%, 0%, 0.09), 0 4px 13px hsla(0, 0%, 0%, 0.13);
416
+ --bs-xl: 0 10px 24px hsla(0, 0%, 0%, 0.05), 0 20px 48px hsla(0, 0%, 0%, 0.05), 0 1px 4px hsla(0, 0%, 0%, 0.1);
417
+
418
+ // Scrollbars
419
+ --scrollbar: hsla(0, 0, 0, 0.2);
420
+
421
+ // Syntax highlighting
422
+ --highlight-bg: hsl(0, 0%, 96.5%); // Between black-025 and black-050
423
+ --highlight-color: var(--black-750); // AAA 11.78
424
+ --highlight-comment: hsl(@black-h, 8%, 43.5%); // ~black-500 AA 4.80
425
+ --highlight-punctuation: var(--black-600); // AA 6.48
426
+ --highlight-namespace: hsl(@orange-h, 99%, 36%); // Custom orange AA 4.51
427
+ --highlight-attribute: hsl(@blue-h, 98.5%, 29%); // Custom blue AAA 7.25
428
+ --highlight-literal: hsl(@orange-h, 99%, 36%); // Custom orange AA 4.51
429
+ --highlight-symbol: hsl(306, 43%, 35%); // Custom purple AAA 7.30
430
+ --highlight-keyword: hsl(@blue-h, 98.5%, 29%); // Custom blue AAA 7.07
431
+ --highlight-variable: hsl(80, 80.5%, 26.5%); // Custom green AAA 7.25
432
+ --highlight-addition: var(--green-700); // AA 5.59
433
+ --highlight-deletion: var(--red-600); // AA 5.31
434
+ }
435
+
436
+ .light-themed-colors() {
437
+ // Reassemble as a single hsl value
438
+ --theme-primary-color: .assemble-color(theme-primary-color)[];
439
+
440
+ // Steps
441
+ --theme-primary-900: .native-darken(theme-primary-color, 26)[];
442
+ --theme-primary-800: .native-darken(theme-primary-color, 21)[];
443
+ --theme-primary-700: .native-darken(theme-primary-color, 16)[];
444
+ --theme-primary-600: .native-darken(theme-primary-color, 10)[];
445
+ --theme-primary-500: .native-darken(theme-primary-color, 5)[];
446
+ --theme-primary-400: var(--theme-primary-color);
447
+ --theme-primary-350: .native-tint(theme-primary-color, 20)[];
448
+ --theme-primary-300: .native-tint(theme-primary-color, 35)[];
449
+ --theme-primary-200: .native-tint(theme-primary-color, 48)[];
450
+ --theme-primary-150: .native-tint(theme-primary-color, 65)[];
451
+ --theme-primary-100: .native-tint(theme-primary-color, 78)[];
452
+ --theme-primary-075: .native-tint(theme-primary-color, 85)[];
453
+ --theme-primary-050: .native-tint(theme-primary-color, 92)[];
454
+ --theme-primary-025: .native-tint(theme-primary-color, 96)[];
455
+
456
+ // Reassemble as a single hsl value
457
+ --theme-secondary-color: .assemble-color(theme-secondary-color)[];
458
+
459
+ // Steps
460
+ --theme-secondary-900: .native-darken(theme-secondary-color, 26)[];
461
+ --theme-secondary-800: .native-darken(theme-secondary-color, 21)[];
462
+ --theme-secondary-700: .native-darken(theme-secondary-color, 16)[];
463
+ --theme-secondary-600: .native-darken(theme-secondary-color, 10)[];
464
+ --theme-secondary-500: .native-darken(theme-secondary-color, 5)[];
465
+ --theme-secondary-400: var(--theme-secondary-color);
466
+ --theme-secondary-350: .native-tint(theme-secondary-color, 20)[];
467
+ --theme-secondary-300: .native-tint(theme-secondary-color, 35)[];
468
+ --theme-secondary-200: .native-tint(theme-secondary-color, 48)[];
469
+ --theme-secondary-150: .native-tint(theme-secondary-color, 65)[];
470
+ --theme-secondary-100: .native-tint(theme-secondary-color, 78)[];
471
+ --theme-secondary-075: .native-tint(theme-secondary-color, 85)[];
472
+ --theme-secondary-050: .native-tint(theme-secondary-color, 92)[];
473
+ --theme-secondary-025: .native-tint(theme-secondary-color, 96)[];
474
+
475
+ // Fades
476
+ --focus-ring: .native-fade(theme-secondary-color, 15)[];
477
+ }
478
+
479
+ // -- Dark mode
480
+ .dark-colors() {
481
+ --white: hsl(@black-h, 0%, 17.5%);
482
+ --black: @white;
483
+
484
+ // Black
485
+ --black-025: hsl(@black-h, 0%, 22.5%);
486
+ --black-050: hsl(@black-h, 0%, 24%);
487
+ --black-075: hsl(@black-h, 4%, 26%);
488
+ --black-100: hsl(@black-h, 4.5%, 30.5%);
489
+ --black-150: hsl(@black-h, 5%, 35%);
490
+ --black-200: hsl(@black-h, 5.5%, 43.5%);
491
+ --black-300: hsl(@black-h, 6.5%, 52%);
492
+ --black-350: hsl(@black-h, 7%, 61%);
493
+ --black-400: hsl(@black-h, 8%, 65%);
494
+ --black-500: hsl(@black-h, 8%, 70%);
495
+ --black-600: hsl(@black-h, 7%, 78.5%);
496
+ --black-700: hsl(@black-h, 8%, 82.5%);
497
+ --black-750: hsl(@black-h, 9%, 86.5%);
498
+ --black-800: hsl(@black-h, 9%, 91.5%);
499
+ --black-900: hsl(@black-h, 4%, 95%);
500
+
501
+ // Orange
502
+ --orange-050: hsl(@orange-h, 16.5%, 23.9%);
503
+ --orange-100: hsl(@orange-h, 30%, 28.4%);
504
+ --orange-200: hsl(@orange-h, 50%, 36.9%);
505
+ --orange-300: hsl(@orange-h, 70%, 47.3%);
506
+ --orange-400: hsl(@orange-h, 90.5%, 54.9%);
507
+ --orange-500: hsl(@orange-h, 100%, 59%);
508
+ --orange-600: hsl(@orange-h, 100%, 68.4%);
509
+ --orange-700: hsl(@orange-h, 89.5%, 74.1%);
510
+ --orange-800: hsl(@orange-h, 92%, 85.7%);
511
+ --orange-900: hsl(@orange-h, 95%, 91.8%);
512
+
513
+ // Blue
514
+ --blue-050: hsl(@blue-h, 40%, 23%);
515
+ --blue-100: hsl(@blue-h, 44%, 26%);
516
+ --blue-200: hsl(@blue-h, 46%, 30%);
517
+ --blue-300: hsl(@blue-h, 53%, 35%);
518
+ --blue-400: hsl(@blue-h + 3, 56%, 43%);
519
+ --blue-500: hsl(@blue-h, 64%, 51%);
520
+ --blue-600: hsl(@blue-h, 100%, 60%);
521
+ --blue-700: hsl(@blue-h, 90%, 74%);
522
+ --blue-800: hsl(@blue-h, 95%, 86%);
523
+ --blue-900: hsl(@blue-h, 91%, 91.5%);
524
+
525
+ // Powder
526
+ --powder-050: hsl(@powder-h, 5%, 27%);
527
+ --powder-100: hsl(@powder-h, 14%, 28%);
528
+ --powder-200: hsl(@powder-h, 17.5%, 32%);
529
+ --powder-300: hsl(@powder-h, 19.5%, 37%);
530
+ --powder-400: hsl(@powder-h, 22.5%, 44%);
531
+ --powder-500: hsl(@powder-h, 29%, 54%);
532
+ --powder-600: hsl(@powder-h, 50%, 65.5%);
533
+ --powder-700: hsl(@powder-h, 46.5%, 73.5%);
534
+ --powder-800: hsl(@powder-h, 49.5%, 87%);
535
+ --powder-900: hsl(@powder-h, 100%, 95%);
536
+
537
+ // Green
538
+ --green-025: hsl(@green-h, 18%, 22%);
539
+ --green-050: hsl(@green-h, 18%, 25%);
540
+ --green-100: hsl(@green-h, 22.5%, 31%);
541
+ --green-200: hsl(@green-h, 23.5%, 37%);
542
+ --green-300: hsl(@green-h, 25%, 40.5%);
543
+ --green-400: hsl(@green-h, 27.5%, 48.5%);
544
+ --green-500: hsl(@green-h, 35%, 54.5%);
545
+ --green-600: hsl(@green-h, 40%, 61.5%);
546
+ --green-700: hsl(@green-h, 39.5%, 69.5%);
547
+ --green-800: hsl(@green-h, 39.5%, 78.5%);
548
+ --green-900: hsl(@green-h, 38%, 86.5%);
549
+
550
+ // Yellow
551
+ --yellow-050: hsl(@yellow-h, 13%, 24.5%);
552
+ --yellow-100: hsl(@yellow-h, 19%, 27%);
553
+ --yellow-200: hsl(@yellow-h, 30.5%, 31%);
554
+ --yellow-300: hsl(@yellow-h, 37%, 36%);
555
+ --yellow-400: hsl(@yellow-h, 45.5%, 42.5%);
556
+ --yellow-500: hsl(@yellow-h, 55.5%, 48%);
557
+ --yellow-600: hsl(@yellow-h, 67.5%, 55.5%);
558
+ --yellow-700: hsl(@yellow-h, 84.5%, 64%);
559
+ --yellow-800: hsl(@yellow-h, 90%, 72.5%);
560
+ --yellow-900: hsl(@yellow-h, 93%, 83.5%);
561
+
562
+ // Red
563
+ --red-050: hsl(@red-h + 3, 30%, 26.5%);
564
+ --red-100: hsl(@red-h + 3, 35%, 33%);
565
+ --red-200: hsl(@red-h + 3, 37%, 38.5%);
566
+ --red-300: hsl(@red-h + 3, 39%, 43.5%);
567
+ --red-400: hsl(@red-h + 3, 42%, 49%);
568
+ --red-500: hsl(@red-h + 3, 50%, 54%);
569
+ --red-600: hsl(@red-h + 3, 56.5%, 59.5%);
570
+ --red-700: hsl(@red-h + 3, 62.5%, 65.5%);
571
+ --red-800: hsl(@red-h + 3, 64%, 74%);
572
+ --red-900: hsl(@red-h + 3, 65.5%, 85.5%);
573
+
574
+ // Gold
575
+ --gold: @gold;
576
+ --gold-lighter: hsl(@gold-h, 22%, 30%);
577
+ --gold-darker: @gold-darker;
578
+
579
+ // Silver
580
+ --silver: @silver;
581
+ --silver-lighter: hsl(@silver-h, 0%, 26%);
582
+ --silver-darker: @silver-darker;
583
+
584
+ // Bronze
585
+ --bronze: @bronze;
586
+ --bronze-lighter: hsl(@bronze-h, 13%, 27%);
587
+ --bronze-darker: @bronze-darker;
588
+
589
+ // Border colors
590
+ --bc-lightest: var(--black-025);
591
+ --bc-lighter: var(--black-050);
592
+ --bc-light: var(--black-075);
593
+ --bc-medium: var(--black-100);
594
+ --bc-dark: var(--black-150);
595
+ --bc-darker: var(--black-200);
596
+
597
+ // Font colors
598
+ --fc-dark: var(--black-900);
599
+ --fc-medium: var(--black-700);
600
+ --fc-light: var(--black-500);
601
+
602
+ // Focus rings
603
+ --focus-ring-success: hsla(@green-h, 40%, 75%, 40%);
604
+ --focus-ring-warning: hsla(@yellow-h, 79%, 58%, 40%);
605
+ --focus-ring-error: hsla(@red-h, 62%, 52%, 30%);
606
+ --focus-ring-muted: hsla(@black-h, @black-s, 100%, 10%);
607
+
608
+ // Shadows
609
+ --bs-sm: 0 1px 2px hsla(0, 0%, 0%, 0.1), 0 1px 4px hsla(0, 0%, 0%, 0.1), 0 2px 8px hsla(0, 0%, 0%, 0.1);
610
+ --bs-md: 0 1px 3px hsla(0, 0%, 0%, 0.11), 0 2px 6px hsla(0, 0%, 0%, 0.11), 0 3px 8px hsla(0, 0%, 0%, 0.14);
611
+ --bs-lg: 0 1px 4px hsla(0, 0%, 0%, 0.14), 0 3px 8px hsla(0, 0%, 0%, 0.14), 0 4px 13px hsla(0, 0%, 0%, 0.18);
612
+ --bs-xl: 0 10px 24px hsla(0, 0%, 0%, 0.1), 0 20px 48px hsla(0, 0%, 0%, 0.1), 0 1px 4px hsla(0, 0%, 0%, 0.15);
613
+
614
+ // Scrollbars
615
+ --scrollbar: hsla(0, 0%, 100%, 0.2);
616
+
617
+ // Syntax highlighting
618
+ --highlight-bg: hsl(0, 2%, 11%);
619
+ --highlight-color: var(--black); // AAA 17.19
620
+ --highlight-comment: hsl(0, 0%, 60%); // AA 6.03
621
+ --highlight-punctuation: hsl(0, 0%, 80%); // AAA 10.70
622
+ --highlight-namespace: hsl(@orange-h, 85%, 61.5%); // Custom orange AAA 7.05
623
+ --highlight-attribute: hsl(@powder-h + 2, 41.5%, 67%); // Custom powder blue AAA 7.63
624
+ --highlight-literal: hsl(@orange-h, 85%, 61.5%); // Custom orange AAA 7.05
625
+ --highlight-symbol: hsl(306, 43%, 69%); // Custom purple AAA 7.23
626
+ --highlight-keyword: hsl(@powder-h + 3, 41.5%, 67%); // Custom powder blue AAA 7.63
627
+ --highlight-variable: hsl(65.5, 39%, 57.5%);
628
+ --highlight-addition: var(--green-600); // AAA 8.21
629
+ --highlight-deletion: var(--red-700); // AA 5.51
630
+ }
631
+
632
+ .dark-themed-colors() {
633
+ // Reassemble as a single hsl value
634
+ --theme-primary-color: .assemble-color(theme-primary-color)[];
635
+
636
+ // Reassemble as a single hsl value
637
+ --theme-secondary-color: .assemble-color(theme-secondary-color)[];
638
+
639
+ // Primary Theming
640
+ --theme-primary-025: .native-darken-desaturate(theme-primary-color, 17, 82)[];
641
+ --theme-primary-050: .native-darken-desaturate(theme-primary-color, 15, 47)[];
642
+ --theme-primary-075: .native-darken-desaturate(theme-primary-color, 13, 39)[];
643
+ --theme-primary-100: .native-darken-desaturate(theme-primary-color, 11, 32)[];
644
+ --theme-primary-150: .native-darken-desaturate(theme-primary-color, 9, 23)[];
645
+ --theme-primary-200: .native-darken-desaturate(theme-primary-color, 7, 15)[];
646
+ --theme-primary-300: .native-darken-desaturate(theme-primary-color, 5, 7)[];
647
+ --theme-primary-350: var(--theme-primary-color);
648
+ --theme-primary-400: .native-tint(theme-primary-color, 21)[];
649
+ --theme-primary-500: .native-tint(theme-primary-color, 36)[];
650
+ --theme-primary-600: .native-tint(theme-primary-color, 51)[];
651
+ --theme-primary-700: .native-tint(theme-primary-color, 66)[];
652
+ --theme-primary-800: .native-tint(theme-primary-color, 81)[];
653
+ --theme-primary-900: .native-tint(theme-primary-color, 96)[];
654
+
655
+ // Secondary Theming
656
+ --theme-secondary-025: .native-darken-desaturate(theme-secondary-color, 17, 82)[];
657
+ --theme-secondary-050: .native-darken-desaturate(theme-secondary-color, 15, 47)[];
658
+ --theme-secondary-075: .native-darken-desaturate(theme-secondary-color, 13, 39)[];
659
+ --theme-secondary-100: .native-darken-desaturate(theme-secondary-color, 11, 32)[];
660
+ --theme-secondary-150: .native-darken-desaturate(theme-secondary-color, 9, 23)[];
661
+ --theme-secondary-200: .native-darken-desaturate(theme-secondary-color, 7, 15)[];
662
+ --theme-secondary-300: .native-darken-desaturate(theme-secondary-color, 5, 7)[];
663
+ --theme-secondary-350: var(--theme-secondary-color);
664
+ --theme-secondary-400: .native-tint(theme-secondary-color, 21)[];
665
+ --theme-secondary-500: .native-tint(theme-secondary-color, 36)[];
666
+ --theme-secondary-600: .native-tint(theme-secondary-color, 51)[];
667
+ --theme-secondary-700: .native-tint(theme-secondary-color, 66)[];
668
+ --theme-secondary-800: .native-tint(theme-secondary-color, 81)[];
669
+ --theme-secondary-900: .native-tint(theme-secondary-color, 96)[];
670
+
671
+ // Fades
672
+ --focus-ring: .native-fade(theme-secondary-color, 25)[];
673
+ }
674
+
675
+ // rules shared between .theme-dark and .theme-system w/ prefers-color-scheme: dark
676
+ .theme-dark-rules() {
677
+ .dark-colors();
678
+
679
+ &,
680
+ & .themed {
681
+ color: var(--theme-body-font-color);
682
+ .generate-themed-variables(theme-dark);
683
+ // add in the themed "native mixins", making sure to scope to the child .themed elements so they don't use the parent's values
684
+ .dark-themed-colors();
685
+ &:extend(.component-colors);
686
+ }
687
+ }
688
+
689
+ // -- High contrast modes
690
+ .light-highcontrast() {
691
+ --white: hsl(0, 0%, 100%);
692
+ --black: hsl(0, 0%, 0%);
693
+
694
+ // Black
695
+ --black-025: hsl(@black-h, @black-s, 97.5%);
696
+ --black-050: hsl(@black-h, @black-s, 95%);
697
+ --black-075: hsl(@black-h, @black-s, 92.5%);
698
+ --black-100: hsl(@black-h, @black-s, 90%);
699
+ --black-150: hsl(@black-h, @black-s, 87.5%);
700
+ --black-200: hsl(@black-h, @black-s, 85%);
701
+ --black-300: hsl(@black-h, @black-s, 35%);
702
+ --black-350: hsl(@black-h, @black-s, 32.5%);
703
+ --black-400: hsl(@black-h, @black-s, 30%);
704
+ --black-500: hsl(@black-h, @black-s, 25%);
705
+ --black-600: hsl(@black-h, @black-s, 20%);
706
+ --black-700: hsl(@black-h, @black-s, 15%);
707
+ --black-750: hsl(@black-h, @black-s, 10%);
708
+ --black-800: hsl(@black-h, @black-s, 5%);
709
+ --black-900: hsl(@black-h, @black-s, 0%);
710
+
711
+ // Orange
712
+ --orange-050: hsl(@orange-h, 100%, 97.5%);
713
+ --orange-100: hsl(@orange-h, 100%, 94%);
714
+ --orange-200: hsl(@orange-h, 100%, 88%);
715
+ --orange-300: hsl(@orange-h, 100%, 82%);
716
+ --orange-400: hsl(@orange-h, 100%, 34%);
717
+ --orange-500: hsl(@orange-h, 100%, 29%);
718
+ --orange-600: hsl(@orange-h, 100%, 24%);
719
+ --orange-700: hsl(@orange-h, 100%, 19%);
720
+ --orange-800: hsl(@orange-h, 100%, 13%);
721
+ --orange-900: hsl(@orange-h, 100%, 8%);
722
+
723
+ // Blue
724
+ --blue-050: hsl(@blue-h, 100%, 97.5%);
725
+ --blue-100: hsl(@blue-h, 100%, 95%);
726
+ --blue-200: hsl(@blue-h, 100%, 90%);
727
+ --blue-300: hsl(@blue-h, 100%, 85%);
728
+ --blue-400: hsl(@blue-h, 100%, 25%);
729
+ --blue-500: hsl(@blue-h, 100%, 20%);
730
+ --blue-600: hsl(@blue-h, 100%, 15%);
731
+ --blue-700: hsl(@blue-h, 100%, 10%);
732
+ --blue-800: hsl(@blue-h, 100%, 7.5%);
733
+ --blue-900: hsl(@blue-h, 100%, 5%);
734
+
735
+ // Powder
736
+ --powder-050: hsl(@powder-h, 100%, 97.5%);
737
+ --powder-100: hsl(@powder-h, 85%, 96%);
738
+ --powder-200: hsl(@powder-h, 75%, 92%);
739
+ --powder-300: hsl(@powder-h, 70%, 88%);
740
+ --powder-400: hsl(@powder-h, 55%, 28%);
741
+ --powder-500: hsl(@powder-h, 60%, 24%);
742
+ --powder-600: hsl(@powder-h, 70%, 20%);
743
+ --powder-700: hsl(@powder-h, 75%, 16%);
744
+ --powder-800: hsl(@powder-h, 75%, 12%);
745
+ --powder-900: hsl(@powder-h, 75%, 8%);
746
+
747
+ // Green
748
+ --green-025: hsl(@green-h, 100%, 97%);
749
+ --green-050: hsl(@green-h, 100%, 96%);
750
+ --green-100: hsl(@green-h, 100%, 94%);
751
+ --green-200: hsl(@green-h, 100%, 88%);
752
+ --green-300: hsl(@green-h, 100%, 82%);
753
+ --green-400: hsl(@green-h, 100%, 18%);
754
+ --green-500: hsl(@green-h, 100%, 15%);
755
+ --green-600: hsl(@green-h, 100%, 12%);
756
+ --green-700: hsl(@green-h, 100%, 9%);
757
+ --green-800: hsl(@green-h, 100%, 6%);
758
+ --green-900: hsl(@green-h, 100%, 3%);
759
+
760
+ // Yellow
761
+ --yellow-050: hsl(@yellow-h, 100%, 95%);
762
+ --yellow-100: hsl(@yellow-h, 100%, 92%);
763
+ --yellow-200: hsl(@yellow-h, 95%, 85%);
764
+ --yellow-300: hsl(@yellow-h, 95%, 78%);
765
+ --yellow-400: hsl(@yellow-h, 100%, 28%);
766
+ --yellow-500: hsl(@yellow-h, 100%, 26%);
767
+ --yellow-600: hsl(@yellow-h, 100%, 23%);
768
+ --yellow-700: hsl(@yellow-h, 100%, 19%);
769
+ --yellow-800: hsl(@yellow-h, 100%, 13%);
770
+ --yellow-900: hsl(@yellow-h, 100%, 7%);
771
+
772
+ // Red
773
+ --red-050: hsl(@red-h, 100%, 97.5%);
774
+ --red-100: hsl(@red-h, 100%, 95%);
775
+ --red-200: hsl(@red-h, 100%, 90%);
776
+ --red-300: hsl(@red-h, 100%, 85%);
777
+ --red-400: hsl(@red-h, 100%, 35%);
778
+ --red-500: hsl(@red-h, 100%, 29%);
779
+ --red-600: hsl(@red-h, 100%, 23%);
780
+ --red-700: hsl(@red-h, 100%, 17%);
781
+ --red-800: hsl(@red-h, 100%, 11%);
782
+ --red-900: hsl(@red-h, 100%, 7%);
783
+
784
+ // Gold
785
+ --gold: hsl(@gold-h, 100%, 50%);
786
+ --gold-lighter: hsl(@gold-h, 100%, 91%);
787
+ --gold-darker: hsl(@gold-h - 3, 100%, 20%);
788
+
789
+ // Silver
790
+ --silver: hsl(@silver-h, 6%, 72%);
791
+ --silver-lighter: hsl(@silver-h, 6%, 91%);
792
+ --silver-darker: hsl(@silver-h, 6%, 30%);
793
+
794
+ // Bronze
795
+ --bronze: hsl(@bronze-h, 38%, 65%);
796
+ --bronze-lighter: hsl(@bronze-h, 40%, 92%);
797
+ --bronze-darker: hsl(@bronze-h, 31%, 25%);
798
+
799
+ // Border colors
800
+ --bc-lightest: var(--black-400);
801
+ --bc-lighter: var(--black-400);
802
+ --bc-light: var(--black-400);
803
+ --bc-medium: var(--black-400);
804
+ --bc-dark: var(--black-700);
805
+ --bc-darker: var(--black-900);
806
+
807
+ // Font colors
808
+ --fc-dark: var(--black-900);
809
+ --fc-medium: var(--black-700);
810
+ --fc-light: var(--black-500);
811
+
812
+ // Focus rings
813
+ --focus-ring: fade(@blue-600, 90%);
814
+ --focus-ring-success: fade(@green-600, 90%);
815
+ --focus-ring-warning: fade(@yellow-600, 90%);
816
+ --focus-ring-error: fade(@red-600, 90%);
817
+ --focus-ring-muted: fade(@black-400, 95%);
818
+
819
+ // Shadows
820
+ --bs-sm: none;
821
+ --bs-md: none;
822
+ --bs-lg: none;
823
+ --bs-xl: none;
824
+
825
+ // Scrollbars
826
+ --scrollbar: var(--black);
827
+
828
+ // Syntax highlighting
829
+ --highlight-bg: hsl(0, 0%, 96.5%); // Between black-025 and black-050
830
+ --highlight-color: var(--black-750);
831
+ --highlight-comment: hsl(213, 7%, 33%); // Custom black
832
+ --highlight-punctuation: var(--black-600);
833
+ --highlight-namespace: hsl(16, 94%, 31%); // Custom orange
834
+ --highlight-attribute: hsl(215, 100%, 35%); // Custom blue
835
+ --highlight-literal: hsl(16, 94%, 31%); // Custom orange
836
+ --highlight-symbol: hsl(309, 45%, 31%); // Custom purple
837
+ --highlight-keyword: hsl(215, 100%, 35%); // Custom blue
838
+ --highlight-variable: hsl(88, 100%, 19%); // Custom green
839
+ --highlight-addition: var(--green-500);
840
+ --highlight-deletion: var(--red-500);
841
+
842
+ // High contrast theme override
843
+ &:extend(.highcontrast-themed-colors);
844
+ }
845
+
846
+ .dark-highcontrast() {
847
+ --white: hsl(0, 0%, 0%);
848
+ --black: hsl(0, 0%, 100%);
849
+
850
+ // Black
851
+ --black-025: hsl(@black-h, @black-s, 2.5%);
852
+ --black-050: hsl(@black-h, @black-s, 5%);
853
+ --black-075: hsl(@black-h, @black-s, 7.5%);
854
+ --black-100: hsl(@black-h, @black-s, 10%);
855
+ --black-150: hsl(@black-h, @black-s, 12.5%);
856
+ --black-200: hsl(@black-h, @black-s, 15%);
857
+ --black-300: hsl(@black-h, @black-s, 65%);
858
+ --black-350: hsl(@black-h, @black-s, 67.5%);
859
+ --black-400: hsl(@black-h, @black-s, 70%);
860
+ --black-500: hsl(@black-h, @black-s, 75%);
861
+ --black-600: hsl(@black-h, @black-s, 80%);
862
+ --black-700: hsl(@black-h, @black-s, 85%);
863
+ --black-750: hsl(@black-h, @black-s, 90%);
864
+ --black-800: hsl(@black-h, @black-s, 95%);
865
+ --black-900: hsl(@black-h, @black-s, 100%);
866
+
867
+ // Orange
868
+ --orange-050: hsl(@orange-h, 100%, 4%);
869
+ --orange-100: hsl(@orange-h, 100%, 8%);
870
+ --orange-200: hsl(@orange-h, 100%, 16%);
871
+ --orange-300: hsl(@orange-h, 100%, 24%);
872
+ --orange-400: hsl(@orange-h, 100%, 64%);
873
+ --orange-500: hsl(@orange-h, 100%, 71%);
874
+ --orange-600: hsl(@orange-h, 100%, 77%);
875
+ --orange-700: hsl(@orange-h, 100%, 82%);
876
+ --orange-800: hsl(@orange-h, 100%, 87%);
877
+ --orange-900: hsl(@orange-h, 100%, 91%);
878
+
879
+ // Blue
880
+ --blue-050: hsl(@blue-h, 100%, 4%);
881
+ --blue-100: hsl(@blue-h, 100%, 11%);
882
+ --blue-200: hsl(@blue-h, 100%, 18%);
883
+ --blue-300: hsl(@blue-h, 100%, 25%);
884
+ --blue-400: hsl(@blue-h, 100%, 75%);
885
+ --blue-500: hsl(@blue-h, 100%, 80%);
886
+ --blue-600: hsl(@blue-h, 100%, 85%);
887
+ --blue-700: hsl(@blue-h, 100%, 90%);
888
+ --blue-800: hsl(@blue-h, 100%, 92.5%);
889
+ --blue-900: hsl(@blue-h, 100%, 95%);
890
+
891
+ // Powder
892
+ --powder-050: hsl(@powder-h, 100%, 6%);
893
+ --powder-100: hsl(@powder-h, 90%, 8%);
894
+ --powder-200: hsl(@powder-h, 80%, 14%);
895
+ --powder-300: hsl(@powder-h, 60%, 20%);
896
+ --powder-400: hsl(@powder-h, 55%, 72%);
897
+ --powder-500: hsl(@powder-h, 60%, 76%);
898
+ --powder-600: hsl(@powder-h, 70%, 80%);
899
+ --powder-700: hsl(@powder-h, 75%, 84%);
900
+ --powder-800: hsl(@powder-h, 75%, 88%);
901
+ --powder-900: hsl(@powder-h, 75%, 92%);
902
+
903
+ // Green
904
+ --green-025: hsl(@green-h, 100%, 3%);
905
+ --green-050: hsl(@green-h, 100%, 4%);
906
+ --green-100: hsl(@green-h, 100%, 6%);
907
+ --green-200: hsl(@green-h, 100%, 12%);
908
+ --green-300: hsl(@green-h, 100%, 18%);
909
+ --green-400: hsl(@green-h, 100%, 65%);
910
+ --green-500: hsl(@green-h, 100%, 71%);
911
+ --green-600: hsl(@green-h, 100%, 77%);
912
+ --green-700: hsl(@green-h, 100%, 83%);
913
+ --green-800: hsl(@green-h, 100%, 89%);
914
+ --green-900: hsl(@green-h, 100%, 94%);
915
+
916
+ // Yellow
917
+ --yellow-050: hsl(@yellow-h, 100%, 4%);
918
+ --yellow-100: hsl(@yellow-h, 100%, 8%);
919
+ --yellow-200: hsl(@yellow-h, 95%, 16%);
920
+ --yellow-300: hsl(@yellow-h, 95%, 24%);
921
+ --yellow-400: hsl(@yellow-h, 100%, 55%);
922
+ --yellow-500: hsl(@yellow-h, 100%, 63%);
923
+ --yellow-600: hsl(@yellow-h, 100%, 71%);
924
+ --yellow-700: hsl(@yellow-h, 100%, 79%);
925
+ --yellow-800: hsl(@yellow-h, 100%, 87%);
926
+ --yellow-900: hsl(@yellow-h, 100%, 95%);
927
+
928
+ // Red
929
+ --red-050: hsl(@red-h, 100%, 4%);
930
+ --red-100: hsl(@red-h, 100%, 8%);
931
+ --red-200: hsl(@red-h, 100%, 16%);
932
+ --red-300: hsl(@red-h, 100%, 24%);
933
+ --red-400: hsl(@red-h, 100%, 70%);
934
+ --red-500: hsl(@red-h, 100%, 75%);
935
+ --red-600: hsl(@red-h, 100%, 80%);
936
+ --red-700: hsl(@red-h, 100%, 85%);
937
+ --red-800: hsl(@red-h, 100%, 90%);
938
+ --red-900: hsl(@red-h, 100%, 95%);
939
+
940
+ // Gold
941
+ --gold: hsl(@gold-h, 100%, 50%);
942
+ --gold-lighter: hsl(@gold-h - 3, 100%, 9%);
943
+ --gold-darker: hsl(@gold-h - 3, 100%, 80%);
944
+
945
+ // Silver
946
+ --silver: hsl(@silver-h, 6%, 72%);
947
+ --silver-lighter: hsl(@silver-h, 5%, 9%);
948
+ --silver-darker: hsl(@silver-h, 5%, 70%);
949
+
950
+ // Bronze
951
+ --bronze: hsl(@bronze-h, 38%, 65%);
952
+ --bronze-lighter: hsl(@bronze-h, 40%, 8%);
953
+ --bronze-darker: hsl(@bronze-h, 46.7%, 75%);
954
+
955
+ // Border colors
956
+ --bc-lightest: var(--black-400);
957
+ --bc-lighter: var(--black-400);
958
+ --bc-light: var(--black-400);
959
+ --bc-medium: var(--black-400);
960
+ --bc-dark: var(--black-700);
961
+ --bc-darker: var(--black-900);
962
+
963
+ // Focus rings
964
+ --focus-ring: fade(@blue-600, 90%);
965
+ --focus-ring-success: fade(@green-600, 90%);
966
+ --focus-ring-warning: fade(@yellow-600, 90%);
967
+ --focus-ring-error: fade(@red-600, 90%);
968
+ --focus-ring-muted: fade(@black-400, 95%);
969
+
970
+ // Font colors
971
+ --fc-dark: var(--black-900);
972
+ --fc-medium: var(--black-700);
973
+ --fc-light: var(--black-500);
974
+
975
+ // Shadows
976
+ --bs-sm: none;
977
+ --bs-md: none;
978
+ --bs-lg: none;
979
+ --bs-xl: none;
980
+
981
+ // Scrollbars
982
+ --scrollbar: var(--black);
983
+
984
+ // Syntax highlighting
985
+ --highlight-bg: hsl(0, 0%, 10%);
986
+ --highlight-color: hsl(0, 0%, 100%);
987
+ --highlight-comment: hsl(0, 0%, 99%); // Custom gray
988
+ --highlight-punctuation: hsl(0, 0%, 99%); // Custom gray
989
+ --highlight-namespace: hsl(36, 96%, 71%); // Custom orange
990
+ --highlight-attribute: hsl(200, 57%, 85%); // Custom blue
991
+ --highlight-literal: hsl(36, 96%, 71%); // Custom orange
992
+ --highlight-symbol: hsl(304, 39%, 85%); // Custom purple
993
+ --highlight-keyword: hsl(200, 57%, 85%); // Custom blue
994
+ --highlight-variable: hsl(62, 71%, 81%); // Custom green
995
+ --highlight-addition: var(--green-600);
996
+ --highlight-deletion: var(--red-700);
997
+
998
+ // High contrast theme override
999
+ &:extend(.highcontrast-themed-colors);
1000
+ }
1001
+
1002
+ .highcontrast-themed-colors {
1003
+ // Primary Theming
1004
+ --theme-primary-color: var(--orange-400);
1005
+ --theme-primary-025: var(--orange-050);
1006
+ --theme-primary-050: var(--orange-050);
1007
+ --theme-primary-075: var(--orange-050);
1008
+ --theme-primary-100: var(--orange-100);
1009
+ --theme-primary-150: var(--orange-100);
1010
+ --theme-primary-200: var(--orange-200);
1011
+ --theme-primary-300: var(--orange-300);
1012
+ --theme-primary-350: var(--orange-300);
1013
+ --theme-primary-400: var(--orange-400);
1014
+ --theme-primary-500: var(--orange-500);
1015
+ --theme-primary-600: var(--orange-600);
1016
+ --theme-primary-700: var(--orange-700);
1017
+ --theme-primary-800: var(--orange-800);
1018
+ --theme-primary-900: var(--orange-900);
1019
+
1020
+ // Secondary Theming
1021
+ --theme-secondary-color: var(--blue-400);
1022
+ --theme-secondary-025: var(--blue-050);
1023
+ --theme-secondary-050: var(--blue-050);
1024
+ --theme-secondary-075: var(--blue-050);
1025
+ --theme-secondary-100: var(--blue-100);
1026
+ --theme-secondary-150: var(--blue-100);
1027
+ --theme-secondary-200: var(--blue-200);
1028
+ --theme-secondary-300: var(--blue-300);
1029
+ --theme-secondary-350: var(--blue-300);
1030
+ --theme-secondary-400: var(--blue-400);
1031
+ --theme-secondary-500: var(--blue-500);
1032
+ --theme-secondary-600: var(--blue-600);
1033
+ --theme-secondary-700: var(--blue-700);
1034
+ --theme-secondary-800: var(--blue-800);
1035
+ --theme-secondary-900: var(--blue-900);
1036
+ }
1037
+
1038
+ :root {
1039
+ // specify the default colors in less, then deconstruct them
1040
+ // this keeps the hsl/rgb variables below in sync, but consumers will need to set each variable separately
1041
+ @defaultPrimaryColor: @orange;
1042
+ @defaultSecondaryColor: @blue;
1043
+ .generate-calculated-themed-variables(@defaultPrimaryColor, primary);
1044
+ .generate-calculated-themed-variables(@defaultSecondaryColor, secondary);
1045
+ }
1046
+
1047
+ // place component-colors on the body directly (instead of :root) so consumers can use the --theme-* variables
1048
+
1049
+ // Light mode
1050
+ body:not(.theme-dark),
1051
+ body.theme-dark .theme-light__forced,
1052
+ body.theme-system .theme-light__forced {
1053
+ .light-colors();
1054
+
1055
+ &,
1056
+ & .themed {
1057
+ color: var(--theme-body-font-color);
1058
+ .generate-themed-variables(theme-light);
1059
+ // add in the themed "native mixins", making sure to scope to the child .themed elements so they don't use the parent's values
1060
+ .light-themed-colors();
1061
+ &:extend(.component-colors);
1062
+ }
1063
+ }
1064
+
1065
+ // Dark mode
1066
+ body.theme-dark,
1067
+ body:not(.theme-dark) .theme-dark__forced {
1068
+ .theme-dark-rules();
1069
+ }
1070
+ body.theme-system {
1071
+ @media (prefers-color-scheme: dark) {
1072
+ .theme-dark-rules();
1073
+ }
1074
+ }
1075
+
1076
+ // High contrast mode (Light)
1077
+ body.theme-highcontrast:not(.theme-dark),
1078
+ body.theme-dark.theme-highcontrast .theme-light__forced,
1079
+ body.theme-system.theme-highcontrast .theme-light__forced {
1080
+ .light-highcontrast();
1081
+ }
1082
+
1083
+ // High contrast mode (Dark)
1084
+ body.theme-dark.theme-highcontrast,
1085
+ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
1086
+ .dark-highcontrast();
1087
+ }
1088
+ body.theme-system.theme-highcontrast {
1089
+ @media (prefers-color-scheme: dark) {
1090
+ .dark-highcontrast();
1091
+ }
1092
+ }