@dialpad/dialtone 7.0.0-beta.6 → 7.0.0-beta.7

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 (18) hide show
  1. package/lib/build/less/components/button.less +12 -12
  2. package/lib/build/less/components/input.less +1 -1
  3. package/lib/build/less/components/link.less +2 -2
  4. package/lib/build/less/components/list-group.less +3 -3
  5. package/lib/build/less/components/radio-checkbox.less +1 -1
  6. package/lib/build/less/components/selects.less +1 -1
  7. package/lib/build/less/components/tabs.less +4 -4
  8. package/lib/build/less/components/toggle.less +1 -1
  9. package/lib/build/less/dialtone-globals.less +8 -0
  10. package/lib/build/less/themes/default.less +6 -0
  11. package/lib/build/less/themes/example.less +29 -0
  12. package/lib/build/less/variables/colors.less +4 -4
  13. package/lib/build/svg/system/ai-notes.svg +5 -0
  14. package/lib/dist/css/dialtone.css +47 -35
  15. package/lib/dist/css/dialtone.min.css +1 -1
  16. package/lib/dist/svg/system/ai-notes.svg +1 -0
  17. package/lib/dist/vue/icons/IconAiNotes.vue +3 -0
  18. package/package.json +1 -1
package/lib/build/less/components/button.less CHANGED
@@ -20,7 +20,7 @@
20
20
  .d-btn {
21
21
  // Component specific CSS Vars
22
22
  // ------------------------------------------------------------------------
23
- --button--fc: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
23
+ --button--fc: var(--primary-color);
24
24
  --button--bgc: transparent;
25
25
  --button--bc: transparent;
26
26
  --button--br: var(--base--corner-radius);
@@ -52,15 +52,15 @@
52
52
  // -- STATES
53
53
  // ------------------------------------------------------------------------
54
54
  &:hover {
55
- --button--fc: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
56
- --button--bgc: hsla(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l) ~' / ' 3%);
55
+ --button--fc: var(--primary-color-hover);
56
+ --button--bgc: hsla(var(--primary-color-hsl) ~' / ' 3%);
57
57
  }
58
58
 
59
59
  &:active,
60
60
  &.d-btn--active,
61
61
  &.d-btn--active:active {
62
- --button--fc: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
63
- --button--bgc: hsla(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l) ~' / ' 9%);
62
+ --button--fc: var(--primary-color-hover);
63
+ --button--bgc: hsla(var(--primary-color-hsl) ~' / ' 9%);
64
64
  }
65
65
 
66
66
 
@@ -276,25 +276,25 @@
276
276
  // $$ OUTLINED BUTTON
277
277
  // ----------------------------------------------------------------------------
278
278
  .d-btn--outlined {
279
- --button--bc: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
279
+ --button--bc: var(--primary-color);
280
280
  }
281
281
 
282
282
  // $$ PRIMARY BUTTON
283
283
  // ----------------------------------------------------------------------------
284
284
  .d-btn--primary {
285
285
  --button--fc: var(--white);
286
- --button--bgc: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
286
+ --button--bgc: var(--primary-color);
287
287
 
288
288
  &:hover {
289
289
  --button--fc: var(--white);
290
- --button--bgc: hsl(var(--purple-400-h), var(--purple-400-s), 65%);
290
+ --button--bgc: hsl(var(--primary-color-h), var(--primary-color-s), 65%);
291
291
  }
292
292
 
293
293
  &:active,
294
294
  &.d-btn--active,
295
295
  &.d-btn--active:active {
296
296
  --button--fc: var(--white);
297
- --button--bgc: hsl(var(--purple-400-h), var(--purple-400-s), 42%);
297
+ --button--bgc: hsl(var(--primary-color-h), var(--primary-color-s), 42%);
298
298
  }
299
299
  }
300
300
 
@@ -397,18 +397,18 @@
397
397
 
398
398
  // -- PRIMARY
399
399
  &.d-btn--primary {
400
- --button--fc: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
400
+ --button--fc: var(--primary-color);
401
401
  --button--bgc: hsl(var(--purple-100-h), var(--purple-100-s), 100%);
402
402
 
403
403
  &:hover {
404
- --button--fc: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
404
+ --button--fc: var(--primary-color-hover);
405
405
  --button--bgc: hsl(var(--purple-100-h), var(--purple-100-s), 94%);
406
406
  }
407
407
 
408
408
  &:active,
409
409
  &.d-btn--active,
410
410
  &.d-btn--active:active {
411
- --button--fc: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
411
+ --button--fc: var(--primary-color-hover);
412
412
  --button--bgc: hsl(var(--purple-100-h), var(--purple-100-s), 91%);
413
413
  }
414
414
  }
