@covalent/core 8.1.0-beta.4 → 8.1.0-beta.6

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 (2) hide show
  1. package/package.json +2 -2
  2. package/theming/_teradata-theme.scss +171 -171
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@covalent/core",
3
- "version": "8.1.0-beta.4",
3
+ "version": "8.1.0-beta.6",
4
4
  "exports": {
5
5
  ".": {
6
6
  "sass": "./theming/_all-theme.scss",
@@ -107,7 +107,7 @@
107
107
  "@angular/router": "17.x.x",
108
108
  "@angular/cdk": "17.x.x",
109
109
  "@angular/material": "17.x.x",
110
- "@covalent/core": "8.1.0-beta.4"
110
+ "@covalent/core": "8.1.0-beta.6"
111
111
  },
112
112
  "dependencies": {
113
113
  "tslib": "^2.0.0"
package/theming/_teradata-theme.scss CHANGED
@@ -1,11 +1,11 @@
1
1
  @use '@angular/material' as mat;
2
- @use '../../../libs/tokens/_generated/_index' as variables;
2
+ @import '@covalent/tokens';
3
3
 
4
4
  // Customer Teradata brand palette
5
5
  // Define the palettes for your theme using the Material Design palettes available in palette.scss
6
6
  // (imported above). For each palette, you can optionally specify a default, lighter, and darker
7
7
  // hue.
8
- $td-theme: map-get(variables.$tokens, 'theme');
8
+ $td-theme: map-get($tokens, 'theme');
9
9
  $td-theme-dark: map-get($td-theme, 'dark');
10
10
  $td-dark-palettes: map-get($td-theme-dark, 'palettes');
11
11
  $td-dark-colors: map-get($td-theme-dark, 'colors');
@@ -29,14 +29,14 @@ $td-digital-blue-light: map-merge(
29
29
  ),
30
30
  (
31
31
  contrast: (
32
- '30': variables.$light-on-primary,
33
- '40': variables.$light-on-primary,
34
- '50': variables.$light-on-primary,
35
- '500': variables.$light-on-primary,
36
- '60': variables.$light-on-primary,
37
- '70': variables.$light-on-primary,
38
- '80': variables.$light-on-primary,
39
- '90': variables.$light-on-primary,
32
+ '30': $light-on-primary,
33
+ '40': $light-on-primary,
34
+ '50': $light-on-primary,
35
+ '500': $light-on-primary,
36
+ '60': $light-on-primary,
37
+ '70': $light-on-primary,
38
+ '80': $light-on-primary,
39
+ '90': $light-on-primary,
40
40
  ),
41
41
  )
42
42
  );
@@ -53,14 +53,14 @@ $td-digital-blue-dark: map-merge(
53
53
  ),
54
54
  (
55
55
  contrast: (
56
- '30': variables.$dark-on-primary,
57
- '40': variables.$dark-on-primary,
58
- '50': variables.$dark-on-primary,
59
- '500': variables.$dark-on-primary,
60
- '60': variables.$dark-on-primary,
61
- '70': variables.$dark-on-primary,
62
- '80': variables.$dark-on-primary,
63
- '90': variables.$dark-on-primary,
56
+ '30': $dark-on-primary,
57
+ '40': $dark-on-primary,
58
+ '50': $dark-on-primary,
59
+ '500': $dark-on-primary,
60
+ '60': $dark-on-primary,
61
+ '70': $dark-on-primary,
62
+ '80': $dark-on-primary,
63
+ '90': $dark-on-primary,
64
64
  ),
65
65
  )
66
66
  );
@@ -80,14 +80,14 @@ $td-secondary-light: map-merge(
80
80
  ),
81
81
  (
82
82
  contrast: (
83
- '30': variables.$light-on-secondary,
84
- '40': variables.$light-on-secondary,
85
- '50': variables.$light-on-secondary,
86
- '500': variables.$light-on-secondary,
87
- '60': variables.$light-on-secondary,
88
- '70': variables.$light-on-secondary,
89
- '80': variables.$light-on-secondary,
90
- '90': variables.$light-on-secondary,
83
+ '30': $light-on-secondary,
84
+ '40': $light-on-secondary,
85
+ '50': $light-on-secondary,
86
+ '500': $light-on-secondary,
87
+ '60': $light-on-secondary,
88
+ '70': $light-on-secondary,
89
+ '80': $light-on-secondary,
90
+ '90': $light-on-secondary,
91
91
  ),
92
92
  )
