@times-design-system/theme-scss 1.1.1-alpha.831

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 (41) hide show
  1. package/README.md +193 -0
  2. package/dist/index.js +11 -0
  3. package/dist/palettes/_brand-dark.scss +166 -0
  4. package/dist/palettes/_brand-light.scss +166 -0
  5. package/dist/palettes/_business-dark.scss +148 -0
  6. package/dist/palettes/_business-light.scss +148 -0
  7. package/dist/palettes/_channels-dark.scss +279 -0
  8. package/dist/palettes/_channels-light.scss +279 -0
  9. package/dist/palettes/_comment-dark.scss +148 -0
  10. package/dist/palettes/_comment-light.scss +148 -0
  11. package/dist/palettes/_core-dark.scss +148 -0
  12. package/dist/palettes/_core-light.scss +148 -0
  13. package/dist/palettes/_culture-dark.scss +148 -0
  14. package/dist/palettes/_culture-light.scss +148 -0
  15. package/dist/palettes/_dataVisualisation-dark.scss +202 -0
  16. package/dist/palettes/_dataVisualisation-light.scss +202 -0
  17. package/dist/palettes/_home-dark.scss +148 -0
  18. package/dist/palettes/_home-light.scss +148 -0
  19. package/dist/palettes/_ireland-dark.scss +148 -0
  20. package/dist/palettes/_ireland-light.scss +148 -0
  21. package/dist/palettes/_lifeAndStyle-dark.scss +146 -0
  22. package/dist/palettes/_lifeAndStyle-light.scss +146 -0
  23. package/dist/palettes/_marketing-dark.scss +16 -0
  24. package/dist/palettes/_marketing-light.scss +16 -0
  25. package/dist/palettes/_money-dark.scss +148 -0
  26. package/dist/palettes/_money-light.scss +148 -0
  27. package/dist/palettes/_obituaries-dark.scss +148 -0
  28. package/dist/palettes/_obituaries-light.scss +148 -0
  29. package/dist/palettes/_puzzles-dark.scss +146 -0
  30. package/dist/palettes/_puzzles-light.scss +146 -0
  31. package/dist/palettes/_sport-dark.scss +148 -0
  32. package/dist/palettes/_sport-light.scss +148 -0
  33. package/dist/palettes/_travel-dark.scss +148 -0
  34. package/dist/palettes/_travel-light.scss +148 -0
  35. package/dist/palettes/_uk-dark.scss +148 -0
  36. package/dist/palettes/_uk-light.scss +148 -0
  37. package/dist/palettes/_world-dark.scss +148 -0
  38. package/dist/palettes/_world-light.scss +148 -0
  39. package/dist/tds-layout.scss +180 -0
  40. package/dist/tds-typography.scss +827 -0
  41. package/package.json +48 -0
