diff --git a/packages/configuration-builder/src/TokensSection/OtherTokens.tsx b/packages/configuration-builder/src/TokensSection/OtherTokens.tsx
new file mode 100644
index 000000000..505dbf738
--- /dev/null
+++ b/packages/configuration-builder/src/TokensSection/OtherTokens.tsx
@@ -0,0 +1,172 @@
+import { useTranslation } from "react-i18next";
+import { ThemeConfig } from "../ConfiguratorStatusContext";
+import { Playground as _Playground } from "./Playground";
+import { Column, Columns, Title, Stack, Box, Body, Link } from "@buildo/bento-design-system";
+import { ColorSelector } from "./ColorSelector";
+
+type Props = {
+ tokens: Pick<
+ ThemeConfig["tokens"],
+ "backgroundColor" | "outlineColor" | "interactiveForegroundColor"
+ >;
+ onChange: (
+ value: Pick<
+ ThemeConfig["tokens"],
+ "backgroundColor" | "outlineColor" | "interactiveForegroundColor"
+ >
+ ) => void;
+};
+
+function ModalPlayground() {
+ const { t } = useTranslation();
+
+ return (
+ <_Playground>
+
+ {t("LoremIpsum.longText")}
+
+
+
+
+
+
+
+
+ );
+}
+
+function LinkPlayground() {
+ const { t } = useTranslation();
+
+ return (
+ <_Playground>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export function OtherTokens(props: Props) {
+ const { t } = useTranslation();
+
+ return (
+
+
+
+
+ {t("Tokens.Color.Background")}
+
+
+ props.onChange({
+ ...props.tokens,
+ backgroundColor: {
+ ...props.tokens.backgroundColor,
+ backgroundLightScrim: value,
+ },
+ })
+ }
+ />
+
+ props.onChange({
+ ...props.tokens,
+ backgroundColor: {
+ ...props.tokens.backgroundColor,
+ backgroundDarkScrim: value,
+ },
+ })
+ }
+ />
+
+ {t("Tokens.Color.Outline")}
+
+ props.onChange({
+ ...props.tokens,
+ outlineColor: {
+ ...props.tokens.outlineColor,
+ outlineContainer: value,
+ },
+ })
+ }
+ />
+
+
+
+
+
+
+
+ {t("Tokens.Color.Link")}
+
+
+ props.onChange({
+ ...props.tokens,
+ interactiveForegroundColor: {
+ ...props.tokens.interactiveForegroundColor,
+ linkEnabled: value,
+ },
+ })
+ }
+ />
+
+ props.onChange({
+ ...props.tokens,
+ interactiveForegroundColor: {
+ ...props.tokens.interactiveForegroundColor,
+ linkEnabledInverse: value,
+ },
+ })
+ }
+ />
+
+
+
+
+
+
+ );
+}
diff --git a/packages/configuration-builder/src/TokensSection/Playground.tsx b/packages/configuration-builder/src/TokensSection/Playground.tsx
index 38f8d584e..1a0edcff1 100644
--- a/packages/configuration-builder/src/TokensSection/Playground.tsx
+++ b/packages/configuration-builder/src/TokensSection/Playground.tsx
@@ -12,6 +12,7 @@ export function Playground({ children }: { children: Children }) {
display="flex"
flexDirection="column"
flexGrow={1}
+ overflow="hidden"
>
{children}
diff --git a/packages/configuration-builder/src/TokensSection/TokensSection.tsx b/packages/configuration-builder/src/TokensSection/TokensSection.tsx
index 1c9270280..657489927 100644
--- a/packages/configuration-builder/src/TokensSection/TokensSection.tsx
+++ b/packages/configuration-builder/src/TokensSection/TokensSection.tsx
@@ -11,6 +11,7 @@ import { SemanticElementsTokens } from "./SemanticElementsTokens";
import { CategoricalPalettesTokens } from "./CategoricalPalettesTokens";
import { InputTokens } from "./InputTokens";
import { SectionCompleted } from "./SectionCompleted";
+import { OtherTokens } from "./OtherTokens";
const steps = [
"brand",
@@ -19,6 +20,7 @@ const steps = [
"semanticElements",
"categoricalPalettes",
"inputs",
+ "other",
] as const;
type Step = (typeof steps)[number];
@@ -99,6 +101,14 @@ export function TokensSection() {
}
/>
))
+ .with("other", () => (
+
+ setTheme({ ...theme, tokens: { ...theme.tokens, ...newTokens } })
+ }
+ />
+ ))
.exhaustive()}
);
diff --git a/packages/configuration-builder/src/locales/en.json b/packages/configuration-builder/src/locales/en.json
index a2600ba40..2be820fcd 100644
--- a/packages/configuration-builder/src/locales/en.json
+++ b/packages/configuration-builder/src/locales/en.json
@@ -129,6 +129,14 @@
"Tokens.Color.outlineFocus": "Focus",
"Tokens.Color.label": "Color",
"Tokens.Color.alphaLabel": "Alpha",
+ "Tokens.Color.lightScrim": "Light Scrim",
+ "Tokens.Color.darkScrim": "Dark Scrim",
+ "Tokens.Color.outlineContainer": "Container",
+ "Tokens.Color.Background": "Background",
+ "Tokens.Color.Outline": "Outline",
+ "Tokens.Color.Link": "Link",
+ "Tokens.Color.linkMasterColor": "Master Color",
+ "Tokens.Color.linkInverseMasterColor": "Inverse Master Color",
"Component.decorativeDivider": "Decorative Divider",
"Component.areaLoader": "Area Loader",
"Component.sliderField": "Slider Field",
@@ -155,9 +163,15 @@
"TokensSection.Step.inputs.textArea": "Text Area",
"TokensSection.Step.inputs.label": "Label",
"TokensSection.Step.inputs.placeholder": "Placeholder",
+ "TokensSection.Step.other": "Other",
+ "TokensSection.Step.other.linkEnabled": "Link Enabled",
+ "TokensSection.Step.other.linkHover": "Link Hover",
+ "TokensSection.Step.other.linkFocus": "Link Focus",
+ "TokensSection.Step.other.linkDisabled": "Link Disabled",
"TokensSection.completed": "Tokens configuration completed!",
"TokensSection.returnToMyTheme": "Return to My Theme",
"LoremIpsum.title": "The quick brown fox jumps over the lazy dog.",
- "LoremIpsum.text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+ "LoremIpsum.text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+ "LoremIpsum.longText": "Lorem ipsum dolor sit amet consectetur. Nisl porttitor mi convallis cras sed enim. Eu commodo ac eget purus lacinia eu massa proin in. Cras bibendum malesuada lacus amet sagittis molestie mi nec aenean. Tortor sagittis blandit justo at platea ultrices egestas. Congue nec donec adipiscing elementum nunc elementum lectus egestas. Non morbi a facilisis urna aliquam. Et urna posuere sit sociis adipiscing facilisis id. Cras pharetra ac mattis vitae ultricies ac dictum turpis. Fermentum quam viverra aliquet adipiscing est sollicitudin in. Rhoncus odio tellus amet facilisi felis ullamcorper. Convallis auctor a vitae quam pharetra tristique. Eget molestie gravida proin sed sapien euismod dignissim. Diam massa fringilla vitae leo. Ut feugiat convallis in sem magnis. Non nascetur cursus in fringilla nunc aenean lorem non. In mollis vitae in curabitur a integer sit lacus eros. Velit facilisis ornare ultricies aliquet vivamus a. Amet aliquam venenatis fusce senectus nullam. Et sit fermentum neque ornare ut sit dignissim leo turpis. Pharetra quam risus dolor vel egestas massa. Tincidunt habitant habitant imperdiet pellentesque sed lectus pharetra facilisi tempus. Convallis vitae eu vivamus a faucibus. Eget sed tristique ut tincidunt nulla cras est leo. Fames senectus amet neque felis ut bibendum pellentesque non. Nisl facilisis consequat fermentum amet aliquet vitae. Hac tristique etiam id suscipit viverra rhoncus neque. Tincidunt ullamcorper aliquam sed magna eget tellus sodales. Libero volutpat lectus vel erat id bibendum quis nam in. Ut ipsum sagittis augue elit libero. Orci massa faucibus amet sem."
}
}