@streamscloud/kit 0.21.2 → 0.22.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.
|
@@ -186,6 +186,7 @@ DatePicker — single-day calendar picker built on Floating UI for positioning.
|
|
|
186
186
|
| `--sc-kit--date-picker--background` | Trigger background | `var(--sc-kit--color--bg--field)` |
|
|
187
187
|
| `--sc-kit--date-picker--background--disabled` | Trigger background when disabled | `var(--sc-kit--color--bg--field-alt)` |
|
|
188
188
|
| `--sc-kit--date-picker--border-color` | Trigger border color | `var(--sc-kit--color--border--field)` |
|
|
189
|
+
| `--sc-kit--date-picker--border-color--hover` | Trigger border color on hover | `var(--sc-kit--color--border--strong)` |
|
|
189
190
|
| `--sc-kit--date-picker--border-color--error` | Trigger border color in error state | `var(--sc-kit--color--danger)` |
|
|
190
191
|
| `--sc-kit--date-picker--border-radius` | Trigger border radius | per size — `sm` 4px, `md`/`lg` 6px |
|
|
191
192
|
| `--sc-kit--date-picker--underline-color` | Inset bottom-underline indicator (transparent default, accent when open, danger on error) | `transparent` |
|
|
@@ -206,6 +207,7 @@ DatePicker — single-day calendar picker built on Floating UI for positioning.
|
|
|
206
207
|
--_dp--background: var(--sc-kit--date-picker--background, var(--sc-kit--color--bg--field));
|
|
207
208
|
--_dp--background-disabled: var(--sc-kit--date-picker--background--disabled, var(--sc-kit--color--bg--field-alt));
|
|
208
209
|
--_dp--border-color: var(--sc-kit--date-picker--border-color, var(--sc-kit--color--border--field));
|
|
210
|
+
--_dp--border-color-hover: var(--sc-kit--date-picker--border-color--hover, var(--sc-kit--color--border--strong));
|
|
209
211
|
--_dp--border-color-error: var(--sc-kit--date-picker--border-color--error, var(--sc-kit--color--danger));
|
|
210
212
|
--_dp--border-radius: var(--sc-kit--date-picker--border-radius, var(--_dp--size-border-radius, var(--sc-kit--field--border-radius--md)));
|
|
211
213
|
--_dp--underline-color: var(--sc-kit--date-picker--underline-color, transparent);
|
|
@@ -252,7 +254,11 @@ DatePicker — single-day calendar picker built on Floating UI for positioning.
|
|
|
252
254
|
--_dp--size-icon-size: var(--sc-kit--field--icon--size--lg);
|
|
253
255
|
--_dp--size-border-radius: var(--sc-kit--field--border-radius--md);
|
|
254
256
|
}
|
|
257
|
+
.date-picker:where(:hover:not(:focus-within)) {
|
|
258
|
+
--sc-kit--date-picker--border-color: var(--_dp--border-color-hover);
|
|
259
|
+
}
|
|
255
260
|
.date-picker--open {
|
|
261
|
+
--sc-kit--date-picker--border-color: unset;
|
|
256
262
|
--sc-kit--date-picker--underline-color: var(--sc-kit--color--accent);
|
|
257
263
|
}
|
|
258
264
|
.date-picker--error {
|
|
@@ -260,6 +266,7 @@ DatePicker — single-day calendar picker built on Floating UI for positioning.
|
|
|
260
266
|
--sc-kit--date-picker--underline-color: var(--sc-kit--color--danger);
|
|
261
267
|
}
|
|
262
268
|
.date-picker--disabled, .date-picker--readonly, .date-picker--inert {
|
|
269
|
+
--sc-kit--date-picker--border-color: unset;
|
|
263
270
|
--sc-kit--date-picker--underline-color: unset;
|
|
264
271
|
--_--input-affordance--opacity: 0;
|
|
265
272
|
--_--input-affordance--scale: 0;
|
|
@@ -68,6 +68,7 @@ type Props = ClearableProps | RequiredProps;
|
|
|
68
68
|
* | `--sc-kit--date-picker--background` | Trigger background | `var(--sc-kit--color--bg--field)` |
|
|
69
69
|
* | `--sc-kit--date-picker--background--disabled` | Trigger background when disabled | `var(--sc-kit--color--bg--field-alt)` |
|
|
70
70
|
* | `--sc-kit--date-picker--border-color` | Trigger border color | `var(--sc-kit--color--border--field)` |
|
|
71
|
+
* | `--sc-kit--date-picker--border-color--hover` | Trigger border color on hover | `var(--sc-kit--color--border--strong)` |
|
|
71
72
|
* | `--sc-kit--date-picker--border-color--error` | Trigger border color in error state | `var(--sc-kit--color--danger)` |
|
|
72
73
|
* | `--sc-kit--date-picker--border-radius` | Trigger border radius | per size — `sm` 4px, `md`/`lg` 6px |
|
|
73
74
|
* | `--sc-kit--date-picker--underline-color` | Inset bottom-underline indicator (transparent default, accent when open, danger on error) | `transparent` |
|