@times-design-system/theme-scss 2.1.0 → 2.2.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 (32) hide show
  1. package/README.md +50 -56
  2. package/dist/palettes/business-dark.scss +91 -81
  3. package/dist/palettes/business-light.scss +11 -1
  4. package/dist/palettes/comment-dark.scss +91 -81
  5. package/dist/palettes/comment-light.scss +11 -1
  6. package/dist/palettes/core-dark.scss +90 -80
  7. package/dist/palettes/core-light.scss +11 -1
  8. package/dist/palettes/culture-dark.scss +91 -81
  9. package/dist/palettes/culture-light.scss +11 -1
  10. package/dist/palettes/home-dark.scss +91 -81
  11. package/dist/palettes/home-light.scss +11 -1
  12. package/dist/palettes/ireland-dark.scss +91 -81
  13. package/dist/palettes/ireland-light.scss +11 -1
  14. package/dist/palettes/lifeAndStyle-dark.scss +91 -81
  15. package/dist/palettes/lifeAndStyle-light.scss +11 -1
  16. package/dist/palettes/money-dark.scss +91 -81
  17. package/dist/palettes/money-light.scss +11 -1
  18. package/dist/palettes/obituaries-dark.scss +91 -81
  19. package/dist/palettes/obituaries-light.scss +11 -1
  20. package/dist/palettes/puzzles-dark.scss +91 -81
  21. package/dist/palettes/puzzles-light.scss +11 -1
  22. package/dist/palettes/sport-dark.scss +91 -81
  23. package/dist/palettes/sport-light.scss +11 -1
  24. package/dist/palettes/travel-dark.scss +91 -81
  25. package/dist/palettes/travel-light.scss +11 -1
  26. package/dist/palettes/uk-dark.scss +91 -81
  27. package/dist/palettes/uk-light.scss +11 -1
  28. package/dist/palettes/world-dark.scss +91 -81
  29. package/dist/palettes/world-light.scss +11 -1
  30. package/dist/tds-layout.scss +60 -6
  31. package/dist/tds-typography.scss +78 -35
  32. package/package.json +3 -3
package/README.md CHANGED
@@ -5,7 +5,7 @@ Times Design System SCSS theme package with pre-compiled palette files and utili
5
5
  ## Installation
6
6
 
7
7
  ```bash
8
- npm install @times-design-system/theme-scss
8
+ yarn add @times-design-system/theme-scss
9
9
  ```
10
10
 
11
11
  ## Usage
@@ -19,9 +19,9 @@ npm install @times-design-system/theme-scss
19
19
  // Import layout utilities
20
20
  @import '@times-design-system/theme-scss/tds-layout.scss';
21
21
 
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';
22
+ // Import a specific theme palette
23
+ @import '@times-design-system/theme-scss/palettes/core-light.scss';
24
+ @import '@times-design-system/theme-scss/palettes/core-dark.scss';
25
25
  ```
26
26
 
27
27
  ### Using Design Tokens in SCSS
@@ -29,21 +29,21 @@ npm install @times-design-system/theme-scss
29
29
  ```scss
30
30
  // Access color variables
31
31
  body {
32
- background-color: $tds-surface-canvas;
33
- color: $tds-text-primary;
32
+ background-color: $dark-core-surface-canvas;
33
+ color: $dark-core-text-primary;
34
34
  }
35
35
 
36
- // Use typography utilities
36
+ // Use typography mixins located in tds-typography.scss
37
37
  h1 {
38
- @include tds-heading-large;
39
- margin-bottom: $tds-spacing-200;
38
+ @include brand-heading-fluid-light-xlarge;
39
+ margin-bottom: $spacing-200;
40
40
  }
41
41
 
42
42
  // Use spacing tokens
43
43
  .component {
44
- padding: $tds-spacing-100;
45
- margin: $tds-spacing-050;
46
- border-radius: $tds-radius-100;
44
+ padding: $spacing-100;
45
+ margin: $spacing-050;
46
+ border-radius: $radius-100;
47
47
  }
48
48
  ```
49
49
 
@@ -53,48 +53,47 @@ All channel and brand palettes are included:
53
53
 
54
54
  ```
