@toyu-ui/solid 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/README.md +2 -1
  2. package/design/atmospheric-glass.css +288 -0
  3. package/design/css.d.ts +2 -0
  4. package/design/fluent-web.css +398 -0
  5. package/design/fluent.css +398 -0
  6. package/design/glass.css +288 -0
  7. package/design/plain.css +124 -0
  8. package/design.d.ts +20 -0
  9. package/design.js +43 -0
  10. package/index.d.ts +1 -0
  11. package/index.js +14 -8
  12. package/package.json +28 -2
package/README.md CHANGED
@@ -1,5 +1,5 @@
1
1
  <p align="center">
2
- <h1><span color="blue">T</span><span color="cyan">Y</span>UI</h1>
2
+ <h1><span style="color: #4a90e2;">T</span><span style="color: #007aff;">Y</span>UI</h1>
3
3
  </p>
4
4
 
5
5
  <p align="center">
@@ -21,6 +21,7 @@
21
21
 
22
22
  <p align="center">
23
23
  <a href="#availability">Availability</a> &middot;
24
+ <a href="./USING.md">🔗 Using</a>&middot;
24
25
  <a href="#architecture">Architecture</a> &middot;
25
26
  <a href="#commands">Commands</a> &middot;
26
27
  <a href="#specs-and-decisions">Specs And Decisions</a>
