@keboola/design 4.4.0 → 5.0.0

package/dist/editors.js

@@ -1,4 +1,4 @@
-import { createContext, forwardRef, useMemo, useRef, useEffect, useCallback, useState, use, Children, Fragment as Fragment$1 } from 'react';
+import { createContext, forwardRef, useMemo, useRef, useEffect, useCallback, useSyncExternalStore, useState, use, Children, Fragment as Fragment$1 } from 'react';
 import { completeAnyWord, autocompletion } from '@codemirror/autocomplete';
 import { jsonParseLinter, json } from '@codemirror/lang-json';
 import { linter } from '@codemirror/lint';
@@ -9,7 +9,7 @@ import { clsx } from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
 import { Root as Root$1, Trigger, Portal, Content } from '@radix-ui/react-tooltip';
 import { cva } from 'class-variance-authority';
-import { keboolaLegacy } from '@keboola/brand-registry';
+import { keboolaLegacySidebar, keboolaLegacyTopnav } from '@keboola/brand-registry';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Root, Slottable } from '@radix-ui/react-slot';
 import * as lucide_react_star from 'lucide-react';
@@ -59,13 +59,39 @@ var cn = (...classes) => twMerge(clsx(...classes));
 var copyToClipboard = (text) => {
   return navigator.clipboard.writeText(text);
 };
-var ThemeContext = createContext(null);
 