55
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)
56
+ ├── core-light.scss # Core theme (light mode)
57
+ ├── core-dark.scss # Core theme (dark mode)
58
+ ├── business-light.scss # Business theme (light mode)
59
+ ├── business-dark.scss # Business theme (dark mode)
60
+ ├── culture-light.scss # Culture theme (light mode)
61
+ ├── culture-dark.scss # Culture theme (dark mode)
62
+ ├── home-light.scss # Home theme (light mode)
63
+ ├── home-dark.scss # Home theme (dark mode)
64
+ ├── sport-light.scss # Sport theme (light mode)
65
+ ├── sport-dark.scss # Sport theme (dark mode)
66
+ └── ... (14 additional theme variants)
63
67
  ```
64
68
 
65
69
  ## Package Contents
66
70
 
67
71
  ```
68
72
  dist/
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
73
+ ├── tds-layout.scss # Layout and grid utilities
74
+ ├── tds-typography.scss # Typography mixins and utilities
75
+ └── palettes/ # Theme-specific SCSS palette files
76
+ ├── business-light.scss
77
+ ├── business-dark.scss
78
+ ├── core-light.scss
79
+ ├── core-dark.scss
80
+ └── ... (24 total theme variants)
76
81
  ```
77
82
 
78
83
  ## Available Tokens
79
84
 
80
85
  ### Color Tokens
81
86
 
82
- All tokens follow a consistent naming pattern:
87
+ All tokens follow a consistent naming pattern of $[MODE]-[THEME]-[TOKEN]. Colour tokens have been published in both light and dark mode files for each theme, where the client will be responsible for resolving dynamic references to tokens for the associated theme/channel.
83
88
 
84
89
  ```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
92
-
93
- // Brand colors
94
- $tds-brand-home-500
95
- $tds-brand-business-500
96
- $tds-brand-sport-500
97
- // ... and more channels
90
+ // Semantic colors
91
+ $[MODE-THEME]-text-primary
92
+ $[MODE-THEME]-text-secondary
93
+ $[MODE-THEME]-text-tertiary
94
+ $[MODE-THEME]-surface-canvas
95
+ $[MODE-THEME]-surface-level-1
96
+ $[MODE-THEME]-border-primary
98
97
 
99
98
  // Dark mode variants
100
99
  // Use the palette files or CSS custom properties with light-dark()
@@ -103,30 +102,25 @@ $tds-brand-sport-500
103
102
  ### Spacing Tokens
104
103
 
105
104
  ```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
105
+ $spacing-025 // 0.25rem
106
+ $spacing-050 // 0.5rem
107
+ $spacing-100 // 1rem
108
+ $spacing-200 // 1.5rem
109
+ // ... scales up to $spacing-400
111
110
  ```
112
111
 
113
112
  ### Typography
114
113
 
115
114
  ```scss
116
115
  // Use typography mixins
117
- @include tds-heading-large;
118
- @include tds-body-standard;
119
- @include tds-label-small;
116
+ @include brand-heading-fluid-light-large;
117
+ @include utility-body-regular-medium;
118
+ @include utility-label-small;
120
119
  ```
121
120
 
122
121
  ## Dark Mode Support
123
122
 
124
- The package includes dedicated dark mode palettes. Use CSS custom properties with `light-dark()` for best results:
125
-
126
- ```scss
127
- color: light-dark($tds-text-primary, $tds-text-primary-dark);
128
- background: light-dark($tds-surface-canvas, $tds-surface-canvas-dark);
129
- ```
123
+ The package includes dedicated dark mode palettes that can be referenced where applicable.
130
124
 
131
125
  ## Compatibility
132
126
 
@@ -139,10 +133,10 @@ background: light-dark($tds-surface-canvas, $tds-surface-canvas-dark);
139
133
  To rebuild the package after modifying tokens:
140
134
 
141
135
  ```bash
142
- npm run build
136
+ yarn build
143
137
  ```
144
138
 
145
- This will compile SCSS files with deduplication and asset distribution.
139
+ This will compile SCSS files with asset distribution.
146
140
 
147
141
  ## License
148
142
 
package/dist/palettes/business-dark.scss CHANGED
@@ -24,12 +24,12 @@ $dark-business-text-channel-tertiary: #1d658d;
24
24
  $dark-business-text-static-dark: #000000;
25
25
  $dark-business-text-static-light: #ffffff;
26
26
  $dark-business-text-inverse: #000000;
27
- $dark-business-icon-primary: #000000;
28
- $dark-business-icon-secondary: #262626;
29
- $dark-business-icon-tertiary: #595959;
27
+ $dark-business-icon-primary: #ffffff;
28
+ $dark-business-icon-secondary: #d9d9d9;
29
+ $dark-business-icon-tertiary: #a6a6a6;
30
30
  $dark-business-icon-channel-primary: #21709c;
