@stackoverflow/stacks 3.0.0-beta.1 → 3.0.0-beta.3

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 (23) hide show
  1. package/dist/css/stacks.css +842 -584
  2. package/dist/css/stacks.min.css +1 -1
  3. package/lib/atomic/misc.less +1 -1
  4. package/lib/atomic/typography.less +13 -26
  5. package/lib/base/body.less +2 -7
  6. package/lib/components/activity-indicator/activity-indicator.less +1 -2
  7. package/lib/components/anchor/anchor.less +1 -1
  8. package/lib/components/badge/badge.less +6 -6
  9. package/lib/components/bling/bling.less +93 -0
  10. package/lib/components/checkbox_radio/checkbox_radio.less +12 -10
  11. package/lib/components/link/link.less +1 -1
  12. package/lib/components/link-preview/link-preview.less +1 -1
  13. package/lib/components/post-summary/post-summary.less +3 -2
  14. package/lib/components/progress-bar/progress-bar.less +11 -10
  15. package/lib/components/tag/tag.less +59 -70
  16. package/lib/components/toggle-switch/toggle-switch.less +4 -2
  17. package/lib/exports/color-mixins.less +13 -3
  18. package/lib/exports/color-sets.less +255 -216
  19. package/lib/exports/constants-helpers.less +4 -1
  20. package/lib/exports/constants-type.less +25 -25
  21. package/lib/stacks-static.less +1 -1
  22. package/package.json +1 -1
  23. package/lib/components/award-bling/award-bling.less +0 -31
package/lib/exports/color-sets.less CHANGED
@@ -11,283 +11,317 @@
11
11
  //
12
12
  // tl;dr: don't put inline after values in this file
13
13
 
14
+ // TODO SPARK update default values for white and black sets
14
15
  // White
15
16
  .set-white() {
16
- default: hsl(0, 0%, 100%);
17
+ default: hsv(0, 0%, 100%);
17
18
  }
18
19
  .set-white-dark() {
19
- default: hsl(210, 3%, 15%);
20
+ default: hsv(0, 0%, 8%);
20
21
  }
21
22
  .set-white-hc() {
22
- default: hsl(0, 0%, 100%);
23
+ default: hsv(0, 0%, 100%);
23
24
  }
24
25
  .set-white-hc-dark() {
25
- default: hsl(0, 0%, 0%);
26
+ default: hsv(0, 0%, 0%);
26
27
  }
27
28
 
28
29
  // Black
29
30
  .set-black() {
30
- 050: hsl(0, 0%, 100%);
31
- 100: hsl(210, 8%, 98%);
32
- 150: hsl(210, 8%, 95%);
33
- 200: hsl(210, 8%, 90%);
34
- 225: hsl(210, 8%, 85%);
35
- 250: hsl(210, 8%, 80%);
36
- 300: hsl(210, 9%, 75%);
37
- 350: hsl(210, 8%, 68%);
38
- 400: hsl(210, 8%, 42%);
39
- 500: hsl(210, 8%, 25%);
40
- 600: hsl(210, 8%, 5%);
41
- default: hsl(0, 0%, 0%);
31
+ 050: hsv(0, 0%, 100%);
32
+ 100: hsv(30, 1%, 97%);
33
+ 150: hsv(30, 1%, 94%);
34
+ 200: hsv(220, 2%, 89%);
35
+ 225: hsv(220, 2%, 86%);
36
+ 250: hsv(220, 4%, 82%);
37
+ 300: hsv(220, 5%, 69%);
38
+ 350: hsv(220, 6%, 55%);
39
+ 400: hsv(220, 7%, 45%);
40
+ 500: hsv(220, 8%, 30%);
41
+ 600: hsv(345, 13%, 13%);
42
+ default: hsv(0, 0%, 0%);
42
43
  }
