Skip to content

Commit 505d4c4

Browse files
veejveej
committed
Implement brand tokens section
1 parent 2af189f commit 505d4c4

File tree

6 files changed

+152
-8
lines changed

6 files changed

+152
-8
lines changed

Diff for: ‎packages/configuration-builder/src/ConfiguratorStatusContext.tsx

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { createContext, useContext, useState } from "react";
22
import { defaultColorConfig } from "./ColorsSection/defaultColor";
3-
import { Children, defaultTokens } from "@buildo/bento-design-system";
3+
import { BentoTokens, Children, defaultTokens } from "@buildo/bento-design-system";
44
import { HexColor } from "./utils/colorUtils";
55
import { ColorConfig } from "./ColorEditor/ColorEditor";
66

@@ -33,9 +33,10 @@ export type ThemeConfig = {
3333
pink: ColorConfig;
3434
};
3535
};
36+
tokens: BentoTokens;
3637
};
3738

38-
export type ThemeSection = "colors";
39+
export type ThemeSection = "colors" | "tokens";
3940

4041
type ConfiguratorStatus = {
4142
theme: ThemeConfig;
@@ -75,10 +76,12 @@ export function ConfiguratorStatusProvider(props: { children: Children }) {
7576
pink: defaultColorConfig(defaultTokens.dataVisualizationColor.brightPink as HexColor),
7677
},
7778
},
79+
tokens: defaultTokens,
7880
});
7981

8082
const [sections, setSections] = useState<ConfiguratorStatus["sections"]>({
8183
colors: false,
84+
tokens: false,
8285
});
8386

8487
return (

Diff for: ‎packages/configuration-builder/src/MyTheme.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,8 @@ export function MyTheme() {
129129
name={t("Theme.Foundations.Tokens.title")}
130130
description={t("Theme.Foundations.Tokens.description")}
131131
icon={IconCards}
132-
disabled
132+
kind={sections.tokens ? "done" : "todo"}
133+
onClick={() => navigate("/theme/tokens")}
133134
/>
134135
</Stack>
135136
</MainColumn>

Diff for: ‎packages/configuration-builder/src/TokensSection/TokensSection.tsx

+126
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
import {
2+
AreaLoader,
3+
BentoThemeProvider,
4+
Body,
5+
Box,
6+
Column,
7+
Columns,
8+
DecorativeDivider,
9+
LocalizedString,
10+
SliderField,
11+
Stack,
12+
Title,
13+
unsafeLocalizedString,
14+
} from "@buildo/bento-design-system";
15+
import { ConfiguratorSection } from "../ConfiguratorSection/ConfiguratorSection";
16+
import { useConfiguratorStatusContext } from "../ConfiguratorStatusContext";
17+
import { ColorPickerField } from "../ColorPickerField/ColorPickerField";
18+
import { useTranslation } from "react-i18next";
19+
20+
function ColorTokenField(props: {
21+
label: LocalizedString;
22+
value: string;
23+
onChange: (value: string) => void;
24+
}) {
25+
const { theme } = useConfiguratorStatusContext();
26+
const { t } = useTranslation();
27+
return (
28+
<Columns space={24} alignY="stretch">
29+
<Column width="content">
30+
<Box borderRadius={16} height="full" style={{ background: props.value, width: 64 }} />
31+
</Column>
32+
<Stack space={8}>
33+
<Title size="medium">{props.label}</Title>
34+
<ColorPickerField
35+
colors={theme.colors}
36+
label={t("Tokens.Color.label")}
37+
value={props.value}
38+
onChange={props.onChange}
39+
/>
40+
</Stack>
41+
</Columns>
42+
);
43+
}
44+
45+
export function TokensSection() {
46+
const { theme, setTheme } = useConfiguratorStatusContext();
47+
const { t } = useTranslation();
48+
49+
const tokens = theme.tokens;
50+
const setTokens = (tokens: typeof theme.tokens) => setTheme({ ...theme, tokens });
51+
52+
return (
53+
<ConfiguratorSection title={t("Tokens.title")} steps={[]} currentStep={0}>
54+
<Columns space={40} alignY="stretch">
55+
<Column width="1/4">
56+
<Stack space={16}>
57+
<ColorTokenField
58+
label={t("Tokens.Color.primary")}
59+
value={tokens.brandColor.brandPrimary}
60+
onChange={(value) =>
61+
setTokens({ ...tokens, brandColor: { ...tokens.brandColor, brandPrimary: value } })
62+
}
63+
/>
64+
<ColorTokenField
65+
label={t("Tokens.Color.secondary")}
66+
value={tokens.brandColor.brandSecondary}
67+
onChange={(value) =>
68+
setTokens({
69+
...tokens,
70+
brandColor: { ...tokens.brandColor, brandSecondary: value },
71+
})
72+
}
73+
/>
74+
<ColorTokenField
75+
label={t("Tokens.Color.tertiary")}
76+
value={tokens.brandColor.brandTertiary}
77+
onChange={(value) =>
78+
setTokens({ ...tokens, brandColor: { ...tokens.brandColor, brandTertiary: value } })
79+
}
80+
/>
81+
</Stack>
82+
</Column>
83+
<Box
84+
borderRadius={24}
85+
padding={40}
86+
background="backgroundSecondary"
87+
display="flex"
88+
flexDirection="column"
89+
flexGrow={1}
90+
>
91+
<BentoThemeProvider theme={tokens}>
92+
<Stack space={40}>
93+
<Stack space={12}>
94+
<Body size="medium" color="secondary">
95+
{t("Component.decorativeDivider")}
96+
</Body>
97+
<DecorativeDivider />
98+
</Stack>
99+
<Stack space={12}>
100+
<Body size="medium" color="secondary">
101+
{t("Component.areaLoader")}
102+
</Body>
103+
<Box position="relative" style={{ height: 240 }}>
104+
<AreaLoader />
105+
</Box>
106+
</Stack>
107+
<Stack space={12}>
108+
<Body size="medium" color="secondary">
109+
{t("Component.sliderField")}
110+
</Body>
111+
<SliderField
112+
type="single"
113+
label={unsafeLocalizedString("")}
114+
value={50}
115+
minValue={0}
116+
maxValue={100}
117+
onChange={() => {}}
118+
/>
119+
</Stack>
120+
</Stack>
121+
</BentoThemeProvider>
122+
</Box>
123+
</Columns>
124+
</ConfiguratorSection>
125+
);
126+
}

Diff for: ‎packages/configuration-builder/src/locales/en.json

+9-1
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,14 @@
8585
"DataVizColors.blue": "Blue",
8686
"DataVizColors.indigo": "Indigo",
8787
"DataVizColors.violet": "Violet",
88-
"DataVizColors.pink": "Pink"
88+
"DataVizColors.pink": "Pink",
89+
"Tokens.title": "Tokens",
90+
"Tokens.Color.primary": "Primary",
91+
"Tokens.Color.secondary": "Secondary",
92+
"Tokens.Color.tertiary": "Tertiary",
93+
"Tokens.Color.label": "Color",
94+
"Component.decorativeDivider": "Decorative Divider",
95+
"Component.areaLoader": "Area Loader",
96+
"Component.sliderField": "Slider Field"
8997
}
9098
}

