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