@paraxe/design 1.0.0

package/dist/index.js

@@ -0,0 +1,305 @@
+const o = {
+  // Spacing scale
+  space0: "--space-0",
+  spacePx: "--space-px",
+  space1: "--space-1",
+  space2: "--space-2",
+  space3: "--space-3",
+  space4: "--space-4",
+  space5: "--space-5",
+  space6: "--space-6",
+  space7: "--space-7",
+  space8: "--space-8",
+  space9: "--space-9",
+  space10: "--space-10",
+  space11: "--space-11",
+  space12: "--space-12",
+  space14: "--space-14",
+  space16: "--space-16",
+  space20: "--space-20",
+  space24: "--space-24",
+  space28: "--space-28",
+  space32: "--space-32",
+  space36: "--space-36",
+  space40: "--space-40",
+  space44: "--space-44",
+  space48: "--space-48",
+  space52: "--space-52",
+  space56: "--space-56",
+  space60: "--space-60",
+  space64: "--space-64",
+  space72: "--space-72",
+  space80: "--space-80",
+  space96: "--space-96",
+  // Spacing roles
+  sectionSpacing: "--section-spacing",
+  containerPadding: "--container-padding",
+  containerPaddingLg: "--container-padding-lg",
+  cardPadding: "--card-padding",
+  cardPaddingSm: "--card-padding-sm",
+  cardPaddingLg: "--card-padding-lg",
+  stackGap: "--stack-gap",
+  stackGapSm: "--stack-gap-sm",
+  stackGapLg: "--stack-gap-lg",
+  inlineGap: "--inline-gap",
+  inlineGapSm: "--inline-gap-sm",
+  inlineGapLg: "--inline-gap-lg",
+  gridGap: "--grid-gap",
+  gridGapSm: "--grid-gap-sm",
+  gridGapLg: "--grid-gap-lg",
+  // Layout
+  containerMaxWidth: "--container-max-width",
+  containerNarrow: "--container-narrow",
+  containerGutter: "--container-gutter",
+  containerGutterLg: "--container-gutter-lg",
+  contentWidthNarrow: "--content-width-narrow",
+  // Z-index
+  zBase: "--z-base",
+  zFloor: "--z-floor",
+  zSticky: "--z-sticky",
+  zNavbar: "--z-navbar",
+  zDropdown: "--z-dropdown",
+  zOverlay: "--z-overlay",
+  zModal: "--z-modal",
+  zPopover: "--z-popover",
+  zTooltip: "--z-tooltip",
+  // Typography
+  fontFamilyDisplay: "--font-family-display",
+  fontFamilyBody: "--font-family-body",
+  fontFamilyMono: "--font-family-mono",
+  fontWeightLight: "--font-weight-light",
+  fontWeightRegular: "--font-weight-regular",
+  fontWeightMedium: "--font-weight-medium",
+  fontWeightSemibold: "--font-weight-semibold",
+  fontWeightBold: "--font-weight-bold",
+  fontWeightExtrabold: "--font-weight-extrabold",
+  fontSizeXs: "--font-size-xs",
+  fontSizeSm: "--font-size-sm",
+  fontSizeBase: "--font-size-base",
+  fontSizeLg: "--font-size-lg",
+  fontSizeXl: "--font-size-xl",
+  fontSize2xl: "--font-size-2xl",
+  fontSize3xl: "--font-size-3xl",
+  fontSize4xl: "--font-size-4xl",
+  fontSize5xl: "--font-size-5xl",
+  fontSize6xl: "--font-size-6xl",
+  fontSize7xl: "--font-size-7xl",
+  fontSize8xl: "--font-size-8xl",
+  fontSize9xl: "--font-size-9xl",
+  lineHeightTight: "--line-height-tight",
+  lineHeightSnug: "--line-height-snug",
+  lineHeightNormal: "--line-height-normal",
+  lineHeightRelaxed: "--line-height-relaxed",
+  lineHeightLoose: "--line-height-loose",
+  letterSpacingTight: "--letter-spacing-tight",
+  letterSpacingNormal: "--letter-spacing-normal",
+  letterSpacingWide: "--letter-spacing-wide",
+  letterSpacingWider: "--letter-spacing-wider",
+  letterSpacingWidest: "--letter-spacing-widest",
+  // Typography — semantic layer
+  typographyH1Size: "--typography-h1-size",
+  typographyH2Size: "--typography-h2-size",
+  typographyH3Size: "--typography-h3-size",
+  typographyH4Size: "--typography-h4-size",
+  typographyLeadSize: "--typography-lead-size",
+  typographyBodySize: "--typography-body-size",
+  typographyCaptionSize: "--typography-caption-size",
+  typographyOverlineSize: "--typography-overline-size",
+  typographyHeadingWeight: "--typography-heading-weight",
+  typographyBodyWeight: "--typography-body-weight",
+  typographyHeadingLineheight: "--typography-heading-lineheight",
+  typographyBodyLineheight: "--typography-body-lineheight",
+  typographyHeadingLetterspacing: "--typography-heading-letterspacing",
+  typographyBodyLetterspacing: "--typography-body-letterspacing",
+  // Radius
+  radiusNone: "--radius-none",
+  radiusSm: "--radius-sm",
+  radiusBase: "--radius-base",
+  radiusMd: "--radius-md",
+  radiusLg: "--radius-lg",
+  radiusXl: "--radius-xl",
+  radius2xl: "--radius-2xl",
+  radius3xl: "--radius-3xl",
+  radiusFull: "--radius-full",
+  // Shadows (structural)
+  shadowSm: "--shadow-sm",
+  shadowBase: "--shadow-base",
+  shadowMd: "--shadow-md",
+  shadowLg: "--shadow-lg",
+  shadowXl: "--shadow-xl",
+  shadow2xl: "--shadow-2xl",
+  shadowInner: "--shadow-inner",
+  // Motion durations
+  motionDurationFast: "--motion-duration-fast",
+  motionDurationNormal: "--motion-duration-normal",
+  motionDurationSlow: "--motion-duration-slow",
+  motionDurationSlower: "--motion-duration-slower",
+  motionDurationSlowest: "--motion-duration-slowest",
+  // Motion easings
+  motionEaseIn: "--motion-ease-in",
+  motionEaseOut: "--motion-ease-out",
+  motionEaseInOut: "--motion-ease-in-out",
+  motionEaseSpring: "--motion-ease-spring",
+  motionEaseSmooth: "--motion-ease-smooth",
+  // Motion combinators
+  motionFast: "--motion-fast",
+  motionNormal: "--motion-normal",
+  motionSlow: "--motion-slow",
+  motionSlower: "--motion-slower",
+  easeStandard: "--ease-standard",
+  easeSmooth: "--ease-smooth",
+  easeSpring: "--ease-spring",
+  transitionFast: "--transition-fast",
+  transitionNormal: "--transition-normal",
+  transitionSlow: "--transition-slow",
+  // Component structure
+  buttonRadius: "--button-radius",
+  buttonPaddingX: "--button-padding-x",
+  buttonPaddingY: "--button-padding-y",
+  buttonGap: "--button-gap",
+  cardRadius: "--card-radius",
+  badgeRadius: "--badge-radius",
+  navHeight: "--nav-height",
+  navBlur: "--nav-blur",
+  glassBlur: "--glass-blur",
+  glassSaturate: "--glass-saturate",
+  focusRingWidth: "--focus-ring-width",
+  focusRingOffset: "--focus-ring-offset"
+}, t = {
+  brandPrimary: "--brand-primary",
+  brandPrimaryHover: "--brand-primary-hover",
+  brandPrimaryActive: "--brand-primary-active",
+  brandPrimaryLight: "--brand-primary-light",
+  brandPrimaryMuted: "--brand-primary-muted",
+  brandGlow: "--brand-glow",
+  textOnBrand: "--text-on-brand",
+  colorSuccess: "--color-success",
+  colorWarning: "--color-warning",
+  colorDanger: "--color-danger",
+  colorInfo: "--color-info",
+  backgroundPrimary: "--background-primary",
+  backgroundSecondary: "--background-secondary",
+  surfaceBase: "--surface-base",
+  surfaceRaised: "--surface-raised",
+  surfaceCard: "--surface-card",
+  surfaceHover: "--surface-hover",
+  surfaceElevated1: "--surface-elevated-1",
+  surfaceElevated2: "--surface-elevated-2",
+  surfaceElevated3: "--surface-elevated-3",
+  surfaceGlass: "--surface-glass",
+  surfaceGlassStrong: "--surface-glass-strong",
+  textPrimary: "--text-primary",
+  textSecondary: "--text-secondary",
+  textMuted: "--text-muted",
+  textInverse: "--text-inverse",
+  textAccent: "--text-accent",
+  textLink: "--text-link",
+  textLinkHover: "--text-link-hover",
+  borderDefault: "--border-default",
+  borderStrong: "--border-strong",
+  borderSubtle: "--border-subtle",
+  borderFocus: "--border-focus",
+  glassBackground: "--glass-background",
+  glassBorder: "--glass-border",
+  cardHighlight: "--card-highlight",
+  cardHighlightInset: "--card-highlight-inset",
+  overlayScrim: "--overlay-scrim",
+  overlayScrimStrong: "--overlay-scrim-strong",
+  focusRingColor: "--focus-ring-color",
+  selectionBackground: "--selection-background",
+  selectionText: "--selection-text",
+  // Buttons
+  buttonPrimaryBg: "--button-primary-bg",
+  buttonPrimaryText: "--button-primary-text",
+  buttonPrimaryBorder: "--button-primary-border",
+  buttonPrimaryHoverBg: "--button-primary-hover-bg",
+  buttonPrimaryHoverBorder: "--button-primary-hover-border",
+  buttonPrimaryActiveBg: "--button-primary-active-bg",
+  buttonPrimaryDisabledBg: "--button-primary-disabled-bg",
+  buttonPrimaryDisabledText: "--button-primary-disabled-text",
+  buttonSecondaryBg: "--button-secondary-bg",
+  buttonSecondaryText: "--button-secondary-text",
+  buttonSecondaryBorder: "--button-secondary-border",
+  buttonSecondaryHoverBg: "--button-secondary-hover-bg",
+  buttonSecondaryHoverBorder: "--button-secondary-hover-border",
+  buttonSecondaryActiveBg: "--button-secondary-active-bg",
+  buttonSecondaryDisabledBg: "--button-secondary-disabled-bg",
+  buttonSecondaryDisabledText: "--button-secondary-disabled-text",
+  buttonSecondaryDisabledBorder: "--button-secondary-disabled-border",
+  buttonGhostBg: "--button-ghost-bg",
+  buttonGhostText: "--button-ghost-text",
+  buttonGhostBorder: "--button-ghost-border",
+  buttonGhostHoverBg: "--button-ghost-hover-bg",
+  buttonGhostHoverBorder: "--button-ghost-hover-border",
+  buttonGhostActiveBg: "--button-ghost-active-bg",
+  buttonGhostDisabledText: "--button-ghost-disabled-text",
+  buttonOutlineBg: "--button-outline-bg",
+  buttonOutlineText: "--button-outline-text",
+  buttonOutlineBorder: "--button-outline-border",
+  buttonOutlineHoverBg: "--button-outline-hover-bg",
+  buttonOutlineHoverBorder: "--button-outline-hover-border",
+  buttonOutlineActiveBg: "--button-outline-active-bg",
+  buttonOutlineDisabledText: "--button-outline-disabled-text",
+  buttonOutlineDisabledBorder: "--button-outline-disabled-border",
+  buttonDangerBg: "--button-danger-bg",
+  buttonDangerText: "--button-danger-text",
+  buttonDangerBorder: "--button-danger-border",
+  buttonDangerHoverBg: "--button-danger-hover-bg",
+  buttonDangerHoverBorder: "--button-danger-hover-border",
+  buttonDangerActiveBg: "--button-danger-active-bg",
+  buttonDangerDisabledBg: "--button-danger-disabled-bg",
+  buttonDangerDisabledText: "--button-danger-disabled-text",
+  // Cards
+  cardBackground: "--card-background",
+  cardBackgroundHover: "--card-background-hover",
+  cardBorder: "--card-border",
+  cardBorderHover: "--card-border-hover",
+  cardShadow: "--card-shadow",
+  cardShadowHover: "--card-shadow-hover",
+  // Nav
+  navBackground: "--nav-background",
+  navBorder: "--nav-border",
+  navLink: "--nav-link",
+  navLinkHover: "--nav-link-hover",
+  navLinkActive: "--nav-link-active",
+  navLinkActiveBorder: "--nav-link-active-border",
+  navFocusRing: "--nav-focus-ring",
+  // Forms
+  formBackground: "--form-background",
+  formBorder: "--form-border",
+  formBorderHover: "--form-border-hover",
+  formBorderFocus: "--form-border-focus",
+  formText: "--form-text",
+  formTextMuted: "--form-text-muted",
+  formPlaceholder: "--form-placeholder",
+  formBgDisabled: "--form-bg-disabled",
+  formBorderDisabled: "--form-border-disabled",
+  formTextDisabled: "--form-text-disabled",
+  // Badges
+  badgeBackground: "--badge-background",
+  badgeBorder: "--badge-border",
+  badgeText: "--badge-text",
+  // Footer
+  footerBackground: "--footer-background",
+  footerBorder: "--footer-border",
+  footerText: "--footer-text",
+  footerLink: "--footer-link",
+  footerLinkHover: "--footer-link-hover",
+  // Shadow elevation
+  shadowElevationLow: "--shadow-elevation-low",
+  shadowElevationMedium: "--shadow-elevation-medium",
+  shadowElevationHigh: "--shadow-elevation-high",
+  shadowElevationModal: "--shadow-elevation-modal"
+}, a = {
+  ...o,
+  ...t
+};
+function r(e) {
+  return `var(${e})`;
+}
+export {
+  a as ALL_TOKEN_NAMES,
+  t as COLOR_TOKEN_NAMES,
+  o as TOKEN_NAMES,
+  r as token
+};

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@paraxe/design",
+  "version": "1.0.0",
+  "description": "Paraxe design system — canonical tokens, themes, and presets. Source of truth for the entire ecosystem.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "style": "./dist/index.css",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./tokens.css": "./src/tokens.css",
+    "./theme.css": "./src/themes/default.css",
+    "./components.css": "./src/components.css",
+    "./themes/*.css": "./src/themes/*.css",
+    "./presets/*.css": "./src/presets/*.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "prepack": "npm run build",
+    "typecheck": "tsc --noEmit"
+  },
+  "keywords": [
+    "design-tokens",
+    "design-system",
+    "css-variables",
+    "paraxe",
+    "themes",
+    "presets"
+  ],
+  "license": "MIT",
+  "devDependencies": {
+    "@types/node": "^22.10.0",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.0",
+    "vite-plugin-dts": "^4.5.0"
+  }
+}