package/lib/build/less/components/input.less CHANGED
@@ -26,7 +26,7 @@
26
26
  .d-input__wrapper {
27
27
  // Component CSS Vars
28
28
  // ------------------------------------------------------------------------
29
- --input--focus-bc: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
29
+ --input--focus-bc: var(--primary-color);
30
30
  --input--bc: var(--black-600);
31
31
  --input--bgc: var(--white);
32
32
  --input--fc: var(--black-800);
package/lib/build/less/components/link.less CHANGED
@@ -21,7 +21,7 @@
21
21
  box-sizing: border-box;
22
22
  margin: var(--su0);
23
23
  padding: var(--su0);
24
- color: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
24
+ color: var(--primary-color);
25
25
  font: inherit;
26
26
  text-decoration: underline;
27
27
  background-color: transparent;
@@ -35,7 +35,7 @@
35
35
  fill: currentColor;
36
36
 
37
37
  &:hover {
38
- color: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
38
+ color: var(--primary-color-hover);
39
39
  text-decoration: none;
40
40
  cursor: pointer;
41
41
  }
package/lib/build/less/components/list-group.less CHANGED
@@ -33,16 +33,16 @@
33
33
 
34
34
  &:hover {
35
35
  color: var(--black-900);
36
- background-color: hsla(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l) ~' / ' 85%);
36
+ background-color: hsla(var(--primary-color-hsl) ~' / ' 85%);
37
37
  }
38
38
 
39
39
  &-selected {
40
40
  color: var(--white);
41
- background-color: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
41
+ background-color: var(--primary-color);
42
42
 
43
43
  &:hover {
44
44
  color: var(--white);
45
- background-color: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) + 10%));
45
+ background-color: hsl(var(--primary-color-h) var(--primary-color-s) calc(var(--primary-color-l) + 10%));
46
46
  }
47
47
  }
48
48
  }
package/lib/build/less/components/radio-checkbox.less CHANGED
@@ -25,7 +25,7 @@
25
25
  .d-radio {
26
26
  // Component specific CSS Vars
27
27
  // ------------------------------------------------------------------------
28
- --check-radio--color: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
28
+ --check-radio--color: var(--primary-color);
29
29
  --check-radio--bc: var(--black-600);
30
30
  --check-radio--bgc: var(--white);
31
31
 
package/lib/build/less/components/selects.less CHANGED
@@ -115,7 +115,7 @@
115
115
  --select--bc: var(--black-600);
116
116
 
117
117
  &:focus {
118
- --select--bc: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
118
+ --select--bc: var(--primary-color);
119
119
 
120
120
  box-shadow: var(--bs-focus-ring);
121
121
  }
package/lib/build/less/components/tabs.less CHANGED
@@ -103,18 +103,18 @@
103
103
  // $ SELECTED STYLE
104
104
  // ----------------------------------------------------------------------------
105
105
  .d-tab--selected {
106
- --tab--fc: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
106
+ --tab--fc: var(--primary-color);
107
107
 
108
108
  z-index: var(--zi-selected);
109
109
 
110
110
  &:hover {
111
- --tab--bgc: hsla(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l) ~' / ' 10%);
112
- --tab--fc: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
111
+ --tab--bgc: hsla(var(--primary-color-hsl) ~' / ' 10%);
112
+ --tab--fc: var(--primary-color-hover);
113
113
  }
114
114
 
115
115
  &::after,
116
116
  &:hover::after {
117
- --tab--bgc: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
117
+ --tab--bgc: var(--primary-color);
118
118
  }
119
119
  }
120
120
 
package/lib/build/less/components/toggle.less CHANGED
@@ -74,7 +74,7 @@
74
74
  // $$ CHECKED TOGGLE
75
75
  // ----------------------------------------------------------------------------
