@workday/canvas-tokens-web 0.1.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 (33) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/README.md +3 -0
  3. package/dist/common-js/base/index.d.ts +227 -0
  4. package/dist/common-js/base/index.js +230 -0
  5. package/dist/common-js/brand/index.d.ts +51 -0
  6. package/dist/common-js/brand/index.js +54 -0
  7. package/dist/common-js/index.d.ts +9 -0
  8. package/dist/common-js/index.js +14 -0
  9. package/dist/common-js/system/index.d.ts +276 -0
  10. package/dist/common-js/system/index.js +279 -0
  11. package/dist/css/base/_variables.css +229 -0
  12. package/dist/css/brand/_variables.css +42 -0
  13. package/dist/css/system/_variables.css +218 -0
  14. package/dist/es6/base/index.d.ts +227 -0
  15. package/dist/es6/base/index.js +227 -0
  16. package/dist/es6/brand/index.d.ts +51 -0
  17. package/dist/es6/brand/index.js +51 -0
  18. package/dist/es6/index.d.ts +9 -0
  19. package/dist/es6/index.js +9 -0
  20. package/dist/es6/system/index.d.ts +276 -0
  21. package/dist/es6/system/index.js +276 -0
  22. package/dist/less/base/_variables.less +226 -0
  23. package/dist/less/brand/_variables.less +39 -0
  24. package/dist/less/system/_variables.less +215 -0
  25. package/dist/scss/base/_variables.sass +226 -0
  26. package/dist/scss/base/_variables.scss +226 -0
  27. package/dist/scss/brand/_variables.sass +39 -0
  28. package/dist/scss/brand/_variables.scss +39 -0
  29. package/dist/scss/system/_variables.sass +215 -0
  30. package/dist/scss/system/_variables.scss +215 -0
  31. package/index.ts +0 -0
  32. package/package.json +13 -0
  33. package/tsconfig.json +3 -0
