@times-design-system/theme-scss 1.4.0 → 1.6.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 (40) hide show
  1. package/README.md +89 -133
  2. package/dist/palettes/_brand-dark.scss +140 -166
  3. package/dist/palettes/_brand-light.scss +140 -166
  4. package/dist/palettes/_business-dark.scss +207 -100
  5. package/dist/palettes/_business-light.scss +202 -95
  6. package/dist/palettes/_channels-dark.scss +315 -279
  7. package/dist/palettes/_channels-light.scss +315 -279
  8. package/dist/palettes/_comment-dark.scss +208 -101
  9. package/dist/palettes/_comment-light.scss +202 -95
  10. package/dist/palettes/_core-dark.scss +198 -91
  11. package/dist/palettes/_core-light.scss +195 -88
  12. package/dist/palettes/_culture-dark.scss +207 -100
  13. package/dist/palettes/_culture-light.scss +202 -95
  14. package/dist/palettes/_dataVisualisation-dark.scss +196 -202
  15. package/dist/palettes/_dataVisualisation-light.scss +196 -202
  16. package/dist/palettes/_home-dark.scss +207 -100
  17. package/dist/palettes/_home-light.scss +202 -95
  18. package/dist/palettes/_ireland-dark.scss +208 -101
  19. package/dist/palettes/_ireland-light.scss +202 -95
  20. package/dist/palettes/_lifeAndStyle-dark.scss +208 -101
  21. package/dist/palettes/_lifeAndStyle-light.scss +202 -95
  22. package/dist/palettes/_marketing-dark.scss +10 -16
  23. package/dist/palettes/_marketing-light.scss +10 -16
  24. package/dist/palettes/_money-dark.scss +208 -101
  25. package/dist/palettes/_money-light.scss +202 -95
  26. package/dist/palettes/_obituaries-dark.scss +207 -100
  27. package/dist/palettes/_obituaries-light.scss +202 -95
  28. package/dist/palettes/_puzzles-dark.scss +208 -99
  29. package/dist/palettes/_puzzles-light.scss +202 -93
  30. package/dist/palettes/_sport-dark.scss +207 -100
  31. package/dist/palettes/_sport-light.scss +202 -95
  32. package/dist/palettes/_travel-dark.scss +208 -101
  33. package/dist/palettes/_travel-light.scss +202 -95
  34. package/dist/palettes/_uk-dark.scss +208 -101
  35. package/dist/palettes/_uk-light.scss +202 -95
  36. package/dist/palettes/_world-dark.scss +208 -101
  37. package/dist/palettes/_world-light.scss +202 -95
  38. package/dist/tds-layout.scss +1 -1
  39. package/dist/tds-typography.scss +223 -335
  40. package/package.json +2 -2
package/README.md CHANGED
@@ -1,171 +1,139 @@
1
- # @times-design-system/theme-wordpress
1
+ # @times-design-system/theme-scss
2
2
 
3
- Times Design System theme tokens, React hooks, and CSS variables for building themed applications.
3
+ Times Design System SCSS theme package with pre-compiled palette files and utility functions for designing themed SCSS applications.
4
4
 
5
5
  ## Installation
6
6
 
7
7
  ```bash
8
- npm install @times-design-system/theme-wordpress
8
+ npm install @times-design-system/theme-scss
9
9
  ```
10
10
 
11
11
  ## Usage
12
12
 
13
- ### JavaScript/React Tokens & Hooks
13
+ ### Import SCSS Files
14
14
 
15
- ```javascript
16
- import {
17
- tokens,
18
- useTypographyToken
19
- } from '@times-design-system/theme-wordpress';
15
+ ```scss
16
+ // Import typography utilities
17
+ @import '@times-design-system/theme-scss/tds-typography.scss';
20
18
 
21
- // Use design tokens
22
- console.log(tokens.Foundation.fontSize100); // "2.25rem"
23
- console.log(tokens.semanticColor.text.primary); // "rgba(26, 26, 26, 1.00)"
19
+ // Import layout utilities
20
+ @import '@times-design-system/theme-scss/tds-layout.scss';
24
21
 