31
31
  $dark-business-icon-channel-secondary: #3b7fa7;
32
- $dark-business-icon-channel-tertiary: #89b1c9;
32
+ $dark-business-icon-channel-tertiary: #1d658d;
33
33
  $dark-business-icon-inverse: #000000;
34
34
  $dark-business-border-primary: #575757;
35
35
  $dark-business-border-secondary: #333333;
@@ -50,67 +50,67 @@ $dark-business-input-fill-warning: #664109;
50
50
  $dark-business-input-fill-info: #08295a;
51
51
  $dark-business-input-border-default: #737373;
52
52
  $dark-business-input-border-error: #ff7268;
53
- $dark-business-input-border-hover: #808080;
53
+ $dark-business-input-border-hover: #6d6d6d;
54
54
  $dark-business-input-border-active: #a6a6a6;
55
55
  $dark-business-input-border-completed: #d9d9d9;
56
56
  $dark-business-input-border-success: #80c4a1;
57
57
  $dark-business-input-border-warning: #ffc77f;
58
58
  $dark-business-input-border-info: #466fb5;
59
- $dark-business-input-text-default: #595959;
60
- $dark-business-input-text-error: #000000;
61
- $dark-business-input-text-hover: #262626;
62
- $dark-business-input-text-active: #000000;
63
- $dark-business-input-text-completed: #000000;
64
- $dark-business-input-text-success: #000000;
65
- $dark-business-input-text-warning: #000000;
66
- $dark-business-input-text-info: #000000;
67
- $dark-business-input-icon-default: #8c8c8c;
59
+ $dark-business-input-text-default: #a6a6a6;
60
+ $dark-business-input-text-error: #ffffff;
61
+ $dark-business-input-text-hover: #d9d9d9;
62
+ $dark-business-input-text-active: #ffffff;
63
+ $dark-business-input-text-completed: #ffffff;
64
+ $dark-business-input-text-success: #ffffff;
65
+ $dark-business-input-text-warning: #ffffff;
66
+ $dark-business-input-text-info: #ffffff;
67
+ $dark-business-input-icon-default: #737373;
68
68
  $dark-business-input-icon-hover: #6d6d6d;
69
- $dark-business-input-icon-active: #595959;
70
- $dark-business-input-icon-completed: #262626;
71
- $dark-business-input-icon-error: #e70300;
72
- $dark-business-input-icon-success: #2c9365;
73
- $dark-business-input-icon-warning: #cc8103;
74
- $dark-business-input-icon-info: #2658a9;
69
+ $dark-business-input-icon-active: #a6a6a6;
70
+ $dark-business-input-icon-completed: #d9d9d9;
71
+ $dark-business-input-icon-error: #ff7268;
72
+ $dark-business-input-icon-success: #80c4a1;
73
+ $dark-business-input-icon-warning: #ffc77f;
74
+ $dark-business-input-icon-info: #466fb5;
75
75
  $dark-business-active-fill: #ffffff;
76
76
  $dark-business-active-text: #000000;
77
77
  $dark-business-active-border: #ffffff;
78
78
  $dark-business-active-icon: #000000;
79
79
  $dark-business-focus-border: #8c8c8c;
80
- $dark-business-label-primary: #000000;
81
- $dark-business-label-secondary: #262626;
82
- $dark-business-label-channel: #347ca4;
83
- $dark-business-label-callout: #ff403a;
80
+ $dark-business-label-primary: #ffffff;
81
+ $dark-business-label-secondary: #d9d9d9;
82
+ $dark-business-label-channel: #4786ac;
83
+ $dark-business-label-callout: #ff3933;
84
84
  $dark-business-flag-primary-fill: #ffffff;
85
85
  $dark-business-flag-primary-text: #0d0d0d;
86
- $dark-business-flag-primary-icon: #f2f2f2;
87
- $dark-business-flag-secondary-text: #000000;
88
- $dark-business-flag-secondary-icon: #000000;
89
- $dark-business-flag-channel-fill: #a0bed3;
90
- $dark-business-flag-channel-text: #0f2c3f;
91
- $dark-business-flag-channel-icon: #0f2c3f;
86
+ $dark-business-flag-primary-icon: #0d0d0d;
87
+ $dark-business-flag-secondary-text: #ffffff;
88
+ $dark-business-flag-secondary-icon: #ffffff;
89
+ $dark-business-flag-channel-fill: #1b5b7d;
90
+ $dark-business-flag-channel-text: #94b9ce;
91
+ $dark-business-flag-channel-icon: #94b9ce;
92
92
  $dark-business-flag-callout-fill: #ff3933;
