@slexkit/theme-shadcn 0.2.0 → 0.3.1

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 (15) hide show
  1. package/base.css +359 -359
  2. package/components/button.css +101 -101
  3. package/components/choice.css +151 -151
  4. package/components/content.css +273 -250
  5. package/components/display.css +1 -1
  6. package/components/input.css +786 -852
  7. package/components/select.css +175 -181
  8. package/components/slider.css +125 -116
  9. package/components/submit.css +8 -8
  10. package/components/switch.css +105 -105
  11. package/components/tabs.css +95 -95
  12. package/components/text-input.css +26 -95
  13. package/components/tooling.css +0 -1
  14. package/package.json +1 -1
  15. package/style.css +1525 -1569
package/components/select.css CHANGED
@@ -1,130 +1,129 @@
1
- .slex-select {
2
- position: relative;
3
- display: flex;
4
- width: 100%;
5
- min-width: 0;
6
- flex-direction: column;
7
- gap: 0.5rem;
8
- }
9
-
1
+ .slex-select {
2
+ position: relative;
3
+ display: flex;
4
+ width: 100%;
5
+ min-width: 0;
6
+ flex-direction: column;
7
+ gap: 0.5rem;
8
+ }
9
+
10
10
  .slex-select-label {
11
11
  display: inline-flex;
12
12
  align-items: center;
13
13
  gap: 0.375rem;
14
14
  min-width: 0;
15
15
  color: var(--foreground);
16
- font-size: 0.875rem;
17
- font-weight: 500;
18
- line-height: 1;
19
- }
20
-
21
- .slex-select-control {
22
- width: 100%;
23
- min-width: 0;
24
- }
25
-
26
- .slex-select .slex-select-trigger {
27
- box-sizing: border-box;
28
- display: flex;
29
- align-items: center;
30
- justify-content: space-between;
31
- gap: 0.75rem;
32
- width: 100%;
33
- min-width: 0;
34
- min-height: 2.5rem;
35
- margin: 0;
16
+ font-size: 0.875rem;
17
+ font-weight: 500;
18
+ line-height: 1;
19
+ }
20
+
21
+ .slex-select-control {
22
+ width: 100%;
23
+ min-width: 0;
24
+ }
25
+
26
+ .slex-select .slex-select-trigger {
27
+ box-sizing: border-box;
28
+ display: flex;
29
+ align-items: center;
30
+ justify-content: space-between;
31
+ gap: 0.75rem;
32
+ width: 100%;
33
+ min-width: 0;
34
+ min-height: 2.5rem;
35
+ margin: 0;
36
36
  padding: 0.5rem 1rem;
37
- border: 1px solid var(--input);
38
- border-radius: var(--radius);
39
- background: var(--background);
40
- color: var(--foreground);
41
- font: inherit;
42
- font-size: 0.875rem;
43
- line-height: 1.25rem;
44
- outline: none;
45
- box-shadow: 0 1px 2px color-mix(in oklab, var(--foreground) 8%, transparent);
46
- cursor: pointer;
47
- transition:
48
- border-color 150ms ease,
49
- background-color 150ms ease,
50
- box-shadow 150ms ease,
51
- color 150ms ease;
52
- appearance: none;
53
- text-align: left;
54
- }
55
-
56
- .slex-select .slex-select-trigger:hover:not(:disabled) {
57
- background: color-mix(in oklab, var(--accent) 34%, var(--background));
58
- }
59
-
60
- .slex-select .slex-select-trigger:focus-visible {
61
- border-color: var(--ring);
62
- box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring) 20%, transparent);
63
- }
64
-
65
- .slex-select .slex-select-trigger:disabled {
66
- cursor: not-allowed;
67
- opacity: 0.5;
68
- }
69
-
37
+ border: 1px solid var(--input);
38
+ border-radius: var(--radius);
39
+ background: var(--background);
40
+ color: var(--foreground);
41
+ font: inherit;
42
+ font-size: 0.875rem;
43
+ line-height: 1.25rem;
44
+ outline: none;
45
+ box-shadow: 0 1px 2px color-mix(in oklab, var(--foreground) 8%, transparent);
46
+ cursor: pointer;
47
+ transition:
48
+ border-color 150ms ease,
49
+ background-color 150ms ease,
50
+ box-shadow 150ms ease,
51
+ color 150ms ease;
52
+ appearance: none;
53
+ text-align: left;
54
+ }
55
+
56
+ .slex-select .slex-select-trigger:hover:not(:disabled) {
57
+ background: color-mix(in oklab, var(--accent) 34%, var(--background));
58
+ }
59
+
60
+ .slex-select .slex-select-trigger:focus-visible {
61
+ border-color: var(--ring);
62
+ box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring) 20%, transparent);
63
+ }
64
+
65
+ .slex-select .slex-select-trigger:disabled {
66
+ cursor: not-allowed;
67
+ opacity: 0.5;
68
+ }
69
+
70
70
  .slex-select-value {
71
71
  display: inline-flex;
72
72
  align-items: center;
73
73
  gap: 0.375rem;
74
74
  min-width: 0;
75
75
  overflow: hidden;
76
- text-overflow: ellipsis;
77
- white-space: nowrap;
78
- }
79
-
80
- .slex-select-value[data-placeholder] {
81
- color: var(--muted-foreground);
82
- }
83
-
84
- .slex-select-icon {
85
- position: relative;
86
- flex: 0 0 auto;
87
- width: 0.75rem;
88
- height: 0.75rem;
89
- opacity: 0.72;
90
- }
91
-
92
- .slex-select-icon::before {
93
- position: absolute;
94
- top: 0.2rem;
95
- left: 0.125rem;
96
- width: 0.45rem;
97
- height: 0.45rem;
98
- border-right: 1.5px solid currentColor;
99
- border-bottom: 1.5px solid currentColor;
100
- content: "";
101
- transform: rotate(45deg);
102
- }
103
-
104
- .slex-select-native {
105
- position: absolute;
106
- width: 1px;
107
- height: 1px;
108
- margin: -1px;
109
- padding: 0;
110
- border: 0;
111
- overflow: hidden;
112
- clip: rect(0 0 0 0);
113
- clip-path: inset(50%);
114
- white-space: nowrap;
115
- }
116
-
117
- .slex-select-menu {
118
- position: absolute;
119
- z-index: 40;
120
- top: calc(100% + 0.375rem);
121
- left: 0;
122
- right: 0;
123
- width: 100%;
124
- max-height: 14rem;
125
- margin: 0;
126
- padding: 0.25rem;
127
- overflow-y: auto;
76
+ text-overflow: ellipsis;
77
+ white-space: nowrap;
78
+ }
79
+
80
+ .slex-select-value[data-placeholder] {
81
+ color: var(--muted-foreground);
82
+ }
83
+
84
+ .slex-select-icon {
85
+ position: relative;
86
+ flex: 0 0 auto;
87
+ width: 0.75rem;
88
+ height: 0.75rem;
89
+ opacity: 0.72;
90
+ }
91
+
92
+ .slex-select-icon::before {
93
+ position: absolute;
94
+ top: 0.2rem;
95
+ left: 0.125rem;
96
+ width: 0.45rem;
97
+ height: 0.45rem;
98
+ border-right: 1.5px solid currentColor;
99
+ border-bottom: 1.5px solid currentColor;
100
+ content: "";
101
+ transform: rotate(45deg);
102
+ }
103
+
104
+ .slex-select-native {
105
+ position: absolute;
106
+ width: 1px;
107
+ height: 1px;
108
+ margin: -1px;
109
+ padding: 0;
110
+ border: 0;
111
+ overflow: hidden;
112
+ clip: rect(0 0 0 0);
113
+ white-space: nowrap;
114
+ }
115
+
116
+ .slex-select-menu {
117
+ position: absolute;
118
+ z-index: 40;
119
+ top: calc(100% + 0.375rem);
120
+ left: 0;
121
+ right: 0;
122
+ width: 100%;
123
+ max-height: 14rem;
124
+ margin: 0;
125
+ padding: 0.25rem;
126
+ overflow-y: auto;
128
127
  border: 1px solid color-mix(in oklab, var(--border) 82%, transparent);
129
128
  border-radius: var(--radius);
130
129
  background: var(--popover, var(--background));
@@ -136,23 +135,23 @@
136
135
  );