93
93
  );
@@ -104,14 +104,14 @@ $td-secondary-dark: map-merge(
104
104
  ),
105
105
  (
106
106
  contrast: (
107
- '30': variables.$dark-on-secondary,
108
- '40': variables.$dark-on-secondary,
109
- '50': variables.$dark-on-secondary,
110
- '500': variables.$dark-on-secondary,
111
- '60': variables.$dark-on-secondary,
112
- '70': variables.$dark-on-secondary,
113
- '80': variables.$dark-on-secondary,
114
- '90': variables.$dark-on-secondary,
107
+ '30': $dark-on-secondary,
108
+ '40': $dark-on-secondary,
109
+ '50': $dark-on-secondary,
110
+ '500': $dark-on-secondary,
111
+ '60': $dark-on-secondary,
112
+ '70': $dark-on-secondary,
113
+ '80': $dark-on-secondary,
114
+ '90': $dark-on-secondary,
115
115
  ),
116
116
  )
117
117
  );
@@ -131,14 +131,14 @@ $td-warn-light: map-merge(
131
131
  ),
132
132
  (
133
133
  contrast: (
134
- '30': variables.$theme-light-colors-on-negative,
135
- '40': variables.$theme-light-colors-on-negative,
136
- '50': variables.$theme-light-colors-on-negative,
137
- '500': variables.$theme-light-colors-on-negative,
138
- '60': variables.$theme-light-colors-on-negative,
139
- '70': variables.$theme-light-colors-on-negative,
140
- '80': variables.$theme-light-colors-on-negative,
141
- '90': variables.$theme-light-colors-on-negative,
134
+ '30': $theme-light-colors-on-negative,
135
+ '40': $theme-light-colors-on-negative,
136
+ '50': $theme-light-colors-on-negative,
137
+ '500': $theme-light-colors-on-negative,
138
+ '60': $theme-light-colors-on-negative,
139
+ '70': $theme-light-colors-on-negative,
140
+ '80': $theme-light-colors-on-negative,
141
+ '90': $theme-light-colors-on-negative,
142
142
  ),
143
143
  )
144
144
  );
@@ -155,14 +155,14 @@ $td-warn-dark: map-merge(
155
155
  ),
156
156
  (
157
157
  contrast: (
158
- '30': variables.$theme-dark-colors-on-negative,
159
- '40': variables.$theme-dark-colors-on-negative,
160
- '50': variables.$theme-dark-colors-on-negative,
161
- '500': variables.$theme-dark-colors-on-negative,
162
- '60': variables.$theme-dark-colors-on-negative,
163
- '70': variables.$theme-dark-colors-on-negative,
164
- '80': variables.$theme-dark-colors-on-negative,
165
- '90': variables.$theme-dark-colors-on-negative,
158
+ '30': $theme-dark-colors-on-negative,
159
+ '40': $theme-dark-colors-on-negative,
160
+ '50': $theme-dark-colors-on-negative,
161
+ '500': $theme-dark-colors-on-negative,
162
+ '60': $theme-dark-colors-on-negative,
163
+ '70': $theme-dark-colors-on-negative,
164
+ '80': $theme-dark-colors-on-negative,
165
+ '90': $theme-dark-colors-on-negative,
166
166
  ),
167
167
  )
168
168
  );
@@ -183,147 +183,147 @@ $td-warn-dark: $td-warn-dark;
183
183
  // Background palette for light themes.
184
184
  // todo: need to re-catalog used variables