93
- $dark-business-flag-callout-text: #000000;
94
- $dark-business-flag-callout-icon: #000000;
93
+ $dark-business-flag-callout-text: #ffffff;
94
+ $dark-business-flag-callout-icon: #ffffff;
95
95
  $dark-business-interactive-primary-fill-default: #ffffff;
96
96
  $dark-business-interactive-primary-fill-hover: #ffffff;
97
97
  $dark-business-interactive-primary-fill-pressed: #ffffff;
98
98
  $dark-business-interactive-primary-text-default: #000000;
99
- $dark-business-interactive-primary-text-hover: #ffffff;
100
- $dark-business-interactive-primary-text-pressed: #ffffff;
101
- $dark-business-interactive-primary-icon-default: #ffffff;
102
- $dark-business-interactive-primary-icon-hover: #ffffff;
103
- $dark-business-interactive-primary-icon-pressed: #ffffff;
104
- $dark-business-interactive-secondary-fill-default: #ffffff;
99
+ $dark-business-interactive-primary-text-hover: #000000;
100
+ $dark-business-interactive-primary-text-pressed: #000000;
101
+ $dark-business-interactive-primary-icon-default: #000000;
102
+ $dark-business-interactive-primary-icon-hover: #000000;
103
+ $dark-business-interactive-primary-icon-pressed: #000000;
104
+ $dark-business-interactive-secondary-fill-default: #000000;
105
105
  $dark-business-interactive-secondary-fill-hover: #262626;
106
106
  $dark-business-interactive-secondary-fill-pressed: #333333;
107
107
  $dark-business-interactive-secondary-border-default: #8c8c8c;
108
108
  $dark-business-interactive-secondary-border-hover: #9d9d9d;
109
109
  $dark-business-interactive-secondary-border-pressed: #a3a3a3;
110
- $dark-business-interactive-secondary-text-default: #000000;
110
+ $dark-business-interactive-secondary-text-default: #ffffff;
111
111
  $dark-business-interactive-secondary-text-hover: #ffffff;
112
112
  $dark-business-interactive-secondary-text-pressed: #ffffff;
113
- $dark-business-interactive-secondary-icon-default: #000000;
113
+ $dark-business-interactive-secondary-icon-default: #ffffff;
114
114
  $dark-business-interactive-secondary-icon-hover: #ffffff;
115
115
  $dark-business-interactive-secondary-icon-pressed: #ffffff;
116
116
  $dark-business-interactive-disabled-a: #262626;
@@ -119,123 +119,133 @@ $dark-business-interactive-disabled-c: #575757;
119
119
  $dark-business-interactive-negative-fill-default: #000000;
120
120
  $dark-business-interactive-negative-fill-hover: #000000;
121
121
  $dark-business-interactive-negative-fill-pressed: #000000;
122
- $dark-business-interactive-negative-border-default: #ff8883;
122
+ $dark-business-interactive-negative-border-default: #e70300;
123
123
  $dark-business-interactive-negative-border-hover: #c40300;
124
124
  $dark-business-interactive-negative-border-pressed: #b90200;
125
125
  $dark-business-interactive-negative-text-default: #e70300;
126
126
  $dark-business-interactive-negative-text-hover: #c40300;
127
127
  $dark-business-interactive-negative-text-pressed: #b90200;
128
- $dark-business-interactive-negative-icon-default: #ff8883;
128
+ $dark-business-interactive-negative-icon-default: #e70300;
129
129
  $dark-business-interactive-negative-icon-hover: #c40300;
130
130
  $dark-business-interactive-negative-icon-pressed: #b90200;
131
131
  $dark-business-interactive-link-secondary-text-default: #8c8c8c;
132
132
  $dark-business-interactive-link-secondary-text-hover: #777777;
133
133
  $dark-business-interactive-link-secondary-text-pressed: #707070;
134
134
  $dark-business-interactive-link-secondary-text-visited: #9a9a9a;
