@workday/canvas-tokens-web 0.1.6 → 1.0.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.
Files changed (37) hide show
  1. package/css/base/_variables.css +228 -0
  2. package/{dist/css → css}/brand/_variables.css +5 -5
  3. package/css/system/_variables.css +148 -0
  4. package/less/base/_variables.less +225 -0
  5. package/{dist/less → less}/brand/_variables.less +5 -5
  6. package/less/system/_variables.less +145 -0
  7. package/package.json +8 -3
  8. package/scss/base/_variables.sass +225 -0
  9. package/scss/base/_variables.scss +225 -0
  10. package/{dist/scss → scss}/brand/_variables.sass +5 -5
  11. package/{dist/scss → scss}/brand/_variables.scss +5 -5
  12. package/scss/system/_variables.sass +145 -0
  13. package/scss/system/_variables.scss +145 -0
  14. package/dist/common-js/base/index.d.ts +0 -227
  15. package/dist/common-js/base/index.js +0 -230
  16. package/dist/common-js/brand/index.d.ts +0 -58
  17. package/dist/common-js/brand/index.js +0 -54
  18. package/dist/common-js/index.d.ts +0 -9
  19. package/dist/common-js/index.js +0 -14
  20. package/dist/common-js/system/index.d.ts +0 -287
  21. package/dist/common-js/system/index.js +0 -279
  22. package/dist/css/base/_variables.css +0 -229
  23. package/dist/css/system/_variables.css +0 -218
  24. package/dist/es6/base/index.d.ts +0 -227
  25. package/dist/es6/base/index.js +0 -227
  26. package/dist/es6/brand/index.d.ts +0 -58
  27. package/dist/es6/brand/index.js +0 -51
  28. package/dist/es6/index.d.ts +0 -9
  29. package/dist/es6/index.js +0 -9
  30. package/dist/es6/system/index.d.ts +0 -287
  31. package/dist/es6/system/index.js +0 -276
  32. package/dist/less/base/_variables.less +0 -226
  33. package/dist/less/system/_variables.less +0 -215
  34. package/dist/scss/base/_variables.sass +0 -226
  35. package/dist/scss/base/_variables.scss +0 -226
  36. package/dist/scss/system/_variables.sass +0 -215
  37. package/dist/scss/system/_variables.scss +0 -215