43
44
  .set-black-dark() {
44
- 050: hsl(210, 3%, 15%);
45
- 100: hsl(210, 3%, 18%);
46
- 150: hsl(210, 4%, 21%);
47
- 200: hsl(210, 4%, 27%);
48
- 225: hsl(210, 4%, 30%);
49
- 250: hsl(210, 5%, 36%);
50
- 300: hsl(210, 4%, 47%);
51
- 350: hsl(210, 8%, 70%);
52
- 400: hsl(210, 8%, 80%);
53
- 500: hsl(210, 8%, 90%);
54
- 600: hsl(210, 11%, 98%);
55
- default: hsl(0, 0%, 100%);
45
+ 050: hsv(0, 0%, 8%);
46
+ 100: hsv(0, 0%, 15%);
47
+ 150: hsv(0, 0%, 20%);
48
+ 200: hsv(0, 0%, 34%);
49
+ 225: hsv(0, 0%, 40%);
50
+ 250: hsv(0, 0%, 45%);
51
+ 300: hsv(0, 0%, 55%);
52
+ 350: hsv(0, 0%, 65%);
53
+ 400: hsv(30, 5%, 85%);
54
+ 500: hsv(30, 4%, 95%);
55
+ 600: hsv(0, 0%, 100%);
56
+ default: hsv(0, 0%, 100%);
56
57
  }
57
58
  .set-black-hc() {
58
- 050: hsl(0, 0%, 100%);
59
- 100: hsl(210, 8%, 98%);
60
- 150: hsl(210, 8%, 95%);
61
- 200: hsl(210, 8%, 90%);
62
- 225: hsl(210, 8%, 85%);
63
- 250: hsl(210, 8%, 80%);
64
- 300: hsl(210, 9%, 75%);
65
- 350: hsl(210, 8%, 45%);
66
- 400: hsl(212, 8%, 35%);
67
- 500: hsl(210, 8%, 25%);
68
- 600: hsl(210, 8%, 5%);
69
- default: hsl(0, 0%, 0%);
59
+ 050: hsv(0, 0%, 100%);
60
+ 100: hsv(30, 1%, 97%);
61
+ 150: hsv(30, 1%, 94%);
62
+ 200: hsv(210, 2%, 89%);
63
+ 225: hsv(220, 2%, 86%);
64
+ 250: hsv(220, 4%, 82%);
65
+ 300: hsv(229, 7%, 61%);
66
+ 350: hsv(220, 7%, 36%);
67
+ 400: hsv(204, 6%, 35%);
68
+ 500: hsv(220, 8%, 30%);
69
+ 600: hsv(345, 13%, 13%);
70
+ default: hsv(0, 0%, 0%);
70
71
  }
71
-
72
72
  .set-black-hc-dark() {
73
- 050: hsl(210, 3%, 15%);
74
- 100: hsl(210, 3%, 18%);
75
- 150: hsl(210, 4%, 21%);
76
- 200: hsl(210, 4%, 27%);
77
- 225: hsl(210, 4%, 30%);
78
- 250: hsl(210, 5%, 36%);
79
- 300: hsl(210, 4%, 47%);
80
- 350: hsl(210, 10%, 74%);
81
- 400: hsl(210, 8%, 80%);
82
- 500: hsl(210, 8%, 90%);
83
- 600: hsl(210, 11%, 98%);
84
- default: hsl(0, 0%, 100%);
73
+ 050: hsv(0, 0%, 8%);
74
+ 100: hsv(0, 0%, 15%);
75
+ 150: hsv(0, 0%, 20%);
76
+ 200: hsv(0, 0%, 34%);
77
+ 225: hsv(0, 0%, 40%);
78
+ 250: hsv(0, 0%, 45%);
79
+ 300: hsv(0, 0%, 55%);
80
+ 350: hsv(0, 0%, 65%);
81
+ 400: hsv(30, 5%, 85%);
82
+ 500: hsv(30, 4%, 95%);
83
+ 600: hsv(0, 0%, 100%);
84
+ default: hsv(0, 0%, 100%);
85
85
  }
86
86
 
87
87
  // Orange
88
88
  .set-orange() {
89
- 100: hsl(23, 87%, 97%);
90
- 200: hsl(27, 87%, 87%);
91
- 300: hsl(27, 87%, 72%);
92
- 400: hsl(27, 89%, 48%);
93
- 500: hsl(27, 87%, 41%);
94
- 600: hsl(27, 87%, 27%);
89
+ 100: hsv(22, 5%, 100%);
90
+ 200: hsv(22, 26%, 100%);
91
+ 300: hsv(22, 65%, 96%);
92
+ 400: hsv(22, 92%, 91%);
93
+ 500: hsv(22, 98%, 75%);
94
+ 600: hsv(22, 95%, 44%);
95
95
  }
