sve-ui 0.1.2 → 0.2.0

package/dist/theme/theme.css

@@ -0,0 +1,268 @@
+/**
+ * sve-ui theme CSS
+ *
+ * Import this file once in your app (e.g. `import 'sve-ui/theme.css'`) to
+ * establish all --sve-* custom properties at :root.
+ *
+ * Light values live at :root.
+ * Dark values live at :root.dark and in @media (prefers-color-scheme: dark).
+ * An explicit .dark / .light class on any element scopes the override to that
+ * subtree (ThemeProvider uses this mechanism).
+ */
+
+/* =========================================================================
+   Light theme — :root defaults
+   ========================================================================= */
+:root {
+  /* --- Colors: primary --------------------------------------------------- */
+  --sve-color-primary:            #f56565;
+  --sve-color-primary-foreground: #ffffff;
+  --sve-color-primary-surface:    #fff5f5;
+  --sve-color-primary-border:     #fc8181;
+  --sve-color-primary-hover:      #e53e3e;
+  --sve-color-primary-active:     #c53030;
+
+  /* --- Colors: secondary ------------------------------------------------- */
+  --sve-color-secondary:            #ed8936;
+  --sve-color-secondary-foreground: #ffffff;
+  --sve-color-secondary-surface:    #fffaf0;
+  --sve-color-secondary-border:     #f6ad55;
+  --sve-color-secondary-hover:      #dd6b20;
+  --sve-color-secondary-active:     #c05621;
+
+  /* --- Colors: success --------------------------------------------------- */
+  --sve-color-success:            #38a169;
+  --sve-color-success-foreground: #ffffff;
+  --sve-color-success-surface:    #f0fff4;
+  --sve-color-success-border:     #68d391;
+  --sve-color-success-hover:      #2f855a;
+  --sve-color-success-active:     #276749;
+
+  /* --- Colors: warning --------------------------------------------------- */
+  --sve-color-warning:            #ecc94b;
+  --sve-color-warning-foreground: #1a202c;
+  --sve-color-warning-surface:    #fffff0;
+  --sve-color-warning-border:     #f6e05e;
+  --sve-color-warning-hover:      #d69e2e;
+  --sve-color-warning-active:     #b7791f;
+
+  /* --- Colors: danger ---------------------------------------------------- */
+  --sve-color-danger:            #c53030;
+  --sve-color-danger-foreground: #ffffff;
+  --sve-color-danger-surface:    #fff5f5;
+  --sve-color-danger-border:     #fc8181;
+  --sve-color-danger-hover:      #9b2c2c;
+  --sve-color-danger-active:     #822727;
+
+  /* --- Colors: default --------------------------------------------------- */
+  --sve-color-default:            #e2e8f0;
+  --sve-color-default-foreground: #1a202c;
+  --sve-color-default-surface:    #f7fafc;
+  --sve-color-default-border:     #cbd5e0;
+  --sve-color-default-hover:      #cbd5e0;
+  --sve-color-default-active:     #a0aec0;
+
+  /* --- Colors: overlay --------------------------------------------------- */
+  --sve-color-overlay:            rgb(0 0 0 / 0.5);
+
+  /* --- Shadows ----------------------------------------------------------- */
+  --sve-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --sve-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+
+  /* --- Spacing ----------------------------------------------------------- */
+  --sve-space-1:  0.25rem;
+  --sve-space-2:  0.5rem;
+  --sve-space-3:  0.75rem;
+  --sve-space-4:  1rem;
+  --sve-space-5:  1.25rem;
+  --sve-space-6:  1.5rem;
+  --sve-space-8:  2rem;
+  --sve-space-10: 2.5rem;
+  --sve-space-12: 3rem;
+  --sve-space-16: 4rem;
+
+  /* --- Border radius ----------------------------------------------------- */
+  --sve-radius-none: 0;
+  --sve-radius-sm:   0.125rem;
+  --sve-radius-md:   0.375rem;
+  --sve-radius-lg:   0.5rem;
+  --sve-radius-full: 9999px;
+
+  /* --- Typography -------------------------------------------------------- */
+  --sve-font-family-sans:       system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --sve-font-size-xs:           0.75rem;
+  --sve-font-size-sm:           0.875rem;
+  --sve-font-size-md:           1rem;
+  --sve-font-size-lg:           1.125rem;
+  --sve-font-weight-normal:     400;
+  --sve-font-weight-medium:     500;
+  --sve-font-weight-bold:       700;
+  --sve-line-height-tight:      1.25;
+  --sve-line-height-normal:     1.5;
+  --sve-line-height-relaxed:    1.75;
+}
+
+/* =========================================================================
+   Dark theme — media query fallback (colorScheme = "system")
+   ========================================================================= */
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* Colors: primary */
+    --sve-color-primary:            #f87171;
+    --sve-color-primary-foreground: #ffffff;
+    --sve-color-primary-surface:    #742a2a;
+    --sve-color-primary-border:     #c53030;
+    --sve-color-primary-hover:      #fc8181;
+    --sve-color-primary-active:     #feb2b2;
+
+    /* Colors: secondary */
+    --sve-color-secondary:            #ed9e40;
+    --sve-color-secondary-foreground: #ffffff;
+    --sve-color-secondary-surface:    #7b341e;
+    --sve-color-secondary-border:     #c05621;
+    --sve-color-secondary-hover:      #f6ad55;
+    --sve-color-secondary-active:     #fbd38d;
+
+    /* Colors: success */
+    --sve-color-success:            #48bb78;
+    --sve-color-success-foreground: #ffffff;
+    --sve-color-success-surface:    #1c4532;
+    --sve-color-success-border:     #276749;
+    --sve-color-success-hover:      #68d391;
+    --sve-color-success-active:     #9ae6b4;
+
+    /* Colors: warning */
+    --sve-color-warning:            #f6e05e;
+    --sve-color-warning-foreground: #1a202c;
+    --sve-color-warning-surface:    #5f370e;
+    --sve-color-warning-border:     #975a16;
+    --sve-color-warning-hover:      #faf089;
+    --sve-color-warning-active:     #fefcbf;
+
+    /* Colors: danger */
+    --sve-color-danger:            #e53e3e;
+    --sve-color-danger-foreground: #ffffff;
+    --sve-color-danger-surface:    #3d0a0a;
+    --sve-color-danger-border:     #9b2c2c;
+    --sve-color-danger-hover:      #fc8181;
+    --sve-color-danger-active:     #feb2b2;
+
+    /* Colors: default */
+    --sve-color-default:            #4a5568;
+    --sve-color-default-foreground: #edf2f7;
+    --sve-color-default-surface:    #1a202c;
+    --sve-color-default-border:     #4a5568;
+    --sve-color-default-hover:      #718096;
+    --sve-color-default-active:     #a0aec0;
+
+    /* Colors: overlay */
+    --sve-color-overlay:            rgb(0 0 0 / 0.7);
+
+    /* Shadows — stronger on dark surfaces so they remain visible */
+    --sve-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
+    --sve-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.5);
+  }
+}
+
+/* =========================================================================
+   Dark theme — explicit class override (ThemeProvider colorScheme="dark")
+   Works at any nesting level — not just :root.
+   ========================================================================= */
+:where(.dark) {
+  --sve-color-primary:            #f87171;
+  --sve-color-primary-foreground: #ffffff;
+  --sve-color-primary-surface:    #742a2a;
+  --sve-color-primary-border:     #c53030;
+  --sve-color-primary-hover:      #fc8181;
+  --sve-color-primary-active:     #feb2b2;
+
+  --sve-color-secondary:            #ed9e40;
+  --sve-color-secondary-foreground: #ffffff;
+  --sve-color-secondary-surface:    #7b341e;
+  --sve-color-secondary-border:     #c05621;
+  --sve-color-secondary-hover:      #f6ad55;
+  --sve-color-secondary-active:     #fbd38d;
+
+  --sve-color-success:            #48bb78;
+  --sve-color-success-foreground: #ffffff;
+  --sve-color-success-surface:    #1c4532;
+  --sve-color-success-border:     #276749;
+  --sve-color-success-hover:      #68d391;
+  --sve-color-success-active:     #9ae6b4;
+
+  --sve-color-warning:            #f6e05e;
+  --sve-color-warning-foreground: #1a202c;
+  --sve-color-warning-surface:    #5f370e;
+  --sve-color-warning-border:     #975a16;
+  --sve-color-warning-hover:      #faf089;
+  --sve-color-warning-active:     #fefcbf;
+
+  --sve-color-danger:            #e53e3e;
+  --sve-color-danger-foreground: #ffffff;
+  --sve-color-danger-surface:    #3d0a0a;
+  --sve-color-danger-border:     #9b2c2c;
+  --sve-color-danger-hover:      #fc8181;
+  --sve-color-danger-active:     #feb2b2;
+
+  --sve-color-default:            #4a5568;
+  --sve-color-default-foreground: #edf2f7;
+  --sve-color-default-surface:    #1a202c;
+  --sve-color-default-border:     #4a5568;
+  --sve-color-default-hover:      #718096;
+  --sve-color-default-active:     #a0aec0;
+
+  --sve-color-overlay:            rgb(0 0 0 / 0.7);
+
+  /* Shadows — stronger on dark surfaces so they remain visible */
+  --sve-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
+  --sve-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.5);
+}
+
+/* =========================================================================
+   Light class override — for explicit colorScheme="light" inside a dark root
+   ========================================================================= */
+:where(.light) {
+  --sve-color-primary:            #f56565;
+  --sve-color-primary-foreground: #ffffff;
+  --sve-color-primary-surface:    #fff5f5;
+  --sve-color-primary-border:     #fc8181;
+  --sve-color-primary-hover:      #e53e3e;
+  --sve-color-primary-active:     #c53030;
+
+  --sve-color-secondary:            #ed8936;
+  --sve-color-secondary-foreground: #ffffff;
+  --sve-color-secondary-surface:    #fffaf0;
+  --sve-color-secondary-border:     #f6ad55;
+  --sve-color-secondary-hover:      #dd6b20;
+  --sve-color-secondary-active:     #c05621;
+
+  --sve-color-success:            #38a169;
+  --sve-color-success-foreground: #ffffff;
+  --sve-color-success-surface:    #f0fff4;
+  --sve-color-success-border:     #68d391;
+  --sve-color-success-hover:      #2f855a;
+  --sve-color-success-active:     #276749;
+
+  --sve-color-warning:            #ecc94b;
+  --sve-color-warning-foreground: #1a202c;
+  --sve-color-warning-surface:    #fffff0;
+  --sve-color-warning-border:     #f6e05e;
+  --sve-color-warning-hover:      #d69e2e;
+  --sve-color-warning-active:     #b7791f;
+
+  --sve-color-danger:            #c53030;
+  --sve-color-danger-foreground: #ffffff;
+  --sve-color-danger-surface:    #fff5f5;
+  --sve-color-danger-border:     #fc8181;
+  --sve-color-danger-hover:      #9b2c2c;
+  --sve-color-danger-active:     #822727;
+
+  --sve-color-default:            #e2e8f0;
+  --sve-color-default-foreground: #1a202c;
+  --sve-color-default-surface:    #f7fafc;
+  --sve-color-default-border:     #cbd5e0;
+  --sve-color-default-hover:      #cbd5e0;
+  --sve-color-default-active:     #a0aec0;
+
+  --sve-color-overlay:            rgb(0 0 0 / 0.5);
+}