package/css/base/_variables.css ADDED
@@ -0,0 +1,228 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Thu, 07 Dec 2023 23:25:13 GMT
4
+ */
5
+
6
+ :root {
7
+ --cnvs-base-palette-cinnamon-100: rgba(255,239,238,1);
8
+ --cnvs-base-palette-cinnamon-200: rgba(252,201,197,1);
9
+ --cnvs-base-palette-cinnamon-300: rgba(255,134,125,1);
10
+ --cnvs-base-palette-cinnamon-400: rgba(255,83,71,1);
11
+ --cnvs-base-palette-cinnamon-500: rgba(222,46,33,1);
12
+ --cnvs-base-palette-cinnamon-600: rgba(163,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(181,52,19,1);
19
+ --cnvs-base-palette-chili-mango-100: rgba(255,230,217,1);
20
+ --cnvs-base-palette-chili-mango-200: rgba(255,199,171,1);
21
+ --cnvs-base-palette-chili-mango-300: rgba(255,155,105,1);
22
+ --cnvs-base-palette-chili-mango-400: rgba(255,103,27,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,238,217,1);
26
+ --cnvs-base-palette-cantaloupe-200: rgba(252,212,159,1);
27
+ --cnvs-base-palette-cantaloupe-300: rgba(255,188,99,1);
28
+ --cnvs-base-palette-cantaloupe-400: rgba(255,161,38,1);
29
+ --cnvs-base-palette-cantaloupe-500: rgba(243,139,0,1);
30
+ --cnvs-base-palette-cantaloupe-600: rgba(192,108,0,1);
31
+ --cnvs-base-palette-sour-lemon-100: rgba(255,249,230,1);
32
+ --cnvs-base-palette-sour-lemon-200: rgba(255,236,171,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,230,1);
38
+ --cnvs-base-palette-juicy-pear-200: rgba(226,243,145,1);
39
+ --cnvs-base-palette-juicy-pear-300: rgba(196,222,64,1);
40
+ --cnvs-base-palette-juicy-pear-400: rgba(168,194,36,1);
41
+ --cnvs-base-palette-juicy-pear-500: rgba(142,166,24,1);
42
+ --cnvs-base-palette-juicy-pear-600: rgba(104,120,24,1);
43
+ --cnvs-base-palette-kiwi-100: rgba(236,252,215,1);
44
+ --cnvs-base-palette-kiwi-200: rgba(202,245,147,1);
45
+ --cnvs-base-palette-kiwi-300: rgba(167,224,92,1);
46
+ --cnvs-base-palette-kiwi-400: rgba(119,188,31,1);
47
+ --cnvs-base-palette-kiwi-500: rgba(96,153,21,1);
48
+ --cnvs-base-palette-kiwi-600: rgba(83,120,36,1);
49
+ --cnvs-base-palette-green-apple-100: rgba(235,255,240,1);
50
+ --cnvs-base-palette-green-apple-200: rgba(172,245,190,1);
51
+ --cnvs-base-palette-green-apple-300: rgba(95,227,128,1);
52
+ --cnvs-base-palette-green-apple-400: rgba(67,196,99,1);
53
+ --cnvs-base-palette-green-apple-500: rgba(49,156,76,1);
54
+ --cnvs-base-palette-green-apple-600: rgba(33,122,55,1);
55
+ --cnvs-base-palette-watermelon-100: rgba(235,253,248,1);
56
+ --cnvs-base-palette-watermelon-200: rgba(183,237,222,1);
57
+ --cnvs-base-palette-watermelon-300: rgba(101,204,175,1);
58
+ --cnvs-base-palette-watermelon-400: rgba(18,166,124,1);
59
+ --cnvs-base-palette-watermelon-500: rgba(12,122,91,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(172,236,243,1);
63
+ --cnvs-base-palette-jewel-300: rgba(68,200,215,1);
64
+ --cnvs-base-palette-jewel-400: rgba(30,164,179,1);
65
+ --cnvs-base-palette-jewel-500: rgba(26,129,140,1);
66
+ --cnvs-base-palette-jewel-600: rgba(21,105,115,1);
67
+ --cnvs-base-palette-toothpaste-100: rgba(215,241,252,1);
68
+ --cnvs-base-palette-toothpaste-200: rgba(153,224,255,1);
69
+ --cnvs-base-palette-toothpaste-300: rgba(64,180,229,1);
70
+ --cnvs-base-palette-toothpaste-400: rgba(24,148,201,1);
71
+ --cnvs-base-palette-toothpaste-500: rgba(2,113,161,1);
72
+ --cnvs-base-palette-toothpaste-600: rgba(0,91,130,1);
73
+ --cnvs-base-palette-blueberry-100: rgba(215,234,252,1);
74
+ --cnvs-base-palette-blueberry-200: rgba(166,210,255,1);
75
+ --cnvs-base-palette-blueberry-300: rgba(64,160,255,1);
76
+ --cnvs-base-palette-blueberry-400: rgba(8,117,225,1);
77
+ --cnvs-base-palette-blueberry-500: rgba(0,92,185,1);
78
+ --cnvs-base-palette-blueberry-600: rgba(0,67,135,1);
79
+ --cnvs-base-palette-plum-100: rgba(230,241,255,1);
80
+ --cnvs-base-palette-plum-200: rgba(166,205,255,1);
81
+ --cnvs-base-palette-plum-300: rgba(82,155,250,1);
82
+ --cnvs-base-palette-plum-400: rgba(56,129,225,1);
83
+ --cnvs-base-palette-plum-500: rgba(49,102,171,1);
84
+ --cnvs-base-palette-plum-600: rgba(38,74,122,1);
85
+ --cnvs-base-palette-berry-smoothie-100: rgba(232,237,255,1);
86
+ --cnvs-base-palette-berry-smoothie-200: rgba(195,194,255,1);
87
+ --cnvs-base-palette-berry-smoothie-300: rgba(120,145,255,1);
88
+ --cnvs-base-palette-berry-smoothie-400: rgba(94,119,230,1);
89
+ --cnvs-base-palette-berry-smoothie-500: rgba(75,94,179,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(132,131,230,1);
94
+ --cnvs-base-palette-blackberry-400: rgba(92,89,230,1);
95
+ --cnvs-base-palette-blackberry-500: rgba(65,63,204,1);
96
+ --cnvs-base-palette-blackberry-600: rgba(46,45,145,1);
97
+ --cnvs-base-palette-island-punch-100: rgba(245,240,255,1);
98
+ --cnvs-base-palette-island-punch-200: rgba(210,190,250,1);
99
+ --cnvs-base-palette-island-punch-300: rgba(168,138,230,1);
100
+ --cnvs-base-palette-island-punch-400: rgba(134,96,209,1);
101
+ --cnvs-base-palette-island-punch-500: rgba(99,69,161,1);
102
+ --cnvs-base-palette-island-punch-600: rgba(80,56,130,1);
103
+ --cnvs-base-palette-grape-soda-100: rgba(254,235,255,1);
104
+ --cnvs-base-palette-grape-soda-200: rgba(250,192,255,1);
105
+ --cnvs-base-palette-grape-soda-300: rgba(222,138,230,1);
106
+ --cnvs-base-palette-grape-soda-400: rgba(200,96,209,1);
107
+ --cnvs-base-palette-grape-soda-500: rgba(151,73,158,1);
108
+ --cnvs-base-palette-grape-soda-600: rgba(124,56,130,1);
109
+ --cnvs-base-palette-pomegranate-100: rgba(255,235,243,1);
110
+ --cnvs-base-palette-pomegranate-200: rgba(255,189,189,1);
111
+ --cnvs-base-palette-pomegranate-300: rgba(255,92,154,1);
112
+ --cnvs-base-palette-pomegranate-400: rgba(243,17,103,1);
113
+ --cnvs-base-palette-pomegranate-500: rgba(199,5,80,1);
114
+ --cnvs-base-palette-pomegranate-600: rgba(153,0,58,1);
115
+ --cnvs-base-palette-fruit-punch-100: rgba(255,238,238,1);
116
+ --cnvs-base-palette-fruit-punch-200: rgba(255,189,189,1);
117
+ --cnvs-base-palette-fruit-punch-300: rgba(255,126,126,1);
118
+ --cnvs-base-palette-fruit-punch-400: rgba(255,76,76,1);
119
+ --cnvs-base-palette-fruit-punch-500: rgba(225,47,47,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,215,207,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(140,114,102,1);
126
+ --cnvs-base-palette-root-beer-600: rgba(102,77,66,1);
127
+ --cnvs-base-palette-toasted-marshmallow-100: rgba(253,246,230,1);
128
+ --cnvs-base-palette-toasted-marshmallow-200: rgba(235,214,169,1);
129
+ --cnvs-base-palette-toasted-marshmallow-300: rgba(230,191,108,1);
130
+ --cnvs-base-palette-toasted-marshmallow-400: rgba(204,158,59,1);
131
+ --cnvs-base-palette-toasted-marshmallow-500: rgba(179,127,16,1);
132
+ --cnvs-base-palette-toasted-marshmallow-600: rgba(140,96,0,1);
133
+ --cnvs-base-palette-coconut-100: rgba(240,238,238,1);
134
+ --cnvs-base-palette-coconut-200: rgba(227,223,223,1);
135
+ --cnvs-base-palette-coconut-300: rgba(209,203,204,1);
136
+ --cnvs-base-palette-coconut-400: rgba(179,172,172,1);
137
+ --cnvs-base-palette-coconut-500: rgba(158,149,149,1);
138
+ --cnvs-base-palette-coconut-600: rgba(143,134,135,1);
139
+ --cnvs-base-palette-cappuccino-100: rgba(122,115,116,1);
140
+ --cnvs-base-palette-cappuccino-200: rgba(112,104,105,1);
141
+ --cnvs-base-palette-cappuccino-300: rgba(94,87,87,1);
142
+ --cnvs-base-palette-cappuccino-400: rgba(74,66,66,1);
143
+ --cnvs-base-palette-cappuccino-500: rgba(53,47,47,1);
144
+ --cnvs-base-palette-cappuccino-600: rgba(35,31,32,1);
145
+ --cnvs-base-palette-licorice-100: rgba(161,170,179,1);
146
+ --cnvs-base-palette-licorice-200: rgba(123,133,143,1);
147
+ --cnvs-base-palette-licorice-300: rgba(94,106,117,1);
148
+ --cnvs-base-palette-licorice-400: rgba(74,85,97,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(240,241,242,1);
153
+ --cnvs-base-palette-soap-300: rgba(232,235,237,1);
154
+ --cnvs-base-palette-soap-400: rgba(223,226,230,1);
155
+ --cnvs-base-palette-soap-500: rgba(206,211,217,1);
156
+ --cnvs-base-palette-soap-600: rgba(185,192,199,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(73,73,73,1);
166
+ --cnvs-base-palette-black-pepper-400: rgba(51,51,51,1);
167
+ --cnvs-base-palette-black-pepper-500: rgba(30,30,30,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: 1rem;
190
+ --cnvs-base-line-height-100: 1.25rem;
191
+ --cnvs-base-line-height-150: 1.5rem;
192
+ --cnvs-base-line-height-200: 1.75rem;
193
+ --cnvs-base-line-height-250: 2rem;
194
+ --cnvs-base-line-height-300: 2.25rem;
195
+ --cnvs-base-line-height-350: 2.5rem;
196
+ --cnvs-base-line-height-400: 3rem;
197
+ --cnvs-base-line-height-500: 3.5rem;
198
+ --cnvs-base-line-height-600: 4rem;
199
+ --cnvs-base-line-height-750: 5rem;
200
+ --cnvs-base-line-height-900: 6rem;
201
+ --cnvs-base-line-height-1050: 7rem;
202
+ --cnvs-base-typescale-size-default: 0.125rem;
203
+ --cnvs-base-typescale-size-heading: 0.25rem;
204
+ --cnvs-base-typescale-size-title: 0.5rem;
205
+ --cnvs-base-typescale-size-display: 1rem;
206
+ --cnvs-base-typescale-height-default: 0.25rem;
207
+ --cnvs-base-typescale-height-title: 0.5rem;
208
+ --cnvs-base-typescale-height-display: 1rem;
209
+ --cnvs-base-font-family-50: "Roboto"; /* Default font-family */
210
+ --cnvs-base-font-family-100: "Roboto Mono";
211
+ --cnvs-base-font-family-200: "Noto Sans";
212
+ --cnvs-base-font-weight-300: 300;
213
+ --cnvs-base-font-weight-400: 400;
214
+ --cnvs-base-font-weight-500: 500;
215
+ --cnvs-base-font-weight-700: 700;
216
+ --cnvs-base-letter-spacing-50: 0.025rem;
217
+ --cnvs-base-letter-spacing-100: 0.02rem;
218
+ --cnvs-base-letter-spacing-150: 0.015rem;
219
+ --cnvs-base-letter-spacing-200: 0.01rem;
220
+ --cnvs-base-shadow-100: 0 0.0625rem 0.25rem 0 rgba(31,38,46,0.12), 0 0.125rem 0.5rem 0 rgba(31,38,46,0.08);
221
+ --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); /* Top navigation, Bottom navigation */
222
+ --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);
223
+ --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);
224
+ --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);
225
+ --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);
226
+ --cnvs-base-level: 2; /* Used to calculate the skip level amount between levels in the type ramp, such as going from subtext to body, body to heading. */
227
+ --cnvs-base-unit: 0.25rem; /* The base unit used in the grid system.; */
228
+ }
package/{dist/css → css}/brand/_variables.css RENAMED
@@ -1,10 +1,13 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 29 Sep 2023 22:32:54 GMT
3
+ * Generated on Thu, 07 Dec 2023 23:25:13 GMT
4
4
  */
5
5
 
6
6
  :root {
7
7
  --cnvs-brand-error-darkest: rgba(128,22,14,1);
8
+ --cnvs-brand-common-alert-inner: var(--cnvs-base-palette-cantaloupe-400);
9
+ --cnvs-brand-common-error-inner: var(--cnvs-base-palette-cinnamon-500);
10
+ --cnvs-brand-common-focus-outline: var(--cnvs-base-palette-blueberry-400);
8
11
  --cnvs-brand-neutral-accent: var(--cnvs-base-palette-french-vanilla-100);
9
12
  --cnvs-brand-neutral-darkest: var(--cnvs-base-palette-licorice-400);
10
13
  --cnvs-brand-neutral-dark: var(--cnvs-base-palette-licorice-300);
@@ -34,9 +37,6 @@
34
37
  --cnvs-brand-primary-base: var(--cnvs-base-palette-blueberry-400);
35
38
  --cnvs-brand-primary-light: var(--cnvs-base-palette-blueberry-200);
36
39
  --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);
40
+ --cnvs-brand-gradient-primary: linear-gradient(90deg, var(--cnvs-brand-primary-base) 0%, var(--cnvs-brand-primary-dark) 100%);
41
41
  }
42
42
 
package/css/system/_variables.css ADDED
@@ -0,0 +1,148 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Thu, 07 Dec 2023 23:25:13 GMT
4
+ */
5
+
6
+ :root {
7
+ --cnvs-sys-space-zero: 0; /* Stacks, rows in tables */
8
+ --cnvs-sys-shape-zero: 0rem; /* This is the initial shape of every new element. Use this for backgrounds screens and fixed navigation containers such as headers, and side-panels. */
9
+ --cnvs-sys-font-weight-bold: var(--cnvs-base-font-weight-700);
10
+ --cnvs-sys-font-weight-medium: var(--cnvs-base-font-weight-500);
11
+ --cnvs-sys-font-weight-normal: var(--cnvs-base-font-weight-400);
12
+ --cnvs-sys-font-weight-light: var(--cnvs-base-font-weight-300);
13
+ --cnvs-sys-line-height-subtext-medium: var(--cnvs-base-line-height-50);
14
+ --cnvs-sys-line-height-subtext-small: var(--cnvs-base-line-height-50);
15
+ --cnvs-sys-font-size-subtext-small: var(--cnvs-base-font-size-25);
16
+ --cnvs-sys-font-family-global: var(--cnvs-base-font-family-200);
17
+ --cnvs-sys-font-family-mono: var(--cnvs-base-font-family-100);
18
+ --cnvs-sys-font-family-default: var(--cnvs-base-font-family-50);
19
+ --cnvs-sys-space-x20: calc(var(--cnvs-base-unit) * 20); /* - Use sparingly; - Helps to put focus on the primary element within your page; - Use to de-clutter your UI when a lot of space is available */
20
+ --cnvs-sys-space-x16: calc(var(--cnvs-base-unit) * 16); /* - Use to de-clutter your UI when a lot of space is available; - Separate banner sections from page content; - Use to differentiate page content like page sections */
21
+ --cnvs-sys-space-x10: calc(var(--cnvs-base-unit) * 10); /* • Used for outer margins on the overall page content ; • Used for inner margins on large items such as page sections */
22
+ --cnvs-sys-space-x8: calc(var(--cnvs-base-unit) * 8); /* • Standard spacing between cards; • Used to separate groups of content ; • Separate section headings or titles from body text or inputs */
23
+ --cnvs-sys-space-x6: calc(var(--cnvs-base-unit) * 6); /* • Padding around card content; • Related elements where more space between them can be afforded; • Separate section headings or titles from body text or inputs */
24
+ --cnvs-sys-space-x4: calc(var(--cnvs-base-unit) * 4); /* Default space token. Used to group Inputs with related data */
25
+ --cnvs-sys-space-x3: calc(var(--cnvs-base-unit) * 3); /* Use when compact padding is required */
26
+ --cnvs-sys-space-x2: calc(var(--cnvs-base-unit) * 2); /* Commonly used to group compact elements like icon buttons */
27
+ --cnvs-sys-space-x1: var(--cnvs-base-unit); /* Compact spacing between text or icons */
28
+ --cnvs-sys-shape-round: calc(var(--cnvs-base-unit) * 250); /* Commonly used for our standard buttons and profile avatars: All Primary, Secondary Buttons, Radio Buttons and Notification Badges. */
29
+ --cnvs-sys-shape-x2: calc(var(--cnvs-base-unit) * 2); /* Use this for all the containers and popups: All Cards, Modals, Tooltips and Toasts. */
30
+ --cnvs-sys-shape-x1: var(--cnvs-base-unit); /* Use this for form components presenting text information or inputs: Text Inputs and Text Area, Dropdowns, Menus and Banners. */
31
+ --cnvs-sys-shape-half: calc(var(--cnvs-base-unit) * 0.5); /* Use this for subtle and small components that don’t require to group complex information like Status Indicators, Checkboxes and Color Swatches. */
32
+ --cnvs-sys-opacity-disabled: var(--cnvs-base-opacity-300); /* State layer added on top of disabled elements. */
33
+ --cnvs-sys-line-height-subtext-large: var(--cnvs-base-line-height-100);
34
+ --cnvs-sys-font-size-subtext-medium: var(--cnvs-base-font-size-50);
35
+ --cnvs-sys-depth-6: var(--cnvs-base-shadow-600); /* Modal Dialogs, Side Panels (when opacity overlay behaviour; is applied) */
36
+ --cnvs-sys-depth-5: var(--cnvs-base-shadow-500); /* Banners, Snackbars, Toast Messages, Non modal Dialogs, ; Side Panels (when opacity overlay behaviour is not applied) */
37
+ --cnvs-sys-depth-4: var(--cnvs-base-shadow-400); /* Bottom Sheets */
38
+ --cnvs-sys-depth-3: var(--cnvs-base-shadow-300); /* Floating Action Buttons (FAB), Menus */
39
+ --cnvs-sys-depth-2: var(--cnvs-base-shadow-200); /* Top navigation, Bottom Navigation */
40
+ --cnvs-sys-depth-1: var(--cnvs-base-shadow-100); /* Standard card depth */
41
+ --cnvs-sys-line-height-body-small: var(--cnvs-base-line-height-150);
42
+ --cnvs-sys-font-size-subtext-large: var(--cnvs-base-font-size-75);
43
+ --cnvs-sys-line-height-body-large: var(--cnvs-base-line-height-200);
44
+ --cnvs-sys-line-height-body-medium: var(--cnvs-base-line-height-200);
45
+ --cnvs-sys-font-size-body-small: var(--cnvs-base-font-size-100);
46
+ --cnvs-sys-line-height-heading-small: var(--cnvs-base-line-height-250);
47
+ --cnvs-sys-font-size-body-medium: var(--cnvs-base-font-size-125);
48
+ --cnvs-sys-line-height-heading-medium: var(--cnvs-base-line-height-300);
49
+ --cnvs-sys-font-size-body-large: var(--cnvs-base-font-size-150);
50
+ --cnvs-sys-line-height-heading-large: var(--cnvs-base-line-height-350);
51
+ --cnvs-sys-font-size-heading-small: var(--cnvs-base-font-size-200);
52
+ --cnvs-sys-line-height-title-small: var(--cnvs-base-line-height-400);
53
+ --cnvs-sys-font-size-heading-medium: var(--cnvs-base-font-size-250);
54
+ --cnvs-sys-line-height-title-medium: var(--cnvs-base-line-height-500);
55
+ --cnvs-sys-font-size-heading-large: var(--cnvs-base-font-size-300);
56
+ --cnvs-sys-line-height-title-large: var(--cnvs-base-line-height-600);
57
+ --cnvs-sys-font-size-title-small: var(--cnvs-base-font-size-400);
58
+ --cnvs-sys-font-size-title-medium: var(--cnvs-base-font-size-500);
59
+ --cnvs-sys-font-size-title-large: var(--cnvs-base-font-size-600);
60
+ }
61
+
62
+ .cnvs-sys-type-subtext-small {
63
+ font-family: var(--cnvs-base-font-family-50);
64
+ font-weight: var(--cnvs-base-font-weight-400);
65
+ line-height: var(--cnvs-base-line-height-50);
66
+ font-size: var(--cnvs-base-font-size-25);
67
+ letter-spacing: var(--cnvs-base-letter-spacing-50);
68
+ }
69
+
70
+ .cnvs-sys-type-subtext-medium {
71
+ font-family: var(--cnvs-base-font-family-50);
72
+ font-weight: var(--cnvs-base-font-weight-400);
73
+ line-height: var(--cnvs-base-line-height-50);
74
+ font-size: var(--cnvs-base-font-size-50);
75
+ letter-spacing: var(--cnvs-base-letter-spacing-100);
76
+ }
77
+
78
+ .cnvs-sys-type-subtext-large {
79
+ font-family: var(--cnvs-base-font-family-50);
80
+ font-weight: var(--cnvs-base-font-weight-400);
81
+ line-height: var(--cnvs-base-line-height-100);
82
+ font-size: var(--cnvs-base-font-size-75);
83
+ letter-spacing: var(--cnvs-base-letter-spacing-150);
84
+ }
85
+
86
+ .cnvs-sys-type-body-small {
87
+ font-family: var(--cnvs-base-font-family-50);
88
+ font-weight: var(--cnvs-base-font-weight-400);
89
+ line-height: var(--cnvs-base-line-height-150);
90
+ font-size: var(--cnvs-base-font-size-100);
91
+ letter-spacing: var(--cnvs-base-letter-spacing-200);
92
+ }
93
+
94
+ .cnvs-sys-type-body-medium {
95
+ font-family: var(--cnvs-base-font-family-50);
96
+ font-weight: var(--cnvs-base-font-weight-400);
97
+ line-height: var(--cnvs-base-line-height-200);
98
+ font-size: var(--cnvs-base-font-size-125);
99
+ }
100
+
101
+ .cnvs-sys-type-body-large {
102
+ font-family: var(--cnvs-base-font-family-50);
103
+ font-weight: var(--cnvs-base-font-weight-400);
104
+ line-height: var(--cnvs-base-line-height-200);
105
+ font-size: var(--cnvs-base-font-size-150);
106
+ }
107
+
108
+ .cnvs-sys-type-heading-small {
109
+ font-family: var(--cnvs-base-font-family-50);
110
+ font-weight: var(--cnvs-base-font-weight-700);
111
+ line-height: var(--cnvs-base-line-height-250);
112
+ font-size: var(--cnvs-base-font-size-200);
113
+ }
114
+
115
+ .cnvs-sys-type-heading-medium {
116
+ font-family: var(--cnvs-base-font-family-50);
117
+ font-weight: var(--cnvs-base-font-weight-700);
118
+ line-height: var(--cnvs-base-line-height-300);
119
+ font-size: var(--cnvs-base-font-size-250);
120
+ }
121
+
122
+ .cnvs-sys-type-heading-large {
123
+ font-family: var(--cnvs-base-font-family-50);
124
+ font-weight: var(--cnvs-base-font-weight-700);
125
+ line-height: var(--cnvs-base-line-height-350);
126
+ font-size: var(--cnvs-base-font-size-300);
127
+ }
128
+
129
+ .cnvs-sys-type-title-small {
130
+ font-family: var(--cnvs-base-font-family-50);
131
+ font-weight: var(--cnvs-base-font-weight-700);
132
+ line-height: var(--cnvs-base-line-height-400);
133
+ font-size: var(--cnvs-base-font-size-400);
134
+ }
135
+
136
+ .cnvs-sys-type-title-medium {
137
+ font-family: var(--cnvs-base-font-family-50);
138
+ font-weight: var(--cnvs-base-font-weight-700);
139
+ line-height: var(--cnvs-base-line-height-500);
140
+ font-size: var(--cnvs-base-font-size-500);
141
+ }
142
+
143
+ .cnvs-sys-type-title-large {
144
+ font-family: var(--cnvs-base-font-family-50);
145
+ font-weight: var(--cnvs-base-font-weight-700);
146
+ line-height: var(--cnvs-base-line-height-600);
147
+ font-size: var(--cnvs-base-font-size-600);
148
+ }
package/less/base/_variables.less ADDED
@@ -0,0 +1,225 @@
1
+
2
+ // Do not edit directly
3
+ // Generated on Thu, 07 Dec 2023 23:25:13 GMT
4
+
5
+ @cnvs-base-palette-cinnamon-100: rgba(255,239,238,1);
6
+ @cnvs-base-palette-cinnamon-200: rgba(252,201,197,1);
7
+ @cnvs-base-palette-cinnamon-300: rgba(255,134,125,1);
8
+ @cnvs-base-palette-cinnamon-400: rgba(255,83,71,1);
9
+ @cnvs-base-palette-cinnamon-500: rgba(222,46,33,1);
10
+ @cnvs-base-palette-cinnamon-600: rgba(163,27,18,1);
11
+ @cnvs-base-palette-peach-100: rgba(255,243,240,1);
12
+ @cnvs-base-palette-peach-200: rgba(255,194,179,1);
13
+ @cnvs-base-palette-peach-300: rgba(255,149,122,1);
14
+ @cnvs-base-palette-peach-400: rgba(255,100,61,1);
15
+ @cnvs-base-palette-peach-500: rgba(222,71,33,1);
16
+ @cnvs-base-palette-peach-600: rgba(181,52,19,1);
17
+ @cnvs-base-palette-chili-mango-100: rgba(255,230,217,1);
18
+ @cnvs-base-palette-chili-mango-200: rgba(255,199,171,1);
19
+ @cnvs-base-palette-chili-mango-300: rgba(255,155,105,1);
20
+ @cnvs-base-palette-chili-mango-400: rgba(255,103,27,1);
21
+ @cnvs-base-palette-chili-mango-500: rgba(224,75,0,1);
22
+ @cnvs-base-palette-chili-mango-600: rgba(163,54,0,1);
23
+ @cnvs-base-palette-cantaloupe-100: rgba(255,238,217,1);
24
+ @cnvs-base-palette-cantaloupe-200: rgba(252,212,159,1);
25
+ @cnvs-base-palette-cantaloupe-300: rgba(255,188,99,1);
26
+ @cnvs-base-palette-cantaloupe-400: rgba(255,161,38,1);
27
+ @cnvs-base-palette-cantaloupe-500: rgba(243,139,0,1);
28
+ @cnvs-base-palette-cantaloupe-600: rgba(192,108,0,1);
29
+ @cnvs-base-palette-sour-lemon-100: rgba(255,249,230,1);
30
+ @cnvs-base-palette-sour-lemon-200: rgba(255,236,171,1);
31
+ @cnvs-base-palette-sour-lemon-300: rgba(255,218,97,1);
32
+ @cnvs-base-palette-sour-lemon-400: rgba(255,198,41,1);
33
+ @cnvs-base-palette-sour-lemon-500: rgba(235,180,0,1);
34
+ @cnvs-base-palette-sour-lemon-600: rgba(189,145,0,1);
35
+ @cnvs-base-palette-juicy-pear-100: rgba(247,250,230,1);
36
+ @cnvs-base-palette-juicy-pear-200: rgba(226,243,145,1);
37
+ @cnvs-base-palette-juicy-pear-300: rgba(196,222,64,1);
38
+ @cnvs-base-palette-juicy-pear-400: rgba(168,194,36,1);
39
+ @cnvs-base-palette-juicy-pear-500: rgba(142,166,24,1);
40
+ @cnvs-base-palette-juicy-pear-600: rgba(104,120,24,1);
41
+ @cnvs-base-palette-kiwi-100: rgba(236,252,215,1);
42
+ @cnvs-base-palette-kiwi-200: rgba(202,245,147,1);
43
+ @cnvs-base-palette-kiwi-300: rgba(167,224,92,1);
44
+ @cnvs-base-palette-kiwi-400: rgba(119,188,31,1);
45
+ @cnvs-base-palette-kiwi-500: rgba(96,153,21,1);
46
+ @cnvs-base-palette-kiwi-600: rgba(83,120,36,1);
47
+ @cnvs-base-palette-green-apple-100: rgba(235,255,240,1);
48
+ @cnvs-base-palette-green-apple-200: rgba(172,245,190,1);
49
+ @cnvs-base-palette-green-apple-300: rgba(95,227,128,1);
50
+ @cnvs-base-palette-green-apple-400: rgba(67,196,99,1);
51
+ @cnvs-base-palette-green-apple-500: rgba(49,156,76,1);
52
+ @cnvs-base-palette-green-apple-600: rgba(33,122,55,1);
53
+ @cnvs-base-palette-watermelon-100: rgba(235,253,248,1);
54
+ @cnvs-base-palette-watermelon-200: rgba(183,237,222,1);
55
+ @cnvs-base-palette-watermelon-300: rgba(101,204,175,1);
56
+ @cnvs-base-palette-watermelon-400: rgba(18,166,124,1);
57
+ @cnvs-base-palette-watermelon-500: rgba(12,122,91,1);
58
+ @cnvs-base-palette-watermelon-600: rgba(0,87,62,1);
59
+ @cnvs-base-palette-jewel-100: rgba(235,253,255,1);
60
+ @cnvs-base-palette-jewel-200: rgba(172,236,243,1);
61
+ @cnvs-base-palette-jewel-300: rgba(68,200,215,1);
62
+ @cnvs-base-palette-jewel-400: rgba(30,164,179,1);
63
+ @cnvs-base-palette-jewel-500: rgba(26,129,140,1);
64
+ @cnvs-base-palette-jewel-600: rgba(21,105,115,1);
65
+ @cnvs-base-palette-toothpaste-100: rgba(215,241,252,1);
66
+ @cnvs-base-palette-toothpaste-200: rgba(153,224,255,1);
67
+ @cnvs-base-palette-toothpaste-300: rgba(64,180,229,1);
68
+ @cnvs-base-palette-toothpaste-400: rgba(24,148,201,1);
69
+ @cnvs-base-palette-toothpaste-500: rgba(2,113,161,1);
70
+ @cnvs-base-palette-toothpaste-600: rgba(0,91,130,1);
71
+ @cnvs-base-palette-blueberry-100: rgba(215,234,252,1);
72
+ @cnvs-base-palette-blueberry-200: rgba(166,210,255,1);
73
+ @cnvs-base-palette-blueberry-300: rgba(64,160,255,1);
74
+ @cnvs-base-palette-blueberry-400: rgba(8,117,225,1);
75
+ @cnvs-base-palette-blueberry-500: rgba(0,92,185,1);
76
+ @cnvs-base-palette-blueberry-600: rgba(0,67,135,1);
77
+ @cnvs-base-palette-plum-100: rgba(230,241,255,1);
78
+ @cnvs-base-palette-plum-200: rgba(166,205,255,1);
79
+ @cnvs-base-palette-plum-300: rgba(82,155,250,1);
80
+ @cnvs-base-palette-plum-400: rgba(56,129,225,1);
81
+ @cnvs-base-palette-plum-500: rgba(49,102,171,1);
82
+ @cnvs-base-palette-plum-600: rgba(38,74,122,1);
83
+ @cnvs-base-palette-berry-smoothie-100: rgba(232,237,255,1);
84
+ @cnvs-base-palette-berry-smoothie-200: rgba(195,194,255,1);
85
+ @cnvs-base-palette-berry-smoothie-300: rgba(120,145,255,1);
86
+ @cnvs-base-palette-berry-smoothie-400: rgba(94,119,230,1);
87
+ @cnvs-base-palette-berry-smoothie-500: rgba(75,94,179,1);
88
+ @cnvs-base-palette-berry-smoothie-600: rgba(59,73,135,1);
89
+ @cnvs-base-palette-blackberry-100: rgba(240,240,255,1);
90
+ @cnvs-base-palette-blackberry-200: rgba(195,194,255,1);
91
+ @cnvs-base-palette-blackberry-300: rgba(132,131,230,1);
92
+ @cnvs-base-palette-blackberry-400: rgba(92,89,230,1);
93
+ @cnvs-base-palette-blackberry-500: rgba(65,63,204,1);
94
+ @cnvs-base-palette-blackberry-600: rgba(46,45,145,1);
95
+ @cnvs-base-palette-island-punch-100: rgba(245,240,255,1);
96
+ @cnvs-base-palette-island-punch-200: rgba(210,190,250,1);
97
+ @cnvs-base-palette-island-punch-300: rgba(168,138,230,1);
98
+ @cnvs-base-palette-island-punch-400: rgba(134,96,209,1);
99
+ @cnvs-base-palette-island-punch-500: rgba(99,69,161,1);
100
+ @cnvs-base-palette-island-punch-600: rgba(80,56,130,1);
101
+ @cnvs-base-palette-grape-soda-100: rgba(254,235,255,1);
102
+ @cnvs-base-palette-grape-soda-200: rgba(250,192,255,1);
103
+ @cnvs-base-palette-grape-soda-300: rgba(222,138,230,1);
104
+ @cnvs-base-palette-grape-soda-400: rgba(200,96,209,1);
105
+ @cnvs-base-palette-grape-soda-500: rgba(151,73,158,1);
106
+ @cnvs-base-palette-grape-soda-600: rgba(124,56,130,1);
107
+ @cnvs-base-palette-pomegranate-100: rgba(255,235,243,1);
108
+ @cnvs-base-palette-pomegranate-200: rgba(255,189,189,1);
109
+ @cnvs-base-palette-pomegranate-300: rgba(255,92,154,1);
110
+ @cnvs-base-palette-pomegranate-400: rgba(243,17,103,1);
111
+ @cnvs-base-palette-pomegranate-500: rgba(199,5,80,1);
112
+ @cnvs-base-palette-pomegranate-600: rgba(153,0,58,1);
113
+ @cnvs-base-palette-fruit-punch-100: rgba(255,238,238,1);
114
+ @cnvs-base-palette-fruit-punch-200: rgba(255,189,189,1);
115
+ @cnvs-base-palette-fruit-punch-300: rgba(255,126,126,1);
116
+ @cnvs-base-palette-fruit-punch-400: rgba(255,76,76,1);
117
+ @cnvs-base-palette-fruit-punch-500: rgba(225,47,47,1);
118
+ @cnvs-base-palette-fruit-punch-600: rgba(184,40,40,1);
119
+ @cnvs-base-palette-root-beer-100: rgba(250,243,240,1);
120
+ @cnvs-base-palette-root-beer-200: rgba(235,215,207,1);
121
+ @cnvs-base-palette-root-beer-300: rgba(220,187,173,1);
122
+ @cnvs-base-palette-root-beer-400: rgba(186,154,140,1);
123
+ @cnvs-base-palette-root-beer-500: rgba(140,114,102,1);
124
+ @cnvs-base-palette-root-beer-600: rgba(102,77,66,1);
125
+ @cnvs-base-palette-toasted-marshmallow-100: rgba(253,246,230,1);
126
+ @cnvs-base-palette-toasted-marshmallow-200: rgba(235,214,169,1);
127
+ @cnvs-base-palette-toasted-marshmallow-300: rgba(230,191,108,1);
128
+ @cnvs-base-palette-toasted-marshmallow-400: rgba(204,158,59,1);
129
+ @cnvs-base-palette-toasted-marshmallow-500: rgba(179,127,16,1);
130
+ @cnvs-base-palette-toasted-marshmallow-600: rgba(140,96,0,1);
131
+ @cnvs-base-palette-coconut-100: rgba(240,238,238,1);
132
+ @cnvs-base-palette-coconut-200: rgba(227,223,223,1);
133
+ @cnvs-base-palette-coconut-300: rgba(209,203,204,1);
134
+ @cnvs-base-palette-coconut-400: rgba(179,172,172,1);
135
+ @cnvs-base-palette-coconut-500: rgba(158,149,149,1);
136
+ @cnvs-base-palette-coconut-600: rgba(143,134,135,1);
137
+ @cnvs-base-palette-cappuccino-100: rgba(122,115,116,1);
138
+ @cnvs-base-palette-cappuccino-200: rgba(112,104,105,1);
139
+ @cnvs-base-palette-cappuccino-300: rgba(94,87,87,1);
140
+ @cnvs-base-palette-cappuccino-400: rgba(74,66,66,1);
141
+ @cnvs-base-palette-cappuccino-500: rgba(53,47,47,1);
142
+ @cnvs-base-palette-cappuccino-600: rgba(35,31,32,1);
143
+ @cnvs-base-palette-licorice-100: rgba(161,170,179,1);
144
+ @cnvs-base-palette-licorice-200: rgba(123,133,143,1);
145
+ @cnvs-base-palette-licorice-300: rgba(94,106,117,1);
146
+ @cnvs-base-palette-licorice-400: rgba(74,85,97,1);
147
+ @cnvs-base-palette-licorice-500: rgba(51,61,71,1);
148
+ @cnvs-base-palette-licorice-600: rgba(31,38,46,1);
149
+ @cnvs-base-palette-soap-100: rgba(246,247,248,1);
150
+ @cnvs-base-palette-soap-200: rgba(240,241,242,1);
151
+ @cnvs-base-palette-soap-300: rgba(232,235,237,1);
152
+ @cnvs-base-palette-soap-400: rgba(223,226,230,1);
153
+ @cnvs-base-palette-soap-500: rgba(206,211,217,1);
154
+ @cnvs-base-palette-soap-600: rgba(185,192,199,1);
155
+ @cnvs-base-palette-french-vanilla-100: rgba(255,255,255,1);
156
+ @cnvs-base-palette-french-vanilla-200: rgba(235,235,235,1);
157
+ @cnvs-base-palette-french-vanilla-300: rgba(212,212,212,1);
158
+ @cnvs-base-palette-french-vanilla-400: rgba(189,189,189,1);
159
+ @cnvs-base-palette-french-vanilla-500: rgba(166,166,166,1);
160
+ @cnvs-base-palette-french-vanilla-600: rgba(143,143,143,1);
161
+ @cnvs-base-palette-black-pepper-100: rgba(120,120,120,1);
162
+ @cnvs-base-palette-black-pepper-200: rgba(97,97,97,1);
163
+ @cnvs-base-palette-black-pepper-300: rgba(73,73,73,1);
164
+ @cnvs-base-palette-black-pepper-400: rgba(51,51,51,1);
165
+ @cnvs-base-palette-black-pepper-500: rgba(30,30,30,1);
166
+ @cnvs-base-palette-black-pepper-600: rgba(0,0,0,1);
167
+ @cnvs-base-opacity-100: 0.08;
168
+ @cnvs-base-opacity-200: 0.12;
169
+ @cnvs-base-opacity-300: 0.4;
170
+ @cnvs-base-opacity-400: 0.65;
171
+ @cnvs-base-opacity-500: 0.85;
172
+ @cnvs-base-font-size-25: 0.625rem;
173
+ @cnvs-base-font-size-50: 0.75rem;
174
+ @cnvs-base-font-size-75: 0.875rem;
175
+ @cnvs-base-font-size-100: 1rem;
176
+ @cnvs-base-font-size-125: 1.125rem;
177
+ @cnvs-base-font-size-150: 1.25rem;
178
+ @cnvs-base-font-size-200: 1.5rem;
179
+ @cnvs-base-font-size-250: 1.75rem;
180
+ @cnvs-base-font-size-300: 2rem;
181
+ @cnvs-base-font-size-400: 2.5rem;
182
+ @cnvs-base-font-size-500: 3rem;
183
+ @cnvs-base-font-size-600: 3.5rem;
184
+ @cnvs-base-font-size-750: 4.5rem;
185
+ @cnvs-base-font-size-900: 5.5rem;
186
+ @cnvs-base-font-size-1050: 6.5rem;
187
+ @cnvs-base-line-height-50: 1rem;
188
+ @cnvs-base-line-height-100: 1.25rem;
189
+ @cnvs-base-line-height-150: 1.5rem;
190
+ @cnvs-base-line-height-200: 1.75rem;
191
+ @cnvs-base-line-height-250: 2rem;
192
+ @cnvs-base-line-height-300: 2.25rem;
193
+ @cnvs-base-line-height-350: 2.5rem;
194
+ @cnvs-base-line-height-400: 3rem;
195
+ @cnvs-base-line-height-500: 3.5rem;
196
+ @cnvs-base-line-height-600: 4rem;
197
+ @cnvs-base-line-height-750: 5rem;
198
+ @cnvs-base-line-height-900: 6rem;
199
+ @cnvs-base-line-height-1050: 7rem;
200
+ @cnvs-base-typescale-size-default: 0.125rem;
201
+ @cnvs-base-typescale-size-heading: 0.25rem;
202
+ @cnvs-base-typescale-size-title: 0.5rem;
203
+ @cnvs-base-typescale-size-display: 1rem;
204
+ @cnvs-base-typescale-height-default: 0.25rem;
205
+ @cnvs-base-typescale-height-title: 0.5rem;
206
+ @cnvs-base-typescale-height-display: 1rem;
207
+ @cnvs-base-font-family-50: "Roboto"; // Default font-family
208
+ @cnvs-base-font-family-100: "Roboto Mono";
209
+ @cnvs-base-font-family-200: "Noto Sans";
210
+ @cnvs-base-font-weight-300: 300;
211
+ @cnvs-base-font-weight-400: 400;
212
+ @cnvs-base-font-weight-500: 500;
213
+ @cnvs-base-font-weight-700: 700;
214
+ @cnvs-base-letter-spacing-50: 0.025rem;
215
+ @cnvs-base-letter-spacing-100: 0.02rem;
216
+ @cnvs-base-letter-spacing-150: 0.015rem;
217
+ @cnvs-base-letter-spacing-200: 0.01rem;
218
+ @cnvs-base-shadow-100: 0 0.0625rem 0.25rem 0 rgba(31,38,46,0.12), 0 0.125rem 0.5rem 0 rgba(31,38,46,0.08);
219
+ @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); // Top navigation, Bottom navigation
220
+ @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);
221
+ @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);
222
+ @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);
223
+ @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);
224
+ @cnvs-base-level: 2; // Used to calculate the skip level amount between levels in the type ramp, such as going from subtext to body, body to heading.
225
+ @cnvs-base-unit: 0.25rem; // The base unit used in the grid system.;
package/{dist/less → less}/brand/_variables.less RENAMED
@@ -1,8 +1,11 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Fri, 29 Sep 2023 22:32:54 GMT
3
+ // Generated on Thu, 07 Dec 2023 23:25:13 GMT
4
4
 
