diff --git a/packages/configuration-builder/src/TokensSection/BrandTokens.tsx b/packages/configuration-builder/src/TokensSection/BrandTokens.tsx
new file mode 100644
index 000000000..90d9a2804
--- /dev/null
+++ b/packages/configuration-builder/src/TokensSection/BrandTokens.tsx
@@ -0,0 +1,104 @@
+import {
+ AreaLoader,
+ BentoThemeProvider,
+ BentoTokens,
+ Body,
+ Box,
+ Column,
+ Columns,
+ SliderField,
+ Stack,
+ unsafeLocalizedString,
+ DecorativeDivider,
+ Headline,
+} from "@buildo/bento-design-system";
+import { ColorTokenField } from "./ColorTokenField";
+import { useTranslation } from "react-i18next";
+
+type Props = {
+ tokens: BentoTokens;
+ onChange: (value: BentoTokens["brandColor"]) => void;
+};
+
+export function BrandTokens(props: Props) {
+ const { t } = useTranslation();
+
+ return (
+
+ {t("TokensSection.Step.brand")}
+
+
+
+
+ props.onChange({ ...props.tokens.brandColor, brandPrimary: value })
+ }
+ />
+
+ props.onChange({
+ ...props.tokens.brandColor,
+ brandSecondary: value,
+ })
+ }
+ />
+
+ props.onChange({
+ ...props.tokens.brandColor,
+ brandTertiary: value,
+ })
+ }
+ />
+
+
+
+
+
+
+
+ {t("Component.decorativeDivider")}
+
+
+
+
+
+ {t("Component.areaLoader")}
+
+
+
+
+
+
+
+ {t("Component.sliderField")}
+
+ {}}
+ />
+
+
+
+
+
+
+ );
+}
diff --git a/packages/configuration-builder/src/TokensSection/ColorTokenField.tsx b/packages/configuration-builder/src/TokensSection/ColorTokenField.tsx
new file mode 100644
index 000000000..9fc1ccf8c
--- /dev/null
+++ b/packages/configuration-builder/src/TokensSection/ColorTokenField.tsx
@@ -0,0 +1,29 @@
+import { Box, Column, Columns, LocalizedString, Stack, Title } from "@buildo/bento-design-system";
+import { useConfiguratorStatusContext } from "../ConfiguratorStatusContext";
+import { useTranslation } from "react-i18next";
+import { ColorPickerField } from "../ColorPickerField/ColorPickerField";
+
+export function ColorTokenField(props: {
+ label: LocalizedString;
+ value: string;
+ onChange: (value: string) => void;
+}) {
+ const { theme } = useConfiguratorStatusContext();
+ const { t } = useTranslation();
+ return (
+
+
+
+
+
+ {props.label}
+
+
+
+ );
+}
diff --git a/packages/configuration-builder/src/TokensSection/TokensSection.tsx b/packages/configuration-builder/src/TokensSection/TokensSection.tsx
index 4abe983e9..6524cfd16 100644
--- a/packages/configuration-builder/src/TokensSection/TokensSection.tsx
+++ b/packages/configuration-builder/src/TokensSection/TokensSection.tsx
@@ -1,126 +1,34 @@
-import {
- AreaLoader,
- BentoThemeProvider,
- Body,
- Box,
- Column,
- Columns,
- DecorativeDivider,
- LocalizedString,
- SliderField,
- Stack,
- Title,
- unsafeLocalizedString,
-} from "@buildo/bento-design-system";
import { ConfiguratorSection } from "../ConfiguratorSection/ConfiguratorSection";
import { useConfiguratorStatusContext } from "../ConfiguratorStatusContext";
-import { ColorPickerField } from "../ColorPickerField/ColorPickerField";
import { useTranslation } from "react-i18next";
-
-function ColorTokenField(props: {
- label: LocalizedString;
- value: string;
- onChange: (value: string) => void;
-}) {
- const { theme } = useConfiguratorStatusContext();
- const { t } = useTranslation();
- return (
-
-
-
-
-
- {props.label}
-
-
-
- );
-}
+import { useState } from "react";
+import { BrandTokens } from "./BrandTokens";
+import { match } from "ts-pattern";
export function TokensSection() {
const { theme, setTheme } = useConfiguratorStatusContext();
const { t } = useTranslation();
- const tokens = theme.tokens;
- const setTokens = (tokens: typeof theme.tokens) => setTheme({ ...theme, tokens });
+ const steps = ["brand" as const];
+ const [currentStep] = useState<(typeof steps)[0]>("brand");
+ const currentStepIndex = steps.indexOf(currentStep);
return (
-
-
-
-
-
- setTokens({ ...tokens, brandColor: { ...tokens.brandColor, brandPrimary: value } })
- }
- />
-
- setTokens({
- ...tokens,
- brandColor: { ...tokens.brandColor, brandSecondary: value },
- })
- }
- />
-
- setTokens({ ...tokens, brandColor: { ...tokens.brandColor, brandTertiary: value } })
- }
- />
-
-
-
-
-
-
-
- {t("Component.decorativeDivider")}
-
-
-
-
-
- {t("Component.areaLoader")}
-
-
-
-
-
-
-
- {t("Component.sliderField")}
-
- {}}
- />
-
-
-
-
-
+ ({ label: t(`TokensSection.Step.${step}`) }))}
+ currentStep={currentStepIndex}
+ >
+ {match(currentStep)
+ .with("brand", () => (
+
+ setTheme({ ...theme, tokens: { ...theme.tokens, brandColor: brandTokens } })
+ }
+ />
+ ))
+ .exhaustive()}
);
}
diff --git a/packages/configuration-builder/src/locales/en.json b/packages/configuration-builder/src/locales/en.json
index de67f141c..889110e9c 100644
--- a/packages/configuration-builder/src/locales/en.json
+++ b/packages/configuration-builder/src/locales/en.json
@@ -93,6 +93,7 @@
"Tokens.Color.label": "Color",
"Component.decorativeDivider": "Decorative Divider",
"Component.areaLoader": "Area Loader",
- "Component.sliderField": "Slider Field"
+ "Component.sliderField": "Slider Field",
+ "TokensSection.Step.brand": "Brand"
}
}