137
136
  list-style: none;
138
137
  }
139
-
140
- .slexkit-root .slex-select-menu {
141
- margin: 0;
142
- padding: 0.25rem;
143
- list-style: none;
144
- }
145
-
138
+
139
+ .slexkit-root .slex-select-menu {
140
+ margin: 0;
141
+ padding: 0.25rem;
142
+ list-style: none;
143
+ }
144
+
146
145
  .slexkit-root .slex-select-menu li {
147
146
  margin: 0;
148
147
  list-style: none;
149
148
  }
150
-
151
- .slex-select-option {
152
- display: flex;
153
- align-items: center;
154
- justify-content: space-between;
155
- gap: 0.75rem;
149
+
150
+ .slex-select-option {
151
+ display: flex;
152
+ align-items: center;
153
+ justify-content: space-between;
154
+ gap: 0.75rem;
156
155
  min-height: 2rem;
157
156
  padding: 0.5rem 0.75rem;
158
157
  border-radius: calc(var(--radius) - 2px);
@@ -160,40 +159,35 @@
160
159
  font-size: 0.875rem;
161
160
  line-height: 1.25rem;
162
161
  cursor: pointer;
163
- user-select: none;
164
- }
165
-
162
+ user-select: none;
163
+ }
164
+
166
165
  .slex-select-option:hover:not([data-disabled]),
