@zicas/ui 0.0.0-stage → 0.1.0-beta.0

package/dist/themes/compose-theme.js

@@ -0,0 +1,82 @@
+import { borderThemes } from "./fragments/borders.js";
+import { densityThemes } from "./fragments/density.js";
+import { elevationThemes } from "./fragments/elevation.js";
+import { fontFamilyThemes } from "./fragments/font-family.js";
+import { lineHeightThemes } from "./fragments/line-height.js";
+import { motionThemes } from "./fragments/motion.js";
+import { radiusThemes } from "./fragments/radius.js";
+import { compactSemanticColorTheme, semanticColorThemes } from "./fragments/semantic-colors.js";
+import { typeScaleThemes } from "./fragments/type-scale.js";
+var compactPalette = Symbol("compactPalette");
+function withCompactPalette(options) {
+	return {
+		...options,
+		[compactPalette]: true
+	};
+}
+var themePresetOptions = {
+	default: {
+		semanticColors: "default",
+		density: "comfortable",
+		radius: "default",
+		borders: "minimal",
+		elevation: "default",
+		motion: "default",
+		fontFamily: "system",
+		typeScale: "default",
+		lineHeight: "default"
+	},
+	compact: withCompactPalette({
+		semanticColors: "default",
+		density: "compact",
+		radius: "sharp",
+		borders: "subtle",
+		elevation: "subtle",
+		motion: "default",
+		fontFamily: "system",
+		typeScale: "default",
+		lineHeight: "default"
+	}),
+	atelier: {
+		semanticColors: "warm",
+		density: "spacious",
+		radius: "restrained",
+		borders: "subtle",
+		elevation: "soft",
+		motion: "calm",
+		fontFamily: "serif",
+		typeScale: "expanded",
+		lineHeight: "editorial"
+	},
+	nitro: {
+		semanticColors: "vivid",
+		density: "comfortable",
+		radius: "round",
+		borders: "minimal",
+		elevation: "default",
+		motion: "snappy",
+		fontFamily: "system",
+		typeScale: "default",
+		lineHeight: "default"
+	}
+};
+function composeTheme(options) {
+	const density = densityThemes[options.density];
+	const theme = {
+		colors: options.semanticColors === "default" && options[compactPalette] ? compactSemanticColorTheme : semanticColorThemes[options.semanticColors],
+		spacing: density.spacing,
+		controlSizes: density.controlSizes,
+		radii: radiusThemes[options.radius],
+		borders: borderThemes[options.borders],
+		elevation: elevationThemes[options.elevation],
+		motion: motionThemes[options.motion],
+		typography: fontFamilyThemes[options.fontFamily],
+		fontSizes: typeScaleThemes[options.typeScale],
+		lineHeights: lineHeightThemes[options.lineHeight]
+	};
+	return Object.hasOwn(options, "semanticColorOverrides") ? {
+		...theme,
+		semanticColorOverrides: options.semanticColorOverrides
+	} : theme;
+}
+export { composeTheme, themePresetOptions };

package/dist/themes/fragments/borders.d.ts

@@ -0,0 +1,34 @@
+import * as stylex from "@stylexjs/stylex";
+export type BorderOption = "minimal" | "subtle" | "strong";
+export declare const minimalBorderTheme: stylex.Theme<stylex.VarGroup<Readonly<{
+    control: string;
+    surface: string;
+    outline: string;
+}>, symbol>, symbol>;
+export declare const subtleBorderTheme: stylex.Theme<stylex.VarGroup<Readonly<{
+    control: string;
+    surface: string;
+    outline: string;
+}>, symbol>, symbol>;
+export declare const strongBorderTheme: stylex.Theme<stylex.VarGroup<Readonly<{
+    control: string;
+    surface: string;
+    outline: string;
+}>, symbol>, symbol>;
+export declare const borderThemes: {
+    readonly minimal: stylex.Theme<stylex.VarGroup<Readonly<{
+        control: string;
+        surface: string;
+        outline: string;
+    }>, symbol>, symbol>;
+    readonly subtle: stylex.Theme<stylex.VarGroup<Readonly<{
+        control: string;
+        surface: string;
+        outline: string;
+    }>, symbol>, symbol>;
+    readonly strong: stylex.Theme<stylex.VarGroup<Readonly<{
+        control: string;
+        surface: string;
+        outline: string;
+    }>, symbol>, symbol>;
+};

