@codenhub/styles 0.0.2 → 0.0.3

package/docs/roadmap.md

@@ -0,0 +1,34 @@
+# Roadmap
+
+**Status:** APPROVED
+**Last updated:** 2026-06-23
+**Scope:** `@codenhub/styles` package direction.
+
+## Purpose
+
+This roadmap tracks durable direction for `@codenhub/styles`. It captures styling-system improvements that should guide future changes without turning this document into a release checklist.
+
+## Recently Completed
+
+- Published the v0.0.2 foundation: design tokens (colors, layout, radius, motion, focus, shadows, layering, dark mode), presentation/helper classes (buttons, forms, feedback, loaders, tooltips), accessibility contrast verification, and multi-path bundler visual regression tests.
+
+## Planned
+
+- **Aesthetic Themes**: Add aesthetic themes (e.g., glassmorphism, brutalism, glitch) to allow changing the whole look-and-feel of the UI.
+- **Layout Helpers**: Expand layout helpers to support common page structure and flex/grid requirements.
+- **Dynamic Tokens & Color Schemes**: Add `@codenhub/theme` as a dev dependency to enable dynamic token changes and color scheme creation.
+- **Button Presentation Classes**: Consider adding more presentation classes for buttons (e.g., loading state enhancements) once component APIs stabilize.
+- **Compatibility Tests**: Add more explicit compatibility tests for intent and presentation combinations when new combinations are supported.
+
+## Not Planned
+
+- **JS/TS Helpers**: Runtime DOM helpers (such as a typed `createElement` wrapper) are not planned for now. They will be considered further before any future package expansion, but remain out of scope for now to keep the package CSS-only.
+- Public JavaScript behavior like toast dismissal, focus management, and app-level theme state remain outside the CSS package.
+
+## References
+
+- [Overview](./index.md)
+- [Tokens](./tokens.md)
+- [Classes](./classes.md)
+- [Accessibility](./accessibility.md)
+- [Tests](./tests.md)

package/{.docs → docs}/tokens.md

@@ -33,6 +33,10 @@ Tokens are CSS custom properties. Default values apply by default. `.dark` may o
 | `--color-surface`              | Nested or muted surface.                                                                                      |
 | `--color-text`                 | Primary text color.                                                                                           |
 | `--color-text-secondary`       | Secondary text color.                                                                                         |
+| `--color-text-contrast`        | Text/icon color on text filled surface.                                                                       |
+| `--color-text-hover`           | Text hover state.                                                                                             |
+| `--color-text-subtle`          | Low-emphasis companion tone for text. Use as soft surface or subtle background.                               |
+| `--color-text-strong`          | High-emphasis companion tone for text. Use as readable text, icon, or border on subtle surfaces.              |
 | `--color-success`              | Success state color.                                                                                          |
 | `--color-success-contrast`     | Text/icon color on success filled surface. Meets 3:1 UI component contrast against `--color-success`.         |
 | `--color-success-hover`        | Success hover tone.                                                                                           |
@@ -60,38 +64,35 @@ Tokens are CSS custom properties. Default values apply by default. `.dark` may o
 
 Foundation tokens are not aliases for one color. They define layout, shape, motion, focus, depth, and layering behavior used by helper classes.
 