167
166
  .slex-select-option--active:not([data-disabled]) {
168
167
  background: var(--accent);
169
168
  color: var(--accent-foreground);
170
169
  }
171
170
 
172
- .slex-select-menu:has(.slex-select-option:hover) .slex-select-option--active:not(:hover) {
173
- background: transparent;
174
- color: var(--popover-foreground, var(--foreground));
171
+ .slex-select-option--selected {
172
+ font-weight: 500;
175
173
  }
176
-
177
- .slex-select-option--selected {
178
- font-weight: 500;
179
- }
180
-
181
- .slex-select-option[data-disabled] {
182
- color: var(--muted-foreground);
183
- cursor: not-allowed;
184
- opacity: 0.52;
185
- }
186
-
174
+
175
+ .slex-select-option[data-disabled] {
176
+ color: var(--muted-foreground);
177
+ cursor: not-allowed;
178
+ opacity: 0.52;
179
+ }
180
+
187
181
  .slex-select-option-label {
188
182
  display: inline-flex;
189
183
  align-items: center;
190
184
  gap: 0.375rem;
191
185
  min-width: 0;
192
- overflow: hidden;
193
- text-overflow: ellipsis;
194
- white-space: nowrap;
195
- }
196
-
186
+ overflow: hidden;
187
+ text-overflow: ellipsis;
188
+ white-space: nowrap;
189
+ }
190
+
197
191
  .slex-select-check {
198
192
  position: relative;
199
193
  flex: 0 0 auto;
@@ -213,35 +207,35 @@
213
207
  content: "";
214
208
  transform: rotate(-45deg);
215
209
  }