package/dist/themes/fragments/borders.js

@@ -0,0 +1,19 @@
+import { borders } from "../../tokens.stylex.js";
+import * as stylex from "@stylexjs/stylex";
+var minimalBorderTheme = stylex.createTheme(borders, {});
+var subtleBorderTheme = stylex.createTheme(borders, {
+	control: "1px",
+	surface: "1px",
+	outline: "1px"
+});
+var strongBorderTheme = stylex.createTheme(borders, {
+	control: "2px",
+	surface: "2px",
+	outline: "2px"
+});
+var borderThemes = {
+	minimal: minimalBorderTheme,
+	subtle: subtleBorderTheme,
+	strong: strongBorderTheme
+};
+export { borderThemes, minimalBorderTheme, strongBorderTheme, subtleBorderTheme };

package/dist/themes/fragments/density.d.ts

@@ -0,0 +1,58 @@
+import * as stylex from "@stylexjs/stylex";
+export type DensityOption = "compact" | "comfortable" | "spacious";
+export declare const compactSpacingTheme: stylex.Theme<stylex.VarGroup<{
+    base: string;
+} & Record<import("../../token-types").SpacingKey, string>>, symbol>;
+export declare const compactControlSizesTheme: stylex.Theme<stylex.VarGroup<Readonly<{
+    sm: string;
+    md: string;
+    lg: string;
+}>, symbol>, symbol>;
+export declare const comfortableSpacingTheme: stylex.Theme<stylex.VarGroup<{
+    base: string;
+} & Record<import("../../token-types").SpacingKey, string>>, symbol>;
+export declare const comfortableControlSizesTheme: stylex.Theme<stylex.VarGroup<Readonly<{
+    sm: string;
+    md: string;
+    lg: string;
+}>, symbol>, symbol>;
+export declare const spaciousSpacingTheme: stylex.Theme<stylex.VarGroup<{
+    base: string;
+} & Record<import("../../token-types").SpacingKey, string>>, symbol>;
+export declare const spaciousControlSizesTheme: stylex.Theme<stylex.VarGroup<Readonly<{
+    sm: string;
+    md: string;
+    lg: string;
+}>, symbol>, symbol>;
+export declare const densityThemes: {
+    compact: {
+        spacing: stylex.Theme<stylex.VarGroup<{
+            base: string;
+        } & Record<import("../../token-types").SpacingKey, string>>, symbol>;
+        controlSizes: stylex.Theme<stylex.VarGroup<Readonly<{
+            sm: string;
+            md: string;
+            lg: string;
+        }>, symbol>, symbol>;
+    };
+    comfortable: {
+        spacing: stylex.Theme<stylex.VarGroup<{
+            base: string;
+        } & Record<import("../../token-types").SpacingKey, string>>, symbol>;
+        controlSizes: stylex.Theme<stylex.VarGroup<Readonly<{
+            sm: string;
+            md: string;
+            lg: string;
+        }>, symbol>, symbol>;
+    };
+    spacious: {
+        spacing: stylex.Theme<stylex.VarGroup<{
+            base: string;
+        } & Record<import("../../token-types").SpacingKey, string>>, symbol>;
+        controlSizes: stylex.Theme<stylex.VarGroup<Readonly<{
+            sm: string;
+            md: string;
+            lg: string;
+        }>, symbol>, symbol>;
+    };
+};

package/dist/themes/fragments/density.js

