@ternent/core 0.0.1

package/packages/ui/src/design-system/tokens.js

@@ -0,0 +1,327 @@
+/**
+ * Design System Tokens
+ * Inspired by Stripe and Airbnb design systems
+ *
+ * This file defines the foundational design tokens that create
+ * a cohesive, premium visual language across all components.
+ */
+
+import { colors as foundationColors } from "./foundation.js";
+
+export const designTokens = {
+  // === COLOR SYSTEM ===
+  colors: {
+    ...foundationColors,
+  },
+
+  // === SPACING SCALE ===
+  // Based on 4px base unit with strategic scaling
+  spacing: {
+    px: "1px",
+    0: "0",
+    0.5: "2px", // 0.125rem
+    1: "4px", // 0.25rem
+    1.5: "6px", // 0.375rem
+    2: "8px", // 0.5rem
+    2.5: "10px", // 0.625rem
+    3: "12px", // 0.75rem
+    3.5: "14px", // 0.875rem
+    4: "16px", // 1rem
+    5: "20px", // 1.25rem
+    6: "24px", // 1.5rem
+    7: "28px", // 1.75rem
+    8: "32px", // 2rem
+    9: "36px", // 2.25rem
+    10: "40px", // 2.5rem
+    11: "44px", // 2.75rem
+    12: "48px", // 3rem
+    14: "56px", // 3.5rem
+    16: "64px", // 4rem
+    20: "80px", // 5rem
+    24: "96px", // 6rem
+    28: "112px", // 7rem
+    32: "128px", // 8rem
+    36: "144px", // 9rem
+    40: "160px", // 10rem
+    44: "176px", // 11rem
+    48: "192px", // 12rem
+    52: "208px", // 13rem
+    56: "224px", // 14rem
+    60: "240px", // 15rem
+    64: "256px", // 16rem
+    72: "288px", // 18rem
+    80: "320px", // 20rem
+    96: "384px", // 24rem
+  },
+
+  // === TYPOGRAPHY SCALE ===
+  // Carefully crafted type scale for hierarchy and readability
+  typography: {
+    fontSize: {
+      xs: ["12px", "16px"], // 0.75rem, line-height 1.33
+      sm: ["14px", "20px"], // 0.875rem, line-height 1.43
+      base: ["16px", "24px"], // 1rem, line-height 1.5
+      lg: ["18px", "28px"], // 1.125rem, line-height 1.56
+      xl: ["20px", "28px"], // 1.25rem, line-height 1.4
+      "2xl": ["24px", "32px"], // 1.5rem, line-height 1.33
+      "3xl": ["30px", "36px"], // 1.875rem, line-height 1.2
+      "4xl": ["36px", "40px"], // 2.25rem, line-height 1.11
+      "5xl": ["48px", "56px"], // 3rem, line-height 1.17
+      "6xl": ["60px", "72px"], // 3.75rem, line-height 1.2
+      "7xl": ["72px", "80px"], // 4.5rem, line-height 1.11
+      "8xl": ["96px", "104px"], // 6rem, line-height 1.08
+      "9xl": ["128px", "136px"], // 8rem, line-height 1.06
+    },
+    fontWeight: {
+      thin: "100",
+      extralight: "200",
+      light: "300",
+      normal: "400",
+      medium: "500",
+      semibold: "600",
+      bold: "700",
+      extrabold: "800",
+      black: "900",
+    },
+    fontFamily: {
+      sans: [
+        "Inter",
+        "-apple-system",
+        "BlinkMacSystemFont",
+        '"Segoe UI"',
+        "Roboto",
+        '"Helvetica Neue"',
+        "Arial",
+        "sans-serif",
+      ],
+      mono: ['"JetBrains Mono"', '"Fira Code"', "Consolas", '"SF Mono"', "Monaco", "monospace"],
+    },
+    letterSpacing: {
+      tighter: "-0.05em",
+      tight: "-0.025em",
+      normal: "0em",
+      wide: "0.025em",
+      wider: "0.05em",
+      widest: "0.1em",
+    },
+  },
+
+  // === BORDER RADIUS ===
+  // Consistent rounded corners that feel modern but not overly rounded
+  borderRadius: {
+    none: "0",
+    xs: "2px",
+    sm: "4px",
+    base: "6px", // Default for most elements
+    md: "8px",
+    lg: "12px",
+    xl: "16px",
+    "2xl": "20px",
+    "3xl": "24px",
+    full: "9999px",
+  },
+
+  // === SHADOWS ===
+  // Subtle, layered shadows that create depth without being heavy
+  shadow: {
+    xs: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+    sm: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+    base: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+    md: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+    lg: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
+    xl: "0 25px 50px -12px rgb(0 0 0 / 0.25)",
+    "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
+    inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
+
+    // Colored shadows for interactive elements
+    primary: "0 4px 14px 0 rgb(99 91 255 / 0.15)",
+    success: "0 4px 14px 0 rgb(0 217 36 / 0.15)",
+    warning: "0 4px 14px 0 rgb(255 167 38 / 0.15)",
+    error: "0 4px 14px 0 rgb(226 89 80 / 0.15)",
+  },
+
+  // === TRANSITIONS ===
+  // Smooth, professional animation timings
+  transition: {
+    duration: {
+      fastest: "75ms",
+      fast: "150ms",
+      base: "200ms",
+      medium: "300ms",
+      slow: "500ms",
+      slowest: "1000ms",
+    },
+    easing: {
+      linear: "linear",
+      out: "cubic-bezier(0, 0, 0.2, 1)",
+      in: "cubic-bezier(0.4, 0, 1, 1)",
+      "in-out": "cubic-bezier(0.4, 0, 0.2, 1)",
+
+      // Custom Stripe-inspired easings
+      smooth: "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
+      bounce: "cubic-bezier(0.68, -0.55, 0.265, 1.55)",
+      elastic: "cubic-bezier(0.175, 0.885, 0.32, 1.275)",
+    },
+  },
+
+  // === Z-INDEX SCALE ===
+  // Organized layering system
+  zIndex: {
+    hide: -1,
+    auto: "auto",
+    base: 0,
+    docked: 10,
+    dropdown: 1000,
+    sticky: 1100,
+    banner: 1200,
+    overlay: 1300,
+    modal: 1400,
+    popover: 1500,
+    skipLink: 1600,
+    toast: 1700,
+    tooltip: 1800,
+  },
+
+  // === COMPONENT SIZING ===
+  // Consistent sizing for interactive elements
+  size: {
+    button: {
+      micro: { height: "28px", padding: "0 10px", fontSize: "12px" },
+      xs: { height: "32px", padding: "0 12px", fontSize: "12px" },
+      sm: { height: "36px", padding: "0 14px", fontSize: "13px" },
+      base: { height: "40px", padding: "0 16px", fontSize: "14px" },
+      lg: { height: "44px", padding: "0 18px", fontSize: "15px" },
+      xl: { height: "48px", padding: "0 20px", fontSize: "16px" },
+    },
+    input: {
+      sm: { height: "32px", padding: "0 8px", fontSize: "sm" },
+      base: { height: "40px", padding: "0 12px", fontSize: "base" },
+      lg: { height: "48px", padding: "0 16px", fontSize: "lg" },
+    },
+    avatar: {
+      xs: "20px",
+      sm: "24px",
+      base: "32px",
+      lg: "40px",
+      xl: "48px",
+      "2xl": "56px",
+      "3xl": "64px",
+    },
+  },
+
+  // === LAYOUT CONSTANTS ===
+  layout: {
+    maxWidth: {
+      xs: "320px",
+      sm: "384px",
+      md: "448px",
+      lg: "512px",
+      xl: "576px",
+      "2xl": "672px",
+      "3xl": "768px",
+      "4xl": "896px",
+      "5xl": "1024px",
+      "6xl": "1152px",
+      "7xl": "1280px",
+      full: "100%",
+    },
+    container: {
+      padding: "16px",
+      maxWidth: "1200px",
+    },
+    sidebar: {
+      width: "240px",
+      collapsedWidth: "64px",
+    },
+    header: {
+      height: "64px",
+    },
+  },
+};
+
+// Export individual token categories for easy imports
+export const {
+  colors,
+  spacing,
+  typography,
+  borderRadius,
+  shadow,
+  transition,
+  zIndex,
+  size,
+  layout,
+} = designTokens;
+
+export const uiCssTokenDocs = {
+  "--ui-bg": "App background (paper).",
+  "--ui-fg": "Primary text (ink).",
+  "--ui-fg-muted": "Muted text.",
+  "--ui-surface": "Raised surface background.",
+  "--ui-surface-hover": "Hover surface background.",
+  "--ui-border": "Dividers and hairlines.",
+  "--ui-primary": "Primary action/brand color.",
+  "--ui-on-primary": "Text/icon on primary.",
+  "--ui-primary-muted": "Primary tint for subtle fills.",
+  "--ui-primary-hover": "Primary hover fill.",
+  "--ui-primary-active": "Primary active fill.",
+  "--ui-accent": "Accent/attention color.",
+  "--ui-on-accent": "Text/icon on accent.",
+  "--ui-accent-muted": "Accent tint for subtle fills.",
+  "--ui-accent-hover": "Accent hover fill.",
+  "--ui-accent-active": "Accent active fill.",
+  "--ui-secondary": "Secondary action color.",
+  "--ui-on-secondary": "Text/icon on secondary.",
+  "--ui-secondary-muted": "Secondary tint for subtle fills.",
+  "--ui-secondary-hover": "Secondary hover fill.",
+  "--ui-secondary-active": "Secondary active fill.",
+  "--ui-critical": "Critical/danger tone.",
+  "--ui-on-critical": "Text/icon on critical.",
+  "--ui-critical-muted": "Critical tint for subtle fills.",
+  "--ui-critical-hover": "Critical hover fill.",
+  "--ui-critical-active": "Critical active fill.",
+  "--ui-success": "Success/positive tone.",
+  "--ui-on-success": "Text/icon on success.",
+  "--ui-success-muted": "Success tint for subtle fills.",
+  "--ui-success-hover": "Success hover fill.",
+  "--ui-success-active": "Success active fill.",
+  "--ui-warning": "Warning tone.",
+  "--ui-on-warning": "Text/icon on warning.",
+  "--ui-warning-muted": "Warning tint for subtle fills.",
+  "--ui-warning-hover": "Warning hover fill.",
+  "--ui-warning-active": "Warning active fill.",
+  "--ui-info": "Info tone.",
+  "--ui-on-info": "Text/icon on info.",
+  "--ui-info-muted": "Info tint for subtle fills.",
+  "--ui-info-hover": "Info hover fill.",
+  "--ui-info-active": "Info active fill.",
+  "--ui-danger": "Alias of --ui-critical for app configs.",
+  "--ui-on-danger": "Alias of --ui-on-critical for app configs.",
+  "--ui-danger-muted": "Alias of --ui-critical-muted for app configs.",
+  "--ui-danger-hover": "Alias of --ui-critical-hover for app configs.",
+  "--ui-danger-active": "Alias of --ui-critical-active for app configs.",
+  "--ui-tonal-secondary": "Subtle neutral fill.",
+  "--ui-tonal-secondary-hover": "Subtle neutral hover fill.",
+  "--ui-tonal-tertiary": "Extra light neutral fill.",
+  "--ui-tonal-tertiary-hover": "Extra light neutral hover fill.",
+  "--ui-ring": "Focus ring color.",
+  "--ui-glow-primary": "Primary glow shadow.",
+  "--ui-glow-accent": "Accent glow shadow.",
+  "--ui-glow-critical": "Critical glow shadow.",
+  "--ui-glow-success": "Success glow shadow.",
+  "--ui-logo-start": "Logo gradient start color.",
+  "--ui-logo-end": "Logo gradient end color.",
+  "--ui-logo-cutout": "Logo interior cutout fill.",
+  "--ui-radius-sm": "Small radius.",
+  "--ui-radius-md": "Medium radius.",
+  "--ui-radius-lg": "Large radius.",
+  "--ui-duration-fast": "Fast transition duration.",
+  "--ui-duration-normal": "Default transition duration.",
+  "--ui-duration-slow": "Slow transition duration.",
+  "--ui-ease-out": "Default easing curve.",
+  "--ui-shadow-sm": "Small elevation shadow.",
+  "--ui-shadow-md": "Medium elevation shadow.",
+  "--ui-lift-hover": "Hover translate offset.",
+  "--ui-scale-active": "Active press scale.",
+};
+
+export const uiCssTokens = Object.keys(uiCssTokenDocs);

