Implement brand tokens section

buildo · Sep 26, 2023 · 505d4c4 · 505d4c4
1 parent 2af189f
commit 505d4c4
Show file tree

Hide file tree

Showing 6 changed files with 152 additions and 8 deletions.
diff --git a/packages/configuration-builder/src/ConfiguratorStatusContext.tsx b/packages/configuration-builder/src/ConfiguratorStatusContext.tsx
@@ -1,6 +1,6 @@
 import { createContext, useContext, useState } from "react";
 import { defaultColorConfig } from "./ColorsSection/defaultColor";
-import { Children, defaultTokens } from "@buildo/bento-design-system";
+import { BentoTokens, Children, defaultTokens } from "@buildo/bento-design-system";
 import { HexColor } from "./utils/colorUtils";
 import { ColorConfig } from "./ColorEditor/ColorEditor";
 
@@ -33,9 +33,10 @@ export type ThemeConfig = {
       pink: ColorConfig;
     };
   };
+  tokens: BentoTokens;
 };
 
-export type ThemeSection = "colors";
+export type ThemeSection = "colors" | "tokens";
 
 type ConfiguratorStatus = {
   theme: ThemeConfig;
@@ -75,10 +76,12 @@ export function ConfiguratorStatusProvider(props: { children: Children }) {
         pink: defaultColorConfig(defaultTokens.dataVisualizationColor.brightPink as HexColor),
       },
     },
+    tokens: defaultTokens,
   });
 
   const [sections, setSections] = useState<ConfiguratorStatus["sections"]>({
     colors: false,
+    tokens: false,
   });
 
   return (

diff --git a/packages/configuration-builder/src/MyTheme.tsx b/packages/configuration-builder/src/MyTheme.tsx
@@ -129,7 +129,8 @@ export function MyTheme() {
               name={t("Theme.Foundations.Tokens.title")}
               description={t("Theme.Foundations.Tokens.description")}
               icon={IconCards}
-              disabled
+              kind={sections.tokens ? "done" : "todo"}
+              onClick={() => navigate("/theme/tokens")}
             />
           </Stack>
         </MainColumn>

diff --git a/packages/configuration-builder/src/TokensSection/TokensSection.tsx b/packages/configuration-builder/src/TokensSection/TokensSection.tsx
@@ -0,0 +1,126 @@
+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 (
+    <Columns space={24} alignY="stretch">
+      <Column width="content">
+        <Box borderRadius={16} height="full" style={{ background: props.value, width: 64 }} />
+      </Column>
+      <Stack space={8}>
+        <Title size="medium">{props.label}</Title>
+        <ColorPickerField
+          colors={theme.colors}
+          label={t("Tokens.Color.label")}
+          value={props.value}
+          onChange={props.onChange}
+        />
+      </Stack>
+    </Columns>
+  );
+}
+
+export function TokensSection() {
+  const { theme, setTheme } = useConfiguratorStatusContext();
+  const { t } = useTranslation();
+
+  const tokens = theme.tokens;
+  const setTokens = (tokens: typeof theme.tokens) => setTheme({ ...theme, tokens });
+
+  return (
+    <ConfiguratorSection title={t("Tokens.title")} steps={[]} currentStep={0}>
+      <Columns space={40} alignY="stretch">
+        <Column width="1/4">
+          <Stack space={16}>
+            <ColorTokenField
+              label={t("Tokens.Color.primary")}
+              value={tokens.brandColor.brandPrimary}
+              onChange={(value) =>
+                setTokens({ ...tokens, brandColor: { ...tokens.brandColor, brandPrimary: value } })
+              }
+            />
+            <ColorTokenField
+              label={t("Tokens.Color.secondary")}
+              value={tokens.brandColor.brandSecondary}
+              onChange={(value) =>
+                setTokens({
+                  ...tokens,
+                  brandColor: { ...tokens.brandColor, brandSecondary: value },
+                })
+              }
+            />
+            <ColorTokenField
+              label={t("Tokens.Color.tertiary")}
+              value={tokens.brandColor.brandTertiary}
+              onChange={(value) =>
+                setTokens({ ...tokens, brandColor: { ...tokens.brandColor, brandTertiary: value } })
+              }
+            />
+          </Stack>
+        </Column>
+        <Box
+          borderRadius={24}
+          padding={40}
+          background="backgroundSecondary"
+          display="flex"
+          flexDirection="column"
+          flexGrow={1}
+        >
+          <BentoThemeProvider theme={tokens}>
+            <Stack space={40}>
+              <Stack space={12}>
+                <Body size="medium" color="secondary">
+                  {t("Component.decorativeDivider")}
+                </Body>
+                <DecorativeDivider />
+              </Stack>
+              <Stack space={12}>
+                <Body size="medium" color="secondary">
+                  {t("Component.areaLoader")}
+                </Body>
+                <Box position="relative" style={{ height: 240 }}>
+                  <AreaLoader />
+                </Box>
+              </Stack>
+              <Stack space={12}>
+                <Body size="medium" color="secondary">
+                  {t("Component.sliderField")}
+                </Body>
+                <SliderField
+                  type="single"
+                  label={unsafeLocalizedString("")}
+                  value={50}
+                  minValue={0}
+                  maxValue={100}
+                  onChange={() => {}}
+                />
+              </Stack>
+            </Stack>
+          </BentoThemeProvider>
+        </Box>
+      </Columns>
+    </ConfiguratorSection>
+  );
+}
diff --git a/packages/configuration-builder/src/locales/en.json b/packages/configuration-builder/src/locales/en.json
@@ -85,6 +85,14 @@
     "DataVizColors.blue": "Blue",
     "DataVizColors.indigo": "Indigo",
     "DataVizColors.violet": "Violet",
-    "DataVizColors.pink": "Pink"
+    "DataVizColors.pink": "Pink",
+    "Tokens.title": "Tokens",
+    "Tokens.Color.primary": "Primary",
+    "Tokens.Color.secondary": "Secondary",
+    "Tokens.Color.tertiary": "Tertiary",
+    "Tokens.Color.label": "Color",
+    "Component.decorativeDivider": "Decorative Divider",
+    "Component.areaLoader": "Area Loader",
+    "Component.sliderField": "Slider Field"
   }
 }
