@tenerife.music/ui 0.0.7 → 1.0.1

package/dist/tokens/shadows.d.ts

@@ -0,0 +1,172 @@
+/**
+ * Shadow and Glow System Tokens
+ *
+ * Complete shadow system for Tenerife UI based on design system specifications.
+ * Includes: elevation shadows, colored shadows (primary/accent), glow effects,
+ * and focus ring tokens for accessibility.
+ *
+ * @see docs/tenerife_audit/design_system.md - shadow system section
+ */
+/**
+ * Elevation Shadow Tokens
+ * Used for component depth and elevation hierarchy
+ * Values: none, xs, sm, md, lg, xl, 2xl
+ */
+export declare const elevationShadows: {
+    readonly none: "none";
+    readonly xs: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
+    readonly sm: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
+    readonly md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
+    readonly lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
+    readonly xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)";
+    readonly "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)";
+};
+/**
+ * Primary Colored Shadow Tokens
+ * Used for interactive elements and brand emphasis with primary color
+ */
+export declare const primaryColoredShadows: {
+    readonly xs: "0 1px 2px 0 hsl(var(--primary-500) / 0.15)";
+    readonly sm: "0 2px 4px 0 hsl(var(--primary-500) / 0.2)";
+    readonly md: "0 4px 8px 0 hsl(var(--primary-500) / 0.3)";
+    readonly lg: "0 8px 16px 0 hsl(var(--primary-500) / 0.4)";
+    readonly xl: "0 12px 24px 0 hsl(var(--primary-500) / 0.5)";
+    readonly "2xl": "0 16px 32px 0 hsl(var(--primary-500) / 0.6)";
+};
+/**
+ * Accent Colored Shadow Tokens
+ * Used for accent elements and highlights with accent color
+ */
+export declare const accentColoredShadows: {
+    readonly xs: "0 1px 2px 0 hsl(var(--accent-500) / 0.15)";
+    readonly sm: "0 2px 4px 0 hsl(var(--accent-500) / 0.2)";
+    readonly md: "0 4px 8px 0 hsl(var(--accent-500) / 0.3)";
+    readonly lg: "0 8px 16px 0 hsl(var(--accent-500) / 0.4)";
+    readonly xl: "0 12px 24px 0 hsl(var(--accent-500) / 0.5)";
+    readonly "2xl": "0 16px 32px 0 hsl(var(--accent-500) / 0.6)";
+};
+/**
+ * Glow Effect Tokens
+ * Used for focus states, brand emphasis, and interactive feedback
+ */
+export declare const glowEffects: {
+    readonly "glow-primary": "0 0 20px 0 hsl(var(--primary-500) / 0.5), 0 0 40px 0 hsl(var(--primary-500) / 0.3)";
+    readonly "glow-primary-subtle": "0 0 8px 0 hsl(var(--primary-500) / 0.3)";
+    readonly "glow-primary-medium": "0 0 16px 0 hsl(var(--primary-500) / 0.5)";
+    readonly "glow-primary-strong": "0 0 24px 0 hsl(var(--primary-500) / 0.6)";
+    readonly "glow-accent": "0 0 20px 0 hsl(var(--accent-500) / 0.5), 0 0 40px 0 hsl(var(--accent-500) / 0.3)";
+    readonly "glow-accent-subtle": "0 0 8px 0 hsl(var(--accent-500) / 0.3)";
+    readonly "glow-accent-medium": "0 0 16px 0 hsl(var(--accent-500) / 0.5)";
+    readonly "glow-accent-strong": "0 0 24px 0 hsl(var(--accent-500) / 0.6)";
+};
+/**
+ * Focus Ring Tokens
+ * Used for keyboard focus indicators (accessibility)
+ */
+export declare const focusRings: {
+    readonly default: "0 0 0 3px hsl(var(--ring) / 0.5)";
+    readonly primary: "0 0 0 3px hsl(var(--primary-500) / 0.3)";
+    readonly accent: "0 0 0 3px hsl(var(--accent-500) / 0.3)";
+    readonly "focus-primary": "0 0 0 3px hsl(var(--primary-500) / 0.3)";
+    readonly "focus-accent": "0 0 0 3px hsl(var(--accent-500) / 0.3)";
+};
+/**
+ * CSS Custom Properties for Shadows
+ * These will be injected into the theme system
+ */
+export declare const shadowCSSVariables: {
+    readonly "--shadow-none": "none";
+    readonly "--shadow-xs": "0 1px 2px 0 rgb(0 0 0 / 0.05)";
+    readonly "--shadow-sm": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
+    readonly "--shadow-md": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
+    readonly "--shadow-lg": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
+    readonly "--shadow-xl": "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)";
+    readonly "--shadow-2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)";
+    readonly "--shadow-primary-xs": "0 1px 2px 0 hsl(var(--primary-500) / 0.15)";
+    readonly "--shadow-primary-sm": "0 2px 4px 0 hsl(var(--primary-500) / 0.2)";
+    readonly "--shadow-primary-md": "0 4px 8px 0 hsl(var(--primary-500) / 0.3)";
+    readonly "--shadow-primary-lg": "0 8px 16px 0 hsl(var(--primary-500) / 0.4)";
+    readonly "--shadow-primary-xl": "0 12px 24px 0 hsl(var(--primary-500) / 0.5)";
+    readonly "--shadow-primary-2xl": "0 16px 32px 0 hsl(var(--primary-500) / 0.6)";
+    readonly "--shadow-accent-xs": "0 1px 2px 0 hsl(var(--accent-500) / 0.15)";
+    readonly "--shadow-accent-sm": "0 2px 4px 0 hsl(var(--accent-500) / 0.2)";
+    readonly "--shadow-accent-md": "0 4px 8px 0 hsl(var(--accent-500) / 0.3)";
+    readonly "--shadow-accent-lg": "0 8px 16px 0 hsl(var(--accent-500) / 0.4)";
+    readonly "--shadow-accent-xl": "0 12px 24px 0 hsl(var(--accent-500) / 0.5)";
+    readonly "--shadow-accent-2xl": "0 16px 32px 0 hsl(var(--accent-500) / 0.6)";
+    readonly "--glow-primary": "0 0 20px 0 hsl(var(--primary-500) / 0.5), 0 0 40px 0 hsl(var(--primary-500) / 0.3)";
+    readonly "--glow-primary-subtle": "0 0 8px 0 hsl(var(--primary-500) / 0.3)";
+    readonly "--glow-primary-medium": "0 0 16px 0 hsl(var(--primary-500) / 0.5)";
+    readonly "--glow-primary-strong": "0 0 24px 0 hsl(var(--primary-500) / 0.6)";
+    readonly "--glow-accent": "0 0 20px 0 hsl(var(--accent-500) / 0.5), 0 0 40px 0 hsl(var(--accent-500) / 0.3)";
+    readonly "--glow-accent-subtle": "0 0 8px 0 hsl(var(--accent-500) / 0.3)";
+    readonly "--glow-accent-medium": "0 0 16px 0 hsl(var(--accent-500) / 0.5)";
+    readonly "--glow-accent-strong": "0 0 24px 0 hsl(var(--accent-500) / 0.6)";
+    readonly "--focus-ring-default": "0 0 0 3px hsl(var(--ring) / 0.5)";
+    readonly "--focus-ring-primary": "0 0 0 3px hsl(var(--primary-500) / 0.3)";
+    readonly "--focus-ring-accent": "0 0 0 3px hsl(var(--accent-500) / 0.3)";
+    readonly "--focus-primary": "0 0 0 3px hsl(var(--primary-500) / 0.3)";
+    readonly "--focus-accent": "0 0 0 3px hsl(var(--accent-500) / 0.3)";
+};
+/**
+ * Component Shadow Mapping
+ * Defines which shadow level to use for different component states
+ */
+export declare const componentShadowMapping: {
+    readonly card: {
+        readonly default: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
+        readonly hover: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
+        readonly active: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
+        readonly selected: "0 2px 4px 0 hsl(var(--primary-500) / 0.2)";
+    };
+    readonly button: {
+        readonly default: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
+        readonly hover: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
+        readonly active: "none";
+        readonly focus: "0 0 0 3px hsl(var(--primary-500) / 0.3)";
+    };
+    readonly "button-accent": {
+        readonly default: "0 1px 2px 0 hsl(var(--accent-500) / 0.15)";
+        readonly hover: "0 2px 4px 0 hsl(var(--accent-500) / 0.2)";
+        readonly active: "none";
+        readonly focus: "0 0 0 3px hsl(var(--accent-500) / 0.3)";
+    };
+    readonly modal: {
+        readonly default: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)";
+        readonly backdrop: "rgba(0, 0, 0, 0.5)";
+    };
+    readonly dropdown: {
+        readonly default: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
+        readonly hover: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
+    };
+    readonly tooltip: {
+        readonly default: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
+    };
+    readonly toast: {
+        readonly default: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
+        readonly success: "0 10px 15px -3px hsl(var(--success) / 0.3)";
+        readonly error: "0 10px 15px -3px hsl(var(--error) / 0.3)";
+    };
+};
+/**
+ * Tailwind Shadow Config
+ * Maps to Tailwind theme.extend.boxShadow
+ */
+export declare const tailwindShadowConfig: {
+    readonly boxShadow: Record<string, string>;
+    readonly ringWidth: {
+        readonly DEFAULT: "3px";
+        readonly sm: "2px";
+        readonly md: "3px";
+        readonly lg: "4px";
+    };
+    readonly ringColor: Record<string, string>;
+};
+/**
+ * Type Exports
+ */
+export type ElevationShadow = keyof typeof elevationShadows;
+export type ColoredShadow = keyof typeof primaryColoredShadows | keyof typeof accentColoredShadows;
+export type GlowEffect = keyof typeof glowEffects;
+export type FocusRing = keyof typeof focusRings;
+//# sourceMappingURL=shadows.d.ts.map