@@ -0,0 +1,31 @@
+import { controlSizes, spacing } from "../../tokens.stylex.js";
+import * as stylex from "@stylexjs/stylex";
+var compactSpacingTheme = stylex.createTheme(spacing, { base: "0.1875rem" });
+var compactControlSizesTheme = stylex.createTheme(controlSizes, {
+	sm: "1.875rem",
+	md: "2.25rem",
+	lg: "2.625rem"
+});
+var comfortableSpacingTheme = stylex.createTheme(spacing, {});
+var comfortableControlSizesTheme = stylex.createTheme(controlSizes, {});
+var spaciousSpacingTheme = stylex.createTheme(spacing, { base: "0.3125rem" });
+var spaciousControlSizesTheme = stylex.createTheme(controlSizes, {
+	sm: "2.25rem",
+	md: "2.75rem",
+	lg: "3.25rem"
+});
+var densityThemes = {
+	compact: {
+		spacing: compactSpacingTheme,
+		controlSizes: compactControlSizesTheme
+	},
+	comfortable: {
+		spacing: comfortableSpacingTheme,
+		controlSizes: comfortableControlSizesTheme
+	},
+	spacious: {
+		spacing: spaciousSpacingTheme,
+		controlSizes: spaciousControlSizesTheme
+	}
+};
+export { comfortableControlSizesTheme, comfortableSpacingTheme, compactControlSizesTheme, compactSpacingTheme, densityThemes, spaciousControlSizesTheme, spaciousSpacingTheme };

package/dist/themes/fragments/elevation.d.ts

@@ -0,0 +1,34 @@
+import * as stylex from "@stylexjs/stylex";
+export type ElevationOption = "default" | "subtle" | "soft";
+export declare const defaultElevationTheme: stylex.Theme<stylex.VarGroup<Readonly<{
+    sm: string;
+    md: string;
+    lg: string;
+}>, symbol>, symbol>;
+export declare const subtleElevationTheme: stylex.Theme<stylex.VarGroup<Readonly<{
+    sm: string;
+    md: string;
+    lg: string;
+}>, symbol>, symbol>;
+export declare const softElevationTheme: stylex.Theme<stylex.VarGroup<Readonly<{
+    sm: string;
+    md: string;
+    lg: string;
+}>, symbol>, symbol>;
+export declare const elevationThemes: {
+    readonly default: stylex.Theme<stylex.VarGroup<Readonly<{
+        sm: string;
+        md: string;
+        lg: string;
+    }>, symbol>, symbol>;
+    readonly subtle: stylex.Theme<stylex.VarGroup<Readonly<{
+        sm: string;
+        md: string;
+        lg: string;
+    }>, symbol>, symbol>;
+    readonly soft: stylex.Theme<stylex.VarGroup<Readonly<{
+        sm: string;
+        md: string;
+        lg: string;
+    }>, symbol>, symbol>;
+};

package/dist/themes/fragments/elevation.js

@@ -0,0 +1,19 @@
+import { elevation } from "../../tokens.stylex.js";
+import * as stylex from "@stylexjs/stylex";
+var defaultElevationTheme = stylex.createTheme(elevation, {});
+var subtleElevationTheme = stylex.createTheme(elevation, {
+	sm: "0 1px 2px rgba(0, 0, 0, 0.08)",
+	md: "0 2px 6px rgba(0, 0, 0, 0.1)",
+	lg: "0 2px 6px rgba(0, 0, 0, 0.12)"
+});
+var softElevationTheme = stylex.createTheme(elevation, {
+	sm: "0 8px 22px rgba(45, 34, 21, 0.08)",
+	md: "0 16px 44px rgba(45, 34, 21, 0.12)",
+	lg: "0 28px 72px rgba(45, 34, 21, 0.16)"
+});
+var elevationThemes = {
+	default: defaultElevationTheme,
+	subtle: subtleElevationTheme,
+	soft: softElevationTheme
+};
+export { defaultElevationTheme, elevationThemes, softElevationTheme, subtleElevationTheme };

package/dist/themes/fragments/font-family.d.ts

@@ -0,0 +1,16 @@
+import * as stylex from "@stylexjs/stylex";
+export type FontFamilyOption = "system" | "serif";
+export declare const systemFontFamilyTheme: stylex.Theme<stylex.VarGroup<Readonly<{
+    fontFamily: string;
+}>, symbol>, symbol>;
+export declare const serifFontFamilyTheme: stylex.Theme<stylex.VarGroup<Readonly<{
+    fontFamily: string;
+}>, symbol>, symbol>;
+export declare const fontFamilyThemes: {
+    readonly system: stylex.Theme<stylex.VarGroup<Readonly<{
+        fontFamily: string;
+    }>, symbol>, symbol>;
+    readonly serif: stylex.Theme<stylex.VarGroup<Readonly<{
+        fontFamily: string;
+    }>, symbol>, symbol>;
+};

