@times-design-system/theme-scss 2.1.0 → 2.3.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 (42) hide show
  1. package/README.md +50 -56
  2. package/dist/palettes/business-dark.scss +99 -84
  3. package/dist/palettes/business-light.scss +27 -12
  4. package/dist/palettes/comment-dark.scss +99 -84
  5. package/dist/palettes/comment-light.scss +27 -12
  6. package/dist/palettes/core-dark.scss +98 -83
  7. package/dist/palettes/core-light.scss +27 -12
  8. package/dist/palettes/culture-dark.scss +99 -84
  9. package/dist/palettes/culture-light.scss +27 -12
  10. package/dist/palettes/home-dark.scss +99 -84
  11. package/dist/palettes/home-light.scss +27 -12
  12. package/dist/palettes/ireland-dark.scss +99 -84
  13. package/dist/palettes/ireland-light.scss +27 -12
  14. package/dist/palettes/lifeAndStyle-dark.scss +99 -84
  15. package/dist/palettes/lifeAndStyle-light.scss +27 -12
  16. package/dist/palettes/magazineLuxx-dark.scss +304 -0
  17. package/dist/palettes/magazineLuxx-light.scss +304 -0
  18. package/dist/palettes/magazineSundayTimes-dark.scss +304 -0
  19. package/dist/palettes/magazineSundayTimes-light.scss +304 -0
  20. package/dist/palettes/magazineTimes-dark.scss +304 -0
  21. package/dist/palettes/magazineTimes-light.scss +304 -0
  22. package/dist/palettes/money-dark.scss +99 -84
  23. package/dist/palettes/money-light.scss +27 -12
  24. package/dist/palettes/obituaries-dark.scss +99 -84
  25. package/dist/palettes/obituaries-light.scss +27 -12
  26. package/dist/palettes/puzzles-dark.scss +99 -84
  27. package/dist/palettes/puzzles-light.scss +27 -12
  28. package/dist/palettes/sport-dark.scss +99 -84
  29. package/dist/palettes/sport-light.scss +27 -12
  30. package/dist/palettes/timesPlus-dark.scss +304 -0
  31. package/dist/palettes/timesPlus-light.scss +304 -0
  32. package/dist/palettes/timesRadio-dark.scss +42 -0
  33. package/dist/palettes/timesRadio-light.scss +42 -0
  34. package/dist/palettes/travel-dark.scss +99 -84
  35. package/dist/palettes/travel-light.scss +27 -12
  36. package/dist/palettes/uk-dark.scss +99 -84
  37. package/dist/palettes/uk-light.scss +27 -12
  38. package/dist/palettes/world-dark.scss +99 -84
  39. package/dist/palettes/world-light.scss +27 -12
  40. package/dist/tds-layout.scss +31 -43
  41. package/dist/tds-typography.scss +94 -35
  42. 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,72 @@ $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;
84
- $dark-business-flag-primary-fill: #ffffff;
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;
92
- $dark-business-flag-callout-fill: #ff3933;
93
- $dark-business-flag-callout-text: #000000;
94
- $dark-business-flag-callout-icon: #000000;
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
+ $dark-business-tag-primary-fill: #ffffff;
85
+ $dark-business-tag-primary-text: #000000;
86
+ $dark-business-tag-primary-icon: #000000;
87
+ $dark-business-tag-secondary-fill: #262626;
88
+ $dark-business-tag-secondary-text: #ffffff;
89
+ $dark-business-tag-secondary-icon: #ffffff;
90
+ $dark-business-tag-tertiary-text: #ffffff;
91
+ $dark-business-tag-tertiary-icon: #ffffff;
92
+ $dark-business-tag-callout-primary-fill: #ff3933;
93
+ $dark-business-tag-callout-primary-text: #ffffff;
94
+ $dark-business-tag-callout-primary-icon: #ffffff;
95
+ $dark-business-tag-callout-secondary-fill: #670909;
96
+ $dark-business-tag-callout-secondary-text: #ff3933;
97
+ $dark-business-tag-callout-secondary-icon: #ff3933;
98
+ $dark-business-tag-callout-tertiary-text: #ff3933;
99
+ $dark-business-tag-callout-tertiary-icon: #ff3933;
95
100
  $dark-business-interactive-primary-fill-default: #ffffff;
