@tenerife.music/ui 2.0.0 → 2.0.3

package/README.md

@@ -4,6 +4,7 @@
 Strict. Predictable. Built for system-level consistency.
 
 ![Release](https://img.shields.io/github/v/tag/Tureckiy-zart/tenerife-ui?style=for-the-badge&sort=semver)
+![Version](https://img.shields.io/badge/version-2.0.3-blue?style=for-the-badge)
 ![React](https://img.shields.io/badge/React-18+-blue?style=for-the-badge)
 ![TypeScript](https://img.shields.io/badge/TypeScript-Strict-blue?style=for-the-badge)
 ![TailwindCSS](https://img.shields.io/badge/TailwindCSS-3.4-38b2ac?style=for-the-badge)
@@ -128,7 +129,7 @@ export default function App() {
 - **Component Creation**: [Extension Component Creation Checklist](docs/workflows/tasks/COMPONENT_CREATION_CHECKLIST.md)
   - **CLI Generator**: Use `pnpm run component:generate -- <ComponentName> [--category <category>]` to generate component scaffold
   - See checklist for complete process and requirements
-- **Component Refactoring**: [Component Review & Improvement Pipeline (18A)](docs/workflows/foundation/FOUNDATION_STEP_PIPELINE.md)
+- **Component Refactoring**: [Component Refactoring Pipeline (18A)](docs/workflows/foundation/COMPONENT_REFACTORING_PIPELINE.md)
   - **Canonical process** for reviewing, improving, and validating existing components
   - Mandatory 12-step pipeline (STEP 0-11) for Foundation and Extension components
   - See pipeline for complete refactoring process and requirements
@@ -186,6 +187,41 @@ Tokens are **immutable contracts**, not convenience variables.
 
 ---
 
+## 🎨 Theme Tooling
+
+TUI provides **build-time CLI tooling** for generating and validating themes.
+
+**Theme Tooling is a build-time compiler, not a runtime system.**
+
+- **Theme Generator** (`pnpm theme:generate`) — creates Theme Contract v1 compliant themes
+- **Theme Validator** (`pnpm theme:validate`) — validates themes against contract
+- **Parity Checker** (`pnpm theme:parity-check`) — ensures token consistency
+
+**Key Points:**
+
+- Themes are generated at **build time**, not runtime
+- All themes live in `src/EXTENSIONS/themes/` (canonical path)
+- Validation is **mandatory** — invalid themes cannot be committed (CI enforced)
+- UI library **never generates themes** — it only consumes pre-generated CSS
+
+**Quick Start:**
+
+```bash
+# Generate a theme
+pnpm theme:generate -- --palette my-brand --base-color "210 40% 50%" --modes light,dark
+
+# Validate themes
+pnpm theme:validate -- src/EXTENSIONS/themes/*.css
+```
+
+**Documentation:**
+
+- [Theme System — Contract & Tooling](tools/theme-contract/README.md) - **Complete guide** (start here)
+- [Theme Generator](tools/theme-generator/README.md) - Generator documentation
+- [Theme Validator](tools/theme-validator/README.md) - Validator documentation
+
+---
+
 ## 🧩 Domain-Specific Components
 
 The following components are **used internally** in Tenerife Music projects

package/dist/{colors-BrFmCQv-.d.cts → colors-DTYb0mPM.d.cts}

@@ -242,6 +242,10 @@ declare const tailwindThemeColors: {
         readonly DEFAULT: "hsl(var(--muted))";
         readonly foreground: "hsl(var(--muted-foreground))";
     };
+    readonly disabled: {
+        readonly DEFAULT: "hsl(var(--tm-disabled))";
+        readonly foreground: "hsl(var(--tm-disabled-foreground))";
+    };
     readonly destructive: {
         readonly DEFAULT: "hsl(var(--destructive))";
         readonly foreground: "hsl(var(--destructive-foreground))";

package/dist/{colors-BrFmCQv-.d.ts → colors-DTYb0mPM.d.ts}

@@ -242,6 +242,10 @@ declare const tailwindThemeColors: {
         readonly DEFAULT: "hsl(var(--muted))";
         readonly foreground: "hsl(var(--muted-foreground))";
     };
+    readonly disabled: {
+        readonly DEFAULT: "hsl(var(--tm-disabled))";
+        readonly foreground: "hsl(var(--tm-disabled-foreground))";
+    };
     readonly destructive: {
         readonly DEFAULT: "hsl(var(--destructive))";
         readonly foreground: "hsl(var(--destructive-foreground))";

package/dist/extensions/next/index.cjs

@@ -242,13 +242,14 @@ var LINK_TOKENS = {
   },
   /**
    * Disabled state tokens
+   * Uses explicit disabled semantic tokens for better accessibility
    */
   state: {
     disabled: {
       pointerEvents: "disabled:pointer-events-none",
       // Disable pointer events
-      opacity: "disabled:opacity-50"
-      // Disabled opacity
+      text: "disabled:text-[hsl(var(--tm-disabled-foreground))]"
+      // Disabled text color using explicit disabled semantic token
     }
   },
   /**
@@ -324,7 +325,7 @@ function renderIcon(icon) {
   return /* @__PURE__ */ jsxRuntime.jsx("span", { className: ICON_WRAPPER_CLASS, children: icon });
 }
 var linkVariants = tokenCVA({
-  base: `${LINK_TOKENS.layout} ${LINK_TOKENS.fontWeight} ${LINK_TOKENS.transition.colors} ${LINK_TOKENS.focus.outline} ${LINK_TOKENS.focus.ring} ${LINK_TOKENS.focus.offset} ${LINK_TOKENS.state.disabled.pointerEvents} ${LINK_TOKENS.state.disabled.opacity}`,
+  base: `${LINK_TOKENS.layout} ${LINK_TOKENS.fontWeight} ${LINK_TOKENS.transition.colors} ${LINK_TOKENS.focus.outline} ${LINK_TOKENS.focus.ring} ${LINK_TOKENS.focus.offset} ${LINK_TOKENS.state.disabled.pointerEvents} ${LINK_TOKENS.state.disabled.text}`,
   variants: {
     variant: {
       primary: `${LINK_TOKENS.variant.primary.text} ${LINK_TOKENS.variant.primary.hover} ${LINK_TOKENS.underlineOffset} ${LINK_TOKENS.variant.primary.underline}`,

package/dist/extensions/next/index.mjs

@@ -217,13 +217,14 @@ var LINK_TOKENS = {
   },
   /**
    * Disabled state tokens
+   * Uses explicit disabled semantic tokens for better accessibility
    */
   state: {
     disabled: {
       pointerEvents: "disabled:pointer-events-none",
       // Disable pointer events
-      opacity: "disabled:opacity-50"
-      // Disabled opacity
+      text: "disabled:text-[hsl(var(--tm-disabled-foreground))]"
+      // Disabled text color using explicit disabled semantic token
     }
   },
   /**
@@ -299,7 +300,7 @@ function renderIcon(icon) {
   return /* @__PURE__ */ jsx("span", { className: ICON_WRAPPER_CLASS, children: icon });
 }
 var linkVariants = tokenCVA({
-  base: `${LINK_TOKENS.layout} ${LINK_TOKENS.fontWeight} ${LINK_TOKENS.transition.colors} ${LINK_TOKENS.focus.outline} ${LINK_TOKENS.focus.ring} ${LINK_TOKENS.focus.offset} ${LINK_TOKENS.state.disabled.pointerEvents} ${LINK_TOKENS.state.disabled.opacity}`,
+  base: `${LINK_TOKENS.layout} ${LINK_TOKENS.fontWeight} ${LINK_TOKENS.transition.colors} ${LINK_TOKENS.focus.outline} ${LINK_TOKENS.focus.ring} ${LINK_TOKENS.focus.offset} ${LINK_TOKENS.state.disabled.pointerEvents} ${LINK_TOKENS.state.disabled.text}`,
   variants: {
     variant: {
       primary: `${LINK_TOKENS.variant.primary.text} ${LINK_TOKENS.variant.primary.hover} ${LINK_TOKENS.underlineOffset} ${LINK_TOKENS.variant.primary.underline}`,

package/dist/{index-DGtRM9Db.d.cts → index-CfbBwBhc.d.cts}

@@ -1045,15 +1045,15 @@ declare const SWITCH_TOKENS: {
         readonly track: {
             readonly default: "bg-[hsl(var(--input))]";
             readonly checked: "bg-[hsl(var(--tm-primary))]";
-            readonly disabled: "bg-[hsl(var(--muted))]";
-            readonly disabledChecked: "bg-[hsl(var(--muted))]";
+            readonly disabled: "bg-[hsl(var(--tm-disabled))]";
+            readonly disabledChecked: "bg-[hsl(var(--tm-disabled))]";
             readonly error: "bg-[hsl(var(--destructive))]";
         };
         readonly handle: {
             readonly default: "bg-[hsl(var(--muted-foreground))]";
             readonly checked: "bg-[hsl(var(--tm-primary-foreground))]";
-            readonly disabled: "bg-[hsl(var(--muted-foreground))]";
-            readonly disabledChecked: "bg-[hsl(var(--muted-foreground))]";
+            readonly disabled: "bg-[hsl(var(--tm-disabled-foreground))]";
+            readonly disabledChecked: "bg-[hsl(var(--tm-disabled-foreground))]";
             readonly error: "bg-[hsl(var(--destructive-foreground))]";
         };
         readonly opacity: {
@@ -5173,6 +5173,10 @@ declare const UI_COLORS: {
         readonly DEFAULT: "hsl(var(--muted))";
         readonly foreground: "hsl(var(--muted-foreground))";
     };
+    readonly disabled: {
+        readonly DEFAULT: "hsl(var(--tm-disabled))";
+        readonly foreground: "hsl(var(--tm-disabled-foreground))";
+    };
     readonly destructive: {
         readonly DEFAULT: "hsl(var(--destructive))";
         readonly foreground: "hsl(var(--destructive-foreground))";

package/dist/{index-DGtRM9Db.d.ts → index-CfbBwBhc.d.ts}

@@ -1045,15 +1045,15 @@ declare const SWITCH_TOKENS: {
         readonly track: {
             readonly default: "bg-[hsl(var(--input))]";
             readonly checked: "bg-[hsl(var(--tm-primary))]";
-            readonly disabled: "bg-[hsl(var(--muted))]";
-            readonly disabledChecked: "bg-[hsl(var(--muted))]";
+            readonly disabled: "bg-[hsl(var(--tm-disabled))]";
+            readonly disabledChecked: "bg-[hsl(var(--tm-disabled))]";
             readonly error: "bg-[hsl(var(--destructive))]";
         };
         readonly handle: {
             readonly default: "bg-[hsl(var(--muted-foreground))]";
             readonly checked: "bg-[hsl(var(--tm-primary-foreground))]";
-            readonly disabled: "bg-[hsl(var(--muted-foreground))]";
-            readonly disabledChecked: "bg-[hsl(var(--muted-foreground))]";
+            readonly disabled: "bg-[hsl(var(--tm-disabled-foreground))]";
+            readonly disabledChecked: "bg-[hsl(var(--tm-disabled-foreground))]";
             readonly error: "bg-[hsl(var(--destructive-foreground))]";
         };
         readonly opacity: {
@@ -5173,6 +5173,10 @@ declare const UI_COLORS: {
         readonly DEFAULT: "hsl(var(--muted))";
         readonly foreground: "hsl(var(--muted-foreground))";
     };
+    readonly disabled: {
+        readonly DEFAULT: "hsl(var(--tm-disabled))";
+        readonly foreground: "hsl(var(--tm-disabled-foreground))";
+    };
     readonly destructive: {
         readonly DEFAULT: "hsl(var(--destructive))";
         readonly foreground: "hsl(var(--destructive-foreground))";