package/packages/ui/src/design-system/utils.js

@@ -0,0 +1,246 @@
+/**
+ * Component Utilities
+ * Core utilities for building consistent, premium components
+ */
+
+import { designTokens } from "./tokens.js";
+
+/**
+ * Generate consistent component classes based on size and variant
+ */
+export const createComponentClasses = {
+  /**
+   * Button class generator - creates premium button styles
+   */
+  button: ({ variant = "primary", size = "base", state = "default" }) => {
+    const baseClasses = [
+      "inline-flex items-center justify-center",
+      "font-medium tracking-wide",
+      "border border-transparent",
+      "transition-all duration-200 ease-smooth",
+      "focus:outline-none focus:ring-2 focus:ring-offset-2",
+      "disabled:opacity-50 disabled:cursor-not-allowed",
+      "disabled:transform-none",
+      "transform hover:scale-[1.02] active:scale-[0.98]",
+    ];
+
+    // Size-specific classes
+    const sizeClasses = {
+      micro: ["text-xs", "px-2", "py-1", "h-5", "rounded", "min-w-[20px]"],
+      xs: ["text-xs", "px-2.5", "py-1.5", "h-6", "rounded", "min-w-[24px]"],
+      sm: ["text-sm", "px-3", "py-2", "h-8", "rounded-md", "min-w-[32px]"],
+      base: ["text-base", "px-4", "py-2.5", "h-10", "rounded-md", "min-w-[40px]"],
+      lg: ["text-lg", "px-6", "py-3", "h-12", "rounded-lg", "min-w-[48px]"],
+      xl: ["text-xl", "px-8", "py-4", "h-14", "rounded-lg", "min-w-[56px]"],
+    };
+
+    // Variant-specific classes
+    const variantClasses = {
+      primary: [
+        "bg-primary text-primary-content",
+        "hover:bg-primary-focus hover:shadow-primary",
+        "focus:ring-primary/50",
+        "active:bg-primary-focus",
+      ],
+      secondary: [
+        "bg-secondary text-secondary-content",
+        "hover:bg-secondary-focus hover:shadow-success",
+        "focus:ring-secondary/50",
+        "active:bg-secondary-focus",
+      ],
+      accent: [
+        "bg-accent text-accent-content",
+        "hover:bg-accent-focus hover:shadow-primary",
+        "focus:ring-accent/50",
+        "active:bg-accent-focus",
+      ],
+      outline: [
+        "bg-transparent text-base-content border-base-300",
+        "hover:bg-base-200 hover:border-base-400 hover:shadow-sm",
+        "focus:ring-primary/30 focus:border-primary",
+        "active:bg-base-300",
+      ],
+      ghost: [
+        "bg-transparent text-base-content border-transparent",
+        "hover:bg-base-200 hover:shadow-sm",
+        "focus:ring-primary/30",
+        "active:bg-base-300",
+      ],
+      "ghost-icon": [
+        "bg-transparent text-base-content border-transparent p-2",
+        "hover:bg-base-200 hover:shadow-sm rounded-lg",
+        "focus:ring-primary/30",
+        "active:bg-base-300",
+        "aspect-square justify-center",
+      ],
+      link: [
+        "bg-transparent text-primary border-transparent",
+        "hover:text-primary-focus hover:underline",
+        "focus:ring-primary/30",
+        "active:text-primary-focus",
+        "px-0 h-auto py-0 min-w-0",
+      ],
+      success: [
+        "bg-success text-success-content",
+        "hover:bg-success/90 hover:shadow-success",
+        "focus:ring-success/50",
+      ],
+      warning: [
+        "bg-warning text-warning-content",
+        "hover:bg-warning/90 hover:shadow-warning",
+        "focus:ring-warning/50",
+      ],
+      error: [
+        "bg-error text-error-content",
+        "hover:bg-error/90 hover:shadow-error",
+        "focus:ring-error/50",
+      ],
+    };
+
+    return [
+      ...baseClasses,
+      ...(sizeClasses[size] || sizeClasses.base),
+      ...(variantClasses[variant] || variantClasses.primary),
+    ].join(" ");
+  },
+
+  /**
+   * Card class generator - creates premium card styles
+   */
+  card: ({ variant = "default", padding = "base", elevated = false }) => {
+    const baseClasses = [
+      "bg-base-100 border border-base-300",
+      "transition-all duration-200 ease-smooth",
+    ];
+
+    const paddingClasses = {
+      none: [],
+      sm: ["p-4"],
+      base: ["p-6"],
+      lg: ["p-8"],
+      xl: ["p-10"],
+    };
+
+    const variantClasses = {
+      default: ["rounded-lg"],
+      elevated: ["rounded-lg shadow-md hover:shadow-lg"],
+      bordered: ["rounded-lg border-2"],
+      glass: ["rounded-xl backdrop-blur-sm bg-base-100/80 border-base-300/50"],
+    };
+
+    const elevationClasses = elevated
+      ? ["shadow-lg hover:shadow-xl"]
+      : ["shadow-sm hover:shadow-md"];
+
+    return [
+      ...baseClasses,
+      ...(paddingClasses[padding] || paddingClasses.base),
+      ...(variantClasses[variant] || variantClasses.default),
+      ...elevationClasses,
+    ].join(" ");
+  },
+
+  /**
+   * Input class generator - creates premium input styles
+   */
+  input: ({ size = "base", state = "default", variant = "default" }) => {
+    const baseClasses = [
+      "w-full border rounded-md",
+      "bg-base-100 text-base-content placeholder-base-content/50",
+      "transition-all duration-200 ease-smooth",
+      "focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary",
+      "disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-base-200",
+    ];
+
+    const sizeClasses = {
+      sm: ["text-sm", "px-3", "py-2", "h-8"],
+      base: ["text-base", "px-4", "py-2.5", "h-10"],
+      lg: ["text-lg", "px-5", "py-3", "h-12"],
+    };
+
+    const stateClasses = {
+      default: ["border-base-300 hover:border-base-400"],
+      error: ["border-error focus:ring-error/30 focus:border-error"],
+      success: ["border-success focus:ring-success/30 focus:border-success"],
+      warning: ["border-warning focus:ring-warning/30 focus:border-warning"],
+    };
+
+    return [
+      ...baseClasses,
+      ...(sizeClasses[size] || sizeClasses.base),
+      ...(stateClasses[state] || stateClasses.default),
+    ].join(" ");
+  },
+
+  /**
+   * Badge class generator - creates premium badge styles
+   */
+  badge: ({ variant = "default", size = "base" }) => {
+    const baseClasses = [
+      "inline-flex items-center justify-center",
+      "font-medium rounded-full",
+      "transition-all duration-200 ease-smooth",
+    ];
+
+    const sizeClasses = {
+      xs: ["text-xs", "px-2", "py-0.5", "h-4"],
+      sm: ["text-xs", "px-2.5", "py-1", "h-5"],
+      base: ["text-sm", "px-3", "py-1", "h-6"],
+      lg: ["text-base", "px-4", "py-1.5", "h-7"],
+    };
+
+    const variantClasses = {
+      default: ["bg-base-200 text-base-content"],
+      primary: ["bg-primary/10 text-primary border border-primary/20"],
+      secondary: ["bg-secondary/10 text-secondary border border-secondary/20"],
+      accent: ["bg-accent/10 text-accent border border-accent/20"],
+      success: ["bg-success/10 text-success border border-success/20"],
+      warning: ["bg-warning/10 text-warning border border-warning/20"],
+      error: ["bg-error/10 text-error border border-error/20"],
+      neutral: ["bg-neutral/10 text-neutral border border-neutral/20"],
+    };
+
+    return [
+      ...baseClasses,
+      ...(sizeClasses[size] || sizeClasses.base),
+      ...(variantClasses[variant] || variantClasses.default),
+    ].join(" ");
+  },
+};
+
+/**
+ * Animation utilities for premium interactions
+ */
+export const animations = {
+  fadeIn: "animate-in fade-in duration-200",
+  fadeOut: "animate-out fade-out duration-200",
+  slideInFromTop: "animate-in slide-in-from-top-2 duration-300",
+  slideInFromBottom: "animate-in slide-in-from-bottom-2 duration-300",
+  slideInFromLeft: "animate-in slide-in-from-left-2 duration-300",
+  slideInFromRight: "animate-in slide-in-from-right-2 duration-300",
+  scaleIn: "animate-in zoom-in-95 duration-200",
+  scaleOut: "animate-out zoom-out-95 duration-200",
+};
+
+/**
+ * Focus management utilities
+ */
+export const focus = {
+  ring: "focus:outline-none focus:ring-2 focus:ring-primary/30 focus:ring-offset-2",
+  visible: "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30",
+  within: "focus-within:ring-2 focus-within:ring-primary/30",
+};
+
+/**
+ * Layout utilities for consistent spacing and structure
+ */
+export const layout = {
+  container: "container mx-auto px-4 sm:px-6 lg:px-8",
+  section: "py-12 sm:py-16 lg:py-20",
+  stack: "space-y-6",
+  stackSm: "space-y-4",
+  stackLg: "space-y-8",
+  grid: "grid gap-6",
+  flex: "flex items-center gap-4",
+  center: "flex items-center justify-center",
+};