96
101
  $dark-business-interactive-primary-fill-hover: #ffffff;
97
102
  $dark-business-interactive-primary-fill-pressed: #ffffff;
98
103
  $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;
104
+ $dark-business-interactive-primary-text-hover: #000000;
105
+ $dark-business-interactive-primary-text-pressed: #000000;
106
+ $dark-business-interactive-primary-icon-default: #000000;
107
+ $dark-business-interactive-primary-icon-hover: #000000;
108
+ $dark-business-interactive-primary-icon-pressed: #000000;
109
+ $dark-business-interactive-secondary-fill-default: #000000;
105
110
  $dark-business-interactive-secondary-fill-hover: #262626;
106
111
  $dark-business-interactive-secondary-fill-pressed: #333333;
107
112
  $dark-business-interactive-secondary-border-default: #8c8c8c;
108
113
  $dark-business-interactive-secondary-border-hover: #9d9d9d;
109
114
  $dark-business-interactive-secondary-border-pressed: #a3a3a3;
110
- $dark-business-interactive-secondary-text-default: #000000;
115
+ $dark-business-interactive-secondary-text-default: #ffffff;
111
116
  $dark-business-interactive-secondary-text-hover: #ffffff;
112
117
  $dark-business-interactive-secondary-text-pressed: #ffffff;
113
- $dark-business-interactive-secondary-icon-default: #000000;
118
+ $dark-business-interactive-secondary-icon-default: #ffffff;
114
119
  $dark-business-interactive-secondary-icon-hover: #ffffff;
115
120
  $dark-business-interactive-secondary-icon-pressed: #ffffff;
116
121
  $dark-business-interactive-disabled-a: #262626;
@@ -119,123 +124,133 @@ $dark-business-interactive-disabled-c: #575757;
119
124
  $dark-business-interactive-negative-fill-default: #000000;
120
125
  $dark-business-interactive-negative-fill-hover: #000000;
121
126
  $dark-business-interactive-negative-fill-pressed: #000000;
122
- $dark-business-interactive-negative-border-default: #ff8883;
127
+ $dark-business-interactive-negative-border-default: #e70300;
123
128
  $dark-business-interactive-negative-border-hover: #c40300;
124
129
  $dark-business-interactive-negative-border-pressed: #b90200;
125
130
  $dark-business-interactive-negative-text-default: #e70300;
126
131
  $dark-business-interactive-negative-text-hover: #c40300;
127
132
  $dark-business-interactive-negative-text-pressed: #b90200;
128
- $dark-business-interactive-negative-icon-default: #ff8883;
133
+ $dark-business-interactive-negative-icon-default: #e70300;
129
134
  $dark-business-interactive-negative-icon-hover: #c40300;
130
135
  $dark-business-interactive-negative-icon-pressed: #b90200;
131
136
  $dark-business-interactive-link-secondary-text-default: #8c8c8c;
132
137
  $dark-business-interactive-link-secondary-text-hover: #777777;
133
138
  $dark-business-interactive-link-secondary-text-pressed: #707070;
134
139
  $dark-business-interactive-link-secondary-text-visited: #9a9a9a;
135
- $dark-business-interactive-link-secondary-icon-default: #737373;
140
+ $dark-business-interactive-link-secondary-icon-default: #8c8c8c;
136
141
  $dark-business-interactive-link-secondary-icon-hover: #777777;
137
142
  $dark-business-interactive-link-secondary-icon-pressed: #707070;
138
143
  $dark-business-interactive-link-secondary-icon-visited: #9a9a9a;
139
- $dark-business-interactive-link-secondary-underline-default: #737373;
144
+ $dark-business-interactive-link-secondary-underline-default: #8c8c8c;
140
145
  $dark-business-interactive-link-secondary-underline-hover: #9d9d9d;
141
146
  $dark-business-interactive-link-secondary-underline-pressed: #a3a3a3;
142
147
  $dark-business-interactive-link-secondary-underline-visited: #7e7e7e;
143
- $dark-business-interactive-link-primary-text-default: #000000;
148
+ $dark-business-interactive-link-primary-text-default: #ffffff;
144
149
  $dark-business-interactive-link-primary-text-hover: #d9d9d9;
