@aurodesignsystem/design-tokens 4.0.0 → 4.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/README.md +20 -26
  3. package/dist/tokens/CSSCustomProperties.css +1 -1
  4. package/dist/tokens/CSSSizeCustomProperties.css +1 -1
  5. package/dist/tokens/JSData--color.js +1 -1
  6. package/dist/tokens/JSObject--allTokens.js +1 -1
  7. package/dist/tokens/JSObject--deprecated.js +1 -1
  8. package/dist/tokens/JSVariables--color.js +1 -1
  9. package/dist/tokens/SCSSVariableMap.scss +1 -1
  10. package/dist/tokens/SCSSVariables.scss +1 -1
  11. package/dist/tokens/SCSSVariablesMapFlat.scss +1 -1
  12. package/dist/tokens/SassCustomProperties.scss +1 -1
  13. package/dist/tokens/SassSizeCustomProperties.scss +1 -1
  14. package/dist/tokens/darkmode/CSSCustomProperties.css +22 -0
  15. package/dist/tokens/darkmode/JSDataColor.js +464 -0
  16. package/dist/tokens/darkmode/JSObject--allDarkTokens.js +464 -0
  17. package/dist/tokens/darkmode/JSVariablesColor.js +20 -0
  18. package/dist/tokens/darkmode/SCSSVariables.scss +19 -0
  19. package/dist/tokens/darkmode/SCSSVariablesMapFlat.scss +25 -0
  20. package/dist/tokens/darkmode/SassCustomProperties.scss +22 -0
  21. package/package.json +1 -1
  22. package/src/color-darkmode/base.json +6 -126
  23. package/src/color-darkmode/border.json +2 -40
  24. package/src/color-darkmode/icon.json +2 -20
  25. package/src/color-darkmode/text.json +5 -10
  26. package/src/color-darkmode/tier.json +2 -26
  27. package/dist/tokens/CSSCustomProperties--darkmode.css +0 -302
  28. package/dist/tokens/CSSCustomPropertiesColorRGB--darkmode.css +0 -155
  29. package/dist/tokens/CSSCustomPropertiesColorRGB.css +0 -168
  30. package/dist/tokens/CSSOpacityProperties--darkmode.scss +0 -10
  31. package/dist/tokens/CSSOpacityProperties.scss +0 -10
  32. package/dist/tokens/CSSSizeCustomProperties--darkmode.css +0 -20
  33. package/dist/tokens/CSSVariables--darkmode.css +0 -302
  34. package/dist/tokens/CSSVariablesMapFlat--darkmode.css +0 -368
  35. package/dist/tokens/JSData--darkmodeColor.js +0 -3254
  36. package/dist/tokens/JSObject--allDarkTokens.js +0 -7087
  37. package/dist/tokens/JSObject--deprecatedDark.js +0 -675
  38. package/dist/tokens/JSVariables--darkmodeColor.js +0 -153
  39. package/dist/tokens/SCSSOpacityVariables--darkmode.scss +0 -7
  40. package/dist/tokens/SCSSOpacityVariables.scss +0 -7
  41. package/dist/tokens/SCSSVariableMap--darkmode.scss +0 -37
  42. package/dist/tokens/SCSSVariables--darkmode.scss +0 -299
  43. package/dist/tokens/SCSSVariablesMapFlat--darkmode.scss +0 -368
  44. package/dist/tokens/SassCustomProperties--darkmode.scss +0 -302
  45. package/dist/tokens/SassCustomPropertiesColorRGB--darkmode.scss +0 -155
  46. package/dist/tokens/SassCustomPropertiesColorRGB.scss +0 -168
  47. package/dist/tokens/SassSizeCustomProperties--darkmode.scss +0 -20
  48. package/src/color-darkmode/alert.json +0 -56
  49. package/src/color-darkmode/background.json +0 -38
  50. package/src/color-darkmode/brand.json +0 -530
  51. package/src/color-darkmode/ui.json +0 -57
