@stackoverflow/stacks 1.0.1 → 1.3.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.
- package/dist/controllers/s-popover.d.ts +11 -2
- package/dist/css/stacks.css +282 -188
- package/dist/css/stacks.min.css +1 -1
- package/dist/js/stacks.js +39 -9
- package/dist/js/stacks.min.js +1 -1
- package/lib/css/atomic/spacing.less +10 -0
- package/lib/css/atomic/width-height.less +1 -1
- package/lib/css/components/activity-indicator.less +2 -3
- package/lib/css/components/avatars.less +1 -0
- package/lib/css/components/badges.less +47 -0
- package/lib/css/components/buttons.less +30 -6
- package/lib/css/components/inputs.less +10 -12
- package/lib/css/components/post-summary.less +32 -97
- package/lib/css/components/topbar.less +4 -1
- package/lib/css/exports/constants-colors.less +49 -49
- package/lib/ts/controllers/s-popover.ts +25 -5
- package/lib/ts/controllers/s-uploader.ts +26 -12
- package/package.json +26 -27
|
@@ -162,11 +162,21 @@ body {
|
|
|
162
162
|
1 2 4 6 8 12 16 24 32 48 64 96 128
|
|
163
163
|
);
|
|
164
164
|
|
|
165
|
+
#stacks-internals #build-classes(
|
|
166
|
+
'.mxn', { .template(@value) { margin-left: calc(var(~"--su@{value}") * -1) !important; margin-right: calc(var(~"--su@{value}") * -1) !important; } },
|
|
167
|
+
1 2 4 6 8 12 16 24 32 48 64 96 128
|
|
168
|
+
);
|
|
169
|
+
|
|
165
170
|
#stacks-internals #build-classes(
|
|
166
171
|
'.my', { .template(@value) { margin-top: var(~"--su@{value}") !important; margin-bottom: var(~"--su@{value}") !important; } },
|
|
167
172
|
1 2 4 6 8 12 16 24 32 48 64 96 128
|
|
168
173
|
);
|
|
169
174
|
|
|
175
|
+
#stacks-internals #build-classes(
|
|
176
|
+
'.myn', { .template(@value) { margin-top: calc(var(~"--su@{value}") * -1) !important; margin-bottom: calc(var(~"--su@{value}") * -1) !important; } },
|
|
177
|
+
1 2 4 6 8 12 16 24 32 48 64 96 128
|
|
178
|
+
);
|
|
179
|
+
|
|
170
180
|
// ============================================================================
|
|
171
181
|
// $ PADDING
|
|
172
182
|
// ----------------------------------------------------------------------------
|
|
@@ -191,4 +191,4 @@
|
|
|
191
191
|
.hmn12 { min-height: var(--s-full) !important; }
|
|
192
192
|
#stacks-internals #responsify('.hmn100', { min-height: 100% !important; });
|
|
193
193
|
#stacks-internals #responsify('.hmn-initial', { min-height: initial !important; });
|
|
194
|
-
#stacks-internals #responsify('.
|
|
194
|
+
#stacks-internals #responsify('.hmn-screen', { min-height: 100vh !important; });
|
|
@@ -14,9 +14,8 @@
|
|
|
14
14
|
.s-activity-indicator {
|
|
15
15
|
display: inline-block;
|
|
16
16
|
min-width: var(--su-static12);
|
|
17
|
-
height: var(--su-static12);
|
|
18
|
-
padding
|
|
19
|
-
padding-right: var(--su4);
|
|
17
|
+
min-height: var(--su-static12);
|
|
18
|
+
padding: var(--su2) var(--su4);
|
|
20
19
|
line-height: 1.1; // Custom line-height to satisfy 1x screens
|
|
21
20
|
background-color: var(--theme-secondary-400);
|
|
22
21
|
box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
|
|
@@ -59,6 +59,13 @@
|
|
|
59
59
|
margin-left: calc((var(--su4) + var(--su1)) * -1);
|
|
60
60
|
}
|
|
61
61
|
|
|
62
|
+
// $ BADGE ICON
|
|
63
|
+
// When we have a badge icon
|
|
64
|
+
// ---------------------------------------------------------------------------
|
|
65
|
+
.s-badge__icon {
|
|
66
|
+
gap: 0.3em;
|
|
67
|
+
}
|
|
68
|
+
|
|
62
69
|
// $ BADGE SIZES
|
|
63
70
|
// ---------------------------------------------------------------------------
|
|
64
71
|
.s-badge__sm {
|
|
@@ -174,6 +181,46 @@
|
|
|
174
181
|
.highcontrast-mode({ border-color: currentColor; });
|
|
175
182
|
}
|
|
176
183
|
|
|
184
|
+
// $$ States
|
|
185
|
+
// ---------------------------------------------------------------------------
|
|
186
|
+
&.s-badge__danger {
|
|
187
|
+
color: var(--red-900);
|
|
188
|
+
background-color: var(--red-100);
|
|
189
|
+
border-color: var(--red-600);
|
|
190
|
+
|
|
191
|
+
&.s-badge__filled {
|
|
192
|
+
color: @white;
|
|
193
|
+
background-color: var(--red-500);
|
|
194
|
+
border-color: transparent;
|
|
195
|
+
|
|
196
|
+
.highcontrast-mode({ color: var(--white); });
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
&.s-badge__info {
|
|
201
|
+
color: var(--blue-900);
|
|
202
|
+
background-color: var(--blue-100);
|
|
203
|
+
border-color: var(--blue-600);
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
&.s-badge__warning {
|
|
207
|
+
color: var(--yellow-900);
|
|
208
|
+
background-color: var(--yellow-100);
|
|
209
|
+
border-color: var(--yellow-600);
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
&.s-badge__muted {
|
|
213
|
+
color: var(--black-900);
|
|
214
|
+
background-color: var(--black-100);
|
|
215
|
+
border-color: var(--black-600);
|
|
216
|
+
|
|
217
|
+
&.s-badge__filled {
|
|
218
|
+
color: var(--white);
|
|
219
|
+
background-color: var(--black-700);
|
|
220
|
+
border-color: transparent;
|
|
221
|
+
}
|
|
222
|
+
}
|
|
223
|
+
|
|
177
224
|
// $$ Award Count
|
|
178
225
|
// ---------------------------------------------------------------------------
|
|
179
226
|
.s-award-bling {
|
|
@@ -197,7 +197,11 @@
|
|
|
197
197
|
border-color: var(--theme-button-filled-border-color);
|
|
198
198
|
box-shadow: inset 0 1px 0 0 hsla(0, 0, 100%, 0.7);
|
|
199
199
|
|
|
200
|
-
.dark-mode({
|
|
200
|
+
.dark-mode({
|
|
201
|
+
&:not(:focus) {
|
|
202
|
+
box-shadow: none;
|
|
203
|
+
}
|
|
204
|
+
});
|
|
201
205
|
|
|
202
206
|
&:hover,
|
|
203
207
|
&:focus,
|
|
@@ -278,7 +282,11 @@
|
|
|
278
282
|
border-color: transparent;
|
|
279
283
|
box-shadow: inset 0 1px 0 0 hsla(0, 0%, 100%, 0.4);
|
|
280
284
|
|
|
281
|
-
.dark-mode({
|
|
285
|
+
.dark-mode({
|
|
286
|
+
&:not(:focus) {
|
|
287
|
+
box-shadow: none;
|
|
288
|
+
}
|
|
289
|
+
});
|
|
282
290
|
|
|
283
291
|
.highcontrast-mode({
|
|
284
292
|
background-color: var(--black-400);
|
|
@@ -380,7 +388,11 @@
|
|
|
380
388
|
border-color: transparent;
|
|
381
389
|
box-shadow: inset 0 1px 0 0 hsla(0, 0%, 100%, 0.4);
|
|
382
390
|
|
|
383
|
-
.dark-mode({
|
|
391
|
+
.dark-mode({
|
|
392
|
+
&:not(:focus) {
|
|
393
|
+
box-shadow: none;
|
|
394
|
+
}
|
|
395
|
+
});
|
|
384
396
|
|
|
385
397
|
.highcontrast-mode({
|
|
386
398
|
color: var(--white);
|
|
@@ -440,15 +452,19 @@
|
|
|
440
452
|
box-shadow: inset 0 1px 0 0 hsla(0, 0%, 100%, 0.4);
|
|
441
453
|
|
|
442
454
|
.dark-mode({
|
|
443
|
-
|
|
455
|
+
&:not(:focus) {
|
|
456
|
+
box-shadow: none;
|
|
457
|
+
}
|
|
444
458
|
|
|
445
459
|
&:not(.is-selected) {
|
|
460
|
+
background-color: var(--theme-secondary-300);
|
|
446
461
|
color: var(--black);
|
|
447
462
|
}
|
|
448
463
|
});
|
|
449
464
|
.highcontrast-mode({
|
|
450
465
|
&:not(.is-selected) {
|
|
451
466
|
border-color: transparent;
|
|
467
|
+
background-color: var(--theme-secondary-400);
|
|
452
468
|
color: var(--white);
|
|
453
469
|
}
|
|
454
470
|
});
|
|
@@ -560,7 +576,7 @@
|
|
|
560
576
|
.s-btn__unset:focus {
|
|
561
577
|
padding: 0;
|
|
562
578
|
border: none;
|
|
563
|
-
outline:
|
|
579
|
+
outline: initial;
|
|
564
580
|
font: unset;
|
|
565
581
|
border-radius: 0;
|
|
566
582
|
color: unset;
|
|
@@ -575,7 +591,7 @@
|
|
|
575
591
|
padding: 0;
|
|
576
592
|
border: none;
|
|
577
593
|
border-radius: 0;
|
|
578
|
-
outline:
|
|
594
|
+
outline: initial;
|
|
579
595
|
font: inherit;
|
|
580
596
|
background: none;
|
|
581
597
|
box-shadow: none;
|
|
@@ -600,6 +616,14 @@
|
|
|
600
616
|
}
|
|
601
617
|
}
|
|
602
618
|
|
|
619
|
+
.s-btn__unset,
|
|
620
|
+
.s-btn__link {
|
|
621
|
+
&:focus,
|
|
622
|
+
&:focus-visible {
|
|
623
|
+
outline-style: auto;
|
|
624
|
+
}
|
|
625
|
+
}
|
|
626
|
+
|
|
603
627
|
.s-btn__icon {
|
|
604
628
|
// -- BUTTONS WITH ICONS
|
|
605
629
|
// ------------------------------------------------------------------------
|
|
@@ -377,10 +377,9 @@ fieldset {
|
|
|
377
377
|
background-repeat: no-repeat;
|
|
378
378
|
background-size: contain;
|
|
379
379
|
|
|
380
|
-
&:checked {
|
|
380
|
+
&:checked, &:indeterminate {
|
|
381
381
|
border-color: var(--theme-secondary-400) !important;
|
|
382
382
|
background-color: var(--theme-secondary-400);
|
|
383
|
-
background-image: url("data:image/svg+xml,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.41L8.59 2 4 6.59 2.41 5 1 6.41l3 3z' fill='%23fff'/%3E%3C/svg%3E");
|
|
384
383
|
|
|
385
384
|
.highcontrast-dark-mode({
|
|
386
385
|
border-color: var(--blue-700) !important;
|
|
@@ -392,6 +391,13 @@ fieldset {
|
|
|
392
391
|
}
|
|
393
392
|
}
|
|
394
393
|
|
|
394
|
+
&:checked {
|
|
395
|
+
background-image: url("data:image/svg+xml,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.41L8.59 2 4 6.59 2.41 5 1 6.41l3 3z' fill='%23fff'/%3E%3C/svg%3E");
|
|
396
|
+
}
|
|
397
|
+
&:indeterminate {
|
|
398
|
+
background-image: url("data:image/svg+xml,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4.5 h7 v2 h-7 z' fill='%23fff'/%3E%3C/svg%3E");
|
|
399
|
+
}
|
|
400
|
+
|
|
395
401
|
&:focus {
|
|
396
402
|
border-color: var(--theme-secondary-300);
|
|
397
403
|
box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
|
|
@@ -616,11 +622,7 @@ fieldset {
|
|
|
616
622
|
}
|
|
617
623
|
|
|
618
624
|
.s-input-icon {
|
|
619
|
-
color: var(--black-
|
|
620
|
-
|
|
621
|
-
.highcontrast-mode({
|
|
622
|
-
color: var(--black-400);
|
|
623
|
-
});
|
|
625
|
+
color: var(--black-400);
|
|
624
626
|
}
|
|
625
627
|
|
|
626
628
|
.s-label {
|
|
@@ -641,11 +643,7 @@ fieldset {
|
|
|
641
643
|
&.s-input-icon__creditcard {
|
|
642
644
|
right: auto;
|
|
643
645
|
left: 0.7em;
|
|
644
|
-
color: var(--black-
|
|
645
|
-
|
|
646
|
-
.highcontrast-mode({
|
|
647
|
-
color: var(--black-400);
|
|
648
|
-
});
|
|
646
|
+
color: var(--black-400);
|
|
649
647
|
}
|
|
650
648
|
}
|
|
651
649
|
|
|
@@ -34,87 +34,6 @@
|
|
|
34
34
|
width: 100%;
|
|
35
35
|
}
|
|
36
36
|
}
|
|
37
|
-
|
|
38
|
-
&.s-post-summary__legacy {
|
|
39
|
-
padding-left: 0; // Since stats have padding, we don't need it on the parent
|
|
40
|
-
|
|
41
|
-
#stacks-internals #screen-md({
|
|
42
|
-
padding-left: var(--su16);
|
|
43
|
-
});
|
|
44
|
-
|
|
45
|
-
.s-post-summary--stats {
|
|
46
|
-
width: auto;
|
|
47
|
-
flex-direction: row;
|
|
48
|
-
align-items: center;
|
|
49
|
-
gap: var(--su2);
|
|
50
|
-
|
|
51
|
-
.s-post-summary--stats-item {
|
|
52
|
-
min-width: var(--su64);
|
|
53
|
-
height: var(--su48);
|
|
54
|
-
flex-direction: column;
|
|
55
|
-
gap: 0;
|
|
56
|
-
font-size: var(--fs-caption);
|
|
57
|
-
|
|
58
|
-
&.s-post-summary--stats-item__emphasized {
|
|
59
|
-
color: inherit;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
&.has-accepted-answer .svg-icon {
|
|
63
|
-
display: none;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
.s-post-summary--stats-item-number {
|
|
67
|
-
font-weight: normal;
|
|
68
|
-
font-size: var(--fs-body3);
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
&.is-deleted,
|
|
72
|
-
&.is-published,
|
|
73
|
-
&.is-draft,
|
|
74
|
-
&.is-review,
|
|
75
|
-
&.is-closed,
|
|
76
|
-
&.is-archived,
|
|
77
|
-
&.is-pinned {
|
|
78
|
-
display: none;
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
#stacks-internals #screen-md({
|
|
83
|
-
flex-direction: row;
|
|
84
|
-
align-items: center;
|
|
85
|
-
gap: var(--su8);
|
|
86
|
-
|
|
87
|
-
.s-post-summary--stats-item {
|
|
88
|
-
min-width: auto;
|
|
89
|
-
height: auto;
|
|
90
|
-
flex-direction: row;
|
|
91
|
-
gap: 3px; // HTML spacing
|
|
92
|
-
|
|
93
|
-
.s-post-summary--stats-item-number {
|
|
94
|
-
font-size: inherit;
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
&.s-post-summary--stats-item__emphasized {
|
|
98
|
-
color: var(--fc-dark);
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
&.has-accepted-answer .svg-icon {
|
|
102
|
-
display: block;
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
&.is-deleted,
|
|
106
|
-
&.is-published,
|
|
107
|
-
&.is-draft,
|
|
108
|
-
&.is-review,
|
|
109
|
-
&.is-closed,
|
|
110
|
-
&.is-archived,
|
|
111
|
-
&.is-pinned {
|
|
112
|
-
display: block;
|
|
113
|
-
}
|
|
114
|
-
}
|
|
115
|
-
});
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
37
|
}
|
|
119
38
|
|
|
120
39
|
// [1] To override .s-btn class attributes
|
|
@@ -143,12 +62,14 @@
|
|
|
143
62
|
color: var(--fc-light);
|
|
144
63
|
|
|
145
64
|
.s-post-summary--stats-item {
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
65
|
+
&:not(.s-badge) {
|
|
66
|
+
display: inline-flex;
|
|
67
|
+
gap: 0.3em;
|
|
68
|
+
align-items: center;
|
|
69
|
+
justify-content: center;
|
|
70
|
+
white-space: nowrap;
|
|
71
|
+
border: 1px solid transparent;
|
|
72
|
+
}
|
|
152
73
|
|
|
153
74
|
&.s-post-summary--stats-item__emphasized {
|
|
154
75
|
color: var(--fc-dark);
|
|
@@ -158,7 +79,14 @@
|
|
|
158
79
|
font-weight: 500;
|
|
159
80
|
}
|
|
160
81
|
|
|
82
|
+
&.s-badge {
|
|
83
|
+
font-size: var(--fs-body1);
|
|
84
|
+
line-height: var(--lh-md);
|
|
85
|
+
padding: var(--su2) var(--su4);
|
|
86
|
+
}
|
|
87
|
+
|
|
161
88
|
&.has-answers,
|
|
89
|
+
// TODO DEPRECATED: Remove .has-bounty styling
|
|
162
90
|
&.has-bounty,
|
|
163
91
|
&.is-deleted,
|
|
164
92
|
&.is-published,
|
|
@@ -186,6 +114,7 @@
|
|
|
186
114
|
}
|
|
187
115
|
}
|
|
188
116
|
|
|
117
|
+
// TODO DEPRECATED: Remove and replace with references with `s-badge s-badge__bounty`
|
|
189
118
|
&.has-bounty {
|
|
190
119
|
color: var(--white);
|
|
191
120
|
background-color: var(--blue-600);
|
|
@@ -207,31 +136,31 @@
|
|
|
207
136
|
color: var(--black-800);
|
|
208
137
|
background-color: var(--black-050);
|
|
209
138
|
}
|
|
210
|
-
|
|
139
|
+
// TODO DEPRECATED: Remove and replace with references with `s-badge s-badge__info s-badge__icon`
|
|
211
140
|
&.is-draft {
|
|
212
141
|
color: var(--blue-900);
|
|
213
142
|
background-color: var(--blue-100);
|
|
214
143
|
border-color: var(--blue-600);
|
|
215
144
|
}
|
|
216
|
-
|
|
145
|
+
// TODO DEPRECATED: Remove and replace with references with `s-badge s-badge__warning s-badge__icon`
|
|
217
146
|
&.is-review {
|
|
218
147
|
color: var(--yellow-900);
|
|
219
148
|
background-color: var(--yellow-100);
|
|
220
149
|
border-color: var(--yellow-600);
|
|
221
150
|
}
|
|
222
|
-
|
|
151
|
+
// TODO DEPRECATED: Remove and replace with references with `s-badge s-badge__danger s-badge__icon`
|
|
223
152
|
&.is-closed {
|
|
224
153
|
color: var(--red-900);
|
|
225
154
|
background-color: var(--red-100);
|
|
226
155
|
border-color: var(--red-600);
|
|
227
156
|
}
|
|
228
|
-
|
|
157
|
+
// TODO DEPRECATED: Remove and replace with references with `s-badge s-badge__muted s-badge__icon`
|
|
229
158
|
&.is-archived {
|
|
230
159
|
color: var(--black-900);
|
|
231
160
|
background-color: var(--black-100);
|
|
232
161
|
border-color: var(--black-600);
|
|
233
162
|
}
|
|
234
|
-
|
|
163
|
+
// TODO DEPRECATED: Remove and replace with references with `s-badge s-badge__muted s-badge__filled s-badge__icon`
|
|
235
164
|
&.is-pinned {
|
|
236
165
|
color: var(--white);
|
|
237
166
|
background-color: var(--black-700);
|
|
@@ -393,11 +322,11 @@
|
|
|
393
322
|
|
|
394
323
|
.s-post-summary__ignored,
|
|
395
324
|
.s-post-summary__deleted {
|
|
396
|
-
.s-post-summary--content {
|
|
325
|
+
.s-post-summary--content > *:not(.s-post-summary--content-menu-button):not(.s-post-summary--meta) {
|
|
397
326
|
opacity: 0.6;
|
|
398
327
|
}
|
|
399
|
-
|
|
400
|
-
.s-post-summary--stats-item:not(.is-deleted) {
|
|
328
|
+
// TODO DEPRECATED remove `:not(.is-deleted)`
|
|
329
|
+
.s-post-summary--stats-item:not(.s-badge):not(.is-deleted) {
|
|
401
330
|
opacity: 0.6;
|
|
402
331
|
filter: grayscale(100%);
|
|
403
332
|
}
|
|
@@ -419,7 +348,13 @@
|
|
|
419
348
|
color: var(--black-500);
|
|
420
349
|
}
|
|
421
350
|
|
|
422
|
-
.s-post-summary--meta {
|
|
351
|
+
.s-post-summary--meta > *:not(.s-post-summary--meta-tags) {
|
|
352
|
+
opacity: 0.6;
|
|
423
353
|
filter: grayscale(100%);
|
|
424
354
|
}
|
|
425
|
-
|
|
355
|
+
|
|
356
|
+
.s-post-summary--meta-tags > a {
|
|
357
|
+
opacity: 0.6;
|
|
358
|
+
filter: grayscale(100%);
|
|
359
|
+
}
|
|
360
|
+
}
|
|
@@ -130,6 +130,9 @@
|
|
|
130
130
|
}
|
|
131
131
|
|
|
132
132
|
.s-navigation {
|
|
133
|
+
.s-navigation--item:focus-visible {
|
|
134
|
+
box-shadow: var(--theme-topbar-search-shadow-focus);
|
|
135
|
+
}
|
|
133
136
|
.s-navigation--item:not(.is-selected) {
|
|
134
137
|
color: var(--theme-topbar-item-color);
|
|
135
138
|
}
|
|
@@ -153,7 +156,7 @@
|
|
|
153
156
|
// Search input
|
|
154
157
|
--theme-topbar-search-color: @black-700;
|
|
155
158
|
--theme-topbar-search-background: @white;
|
|
156
|
-
--theme-topbar-search-placeholder: @black-
|
|
159
|
+
--theme-topbar-search-placeholder: @black-400;
|
|
157
160
|
--theme-topbar-search-border: @black-200;
|
|
158
161
|
--theme-topbar-search-border-focus: @blue-300;
|
|
159
162
|
--theme-topbar-search-shadow-focus: 0 0 0 var(--su-static4) var(--focus-ring);
|
|
@@ -247,7 +247,7 @@
|
|
|
247
247
|
// Topbar Search input
|
|
248
248
|
--theme-topbar-search-color: var(--black-700);
|
|
249
249
|
--theme-topbar-search-background: var(--white);
|
|
250
|
-
--theme-topbar-search-placeholder: var(--black-
|
|
250
|
+
--theme-topbar-search-placeholder: var(--black-400);
|
|
251
251
|
--theme-topbar-search-border: var(--black-200);
|
|
252
252
|
--theme-topbar-search-border-focus: var(--blue-300);
|
|
253
253
|
--theme-topbar-search-shadow-focus: 0 0 0 var(--su-static4) var(--focus-ring);
|
|
@@ -709,10 +709,10 @@
|
|
|
709
709
|
--black-900: hsl(@black-h, @black-s, 0%);
|
|
710
710
|
|
|
711
711
|
// Orange
|
|
712
|
-
--orange-050: hsl(@orange-h, 100%,
|
|
713
|
-
--orange-100: hsl(@orange-h, 100%,
|
|
714
|
-
--orange-200: hsl(@orange-h, 100%,
|
|
715
|
-
--orange-300: hsl(@orange-h, 100%,
|
|
712
|
+
--orange-050: hsl(@orange-h, 100%, 93%);
|
|
713
|
+
--orange-100: hsl(@orange-h, 100%, 90%);
|
|
714
|
+
--orange-200: hsl(@orange-h, 100%, 86%);
|
|
715
|
+
--orange-300: hsl(@orange-h, 100%, 81%);
|
|
716
716
|
--orange-400: hsl(@orange-h, 100%, 34%);
|
|
717
717
|
--orange-500: hsl(@orange-h, 100%, 29%);
|
|
718
718
|
--orange-600: hsl(@orange-h, 100%, 24%);
|
|
@@ -721,10 +721,10 @@
|
|
|
721
721
|
--orange-900: hsl(@orange-h, 100%, 8%);
|
|
722
722
|
|
|
723
723
|
// Blue
|
|
724
|
-
--blue-050: hsl(@blue-h, 100%,
|
|
725
|
-
--blue-100: hsl(@blue-h, 100%,
|
|
726
|
-
--blue-200: hsl(@blue-h, 100%,
|
|
727
|
-
--blue-300: hsl(@blue-h, 100%,
|
|
724
|
+
--blue-050: hsl(@blue-h, 100%, 94%);
|
|
725
|
+
--blue-100: hsl(@blue-h, 100%, 92%);
|
|
726
|
+
--blue-200: hsl(@blue-h, 100%, 89%);
|
|
727
|
+
--blue-300: hsl(@blue-h, 100%, 86%);
|
|
728
728
|
--blue-400: hsl(@blue-h, 100%, 25%);
|
|
729
729
|
--blue-500: hsl(@blue-h, 100%, 20%);
|
|
730
730
|
--blue-600: hsl(@blue-h, 100%, 15%);
|
|
@@ -733,10 +733,10 @@
|
|
|
733
733
|
--blue-900: hsl(@blue-h, 100%, 5%);
|
|
734
734
|
|
|
735
735
|
// Powder
|
|
736
|
-
--powder-050: hsl(@powder-h, 100%,
|
|
737
|
-
--powder-100: hsl(@powder-h, 85%,
|
|
738
|
-
--powder-200: hsl(@powder-h, 75%,
|
|
739
|
-
--powder-300: hsl(@powder-h, 70%,
|
|
736
|
+
--powder-050: hsl(@powder-h, 100%, 95%);
|
|
737
|
+
--powder-100: hsl(@powder-h, 85%, 93%);
|
|
738
|
+
--powder-200: hsl(@powder-h, 75%, 89%);
|
|
739
|
+
--powder-300: hsl(@powder-h, 70%, 86%);
|
|
740
740
|
--powder-400: hsl(@powder-h, 55%, 28%);
|
|
741
741
|
--powder-500: hsl(@powder-h, 60%, 24%);
|
|
742
742
|
--powder-600: hsl(@powder-h, 70%, 20%);
|
|
@@ -745,11 +745,11 @@
|
|
|
745
745
|
--powder-900: hsl(@powder-h, 75%, 8%);
|
|
746
746
|
|
|
747
747
|
// Green
|
|
748
|
-
--green-025: hsl(@green-h, 100%,
|
|
749
|
-
--green-050: hsl(@green-h, 100%,
|
|
750
|
-
--green-100: hsl(@green-h, 100%,
|
|
751
|
-
--green-200: hsl(@green-h, 100%,
|
|
752
|
-
--green-300: hsl(@green-h, 100%,
|
|
748
|
+
--green-025: hsl(@green-h, 100%, 94%);
|
|
749
|
+
--green-050: hsl(@green-h, 100%, 91%);
|
|
750
|
+
--green-100: hsl(@green-h, 100%, 87%);
|
|
751
|
+
--green-200: hsl(@green-h, 100%, 83%);
|
|
752
|
+
--green-300: hsl(@green-h, 100%, 78%);
|
|
753
753
|
--green-400: hsl(@green-h, 100%, 18%);
|
|
754
754
|
--green-500: hsl(@green-h, 100%, 15%);
|
|
755
755
|
--green-600: hsl(@green-h, 100%, 12%);
|
|
@@ -758,10 +758,10 @@
|
|
|
758
758
|
--green-900: hsl(@green-h, 100%, 3%);
|
|
759
759
|
|
|
760
760
|
// Yellow
|
|
761
|
-
--yellow-050: hsl(@yellow-h, 100%,
|
|
762
|
-
--yellow-100: hsl(@yellow-h, 100%,
|
|
763
|
-
--yellow-200: hsl(@yellow-h, 95%,
|
|
764
|
-
--yellow-300: hsl(@yellow-h, 95%,
|
|
761
|
+
--yellow-050: hsl(@yellow-h, 100%, 92%);
|
|
762
|
+
--yellow-100: hsl(@yellow-h, 100%, 88%);
|
|
763
|
+
--yellow-200: hsl(@yellow-h, 95%, 83%);
|
|
764
|
+
--yellow-300: hsl(@yellow-h, 95%, 75%);
|
|
765
765
|
--yellow-400: hsl(@yellow-h, 100%, 28%);
|
|
766
766
|
--yellow-500: hsl(@yellow-h, 100%, 26%);
|
|
767
767
|
--yellow-600: hsl(@yellow-h, 100%, 23%);
|
|
@@ -770,10 +770,10 @@
|
|
|
770
770
|
--yellow-900: hsl(@yellow-h, 100%, 7%);
|
|
771
771
|
|
|
772
772
|
// Red
|
|
773
|
-
--red-050: hsl(@red-h, 100%,
|
|
774
|
-
--red-100: hsl(@red-h, 100%,
|
|
775
|
-
--red-200: hsl(@red-h, 100%,
|
|
776
|
-
--red-300: hsl(@red-h, 100%,
|
|
773
|
+
--red-050: hsl(@red-h, 100%, 94%);
|
|
774
|
+
--red-100: hsl(@red-h, 100%, 92%);
|
|
775
|
+
--red-200: hsl(@red-h, 100%, 89%);
|
|
776
|
+
--red-300: hsl(@red-h, 100%, 86%);
|
|
777
777
|
--red-400: hsl(@red-h, 100%, 35%);
|
|
778
778
|
--red-500: hsl(@red-h, 100%, 29%);
|
|
779
779
|
--red-600: hsl(@red-h, 100%, 23%);
|
|
@@ -865,10 +865,10 @@
|
|
|
865
865
|
--black-900: hsl(@black-h, @black-s, 100%);
|
|
866
866
|
|
|
867
867
|
// Orange
|
|
868
|
-
--orange-050: hsl(@orange-h, 100%,
|
|
869
|
-
--orange-100: hsl(@orange-h, 100%,
|
|
870
|
-
--orange-200: hsl(@orange-h, 100%,
|
|
871
|
-
--orange-300: hsl(@orange-h, 100%,
|
|
868
|
+
--orange-050: hsl(@orange-h, 100%, 7%);
|
|
869
|
+
--orange-100: hsl(@orange-h, 100%, 9%);
|
|
870
|
+
--orange-200: hsl(@orange-h, 100%, 15%);
|
|
871
|
+
--orange-300: hsl(@orange-h, 100%, 22%);
|
|
872
872
|
--orange-400: hsl(@orange-h, 100%, 64%);
|
|
873
873
|
--orange-500: hsl(@orange-h, 100%, 71%);
|
|
874
874
|
--orange-600: hsl(@orange-h, 100%, 77%);
|
|
@@ -877,10 +877,10 @@
|
|
|
877
877
|
--orange-900: hsl(@orange-h, 100%, 91%);
|
|
878
878
|
|
|
879
879
|
// Blue
|
|
880
|
-
--blue-050: hsl(@blue-h, 100%,
|
|
880
|
+
--blue-050: hsl(@blue-h, 100%, 7%);
|
|
881
881
|
--blue-100: hsl(@blue-h, 100%, 11%);
|
|
882
|
-
--blue-200: hsl(@blue-h, 100%,
|
|
883
|
-
--blue-300: hsl(@blue-h, 100%,
|
|
882
|
+
--blue-200: hsl(@blue-h, 100%, 17%);
|
|
883
|
+
--blue-300: hsl(@blue-h, 100%, 24%);
|
|
884
884
|
--blue-400: hsl(@blue-h, 100%, 75%);
|
|
885
885
|
--blue-500: hsl(@blue-h, 100%, 80%);
|
|
886
886
|
--blue-600: hsl(@blue-h, 100%, 85%);
|
|
@@ -889,10 +889,10 @@
|
|
|
889
889
|
--blue-900: hsl(@blue-h, 100%, 95%);
|
|
890
890
|
|
|
891
891
|
// Powder
|
|
892
|
-
--powder-050: hsl(@powder-h, 100%,
|
|
893
|
-
--powder-100: hsl(@powder-h,
|
|
892
|
+
--powder-050: hsl(@powder-h, 100%, 7%);
|
|
893
|
+
--powder-100: hsl(@powder-h, 95%, 10%);
|
|
894
894
|
--powder-200: hsl(@powder-h, 80%, 14%);
|
|
895
|
-
--powder-300: hsl(@powder-h,
|
|
895
|
+
--powder-300: hsl(@powder-h, 76%, 19%);
|
|
896
896
|
--powder-400: hsl(@powder-h, 55%, 72%);
|
|
897
897
|
--powder-500: hsl(@powder-h, 60%, 76%);
|
|
898
898
|
--powder-600: hsl(@powder-h, 70%, 80%);
|
|
@@ -901,11 +901,11 @@
|
|
|
901
901
|
--powder-900: hsl(@powder-h, 75%, 92%);
|
|
902
902
|
|
|
903
903
|
// Green
|
|
904
|
-
--green-025: hsl(@green-h, 100%,
|
|
905
|
-
--green-050: hsl(@green-h, 100%,
|
|
906
|
-
--green-100: hsl(@green-h, 100%,
|
|
907
|
-
--green-200: hsl(@green-h, 100%,
|
|
908
|
-
--green-300: hsl(@green-h, 100%,
|
|
904
|
+
--green-025: hsl(@green-h, 100%, 5%);
|
|
905
|
+
--green-050: hsl(@green-h, 100%, 6%);
|
|
906
|
+
--green-100: hsl(@green-h, 100%, 7%);
|
|
907
|
+
--green-200: hsl(@green-h, 100%, 11%);
|
|
908
|
+
--green-300: hsl(@green-h, 100%, 15%);
|
|
909
909
|
--green-400: hsl(@green-h, 100%, 65%);
|
|
910
910
|
--green-500: hsl(@green-h, 100%, 71%);
|
|
911
911
|
--green-600: hsl(@green-h, 100%, 77%);
|
|
@@ -914,10 +914,10 @@
|
|
|
914
914
|
--green-900: hsl(@green-h, 100%, 94%);
|
|
915
915
|
|
|
916
916
|
// Yellow
|
|
917
|
-
--yellow-050: hsl(@yellow-h, 100%,
|
|
918
|
-
--yellow-100: hsl(@yellow-h, 100%,
|
|
919
|
-
--yellow-200: hsl(@yellow-h,
|
|
920
|
-
--yellow-300: hsl(@yellow-h,
|
|
917
|
+
--yellow-050: hsl(@yellow-h, 100%, 6%);
|
|
918
|
+
--yellow-100: hsl(@yellow-h, 100%, 9%);
|
|
919
|
+
--yellow-200: hsl(@yellow-h, 100%, 14%);
|
|
920
|
+
--yellow-300: hsl(@yellow-h, 100%, 20%);
|
|
921
921
|
--yellow-400: hsl(@yellow-h, 100%, 55%);
|
|
922
922
|
--yellow-500: hsl(@yellow-h, 100%, 63%);
|
|
923
923
|
--yellow-600: hsl(@yellow-h, 100%, 71%);
|
|
@@ -926,10 +926,10 @@
|
|
|
926
926
|
--yellow-900: hsl(@yellow-h, 100%, 95%);
|
|
927
927
|
|
|
928
928
|
// Red
|
|
929
|
-
--red-050: hsl(@red-h, 100%,
|
|
930
|
-
--red-100: hsl(@red-h, 100%,
|
|
931
|
-
--red-200: hsl(@red-h, 100%,
|
|
932
|
-
--red-300: hsl(@red-h, 100%,
|
|
929
|
+
--red-050: hsl(@red-h, 100%, 9%);
|
|
930
|
+
--red-100: hsl(@red-h, 100%, 12%);
|
|
931
|
+
--red-200: hsl(@red-h, 100%, 17%);
|
|
932
|
+
--red-300: hsl(@red-h, 100%, 22%);
|
|
933
933
|
--red-400: hsl(@red-h, 100%, 70%);
|
|
934
934
|
--red-500: hsl(@red-h, 100%, 75%);
|
|
935
935
|
--red-600: hsl(@red-h, 100%, 80%);
|