@aurodesignsystem/design-tokens 4.0.0 → 4.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (52) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/README.md +20 -26
  3. package/dist/tokens/CSSCustomProperties.css +3 -1
  4. package/dist/tokens/CSSSizeCustomProperties.css +1 -1
  5. package/dist/tokens/JSData--color.js +63 -1
  6. package/dist/tokens/JSObject--allTokens.js +63 -1
  7. package/dist/tokens/JSObject--deprecated.js +1 -1
  8. package/dist/tokens/JSVariables--color.js +3 -1
  9. package/dist/tokens/SCSSVariableMap.scss +1 -1
  10. package/dist/tokens/SCSSVariables.scss +3 -1
  11. package/dist/tokens/SCSSVariablesMapFlat.scss +3 -1
  12. package/dist/tokens/SassCustomProperties.scss +3 -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/ui.json +16 -0
  23. package/src/color-darkmode/base.json +6 -126
  24. package/src/color-darkmode/border.json +2 -40
  25. package/src/color-darkmode/icon.json +2 -20
  26. package/src/color-darkmode/text.json +5 -10
  27. package/src/color-darkmode/tier.json +2 -26
  28. package/dist/tokens/CSSCustomProperties--darkmode.css +0 -302
  29. package/dist/tokens/CSSCustomPropertiesColorRGB--darkmode.css +0 -155
  30. package/dist/tokens/CSSCustomPropertiesColorRGB.css +0 -168
  31. package/dist/tokens/CSSOpacityProperties--darkmode.scss +0 -10
  32. package/dist/tokens/CSSOpacityProperties.scss +0 -10
  33. package/dist/tokens/CSSSizeCustomProperties--darkmode.css +0 -20
  34. package/dist/tokens/CSSVariables--darkmode.css +0 -302
  35. package/dist/tokens/CSSVariablesMapFlat--darkmode.css +0 -368
  36. package/dist/tokens/JSData--darkmodeColor.js +0 -3254
  37. package/dist/tokens/JSObject--allDarkTokens.js +0 -7087
  38. package/dist/tokens/JSObject--deprecatedDark.js +0 -675
  39. package/dist/tokens/JSVariables--darkmodeColor.js +0 -153
  40. package/dist/tokens/SCSSOpacityVariables--darkmode.scss +0 -7
  41. package/dist/tokens/SCSSOpacityVariables.scss +0 -7
  42. package/dist/tokens/SCSSVariableMap--darkmode.scss +0 -37
  43. package/dist/tokens/SCSSVariables--darkmode.scss +0 -299
  44. package/dist/tokens/SCSSVariablesMapFlat--darkmode.scss +0 -368
  45. package/dist/tokens/SassCustomProperties--darkmode.scss +0 -302
  46. package/dist/tokens/SassCustomPropertiesColorRGB--darkmode.scss +0 -155
  47. package/dist/tokens/SassCustomPropertiesColorRGB.scss +0 -168
  48. package/dist/tokens/SassSizeCustomProperties--darkmode.scss +0 -20
  49. package/src/color-darkmode/alert.json +0 -56
  50. package/src/color-darkmode/background.json +0 -38
  51. package/src/color-darkmode/brand.json +0 -530
  52. 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
- }