@keboola/design 3.2.0 → 3.2.3

package/dist/index.d.cts

@@ -2687,8 +2687,8 @@ type AddonVariant = ComponentProps<typeof BadgeAddon>['variant'];
 type BadgeRootProps = ComponentProps<typeof BadgeRoot>;
 type BadgeLabelProps = ComponentProps<typeof BadgeLabel>;
 /**
- * Props for `Badge`. `color` is a categorical contract (`green` = success, `red` = error, `yellow` = warning,
- * `purple/cyan/teal/pink/blue/gray` for decorative tags) — colours stay fixed across brand themes.
+ * Props for `Badge`. `color` is a categorical contract (`green` = success, `red` = error, `orange` = warning,
+ * `purple/cyan/teal/blue/gray` for decorative tags) — colours stay fixed across brand themes.
  * Pass `prefix` / `suffix` for icon-style addons.
  */
 type Props$Q = Pick<BadgeRootProps, 'variant' | 'color'> & Omit<BadgeLabelProps, 'prefix'> & {
@@ -10455,6 +10455,8 @@ declare const themeToolbarBrands: {
         primaryForeground: string;
         destructive: string;
         destructiveForeground: string;
+        accent?: string | undefined;
+        accentForeground?: string | undefined;
     };
     shell: "sidebar" | "topnav";
     colorsDark?: {
@@ -10467,6 +10469,28 @@ declare const themeToolbarBrands: {
         primaryForeground: string;
         destructive: string;
         destructiveForeground: string;
+        accent?: string | undefined;
+        accentForeground?: string | undefined;
+    } | undefined;
+    sidebarColors?: {
+        sidebar?: string | undefined;
+        sidebarForeground?: string | undefined;
+        sidebarPrimary?: string | undefined;
+        sidebarPrimaryForeground?: string | undefined;
+        sidebarAccent?: string | undefined;
+        sidebarAccentForeground?: string | undefined;
+        sidebarBorder?: string | undefined;
+        sidebarRing?: string | undefined;
+    } | undefined;
+    sidebarColorsDark?: {
+        sidebar?: string | undefined;
+        sidebarForeground?: string | undefined;
+        sidebarPrimary?: string | undefined;
+        sidebarPrimaryForeground?: string | undefined;
+        sidebarAccent?: string | undefined;
+        sidebarAccentForeground?: string | undefined;
+        sidebarBorder?: string | undefined;
+        sidebarRing?: string | undefined;
     } | undefined;
     typography?: {
         fontFamily: string;

package/dist/index.d.ts

@@ -2687,8 +2687,8 @@ type AddonVariant = ComponentProps<typeof BadgeAddon>['variant'];
 type BadgeRootProps = ComponentProps<typeof BadgeRoot>;
 type BadgeLabelProps = ComponentProps<typeof BadgeLabel>;
 /**
- * Props for `Badge`. `color` is a categorical contract (`green` = success, `red` = error, `yellow` = warning,
- * `purple/cyan/teal/pink/blue/gray` for decorative tags) — colours stay fixed across brand themes.
+ * Props for `Badge`. `color` is a categorical contract (`green` = success, `red` = error, `orange` = warning,
+ * `purple/cyan/teal/blue/gray` for decorative tags) — colours stay fixed across brand themes.
  * Pass `prefix` / `suffix` for icon-style addons.
  */
 type Props$Q = Pick<BadgeRootProps, 'variant' | 'color'> & Omit<BadgeLabelProps, 'prefix'> & {
@@ -10455,6 +10455,8 @@ declare const themeToolbarBrands: {
         primaryForeground: string;
         destructive: string;
         destructiveForeground: string;
+        accent?: string | undefined;
+        accentForeground?: string | undefined;
     };
     shell: "sidebar" | "topnav";
     colorsDark?: {
@@ -10467,6 +10469,28 @@ declare const themeToolbarBrands: {
         primaryForeground: string;
         destructive: string;
         destructiveForeground: string;
+        accent?: string | undefined;
+        accentForeground?: string | undefined;
+    } | undefined;
+    sidebarColors?: {
+        sidebar?: string | undefined;
+        sidebarForeground?: string | undefined;
+        sidebarPrimary?: string | undefined;
+        sidebarPrimaryForeground?: string | undefined;
+        sidebarAccent?: string | undefined;
+        sidebarAccentForeground?: string | undefined;
+        sidebarBorder?: string | undefined;
+        sidebarRing?: string | undefined;
+    } | undefined;
+    sidebarColorsDark?: {
+        sidebar?: string | undefined;
+        sidebarForeground?: string | undefined;
+        sidebarPrimary?: string | undefined;
+        sidebarPrimaryForeground?: string | undefined;
+        sidebarAccent?: string | undefined;
+        sidebarAccentForeground?: string | undefined;
+        sidebarBorder?: string | undefined;
+        sidebarRing?: string | undefined;
     } | undefined;
     typography?: {
         fontFamily: string;

package/dist/index.js

@@ -10299,6 +10299,29 @@ var brandToCssVars = (brand, resolvedMode) => {
     vars["--color-primary-foreground"] = colors8.primaryForeground;
     vars["--color-destructive"] = colors8.destructive;
     vars["--color-destructive-foreground"] = colors8.destructiveForeground;
+    if (colors8.accent !== void 0) vars["--color-accent"] = colors8.accent;
+    if (colors8.accentForeground !== void 0)
+      vars["--color-accent-foreground"] = colors8.accentForeground;
+  }
+  const sidebar = resolvedMode === "dark" ? brand.sidebarColorsDark : brand.sidebarColors;
+  if (sidebar) {
+    const sidebarVars = {
+      "--color-sidebar": sidebar.sidebar,
+      "--color-sidebar-foreground": sidebar.sidebarForeground,
+      "--color-sidebar-primary": sidebar.sidebarPrimary,
+      "--color-sidebar-primary-foreground": sidebar.sidebarPrimaryForeground,
+      "--color-sidebar-accent": sidebar.sidebarAccent,
+      "--color-sidebar-accent-foreground": sidebar.sidebarAccentForeground,
+      "--color-sidebar-border": sidebar.sidebarBorder,
+      "--color-sidebar-ring": sidebar.sidebarRing
+    };
+    for (const [name, value] of Object.entries(sidebarVars)) {
+      if (value !== void 0) vars[name] = value;
+    }
+  }
+  const fontFamily = brand.typography?.fontFamily?.trim();
+  if (fontFamily) {
+    vars["--font-sans"] = fontFamily;
   }
   if (brand.radii) {
     vars["--radius-sm"] = brand.radii.sm;
@@ -10386,7 +10409,7 @@ var useTheme = () => {
   const context = use(ThemeContext);
   if (context === null) {
     throw new Error(
-      "useTheme must be used within a <ThemeProvider>. Wrap your app root with <ThemeProvider brand={...}> from @keboola/design."
+      "useTheme must be used within a <ThemeProvider>. Wrap your app root with <ThemeProvider> from @keboola/design."
     );
   }
   return context;
@@ -10395,7 +10418,7 @@ var useColorScheme = () => {
   const context = use(ThemeContext);
   if (context === null) {
     throw new Error(
-      "useColorScheme must be used within a <ThemeProvider>. Wrap your app root with <ThemeProvider colorScheme={...}> from @keboola/design."
+      "useColorScheme must be used within a <ThemeProvider>. Wrap your app root with <ThemeProvider> from @keboola/design."
     );
   }
   return { colorScheme: context.colorScheme, resolvedMode: context.resolvedMode };