185
185
  $td-light-theme-background: (
186
- status-bar: variables.$theme-light-colors-surface-container,
187
- app-bar: variables.$light-surface,
188
- background: variables.$theme-light-colors-surface,
189
- canvas: variables.$light-surface-canvas,
190
- card: variables.$theme-light-colors-surface-container
186
+ status-bar: $theme-light-colors-surface-container,
187
+ app-bar: $light-surface,
188
+ background: $theme-light-colors-surface,
189
+ canvas: $light-surface-canvas,
190
+ card: $theme-light-colors-surface-container
191
191
  /*** card color = surface color ***/,
192
- dialog: variables.$theme-light-colors-surface-container-high,
193
- hover: variables.$light-surface-primary-highlight-hover,
194
- disabled-button: variables.$theme-light-colors-surface-dim,
195
- disabled-button-toggle: variables.$theme-light-colors-surface-dim,
196
- disabled-list-option: variables.$theme-light-colors-surface-dim,
197
- raised-button: variables.$light-surface-primary,
198
- focused-button: variables.$light-surface-primary-highlight,
199
- selected-button: variables.$theme-light-colors-surface-dim,
200
- selected-disabled-button: variables.$theme-light-colors-surface-dim,
201
- unselected-chip: variables.$theme-light-colors-surface-variant,
202
- tooltip: variables.$theme-light-colors-surface-container-highest,
203
- overlay: variables.$theme-light-colors-scrim,
204
- accent: variables.$light-accent,
205
- accent-highlight: variables.$light-surface-accent-highlight,
206
- accent-highlight-hover: variables.$light-surface-accent-highlight-hover,
207
- emphasis: variables.$light-emphasis,
208
- emphasis-highlight: variables.$light-surface-emphasis-highlight,
209
- emphasis-highlight-hover: variables.$light-surface-emphasis-highlight,
210
- caution: variables.$light-surface-caution,
211
- caution-highlight: variables.$light-surface-caution-highlight,
212
- caution-highlight-hover: variables.$light-surface-caution-highlight-hover,
213
- negative: variables.$light-surface-negative,
214
- negative-highlight: variables.$light-surface-negative-highlight,
215
- negative-highlight-hover: variables.$light-surface-negative-highlight-hover,
216
- neutral: variables.$light-surface-neutral,
217
- neutral-highlight: variables.$light-surface-neutral-highlight,
218
- neutral-highlight-hover: variables.$light-surface-neutral-highlight-hover,
219
- positive: variables.$light-surface-positive,
220
- positive-highlight: variables.$light-surface-positive-highlight,
221
- positive-highlight-hover: variables.$light-surface-positive-highlight-hover,
222
- primary: variables.$light-surface-primary,
223
- primary-highlight: variables.$light-surface-primary-highlight,
224
- primary-highlight-hover: variables.$light-surface-primary-highlight-hover,
192
+ dialog: $theme-light-colors-surface-container-high,
193
+ hover: $light-surface-primary-highlight-hover,
194
+ disabled-button: $theme-light-colors-surface-dim,
195
+ disabled-button-toggle: $theme-light-colors-surface-dim,
196
+ disabled-list-option: $theme-light-colors-surface-dim,
197
+ raised-button: $light-surface-primary,
198
+ focused-button: $light-surface-primary-highlight,
199
+ selected-button: $theme-light-colors-surface-dim,
200
+ selected-disabled-button: $theme-light-colors-surface-dim,
201
+ unselected-chip: $theme-light-colors-surface-variant,
202
+ tooltip: $theme-light-colors-surface-container-highest,
203
+ overlay: $theme-light-colors-scrim,
204
+ accent: $light-accent,
205
+ accent-highlight: $light-surface-accent-highlight,
206
+ accent-highlight-hover: $light-surface-accent-highlight-hover,
207
+ emphasis: $light-emphasis,
208
+ emphasis-highlight: $light-surface-emphasis-highlight,
209
+ emphasis-highlight-hover: $light-surface-emphasis-highlight,
210
+ caution: $light-surface-caution,
211
+ caution-highlight: $light-surface-caution-highlight,
212
+ caution-highlight-hover: $light-surface-caution-highlight-hover,
213
+ negative: $light-surface-negative,
214
+ negative-highlight: $light-surface-negative-highlight,
215
+ negative-highlight-hover: $light-surface-negative-highlight-hover,
216
+ neutral: $light-surface-neutral,
217
+ neutral-highlight: $light-surface-neutral-highlight,
218
+ neutral-highlight-hover: $light-surface-neutral-highlight-hover,
219
+ positive: $light-surface-positive,
220
+ positive-highlight: $light-surface-positive-highlight,
221
+ positive-highlight-hover: $light-surface-positive-highlight-hover,
222
+ primary: $light-surface-primary,
223
+ primary-highlight: $light-surface-primary-highlight,
224
+ primary-highlight-hover: $light-surface-primary-highlight-hover,
225
225
  );