25
- // Use typography hook in React components
26
- const MyComponent = () => {
27
- const headingStyle = useTypographyToken('brand.heading.fluid.bold.large');
28
- return <h1 style={headingStyle}>Heading</h1>;
29
- };
22
+ // Import a specific palette
23
+ @import '@times-design-system/theme-scss/palettes/light-palette.scss';
24
+ @import '@times-design-system/theme-scss/palettes/dark-palette.scss';
30
25
  ```
31
26
 
32
- ### CSS Custom Properties
27
+ ### Using Design Tokens in SCSS
33
28
 
34
- ```html
35
- <!-- Link the CSS variables -->
36
- <link
37
- rel="stylesheet"
38
- href="node_modules/@times-design-system/theme-wordpress/variables.css"
39
- />
40
- ```
41
-
42
- ```css
43
- /* Use CSS variables in your stylesheets */
44
- :root {
45
- --tds-font-size100: 2.25rem;
46
- --tds-font-size050: 1.25rem;
47
- --tds-spacing-050: 0.5rem;
48
- /* 2,748+ design tokens as CSS variables */
29
+ ```scss
30
+ // Access color variables
31
+ body {
32
+ background-color: $tds-surface-canvas;
33
+ color: $tds-text-primary;
49
34
  }
50
35
 
36
+ // Use typography utilities
51
37
  h1 {
52
- font-size: var(--tds-font-size100);
53
- margin: var(--tds-spacing-050);
38
+ @include tds-heading-large;
39
+ margin-bottom: $tds-spacing-200;
54
40
  }
55
- ```
56
-
57
- ### Import only specific modules
58
41
 
59
- ```javascript
60
- // Tokens only
61
- import { tokens } from '@times-design-system/theme-wordpress/tokens';
62
-
63
- // Hooks only
64
- import { useTypographyToken } from '@times-design-system/theme-wordpress/hooks';
65
-
66
- // CSS only (already in package.json exports)
67
- import '@times-design-system/theme-wordpress/variables.css';
42
+ // Use spacing tokens
43
+ .component {
44
+ padding: $tds-spacing-100;
45
+ margin: $tds-spacing-050;
46
+ border-radius: $tds-radius-100;
47
+ }
68
48
  ```
69
49
 
70
- ## Available Exports
71
-
72
- ### JavaScript Modules
50
+ ### Palette Files
73
51
 
74
- - **tokens** - Complete design token object with all Foundation, Palette, and Semantic tokens
75
- - **useTypographyToken** - React hook for applying typography styles to elements
52
+ All channel and brand palettes are included:
76
53
 
77
- ### CSS
78
-
79
- - **variables.css** - 2,748+ CSS custom properties (--tds-\*) covering:
80
- - Font sizes: --tds-font-size0025 through --tds-font-size190
81
- - Spacing: --tds-spacing-\* (fluid and static variants)
82
- - Shadows: --tds-elevation-\*
83
- - Colors: --tds-brand-_, --tds-semantic-_, etc.
54
+ ```
55
+ dist/palettes/
56
+ ├── light-palette.scss # Light mode palette
57
+ ├── dark-palette.scss # Dark mode palette
58
+ ├── light-brand-colors.scss # Light brand colors
59
+ ├── dark-brand-colors.scss # Dark brand colors
60
+ ├── light-channels.scss # Light channel colors
61
+ ├── dark-channels.scss # Dark channel colors
62
+ └── ... (20+ additional palettes)
63
+ ```
84
64
 
85
65
  ## Package Contents
86
66
 
87
67
  ```
88
68
  dist/
89
- ├── index.js/cjs # Main export (tokens + hooks)
90
- ├── tokens.js/cjs # Design tokens only
91
- ├── hooks.js/cjs # React hooks only
92
- └── variables.css # CSS custom properties
69
+ ├── tds-layout.scss # Layout and grid utilities
70
+ ├── tds-typography.scss # Typography mixins and utilities
71
+ ├── variables.css # CSS custom properties (compatible)
72
+ └── palettes/ # SCSS palette files
73
+ ├── light-*.scss
74
+ ├── dark-*.scss
75
+ └── foundation-*.scss
93
76
  ```
94
77
 
95
- ### Token Structure
78
+ ## Available Tokens
96
79
 
97
- #### Foundation Tokens
80
+ ### Color Tokens
98
81
 
99
- ```javascript
100
- tokens.Foundation.fontSize010; // "0.75rem"
101
- tokens.Foundation.fontSize100; // "2.25rem"
102
- tokens.Foundation.spacing050; // "0.5rem"
103
- tokens.Foundation.spacing100; // "1rem"
104
- ```
82
+ All tokens follow a consistent naming pattern:
105
83
 
106
- #### Palette Tokens (Pre-resolved Colors)
84
+ ```scss
85
+ // Semantic colors (light mode)
86
+ $tds-text-primary
87
+ $tds-text-secondary
88
+ $tds-text-tertiary
89
+ $tds-surface-canvas
90
+ $tds-surface-level-1
91
+ $tds-border-primary
107
92
 
108
- ```javascript
109
- tokens.brand.primary; // Color ramp with 19 steps (100-1000)
110
- tokens.channels.comment; // Channel-specific colors
111
- tokens.dataVisualisation.data01; // Data visualization colors
112
- ```
113
-
114
- #### Semantic Tokens
93
+ // Brand colors
94
+ $tds-brand-home-500
95
+ $tds-brand-business-500
96
+ $tds-brand-sport-500
97
+ // ... and more channels
115
98
 
116
- ```javascript
117
- tokens.semanticColor.surface.default; // "rgba(255, 255, 255, 1.00)"
118
- tokens.semanticColor.text.primary; // "rgba(26, 26, 26, 1.00)"
119
- tokens.semanticColor.interactive.primary; // Brand color for interactive elements
99
+ // Dark mode variants
100
+ // Use the palette files or CSS custom properties with light-dark()
120
101
  ```
121
102
 
122
- ## React Hook Usage
123
-
124
- ### useTypographyToken(tokenPath)
103
+ ### Spacing Tokens
125
104
 
126
- Returns style object ready for use in React:
127
-
128
- ```javascript
129
- const { useTypographyToken } from '@times-design-system/theme-wordpress/hooks';
130
-
131
- export const Article = ({ title }) => {
132
- // Get typography style for display heading
133
- const headingStyle = useTypographyToken('brand.heading.fluid.bold.large');
134
-
135
- // Get typography style for body text
136
- const bodyStyle = useTypographyToken('utility.body.static.regular.medium');
137
-
138
- return (
139
- <>
140
- <h1 style={headingStyle}>{title}</h1>
141
- <p style={bodyStyle}>Article content...</p>
142
- </>
143
- );
144
- };
105
+ ```scss
106
+ $tds-spacing-025 // 0.25rem
107
+ $tds-spacing-050 // 0.5rem
108
+ $tds-spacing-100 // 1rem
109
+ $tds-spacing-200 // 1.5rem
110
+ // ... scales up to $tds-spacing-400
145
111
  ```
146
112
 
147
- Returns object:
113
+ ### Typography
148
114
 
149
- ```javascript
150
- {
151
- fontFamily: 'Times Modern, serif',
152
- fontSize: '2.25rem',
153
- fontWeight: 700,
154
- lineHeight: 1.2,
155
- letterSpacing: '-0.02em'
156
- }
115
+ ```scss
116
+ // Use typography mixins
117
+ @include tds-heading-large;
118
+ @include tds-body-standard;
119
+ @include tds-label-small;
157
120
  ```
158
121
 
159
- ## Browser Support
160
-
161
- All CSS custom properties (--tds-\*) are supported in modern browsers (Chrome, Firefox, Safari, Edge).
122
+ ## Dark Mode Support
162
123
 
163
- For older browsers, use the JavaScript tokens with fallback values:
124
+ The package includes dedicated dark mode palettes. Use CSS custom properties with `light-dark()` for best results:
164
125
 
165
- ```javascript
166
- const fontSize = tokens.Foundation.fontSize100 || '2.25rem';
126
+ ```scss
127
+ color: light-dark($tds-text-primary, $tds-text-primary-dark);
128
+ background: light-dark($tds-surface-canvas, $tds-surface-canvas-dark);
167
129
  ```
168
130
 
131
+ ## Compatibility
132
+
133
+ - **Sass/SCSS**: ≥ 1.3.0
134
+ - **Node**: ≥ 14.0.0
135
+ - **Browsers**: All modern browsers supporting CSS custom properties
136
+
169
137
  ## Building
170
138
 
171
139
  To rebuild the package after modifying tokens:
@@ -174,19 +142,7 @@ To rebuild the package after modifying tokens:
174
142
  npm run build
175
143
  ```
176
144
 
177
- This will:
178
-
179
- 1. Clean the `dist/` directory
180
- 2. Build ESM and CJS JavaScript modules
181
- 3. Copy CSS variables to dist/
182
-
183
- ## Publishing
184
-
185
- ```bash
186
- npm publish
187
- ```
188
-
189
- The package is configured with public access and will publish to the public npm registry.
145
+ This will compile SCSS files with deduplication and asset distribution.
190
146
 
191
147
  ## License
192
148
 
package/dist/palettes/_brand-dark.scss CHANGED
@@ -1,166 +1,140 @@
1
- $tds-brand-core-ramp-digital-cream-50: #0f2020;
2
- $tds-brand-core-ramp-digital-cream-100: #1f4040;
3
- $tds-brand-core-ramp-digital-cream-150: #2e6161;
4
- $tds-brand-core-ramp-digital-cream-200: #3e8181;
5
- $tds-brand-core-ramp-digital-cream-250: #4da1a1;
6
- $tds-brand-core-ramp-digital-cream-300: #67b6b6;
7
- $tds-brand-core-ramp-digital-cream-350: #87c6c6;
8
- $tds-brand-core-ramp-digital-cream-400: #a8d5d5;
9
- $tds-brand-core-ramp-digital-cream-450: #c8e5e5;
10
- $tds-brand-core-ramp-digital-cream-500: #f4f2e8;
11
- $tds-brand-core-ramp-digital-cream-550: #e9f5f5;
12
- $tds-brand-core-ramp-digital-cream-600: #eaf5f5;
13
- $tds-brand-core-ramp-digital-cream-650: #ebf6f6;
14
- $tds-brand-core-ramp-digital-cream-700: #edf6f6;
15
- $tds-brand-core-ramp-digital-cream-750: #eef7f7;
16
- $tds-brand-core-ramp-digital-cream-800: #eff7f7;
17
- $tds-brand-core-ramp-digital-cream-850: #f0f8f8;
18
- $tds-brand-core-ramp-digital-cream-900: #f1f8f8;
19
- $tds-brand-core-ramp-digital-cream-950: #f2f9f9;
20
- $tds-brand-core-ramp-digital-cream-1000: #f3f9f9;
21
- $tds-brand-core-ramp-digital-blue-50: #000000;
22
- $tds-brand-core-ramp-digital-blue-100: #000000;
23
- $tds-brand-core-ramp-digital-blue-150: #000000;
24
- $tds-brand-core-ramp-digital-blue-200: #000000;
25
- $tds-brand-core-ramp-digital-blue-250: #000000;
26
- $tds-brand-core-ramp-digital-blue-300: #000000;
27
- $tds-brand-core-ramp-digital-blue-350: #000000;
28
- $tds-brand-core-ramp-digital-blue-400: #000000;
29
- $tds-brand-core-ramp-digital-blue-450: #000000;
30
- $tds-brand-core-ramp-digital-blue-500: #005c8a;
31
- $tds-brand-core-ramp-digital-blue-550: #000000;
32
- $tds-brand-core-ramp-digital-blue-600: #000000;
33
- $tds-brand-core-ramp-digital-blue-650: #000000;
34
- $tds-brand-core-ramp-digital-blue-700: #000000;
35
- $tds-brand-core-ramp-digital-blue-750: #000000;
36
- $tds-brand-core-ramp-digital-blue-800: #000000;
37
- $tds-brand-core-ramp-digital-blue-850: #0d0d0d;
38
- $tds-brand-core-ramp-digital-blue-900: #202020;
39
- $tds-brand-core-ramp-digital-blue-950: #323232;
40
- $tds-brand-core-ramp-digital-blue-1000: #454545;
41
- $tds-brand-core-ramp-digital-overlay-dark-50: rgba(0, 0, 0, 0.05);
42
- $tds-brand-core-ramp-digital-overlay-dark-100: rgba(0, 0, 0, 0.1);
43
- $tds-brand-core-ramp-digital-overlay-dark-150: rgba(0, 0, 0, 0.15);
44
- $tds-brand-core-ramp-digital-overlay-dark-200: rgba(0, 0, 0, 0.2);
45
- $tds-brand-core-ramp-digital-overlay-dark-250: rgba(0, 0, 0, 0.25);
46
- $tds-brand-core-ramp-digital-overlay-dark-300: rgba(0, 0, 0, 0.3);
47
- $tds-brand-core-ramp-digital-overlay-dark-350: rgba(0, 0, 0, 0.35);
48
- $tds-brand-core-ramp-digital-overlay-dark-400: rgba(0, 0, 0, 0.4);
49
- $tds-brand-core-ramp-digital-overlay-dark-450: rgba(0, 0, 0, 0.45);
50
- $tds-brand-core-ramp-digital-overlay-dark-500: rgba(0, 0, 0, 0.5);
51
- $tds-brand-core-ramp-digital-overlay-dark-550: rgba(0, 0, 0, 0.55);
52
- $tds-brand-core-ramp-digital-overlay-dark-600: rgba(0, 0, 0, 0.6);
53
- $tds-brand-core-ramp-digital-overlay-dark-650: rgba(0, 0, 0, 0.65);
54
- $tds-brand-core-ramp-digital-overlay-dark-700: rgba(0, 0, 0, 0.7);
55
- $tds-brand-core-ramp-digital-overlay-dark-750: rgba(0, 0, 0, 0.75);
56
- $tds-brand-core-ramp-digital-overlay-dark-800: rgba(0, 0, 0, 0.8);
57
- $tds-brand-core-ramp-digital-overlay-dark-850: rgba(0, 0, 0, 0.85);
58
- $tds-brand-core-ramp-digital-overlay-dark-900: rgba(0, 0, 0, 0.9);
59
- $tds-brand-core-ramp-digital-overlay-dark-950: rgba(0, 0, 0, 0.95);
60
- $tds-brand-core-ramp-digital-overlay-dark-1000: #000000;
61
- $tds-brand-core-ramp-messaging-info-50: #010101;
62
- $tds-brand-core-ramp-messaging-info-100: #030303;
63
- $tds-brand-core-ramp-messaging-info-150: #040404;
64
- $tds-brand-core-ramp-messaging-info-200: #060606;
65
- $tds-brand-core-ramp-messaging-info-250: #080808;
66
- $tds-brand-core-ramp-messaging-info-300: #090909;
67
- $tds-brand-core-ramp-messaging-info-350: #0a0a0a;
68
- $tds-brand-core-ramp-messaging-info-400: #0c0c0c;
69
- $tds-brand-core-ramp-messaging-info-450: #0e0e0e;
70
- $tds-brand-core-ramp-messaging-info-500: #0f4aa2;
71
- $tds-brand-core-ramp-messaging-info-550: #101010;
72
- $tds-brand-core-ramp-messaging-info-600: #121212;
73
- $tds-brand-core-ramp-messaging-info-650: #131313;
74
- $tds-brand-core-ramp-messaging-info-700: #151515;
75
- $tds-brand-core-ramp-messaging-info-750: #1a1a1a;
76
- $tds-brand-core-ramp-messaging-info-800: #2a2a2a;
77
- $tds-brand-core-ramp-messaging-info-850: #393939;
78
- $tds-brand-core-ramp-messaging-info-900: #484848;
79
- $tds-brand-core-ramp-messaging-info-950: #575757;
80
- $tds-brand-core-ramp-messaging-info-1000: #676767;
81
- $tds-brand-core-ramp-messaging-error-50: #1a0000;
82
- $tds-brand-core-ramp-messaging-error-100: #330000;
83
- $tds-brand-core-ramp-messaging-error-150: #4d0000;
84
- $tds-brand-core-ramp-messaging-error-200: #660000;
85
- $tds-brand-core-ramp-messaging-error-250: #800000;
86
- $tds-brand-core-ramp-messaging-error-300: #990000;
87
- $tds-brand-core-ramp-messaging-error-350: #b30000;
88
- $tds-brand-core-ramp-messaging-error-400: #cc0000;
89
- $tds-brand-core-ramp-messaging-error-450: #e60000;
90
- $tds-brand-core-ramp-messaging-error-500: #ff0000;
91
- $tds-brand-core-ramp-messaging-error-550: #ff0d0d;
92
- $tds-brand-core-ramp-messaging-error-600: #ff1a1a;
93
- $tds-brand-core-ramp-messaging-error-650: #ff2626;
94
- $tds-brand-core-ramp-messaging-error-700: #ff3333;
95
- $tds-brand-core-ramp-messaging-error-750: #ff4040;
96
- $tds-brand-core-ramp-messaging-error-800: #ff4d4d;
97
- $tds-brand-core-ramp-messaging-error-850: #ff5959;
98
- $tds-brand-core-ramp-messaging-error-900: #ff6666;
99
- $tds-brand-core-ramp-messaging-error-950: #ff7373;
100
- $tds-brand-core-ramp-messaging-error-1000: #ff8080;
101
- $tds-brand-core-ramp-messaging-warning-50: #001a08;
102
- $tds-brand-core-ramp-messaging-warning-100: #00330f;
103
- $tds-brand-core-ramp-messaging-warning-150: #004d17;
104
- $tds-brand-core-ramp-messaging-warning-200: #00661f;
105
- $tds-brand-core-ramp-messaging-warning-250: #008026;
106
- $tds-brand-core-ramp-messaging-warning-300: #00992e;
107
- $tds-brand-core-ramp-messaging-warning-350: #00b336;
108
- $tds-brand-core-ramp-messaging-warning-400: #00cc3d;
109
- $tds-brand-core-ramp-messaging-warning-450: #00e645;
110
- $tds-brand-core-ramp-messaging-warning-500: #ffa300;
111
- $tds-brand-core-ramp-messaging-warning-550: #0dff56;
112
- $tds-brand-core-ramp-messaging-warning-600: #1aff5f;
113
- $tds-brand-core-ramp-messaging-warning-650: #26ff68;
114
- $tds-brand-core-ramp-messaging-warning-700: #33ff70;
115
- $tds-brand-core-ramp-messaging-warning-750: #40ff79;
116
- $tds-brand-core-ramp-messaging-warning-800: #4dff82;
117
- $tds-brand-core-ramp-messaging-warning-850: #59ff8b;
118
- $tds-brand-core-ramp-messaging-warning-900: #66ff94;
119
- $tds-brand-core-ramp-messaging-warning-950: #73ff9d;
120
- $tds-brand-core-ramp-messaging-warning-1000: #80ffa6;
121
- $tds-brand-core-ramp-messaging-success-50: #050f10;
122
- $tds-brand-core-ramp-messaging-success-100: #0a1e21;
123
- $tds-brand-core-ramp-messaging-success-150: #0f2c31;
124
- $tds-brand-core-ramp-messaging-success-200: #143b42;
125
- $tds-brand-core-ramp-messaging-success-250: #184a52;
126
- $tds-brand-core-ramp-messaging-success-300: #1d5962;
127
- $tds-brand-core-ramp-messaging-success-350: #226773;
128
- $tds-brand-core-ramp-messaging-success-400: #277683;
129
- $tds-brand-core-ramp-messaging-success-450: #2c8594;
130
- $tds-brand-core-ramp-messaging-success-500: #31a46f;
131
- $tds-brand-core-ramp-messaging-success-550: #349eaf;
132
- $tds-brand-core-ramp-messaging-success-600: #38a8bb;
133
- $tds-brand-core-ramp-messaging-success-650: #3db2c5;
134
- $tds-brand-core-ramp-messaging-success-700: #48b6c8;
135
- $tds-brand-core-ramp-messaging-success-750: #53bbcc;
136
- $tds-brand-core-ramp-messaging-success-800: #5fbfcf;
137
- $tds-brand-core-ramp-messaging-success-850: #6ac4d3;
138
- $tds-brand-core-ramp-messaging-success-900: #76c8d6;
139
- $tds-brand-core-ramp-messaging-success-950: #81cdd9;
140
- $tds-brand-core-ramp-messaging-success-1000: #8dd2dd;
141
- $tds-brand-core-ramp-neutral-50: #000000;
142
- $tds-brand-core-ramp-neutral-100: #0d0d0d;
143
- $tds-brand-core-ramp-neutral-150: #1a1a1a;
144
- $tds-brand-core-ramp-neutral-200: #262626;
145
- $tds-brand-core-ramp-neutral-250: #333333;
146
- $tds-brand-core-ramp-neutral-300: #404040;
147
- $tds-brand-core-ramp-neutral-350: #4d4d4d;
148
- $tds-brand-core-ramp-neutral-400: #595959;
149
- $tds-brand-core-ramp-neutral-450: #666666;
150
- $tds-brand-core-ramp-neutral-500: #737373;
151
- $tds-brand-core-ramp-neutral-550: #808080;
152
- $tds-brand-core-ramp-neutral-600: #8c8c8c;
153
- $tds-brand-core-ramp-neutral-650: #999999;
154
- $tds-brand-core-ramp-neutral-700: #a6a6a6;
155
- $tds-brand-core-ramp-neutral-750: #b3b3b3;
156
- $tds-brand-core-ramp-neutral-800: #bfbfbf;
157
- $tds-brand-core-ramp-neutral-850: #cccccc;
158
- $tds-brand-core-ramp-neutral-900: #d9d9d9;
159
- $tds-brand-core-ramp-neutral-950: #e6e6e6;
160
- $tds-brand-core-ramp-neutral-1000: #ffffff;
161
- $tds-surface-static-dark: #000000;
162
- $tds-surface-static-light: #ffffff;
163
- $tds-text-static-dark: #000000;
164
- $tds-text-static-light: #ffffff;
165
- $tds-border-static-dark: #000000;
166
- $tds-border-static-light: #ffffff;
1
+ $tds-ramp-blue-50: #03090e;
2
+ $tds-ramp-blue-100: #05121c;
3
+ $tds-ramp-blue-150: #061c29;
4
+ $tds-ramp-blue-200: #062537;
5
+ $tds-ramp-blue-250: #062e45;
6
+ $tds-ramp-blue-300: #063753;
7
+ $tds-ramp-blue-350: #054061;
8
+ $tds-ramp-blue-400: #044a6e;
9
+ $tds-ramp-blue-450: #02537c;
10
+ $tds-ramp-blue-500: #005c8a;
11
+ $tds-ramp-blue-550: #186490;
12
+ $tds-ramp-blue-600: #286c96;
13
+ $tds-ramp-blue-650: #36759c;
14
+ $tds-ramp-blue-700: #437da2;
15
+ $tds-ramp-blue-750: #5085a8;
16
+ $tds-ramp-blue-800: #5c8dae;
17
+ $tds-ramp-blue-850: #6694b3;
18
+ $tds-ramp-blue-900: #749db9;
19
+ $tds-ramp-blue-950: #80a6bf;
20
+ $tds-ramp-blue-1000: #8baec5;
21
+ $tds-ramp-overlay-dark-50: rgba(0, 0, 0, 0.05);
22
+ $tds-ramp-overlay-dark-100: rgba(0, 0, 0, 0.1);
23
+ $tds-ramp-overlay-dark-150: rgba(0, 0, 0, 0.15);
24
+ $tds-ramp-overlay-dark-200: rgba(0, 0, 0, 0.2);
25
+ $tds-ramp-overlay-dark-250: rgba(0, 0, 0, 0.25);
26
+ $tds-ramp-overlay-dark-300: rgba(0, 0, 0, 0.3);
27
+ $tds-ramp-overlay-dark-350: rgba(0, 0, 0, 0.35);
28
+ $tds-ramp-overlay-dark-400: rgba(0, 0, 0, 0.4);
29
+ $tds-ramp-overlay-dark-450: rgba(0, 0, 0, 0.45);
30
+ $tds-ramp-overlay-dark-500: rgba(0, 0, 0, 0.5);
31
+ $tds-ramp-overlay-dark-550: rgba(0, 0, 0, 0.55);
32
+ $tds-ramp-overlay-dark-600: rgba(0, 0, 0, 0.6);
33
+ $tds-ramp-overlay-dark-650: rgba(0, 0, 0, 0.65);
34
+ $tds-ramp-overlay-dark-700: rgba(0, 0, 0, 0.7);
35
+ $tds-ramp-overlay-dark-750: rgba(0, 0, 0, 0.75);
36
+ $tds-ramp-overlay-dark-800: rgba(0, 0, 0, 0.8);
37
+ $tds-ramp-overlay-dark-850: rgba(0, 0, 0, 0.85);
38
+ $tds-ramp-overlay-dark-900: rgba(0, 0, 0, 0.9);
39
+ $tds-ramp-overlay-dark-950: rgba(0, 0, 0, 0.95);
40
+ $tds-ramp-overlay-dark-1000: #000000;
41
+ $tds-ramp-messaging-info-50: #030710;
42
+ $tds-ramp-messaging-info-100: #050f21;
43
+ $tds-ramp-messaging-info-150: #071631;
44
+ $tds-ramp-messaging-info-200: #081e41;
45
+ $tds-ramp-messaging-info-250: #092551;
46
+ $tds-ramp-messaging-info-300: #0b2c61;
47
+ $tds-ramp-messaging-info-350: #0c3471;
48
+ $tds-ramp-messaging-info-400: #0d3b82;
49
+ $tds-ramp-messaging-info-450: #0e4392;
50
+ $tds-ramp-messaging-info-500: #0f4aa2;
51
+ $tds-ramp-messaging-info-550: #1f53a7;
52
+ $tds-ramp-messaging-info-600: #2c5cac;
53
+ $tds-ramp-messaging-info-650: #3965b0;
54
+ $tds-ramp-messaging-info-700: #456eb5;
55
+ $tds-ramp-messaging-info-750: #5177ba;
56
+ $tds-ramp-messaging-info-800: #5d80bf;
57
+ $tds-ramp-messaging-info-850: #6788c3;
58
+ $tds-ramp-messaging-info-900: #7493c8;
59
+ $tds-ramp-messaging-info-950: #809ccd;
60
+ $tds-ramp-messaging-info-1000: #8ca5d1;
61
+ $tds-ramp-messaging-error-50: #1a0403;
62
+ $tds-ramp-messaging-error-100: #340705;
63
+ $tds-ramp-messaging-error-150: #4d0806;
64
+ $tds-ramp-messaging-error-200: #660907;
65
+ $tds-ramp-messaging-error-250: #800a07;
66
+ $tds-ramp-messaging-error-300: #990a07;
67
+ $tds-ramp-messaging-error-350: #b30906;
68
+ $tds-ramp-messaging-error-400: #cc0705;
69
+ $tds-ramp-messaging-error-450: #e60403;
70
+ $tds-ramp-messaging-error-500: #ff0000;
71
+ $tds-ramp-messaging-error-550: #ff201a;
72
+ $tds-ramp-messaging-error-600: #ff312b;
73
+ $tds-ramp-messaging-error-650: #ff4039;
74
+ $tds-ramp-messaging-error-700: #ff4d46;
75
+ $tds-ramp-messaging-error-750: #ff5a53;
76
+ $tds-ramp-messaging-error-800: #ff665f;
77
+ $tds-ramp-messaging-error-850: #ff7069;
78
+ $tds-ramp-messaging-error-900: #ff7d76;
79
+ $tds-ramp-messaging-error-950: #ff8882;
80
+ $tds-ramp-messaging-error-1000: #ff938e;
81
+ $tds-ramp-messaging-warning-50: #1a1004;
82
+ $tds-ramp-messaging-warning-100: #332107;
83
+ $tds-ramp-messaging-warning-150: #4d3109;
84
+ $tds-ramp-messaging-warning-200: #66410a;
85
+ $tds-ramp-messaging-warning-250: #80520a;
86
+ $tds-ramp-messaging-warning-300: #99620a;
87
+ $tds-ramp-messaging-warning-350: #b37209;
88
+ $tds-ramp-messaging-warning-400: #cc8207;
89
+ $tds-ramp-messaging-warning-450: #e69304;
90
+ $tds-ramp-messaging-warning-500: #ffa300;
91
+ $tds-ramp-messaging-warning-550: #ffa821;
92
+ $tds-ramp-messaging-warning-600: #ffac33;
93
+ $tds-ramp-messaging-warning-650: #ffb142;
94
+ $tds-ramp-messaging-warning-700: #ffb64f;
95
+ $tds-ramp-messaging-warning-750: #ffba5c;
96
+ $tds-ramp-messaging-warning-800: #ffbf68;
97
+ $tds-ramp-messaging-warning-850: #ffc372;
98
+ $tds-ramp-messaging-warning-900: #ffc87f;
99
+ $tds-ramp-messaging-warning-950: #ffcd8a;
100
+ $tds-ramp-messaging-warning-1000: #ffd195;
101
+ $tds-ramp-messaging-success-50: #07100b;
102
+ $tds-ramp-messaging-success-100: #0c2116;
103
+ $tds-ramp-messaging-success-150: #113121;
104
+ $tds-ramp-messaging-success-200: #16422c;
105
+ $tds-ramp-messaging-success-250: #1a5238;
106
+ $tds-ramp-messaging-success-300: #1f6243;
107
+ $tds-ramp-messaging-success-350: #24734e;
108
+ $tds-ramp-messaging-success-400: #288359;
109
+ $tds-ramp-messaging-success-450: #2d9464;
110
+ $tds-ramp-messaging-success-500: #31a46f;
111
+ $tds-ramp-messaging-success-550: #3fa976;
112
+ $tds-ramp-messaging-success-600: #4cad7e;
113
+ $tds-ramp-messaging-success-650: #57b285;
114
+ $tds-ramp-messaging-success-700: #62b68c;
115
+ $tds-ramp-messaging-success-750: #6dbb93;
116
+ $tds-ramp-messaging-success-800: #78c09b;
117
+ $tds-ramp-messaging-success-850: #81c4a1;
118
+ $tds-ramp-messaging-success-900: #8cc9a9;
119
+ $tds-ramp-messaging-success-950: #96cdb0;
120
+ $tds-ramp-messaging-success-1000: #a0d2b7;
121
+ $tds-ramp-neutral-50: #000000;
122
+ $tds-ramp-neutral-100: #0d0d0d;
123
+ $tds-ramp-neutral-150: #1a1a1a;
124
+ $tds-ramp-neutral-200: #262626;
125
+ $tds-ramp-neutral-250: #333333;
126
+ $tds-ramp-neutral-300: #404040;
127
+ $tds-ramp-neutral-350: #4d4d4d;
128
+ $tds-ramp-neutral-400: #585858;
129
+ $tds-ramp-neutral-450: #666666;
130
+ $tds-ramp-neutral-500: #737373;
131
+ $tds-ramp-neutral-550: #808080;
132
+ $tds-ramp-neutral-600: #8c8c8c;
133
+ $tds-ramp-neutral-650: #999999;
134
+ $tds-ramp-neutral-700: #a6a6a6;
135
+ $tds-ramp-neutral-750: #b3b3b3;
136
+ $tds-ramp-neutral-800: #bfbfbf;
137
+ $tds-ramp-neutral-850: #cccccc;
138
+ $tds-ramp-neutral-900: #d9d9d9;
139
+ $tds-ramp-neutral-950: #e5e6e6;
140
+ $tds-ramp-neutral-1000: #ffffff;