@rcarls/rc-theme-material 0.1.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.
- package/README.md +114 -0
- package/bridge.css +329 -0
- package/components/accordion.css +14 -0
- package/components/app-bar.css +26 -0
- package/components/combobox.css +31 -0
- package/components/dialog.css +26 -0
- package/components/disclosure.css +28 -0
- package/components/listbox.css +33 -0
- package/components/markdown-editor.css +16 -0
- package/components/menu-button.css +20 -0
- package/components/menu.css +24 -0
- package/components/menubar.css +9 -0
- package/components/modes.css +31 -0
- package/components/range-slider.css +24 -0
- package/components/search-bar.css +23 -0
- package/components/select.css +34 -0
- package/components/slider.css +19 -0
- package/components/splitter.css +18 -0
- package/components/textarea.css +23 -0
- package/components/toolbar.css +31 -0
- package/components/transfer-list.css +27 -0
- package/components/virtual-canvas.css +13 -0
- package/components.css +22 -0
- package/defaults.css +101 -0
- package/package.json +45 -0
- package/theme.css +3 -0
package/README.md
ADDED
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
# `@rcarls/rc-theme-material`
|
|
2
|
+
|
|
3
|
+
Optional Material 3 design-token bridge and full CSS style layer for
|
|
4
|
+
`rc-webcomponents`.
|
|
5
|
+
|
|
6
|
+
The package maps Material system and component CSS custom properties into RC's
|
|
7
|
+
public `--rc-*` styling contracts. It changes presentation only; it does not
|
|
8
|
+
claim behavioral or structural conformance with Material components.
|
|
9
|
+
|
|
10
|
+
## Installation
|
|
11
|
+
|
|
12
|
+
```sh
|
|
13
|
+
yarn add @rcarls/rc-theme-material
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
Use an application's existing Material token environment:
|
|
17
|
+
|
|
18
|
+
```css
|
|
19
|
+
@import '@rcarls/rc-theme-material/bridge.css';
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
```html
|
|
23
|
+
<main class="rc-theme-material">
|
|
24
|
+
<!-- rc components -->
|
|
25
|
+
</main>
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
For a standalone baseline that includes representative light and dark Material
|
|
29
|
+
system tokens and the full component style layer:
|
|
30
|
+
|
|
31
|
+
```css
|
|
32
|
+
@import '@rcarls/rc-theme-material/theme.css';
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
Import `defaults.css` separately when only the baseline Material system tokens
|
|
36
|
+
are needed. Import `components.css` with `bridge.css` when an application
|
|
37
|
+
provides its own Material system tokens but wants the full RC component styling.
|
|
38
|
+
`bridge.css` never defines `--md-sys-*`, so branded or dynamically generated
|
|
39
|
+
application tokens remain authoritative.
|
|
40
|
+
|
|
41
|
+
Selective component styles are also exported:
|
|
42
|
+
|
|
43
|
+
```css
|
|
44
|
+
@import '@rcarls/rc-theme-material/bridge.css';
|
|
45
|
+
@import '@rcarls/rc-theme-material/components/select.css';
|
|
46
|
+
@import '@rcarls/rc-theme-material/components/menu.css';
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
Package rules use ordered cascade layers:
|
|
50
|
+
|
|
51
|
+
```css
|
|
52
|
+
@layer rc-theme-material.defaults, rc-theme-material.bridge, rc-theme-material.components;
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
Unlayered application CSS and application layers declared after these layers
|
|
56
|
+
can override the theme normally.
|
|
57
|
+
|
|
58
|
+
## Supported mappings
|
|
59
|
+
|
|
60
|
+
The initial bridge and style layer cover:
|
|
61
|
+
|
|
62
|
+
- `rc-select` and `rc-combobox`
|
|
63
|
+
- `rc-slider` and `rc-range-slider`
|
|
64
|
+
- `rc-search-bar`
|
|
65
|
+
- `rc-app-bar`
|
|
66
|
+
- `rc-menu`, `rc-menu-button`, and `rc-menubar`
|
|
67
|
+
- `rc-toolbar`
|
|
68
|
+
- `rc-listbox`, `rc-textarea`, `rc-markdown-editor`, and `rc-transfer-list`
|
|
69
|
+
- `rc-dialog`, `rc-disclosure`, and `rc-accordion`
|
|
70
|
+
- `rc-splitter` and `rc-virtual-canvas`
|
|
71
|
+
|
|
72
|
+
Material Web token names are used where a corresponding component exists.
|
|
73
|
+
Search bar and top app bar mappings follow Material 3 token terminology and
|
|
74
|
+
fall back through Material system roles.
|
|
75
|
+
|
|
76
|
+
The initial mapping targets Material Web's `v0_192` component-token generation
|
|
77
|
+
and the public token names documented at material-web.dev. Material Web token
|
|
78
|
+
changes are not adopted silently; mapping updates are versioned package API.
|
|
79
|
+
|
|
80
|
+
Consumer-provided native controls remain consumer-owned. The bridge does not
|
|
81
|
+
style arbitrary buttons or infer filled, tonal, text, or icon-button intent.
|
|
82
|
+
Menu-button mappings provide trigger geometry only; applications choose trigger
|
|
83
|
+
colors and button variants.
|
|
84
|
+
|
|
85
|
+
The full style layer does style native controls when their intent is established
|
|
86
|
+
by an RC composition, including menu items, menu triggers, toolbar controls,
|
|
87
|
+
app-bar actions, transfer-list actions, disclosure summaries, and dialog
|
|
88
|
+
actions. It never styles unrelated application controls.
|
|
89
|
+
|
|
90
|
+
## Fidelity
|
|
91
|
+
|
|
92
|
+
| Surface | Fidelity | Notes |
|
|
93
|
+
| --- | --- | --- |
|
|
94
|
+
| Select, combobox, listbox, menus, search, app bar, sliders | Strong | Existing parts and states support recognizable M3 treatments. |
|
|
95
|
+
| Toolbar, transfer list, textarea, splitter, dialog, disclosure | Approximate | Material styling is applied to RC's existing structure. |
|
|
96
|
+
| Markdown editor and virtual canvas | Foundational | Surface, state, and contextual-control styling only. |
|
|
97
|
+
|
|
98
|
+
Floating labels, supporting/error text structures, ripples, Material button
|
|
99
|
+
variants, and richer component-specific compositions require future styling
|
|
100
|
+
hooks or structural variants. Fonts and icons are not bundled; applications may
|
|
101
|
+
provide Roboto and Material Symbols through their normal asset pipeline.
|
|
102
|
+
|
|
103
|
+
## Token precedence
|
|
104
|
+
|
|
105
|
+
Component tokens override system tokens, which override RC's platform fallback:
|
|
106
|
+
|
|
107
|
+
```css
|
|
108
|
+
--rc-slider-progress-background:
|
|
109
|
+
var(--md-slider-active-track-color, var(--md-sys-color-primary, Highlight));
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
The bridge's Material token mapping is a versioned public contract. Review
|
|
113
|
+
release notes before upgrading when an application overrides Material component
|
|
114
|
+
tokens directly.
|
package/bridge.css
ADDED
|
@@ -0,0 +1,329 @@
|
|
|
1
|
+
@layer rc-theme-material.defaults, rc-theme-material.bridge, rc-theme-material.components;
|
|
2
|
+
|
|
3
|
+
@layer rc-theme-material.bridge {
|
|
4
|
+
/*
|
|
5
|
+
* Material 3 token bridge for rc-webcomponents.
|
|
6
|
+
*
|
|
7
|
+
* This file intentionally does not define --md-sys-* values. It consumes an
|
|
8
|
+
* application's Material token environment and maps it to RC's public styling
|
|
9
|
+
* contract. Import defaults.css first only when a standalone baseline is
|
|
10
|
+
* desired.
|
|
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
|
+
}
|
|
42
|
+
|
|
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
|
+
}
|
|
72
|
+
|
|
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
|
+
}
|
|
78
|
+
|
|
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
|
+
}
|
|
108
|
+
|
|
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
|
+
}
|
|
128
|
+
|
|
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
|
+
}
|
|
167
|
+
|
|
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
|
+
}
|
|
195
|
+
|
|
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
|
+
}
|
|
217
|
+
|
|
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
|
+
}
|
|
239
|
+
|
|
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
|
+
}
|
|
248
|
+
|
|
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
|
+
}
|
|
259
|
+
|
|
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
|
+
}
|
|
267
|
+
|
|
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
|
+
}
|
|
280
|
+
|
|
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
|
+
}
|
|
288
|
+
|
|
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
|
+
}
|
|
295
|
+
|
|
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
|
+
}
|
|
302
|
+
|
|
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
|
+
}
|
|
309
|
+
|
|
310
|
+
@media (forced-colors: active) {
|
|
311
|
+
.rc-theme-material,
|
|
312
|
+
:host(.rc-theme-material) {
|
|
313
|
+
--rc-shadow: none;
|
|
314
|
+
--rc-disabled-opacity: 1;
|
|
315
|
+
}
|
|
316
|
+
|
|
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;
|
|
327
|
+
}
|
|
328
|
+
}
|
|
329
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
@layer rc-theme-material.components {
|
|
2
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-accordion {
|
|
3
|
+
display: grid;
|
|
4
|
+
gap: 0.125rem;
|
|
5
|
+
overflow: hidden;
|
|
6
|
+
border-radius: var(--md-sys-shape-corner-medium, 0.75rem);
|
|
7
|
+
background: var(--md-sys-color-surface-container, Canvas);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-accordion > rc-disclosure > details {
|
|
11
|
+
border: 0;
|
|
12
|
+
background: transparent;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
@layer rc-theme-material.components {
|
|
2
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-app-bar {
|
|
3
|
+
box-shadow: var(--md-sys-elevation-level0, none);
|
|
4
|
+
font-family: var(--md-sys-typescale-title-large-font, inherit);
|
|
5
|
+
transition: box-shadow 200ms ease, translate 200ms ease;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-app-bar[data-scrolled] {
|
|
9
|
+
--rc-app-bar-bg: var(--md-sys-color-surface-container, Canvas);
|
|
10
|
+
box-shadow: var(--md-sys-elevation-level2, none);
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-app-bar :is(button, [role='button']) {
|
|
14
|
+
inline-size: 3rem;
|
|
15
|
+
block-size: 3rem;
|
|
16
|
+
padding: 0.75rem;
|
|
17
|
+
border: 0;
|
|
18
|
+
border-radius: var(--md-sys-shape-corner-full, 999px);
|
|
19
|
+
background: transparent;
|
|
20
|
+
color: inherit;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-app-bar :is(button, [role='button']):hover {
|
|
24
|
+
background: color-mix(in srgb, var(--md-sys-color-on-surface, CanvasText) 8%, transparent);
|
|
25
|
+
}
|
|
26
|
+
}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
@layer rc-theme-material.components {
|
|
2
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-combobox::part(anchor) {
|
|
3
|
+
box-sizing: border-box;
|
|
4
|
+
transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-combobox::part(anchor):hover {
|
|
8
|
+
border-color: var(--md-sys-color-on-surface, CanvasText);
|
|
9
|
+
background: color-mix(in srgb, var(--md-sys-color-on-surface, CanvasText) 4%, var(--md-sys-color-surface, Field));
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-combobox::part(anchor):focus-within {
|
|
13
|
+
border-color: var(--md-sys-color-primary, Highlight);
|
|
14
|
+
box-shadow: inset 0 0 0 1px var(--md-sys-color-primary, Highlight);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-combobox::part(chip) {
|
|
18
|
+
min-block-size: 2rem;
|
|
19
|
+
border-color: var(--md-sys-color-outline, ButtonBorder);
|
|
20
|
+
background: transparent;
|
|
21
|
+
color: var(--md-sys-color-on-surface-variant, ButtonText);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-combobox::part(toggle) {
|
|
25
|
+
border-radius: var(--md-sys-shape-corner-full, 999px);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-combobox::part(toggle):hover {
|
|
29
|
+
background: color-mix(in srgb, var(--md-sys-color-on-surface, CanvasText) 8%, transparent);
|
|
30
|
+
}
|
|
31
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
@layer rc-theme-material.components {
|
|
2
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-dialog > dialog {
|
|
3
|
+
max-inline-size: min(35rem, calc(100vw - 3rem));
|
|
4
|
+
padding: 1.5rem;
|
|
5
|
+
border: 0;
|
|
6
|
+
border-radius: var(--md-sys-shape-corner-extra-large, 1.75rem);
|
|
7
|
+
background: var(--md-sys-color-surface-container-high, Canvas);
|
|
8
|
+
color: var(--md-sys-color-on-surface, CanvasText);
|
|
9
|
+
box-shadow: var(--md-sys-elevation-level3, var(--md-sys-elevation-level2, none));
|
|
10
|
+
font-family: var(--md-sys-typescale-body-medium-font, inherit);
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-dialog > dialog::backdrop {
|
|
14
|
+
background: color-mix(in srgb, var(--md-sys-color-scrim, #000) 32%, transparent);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-dialog > dialog :is(button, [role='button']) {
|
|
18
|
+
min-block-size: 2.5rem;
|
|
19
|
+
padding-inline: 1.5rem;
|
|
20
|
+
border: 0;
|
|
21
|
+
border-radius: var(--md-sys-shape-corner-full, 999px);
|
|
22
|
+
background: transparent;
|
|
23
|
+
color: var(--md-sys-color-primary, ButtonText);
|
|
24
|
+
font-weight: 500;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
@layer rc-theme-material.components {
|
|
2
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-disclosure {
|
|
3
|
+
display: block;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-disclosure > details {
|
|
7
|
+
border-block-end: 1px solid var(--md-sys-color-outline-variant, ButtonBorder);
|
|
8
|
+
background: var(--md-sys-color-surface, Canvas);
|
|
9
|
+
color: var(--md-sys-color-on-surface, CanvasText);
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-disclosure > details > summary {
|
|
13
|
+
min-block-size: 3rem;
|
|
14
|
+
padding: 0.75rem 1rem;
|
|
15
|
+
border-radius: var(--md-sys-shape-corner-small, 0.5rem);
|
|
16
|
+
font-weight: 500;
|
|
17
|
+
cursor: pointer;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-disclosure > details > summary:hover {
|
|
21
|
+
background: color-mix(in srgb, var(--md-sys-color-on-surface, CanvasText) 8%, transparent);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-disclosure > details > :not(summary) {
|
|
25
|
+
padding-inline: 1rem;
|
|
26
|
+
padding-block-end: 1rem;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
@layer rc-theme-material.components {
|
|
2
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-listbox {
|
|
3
|
+
display: block;
|
|
4
|
+
color: var(--md-sys-color-on-surface, CanvasText);
|
|
5
|
+
font-family: var(--md-sys-typescale-body-large-font, inherit);
|
|
6
|
+
font-size: var(--md-sys-typescale-body-large-size, 1rem);
|
|
7
|
+
line-height: var(--md-sys-typescale-body-large-line-height, 1.5rem);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-listbox [part~='option'] {
|
|
11
|
+
min-block-size: 3rem;
|
|
12
|
+
padding: 0.75rem;
|
|
13
|
+
border-radius: 0;
|
|
14
|
+
background: transparent;
|
|
15
|
+
color: inherit;
|
|
16
|
+
transition: background-color 150ms ease, color 150ms ease;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-listbox [part~='option']:hover,
|
|
20
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-listbox [part~='option'][data-active] {
|
|
21
|
+
background: color-mix(in srgb, var(--md-sys-color-on-surface, CanvasText) 8%, transparent);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-listbox [part~='option'][aria-selected='true'] {
|
|
25
|
+
background: var(--md-sys-color-secondary-container, Highlight);
|
|
26
|
+
color: var(--md-sys-color-on-secondary-container, HighlightText);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-listbox [part~='option'][aria-disabled='true'] {
|
|
30
|
+
color: var(--md-sys-color-on-surface, GrayText);
|
|
31
|
+
opacity: var(--md-sys-state-disabled-state-layer-opacity, 0.38);
|
|
32
|
+
}
|
|
33
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
@layer rc-theme-material.components {
|
|
2
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-markdown-editor {
|
|
3
|
+
--rme-background: var(--md-sys-color-surface, Canvas);
|
|
4
|
+
--rme-color: var(--md-sys-color-on-surface, CanvasText);
|
|
5
|
+
--rme-border: 1px solid var(--md-sys-color-outline, ButtonBorder);
|
|
6
|
+
--rme-border-radius: 0 0 var(--md-sys-shape-corner-small, 0.5rem) var(--md-sys-shape-corner-small, 0.5rem);
|
|
7
|
+
--rme-focus-outline: 2px solid var(--md-sys-color-primary, Highlight);
|
|
8
|
+
--rme-padding: 1rem;
|
|
9
|
+
--rme-toolbar-gap: 0.25rem;
|
|
10
|
+
--rme-toolbar-button-size: 2.5rem;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-markdown-editor::part(rich-view) {
|
|
14
|
+
font-family: var(--md-sys-typescale-body-large-font, inherit);
|
|
15
|
+
}
|
|
16
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
@layer rc-theme-material.components {
|
|
2
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-menu-button > :is(button, [role='button'])[slot='trigger'] {
|
|
3
|
+
border-color: transparent;
|
|
4
|
+
background: transparent;
|
|
5
|
+
color: var(--md-sys-color-primary, ButtonText);
|
|
6
|
+
font-family: var(--md-sys-typescale-label-large-font, inherit);
|
|
7
|
+
font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
|
|
8
|
+
font-weight: 500;
|
|
9
|
+
transition: background-color 150ms ease;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-menu-button > :is(button, [role='button'])[slot='trigger']:hover {
|
|
13
|
+
background: color-mix(in srgb, var(--md-sys-color-primary, Highlight) 8%, transparent);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-menu-button > :is(button, [role='button'])[slot='trigger'][aria-expanded='true'] {
|
|
17
|
+
background: var(--md-sys-color-secondary-container, ButtonFace);
|
|
18
|
+
color: var(--md-sys-color-on-secondary-container, ButtonText);
|
|
19
|
+
}
|
|
20
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
@layer rc-theme-material.components {
|
|
2
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-menu :is(button, [role='menuitem'], [role='menuitemradio'], [role='menuitemcheckbox']) {
|
|
3
|
+
min-block-size: 3rem;
|
|
4
|
+
border: 0;
|
|
5
|
+
background: transparent;
|
|
6
|
+
color: var(--md-sys-color-on-surface, CanvasText);
|
|
7
|
+
font: inherit;
|
|
8
|
+
transition: background-color 150ms ease;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-menu :is(button, [role='menuitem'], [role='menuitemradio'], [role='menuitemcheckbox']):hover {
|
|
12
|
+
background: color-mix(in srgb, var(--md-sys-color-on-surface, CanvasText) 8%, transparent);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-menu :is([aria-checked='true'], [aria-current='true']) {
|
|
16
|
+
background: var(--md-sys-color-secondary-container, Highlight);
|
|
17
|
+
color: var(--md-sys-color-on-secondary-container, HighlightText);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-menu :is(button, [role^='menuitem']):focus-visible {
|
|
21
|
+
outline: 2px solid var(--md-sys-color-primary, Highlight);
|
|
22
|
+
outline-offset: -2px;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
@layer rc-theme-material.components {
|
|
2
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-menubar::part(root) {
|
|
3
|
+
box-shadow: var(--md-sys-elevation-level0, none);
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-menubar rc-menu-button > :is(button, [role='button'])[slot='trigger'] {
|
|
7
|
+
padding-inline: 1rem;
|
|
8
|
+
}
|
|
9
|
+
}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
@layer rc-theme-material.components {
|
|
2
|
+
@media (prefers-reduced-motion: reduce) {
|
|
3
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) *,
|
|
4
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) *::before,
|
|
5
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) *::after {
|
|
6
|
+
transition-duration: 0s !important;
|
|
7
|
+
animation-duration: 0s !important;
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
@media (forced-colors: active) {
|
|
12
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) :is(
|
|
13
|
+
rc-select,
|
|
14
|
+
rc-combobox,
|
|
15
|
+
rc-search-bar,
|
|
16
|
+
rc-textarea,
|
|
17
|
+
rc-markdown-editor,
|
|
18
|
+
rc-menu,
|
|
19
|
+
rc-menubar,
|
|
20
|
+
rc-toolbar,
|
|
21
|
+
rc-dialog > dialog
|
|
22
|
+
) {
|
|
23
|
+
forced-color-adjust: auto;
|
|
24
|
+
box-shadow: none;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) :is(button, [role='button'], [role^='menuitem']):focus-visible {
|
|
28
|
+
outline: 2px solid Highlight;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
@layer rc-theme-material.components {
|
|
2
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-range-slider::part(thumb) {
|
|
3
|
+
border-width: 0;
|
|
4
|
+
border-radius: var(--md-sys-shape-corner-full, 999px);
|
|
5
|
+
box-shadow: 0 0 0 0 transparent;
|
|
6
|
+
transition: box-shadow 150ms ease, scale 150ms ease;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-range-slider::part(thumb):hover {
|
|
10
|
+
box-shadow: 0 0 0 0.5rem color-mix(in srgb, var(--md-sys-color-primary, Highlight) 8%, transparent);
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-range-slider::part(thumb):active {
|
|
14
|
+
box-shadow: 0 0 0 0.625rem color-mix(in srgb, var(--md-sys-color-primary, Highlight) 12%, transparent);
|
|
15
|
+
scale: 0.9;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-range-slider::part(value-display) {
|
|
19
|
+
padding: 0.25rem 0.5rem;
|
|
20
|
+
border-radius: var(--md-sys-shape-corner-extra-small, 0.25rem);
|
|
21
|
+
background: var(--md-sys-color-inverse-surface, var(--md-sys-color-on-surface, CanvasText));
|
|
22
|
+
color: var(--md-sys-color-inverse-on-surface, var(--md-sys-color-surface, Canvas));
|
|
23
|
+
}
|
|
24
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
@layer rc-theme-material.components {
|
|
2
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-search-bar::part(root) {
|
|
3
|
+
box-sizing: border-box;
|
|
4
|
+
box-shadow: var(--md-sys-elevation-level0, none);
|
|
5
|
+
transition: box-shadow 200ms ease, background-color 200ms ease;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-search-bar:hover::part(root) {
|
|
9
|
+
background: color-mix(in srgb, var(--md-sys-color-on-surface, CanvasText) 4%, var(--md-sys-color-surface-container-high, Field));
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-search-bar[data-focus-visible]::part(root) {
|
|
13
|
+
box-shadow: var(--md-sys-elevation-level1, none);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-search-bar::part(clear) {
|
|
17
|
+
border-radius: var(--md-sys-shape-corner-full, 999px);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-search-bar::part(clear):hover {
|
|
21
|
+
background: color-mix(in srgb, var(--md-sys-color-on-surface-variant, CanvasText) 8%, transparent);
|
|
22
|
+
}
|
|
23
|
+
}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
@layer rc-theme-material.components {
|
|
2
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-select::part(trigger) {
|
|
3
|
+
box-sizing: border-box;
|
|
4
|
+
transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-select::part(trigger):hover {
|
|
8
|
+
border-color: var(--md-sys-color-on-surface, CanvasText);
|
|
9
|
+
background: color-mix(in srgb, var(--md-sys-color-on-surface, CanvasText) 4%, var(--md-sys-color-surface, Field));
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-select::part(trigger):focus-visible,
|
|
13
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-select::part(trigger)[aria-expanded='true'] {
|
|
14
|
+
border-color: var(--md-sys-color-primary, Highlight);
|
|
15
|
+
box-shadow: inset 0 0 0 1px var(--md-sys-color-primary, Highlight);
|
|
16
|
+
outline: none;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-select::part(chip) {
|
|
20
|
+
min-block-size: 2rem;
|
|
21
|
+
border-color: var(--md-sys-color-outline, ButtonBorder);
|
|
22
|
+
background: transparent;
|
|
23
|
+
color: var(--md-sys-color-on-surface-variant, ButtonText);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-select::part(chip):hover {
|
|
27
|
+
background: color-mix(in srgb, var(--md-sys-color-on-surface-variant, CanvasText) 8%, transparent);
|
|
28
|
+
color: var(--md-sys-color-on-surface-variant, CanvasText);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-select::part(listbox) {
|
|
32
|
+
background: var(--md-menu-container-color, var(--md-sys-color-surface-container, Canvas));
|
|
33
|
+
}
|
|
34
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
@layer rc-theme-material.components {
|
|
2
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-slider::part(value-display) {
|
|
3
|
+
min-inline-size: 2rem;
|
|
4
|
+
padding: 0.25rem 0.5rem;
|
|
5
|
+
border-radius: var(--md-sys-shape-corner-extra-small, 0.25rem);
|
|
6
|
+
background: var(--md-sys-color-inverse-surface, var(--md-sys-color-on-surface, CanvasText));
|
|
7
|
+
color: var(--md-sys-color-inverse-on-surface, var(--md-sys-color-surface, Canvas));
|
|
8
|
+
font-size: var(--md-sys-typescale-label-small-size, 0.75rem);
|
|
9
|
+
text-align: center;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-slider input[type='range'] {
|
|
13
|
+
accent-color: var(--md-slider-handle-color, var(--md-sys-color-primary, Highlight));
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-slider[disabled] {
|
|
17
|
+
opacity: var(--md-sys-state-disabled-state-layer-opacity, 0.38);
|
|
18
|
+
}
|
|
19
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
@layer rc-theme-material.components {
|
|
2
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-splitter {
|
|
3
|
+
--rc-splitter-separator-size: 0.5rem;
|
|
4
|
+
--rc-splitter-separator-color: var(--md-sys-color-surface-container, Canvas);
|
|
5
|
+
--rc-splitter-keyline: 1px solid var(--md-sys-color-outline-variant, ButtonBorder);
|
|
6
|
+
--rc-splitter-handle-color: var(--md-sys-color-on-surface-variant, ButtonBorder);
|
|
7
|
+
--rc-splitter-separator-handle-size: 3rem;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-splitter::part(separator-handle) {
|
|
11
|
+
border-radius: var(--md-sys-shape-corner-full, 999px);
|
|
12
|
+
transition: background-color 150ms ease;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-splitter::part(separator-handle):hover {
|
|
16
|
+
background-color: color-mix(in srgb, var(--md-sys-color-primary, Highlight) 8%, transparent);
|
|
17
|
+
}
|
|
18
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
@layer rc-theme-material.components {
|
|
2
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-textarea {
|
|
3
|
+
--rc-textarea-border: 1px solid var(--md-sys-color-outline, ButtonBorder);
|
|
4
|
+
--rc-textarea-border-radius: var(--md-sys-shape-corner-extra-small, 0.25rem);
|
|
5
|
+
--rc-textarea-background: var(--md-sys-color-surface, Field);
|
|
6
|
+
--rc-textarea-color: var(--md-sys-color-on-surface, FieldText);
|
|
7
|
+
--rc-textarea-padding: 1rem;
|
|
8
|
+
--rc-textarea-focus-outline: 2px solid var(--md-sys-color-primary, Highlight);
|
|
9
|
+
--rc-textarea-caret-color: var(--md-sys-color-primary, FieldText);
|
|
10
|
+
--rc-textarea-active-line-bg: color-mix(in srgb, var(--md-sys-color-primary, Highlight) 8%, transparent);
|
|
11
|
+
--rc-textarea-gutter-bg: var(--md-sys-color-surface-container, Canvas);
|
|
12
|
+
--rc-textarea-gutter-color: var(--md-sys-color-on-surface-variant, GrayText);
|
|
13
|
+
--rc-textarea-gutter-border: 1px solid var(--md-sys-color-outline-variant, ButtonBorder);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-textarea::part(root) {
|
|
17
|
+
transition: border-color 150ms ease, box-shadow 150ms ease;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-textarea::part(root):hover {
|
|
21
|
+
border-color: var(--md-sys-color-on-surface, CanvasText);
|
|
22
|
+
}
|
|
23
|
+
}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
@layer rc-theme-material.components {
|
|
2
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-toolbar::part(root) {
|
|
3
|
+
background: var(--md-sys-color-surface-container, Canvas);
|
|
4
|
+
color: var(--md-sys-color-on-surface, CanvasText);
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-toolbar > button {
|
|
8
|
+
min-inline-size: 2.5rem;
|
|
9
|
+
min-block-size: 2.5rem;
|
|
10
|
+
padding: 0.5rem;
|
|
11
|
+
border: 0;
|
|
12
|
+
border-radius: var(--md-sys-shape-corner-full, 999px);
|
|
13
|
+
background: transparent;
|
|
14
|
+
color: inherit;
|
|
15
|
+
font: inherit;
|
|
16
|
+
transition: background-color 150ms ease;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-toolbar > button:hover {
|
|
20
|
+
background: color-mix(in srgb, var(--md-sys-color-on-surface, CanvasText) 8%, transparent);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-toolbar > button[aria-pressed='true'] {
|
|
24
|
+
background: var(--md-sys-color-secondary-container, Highlight);
|
|
25
|
+
color: var(--md-sys-color-on-secondary-container, HighlightText);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-toolbar > button:disabled {
|
|
29
|
+
opacity: var(--md-sys-state-disabled-state-layer-opacity, 0.38);
|
|
30
|
+
}
|
|
31
|
+
}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
@layer rc-theme-material.components {
|
|
2
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-transfer-list {
|
|
3
|
+
--rc-transfer-list-gap: 1rem;
|
|
4
|
+
--rc-transfer-list-panel-gap: 0.5rem;
|
|
5
|
+
--rc-transfer-list-listbox-border: 1px solid var(--md-sys-color-outline-variant, ButtonBorder);
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-transfer-list::part(panel) {
|
|
9
|
+
padding: 0.75rem;
|
|
10
|
+
border-radius: var(--md-sys-shape-corner-medium, 0.75rem);
|
|
11
|
+
background: var(--md-sys-color-surface-container, Canvas);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-transfer-list::part(label) {
|
|
15
|
+
color: var(--md-sys-color-on-surface-variant, CanvasText);
|
|
16
|
+
font-weight: 500;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-transfer-list::part(button) {
|
|
20
|
+
min-block-size: 2.5rem;
|
|
21
|
+
padding-inline: 1rem;
|
|
22
|
+
border: 0;
|
|
23
|
+
border-radius: var(--md-sys-shape-corner-full, 999px);
|
|
24
|
+
background: var(--md-sys-color-secondary-container, ButtonFace);
|
|
25
|
+
color: var(--md-sys-color-on-secondary-container, ButtonText);
|
|
26
|
+
}
|
|
27
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
@layer rc-theme-material.components {
|
|
2
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-virtual-canvas {
|
|
3
|
+
--rc-virtual-canvas-scrollbar-width: thin;
|
|
4
|
+
--rc-virtual-canvas-scrollbar-size: 0.75rem;
|
|
5
|
+
--rc-virtual-canvas-scrollbar-thumb-background: var(--md-sys-color-outline, ButtonFace);
|
|
6
|
+
--rc-virtual-canvas-scrollbar-track-background: var(--md-sys-color-surface-container, Canvas);
|
|
7
|
+
--rc-virtual-canvas-scrollbar-button-background: var(--md-sys-color-surface-container-high, ButtonFace);
|
|
8
|
+
border-radius: var(--md-sys-shape-corner-medium, 0.75rem);
|
|
9
|
+
background: var(--md-sys-color-surface-container-low, Canvas);
|
|
10
|
+
box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant, ButtonBorder);
|
|
11
|
+
overflow: hidden;
|
|
12
|
+
}
|
|
13
|
+
}
|
package/components.css
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
@layer rc-theme-material.defaults, rc-theme-material.bridge, rc-theme-material.components;
|
|
2
|
+
|
|
3
|
+
@import './components/listbox.css';
|
|
4
|
+
@import './components/select.css';
|
|
5
|
+
@import './components/combobox.css';
|
|
6
|
+
@import './components/search-bar.css';
|
|
7
|
+
@import './components/textarea.css';
|
|
8
|
+
@import './components/markdown-editor.css';
|
|
9
|
+
@import './components/transfer-list.css';
|
|
10
|
+
@import './components/app-bar.css';
|
|
11
|
+
@import './components/menu.css';
|
|
12
|
+
@import './components/menu-button.css';
|
|
13
|
+
@import './components/menubar.css';
|
|
14
|
+
@import './components/toolbar.css';
|
|
15
|
+
@import './components/slider.css';
|
|
16
|
+
@import './components/range-slider.css';
|
|
17
|
+
@import './components/splitter.css';
|
|
18
|
+
@import './components/dialog.css';
|
|
19
|
+
@import './components/disclosure.css';
|
|
20
|
+
@import './components/accordion.css';
|
|
21
|
+
@import './components/virtual-canvas.css';
|
|
22
|
+
@import './components/modes.css';
|
package/defaults.css
ADDED
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
@layer rc-theme-material.defaults, rc-theme-material.bridge, rc-theme-material.components;
|
|
2
|
+
|
|
3
|
+
@layer rc-theme-material.defaults {
|
|
4
|
+
/*
|
|
5
|
+
* Representative Material 3 system-token defaults for standalone use.
|
|
6
|
+
*
|
|
7
|
+
* Applications with an existing Material token environment should import only
|
|
8
|
+
* bridge.css so their own generated or branded --md-sys-* values remain the
|
|
9
|
+
* source of truth.
|
|
10
|
+
*/
|
|
11
|
+
.rc-theme-material,
|
|
12
|
+
:host(.rc-theme-material) {
|
|
13
|
+
color-scheme: light dark;
|
|
14
|
+
|
|
15
|
+
--md-ref-typeface-brand: Roboto, system-ui, sans-serif;
|
|
16
|
+
--md-ref-typeface-plain: Roboto, system-ui, sans-serif;
|
|
17
|
+
|
|
18
|
+
--md-sys-color-primary: light-dark(#6750a4, #d0bcff);
|
|
19
|
+
--md-sys-color-on-primary: light-dark(#ffffff, #381e72);
|
|
20
|
+
--md-sys-color-primary-container: light-dark(#eaddff, #4f378b);
|
|
21
|
+
--md-sys-color-on-primary-container: light-dark(#21005d, #eaddff);
|
|
22
|
+
--md-sys-color-secondary-container: light-dark(#e8def8, #4a4458);
|
|
23
|
+
--md-sys-color-on-secondary-container: light-dark(#1d192b, #e8def8);
|
|
24
|
+
--md-sys-color-surface: light-dark(#fffbfe, #141218);
|
|
25
|
+
--md-sys-color-surface-container-low: light-dark(#f7f2fa, #1d1b20);
|
|
26
|
+
--md-sys-color-surface-container: light-dark(#f3edf7, #211f26);
|
|
27
|
+
--md-sys-color-surface-container-high: light-dark(#ece6f0, #2b2930);
|
|
28
|
+
--md-sys-color-surface-container-highest: light-dark(#e6e0e9, #36343b);
|
|
29
|
+
--md-sys-color-on-surface: light-dark(#1d1b20, #e6e0e9);
|
|
30
|
+
--md-sys-color-on-surface-variant: light-dark(#49454f, #cac4d0);
|
|
31
|
+
--md-sys-color-inverse-surface: light-dark(#322f35, #e6e0e9);
|
|
32
|
+
--md-sys-color-inverse-on-surface: light-dark(#f5eff7, #322f35);
|
|
33
|
+
--md-sys-color-scrim: #000000;
|
|
34
|
+
--md-sys-color-outline: light-dark(#79747e, #938f99);
|
|
35
|
+
--md-sys-color-outline-variant: light-dark(#cac4d0, #49454f);
|
|
36
|
+
--md-sys-color-error: light-dark(#b3261e, #f2b8b5);
|
|
37
|
+
--md-sys-color-on-error: light-dark(#ffffff, #601410);
|
|
38
|
+
|
|
39
|
+
--md-sys-shape-corner-extra-small: 0.25rem;
|
|
40
|
+
--md-sys-shape-corner-small: 0.5rem;
|
|
41
|
+
--md-sys-shape-corner-medium: 0.75rem;
|
|
42
|
+
--md-sys-shape-corner-large: 1rem;
|
|
43
|
+
--md-sys-shape-corner-extra-large: 1.75rem;
|
|
44
|
+
--md-sys-shape-corner-full: 999px;
|
|
45
|
+
|
|
46
|
+
--md-sys-typescale-body-large-font: var(--md-ref-typeface-plain);
|
|
47
|
+
--md-sys-typescale-body-large-size: 1rem;
|
|
48
|
+
--md-sys-typescale-body-large-line-height: 1.5rem;
|
|
49
|
+
--md-sys-typescale-body-medium-font: var(--md-ref-typeface-plain);
|
|
50
|
+
--md-sys-typescale-body-medium-size: 0.875rem;
|
|
51
|
+
--md-sys-typescale-body-medium-line-height: 1.25rem;
|
|
52
|
+
--md-sys-typescale-label-large-font: var(--md-ref-typeface-plain);
|
|
53
|
+
--md-sys-typescale-label-large-size: 0.875rem;
|
|
54
|
+
--md-sys-typescale-label-small-size: 0.6875rem;
|
|
55
|
+
--md-sys-typescale-title-large-font: var(--md-ref-typeface-brand);
|
|
56
|
+
--md-sys-typescale-title-large-size: 1.375rem;
|
|
57
|
+
--md-sys-typescale-headline-small-font: var(--md-ref-typeface-brand);
|
|
58
|
+
--md-sys-typescale-headline-small-size: 1.5rem;
|
|
59
|
+
|
|
60
|
+
--md-sys-elevation-level0: none;
|
|
61
|
+
--md-sys-elevation-level1:
|
|
62
|
+
0 1px 2px color-mix(in srgb, var(--md-sys-color-on-surface) 30%, transparent),
|
|
63
|
+
0 1px 3px 1px color-mix(in srgb, var(--md-sys-color-on-surface) 15%, transparent);
|
|
64
|
+
--md-sys-elevation-level2:
|
|
65
|
+
0 1px 2px color-mix(in srgb, var(--md-sys-color-on-surface) 30%, transparent),
|
|
66
|
+
0 2px 6px 2px color-mix(in srgb, var(--md-sys-color-on-surface) 15%, transparent);
|
|
67
|
+
--md-sys-elevation-level3:
|
|
68
|
+
0 1px 3px color-mix(in srgb, var(--md-sys-color-on-surface) 30%, transparent),
|
|
69
|
+
0 4px 8px 3px color-mix(in srgb, var(--md-sys-color-on-surface) 15%, transparent);
|
|
70
|
+
--md-sys-state-pressed-state-layer-opacity: 0.12;
|
|
71
|
+
--md-sys-state-hover-state-layer-opacity: 0.08;
|
|
72
|
+
--md-sys-state-focus-state-layer-opacity: 0.1;
|
|
73
|
+
--md-sys-state-disabled-state-layer-opacity: 0.38;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
@media (forced-colors: active) {
|
|
77
|
+
.rc-theme-material,
|
|
78
|
+
:host(.rc-theme-material) {
|
|
79
|
+
--md-sys-color-primary: Highlight;
|
|
80
|
+
--md-sys-color-on-primary: HighlightText;
|
|
81
|
+
--md-sys-color-primary-container: Highlight;
|
|
82
|
+
--md-sys-color-on-primary-container: HighlightText;
|
|
83
|
+
--md-sys-color-secondary-container: ButtonFace;
|
|
84
|
+
--md-sys-color-on-secondary-container: ButtonText;
|
|
85
|
+
--md-sys-color-surface: Canvas;
|
|
86
|
+
--md-sys-color-surface-container-low: Canvas;
|
|
87
|
+
--md-sys-color-surface-container: Canvas;
|
|
88
|
+
--md-sys-color-surface-container-high: Canvas;
|
|
89
|
+
--md-sys-color-surface-container-highest: Field;
|
|
90
|
+
--md-sys-color-on-surface: CanvasText;
|
|
91
|
+
--md-sys-color-on-surface-variant: CanvasText;
|
|
92
|
+
--md-sys-color-inverse-surface: CanvasText;
|
|
93
|
+
--md-sys-color-inverse-on-surface: Canvas;
|
|
94
|
+
--md-sys-color-outline: ButtonBorder;
|
|
95
|
+
--md-sys-color-outline-variant: ButtonBorder;
|
|
96
|
+
--md-sys-elevation-level1: none;
|
|
97
|
+
--md-sys-elevation-level2: none;
|
|
98
|
+
--md-sys-elevation-level3: none;
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
}
|
package/package.json
ADDED
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@rcarls/rc-theme-material",
|
|
3
|
+
"publishConfig": {
|
|
4
|
+
"access": "public"
|
|
5
|
+
},
|
|
6
|
+
"version": "0.1.0",
|
|
7
|
+
"description": "Optional Material 3 design-token bridge for rc-webcomponents.",
|
|
8
|
+
"repository": {
|
|
9
|
+
"type": "git",
|
|
10
|
+
"url": "git+https://github.com/richardcarls/rc-webcomponents.git",
|
|
11
|
+
"directory": "packages/rc-theme-material"
|
|
12
|
+
},
|
|
13
|
+
"homepage": "https://github.com/richardcarls/rc-webcomponents#readme",
|
|
14
|
+
"license": "MIT",
|
|
15
|
+
"type": "module",
|
|
16
|
+
"sideEffects": [
|
|
17
|
+
"*.css"
|
|
18
|
+
],
|
|
19
|
+
"exports": {
|
|
20
|
+
".": "./bridge.css",
|
|
21
|
+
"./bridge.css": "./bridge.css",
|
|
22
|
+
"./defaults.css": "./defaults.css",
|
|
23
|
+
"./components.css": "./components.css",
|
|
24
|
+
"./components/*.css": "./components/*.css",
|
|
25
|
+
"./theme.css": "./theme.css"
|
|
26
|
+
},
|
|
27
|
+
"files": [
|
|
28
|
+
"*.css",
|
|
29
|
+
"components",
|
|
30
|
+
"README.md"
|
|
31
|
+
],
|
|
32
|
+
"scripts": {
|
|
33
|
+
"build": "vitest run --project=chromium",
|
|
34
|
+
"test:browser": "vitest",
|
|
35
|
+
"test:browser:chrome": "vitest --project=chromium",
|
|
36
|
+
"test:browser:firefox": "vitest --project=firefox",
|
|
37
|
+
"yalc:publish": "yalc publish --push"
|
|
38
|
+
},
|
|
39
|
+
"devDependencies": {
|
|
40
|
+
"@vitest/browser-playwright": "4.1.5",
|
|
41
|
+
"playwright": "^1.56.0",
|
|
42
|
+
"vite": "^7.1.7",
|
|
43
|
+
"vitest": "^4.0.6"
|
|
44
|
+
}
|
|
45
|
+
}
|
package/theme.css
ADDED