@workday/canvas-tokens-web 1.1.1 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/css/base/_variables.css +1 -1
  2. package/css/brand/_variables.css +1 -1
  3. package/css/system/_variables.css +118 -2
  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 +757 -2
  11. package/dist/common-js/system/index.js +198 -2
  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 +757 -2
  19. package/dist/es6/system/index.js +198 -2
  20. package/less/base/_variables.less +1 -1
  21. package/less/brand/_variables.less +1 -1
  22. package/less/system/_variables.less +118 -2
  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 -1
  27. package/scss/brand/_variables.scss +1 -1
  28. package/scss/system/_variables.sass +118 -2
  29. package/scss/system/_variables.scss +118 -2
package/scss/system/_variables.scss CHANGED
@@ -1,9 +1,13 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 11 Mar 2024 16:43:19 GMT
3
+ // Generated on Mon, 01 Apr 2024 22:01:39 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,114 @@ $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-disabled: $cnvs-base-opacity-300; // State layer added on top of disabled elements.
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-gold-stronger: $cnvs-base-palette-toasted-marshmallow-600; // Foregrounds in low emphasis status indicators
59
+ $cnvs-sys-color-static-blue-strong: $cnvs-base-palette-blueberry-500; // Stronger blue
60
+ $cnvs-sys-color-static-blue-soft: $cnvs-base-palette-blueberry-100; // Light blue
61
+ $cnvs-sys-color-static-blue-default: $cnvs-base-palette-blueberry-400; // Blue
62
+ $cnvs-sys-color-shadow-default: $cnvs-base-palette-licorice-600; // Main shadow color
63
+ $cnvs-sys-color-shadow-2: $cnvs-base-palette-licorice-600; // Second shadow color
64
+ $cnvs-sys-color-border-container: $cnvs-base-palette-soap-500; // Cards, Toasts
65
+ $cnvs-sys-color-border-divider: $cnvs-base-palette-soap-400; // Dividers
66
+ $cnvs-sys-color-border-inverse: $cnvs-base-palette-french-vanilla-100; // Inverse
67
+ $cnvs-sys-color-border-caution-strong: $cnvs-base-palette-cantaloupe-600; // Warning outer (box shadow)
68
+ $cnvs-sys-color-border-caution-default: $cnvs-base-palette-cantaloupe-400; // Warning inner
69
+ $cnvs-sys-color-border-critical-default: $cnvs-base-palette-cinnamon-500; // Error
70
+ $cnvs-sys-color-border-primary-default: $cnvs-base-palette-blueberry-400; // Brand, Focus
71
+ $cnvs-sys-color-border-contrast-strong: $cnvs-base-palette-black-pepper-500; // Secondary Button Hover
72
+ $cnvs-sys-color-border-contrast-default: $cnvs-base-palette-black-pepper-400; // Secondary Button
73
+ $cnvs-sys-color-border-input-inverse: $cnvs-base-palette-soap-300; // Borders on checkboxes and radios
74
+ $cnvs-sys-color-border-input-strong: $cnvs-base-palette-licorice-500; // Input hover
75
+ $cnvs-sys-color-border-input-default: $cnvs-base-palette-licorice-200; // Inputs
76
+ $cnvs-sys-color-border-input-disabled: $cnvs-base-palette-licorice-100; // Disabled inputs
77
+ $cnvs-sys-color-fg-contrast-strong: $cnvs-base-palette-black-pepper-500; // Strong contrast
78
+ $cnvs-sys-color-fg-contrast-default: $cnvs-base-palette-black-pepper-400; // Contrast
79
+ $cnvs-sys-color-fg-caution-strong: $cnvs-base-palette-black-pepper-500; // Warning on hover
80
+ $cnvs-sys-color-fg-caution-default: $cnvs-base-palette-black-pepper-400; // Warning
81
+ $cnvs-sys-color-fg-primary-strong: $cnvs-base-palette-blueberry-500; // Hover interactive foregrounds
82
+ $cnvs-sys-color-fg-primary-default: $cnvs-base-palette-blueberry-400; // Interactive foreground elements
83
+ $cnvs-sys-color-fg-muted-stronger: $cnvs-base-palette-licorice-500;
84
+ $cnvs-sys-color-fg-muted-strong: $cnvs-base-palette-licorice-400;
85
+ $cnvs-sys-color-fg-muted-default: $cnvs-base-palette-licorice-300; // Hint text
86
+ $cnvs-sys-color-fg-muted-soft: $cnvs-base-palette-licorice-200; // Tab item text
87
+ $cnvs-sys-color-fg-critical-default: $cnvs-base-palette-cinnamon-500; // Error
88
+ $cnvs-sys-color-fg-inverse: $cnvs-base-palette-french-vanilla-100; // Inverse
89
+ $cnvs-sys-color-fg-disabled: $cnvs-base-palette-licorice-100; // Disabled
90
+ $cnvs-sys-color-fg-stronger: $cnvs-base-palette-black-pepper-500; // Heading on hover
91
+ $cnvs-sys-color-fg-strong: $cnvs-base-palette-black-pepper-400; // Headings
92
+ $cnvs-sys-color-fg-default: $cnvs-base-palette-black-pepper-300; // Body
93
+ $cnvs-sys-color-icon-caution-strong: $cnvs-base-palette-black-pepper-500; // Strong caution icon color
94
+ $cnvs-sys-color-icon-caution-default: $cnvs-base-palette-black-pepper-400; // Caution icon color
95
+ $cnvs-sys-color-icon-critical-default: $cnvs-base-palette-cinnamon-500; // Error icon color
96
+ $cnvs-sys-color-icon-positive-default: $cnvs-base-palette-green-apple-500; // Success icon color
97
+ $cnvs-sys-color-icon-primary-strong: $cnvs-base-palette-blueberry-500; // Stronger brand icon color
98
+ $cnvs-sys-color-icon-primary-default: $cnvs-base-palette-blueberry-400; // Brand icon color
99
+ $cnvs-sys-color-icon-inverse: $cnvs-base-palette-french-vanilla-100; // Inverse icon color
100
+ $cnvs-sys-color-icon-strong: $cnvs-base-palette-licorice-500; // Hover icon color
101
+ $cnvs-sys-color-icon-soft: $cnvs-base-palette-licorice-100; // Disabled icon color
102
+ $cnvs-sys-color-icon-default: $cnvs-base-palette-licorice-200; // Default icon color
103
+ $cnvs-sys-color-text-primary-stronger: $cnvs-base-palette-blueberry-600; // Active links
104
+ $cnvs-sys-color-text-primary-strong: $cnvs-base-palette-blueberry-500; // Branded hover text
105
+ $cnvs-sys-color-text-primary-default: $cnvs-base-palette-blueberry-400; // Branded text
106
+ $cnvs-sys-color-text-critical-default: $cnvs-base-palette-cinnamon-500; // Error text
107
+ $cnvs-sys-color-text-inverse: $cnvs-base-palette-french-vanilla-100; // Inverse text color
108
+ $cnvs-sys-color-text-stronger: $cnvs-base-palette-black-pepper-500; // Heading hover text color
109
+ $cnvs-sys-color-text-strong: $cnvs-base-palette-black-pepper-400; // Heading text color
110
+ $cnvs-sys-color-text-hint: $cnvs-base-palette-licorice-300; // Hint text color
111
+ $cnvs-sys-color-text-disabled: $cnvs-base-palette-licorice-100; // Disabled text color
112
+ $cnvs-sys-color-text-default: $cnvs-base-palette-black-pepper-300; // Default text color
113
+ $cnvs-sys-color-bg-critical-strong: $cnvs-base-palette-cinnamon-600; // Strong error background
114
+ $cnvs-sys-color-bg-critical-softer: $cnvs-base-palette-cinnamon-100; // Disabled error background
115
+ $cnvs-sys-color-bg-critical-default: $cnvs-base-palette-cinnamon-500; // Default error background
116
+ $cnvs-sys-color-bg-caution-stronger: $cnvs-base-palette-cantaloupe-600; // Stronger warning background
117
+ $cnvs-sys-color-bg-caution-strong: $cnvs-base-palette-cantaloupe-500; // Strong warning background
118
+ $cnvs-sys-color-bg-caution-softer: $cnvs-base-palette-cantaloupe-100; // Disabled warning background
119
+ $cnvs-sys-color-bg-caution-default: $cnvs-base-palette-cantaloupe-400; // Default warning background
120
+ $cnvs-sys-color-bg-positive-stronger: $cnvs-base-palette-green-apple-600; // Active success background
121
+ $cnvs-sys-color-bg-positive-strong: $cnvs-base-palette-green-apple-500; // Hover success background
122
+ $cnvs-sys-color-bg-positive-soft: $cnvs-base-palette-green-apple-100; // Default success background
123
+ $cnvs-sys-color-bg-positive-default: $cnvs-base-palette-green-apple-400; // Disabled success background
124
+ $cnvs-sys-color-bg-primary-stronger: $cnvs-base-palette-blueberry-600; // Brand active background
125
+ $cnvs-sys-color-bg-primary-strong: $cnvs-base-palette-blueberry-500; // Brand hover background
126
+ $cnvs-sys-color-bg-primary-soft: $cnvs-base-palette-blueberry-200; // Brand selected background
127
+ $cnvs-sys-color-bg-primary-default: $cnvs-base-palette-blueberry-400; // Primary brand color
128
+ $cnvs-sys-color-bg-contrast-strong: $cnvs-base-palette-black-pepper-500; // Contrast backgrounds, like Secondary Buttons
129
+ $cnvs-sys-color-bg-contrast-default: $cnvs-base-palette-black-pepper-400; // Contrast backgrounds, like Secondary Buttons
130
+ $cnvs-sys-color-bg-muted-strong: $cnvs-base-palette-licorice-500;
131
+ $cnvs-sys-color-bg-muted-default: $cnvs-base-palette-licorice-300;
132
+ $cnvs-sys-color-bg-muted-soft: $cnvs-base-palette-licorice-200;
133
+ $cnvs-sys-color-bg-muted-softer: $cnvs-base-palette-licorice-100;
134
+ $cnvs-sys-color-bg-alt-stronger: $cnvs-base-palette-soap-500; // Active states
135
+ $cnvs-sys-color-bg-alt-strong: $cnvs-base-palette-soap-400; // Active states
136
+ $cnvs-sys-color-bg-alt-softer: $cnvs-base-palette-soap-100; // Disabled inputs and column headers
137
+ $cnvs-sys-color-bg-alt-soft: $cnvs-base-palette-soap-200; // Page background
138
+ $cnvs-sys-color-bg-alt-default: $cnvs-base-palette-soap-300; // Hover states
139
+ $cnvs-sys-color-bg-translucent: rgba($cnvs-base-palette-black-pepper-600 ,$cnvs-base-opacity-500); // Tooltip, Status Indicator
140
+ $cnvs-sys-color-bg-transparent: rgba($cnvs-base-palette-french-vanilla-100, 0); // Transparent background
141
+ $cnvs-sys-color-bg-default: $cnvs-base-palette-french-vanilla-100; // Main background color;
31
142
  $cnvs-sys-line-height-subtext-large: $cnvs-base-line-height-100;