135
- $dark-business-interactive-link-secondary-icon-default: #737373;
135
+ $dark-business-interactive-link-secondary-icon-default: #8c8c8c;
136
136
  $dark-business-interactive-link-secondary-icon-hover: #777777;
137
137
  $dark-business-interactive-link-secondary-icon-pressed: #707070;
138
138
  $dark-business-interactive-link-secondary-icon-visited: #9a9a9a;
139
- $dark-business-interactive-link-secondary-underline-default: #737373;
139
+ $dark-business-interactive-link-secondary-underline-default: #8c8c8c;
140
140
  $dark-business-interactive-link-secondary-underline-hover: #9d9d9d;
141
141
  $dark-business-interactive-link-secondary-underline-pressed: #a3a3a3;
142
142
  $dark-business-interactive-link-secondary-underline-visited: #7e7e7e;
143
- $dark-business-interactive-link-primary-text-default: #000000;
143
+ $dark-business-interactive-link-primary-text-default: #ffffff;
144
144
  $dark-business-interactive-link-primary-text-hover: #d9d9d9;
145
145
  $dark-business-interactive-link-primary-text-pressed: #cccccc;
146
146
  $dark-business-interactive-link-primary-text-visited: #ffffff;
147
- $dark-business-interactive-link-primary-icon-default: #000000;
147
+ $dark-business-interactive-link-primary-icon-default: #ffffff;
148
148
  $dark-business-interactive-link-primary-icon-hover: #d9d9d9;
149
149
  $dark-business-interactive-link-primary-icon-pressed: #cccccc;
150
150
  $dark-business-interactive-link-primary-icon-visited: #ffffff;
151
- $dark-business-interactive-link-primary-underline-default: #000000;
151
+ $dark-business-interactive-link-primary-underline-default: #ffffff;
152
152
  $dark-business-interactive-link-primary-underline-hover: #ffffff;
153
153
  $dark-business-interactive-link-primary-underline-pressed: #ffffff;
154
154
  $dark-business-interactive-link-primary-underline-visited: #e6e6e6;
155
- $dark-business-interactive-chip-primary-on-fill-default: #000000;
155
+ $dark-business-interactive-chip-primary-on-fill-default: #ffffff;
156
156
  $dark-business-interactive-chip-primary-on-fill-hover: #d9d9d9;
157
157
  $dark-business-interactive-chip-primary-on-fill-pressed: #cccccc;
158
- $dark-business-interactive-chip-primary-on-text-default: #ffffff;
158
+ $dark-business-interactive-chip-primary-on-text-default: #000000;
159
159
  $dark-business-interactive-chip-primary-on-text-hover: #000000;
160
160
  $dark-business-interactive-chip-primary-on-text-pressed: #000000;
161
- $dark-business-interactive-chip-primary-on-icon-default: #ffffff;
161
+ $dark-business-interactive-chip-primary-on-icon-default: #000000;
162
162
  $dark-business-interactive-chip-primary-on-icon-hover: #000000;
163
163
  $dark-business-interactive-chip-primary-on-icon-pressed: #000000;
164
- $dark-business-interactive-chip-primary-off-fill-default: #ffffff;
164
+ $dark-business-interactive-chip-primary-off-fill-default: #000000;
165
165
  $dark-business-interactive-chip-primary-off-fill-hover: #000000;
166
166
  $dark-business-interactive-chip-primary-off-fill-pressed: #000000;
167
- $dark-business-interactive-chip-primary-off-text-default: #000000;
167
+ $dark-business-interactive-chip-primary-off-text-default: #ffffff;
168
168
  $dark-business-interactive-chip-primary-off-text-hover: #d9d9d9;
169
169
  $dark-business-interactive-chip-primary-off-text-pressed: #cccccc;
170
- $dark-business-interactive-chip-primary-off-icon-default: #000000;
170
+ $dark-business-interactive-chip-primary-off-icon-default: #ffffff;
171
171
  $dark-business-interactive-chip-primary-off-icon-hover: #d9d9d9;
172
172
  $dark-business-interactive-chip-primary-off-icon-pressed: #cccccc;
173
- $dark-business-interactive-chip-primary-off-border-default: #000000;
173
+ $dark-business-interactive-chip-primary-off-border-default: #ffffff;
174
174
  $dark-business-interactive-chip-primary-off-border-hover: #d9d9d9;
175
175
  $dark-business-interactive-chip-primary-off-border-pressed: #cccccc;
