@borisj74/bv-ds 0.1.0

package/tailwind-preset.js

@@ -0,0 +1,295 @@
+// Shareable Tailwind preset — token names traced from design.md, confirmed
+// against the live Figma file via figma-map.md token pulls. Consumers extend
+// their own tailwind.config.js with this preset so generated class names
+// (bg-brand-solid, text-secondary, p-md, etc.) match the design tokens
+// directly rather than arbitrary values.
+//
+// Usage in a consuming app's tailwind.config.js:
+//   const dsPreset = require("@borisj74/bv-ds/tailwind-preset");
+//   module.exports = { presets: [dsPreset], content: [...] };
+//
+// PEER DEPENDENCY — Recharts: chart components (_ChartMini, and the deferred
+// Line/bar/Pie/Radar wrappers) require `recharts` (>=2) installed in the
+// consuming app. Optional peer dependency: install it only if you use the chart
+// components. Recharts color props take hex strings, so those components read
+// token hex values from this preset directly (not Tailwind class names).
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        // Text — design.md §2 "Color — Text"
+        "text-primary": "#171717",
+        "text-primary-on-brand": "#ffffff",
+        "text-secondary": "#404040",
+        "text-secondary-hover": "#262626",
+        "text-secondary-on-brand": "#e9d7fe",
+        "text-tertiary": "#525252",
+        "text-tertiary-hover": "#404040",
+        "text-tertiary-on-brand": "#e9d7fe",
+        "text-quaternary": "#737373",
+        "text-quaternary-on-brand": "#d6bbfb",
+        "text-white": "#ffffff",
+        "text-placeholder": "#737373",
+        "text-brand-primary": "#42307d",
+        "text-brand-secondary": "#6941c6",
+        "text-brand-secondary-hover": "#53389e",
+        "text-brand-tertiary": "#7f56d9",
+        "text-brand-tertiary-alt": "#7f56d9",
+        "text-error-primary": "#dc2626",
+        "text-warning-primary": "#ca8a04",
+        "text-success-primary": "#16a34a",
+
+        // Background — design.md §2 "Color — Background"
+        "bg-primary": "#ffffff",
+        "bg-primary-alt": "#ffffff",
+        "bg-primary-hover": "#fafafa",
+        "bg-primary-solid": "#0a0a0a",
+        "bg-secondary": "#fafafa",
+        "bg-secondary-alt": "#fafafa",
+        "bg-secondary-hover": "#f5f5f5",
+        "bg-secondary-solid": "#525252",
+        "bg-tertiary": "#f5f5f5",
+        "bg-quaternary": "#e5e5e5",
+        "bg-overlay": "#0a0a0a",
+        "bg-brand-primary": "#f9f5ff",
+        "bg-brand-primary-alt": "#f9f5ff",
+        "bg-brand-secondary": "#f4ebff",
+        "bg-brand-solid": "#7f56d9",
+        "bg-brand-solid-hover": "#6941c6",
+        "bg-error-primary": "#fef2f2",
+        "bg-error-secondary": "#fee2e2",
+        "bg-error-solid": "#dc2626",
+        "bg-error-solid-hover": "#b91c1c",
+        "bg-warning-primary": "#fefce8",
+        "bg-warning-secondary": "#fef9c3",
+        "bg-warning-solid": "#ca8a04",
+        "bg-success-primary": "#f0fdf4",
+        "bg-success-secondary": "#dcfce7",
+        "bg-success-solid": "#16a34a",
+
+        // Border — design.md §2 "Color — Border"
+        "border-primary": "#d4d4d4",
+        "border-secondary": "#e5e5e5",
+        "border-secondary-alt": "rgba(0,0,0,0.1)",
+        "border-tertiary": "#f5f5f5",
+        "border-brand": "#9e77ed",
+        "border-brand-alt": "#7f56d9",
+        "border-error": "#ef4444",
+        "border-error-subtle": "#fca5a5",
+
+        // Foreground (icons) — design.md §2 "Color — Foreground"
+        "fg-primary": "#171717",
+        "fg-secondary": "#404040",
+        "fg-secondary-hover": "#262626",
+        "fg-tertiary": "#525252",
+        "fg-tertiary-hover": "#404040",
+        "fg-quaternary": "#a3a3a3",
+        "fg-quaternary-hover": "#737373",
+        "fg-white": "#ffffff",
+        "fg-brand-primary": "#7f56d9",
+        "fg-brand-primary-alt": "#7f56d9",
+        "fg-brand-secondary": "#9e77ed",
+        "fg-brand-secondary-alt": "#9e77ed",
+        "fg-error-primary": "#dc2626",
+        "fg-error-secondary": "#ef4444",
+        "fg-warning-primary": "#ca8a04",
+        "fg-warning-secondary": "#eab308",
+        "fg-success-primary": "#16a34a",
+        "fg-success-secondary": "#22c55e",
+
+        // Utility colors — Component colors/Utility/<Family>/utility-<family>-<shade>
+        // Harvested live from Figma (Badge node 1046:3819 + Calendar event
+        // 7991:78181). NOTE: Figma's actual family names are color names
+        // (yellow/green/red/neutral), NOT the semantic Warning/Success/Error/Gray
+        // aliases — using the real names so utility-* classes round-trip to the
+        // file. Shades included are those Figma actually defines per family — a
+        // superset of the requested 50/200/400/500/700 (also 100/600 and
+        // neutral-300) because Charts/Calendar consume them. Emerald/Amber have
+        // no -400 in the source; omitted rather than invented. The full -100
+        // ramp is now filled for all 14 families; slate-100 (#f1f5f9) and
+        // sky-100 (#e0f2fe) were derived from Tailwind's palette (every other
+        // slate/sky shade matched Tailwind exactly) since they weren't in a
+        // Figma var dump — all other -100s came straight from Figma.
+        "utility-brand-50": "#f9f5ff",
+        "utility-brand-100": "#f4ebff",
+        "utility-brand-200": "#e9d7fe",
+        "utility-brand-400": "#b692f6",
+        "utility-brand-500": "#9e77ed",
+        "utility-brand-600": "#7f56d9",
+        "utility-brand-700": "#6941c6",
+        "utility-yellow-50": "#fefce8",
+        "utility-yellow-100": "#fef9c3",
+        "utility-yellow-200": "#fef08a",
+        "utility-yellow-400": "#facc15",
+        "utility-yellow-500": "#eab308",
+        "utility-yellow-600": "#ca8a04",
+        "utility-yellow-700": "#a16207",
+        // NOTE: Figma's `utility-success-*` naming maps to `utility-green-*` here —
+        // use `utility-green-*` consistently (no `utility-success-*` keys exist).
+        "utility-green-50": "#f0fdf4",
+        "utility-green-100": "#dcfce7",
+        "utility-green-200": "#bbf7d0",
+        "utility-green-400": "#4ade80",
+        "utility-green-500": "#22c55e",
+        "utility-green-600": "#16a34a",
+        "utility-green-700": "#15803d",
+        "utility-slate-50": "#f8fafc",
+        "utility-slate-100": "#f1f5f9",
+        "utility-slate-200": "#e2e8f0",
+        "utility-slate-400": "#94a3b8",
+        "utility-slate-500": "#64748b",
+        "utility-slate-700": "#334155",
+        "utility-sky-50": "#f0f9ff",
+        "utility-sky-100": "#e0f2fe",
+        "utility-sky-200": "#bae6fd",
+        "utility-sky-400": "#38bdf8",
+        "utility-sky-500": "#0ea5e9",
+        "utility-sky-700": "#0369a1",
+        "utility-indigo-50": "#eef2ff",
+        "utility-indigo-100": "#e0e7ff",
+        "utility-indigo-200": "#c7d2fe",
+        "utility-indigo-400": "#818cf8",
+        "utility-indigo-500": "#6366f1",
+        "utility-indigo-600": "#4f46e5",
+        "utility-indigo-700": "#4338ca",
+        "utility-purple-50": "#faf5ff",
+        "utility-purple-100": "#f3e8ff",
+        "utility-purple-200": "#e9d5ff",
+        "utility-purple-400": "#c084fc",
+        "utility-purple-500": "#a855f7",
+        "utility-purple-600": "#9333ea",
+        "utility-purple-700": "#7e22ce",
+        "utility-blue-50": "#eff6ff",
+        "utility-blue-100": "#dbeafe",
+        "utility-blue-200": "#bfdbfe",
+        "utility-blue-400": "#60a5fa",
+        "utility-blue-500": "#3b82f6",
+        "utility-blue-600": "#2563eb",
+        "utility-blue-700": "#1d4ed8",
+        "utility-pink-50": "#fdf2f8",
+        "utility-pink-100": "#fce7f3",
+        "utility-pink-200": "#fbcfe8",
+        "utility-pink-400": "#f472b6",
+        "utility-pink-500": "#ec4899",
+        "utility-pink-600": "#db2777",
+        "utility-pink-700": "#be185d",
+        "utility-orange-50": "#fff7ed",
+        "utility-orange-100": "#ffedd5",
+        "utility-orange-200": "#fed7aa",
+        "utility-orange-400": "#fb923c",
+        "utility-orange-500": "#f97316",
+        "utility-orange-600": "#ea580c",
+        "utility-orange-700": "#c2410c",
+        "utility-red-50": "#fef2f2",
+        "utility-red-100": "#fee2e2",
+        "utility-red-200": "#fecaca",
+        "utility-red-400": "#f87171",
+        "utility-red-500": "#ef4444",
+        "utility-red-600": "#dc2626",
+        "utility-red-700": "#b91c1c",
+        "utility-neutral-50": "#fafafa",
+        "utility-neutral-100": "#f5f5f5",
+        "utility-neutral-200": "#e5e5e5",
+        "utility-neutral-300": "#d4d4d4",
+        "utility-neutral-400": "#a3a3a3",
+        "utility-neutral-500": "#737373",
+        "utility-neutral-600": "#525252",
+        "utility-neutral-700": "#404040",
+        "utility-emerald-50": "#ecfdf5",
+        "utility-emerald-100": "#d1fae5",
+        "utility-emerald-200": "#a7f3d0",
+        "utility-emerald-500": "#10b981",
+        "utility-emerald-600": "#059669",
+        "utility-emerald-700": "#047857",
+        "utility-amber-50": "#fffbeb",
+        "utility-amber-100": "#fef3c7",
+        "utility-amber-200": "#fde68a",
+        "utility-amber-500": "#f59e0b",
+        "utility-amber-600": "#d97706",
+        "utility-amber-700": "#b45309",
+        // Alpha overlays (Component colors/Alpha) — confirmed values
+        "alpha-white-10": "rgba(255,255,255,0.10)",
+        "alpha-white-90": "rgba(255,255,255,0.90)",
+        "alpha-black-10": "rgba(0,0,0,0.10)",
+        "alpha-black-100": "rgba(0,0,0,1.00)",
+        // Component colors/Components/Sliders — confirmed via get_variable_defs (node 1086:534)
+        "slider-handle-bg": "#ffffff",
+        "slider-handle-border": "#7f56d9",
+        // Component colors/Components/Toggles — confirmed via get_variable_defs (node 1102:4208).
+        // Slim toggle pressed track border; Default toggle uses bg-brand-solid/-hover.
+        "toggle-slim-border-pressed": "#7f56d9",
+        "toggle-slim-border-pressed-hover": "#6941c6",
+      },
+      spacing: {
+        none: "0px",
+        xxs: "2px",
+        xs: "4px",
+        sm: "6px",
+        md: "8px",
+        lg: "12px",
+        xl: "16px",
+        "2xl": "20px",
+        "3xl": "24px",
+        "4xl": "32px",
+        "5xl": "40px",
+        "6xl": "48px",
+        "7xl": "64px",
+        "8xl": "80px",
+        "9xl": "96px",
+        "10xl": "128px",
+        "11xl": "160px",
+        // Layout container tokens (Alert / Header navigation / Page header)
+        "container-padding-desktop": "32px",
+        "container-padding-mobile": "16px",
+      },
+      maxWidth: {
+        "container-max-width-desktop": "1280px",
+        "width-lg": "640px",
+      },
+      boxShadow: {
+        // design.md §2 — base outer drop + the three-layer skeuomorphic stack
+        // (Shadows/shadow-xs-skeuomorphic).
+        xs: "0px 1px 2px 0px rgba(0,0,0,0.05)",
+        skeuomorphic:
+          "0px 1px 2px 0px rgba(0,0,0,0.05), inset 0px -2px 0px 0px rgba(0,0,0,0.05), inset 0px 0px 0px 1px rgba(0,0,0,0.18)",
+      },
+      borderRadius: {
+        none: "0px",
+        xxs: "2px",
+        xs: "4px",
+        sm: "6px",
+        md: "8px",
+        lg: "10px",
+        xl: "12px",
+        "2xl": "16px",
+        "3xl": "20px",
+        "4xl": "24px",
+        full: "9999px",
+      },
+      fontFamily: {
+        body: ["Inter", "sans-serif"],
+        display: ["Inter", "sans-serif"],
+      },
+      fontSize: {
+        xs: ["12px", { lineHeight: "18px" }],
+        sm: ["14px", { lineHeight: "20px" }],
+        md: ["16px", { lineHeight: "24px" }],
+        lg: ["18px", { lineHeight: "28px" }],
+        xl: ["20px", { lineHeight: "30px" }],
+        "display-xs": ["24px", { lineHeight: "32px" }],
+        "display-sm": ["30px", { lineHeight: "38px" }],
+        "display-md": ["36px", { lineHeight: "44px", letterSpacing: "-2px" }],
+        "display-lg": ["48px", { lineHeight: "60px", letterSpacing: "-2px" }],
+        "display-xl": ["60px", { lineHeight: "72px", letterSpacing: "-2px" }],
+      },
+      // Figma "Backdrop blurs/backdrop-blur-md" = radius 16 (Tailwind's default
+      // backdrop-blur-md is 12px). backdrop-blur-* are Tailwind v3 core utilities
+      // (enabled by default); this just aligns the md value to the design token.
+      backdropBlur: {
+        md: "16px",
+      },
+    },
+  },
+};