Diff for: ‎packages/configuration-builder/src/main.tsx

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
import "@buildo/bento-design-system/index.css";
2+
import { sprinkles } from "./sprinkles.css";
3+
import "@buildo/bento-design-system/defaultTheme.css";
4+
import "./main.css";
5+
16
import React from "react";
27
import ReactDOM from "react-dom/client";
38
import { BentoProvider, LinkComponentProps } from "@buildo/bento-design-system";
@@ -7,10 +12,6 @@ import { App } from "./App";
712
import { ConfiguratorStatusProvider } from "./ConfiguratorStatusContext";
813

914
import "./intl";
10-
import "@buildo/bento-design-system/index.css";
11-
import "@buildo/bento-design-system/defaultTheme.css";
12-
import "./main.css";
13-
import { sprinkles } from "./sprinkles.css";
1415

1516
function LinkComponent({ href, ...props }: LinkComponentProps) {
1617
return (

Diff for: ‎packages/configuration-builder/src/router.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { createBrowserRouter } from "react-router-dom";
22
import { MyTheme } from "./MyTheme";
33
import { Home } from "./Home";
44
import { ColorsSection } from "./ColorsSection/ColorsSection";
5+
import { TokensSection } from "./TokensSection/TokensSection";
56

67
export const router = createBrowserRouter([
78
{
@@ -20,4 +21,8 @@ export const router = createBrowserRouter([
2021
path: "/theme/typography",
2122
element: null,
2223
},
24+
{
25+
path: "/theme/tokens",
26+
element: <TokensSection />,
27+
},
2328
]);

0 commit comments

Comments
 (0)