176
- $dark-business-interactive-chip-secondary-on-text-default: #000000;
176
+ $dark-business-interactive-chip-secondary-on-text-default: #ffffff;
177
177
  $dark-business-interactive-chip-secondary-on-text-hover: #d9d9d9;
178
178
  $dark-business-interactive-chip-secondary-on-text-pressed: #cccccc;
179
179
  $dark-business-interactive-chip-secondary-on-fill-default: #262626;
180
180
  $dark-business-interactive-chip-secondary-on-fill-hover: #202020;
181
181
  $dark-business-interactive-chip-secondary-on-fill-pressed: #1e1e1e;
182
- $dark-business-interactive-chip-secondary-on-border-default: #737373;
182
+ $dark-business-interactive-chip-secondary-on-border-default: #8c8c8c;
183
183
  $dark-business-interactive-chip-secondary-on-border-hover: #777777;
184
184
  $dark-business-interactive-chip-secondary-on-border-pressed: #707070;
185
- $dark-business-interactive-chip-secondary-on-icon-default: #000000;
185
+ $dark-business-interactive-chip-secondary-on-icon-default: #ffffff;
186
186
  $dark-business-interactive-chip-secondary-on-icon-hover: #d9d9d9;
187
187
  $dark-business-interactive-chip-secondary-on-icon-pressed: #cccccc;
188
- $dark-business-interactive-chip-secondary-off-fill-default: #d9d9d9;
188
+ $dark-business-interactive-chip-secondary-off-fill-default: #262626;
189
189
  $dark-business-interactive-chip-secondary-off-fill-hover: #202020;
190
190
  $dark-business-interactive-chip-secondary-off-fill-pressed: #1e1e1e;
191
- $dark-business-interactive-chip-secondary-off-text-default: #595959;
191
+ $dark-business-interactive-chip-secondary-off-text-default: #a6a6a6;
192
192
  $dark-business-interactive-chip-secondary-off-text-hover: #8d8d8d;
193
193
  $dark-business-interactive-chip-secondary-off-text-pressed: #858585;
194
- $dark-business-interactive-chip-secondary-off-icon-default: #595959;
194
+ $dark-business-interactive-chip-secondary-off-icon-default: #a6a6a6;
195
195
  $dark-business-interactive-chip-secondary-off-icon-hover: #8d8d8d;
196
196
  $dark-business-interactive-chip-secondary-off-icon-pressed: #858585;
197
197
  $dark-business-interactive-chip-channel-secondary-off-fill-default: #0f2c3f;
198
198
  $dark-business-interactive-chip-channel-secondary-off-fill-hover: #0d2536;
199
199
  $dark-business-interactive-chip-channel-secondary-off-fill-pressed: #0c2332;
200
- $dark-business-interactive-chip-channel-secondary-off-text-default: #1a4e6e;
200
+ $dark-business-interactive-chip-channel-secondary-off-text-default: #73a2c0;
201
201
  $dark-business-interactive-chip-channel-secondary-off-text-hover: #538eb2;
202
202
  $dark-business-interactive-chip-channel-secondary-off-text-pressed: #4c86a9;
203
- $dark-business-interactive-chip-channel-secondary-off-icon-default: #1a4e6e;
203
+ $dark-business-interactive-chip-channel-secondary-off-icon-default: #73a2c0;
204
204
  $dark-business-interactive-chip-channel-secondary-off-icon-hover: #538eb2;
205
205
  $dark-business-interactive-chip-channel-secondary-off-icon-pressed: #4c86a9;
206
- $dark-business-interactive-chip-channel-secondary-on-border-default: #1a4e6e;
206
+ $dark-business-interactive-chip-channel-secondary-on-border-default: #73a2c0;
207
207
  $dark-business-interactive-chip-channel-secondary-on-border-hover: #538eb2;
208
208
  $dark-business-interactive-chip-channel-secondary-on-border-pressed: #4c86a9;
209
- $dark-business-interactive-chip-channel-secondary-on-fill-default: #e4edf3;
209
+ $dark-business-interactive-chip-channel-secondary-on-fill-default: #0f2c3f;
210
210
  $dark-business-interactive-chip-channel-secondary-on-fill-hover: #0d2536;
211
211
  $dark-business-interactive-chip-channel-secondary-on-fill-pressed: #0c2332;
212
- $dark-business-interactive-chip-channel-secondary-on-text-default: #000000;
212
+ $dark-business-interactive-chip-channel-secondary-on-text-default: #ffffff;
213
213
  $dark-business-interactive-chip-channel-secondary-on-text-hover: #d9d9d9;