96
96
  .set-orange-dark() {
97
- 100: hsl(27, 55%, 20%);
98
- 200: hsl(27, 50%, 33%);
99
- 300: hsl(27, 50%, 43%);
100
- 400: hsl(27, 90%, 68%);
101
- 500: hsl(27, 90%, 80%);
102
- 600: hsl(27, 90%, 90%);
97
+ 100: hsl(22, 80%, 25%);
98
+ 200: hsl(22, 75%, 45%);
99
+ 300: hsl(22, 47%, 78%);
100
+ 400: hsl(22, 40%, 90%);
101
+ 500: hsl(22, 30%, 99%);
102
+ 600: hsl(22, 20%, 98%);
103
103
  }
104
104
  .set-orange-hc() {
105
- 100: hsl(23, 87%, 97%);
106
- 200: hsl(23, 87%, 97%);
107
- 300: hsl(27, 89%, 48%);
108
- 400: hsl(27, 87%, 29%);
109
- 500: hsl(27, 87%, 21%);
110
- 600: hsl(27, 87%, 21%);
105
+ 100: hsv(22, 5%, 100%);
106
+ 200: hsv(22, 5%, 100%);
107
+ 300: hsv(22, 92%, 91%);
108
+ 400: hsv(22, 98%, 59%);
109
+ 500: hsv(22, 95%, 44%);
110
+ 600: hsv(22, 95%, 44%);
111
111
  }
112
112
  .set-orange-hc-dark() {
113
- 100: hsl(27, 30%, 19%);
114
- 200: hsl(27, 30%, 19%);
115
- 300: hsl(27, 80%, 72%);
116
- 400: hsl(27, 80%, 72%);
117
- 500: hsl(28, 78%, 93%);
118
- 600: hsl(28, 78%, 93%);
113
+ 100: hsv(22, 80%, 25%);
114
+ 200: hsv(22, 80%, 25%);
115
+ 300: hsv(22, 76%, 60%);
116
+ 400: hsv(22, 40%, 90%);
117
+ 500: hsv(22, 20%, 98%);
118
+ 600: hsv(22, 20%, 98%);
119
119
  }
120
120
 
121
121
  // Blue
122
122
  .set-blue() {
123
- 100: hsl(210, 80%, 96%);
124
- 200: hsl(210, 80%, 91%);
125
- 300: hsl(210, 78%, 76%);
126
- 400: hsl(210, 77%, 46%);
127
- 500: hsl(210, 77%, 36%);
128
- 600: hsl(210, 80%, 23%);
123
+ 100: hsv(226, 6%, 100%);
124
+ 200: hsv(226, 20%, 98%);
125
+ 300: hsv(226, 45%, 97%);
126
+ 400: hsv(226, 67%, 95%);
127
+ 500: hsv(226, 80%, 70%);
128
+ 600: hsv(226, 85%, 40%);
129
129
  }
130
130
  .set-blue-dark() {
131
- 100: hsl(210, 50%, 22%);
132
- 200: hsl(210, 50%, 36%);
133
- 300: hsl(210, 50%, 48%);
134
- 400: hsl(210, 89%, 77%);
135
- 500: hsl(210, 89%, 84%);
136
- 600: hsl(210, 89%, 92%);
131
+ 100: hsv(220, 55%, 30%);
132
+ 200: hsv(220, 50%, 60%);
133
+ 300: hsv(226, 45%, 88%);
134
+ 400: hsv(226, 35%, 100%);
135
+ 500: hsv(220, 20%, 100%);
136
+ 600: hsv(220, 10%, 100%);
137
137
  }
138
138
  .set-blue-hc() {
139
- 100: hsl(210, 80%, 96%);
140
- 200: hsl(210, 80%, 96%);
141
- 300: hsl(210, 70%, 48%);
142
- 400: hsl(210, 77%, 34%);
143
- 500: hsl(210, 80%, 23%);
144
- 600: hsl(210, 80%, 23%);
139
+ 100: hsv(226, 6%, 100%);
140
+ 200: hsv(226, 6%, 100%);
141
+ 300: hsv(226, 67%, 95%);
142
+ 400: hsv(226, 80%, 70%);
143
+ 500: hsv(226, 85%, 40%);
144
+ 600: hsv(226, 85%, 40%);
145
145
  }
