@aurodesignsystem/design-tokens 4.0.0 → 4.1.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 (51) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/README.md +20 -26
  3. package/dist/tokens/CSSCustomProperties.css +1 -1
  4. package/dist/tokens/CSSSizeCustomProperties.css +1 -1
  5. package/dist/tokens/JSData--color.js +1 -1
  6. package/dist/tokens/JSObject--allTokens.js +1 -1
  7. package/dist/tokens/JSObject--deprecated.js +1 -1
  8. package/dist/tokens/JSVariables--color.js +1 -1
  9. package/dist/tokens/SCSSVariableMap.scss +1 -1
  10. package/dist/tokens/SCSSVariables.scss +1 -1
  11. package/dist/tokens/SCSSVariablesMapFlat.scss +1 -1
  12. package/dist/tokens/SassCustomProperties.scss +1 -1
  13. package/dist/tokens/SassSizeCustomProperties.scss +1 -1
  14. package/dist/tokens/darkmode/CSSCustomProperties.css +22 -0
  15. package/dist/tokens/darkmode/JSDataColor.js +464 -0
  16. package/dist/tokens/darkmode/JSObject--allDarkTokens.js +464 -0
  17. package/dist/tokens/darkmode/JSVariablesColor.js +20 -0
  18. package/dist/tokens/darkmode/SCSSVariables.scss +19 -0
  19. package/dist/tokens/darkmode/SCSSVariablesMapFlat.scss +25 -0
  20. package/dist/tokens/darkmode/SassCustomProperties.scss +22 -0
  21. package/package.json +1 -1
  22. package/src/color-darkmode/base.json +6 -126
  23. package/src/color-darkmode/border.json +2 -40
  24. package/src/color-darkmode/icon.json +2 -20
  25. package/src/color-darkmode/text.json +5 -10
  26. package/src/color-darkmode/tier.json +2 -26
  27. package/dist/tokens/CSSCustomProperties--darkmode.css +0 -302
  28. package/dist/tokens/CSSCustomPropertiesColorRGB--darkmode.css +0 -155
  29. package/dist/tokens/CSSCustomPropertiesColorRGB.css +0 -168
  30. package/dist/tokens/CSSOpacityProperties--darkmode.scss +0 -10
  31. package/dist/tokens/CSSOpacityProperties.scss +0 -10
  32. package/dist/tokens/CSSSizeCustomProperties--darkmode.css +0 -20
  33. package/dist/tokens/CSSVariables--darkmode.css +0 -302
  34. package/dist/tokens/CSSVariablesMapFlat--darkmode.css +0 -368
  35. package/dist/tokens/JSData--darkmodeColor.js +0 -3254
  36. package/dist/tokens/JSObject--allDarkTokens.js +0 -7087
  37. package/dist/tokens/JSObject--deprecatedDark.js +0 -675
  38. package/dist/tokens/JSVariables--darkmodeColor.js +0 -153
  39. package/dist/tokens/SCSSOpacityVariables--darkmode.scss +0 -7
  40. package/dist/tokens/SCSSOpacityVariables.scss +0 -7
  41. package/dist/tokens/SCSSVariableMap--darkmode.scss +0 -37
  42. package/dist/tokens/SCSSVariables--darkmode.scss +0 -299
  43. package/dist/tokens/SCSSVariablesMapFlat--darkmode.scss +0 -368
  44. package/dist/tokens/SassCustomProperties--darkmode.scss +0 -302
  45. package/dist/tokens/SassCustomPropertiesColorRGB--darkmode.scss +0 -155
  46. package/dist/tokens/SassCustomPropertiesColorRGB.scss +0 -168
  47. package/dist/tokens/SassSizeCustomProperties--darkmode.scss +0 -20
  48. package/src/color-darkmode/alert.json +0 -56
  49. package/src/color-darkmode/background.json +0 -38
  50. package/src/color-darkmode/brand.json +0 -530
  51. package/src/color-darkmode/ui.json +0 -57