226
226
 
227
227
  // Foreground palette for light themes.
228
228
  // todo: need to re-catalog used variables
229
229
  $td-light-theme-foreground: (
230
- base: variables.$light-on-background,
231
- divider: variables.$light-divider,
232
- dividers: variables.$light-divider,
233
- disabled: variables.$theme-light-colors-on-surface-38,
234
- disabled-button: variables.$theme-light-colors-on-surface-38,
235
- disabled-text: variables.$theme-light-colors-on-surface-38,
230
+ base: $light-on-background,
231
+ divider: $light-divider,
232
+ dividers: $light-divider,
233
+ disabled: $theme-light-colors-on-surface-38,
234
+ disabled-button: $theme-light-colors-on-surface-38,
235
+ disabled-text: $theme-light-colors-on-surface-38,
236
236
  elevation: black,
237
237
  // todo: need to work out elevation
238
- hint-text: variables.$theme-light-colors-on-surface-variant,
239
- secondary-text: variables.$theme-light-colors-on-surface-variant,
240
- icon: variables.$light-text-icon-on-background,
241
- icons: variables.$light-text-icon-on-background,
242
- text: variables.$light-on-surface,
243
- slider-min: variables.$light-on-surface,
244
- slider-off: variables.$theme-light-colors-on-surface-8,
245
- slider-off-active: variables.$theme-light-colors-on-surface-16,
246
- accent: variables.$theme-light-colors-on-primary,
247
- emphasis: variables.$theme-light-colors-on-emphasis,
248
- caution: variables.$theme-light-colors-on-caution,
249
- negative: variables.$theme-light-colors-on-negative,
250
- neutral: variables.$light-on-surface,
238
+ hint-text: $theme-light-colors-on-surface-variant,
239
+ secondary-text: $theme-light-colors-on-surface-variant,
240
+ icon: $light-text-icon-on-background,
241
+ icons: $light-text-icon-on-background,
242
+ text: $light-on-surface,
243
+ slider-min: $light-on-surface,
244
+ slider-off: $theme-light-colors-on-surface-8,
245
+ slider-off-active: $theme-light-colors-on-surface-16,
246
+ accent: $theme-light-colors-on-primary,
247
+ emphasis: $theme-light-colors-on-emphasis,
248
+ caution: $theme-light-colors-on-caution,
249
+ negative: $theme-light-colors-on-negative,
250
+ neutral: $light-on-surface,
251
251
  // todo: need to work out on-neutral tokens
252
- positive: variables.$theme-light-colors-on-positive,
253
- primary: variables.$theme-light-colors-on-primary,
252
+ positive: $theme-light-colors-on-positive,
253
+ primary: $theme-light-colors-on-primary,
254
254
  );
255
255
 
256
256
  // Background palette for dark themes.
257
257
  // todo: need to re-catalog used variables
