@workday/canvas-tokens-web 1.1.1 → 1.2.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.
- package/css/base/_variables.css +1 -1
- package/css/brand/_variables.css +1 -1
- package/css/system/_variables.css +112 -2
- package/dist/common-js/base/index.d.ts +1 -1
- package/dist/common-js/base/index.js +1 -1
- package/dist/common-js/brand/index.d.ts +1 -1
- package/dist/common-js/brand/index.js +1 -1
- package/dist/common-js/index.d.ts +1 -1
- package/dist/common-js/index.js +1 -1
- package/dist/common-js/system/index.d.ts +723 -2
- package/dist/common-js/system/index.js +190 -2
- package/dist/es6/base/index.d.ts +1 -1
- package/dist/es6/base/index.js +1 -1
- package/dist/es6/brand/index.d.ts +1 -1
- package/dist/es6/brand/index.js +1 -1
- package/dist/es6/index.d.ts +1 -1
- package/dist/es6/index.js +1 -1
- package/dist/es6/system/index.d.ts +723 -2
- package/dist/es6/system/index.js +190 -2
- package/less/base/_variables.less +1 -1
- package/less/brand/_variables.less +1 -1
- package/less/system/_variables.less +112 -2
- package/package.json +1 -1
- package/scss/base/_variables.sass +1 -1
- package/scss/base/_variables.scss +1 -1
- package/scss/brand/_variables.sass +1 -1
- package/scss/brand/_variables.scss +1 -1
- package/scss/system/_variables.sass +112 -2
- package/scss/system/_variables.scss +112 -2
package/dist/es6/system/index.js
CHANGED
|
@@ -1,8 +1,188 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Thu, 21 Mar 2024 03:34:06 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
|
+
export const color = {
|
|
7
|
+
"bg": {
|
|
8
|
+
"default": "--cnvs-sys-color-bg-default",
|
|
9
|
+
"transparent": "--cnvs-sys-color-bg-transparent",
|
|
10
|
+
"overlay": "--cnvs-sys-color-bg-overlay",
|
|
11
|
+
"translucent": "--cnvs-sys-color-bg-translucent",
|
|
12
|
+
"alt": {
|
|
13
|
+
"default": "--cnvs-sys-color-bg-alt-default",
|
|
14
|
+
"soft": "--cnvs-sys-color-bg-alt-soft",
|
|
15
|
+
"strong": "--cnvs-sys-color-bg-alt-strong",
|
|
16
|
+
"stronger": "--cnvs-sys-color-bg-alt-stronger"
|
|
17
|
+
},
|
|
18
|
+
"muted": {
|
|
19
|
+
"default": "--cnvs-sys-color-bg-muted-default",
|
|
20
|
+
"soft": "--cnvs-sys-color-bg-muted-soft",
|
|
21
|
+
"strong": "--cnvs-sys-color-bg-muted-strong"
|
|
22
|
+
},
|
|
23
|
+
"contrast": {
|
|
24
|
+
"default": "--cnvs-sys-color-bg-contrast-default",
|
|
25
|
+
"strong": "--cnvs-sys-color-bg-contrast-strong"
|
|
26
|
+
},
|
|
27
|
+
"primary": {
|
|
28
|
+
"default": "--cnvs-sys-color-bg-primary-default",
|
|
29
|
+
"soft": "--cnvs-sys-color-bg-primary-soft",
|
|
30
|
+
"strong": "--cnvs-sys-color-bg-primary-strong",
|
|
31
|
+
"stronger": "--cnvs-sys-color-bg-primary-stronger"
|
|
32
|
+
},
|
|
33
|
+
"positive": {
|
|
34
|
+
"default": "--cnvs-sys-color-bg-positive-default",
|
|
35
|
+
"soft": "--cnvs-sys-color-bg-positive-soft",
|
|
36
|
+
"strong": "--cnvs-sys-color-bg-positive-strong",
|
|
37
|
+
"stronger": "--cnvs-sys-color-bg-positive-stronger"
|
|
38
|
+
},
|
|
39
|
+
"caution": {
|
|
40
|
+
"default": "--cnvs-sys-color-bg-caution-default",
|
|
41
|
+
"softer": "--cnvs-sys-color-bg-caution-softer",
|
|
42
|
+
"strong": "--cnvs-sys-color-bg-caution-strong",
|
|
43
|
+
"stronger": "--cnvs-sys-color-bg-caution-stronger"
|
|
44
|
+
},
|
|
45
|
+
"critical": {
|
|
46
|
+
"default": "--cnvs-sys-color-bg-critical-default",
|
|
47
|
+
"softer": "--cnvs-sys-color-bg-critical-softer",
|
|
48
|
+
"strong": "--cnvs-sys-color-bg-critical-strong",
|
|
49
|
+
"stronger": "--cnvs-sys-color-bg-critical-stronger"
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
"text": {
|
|
53
|
+
"default": "--cnvs-sys-color-text-default",
|
|
54
|
+
"disabled": "--cnvs-sys-color-text-disabled",
|
|
55
|
+
"hint": "--cnvs-sys-color-text-hint",
|
|
56
|
+
"strong": "--cnvs-sys-color-text-strong",
|
|
57
|
+
"stronger": "--cnvs-sys-color-text-stronger",
|
|
58
|
+
"inverse": "--cnvs-sys-color-text-inverse",
|
|
59
|
+
"critical": {
|
|
60
|
+
"default": "--cnvs-sys-color-text-critical-default"
|
|
61
|
+
},
|
|
62
|
+
"primary": {
|
|
63
|
+
"default": "--cnvs-sys-color-text-primary-default",
|
|
64
|
+
"strong": "--cnvs-sys-color-text-primary-strong"
|
|
65
|
+
},
|
|
66
|
+
"caution": {
|
|
67
|
+
"default": "--cnvs-sys-color-text-caution-default",
|
|
68
|
+
"strong": "--cnvs-sys-color-text-caution-strong"
|
|
69
|
+
}
|
|
70
|
+
},
|
|
71
|
+
"icon": {
|
|
72
|
+
"default": "--cnvs-sys-color-icon-default",
|
|
73
|
+
"soft": "--cnvs-sys-color-icon-soft",
|
|
74
|
+
"strong": "--cnvs-sys-color-icon-strong",
|
|
75
|
+
"inverse": "--cnvs-sys-color-icon-inverse",
|
|
76
|
+
"primary": {
|
|
77
|
+
"default": "--cnvs-sys-color-icon-primary-default",
|
|
78
|
+
"strong": "--cnvs-sys-color-icon-primary-strong"
|
|
79
|
+
},
|
|
80
|
+
"positive": {
|
|
81
|
+
"default": "--cnvs-sys-color-icon-positive-default"
|
|
82
|
+
},
|
|
83
|
+
"critical": {
|
|
84
|
+
"default": "--cnvs-sys-color-icon-critical-default"
|
|
85
|
+
},
|
|
86
|
+
"caution": {
|
|
87
|
+
"default": "--cnvs-sys-color-icon-caution-default",
|
|
88
|
+
"strong": "--cnvs-sys-color-icon-caution-strong"
|
|
89
|
+
}
|
|
90
|
+
},
|
|
91
|
+
"fg": {
|
|
92
|
+
"default": "--cnvs-sys-color-fg-default",
|
|
93
|
+
"strong": "--cnvs-sys-color-fg-strong",
|
|
94
|
+
"stronger": "--cnvs-sys-color-fg-stronger",
|
|
95
|
+
"disabled": "--cnvs-sys-color-fg-disabled",
|
|
96
|
+
"inverse": "--cnvs-sys-color-fg-inverse",
|
|
97
|
+
"critical": {
|
|
98
|
+
"default": "--cnvs-sys-color-fg-critical-default"
|
|
99
|
+
},
|
|
100
|
+
"muted": {
|
|
101
|
+
"default": "--cnvs-sys-color-fg-muted-default",
|
|
102
|
+
"strong": "--cnvs-sys-color-fg-muted-strong",
|
|
103
|
+
"stronger": "--cnvs-sys-color-fg-muted-stronger"
|
|
104
|
+
},
|
|
105
|
+
"primary": {
|
|
106
|
+
"default": "--cnvs-sys-color-fg-primary-default",
|
|
107
|
+
"strong": "--cnvs-sys-color-fg-primary-strong"
|
|
108
|
+
},
|
|
109
|
+
"caution": {
|
|
110
|
+
"default": "--cnvs-sys-color-fg-caution-default",
|
|
111
|
+
"strong": "--cnvs-sys-color-fg-caution-strong"
|
|
112
|
+
},
|
|
113
|
+
"contrast": {
|
|
114
|
+
"default": "--cnvs-sys-color-fg-contrast-default",
|
|
115
|
+
"strong": "--cnvs-sys-color-fg-contrast-strong"
|
|
116
|
+
}
|
|
117
|
+
},
|
|
118
|
+
"border": {
|
|
119
|
+
"input": {
|
|
120
|
+
"disabled": "--cnvs-sys-color-border-input-disabled",
|
|
121
|
+
"default": "--cnvs-sys-color-border-input-default",
|
|
122
|
+
"strong": "--cnvs-sys-color-border-input-strong"
|
|
123
|
+
},
|
|
124
|
+
"contrast": {
|
|
125
|
+
"default": "--cnvs-sys-color-border-contrast-default",
|
|
126
|
+
"strong": "--cnvs-sys-color-border-contrast-strong"
|
|
127
|
+
},
|
|
128
|
+
"primary": {
|
|
129
|
+
"default": "--cnvs-sys-color-border-primary-default"
|
|
130
|
+
},
|
|
131
|
+
"critical": {
|
|
132
|
+
"default": "--cnvs-sys-color-border-critical-default"
|
|
133
|
+
},
|
|
134
|
+
"caution": {
|
|
135
|
+
"default": "--cnvs-sys-color-border-caution-default",
|
|
136
|
+
"strong": "--cnvs-sys-color-border-caution-strong"
|
|
137
|
+
},
|
|
138
|
+
"transparent": "--cnvs-sys-color-border-transparent",
|
|
139
|
+
"inverse": "--cnvs-sys-color-border-inverse",
|
|
140
|
+
"divider": "--cnvs-sys-color-border-divider",
|
|
141
|
+
"container": "--cnvs-sys-color-border-container"
|
|
142
|
+
},
|
|
143
|
+
"shadow": {
|
|
144
|
+
"1": "--cnvs-sys-color-shadow-1",
|
|
145
|
+
"2": "--cnvs-sys-color-shadow-2",
|
|
146
|
+
"default": "--cnvs-sys-color-shadow-default"
|
|
147
|
+
},
|
|
148
|
+
"static": {
|
|
149
|
+
"blue": {
|
|
150
|
+
"default": "--cnvs-sys-color-static-blue-default",
|
|
151
|
+
"soft": "--cnvs-sys-color-static-blue-soft",
|
|
152
|
+
"strong": "--cnvs-sys-color-static-blue-strong"
|
|
153
|
+
},
|
|
154
|
+
"green": {
|
|
155
|
+
"default": "--cnvs-sys-color-static-green-default",
|
|
156
|
+
"soft": "--cnvs-sys-color-static-green-soft",
|
|
157
|
+
"strong": "--cnvs-sys-color-static-green-strong"
|
|
158
|
+
},
|
|
159
|
+
"red": {
|
|
160
|
+
"default": "--cnvs-sys-color-static-red-default",
|
|
161
|
+
"soft": "--cnvs-sys-color-static-red-soft",
|
|
162
|
+
"strong": "--cnvs-sys-color-static-red-strong"
|
|
163
|
+
},
|
|
164
|
+
"orange": {
|
|
165
|
+
"default": "--cnvs-sys-color-static-orange-default",
|
|
166
|
+
"soft": "--cnvs-sys-color-static-orange-soft",
|
|
167
|
+
"strong": "--cnvs-sys-color-static-orange-strong"
|
|
168
|
+
},
|
|
169
|
+
"gray": {
|
|
170
|
+
"default": "--cnvs-sys-color-static-gray-default",
|
|
171
|
+
"soft": "--cnvs-sys-color-static-gray-soft",
|
|
172
|
+
"strong": "--cnvs-sys-color-static-gray-strong",
|
|
173
|
+
"stronger": "--cnvs-sys-color-static-gray-stronger"
|
|
174
|
+
},
|
|
175
|
+
"white": "--cnvs-sys-color-static-white",
|
|
176
|
+
"black": "--cnvs-sys-color-static-black"
|
|
177
|
+
}
|
|
178
|
+
};
|
|
179
|
+
export const breakpoints = {
|
|
180
|
+
"zero": "--cnvs-sys-breakpoints-zero",
|
|
181
|
+
"s": "--cnvs-sys-breakpoints-s",
|
|
182
|
+
"m": "--cnvs-sys-breakpoints-m",
|
|
183
|
+
"l": "--cnvs-sys-breakpoints-l",
|
|
184
|
+
"xl": "--cnvs-sys-breakpoints-xl"
|
|
185
|
+
};
|
|
6
186
|
export const depth = {
|
|
7
187
|
"1": "--cnvs-sys-depth-1",
|
|
8
188
|
"2": "--cnvs-sys-depth-2",
|
|
@@ -12,7 +192,15 @@ export const depth = {
|
|
|
12
192
|
"6": "--cnvs-sys-depth-6"
|
|
13
193
|
};
|
|
14
194
|
export const opacity = {
|
|
15
|
-
"
|
|
195
|
+
"zero": "--cnvs-sys-opacity-zero",
|
|
196
|
+
"disabled": "--cnvs-sys-opacity-disabled",
|
|
197
|
+
"overlay": "--cnvs-sys-opacity-overlay",
|
|
198
|
+
"contrast": "--cnvs-sys-opacity-contrast",
|
|
199
|
+
"full": "--cnvs-sys-opacity-full",
|
|
200
|
+
"shadow": {
|
|
201
|
+
"first": "--cnvs-sys-opacity-shadow-first",
|
|
202
|
+
"second": "--cnvs-sys-opacity-shadow-second"
|
|
203
|
+
}
|
|
16
204
|
};
|
|
17
205
|
export const shape = {
|
|
18
206
|
"zero": "--cnvs-sys-shape-zero",
|
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
3
|
+
// Generated on Thu, 21 Mar 2024 03:34:06 GMT
|
|
4
4
|
|
|
5
5
|
@cnvs-sys-space-zero: 0; // Stacks, rows in tables
|
|
6
6
|
@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.
|
|
7
|
+
@cnvs-sys-opacity-full: 1; // Dev only
|
|
8
|
+
@cnvs-sys-opacity-zero: 0; // Dev only
|
|
9
|
+
@cnvs-sys-breakpoints-zero: 0; // Use to set a media query `min-width` below small.
|
|
10
|
+
@cnvs-sys-color-bg-critical-stronger: rgba(128,22,14,1); // Stronger error background
|
|
7
11
|
@cnvs-sys-font-weight-bold: @cnvs-base-font-weight-700;
|
|
8
12
|
@cnvs-sys-font-weight-medium: @cnvs-base-font-weight-500;
|
|
9
13
|
@cnvs-sys-font-weight-normal: @cnvs-base-font-weight-400;
|
|
@@ -27,7 +31,108 @@
|
|
|
27
31
|
@cnvs-sys-shape-x2: calc(@cnvs-base-unit * 2); // Use this for all the containers and popups: All Cards, Modals, Tooltips and Toasts.
|
|
28
32
|
@cnvs-sys-shape-x1: @cnvs-base-unit; // Use this for form components presenting text information or inputs: Text Inputs and Text Area, Dropdowns, Menus and Banners.
|
|
29
33
|
@cnvs-sys-shape-half: calc(@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.
|
|
30
|
-
@cnvs-sys-opacity-
|
|
34
|
+
@cnvs-sys-opacity-shadow-second: @cnvs-base-opacity-100; // Alpha on second shadow
|
|
35
|
+
@cnvs-sys-opacity-shadow-first: @cnvs-base-opacity-200; // Alpha on first shadow
|
|
36
|
+
@cnvs-sys-opacity-contrast: @cnvs-base-opacity-500; // Tooltips, Status Indicator
|
|
37
|
+
@cnvs-sys-opacity-overlay: @cnvs-base-opacity-400; // Overlay
|
|
38
|
+
@cnvs-sys-opacity-disabled: @cnvs-base-opacity-300; // Disabled states
|
|
39
|
+
@cnvs-sys-breakpoints-xl: calc(@cnvs-base-unit * 360); // Used for extra large screens, such as wide monitors and TVs.
|
|
40
|
+
@cnvs-sys-breakpoints-l: calc(@cnvs-base-unit * 256); // Large screens, such as desktops.
|
|
41
|
+
@cnvs-sys-breakpoints-m: calc(@cnvs-base-unit * 192); // Medium screens, such as laptops.
|
|
42
|
+
@cnvs-sys-breakpoints-s: calc(@cnvs-base-unit * 80); // The `min-width` for mobile devices, such as phones and tablets.
|
|
43
|
+
@cnvs-sys-color-static-black: @cnvs-base-palette-black-pepper-600; // Just black
|
|
44
|
+
@cnvs-sys-color-static-white: @cnvs-base-palette-french-vanilla-100; // Just white
|
|
45
|
+
@cnvs-sys-color-static-gray-stronger: @cnvs-base-palette-licorice-500; // Strongerer gray
|
|
46
|
+
@cnvs-sys-color-static-gray-strong: @cnvs-base-palette-licorice-400; // Stronger gray
|
|
47
|
+
@cnvs-sys-color-static-gray-soft: @cnvs-base-palette-soap-300; // Light gray
|
|
48
|
+
@cnvs-sys-color-static-gray-default: @cnvs-base-palette-licorice-300; // Gray
|
|
49
|
+
@cnvs-sys-color-static-orange-strong: @cnvs-base-palette-cantaloupe-600; // Stronger orange
|
|
50
|
+
@cnvs-sys-color-static-orange-soft: @cnvs-base-palette-cantaloupe-100; // Soft orange
|
|
51
|
+
@cnvs-sys-color-static-orange-default: @cnvs-base-palette-cantaloupe-500; // Orange
|
|
52
|
+
@cnvs-sys-color-static-red-strong: @cnvs-base-palette-cinnamon-600; // Strong red
|
|
53
|
+
@cnvs-sys-color-static-red-soft: @cnvs-base-palette-cinnamon-100; // Light red
|
|
54
|
+
@cnvs-sys-color-static-red-default: @cnvs-base-palette-cinnamon-500; // Red
|
|
55
|
+
@cnvs-sys-color-static-green-strong: @cnvs-base-palette-green-apple-600; // Stronger green
|
|
56
|
+
@cnvs-sys-color-static-green-soft: @cnvs-base-palette-green-apple-100; // Light green
|
|
57
|
+
@cnvs-sys-color-static-green-default: @cnvs-base-palette-green-apple-400; // Default green
|
|
58
|
+
@cnvs-sys-color-static-blue-strong: @cnvs-base-palette-blueberry-500; // Stronger blue
|
|
59
|
+
@cnvs-sys-color-static-blue-soft: @cnvs-base-palette-blueberry-100; // Light blue
|
|
60
|
+
@cnvs-sys-color-static-blue-default: @cnvs-base-palette-blueberry-400; // Blue
|
|
61
|
+
@cnvs-sys-color-shadow-default: @cnvs-base-palette-licorice-600; // Main shadow color
|
|
62
|
+
@cnvs-sys-color-shadow-2: @cnvs-base-palette-licorice-600; // Second shadow color
|
|
63
|
+
@cnvs-sys-color-border-container: @cnvs-base-palette-soap-500; // Cards, Toasts
|
|
64
|
+
@cnvs-sys-color-border-divider: @cnvs-base-palette-soap-400; // Dividers
|
|
65
|
+
@cnvs-sys-color-border-inverse: @cnvs-base-palette-french-vanilla-100; // Inverse
|
|
66
|
+
@cnvs-sys-color-border-caution-strong: @cnvs-base-palette-cantaloupe-600; // Warning outer (box shadow)
|
|
67
|
+
@cnvs-sys-color-border-caution-default: @cnvs-base-palette-cantaloupe-400; // Warning inner
|
|
68
|
+
@cnvs-sys-color-border-critical-default: @cnvs-base-palette-cinnamon-500; // Error
|
|
69
|
+
@cnvs-sys-color-border-primary-default: @cnvs-base-palette-blueberry-400; // Brand, Focus
|
|
70
|
+
@cnvs-sys-color-border-contrast-strong: @cnvs-base-palette-black-pepper-500; // Secondary Button Hover
|
|
71
|
+
@cnvs-sys-color-border-contrast-default: @cnvs-base-palette-black-pepper-400; // Secondary Button
|
|
72
|
+
@cnvs-sys-color-border-input-strong: @cnvs-base-palette-licorice-500; // Input hover
|
|
73
|
+
@cnvs-sys-color-border-input-default: @cnvs-base-palette-licorice-200; // Inputs
|
|
74
|
+
@cnvs-sys-color-border-input-disabled: @cnvs-base-palette-licorice-100; // Disabled inputs
|
|
75
|
+
@cnvs-sys-color-fg-contrast-strong: @cnvs-base-palette-black-pepper-500; // Strong contrast
|
|
76
|
+
@cnvs-sys-color-fg-contrast-default: @cnvs-base-palette-black-pepper-400; // Contrast
|
|
77
|
+
@cnvs-sys-color-fg-caution-strong: @cnvs-base-palette-black-pepper-500; // Warning on hover
|
|
78
|
+
@cnvs-sys-color-fg-caution-default: @cnvs-base-palette-black-pepper-400; // Warning
|
|
79
|
+
@cnvs-sys-color-fg-primary-strong: @cnvs-base-palette-blueberry-500; // Hover interactive foregrounds
|
|
80
|
+
@cnvs-sys-color-fg-primary-default: @cnvs-base-palette-blueberry-400; // Interactive foreground elements
|
|
81
|
+
@cnvs-sys-color-fg-muted-stronger: @cnvs-base-palette-licorice-500;
|
|
82
|
+
@cnvs-sys-color-fg-muted-strong: @cnvs-base-palette-licorice-400;
|
|
83
|
+
@cnvs-sys-color-fg-muted-default: @cnvs-base-palette-licorice-300; // Hint text
|
|
84
|
+
@cnvs-sys-color-fg-critical-default: @cnvs-base-palette-cinnamon-500; // Error
|
|
85
|
+
@cnvs-sys-color-fg-inverse: @cnvs-base-palette-french-vanilla-100; // Inverse
|
|
86
|
+
@cnvs-sys-color-fg-disabled: @cnvs-base-palette-licorice-100; // Disabled
|
|
87
|
+
@cnvs-sys-color-fg-stronger: @cnvs-base-palette-black-pepper-500; // Heading on hover
|
|
88
|
+
@cnvs-sys-color-fg-strong: @cnvs-base-palette-black-pepper-400; // Headings
|
|
89
|
+
@cnvs-sys-color-fg-default: @cnvs-base-palette-black-pepper-300; // Body
|
|
90
|
+
@cnvs-sys-color-icon-caution-strong: @cnvs-base-palette-black-pepper-500; // Strong caution icon color
|
|
91
|
+
@cnvs-sys-color-icon-caution-default: @cnvs-base-palette-black-pepper-400; // Caution icon color
|
|
92
|
+
@cnvs-sys-color-icon-critical-default: @cnvs-base-palette-cinnamon-500; // Error icon color
|
|
93
|
+
@cnvs-sys-color-icon-positive-default: @cnvs-base-palette-green-apple-500; // Success icon color
|
|
94
|
+
@cnvs-sys-color-icon-primary-strong: @cnvs-base-palette-blueberry-500; // Stronger brand icon color
|
|
95
|
+
@cnvs-sys-color-icon-primary-default: @cnvs-base-palette-blueberry-400; // Brand icon color
|
|
96
|
+
@cnvs-sys-color-icon-inverse: @cnvs-base-palette-french-vanilla-100; // Inverse icon color
|
|
97
|
+
@cnvs-sys-color-icon-strong: @cnvs-base-palette-licorice-500; // Hover icon color
|
|
98
|
+
@cnvs-sys-color-icon-soft: @cnvs-base-palette-licorice-100; // Disabled icon color
|
|
99
|
+
@cnvs-sys-color-icon-default: @cnvs-base-palette-licorice-200; // Default icon color
|
|
100
|
+
@cnvs-sys-color-text-primary-strong: @cnvs-base-palette-blueberry-500; // Branded hover text
|
|
101
|
+
@cnvs-sys-color-text-primary-default: @cnvs-base-palette-blueberry-400; // Branded text
|
|
102
|
+
@cnvs-sys-color-text-critical-default: @cnvs-base-palette-cinnamon-500; // Error text
|
|
103
|
+
@cnvs-sys-color-text-inverse: @cnvs-base-palette-french-vanilla-100; // Inverse text color
|
|
104
|
+
@cnvs-sys-color-text-stronger: @cnvs-base-palette-black-pepper-500; // Heading hover text color
|
|
105
|
+
@cnvs-sys-color-text-strong: @cnvs-base-palette-black-pepper-400; // Heading text color
|
|
106
|
+
@cnvs-sys-color-text-hint: @cnvs-base-palette-licorice-300; // Hint text color
|
|
107
|
+
@cnvs-sys-color-text-disabled: @cnvs-base-palette-licorice-100; // Disabled text color
|
|
108
|
+
@cnvs-sys-color-text-default: @cnvs-base-palette-black-pepper-300; // Default text color
|
|
109
|
+
@cnvs-sys-color-bg-critical-strong: @cnvs-base-palette-cinnamon-600; // Strong error background
|
|
110
|
+
@cnvs-sys-color-bg-critical-softer: @cnvs-base-palette-cinnamon-100; // Disabled error background
|
|
111
|
+
@cnvs-sys-color-bg-critical-default: @cnvs-base-palette-cinnamon-500; // Default error background
|
|
112
|
+
@cnvs-sys-color-bg-caution-stronger: @cnvs-base-palette-cantaloupe-600; // Stronger warning background
|
|
113
|
+
@cnvs-sys-color-bg-caution-strong: @cnvs-base-palette-cantaloupe-500; // Strong warning background
|
|
114
|
+
@cnvs-sys-color-bg-caution-softer: @cnvs-base-palette-cantaloupe-100; // Disabled warning background
|
|
115
|
+
@cnvs-sys-color-bg-caution-default: @cnvs-base-palette-cantaloupe-400; // Default warning background
|
|
116
|
+
@cnvs-sys-color-bg-positive-stronger: @cnvs-base-palette-green-apple-600; // Active success background
|
|
117
|
+
@cnvs-sys-color-bg-positive-strong: @cnvs-base-palette-green-apple-500; // Hover success background
|
|
118
|
+
@cnvs-sys-color-bg-positive-soft: @cnvs-base-palette-green-apple-100; // Default success background
|
|
119
|
+
@cnvs-sys-color-bg-positive-default: @cnvs-base-palette-green-apple-400; // Disabled success background
|
|
120
|
+
@cnvs-sys-color-bg-primary-stronger: @cnvs-base-palette-blueberry-600; // Brand active background
|
|
121
|
+
@cnvs-sys-color-bg-primary-strong: @cnvs-base-palette-blueberry-500; // Brand hover background
|
|
122
|
+
@cnvs-sys-color-bg-primary-soft: @cnvs-base-palette-blueberry-200; // Brand selected background
|
|
123
|
+
@cnvs-sys-color-bg-primary-default: @cnvs-base-palette-blueberry-400; // Primary brand color
|
|
124
|
+
@cnvs-sys-color-bg-contrast-strong: @cnvs-base-palette-black-pepper-500; // Contrast backgrounds, like Secondary Buttons
|
|
125
|
+
@cnvs-sys-color-bg-contrast-default: @cnvs-base-palette-black-pepper-400; // Contrast backgrounds, like Secondary Buttons
|
|
126
|
+
@cnvs-sys-color-bg-muted-strong: @cnvs-base-palette-licorice-500;
|
|
127
|
+
@cnvs-sys-color-bg-muted-soft: @cnvs-base-palette-licorice-100;
|
|
128
|
+
@cnvs-sys-color-bg-muted-default: @cnvs-base-palette-licorice-300;
|
|
129
|
+
@cnvs-sys-color-bg-alt-stronger: @cnvs-base-palette-soap-500; // Active states
|
|
130
|
+
@cnvs-sys-color-bg-alt-strong: @cnvs-base-palette-soap-400; // Active states
|
|
131
|
+
@cnvs-sys-color-bg-alt-soft: @cnvs-base-palette-soap-200; // Page background
|
|
132
|
+
@cnvs-sys-color-bg-alt-default: @cnvs-base-palette-soap-300; // Hover states
|
|
133
|
+
@cnvs-sys-color-bg-translucent: rgba(@cnvs-base-palette-black-pepper-600 ,@cnvs-base-opacity-500); // Tooltip, Status Indicator
|
|
134
|
+
@cnvs-sys-color-bg-transparent: rgba(@cnvs-base-palette-french-vanilla-100, 0); // Transparent background
|
|
135
|
+
@cnvs-sys-color-bg-default: @cnvs-base-palette-french-vanilla-100; // Main background color;
|
|
31
136
|
@cnvs-sys-line-height-subtext-large: @cnvs-base-line-height-100;
|
|
32
137
|
@cnvs-sys-font-size-subtext-medium: @cnvs-base-font-size-50;
|
|
33
138
|
@cnvs-sys-depth-6: @cnvs-base-shadow-600; // Modal Dialogs, Side Panels (when opacity overlay behaviour; is applied)
|
|
@@ -36,6 +141,11 @@
|
|
|
36
141
|
@cnvs-sys-depth-3: @cnvs-base-shadow-300; // Floating Action Buttons (FAB), Menus
|
|
37
142
|
@cnvs-sys-depth-2: @cnvs-base-shadow-200; // Top navigation, Bottom Navigation
|
|
38
143
|
@cnvs-sys-depth-1: @cnvs-base-shadow-100; // Standard card depth
|
|
144
|
+
@cnvs-sys-color-shadow-1: @cnvs-sys-color-shadow-default; // First shadow color
|
|
145
|
+
@cnvs-sys-color-border-transparent: rgba(@cnvs-sys-color-static-white, 0%); // Transparent
|
|
146
|
+
@cnvs-sys-color-text-caution-strong: @cnvs-sys-color-text-stronger; // Strong warning text
|
|
147
|
+
@cnvs-sys-color-text-caution-default: @cnvs-sys-color-text-strong; // Warning text
|
|
148
|
+
@cnvs-sys-color-bg-overlay: rgba(0,0,0,@cnvs-base-opacity-400); // Overlay background
|
|
39
149
|
@cnvs-sys-line-height-body-small: @cnvs-base-line-height-150;
|
|
40
150
|
@cnvs-sys-font-size-subtext-large: @cnvs-base-font-size-75;
|
|
41
151
|
@cnvs-sys-line-height-body-large: @cnvs-base-line-height-200;
|
package/package.json
CHANGED
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
3
|
+
// Generated on Thu, 21 Mar 2024 03:34:06 GMT
|
|
4
4
|
|
|
5
5
|
$cnvs-sys-space-zero: 0; // Stacks, rows in tables
|
|
6
6
|
$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.
|
|
7
|
+
$cnvs-sys-opacity-full: 1; // Dev only
|
|
8
|
+
$cnvs-sys-opacity-zero: 0; // Dev only
|
|
9
|
+
$cnvs-sys-breakpoints-zero: 0; // Use to set a media query `min-width` below small.
|
|
10
|
+
$cnvs-sys-color-bg-critical-stronger: rgba(128,22,14,1); // Stronger error background
|
|
7
11
|
$cnvs-sys-font-weight-bold: $cnvs-base-font-weight-700;
|
|
8
12
|
$cnvs-sys-font-weight-medium: $cnvs-base-font-weight-500;
|
|
9
13
|
$cnvs-sys-font-weight-normal: $cnvs-base-font-weight-400;
|
|
@@ -27,7 +31,108 @@ $cnvs-sys-shape-round: calc($cnvs-base-unit * 250); // Commonly used for our sta
|
|
|
27
31
|
$cnvs-sys-shape-x2: calc($cnvs-base-unit * 2); // Use this for all the containers and popups: All Cards, Modals, Tooltips and Toasts.
|
|
28
32
|
$cnvs-sys-shape-x1: $cnvs-base-unit; // Use this for form components presenting text information or inputs: Text Inputs and Text Area, Dropdowns, Menus and Banners.
|
|
29
33
|
$cnvs-sys-shape-half: calc($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.
|
|
30
|
-
$cnvs-sys-opacity-
|
|
34
|
+
$cnvs-sys-opacity-shadow-second: $cnvs-base-opacity-100; // Alpha on second shadow
|
|
35
|
+
$cnvs-sys-opacity-shadow-first: $cnvs-base-opacity-200; // Alpha on first shadow
|
|
36
|
+
$cnvs-sys-opacity-contrast: $cnvs-base-opacity-500; // Tooltips, Status Indicator
|
|
37
|
+
$cnvs-sys-opacity-overlay: $cnvs-base-opacity-400; // Overlay
|
|
38
|
+
$cnvs-sys-opacity-disabled: $cnvs-base-opacity-300; // Disabled states
|
|
39
|
+
$cnvs-sys-breakpoints-xl: calc($cnvs-base-unit * 360); // Used for extra large screens, such as wide monitors and TVs.
|
|
40
|
+
$cnvs-sys-breakpoints-l: calc($cnvs-base-unit * 256); // Large screens, such as desktops.
|
|
41
|
+
$cnvs-sys-breakpoints-m: calc($cnvs-base-unit * 192); // Medium screens, such as laptops.
|
|
42
|
+
$cnvs-sys-breakpoints-s: calc($cnvs-base-unit * 80); // The `min-width` for mobile devices, such as phones and tablets.
|
|
43
|
+
$cnvs-sys-color-static-black: $cnvs-base-palette-black-pepper-600; // Just black
|
|
44
|
+
$cnvs-sys-color-static-white: $cnvs-base-palette-french-vanilla-100; // Just white
|
|
45
|
+
$cnvs-sys-color-static-gray-stronger: $cnvs-base-palette-licorice-500; // Strongerer gray
|
|
46
|
+
$cnvs-sys-color-static-gray-strong: $cnvs-base-palette-licorice-400; // Stronger gray
|
|
47
|
+
$cnvs-sys-color-static-gray-soft: $cnvs-base-palette-soap-300; // Light gray
|
|
48
|
+
$cnvs-sys-color-static-gray-default: $cnvs-base-palette-licorice-300; // Gray
|
|
49
|
+
$cnvs-sys-color-static-orange-strong: $cnvs-base-palette-cantaloupe-600; // Stronger orange
|
|
50
|
+
$cnvs-sys-color-static-orange-soft: $cnvs-base-palette-cantaloupe-100; // Soft orange
|
|
51
|
+
$cnvs-sys-color-static-orange-default: $cnvs-base-palette-cantaloupe-500; // Orange
|
|
52
|
+
$cnvs-sys-color-static-red-strong: $cnvs-base-palette-cinnamon-600; // Strong red
|
|
53
|
+
$cnvs-sys-color-static-red-soft: $cnvs-base-palette-cinnamon-100; // Light red
|
|
54
|
+
$cnvs-sys-color-static-red-default: $cnvs-base-palette-cinnamon-500; // Red
|
|
55
|
+
$cnvs-sys-color-static-green-strong: $cnvs-base-palette-green-apple-600; // Stronger green
|
|
56
|
+
$cnvs-sys-color-static-green-soft: $cnvs-base-palette-green-apple-100; // Light green
|
|
57
|
+
$cnvs-sys-color-static-green-default: $cnvs-base-palette-green-apple-400; // Default green
|
|
58
|
+
$cnvs-sys-color-static-blue-strong: $cnvs-base-palette-blueberry-500; // Stronger blue
|
|
59
|
+
$cnvs-sys-color-static-blue-soft: $cnvs-base-palette-blueberry-100; // Light blue
|
|
60
|
+
$cnvs-sys-color-static-blue-default: $cnvs-base-palette-blueberry-400; // Blue
|
|
61
|
+
$cnvs-sys-color-shadow-default: $cnvs-base-palette-licorice-600; // Main shadow color
|
|
62
|
+
$cnvs-sys-color-shadow-2: $cnvs-base-palette-licorice-600; // Second shadow color
|
|
63
|
+
$cnvs-sys-color-border-container: $cnvs-base-palette-soap-500; // Cards, Toasts
|
|
64
|
+
$cnvs-sys-color-border-divider: $cnvs-base-palette-soap-400; // Dividers
|
|
65
|
+
$cnvs-sys-color-border-inverse: $cnvs-base-palette-french-vanilla-100; // Inverse
|
|
66
|
+
$cnvs-sys-color-border-caution-strong: $cnvs-base-palette-cantaloupe-600; // Warning outer (box shadow)
|
|
67
|
+
$cnvs-sys-color-border-caution-default: $cnvs-base-palette-cantaloupe-400; // Warning inner
|
|
68
|
+
$cnvs-sys-color-border-critical-default: $cnvs-base-palette-cinnamon-500; // Error
|
|
69
|
+
$cnvs-sys-color-border-primary-default: $cnvs-base-palette-blueberry-400; // Brand, Focus
|
|
70
|
+
$cnvs-sys-color-border-contrast-strong: $cnvs-base-palette-black-pepper-500; // Secondary Button Hover
|
|
71
|
+
$cnvs-sys-color-border-contrast-default: $cnvs-base-palette-black-pepper-400; // Secondary Button
|
|
72
|
+
$cnvs-sys-color-border-input-strong: $cnvs-base-palette-licorice-500; // Input hover
|
|
73
|
+
$cnvs-sys-color-border-input-default: $cnvs-base-palette-licorice-200; // Inputs
|
|
74
|
+
$cnvs-sys-color-border-input-disabled: $cnvs-base-palette-licorice-100; // Disabled inputs
|
|
75
|
+
$cnvs-sys-color-fg-contrast-strong: $cnvs-base-palette-black-pepper-500; // Strong contrast
|
|
76
|
+
$cnvs-sys-color-fg-contrast-default: $cnvs-base-palette-black-pepper-400; // Contrast
|
|
77
|
+
$cnvs-sys-color-fg-caution-strong: $cnvs-base-palette-black-pepper-500; // Warning on hover
|
|
78
|
+
$cnvs-sys-color-fg-caution-default: $cnvs-base-palette-black-pepper-400; // Warning
|
|
79
|
+
$cnvs-sys-color-fg-primary-strong: $cnvs-base-palette-blueberry-500; // Hover interactive foregrounds
|
|
80
|
+
$cnvs-sys-color-fg-primary-default: $cnvs-base-palette-blueberry-400; // Interactive foreground elements
|
|
81
|
+
$cnvs-sys-color-fg-muted-stronger: $cnvs-base-palette-licorice-500;
|
|
82
|
+
$cnvs-sys-color-fg-muted-strong: $cnvs-base-palette-licorice-400;
|
|
83
|
+
$cnvs-sys-color-fg-muted-default: $cnvs-base-palette-licorice-300; // Hint text
|
|
84
|
+
$cnvs-sys-color-fg-critical-default: $cnvs-base-palette-cinnamon-500; // Error
|
|
85
|
+
$cnvs-sys-color-fg-inverse: $cnvs-base-palette-french-vanilla-100; // Inverse
|
|
86
|
+
$cnvs-sys-color-fg-disabled: $cnvs-base-palette-licorice-100; // Disabled
|
|
87
|
+
$cnvs-sys-color-fg-stronger: $cnvs-base-palette-black-pepper-500; // Heading on hover
|
|
88
|
+
$cnvs-sys-color-fg-strong: $cnvs-base-palette-black-pepper-400; // Headings
|
|
89
|
+
$cnvs-sys-color-fg-default: $cnvs-base-palette-black-pepper-300; // Body
|
|
90
|
+
$cnvs-sys-color-icon-caution-strong: $cnvs-base-palette-black-pepper-500; // Strong caution icon color
|
|
91
|
+
$cnvs-sys-color-icon-caution-default: $cnvs-base-palette-black-pepper-400; // Caution icon color
|
|
92
|
+
$cnvs-sys-color-icon-critical-default: $cnvs-base-palette-cinnamon-500; // Error icon color
|
|
93
|
+
$cnvs-sys-color-icon-positive-default: $cnvs-base-palette-green-apple-500; // Success icon color
|
|
94
|
+
$cnvs-sys-color-icon-primary-strong: $cnvs-base-palette-blueberry-500; // Stronger brand icon color
|
|
95
|
+
$cnvs-sys-color-icon-primary-default: $cnvs-base-palette-blueberry-400; // Brand icon color
|
|
96
|
+
$cnvs-sys-color-icon-inverse: $cnvs-base-palette-french-vanilla-100; // Inverse icon color
|
|
97
|
+
$cnvs-sys-color-icon-strong: $cnvs-base-palette-licorice-500; // Hover icon color
|
|
98
|
+
$cnvs-sys-color-icon-soft: $cnvs-base-palette-licorice-100; // Disabled icon color
|
|
99
|
+
$cnvs-sys-color-icon-default: $cnvs-base-palette-licorice-200; // Default icon color
|
|
100
|
+
$cnvs-sys-color-text-primary-strong: $cnvs-base-palette-blueberry-500; // Branded hover text
|
|
101
|
+
$cnvs-sys-color-text-primary-default: $cnvs-base-palette-blueberry-400; // Branded text
|
|
102
|
+
$cnvs-sys-color-text-critical-default: $cnvs-base-palette-cinnamon-500; // Error text
|
|
103
|
+
$cnvs-sys-color-text-inverse: $cnvs-base-palette-french-vanilla-100; // Inverse text color
|
|
104
|
+
$cnvs-sys-color-text-stronger: $cnvs-base-palette-black-pepper-500; // Heading hover text color
|
|
105
|
+
$cnvs-sys-color-text-strong: $cnvs-base-palette-black-pepper-400; // Heading text color
|
|
106
|
+
$cnvs-sys-color-text-hint: $cnvs-base-palette-licorice-300; // Hint text color
|
|
107
|
+
$cnvs-sys-color-text-disabled: $cnvs-base-palette-licorice-100; // Disabled text color
|
|
108
|
+
$cnvs-sys-color-text-default: $cnvs-base-palette-black-pepper-300; // Default text color
|
|
109
|
+
$cnvs-sys-color-bg-critical-strong: $cnvs-base-palette-cinnamon-600; // Strong error background
|
|
110
|
+
$cnvs-sys-color-bg-critical-softer: $cnvs-base-palette-cinnamon-100; // Disabled error background
|
|
111
|
+
$cnvs-sys-color-bg-critical-default: $cnvs-base-palette-cinnamon-500; // Default error background
|
|
112
|
+
$cnvs-sys-color-bg-caution-stronger: $cnvs-base-palette-cantaloupe-600; // Stronger warning background
|
|
113
|
+
$cnvs-sys-color-bg-caution-strong: $cnvs-base-palette-cantaloupe-500; // Strong warning background
|
|
114
|
+
$cnvs-sys-color-bg-caution-softer: $cnvs-base-palette-cantaloupe-100; // Disabled warning background
|
|
115
|
+
$cnvs-sys-color-bg-caution-default: $cnvs-base-palette-cantaloupe-400; // Default warning background
|
|
116
|
+
$cnvs-sys-color-bg-positive-stronger: $cnvs-base-palette-green-apple-600; // Active success background
|
|
117
|
+
$cnvs-sys-color-bg-positive-strong: $cnvs-base-palette-green-apple-500; // Hover success background
|
|
118
|
+
$cnvs-sys-color-bg-positive-soft: $cnvs-base-palette-green-apple-100; // Default success background
|
|
119
|
+
$cnvs-sys-color-bg-positive-default: $cnvs-base-palette-green-apple-400; // Disabled success background
|
|
120
|
+
$cnvs-sys-color-bg-primary-stronger: $cnvs-base-palette-blueberry-600; // Brand active background
|
|
121
|
+
$cnvs-sys-color-bg-primary-strong: $cnvs-base-palette-blueberry-500; // Brand hover background
|
|
122
|
+
$cnvs-sys-color-bg-primary-soft: $cnvs-base-palette-blueberry-200; // Brand selected background
|
|
123
|
+
$cnvs-sys-color-bg-primary-default: $cnvs-base-palette-blueberry-400; // Primary brand color
|
|
124
|
+
$cnvs-sys-color-bg-contrast-strong: $cnvs-base-palette-black-pepper-500; // Contrast backgrounds, like Secondary Buttons
|
|
125
|
+
$cnvs-sys-color-bg-contrast-default: $cnvs-base-palette-black-pepper-400; // Contrast backgrounds, like Secondary Buttons
|
|
126
|
+
$cnvs-sys-color-bg-muted-strong: $cnvs-base-palette-licorice-500;
|
|
127
|
+
$cnvs-sys-color-bg-muted-soft: $cnvs-base-palette-licorice-100;
|
|
128
|
+
$cnvs-sys-color-bg-muted-default: $cnvs-base-palette-licorice-300;
|
|
129
|
+
$cnvs-sys-color-bg-alt-stronger: $cnvs-base-palette-soap-500; // Active states
|
|
130
|
+
$cnvs-sys-color-bg-alt-strong: $cnvs-base-palette-soap-400; // Active states
|
|
131
|
+
$cnvs-sys-color-bg-alt-soft: $cnvs-base-palette-soap-200; // Page background
|
|
132
|
+
$cnvs-sys-color-bg-alt-default: $cnvs-base-palette-soap-300; // Hover states
|
|
133
|
+
$cnvs-sys-color-bg-translucent: rgba($cnvs-base-palette-black-pepper-600 ,$cnvs-base-opacity-500); // Tooltip, Status Indicator
|
|
134
|
+
$cnvs-sys-color-bg-transparent: rgba($cnvs-base-palette-french-vanilla-100, 0); // Transparent background
|
|
135
|
+
$cnvs-sys-color-bg-default: $cnvs-base-palette-french-vanilla-100; // Main background color;
|
|
31
136
|
$cnvs-sys-line-height-subtext-large: $cnvs-base-line-height-100;
|
|
32
137
|
$cnvs-sys-font-size-subtext-medium: $cnvs-base-font-size-50;
|
|
33
138
|
$cnvs-sys-depth-6: $cnvs-base-shadow-600; // Modal Dialogs, Side Panels (when opacity overlay behaviour; is applied)
|
|
@@ -36,6 +141,11 @@ $cnvs-sys-depth-4: $cnvs-base-shadow-400; // Bottom Sheets
|
|
|
36
141
|
$cnvs-sys-depth-3: $cnvs-base-shadow-300; // Floating Action Buttons (FAB), Menus
|
|
37
142
|
$cnvs-sys-depth-2: $cnvs-base-shadow-200; // Top navigation, Bottom Navigation
|
|
38
143
|
$cnvs-sys-depth-1: $cnvs-base-shadow-100; // Standard card depth
|
|
144
|
+
$cnvs-sys-color-shadow-1: $cnvs-sys-color-shadow-default; // First shadow color
|
|
145
|
+
$cnvs-sys-color-border-transparent: rgba($cnvs-sys-color-static-white, 0%); // Transparent
|
|
146
|
+
$cnvs-sys-color-text-caution-strong: $cnvs-sys-color-text-stronger; // Strong warning text
|
|
147
|
+
$cnvs-sys-color-text-caution-default: $cnvs-sys-color-text-strong; // Warning text
|
|
148
|
+
$cnvs-sys-color-bg-overlay: rgba(0,0,0,$cnvs-base-opacity-400); // Overlay background
|
|
39
149
|
$cnvs-sys-line-height-body-small: $cnvs-base-line-height-150;
|
|
40
150
|
$cnvs-sys-font-size-subtext-large: $cnvs-base-font-size-75;
|
|
41
151
|
$cnvs-sys-line-height-body-large: $cnvs-base-line-height-200;
|