@skyfall_ai/bazaar 0.1.0

package/package.json

@@ -0,0 +1,89 @@
+{
+  "name": "@skyfall_ai/bazaar",
+  "version": "0.1.0",
+  "description": "Skyfall Bazaar — Curated eCommerce UI kit for discovery, trust, and conversion",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./styles": "./dist/index.css",
+    "./styles.css": "./dist/index.css",
+    "./tokens": "./src/tokens/bazaar-tokens.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src/tokens/*.css"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "publishConfig": {
+    "access": "restricted"
+  },
+  "scripts": {
+    "dev": "storybook dev -p 6006",
+    "build": "vite build --config vite.lib.config.ts && cp dist/index.d.ts dist/index.d.mts",
+    "build-storybook": "storybook build",
+    "chromatic": "chromatic --exit-zero-on-changes",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist storybook-static",
+    "prepublishOnly": "npm run clean && npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "recharts": ">=2.10.0"
+  },
+  "peerDependenciesMeta": {
+    "recharts": {
+      "optional": false
+    }
+  },
+  "devDependencies": {
+    "@storybook/addon-a11y": "^10.3.5",
+    "@storybook/addon-docs": "^10.3.5",
+    "@storybook/react": "^10.3.5",
+    "@storybook/react-vite": "^10.3.5",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^6.0.1",
+    "chromatic": "^16.3.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "recharts": "^2.15.4",
+    "storybook": "^10.3.5",
+    "tsup": "^8.3.0",
+    "typescript": "^5.6.0",
+    "vite": "^8.0.0",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "keywords": [
+    "ecommerce",
+    "commerce",
+    "storefront",
+    "retail",
+    "checkout",
+    "design-system",
+    "react",
+    "components",
+    "ui",
+    "skyfall"
+  ],
+  "license": "MIT",
+  "homepage": "https://github.com/skyfall-consulting/skyfall-bazaar#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/skyfall-consulting/skyfall-bazaar.git"
+  }
+}

package/src/tokens/bazaar-tokens.css

