@voxel51/voodo 1.4.0-dev.0 → 2.1.0

package/dist/palette-Boxwxq4V.js

@@ -0,0 +1,723 @@
+const r = {
+  9: "9px",
+  11: "11px",
+  12: "12px",
+  13: "13px",
+  14: "14px",
+  15: "15px",
+  16: "16px",
+  18: "18px",
+  23: "23px"
+}, n = {
+  12: "12px",
+  16: "16px",
+  20: "20px",
+  24: "24px",
+  28: "28px",
+  36: "36px",
+  44: "44px",
+  52: "52px"
+}, o = {
+  "heading-xl": {
+    fontSize: r[23],
+    lineHeight: n[28],
+    fontWeight: 400
+  },
+  "heading-lg": {
+    fontSize: r[18],
+    lineHeight: n[24],
+    fontWeight: 500
+  },
+  "heading-md": {
+    fontSize: r[16],
+    lineHeight: n[20],
+    fontWeight: 500
+  },
+  "heading-sm": {
+    fontSize: r[14],
+    lineHeight: n[20],
+    fontWeight: 500
+  },
+  "heading-xs": {
+    fontSize: r[12],
+    lineHeight: n[16],
+    fontWeight: 500
+  },
+  "body-primary": {
+    fontSize: r[15],
+    lineHeight: n[20],
+    fontWeight: 400
+  },
+  "body-secondary": {
+    fontSize: r[14],
+    lineHeight: n[20],
+    fontWeight: 400
+  },
+  "body-tertiary": {
+    fontSize: r[12],
+    lineHeight: n[16],
+    fontWeight: 400
+  },
+  label: {
+    fontSize: r[12],
+    lineHeight: n[16],
+    fontWeight: 600
+  },
+  caption: {
+    fontSize: r[11],
+    lineHeight: n[16],
+    fontWeight: 400
+  },
+  "code-primary": {
+    fontSize: r[12],
+    lineHeight: n[16],
+    fontWeight: 400
+  },
+  "code-secondary": {
+    fontSize: r[11],
+    lineHeight: n[16],
+    fontWeight: 400
+  }
+}, p = {
+  fontFamily: {
+    sans: ["Palanquin", "sans-serif"],
+    // Figma names a real face here. It was the generic `monospace` keyword,
+    // which resolved to whatever the OS picked — so code blocks rendered
+    // differently on every machine and never matched the design.
+    mono: ["Roboto Mono", "monospace"]
+  },
+  /**
+   * Named size roles — the public surface, and the only tier emitted as
+   * `--text-*`.
+   *
+   * Emitting the numeric scale instead would leave `--text-sm` and `--text-lg`
+   * undefined, and Tailwind would quietly fall back to its own built-in scale
+   * across 41 call sites.
+   *
+   * Values are deliberately unchanged from the previous scale, so this tier is
+   * a rename of nothing.
+   *
+   * Figma added `font-size/14` and `/16` and nothing consumes them yet. They
+   * are almost certainly the new body and heading sizes, but re-pointing `md`
+   * and `lg` at them in isolation makes type look worse, not better: the
+   * line-heights these sizes are paired with are raw Tailwind numbers
+   * (`text-md/5`), not tokens, so the size moves and the leading does not.
+   * Size and leading have to be tokenised together, against Figma's 12 text
+   * styles. Until then this tier holds still.
+   */
+  fontSize: {
+    xxs: r[9],
+    xs: r[11],
+    sm: r[12],
+    md: r[13],
+    lg: r[15],
+    xl: r[18],
+    xxl: r[23]
+  },
+  /**
+   * The role tier, emitted as `--text-<role>` plus the `--line-height` and
+   * `--font-weight` sub-properties Tailwind reads for the `text-<role>`
+   * utility. This is what components bind to; the size-only tier above stays
+   * for consumers that have not migrated.
+   */
+  textRole: o,
+  /**
+   * Figma's `font-weight/*` scale, verbatim.
+   *
+   * The previous map (light 300, normal 400, semibold 500, bold 600) matched
+   * no Figma variable — `semibold` was a step light of Figma's, and `light`
+   * had no counterpart at all. Nothing reads these: they are not emitted as
+   * custom properties and the `font-*` utilities in use come from Tailwind's
+   * own scale, so this corrects the data without moving any pixels.
+   */
+  fontWeight: {
+    regular: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700
+  }
+}, e = {
+  neutral: {
+    0: "#FFFFFF",
+    25: "#FFF9F5",
+    50: "#F9F8F7",
+    75: "#F2F1F0",
+    100: "#EEEDEC",
+    125: "#E8E7E6",
+    150: "#E0DEDC",
+    200: "#D0CECC",
+    250: "#C0BEBC",
+    300: "#B5B3B1",
+    350: "#A0A09E",
+    400: "#9C9896",
+    450: "#8F8D8B",
+    500: "#6E6C6A",
+    550: "#6B6968",
+    600: "#4A4C4E",
+    650: "#4A4847",
+    700: "#3E4244",
+    750: "#2F3234",
+    800: "#2A2B2C",
+    825: "#232526",
+    850: "#1F2021",
+    875: "#1E1F20",
+    900: "#1C1D1E",
+    925: "#18191A",
+    950: "#141618",
+    1e3: "#000000"
+  },
+  orange: {
+    300: "#FFB584",
+    400: "#FF8A3D",
+    500: "#FA5300",
+    600: "#C74200",
+    700: "#943100"
+  },
+  green: {
+    300: "#7AB87C",
+    400: "#4CA05A",
+    500: "#1E7D45",
+    600: "#166638",
+    700: "#0E4E2B"
+  },
+  red: {
+    300: "#FF9999",
+    400: "#FF6767",
+    500: "#C33636",
+    600: "#9B2727",
+    700: "#751D1D"
+  },
+  blue: {
+    300: "#86B5F6",
+    400: "#4F8BEF",
+    500: "#2563EB",
+    600: "#1D4EBA",
+    700: "#153A8A"
+  },
+  yellow: {
+    300: "#FCCB58",
+    400: "#ECAB2E",
+    500: "#D97706",
+    600: "#B26003",
+    700: "#8A4A02"
+  },
+  purple: {
+    300: "#CBA6FF",
+    400: "#AB81FB",
+    500: "#8B5CF6",
+    600: "#6F42C1",
+    700: "#532E91"
+  },
+  pink: {
+    300: "#F988B4",
+    400: "#EF5793",
+    500: "#DB2777",
+    600: "#AF1D5E",
+    700: "#851547"
+  },
+  teal: {
+    300: "#5EC6B9",
+    400: "#32ADA0",
+    500: "#0D9488",
+    600: "#0A766C",
+    700: "#075951"
+  },
+  expressive: {
+    "orange-default": "#FA5300",
+    "pink-default": "#DA3B72",
+    "purple-default": "#B84DD9",
+    "orange-hover": "#D14600",
+    "pink-hover": "#C62B60",
+    "purple-hover": "#9E37C0",
+    "orange-pressed": "#A83800",
+    "pink-pressed": "#A9214F",
+    "purple-pressed": "#82299F"
+  },
+  lime: {
+    300: "#86C816",
+    400: "#6FA512",
+    500: "#57820E",
+    600: "#45670B",
+    700: "#334D08"
+  },
+  magenta: {
+    300: "#E9A0F0",
+    400: "#DB64E6",
+    500: "#C623D5",
+    600: "#9C1CA8",
+    700: "#75157E"
+  }
+}, t = {
+  common: {
+    brand: {
+      primary: e.orange[500],
+      accent: e.orange[400]
+    },
+    semantic: {
+      success: e.green[500],
+      destructive: e.red[500],
+      info: e.blue[500],
+      warning: e.yellow[500]
+    }
+  },
+  dark: {
+    content: {
+      bg: {
+        accent: e.orange[400],
+        background: e.neutral[925],
+        card: e.neutral[875],
+        "card-elevated": e.neutral[750],
+        "card-nested": e.neutral[825],
+        failure: e.red[500],
+        info: e.blue[500],
+        muted: e.neutral[850],
+        popover: e.neutral[950],
+        primary: e.orange[500],
+        secondary: e.neutral[900],
+        selected: `color-mix(in srgb, ${e.orange[500]} 30%, transparent)`,
+        success: e.green[500],
+        warning: e.yellow[500]
+      },
+      border: {
+        active: e.orange[500],
+        default: e.neutral[750],
+        disabled: e.neutral[875],
+        error: e.red[400],
+        focus: e.neutral[500],
+        hover: e.neutral[600],
+        input: e.neutral[750],
+        "input-focus": e.neutral[500],
+        "input-hover": e.neutral[600],
+        strong: e.neutral[700],
+        subtle: e.neutral[875],
+        success: e.green[300],
+        warning: e.yellow[300]
+      },
+      code: {
+        bg: e.neutral[950],
+        border: e.neutral[750],
+        text: e.orange[400]
+      },
+      focus: {
+        ring: `color-mix(in srgb, ${e.orange[500]} 50%, transparent)`
+      },
+      icon: {
+        brand: e.orange[500],
+        dark: e.neutral[925],
+        decorative: e.orange[400],
+        default: e.neutral[450],
+        disabled: e.neutral[550],
+        emphasis: e.neutral[0],
+        failure: e.red[400],
+        info: e.blue[300],
+        muted: e.neutral[550],
+        subtle: e.neutral[500],
+        success: e.green[300],
+        warning: e.yellow[300]
+      },
+      interactive: {
+        "danger-default": e.red[500],
+        "danger-hover": e.red[600],
+        "danger-pressed": e.red[700],
+        "expressive-default": {
+          end: e.expressive["purple-default"],
+          mid: e.expressive["pink-default"],
+          start: e.expressive["orange-default"]
+        },
+        "expressive-hover": {
+          end: e.expressive["purple-hover"],
+          mid: e.expressive["pink-hover"],
+          start: e.expressive["orange-hover"]
+        },
+        "expressive-pressed": {
+          end: e.expressive["purple-pressed"],
+          mid: e.expressive["pink-pressed"],
+          start: e.expressive["orange-pressed"]
+        },
+        "primary-default": e.orange[500],
+        "primary-hover": e.orange[600],
+        "primary-pressed": e.orange[700],
+        "secondary-default": e.neutral[825],
+        "secondary-hover": e.neutral[800],
+        "secondary-pressed": e.neutral[875],
+        "success-default": e.green[500],
+        "success-hover": e.green[600],
+        "success-pressed": e.green[700]
+      },
+      link: {
+        default: e.blue[300],
+        hover: e.blue[400],
+        visited: e.purple[400]
+      },
+      scrim: {
+        default: `color-mix(in srgb, ${e.neutral[1e3]} 60%, transparent)`,
+        heavy: `color-mix(in srgb, ${e.neutral[1e3]} 80%, transparent)`,
+        light: `color-mix(in srgb, ${e.neutral[1e3]} 40%, transparent)`
+      },
+      scrollbar: {
+        thumb: e.neutral[700],
+        "thumb-hover": e.neutral[600],
+        track: e.neutral[925]
+      },
+      selection: {
+        bg: `color-mix(in srgb, ${e.orange[500]} 30%, transparent)`,
+        text: e.neutral[0]
+      },
+      skeleton: {
+        base: e.neutral[825],
+        shimmer: e.neutral[750]
+      },
+      status: {
+        approved: {
+          bg: e.green[500],
+          text: e.green[300]
+        },
+        draft: {
+          bg: e.neutral[550],
+          text: e.neutral[450]
+        },
+        failed: {
+          bg: e.red[500],
+          text: e.red[400]
+        },
+        progress: {
+          bg: e.purple[500],
+          text: e.purple[300]
+        },
+        review: {
+          bg: e.orange[500],
+          text: e.orange[400]
+        }
+      },
+      text: {
+        accent: e.orange[400],
+        decorative: e.orange[400],
+        failure: e.red[400],
+        foreground: e.neutral[25],
+        info: e.blue[300],
+        inverse: e.neutral[900],
+        muted: e.neutral[400],
+        placeholder: e.neutral[550],
+        primary: e.neutral[0],
+        secondary: e.neutral[450],
+        success: e.green[300],
+        tertiary: e.neutral[500],
+        warning: e.yellow[300]
+      },
+      tooltip: {
+        bg: e.neutral[800],
+        text: e.neutral[25]
+      },
+      "viz-chart": {
+        blue: e.blue[400],
+        green: e.green[400],
+        lime: e.lime[400],
+        magenta: e.magenta[400],
+        neutral: e.neutral[400],
+        pink: e.pink[400],
+        purple: e.purple[400],
+        red: e.red[400],
+        teal: e.teal[400],
+        yellow: e.yellow[400]
+      },
+      "viz-overlay": {
+        blue: e.blue[400],
+        green: e.green[400],
+        lime: e.lime[400],
+        magenta: e.magenta[400],
+        neutral: e.neutral[400],
+        pink: e.pink[400],
+        purple: e.purple[400],
+        red: e.red[400],
+        teal: e.teal[400],
+        yellow: e.yellow[400]
+      }
+    }
+  },
+  light: {
+    content: {
+      bg: {
+        accent: e.orange[400],
+        background: e.neutral[50],
+        card: e.neutral[0],
+        "card-elevated": e.neutral[0],
+        "card-nested": e.neutral[75],
+        failure: e.red[500],
+        info: e.blue[500],
+        muted: e.neutral[100],
+        popover: e.neutral[0],
+        primary: e.orange[500],
+        secondary: e.neutral[125],
+        selected: `color-mix(in srgb, ${e.orange[500]} 30%, transparent)`,
+        success: e.green[500],
+        warning: e.yellow[500]
+      },
+      border: {
+        active: e.orange[500],
+        default: e.neutral[150],
+        disabled: e.neutral[100],
+        error: e.red[500],
+        focus: e.neutral[350],
+        hover: e.neutral[250],
+        input: e.neutral[200],
+        "input-focus": e.neutral[350],
+        "input-hover": e.neutral[250],
+        strong: e.neutral[200],
+        subtle: e.neutral[100],
+        success: e.green[500],
+        warning: e.yellow[500]
+      },
+      code: {
+        bg: e.neutral[75],
+        border: e.neutral[150],
+        text: e.orange[700]
+      },
+      focus: {
+        ring: `color-mix(in srgb, ${e.orange[500]} 50%, transparent)`
+      },
+      icon: {
+        brand: e.orange[500],
+        dark: e.neutral[925],
+        decorative: e.orange[500],
+        default: e.neutral[550],
+        disabled: e.neutral[300],
+        emphasis: e.neutral[925],
+        failure: e.red[500],
+        info: e.blue[500],
+        muted: e.neutral[300],
+        subtle: e.neutral[450],
+        success: e.green[500],
+        warning: e.yellow[500]
+      },
+      interactive: {
+        "danger-default": e.red[500],
+        "danger-hover": e.red[600],
+        "danger-pressed": e.red[700],
+        "expressive-default": {
+          end: e.expressive["purple-default"],
+          mid: e.expressive["pink-default"],
+          start: e.expressive["orange-default"]
+        },
+        "expressive-hover": {
+          end: e.expressive["purple-hover"],
+          mid: e.expressive["pink-hover"],
+          start: e.expressive["orange-hover"]
+        },
+        "expressive-pressed": {
+          end: e.expressive["purple-pressed"],
+          mid: e.expressive["pink-pressed"],
+          start: e.expressive["orange-pressed"]
+        },
+        "primary-default": e.orange[500],
+        "primary-hover": e.orange[600],
+        "primary-pressed": e.orange[700],
+        "secondary-default": e.neutral[100],
+        "secondary-hover": e.neutral[150],
+        "secondary-pressed": e.neutral[200],
+        "success-default": e.green[500],
+        "success-hover": e.green[600],
+        "success-pressed": e.green[700]
+      },
+      link: {
+        default: e.blue[500],
+        hover: e.blue[600],
+        visited: e.purple[600]
+      },
+      scrim: {
+        default: `color-mix(in srgb, ${e.neutral[1e3]} 50%, transparent)`,
+        heavy: `color-mix(in srgb, ${e.neutral[1e3]} 70%, transparent)`,
+        light: `color-mix(in srgb, ${e.neutral[1e3]} 30%, transparent)`
+      },
+      scrollbar: {
+        thumb: e.neutral[200],
+        "thumb-hover": e.neutral[250],
+        track: e.neutral[75]
+      },
+      selection: {
+        bg: `color-mix(in srgb, ${e.orange[500]} 20%, transparent)`,
+        text: e.neutral[1e3]
+      },
+      skeleton: {
+        base: e.neutral[100],
+        shimmer: e.neutral[150]
+      },
+      status: {
+        approved: {
+          bg: e.green[500],
+          text: e.green[600]
+        },
+        draft: {
+          bg: e.neutral[550],
+          text: e.neutral[600]
+        },
+        failed: {
+          bg: e.red[500],
+          text: e.red[600]
+        },
+        progress: {
+          bg: e.purple[500],
+          text: e.purple[600]
+        },
+        review: {
+          bg: e.orange[500],
+          text: e.orange[600]
+        }
+      },
+      text: {
+        accent: e.orange[500],
+        decorative: e.orange[500],
+        failure: e.red[600],
+        foreground: e.neutral[1e3],
+        info: e.blue[600],
+        inverse: e.neutral[0],
+        muted: e.neutral[450],
+        placeholder: e.neutral[300],
+        primary: e.neutral[925],
+        secondary: e.neutral[650],
+        success: e.green[600],
+        tertiary: e.neutral[550],
+        warning: e.yellow[700]
+      },
+      tooltip: {
+        bg: e.neutral[925],
+        text: e.neutral[25]
+      },
+      "viz-chart": {
+        blue: e.blue[500],
+        green: e.green[500],
+        lime: e.lime[500],
+        magenta: e.magenta[500],
+        neutral: e.neutral[500],
+        pink: e.pink[500],
+        purple: e.purple[500],
+        red: e.red[500],
+        teal: e.teal[500],
+        yellow: e.yellow[500]
+      },
+      "viz-overlay": {
+        blue: e.blue[400],
+        green: e.green[400],
+        lime: e.lime[400],
+        magenta: e.magenta[400],
+        neutral: e.neutral[400],
+        pink: e.pink[400],
+        purple: e.purple[400],
+        red: e.red[400],
+        teal: e.teal[400],
+        yellow: e.yellow[400]
+      }
+    }
+  }
+}, d = {
+  2: "2px",
+  4: "4px",
+  6: "6px",
+  8: "8px",
+  10: "10px",
+  12: "12px",
+  16: "16px",
+  20: "20px",
+  24: "24px",
+  32: "32px",
+  40: "40px",
+  48: "48px",
+  64: "64px"
+}, g = {
+  xs: "0.25rem",
+  sm: "0.5rem",
+  md: "1rem",
+  lg: "1.5rem",
+  xl: "2rem"
+}, c = {
+  /**
+   * Duration tokens — semantic names for how long an animation takes.
+   *
+   * instant   (0ms)   Use for state that should feel truly immediate.
+   * fast      (100ms) Micro-interactions: hover highlights, icon swaps.
+   * normal    (200ms) Default: color, border, and opacity changes.
+   * moderate  (300ms) Slightly heavier state changes: panel reveals, tooltips.
+   * slow      (500ms) Deliberate motion: drawers, slide-in panels.
+   * deliberate(700ms) Page-level or dramatic transitions.
+   */
+  duration: {
+    instant: "0ms",
+    fast: "100ms",
+    normal: "200ms",
+    moderate: "300ms",
+    slow: "500ms",
+    deliberate: "700ms"
+  },
+  /**
+   * Easing (timing-function) tokens.
+   *
+   * linear   Constant speed.  Mechanical feel; suits progress bars/loaders.
+   * in       Starts slow, accelerates.  Best for exits / elements leaving the screen.
+   * out      Starts fast, decelerates.  Best for entrances / elements arriving.
+   * in-out   Slow start and end.  Best for general UI state changes.
+   * spring   Slight overshoot then settles.  Adds energy to interactive elements.
+   * sharp    Quick in, gradual out.  Crisp, snappy feel for menus/overlays.
+   */
+  easing: {
+    linear: "linear",
+    in: "cubic-bezier(0.4, 0, 1, 1)",
+    out: "cubic-bezier(0, 0, 0.2, 1)",
+    "in-out": "cubic-bezier(0.4, 0, 0.2, 1)",
+    spring: "cubic-bezier(0.34, 1.56, 0.64, 1)",
+    sharp: "cubic-bezier(0.4, 0, 0.6, 1)"
+  },
+  /**
+   * Pre-composed transition shorthands for common UI patterns.
+   * These bake in the right duration + easing for each context so
+   * component authors pick semantics, not numbers.
+   *
+   * colors   Background, text, border, fill, and stroke color changes.
+   * opacity  Fade in/out.
+   * transform Scale, translate, and rotate.
+   * shadow   Box-shadow elevation changes.
+   * menu     Dropdown / context menu appear and disappear.
+   * panel    Drawers and slide-in sheets.
+   * overlay  Modal backdrop fade.
+   * all      General-purpose catch-all.
+   */
+  preset: {
+    colors: "color 200ms cubic-bezier(0.4, 0, 0.2, 1), background-color 200ms cubic-bezier(0.4, 0, 0.2, 1), border-color 200ms cubic-bezier(0.4, 0, 0.2, 1), fill 200ms cubic-bezier(0.4, 0, 0.2, 1), stroke 200ms cubic-bezier(0.4, 0, 0.2, 1)",
+    opacity: "opacity 200ms cubic-bezier(0.4, 0, 0.2, 1)",
+    transform: "transform 200ms cubic-bezier(0, 0, 0.2, 1)",
+    shadow: "box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1)",
+    menu: "opacity 100ms cubic-bezier(0, 0, 0.2, 1), transform 100ms cubic-bezier(0, 0, 0.2, 1)",
+    panel: "transform 300ms cubic-bezier(0, 0, 0.2, 1)",
+    overlay: "opacity 200ms cubic-bezier(0.4, 0, 0.2, 1)",
+    all: "all 200ms cubic-bezier(0.4, 0, 0.2, 1)"
+  }
+}, l = [
+  "blue",
+  "green",
+  "purple",
+  "pink",
+  "yellow",
+  "teal",
+  "red",
+  "lime",
+  "magenta",
+  "neutral"
+], a = (s) => l.map((i) => s[i]), b = l, m = a(
+  t.dark.content["viz-overlay"]
+), u = {
+  dark: a(t.dark.content["viz-chart"]),
+  light: a(t.light.content["viz-chart"])
+}, x = u;
+export {
+  t as a,
+  b,
+  u as c,
+  e as d,
+  c as e,
+  r as f,
+  d as g,
+  n as l,
+  m as o,
+  x as p,
+  g as s,
+  p as t
+};
+//# sourceMappingURL=palette-Boxwxq4V.js.map