145
150
  $dark-business-interactive-link-primary-text-pressed: #cccccc;
146
151
  $dark-business-interactive-link-primary-text-visited: #ffffff;
147
- $dark-business-interactive-link-primary-icon-default: #000000;
152
+ $dark-business-interactive-link-primary-icon-default: #ffffff;
148
153
  $dark-business-interactive-link-primary-icon-hover: #d9d9d9;
149
154
  $dark-business-interactive-link-primary-icon-pressed: #cccccc;
150
155
  $dark-business-interactive-link-primary-icon-visited: #ffffff;
151
- $dark-business-interactive-link-primary-underline-default: #000000;
156
+ $dark-business-interactive-link-primary-underline-default: #ffffff;
152
157
  $dark-business-interactive-link-primary-underline-hover: #ffffff;
153
158
  $dark-business-interactive-link-primary-underline-pressed: #ffffff;
154
159
  $dark-business-interactive-link-primary-underline-visited: #e6e6e6;
155
- $dark-business-interactive-chip-primary-on-fill-default: #000000;
160
+ $dark-business-interactive-chip-primary-on-fill-default: #ffffff;
156
161
  $dark-business-interactive-chip-primary-on-fill-hover: #d9d9d9;
157
162
  $dark-business-interactive-chip-primary-on-fill-pressed: #cccccc;
158
- $dark-business-interactive-chip-primary-on-text-default: #ffffff;
163
+ $dark-business-interactive-chip-primary-on-text-default: #000000;
159
164
  $dark-business-interactive-chip-primary-on-text-hover: #000000;
160
165
  $dark-business-interactive-chip-primary-on-text-pressed: #000000;
161
- $dark-business-interactive-chip-primary-on-icon-default: #ffffff;
166
+ $dark-business-interactive-chip-primary-on-icon-default: #000000;
162
167
  $dark-business-interactive-chip-primary-on-icon-hover: #000000;
163
168
  $dark-business-interactive-chip-primary-on-icon-pressed: #000000;
164
- $dark-business-interactive-chip-primary-off-fill-default: #ffffff;
169
+ $dark-business-interactive-chip-primary-off-fill-default: #000000;
165
170
  $dark-business-interactive-chip-primary-off-fill-hover: #000000;
166
171
  $dark-business-interactive-chip-primary-off-fill-pressed: #000000;
167
- $dark-business-interactive-chip-primary-off-text-default: #000000;
172
+ $dark-business-interactive-chip-primary-off-text-default: #ffffff;
168
173
  $dark-business-interactive-chip-primary-off-text-hover: #d9d9d9;
169
174
  $dark-business-interactive-chip-primary-off-text-pressed: #cccccc;
170
- $dark-business-interactive-chip-primary-off-icon-default: #000000;
175
+ $dark-business-interactive-chip-primary-off-icon-default: #ffffff;
171
176
  $dark-business-interactive-chip-primary-off-icon-hover: #d9d9d9;
172
177
  $dark-business-interactive-chip-primary-off-icon-pressed: #cccccc;
173
- $dark-business-interactive-chip-primary-off-border-default: #000000;
178
+ $dark-business-interactive-chip-primary-off-border-default: #ffffff;
174
179
  $dark-business-interactive-chip-primary-off-border-hover: #d9d9d9;
175
180
  $dark-business-interactive-chip-primary-off-border-pressed: #cccccc;
176
- $dark-business-interactive-chip-secondary-on-text-default: #000000;
181
+ $dark-business-interactive-chip-secondary-on-text-default: #ffffff;
177
182
  $dark-business-interactive-chip-secondary-on-text-hover: #d9d9d9;
178
183
  $dark-business-interactive-chip-secondary-on-text-pressed: #cccccc;
179
184
  $dark-business-interactive-chip-secondary-on-fill-default: #262626;
180
185
  $dark-business-interactive-chip-secondary-on-fill-hover: #202020;
181
186
  $dark-business-interactive-chip-secondary-on-fill-pressed: #1e1e1e;