@@ -0,0 +1,427 @@
+/*
+ * Skyfall Bazaar — Design Tokens
+ *
+ * Palette: Warm neutrals. Oat, ecru, warm ink for the structural surfaces;
+ * terracotta for accent and promotion; sage for confirmation and eco
+ * signals. Optimized for considered commerce — editorial calm over
+ * marketplace noise.
+ *
+ * Naming convention: --bazaar-{category}-{role}-{variant}-{scale}
+ */
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&display=swap');
+
+:root {
+  /* ============================================
+     BRAND & CORE PALETTE — Warm Ink
+     Commerce "primary" lives as near-black buttons and typography;
+     the scale supplies hover/active states and low-emphasis fills.
+     ============================================ */
+  --bazaar-color-brand-primary-50: #F5F3EE;
+  --bazaar-color-brand-primary-100: #E5E1D5;
+  --bazaar-color-brand-primary-200: #C6BFAC;
+  --bazaar-color-brand-primary-300: #8A816B;
+  --bazaar-color-brand-primary-400: #5E5749;
+  --bazaar-color-brand-primary-500: #433D32;
+  --bazaar-color-brand-primary-600: #2E2A23;
+  --bazaar-color-brand-primary-700: #1F1C17;
+  --bazaar-color-brand-primary-800: #161310;
+  --bazaar-color-brand-primary-900: #0E0B09;
+
+  /* ============================================
+     SECONDARY — TERRACOTTA / CLAY
+     Reserved for accent, promo strips, sale badges, progress fills.
+     Not the default button color — commerce prefers ink for CTAs.
+     ============================================ */
+  --bazaar-color-brand-secondary-50: #FBEEE4;
+  --bazaar-color-brand-secondary-100: #F6D9C5;
+  --bazaar-color-brand-secondary-200: #ECB690;
+  --bazaar-color-brand-secondary-300: #DF9662;
+  --bazaar-color-brand-secondary-400: #C96C3E;
+  --bazaar-color-brand-secondary-500: #AB5428;
+  --bazaar-color-brand-secondary-600: #873F1C;
+  --bazaar-color-brand-secondary-700: #662E13;
+  --bazaar-color-brand-secondary-800: #4A2110;
+  --bazaar-color-brand-secondary-900: #2E160A;
+
+  /* ============================================
+     SUPPORT ACCENT — SAGE
+     Success / in-stock / eco. Aliased as "teal" for API parity.
+     ============================================ */
+  --bazaar-color-accent-mint-50: #EAF1EA;
+  --bazaar-color-accent-mint-100: #D1DFD3;
+  --bazaar-color-accent-mint-200: #A8C1AC;
+  --bazaar-color-accent-mint-300: #7BA181;
+  --bazaar-color-accent-mint-400: #4A7C59;
+  --bazaar-color-accent-mint-500: #3A6547;
+  --bazaar-color-accent-mint-600: #2E5237;
+  --bazaar-color-accent-mint-700: #22402A;
+
+  --bazaar-color-accent-teal-50: #EAF1EA;
+  --bazaar-color-accent-teal-100: #D1DFD3;
+  --bazaar-color-accent-teal-200: #A8C1AC;
+  --bazaar-color-accent-teal-300: #7BA181;
+  --bazaar-color-accent-teal-400: #4A7C59;
+  --bazaar-color-accent-teal-500: #3A6547;
+  --bazaar-color-accent-teal-600: #2E5237;
+  --bazaar-color-accent-teal-700: #22402A;
+
+  /* ============================================
+     REWARD ACCENT — WARM AMBER
+     Loyalty, rewards, gold-tier highlights.
+     ============================================ */
+  --bazaar-color-accent-amber-50: #FBF2DF;
+  --bazaar-color-accent-amber-100: #F5E1B6;
+  --bazaar-color-accent-amber-200: #EAC079;
+  --bazaar-color-accent-amber-300: #D9A046;
+  --bazaar-color-accent-amber-400: #B58235;
+  --bazaar-color-accent-amber-500: #8C6324;
+  --bazaar-color-accent-amber-600: #6C4B1A;
+  --bazaar-color-accent-amber-700: #513712;
+
+  /* ============================================
+     NEUTRAL PALETTE — Oat / Ecru / Ink
+     Warm undertone throughout — avoids the cool blue cast of
+     cloud/slate neutrals that reads as "dashboard" rather than
+     "shop."
+     ============================================ */
+  --bazaar-color-neutral-0: #FFFFFF;
+  --bazaar-color-neutral-25: #FBF9F4;
+  --bazaar-color-neutral-50: #F4F2EC;
+  --bazaar-color-neutral-100: #ECE7DC;
+  --bazaar-color-neutral-200: #D9D2C1;
+  --bazaar-color-neutral-300: #B8AE97;
+  --bazaar-color-neutral-400: #8A816B;
+  --bazaar-color-neutral-500: #5E5749;
+  --bazaar-color-neutral-600: #433D32;
+  --bazaar-color-neutral-700: #2E2A23;
+  --bazaar-color-neutral-800: #1F1C17;
+  --bazaar-color-neutral-900: #131110;
+
+  /* ============================================
+     SEMANTIC PALETTE
+     Warm interpretations of each status tone so callouts don't
+     clash with the editorial neutrals.
+     ============================================ */
+  --bazaar-color-success-50: #EAF1EA;
+  --bazaar-color-success-500: #4A7C59;
+  --bazaar-color-success-700: #2E5237;
+
+  --bazaar-color-warning-50: #FBF2DF;
+  --bazaar-color-warning-500: #B58235;
+  --bazaar-color-warning-700: #6C4B1A;
+
+  --bazaar-color-error-50: #F9E8E4;
+  --bazaar-color-error-500: #B04848;
+  --bazaar-color-error-700: #7D2E2E;
+
+  --bazaar-color-info-50: #F4F2EC;
+  --bazaar-color-info-500: #433D32;
+  --bazaar-color-info-700: #1F1C17;
+
+  /* Status aliases — referenced by commerce components. */
+  --bazaar-color-status-success: #4A7C59;
+  --bazaar-color-status-warning: #B58235;
+  --bazaar-color-status-danger: #B04848;
+
+  /* ============================================
+     TEXT & SURFACE ALIASES
+     ============================================ */
+  --bazaar-color-text-primary: #1F1C17;
+  --bazaar-color-text-secondary: #433D32;
+  --bazaar-color-text-muted: #8A816B;
+  --bazaar-color-text-inverse: #FBF9F4;
+  --bazaar-color-text-brand: #C96C3E;
+
+  --bazaar-color-surface-canvas: #FBF9F4;
+  --bazaar-color-surface-default: #FFFFFF;
+  --bazaar-color-surface-subtle: #F4F2EC;
+  --bazaar-color-surface-raised: #FFFFFF;
+  --bazaar-color-surface-overlay: #FFFFFF;
+  --bazaar-color-surface-sunken: #ECE7DC;
+  --bazaar-color-surface-hover: #F4F2EC;
+  --bazaar-color-surface-active: #ECE7DC;
+  --bazaar-color-surface-selected: #F4F2EC;
+  --bazaar-color-surface-selected-hover: #ECE7DC;
+  --bazaar-color-surface-spotlight: #FBEEE4;
+
+  --bazaar-color-border-default: #D9D2C1;
+  --bazaar-color-border-strong: #B8AE97;
+  --bazaar-color-border-subtle: rgba(31, 28, 23, 0.08);
+  --bazaar-color-border-inverse: #2E2A23;
+  --bazaar-color-border-brand: #1F1C17;
+  --bazaar-color-border-success: #4A7C59;
+  --bazaar-color-border-warning: #B58235;
+  --bazaar-color-border-error: #B04848;
+
+  /* Accent alias — used across commerce components for focus
+     rings, progress fills, and small highlights. */
+  --bazaar-color-accent: #C96C3E;
+  --bazaar-color-accent-soft: #FBEEE4;
+
+  /* Commerce-specific aliases — sale, surface-muted. Sale renders on
+     warm-neutral surfaces; we use the deepest terracotta so it
+     registers as "urgent" without shouting. */
+  --bazaar-color-sale: #873F1C;
+  --bazaar-color-surface-muted: #D9D2C1;
+
+  --bazaar-color-focus-ring: #C96C3E;
+  --bazaar-color-overlay-scrim: rgba(31, 28, 23, 0.52);
+
+  /* Warm glow used behind spotlight tiles and seasonal promos. */
+  --bazaar-color-glow-soft: rgba(201, 108, 62, 0.12);
+  --bazaar-color-glow-medium: rgba(201, 108, 62, 0.22);
+
+  /* ============================================
+     TYPOGRAPHY
+     Inter for body + labels. Fraunces (variable serif) for
+     editorial display headlines — hero, campaign, product name.
+     ============================================ */
+  --bazaar-font-family-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --bazaar-font-family-display: "Fraunces", "Inter", system-ui, serif;
+  --bazaar-font-family-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
+
+  --bazaar-font-weight-regular: 400;
+  --bazaar-font-weight-medium: 500;
+  --bazaar-font-weight-semibold: 600;
+  --bazaar-font-weight-bold: 700;
+
+  /* Type scale — sizes */
+  --bazaar-font-size-display-lg: 48px;
+  --bazaar-font-size-display-md: 36px;
+  --bazaar-font-size-heading-xl: 28px;
+  --bazaar-font-size-heading-lg: 24px;
+  --bazaar-font-size-heading-md: 20px;
+  --bazaar-font-size-heading-sm: 18px;
+  --bazaar-font-size-body-lg: 16px;
+  --bazaar-font-size-body-md: 14px;
+  --bazaar-font-size-body-sm: 13px;
+  --bazaar-font-size-label-lg: 14px;
+  --bazaar-font-size-label-md: 13px;
+  --bazaar-font-size-caption: 12px;
+  --bazaar-font-size-data: 14px;
+  --bazaar-font-size-code: 13px;
+
+  /* Type scale — line heights (editorial is slightly airier) */
+  --bazaar-line-height-display-lg: 56px;
+  --bazaar-line-height-display-md: 44px;
+  --bazaar-line-height-heading-xl: 36px;
+  --bazaar-line-height-heading-lg: 32px;
+  --bazaar-line-height-heading-md: 28px;
+  --bazaar-line-height-heading-sm: 26px;
+  --bazaar-line-height-body-lg: 26px;
+  --bazaar-line-height-body-md: 22px;
+  --bazaar-line-height-body-sm: 20px;
+  --bazaar-line-height-label-lg: 20px;
+  --bazaar-line-height-label-md: 18px;
+  --bazaar-line-height-caption: 16px;
+  --bazaar-line-height-data: 20px;
+  --bazaar-line-height-code: 18px;
+
+  /* Letter spacing — editorial display prefers a touch tighter. */
+  --bazaar-tracking-tight: -0.02em;
+  --bazaar-tracking-normal: 0em;
+  --bazaar-tracking-wide: 0.08em;
+
+  /* ============================================
+     SPACING
+     ============================================ */
+  --bazaar-space-0: 0;
+  --bazaar-space-1: 4px;
+  --bazaar-space-2: 8px;
+  --bazaar-space-3: 12px;
+  --bazaar-space-4: 16px;
+  --bazaar-space-5: 20px;
+  --bazaar-space-6: 24px;
+  --bazaar-space-8: 32px;
+  --bazaar-space-10: 40px;
+  --bazaar-space-12: 48px;
+  --bazaar-space-16: 64px;
+  --bazaar-space-20: 80px;
+
+  /* ============================================
+     SIZING
+     ============================================ */
+  --bazaar-size-control-sm: 32px;
+  --bazaar-size-control-md: 40px;
+  --bazaar-size-control-lg: 48px;
+
+  --bazaar-size-icon-xs: 12px;
+  --bazaar-size-icon-sm: 16px;
+  --bazaar-size-icon-md: 20px;
+  --bazaar-size-icon-lg: 24px;
+
+  --bazaar-size-touch-min: 44px;
+
+  --bazaar-size-sidebar-default: 280px;
+  --bazaar-size-modal-sm: 400px;
+  --bazaar-size-modal-md: 560px;
+  --bazaar-size-modal-lg: 720px;
+  --bazaar-size-modal-xl: 880px;
+
+  /* ============================================
+     RADIUS
+     Commerce prefers slightly sharper corners than the Beacon
+     source — less "dashboard", more "magazine."
+     ============================================ */
+  --bazaar-radius-none: 0;
+  --bazaar-radius-sm: 4px;
+  --bazaar-radius-md: 8px;
+  --bazaar-radius-lg: 12px;
+  --bazaar-radius-xl: 16px;
+  --bazaar-radius-full: 9999px;
+
+  /* ============================================
+     BORDERS
+     ============================================ */
+  --bazaar-border-width-none: 0;
+  --bazaar-border-width-hairline: 1px;
+  --bazaar-border-width-medium: 2px;
+  --bazaar-border-width-strong: 3px;
+  --bazaar-border-style-default: solid;
+
+  /* ============================================
+     SHADOWS & ELEVATION
+     Shadow RGBA uses the warm-ink base so elevation reads as
+     natural shadow rather than cold slate.
+     ============================================ */
+  --bazaar-shadow-none: none;
+  --bazaar-shadow-xs: 0 1px 2px rgba(31, 28, 23, 0.04);
+  --bazaar-shadow-sm: 0 1px 2px rgba(31, 28, 23, 0.06), 0 2px 8px rgba(31, 28, 23, 0.04);
+  --bazaar-shadow-md: 0 2px 4px rgba(31, 28, 23, 0.05), 0 10px 24px rgba(31, 28, 23, 0.08);
+  --bazaar-shadow-lg: 0 4px 8px rgba(31, 28, 23, 0.06), 0 20px 44px rgba(31, 28, 23, 0.12);
+  --bazaar-shadow-xl: 0 8px 16px rgba(31, 28, 23, 0.07), 0 28px 60px rgba(31, 28, 23, 0.16);
+  --bazaar-shadow-glow: 0 0 0 1px rgba(201, 108, 62, 0.18), 0 8px 24px rgba(201, 108, 62, 0.18);
+  --bazaar-shadow-focus: 0 0 0 3px rgba(201, 108, 62, 0.28);
+  --bazaar-shadow-focus-error: 0 0 0 3px rgba(176, 72, 72, 0.24);
+  --bazaar-shadow-focus-success: 0 0 0 3px rgba(74, 124, 89, 0.22);
+  --bazaar-shadow-inset-xs: inset 0 1px 2px rgba(31, 28, 23, 0.06);
+  --bazaar-shadow-inset-sm: inset 0 2px 4px rgba(31, 28, 23, 0.08);
+
+  /* ============================================
+     MOTION
+     ============================================ */
+  --bazaar-motion-duration-fast: 120ms;
+  --bazaar-motion-duration-base: 180ms;
+  --bazaar-motion-duration-slow: 240ms;
+  --bazaar-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
+  --bazaar-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
+  --bazaar-motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
+
+  /* ============================================
+     OPACITY
+     ============================================ */
+  --bazaar-opacity-disabled: 0.48;
+  --bazaar-opacity-subtle: 0.72;
+  --bazaar-opacity-overlay: 0.48;
+  --bazaar-opacity-scrim-strong: 0.64;
+
+  /* ============================================
+     Z-INDEX
+     ============================================ */
+  --bazaar-z-base: 0;
+  --bazaar-z-dropdown: 1000;
+  --bazaar-z-sticky: 1100;
+  --bazaar-z-banner: 1200;
+  --bazaar-z-overlay: 1300;
+  --bazaar-z-modal: 1400;
+  --bazaar-z-toast: 1500;
+  --bazaar-z-tooltip: 1600;
+
+  /* ============================================
+     GRID & LAYOUT
+     ============================================ */
+  --bazaar-layout-container-max: 1400px;
+  --bazaar-layout-container-reading: 720px;
+  --bazaar-layout-grid-columns: 12;
+  --bazaar-layout-grid-gutter: 24px;
+  --bazaar-layout-grid-margin-desktop: 32px;
+  --bazaar-layout-grid-margin-tablet: 24px;
+  --bazaar-layout-grid-margin-mobile: 16px;
+
+  /* ============================================
+     FOCUS & INTERACTION
+     ============================================ */
+  --bazaar-focus-ring-width: 2px;
+  --bazaar-focus-ring-color: rgba(201, 108, 62, 0.32);
+  --bazaar-focus-ring-offset: 2px;
+  --bazaar-focus-outline-color: #C96C3E;
+
+  /* ============================================
+     ICONOGRAPHY
+     ============================================ */
+  --bazaar-icon-stroke-default: 1.5;
+  --bazaar-icon-size-default: 20px;
+
+  /* ============================================
+     INTERACTIVE STATES
+     ============================================ */
+  --bazaar-state-hover-overlay: rgba(31, 28, 23, 0.04);
+  --bazaar-state-active-overlay: rgba(31, 28, 23, 0.08);
+  --bazaar-state-selected-bg: #F4F2EC;
+  --bazaar-state-selected-border: #B8AE97;
+  --bazaar-state-drag-bg: #F4F2EC;
+
+  /* ============================================
+     DATA VISUALIZATION
+     Warm, considered palette for charts in account/admin views.
+     ============================================ */
+  --bazaar-data-vis-1: #1F1C17;
+  --bazaar-data-vis-2: #C96C3E;
+  --bazaar-data-vis-3: #4A7C59;
+  --bazaar-data-vis-4: #B58235;
+  --bazaar-data-vis-5: #8A816B;
+  --bazaar-data-vis-gridline: #ECE7DC;
+  --bazaar-data-vis-axis: #8A816B;
+
+  /* ============================================
+     PROGRESS & ACHIEVEMENT
+     ============================================ */
+  --bazaar-progress-track: #ECE7DC;
+  --bazaar-progress-fill-default: #1F1C17;
+  --bazaar-progress-fill-success: #4A7C59;
+  --bazaar-progress-fill-reward: #C96C3E;
+  --bazaar-progress-fill-gradient: linear-gradient(90deg, #C96C3E 0%, #1F1C17 100%);
+  --bazaar-achievement-glow: 0 0 0 4px rgba(201, 108, 62, 0.18);
+  --bazaar-milestone-marker: #C96C3E;
+}
+
+/* ============================================
+   REDUCED MOTION
+   ============================================ */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --bazaar-motion-duration-fast: 0ms;
+    --bazaar-motion-duration-base: 0ms;
+    --bazaar-motion-duration-slow: 0ms;
+  }
+}
+
+/* ============================================
+   GLOBAL RESET & BASE STYLES
+   ============================================ */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: var(--bazaar-font-family-sans);
+  font-size: var(--bazaar-font-size-body-lg);
+  line-height: var(--bazaar-line-height-body-lg);
+  color: var(--bazaar-color-text-primary);
+  background-color: var(--bazaar-color-surface-canvas);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Display families are applied explicitly by components that want
+   the serif voice — we don't paint every heading globally. */
+
+:focus-visible {
+  outline: var(--bazaar-border-width-medium) solid var(--bazaar-focus-outline-color);
+  outline-offset: var(--bazaar-focus-ring-offset);
+  box-shadow: var(--bazaar-shadow-focus);
+}