From 34798532a19c746968db5618d5c25051f0a1632b Mon Sep 17 00:00:00 2001
From: Vincenzo Guerrisi <vincenzo@buildo.io>
Date: Mon, 9 Oct 2023 18:09:40 +0200
Subject: [PATCH] add outline/transparent tokens in guided mode, fix secondary
 buttons

---
 .../InteractiveElementsTokens.tsx             | 150 +++++++-----------
 .../configuration-builder/src/locales/en.json |   4 +-
 2 files changed, 56 insertions(+), 98 deletions(-)

diff --git a/packages/configuration-builder/src/TokensSection/InteractiveElementsTokens.tsx b/packages/configuration-builder/src/TokensSection/InteractiveElementsTokens.tsx
index f55ba923f..5258b8517 100644
--- a/packages/configuration-builder/src/TokensSection/InteractiveElementsTokens.tsx
+++ b/packages/configuration-builder/src/TokensSection/InteractiveElementsTokens.tsx
@@ -10,7 +10,6 @@ import {
   withBentoTheme,
   Children,
   Body,
-  SelectField,
   Column,
 } from "@buildo/bento-design-system";
 import { ColorSelector } from "./ColorSelector";
@@ -18,9 +17,7 @@ import { useTranslation } from "react-i18next";
 import { Playground as _Playground } from "./Playground";
 import { ThemeConfig } from "../ConfiguratorStatusContext";
 import { useConfiguredTheme } from "../utils/preview";
