@workday/canvas-tokens-web 1.3.0 → 1.3.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 +4 -4
  2. package/css/brand/_variables.css +1 -1
  3. package/css/system/_variables.css +17 -17
  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 +47 -47
  11. package/dist/common-js/system/index.js +1 -1
  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 +47 -47
  19. package/dist/es6/system/index.js +1 -1
  20. package/less/base/_variables.less +4 -4
  21. package/less/brand/_variables.less +1 -1
  22. package/less/system/_variables.less +17 -17
  23. package/package.json +1 -1
  24. package/scss/base/_variables.sass +4 -4
  25. package/scss/base/_variables.scss +4 -4
  26. package/scss/brand/_variables.sass +1 -1
  27. package/scss/brand/_variables.scss +1 -1
  28. package/scss/system/_variables.sass +17 -17
  29. package/scss/system/_variables.scss +17 -17
package/css/base/_variables.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 01 Apr 2024 22:01:39 GMT
3
+ * Generated on Thu, 18 Apr 2024 22:39:08 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -196,9 +196,9 @@
196
196
  --cnvs-base-line-height-400: 3rem;
197
197
  --cnvs-base-line-height-500: 3.5rem;
198
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;
199
+ --cnvs-base-line-height-750: 4.5rem;
200
+ --cnvs-base-line-height-900: 5.5rem;
201
+ --cnvs-base-line-height-1050: 6.5rem;
202
202
  --cnvs-base-typescale-size-default: 0.125rem;
203
203
  --cnvs-base-typescale-size-heading: 0.25rem;
204
204
  --cnvs-base-typescale-size-title: 0.5rem;
package/css/brand/_variables.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 01 Apr 2024 22:01:39 GMT
3
+ * Generated on Thu, 18 Apr 2024 22:39:08 GMT
4
4
  */
5
5
 
6
6
  :root {
package/css/system/_variables.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 01 Apr 2024 22:01:39 GMT
3
+ * Generated on Thu, 18 Apr 2024 22:39:08 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -14,6 +14,16 @@
14
14
  --cnvs-sys-font-weight-medium: var(--cnvs-base-font-weight-500);
15
15
  --cnvs-sys-font-weight-normal: var(--cnvs-base-font-weight-400);
16
16
  --cnvs-sys-font-weight-light: var(--cnvs-base-font-weight-300);
17
+ --cnvs-sys-line-height-title-large: var(--cnvs-base-line-height-600);
18
+ --cnvs-sys-line-height-title-medium: var(--cnvs-base-line-height-500);
19
+ --cnvs-sys-line-height-title-small: var(--cnvs-base-line-height-400);
20
+ --cnvs-sys-line-height-heading-large: var(--cnvs-base-line-height-350);
21
+ --cnvs-sys-line-height-heading-medium: var(--cnvs-base-line-height-300);
22
+ --cnvs-sys-line-height-heading-small: var(--cnvs-base-line-height-250);
23
+ --cnvs-sys-line-height-body-large: var(--cnvs-base-line-height-200);
24
+ --cnvs-sys-line-height-body-medium: var(--cnvs-base-line-height-200);
25
+ --cnvs-sys-line-height-body-small: var(--cnvs-base-line-height-150);
26
+ --cnvs-sys-line-height-subtext-large: var(--cnvs-base-line-height-100);
17
27
  --cnvs-sys-line-height-subtext-medium: var(--cnvs-base-line-height-50);
18
28
  --cnvs-sys-line-height-subtext-small: var(--cnvs-base-line-height-50);
19
29
  --cnvs-sys-font-size-subtext-small: var(--cnvs-base-font-size-25);
@@ -50,7 +60,7 @@
50
60
  --cnvs-sys-color-static-gray-default: var(--cnvs-base-palette-licorice-300); /* Gray */
51
61
  --cnvs-sys-color-static-orange-strong: var(--cnvs-base-palette-cantaloupe-600); /* Stronger orange */
52
62
  --cnvs-sys-color-static-orange-soft: var(--cnvs-base-palette-cantaloupe-100); /* Soft orange */
53
- --cnvs-sys-color-static-orange-default: var(--cnvs-base-palette-cantaloupe-500); /* Orange */
63
+ --cnvs-sys-color-static-orange-default: var(--cnvs-base-palette-cantaloupe-400); /* Orange */
54
64
  --cnvs-sys-color-static-red-strong: var(--cnvs-base-palette-cinnamon-600); /* Strong red */
55
65
  --cnvs-sys-color-static-red-soft: var(--cnvs-base-palette-cinnamon-100); /* Light red */
56
66
  --cnvs-sys-color-static-red-default: var(--cnvs-base-palette-cinnamon-500); /* Red */
@@ -62,7 +72,7 @@
62
72
  --cnvs-sys-color-static-blue-soft: var(--cnvs-base-palette-blueberry-100); /* Light blue */
63
73
  --cnvs-sys-color-static-blue-default: var(--cnvs-base-palette-blueberry-400); /* Blue */
64
74
  --cnvs-sys-color-shadow-default: var(--cnvs-base-palette-licorice-600); /* Main shadow color */
65
- --cnvs-sys-color-shadow-2: var(--cnvs-base-palette-licorice-600); /* Second shadow color */
75
+ --cnvs-sys-color-shadow-2: rgba(31,38,46,var(--cnvs-base-opacity-100)); /* Second shadow color */
66
76
  --cnvs-sys-color-border-container: var(--cnvs-base-palette-soap-500); /* Cards, Toasts */
67
77
  --cnvs-sys-color-border-divider: var(--cnvs-base-palette-soap-400); /* Dividers */
68
78
  --cnvs-sys-color-border-inverse: var(--cnvs-base-palette-french-vanilla-100); /* Inverse */
@@ -138,10 +148,9 @@
138
148
  --cnvs-sys-color-bg-alt-softer: var(--cnvs-base-palette-soap-100); /* Disabled inputs and column headers */
139
149
  --cnvs-sys-color-bg-alt-soft: var(--cnvs-base-palette-soap-200); /* Page background */
140
150
  --cnvs-sys-color-bg-alt-default: var(--cnvs-base-palette-soap-300); /* Hover states */
141
- --cnvs-sys-color-bg-translucent: rgba(var(--cnvs-base-palette-black-pepper-600) ,var(--cnvs-base-opacity-500)); /* Tooltip, Status Indicator */
142
- --cnvs-sys-color-bg-transparent: rgba(var(--cnvs-base-palette-french-vanilla-100), 0); /* Transparent background */
151
+ --cnvs-sys-color-bg-translucent: rgba(0,0,0,var(--cnvs-base-opacity-500)); /* Tooltip, Status Indicator */
152
+ --cnvs-sys-color-bg-transparent: transparent; /* Transparent background */
143
153
  --cnvs-sys-color-bg-default: var(--cnvs-base-palette-french-vanilla-100); /* Main background color; */
144
- --cnvs-sys-line-height-subtext-large: var(--cnvs-base-line-height-100);
145
154
  --cnvs-sys-font-size-subtext-medium: var(--cnvs-base-font-size-50);
146
155
  --cnvs-sys-depth-6: var(--cnvs-base-shadow-600); /* Modal Dialogs, Side Panels (when opacity overlay behaviour; is applied) */
147
156
  --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) */
@@ -149,27 +158,18 @@
149
158
  --cnvs-sys-depth-3: var(--cnvs-base-shadow-300); /* Floating Action Buttons (FAB), Menus */
150
159
  --cnvs-sys-depth-2: var(--cnvs-base-shadow-200); /* Top navigation, Bottom Navigation */
