@daffodil/design 0.42.4 → 0.44.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 (91) hide show
  1. package/esm2020/molecules/callout/callout/callout.component.mjs +2 -2
  2. package/esm2020/molecules/card/card/card.component.mjs +2 -2
  3. package/esm2020/molecules/hero/hero/hero.component.mjs +2 -2
  4. package/esm2020/molecules/image-list/image-list.component.mjs +2 -2
  5. package/esm2020/molecules/list/list/list.component.mjs +2 -2
  6. package/esm2020/molecules/paginator/paginator.component.mjs +2 -2
  7. package/fesm2015/daffodil-design.mjs +12 -12
  8. package/fesm2015/daffodil-design.mjs.map +1 -1
  9. package/fesm2020/daffodil-design.mjs +12 -12
  10. package/fesm2020/daffodil-design.mjs.map +1 -1
  11. package/package.json +1 -1
  12. package/{src/scss → scss}/README.md +0 -0
  13. package/scss/accessibility/_errors.scss +12 -0
  14. package/scss/accessibility/_index.scss +1 -0
  15. package/scss/core/_index.scss +4 -0
  16. package/scss/core/map/map-deep-check/map-deep-check.scss +26 -0
  17. package/scss/core/map/map-deep-check/map-deep-check.spec.scss +43 -0
  18. package/scss/core/map/map-deep-get/map-deep-get.scss +27 -0
  19. package/scss/core/map/map-deep-get/map-deep-get.spec.scss +25 -0
  20. package/scss/core/string/split/string-split.scss +33 -0
  21. package/scss/core/string/split/string-split.spec.scss +35 -0
  22. package/scss/daff-global.scss +49 -0
  23. package/scss/daff-typography.scss +55 -0
  24. package/scss/daff-util.scss +21 -0
  25. package/scss/interactions/_index.scss +1 -0
  26. package/scss/interactions/mouse/_clickable.scss +22 -0
  27. package/scss/layout/_breakpoint.scss +21 -0
  28. package/scss/layout/_index.scss +2 -0
  29. package/scss/layout/_variables.scss +13 -0
  30. package/scss/theme.scss +77 -0
  31. package/scss/theming/README.md +59 -0
  32. package/scss/theming/_color-palettes.scss +116 -0
  33. package/scss/theming/_configure-palette.scss +20 -0
  34. package/scss/theming/_configure-theme.scss +68 -0
  35. package/scss/theming/_get-color.scss +18 -0
  36. package/scss/theming/_index.scss +6 -0
  37. package/scss/theming/_theme-css-variables.scss +43 -0
  38. package/scss/theming/contrast/_index.scss +5 -0
  39. package/scss/theming/contrast/contrast-ratio/contrast-ratio.scss +11 -0
  40. package/scss/theming/contrast/contrast-ratio/contrast-ratio.spec.scss +0 -0
  41. package/scss/theming/contrast/luminance/_variables.scss +268 -0
  42. package/scss/theming/contrast/luminance/luminance.scss +19 -0
  43. package/scss/theming/contrast/luminance/luminance.spec.scss +24 -0
  44. package/scss/theming/contrast/text-contrast/text-contrast.scss +34 -0
  45. package/scss/theming/contrast/text-contrast/text-contrast.spec.scss +0 -0
  46. package/scss/theming/illuminate/illuminate.scss +145 -0
  47. package/scss/theming/illuminate/illuminate.spec.scss +15 -0
  48. package/scss/theming/prebuilt/internal-theme.scss +13 -0
  49. package/scss/typography/README.md +88 -0
  50. package/scss/typography/_classes.scss +20 -0
  51. package/scss/typography/_index.scss +5 -0
  52. package/scss/typography/mixins/_font-weight.scss +18 -0
  53. package/scss/typography/mixins/_sizes.scss +84 -0
  54. package/scss/typography/mixins/_text-transform.scss +4 -0
  55. package/scss/typography/mixins/_text-truncate.scss +23 -0
  56. package/scss/typography/utilities/_index.scss +1 -0
  57. package/scss/typography/utilities/_variables.scss +12 -0
  58. package/src/atoms/button/button-theme-variants/button.scss +35 -0
  59. package/src/atoms/button/button-theme-variants/focus.scss +6 -0
  60. package/src/atoms/button/button-theme-variants/icon.scss +21 -0
  61. package/src/atoms/button/button-theme-variants/raised.scss +56 -0
  62. package/src/atoms/button/button-theme-variants/stroked.scss +36 -0
  63. package/src/atoms/button/button-theme-variants/underline.scss +9 -0
  64. package/src/atoms/button/button-theme.scss +570 -0
  65. package/src/atoms/form/error-message/error-message-theme.scss +7 -0
  66. package/src/atoms/form/form-field/form-field/form-field-theme.scss +38 -0
  67. package/src/atoms/form/input/input-theme.scss +16 -0
  68. package/src/atoms/form/radio/radio.scss +0 -0
  69. package/src/atoms/form/select/select/select-theme.scss +19 -0
  70. package/src/atoms/loading-icon/loading-icon-theme.scss +57 -0
  71. package/src/atoms/progress-indicator/progress-indicator-theme.scss +60 -0
  72. package/src/molecules/accordion/accordion-item/accordion-item-theme.scss +12 -0
  73. package/src/molecules/article/article/_stops-article-cascade.scss +7 -0
  74. package/src/molecules/article/article/article-theme.scss +78 -0
  75. package/src/molecules/callout/callout-theme.scss +59 -0
  76. package/src/molecules/card/card/card-theme-variants/basic-card.scss +6 -0
  77. package/src/molecules/card/card/card-theme-variants/linkable-card.scss +23 -0
  78. package/src/molecules/card/card/card-theme-variants/stroked-card.scss +3 -0
  79. package/src/molecules/card/card/card-theme.scss +186 -0
  80. package/src/molecules/hero/hero-theme.scss +59 -0
  81. package/src/molecules/list/list/list-theme.scss +68 -0
  82. package/src/molecules/media-gallery/media-gallery-theme.scss +20 -0
  83. package/src/molecules/modal/modal-theme.scss +9 -0
  84. package/src/molecules/navbar/navbar-theme.scss +57 -0
  85. package/src/molecules/paginator/paginator-theme.scss +72 -0
  86. package/src/molecules/sidebar/sidebar/sidebar-theme.scss +13 -0
  87. package/src/molecules/sidebar/sidebar-viewport/sidebar-viewport-theme.scss +11 -0
  88. package/daff-global.scss +0 -2
  89. package/daff-theme.scss +0 -3634
  90. package/daff-typography.scss +0 -505
  91. package/daff-util.scss +0 -377
