@keyfunc/keybricks-ds 1.0.0

package/tokens/tokens.js

@@ -0,0 +1,1018 @@
+/* Generated from tokens/*.css by scripts/build-tokens.mjs — do not edit by hand.
+   cssVar keeps theming live (preferred in components); light/dark are flattened
+   literals for canvas, PDF, native and export pipelines. */
+
+export const cssVar = {
+  actionDark: "var(--action-dark)",
+  actionDarkActive: "var(--action-dark-active)",
+  actionDarkFg: "var(--action-dark-fg)",
+  actionDarkHover: "var(--action-dark-hover)",
+  actionPrimary: "var(--action-primary)",
+  actionPrimaryActive: "var(--action-primary-active)",
+  actionPrimaryHover: "var(--action-primary-hover)",
+  amber100: "var(--amber-100)",
+  amber200: "var(--amber-200)",
+  amber300: "var(--amber-300)",
+  amber400: "var(--amber-400)",
+  amber50: "var(--amber-50)",
+  amber500: "var(--amber-500)",
+  amber600: "var(--amber-600)",
+  amber700: "var(--amber-700)",
+  amber800: "var(--amber-800)",
+  amber900: "var(--amber-900)",
+  amber950: "var(--amber-950)",
+  bgActive: "var(--bg-active)",
+  bgApp: "var(--bg-app)",
+  bgHover: "var(--bg-hover)",
+  bgInset: "var(--bg-inset)",
+  bgPress: "var(--bg-press)",
+  bgRaised: "var(--bg-raised)",
+  bgScrim: "var(--bg-scrim)",
+  bgSurface: "var(--bg-surface)",
+  blue100: "var(--blue-100)",
+  blue200: "var(--blue-200)",
+  blue300: "var(--blue-300)",
+  blue400: "var(--blue-400)",
+  blue50: "var(--blue-50)",
+  blue500: "var(--blue-500)",
+  blue600: "var(--blue-600)",
+  blue700: "var(--blue-700)",
+  blue800: "var(--blue-800)",
+  blue900: "var(--blue-900)",
+  blue950: "var(--blue-950)",
+  borderCard: "var(--border-card)",
+  borderControl: "var(--border-control)",
+  borderStrong: "var(--border-strong)",
+  borderSubtle: "var(--border-subtle)",
+  brandAlpha12: "var(--brand-alpha-12)",
+  brandAlpha16: "var(--brand-alpha-16)",
+  brandAlpha24: "var(--brand-alpha-24)",
+  brandAlpha32: "var(--brand-alpha-32)",
+  brandAlpha8: "var(--brand-alpha-8)",
+  cardPad: "var(--card-pad)",
+  cardPadSm: "var(--card-pad-sm)",
+  catJoin: "var(--cat-join)",
+  catJoinBg: "var(--cat-join-bg)",
+  catMerge: "var(--cat-merge)",
+  catMergeBg: "var(--cat-merge-bg)",
+  catOutput: "var(--cat-output)",
+  catOutputBg: "var(--cat-output-bg)",
+  catSource: "var(--cat-source)",
+  catSourceBg: "var(--cat-source-bg)",
+  catTransform: "var(--cat-transform)",
+  catTransformBg: "var(--cat-transform-bg)",
+  chartAreaAlpha: "var(--chart-area-alpha)",
+  chartAxis: "var(--chart-axis)",
+  chartBlue: "var(--chart-blue)",
+  chartGrid: "var(--chart-grid)",
+  chartGuide: "var(--chart-guide)",
+  chartHeat1: "var(--chart-heat-1)",
+  chartHeat2: "var(--chart-heat-2)",
+  chartHeat3: "var(--chart-heat-3)",
+  chartHeat4: "var(--chart-heat-4)",
+  chartHeat5: "var(--chart-heat-5)",
+  chartHeatInk: "var(--chart-heat-ink)",
+  chartLabel: "var(--chart-label)",
+  chartNeg: "var(--chart-neg)",
+  chartPos: "var(--chart-pos)",
+  chartTotal: "var(--chart-total)",
+  chartTrack: "var(--chart-track)",
+  checkboxBorder: "var(--checkbox-border)",
+  cyan100: "var(--cyan-100)",
+  cyan200: "var(--cyan-200)",
+  cyan300: "var(--cyan-300)",
+  cyan400: "var(--cyan-400)",
+  cyan50: "var(--cyan-50)",
+  cyan500: "var(--cyan-500)",
+  cyan600: "var(--cyan-600)",
+  cyan700: "var(--cyan-700)",
+  cyan800: "var(--cyan-800)",
+  cyan900: "var(--cyan-900)",
+  cyan950: "var(--cyan-950)",
+  danger: "var(--danger)",
+  dangerActive: "var(--danger-active)",
+  dangerBg: "var(--danger-bg)",
+  dangerSoftActive: "var(--danger-soft-active)",
+  dangerText: "var(--danger-text)",
+  dotNeutral: "var(--dot-neutral)",
+  drawerH: "var(--drawer-h)",
+  dropzoneBorder: "var(--dropzone-border)",
+  dropzoneBorderHover: "var(--dropzone-border-hover)",
+  dur: "var(--dur)",
+  durFast: "var(--dur-fast)",
+  durInstant: "var(--dur-instant)",
+  durSlow: "var(--dur-slow)",
+  durSlower: "var(--dur-slower)",
+  easeIn: "var(--ease-in)",
+  easeInOut: "var(--ease-in-out)",
+  easeOut: "var(--ease-out)",
+  edge: "var(--edge)",
+  emerald100: "var(--emerald-100)",
+  emerald200: "var(--emerald-200)",
+  emerald300: "var(--emerald-300)",
+  emerald400: "var(--emerald-400)",
+  emerald50: "var(--emerald-50)",
+  emerald500: "var(--emerald-500)",
+  emerald600: "var(--emerald-600)",
+  emerald700: "var(--emerald-700)",
+  emerald800: "var(--emerald-800)",
+  emerald900: "var(--emerald-900)",
+  emerald950: "var(--emerald-950)",
+  focusBorder: "var(--focus-border)",
+  focusRing: "var(--focus-ring)",
+  fontMono: "var(--font-mono)",
+  fontSans: "var(--font-sans)",
+  hButton: "var(--h-button)",
+  hButtonSm: "var(--h-button-sm)",
+  hInput: "var(--h-input)",
+  hNavItem: "var(--h-nav-item)",
+  hSubnavItem: "var(--h-subnav-item)",
+  hTreeItem: "var(--h-tree-item)",
+  hueAmberBg: "var(--hue-amber-bg)",
+  hueAmberFg: "var(--hue-amber-fg)",
+  hueBlueBg: "var(--hue-blue-bg)",
+  hueBlueFg: "var(--hue-blue-fg)",
+  hueCyanBg: "var(--hue-cyan-bg)",
+  hueCyanFg: "var(--hue-cyan-fg)",
+  hueGrayBg: "var(--hue-gray-bg)",
+  hueGrayFg: "var(--hue-gray-fg)",
+  hueGreenBg: "var(--hue-green-bg)",
+  hueGreenFg: "var(--hue-green-fg)",
+  hueOrangeBg: "var(--hue-orange-bg)",
+  hueOrangeFg: "var(--hue-orange-fg)",
+  huePinkBg: "var(--hue-pink-bg)",
+  huePinkFg: "var(--hue-pink-fg)",
+  huePurpleBg: "var(--hue-purple-bg)",
+  huePurpleFg: "var(--hue-purple-fg)",
+  hueRedBg: "var(--hue-red-bg)",
+  hueRedFg: "var(--hue-red-fg)",
+  hueTealBg: "var(--hue-teal-bg)",
+  hueTealFg: "var(--hue-teal-fg)",
+  infoBg: "var(--info-bg)",
+  infoFg: "var(--info-fg)",
+  leading2xl: "var(--leading-2xl)",
+  leading2xs: "var(--leading-2xs)",
+  leading3xl: "var(--leading-3xl)",
+  leading4xl: "var(--leading-4xl)",
+  leadingBase: "var(--leading-base)",
+  leadingDisplay: "var(--leading-display)",
+  leadingLg: "var(--leading-lg)",
+  leadingMd: "var(--leading-md)",
+  leadingNum: "var(--leading-num)",
+  leadingSm: "var(--leading-sm)",
+  leadingXl: "var(--leading-xl)",
+  leadingXs: "var(--leading-xs)",
+  link: "var(--link)",
+  linkHover: "var(--link-hover)",
+  neutral0: "var(--neutral-0)",
+  neutral100: "var(--neutral-100)",
+  neutral200: "var(--neutral-200)",
+  neutral300: "var(--neutral-300)",
+  neutral400: "var(--neutral-400)",
+  neutral50: "var(--neutral-50)",
+  neutral500: "var(--neutral-500)",
+  neutral600: "var(--neutral-600)",
+  neutral700: "var(--neutral-700)",
+  neutral800: "var(--neutral-800)",
+  neutral900: "var(--neutral-900)",
+  neutral950: "var(--neutral-950)",
+  neutralAlpha12: "var(--neutral-alpha-12)",
+  neutralAlpha16: "var(--neutral-alpha-16)",
+  neutralAlpha2: "var(--neutral-alpha-2)",
+  neutralAlpha24: "var(--neutral-alpha-24)",
+  neutralAlpha32: "var(--neutral-alpha-32)",
+  neutralAlpha4: "var(--neutral-alpha-4)",
+  neutralAlpha48: "var(--neutral-alpha-48)",
+  neutralAlpha64: "var(--neutral-alpha-64)",
+  neutralAlpha8: "var(--neutral-alpha-8)",
+  neutralAlpha80: "var(--neutral-alpha-80)",
+  onAccent: "var(--on-accent)",
+  orange100: "var(--orange-100)",
+  orange200: "var(--orange-200)",
+  orange300: "var(--orange-300)",
+  orange400: "var(--orange-400)",
+  orange50: "var(--orange-50)",
+  orange500: "var(--orange-500)",
+  orange600: "var(--orange-600)",
+  orange700: "var(--orange-700)",
+  orange800: "var(--orange-800)",
+  orange900: "var(--orange-900)",
+  orange950: "var(--orange-950)",
+  overlayDrag: "var(--overlay-drag)",
+  overlayHover: "var(--overlay-hover)",
+  overlayPress: "var(--overlay-press)",
+  overlaySelected: "var(--overlay-selected)",
+  pagePadX: "var(--page-pad-x)",
+  pagePadY: "var(--page-pad-y)",
+  panelW: "var(--panel-w)",
+  pink100: "var(--pink-100)",
+  pink200: "var(--pink-200)",
+  pink300: "var(--pink-300)",
+  pink400: "var(--pink-400)",
+  pink50: "var(--pink-50)",
+  pink500: "var(--pink-500)",
+  pink600: "var(--pink-600)",
+  pink700: "var(--pink-700)",
+  pink800: "var(--pink-800)",
+  pink900: "var(--pink-900)",
+  pink950: "var(--pink-950)",
+  portBorder: "var(--port-border)",
+  pressFilter: "var(--press-filter)",
+  pressFilterStrong: "var(--press-filter-strong)",
+  purple100: "var(--purple-100)",
+  purple200: "var(--purple-200)",
+  purple300: "var(--purple-300)",
+  purple400: "var(--purple-400)",
+  purple50: "var(--purple-50)",
+  purple500: "var(--purple-500)",
+  purple600: "var(--purple-600)",
+  purple700: "var(--purple-700)",
+  purple800: "var(--purple-800)",
+  purple900: "var(--purple-900)",
+  purple950: "var(--purple-950)",
+  radiusFull: "var(--radius-full)",
+  radiusLg: "var(--radius-lg)",
+  radiusMd: "var(--radius-md)",
+  radiusNode: "var(--radius-node)",
+  radiusSm: "var(--radius-sm)",
+  radiusTile: "var(--radius-tile)",
+  railW: "var(--rail-w)",
+  red100: "var(--red-100)",
+  red200: "var(--red-200)",
+  red300: "var(--red-300)",
+  red400: "var(--red-400)",
+  red50: "var(--red-50)",
+  red500: "var(--red-500)",
+  red600: "var(--red-600)",
+  red700: "var(--red-700)",
+  red800: "var(--red-800)",
+  red900: "var(--red-900)",
+  red950: "var(--red-950)",
+  ringFocus: "var(--ring-focus)",
+  ringSurface: "var(--ring-surface)",
+  sectionGap: "var(--section-gap)",
+  selectedBorder: "var(--selected-border)",
+  series1: "var(--series-1)",
+  series10: "var(--series-10)",
+  series2: "var(--series-2)",
+  series3: "var(--series-3)",
+  series4: "var(--series-4)",
+  series5: "var(--series-5)",
+  series6: "var(--series-6)",
+  series7: "var(--series-7)",
+  series8: "var(--series-8)",
+  series9: "var(--series-9)",
+  shadowMenu: "var(--shadow-menu)",
+  shadowModal: "var(--shadow-modal)",
+  shadowNode: "var(--shadow-node)",
+  shadowSelected: "var(--shadow-selected)",
+  sidebarW: "var(--sidebar-w)",
+  skeleton: "var(--skeleton)",
+  softActive: "var(--soft-active)",
+  softBg: "var(--soft-bg)",
+  softBorder: "var(--soft-border)",
+  softHover: "var(--soft-hover)",
+  success: "var(--success)",
+  successBg: "var(--success-bg)",
+  successStrong: "var(--success-strong)",
+  successText: "var(--success-text)",
+  tHover: "var(--t-hover)",
+  tTheme: "var(--t-theme)",
+  teal100: "var(--teal-100)",
+  teal200: "var(--teal-200)",
+  teal300: "var(--teal-300)",
+  teal400: "var(--teal-400)",
+  teal50: "var(--teal-50)",
+  teal500: "var(--teal-500)",
+  teal600: "var(--teal-600)",
+  teal700: "var(--teal-700)",
+  teal800: "var(--teal-800)",
+  teal900: "var(--teal-900)",
+  teal950: "var(--teal-950)",
+  text2xl: "var(--text-2xl)",
+  text2xs: "var(--text-2xs)",
+  text3xl: "var(--text-3xl)",
+  text4xl: "var(--text-4xl)",
+  textBase: "var(--text-base)",
+  textBody: "var(--text-body)",
+  textDisplay: "var(--text-display)",
+  textHeading: "var(--text-heading)",
+  textInverse: "var(--text-inverse)",
+  textLg: "var(--text-lg)",
+  textMd: "var(--text-md)",
+  textMuted: "var(--text-muted)",
+  textNum: "var(--text-num)",
+  textPrimary: "var(--text-primary)",
+  textSecondary: "var(--text-secondary)",
+  textSm: "var(--text-sm)",
+  textStrong: "var(--text-strong)",
+  textXl: "var(--text-xl)",
+  textXs: "var(--text-xs)",
+  tooltipBg: "var(--tooltip-bg)",
+  tooltipFg: "var(--tooltip-fg)",
+  topbarH: "var(--topbar-h)",
+  track: "var(--track)",
+  tracking2xl: "var(--tracking-2xl)",
+  tracking2xs: "var(--tracking-2xs)",
+  tracking3xl: "var(--tracking-3xl)",
+  tracking4xl: "var(--tracking-4xl)",
+  trackingBase: "var(--tracking-base)",
+  trackingDisplay: "var(--tracking-display)",
+  trackingLg: "var(--tracking-lg)",
+  trackingMd: "var(--tracking-md)",
+  trackingNum: "var(--tracking-num)",
+  trackingSm: "var(--tracking-sm)",
+  trackingXl: "var(--tracking-xl)",
+  trackingXs: "var(--tracking-xs)",
+  warning: "var(--warning)",
+  warningBg: "var(--warning-bg)",
+  warningText: "var(--warning-text)",
+  weightLight: "var(--weight-light)",
+  weightMedium: "var(--weight-medium)",
+  weightRegular: "var(--weight-regular)",
+  weightSemibold: "var(--weight-semibold)",
+  zDrawer: "var(--z-drawer)",
+  zMenu: "var(--z-menu)",
+  zModal: "var(--z-modal)",
+  zSticky: "var(--z-sticky)",
+  zToast: "var(--z-toast)",
+  zTooltip: "var(--z-tooltip)",
+};
+
+export const light = {
+  actionDark: "#171717",
+  actionDarkActive: "#0a0a0a",
+  actionDarkFg: "#ffffff",
+  actionDarkHover: "#262626",
+  actionPrimary: "#155dfc",
+  actionPrimaryActive: "#1039c4",
+  actionPrimaryHover: "#1447e6",
+  amber100: "#ffefd3",
+  amber200: "#ffe5b7",
+  amber300: "#ffd280",
+  amber400: "#ffb900",
+  amber50: "#fff6e7",
+  amber500: "#d69a00",
+  amber600: "#ae7d00",
+  amber700: "#886100",
+  amber800: "#674800",
+  amber900: "#4c3400",
+  amber950: "#362400",
+  bgActive: "#f5f5f5",
+  bgApp: "#fafafa",
+  bgHover: "#f5f5f5",
+  bgInset: "#fafafa",
+  bgPress: "#e5e5e5",
+  bgRaised: "#ffffff",
+  bgScrim: "rgba(10,10,10,.32)",
+  bgSurface: "#ffffff",
+  blue100: "#dbeafe",
+  blue200: "#bedbff",
+  blue300: "#8ec5ff",
+  blue400: "#51a2ff",
+  blue50: "#eff6ff",
+  blue500: "#2b7fff",
+  blue600: "#155dfc",
+  blue700: "#1447e6",
+  blue800: "#193cb8",
+  blue900: "#1c398e",
+  blue950: "#162456",
+  borderCard: "rgba(229,229,229,.6)",
+  borderControl: "#e5e5e5",
+  borderStrong: "#d4d4d4",
+  borderSubtle: "#f5f5f5",
+  brandAlpha12: "rgba(21,93,252,.12)",
+  brandAlpha16: "rgba(21,93,252,.16)",
+  brandAlpha24: "rgba(21,93,252,.24)",
+  brandAlpha32: "rgba(21,93,252,.32)",
+  brandAlpha8: "rgba(21,93,252,.08)",
+  cardPad: "21px",
+  cardPadSm: "17px",
+  catJoin: "#155dfc",
+  catJoinBg: "#dbeafe",
+  catMerge: "#9810fa",
+  catMergeBg: "#f3e8ff",
+  catOutput: "#009689",
+  catOutputBg: "#cbfbf1",
+  catSource: "#009966",
+  catSourceBg: "#d0fae5",
+  catTransform: "#ff6900",
+  catTransformBg: "#ffedd4",
+  chartAreaAlpha: ".14",
+  chartAxis: "#d4d4d4",
+  chartBlue: "#3b82f6",
+  chartGrid: "#f5f5f5",
+  chartGuide: "#a1a1a1",
+  chartHeat1: "#eff6ff",
+  chartHeat2: "#dbeafe",
+  chartHeat3: "#8ec5ff",
+  chartHeat4: "#2b7fff",
+  chartHeat5: "#1447e6",
+  chartHeatInk: "#fff",
+  chartLabel: "#737373",
+  chartNeg: "#dd0022",
+  chartPos: "#009966",
+  chartTotal: "#404040",
+  chartTrack: "#f5f5f5",
+  checkboxBorder: "#d1d5db",
+  cyan100: "#d1f4fc",
+  cyan200: "#a4eaf9",
+  cyan300: "#57daf3",
+  cyan400: "#4abed5",
+  cyan50: "#eafafe",
+  cyan500: "#3fa3b7",
+  cyan600: "#338999",
+  cyan700: "#286f7d",
+  cyan800: "#1e5762",
+  cyan900: "#144049",
+  cyan950: "#0b2d33",
+  danger: "#fb2c36",
+  dangerActive: "#950013",
+  dangerBg: "#fef2f2",
+  dangerSoftActive: "#ffcdc7",
+  dangerText: "#c10007",
+  dotNeutral: "#a1a1a1",
+  drawerH: "250px",
+  dropzoneBorder: "#d4d4d4",
+  dropzoneBorderHover: "#a1a1a1",
+  dur: "160ms",
+  durFast: "120ms",
+  durInstant: "80ms",
+  durSlow: "240ms",
+  durSlower: "360ms",
+  easeIn: "cubic-bezier(.4,0,1,1)",
+  easeInOut: "cubic-bezier(.4,0,.2,1)",
+  easeOut: "cubic-bezier(.2,.8,.3,1)",
+  edge: "#cbd5e1",
+  emerald100: "#d8f5e5",
+  emerald200: "#b5ecce",
+  emerald300: "#8adeb3",
+  emerald400: "#5bcc97",
+  emerald50: "#eefaf3",
+  emerald500: "#00bc7d",
+  emerald600: "#009966",
+  emerald700: "#007d52",
+  emerald800: "#00603e",
+  emerald900: "#00462c",
+  emerald950: "#00311d",
+  focusBorder: "#2b7fff",
+  focusRing: "#dbeafe",
+  fontMono: "Menlo,ui-monospace,'SF Mono',Consolas,monospace",
+  fontSans: "'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif",
+  hButton: "32px",
+  hButtonSm: "30px",
+  hInput: "36px",
+  hNavItem: "35.5px",
+  hSubnavItem: "31.5px",
+  hTreeItem: "30px",
+  hueAmberBg: "#ffefd3",
+  hueAmberFg: "#674800",
+  hueBlueBg: "#dbeafe",
+  hueBlueFg: "#1447e6",
+  hueCyanBg: "#d1f4fc",
+  hueCyanFg: "#286f7d",
+  hueGrayBg: "#f5f5f5",
+  hueGrayFg: "#525252",
+  hueGreenBg: "#d8f5e5",
+  hueGreenFg: "#007d52",
+  hueOrangeBg: "#ffe7dd",
+  hueOrangeFg: "#ac4400",
+  huePinkBg: "#ffe4f3",
+  huePinkFg: "#aa1e7f",
+  huePurpleBg: "#f1e8ff",
+  huePurpleFg: "#7e00d2",
+  hueRedBg: "#ffe6e3",
+  hueRedFg: "#b8001a",
+  hueTealBg: "#dbf3ef",
+  hueTealFg: "#007a6f",
+  infoBg: "#eff6ff",
+  infoFg: "#155dfc",
+  leading2xl: "31px",
+  leading2xs: "12.5px",
+  leading3xl: "37px",
+  leading4xl: "43px",
+  leadingBase: "19.5px",
+  leadingDisplay: "54px",
+  leadingLg: "22.5px",
+  leadingMd: "21px",
+  leadingNum: "32px",
+  leadingSm: "18px",
+  leadingXl: "30px",
+  leadingXs: "16.5px",
+  link: "#155dfc",
+  linkHover: "#1447e6",
+  neutral0: "#ffffff",
+  neutral100: "#f5f5f5",
+  neutral200: "#e5e5e5",
+  neutral300: "#d4d4d4",
+  neutral400: "#a1a1a1",
+  neutral50: "#fafafa",
+  neutral500: "#737373",
+  neutral600: "#525252",
+  neutral700: "#404040",
+  neutral800: "#262626",
+  neutral900: "#171717",
+  neutral950: "#0a0a0a",
+  neutralAlpha12: "rgba(10,10,10,.12)",
+  neutralAlpha16: "rgba(10,10,10,.16)",
+  neutralAlpha2: "rgba(10,10,10,.02)",
+  neutralAlpha24: "rgba(10,10,10,.24)",
+  neutralAlpha32: "rgba(10,10,10,.32)",
+  neutralAlpha4: "rgba(10,10,10,.04)",
+  neutralAlpha48: "rgba(10,10,10,.48)",
+  neutralAlpha64: "rgba(10,10,10,.64)",
+  neutralAlpha8: "rgba(10,10,10,.08)",
+  neutralAlpha80: "rgba(10,10,10,.8)",
+  onAccent: "#ffffff",
+  orange100: "#ffe7dd",
+  orange200: "#ffd3c0",
+  orange300: "#ffb798",
+  orange400: "#ff9362",
+  orange50: "#fff4ef",
+  orange500: "#ff6900",
+  orange600: "#d55600",
+  orange700: "#ac4400",
+  orange800: "#853300",
+  orange900: "#612300",
+  orange950: "#461700",
+  overlayDrag: "rgba(21,93,252,.12)",
+  overlayHover: "rgba(10,10,10,.04)",
+  overlayPress: "rgba(10,10,10,.08)",
+  overlaySelected: "rgba(21,93,252,.08)",
+  pagePadX: "32px",
+  pagePadY: "24px",
+  panelW: "400px",
+  pink100: "#ffe4f3",
+  pink200: "#ffcae8",
+  pink300: "#ffa4da",
+  pink400: "#f779c8",
+  pink50: "#fff3f9",
+  pink500: "#e355b2",
+  pink600: "#cb329a",
+  pink700: "#aa1e7f",
+  pink800: "#871364",
+  pink900: "#640e4a",
+  pink950: "#460c33",
+  portBorder: "#d4d4d4",
+  pressFilter: "brightness(.94)",
+  pressFilterStrong: "brightness(.88)",
+  purple100: "#f1e8ff",
+  purple200: "#e4d3ff",
+  purple300: "#d2b3ff",
+  purple400: "#bd8bff",
+  purple50: "#f8f5ff",
+  purple500: "#ad46ff",
+  purple600: "#9810fa",
+  purple700: "#7e00d2",
+  purple800: "#6500a9",
+  purple900: "#4c0182",
+  purple950: "#35085b",
+  radiusFull: "9999px",
+  radiusLg: "10px",
+  radiusMd: "8px",
+  radiusNode: "16px",
+  radiusSm: "4px",
+  radiusTile: "14px",
+  railW: "64px",
+  red100: "#ffe6e3",
+  red200: "#ffcdc7",
+  red300: "#ffa79f",
+  red400: "#ff756d",
+  red50: "#fff4f2",
+  red500: "#fb2c36",
+  red600: "#dd0022",
+  red700: "#b8001a",
+  red800: "#950013",
+  red900: "#71000c",
+  red950: "#520006",
+  ringFocus: "0 0 0 2px #ffffff,0 0 0 4px #2b7fff",
+  ringSurface: "0 0 0 2px #ffffff",
+  sectionGap: "24px",
+  selectedBorder: "#51a2ff",
+  series1: "#3b82f6",
+  series10: "#a1a1a1",
+  series2: "#009689",
+  series3: "#9810fa",
+  series4: "#ff6900",
+  series5: "#009966",
+  series6: "#cb329a",
+  series7: "#338999",
+  series8: "#ffb900",
+  series9: "#fb2c36",
+  shadowMenu: "0 4px 12px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.08)",
+  shadowModal: "0 24px 64px rgba(0,0,0,.18),0 2px 8px rgba(0,0,0,.08)",
+  shadowNode: "0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1)",
+  shadowSelected: "0 0 0 2px #dbeafe,0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1)",
+  sidebarW: "240px",
+  skeleton: "#e5e5e5",
+  softActive: "#bedbff",
+  softBg: "#eff6ff",
+  softBorder: "#2b7fff",
+  softHover: "#dbeafe",
+  success: "#00bc7d",
+  successBg: "#ecfdf5",
+  successStrong: "#009966",
+  successText: "#007a55",
+  tHover: "background 120ms cubic-bezier(.2,.8,.3,1),border-color 120ms cubic-bezier(.2,.8,.3,1),color 120ms cubic-bezier(.2,.8,.3,1)",
+  tTheme: "background-color 160ms cubic-bezier(.2,.8,.3,1),color 160ms cubic-bezier(.2,.8,.3,1),border-color 160ms cubic-bezier(.2,.8,.3,1)",
+  teal100: "#dbf3ef",
+  teal200: "#b9e8e0",
+  teal300: "#90d7cc",
+  teal400: "#67c2b6",
+  teal50: "#eff9f8",
+  teal500: "#3dac9f",
+  teal600: "#009689",
+  teal700: "#007a6f",
+  teal800: "#005e56",
+  teal900: "#00443e",
+  teal950: "#002f2a",
+  text2xl: "24px",
+  text2xs: "10px",
+  text3xl: "30px",
+  text4xl: "36px",
+  textBase: "13px",
+  textBody: "#525252",
+  textDisplay: "48px",
+  textHeading: "#171717",
+  textInverse: "#ffffff",
+  textLg: "15px",
+  textMd: "14px",
+  textMuted: "#a1a1a1",
+  textNum: "24px",
+  textPrimary: "#0a0a0a",
+  textSecondary: "#737373",
+  textSm: "12px",
+  textStrong: "#404040",
+  textXl: "20px",
+  textXs: "11px",
+  tooltipBg: "#171717",
+  tooltipFg: "#ffffff",
+  topbarH: "56px",
+  track: "#e5e5e5",
+  tracking2xl: "-.54px",
+  tracking2xs: ".117px",
+  tracking3xl: "-.67px",
+  tracking4xl: "-.81px",
+  trackingBase: "-.076px",
+  trackingDisplay: "-1.08px",
+  trackingLg: "-.234px",
+  trackingMd: "-.15px",
+  trackingNum: ".07px",
+  trackingSm: "0",
+  trackingXl: "-.449px",
+  trackingXs: ".064px",
+  warning: "#ffb900",
+  warningBg: "#fff7ed",
+  warningText: "#ca3500",
+  weightLight: "300",
+  weightMedium: "500",
+  weightRegular: "400",
+  weightSemibold: "600",
+  zDrawer: "20",
+  zMenu: "40",
+  zModal: "60",
+  zSticky: "10",
+  zToast: "80",
+  zTooltip: "100",
+};
+
+export const dark = {
+  actionDark: "#fafafa",
+  actionDarkActive: "#d4d4d4",
+  actionDarkFg: "#0a0a0a",
+  actionDarkHover: "#e5e5e5",
+  actionPrimary: "#1f6feb",
+  actionPrimaryActive: "#1a5ec9",
+  actionPrimaryHover: "#2b7fff",
+  amber100: "#ffefd3",
+  amber200: "#ffe5b7",
+  amber300: "#ffd280",
+  amber400: "#ffb900",
+  amber50: "#fff6e7",
+  amber500: "#d69a00",
+  amber600: "#ae7d00",
+  amber700: "#886100",
+  amber800: "#674800",
+  amber900: "#4c3400",
+  amber950: "#362400",
+  bgActive: "#2e2e2e",
+  bgApp: "#0a0a0a",
+  bgHover: "#262626",
+  bgInset: "#1f1f1f",
+  bgPress: "#3a3a3a",
+  bgRaised: "#1d1d1d",
+  bgScrim: "rgba(0,0,0,.6)",
+  bgSurface: "#161616",
+  blue100: "#dbeafe",
+  blue200: "#bedbff",
+  blue300: "#8ec5ff",
+  blue400: "#51a2ff",
+  blue50: "#eff6ff",
+  blue500: "#2b7fff",
+  blue600: "#155dfc",
+  blue700: "#1447e6",
+  blue800: "#193cb8",
+  blue900: "#1c398e",
+  blue950: "#162456",
+  borderCard: "rgba(255,255,255,.09)",
+  borderControl: "#333333",
+  borderStrong: "#454545",
+  borderSubtle: "#242424",
+  brandAlpha12: "rgba(43,127,255,.14)",
+  brandAlpha16: "rgba(43,127,255,.2)",
+  brandAlpha24: "rgba(43,127,255,.28)",
+  brandAlpha32: "rgba(43,127,255,.36)",
+  brandAlpha8: "rgba(43,127,255,.1)",
+  cardPad: "21px",
+  cardPadSm: "17px",
+  catJoin: "#5b9bff",
+  catJoinBg: "rgba(43,127,255,.16)",
+  catMerge: "#c07cff",
+  catMergeBg: "rgba(152,16,250,.18)",
+  catOutput: "#22bfb2",
+  catOutputBg: "rgba(0,150,137,.18)",
+  catSource: "#22c58f",
+  catSourceBg: "rgba(0,188,125,.16)",
+  catTransform: "#ff8b3d",
+  catTransformBg: "rgba(255,105,0,.16)",
+  chartAreaAlpha: ".22",
+  chartAxis: "#3f3f3f",
+  chartBlue: "#4d93ff",
+  chartGrid: "#1f1f1f",
+  chartGuide: "#525252",
+  chartHeat1: "#162456",
+  chartHeat2: "#193cb8",
+  chartHeat3: "#1447e6",
+  chartHeat4: "#51a2ff",
+  chartHeat5: "#bedbff",
+  chartHeatInk: "#0a0a0a",
+  chartLabel: "#8f8f8f",
+  chartNeg: "#ff756d",
+  chartPos: "#5bcc97",
+  chartTotal: "#d4d4d4",
+  chartTrack: "#1f1f1f",
+  checkboxBorder: "#4a4a4a",
+  cyan100: "#d1f4fc",
+  cyan200: "#a4eaf9",
+  cyan300: "#57daf3",
+  cyan400: "#4abed5",
+  cyan50: "#eafafe",
+  cyan500: "#3fa3b7",
+  cyan600: "#338999",
+  cyan700: "#286f7d",
+  cyan800: "#1e5762",
+  cyan900: "#144049",
+  cyan950: "#0b2d33",
+  danger: "#fb2c36",
+  dangerActive: "#c10007",
+  dangerBg: "rgba(251,44,54,.14)",
+  dangerSoftActive: "rgba(251,44,54,.26)",
+  dangerText: "#ff8085",
+  dotNeutral: "#737373",
+  drawerH: "250px",
+  dropzoneBorder: "#3a3a3a",
+  dropzoneBorderHover: "#525252",
+  dur: "160ms",
+  durFast: "120ms",
+  durInstant: "80ms",
+  durSlow: "240ms",
+  durSlower: "360ms",
+  easeIn: "cubic-bezier(.4,0,1,1)",
+  easeInOut: "cubic-bezier(.4,0,.2,1)",
+  easeOut: "cubic-bezier(.2,.8,.3,1)",
+  edge: "#4b5563",
+  emerald100: "#d8f5e5",
+  emerald200: "#b5ecce",
+  emerald300: "#8adeb3",
+  emerald400: "#5bcc97",
+  emerald50: "#eefaf3",
+  emerald500: "#00bc7d",
+  emerald600: "#009966",
+  emerald700: "#007d52",
+  emerald800: "#00603e",
+  emerald900: "#00462c",
+  emerald950: "#00311d",
+  focusBorder: "#2b7fff",
+  focusRing: "rgba(43,127,255,.32)",
+  fontMono: "Menlo,ui-monospace,'SF Mono',Consolas,monospace",
+  fontSans: "'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif",
+  hButton: "32px",
+  hButtonSm: "30px",
+  hInput: "36px",
+  hNavItem: "35.5px",
+  hSubnavItem: "31.5px",
+  hTreeItem: "30px",
+  hueAmberBg: "#362400",
+  hueAmberFg: "#ffd280",
+  hueBlueBg: "#162456",
+  hueBlueFg: "#8ec5ff",
+  hueCyanBg: "#0b2d33",
+  hueCyanFg: "#57daf3",
+  hueGrayBg: "#262626",
+  hueGrayFg: "#a1a1a1",
+  hueGreenBg: "#00311d",
+  hueGreenFg: "#8adeb3",
+  hueOrangeBg: "#461700",
+  hueOrangeFg: "#ffb798",
+  huePinkBg: "#460c33",
+  huePinkFg: "#ffa4da",
+  huePurpleBg: "#35085b",
+  huePurpleFg: "#d2b3ff",
+  hueRedBg: "#520006",
+  hueRedFg: "#ffa79f",
+  hueTealBg: "#002f2a",
+  hueTealFg: "#90d7cc",
+  infoBg: "rgba(43,127,255,.14)",
+  infoFg: "#8ab8ff",
+  leading2xl: "31px",
+  leading2xs: "12.5px",
+  leading3xl: "37px",
+  leading4xl: "43px",
+  leadingBase: "19.5px",
+  leadingDisplay: "54px",
+  leadingLg: "22.5px",
+  leadingMd: "21px",
+  leadingNum: "32px",
+  leadingSm: "18px",
+  leadingXl: "30px",
+  leadingXs: "16.5px",
+  link: "#7cb0ff",
+  linkHover: "#a8caff",
+  neutral0: "#ffffff",
+  neutral100: "#f5f5f5",
+  neutral200: "#e5e5e5",
+  neutral300: "#d4d4d4",
+  neutral400: "#a1a1a1",
+  neutral50: "#fafafa",
+  neutral500: "#737373",
+  neutral600: "#525252",
+  neutral700: "#404040",
+  neutral800: "#262626",
+  neutral900: "#171717",
+  neutral950: "#0a0a0a",
+  neutralAlpha12: "rgba(255,255,255,.12)",
+  neutralAlpha16: "rgba(255,255,255,.16)",
+  neutralAlpha2: "rgba(255,255,255,.02)",
+  neutralAlpha24: "rgba(255,255,255,.24)",
+  neutralAlpha32: "rgba(255,255,255,.32)",
+  neutralAlpha4: "rgba(255,255,255,.04)",
+  neutralAlpha48: "rgba(255,255,255,.48)",
+  neutralAlpha64: "rgba(255,255,255,.64)",
+  neutralAlpha8: "rgba(255,255,255,.08)",
+  neutralAlpha80: "rgba(255,255,255,.8)",
+  onAccent: "#ffffff",
+  orange100: "#ffe7dd",
+  orange200: "#ffd3c0",
+  orange300: "#ffb798",
+  orange400: "#ff9362",
+  orange50: "#fff4ef",
+  orange500: "#ff6900",
+  orange600: "#d55600",
+  orange700: "#ac4400",
+  orange800: "#853300",
+  orange900: "#612300",
+  orange950: "#461700",
+  overlayDrag: "rgba(43,127,255,.14)",
+  overlayHover: "rgba(255,255,255,.04)",
+  overlayPress: "rgba(255,255,255,.08)",
+  overlaySelected: "rgba(43,127,255,.1)",
+  pagePadX: "32px",
+  pagePadY: "24px",
+  panelW: "400px",
+  pink100: "#ffe4f3",
+  pink200: "#ffcae8",
+  pink300: "#ffa4da",
+  pink400: "#f779c8",
+  pink50: "#fff3f9",
+  pink500: "#e355b2",
+  pink600: "#cb329a",
+  pink700: "#aa1e7f",
+  pink800: "#871364",
+  pink900: "#640e4a",
+  pink950: "#460c33",
+  portBorder: "#3f3f3f",
+  pressFilter: "brightness(1.35)",
+  pressFilterStrong: "brightness(1.6)",
+  purple100: "#f1e8ff",
+  purple200: "#e4d3ff",
+  purple300: "#d2b3ff",
+  purple400: "#bd8bff",
+  purple50: "#f8f5ff",
+  purple500: "#c07cff",
+  purple600: "#9810fa",
+  purple700: "#7e00d2",
+  purple800: "#6500a9",
+  purple900: "#4c0182",
+  purple950: "#35085b",
+  radiusFull: "9999px",
+  radiusLg: "10px",
+  radiusMd: "8px",
+  radiusNode: "16px",
+  radiusSm: "4px",
+  radiusTile: "14px",
+  railW: "64px",
+  red100: "#ffe6e3",
+  red200: "#ffcdc7",
+  red300: "#ffa79f",
+  red400: "#ff756d",
+  red50: "#fff4f2",
+  red500: "#fb2c36",
+  red600: "#dd0022",
+  red700: "#b8001a",
+  red800: "#950013",
+  red900: "#71000c",
+  red950: "#520006",
+  ringFocus: "0 0 0 2px #161616,0 0 0 4px #2b7fff",
+  ringSurface: "0 0 0 2px #161616",
+  sectionGap: "24px",
+  selectedBorder: "#51a2ff",
+  series1: "#51a2ff",
+  series10: "#737373",
+  series2: "#90d7cc",
+  series3: "#d2b3ff",
+  series4: "#ffb798",
+  series5: "#8adeb3",
+  series6: "#ffa4da",
+  series7: "#57daf3",
+  series8: "#ffd280",
+  series9: "#ffa79f",
+  shadowMenu: "0 4px 16px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.4)",
+  shadowModal: "0 24px 64px rgba(0,0,0,.7),0 2px 8px rgba(0,0,0,.5)",
+  shadowNode: "0 1px 3px 0 rgba(0,0,0,.6),0 1px 2px -1px rgba(0,0,0,.5)",
+  shadowSelected: "0 0 0 2px rgba(43,127,255,.32),0 1px 3px 0 rgba(0,0,0,.6)",
+  sidebarW: "240px",
+  skeleton: "#242424",
+  softActive: "rgba(43,127,255,.32)",
+  softBg: "rgba(43,127,255,.14)",
+  softBorder: "#2b7fff",
+  softHover: "rgba(43,127,255,.24)",
+  success: "#00bc7d",
+  successBg: "rgba(0,188,125,.14)",
+  successStrong: "#22c58f",
+  successText: "#4ade9f",
+  tHover: "background 120ms cubic-bezier(.2,.8,.3,1),border-color 120ms cubic-bezier(.2,.8,.3,1),color 120ms cubic-bezier(.2,.8,.3,1)",
+  tTheme: "background-color 160ms cubic-bezier(.2,.8,.3,1),color 160ms cubic-bezier(.2,.8,.3,1),border-color 160ms cubic-bezier(.2,.8,.3,1)",
+  teal100: "#dbf3ef",
+  teal200: "#b9e8e0",
+  teal300: "#90d7cc",
+  teal400: "#67c2b6",
+  teal50: "#eff9f8",
+  teal500: "#3dac9f",
+  teal600: "#009689",
+  teal700: "#007a6f",
+  teal800: "#005e56",
+  teal900: "#00443e",
+  teal950: "#002f2a",
+  text2xl: "24px",
+  text2xs: "10px",
+  text3xl: "30px",
+  text4xl: "36px",
+  textBase: "13px",
+  textBody: "#d4d4d4",
+  textDisplay: "48px",
+  textHeading: "#f5f5f5",
+  textInverse: "#0a0a0a",
+  textLg: "15px",
+  textMd: "14px",
+  textMuted: "#737373",
+  textNum: "24px",
+  textPrimary: "#fafafa",
+  textSecondary: "#a1a1a1",
+  textSm: "12px",
+  textStrong: "#e5e5e5",
+  textXl: "20px",
+  textXs: "11px",
+  tooltipBg: "#f5f5f5",
+  tooltipFg: "#0a0a0a",
+  topbarH: "56px",
+  track: "#303030",
+  tracking2xl: "-.54px",
+  tracking2xs: ".117px",
+  tracking3xl: "-.67px",
+  tracking4xl: "-.81px",
+  trackingBase: "-.076px",
+  trackingDisplay: "-1.08px",
+  trackingLg: "-.234px",
+  trackingMd: "-.15px",
+  trackingNum: ".07px",
+  trackingSm: "0",
+  trackingXl: "-.449px",
+  trackingXs: ".064px",
+  warning: "#ffb900",
+  warningBg: "rgba(255,185,0,.14)",
+  warningText: "#ffc55c",
+  weightLight: "300",
+  weightMedium: "500",
+  weightRegular: "400",
+  weightSemibold: "600",
+  zDrawer: "20",
+  zMenu: "40",
+  zModal: "60",
+  zSticky: "10",
+  zToast: "80",
+  zTooltip: "100",
+};
+
+export const tokenNames = ["--action-dark","--action-dark-active","--action-dark-fg","--action-dark-hover","--action-primary","--action-primary-active","--action-primary-hover","--amber-100","--amber-200","--amber-300","--amber-400","--amber-50","--amber-500","--amber-600","--amber-700","--amber-800","--amber-900","--amber-950","--bg-active","--bg-app","--bg-hover","--bg-inset","--bg-press","--bg-raised","--bg-scrim","--bg-surface","--blue-100","--blue-200","--blue-300","--blue-400","--blue-50","--blue-500","--blue-600","--blue-700","--blue-800","--blue-900","--blue-950","--border-card","--border-control","--border-strong","--border-subtle","--brand-alpha-12","--brand-alpha-16","--brand-alpha-24","--brand-alpha-32","--brand-alpha-8","--card-pad","--card-pad-sm","--cat-join","--cat-join-bg","--cat-merge","--cat-merge-bg","--cat-output","--cat-output-bg","--cat-source","--cat-source-bg","--cat-transform","--cat-transform-bg","--chart-area-alpha","--chart-axis","--chart-blue","--chart-grid","--chart-guide","--chart-heat-1","--chart-heat-2","--chart-heat-3","--chart-heat-4","--chart-heat-5","--chart-heat-ink","--chart-label","--chart-neg","--chart-pos","--chart-total","--chart-track","--checkbox-border","--cyan-100","--cyan-200","--cyan-300","--cyan-400","--cyan-50","--cyan-500","--cyan-600","--cyan-700","--cyan-800","--cyan-900","--cyan-950","--danger","--danger-active","--danger-bg","--danger-soft-active","--danger-text","--dot-neutral","--drawer-h","--dropzone-border","--dropzone-border-hover","--dur","--dur-fast","--dur-instant","--dur-slow","--dur-slower","--ease-in","--ease-in-out","--ease-out","--edge","--emerald-100","--emerald-200","--emerald-300","--emerald-400","--emerald-50","--emerald-500","--emerald-600","--emerald-700","--emerald-800","--emerald-900","--emerald-950","--focus-border","--focus-ring","--font-mono","--font-sans","--h-button","--h-button-sm","--h-input","--h-nav-item","--h-subnav-item","--h-tree-item","--hue-amber-bg","--hue-amber-fg","--hue-blue-bg","--hue-blue-fg","--hue-cyan-bg","--hue-cyan-fg","--hue-gray-bg","--hue-gray-fg","--hue-green-bg","--hue-green-fg","--hue-orange-bg","--hue-orange-fg","--hue-pink-bg","--hue-pink-fg","--hue-purple-bg","--hue-purple-fg","--hue-red-bg","--hue-red-fg","--hue-teal-bg","--hue-teal-fg","--info-bg","--info-fg","--leading-2xl","--leading-2xs","--leading-3xl","--leading-4xl","--leading-base","--leading-display","--leading-lg","--leading-md","--leading-num","--leading-sm","--leading-xl","--leading-xs","--link","--link-hover","--neutral-0","--neutral-100","--neutral-200","--neutral-300","--neutral-400","--neutral-50","--neutral-500","--neutral-600","--neutral-700","--neutral-800","--neutral-900","--neutral-950","--neutral-alpha-12","--neutral-alpha-16","--neutral-alpha-2","--neutral-alpha-24","--neutral-alpha-32","--neutral-alpha-4","--neutral-alpha-48","--neutral-alpha-64","--neutral-alpha-8","--neutral-alpha-80","--on-accent","--orange-100","--orange-200","--orange-300","--orange-400","--orange-50","--orange-500","--orange-600","--orange-700","--orange-800","--orange-900","--orange-950","--overlay-drag","--overlay-hover","--overlay-press","--overlay-selected","--page-pad-x","--page-pad-y","--panel-w","--pink-100","--pink-200","--pink-300","--pink-400","--pink-50","--pink-500","--pink-600","--pink-700","--pink-800","--pink-900","--pink-950","--port-border","--press-filter","--press-filter-strong","--purple-100","--purple-200","--purple-300","--purple-400","--purple-50","--purple-500","--purple-600","--purple-700","--purple-800","--purple-900","--purple-950","--radius-full","--radius-lg","--radius-md","--radius-node","--radius-sm","--radius-tile","--rail-w","--red-100","--red-200","--red-300","--red-400","--red-50","--red-500","--red-600","--red-700","--red-800","--red-900","--red-950","--ring-focus","--ring-surface","--section-gap","--selected-border","--series-1","--series-10","--series-2","--series-3","--series-4","--series-5","--series-6","--series-7","--series-8","--series-9","--shadow-menu","--shadow-modal","--shadow-node","--shadow-selected","--sidebar-w","--skeleton","--soft-active","--soft-bg","--soft-border","--soft-hover","--success","--success-bg","--success-strong","--success-text","--t-hover","--t-theme","--teal-100","--teal-200","--teal-300","--teal-400","--teal-50","--teal-500","--teal-600","--teal-700","--teal-800","--teal-900","--teal-950","--text-2xl","--text-2xs","--text-3xl","--text-4xl","--text-base","--text-body","--text-display","--text-heading","--text-inverse","--text-lg","--text-md","--text-muted","--text-num","--text-primary","--text-secondary","--text-sm","--text-strong","--text-xl","--text-xs","--tooltip-bg","--tooltip-fg","--topbar-h","--track","--tracking-2xl","--tracking-2xs","--tracking-3xl","--tracking-4xl","--tracking-base","--tracking-display","--tracking-lg","--tracking-md","--tracking-num","--tracking-sm","--tracking-xl","--tracking-xs","--warning","--warning-bg","--warning-text","--weight-light","--weight-medium","--weight-regular","--weight-semibold","--z-drawer","--z-menu","--z-modal","--z-sticky","--z-toast","--z-tooltip"];
+
+export default { cssVar, light, dark, tokenNames };