146
146
  .set-blue-hc-dark() {
147
- 100: hsl(209, 30%, 19%);
148
- 200: hsl(209, 30%, 19%);
149
- 300: hsl(210, 80%, 72%);
150
- 400: hsl(210, 80%, 75%);
151
- 500: hsl(210, 78%, 93%);
152
- 600: hsl(210, 78%, 93%);
147
+ 100: hsv(220, 55%, 30%);
148
+ 200: hsv(220, 55%, 30%);
149
+ 300: hsv(220, 50%, 60%);
150
+ 400: hsv(220, 35%, 100%);
151
+ 500: hsv(220, 10%, 100%);
152
+ 600: hsv(220, 10%, 100%);
153
153
  }
154
154
 
155
155
  // Green
156
156
  .set-green() {
157
- 100: hsl(148, 35%, 95%);
158
- 200: hsl(148, 35%, 88%);
159
- 300: hsl(148, 35%, 69%);
160
- 400: hsl(148, 70%, 31%);
161
- 500: hsl(148, 75%, 22%);
162
- 600: hsl(148, 75%, 15%);
157
+ 100: hsv(82, 6%, 98%);
158
+ 200: hsv(82, 30%, 95%);
159
+ 300: hsv(82, 50%, 80%);
160
+ 400: hsv(82, 80%, 60%);
161
+ 500: hsv(82, 90%, 45%);
162
+ 600: hsv(82, 95%, 30%);
163
163
  }
164
164
  .set-green-dark() {
165
- 100: hsl(149, 51%, 15%);
166
- 200: hsl(149, 51%, 25%);
167
- 300: hsl(149, 51%, 36%);
168
- 400: hsl(149, 50%, 62%);
169
- 500: hsl(149, 50%, 74%);
170
- 600: hsl(149, 50%, 88%);
165
+ 100: hsv(82, 80%, 22%);
166
+ 200: hsv(82, 55%, 45%);
167
+ 300: hsv(82, 44%, 70%);
168
+ 400: hsv(82, 40%, 90%);
169
+ 500: hsv(82, 30%, 90%);
170
+ 600: hsv(82, 20%, 100%);
171
171
  }
172
172
  .set-green-hc() {
173
- 100: hsl(147, 36%, 95%);
174
- 200: hsl(147, 36%, 95%);
175
- 300: hsl(148, 70%, 31%);
176
- 400: hsl(148, 75%, 22%);
177
- 500: hsl(146, 74%, 15%);
178
- 600: hsl(146, 74%, 15%);
173
+ 100: hsv(82, 6%, 98%);
174
+ 200: hsv(82, 6%, 98%);
175
+ 300: hsv(82, 80%, 63%);
176
+ 400: hsv(82, 93%, 38%);
177
+ 500: hsv(82, 95%, 30%);
178
+ 600: hsv(82, 95%, 30%);
179
179
  }
180
180
  .set-green-hc-dark() {
181
- 100: hsl(147, 30%, 19%);
182
- 200: hsl(147, 30%, 19%);
183
- 300: hsl(148, 40%, 62%);
184
- 400: hsl(148, 40%, 68%);
185
- 500: hsl(150, 39%, 93%);
186
- 600: hsl(150, 39%, 93%);
181
+ 100: hsv(82, 80%, 22%);
182
+ 200: hsv(82, 80%, 22%);
183
+ 300: hsv(82, 55%, 45%);
184
+ 400: hsv(82, 44%, 70%);
185
+ 500: hsv(82, 20%, 100%);
186
+ 600: hsv(82, 20%, 100%);
187
187
  }
188
188
 
189
189
  // Red
190
190
  .set-red() {
191
- 100: hsl(0, 72%, 96%);
192
- 200: hsl(0, 70%, 93%);
193
- 300: hsl(0, 66%, 80%);
194
- 400: hsl(0, 60%, 49%);
195
- 500: hsl(0, 65%, 37%);
196
- 600: hsl(0, 65%, 22%);
191
+ 100: hsv(0, 6%, 99%);
192
+ 200: hsv(1, 25%, 96%);
193
+ 300: hsv(0, 50%, 90%);
194
+ 400: hsv(0, 75%, 75%);
195
+ 500: hsv(0, 90%, 55%);
196
+ 600: hsv(0, 95%, 35%);
197
197
  }
