@codenhub/styles 0.0.4 → 0.1.0

package/llms.txt

@@ -0,0 +1,26 @@
+# @codenhub/styles
+
+> CSS-only Codenhub design tokens, reset, typography, layout and content utilities, component classes, native-element styling, and Tailwind CSS v4 source entrypoints.
+
+Use compiled entrypoints for ready-to-import CSS or `/tw` entrypoints in a
+Tailwind CSS v4 build. The package has no JavaScript behavior. Supported behavior
+is the surface documented in public docs and demonstrated by the playground.
+
+## Documentation
+
+- [Documentation](./docs/index.md): Primary entrypoint — what the package is, what it does and does not do, and where to go next.
+- [README](./README.md): Installation, first use, requirements, and stability notes.
+- [Setup](./docs/setup.md): Installation, entrypoint/import-path reference, configuration, and requirements.
+- [Concepts](./docs/concepts.md): The three-axis model, the token system, and theme-selector precedence.
+- [Usage](./docs/usage/index.md): Composing, theming, customizing, aesthetics, and each component family.
+  - [Composing](./docs/usage/composing.md): Combining axes, presentation, the component axis matrix, and elevation.
+  - [Theming](./docs/usage/theming.md): Color, intent, and foundation token reference.
+  - [Customizing](./docs/usage/customizing.md): Presentation, material, and aesthetic token reference.
+  - [Aesthetics](./docs/usage/aesthetics.md): Each shipped aesthetic and its documented exceptions.
+  - [Buttons](./docs/usage/buttons.md)
+  - [Forms](./docs/usage/forms.md)
+  - [Feedback](./docs/usage/feedback.md)
+  - [Tooltips](./docs/usage/tooltips.md)
+  - [Content and layout](./docs/usage/content-and-layout.md): Layout helpers, content chips/tables, surfaces, and typography utilities.
+- [Integrating](./docs/integrating/index.md): Wiring the stylesheet into Next.js, Vue, Svelte, Astro, or a Tailwind CSS v4 build.
+- [Accessibility](./docs/accessibility.md): CSS accessibility behavior and consumer responsibilities.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codenhub/styles",
-  "version": "0.0.4",
+  "version": "0.1.0",
   "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",
@@ -12,34 +12,88 @@
   },
   "files": [
     "dist",
-    "src",
-    "NOTICE"
+    "NOTICE",
+    "README.md",
+    "docs",
+    "llms.txt",
+    "llms-full.txt"
   ],
   "type": "module",
   "exports": {
-    ".": "./dist/index.css",
-    "./theme": "./dist/theme.css",
-    "./components": "./dist/components.css",
-    "./tw": "./src/index.css",
-    "./tw/theme": "./src/theme.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"
+    ".": {
+      "style": "./dist/index.css",
+      "import": "./dist/index.css",
+      "default": "./dist/index.css"
+    },
+    "./theme": {
+      "style": "./dist/theme.css",
+      "import": "./dist/theme.css",
+      "default": "./dist/theme.css"
+    },
+    "./components": {
+      "style": "./dist/components.css",
+      "import": "./dist/components.css",
+      "default": "./dist/components.css"
+    },
+    "./aesthetics": {
+      "style": "./dist/aesthetics/index.css",
+      "import": "./dist/aesthetics/index.css",
+      "default": "./dist/aesthetics/index.css"
+    },
+    "./aesthetics/neobrutalism": {
+      "style": "./dist/aesthetics/neobrutalism.css",
+      "import": "./dist/aesthetics/neobrutalism.css",
+      "default": "./dist/aesthetics/neobrutalism.css"
+    },
+    "./aesthetics/glass": {
+      "style": "./dist/aesthetics/glass.css",
+      "import": "./dist/aesthetics/glass.css",
+      "default": "./dist/aesthetics/glass.css"
+    },
+    "./aesthetics/pixel": {
+      "style": "./dist/aesthetics/pixel.css",
+      "import": "./dist/aesthetics/pixel.css",
+      "default": "./dist/aesthetics/pixel.css"
+    },
+    "./aesthetics/chunky-tile": {
+      "style": "./dist/aesthetics/chunky-tile.css",
+      "import": "./dist/aesthetics/chunky-tile.css",
+      "default": "./dist/aesthetics/chunky-tile.css"
+    },
+    "./tw": "./dist/tw/index.css",
+    "./tw/theme": "./dist/tw/theme.css",
+    "./tw/components": "./dist/tw/components/index.css",
+    "./tw/surface": "./dist/tw/components/surface.css",
+    "./tw/button": "./dist/tw/components/button.css",
+    "./tw/form": "./dist/tw/components/form.css",
+    "./tw/feedback": "./dist/tw/components/feedback.css",
+    "./tw/loader": "./dist/tw/components/loader.css",
+    "./tw/tooltip": "./dist/tw/components/tooltip.css",
+    "./tw/reset": "./dist/tw/reset.css",
+    "./tw/native": "./dist/tw/native.css",
+    "./tw/typography": "./dist/tw/typography.css",
+    "./tw/utilities": "./dist/tw/utilities/index.css",
+    "./tw/aesthetics": "./dist/tw/aesthetics/index.css",
+    "./tw/aesthetics/neobrutalism": "./dist/tw/aesthetics/neobrutalism.css",
+    "./tw/aesthetics/glass": "./dist/tw/aesthetics/glass.css",
+    "./tw/aesthetics/pixel": "./dist/tw/aesthetics/pixel.css",
+    "./tw/aesthetics/chunky-tile": "./dist/tw/aesthetics/chunky-tile.css",
+    "./native": {
+      "style": "./dist/native.css",
+      "import": "./dist/native.css",
+      "default": "./dist/native.css"
+    }
   },
   "publishConfig": {
     "access": "public"
   },
   "devDependencies": {
-    "@playwright/test": "^1.57.0",
-    "@tailwindcss/cli": "^4.3.0",
-    "@types/node": "^25.9.1",
-    "tailwindcss": "^4.3.0",
-    "typescript": "^6.0.3"
+    "@playwright/test": "^1.61.1",
+    "@tailwindcss/cli": "^4.3.2",
+    "@types/node": "^26.1.0",
+    "tailwindcss": "^4.3.2",
+    "typescript": "^6.0.3",
+    "vitest": "^4.1.10"
   },
   "peerDependencies": {
     "tailwindcss": ">=4.0.0"
@@ -49,16 +103,28 @@
       "optional": true
     }
   },
