@c2n/theme 0.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +50 -0
  3. package/dist/.tsbuildinfo +1 -0
  4. package/dist/base.css +567 -0
  5. package/dist/report.json +3310 -0
  6. package/dist/theme.css +662 -0
  7. package/dist/tokens.css +94 -0
  8. package/dist/tokens.d.ts +27 -0
  9. package/dist/tokens.d.ts.map +1 -0
  10. package/dist/tokens.js +62 -0
  11. package/dist/tokens.js.map +1 -0
  12. package/dist/tokens.json +597 -0
  13. package/package.json +106 -0
package/dist/base.css ADDED
@@ -0,0 +1,567 @@
1
+ /* GENERATED by @c2n/theme scripts/theme-generator. Do not edit by hand. */
2
+ /*
3
+ * Base theme: maps every @c2n component CSS variable onto the --c2-theme--* tokens, keeping the component's
4
+ * original default as the innermost fallback. Setting a component variable yourself always wins.
5
+ */
6
+ /* @c2n/accordion */
7
+ :root,
8
+ :host {
9
+ --c2-accordion--border-radius: var(--c2-theme--radius-lg, 8px);
10
+ --c2-accordion--transition-duration: calc(300ms * var(--c2-theme--motion-scale, 1));
11
+ }
12
+
13
+ /* @c2n/avatar */
14
+ :root,
15
+ :host {
16
+ --c2-avatar--border-top-left-radius: var(--c2-theme--radius-full, 999px);
17
+ --c2-avatar--border-top-right-radius: var(--c2-theme--radius-full, 999px);
18
+ --c2-avatar--border-bottom-left-radius: var(--c2-theme--radius-full, 999px);
19
+ --c2-avatar--border-bottom-right-radius: var(--c2-theme--radius-full, 999px);
20
+ --c2-avatar--font-weight: var(--c2-theme--font-weight-semibold, 600);
21
+ --c2-avatar__badge--border: 2px solid var(--c2-theme--color-surface, #ffffff);
22
+ }
23
+
24
+ /* @c2n/badge */
25
+ :root,
26
+ :host {
27
+ --c2-badge--border-radius: var(--c2-theme--radius-full, 999px);
28
+ --c2-badge--font-size: var(--c2-theme--font-size-sm, 12px);
29
+ --c2-badge--font-weight: var(--c2-theme--font-weight-medium, 500);
30
+ --c2-badge__neutral--background: var(--c2-theme--color-surface-container, #f4f4f5);
31
+ --c2-badge__neutral--color: var(--c2-theme--color-on-surface-variant, #52525b);
32
+ --c2-badge__primary--background: var(--c2-theme--color-primary-container, #edf1fe);
33
+ --c2-badge__primary--color: var(--c2-theme--color-primary, #0265dc);
34
+ --c2-badge__danger--color: var(--c2-theme--color-error, #dc2626);
35
+ --c2-badge__pulse--animation-duration: calc(1.5s * var(--c2-theme--motion-scale, 1));
36
+ --c2-badge__anchor--border: 2px solid var(--c2-theme--color-surface, #ffffff);
37
+ }
38
+
39
+ /* @c2n/breadcrumb */
40
+ :root,
41
+ :host {
42
+ --c2-breadcrumb__separator--color: var(--c2-theme--color-on-surface-variant, #a1a1aa);
43
+ --c2-breadcrumb__item--color: var(--c2-theme--color-on-surface-variant, #71717a);
44
+ --c2-breadcrumb__item--font-size: var(--c2-theme--font-size-md, 14px);
45
+ --c2-breadcrumb__item--font-weight: var(--c2-theme--font-weight-medium, 500);
46
+ --c2-breadcrumb__item--border-radius: var(--c2-theme--radius-sm, 4px);
47
+ --c2-breadcrumb__item__hover--color: var(--c2-theme--color-on-surface, #18181b);
48
+ --c2-breadcrumb__item__current--color: var(--c2-theme--color-on-surface, #18181b);
49
+ --c2-breadcrumb__item__current--font-weight: var(--c2-theme--font-weight-medium, 500);
50
+ }
51
+
52
+ /* @c2n/button */
53
+ :root,
54
+ :host {
55
+ --c2-button__container--border-radius: var(--c2-theme--radius-md, 6px);
56
+ --c2-button__container--background-color: var(--c2-theme--color-primary, rgb(2, 101, 220));
57
+ --c2-button__container--color: var(--c2-theme--color-on-primary, #ffffff);
58
+ --c2-button__container--font-size: var(--c2-theme--font-size-md, 14px);
59
+ --c2-button__container--font-weight: var(--c2-theme--font-weight-medium, 500);
60
+ --c2-button__container__hover--background-color: var(--c2-theme--color-primary-hover, rgb(1, 84, 184));
61
+ --c2-button__container__active--background-color: var(--c2-theme--color-primary-active, rgb(1, 70, 154));
62
+ --c2-button__container__focus--outline: var(--c2-theme--focus-ring, 2px solid rgba(2, 101, 220, 0.4));
63
+ --c2-button__container__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
64
+ --c2-button__running-icon--animation-duration: calc(800ms * var(--c2-theme--motion-scale, 1));
65
+ }
66
+
67
+ /* @c2n/button-group */
68
+ :root,
69
+ :host {
70
+ --c2-button-group--border-radius: var(--c2-theme--radius-md, 6px);
71
+ }
72
+
73
+ /* @c2n/card */
74
+ :root,
75
+ :host {
76
+ --c2-card--border-top-left-radius: var(--c2-theme--radius-lg, 8px);
77
+ --c2-card--border-top-right-radius: var(--c2-theme--radius-lg, 8px);
78
+ --c2-card--border-bottom-left-radius: var(--c2-theme--radius-lg, 8px);
79
+ --c2-card--border-bottom-right-radius: var(--c2-theme--radius-lg, 8px);
80
+ --c2-card--border-top: var(--c2-theme--border, var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, rgb(213, 213, 213)));
81
+ --c2-card--border-bottom: var(--c2-theme--border, var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, rgb(213, 213, 213)));
82
+ --c2-card--border-right: var(--c2-theme--border, var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, rgb(213, 213, 213)));
83
+ --c2-card--border-left: var(--c2-theme--border, var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, rgb(213, 213, 213)));
84
+ --c2-card--background: var(--c2-theme--color-surface, rgb(255, 255, 255));
85
+ --c2-card__focus--outline: var(--c2-theme--focus-ring, 2px solid rgba(2, 101, 220, 0.4));
86
+ --c2-card__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
87
+ }
88
+
89
+ /* @c2n/chat-input */
90
+ :root,
91
+ :host {
92
+ --c2-chat-input--border-top-left-radius: var(--c2-theme--radius-sm, 4px);
93
+ --c2-chat-input--border-top-right-radius: var(--c2-theme--radius-sm, 4px);
94
+ --c2-chat-input--border-bottom-left-radius: var(--c2-theme--radius-sm, 4px);
95
+ --c2-chat-input--border-bottom-right-radius: var(--c2-theme--radius-sm, 4px);
96
+ --c2-chat-input--border-top: var(--c2-theme--border, var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, rgb(177, 177, 177)));
97
+ --c2-chat-input--border-right: var(--c2-theme--border, var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, rgb(177, 177, 177)));
98
+ --c2-chat-input--border-bottom: var(--c2-theme--border, var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, rgb(177, 177, 177)));
99
+ --c2-chat-input--border-left: var(--c2-theme--border, var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, rgb(177, 177, 177)));
100
+ --c2-chat-input--color: var(--c2-theme--color-on-surface, rgb(34, 34, 34));
101
+ --c2-chat-input--background: var(--c2-theme--color-surface, rgb(255, 255, 255));
102
+ --c2-chat-input--font-size: var(--c2-theme--font-size-md, 14px);
103
+ }
104
+
105
+ /* @c2n/chat-message */
106
+ :root,
107
+ :host {
108
+ --c2-chat-message--font-size: var(--c2-theme--font-size-md, 14px);
109
+ --c2-chat-message__time--font-size: var(--c2-theme--font-size-sm, 12px);
110
+ }
111
+
112
+ /* @c2n/checkbox */
113
+ :root,
114
+ :host {
115
+ --c2-checkbox__container--border-top-left-radius: var(--c2-theme--radius-sm, 4px);
116
+ --c2-checkbox__container--border-top-right-radius: var(--c2-theme--radius-sm, 4px);
117
+ --c2-checkbox__container--border-bottom-left-radius: var(--c2-theme--radius-sm, 4px);
118
+ --c2-checkbox__container--border-bottom-right-radius: var(--c2-theme--radius-sm, 4px);
119
+ --c2-checkbox__container--border-top: var(--c2-theme--border, var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, #bcbcc6));
120
+ --c2-checkbox__container--border-right: var(--c2-theme--border, var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, #bcbcc6));
121
+ --c2-checkbox__container--border-bottom: var(--c2-theme--border, var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, #bcbcc6));
122
+ --c2-checkbox__container--border-left: var(--c2-theme--border, var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, #bcbcc6));
123
+ --c2-checkbox__container__selected--background-color: var(--c2-theme--color-primary, #476ef9);
124
+ --c2-checkbox__container__focus--outline: var(--c2-theme--focus-ring, 2px solid rgba(71, 110, 249, 0.4));
125
+ --c2-checkbox__container__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
126
+ --c2-checkbox__checkmark--color: var(--c2-theme--color-on-primary, #ffffff);
127
+ --c2-checkbox__mixedmark--color: var(--c2-theme--color-on-primary, #ffffff);
128
+ --c2-checkbox__uncheckmark--color: var(--c2-theme--color-on-primary, #ffffff);
129
+ --c2-checkbox__state-layer--border-top-left-radius: var(--c2-theme--radius-md, 6px);
130
+ --c2-checkbox__state-layer--border-top-right-radius: var(--c2-theme--radius-md, 6px);
131
+ --c2-checkbox__state-layer--border-bottom-left-radius: var(--c2-theme--radius-md, 6px);
132
+ --c2-checkbox__state-layer--border-bottom-right-radius: var(--c2-theme--radius-md, 6px);
133
+ }
134
+
135
+ /* @c2n/code-viewer */
136
+ :root,
137
+ :host {
138
+ --c2-code-viewer--border-top: var(--c2-theme--border, var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, rgb(213, 213, 213)));
139
+ --c2-code-viewer--border-right: var(--c2-theme--border, var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, rgb(213, 213, 213)));
140
+ --c2-code-viewer--border-bottom: var(--c2-theme--border, var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, rgb(213, 213, 213)));
141
+ --c2-code-viewer--border-left: var(--c2-theme--border, var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, rgb(213, 213, 213)));
142
+ --c2-code-viewer--border-top-left-radius: var(--c2-theme--radius-lg, 8px);
143
+ --c2-code-viewer--border-top-right-radius: var(--c2-theme--radius-lg, 8px);
144
+ --c2-code-viewer--border-bottom-left-radius: var(--c2-theme--radius-lg, 8px);
145
+ --c2-code-viewer--border-bottom-right-radius: var(--c2-theme--radius-lg, 8px);
146
+ --c2-code-viewer__header--font-size: var(--c2-theme--font-size-sm, 12px);
147
+ --c2-code-viewer__copy--border-radius: var(--c2-theme--radius-md, 6px);
148
+ }
149
+
150
+ /* @c2n/color-select */
151
+ :root,
152
+ :host {
153
+ --c2-color-select__popover--background-color: var(--c2-theme--color-surface, rgb(255, 255, 255));
154
+ --c2-color-select__popover--border-top: var(--c2-theme--border, var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, rgb(177, 177, 177)));
155
+ --c2-color-select__popover--border-right: var(
156
+ --c2-theme--border,
157
+ var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, rgb(177, 177, 177))
158
+ );
159
+ --c2-color-select__popover--border-bottom: var(
160
+ --c2-theme--border,
161
+ var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, rgb(177, 177, 177))
162
+ );
163
+ --c2-color-select__popover--border-left: var(--c2-theme--border, var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, rgb(177, 177, 177)));
164
+ --c2-color-select__popover--border-top-left-radius: var(--c2-theme--radius-sm, 4px);
165
+ --c2-color-select__popover--border-top-right-radius: var(--c2-theme--radius-sm, 4px);
166
+ --c2-color-select__popover--border-bottom-left-radius: var(--c2-theme--radius-sm, 4px);
167
+ --c2-color-select__popover--border-bottom-right-radius: var(--c2-theme--radius-sm, 4px);
168
+ --c2-color-select__color__sample--border-top: var(
169
+ --c2-theme--border,
170
+ var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, rgb(177, 177, 177))
171
+ );
172
+ --c2-color-select__color__sample--border-right: var(
173
+ --c2-theme--border,
174
+ var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, rgb(177, 177, 177))
175
+ );
176
+ --c2-color-select__color__sample--border-bottom: var(
177
+ --c2-theme--border,
178
+ var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, rgb(177, 177, 177))
179
+ );
180
+ --c2-color-select__color__sample--border-left: var(
181
+ --c2-theme--border,
182
+ var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, rgb(177, 177, 177))
183
+ );
184
+ --c2-color-select__color__sample--border-radius: var(--c2-theme--radius-sm, 4px);
185
+ }
186
+
187
+ /* @c2n/color-slider */
188
+ :root,
189
+ :host {
190
+ --c2-color-slider--border-radius: var(--c2-theme--radius-lg, 8px);
191
+ --c2-color-slider--border-top-left-radius: var(--c2-theme--radius-lg, 8px);
192
+ --c2-color-slider--border-top-right-radius: var(--c2-theme--radius-lg, 8px);
193
+ --c2-color-slider--border-bottom-left-radius: var(--c2-theme--radius-lg, 8px);
194
+ --c2-color-slider--border-bottom-right-radius: var(--c2-theme--radius-lg, 8px);
195
+ --c2-color-slider--border-top: var(--c2-theme--border, var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, rgb(177, 177, 177)));
196
+ --c2-color-slider--border-right: var(--c2-theme--border, var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, rgb(177, 177, 177)));
197
+ --c2-color-slider--border-bottom: var(--c2-theme--border, var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, rgb(177, 177, 177)));
198
+ --c2-color-slider--borde-leftr: var(--c2-theme--border, var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, rgb(177, 177, 177)));
199
+ --c2-color-slider__color-handle--border-top-left-radius: var(--c2-theme--radius-md, 6px);
200
+ --c2-color-slider__color-handle--border-top-right-radius: var(--c2-theme--radius-md, 6px);
201
+ --c2-color-slider__color-handle--border-bottom-left-radius: var(--c2-theme--radius-md, 6px);
202
+ --c2-color-slider__color-handle--border-bottom-right-radius: var(--c2-theme--radius-md, 6px);
203
+ }
204
+
205
+ /* @c2n/copy-button */
206
+ :root,
207
+ :host {
208
+ --c2-copy-button__container--color: var(--c2-theme--color-on-surface, rgb(34, 34, 34));
209
+ --c2-copy-button__container--border-radius: var(--c2-theme--radius-md, 6px);
210
+ --c2-copy-button__container--font-size: var(--c2-theme--font-size-sm, 12px);
211
+ --c2-copy-button__container--font-weight: var(--c2-theme--font-weight-medium, 500);
212
+ --c2-copy-button__container__hover--background-color: var(--c2-theme--color-surface-container, rgb(230, 230, 230));
213
+ --c2-copy-button__container__active--background-color: color-mix(
214
+ in srgb,
215
+ var(--c2-theme--color-surface-container, #f4f4f5),
216
+ var(--c2-theme--color-on-surface, #18181b) 8%
217
+ );
218
+ --c2-copy-button__container__focus--outline: var(--c2-theme--focus-ring, 2px solid rgba(2, 101, 220, 0.4));
219
+ --c2-copy-button__container__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
220
+ --c2-copy-button--transition-duration: calc(150ms * var(--c2-theme--motion-scale, 1));
221
+ }
222
+
223
+ /* @c2n/details */
224
+ :root,
225
+ :host {
226
+ --c2-details--border-top: var(--c2-theme--border, var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, rgb(213, 213, 213)));
227
+ --c2-details--border-right: var(--c2-theme--border, var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, rgb(213, 213, 213)));
228
+ --c2-details--border-bottom: var(--c2-theme--border, var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, rgb(213, 213, 213)));
229
+ --c2-details--border-left: var(--c2-theme--border, var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, rgb(213, 213, 213)));
230
+ --c2-details--border-top-left-radius: var(--c2-theme--radius-lg, 8px);
231
+ --c2-details--border-top-right-radius: var(--c2-theme--radius-lg, 8px);
232
+ --c2-details--border-bottom-left-radius: var(--c2-theme--radius-lg, 8px);
233
+ --c2-details--border-bottom-right-radius: var(--c2-theme--radius-lg, 8px);
234
+ --c2-details--background: var(--c2-theme--color-surface, rgb(255, 255, 255));
235
+ --c2-details--transition-duration: calc(250ms * var(--c2-theme--motion-scale, 1));
236
+ --c2-details__header--font-weight: var(--c2-theme--font-weight-medium, 500);
237
+ --c2-details__header__icon--color: var(--c2-theme--color-on-surface-variant, rgb(109, 109, 109));
238
+ --c2-details__header__content--color: var(--c2-theme--color-on-surface-variant, rgb(109, 109, 109));
239
+ --c2-details__header__hover--background: var(--c2-theme--color-surface-container-low, rgb(248, 248, 248));
240
+ --c2-details__header__focus--outline: var(--c2-theme--focus-ring, 2px solid rgba(2, 101, 220, 0.4));
241
+ --c2-details__header__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
242
+ }
243
+
244
+ /* @c2n/icon-button */
245
+ :root,
246
+ :host {
247
+ --c2-icon-button--border-radius: var(--c2-theme--radius-full, 999px);
248
+ --c2-icon-button__hover--background-color: var(--c2-theme--color-surface-container, rgb(230, 230, 230));
249
+ --c2-icon-button__focus--outline: var(--c2-theme--focus-ring, 2px solid rgba(2, 101, 220, 0.4));
250
+ --c2-icon-button__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
251
+ --c2-icon-button__selected--background-color: var(--c2-theme--color-surface-container, rgb(230, 230, 230));
252
+ }
253
+
254
+ /* @c2n/label */
255
+ :root,
256
+ :host {
257
+ --c2-label__container__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
258
+ --c2-label__required-indicator--color: var(--c2-theme--color-error, rgb(211, 21, 16));
259
+ }
260
+
261
+ /* @c2n/link-button */
262
+ :root,
263
+ :host {
264
+ --c2-link-button__container--border-radius: var(--c2-theme--radius-sm, 4px);
265
+ --c2-link-button__container--font-size: var(--c2-theme--font-size-md, 14px);
266
+ --c2-link-button__container--font-weight: var(--c2-theme--font-weight-medium, 500);
267
+ --c2-link-button__container--text-decoration-color: var(--c2-theme--color-primary, rgb(2, 101, 220));
268
+ --c2-link-button__container__hover--color: var(--c2-theme--color-primary, rgb(2, 101, 220));
269
+ --c2-link-button__container__focus--outline: var(--c2-theme--focus-ring, 2px solid rgba(2, 101, 220, 0.4));
270
+ --c2-link-button__container__selected--color: var(--c2-theme--color-primary, rgb(2, 101, 220));
271
+ --c2-link-button__container__selected--font-weight: var(--c2-theme--font-weight-semibold, 600);
272
+ --c2-link-button__container__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
273
+ }
274
+
275
+ /* @c2n/list */
276
+ :root,
277
+ :host {
278
+ --c2-list--background: var(--c2-theme--color-surface, #ffffff);
279
+ --c2-list__divider--color: var(--c2-theme--color-outline-variant, #e4e4e7);
280
+ --c2-list__heading--color: var(--c2-theme--color-on-surface-variant, #71717a);
281
+ --c2-list__heading--font-weight: var(--c2-theme--font-weight-semibold, 600);
282
+ }
283
+
284
+ /* @c2n/list-item */
285
+ :root,
286
+ :host {
287
+ --c2-list-item--border-top-left-radius: var(--c2-theme--radius-md, 6px);
288
+ --c2-list-item--border-top-right-radius: var(--c2-theme--radius-md, 6px);
289
+ --c2-list-item--border-bottom-left-radius: var(--c2-theme--radius-md, 6px);
290
+ --c2-list-item--border-bottom-right-radius: var(--c2-theme--radius-md, 6px);
291
+ --c2-list-item--font-size: var(--c2-theme--font-size-md, 14px);
292
+ --c2-list-item--color: var(--c2-theme--color-on-surface, #18181b);
293
+ --c2-list-item__description--color: var(--c2-theme--color-on-surface-variant, #71717a);
294
+ --c2-list-item__description--font-size: var(--c2-theme--font-size-sm, 12px);
295
+ --c2-list-item__hover--background: var(--c2-theme--color-surface-container, #f4f4f5);
296
+ --c2-list-item__selected--color: var(--c2-theme--color-primary, #2f56e6);
297
+ --c2-list-item__selected--background: var(--c2-theme--color-primary-container, #edf1fe);
298
+ --c2-list-item__selected__hover--background: color-mix(
299
+ in srgb,
300
+ var(--c2-theme--color-primary-container, #edf1fe),
301
+ var(--c2-theme--color-primary, #0265dc) 8%
302
+ );
303
+ --c2-list-item__focus--outline: var(--c2-theme--focus-ring, 2px solid rgba(2, 101, 220, 0.4));
304
+ --c2-list-item__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
305
+ }
306
+
307
+ /* @c2n/modal */
308
+ :root,
309
+ :host {
310
+ --c2-modal--background: var(--c2-theme--color-surface, #ffffff);
311
+ --c2-modal--color: var(--c2-theme--color-on-surface, #18181b);
312
+ --c2-modal--border-top-left-radius: var(--c2-theme--radius-xl, 14px);
313
+ --c2-modal--border-top-right-radius: var(--c2-theme--radius-xl, 14px);
314
+ --c2-modal--border-bottom-left-radius: var(--c2-theme--radius-xl, 14px);
315
+ --c2-modal--border-bottom-right-radius: var(--c2-theme--radius-xl, 14px);
316
+ --c2-modal--box-shadow: var(--c2-theme--shadow-lg, 0 24px 60px rgba(0, 0, 0, 0.25));
317
+ --c2-modal--transition-duration: calc(200ms * var(--c2-theme--motion-scale, 1));
318
+ --c2-modal__header--font-weight: var(--c2-theme--font-weight-semibold, 600);
319
+ --c2-modal__body--font-size: var(--c2-theme--font-size-md, 14px);
320
+ --c2-modal__close--border-radius: var(--c2-theme--radius-lg, 8px);
321
+ --c2-modal__close--color: var(--c2-theme--color-on-surface-variant, #71717a);
322
+ --c2-modal__close__hover--background: var(--c2-theme--color-surface-container, #f4f4f5);
323
+ --c2-modal__close__hover--color: var(--c2-theme--color-on-surface, #18181b);
324
+ --c2-modal__close__focus--outline: var(--c2-theme--focus-ring, 2px solid rgba(2, 101, 220, 0.4));
325
+ --c2-modal__backdrop--background: var(--c2-theme--color-scrim, rgba(9, 9, 11, 0.45));
326
+ }
327
+
328
+ /* @c2n/overlay */
329
+ :root,
330
+ :host {
331
+ --c2-overlay--transition-duration: calc(150ms * var(--c2-theme--motion-scale, 1));
332
+ }
333
+
334
+ /* @c2n/radio */
335
+ :root,
336
+ :host {
337
+ --c2-radio__container--border-radius: var(--c2-theme--radius-lg, 8px);
338
+ --c2-radio__control--border-radius: var(--c2-theme--radius-full, 999px);
339
+ --c2-radio__control--border: var(--c2-theme--border, var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, #bcbcc6));
340
+ --c2-radio__control__hover--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-strong, #a1a1aa);
341
+ --c2-radio__control__checked--background-color: var(--c2-theme--color-primary, #0265dc);
342
+ --c2-radio__control__checked__hover--background-color: var(--c2-theme--color-primary-hover, #0154b8);
343
+ --c2-radio__control__focus--outline: var(--c2-theme--focus-ring, 2px solid rgba(2, 101, 220, 0.4));
344
+ --c2-radio__control__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
345
+ --c2-radio__dot--color: var(--c2-theme--color-on-primary, #ffffff);
346
+ --c2-radio__icon--color: var(--c2-theme--color-on-surface-variant, #71717a);
347
+ --c2-radio__icon__checked--color: var(--c2-theme--color-primary, #0265dc);
348
+ --c2-radio__state-layer--border-radius: var(--c2-theme--radius-full, 999px);
349
+ --c2-radio__label__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
350
+ --c2-radio__description--color: var(--c2-theme--color-on-surface-variant, #71717a);
351
+ --c2-radio__description--font-size: var(--c2-theme--font-size-sm, 12px);
352
+ --c2-radio-group__label--color: var(--c2-theme--color-on-surface, #18181b);
353
+ --c2-radio-group__label--font-size: var(--c2-theme--font-size-md, 14px);
354
+ --c2-radio-group__label--font-weight: var(--c2-theme--font-weight-medium, 500);
355
+ --c2-radio-group__description--color: var(--c2-theme--color-on-surface-variant, #71717a);
356
+ --c2-radio-group__description--font-size: var(--c2-theme--font-size-sm, 12px);
357
+ --c2-radio-group__header__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
358
+ }
359
+
360
+ /* @c2n/select */
361
+ :root,
362
+ :host {
363
+ --c2-select__button--background: var(--c2-theme--color-surface, #ffffff);
364
+ --c2-select__button--color: var(--c2-theme--color-on-surface, #18181b);
365
+ --c2-select__button--font-size: var(--c2-theme--font-size-md, 14px);
366
+ --c2-select__button--border-top-left-radius: var(--c2-theme--radius-md, 6px);
367
+ --c2-select__button--border-top-right-radius: var(--c2-theme--radius-md, 6px);
368
+ --c2-select__button--border-bottom-left-radius: var(--c2-theme--radius-md, 6px);
369
+ --c2-select__button--border-bottom-right-radius: var(--c2-theme--radius-md, 6px);
370
+ --c2-select__button--border-top: var(--c2-theme--border, var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, #bcbcc6));
371
+ --c2-select__button--border-right: var(--c2-theme--border, var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, #bcbcc6));
372
+ --c2-select__button--border-bottom: var(--c2-theme--border, var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, #bcbcc6));
373
+ --c2-select__button--border-left: var(--c2-theme--border, var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, #bcbcc6));
374
+ --c2-select__button__hover--border-top: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-strong, #a1a1aa);
375
+ --c2-select__button__hover--border-right: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-strong, #a1a1aa);
376
+ --c2-select__button__hover--border-bottom: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-strong, #a1a1aa);
377
+ --c2-select__button__hover--border-left: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-strong, #a1a1aa);
378
+ --c2-select__button__hover--background: var(--c2-theme--color-surface-container-low, #fafafa);
379
+ --c2-select__button__hover--color: var(--c2-theme--color-on-surface, #18181b);
380
+ --c2-select__button__open--border-top: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-primary, #476ef9);
381
+ --c2-select__button__open--border-right: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-primary, #476ef9);
382
+ --c2-select__button__open--border-bottom: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-primary, #476ef9);
383
+ --c2-select__button__open--border-left: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-primary, #476ef9);
384
+ --c2-select__button__focus--outline: var(--c2-theme--focus-ring, 2px solid rgba(71, 110, 249, 0.4));
385
+ --c2-select__button__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
386
+ --c2-select__button__suffix-icon--color: var(--c2-theme--color-on-surface-variant, #71717a);
387
+ --c2-select__placeholder--color: var(--c2-theme--color-on-surface-variant, #71717a);
388
+ --c2-select__list--background: var(--c2-theme--color-surface, #ffffff);
389
+ --c2-select__list--border-top: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-variant, #e4e4e7);
390
+ --c2-select__list--border-right: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-variant, #e4e4e7);
391
+ --c2-select__list--border-bottom: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-variant, #e4e4e7);
392
+ --c2-select__list--border-left: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-variant, #e4e4e7);
393
+ --c2-select__list--border-top-left-radius: var(--c2-theme--radius-lg, 8px);
394
+ --c2-select__list--border-top-right-radius: var(--c2-theme--radius-lg, 8px);
395
+ --c2-select__list--border-bottom-left-radius: var(--c2-theme--radius-lg, 8px);
396
+ --c2-select__list--border-bottom-right-radius: var(--c2-theme--radius-lg, 8px);
397
+ --c2-select__list--box-shadow: var(--c2-theme--shadow-md, 0 8px 24px rgba(24, 24, 27, 0.08));
398
+ }
399
+
400
+ /* @c2n/seperator */
401
+ :root,
402
+ :host {
403
+ --c2-seperator--color: var(--c2-theme--color-outline-variant, #e4e4e7);
404
+ --c2-seperator__label--color: var(--c2-theme--color-on-surface-variant, #71717a);
405
+ --c2-seperator__label--font-size: var(--c2-theme--font-size-sm, 12px);
406
+ --c2-seperator__label--font-weight: var(--c2-theme--font-weight-medium, 500);
407
+ }
408
+
409
+ /* @c2n/side-nav */
410
+ :root,
411
+ :host {
412
+ --c2-side-nav--transition-duration: calc(250ms * var(--c2-theme--motion-scale, 1));
413
+ --c2-side-nav--background-color: var(--c2-theme--color-surface-container-low, #fafafa);
414
+ --c2-side-nav__divider--color: var(--c2-theme--color-outline-variant, #e4e4e7);
415
+ --c2-side-nav__over--box-shadow: var(--c2-theme--shadow-lg, 0 12px 40px rgba(0, 0, 0, 0.18));
416
+ --c2-side-nav__backdrop--background-color: var(--c2-theme--color-scrim, rgba(0, 0, 0, 0.32));
417
+ }
418
+
419
+ /* @c2n/slider */
420
+ :root,
421
+ :host {
422
+ --c2-slider__container__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
423
+ --c2-slider__track--border-radius: var(--c2-theme--radius-full, 999px);
424
+ --c2-slider__track--color: var(--c2-theme--color-outline-variant, #e4e4e7);
425
+ --c2-slider__fill--color: var(--c2-theme--color-primary, #0265dc);
426
+ --c2-slider__thumb--border-radius: var(--c2-theme--radius-full, 999px);
427
+ --c2-slider__thumb--color: var(--c2-theme--color-surface, #ffffff);
428
+ --c2-slider__thumb--border: 2px solid var(--c2-theme--color-primary, #0265dc);
429
+ --c2-slider__thumb__focus--outline: var(--c2-theme--focus-ring, 2px solid rgba(2, 101, 220, 0.4));
430
+ --c2-slider__tick--color: var(--c2-theme--color-on-surface-variant, #a1a1aa);
431
+ --c2-slider__tick__filled--color: var(--c2-theme--color-on-primary, #ffffff);
432
+ --c2-slider__value--background: var(--c2-theme--color-inverse-surface, #18181b);
433
+ --c2-slider__value--color: var(--c2-theme--color-on-inverse-surface, #fafafa);
434
+ --c2-slider__value--font-size: var(--c2-theme--font-size-sm, 12px);
435
+ --c2-slider__value--font-weight: var(--c2-theme--font-weight-medium, 500);
436
+ --c2-slider__value--border-radius: var(--c2-theme--radius-md, 6px);
437
+ }
438
+
439
+ /* @c2n/spinner */
440
+ :root,
441
+ :host {
442
+ --c2-spinner--color: var(--c2-theme--color-primary, #0265dc);
443
+ --c2-spinner__track--color: var(--c2-theme--color-outline-variant, #e4e4e7);
444
+ --c2-spinner--animation-duration: calc(1.4s * var(--c2-theme--motion-scale, 1));
445
+ --c2-spinner__label--color: var(--c2-theme--color-on-surface-variant, #71717a);
446
+ --c2-spinner__label--font-size: var(--c2-theme--font-size-md, 14px);
447
+ }
448
+
449
+ /* @c2n/switch */
450
+ :root,
451
+ :host {
452
+ --c2-switch__container__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
453
+ --c2-switch__track--border-radius: var(--c2-theme--radius-full, 999px);
454
+ --c2-switch__track--color: var(--c2-theme--color-outline-variant, #e4e4e7);
455
+ --c2-switch__track__hover--color: var(--c2-theme--color-outline, #d4d4d8);
456
+ --c2-switch__track__checked--color: var(--c2-theme--color-primary, #0265dc);
457
+ --c2-switch__track__checked__hover--color: var(--c2-theme--color-primary, #0154b8);
458
+ --c2-switch__track__focus--outline: var(--c2-theme--focus-ring, 2px solid rgba(2, 101, 220, 0.4));
459
+ --c2-switch__thumb--border-radius: var(--c2-theme--radius-full, 999px);
460
+ --c2-switch__thumb--color: var(--c2-theme--color-surface, #ffffff);
461
+ --c2-switch__icon--color: var(--c2-theme--color-on-surface-variant, #71717a);
462
+ --c2-switch__icon__checked--color: var(--c2-theme--color-primary, #0265dc);
463
+ --c2-switch__description--color: var(--c2-theme--color-on-surface-variant, #71717a);
464
+ --c2-switch__description--font-size: var(--c2-theme--font-size-sm, 12px);
465
+ --c2-switch--transition-duration: calc(200ms * var(--c2-theme--motion-scale, 1));
466
+ }
467
+
468
+ /* @c2n/tabs */
469
+ :root,
470
+ :host {
471
+ --c2-tabs--box-shadow: inset 0px -2px 0px 0px var(--c2-theme--color-outline-variant, rgb(230, 230, 230));
472
+ --c2-tabs__indicator--color: var(--c2-theme--color-primary, rgb(109, 109, 109));
473
+ --c2-tabs__tab__hover--color: var(--c2-theme--color-primary, rgb(2, 101, 220));
474
+ --c2-tabs__tab__selected--color: var(--c2-theme--color-primary, rgb(2, 101, 220));
475
+ --c2-tabs__tab__focus--outline: var(--c2-theme--focus-ring, 2px solid rgba(2, 101, 220, 0.4));
476
+ --c2-tabs__tab__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
477
+ }
478
+
479
+ /* @c2n/text-field */
480
+ :root,
481
+ :host {
482
+ --c2-text-field--border-top-left-radius: var(--c2-theme--radius-md, 6px);
483
+ --c2-text-field--border-top-right-radius: var(--c2-theme--radius-md, 6px);
484
+ --c2-text-field--border-bottom-left-radius: var(--c2-theme--radius-md, 6px);
485
+ --c2-text-field--border-bottom-right-radius: var(--c2-theme--radius-md, 6px);
486
+ --c2-text-field--border-top: var(--c2-theme--border, var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, #bcbcc6));
487
+ --c2-text-field--border-right: var(--c2-theme--border, var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, #bcbcc6));
488
+ --c2-text-field--border-bottom: var(--c2-theme--border, var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, #bcbcc6));
489
+ --c2-text-field--border-left: var(--c2-theme--border, var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, #bcbcc6));
490
+ --c2-text-field--color: var(--c2-theme--color-on-surface, #18181b);
491
+ --c2-text-field--background: var(--c2-theme--color-surface, #ffffff);
492
+ --c2-text-field--font-size: var(--c2-theme--font-size-md, 14px);
493
+ --c2-text-field__placeholder--color: var(--c2-theme--color-on-surface-variant, #71717a);
494
+ --c2-text-field__hover--border-top: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-strong, #a1a1aa);
495
+ --c2-text-field__hover--border-right: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-strong, #a1a1aa);
496
+ --c2-text-field__hover--border-bottom: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-strong, #a1a1aa);
497
+ --c2-text-field__hover--border-left: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-strong, #a1a1aa);
498
+ --c2-text-field__focus--border-top: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-primary, #476ef9);
499
+ --c2-text-field__focus--border-right: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-primary, #476ef9);
500
+ --c2-text-field__focus--border-bottom: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-primary, #476ef9);
501
+ --c2-text-field__focus--border-left: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-primary, #476ef9);
502
+ --c2-text-field__focus--outline: var(--c2-theme--focus-ring, 3px solid rgba(71, 110, 249, 0.2));
503
+ --c2-text-field__error--border-top: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-error, #dc2626);
504
+ --c2-text-field__error--border-right: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-error, #dc2626);
505
+ --c2-text-field__error--border-bottom: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-error, #dc2626);
506
+ --c2-text-field__error--border-left: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-error, #dc2626);
507
+ --c2-text-field__read-only--border-top: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-variant, #e4e4e7);
508
+ --c2-text-field__read-only--border-right: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-variant, #e4e4e7);
509
+ --c2-text-field__read-only--border-bottom: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-variant, #e4e4e7);
510
+ --c2-text-field__read-only--border-left: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-variant, #e4e4e7);
511
+ --c2-text-field__read-only--background: var(--c2-theme--color-surface-container-low, #fafafa);
512
+ --c2-text-field__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
513
+ --c2-text-field__icon--color: var(--c2-theme--color-on-surface-variant, #71717a);
514
+ --c2-text-field__clear-icon--color: var(--c2-theme--color-on-surface-variant, #a1a1aa);
515
+ --c2-text-field__clear-icon__hover--color: var(--c2-theme--color-on-surface, #18181b);
516
+ --c2-text-field__help-icon--color: var(--c2-theme--color-on-surface-variant, #71717a);
517
+ --c2-text-field__supporting-text--font-size: var(--c2-theme--font-size-sm, 12px);
518
+ --c2-text-field__supporting-text--color: var(--c2-theme--color-on-surface-variant, #71717a);
519
+ --c2-text-field__supporting-text__error--color: var(--c2-theme--color-error, #dc2626);
520
+ }
521
+
522
+ /* @c2n/textarea */
523
+ :root,
524
+ :host {
525
+ --c2-textarea__container--border: var(--c2-theme--border, var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, #bcbcc6));
526
+ --c2-textarea__container--border-radius: var(--c2-theme--radius-md, 6px);
527
+ --c2-textarea__container--background: var(--c2-theme--color-surface, #ffffff);
528
+ --c2-textarea__container--color: var(--c2-theme--color-on-surface, #18181b);
529
+ --c2-textarea__container--font-size: var(--c2-theme--font-size-md, 14px);
530
+ --c2-textarea__container__hover--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-strong, #a1a1aa);
531
+ --c2-textarea__container__focus--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-primary, #476ef9);
532
+ --c2-textarea__container__focus--outline: var(--c2-theme--focus-ring, 3px solid rgba(71, 110, 249, 0.2));
533
+ --c2-textarea__container__error--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-error, #dc2626);
534
+ --c2-textarea__container__read-only--background: var(--c2-theme--color-surface-container-low, #fafafa);
535
+ --c2-textarea__container__disabled--opacity: var(--c2-theme--disabled-opacity, 0.38);
536
+ --c2-textarea__placeholder--color: var(--c2-theme--color-on-surface-variant, #71717a);
537
+ --c2-textarea__supporting-text--font-size: var(--c2-theme--font-size-sm, 12px);
538
+ --c2-textarea__supporting-text--color: var(--c2-theme--color-on-surface-variant, #71717a);
539
+ --c2-textarea__supporting-text__error--color: var(--c2-theme--color-error, #dc2626);
540
+ }
541
+
542
+ /* @c2n/toast */
543
+ :root,
544
+ :host {
545
+ --c2-toast__container--background: var(--c2-theme--color-surface, #ffffff);
546
+ --c2-toast__container--color: var(--c2-theme--color-on-surface, #18181b);
547
+ --c2-toast__container--border: var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline-variant, #e4e4e7);
548
+ --c2-toast__container--font-size: var(--c2-theme--font-size-md, 14px);
549
+ --c2-toast__heading--font-weight: var(--c2-theme--font-weight-semibold, 600);
550
+ --c2-toast__icon--color: var(--c2-theme--color-on-surface-variant, #71717a);
551
+ --c2-toast__icon__error--color: var(--c2-theme--color-error, #dc2626);
552
+ --c2-toast__close--color: var(--c2-theme--color-on-surface-variant, #71717a);
553
+ --c2-toast__close__hover--background: var(--c2-theme--color-surface-container, #f4f4f5);
554
+ --c2-toast__button__focus--outline: var(--c2-theme--focus-ring, 2px solid #476ef9);
555
+ }
556
+
557
+ /* @c2n/tooltip */
558
+ :root,
559
+ :host {
560
+ --c2-tooltip--background-color: var(--c2-theme--color-inverse-surface, #18181b);
561
+ --c2-tooltip--color: var(--c2-theme--color-on-inverse-surface, #fafafa);
562
+ --c2-tooltip--border-radius: var(--c2-theme--radius-md, 6px);
563
+ --c2-tooltip--box-shadow: var(--c2-theme--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.15));
564
+ --c2-tooltip--font-size: var(--c2-theme--font-size-sm, 12px);
565
+ --c2-tooltip--font-weight: var(--c2-theme--font-weight-medium, 500);
566
+ --c2-tooltip--transition-duration: calc(120ms * var(--c2-theme--motion-scale, 1));
567
+ }