package/dist/theme/tokens.d.ts

@@ -0,0 +1,108 @@
+/**
+ * Semantic token definitions and typed SveTheme interface.
+ * CSS custom properties use the naming convention: --sve-<category>-<name>[-<state>]
+ */
+export interface SveColorRole {
+    /** Primary fill color */
+    DEFAULT: string;
+    /** Text/icon color on that fill */
+    foreground: string;
+    /** Light tinted background */
+    surface: string;
+    /** Border or outline color */
+    border: string;
+    /** Hover state fill */
+    hover: string;
+    /** Active/pressed state fill */
+    active: string;
+}
+export interface SveColors {
+    primary: SveColorRole;
+    secondary: SveColorRole;
+    success: SveColorRole;
+    warning: SveColorRole;
+    danger: SveColorRole;
+    default: SveColorRole;
+    /** Semi-transparent overlay used by Dialog backdrop */
+    overlay: string;
+}
+export interface SveSpacing {
+    1: string;
+    2: string;
+    3: string;
+    4: string;
+    5: string;
+    6: string;
+    8: string;
+    10: string;
+    12: string;
+    16: string;
+}
+export interface SveRadius {
+    none: string;
+    sm: string;
+    md: string;
+    lg: string;
+    full: string;
+}
+export interface SveShadow {
+    sm: string;
+    md: string;
+}
+export interface SveTypography {
+    family: {
+        sans: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    weight: {
+        normal: string;
+        medium: string;
+        bold: string;
+    };
+    lineHeight: {
+        tight: string;
+        normal: string;
+        relaxed: string;
+    };
+}
+export interface SveTheme {
+    colors: SveColors;
+    spacing: SveSpacing;
+    radius: SveRadius;
+    shadow: SveShadow;
+    typography: SveTypography;
+}
+/**
+ * Deeply partial version of SveTheme — used for override props.
+ * Allows consumers to override any individual token without providing the full set.
+ */
+export type PartialSveTheme = {
+    colors?: {
+        [K in keyof SveColors]?: Partial<SveColorRole>;
+    };
+    spacing?: Partial<SveSpacing>;
+    radius?: Partial<SveRadius>;
+    shadow?: Partial<SveShadow>;
+    typography?: {
+        family?: Partial<SveTypography['family']>;
+        size?: Partial<SveTypography['size']>;
+        weight?: Partial<SveTypography['weight']>;
+        lineHeight?: Partial<SveTypography['lineHeight']>;
+    };
+};
+export declare const lightTokens: SveTheme;
+export declare const darkTokens: SveTheme;
+/**
+ * Serializes a partial SveTheme override into an inline CSS variable string
+ * suitable for setting as the `style` attribute on the ThemeProvider wrapper.
+ *
+ * Example: `themeToVars({ colors: { primary: { DEFAULT: '#ff0000' } } })`
+ * → `"--sve-color-primary:#ff0000;"`
+ */
+export declare function themeToVars(theme: PartialSveTheme): string;
+//# sourceMappingURL=tokens.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/lib/theme/tokens.ts"],"names":[],"mappings":"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"}

package/dist/theme/tokens.js

@@ -0,0 +1,236 @@
+/**
+ * Semantic token definitions and typed SveTheme interface.
+ * CSS custom properties use the naming convention: --sve-<category>-<name>[-<state>]
+ */
+import { primaryScale, secondaryScale, successScale, warningScale, dangerScale, defaultScale } from './palette';
+// ---------------------------------------------------------------------------
+// Light tokens
+// ---------------------------------------------------------------------------
+export const lightTokens = {
+    colors: {
+        primary: {
+            DEFAULT: primaryScale[500],
+            foreground: '#ffffff',
+            surface: primaryScale[50],
+            border: primaryScale[300],
+            hover: primaryScale[600],
+            active: primaryScale[700],
+        },
+        secondary: {
+            DEFAULT: secondaryScale[500],
+            foreground: '#ffffff',
+            surface: secondaryScale[50],
+            border: secondaryScale[300],
+            hover: secondaryScale[600],
+            active: secondaryScale[700],
+        },
+        success: {
+            DEFAULT: successScale[500],
+            foreground: '#ffffff',
+            surface: successScale[50],
+            border: successScale[300],
+            hover: successScale[600],
+            active: successScale[700],
+        },
+        warning: {
+            DEFAULT: warningScale[400],
+            foreground: '#1a202c',
+            surface: warningScale[50],
+            border: warningScale[300],
+            hover: warningScale[500],
+            active: warningScale[600],
+        },
+        danger: {
+            DEFAULT: dangerScale[500],
+            foreground: '#ffffff',
+            surface: dangerScale[50],
+            border: dangerScale[300],
+            hover: dangerScale[600],
+            active: dangerScale[700],
+        },
+        default: {
+            DEFAULT: defaultScale[200],
+            foreground: defaultScale[800],
+            surface: defaultScale[50],
+            border: defaultScale[300],
+            hover: defaultScale[300],
+            active: defaultScale[400],
+        },
+        overlay: 'rgb(0 0 0 / 0.5)',
+    },
+    spacing: {
+        1: '0.25rem',
+        2: '0.5rem',
+        3: '0.75rem',
+        4: '1rem',
+        5: '1.25rem',
+        6: '1.5rem',
+        8: '2rem',
+        10: '2.5rem',
+        12: '3rem',
+        16: '4rem',
+    },
+    radius: {
+        none: '0',
+        sm: '0.125rem',
+        md: '0.375rem',
+        lg: '0.5rem',
+        full: '9999px',
+    },
+    shadow: {
+        sm: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
+        md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+    },
+    typography: {
+        family: {
+            sans: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+        },
+        size: {
+            xs: '0.75rem',
+            sm: '0.875rem',
+            md: '1rem',
+            lg: '1.125rem',
+        },
+        weight: {
+            normal: '400',
+            medium: '500',
+            bold: '700',
+        },
+        lineHeight: {
+            tight: '1.25',
+            normal: '1.5',
+            relaxed: '1.75',
+        },
+    },
+};
+// ---------------------------------------------------------------------------
+// Dark tokens
+// ---------------------------------------------------------------------------
+export const darkTokens = {
+    colors: {
+        primary: {
+            DEFAULT: primaryScale[400],
+            foreground: '#ffffff',
+            surface: primaryScale[900],
+            border: primaryScale[700],
+            hover: primaryScale[300],
+            active: primaryScale[200],
+        },
+        secondary: {
+            DEFAULT: secondaryScale[400],
+            foreground: '#ffffff',
+            surface: secondaryScale[900],
+            border: secondaryScale[700],
+            hover: secondaryScale[300],
+            active: secondaryScale[200],
+        },
+        success: {
+            DEFAULT: successScale[400],
+            foreground: '#ffffff',
+            surface: successScale[900],
+            border: successScale[700],
+            hover: successScale[300],
+            active: successScale[200],
+        },
+        warning: {
+            DEFAULT: warningScale[300],
+            foreground: '#1a202c',
+            surface: warningScale[900],
+            border: warningScale[700],
+            hover: warningScale[200],
+            active: warningScale[100],
+        },
+        danger: {
+            DEFAULT: dangerScale[400],
+            foreground: '#ffffff',
+            surface: dangerScale[900],
+            border: dangerScale[700],
+            hover: dangerScale[300],
+            active: dangerScale[200],
+        },
+        default: {
+            DEFAULT: defaultScale[600],
+            foreground: defaultScale[100],
+            surface: defaultScale[800],
+            border: defaultScale[600],
+            hover: defaultScale[500],
+            active: defaultScale[400],
+        },
+        overlay: 'rgb(0 0 0 / 0.7)',
+    },
+    spacing: lightTokens.spacing,
+    radius: lightTokens.radius,
+    shadow: {
+        sm: '0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4)',
+        md: '0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.5)',
+    },
+    typography: lightTokens.typography,
+};
+// Freeze shared sub-objects so mutating darkTokens.spacing cannot silently
+// corrupt lightTokens.spacing (they share the same reference).
+Object.freeze(lightTokens.spacing);
+Object.freeze(lightTokens.radius);
+Object.freeze(lightTokens.shadow);
+Object.freeze(lightTokens.typography.family);
+Object.freeze(lightTokens.typography.size);
+Object.freeze(lightTokens.typography.weight);
+Object.freeze(lightTokens.typography.lineHeight);
+Object.freeze(lightTokens.typography);
+Object.freeze(lightTokens);
+Object.freeze(darkTokens);
+function flattenToVars(obj, prefix) {
+    let result = '';
+    for (const [key, value] of Object.entries(obj)) {
+        const cssKey = key === 'DEFAULT' ? prefix : `${prefix}-${camelToKebab(key)}`;
+        if (typeof value === 'string') {
+            result += `${cssKey}:${value};`;
+        }
+        else {
+            result += flattenToVars(value, cssKey);
+        }
+    }
+    return result;
+}
+function camelToKebab(str) {
+    return str.replace(/([A-Z])/g, '-$1').toLowerCase();
+}
+/**
+ * Serializes a partial SveTheme override into an inline CSS variable string
+ * suitable for setting as the `style` attribute on the ThemeProvider wrapper.
+ *
+ * Example: `themeToVars({ colors: { primary: { DEFAULT: '#ff0000' } } })`
+ * → `"--sve-color-primary:#ff0000;"`
+ */
+export function themeToVars(theme) {
+    let vars = '';
+    if (theme.colors) {
+        vars += flattenToVars(theme.colors, '--sve-color');
+    }
+    if (theme.spacing) {
+        vars += flattenToVars(theme.spacing, '--sve-space');
+    }
+    if (theme.radius) {
+        vars += flattenToVars(theme.radius, '--sve-radius');
+    }
+    if (theme.shadow) {
+        vars += flattenToVars(theme.shadow, '--sve-shadow');
+    }
+    if (theme.typography) {
+        // Each typography sub-group maps to a distinct CSS variable namespace.
+        // Handled individually so generated var names match theme.css exactly:
+        //   family   → --sve-font-family-*
+        //   size     → --sve-font-size-*
+        //   weight   → --sve-font-weight-*
+        //   lineHeight → --sve-line-height-* (note: no "font" in this prefix)
+        const typo = theme.typography;
+        if (typo.family)
+            vars += flattenToVars(typo.family, '--sve-font-family');
+        if (typo.size)
+            vars += flattenToVars(typo.size, '--sve-font-size');
+        if (typo.weight)
+            vars += flattenToVars(typo.weight, '--sve-font-weight');
+        if (typo.lineHeight)
+            vars += flattenToVars(typo.lineHeight, '--sve-line-height');
+    }
+    return vars;
+}

package/dist/theme/typography.d.ts

@@ -61,3 +61,4 @@ export declare const typography: {
         "10": string;
     };
 };
+//# sourceMappingURL=typography.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../src/lib/theme/typography.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8DtB,CAAA"}