package/dist/themes/fragments/font-family.js

@@ -0,0 +1,9 @@
+import { typography } from "../../tokens.stylex.js";
+import * as stylex from "@stylexjs/stylex";
+var systemFontFamilyTheme = stylex.createTheme(typography, {});
+var serifFontFamilyTheme = stylex.createTheme(typography, { fontFamily: "Georgia, Cambria, \"Times New Roman\", Times, serif" });
+var fontFamilyThemes = {
+	system: systemFontFamilyTheme,
+	serif: serifFontFamilyTheme
+};
+export { fontFamilyThemes, serifFontFamilyTheme, systemFontFamilyTheme };

package/dist/themes/fragments/line-height.d.ts

@@ -0,0 +1,24 @@
+import * as stylex from "@stylexjs/stylex";
+export type LineHeightOption = "default" | "editorial";
+export declare const defaultLineHeightTheme: stylex.Theme<stylex.VarGroup<Readonly<{
+    tight: string;
+    normal: string;
+    relaxed: string;
+}>, symbol>, symbol>;
+export declare const editorialLineHeightTheme: stylex.Theme<stylex.VarGroup<Readonly<{
+    tight: string;
+    normal: string;
+    relaxed: string;
+}>, symbol>, symbol>;
+export declare const lineHeightThemes: {
+    readonly default: stylex.Theme<stylex.VarGroup<Readonly<{
+        tight: string;
+        normal: string;
+        relaxed: string;
+    }>, symbol>, symbol>;
+    readonly editorial: stylex.Theme<stylex.VarGroup<Readonly<{
+        tight: string;
+        normal: string;
+        relaxed: string;
+    }>, symbol>, symbol>;
+};

package/dist/themes/fragments/line-height.js

@@ -0,0 +1,13 @@
+import { lineHeights } from "../../tokens.stylex.js";
+import * as stylex from "@stylexjs/stylex";
+var defaultLineHeightTheme = stylex.createTheme(lineHeights, {});
+var editorialLineHeightTheme = stylex.createTheme(lineHeights, {
+	tight: "1.18",
+	normal: "1.55",
+	relaxed: "1.75"
+});
+var lineHeightThemes = {
+	default: defaultLineHeightTheme,
+	editorial: editorialLineHeightTheme
+};
+export { defaultLineHeightTheme, editorialLineHeightTheme, lineHeightThemes };

package/dist/themes/fragments/motion.d.ts

@@ -0,0 +1,40 @@
+import * as stylex from "@stylexjs/stylex";
+export type MotionOption = "default" | "calm" | "snappy";
+export declare const defaultMotionTheme: stylex.Theme<stylex.VarGroup<Readonly<{
+    fast: string;
+    normal: string;
+    slow: string;
+    standard: string;
+}>, symbol>, symbol>;
+export declare const snappyMotionTheme: stylex.Theme<stylex.VarGroup<Readonly<{
+    fast: string;
+    normal: string;
+    slow: string;
+    standard: string;
+}>, symbol>, symbol>;
+export declare const calmMotionTheme: stylex.Theme<stylex.VarGroup<Readonly<{
+    fast: string;
+    normal: string;
+    slow: string;
+    standard: string;
+}>, symbol>, symbol>;
+export declare const motionThemes: {
+    readonly default: stylex.Theme<stylex.VarGroup<Readonly<{
+        fast: string;
+        normal: string;
+        slow: string;
+        standard: string;
+    }>, symbol>, symbol>;
+    readonly calm: stylex.Theme<stylex.VarGroup<Readonly<{
+        fast: string;
+        normal: string;
+        slow: string;
+        standard: string;
+    }>, symbol>, symbol>;
+    readonly snappy: stylex.Theme<stylex.VarGroup<Readonly<{
+        fast: string;
+        normal: string;
+        slow: string;
+        standard: string;
+    }>, symbol>, symbol>;
+};