package/dist/tokens/JSVariables--darkmodeColor.js DELETED
@@ -1,153 +0,0 @@
1
- /**
2
- * Do not edit directly
3
- * Generated on Wed, 13 Sep 2023 17:26:40 GMT
4
- */
5
-
6
- export const DsColorAlertNotificationDefault = "#00cff0";
7
- export const DsColorAlertWarningDefault = "#de750c";
8
- export const DsColorAlertErrorDefault = "#ff999b";
9
- export const DsColorAlertSuccessDefault = "#69cf96";
10
- export const DsColorAlertAdvisoryDefault = "#fff0cd";
11
- export const DsColorBackgroundLightest = "#ffffff";
12
- export const DsColorBackgroundLighter = "#f8f8f8";
13
- export const DsColorBackgroundDarker = "#01426a";
14
- export const DsColorBackgroundDarkest = "#00274a";
15
- export const DsColorBaseWhite = "#ffffff"; //
16
- // Base value for token support; should not use in code!
17
- export const DsColorBaseWhiteOpacity40 = "#ffffff"; // white @ 40%
18
- export const DsColorBaseBlack = "#000000"; //
19
- // Base value for token support; should not use in code!
20
- export const DsColorBaseBlackOpacity15 = "#000000"; // black @ 15%
21
- export const DsColorStateError100 = "#ff999b";
22
- export const DsColorStateError500 = "#df0b37";
23
- export const DsColorStateSuccess100 = "#69cf96";
24
- export const DsColorStateSuccess500 = "#00805d";
25
- export const DsColorStateWarning500 = "#de750c";
26
- export const DsColorBorderPrimaryDefault = "#9fabbb";
27
- export const DsColorBorderActiveDefault = "#00cff0";
28
- export const DsColorBorderErrorDefault = "#ff999b";
29
- export const DsColorBorderDisabledDefault = "#dbdbdb";
30
- export const DsColorBorderFocusDefault = "#ffffff";
31
- export const DsColorBorderDividerDefault = "#ffffff";
32
- export const DsColorBrandMidnight100 = "#c1daf0"; //
33
- // Please consider descriptive token prior to using brand token
34
- export const DsColorBrandMidnight200 = "#569ed7"; //
35
- // Please consider descriptive token prior to using brand token
36
- export const DsColorBrandMidnight300 = "#156fad"; //
37
- // Please consider descriptive token prior to using brand token
38
- export const DsColorBrandMidnight400 = "#01426a"; //
39
- // Please consider descriptive token prior to using brand token
40
- export const DsColorBrandMidnight500 = "#00274a"; //
41
- // Please consider descriptive token prior to using brand token
42
- export const DsColorBrandAtlas100 = "#cde6ff"; //
43
- // Please consider descriptive token prior to using brand token
44
- export const DsColorBrandAtlas200 = "#6bb7fb"; //
45
- // Please consider descriptive token prior to using brand token
46
- export const DsColorBrandAtlas300 = "#2492eb"; //
47
- // Please consider descriptive token prior to using brand token
48
- export const DsColorBrandAtlas400 = "#0074c8"; //
49
- // Please consider descriptive token prior to using brand token
50
- export const DsColorBrandAtlas500 = "#054687"; //
51
- // Please consider descriptive token prior to using brand token
52
- export const DsColorBrandBreeze100 = "#c0f7ff"; //
53
- // Please consider descriptive token prior to using brand token
54
- export const DsColorBrandBreeze200 = "#5de3f7"; //
55
- // Please consider descriptive token prior to using brand token
56
- export const DsColorBrandBreeze300 = "#00cff0"; //
57
- // Please consider descriptive token prior to using brand token
58
- export const DsColorBrandBreeze400 = "#099dc5"; //
59
- // Please consider descriptive token prior to using brand token
60
- export const DsColorBrandBreeze500 = "#0b5575"; //
61
- // Please consider descriptive token prior to using brand token
62
- export const DsColorBrandTropical100 = "#e2ffcd"; //
63
- // Please consider descriptive token prior to using brand token
64
- export const DsColorBrandTropical200 = "#d0fba6"; //
65
- // Please consider descriptive token prior to using brand token
66
- export const DsColorBrandTropical300 = "#c0e585"; //
67
- // Please consider descriptive token prior to using brand token
68
- export const DsColorBrandTropical400 = "#91be62"; //
69
- // Please consider descriptive token prior to using brand token
70
- export const DsColorBrandTropical500 = "#5e8741"; //
71
- // Please consider descriptive token prior to using brand token
72
- export const DsColorBrandAlpine100 = "#bcaae6"; //
73
- // Please consider descriptive token prior to using brand token
74
- export const DsColorBrandAlpine200 = "#9e73ea"; //
75
- // Please consider descriptive token prior to using brand token
76
- export const DsColorBrandAlpine300 = "#8439ef"; //
77
- // Please consider descriptive token prior to using brand token
78
- export const DsColorBrandAlpine400 = "#631db8"; //
79
- // Please consider descriptive token prior to using brand token
80
- export const DsColorBrandAlpine500 = "#39115c"; //
81
- // Please consider descriptive token prior to using brand token
82
- export const DsColorBrandFlamingo100 = "#ffebee"; //
83
- // Please consider descriptive token prior to using brand token
84
- export const DsColorBrandFlamingo200 = "#ffc0ca"; //
85
- // Please consider descriptive token prior to using brand token
86
- export const DsColorBrandFlamingo300 = "#ff94a7"; //
87
- // Please consider descriptive token prior to using brand token
88
- export const DsColorBrandFlamingo400 = "#f65b7b"; //
89
- // Please consider descriptive token prior to using brand token
90
- export const DsColorBrandFlamingo500 = "#b82b47"; //
91
- // Please consider descriptive token prior to using brand token
92
- export const DsColorBrandCanyon100 = "#ffcab6"; //
93
- // Please consider descriptive token prior to using brand token
94
- export const DsColorBrandCanyon200 = "#f99574"; //
95
- // Please consider descriptive token prior to using brand token
96
- export const DsColorBrandCanyon300 = "#f26135"; //
97
- // Please consider descriptive token prior to using brand token
98
- export const DsColorBrandCanyon400 = "#de3e09"; //
99
- // Please consider descriptive token prior to using brand token
100
- export const DsColorBrandCanyon500 = "#b83302"; //
101
- // Please consider descriptive token prior to using brand token
102
- export const DsColorBrandGoldcoast100 = "#fff0cd"; //
103
- // Please consider descriptive token prior to using brand token
104
- export const DsColorBrandGoldcoast200 = "#ffdb67"; //
105
- // Please consider descriptive token prior to using brand token
106
- export const DsColorBrandGoldcoast300 = "#ffd200"; //
107
- // Please consider descriptive token prior to using brand token
108
- export const DsColorBrandGoldcoast400 = "#e5ad07"; //
109
- // Please consider descriptive token prior to using brand token
110
- export const DsColorBrandGoldcoast500 = "#b88624"; //
111
- // Please consider descriptive token prior to using brand token
112
- export const DsColorBrandNeutral100 = "#f9fbfc"; //
113
- // Please consider descriptive token prior to using brand token
114
- export const DsColorBrandNeutral200 = "#e2eaef"; //
115
- // Please consider descriptive token prior to using brand token
116
- export const DsColorBrandNeutral300 = "#cbd8e2"; //
117
- // Please consider descriptive token prior to using brand token
118
- export const DsColorBrandNeutral400 = "#9fabbb"; //
119
- // Please consider descriptive token prior to using brand token
120
- export const DsColorBrandNeutral500 = "#626b79"; //
121
- // Please consider descriptive token prior to using brand token
122
- export const DsColorBrandGray100 = "#f8f8f8";
123
- export const DsColorBrandGray200 = "#dbdbdb";
124
- export const DsColorBrandGray300 = "#b2b2b2";
125
- export const DsColorBrandGray400 = "#767676";
126
- export const DsColorBrandGray500 = "#222222";
127
- export const DsColorBrandGoldgray100 = "#c5c1bf";
128
- export const DsColorBrandGoldgray200 = "#726e6c";
129
- export const DsColorBrandGold100 = "#ccbc94";
130
- export const DsColorBrandGold200 = "#7f682e";
131
- export const DsColorBrandEmerald = "#139142";
132
- export const DsColorBrandSapphire = "#015daa";
133
- export const DsColorBrandRuby = "#a41d4a";
134
- export const DsColorIconPrimaryDefault = "#9fabbb";
135
- export const DsColorIconEmphasisDefault = "#ffffff";
136
- export const DsColorIconAccentDefault = "#00cff0";
137
- export const DsColorIconDisabledDefault = "#ffffff";
138
- export const DsColorTextPrimaryDefault = "#ffffff";
139
- export const DsColorTextSecondaryDefault = "#9fabbb";
140
- export const DsColorTextLinkDefault = "#00cff0";
141
- export const DsColorTextErrorDefault = "#ff999b";
142
- export const DsColorTextDisabledDefault = "#dbdbdb";
143
- export const DsColorTextEmphasisDefault = "#c1daf0";
144
- export const DsColorTierAlaskaMvpDefault = "#c5c1bf";
145
- export const DsColorTierAlaskaMvpgoldDefault = "#ccbc94";
146
- export const DsColorTierOneworldEmerald = "#139142";
147
- export const DsColorTierOneworldSapphire = "#015daa";
148
- export const DsColorTierOneworldRuby = "#a41d4a";
149
- export const DsColorUiDefaultDefault = "#00cff0";
150
- export const DsColorUiHoverDefault = "#5de3f7";
151
- export const DsColorUiActiveDefault = "#5de3f7";
152
- export const DsColorUiDisabledDefault = "#00cff0";
153
- export const DsColorUiBkgHoverDefault = "#5de3f7";
package/dist/tokens/SCSSOpacityVariables--darkmode.scss DELETED
@@ -1,7 +0,0 @@
1
-
2
- // Do not edit directly
3
- // Generated on Wed, 13 Sep 2023 17:26:39 GMT
4
-
5
- $ds-color-base-white-opacity-40: rgba(255, 255, 255, 0.4); // white @ 40%
6
- $ds-color-base-black-opacity-15: rgba(0, 0, 0, 0.15); // black @ 15%
7
- $ds-color-brand-atlas-400-opacity-20: rgba(0, 116, 200, 0.2); // color brand atlas 400 @ 20%
package/dist/tokens/SCSSOpacityVariables.scss DELETED
@@ -1,7 +0,0 @@
1
-
2
- // Do not edit directly
3
- // Generated on Wed, 13 Sep 2023 17:26:39 GMT
4
-
5
- $ds-color-base-white-opacity-40: rgba(255, 255, 255, 0.4); // white @ 40%
6
- $ds-color-base-black-opacity-15: rgba(0, 0, 0, 0.15); // black @ 15%
7
- $ds-color-brand-atlas-400-opacity-20: rgba(0, 116, 200, 0.2); // color brand atlas 400 @ 20%
package/dist/tokens/SCSSVariableMap--darkmode.scss DELETED
@@ -1,37 +0,0 @@
1
-
2
- /**
3
- * Do not edit directly
4
- * Generated on Wed, 13 Sep 2023 17:26:39 GMT
5
- */
6
-
7
- $ds-size-25: 0.125rem !default; // 2px
8
- $ds-size-50: 0.25rem !default; // 4px
9
- $ds-size-100: 0.5rem !default; // 8px
10
- $ds-size-150: 0.75rem !default; // 12px
11
- $ds-size-200: 1rem !default; // 16px
12
- $ds-size-300: 1.5rem !default; // 24px
13
- $ds-size-400: 2rem !default; // 32px
14
- $ds-size-500: 2.5rem !default; // 40px
15
- $ds-size-600: 3rem !default; // 48px
16
- $ds-size-700: 3.5rem !default; // 56px
17
- $ds-size-800: 4rem !default; // 64px
18
- $ds-size-900: 4.5rem !default; // 72px
19
- $ds-size-1000: 5rem !default; // 80px
20
-
21
- $tokens: (
22
- 'size': (
23
- '25': $ds-size-25,
24
- '50': $ds-size-50,
25
- '100': $ds-size-100,
26
- '150': $ds-size-150,
27
- '200': $ds-size-200,
28
- '300': $ds-size-300,
29
- '400': $ds-size-400,
30
- '500': $ds-size-500,
31
- '600': $ds-size-600,
32
- '700': $ds-size-700,
33
- '800': $ds-size-800,
34
- '900': $ds-size-900,
35
- '1000': $ds-size-1000
36
- )
37
- );
package/dist/tokens/SCSSVariables--darkmode.scss DELETED
@@ -1,299 +0,0 @@
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);