198
198
  .set-red-dark() {
199
- 100: hsl(0, 43%, 22%);
200
- 200: hsl(0, 43%, 41%);
201
- 300: hsl(0, 43%, 56%);
202
- 400: hsl(0, 90%, 81%);
203
- 500: hsl(0, 90%, 88%);
204
- 600: hsl(0, 90%, 94%);
199
+ 100: hsv(0, 71%, 20%);
200
+ 200: hsv(0, 55%, 40%);
201
+ 300: hsv(0, 48%, 70%);
202
+ 400: hsv(0, 30%, 98%);
203
+ 500: hsv(0, 20%, 99%);
204
+ 600: hsv(0, 10%, 100%);
205
205
  }
206
206
  .set-red-hc() {
207
- 100: hsl(0, 80%, 96%);
208
- 200: hsl(0, 80%, 96%);
209
- 300: hsl(0, 60%, 49%);
210
- 400: hsl(0, 65%, 37%);
211
- 500: hsl(0, 65%, 22%);
212
- 600: hsl(0, 65%, 22%);
207
+ 100: hsv(0, 6%, 99%);
208
+ 200: hsv(0, 6%, 99%);
209
+ 300: hsv(0, 75%, 75%);
210
+ 400: hsv(0, 90%, 55%);
211
+ 500: hsv(0, 95%, 35%);
212
+ 600: hsv(0, 95%, 35%);
213
213
  }
214
214
  .set-red-hc-dark() {
215
- 100: hsl(358, 30%, 19%);
216
- 200: hsl(358, 30%, 19%);
217
- 300: hsl(0, 75%, 77%);
218
- 400: hsl(0, 73%, 80%);
219
- 500: hsl(0, 76%, 95%);
220
- 600: hsl(0, 76%, 95%);
215
+ 100: hsv(0, 71%, 20%);
216
+ 200: hsv(0, 71%, 20%);
217
+ 300: hsv(0, 30%, 98%);
218
+ 400: hsv(0, 20%, 99%);
219
+ 500: hsv(0, 10%, 100%);
220
+ 600: hsv(0, 10%, 100%);
221
221
  }
222
222
 
223
223
  // Yellow
224
224
  .set-yellow() {
225
- 100: hsl(43, 85%, 95%);
226
- 200: hsl(43, 85%, 88%);
227
- 300: hsl(43, 85%, 72%);
228
- 400: hsl(43, 85%, 50%);
229
- 500: hsl(43, 85%, 33%);
230
- 600: hsl(43, 85%, 18%);
225
+ 100: hsv(48, 8%, 99%);
226
+ 200: hsv(48, 20%, 96%);
227
+ 300: hsv(48, 94%, 93%);
228
+ 400: hsv(48, 100%, 67%);
229
+ 500: hsv(48, 100%, 50%);
230
+ 600: hsv(48, 100%, 30%);
231
231
  }
232
232
  .set-yellow-dark() {
233
- 100: hsl(43, 50%, 17%);
234
- 200: hsl(43, 50%, 28%);
235
- 300: hsl(43, 50%, 39%);
236
- 400: hsl(43, 90%, 75%);
237
- 500: hsl(43, 90%, 82%);
238
- 600: hsl(43, 90%, 91%);
233
+ 100: hsv(48, 80%, 20%);
234
+ 200: hsv(48, 75%, 35%);
235
+ 300: hsv(48, 55%, 65%);
236
+ 400: hsv(48, 45%, 90%);
237
+ 500: hsv(48, 30%, 99%);
238
+ 600: hsv(48, 10%, 100%);
239
239
  }
240
240
  .set-yellow-hc() {
241
- 100: hsl(41, 85%, 95%);
242
- 200: hsl(41, 85%, 95%);
243
- 300: hsl(43, 85%, 50%);
244
- 400: hsl(43, 85%, 50%);
245
- 500: hsl(48, 85%, 18%);
246
- 600: hsl(48, 85%, 18%);
241
+ 100: hsv(48, 8%, 99%);
242
+ 200: hsv(48, 8%, 99%);
243
+ 300: hsv(48, 80%, 80%);
244
+ 400: hsv(48, 100%, 42%);
245
+ 500: hsv(48, 100%, 30%);
246
+ 600: hsv(48, 100%, 30%);
247
247
  }