182
- $dark-business-interactive-chip-secondary-on-border-default: #737373;
187
+ $dark-business-interactive-chip-secondary-on-border-default: #8c8c8c;
183
188
  $dark-business-interactive-chip-secondary-on-border-hover: #777777;
184
189
  $dark-business-interactive-chip-secondary-on-border-pressed: #707070;
185
- $dark-business-interactive-chip-secondary-on-icon-default: #000000;
190
+ $dark-business-interactive-chip-secondary-on-icon-default: #ffffff;
186
191
  $dark-business-interactive-chip-secondary-on-icon-hover: #d9d9d9;
187
192
  $dark-business-interactive-chip-secondary-on-icon-pressed: #cccccc;
188
- $dark-business-interactive-chip-secondary-off-fill-default: #d9d9d9;
193
+ $dark-business-interactive-chip-secondary-off-fill-default: #262626;
189
194
  $dark-business-interactive-chip-secondary-off-fill-hover: #202020;
190
195
  $dark-business-interactive-chip-secondary-off-fill-pressed: #1e1e1e;
191
- $dark-business-interactive-chip-secondary-off-text-default: #595959;
196
+ $dark-business-interactive-chip-secondary-off-text-default: #a6a6a6;
192
197
  $dark-business-interactive-chip-secondary-off-text-hover: #8d8d8d;
193
198
  $dark-business-interactive-chip-secondary-off-text-pressed: #858585;
194
- $dark-business-interactive-chip-secondary-off-icon-default: #595959;
199
+ $dark-business-interactive-chip-secondary-off-icon-default: #a6a6a6;
195
200
  $dark-business-interactive-chip-secondary-off-icon-hover: #8d8d8d;
196
201
  $dark-business-interactive-chip-secondary-off-icon-pressed: #858585;
197
202
  $dark-business-interactive-chip-channel-secondary-off-fill-default: #0f2c3f;
198
203
  $dark-business-interactive-chip-channel-secondary-off-fill-hover: #0d2536;
199
204
  $dark-business-interactive-chip-channel-secondary-off-fill-pressed: #0c2332;
200
- $dark-business-interactive-chip-channel-secondary-off-text-default: #1a4e6e;
205
+ $dark-business-interactive-chip-channel-secondary-off-text-default: #73a2c0;
201
206
  $dark-business-interactive-chip-channel-secondary-off-text-hover: #538eb2;
202
207
  $dark-business-interactive-chip-channel-secondary-off-text-pressed: #4c86a9;
203
- $dark-business-interactive-chip-channel-secondary-off-icon-default: #1a4e6e;
208
+ $dark-business-interactive-chip-channel-secondary-off-icon-default: #73a2c0;
204
209
  $dark-business-interactive-chip-channel-secondary-off-icon-hover: #538eb2;
205
210
  $dark-business-interactive-chip-channel-secondary-off-icon-pressed: #4c86a9;
206
- $dark-business-interactive-chip-channel-secondary-on-border-default: #1a4e6e;
211
+ $dark-business-interactive-chip-channel-secondary-on-border-default: #73a2c0;
207
212
  $dark-business-interactive-chip-channel-secondary-on-border-hover: #538eb2;
208
213
  $dark-business-interactive-chip-channel-secondary-on-border-pressed: #4c86a9;
209
- $dark-business-interactive-chip-channel-secondary-on-fill-default: #e4edf3;
214
+ $dark-business-interactive-chip-channel-secondary-on-fill-default: #0f2c3f;
210
215
  $dark-business-interactive-chip-channel-secondary-on-fill-hover: #0d2536;
211
216
  $dark-business-interactive-chip-channel-secondary-on-fill-pressed: #0c2332;
212
- $dark-business-interactive-chip-channel-secondary-on-text-default: #000000;
217
+ $dark-business-interactive-chip-channel-secondary-on-text-default: #ffffff;
213
218
  $dark-business-interactive-chip-channel-secondary-on-text-hover: #d9d9d9;
214
219
  $dark-business-interactive-chip-channel-secondary-on-text-pressed: #cccccc;
215
- $dark-business-interactive-chip-channel-secondary-on-icon-default: #000000;
220
+ $dark-business-interactive-chip-channel-secondary-on-icon-default: #ffffff;
216
221
  $dark-business-interactive-chip-channel-secondary-on-icon-hover: #d9d9d9;
