@covalent/components 8.7.0-beta.2 → 8.7.0-beta.3

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 (71) hide show
  1. package/{_commonjsHelpers-de2741aa.mjs → _commonjsHelpers-2f131a27.mjs} +2 -2
  2. package/action-ribbon.mjs +3 -3
  3. package/alert.mjs +3 -3
  4. package/app-shell.mjs +6 -6
  5. package/{base-element-67ae173f.mjs → base-element-acf30176.mjs} +1 -1
  6. package/button.mjs +5 -5
  7. package/check-list-item.mjs +7 -7
  8. package/checkbox.mjs +6 -6
  9. package/{chip-eb043df9.mjs → chip-cbf1145c.mjs} +3 -3
  10. package/chip-set.mjs +4 -4
  11. package/chip.mjs +4 -4
  12. package/circular-progress.mjs +1 -1
  13. package/code-snippet.mjs +1 -1
  14. package/data-table/_data-table.theme.scss +39 -0
  15. package/{dialog-3444dd4d.mjs → dialog-c9dbe94d.mjs} +3 -3
  16. package/dialog.mjs +4 -4
  17. package/drawer.mjs +4 -4
  18. package/empty-state.mjs +2 -2
  19. package/expansion-panel-item.mjs +2 -2
  20. package/{form-element-7353b3c4.mjs → form-element-abadd335.mjs} +2 -2
  21. package/formfield.mjs +4 -4
  22. package/{foundation-b3e4efcd.mjs → foundation-d533452a.mjs} +1 -1
  23. package/icon/_icon.theme.scss +10 -0
  24. package/icon-button.mjs +4 -4
  25. package/icon-check-toggle.mjs +6 -6
  26. package/icon-radio-toggle.mjs +6 -6
  27. package/icon.mjs +2 -2
  28. package/index.d.ts +0 -1
  29. package/index.d.ts.map +1 -1
  30. package/index.mjs +31 -31
  31. package/index.scss +3 -0
  32. package/linear-progress.mjs +8 -8
  33. package/list-item.mjs +5 -5
  34. package/list.mjs +6 -6
  35. package/menu.mjs +7 -7
  36. package/{mwc-checkbox-base-afeeff16.mjs → mwc-checkbox-base-c40d16d2.mjs} +3 -3
  37. package/{mwc-drawer-base-0c2b4060.mjs → mwc-drawer-base-9c77129c.mjs} +3 -3
  38. package/{mwc-icon-28b10c70.mjs → mwc-icon-5227aec3.mjs} +1 -1
  39. package/{mwc-line-ripple-directive-315e996d.mjs → mwc-line-ripple-directive-f9dd7fe3.mjs} +2 -2
  40. package/{mwc-list-base-8aa5bfd8.mjs → mwc-list-base-495cbb3b.mjs} +4 -4
  41. package/{mwc-list-item-base-bf1a075b.mjs → mwc-list-item-base-6449e812.mjs} +2 -2
  42. package/{mwc-menu-base-872420a4.mjs → mwc-menu-base-9704207e.mjs} +4 -4
  43. package/{mwc-radio-base-18a887dd.mjs → mwc-radio-base-4dbe9e38.mjs} +4 -4
  44. package/{mwc-slider.css-03537082.mjs → mwc-slider.css-30c91236.mjs} +3 -3
  45. package/{mwc-tab-base-cd1570e4.mjs → mwc-tab-base-effde6e4.mjs} +4 -4
  46. package/{mwc-top-app-bar-base-c7380903.mjs → mwc-top-app-bar-base-28c4192d.mjs} +3 -3
  47. package/nav-list-item.mjs +5 -5
  48. package/package.json +4 -3
  49. package/radio-list-item.mjs +7 -7
  50. package/radio.mjs +6 -6
  51. package/{ripple-handlers-38a43e50.mjs → ripple-handlers-0d9ad7c2.mjs} +2 -2
  52. package/select.mjs +10 -10
  53. package/side-sheet.mjs +4 -4
  54. package/slider-range.mjs +6 -6
  55. package/slider.mjs +10 -10
  56. package/snackbar.mjs +3 -3
  57. package/switch.mjs +5 -5
  58. package/tab-bar.mjs +5 -5
  59. package/tab.mjs +5 -5
  60. package/textarea.mjs +6 -6
  61. package/{textfield-1792a6a8.mjs → textfield-902f3ad3.mjs} +4 -4
  62. package/textfield.mjs +6 -6
  63. package/toolbar.mjs +4 -4
  64. package/tooltip.mjs +2 -2
  65. package/top-app-bar-fixed.mjs +4 -4
  66. package/top-app-bar.mjs +4 -4
  67. package/tree-list-item.mjs +2 -2
  68. package/{tslib.es6-226581a4.mjs → tslib.es6-c4b0f3b1.mjs} +6 -6
  69. package/{utils-2932417c.mjs → utils-dc65fdc9.mjs} +2 -2
  70. package/style.css +0 -1
  71. package/theme/_index.scss +0 -316
