@keboola/design 4.4.0 → 5.0.0

package/dist/charts.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/classNames.ts","../src/blocks/Charts/ChartContainer.tsx","../src/blocks/Charts/ChartTooltip.tsx","../src/blocks/Charts/format.ts","../src/blocks/Charts/cartesian.tsx","../src/blocks/Charts/theme.ts","../src/blocks/Charts/LineChart.tsx","../src/blocks/Charts/BarChart.tsx","../src/blocks/Charts/AreaChart.tsx","../src/blocks/Charts/PieChart.tsx"],"names":["jsx","RechartsTooltip","jsxs","RechartsLineChart","RechartsBarChart","RechartsAreaChart","RechartsPieChart","Legend"],"mappings":"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","file":"charts.js","sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\n\nconst twMerge = extendTailwindMerge({\n  prefix: 'tw-',\n});\n\nexport const cn = (...classes: ClassValue[]) => twMerge(clsx(...classes));\n","import { type ComponentProps, type ReactElement } from 'react';\nimport { ResponsiveContainer } from 'recharts';\n\nimport { cn } from '../../utils';\n\n/** A length that recharts' `<ResponsiveContainer>` accepts: px number or `\"NN%\"`. */\nexport type ChartDimension = number | `${number}%`;\n\nexport type ChartContainerProps = Omit<ComponentProps<'div'>, 'children'> & {\n  /**\n   * Height as a px number or percentage string. Charts have no intrinsic\n   * height, so a container needs one either here or from a sized ancestor.\n   * Defaults to 300.\n   */\n  height?: ChartDimension;\n  /** Width as a px number or percentage. Defaults to `\"100%\"` (fills parent). */\n  width?: ChartDimension;\n  /** A single recharts chart element (`<LineChart>`, `<BarChart>`, …). */\n  children: ReactElement;\n};\n\n/**\n * Responsive, brand-themed frame for a chart. Wraps the chart in recharts'\n * `<ResponsiveContainer>` and applies the semantic-token chrome (axis text,\n * grid, cursor) through CSS so every chart inside inherits it. Sizing is\n * intrinsic: give it a `height` (default 300) and it fills the parent width.\n */\nexport const ChartContainer = ({\n  height = 300,\n  width = '100%',\n  className,\n  children,\n  ...props\n}: ChartContainerProps) => (\n  <div\n    className={cn(\n      'tw-text-xs',\n      // Axis ticks and labels follow the muted foreground token.\n      '[&_.recharts-cartesian-axis-tick_text]:tw-fill-muted-foreground',\n      '[&_.recharts-polar-angle-axis-tick_text]:tw-fill-muted-foreground',\n      '[&_.recharts-label]:tw-fill-muted-foreground',\n      '[&_.recharts-legend-item-text]:!tw-text-muted-foreground',\n      // Grid lines, axis lines and the hover cursor follow the border token.\n      '[&_.recharts-cartesian-grid_line]:tw-stroke-border/60',\n      '[&_.recharts-cartesian-axis-line]:tw-stroke-border',\n      '[&_.recharts-cartesian-axis-tick-line]:tw-stroke-border',\n      '[&_.recharts-curve.recharts-tooltip-cursor]:tw-stroke-border',\n      '[&_.recharts-rectangle.recharts-tooltip-cursor]:tw-fill-muted/60',\n      '[&_.recharts-surface]:tw-outline-none',\n      className,\n    )}\n    {...props}\n  >\n    <ResponsiveContainer width={width} height={height}>\n      {children}\n    </ResponsiveContainer>\n  </div>\n);\n","import { type ComponentProps } from 'react';\nimport { Tooltip as RechartsTooltip } from 'recharts';\n\nimport { cn } from '../../utils';\n\ntype TooltipPayloadEntry = {\n  name?: string | number;\n  value?: string | number;\n  color?: string;\n  dataKey?: string | number;\n};\n\ntype ChartTooltipContentProps = {\n  active?: boolean;\n  label?: string | number;\n  payload?: TooltipPayloadEntry[];\n  /** Format a value for display (e.g. currency, percentage). */\n  valueFormatter?: (value: string | number, name: string) => string;\n  className?: string;\n};\n\n/**\n * Brand-themed tooltip body. Surfaces (background, border, text) resolve from\n * semantic tokens, and each series swatch reuses the recharts-provided series\n * `color` (already a `--color-chart-*` token from this package's charts).\n */\nexport const ChartTooltipContent = ({\n  active,\n  label,\n  payload,\n  valueFormatter,\n  className,\n}: ChartTooltipContentProps) => {\n  if (!active || !payload?.length) return null;\n\n  return (\n    <div\n      className={cn(\n        'tw-min-w-32 tw-rounded-md tw-border tw-border-border tw-bg-popover tw-px-2.5 tw-py-1.5 tw-text-xs tw-text-popover-foreground tw-shadow-md',\n        className,\n      )}\n    >\n      {label != null && <div className=\"tw-mb-1 tw-font-medium\">{label}</div>}\n      <div className=\"tw-flex tw-flex-col tw-gap-1\">\n        {payload.map((entry) => {\n          const name = String(entry.name ?? entry.dataKey ?? '');\n          const value = entry.value;\n          // Missing / non-numeric values render blank rather than \"NaN\"/\"0\";\n          // only well-formed numbers reach the formatter.\n          const hasNumber = value != null && value !== '' && Number.isFinite(Number(value));\n          const display = hasNumber\n            ? valueFormatter\n              ? valueFormatter(Number(value), name)\n              : String(Number(value))\n            : (value ?? '');\n          return (\n            <div\n              key={String(entry.dataKey ?? name)}\n              className=\"tw-flex tw-items-center tw-justify-between tw-gap-3\"\n            >\n              <span className=\"tw-flex tw-items-center tw-gap-1.5\">\n                <span\n                  className=\"tw-size-2 tw-shrink-0 tw-rounded-[2px]\"\n                  style={{ backgroundColor: entry.color }}\n                />\n                <span className=\"tw-text-muted-foreground\">{name}</span>\n              </span>\n              <span className=\"tw-font-medium tw-tabular-nums\">{display}</span>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport type ChartTooltipProps = ComponentProps<typeof RechartsTooltip> & {\n  valueFormatter?: (value: string | number, name: string) => string;\n};\n\n/**\n * Drop-in recharts `<Tooltip>` pre-wired to render {@link ChartTooltipContent}.\n * Each chart mounts one by default; pass `showTooltip={false}` on the chart to omit.\n */\nexport const ChartTooltip = ({ valueFormatter, ...props }: ChartTooltipProps) => (\n  <RechartsTooltip\n    cursor={{ strokeWidth: 1 }}\n    content={<ChartTooltipContent valueFormatter={valueFormatter} />}\n    {...props}\n  />\n);\n","/**\n * Apply a numeric `valueFormatter` safely. recharts hands axis ticks and\n * tooltip payload values as `string | number | null | undefined`, and partial\n * or streaming data can carry gaps. Coercing those straight through\n * `Number(value)` would render `$0` (empty string → 0) or `$NaN` (non-numeric),\n * so a missing / non-finite value is rendered as an empty string instead of\n * being fed to the formatter.\n */\nexport const formatValue = (\n  value: string | number | null | undefined,\n  valueFormatter?: (value: number) => string,\n): string => {\n  if (value == null || value === '') return '';\n  const num = Number(value);\n  if (!Number.isFinite(num)) return '';\n  return valueFormatter ? valueFormatter(num) : String(num);\n};\n","import { CartesianGrid, Legend, XAxis, YAxis } from 'recharts';\n\nimport { ChartTooltip } from './ChartTooltip';\nimport { formatValue } from './format';\nimport { type CartesianChartProps } from './types';\n\nconst AXIS_PROPS = {\n  tickLine: false,\n  axisLine: false,\n  tick: { fontSize: 11 },\n} as const;\n\n/**\n * The grid + axes + tooltip + legend shared by the line, bar, and area charts.\n * Colors are applied via `ChartContainer`'s CSS chrome, not inline props, so\n * these stay brand-safe.\n */\nexport const cartesianChrome = ({\n  xKey,\n  showGrid = true,\n  showYAxis = true,\n  showLegend = false,\n  showTooltip = true,\n  valueFormatter,\n}: Pick<\n  CartesianChartProps,\n  'xKey' | 'showGrid' | 'showYAxis' | 'showLegend' | 'showTooltip' | 'valueFormatter'\n>) => (\n  <>\n    {showGrid && <CartesianGrid strokeDasharray=\"3 3\" vertical={false} />}\n    <XAxis dataKey={xKey} {...AXIS_PROPS} />\n    {showYAxis && (\n      <YAxis\n        width={48}\n        {...AXIS_PROPS}\n        tickFormatter={\n          valueFormatter\n            ? (value: string | number) => formatValue(value, valueFormatter)\n            : undefined\n        }\n      />\n    )}\n    {showTooltip && (\n      <ChartTooltip\n        valueFormatter={valueFormatter ? (value) => formatValue(value, valueFormatter) : undefined}\n      />\n    )}\n    {showLegend && <Legend wrapperStyle={{ fontSize: 11 }} />}\n  </>\n);\n","/**\n * The design system ships a five-slot categorical chart palette as CSS\n * variables (`--color-chart-1` … `--color-chart-5`). Charts resolve their\n * series colors from these tokens only — never from inline hex or a primitive\n * scale — so they follow both the active color scheme (light/dark, via\n * `data-theme` in `styles.css`) and the active brand: a brand reskins charts\n * by defining `colors.chart` (and `colorsDark.chart`) in its\n * `@keboola/brand-registry` definition, which `ThemeProvider` emits as the\n * `--color-chart-*` variables.\n *\n * The CSS variables hold raw `R G B` channels (for Tailwind's `<alpha-value>`\n * opacity modifiers), so they are wrapped in `rgb(...)` before handing them to\n * recharts as ordinary SVG `stroke` / `fill` strings.\n */\nconst CHART_TOKEN_COUNT = 5;\n\n/** Number of the semantic chart token (`1`–`5`) a series maps to. */\nexport type ChartColorToken = 1 | 2 | 3 | 4 | 5;\n\n/**\n * The CSS color for a chart token. `index` is 0-based (series position); it\n * wraps around the five-slot palette so any number of series stays on-brand.\n */\nexport const chartTokenColor = (index: number): string => {\n  // Euclidean modulo so negative indices still land in 1..CHART_TOKEN_COUNT\n  // (plain `%` would yield e.g. `--color-chart-0` for index -1).\n  const slot = (((index % CHART_TOKEN_COUNT) + CHART_TOKEN_COUNT) % CHART_TOKEN_COUNT) + 1;\n  return `rgb(var(--color-chart-${slot}))`;\n};\n\n/** Resolve an explicit token (1–5) or fall back to the series position. */\nexport const resolveSeriesColor = (index: number, token?: ChartColorToken): string =>\n  chartTokenColor(token ? token - 1 : index);\n","import { Line, LineChart as RechartsLineChart } from 'recharts';\n\nimport { cartesianChrome } from './cartesian';\nimport { ChartContainer } from './ChartContainer';\nimport { resolveSeriesColor } from './theme';\nimport { type CartesianChartProps } from './types';\n\n/**\n * A themed multi-series line chart. Each series' color comes from the semantic\n * `--color-chart-*` palette (by order, or pinned via `series[].color`), which\n * follows the active color scheme and the active brand's `colors.chart` when it\n * defines one. Wrap-free — mounts its own {@link ChartContainer}.\n *\n * @example\n * <LineChart\n *   data={data}\n *   xKey=\"month\"\n *   series={[{ dataKey: 'revenue', name: 'Revenue' }, { dataKey: 'cost' }]}\n * />\n */\nexport const LineChart = ({\n  data,\n  xKey,\n  series,\n  height,\n  width,\n  className,\n  ...chrome\n}: CartesianChartProps) => (\n  <ChartContainer height={height} width={width} className={className}>\n    <RechartsLineChart data={data} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>\n      {cartesianChrome({ xKey, ...chrome })}\n      {series.map((s, index) => {\n        const color = resolveSeriesColor(index, s.color);\n        return (\n          <Line\n            key={s.dataKey}\n            type=\"monotone\"\n            dataKey={s.dataKey}\n            name={s.name ?? s.dataKey}\n            stroke={color}\n            strokeWidth={2}\n            dot={{ r: 3, fill: color, stroke: color }}\n            activeDot={{ r: 4 }}\n            isAnimationActive={false}\n          />\n        );\n      })}\n    </RechartsLineChart>\n  </ChartContainer>\n);\n","import { Bar, BarChart as RechartsBarChart } from 'recharts';\n\nimport { cartesianChrome } from './cartesian';\nimport { ChartContainer } from './ChartContainer';\nimport { resolveSeriesColor } from './theme';\nimport { type CartesianChartProps } from './types';\n\nexport type BarChartProps = CartesianChartProps & {\n  /** Stack the series into a single bar per category. Defaults to grouped. */\n  stacked?: boolean;\n};\n\n/**\n * A themed multi-series bar chart. Series colors come from the semantic\n * `--color-chart-*` palette (by order, or pinned via `series[].color`), which\n * follows the active color scheme and the active brand's `colors.chart` when it\n * defines one. Pass `stacked` to stack the series instead of grouping them.\n *\n * @example\n * <BarChart data={data} xKey=\"month\" series={[{ dataKey: 'revenue' }]} />\n */\nexport const BarChart = ({\n  data,\n  xKey,\n  series,\n  height,\n  width,\n  className,\n  stacked = false,\n  ...chrome\n}: BarChartProps) => (\n  <ChartContainer height={height} width={width} className={className}>\n    <RechartsBarChart data={data} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>\n      {cartesianChrome({ xKey, ...chrome })}\n      {series.map((s, index) => (\n        <Bar\n          key={s.dataKey}\n          dataKey={s.dataKey}\n          name={s.name ?? s.dataKey}\n          fill={resolveSeriesColor(index, s.color)}\n          radius={stacked ? 0 : [4, 4, 0, 0]}\n          stackId={stacked ? 'stack' : undefined}\n          isAnimationActive={false}\n        />\n      ))}\n    </RechartsBarChart>\n  </ChartContainer>\n);\n","import { Area, AreaChart as RechartsAreaChart } from 'recharts';\n\nimport { cartesianChrome } from './cartesian';\nimport { ChartContainer } from './ChartContainer';\nimport { resolveSeriesColor } from './theme';\nimport { type CartesianChartProps } from './types';\n\nexport type AreaChartProps = CartesianChartProps & {\n  /** Stack the series into a cumulative area. Defaults to overlaid. */\n  stacked?: boolean;\n};\n\n/**\n * A themed multi-series area chart. Each series is stroked and softly filled\n * from the semantic `--color-chart-*` palette (by order, or pinned via\n * `series[].color`), which follows the active color scheme and the active\n * brand's `colors.chart` when it defines one. Pass `stacked` to stack the\n * series cumulatively.\n *\n * @example\n * <AreaChart data={data} xKey=\"month\" series={[{ dataKey: 'revenue' }]} />\n */\nexport const AreaChart = ({\n  data,\n  xKey,\n  series,\n  height,\n  width,\n  className,\n  stacked = false,\n  ...chrome\n}: AreaChartProps) => (\n  <ChartContainer height={height} width={width} className={className}>\n    <RechartsAreaChart data={data} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>\n      {cartesianChrome({ xKey, ...chrome })}\n      {series.map((s, index) => {\n        const color = resolveSeriesColor(index, s.color);\n        return (\n          <Area\n            key={s.dataKey}\n            type=\"monotone\"\n            dataKey={s.dataKey}\n            name={s.name ?? s.dataKey}\n            stroke={color}\n            fill={color}\n            fillOpacity={0.15}\n            strokeWidth={2}\n            stackId={stacked ? 'stack' : undefined}\n            isAnimationActive={false}\n          />\n        );\n      })}\n    </RechartsAreaChart>\n  </ChartContainer>\n);\n","import { Cell, Legend, Pie, PieChart as RechartsPieChart } from 'recharts';\n\nimport { ChartContainer, type ChartDimension } from './ChartContainer';\nimport { ChartTooltip } from './ChartTooltip';\nimport { formatValue } from './format';\nimport { chartTokenColor } from './theme';\nimport { type ChartDatum } from './types';\n\nexport type PieChartProps = {\n  /** The rows to plot — one sector per row. */\n  data: ChartDatum[];\n  /** Key into each datum for the sector label. */\n  nameKey: string;\n  /** Key into each datum for the sector value. */\n  dataKey: string;\n  /** Render as a donut with a hole of this inner radius (px or %). */\n  innerRadius?: ChartDimension;\n  /** Height as a px number or percentage. Defaults to 300. */\n  height?: ChartDimension;\n  /** Width as a px number or percentage. Defaults to `\"100%\"`. */\n  width?: ChartDimension;\n  /** Show a legend below the chart. Defaults to `true`. */\n  showLegend?: boolean;\n  /** Show the hover tooltip. Defaults to `true`. */\n  showTooltip?: boolean;\n  /** Format a sector value for the tooltip. */\n  valueFormatter?: (value: number) => string;\n  className?: string;\n};\n\n/**\n * A themed pie / donut chart. Each sector cycles through the semantic\n * `--color-chart-*` palette, which follows the active color scheme and the\n * active brand's `colors.chart` when it defines one. Pass `innerRadius` to make\n * a donut.\n *\n * @example\n * <PieChart data={data} nameKey=\"engine\" dataKey=\"rows\" innerRadius=\"60%\" />\n */\nexport const PieChart = ({\n  data,\n  nameKey,\n  dataKey,\n  innerRadius = 0,\n  height,\n  width,\n  className,\n  showLegend = true,\n  showTooltip = true,\n  valueFormatter,\n}: PieChartProps) => (\n  <ChartContainer height={height} width={width} className={className}>\n    <RechartsPieChart>\n      {showTooltip && (\n        <ChartTooltip\n          valueFormatter={\n            valueFormatter ? (value) => formatValue(value, valueFormatter) : undefined\n          }\n        />\n      )}\n      {showLegend && <Legend wrapperStyle={{ fontSize: 11 }} />}\n      <Pie\n        data={data}\n        nameKey={nameKey}\n        dataKey={dataKey}\n        innerRadius={innerRadius}\n        // Separate sectors with the brand surface color rather than recharts'\n        // hardcoded white default.\n        stroke=\"rgb(var(--color-background))\"\n        isAnimationActive={false}\n      >\n        {data.map((datum, index) => (\n          <Cell key={String(datum[nameKey] ?? index)} fill={chartTokenColor(index)} />\n        ))}\n      </Pie>\n    </RechartsPieChart>\n  </ChartContainer>\n);\n"]}

package/dist/editors.cjs

@@ -85,13 +85,39 @@ var cn = (...classes) => twMerge(clsx.clsx(...classes));
 var copyToClipboard = (text) => {
   return navigator.clipboard.writeText(text);
 };
-var ThemeContext = react.createContext(null);
 
-// src/components/internal/useIsLegacyBrand.ts
-var useIsLegacyBrand = () => {
-  const context = react.use(ThemeContext);
-  return context === null || context.brand.id === brandRegistry.keboolaLegacy.id;
+// src/components/ThemeProvider/utils.ts
+var createTheme = (brand) => ({
+  id: brand.id,
+  name: brand.name,
+  shell: brand.shell,
+  logo: brand.logo
+});
+
+// src/components/ThemeProvider/defaults.ts
+[brandRegistry.keboolaLegacySidebar.id, brandRegistry.keboolaLegacyTopnav.id];
+var DEFAULT_COLOR_SCHEME = "light";
+var DEFAULT_BRAND_ID = "design-system";
+var defaultBrand = {
+  id: DEFAULT_BRAND_ID,
+  name: "Design System",
+  shell: "sidebar"};
+var defaultTheme = createTheme(defaultBrand);
+
+// src/components/ThemeProvider/context.tsx
+var noop = () => void 0;
+var defaultContext = {
+  scheme: DEFAULT_COLOR_SCHEME,
+  resolvedScheme: DEFAULT_COLOR_SCHEME,
+  setScheme: noop,
+  brandId: defaultTheme.id,
+  setBrand: noop,
+  themes: [defaultTheme],
+  currentTheme: defaultTheme
 };
+react.createContext(defaultContext);
+var ArgoDesignContext = react.createContext(true);
+var useArgoDesign = () => react.use(ArgoDesignContext);
 var tooltipVariants = classVarianceAuthority.cva(
   [
     "tailwindcss-preflight",
@@ -169,8 +195,7 @@ var TooltipContent = ({
   placement = "right",
   ...rest
 }) => {
-  const isLegacy = useIsLegacyBrand();
-  const renderArgo = !isLegacy;
+  const renderArgo = useArgoDesign();
   const handlePointerDownOutside = (event) => {
     if (keepOpenOnPointerDownOutside) event.preventDefault();
     onPointerDownOutside?.(event);
@@ -300,7 +325,7 @@ var helpVariants = classVarianceAuthority.cva(["tw-m-0", "tw-text-xs"], {
     state: {
       default: ["tw-text-muted-foreground"],
       error: ["tw-text-destructive"],
-      warning: ["tw-text-warning-500"]
+      warning: ["tw-text-warning"]
     }
   }
 });
@@ -352,8 +377,8 @@ var variants = classVarianceAuthority.cva(
     "tw-font-medium",
     "tw-tracking-[1px]",
     "tw-uppercase",
-    // border
-    "tw-rounded-[var(--radius-lg,0.25rem)]",
+    // border — legacy (non-argo) chrome uses a fixed radius, not the brand token.
+    "tw-rounded",
     "tw-border",
     "tw-border-transparent",
     // styling
@@ -548,14 +573,14 @@ var argoVariants = classVarianceAuthority.cva(
           "hover:tw-text-primary-foreground",
           "focus:tw-text-primary-foreground",
           "focus-visible:tw-border-primary",
-          "focus-visible:tw-ring-primary/50"
+          "focus-visible:tw-ring-ring/50"
         ],
         secondary: [
           "tw-bg-primary/10",
           "tw-text-primary",
           "hover:not-disabled:tw-bg-primary/20",
           "focus-visible:tw-border-primary",
-          "focus-visible:tw-ring-primary/50"
+          "focus-visible:tw-ring-ring/50"
         ],
         // should be called "destructive" by Figma
         danger: [
@@ -572,20 +597,22 @@ var argoVariants = classVarianceAuthority.cva(
           // Semantic base text color so the label/icon flips in dark mode
           // (matches `invisible`); previously unset → inherited a fixed dark color.
           "tw-text-foreground",
-          "hover:not-disabled:tw-bg-accent",
-          "hover:not-disabled:tw-text-accent-foreground",
+          // Hover follows the brand primary (translucent tint), matching the
+          // `secondary` variant — not the fixed `accent` blue.
+          "hover:not-disabled:tw-bg-primary/10",
+          "hover:not-disabled:tw-text-primary",
           "hover:active:tw-bg-background",
           "focus-visible:!tw-border-primary",
-          "focus-visible:tw-ring-primary/50"
+          "focus-visible:tw-ring-ring/50"
         ],
         // should be called "ghost" by Figma
         invisible: [
           "tw-bg-transparent",
           "tw-text-foreground",
-          "hover:not-disabled:tw-bg-accent",
-          "hover:not-disabled:tw-text-accent-foreground",
-          "hover:not-disabled:tw-border-accent",
-          "focus-visible:tw-ring-primary/50"
+          "hover:not-disabled:tw-bg-primary/10",
+          "hover:not-disabled:tw-text-primary",
+          "hover:not-disabled:tw-border-primary/10",
+          "focus-visible:tw-ring-ring/50"
         ],
         // should be called "link" by Figma
         inline: [
@@ -593,7 +620,7 @@ var argoVariants = classVarianceAuthority.cva(
           "tw-text-primary",
           "hover:tw-underline",
           "hover:active:tw-bg-transparent",
-          "focus-visible:tw-ring-primary/50"
+          "focus-visible:tw-ring-ring/50"
         ]
       },
       size: {
@@ -628,8 +655,7 @@ var Button = ({
   block = false,
   ...buttonProps
 }) => {
-  const isLegacy = useIsLegacyBrand();
-  const renderArgo = !isLegacy;
+  const renderArgo = useArgoDesign();
   const Comp = asChild ? reactSlot.Root : "button";
   const isIconOnly = String(size).startsWith("icon");
   const classNames = renderArgo ? argoVariants({ variant, size, block, className }) : variants({ size, variant, block, className });
@@ -756,15 +782,44 @@ var ButtonToolbar = ({ value, children }) => {
     children
   ] });
 };
-var baseThemeStyles = {
+var resolveToken = (token, fallbackChannels, alpha) => {
+  const channels = typeof document === "undefined" ? fallbackChannels : getComputedStyle(document.documentElement).getPropertyValue(`--color-${token}`).trim() || fallbackChannels;
+  return alpha === void 0 ? `rgb(${channels})` : `rgb(${channels} / ${alpha})`;
+};
+var SSR_SIGNAL = "ssr";
+var readThemeSignal = () => {
+  if (typeof document === "undefined") return SSR_SIGNAL;
+  const root = document.documentElement;
+  return `${root.getAttribute("data-theme") ?? ""}:${root.getAttribute("data-brand") ?? ""}`;
+};
+var subscribeThemeSignal = (onChange) => {
+  if (typeof document === "undefined") return () => {
+  };
+  const observer = new MutationObserver(onChange);
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["data-theme", "data-brand"]
+  });
+  return () => observer.disconnect();
+};
+var useThemeSignal = () => react.useSyncExternalStore(subscribeThemeSignal, readThemeSignal, () => SSR_SIGNAL);
+var useThemedExtension = (build, deps = []) => {
+  const themeSignal = useThemeSignal();
+  return react.useMemo(build, [themeSignal, ...deps]);
+};
+
+// src/components/CodeEditor/helpers.ts
+var buildBaseThemeStyles = () => ({
   "*": { lineHeight: "20px" },
   "*::selection": {
-    backgroundColor: colors__default.default.secondary[500],
-    color: `${colors__default.default.white} !important`
+    backgroundColor: resolveToken("primary", "31 143 255"),
+    color: `${resolveToken("primary-foreground", "255 255 255")} !important`
+  },
+  '&.cm-editor:has(.cm-content[contenteditable="false"])': {
+    backgroundColor: resolveToken("secondary", "226 232 240")
   },
-  '&.cm-editor:has(.cm-content[contenteditable="false"])': { backgroundColor: colors__default.default.neutral[150] },
   '&.cm-editor:has(.cm-content[contenteditable="false"]) .cm-gutters': {
-    backgroundColor: colors__default.default.neutral[200]
+    backgroundColor: resolveToken("border", "229 231 235")
   },
   "&.cm-editor .cm-scroller": { overflowAnchor: "none" },
   "&.cm-editor, &.cm-editor .cm-scroller": {
@@ -780,11 +835,11 @@ var baseThemeStyles = {
   ".cm-line .tok-string": { color: colors__default.default.warning[700] },
   // merge (diff) view
   '&[class*="cm-merge-"] .cm-deletedLine': { backgroundColor: colors__default.default.error[100] },
-  '&[class*="cm-merge-"] .cm-changedLine': { backgroundColor: colors__default.default.primary[100] },
+  '&[class*="cm-merge-"] .cm-changedLine': { backgroundColor: colors__default.default.green[100] },
   '&[class*="cm-merge-"] .cm-deletedLineGutter': { backgroundColor: colors__default.default.error[200] },
-  '&[class*="cm-merge-"] .cm-changedLineGutter': { backgroundColor: colors__default.default.primary[200] },
+  '&[class*="cm-merge-"] .cm-changedLineGutter': { backgroundColor: colors__default.default.green[200] },
   '&[class*="cm-merge-"] .cm-deletedText': { background: colors__default.default.error[200] },
-  '&[class*="cm-merge-"] .cm-changedText': { background: colors__default.default.primary[200] },
+  '&[class*="cm-merge-"] .cm-changedText': { background: colors__default.default.green[200] },
   '&[class*="cm-merge-"]': {
     backgroundColor: `${colors__default.default.white} !important`
   },
@@ -793,16 +848,18 @@ var baseThemeStyles = {
   },
   ".cm-changeGutter": { position: "absolute", zIndex: -1, width: "100%", paddingLeft: 0 },
   '&[class*="cm-merge-"] .cm-changedLine,&[class*="cm-merge-"] .cm-line, &[class*="cm-merge-"] .cm-deletedChunk': { paddingLeft: 0 }
-};
+});
 var BASIS_SETUP = { drawSelection: false };
-var customTheme = codemirrorThemeGithub.githubLightInit({
+var buildCustomTheme = () => codemirrorThemeGithub.githubLightInit({
   settings: {
     fontFamily: `'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New'`,
-    background: colors__default.default.neutral[50],
-    gutterBackground: colors__default.default.neutral[100],
+    background: resolveToken("background", "249 250 251"),
+    foreground: resolveToken("foreground", "30 41 59"),
+    gutterBackground: resolveToken("muted", "241 245 249"),
+    gutterForeground: resolveToken("muted-foreground", "100 116 139"),
     gutterBorder: "transparent",
     lineHighlight: "transparent",
-    selection: colors__default.default.secondary[500]
+    selection: resolveToken("primary", "31 143 255")
   }
 });
 var getLanguageMode = (mode) => {
@@ -920,6 +977,8 @@ var CodeEditor = ({
   renderAdditionalButtons,
   className
 }) => {
+  const customTheme = useThemedExtension(buildCustomTheme);
+  const baseTheme = useThemedExtension(() => view.EditorView.theme(buildBaseThemeStyles()));
   const commonExtensions = react.useMemo(() => {
     return [
       getLanguageMode(mode),
@@ -939,9 +998,9 @@ var CodeEditor = ({
         }))
       ),
       autocomplete.autocompletion({ activateOnTyping: completeAny }),
-      view.EditorView.theme(baseThemeStyles)
+      baseTheme
     ].filter(Boolean);
-  }, [autocompletions, completeAny, extraKeys, mode, withLineWrapping]);
+  }, [autocompletions, completeAny, extraKeys, mode, withLineWrapping, baseTheme]);
   const extensions = react.useMemo(() => {
     return [
       ...commonExtensions,
@@ -1156,19 +1215,19 @@ var activeQueryHighlight = (splitQueries) => {
     ),
     view.EditorView.baseTheme({
       ".cm-active-query": {
-        boxShadow: `inset -1px 0 0 0 ${colors__default.default.secondary[300]}, inset 1px 0 0 0 ${colors__default.default.secondary[300]}`,
+        boxShadow: `inset -1px 0 0 0 ${colors__default.default.blue[300]}, inset 1px 0 0 0 ${colors__default.default.blue[300]}`,
         marginRight: "8px"
       },
       ".cm-active-query-first": {
-        boxShadow: `inset -1px 0 0 0 ${colors__default.default.secondary[300]}, inset 1px 0 0 0 ${colors__default.default.secondary[300]}, inset 0 1px 0 0 ${colors__default.default.secondary[300]}`,
+        boxShadow: `inset -1px 0 0 0 ${colors__default.default.blue[300]}, inset 1px 0 0 0 ${colors__default.default.blue[300]}, inset 0 1px 0 0 ${colors__default.default.blue[300]}`,
         borderRadius: "4px 4px 0 0"
       },
       ".cm-active-query-last": {
-        boxShadow: `inset -1px 0 0 0 ${colors__default.default.secondary[300]}, inset 1px 0 0 0 ${colors__default.default.secondary[300]}, inset 0 -1px 0 0 ${colors__default.default.secondary[300]}`,
+        boxShadow: `inset -1px 0 0 0 ${colors__default.default.blue[300]}, inset 1px 0 0 0 ${colors__default.default.blue[300]}, inset 0 -1px 0 0 ${colors__default.default.blue[300]}`,
         borderRadius: "0 0 4px 4px"
       },
       ".cm-active-query-first.cm-active-query-last": {
-        boxShadow: `inset 0 0 0 1px ${colors__default.default.secondary[300]}`,
+        boxShadow: `inset 0 0 0 1px ${colors__default.default.blue[300]}`,
         borderRadius: "4px"
       }
     })
@@ -1282,13 +1341,13 @@ var highlightedLinesTheme = view.EditorView.baseTheme({
   ".cm-highlight-marker": {
     width: "2px",
     height: "100%",
-    backgroundColor: colors__default.default.secondary[500]
+    backgroundColor: colors__default.default.blue[500]
   },
   ".cm-error-line": {
     backgroundColor: `${colors__default.default.error[100]} !important`
   },
   ".cm-processing-line": {
-    backgroundColor: `${colors__default.default.secondary[100]} !important`
+    backgroundColor: `${colors__default.default.blue[100]} !important`
   }
 });
 function highlightingExtension(queryParser) {
@@ -1392,13 +1451,13 @@ var searchViewPlugin = view.ViewPlugin.fromClass(
 );
 var searchTheme = view.EditorView.baseTheme({
   ".cm-searchMatch": {
-    backgroundColor: colors__default.default.secondary[100]
+    backgroundColor: colors__default.default.blue[100]
   },
   ".cm-searchMatch > span": {
-    color: `${colors__default.default.secondary[600]} !important`
+    color: `${colors__default.default.blue[600]} !important`
   },
   ".cm-searchMatch-selected": {
-    backgroundColor: colors__default.default.secondary[600]
+    backgroundColor: colors__default.default.blue[600]
   },
   ".cm-searchMatch-selected > span": {
     color: `${colors__default.default.white} !important`
@@ -1426,29 +1485,31 @@ var CUSTOM_KEYMAP = [
     }
   }
 ];
-var theme = {
-  ...baseThemeStyles,
+var buildTheme = () => ({
+  ...buildBaseThemeStyles(),
   "&.cm-editor": {
     border: "solid 1px transparent",
-    background: colors__default.default.white,
+    background: resolveToken("card", "255 255 255"),
     borderRadius: "8px",
     paddingTop: "8px",
     paddingBottom: "8px"
   },
   '&.cm-editor:has(.cm-content[contenteditable="true"]):hover': {
-    borderColor: colors__default.default.secondary[500]
+    borderColor: resolveToken("ring", "31 143 255")
   },
   '&.cm-editor:has(.cm-content[contenteditable="true"]):focus-within': {
-    borderColor: colors__default.default.secondary[500],
-    boxShadow: `0 0 0 4px ${colors__default.default.secondary[200]}`
+    borderColor: resolveToken("ring", "31 143 255"),
+    boxShadow: `0 0 0 4px ${resolveToken("ring", "31 143 255", 0.3)}`
   },
   "&.cm-editor .cm-scroller": { overflowAnchor: "none" },
-  "&.cm-editor :is(.cm-gutters,.cm-scroller)": { background: colors__default.default.white },
-  '&.cm-editor:has(.cm-content[contenteditable="false"])': { background: colors__default.default.neutral[100] },
+  "&.cm-editor :is(.cm-gutters,.cm-scroller)": { background: resolveToken("card", "255 255 255") },
+  '&.cm-editor:has(.cm-content[contenteditable="false"])': {
+    background: resolveToken("muted", "241 245 249")
+  },
   '&.cm-editor:has(.cm-content[contenteditable="false"]) :is(.cm-scroller,.cm-gutters)': {
-    background: colors__default.default.neutral[100]
+    background: resolveToken("muted", "241 245 249")
   }
-};
+});
 var SqlEditor = ({
   value,
   onChange,
@@ -1474,6 +1535,8 @@ var SqlEditor = ({
   dialect
 }) => {
   const editorRef = react.useRef(null);
+  const customTheme = useThemedExtension(buildCustomTheme);
+  const themeExtension = useThemedExtension(() => CodeMirror.EditorView.theme(buildTheme()));
   const extensions = react.useMemo(() => {
     const baseKeymap = [...commands.defaultKeymap, ...CUSTOM_KEYMAP];
     return [
@@ -1482,7 +1545,7 @@ var SqlEditor = ({
       ...codemirrorLangSql.installExtensions({ schema, defaultDatabase, defaultSchema, variables, dialect }),
       searchExtension(),
       highlightingExtension(queryParser),
-      CodeMirror.EditorView.theme(theme),
+      themeExtension,
       onBlurEditor ? CodeMirror.EditorView.domEventHandlers({ blur: (_, view) => onBlurEditor(view) }) : [],
       onFocusEditor ? CodeMirror.EditorView.domEventHandlers({ focus: (_, view) => onFocusEditor(view) }) : []
     ];
@@ -1495,7 +1558,8 @@ var SqlEditor = ({
     variables,
     dialect,
     onBlurEditor,
-    onFocusEditor
+    onFocusEditor,
+    themeExtension
   ]);
   const defaultSetup = react.useMemo(() => {
     return { ...BASIS_SETUP2, lineNumbers };
@@ -1656,23 +1720,23 @@ var createDiffHighlightExtension = () => {
       view.gutterLineClass.from(f, (val) => val.gutterMarkers)
     ]
   });
-  const theme2 = view.EditorView.theme({
+  const theme = view.EditorView.theme({
     ".cm-merge-safe-line": {
-      backgroundColor: `${colors__default.default.primary[100]} !important`,
-      boxShadow: `inset 3px 0 0 ${colors__default.default.primary[500]}`
+      backgroundColor: `${colors__default.default.green[100]} !important`,
+      boxShadow: `inset 3px 0 0 ${colors__default.default.green[500]}`
     },
     ".cm-merge-conflict-line": {
       backgroundColor: `${colors__default.default.warning[100]} !important`,
       boxShadow: `inset 3px 0 0 ${colors__default.default.warning[500]}`
     },
     ".cm-merge-safe-gutter": {
-      backgroundColor: `${colors__default.default.primary[200]} !important`
+      backgroundColor: `${colors__default.default.green[200]} !important`
     },
     ".cm-merge-conflict-gutter": {
       backgroundColor: `${colors__default.default.warning[200]} !important`
     }
   });
-  return [field, theme2];
+  return [field, theme];
 };
 var updateHighlightedLines = (view, lines, classification) => {
   view.dispatch({ effects: setHighlightedLines.of({ lines, classification }) });
@@ -1692,21 +1756,31 @@ var MergePane = ({
   deleted = false
 }) => {
   const editorRef = react.useRef(null);
+  const themeExtension = useThemedExtension(
+    () => view.EditorView.theme({
+      "&.cm-editor": {
+        height: "100%",
+        backgroundColor: deleted ? colors__default.default.error[100] : resolveToken("background", "249 250 251"),
+        // Pair the token-driven surface with a token-driven text color so line
+        // content stays readable when the pane's `--color-background` goes dark.
+        // The deleted pane keeps default dark text on its fixed light-red wash.
+        ...deleted ? {} : { color: resolveToken("foreground", "30 41 59") },
+        outline: "none"
+      },
+      ".cm-gutters": {
+        backgroundColor: deleted ? colors__default.default.error[200] : resolveToken("muted", "241 245 249"),
+        ...deleted ? {} : { color: resolveToken("muted-foreground", "100 116 139") }
+      },
+      "*": { lineHeight: `${LINE_HEIGHT_PX}px` },
+      ".cm-lineNumbers .cm-gutterElement": { padding: "0 0 0 25px" }
+    }),
+    [deleted]
+  );
+  const diffHighlightExtension = react.useMemo(() => createDiffHighlightExtension(), []);
   const extensions = react.useMemo(
     () => [
-      createDiffHighlightExtension(),
-      view.EditorView.theme({
-        "&.cm-editor": {
-          height: "100%",
-          backgroundColor: deleted ? colors__default.default.error[100] : colors__default.default.neutral[50],
-          outline: "none"
-        },
-        ".cm-gutters": {
-          backgroundColor: deleted ? colors__default.default.error[200] : colors__default.default.neutral[100]
-        },
-        "*": { lineHeight: `${LINE_HEIGHT_PX}px` },
-        ".cm-lineNumbers .cm-gutterElement": { padding: "0 0 0 25px" }
-      }),
+      diffHighlightExtension,
+      themeExtension,
       // Recalc viewport after every doc change so late-settling layouts (alerts
       // appearing above the editor) don't leave trailing lines blank.
       view.EditorView.updateListener.of((update) => {
@@ -1715,7 +1789,7 @@ var MergePane = ({
         }
       })
     ],
-    [deleted]
+    [diffHighlightExtension, themeExtension]
   );
   react.useEffect(() => {
     const view = editorRef.current?.view;