package/dist/tokens/CSSCustomPropertiesColorRGB--darkmode.css DELETED
@@ -1,155 +0,0 @@
1
- /**
2
- * Do not edit directly
3
- * Generated on Wed, 13 Sep 2023 17:26:39 GMT
4
- */
5
-
6
- :root {
7
- --ds-rgb-color-alert-notification-default: 0, 207, 240;
8
- --ds-rgb-color-alert-warning-default: 222, 117, 12;
9
- --ds-rgb-color-alert-error-default: 255, 153, 155;
10
- --ds-rgb-color-alert-success-default: 105, 207, 150;
11
- --ds-rgb-color-alert-advisory-default: 255, 240, 205;
12
- --ds-rgb-color-background-lightest: 255, 255, 255;
13
- --ds-rgb-color-background-lighter: 248, 248, 248;
14
- --ds-rgb-color-background-darker: 1, 66, 106;
15
- --ds-rgb-color-background-darkest: 0, 39, 74;
16
- --ds-rgb-color-base-white: 255, 255, 255; /*
17
- // Base value for token support; should not use in code! */
18
- --ds-rgb-color-base-white-opacity-40: 255, 255, 255, 0.4; /* white @ 40% */
19
- --ds-rgb-color-base-black: 0, 0, 0; /*
20
- // Base value for token support; should not use in code! */
21
- --ds-rgb-color-base-black-opacity-15: 0, 0, 0, 0.15; /* black @ 15% */
22
- --ds-rgb-color-state-error-100: 255, 153, 155;
23
- --ds-rgb-color-state-error-500: 223, 11, 55;
24
- --ds-rgb-color-state-success-100: 105, 207, 150;
25
- --ds-rgb-color-state-success-500: 0, 128, 93;
26
- --ds-rgb-color-state-warning-500: 222, 117, 12;
27
- --ds-rgb-color-border-primary-default: 159, 171, 187;
28
- --ds-rgb-color-border-active-default: 0, 207, 240;
29
- --ds-rgb-color-border-error-default: 255, 153, 155;
30
- --ds-rgb-color-border-disabled-default: 219, 219, 219;
31
- --ds-rgb-color-border-focus-default: 255, 255, 255;
32
- --ds-rgb-color-border-divider-default: 255, 255, 255;
33
- --ds-rgb-color-brand-midnight-100: 193, 218, 240; /*
34
- // Please consider descriptive token prior to using brand token */
35
- --ds-rgb-color-brand-midnight-200: 86, 158, 215; /*
36
- // Please consider descriptive token prior to using brand token */
37
- --ds-rgb-color-brand-midnight-300: 21, 111, 173; /*
38
- // Please consider descriptive token prior to using brand token */
39
- --ds-rgb-color-brand-midnight-400: 1, 66, 106; /*
40
- // Please consider descriptive token prior to using brand token */
41
- --ds-rgb-color-brand-midnight-500: 0, 39, 74; /*
42
- // Please consider descriptive token prior to using brand token */
43
- --ds-rgb-color-brand-atlas-100: 205, 230, 255; /*
44
- // Please consider descriptive token prior to using brand token */
45
- --ds-rgb-color-brand-atlas-200: 107, 183, 251; /*
46
- // Please consider descriptive token prior to using brand token */
47
- --ds-rgb-color-brand-atlas-300: 36, 146, 235; /*
48
- // Please consider descriptive token prior to using brand token */
49
- --ds-rgb-color-brand-atlas-400: 0, 116, 200; /*
50
- // Please consider descriptive token prior to using brand token */
51
- --ds-rgb-color-brand-atlas-500: 5, 70, 135; /*
52
- // Please consider descriptive token prior to using brand token */
53
- --ds-rgb-color-brand-breeze-100: 192, 247, 255; /*
54
- // Please consider descriptive token prior to using brand token */
55
- --ds-rgb-color-brand-breeze-200: 93, 227, 247; /*
56
- // Please consider descriptive token prior to using brand token */
57
- --ds-rgb-color-brand-breeze-300: 0, 207, 240; /*
58
- // Please consider descriptive token prior to using brand token */
59
- --ds-rgb-color-brand-breeze-400: 9, 157, 197; /*
60
- // Please consider descriptive token prior to using brand token */
61
- --ds-rgb-color-brand-breeze-500: 11, 85, 117; /*
62
- // Please consider descriptive token prior to using brand token */
63
- --ds-rgb-color-brand-tropical-100: 226, 255, 205; /*
64
- // Please consider descriptive token prior to using brand token */
65
- --ds-rgb-color-brand-tropical-200: 208, 251, 166; /*
66
- // Please consider descriptive token prior to using brand token */
67
- --ds-rgb-color-brand-tropical-300: 192, 229, 133; /*
68
- // Please consider descriptive token prior to using brand token */
69
- --ds-rgb-color-brand-tropical-400: 145, 190, 98; /*
70
- // Please consider descriptive token prior to using brand token */
71
- --ds-rgb-color-brand-tropical-500: 94, 135, 65; /*
72
- // Please consider descriptive token prior to using brand token */
73
- --ds-rgb-color-brand-alpine-100: 188, 170, 230; /*
74
- // Please consider descriptive token prior to using brand token */
75
- --ds-rgb-color-brand-alpine-200: 158, 115, 234; /*
76
- // Please consider descriptive token prior to using brand token */
77
- --ds-rgb-color-brand-alpine-300: 132, 57, 239; /*
78
- // Please consider descriptive token prior to using brand token */
79
- --ds-rgb-color-brand-alpine-400: 99, 29, 184; /*
80
- // Please consider descriptive token prior to using brand token */
81
- --ds-rgb-color-brand-alpine-500: 57, 17, 92; /*
82
- // Please consider descriptive token prior to using brand token */
83
- --ds-rgb-color-brand-flamingo-100: 255, 235, 238; /*
84
- // Please consider descriptive token prior to using brand token */
85
- --ds-rgb-color-brand-flamingo-200: 255, 192, 202; /*
86
- // Please consider descriptive token prior to using brand token */
87
- --ds-rgb-color-brand-flamingo-300: 255, 148, 167; /*
88
- // Please consider descriptive token prior to using brand token */
89
- --ds-rgb-color-brand-flamingo-400: 246, 91, 123; /*
90
- // Please consider descriptive token prior to using brand token */
91
- --ds-rgb-color-brand-flamingo-500: 184, 43, 71; /*
92
- // Please consider descriptive token prior to using brand token */
93
- --ds-rgb-color-brand-canyon-100: 255, 202, 182; /*
94
- // Please consider descriptive token prior to using brand token */
95
- --ds-rgb-color-brand-canyon-200: 249, 149, 116; /*
96
- // Please consider descriptive token prior to using brand token */
97
- --ds-rgb-color-brand-canyon-300: 242, 97, 53; /*
98
- // Please consider descriptive token prior to using brand token */
99
- --ds-rgb-color-brand-canyon-400: 222, 62, 9; /*
100
- // Please consider descriptive token prior to using brand token */
101
- --ds-rgb-color-brand-canyon-500: 184, 51, 2; /*
102
- // Please consider descriptive token prior to using brand token */
103
- --ds-rgb-color-brand-goldcoast-100: 255, 240, 205; /*
104
- // Please consider descriptive token prior to using brand token */
105
- --ds-rgb-color-brand-goldcoast-200: 255, 219, 103; /*
106
- // Please consider descriptive token prior to using brand token */
107
- --ds-rgb-color-brand-goldcoast-300: 255, 210, 0; /*
108
- // Please consider descriptive token prior to using brand token */
109
- --ds-rgb-color-brand-goldcoast-400: 229, 173, 7; /*
110
- // Please consider descriptive token prior to using brand token */
111
- --ds-rgb-color-brand-goldcoast-500: 184, 134, 36; /*
112
- // Please consider descriptive token prior to using brand token */
113
- --ds-rgb-color-brand-neutral-100: 249, 251, 252; /*
114
- // Please consider descriptive token prior to using brand token */
115
- --ds-rgb-color-brand-neutral-200: 226, 234, 239; /*
116
- // Please consider descriptive token prior to using brand token */
117
- --ds-rgb-color-brand-neutral-300: 203, 216, 226; /*
118
- // Please consider descriptive token prior to using brand token */
119
- --ds-rgb-color-brand-neutral-400: 159, 171, 187; /*
120
- // Please consider descriptive token prior to using brand token */
121
- --ds-rgb-color-brand-neutral-500: 98, 107, 121; /*
122
- // Please consider descriptive token prior to using brand token */
123
- --ds-rgb-color-brand-gray-100: 248, 248, 248;
124
- --ds-rgb-color-brand-gray-200: 219, 219, 219;
125
- --ds-rgb-color-brand-gray-300: 178, 178, 178;
126
- --ds-rgb-color-brand-gray-400: 118, 118, 118;
127
- --ds-rgb-color-brand-gray-500: 34, 34, 34;
128
- --ds-rgb-color-brand-goldgray-100: 197, 193, 191;
129
- --ds-rgb-color-brand-goldgray-200: 114, 110, 108;
130
- --ds-rgb-color-brand-gold-100: 204, 188, 148;
131
- --ds-rgb-color-brand-gold-200: 127, 104, 46;
132
- --ds-rgb-color-brand-emerald: 19, 145, 66;
133
- --ds-rgb-color-brand-sapphire: 1, 93, 170;
134
- --ds-rgb-color-brand-ruby: 164, 29, 74;
135
- --ds-rgb-color-icon-primary-default: 159, 171, 187;
136
- --ds-rgb-color-icon-emphasis-default: 255, 255, 255;
137
- --ds-rgb-color-icon-accent-default: 0, 207, 240;
138
- --ds-rgb-color-icon-disabled-default: 255, 255, 255, 0.4;
139
- --ds-rgb-color-text-primary-default: 255, 255, 255;
140
- --ds-rgb-color-text-secondary-default: 159, 171, 187;
141
- --ds-rgb-color-text-link-default: 0, 207, 240;
142
- --ds-rgb-color-text-error-default: 255, 153, 155;
143
- --ds-rgb-color-text-disabled-default: 219, 219, 219;
144
- --ds-rgb-color-text-emphasis-default: 193, 218, 240;
145
- --ds-rgb-color-tier-alaska-mvp-default: 197, 193, 191;
146
- --ds-rgb-color-tier-alaska-mvpgold-default: 204, 188, 148;
147
- --ds-rgb-color-tier-oneworld-emerald: 19, 145, 66;
148
- --ds-rgb-color-tier-oneworld-sapphire: 1, 93, 170;
149
- --ds-rgb-color-tier-oneworld-ruby: 164, 29, 74;
150
- --ds-rgb-color-ui-default-default: 0, 207, 240;
151
- --ds-rgb-color-ui-hover-default: 93, 227, 247;
152
- --ds-rgb-color-ui-active-default: 93, 227, 247;
153
- --ds-rgb-color-ui-disabled-default: 0, 207, 240, 0.3;
154
- --ds-rgb-color-ui-bkg-hover-default: 93, 227, 247, 0.1;
155
- }
package/dist/tokens/CSSCustomPropertiesColorRGB.css DELETED
@@ -1,168 +0,0 @@
1
- /**
2
- * Do not edit directly
3
- * Generated on Wed, 13 Sep 2023 17:26:39 GMT
4
- */
5
-
6
- :root {
7
- --ds-rgb-color-alert-notification-default: 0, 116, 200;
8
- --ds-rgb-color-alert-warning-default: 222, 117, 12;
9
- --ds-rgb-color-alert-error-default: 223, 11, 55;
10
- --ds-rgb-color-alert-success-default: 0, 128, 93;
11
- --ds-rgb-color-alert-advisory-default: 255, 240, 205;
12
- --ds-rgb-color-alert-bkg-success-default: 221, 246, 232;
13
- --ds-rgb-color-alert-bkg-error-default: 255, 237, 241;
14
- --ds-rgb-color-background-lightest: 255, 255, 255;
15
- --ds-rgb-color-background-lighter: 248, 248, 248;
16
- --ds-rgb-color-background-darker: 1, 66, 106;
17
- --ds-rgb-color-background-darkest: 0, 39, 74;
18
- --ds-rgb-color-base-white: 255, 255, 255; /*
19
- // Base value for token support; should not use in code! */
20
- --ds-rgb-color-base-white-opacity-40: 255, 255, 255, 0.4; /* white @ 40% */
21
- --ds-rgb-color-base-black: 0, 0, 0; /*
22
- // Base value for token support; should not use in code! */
23
- --ds-rgb-color-base-black-opacity-15: 0, 0, 0, 0.15; /* black @ 15% */
24
- --ds-rgb-color-state-error-100: 255, 153, 155;
25
- --ds-rgb-color-state-error-500: 223, 11, 55;
26
- --ds-rgb-color-state-success-100: 105, 207, 150;
27
- --ds-rgb-color-state-success-500: 0, 128, 93;
28
- --ds-rgb-color-state-warning-500: 222, 117, 12;
29
- --ds-rgb-color-border-primary-default: 98, 107, 121;
30
- --ds-rgb-color-border-primary-inverse: 159, 171, 187;
31
- --ds-rgb-color-border-active-default: 0, 116, 200;
32
- --ds-rgb-color-border-error-default: 223, 11, 55;
33
- --ds-rgb-color-border-disabled-default: 219, 219, 219;
34
- --ds-rgb-color-border-focus-default: 34, 34, 34;
35
- --ds-rgb-color-border-divider-default: 0, 0, 0, 0.15;
36
- --ds-rgb-color-border-divider-inverse: 255, 255, 255;
37
- --ds-rgb-color-brand-midnight-100: 193, 218, 240; /*
38
- // Please consider descriptive token prior to using brand token */
39
- --ds-rgb-color-brand-midnight-200: 86, 158, 215; /*
40
- // Please consider descriptive token prior to using brand token */
41
- --ds-rgb-color-brand-midnight-300: 21, 111, 173; /*
42
- // Please consider descriptive token prior to using brand token */
43
- --ds-rgb-color-brand-midnight-400: 1, 66, 106; /*
44
- // Please consider descriptive token prior to using brand token */
45
- --ds-rgb-color-brand-midnight-500: 0, 39, 74; /*
46
- // Please consider descriptive token prior to using brand token */
47
- --ds-rgb-color-brand-atlas-100: 205, 230, 255; /*
48
- // Please consider descriptive token prior to using brand token */
49
- --ds-rgb-color-brand-atlas-200: 107, 183, 251; /*
50
- // Please consider descriptive token prior to using brand token */
51
- --ds-rgb-color-brand-atlas-300: 36, 146, 235; /*
52
- // Please consider descriptive token prior to using brand token */
53
- --ds-rgb-color-brand-atlas-400: 0, 116, 200; /*
54
- // Please consider descriptive token prior to using brand token */
55
- --ds-rgb-color-brand-atlas-500: 5, 70, 135; /*
56
- // Please consider descriptive token prior to using brand token */
57
- --ds-rgb-color-brand-breeze-100: 192, 247, 255; /*
58
- // Please consider descriptive token prior to using brand token */
59
- --ds-rgb-color-brand-breeze-200: 93, 227, 247; /*
60
- // Please consider descriptive token prior to using brand token */
61
- --ds-rgb-color-brand-breeze-300: 0, 207, 240; /*
62
- // Please consider descriptive token prior to using brand token */
63
- --ds-rgb-color-brand-breeze-400: 9, 157, 197; /*
64
- // Please consider descriptive token prior to using brand token */
65
- --ds-rgb-color-brand-breeze-500: 11, 85, 117; /*
66
- // Please consider descriptive token prior to using brand token */
67
- --ds-rgb-color-brand-tropical-100: 226, 255, 205; /*
68
- // Please consider descriptive token prior to using brand token */
69
- --ds-rgb-color-brand-tropical-200: 208, 251, 166; /*
70
- // Please consider descriptive token prior to using brand token */
71
- --ds-rgb-color-brand-tropical-300: 192, 229, 133; /*
72
- // Please consider descriptive token prior to using brand token */
73
- --ds-rgb-color-brand-tropical-400: 145, 190, 98; /*
74
- // Please consider descriptive token prior to using brand token */
75
- --ds-rgb-color-brand-tropical-500: 94, 135, 65; /*
76
- // Please consider descriptive token prior to using brand token */
77
- --ds-rgb-color-brand-alpine-100: 188, 170, 230; /*
78
- // Please consider descriptive token prior to using brand token */
79
- --ds-rgb-color-brand-alpine-200: 158, 115, 234; /*
80
- // Please consider descriptive token prior to using brand token */
81
- --ds-rgb-color-brand-alpine-300: 132, 57, 239; /*
82
- // Please consider descriptive token prior to using brand token */
83
- --ds-rgb-color-brand-alpine-400: 99, 29, 184; /*
84
- // Please consider descriptive token prior to using brand token */
85
- --ds-rgb-color-brand-alpine-500: 57, 17, 92; /*
86
- // Please consider descriptive token prior to using brand token */
87
- --ds-rgb-color-brand-flamingo-100: 255, 235, 238; /*
88
- // Please consider descriptive token prior to using brand token */
89
- --ds-rgb-color-brand-flamingo-200: 255, 192, 202; /*
90
- // Please consider descriptive token prior to using brand token */
91
- --ds-rgb-color-brand-flamingo-300: 255, 148, 167; /*
92
- // Please consider descriptive token prior to using brand token */
93
- --ds-rgb-color-brand-flamingo-400: 246, 91, 123; /*
94
- // Please consider descriptive token prior to using brand token */
95
- --ds-rgb-color-brand-flamingo-500: 184, 43, 71; /*
96
- // Please consider descriptive token prior to using brand token */
97
- --ds-rgb-color-brand-canyon-100: 255, 202, 182; /*
98
- // Please consider descriptive token prior to using brand token */
99
- --ds-rgb-color-brand-canyon-200: 249, 149, 116; /*
100
- // Please consider descriptive token prior to using brand token */
101
- --ds-rgb-color-brand-canyon-300: 242, 97, 53; /*
102
- // Please consider descriptive token prior to using brand token */
103
- --ds-rgb-color-brand-canyon-400: 222, 62, 9; /*
104
- // Please consider descriptive token prior to using brand token */
105
- --ds-rgb-color-brand-canyon-500: 184, 51, 2; /*
106
- // Please consider descriptive token prior to using brand token */
107
- --ds-rgb-color-brand-goldcoast-100: 255, 240, 205; /*
108
- // Please consider descriptive token prior to using brand token */
109
- --ds-rgb-color-brand-goldcoast-200: 255, 219, 103; /*
110
- // Please consider descriptive token prior to using brand token */
111
- --ds-rgb-color-brand-goldcoast-300: 255, 210, 0; /*
112
- // Please consider descriptive token prior to using brand token */
113
- --ds-rgb-color-brand-goldcoast-400: 229, 173, 7; /*
114
- // Please consider descriptive token prior to using brand token */
115
- --ds-rgb-color-brand-goldcoast-500: 184, 134, 36; /*
116
- // Please consider descriptive token prior to using brand token */
117
- --ds-rgb-color-brand-neutral-100: 249, 251, 252; /*
118
- // Please consider descriptive token prior to using brand token */
119
- --ds-rgb-color-brand-neutral-200: 226, 234, 239; /*
120
- // Please consider descriptive token prior to using brand token */
121
- --ds-rgb-color-brand-neutral-300: 203, 216, 226; /*
122
- // Please consider descriptive token prior to using brand token */
123
- --ds-rgb-color-brand-neutral-400: 159, 171, 187; /*
124
- // Please consider descriptive token prior to using brand token */
125
- --ds-rgb-color-brand-neutral-500: 98, 107, 121; /*
126
- // Please consider descriptive token prior to using brand token */
127
- --ds-rgb-color-brand-gray-100: 248, 248, 248;
128
- --ds-rgb-color-brand-gray-200: 219, 219, 219;
129
- --ds-rgb-color-brand-gray-300: 178, 178, 178;
130
- --ds-rgb-color-brand-gray-400: 118, 118, 118;
131
- --ds-rgb-color-brand-gray-500: 34, 34, 34;
132
- --ds-rgb-color-brand-goldgray-100: 197, 193, 191;
133
- --ds-rgb-color-brand-goldgray-200: 114, 110, 108;
134
- --ds-rgb-color-brand-gold-100: 204, 188, 148;
135
- --ds-rgb-color-brand-gold-200: 127, 104, 46;
136
- --ds-rgb-color-brand-emerald: 19, 145, 66;
137
- --ds-rgb-color-brand-sapphire: 1, 93, 170;
138
- --ds-rgb-color-brand-ruby: 164, 29, 74;
139
- --ds-rgb-color-icon-primary-default: 98, 107, 121;
140
- --ds-rgb-color-icon-primary-inverse: 159, 171, 187;
141
- --ds-rgb-color-icon-emphasis-default: 34, 34, 34;
142
- --ds-rgb-color-icon-emphasis-inverse: 255, 255, 255;
143
- --ds-rgb-color-icon-accent-default: 0, 116, 200;
144
- --ds-rgb-color-icon-disabled-default: 0, 0, 0, 0.15;
145
- --ds-rgb-color-text-primary-default: 34, 34, 34;
146
- --ds-rgb-color-text-primary-inverse: 255, 255, 255;
147
- --ds-rgb-color-text-secondary-default: 98, 107, 121;
148
- --ds-rgb-color-text-secondary-inverse: 159, 171, 187;
149
- --ds-rgb-color-text-link-default: 0, 116, 200;
150
- --ds-rgb-color-text-link-inverse: 0, 207, 240;
151
- --ds-rgb-color-text-error-default: 223, 11, 55;
152
- --ds-rgb-color-text-error-inverse: 255, 153, 155;
153
- --ds-rgb-color-text-disabled-default: 219, 219, 219;
154
- --ds-rgb-color-text-emphasis-default: 1, 66, 106;
155
- --ds-rgb-color-text-emphasis-inverse: 193, 218, 240;
156
- --ds-rgb-color-tier-alaska-mvp-default: 114, 110, 108;
157
- --ds-rgb-color-tier-alaska-mvp-inverse: 197, 193, 191;
158
- --ds-rgb-color-tier-alaska-mvpgold-default: 127, 104, 46;
159
- --ds-rgb-color-tier-alaska-mvpgold-inverse: 204, 188, 148;
160
- --ds-rgb-color-tier-oneworld-emerald: 19, 145, 66;
161
- --ds-rgb-color-tier-oneworld-sapphire: 1, 93, 170;
162
- --ds-rgb-color-tier-oneworld-ruby: 164, 29, 74;
163
- --ds-rgb-color-ui-default-default: 0, 116, 200;
164
- --ds-rgb-color-ui-hover-default: 5, 70, 135;
165
- --ds-rgb-color-ui-active-default: 5, 70, 135;
166
- --ds-rgb-color-ui-disabled-default: 0, 116, 200, 0.2;
167
- --ds-rgb-color-ui-bkg-hover-default: 0, 0, 0, 0.06;
168
- }
package/dist/tokens/CSSOpacityProperties--darkmode.scss DELETED
@@ -1,10 +0,0 @@
1
- /**
2
- * Do not edit directly
3
- * Generated on Wed, 13 Sep 2023 17:26:39 GMT
4
- */
5
-
6
- :root {
7
- --ds-color-base-white-opacity-40: rgba(255, 255, 255, 0.4); /* white @ 40% */
8
- --ds-color-base-black-opacity-15: rgba(0, 0, 0, 0.15); /* black @ 15% */
9
- --ds-color-brand-atlas-400-opacity-20: rgba(0, 116, 200, 0.2); /* color brand atlas 400 @ 20% */
10
- }
package/dist/tokens/CSSOpacityProperties.scss DELETED
@@ -1,10 +0,0 @@
1
- /**
2
- * Do not edit directly
3
- * Generated on Wed, 13 Sep 2023 17:26:39 GMT
4
- */
5
-
6
- :root {
7
- --ds-color-base-white-opacity-40: rgba(255, 255, 255, 0.4); /* white @ 40% */
8
- --ds-color-base-black-opacity-15: rgba(0, 0, 0, 0.15); /* black @ 15% */
9
- --ds-color-brand-atlas-400-opacity-20: rgba(0, 116, 200, 0.2); /* color brand atlas 400 @ 20% */
10
- }
package/dist/tokens/CSSSizeCustomProperties--darkmode.css DELETED
@@ -1,20 +0,0 @@
1
- /**
2
- * Do not edit directly
3
- * Generated on Wed, 13 Sep 2023 17:26:40 GMT
4
- */
5
-
6
- :root {
7
- --ds-size-25: 0.125rem; /* 2px */
8
- --ds-size-50: 0.25rem; /* 4px */
9
- --ds-size-100: 0.5rem; /* 8px */
10
- --ds-size-150: 0.75rem; /* 12px */
11
- --ds-size-200: 1rem; /* 16px */
12
- --ds-size-300: 1.5rem; /* 24px */
13
- --ds-size-400: 2rem; /* 32px */
14
- --ds-size-500: 2.5rem; /* 40px */
15
- --ds-size-600: 3rem; /* 48px */
16
- --ds-size-700: 3.5rem; /* 56px */
17
- --ds-size-800: 4rem; /* 64px */
18
- --ds-size-900: 4.5rem; /* 72px */
19
- --ds-size-1000: 5rem; /* 80px */
20
- }
package/dist/tokens/CSSVariables--darkmode.css DELETED
@@ -1,302 +0,0 @@
1
- /**
2
- * Do not edit directly
3
- * Generated on Wed, 13 Sep 2023 17:26:39 GMT
4
- */
5
-
6
- :root {
7
- --ds-asset-font-circular-family-name: "AS Circular";
8
- --ds-asset-font-circular-filename: "ASCircularWeb";
9
- --ds-asset-font-circular-weight-light: "-Light";
10
- --ds-asset-font-circular-weight-medium: "-Medium";
11
- --ds-asset-font-circular-weight-book: "-Book";
12
- --ds-border-radius: 0.375rem;
13
- --ds-size-25: 0.125rem; /* 2px */
14
- --ds-size-50: 0.25rem; /* 4px */
15
- --ds-size-100: 0.5rem; /* 8px */
16
- --ds-size-150: 0.75rem; /* 12px */
17
- --ds-size-200: 1rem; /* 16px */
18
- --ds-size-300: 1.5rem; /* 24px */
19
- --ds-size-400: 2rem; /* 32px */
20
- --ds-size-500: 2.5rem; /* 40px */
21
- --ds-size-600: 3rem; /* 48px */
22
- --ds-size-700: 3.5rem; /* 56px */
23
- --ds-size-800: 4rem; /* 64px */
24
- --ds-size-900: 4.5rem; /* 72px */
25
- --ds-size-1000: 5rem; /* 80px */
26
- --ds-unitless-scale-20: 0.25;
27
- --ds-unitless-scale-50: 0.5;
28
- --ds-unitless-scale-100: 1;
29
- --ds-unitless-scale-140: 1.4;
30
- --ds-unitless-scale-150: 1.5;
31
- --ds-unitless-scale-200: 2;
32
- --ds-unitless-scale-300: 3;
33
- --ds-unitless-scale-350: 3.5;
34
- --ds-animation-default-property: all;
35
- --ds-animation-default-duration: 0.3s;
36
- --ds-animation-default-timing: ease-out;
37
- --ds-depth-overlay: 200;
38
- --ds-depth-modal: 400;
39
- --ds-depth-tooltip: 300;
40
- --ds-elevation-100: 0px 0px 5px rgba(0, 0, 0, 0.15); /* for the least amount of emphasis */
41
- --ds-elevation-200: 0px 0px 10px rgba(0, 0, 0, 0.15); /* for more emphasis than low elevation */
42
- --ds-elevation-300: 0px 0px 15px rgba(0, 0, 0, 0.2); /* for maximum emphasis or differentiation */
43
- --ds-grid-breakpoint-xs: 320px;
44
- --ds-grid-breakpoint-sm: 576px;
45
- --ds-grid-breakpoint-md: 768px;
46
- --ds-grid-breakpoint-lg: 1024px;
47
- --ds-grid-breakpoint-xl: 1232px;
48
- --ds-grid-column-xs: 6;
49
- --ds-grid-column-sm: 12;
50
- --ds-grid-column-md: 12;
51
- --ds-grid-column-lg: 12;
52
- --ds-grid-column-xl: 12;
53
- --ds-grid-gutter-xs: 0.5rem;
54
- --ds-grid-gutter-sm: 1rem;
55
- --ds-grid-gutter-md: 1.5rem;
56
- --ds-grid-gutter-lg: 1.5rem;
57
- --ds-grid-gutter-xl: 2rem;
58
- --ds-grid-margin-xs: 1rem;
59
- --ds-grid-margin-sm: 1rem;
60
- --ds-grid-margin-md: 1.5rem;
61
- --ds-grid-margin-lg: 2rem;
62
- --ds-grid-margin-xl: 2rem;
63
- --ds-font-family-default: 'AS Circular', Helvetica Neue, Arial, sans-serif;
64
- --ds-font-family-mono: Menlo, Monaco, Consolas, 'Courier New', monospace;
65
- --ds-text-heading-300-weight: 300;
66
- --ds-text-heading-300-px: 18px;
67
- --ds-text-heading-300-size: 1.125rem;
68
- --ds-text-heading-300-height: 1.625rem;
69
- --ds-text-heading-300-height-px: 26px;
70
- --ds-text-heading-400-weight: 300;
71
- --ds-text-heading-400-px: 20px;
72
- --ds-text-heading-400-size: 1.25rem;
73
- --ds-text-heading-400-height: 1.625rem;
74
- --ds-text-heading-400-height-px: 26px;
75
- --ds-text-heading-500-weight: 300;
76
- --ds-text-heading-500-px-breakpoint-sm: 22px;
77
- --ds-text-heading-500-px-breakpoint-md: 24px;
78
- --ds-text-heading-500-px-breakpoint-lg: 24px;
79
- --ds-text-heading-500-size-breakpoint-sm: 1.375rem;
80
- --ds-text-heading-500-size-breakpoint-md: 1.5rem;
81
- --ds-text-heading-500-size-breakpoint-lg: 1.5rem;
82
- --ds-text-heading-500-height-breakpoint-sm: 1.625rem;
83
- --ds-text-heading-500-height-breakpoint-px-sm: 26px;
84
- --ds-text-heading-500-height-breakpoint-md: 1.875rem;
85
- --ds-text-heading-500-height-breakpoint-px-md: 30px;
86
- --ds-text-heading-500-height-breakpoint-lg: 2rem;
87
- --ds-text-heading-500-height-breakpoint-px-lg: 32px;
88
- --ds-text-heading-600-weight: 300;
89
- --ds-text-heading-600-px-breakpoint-sm: 26px;
90
- --ds-text-heading-600-px-breakpoint-md: 28px;
91
- --ds-text-heading-600-px-breakpoint-lg: 28px;
92
- --ds-text-heading-600-size-breakpoint-sm: 1.625rem;
93
- --ds-text-heading-600-size-breakpoint-md: 1.75rem;
94
- --ds-text-heading-600-size-breakpoint-lg: 1.75rem;
95
- --ds-text-heading-600-height-breakpoint-sm: 1.875rem;
96
- --ds-text-heading-600-height-breakpoint-px-sm: 30px;
97
- --ds-text-heading-600-height-breakpoint-md: 2.125rem;
98
- --ds-text-heading-600-height-breakpoint-px-md: 34px;
99
- --ds-text-heading-600-height-breakpoint-lg: 2.25rem;
100
- --ds-text-heading-600-height-breakpoint-px-lg: 36px;
101
- --ds-text-heading-700-weight: 500;
102
- --ds-text-heading-700-px-breakpoint-sm: 28px;
103
- --ds-text-heading-700-px-breakpoint-md: 32px;
104
- --ds-text-heading-700-px-breakpoint-lg: 36px;
105
- --ds-text-heading-700-size-breakpoint-sm: 1.75rem;
106
- --ds-text-heading-700-size-breakpoint-md: 2rem;
107
- --ds-text-heading-700-size-breakpoint-lg: 2.25rem;
108
- --ds-text-heading-700-height-breakpoint-sm: 2.125rem;
109
- --ds-text-heading-700-height-breakpoint-px-sm: 34px;
110
- --ds-text-heading-700-height-breakpoint-md: 2.375rem;
111
- --ds-text-heading-700-height-breakpoint-px-md: 38px;
112
- --ds-text-heading-700-height-breakpoint-lg: 2.75rem;
113
- --ds-text-heading-700-height-breakpoint-px-lg: 44px;
114
- --ds-text-heading-800-weight: 500;
115
- --ds-text-heading-800-px-breakpoint-sm: 32px;
116
- --ds-text-heading-800-px-breakpoint-md: 36px;
117
- --ds-text-heading-800-px-breakpoint-lg: 40px;
118
- --ds-text-heading-800-size-breakpoint-sm: 2rem;
119
- --ds-text-heading-800-size-breakpoint-md: 2.25rem;
120
- --ds-text-heading-800-size-breakpoint-lg: 2.5rem;
121
- --ds-text-heading-800-height-breakpoint-sm: 2.375rem;
122
- --ds-text-heading-800-height-breakpoint-px-sm: 38px;
123
- --ds-text-heading-800-height-breakpoint-md: 2.625rem;
124
- --ds-text-heading-800-height-breakpoint-px-md: 42px;
125
- --ds-text-heading-800-height-breakpoint-lg: 3rem;
126
- --ds-text-heading-800-height-breakpoint-px-lg: 48px;
127
- --ds-text-heading-default-weight: 500;
128
- --ds-text-heading-default-margin: 0;
129
- --ds-text-heading-default-spacing: -0.2px;
130
- --ds-text-heading-medium-weight: 300;
131
- --ds-text-heading-display-weight: 100;
132
- --ds-text-heading-display-px-breakpoint-sm: 44px;
133
- --ds-text-heading-display-px-breakpoint-md: 48px;
134
- --ds-text-heading-display-px-breakpoint-lg: 56px;
135
- --ds-text-heading-display-size-breakpoint-sm: 2.75rem;
136
- --ds-text-heading-display-size-breakpoint-md: 3rem;
137
- --ds-text-heading-display-size-breakpoint-lg: 3.5rem;
138
- --ds-text-heading-display-height-breakpoint-sm: 3.375rem;
139
- --ds-text-heading-display-height-breakpoint-px-sm: 54px;
140
- --ds-text-heading-display-height-breakpoint-md: 3.75rem;
141
- --ds-text-heading-display-height-breakpoint-px-md: 60px;
142
- --ds-text-heading-display-height-breakpoint-lg: 4.25rem;
143
- --ds-text-heading-display-height-breakpoint-px-lg: 68px;
144
- --ds-text-body-default-weight: 500;
145
- --ds-text-body-size-xxs: 0.625rem;
146
- --ds-text-body-size-xs: 0.75rem;
147
- --ds-text-body-size-sm: 0.875rem;
148
- --ds-text-body-size-default: 1rem;
149
- --ds-text-body-size-lg: 1.125rem;
150
- --ds-text-body-height-xs: 1rem;
151
- --ds-text-body-height-sm: 1.25rem;
152
- --ds-text-body-height-default: 1.5rem;
153
- --ds-text-body-height-lg: 1.625rem;
154
- --ds-color-alert-notification-default: #00cff0;
155
- --ds-color-alert-warning-default: #de750c;
156
- --ds-color-alert-error-default: #ff999b;
157
- --ds-color-alert-success-default: #69cf96;
158
- --ds-color-alert-advisory-default: #fff0cd;
159
- --ds-color-background-lightest: #ffffff;
160
- --ds-color-background-lighter: #f8f8f8;
161
- --ds-color-background-darker: #01426a;
162
- --ds-color-background-darkest: #00274a;
163
- --ds-color-base-white: #ffffff; /*
164
- // Base value for token support; should not use in code! */
165
- --ds-color-base-white-opacity-40: rgba(255, 255, 255, 0.4); /* white @ 40% */
166
- --ds-color-base-black: #000000; /*
167
- // Base value for token support; should not use in code! */
168
- --ds-color-base-black-opacity-15: rgba(0, 0, 0, 0.15); /* black @ 15% */
169
- --ds-color-state-error-100: #ff999b;
170
- --ds-color-state-error-500: #df0b37;
171
- --ds-color-state-success-100: #69cf96;
172
- --ds-color-state-success-500: #00805d;
173
- --ds-color-state-warning-500: #de750c;
174
- --ds-color-border-primary-default: #9fabbb;
175
- --ds-color-border-active-default: #00cff0;
176
- --ds-color-border-error-default: #ff999b;
177
- --ds-color-border-disabled-default: #dbdbdb;
178
- --ds-color-border-focus-default: #ffffff;
179
- --ds-color-border-divider-default: #ffffff;
180
- --ds-color-brand-midnight-100: #c1daf0; /*
181
- // Please consider descriptive token prior to using brand token */
182
- --ds-color-brand-midnight-200: #569ed7; /*
183
- // Please consider descriptive token prior to using brand token */
184
- --ds-color-brand-midnight-300: #156fad; /*
185
- // Please consider descriptive token prior to using brand token */
186
- --ds-color-brand-midnight-400: #01426a; /*
187
- // Please consider descriptive token prior to using brand token */
188
- --ds-color-brand-midnight-500: #00274a; /*
189
- // Please consider descriptive token prior to using brand token */
190
- --ds-color-brand-atlas-100: #cde6ff; /*
191
- // Please consider descriptive token prior to using brand token */
192
- --ds-color-brand-atlas-200: #6bb7fb; /*
193
- // Please consider descriptive token prior to using brand token */
194
- --ds-color-brand-atlas-300: #2492eb; /*
195
- // Please consider descriptive token prior to using brand token */
196
- --ds-color-brand-atlas-400: #0074c8; /*
197
- // Please consider descriptive token prior to using brand token */
198
- --ds-color-brand-atlas-500: #054687; /*
199
- // Please consider descriptive token prior to using brand token */
200
- --ds-color-brand-breeze-100: #c0f7ff; /*
201
- // Please consider descriptive token prior to using brand token */
202
- --ds-color-brand-breeze-200: #5de3f7; /*
203
- // Please consider descriptive token prior to using brand token */
204
- --ds-color-brand-breeze-300: #00cff0; /*
205
- // Please consider descriptive token prior to using brand token */
206
- --ds-color-brand-breeze-400: #099dc5; /*
207
- // Please consider descriptive token prior to using brand token */
208
- --ds-color-brand-breeze-500: #0b5575; /*
209
- // Please consider descriptive token prior to using brand token */
210
- --ds-color-brand-tropical-100: #e2ffcd; /*
211
- // Please consider descriptive token prior to using brand token */
212
- --ds-color-brand-tropical-200: #d0fba6; /*
213
- // Please consider descriptive token prior to using brand token */
214
- --ds-color-brand-tropical-300: #c0e585; /*
215
- // Please consider descriptive token prior to using brand token */
216
- --ds-color-brand-tropical-400: #91be62; /*
217
- // Please consider descriptive token prior to using brand token */
218
- --ds-color-brand-tropical-500: #5e8741; /*
219
- // Please consider descriptive token prior to using brand token */
220
- --ds-color-brand-alpine-100: #bcaae6; /*
221
- // Please consider descriptive token prior to using brand token */
222
- --ds-color-brand-alpine-200: #9e73ea; /*
223
- // Please consider descriptive token prior to using brand token */
224
- --ds-color-brand-alpine-300: #8439ef; /*
225
- // Please consider descriptive token prior to using brand token */
226
- --ds-color-brand-alpine-400: #631db8; /*
227
- // Please consider descriptive token prior to using brand token */
228
- --ds-color-brand-alpine-500: #39115c; /*
229
- // Please consider descriptive token prior to using brand token */
230
- --ds-color-brand-flamingo-100: #ffebee; /*
231
- // Please consider descriptive token prior to using brand token */
232
- --ds-color-brand-flamingo-200: #ffc0ca; /*
233
- // Please consider descriptive token prior to using brand token */
234
- --ds-color-brand-flamingo-300: #ff94a7; /*
235
- // Please consider descriptive token prior to using brand token */
236
- --ds-color-brand-flamingo-400: #f65b7b; /*
237
- // Please consider descriptive token prior to using brand token */
238
- --ds-color-brand-flamingo-500: #b82b47; /*
239
- // Please consider descriptive token prior to using brand token */
240
- --ds-color-brand-canyon-100: #ffcab6; /*
241
- // Please consider descriptive token prior to using brand token */
242
- --ds-color-brand-canyon-200: #f99574; /*
243
- // Please consider descriptive token prior to using brand token */
244
- --ds-color-brand-canyon-300: #f26135; /*
245
- // Please consider descriptive token prior to using brand token */
246
- --ds-color-brand-canyon-400: #de3e09; /*
247
- // Please consider descriptive token prior to using brand token */
248
- --ds-color-brand-canyon-500: #b83302; /*
249
- // Please consider descriptive token prior to using brand token */
250
- --ds-color-brand-goldcoast-100: #fff0cd; /*
251
- // Please consider descriptive token prior to using brand token */
252
- --ds-color-brand-goldcoast-200: #ffdb67; /*
253
- // Please consider descriptive token prior to using brand token */
254
- --ds-color-brand-goldcoast-300: #ffd200; /*
255
- // Please consider descriptive token prior to using brand token */
256
- --ds-color-brand-goldcoast-400: #e5ad07; /*
257
- // Please consider descriptive token prior to using brand token */
258
- --ds-color-brand-goldcoast-500: #b88624; /*
259
- // Please consider descriptive token prior to using brand token */
260
- --ds-color-brand-neutral-100: #f9fbfc; /*
261
- // Please consider descriptive token prior to using brand token */
262
- --ds-color-brand-neutral-200: #e2eaef; /*
263
- // Please consider descriptive token prior to using brand token */
264
- --ds-color-brand-neutral-300: #cbd8e2; /*
265
- // Please consider descriptive token prior to using brand token */
266
- --ds-color-brand-neutral-400: #9fabbb; /*
267
- // Please consider descriptive token prior to using brand token */
268
- --ds-color-brand-neutral-500: #626b79; /*
269
- // Please consider descriptive token prior to using brand token */
270
- --ds-color-brand-gray-100: #f8f8f8;
271
- --ds-color-brand-gray-200: #dbdbdb;
272
- --ds-color-brand-gray-300: #b2b2b2;
273
- --ds-color-brand-gray-400: #767676;
274
- --ds-color-brand-gray-500: #222222;
275
- --ds-color-brand-goldgray-100: #c5c1bf;
276
- --ds-color-brand-goldgray-200: #726e6c;
277
- --ds-color-brand-gold-100: #ccbc94;
278
- --ds-color-brand-gold-200: #7f682e;
279
- --ds-color-brand-emerald: #139142;
280
- --ds-color-brand-sapphire: #015daa;
281
- --ds-color-brand-ruby: #a41d4a;
282
- --ds-color-icon-primary-default: #9fabbb;
283
- --ds-color-icon-emphasis-default: #ffffff;
284
- --ds-color-icon-accent-default: #00cff0;
285
- --ds-color-icon-disabled-default: rgba(255, 255, 255, 0.4);
286
- --ds-color-text-primary-default: #ffffff;
287
- --ds-color-text-secondary-default: #9fabbb;
288
- --ds-color-text-link-default: #00cff0;
289
- --ds-color-text-error-default: #ff999b;
290
- --ds-color-text-disabled-default: #dbdbdb;
291
- --ds-color-text-emphasis-default: #c1daf0;
292
- --ds-color-tier-alaska-mvp-default: #c5c1bf;
293
- --ds-color-tier-alaska-mvpgold-default: #ccbc94;
294
- --ds-color-tier-oneworld-emerald: #139142;
295
- --ds-color-tier-oneworld-sapphire: #015daa;
296
- --ds-color-tier-oneworld-ruby: #a41d4a;
297
- --ds-color-ui-default-default: #00cff0;
298
- --ds-color-ui-hover-default: #5de3f7;
299
- --ds-color-ui-active-default: #5de3f7;
300
- --ds-color-ui-disabled-default: rgba(0, 207, 240, 0.3);
301
- --ds-color-ui-bkg-hover-default: rgba(93, 227, 247, 0.1);
302
- }