chore: change configs

Author: plagoa

apps/docs/src/content/generator/Colors.tsx

@@ -12,6 +12,7 @@ import { useGeneratorContext } from "./GeneratorContext";
 
 const colorsToDisplay = [
   "bgPage",
+  "bgContainer",
   "positive",
   "negative",
   "warning",

apps/docs/src/content/generator/Dialogs/ColorsConfig.tsx

@@ -9,6 +9,7 @@ import {
   HvDialogContent,
   HvDialogTitle,
   HvTypography,
+  useTheme,
 } from "@hitachivantara/uikit-react-core";
 
 import { useGeneratorContext } from "../GeneratorContext";
@@ -24,6 +25,7 @@ export const ColorsConfig = ({
     Record<string, string>
   >({});
 
+  const { activeTheme } = useTheme();
   const { customTheme, updateCustomTheme, colorMode } = useGeneratorContext();
 
   const handleSave = useCallback(() => {
@@ -37,24 +39,27 @@ export const ColorsConfig = ({
       },
     });
     setOpen(false);
-  }, [
-    localColorValues,
-    // customTheme.colors,
-    updateCustomTheme,
-    setOpen,
-    colorMode,
-  ]);
+  }, [localColorValues, updateCustomTheme, setOpen, colorMode]);
+
+  const handleReset = useCallback(() => {
+    setlocalColorValues(activeTheme?.colors.modes[colorMode] || {});
+  }, [activeTheme, colorMode]);
 
   return (
     <HvDialog
       open={open}
       onClose={() => setOpen((p) => !p)}
-      maxWidth="xs"
+      maxWidth="md"
       fullWidth
     >
       <HvDialogTitle>Radius Settings</HvDialogTitle>
       <HvDialogContent>
-        <div className="gap-[var(--uikit-space-xxs)]">
+        <div
+          className="grid grid-auto-flow-col grid-cols-2 gap-x-[var(--uikit-space-lg)] gap-y-0"
+          style={{
+            gridTemplateRows: `repeat(${Math.ceil(colorTokens.length / 2)}, auto)`,
+          }}
+        >
           {colorTokens.map((c) => (
             <div
               key={c}
@@ -77,6 +82,10 @@ export const ColorsConfig = ({
         </div>
       </HvDialogContent>
       <HvDialogActions>
+        <HvButton variant="ghost" onClick={handleReset}>
+          Reset to Defaults
+        </HvButton>
+        <div className="flex-1" />
         <HvButton variant="secondarySubtle" onClick={() => setOpen(false)}>
           Cancel
         </HvButton>
@@ -137,4 +146,16 @@ const colorTokens = [
   "bgPageSecondary",
   "bgContainerSecondary",
   "bgDisabled",
+  "cat1",
+  "cat2",
+  "cat3",
+  "cat4",
+  "cat5",
+  "cat6",
+  "cat7",
+  "cat8",
+  "cat9",
+  "cat10",
+  "cat11",
+  "cat12",
 ];

apps/docs/src/content/generator/Dialogs/RadiiConfig.tsx

@@ -9,6 +9,7 @@ import {
   HvDialogTitle,
   HvInput,
   HvTypography,
+  useTheme,
 } from "@hitachivantara/uikit-react-core";
 
 import { useGeneratorContext } from "../GeneratorContext";
@@ -26,6 +27,7 @@ export const RadiiConfig = ({
     Record<string, string>
   >({});
 
+  const { activeTheme } = useTheme();
   const { customTheme, updateCustomTheme } = useGeneratorContext();
 
   const handleSave = useCallback(() => {
@@ -37,6 +39,10 @@ export const RadiiConfig = ({
     setOpen(false);
   }, [localRadiiValues, updateCustomTheme, setOpen]);
 
+  const handleReset = useCallback(() => {
+    setLocalRadiiValues(activeTheme?.radii || {});
+  }, [activeTheme]);
+
   return (
     <HvDialog
       open={open}
@@ -72,6 +78,10 @@ export const RadiiConfig = ({
         </div>
       </HvDialogContent>
       <HvDialogActions>
+        <HvButton variant="ghost" onClick={handleReset}>
+          Reset to Defaults
+        </HvButton>
+        <div className="flex-1" />
         <HvButton variant="secondarySubtle" onClick={() => setOpen(false)}>
           Cancel
         </HvButton>

apps/docs/src/content/generator/Dialogs/SpacingConfig.tsx

@@ -9,6 +9,7 @@ import {
   HvDialogTitle,
   HvInput,
   HvTypography,
+  useTheme,
 } from "@hitachivantara/uikit-react-core";
 
 import { useGeneratorContext } from "../GeneratorContext";
@@ -26,6 +27,7 @@ export const SpacingConfig = ({
     Record<string, string>
   >({});
 
+  const { activeTheme } = useTheme();
   const { customTheme, updateCustomTheme } = useGeneratorContext();
 
   const handleSave = useCallback(() => {
@@ -37,6 +39,10 @@ export const SpacingConfig = ({
     setOpen(false);
   }, [localSpacingValues, updateCustomTheme, setOpen]);
 
+  const handleReset = useCallback(() => {
+    setLocalSpacingValues(activeTheme?.space || {});
+  }, [activeTheme]);
+
   return (
     <HvDialog
       open={open}
@@ -72,6 +78,10 @@ export const SpacingConfig = ({
         </div>
       </HvDialogContent>
       <HvDialogActions>
+        <HvButton variant="ghost" onClick={handleReset}>
+          Reset to Defaults
+        </HvButton>
+        <div className="flex-1" />
         <HvButton variant="secondarySubtle" onClick={() => setOpen(false)}>
           Cancel
         </HvButton>

apps/docs/src/content/generator/Generator.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { HvProvider } from "@hitachivantara/uikit-react-core";
+import { HvVizProvider } from "@hitachivantara/uikit-react-viz";
 
 import { ActiveUsers } from "../../components/home/cards/ActiveUsers";
 import { ApiUsage } from "../../components/home/cards/ApiUsage";
@@ -34,26 +35,28 @@ const GeneratorInternal = () => {
           rootElementId="generator-root"
           cssTheme="scoped"
         >
-          <div className="flex-1 bg-bgPage border-border border-rounded-round">
-            <div className="grid xs:grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 gap-[var(--uikit-space-md)] p-md mx-auto">
-              <div className="flex flex-col gap-[var(--uikit-space-md)]">
-                <DataInsights />
-                <Orders />
-                <DataProcessing />
-              </div>
-              <div className="flex flex-col gap-[var(--uikit-space-md)]">
-                <FinancialPerformance />
-                <StorageOverview />
-                <DataConfig />
-              </div>
-              <div className="flex flex-col gap-[var(--uikit-space-md)]">
-                <ApiUsage />
-                <DataSecurity />
-                <TeamOverview />
-                <ActiveUsers />
+          <HvVizProvider>
+            <div className="flex-1 bg-bgPage border-border border-rounded-round">
+              <div className="grid xs:grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 gap-[var(--uikit-space-md)] p-md mx-auto">
+                <div className="flex flex-col gap-[var(--uikit-space-md)]">
+                  <DataInsights />
+                  <Orders />
+                  <DataProcessing />
+                </div>
+                <div className="flex flex-col gap-[var(--uikit-space-md)]">
+                  <FinancialPerformance />
+                  <StorageOverview />
+                  <DataConfig />
+                </div>
+                <div className="flex flex-col gap-[var(--uikit-space-md)]">
+                  <ApiUsage />
+                  <DataSecurity />
+                  <TeamOverview />
+                  <ActiveUsers />
+                </div>
               </div>
             </div>
-          </div>
+          </HvVizProvider>
         </HvProvider>
       </div>
     </div>