-| Token                      | Purpose                                                                      |
-| -------------------------- | ---------------------------------------------------------------------------- |
-| `--font-default`           | Default app font family.                                                     |
-| `--container-narrow`       | Narrow content width.                                                        |
-| `--container-max`          | Default content width.                                                       |
-| `--container-wide`         | Wide content width.                                                          |
-| `--layout-gutter`          | Responsive inline page padding.                                              |
-| `--layout-section-block`   | Responsive section vertical padding.                                         |
-| `--layout-stack-gap`       | Default vertical stack gap.                                                  |
-| `--layout-cluster-gap`     | Default horizontal/wrapped cluster gap.                                      |
-| `--layout-grid-min`        | Minimum column width for `.auto-grid`.                                       |
-| `--radius-control`         | Radius for buttons, inputs, tooltips, and compact UI.                        |
-| `--radius-surface`         | Radius for cards, panels, and alerts.                                        |
-| `--radius-overlay`         | Radius for overlays such as toasts.                                          |
-| `--control-height`         | Default minimum height for controls.                                         |
-| `--border-width`           | Default border width.                                                        |
-| `--elevation-low`          | Elevation for surface-level components such as cards and panels.             |
-| `--elevation-mid`          | Elevation for elevated components such as dropdowns and floating containers. |
-| `--elevation-high`         | Elevation for tooltips and inline overlays.                                  |
-| `--elevation-overlay`      | Elevation for full-screen overlays and toasts.                               |
-| `--focus-ring`             | Focus-visible ring color.                                                    |
-| `--focus-ring-offset`      | Focus-visible outline offset.                                                |
-| `--focus-ring-width`       | Focus-visible outline/ring width.                                            |
-| `--motion-duration-fast`   | Fast transition for buttons and input interactions (`120ms`).                |
-| `--motion-duration-normal` | Normal transition for layout, modals, and banners (`200ms`).                 |
-| `--motion-duration-slow`   | Slow animation for skeleton loaders and progress bars (`400ms`).             |
-| `--motion-ease`            | Default easing curve.                                                        |
-| `--backdrop-overlay`       | Backdrop filter value for overlay-like surfaces.                             |
-| `--z-popover`              | Popover/tooltip z-index.                                                     |
-| `--z-toast`                | Toast z-index.                                                               |
-| `--breakpoint-xs`          | Extra-small Tailwind responsive breakpoint.                                  |
-| `--breakpoint-2xl`         | Extended large Tailwind responsive breakpoint.                               |
+| Token                       | Purpose                                                                      |
+| --------------------------- | ---------------------------------------------------------------------------- |
+| `--font-default`            | Default app font family.                                                     |
+| `--container-narrow`        | Narrow content width.                                                        |
+| `--container-max`           | Default content width.                                                       |
+| `--container-wide`          | Wide content width.                                                          |
+| `--layout-gutter`           | Responsive inline page padding.                                              |
+| `--layout-section-block`    | Responsive section vertical padding.                                         |
+| `--layout-stack-gap`        | Default vertical stack gap.                                                  |
+| `--layout-cluster-gap`      | Default horizontal/wrapped cluster gap.                                      |
+| `--layout-grid-min`         | Minimum column width for `.auto-grid`.                                       |
+| `--radius-control`          | Radius for buttons, inputs, tooltips, and compact UI.                        |
+| `--radius-surface`          | Radius for cards, panels, and alerts.                                        |
+| `--control-height`          | Default minimum height for controls.                                         |
+| `--border-width`            | Default border width.                                                        |
+| `--elevation-low`           | Elevation for surface-level components such as cards and panels.             |
+| `--elevation-mid`           | Elevation for elevated components such as dropdowns and floating containers. |
+| `--elevation-high`          | Elevation for tooltips and inline overlays.                                  |
+| `--focus-ring`              | Focus-visible ring color.                                                    |
+| `--focus-ring-offset`       | Focus-visible outline offset.                                                |
+| `--focus-ring-width`        | Focus-visible outline/ring width.                                            |
+| `--motion-duration-fast`    | Fast transition for buttons and input interactions (`120ms`).                |
+| `--motion-duration-normal`  | Normal transition for layout and modals (`200ms`).                           |
+| `--motion-duration-slow`    | Slow animation for skeleton loaders and progress bars (`400ms`).             |
+| `--motion-ease`             | Default easing curve.                                                        |
+| `--z-popover`               | Popover/tooltip z-index.                                                     |
+| `--surface-hover-transform` | The transform applied on interactive card/panel hover.                       |
+| `--breakpoint-xs`           | Extra-small Tailwind responsive breakpoint.                                  |
+| `--breakpoint-2xl`          | Extended large Tailwind responsive breakpoint.                               |
 
 ## Component Internals
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codenhub/styles",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "private": false,
   "description": "CSS-only Codenhub design tokens, base styles, and composable UI helper classes.",
   "homepage": "https://github.com/codenhub/codenhub/tree/main/packages/styles",
@@ -11,7 +11,7 @@
     "directory": "packages/styles"
   },
   "files": [
-    ".docs",
+    "docs",
     "dist",
     "src"
   ],
@@ -22,7 +22,14 @@
     "./components": "./dist/components.css",
     "./tw": "./src/index.css",
     "./tw/theme": "./src/theme.css",