32
143
  $cnvs-sys-font-size-subtext-medium: $cnvs-base-font-size-50;
33
144
  $cnvs-sys-depth-6: $cnvs-base-shadow-600; // Modal Dialogs, Side Panels (when opacity overlay behaviour; is applied)
@@ -36,6 +147,11 @@ $cnvs-sys-depth-4: $cnvs-base-shadow-400; // Bottom Sheets
36
147
  $cnvs-sys-depth-3: $cnvs-base-shadow-300; // Floating Action Buttons (FAB), Menus
37
148
  $cnvs-sys-depth-2: $cnvs-base-shadow-200; // Top navigation, Bottom Navigation
38
149
  $cnvs-sys-depth-1: $cnvs-base-shadow-100; // Standard card depth
150
+ $cnvs-sys-color-shadow-1: $cnvs-sys-color-shadow-default; // First shadow color
151
+ $cnvs-sys-color-border-transparent: rgba($cnvs-sys-color-static-white, 0%); // Transparent
152
+ $cnvs-sys-color-text-caution-strong: $cnvs-sys-color-text-stronger; // Strong warning text
153
+ $cnvs-sys-color-text-caution-default: $cnvs-sys-color-text-strong; // Warning text
154
+ $cnvs-sys-color-bg-overlay: rgba(0,0,0,$cnvs-base-opacity-400); // Overlay background
39
155
  $cnvs-sys-line-height-body-small: $cnvs-base-line-height-150;
40
156
  $cnvs-sys-font-size-subtext-large: $cnvs-base-font-size-75;
41
157
  $cnvs-sys-line-height-body-large: $cnvs-base-line-height-200;