-// src/components/internal/useIsLegacyBrand.ts
-var useIsLegacyBrand = () => {
-  const context = use(ThemeContext);
-  return context === null || context.brand.id === 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
+[keboolaLegacySidebar.id, 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
 };
+createContext(defaultContext);
+var ArgoDesignContext = createContext(true);
+var useArgoDesign = () => use(ArgoDesignContext);
 var tooltipVariants = cva(
   [
     "tailwindcss-preflight",
@@ -143,8 +169,7 @@ var TooltipContent = ({
   placement = "right",
   ...rest
 }) => {
-  const isLegacy = useIsLegacyBrand();
-  const renderArgo = !isLegacy;
+  const renderArgo = useArgoDesign();
   const handlePointerDownOutside = (event) => {
     if (keepOpenOnPointerDownOutside) event.preventDefault();
     onPointerDownOutside?.(event);
@@ -274,7 +299,7 @@ var helpVariants = 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"]
     }
   }
 });
@@ -326,8 +351,8 @@ var variants = 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
@@ -522,14 +547,14 @@ var argoVariants = 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: [
@@ -546,20 +571,22 @@ var argoVariants = 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: [
@@ -567,7 +594,7 @@ var argoVariants = 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: {
@@ -602,8 +629,7 @@ var Button = ({
   block = false,
   ...buttonProps
 }) => {
-  const isLegacy = useIsLegacyBrand();
-  const renderArgo = !isLegacy;
+  const renderArgo = useArgoDesign();
   const Comp = asChild ? Root : "button";
   const isIconOnly = String(size).startsWith("icon");
   const classNames = renderArgo ? argoVariants({ variant, size, block, className }) : variants({ size, variant, block, className });
@@ -730,15 +756,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 = () => useSyncExternalStore(subscribeThemeSignal, readThemeSignal, () => SSR_SIGNAL);
+var useThemedExtension = (build, deps = []) => {
+  const themeSignal = useThemeSignal();
+  return useMemo(build, [themeSignal, ...deps]);
+};
+
+// src/components/CodeEditor/helpers.ts
+var buildBaseThemeStyles = () => ({
   "*": { lineHeight: "20px" },
   "*::selection": {
-    backgroundColor: colors.secondary[500],
-    color: `${colors.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.neutral[150] },
   '&.cm-editor:has(.cm-content[contenteditable="false"]) .cm-gutters': {
-    backgroundColor: colors.neutral[200]
+    backgroundColor: resolveToken("border", "229 231 235")
   },
   "&.cm-editor .cm-scroller": { overflowAnchor: "none" },
   "&.cm-editor, &.cm-editor .cm-scroller": {
@@ -754,11 +809,11 @@ var baseThemeStyles = {
   ".cm-line .tok-string": { color: colors.warning[700] },
   // merge (diff) view
   '&[class*="cm-merge-"] .cm-deletedLine': { backgroundColor: colors.error[100] },
-  '&[class*="cm-merge-"] .cm-changedLine': { backgroundColor: colors.primary[100] },
+  '&[class*="cm-merge-"] .cm-changedLine': { backgroundColor: colors.green[100] },
   '&[class*="cm-merge-"] .cm-deletedLineGutter': { backgroundColor: colors.error[200] },
-  '&[class*="cm-merge-"] .cm-changedLineGutter': { backgroundColor: colors.primary[200] },
+  '&[class*="cm-merge-"] .cm-changedLineGutter': { backgroundColor: colors.green[200] },
   '&[class*="cm-merge-"] .cm-deletedText': { background: colors.error[200] },
-  '&[class*="cm-merge-"] .cm-changedText': { background: colors.primary[200] },
+  '&[class*="cm-merge-"] .cm-changedText': { background: colors.green[200] },
   '&[class*="cm-merge-"]': {
     backgroundColor: `${colors.white} !important`
   },
@@ -767,16 +822,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 = githubLightInit({
+var buildCustomTheme = () => githubLightInit({
   settings: {
     fontFamily: `'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New'`,
-    background: colors.neutral[50],
-    gutterBackground: colors.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.secondary[500]
+    selection: resolveToken("primary", "31 143 255")
   }
 });
 var getLanguageMode = (mode) => {
@@ -894,6 +951,8 @@ var CodeEditor = ({
   renderAdditionalButtons,
   className
 }) => {
+  const customTheme = useThemedExtension(buildCustomTheme);
+  const baseTheme = useThemedExtension(() => EditorView.theme(buildBaseThemeStyles()));
   const commonExtensions = useMemo(() => {
     return [
       getLanguageMode(mode),
@@ -913,9 +972,9 @@ var CodeEditor = ({
         }))
       ),
       autocompletion({ activateOnTyping: completeAny }),
-      EditorView.theme(baseThemeStyles)
+      baseTheme
     ].filter(Boolean);
-  }, [autocompletions, completeAny, extraKeys, mode, withLineWrapping]);
+  }, [autocompletions, completeAny, extraKeys, mode, withLineWrapping, baseTheme]);
   const extensions = useMemo(() => {
     return [
       ...commonExtensions,
@@ -1130,19 +1189,19 @@ var activeQueryHighlight = (splitQueries) => {
     ),
     EditorView.baseTheme({
       ".cm-active-query": {
-        boxShadow: `inset -1px 0 0 0 ${colors.secondary[300]}, inset 1px 0 0 0 ${colors.secondary[300]}`,
+        boxShadow: `inset -1px 0 0 0 ${colors.blue[300]}, inset 1px 0 0 0 ${colors.blue[300]}`,
         marginRight: "8px"
       },
       ".cm-active-query-first": {
-        boxShadow: `inset -1px 0 0 0 ${colors.secondary[300]}, inset 1px 0 0 0 ${colors.secondary[300]}, inset 0 1px 0 0 ${colors.secondary[300]}`,
+        boxShadow: `inset -1px 0 0 0 ${colors.blue[300]}, inset 1px 0 0 0 ${colors.blue[300]}, inset 0 1px 0 0 ${colors.blue[300]}`,
         borderRadius: "4px 4px 0 0"
       },
       ".cm-active-query-last": {
-        boxShadow: `inset -1px 0 0 0 ${colors.secondary[300]}, inset 1px 0 0 0 ${colors.secondary[300]}, inset 0 -1px 0 0 ${colors.secondary[300]}`,
+        boxShadow: `inset -1px 0 0 0 ${colors.blue[300]}, inset 1px 0 0 0 ${colors.blue[300]}, inset 0 -1px 0 0 ${colors.blue[300]}`,
         borderRadius: "0 0 4px 4px"
       },
       ".cm-active-query-first.cm-active-query-last": {
-        boxShadow: `inset 0 0 0 1px ${colors.secondary[300]}`,
+        boxShadow: `inset 0 0 0 1px ${colors.blue[300]}`,
         borderRadius: "4px"
       }
     })
@@ -1256,13 +1315,13 @@ var highlightedLinesTheme = EditorView.baseTheme({
   ".cm-highlight-marker": {
     width: "2px",
     height: "100%",
-    backgroundColor: colors.secondary[500]
+    backgroundColor: colors.blue[500]
   },
   ".cm-error-line": {
     backgroundColor: `${colors.error[100]} !important`
   },
   ".cm-processing-line": {
-    backgroundColor: `${colors.secondary[100]} !important`
+    backgroundColor: `${colors.blue[100]} !important`
   }
 });
 function highlightingExtension(queryParser) {
@@ -1366,13 +1425,13 @@ var searchViewPlugin = ViewPlugin.fromClass(
 );
 var searchTheme = EditorView.baseTheme({
   ".cm-searchMatch": {
-    backgroundColor: colors.secondary[100]
+    backgroundColor: colors.blue[100]
   },
   ".cm-searchMatch > span": {
-    color: `${colors.secondary[600]} !important`
+    color: `${colors.blue[600]} !important`
   },
   ".cm-searchMatch-selected": {
-    backgroundColor: colors.secondary[600]
+    backgroundColor: colors.blue[600]
   },
   ".cm-searchMatch-selected > span": {
     color: `${colors.white} !important`
@@ -1400,29 +1459,31 @@ var CUSTOM_KEYMAP = [
     }
   }
 ];
-var theme = {
-  ...baseThemeStyles,
+var buildTheme = () => ({
+  ...buildBaseThemeStyles(),
   "&.cm-editor": {
     border: "solid 1px transparent",
-    background: colors.white,
+    background: resolveToken("card", "255 255 255"),
     borderRadius: "8px",
     paddingTop: "8px",
     paddingBottom: "8px"
   },
   '&.cm-editor:has(.cm-content[contenteditable="true"]):hover': {
-    borderColor: colors.secondary[500]
+    borderColor: resolveToken("ring", "31 143 255")
   },
   '&.cm-editor:has(.cm-content[contenteditable="true"]):focus-within': {
-    borderColor: colors.secondary[500],
-    boxShadow: `0 0 0 4px ${colors.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.white },
-  '&.cm-editor:has(.cm-content[contenteditable="false"])': { background: colors.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.neutral[100]
+    background: resolveToken("muted", "241 245 249")
   }
-};
+});
 var SqlEditor = ({
   value,
   onChange,
@@ -1448,6 +1509,8 @@ var SqlEditor = ({
   dialect
 }) => {
   const editorRef = useRef(null);
+  const customTheme = useThemedExtension(buildCustomTheme);
+  const themeExtension = useThemedExtension(() => EditorView$1.theme(buildTheme()));
   const extensions = useMemo(() => {
     const baseKeymap = [...defaultKeymap, ...CUSTOM_KEYMAP];
     return [
@@ -1456,7 +1519,7 @@ var SqlEditor = ({
       ...installExtensions({ schema, defaultDatabase, defaultSchema, variables, dialect }),
       searchExtension(),
       highlightingExtension(queryParser),
-      EditorView$1.theme(theme),
+      themeExtension,
       onBlurEditor ? EditorView$1.domEventHandlers({ blur: (_, view) => onBlurEditor(view) }) : [],
       onFocusEditor ? EditorView$1.domEventHandlers({ focus: (_, view) => onFocusEditor(view) }) : []
     ];
@@ -1469,7 +1532,8 @@ var SqlEditor = ({
     variables,
     dialect,
     onBlurEditor,
-    onFocusEditor
+    onFocusEditor,
+    themeExtension
   ]);
   const defaultSetup = useMemo(() => {
     return { ...BASIS_SETUP2, lineNumbers };
@@ -1630,23 +1694,23 @@ var createDiffHighlightExtension = () => {
       gutterLineClass.from(f, (val) => val.gutterMarkers)
     ]
   });
-  const theme2 = EditorView.theme({
+  const theme = EditorView.theme({
     ".cm-merge-safe-line": {
-      backgroundColor: `${colors.primary[100]} !important`,
-      boxShadow: `inset 3px 0 0 ${colors.primary[500]}`
+      backgroundColor: `${colors.green[100]} !important`,
+      boxShadow: `inset 3px 0 0 ${colors.green[500]}`
     },
     ".cm-merge-conflict-line": {
       backgroundColor: `${colors.warning[100]} !important`,
       boxShadow: `inset 3px 0 0 ${colors.warning[500]}`
     },
     ".cm-merge-safe-gutter": {
-      backgroundColor: `${colors.primary[200]} !important`
+      backgroundColor: `${colors.green[200]} !important`
     },
     ".cm-merge-conflict-gutter": {
       backgroundColor: `${colors.warning[200]} !important`
     }
   });
-  return [field, theme2];
+  return [field, theme];
 };
 var updateHighlightedLines = (view, lines, classification) => {
   view.dispatch({ effects: setHighlightedLines.of({ lines, classification }) });
@@ -1666,21 +1730,31 @@ var MergePane = ({
   deleted = false
 }) => {
   const editorRef = useRef(null);
+  const themeExtension = useThemedExtension(
+    () => EditorView.theme({
+      "&.cm-editor": {
+        height: "100%",
+        backgroundColor: deleted ? colors.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.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 = useMemo(() => createDiffHighlightExtension(), []);
   const extensions = useMemo(
     () => [
-      createDiffHighlightExtension(),
-      EditorView.theme({
-        "&.cm-editor": {
-          height: "100%",
-          backgroundColor: deleted ? colors.error[100] : colors.neutral[50],
-          outline: "none"
-        },
-        ".cm-gutters": {
-          backgroundColor: deleted ? colors.error[200] : colors.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.
       EditorView.updateListener.of((update) => {
@@ -1689,7 +1763,7 @@ var MergePane = ({
         }
       })
     ],
-    [deleted]
+    [diffHighlightExtension, themeExtension]
   );
   useEffect(() => {
     const view = editorRef.current?.view;