@ropav/styles 0.5.0 → 0.6.0

package/dist/components/virtualizer.css

@@ -35,7 +35,15 @@
 
 .virtualizer__scrollbar-thumb {
   @apply absolute rounded-full;
-  background-color: var(--scrollbar-thumb);
+
+  /* The thumb's fill, per state. Three states paint it and one declaration cannot tell them
+   * apart, so each reads its own. Both lit values are an alpha rather than a neutral, so the
+   * thumb stays visible over whatever the scroller happens to be showing. */
+  --virtualizer-scrollbar-thumb-bg: var(--scrollbar-thumb);
+  --virtualizer-scrollbar-thumb-bg-hover: color-mix(in oklch, var(--foreground) 25%, transparent);
+  --virtualizer-scrollbar-thumb-bg-pressed: color-mix(in oklch, var(--foreground) 35%, transparent);
+
+  background-color: var(--virtualizer-scrollbar-thumb-bg);
 
   &[data-orientation="vertical"] {
     inset-inline: 2px;
@@ -48,12 +56,12 @@
   @media (hover: hover) {
     &:hover,
     &[data-hovered="true"] {
-      background-color: color-mix(in oklch, var(--foreground) 25%, transparent);
+      background-color: var(--virtualizer-scrollbar-thumb-bg-hover);
     }
   }
 
   &[data-pressed="true"] {
-    background-color: color-mix(in oklch, var(--foreground) 35%, transparent);
+    background-color: var(--virtualizer-scrollbar-thumb-bg-pressed);
   }
 
   /* Forced Colors Mode replaces the translucent fill with the canvas, and the thumb vanishes. */

package/dist/index.js

@@ -32,6 +32,7 @@ import { descriptionVariants } from "./components/description/description.styles
 import { drawerVariants } from "./components/drawer/drawer.styles.js";
 import { disclosureVariants } from "./components/disclosure/disclosure.styles.js";
 import { disclosureGroupVariants } from "./components/disclosure-group/disclosure-group.styles.js";
+import { dropZoneVariants } from "./components/drop-zone/drop-zone.styles.js";
 import { dropdownVariants } from "./components/dropdown/dropdown.styles.js";
 import { emptyStateVariants } from "./components/empty-state/empty-state.styles.js";
 import { errorMessageVariants } from "./components/error-message/error-message.styles.js";
@@ -87,4 +88,4 @@ import { toolbarVariants } from "./components/toolbar/toolbar.styles.js";
 import { tooltipVariants } from "./components/tooltip/tooltip.styles.js";
 import { virtualizerVariants } from "./components/virtualizer/virtualizer.styles.js";
 import { cn, tv } from "tailwind-variants";
-export { accordionVariants, alertDialogVariants, alertVariants, ariaDisabledClasses, autocompleteVariants, avatarVariants, badgeVariants, breadcrumbsVariants, buttonGroupVariants, buttonVariants, calendarVariants, calendarYearPickerVariants, cardVariants, checkboxGroupVariants, checkboxVariants, chipVariants, closeButtonVariants, cn, colorAreaVariants, colorFieldVariants, colorInputGroupVariants, colorPickerVariants, colorSliderVariants, colorSwatchPickerVariants, colorSwatchVariants, comboBoxVariants, dateFieldVariants, dateInputGroupVariants, datePickerVariants, dateRangePickerVariants, descriptionVariants, disabledClasses, disclosureGroupVariants, disclosureVariants, drawerVariants, dropdownVariants, emptyStateVariants, errorMessageVariants, fieldErrorVariants, fieldsetVariants, focusRingClasses, headerVariants, inputGroupVariants, inputOTPVariants, inputVariants, kbdVariants, labelVariants, linkVariants, listboxItemVariants, listboxSectionVariants, listboxVariants, menuItemVariants, menuSectionVariants, menuVariants, meterVariants, modalVariants, numberFieldVariants, paginationVariants, popoverVariants, progressBarVariants, progressCircleVariants, radioGroupVariants, radioVariants, rangeCalendarVariants, scrollShadowVariants, searchFieldVariants, segmentedControlVariants, selectVariants, separatorVariants, sidebarVariants, skeletonVariants, sliderVariants, spinnerVariants, splitterVariants, surfaceVariants, switchGroupVariants, switchVariants, tableVariants, tabsVariants, tagGroupVariants, tagVariants, textAreaVariants, textFieldVariants, timeFieldVariants, toastVariants, toggleButtonGroupVariants, toggleButtonVariants, toolbarVariants, tooltipVariants, tv, typographyVariants, virtualizerVariants };
+export { accordionVariants, alertDialogVariants, alertVariants, ariaDisabledClasses, autocompleteVariants, avatarVariants, badgeVariants, breadcrumbsVariants, buttonGroupVariants, buttonVariants, calendarVariants, calendarYearPickerVariants, cardVariants, checkboxGroupVariants, checkboxVariants, chipVariants, closeButtonVariants, cn, colorAreaVariants, colorFieldVariants, colorInputGroupVariants, colorPickerVariants, colorSliderVariants, colorSwatchPickerVariants, colorSwatchVariants, comboBoxVariants, dateFieldVariants, dateInputGroupVariants, datePickerVariants, dateRangePickerVariants, descriptionVariants, disabledClasses, disclosureGroupVariants, disclosureVariants, drawerVariants, dropZoneVariants, dropdownVariants, emptyStateVariants, errorMessageVariants, fieldErrorVariants, fieldsetVariants, focusRingClasses, headerVariants, inputGroupVariants, inputOTPVariants, inputVariants, kbdVariants, labelVariants, linkVariants, listboxItemVariants, listboxSectionVariants, listboxVariants, menuItemVariants, menuSectionVariants, menuVariants, meterVariants, modalVariants, numberFieldVariants, paginationVariants, popoverVariants, progressBarVariants, progressCircleVariants, radioGroupVariants, radioVariants, rangeCalendarVariants, scrollShadowVariants, searchFieldVariants, segmentedControlVariants, selectVariants, separatorVariants, sidebarVariants, skeletonVariants, sliderVariants, spinnerVariants, splitterVariants, surfaceVariants, switchGroupVariants, switchVariants, tableVariants, tabsVariants, tagGroupVariants, tagVariants, textAreaVariants, textFieldVariants, timeFieldVariants, toastVariants, toggleButtonGroupVariants, toggleButtonVariants, toolbarVariants, tooltipVariants, tv, typographyVariants, virtualizerVariants };