package/design/atmospheric-glass.css ADDED
@@ -0,0 +1,288 @@
1
+ @layer tokens, product-theme;
2
+
3
+ @layer product-theme {
4
+ [data-design-system='atmospheric-glass'] {
5
+ color-scheme: dark;
6
+
7
+ --ty-design-name: atmospheric-glass;
8
+ --ty-color-background: #0b1326;
9
+ --ty-color-on-background: #dae2fd;
10
+ --ty-color-surface: rgb(255 255 255 / 0.1);
11
+ --ty-color-surface-hover: rgb(255 255 255 / 0.16);
12
+ --ty-color-surface-pressed: rgb(255 255 255 / 0.2);
13
+ --ty-color-surface-elevated: rgb(255 255 255 / 0.2);
14
+ --ty-color-text: #ffffff;
15
+ --ty-color-text-muted: #c4c7c8;
16
+ --ty-color-border: rgb(255 255 255 / 0.2);
17
+ --ty-color-border-strong: rgb(255 255 255 / 0.34);
18
+ --ty-color-accent: #ffffff;
19
+ --ty-color-on-accent: #2f3131;
20
+ --ty-color-accent-hover: #e2e2e2;
21
+ --ty-color-accent-pressed: #c6c6c7;
22
+ --ty-color-danger: #ffb4ab;
23
+ --ty-color-on-danger: #690005;
24
+
25
+ --ty-font-family:
26
+ Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
27
+ --ty-font-size-100: 0.75rem;
28
+ --ty-font-size-200: 1rem;
29
+ --ty-font-size-300: 1.125rem;
30
+ --ty-font-size-400: 1.5rem;
31
+ --ty-font-size-500: 2rem;
32
+ --ty-font-size-display: 5.25rem;
33
+ --ty-font-weight-regular: 400;
34
+ --ty-font-weight-medium: 500;
35
+ --ty-font-weight-semibold: 600;
36
+ --ty-font-weight-bold: 700;
37
+ --ty-line-height-100: 1rem;
38
+ --ty-line-height-200: 1.5rem;
39
+ --ty-line-height-300: 1.75rem;
40
+ --ty-line-height-400: 2rem;
41
+ --ty-line-height-display: 5.625rem;
42
+ --ty-letter-spacing-label: 0.05em;
43
+
44
+ --ty-space-0: 0;
45
+ --ty-space-1: 0.25rem;
46
+ --ty-space-2: 0.5rem;
47
+ --ty-space-3: 0.75rem;
48
+ --ty-space-4: 1rem;
49
+ --ty-space-5: 1.25rem;
50
+ --ty-space-6: 1.5rem;
51
+ --ty-space-8: 2rem;
52
+ --ty-space-10: 2.5rem;
53
+
54
+ --ty-radius-0: 0;
55
+ --ty-radius-1: 0.25rem;
56
+ --ty-radius-2: 0.5rem;
57
+ --ty-radius-3: 0.75rem;
58
+ --ty-radius-4: 1rem;
59
+ --ty-radius-5: 1.5rem;
60
+ --ty-radius-pill: 9999px;
61
+
62
+ --ty-stroke-thin: 1px;
63
+ --ty-stroke-thick: 2px;
64
+ --ty-focus-width: 2px;
65
+ --ty-focus-offset: 2px;
66
+ --ty-focus-color: rgb(255 255 255 / 0.92);
67
+
68
+ --ty-duration-fast: 120ms;
69
+ --ty-duration-normal: 200ms;
70
+ --ty-duration-slow: 320ms;
71
+ --ty-easing-standard: cubic-bezier(0.2, 0, 0, 1);
72
+ --ty-motion-feedback-duration: var(--ty-duration-fast);
73
+ --ty-motion-content-duration: var(--ty-duration-normal);
74
+ --ty-motion-easing: var(--ty-easing-standard);
75
+
76
+ --ty-elevation-1: 0 8px 32px rgb(0 0 0 / 0.1);
77
+ --ty-elevation-2: 0 18px 60px rgb(0 0 0 / 0.16);
78
+ --ty-elevation-3: 0 30px 90px rgb(0 0 0 / 0.22);
79
+ --ty-overlay-elevation: var(--ty-elevation-2);
80
+
81
+ --ty-glass-blur-standard: 20px;
82
+ --ty-glass-blur-elevated: 40px;
83
+ --ty-glass-background-standard: rgb(255 255 255 / 0.1);
84
+ --ty-glass-background-elevated: rgb(255 255 255 / 0.2);
85
+ --ty-glass-border-color: rgb(255 255 255 / 0.2);
86
+ --ty-glass-shine-color: rgb(255 255 255 / 0.36);
87
+ --ty-glass-shadow: var(--ty-elevation-1);
88
+ --ty-glass-text-shadow: 0 2px 4px rgb(0 0 0 / 0.15);
89
+
90
+ --ty-control-radius: var(--ty-radius-5);
91
+ --ty-control-border-width: var(--ty-stroke-thin);
92
+ --ty-control-font-size: var(--ty-font-size-200);
93
+ --ty-control-padding-inline: var(--ty-space-6);
94
+ --ty-control-padding-block: var(--ty-space-3);
95
+ --ty-control-gap: var(--ty-space-2);
96
+ --ty-control-min-block-size: 3rem;
97
+
98
+ --ty-layout-page-gutter: clamp(1.5rem, 4vw, 3.5rem);
99
+ --ty-layout-card-gap: var(--ty-space-4);
100
+ --ty-layout-section-gap: var(--ty-space-10);
101
+ --ty-layout-content-measure: 72rem;
102
+
103
+ background:
104
+ radial-gradient(circle at 12% 18%, rgb(219 39 119 / 0.72), transparent 32rem),
105
+ radial-gradient(circle at 86% 10%, rgb(126 34 206 / 0.74), transparent 34rem),
106
+ linear-gradient(135deg, #1e3a8a 0%, #7e22ce 50%, #db2777 100%);
107
+ color: var(--ty-color-text);
108
+ font-family: var(--ty-font-family);
109
+ }
110
+
111
+ [data-design-system='atmospheric-glass'] ::selection {
112
+ background: rgb(255 255 255 / 0.28);
113
+ color: #ffffff;
114
+ }
115
+
116
+ [data-design-system='atmospheric-glass'][data-color-scheme='light'] {
117
+ color-scheme: dark;
118
+ }
119
+
120
+ @media (forced-colors: active) {
121
+ [data-design-system='atmospheric-glass'] {
122
+ --ty-color-background: Canvas;
123
+ --ty-color-surface: Canvas;
124
+ --ty-color-surface-hover: Canvas;
125
+ --ty-color-surface-pressed: Canvas;
126
+ --ty-color-text: CanvasText;
127
+ --ty-color-text-muted: CanvasText;
128
+ --ty-color-border: ButtonBorder;
129
+ --ty-color-border-strong: ButtonText;
130
+ --ty-color-accent: Highlight;
131
+ --ty-color-on-accent: HighlightText;
132
+ --ty-focus-color: Highlight;
133
+ --ty-glass-background-standard: Canvas;
134
+ --ty-glass-background-elevated: Canvas;
135
+ --ty-glass-border-color: ButtonBorder;
136
+ --ty-glass-shadow: none;
137
+ background: Canvas;
138
+ }
139
+ }
140
+
141
+ @media (prefers-reduced-motion: reduce) {
142
+ [data-design-system='atmospheric-glass'] {
143
+ --ty-motion-feedback-duration: 0ms;
144
+ --ty-motion-content-duration: 0ms;
145
+ }
146
+ }
147
+ }
148
+
149
+ @layer product-components;
150
+
151
+ @layer product-components {
152
+ [data-design-system='atmospheric-glass'] tyui-button {
153
+ --ty-button-radius: var(--ty-control-radius);
154
+ --ty-button-min-block-size: var(--ty-control-min-block-size);
155
+ --ty-button-padding-inline: var(--ty-space-6);
156
+ --ty-button-padding-block: var(--ty-space-3);
157
+ --ty-button-gap: var(--ty-space-2);
158
+ --ty-button-font-size: var(--ty-font-size-100);
159
+ --ty-button-font-weight: var(--ty-font-weight-semibold);
160
+ }
161
+
162
+ [data-design-system='atmospheric-glass'] tyui-button[appearance='primary'] {
163
+ --ty-button-background: var(--ty-color-accent);
164
+ --ty-button-background-hover: var(--ty-color-accent-hover);
165
+ --ty-button-background-active: var(--ty-color-accent-pressed);
166
+ --ty-button-foreground: var(--ty-color-on-accent);
167
+ --ty-button-border-color: transparent;
168
+ --ty-button-border-color-hover: transparent;
169
+ }
170
+
171
+ [data-design-system='atmospheric-glass'] tyui-button[appearance='default'],
172
+ [data-design-system='atmospheric-glass'] tyui-button[appearance='secondary'],
173
+ [data-design-system='atmospheric-glass'] tyui-button[appearance='subtle'],
174
+ [data-design-system='atmospheric-glass'] tyui-button[appearance='transparent'] {
175
+ --ty-button-background: rgb(255 255 255 / 0.05);
176
+ --ty-button-background-hover: rgb(255 255 255 / 0.1);
177
+ --ty-button-background-active: rgb(255 255 255 / 0.16);
178
+ --ty-button-foreground: var(--ty-color-text);
179
+ --ty-button-border-color: var(--ty-glass-border-color);
180
+ --ty-button-border-color-hover: var(--ty-color-border-strong);
181
+ }
182
+
183
+ [data-design-system='atmospheric-glass'] tyui-button[shape='rounded'],
184
+ [data-design-system='atmospheric-glass'] tyui-button[shape='circular'] {
185
+ --ty-button-radius: var(--ty-radius-5);
186
+ }
187
+
188
+ [data-design-system='atmospheric-glass'] tyui-input {
189
+ --ty-input-background: var(--ty-glass-background-standard);
190
+ --ty-input-background-filled-darker: var(--ty-glass-background-elevated);
191
+ --ty-input-background-filled-lighter: rgb(255 255 255 / 0.14);
192
+ --ty-input-foreground: var(--ty-color-text);
193
+ --ty-input-placeholder-color: var(--ty-color-text-muted);
194
+ --ty-input-border-color: var(--ty-glass-border-color);
195
+ --ty-input-border-color-strong: var(--ty-color-border-strong);
196
+ --ty-input-invalid-border-color: var(--ty-color-danger);
197
+ --ty-input-focus-indicator-color: var(--ty-color-accent);
198
+ --ty-input-radius: var(--ty-control-radius);
199
+ --ty-input-min-block-size: var(--ty-control-min-block-size);
200
+ --ty-input-padding-inline: var(--ty-space-5);
201
+ --ty-input-padding-block: var(--ty-space-3);
202
+ --ty-input-gap: var(--ty-space-2);
203
+ --ty-input-font-size: var(--ty-font-size-200);
204
+ }
205
+
206
+ [data-design-system='atmospheric-glass'] tyui-input[appearance='outline'],
207
+ [data-design-system='atmospheric-glass'] tyui-input[appearance='filled-darker'],
208
+ [data-design-system='atmospheric-glass'] tyui-input[appearance='filled-lighter'] {
209
+ --ty-input-radius: var(--ty-radius-5);
210
+ }
211
+
212
+ [data-design-system='atmospheric-glass'] tyui-input::part(control) {
213
+ backdrop-filter: blur(var(--ty-glass-blur-standard));
214
+ box-shadow: var(--ty-glass-shadow);
215
+ }
216
+
217
+ [data-design-system='atmospheric-glass'] tyui-checkbox {
218
+ --ty-checkbox-foreground: var(--ty-color-text);
219
+ --ty-checkbox-border-color: var(--ty-glass-border-color);
220
+ --ty-checkbox-border-color-hover: var(--ty-color-border-strong);
221
+ --ty-checkbox-background: rgb(255 255 255 / 0.06);
222
+ --ty-checkbox-checked-background: var(--ty-color-accent);
223
+ --ty-checkbox-checked-background-hover: var(--ty-color-accent-hover);
224
+ --ty-checkbox-checked-background-active: var(--ty-color-accent-pressed);
225
+ --ty-checkbox-checked-foreground: var(--ty-color-on-accent);
226
+ --ty-checkbox-indeterminate-foreground: var(--ty-color-accent);
227
+ --ty-checkbox-indeterminate-border-color: var(--ty-color-accent);
228
+ --ty-checkbox-radius: var(--ty-radius-2);
229
+ --ty-checkbox-gap: var(--ty-space-2);
230
+ }
231
+
232
+ [data-design-system='atmospheric-glass'] tyui-radio,
233
+ [data-design-system='atmospheric-glass'] tyui-radio-group {
234
+ --ty-radio-foreground: var(--ty-color-text);
235
+ --ty-radio-border-color: var(--ty-glass-border-color);
236
+ --ty-radio-checked-color: var(--ty-color-accent);
237
+ --ty-radio-group-foreground: var(--ty-color-text);
238
+ --ty-radio-group-label-color: var(--ty-color-text-muted);
239
+ --ty-radio-group-gap: var(--ty-space-3);
240
+ --ty-radio-group-inline-gap: var(--ty-space-5);
241
+ }
242
+
243
+ [data-design-system='atmospheric-glass'] .ty-glass-surface {
244
+ color: var(--ty-color-text);
245
+ background: var(--ty-glass-background-standard);
246
+ border: var(--ty-stroke-thin) solid var(--ty-glass-border-color);
247
+ border-radius: var(--ty-radius-4);
248
+ box-shadow: var(--ty-glass-shadow);
249
+ backdrop-filter: blur(var(--ty-glass-blur-standard));
250
+ }
251
+
252
+ [data-design-system='atmospheric-glass'] .ty-glass-surface[data-elevation='elevated'] {
253
+ background: var(--ty-glass-background-elevated);
254
+ border-radius: var(--ty-radius-5);
255
+ box-shadow: var(--ty-elevation-2);
256
+ backdrop-filter: blur(var(--ty-glass-blur-elevated));
257
+ }
258
+
259
+ [data-design-system='atmospheric-glass'] .ty-glass-surface[data-shine='true'] {
260
+ box-shadow:
261
+ inset 1px 1px 0 var(--ty-glass-shine-color),
262
+ var(--ty-glass-shadow);
263
+ }
264
+
265
+ [data-design-system='atmospheric-glass'] .ty-weather-display {
266
+ color: var(--ty-color-text);
267
+ font-size: var(--ty-font-size-display);
268
+ font-weight: var(--ty-font-weight-bold);
269
+ line-height: var(--ty-line-height-display);
270
+ text-shadow: var(--ty-glass-text-shadow);
271
+ }
272
+
273
+ [data-design-system='atmospheric-glass'] .ty-metric-label {
274
+ color: var(--ty-color-text-muted);
275
+ font-size: var(--ty-font-size-100);
276
+ font-weight: var(--ty-font-weight-semibold);
277
+ line-height: var(--ty-line-height-100);
278
+ letter-spacing: var(--ty-letter-spacing-label);
279
+ text-shadow: var(--ty-glass-text-shadow);
280
+ text-transform: uppercase;
281
+ }
282
+
283
+ [data-design-system='atmospheric-glass'] .ty-weather-metrics {
284
+ display: grid;
285
+ grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
286
+ gap: var(--ty-layout-card-gap);
287
+ }
288
+ }
package/design/css.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const css: string;
2
+ export default css;
package/design/fluent-web.css ADDED
@@ -0,0 +1,398 @@
1
+ @layer tokens, product-theme;
2
+
3
+ @layer product-theme {
4
+ [data-design-system='fluent-web'] {
5
+ color-scheme: light;
6
+
7
+ --ty-design-name: fluent-web;
8
+ --ty-color-background: #ffffff;
9
+ --ty-color-on-background: #242424;
10
+ --ty-color-surface: #ffffff;
11
+ --ty-color-surface-hover: #f5f5f5;
12
+ --ty-color-surface-pressed: #e0e0e0;
13
+ --ty-color-surface-elevated: #ffffff;
14
+ --ty-color-text: #242424;
15
+ --ty-color-text-muted: #616161;
16
+ --ty-color-border: #d1d1d1;
17
+ --ty-color-border-strong: #8a8886;
18
+ --ty-color-accent: #0f6cbd;
19
+ --ty-color-on-accent: #ffffff;
20
+ --ty-color-accent-hover: #115ea3;
21
+ --ty-color-accent-pressed: #0f548c;
22
+ --ty-color-danger: #c50f1f;
23
+ --ty-color-on-danger: #ffffff;
24
+ --ty-color-disabled-surface: #f0f0f0;
25
+ --ty-color-disabled-border: #e0e0e0;
26
+ --ty-color-disabled-text: #bdbdbd;
27
+
28
+ --ty-font-family:
29
+ 'Segoe UI', 'Segoe UI Web', system-ui, -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
30
+ --ty-font-size-100: 0.75rem;
31
+ --ty-font-size-200: 0.875rem;
32
+ --ty-font-size-300: 1rem;
33
+ --ty-font-size-400: 1.25rem;
34
+ --ty-font-size-500: 1.75rem;
35
+ --ty-font-weight-regular: 400;
36
+ --ty-font-weight-medium: 500;
37
+ --ty-font-weight-semibold: 600;
38
+ --ty-font-weight-bold: 700;
39
+ --ty-line-height-100: 1rem;
40
+ --ty-line-height-200: 1.25rem;
41
+ --ty-line-height-300: 1.375rem;
42
+ --ty-line-height-400: 1.75rem;
43
+ --ty-letter-spacing-label: 0;
44
+
45
+ --ty-space-0: 0;
46
+ --ty-space-1: 0.25rem;
47
+ --ty-space-2: 0.5rem;
48
+ --ty-space-3: 0.75rem;
49
+ --ty-space-4: 1rem;
50
+ --ty-space-5: 1.25rem;
51
+ --ty-space-6: 1.5rem;
52
+ --ty-space-8: 2rem;
53
+ --ty-space-10: 2.5rem;
54
+
55
+ --ty-radius-0: 0;
56
+ --ty-radius-1: 0.125rem;
57
+ --ty-radius-2: 0.25rem;
58
+ --ty-radius-3: 0.375rem;
59
+ --ty-radius-4: 0.5rem;
60
+ --ty-radius-pill: 9999px;
61
+
62
+ --ty-stroke-thin: 1px;
63
+ --ty-stroke-thick: 2px;
64
+ --ty-focus-width: 2px;
65
+ --ty-focus-offset: 2px;
66
+ --ty-focus-color: #0f6cbd;
67
+ --ty-focus-inner-color: #ffffff;
68
+
69
+ --ty-duration-fast: 100ms;
70
+ --ty-duration-normal: 150ms;
71
+ --ty-duration-slow: 250ms;
72
+ --ty-easing-standard: cubic-bezier(0.33, 0, 0.67, 1);
73
+ --ty-motion-feedback-duration: var(--ty-duration-fast);
74
+ --ty-motion-content-duration: var(--ty-duration-normal);
75
+ --ty-motion-easing: var(--ty-easing-standard);
76
+
77
+ --ty-elevation-1: 0 2px 4px rgb(0 0 0 / 0.14), 0 0 2px rgb(0 0 0 / 0.12);
78
+ --ty-elevation-2: 0 8px 16px rgb(0 0 0 / 0.14), 0 0 2px rgb(0 0 0 / 0.12);
79
+ --ty-overlay-elevation: var(--ty-elevation-2);
80
+
81
+ --ty-control-radius: var(--ty-radius-2);
82
+ --ty-control-border-width: var(--ty-stroke-thin);
83
+ --ty-control-font-size: var(--ty-font-size-200);
84
+ --ty-control-padding-inline: var(--ty-space-3);
85
+ --ty-control-padding-block: var(--ty-space-1);
86
+ --ty-control-gap: var(--ty-space-2);
87
+ --ty-control-min-block-size: 2rem;
88
+
89
+ --ty-layout-page-gutter: clamp(1rem, 3vw, 2rem);
90
+ --ty-layout-card-gap: var(--ty-space-4);
91
+ --ty-layout-section-gap: var(--ty-space-6);
92
+ --ty-layout-content-measure: 72rem;
93
+
94
+ background: var(--ty-color-background);
95
+ color: var(--ty-color-text);
96
+ font-family: var(--ty-font-family);
97
+ }
98
+
99
+ [data-design-system='fluent-web'][data-color-scheme='dark'] {
100
+ color-scheme: dark;
101
+ --ty-color-background: #1b1a19;
102
+ --ty-color-on-background: #ffffff;
103
+ --ty-color-surface: #292827;
104
+ --ty-color-surface-hover: #323130;
105
+ --ty-color-surface-pressed: #3b3a39;
106
+ --ty-color-surface-elevated: #323130;
107
+ --ty-color-text: #ffffff;
108
+ --ty-color-text-muted: #d2d0ce;
109
+ --ty-color-border: #605e5c;
110
+ --ty-color-border-strong: #8a8886;
111
+ --ty-color-accent: #479ef5;
112
+ --ty-color-on-accent: #000000;
113
+ --ty-color-accent-hover: #62abf5;
114
+ --ty-color-accent-pressed: #2886de;
115
+ --ty-color-danger: #ff99a4;
116
+ --ty-focus-inner-color: #000000;
117
+ }
118
+
119
+ [data-design-system='fluent-web'] ::selection {
120
+ background: #cfe4fa;
121
+ color: #242424;
122
+ }
123
+
124
+ @media (forced-colors: active) {
125
+ [data-design-system='fluent-web'] {
126
+ --ty-color-background: Canvas;
127
+ --ty-color-surface: Canvas;
128
+ --ty-color-surface-hover: Canvas;
129
+ --ty-color-surface-pressed: Canvas;
130
+ --ty-color-text: CanvasText;
131
+ --ty-color-text-muted: CanvasText;
132
+ --ty-color-border: ButtonBorder;
133
+ --ty-color-border-strong: ButtonText;
134
+ --ty-color-accent: Highlight;
135
+ --ty-color-on-accent: HighlightText;
136
+ --ty-color-danger: Mark;
137
+ --ty-focus-color: Highlight;
138
+ --ty-focus-inner-color: Canvas;
139
+ background: Canvas;
140
+ }
141
+ }
142
+
143
+ @media (prefers-reduced-motion: reduce) {
144
+ [data-design-system='fluent-web'] {
145
+ --ty-motion-feedback-duration: 0ms;
146
+ --ty-motion-content-duration: 0ms;
147
+ }
148
+ }
149
+ }
150
+
151
+ @layer product-components;
152
+
153
+ @layer product-components {
154
+ [data-design-system='fluent-web'] tyui-button {
155
+ --ty-button-radius: var(--ty-control-radius);
156
+ --ty-button-min-block-size: var(--ty-control-min-block-size);
157
+ --ty-button-padding-inline: var(--ty-space-3);
158
+ --ty-button-padding-block: var(--ty-space-1);
159
+ --ty-button-gap: var(--ty-space-2);
160
+ --ty-button-font-size: var(--ty-font-size-200);
161
+ --ty-button-font-weight: var(--ty-font-weight-semibold);
162
+ --ty-button-line-height: var(--ty-line-height-200);
163
+ --ty-button-border-width: var(--ty-stroke-thin);
164
+ }
165
+
166
+ [data-design-system='fluent-web'] tyui-button[size='small'] {
167
+ --ty-button-min-block-size: 1.5rem;
168
+ --ty-button-padding-inline: var(--ty-space-2);
169
+ --ty-button-font-size: var(--ty-font-size-100);
170
+ --ty-button-line-height: var(--ty-line-height-100);
171
+ }
172
+
173
+ [data-design-system='fluent-web'] tyui-button[size='large'] {
174
+ --ty-button-min-block-size: 2.5rem;
175
+ --ty-button-padding-inline: var(--ty-space-4);
176
+ --ty-button-font-size: var(--ty-font-size-300);
177
+ --ty-button-line-height: var(--ty-line-height-300);
178
+ }
179
+
180
+ [data-design-system='fluent-web'] tyui-button[appearance='primary'] {
181
+ --ty-button-background: var(--ty-color-accent);
182
+ --ty-button-background-hover: var(--ty-color-accent-hover);
183
+ --ty-button-background-active: var(--ty-color-accent-pressed);
184
+ --ty-button-foreground: var(--ty-color-on-accent);
185
+ --ty-button-border-color: transparent;
186
+ --ty-button-border-color-hover: transparent;
187
+ }
188
+
189
+ [data-design-system='fluent-web'] tyui-button[appearance='default'],
190
+ [data-design-system='fluent-web'] tyui-button[appearance='secondary'] {
191
+ --ty-button-background: var(--ty-color-surface);
192
+ --ty-button-background-hover: var(--ty-color-surface-hover);
193
+ --ty-button-background-active: var(--ty-color-surface-pressed);
194
+ --ty-button-foreground: var(--ty-color-text);
195
+ --ty-button-border-color: var(--ty-color-border);
196
+ --ty-button-border-color-hover: var(--ty-color-border-strong);
197
+ }
198
+
199
+ [data-design-system='fluent-web'] tyui-button[appearance='outline'] {
200
+ --ty-button-background: transparent;
201
+ --ty-button-background-hover: var(--ty-color-surface-hover);
202
+ --ty-button-background-active: var(--ty-color-surface-pressed);
203
+ --ty-button-foreground: var(--ty-color-text);
204
+ --ty-button-border-color: var(--ty-color-border);
205
+ --ty-button-border-color-hover: var(--ty-color-border-strong);
206
+ }
207
+
208
+ [data-design-system='fluent-web'] tyui-button[appearance='subtle'] {
209
+ --ty-button-background: transparent;
210
+ --ty-button-background-hover: var(--ty-color-surface-hover);
211
+ --ty-button-background-active: var(--ty-color-surface-pressed);
212
+ --ty-button-foreground: var(--ty-color-text);
213
+ --ty-button-border-color: transparent;
214
+ --ty-button-border-color-hover: transparent;
215
+ }
216
+
217
+ [data-design-system='fluent-web'] tyui-button[appearance='transparent'] {
218
+ --ty-button-background: transparent;
219
+ --ty-button-background-hover: transparent;
220
+ --ty-button-background-active: var(--ty-color-surface-pressed);
221
+ --ty-button-foreground: var(--ty-color-text-muted);
222
+ --ty-button-foreground-hover: var(--ty-color-text);
223
+ --ty-button-border-color: transparent;
224
+ --ty-button-border-color-hover: transparent;
225
+ }
226
+
227
+ [data-design-system='fluent-web'] tyui-button[shape='rounded'] {
228
+ --ty-button-radius: var(--ty-radius-2);
229
+ }
230
+
231
+ [data-design-system='fluent-web'] tyui-button[shape='circular'] {
232
+ --ty-button-radius: var(--ty-radius-pill);
233
+ }
234
+
235
+ [data-design-system='fluent-web'] tyui-button[shape='square'] {
236
+ --ty-button-radius: var(--ty-radius-0);
237
+ }
238
+
239
+ [data-design-system='fluent-web'] tyui-input {
240
+ --ty-input-background: var(--ty-color-surface);
241
+ --ty-input-background-filled-darker: var(--ty-color-surface-hover);
242
+ --ty-input-background-filled-lighter: var(--ty-color-surface);
243
+ --ty-input-foreground: var(--ty-color-text);
244
+ --ty-input-placeholder-color: var(--ty-color-text-muted);
245
+ --ty-input-border-color: var(--ty-color-border);
246
+ --ty-input-border-color-strong: var(--ty-color-border-strong);
247
+ --ty-input-invalid-border-color: var(--ty-color-danger);
248
+ --ty-input-focus-indicator-color: var(--ty-color-accent);
249
+ --ty-input-radius: var(--ty-control-radius);
250
+ --ty-input-min-block-size: var(--ty-control-min-block-size);
251
+ --ty-input-padding-inline: var(--ty-space-3);
252
+ --ty-input-padding-block: var(--ty-space-1);
253
+ --ty-input-gap: var(--ty-space-2);
254
+ --ty-input-font-size: var(--ty-font-size-200);
255
+ }
256
+
257
+ [data-design-system='fluent-web'] tyui-input[size='small'] {
258
+ --ty-input-min-block-size: 1.5rem;
259
+ --ty-input-padding-inline: var(--ty-space-2);
260
+ --ty-input-font-size: var(--ty-font-size-100);
261
+ }
262
+
263
+ [data-design-system='fluent-web'] tyui-input[size='large'] {
264
+ --ty-input-min-block-size: 2.5rem;
265
+ --ty-input-padding-inline: var(--ty-space-4);
266
+ --ty-input-font-size: var(--ty-font-size-300);
267
+ }
268
+
269
+ [data-design-system='fluent-web'] tyui-input::part(control) {
270
+ background:
271
+ linear-gradient(var(--ty-input-focus-indicator-color), var(--ty-input-focus-indicator-color))
272
+ bottom center / 0 2px no-repeat,
273
+ var(--ty-input-background);
274
+ transition:
275
+ background-size var(--ty-motion-feedback-duration, 120ms) var(--ty-motion-easing, ease),
276
+ background-color var(--ty-motion-feedback-duration, 120ms) var(--ty-motion-easing, ease),
277
+ border-color var(--ty-motion-feedback-duration, 120ms) var(--ty-motion-easing, ease),
278
+ box-shadow var(--ty-motion-feedback-duration, 120ms) var(--ty-motion-easing, ease);
279
+ }
280
+
281
+ [data-design-system='fluent-web'] tyui-input:focus-within::part(control) {
282
+ background-size:
283
+ 100% 2px,
284
+ auto;
285
+ border-block-end-color: var(--ty-input-focus-indicator-color);
286
+ outline: 0;
287
+ box-shadow: none;
288
+ }
289
+
290
+ @media (prefers-reduced-motion: reduce) {
291
+ [data-design-system='fluent-web'] tyui-input::part(control) {
292
+ transition-duration: 0ms;
293
+ }
294
+ }
295
+
296
+ @media (forced-colors: active) {
297
+ [data-design-system='fluent-web'] tyui-input::part(control) {
298
+ background:
299
+ linear-gradient(Highlight, Highlight) bottom center / 0 2px no-repeat,
300
+ Field;
301
+ }
302
+
303
+ [data-design-system='fluent-web'] tyui-input:focus-within::part(control) {
304
+ background-size:
305
+ 100% 2px,
306
+ auto;
307
+ border-block-end-color: Highlight;
308
+ }
309
+ }
310
+
311
+ [data-design-system='fluent-web'] tyui-input.ty-fluent-input-underline {
312
+ --ty-input-radius: var(--ty-radius-0);
313
+ --ty-input-background: transparent;
314
+ }
315
+
316
+ [data-design-system='fluent-web'] tyui-input.ty-fluent-input-underline::part(control) {
317
+ border-block-start-color: transparent;
318
+ border-inline-color: transparent;
319
+ border-radius: 0;
320
+ }
321
+
322
+ [data-design-system='fluent-web'] tyui-input.ty-fluent-input-underline:hover::part(control) {
323
+ border-block-end-color: var(--ty-color-border-strong);
324
+ }
325
+
326
+ [data-design-system='fluent-web'] tyui-checkbox {
327
+ --ty-checkbox-foreground: var(--ty-color-text);
328
+ --ty-checkbox-font-size: var(--ty-font-size-200);
329
+ --ty-checkbox-line-height: var(--ty-line-height-200);
330
+ --ty-checkbox-size: 1rem;
331
+ --ty-checkbox-radius: var(--ty-radius-1);
332
+ --ty-checkbox-gap: var(--ty-space-2);
333
+ --ty-checkbox-border-color: var(--ty-color-border-strong);
334
+ --ty-checkbox-border-color-hover: var(--ty-color-accent);
335
+ --ty-checkbox-background: var(--ty-color-surface);
336
+ --ty-checkbox-checked-background: var(--ty-color-accent);
337
+ --ty-checkbox-checked-background-hover: var(--ty-color-accent-hover);
338
+ --ty-checkbox-checked-background-active: var(--ty-color-accent-pressed);
339
+ --ty-checkbox-checked-foreground: var(--ty-color-on-accent);
340
+ --ty-checkbox-indeterminate-foreground: var(--ty-color-accent);
341
+ --ty-checkbox-indeterminate-border-color: var(--ty-color-accent);
342
+ }
343
+
344
+ [data-design-system='fluent-web'] tyui-radio,
345
+ [data-design-system='fluent-web'] tyui-radio-group {
346
+ --ty-radio-foreground: var(--ty-color-text);
347
+ --ty-radio-font-size: var(--ty-font-size-200);
348
+ --ty-radio-line-height: var(--ty-line-height-200);
349
+ --ty-radio-size: 1rem;
350
+ --ty-radio-dot-size: 0.5rem;
351
+ --ty-radio-gap: var(--ty-space-2);
352
+ --ty-radio-border-color: var(--ty-color-border-strong);
353
+ --ty-radio-checked-color: var(--ty-color-accent);
354
+ --ty-radio-group-foreground: var(--ty-color-text);
355
+ --ty-radio-group-label-color: var(--ty-color-text);
356
+ --ty-radio-group-gap: var(--ty-space-2);
357
+ --ty-radio-group-inline-gap: var(--ty-space-4);
358
+ }
359
+
360
+ [data-design-system='fluent-web'] .ty-fluent-panel {
361
+ box-sizing: border-box;
362
+ color: var(--ty-color-text);
363
+ background: var(--ty-color-surface);
364
+ border: var(--ty-stroke-thin) solid var(--ty-color-border);
365
+ border-radius: var(--ty-radius-3);
366
+ box-shadow: none;
367
+ }
368
+
369
+ [data-design-system='fluent-web'] .ty-fluent-panel[data-elevation='raised'] {
370
+ box-shadow: var(--ty-elevation-1);
371
+ }
372
+
373
+ [data-design-system='fluent-web'] .ty-fluent-toolbar {
374
+ display: flex;
375
+ flex-wrap: wrap;
376
+ gap: var(--ty-space-2);
377
+ align-items: center;
378
+ }
379
+
380
+ [data-design-system='fluent-web'] .ty-fluent-form-grid {
381
+ display: grid;
382
+ grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
383
+ gap: var(--ty-space-4);
384
+ }
385
+
386
+ [data-design-system='fluent-web'] .ty-fluent-caption {
387
+ color: var(--ty-color-text-muted);
388
+ font-size: var(--ty-font-size-100);
389
+ line-height: var(--ty-line-height-100);
390
+ }
391
+
392
+ [data-design-system='fluent-web'] .ty-fluent-title {
393
+ color: var(--ty-color-text);
394
+ font-size: var(--ty-font-size-400);
395
+ font-weight: var(--ty-font-weight-semibold);
396
+ line-height: var(--ty-line-height-400);
397
+ }
398
+ }