151
160
  --cnvs-sys-depth-1: var(--cnvs-base-shadow-100); /* Standard card depth */
152
- --cnvs-sys-color-shadow-1: var(--cnvs-sys-color-shadow-default); /* First shadow color */
153
- --cnvs-sys-color-border-transparent: rgba(var(--cnvs-sys-color-static-white), 0%); /* Transparent */
161
+ --cnvs-sys-color-shadow-1: rgba(31,38,46,var(--cnvs-base-opacity-200)); /* First shadow color */
162
+ --cnvs-sys-color-border-transparent: transparent; /* Transparent */
154
163
  --cnvs-sys-color-text-caution-strong: var(--cnvs-sys-color-text-stronger); /* Strong warning text */
155
164
  --cnvs-sys-color-text-caution-default: var(--cnvs-sys-color-text-strong); /* Warning text */
156
165
  --cnvs-sys-color-bg-overlay: rgba(0,0,0,var(--cnvs-base-opacity-400)); /* Overlay background */
157
- --cnvs-sys-line-height-body-small: var(--cnvs-base-line-height-150);
158
166
  --cnvs-sys-font-size-subtext-large: var(--cnvs-base-font-size-75);
159
- --cnvs-sys-line-height-body-large: var(--cnvs-base-line-height-200);
160
- --cnvs-sys-line-height-body-medium: var(--cnvs-base-line-height-200);
161
167
  --cnvs-sys-font-size-body-small: var(--cnvs-base-font-size-100);
162
- --cnvs-sys-line-height-heading-small: var(--cnvs-base-line-height-250);
163
168
  --cnvs-sys-font-size-body-medium: var(--cnvs-base-font-size-125);
164
- --cnvs-sys-line-height-heading-medium: var(--cnvs-base-line-height-300);
165
169
  --cnvs-sys-font-size-body-large: var(--cnvs-base-font-size-150);
166
- --cnvs-sys-line-height-heading-large: var(--cnvs-base-line-height-350);
167
170
  --cnvs-sys-font-size-heading-small: var(--cnvs-base-font-size-200);
168
- --cnvs-sys-line-height-title-small: var(--cnvs-base-line-height-400);
169
171
  --cnvs-sys-font-size-heading-medium: var(--cnvs-base-font-size-250);
170
- --cnvs-sys-line-height-title-medium: var(--cnvs-base-line-height-500);
171
172
  --cnvs-sys-font-size-heading-large: var(--cnvs-base-font-size-300);
172
- --cnvs-sys-line-height-title-large: var(--cnvs-base-line-height-600);
173
173
  --cnvs-sys-font-size-title-small: var(--cnvs-base-font-size-400);
174
174
  --cnvs-sys-font-size-title-medium: var(--cnvs-base-font-size-500);
175
175
  --cnvs-sys-font-size-title-large: var(--cnvs-base-font-size-600);
package/dist/common-js/base/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 01 Apr 2024 22:01:39 GMT
3
+ * Generated on Thu, 18 Apr 2024 22:39:08 GMT
4
4
  */
5
5
 
6
6
  export declare const cinnamon100 = "--cnvs-base-palette-cinnamon-100" as const;
package/dist/common-js/base/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 01 Apr 2024 22:01:39 GMT
3
+ * Generated on Thu, 18 Apr 2024 22:39:08 GMT
4
4
  */
5
5
 
6
6
  "use strict";
package/dist/common-js/brand/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 01 Apr 2024 22:01:39 GMT
3
+ * Generated on Thu, 18 Apr 2024 22:39:08 GMT
4
4
  */
5
5
 
