@workday/canvas-tokens-web 2.1.0 → 2.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/css/base/_variables.css +1 -1
  2. package/css/brand/_variables.css +1 -7
  3. package/css/system/_variables.css +45 -45
  4. package/dist/common-js/base/index.d.ts +1 -1
  5. package/dist/common-js/base/index.js +1 -1
  6. package/dist/common-js/brand/index.d.ts +1 -1
  7. package/dist/common-js/brand/index.js +1 -1
  8. package/dist/common-js/index.d.ts +1 -1
  9. package/dist/common-js/index.js +1 -1
  10. package/dist/common-js/system/index.d.ts +1165 -1165
  11. package/dist/common-js/system/index.js +182 -182
  12. package/dist/es6/base/index.d.ts +1 -1
  13. package/dist/es6/base/index.js +1 -1
  14. package/dist/es6/brand/index.d.ts +1 -1
  15. package/dist/es6/brand/index.js +1 -1
  16. package/dist/es6/index.d.ts +1 -1
  17. package/dist/es6/index.js +1 -1
  18. package/dist/es6/system/index.d.ts +1165 -1165
  19. package/dist/es6/system/index.js +182 -182
  20. package/less/base/_variables.less +1 -1
  21. package/less/brand/_variables.less +1 -7
  22. package/less/system/_variables.less +45 -45
  23. package/package.json +1 -1
  24. package/scss/base/_variables.sass +1 -1
  25. package/scss/base/_variables.scss +1 -1
  26. package/scss/brand/_variables.sass +1 -7
  27. package/scss/brand/_variables.scss +1 -7
  28. package/scss/system/_variables.sass +45 -45
  29. package/scss/system/_variables.scss +45 -45
package/scss/system/_variables.sass CHANGED
@@ -1,55 +1,13 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 18 Dec 2024 18:24:06 GMT
3
+ // Generated on Thu, 06 Feb 2025 15:20:12 GMT
4
4
 
5
+ $cnvs-sys-color-bg-critical-stronger: rgba(128,22,14,1); // Stronger error background
5
6
  $cnvs-sys-space-zero: 0; // Stacks, rows in tables
6
7
  $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
8
  $cnvs-sys-opacity-full: 1; // Dev only
8
9
  $cnvs-sys-opacity-zero: 0; // Dev only
9
10
  $cnvs-sys-breakpoints-zero: 0px; // 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
