@slexkit/theme-shadcn 0.3.2 → 0.3.3

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 (5) hide show
  1. package/components/input.css +85 -13
  2. package/components/slider.css +56 -13
  3. package/components/text-input.css +29 -0
  4. package/package.json +1 -1
  5. package/style.css +85 -13
package/components/input.css CHANGED
@@ -161,22 +161,71 @@
161
161
  font-weight: 600;
162
162
  }
163
163
 
164
+ .slex-slider-control {
165
+ position: relative;
166
+ box-sizing: border-box;
167
+ width: 100%;
168
+ height: 1rem;
169
+ }
170
+
171
+ .slex-slider-track {
172
+ position: absolute;
173
+ inset-inline: 0;
174
+ top: 50%;
175
+ height: 0.5rem;
176
+ border-radius: 999px;
177
+ background: linear-gradient(
178
+ to right,
179
+ var(--primary) 0%,
180
+ var(--primary) var(--slex-slider-progress, 0%),
181
+ var(--secondary) var(--slex-slider-progress, 0%),
182
+ var(--secondary) 100%
183
+ );
184
+ pointer-events: none;
185
+ transform: translateY(-50%);
186
+ }
187
+
164
188
  .slex-slider {
189
+ position: relative;
190
+ z-index: 1;
165
191
  box-sizing: border-box;
192
+ display: block;
166
193
  width: 100%;
167
194
  height: 1rem;
195
+ margin: 0;
168
196
  padding: 0;
169
197
  border: 0;
170
198
  border-radius: 999px;
171
199
  -webkit-appearance: none;
172
200
  appearance: none;
173
201
  background: transparent;
202
+ color: transparent;
174
203
  accent-color: var(--primary);
175
204
  cursor: pointer;
176
205
  overflow: visible;
177
206
  transition: box-shadow 150ms ease, filter 150ms ease;
178
207
  }
179
208
 