248
248
  .set-yellow-hc-dark() {
249
- 100: hsl(43, 29%, 17%);
250
- 200: hsl(43, 29%, 17%);
251
- 300: hsl(43, 75%, 75%);
252
- 400: hsl(43, 75%, 75%);
253
- 500: hsl(48, 74%, 91%);
254
- 600: hsl(44, 74%, 91%);
249
+ 100: hsv(48, 80%, 20%);
250
+ 200: hsv(48, 80%, 20%);
251
+ 300: hsv(48, 75%, 35%);
252
+ 400: hsv(48, 45%, 90%);
253
+ 500: hsv(48, 10%, 100%);
254
+ 600: hsv(48, 10%, 100%);
255
255
  }
256
256
 
257
257
  // Purple
258
258
  .set-purple() {
259
- 100: hsl(237, 83%, 98%);
260
- 200: hsl(237, 78%, 93%);
261
- 300: hsl(237, 60%, 83%);
262
- 400: hsl(237, 55%, 57%);
263
- 500: hsl(237, 50%, 45%);
264
- 600: hsl(237, 50%, 32%);
259
+ 100: hsv(252, 6%, 99%);
260
+ 200: hsv(252, 20%, 97%);
261
+ 300: hsv(252, 40%, 95%);
262
+ 400: hsv(252, 65%, 90%);
263
+ 500: hsv(252, 80%, 75%);
264
+ 600: hsv(252, 90%, 45%);
265
265
  }
266
266
  .set-purple-dark() {
267
- 100: hsl(237, 26%, 23%);
268
- 200: hsl(237, 26%, 44%);
269
- 300: hsl(237, 26%, 56%);
270
- 400: hsl(237, 98%, 87%);
271
- 500: hsl(237, 98%, 92%);
272
- 600: hsl(237, 98%, 96%);
267
+ 100: hsv(252, 70%, 30%);
268
+ 200: hsv(252, 65%, 50%);
269
+ 300: hsv(252, 45%, 70%);
270
+ 400: hsv(252, 33%, 97%);
271
+ 500: hsv(252, 20%, 98%);
272
+ 600: hsv(252, 10%, 99%);
273
273
  }
274
274
  .set-purple-hc() {
275
- 100: hsl(237, 83%, 98%);
276
- 200: hsl(237, 83%, 98%);
277
- 300: hsl(237, 55%, 57%);
278
- 400: hsl(237, 52%, 48%);
279
- 500: hsl(237, 50%, 32%);
280
- 600: hsl(237, 50%, 32%);
275
+ 100: hsv(252, 6%, 99%);
276
+ 200: hsv(252, 6%, 99%);
277
+ 300: hsv(252, 65%, 90%);
278
+ 400: hsv(252, 80%, 75%);
279
+ 500: hsv(252, 90%, 45%);
280
+ 600: hsv(252, 90%, 45%);
281
281
  }