217
222
  $dark-business-interactive-chip-channel-secondary-on-icon-pressed: #cccccc;
218
- $dark-business-interactive-chip-channel-primary-off-fill-default: #f4f7fa;
223
+ $dark-business-interactive-chip-channel-primary-off-fill-default: #06171f;
219
224
  $dark-business-interactive-chip-channel-primary-off-fill-hover: #05141a;
220
225
  $dark-business-interactive-chip-channel-primary-off-fill-pressed: #051219;
221
- $dark-business-interactive-chip-channel-primary-off-text-default: #0f2c3f;
226
+ $dark-business-interactive-chip-channel-primary-off-text-default: #94b9ce;
222
227
  $dark-business-interactive-chip-channel-primary-off-text-hover: #70a1bd;
223
228
  $dark-business-interactive-chip-channel-primary-off-text-pressed: #6399b8;
224
- $dark-business-interactive-chip-channel-primary-off-icon-default: #0f2c3f;
229
+ $dark-business-interactive-chip-channel-primary-off-icon-default: #94b9ce;
225
230
  $dark-business-interactive-chip-channel-primary-off-icon-hover: #70a1bd;
226
231
  $dark-business-interactive-chip-channel-primary-off-icon-pressed: #6399b8;
227
- $dark-business-interactive-chip-channel-primary-off-border-default: #a0bed3;
232
+ $dark-business-interactive-chip-channel-primary-off-border-default: #1b5b7d;
228
233
  $dark-business-interactive-chip-channel-primary-off-border-hover: #174d6a;
229
234
  $dark-business-interactive-chip-channel-primary-off-border-pressed: #164864;
230
- $dark-business-interactive-chip-channel-primary-on-fill-default: #a0bed3;
235
+ $dark-business-interactive-chip-channel-primary-on-fill-default: #1b5b7d;
231
236
  $dark-business-interactive-chip-channel-primary-on-fill-hover: #174d6a;
232
237
  $dark-business-interactive-chip-channel-primary-on-fill-pressed: #164864;
233
- $dark-business-interactive-chip-channel-primary-on-text-default: #000000;
238
+ $dark-business-interactive-chip-channel-primary-on-text-default: #ffffff;
234
239
  $dark-business-interactive-chip-channel-primary-on-text-hover: #d9d9d9;
235
240
  $dark-business-interactive-chip-channel-primary-on-text-pressed: #cccccc;
236
- $dark-business-interactive-chip-channel-primary-on-icon-default: #000000;
241
+ $dark-business-interactive-chip-channel-primary-on-icon-default: #ffffff;
237
242
  $dark-business-interactive-chip-channel-primary-on-icon-hover: #d9d9d9;
238
243
  $dark-business-interactive-chip-channel-primary-on-icon-pressed: #cccccc;
244
+ $dark-business-interactive-tab-fill-default: #000000;
245
+ $dark-business-interactive-tab-fill-hover: #0d0d0d;
246
+ $dark-business-interactive-tab-fill-pressed: #262626;
247
+ $dark-business-interactive-tab-text-default: #ffffff;
248
+ $dark-business-interactive-tab-text-hover: #d9d9d9;
249
+ $dark-business-interactive-tab-text-pressed: #d9d9d9;
250
+ $dark-business-interactive-tab-icon-default: #ffffff;
251
+ $dark-business-interactive-tab-icon-hover: #d9d9d9;
252
+ $dark-business-interactive-tab-icon-pressed: #d9d9d9;
253
+ $dark-business-interactive-tab-selected-border-default: #ffffff;
239
254
  $dark-business-toast-fill-info: #0f4aa2;
240
255
  $dark-business-toast-fill-success: #2c865b;
241
256
  $dark-business-toast-fill-warning: #e49307;
@@ -251,10 +266,10 @@ $dark-business-toast-text-warning: #000000;
251
266
  $dark-business-toast-link-info-default: #ffffff;
252
267
  $dark-business-toast-link-info-hover: #d9d9d9;
253
268
  $dark-business-toast-link-info-pressed: #cccccc;
