Other tokens section (no modal)

buildo · Nov 17, 2023 · 88dd3d6 · 88dd3d6
1 parent 8c8a2ff
commit 88dd3d6
Show file tree

Hide file tree

Showing 4 changed files with 198 additions and 1 deletion.
diff --git a/packages/configuration-builder/src/TokensSection/OtherTokens.tsx 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>
+      <Box position="relative" display="flex" padding={32} style={{ height: 400 }}>
+        <Body size="medium">{t("LoremIpsum.longText")}</Body>
+        <Box position="absolute" height="full" width="full" top={0} left={0} display="flex">
+          <Box display="flex" flexGrow={1}>
+            <Box flex={1} height="full" background="backgroundDarkScrim" />
+            <Box flex={1} height="full" background="backgroundLightScrim" />
+          </Box>
+        </Box>
+      </Box>
+    </_Playground>
+  );
+}
+
+function LinkPlayground() {
+  const { t } = useTranslation();
+
+  return (
+    <_Playground>
+      <Box display="flex" flexDirection="row" style={{ height: 200 }}>
+        <Box
+          display="flex"
+          justifyContent="center"
+          alignItems="center"
+          style={{ height: 200 }}
+          flex={1}
+        >
+          <Stack space={24}>
+            <Link label={t("TokensSection.Step.other.linkEnabled")} />
+            <Link label={t("TokensSection.Step.other.linkHover")} />
+            <Link label={t("TokensSection.Step.other.linkFocus")} />
+            <Link label={t("TokensSection.Step.other.linkDisabled")} />
+          </Stack>
+        </Box>
+        <Box
+          display="flex"
+          justifyContent="center"
+          alignItems="center"
+          flex={1}
+          background="backgroundSecondaryInverse"
+          margin="negative40"
+          padding={40}
+        >
+          <Stack space={24}>
+            <Link kind="inverse" label={t("TokensSection.Step.other.linkEnabled")} />
+            <Link kind="inverse" label={t("TokensSection.Step.other.linkHover")} />
+            <Link kind="inverse" label={t("TokensSection.Step.other.linkFocus")} />
+            <Link kind="inverse" label={t("TokensSection.Step.other.linkDisabled")} />
+          </Stack>
+        </Box>
+      </Box>
+    </_Playground>
+  );
+}
+
+export function OtherTokens(props: Props) {
+  const { t } = useTranslation();
+
+  return (
+    <Stack space={40}>
+      <Columns space={40} alignY="stretch">
+        <Column width="1/3">
+          <Stack space={24}>
+            <Title size="large">{t("Tokens.Color.Background")}</Title>
+            <Stack space={16}>
+              <ColorSelector
+                label={t("Tokens.Color.lightScrim")}
+                value={props.tokens.backgroundColor.backgroundLightScrim}
+                onChange={(value) =>
+                  props.onChange({
+                    ...props.tokens,
+                    backgroundColor: {
+                      ...props.tokens.backgroundColor,
+                      backgroundLightScrim: value,
+                    },
+                  })
+                }
+              />
+              <ColorSelector
+                label={t("Tokens.Color.darkScrim")}
+                value={props.tokens.backgroundColor.backgroundDarkScrim}
+                onChange={(value) =>
+                  props.onChange({
+                    ...props.tokens,
+                    backgroundColor: {
+                      ...props.tokens.backgroundColor,
+                      backgroundDarkScrim: value,
+                    },
+                  })
+                }
+              />
+            </Stack>
+            <Title size="large">{t("Tokens.Color.Outline")}</Title>
+            <ColorSelector
+              label={t("Tokens.Color.outlineContainer")}
+              value={props.tokens.outlineColor.outlineContainer}
+              onChange={(value) =>
+                props.onChange({
+                  ...props.tokens,
+                  outlineColor: {
+                    ...props.tokens.outlineColor,
+                    outlineContainer: value,
+                  },
+                })
+              }
+            />
+          </Stack>
+        </Column>
+        <ModalPlayground />
+      </Columns>
+      <Columns space={40} alignY="stretch">
+        <Column width="1/3">
+          <Stack space={24}>
+            <Title size="large">{t("Tokens.Color.Link")}</Title>
+            <Stack space={16}>
+              <ColorSelector
+                label={t("Tokens.Color.linkMasterColor")}
+                value={props.tokens.interactiveForegroundColor.linkEnabled}
+                onChange={(value) =>
+                  props.onChange({
+                    ...props.tokens,
+                    interactiveForegroundColor: {
+                      ...props.tokens.interactiveForegroundColor,
+                      linkEnabled: value,
+                    },
+                  })
+                }
+              />
+              <ColorSelector
+                label={t("Tokens.Color.linkInverseMasterColor")}
+                value={props.tokens.interactiveForegroundColor.linkEnabledInverse}
+                onChange={(value) =>
+                  props.onChange({
+                    ...props.tokens,
+                    interactiveForegroundColor: {
+                      ...props.tokens.interactiveForegroundColor,
+                      linkEnabledInverse: value,
+                    },
+                  })
+                }
+              />
+            </Stack>
+          </Stack>
+        </Column>
+        <LinkPlayground />
+      </Columns>
+    </Stack>
+  );
+}
diff --git 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"
     >
       <BentoThemeProvider theme={theme}>{children}</BentoThemeProvider>
     </Box>

diff --git 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", () => (
+          <OtherTokens
+            tokens={theme.tokens}
+            onChange={(newTokens) =>
+              setTheme({ ...theme, tokens: { ...theme.tokens, ...newTokens } })
+            }
+          />
+        ))
         .exhaustive()}
     </ConfiguratorSection>
   );

diff --git 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."
   }
 }