282
282
  .set-purple-hc-dark() {
283
- 100: hsl(237, 26%, 23%);
284
- 200: hsl(237, 26%, 23%);
285
- 300: hsl(237, 98%, 87%);
286
- 400: hsl(237, 98%, 87%);
287
- 500: hsl(237, 98%, 96%);
288
- 600: hsl(237, 98%, 96%);
289
- }
290
-
283
+ 100: hsv(252, 70%, 30%);
284
+ 200: hsv(252, 70%, 30%);
285
+ 300: hsv(252, 65%, 50%);
286
+ 400: hsv(252, 45%, 70%);
287
+ 500: hsv(252, 10%, 99%);
288
+ 600: hsv(252, 10%, 99%);
289
+ }
290
+
291
+ .set-pink() {
292
+ 100: hsv(293, 6%, 99%);
293
+ 200: hsv(293, 25%, 95%);
294
+ 300: hsv(293, 45%, 95%);
295
+ 400: hsv(293, 68%, 91%);
296
+ 500: hsv(293, 80%, 70%);
297
+ 600: hsv(293, 90%, 45%);
298
+ }
299
+ .set-pink-dark() {
300
+ 100: hsv(293, 80%, 20%);
301
+ 200: hsv(293, 65%, 40%);
302
+ 300: hsv(293, 35%, 78%);
303
+ 400: hsv(293, 25%, 98%);
304
+ 500: hsv(293, 18%, 99%);
305
+ 600: hsv(293, 10%, 99%);
306
+ }
307
+ .set-pink-hc() {
308
+ 100: hsv(293, 6%, 99%);
309
+ 200: hsv(293, 6%, 99%);
310
+ 300: hsv(293, 90%, 91%);
311
+ 400: hsv(293, 80%, 60%);
312
+ 500: hsv(293, 90%, 45%);
313
+ 600: hsv(293, 90%, 45%);
314
+ }
315
+ .set-pink-hc-dark() {
316
+ 100: hsv(293, 80%, 20%);
317
+ 200: hsv(293, 80%, 20%);
318
+ 300: hsv(293, 65%, 40%);
319
+ 400: hsv(293, 30%, 80%);
320
+ 500: hsv(293, 10%, 99%);
321
+ 600: hsv(293, 10%, 99%);
322
+ }
323
+
324
+ // Retaining legacy metallic colors for backward compatibility
291
325
  // gold