254
- $dark-business-toast-link-success-default: #000000;
269
+ $dark-business-toast-link-success-default: #ffffff;
255
270
  $dark-business-toast-link-success-hover: #d9d9d9;
256
271
  $dark-business-toast-link-success-pressed: #cccccc;
257
- $dark-business-toast-link-error-default: #000000;
272
+ $dark-business-toast-link-error-default: #ffffff;
258
273
  $dark-business-toast-link-error-hover: #d9d9d9;
259
274
  $dark-business-toast-link-error-pressed: #cccccc;
260
275
  $dark-business-toast-link-warning-default: #000000;
@@ -272,18 +287,18 @@ $dark-business-messaging-icon-error: #ff7268;
272
287
  $dark-business-messaging-icon-success: #80c4a1;
273
288
  $dark-business-messaging-icon-warning: #ffa722;
274
289
  $dark-business-messaging-icon-info: #6f8dc6;
275
- $dark-business-messaging-link-text-default: #000000;
290
+ $dark-business-messaging-link-text-default: #ffffff;
276
291
  $dark-business-messaging-link-text-hover: #d9d9d9;
277
292
  $dark-business-messaging-link-text-pressed: #cccccc;
278
293
  $dark-business-messaging-link-text-visited: #ffffff;
279
- $dark-business-messaging-link-icon-default: #000000;
294
+ $dark-business-messaging-link-icon-default: #ffffff;
280
295
  $dark-business-messaging-link-icon-hover: #d9d9d9;
281
296
  $dark-business-messaging-link-icon-pressed: #cccccc;
282
297
  $dark-business-messaging-link-icon-visited: #ffffff;
283
- $dark-business-messaging-link-underline-default: #000000;
298
+ $dark-business-messaging-link-underline-default: #ffffff;
284
299
  $dark-business-messaging-link-underline-hover: #ffffff;
285
300
  $dark-business-messaging-link-underline-pressed: #ffffff;
286
301
  $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;
302
+ $dark-business-tooltip-fill: #ffffff;
303
+ $dark-business-tooltip-text: #000000;
304
+ $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;
@@ -225,17 +235,22 @@ $light-business-label-primary: #1a1a1a;
225
235
  $light-business-label-secondary: #737373;
226
236
  $light-business-label-channel: #73a2c0;
227
237
  $light-business-label-callout: #b20908;
228
- $light-business-flag-primary-fill: #000000;
229
- $light-business-flag-primary-text: #f2f2f2;
230
- $light-business-flag-primary-icon: #f2f2f2;
231
- $light-business-flag-secondary-text: #1a1a1a;
232
- $light-business-flag-secondary-icon: #1a1a1a;
233
- $light-business-flag-channel-fill: #b6cddd;
234
- $light-business-flag-channel-text: #10394e;
235
- $light-business-flag-channel-icon: #10394e;
236
- $light-business-flag-callout-fill: #b20908;
237
- $light-business-flag-callout-text: #ffffff;
238
- $light-business-flag-callout-icon: #ffffff;
238
+ $light-business-tag-primary-fill: #000000;
239
+ $light-business-tag-primary-text: #ffffff;
240
+ $light-business-tag-primary-icon: #ffffff;
241
+ $light-business-tag-secondary-fill: #d9d9d9;
242
+ $light-business-tag-secondary-text: #1a1a1a;
243
+ $light-business-tag-secondary-icon: #1a1a1a;
244
+ $light-business-tag-tertiary-text: #1a1a1a;
245
+ $light-business-tag-tertiary-icon: #1a1a1a;
246
+ $light-business-tag-callout-primary-fill: #b20908;
247
+ $light-business-tag-callout-primary-text: #ffffff;
248
+ $light-business-tag-callout-primary-icon: #ffffff;
249
+ $light-business-tag-callout-secondary-fill: #ffefef;
250
+ $light-business-tag-callout-secondary-text: #b20908;
251
+ $light-business-tag-callout-secondary-icon: #b20908;
252
+ $light-business-tag-callout-tertiary-text: #b20908;
253
+ $light-business-tag-callout-tertiary-icon: #b20908;
239
254
  $light-business-toast-fill-info: #0a3472;
240
255
  $light-business-toast-fill-success: #22724f;
241
256
  $light-business-toast-fill-warning: #e49307;