-    "./tw/components": "./src/components.css"
+    "./tw/components": "./src/components/index.css",
+    "./tw/surface": "./src/components/surface.css",
+    "./tw/button": "./src/components/button.css",
+    "./tw/form": "./src/components/form.css",
+    "./tw/feedback": "./src/components/feedback.css",
+    "./tw/loader": "./src/components/loader.css",
+    "./tw/tooltip": "./src/components/tooltip.css",
+    "./tw/utilities": "./src/utilities.css"
   },
   "publishConfig": {
     "access": "public"
@@ -45,7 +52,7 @@
   "scripts": {
     "dev": "node ./scripts/dev.js",
     "build": "pnpm build:styles",
-    "build:styles": "tailwindcss -i ./src/index.css -o ./dist/index.css --minify && tailwindcss -i ./src/theme.css -o ./dist/theme.css --minify && tailwindcss -i ./src/components.css -o ./dist/components.css --minify",
+    "build:styles": "tailwindcss -i ./src/index.css -o ./dist/index.css --minify && tailwindcss -i ./src/theme.css -o ./dist/theme.css --minify && tailwindcss -i ./src/components/index.css -o ./dist/components.css --minify",
     "status:npm": "npm view @codenhub/styles version dist-tags time --json && npm dist-tag ls @codenhub/styles && npm access get status @codenhub/styles",
     "status:pack": "npm pack --dry-run",
     "test": "pnpm typecheck && pnpm test:build && pnpm test:visual",

package/src/components/button.css

@@ -0,0 +1,155 @@
+@import "tailwindcss";
+@import "../theme.css";
+
+@utility btn {
+  --button-color: var(--color-text);
+  --button-contrast: var(--color-text-contrast);
+  --button-hover: var(--color-text-hover);
+  --button-subtle: var(--color-text-subtle);
+  --button-strong: var(--color-text-strong);
+  --button-bg: var(--button-color);
+  --button-fg: var(--button-contrast);
+  --button-border: var(--button-bg);
+  --button-hover-bg: var(--button-hover);
+  --button-hover-fg: var(--button-fg);
+  --button-hover-border: var(--button-hover-bg);
+  --button-text: var(--button-strong);
+  --button-soft-bg: var(--button-subtle);
+  --button-subtle-hover-bg: color-mix(in srgb, var(--button-soft-bg) 80%, transparent);
+  --button-soft-hover-bg: color-mix(in srgb, var(--button-soft-bg) 84%, var(--button-text));
+  --button-spinner: var(--button-fg);
+
+  @apply relative inline-flex min-h-(--control-height,2.5rem) w-fit items-center justify-center gap-2 rounded-(--radius-control) bg-(--button-bg) px-4 py-2 font-semibold whitespace-nowrap text-(--button-fg) no-underline transition-[background-color,border-color,color,opacity,transform] duration-(--motion-duration-fast) ease-(--motion-ease) select-none;
+  border: var(--border-width) solid var(--button-border);
+
+  &.primary {
+    --button-color: var(--color-primary);
+    --button-contrast: var(--color-primary-contrast);
+    --button-hover: var(--color-primary-hover);
+    --button-subtle: var(--color-primary-subtle);
+    --button-strong: var(--color-primary-strong);
+  }
+
+  &.secondary {
+    --button-color: var(--color-accent);
+    --button-contrast: var(--color-accent-contrast);
+    --button-hover: var(--color-accent-hover);
+    --button-subtle: var(--color-accent-subtle);
+    --button-strong: var(--color-accent-strong);
+  }
+
+  &.success {
+    --button-color: var(--color-success);
+    --button-contrast: var(--color-success-contrast);
+    --button-hover: var(--color-success-hover);
+    --button-subtle: var(--color-success-subtle);
+    --button-strong: var(--color-success-strong);
+  }
+
+  &.warning {
+    --button-color: var(--color-warning);
+    --button-contrast: var(--color-warning-contrast);
+    --button-hover: var(--color-warning-hover);
+    --button-subtle: var(--color-warning-subtle);
+    --button-strong: var(--color-warning-strong);
+  }
+
+  &.destructive,
+  &.danger,
+  &.error {
+    --button-color: var(--color-destructive);
+    --button-contrast: var(--color-destructive-contrast);
+    --button-hover: var(--color-destructive-hover);
+    --button-subtle: var(--color-destructive-subtle);
+    --button-strong: var(--color-destructive-strong);
+  }
+
+  &.info {
+    --button-color: var(--color-info);
+    --button-contrast: var(--color-info-contrast);
+    --button-hover: var(--color-info-hover);
+    --button-subtle: var(--color-info-subtle);
+    --button-strong: var(--color-info-strong);
+  }
+
+  &.out {
+    --button-spinner: var(--button-text);
+
+    @apply bg-transparent text-(--button-color);
+    border: calc(var(--border-width) * 2) solid var(--button-color);
+
+    &:not(:disabled, .disabled, [aria-disabled="true"], [data-disabled]):hover {
+      @apply border-(--button-color) bg-(--button-subtle) text-(--button-color);
+    }
+
+    &.fill {
+      &:not(:disabled, .disabled, [aria-disabled="true"], [data-disabled]):hover {
+        @apply border-(--button-color) bg-(--button-color) text-(--button-contrast);
+      }
+    }
+  }
+
+  &.ghost {
+    --button-spinner: var(--button-text);
+
+    @apply border-transparent bg-transparent text-(--button-text);
+
+    &:not(:disabled, .disabled, [aria-disabled="true"], [data-disabled]):hover {
+      @apply border-transparent bg-(--button-subtle-hover-bg) text-(--button-text);
+    }
+  }
+
+  &.soft {
+    --button-spinner: var(--button-text);
+
+    @apply border-transparent bg-(--button-soft-bg) text-(--button-text);
+
+    &:not(:disabled, .disabled, [aria-disabled="true"], [data-disabled]):hover {
+      @apply border-transparent bg-(--button-soft-hover-bg) text-(--button-text);
+    }
+  }
+
+  &.sm {
+    @apply min-h-8 px-3 py-1 text-sm;
+  }
+
+  &.lg {
+    @apply min-h-12 px-5 py-2.5 text-[1.0625rem];
+  }
+
+  &.icon {
+    @apply aspect-square min-w-(--control-height,2.5rem) p-2;
+
+    aspect-ratio: 1;
+  }
+
+  &.pill {
+    @apply rounded-full;
+  }
+
+  &:not(:disabled, .disabled, [aria-disabled="true"], [data-disabled]):hover {
+    &:not(.out, .ghost, .soft) {
+      @apply border-(--button-hover-border) bg-(--button-hover-bg) text-(--button-hover-fg);
+    }
+  }
+
+  &:disabled,
+  &.disabled,
+  &[aria-disabled="true"],
+  &[data-disabled] {
+    @apply cursor-not-allowed;
+
+    opacity: 0.58;
+  }
+
+  &.loading {
+    @apply pointer-events-none text-transparent! transition-[opacity,transform];
+
+    &::after {
+      @apply absolute top-[calc(50%+var(--border-width))] left-[calc(50%+var(--border-width))] block size-4 -translate-1/2 rounded-full bg-(--button-spinner);
+
+      content: "";
+      @apply ai;
+    }
+  }
+}

package/src/components/feedback.css

@@ -0,0 +1,214 @@
+@import "tailwindcss";
+@import "../theme.css";
+
+@keyframes anim-skeleton {
+  0% {
+    background-position: 200% 0;
+  }
+
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+@utility alert {
+  --feedback-color: var(--color-text);
+  --feedback-contrast: var(--color-text-contrast);
+  --feedback-surface: color-mix(in srgb, var(--feedback-color) 12%, var(--color-background));
+  --feedback-border: color-mix(in srgb, var(--feedback-color) 42%, var(--color-border));
+
+  @apply flex rounded-(--radius-surface) bg-(--feedback-surface) p-4 leading-5 text-(--feedback-color);
+  border: var(--border-width) solid var(--feedback-border);
+
+  &.primary {
+    --feedback-color: var(--color-primary);
+    --feedback-contrast: var(--color-primary-contrast);
+  }
+
+  &.secondary {
+    --feedback-color: var(--color-accent);
+    --feedback-contrast: var(--color-accent-contrast);
+  }
+
+  &.success {
+    --feedback-color: var(--color-success);
+    --feedback-contrast: var(--color-success-contrast);
+  }
+
+  &.warning {
+    --feedback-color: var(--color-warning);
+    --feedback-contrast: var(--color-warning-contrast);
+  }
+
+  &.destructive,
+  &.danger,
+  &.error {
+    --feedback-color: var(--color-destructive);
+    --feedback-contrast: var(--color-destructive-contrast);
+  }
+
+  &.info {
+    --feedback-color: var(--color-info);
+    --feedback-contrast: var(--color-info-contrast);
+  }
+
+  &.flat {
+    @apply bg-(--feedback-color) text-(--feedback-contrast);
+    border-color: var(--feedback-color);
+  }
+
+  &.soft {
+    @apply border-transparent bg-(--feedback-surface) text-(--feedback-color);
+  }
+
+  &.left-accent {
+    @apply border-y-transparent border-r-transparent bg-(--feedback-surface) text-(--feedback-color);
+    border-left-width: 4px;
+    border-left-color: var(--feedback-color);
+  }
+
+  &.icon {
+    @apply relative pl-11;
+
+    &::before {
+      @apply absolute top-4 left-4 block size-5 bg-current;
+
+      content: "";
+      mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>');
+      -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>');
+      mask-size: contain;
+      -webkit-mask-size: contain;
+      mask-repeat: no-repeat;
+      -webkit-mask-repeat: no-repeat;
+      mask-position: center;
+      -webkit-mask-position: center;
+    }
+
+    &.success::before {
+      mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>');
+      -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>');
+    }
+
+    &.warning::before {
+      mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>');
+      -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>');
+    }
+
+    &.destructive::before,
+    &.danger::before,
+    &.error::before {
+      mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>');
+      -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>');
+    }
+
+    &.info::before {
+      mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>');
+      -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>');
+    }
+  }
+}
+
+@utility badge {
+  --feedback-color: var(--color-text);
+  --feedback-contrast: var(--color-text-contrast);
+  --feedback-surface: color-mix(in srgb, var(--feedback-color) 12%, var(--color-background));
+  --feedback-border: color-mix(in srgb, var(--feedback-color) 42%, var(--color-border));
+
+  @apply inline-flex min-h-6 w-fit items-center gap-1 rounded-full bg-(--feedback-surface) px-2.5 text-xs font-bold text-(--feedback-color);
+  border: var(--border-width) solid var(--feedback-border);
+
+  &.primary {
+    --feedback-color: var(--color-primary);
+    --feedback-contrast: var(--color-primary-contrast);
+  }
+
+  &.secondary {
+    --feedback-color: var(--color-accent);
+    --feedback-contrast: var(--color-accent-contrast);
+  }
+
+  &.success {
+    --feedback-color: var(--color-success);
+    --feedback-contrast: var(--color-success-contrast);
+  }
+
+  &.warning {
+    --feedback-color: var(--color-warning);
+    --feedback-contrast: var(--color-warning-contrast);
+  }
+
+  &.destructive,
+  &.danger,
+  &.error {
+    --feedback-color: var(--color-destructive);
+    --feedback-contrast: var(--color-destructive-contrast);
+  }
+
+  &.info {
+    --feedback-color: var(--color-info);
+    --feedback-contrast: var(--color-info-contrast);
+  }
+
+  &.flat {
+    @apply bg-(--feedback-color) text-(--feedback-contrast);
+    border-color: var(--feedback-color);
+  }
+
+  &.soft {
+    @apply border-transparent;
+  }
+}
+
+@utility skeleton {
+  @apply min-h-4 w-full rounded-(--radius-control);
+
+  animation: anim-skeleton calc(var(--motion-duration-slow) * 4) linear infinite;
+  background: linear-gradient(90deg, var(--color-surface), var(--color-foreground), var(--color-surface));
+  background-size: 200% 100%;
+}
+
+@utility progress {
+  --progress-color: var(--color-text);
+  --progress-surface: color-mix(var(--color-text-subtle) 60%, transparent);
+
+  @apply h-2.5 w-full overflow-hidden rounded-full bg-(--progress-surface);
+
+  > * {
+    @apply block h-full transition-[width] duration-(--motion-duration-slow) ease-(--motion-ease);
+
+    background-color: var(--progress-color);
+    width: var(--progress-value, 0%);
+  }
+
+  &.primary {
+    --progress-color: var(--color-primary);
+    --progress-surface: color-mix(var(--color-primary-subtle) 60%, transparent);
+  }
+
+  &.secondary {
+    --progress-color: var(--color-accent);
+    --progress-surface: color-mix(var(--color-accent-subtle) 60%, transparent);
+  }
+
+  &.success {
+    --progress-color: var(--color-success);
+    --progress-surface: color-mix(var(--color-success-subtle) 60%, transparent);
+  }
+
+  &.warning {
+    --progress-color: var(--color-warning);
+    --progress-surface: color-mix(var(--color-warning-subtle) 60%, transparent);
+  }
+
+  &.destructive,
+  &.danger,
+  &.error {
+    --progress-color: var(--color-destructive);
+    --progress-surface: color-mix(var(--color-destructive-subtle) 60%, transparent);
+  }
+
+  &.info {
+    --progress-color: var(--color-info);
+    --progress-surface: color-mix(var(--color-info-subtle) 60%, transparent);
+  }
+}