214
214
  $dark-business-interactive-chip-channel-secondary-on-text-pressed: #cccccc;
215
- $dark-business-interactive-chip-channel-secondary-on-icon-default: #000000;
215
+ $dark-business-interactive-chip-channel-secondary-on-icon-default: #ffffff;
216
216
  $dark-business-interactive-chip-channel-secondary-on-icon-hover: #d9d9d9;
217
217
  $dark-business-interactive-chip-channel-secondary-on-icon-pressed: #cccccc;
218
- $dark-business-interactive-chip-channel-primary-off-fill-default: #f4f7fa;
218
+ $dark-business-interactive-chip-channel-primary-off-fill-default: #06171f;
219
219
  $dark-business-interactive-chip-channel-primary-off-fill-hover: #05141a;
220
220
  $dark-business-interactive-chip-channel-primary-off-fill-pressed: #051219;
221
- $dark-business-interactive-chip-channel-primary-off-text-default: #0f2c3f;
221
+ $dark-business-interactive-chip-channel-primary-off-text-default: #94b9ce;
222
222
  $dark-business-interactive-chip-channel-primary-off-text-hover: #70a1bd;
223
223
  $dark-business-interactive-chip-channel-primary-off-text-pressed: #6399b8;
224
- $dark-business-interactive-chip-channel-primary-off-icon-default: #0f2c3f;
224
+ $dark-business-interactive-chip-channel-primary-off-icon-default: #94b9ce;
225
225
  $dark-business-interactive-chip-channel-primary-off-icon-hover: #70a1bd;
226
226
  $dark-business-interactive-chip-channel-primary-off-icon-pressed: #6399b8;
227
- $dark-business-interactive-chip-channel-primary-off-border-default: #a0bed3;
227
+ $dark-business-interactive-chip-channel-primary-off-border-default: #1b5b7d;
228
228
  $dark-business-interactive-chip-channel-primary-off-border-hover: #174d6a;
229
229
  $dark-business-interactive-chip-channel-primary-off-border-pressed: #164864;
230
- $dark-business-interactive-chip-channel-primary-on-fill-default: #a0bed3;
230
+ $dark-business-interactive-chip-channel-primary-on-fill-default: #1b5b7d;
231
231
  $dark-business-interactive-chip-channel-primary-on-fill-hover: #174d6a;
232
232
  $dark-business-interactive-chip-channel-primary-on-fill-pressed: #164864;
233
- $dark-business-interactive-chip-channel-primary-on-text-default: #000000;
233
+ $dark-business-interactive-chip-channel-primary-on-text-default: #ffffff;
234
234
  $dark-business-interactive-chip-channel-primary-on-text-hover: #d9d9d9;
235
235
  $dark-business-interactive-chip-channel-primary-on-text-pressed: #cccccc;
236
- $dark-business-interactive-chip-channel-primary-on-icon-default: #000000;
236
+ $dark-business-interactive-chip-channel-primary-on-icon-default: #ffffff;
237
237
  $dark-business-interactive-chip-channel-primary-on-icon-hover: #d9d9d9;
238
238
  $dark-business-interactive-chip-channel-primary-on-icon-pressed: #cccccc;
239
+ $dark-business-interactive-tab-fill-default: #000000;
240
+ $dark-business-interactive-tab-fill-hover: #0d0d0d;
241
+ $dark-business-interactive-tab-fill-pressed: #262626;
242
+ $dark-business-interactive-tab-text-default: #ffffff;
243
+ $dark-business-interactive-tab-text-hover: #d9d9d9;
244
+ $dark-business-interactive-tab-text-pressed: #d9d9d9;
245
+ $dark-business-interactive-tab-icon-default: #ffffff;
246
+ $dark-business-interactive-tab-icon-hover: #d9d9d9;
247
+ $dark-business-interactive-tab-icon-pressed: #d9d9d9;
248
+ $dark-business-interactive-tab-selected-border-default: #ffffff;
239
249
  $dark-business-toast-fill-info: #0f4aa2;
240
250
  $dark-business-toast-fill-success: #2c865b;
241
251
  $dark-business-toast-fill-warning: #e49307;
@@ -251,10 +261,10 @@ $dark-business-toast-text-warning: #000000;
251
261
  $dark-business-toast-link-info-default: #ffffff;