11
- $cnvs-sys-font-weight-bold: $cnvs-base-font-weight-700;
12
- $cnvs-sys-font-weight-medium: $cnvs-base-font-weight-500;
13
- $cnvs-sys-font-weight-normal: $cnvs-base-font-weight-400;
14
- $cnvs-sys-font-weight-light: $cnvs-base-font-weight-300;
15
- $cnvs-sys-line-height-title-large: $cnvs-base-line-height-600;
16
- $cnvs-sys-line-height-title-medium: $cnvs-base-line-height-500;
17
- $cnvs-sys-line-height-title-small: $cnvs-base-line-height-400;
18
- $cnvs-sys-line-height-heading-large: $cnvs-base-line-height-350;
19
- $cnvs-sys-line-height-heading-medium: $cnvs-base-line-height-300;
20
- $cnvs-sys-line-height-heading-small: $cnvs-base-line-height-250;
21
- $cnvs-sys-line-height-body-large: $cnvs-base-line-height-200;
22
- $cnvs-sys-line-height-body-medium: $cnvs-base-line-height-200;
23
- $cnvs-sys-line-height-body-small: $cnvs-base-line-height-150;
24
- $cnvs-sys-line-height-subtext-large: $cnvs-base-line-height-100;
25
- $cnvs-sys-line-height-subtext-medium: $cnvs-base-line-height-50;
26
- $cnvs-sys-line-height-subtext-small: $cnvs-base-line-height-50;
27
- $cnvs-sys-font-size-subtext-small: $cnvs-base-font-size-25;
28
- $cnvs-sys-font-family-global: $cnvs-base-font-family-200;
29
- $cnvs-sys-font-family-mono: $cnvs-base-font-family-100;
30
- $cnvs-sys-font-family-default: $cnvs-base-font-family-50;
31
- $cnvs-sys-space-x20: calc($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
32
- $cnvs-sys-space-x16: calc($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
33
- $cnvs-sys-space-x10: calc($cnvs-base-unit * 10); // • Used for outer margins on the overall page content ; • Used for inner margins on large items such as page sections
34
- $cnvs-sys-space-x8: calc($cnvs-base-unit * 8); // • Standard spacing between cards; • Used to separate groups of content ; • Separate section headings or titles from body text or inputs
35
- $cnvs-sys-space-x6: calc($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
36
- $cnvs-sys-space-x4: calc($cnvs-base-unit * 4); // Default space token. Used to group Inputs with related data
37
- $cnvs-sys-space-x3: calc($cnvs-base-unit * 3); // Use when compact padding is required
38
- $cnvs-sys-space-x2: calc($cnvs-base-unit * 2); // Commonly used to group compact elements like icon buttons
39
- $cnvs-sys-space-x1: $cnvs-base-unit; // Compact spacing between text or icons
40
- $cnvs-sys-shape-round: calc($cnvs-base-unit * 250); // Commonly used for our standard buttons and profile avatars: All Primary, Secondary Buttons, Radio Buttons and Notification Badges.
41
- $cnvs-sys-shape-x2: calc($cnvs-base-unit * 2); // Use this for all the containers and popups: All Cards, Modals, Tooltips and Toasts.
42
- $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.
43
- $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.
44
- $cnvs-sys-opacity-shadow-second: $cnvs-base-opacity-100; // Alpha on second shadow
45
- $cnvs-sys-opacity-shadow-first: $cnvs-base-opacity-200; // Alpha on first shadow
46
- $cnvs-sys-opacity-contrast: $cnvs-base-opacity-500; // Tooltips, Status Indicator
47
- $cnvs-sys-opacity-overlay: $cnvs-base-opacity-400; // Overlay
48
- $cnvs-sys-opacity-disabled: $cnvs-base-opacity-300; // Disabled states
49
- $cnvs-sys-breakpoints-xl: 1440px; // Used for extra large screens, such as wide monitors and TVs.
50
- $cnvs-sys-breakpoints-l: 1024px; // Large screens, such as desktops.
51
- $cnvs-sys-breakpoints-m: 768px; // Medium screens, such as laptops.
52
- $cnvs-sys-breakpoints-s: 320px; // The `min-width` for mobile devices, such as phones and tablets.
53
11
  $cnvs-sys-color-static-black: $cnvs-base-palette-black-pepper-600; // Just black
54
12
  $cnvs-sys-color-static-white: $cnvs-base-palette-french-vanilla-100; // Just white
55
13
  $cnvs-sys-color-static-gray-stronger: $cnvs-base-palette-licorice-500; // Strongerer gray
@@ -149,12 +107,54 @@ $cnvs-sys-color-bg-alt-default: $cnvs-base-palette-soap-300; // Hover states
149
107
  $cnvs-sys-color-bg-translucent: rgba(0,0,0,$cnvs-base-opacity-500); // Tooltip, Status Indicator
150
108
  $cnvs-sys-color-bg-transparent: transparent; // Transparent background
151
109
  $cnvs-sys-color-bg-default: $cnvs-base-palette-french-vanilla-100; // Main background color;
152
- $cnvs-sys-font-size-subtext-medium: $cnvs-base-font-size-50;
110
+ $cnvs-sys-font-weight-bold: $cnvs-base-font-weight-700;
111
+ $cnvs-sys-font-weight-medium: $cnvs-base-font-weight-500;
112
+ $cnvs-sys-font-weight-normal: $cnvs-base-font-weight-400;
113
+ $cnvs-sys-font-weight-light: $cnvs-base-font-weight-300;
114
+ $cnvs-sys-line-height-title-large: $cnvs-base-line-height-600;
115
+ $cnvs-sys-line-height-title-medium: $cnvs-base-line-height-500;
116
+ $cnvs-sys-line-height-title-small: $cnvs-base-line-height-400;
117
+ $cnvs-sys-line-height-heading-large: $cnvs-base-line-height-350;
118
+ $cnvs-sys-line-height-heading-medium: $cnvs-base-line-height-300;
119
+ $cnvs-sys-line-height-heading-small: $cnvs-base-line-height-250;
120
+ $cnvs-sys-line-height-body-large: $cnvs-base-line-height-200;
121
+ $cnvs-sys-line-height-body-medium: $cnvs-base-line-height-200;
122
+ $cnvs-sys-line-height-body-small: $cnvs-base-line-height-150;
123
+ $cnvs-sys-line-height-subtext-large: $cnvs-base-line-height-100;
124
+ $cnvs-sys-line-height-subtext-medium: $cnvs-base-line-height-50;
125
+ $cnvs-sys-line-height-subtext-small: $cnvs-base-line-height-50;
126
+ $cnvs-sys-font-size-subtext-small: $cnvs-base-font-size-25;
127
+ $cnvs-sys-font-family-global: $cnvs-base-font-family-200;
128
+ $cnvs-sys-font-family-mono: $cnvs-base-font-family-100;
129
+ $cnvs-sys-font-family-default: $cnvs-base-font-family-50;
130
+ $cnvs-sys-space-x20: calc($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
131
+ $cnvs-sys-space-x16: calc($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
132
+ $cnvs-sys-space-x10: calc($cnvs-base-unit * 10); // • Used for outer margins on the overall page content ; • Used for inner margins on large items such as page sections
133
+ $cnvs-sys-space-x8: calc($cnvs-base-unit * 8); // • Standard spacing between cards; • Used to separate groups of content ; • Separate section headings or titles from body text or inputs
134
+ $cnvs-sys-space-x6: calc($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
135
+ $cnvs-sys-space-x4: calc($cnvs-base-unit * 4); // Default space token. Used to group Inputs with related data
136
+ $cnvs-sys-space-x3: calc($cnvs-base-unit * 3); // Use when compact padding is required
137
+ $cnvs-sys-space-x2: calc($cnvs-base-unit * 2); // Commonly used to group compact elements like icon buttons
138
+ $cnvs-sys-space-x1: $cnvs-base-unit; // Compact spacing between text or icons
139
+ $cnvs-sys-shape-round: calc($cnvs-base-unit * 250); // Commonly used for our standard buttons and profile avatars: All Primary, Secondary Buttons, Radio Buttons and Notification Badges.
140
+ $cnvs-sys-shape-x2: calc($cnvs-base-unit * 2); // Use this for all the containers and popups: All Cards, Modals, Tooltips and Toasts.
141
+ $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.
142
+ $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.
143
+ $cnvs-sys-opacity-shadow-second: $cnvs-base-opacity-100; // Alpha on second shadow
144
+ $cnvs-sys-opacity-shadow-first: $cnvs-base-opacity-200; // Alpha on first shadow
145
+ $cnvs-sys-opacity-contrast: $cnvs-base-opacity-500; // Tooltips, Status Indicator
146
+ $cnvs-sys-opacity-overlay: $cnvs-base-opacity-400; // Overlay
147
+ $cnvs-sys-opacity-disabled: $cnvs-base-opacity-300; // Disabled states
148
+ $cnvs-sys-breakpoints-xl: 1440px; // Used for extra large screens, such as wide monitors and TVs.
149
+ $cnvs-sys-breakpoints-l: 1024px; // Large screens, such as desktops.
150
+ $cnvs-sys-breakpoints-m: 768px; // Medium screens, such as laptops.
151
+ $cnvs-sys-breakpoints-s: 320px; // The `min-width` for mobile devices, such as phones and tablets.
153
152
  $cnvs-sys-color-shadow-1: rgba(31,38,46,$cnvs-base-opacity-200); // First shadow color
154
153
  $cnvs-sys-color-border-transparent: transparent; // Transparent
155
154
  $cnvs-sys-color-text-caution-strong: $cnvs-sys-color-text-stronger; // Strong warning text
156
155
  $cnvs-sys-color-text-caution-default: $cnvs-sys-color-text-strong; // Warning text
157
156
  $cnvs-sys-color-bg-overlay: rgba(0,0,0,$cnvs-base-opacity-400); // Overlay background
157
+ $cnvs-sys-font-size-subtext-medium: $cnvs-base-font-size-50;
158
158
  $cnvs-sys-font-size-subtext-large: $cnvs-base-font-size-75;
159
159
  $cnvs-sys-font-size-body-small: $cnvs-base-font-size-100;
160
160
  $cnvs-sys-font-size-body-medium: $cnvs-base-font-size-125;
package/scss/system/_variables.scss CHANGED
@@ -1,55 +1,13 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 18 Dec 2024 18:24:06 GMT
3
+ // Generated on Thu, 06 Feb 2025 15:20:12 GMT
4
4
 
5
+ $cnvs-sys-color-bg-critical-stronger: rgba(128,22,14,1); // Stronger error background
5
6
  $cnvs-sys-space-zero: 0; // Stacks, rows in tables
6
7
  $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
8
  $cnvs-sys-opacity-full: 1; // Dev only
8
9
  $cnvs-sys-opacity-zero: 0; // Dev only
9
10
  $cnvs-sys-breakpoints-zero: 0px; // 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
11
- $cnvs-sys-font-weight-bold: $cnvs-base-font-weight-700;
12
- $cnvs-sys-font-weight-medium: $cnvs-base-font-weight-500;
13
- $cnvs-sys-font-weight-normal: $cnvs-base-font-weight-400;
14
- $cnvs-sys-font-weight-light: $cnvs-base-font-weight-300;
15
- $cnvs-sys-line-height-title-large: $cnvs-base-line-height-600;
16
- $cnvs-sys-line-height-title-medium: $cnvs-base-line-height-500;
17
- $cnvs-sys-line-height-title-small: $cnvs-base-line-height-400;
18
- $cnvs-sys-line-height-heading-large: $cnvs-base-line-height-350;
19
- $cnvs-sys-line-height-heading-medium: $cnvs-base-line-height-300;
20
- $cnvs-sys-line-height-heading-small: $cnvs-base-line-height-250;
21
- $cnvs-sys-line-height-body-large: $cnvs-base-line-height-200;
22
- $cnvs-sys-line-height-body-medium: $cnvs-base-line-height-200;
23
- $cnvs-sys-line-height-body-small: $cnvs-base-line-height-150;
24
- $cnvs-sys-line-height-subtext-large: $cnvs-base-line-height-100;
25
- $cnvs-sys-line-height-subtext-medium: $cnvs-base-line-height-50;
26
- $cnvs-sys-line-height-subtext-small: $cnvs-base-line-height-50;
27
- $cnvs-sys-font-size-subtext-small: $cnvs-base-font-size-25;
28
- $cnvs-sys-font-family-global: $cnvs-base-font-family-200;
29
- $cnvs-sys-font-family-mono: $cnvs-base-font-family-100;
30
- $cnvs-sys-font-family-default: $cnvs-base-font-family-50;
31
- $cnvs-sys-space-x20: calc($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
32
- $cnvs-sys-space-x16: calc($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
33
- $cnvs-sys-space-x10: calc($cnvs-base-unit * 10); // • Used for outer margins on the overall page content ; • Used for inner margins on large items such as page sections
34
- $cnvs-sys-space-x8: calc($cnvs-base-unit * 8); // • Standard spacing between cards; • Used to separate groups of content ; • Separate section headings or titles from body text or inputs
35
- $cnvs-sys-space-x6: calc($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
36
- $cnvs-sys-space-x4: calc($cnvs-base-unit * 4); // Default space token. Used to group Inputs with related data
37
- $cnvs-sys-space-x3: calc($cnvs-base-unit * 3); // Use when compact padding is required
38
- $cnvs-sys-space-x2: calc($cnvs-base-unit * 2); // Commonly used to group compact elements like icon buttons
39
- $cnvs-sys-space-x1: $cnvs-base-unit; // Compact spacing between text or icons
40
- $cnvs-sys-shape-round: calc($cnvs-base-unit * 250); // Commonly used for our standard buttons and profile avatars: All Primary, Secondary Buttons, Radio Buttons and Notification Badges.
41
- $cnvs-sys-shape-x2: calc($cnvs-base-unit * 2); // Use this for all the containers and popups: All Cards, Modals, Tooltips and Toasts.
42
- $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.
43
- $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.
44
- $cnvs-sys-opacity-shadow-second: $cnvs-base-opacity-100; // Alpha on second shadow
45
- $cnvs-sys-opacity-shadow-first: $cnvs-base-opacity-200; // Alpha on first shadow
46
- $cnvs-sys-opacity-contrast: $cnvs-base-opacity-500; // Tooltips, Status Indicator
47
- $cnvs-sys-opacity-overlay: $cnvs-base-opacity-400; // Overlay
48
- $cnvs-sys-opacity-disabled: $cnvs-base-opacity-300; // Disabled states
49
- $cnvs-sys-breakpoints-xl: 1440px; // Used for extra large screens, such as wide monitors and TVs.
50
- $cnvs-sys-breakpoints-l: 1024px; // Large screens, such as desktops.
51
- $cnvs-sys-breakpoints-m: 768px; // Medium screens, such as laptops.
52
- $cnvs-sys-breakpoints-s: 320px; // The `min-width` for mobile devices, such as phones and tablets.
53
11
  $cnvs-sys-color-static-black: $cnvs-base-palette-black-pepper-600; // Just black
54
12
  $cnvs-sys-color-static-white: $cnvs-base-palette-french-vanilla-100; // Just white
55
13
  $cnvs-sys-color-static-gray-stronger: $cnvs-base-palette-licorice-500; // Strongerer gray
@@ -149,12 +107,54 @@ $cnvs-sys-color-bg-alt-default: $cnvs-base-palette-soap-300; // Hover states
149
107
  $cnvs-sys-color-bg-translucent: rgba(0,0,0,$cnvs-base-opacity-500); // Tooltip, Status Indicator
150
108
  $cnvs-sys-color-bg-transparent: transparent; // Transparent background
151
109
  $cnvs-sys-color-bg-default: $cnvs-base-palette-french-vanilla-100; // Main background color;
152
- $cnvs-sys-font-size-subtext-medium: $cnvs-base-font-size-50;
110
+ $cnvs-sys-font-weight-bold: $cnvs-base-font-weight-700;
111
+ $cnvs-sys-font-weight-medium: $cnvs-base-font-weight-500;
112
+ $cnvs-sys-font-weight-normal: $cnvs-base-font-weight-400;
113
+ $cnvs-sys-font-weight-light: $cnvs-base-font-weight-300;
114
+ $cnvs-sys-line-height-title-large: $cnvs-base-line-height-600;
115
+ $cnvs-sys-line-height-title-medium: $cnvs-base-line-height-500;
116
+ $cnvs-sys-line-height-title-small: $cnvs-base-line-height-400;
117
+ $cnvs-sys-line-height-heading-large: $cnvs-base-line-height-350;
118
+ $cnvs-sys-line-height-heading-medium: $cnvs-base-line-height-300;
119
+ $cnvs-sys-line-height-heading-small: $cnvs-base-line-height-250;
120
+ $cnvs-sys-line-height-body-large: $cnvs-base-line-height-200;
121
+ $cnvs-sys-line-height-body-medium: $cnvs-base-line-height-200;
122
+ $cnvs-sys-line-height-body-small: $cnvs-base-line-height-150;
123
+ $cnvs-sys-line-height-subtext-large: $cnvs-base-line-height-100;
124
+ $cnvs-sys-line-height-subtext-medium: $cnvs-base-line-height-50;
125
+ $cnvs-sys-line-height-subtext-small: $cnvs-base-line-height-50;
126
+ $cnvs-sys-font-size-subtext-small: $cnvs-base-font-size-25;
127
+ $cnvs-sys-font-family-global: $cnvs-base-font-family-200;
128
+ $cnvs-sys-font-family-mono: $cnvs-base-font-family-100;
129
+ $cnvs-sys-font-family-default: $cnvs-base-font-family-50;
130
+ $cnvs-sys-space-x20: calc($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
131
+ $cnvs-sys-space-x16: calc($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
132
+ $cnvs-sys-space-x10: calc($cnvs-base-unit * 10); // • Used for outer margins on the overall page content ; • Used for inner margins on large items such as page sections
133
+ $cnvs-sys-space-x8: calc($cnvs-base-unit * 8); // • Standard spacing between cards; • Used to separate groups of content ; • Separate section headings or titles from body text or inputs
134
+ $cnvs-sys-space-x6: calc($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
135
+ $cnvs-sys-space-x4: calc($cnvs-base-unit * 4); // Default space token. Used to group Inputs with related data
136
+ $cnvs-sys-space-x3: calc($cnvs-base-unit * 3); // Use when compact padding is required
137
+ $cnvs-sys-space-x2: calc($cnvs-base-unit * 2); // Commonly used to group compact elements like icon buttons
138
+ $cnvs-sys-space-x1: $cnvs-base-unit; // Compact spacing between text or icons
139
+ $cnvs-sys-shape-round: calc($cnvs-base-unit * 250); // Commonly used for our standard buttons and profile avatars: All Primary, Secondary Buttons, Radio Buttons and Notification Badges.
140
+ $cnvs-sys-shape-x2: calc($cnvs-base-unit * 2); // Use this for all the containers and popups: All Cards, Modals, Tooltips and Toasts.
141
+ $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.
142
+ $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.
143
+ $cnvs-sys-opacity-shadow-second: $cnvs-base-opacity-100; // Alpha on second shadow
144
+ $cnvs-sys-opacity-shadow-first: $cnvs-base-opacity-200; // Alpha on first shadow
145
+ $cnvs-sys-opacity-contrast: $cnvs-base-opacity-500; // Tooltips, Status Indicator
146
+ $cnvs-sys-opacity-overlay: $cnvs-base-opacity-400; // Overlay
147
+ $cnvs-sys-opacity-disabled: $cnvs-base-opacity-300; // Disabled states
148
+ $cnvs-sys-breakpoints-xl: 1440px; // Used for extra large screens, such as wide monitors and TVs.
149
+ $cnvs-sys-breakpoints-l: 1024px; // Large screens, such as desktops.
150
+ $cnvs-sys-breakpoints-m: 768px; // Medium screens, such as laptops.
151
+ $cnvs-sys-breakpoints-s: 320px; // The `min-width` for mobile devices, such as phones and tablets.
153
152
  $cnvs-sys-color-shadow-1: rgba(31,38,46,$cnvs-base-opacity-200); // First shadow color
154
153
  $cnvs-sys-color-border-transparent: transparent; // Transparent
155
154
  $cnvs-sys-color-text-caution-strong: $cnvs-sys-color-text-stronger; // Strong warning text
156
155
  $cnvs-sys-color-text-caution-default: $cnvs-sys-color-text-strong; // Warning text
157
156
  $cnvs-sys-color-bg-overlay: rgba(0,0,0,$cnvs-base-opacity-400); // Overlay background
157
+ $cnvs-sys-font-size-subtext-medium: $cnvs-base-font-size-50;
158
158
  $cnvs-sys-font-size-subtext-large: $cnvs-base-font-size-75;
159
159
  $cnvs-sys-font-size-body-small: $cnvs-base-font-size-100;
160
160
  $cnvs-sys-font-size-body-medium: $cnvs-base-font-size-125;