+  "codenhub": {
+    "docs": {
+      "label": "StyleKit",
+      "status": "active"
+    }
+  },
   "scripts": {
-    "dev": "pnpm build && pnpm --filter=@codenhub/styles-dev dev",
+    "clean": "node -e \"fs.rmSync('dist', { recursive: true, force: true })\"",
+    "dev": "pnpm --filter=@codenhub/styles-dev dev",
     "debug": "pnpm build && pnpm --filter=@codenhub/styles-debug dev",
-    "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/index.css -o ./dist/components.css --minify",
+    "demo": "pnpm build && pnpm --filter=@codenhub/styles-demo dev",
+    "build": "pnpm clean && pnpm build:styles && pnpm build:aesthetics && pnpm build:tw",
+    "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 && tailwindcss -i ./src/native.css -o ./dist/native.css --minify",
+    "build:aesthetics": "tailwindcss -i ./src/aesthetics/index.css -o ./dist/aesthetics/index.css --minify && tailwindcss -i ./src/aesthetics/neobrutalism.css -o ./dist/aesthetics/neobrutalism.css --minify && tailwindcss -i ./src/aesthetics/glass.css -o ./dist/aesthetics/glass.css --minify && tailwindcss -i ./src/aesthetics/pixel.css -o ./dist/aesthetics/pixel.css --minify && tailwindcss -i ./src/aesthetics/chunky-tile.css -o ./dist/aesthetics/chunky-tile.css --minify",
+    "build:tw": "node -e \"import('node:fs').then(fs => fs.cpSync('src', 'dist/tw', { recursive: true }))\"",
     "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 build && pnpm test:visual",
-    "test:visual": "playwright test",
-    "test:watch": "playwright test --ui",
-    "typecheck": "tsc --project tsconfig.json --noEmit"
+    "status:pack": "npm pack --dry-run --ignore-scripts",
+    "test": "vitest run",
+    "test:browser": "playwright test",
+    "test:browser:watch": "playwright test --ui",
+    "test:coverage": "pnpm test",
+    "test:watch": "vitest --watch",
+    "typecheck": "tsc -b"
   }
 }

package/src/components/button.css

@@ -1,155 +0,0 @@
-@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;
-  }
-
-  &.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 block size-4 -translate-x-1/2 -translate-y-1/2 rounded-full bg-(--button-spinner);
-
-      top: calc(50% + var(--border-width));
-      left: calc(50% + var(--border-width));
-      content: "";
-      @apply ai;
-    }
-  }
-}

package/src/components/feedback.css

@@ -1,214 +0,0 @@
-@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;charset=utf-8,%3Csvg 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'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
-      -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg 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'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
-      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;charset=utf-8,%3Csvg 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'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
-      -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg 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'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
-    }
-
-    &.warning::before {
-      mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg 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'%3E%3Cpath 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'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
-      -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg 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'%3E%3Cpath 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'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
-    }
-
-    &.destructive::before,
-    &.danger::before,
-    &.error::before {
-      mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg 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'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6'/%3E%3Cpath d='m9 9 6 6'/%3E%3C/svg%3E");
-      -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg 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'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6'/%3E%3Cpath d='m9 9 6 6'/%3E%3C/svg%3E");
-    }
-
-    &.info::before {
-      mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg 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'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
-      -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg 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'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
-    }
-  }
-}
-
-@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(in srgb, 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(in srgb, var(--color-primary-subtle) 60%, transparent);
-  }
-
-  &.secondary {
-    --progress-color: var(--color-accent);
-    --progress-surface: color-mix(in srgb, var(--color-accent-subtle) 60%, transparent);
-  }
-
-  &.success {
-    --progress-color: var(--color-success);
-    --progress-surface: color-mix(in srgb, var(--color-success-subtle) 60%, transparent);
-  }
-
-  &.warning {
-    --progress-color: var(--color-warning);
-    --progress-surface: color-mix(in srgb, var(--color-warning-subtle) 60%, transparent);
-  }
-
-  &.destructive,
-  &.danger,
-  &.error {
-    --progress-color: var(--color-destructive);
-    --progress-surface: color-mix(in srgb, var(--color-destructive-subtle) 60%, transparent);
-  }
-
-  &.info {
-    --progress-color: var(--color-info);
-    --progress-surface: color-mix(in srgb, var(--color-info-subtle) 60%, transparent);
-  }
-}