216
-
217
- .slex-select[data-variant="toolbar"] {
218
- height: 100%;
219
- gap: 0;
220
- }
221
-
222
- .slex-select[data-variant="toolbar"] .slex-select-trigger {
223
- height: var(--slex-control-height, 2.25rem);
224
- min-height: 0;
225
- border-width: 0 1px 0 0;
226
- border-color: color-mix(in oklab, var(--border) 58%, transparent);
227
- border-radius: 0;
228
- background: transparent;
229
- padding: 0 0.75rem 0 0.875rem;
230
- font-size: 0.8125rem;
231
- line-height: 1;
232
- box-shadow: none;
233
- }
234
-
235
- .slex-select[data-variant="toolbar"] .slex-select-trigger:hover:not(:disabled) {
236
- background: color-mix(in oklab, var(--muted) 36%, var(--background));
237
- }
238
-
239
- .slex-select[data-variant="toolbar"] .slex-select-menu {
240
- top: calc(100% + 0.25rem);
241
- left: 0;
242
- right: auto;
243
- width: 100%;
244
- min-width: 100%;
210
+
211
+ .slex-select[data-variant="toolbar"] {
212
+ height: 100%;
213
+ gap: 0;
214
+ }
215
+
216
+ .slex-select[data-variant="toolbar"] .slex-select-trigger {
217
+ height: var(--slex-control-height, 2.25rem);
218
+ min-height: 0;
219
+ border-width: 0 1px 0 0;
220
+ border-color: color-mix(in oklab, var(--border) 58%, transparent);
221
+ border-radius: 0;
222
+ background: transparent;
223
+ padding: 0 0.75rem 0 0.875rem;
224
+ font-size: 0.8125rem;
225
+ line-height: 1;
226
+ box-shadow: none;
227
+ }
228
+
229
+ .slex-select[data-variant="toolbar"] .slex-select-trigger:hover:not(:disabled) {
230
+ background: color-mix(in oklab, var(--muted) 36%, var(--background));
231
+ }
232
+
233
+ .slex-select[data-variant="toolbar"] .slex-select-menu {
234
+ top: calc(100% + 0.25rem);
235
+ left: 0;
236
+ right: auto;
237
+ width: 100%;
238
+ min-width: 100%;
245
239
  border-color: color-mix(in oklab, var(--border) 76%, transparent);
246
240
  border-radius: calc(var(--radius) - 2px);
247
241
  padding: 0.25rem;
@@ -251,9 +245,9 @@
251
245
  0 1px 3px rgb(0 0 0 / 0.06)
252
246
  );
253
247
  }