252
262
  $dark-business-toast-link-info-hover: #d9d9d9;
253
263
  $dark-business-toast-link-info-pressed: #cccccc;
254
- $dark-business-toast-link-success-default: #000000;
264
+ $dark-business-toast-link-success-default: #ffffff;
255
265
  $dark-business-toast-link-success-hover: #d9d9d9;
256
266
  $dark-business-toast-link-success-pressed: #cccccc;
257
- $dark-business-toast-link-error-default: #000000;
267
+ $dark-business-toast-link-error-default: #ffffff;
258
268
  $dark-business-toast-link-error-hover: #d9d9d9;
259
269
  $dark-business-toast-link-error-pressed: #cccccc;
260
270
  $dark-business-toast-link-warning-default: #000000;
@@ -272,18 +282,18 @@ $dark-business-messaging-icon-error: #ff7268;
272
282
  $dark-business-messaging-icon-success: #80c4a1;
273
283
  $dark-business-messaging-icon-warning: #ffa722;
274
284
  $dark-business-messaging-icon-info: #6f8dc6;
275
- $dark-business-messaging-link-text-default: #000000;
285
+ $dark-business-messaging-link-text-default: #ffffff;
276
286
  $dark-business-messaging-link-text-hover: #d9d9d9;
277
287
  $dark-business-messaging-link-text-pressed: #cccccc;
278
288
  $dark-business-messaging-link-text-visited: #ffffff;
279
- $dark-business-messaging-link-icon-default: #000000;
289
+ $dark-business-messaging-link-icon-default: #ffffff;
280
290
  $dark-business-messaging-link-icon-hover: #d9d9d9;
281
291
  $dark-business-messaging-link-icon-pressed: #cccccc;
282
292
  $dark-business-messaging-link-icon-visited: #ffffff;
283
- $dark-business-messaging-link-underline-default: #000000;
293
+ $dark-business-messaging-link-underline-default: #ffffff;
284
294
  $dark-business-messaging-link-underline-hover: #ffffff;
285
295
  $dark-business-messaging-link-underline-pressed: #ffffff;
286
296
  $dark-business-messaging-link-underline-visited: #e6e6e6;
287
- $dark-business-tooltip-fill: #000000;
288
- $dark-business-tooltip-text: #ffffff;
289
- $dark-business-tooltip-icon: #ffffff;
297
+ $dark-business-tooltip-fill: #ffffff;
298
+ $dark-business-tooltip-text: #000000;
299
+ $dark-business-tooltip-icon: #000000;
package/dist/palettes/business-light.scss CHANGED
@@ -50,7 +50,7 @@ $light-business-input-fill-warning: #fff7ef;
50
50
  $light-business-input-fill-info: #eff2f8;
51
51
  $light-business-input-border-default: #8c8c8c;
52
52
  $light-business-input-border-error: #b20908;
53
- $light-business-input-border-hover: #808080;
53
+ $light-business-input-border-hover: #6d6d6d;
54
54
  $light-business-input-border-active: #595959;
55
55
  $light-business-input-border-completed: #262626;
56
56
  $light-business-input-border-success: #298458;
@@ -216,6 +216,16 @@ $light-business-interactive-chip-channel-primary-off-icon-pressed: #0d2e3e;
216
216
  $light-business-interactive-chip-channel-primary-off-border-default: #b6cddd;
217
217
  $light-business-interactive-chip-channel-primary-off-border-hover: #8db0ca;
218
218
  $light-business-interactive-chip-channel-primary-off-border-pressed: #7fa7c3;
219
+ $light-business-interactive-tab-fill-default: #ffffff;
220
+ $light-business-interactive-tab-fill-hover: #f2f2f2;
221
+ $light-business-interactive-tab-fill-pressed: #d9d9d9;
222
+ $light-business-interactive-tab-text-default: #1a1a1a;
223
+ $light-business-interactive-tab-text-hover: #404040;
224
+ $light-business-interactive-tab-text-pressed: #404040;
225
+ $light-business-interactive-tab-icon-default: #1a1a1a;
226
+ $light-business-interactive-tab-icon-hover: #404040;
227
+ $light-business-interactive-tab-icon-pressed: #404040;
228
+ $light-business-interactive-tab-selected-border-default: #000000;
219
229
  $light-business-active-fill: #000000;
220
230
  $light-business-active-text: #ffffff;
221
231
  $light-business-active-border: #000000;