@slotted/themes 0.0.0-stage → 0.1.0-beta.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 (7) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +15 -2
  3. package/dist/default.css +1367 -0
  4. package/dist/default.d.ts +4 -0
  5. package/dist/default.js +3636 -0
  6. package/dist/styles.css +689 -0
  7. package/package.json +35 -3
package/dist/styles.css ADDED
@@ -0,0 +1,689 @@
1
+ @layer slotted.reset, slotted.tokens, slotted.theme, slotted.components;
2
+
3
+ @layer slotted.theme {
4
+ [data-slotted-theme="default"] {
5
+ --slotted-radius-none: 0px;
6
+ --slotted-font-family-sans: 'Geist Variable', ui-sans-serif, system-ui, sans-serif;
7
+ --slotted-font-family-mono: 'Geist Mono Variable', ui-monospace, SFMono-Regular, Menlo, monospace;
8
+ --slotted-border-width-thin: 1px;
9
+ --slotted-border-width-thick: 2px;
10
+ --slotted-border-width-medium: 1.5px;
11
+ --slotted-duration-loop-fast: 700ms;
12
+ --slotted-duration-loop: 1.1s;
13
+ --slotted-duration-loop-slow: 1.6s;
14
+ --slotted-space-1: 0.125rem;
15
+ --slotted-space-2: 0.25rem;
16
+ --slotted-space-3: 0.375rem;
17
+ --slotted-space-4: 0.5rem;
18
+ --slotted-space-5: 0.75rem;
19
+ --slotted-space-6: 1rem;
20
+ --slotted-space-7: 1.25rem;
21
+ --slotted-space-8: 1.5rem;
22
+ --slotted-space-9: 2rem;
23
+ --slotted-space-10: 2.5rem;
24
+ --slotted-space-11: 3rem;
25
+ --slotted-space-12: 4rem;
26
+ --slotted-radius-xs: 2px;
27
+ --slotted-radius-sm: 4px;
28
+ --slotted-radius-md: 6px;
29
+ --slotted-radius-lg: 8px;
30
+ --slotted-radius-full: 9999px;
31
+ --slotted-font-size-xs: 0.75rem;
32
+ --slotted-font-size-sm: 0.8125rem;
33
+ --slotted-font-size-md: 0.875rem;
34
+ --slotted-font-size-lg: 1rem;
35
+ --slotted-font-size-xl: 1.125rem;
36
+ --slotted-font-size-2xl: 1.25rem;
37
+ --slotted-font-size-3xl: 1.5rem;
38
+ --slotted-font-size-4xl: 2rem;
39
+ --slotted-line-height-xs: 1.4;
40
+ --slotted-line-height-sm: 1.45;
41
+ --slotted-line-height-md: 1.5;
42
+ --slotted-line-height-lg: 1.5;
43
+ --slotted-line-height-xl: 1.45;
44
+ --slotted-line-height-2xl: 1.4;
45
+ --slotted-line-height-3xl: 1.3;
46
+ --slotted-line-height-4xl: 1.2;
47
+ --slotted-font-weight-regular: 400;
48
+ --slotted-font-weight-medium: 500;
49
+ --slotted-font-weight-semibold: 600;
50
+ --slotted-duration-instant: 1ms;
51
+ --slotted-duration-short: 120ms;
52
+ --slotted-duration-medium: 200ms;
53
+ --slotted-duration-long: 320ms;
54
+ --slotted-easing-standard: cubic-bezier(0.2, 0, 0, 1);
55
+ --slotted-easing-enter: cubic-bezier(0.05, 0.7, 0.1, 1);
56
+ --slotted-easing-exit: cubic-bezier(0.3, 0, 0.8, 0.15);
57
+ --slotted-easing-emphasized: cubic-bezier(0.3, 0, 0, 1.3);
58
+ --slotted-z-index-sticky: 100;
59
+ --slotted-z-index-overlay: 1000;
60
+ --slotted-z-index-popover: 1100;
61
+ --slotted-z-index-toast: 1200;
62
+ --slotted-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(0 0.5)'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/g%3E%3C/svg%3E");
63
+ --slotted-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
64
+ --slotted-icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E");
65
+ --slotted-icon-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3C/svg%3E");
66
+ --slotted-icon-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
67
+ --slotted-icon-ellipsis: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='19' cy='12' r='1'/%3E%3Ccircle cx='5' cy='12' r='1'/%3E%3C/svg%3E");
68
+ --slotted-icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='14' x='8' y='8' rx='2' ry='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/svg%3E");
69
+ --slotted-icon-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
70
+ --slotted-icon-eye-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49'/%3E%3Cpath d='M14.084 14.158a3 3 0 0 1-4.242-4.242'/%3E%3Cpath d='M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143'/%3E%3Cpath d='m2 2 20 20'/%3E%3C/svg%3E");
71
+ --slotted-icon-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
72
+ --slotted-icon-chevrons-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 17 5-5-5-5'/%3E%3Cpath d='m13 17 5-5-5-5'/%3E%3C/svg%3E");
73
+ --slotted-icon-panel-open: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M9 3v18'/%3E%3Cpath d='m14 9 3 3-3 3'/%3E%3C/svg%3E");
74
+ --slotted-icon-panel-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M9 3v18'/%3E%3Cpath d='m16 15-3-3 3-3'/%3E%3C/svg%3E");
75
+ --slotted-icon-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3Cpath d='M19 12H5'/%3E%3C/svg%3E");
76
+ --slotted-icon-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 17v5'/%3E%3Cpath d='M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z'/%3E%3C/svg%3E");
77
+ --slotted-icon-pin-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 17v5'/%3E%3Cpath d='M15 9.34V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H7.89'/%3E%3Cpath d='m2 2 20 20'/%3E%3Cpath d='M9 9v1.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h11'/%3E%3C/svg%3E");
78
+ --slotted-icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
79
+ --slotted-icon-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E");
80
+ --slotted-icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
81
+ --slotted-icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E");
82
+ --slotted-icon-person: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='12' cy='8' r='5'/%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3C/svg%3E");
83
+ --slotted-icon-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/svg%3E");
84
+ --slotted-icon-circle-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
85
+ --slotted-icon-circle-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
86
+ --slotted-icon-triangle-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(0.01 0.007)'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/g%3E%3C/svg%3E");
87
+ --slotted-icon-circle-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E");
88
+ --slotted-icon-circle-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6'/%3E%3Cpath d='m9 9 6 6'/%3E%3C/svg%3E");
89
+ --slotted-icon-circle-question: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
90
+ --slotted-icon-inbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 12 16 12 14 15 10 15 8 12 2 12'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E");
91
+ --slotted-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 21-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/svg%3E");
92
+ --slotted-icon-search-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m13.5 8.5-5 5'/%3E%3Cpath d='m8.5 8.5 5 5'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
93
+ --slotted-icon-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
94
+ --slotted-icon-caps-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(0 0.25)'%3E%3Cpath d='M14 16a1 1 0 0 0 1-1v-2a1 1 0 0 1 1-1h3.293a.707.707 0 0 0 .5-1.207l-6.939-6.939a1.207 1.207 0 0 0-1.708 0l-6.94 6.94a.707.707 0 0 0 .5 1.206H8a1 1 0 0 1 1 1v2a1 1 0 0 0 1 1z'/%3E%3Cpath d='M9 20h6'/%3E%3C/g%3E%3C/svg%3E");
95
+ --slotted-icon-arrow-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 7-7 7 7'/%3E%3Cpath d='M12 19V5'/%3E%3C/svg%3E");
96
+ --slotted-icon-stop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3C/svg%3E");
97
+ --slotted-icon-paperclip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(-0.329 0)'%3E%3Cpath d='m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551'/%3E%3C/g%3E%3C/svg%3E");
98
+ --slotted-icon-pipette: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(-0.011 0.011)'%3E%3Cpath d='m12 9-8.414 8.414A2 2 0 0 0 3 18.828v1.344a2 2 0 0 1-.586 1.414A2 2 0 0 1 3.828 21h1.344a2 2 0 0 0 1.414-.586L15 12'/%3E%3Cpath d='m18 9 .4.4a1 1 0 1 1-3 3l-3.8-3.8a1 1 0 1 1 3-3l.4.4 3.4-3.4a1 1 0 1 1 3 3z'/%3E%3Cpath d='m2 22 .414-.414'/%3E%3C/g%3E%3C/svg%3E");
99
+ --slotted-icon-cloud-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.94 5.274A7 7 0 0 1 15.71 10h1.79a4.5 4.5 0 0 1 4.222 6.057'/%3E%3Cpath d='M18.796 18.81A4.5 4.5 0 0 1 17.5 19H9A7 7 0 0 1 5.79 5.78'/%3E%3Cpath d='m2 2 20 20'/%3E%3C/svg%3E");
100
+ --slotted-icon-loader-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-6.219-8.56'/%3E%3C/svg%3E");
101
+ --slotted-icon-maximize: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3H5a2 2 0 0 0-2 2v3'/%3E%3Cpath d='M21 8V5a2 2 0 0 0-2-2h-3'/%3E%3Cpath d='M3 16v3a2 2 0 0 0 2 2h3'/%3E%3Cpath d='M16 21h3a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E");
102
+ --slotted-icon-minimize: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3v3a2 2 0 0 1-2 2H3'/%3E%3Cpath d='M21 8h-3a2 2 0 0 1-2-2V3'/%3E%3Cpath d='M3 16h3a2 2 0 0 1 2 2v3'/%3E%3Cpath d='M16 21v-3a2 2 0 0 1 2-2h3'/%3E%3C/svg%3E");
103
+ --slotted-icon-upload: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m17 8-5-5-5 5'/%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3C/svg%3E");
104
+ --slotted-icon-file: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z'/%3E%3Cpath d='M14 2v5a1 1 0 0 0 1 1h5'/%3E%3C/svg%3E");
105
+ --slotted-icon-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E");
106
+ --slotted-icon-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(-1.001 0)'%3E%3Cpath d='M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z'/%3E%3C/g%3E%3C/svg%3E");
107
+ --slotted-icon-pause: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='14' y='3' width='5' height='18' rx='1'/%3E%3Crect x='5' y='3' width='5' height='18' rx='1'/%3E%3C/svg%3E");
108
+ --slotted-icon-rotate-ccw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E");
109
+ --slotted-icon-file-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z'/%3E%3Cpath d='M14 2v5a1 1 0 0 0 1 1h5'/%3E%3Ccircle cx='10' cy='12' r='2'/%3E%3Cpath d='m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22'/%3E%3C/svg%3E");
110
+ --slotted-icon-file-text: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z'/%3E%3Cpath d='M14 2v5a1 1 0 0 0 1 1h5'/%3E%3Cpath d='M10 9H8'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E");
111
+ --slotted-icon-file-spreadsheet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z'/%3E%3Cpath d='M14 2v5a1 1 0 0 0 1 1h5'/%3E%3Cpath d='M8 13h2'/%3E%3Cpath d='M14 13h2'/%3E%3Cpath d='M8 17h2'/%3E%3Cpath d='M14 17h2'/%3E%3C/svg%3E");
112
+ --slotted-icon-file-audio: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(1 0)'%3E%3Cpath d='M4 6.835V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.706.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2h-.343'/%3E%3Cpath d='M14 2v5a1 1 0 0 0 1 1h5'/%3E%3Cpath d='M2 19a2 2 0 0 1 4 0v1a2 2 0 0 1-4 0v-4a6 6 0 0 1 12 0v4a2 2 0 0 1-4 0v-1a2 2 0 0 1 4 0'/%3E%3C/g%3E%3C/svg%3E");
113
+ --slotted-icon-file-video: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z'/%3E%3Cpath d='M14 2v5a1 1 0 0 0 1 1h5'/%3E%3Cpath d='M15.033 13.44a.647.647 0 0 1 0 1.12l-4.065 2.352a.645.645 0 0 1-.968-.56v-4.704a.645.645 0 0 1 .967-.56z'/%3E%3C/svg%3E");
114
+ --slotted-icon-file-archive: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.659 22H18a2 2 0 0 0 2-2V8a2.4 2.4 0 0 0-.706-1.706l-3.588-3.588A2.4 2.4 0 0 0 14 2H6a2 2 0 0 0-2 2v11.5'/%3E%3Cpath d='M14 2v5a1 1 0 0 0 1 1h5'/%3E%3Cpath d='M8 12v-1'/%3E%3Cpath d='M8 18v-2'/%3E%3Cpath d='M8 7V6'/%3E%3Ccircle cx='8' cy='20' r='2'/%3E%3C/svg%3E");
115
+ --slotted-icon-file-type: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z'/%3E%3Cpath d='M14 2v5a1 1 0 0 0 1 1h5'/%3E%3Cpath d='M11 18h2'/%3E%3Cpath d='M12 12v6'/%3E%3Cpath d='M9 13v-.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v.5'/%3E%3C/svg%3E");
116
+ --slotted-icon-presentation: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h20'/%3E%3Cpath d='M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3'/%3E%3Cpath d='m7 21 5-5 5 5'/%3E%3C/svg%3E");
117
+ --slotted-icon-text-wrap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(0 -1.5)'%3E%3Cpath d='m16 16-3 3 3 3'/%3E%3Cpath d='M3 12h14.5a1 1 0 0 1 0 7H13'/%3E%3Cpath d='M3 19h6'/%3E%3Cpath d='M3 5h18'/%3E%3C/g%3E%3C/svg%3E");
118
+ --slotted-icon-bell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(-0.001 0)'%3E%3Cpath d='M10.268 21a2 2 0 0 0 3.464 0'/%3E%3Cpath d='M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326'/%3E%3C/g%3E%3C/svg%3E");
119
+ --slotted-icon-trending-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 7h6v6'/%3E%3Cpath d='m22 7-8.5 8.5-5-5L2 17'/%3E%3C/svg%3E");
120
+ --slotted-icon-image-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='2' x2='22' y1='2' y2='22'/%3E%3Cpath d='M10.41 10.41a2 2 0 1 1-2.83-2.83'/%3E%3Cline x1='13.5' x2='6' y1='13.5' y2='21'/%3E%3Cline x1='18' x2='21' y1='12' y2='15'/%3E%3Cpath d='M3.59 3.59A1.99 1.99 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59'/%3E%3Cpath d='M21 15V5a2 2 0 0 0-2-2H9'/%3E%3C/svg%3E");
121
+ --slotted-icon-funnel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(0.001 -0.5)'%3E%3Cpath d='M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z'/%3E%3C/g%3E%3C/svg%3E");
122
+ --slotted-icon-grip-vertical: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='12' r='1'/%3E%3Ccircle cx='9' cy='5' r='1'/%3E%3Ccircle cx='9' cy='19' r='1'/%3E%3Ccircle cx='15' cy='12' r='1'/%3E%3Ccircle cx='15' cy='5' r='1'/%3E%3Ccircle cx='15' cy='19' r='1'/%3E%3C/svg%3E");
123
+ --slotted-icon-grip-horizontal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='1'/%3E%3Ccircle cx='19' cy='9' r='1'/%3E%3Ccircle cx='5' cy='9' r='1'/%3E%3Ccircle cx='12' cy='15' r='1'/%3E%3Ccircle cx='19' cy='15' r='1'/%3E%3Ccircle cx='5' cy='15' r='1'/%3E%3C/svg%3E");
124
+ --slotted-icon-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(0.001 0.464)'%3E%3Cpath d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z'/%3E%3C/g%3E%3C/svg%3E");
125
+ --slotted-icon-check-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(0 0.25)'%3E%3Cpath d='M18 6 7 17l-5-5'/%3E%3Cpath d='m22 10-7.5 7.5L13 16'/%3E%3C/g%3E%3C/svg%3E");
126
+ --slotted-control-font-family: var(--slotted-font-family-sans);
127
+ --slotted-control-font-weight: var(--slotted-font-weight-semibold);
128
+ --slotted-control-line-height: 1;
129
+ --slotted-control-letter-spacing: 0;
130
+ --slotted-control-border-width: var(--slotted-border-width-thin);
131
+ --slotted-control-radius: var(--slotted-radius-sm);
132
+ --slotted-control-shadow-focus-geometry: 0 1px 4px -1px;
133
+ --slotted-control-transition-duration: var(--slotted-duration-short);
134
+ --slotted-control-transition-easing: var(--slotted-easing-standard);
135
+ --slotted-focus-ring-width: var(--slotted-border-width-thick);
136
+ --slotted-focus-ring-offset: var(--slotted-border-width-thick);
137
+ --slotted-target-min: 24px;
138
+ --slotted-target-comfortable: 44px;
139
+ --slotted-selection-size-sm: 14px;
140
+ --slotted-selection-size-md: 16px;
141
+ --slotted-selection-size-lg: 18px;
142
+ --slotted-selection-halo-opacity: 0.12;
143
+ --slotted-highlight-tint-opacity: 0.075;
144
+ }
145
+
146
+ [data-slotted-theme="default"][data-slotted-scheme="light"],
147
+ [data-slotted-theme="default"] [data-slotted-scheme="light"] {
148
+ color-scheme: light;
149
+ --slotted-focus-ring-color: #2563eb;
150
+ --slotted-focus-ring-color-invalid: var(--slotted-tone-danger-border);
151
+ --slotted-border-subtle: #d8dee6;
152
+ --slotted-text: #0f172a;
153
+ --slotted-text-muted: #5b6b7f;
154
+ --slotted-disabled-background: #e2e8f0;
155
+ --slotted-disabled-foreground: #64748b;
156
+ --slotted-disabled-border: #cbd5e1;
157
+ --slotted-tone-accent-solid: #1d4ed8;
158
+ --slotted-tone-accent-surface: #dbeafe;
159
+ --slotted-tone-accent-solid-hover: #2a5bdc;
160
+ --slotted-tone-accent-solid-active: #1e3a8a;
161
+ --slotted-tone-accent-on-solid: #ffffff;
162
+ --slotted-tone-accent-border: #2563eb;
163
+ --slotted-tone-accent-text: #1d4ed8;
164
+ --slotted-tone-accent-subtle-hover: #eff6ff;
165
+ --slotted-tone-accent-subtle-active: #dbeafe;
166
+ --slotted-tone-secondary-solid: #e2e8f0;
167
+ --slotted-tone-secondary-surface: #e2e8f0;
168
+ --slotted-tone-secondary-solid-hover: #d0d6dd;
169
+ --slotted-tone-secondary-solid-active: #b8c3d1;
170
+ --slotted-tone-secondary-on-solid: #172033;
171
+ --slotted-tone-secondary-border: #94a3b8;
172
+ --slotted-tone-secondary-text: #172033;
173
+ --slotted-tone-secondary-subtle-hover: #f1f5f9;
174
+ --slotted-tone-secondary-subtle-active: #e2e8f0;
175
+ --slotted-tone-success-solid: #15803d;
176
+ --slotted-tone-success-surface: #dcfce7;
177
+ --slotted-tone-success-solid-hover: #2b8747;
178
+ --slotted-tone-success-solid-active: #14532d;
179
+ --slotted-tone-success-on-solid: #ffffff;
180
+ --slotted-tone-success-border: #16a34a;
181
+ --slotted-tone-success-text: #15803d;
182
+ --slotted-tone-success-subtle-hover: #f0fdf4;
183
+ --slotted-tone-success-subtle-active: #dcfce7;
184
+ --slotted-tone-warning-solid: #facc15;
185
+ --slotted-tone-warning-surface: #fef3c7;
186
+ --slotted-tone-warning-solid-hover: #facf39;
187
+ --slotted-tone-warning-solid-active: #ca8a04;
188
+ --slotted-tone-warning-on-solid: #422006;
189
+ --slotted-tone-warning-border: #ca8a04;
190
+ --slotted-tone-warning-text: #854d0e;
191
+ --slotted-tone-warning-subtle-hover: #fffbeb;
192
+ --slotted-tone-warning-subtle-active: #fef3c7;
193
+ --slotted-tone-danger-solid: #dc2626;
194
+ --slotted-tone-danger-surface: #fee2e2;
195
+ --slotted-tone-danger-solid-hover: #de342f;
196
+ --slotted-tone-danger-solid-active: #991b1b;
197
+ --slotted-tone-danger-on-solid: #ffffff;
198
+ --slotted-tone-danger-border: #dc2626;
199
+ --slotted-tone-danger-text: #b91c1c;
200
+ --slotted-tone-danger-subtle-hover: #fef2f2;
201
+ --slotted-tone-danger-subtle-active: #fee2e2;
202
+ --slotted-shadow-xs: 0 1px 2px rgb(15 23 42 / 0.06);
203
+ --slotted-shadow-sm: 0 1px 3px rgb(15 23 42 / 0.08), 0 1px 2px -1px rgb(15 23 42 / 0.08);
204
+ --slotted-shadow-md: 0 4px 6px -1px rgb(15 23 42 / 0.08), 0 2px 4px -2px rgb(15 23 42 / 0.08);
205
+ --slotted-shadow-lg: 0 10px 15px -3px rgb(15 23 42 / 0.10), 0 4px 6px -4px rgb(15 23 42 / 0.08);
206
+ --slotted-surface: #ffffff;
207
+ --slotted-surface-raised: #ffffff;
208
+ --slotted-surface-sunken: #f7f8fa;
209
+ --slotted-surface-inverse: #172033;
210
+ --slotted-text-inverse: #f8fafc;
211
+ --slotted-border-strong: #78899c;
212
+ --slotted-control-border-color: #bfc7d1;
213
+ --slotted-control-surface: var(--slotted-surface);
214
+ --slotted-current-edge: transparent;
215
+ --slotted-control-shadow: 0 1px 2px rgb(0 0 0 / 0.06);
216
+ --slotted-scrim: rgb(15 23 42 / 0.45);
217
+ --slotted-data-1: #2563eb;
218
+ --slotted-data-2: #ea580c;
219
+ --slotted-data-3: #0891b2;
220
+ --slotted-data-4: #dc2626;
221
+ --slotted-data-5: #7c3aed;
222
+ --slotted-data-6: #a16207;
223
+ --slotted-data-7: #c026d3;
224
+ --slotted-data-8: #16a34a;
225
+ --slotted-upload-kind-pdf: #c62828;
226
+ --slotted-upload-kind-document: #1d4ed8;
227
+ --slotted-upload-kind-spreadsheet: #15803d;
228
+ --slotted-upload-kind-presentation: #c2410c;
229
+ --slotted-upload-kind-image: #0e7490;
230
+ --slotted-upload-kind-video: #4338ca;
231
+ --slotted-upload-kind-audio: #a21caf;
232
+ --slotted-upload-kind-archive: #a16207;
233
+ --slotted-upload-kind-other: #475569;
234
+ --slotted-upload-kind-foreground: #ffffff;
235
+ --slotted-code-comment: #5b6b7f;
236
+ --slotted-code-keyword: #a21caf;
237
+ --slotted-code-string: #15803d;
238
+ --slotted-code-number: #b45309;
239
+ --slotted-code-function: #1d4ed8;
240
+ --slotted-code-type: #0e7490;
241
+ --slotted-code-variable: #4338ca;
242
+ --slotted-code-property: #6d28d9;
243
+ --slotted-code-punctuation: #475569;
244
+ --slotted-code-tag: #be123c;
245
+ --slotted-code-attribute: #0369a1;
246
+ --slotted-code-constant: #9a3412;
247
+ --slotted-rating-edge: transparent;
248
+ }
249
+
250
+ [data-slotted-theme="default"][data-slotted-scheme="dark"],
251
+ [data-slotted-theme="default"] [data-slotted-scheme="dark"] {
252
+ color-scheme: dark;
253
+ --slotted-focus-ring-color: #60a5fa;
254
+ --slotted-focus-ring-color-invalid: var(--slotted-tone-danger-border);
255
+ --slotted-border-subtle: #2e2e33;
256
+ --slotted-text: #fafafa;
257
+ --slotted-text-muted: #a1a1aa;
258
+ --slotted-disabled-background: #18181b;
259
+ --slotted-disabled-foreground: #71717a;
260
+ --slotted-disabled-border: #27272a;
261
+ --slotted-tone-accent-solid: #2563eb;
262
+ --slotted-tone-accent-surface: #181b22;
263
+ --slotted-tone-accent-solid-hover: #346fee;
264
+ --slotted-tone-accent-solid-active: #1e40af;
265
+ --slotted-tone-accent-on-solid: #ffffff;
266
+ --slotted-tone-accent-border: #60a5fa;
267
+ --slotted-tone-accent-text: #93c5fd;
268
+ --slotted-tone-accent-subtle-hover: #111318;
269
+ --slotted-tone-accent-subtle-active: #181b22;
270
+ --slotted-tone-secondary-solid: #27272a;
271
+ --slotted-tone-secondary-surface: #27272a;
272
+ --slotted-tone-secondary-solid-hover: #353638;
273
+ --slotted-tone-secondary-solid-active: #18181b;
274
+ --slotted-tone-secondary-on-solid: #fafafa;
275
+ --slotted-tone-secondary-border: #3f3f46;
276
+ --slotted-tone-secondary-text: #fafafa;
277
+ --slotted-tone-secondary-subtle-hover: #222225;
278
+ --slotted-tone-secondary-subtle-active: #27272a;
279
+ --slotted-tone-success-solid: #15803d;
280
+ --slotted-tone-success-surface: #162019;
281
+ --slotted-tone-success-solid-hover: #2b8747;
282
+ --slotted-tone-success-solid-active: #14532d;
283
+ --slotted-tone-success-on-solid: #ffffff;
284
+ --slotted-tone-success-border: #4ade80;
285
+ --slotted-tone-success-text: #86efac;
286
+ --slotted-tone-success-subtle-hover: #101713;
287
+ --slotted-tone-success-subtle-active: #162019;
288
+ --slotted-tone-warning-solid: #facc15;
289
+ --slotted-tone-warning-surface: #211d12;
290
+ --slotted-tone-warning-solid-hover: #fad140;
291
+ --slotted-tone-warning-solid-active: #eab308;
292
+ --slotted-tone-warning-on-solid: #422006;
293
+ --slotted-tone-warning-border: #facc15;
294
+ --slotted-tone-warning-text: #fde68a;
295
+ --slotted-tone-warning-subtle-hover: #17150f;
296
+ --slotted-tone-warning-subtle-active: #211d12;
297
+ --slotted-tone-danger-solid: #dc2626;
298
+ --slotted-tone-danger-surface: #211414;
299
+ --slotted-tone-danger-solid-hover: #de342f;
300
+ --slotted-tone-danger-solid-active: #991b1b;
301
+ --slotted-tone-danger-on-solid: #ffffff;
302
+ --slotted-tone-danger-border: #f87171;
303
+ --slotted-tone-danger-text: #fca5a5;
304
+ --slotted-tone-danger-subtle-hover: #181111;
305
+ --slotted-tone-danger-subtle-active: #211414;
306
+ --slotted-shadow-xs: 0 1px 2px rgb(0 0 0 / 0.40);
307
+ --slotted-shadow-sm: 0 1px 3px rgb(0 0 0 / 0.45), 0 1px 2px -1px rgb(0 0 0 / 0.40);
308
+ --slotted-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.50), 0 2px 4px -2px rgb(0 0 0 / 0.45);
309
+ --slotted-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.60), 0 4px 6px -4px rgb(0 0 0 / 0.50);
310
+ --slotted-surface: #131316;
311
+ --slotted-surface-raised: #171719;
312
+ --slotted-surface-sunken: #0c0c0e;
313
+ --slotted-surface-inverse: #fafafa;
314
+ --slotted-text-inverse: #18181b;
315
+ --slotted-border-strong: #71717a;
316
+ --slotted-control-border-color: #414149;
317
+ --slotted-control-surface: var(--slotted-surface);
318
+ --slotted-current-edge: transparent;
319
+ --slotted-control-shadow: 0 1px 2px rgb(0 0 0 / 0.5);
320
+ --slotted-scrim: rgb(0 0 0 / 0.62);
321
+ --slotted-data-1: #2563eb;
322
+ --slotted-data-2: #ea580c;
323
+ --slotted-data-3: #0891b2;
324
+ --slotted-data-4: #ef4444;
325
+ --slotted-data-5: #8b5cf6;
326
+ --slotted-data-6: #d97706;
327
+ --slotted-data-7: #d946ef;
328
+ --slotted-data-8: #16a34a;
329
+ --slotted-upload-kind-pdf: #dc2626;
330
+ --slotted-upload-kind-document: #2563eb;
331
+ --slotted-upload-kind-spreadsheet: #15803d;
332
+ --slotted-upload-kind-presentation: #ea580c;
333
+ --slotted-upload-kind-image: #0891b2;
334
+ --slotted-upload-kind-video: #6366f1;
335
+ --slotted-upload-kind-audio: #c026d3;
336
+ --slotted-upload-kind-archive: #b45309;
337
+ --slotted-upload-kind-other: #64748b;
338
+ --slotted-upload-kind-foreground: #ffffff;
339
+ --slotted-code-comment: #a1a1aa;
340
+ --slotted-code-keyword: #e879f9;
341
+ --slotted-code-string: #4ade80;
342
+ --slotted-code-number: #fbbf24;
343
+ --slotted-code-function: #60a5fa;
344
+ --slotted-code-type: #22d3ee;
345
+ --slotted-code-variable: #a5b4fc;
346
+ --slotted-code-property: #c4b5fd;
347
+ --slotted-code-punctuation: #cbd5e1;
348
+ --slotted-code-tag: #fb7185;
349
+ --slotted-code-attribute: #7dd3fc;
350
+ --slotted-code-constant: #fb923c;
351
+ --slotted-rating-edge: transparent;
352
+ }
353
+
354
+ [data-slotted-theme="default"][data-slotted-scheme="high-contrast"],
355
+ [data-slotted-theme="default"] [data-slotted-scheme="high-contrast"] {
356
+ color-scheme: light;
357
+ --slotted-focus-ring-color: #000000;
358
+ --slotted-focus-ring-color-invalid: var(--slotted-tone-danger-border);
359
+ --slotted-border-subtle: #000000;
360
+ --slotted-text: #000000;
361
+ --slotted-text-muted: #1f2937;
362
+ --slotted-disabled-background: #ffffff;
363
+ --slotted-disabled-foreground: #595959;
364
+ --slotted-disabled-border: #595959;
365
+ --slotted-tone-accent-solid: #0b3a9c;
366
+ --slotted-tone-accent-surface: #ffffff;
367
+ --slotted-tone-accent-solid-hover: #1b47a3;
368
+ --slotted-tone-accent-solid-active: #07235e;
369
+ --slotted-tone-accent-on-solid: #ffffff;
370
+ --slotted-tone-accent-border: #000000;
371
+ --slotted-tone-accent-text: #0b3a9c;
372
+ --slotted-tone-accent-subtle-hover: #e8eefc;
373
+ --slotted-tone-accent-subtle-active: #d3e0fa;
374
+ --slotted-tone-secondary-solid: #ffffff;
375
+ --slotted-tone-secondary-surface: #ffffff;
376
+ --slotted-tone-secondary-solid-hover: #ebebeb;
377
+ --slotted-tone-secondary-solid-active: #cccccc;
378
+ --slotted-tone-secondary-on-solid: #000000;
379
+ --slotted-tone-secondary-border: #000000;
380
+ --slotted-tone-secondary-text: #000000;
381
+ --slotted-tone-secondary-subtle-hover: #e6e6e6;
382
+ --slotted-tone-secondary-subtle-active: #cccccc;
383
+ --slotted-tone-success-solid: #0a5227;
384
+ --slotted-tone-success-surface: #ffffff;
385
+ --slotted-tone-success-solid-hover: #1f5c33;
386
+ --slotted-tone-success-solid-active: #063117;
387
+ --slotted-tone-success-on-solid: #ffffff;
388
+ --slotted-tone-success-border: #000000;
389
+ --slotted-tone-success-text: #0a5227;
390
+ --slotted-tone-success-subtle-hover: #e4f3ea;
391
+ --slotted-tone-success-subtle-active: #cbe8d6;
392
+ --slotted-tone-warning-solid: #facc15;
393
+ --slotted-tone-warning-surface: #ffffff;
394
+ --slotted-tone-warning-solid-hover: #facf39;
395
+ --slotted-tone-warning-solid-active: #d19e00;
396
+ --slotted-tone-warning-on-solid: #000000;
397
+ --slotted-tone-warning-border: #000000;
398
+ --slotted-tone-warning-text: #5c3a00;
399
+ --slotted-tone-warning-subtle-hover: #fdf3d0;
400
+ --slotted-tone-warning-subtle-active: #fbe9a8;
401
+ --slotted-tone-danger-solid: #94090c;
402
+ --slotted-tone-danger-surface: #ffffff;
403
+ --slotted-tone-danger-solid-hover: #9c241e;
404
+ --slotted-tone-danger-solid-active: #5a0507;
405
+ --slotted-tone-danger-on-solid: #ffffff;
406
+ --slotted-tone-danger-border: #000000;
407
+ --slotted-tone-danger-text: #94090c;
408
+ --slotted-tone-danger-subtle-hover: #fbe9e9;
409
+ --slotted-tone-danger-subtle-active: #f6d2d3;
410
+ --slotted-shadow-xs: 0 0 0 1px #000000;
411
+ --slotted-shadow-sm: 0 0 0 1px #000000;
412
+ --slotted-shadow-md: 0 0 0 2px #000000;
413
+ --slotted-shadow-lg: 0 0 0 2px #000000;
414
+ --slotted-surface: #ffffff;
415
+ --slotted-surface-raised: #ffffff;
416
+ --slotted-surface-sunken: #ffffff;
417
+ --slotted-surface-inverse: #000000;
418
+ --slotted-text-inverse: #ffffff;
419
+ --slotted-border-strong: #000000;
420
+ --slotted-control-border-color: #000000;
421
+ --slotted-control-surface: var(--slotted-surface);
422
+ --slotted-current-edge: #000000;
423
+ --slotted-control-shadow: none;
424
+ --slotted-scrim: rgb(0 0 0 / 0.75);
425
+ --slotted-data-1: #1d4ed8;
426
+ --slotted-data-2: #c2410c;
427
+ --slotted-data-3: #0e7490;
428
+ --slotted-data-4: #b91c1c;
429
+ --slotted-data-5: #6d28d9;
430
+ --slotted-data-6: #a16207;
431
+ --slotted-data-7: #a21caf;
432
+ --slotted-data-8: #15803d;
433
+ --slotted-upload-kind-pdf: #991b1b;
434
+ --slotted-upload-kind-document: #1e3a8a;
435
+ --slotted-upload-kind-spreadsheet: #14532d;
436
+ --slotted-upload-kind-presentation: #7c2d12;
437
+ --slotted-upload-kind-image: #164e63;
438
+ --slotted-upload-kind-video: #312e81;
439
+ --slotted-upload-kind-audio: #701a75;
440
+ --slotted-upload-kind-archive: #713f12;
441
+ --slotted-upload-kind-other: #1e293b;
442
+ --slotted-upload-kind-foreground: #ffffff;
443
+ --slotted-code-comment: #1f2937;
444
+ --slotted-code-keyword: #701a75;
445
+ --slotted-code-string: #14532d;
446
+ --slotted-code-number: #713f12;
447
+ --slotted-code-function: #1e3a8a;
448
+ --slotted-code-type: #164e63;
449
+ --slotted-code-variable: #312e81;
450
+ --slotted-code-property: #4c1d95;
451
+ --slotted-code-punctuation: #1e293b;
452
+ --slotted-code-tag: #881337;
453
+ --slotted-code-attribute: #0c4a6e;
454
+ --slotted-code-constant: #7c2d12;
455
+ --slotted-rating-edge: #000000;
456
+ }
457
+
458
+ [data-slotted-theme="default"][data-slotted-density="comfortable"],
459
+ [data-slotted-theme="default"] [data-slotted-density="comfortable"] {
460
+ --slotted-control-height-sm: 30px;
461
+ --slotted-control-height-md: 34px;
462
+ --slotted-control-height-lg: 38px;
463
+ --slotted-control-padding-inline-sm: 10px;
464
+ --slotted-control-padding-inline-md: 13px;
465
+ --slotted-control-padding-inline-lg: 16px;
466
+ --slotted-control-font-size-sm: 12px;
467
+ --slotted-control-font-size-md: 13px;
468
+ --slotted-control-font-size-lg: 14px;
469
+ --slotted-control-icon-size-sm: 14px;
470
+ --slotted-control-icon-size-md: 16px;
471
+ --slotted-control-icon-size-lg: 18px;
472
+ --slotted-control-gap-sm: 6px;
473
+ --slotted-control-gap-md: 8px;
474
+ --slotted-control-gap-lg: 8px;
475
+ --slotted-control-label-gap-sm: 8px;
476
+ --slotted-control-label-gap-md: 12px;
477
+ --slotted-control-label-gap-lg: 12px;
478
+ --slotted-control-inner-size-sm: 22px;
479
+ --slotted-control-inner-size-md: 24px;
480
+ --slotted-control-inner-size-lg: 28px;
481
+ --slotted-avatar-size-xs: 24px;
482
+ --slotted-avatar-size-sm: 28px;
483
+ --slotted-avatar-size-md: 36px;
484
+ --slotted-avatar-size-lg: 48px;
485
+ --slotted-avatar-size-xl: 64px;
486
+ }
487
+
488
+ [data-slotted-theme="default"][data-slotted-density="compact"],
489
+ [data-slotted-theme="default"] [data-slotted-density="compact"] {
490
+ --slotted-control-height-sm: 26px;
491
+ --slotted-control-height-md: 28px;
492
+ --slotted-control-height-lg: 32px;
493
+ --slotted-control-padding-inline-sm: 8px;
494
+ --slotted-control-padding-inline-md: 10px;
495
+ --slotted-control-padding-inline-lg: 12px;
496
+ --slotted-control-font-size-sm: 12px;
497
+ --slotted-control-font-size-md: 12px;
498
+ --slotted-control-font-size-lg: 13px;
499
+ --slotted-control-icon-size-sm: 13px;
500
+ --slotted-control-icon-size-md: 14px;
501
+ --slotted-control-icon-size-lg: 16px;
502
+ --slotted-control-gap-sm: 4px;
503
+ --slotted-control-gap-md: 6px;
504
+ --slotted-control-gap-lg: 6px;
505
+ --slotted-control-label-gap-sm: 6px;
506
+ --slotted-control-label-gap-md: 8px;
507
+ --slotted-control-label-gap-lg: 8px;
508
+ --slotted-control-inner-size-sm: 18px;
509
+ --slotted-control-inner-size-md: 20px;
510
+ --slotted-control-inner-size-lg: 24px;
511
+ --slotted-avatar-size-xs: 22px;
512
+ --slotted-avatar-size-sm: 26px;
513
+ --slotted-avatar-size-md: 32px;
514
+ --slotted-avatar-size-lg: 42px;
515
+ --slotted-avatar-size-xl: 56px;
516
+ }
517
+
518
+ [data-slotted-theme="default"][data-slotted-density="dense"],
519
+ [data-slotted-theme="default"] [data-slotted-density="dense"] {
520
+ --slotted-control-height-sm: 24px;
521
+ --slotted-control-height-md: 26px;
522
+ --slotted-control-height-lg: 30px;
523
+ --slotted-control-padding-inline-sm: 6px;
524
+ --slotted-control-padding-inline-md: 8px;
525
+ --slotted-control-padding-inline-lg: 10px;
526
+ --slotted-control-font-size-sm: 12px;
527
+ --slotted-control-font-size-md: 12px;
528
+ --slotted-control-font-size-lg: 12px;
529
+ --slotted-control-icon-size-sm: 12px;
530
+ --slotted-control-icon-size-md: 13px;
531
+ --slotted-control-icon-size-lg: 14px;
532
+ --slotted-control-gap-sm: 4px;
533
+ --slotted-control-gap-md: 4px;
534
+ --slotted-control-gap-lg: 6px;
535
+ --slotted-control-label-gap-sm: 6px;
536
+ --slotted-control-label-gap-md: 6px;
537
+ --slotted-control-label-gap-lg: 8px;
538
+ --slotted-control-inner-size-sm: 16px;
539
+ --slotted-control-inner-size-md: 18px;
540
+ --slotted-control-inner-size-lg: 22px;
541
+ --slotted-avatar-size-xs: 20px;
542
+ --slotted-avatar-size-sm: 24px;
543
+ --slotted-avatar-size-md: 28px;
544
+ --slotted-avatar-size-lg: 36px;
545
+ --slotted-avatar-size-xl: 48px;
546
+ }
547
+
548
+ @media (pointer: coarse) {
549
+ [data-slotted-theme="default"][data-slotted-density="comfortable"],
550
+ [data-slotted-theme="default"] [data-slotted-density="comfortable"] {
551
+ --slotted-control-height-sm: max(30px, var(--slotted-target-comfortable));
552
+ --slotted-control-height-md: max(34px, var(--slotted-target-comfortable));
553
+ --slotted-control-height-lg: max(38px, var(--slotted-target-comfortable));
554
+ }
555
+
556
+ [data-slotted-theme="default"][data-slotted-density="compact"],
557
+ [data-slotted-theme="default"] [data-slotted-density="compact"] {
558
+ --slotted-control-height-sm: max(26px, var(--slotted-target-comfortable));
559
+ --slotted-control-height-md: max(28px, var(--slotted-target-comfortable));
560
+ --slotted-control-height-lg: max(32px, var(--slotted-target-comfortable));
561
+ }
562
+
563
+ [data-slotted-theme="default"][data-slotted-density="dense"],
564
+ [data-slotted-theme="default"] [data-slotted-density="dense"] {
565
+ --slotted-control-height-sm: max(24px, var(--slotted-target-comfortable));
566
+ --slotted-control-height-md: max(26px, var(--slotted-target-comfortable));
567
+ --slotted-control-height-lg: max(30px, var(--slotted-target-comfortable));
568
+ }
569
+ }
570
+
571
+ @media (forced-colors: active) {
572
+ [data-slotted-theme="default"],
573
+ [data-slotted-theme="default"][data-slotted-scheme="light"],
574
+ [data-slotted-theme="default"] [data-slotted-scheme="light"],
575
+ [data-slotted-theme="default"][data-slotted-scheme="dark"],
576
+ [data-slotted-theme="default"] [data-slotted-scheme="dark"],
577
+ [data-slotted-theme="default"][data-slotted-scheme="high-contrast"],
578
+ [data-slotted-theme="default"] [data-slotted-scheme="high-contrast"] {
579
+ --slotted-focus-ring-color: Highlight;
580
+ --slotted-focus-ring-color-invalid: Highlight;
581
+ --slotted-border-subtle: ButtonBorder;
582
+ --slotted-text: CanvasText;
583
+ --slotted-text-muted: GrayText;
584
+ --slotted-disabled-background: Canvas;
585
+ --slotted-disabled-foreground: GrayText;
586
+ --slotted-disabled-border: GrayText;
587
+ --slotted-tone-accent-solid: Highlight;
588
+ --slotted-tone-accent-surface: Canvas;
589
+ --slotted-tone-accent-solid-hover: Highlight;
590
+ --slotted-tone-accent-solid-active: Highlight;
591
+ --slotted-tone-accent-on-solid: HighlightText;
592
+ --slotted-tone-accent-border: ButtonBorder;
593
+ --slotted-tone-accent-text: CanvasText;
594
+ --slotted-tone-accent-subtle-hover: Canvas;
595
+ --slotted-tone-accent-subtle-active: Canvas;
596
+ --slotted-tone-secondary-solid: ButtonFace;
597
+ --slotted-tone-secondary-surface: Canvas;
598
+ --slotted-tone-secondary-solid-hover: ButtonFace;
599
+ --slotted-tone-secondary-solid-active: ButtonFace;
600
+ --slotted-tone-secondary-on-solid: ButtonText;
601
+ --slotted-tone-secondary-border: ButtonBorder;
602
+ --slotted-tone-secondary-text: CanvasText;
603
+ --slotted-tone-secondary-subtle-hover: Canvas;
604
+ --slotted-tone-secondary-subtle-active: Canvas;
605
+ --slotted-tone-success-solid: ButtonFace;
606
+ --slotted-tone-success-surface: Canvas;
607
+ --slotted-tone-success-solid-hover: ButtonFace;
608
+ --slotted-tone-success-solid-active: ButtonFace;
609
+ --slotted-tone-success-on-solid: ButtonText;
610
+ --slotted-tone-success-border: ButtonBorder;
611
+ --slotted-tone-success-text: CanvasText;
612
+ --slotted-tone-success-subtle-hover: Canvas;
613
+ --slotted-tone-success-subtle-active: Canvas;
614
+ --slotted-tone-warning-solid: ButtonFace;
615
+ --slotted-tone-warning-surface: Canvas;
616
+ --slotted-tone-warning-solid-hover: ButtonFace;
617
+ --slotted-tone-warning-solid-active: ButtonFace;
618
+ --slotted-tone-warning-on-solid: ButtonText;
619
+ --slotted-tone-warning-border: ButtonBorder;
620
+ --slotted-tone-warning-text: CanvasText;
621
+ --slotted-tone-warning-subtle-hover: Canvas;
622
+ --slotted-tone-warning-subtle-active: Canvas;
623
+ --slotted-tone-danger-solid: ButtonFace;
624
+ --slotted-tone-danger-surface: Canvas;
625
+ --slotted-tone-danger-solid-hover: ButtonFace;
626
+ --slotted-tone-danger-solid-active: ButtonFace;
627
+ --slotted-tone-danger-on-solid: ButtonText;
628
+ --slotted-tone-danger-border: ButtonBorder;
629
+ --slotted-tone-danger-text: CanvasText;
630
+ --slotted-tone-danger-subtle-hover: Canvas;
631
+ --slotted-tone-danger-subtle-active: Canvas;
632
+ --slotted-shadow-xs: none;
633
+ --slotted-shadow-sm: none;
634
+ --slotted-shadow-md: none;
635
+ --slotted-shadow-lg: none;
636
+ --slotted-surface: Canvas;
637
+ --slotted-surface-raised: Canvas;
638
+ --slotted-surface-sunken: Canvas;
639
+ --slotted-surface-inverse: CanvasText;
640
+ --slotted-text-inverse: Canvas;
641
+ --slotted-border-strong: CanvasText;
642
+ --slotted-control-border-color: ButtonBorder;
643
+ --slotted-control-surface: Field;
644
+ --slotted-current-edge: Highlight;
645
+ --slotted-control-shadow: none;
646
+ --slotted-scrim: Canvas;
647
+ --slotted-data-1: CanvasText;
648
+ --slotted-data-2: CanvasText;
649
+ --slotted-data-3: CanvasText;
650
+ --slotted-data-4: CanvasText;
651
+ --slotted-data-5: CanvasText;
652
+ --slotted-data-6: CanvasText;
653
+ --slotted-data-7: CanvasText;
654
+ --slotted-data-8: CanvasText;
655
+ --slotted-upload-kind-pdf: ButtonFace;
656
+ --slotted-upload-kind-document: ButtonFace;
657
+ --slotted-upload-kind-spreadsheet: ButtonFace;
658
+ --slotted-upload-kind-presentation: ButtonFace;
659
+ --slotted-upload-kind-image: ButtonFace;
660
+ --slotted-upload-kind-video: ButtonFace;
661
+ --slotted-upload-kind-audio: ButtonFace;
662
+ --slotted-upload-kind-archive: ButtonFace;
663
+ --slotted-upload-kind-other: ButtonFace;
664
+ --slotted-upload-kind-foreground: ButtonText;
665
+ --slotted-code-comment: CanvasText;
666
+ --slotted-code-keyword: CanvasText;
667
+ --slotted-code-string: CanvasText;
668
+ --slotted-code-number: CanvasText;
669
+ --slotted-code-function: CanvasText;
670
+ --slotted-code-type: CanvasText;
671
+ --slotted-code-variable: CanvasText;
672
+ --slotted-code-property: CanvasText;
673
+ --slotted-code-punctuation: CanvasText;
674
+ --slotted-code-tag: CanvasText;
675
+ --slotted-code-attribute: CanvasText;
676
+ --slotted-code-constant: CanvasText;
677
+ --slotted-rating-edge: CanvasText;
678
+ }
679
+ }
680
+
681
+ @media (prefers-reduced-motion: reduce) {
682
+ [data-slotted-theme="default"] {
683
+ --slotted-duration-instant: 1ms;
684
+ --slotted-duration-short: 1ms;
685
+ --slotted-duration-medium: 1ms;
686
+ --slotted-duration-long: 1ms;
687
+ }
688
+ }
689
+ }