@adecore/ui 0.49.4 → 0.49.6

package/dist/Meter.js

@@ -37,7 +37,7 @@ export function Meter(t0) {
   const t6 = value === null ? min : Math.min(max, Math.max(min, value));
   let t7;
   if ($[5] !== className) {
-    t7 = clsx("relative h-1.5 rounded-full bg-surface-sunken", className);
+    t7 = clsx("relative h-1.5 rounded-full bg-track", className);
     $[5] = className;
     $[6] = t7;
   } else {

package/dist/theme.css

@@ -10,6 +10,7 @@
     --surface: #ffffff;
     --surface-raised: #ffffff;
     --surface-sunken: #ececef;
+    --track: rgb(0 0 0 / 0.09);
     /* A bar that is not the one in focus: between the sunken page behind it and a focused bar, so it
        still reads as a bar. The toolbar of a cell in the grid that does not have the keyboard. */
     --surface-idle: color-mix(in srgb, var(--surface) 50%, var(--surface-sunken));
@@ -118,6 +119,7 @@
     --surface: #131316;
     --surface-raised: #18181c;
     --surface-sunken: #0b0b0e;
+    --track: rgb(255 255 255 / 0.11);
     --surface-hover: #202024;
     --surface-active: #28282e;
     /* Derived, so an app that tints its surfaces tints its fields along. */
@@ -246,6 +248,7 @@
     --color-surface: var(--surface);
     --color-surface-raised: var(--surface-raised);
     --color-surface-sunken: var(--surface-sunken);
+    --color-track: var(--track);
     --color-surface-idle: var(--surface-idle);
     --color-surface-hover: var(--surface-hover);
     --color-surface-hover-edged: var(--surface-hover-edged);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/ui",
-  "version": "0.49.4",
+  "version": "0.49.6",
   "description": "React components, a theme, formatters and a settings dialog for desktop-grade apps on React 19, Base UI and Tailwind 4.",
   "license": "FSL-1.1-MIT",
   "author": "Bas Milius",

package/src/Meter.tsx

@@ -34,7 +34,7 @@ export function Meter({ value, min = 0, max = 100, marks = [], label, valueText,
             aria-valuemax={max}
             aria-valuenow={value === null ? min : Math.min(max, Math.max(min, value))}
             aria-valuetext={valueText}
-            className={clsx('relative h-1.5 rounded-full bg-surface-sunken', className)}
+            className={clsx('relative h-1.5 rounded-full bg-track', className)}
         >
             {/* No transition on the width: a level that updates many times a second would lag and blur. */}
             {value !== null && <span className="absolute inset-y-0 left-0 rounded-full bg-accent" style={{ width: `${fractionOf(value) * 100}%` }} />}

package/src/theme.css

@@ -10,6 +10,7 @@
     --surface: #ffffff;
     --surface-raised: #ffffff;
     --surface-sunken: #ececef;
+    --track: rgb(0 0 0 / 0.09);
     /* A bar that is not the one in focus: between the sunken page behind it and a focused bar, so it
        still reads as a bar. The toolbar of a cell in the grid that does not have the keyboard. */
     --surface-idle: color-mix(in srgb, var(--surface) 50%, var(--surface-sunken));
@@ -118,6 +119,7 @@
     --surface: #131316;
     --surface-raised: #18181c;
     --surface-sunken: #0b0b0e;
+    --track: rgb(255 255 255 / 0.11);
     --surface-hover: #202024;
     --surface-active: #28282e;
     /* Derived, so an app that tints its surfaces tints its fields along. */
@@ -246,6 +248,7 @@
     --color-surface: var(--surface);
     --color-surface-raised: var(--surface-raised);
     --color-surface-sunken: var(--surface-sunken);
+    --color-track: var(--track);
     --color-surface-idle: var(--surface-idle);
     --color-surface-hover: var(--surface-hover);
     --color-surface-hover-edged: var(--surface-hover-edged);