258
258
  $td-dark-theme-background: (
259
- status-bar: variables.$theme-dark-colors-surface-container-lowest,
260
- app-bar: variables.$theme-dark-colors-surface-container-low,
261
- background: variables.$theme-dark-colors-surface,
262
- canvas: variables.$dark-surface-canvas,
263
- card: variables.$theme-dark-colors-surface-container
259
+ status-bar: $theme-dark-colors-surface-container-lowest,
260
+ app-bar: $theme-dark-colors-surface-container-low,
261
+ background: $theme-dark-colors-surface,
262
+ canvas: $dark-surface-canvas,
263
+ card: $theme-dark-colors-surface-container
264
264
  /*** card color = surface color ***/,
265
- dialog: variables.$theme-dark-colors-surface-container-high,
266
- hover: variables.$dark-surface-primary-highlight-hover,
267
- disabled-button: variables.$theme-dark-colors-surface-dim,
268
- disabled-button-toggle: variables.$theme-dark-colors-surface-dim,
269
- disabled-list-option: variables.$theme-dark-colors-surface-dim,
270
- raised-button: variables.$dark-surface-primary,
271
- focused-button: variables.$dark-surface-primary-highlight,
272
- selected-button: variables.$theme-dark-colors-surface-dim,
273
- selected-disabled-button: variables.$theme-dark-colors-surface-dim,
274
- unselected-chip: variables.$theme-dark-colors-surface-variant,
275
- tooltip: variables.$theme-dark-colors-surface-container-highest,
276
- overlay: variables.$theme-dark-colors-scrim,
277
- accent: variables.$dark-accent,
278
- accent-highlight: variables.$dark-surface-accent-highlight,
279
- accent-highlight-hover: variables.$dark-surface-accent-highlight-hover,
280
- emphasis: variables.$dark-emphasis,
281
- emphasis-highlight: variables.$dark-surface-emphasis-highlight,
282
- emphasis-highlight-hover: variables.$dark-surface-emphasis-highlight,
283
- caution: variables.$dark-surface-caution,
284
- caution-highlight: variables.$dark-surface-caution-highlight,
285
- caution-highlight-hover: variables.$dark-surface-caution-highlight-hover,
286
- negative: variables.$dark-surface-negative,
287
- negative-highlight: variables.$dark-surface-negative-highlight,
288
- negative-highlight-hover: variables.$dark-surface-negative-highlight-hover,
289
- neutral: variables.$dark-surface-neutral,
290
- neutral-highlight: variables.$dark-surface-neutral-highlight,
291
- neutral-highlight-hover: variables.$dark-surface-neutral-highlight-hover,
292
- positive: variables.$dark-surface-positive,
293
- positive-highlight: variables.$dark-surface-positive-highlight,
294
- positive-highlight-hover: variables.$dark-surface-positive-highlight-hover,
295
- primary: variables.$dark-surface-primary,
296
- primary-highlight: variables.$dark-surface-primary-highlight,
297
- primary-highlight-hover: variables.$dark-surface-primary-highlight-hover,
265
+ dialog: $theme-dark-colors-surface-container-high,
266
+ hover: $dark-surface-primary-highlight-hover,
267
+ disabled-button: $theme-dark-colors-surface-dim,
268
+ disabled-button-toggle: $theme-dark-colors-surface-dim,
269
+ disabled-list-option: $theme-dark-colors-surface-dim,
270
+ raised-button: $dark-surface-primary,
271
+ focused-button: $dark-surface-primary-highlight,
272
+ selected-button: $theme-dark-colors-surface-dim,
273
+ selected-disabled-button: $theme-dark-colors-surface-dim,
274
+ unselected-chip: $theme-dark-colors-surface-variant,
275
+ tooltip: $theme-dark-colors-surface-container-highest,
276
+ overlay: $theme-dark-colors-scrim,
277
+ accent: $dark-accent,
278
+ accent-highlight: $dark-surface-accent-highlight,
279
+ accent-highlight-hover: $dark-surface-accent-highlight-hover,
280
+ emphasis: $dark-emphasis,
281
+ emphasis-highlight: $dark-surface-emphasis-highlight,
282
+ emphasis-highlight-hover: $dark-surface-emphasis-highlight,
283
+ caution: $dark-surface-caution,
284
+ caution-highlight: $dark-surface-caution-highlight,
285
+ caution-highlight-hover: $dark-surface-caution-highlight-hover,
286
+ negative: $dark-surface-negative,
287
+ negative-highlight: $dark-surface-negative-highlight,
288
+ negative-highlight-hover: $dark-surface-negative-highlight-hover,
289
+ neutral: $dark-surface-neutral,
290
+ neutral-highlight: $dark-surface-neutral-highlight,
291
+ neutral-highlight-hover: $dark-surface-neutral-highlight-hover,
292
+ positive: $dark-surface-positive,
293
+ positive-highlight: $dark-surface-positive-highlight,
294
+ positive-highlight-hover: $dark-surface-positive-highlight-hover,
295
+ primary: $dark-surface-primary,
296
+ primary-highlight: $dark-surface-primary-highlight,
297
+ primary-highlight-hover: $dark-surface-primary-highlight-hover,
298
298
  );
299
299
 
300
300
  // Foreground palette for dark themes.
301
301
  // todo: need to re-catalog used variables
