@music-vine/cadence 2.6.2 → 3.0.0

package/dist/lib/utils.js

@@ -1,7 +1,7 @@
 import { clsx } from "clsx";
 import { extendTailwindMerge, mergeConfigs } from "tailwind-merge";
 const isFluidTextSize = (classPart) => {
-  const fluidPattern = /^~text-([a-z0-9]+)\/([a-z0-9]+)$/;
+  const fluidPattern = /^fl-text-([a-z0-9]+)\/([a-z0-9]+)$/;
   const match = classPart.match(fluidPattern);
   if (!match) {
     return false;
@@ -29,24 +29,14 @@ const customTwMerge = extendTailwindMerge((config) => {
     extend: {
       classGroups: {
         // Extend font-size class group to support fluid syntax
-        // Top-level validator receives the full className (e.g., "~text-2xl/3xl")
+        // Top-level validator receives the full className (e.g., "fl-text-2xl/3xl")
         "font-size": [isFluidTextSize]
       }
     },
-    // Strip `~` prefixes from modifiers only (NOT from baseClassName)
-    // This allows ~@md:~text-4xl/5xl to conflict with @md:text-5xl
-    // After processing: ~@md:~text-4xl/5xl → modifiers:[@md], baseClassName:~text-4xl/5xl
-    // We keep the ~ on baseClassName because tailwind-merge needs it to recognize fluid syntax
+    // Parse className to extract modifiers and base class name
+    // For @md:fl-text-4xl/5xl → modifiers:[@md], baseClassName:fl-text-4xl/5xl
     experimentalParseClassName: ({ className, parseClassName }) => {
-      const parsed = parseClassName(className);
-      const cleanedModifiers = parsed.modifiers.map(
-        (modifier) => modifier.startsWith("~") ? modifier.slice(1) : modifier
-      );
-      return {
-        ...parsed,
-        modifiers: cleanedModifiers
-        // Keep baseClassName as-is (preserving ~) so fluid syntax isn't misinterpreted as line-height
-      };
+      return parseClassName(className);
     }
   });
 });
