@keyfunc/keybricks-ds 1.0.4 → 2.3.1

package/tokens/tokens.js

@@ -21,6 +21,8 @@ export const cssVar = {
   amber800: "var(--amber-800)",
   amber900: "var(--amber-900)",
   amber950: "var(--amber-950)",
+  barCardH: "var(--bar-card-h)",
+  barH: "var(--bar-h)",
   bgActive: "var(--bg-active)",
   bgApp: "var(--bg-app)",
   bgHover: "var(--bg-hover)",
@@ -29,6 +31,7 @@ export const cssVar = {
   bgRaised: "var(--bg-raised)",
   bgScrim: "var(--bg-scrim)",
   bgSurface: "var(--bg-surface)",
+  bgTableHeader: "var(--bg-table-header)",
   blue100: "var(--blue-100)",
   blue200: "var(--blue-200)",
   blue300: "var(--blue-300)",
@@ -42,6 +45,7 @@ export const cssVar = {
   blue950: "var(--blue-950)",
   borderCard: "var(--border-card)",
   borderControl: "var(--border-control)",
+  borderSplit: "var(--border-split)",
   borderStrong: "var(--border-strong)",
   borderSubtle: "var(--border-subtle)",
   brandAlpha12: "var(--brand-alpha-12)",
@@ -61,6 +65,7 @@ export const cssVar = {
   catSourceBg: "var(--cat-source-bg)",
   catTransform: "var(--cat-transform)",
   catTransformBg: "var(--cat-transform-bg)",
+  cellPx: "var(--cell-px)",
   chartAreaAlpha: "var(--chart-area-alpha)",
   chartAxis: "var(--chart-axis)",
   chartBlue: "var(--chart-blue)",
@@ -77,7 +82,15 @@ export const cssVar = {
   chartPos: "var(--chart-pos)",
   chartTotal: "var(--chart-total)",
   chartTrack: "var(--chart-track)",
+  checkSize: "var(--check-size)",
   checkboxBorder: "var(--checkbox-border)",
+  controlGap: "var(--control-gap)",
+  controlH: "var(--control-h)",
+  controlIcon: "var(--control-icon)",
+  controlLeading: "var(--control-leading)",
+  controlPx: "var(--control-px)",
+  controlText: "var(--control-text)",
+  controlTracking: "var(--control-tracking)",
   cyan100: "var(--cyan-100)",
   cyan200: "var(--cyan-200)",
   cyan300: "var(--cyan-300)",
@@ -93,6 +106,7 @@ export const cssVar = {
   dangerActive: "var(--danger-active)",
   dangerBg: "var(--danger-bg)",
   dangerSoftActive: "var(--danger-soft-active)",
+  dangerSoftHover: "var(--danger-soft-hover)",
   dangerText: "var(--danger-text)",
   dotNeutral: "var(--dot-neutral)",
   drawerH: "var(--drawer-h)",
@@ -107,6 +121,7 @@ export const cssVar = {
   easeInOut: "var(--ease-in-out)",
   easeOut: "var(--ease-out)",
   edge: "var(--edge)",
+  edgePad: "var(--edge-pad)",
   emerald100: "var(--emerald-100)",
   emerald200: "var(--emerald-200)",
   emerald300: "var(--emerald-300)",
@@ -122,6 +137,7 @@ export const cssVar = {
   focusRing: "var(--focus-ring)",
   fontMono: "var(--font-mono)",
   fontSans: "var(--font-sans)",
+  groupGap: "var(--group-gap)",
   hButton: "var(--h-button)",
   hButtonSm: "var(--h-button-sm)",
   hInput: "var(--h-input)",
@@ -155,6 +171,7 @@ export const cssVar = {
   leading3xl: "var(--leading-3xl)",
   leading4xl: "var(--leading-4xl)",
   leadingBase: "var(--leading-base)",
+  leadingCode: "var(--leading-code)",
   leadingDisplay: "var(--leading-display)",
   leadingLg: "var(--leading-lg)",
   leadingMd: "var(--leading-md)",
@@ -276,8 +293,11 @@ export const cssVar = {
   successBg: "var(--success-bg)",
   successStrong: "var(--success-strong)",
   successText: "var(--success-text)",
+  switchH: "var(--switch-h)",
+  switchW: "var(--switch-w)",
   tHover: "var(--t-hover)",
   tTheme: "var(--t-theme)",
+  tagH: "var(--tag-h)",
   teal100: "var(--teal-100)",
   teal200: "var(--teal-200)",
   teal300: "var(--teal-300)",
@@ -291,11 +311,14 @@ export const cssVar = {
   teal950: "var(--teal-950)",
   text2xl: "var(--text-2xl)",
   text2xs: "var(--text-2xs)",
+  text2xsMono: "var(--text-2xs-mono)",
   text3xl: "var(--text-3xl)",
   text4xl: "var(--text-4xl)",
   textBase: "var(--text-base)",
   textBody: "var(--text-body)",
+  textCode: "var(--text-code)",
   textDisplay: "var(--text-display)",
+  textGlyphMin: "var(--text-glyph-min)",
   textHeading: "var(--text-heading)",
   textInverse: "var(--text-inverse)",
   textLg: "var(--text-lg)",
@@ -308,6 +331,12 @@ export const cssVar = {
   textStrong: "var(--text-strong)",
   textXl: "var(--text-xl)",
   textXs: "var(--text-xs)",
+  titleCellGap: "var(--title-cell-gap)",
+  titleCellIcon: "var(--title-cell-icon)",
+  titleCellPy: "var(--title-cell-py)",
+  titleCellTile: "var(--title-cell-tile)",
+  titleCellTileGap: "var(--title-cell-tile-gap)",
+  titleCellTileR: "var(--title-cell-tile-r)",
   tooltipBg: "var(--tooltip-bg)",
   tooltipFg: "var(--tooltip-fg)",
   topbarH: "var(--topbar-h)",
@@ -358,6 +387,8 @@ export const light = {
   amber800: "#674800",
   amber900: "#4c3400",
   amber950: "#362400",
+  barCardH: "48px",
+  barH: "40px",
   bgActive: "#f5f5f5",
   bgApp: "#fafafa",
   bgHover: "#f5f5f5",
@@ -366,6 +397,7 @@ export const light = {
   bgRaised: "#ffffff",
   bgScrim: "rgba(10,10,10,.32)",
   bgSurface: "#ffffff",
+  bgTableHeader: "#f5f5f5",
   blue100: "#dbeafe",
   blue200: "#bedbff",
   blue300: "#8ec5ff",
@@ -379,6 +411,7 @@ export const light = {
   blue950: "#162456",
   borderCard: "rgba(229,229,229,.6)",
   borderControl: "#e5e5e5",
+  borderSplit: "#d4d4d4",
   borderStrong: "#d4d4d4",
   borderSubtle: "#f5f5f5",
   brandAlpha12: "rgba(21,93,252,.12)",
@@ -398,6 +431,7 @@ export const light = {
   catSourceBg: "#d0fae5",
   catTransform: "#ff6900",
   catTransformBg: "#ffedd4",
+  cellPx: "12px",
   chartAreaAlpha: ".14",
   chartAxis: "#d4d4d4",
   chartBlue: "#3b82f6",
@@ -414,7 +448,15 @@ export const light = {
   chartPos: "#009966",
   chartTotal: "#404040",
   chartTrack: "#f5f5f5",
+  checkSize: "16px",
   checkboxBorder: "#d1d5db",
+  controlGap: "8px",
+  controlH: "32px",
+  controlIcon: "16px",
+  controlLeading: "20px",
+  controlPx: "12px",
+  controlText: "14px",
+  controlTracking: "-.15px",
   cyan100: "#d1f4fc",
   cyan200: "#a4eaf9",
   cyan300: "#57daf3",
@@ -430,6 +472,7 @@ export const light = {
   dangerActive: "#950013",
   dangerBg: "#fef2f2",
   dangerSoftActive: "#ffcdc7",
+  dangerSoftHover: "#ffe6e3",
   dangerText: "#c10007",
   dotNeutral: "#a1a1a1",
   drawerH: "250px",
@@ -444,6 +487,7 @@ export const light = {
   easeInOut: "cubic-bezier(.4,0,.2,1)",
   easeOut: "cubic-bezier(.2,.8,.3,1)",
   edge: "#cbd5e1",
+  edgePad: "16px",
   emerald100: "#d8f5e5",
   emerald200: "#b5ecce",
   emerald300: "#8adeb3",
@@ -459,12 +503,13 @@ export const light = {
   focusRing: "#dbeafe",
   fontMono: "Menlo,ui-monospace,'SF Mono',Consolas,monospace",
   fontSans: "'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif",
+  groupGap: "16px",
   hButton: "32px",
-  hButtonSm: "30px",
-  hInput: "36px",
-  hNavItem: "35.5px",
-  hSubnavItem: "31.5px",
-  hTreeItem: "30px",
+  hButtonSm: "28px",
+  hInput: "32px",
+  hNavItem: "36px",
+  hSubnavItem: "32px",
+  hTreeItem: "32px",
   hueAmberBg: "#ffefd3",
   hueAmberFg: "#674800",
   hueBlueBg: "#dbeafe",
@@ -487,18 +532,19 @@ export const light = {
   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",
+  leading2xl: "38px",
+  leading2xs: "16px",
+  leading3xl: "46px",
+  leading4xl: "56px",
+  leadingBase: "20px",
+  leadingCode: "18px",
+  leadingDisplay: "68px",
+  leadingLg: "28px",
+  leadingMd: "24px",
   leadingNum: "32px",
-  leadingSm: "18px",
-  leadingXl: "30px",
-  leadingXs: "16.5px",
+  leadingSm: "16px",
+  leadingXl: "32px",
+  leadingXs: "16px",
   link: "#155dfc",
   linkHover: "#1447e6",
   neutral0: "#ffffff",
@@ -537,7 +583,7 @@ export const light = {
   orange950: "#461700",
   overlayDrag: "rgba(21,93,252,.12)",
   overlayHover: "rgba(10,10,10,.04)",
-  overlayPress: "rgba(10,10,10,.08)",
+  overlayPress: "rgba(10,10,10,.12)",
   overlaySelected: "rgba(21,93,252,.08)",
   pagePadX: "32px",
   pagePadY: "24px",
@@ -591,14 +637,14 @@ export const light = {
   selectedBorder: "#51a2ff",
   series1: "#3b82f6",
   series10: "#a1a1a1",
-  series2: "#009689",
-  series3: "#9810fa",
-  series4: "#ff6900",
-  series5: "#009966",
-  series6: "#cb329a",
-  series7: "#338999",
-  series8: "#ffb900",
-  series9: "#fb2c36",
+  series2: "#e16c10",
+  series3: "#079a94",
+  series4: "#8254c4",
+  series5: "#b98705",
+  series6: "#bc378d",
+  series7: "#7a8d30",
+  series8: "#2f99c0",
+  series9: "#737373",
   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)",
@@ -613,8 +659,11 @@ export const light = {
   successBg: "#ecfdf5",
   successStrong: "#009966",
   successText: "#007a55",
+  switchH: "20px",
+  switchW: "36px",
   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)",
+  tagH: "24px",
   teal100: "#dbf3ef",
   teal200: "#b9e8e0",
   teal300: "#90d7cc",
@@ -626,41 +675,50 @@ export const light = {
   teal800: "#005e56",
   teal900: "#00443e",
   teal950: "#002f2a",
-  text2xl: "24px",
-  text2xs: "10px",
-  text3xl: "30px",
-  text4xl: "36px",
-  textBase: "13px",
+  text2xl: "30px",
+  text2xs: "11px",
+  text2xsMono: "11px",
+  text3xl: "38px",
+  text4xl: "48px",
+  textBase: "14px",
   textBody: "#525252",
-  textDisplay: "48px",
+  textCode: "12px",
+  textDisplay: "60px",
+  textGlyphMin: "11px",
   textHeading: "#171717",
   textInverse: "#ffffff",
-  textLg: "15px",
-  textMd: "14px",
+  textLg: "20px",
+  textMd: "16px",
   textMuted: "#a1a1a1",
   textNum: "24px",
   textPrimary: "#0a0a0a",
   textSecondary: "#737373",
   textSm: "12px",
   textStrong: "#404040",
-  textXl: "20px",
-  textXs: "11px",
+  textXl: "24px",
+  textXs: "12px",
+  titleCellGap: "2px",
+  titleCellIcon: "16px",
+  titleCellPy: "10px",
+  titleCellTile: "32px",
+  titleCellTileGap: "12px",
+  titleCellTileR: "8px",
   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",
+  tracking2xl: "-.67px",
+  tracking2xs: ".064px",
+  tracking3xl: "-.855px",
+  tracking4xl: "-1.08px",
+  trackingBase: "-.15px",
+  trackingDisplay: "-1.35px",
+  trackingLg: "-.449px",
+  trackingMd: "-.28px",
   trackingNum: ".07px",
   trackingSm: "0",
-  trackingXl: "-.449px",
-  trackingXs: ".064px",
+  trackingXl: "-.54px",
+  trackingXs: "0",
   warning: "#ffb900",
   warningBg: "#fff7ed",
   warningText: "#ca3500",
@@ -695,6 +753,8 @@ export const dark = {
   amber800: "#674800",
   amber900: "#4c3400",
   amber950: "#362400",
+  barCardH: "48px",
+  barH: "40px",
   bgActive: "#2e2e2e",
   bgApp: "#0a0a0a",
   bgHover: "#262626",
@@ -703,6 +763,7 @@ export const dark = {
   bgRaised: "#1d1d1d",
   bgScrim: "rgba(0,0,0,.6)",
   bgSurface: "#161616",
+  bgTableHeader: "#1f1f1f",
   blue100: "#dbeafe",
   blue200: "#bedbff",
   blue300: "#8ec5ff",
@@ -716,6 +777,7 @@ export const dark = {
   blue950: "#162456",
   borderCard: "rgba(255,255,255,.09)",
   borderControl: "#333333",
+  borderSplit: "#404040",
   borderStrong: "#454545",
   borderSubtle: "#242424",
   brandAlpha12: "rgba(43,127,255,.14)",
@@ -735,6 +797,7 @@ export const dark = {
   catSourceBg: "rgba(0,188,125,.16)",
   catTransform: "#ff8b3d",
   catTransformBg: "rgba(255,105,0,.16)",
+  cellPx: "12px",
   chartAreaAlpha: ".22",
   chartAxis: "#3f3f3f",
   chartBlue: "#4d93ff",
@@ -751,7 +814,15 @@ export const dark = {
   chartPos: "#5bcc97",
   chartTotal: "#d4d4d4",
   chartTrack: "#1f1f1f",
+  checkSize: "16px",
   checkboxBorder: "#4a4a4a",
+  controlGap: "8px",
+  controlH: "32px",
+  controlIcon: "16px",
+  controlLeading: "20px",
+  controlPx: "12px",
+  controlText: "14px",
+  controlTracking: "-.15px",
   cyan100: "#d1f4fc",
   cyan200: "#a4eaf9",
   cyan300: "#57daf3",
@@ -767,6 +838,7 @@ export const dark = {
   dangerActive: "#c10007",
   dangerBg: "rgba(251,44,54,.14)",
   dangerSoftActive: "rgba(251,44,54,.26)",
+  dangerSoftHover: "rgba(251,44,54,.2)",
   dangerText: "#ff8085",
   dotNeutral: "#737373",
   drawerH: "250px",
@@ -781,6 +853,7 @@ export const dark = {
   easeInOut: "cubic-bezier(.4,0,.2,1)",
   easeOut: "cubic-bezier(.2,.8,.3,1)",
   edge: "#4b5563",
+  edgePad: "16px",
   emerald100: "#d8f5e5",
   emerald200: "#b5ecce",
   emerald300: "#8adeb3",
@@ -796,12 +869,13 @@ export const dark = {
   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",
+  groupGap: "16px",
   hButton: "32px",
-  hButtonSm: "30px",
-  hInput: "36px",
-  hNavItem: "35.5px",
-  hSubnavItem: "31.5px",
-  hTreeItem: "30px",
+  hButtonSm: "28px",
+  hInput: "32px",
+  hNavItem: "36px",
+  hSubnavItem: "32px",
+  hTreeItem: "32px",
   hueAmberBg: "#362400",
   hueAmberFg: "#ffd280",
   hueBlueBg: "#162456",
@@ -824,18 +898,19 @@ export const dark = {
   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",
+  leading2xl: "38px",
+  leading2xs: "16px",
+  leading3xl: "46px",
+  leading4xl: "56px",
+  leadingBase: "20px",
+  leadingCode: "18px",
+  leadingDisplay: "68px",
+  leadingLg: "28px",
+  leadingMd: "24px",
   leadingNum: "32px",
-  leadingSm: "18px",
-  leadingXl: "30px",
-  leadingXs: "16.5px",
+  leadingSm: "16px",
+  leadingXl: "32px",
+  leadingXs: "16px",
   link: "#7cb0ff",
   linkHover: "#a8caff",
   neutral0: "#ffffff",
@@ -873,8 +948,8 @@ export const dark = {
   orange900: "#612300",
   orange950: "#461700",
   overlayDrag: "rgba(43,127,255,.14)",
-  overlayHover: "rgba(255,255,255,.04)",
-  overlayPress: "rgba(255,255,255,.08)",
+  overlayHover: "rgba(255,255,255,.08)",
+  overlayPress: "rgba(255,255,255,.16)",
   overlaySelected: "rgba(43,127,255,.1)",
   pagePadX: "32px",
   pagePadY: "24px",
@@ -928,14 +1003,14 @@ export const dark = {
   selectedBorder: "#51a2ff",
   series1: "#51a2ff",
   series10: "#737373",
-  series2: "#90d7cc",
-  series3: "#d2b3ff",
-  series4: "#ffb798",
-  series5: "#8adeb3",
-  series6: "#ffa4da",
-  series7: "#57daf3",
-  series8: "#ffd280",
-  series9: "#ffa79f",
+  series2: "#ee8545",
+  series3: "#35c6b9",
+  series4: "#a07cdb",
+  series5: "#e4ad3c",
+  series6: "#db6baf",
+  series7: "#9bb054",
+  series8: "#54b8e1",
+  series9: "#8f8f8f",
   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)",
@@ -950,8 +1025,11 @@ export const dark = {
   successBg: "rgba(0,188,125,.14)",
   successStrong: "#22c58f",
   successText: "#4ade9f",
+  switchH: "20px",
+  switchW: "36px",
   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)",
+  tagH: "24px",
   teal100: "#dbf3ef",
   teal200: "#b9e8e0",
   teal300: "#90d7cc",
@@ -963,41 +1041,50 @@ export const dark = {
   teal800: "#005e56",
   teal900: "#00443e",
   teal950: "#002f2a",
-  text2xl: "24px",
-  text2xs: "10px",
-  text3xl: "30px",
-  text4xl: "36px",
-  textBase: "13px",
+  text2xl: "30px",
+  text2xs: "11px",
+  text2xsMono: "11px",
+  text3xl: "38px",
+  text4xl: "48px",
+  textBase: "14px",
   textBody: "#d4d4d4",
-  textDisplay: "48px",
+  textCode: "12px",
+  textDisplay: "60px",
+  textGlyphMin: "11px",
   textHeading: "#f5f5f5",
   textInverse: "#0a0a0a",
-  textLg: "15px",
-  textMd: "14px",
+  textLg: "20px",
+  textMd: "16px",
   textMuted: "#737373",
   textNum: "24px",
   textPrimary: "#fafafa",
   textSecondary: "#a1a1a1",
   textSm: "12px",
   textStrong: "#e5e5e5",
-  textXl: "20px",
-  textXs: "11px",
+  textXl: "24px",
+  textXs: "12px",
+  titleCellGap: "2px",
+  titleCellIcon: "16px",
+  titleCellPy: "10px",
+  titleCellTile: "32px",
+  titleCellTileGap: "12px",
+  titleCellTileR: "8px",
   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",
+  tracking2xl: "-.67px",
+  tracking2xs: ".064px",
+  tracking3xl: "-.855px",
+  tracking4xl: "-1.08px",
+  trackingBase: "-.15px",
+  trackingDisplay: "-1.35px",
+  trackingLg: "-.449px",
+  trackingMd: "-.28px",
   trackingNum: ".07px",
   trackingSm: "0",
-  trackingXl: "-.449px",
-  trackingXs: ".064px",
+  trackingXl: "-.54px",
+  trackingXs: "0",
   warning: "#ffb900",
   warningBg: "rgba(255,185,0,.14)",
   warningText: "#ffc55c",
@@ -1013,6 +1100,6 @@ export const dark = {
   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 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","--bar-card-h","--bar-h","--bg-active","--bg-app","--bg-hover","--bg-inset","--bg-press","--bg-raised","--bg-scrim","--bg-surface","--bg-table-header","--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-split","--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","--cell-px","--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","--check-size","--checkbox-border","--control-gap","--control-h","--control-icon","--control-leading","--control-px","--control-text","--control-tracking","--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-soft-hover","--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","--edge-pad","--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","--group-gap","--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-code","--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","--switch-h","--switch-w","--t-hover","--t-theme","--tag-h","--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-2xs-mono","--text-3xl","--text-4xl","--text-base","--text-body","--text-code","--text-display","--text-glyph-min","--text-heading","--text-inverse","--text-lg","--text-md","--text-muted","--text-num","--text-primary","--text-secondary","--text-sm","--text-strong","--text-xl","--text-xs","--title-cell-gap","--title-cell-icon","--title-cell-py","--title-cell-tile","--title-cell-tile-gap","--title-cell-tile-r","--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 };