@charstudios/pallet 0.2.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/README.md +454 -434
  2. package/dist/{chunk-3JRKA6NS.js → chunk-BCQMI6SW.js} +98 -97
  3. package/dist/chunk-BCQMI6SW.js.map +1 -0
  4. package/dist/{index-wWkmeDkd.d.ts → index-C8-t5s-1.d.ts} +3 -3
  5. package/dist/index.d.ts +3 -3
  6. package/dist/index.js +96 -95
  7. package/dist/index.js.map +1 -1
  8. package/dist/presets/index.d.ts +1 -1
  9. package/dist/presets/index.js +1 -1
  10. package/dist/server.d.ts +2 -2
  11. package/dist/server.js +1 -1
  12. package/dist/styles/index.css +16 -16
  13. package/dist/styles/variant-flat.css +215 -215
  14. package/dist/styles/variant-frosted.css +58 -203
  15. package/dist/styles/variant-toon.css +221 -159
  16. package/package.json +79 -79
  17. package/dist/chunk-3JRKA6NS.js.map +0 -1
package/dist/styles/variant-flat.css CHANGED
@@ -1,215 +1,215 @@
1
- /*
2
- * Flat variant skin.
3
- *
4
- * Crisp hairline borders, minimal shadows, tighter radii — the baseline shadcn
5
- * look applied consistently across every common data-slot surface.
6
- */
7
-
8
- @layer pallet-variants {
9
- [data-pallet-variant="flat"] {
10
- --pallet-control-radius: var(--radius-md);
11
- --pallet-surface-radius: var(--radius-xl);
12
- --pallet-overlay-radius: var(--radius-lg);
13
- --pallet-chip-radius: var(--radius-md);
14
- --pallet-surface-shadow: none;
15
- --pallet-overlay-shadow: var(--shadow-md);
16
- --pallet-control-shadow: none;
17
- }
18
-
19
- /* ── Controls ─────────────────────────────────────────────────────────── */
20
- [data-pallet-variant="flat"] :is(
21
- [data-slot="button"],
22
- [data-slot="input"],
23
- [data-slot="textarea"],
24
- [data-slot="select-trigger"],
25
- [data-slot="native-select"],
26
- [data-slot="native-select-wrapper"],
27
- [data-slot="combobox-trigger"],
28
- [data-slot="combobox-chip-input"],
29
- [data-slot="command-input"],
30
- [data-slot="input-otp"],
31
- [data-slot="input-otp-slot"],
32
- [data-slot="input-group"],
33
- [data-slot="input-group-control"],
34
- [data-slot="sidebar-input"],
35
- [data-slot="toggle"],
36
- [data-slot="toggle-group"],
37
- [data-slot="toggle-group-item"],
38
- [data-slot="checkbox"],
39
- [data-slot="radio-group-item"],
40
- [data-slot="switch"],
41
- [data-slot="slider-thumb"],
42
- [data-slot="calendar"],
43
- [data-slot="pagination-link"],
44
- [data-slot="button-group"],
45
- [data-slot="input-group-button"]
46
- ) {
47
- border-radius: var(--pallet-control-radius);
48
- box-shadow: var(--pallet-control-shadow);
49
- }
50
-
51
- [data-pallet-variant="flat"] :is(
52
- [data-slot="textarea"],
53
- [data-slot="calendar"]
54
- ) {
55
- border-radius: var(--radius-lg);
56
- }
57
-
58
- [data-pallet-variant="flat"] :is(
59
- [data-slot="checkbox"],
60
- [data-slot="radio-group-item"],
61
- [data-slot="switch"],
62
- [data-slot="switch-thumb"],
63
- [data-slot="slider-thumb"],
64
- [data-slot="avatar"],
65
- [data-slot="avatar-fallback"],
66
- [data-slot="progress"],
67
- [data-slot="progress-indicator"],
68
- [data-slot="skeleton"]
69
- ) {
70
- border-radius: var(--radius-sm);
71
- }
72
-
73
- [data-pallet-variant="flat"] [data-slot="switch"],
74
- [data-pallet-variant="flat"] [data-slot="slider-track"] {
75
- border-radius: 9999px;
76
- }
77
-
78
- /* ── Surfaces ─────────────────────────────────────────────────────────── */
79
- [data-pallet-variant="flat"] :is(
80
- [data-slot="card"],
81
- [data-slot="alert"],
82
- [data-slot="accordion"],
83
- [data-slot="accordion-item"],
84
- [data-slot="tabs"],
85
- [data-slot="tabs-list"],
86
- [data-slot="table"],
87
- [data-slot="table-container"],
88
- [data-slot="item"],
89
- [data-slot="item-group"],
90
- [data-slot="empty"],
91
- [data-slot="field"],
92
- [data-slot="field-set"],
93
- [data-slot="field-group"],
94
- [data-slot="sidebar"],
95
- [data-slot="sidebar-container"],
96
- [data-slot="sidebar-inner"],
97
- [data-slot="sidebar-inset"],
98
- [data-slot="sidebar-group"],
99
- [data-slot="carousel"],
100
- [data-slot="chart"],
101
- [data-slot="resizable-panel"],
102
- [data-slot="scroll-area"],
103
- [data-slot="breadcrumb"],
104
- [data-slot="pagination"],
105
- [data-slot="menubar"],
106
- [data-slot="navigation-menu"],
107
- [data-slot="navigation-menu-viewport"]
108
- ) {
109
- border-radius: var(--pallet-surface-radius);
110
- box-shadow: var(--pallet-surface-shadow);
111
- }
112
-
113
- [data-pallet-variant="flat"] :is(
114
- [data-slot="card"],
115
- [data-slot="alert"],
116
- [data-slot="item"],
117
- [data-slot="empty"],
118
- [data-slot="accordion-item"]
119
- ) {
120
- border-color: var(--border);
121
- }
122
-
123
- [data-pallet-variant="flat"] :is(
124
- [data-slot="tabs-list"],
125
- [data-slot="table-container"],
126
- [data-slot="sidebar-menu-button"],
127
- [data-slot="sidebar-menu-sub-button"],
128
- [data-slot="breadcrumb-link"],
129
- [data-slot="breadcrumb-page"],
130
- [data-slot="badge"],
131
- [data-slot="kbd"],
132
- [data-slot="avatar-badge"]
133
- ) {
134
- border-radius: var(--pallet-chip-radius);
135
- }
136
-
137
- [data-pallet-variant="flat"] [data-slot="table-row"]:hover {
138
- background-color: color-mix(in oklch, var(--muted) 70%, transparent);
139
- }
140
-
141
- [data-pallet-variant="flat"] :is(
142
- [data-slot="separator"],
143
- [data-slot="sidebar-separator"],
144
- [data-slot="dropdown-menu-separator"],
145
- [data-slot="context-menu-separator"],
146
- [data-slot="menubar-separator"],
147
- [data-slot="command-separator"],
148
- [data-slot="select-separator"],
149
- [data-slot="combobox-separator"],
150
- [data-slot="field-separator"],
151
- [data-slot="item-separator"],
152
- [data-slot="button-group-separator"]
153
- ) {
154
- background-color: var(--border);
155
- }
156
-
157
- /* ── Overlays / menus / portals ───────────────────────────────────────── */
158
- [data-pallet-variant="flat"] :is(
159
- [data-slot="popover-content"],
160
- [data-slot="dropdown-menu-content"],
161
- [data-slot="dropdown-menu-sub-content"],
162
- [data-slot="context-menu-content"],
163
- [data-slot="context-menu-sub-content"],
164
- [data-slot="menubar-content"],
165
- [data-slot="menubar-sub-content"],
166
- [data-slot="select-content"],
167
- [data-slot="combobox-content"],
168
- [data-slot="combobox-list"],
169
- [data-slot="command"],
170
- [data-slot="command-list"],
171
- [data-slot="hover-card-content"],
172
- [data-slot="tooltip-content"],
173
- [data-slot="navigation-menu-content"],
174
- [data-slot="dialog-content"],
175
- [data-slot="alert-dialog-content"],
176
- [data-slot="sheet-content"],
177
- [data-slot="drawer-content"]
178
- ) {
179
- border-radius: var(--pallet-overlay-radius);
180
- box-shadow: var(--pallet-overlay-shadow);
181
- border: 1px solid var(--border);
182
- }
183
-
184
- [data-pallet-variant="flat"] :is(
185
- [data-slot="dialog-overlay"],
186
- [data-slot="alert-dialog-overlay"],
187
- [data-slot="sheet-overlay"],
188
- [data-slot="drawer-overlay"]
189
- ) {
190
- background-color: color-mix(in oklch, var(--foreground) 40%, transparent);
191
- }
192
-
193
- [data-pallet-variant="flat"] :is(
194
- [data-slot="dropdown-menu-item"],
195
- [data-slot="dropdown-menu-checkbox-item"],
196
- [data-slot="dropdown-menu-radio-item"],
197
- [data-slot="dropdown-menu-sub-trigger"],
198
- [data-slot="context-menu-item"],
199
- [data-slot="context-menu-checkbox-item"],
200
- [data-slot="context-menu-radio-item"],
201
- [data-slot="context-menu-sub-trigger"],
202
- [data-slot="menubar-item"],
203
- [data-slot="menubar-checkbox-item"],
204
- [data-slot="menubar-radio-item"],
205
- [data-slot="menubar-sub-trigger"],
206
- [data-slot="menubar-trigger"],
207
- [data-slot="select-item"],
208
- [data-slot="combobox-item"],
209
- [data-slot="command-item"],
210
- [data-slot="navigation-menu-link"],
211
- [data-slot="navigation-menu-trigger"]
212
- ) {
213
- border-radius: var(--radius-sm);
214
- }
215
- }
1
+ /*
2
+ * Flat variant skin.
3
+ *
4
+ * Crisp hairline borders, minimal shadows, tighter radii — the baseline shadcn
5
+ * look applied consistently across every common data-slot surface.
6
+ */
7
+
8
+ @layer pallet-variants {
9
+ [data-pallet-variant="flat"] {
10
+ --pallet-control-radius: var(--radius-md);
11
+ --pallet-surface-radius: var(--radius-xl);
12
+ --pallet-overlay-radius: var(--radius-lg);
13
+ --pallet-chip-radius: var(--radius-md);
14
+ --pallet-surface-shadow: none;
15
+ --pallet-overlay-shadow: var(--shadow-md);
16
+ --pallet-control-shadow: none;
17
+ }
18
+
19
+ /* ── Controls ─────────────────────────────────────────────────────────── */
20
+ [data-pallet-variant="flat"] :is(
21
+ [data-slot="button"],
22
+ [data-slot="input"],
23
+ [data-slot="textarea"],
24
+ [data-slot="select-trigger"],
25
+ [data-slot="native-select"],
26
+ [data-slot="native-select-wrapper"],
27
+ [data-slot="combobox-trigger"],
28
+ [data-slot="combobox-chip-input"],
29
+ [data-slot="command-input"],
30
+ [data-slot="input-otp"],
31
+ [data-slot="input-otp-slot"],
32
+ [data-slot="input-group"],
33
+ [data-slot="input-group-control"],
34
+ [data-slot="sidebar-input"],
35
+ [data-slot="toggle"],
36
+ [data-slot="toggle-group"],
37
+ [data-slot="toggle-group-item"],
38
+ [data-slot="checkbox"],
39
+ [data-slot="radio-group-item"],
40
+ [data-slot="switch"],
41
+ [data-slot="slider-thumb"],
42
+ [data-slot="calendar"],
43
+ [data-slot="pagination-link"],
44
+ [data-slot="button-group"],
45
+ [data-slot="input-group-button"]
46
+ ) {
47
+ border-radius: var(--pallet-control-radius);
48
+ box-shadow: var(--pallet-control-shadow);
49
+ }
50
+
51
+ [data-pallet-variant="flat"] :is(
52
+ [data-slot="textarea"],
53
+ [data-slot="calendar"]
54
+ ) {
55
+ border-radius: var(--radius-lg);
56
+ }
57
+
58
+ [data-pallet-variant="flat"] :is(
59
+ [data-slot="checkbox"],
60
+ [data-slot="radio-group-item"],
61
+ [data-slot="switch"],
62
+ [data-slot="switch-thumb"],
63
+ [data-slot="slider-thumb"],
64
+ [data-slot="avatar"],
65
+ [data-slot="avatar-fallback"],
66
+ [data-slot="progress"],
67
+ [data-slot="progress-indicator"],
68
+ [data-slot="skeleton"]
69
+ ) {
70
+ border-radius: var(--radius-sm);
71
+ }
72
+
73
+ [data-pallet-variant="flat"] [data-slot="switch"],
74
+ [data-pallet-variant="flat"] [data-slot="slider-track"] {
75
+ border-radius: 9999px;
76
+ }
77
+
78
+ /* ── Surfaces ─────────────────────────────────────────────────────────── */
79
+ [data-pallet-variant="flat"] :is(
80
+ [data-slot="card"],
81
+ [data-slot="alert"],
82
+ [data-slot="accordion"],
83
+ [data-slot="accordion-item"],
84
+ [data-slot="tabs"],
85
+ [data-slot="tabs-list"],
86
+ [data-slot="table"],
87
+ [data-slot="table-container"],
88
+ [data-slot="item"],
89
+ [data-slot="item-group"],
90
+ [data-slot="empty"],
91
+ [data-slot="field"],
92
+ [data-slot="field-set"],
93
+ [data-slot="field-group"],
94
+ [data-slot="sidebar"],
95
+ [data-slot="sidebar-container"],
96
+ [data-slot="sidebar-inner"],
97
+ [data-slot="sidebar-inset"],
98
+ [data-slot="sidebar-group"],
99
+ [data-slot="carousel"],
100
+ [data-slot="chart"],
101
+ [data-slot="resizable-panel"],
102
+ [data-slot="scroll-area"],
103
+ [data-slot="breadcrumb"],
104
+ [data-slot="pagination"],
105
+ [data-slot="menubar"],
106
+ [data-slot="navigation-menu"],
107
+ [data-slot="navigation-menu-viewport"]
108
+ ) {
109
+ border-radius: var(--pallet-surface-radius);
110
+ box-shadow: var(--pallet-surface-shadow);
111
+ }
112
+
113
+ [data-pallet-variant="flat"] :is(
114
+ [data-slot="card"],
115
+ [data-slot="alert"],
116
+ [data-slot="item"],
117
+ [data-slot="empty"],
118
+ [data-slot="accordion-item"]
119
+ ) {
120
+ border-color: var(--border);
121
+ }
122
+
123
+ [data-pallet-variant="flat"] :is(
124
+ [data-slot="tabs-list"],
125
+ [data-slot="table-container"],
126
+ [data-slot="sidebar-menu-button"],
127
+ [data-slot="sidebar-menu-sub-button"],
128
+ [data-slot="breadcrumb-link"],
129
+ [data-slot="breadcrumb-page"],
130
+ [data-slot="badge"],
131
+ [data-slot="kbd"],
132
+ [data-slot="avatar-badge"]
133
+ ) {
134
+ border-radius: var(--pallet-chip-radius);
135
+ }
136
+
137
+ [data-pallet-variant="flat"] [data-slot="table-row"]:hover {
138
+ background-color: color-mix(in oklch, var(--muted) 70%, transparent);
139
+ }
140
+
141
+ [data-pallet-variant="flat"] :is(
142
+ [data-slot="separator"],
143
+ [data-slot="sidebar-separator"],
144
+ [data-slot="dropdown-menu-separator"],
145
+ [data-slot="context-menu-separator"],
146
+ [data-slot="menubar-separator"],
147
+ [data-slot="command-separator"],
148
+ [data-slot="select-separator"],
149
+ [data-slot="combobox-separator"],
150
+ [data-slot="field-separator"],
151
+ [data-slot="item-separator"],
152
+ [data-slot="button-group-separator"]
153
+ ) {
154
+ background-color: var(--border);
155
+ }
156
+
157
+ /* ── Overlays / menus / portals ───────────────────────────────────────── */
158
+ [data-pallet-variant="flat"] :is(
159
+ [data-slot="popover-content"],
160
+ [data-slot="dropdown-menu-content"],
161
+ [data-slot="dropdown-menu-sub-content"],
162
+ [data-slot="context-menu-content"],
163
+ [data-slot="context-menu-sub-content"],
164
+ [data-slot="menubar-content"],
165
+ [data-slot="menubar-sub-content"],
166
+ [data-slot="select-content"],
167
+ [data-slot="combobox-content"],
168
+ [data-slot="combobox-list"],
169
+ [data-slot="command"],
170
+ [data-slot="command-list"],
171
+ [data-slot="hover-card-content"],
172
+ [data-slot="tooltip-content"],
173
+ [data-slot="navigation-menu-content"],
174
+ [data-slot="dialog-content"],
175
+ [data-slot="alert-dialog-content"],
176
+ [data-slot="sheet-content"],
177
+ [data-slot="drawer-content"]
178
+ ) {
179
+ border-radius: var(--pallet-overlay-radius);
180
+ box-shadow: var(--pallet-overlay-shadow);
181
+ border: 1px solid var(--border);
182
+ }
183
+
184
+ [data-pallet-variant="flat"] :is(
185
+ [data-slot="dialog-overlay"],
186
+ [data-slot="alert-dialog-overlay"],
187
+ [data-slot="sheet-overlay"],
188
+ [data-slot="drawer-overlay"]
189
+ ) {
190
+ background-color: color-mix(in oklch, var(--foreground) 40%, transparent);
191
+ }
192
+
193
+ [data-pallet-variant="flat"] :is(
194
+ [data-slot="dropdown-menu-item"],
195
+ [data-slot="dropdown-menu-checkbox-item"],
196
+ [data-slot="dropdown-menu-radio-item"],
197
+ [data-slot="dropdown-menu-sub-trigger"],
198
+ [data-slot="context-menu-item"],
199
+ [data-slot="context-menu-checkbox-item"],
200
+ [data-slot="context-menu-radio-item"],
201
+ [data-slot="context-menu-sub-trigger"],
202
+ [data-slot="menubar-item"],
203
+ [data-slot="menubar-checkbox-item"],
204
+ [data-slot="menubar-radio-item"],
205
+ [data-slot="menubar-sub-trigger"],
206
+ [data-slot="menubar-trigger"],
207
+ [data-slot="select-item"],
208
+ [data-slot="combobox-item"],
209
+ [data-slot="command-item"],
210
+ [data-slot="navigation-menu-link"],
211
+ [data-slot="navigation-menu-trigger"]
212
+ ) {
213
+ border-radius: var(--radius-sm);
214
+ }
215
+ }