package/src/atoms/button/button-theme.scss ADDED
@@ -0,0 +1,570 @@
1
+ @use 'sass:map';
2
+ @use '../../../scss/theming';
3
+ @use '../../../scss/core';
4
+ @use './button-theme-variants/button';
5
+ @use './button-theme-variants/icon';
6
+ @use './button-theme-variants/raised';
7
+ @use './button-theme-variants/stroked';
8
+ @use './button-theme-variants/underline';
9
+ @use './button-theme-variants/focus';
10
+
11
+ @mixin daff-button-theme($theme) {
12
+ $primary: map.get($theme, primary);
13
+ $secondary: map.get($theme, secondary);
14
+ $tertiary: map.get($theme, tertiary);
15
+ $base: core.daff-map-deep-get($theme, 'core.base');
16
+ $base-contrast: core.daff-map-deep-get($theme, 'core.base-contrast');
17
+ $white: core.daff-map-deep-get($theme, 'core.white');
18
+ $black: core.daff-map-deep-get($theme, 'core.black');
19
+ $gray: core.daff-map-deep-get($theme, 'core.gray');
20
+
21
+ .daff-button {
22
+ @include button.daff-button-theme-variant(
23
+ theming.daff-illuminate($base, $gray, 2),
24
+ theming.daff-illuminate($base, $gray, 3),
25
+ theming.daff-illuminate($base, $gray, 4)
26
+ );
27
+
28
+ &.daff-primary {
29
+ @include button.daff-button-theme-variant(
30
+ theming.daff-color($primary),
31
+ theming.daff-color($primary, 70),
32
+ theming.daff-color($primary, 80)
33
+ );
34
+ }
35
+
36
+ &.daff-secondary {
37
+ @include button.daff-button-theme-variant(
38
+ theming.daff-color($secondary),
39
+ theming.daff-color($secondary, 70),
40
+ theming.daff-color($secondary, 80)
41
+ );
42
+ }
43
+
44
+ &.daff-tertiary {
45
+ @include button.daff-button-theme-variant(
46
+ theming.daff-color($tertiary),
47
+ theming.daff-color($tertiary, 70),
48
+ theming.daff-color($tertiary, 80)
49
+ );
50
+ }
51
+
52
+ &.daff-black {
53
+ @include button.daff-button-theme-variant(
54
+ $black,
55
+ theming.daff-color($gray, 100),
56
+ theming.daff-color($gray, 90)
57
+ );
58
+ }
59
+
60
+ &.daff-white {
61
+ @include button.daff-button-theme-variant(
62
+ $white,
63
+ theming.daff-color($gray, 20),
64
+ theming.daff-color($gray, 30)
65
+ );
66
+ }
67
+
68
+ &.daff-theme {
69
+ @include button.daff-button-theme-variant(
70
+ $base,
71
+ theming.daff-illuminate($base, $gray, 2),
72
+ theming.daff-illuminate($base, $gray, 3)
73
+ );
74
+ }
75
+
76
+ &.daff-theme-contrast {
77
+ @include button.daff-button-theme-variant(
78
+ $base-contrast,
79
+ theming.daff-illuminate($base-contrast, $gray, 2),
80
+ theming.daff-illuminate($base-contrast, $gray, 3)
81
+ );
82
+ }
83
+
84
+ &[disabled] {
85
+ @include button.daff-button-theme-variant(
86
+ theming.daff-illuminate($base, $gray, 3),
87
+ theming.daff-illuminate($base, $gray, 3),
88
+ theming.daff-illuminate($base, $gray, 3)
89
+ );
90
+ color: theming.daff-illuminate($base, $gray, 5);
91
+
92
+ &:hover {
93
+ color: theming.daff-illuminate($base, $gray, 5);
94
+ }
95
+ }
96
+
97
+ &.daff-warn {
98
+ @include button.daff-button-theme-variant(
99
+ theming.daff-color(theming.$daff-bronze, 60),
100
+ theming.daff-color(theming.$daff-bronze, 70),
101
+ theming.daff-color(theming.$daff-bronze, 80)
102
+ );
103
+ }
104
+
105
+ &.daff-success {
106
+ @include button.daff-button-theme-variant(
107
+ theming.daff-color(theming.$daff-green, 60),
108
+ theming.daff-color(theming.$daff-green, 70),
109
+ theming.daff-color(theming.$daff-green, 80)
110
+ );
111
+ }
112
+
113
+ &.daff-danger {
114
+ @include button.daff-button-theme-variant(
115
+ theming.daff-color(theming.$daff-red, 60),
116
+ theming.daff-color(theming.$daff-red, 70),
117
+ theming.daff-color(theming.$daff-red, 80)
118
+ );
119
+ }
120
+ }
121
+
122
+ .daff-raised-button {
123
+ @include raised.daff-raised-button-theme-variant(
124
+ theming.daff-illuminate($base, $gray, 2),
125
+ theming.daff-illuminate($base, $gray, 3),
126
+ theming.daff-color($gray)
127
+ );
128
+
129
+ &.daff-primary {
130
+ @include raised.daff-raised-button-theme-variant(
131
+ theming.daff-color($primary),
132
+ theming.daff-color($primary, 70),
133
+ theming.daff-color($primary)
134
+ );
135
+ }
136
+
137
+ &.daff-secondary {
138
+ @include raised.daff-raised-button-theme-variant(
139
+ theming.daff-color($secondary),
140
+ theming.daff-color($secondary, 70),
141
+ theming.daff-color($secondary)
142
+ );
143
+ }
144
+
145
+ &.daff-tertiary {
146
+ @include raised.daff-raised-button-theme-variant(
147
+ theming.daff-color($tertiary),
148
+ theming.daff-color($tertiary, 70),
149
+ theming.daff-color($tertiary)
150
+ );
151
+ }
152
+
153
+ &.daff-black {
154
+ @include raised.daff-raised-button-theme-variant(
155
+ $black,
156
+ theming.daff-color($gray, 100),
157
+ theming.daff-color($gray)
158
+ );
159
+ }
160
+
161
+ &.daff-white {
162
+ @include raised.daff-raised-button-theme-variant(
163
+ $white,
164
+ theming.daff-color($gray, 10),
165
+ theming.daff-color($gray)
166
+ );
167
+ }
168
+
169
+ &.daff-theme {
170
+ @include raised.daff-raised-button-theme-variant(
171
+ $base,
172
+ theming.daff-illuminate($base, $gray, 1),
173
+ $base
174
+ );
175
+ }
176
+
177
+ &.daff-theme-contrast {
178
+ @include raised.daff-raised-button-theme-variant(
179
+ $base-contrast,
180
+ theming.daff-illuminate($base-contrast, $gray, 1),
181
+ $base-contrast
182
+ );
183
+ }
184
+
185
+ &[disabled] {
186
+ @include raised.daff-raised-button-theme-variant(
187
+ theming.daff-illuminate($base, $gray, 3),
188
+ theming.daff-illuminate($base, $gray, 3),
189
+ theming.daff-illuminate($base, $gray, 6)
190
+ );
191
+ color: theming.daff-illuminate($base, $gray, 5);
192
+
193
+ &:hover {
194
+ box-shadow: 0 3px 5px rgba($black, 0.12), 0 1px 3px rgba($black, 0.08);
195
+ color: theming.daff-illuminate($base, $gray, 5);
196
+ }
197
+ }
198
+
199
+ &.daff-warn {
200
+ @include raised.daff-raised-button-theme-variant(
201
+ theming.daff-color(theming.$daff-bronze, 60),
202
+ theming.daff-color(theming.$daff-bronze, 70),
203
+ theming.daff-color(theming.$daff-bronze, 60)
204
+ );
205
+ }
206
+
207
+ &.daff-danger {
208
+ @include raised.daff-raised-button-theme-variant(
209
+ theming.daff-color(theming.$daff-red, 60),
210
+ theming.daff-color(theming.$daff-red, 70),
211
+ theming.daff-color(theming.$daff-red, 60)
212
+ );
213
+ }
214
+
215
+ &.daff-success {
216
+ @include raised.daff-raised-button-theme-variant(
217
+ theming.daff-color(theming.$daff-green, 60),
218
+ theming.daff-color(theming.$daff-green, 70),
219
+ theming.daff-color(theming.$daff-green, 60)
220
+ );
221
+ }
222
+ }
223
+
224
+ .daff-icon-button {
225
+ @include icon.daff-icon-button-theme-variant(
226
+ theming.daff-illuminate($base, $gray, 5),
227
+ theming.daff-illuminate($base, $gray, 6),
228
+ theming.daff-illuminate($base, $gray, 7)
229
+ );
230
+
231
+ &.daff-primary {
232
+ @include icon.daff-icon-button-theme-variant(
233
+ theming.daff-color($primary),
234
+ theming.daff-color($primary, 70),
235
+ theming.daff-color($primary, 80)
236
+ );
237
+ }
238
+
239
+ &.daff-secondary {
240
+ @include icon.daff-icon-button-theme-variant(
241
+ theming.daff-color($secondary),
242
+ theming.daff-color($secondary, 70),
243
+ theming.daff-color($secondary, 80)
244
+ );
245
+ }
246
+
247
+ &.daff-tertiary {
248
+ @include icon.daff-icon-button-theme-variant(
249
+ theming.daff-color($tertiary),
250
+ theming.daff-color($tertiary, 70),
251
+ theming.daff-color($tertiary, 80)
252
+ );
253
+ }
254
+
255
+ &.daff-black {
256
+ @include icon.daff-icon-button-theme-variant(
257
+ $black,
258
+ theming.daff-color($gray, 100),
259
+ theming.daff-color($gray, 80)
260
+ );
261
+ }
262
+
263
+ &.daff-white {
264
+ @include icon.daff-icon-button-theme-variant(
265
+ $white,
266
+ theming.daff-color($gray, 20),
267
+ theming.daff-color($gray, 30)
268
+ );
269
+ }
270
+
271
+ &.daff-theme {
272
+ @include icon.daff-icon-button-theme-variant(
273
+ $base,
274
+ theming.daff-illuminate($base, $gray, 1),
275
+ theming.daff-illuminate($base, $gray, 2)
276
+ );
277
+ }
278
+
279
+ &.daff-theme-contrast {
280
+ @include icon.daff-icon-button-theme-variant(
281
+ $base-contrast,
282
+ theming.daff-illuminate($base-contrast, $gray, 1),
283
+ theming.daff-illuminate($base-contrast, $gray, 2)
284
+ );
285
+ }
286
+ z
287
+ &[disabled] {
288
+ @include icon.daff-icon-button-theme-variant(
289
+ theming.daff-illuminate($base, $gray, 4),
290
+ theming.daff-illuminate($base, $gray, 4),
291
+ theming.daff-illuminate($base, $gray, 4)
292
+ );
293
+
294
+ &:hover {
295
+ color: theming.daff-illuminate($base, $gray, 4);
296
+ }
297
+ }
298
+
299
+ &.daff-warn {
300
+ @include icon.daff-icon-button-theme-variant(
301
+ theming.daff-color(theming.$daff-bronze, 60),
302
+ theming.daff-color(theming.$daff-bronze, 70),
303
+ theming.daff-color(theming.$daff-bronze, 80)
304
+ );
305
+ }
306
+
307
+ &.daff-danger {
308
+ @include icon.daff-icon-button-theme-variant(
309
+ theming.daff-color(theming.$daff-red, 60),
310
+ theming.daff-color(theming.$daff-red, 70),
311
+ theming.daff-color(theming.$daff-red, 80)
312
+ );
313
+ }
314
+
315
+ &.daff-success {
316
+ @include icon.daff-icon-button-theme-variant(
317
+ theming.daff-color(theming.$daff-green, 60),
318
+ theming.daff-color(theming.$daff-green, 70),
319
+ theming.daff-color(theming.$daff-green, 80)
320
+ );
321
+ }
322
+ }
323
+
324
+ .daff-stroked-button {
325
+ background-color: transparent;
326
+ border: 1px solid theming.daff-illuminate($base, $gray, 5);
327
+ color: theming.daff-text-contrast($base);
328
+
329
+ &:hover,
330
+ &:focus {
331
+ background-color: theming.daff-illuminate($base, $gray, 2);
332
+ border: 1px solid theming.daff-illuminate($base, $gray, 2);
333
+ color: theming.daff-text-contrast(
334
+ theming.daff-illuminate($base, $gray, 2)
335
+ );
336
+ }
337
+
338
+ &:active {
339
+ background-color: theming.daff-illuminate($base, $gray, 3);
340
+ border: 1px solid theming.daff-illuminate($base, $gray, 3);
341
+ color: theming.daff-text-contrast(
342
+ theming.daff-illuminate($base, $gray, 3)
343
+ );
344
+ }
345
+
346
+ &.daff-primary {
347
+ @include stroked.daff-stroked-button-theme-variant(
348
+ theming.daff-color($primary),
349
+ theming.daff-color($primary),
350
+ theming.daff-color($primary, 70)
351
+ );
352
+ }
353
+
354
+ &.daff-secondary {
355
+ @include stroked.daff-stroked-button-theme-variant(
356
+ theming.daff-color($secondary),
357
+ theming.daff-color($secondary),
358
+ theming.daff-color($secondary, 70)
359
+ );
360
+ }
361
+
362
+ &.daff-tertiary {
363
+ @include stroked.daff-stroked-button-theme-variant(
364
+ theming.daff-color($tertiary),
365
+ theming.daff-color($tertiary),
366
+ theming.daff-color($tertiary, 70)
367
+ );
368
+ }
369
+
370
+ &.daff-black {
371
+ @include stroked.daff-stroked-button-theme-variant(
372
+ $black,
373
+ $black,
374
+ theming.daff-color($gray, 100)
375
+ );
376
+ }
377
+
378
+ &.daff-white {
379
+ @include stroked.daff-stroked-button-theme-variant(
380
+ $white,
381
+ $white,
382
+ theming.daff-color($gray, 20)
383
+ );
384
+ }
385
+
386
+ &.daff-theme {
387
+ @include stroked.daff-stroked-button-theme-variant(
388
+ $base,
389
+ $base,
390
+ theming.daff-illuminate($base, $gray, 2)
391
+ );
392
+ }
393
+
394
+ &.daff-theme-contrast {
395
+ @include stroked.daff-stroked-button-theme-variant(
396
+ $base-contrast,
397
+ $base-contrast,
398
+ theming.daff-illuminate($base-contrast, $gray, 2)
399
+ );
400
+ }
401
+
402
+ &[disabled] {
403
+ @include stroked.daff-stroked-button-theme-variant(
404
+ theming.daff-illuminate($base, $gray, 3),
405
+ theming.daff-illuminate($base, $gray, 5),
406
+ transparent
407
+ );
408
+
409
+ &:hover {
410
+ background-color: transparent;
411
+ color: theming.daff-illuminate($base, $gray, 5);
412
+ }
413
+ }
414
+
415
+ &.daff-warn {
416
+ @include stroked.daff-stroked-button-theme-variant(
417
+ theming.daff-color(theming.$daff-bronze, 60),
418
+ theming.daff-color(theming.$daff-bronze, 60),
419
+ theming.daff-color(theming.$daff-bronze, 70)
420
+ );
421
+ }
422
+
423
+ &.daff-danger {
424
+ @include stroked.daff-stroked-button-theme-variant(
425
+ theming.daff-color(theming.$daff-red, 60),
426
+ theming.daff-color(theming.$daff-red, 60),
427
+ theming.daff-color(theming.$daff-red, 70)
428
+ );
429
+ }
430
+
431
+ &.daff-success {
432
+ @include stroked.daff-stroked-button-theme-variant(
433
+ theming.daff-color(theming.$daff-green, 60),
434
+ theming.daff-color(theming.$daff-green, 60),
435
+ theming.daff-color(theming.$daff-green, 70)
436
+ );
437
+ }
438
+ }
439
+
440
+ .daff-underline-button {
441
+ @include underline.daff-underline-button-theme-variant(
442
+ theming.daff-illuminate($base, $gray, 7)
443
+ );
444
+
445
+ &.daff-primary {
446
+ @include underline.daff-underline-button-theme-variant(
447
+ theming.daff-color($primary)
448
+ );
449
+ }
450
+
451
+ &.daff-secondary {
452
+ @include underline.daff-underline-button-theme-variant(
453
+ theming.daff-color($secondary)
454
+ );
455
+ }
456
+
457
+ &.daff-tertiary {
458
+ @include underline.daff-underline-button-theme-variant(
459
+ theming.daff-color($tertiary)
460
+ );
461
+ }
462
+
463
+ &.daff-black {
464
+ @include underline.daff-underline-button-theme-variant($black);
465
+ }
466
+
467
+ &.daff-white {
468
+ @include underline.daff-underline-button-theme-variant($white);
469
+ }
470
+
471
+ &.daff-theme {
472
+ @include underline.daff-underline-button-theme-variant($base);
473
+ }
474
+
475
+ &.daff-theme-contrast {
476
+ @include underline.daff-underline-button-theme-variant($base-contrast);
477
+ }
478
+
479
+ &[disabled] {
480
+ @include underline.daff-underline-button-theme-variant(
481
+ theming.daff-illuminate($base, $gray, 4)
482
+ );
483
+ }
484
+
485
+ &.daff-warn {
486
+ @include underline.daff-underline-button-theme-variant(
487
+ theming.daff-color(theming.$daff-bronze, 60)
488
+ );
489
+ }
490
+
491
+ &.daff-danger {
492
+ @include underline.daff-underline-button-theme-variant(
493
+ theming.daff-color(theming.$daff-red, 60)
494
+ );
495
+ }
496
+
497
+ &.daff-success {
498
+ @include underline.daff-underline-button-theme-variant(
499
+ theming.daff-color(theming.$daff-green, 60)
500
+ );
501
+ }
502
+ }
503
+
504
+ .daff-button,
505
+ .daff-stroked-button,
506
+ .daff-underline-button,
507
+ .daff-icon-button {
508
+ @include focus.daff-button-focus-theme-variant(
509
+ theming.daff-color($gray)
510
+ );
511
+
512
+ &.daff-primary {
513
+ @include focus.daff-button-focus-theme-variant(
514
+ theming.daff-color($primary)
515
+ );
516
+ }
517
+
518
+ &.daff-secondary {
519
+ @include focus.daff-button-focus-theme-variant(
520
+ theming.daff-color($secondary)
521
+ );
522
+ }
523
+
524
+ &.daff-tertiary {
525
+ @include focus.daff-button-focus-theme-variant(
526
+ theming.daff-color($tertiary)
527
+ );
528
+ }
529
+
530
+ &.daff-black {
531
+ @include focus.daff-button-focus-theme-variant(
532
+ theming.daff-color($gray)
533
+ );
534
+ }
535
+
536
+ &.daff-white {
537
+ @include focus.daff-button-focus-theme-variant(
538
+ theming.daff-color($gray)
539
+ );
540
+ }
541
+
542
+ &.daff-theme {
543
+ @include focus.daff-button-focus-theme-variant($base);
544
+ }
545
+
546
+ &.daff-theme-contrast {
547
+ @include focus.daff-button-focus-theme-variant(
548
+ theming.daff-color($gray)
549
+ );
550
+ }
551
+
552
+ &.daff-warn {
553
+ @include focus.daff-button-focus-theme-variant(
554
+ theming.daff-color(theming.$daff-bronze, 60)
555
+ );
556
+ }
557
+
558
+ &.daff-danger {
559
+ @include focus.daff-button-focus-theme-variant(
560
+ theming.daff-color(theming.$daff-red, 60)
561
+ );
562
+ }
563
+
564
+ &.daff-success {
565
+ @include focus.daff-button-focus-theme-variant(
566
+ theming.daff-color(theming.$daff-green, 60)
567
+ );
568
+ }
569
+ }
570
+ }
package/src/atoms/form/error-message/error-message-theme.scss ADDED
@@ -0,0 +1,7 @@
1
+ @use '../../../../scss/theming';
2
+
3
+ @mixin daff-error-message-theme($theme) {
4
+ .daff-error-message {
5
+ color: theming.daff-color(theming.$daff-red, 60);
6
+ }
7
+ }
package/src/atoms/form/form-field/form-field/form-field-theme.scss ADDED
@@ -0,0 +1,38 @@
1
+ @use 'sass:map';
2
+ @use '../../../../../scss/core';
3
+ @use '../../../../../scss/theming';
4
+
5
+ @mixin daff-form-field-theme($theme) {
6
+ $primary: map.get($theme, primary);
7
+ $secondary: map.get($theme, secondary);
8
+ $tertiary: map.get($theme, tertiary);
9
+ $base: core.daff-map-deep-get($theme, 'core.base');
10
+ $base-contrast: core.daff-map-deep-get($theme, 'core.base-contrast');
11
+ $gray: core.daff-map-deep-get($theme, 'core.gray');
12
+
13
+ .daff-form-field {
14
+ &__control {
15
+ background: $base;
16
+ border: 1px solid theming.daff-illuminate($base, $gray, 3);
17
+ color: theming.daff-illuminate($base-contrast, $gray, 4);
18
+
19
+ &:focus {
20
+ border: 1px solid $base-contrast;
21
+ }
22
+
23
+ &.daff-error {
24
+ border: 1px solid theming.daff-color(theming.$daff-red, 60);
25
+
26
+ &:focus {
27
+ border: 1px solid theming.daff-color(theming.$daff-red, 60);
28
+ }
29
+ }
30
+
31
+ &.daff-valid {
32
+ > * {
33
+ color: $base-contrast;
34
+ }
35
+ }
36
+ }
37
+ }
38
+ }
package/src/atoms/form/input/input-theme.scss ADDED
@@ -0,0 +1,16 @@
1
+ @use '../../../../scss/core';
2
+ @use '../../../../scss/theming';
3
+
4
+ @mixin daff-input-theme($theme) {
5
+ $base: core.daff-map-deep-get($theme, 'core.base');
6
+ $base-contrast: core.daff-map-deep-get($theme, 'core.base-contrast');
7
+
8
+ :host {
9
+ background: $base;
10
+ color: $base-contrast;
11
+
12
+ &::placeholder {
13
+ color: transparent;
14
+ }
15
+ }
16
+ }
package/src/atoms/form/radio/radio.scss ADDED
File without changes
package/src/atoms/form/select/select/select-theme.scss ADDED
@@ -0,0 +1,19 @@
1
+ @use 'sass:map';
2
+ @use '../../../../../scss/core';
3
+ @use '../../../../../scss/theming';
4
+
5
+ @mixin daff-select-theme($theme) {
6
+ $gray: core.daff-map-deep-get($theme, 'core.gray');
7
+ $base-contrast: core.daff-map-deep-get($theme, 'core.base-contrast');
8
+ $black: core.daff-map-deep-get($theme, 'core.black');
9
+
10
+ .daff-native-select {
11
+ color: theming.daff-illuminate($base-contrast, $gray, 4);
12
+
13
+ // removes dotted border on in FF
14
+ &:-moz-focusring {
15
+ color: transparent;
16
+ text-shadow: 0 0 0 $black;
17
+ }
18
+ }
19
+ }
package/src/atoms/loading-icon/loading-icon-theme.scss ADDED
@@ -0,0 +1,57 @@
1
+ @use 'sass:map';
2
+ @use '../../../scss/core';
3
+ @use '../../../scss/theming';
4
+
5
+ @mixin daff-loading-icon-theme($theme) {
6
+ $primary: map.get($theme, primary);
7
+ $secondary: map.get($theme, secondary);
8
+ $tertiary: map.get($theme, tertiary);
9
+ $base: core.daff-map-deep-get($theme, 'core.base');
10
+ $base-contrast: core.daff-map-deep-get($theme, 'core.base-contrast');
11
+ $white: core.daff-map-deep-get($theme, 'core.white');
12
+ $black: core.daff-map-deep-get($theme, 'core.black');
13
+
14
+ .daff-loading-icon {
15
+ &.daff-primary {
16
+ circle {
17
+ stroke: theming.daff-color($primary);
18
+ }
19
+ }
20
+
21
+ &.daff-secondary {
22
+ circle {
23
+ stroke: theming.daff-color($secondary);
24
+ }
25
+ }
26
+
27
+ &.daff-tertiary {
28
+ circle {
29
+ stroke: theming.daff-color($tertiary);
30
+ }
31
+ }
32
+
33
+ &.daff-theme {
34
+ circle {
35
+ stroke: $base;
36
+ }
37
+ }
38
+
39
+ &.daff-theme-contrast {
40
+ circle {
41
+ stroke: $base-contrast;
42
+ }
43
+ }
44
+
45
+ &.daff-black {
46
+ circle {
47
+ stroke: $black;
48
+ }
49
+ }
50
+
51
+ &.daff-white {
52
+ circle {
53
+ stroke: $white;
54
+ }
55
+ }
56
+ }
57
+ }