package/theme/_index.scss DELETED
@@ -1,316 +0,0 @@
1
- @mixin css-variable-theme-tokens($theme, $prefix: 'cv') {
2
- @each $key, $value in $theme {
3
- --#{$prefix}-theme-#{$key}: #{map-get($theme, $key)};
4
- }
5
- }
6
-
7
- @mixin components-theme($theme, $typography) {
8
- // Covalent theme tokens as css variables
9
- @include css-variable-theme-tokens($theme);
10
-
11
- // Foreground colors
12
- --mdc-theme-primary: #{map-get($theme, primary)};
13
- --mdc-theme-secondary: #{map-get($theme, secondary)};
14
- --mdc-theme-error: #{map-get($theme, error)};
15
- --mdc-theme-negative: #{map-get($theme, error)};
16
- --mdc-theme-positive: #{map-get($theme, positive)};
17
- --mdc-theme-caution: #{map-get($theme, caution)};
18
- --mdc-theme-emphasis: #{map-get($theme, emphasis)};
19
-
20
- // Alias for primary
21
- --mdc-theme-accent: #{map-get($theme, accent)};
22
-
23
- // Background colors
24
- --mdc-theme-background: #{map-get($theme, background)};
25
- --mdc-ripple-color: #{map-get($theme, on-surface)};
26
- --mdc-theme-surface: #{map-get($theme, surface)};
27
- --mdc-theme-surface-canvas: #{map-get($theme, surface-canvas)};
28
- --mdc-theme-surface-primary: #{map-get($theme, surface-primary)};
29
- --mdc-theme-surface-primary-highlight: #{map-get(
30
- $theme,
31
- surface-primary-highlight
32
- )};
33
- --mdc-theme-surface-primary-highlight-hover: #{map-get(
34
- $theme,
35
- surface-primary-highlight-hover
36
- )};
37
- --mdc-theme-surface-secondary: #{map-get($theme, surface-secondary)};
38
- --mdc-theme-surface-secondary-highlight: #{map-get(
39
- $theme,
40
- surface-secondary-highlight
41
- )};
42
- --mdc-theme-surface-secondary-highlight-hover: #{map-get(
43
- $theme,
44
- surface-secondary-highlight-hover
45
- )};
46
- --mdc-theme-surface-caution: #{map-get($theme, surface-caution)};
47
- --mdc-theme-surface-caution-highlight: #{map-get(
48
- $theme,
49
- surface-caution-highlight
50
- )};
51
- --mdc-theme-surface-caution-highlight-hover: #{map-get(
52
- $theme,
53
- surface-caution-highlight-hover
54
- )};
55
- --mdc-theme-surface-negative: #{map-get($theme, surface-negative)};
56
- --mdc-theme-surface-negative-highlight: #{map-get(
57
- $theme,
58
- surface-negative-highlight
59
- )};
60
- --mdc-theme-surface-negative-highlight-hover: #{map-get(
61
- $theme,
62
- surface-negative-highlight-hover
63
- )};
64
- --mdc-theme-surface-positive: #{map-get($theme, surface-positive)};
65
- --mdc-theme-surface-positive-highlight: #{map-get(
66
- $theme,
67
- surface-positive-highlight
68
- )};
69
- --mdc-theme-surface-positive-highlight-hover: #{map-get(
70
- $theme,
71
- surface-positive-highlight-hover
72
- )};
73
- --mdc-theme-surface-neutral: #{map-get($theme, surface-neutral)};
74
- --mdc-theme-surface-neutral-highlight: #{map-get(
75
- $theme,
76
- surface-neutral-highlight
77
- )};
78
- --mdc-theme-surface-neutral-highlight-hover: #{map-get(
79
- $theme,
80
- surface-neutral-highlight-hover
81
- )};
82
- --mdc-theme-surface-emphasis: #{map-get($theme, surface-emphasis)};
83
- --mdc-theme-surface-emphasis-highlight: #{map-get(
84
- $theme,
85
- surface-emphasis-highlight
86
- )};
87
- --mdc-theme-surface-emphasis-highlight-hover: #{map-get(
88
- $theme,
89
- surface-emphasis-highlight-hover
90
- )};
91
- --mdc-theme-on-primary: #{map-get($theme, on-primary)};
92
- --mdc-theme-on-secondary: #{map-get($theme, on-secondary)};
93
- --mdc-theme-on-surface: #{map-get($theme, on-surface)};
94
- --mdc-theme-border: #{map-get($theme, divider)};
95
-
96
- // Alias for primary
97
- --mdc-theme-surface-accent: #{map-get($theme, surface-primary)};
98
- --mdc-theme-surface-accent-highlight: #{map-get(
99
- $theme,
100
- surface-primary-highlight
101
- )};
102
- --mdc-theme-surface-accent-highlight-hover: #{map-get(
103
- $theme,
104
- surface-primary-highlight-hover
105
- )};
106
-
107
- // Tooltip
108
- --mdc-plain-tooltip-container-color: #{map-get($theme, inverse-surface)};
109
- --mdc-plain-tooltip-supporting-text-color: #{map-get(
110
- $theme,
111
- inverse-on-surface
112
- )};
113
-
114
- // Typography
115
- --mdc-typography-font-family: #{map-get($typography, font-family)};
116
- --mdc-typography-headline1-font-family: #{map-get(
117
- $typography,
118
- headline1-font-family
119
- )};
120
- --mdc-typography-headline1-font-size: #{map-get(
121
- $typography,
122
- headline1-font-size
123
- )};
124
- --mdc-typography-headline1-font-weight: #{map-get(
125
- $typography,
126
- headline1-font-weight
127
- )};
128
- --mdc-typography-headline1-line-height: #{map-get(
129
- $typography,
130
- headline1-line-height
131
- )};
132
- --mdc-typography-headline2-font-family: #{map-get(
133
- $typography,
134
- headline2-font-family
135
- )};
136
- --mdc-typography-headline2-font-size: #{map-get(
137
- $typography,
138
- headline2-font-size
139
- )};
140
- --mdc-typography-headline2-font-weight: #{map-get(
141
- $typography,
142
- headline2-font-weight
143
- )};
144
- --mdc-typography-headline2-line-height: #{map-get(
145
- $typography,
146
- headline2-line-height
147
- )};
148
- --mdc-typography-headline3-font-family: #{map-get(
149
- $typography,
150
- headline3-font-family
151
- )};
152
- --mdc-typography-headline3-font-size: #{map-get(
153
- $typography,
154
- headline3-font-size
155
- )};
156
- --mdc-typography-headline3-font-weight: #{map-get(
157
- $typography,
158
- headline3-font-weight
159
- )};
160
- --mdc-typography-headline3-line-height: #{map-get(
161
- $typography,
162
- headline3-line-height
163
- )};
164
- --mdc-typography-headline4-font-family: #{map-get(
165
- $typography,
166
- headline4-font-family
167
- )};
168
- --mdc-typography-headline4-font-size: #{map-get(
169
- $typography,
170
- headline4-font-size
171
- )};
172
- --mdc-typography-headline4-font-weight: #{map-get(
173
- $typography,
174
- headline4-font-weight
175
- )};
176
- --mdc-typography-headline4-line-height: #{map-get(
177
- $typography,
178
- headline4-line-height
179
- )};
180
- --mdc-typography-headline5-font-family: #{map-get(
181
- $typography,
182
- headline5-font-family
183
- )};
184
- --mdc-typography-headline5-font-size: #{map-get(
185
- $typography,
186
- headline5-font-size
187
- )};
188
- --mdc-typography-headline5-font-weight: #{map-get(
189
- $typography,
190
- headline5-font-weight
191
- )};
192
- --mdc-typography-headline5-line-height: #{map-get(
193
- $typography,
194
- headline5-line-height
195
- )};
196
- --mdc-typography-headline6-font-family: #{map-get(
197
- $typography,
198
- headline6-font-family
199
- )};
200
- --mdc-typography-headline6-font-size: #{map-get(
201
- $typography,
202
- headline6-font-size
203
- )};
204
- --mdc-typography-headline6-font-weight: #{map-get(
205
- $typography,
206
- headline6-font-weight
207
- )};
208
- --mdc-typography-headline6-line-height: #{map-get(
209
- $typography,
210
- headline6-line-height
211
- )};
212
- --mdc-typography-subtitle1-font-family: #{map-get(
213
- $typography,
214
- subtitle1-font-family
215
- )};
216
- --mdc-typography-subtitle1-font-size: #{map-get(
217
- $typography,
218
- subtitle1-font-size
219
- )};
220
- --mdc-typography-subtitle1-font-weight: #{map-get(
221
- $typography,
222
- subtitle1-font-weight
223
- )};
224
- --mdc-typography-subtitle1-line-height: #{map-get(
225
- $typography,
226
- subtitle1-line-height
227
- )};
228
- --mdc-typography-subtitle2-font-family: #{map-get(
229
- $typography,
230
- subtitle2-font-family
231
- )};
232
- --mdc-typography-subtitle2-font-size: #{map-get(
233
- $typography,
234
- subtitle2-font-size
235
- )};
236
- --mdc-typography-subtitle2-font-weight: #{map-get(
237
- $typography,
238
- subtitle2-font-weight
239
- )};
240
- --mdc-typography-subtitle2-line-height: #{map-get(
241
- $typography,
242
- subtitle2-line-height
243
- )};
244
- --mdc-typography-body1-font-family: var(--mdc-typography-font-family);
245
- --mdc-typography-body1-font-size: #{map-get($typography, body1-font-size)};
246
- --mdc-typography-body1-font-weight: #{map-get($typography, body1-font-weight)};
247
- --mdc-typography-body1-line-height: #{map-get($typography, body1-line-height)};
248
- --mdc-typography-body2-font-family: var(--mdc-typography-font-family);
249
- --mdc-typography-body2-font-size: #{map-get($typography, body2-font-size)};
250
- --mdc-typography-body2-font-weight: #{map-get($typography, body2-font-weight)};
251
- --mdc-typography-body2-line-height: #{map-get($typography, body2-line-height)};
252
- --mdc-typography-button-font-family: #{map-get(
253
- $typography,
254
- button-font-family
255
- )};
256
- --mdc-typography-button-font-size: #{map-get($typography, button-font-size)};
257
- --mdc-typography-button-font-weight: #{map-get(
258
- $typography,
259
- button-font-weight
260
- )};
261
- --mdc-typography-button-line-height: #{map-get(
262
- $typography,
263
- button-line-height
264
- )};
265
- --mdc-typography-button-text-transform: none;
266
- --mdc-typography-caption-font-family: var(--mdc-typography-font-family);
267
- --mdc-typography-caption-font-size: #{map-get($typography, caption-font-size)};
268
- --mdc-typography-caption-font-weight: #{map-get(
269
- $typography,
270
- caption-font-weight
271
- )};
272
- --mdc-typography-caption-line-height: #{map-get(
273
- $typography,
274
- caption-line-height
275
- )};
276
-
277
- // Text
278
- --mdc-theme-text-primary-on-background: #{map-get(
279
- $theme,
280
- text-primary-on-background
281
- )};
282
- --mdc-theme-text-secondary-on-background: #{map-get(
283
- $theme,
284
- text-secondary-on-background
285
- )};
286
- --mdc-theme-text-hint-on-background: #{map-get(
287
- $theme,
288
- text-hint-on-background
289
- )};
290
- --mdc-theme-text-disabled-on-background: #{map-get(
291
- $theme,
292
- text-disabled-on-background
293
- )};
294
- --mdc-theme-text-icon-on-background: #{map-get(
295
- $theme,
296
- text-icon-on-background
297
- )};
298
- --mdc-theme-text-primary-on-light: #{map-get($theme, text-primary-on-light)};
299
- --mdc-theme-text-secondary-on-light: #{map-get(
300
- $theme,
301
- text-secondary-on-light
302
- )};
303
- --mdc-theme-text-hint-on-light: #{map-get($theme, text-hint-on-light)};
304
- --mdc-theme-text-disabled-on-light: #{map-get($theme, text-disabled-on-light)};
305
- --mdc-theme-text-icon-on-light: #{map-get($theme, text-icon-on-light)};
306
- --mdc-theme-text-primary-on-dark: #{map-get($theme, text-primary-on-dark)};
307
- --mdc-theme-text-secondary-on-dark: #{map-get($theme, text-secondary-on-dark)};
308
- --mdc-theme-text-hint-on-dark: #{map-get($theme, text-hint-on-dark)};
309
- --mdc-theme-text-disabled-on-dark: #{map-get($theme, text-disabled-on-dark)};
310
- --mdc-theme-text-icon-on-dark: #{map-get($theme, text-icon-on-dark)};
311
- --mdc-icon-font: 'Material Symbols Outlined';
312
-
313
- // Shape
314
- --mdc-shape-small: 8px;
315
- --mdc-shape-medium: 8px;
316
- }