@canonical/design-tokens 0.5.2 → 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.
- package/dist/modifiers.anticipation.css +4 -0
- package/dist/modifiers.lifecycle.css +27 -0
- package/dist/modifiers.release.css +27 -0
- package/dist/modifiers.theme.css +6 -0
- package/dist/tokens.json +921 -381
- package/package.json +4 -4
- package/tokens/canonical/canonical.resolver.json +56 -0
- package/tokens/canonical/global/semantic/color/dark.tokens.json +86 -0
- package/tokens/canonical/global/semantic/color/light.tokens.json +86 -0
- package/tokens/canonical/global/semantic/modifier/anticipation/caution.tokens.json +10 -2
- package/tokens/canonical/global/semantic/modifier/anticipation/constructive.tokens.json +4 -0
- package/tokens/canonical/global/semantic/modifier/anticipation/destructive.tokens.json +4 -0
- package/tokens/canonical/global/semantic/modifier/lifecycle/completed.tokens.json +25 -0
- package/tokens/canonical/global/semantic/modifier/lifecycle/failed.tokens.json +25 -0
- package/tokens/canonical/global/semantic/modifier/lifecycle/in-progress.tokens.json +25 -0
- package/tokens/canonical/global/semantic/modifier/lifecycle/planned.tokens.json +25 -0
- package/tokens/canonical/global/semantic/modifier/release/alpha.tokens.json +25 -0
- package/tokens/canonical/global/semantic/modifier/release/beta.tokens.json +25 -0
- package/tokens/canonical/global/semantic/modifier/release/experimental.tokens.json +25 -0
- package/tokens/canonical/global/semantic/modifier/release/stable.tokens.json +25 -0
|
@@ -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);
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
/* Generated by @canonical/terrazzo-plugin-css. DO NOT EDIT. */
|
|
2
|
+
@layer ds.modifiers {
|
|
3
|
+
.planned {
|
|
4
|
+
--modifier-color-border: var(--color-border-information);
|
|
5
|
+
--modifier-color-foreground-secondary: var(--color-foreground-secondary-information);
|
|
6
|
+
--modifier-color-icon: var(--color-icon-information);
|
|
7
|
+
--modifier-color-text: var(--color-text-information);
|
|
8
|
+
}
|
|
9
|
+
.inProgress {
|
|
10
|
+
--modifier-color-border: var(--color-border-information);
|
|
11
|
+
--modifier-color-foreground-secondary: var(--color-foreground-secondary-information);
|
|
12
|
+
--modifier-color-icon: var(--color-icon-information);
|
|
13
|
+
--modifier-color-text: var(--color-text-information);
|
|
14
|
+
}
|
|
15
|
+
.completed {
|
|
16
|
+
--modifier-color-border: var(--color-border-success);
|
|
17
|
+
--modifier-color-foreground-secondary: var(--color-foreground-secondary-success);
|
|
18
|
+
--modifier-color-icon: var(--color-icon-success);
|
|
19
|
+
--modifier-color-text: var(--color-text-success);
|
|
20
|
+
}
|
|
21
|
+
.failed {
|
|
22
|
+
--modifier-color-border: var(--color-border-error);
|
|
23
|
+
--modifier-color-foreground-secondary: var(--color-foreground-secondary-error);
|
|
24
|
+
--modifier-color-icon: var(--color-icon-error);
|
|
25
|
+
--modifier-color-text: var(--color-text-error);
|
|
26
|
+
}
|
|
27
|
+
}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
/* Generated by @canonical/terrazzo-plugin-css. DO NOT EDIT. */
|
|
2
|
+
@layer ds.modifiers {
|
|
3
|
+
.experimental {
|
|
4
|
+
--modifier-color-border: var(--color-border-warning);
|
|
5
|
+
--modifier-color-foreground-secondary: var(--color-foreground-secondary-warning);
|
|
6
|
+
--modifier-color-icon: var(--color-icon-warning);
|
|
7
|
+
--modifier-color-text: var(--color-text-warning);
|
|
8
|
+
}
|
|
9
|
+
.alpha {
|
|
10
|
+
--modifier-color-border: var(--color-border-warning);
|
|
11
|
+
--modifier-color-foreground-secondary: var(--color-foreground-secondary-warning);
|
|
12
|
+
--modifier-color-icon: var(--color-icon-warning);
|
|
13
|
+
--modifier-color-text: var(--color-text-warning);
|
|
14
|
+
}
|
|
15
|
+
.beta {
|
|
16
|
+
--modifier-color-border: var(--color-border-information);
|
|
17
|
+
--modifier-color-foreground-secondary: var(--color-foreground-secondary-information);
|
|
18
|
+
--modifier-color-icon: var(--color-icon-information);
|
|
19
|
+
--modifier-color-text: var(--color-text-information);
|
|
20
|
+
}
|
|
21
|
+
.stable {
|
|
22
|
+
--modifier-color-border: var(--color-border-success);
|
|
23
|
+
--modifier-color-foreground-secondary: var(--color-foreground-secondary-success);
|
|
24
|
+
--modifier-color-icon: var(--color-icon-success);
|
|
25
|
+
--modifier-color-text: var(--color-text-success);
|
|
26
|
+
}
|
|
27
|
+
}
|
package/dist/modifiers.theme.css
CHANGED
|
@@ -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);
|