5
5
  @cnvs-brand-error-darkest: rgba(128,22,14,1);
6
+ @cnvs-brand-common-alert-inner: @cnvs-base-palette-cantaloupe-400;
7
+ @cnvs-brand-common-error-inner: @cnvs-base-palette-cinnamon-500;
8
+ @cnvs-brand-common-focus-outline: @cnvs-base-palette-blueberry-400;
6
9
  @cnvs-brand-neutral-accent: @cnvs-base-palette-french-vanilla-100;
7
10
  @cnvs-brand-neutral-darkest: @cnvs-base-palette-licorice-400;
8
11
  @cnvs-brand-neutral-dark: @cnvs-base-palette-licorice-300;
@@ -32,8 +35,5 @@
32
35
  @cnvs-brand-primary-base: @cnvs-base-palette-blueberry-400;
33
36
  @cnvs-brand-primary-light: @cnvs-base-palette-blueberry-200;
34
37
  @cnvs-brand-primary-lightest: @cnvs-base-palette-blueberry-100;
35
- @cnvs-brand-gradient: linear-gradient(90deg, @cnvs-brand-primary-base 0%, @cnvs-brand-primary-dark 100%);
36
- @cnvs-brand-common-alert-inner: @cnvs-brand-alert-base;
37
- @cnvs-brand-common-error-inner: @cnvs-brand-error-base;
38
- @cnvs-brand-common-focus-outline: @cnvs-brand-primary-base;
38
+ @cnvs-brand-gradient-primary: linear-gradient(90deg, @cnvs-brand-primary-base 0%, @cnvs-brand-primary-dark 100%);
39
39