254
-
255
- .slex-select[data-variant="toolbar"] .slex-select-option {
256
- height: 1.875rem;
248
+
249
+ .slex-select[data-variant="toolbar"] .slex-select-option {
250
+ height: 1.875rem;
257
251
  border-radius: calc(var(--radius) - 4px);
258
252
  font-size: 0.8125rem;
259
253
  padding-inline: 0.75rem;
package/components/slider.css CHANGED
@@ -1,120 +1,129 @@
1
- .slex-slider-container,
2
- .slex-slider-field {
3
- display: flex;
4
- flex-direction: column;
5
- gap: 0.5rem;
6
- width: 100%;
7
- }
8
-
9
- .slex-slider-field {
10
- padding: 0.25rem 0;
11
- }
12
-
1
+ .slex-slider-container,
2
+ .slex-slider-field {
3
+ display: flex;
4
+ flex-direction: column;
5
+ gap: 0.5rem;
6
+ width: 100%;
7
+ }
8
+
9
+ .slex-slider-field {
10
+ padding: 0.25rem 0;
11
+ }
12
+
13
13
  .slex-slider-label {
14
- display: flex;
15
- align-items: center;
16
- justify-content: space-between;
17
- color: var(--muted-foreground);
18
- font-size: 0.875rem;
19
- font-weight: 500;
20
- }
21
-
22
- .slex-slider-value {
23
- padding: 0.125rem 0.5rem;
24
- border: 1px solid var(--border);
25
- border-radius: calc(var(--radius) - 2px);
26
- background: var(--secondary);
27
- color: var(--secondary-foreground);
28
- font-family: var(--font-mono, "Geist Mono", "Noto Sans Mono", "Noto Sans Mono CJK SC", "SFMono-Regular", "Cascadia Code", Consolas, monospace);
29
- font-size: 0.875rem;
30
- font-weight: 600;
31
- }
32
-
33
- .slex-slider {
34
- box-sizing: border-box;
35
- width: 100%;
36
- height: 0.5rem;
37
- border-radius: 999px;
38
- -webkit-appearance: none;
39
- appearance: none;
40
- background: linear-gradient(
41
- to right,
42
- var(--primary) 0%,
43
- var(--primary) var(--slex-slider-progress, 0%),
44
- var(--secondary) var(--slex-slider-progress, 0%),
45
- var(--secondary) 100%
46
- );
47
- accent-color: var(--primary);
48
- cursor: pointer;
49
- transition: box-shadow 150ms ease, filter 150ms ease;
50
- }
51
-
52
- .slex-slider:hover {
53
- box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 8%, transparent);
54
- }
55
-
56
- .slex-slider:active {
57
- box-shadow: 0 0 0 5px color-mix(in oklab, var(--primary) 12%, transparent);
58
- }
59
-
60
- .slex-slider:focus-visible {
61
- outline: 2px solid var(--ring);
62
- outline-offset: 4px;
63
- }
64
-
65
- .slex-slider::-webkit-slider-thumb {
66
- width: 1rem;
67
- height: 1rem;
68
- border: 2px solid var(--primary);
69
- border-radius: 999px;
70
- background: var(--background) !important;
71
- box-shadow: 0 1px 2px color-mix(in oklab, var(--foreground) 14%, transparent);
72
- -webkit-appearance: none;
73
- appearance: none;
74
- transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease, transform 120ms ease;
75
- }
76
-
77
- .slex-slider::-moz-range-thumb {
78
- width: 1rem;
79
- height: 1rem;
80
- border: 2px solid var(--primary);
81
- border-radius: 999px;
82
- background: var(--background) !important;
83
- box-shadow: 0 1px 2px color-mix(in oklab, var(--foreground) 14%, transparent);
84
- transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease, transform 120ms ease;
85
- }
86
-
87
- .slex-slider:hover::-webkit-slider-thumb {
88
- box-shadow: 0 0 0 5px color-mix(in oklab, var(--primary) 12%, transparent);
89
- transform: scale(1.06);
90
- }
91
-
92
- .slex-slider:hover::-moz-range-thumb {
93
- box-shadow: 0 0 0 5px color-mix(in oklab, var(--primary) 12%, transparent);
94
- transform: scale(1.06);
95
- }
96
-
97
- .slex-slider:active::-webkit-slider-thumb {
98
- box-shadow: 0 0 0 6px color-mix(in oklab, var(--primary) 16%, transparent);
99
- transform: scale(1.12);
100
- }
101
-
102
- .slex-slider:active::-moz-range-thumb {
103
- box-shadow: 0 0 0 6px color-mix(in oklab, var(--primary) 16%, transparent);
104
- transform: scale(1.12);
105
- }
106
-
107
- .slex-slider::-moz-range-track {
108
- height: 0.5rem;
109
- border: 0;
110
- border-radius: 999px;
111
- background: var(--secondary);
112
- }
113
-
114
- .slex-slider::-moz-range-progress {
115
- height: 0.5rem;
116
- border-radius: 999px;
117
- background: var(--primary);
14
+ display: flex;
15
+ align-items: center;
16
+ justify-content: space-between;
17
+ color: var(--muted-foreground);
18
+ font-size: 0.875rem;
19
+ font-weight: 500;
20
+ }
21
+
22
+ .slex-slider-value {
23
+ padding: 0.125rem 0.5rem;
24
+ border: 1px solid var(--border);
25
+ border-radius: calc(var(--radius) - 2px);
26
+ background: var(--secondary);
27
+ color: var(--secondary-foreground);
28
+ font-family: var(--font-mono, "Geist Mono", "Noto Sans Mono", "Noto Sans Mono CJK SC", "SFMono-Regular", "Cascadia Code", Consolas, monospace);
29
+ font-size: 0.875rem;
30
+ font-weight: 600;
31
+ }
32
+
33
+ .slex-slider {
34
+ box-sizing: border-box;
35
+ width: 100%;
36
+ height: 1rem;
37
+ padding: 0;
38
+ border: 0;
39
+ border-radius: 999px;
40
+ -webkit-appearance: none;
41
+ appearance: none;
42
+ background: transparent;
43
+ accent-color: var(--primary);
44
+ cursor: pointer;
45
+ overflow: visible;
46
+ transition: box-shadow 150ms ease, filter 150ms ease;
47
+ }
48
+
49
+ .slex-slider:focus-visible {
50
+ outline: 2px solid var(--ring);
51
+ outline-offset: 4px;
52
+ }
53
+
54
+ .slex-slider::-webkit-slider-thumb {
55
+ box-sizing: border-box;
56
+ width: 1rem;
57
+ height: 1rem;
58
+ margin-top: -0.25rem;
59
+ border: 2px solid var(--primary);
60
+ border-radius: 999px;
61
+ background-color: var(--background);
62
+ background-clip: padding-box;
63
+ box-shadow: 0 1px 2px color-mix(in oklab, var(--foreground) 14%, transparent);
64
+ -webkit-appearance: none;
65
+ appearance: none;
66
+ transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease, transform 120ms ease;
67
+ }
68
+
69
+ .slex-slider::-webkit-slider-runnable-track {
70
+ box-sizing: border-box;
71
+ width: 100%;
72
+ height: 0.5rem;
73
+ border: 0;
74
+ border-radius: 999px;
75
+ background: linear-gradient(
76
+ to right,
77
+ var(--primary) 0%,
78
+ var(--primary) var(--slex-slider-progress, 0%),
79
+ var(--secondary) var(--slex-slider-progress, 0%),
80
+ var(--secondary) 100%
81
+ );
82
+ }
83
+
84
+ .slex-slider::-moz-range-thumb {
85
+ box-sizing: border-box;
86
+ width: 1rem;
87
+ height: 1rem;
88
+ border: 2px solid var(--primary);
89
+ border-radius: 999px;
90
+ background-color: var(--background);
91
+ background-clip: padding-box;
92
+ box-shadow: 0 1px 2px color-mix(in oklab, var(--foreground) 14%, transparent);
93
+ transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease, transform 120ms ease;
94
+ }
95
+
96
+ .slex-slider:hover::-webkit-slider-thumb {
97
+ box-shadow: 0 0 0 5px color-mix(in oklab, var(--primary) 12%, transparent);
98
+ transform: scale(1.06);
99
+ }
100
+
101
+ .slex-slider:hover::-moz-range-thumb {
102
+ box-shadow: 0 0 0 5px color-mix(in oklab, var(--primary) 12%, transparent);
103
+ transform: scale(1.06);
104
+ }
105
+
106
+ .slex-slider:active::-webkit-slider-thumb {
107
+ box-shadow: 0 0 0 6px color-mix(in oklab, var(--primary) 16%, transparent);
108
+ transform: scale(1.12);
109
+ }
110
+
111
+ .slex-slider:active::-moz-range-thumb {
112
+ box-shadow: 0 0 0 6px color-mix(in oklab, var(--primary) 16%, transparent);
113
+ transform: scale(1.12);
114
+ }
115
+
116
+ .slex-slider::-moz-range-track {
117
+ height: 0.5rem;
118
+ border: 0;
119
+ border-radius: 999px;
120
+ background: var(--secondary);
121
+ }
122
+
123
+ .slex-slider::-moz-range-progress {
124
+ height: 0.5rem;
125
+ border-radius: 999px;
126
+ background: var(--primary);
118
127
  }
119
128
 
120
129
  .slex-slider-label-text {
package/components/submit.css CHANGED
@@ -1,9 +1,9 @@
1
- .slex-submit-bar {
2
- display: flex;
3
- align-items: center;
4
- justify-content: flex-end;
5
- gap: 0.75rem;
6
- flex-wrap: wrap;
7
- padding-top: 0.75rem;
8
- border-top: 1px solid var(--border);
1
+ .slex-submit-bar {
2
+ display: flex;
3
+ align-items: center;
4
+ justify-content: flex-end;
5
+ gap: 0.75rem;
6
+ flex-wrap: wrap;
7
+ padding-top: 0.75rem;
8
+ border-top: 1px solid var(--border);
9
9
  }