package/README.md ADDED
@@ -0,0 +1,193 @@
1
+ # @times-design-system/theme-wordpress
2
+
3
+ Times Design System theme tokens, React hooks, and CSS variables for building themed applications.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ npm install @times-design-system/theme-wordpress
9
+ ```
10
+
11
+ ## Usage
12
+
13
+ ### JavaScript/React Tokens & Hooks
14
+
15
+ ```javascript
16
+ import {
17
+ tokens,
18
+ useTypographyToken
19
+ } from '@times-design-system/theme-wordpress';
20
+
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)"
24
+
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
+ };
30
+ ```
31
+
32
+ ### CSS Custom Properties
33
+
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 */
49
+ }
50
+
51
+ h1 {
52
+ font-size: var(--tds-font-size100);
53
+ margin: var(--tds-spacing-050);
54
+ }
55
+ ```
56
+
57
+ ### Import only specific modules
58
+
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';
68
+ ```
69
+
70
+ ## Available Exports
71
+
72
+ ### JavaScript Modules
73
+
74
+ - **tokens** - Complete design token object with all Foundation, Palette, and Semantic tokens
75
+ - **useTypographyToken** - React hook for applying typography styles to elements
76
+
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.
84
+
85
+ ## Package Contents
86
+
87
+ ```
88
+ 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
93
+ ```
94
+
95
+ ### Token Structure
96
+
97
+ #### Foundation Tokens
98
+
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
+ ```
105
+
106
+ #### Palette Tokens (Pre-resolved Colors)
107
+
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
115
+
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
120
+ ```
121
+
122
+ ## React Hook Usage
123
+
124
+ ### useTypographyToken(tokenPath)
125
+
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
+ };
145
+ ```
146
+
147
+ Returns object:
148
+
149
+ ```javascript
150
+ {
151
+ fontFamily: 'Times Modern, serif',
152
+ fontSize: '2.25rem',
153
+ fontWeight: 700,
154
+ lineHeight: 1.2,
155
+ letterSpacing: '-0.02em'
156
+ }
157
+ ```
158
+
159
+ ## Browser Support
160
+
161
+ All CSS custom properties (--tds-\*) are supported in modern browsers (Chrome, Firefox, Safari, Edge).
162
+
163
+ For older browsers, use the JavaScript tokens with fallback values:
164
+
165
+ ```javascript
166
+ const fontSize = tokens.Foundation.fontSize100 || '2.25rem';
167
+ ```
168
+
169
+ ## Building
170
+
171
+ To rebuild the package after modifying tokens:
172
+
173
+ ```bash
174
+ npm run build
175
+ ```
176
+
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.
190
+
191
+ ## License
192
+
193
+ ISC
package/dist/index.js ADDED
@@ -0,0 +1,11 @@
1
+ // SCSS Theme Package Entry Point
2
+ // This package exports SCSS stylesheets
3
+
4
+ const scssFiles = {
5
+ layout: './tds-layout.scss',
6
+ typography: './tds-typography.scss',
7
+ variables: './variables.css',
8
+ palettes: './palettes/'
9
+ };
10
+
11
+ export { scssFiles };
package/dist/palettes/_brand-dark.scss ADDED
@@ -0,0 +1,166 @@
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;
package/dist/palettes/_brand-light.scss ADDED
@@ -0,0 +1,166 @@
1
+ $tds-brand-core-ramp-digital-cream-50: #feffff;
2
+ $tds-brand-core-ramp-digital-cream-100: #fefefe;
3
+ $tds-brand-core-ramp-digital-cream-150: #fdfefe;
4
+ $tds-brand-core-ramp-digital-cream-200: #fcfefe;
5
+ $tds-brand-core-ramp-digital-cream-250: #fbfdfd;
6
+ $tds-brand-core-ramp-digital-cream-300: #f9fcfc;
7
+ $tds-brand-core-ramp-digital-cream-350: #f7fbfb;
8
+ $tds-brand-core-ramp-digital-cream-400: #f5fafa;
9
+ $tds-brand-core-ramp-digital-cream-450: #f2f9f9;
10
+ $tds-brand-core-ramp-digital-cream-500: #f0f8f8;
11
+ $tds-brand-core-ramp-digital-cream-550: #eef7f7;
12
+ $tds-brand-core-ramp-digital-cream-600: #ebf6f6;
13
+ $tds-brand-core-ramp-digital-cream-650: #eaf5f5;
14
+ $tds-brand-core-ramp-digital-cream-700: #eaf5f5;
15
+ $tds-brand-core-ramp-digital-cream-750: #f4f2e8;
16
+ $tds-brand-core-ramp-digital-cream-800: #a8d5d5;
17
+ $tds-brand-core-ramp-digital-cream-850: #87c6c6;
18
+ $tds-brand-core-ramp-digital-cream-900: #67b6b6;
19
+ $tds-brand-core-ramp-digital-cream-950: #4da1a1;
20
+ $tds-brand-core-ramp-digital-cream-1000: #3e8181;
21
+ $tds-brand-core-ramp-digital-blue-50: #f6f6f6;
22
+ $tds-brand-core-ramp-digital-blue-100: #ececec;
23
+ $tds-brand-core-ramp-digital-blue-150: #e3e3e3;
24
+ $tds-brand-core-ramp-digital-blue-200: #dadada;
25
+ $tds-brand-core-ramp-digital-blue-250: #c7c7c7;
26
+ $tds-brand-core-ramp-digital-blue-300: #b5b5b5;
27
+ $tds-brand-core-ramp-digital-blue-350: #a2a2a2;
28
+ $tds-brand-core-ramp-digital-blue-400: #7d7d7d;
29
+ $tds-brand-core-ramp-digital-blue-450: #585858;
30
+ $tds-brand-core-ramp-digital-blue-500: #323232;
31
+ $tds-brand-core-ramp-digital-blue-550: #0d0d0d;
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: #005c8a;
37
+ $tds-brand-core-ramp-digital-blue-850: #000000;
38
+ $tds-brand-core-ramp-digital-blue-900: #000000;
39
+ $tds-brand-core-ramp-digital-blue-950: #000000;
40
+ $tds-brand-core-ramp-digital-blue-1000: #000000;
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: #f7f7f7;
62
+ $tds-brand-core-ramp-messaging-info-100: #f0f0f0;
63
+ $tds-brand-core-ramp-messaging-info-150: #e8e8e8;
64
+ $tds-brand-core-ramp-messaging-info-200: #d9d9d9;
65
+ $tds-brand-core-ramp-messaging-info-250: #cacaca;
66
+ $tds-brand-core-ramp-messaging-info-300: #b3b3b3;
67
+ $tds-brand-core-ramp-messaging-info-350: #949494;
68
+ $tds-brand-core-ramp-messaging-info-400: #767676;
69
+ $tds-brand-core-ramp-messaging-info-450: #575757;
70
+ $tds-brand-core-ramp-messaging-info-500: #393939;
71
+ $tds-brand-core-ramp-messaging-info-550: #1a1a1a;
72
+ $tds-brand-core-ramp-messaging-info-600: #131313;
73
+ $tds-brand-core-ramp-messaging-info-650: #111111;
74
+ $tds-brand-core-ramp-messaging-info-700: #0f4aa2;
75
+ $tds-brand-core-ramp-messaging-info-750: #0e0e0e;
76
+ $tds-brand-core-ramp-messaging-info-800: #0c0c0c;
77
+ $tds-brand-core-ramp-messaging-info-850: #0a0a0a;
78
+ $tds-brand-core-ramp-messaging-info-900: #090909;
79
+ $tds-brand-core-ramp-messaging-info-950: #080808;
80
+ $tds-brand-core-ramp-messaging-info-1000: #060606;
81
+ $tds-brand-core-ramp-messaging-error-50: #fff9f9;
82
+ $tds-brand-core-ramp-messaging-error-100: #fff2f2;
83
+ $tds-brand-core-ramp-messaging-error-150: #ffecec;
84
+ $tds-brand-core-ramp-messaging-error-200: #ffdfdf;
85
+ $tds-brand-core-ramp-messaging-error-250: #ffd2d2;
86
+ $tds-brand-core-ramp-messaging-error-300: #ffbfbf;
87
+ $tds-brand-core-ramp-messaging-error-350: #ffa6a6;
88
+ $tds-brand-core-ramp-messaging-error-400: #ff8c8c;
89
+ $tds-brand-core-ramp-messaging-error-450: #ff7373;
90
+ $tds-brand-core-ramp-messaging-error-500: #ff5959;
91
+ $tds-brand-core-ramp-messaging-error-550: #ff4040;
92
+ $tds-brand-core-ramp-messaging-error-600: #ff2626;
93
+ $tds-brand-core-ramp-messaging-error-650: #ff1313;
94
+ $tds-brand-core-ramp-messaging-error-700: #ff0000;
95
+ $tds-brand-core-ramp-messaging-error-750: #e60000;
96
+ $tds-brand-core-ramp-messaging-error-800: #cc0000;
97
+ $tds-brand-core-ramp-messaging-error-850: #b30000;
98
+ $tds-brand-core-ramp-messaging-error-900: #990000;
99
+ $tds-brand-core-ramp-messaging-error-950: #800000;
100
+ $tds-brand-core-ramp-messaging-error-1000: #660000;
101
+ $tds-brand-core-ramp-messaging-warning-50: #f9fffb;
102
+ $tds-brand-core-ramp-messaging-warning-100: #f2fff6;
103
+ $tds-brand-core-ramp-messaging-warning-150: #ecfff2;
104
+ $tds-brand-core-ramp-messaging-warning-200: #dfffe9;
105
+ $tds-brand-core-ramp-messaging-warning-250: #d2ffe0;
106
+ $tds-brand-core-ramp-messaging-warning-300: #bfffd2;
107
+ $tds-brand-core-ramp-messaging-warning-350: #a6ffc1;
108
+ $tds-brand-core-ramp-messaging-warning-400: #8cffaf;
109
+ $tds-brand-core-ramp-messaging-warning-450: #73ff9d;
110
+ $tds-brand-core-ramp-messaging-warning-500: #59ff8b;
111
+ $tds-brand-core-ramp-messaging-warning-550: #40ff79;
112
+ $tds-brand-core-ramp-messaging-warning-600: #26ff68;
113
+ $tds-brand-core-ramp-messaging-warning-650: #13ff5a;
114
+ $tds-brand-core-ramp-messaging-warning-700: #ffa300;
115
+ $tds-brand-core-ramp-messaging-warning-750: #00e645;
116
+ $tds-brand-core-ramp-messaging-warning-800: #00cc3d;
117
+ $tds-brand-core-ramp-messaging-warning-850: #00b336;
118
+ $tds-brand-core-ramp-messaging-warning-900: #00992e;
119
+ $tds-brand-core-ramp-messaging-warning-950: #008026;
120
+ $tds-brand-core-ramp-messaging-warning-1000: #00661f;
121
+ $tds-brand-core-ramp-messaging-success-50: #f9fdfd;
122
+ $tds-brand-core-ramp-messaging-success-100: #f4fafc;
123
+ $tds-brand-core-ramp-messaging-success-150: #eef8fa;
124
+ $tds-brand-core-ramp-messaging-success-200: #e2f4f6;
125
+ $tds-brand-core-ramp-messaging-success-250: #d7eff3;
126
+ $tds-brand-core-ramp-messaging-success-300: #c6e8ee;
127
+ $tds-brand-core-ramp-messaging-success-350: #afdfe7;
128
+ $tds-brand-core-ramp-messaging-success-400: #98d6e0;
129
+ $tds-brand-core-ramp-messaging-success-450: #81cdd9;
130
+ $tds-brand-core-ramp-messaging-success-500: #6ac4d3;
131
+ $tds-brand-core-ramp-messaging-success-550: #53bbcc;
132
+ $tds-brand-core-ramp-messaging-success-600: #3db2c5;
133
+ $tds-brand-core-ramp-messaging-success-650: #36a3b5;
134
+ $tds-brand-core-ramp-messaging-success-700: #31a46f;
135
+ $tds-brand-core-ramp-messaging-success-750: #2c8594;
136
+ $tds-brand-core-ramp-messaging-success-800: #277683;
137
+ $tds-brand-core-ramp-messaging-success-850: #226773;
138
+ $tds-brand-core-ramp-messaging-success-900: #1d5962;
139
+ $tds-brand-core-ramp-messaging-success-950: #184a52;
140
+ $tds-brand-core-ramp-messaging-success-1000: #143b42;
141
+ $tds-brand-core-ramp-neutral-50: #ffffff;
142
+ $tds-brand-core-ramp-neutral-100: #f2f2f2;
143
+ $tds-brand-core-ramp-neutral-150: #e6e6e6;
144
+ $tds-brand-core-ramp-neutral-200: #d9d9d9;
145
+ $tds-brand-core-ramp-neutral-250: #cccccc;
146
+ $tds-brand-core-ramp-neutral-300: #bfbfbf;
147
+ $tds-brand-core-ramp-neutral-350: #b3b3b3;
148
+ $tds-brand-core-ramp-neutral-400: #a6a6a6;
149
+ $tds-brand-core-ramp-neutral-450: #999999;
150
+ $tds-brand-core-ramp-neutral-500: #8c8c8c;
151
+ $tds-brand-core-ramp-neutral-550: #808080;
152
+ $tds-brand-core-ramp-neutral-600: #737373;
153
+ $tds-brand-core-ramp-neutral-650: #666666;
154
+ $tds-brand-core-ramp-neutral-700: #595959;
155
+ $tds-brand-core-ramp-neutral-750: #4d4d4d;
156
+ $tds-brand-core-ramp-neutral-800: #404040;
157
+ $tds-brand-core-ramp-neutral-850: #333333;
158
+ $tds-brand-core-ramp-neutral-900: #262626;
159
+ $tds-brand-core-ramp-neutral-950: #1a1a1a;
160
+ $tds-brand-core-ramp-neutral-1000: #000000;
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;
package/dist/palettes/_business-dark.scss ADDED
@@ -0,0 +1,148 @@
1
+ $tds-surface-undercanvas: #1a1a1a;
2
+ $tds-surface-canvas: #0d0d0d;
3
+ $tds-surface-level-1: #0d0d0d;
4
+ $tds-surface-level-2: #1a1a1a;
5
+ $tds-surface-level-3: #262626;
6
+ $tds-surface-level-4: #1a1a1a;
7
+ $tds-surface-inverse: #ffffff;
8
+ $tds-surface-overlay: rgba(0, 0, 0, 0.55);
9
+ $tds-surface-channel-high: #272727;
10
+ $tds-surface-channel-medium: #1a1a1a;
11
+ $tds-surface-channel-low: #0d0d0d;
12
+ $tds-surface-static-dark: #000000;
13
+ $tds-surface-static-light: #ffffff;
14
+ $tds-text-primary: #ffffff;
15
+ $tds-text-secondary: #d9d9d9;
16
+ $tds-text-tertiary: #a6a6a6;
17
+ $tds-text-inverse-primary: #000000;
18
+ $tds-text-inverse-secondary: #737373;
19
+ $tds-text-channel-primary: #535353;
20
+ $tds-text-channel-secondary: #292929;
21
+ $tds-text-static-dark: #000000;
22
+ $tds-text-static-light: #ffffff;
23
+ $tds-icon-primary: #ffffff;
24
+ $tds-icon-secondary: #d9d9d9;
25
+ $tds-icon-tertiary: #a6a6a6;
26
+ $tds-icon-inverse-primary: #000000;
27
+ $tds-icon-inverse-secondary: #737373;
28
+ $tds-icon-channel-primary: #21709c;
29
+ $tds-icon-channel-secondary: #272727;
30
+ $tds-border-primary: #595959;
31
+ $tds-border-secondary: #333333;
32
+ $tds-border-tertiary: #1a1a1a;
33
+ $tds-border-inverse-primary: #000000;
34
+ $tds-border-inverse-secondary: #737373;
35
+ $tds-border-channel-primary: #1e1e1e;
36
+ $tds-border-channel-secondary: #141414;
37
+ $tds-border-channel-tertiary: #0d0d0d;
38
+ $tds-border-elevation: #333333;
39
+ $tds-border-static-dark: #000000;
40
+ $tds-border-static-light: #ffffff;
41
+ $tds-tag-filled-live-fill: #ff0000;
42
+ $tds-tag-filled-live-text: #0d0d0d;
43
+ $tds-tag-filled-primary-fill: #2c2c2c;
44
+ $tds-tag-filled-primary-text: #0d0d0d;
45
+ $tds-tag-filled-secondary-border: #0d0d0d;
46
+ $tds-tag-filled-secondary-fill: #0d0d0d;
47
+ $tds-tag-filled-secondary-text: #0d0d0d;
48
+ $tds-tag-inline-live-text: #ff0000;
49
+ $tds-tag-inline-primary-text: #2c2c2c;
50
+ $tds-tag-inline-secondary-text: #0d0d0d;
51
+ $tds-tag-channel-text: #21709c;
52
+ $tds-input-fill-default: #000000;
53
+ $tds-input-fill-error: #1a0000;
54
+ $tds-input-fill-hover: #1a1a1a;
55
+ $tds-input-fill-active: #262626;
56
+ $tds-input-fill-completed: #76c8d6;
57
+ $tds-input-fill-success: #050f10;
58
+ $tds-input-fill-warning: #001a08;
59
+ $tds-input-fill-info: #010101;
60
+ $tds-input-border-default: #8c8c8c;
61
+ $tds-input-border-error: #ff4040;
62
+ $tds-input-border-hover: #595959;
63
+ $tds-input-border-active: #737373;
64
+ $tds-input-border-completed: #48b6c8;
65
+ $tds-input-border-success: #53bbcc;
66
+ $tds-input-border-warning: #40ff79;
67
+ $tds-input-border-info: #1a1a1a;
68
+ $tds-input-text-default: #a6a6a6;
69
+ $tds-input-text-error: #ff4040;
70
+ $tds-input-text-hover: #ffffff;
71
+ $tds-input-text-active: #ffffff;
72
+ $tds-input-text-completed: #0a1e21;
73
+ $tds-input-text-success: #53bbcc;
74
+ $tds-input-text-warning: #40ff79;
75
+ $tds-input-text-info: #1a1a1a;
76
+ $tds-input-icon-default: #a6a6a6;
77
+ $tds-input-icon-hover: #ffffff;
78
+ $tds-input-icon-active: #ffffff;
79
+ $tds-input-icon-completed: #0a1e21;
80
+ $tds-input-icon-error: #ff4040;
81
+ $tds-input-icon-success: #53bbcc;
82
+ $tds-input-icon-warning: #40ff79;
83
+ $tds-input-icon-info: #1a1a1a;
84
+ $tds-feedback-fill-error: #1a0000;
85
+ $tds-feedback-fill-success: #050f10;
86
+ $tds-feedback-fill-warning: #001a08;
87
+ $tds-feedback-fill-info: #010101;
88
+ $tds-feedback-text-error: #ff4040;
89
+ $tds-feedback-text-success: #53bbcc;
90
+ $tds-feedback-text-warning: #40ff79;
91
+ $tds-feedback-text-info: #1a1a1a;
92
+ $tds-feedback-border-error: #ff4040;
93
+ $tds-feedback-border-success: #53bbcc;
94
+ $tds-feedback-border-warning: #40ff79;
95
+ $tds-feedback-border-info: #1a1a1a;
96
+ $tds-feedback-icon-error: #ff4040;
97
+ $tds-feedback-icon-success: #53bbcc;
98
+ $tds-feedback-icon-warning: #40ff79;
99
+ $tds-feedback-icon-info: #1a1a1a;
100
+ $tds-interactive-primary-fill-default: #000000;
101
+ $tds-interactive-primary-fill-hover: #000000;
102
+ $tds-interactive-primary-fill-pressed: #000000;
103
+ $tds-interactive-primary-text-default: #ffffff;
104
+ $tds-interactive-primary-text-hover: #ffffff;
105
+ $tds-interactive-primary-text-pressed: #ffffff;
106
+ $tds-interactive-primary-icon-default: #ffffff;
107
+ $tds-interactive-primary-icon-hover: #ffffff;
108
+ $tds-interactive-primary-icon-pressed: #ffffff;
109
+ $tds-interactive-secondary-fill-default: #000000;
110
+ $tds-interactive-secondary-fill-hover: #000000;
111
+ $tds-interactive-secondary-fill-pressed: #000000;
112
+ $tds-interactive-secondary-border-default: #8c8c8c;
113
+ $tds-interactive-secondary-border-hover: #8c8c8c;
114
+ $tds-interactive-secondary-border-pressed: #8c8c8c;
115
+ $tds-interactive-secondary-text-default: #d9d9d9;
116
+ $tds-interactive-secondary-text-hover: #d9d9d9;
117
+ $tds-interactive-secondary-text-pressed: #d9d9d9;
118
+ $tds-interactive-secondary-icon-default: #d9d9d9;
119
+ $tds-interactive-secondary-icon-hover: #d9d9d9;
120
+ $tds-interactive-secondary-icon-pressed: #d9d9d9;
121
+ $tds-interactive-disabled-a: #262626;
122
+ $tds-interactive-disabled-b: #404040;
123
+ $tds-interactive-disabled-c: #595959;
124
+ $tds-interactive-link-primary-default: #0d0d0d;
125
+ $tds-interactive-link-primary-hover: #0d0d0d;
126
+ $tds-interactive-link-primary-pressed: #0d0d0d;
127
+ $tds-interactive-link-secondary-default: #8c8c8c;
128
+ $tds-interactive-link-secondary-hover: #8c8c8c;
129
+ $tds-interactive-link-secondary-pressed: #8c8c8c;
130
+ $tds-focus-border: #8c8c8c;
131
+ $tds-selection-background: #ffffff;
132
+ $tds-selection-text: #000000;
133
+ $tds-selected-fill-default: #ffffff;
134
+ $tds-selected-fill-hover: #ffffff;
135
+ $tds-selected-fill-pressed: #ffffff;
136
+ $tds-selected-text-default: #000000;
137
+ $tds-selected-text-hover: #000000;
138
+ $tds-selected-text-pressed: #000000;
139
+ $tds-selected-border-default: #ffffff;
140
+ $tds-selected-border-hover: #ffffff;
141
+ $tds-selected-border-pressed: #ffffff;
142
+ $tds-selected-icon-default: #000000;
143
+ $tds-selected-icon-hover: #000000;
144
+ $tds-selected-icon-pressed: #000000;
145
+ $tds-active-fill: #ffffff;
146
+ $tds-active-text: #000000;
147
+ $tds-active-border: #ffffff;
148
+ $tds-active-icon: #000000;