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