@daffodil/design 0.42.2 → 0.43.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 (93) hide show
  1. package/esm2020/atoms/button/button.component.mjs +1 -1
  2. package/esm2020/molecules/callout/callout/callout.component.mjs +2 -2
  3. package/esm2020/molecules/card/card/card.component.mjs +2 -2
  4. package/esm2020/molecules/hero/hero/hero.component.mjs +2 -2
  5. package/esm2020/molecules/image-list/image-list.component.mjs +2 -2
  6. package/esm2020/molecules/list/list/list.component.mjs +2 -2
  7. package/esm2020/molecules/paginator/paginator.component.mjs +2 -2
  8. package/fesm2015/daffodil-design.mjs +12 -12
  9. package/fesm2015/daffodil-design.mjs.map +1 -1
  10. package/fesm2020/daffodil-design.mjs +12 -12
  11. package/fesm2020/daffodil-design.mjs.map +1 -1
  12. package/package.json +1 -1
  13. package/{src/scss → scss}/README.md +0 -0
  14. package/scss/accessibility/_errors.scss +12 -0
  15. package/scss/accessibility/_index.scss +1 -0
  16. package/scss/core/_index.scss +4 -0
  17. package/scss/core/map/map-deep-check/map-deep-check.scss +26 -0
  18. package/scss/core/map/map-deep-check/map-deep-check.spec.scss +43 -0
  19. package/scss/core/map/map-deep-get/map-deep-get.scss +27 -0
  20. package/scss/core/map/map-deep-get/map-deep-get.spec.scss +25 -0
  21. package/scss/core/string/split/string-split.scss +33 -0
  22. package/scss/core/string/split/string-split.spec.scss +35 -0
  23. package/scss/daff-global.scss +49 -0
  24. package/scss/daff-typography.scss +55 -0
  25. package/scss/daff-util.scss +21 -0
  26. package/scss/interactions/_index.scss +1 -0
  27. package/scss/interactions/mouse/_clickable.scss +22 -0
  28. package/scss/layout/_breakpoint.scss +21 -0
  29. package/scss/layout/_index.scss +2 -0
  30. package/scss/layout/_variables.scss +13 -0
  31. package/scss/theme.scss +77 -0
  32. package/scss/theming/README.md +59 -0
  33. package/scss/theming/_color-palettes.scss +116 -0
  34. package/scss/theming/_configure-palette.scss +20 -0
  35. package/scss/theming/_configure-theme.scss +68 -0
  36. package/scss/theming/_get-color.scss +18 -0
  37. package/scss/theming/_index.scss +6 -0
  38. package/scss/theming/_theme-css-variables.scss +43 -0
  39. package/scss/theming/contrast/_index.scss +5 -0
  40. package/scss/theming/contrast/contrast-ratio/contrast-ratio.scss +11 -0
  41. package/scss/theming/contrast/contrast-ratio/contrast-ratio.spec.scss +0 -0
  42. package/scss/theming/contrast/luminance/_variables.scss +268 -0
  43. package/scss/theming/contrast/luminance/luminance.scss +19 -0
  44. package/scss/theming/contrast/luminance/luminance.spec.scss +24 -0
  45. package/scss/theming/contrast/text-contrast/text-contrast.scss +34 -0
  46. package/scss/theming/contrast/text-contrast/text-contrast.spec.scss +0 -0
  47. package/scss/theming/illuminate/illuminate.scss +145 -0
  48. package/scss/theming/illuminate/illuminate.spec.scss +15 -0
  49. package/scss/theming/prebuilt/internal-theme.scss +13 -0
  50. package/scss/typography/README.md +88 -0
  51. package/scss/typography/_classes.scss +20 -0
  52. package/scss/typography/_index.scss +5 -0
  53. package/scss/typography/mixins/_font-weight.scss +18 -0
  54. package/scss/typography/mixins/_sizes.scss +84 -0
  55. package/scss/typography/mixins/_text-transform.scss +4 -0
  56. package/scss/typography/mixins/_text-truncate.scss +23 -0
  57. package/scss/typography/utilities/_index.scss +1 -0
  58. package/scss/typography/utilities/_variables.scss +12 -0
  59. package/src/atoms/button/README.md +16 -11
  60. package/src/atoms/button/button-theme-variants/button.scss +35 -0
  61. package/src/atoms/button/button-theme-variants/focus.scss +6 -0
  62. package/src/atoms/button/button-theme-variants/icon.scss +21 -0
  63. package/src/atoms/button/button-theme-variants/raised.scss +56 -0
  64. package/src/atoms/button/button-theme-variants/stroked.scss +36 -0
  65. package/src/atoms/button/button-theme-variants/underline.scss +9 -0
  66. package/src/atoms/button/button-theme.scss +570 -0
  67. package/src/atoms/form/error-message/error-message-theme.scss +7 -0
  68. package/src/atoms/form/form-field/form-field/form-field-theme.scss +38 -0
  69. package/src/atoms/form/input/input-theme.scss +16 -0
  70. package/src/atoms/form/radio/radio.scss +0 -0
  71. package/src/atoms/form/select/select/select-theme.scss +19 -0
  72. package/src/atoms/loading-icon/loading-icon-theme.scss +57 -0
  73. package/src/atoms/progress-indicator/progress-indicator-theme.scss +60 -0
  74. package/src/molecules/accordion/accordion-item/accordion-item-theme.scss +12 -0
  75. package/src/molecules/article/article/_stops-article-cascade.scss +7 -0
  76. package/src/molecules/article/article/article-theme.scss +78 -0
  77. package/src/molecules/callout/callout-theme.scss +59 -0
  78. package/src/molecules/card/card/card-theme-variants/basic-card.scss +6 -0
  79. package/src/molecules/card/card/card-theme-variants/linkable-card.scss +23 -0
  80. package/src/molecules/card/card/card-theme-variants/stroked-card.scss +3 -0
  81. package/src/molecules/card/card/card-theme.scss +186 -0
  82. package/src/molecules/hero/hero-theme.scss +59 -0
  83. package/src/molecules/list/list/list-theme.scss +68 -0
  84. package/src/molecules/media-gallery/media-gallery-theme.scss +20 -0
  85. package/src/molecules/modal/modal-theme.scss +9 -0
  86. package/src/molecules/navbar/navbar-theme.scss +57 -0
  87. package/src/molecules/paginator/paginator-theme.scss +72 -0
  88. package/src/molecules/sidebar/sidebar/sidebar-theme.scss +13 -0
  89. package/src/molecules/sidebar/sidebar-viewport/sidebar-viewport-theme.scss +11 -0
  90. package/daff-global.scss +0 -2
  91. package/daff-theme.scss +0 -3633
  92. package/daff-typography.scss +0 -505
  93. package/daff-util.scss +0 -377