package/dist/themes/fragments/motion.js

@@ -0,0 +1,21 @@
+import { motion } from "../../tokens.stylex.js";
+import * as stylex from "@stylexjs/stylex";
+var defaultMotionTheme = stylex.createTheme(motion, {});
+var snappyMotionTheme = stylex.createTheme(motion, {
+	fast: "90ms",
+	normal: "140ms",
+	slow: "200ms",
+	standard: "cubic-bezier(0.3, 0, 0, 1)"
+});
+var calmMotionTheme = stylex.createTheme(motion, {
+	fast: "160ms",
+	normal: "240ms",
+	slow: "360ms",
+	standard: "cubic-bezier(0.22, 0.08, 0.18, 1)"
+});
+var motionThemes = {
+	default: defaultMotionTheme,
+	calm: calmMotionTheme,
+	snappy: snappyMotionTheme
+};
+export { calmMotionTheme, defaultMotionTheme, motionThemes, snappyMotionTheme };

package/dist/themes/fragments/radius.d.ts

@@ -0,0 +1,60 @@
+import * as stylex from "@stylexjs/stylex";
+export type RadiusOption = "sharp" | "default" | "restrained" | "round";
+export declare const sharpRadiusTheme: stylex.Theme<stylex.VarGroup<{
+    base: string;
+    sm: string;
+    md: string;
+    lg: string;
+    full: string;
+}>, symbol>;
+export declare const defaultRadiusTheme: stylex.Theme<stylex.VarGroup<{
+    base: string;
+    sm: string;
+    md: string;
+    lg: string;
+    full: string;
+}>, symbol>;
+export declare const restrainedRadiusTheme: stylex.Theme<stylex.VarGroup<{
+    base: string;
+    sm: string;
+    md: string;
+    lg: string;
+    full: string;
+}>, symbol>;
+export declare const roundRadiusTheme: stylex.Theme<stylex.VarGroup<{
+    base: string;
+    sm: string;
+    md: string;
+    lg: string;
+    full: string;
+}>, symbol>;
+export declare const radiusThemes: {
+    readonly sharp: stylex.Theme<stylex.VarGroup<{
+        base: string;
+        sm: string;
+        md: string;
+        lg: string;
+        full: string;
+    }>, symbol>;
+    readonly default: stylex.Theme<stylex.VarGroup<{
+        base: string;
+        sm: string;
+        md: string;
+        lg: string;
+        full: string;
+    }>, symbol>;
+    readonly restrained: stylex.Theme<stylex.VarGroup<{
+        base: string;
+        sm: string;
+        md: string;
+        lg: string;
+        full: string;
+    }>, symbol>;
+    readonly round: stylex.Theme<stylex.VarGroup<{
+        base: string;
+        sm: string;
+        md: string;
+        lg: string;
+        full: string;
+    }>, symbol>;
+};

package/dist/themes/fragments/radius.js

@@ -0,0 +1,13 @@
+import { radii } from "../../tokens.stylex.js";
+import * as stylex from "@stylexjs/stylex";
+var sharpRadiusTheme = stylex.createTheme(radii, { base: "0.125rem" });
+var defaultRadiusTheme = stylex.createTheme(radii, {});
+var restrainedRadiusTheme = stylex.createTheme(radii, { base: "0.375rem" });
+var roundRadiusTheme = stylex.createTheme(radii, { base: "0.75rem" });
+var radiusThemes = {
+	sharp: sharpRadiusTheme,
+	default: defaultRadiusTheme,
+	restrained: restrainedRadiusTheme,
+	round: roundRadiusTheme
+};
+export { defaultRadiusTheme, radiusThemes, restrainedRadiusTheme, roundRadiusTheme, sharpRadiusTheme };

package/dist/themes/fragments/semantic-colors.d.ts