@@ -54,11 +44,11 @@ function cn(...inputs) {
   const classList = clsx(inputs);
   const expanded = classList.split(" ").flatMap((className) => {
     const fluidWithModifier = className.match(
-      /^~(@[\w-]+):~text-(\w+)\/(\w+)$/
+      /^(@[\w-]+):fl-text-(\w+)\/(\w+)$/
     );
     if (fluidWithModifier) {
       const [, modifier, startSize, endSize] = fluidWithModifier;
-      const baseFluid = `~text-${startSize}/${endSize}`;
+      const baseFluid = `fl-text-${startSize}/${endSize}`;
       return [className, baseFluid];
     }
     return [className];

package/dist/lib/utils.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/lib/utils.ts"],
-  "sourcesContent": ["import { type ClassValue, clsx } from \"clsx\";\nimport { extendTailwindMerge, mergeConfigs } from \"tailwind-merge\";\n\n/**\n * Fluid-tailwind support for tailwind-merge.\n * Adapted from @fluid-tailwind/tailwind-merge source code.\n *\n * **How it works:**\n * 1. Fluid classes with modifiers (e.g., `~@md:~text-2xl/3xl`) are expanded\n *    to include both the modified and base versions\n * 2. This ensures they conflict at multiple modifier levels:\n *    - `~@md:~text-2xl/3xl` conflicts with `@md:text-5xl` (responsive)\n *    - `~@md:~text-2xl/3xl` conflicts with `text-4xl` (base)\n * 3. Simple fluid classes (e.g., `~text-2xl/3xl`) conflict with `text-4xl`\n *\n * **Supported patterns:**\n * - `~text-4xl/5xl` conflicts with `text-4xl` \u2713\n * - `~@md:~text-4xl/5xl` conflicts with BOTH `@md:text-5xl` AND `text-4xl` \u2713\n * - Fluid text sizing with any container query breakpoint \u2713\n *\n * This implementation ensures that passing a fluid className overrides all\n * related text sizing classes, as expected in a component library.\n */\n\n/**\n * Validator for fluid text sizes with `/` separator.\n * This matches the full className including prefix and postfix.\n * Tailwind-merge class groups can receive full className for top-level validators.\n */\nconst isFluidTextSize = (classPart: string): boolean => {\n  // Match full fluid class patterns: ~text-X/Y\n  const fluidPattern = /^~text-([a-z0-9]+)\\/([a-z0-9]+)$/;\n  const match = classPart.match(fluidPattern);\n\n  if (!match) {\n    return false;\n  }\n\n  const [, startSize, endSize] = match;\n  const validSizes = [\n    \"xs\",\n    \"sm\",\n    \"base\",\n    \"lg\",\n    \"xl\",\n    \"2xl\",\n    \"3xl\",\n    \"4xl\",\n    \"5xl\",\n    \"6xl\",\n    \"7xl\",\n    \"8xl\",\n    \"9xl\",\n  ];\n\n  return validSizes.includes(startSize) && validSizes.includes(endSize);\n};\n\n/**\n * Custom tailwind-merge with fluid text size support.\n */\nconst customTwMerge = extendTailwindMerge((config) => {\n  return mergeConfigs(config, {\n    extend: {\n      classGroups: {\n        // Extend font-size class group to support fluid syntax\n        // Top-level validator receives the full className (e.g., \"~text-2xl/3xl\")\n        \"font-size\": [isFluidTextSize],\n      },\n    },\n    // Strip `~` prefixes from modifiers only (NOT from baseClassName)\n    // This allows ~@md:~text-4xl/5xl to conflict with @md:text-5xl\n    // After processing: ~@md:~text-4xl/5xl \u2192 modifiers:[@md], baseClassName:~text-4xl/5xl\n    // We keep the ~ on baseClassName because tailwind-merge needs it to recognize fluid syntax\n    experimentalParseClassName: ({ className, parseClassName }) => {\n      const parsed = parseClassName(className);\n\n      // Strip ~ prefix from each modifier (map, not filter!)\n      const cleanedModifiers = parsed.modifiers.map((modifier) =>\n        modifier.startsWith(\"~\") ? modifier.slice(1) : modifier\n      );\n\n      return {\n        ...parsed,\n        modifiers: cleanedModifiers,\n        // Keep baseClassName as-is (preserving ~) so fluid syntax isn't misinterpreted as line-height\n      };\n    },\n  });\n});\n\n/**\n * Merge Tailwind CSS classes with clsx and tailwind-merge.\n * Supports both standard Tailwind classes and fluid-tailwind text sizing.\n * This ensures proper handling of conflicting classes.\n *\n * Fluid classes are expanded to conflict at multiple modifier levels:\n * - `~@md:~text-2xl/3xl` conflicts with BOTH `@md:text-5xl` AND `text-4xl`\n * - This ensures fluid classes override all related text sizing\n */\nexport function cn(...inputs: ClassValue[]) {\n  const classList = clsx(inputs);\n\n  // Expand fluid classes to conflict at multiple modifier levels\n  const expanded = classList.split(\" \").flatMap((className) => {\n    // Match fluid classes with modifiers: ~@md:~text-2xl/3xl\n    const fluidWithModifier = className.match(\n      /^~(@[\\w-]+):~text-(\\w+)\\/(\\w+)$/\n    );\n    if (fluidWithModifier) {\n      const [, modifier, startSize, endSize] = fluidWithModifier;\n      const baseFluid = `~text-${startSize}/${endSize}`;\n      // Return both the modified version and base version\n      // This makes it conflict with both @md:text-* and text-*\n      return [className, baseFluid];\n    }\n\n    return [className];\n  });\n\n  return customTwMerge(expanded.join(\" \"));\n}\n"],
-  "mappings": "AAAA,SAA0B,YAAY;AACtC,SAAS,qBAAqB,oBAAoB;AA4BlD,MAAM,kBAAkB,CAAC,cAA+B;AAEtD,QAAM,eAAe;AACrB,QAAM,QAAQ,UAAU,MAAM,YAAY;AAE1C,MAAI,CAAC,OAAO;AACV,WAAO;AAAA,EACT;AAEA,QAAM,CAAC,EAAE,WAAW,OAAO,IAAI;AAC/B,QAAM,aAAa;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,SAAO,WAAW,SAAS,SAAS,KAAK,WAAW,SAAS,OAAO;AACtE;AAKA,MAAM,gBAAgB,oBAAoB,CAAC,WAAW;AACpD,SAAO,aAAa,QAAQ;AAAA,IAC1B,QAAQ;AAAA,MACN,aAAa;AAAA;AAAA;AAAA,QAGX,aAAa,CAAC,eAAe;AAAA,MAC/B;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,4BAA4B,CAAC,EAAE,WAAW,eAAe,MAAM;AAC7D,YAAM,SAAS,eAAe,SAAS;AAGvC,YAAM,mBAAmB,OAAO,UAAU;AAAA,QAAI,CAAC,aAC7C,SAAS,WAAW,GAAG,IAAI,SAAS,MAAM,CAAC,IAAI;AAAA,MACjD;AAEA,aAAO;AAAA,QACL,GAAG;AAAA,QACH,WAAW;AAAA;AAAA,MAEb;AAAA,IACF;AAAA,EACF,CAAC;AACH,CAAC;AAWM,SAAS,MAAM,QAAsB;AAC1C,QAAM,YAAY,KAAK,MAAM;AAG7B,QAAM,WAAW,UAAU,MAAM,GAAG,EAAE,QAAQ,CAAC,cAAc;AAE3D,UAAM,oBAAoB,UAAU;AAAA,MAClC;AAAA,IACF;AACA,QAAI,mBAAmB;AACrB,YAAM,CAAC,EAAE,UAAU,WAAW,OAAO,IAAI;AACzC,YAAM,YAAY,SAAS,SAAS,IAAI,OAAO;AAG/C,aAAO,CAAC,WAAW,SAAS;AAAA,IAC9B;AAEA,WAAO,CAAC,SAAS;AAAA,EACnB,CAAC;AAED,SAAO,cAAc,SAAS,KAAK,GAAG,CAAC;AACzC;",
+  "sourcesContent": ["import { type ClassValue, clsx } from \"clsx\";\nimport { extendTailwindMerge, mergeConfigs } from \"tailwind-merge\";\n\n/**\n * Fluid-tailwind support for tailwind-merge.\n * Adapted from @fluid-tailwind/tailwind-merge source code.\n *\n * **How it works:**\n * 1. Fluid classes with modifiers (e.g., `@md:fl-text-2xl/3xl`) are expanded\n *    to include both the modified and base versions\n * 2. This ensures they conflict at multiple modifier levels:\n *    - `@md:fl-text-2xl/3xl` conflicts with `@md:text-5xl` (responsive)\n *    - `@md:fl-text-2xl/3xl` conflicts with `text-4xl` (base)\n * 3. Simple fluid classes (e.g., `fl-text-2xl/3xl`) conflict with `text-4xl`\n *\n * **Supported patterns:**\n * - `fl-text-4xl/5xl` conflicts with `text-4xl` \u2713\n * - `@md:fl-text-4xl/5xl` conflicts with BOTH `@md:text-5xl` AND `text-4xl` \u2713\n * - Fluid text sizing with any container query breakpoint \u2713\n *\n * This implementation ensures that passing a fluid className overrides all\n * related text sizing classes, as expected in a component library.\n */\n\n/**\n * Validator for fluid text sizes with `/` separator.\n * This matches the full className including prefix and postfix.\n * Tailwind-merge class groups can receive full className for top-level validators.\n */\nconst isFluidTextSize = (classPart: string): boolean => {\n  // Match full fluid class patterns: fl-text-X/Y\n  const fluidPattern = /^fl-text-([a-z0-9]+)\\/([a-z0-9]+)$/;\n  const match = classPart.match(fluidPattern);\n\n  if (!match) {\n    return false;\n  }\n\n  const [, startSize, endSize] = match;\n  const validSizes = [\n    \"xs\",\n    \"sm\",\n    \"base\",\n    \"lg\",\n    \"xl\",\n    \"2xl\",\n    \"3xl\",\n    \"4xl\",\n    \"5xl\",\n    \"6xl\",\n    \"7xl\",\n    \"8xl\",\n    \"9xl\",\n  ];\n\n  return validSizes.includes(startSize) && validSizes.includes(endSize);\n};\n\n/**\n * Custom tailwind-merge with fluid text size support.\n */\nconst customTwMerge = extendTailwindMerge((config) => {\n  return mergeConfigs(config, {\n    extend: {\n      classGroups: {\n        // Extend font-size class group to support fluid syntax\n        // Top-level validator receives the full className (e.g., \"fl-text-2xl/3xl\")\n        \"font-size\": [isFluidTextSize],\n      },\n    },\n    // Parse className to extract modifiers and base class name\n    // For @md:fl-text-4xl/5xl \u2192 modifiers:[@md], baseClassName:fl-text-4xl/5xl\n    experimentalParseClassName: ({ className, parseClassName }) => {\n      return parseClassName(className);\n    },\n  });\n});\n\n/**\n * Merge Tailwind CSS classes with clsx and tailwind-merge.\n * Supports both standard Tailwind classes and fluid-tailwind text sizing.\n * This ensures proper handling of conflicting classes.\n *\n * Fluid classes are expanded to conflict at multiple modifier levels:\n * - `@md:fl-text-2xl/3xl` conflicts with BOTH `@md:text-5xl` AND `text-4xl`\n * - This ensures fluid classes override all related text sizing\n */\nexport function cn(...inputs: ClassValue[]) {\n  const classList = clsx(inputs);\n\n  // Expand fluid classes to conflict at multiple modifier levels\n  const expanded = classList.split(\" \").flatMap((className) => {\n    // Match fluid classes with modifiers: @md:fl-text-2xl/3xl\n    const fluidWithModifier = className.match(\n      /^(@[\\w-]+):fl-text-(\\w+)\\/(\\w+)$/\n    );\n    if (fluidWithModifier) {\n      const [, modifier, startSize, endSize] = fluidWithModifier;\n      const baseFluid = `fl-text-${startSize}/${endSize}`;\n      // Return both the modified version and base version\n      // This makes it conflict with both @md:text-* and text-*\n      return [className, baseFluid];\n    }\n\n    return [className];\n  });\n\n  return customTwMerge(expanded.join(\" \"));\n}\n"],
+  "mappings": "AAAA,SAA0B,YAAY;AACtC,SAAS,qBAAqB,oBAAoB;AA4BlD,MAAM,kBAAkB,CAAC,cAA+B;AAEtD,QAAM,eAAe;AACrB,QAAM,QAAQ,UAAU,MAAM,YAAY;AAE1C,MAAI,CAAC,OAAO;AACV,WAAO;AAAA,EACT;AAEA,QAAM,CAAC,EAAE,WAAW,OAAO,IAAI;AAC/B,QAAM,aAAa;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,SAAO,WAAW,SAAS,SAAS,KAAK,WAAW,SAAS,OAAO;AACtE;AAKA,MAAM,gBAAgB,oBAAoB,CAAC,WAAW;AACpD,SAAO,aAAa,QAAQ;AAAA,IAC1B,QAAQ;AAAA,MACN,aAAa;AAAA;AAAA;AAAA,QAGX,aAAa,CAAC,eAAe;AAAA,MAC/B;AAAA,IACF;AAAA;AAAA;AAAA,IAGA,4BAA4B,CAAC,EAAE,WAAW,eAAe,MAAM;AAC7D,aAAO,eAAe,SAAS;AAAA,IACjC;AAAA,EACF,CAAC;AACH,CAAC;AAWM,SAAS,MAAM,QAAsB;AAC1C,QAAM,YAAY,KAAK,MAAM;AAG7B,QAAM,WAAW,UAAU,MAAM,GAAG,EAAE,QAAQ,CAAC,cAAc;AAE3D,UAAM,oBAAoB,UAAU;AAAA,MAClC;AAAA,IACF;AACA,QAAI,mBAAmB;AACrB,YAAM,CAAC,EAAE,UAAU,WAAW,OAAO,IAAI;AACzC,YAAM,YAAY,WAAW,SAAS,IAAI,OAAO;AAGjD,aAAO,CAAC,WAAW,SAAS;AAAA,IAC9B;AAEA,WAAO,CAAC,SAAS;AAAA,EACnB,CAAC;AAED,SAAO,cAAc,SAAS,KAAK,GAAG,CAAC;AACzC;",
   "names": []
 }

package/dist/styles/index.css

@@ -1,7 +1,20 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+/**
+ * Cadence Design System - Styles Entry Point
+ *
+ * Main stylesheet for Cadence. Import after the Tailwind config.
+ *
+ * @example
+ * // app.css
+ * @import "tailwindcss";
+ * @import "@music-vine/cadence/tailwind.config";
+ * @import "@music-vine/cadence/styles";
+ *
+ * @source "./src/**\/*.{js,ts,jsx,tsx}";
+ */
 
+/* ================================
+   Base Layer - CSS Variables
+   ================================ */
 @layer base {
   :root {
     /* Brand Colors - Themeable */

package/dist/styles/storybook.css

@@ -9,8 +9,8 @@ body {
 
 /* Theme dark mode support */
 .theme-dark {
-  background-color: #151a20;
-  color: #fff;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  color: #fff;
+  background-color: #151a20;
 }

package/dist/test/setup.d.ts

@@ -0,0 +1,2 @@
+import "@testing-library/jest-dom/vitest";
+//# sourceMappingURL=setup.d.ts.map

package/dist/test/setup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup.d.ts","sourceRoot":"","sources":["../../src/test/setup.ts"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAC"}

package/dist/theme/index.d.ts

@@ -0,0 +1,142 @@
+/**
+ * @module Theme
+ *
+ * Theme customization utilities for Cadence Design System.
+ *
+ * @example
+ * // Basic usage
+ * import { createTheme } from '@music-vine/cadence/theme';
+ *
+ * const customTheme = createTheme({
+ *   brand: {
+ *     primary: '#FF6B6B',
+ *     accent: '#4ECDC4',
+ *   }
+ * });
+ *
+ * // Apply to root or specific container
+ * <div className={customTheme}>
+ *   <Button>Themed Button</Button>
+ * </div>
+ *
+ * @example
+ * // Complete customization
+ * const theme = createTheme({
+ *   brand: {
+ *     primary: '#FF6B6B',
+ *     accent: '#4ECDC4',
+ *   },
+ *   colors: {
+ *     success: '#51CF66',
+ *     error: '#FF6B6B',
+ *     warning: '#FFD93D',
+ *     info: '#74C0FC',
+ *   },
+ *   radius: 'lg',
+ *   fonts: {
+ *     sans: 'Inter, system-ui, sans-serif',
+ *     heading: 'Poppins, system-ui, sans-serif',
+ *   },
+ * });
+ */
+/**
+ * Configuration for brand colors
+ */
+export interface BrandColors {
+    /** Accent/hover color for primary brand interactions */
+    accent?: string;
+    /** Primary brand color (used for primary buttons, links, focus rings) */
+    primary?: string;
+}
+/**
+ * Configuration for status/semantic colors
+ */
+export interface StatusColors {
+    /** Error state color */
+    error?: string;
+    /** Info state color */
+    info?: string;
+    /** Success state color */
+    success?: string;
+    /** Warning state color */
+    warning?: string;
+}
+/**
+ * Configuration for font families
+ */
+export interface FontConfig {
+    /** Font family for headings */
+    heading?: string;
+    /** Sans-serif font family for body text */
+    sans?: string;
+}
+/**
+ * Border radius presets
+ */
+export type RadiusPreset = "none" | "sm" | "md" | "lg" | "xl";
+/**
+ * Complete theme configuration
+ */
+export interface ThemeConfig {
+    /** Brand color overrides */
+    brand?: BrandColors;
+    /** Status color overrides */
+    colors?: StatusColors;
+    /** Font family overrides */
+    fonts?: FontConfig;
+    /** Border radius preset */
+    radius?: RadiusPreset;
+}
+/**
+ * Creates a custom theme by generating CSS variables based on the provided configuration.
+ * Returns a className that can be applied to any container element.
+ *
+ * @param config - Theme configuration object
+ * @returns CSS class name to apply to container
+ *
+ * @example
+ * const theme = createTheme({
+ *   brand: { primary: '#FF6B6B' }
+ * });
+ *
+ * <div className={theme}>
+ *   <Button variant="brand">Custom Themed Button</Button>
+ * </div>
+ */
+export declare function createTheme(config?: ThemeConfig): string;
+/**
+ * Type guard to check if a string is a valid hex color
+ */
+export declare function isValidHexColor(color: string): boolean;
+/**
+ * Pre-configured theme presets for common use cases
+ */
+export declare const themePresets: {
+    /**
+     * Default Uppbeat theme (pink brand color)
+     */
+    uppbeat: {
+        brand: {
+            primary: string;
+            accent: string;
+        };
+    };
+    /**
+     * Music Vine theme (coral pink brand color)
+     */
+    musicVine: {
+        brand: {
+            primary: string;
+            accent: string;
+        };
+    };
+};
+/**
+ * Helper to create a theme from a preset
+ *
+ * @example
+ * const theme = createThemeFromPreset('ocean');
+ * <div className={theme}>...</div>
+ */
+export declare function createThemeFromPreset(preset: keyof typeof themePresets): string;
+//# sourceMappingURL=index.d.ts.map

package/dist/theme/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AAEH;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,wDAAwD;IACxD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yEAAyE;IACzE,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uBAAuB;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0BAA0B;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,0BAA0B;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2CAA2C;IAC3C,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9D;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,4BAA4B;IAC5B,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,6BAA6B;IAC7B,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,2BAA2B;IAC3B,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB;AAoDD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,WAAW,CAAC,MAAM,GAAE,WAAgB,GAAG,MAAM,CAqF5D;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAEtD;AAED;;GAEG;AACH,eAAO,MAAM,YAAY;IACvB;;OAEG;;;;;;;IAQH;;OAEG;;;;;;;CAOkC,CAAC;AAExC;;;;;;GAMG;AACH,wBAAgB,qBAAqB,CACnC,MAAM,EAAE,MAAM,OAAO,YAAY,GAChC,MAAM,CAER"}

package/dist/theme/index.js

@@ -36,7 +36,7 @@ function darkenColor(hex, percent = 20) {
   return `#${(r << 16 | g << 8 | b).toString(16).padStart(6, "0")}`;
 }
 function createTheme(config = {}) {
-  const themeId = `cadence-theme-${Math.random().toString(36).substring(2, 11)}`;
+  const themeId = `cadence-theme-${Math.random().toString(36).slice(2, 11)}`;
   const cssVariables = [];
   if (config.brand?.primary) {
     cssVariables.push(`--brand-primary: ${config.brand.primary};`);

package/dist/theme/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/theme/index.ts"],
-  "sourcesContent": ["/**\n * @module Theme\n *\n * Theme customization utilities for Cadence Design System.\n *\n * @example\n * // Basic usage\n * import { createTheme } from '@music-vine/cadence/theme';\n *\n * const customTheme = createTheme({\n *   brand: {\n *     primary: '#FF6B6B',\n *     accent: '#4ECDC4',\n *   }\n * });\n *\n * // Apply to root or specific container\n * <div className={customTheme}>\n *   <Button>Themed Button</Button>\n * </div>\n *\n * @example\n * // Complete customization\n * const theme = createTheme({\n *   brand: {\n *     primary: '#FF6B6B',\n *     accent: '#4ECDC4',\n *   },\n *   colors: {\n *     success: '#51CF66',\n *     error: '#FF6B6B',\n *     warning: '#FFD93D',\n *     info: '#74C0FC',\n *   },\n *   radius: 'lg',\n *   fonts: {\n *     sans: 'Inter, system-ui, sans-serif',\n *     heading: 'Poppins, system-ui, sans-serif',\n *   },\n * });\n */\n\n/**\n * Configuration for brand colors\n */\nexport interface BrandColors {\n  /** Primary brand color (used for primary buttons, links, focus rings) */\n  primary?: string;\n  /** Accent/hover color for primary brand interactions */\n  accent?: string;\n}\n\n/**\n * Configuration for status/semantic colors\n */\nexport interface StatusColors {\n  /** Success state color */\n  success?: string;\n  /** Error state color */\n  error?: string;\n  /** Warning state color */\n  warning?: string;\n  /** Info state color */\n  info?: string;\n}\n\n/**\n * Configuration for font families\n */\nexport interface FontConfig {\n  /** Sans-serif font family for body text */\n  sans?: string;\n  /** Font family for headings */\n  heading?: string;\n}\n\n/**\n * Border radius presets\n */\nexport type RadiusPreset = \"none\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\n/**\n * Complete theme configuration\n */\nexport interface ThemeConfig {\n  /** Brand color overrides */\n  brand?: BrandColors;\n  /** Status color overrides */\n  colors?: StatusColors;\n  /** Border radius preset */\n  radius?: RadiusPreset;\n  /** Font family overrides */\n  fonts?: FontConfig;\n}\n\n/**\n * Border radius values mapped to CSS values\n */\nconst radiusValues: Record<RadiusPreset, string> = {\n  none: \"0px\",\n  sm: \"4px\",\n  md: \"8px\",\n  lg: \"12px\",\n  xl: \"16px\",\n};\n\n/**\n * Generates a lightened version of a hex color\n * Simple implementation - for production, consider using a color manipulation library\n */\nfunction lightenColor(hex: string, percent = 20): string {\n  const num = Number.parseInt(hex.replace(\"#\", \"\"), 16);\n  const r = Math.min(\n    255,\n    Math.floor((num >> 16) + ((255 - (num >> 16)) * percent) / 100)\n  );\n  const g = Math.min(\n    255,\n    Math.floor(\n      ((num >> 8) & 0x00_ff) + ((255 - ((num >> 8) & 0x00_ff)) * percent) / 100\n    )\n  );\n  const b = Math.min(\n    255,\n    Math.floor(\n      (num & 0x00_00_ff) + ((255 - (num & 0x00_00_ff)) * percent) / 100\n    )\n  );\n  return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, \"0\")}`;\n}\n\n/**\n * Generates a darkened version of a hex color\n */\nfunction darkenColor(hex: string, percent = 20): string {\n  const num = Number.parseInt(hex.replace(\"#\", \"\"), 16);\n  const r = Math.max(0, Math.floor((num >> 16) * (1 - percent / 100)));\n  const g = Math.max(\n    0,\n    Math.floor(((num >> 8) & 0x00_ff) * (1 - percent / 100))\n  );\n  const b = Math.max(0, Math.floor((num & 0x00_00_ff) * (1 - percent / 100)));\n  return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, \"0\")}`;\n}\n\n/**\n * Creates a custom theme by generating CSS variables based on the provided configuration.\n * Returns a className that can be applied to any container element.\n *\n * @param config - Theme configuration object\n * @returns CSS class name to apply to container\n *\n * @example\n * const theme = createTheme({\n *   brand: { primary: '#FF6B6B' }\n * });\n *\n * <div className={theme}>\n *   <Button variant=\"brand\">Custom Themed Button</Button>\n * </div>\n */\nexport function createTheme(config: ThemeConfig = {}): string {\n  const themeId = `cadence-theme-${Math.random().toString(36).substring(2, 11)}`;\n  const cssVariables: string[] = [];\n\n  // Brand colors\n  if (config.brand?.primary) {\n    cssVariables.push(`--brand-primary: ${config.brand.primary};`);\n    cssVariables.push(\n      `--brand-primary-hover: ${config.brand.accent || darkenColor(config.brand.primary, 15)};`\n    );\n    cssVariables.push(\n      `--brand-primary-active: ${darkenColor(config.brand.primary, 25)};`\n    );\n    cssVariables.push(\n      `--brand-secondary: ${lightenColor(config.brand.primary, 40)};`\n    );\n    cssVariables.push(\n      `--brand-secondary-hover: ${lightenColor(config.brand.primary, 30)};`\n    );\n    cssVariables.push(`--text-brand: ${config.brand.primary};`);\n    cssVariables.push(`--border-brand: ${config.brand.primary};`);\n    cssVariables.push(`--focus-ring: ${config.brand.primary};`);\n  }\n\n  if (config.brand?.accent) {\n    cssVariables.push(`--brand-primary-hover: ${config.brand.accent};`);\n  }\n\n  // Status colors\n  if (config.colors?.success) {\n    cssVariables.push(`--success: ${config.colors.success};`);\n    cssVariables.push(\n      `--success-dark: ${darkenColor(config.colors.success, 15)};`\n    );\n  }\n\n  if (config.colors?.error) {\n    cssVariables.push(`--error: ${config.colors.error};`);\n    cssVariables.push(`--error-dark: ${darkenColor(config.colors.error, 15)};`);\n  }\n\n  if (config.colors?.warning) {\n    cssVariables.push(`--warning: ${config.colors.warning};`);\n  }\n\n  if (config.colors?.info) {\n    cssVariables.push(`--info: ${config.colors.info};`);\n  }\n\n  // Border radius\n  if (config.radius) {\n    const radiusValue = radiusValues[config.radius];\n    cssVariables.push(`--radius-default: ${radiusValue};`);\n    cssVariables.push(`--radius-sm: ${Number.parseInt(radiusValue) / 2}px;`);\n    cssVariables.push(`--radius-lg: ${Number.parseInt(radiusValue) * 1.5}px;`);\n  }\n\n  // Font families\n  if (config.fonts?.sans) {\n    cssVariables.push(`--font-sans: ${config.fonts.sans};`);\n  }\n\n  if (config.fonts?.heading) {\n    cssVariables.push(`--font-heading: ${config.fonts.heading};`);\n  }\n\n  // Inject styles into document head\n  if (typeof document !== \"undefined\") {\n    const styleId = `${themeId}-styles`;\n    let styleElement = document.getElementById(styleId) as HTMLStyleElement;\n\n    if (!styleElement) {\n      styleElement = document.createElement(\"style\");\n      styleElement.id = styleId;\n      document.head.appendChild(styleElement);\n    }\n\n    styleElement.textContent = `\n      .${themeId} {\n        ${cssVariables.join(\"\\n        \")}\n      }\n    `;\n  }\n\n  return themeId;\n}\n\n/**\n * Type guard to check if a string is a valid hex color\n */\nexport function isValidHexColor(color: string): boolean {\n  return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(color);\n}\n\n/**\n * Pre-configured theme presets for common use cases\n */\nexport const themePresets = {\n  /**\n   * Default Uppbeat theme (pink brand color)\n   */\n  uppbeat: {\n    brand: {\n      primary: \"#F23D75\",\n      accent: \"#DF1F64\",\n    },\n  },\n\n  /**\n   * Music Vine theme (coral pink brand color)\n   */\n  musicVine: {\n    brand: {\n      primary: \"#FF5F6E\",\n      accent: \"#671920\",\n    },\n  },\n} satisfies Record<string, ThemeConfig>;\n\n/**\n * Helper to create a theme from a preset\n *\n * @example\n * const theme = createThemeFromPreset('ocean');\n * <div className={theme}>...</div>\n */\nexport function createThemeFromPreset(\n  preset: keyof typeof themePresets\n): string {\n  return createTheme(themePresets[preset]);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * @module Theme\n *\n * Theme customization utilities for Cadence Design System.\n *\n * @example\n * // Basic usage\n * import { createTheme } from '@music-vine/cadence/theme';\n *\n * const customTheme = createTheme({\n *   brand: {\n *     primary: '#FF6B6B',\n *     accent: '#4ECDC4',\n *   }\n * });\n *\n * // Apply to root or specific container\n * <div className={customTheme}>\n *   <Button>Themed Button</Button>\n * </div>\n *\n * @example\n * // Complete customization\n * const theme = createTheme({\n *   brand: {\n *     primary: '#FF6B6B',\n *     accent: '#4ECDC4',\n *   },\n *   colors: {\n *     success: '#51CF66',\n *     error: '#FF6B6B',\n *     warning: '#FFD93D',\n *     info: '#74C0FC',\n *   },\n *   radius: 'lg',\n *   fonts: {\n *     sans: 'Inter, system-ui, sans-serif',\n *     heading: 'Poppins, system-ui, sans-serif',\n *   },\n * });\n */\n\n/**\n * Configuration for brand colors\n */\nexport interface BrandColors {\n  /** Accent/hover color for primary brand interactions */\n  accent?: string;\n  /** Primary brand color (used for primary buttons, links, focus rings) */\n  primary?: string;\n}\n\n/**\n * Configuration for status/semantic colors\n */\nexport interface StatusColors {\n  /** Error state color */\n  error?: string;\n  /** Info state color */\n  info?: string;\n  /** Success state color */\n  success?: string;\n  /** Warning state color */\n  warning?: string;\n}\n\n/**\n * Configuration for font families\n */\nexport interface FontConfig {\n  /** Font family for headings */\n  heading?: string;\n  /** Sans-serif font family for body text */\n  sans?: string;\n}\n\n/**\n * Border radius presets\n */\nexport type RadiusPreset = \"none\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\n/**\n * Complete theme configuration\n */\nexport interface ThemeConfig {\n  /** Brand color overrides */\n  brand?: BrandColors;\n  /** Status color overrides */\n  colors?: StatusColors;\n  /** Font family overrides */\n  fonts?: FontConfig;\n  /** Border radius preset */\n  radius?: RadiusPreset;\n}\n\n/**\n * Border radius values mapped to CSS values\n */\nconst radiusValues: Record<RadiusPreset, string> = {\n  none: \"0px\",\n  sm: \"4px\",\n  md: \"8px\",\n  lg: \"12px\",\n  xl: \"16px\",\n};\n\n/**\n * Generates a lightened version of a hex color\n * Simple implementation - for production, consider using a color manipulation library\n */\nfunction lightenColor(hex: string, percent = 20): string {\n  const num = Number.parseInt(hex.replace(\"#\", \"\"), 16);\n  const r = Math.min(\n    255,\n    Math.floor((num >> 16) + ((255 - (num >> 16)) * percent) / 100)\n  );\n  const g = Math.min(\n    255,\n    Math.floor(\n      ((num >> 8) & 0x00_ff) + ((255 - ((num >> 8) & 0x00_ff)) * percent) / 100\n    )\n  );\n  const b = Math.min(\n    255,\n    Math.floor(\n      (num & 0x00_00_ff) + ((255 - (num & 0x00_00_ff)) * percent) / 100\n    )\n  );\n  return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, \"0\")}`;\n}\n\n/**\n * Generates a darkened version of a hex color\n */\nfunction darkenColor(hex: string, percent = 20): string {\n  const num = Number.parseInt(hex.replace(\"#\", \"\"), 16);\n  const r = Math.max(0, Math.floor((num >> 16) * (1 - percent / 100)));\n  const g = Math.max(\n    0,\n    Math.floor(((num >> 8) & 0x00_ff) * (1 - percent / 100))\n  );\n  const b = Math.max(0, Math.floor((num & 0x00_00_ff) * (1 - percent / 100)));\n  return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, \"0\")}`;\n}\n\n/**\n * Creates a custom theme by generating CSS variables based on the provided configuration.\n * Returns a className that can be applied to any container element.\n *\n * @param config - Theme configuration object\n * @returns CSS class name to apply to container\n *\n * @example\n * const theme = createTheme({\n *   brand: { primary: '#FF6B6B' }\n * });\n *\n * <div className={theme}>\n *   <Button variant=\"brand\">Custom Themed Button</Button>\n * </div>\n */\nexport function createTheme(config: ThemeConfig = {}): string {\n  const themeId = `cadence-theme-${Math.random().toString(36).slice(2, 11)}`;\n  const cssVariables: string[] = [];\n\n  // Brand colors\n  if (config.brand?.primary) {\n    cssVariables.push(`--brand-primary: ${config.brand.primary};`);\n    cssVariables.push(\n      `--brand-primary-hover: ${config.brand.accent || darkenColor(config.brand.primary, 15)};`\n    );\n    cssVariables.push(\n      `--brand-primary-active: ${darkenColor(config.brand.primary, 25)};`\n    );\n    cssVariables.push(\n      `--brand-secondary: ${lightenColor(config.brand.primary, 40)};`\n    );\n    cssVariables.push(\n      `--brand-secondary-hover: ${lightenColor(config.brand.primary, 30)};`\n    );\n    cssVariables.push(`--text-brand: ${config.brand.primary};`);\n    cssVariables.push(`--border-brand: ${config.brand.primary};`);\n    cssVariables.push(`--focus-ring: ${config.brand.primary};`);\n  }\n\n  if (config.brand?.accent) {\n    cssVariables.push(`--brand-primary-hover: ${config.brand.accent};`);\n  }\n\n  // Status colors\n  if (config.colors?.success) {\n    cssVariables.push(`--success: ${config.colors.success};`);\n    cssVariables.push(\n      `--success-dark: ${darkenColor(config.colors.success, 15)};`\n    );\n  }\n\n  if (config.colors?.error) {\n    cssVariables.push(`--error: ${config.colors.error};`);\n    cssVariables.push(`--error-dark: ${darkenColor(config.colors.error, 15)};`);\n  }\n\n  if (config.colors?.warning) {\n    cssVariables.push(`--warning: ${config.colors.warning};`);\n  }\n\n  if (config.colors?.info) {\n    cssVariables.push(`--info: ${config.colors.info};`);\n  }\n\n  // Border radius\n  if (config.radius) {\n    const radiusValue = radiusValues[config.radius];\n    cssVariables.push(`--radius-default: ${radiusValue};`);\n    cssVariables.push(`--radius-sm: ${Number.parseInt(radiusValue) / 2}px;`);\n    cssVariables.push(`--radius-lg: ${Number.parseInt(radiusValue) * 1.5}px;`);\n  }\n\n  // Font families\n  if (config.fonts?.sans) {\n    cssVariables.push(`--font-sans: ${config.fonts.sans};`);\n  }\n\n  if (config.fonts?.heading) {\n    cssVariables.push(`--font-heading: ${config.fonts.heading};`);\n  }\n\n  // Inject styles into document head\n  if (typeof document !== \"undefined\") {\n    const styleId = `${themeId}-styles`;\n    let styleElement = document.getElementById(styleId) as HTMLStyleElement;\n\n    if (!styleElement) {\n      styleElement = document.createElement(\"style\");\n      styleElement.id = styleId;\n      document.head.appendChild(styleElement);\n    }\n\n    styleElement.textContent = `\n      .${themeId} {\n        ${cssVariables.join(\"\\n        \")}\n      }\n    `;\n  }\n\n  return themeId;\n}\n\n/**\n * Type guard to check if a string is a valid hex color\n */\nexport function isValidHexColor(color: string): boolean {\n  return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(color);\n}\n\n/**\n * Pre-configured theme presets for common use cases\n */\nexport const themePresets = {\n  /**\n   * Default Uppbeat theme (pink brand color)\n   */\n  uppbeat: {\n    brand: {\n      primary: \"#F23D75\",\n      accent: \"#DF1F64\",\n    },\n  },\n\n  /**\n   * Music Vine theme (coral pink brand color)\n   */\n  musicVine: {\n    brand: {\n      primary: \"#FF5F6E\",\n      accent: \"#671920\",\n    },\n  },\n} satisfies Record<string, ThemeConfig>;\n\n/**\n * Helper to create a theme from a preset\n *\n * @example\n * const theme = createThemeFromPreset('ocean');\n * <div className={theme}>...</div>\n */\nexport function createThemeFromPreset(\n  preset: keyof typeof themePresets\n): string {\n  return createTheme(themePresets[preset]);\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@music-vine/cadence",
-  "version": "2.6.2",
+  "version": "3.0.0",
   "private": false,
   "type": "module",
   "sideEffects": false,
@@ -17,9 +17,6 @@
       ],
       "theme": [
         "./dist/theme/index.d.ts"
-      ],
-      "tailwind.config": [
-        "./tailwind.config.ts"
       ]
     }
   },
@@ -45,14 +42,11 @@
       "types": "./dist/theme/index.d.ts"
     },
     "./styles": "./dist/styles/index.css",
-    "./styles.v4": "./dist/styles/index.v4.css",
-    "./tailwind.config": "./tailwind.config.ts",
-    "./tailwind.config.v4": "./tailwind.config.v4.css"
+    "./tailwind.config": "./tailwind.config.css"
   },
   "files": [
     "dist",
-    "tailwind.config.ts",
-    "tailwind.config.v4.css"
+    "tailwind.config.css"
   ],
   "repository": {
     "type": "git",
@@ -110,6 +104,7 @@
     "vaul": "^1.1.2"
   },
   "devDependencies": {
+    "@biomejs/biome": "^2.3.3",
     "@playwright/test": "^1.58.2",
     "@storybook/addon-a11y": "^10.1.11",
     "@storybook/addon-docs": "^10.1.11",

package/{tailwind.config.v4.css → tailwind.config.css}

@@ -1,18 +1,22 @@
 /**
- * Cadence Design System - Tailwind CSS v4 Configuration
+ * Cadence Design System - Tailwind CSS Configuration
  *
- * This file provides CSS-first configuration for Tailwind CSS v4.
- * Use this instead of tailwind.config.ts when using Tailwind v4.
+ * CSS-first configuration for Tailwind CSS v4+.
  *
  * @example
  * // app.css
  * @import "tailwindcss";
- * @import "@music-vine/cadence/tailwind.config.v4";
- * @import "@music-vine/cadence/styles.v4";
+ * @import "@music-vine/cadence/tailwind.config";
+ * @import "@music-vine/cadence/styles";
  *
  * @source "./src/**\/*.{js,ts,jsx,tsx}";
  */
 
+/* ================================
+   Plugins
+   ================================ */
+@plugin "tailwindcss-animate";
+
 /* ================================
    Dark Mode Configuration
    ================================ */
@@ -32,20 +36,24 @@
   --breakpoint-3xl: 125rem;   /* 2000px */
 
   /* ================================
-     Brand Colors (Themeable)
+     Container Query Breakpoints
+     (matches @tailwindcss/container-queries v3 plugin defaults)
      ================================ */
-  --color-brand-primary: var(--brand-primary, #F23D75);
-  --color-brand-primary-hover: var(--brand-primary-hover, #DF1F64);
-  --color-brand-primary-active: var(--brand-primary-active, #BC1454);
-  --color-brand-secondary: var(--brand-secondary, #FFF1F4);
-  --color-brand-secondary-hover: var(--brand-secondary-hover, #FFE4EA);
+  --container-xs: 20rem;     /* 320px */
+  --container-sm: 24rem;     /* 384px */
+  --container-md: 28rem;     /* 448px */
+  --container-lg: 32rem;     /* 512px */
+  --container-xl: 36rem;     /* 576px */
+  --container-2xl: 42rem;    /* 672px */
+  --container-3xl: 48rem;    /* 768px */
+  --container-4xl: 56rem;    /* 896px */
+  --container-5xl: 64rem;    /* 1024px */
+  --container-6xl: 72rem;    /* 1152px */
+  --container-7xl: 80rem;    /* 1280px */
 
   /* ================================
      Base Colors
      ================================ */
-  --color-inherit: inherit;
-  --color-current: currentColor;
-  --color-transparent: transparent;
   --color-black: #151A20;
   --color-white: #FFF;
 
@@ -257,6 +265,19 @@
   --animate-slide-up-and-fade: slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
+/* ================================
+   Brand Colors (Themeable via CSS custom properties)
+   Uses @theme inline so var() references are inlined directly into
+   utility declarations instead of being resolved at build time.
+   ================================ */
+@theme inline {
+  --color-brand-primary: var(--brand-primary, #F23D75);
+  --color-brand-primary-hover: var(--brand-primary-hover, #DF1F64);
+  --color-brand-primary-active: var(--brand-primary-active, #BC1454);
+  --color-brand-secondary: var(--brand-secondary, #FFF1F4);
+  --color-brand-secondary-hover: var(--brand-secondary-hover, #FFE4EA);
+}
+
 /* ================================
    Keyframe Animations
    ================================ */

package/dist/styles/index.v4.css

@@ -1,49 +0,0 @@
-/**
- * Cadence Design System - Tailwind CSS v4 Entry Point
- *
- * This is the main stylesheet for Cadence when using Tailwind CSS v4.
- * Import this in your application after importing the Tailwind v4 config.
- *
- * @example
- * // app.css
- * @import "tailwindcss";
- * @import "@music-vine/cadence/tailwind.config.v4";
- * @import "@music-vine/cadence/styles.v4";
- *
- * @source "./src/**\/*.{js,ts,jsx,tsx}";
- */
-
-/* ================================
-   Base Layer - CSS Variables
-   ================================ */
-@layer base {
-  :root {
-    /* Brand Colors - Themeable */
-    --brand-primary: #f23d75;
-    --brand-primary-hover: #df1f64;
-    --brand-primary-active: #bc1454;
-    --brand-secondary: #fff1f4;
-    --brand-secondary-hover: #ffe4ea;
-    --background: #fff;
-    --foreground: #151a20;
-
-    /* Focus Ring - Follows brand color */
-    --focus-ring: var(--brand-primary);
-    --focus-ring-offset: var(--background);
-  }
-
-  .theme-dark {
-    /* Brand Colors (same in dark mode) */
-    --brand-primary: #f23d75;
-    --brand-primary-hover: #df1f64;
-    --brand-primary-active: #bc1454;
-    --brand-secondary: #461f34;
-    --brand-secondary-hover: #5f152e;
-    --background: #151a20;
-    --foreground: #fff;
-
-    /* Focus Ring - Follows brand color */
-    --focus-ring: var(--brand-primary);
-    --focus-ring-offset: var(--background);
-  }
-}