package/src/README.md

@@ -0,0 +1,62 @@
+# @loba/design
+
+Canonical design tokens, themes, and presets for the Loba ecosystem.
+This is the **source of truth** for every token name and default value.
+
+## Import order
+
+```css
+@import "@loba/design/tokens.css";            /* 1. Structural (non-color) */
+@import "@loba/design/presets/default.css";   /* 2. Personality */
+@import "@loba/design/themes/default.css";    /* 3. Colors (dark default) */
+@import "@loba/design/themes/light.css";      /* 3b. Optional light theme */
+@import "@loba/design/components.css";        /* 4. Framework-agnostic component classes (non-@loba/ui) */
+```
+
+## Structure
+
+```
+src/
+├── tokens.css            # Layer 1 — spacing, typography, motion, radius, z, layout
+├── themes/               # Layer 2 — colors only
+│   ├── default.css       #   dark default + [data-theme="light"] overrides
+│   ├── dark.css          #   deep space blue
+│   ├── light.css         #   clean light
+│   └── forge.css         #   warm orange/copper
+├── presets/              # Layer 3 — personality (~15 vars)
+│   ├── default.css       #   Plus Jakarta Sans baseline
+│   └── ...               #   tech, corporate, premium, editorial, etc.
+├── components.css        # Layer 4 — framework-agnostic classes (.btn, .card, .navbar, .container, .stack, .grid, forms, animations)
+├── tailwind.css          # optional Tailwind v4 bridge
+└── index.ts              # token manifest + CSS side-effect imports
+```
+
+## Rendering paths
+
+- **`@loba/ui` path** — consume the Vue components (`Button`, `Card`, etc.).
+  They read canonical token variables directly. Import `@loba/design` token
+  layers + `@loba/ui/style.css`. `components.css` is optional here.
+- **Non-`@loba/ui` path** — render plain HTML/CSS classes (`.btn`,
+  `.card`, `.navbar`, `.stack`, `.container`, forms). Import
+  `@loba/design/components.css` so those classes are defined against the
+  same canonical tokens. Both paths share the exact same design system.
+
+Both paths import the same `tokens.css` + `presets/*.css` + `themes/*.css`,
+so the look & feel is identical regardless of which path is used.
+
+## Design language
+
+The Loba design system is guided by three documents that sit above the tokens:
+
+- **[PHILOSOPHY.md](../PHILOSOPHY.md)** — prescriptive composition principles
+  (surfaces by light, accent discipline, typography-led hierarchy, etc.).
+- **[STYLE.md](../STYLE.md)** — the `loba-default` design style spec:
+  the visual language expressed by the Loba Studios site, defined independently
+  so any future site follows the same language without copying the marketing page.
+- **[PATTERNS.md](../PATTERNS.md)** — optional recipes (glass surface, section
+  rhythm, staggered grids, accent checklist) — each is an option, not a mandate.
+
+## Contract
+
+See [CONTRACT.md](../CONTRACT.md) — FROZEN v1.0. Token renames are breaking changes.
+