package/packages/ui/src/main.js

@@ -0,0 +1,4 @@
+import { createApp } from "vue";
+import App from "./App.vue";
+
+createApp(App).mount("#app");

package/packages/ui/src/patterns/FeatureCard/FeatureCard.spec.md

@@ -0,0 +1,24 @@
+# FeatureCard
+
+## Purpose
+
+Reusable marketing or product-summary tile with optional icon, title, and description.
+
+## Category
+
+Pattern
+
+## Public API
+
+Props:
+
+- `title`
+- `description`
+- `tone`: `primary | secondary | accent | success | info`
+- `size`: `md | sm`
+- `surface`: `elevated | panel | subtle`
+
+Slots:
+
+- `icon`
+- default

package/packages/ui/src/patterns/FeatureCard/FeatureCard.types.ts

@@ -0,0 +1,8 @@
+export const featureCardToneValues = ["primary", "secondary", "accent", "success", "info"] as const;
+
+export const featureCardSizeValues = ["md", "sm"] as const;
+export const featureCardSurfaceValues = ["elevated", "panel", "subtle"] as const;
+
+export type FeatureCardTone = (typeof featureCardToneValues)[number];
+export type FeatureCardSize = (typeof featureCardSizeValues)[number];
+export type FeatureCardSurface = (typeof featureCardSurfaceValues)[number];