@vector-im/compound-design-tokens 1.0.0 → 1.1.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/assets/web/css/compound-design-tokens.css +21 -15
- package/assets/web/css/{cpd-common.css → cpd-common-base.css} +0 -64
- package/assets/web/css/cpd-common-semantic.css +66 -0
- package/assets/web/css/{cpd-dark-mq.css → cpd-theme-dark-base-mq.css} +0 -2
- package/assets/web/css/{cpd-dark.css → cpd-theme-dark-base.css} +0 -2
- package/assets/web/css/{cpd-dark-hc-mq.css → cpd-theme-dark-hc-base-mq.css} +0 -2
- package/assets/web/css/{cpd-dark-hc.css → cpd-theme-dark-hc-base.css} +0 -2
- package/assets/web/css/cpd-theme-dark-hc-semantic-mq.css +4 -0
- package/assets/web/css/cpd-theme-dark-hc-semantic.css +4 -0
- package/assets/web/css/cpd-theme-dark-semantic-mq.css +4 -0
- package/assets/web/css/cpd-theme-dark-semantic.css +4 -0
- package/assets/web/css/{cpd-light-mq.css → cpd-theme-light-base-mq.css} +0 -2
- package/assets/web/css/{cpd-light.css → cpd-theme-light-base.css} +0 -2
- package/assets/web/css/{cpd-light-hc-mq.css → cpd-theme-light-hc-base-mq.css} +0 -2
- package/assets/web/css/{cpd-light-hc.css → cpd-theme-light-hc-base.css} +0 -2
- package/assets/web/css/cpd-theme-light-hc-semantic-mq.css +4 -0
- package/assets/web/css/cpd-theme-light-hc-semantic.css +4 -0
- package/assets/web/css/cpd-theme-light-semantic-mq.css +4 -0
- package/assets/web/css/cpd-theme-light-semantic.css +4 -0
- package/package.json +1 -1
|
@@ -1,17 +1,23 @@
|
|
|
1
|
-
|
|
2
|
-
*
|
|
1
|
+
/* Establish a layer order that allows semantic tokens to be customized, but not base tokens.
|
|
2
|
+
* The layers are prefixed by 'cpd-' because Tailwind will interpret '@layer base' directives.
|
|
3
3
|
*/
|
|
4
|
+
@layer cpd-semantic, custom, cpd-base;
|
|
4
5
|
|
|
5
|
-
@import url("./cpd-common.css");
|
|
6
|
-
|
|
7
|
-
@import url("./cpd-light.css") screen;
|
|
8
|
-
@import url("./cpd-light-
|
|
9
|
-
@import url("./cpd-
|
|
10
|
-
@import url("./cpd-
|
|
11
|
-
|
|
12
|
-
@import url("./cpd-light-mq.css") screen and (prefers-color-scheme: light);
|
|
13
|
-
@import url("./cpd-light-hc-
|
|
14
|
-
|
|
15
|
-
@import url("./cpd-dark-
|
|
16
|
-
@import url("./cpd-dark-
|
|
17
|
-
|
|
6
|
+
@import url("./cpd-common-base.css") layer(cpd-base) screen;
|
|
7
|
+
@import url("./cpd-common-semantic.css") layer(cpd-semantic) screen;
|
|
8
|
+
@import url("./cpd-theme-light-base.css") layer(cpd-base) screen;
|
|
9
|
+
@import url("./cpd-theme-light-base-mq.css") layer(cpd-base) screen and (prefers-color-scheme: light);
|
|
10
|
+
@import url("./cpd-theme-light-semantic.css") layer(cpd-semantic) screen;
|
|
11
|
+
@import url("./cpd-theme-light-semantic-mq.css") layer(cpd-semantic) screen and (prefers-color-scheme: light);
|
|
12
|
+
@import url("./cpd-theme-light-hc-base.css") layer(cpd-base) screen;
|
|
13
|
+
@import url("./cpd-theme-light-hc-base-mq.css") layer(cpd-base) screen and (prefers-color-scheme: light) and (prefers-contrast: more);
|
|
14
|
+
@import url("./cpd-theme-light-hc-semantic.css") layer(cpd-semantic) screen;
|
|
15
|
+
@import url("./cpd-theme-light-hc-semantic-mq.css") layer(cpd-semantic) screen and (prefers-color-scheme: light) and (prefers-contrast: more);
|
|
16
|
+
@import url("./cpd-theme-dark-base.css") layer(cpd-base) screen;
|
|
17
|
+
@import url("./cpd-theme-dark-base-mq.css") layer(cpd-base) screen and (prefers-color-scheme: dark);
|
|
18
|
+
@import url("./cpd-theme-dark-semantic.css") layer(cpd-semantic) screen;
|
|
19
|
+
@import url("./cpd-theme-dark-semantic-mq.css") layer(cpd-semantic) screen and (prefers-color-scheme: dark);
|
|
20
|
+
@import url("./cpd-theme-dark-hc-base.css") layer(cpd-base) screen;
|
|
21
|
+
@import url("./cpd-theme-dark-hc-base-mq.css") layer(cpd-base) screen and (prefers-color-scheme: dark) and (prefers-contrast: more);
|
|
22
|
+
@import url("./cpd-theme-dark-hc-semantic.css") layer(cpd-semantic) screen;
|
|
23
|
+
@import url("./cpd-theme-dark-hc-semantic-mq.css") layer(cpd-semantic) screen and (prefers-color-scheme: dark) and (prefers-contrast: more);
|
|
@@ -37,70 +37,6 @@
|
|
|
37
37
|
--cpd-space-6x: 24px;
|
|
38
38
|
--cpd-space-0x: 0px;
|
|
39
39
|
--cpd-space-scale: 4px;
|
|
40
|
-
--cpd-color-icon-on-solid-primary: var(--cpd-color-theme-bg);
|
|
41
|
-
--cpd-color-icon-info-primary: var(--cpd-color-blue-900);
|
|
42
|
-
--cpd-color-icon-success-primary: var(--cpd-color-green-900);
|
|
43
|
-
--cpd-color-icon-critical-primary: var(--cpd-color-red-900);
|
|
44
|
-
--cpd-color-icon-accent-tertiary: var(--cpd-color-green-800);
|
|
45
|
-
--cpd-color-icon-quaternary-alpha: var(--cpd-color-alpha-gray-700);
|
|
46
|
-
--cpd-color-icon-tertiary-alpha: var(--cpd-color-alpha-gray-800);
|
|
47
|
-
--cpd-color-icon-secondary-alpha: var(--cpd-color-alpha-gray-900);
|
|
48
|
-
--cpd-color-icon-primary-alpha: var(--cpd-color-alpha-gray-1400);
|
|
49
|
-
--cpd-color-icon-disabled: var(--cpd-color-gray-700);
|
|
50
|
-
--cpd-color-icon-quaternary: var(--cpd-color-gray-700);
|
|
51
|
-
--cpd-color-icon-tertiary: var(--cpd-color-gray-800);
|
|
52
|
-
--cpd-color-icon-secondary: var(--cpd-color-gray-900);
|
|
53
|
-
--cpd-color-icon-primary: var(--cpd-color-gray-1400);
|
|
54
|
-
--cpd-color-border-info-subtle: var(--cpd-color-blue-500);
|
|
55
|
-
--cpd-color-border-success-subtle: var(--cpd-color-green-500);
|
|
56
|
-
--cpd-color-border-critical-subtle: var(--cpd-color-red-500);
|
|
57
|
-
--cpd-color-border-critical-hovered: var(--cpd-color-red-1000);
|
|
58
|
-
--cpd-color-border-critical-primary: var(--cpd-color-red-900);
|
|
59
|
-
--cpd-color-border-interactive-hovered: var(--cpd-color-gray-1100);
|
|
60
|
-
--cpd-color-border-interactive-secondary: var(--cpd-color-gray-600);
|
|
61
|
-
--cpd-color-border-interactive-primary: var(--cpd-color-gray-800);
|
|
62
|
-
--cpd-color-border-focused: var(--cpd-color-blue-900);
|
|
63
|
-
--cpd-color-border-disabled: var(--cpd-color-gray-500);
|
|
64
|
-
--cpd-color-bg-decorative-6: var(--cpd-color-alpha-orange-300);
|
|
65
|
-
--cpd-color-bg-decorative-5: var(--cpd-color-alpha-pink-300);
|
|
66
|
-
--cpd-color-bg-decorative-4: var(--cpd-color-alpha-purple-300);
|
|
67
|
-
--cpd-color-bg-decorative-3: var(--cpd-color-alpha-fuchsia-300);
|
|
68
|
-
--cpd-color-bg-decorative-2: var(--cpd-color-alpha-cyan-300);
|
|
69
|
-
--cpd-color-bg-decorative-1: var(--cpd-color-alpha-lime-300);
|
|
70
|
-
--cpd-color-bg-info-subtle: var(--cpd-color-blue-200);
|
|
71
|
-
--cpd-color-bg-success-subtle: var(--cpd-color-green-200);
|
|
72
|
-
--cpd-color-bg-critical-subtle-hovered: var(--cpd-color-red-300);
|
|
73
|
-
--cpd-color-bg-critical-subtle: var(--cpd-color-red-200);
|
|
74
|
-
--cpd-color-bg-critical-hovered: var(--cpd-color-red-1000);
|
|
75
|
-
--cpd-color-bg-critical-primary: var(--cpd-color-red-900);
|
|
76
|
-
--cpd-color-bg-action-secondary-pressed: var(--cpd-color-alpha-gray-300);
|
|
77
|
-
--cpd-color-bg-action-secondary-hovered: var(--cpd-color-alpha-gray-200);
|
|
78
|
-
--cpd-color-bg-action-secondary-rest: var(--cpd-color-theme-bg);
|
|
79
|
-
--cpd-color-bg-action-primary-disabled: var(--cpd-color-gray-700);
|
|
80
|
-
--cpd-color-bg-action-primary-pressed: var(--cpd-color-gray-1100);
|
|
81
|
-
--cpd-color-bg-action-primary-hovered: var(--cpd-color-gray-1200);
|
|
82
|
-
--cpd-color-bg-action-primary-rest: var(--cpd-color-gray-1400);
|
|
83
|
-
--cpd-color-bg-canvas-disabled: var(--cpd-color-gray-200);
|
|
84
|
-
--cpd-color-bg-canvas-default: var(--cpd-color-theme-bg);
|
|
85
|
-
--cpd-color-bg-subtle-secondary: var(--cpd-color-gray-300);
|
|
86
|
-
--cpd-color-bg-subtle-primary: var(--cpd-color-gray-400);
|
|
87
|
-
--cpd-color-text-decorative-6: var(--cpd-color-orange-1100);
|
|
88
|
-
--cpd-color-text-decorative-5: var(--cpd-color-pink-1100);
|
|
89
|
-
--cpd-color-text-decorative-4: var(--cpd-color-purple-1100);
|
|
90
|
-
--cpd-color-text-decorative-3: var(--cpd-color-fuchsia-1100);
|
|
91
|
-
--cpd-color-text-decorative-2: var(--cpd-color-cyan-1100);
|
|
92
|
-
--cpd-color-text-decorative-1: var(--cpd-color-lime-1100);
|
|
93
|
-
--cpd-color-text-on-solid-primary: var(--cpd-color-theme-bg);
|
|
94
|
-
--cpd-color-text-info-primary: var(--cpd-color-blue-900);
|
|
95
|
-
--cpd-color-text-success-primary: var(--cpd-color-green-900);
|
|
96
|
-
--cpd-color-text-critical-primary: var(--cpd-color-red-900);
|
|
97
|
-
--cpd-color-text-link-external: var(--cpd-color-blue-900);
|
|
98
|
-
--cpd-color-text-action-accent: var(--cpd-color-green-900);
|
|
99
|
-
--cpd-color-text-action-primary: var(--cpd-color-gray-1400);
|
|
100
|
-
--cpd-color-text-disabled: var(--cpd-color-gray-800);
|
|
101
|
-
--cpd-color-text-placeholder: var(--cpd-color-gray-800);
|
|
102
|
-
--cpd-color-text-secondary: var(--cpd-color-gray-900);
|
|
103
|
-
--cpd-color-text-primary: var(--cpd-color-gray-1400);
|
|
104
40
|
--cpd-font-heading-xl-semibold: var(--cpd-font-weight-semibold) var(--cpd-font-size-heading-xl)/var(--cpd-font-line-height-tight) var(--cpd-font-family-sans);
|
|
105
41
|
--cpd-font-heading-xl-regular: var(--cpd-font-weight-regular) var(--cpd-font-size-heading-xl)/var(--cpd-font-line-height-tight) var(--cpd-font-family-sans);
|
|
106
42
|
--cpd-font-heading-lg-semibold: var(--cpd-font-weight-semibold) var(--cpd-font-size-heading-lg)/var(--cpd-font-line-height-tight) var(--cpd-font-family-sans);
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
:root, [class*="cpd-theme-"] {
|
|
2
|
+
--cpd-color-icon-on-solid-primary: var(--cpd-color-theme-bg);
|
|
3
|
+
--cpd-color-icon-info-primary: var(--cpd-color-blue-900);
|
|
4
|
+
--cpd-color-icon-success-primary: var(--cpd-color-green-900);
|
|
5
|
+
--cpd-color-icon-critical-primary: var(--cpd-color-red-900);
|
|
6
|
+
--cpd-color-icon-accent-tertiary: var(--cpd-color-green-800);
|
|
7
|
+
--cpd-color-icon-quaternary-alpha: var(--cpd-color-alpha-gray-700);
|
|
8
|
+
--cpd-color-icon-tertiary-alpha: var(--cpd-color-alpha-gray-800);
|
|
9
|
+
--cpd-color-icon-secondary-alpha: var(--cpd-color-alpha-gray-900);
|
|
10
|
+
--cpd-color-icon-primary-alpha: var(--cpd-color-alpha-gray-1400);
|
|
11
|
+
--cpd-color-icon-disabled: var(--cpd-color-gray-700);
|
|
12
|
+
--cpd-color-icon-quaternary: var(--cpd-color-gray-700);
|
|
13
|
+
--cpd-color-icon-tertiary: var(--cpd-color-gray-800);
|
|
14
|
+
--cpd-color-icon-secondary: var(--cpd-color-gray-900);
|
|
15
|
+
--cpd-color-icon-primary: var(--cpd-color-gray-1400);
|
|
16
|
+
--cpd-color-border-info-subtle: var(--cpd-color-blue-500);
|
|
17
|
+
--cpd-color-border-success-subtle: var(--cpd-color-green-500);
|
|
18
|
+
--cpd-color-border-critical-subtle: var(--cpd-color-red-500);
|
|
19
|
+
--cpd-color-border-critical-hovered: var(--cpd-color-red-1000);
|
|
20
|
+
--cpd-color-border-critical-primary: var(--cpd-color-red-900);
|
|
21
|
+
--cpd-color-border-interactive-hovered: var(--cpd-color-gray-1100);
|
|
22
|
+
--cpd-color-border-interactive-secondary: var(--cpd-color-gray-600);
|
|
23
|
+
--cpd-color-border-interactive-primary: var(--cpd-color-gray-800);
|
|
24
|
+
--cpd-color-border-focused: var(--cpd-color-blue-900);
|
|
25
|
+
--cpd-color-border-disabled: var(--cpd-color-gray-500);
|
|
26
|
+
--cpd-color-bg-decorative-6: var(--cpd-color-alpha-orange-300);
|
|
27
|
+
--cpd-color-bg-decorative-5: var(--cpd-color-alpha-pink-300);
|
|
28
|
+
--cpd-color-bg-decorative-4: var(--cpd-color-alpha-purple-300);
|
|
29
|
+
--cpd-color-bg-decorative-3: var(--cpd-color-alpha-fuchsia-300);
|
|
30
|
+
--cpd-color-bg-decorative-2: var(--cpd-color-alpha-cyan-300);
|
|
31
|
+
--cpd-color-bg-decorative-1: var(--cpd-color-alpha-lime-300);
|
|
32
|
+
--cpd-color-bg-info-subtle: var(--cpd-color-blue-200);
|
|
33
|
+
--cpd-color-bg-success-subtle: var(--cpd-color-green-200);
|
|
34
|
+
--cpd-color-bg-critical-subtle-hovered: var(--cpd-color-red-300);
|
|
35
|
+
--cpd-color-bg-critical-subtle: var(--cpd-color-red-200);
|
|
36
|
+
--cpd-color-bg-critical-hovered: var(--cpd-color-red-1000);
|
|
37
|
+
--cpd-color-bg-critical-primary: var(--cpd-color-red-900);
|
|
38
|
+
--cpd-color-bg-action-secondary-pressed: var(--cpd-color-alpha-gray-300);
|
|
39
|
+
--cpd-color-bg-action-secondary-hovered: var(--cpd-color-alpha-gray-200);
|
|
40
|
+
--cpd-color-bg-action-secondary-rest: var(--cpd-color-theme-bg);
|
|
41
|
+
--cpd-color-bg-action-primary-disabled: var(--cpd-color-gray-700);
|
|
42
|
+
--cpd-color-bg-action-primary-pressed: var(--cpd-color-gray-1100);
|
|
43
|
+
--cpd-color-bg-action-primary-hovered: var(--cpd-color-gray-1200);
|
|
44
|
+
--cpd-color-bg-action-primary-rest: var(--cpd-color-gray-1400);
|
|
45
|
+
--cpd-color-bg-canvas-disabled: var(--cpd-color-gray-200);
|
|
46
|
+
--cpd-color-bg-canvas-default: var(--cpd-color-theme-bg);
|
|
47
|
+
--cpd-color-bg-subtle-secondary: var(--cpd-color-gray-300);
|
|
48
|
+
--cpd-color-bg-subtle-primary: var(--cpd-color-gray-400);
|
|
49
|
+
--cpd-color-text-decorative-6: var(--cpd-color-orange-1100);
|
|
50
|
+
--cpd-color-text-decorative-5: var(--cpd-color-pink-1100);
|
|
51
|
+
--cpd-color-text-decorative-4: var(--cpd-color-purple-1100);
|
|
52
|
+
--cpd-color-text-decorative-3: var(--cpd-color-fuchsia-1100);
|
|
53
|
+
--cpd-color-text-decorative-2: var(--cpd-color-cyan-1100);
|
|
54
|
+
--cpd-color-text-decorative-1: var(--cpd-color-lime-1100);
|
|
55
|
+
--cpd-color-text-on-solid-primary: var(--cpd-color-theme-bg);
|
|
56
|
+
--cpd-color-text-info-primary: var(--cpd-color-blue-900);
|
|
57
|
+
--cpd-color-text-success-primary: var(--cpd-color-green-900);
|
|
58
|
+
--cpd-color-text-critical-primary: var(--cpd-color-red-900);
|
|
59
|
+
--cpd-color-text-link-external: var(--cpd-color-blue-900);
|
|
60
|
+
--cpd-color-text-action-accent: var(--cpd-color-green-900);
|
|
61
|
+
--cpd-color-text-action-primary: var(--cpd-color-gray-1400);
|
|
62
|
+
--cpd-color-text-disabled: var(--cpd-color-gray-800);
|
|
63
|
+
--cpd-color-text-placeholder: var(--cpd-color-gray-800);
|
|
64
|
+
--cpd-color-text-secondary: var(--cpd-color-gray-900);
|
|
65
|
+
--cpd-color-text-primary: var(--cpd-color-gray-1400);
|
|
66
|
+
}
|