209
+ .slexkit-root .slex-slider-control input.slex-slider {
210
+ position: relative;
211
+ z-index: 1;
212
+ box-sizing: border-box;
213
+ display: block;
214
+ width: 100%;
215
+ height: 1rem;
216
+ min-height: 0;
217
+ margin: 0;
218
+ padding: 0;
219
+ border: 0;
220
+ border-radius: 999px;
221
+ box-shadow: none;
222
+ background: transparent;
223
+ color: transparent;
224
+ -webkit-appearance: none;
225
+ appearance: none;
226
+ overflow: visible;
227
+ }
228
+
180
229
  .slex-slider:focus-visible {
181
230
  outline: 2px solid var(--ring);
182
231
  outline-offset: 4px;
@@ -186,7 +235,7 @@
186
235
  box-sizing: border-box;
187
236
  width: 1rem;
188
237
  height: 1rem;
189
- margin-top: -0.25rem;
238
+ margin-top: 0;
190
239
  border: 2px solid var(--primary);
191
240
  border-radius: 999px;
192
241
  background-color: var(--background);
@@ -200,16 +249,10 @@
200
249
  .slex-slider::-webkit-slider-runnable-track {
201
250
  box-sizing: border-box;
202
251
  width: 100%;
203
- height: 0.5rem;
252
+ height: 1rem;
204
253
  border: 0;
205
254
  border-radius: 999px;
206
- background: linear-gradient(
207
- to right,
208
- var(--primary) 0%,
209
- var(--primary) var(--slex-slider-progress, 0%),
210
- var(--secondary) var(--slex-slider-progress, 0%),
211
- var(--secondary) 100%
212
- );
255
+ background: transparent;
213
256
  }
214
257
 
215
258
  .slex-slider::-moz-range-thumb {
@@ -245,16 +288,16 @@
245
288
  }
246
289
 
247
290
  .slex-slider::-moz-range-track {
248
- height: 0.5rem;
291
+ height: 1rem;
249
292
  border: 0;
250
293
  border-radius: 999px;
251
- background: var(--secondary);
294
+ background: transparent;
252
295
  }
253
296
 
254
297
  .slex-slider::-moz-range-progress {
255
- height: 0.5rem;
298
+ height: 1rem;
256
299
  border-radius: 999px;
257
- background: var(--primary);
300
+ background: transparent;
258
301
  }
259
302
 
260
303
  .slex-slider-label-text {
@@ -441,11 +484,40 @@
441
484
  transition: border-color 150ms ease, box-shadow 150ms ease;
442
485
  }
443
486
 
487
+ .slexkit-root .slex-input-control input.slex-input {
488
+ box-sizing: border-box;
489
+ display: block;
490
+ flex: 1 1 auto;
491
+ width: 100%;
492
+ min-width: 0;
493
+ min-height: 2.5625rem;
494
+ height: auto;
495
+ margin: 0;
496
+ padding: 0.5rem 0.75rem;
497
+ border: 1px solid var(--input);
498
+ border-radius: var(--radius);
499
+ box-shadow: none;
500
+ background: var(--background);
501
+ background-clip: padding-box;
502
+ color: var(--foreground);
503
+ font-family: inherit;
504
+ font-size: 0.875rem;
505
+ line-height: 1.5;
506
+ outline: none;
507
+ -webkit-appearance: none;
508
+ appearance: none;
509
+ }
510
+
444
511
  .slex-input-control[data-has-unit="true"] .slex-input {
445
512
  border-top-right-radius: 0;
446
513
  border-bottom-right-radius: 0;
447
514
  }
448
515
 
516
+ .slexkit-root .slex-input-control[data-has-unit="true"] input.slex-input {
517
+ border-top-right-radius: 0;
518
+ border-bottom-right-radius: 0;
519
+ }
520
+
449
521
  .slex-input-unit {
450
522
  box-sizing: border-box;
451
523
  display: inline-flex;
package/components/slider.css CHANGED
@@ -30,22 +30,71 @@
30
30
  font-weight: 600;
31
31
  }
32
32
 
33
+ .slex-slider-control {
34
+ position: relative;
35
+ box-sizing: border-box;
36
+ width: 100%;
37
+ height: 1rem;
38
+ }
39
+
40
+ .slex-slider-track {
41
+ position: absolute;
42
+ inset-inline: 0;
43
+ top: 50%;
44
+ height: 0.5rem;
45
+ border-radius: 999px;
46
+ background: linear-gradient(
47
+ to right,
48
+ var(--primary) 0%,
49
+ var(--primary) var(--slex-slider-progress, 0%),
50
+ var(--secondary) var(--slex-slider-progress, 0%),
51
+ var(--secondary) 100%
52
+ );
53
+ pointer-events: none;
54
+ transform: translateY(-50%);
55
+ }
56
+
33
57
  .slex-slider {
58
+ position: relative;
59
+ z-index: 1;
34
60
  box-sizing: border-box;
61
+ display: block;
35
62
  width: 100%;
36
63
  height: 1rem;
64
+ margin: 0;
37
65
  padding: 0;
38
66
  border: 0;
39
67
  border-radius: 999px;
40
68
  -webkit-appearance: none;
41
69
  appearance: none;
42
70
  background: transparent;
71
+ color: transparent;
43
72
  accent-color: var(--primary);
44
73
  cursor: pointer;
45
74
  overflow: visible;
46
75
  transition: box-shadow 150ms ease, filter 150ms ease;
47
76
  }
48
77
 
78
+ .slexkit-root .slex-slider-control input.slex-slider {
79
+ position: relative;
80
+ z-index: 1;
81
+ box-sizing: border-box;
82
+ display: block;
83
+ width: 100%;
84
+ height: 1rem;
85
+ min-height: 0;
86
+ margin: 0;
87
+ padding: 0;
88
+ border: 0;
89
+ border-radius: 999px;
90
+ box-shadow: none;
91
+ background: transparent;
92
+ color: transparent;
93
+ -webkit-appearance: none;
94
+ appearance: none;
95
+ overflow: visible;
96
+ }
97
+
49
98
  .slex-slider:focus-visible {
50
99
  outline: 2px solid var(--ring);
51
100
  outline-offset: 4px;
@@ -55,7 +104,7 @@
55
104
  box-sizing: border-box;
56
105
  width: 1rem;
57
106
  height: 1rem;
58
- margin-top: -0.25rem;
107
+ margin-top: 0;
59
108
  border: 2px solid var(--primary);
60
109
  border-radius: 999px;
61
110
  background-color: var(--background);
@@ -69,16 +118,10 @@
69
118
  .slex-slider::-webkit-slider-runnable-track {
70
119
  box-sizing: border-box;
71
120
  width: 100%;
72
- height: 0.5rem;
121
+ height: 1rem;
73
122
  border: 0;
74
123
  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
- );
124
+ background: transparent;
82
125
  }
83
126
 
84
127
  .slex-slider::-moz-range-thumb {
@@ -114,16 +157,16 @@
114
157
  }
115
158
 
116
159
  .slex-slider::-moz-range-track {
117
- height: 0.5rem;
160
+ height: 1rem;
118
161
  border: 0;
119
162
  border-radius: 999px;
120
- background: var(--secondary);
163
+ background: transparent;
121
164
  }
122
165
 
123
166
  .slex-slider::-moz-range-progress {
124
- height: 0.5rem;
167
+ height: 1rem;
125
168
  border-radius: 999px;
126
- background: var(--primary);
169
+ background: transparent;
127
170
  }
128
171
 
129
172
  .slex-slider-label-text {
package/components/text-input.css CHANGED
@@ -56,11 +56,40 @@
56
56
  transition: border-color 150ms ease, box-shadow 150ms ease;
57
57
  }
58
58
 
59
+ .slexkit-root .slex-input-control input.slex-input {
60
+ box-sizing: border-box;
61
+ display: block;
62
+ flex: 1 1 auto;
63
+ width: 100%;
64
+ min-width: 0;
65
+ min-height: 2.5625rem;
66
+ height: auto;
67
+ margin: 0;
68
+ padding: 0.5rem 0.75rem;
69
+ border: 1px solid var(--input);
70
+ border-radius: var(--radius);
71
+ box-shadow: none;
72
+ background: var(--background);
73
+ background-clip: padding-box;
74
+ color: var(--foreground);
75
+ font-family: inherit;
76
+ font-size: 0.875rem;
77
+ line-height: 1.5;
78
+ outline: none;
79
+ -webkit-appearance: none;
80
+ appearance: none;
81
+ }
82
+
59
83
  .slex-input-control[data-has-unit="true"] .slex-input {
60
84
  border-top-right-radius: 0;
61
85
  border-bottom-right-radius: 0;
62
86
  }
63
87
 
88
+ .slexkit-root .slex-input-control[data-has-unit="true"] input.slex-input {
89
+ border-top-right-radius: 0;
90
+ border-bottom-right-radius: 0;
91
+ }
92
+
64
93
  .slex-input-unit {
65
94
  box-sizing: border-box;
66
95
  display: inline-flex;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@slexkit/theme-shadcn",
3
- "version": "0.3.2",
3
+ "version": "0.3.3",
4
4
  "description": "Official shadcn-token theme CSS for SlexKit.",
5
5
  "author": "SlexKit contributors",
6
6
  "type": "module",
package/style.css CHANGED
@@ -3160,22 +3160,71 @@ color-scheme: dark;
3160
3160
  font-weight: 600;
3161
3161
  }
3162
3162
 
3163
+ .slex-slider-control {
3164
+ position: relative;
3165
+ box-sizing: border-box;
3166
+ width: 100%;
3167
+ height: 1rem;
3168
+ }
3169
+
3170
+ .slex-slider-track {
3171
+ position: absolute;
3172
+ inset-inline: 0;
3173
+ top: 50%;
3174
+ height: 0.5rem;
3175
+ border-radius: 999px;
3176
+ background: linear-gradient(
3177
+ to right,
3178
+ var(--primary) 0%,
3179
+ var(--primary) var(--slex-slider-progress, 0%),
3180
+ var(--secondary) var(--slex-slider-progress, 0%),
3181
+ var(--secondary) 100%
3182
+ );
3183
+ pointer-events: none;
3184
+ transform: translateY(-50%);
3185
+ }
3186
+
3163
3187
  .slex-slider {
3188
+ position: relative;
3189
+ z-index: 1;
3164
3190
  box-sizing: border-box;
3191
+ display: block;
3165
3192
  width: 100%;
3166
3193
  height: 1rem;
3194
+ margin: 0;
3167
3195
  padding: 0;
3168
3196
  border: 0;
3169
3197
  border-radius: 999px;
3170
3198
  -webkit-appearance: none;
3171
3199
  appearance: none;
3172
3200
  background: transparent;
3201
+ color: transparent;
3173
3202
  accent-color: var(--primary);
3174
3203
  cursor: pointer;
3175
3204
  overflow: visible;
3176
3205
  transition: box-shadow 150ms ease, filter 150ms ease;
3177
3206
  }
3178
3207
 
3208
+ .slexkit-root .slex-slider-control input.slex-slider {
3209
+ position: relative;
3210
+ z-index: 1;
3211
+ box-sizing: border-box;
3212
+ display: block;
3213
+ width: 100%;
3214
+ height: 1rem;
3215
+ min-height: 0;
3216
+ margin: 0;
3217
+ padding: 0;
3218
+ border: 0;
3219
+ border-radius: 999px;
3220
+ box-shadow: none;
3221
+ background: transparent;
3222
+ color: transparent;
3223
+ -webkit-appearance: none;
3224
+ appearance: none;
3225
+ overflow: visible;
3226
+ }
3227
+
3179
3228
  .slex-slider:focus-visible {
3180
3229
  outline: 2px solid var(--ring);
3181
3230
  outline-offset: 4px;
@@ -3185,7 +3234,7 @@ color-scheme: dark;
3185
3234
  box-sizing: border-box;
3186
3235
  width: 1rem;
3187
3236
  height: 1rem;
3188
- margin-top: -0.25rem;
3237
+ margin-top: 0;
3189
3238
  border: 2px solid var(--primary);
3190
3239
  border-radius: 999px;
3191
3240
  background-color: var(--background);
@@ -3199,16 +3248,10 @@ color-scheme: dark;
3199
3248
  .slex-slider::-webkit-slider-runnable-track {
3200
3249
  box-sizing: border-box;
3201
3250
  width: 100%;
3202
- height: 0.5rem;
3251
+ height: 1rem;
3203
3252
  border: 0;
3204
3253
  border-radius: 999px;
3205
- background: linear-gradient(
3206
- to right,
3207
- var(--primary) 0%,
3208
- var(--primary) var(--slex-slider-progress, 0%),
3209
- var(--secondary) var(--slex-slider-progress, 0%),
3210
- var(--secondary) 100%
3211
- );
3254
+ background: transparent;
3212
3255
  }
3213
3256
 
3214
3257
  .slex-slider::-moz-range-thumb {
@@ -3244,16 +3287,16 @@ color-scheme: dark;
3244
3287
  }
3245
3288
 
3246
3289
  .slex-slider::-moz-range-track {
3247
- height: 0.5rem;
3290
+ height: 1rem;
3248
3291
  border: 0;
3249
3292
  border-radius: 999px;
3250
- background: var(--secondary);
3293
+ background: transparent;
3251
3294
  }
3252
3295
 
3253
3296
  .slex-slider::-moz-range-progress {
3254
- height: 0.5rem;
3297
+ height: 1rem;
3255
3298
  border-radius: 999px;
3256
- background: var(--primary);
3299
+ background: transparent;
3257
3300
  }
3258
3301
 
3259
3302
  .slex-slider-label-text {
@@ -3440,11 +3483,40 @@ color-scheme: dark;
3440
3483
  transition: border-color 150ms ease, box-shadow 150ms ease;
3441
3484
  }
3442
3485
 
3486
+ .slexkit-root .slex-input-control input.slex-input {
3487
+ box-sizing: border-box;
3488
+ display: block;
3489
+ flex: 1 1 auto;
3490
+ width: 100%;
3491
+ min-width: 0;
3492
+ min-height: 2.5625rem;
3493
+ height: auto;
3494
+ margin: 0;
3495
+ padding: 0.5rem 0.75rem;
3496
+ border: 1px solid var(--input);
3497
+ border-radius: var(--radius);
3498
+ box-shadow: none;
3499
+ background: var(--background);
3500
+ background-clip: padding-box;
3501
+ color: var(--foreground);
3502
+ font-family: inherit;
3503
+ font-size: 0.875rem;
3504
+ line-height: 1.5;
3505
+ outline: none;
3506
+ -webkit-appearance: none;
3507
+ appearance: none;
3508
+ }
3509
+
3443
3510
  .slex-input-control[data-has-unit="true"] .slex-input {
3444
3511
  border-top-right-radius: 0;
3445
3512
  border-bottom-right-radius: 0;
3446
3513
  }
3447
3514
 
3515
+ .slexkit-root .slex-input-control[data-has-unit="true"] input.slex-input {
3516
+ border-top-right-radius: 0;
3517
+ border-bottom-right-radius: 0;
3518
+ }
3519
+
3448
3520
  .slex-input-unit {
3449
3521
  box-sizing: border-box;
3450
3522
  display: inline-flex;