@auronui/styles 1.0.21 → 1.0.22

package/components/color-slider.css

@@ -53,17 +53,9 @@
   }
 
   .color-slider__track {
-    @apply relative rounded-full;
+    @apply relative;
 
     grid-area: track;
-    /* Edge cap pseudo-elements */
-    &::before,
-    &::after {
-      content: "";
-      position: absolute;
-      z-index: 0;
-      pointer-events: none;
-    }
   }
 
   .color-slider__thumb {
@@ -118,44 +110,12 @@
     flex-direction: column;
 
     .color-slider__track {
-      @apply h-5 justify-self-center rounded-none;
-      width: calc(100% - 1.25rem);
+      @apply h-5 w-full;
 
       /* Default border for visibility against similar backgrounds */
       box-shadow:
         inset 0 1px 0 0 rgba(0, 0, 0, 0.1),
         inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
-
-      /* Edge caps for horizontal orientation */
-      &::before,
-      &::after {
-        @apply top-0 h-full;
-        width: 0.625rem; /* Half thumb width + 2px gap */
-      }
-
-      &::before {
-        left: -0.625rem;
-        border-top-left-radius: 999px;
-        border-bottom-left-radius: 999px;
-        box-shadow:
-          inset 1px 0 0 0 rgba(0, 0, 0, 0.1),
-          inset 0 1px 0 0 rgba(0, 0, 0, 0.1),
-          inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
-        background:
-          linear-gradient(var(--track-start-color, transparent)),
-          repeating-conic-gradient(#efefef 0% 25%, #f7f7f7 0% 50%) 50% / 16px 16px;
-      }
-
-      &::after {
-        right: -0.625rem;
-        border-top-right-radius: 999px;
-        border-bottom-right-radius: 999px;
-        box-shadow:
-          inset -1px 0 0 0 rgba(0, 0, 0, 0.1),
-          inset 0 1px 0 0 rgba(0, 0, 0, 0.1),
-          inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
-        background-color: var(--track-end-color, transparent);
-      }
     }
 
     .color-slider__thumb {
@@ -213,46 +173,12 @@
     }
 
     .color-slider__track {
-      @apply w-5 justify-self-center rounded-none;
-      height: calc(100% - 1.25rem);
+      @apply w-5 h-full justify-self-center;
 
       /* Left and right borders for vertical track */
       box-shadow:
         inset 1px 0 0 0 rgba(0, 0, 0, 0.1),
         inset -1px 0 0 0 rgba(0, 0, 0, 0.1);
-
-      /* Edge caps for vertical orientation */
-      &::before,
-      &::after {
-        @apply left-0 w-full;
-        height: 0.625rem; /* Half thumb height + 2px gap */
-      }
-
-      &::before {
-        bottom: -0.625rem;
-        border-bottom-left-radius: 999px;
-        border-bottom-right-radius: 999px;
-        /* Left, right, and bottom borders for bottom cap */
-        box-shadow:
-          inset 1px 0 0 0 rgba(0, 0, 0, 0.1),
-          inset -1px 0 0 0 rgba(0, 0, 0, 0.1),
-          inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
-        background:
-          linear-gradient(var(--track-start-color, transparent)),
-          repeating-conic-gradient(#efefef 0% 25%, #f7f7f7 0% 50%) 50% / 16px 16px;
-      }
-
-      &::after {
-        top: -0.625rem;
-        border-top-left-radius: 999px;
-        border-top-right-radius: 999px;
-        /* Left, right, and top borders for top cap */
-        box-shadow:
-          inset 1px 0 0 0 rgba(0, 0, 0, 0.1),
-          inset -1px 0 0 0 rgba(0, 0, 0, 0.1),
-          inset 0 1px 0 0 rgba(0, 0, 0, 0.1);
-        background-color: var(--track-end-color, transparent);
-      }
     }
 
     .color-slider__thumb {

package/components/progress-bar.css

@@ -35,8 +35,10 @@
   }
 
   .progress-bar__fill {
-    @apply absolute top-0 left-0 h-full rounded-full w-full;
+    @apply absolute top-0 left-0 h-full rounded-full;
 
+    /* Width is driven by the CSS custom property set from JS */
+    width: var(--progress-bar-value, 0%);
     background-color: var(--progress-bar-fill);
 
     /**
@@ -47,9 +49,10 @@
     @apply motion-reduce:transition-none;
   }
 
-  /* Indeterminate state - when no aria-valuenow is set */
-  .progress-bar__fill[data-state="indeterminate"] {
-    @apply w-2/5;
+  /* Indeterminate state — Reka sets data-state="indeterminate" when modelValue is null */
+  .progress-bar__fill[data-state="indeterminate"],
+  .progress-bar__fill--indeterminate {
+    width: 40%;
 
     animation: progress-bar-indeterminate 1.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
 
@@ -109,6 +112,14 @@
   --progress-bar-fill: var(--color-default-foreground);
 }
 
+.progress-bar--primary {
+  --progress-bar-fill: var(--color-primary);
+}
+
+.progress-bar--secondary {
+  --progress-bar-fill: var(--color-secondary);
+}
+
 .progress-bar--accent {
   --progress-bar-fill: var(--color-accent);
 }

package/components/slider.css

@@ -27,7 +27,7 @@
   }
 
   .slider__fill {
-    @apply pointer-events-none absolute rounded-full bg-accent;
+    @apply pointer-events-none absolute bg-accent;
   }
 
   .slider__thumb {
@@ -91,7 +91,8 @@
     flex-direction: column;
 
     .slider__track {
-      @apply h-5 w-full overflow-visible;
+      /* overflow-hidden clips the fill to the rounded track shape; thumb is a sibling so it is unaffected */
+      @apply h-5 w-full overflow-hidden;
     }
 
     .slider__fill {
@@ -132,7 +133,7 @@
     }
 
     .slider__track {
-      @apply h-full w-5 overflow-visible;
+      @apply h-full w-5 overflow-hidden;
       justify-self: center;
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@auronui/styles",
-  "version": "1.0.21",
+  "version": "1.0.22",
   "description": "Auron core styles — adapted for Reka UI",
   "type": "module",
   "license": "MIT",

package/src/components/progress-bar/progress-bar.styles.ts

@@ -17,30 +17,30 @@ export const progressBarVariants = tv({
     label: "progress-bar__label text-sm font-medium text-foreground",
     value: "progress-bar__value text-sm font-medium text-foreground",
     track: "progress-bar__track",
-    indicator: "progress-bar__indicator transition-transform duration-300 ease-out",
+    indicator: "progress-bar__fill",
   },
   variants: {
     color: {
       default: {
-        indicator: "bg-default-400 progress-bar--default",
+        base: "progress-bar--default",
       },
       primary: {
-        indicator: "bg-primary progress-bar--primary",
+        base: "progress-bar--primary",
       },
       secondary: {
-        indicator: "bg-secondary progress-bar--secondary",
+        base: "progress-bar--secondary",
       },
       success: {
-        indicator: "bg-success progress-bar--success",
+        base: "progress-bar--success",
       },
       warning: {
-        indicator: "bg-warning progress-bar--warning",
+        base: "progress-bar--warning",
       },
       danger: {
-        indicator: "bg-danger progress-bar--danger",
+        base: "progress-bar--danger",
       },
       accent: {
-        indicator: "bg-primary progress-bar--accent",
+        base: "progress-bar--accent",
       },
     },
     size: {
@@ -78,12 +78,13 @@ export const progressBarVariants = tv({
     },
     isStriped: {
       true: {
-        indicator: "progress-bar__indicator--striped",
+        indicator: "progress-bar__fill--striped",
       },
     },
     isIndeterminate: {
       true: {
-        indicator: "progress-bar__indicator--indeterminate animate-indeterminate",
+        // data-state="indeterminate" (set by Reka) drives the CSS animation
+        indicator: "progress-bar__fill--indeterminate",
       },
     },
     isDisabled: {

package/themes/default/variables.css

@@ -61,6 +61,12 @@
     --default: oklch(94% 0.001 286.375);
     --default-foreground: var(--eclipse);
 
+    --primary: oklch(0.55 0.2 262);
+    --primary-foreground: var(--snow);
+
+    --secondary: oklch(0.55 0.22 305);
+    --secondary-foreground: var(--snow);
+
     --accent: oklch(0.6204 0.195 253.83);
     --accent-foreground: var(--snow);
 

package/themes/shared/theme.css

@@ -17,6 +17,12 @@
 
   --color-muted: var(--muted);
 
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+
   --color-accent: var(--accent);
   --color-accent-foreground: var(--accent-foreground);