302
302
  $td-dark-theme-foreground: (
303
- base: variables.$dark-on-background,
304
- divider: variables.$dark-divider,
305
- dividers: variables.$dark-divider,
306
- disabled: variables.$theme-dark-colors-on-surface-38,
307
- disabled-button: variables.$theme-dark-colors-on-surface-38,
308
- disabled-text: variables.$theme-dark-colors-on-surface-38,
303
+ base: $dark-on-background,
304
+ divider: $dark-divider,
305
+ dividers: $dark-divider,
306
+ disabled: $theme-dark-colors-on-surface-38,
307
+ disabled-button: $theme-dark-colors-on-surface-38,
308
+ disabled-text: $theme-dark-colors-on-surface-38,
309
309
  elevation: black,
310
310
  // todo: need to work out elevation
311
- hint-text: variables.$theme-dark-colors-on-surface-variant,
312
- secondary-text: variables.$theme-dark-colors-on-surface-variant,
313
- icon: variables.$dark-text-icon-on-background,
314
- icons: variables.$dark-text-icon-on-background,
315
- text: variables.$dark-on-surface,
316
- slider-min: variables.$dark-on-surface,
317
- slider-off: variables.$theme-dark-colors-on-surface-8,
318
- slider-off-active: variables.$theme-dark-colors-on-surface-16,
319
- accent: variables.$theme-dark-colors-on-primary,
320
- emphasis: variables.$theme-dark-colors-on-emphasis,
321
- caution: variables.$theme-dark-colors-on-caution,
322
- negative: variables.$theme-dark-colors-on-negative,
323
- neutral: variables.$dark-on-surface,
311
+ hint-text: $theme-dark-colors-on-surface-variant,
312
+ secondary-text: $theme-dark-colors-on-surface-variant,
313
+ icon: $dark-text-icon-on-background,
314
+ icons: $dark-text-icon-on-background,
315
+ text: $dark-on-surface,
316
+ slider-min: $dark-on-surface,
317
+ slider-off: $theme-dark-colors-on-surface-8,
318
+ slider-off-active: $theme-dark-colors-on-surface-16,
319
+ accent: $theme-dark-colors-on-primary,
320
+ emphasis: $theme-dark-colors-on-emphasis,
321
+ caution: $theme-dark-colors-on-caution,
322
+ negative: $theme-dark-colors-on-negative,
323
+ neutral: $dark-on-surface,
324
324
  // todo: need to work out on-neutral tokens
325
- positive: variables.$theme-dark-colors-on-positive,
326
- primary: variables.$theme-dark-colors-on-primary,
325
+ positive: $theme-dark-colors-on-positive,
326
+ primary: $theme-dark-colors-on-primary,
327
327
  );
328
328
 
329
329
  // Custom typography
@@ -342,7 +342,7 @@ $td-light-theme: mat.define-light-theme(
342
342
  secondary: mat.define-palette($td-secondary, '40', '30', '60'),
343
343
  accent: mat.define-palette($td-accent, '40', '30', '60'),
344
344
  warn: mat.define-palette($td-warn, '40', '30', '60'),
345
- on-secondary: variables.$light-on-secondary,
345
+ on-secondary: $light-on-secondary,
346
346
  ),
347
347
  typography: $td-custom-typography,
348
348
  )
@@ -364,7 +364,7 @@ $td-dark-theme: mat.define-dark-theme(
364
364
  secondary: mat.define-palette($td-secondary-dark, '80', '70', '90'),
365
365
  accent: mat.define-palette($td-accent-dark, '80', '70', '90'),
366
366
  warn: mat.define-palette($td-warn-dark, '80', '70', '90'),
367
- on-secondary: variables.$dark-on-secondary,
367
+ on-secondary: $dark-on-secondary,
368
368
  ),
369
369
  typography: $td-custom-typography,
370
370
  )
@@ -397,7 +397,7 @@ $td-dark-theme: mat.private-deep-merge-all(
397
397
 
398
398
  // Logo alignment
399
399
  .mat-icon.mat-icon-logo {
400
- fill: variables.$teradata-orange-500;
400
+ fill: $teradata-orange-500;
401
401
  position: relative;
402
402
  top: -2px;
403
403