-import { ColorKey, ColorToken, colorToken, stepNames } from "../utils/paletteUtils";
-import { useState } from "react";
-import { match } from "ts-pattern";
+import { ColorKey, ColorToken, stepNames } from "../utils/paletteUtils";
 
 type Props = {
   tokens: Pick<
@@ -120,10 +117,16 @@ function PlayGroundButtonsStack({ hierarchy, kind }: Pick<ButtonProps, "kind" |
 function Playground({ hierarchy }: { hierarchy: ButtonProps["hierarchy"] }) {
   return (
     <_Playground>
-      <Columns space={80}>
-        <PlayGroundButtonsStack hierarchy={hierarchy} kind="solid" />
-        <PlayGroundButtonsStack hierarchy={hierarchy} kind="outline" />
-        <PlayGroundButtonsStack hierarchy={hierarchy} kind="transparent" />
+      <Columns space={80} align="center">
+        <Column width="content">
+          <PlayGroundButtonsStack hierarchy={hierarchy} kind="solid" />
+        </Column>
+        <Column width="content">
+          <PlayGroundButtonsStack hierarchy={hierarchy} kind="outline" />
+        </Column>
+        <Column width="content">
+          <PlayGroundButtonsStack hierarchy={hierarchy} kind="transparent" />
+        </Column>
       </Columns>
     </_Playground>
   );
@@ -192,6 +195,45 @@ function ButtonHierarchyConfiguration(
                     [`${props.hierarchy}SolidEnabledBackground`]: value,
                     [`${props.hierarchy}SolidHoverBackground`]: getRelativeStep(value, 2),
                     [`${props.hierarchy}SolidFocusBackground`]: getRelativeStep(value, 2),
+                  },
+                })
+              }
+            />
+            <ColorSelector
+              label={t("Tokens.Color.interactiveSolidForeground")}
+              value={
+                props.tokens.interactiveForegroundColor[`${props.hierarchy}SolidEnabledForeground`]
+              }
+              onChange={(value) =>
+                props.onChange({
+                  ...props.tokens,
+                  interactiveForegroundColor: {
+                    ...props.tokens.interactiveForegroundColor,
+                    [`${props.hierarchy}SolidEnabledForeground`]: value,
+                    [`${props.hierarchy}SolidHoverForeground`]: value,
+                    [`${props.hierarchy}SolidFocusForeground`]: value,
+                  },
+                })
+              }
+            />
+            <ColorSelector
+              label={t("Tokens.Color.interactiveOutlineTransparent")}
+              value={
+                props.tokens.interactiveForegroundColor[
+                  `${props.hierarchy}TransparentEnabledForeground`
+                ]
+              }
+              onChange={(value) =>
+                props.onChange({
+                  ...props.tokens,
+                  interactiveForegroundColor: {
+                    ...props.tokens.interactiveForegroundColor,
+                    [`${props.hierarchy}TransparentEnabledForeground`]: value,
+                    [`${props.hierarchy}TransparentHoverForeground`]: getRelativeStep(value, 2),
+                    [`${props.hierarchy}TransparentFocusForeground`]: getRelativeStep(value, 2),
+                  },
+                  interactiveBackgroundColor: {
+                    ...props.tokens.interactiveBackgroundColor,
                     [`${props.hierarchy}TransparentHoverBackground`]: getPaletteStep(
                       value.colorKey,
                       "10",
@@ -203,12 +245,6 @@ function ButtonHierarchyConfiguration(
                       40
                     ),
                   },
-                  interactiveForegroundColor: {
-                    ...props.tokens.interactiveForegroundColor,
-                    [`${props.hierarchy}TransparentEnabledForeground`]: value,
-                    [`${props.hierarchy}TransparentHoverForeground`]: getRelativeStep(value, 2),
-                    [`${props.hierarchy}TransparentFocusForeground`]: getRelativeStep(value, 2),
-                  },
                   outlineColor: {
                     ...props.tokens.outlineColor,
                     [`outlineInteractive${capitalizeFirstLetter(props.hierarchy)}Enabled`]: value,
@@ -220,23 +256,6 @@ function ButtonHierarchyConfiguration(
                 })
               }
             />
-            <ColorSelector
-              label={t("Tokens.Color.interactiveSolidForeground")}
-              value={
-                props.tokens.interactiveForegroundColor[`${props.hierarchy}SolidEnabledForeground`]
-              }
-              onChange={(value) =>
-                props.onChange({
-                  ...props.tokens,
-                  interactiveForegroundColor: {
-                    ...props.tokens.interactiveForegroundColor,
-                    [`${props.hierarchy}SolidEnabledForeground`]: value,
-                    [`${props.hierarchy}SolidHoverForeground`]: value,
-                    [`${props.hierarchy}SolidFocusForeground`]: value,
-                  },
-                })
-              }
-            />
           </Stack>
         </Stack>
       </Column>
@@ -245,69 +264,6 @@ function ButtonHierarchyConfiguration(
   );
 }
 
-function SecondaryButtonConfiguration(props: Pick<Props, "tokens" | "onChange">) {
-  const { t } = useTranslation();
-
-  const [kind, setKind] = useState<"light" | "dark">("light");
-
-  function setTokens(kind: "light" | "dark") {
-    const [background, foreground] = match(kind)
-      .with("light", () => [colorToken("Neutral-5"), colorToken("Neutral-90")])
-      .with("dark", () => [colorToken("Neutral-70"), colorToken("Neutral-1")])
-      .exhaustive();
-
-    props.onChange({
-      interactiveBackgroundColor: {
-        ...props.tokens.interactiveBackgroundColor,
-        secondarySolidEnabledBackground: background,
-        secondarySolidHoverBackground: getRelativeStep(background, 2),
-        secondarySolidFocusBackground: getRelativeStep(background, 2),
-        secondaryTransparentHoverBackground: colorToken("Neutral-10", 40),
-        secondaryTransparentFocusBackground: colorToken("Neutral-10", 40),
-      },
-      interactiveForegroundColor: {
-        ...props.tokens.interactiveForegroundColor,
-        secondarySolidEnabledForeground: foreground,
-        secondarySolidHoverForeground: foreground,
-        secondarySolidFocusForeground: foreground,
-        secondaryTransparentEnabledForeground: colorToken("Neutral-70"),
-        secondaryTransparentHoverForeground: colorToken("Neutral-90"),
-        secondaryTransparentFocusForeground: colorToken("Neutral-90"),
-      },
-      outlineColor: {
-        ...props.tokens.outlineColor,
-        outlineInteractiveSecondaryEnabled: colorToken("Neutral-70"),
-        outlineInteractiveSecondaryFocus: colorToken("Neutral-90"),
-        outlineInteractiveSecondaryHover: colorToken("Neutral-90"),
-      },
-    });
-  }
-
-  return (
-    <Columns space={40}>
-      <Column width="1/3">
-        <Stack space={24}>
-          <Title size="large">{t(`Tokens.Color.secondaryInteractive`)}</Title>
-          <SelectField
-            label={t("Tokens.Color.kind")}
-            value={kind}
-            onChange={(_value) => {
-              const value = _value ?? "light";
-              setKind(value);
-              setTokens(value);
-            }}
-            options={[
-              { label: t("Tokens.Color.light"), value: "light" as const },
-              { label: t("Tokens.Color.dark"), value: "dark" as const },
-            ]}
-          />
-        </Stack>
-      </Column>
-      <Playground hierarchy="secondary" />
-    </Columns>
-  );
-}
-
 export function InteractiveElementsTokens(props: Props) {
   const { t } = useTranslation();
 
@@ -319,7 +275,11 @@ export function InteractiveElementsTokens(props: Props) {
         onChange={props.onChange}
         hierarchy="primary"
       />
-      <SecondaryButtonConfiguration tokens={props.tokens} onChange={props.onChange} />
+      <ButtonHierarchyConfiguration
+        tokens={props.tokens}
+        onChange={props.onChange}
+        hierarchy="secondary"
+      />
       <ButtonHierarchyConfiguration
         tokens={props.tokens}
         onChange={props.onChange}
diff --git a/packages/configuration-builder/src/locales/en.json b/packages/configuration-builder/src/locales/en.json
index 42a60cb13..519170ef5 100644
--- a/packages/configuration-builder/src/locales/en.json
+++ b/packages/configuration-builder/src/locales/en.json
@@ -111,11 +111,9 @@
     "Tokens.Color.dangerInteractive": "Danger",
     "Tokens.Color.interactiveSolidBackground": "Solid Background",
     "Tokens.Color.interactiveSolidForeground": "Solid Foreground",
+    "Tokens.Color.interactiveOutlineTransparent": "Outline/Transparent",
     "Tokens.Color.label": "Color",
     "Tokens.Color.alphaLabel": "Alpha",
-    "Tokens.Color.kind": "Kind",
-    "Tokens.Color.light": "Light",
-    "Tokens.Color.dark": "Dark",
     "Component.decorativeDivider": "Decorative Divider",
     "Component.areaLoader": "Area Loader",
     "Component.sliderField": "Slider Field",