292
326
  .set-gold() {
293
327
  100: hsl(46, 100%, 91%);
@@ -432,21 +466,21 @@
432
466
 
433
467
  // translucent utility colors (HC set represents both light and dark HC modes)
434
468
  .set-translucent() {
435
- secondary: var(--theme-secondary-custom-translucent, hsla(206, 100%, 40%, 0.15));
469
+ secondary: var(--theme-secondary-custom-translucent, hsva(0, 0%, 45%, 0.15)); // light mode black-400 at 15% alpha
436
470
  success: hsla(140, 40%, 75%, 0.4);
437
471
  warning: hsla(47, 79%, 58%, 0.4);
438
472
  error: hsla(358, 62%, 47%, 0.15);
439
473
  muted: hsla(210, 8%, 15%, 0.1);
440
474
  }
441
475
  .set-translucent-dark() {
442
- secondary: var(--theme-dark-secondary-custom-translucent, hsla(206, 100%, 40%, 0.25));
476
+ secondary: var(--theme-dark-secondary-custom-translucent, hsva(30, 5%, 85%, 0.25)); // dark mode black-400 at 25% alpha
443
477
  success: hsla(140, 40%, 75%, 0.4);
444
478
  warning: hsla(47, 79%, 58%, 0.4);
445
479
  error: hsla(358, 62%, 47%, 0.15);
446
480
  muted: hsla(210, 8%, 15%, 0.1);
447
481
  }
448
482
  .set-translucent-hc() {
449
- secondary: hsla(206, 100%, 40%, 0.9);
483
+ secondary: hsla(204, 6%, 35%, 0.9); // hc mode black-400 at 90% opacity
450
484
  success: hsla(140, 40%, 40%, 0.9);
451
485
  warning: hsla(47, 76%, 46%, 0.9);
452
486
  error: hsla(358, 62%, 47%, 0.9);
@@ -456,26 +490,27 @@
456
490
  // focus colors used for accessible focus styles
457
491
  .set-focus() {
458
492
  neutral: var(--white);
459
- theme: var(--theme-secondary-400);
493
+ theme: var(--theme-secondary);
460
494
  }
461
495
 
462
496
  // focus ring (sets represents both light and dark mode)
497
+ // TODO SHINE update these focus ring colors to use newly updated color sets
463
498
  .set-focus-ring() {
464
- default: var(--theme-secondary-custom-focus-ring, hsla(206, 100%, 40%, 0.15));
499
+ default: var(--theme-secondary-custom-focus-ring, hsva(0, 0%, 45%, 0.15)); // light mode black-400 at 15% alpha
465
500
  success: hsla(140, 40%, 75%, 0.4);
466
501
  warning: hsla(47, 79%, 58%, 0.4);
467
502
  error: hsla(358, 62%, 47%, 0.15);
468
503
  muted: hsla(210, 8%, 15%, 0.1);
469
504
  }
470
505
  .set-focus-ring-dark() {
471
- default: var(--theme-dark-secondary-custom-focus-ring, hsla(206, 100%, 40%, 0.25));
506
+ default: var(--theme-dark-secondary-custom-focus-ring, hsva(30, 5%, 85%, 0.25)); // dark mode black-400 at 25% alpha
472
507
  success: hsla(140, 40%, 75%, 0.4);
473
508
  warning: hsla(47, 79%, 58%, 0.4);
474
509
  error: hsla(358, 62%, 47%, 0.15);
475
510
  muted: hsla(210, 8%, 15%, 0.1);
476
511
  }
477
512
  .set-focus-ring-hc() {
478
- default: hsla(206, 100%, 40%, 0.9);
513
+ default: hsva(0, 0%, 45%, 0.9); // hc mode dark mode black-400 at 25% alpha
479
514
  success: hsla(140, 40%, 40%, 0.9);
480
515
  warning: hsla(47, 76%, 46%, 0.9);
481
516
  error: hsla(358, 62%, 47%, 0.9);
@@ -484,6 +519,7 @@
484
519
 
485
520
  // highlight
486
521
  // TODO consult with design to potentially map static colors to new colors variables
522
+ // TODO SHINE request colors for use in code blocks (or verify these can be used for now)
487
523
  .set-highlight() {
488
524
  addition: var(--green-500);
489
525
  attribute: hsl(206, 98.5%, 29%);
@@ -571,6 +607,7 @@
571
607
  red: .set-red();
572
608
  yellow: .set-yellow();
573
609
  purple: .set-purple();
610
+ pink: .set-pink();
574
611
  gold: .set-gold();
575
612
  silver: .set-silver();
576
613
  bronze: .set-bronze();
@@ -585,6 +622,7 @@
585
622
  red: .set-red-dark();
586
623
  yellow: .set-yellow-dark();
587
624
  purple: .set-purple-dark();
625
+ pink: .set-pink-dark();
588
626
  gold: .set-gold-dark();
589
627
  silver: .set-silver-dark();
590
628
  bronze: .set-bronze-dark();
@@ -599,6 +637,7 @@
599
637
  red: .set-red-hc();
600
638
  yellow: .set-yellow-hc();
601
639
  purple: .set-purple-hc();
640
+ pink: .set-pink-hc();
602
641
  gold: .set-gold-hc();
603
642
  silver: .set-silver-hc();
604
643
  bronze: .set-bronze-hc();
@@ -613,6 +652,7 @@
613
652
  red: .set-red-hc-dark();
614
653
  yellow: .set-yellow-hc-dark();
615
654
  purple: .set-purple-hc-dark();
655
+ pink: .set-pink-hc-dark();
616
656
  gold: .set-gold-hc-dark();
617
657
  silver: .set-silver-hc-dark();
618
658
  bronze: .set-bronze-hc-dark();
@@ -674,7 +714,6 @@
674
714
  }
675
715
 
676
716
  // Theme values
677
- // TODO update to use custom theme colors with orange/blue as fallbacks
678
717
  .set-theme-primary-default() {
679
718
  default: var(--orange-400);
680
719
  100: var(--orange-100);
@@ -686,13 +725,13 @@
686
725
  }
687
726
 
688
727
  .set-theme-secondary-default() {
689
- default: var(--blue-400);
690
- 100: var(--blue-100);
691
- 200: var(--blue-200);
692
- 300: var(--blue-300);
693
- 400: var(--blue-400);
694
- 500: var(--blue-500);
695
- 600: var(--blue-600);
728
+ default: var(--black);
729
+ 100: var(--black-100);
730
+ 200: var(--black-200);
731
+ 300: var(--black-300);
732
+ 400: var(--black-400);
733
+ 500: var(--black-500);
734
+ 600: var(--black-600);
696
735
  }
697
736
 
698
737
  .sets-theme-default() {
@@ -702,10 +741,10 @@
702
741
 
703
742
  .theme-light-default() {
704
743
  primary: .set-orange()[400];
705
- secondary: .set-blue()[400];
744
+ secondary: .set-black()[default];
706
745
  }
707
746
 
708
747
  .theme-dark-default() {
709
748
  primary: .set-orange-dark()[400];
710
- secondary: .set-blue-dark()[400];
749
+ secondary: .set-black-dark()[default];
711
750
  }