@canonical/design-tokens 0.6.0 → 0.6.1

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.
@@ -2,6 +2,7 @@
2
2
  @layer ds.modifiers {
3
3
  .constructive {
4
4
  --modifier-color-border: var(--color-border-constructive);
5
+ --modifier-color-focusRing: var(--color-focusRing-constructive);
5
6
  --modifier-color-foreground-ghost: var(--color-foreground-ghost-constructive);
6
7
  --modifier-color-foreground-primary: var(--color-foreground-primary-constructive);
7
8
  --modifier-color-icon: var(--color-icon-constructive);
@@ -9,6 +10,7 @@
9
10
  }
10
11
  .destructive {
11
12
  --modifier-color-border: var(--color-border-destructive);
13
+ --modifier-color-focusRing: var(--color-focusRing-destructive);
12
14
  --modifier-color-foreground-ghost: var(--color-foreground-ghost-destructive);
13
15
  --modifier-color-foreground-primary: var(--color-foreground-primary-destructive);
14
16
  --modifier-color-icon: var(--color-icon-destructive);
@@ -16,6 +18,8 @@
16
18
  }
17
19
  .caution {
18
20
  --modifier-color-border: var(--color-border-warning);
21
+ --modifier-color-focusRing: var(--color-focusRing-warning);
22
+ --modifier-color-foreground-primary: var(--color-foreground-primary-warning);
19
23
  --modifier-color-foreground-secondary: var(--color-foreground-secondary-warning);
20
24
  --modifier-color-icon: var(--color-icon-warning);
21
25
  --modifier-color-text: var(--color-text-warning);
@@ -32,6 +32,8 @@
32
32
  --color-border-warning-disabled: light-dark(oklch(83% 0.1 66.86), oklch(32% 0.1 66.86));
33
33
  --color-brand-primary: var(--color-palette-orange-398);
34
34
  --color-focusRing: var(--color-palette-blue-520);
35
+ --color-focusRing-constructive: var(--color-border-constructive);
36
+ --color-focusRing-destructive: var(--color-border-destructive);
35
37
  --color-focusRing-error: var(--color-border-error);
36
38
  --color-focusRing-success: var(--color-border-success);
37
39
  --color-focusRing-warning: var(--color-border-warning);
@@ -183,6 +185,10 @@
183
185
  --color-foreground-primary-destructive-hover: light-dark(oklch(52% 0.2107 23.83), oklch(58% 0.2107 23.83));
184
186
  --color-foreground-primary-disabled: light-dark(oklch(69% 0 0), oklch(45% 0 0));
185
187
  --color-foreground-primary-hover: light-dark(oklch(19% 0 0), oklch(96% 0 0));
188
+ --color-foreground-primary-warning: var(--color-palette-yellow-520);
189
+ --color-foreground-primary-warning-active: light-dark(oklch(51% 0.1199 66.86), oklch(60% 0.1199 66.86));
190
+ --color-foreground-primary-warning-disabled: light-dark(oklch(83% 0.1 66.86), oklch(32% 0.1 66.86));
191
+ --color-foreground-primary-warning-hover: light-dark(oklch(52% 0.1199 66.86), oklch(58% 0.1199 66.86));
186
192
  --color-foreground-radio-checkmark: var(--color-foreground-checkbox-checkmark);
187
193
  --color-foreground-radio-checkmark-disabled: var(--color-foreground-checkbox-checkmark-disabled);
188
194
  --color-foreground-radio-checkmark-layer2: var(--color-foreground-checkbox-checkmark-layer2);