package/dist/tokens/shadows.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shadows.d.ts","sourceRoot":"","sources":["../../src/tokens/shadows.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH;;;;GAIG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;CAQnB,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,qBAAqB;;;;;;;CAOxB,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,oBAAoB;;;;;;;CAOvB,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,WAAW;;;;;;;;;CAad,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,UAAU;;;;;;CAMb,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0CrB,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCzB,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,oBAAoB;wBAyC1B,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;;;;;;;wBAiBtB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;CACnB,CAAC;AAEX;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,gBAAgB,CAAC;AAC5D,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,qBAAqB,GAAG,MAAM,OAAO,oBAAoB,CAAC;AACnG,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,WAAW,CAAC;AAClD,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,UAAU,CAAC"}

package/dist/tokens/spacing.d.ts

@@ -1,6 +1,21 @@
+/**
+ * Spacing System Tokens
+ *
+ * Complete spacing system for Tenerife UI based on 8px grid system.
+ * Includes: base spacing scale (0-96), semantic spacing tokens (xs..5xl),
+ * and layout spacing tokens (sections, containers, grids).
+ *
+ * Base unit: 8px (0.5rem)
+ * All spacing values are multiples of 8px for consistent layout rhythm.
+ */
+/**
+ * Base Spacing Scale
+ * Values from 0 to 96 based on 8px grid system
+ * Format: numeric keys map to rem values
+ */
 export declare const spacing: {
+    readonly 0: "0";
     readonly px: "1px";
-    readonly 0: "0px";
     readonly 0.5: "0.125rem";
     readonly 1: "0.25rem";
     readonly 1.5: "0.375rem";
@@ -35,5 +50,144 @@ export declare const spacing: {
     readonly 80: "20rem";
     readonly 96: "24rem";
 };
+/**
+ * Semantic Spacing Tokens
+ * Named tokens for common spacing use cases
+ * Maps to base spacing scale
+ */
+export declare const semanticSpacing: {
+    readonly xs: "0.25rem";
+    readonly sm: "0.5rem";
+    readonly md: "1rem";
+    readonly lg: "1.5rem";
+    readonly xl: "2rem";
+    readonly "2xl": "3rem";
+    readonly "3xl": "4rem";
+    readonly "4xl": "5rem";
+    readonly "5xl": "6rem";
+    readonly none: "0";
+};
+/**
+ * Layout Spacing Tokens
+ * Spacing for common layout patterns
+ */
+export declare const layoutSpacing: {
+    readonly section: {
+        readonly xs: "1.5rem";
+        readonly sm: "2rem";
+        readonly md: "3rem";
+        readonly lg: "4rem";
+        readonly xl: "5rem";
+        readonly "2xl": "6rem";
+    };
+    readonly container: {
+        readonly xs: "0.5rem";
+        readonly sm: "1rem";
+        readonly md: "1.5rem";
+        readonly lg: "2rem";
+        readonly xl: "3rem";
+    };
+    readonly grid: {
+        readonly xs: "0.5rem";
+        readonly sm: "1rem";
+        readonly md: "1.5rem";
+        readonly lg: "2rem";
+        readonly xl: "3rem";
+    };
+    readonly stack: {
+        readonly xs: "0.25rem";
+        readonly sm: "0.5rem";
+        readonly md: "1rem";
+        readonly lg: "1.5rem";
+        readonly xl: "2rem";
+    };
+    readonly component: {
+        readonly xs: "0.25rem";
+        readonly sm: "0.5rem";
+        readonly md: "1rem";
+        readonly lg: "1.5rem";
+        readonly xl: "2rem";
+    };
+};
+/**
+ * CSS Custom Properties for Spacing
+ * These will be injected into the theme system
+ */
+export declare const spacingCSSVariables: {
+    readonly "--spacing-0": "0";
+    readonly "--spacing-px": "1px";
+    readonly "--spacing-0-5": "0.125rem";
+    readonly "--spacing-1": "0.25rem";
+    readonly "--spacing-1-5": "0.375rem";
+    readonly "--spacing-2": "0.5rem";
+    readonly "--spacing-2-5": "0.625rem";
+    readonly "--spacing-3": "0.75rem";
+    readonly "--spacing-3-5": "0.875rem";
+    readonly "--spacing-4": "1rem";
+    readonly "--spacing-5": "1.25rem";
+    readonly "--spacing-6": "1.5rem";
+    readonly "--spacing-7": "1.75rem";
+    readonly "--spacing-8": "2rem";
+    readonly "--spacing-9": "2.25rem";
+    readonly "--spacing-10": "2.5rem";
+    readonly "--spacing-11": "2.75rem";
+    readonly "--spacing-12": "3rem";
+    readonly "--spacing-14": "3.5rem";
+    readonly "--spacing-16": "4rem";
+    readonly "--spacing-20": "5rem";
+    readonly "--spacing-24": "6rem";
+    readonly "--spacing-xs": "0.25rem";
+    readonly "--spacing-sm": "0.5rem";
+    readonly "--spacing-md": "1rem";
+    readonly "--spacing-lg": "1.5rem";
+    readonly "--spacing-xl": "2rem";
+    readonly "--spacing-2xl": "3rem";
+    readonly "--spacing-3xl": "4rem";
+    readonly "--spacing-4xl": "5rem";
+    readonly "--spacing-5xl": "6rem";
+    readonly "--spacing-none": "0";
+    readonly "--layout-section-xs": "1.5rem";
+    readonly "--layout-section-sm": "2rem";
+    readonly "--layout-section-md": "3rem";
+    readonly "--layout-section-lg": "4rem";
+    readonly "--layout-section-xl": "5rem";
+    readonly "--layout-section-2xl": "6rem";
+    readonly "--layout-container-xs": "0.5rem";
+    readonly "--layout-container-sm": "1rem";
+    readonly "--layout-container-md": "1.5rem";
+    readonly "--layout-container-lg": "2rem";
+    readonly "--layout-container-xl": "3rem";
+    readonly "--layout-grid-xs": "0.5rem";
+    readonly "--layout-grid-sm": "1rem";
+    readonly "--layout-grid-md": "1.5rem";
+    readonly "--layout-grid-lg": "2rem";
+    readonly "--layout-grid-xl": "3rem";
+    readonly "--layout-stack-xs": "0.25rem";
+    readonly "--layout-stack-sm": "0.5rem";
+    readonly "--layout-stack-md": "1rem";
+    readonly "--layout-stack-lg": "1.5rem";
+    readonly "--layout-stack-xl": "2rem";
+    readonly "--layout-component-xs": "0.25rem";
+    readonly "--layout-component-sm": "0.5rem";
+    readonly "--layout-component-md": "1rem";
+    readonly "--layout-component-lg": "1.5rem";
+    readonly "--layout-component-xl": "2rem";
+};
+/**
+ * Tailwind Spacing Config
+ * Maps to Tailwind theme.extend.spacing
+ */
+export declare const tailwindSpacingConfig: {
+    readonly spacing: Record<string, string>;
+};
+/**
+ * Type Exports
+ */
 export type Spacing = keyof typeof spacing;
+export type SemanticSpacing = keyof typeof semanticSpacing;
+export type SectionSpacing = keyof typeof layoutSpacing.section;
+export type ContainerSpacing = keyof typeof layoutSpacing.container;
+export type GridSpacing = keyof typeof layoutSpacing.grid;
+export type StackSpacing = keyof typeof layoutSpacing.stack;
+export type ComponentSpacing = keyof typeof layoutSpacing.component;
 //# sourceMappingURL=spacing.d.ts.map

package/dist/tokens/spacing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"spacing.d.ts","sourceRoot":"","sources":["../../src/tokens/spacing.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCV,CAAC;AAEX,MAAM,MAAM,OAAO,GAAG,MAAM,OAAO,OAAO,CAAC"}
+{"version":3,"file":"spacing.d.ts","sourceRoot":"","sources":["../../src/tokens/spacing.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH;;;;GAIG;AACH,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CV,CAAC;AAEX;;;;GAIG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;CA8BlB,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8ChB,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwEtB,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,qBAAqB;sBAc3B,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;CACnB,CAAC;AAEX;;GAEG;AACH,MAAM,MAAM,OAAO,GAAG,MAAM,OAAO,OAAO,CAAC;AAC3C,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,eAAe,CAAC;AAC3D,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,aAAa,CAAC,OAAO,CAAC;AAChE,MAAM,MAAM,gBAAgB,GAAG,MAAM,OAAO,aAAa,CAAC,SAAS,CAAC;AACpE,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,aAAa,CAAC,IAAI,CAAC;AAC1D,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,aAAa,CAAC,KAAK,CAAC;AAC5D,MAAM,MAAM,gBAAgB,GAAG,MAAM,OAAO,aAAa,CAAC,SAAS,CAAC"}