@rcarls/rc-theme-material 0.2.0 → 0.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 (19) hide show
  1. package/README.md +34 -82
  2. package/bridge.css +446 -298
  3. package/components/accordion.css +173 -6
  4. package/components/app-bar.css +8 -4
  5. package/components/combobox.css +63 -0
  6. package/components/dialog.css +5 -2
  7. package/components/disclosure.css +102 -7
  8. package/components/fab.css +17 -0
  9. package/components/listbox.css +31 -22
  10. package/components/menu-button.css +13 -13
  11. package/components/menu.css +96 -12
  12. package/components/menubar.css +18 -3
  13. package/components/search-bar.css +16 -6
  14. package/components/select.css +62 -0
  15. package/components/splitter.css +26 -12
  16. package/components/transfer-list.css +40 -1
  17. package/components.css +1 -0
  18. package/defaults.css +858 -87
  19. package/package.json +6 -7
package/bridge.css CHANGED
@@ -1,7 +1,7 @@
1
1
  @layer rc-theme-material.defaults, rc-theme-material.bridge, rc-theme-material.components;
2
2
 
3
3
  @layer rc-theme-material.bridge {
4
- /*
4
+ /*
5
5
  * Material 3 token bridge for rc-webcomponents.
6
6
  *
7
7
  * This file intentionally does not define --md-sys-* values. It consumes an
@@ -9,321 +9,469 @@
9
9
  * contract. Import defaults.css first only when a standalone baseline is
10
10
  * desired.
11
11
  */
12
- .rc-theme-material,
13
- :host(.rc-theme-material) {
14
- --rc-surface: var(--md-sys-color-surface, Canvas);
15
- --rc-field: var(--md-sys-color-surface-container-highest, Field);
16
- --rc-field-text: var(--md-sys-color-on-surface, FieldText);
17
- --rc-highlight: var(--md-sys-color-secondary-container, Highlight);
18
- --rc-highlight-text: var(--md-sys-color-on-secondary-container, HighlightText);
19
- --rc-text-disabled: var(--md-sys-color-on-surface-variant, GrayText);
20
- --rc-accent: var(--md-sys-color-primary, Highlight);
21
- --rc-border-color: var(--md-sys-color-outline, ButtonBorder);
22
- --rc-border: 1px solid var(--rc-border-color);
23
- --rc-shadow: var(--md-sys-elevation-level2, none);
24
- --rc-font-family: var(--md-sys-typescale-body-medium-font, inherit);
25
- --rc-font-size: var(--md-sys-typescale-body-medium-size, 0.875rem);
26
- --rc-line-height: var(--md-sys-typescale-body-medium-line-height, 1.25rem);
27
- --rc-control-block-size: 2.5rem;
28
- --rc-control-padding-block: 0.5rem;
29
- --rc-control-padding-inline: 1rem;
30
- --rc-control-gap: 0.5rem;
31
- --rc-control-radius: var(--md-sys-shape-corner-full, 1.25rem);
32
- --rc-item-padding-block: 0.75rem;
33
- --rc-item-padding-inline: 0.75rem;
34
- --rc-item-gap: 0.75rem;
35
- --rc-radius-sm: var(--md-sys-shape-corner-extra-small, 0.25rem);
36
- --rc-radius-md: var(--md-sys-shape-corner-small, 0.5rem);
37
- --rc-focus-ring: 2px solid var(--md-sys-color-primary, Highlight);
38
- --rc-focus-ring-offset: 2px;
39
- --rc-disabled-opacity: var(--md-sys-state-disabled-state-layer-opacity, 0.38);
40
- --rc-motion-duration: 200ms;
41
- }
12
+ .rc-theme-material,
13
+ :host(.rc-theme-material) {
14
+ --rc-surface: var(--md-sys-color-surface, Canvas);
15
+ --rc-field: var(--md-sys-color-surface-container-highest, Field);
16
+ --rc-field-text: var(--md-sys-color-on-surface, FieldText);
17
+ --rc-highlight: var(--md-sys-color-secondary-container, Highlight);
18
+ --rc-highlight-text: var(--md-sys-color-on-secondary-container, HighlightText);
19
+ --rc-text-disabled: var(--md-sys-color-on-surface-variant, GrayText);
20
+ --rc-accent: var(--md-sys-color-primary, Highlight);
21
+ --rc-border-color: var(--md-sys-color-outline, ButtonBorder);
22
+ --rc-border: 1px solid var(--rc-border-color);
23
+ --rc-shadow-level0: none;
24
+ --rc-shadow-level1: 0 var(--md-sys-elevation-level1, 1px)
25
+ calc(var(--md-sys-elevation-level1, 1px) * 2)
26
+ color-mix(in srgb, var(--md-sys-color-shadow, #000) 18%, transparent);
27
+ --rc-shadow-level2: 0 var(--md-sys-elevation-level2, 3px)
28
+ calc(var(--md-sys-elevation-level2, 3px) * 2)
29
+ color-mix(in srgb, var(--md-sys-color-shadow, #000) 18%, transparent);
30
+ --rc-shadow-level3: 0 var(--md-sys-elevation-level3, 6px)
31
+ calc(var(--md-sys-elevation-level3, 6px) * 2)
32
+ color-mix(in srgb, var(--md-sys-color-shadow, #000) 18%, transparent);
33
+ --rc-shadow-level4: 0 var(--md-sys-elevation-level4, 8px)
34
+ calc(var(--md-sys-elevation-level4, 8px) * 2)
35
+ color-mix(in srgb, var(--md-sys-color-shadow, #000) 24%, transparent);
36
+ --rc-shadow: var(--rc-shadow-level2);
37
+ --rc-font-family: var(--md-sys-typescale-body-medium-font, inherit);
38
+ --rc-font-size: var(--md-sys-typescale-body-medium-size, 0.875rem);
39
+ --rc-line-height: var(--md-sys-typescale-body-medium-line-height, 1.25rem);
40
+ --rc-control-block-size: 2.5rem;
41
+ --rc-control-padding-block: 0.5rem;
42
+ --rc-control-padding-inline: 1rem;
43
+ --rc-control-gap: 0.5rem;
44
+ --rc-control-radius: var(--md-sys-shape-corner-full, 1.25rem);
45
+ --rc-toolbar-radius: var(--md-sys-shape-corner-large, 1rem);
46
+ --rc-toolbar-vertical-radius: 0;
47
+ --rc-item-padding-block: 0.75rem;
48
+ --rc-item-padding-inline: 0.75rem;
49
+ --rc-item-gap: 0.75rem;
50
+ --rc-radius-sm: var(--md-sys-shape-corner-extra-small, 0.25rem);
51
+ --rc-radius-md: var(--md-sys-shape-corner-small, 0.5rem);
52
+ --rc-focus-ring: 2px solid var(--md-sys-color-primary, Highlight);
53
+ --rc-focus-ring-offset: 2px;
54
+ --rc-disabled-opacity: var(--md-sys-state-disabled-state-layer-opacity, 0.38);
55
+ --rc-motion-duration: 200ms;
56
+ }
42
57
 
43
- .rc-theme-material rc-select,
44
- :host(.rc-theme-material) rc-select {
45
- --rc-select-control-block-size: 3.5rem;
46
- --rc-select-padding-inline: 1rem;
47
- --rc-select-radius:
48
- var(--md-outlined-select-text-field-container-shape,
49
- var(--md-sys-shape-corner-extra-small, 0.25rem));
50
- --rc-select-border:
51
- 1px solid var(--md-outlined-select-text-field-outline-color,
52
- var(--md-sys-color-outline, ButtonBorder));
53
- --rc-select-listbox-radius:
54
- var(--md-menu-container-shape,
55
- var(--md-sys-shape-corner-extra-small, 0.25rem));
56
- --rc-select-listbox-border: 0;
57
- --rc-select-listbox-padding-block: 0.5rem;
58
- --rc-select-shadow: var(--md-sys-elevation-level2, var(--rc-shadow));
59
- --rc-select-chip-radius: var(--md-sys-shape-corner-small, 0.5rem);
60
- --rc-select-chip-padding-block: 0.375rem;
61
- --rc-select-chip-padding-inline: 0.75rem;
62
- --rc-field:
63
- var(--md-outlined-select-text-field-container-color,
64
- var(--md-sys-color-surface, Field));
65
- --rc-field-text:
66
- var(--md-outlined-select-text-field-input-text-color,
67
- var(--md-sys-color-on-surface, FieldText));
68
- --rc-font-family:
69
- var(--md-outlined-select-text-field-input-text-font,
70
- var(--md-sys-typescale-body-large-font, inherit));
71
- }
58
+ .rc-theme-material rc-select,
59
+ :host(.rc-theme-material) rc-select {
60
+ --rc-select-control-block-size: 3.5rem;
61
+ --rc-select-padding-inline: 1rem;
62
+ --rc-select-radius: var(
63
+ --md-outlined-select-text-field-container-shape,
64
+ var(--md-sys-shape-corner-extra-small, 0.25rem)
65
+ );
66
+ --rc-select-border: 1px solid
67
+ var(--md-outlined-select-text-field-outline-color, var(--md-sys-color-outline, ButtonBorder));
68
+ --rc-select-listbox-radius: var(
69
+ --md-menu-container-shape,
70
+ var(--md-sys-shape-corner-extra-small, 0.25rem)
71
+ );
72
+ --rc-select-listbox-border: 0;
73
+ --rc-select-listbox-padding-block: 0.5rem;
74
+ --rc-select-shadow: var(--rc-shadow);
75
+ --rc-select-chip-radius: var(--md-sys-shape-corner-small, 0.5rem);
76
+ --rc-select-chip-padding-block: 0.375rem;
77
+ --rc-select-chip-padding-inline: 0.75rem;
78
+ --rc-field: var(
79
+ --md-outlined-select-text-field-container-color,
80
+ var(--md-sys-color-surface, Field)
81
+ );
82
+ --rc-field-text: var(
83
+ --md-outlined-select-text-field-input-text-color,
84
+ var(--md-sys-color-on-surface, FieldText)
85
+ );
86
+ --rc-font-family: var(
87
+ --md-outlined-select-text-field-input-text-font,
88
+ var(--md-sys-typescale-body-large-font, inherit)
89
+ );
90
+ }
72
91
 
73
- .rc-theme-material rc-listbox,
74
- :host(.rc-theme-material) rc-listbox {
75
- --rc-highlight: var(--md-sys-color-secondary-container, Highlight);
76
- --rc-highlight-text: var(--md-sys-color-on-secondary-container, HighlightText);
77
- }
92
+ .rc-theme-material rc-listbox,
93
+ :host(.rc-theme-material) rc-listbox {
94
+ --rc-listbox-option-gap: 0.75rem;
95
+ --rc-listbox-option-min-block-size: 3rem;
96
+ --rc-listbox-option-padding-block: 0;
97
+ --rc-listbox-option-padding-inline: 0.75rem;
98
+ --rc-listbox-option-transition: background-color 150ms ease, color 150ms ease;
99
+ --rc-listbox-hover-bg: color-mix(
100
+ in srgb,
101
+ var(--md-sys-color-on-surface, CanvasText) 8%,
102
+ transparent
103
+ );
104
+ --rc-listbox-hover-color: var(--md-sys-color-on-surface, CanvasText);
105
+ --rc-listbox-active-bg: color-mix(
106
+ in srgb,
107
+ var(--md-sys-color-on-surface, CanvasText) 12%,
108
+ transparent
109
+ );
110
+ --rc-listbox-active-color: var(--md-sys-color-on-surface, CanvasText);
111
+ --rc-listbox-selected-bg: var(--md-sys-color-secondary-container, Highlight);
112
+ --rc-listbox-selected-color: var(--md-sys-color-on-secondary-container, HighlightText);
113
+ --rc-listbox-disabled-opacity: var(--md-sys-state-disabled-state-layer-opacity, 0.38);
114
+ }
78
115
 
79
- .rc-theme-material rc-combobox,
80
- :host(.rc-theme-material) rc-combobox {
81
- --rc-combobox-control-block-size: 3.5rem;
82
- --rc-combobox-padding-inline: 1rem;
83
- --rc-combobox-radius:
84
- var(--md-outlined-text-field-container-shape,
85
- var(--md-sys-shape-corner-extra-small, 0.25rem));
86
- --rc-combobox-border:
87
- 1px solid var(--md-outlined-text-field-outline-color,
88
- var(--md-sys-color-outline, ButtonBorder));
89
- --rc-combobox-listbox-radius:
90
- var(--md-menu-container-shape,
91
- var(--md-sys-shape-corner-extra-small, 0.25rem));
92
- --rc-combobox-listbox-border: 0;
93
- --rc-combobox-listbox-padding-block: 0.5rem;
94
- --rc-combobox-shadow: var(--md-sys-elevation-level2, var(--rc-shadow));
95
- --rc-combobox-chip-radius: var(--md-sys-shape-corner-small, 0.5rem);
96
- --rc-combobox-chip-padding-block: 0.375rem;
97
- --rc-combobox-chip-padding-inline: 0.75rem;
98
- --rc-field:
99
- var(--md-outlined-text-field-container-color,
100
- var(--md-sys-color-surface, Field));
101
- --rc-field-text:
102
- var(--md-outlined-text-field-input-text-color,
103
- var(--md-sys-color-on-surface, FieldText));
104
- --rc-font-family:
105
- var(--md-outlined-text-field-input-text-font,
106
- var(--md-sys-typescale-body-large-font, inherit));
107
- }
116
+ .rc-theme-material rc-combobox,
117
+ :host(.rc-theme-material) rc-combobox {
118
+ --rc-combobox-control-block-size: 3.5rem;
119
+ --rc-combobox-padding-inline: 1rem;
120
+ --rc-combobox-radius: var(
121
+ --md-outlined-text-field-container-shape,
122
+ var(--md-sys-shape-corner-extra-small, 0.25rem)
123
+ );
124
+ --rc-combobox-border: 1px solid
125
+ var(--md-outlined-text-field-outline-color, var(--md-sys-color-outline, ButtonBorder));
126
+ --rc-combobox-listbox-radius: var(
127
+ --md-menu-container-shape,
128
+ var(--md-sys-shape-corner-extra-small, 0.25rem)
129
+ );
130
+ --rc-combobox-listbox-border: 0;
131
+ --rc-combobox-listbox-padding-block: 0.5rem;
132
+ --rc-combobox-shadow: var(--rc-shadow);
133
+ --rc-combobox-chip-radius: var(--md-sys-shape-corner-small, 0.5rem);
134
+ --rc-combobox-chip-padding-block: 0.375rem;
135
+ --rc-combobox-chip-padding-inline: 0.75rem;
136
+ --rc-field: var(--md-outlined-text-field-container-color, var(--md-sys-color-surface, Field));
137
+ --rc-field-text: var(
138
+ --md-outlined-text-field-input-text-color,
139
+ var(--md-sys-color-on-surface, FieldText)
140
+ );
141
+ --rc-font-family: var(
142
+ --md-outlined-text-field-input-text-font,
143
+ var(--md-sys-typescale-body-large-font, inherit)
144
+ );
145
+ }
108
146
 
109
- .rc-theme-material rc-slider,
110
- :host(.rc-theme-material) rc-slider {
111
- --rc-slider-track-size:
112
- var(--md-slider-active-track-height, 0.25rem);
113
- --rc-slider-track-background:
114
- var(--md-slider-inactive-track-color,
115
- var(--md-sys-color-surface-container-highest, CanvasText));
116
- --rc-slider-track-opacity: 1;
117
- --rc-slider-track-radius:
118
- var(--md-slider-inactive-track-shape,
119
- var(--md-sys-shape-corner-full, 999px));
120
- --rc-slider-progress-background:
121
- var(--md-slider-active-track-color,
122
- var(--md-sys-color-primary, Highlight));
123
- --rc-slider-value-color:
124
- var(--md-slider-label-text-color,
125
- var(--md-sys-color-on-surface, GrayText));
126
- --rc-thumb-radius: calc(var(--md-slider-handle-width, 1.25rem) / 2);
127
- }
147
+ .rc-theme-material rc-slider,
148
+ :host(.rc-theme-material) rc-slider {
149
+ --rc-slider-track-size: var(--md-slider-active-track-height, 0.25rem);
150
+ --rc-slider-track-background: var(
151
+ --md-slider-inactive-track-color,
152
+ var(--md-sys-color-surface-container-highest, CanvasText)
153
+ );
154
+ --rc-slider-track-opacity: 1;
155
+ --rc-slider-track-radius: var(
156
+ --md-slider-inactive-track-shape,
157
+ var(--md-sys-shape-corner-full, 999px)
158
+ );
159
+ --rc-slider-progress-background: var(
160
+ --md-slider-active-track-color,
161
+ var(--md-sys-color-primary, Highlight)
162
+ );
163
+ --rc-slider-value-color: var(
164
+ --md-slider-label-text-color,
165
+ var(--md-sys-color-on-surface, GrayText)
166
+ );
167
+ --rc-thumb-radius: calc(var(--md-slider-handle-width, 1.25rem) / 2);
168
+ }
128
169
 
129
- .rc-theme-material rc-range-slider,
130
- :host(.rc-theme-material) rc-range-slider {
131
- --rc-range-slider-accent:
132
- var(--md-slider-active-track-color,
133
- var(--md-sys-color-primary, Highlight));
134
- --rc-range-slider-track-background:
135
- var(--md-slider-inactive-track-color,
136
- var(--md-sys-color-surface-container-highest, CanvasText));
137
- --rc-range-slider-track-radius:
138
- var(--md-slider-inactive-track-shape,
139
- var(--md-sys-shape-corner-full, 999px));
140
- --rc-range-slider-thumb-background:
141
- var(--md-slider-handle-color,
142
- var(--md-sys-color-primary, ButtonFace));
143
- --rc-range-slider-thumb-border:
144
- var(--md-slider-handle-color,
145
- var(--md-sys-color-primary, Highlight));
146
- --rc-range-slider-thumb-hover-background:
147
- var(--md-slider-hover-handle-color,
148
- var(--md-slider-handle-color, var(--md-sys-color-primary, ButtonFace)));
149
- --rc-range-slider-thumb-hover-border:
150
- var(--md-slider-hover-handle-color,
151
- var(--md-slider-handle-color, var(--md-sys-color-primary, Highlight)));
152
- --rc-range-slider-thumb-active-background:
153
- var(--md-slider-pressed-handle-color,
154
- var(--md-slider-handle-color, var(--md-sys-color-primary, ButtonFace)));
155
- --rc-range-slider-thumb-active-border:
156
- var(--md-slider-pressed-handle-color,
157
- var(--md-slider-handle-color, var(--md-sys-color-primary, Highlight)));
158
- --rc-range-slider-focus-outline:
159
- var(--md-slider-focus-handle-color,
160
- var(--md-sys-color-primary, Highlight));
161
- --rc-range-slider-thumb-size: var(--md-slider-handle-width, 1.25rem);
162
- --rc-range-slider-value-color:
163
- var(--md-slider-label-text-color,
164
- var(--md-sys-color-on-surface, GrayText));
165
- --rc-thumb-radius: calc(var(--md-slider-handle-width, 1.25rem) / 2);
166
- }
170
+ .rc-theme-material rc-range-slider,
171
+ :host(.rc-theme-material) rc-range-slider {
172
+ --rc-range-slider-accent: var(
173
+ --md-slider-active-track-color,
174
+ var(--md-sys-color-primary, Highlight)
175
+ );
176
+ --rc-range-slider-track-background: var(
177
+ --md-slider-inactive-track-color,
178
+ var(--md-sys-color-surface-container-highest, CanvasText)
179
+ );
180
+ --rc-range-slider-track-radius: var(
181
+ --md-slider-inactive-track-shape,
182
+ var(--md-sys-shape-corner-full, 999px)
183
+ );
184
+ --rc-range-slider-thumb-background: var(
185
+ --md-slider-handle-color,
186
+ var(--md-sys-color-primary, ButtonFace)
187
+ );
188
+ --rc-range-slider-thumb-border: var(
189
+ --md-slider-handle-color,
190
+ var(--md-sys-color-primary, Highlight)
191
+ );
192
+ --rc-range-slider-thumb-hover-background: var(
193
+ --md-slider-hover-handle-color,
194
+ var(--md-slider-handle-color, var(--md-sys-color-primary, ButtonFace))
195
+ );
196
+ --rc-range-slider-thumb-hover-border: var(
197
+ --md-slider-hover-handle-color,
198
+ var(--md-slider-handle-color, var(--md-sys-color-primary, Highlight))
199
+ );
200
+ --rc-range-slider-thumb-active-background: var(
201
+ --md-slider-pressed-handle-color,
202
+ var(--md-slider-handle-color, var(--md-sys-color-primary, ButtonFace))
203
+ );
204
+ --rc-range-slider-thumb-active-border: var(
205
+ --md-slider-pressed-handle-color,
206
+ var(--md-slider-handle-color, var(--md-sys-color-primary, Highlight))
207
+ );
208
+ --rc-range-slider-focus-outline: var(
209
+ --md-slider-focus-handle-color,
210
+ var(--md-sys-color-primary, Highlight)
211
+ );
212
+ --rc-range-slider-thumb-size: var(--md-slider-handle-width, 1.25rem);
213
+ --rc-range-slider-value-color: var(
214
+ --md-slider-label-text-color,
215
+ var(--md-sys-color-on-surface, GrayText)
216
+ );
217
+ --rc-thumb-radius: calc(var(--md-slider-handle-width, 1.25rem) / 2);
218
+ }
167
219
 
168
- .rc-theme-material rc-search-bar,
169
- :host(.rc-theme-material) rc-search-bar {
170
- --rc-search-bar-bg:
171
- var(--md-search-bar-container-color,
172
- var(--md-sys-color-surface-container-high, Field));
173
- --rc-search-bar-color:
174
- var(--md-search-bar-input-text-color,
175
- var(--md-sys-color-on-surface, FieldText));
176
- --rc-search-bar-icon-color:
177
- var(--md-search-bar-leading-icon-color,
178
- var(--md-sys-color-on-surface, GrayText));
179
- --rc-search-bar-clear-color:
180
- var(--md-search-bar-trailing-icon-color,
181
- var(--md-sys-color-on-surface-variant, GrayText));
182
- --rc-search-bar-radius:
183
- var(--md-search-bar-container-shape,
184
- var(--md-sys-shape-corner-full, 999px));
185
- --rc-search-bar-height: var(--md-search-bar-container-height, 3.5rem);
186
- --rc-search-bar-padding-inline: 1rem;
187
- --rc-search-bar-gap: 1rem;
188
- --rc-search-bar-input-font-family:
189
- var(--md-search-bar-input-text-font,
190
- var(--md-sys-typescale-body-large-font, inherit));
191
- --rc-search-bar-input-font-size:
192
- var(--md-search-bar-input-text-size,
193
- var(--md-sys-typescale-body-large-size, 1rem));
194
- }
220
+ .rc-theme-material rc-search-bar,
221
+ :host(.rc-theme-material) rc-search-bar {
222
+ --rc-search-bar-bg: var(
223
+ --md-search-bar-container-color,
224
+ var(--md-sys-color-surface-container-high, Field)
225
+ );
226
+ --rc-search-bar-color: var(
227
+ --md-search-bar-input-text-color,
228
+ var(--md-sys-color-on-surface, FieldText)
229
+ );
230
+ --rc-search-bar-icon-color: var(
231
+ --md-search-bar-leading-icon-color,
232
+ var(--md-sys-color-on-surface, GrayText)
233
+ );
234
+ --rc-search-bar-clear-color: var(
235
+ --md-search-bar-trailing-icon-color,
236
+ var(--md-sys-color-on-surface-variant, GrayText)
237
+ );
238
+ --rc-search-bar-radius: var(
239
+ --md-search-bar-container-shape,
240
+ var(--md-sys-shape-corner-full, 999px)
241
+ );
242
+ --rc-search-bar-border: none;
243
+ --rc-search-bar-shadow: var(--rc-shadow-level1);
244
+ --rc-search-bar-height: var(--md-search-bar-container-height, 3.5rem);
245
+ --rc-search-bar-padding-inline: 1rem;
246
+ --rc-search-bar-gap: 1rem;
247
+ --rc-search-bar-input-font-family: var(
248
+ --md-search-bar-input-text-font,
249
+ var(--md-sys-typescale-body-large-font, inherit)
250
+ );
251
+ --rc-search-bar-input-font-size: var(
252
+ --md-search-bar-input-text-size,
253
+ var(--md-sys-typescale-body-large-size, 1rem)
254
+ );
255
+ }
195
256
 
196
- .rc-theme-material rc-app-bar,
197
- :host(.rc-theme-material) rc-app-bar {
198
- --rc-app-bar-bg:
199
- var(--md-top-app-bar-container-color,
200
- var(--md-sys-color-surface, Canvas));
201
- --rc-app-bar-color:
202
- var(--md-top-app-bar-headline-color,
203
- var(--md-sys-color-on-surface, CanvasText));
204
- --rc-app-bar-compact-min-height: var(--md-top-app-bar-container-height, 4rem);
205
- --rc-app-bar-expanded-padding-block: 1rem;
206
- --rc-app-bar-padding-inline: 1rem;
207
- --rc-app-bar-gap: 1rem;
208
- --rc-app-bar-transition-duration: 200ms;
209
- --rc-app-bar-scroll-divider: 1px solid var(--md-sys-color-outline-variant, ButtonBorder);
210
- --rc-app-bar-title-font-size:
211
- var(--md-top-app-bar-headline-size,
212
- var(--md-sys-typescale-title-large-size, inherit));
213
- --rc-app-bar-expanded-title-font-size:
214
- var(--md-large-top-app-bar-headline-size,
215
- var(--md-sys-typescale-headline-small-size, inherit));
216
- }
257
+ .rc-theme-material rc-app-bar,
258
+ :host(.rc-theme-material) rc-app-bar {
259
+ --rc-app-bar-bg: var(--md-top-app-bar-container-color, var(--md-sys-color-surface, Canvas));
260
+ --rc-app-bar-color: var(
261
+ --md-top-app-bar-headline-color,
262
+ var(--md-sys-color-on-surface, CanvasText)
263
+ );
264
+ --rc-app-bar-compact-min-height: var(--md-top-app-bar-container-height, 4rem);
265
+ --rc-app-bar-expanded-padding-block: 1rem;
266
+ --rc-app-bar-padding-inline: 1rem;
267
+ --rc-app-bar-gap: 1rem;
268
+ --rc-app-bar-transition-duration: 200ms;
269
+ --rc-app-bar-scroll-divider: 1px solid var(--md-sys-color-outline-variant, ButtonBorder);
270
+ --rc-app-bar-title-font-size: var(
271
+ --md-top-app-bar-headline-size,
272
+ var(--md-sys-typescale-title-large-size, inherit)
273
+ );
274
+ --rc-app-bar-expanded-title-font-size: var(
275
+ --md-large-top-app-bar-headline-size,
276
+ var(--md-sys-typescale-headline-small-size, inherit)
277
+ );
278
+ }
217
279
 
218
- .rc-theme-material rc-menu,
219
- :host(.rc-theme-material) rc-menu {
220
- --rc-menu-padding-block: 0.5rem;
221
- --rc-menu-background:
222
- var(--md-menu-container-color,
223
- var(--md-sys-color-surface-container, Canvas));
224
- --rc-menu-border: 0;
225
- --rc-menu-radius:
226
- var(--md-menu-container-shape,
227
- var(--md-sys-shape-corner-extra-small, 0.25rem));
228
- --rc-menu-shadow: var(--md-sys-elevation-level2, var(--rc-shadow));
229
- --rc-menu-color:
230
- var(--md-menu-item-label-text-color,
231
- var(--md-sys-color-on-surface, CanvasText));
232
- --rc-menu-item-padding-block: 0.75rem;
233
- --rc-menu-item-padding-inline: 0.75rem;
234
- --rc-menu-item-gap: 0.75rem;
235
- --rc-menu-disabled-color: var(--md-sys-color-on-surface, GrayText);
236
- --rc-menu-disabled-opacity: var(--md-sys-state-disabled-state-layer-opacity, 0.38);
237
- --rc-menu-separator-border: 1px solid var(--md-sys-color-outline-variant, ButtonBorder);
238
- }
280
+ .rc-theme-material rc-menu,
281
+ :host(.rc-theme-material) rc-menu {
282
+ --rc-menu-padding-block: 0.5rem;
283
+ --rc-menu-background: var(
284
+ --md-menu-container-color,
285
+ var(--md-sys-color-surface-container, Canvas)
286
+ );
287
+ --rc-menu-border: 0;
288
+ --rc-menu-radius: var(
289
+ --md-menu-container-shape,
290
+ var(--md-sys-shape-corner-extra-small, 0.25rem)
291
+ );
292
+ --rc-menu-shadow: var(--rc-shadow);
293
+ --rc-menu-color: var(
294
+ --md-menu-item-label-text-color,
295
+ var(--md-sys-color-on-surface, CanvasText)
296
+ );
297
+ --rc-menu-item-min-block-size: 3rem;
298
+ --rc-menu-item-padding-block: 0;
299
+ --rc-menu-item-padding-inline: 0.75rem;
300
+ --rc-menu-item-gap: 0.75rem;
301
+ --rc-menu-item-transition: background-color 150ms ease, color 150ms ease;
302
+ --rc-menu-hover-bg: color-mix(
303
+ in srgb,
304
+ var(--md-sys-color-on-surface, CanvasText) 8%,
305
+ transparent
306
+ );
307
+ --rc-menu-hover-color: var(--md-sys-color-on-surface, CanvasText);
308
+ --rc-menu-active-bg: color-mix(
309
+ in srgb,
310
+ var(--md-sys-color-on-surface, CanvasText) 12%,
311
+ transparent
312
+ );
313
+ --rc-menu-active-color: var(--md-sys-color-on-surface, CanvasText);
314
+ --rc-menu-check-size: 1.5rem;
315
+ --rc-menu-check-color: var(--md-sys-color-primary, Highlight);
316
+ --rc-menu-shortcut-size: var(--md-sys-typescale-label-large-size, 0.875rem);
317
+ --rc-menu-shortcut-color: var(--md-sys-color-on-surface-variant, GrayText);
318
+ --rc-menu-submenu-indicator-size: 1.25rem;
319
+ --rc-menu-submenu-indicator-color: var(--md-sys-color-on-surface-variant, CanvasText);
320
+ --rc-menu-disabled-color: var(--md-sys-color-on-surface, GrayText);
321
+ --rc-menu-disabled-opacity: var(--md-sys-state-disabled-state-layer-opacity, 0.38);
322
+ --rc-menu-separator-border: 1px solid var(--md-sys-color-outline-variant, ButtonBorder);
323
+ --rc-menu-separator-margin-block: 0.5rem;
324
+ --rc-menu-group-label-color: var(--md-sys-color-on-surface-variant, GrayText);
325
+ }
239
326
 
240
- .rc-theme-material rc-menu-button,
241
- :host(.rc-theme-material) rc-menu-button {
242
- --rc-menu-button-trigger-block-size: 2.5rem;
243
- --rc-menu-button-trigger-padding-block: 0.625rem;
244
- --rc-menu-button-trigger-padding-inline: 1.5rem;
245
- --rc-menu-button-trigger-border: 0;
246
- --rc-menu-button-trigger-radius: var(--md-sys-shape-corner-full, 999px);
247
- }
327
+ .rc-theme-material rc-menu-button,
328
+ :host(.rc-theme-material) rc-menu-button {
329
+ font-family: var(--md-sys-typescale-label-large-font, inherit);
330
+ font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
331
+ font-weight: 500;
332
+ --rc-menu-button-trigger-block-size: 2.5rem;
333
+ --rc-menu-button-trigger-padding-block: 0.625rem;
334
+ --rc-menu-button-trigger-padding-inline: 1.5rem;
335
+ --rc-menu-button-trigger-border: 0;
336
+ --rc-menu-button-trigger-radius: var(--md-sys-shape-corner-full, 999px);
337
+ --rc-menu-button-trigger-background: transparent;
338
+ --rc-menu-button-trigger-color: var(--md-sys-color-primary, ButtonText);
339
+ --rc-menu-button-trigger-transition: background-color 150ms ease, color 150ms ease;
340
+ --rc-menu-button-trigger-hover-background: color-mix(
341
+ in srgb,
342
+ var(--md-sys-color-primary, Highlight) 8%,
343
+ transparent
344
+ );
345
+ --rc-menu-button-trigger-hover-color: var(--md-sys-color-primary, ButtonText);
346
+ --rc-menu-button-trigger-open-background: var(--md-sys-color-secondary-container, ButtonFace);
347
+ --rc-menu-button-trigger-open-color: var(--md-sys-color-on-secondary-container, ButtonText);
348
+ }
248
349
 
249
- .rc-theme-material rc-menubar,
250
- :host(.rc-theme-material) rc-menubar {
251
- --rc-menubar-gap: 0.25rem;
252
- --rc-menubar-padding-inline: 0.25rem;
253
- --rc-menubar-padding-block: 0.25rem;
254
- --rc-menubar-border: 0;
255
- --rc-menubar-radius: var(--md-sys-shape-corner-large, 1rem);
256
- --rc-menubar-background: var(--md-sys-color-surface-container, Canvas);
257
- --rc-menubar-color: var(--md-sys-color-on-surface, CanvasText);
258
- }
350
+ .rc-theme-material rc-menubar,
351
+ :host(.rc-theme-material) rc-menubar {
352
+ --rc-menubar-gap: 0.25rem;
353
+ --rc-menubar-padding-inline: 0.25rem;
354
+ --rc-menubar-padding-block: 0.25rem;
355
+ --rc-menubar-border: 0;
356
+ --rc-menubar-radius: var(--md-sys-shape-corner-large, 1rem);
357
+ --rc-menubar-background: var(--md-sys-color-surface-container, Canvas);
358
+ --rc-menubar-color: var(--md-sys-color-on-surface, CanvasText);
359
+ --rc-menubar-item-block-size: 2.5rem;
360
+ --rc-menubar-item-padding-block: 0.5rem;
361
+ --rc-menubar-item-padding-inline: 1rem;
362
+ --rc-menubar-item-border: 0;
363
+ --rc-menubar-item-radius: var(--md-sys-shape-corner-full, 999px);
364
+ --rc-menubar-item-background: transparent;
365
+ --rc-menubar-item-color: var(--md-sys-color-primary, CanvasText);
366
+ --rc-menubar-item-transition: background-color 150ms ease, color 150ms ease;
367
+ --rc-menubar-item-hover-background: color-mix(
368
+ in srgb,
369
+ var(--md-sys-color-primary, Highlight) 8%,
370
+ transparent
371
+ );
372
+ --rc-menubar-item-hover-color: var(--md-sys-color-primary, CanvasText);
373
+ --rc-menubar-item-open-background: var(--md-sys-color-secondary-container, ButtonFace);
374
+ --rc-menubar-item-open-color: var(--md-sys-color-on-secondary-container, ButtonText);
375
+ }
259
376
 
260
- .rc-theme-material rc-toolbar,
261
- :host(.rc-theme-material) rc-toolbar {
262
- --rc-toolbar-gap-inline: 0.25rem;
263
- --rc-toolbar-padding-inline: 0.25rem;
264
- --rc-toolbar-padding-block: 0.25rem;
265
- --rc-toolbar-radius: var(--md-sys-shape-corner-large, 1rem);
266
- }
377
+ .rc-theme-material rc-toolbar,
378
+ :host(.rc-theme-material) rc-toolbar {
379
+ --rc-toolbar-gap-inline: 0.25rem;
380
+ --rc-toolbar-padding-inline: 0.25rem;
381
+ --rc-toolbar-padding-block: 0.25rem;
382
+ --rc-toolbar-radius: var(--md-sys-shape-corner-large, 1rem);
383
+ --rc-toolbar-vertical-radius: 0;
384
+ }
267
385
 
268
- .rc-theme-material rc-textarea,
269
- :host(.rc-theme-material) rc-textarea {
270
- --rc-textarea-border: 1px solid var(--md-sys-color-outline, ButtonBorder);
271
- --rc-textarea-border-radius: var(--md-sys-shape-corner-extra-small, 0.25rem);
272
- --rc-textarea-background: var(--md-sys-color-surface, Field);
273
- --rc-textarea-color: var(--md-sys-color-on-surface, FieldText);
274
- --rc-textarea-focus-outline: 2px solid var(--md-sys-color-primary, Highlight);
275
- --rc-textarea-caret-color: var(--md-sys-color-primary, FieldText);
276
- --rc-textarea-gutter-bg: var(--md-sys-color-surface-container, Canvas);
277
- --rc-textarea-gutter-color: var(--md-sys-color-on-surface-variant, GrayText);
278
- --rc-textarea-gutter-border: 1px solid var(--md-sys-color-outline-variant, ButtonBorder);
279
- }
386
+ .rc-theme-material rc-textarea,
387
+ :host(.rc-theme-material) rc-textarea {
388
+ --rc-textarea-border: 1px solid var(--md-sys-color-outline, ButtonBorder);
389
+ --rc-textarea-border-radius: var(--md-sys-shape-corner-extra-small, 0.25rem);
390
+ --rc-textarea-background: var(--md-sys-color-surface, Field);
391
+ --rc-textarea-color: var(--md-sys-color-on-surface, FieldText);
392
+ --rc-textarea-focus-outline: 2px solid var(--md-sys-color-primary, Highlight);
393
+ --rc-textarea-caret-color: var(--md-sys-color-primary, FieldText);
394
+ --rc-textarea-gutter-bg: var(--md-sys-color-surface-container, Canvas);
395
+ --rc-textarea-gutter-color: var(--md-sys-color-on-surface-variant, GrayText);
396
+ --rc-textarea-gutter-border: 1px solid var(--md-sys-color-outline-variant, ButtonBorder);
397
+ }
280
398
 
281
- .rc-theme-material rc-markdown-editor,
282
- :host(.rc-theme-material) rc-markdown-editor {
283
- --rme-background: var(--md-sys-color-surface, Canvas);
284
- --rme-color: var(--md-sys-color-on-surface, CanvasText);
285
- --rme-border: 1px solid var(--md-sys-color-outline, ButtonBorder);
286
- --rme-focus-outline: 2px solid var(--md-sys-color-primary, Highlight);
287
- }
399
+ .rc-theme-material rc-markdown-editor,
400
+ :host(.rc-theme-material) rc-markdown-editor {
401
+ --rme-background: var(--md-sys-color-surface, Canvas);
402
+ --rme-color: var(--md-sys-color-on-surface, CanvasText);
403
+ --rme-border: 1px solid var(--md-sys-color-outline, ButtonBorder);
404
+ --rme-focus-outline: 2px solid var(--md-sys-color-primary, Highlight);
405
+ }
288
406
 
289
- .rc-theme-material rc-transfer-list,
290
- :host(.rc-theme-material) rc-transfer-list {
291
- --rc-transfer-list-gap: 1rem;
292
- --rc-transfer-list-panel-gap: 0.5rem;
293
- --rc-transfer-list-listbox-border: 1px solid var(--md-sys-color-outline-variant, ButtonBorder);
294
- }
407
+ .rc-theme-material rc-transfer-list,
408
+ :host(.rc-theme-material) rc-transfer-list {
409
+ --rc-transfer-list-gap: 1rem;
410
+ --rc-transfer-list-panel-gap: 0.5rem;
411
+ --rc-transfer-list-listbox-border: 1px solid var(--md-sys-color-outline-variant, ButtonBorder);
412
+ }
295
413
 
296
- .rc-theme-material rc-splitter,
297
- :host(.rc-theme-material) rc-splitter {
298
- --rc-splitter-separator-color: var(--md-sys-color-surface-container, Canvas);
299
- --rc-splitter-keyline: 1px solid var(--md-sys-color-outline-variant, ButtonBorder);
300
- --rc-splitter-handle-color: var(--md-sys-color-on-surface-variant, ButtonBorder);
301
- }
414
+ .rc-theme-material rc-fab,
415
+ :host(.rc-theme-material) rc-fab {
416
+ --rc-fab-bg: var(--md-fab-container-color, var(--md-sys-color-primary-container, ButtonFace));
417
+ --rc-fab-color: var(--md-fab-icon-color, var(--md-sys-color-on-primary-container, ButtonText));
418
+ --rc-fab-shadow: var(--rc-shadow-level3);
419
+ --rc-fab-shadow-hover: var(--rc-shadow-level4);
420
+ --rc-fab-shadow-active: var(--rc-shadow-level3);
421
+ --rc-fab-radius: var(--md-fab-container-shape, var(--md-sys-shape-corner-large, 1rem));
422
+ --rc-fab-font-family: var(--md-fab-label-text-font, var(--md-sys-typescale-label-large-font, inherit));
423
+ --rc-fab-font-size: var(--md-fab-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));
424
+ --rc-fab-font-weight: var(--md-fab-label-text-weight, var(--md-sys-typescale-label-large-weight, 500));
425
+ --rc-fab-letter-spacing: var(--md-fab-label-text-tracking, var(--md-sys-typescale-label-large-tracking, 0.00625em));
426
+ --rc-fab-focus-ring: var(--rc-focus-ring);
427
+ --rc-fab-focus-ring-offset: var(--rc-focus-ring-offset);
428
+ }
302
429
 
303
- .rc-theme-material rc-virtual-canvas,
304
- :host(.rc-theme-material) rc-virtual-canvas {
305
- --rc-virtual-canvas-scrollbar-thumb-background: var(--md-sys-color-outline, ButtonFace);
306
- --rc-virtual-canvas-scrollbar-track-background: var(--md-sys-color-surface-container, Canvas);
307
- --rc-virtual-canvas-scrollbar-button-background: var(--md-sys-color-surface-container-high, ButtonFace);
308
- }
430
+ .rc-theme-material rc-splitter,
431
+ :host(.rc-theme-material) rc-splitter {
432
+ --rc-splitter-separator-color: var(--md-sys-color-surface-container, Canvas);
433
+ --rc-splitter-keyline: 1px solid var(--md-sys-color-outline-variant, ButtonBorder);
434
+ --rc-splitter-handle-color: var(--md-sys-color-on-surface-variant, ButtonBorder);
435
+ }
309
436
 
310
- @media (forced-colors: active) {
311
- .rc-theme-material,
312
- :host(.rc-theme-material) {
313
- --rc-shadow: none;
314
- --rc-disabled-opacity: 1;
437
+ .rc-theme-material rc-virtual-canvas,
438
+ :host(.rc-theme-material) rc-virtual-canvas {
439
+ --rc-virtual-canvas-scrollbar-thumb-background: var(--md-sys-color-outline, ButtonFace);
440
+ --rc-virtual-canvas-scrollbar-track-background: var(--md-sys-color-surface-container, Canvas);
441
+ --rc-virtual-canvas-scrollbar-button-background: var(
442
+ --md-sys-color-surface-container-high,
443
+ ButtonFace
444
+ );
315
445
  }
316
446
 
317
- .rc-theme-material rc-select,
318
- :host(.rc-theme-material) rc-select,
319
- .rc-theme-material rc-combobox,
320
- :host(.rc-theme-material) rc-combobox,
321
- .rc-theme-material rc-menu,
322
- :host(.rc-theme-material) rc-menu,
323
- .rc-theme-material rc-menu-button,
324
- :host(.rc-theme-material) rc-menu-button {
325
- --rc-border-color: ButtonBorder;
326
- --rc-shadow: none;
447
+ @media (forced-colors: active) {
448
+ .rc-theme-material,
449
+ :host(.rc-theme-material) {
450
+ --rc-shadow-level0: none;
451
+ --rc-shadow-level1: none;
452
+ --rc-shadow-level2: none;
453
+ --rc-shadow-level3: none;
454
+ --rc-shadow: none;
455
+ --rc-disabled-opacity: 1;
456
+ }
457
+
458
+ .rc-theme-material rc-select,
459
+ :host(.rc-theme-material) rc-select,
460
+ .rc-theme-material rc-combobox,
461
+ :host(.rc-theme-material) rc-combobox,
462
+ .rc-theme-material rc-menu,
463
+ :host(.rc-theme-material) rc-menu,
464
+ .rc-theme-material rc-menu-button,
465
+ :host(.rc-theme-material) rc-menu-button {
466
+ --rc-border-color: ButtonBorder;
467
+ --rc-shadow: none;
468
+ }
469
+
470
+ .rc-theme-material rc-fab,
471
+ :host(.rc-theme-material) rc-fab {
472
+ --rc-fab-shadow: none;
473
+ --rc-fab-shadow-hover: none;
474
+ --rc-fab-shadow-active: none;
475
+ }
327
476
  }
328
477
  }
329
- }