package/daff-theme.scss DELETED
@@ -1,3633 +0,0 @@
1
- // @docs
2
- //
3
- // `daff-theme` is a utility library for themeing the daffodil
4
- // design library. It contains many useful mixins, functions,
5
- // and variables.
6
- //
7
- // @note You can import this as often as you like, as it only contains SCSS
8
- // variables, mixins, and functions; thus it won't effect your final
9
- // compiled stylesheet size.
10
- //
11
- // @usage
12
- // ```
13
- //
14
- // ```
15
- //
16
- // @docs
17
- // @private
18
- // Splits a string into an array based on a separator
19
- // Remember, string arrays begin at 1 in SASS.
20
- //
21
- // @returns comma-list
22
- //
23
- @function daff-string-split($string, $separator) {
24
- $list: ();
25
- $index: str-index($string, $separator);
26
-
27
- @if ($index == null) {
28
- @return $list;
29
- }
30
-
31
- @while $index !=null {
32
- $item: str-slice($string, 1, $index - 1);
33
-
34
- @if ($item != '') {
35
- $list: append($list, $item, 'comma');
36
- }
37
-
38
- $string: str-slice($string, $index + 1);
39
- $index: str-index($string, $separator);
40
- }
41
-
42
- @if ($string != '') {
43
- $list: append($list, $string, 'comma');
44
- }
45
-
46
- @return $list;
47
- }
48
-
49
-
50
- //
51
- // Checks whether or not a map has a nested key
52
- //
53
- // @param $map - the map being checked
54
- // @param $keys - an list of ordered keys to traverse down
55
- //
56
- // @returns boolean
57
- // @throws error
58
- //
59
- @function daff-map-deep-check($map, $keys) {
60
- @if (type-of($map) != 'map') {
61
- @error 'Expected first parameter to be of type `map`';
62
- }
63
-
64
- @each $key in $keys {
65
- @if (not map-has-key($map, $key)) {
66
- @return false;
67
- }
68
-
69
- $map: map-get($map, $key);
70
- }
71
-
72
- @return true;
73
- }
74
-
75
- //
76
- // @docs
77
- // @private
78
- // Splits a string into an array based on a separator
79
- // Remember, string arrays begin at 1 in SASS.
80
- //
81
- // @returns comma-list
82
- //
83
- @function daff-string-split($string, $separator) {
84
- $list: ();
85
- $index: str-index($string, $separator);
86
-
87
- @if ($index == null) {
88
- @return $list;
89
- }
90
-
91
- @while $index !=null {
92
- $item: str-slice($string, 1, $index - 1);
93
-
94
- @if ($item != '') {
95
- $list: append($list, $item, 'comma');
96
- }
97
-
98
- $string: str-slice($string, $index + 1);
99
- $index: str-index($string, $separator);
100
- }
101
-
102
- @if ($string != '') {
103
- $list: append($list, $string, 'comma');
104
- }
105
-
106
- @return $list;
107
- }
108
-
109
- //
110
- // Checks whether or not a map has a nested key
111
- //
112
- // @param $map - the map being checked
113
- // @param $keys - an list of ordered keys to traverse down
114
- //
115
- // @returns boolean
116
- // @throws error
117
- //
118
- @function daff-map-deep-check($map, $keys) {
119
- @if (type-of($map) != 'map') {
120
- @error 'Expected first parameter to be of type `map`';
121
- }
122
-
123
- @each $key in $keys {
124
- @if (not map-has-key($map, $key)) {
125
- @return false;
126
- }
127
-
128
- $map: map-get($map, $key);
129
- }
130
-
131
- @return true;
132
- }
133
-
134
-
135
- //
136
- // Return a the value of a nested key in a map if it exists.
137
- // If the key doesn't exist, it throw an error.
138
- //
139
- // Note: This function doesn't support the use
140
- // of the search character in your map key names.
141
- //
142
- // @usage daff-map-deep-get($map, "nested.map.key");
143
- // @returns any
144
- // @throws error
145
- @function daff-map-deep-get($map, $key, $search-character: '.') {
146
- $keys: daff-string-split($key, $search-character);
147
-
148
- @if not daff-map-deep-check($map, $keys) {
149
- @error 'The map doesn\'t contain the $key: `#{$key}`\'';
150
- }
151
-
152
- @each $key in $keys {
153
- $map: map-get($map, $key);
154
- }
155
-
156
- @return $map;
157
- }
158
-
159
-
160
- /* stylelint-disable */
161
- $wcag-aa-errors: (
162
- 'text-contrast': 'WCAG 2.0 level AA requires text and its background color to have a contrast ratio of at least 4.5:1',
163
- 'icon-contrast': 'WCAG 2.0 level AA requires the icon and its background color to have a contrast ratio of at least 3:1'
164
- );
165
-
166
- $wcag-aaa-errors: (
167
- map-merge($wcag-aa-errors, (
168
- 'text-contrast': 'WCAG 2.0 level AA requires text and its background color to have a contrast ratio of at least 7:1',
169
- ))
170
- );
171
- /* stylelint-enable */
172
-
173
- // Base colors
174
- $daff-white: #ffffff;
175
- $error: #dd0000;
176
-
177
- // 60 apart passes AAA level for any size text (except for 10/70)
178
- // 50 apart passes AA level for any size text (except for 10/60)
179
-
180
- $daff-blue: (
181
- 10: #ebf1ff,
182
- 20: #c4d8ff,
183
- 30: #9dbeff,
184
- 40: #79a7ff,
185
- 50: #548fff,
186
- 60: #1f66ff,
187
- 70: #093cf3,
188
- 80: #001bcb,
189
- 90: #00098a,
190
- 100: #000033
191
- );
192
-
193
- $daff-primary: $daff-blue;
194
-
195
- $daff-purple: (
196
- 10: #ebebff,
197
- 20: #d4d3ff,
198
- 30: #b7b4ff,
199
- 40: #a19bff,
200
- 50: #8b82ff,
201
- 60: #6a57ff,
202
- 70: #5631f3,
203
- 80: #3c13bd,
204
- 90: #2c068a,
205
- 100: #110033
206
- );
207
-
208
- $daff-accent: $daff-purple;
209
-
210
- $daff-turquoise: (
211
- 10: #d6fcea,
212
- 20: #9dfbd3,
213
- 30: #51e1ae,
214
- 40: #37c193,
215
- 50: #1fa67c,
216
- 60: #00835f,
217
- 70: #0f654a,
218
- 80: #104b37,
219
- 90: #0d3426,
220
- 100: #082218
221
- );
222
-
223
- $daff-yellow: (
224
- 10: #fffaeb,
225
- 20: #fff1c2,
226
- 30: #ffe799,
227
- 40: #ffde70,
228
- 50: #ffd447,
229
- 60: #ffc810,
230
- 70: #f5bc00,
231
- 80: #cc9c00,
232
- 90: #a37d00,
233
- 100: #7a5e00
234
- );
235
-
236
- $daff-red: (
237
- 10: #fcf1f1,
238
- 20: #fae0e0,
239
- 30: #f8babb,
240
- 40: #f88d8f,
241
- 50: #fb5d61,
242
- 60: #ec0019,
243
- 70: #b30e19,
244
- 80: #871016,
245
- 90: #5e0c10,
246
- 100: #3f0809,
247
- );
248
-
249
- $daff-bronze: (
250
- 10: #fcf2eb,
251
- 20: #f7dac6,
252
- 30: #f2c093,
253
- 40: #e49d40,
254
- 50: #d2801a,
255
- 60: #b36200,
256
- 70: #955400,
257
- 80: #704000,
258
- 90: #462900,
259
- 100: #1a0f00,
260
- );
261
-
262
- $daff-green: (
263
- 10: #c4ffcc,
264
- 20: #6aff86,
265
- 30: #00db57,
266
- 40: #13c049,
267
- 50: #00aa3c,
268
- 60: #00852e,
269
- 70: #006b23,
270
- 80: #004b17,
271
- 90: #0c3515,
272
- 100: #07230d,
273
- );
274
-
275
- $daff-gray: (
276
- 0: #ffffff,
277
- 10: #fafafa,
278
- 20: #e8e8e8,
279
- 30: #d3d3d3,
280
- 40: #b6b6b6,
281
- 50: #949494,
282
- 60: #767676,
283
- 70: #5e5e5e,
284
- 80: #474747,
285
- 90: #323232,
286
- 100: #1a1a1a,
287
- 110: #070707
288
- );
289
-
290
- //
291
- // Takes a color palette and retrieves the hue from the palette
292
- // If no color is selected, it will retrieve the default
293
- // color from the palette
294
- //
295
- // @usage
296
- // ```
297
- // daff-color($daff-yellow, 60);
298
- // ```
299
- @function daff-color($palette, $color: 'default') {
300
- @if (not(map-has-key($palette, $color))) {
301
- @error 'Color: `#{$color}` does not exist in palette';
302
- }
303
-
304
- @return map-get($palette, $color);
305
- }
306
-
307
- // Entrypoint for Contrast Features
308
-
309
- // Precomputed linear color channel values, for use in contrast calculations.
310
- // See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
311
- //
312
- // Algorithm, for c in 0 to 255:
313
- // f(c) {
314
- // c = c / 255;
315
- // return c < 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
316
- // }
317
- //
318
- // This lookup table is needed since there is no `pow` in SASS.
319
- $linear-channel-values: (
320
- 0,
321
- 0.0003035269835488375,
322
- 0.000607053967097675,
323
- 0.0009105809506465125,
324
- 0.00121410793419535,
325
- 0.0015176349177441874,
326
- 0.001821161901293025,
327
- 0.0021246888848418626,
328
- 0.0024282158683907,
329
- 0.0027317428519395373,
330
- 0.003035269835488375,
331
- 0.003346535763899161,
332
- 0.003676507324047436,
333
- 0.004024717018496307,
334
- 0.004391442037410293,
335
- 0.004776953480693729,
336
- 0.005181516702338386,
337
- 0.005605391624202723,
338
- 0.006048833022857054,
339
- 0.006512090792594475,
340
- 0.006995410187265387,
341
- 0.007499032043226175,
342
- 0.008023192985384994,
343
- 0.008568125618069307,
344
- 0.009134058702220787,
345
- 0.00972121732023785,
346
- 0.010329823029626936,
347
- 0.010960094006488246,
348
- 0.011612245179743885,
349
- 0.012286488356915872,
350
- 0.012983032342173012,
351
- 0.013702083047289686,
352
- 0.014443843596092545,
353
- 0.01520851442291271,
354
- 0.01599629336550963,
355
- 0.016807375752887384,
356
- 0.017641954488384078,
357
- 0.018500220128379697,
358
- 0.019382360956935723,
359
- 0.0202885630566524,
360
- 0.021219010376003555,
361
- 0.022173884793387385,
362
- 0.02315336617811041,
363
- 0.024157632448504756,
364
- 0.02518685962736163,
365
- 0.026241221894849898,
366
- 0.027320891639074894,
367
- 0.028426039504420793,
368
- 0.0295568344378088,
369
- 0.030713443732993635,
370
- 0.03189603307301153,
371
- 0.033104766570885055,
372
- 0.03433980680868217,
373
- 0.03560131487502034,
374
- 0.03688945040110004,
375
- 0.0382043715953465,
376
- 0.03954623527673284,
377
- 0.04091519690685319,
378
- 0.042311410620809675,
379
- 0.043735029256973465,
380
- 0.04518620438567554,
381
- 0.046665086336880095,
382
- 0.04817182422688942,
383
- 0.04970656598412723,
384
- 0.05126945837404324,
385
- 0.052860647023180246,
386
- 0.05448027644244237,
387
- 0.05612849004960009,
388
- 0.05780543019106723,
389
- 0.0595112381629812,
390
- 0.06124605423161761,
391
- 0.06301001765316767,
392
- 0.06480326669290577,
393
- 0.06662593864377289,
394
- 0.06847816984440017,
395
- 0.07036009569659588,
396
- 0.07227185068231748,
397
- 0.07421356838014963,
398
- 0.07618538148130785,
399
- 0.07818742180518633,
400
- 0.08021982031446832,
401
- 0.0822827071298148,
402
- 0.08437621154414882,
403
- 0.08650046203654976,
404
- 0.08865558628577294,
405
- 0.09084171118340768,
406
- 0.09305896284668745,
407
- 0.0953074666309647,
408
- 0.09758734714186246,
409
- 0.09989872824711389,
410
- 0.10224173308810132,
411
- 0.10461648409110419,
412
- 0.10702310297826761,
413
- 0.10946171077829933,
414
- 0.1119324278369056,
415
- 0.11443537382697373,
416
- 0.11697066775851084,
417
- 0.11953842798834562,
418
- 0.12213877222960187,
419
- 0.12477181756095049,
420
- 0.12743768043564743,
421
- 0.1301364766903643,
422
- 0.13286832155381798,
423
- 0.13563332965520566,
424
- 0.13843161503245183,
425
- 0.14126329114027164,
426
- 0.14412847085805777,
427
- 0.14702726649759498,
428
- 0.14995978981060856,
429
- 0.15292615199615017,
430
- 0.1559264637078274,
431
- 0.1589608350608804,
432
- 0.162029375639111,
433
- 0.1651321945016676,
434
- 0.16826940018969075,
435
- 0.1714411007328226,
436
- 0.17464740365558504,
437
- 0.17788841598362912,
438
- 0.18116424424986022,
439
- 0.184474994500441,
440
- 0.18782077230067787,
441
- 0.19120168274079138,
442
- 0.1946178304415758,
443
- 0.19806931955994886,
444
- 0.20155625379439707,
445
- 0.20507873639031693,
446
- 0.20863687014525575,
447
- 0.21223075741405523,
448
- 0.21586050011389926,
449
- 0.2195261997292692,
450
- 0.2232279573168085,
451
- 0.22696587351009836,
452
- 0.23074004852434915,
453
- 0.23455058216100522,
454
- 0.238397573812271,
455
- 0.24228112246555486,
456
- 0.24620132670783548,
457
- 0.25015828472995344,
458
- 0.25415209433082675,
459
- 0.2581828529215958,
460
- 0.26225065752969623,
461
- 0.26635560480286247,
462
- 0.2704977910130658,
463
- 0.27467731206038465,
464
- 0.2788942634768104,
465
- 0.2831487404299921,
466
- 0.2874408377269175,
467
- 0.29177064981753587,
468
- 0.2961382707983211,
469
- 0.3005437944157765,
470
- 0.3049873140698863,
471
- 0.30946892281750854,
472
- 0.31398871337571754,
473
- 0.31854677812509186,
474
- 0.32314320911295075,
475
- 0.3277780980565422,
476
- 0.33245153634617935,
477
- 0.33716361504833037,
478
- 0.3419144249086609,
479
- 0.3467040563550296,
480
- 0.35153259950043936,
481
- 0.3564001441459435,
482
- 0.3613067797835095,
483
- 0.3662525955988395,
484
- 0.3712376804741491,
485
- 0.3762621229909065,
486
- 0.38132601143253014,
487
- 0.386429433787049,
488
- 0.39157247774972326,
489
- 0.39675523072562685,
490
- 0.4019777798321958,
491
- 0.4072402119017367,
492
- 0.41254261348390375,
493
- 0.4178850708481375,
494
- 0.4232676699860717,
495
- 0.4286904966139066,
496
- 0.43415363617474895,
497
- 0.4396571738409188,
498
- 0.44520119451622786,
499
- 0.45078578283822346,
500
- 0.45641102318040466,
501
- 0.4620769996544071,
502
- 0.467783796112159,
503
- 0.47353149614800955,
504
- 0.4793201831008268,
505
- 0.4851499400560704,
506
- 0.4910208498478356,
507
- 0.4969329950608704,
508
- 0.5028864580325687,
509
- 0.5088813208549338,
510
- 0.5149176653765214,
511
- 0.5209955732043543,
512
- 0.5271151257058131,
513
- 0.5332764040105052,
514
- 0.5394794890121072,
515
- 0.5457244613701866,
516
- 0.5520114015120001,
517
- 0.5583403896342679,
518
- 0.5647115057049292,
519
- 0.5711248294648731,
520
- 0.5775804404296506,
521
- 0.5840784178911641,
522
- 0.5906188409193369,
523
- 0.5972017883637634,
524
- 0.6038273388553378,
525
- 0.6104955708078648,
526
- 0.6172065624196511,
527
- 0.6239603916750761,
528
- 0.6307571363461468,
529
- 0.6375968739940326,
530
- 0.6444796819705821,
531
- 0.6514056374198242,
532
- 0.6583748172794485,
533
- 0.665387298282272,
534
- 0.6724431569576875,
535
- 0.6795424696330938,
536
- 0.6866853124353135,
537
- 0.6938717612919899,
538
- 0.7011018919329731,
539
- 0.7083757798916868,
540
- 0.7156935005064807,
541
- 0.7230551289219693,
542
- 0.7304607400903537,
543
- 0.7379104087727308,
544
- 0.7454042095403874,
545
- 0.7529422167760779,
546
- 0.7605245046752924,
547
- 0.768151147247507,
548
- 0.7758222183174236,
549
- 0.7835377915261935,
550
- 0.7912979403326302,
551
- 0.799102738014409,
552
- 0.8069522576692516,
553
- 0.8148465722161012,
554
- 0.8227857543962835,
555
- 0.8307698767746546,
556
- 0.83879901174074,
557
- 0.846873231509858,
558
- 0.8549926081242338,
559
- 0.8631572134541023,
560
- 0.8713671191987972,
561
- 0.8796223968878317,
562
- 0.8879231178819663,
563
- 0.8962693533742664,
564
- 0.9046611743911496,
565
- 0.9130986517934192,
566
- 0.9215818562772946,
567
- 0.9301108583754237,
568
- 0.938685728457888,
569
- 0.9473065367331999,
570
- 0.9559733532492861,
571
- 0.9646862478944651,
572
- 0.9734452903984125,
573
- 0.9822505503331171,
574
- 0.9911020971138298,
575
- 1
576
- );
577
-
578
-
579
- // Calculate the luminance for a color.
580
- // Luminance is defined as a decimal value between 0 and 1
581
- // with "0" corresponding to "no brightness"
582
- // and "1" corresponding to "full brightness".
583
- //
584
- // See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
585
-
586
- @function daff-luminance($color) {
587
- $red-index: red($color) + 1;
588
- $green-index: green($color) + 1;
589
- $blue-index: blue($color) + 1;
590
-
591
- $red: nth($linear-channel-values, $red-index);
592
- $green: nth($linear-channel-values, $green-index);
593
- $blue: nth($linear-channel-values, $blue-index);
594
- @return 0.2126 * $red + 0.7152 * $green + 0.0722 * $blue;
595
- }
596
-
597
- // Precomputed linear color channel values, for use in contrast calculations.
598
- // See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
599
- //
600
- // Algorithm, for c in 0 to 255:
601
- // f(c) {
602
- // c = c / 255;
603
- // return c < 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
604
- // }
605
- //
606
- // This lookup table is needed since there is no `pow` in SASS.
607
- $linear-channel-values: (
608
- 0,
609
- 0.0003035269835488375,
610
- 0.000607053967097675,
611
- 0.0009105809506465125,
612
- 0.00121410793419535,
613
- 0.0015176349177441874,
614
- 0.001821161901293025,
615
- 0.0021246888848418626,
616
- 0.0024282158683907,
617
- 0.0027317428519395373,
618
- 0.003035269835488375,
619
- 0.003346535763899161,
620
- 0.003676507324047436,
621
- 0.004024717018496307,
622
- 0.004391442037410293,
623
- 0.004776953480693729,
624
- 0.005181516702338386,
625
- 0.005605391624202723,
626
- 0.006048833022857054,
627
- 0.006512090792594475,
628
- 0.006995410187265387,
629
- 0.007499032043226175,
630
- 0.008023192985384994,
631
- 0.008568125618069307,
632
- 0.009134058702220787,
633
- 0.00972121732023785,
634
- 0.010329823029626936,
635
- 0.010960094006488246,
636
- 0.011612245179743885,
637
- 0.012286488356915872,
638
- 0.012983032342173012,
639
- 0.013702083047289686,
640
- 0.014443843596092545,
641
- 0.01520851442291271,
642
- 0.01599629336550963,
643
- 0.016807375752887384,
644
- 0.017641954488384078,
645
- 0.018500220128379697,
646
- 0.019382360956935723,
647
- 0.0202885630566524,
648
- 0.021219010376003555,
649
- 0.022173884793387385,
650
- 0.02315336617811041,
651
- 0.024157632448504756,
652
- 0.02518685962736163,
653
- 0.026241221894849898,
654
- 0.027320891639074894,
655
- 0.028426039504420793,
656
- 0.0295568344378088,
657
- 0.030713443732993635,
658
- 0.03189603307301153,
659
- 0.033104766570885055,
660
- 0.03433980680868217,
661
- 0.03560131487502034,
662
- 0.03688945040110004,
663
- 0.0382043715953465,
664
- 0.03954623527673284,
665
- 0.04091519690685319,
666
- 0.042311410620809675,
667
- 0.043735029256973465,
668
- 0.04518620438567554,
669
- 0.046665086336880095,
670
- 0.04817182422688942,
671
- 0.04970656598412723,
672
- 0.05126945837404324,
673
- 0.052860647023180246,
674
- 0.05448027644244237,
675
- 0.05612849004960009,
676
- 0.05780543019106723,
677
- 0.0595112381629812,
678
- 0.06124605423161761,
679
- 0.06301001765316767,
680
- 0.06480326669290577,
681
- 0.06662593864377289,
682
- 0.06847816984440017,
683
- 0.07036009569659588,
684
- 0.07227185068231748,
685
- 0.07421356838014963,
686
- 0.07618538148130785,
687
- 0.07818742180518633,
688
- 0.08021982031446832,
689
- 0.0822827071298148,
690
- 0.08437621154414882,
691
- 0.08650046203654976,
692
- 0.08865558628577294,
693
- 0.09084171118340768,
694
- 0.09305896284668745,
695
- 0.0953074666309647,
696
- 0.09758734714186246,
697
- 0.09989872824711389,
698
- 0.10224173308810132,
699
- 0.10461648409110419,
700
- 0.10702310297826761,
701
- 0.10946171077829933,
702
- 0.1119324278369056,
703
- 0.11443537382697373,
704
- 0.11697066775851084,
705
- 0.11953842798834562,
706
- 0.12213877222960187,
707
- 0.12477181756095049,
708
- 0.12743768043564743,
709
- 0.1301364766903643,
710
- 0.13286832155381798,
711
- 0.13563332965520566,
712
- 0.13843161503245183,
713
- 0.14126329114027164,
714
- 0.14412847085805777,
715
- 0.14702726649759498,
716
- 0.14995978981060856,
717
- 0.15292615199615017,
718
- 0.1559264637078274,
719
- 0.1589608350608804,
720
- 0.162029375639111,
721
- 0.1651321945016676,
722
- 0.16826940018969075,
723
- 0.1714411007328226,
724
- 0.17464740365558504,
725
- 0.17788841598362912,
726
- 0.18116424424986022,
727
- 0.184474994500441,
728
- 0.18782077230067787,
729
- 0.19120168274079138,
730
- 0.1946178304415758,
731
- 0.19806931955994886,
732
- 0.20155625379439707,
733
- 0.20507873639031693,
734
- 0.20863687014525575,
735
- 0.21223075741405523,
736
- 0.21586050011389926,
737
- 0.2195261997292692,
738
- 0.2232279573168085,
739
- 0.22696587351009836,
740
- 0.23074004852434915,
741
- 0.23455058216100522,
742
- 0.238397573812271,
743
- 0.24228112246555486,
744
- 0.24620132670783548,
745
- 0.25015828472995344,
746
- 0.25415209433082675,
747
- 0.2581828529215958,
748
- 0.26225065752969623,
749
- 0.26635560480286247,
750
- 0.2704977910130658,
751
- 0.27467731206038465,
752
- 0.2788942634768104,
753
- 0.2831487404299921,
754
- 0.2874408377269175,
755
- 0.29177064981753587,
756
- 0.2961382707983211,
757
- 0.3005437944157765,
758
- 0.3049873140698863,
759
- 0.30946892281750854,
760
- 0.31398871337571754,
761
- 0.31854677812509186,
762
- 0.32314320911295075,
763
- 0.3277780980565422,
764
- 0.33245153634617935,
765
- 0.33716361504833037,
766
- 0.3419144249086609,
767
- 0.3467040563550296,
768
- 0.35153259950043936,
769
- 0.3564001441459435,
770
- 0.3613067797835095,
771
- 0.3662525955988395,
772
- 0.3712376804741491,
773
- 0.3762621229909065,
774
- 0.38132601143253014,
775
- 0.386429433787049,
776
- 0.39157247774972326,
777
- 0.39675523072562685,
778
- 0.4019777798321958,
779
- 0.4072402119017367,
780
- 0.41254261348390375,
781
- 0.4178850708481375,
782
- 0.4232676699860717,
783
- 0.4286904966139066,
784
- 0.43415363617474895,
785
- 0.4396571738409188,
786
- 0.44520119451622786,
787
- 0.45078578283822346,
788
- 0.45641102318040466,
789
- 0.4620769996544071,
790
- 0.467783796112159,
791
- 0.47353149614800955,
792
- 0.4793201831008268,
793
- 0.4851499400560704,
794
- 0.4910208498478356,
795
- 0.4969329950608704,
796
- 0.5028864580325687,
797
- 0.5088813208549338,
798
- 0.5149176653765214,
799
- 0.5209955732043543,
800
- 0.5271151257058131,
801
- 0.5332764040105052,
802
- 0.5394794890121072,
803
- 0.5457244613701866,
804
- 0.5520114015120001,
805
- 0.5583403896342679,
806
- 0.5647115057049292,
807
- 0.5711248294648731,
808
- 0.5775804404296506,
809
- 0.5840784178911641,
810
- 0.5906188409193369,
811
- 0.5972017883637634,
812
- 0.6038273388553378,
813
- 0.6104955708078648,
814
- 0.6172065624196511,
815
- 0.6239603916750761,
816
- 0.6307571363461468,
817
- 0.6375968739940326,
818
- 0.6444796819705821,
819
- 0.6514056374198242,
820
- 0.6583748172794485,
821
- 0.665387298282272,
822
- 0.6724431569576875,
823
- 0.6795424696330938,
824
- 0.6866853124353135,
825
- 0.6938717612919899,
826
- 0.7011018919329731,
827
- 0.7083757798916868,
828
- 0.7156935005064807,
829
- 0.7230551289219693,
830
- 0.7304607400903537,
831
- 0.7379104087727308,
832
- 0.7454042095403874,
833
- 0.7529422167760779,
834
- 0.7605245046752924,
835
- 0.768151147247507,
836
- 0.7758222183174236,
837
- 0.7835377915261935,
838
- 0.7912979403326302,
839
- 0.799102738014409,
840
- 0.8069522576692516,
841
- 0.8148465722161012,
842
- 0.8227857543962835,
843
- 0.8307698767746546,
844
- 0.83879901174074,
845
- 0.846873231509858,
846
- 0.8549926081242338,
847
- 0.8631572134541023,
848
- 0.8713671191987972,
849
- 0.8796223968878317,
850
- 0.8879231178819663,
851
- 0.8962693533742664,
852
- 0.9046611743911496,
853
- 0.9130986517934192,
854
- 0.9215818562772946,
855
- 0.9301108583754237,
856
- 0.938685728457888,
857
- 0.9473065367331999,
858
- 0.9559733532492861,
859
- 0.9646862478944651,
860
- 0.9734452903984125,
861
- 0.9822505503331171,
862
- 0.9911020971138298,
863
- 1
864
- );
865
-
866
-
867
- // Calculate the luminance for a color.
868
- // Luminance is defined as a decimal value between 0 and 1
869
- // with "0" corresponding to "no brightness"
870
- // and "1" corresponding to "full brightness".
871
- //
872
- // See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
873
-
874
- @function daff-luminance($color) {
875
- $red-index: red($color) + 1;
876
- $green-index: green($color) + 1;
877
- $blue-index: blue($color) + 1;
878
-
879
- $red: nth($linear-channel-values, $red-index);
880
- $green: nth($linear-channel-values, $green-index);
881
- $blue: nth($linear-channel-values, $blue-index);
882
- @return 0.2126 * $red + 0.7152 * $green + 0.0722 * $blue;
883
- }
884
-
885
-
886
- // Calculate the contrast ratio between two colors.
887
- // See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
888
- @function daff-contrast-ratio($back, $front) {
889
- $back-lum: daff-luminance($back) + 0.05;
890
- $fore-lum: daff-luminance($front) + 0.05;
891
-
892
- @return max($back-lum, $fore-lum) / min($back-lum, $fore-lum);
893
- }
894
-
895
- // Precomputed linear color channel values, for use in contrast calculations.
896
- // See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
897
- //
898
- // Algorithm, for c in 0 to 255:
899
- // f(c) {
900
- // c = c / 255;
901
- // return c < 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
902
- // }
903
- //
904
- // This lookup table is needed since there is no `pow` in SASS.
905
- $linear-channel-values: (
906
- 0,
907
- 0.0003035269835488375,
908
- 0.000607053967097675,
909
- 0.0009105809506465125,
910
- 0.00121410793419535,
911
- 0.0015176349177441874,
912
- 0.001821161901293025,
913
- 0.0021246888848418626,
914
- 0.0024282158683907,
915
- 0.0027317428519395373,
916
- 0.003035269835488375,
917
- 0.003346535763899161,
918
- 0.003676507324047436,
919
- 0.004024717018496307,
920
- 0.004391442037410293,
921
- 0.004776953480693729,
922
- 0.005181516702338386,
923
- 0.005605391624202723,
924
- 0.006048833022857054,
925
- 0.006512090792594475,
926
- 0.006995410187265387,
927
- 0.007499032043226175,
928
- 0.008023192985384994,
929
- 0.008568125618069307,
930
- 0.009134058702220787,
931
- 0.00972121732023785,
932
- 0.010329823029626936,
933
- 0.010960094006488246,
934
- 0.011612245179743885,
935
- 0.012286488356915872,
936
- 0.012983032342173012,
937
- 0.013702083047289686,
938
- 0.014443843596092545,
939
- 0.01520851442291271,
940
- 0.01599629336550963,
941
- 0.016807375752887384,
942
- 0.017641954488384078,
943
- 0.018500220128379697,
944
- 0.019382360956935723,
945
- 0.0202885630566524,
946
- 0.021219010376003555,
947
- 0.022173884793387385,
948
- 0.02315336617811041,
949
- 0.024157632448504756,
950
- 0.02518685962736163,
951
- 0.026241221894849898,
952
- 0.027320891639074894,
953
- 0.028426039504420793,
954
- 0.0295568344378088,
955
- 0.030713443732993635,
956
- 0.03189603307301153,
957
- 0.033104766570885055,
958
- 0.03433980680868217,
959
- 0.03560131487502034,
960
- 0.03688945040110004,
961
- 0.0382043715953465,
962
- 0.03954623527673284,
963
- 0.04091519690685319,
964
- 0.042311410620809675,
965
- 0.043735029256973465,
966
- 0.04518620438567554,
967
- 0.046665086336880095,
968
- 0.04817182422688942,
969
- 0.04970656598412723,
970
- 0.05126945837404324,
971
- 0.052860647023180246,
972
- 0.05448027644244237,
973
- 0.05612849004960009,
974
- 0.05780543019106723,
975
- 0.0595112381629812,
976
- 0.06124605423161761,
977
- 0.06301001765316767,
978
- 0.06480326669290577,
979
- 0.06662593864377289,
980
- 0.06847816984440017,
981
- 0.07036009569659588,
982
- 0.07227185068231748,
983
- 0.07421356838014963,
984
- 0.07618538148130785,
985
- 0.07818742180518633,
986
- 0.08021982031446832,
987
- 0.0822827071298148,
988
- 0.08437621154414882,
989
- 0.08650046203654976,
990
- 0.08865558628577294,
991
- 0.09084171118340768,
992
- 0.09305896284668745,
993
- 0.0953074666309647,
994
- 0.09758734714186246,
995
- 0.09989872824711389,
996
- 0.10224173308810132,
997
- 0.10461648409110419,
998
- 0.10702310297826761,
999
- 0.10946171077829933,
1000
- 0.1119324278369056,
1001
- 0.11443537382697373,
1002
- 0.11697066775851084,
1003
- 0.11953842798834562,
1004
- 0.12213877222960187,
1005
- 0.12477181756095049,
1006
- 0.12743768043564743,
1007
- 0.1301364766903643,
1008
- 0.13286832155381798,
1009
- 0.13563332965520566,
1010
- 0.13843161503245183,
1011
- 0.14126329114027164,
1012
- 0.14412847085805777,
1013
- 0.14702726649759498,
1014
- 0.14995978981060856,
1015
- 0.15292615199615017,
1016
- 0.1559264637078274,
1017
- 0.1589608350608804,
1018
- 0.162029375639111,
1019
- 0.1651321945016676,
1020
- 0.16826940018969075,
1021
- 0.1714411007328226,
1022
- 0.17464740365558504,
1023
- 0.17788841598362912,
1024
- 0.18116424424986022,
1025
- 0.184474994500441,
1026
- 0.18782077230067787,
1027
- 0.19120168274079138,
1028
- 0.1946178304415758,
1029
- 0.19806931955994886,
1030
- 0.20155625379439707,
1031
- 0.20507873639031693,
1032
- 0.20863687014525575,
1033
- 0.21223075741405523,
1034
- 0.21586050011389926,
1035
- 0.2195261997292692,
1036
- 0.2232279573168085,
1037
- 0.22696587351009836,
1038
- 0.23074004852434915,
1039
- 0.23455058216100522,
1040
- 0.238397573812271,
1041
- 0.24228112246555486,
1042
- 0.24620132670783548,
1043
- 0.25015828472995344,
1044
- 0.25415209433082675,
1045
- 0.2581828529215958,
1046
- 0.26225065752969623,
1047
- 0.26635560480286247,
1048
- 0.2704977910130658,
1049
- 0.27467731206038465,
1050
- 0.2788942634768104,
1051
- 0.2831487404299921,
1052
- 0.2874408377269175,
1053
- 0.29177064981753587,
1054
- 0.2961382707983211,
1055
- 0.3005437944157765,
1056
- 0.3049873140698863,
1057
- 0.30946892281750854,
1058
- 0.31398871337571754,
1059
- 0.31854677812509186,
1060
- 0.32314320911295075,
1061
- 0.3277780980565422,
1062
- 0.33245153634617935,
1063
- 0.33716361504833037,
1064
- 0.3419144249086609,
1065
- 0.3467040563550296,
1066
- 0.35153259950043936,
1067
- 0.3564001441459435,
1068
- 0.3613067797835095,
1069
- 0.3662525955988395,
1070
- 0.3712376804741491,
1071
- 0.3762621229909065,
1072
- 0.38132601143253014,
1073
- 0.386429433787049,
1074
- 0.39157247774972326,
1075
- 0.39675523072562685,
1076
- 0.4019777798321958,
1077
- 0.4072402119017367,
1078
- 0.41254261348390375,
1079
- 0.4178850708481375,
1080
- 0.4232676699860717,
1081
- 0.4286904966139066,
1082
- 0.43415363617474895,
1083
- 0.4396571738409188,
1084
- 0.44520119451622786,
1085
- 0.45078578283822346,
1086
- 0.45641102318040466,
1087
- 0.4620769996544071,
1088
- 0.467783796112159,
1089
- 0.47353149614800955,
1090
- 0.4793201831008268,
1091
- 0.4851499400560704,
1092
- 0.4910208498478356,
1093
- 0.4969329950608704,
1094
- 0.5028864580325687,
1095
- 0.5088813208549338,
1096
- 0.5149176653765214,
1097
- 0.5209955732043543,
1098
- 0.5271151257058131,
1099
- 0.5332764040105052,
1100
- 0.5394794890121072,
1101
- 0.5457244613701866,
1102
- 0.5520114015120001,
1103
- 0.5583403896342679,
1104
- 0.5647115057049292,
1105
- 0.5711248294648731,
1106
- 0.5775804404296506,
1107
- 0.5840784178911641,
1108
- 0.5906188409193369,
1109
- 0.5972017883637634,
1110
- 0.6038273388553378,
1111
- 0.6104955708078648,
1112
- 0.6172065624196511,
1113
- 0.6239603916750761,
1114
- 0.6307571363461468,
1115
- 0.6375968739940326,
1116
- 0.6444796819705821,
1117
- 0.6514056374198242,
1118
- 0.6583748172794485,
1119
- 0.665387298282272,
1120
- 0.6724431569576875,
1121
- 0.6795424696330938,
1122
- 0.6866853124353135,
1123
- 0.6938717612919899,
1124
- 0.7011018919329731,
1125
- 0.7083757798916868,
1126
- 0.7156935005064807,
1127
- 0.7230551289219693,
1128
- 0.7304607400903537,
1129
- 0.7379104087727308,
1130
- 0.7454042095403874,
1131
- 0.7529422167760779,
1132
- 0.7605245046752924,
1133
- 0.768151147247507,
1134
- 0.7758222183174236,
1135
- 0.7835377915261935,
1136
- 0.7912979403326302,
1137
- 0.799102738014409,
1138
- 0.8069522576692516,
1139
- 0.8148465722161012,
1140
- 0.8227857543962835,
1141
- 0.8307698767746546,
1142
- 0.83879901174074,
1143
- 0.846873231509858,
1144
- 0.8549926081242338,
1145
- 0.8631572134541023,
1146
- 0.8713671191987972,
1147
- 0.8796223968878317,
1148
- 0.8879231178819663,
1149
- 0.8962693533742664,
1150
- 0.9046611743911496,
1151
- 0.9130986517934192,
1152
- 0.9215818562772946,
1153
- 0.9301108583754237,
1154
- 0.938685728457888,
1155
- 0.9473065367331999,
1156
- 0.9559733532492861,
1157
- 0.9646862478944651,
1158
- 0.9734452903984125,
1159
- 0.9822505503331171,
1160
- 0.9911020971138298,
1161
- 1
1162
- );
1163
-
1164
-
1165
- // Calculate the luminance for a color.
1166
- // Luminance is defined as a decimal value between 0 and 1
1167
- // with "0" corresponding to "no brightness"
1168
- // and "1" corresponding to "full brightness".
1169
- //
1170
- // See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
1171
-
1172
- @function daff-luminance($color) {
1173
- $red-index: red($color) + 1;
1174
- $green-index: green($color) + 1;
1175
- $blue-index: blue($color) + 1;
1176
-
1177
- $red: nth($linear-channel-values, $red-index);
1178
- $green: nth($linear-channel-values, $green-index);
1179
- $blue: nth($linear-channel-values, $blue-index);
1180
- @return 0.2126 * $red + 0.7152 * $green + 0.0722 * $blue;
1181
- }
1182
-
1183
-
1184
- // Calculate the contrast ratio between two colors.
1185
- // See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
1186
- @function daff-contrast-ratio($back, $front) {
1187
- $back-lum: daff-luminance($back) + 0.05;
1188
- $fore-lum: daff-luminance($front) + 0.05;
1189
-
1190
- @return max($back-lum, $fore-lum) / min($back-lum, $fore-lum);
1191
- }
1192
-
1193
- //
1194
- // Takes a color palette and retrieves the hue from the palette
1195
- // If no color is selected, it will retrieve the default
1196
- // color from the palette
1197
- //
1198
- // @usage
1199
- // ```
1200
- // daff-color($daff-yellow, 60);
1201
- // ```
1202
- @function daff-color($palette, $color: 'default') {
1203
- @if (not(map-has-key($palette, $color))) {
1204
- @error 'Color: `#{$color}` does not exist in palette';
1205
- }
1206
-
1207
- @return map-get($palette, $color);
1208
- }
1209
-
1210
- // Base colors
1211
- $daff-white: #ffffff;
1212
- $error: #dd0000;
1213
-
1214
- // 60 apart passes AAA level for any size text (except for 10/70)
1215
- // 50 apart passes AA level for any size text (except for 10/60)
1216
-
1217
- $daff-blue: (
1218
- 10: #ebf1ff,
1219
- 20: #c4d8ff,
1220
- 30: #9dbeff,
1221
- 40: #79a7ff,
1222
- 50: #548fff,
1223
- 60: #1f66ff,
1224
- 70: #093cf3,
1225
- 80: #001bcb,
1226
- 90: #00098a,
1227
- 100: #000033
1228
- );
1229
-
1230
- $daff-primary: $daff-blue;
1231
-
1232
- $daff-purple: (
1233
- 10: #ebebff,
1234
- 20: #d4d3ff,
1235
- 30: #b7b4ff,
1236
- 40: #a19bff,
1237
- 50: #8b82ff,
1238
- 60: #6a57ff,
1239
- 70: #5631f3,
1240
- 80: #3c13bd,
1241
- 90: #2c068a,
1242
- 100: #110033
1243
- );
1244
-
1245
- $daff-accent: $daff-purple;
1246
-
1247
- $daff-turquoise: (
1248
- 10: #d6fcea,
1249
- 20: #9dfbd3,
1250
- 30: #51e1ae,
1251
- 40: #37c193,
1252
- 50: #1fa67c,
1253
- 60: #00835f,
1254
- 70: #0f654a,
1255
- 80: #104b37,
1256
- 90: #0d3426,
1257
- 100: #082218
1258
- );
1259
-
1260
- $daff-yellow: (
1261
- 10: #fffaeb,
1262
- 20: #fff1c2,
1263
- 30: #ffe799,
1264
- 40: #ffde70,
1265
- 50: #ffd447,
1266
- 60: #ffc810,
1267
- 70: #f5bc00,
1268
- 80: #cc9c00,
1269
- 90: #a37d00,
1270
- 100: #7a5e00
1271
- );
1272
-
1273
- $daff-red: (
1274
- 10: #fcf1f1,
1275
- 20: #fae0e0,
1276
- 30: #f8babb,
1277
- 40: #f88d8f,
1278
- 50: #fb5d61,
1279
- 60: #ec0019,
1280
- 70: #b30e19,
1281
- 80: #871016,
1282
- 90: #5e0c10,
1283
- 100: #3f0809,
1284
- );
1285
-
1286
- $daff-bronze: (
1287
- 10: #fcf2eb,
1288
- 20: #f7dac6,
1289
- 30: #f2c093,
1290
- 40: #e49d40,
1291
- 50: #d2801a,
1292
- 60: #b36200,
1293
- 70: #955400,
1294
- 80: #704000,
1295
- 90: #462900,
1296
- 100: #1a0f00,
1297
- );
1298
-
1299
- $daff-green: (
1300
- 10: #c4ffcc,
1301
- 20: #6aff86,
1302
- 30: #00db57,
1303
- 40: #13c049,
1304
- 50: #00aa3c,
1305
- 60: #00852e,
1306
- 70: #006b23,
1307
- 80: #004b17,
1308
- 90: #0c3515,
1309
- 100: #07230d,
1310
- );
1311
-
1312
- $daff-gray: (
1313
- 0: #ffffff,
1314
- 10: #fafafa,
1315
- 20: #e8e8e8,
1316
- 30: #d3d3d3,
1317
- 40: #b6b6b6,
1318
- 50: #949494,
1319
- 60: #767676,
1320
- 70: #5e5e5e,
1321
- 80: #474747,
1322
- 90: #323232,
1323
- 100: #1a1a1a,
1324
- 110: #070707
1325
- );
1326
-
1327
-
1328
- // @docs
1329
- //
1330
- // Given a color, get the font color that would be
1331
- // easily visible on top of that color
1332
- //
1333
- // For an interesting read, see more about the topic:
1334
- // https://robots.thoughtbot.com/closer-look-color-lightness
1335
- //
1336
- // Based on the code outlined by Sergio Gomes here:
1337
- // https://medium.com/dev-channel/using-sass-to-automatically-pick-text-colors-4ba7645d2796
1338
- //
1339
- // @usage
1340
- // ```
1341
- // daff-text-contrast("#777777")
1342
- // ```
1343
- @function daff-text-contrast(
1344
- $color,
1345
- $black: daff-color($daff-gray, 110),
1346
- $white: $daff-white
1347
- ) {
1348
- $light-contrast: daff-contrast-ratio($color, $white);
1349
- $dark-contrast: daff-contrast-ratio($color, $black);
1350
-
1351
- @if ($light-contrast > $dark-contrast) {
1352
- @return $white;
1353
- }
1354
- @else {
1355
- @return $black;
1356
- }
1357
- }
1358
-
1359
-
1360
- //
1361
- // Takes a color palette and retrieves the hue from the palette
1362
- // If no color is selected, it will retrieve the default
1363
- // color from the palette
1364
- //
1365
- // @usage
1366
- // ```
1367
- // daff-color($daff-yellow, 60);
1368
- // ```
1369
- @function daff-color($palette, $color: 'default') {
1370
- @if (not(map-has-key($palette, $color))) {
1371
- @error 'Color: `#{$color}` does not exist in palette';
1372
- }
1373
-
1374
- @return map-get($palette, $color);
1375
- }
1376
-
1377
- // Precomputed linear color channel values, for use in contrast calculations.
1378
- // See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
1379
- //
1380
- // Algorithm, for c in 0 to 255:
1381
- // f(c) {
1382
- // c = c / 255;
1383
- // return c < 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
1384
- // }
1385
- //
1386
- // This lookup table is needed since there is no `pow` in SASS.
1387
- $linear-channel-values: (
1388
- 0,
1389
- 0.0003035269835488375,
1390
- 0.000607053967097675,
1391
- 0.0009105809506465125,
1392
- 0.00121410793419535,
1393
- 0.0015176349177441874,
1394
- 0.001821161901293025,
1395
- 0.0021246888848418626,
1396
- 0.0024282158683907,
1397
- 0.0027317428519395373,
1398
- 0.003035269835488375,
1399
- 0.003346535763899161,
1400
- 0.003676507324047436,
1401
- 0.004024717018496307,
1402
- 0.004391442037410293,
1403
- 0.004776953480693729,
1404
- 0.005181516702338386,
1405
- 0.005605391624202723,
1406
- 0.006048833022857054,
1407
- 0.006512090792594475,
1408
- 0.006995410187265387,
1409
- 0.007499032043226175,
1410
- 0.008023192985384994,
1411
- 0.008568125618069307,
1412
- 0.009134058702220787,
1413
- 0.00972121732023785,
1414
- 0.010329823029626936,
1415
- 0.010960094006488246,
1416
- 0.011612245179743885,
1417
- 0.012286488356915872,
1418
- 0.012983032342173012,
1419
- 0.013702083047289686,
1420
- 0.014443843596092545,
1421
- 0.01520851442291271,
1422
- 0.01599629336550963,
1423
- 0.016807375752887384,
1424
- 0.017641954488384078,
1425
- 0.018500220128379697,
1426
- 0.019382360956935723,
1427
- 0.0202885630566524,
1428
- 0.021219010376003555,
1429
- 0.022173884793387385,
1430
- 0.02315336617811041,
1431
- 0.024157632448504756,
1432
- 0.02518685962736163,
1433
- 0.026241221894849898,
1434
- 0.027320891639074894,
1435
- 0.028426039504420793,
1436
- 0.0295568344378088,
1437
- 0.030713443732993635,
1438
- 0.03189603307301153,
1439
- 0.033104766570885055,
1440
- 0.03433980680868217,
1441
- 0.03560131487502034,
1442
- 0.03688945040110004,
1443
- 0.0382043715953465,
1444
- 0.03954623527673284,
1445
- 0.04091519690685319,
1446
- 0.042311410620809675,
1447
- 0.043735029256973465,
1448
- 0.04518620438567554,
1449
- 0.046665086336880095,
1450
- 0.04817182422688942,
1451
- 0.04970656598412723,
1452
- 0.05126945837404324,
1453
- 0.052860647023180246,
1454
- 0.05448027644244237,
1455
- 0.05612849004960009,
1456
- 0.05780543019106723,
1457
- 0.0595112381629812,
1458
- 0.06124605423161761,
1459
- 0.06301001765316767,
1460
- 0.06480326669290577,
1461
- 0.06662593864377289,
1462
- 0.06847816984440017,
1463
- 0.07036009569659588,
1464
- 0.07227185068231748,
1465
- 0.07421356838014963,
1466
- 0.07618538148130785,
1467
- 0.07818742180518633,
1468
- 0.08021982031446832,
1469
- 0.0822827071298148,
1470
- 0.08437621154414882,
1471
- 0.08650046203654976,
1472
- 0.08865558628577294,
1473
- 0.09084171118340768,
1474
- 0.09305896284668745,
1475
- 0.0953074666309647,
1476
- 0.09758734714186246,
1477
- 0.09989872824711389,
1478
- 0.10224173308810132,
1479
- 0.10461648409110419,
1480
- 0.10702310297826761,
1481
- 0.10946171077829933,
1482
- 0.1119324278369056,
1483
- 0.11443537382697373,
1484
- 0.11697066775851084,
1485
- 0.11953842798834562,
1486
- 0.12213877222960187,
1487
- 0.12477181756095049,
1488
- 0.12743768043564743,
1489
- 0.1301364766903643,
1490
- 0.13286832155381798,
1491
- 0.13563332965520566,
1492
- 0.13843161503245183,
1493
- 0.14126329114027164,
1494
- 0.14412847085805777,
1495
- 0.14702726649759498,
1496
- 0.14995978981060856,
1497
- 0.15292615199615017,
1498
- 0.1559264637078274,
1499
- 0.1589608350608804,
1500
- 0.162029375639111,
1501
- 0.1651321945016676,
1502
- 0.16826940018969075,
1503
- 0.1714411007328226,
1504
- 0.17464740365558504,
1505
- 0.17788841598362912,
1506
- 0.18116424424986022,
1507
- 0.184474994500441,
1508
- 0.18782077230067787,
1509
- 0.19120168274079138,
1510
- 0.1946178304415758,
1511
- 0.19806931955994886,
1512
- 0.20155625379439707,
1513
- 0.20507873639031693,
1514
- 0.20863687014525575,
1515
- 0.21223075741405523,
1516
- 0.21586050011389926,
1517
- 0.2195261997292692,
1518
- 0.2232279573168085,
1519
- 0.22696587351009836,
1520
- 0.23074004852434915,
1521
- 0.23455058216100522,
1522
- 0.238397573812271,
1523
- 0.24228112246555486,
1524
- 0.24620132670783548,
1525
- 0.25015828472995344,
1526
- 0.25415209433082675,
1527
- 0.2581828529215958,
1528
- 0.26225065752969623,
1529
- 0.26635560480286247,
1530
- 0.2704977910130658,
1531
- 0.27467731206038465,
1532
- 0.2788942634768104,
1533
- 0.2831487404299921,
1534
- 0.2874408377269175,
1535
- 0.29177064981753587,
1536
- 0.2961382707983211,
1537
- 0.3005437944157765,
1538
- 0.3049873140698863,
1539
- 0.30946892281750854,
1540
- 0.31398871337571754,
1541
- 0.31854677812509186,
1542
- 0.32314320911295075,
1543
- 0.3277780980565422,
1544
- 0.33245153634617935,
1545
- 0.33716361504833037,
1546
- 0.3419144249086609,
1547
- 0.3467040563550296,
1548
- 0.35153259950043936,
1549
- 0.3564001441459435,
1550
- 0.3613067797835095,
1551
- 0.3662525955988395,
1552
- 0.3712376804741491,
1553
- 0.3762621229909065,
1554
- 0.38132601143253014,
1555
- 0.386429433787049,
1556
- 0.39157247774972326,
1557
- 0.39675523072562685,
1558
- 0.4019777798321958,
1559
- 0.4072402119017367,
1560
- 0.41254261348390375,
1561
- 0.4178850708481375,
1562
- 0.4232676699860717,
1563
- 0.4286904966139066,
1564
- 0.43415363617474895,
1565
- 0.4396571738409188,
1566
- 0.44520119451622786,
1567
- 0.45078578283822346,
1568
- 0.45641102318040466,
1569
- 0.4620769996544071,
1570
- 0.467783796112159,
1571
- 0.47353149614800955,
1572
- 0.4793201831008268,
1573
- 0.4851499400560704,
1574
- 0.4910208498478356,
1575
- 0.4969329950608704,
1576
- 0.5028864580325687,
1577
- 0.5088813208549338,
1578
- 0.5149176653765214,
1579
- 0.5209955732043543,
1580
- 0.5271151257058131,
1581
- 0.5332764040105052,
1582
- 0.5394794890121072,
1583
- 0.5457244613701866,
1584
- 0.5520114015120001,
1585
- 0.5583403896342679,
1586
- 0.5647115057049292,
1587
- 0.5711248294648731,
1588
- 0.5775804404296506,
1589
- 0.5840784178911641,
1590
- 0.5906188409193369,
1591
- 0.5972017883637634,
1592
- 0.6038273388553378,
1593
- 0.6104955708078648,
1594
- 0.6172065624196511,
1595
- 0.6239603916750761,
1596
- 0.6307571363461468,
1597
- 0.6375968739940326,
1598
- 0.6444796819705821,
1599
- 0.6514056374198242,
1600
- 0.6583748172794485,
1601
- 0.665387298282272,
1602
- 0.6724431569576875,
1603
- 0.6795424696330938,
1604
- 0.6866853124353135,
1605
- 0.6938717612919899,
1606
- 0.7011018919329731,
1607
- 0.7083757798916868,
1608
- 0.7156935005064807,
1609
- 0.7230551289219693,
1610
- 0.7304607400903537,
1611
- 0.7379104087727308,
1612
- 0.7454042095403874,
1613
- 0.7529422167760779,
1614
- 0.7605245046752924,
1615
- 0.768151147247507,
1616
- 0.7758222183174236,
1617
- 0.7835377915261935,
1618
- 0.7912979403326302,
1619
- 0.799102738014409,
1620
- 0.8069522576692516,
1621
- 0.8148465722161012,
1622
- 0.8227857543962835,
1623
- 0.8307698767746546,
1624
- 0.83879901174074,
1625
- 0.846873231509858,
1626
- 0.8549926081242338,
1627
- 0.8631572134541023,
1628
- 0.8713671191987972,
1629
- 0.8796223968878317,
1630
- 0.8879231178819663,
1631
- 0.8962693533742664,
1632
- 0.9046611743911496,
1633
- 0.9130986517934192,
1634
- 0.9215818562772946,
1635
- 0.9301108583754237,
1636
- 0.938685728457888,
1637
- 0.9473065367331999,
1638
- 0.9559733532492861,
1639
- 0.9646862478944651,
1640
- 0.9734452903984125,
1641
- 0.9822505503331171,
1642
- 0.9911020971138298,
1643
- 1
1644
- );
1645
-
1646
-
1647
- // Calculate the luminance for a color.
1648
- // Luminance is defined as a decimal value between 0 and 1
1649
- // with "0" corresponding to "no brightness"
1650
- // and "1" corresponding to "full brightness".
1651
- //
1652
- // See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
1653
-
1654
- @function daff-luminance($color) {
1655
- $red-index: red($color) + 1;
1656
- $green-index: green($color) + 1;
1657
- $blue-index: blue($color) + 1;
1658
-
1659
- $red: nth($linear-channel-values, $red-index);
1660
- $green: nth($linear-channel-values, $green-index);
1661
- $blue: nth($linear-channel-values, $blue-index);
1662
- @return 0.2126 * $red + 0.7152 * $green + 0.0722 * $blue;
1663
- }
1664
-
1665
-
1666
- //
1667
- // Take a numeric map and sort it.
1668
- //
1669
- // https://gist.github.com/Jakobud/a0ac11e80a1de453cd86f0d3fc0a1410
1670
- // Credit to: https://gist.github.com/iamandrewluca
1671
- //
1672
- @function _daff-illuminate-sort($map) {
1673
- // Transform map to zipped list
1674
- $keys: ();
1675
- $values: ();
1676
-
1677
- @each $key, $val in $map {
1678
- $keys: append($keys, $key);
1679
- $values: append($values, $val);
1680
- }
1681
-
1682
- $list: zip($keys, $values);
1683
-
1684
- $sorted-map: ();
1685
-
1686
- @while length($list) > 0 {
1687
- // Find smallest pair
1688
- $smallest-pair: nth($list, 1);
1689
-
1690
- @each $pair in $list {
1691
- $value: nth($pair, 2);
1692
- $smallest-value: nth($smallest-pair, 2);
1693
-
1694
- @if $value < $smallest-value {
1695
- $smallest-pair: $pair;
1696
- }
1697
- }
1698
-
1699
- // Add smallest pair to sorted map
1700
- $key: nth($smallest-pair, 1);
1701
- $value: nth($smallest-pair, 2);
1702
- $sorted-map: map-merge(
1703
- $sorted-map,
1704
- (
1705
- $key: $value
1706
- )
1707
- );
1708
-
1709
- // Remove from list smallest pair
1710
- $smallest-pair-index: index($list, $smallest-pair);
1711
- $new-list: ();
1712
-
1713
- @for $i from 1 through length($list) {
1714
- @if $i != $smallest-pair-index {
1715
- $new-list: append($new-list, nth($list, $i), 'space');
1716
- }
1717
- }
1718
-
1719
- $list: $new-list;
1720
- }
1721
-
1722
- @return $sorted-map;
1723
- }
1724
-
1725
- // Given a map of key, luminance pairs, find the key
1726
- // of the value that is "nth" away from zero.
1727
- //
1728
- // @param $map: a map of key, luminance pairs,
1729
- // @param $nth: nth steps away from zero
1730
- @function _daff-illuminate-get-key($map, $nth: 1) {
1731
- //Cap off "nth" to prevent going out-of-bounds.
1732
- @if ($nth > length($map)) {
1733
- $nth: length(map);
1734
- }
1735
-
1736
- $map: _daff-illuminate-sort($map);
1737
- @return nth(nth($map, $nth), 1);
1738
- }
1739
-
1740
- // Takes a $color and palette and returns the color in
1741
- // the palette which would "illuminate" against that color.
1742
- //
1743
- // @usage
1744
- // ```
1745
- // daff-illuminate($palette);
1746
- // ```
1747
- //
1748
- @function daff-illuminate($color, $palette, $nth: 1) {
1749
- $luminance-map: ();
1750
-
1751
- //Validate
1752
- @each $key, $palette-color in $palette {
1753
- @if (type-of($key) == 'string') {
1754
- $palette: map-remove($palette, $key);
1755
- }
1756
- }
1757
-
1758
- //Transform into usable values
1759
- @each $key, $palette-color in $palette {
1760
- $luminance-map: map-merge(
1761
- $luminance-map,
1762
- (
1763
- $key: (
1764
- daff-luminance($palette-color) - daff-luminance($color)
1765
- )
1766
- )
1767
- );
1768
- }
1769
-
1770
-
1771
- //Calculate which color to get
1772
- $brighter-colors: ();
1773
- $darker-colors: ();
1774
-
1775
- @each $key, $luminance in $luminance-map {
1776
- @if ($luminance > 0) {
1777
- $brighter-colors: map-merge(
1778
- $brighter-colors,
1779
- (
1780
- $key: $luminance
1781
- )
1782
- );
1783
- }
1784
-
1785
- @if ($luminance < 0) {
1786
- $darker-colors: map-merge(
1787
- $darker-colors,
1788
- (
1789
- $key: abs($luminance)
1790
- )
1791
- );
1792
- }
1793
- }
1794
-
1795
- $key: null;
1796
-
1797
- @if (daff-luminance($color) >= 0.5) {
1798
- //If the color is bright
1799
- $key: _daff-illuminate-get-key($darker-colors, $nth);
1800
- }
1801
- @else {
1802
- //If the color is dark
1803
- $key: _daff-illuminate-get-key($brighter-colors, $nth);
1804
- }
1805
-
1806
- @return map-get($palette, $key);
1807
- }
1808
-
1809
- //
1810
- // Takes a color palette and retrieves the hue from the palette
1811
- // If no color is selected, it will retrieve the default
1812
- // color from the palette
1813
- //
1814
- // @usage
1815
- // ```
1816
- // daff-color($daff-yellow, 60);
1817
- // ```
1818
- @function daff-color($palette, $color: 'default') {
1819
- @if (not(map-has-key($palette, $color))) {
1820
- @error 'Color: `#{$color}` does not exist in palette';
1821
- }
1822
-
1823
- @return map-get($palette, $color);
1824
- }
1825
-
1826
-
1827
- // @docs
1828
- //
1829
- // Takes a color palette configures some sane defaults
1830
- // Will set the "default" to 60 if $hue isn't specified
1831
- //
1832
- // @usage
1833
- // ```
1834
- // daff-configure-palette($daff-yellow, $hue);
1835
- // ```
1836
- @function daff-configure-palette($color-palette, $hue: 60) {
1837
- @return map-merge(
1838
- $color-palette,
1839
- (
1840
- 'default': daff-color($color-palette, $hue)
1841
- )
1842
- );
1843
- }
1844
-
1845
- // Base colors
1846
- $daff-white: #ffffff;
1847
- $error: #dd0000;
1848
-
1849
- // 60 apart passes AAA level for any size text (except for 10/70)
1850
- // 50 apart passes AA level for any size text (except for 10/60)
1851
-
1852
- $daff-blue: (
1853
- 10: #ebf1ff,
1854
- 20: #c4d8ff,
1855
- 30: #9dbeff,
1856
- 40: #79a7ff,
1857
- 50: #548fff,
1858
- 60: #1f66ff,
1859
- 70: #093cf3,
1860
- 80: #001bcb,
1861
- 90: #00098a,
1862
- 100: #000033
1863
- );
1864
-
1865
- $daff-primary: $daff-blue;
1866
-
1867
- $daff-purple: (
1868
- 10: #ebebff,
1869
- 20: #d4d3ff,
1870
- 30: #b7b4ff,
1871
- 40: #a19bff,
1872
- 50: #8b82ff,
1873
- 60: #6a57ff,
1874
- 70: #5631f3,
1875
- 80: #3c13bd,
1876
- 90: #2c068a,
1877
- 100: #110033
1878
- );
1879
-
1880
- $daff-accent: $daff-purple;
1881
-
1882
- $daff-turquoise: (
1883
- 10: #d6fcea,
1884
- 20: #9dfbd3,
1885
- 30: #51e1ae,
1886
- 40: #37c193,
1887
- 50: #1fa67c,
1888
- 60: #00835f,
1889
- 70: #0f654a,
1890
- 80: #104b37,
1891
- 90: #0d3426,
1892
- 100: #082218
1893
- );
1894
-
1895
- $daff-yellow: (
1896
- 10: #fffaeb,
1897
- 20: #fff1c2,
1898
- 30: #ffe799,
1899
- 40: #ffde70,
1900
- 50: #ffd447,
1901
- 60: #ffc810,
1902
- 70: #f5bc00,
1903
- 80: #cc9c00,
1904
- 90: #a37d00,
1905
- 100: #7a5e00
1906
- );
1907
-
1908
- $daff-red: (
1909
- 10: #fcf1f1,
1910
- 20: #fae0e0,
1911
- 30: #f8babb,
1912
- 40: #f88d8f,
1913
- 50: #fb5d61,
1914
- 60: #ec0019,
1915
- 70: #b30e19,
1916
- 80: #871016,
1917
- 90: #5e0c10,
1918
- 100: #3f0809,
1919
- );
1920
-
1921
- $daff-bronze: (
1922
- 10: #fcf2eb,
1923
- 20: #f7dac6,
1924
- 30: #f2c093,
1925
- 40: #e49d40,
1926
- 50: #d2801a,
1927
- 60: #b36200,
1928
- 70: #955400,
1929
- 80: #704000,
1930
- 90: #462900,
1931
- 100: #1a0f00,
1932
- );
1933
-
1934
- $daff-green: (
1935
- 10: #c4ffcc,
1936
- 20: #6aff86,
1937
- 30: #00db57,
1938
- 40: #13c049,
1939
- 50: #00aa3c,
1940
- 60: #00852e,
1941
- 70: #006b23,
1942
- 80: #004b17,
1943
- 90: #0c3515,
1944
- 100: #07230d,
1945
- );
1946
-
1947
- $daff-gray: (
1948
- 0: #ffffff,
1949
- 10: #fafafa,
1950
- 20: #e8e8e8,
1951
- 30: #d3d3d3,
1952
- 40: #b6b6b6,
1953
- 50: #949494,
1954
- 60: #767676,
1955
- 70: #5e5e5e,
1956
- 80: #474747,
1957
- 90: #323232,
1958
- 100: #1a1a1a,
1959
- 110: #070707
1960
- );
1961
-
1962
- //
1963
- // Takes a color palette and retrieves the hue from the palette
1964
- // If no color is selected, it will retrieve the default
1965
- // color from the palette
1966
- //
1967
- // @usage
1968
- // ```
1969
- // daff-color($daff-yellow, 60);
1970
- // ```
1971
- @function daff-color($palette, $color: 'default') {
1972
- @if (not(map-has-key($palette, $color))) {
1973
- @error 'Color: `#{$color}` does not exist in palette';
1974
- }
1975
-
1976
- @return map-get($palette, $color);
1977
- }
1978
-
1979
- //
1980
- // Takes a color palette and retrieves the hue from the palette
1981
- // If no color is selected, it will retrieve the default
1982
- // color from the palette
1983
- //
1984
- // @usage
1985
- // ```
1986
- // daff-color($daff-yellow, 60);
1987
- // ```
1988
- @function daff-color($palette, $color: 'default') {
1989
- @if (not(map-has-key($palette, $color))) {
1990
- @error 'Color: `#{$color}` does not exist in palette';
1991
- }
1992
-
1993
- @return map-get($palette, $color);
1994
- }
1995
-
1996
-
1997
- // @docs
1998
- //
1999
- // Takes a color palette configures some sane defaults
2000
- // Will set the "default" to 60 if $hue isn't specified
2001
- //
2002
- // @usage
2003
- // ```
2004
- // daff-configure-palette($daff-yellow, $hue);
2005
- // ```
2006
- @function daff-configure-palette($color-palette, $hue: 60) {
2007
- @return map-merge(
2008
- $color-palette,
2009
- (
2010
- 'default': daff-color($color-palette, $hue)
2011
- )
2012
- );
2013
- }
2014
-
2015
-
2016
- $daff-light-theme: (
2017
- 'font-color': daff-color($daff-gray, 110),
2018
- 'base': daff-color($daff-gray, 0),
2019
- 'base-contrast': daff-color($daff-gray, 110),
2020
- 'white': daff-color($daff-gray, 0),
2021
- 'black': daff-color($daff-gray, 110),
2022
- 'gray': daff-configure-palette($daff-gray, 60)
2023
- );
2024
-
2025
- $daff-dark-theme: (
2026
- 'font-color': daff-color($daff-gray, 0),
2027
- 'base': daff-color($daff-gray, 100),
2028
- 'base-contrast': daff-color($daff-gray, 0),
2029
- 'white': daff-color($daff-gray, 0),
2030
- 'black': daff-color($daff-gray, 110),
2031
- 'gray': daff-configure-palette($daff-gray, 60)
2032
- );
2033
-
2034
- $supported-theme-types: (
2035
- 'light': $daff-light-theme,
2036
- 'dark': $daff-dark-theme
2037
- );
2038
-
2039
- // @docs
2040
- //
2041
- // Create a theme object given some initial settings
2042
- //
2043
- // @usage
2044
- // ```
2045
- // daff-configure-theme($daff-yellow, $daff-blue, $daff-purple)
2046
- // ```
2047
- @function daff-configure-theme(
2048
- $primary,
2049
- $secondary,
2050
- $tertiary,
2051
- $type: 'light'
2052
- ) {
2053
- @return (
2054
- 'primary': $primary,
2055
- 'secondary': $secondary,
2056
- 'tertiary': $tertiary,
2057
- 'core': daff-build-theme-core($type)
2058
- );
2059
- }
2060
-
2061
- //
2062
- // @docs
2063
- //
2064
- // Create a core theme given a theme type
2065
- // $type | ThemeType : "light" | "dark"
2066
- //
2067
- // ```
2068
- // @usage
2069
- // daff-build-theme-core("light")
2070
- // ```
2071
- @function daff-build-theme-core($type: 'light') {
2072
- $error-msg: 'is not a valid theme type - valid types:';
2073
- @if (not map-has-key($supported-theme-types, $type)) {
2074
- @error '`#{$type}` `#{$error-msg}` `#{map-keys($supported-theme-types)}`';
2075
- }
2076
-
2077
- @return map-get($supported-theme-types, $type);
2078
- }
2079
-
2080
- @mixin daff-theme-css-variables($theme) {
2081
- $base: daff-map-deep-get($theme, 'core.base');
2082
- $base-contrast: daff-map-deep-get($theme, 'core.base-contrast');
2083
- $primary: map-get($theme, primary);
2084
- $secondary: map-get($theme, secondary);
2085
- $tertiary: map-get($theme, tertiary);
2086
- $white: daff-map-deep-get($theme, 'core.white');
2087
- $black: daff-map-deep-get($theme, 'core.black');
2088
- $gray: daff-map-deep-get($theme, 'core.gray');
2089
-
2090
- // @docs
2091
- //
2092
- // Global theming css variables
2093
- :root {
2094
- --daff-theme-rgb: #{red($base), green($base), blue($base)};
2095
- --daff-theme-contrast-rgb: #{red($base-contrast), green($base-contrast), blue($base-contrast)};
2096
- --daff-theme: #{$base};
2097
- --daff-theme-contrast: #{$base-contrast};
2098
- --daff-theme-primary: #{daff-color($primary)};
2099
- --daff-theme-secondary: #{daff-color($secondary)};
2100
- --daff-theme-tertiary: #{daff-color($tertiary)};
2101
- --daff-theme-warn: #{daff-color($daff-bronze, 60)};
2102
- --daff-theme-success: #{daff-color($daff-green, 60)};
2103
- --daff-theme-danger: #{daff-color($daff-red, 60)};
2104
- --daff-theme-white: #{$white};
2105
- --daff-theme-black: #{$black};
2106
- --daff-theme-gray: #{daff-color($gray)};
2107
- }
2108
- };
2109
-
2110
-
2111
- @mixin daff-button-theme-variant(
2112
- $base-color,
2113
- $hover-color,
2114
- $active-color: $hover-color
2115
- ) {
2116
- // @if daff-contrast-ratio($base-color, daff-text-contrast($base-color)) < 4.5 {
2117
- // @error 'Button Initial State: ' + map-get($wcag-aa-errors, 'text-contrast');
2118
- // }
2119
-
2120
- // @if daff-contrast-ratio($hover-color, daff-text-contrast($base-color)) < 4.5 {
2121
- // @error 'Button Hover State: ' + map-get($wcag-aa-errors, 'text-contrast');
2122
- // }
2123
-
2124
- // @if daff-contrast-ratio($active-color, daff-text-contrast($base-color)) < 4.5 {
2125
- // @error 'Button Active State: ' + map-get($wcag-aa-errors, 'text-contrast');
2126
- // }
2127
- background-color: $base-color;
2128
- border: 1px solid $base-color;
2129
- color: daff-text-contrast($base-color);
2130
-
2131
- &:hover,
2132
- &:focus {
2133
- background-color: $hover-color;
2134
- border: 1px solid $hover-color;
2135
- color: daff-text-contrast($hover-color);
2136
- }
2137
-
2138
- &:active {
2139
- background-color: $active-color;
2140
- border: 1px solid $active-color;
2141
- color: daff-text-contrast($active-color);
2142
- }
2143
- }
2144
-
2145
- @mixin daff-icon-button-theme-variant(
2146
- $base-color: currentColor,
2147
- $hover-color: currentColor,
2148
- $active-color: $hover-color
2149
- ) {
2150
- color: $base-color;
2151
-
2152
- &:hover {
2153
- color: $hover-color;
2154
- @if $base-color == currentColor {
2155
- opacity: 0.8;
2156
- }
2157
- @else {
2158
- opacity: 1;
2159
- }
2160
- }
2161
-
2162
- &:active {
2163
- color: $active-color;
2164
- }
2165
- }
2166
-
2167
- @mixin daff-raised-button-theme-variant(
2168
- $base-color,
2169
- $active-color,
2170
- $focus-shadow
2171
- ) {
2172
- @if daff-contrast-ratio($base-color, daff-text-contrast($base-color)) < 4.5 {
2173
- @error 'Button Initial State: ' + map-get($wcag-aa-errors, 'text-contrast');
2174
- }
2175
-
2176
- @if daff-contrast-ratio($base-color, daff-text-contrast($base-color)) < 4.5 {
2177
- @error 'Button Hover State: '+ map-get($wcag-aa-errors, 'text-contrast');
2178
- }
2179
-
2180
- @if daff-contrast-ratio($active-color, daff-text-contrast($active-color)) < 4.5 {
2181
- @error 'Button Active State: ' + map-get($wcag-aa-errors, 'text-contrast');
2182
- }
2183
- background-color: $base-color;
2184
- border: 1px solid $base-color;
2185
- box-shadow:
2186
- 0 3px 5px rgba($black, 0.12),
2187
- 0 1px 3px rgba($black, 0.08);
2188
- color: daff-text-contrast($base-color);
2189
-
2190
- &:hover {
2191
- background-color: $base-color;
2192
- border: 1px solid $base-color;
2193
- }
2194
-
2195
- &:hover,
2196
- &:active {
2197
- box-shadow:
2198
- 0 6px 12px rgba($black, 0.12),
2199
- 0 4px 6px rgba($black, 0.1);
2200
- }
2201
-
2202
- &:focus {
2203
- outline: none;
2204
- box-shadow:
2205
- 0 0 0 4px rgba($focus-shadow, 0.3),
2206
- 0 6px 12px rgba($black, 0.12),
2207
- 0 4px 6px rgba($black, 0.1);
2208
- }
2209
-
2210
- &:active {
2211
- background-color: $active-color;
2212
- border: 1px solid $active-color;
2213
- color: daff-text-contrast($active-color);
2214
- }
2215
- }
2216
-
2217
- @mixin daff-stroked-button-theme-variant(
2218
- $base-color,
2219
- $font-color,
2220
- $focus-color
2221
- ) {
2222
- @if daff-contrast-ratio($base-color, daff-text-contrast($base-color)) < 4.5 {
2223
- @error 'Stroked Button Hover State: ' + map-get($wcag-aa-errors, 'text-contrast');
2224
- }
2225
-
2226
- @if daff-contrast-ratio($focus-color, daff-text-contrast($focus-color)) < 4.5 {
2227
- @error 'Stroked Button Focus State: ' + map-get($wcag-aa-errors, 'text-contrast');
2228
- }
2229
-
2230
- @if daff-contrast-ratio($focus-color, daff-text-contrast($focus-color)) < 4.5 {
2231
- @error 'Stroked Button Active State: ' + map-get($wcag-aa-errors, 'text-contrast');
2232
- }
2233
- border: 1px solid $base-color;
2234
- color: $font-color;
2235
- background-color: transparent;
2236
-
2237
- &:hover,
2238
- &:focus {
2239
- background-color: $base-color;
2240
- border: 1px solid $base-color;
2241
- color: daff-text-contrast($base-color);
2242
- }
2243
-
2244
- &:active {
2245
- background-color: $focus-color;
2246
- border: 1px solid $focus-color;
2247
- color: daff-text-contrast($focus-color);
2248
- }
2249
- }
2250
-
2251
- @mixin daff-underline-button-theme-variant(
2252
- $base-color: currentColor,
2253
- ) {
2254
- color: $base-color;
2255
-
2256
- &::after {
2257
- background-color: $base-color;
2258
- }
2259
- }
2260
-
2261
- @mixin daff-button-focus-theme-variant($shadow-color) {
2262
- &:focus {
2263
- outline: none;
2264
- box-shadow: 0 0 0 4px rgba($shadow-color, 0.3);
2265
- }
2266
- }
2267
-
2268
-
2269
- @mixin daff-button-theme($theme) {
2270
- $primary: map-get($theme, primary);
2271
- $secondary: map-get($theme, secondary);
2272
- $tertiary: map-get($theme, tertiary);
2273
- $base: daff-map-deep-get($theme, 'core.base');
2274
- $base-contrast: daff-map-deep-get($theme, 'core.base-contrast');
2275
- $white: daff-map-deep-get($theme, 'core.white');
2276
- $black: daff-map-deep-get($theme, 'core.black');
2277
- $gray: daff-configure-palette($daff-gray, 60);
2278
-
2279
- .daff-button {
2280
- @include daff-button-theme-variant(
2281
- daff-illuminate($base, $daff-gray, 2),
2282
- daff-illuminate($base, $daff-gray, 3),
2283
- daff-illuminate($base, $daff-gray, 4)
2284
- );
2285
-
2286
- &.daff-primary {
2287
- @include daff-button-theme-variant(
2288
- daff-color($primary),
2289
- daff-color($primary, 70),
2290
- daff-color($primary, 80)
2291
- );
2292
- }
2293
-
2294
- &.daff-secondary {
2295
- @include daff-button-theme-variant(
2296
- daff-color($secondary),
2297
- daff-color($secondary, 70),
2298
- daff-color($secondary, 80),
2299
- );
2300
- }
2301
-
2302
- &.daff-tertiary {
2303
- @include daff-button-theme-variant(
2304
- daff-color($tertiary),
2305
- daff-color($tertiary, 70),
2306
- daff-color($tertiary, 80)
2307
- );
2308
- }
2309
-
2310
- &.daff-black {
2311
- @include daff-button-theme-variant(
2312
- $black,
2313
- daff-color($daff-gray, 100),
2314
- daff-color($daff-gray, 90)
2315
- );
2316
- }
2317
-
2318
- &.daff-white {
2319
- @include daff-button-theme-variant(
2320
- $white,
2321
- daff-color($daff-gray, 20),
2322
- daff-color($daff-gray, 30)
2323
- );
2324
- }
2325
-
2326
- &.daff-theme {
2327
- @include daff-button-theme-variant(
2328
- $base,
2329
- daff-illuminate($base, $daff-gray, 2),
2330
- daff-illuminate($base, $daff-gray, 3)
2331
- );
2332
- }
2333
-
2334
- &.daff-theme-contrast {
2335
- @include daff-button-theme-variant(
2336
- $base-contrast,
2337
- daff-illuminate($base-contrast, $daff-gray, 2),
2338
- daff-illuminate($base-contrast, $daff-gray, 3)
2339
- );
2340
- }
2341
-
2342
- &[disabled] {
2343
- @include daff-button-theme-variant(
2344
- daff-illuminate($base, $daff-gray, 3),
2345
- daff-illuminate($base, $daff-gray, 3),
2346
- daff-illuminate($base, $daff-gray, 3),
2347
- );
2348
- color: daff-illuminate($base, $daff-gray, 5);
2349
-
2350
- &:hover {
2351
- color: daff-illuminate($base, $daff-gray, 5);
2352
- }
2353
- }
2354
-
2355
- &.daff-warn {
2356
- @include daff-button-theme-variant(
2357
- daff-color($daff-bronze, 60),
2358
- daff-color($daff-bronze, 70),
2359
- daff-color($daff-bronze, 80)
2360
- );
2361
- }
2362
-
2363
- &.daff-success {
2364
- @include daff-button-theme-variant(
2365
- daff-color($daff-green, 60),
2366
- daff-color($daff-green, 70),
2367
- daff-color($daff-green, 80)
2368
- );
2369
- }
2370
-
2371
- &.daff-danger {
2372
- @include daff-button-theme-variant(
2373
- daff-color($daff-red, 60),
2374
- daff-color($daff-red, 70),
2375
- daff-color($daff-red, 80)
2376
- );
2377
- }
2378
- }
2379
-
2380
- .daff-raised-button {
2381
- @include daff-raised-button-theme-variant(
2382
- daff-illuminate($base, $daff-gray, 2),
2383
- daff-illuminate($base, $daff-gray, 3),
2384
- daff-color($gray)
2385
- );
2386
-
2387
- &.daff-primary {
2388
- @include daff-raised-button-theme-variant(
2389
- daff-color($primary),
2390
- daff-color($primary, 70),
2391
- daff-color($primary)
2392
- );
2393
- }
2394
-
2395
- &.daff-secondary {
2396
- @include daff-raised-button-theme-variant(
2397
- daff-color($secondary),
2398
- daff-color($secondary, 70),
2399
- daff-color($secondary)
2400
- );
2401
- }
2402
-
2403
- &.daff-tertiary {
2404
- @include daff-raised-button-theme-variant(
2405
- daff-color($tertiary),
2406
- daff-color($tertiary, 70),
2407
- daff-color($tertiary)
2408
- );
2409
- }
2410
-
2411
- &.daff-black {
2412
- @include daff-raised-button-theme-variant(
2413
- $black,
2414
- daff-color($gray, 100),
2415
- daff-color($gray)
2416
- );
2417
- }
2418
-
2419
- &.daff-white {
2420
- @include daff-raised-button-theme-variant(
2421
- $white,
2422
- daff-color($gray, 10),
2423
- daff-color($gray)
2424
- );
2425
- }
2426
-
2427
- &.daff-theme {
2428
- @include daff-raised-button-theme-variant(
2429
- $base,
2430
- daff-illuminate($base, $daff-gray, 1),
2431
- $base
2432
- );
2433
- }
2434
-
2435
- &.daff-theme-contrast {
2436
- @include daff-raised-button-theme-variant(
2437
- $base-contrast,
2438
- daff-illuminate($base-contrast, $daff-gray, 1),
2439
- $base-contrast
2440
- );
2441
- }
2442
-
2443
- &[disabled] {
2444
- @include daff-raised-button-theme-variant(
2445
- daff-illuminate($base, $daff-gray, 3),
2446
- daff-illuminate($base, $daff-gray, 3),
2447
- daff-illuminate($base, $daff-gray, 6),
2448
- );
2449
- color: daff-illuminate($base, $daff-gray, 5);
2450
-
2451
- &:hover {
2452
- box-shadow: 0 3px 5px rgba($black, 0.12), 0 1px 3px rgba($black, 0.08);
2453
- color: daff-illuminate($base, $daff-gray, 5),;
2454
- }
2455
- }
2456
-
2457
- &.daff-warn {
2458
- @include daff-raised-button-theme-variant(
2459
- daff-color($daff-bronze, 60),
2460
- daff-color($daff-bronze, 70),
2461
- daff-color($daff-bronze, 60)
2462
- );
2463
- }
2464
-
2465
- &.daff-danger {
2466
- @include daff-raised-button-theme-variant(
2467
- daff-color($daff-red, 60),
2468
- daff-color($daff-red, 70),
2469
- daff-color($daff-red, 60)
2470
- );
2471
- }
2472
-
2473
- &.daff-success {
2474
- @include daff-raised-button-theme-variant(
2475
- daff-color($daff-green, 60),
2476
- daff-color($daff-green, 70),
2477
- daff-color($daff-green, 60)
2478
- );
2479
- }
2480
- }
2481
-
2482
- .daff-icon-button {
2483
- @include daff-icon-button-theme-variant(
2484
- daff-illuminate($base, $daff-gray, 5),
2485
- daff-illuminate($base, $daff-gray, 6),
2486
- daff-illuminate($base, $daff-gray, 7)
2487
- );
2488
-
2489
- &.daff-primary {
2490
- @include daff-icon-button-theme-variant(
2491
- daff-color($primary),
2492
- daff-color($primary, 70),
2493
- daff-color($primary, 80)
2494
- );
2495
- }
2496
-
2497
- &.daff-secondary {
2498
- @include daff-icon-button-theme-variant(
2499
- daff-color($secondary),
2500
- daff-color($secondary, 70),
2501
- daff-color($secondary, 80)
2502
- );
2503
- }
2504
-
2505
- &.daff-tertiary {
2506
- @include daff-icon-button-theme-variant(
2507
- daff-color($tertiary),
2508
- daff-color($tertiary, 70),
2509
- daff-color($tertiary, 80)
2510
- );
2511
- }
2512
-
2513
- &.daff-black {
2514
- @include daff-icon-button-theme-variant(
2515
- $black,
2516
- daff-color($daff-gray, 100),
2517
- daff-color($daff-gray, 80)
2518
- );
2519
- }
2520
-
2521
- &.daff-white {
2522
- @include daff-icon-button-theme-variant(
2523
- $white,
2524
- daff-color($daff-gray, 20),
2525
- daff-color($daff-gray, 30)
2526
- );
2527
- }
2528
-
2529
- &.daff-theme {
2530
- @include daff-icon-button-theme-variant(
2531
- $base,
2532
- daff-illuminate($base, $daff-gray, 1),
2533
- daff-illuminate($base, $daff-gray, 2)
2534
- );
2535
- }
2536
-
2537
- &.daff-theme-contrast {
2538
- @include daff-icon-button-theme-variant(
2539
- $base-contrast,
2540
- daff-illuminate($base-contrast, $daff-gray, 1),
2541
- daff-illuminate($base-contrast, $daff-gray, 2)
2542
- );
2543
- }
2544
-
2545
- &[disabled] {
2546
- @include daff-icon-button-theme-variant(
2547
- daff-illuminate($base, $daff-gray, 4),
2548
- daff-illuminate($base, $daff-gray, 4),
2549
- daff-illuminate($base, $daff-gray, 4)
2550
- );
2551
-
2552
- &:hover {
2553
- color: daff-illuminate($base, $daff-gray, 4);
2554
- }
2555
- }
2556
-
2557
- &.daff-warn {
2558
- @include daff-icon-button-theme-variant(
2559
- daff-color($daff-bronze, 60),
2560
- daff-color($daff-bronze, 70),
2561
- daff-color($daff-bronze, 80)
2562
- );
2563
- }
2564
-
2565
- &.daff-danger {
2566
- @include daff-icon-button-theme-variant(
2567
- daff-color($daff-red, 60),
2568
- daff-color($daff-red, 70),
2569
- daff-color($daff-red, 80)
2570
- );
2571
- }
2572
-
2573
- &.daff-success {
2574
- @include daff-icon-button-theme-variant(
2575
- daff-color($daff-green, 60),
2576
- daff-color($daff-green, 70),
2577
- daff-color($daff-green, 80)
2578
- );
2579
- }
2580
- }
2581
-
2582
- .daff-stroked-button {
2583
- background-color: transparent;
2584
- border: 1px solid daff-illuminate($base, $daff-gray, 5);
2585
- color: daff-text-contrast($base);
2586
-
2587
- &:hover {
2588
- background-color: daff-illuminate($base, $daff-gray, 2);
2589
- border: 1px solid daff-illuminate($base, $daff-gray, 2);
2590
- color: daff-text-contrast(daff-illuminate($base, $daff-gray, 2));
2591
- }
2592
-
2593
- &:active {
2594
- background-color: daff-illuminate($base, $daff-gray, 3);
2595
- border: 1px solid daff-illuminate($base, $daff-gray, 3);
2596
- color: daff-text-contrast(daff-illuminate($base, $daff-gray, 3));
2597
- }
2598
-
2599
- &.daff-primary {
2600
- @include daff-stroked-button-theme-variant(
2601
- daff-color($primary),
2602
- daff-color($primary),
2603
- daff-color($primary, 70)
2604
- );
2605
- }
2606
-
2607
- &.daff-secondary {
2608
- @include daff-stroked-button-theme-variant(
2609
- daff-color($secondary),
2610
- daff-color($secondary),
2611
- daff-color($secondary, 70)
2612
- );
2613
- }
2614
-
2615
- &.daff-tertiary {
2616
- @include daff-stroked-button-theme-variant(
2617
- daff-color($tertiary),
2618
- daff-color($tertiary),
2619
- daff-color($tertiary, 70)
2620
- );
2621
- }
2622
-
2623
- &.daff-black {
2624
- @include daff-stroked-button-theme-variant(
2625
- $black,
2626
- $black,
2627
- daff-color($daff-gray, 100)
2628
- );
2629
- }
2630
-
2631
- &.daff-white {
2632
- @include daff-stroked-button-theme-variant(
2633
- $white,
2634
- $white,
2635
- daff-color($daff-gray, 20)
2636
- );
2637
- }
2638
-
2639
- &.daff-theme {
2640
- @include daff-stroked-button-theme-variant(
2641
- $base,
2642
- $base,
2643
- daff-illuminate($base, $daff-gray, 2)
2644
- );
2645
- }
2646
-
2647
- &.daff-theme-contrast {
2648
- @include daff-stroked-button-theme-variant(
2649
- $base-contrast,
2650
- $base-contrast,
2651
- daff-illuminate($base-contrast, $daff-gray, 2)
2652
- );
2653
- }
2654
-
2655
- &[disabled] {
2656
- @include daff-stroked-button-theme-variant(
2657
- daff-illuminate($base, $daff-gray, 3),
2658
- daff-illuminate($base, $daff-gray, 5),
2659
- transparent
2660
- );
2661
-
2662
- &:hover {
2663
- background-color: transparent;
2664
- color: daff-illuminate($base, $daff-gray, 5);
2665
- }
2666
- }
2667
-
2668
- &.daff-warn {
2669
- @include daff-stroked-button-theme-variant(
2670
- daff-color($daff-bronze, 60),
2671
- daff-color($daff-bronze, 60),
2672
- daff-color($daff-bronze, 70)
2673
- );
2674
- }
2675
-
2676
- &.daff-danger {
2677
- @include daff-stroked-button-theme-variant(
2678
- daff-color($daff-red, 60),
2679
- daff-color($daff-red, 60),
2680
- daff-color($daff-red, 70)
2681
- );
2682
- }
2683
-
2684
- &.daff-success {
2685
- @include daff-stroked-button-theme-variant(
2686
- daff-color($daff-green, 60),
2687
- daff-color($daff-green, 60),
2688
- daff-color($daff-green, 70)
2689
- );
2690
- }
2691
- }
2692
-
2693
- .daff-underline-button {
2694
- @include daff-underline-button-theme-variant(daff-illuminate($base, $daff-gray, 7));
2695
-
2696
- &.daff-primary {
2697
- @include daff-underline-button-theme-variant(daff-color($primary));
2698
- }
2699
-
2700
- &.daff-secondary {
2701
- @include daff-underline-button-theme-variant(daff-color($secondary));
2702
- }
2703
-
2704
- &.daff-tertiary {
2705
- @include daff-underline-button-theme-variant(daff-color($tertiary));
2706
- }
2707
-
2708
- &.daff-black {
2709
- @include daff-underline-button-theme-variant($black);
2710
- }
2711
-
2712
- &.daff-white {
2713
- @include daff-underline-button-theme-variant($white);
2714
- }
2715
-
2716
- &.daff-theme {
2717
- @include daff-underline-button-theme-variant($base);
2718
- }
2719
-
2720
- &.daff-theme-contrast {
2721
- @include daff-underline-button-theme-variant($base-contrast);
2722
- }
2723
-
2724
- &[disabled] {
2725
- @include daff-underline-button-theme-variant(daff-illuminate($base, $daff-gray, 4));
2726
- }
2727
-
2728
- &.daff-warn {
2729
- @include daff-underline-button-theme-variant(daff-color($daff-bronze, 60));
2730
- }
2731
-
2732
- &.daff-danger {
2733
- @include daff-underline-button-theme-variant(daff-color($daff-red, 60));
2734
- }
2735
-
2736
- &.daff-success {
2737
- @include daff-underline-button-theme-variant(daff-color($daff-green, 60));
2738
- }
2739
- }
2740
-
2741
- .daff-button,
2742
- .daff-stroked-button,
2743
- .daff-underline-button,
2744
- .daff-icon-button {
2745
- @include daff-button-focus-theme-variant(daff-color($gray));
2746
-
2747
- &.daff-primary {
2748
- @include daff-button-focus-theme-variant(daff-color($primary));
2749
- }
2750
-
2751
- &.daff-secondary {
2752
- @include daff-button-focus-theme-variant(daff-color($secondary));
2753
- }
2754
-
2755
- &.daff-tertiary {
2756
- @include daff-button-focus-theme-variant(daff-color($tertiary));
2757
- }
2758
-
2759
- &.daff-black {
2760
- @include daff-button-focus-theme-variant(daff-color($gray));
2761
- }
2762
-
2763
- &.daff-white {
2764
- @include daff-button-focus-theme-variant(daff-color($gray));
2765
- }
2766
-
2767
- &.daff-theme {
2768
- @include daff-button-focus-theme-variant($base);
2769
- }
2770
-
2771
- &.daff-theme-contrast {
2772
- @include daff-button-focus-theme-variant($base-contrast);
2773
- }
2774
-
2775
- &.daff-warn {
2776
- @include daff-button-focus-theme-variant(daff-color($daff-bronze, 60));
2777
- }
2778
-
2779
- &.daff-danger {
2780
- @include daff-button-focus-theme-variant(daff-color($daff-red, 60));
2781
- }
2782
-
2783
- &.daff-success {
2784
- @include daff-button-focus-theme-variant(daff-color($daff-green, 60));
2785
- }
2786
- }
2787
- }
2788
-
2789
- @mixin daff-error-message-theme($theme) {
2790
- .daff-error-message {
2791
- color: $error;
2792
- }
2793
- }
2794
-
2795
- @mixin daff-form-field-theme($theme) {
2796
- $primary: map-get($theme, primary);
2797
- $secondary: map-get($theme, secondary);
2798
- $tertiary: map-get($theme, tertiary);
2799
- $base: daff-map-deep-get($theme, 'core.base');
2800
- $base-contrast: daff-map-deep-get($theme, 'core.base-contrast');
2801
-
2802
- .daff-form-field {
2803
- &__control {
2804
- background: $base;
2805
- border: 1px solid daff-illuminate($base, $daff-gray, 3);
2806
- color: daff-illuminate($base-contrast, $daff-gray, 4);
2807
-
2808
- &:focus {
2809
- border: 1px solid $base-contrast;
2810
- }
2811
-
2812
- &.daff-error {
2813
- border: 1px solid $error;
2814
-
2815
- &:focus {
2816
- border: 1px solid $error;
2817
- }
2818
- }
2819
-
2820
- &.daff-valid {
2821
- > * {
2822
- color: $base-contrast;
2823
- }
2824
- }
2825
- }
2826
- }
2827
- }
2828
-
2829
- @mixin daff-input-theme($theme) {
2830
- $base: daff-map-deep-get($theme, 'core.base');
2831
- $base-contrast: daff-map-deep-get($theme, 'core.base-contrast');
2832
-
2833
- :host {
2834
- background: $base;
2835
- color: $base-contrast;
2836
-
2837
- &::placeholder {
2838
- color: transparent;
2839
- }
2840
- }
2841
- }
2842
-
2843
- @mixin daff-select-theme($theme) {
2844
- $base-contrast: daff-map-deep-get($theme, 'core.base-contrast');
2845
- $black: daff-map-deep-get($theme, 'core.black');
2846
-
2847
- .daff-native-select {
2848
- color: daff-illuminate($base-contrast, $daff-gray, 4);
2849
-
2850
- // removes dotted border on in FF
2851
- &:-moz-focusring {
2852
- color: transparent;
2853
- text-shadow: 0 0 0 $black;
2854
- }
2855
- }
2856
- }
2857
-
2858
- @mixin daff-progress-indicator-theme($theme) {
2859
- $primary: map-get($theme, primary);
2860
- $secondary: map-get($theme, secondary);
2861
- $tertiary: map-get($theme, tertiary);
2862
- $base: daff-map-deep-get($theme, 'core.base');
2863
- $base-contrast: daff-map-deep-get($theme, 'core.base-contrast');
2864
- $white: daff-map-deep-get($theme, 'core.white');
2865
- $black: daff-map-deep-get($theme, 'core.black');
2866
-
2867
- .daff-progress-indicator {
2868
- $root: &;
2869
- background: rgba($base-contrast, 0.1);
2870
-
2871
- &.daff-primary {
2872
- #{$root}__fill {
2873
- background: daff-color($primary);
2874
- }
2875
- }
2876
-
2877
- &.daff-secondary {
2878
- #{$root}__fill {
2879
- background: daff-color($secondary);
2880
- }
2881
- }
2882
-
2883
- &.daff-tertiary {
2884
- #{$root}__fill {
2885
- background: daff-color($tertiary);
2886
- }
2887
- }
2888
-
2889
- &.daff-theme {
2890
- #{$root}__fill {
2891
- background: $base;
2892
- }
2893
- }
2894
-
2895
- &.daff-theme-contrast {
2896
- #{$root}__fill {
2897
- background: $base-contrast;
2898
- }
2899
- }
2900
-
2901
- &.daff-black {
2902
- #{$root}__fill {
2903
- background: $black;
2904
- }
2905
- }
2906
-
2907
- &.daff-white {
2908
- #{$root}__fill {
2909
- background: $white;
2910
- }
2911
- }
2912
- }
2913
- }
2914
-
2915
- @mixin daff-loading-icon-theme($theme) {
2916
- $primary: map-get($theme, primary);
2917
- $secondary: map-get($theme, secondary);
2918
- $tertiary: map-get($theme, tertiary);
2919
- $base: daff-map-deep-get($theme, 'core.base');
2920
- $base-contrast: daff-map-deep-get($theme, 'core.base-contrast');
2921
- $white: daff-map-deep-get($theme, 'core.white');
2922
- $black: daff-map-deep-get($theme, 'core.black');
2923
-
2924
- .daff-loading-icon {
2925
- &.daff-primary {
2926
- circle {
2927
- stroke: daff-color($primary);
2928
- }
2929
- }
2930
-
2931
- &.daff-secondary {
2932
- circle {
2933
- stroke: daff-color($secondary);
2934
- }
2935
- }
2936
-
2937
- &.daff-tertiary {
2938
- circle {
2939
- stroke: daff-color($tertiary);
2940
- }
2941
- }
2942
-
2943
- &.daff-theme {
2944
- circle {
2945
- stroke: $base;
2946
- }
2947
- }
2948
-
2949
- &.daff-theme-contrast {
2950
- circle {
2951
- stroke: $base-contrast;
2952
- }
2953
- }
2954
-
2955
- &.daff-black {
2956
- circle {
2957
- stroke: $black;
2958
- }
2959
- }
2960
-
2961
- &.daff-white {
2962
- circle {
2963
- stroke: $white;
2964
- }
2965
- }
2966
- }
2967
- }
2968
-
2969
-
2970
- @mixin daff-accordion-item-theme($theme) {
2971
- $primary: map-get($theme, primary);
2972
- $secondary: map-get($theme, secondary);
2973
- $tertiary: map-get($theme, tertiary);
2974
- $base: daff-map-deep-get($theme, 'core.base');
2975
- $base-contrast: daff-map-deep-get($theme, 'core.base-contrast');
2976
- $white: daff-map-deep-get($theme, 'core.white');
2977
- $black: daff-map-deep-get($theme, 'core.black');
2978
-
2979
- .daff-accordion-item {
2980
- border-bottom: 1px solid daff-illuminate($base, $daff-gray, 2);
2981
- }
2982
- }
2983
-
2984
- @mixin stopsArticleCascade($selector...) {
2985
- #{$selector} {
2986
- &:not(.daff-ae *, .daff-ae) {
2987
- @content;
2988
- }
2989
- }
2990
- }
2991
-
2992
-
2993
- @mixin daff-article-theme($theme) {
2994
- $primary: map-get($theme, primary);
2995
- $secondary: map-get($theme, secondary);
2996
- $tertiary: map-get($theme, tertiary);
2997
- $base: daff-map-deep-get($theme, 'core.base');
2998
- $base-contrast: daff-map-deep-get($theme, 'core.base-contrast');
2999
- $white: daff-map-deep-get($theme, 'core.white');
3000
- $black: daff-map-deep-get($theme, 'core.black');
3001
- $gray: daff-configure-palette($daff-gray, 60);
3002
-
3003
- $text-color: daff-illuminate($base-contrast, $gray, 2);
3004
- $table-border-color: daff-illuminate($base, $gray, 2);
3005
-
3006
- .daff-article {
3007
- &__meta {
3008
- color: daff-illuminate($base-contrast, $gray, 3);
3009
- }
3010
-
3011
- @include stopsArticleCascade(a) {
3012
- color: daff-color($primary);
3013
- }
3014
-
3015
- @include stopsArticleCascade(h1, h2, h3, h4, h5, h6) {
3016
- color: $text-color;
3017
- }
3018
-
3019
- @include stopsArticleCascade(p) {
3020
- color: $text-color;
3021
- }
3022
-
3023
- pre {
3024
- background: rgba(daff-illuminate($base, $daff-gray, 2), 0.3);
3025
- border: 1px solid rgba(daff-illuminate($base, $daff-gray, 2), 0.6);
3026
- color: $base-contrast;
3027
-
3028
- code {
3029
- background: none;
3030
- border: none;
3031
- }
3032
- }
3033
-
3034
- code {
3035
- background: rgba(daff-illuminate($base, $daff-gray, 2), 0.5);
3036
- color: $base-contrast;
3037
- }
3038
-
3039
- hr {
3040
- background: daff-illuminate($base, $gray, 2);
3041
- }
3042
-
3043
- blockquote {
3044
- background: rgba(daff-color($primary), 0.1);
3045
- border-left: 4px solid daff-illuminate($base, $primary, 5);
3046
- color: $base-contrast;
3047
-
3048
- code {
3049
- background: rgba(daff-color($primary), 0.15);
3050
- color: $base-contrast;
3051
- }
3052
- }
3053
-
3054
- table {
3055
- th {
3056
- background: daff-illuminate($base, $gray, 1);
3057
- border: 1px solid $table-border-color;
3058
- }
3059
-
3060
- td {
3061
- border: 1px solid $table-border-color;
3062
- }
3063
- }
3064
- }
3065
- }
3066
-
3067
- @mixin daff-callout-theme-variant($color) {
3068
- background: $color;
3069
- color: daff-text-contrast($color);
3070
- }
3071
-
3072
- @mixin daff-callout-theme($theme) {
3073
- $primary: map-get($theme, primary);
3074
- $secondary: map-get($theme, secondary);
3075
- $tertiary: map-get($theme, tertiary);
3076
- $base: daff-map-deep-get($theme, 'core.base');
3077
- $base-contrast: daff-map-deep-get($theme, 'core.base-contrast');
3078
- $white: daff-map-deep-get($theme, 'core.white');
3079
- $black: daff-map-deep-get($theme, 'core.black');
3080
-
3081
- .daff-callout {
3082
- @include daff-callout-theme-variant(daff-illuminate($base, $daff-gray, 1));
3083
-
3084
- &.daff-primary {
3085
- @include daff-callout-theme-variant(daff-color($primary));
3086
- }
3087
-
3088
- &.daff-secondary {
3089
- @include daff-callout-theme-variant(daff-color($secondary));
3090
- }
3091
-
3092
- &.daff-tertiary {
3093
- @include daff-callout-theme-variant(daff-color($tertiary));
3094
- }
3095
-
3096
- &.daff-theme {
3097
- @include daff-callout-theme-variant($base);
3098
- }
3099
-
3100
- &.daff-theme-contrast {
3101
- @include daff-callout-theme-variant($base-contrast);
3102
- }
3103
-
3104
- &.daff-black {
3105
- @include daff-callout-theme-variant($black);
3106
- }
3107
-
3108
- &.daff-white {
3109
- @include daff-callout-theme-variant($white);
3110
- }
3111
- }
3112
- }
3113
-
3114
- @mixin daff-basic-card-theme-variant($color) {
3115
- background: $color;
3116
- color: daff-text-contrast($color);
3117
- }
3118
-
3119
- @mixin daff-linkable-basic-card-theme-variant(
3120
- $hover-color,
3121
- $active-color,
3122
- $shadow-color
3123
- ) {
3124
- &:hover,
3125
- &:focus {
3126
- background: $hover-color;
3127
- color: daff-text-contrast($hover-color);
3128
- }
3129
-
3130
- &:focus {
3131
- outline: none;
3132
- box-shadow: 0 0 0 4px rgba($shadow-color, 0.3);
3133
- }
3134
-
3135
- &:active {
3136
- background: $active-color;
3137
- color: daff-text-contrast($active-color);
3138
- }
3139
- }
3140
-
3141
- @mixin daff-stroked-card-theme-variant($color) {
3142
- border: 1px solid $color;
3143
- }
3144
-
3145
-
3146
- @mixin daff-card-theme($theme) {
3147
- $primary: map-get($theme, primary);
3148
- $secondary: map-get($theme, secondary);
3149
- $tertiary: map-get($theme, tertiary);
3150
- $base: daff-map-deep-get($theme, 'core.base');
3151
- $base-contrast: daff-map-deep-get($theme, 'core.base-contrast');
3152
- $white: daff-map-deep-get($theme, 'core.white');
3153
- $black: daff-map-deep-get($theme, 'core.black');
3154
- $gray: daff-configure-palette($daff-gray, 60);
3155
-
3156
- .daff-card {
3157
- $root: &;
3158
- @include daff-basic-card-theme-variant(
3159
- daff-illuminate($base, $daff-gray, 1)
3160
- );
3161
-
3162
- &.daff-primary {
3163
- @include daff-basic-card-theme-variant(daff-color($primary));
3164
- }
3165
-
3166
- &.daff-secondary {
3167
- @include daff-basic-card-theme-variant(daff-color($secondary));
3168
- }
3169
-
3170
- &.daff-tertiary {
3171
- @include daff-basic-card-theme-variant(daff-color($tertiary));
3172
- }
3173
-
3174
- &.daff-theme {
3175
- @include daff-basic-card-theme-variant($base);
3176
- }
3177
-
3178
- &.daff-theme-contrast {
3179
- @include daff-basic-card-theme-variant($base-contrast);
3180
- }
3181
-
3182
- &.daff-black {
3183
- @include daff-basic-card-theme-variant($black);
3184
- }
3185
-
3186
- &.daff-white {
3187
- @include daff-basic-card-theme-variant($white);
3188
- }
3189
- }
3190
-
3191
- .daff-raised-card {
3192
- box-shadow: 0 6px 12px -4px rgba($black, 0.12),
3193
- 0 4px 8px -2px rgba($black, 0.06);
3194
- }
3195
-
3196
- .daff-stroked-card {
3197
- @include daff-stroked-card-theme-variant(
3198
- daff-illuminate($base, $daff-gray, 2)
3199
- );
3200
-
3201
- &.daff-primary {
3202
- @include daff-stroked-card-theme-variant(
3203
- daff-illuminate($base-contrast, $primary, 3)
3204
- );
3205
- }
3206
-
3207
- &.daff-secondary {
3208
- @include daff-stroked-card-theme-variant(
3209
- daff-illuminate($base-contrast, $secondary, 3)
3210
- );
3211
- }
3212
-
3213
- &.daff-tertiary {
3214
- @include daff-stroked-card-theme-variant(
3215
- daff-illuminate($base-contrast, $tertiary, 3)
3216
- );
3217
- }
3218
-
3219
- &.daff-theme {
3220
- @include daff-stroked-card-theme-variant(
3221
- daff-illuminate($base, $daff-gray, 2)
3222
- );
3223
- }
3224
-
3225
- &.daff-theme-contrast {
3226
- @include daff-stroked-card-theme-variant(
3227
- daff-illuminate($base-contrast, $daff-gray, 2)
3228
- );
3229
- }
3230
-
3231
- &.daff-black {
3232
- @include daff-stroked-card-theme-variant(daff-color($gray, 90));
3233
- }
3234
-
3235
- &.daff-white {
3236
- @include daff-stroked-card-theme-variant(daff-color($gray, 20));
3237
- }
3238
- }
3239
-
3240
- a {
3241
- &.daff-card {
3242
- @include daff-linkable-basic-card-theme-variant(
3243
- daff-illuminate($base, $daff-gray, 2),
3244
- daff-illuminate($base, $daff-gray, 3),
3245
- daff-color($gray)
3246
- );
3247
-
3248
- &.daff-primary {
3249
- @include daff-linkable-basic-card-theme-variant(
3250
- daff-color($primary, 70),
3251
- daff-color($primary, 80),
3252
- daff-color($primary)
3253
- );
3254
- }
3255
-
3256
- &.daff-secondary {
3257
- @include daff-linkable-basic-card-theme-variant(
3258
- daff-color($secondary, 70),
3259
- daff-color($secondary, 80),
3260
- daff-color($secondary)
3261
- );
3262
- }
3263
-
3264
- &.daff-tertiary {
3265
- @include daff-linkable-basic-card-theme-variant(
3266
- daff-color($tertiary, 70),
3267
- daff-color($tertiary, 80),
3268
- daff-color($tertiary)
3269
- );
3270
- }
3271
-
3272
- &.daff-theme {
3273
- @include daff-linkable-basic-card-theme-variant(
3274
- daff-illuminate($base, $daff-gray, 1),
3275
- daff-illuminate($base, $daff-gray, 2),
3276
- daff-color($gray)
3277
- );
3278
- }
3279
-
3280
- &.daff-theme-contrast {
3281
- @include daff-linkable-basic-card-theme-variant(
3282
- daff-illuminate($base-contrast, $daff-gray, 1),
3283
- daff-illuminate($base-contrast, $daff-gray, 2),
3284
- daff-color($gray)
3285
- );
3286
- }
3287
-
3288
- &.daff-black {
3289
- @include daff-linkable-basic-card-theme-variant(
3290
- daff-color($gray, 100),
3291
- daff-color($gray, 90),
3292
- daff-color($gray)
3293
- );
3294
- }
3295
-
3296
- &.daff-white {
3297
- @include daff-linkable-basic-card-theme-variant(
3298
- daff-color($gray, 10),
3299
- daff-color($gray, 20),
3300
- daff-color($gray)
3301
- );
3302
- }
3303
- }
3304
-
3305
- &.daff-raised-card {
3306
- &:hover,
3307
- &:focus,
3308
- &:active {
3309
- box-shadow: 0 16px 32px -4px rgba($black, 0.12),
3310
- 0 8px 12px -2px rgba($black, 0.06);
3311
- }
3312
- }
3313
- }
3314
- }
3315
-
3316
- @mixin daff-hero-theme-variant($color) {
3317
- background: $color;
3318
- color: daff-text-contrast($color);
3319
- }
3320
-
3321
- @mixin daff-hero-theme($theme) {
3322
- $primary: map-get($theme, primary);
3323
- $secondary: map-get($theme, secondary);
3324
- $tertiary: map-get($theme, tertiary);
3325
- $base: daff-map-deep-get($theme, 'core.base');
3326
- $base-contrast: daff-map-deep-get($theme, 'core.base-contrast');
3327
- $white: daff-map-deep-get($theme, 'core.white');
3328
- $black: daff-map-deep-get($theme, 'core.black');
3329
-
3330
- .daff-hero {
3331
- @include daff-hero-theme-variant(daff-illuminate($base, $daff-gray, 1));
3332
-
3333
- &.daff-primary {
3334
- @include daff-hero-theme-variant(daff-color($primary));
3335
- }
3336
-
3337
- &.daff-secondary {
3338
- @include daff-hero-theme-variant(daff-color($secondary));
3339
- }
3340
-
3341
- &.daff-tertiary {
3342
- @include daff-hero-theme-variant(daff-color($tertiary));
3343
- }
3344
-
3345
- &.daff-theme {
3346
- @include daff-hero-theme-variant($base);
3347
- }
3348
-
3349
- &.daff-theme-contrast {
3350
- @include daff-hero-theme-variant($base-contrast);
3351
- }
3352
-
3353
- &.daff-black {
3354
- @include daff-hero-theme-variant($black);
3355
- }
3356
-
3357
- &.daff-white {
3358
- @include daff-hero-theme-variant($white);
3359
- }
3360
- }
3361
- }
3362
-
3363
- @mixin daff-list-theme($theme) {
3364
- $base: daff-map-deep-get($theme, 'core.base');
3365
- $base-contrast: daff-map-deep-get($theme, 'core.base-contrast');
3366
-
3367
- .daff-list {
3368
- .daff-list-item {
3369
- &__content {
3370
- *:nth-child(1) { /* stylelint-disable-line scss/selector-nest-combinators */
3371
- color: $base-contrast;
3372
- }
3373
-
3374
- *:nth-child(n + 2) { /* stylelint-disable-line scss/selector-nest-combinators */
3375
- color: daff-illuminate($base-contrast, $daff-gray, 3);
3376
- }
3377
- }
3378
- }
3379
-
3380
- // deprecated in v1.0.0
3381
- &--navigation {
3382
- .daff-list-item {
3383
- &:hover {
3384
- background-color: daff-illuminate($base, $daff-gray, 1);
3385
- }
3386
- }
3387
- }
3388
-
3389
- // deprecated in v1.0.0
3390
- &--multi-line {
3391
- .daff-list-item {
3392
- &__content {
3393
- *:nth-child(1) { /* stylelint-disable-line scss/selector-nest-combinators */
3394
- color: $base-contrast;
3395
- }
3396
-
3397
- *:nth-child(n + 2) { /* stylelint-disable-line scss/selector-nest-combinators */
3398
- color: daff-illuminate($base-contrast, $daff-gray, 3);
3399
- }
3400
- }
3401
- }
3402
- }
3403
- }
3404
-
3405
- .daff-nav-list {
3406
- .daff-list-item {
3407
- background-color: $base;
3408
- transition: background-color 150ms;
3409
-
3410
- &:hover {
3411
- background-color: daff-illuminate($base, $daff-gray, 1);
3412
- }
3413
- }
3414
- }
3415
- }
3416
-
3417
- @mixin daff-media-gallery-theme($theme) {
3418
- $primary: map-get($theme, primary);
3419
- $secondary: map-get($theme, secondary);
3420
- $tertiary: map-get($theme, tertiary);
3421
- $base: daff-map-deep-get($theme, 'core.base');
3422
- $white: daff-map-deep-get($theme, 'core.white');
3423
- $black: daff-map-deep-get($theme, 'core.black');
3424
- $gray: daff-configure-palette($daff-gray, 60);
3425
-
3426
- .daff-media-gallery {
3427
- $root: &;
3428
-
3429
- .daff-thumbnail {
3430
- border: 1px solid transparent;
3431
- transition: border 150ms;
3432
-
3433
- &--selected {
3434
- border: 1px solid daff-color($gray);
3435
- }
3436
- }
3437
- }
3438
- }
3439
-
3440
- @mixin daff-modal-theme($theme) {
3441
- $base: daff-map-deep-get($theme, 'core.base');
3442
- $base-contrast: daff-map-deep-get($theme, 'core.base-contrast');
3443
-
3444
- .daff-modal {
3445
- background: $base;
3446
- }
3447
- }
3448
-
3449
- @mixin daff-navbar-theme-variant($color) {
3450
- background: $color;
3451
- color: daff-text-contrast($color);
3452
- }
3453
-
3454
- @mixin daff-navbar-theme($theme) {
3455
- $primary: map-get($theme, primary);
3456
- $secondary: map-get($theme, secondary);
3457
- $tertiary: map-get($theme, tertiary);
3458
- $base: daff-map-deep-get($theme, 'core.base');
3459
- $base-contrast: daff-map-deep-get($theme, 'core.base-contrast');
3460
- $white: daff-map-deep-get($theme, 'core.white');
3461
- $black: daff-map-deep-get($theme, 'core.black');
3462
- $gray: daff-configure-palette($daff-gray, 60);
3463
-
3464
- .daff-navbar {
3465
- @include daff-navbar-theme-variant(daff-illuminate($base, $daff-gray, 1));
3466
-
3467
- &--raised {
3468
- box-shadow: 0 4px 10px rgba($black, 0.08);
3469
- }
3470
-
3471
- &.daff-primary {
3472
- @include daff-navbar-theme-variant(daff-color($primary));
3473
- }
3474
-
3475
- &.daff-secondary {
3476
- @include daff-navbar-theme-variant(daff-color($secondary));
3477
- }
3478
-
3479
- &.daff-tertiary {
3480
- @include daff-navbar-theme-variant(daff-color($tertiary));
3481
- }
3482
-
3483
- &.daff-black {
3484
- @include daff-navbar-theme-variant($black);
3485
- }
3486
-
3487
- &.daff-white {
3488
- @include daff-navbar-theme-variant($white);
3489
- }
3490
-
3491
- &.daff-theme {
3492
- @include daff-navbar-theme-variant($base);
3493
- }
3494
-
3495
- &.daff-theme-contrast {
3496
- @include daff-navbar-theme-variant($base-contrast);
3497
- }
3498
- }
3499
- }
3500
-
3501
- @mixin daff-paginator-theme-variant($active-color) {
3502
- color: currentColor;
3503
-
3504
- &:hover,
3505
- &.selected { /* stylelint-disable-line selector-class-pattern */
3506
- background: $active-color;
3507
- color: daff-text-contrast($active-color);
3508
- }
3509
- }
3510
-
3511
- @mixin daff-paginator-theme($theme) {
3512
- $primary: map-get($theme, primary);
3513
- $secondary: map-get($theme, secondary);
3514
- $tertiary: map-get($theme, tertiary);
3515
- $base: daff-map-deep-get($theme, 'core.base');
3516
- $base-contrast: daff-map-deep-get($theme, 'core.base-contrast');
3517
- $white: daff-map-deep-get($theme, 'core.white');
3518
- $black: daff-map-deep-get($theme, 'core.black');
3519
-
3520
- .daff-paginator {
3521
- &__previous,
3522
- &__next {
3523
- color: currentColor;
3524
- }
3525
-
3526
- &.daff-primary {
3527
- .daff-paginator__page-link {
3528
- @include daff-paginator-theme-variant(daff-color($primary));
3529
- }
3530
- }
3531
-
3532
- &.daff-secondary {
3533
- .daff-paginator__page-link {
3534
- @include daff-paginator-theme-variant(daff-color($secondary));
3535
- }
3536
- }
3537
-
3538
- &.daff-tertiary {
3539
- .daff-paginator__page-link {
3540
- @include daff-paginator-theme-variant(daff-color($tertiary));
3541
- }
3542
- }
3543
-
3544
- &.daff-theme {
3545
- .daff-paginator__page-link {
3546
- @include daff-paginator-theme-variant($base);
3547
- }
3548
- }
3549
-
3550
- &.daff-theme-contrast {
3551
- .daff-paginator__page-link {
3552
- @include daff-paginator-theme-variant($base-contrast);
3553
- }
3554
- }
3555
-
3556
- &.daff-black {
3557
- .daff-paginator__page-link {
3558
- @include daff-paginator-theme-variant($black);
3559
- }
3560
- }
3561
-
3562
- &.daff-white {
3563
- .daff-paginator__page-link {
3564
- @include daff-paginator-theme-variant($white);
3565
- }
3566
- }
3567
- }
3568
- }
3569
-
3570
- @mixin daff-sidebar-theme($theme) {
3571
- $primary: map-get($theme, primary);
3572
- $secondary: map-get($theme, secondary);
3573
- $tertiary: map-get($theme, tertiary);
3574
- $base: daff-map-deep-get($theme, 'core.base');
3575
- $font-color: daff-map-deep-get($theme, 'core.font-color');
3576
- $shadow-color: rgba(128, 128, 128, 0.1);
3577
-
3578
- .daff-sidebar {
3579
- background: $base;
3580
- box-shadow: 6px 1px 9px 0 $shadow-color;
3581
- color: $font-color;
3582
- }
3583
- }
3584
-
3585
- @mixin daff-sidebar-viewport-theme($theme) {
3586
- $primary: map-get($theme, primary);
3587
- $secondary: map-get($theme, secondary);
3588
- $tertiary: map-get($theme, tertiary);
3589
- $base: daff-map-deep-get($theme, 'core.base');
3590
- $font-color: daff-map-deep-get($theme, 'core.font-color');
3591
-
3592
- .daff-sidebar-viewport {
3593
- background: $base;
3594
- color: $font-color;
3595
- }
3596
- }
3597
-
3598
-
3599
- //
3600
- // Generates the styles of a @daffodil/design theme.
3601
- //
3602
- // Usage:
3603
- // ```
3604
- // @include daff-theme($theme);
3605
- // ```
3606
- @mixin daff-theme($theme) {
3607
- // CSS variables
3608
- @include daff-theme-css-variables($theme);
3609
-
3610
- // Atoms
3611
- @include daff-button-theme($theme);
3612
- @include daff-error-message-theme($theme);
3613
- @include daff-form-field-theme($theme);
3614
- @include daff-input-theme($theme);
3615
- @include daff-select-theme($theme);
3616
- @include daff-progress-indicator-theme($theme);
3617
- @include daff-loading-icon-theme($theme);
3618
-
3619
- // Molecules
3620
- @include daff-accordion-item-theme($theme);
3621
- @include daff-article-theme($theme);
3622
- @include daff-callout-theme($theme);
3623
- @include daff-card-theme($theme);
3624
- @include daff-hero-theme($theme);
3625
- @include daff-list-theme($theme);
3626
- @include daff-media-gallery-theme($theme);
3627
- @include daff-modal-theme($theme);
3628
- @include daff-navbar-theme($theme);
3629
- @include daff-paginator-theme($theme);
3630
- @include daff-sidebar-theme($theme);
3631
- @include daff-sidebar-viewport-theme($theme);
3632
- }
3633
-