diff --git a/packages/configuration-builder/src/main.tsx b/packages/configuration-builder/src/main.tsx
@@ -1,3 +1,8 @@
+import "@buildo/bento-design-system/index.css";
+import { sprinkles } from "./sprinkles.css";
+import "@buildo/bento-design-system/defaultTheme.css";
+import "./main.css";
+
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { BentoProvider, LinkComponentProps } from "@buildo/bento-design-system";
@@ -7,10 +12,6 @@ import { App } from "./App";
 import { ConfiguratorStatusProvider } from "./ConfiguratorStatusContext";
 
 import "./intl";
-import "@buildo/bento-design-system/index.css";
-import "@buildo/bento-design-system/defaultTheme.css";
-import "./main.css";
-import { sprinkles } from "./sprinkles.css";
 
 function LinkComponent({ href, ...props }: LinkComponentProps) {
   return (

diff --git a/packages/configuration-builder/src/router.tsx b/packages/configuration-builder/src/router.tsx
@@ -2,6 +2,7 @@ import { createBrowserRouter } from "react-router-dom";
 import { MyTheme } from "./MyTheme";
 import { Home } from "./Home";
 import { ColorsSection } from "./ColorsSection/ColorsSection";
+import { TokensSection } from "./TokensSection/TokensSection";
 
 export const router = createBrowserRouter([
   {
@@ -20,4 +21,8 @@ export const router = createBrowserRouter([
     path: "/theme/typography",
     element: null,
   },
+  {
+    path: "/theme/tokens",
+    element: <TokensSection />,
+  },
 ]);