@@ -0,0 +1,151 @@
+import * as stylex from "@stylexjs/stylex";
+export type SemanticColorOption = "default" | "warm" | "vivid";
+export declare const defaultSemanticColorTheme: stylex.Theme<stylex.VarGroup<Readonly<{
+    background: string;
+    foreground: string;
+    surface: string;
+    surfaceForeground: string;
+    muted: string;
+    mutedForeground: string;
+    border: string;
+    backdrop: string;
+    primary: string;
+    onPrimary: string;
+    danger: string;
+    onDanger: string;
+    focus: string;
+    primaryHover: string;
+    primaryActive: string;
+    mutedHover: string;
+    mutedActive: string;
+    dangerHover: string;
+    dangerActive: string;
+}>, symbol>, symbol>;
+export declare const compactSemanticColorTheme: stylex.Theme<stylex.VarGroup<Readonly<{
+    background: string;
+    foreground: string;
+    surface: string;
+    surfaceForeground: string;
+    muted: string;
+    mutedForeground: string;
+    border: string;
+    backdrop: string;
+    primary: string;
+    onPrimary: string;
+    danger: string;
+    onDanger: string;
+    focus: string;
+    primaryHover: string;
+    primaryActive: string;
+    mutedHover: string;
+    mutedActive: string;
+    dangerHover: string;
+    dangerActive: string;
+}>, symbol>, symbol>;
+export declare const warmSemanticColorTheme: stylex.Theme<stylex.VarGroup<Readonly<{
+    background: string;
+    foreground: string;
+    surface: string;
+    surfaceForeground: string;
+    muted: string;
+    mutedForeground: string;
+    border: string;
+    backdrop: string;
+    primary: string;
+    onPrimary: string;
+    danger: string;
+    onDanger: string;
+    focus: string;
+    primaryHover: string;
+    primaryActive: string;
+    mutedHover: string;
+    mutedActive: string;
+    dangerHover: string;
+    dangerActive: string;
+}>, symbol>, symbol>;
+export declare const vividSemanticColorTheme: stylex.Theme<stylex.VarGroup<Readonly<{
+    background: string;
+    foreground: string;
+    surface: string;
+    surfaceForeground: string;
+    muted: string;
+    mutedForeground: string;
+    border: string;
+    backdrop: string;
+    primary: string;
+    onPrimary: string;
+    danger: string;
+    onDanger: string;
+    focus: string;
+    primaryHover: string;
+    primaryActive: string;
+    mutedHover: string;
+    mutedActive: string;
+    dangerHover: string;
+    dangerActive: string;
+}>, symbol>, symbol>;
+export declare const semanticColorThemes: {
+    readonly default: stylex.Theme<stylex.VarGroup<Readonly<{
+        background: string;
+        foreground: string;
+        surface: string;
+        surfaceForeground: string;
+        muted: string;
+        mutedForeground: string;
+        border: string;
+        backdrop: string;
+        primary: string;
+        onPrimary: string;
+        danger: string;
+        onDanger: string;
+        focus: string;
+        primaryHover: string;
+        primaryActive: string;
+        mutedHover: string;
+        mutedActive: string;
+        dangerHover: string;
+        dangerActive: string;
+    }>, symbol>, symbol>;
+    readonly warm: stylex.Theme<stylex.VarGroup<Readonly<{
+        background: string;
+        foreground: string;
+        surface: string;
+        surfaceForeground: string;
+        muted: string;
+        mutedForeground: string;
+        border: string;
+        backdrop: string;
+        primary: string;
+        onPrimary: string;
+        danger: string;
+        onDanger: string;
+        focus: string;
+        primaryHover: string;
+        primaryActive: string;
+        mutedHover: string;
+        mutedActive: string;
+        dangerHover: string;
+        dangerActive: string;
+    }>, symbol>, symbol>;
+    readonly vivid: stylex.Theme<stylex.VarGroup<Readonly<{
+        background: string;
+        foreground: string;
+        surface: string;
+        surfaceForeground: string;
+        muted: string;
+        mutedForeground: string;
+        border: string;
+        backdrop: string;
+        primary: string;
+        onPrimary: string;
+        danger: string;
+        onDanger: string;
+        focus: string;
+        primaryHover: string;
+        primaryActive: string;
+        mutedHover: string;
+        mutedActive: string;
+        dangerHover: string;
+        dangerActive: string;
+    }>, symbol>, symbol>;
+};