6
6
  export declare const primary = {
package/dist/common-js/brand/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 01 Apr 2024 22:01:39 GMT
3
+ * Generated on Thu, 18 Apr 2024 22:39:08 GMT
4
4
  */
5
5
 
6
6
  "use strict";
package/dist/common-js/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 01 Apr 2024 22:01:39 GMT
3
+ * Generated on Thu, 18 Apr 2024 22:39:08 GMT
4
4
  */
5
5
 
6
6
  import * as base from "./base";
package/dist/common-js/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 01 Apr 2024 22:01:39 GMT
3
+ * Generated on Thu, 18 Apr 2024 22:39:08 GMT
4
4
  */
5
5
 
6
6
  "use strict";
package/dist/common-js/system/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 01 Apr 2024 22:01:39 GMT
3
+ * Generated on Thu, 18 Apr 2024 22:39:08 GMT
4
4
  */
5
5
 
6
6
  export declare const color = {
@@ -13,7 +13,7 @@ export declare const color = {
13
13
  */
14
14
  "default": "--cnvs-sys-color-bg-default",
15
15
  /**
16
- * rgba(#ffffff, 0)
16
+ * rgba(#ffffff,0)
17
17
  *
18
18
  * Transparent background
19
19
  */
@@ -25,7 +25,7 @@ export declare const color = {
25
25
  */
26
26
  "overlay": "--cnvs-sys-color-bg-overlay",
27
27
  /**
28
- * rgba(#000000 ,0.84)
28
+ * rgba(#000000,0.84)
29
29
  *
30
30
  * Tooltip, Status Indicator
31
31
  */
@@ -513,7 +513,7 @@ export declare const color = {
513
513
  "strong": "--cnvs-sys-color-border-caution-strong",
514
514
  },
515
515
  /**
516
- * rgba(#ffffff, 0%)
516
+ * rgba(#ffffff,0%)
517
517
  *
518
518
  * Transparent
519
519
  */
@@ -539,13 +539,13 @@ export declare const color = {
539
539
  },
540
540
  "shadow": {
541
541
  /**
542
- * #1f262e
542
+ * rgba(#1f262e,0.12)
543
543
  *
544
544
  * First shadow color
545
545
  */
546
546
  "1": "--cnvs-sys-color-shadow-1",
547
547
  /**
548
- * #1f262e
548
+ * rgba(#1f262e,0.08)
549
549
  *
550
550
  * Second shadow color
551
551
  */
@@ -628,7 +628,7 @@ export declare const color = {
628
628
  },
629
629
  "orange": {
630
630
  /**
631
- * #f38b00
631
+ * #ffa126
632
632
  *
633
633
  * Orange
634
634
  */
@@ -959,47 +959,47 @@ export declare const fontSize = {
959
959
 
960
960
  export declare const lineHeight = {
961
961
  "subtext": {
962
- /** 1rem (16px) */
962
+ /** 16 */
963
963
  "small": "--cnvs-sys-line-height-subtext-small",
964
- /** 1rem (16px) */
964
+ /** 16 */
965
965
  "medium": "--cnvs-sys-line-height-subtext-medium",
966
- /** 1.25rem (20px) */
966
+ /** 20 */
967
967
  "large": "--cnvs-sys-line-height-subtext-large",
968
968
  },
969
969
  "body": {
970
- /** 1.5rem (24px) */
970
+ /** 24 */
971
971
  "small": "--cnvs-sys-line-height-body-small",
972
- /** 1.75rem (28px) */
972
+ /** 28 */
973
973
  "medium": "--cnvs-sys-line-height-body-medium",
974
- /** 1.75rem (28px) */
974
+ /** 28 */
975
975
  "large": "--cnvs-sys-line-height-body-large",
976
976
  },
977
977
  "heading": {
978
- /** 2rem (32px) */
978
+ /** 32 */
979
979
  "small": "--cnvs-sys-line-height-heading-small",
980
- /** 2.25rem (36px) */
980
+ /** 36 */
981
981
  "medium": "--cnvs-sys-line-height-heading-medium",
982
- /** 2.5rem (40px) */
982
+ /** 40 */
983
983
  "large": "--cnvs-sys-line-height-heading-large",
984
984
  },
985
985
  "title": {
986
- /** 3rem (48px) */
986
+ /** 48 */
987
987
  "small": "--cnvs-sys-line-height-title-small",
988
- /** 3.5rem (56px) */
988
+ /** 56 */
989
989
  "medium": "--cnvs-sys-line-height-title-medium",
990
- /** 4rem (64px) */
990
+ /** 64 */
991
991
  "large": "--cnvs-sys-line-height-title-large",
992
992
  },
993
993
  } as const;
994
994
 
995
995
  export declare const fontWeight = {
996
- /** 300 */
996
+ /** Light */
997
997
  "light": "--cnvs-sys-font-weight-light",
998
- /** 400 */
998
+ /** Regular */
999
999
  "normal": "--cnvs-sys-font-weight-normal",
1000
- /** 500 */
1000
+ /** Medium */
1001
1001
  "medium": "--cnvs-sys-font-weight-medium",
1002
- /** 700 */
1002
+ /** Bold */
1003
1003
  "bold": "--cnvs-sys-font-weight-bold",
1004
1004
  } as const;
1005
1005
 
@@ -1008,9 +1008,9 @@ export declare const type = {
1008
1008
  "small": {
1009
1009
  /** Roboto */
1010
1010
  "fontFamily": "--cnvs-base-font-family-50",
1011
- /** 400 */
1011
+ /** Regular */
1012
1012
  "fontWeight": "--cnvs-base-font-weight-400",
1013
- /** 1rem (16px) */
1013
+ /** 16 */
1014
1014
  "lineHeight": "--cnvs-base-line-height-50",
1015
1015
  /** 0.625rem (10px) */
1016
1016
  "fontSize": "--cnvs-base-font-size-25",
@@ -1020,9 +1020,9 @@ export declare const type = {
1020
1020
  "medium": {
1021
1021
  /** Roboto */
1022
1022
  "fontFamily": "--cnvs-base-font-family-50",
1023
- /** 400 */
1023
+ /** Regular */
1024
1024
  "fontWeight": "--cnvs-base-font-weight-400",
1025
- /** 1rem (16px) */
1025
+ /** 16 */
1026
1026
  "lineHeight": "--cnvs-base-line-height-50",
1027
1027
  /** 0.75rem (12px) */
1028
1028
  "fontSize": "--cnvs-base-font-size-50",
@@ -1032,9 +1032,9 @@ export declare const type = {
1032
1032
  "large": {
1033
1033
  /** Roboto */
1034
1034
  "fontFamily": "--cnvs-base-font-family-50",
1035
- /** 400 */
1035
+ /** Regular */
1036
1036
  "fontWeight": "--cnvs-base-font-weight-400",
1037
- /** 1.25rem (20px) */
1037
+ /** 20 */
1038
1038
  "lineHeight": "--cnvs-base-line-height-100",
1039
1039
  /** 0.875rem (14px) */
1040
1040
  "fontSize": "--cnvs-base-font-size-75",
@@ -1046,9 +1046,9 @@ export declare const type = {
1046
1046
  "small": {
1047
1047
  /** Roboto */
1048
1048
  "fontFamily": "--cnvs-base-font-family-50",
1049
- /** 400 */
1049
+ /** Regular */
1050
1050
  "fontWeight": "--cnvs-base-font-weight-400",
1051
- /** 1.5rem (24px) */
1051
+ /** 24 */
1052
1052
  "lineHeight": "--cnvs-base-line-height-150",
1053
1053
  /** 1rem (16px) */
1054
1054
  "fontSize": "--cnvs-base-font-size-100",
@@ -1058,9 +1058,9 @@ export declare const type = {
1058
1058
  "medium": {
1059
1059
  /** Roboto */
1060
1060
  "fontFamily": "--cnvs-base-font-family-50",
1061
- /** 400 */
1061
+ /** Regular */
1062
1062
  "fontWeight": "--cnvs-base-font-weight-400",
1063
- /** 1.75rem (28px) */
1063
+ /** 28 */
1064
1064
  "lineHeight": "--cnvs-base-line-height-200",
1065
1065
  /** 1.125rem (18px) */
1066
1066
  "fontSize": "--cnvs-base-font-size-125",
@@ -1068,9 +1068,9 @@ export declare const type = {
1068
1068
  "large": {
1069
1069
  /** Roboto */
1070
1070
  "fontFamily": "--cnvs-base-font-family-50",
1071
- /** 400 */
1071
+ /** Regular */
1072
1072
  "fontWeight": "--cnvs-base-font-weight-400",
1073
- /** 1.75rem (28px) */
1073
+ /** 28 */
1074
1074
  "lineHeight": "--cnvs-base-line-height-200",
1075
1075
  /** 1.25rem (20px) */
1076
1076
  "fontSize": "--cnvs-base-font-size-150",
@@ -1080,9 +1080,9 @@ export declare const type = {
1080
1080
  "small": {
1081
1081
  /** Roboto */
1082
1082
  "fontFamily": "--cnvs-base-font-family-50",
1083
- /** 700 */
1083
+ /** Bold */
1084
1084
  "fontWeight": "--cnvs-base-font-weight-700",
1085
- /** 2rem (32px) */
1085
+ /** 32 */
1086
1086
  "lineHeight": "--cnvs-base-line-height-250",
1087
1087
  /** 1.5rem (24px) */
1088
1088
  "fontSize": "--cnvs-base-font-size-200",
@@ -1090,9 +1090,9 @@ export declare const type = {
1090
1090
  "medium": {
1091
1091
  /** Roboto */
1092
1092
  "fontFamily": "--cnvs-base-font-family-50",
1093
- /** 700 */
1093
+ /** Bold */
1094
1094
  "fontWeight": "--cnvs-base-font-weight-700",
1095
- /** 2.25rem (36px) */
1095
+ /** 36 */
1096
1096
  "lineHeight": "--cnvs-base-line-height-300",
1097
1097
  /** 1.75rem (28px) */
1098
1098
  "fontSize": "--cnvs-base-font-size-250",
@@ -1100,9 +1100,9 @@ export declare const type = {
1100
1100
  "large": {
1101
1101
  /** Roboto */
1102
1102
  "fontFamily": "--cnvs-base-font-family-50",
1103
- /** 700 */
1103
+ /** Bold */
1104
1104
  "fontWeight": "--cnvs-base-font-weight-700",
1105
- /** 2.5rem (40px) */
1105
+ /** 40 */
1106
1106
  "lineHeight": "--cnvs-base-line-height-350",
1107
1107
  /** 2rem (32px) */
1108
1108
  "fontSize": "--cnvs-base-font-size-300",
@@ -1112,9 +1112,9 @@ export declare const type = {
1112
1112
  "small": {
1113
1113
  /** Roboto */
1114
1114
  "fontFamily": "--cnvs-base-font-family-50",
1115
- /** 700 */
1115
+ /** Bold */
1116
1116
  "fontWeight": "--cnvs-base-font-weight-700",
1117
- /** 3rem (48px) */
1117
+ /** 48 */
1118
1118
  "lineHeight": "--cnvs-base-line-height-400",
1119
1119
  /** 2.5rem (40px) */
1120
1120
  "fontSize": "--cnvs-base-font-size-400",
@@ -1122,9 +1122,9 @@ export declare const type = {
1122
1122
  "medium": {
1123
1123
  /** Roboto */
1124
1124
  "fontFamily": "--cnvs-base-font-family-50",
1125
- /** 700 */
1125
+ /** Bold */
1126
1126
  "fontWeight": "--cnvs-base-font-weight-700",
1127
- /** 3.5rem (56px) */
1127
+ /** 56 */
1128
1128
  "lineHeight": "--cnvs-base-line-height-500",
1129
1129
  /** 3rem (48px) */
1130
1130
  "fontSize": "--cnvs-base-font-size-500",
@@ -1132,9 +1132,9 @@ export declare const type = {
1132
1132
  "large": {
1133
1133
  /** Roboto */
1134
1134
  "fontFamily": "--cnvs-base-font-family-50",
1135
- /** 700 */
1135
+ /** Bold */
1136
1136
  "fontWeight": "--cnvs-base-font-weight-700",
1137
- /** 4rem (64px) */
1137
+ /** 64 */
1138
1138
  "lineHeight": "--cnvs-base-line-height-600",
1139
1139
  /** 3.5rem (56px) */
1140
1140
  "fontSize": "--cnvs-base-font-size-600",
package/dist/common-js/system/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 01 Apr 2024 22:01:39 GMT
3
+ * Generated on Thu, 18 Apr 2024 22:39:08 GMT
4
4
  */
5
5
 
6
6
  "use strict";
package/dist/es6/base/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 01 Apr 2024 22:01:39 GMT
3
+ * Generated on Thu, 18 Apr 2024 22:39:08 GMT
4
4
  */
5
5
 
6
6
  export declare const cinnamon100 = "--cnvs-base-palette-cinnamon-100" as const;
package/dist/es6/base/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 01 Apr 2024 22:01:39 GMT
3
+ * Generated on Thu, 18 Apr 2024 22:39:08 GMT
4
4
  */
5
5
 
6
6
  export const cinnamon100 = "--cnvs-base-palette-cinnamon-100";
package/dist/es6/brand/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 01 Apr 2024 22:01:39 GMT
3
+ * Generated on Thu, 18 Apr 2024 22:39:08 GMT
4
4
  */
5
5
 
6
6
  export declare const primary = {
package/dist/es6/brand/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 01 Apr 2024 22:01:39 GMT
3
+ * Generated on Thu, 18 Apr 2024 22:39:08 GMT
4
4
  */
5
5
 
6
6
  export const primary = {
package/dist/es6/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 01 Apr 2024 22:01:39 GMT
3
+ * Generated on Thu, 18 Apr 2024 22:39:08 GMT
4
4
  */
5
5
 
6
6
  import * as base from "./base";
package/dist/es6/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 01 Apr 2024 22:01:39 GMT
3
+ * Generated on Thu, 18 Apr 2024 22:39:08 GMT
4
4
  */
5
5
 
6
6
  import * as base from "./base";
package/dist/es6/system/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 01 Apr 2024 22:01:39 GMT
3
+ * Generated on Thu, 18 Apr 2024 22:39:08 GMT
4
4
  */
5
5
 
6
6
  export declare const color = {
@@ -13,7 +13,7 @@ export declare const color = {
13
13
  */
14
14
  "default": "--cnvs-sys-color-bg-default",
15
15
  /**
16
- * rgba(#ffffff, 0)
16
+ * rgba(#ffffff,0)
17
17
  *
18
18
  * Transparent background
19
19
  */
@@ -25,7 +25,7 @@ export declare const color = {
25
25
  */
26
26
  "overlay": "--cnvs-sys-color-bg-overlay",
27
27
  /**
28
- * rgba(#000000 ,0.84)
28
+ * rgba(#000000,0.84)
29
29
  *
30
30
  * Tooltip, Status Indicator
31
31
  */
@@ -513,7 +513,7 @@ export declare const color = {
513
513
  "strong": "--cnvs-sys-color-border-caution-strong",
514
514
  },
515
515
  /**
516
- * rgba(#ffffff, 0%)
516
+ * rgba(#ffffff,0%)
517
517
  *
518
518
  * Transparent
519
519
  */
@@ -539,13 +539,13 @@ export declare const color = {
539
539
  },
540
540
  "shadow": {
541
541
  /**
542
- * #1f262e
542
+ * rgba(#1f262e,0.12)
543
543
  *
544
544
  * First shadow color
545
545
  */
546
546
  "1": "--cnvs-sys-color-shadow-1",
547
547
  /**
548
- * #1f262e
548
+ * rgba(#1f262e,0.08)
549
549
  *
550
550
  * Second shadow color
551
551
  */
@@ -628,7 +628,7 @@ export declare const color = {
628
628
  },
629
629
  "orange": {
630
630
  /**
631
- * #f38b00
631
+ * #ffa126
632
632
  *
633
633
  * Orange
634
634
  */
@@ -959,47 +959,47 @@ export declare const fontSize = {
959
959
 
960
960
  export declare const lineHeight = {
961
961
  "subtext": {
962
- /** 1rem (16px) */
962
+ /** 16 */
963
963
  "small": "--cnvs-sys-line-height-subtext-small",
964
- /** 1rem (16px) */
964
+ /** 16 */
965
965
  "medium": "--cnvs-sys-line-height-subtext-medium",
966
- /** 1.25rem (20px) */
966
+ /** 20 */
967
967
  "large": "--cnvs-sys-line-height-subtext-large",
968
968
  },
969
969
  "body": {
970
- /** 1.5rem (24px) */
970
+ /** 24 */
971
971
  "small": "--cnvs-sys-line-height-body-small",
972
- /** 1.75rem (28px) */
972
+ /** 28 */
973
973
  "medium": "--cnvs-sys-line-height-body-medium",
974
- /** 1.75rem (28px) */
974
+ /** 28 */
975
975
  "large": "--cnvs-sys-line-height-body-large",
976
976
  },
977
977
  "heading": {
978
- /** 2rem (32px) */
978
+ /** 32 */
979
979
  "small": "--cnvs-sys-line-height-heading-small",
980
- /** 2.25rem (36px) */
980
+ /** 36 */
981
981
  "medium": "--cnvs-sys-line-height-heading-medium",
982
- /** 2.5rem (40px) */
982
+ /** 40 */
983
983
  "large": "--cnvs-sys-line-height-heading-large",
984
984
  },
985
985
  "title": {
986
- /** 3rem (48px) */
986
+ /** 48 */
987
987
  "small": "--cnvs-sys-line-height-title-small",
988
- /** 3.5rem (56px) */
988
+ /** 56 */
989
989
  "medium": "--cnvs-sys-line-height-title-medium",
990
- /** 4rem (64px) */
990
+ /** 64 */
991
991
  "large": "--cnvs-sys-line-height-title-large",
992
992
  },
993
993
  } as const;
994
994
 
995
995
  export declare const fontWeight = {
996
- /** 300 */
996
+ /** Light */
997
997
  "light": "--cnvs-sys-font-weight-light",
998
- /** 400 */
998
+ /** Regular */
999
999
  "normal": "--cnvs-sys-font-weight-normal",
1000
- /** 500 */
1000
+ /** Medium */
1001
1001
  "medium": "--cnvs-sys-font-weight-medium",
1002
- /** 700 */
1002
+ /** Bold */
1003
1003
  "bold": "--cnvs-sys-font-weight-bold",
1004
1004
  } as const;
1005
1005
 
@@ -1008,9 +1008,9 @@ export declare const type = {
1008
1008
  "small": {
1009
1009
  /** Roboto */
1010
1010
  "fontFamily": "--cnvs-base-font-family-50",
1011
- /** 400 */
1011
+ /** Regular */
1012
1012
  "fontWeight": "--cnvs-base-font-weight-400",
1013
- /** 1rem (16px) */
1013
+ /** 16 */
1014
1014
  "lineHeight": "--cnvs-base-line-height-50",
1015
1015
  /** 0.625rem (10px) */
1016
1016
  "fontSize": "--cnvs-base-font-size-25",
@@ -1020,9 +1020,9 @@ export declare const type = {
1020
1020
  "medium": {
1021
1021
  /** Roboto */
1022
1022
  "fontFamily": "--cnvs-base-font-family-50",
1023
- /** 400 */
1023
+ /** Regular */
1024
1024
  "fontWeight": "--cnvs-base-font-weight-400",
1025
- /** 1rem (16px) */
1025
+ /** 16 */
1026
1026
  "lineHeight": "--cnvs-base-line-height-50",
1027
1027
  /** 0.75rem (12px) */
1028
1028
  "fontSize": "--cnvs-base-font-size-50",
@@ -1032,9 +1032,9 @@ export declare const type = {
1032
1032
  "large": {
1033
1033
  /** Roboto */
1034
1034
  "fontFamily": "--cnvs-base-font-family-50",
1035
- /** 400 */
1035
+ /** Regular */
1036
1036
  "fontWeight": "--cnvs-base-font-weight-400",
1037
- /** 1.25rem (20px) */
1037
+ /** 20 */
1038
1038
  "lineHeight": "--cnvs-base-line-height-100",
1039
1039
  /** 0.875rem (14px) */
1040
1040
  "fontSize": "--cnvs-base-font-size-75",
@@ -1046,9 +1046,9 @@ export declare const type = {
1046
1046
  "small": {
1047
1047
  /** Roboto */
1048
1048
  "fontFamily": "--cnvs-base-font-family-50",
1049
- /** 400 */
1049
+ /** Regular */
1050
1050
  "fontWeight": "--cnvs-base-font-weight-400",
1051
- /** 1.5rem (24px) */
1051
+ /** 24 */
1052
1052
  "lineHeight": "--cnvs-base-line-height-150",
1053
1053
  /** 1rem (16px) */
1054
1054
  "fontSize": "--cnvs-base-font-size-100",
@@ -1058,9 +1058,9 @@ export declare const type = {
1058
1058
  "medium": {
1059
1059
  /** Roboto */
1060
1060
  "fontFamily": "--cnvs-base-font-family-50",
1061
- /** 400 */
1061
+ /** Regular */
1062
1062
  "fontWeight": "--cnvs-base-font-weight-400",
1063
- /** 1.75rem (28px) */
1063
+ /** 28 */
1064
1064
  "lineHeight": "--cnvs-base-line-height-200",
1065
1065
  /** 1.125rem (18px) */
1066
1066
  "fontSize": "--cnvs-base-font-size-125",
@@ -1068,9 +1068,9 @@ export declare const type = {
1068
1068
  "large": {
1069
1069
  /** Roboto */
1070
1070
  "fontFamily": "--cnvs-base-font-family-50",
1071
- /** 400 */
1071
+ /** Regular */
1072
1072
  "fontWeight": "--cnvs-base-font-weight-400",
1073
- /** 1.75rem (28px) */
1073
+ /** 28 */
1074
1074
  "lineHeight": "--cnvs-base-line-height-200",
1075
1075
  /** 1.25rem (20px) */
1076
1076
  "fontSize": "--cnvs-base-font-size-150",
@@ -1080,9 +1080,9 @@ export declare const type = {
1080
1080
  "small": {
1081
1081
  /** Roboto */
1082
1082
  "fontFamily": "--cnvs-base-font-family-50",
1083
- /** 700 */
1083
+ /** Bold */
1084
1084
  "fontWeight": "--cnvs-base-font-weight-700",
1085
- /** 2rem (32px) */
1085
+ /** 32 */
1086
1086
  "lineHeight": "--cnvs-base-line-height-250",
1087
1087
  /** 1.5rem (24px) */
1088
1088
  "fontSize": "--cnvs-base-font-size-200",
@@ -1090,9 +1090,9 @@ export declare const type = {
1090
1090
  "medium": {
1091
1091
  /** Roboto */
1092
1092
  "fontFamily": "--cnvs-base-font-family-50",
1093
- /** 700 */
1093
+ /** Bold */
1094
1094
  "fontWeight": "--cnvs-base-font-weight-700",
1095
- /** 2.25rem (36px) */
1095
+ /** 36 */
1096
1096
  "lineHeight": "--cnvs-base-line-height-300",
1097
1097
  /** 1.75rem (28px) */
1098
1098
  "fontSize": "--cnvs-base-font-size-250",
@@ -1100,9 +1100,9 @@ export declare const type = {
1100
1100
  "large": {
1101
1101
  /** Roboto */
1102
1102
  "fontFamily": "--cnvs-base-font-family-50",
1103
- /** 700 */
1103
+ /** Bold */
1104
1104
  "fontWeight": "--cnvs-base-font-weight-700",
1105
- /** 2.5rem (40px) */
1105
+ /** 40 */
1106
1106
  "lineHeight": "--cnvs-base-line-height-350",
1107
1107
  /** 2rem (32px) */
1108
1108
  "fontSize": "--cnvs-base-font-size-300",
@@ -1112,9 +1112,9 @@ export declare const type = {
1112
1112
  "small": {
1113
1113
  /** Roboto */
1114
1114
  "fontFamily": "--cnvs-base-font-family-50",
1115
- /** 700 */
1115
+ /** Bold */
1116
1116
  "fontWeight": "--cnvs-base-font-weight-700",
1117
- /** 3rem (48px) */
1117
+ /** 48 */
1118
1118
  "lineHeight": "--cnvs-base-line-height-400",
1119
1119
  /** 2.5rem (40px) */
1120
1120
  "fontSize": "--cnvs-base-font-size-400",
@@ -1122,9 +1122,9 @@ export declare const type = {
1122
1122
  "medium": {
1123
1123
  /** Roboto */
1124
1124
  "fontFamily": "--cnvs-base-font-family-50",
1125
- /** 700 */
1125
+ /** Bold */
1126
1126
  "fontWeight": "--cnvs-base-font-weight-700",
1127
- /** 3.5rem (56px) */
1127
+ /** 56 */
1128
1128
  "lineHeight": "--cnvs-base-line-height-500",
1129
1129
  /** 3rem (48px) */
1130
1130
  "fontSize": "--cnvs-base-font-size-500",
@@ -1132,9 +1132,9 @@ export declare const type = {
1132
1132
  "large": {
1133
1133
  /** Roboto */
1134
1134
  "fontFamily": "--cnvs-base-font-family-50",
1135
- /** 700 */
1135
+ /** Bold */
1136
1136
  "fontWeight": "--cnvs-base-font-weight-700",
1137
- /** 4rem (64px) */
1137
+ /** 64 */
1138
1138
  "lineHeight": "--cnvs-base-line-height-600",
1139
1139
  /** 3.5rem (56px) */
1140
1140
  "fontSize": "--cnvs-base-font-size-600",
package/dist/es6/system/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 01 Apr 2024 22:01:39 GMT
3
+ * Generated on Thu, 18 Apr 2024 22:39:08 GMT
4
4
  */
5
5
 
6
6
  export const color = {
package/less/base/_variables.less CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Apr 2024 22:01:39 GMT
3
+ // Generated on Thu, 18 Apr 2024 22:39:08 GMT
4
4
 
5
5
  @cnvs-base-palette-cinnamon-100: rgba(255,239,238,1);
6
6
  @cnvs-base-palette-cinnamon-200: rgba(252,201,197,1);
@@ -194,9 +194,9 @@
194
194
  @cnvs-base-line-height-400: 3rem;
195
195
  @cnvs-base-line-height-500: 3.5rem;
196
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;
197
+ @cnvs-base-line-height-750: 4.5rem;
198
+ @cnvs-base-line-height-900: 5.5rem;
199
+ @cnvs-base-line-height-1050: 6.5rem;
200
200
  @cnvs-base-typescale-size-default: 0.125rem;
201
201
  @cnvs-base-typescale-size-heading: 0.25rem;
202
202
  @cnvs-base-typescale-size-title: 0.5rem;
package/less/brand/_variables.less CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Apr 2024 22:01:39 GMT
3
+ // Generated on Thu, 18 Apr 2024 22:39:08 GMT
4
4
 
5
5
  @cnvs-brand-error-darkest: rgba(128,22,14,1);
6
6
  @cnvs-brand-common-alert-inner: @cnvs-base-palette-cantaloupe-400;
package/less/system/_variables.less CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Apr 2024 22:01:39 GMT
3
+ // Generated on Thu, 18 Apr 2024 22:39:08 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.
@@ -12,6 +12,16 @@
12
12
  @cnvs-sys-font-weight-medium: @cnvs-base-font-weight-500;
13
13
  @cnvs-sys-font-weight-normal: @cnvs-base-font-weight-400;
14
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;
15
25
  @cnvs-sys-line-height-subtext-medium: @cnvs-base-line-height-50;
16
26
  @cnvs-sys-line-height-subtext-small: @cnvs-base-line-height-50;
17
27
  @cnvs-sys-font-size-subtext-small: @cnvs-base-font-size-25;
@@ -48,7 +58,7 @@
48
58
  @cnvs-sys-color-static-gray-default: @cnvs-base-palette-licorice-300; // Gray
49
59
  @cnvs-sys-color-static-orange-strong: @cnvs-base-palette-cantaloupe-600; // Stronger orange
50
60
  @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
61
+ @cnvs-sys-color-static-orange-default: @cnvs-base-palette-cantaloupe-400; // Orange
52
62
  @cnvs-sys-color-static-red-strong: @cnvs-base-palette-cinnamon-600; // Strong red
53
63
  @cnvs-sys-color-static-red-soft: @cnvs-base-palette-cinnamon-100; // Light red
54
64
  @cnvs-sys-color-static-red-default: @cnvs-base-palette-cinnamon-500; // Red
@@ -60,7 +70,7 @@
60
70
  @cnvs-sys-color-static-blue-soft: @cnvs-base-palette-blueberry-100; // Light blue
61
71
  @cnvs-sys-color-static-blue-default: @cnvs-base-palette-blueberry-400; // Blue
62
72
  @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
73
+ @cnvs-sys-color-shadow-2: rgba(31,38,46,@cnvs-base-opacity-100); // Second shadow color
64
74
  @cnvs-sys-color-border-container: @cnvs-base-palette-soap-500; // Cards, Toasts
65
75
  @cnvs-sys-color-border-divider: @cnvs-base-palette-soap-400; // Dividers
66
76
  @cnvs-sys-color-border-inverse: @cnvs-base-palette-french-vanilla-100; // Inverse
@@ -136,10 +146,9 @@
136
146
  @cnvs-sys-color-bg-alt-softer: @cnvs-base-palette-soap-100; // Disabled inputs and column headers
137
147
  @cnvs-sys-color-bg-alt-soft: @cnvs-base-palette-soap-200; // Page background
138
148
  @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
149
+ @cnvs-sys-color-bg-translucent: rgba(0,0,0,@cnvs-base-opacity-500); // Tooltip, Status Indicator
150
+ @cnvs-sys-color-bg-transparent: transparent; // Transparent background
141
151
  @cnvs-sys-color-bg-default: @cnvs-base-palette-french-vanilla-100; // Main background color;
142
- @cnvs-sys-line-height-subtext-large: @cnvs-base-line-height-100;
143
152
  @cnvs-sys-font-size-subtext-medium: @cnvs-base-font-size-50;
144
153
  @cnvs-sys-depth-6: @cnvs-base-shadow-600; // Modal Dialogs, Side Panels (when opacity overlay behaviour; is applied)
145
154
  @cnvs-sys-depth-5: @cnvs-base-shadow-500; // Banners, Snackbars, Toast Messages, Non modal Dialogs, ; Side Panels (when opacity overlay behaviour is not applied)
@@ -147,27 +156,18 @@
147
156
  @cnvs-sys-depth-3: @cnvs-base-shadow-300; // Floating Action Buttons (FAB), Menus
148
157
  @cnvs-sys-depth-2: @cnvs-base-shadow-200; // Top navigation, Bottom Navigation
149
158
  @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
159
+ @cnvs-sys-color-shadow-1: rgba(31,38,46,@cnvs-base-opacity-200); // First shadow color
160
+ @cnvs-sys-color-border-transparent: transparent; // Transparent
152
161
  @cnvs-sys-color-text-caution-strong: @cnvs-sys-color-text-stronger; // Strong warning text
153
162
  @cnvs-sys-color-text-caution-default: @cnvs-sys-color-text-strong; // Warning text
154
163
  @cnvs-sys-color-bg-overlay: rgba(0,0,0,@cnvs-base-opacity-400); // Overlay background
155
- @cnvs-sys-line-height-body-small: @cnvs-base-line-height-150;
156
164
  @cnvs-sys-font-size-subtext-large: @cnvs-base-font-size-75;
157
- @cnvs-sys-line-height-body-large: @cnvs-base-line-height-200;
158
- @cnvs-sys-line-height-body-medium: @cnvs-base-line-height-200;
159
165
  @cnvs-sys-font-size-body-small: @cnvs-base-font-size-100;
160
- @cnvs-sys-line-height-heading-small: @cnvs-base-line-height-250;
161
166
  @cnvs-sys-font-size-body-medium: @cnvs-base-font-size-125;
162
- @cnvs-sys-line-height-heading-medium: @cnvs-base-line-height-300;
163
167
  @cnvs-sys-font-size-body-large: @cnvs-base-font-size-150;
164
- @cnvs-sys-line-height-heading-large: @cnvs-base-line-height-350;
165
168
  @cnvs-sys-font-size-heading-small: @cnvs-base-font-size-200;
166
- @cnvs-sys-line-height-title-small: @cnvs-base-line-height-400;
167
169
  @cnvs-sys-font-size-heading-medium: @cnvs-base-font-size-250;
168
- @cnvs-sys-line-height-title-medium: @cnvs-base-line-height-500;
169
170
  @cnvs-sys-font-size-heading-large: @cnvs-base-font-size-300;
170
- @cnvs-sys-line-height-title-large: @cnvs-base-line-height-600;
171
171
  @cnvs-sys-font-size-title-small: @cnvs-base-font-size-400;
172
172
  @cnvs-sys-font-size-title-medium: @cnvs-base-font-size-500;
173
173
  @cnvs-sys-font-size-title-large: @cnvs-base-font-size-600;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-tokens-web",
3
- "version": "1.3.0",
3
+ "version": "1.3.1",
4
4
  "description": "Canvas design tokens for web",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "CC-BY-ND-4.0",
package/scss/base/_variables.sass CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Apr 2024 22:01:39 GMT
3
+ // Generated on Thu, 18 Apr 2024 22:39:08 GMT
4
4
 
5
5
  $cnvs-base-palette-cinnamon-100: rgba(255,239,238,1);
6
6
  $cnvs-base-palette-cinnamon-200: rgba(252,201,197,1);
@@ -194,9 +194,9 @@ $cnvs-base-line-height-350: 2.5rem;
194
194
  $cnvs-base-line-height-400: 3rem;
195
195
  $cnvs-base-line-height-500: 3.5rem;
196
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;
197
+ $cnvs-base-line-height-750: 4.5rem;
198
+ $cnvs-base-line-height-900: 5.5rem;
199
+ $cnvs-base-line-height-1050: 6.5rem;
200
200
  $cnvs-base-typescale-size-default: 0.125rem;
201
201
  $cnvs-base-typescale-size-heading: 0.25rem;
202
202
  $cnvs-base-typescale-size-title: 0.5rem;
package/scss/base/_variables.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Apr 2024 22:01:39 GMT
3
+ // Generated on Thu, 18 Apr 2024 22:39:08 GMT
4
4
 
5
5
  $cnvs-base-palette-cinnamon-100: rgba(255,239,238,1);
6
6
  $cnvs-base-palette-cinnamon-200: rgba(252,201,197,1);
@@ -194,9 +194,9 @@ $cnvs-base-line-height-350: 2.5rem;
194
194
  $cnvs-base-line-height-400: 3rem;
195
195
  $cnvs-base-line-height-500: 3.5rem;
196
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;
197
+ $cnvs-base-line-height-750: 4.5rem;
198
+ $cnvs-base-line-height-900: 5.5rem;
199
+ $cnvs-base-line-height-1050: 6.5rem;
200
200
  $cnvs-base-typescale-size-default: 0.125rem;
201
201
  $cnvs-base-typescale-size-heading: 0.25rem;
202
202
  $cnvs-base-typescale-size-title: 0.5rem;
package/scss/brand/_variables.sass CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Apr 2024 22:01:39 GMT
3
+ // Generated on Thu, 18 Apr 2024 22:39:08 GMT
4
4
 
5
5
  $cnvs-brand-error-darkest: rgba(128,22,14,1);
6
6
  $cnvs-brand-common-alert-inner: $cnvs-base-palette-cantaloupe-400;
package/scss/brand/_variables.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Apr 2024 22:01:39 GMT
3
+ // Generated on Thu, 18 Apr 2024 22:39:08 GMT
4
4
 
5
5
  $cnvs-brand-error-darkest: rgba(128,22,14,1);
6
6
  $cnvs-brand-common-alert-inner: $cnvs-base-palette-cantaloupe-400;
package/scss/system/_variables.sass CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Apr 2024 22:01:39 GMT
3
+ // Generated on Thu, 18 Apr 2024 22:39:08 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.
@@ -12,6 +12,16 @@ $cnvs-sys-font-weight-bold: $cnvs-base-font-weight-700;
12
12
  $cnvs-sys-font-weight-medium: $cnvs-base-font-weight-500;
13
13
  $cnvs-sys-font-weight-normal: $cnvs-base-font-weight-400;
14
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;
15
25
  $cnvs-sys-line-height-subtext-medium: $cnvs-base-line-height-50;
16
26
  $cnvs-sys-line-height-subtext-small: $cnvs-base-line-height-50;
17
27
  $cnvs-sys-font-size-subtext-small: $cnvs-base-font-size-25;
@@ -48,7 +58,7 @@ $cnvs-sys-color-static-gray-soft: $cnvs-base-palette-soap-300; // Light gray
48
58
  $cnvs-sys-color-static-gray-default: $cnvs-base-palette-licorice-300; // Gray
49
59
  $cnvs-sys-color-static-orange-strong: $cnvs-base-palette-cantaloupe-600; // Stronger orange
50
60
  $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
61
+ $cnvs-sys-color-static-orange-default: $cnvs-base-palette-cantaloupe-400; // Orange
52
62
  $cnvs-sys-color-static-red-strong: $cnvs-base-palette-cinnamon-600; // Strong red
53
63
  $cnvs-sys-color-static-red-soft: $cnvs-base-palette-cinnamon-100; // Light red
54
64
  $cnvs-sys-color-static-red-default: $cnvs-base-palette-cinnamon-500; // Red
@@ -60,7 +70,7 @@ $cnvs-sys-color-static-blue-strong: $cnvs-base-palette-blueberry-500; // Stronge
60
70
  $cnvs-sys-color-static-blue-soft: $cnvs-base-palette-blueberry-100; // Light blue
61
71
  $cnvs-sys-color-static-blue-default: $cnvs-base-palette-blueberry-400; // Blue
62
72
  $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
73
+ $cnvs-sys-color-shadow-2: rgba(31,38,46,$cnvs-base-opacity-100); // Second shadow color
64
74
  $cnvs-sys-color-border-container: $cnvs-base-palette-soap-500; // Cards, Toasts
65
75
  $cnvs-sys-color-border-divider: $cnvs-base-palette-soap-400; // Dividers
66
76
  $cnvs-sys-color-border-inverse: $cnvs-base-palette-french-vanilla-100; // Inverse
@@ -136,10 +146,9 @@ $cnvs-sys-color-bg-alt-strong: $cnvs-base-palette-soap-400; // Active states
136
146
  $cnvs-sys-color-bg-alt-softer: $cnvs-base-palette-soap-100; // Disabled inputs and column headers
137
147
  $cnvs-sys-color-bg-alt-soft: $cnvs-base-palette-soap-200; // Page background
138
148
  $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
149
+ $cnvs-sys-color-bg-translucent: rgba(0,0,0,$cnvs-base-opacity-500); // Tooltip, Status Indicator
150
+ $cnvs-sys-color-bg-transparent: transparent; // Transparent background
141
151
  $cnvs-sys-color-bg-default: $cnvs-base-palette-french-vanilla-100; // Main background color;
142
- $cnvs-sys-line-height-subtext-large: $cnvs-base-line-height-100;
143
152
  $cnvs-sys-font-size-subtext-medium: $cnvs-base-font-size-50;
144
153
  $cnvs-sys-depth-6: $cnvs-base-shadow-600; // Modal Dialogs, Side Panels (when opacity overlay behaviour; is applied)
145
154
  $cnvs-sys-depth-5: $cnvs-base-shadow-500; // Banners, Snackbars, Toast Messages, Non modal Dialogs, ; Side Panels (when opacity overlay behaviour is not applied)
@@ -147,27 +156,18 @@ $cnvs-sys-depth-4: $cnvs-base-shadow-400; // Bottom Sheets
147
156
  $cnvs-sys-depth-3: $cnvs-base-shadow-300; // Floating Action Buttons (FAB), Menus
148
157
  $cnvs-sys-depth-2: $cnvs-base-shadow-200; // Top navigation, Bottom Navigation
149
158
  $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
159
+ $cnvs-sys-color-shadow-1: rgba(31,38,46,$cnvs-base-opacity-200); // First shadow color
160
+ $cnvs-sys-color-border-transparent: transparent; // Transparent
152
161
  $cnvs-sys-color-text-caution-strong: $cnvs-sys-color-text-stronger; // Strong warning text
153
162
  $cnvs-sys-color-text-caution-default: $cnvs-sys-color-text-strong; // Warning text
154
163
  $cnvs-sys-color-bg-overlay: rgba(0,0,0,$cnvs-base-opacity-400); // Overlay background
155
- $cnvs-sys-line-height-body-small: $cnvs-base-line-height-150;
156
164
  $cnvs-sys-font-size-subtext-large: $cnvs-base-font-size-75;
157
- $cnvs-sys-line-height-body-large: $cnvs-base-line-height-200;
158
- $cnvs-sys-line-height-body-medium: $cnvs-base-line-height-200;
159
165
  $cnvs-sys-font-size-body-small: $cnvs-base-font-size-100;
160
- $cnvs-sys-line-height-heading-small: $cnvs-base-line-height-250;
161
166
  $cnvs-sys-font-size-body-medium: $cnvs-base-font-size-125;
162
- $cnvs-sys-line-height-heading-medium: $cnvs-base-line-height-300;
163
167
  $cnvs-sys-font-size-body-large: $cnvs-base-font-size-150;
164
- $cnvs-sys-line-height-heading-large: $cnvs-base-line-height-350;
165
168
  $cnvs-sys-font-size-heading-small: $cnvs-base-font-size-200;
166
- $cnvs-sys-line-height-title-small: $cnvs-base-line-height-400;
167
169
  $cnvs-sys-font-size-heading-medium: $cnvs-base-font-size-250;
168
- $cnvs-sys-line-height-title-medium: $cnvs-base-line-height-500;
169
170
  $cnvs-sys-font-size-heading-large: $cnvs-base-font-size-300;
170
- $cnvs-sys-line-height-title-large: $cnvs-base-line-height-600;
171
171
  $cnvs-sys-font-size-title-small: $cnvs-base-font-size-400;
172
172
  $cnvs-sys-font-size-title-medium: $cnvs-base-font-size-500;
173
173
  $cnvs-sys-font-size-title-large: $cnvs-base-font-size-600;
package/scss/system/_variables.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Apr 2024 22:01:39 GMT
3
+ // Generated on Thu, 18 Apr 2024 22:39:08 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.
@@ -12,6 +12,16 @@ $cnvs-sys-font-weight-bold: $cnvs-base-font-weight-700;
12
12
  $cnvs-sys-font-weight-medium: $cnvs-base-font-weight-500;
13
13
  $cnvs-sys-font-weight-normal: $cnvs-base-font-weight-400;
14
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;
15
25
  $cnvs-sys-line-height-subtext-medium: $cnvs-base-line-height-50;
16
26
  $cnvs-sys-line-height-subtext-small: $cnvs-base-line-height-50;
17
27
  $cnvs-sys-font-size-subtext-small: $cnvs-base-font-size-25;
@@ -48,7 +58,7 @@ $cnvs-sys-color-static-gray-soft: $cnvs-base-palette-soap-300; // Light gray
48
58
  $cnvs-sys-color-static-gray-default: $cnvs-base-palette-licorice-300; // Gray
49
59
  $cnvs-sys-color-static-orange-strong: $cnvs-base-palette-cantaloupe-600; // Stronger orange
50
60
  $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
61
+ $cnvs-sys-color-static-orange-default: $cnvs-base-palette-cantaloupe-400; // Orange
52
62
  $cnvs-sys-color-static-red-strong: $cnvs-base-palette-cinnamon-600; // Strong red
53
63
  $cnvs-sys-color-static-red-soft: $cnvs-base-palette-cinnamon-100; // Light red
54
64
  $cnvs-sys-color-static-red-default: $cnvs-base-palette-cinnamon-500; // Red
@@ -60,7 +70,7 @@ $cnvs-sys-color-static-blue-strong: $cnvs-base-palette-blueberry-500; // Stronge
60
70
  $cnvs-sys-color-static-blue-soft: $cnvs-base-palette-blueberry-100; // Light blue
61
71
  $cnvs-sys-color-static-blue-default: $cnvs-base-palette-blueberry-400; // Blue
62
72
  $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
73
+ $cnvs-sys-color-shadow-2: rgba(31,38,46,$cnvs-base-opacity-100); // Second shadow color
64
74
  $cnvs-sys-color-border-container: $cnvs-base-palette-soap-500; // Cards, Toasts
65
75
  $cnvs-sys-color-border-divider: $cnvs-base-palette-soap-400; // Dividers
66
76
  $cnvs-sys-color-border-inverse: $cnvs-base-palette-french-vanilla-100; // Inverse
@@ -136,10 +146,9 @@ $cnvs-sys-color-bg-alt-strong: $cnvs-base-palette-soap-400; // Active states
136
146
  $cnvs-sys-color-bg-alt-softer: $cnvs-base-palette-soap-100; // Disabled inputs and column headers
137
147
  $cnvs-sys-color-bg-alt-soft: $cnvs-base-palette-soap-200; // Page background
138
148
  $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
149
+ $cnvs-sys-color-bg-translucent: rgba(0,0,0,$cnvs-base-opacity-500); // Tooltip, Status Indicator
150
+ $cnvs-sys-color-bg-transparent: transparent; // Transparent background
141
151
  $cnvs-sys-color-bg-default: $cnvs-base-palette-french-vanilla-100; // Main background color;
142
- $cnvs-sys-line-height-subtext-large: $cnvs-base-line-height-100;
143
152
  $cnvs-sys-font-size-subtext-medium: $cnvs-base-font-size-50;
144
153
  $cnvs-sys-depth-6: $cnvs-base-shadow-600; // Modal Dialogs, Side Panels (when opacity overlay behaviour; is applied)
145
154
  $cnvs-sys-depth-5: $cnvs-base-shadow-500; // Banners, Snackbars, Toast Messages, Non modal Dialogs, ; Side Panels (when opacity overlay behaviour is not applied)
@@ -147,27 +156,18 @@ $cnvs-sys-depth-4: $cnvs-base-shadow-400; // Bottom Sheets
147
156
  $cnvs-sys-depth-3: $cnvs-base-shadow-300; // Floating Action Buttons (FAB), Menus
148
157
  $cnvs-sys-depth-2: $cnvs-base-shadow-200; // Top navigation, Bottom Navigation
149
158
  $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
159
+ $cnvs-sys-color-shadow-1: rgba(31,38,46,$cnvs-base-opacity-200); // First shadow color
160
+ $cnvs-sys-color-border-transparent: transparent; // Transparent
152
161
  $cnvs-sys-color-text-caution-strong: $cnvs-sys-color-text-stronger; // Strong warning text
153
162
  $cnvs-sys-color-text-caution-default: $cnvs-sys-color-text-strong; // Warning text
154
163
  $cnvs-sys-color-bg-overlay: rgba(0,0,0,$cnvs-base-opacity-400); // Overlay background
155
- $cnvs-sys-line-height-body-small: $cnvs-base-line-height-150;
156
164
  $cnvs-sys-font-size-subtext-large: $cnvs-base-font-size-75;
157
- $cnvs-sys-line-height-body-large: $cnvs-base-line-height-200;
158
- $cnvs-sys-line-height-body-medium: $cnvs-base-line-height-200;
159
165
  $cnvs-sys-font-size-body-small: $cnvs-base-font-size-100;
160
- $cnvs-sys-line-height-heading-small: $cnvs-base-line-height-250;
161
166
  $cnvs-sys-font-size-body-medium: $cnvs-base-font-size-125;
162
- $cnvs-sys-line-height-heading-medium: $cnvs-base-line-height-300;
163
167
  $cnvs-sys-font-size-body-large: $cnvs-base-font-size-150;
164
- $cnvs-sys-line-height-heading-large: $cnvs-base-line-height-350;
165
168
  $cnvs-sys-font-size-heading-small: $cnvs-base-font-size-200;
166
- $cnvs-sys-line-height-title-small: $cnvs-base-line-height-400;
167
169
  $cnvs-sys-font-size-heading-medium: $cnvs-base-font-size-250;
168
- $cnvs-sys-line-height-title-medium: $cnvs-base-line-height-500;
169
170
  $cnvs-sys-font-size-heading-large: $cnvs-base-font-size-300;
170
- $cnvs-sys-line-height-title-large: $cnvs-base-line-height-600;
171
171
  $cnvs-sys-font-size-title-small: $cnvs-base-font-size-400;
172
172
  $cnvs-sys-font-size-title-medium: $cnvs-base-font-size-500;
173
173
  $cnvs-sys-font-size-title-large: $cnvs-base-font-size-600;