package/dist/css/base/_variables.css ADDED
@@ -0,0 +1,229 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Tue, 05 Sep 2023 04:00:01 GMT
4
+ */
5
+
6
+ :root {
7
+ --cnvs-base-palette-cinnamon-100: rgba(255,241,240,1);
8
+ --cnvs-base-palette-cinnamon-200: rgba(252,201,197,1);
9
+ --cnvs-base-palette-cinnamon-300: rgba(255,136,128,1);
10
+ --cnvs-base-palette-cinnamon-400: rgba(255,84,71,1);
11
+ --cnvs-base-palette-cinnamon-500: rgba(222,46,33,1);
12
+ --cnvs-base-palette-cinnamon-600: rgba(161,27,18,1);
13
+ --cnvs-base-palette-peach-100: rgba(255,243,240,1);
14
+ --cnvs-base-palette-peach-200: rgba(255,194,179,1);
15
+ --cnvs-base-palette-peach-300: rgba(255,149,122,1);
16
+ --cnvs-base-palette-peach-400: rgba(255,100,61,1);
17
+ --cnvs-base-palette-peach-500: rgba(222,71,33,1);
18
+ --cnvs-base-palette-peach-600: rgba(180,51,19,1);
19
+ --cnvs-base-palette-chili-mango-100: rgba(255,232,219,1);
20
+ --cnvs-base-palette-chili-mango-200: rgba(255,201,173,1);
21
+ --cnvs-base-palette-chili-mango-300: rgba(255,156,107,1);
22
+ --cnvs-base-palette-chili-mango-400: rgba(255,102,26,1);
23
+ --cnvs-base-palette-chili-mango-500: rgba(224,75,0,1);
24
+ --cnvs-base-palette-chili-mango-600: rgba(163,54,0,1);
25
+ --cnvs-base-palette-cantaloupe-100: rgba(255,239,219,1);
26
+ --cnvs-base-palette-cantaloupe-200: rgba(252,213,161,1);
27
+ --cnvs-base-palette-cantaloupe-300: rgba(255,186,97,1);
28
+ --cnvs-base-palette-cantaloupe-400: rgba(255,160,36,1);
29
+ --cnvs-base-palette-cantaloupe-500: rgba(245,139,0,1);
30
+ --cnvs-base-palette-cantaloupe-600: rgba(194,110,0,1);
31
+ --cnvs-base-palette-sour-lemon-100: rgba(255,249,230,1);
32
+ --cnvs-base-palette-sour-lemon-200: rgba(255,236,173,1);
33
+ --cnvs-base-palette-sour-lemon-300: rgba(255,218,97,1);
34
+ --cnvs-base-palette-sour-lemon-400: rgba(255,198,41,1);
35
+ --cnvs-base-palette-sour-lemon-500: rgba(235,180,0,1);
36
+ --cnvs-base-palette-sour-lemon-600: rgba(189,145,0,1);
37
+ --cnvs-base-palette-juicy-pear-100: rgba(247,250,229,1);
38
+ --cnvs-base-palette-juicy-pear-200: rgba(226,243,145,1);
39
+ --cnvs-base-palette-juicy-pear-300: rgba(196,222,63,1);
40
+ --cnvs-base-palette-juicy-pear-400: rgba(168,194,36,1);
41
+ --cnvs-base-palette-juicy-pear-500: rgba(142,165,24,1);
42
+ --cnvs-base-palette-juicy-pear-600: rgba(103,119,24,1);
43
+ --cnvs-base-palette-kiwi-100: rgba(237,252,217,1);
44
+ --cnvs-base-palette-kiwi-200: rgba(203,245,148,1);
45
+ --cnvs-base-palette-kiwi-300: rgba(167,224,92,1);
46
+ --cnvs-base-palette-kiwi-400: rgba(120,189,31,1);
47
+ --cnvs-base-palette-kiwi-500: rgba(95,153,21,1);
48
+ --cnvs-base-palette-kiwi-600: rgba(85,122,36,1);
49
+ --cnvs-base-palette-green-apple-100: rgba(235,255,240,1);
50
+ --cnvs-base-palette-green-apple-200: rgba(173,245,191,1);
51
+ --cnvs-base-palette-green-apple-300: rgba(95,227,128,1);
52
+ --cnvs-base-palette-green-apple-400: rgba(69,196,101,1);
53
+ --cnvs-base-palette-green-apple-500: rgba(49,155,75,1);
54
+ --cnvs-base-palette-green-apple-600: rgba(33,120,55,1);
55
+ --cnvs-base-palette-watermelon-100: rgba(236,253,248,1);
56
+ --cnvs-base-palette-watermelon-200: rgba(182,237,221,1);
57
+ --cnvs-base-palette-watermelon-300: rgba(102,204,175,1);
58
+ --cnvs-base-palette-watermelon-400: rgba(18,165,124,1);
59
+ --cnvs-base-palette-watermelon-500: rgba(12,121,90,1);
60
+ --cnvs-base-palette-watermelon-600: rgba(0,87,62,1);
61
+ --cnvs-base-palette-jewel-100: rgba(235,253,255,1);
62
+ --cnvs-base-palette-jewel-200: rgba(170,236,243,1);
63
+ --cnvs-base-palette-jewel-300: rgba(66,200,215,1);
64
+ --cnvs-base-palette-jewel-400: rgba(30,164,179,1);
65
+ --cnvs-base-palette-jewel-500: rgba(26,131,142,1);
66
+ --cnvs-base-palette-jewel-600: rgba(21,107,116,1);
67
+ --cnvs-base-palette-toothpaste-100: rgba(217,242,252,1);
68
+ --cnvs-base-palette-toothpaste-200: rgba(153,224,255,1);
69
+ --cnvs-base-palette-toothpaste-300: rgba(62,179,229,1);
70
+ --cnvs-base-palette-toothpaste-400: rgba(24,148,201,1);
71
+ --cnvs-base-palette-toothpaste-500: rgba(2,114,162,1);
72
+ --cnvs-base-palette-toothpaste-600: rgba(0,89,128,1);
73
+ --cnvs-base-palette-blueberry-100: rgba(217,235,252,1);
74
+ --cnvs-base-palette-blueberry-200: rgba(168,212,255,1);
75
+ --cnvs-base-palette-blueberry-300: rgba(66,161,255,1);
76
+ --cnvs-base-palette-blueberry-400: rgba(8,117,226,1);
77
+ --cnvs-base-palette-blueberry-500: rgba(0,92,184,1);
78
+ --cnvs-base-palette-blueberry-600: rgba(0,66,133,1);
79
+ --cnvs-base-palette-plum-100: rgba(230,241,255,1);
80
+ --cnvs-base-palette-plum-200: rgba(168,206,255,1);
81
+ --cnvs-base-palette-plum-300: rgba(82,155,250,1);
82
+ --cnvs-base-palette-plum-400: rgba(55,129,225,1);
83
+ --cnvs-base-palette-plum-500: rgba(49,102,170,1);
84
+ --cnvs-base-palette-plum-600: rgba(38,74,120,1);
85
+ --cnvs-base-palette-berry-smoothie-100: rgba(229,235,255,1);
86
+ --cnvs-base-palette-berry-smoothie-200: rgba(195,194,255,1);
87
+ --cnvs-base-palette-berry-smoothie-300: rgba(122,147,255,1);
88
+ --cnvs-base-palette-berry-smoothie-400: rgba(96,121,230,1);
89
+ --cnvs-base-palette-berry-smoothie-500: rgba(75,94,180,1);
90
+ --cnvs-base-palette-berry-smoothie-600: rgba(59,73,135,1);
91
+ --cnvs-base-palette-blackberry-100: rgba(240,240,255,1);
92
+ --cnvs-base-palette-blackberry-200: rgba(195,194,255,1);
93
+ --cnvs-base-palette-blackberry-300: rgba(134,132,230,1);
94
+ --cnvs-base-palette-blackberry-400: rgba(93,91,230,1);
95
+ --cnvs-base-palette-blackberry-500: rgba(64,62,204,1);
96
+ --cnvs-base-palette-blackberry-600: rgba(46,44,144,1);
97
+ --cnvs-base-palette-island-punch-100: rgba(245,240,255,1);
98
+ --cnvs-base-palette-island-punch-200: rgba(209,189,250,1);
99
+ --cnvs-base-palette-island-punch-300: rgba(168,137,230,1);
100
+ --cnvs-base-palette-island-punch-400: rgba(134,97,209,1);
101
+ --cnvs-base-palette-island-punch-500: rgba(99,69,161,1);
102
+ --cnvs-base-palette-island-punch-600: rgba(78,55,129,1);
103
+ --cnvs-base-palette-grape-soda-100: rgba(254,235,255,1);
104
+ --cnvs-base-palette-grape-soda-200: rgba(250,194,255,1);
105
+ --cnvs-base-palette-grape-soda-300: rgba(222,137,230,1);
106
+ --cnvs-base-palette-grape-soda-400: rgba(200,97,209,1);
107
+ --cnvs-base-palette-grape-soda-500: rgba(150,72,157,1);
108
+ --cnvs-base-palette-grape-soda-600: rgba(122,55,129,1);
109
+ --cnvs-base-palette-pomegranate-100: rgba(255,235,243,1);
110
+ --cnvs-base-palette-pomegranate-200: rgba(255,189,214,1);
111
+ --cnvs-base-palette-pomegranate-300: rgba(255,92,154,1);
112
+ --cnvs-base-palette-pomegranate-400: rgba(243,18,104,1);
113
+ --cnvs-base-palette-pomegranate-500: rgba(199,5,79,1);
114
+ --cnvs-base-palette-pomegranate-600: rgba(153,0,59,1);
115
+ --cnvs-base-palette-fruit-punch-100: rgba(255,240,240,1);
116
+ --cnvs-base-palette-fruit-punch-200: rgba(255,189,189,1);
117
+ --cnvs-base-palette-fruit-punch-300: rgba(255,128,128,1);
118
+ --cnvs-base-palette-fruit-punch-400: rgba(255,77,77,1);
119
+ --cnvs-base-palette-fruit-punch-500: rgba(225,45,45,1);
120
+ --cnvs-base-palette-fruit-punch-600: rgba(184,40,40,1);
121
+ --cnvs-base-palette-root-beer-100: rgba(250,243,240,1);
122
+ --cnvs-base-palette-root-beer-200: rgba(235,216,208,1);
123
+ --cnvs-base-palette-root-beer-300: rgba(220,187,173,1);
124
+ --cnvs-base-palette-root-beer-400: rgba(186,154,140,1);
125
+ --cnvs-base-palette-root-beer-500: rgba(139,113,101,1);
126
+ --cnvs-base-palette-root-beer-600: rgba(102,77,66,1);
127
+ --cnvs-base-palette-toasted-marshmallow-100: rgba(253,247,231,1);
128
+ --cnvs-base-palette-toasted-marshmallow-200: rgba(235,214,168,1);
129
+ --cnvs-base-palette-toasted-marshmallow-300: rgba(230,191,107,1);
130
+ --cnvs-base-palette-toasted-marshmallow-400: rgba(205,159,60,1);
131
+ --cnvs-base-palette-toasted-marshmallow-500: rgba(178,127,16,1);
132
+ --cnvs-base-palette-toasted-marshmallow-600: rgba(138,94,0,1);
133
+ --cnvs-base-palette-coconut-100: rgba(241,239,239,1);
134
+ --cnvs-base-palette-coconut-200: rgba(227,222,222,1);
135
+ --cnvs-base-palette-coconut-300: rgba(209,204,205,1);
136
+ --cnvs-base-palette-coconut-400: rgba(179,173,173,1);
137
+ --cnvs-base-palette-coconut-500: rgba(157,149,149,1);
138
+ --cnvs-base-palette-coconut-600: rgba(142,133,134,1);
139
+ --cnvs-base-palette-cappucino-100: rgba(121,114,115,1);
140
+ --cnvs-base-palette-cappucino-200: rgba(111,103,104,1);
141
+ --cnvs-base-palette-cappucino-300: rgba(93,86,86,1);
142
+ --cnvs-base-palette-cappucino-400: rgba(73,65,65,1);
143
+ --cnvs-base-palette-cappucino-500: rgba(54,48,48,1);
144
+ --cnvs-base-palette-cappucino-600: rgba(35,31,32,1);
145
+ --cnvs-base-palette-licorice-100: rgba(162,171,180,1);
146
+ --cnvs-base-palette-licorice-200: rgba(123,133,142,1);
147
+ --cnvs-base-palette-licorice-300: rgba(93,105,116,1);
148
+ --cnvs-base-palette-licorice-400: rgba(75,86,98,1);
149
+ --cnvs-base-palette-licorice-500: rgba(51,61,71,1);
150
+ --cnvs-base-palette-licorice-600: rgba(31,38,46,1);
151
+ --cnvs-base-palette-soap-100: rgba(246,247,248,1);
152
+ --cnvs-base-palette-soap-200: rgba(241,242,243,1);
153
+ --cnvs-base-palette-soap-300: rgba(232,235,237,1);
154
+ --cnvs-base-palette-soap-400: rgba(224,227,230,1);
155
+ --cnvs-base-palette-soap-500: rgba(206,211,217,1);
156
+ --cnvs-base-palette-soap-600: rgba(184,191,198,1);
157
+ --cnvs-base-palette-french-vanilla-100: rgba(255,255,255,1);
158
+ --cnvs-base-palette-french-vanilla-200: rgba(235,235,235,1);
159
+ --cnvs-base-palette-french-vanilla-300: rgba(212,212,212,1);
160
+ --cnvs-base-palette-french-vanilla-400: rgba(189,189,189,1);
161
+ --cnvs-base-palette-french-vanilla-500: rgba(166,166,166,1);
162
+ --cnvs-base-palette-french-vanilla-600: rgba(143,143,143,1);
163
+ --cnvs-base-palette-black-pepper-100: rgba(120,120,120,1);
164
+ --cnvs-base-palette-black-pepper-200: rgba(97,97,97,1);
165
+ --cnvs-base-palette-black-pepper-300: rgba(74,74,74,1);
166
+ --cnvs-base-palette-black-pepper-400: rgba(51,51,51,1);
167
+ --cnvs-base-palette-black-pepper-500: rgba(31,31,31,1);
168
+ --cnvs-base-palette-black-pepper-600: rgba(0,0,0,1);
169
+ --cnvs-base-opacity-100: 0.08;
170
+ --cnvs-base-opacity-200: 0.12;
171
+ --cnvs-base-opacity-300: 0.4;
172
+ --cnvs-base-opacity-400: 0.65;
173
+ --cnvs-base-opacity-500: 0.85;
174
+ --cnvs-base-font-size-25: 0.625rem;
175
+ --cnvs-base-font-size-50: 0.75rem;
176
+ --cnvs-base-font-size-75: 0.875rem;
177
+ --cnvs-base-font-size-100: 1rem;
178
+ --cnvs-base-font-size-125: 1.125rem;
179
+ --cnvs-base-font-size-150: 1.25rem;
180
+ --cnvs-base-font-size-200: 1.5rem;
181
+ --cnvs-base-font-size-250: 1.75rem;
182
+ --cnvs-base-font-size-300: 2rem;
183
+ --cnvs-base-font-size-400: 2.5rem;
184
+ --cnvs-base-font-size-500: 3rem;
185
+ --cnvs-base-font-size-600: 3.5rem;
186
+ --cnvs-base-font-size-750: 4.5rem;
187
+ --cnvs-base-font-size-900: 5.5rem;
188
+ --cnvs-base-font-size-1050: 6.5rem;
189
+ --cnvs-base-line-height-50: 0.75rem;
190
+ --cnvs-base-line-height-100: 0.75rem;
191
+ --cnvs-base-line-height-150: 1rem;
192
+ --cnvs-base-line-height-200: 1.25rem;
193
+ --cnvs-base-line-height-250: 1.5rem;
194
+ --cnvs-base-line-height-300: 1.75rem;
195
+ --cnvs-base-line-height-350: 2rem;
196
+ --cnvs-base-line-height-400: 2.25rem;
197
+ --cnvs-base-line-height-450: 2.5rem;
198
+ --cnvs-base-line-height-500: 3rem;
199
+ --cnvs-base-line-height-600: 3.5rem;
200
+ --cnvs-base-line-height-700: 4rem;
201
+ --cnvs-base-line-height-850: 5rem;
202
+ --cnvs-base-line-height-1000: 6rem;
203
+ --cnvs-base-line-height-1150: 7rem;
204
+ --cnvs-base-font-scale-size-default: 0.125rem;
205
+ --cnvs-base-font-scale-size-heading: 0.25rem;
206
+ --cnvs-base-font-scale-size-title: 0.5rem;
207
+ --cnvs-base-font-scale-size-display: 1rem;
208
+ --cnvs-base-font-scale-height-default: 0.25rem;
209
+ --cnvs-base-font-scale-height-title: 0.5rem;
210
+ --cnvs-base-font-scale-height-display: 1rem;
211
+ --cnvs-base-font-family-50: "Roboto";
212
+ --cnvs-base-font-family-100: "Roboto Mono";
213
+ --cnvs-base-font-family-200: "Noto Sans";
214
+ --cnvs-base-font-weight-300: 300;
215
+ --cnvs-base-font-weight-400: 400;
216
+ --cnvs-base-font-weight-500: 500;
217
+ --cnvs-base-font-weight-700: 700;
218
+ --cnvs-base-letter-spacing-50: 0.4em;
219
+ --cnvs-base-letter-spacing-100: 0.32em;
220
+ --cnvs-base-letter-spacing-150: 0.24em;
221
+ --cnvs-base-letter-spacing-200: 0.16em;
222
+ --cnvs-base-shadow-100: 0 0.0625rem 0.25rem 0 rgba(31,38,46,0.12), 0 0.125rem 1rem 0 rgba(31,38,46,0.08);
223
+ --cnvs-base-shadow-200: 0 0.125rem 0.5rem 0 rgba(31,38,46,0.12), 0 0.25rem 1rem 0 rgba(31,38,46,0.08);
224
+ --cnvs-base-shadow-300: 0 0.1875rem 0.75rem 0 rgba(31,38,46,0.12), 0 0.375rem 1.5rem 0 rgba(31,38,46,0.08);
225
+ --cnvs-base-shadow-400: 0 0.25rem 1rem 0 rgba(31,38,46,0.12), 0 0.5rem 2rem 0 rgba(31,38,46,0.08);
226
+ --cnvs-base-shadow-500: 0 0.3125rem 1.25rem 0 rgba(31,38,46,0.12), 0 0.625rem 2.5rem 0 rgba(31,38,46,0.08);
227
+ --cnvs-base-shadow-600: 0 0.375rem 1.5rem 0 rgba(31,38,46,0.12), 0 0.75rem 3rem 0 rgba(31,38,46,0.08);
228
+ --cnvs-base-dimension: 0.25rem;
229
+ }
package/dist/css/brand/_variables.css ADDED
@@ -0,0 +1,42 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Tue, 05 Sep 2023 04:00:01 GMT
4
+ */
5
+
6
+ :root {
7
+ --cnvs-brand-error-darkest: rgba(128,22,14,1);
8
+ --cnvs-brand-neutral-accent: var(--cnvs-base-palette-french-vanilla-100);
9
+ --cnvs-brand-neutral-darkest: var(--cnvs-base-palette-licorice-400);
10
+ --cnvs-brand-neutral-dark: var(--cnvs-base-palette-licorice-300);
11
+ --cnvs-brand-neutral-base: var(--cnvs-base-palette-soap-600);
12
+ --cnvs-brand-neutral-light: var(--cnvs-base-palette-soap-300);
13
+ --cnvs-brand-neutral-lightest: var(--cnvs-base-palette-soap-200);
14
+ --cnvs-brand-success-accent: var(--cnvs-base-palette-french-vanilla-100);
15
+ --cnvs-brand-success-darkest: var(--cnvs-base-palette-green-apple-600);
16
+ --cnvs-brand-success-dark: var(--cnvs-base-palette-green-apple-500);
17
+ --cnvs-brand-success-base: var(--cnvs-base-palette-green-apple-400);
18
+ --cnvs-brand-success-light: var(--cnvs-base-palette-green-apple-300);
19
+ --cnvs-brand-success-lightest: var(--cnvs-base-palette-green-apple-100);
20
+ --cnvs-brand-error-accent: var(--cnvs-base-palette-french-vanilla-100);
21
+ --cnvs-brand-error-dark: var(--cnvs-base-palette-cinnamon-600);
22
+ --cnvs-brand-error-base: var(--cnvs-base-palette-cinnamon-500);
23
+ --cnvs-brand-error-light: var(--cnvs-base-palette-cinnamon-200);
24
+ --cnvs-brand-error-lightest: var(--cnvs-base-palette-cinnamon-100);
25
+ --cnvs-brand-alert-accent: var(--cnvs-base-palette-french-vanilla-100);
26
+ --cnvs-brand-alert-darkest: var(--cnvs-base-palette-cantaloupe-600);
27
+ --cnvs-brand-alert-dark: var(--cnvs-base-palette-cantaloupe-500);
28
+ --cnvs-brand-alert-base: var(--cnvs-base-palette-cantaloupe-400);
29
+ --cnvs-brand-alert-light: var(--cnvs-base-palette-cantaloupe-200);
30
+ --cnvs-brand-alert-lightest: var(--cnvs-base-palette-cantaloupe-100);
31
+ --cnvs-brand-primary-accent: var(--cnvs-base-palette-french-vanilla-100);
32
+ --cnvs-brand-primary-darkest: var(--cnvs-base-palette-blueberry-600);
33
+ --cnvs-brand-primary-dark: var(--cnvs-base-palette-blueberry-500);
34
+ --cnvs-brand-primary-base: var(--cnvs-base-palette-blueberry-400);
35
+ --cnvs-brand-primary-light: var(--cnvs-base-palette-blueberry-200);
36
+ --cnvs-brand-primary-lightest: var(--cnvs-base-palette-blueberry-100);
37
+ --cnvs-brand-gradient: linear-gradient(90deg, var(--cnvs-brand-primary-base) 0%, var(--cnvs-brand-primary-dark) 100%);
38
+ --cnvs-brand-common-alert-inner: var(--cnvs-brand-alert-base);
39
+ --cnvs-brand-common-error-inner: var(--cnvs-brand-error-base);
40
+ --cnvs-brand-common-focus-outline: var(--cnvs-brand-primary-base);
41
+ }
42
+
package/dist/css/system/_variables.css ADDED
@@ -0,0 +1,218 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Tue, 05 Sep 2023 04:00:01 GMT
4
+ */
5
+
6
+ :root {
7
+ --cnvs-sys-space-zero: 0;
8
+ --cnvs-sys-shape-zero: 0rem;
9
+ --cnvs-sys-color-bg-delete-active: rgba(128,22,14,1);
10
+ --cnvs-sys-color-bg-secondary-default: none;
11
+ --cnvs-sys-font-weight-bold: var(--cnvs-base-font-weight-700);
12
+ --cnvs-sys-font-weight-medium: var(--cnvs-base-font-weight-500);
13
+ --cnvs-sys-font-weight-normal: var(--cnvs-base-font-weight-400);
14
+ --cnvs-sys-font-weight-light: var(--cnvs-base-font-weight-300);
15
+ --cnvs-sys-font-size-subtext-large: var(--cnvs-base-font-size-25);
16
+ --cnvs-sys-font-size-subtext-small: var(--cnvs-base-font-size-25);
17
+ --cnvs-sys-font-family-global: var(--cnvs-base-font-family-200);
18
+ --cnvs-sys-font-family-mono: var(--cnvs-base-font-family-100);
19
+ --cnvs-sys-font-family-default: var(--cnvs-base-font-family-50);
20
+ --cnvs-sys-space-x20: calc(var(--cnvs-base-dimension) * 20);
21
+ --cnvs-sys-space-x16: calc(var(--cnvs-base-dimension) * 16);
22
+ --cnvs-sys-space-x14: calc(var(--cnvs-base-dimension) * 14);
23
+ --cnvs-sys-space-x12: calc(var(--cnvs-base-dimension) * 12);
24
+ --cnvs-sys-space-x10: calc(var(--cnvs-base-dimension) * 10);
25
+ --cnvs-sys-space-x8: calc(var(--cnvs-base-dimension) * 8);
26
+ --cnvs-sys-space-x6: calc(var(--cnvs-base-dimension) * 6);
27
+ --cnvs-sys-space-x5: calc(var(--cnvs-base-dimension) * 5);
28
+ --cnvs-sys-space-x4: calc(var(--cnvs-base-dimension) * 4);
29
+ --cnvs-sys-space-x3: calc(var(--cnvs-base-dimension) * 3);
30
+ --cnvs-sys-space-x2: calc(var(--cnvs-base-dimension) * 2);
31
+ --cnvs-sys-space-x1: var(--cnvs-base-dimension);
32
+ --cnvs-sys-shape-circle: calc(var(--cnvs-base-dimension) * 250);
33
+ --cnvs-sys-shape-large: calc(var(--cnvs-base-dimension) * 2);
34
+ --cnvs-sys-shape-medium: var(--cnvs-base-dimension);
35
+ --cnvs-sys-shape-small: calc(var(--cnvs-base-dimension) * 0.5);
36
+ --cnvs-sys-opacity-disabled: var(--cnvs-base-opacity-300);
37
+ --cnvs-sys-color-data-viz-09: var(--cnvs-base-palette-jewel-200);
38
+ --cnvs-sys-color-data-viz-08: var(--cnvs-base-palette-cantaloupe-400);
39
+ --cnvs-sys-color-data-viz-07: var(--cnvs-base-palette-cantaloupe-200);
40
+ --cnvs-sys-color-data-viz-06: var(--cnvs-base-palette-pomegranate-300);
41
+ --cnvs-sys-color-data-viz-05: var(--cnvs-base-palette-pomegranate-200);
42
+ --cnvs-sys-color-data-viz-04: var(--cnvs-base-palette-plum-300);
43
+ --cnvs-sys-color-data-viz-03: var(--cnvs-base-palette-plum-200);
44
+ --cnvs-sys-color-data-viz-02: var(--cnvs-base-palette-watermelon-200);
45
+ --cnvs-sys-color-data-viz-01: var(--cnvs-base-palette-watermelon-100);
46
+ --cnvs-sys-color-data-viz-16: var(--cnvs-base-palette-peach-400);
47
+ --cnvs-sys-color-data-viz-15: var(--cnvs-base-palette-peach-200);
48
+ --cnvs-sys-color-data-viz-14: var(--cnvs-base-palette-island-punch-400);
49
+ --cnvs-sys-color-data-viz-13: var(--cnvs-base-palette-island-punch-200);
50
+ --cnvs-sys-color-data-viz-12: var(--cnvs-base-palette-sour-lemon-400);
51
+ --cnvs-sys-color-data-viz-11: var(--cnvs-base-palette-sour-lemon-200);
52
+ --cnvs-sys-color-data-viz-10: var(--cnvs-base-palette-jewel-300);
53
+ --cnvs-sys-color-overlay-tooltip: rgba(0,0,0,var(--cnvs-base-opacity-500));
54
+ --cnvs-sys-color-overlay-modal: rgba(0,0,0,var(--cnvs-base-opacity-400));
55
+ --cnvs-sys-color-gradient: linear-gradient(90deg, var(--cnvs-base-palette-blueberry-500) 0%, var(--cnvs-base-palette-blueberry-400) 100%);
56
+ --cnvs-sys-color-focus-ring: var(--cnvs-base-palette-blueberry-400);
57
+ --cnvs-sys-color-shadow-accent: rgba(31,38,46,var(--cnvs-base-opacity-100));
58
+ --cnvs-sys-color-shadow-main: rgba(31,38,46,var(--cnvs-base-opacity-200));
59
+ --cnvs-sys-color-border-input-alert: var(--cnvs-base-palette-cantaloupe-600);
60
+ --cnvs-sys-color-border-input-error: var(--cnvs-base-palette-cinnamon-500);
61
+ --cnvs-sys-color-border-input-active: var(--cnvs-base-palette-blueberry-400);
62
+ --cnvs-sys-color-border-input-disabled: var(--cnvs-base-palette-soap-600);
63
+ --cnvs-sys-color-border-input-hover: var(--cnvs-base-palette-licorice-500);
64
+ --cnvs-sys-color-border-input-default: var(--cnvs-base-palette-licorice-200);
65
+ --cnvs-sys-color-fg-icon-primary: var(--cnvs-base-palette-blueberry-400);
66
+ --cnvs-sys-color-fg-icon-inverse: var(--cnvs-base-palette-french-vanilla-100);
67
+ --cnvs-sys-color-fg-icon-disabled: var(--cnvs-base-palette-soap-600);
68
+ --cnvs-sys-color-fg-icon-hover: var(--cnvs-base-palette-licorice-500);
69
+ --cnvs-sys-color-fg-icon-accent: var(--cnvs-base-palette-licorice-200);
70
+ --cnvs-sys-color-fg-icon-background: var(--cnvs-base-palette-licorice-200);
71
+ --cnvs-sys-color-fg-icon-fill: var(--cnvs-base-palette-licorice-200);
72
+ --cnvs-sys-color-fg-type-selected: var(--cnvs-base-palette-blueberry-400);
73
+ --cnvs-sys-color-fg-type-error: var(--cnvs-base-palette-cinnamon-500);
74
+ --cnvs-sys-color-fg-type-inverse: var(--cnvs-base-palette-french-vanilla-100);
75
+ --cnvs-sys-color-fg-type-link-visited: var(--cnvs-base-palette-blueberry-600);
76
+ --cnvs-sys-color-fg-type-link-active: var(--cnvs-base-palette-blueberry-600);
77
+ --cnvs-sys-color-fg-type-link-focus: var(--cnvs-base-palette-blueberry-400);
78
+ --cnvs-sys-color-fg-type-link-default: var(--cnvs-base-palette-blueberry-400);
79
+ --cnvs-sys-color-fg-type-disabled: var(--cnvs-base-palette-licorice-100);
80
+ --cnvs-sys-color-fg-type-hint: var(--cnvs-base-palette-licorice-300);
81
+ --cnvs-sys-color-fg-type-body: var(--cnvs-base-palette-black-pepper-300);
82
+ --cnvs-sys-color-fg-type-heading: var(--cnvs-base-palette-black-pepper-400);
83
+ --cnvs-sys-color-bg-overlay: rgba(0,0,0,var(--cnvs-base-opacity-400));
84
+ --cnvs-sys-color-bg-help: rgba(0,0,0,var(--cnvs-base-opacity-500));
85
+ --cnvs-sys-color-bg-status-alert: var(--cnvs-base-palette-cantaloupe-400);
86
+ --cnvs-sys-color-bg-status-error: var(--cnvs-base-palette-cinnamon-500);
87
+ --cnvs-sys-color-bg-status-success: var(--cnvs-base-palette-green-apple-400);
88
+ --cnvs-sys-color-bg-delete-hover: var(--cnvs-base-palette-cinnamon-600);
89
+ --cnvs-sys-color-bg-delete-default: var(--cnvs-base-palette-cinnamon-500);
90
+ --cnvs-sys-color-bg-secondary-active: var(--cnvs-base-palette-black-pepper-400);
91
+ --cnvs-sys-color-bg-secondary-hover: var(--cnvs-base-palette-black-pepper-300);
92
+ --cnvs-sys-color-bg-secondary-focus: var(--cnvs-base-palette-french-vanilla-100);
93
+ --cnvs-sys-color-bg-primary-active: var(--cnvs-base-palette-blueberry-600);
94
+ --cnvs-sys-color-bg-primary-hover: var(--cnvs-base-palette-blueberry-500);
95
+ --cnvs-sys-color-bg-primary-default: var(--cnvs-base-palette-blueberry-400);
96
+ --cnvs-sys-color-bg-selected: var(--cnvs-base-palette-blueberry-200);
97
+ --cnvs-sys-color-bg-active: var(--cnvs-base-palette-soap-400);
98
+ --cnvs-sys-color-bg-hover: var(--cnvs-base-palette-soap-300);
99
+ --cnvs-sys-color-bg-alt: var(--cnvs-base-palette-soap-200);
100
+ --cnvs-sys-color-bg-default: var(--cnvs-base-palette-french-vanilla-100);
101
+ --cnvs-sys-border: 0.0625rem solid var(--cnvs-base-palette-soap-500);
102
+ --cnvs-sys-font-size-subtext-medium: var(--cnvs-base-font-size-50);
103
+ --cnvs-sys-depth-6: var(--cnvs-base-shadow-600);
104
+ --cnvs-sys-depth-5: var(--cnvs-base-shadow-500);
105
+ --cnvs-sys-depth-4: var(--cnvs-base-shadow-400);
106
+ --cnvs-sys-depth-3: var(--cnvs-base-shadow-300);
107
+ --cnvs-sys-depth-2: var(--cnvs-base-shadow-200);
108
+ --cnvs-sys-depth-1: var(--cnvs-base-shadow-100);
109
+ --cnvs-sys-line-height-subtext-medium: var(--cnvs-base-line-height-150);
110
+ --cnvs-sys-line-height-subtext-small: var(--cnvs-base-line-height-150);
111
+ --cnvs-sys-line-height-subtext-large: var(--cnvs-base-line-height-200);
112
+ --cnvs-sys-font-size-body-small: var(--cnvs-base-font-size-100);
113
+ --cnvs-sys-line-height-body-small: var(--cnvs-base-line-height-250);
114
+ --cnvs-sys-font-size-body-medium: var(--cnvs-base-font-size-125);
115
+ --cnvs-sys-line-height-body-large: var(--cnvs-base-line-height-300);
116
+ --cnvs-sys-line-height-body-medium: var(--cnvs-base-line-height-300);
117
+ --cnvs-sys-font-size-body-large: var(--cnvs-base-font-size-150);
118
+ --cnvs-sys-line-height-heading-small: var(--cnvs-base-line-height-350);
119
+ --cnvs-sys-font-size-heading-small: var(--cnvs-base-font-size-200);
120
+ --cnvs-sys-line-height-heading-medium: var(--cnvs-base-line-height-400);
121
+ --cnvs-sys-font-size-heading-medium: var(--cnvs-base-font-size-250);
122
+ --cnvs-sys-line-height-heading-large: var(--cnvs-base-line-height-450);
123
+ --cnvs-sys-font-size-heading-large: var(--cnvs-base-font-size-300);
124
+ --cnvs-sys-line-height-title-small: var(--cnvs-base-line-height-500);
125
+ --cnvs-sys-font-size-title-small: var(--cnvs-base-font-size-400);
126
+ --cnvs-sys-line-height-title-medium: var(--cnvs-base-line-height-600);
127
+ --cnvs-sys-font-size-title-medium: var(--cnvs-base-font-size-500);
128
+ --cnvs-sys-line-height-title-large: var(--cnvs-base-line-height-700);
129
+ --cnvs-sys-font-size-title-large: var(--cnvs-base-font-size-600);
130
+ }
131
+
132
+ .cnvs-sys-type-subtext-small {
133
+ font-family: var(--cnvs-base-font-family-50);
134
+ font-weight: var(--cnvs-base-font-weight-400);
135
+ line-height: var(--cnvs-base-line-height-150);
136
+ font-size: var(--cnvs-base-font-size-25);
137
+ letter-spacing: var(--cnvs-base-letter-spacing-50);
138
+ }
139
+
140
+ .cnvs-sys-type-subtext-medium {
141
+ font-family: var(--cnvs-base-font-family-50);
142
+ font-weight: var(--cnvs-base-font-weight-400);
143
+ line-height: var(--cnvs-base-line-height-150);
144
+ font-size: var(--cnvs-base-font-size-50);
145
+ letter-spacing: var(--cnvs-base-letter-spacing-100);
146
+ }
147
+
148
+ .cnvs-sys-type-subtext-large {
149
+ font-family: var(--cnvs-base-font-family-50);
150
+ font-weight: var(--cnvs-base-font-weight-400);
151
+ line-height: var(--cnvs-base-line-height-200);
152
+ font-size: var(--cnvs-base-font-size-75);
153
+ letter-spacing: var(--cnvs-base-letter-spacing-150);
154
+ }
155
+
156
+ .cnvs-sys-type-body-small {
157
+ font-family: var(--cnvs-base-font-family-50);
158
+ font-weight: var(--cnvs-base-font-weight-400);
159
+ line-height: var(--cnvs-base-line-height-250);
160
+ font-size: var(--cnvs-base-font-size-100);
161
+ letter-spacing: var(--cnvs-base-letter-spacing-200);
162
+ }
163
+
164
+ .cnvs-sys-type-body-medium {
165
+ font-family: var(--cnvs-base-font-family-50);
166
+ font-weight: var(--cnvs-base-font-weight-400);
167
+ line-height: var(--cnvs-base-line-height-300);
168
+ font-size: var(--cnvs-base-font-size-125);
169
+ }
170
+
171
+ .cnvs-sys-type-body-large {
172
+ font-family: var(--cnvs-base-font-family-50);
173
+ font-weight: var(--cnvs-base-font-weight-400);
174
+ line-height: var(--cnvs-base-line-height-300);
175
+ font-size: var(--cnvs-base-font-size-150);
176
+ }
177
+
178
+ .cnvs-sys-type-heading-small {
179
+ font-family: var(--cnvs-base-font-family-50);
180
+ font-weight: var(--cnvs-base-font-weight-700);
181
+ line-height: var(--cnvs-base-line-height-350);
182
+ font-size: var(--cnvs-base-font-size-200);
183
+ }
184
+
185
+ .cnvs-sys-type-heading-medium {
186
+ font-family: var(--cnvs-base-font-family-50);
187
+ font-weight: var(--cnvs-base-font-weight-700);
188
+ line-height: var(--cnvs-base-line-height-400);
189
+ font-size: var(--cnvs-base-font-size-250);
190
+ }
191
+
192
+ .cnvs-sys-type-heading-large {
193
+ font-family: var(--cnvs-base-font-family-50);
194
+ font-weight: var(--cnvs-base-font-weight-700);
195
+ line-height: var(--cnvs-base-line-height-450);
196
+ font-size: var(--cnvs-base-font-size-300);
197
+ }
198
+
199
+ .cnvs-sys-type-title-small {
200
+ font-family: var(--cnvs-base-font-family-50);
201
+ font-weight: var(--cnvs-base-font-weight-700);
202
+ line-height: var(--cnvs-base-line-height-500);
203
+ font-size: var(--cnvs-base-font-size-400);
204
+ }
205
+
206
+ .cnvs-sys-type-title-medium {
207
+ font-family: var(--cnvs-base-font-family-50);
208
+ font-weight: var(--cnvs-base-font-weight-700);
209
+ line-height: var(--cnvs-base-line-height-600);
210
+ font-size: var(--cnvs-base-font-size-500);
211
+ }
212
+
213
+ .cnvs-sys-type-title-large {
214
+ font-family: var(--cnvs-base-font-family-50);
215
+ font-weight: var(--cnvs-base-font-weight-700);
216
+ line-height: var(--cnvs-base-line-height-700);
217
+ font-size: var(--cnvs-base-font-size-600);
218
+ }