76
76
  .d-toggle--checked {
77
- --toggle-bc: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
77
+ --toggle-bc: var(--primary-color);
78
78
 
79
79
  .d-toggle__inner {
80
80
  left: var(--su6);
package/lib/build/less/dialtone-globals.less CHANGED
@@ -51,6 +51,14 @@ body {
51
51
  }
52
52
  }
53
53
 
54
+ .d-svg-primary--stroke {
55
+ stroke: var(--primary-color);
56
+ }
57
+
58
+ .d-svg-primary--fill {
59
+ fill: var(--primary-color);
60
+ }
61
+
54
62
  // ============================================================================
55
63
  // @ FOCUS VISIBLE
56
64
  // ----------------------------------------------------------------------------
package/lib/build/less/themes/default.less CHANGED
@@ -34,6 +34,12 @@
34
34
 
35
35
 
36
36
  @theme-vars: {
37
+ primary-color-h: var(--purple-400-h);
38
+ primary-color-s: var(--purple-400-s);
39
+ primary-color-l: var(--purple-400-l);
40
+ primary-color-hsl: var(--primary-color-h) var(--primary-color-s) var(--primary-color-l);
41
+ primary-color: hsl(var(--primary-color-h) var(--primary-color-s) var(--primary-color-l));
42
+ primary-color-hover: hsl(var(--primary-color-h) var(--primary-color-s) calc(var(--primary-color-l) - 10%));
37
43
  nav-background-color-h: var(--purple-600-h);
38
44
  nav-background-color-s: var(--purple-600-s);
39
45
  nav-background-color-l: var(--purple-600-l);
package/lib/build/less/themes/example.less CHANGED
@@ -25,8 +25,16 @@
25
25
  // $$ SET THESE
26
26
  // Currently only the following items are themeable in Dialtone.
27
27
  //
28
+ // @primary-color: This is used for all selected and primary states
29
+ // in elements and components (i.e. buttons, input focus,
30
+ // links, etc).
31
+ //
32
+ // @primary-color--hover: Hover state color for @primary-color.
33
+ //
28
34
  // @nav__background-color: This sets the navigation background color.
29
35
  // ----------------------------------------------------------------------------
36
+ @primary-color: @purple-400;
37
+ @primary-color--hover: darken(@primary-color, 10%);
30
38
  @nav__background-color: @black-400;
31
39
 
32
40
  // \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
@@ -35,6 +43,14 @@
35
43
  // Warning: We use these to extract the HSL values of the HEX code and
36
44
  // restate them in the CSS Variables.
37
45
  // ----------------------------------------------------------------------------
46
+ @primary-color--h: hue(@primary-color);
47
+ @primary-color--s: saturation(@primary-color);
48
+ @primary-color--l: lightness(@primary-color);
49
+
50
+ @primary-color--hover--h: hue(@primary-color--hover);
51
+ @primary-color--hover--s: saturation(@primary-color--hover);
52
+ @primary-color--hover--l: lightness(@primary-color--hover);
53
+
38
54
  @nav__background-color--h: hue(@nav__background-color);
39
55
  @nav__background-color--s: saturation(@nav__background-color);
40
56
  @nav__background-color--l: lightness(@nav__background-color);
@@ -43,10 +59,23 @@
43
59
  // -- RE-DECLARE CSS VARIABLES WITH NEW COLORS
44
60
  // ----------------------------------------------------------------------------
45
61
  @theme-vars: {
62
+ primary-color: @primary-color;
63
+ primary-color--h: @primary-color--h;
64
+ primary-color--s: @primary-color--s;
65
+ primary-color--l: @primary-color--l;
66
+
67
+ primary-color--hover: @primary-color--hover;
68
+ primary-color--hover--h: @primary-color--hover--h;
69
+ primary-color--hover--s: @primary-color--hover--s;
70
+ primary-color--hover--l: @primary-color--l;
71
+
46
72
  nav__background-color: @nav__background-color;
47
73
  nav__background-color--h: @nav__background-color--h;
48
74
  nav__background-color--s: @nav__background-color--s;
49
75
  nav__background-color--l: @nav__background-color--l;
76
+
77
+ btn--inverted__bg--hover: fade(mix(#fff, @primary-color, 90%), 25%);
78
+ btn--inverted--primary__bg--hover: mix(#fff, @primary-color, 90%);
50
79
  }
51
80
 
52
81
  // ============================================================================
package/lib/build/less/variables/colors.less CHANGED
@@ -91,9 +91,9 @@
91
91
  success-color-hsl: var(--green-500-hsl);
92
92
  success-color-hover: var(--green-500);
93
93
 
94
- muted-color: var(--fc-muted);
94
+ muted-color: var(--black-800);
95
95
  muted-color-hsl: var(--black-800-hsl);
96
- muted-color-hover: var(--fc-muted);
96
+ muted-color-hover: var(--black-800);
97
97
 
98
98
  inverted-color: var(--fc-primary-inverted);
99
99
  inverted-color-hsl: var(--black-100-hsl);
@@ -105,11 +105,11 @@
105
105
  // Used on inputs, buttons, and other focusable elements.
106
106
  // ----------------------------------------------------------------------------
107
107
  @focus-rings: {
108
- focus-ring: hsla(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l) ~' / ' 75%);
108
+ focus-ring: hsla(var(--primary-color-hsl) ~' / ' 75%);
109
109
  focus-ring-success: hsla(var(--success-color-hsl) ~' / ' 75%);
110
110
  focus-ring-warning: hsla(var(--warning-color-hsl) ~' / ' 75%);
111
111
  focus-ring-error: hsla(var(--error-color-hsl) ~' / ' 75%);
112
- focus-ring-muted: hsla(var(--muted-color-hsl) ~' / ' 25%);
112
+ focus-ring-muted: var(--focus-ring);
113
113
  focus-ring-inverted: hsla(var(--inverted-color-hsl) ~' / ' 50%);
114
114
  }
115
115
 
package/lib/build/svg/system/ai-notes.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M6.00012 2.875C5.70175 2.875 5.41561 2.99353 5.20463 3.2045C4.99365 3.41548 4.87512 3.70163 4.87512 4V20C4.87512 20.2984 4.99365 20.5845 5.20463 20.7955C5.41561 21.0065 5.70175 21.125 6.00012 21.125H18.0001C18.2985 21.125 18.5846 21.0065 18.7956 20.7955C19.0066 20.5845 19.1251 20.2984 19.1251 20C19.1251 19.5168 19.5169 19.125 20.0001 19.125C20.4834 19.125 20.8751 19.5168 20.8751 20C20.8751 20.7625 20.5722 21.4938 20.0331 22.0329C19.4939 22.5721 18.7626 22.875 18.0001 22.875H6.00012C5.23762 22.875 4.50636 22.5721 3.96719 22.0329C3.42802 21.4938 3.12512 20.7625 3.12512 20V4C3.12512 3.2375 3.42802 2.50624 3.96719 1.96707C4.50636 1.4279 5.23762 1.125 6.00012 1.125H14.5001C14.7322 1.125 14.9547 1.21719 15.1188 1.38128L17.1188 3.38128C17.4605 3.72299 17.4605 4.27701 17.1188 4.61872C16.7771 4.96043 16.2231 4.96043 15.8814 4.61872L14.1377 2.875H6.00012Z" fill="black"/>
3
+ <path d="M21.0699 8.09701C21.0699 8.62594 20.6411 9.05473 20.1122 9.05473C19.5833 9.05473 19.1545 8.62594 19.1545 8.09701C19.1545 7.56809 19.5833 7.1393 20.1122 7.1393C20.6411 7.1393 21.0699 7.56809 21.0699 8.09701Z" fill="black"/>
4
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M13.4807 9.05908C13.2397 9.05908 12.8723 9.26151 12.6829 9.83204L12.6819 9.83517L10.6853 15.7762C10.5314 16.2343 10.0352 16.4809 9.57717 16.3269C9.11909 16.173 8.87254 15.6768 9.02649 15.2188L11.022 9.28082L11.0226 9.27911C11.3688 8.23776 12.2575 7.30908 13.4807 7.30908C14.7035 7.30908 15.5908 8.23582 15.9377 9.27559L15.938 9.27673L17.4756 13.8518C17.6652 14.4206 18.0319 14.6225 18.2727 14.6225C18.8824 14.6225 19.2545 14.1823 19.2545 13.7838V10.6522C19.2545 10.1689 19.6463 9.77715 20.1295 9.77715C20.6128 9.77715 21.0045 10.1689 21.0045 10.6522V13.7838C21.0045 15.2783 19.7141 16.3725 18.2727 16.3725C17.0511 16.3725 16.1627 15.4461 15.8157 14.406L15.8154 14.4049L14.2785 9.83204L14.2777 9.82983C14.0881 9.26064 13.7222 9.05908 13.4807 9.05908Z" fill="black"/>
5
+ </svg>
package/lib/dist/css/dialtone.css CHANGED
@@ -756,7 +756,7 @@ body {
756
756
  color: var(--inverted-color);
757
757
  }
758
758
  .d-btn {
759
- --button--fc: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
759
+ --button--fc: var(--primary-color);
760
760
  --button--bgc: transparent;
761
761
  --button--bc: transparent;
762
762
  --button--br: var(--base--corner-radius);
@@ -785,14 +785,14 @@ body {
785
785
  fill: currentColor;
786
786
  }
787
787
  .d-btn:hover {
788
- --button--fc: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
789
- --button--bgc: hsla(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l) / 3%);
788
+ --button--fc: var(--primary-color-hover);
789
+ --button--bgc: hsla(var(--primary-color-hsl) / 3%);
790
790
  }
791
791
  .d-btn:active,
792
792
  .d-btn.d-btn--active,
793
793
  .d-btn.d-btn--active:active {
794
- --button--fc: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
795
- --button--bgc: hsla(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l) / 9%);
794
+ --button--fc: var(--primary-color-hover);
795
+ --button--bgc: hsla(var(--primary-color-hsl) / 9%);
796
796
  }
797
797
  .d-btn.focus-visible.js-focus-visible, .js-focus-visible .d-btn.focus-visible {
798
798
  outline: none;
@@ -947,21 +947,21 @@ body {
947
947
  --button--br: var(--br-circle);
948
948
  }
949
949
  .d-btn--outlined {
950
- --button--bc: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
950
+ --button--bc: var(--primary-color);
951
951
  }
952
952
  .d-btn--primary {
953
953
  --button--fc: var(--white);
954
- --button--bgc: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
954
+ --button--bgc: var(--primary-color);
955
955
  }
956
956
  .d-btn--primary:hover {
957
957
  --button--fc: var(--white);
958
- --button--bgc: hsl(var(--purple-400-h), var(--purple-400-s), 65%);
958
+ --button--bgc: hsl(var(--primary-color-h), var(--primary-color-s), 65%);
959
959
  }
960
960
  .d-btn--primary:active,
961
961
  .d-btn--primary.d-btn--active,
962
962
  .d-btn--primary.d-btn--active:active {
963
963
  --button--fc: var(--white);
964
- --button--bgc: hsl(var(--purple-400-h), var(--purple-400-s), 42%);
964
+ --button--bgc: hsl(var(--primary-color-h), var(--primary-color-s), 42%);
965
965
  }
966
966
  .d-btn--muted {
967
967
  --button--fc: var(--muted-color);
@@ -1045,17 +1045,17 @@ body {
1045
1045
  --button--bc: var(--white);
1046
1046
  }
1047
1047
  .d-btn--inverted.d-btn--primary {
1048
- --button--fc: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
1048
+ --button--fc: var(--primary-color);
1049
1049
  --button--bgc: hsl(var(--purple-100-h), var(--purple-100-s), 100%);
1050
1050
  }
1051
1051
  .d-btn--inverted.d-btn--primary:hover {
1052
- --button--fc: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
1052
+ --button--fc: var(--primary-color-hover);
1053
1053
  --button--bgc: hsl(var(--purple-100-h), var(--purple-100-s), 94%);
1054
1054
  }
1055
1055
  .d-btn--inverted.d-btn--primary:active,
1056
1056
  .d-btn--inverted.d-btn--primary.d-btn--active,
1057
1057
  .d-btn--inverted.d-btn--primary.d-btn--active:active {
1058
- --button--fc: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
1058
+ --button--fc: var(--primary-color-hover);
1059
1059
  --button--bgc: hsl(var(--purple-100-h), var(--purple-100-s), 91%);
1060
1060
  }
1061
1061
  .d-btn--icon-only {
@@ -1251,7 +1251,7 @@ body {
1251
1251
  height: 1.8rem;
1252
1252
  }
1253
1253
  .d-chip__close {
1254
- --button--fc: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
1254
+ --button--fc: var(--primary-color);
1255
1255
  --button--bgc: transparent;
1256
1256
  --button--bc: transparent;
1257
1257
  --button--br: var(--base--corner-radius);
@@ -1288,14 +1288,14 @@ body {
1288
1288
  border-width: var(--su0);
1289
1289
  }
1290
1290
  .d-chip__close:hover {
1291
- --button--fc: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
1292
- --button--bgc: hsla(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l) / 3%);
1291
+ --button--fc: var(--primary-color-hover);
1292
+ --button--bgc: hsla(var(--primary-color-hsl) / 3%);
1293
1293
  }
1294
1294
  .d-chip__close:active,
1295
1295
  .d-chip__close.d-btn--active,
1296
1296
  .d-chip__close.d-btn--active:active {
1297
- --button--fc: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
1298
- --button--bgc: hsla(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l) / 9%);
1297
+ --button--fc: var(--primary-color-hover);
1298
+ --button--bgc: hsla(var(--primary-color-hsl) / 9%);
1299
1299
  }
1300
1300
  .d-chip__close.focus-visible.js-focus-visible, .js-focus-visible .d-chip__close.focus-visible {
1301
1301
  outline: none;
@@ -1543,7 +1543,7 @@ legend .d-label {
1543
1543
  .d-input,
1544
1544
  .d-textarea,
1545
1545
  .d-input__wrapper {
1546
- --input--focus-bc: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
1546
+ --input--focus-bc: var(--primary-color);
1547
1547
  --input--bc: var(--black-600);
1548
1548
  --input--bgc: var(--white);
1549
1549
  --input--fc: var(--black-800);
@@ -1806,7 +1806,7 @@ legend .d-label {
1806
1806
  box-sizing: border-box;
1807
1807
  margin: var(--su0);
1808
1808
  padding: var(--su0);
1809
- color: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
1809
+ color: var(--primary-color);
1810
1810
  font: inherit;
1811
1811
  text-decoration: underline;
1812
1812
  background-color: transparent;
@@ -1818,7 +1818,7 @@ legend .d-label {
1818
1818
  fill: currentColor;
1819
1819
  }
1820
1820
  .d-link:hover {
1821
- color: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
1821
+ color: var(--primary-color-hover);
1822
1822
  text-decoration: none;
1823
1823
  cursor: pointer;
1824
1824
  }
@@ -1940,15 +1940,15 @@ legend .d-label {
1940
1940
  }
1941
1941
  .d-list-group--link:hover {
1942
1942
  color: var(--black-900);
1943
- background-color: hsla(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l) / 85%);
1943
+ background-color: hsla(var(--primary-color-hsl) / 85%);
1944
1944
  }
1945
1945
  .d-list-group--link-selected {
1946
1946
  color: var(--white);
1947
- background-color: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
1947
+ background-color: var(--primary-color);
1948
1948
  }
1949
1949
  .d-list-group--link-selected:hover {
1950
1950
  color: var(--white);
1951
- background-color: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) + 10%));
1951
+ background-color: hsl(var(--primary-color-h) var(--primary-color-s) calc(var(--primary-color-l) + 10%));
1952
1952
  }
1953
1953
  .d-modal {
1954
1954
  --modal--bgc: hsla(var(--black-900-hsl) / 60%);
@@ -2451,7 +2451,7 @@ legend .d-label {
2451
2451
  }
2452
2452
  .d-checkbox,
2453
2453
  .d-radio {
2454
- --check-radio--color: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
2454
+ --check-radio--color: var(--primary-color);
2455
2455
  --check-radio--bc: var(--black-600);
2456
2456
  --check-radio--bgc: var(--white);
2457
2457
  flex: 0 auto;
@@ -2809,7 +2809,7 @@ legend .d-label {
2809
2809
  -webkit-appearance: none;
2810
2810
  -moz-appearance: none;
2811
2811
  appearance: none;
2812
- --input--focus-bc: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
2812
+ --input--focus-bc: var(--primary-color);
2813
2813
  --input--bc: var(--black-600);
2814
2814
  --input--bgc: var(--white);
2815
2815
  --input--fc: var(--black-800);
@@ -2867,7 +2867,7 @@ legend .d-label {
2867
2867
  cursor: not-allowed;
2868
2868
  }
2869
2869
  .d-select__input:focus {
2870
- --select--bc: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
2870
+ --select--bc: var(--primary-color);
2871
2871
  box-shadow: var(--bs-focus-ring);
2872
2872
  }
2873
2873
  .d-select__input:disabled {
@@ -3069,16 +3069,16 @@ legend .d-label {
3069
3069
  }
3070
3070
  }
3071
3071
  .d-tab--selected {
3072
- --tab--fc: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
3072
+ --tab--fc: var(--primary-color);
3073
3073
  z-index: var(--zi-selected);
3074
3074
  }
3075
3075
  .d-tab--selected:hover {
3076
- --tab--bgc: hsla(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l) / 10%);
3077
- --tab--fc: hsl(var(--purple-400-h) var(--purple-400-s) calc(var(--purple-400-l) - 10%));
3076
+ --tab--bgc: hsla(var(--primary-color-hsl) / 10%);
3077
+ --tab--fc: var(--primary-color-hover);
3078
3078
  }
3079
3079
  .d-tab--selected::after,
3080
3080
  .d-tab--selected:hover::after {
3081
- --tab--bgc: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
3081
+ --tab--bgc: var(--primary-color);
3082
3082
  }
3083
3083
  .d-tablist--inverted {
3084
3084
  --tab--fc: var(--white);
@@ -3345,7 +3345,7 @@ legend .d-label {
3345
3345
  box-shadow: var(--bs-focus-ring);
3346
3346
  }
3347
3347
  .d-toggle--checked {
3348
- --toggle-bc: hsl(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l));
3348
+ --toggle-bc: var(--primary-color);
3349
3349
  }
3350
3350
  .d-toggle--checked .d-toggle__inner {
3351
3351
  left: var(--su6);
@@ -19900,6 +19900,12 @@ body {
19900
19900
  .d-svg.d-svg--system {
19901
19901
  fill: currentColor;
19902
19902
  }
19903
+ .d-svg-primary--stroke {
19904
+ stroke: var(--primary-color);
19905
+ }
19906
+ .d-svg-primary--fill {
19907
+ fill: var(--primary-color);
19908
+ }
19903
19909
  .js-focus-visible :focus:not(.focus-visible) {
19904
19910
  outline: none;
19905
19911
  }
@@ -20213,9 +20219,9 @@ body {
20213
20219
  --success-color: var(--fc-success);
20214
20220
  --success-color-hsl: var(--green-500-hsl);
20215
20221
  --success-color-hover: var(--green-500);
20216
- --muted-color: var(--fc-muted);
20222
+ --muted-color: var(--black-800);
20217
20223
  --muted-color-hsl: var(--black-800-hsl);
20218
- --muted-color-hover: var(--fc-muted);
20224
+ --muted-color-hover: var(--black-800);
20219
20225
  --inverted-color: var(--fc-primary-inverted);
20220
20226
  --inverted-color-hsl: var(--black-100-hsl);
20221
20227
  --inverted-color-hover: var(--black-200);
@@ -20394,16 +20400,22 @@ body {
20394
20400
  --zi-modal: 600;
20395
20401
  --zi-modal-element: 650;
20396
20402
  --zi-notification: 700;
20397
- --focus-ring: hsla(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l) / 75%);
20403
+ --focus-ring: hsla(var(--primary-color-hsl) / 75%);
20398
20404
  --focus-ring-success: hsla(var(--success-color-hsl) / 75%);
20399
20405
  --focus-ring-warning: hsla(var(--warning-color-hsl) / 75%);
20400
20406
  --focus-ring-error: hsla(var(--error-color-hsl) / 75%);
20401
- --focus-ring-muted: hsla(var(--muted-color-hsl) / 25%);
20407
+ --focus-ring-muted: var(--focus-ring);
20402
20408
  --focus-ring-inverted: hsla(var(--inverted-color-hsl) / 50%);
20403
20409
  --input-button__padding: 0.7rem var(--su8);
20404
20410
  --input-button__text-size: var(--fs-200);
20405
20411
  --input-button__line-height: var(--lh4);
20406
20412
  --input-button__icon-size: 1.8rem;
20413
+ --primary-color-h: var(--purple-400-h);
20414
+ --primary-color-s: var(--purple-400-s);
20415
+ --primary-color-l: var(--purple-400-l);
20416
+ --primary-color-hsl: var(--primary-color-h) var(--primary-color-s) var(--primary-color-l);
20417
+ --primary-color: hsl(var(--primary-color-h) var(--primary-color-s) var(--primary-color-l));
20418
+ --primary-color-hover: hsl(var(--primary-color-h) var(--primary-color-s) calc(var(--primary-color-l) - 10%));
20407
20419
  --nav-background-color-h: var(--purple-600-h);
20408
20420
  --nav-background-color-s: var(--purple-600-s);
20409
20421
  --nav-background-color-l: var(--purple-600-l);