From 1924a685db417e100e770d5f67ad08e182abe7f6 Mon Sep 17 00:00:00 2001
From: Vincenzo Guerrisi <vincenzo@buildo.io>
Date: Wed, 4 Oct 2023 14:30:29 +0200
Subject: [PATCH 1/4] Interactive tokens section (simplified)

---
 .../src/util/withBentoTheme.tsx               |   2 +-
 .../src/ColorPickerField/ColorPickerField.tsx |   4 +-
 .../src/ConfiguratorStatusContext.tsx         | 153 +++++++----
 .../src/TokensSection/ColorSelector.tsx       |  11 +-
 .../InteractiveElementsTokens.tsx             | 249 ++++++++++++++++++
 .../src/TokensSection/TokensSection.tsx       |  17 +-
 .../configuration-builder/src/locales/en.json |   9 +
 .../src/utils/paletteUtils.ts                 |   2 +-
 .../src/utils/preview.ts                      |  73 ++---
 9 files changed, 405 insertions(+), 115 deletions(-)
 create mode 100644 packages/configuration-builder/src/TokensSection/InteractiveElementsTokens.tsx

diff --git a/packages/bento-design-system/src/util/withBentoTheme.tsx b/packages/bento-design-system/src/util/withBentoTheme.tsx
index 197fae58a..55cec23dd 100644
--- a/packages/bento-design-system/src/util/withBentoTheme.tsx
+++ b/packages/bento-design-system/src/util/withBentoTheme.tsx
@@ -6,7 +6,7 @@ type WrapperProps = {
   className?: string;
 };
 
-export function withBentoTheme<Props extends JSX.IntrinsicAttributes>(
+export function withBentoTheme<Props extends {}>(
   theme: BentoTheme,
   Component: (props: Props) => JSX.Element,
   wrapper?: WrapperProps
diff --git a/packages/configuration-builder/src/ColorPickerField/ColorPickerField.tsx b/packages/configuration-builder/src/ColorPickerField/ColorPickerField.tsx
index 6098f7ad3..46a158143 100644
--- a/packages/configuration-builder/src/ColorPickerField/ColorPickerField.tsx
+++ b/packages/configuration-builder/src/ColorPickerField/ColorPickerField.tsx
@@ -52,10 +52,10 @@ function getColorItems(colors: ThemeConfig["colors"]) {
   return [
     <Section key="General">
       <Item key="white" textValue="white">
-        white
+        White
       </Item>
       <Item key="black" textValue="black">
-        black
+        Black
       </Item>
     </Section>,
     getPaletteItemsSection("BrandPrimary", colors.brand[0]),
diff --git a/packages/configuration-builder/src/ConfiguratorStatusContext.tsx b/packages/configuration-builder/src/ConfiguratorStatusContext.tsx
index d8ba29b38..e81527e36 100644
--- a/packages/configuration-builder/src/ConfiguratorStatusContext.tsx
+++ b/packages/configuration-builder/src/ConfiguratorStatusContext.tsx
@@ -8,13 +8,26 @@ import {
 import { HexColor } from "./utils/colorUtils";
 import { ColorConfig } from "./ColorEditor/ColorEditor";
 import { MapLeafNodes } from "./utils/mapLeafNodes";
-import { ColorKey } from "./utils/paletteUtils";
+import { ColorKey, ColorToken } from "./utils/paletteUtils";
 
 type BrandColors =
   | [ColorConfig]
   | [ColorConfig, ColorConfig]
   | [ColorConfig, ColorConfig, ColorConfig];
 
+type TokensConfig = MapLeafNodes<
+  Pick<
+    BentoTokens,
+    | "brandColor"
+    | "backgroundColor"
+    | "foregroundColor"
+    | "textColor"
+    | "interactiveBackgroundColor"
+    | "interactiveForegroundColor"
+  >,
+  ColorToken
+>;
+
 export type ThemeConfig = {
   colors: {
     brand: BrandColors;
@@ -39,10 +52,7 @@ export type ThemeConfig = {
       pink: ColorConfig;
     };
   };
-  tokens: MapLeafNodes<
-    Pick<BentoTokens, "brandColor" | "backgroundColor" | "foregroundColor" | "textColor">,
-    { colorKey: ColorKey; alpha: number }
-  >;
+  tokens: TokensConfig;
 };
 
 export type ThemeSection = "colors" | "tokens";
@@ -56,53 +66,106 @@ type ConfiguratorStatus = {
 
 export const ConfiguratorStatusContext = createContext<ConfiguratorStatus | null>(null);
 
-export const defaultTokens: MapLeafNodes<
-  Pick<BentoTokens, "brandColor" | "backgroundColor" | "foregroundColor" | "textColor">,
-  { colorKey: ColorKey; alpha: number }
-> = {
+function colorToken(colorKey: ColorKey, alpha?: number): ColorToken {
+  return { colorKey, alpha: alpha ?? 100 };
+}
+
+export const defaultTokens: TokensConfig = {
   brandColor: {
-    brandPrimary: { colorKey: "BrandPrimary-40", alpha: 100 },
-    brandSecondary: { colorKey: "BrandPrimary-20", alpha: 100 },
-    brandTertiary: { colorKey: "BrandPrimary-10", alpha: 100 },
+    brandPrimary: colorToken("BrandPrimary-40"),
+    brandSecondary: colorToken("BrandPrimary-20"),
+    brandTertiary: colorToken("BrandPrimary-10"),
   },
   backgroundColor: {
-    backgroundPrimary: { colorKey: "white", alpha: 100 },
-    backgroundSecondary: { colorKey: "Neutral-1", alpha: 100 },
-    backgroundOverlay: { colorKey: "Neutral-20", alpha: 20 },
-    backgroundPrimaryInverse: { colorKey: "Neutral-90", alpha: 100 },
-    backgroundSecondaryInverse: { colorKey: "Neutral-80", alpha: 100 },
-    backgroundInteractive: { colorKey: "Interactive-40", alpha: 100 },
-    backgroundInteractiveOverlay: { colorKey: "Interactive-10", alpha: 40 },
-    backgroundInformative: { colorKey: "Informative-5", alpha: 100 },
-    backgroundPositive: { colorKey: "Positive-5", alpha: 100 },
-    backgroundWarning: { colorKey: "Warning-5", alpha: 100 },
-    backgroundNegative: { colorKey: "Negative-5", alpha: 100 },
-    backgroundLightScrim: { colorKey: "white", alpha: 80 },
-    backgroundDarkScrim: { colorKey: "Neutral-90", alpha: 60 },
+    backgroundPrimary: colorToken("white"),
+    backgroundSecondary: colorToken("Neutral-1"),
+    backgroundOverlay: colorToken("Neutral-20", 20),
+    backgroundPrimaryInverse: colorToken("Neutral-90"),
+    backgroundSecondaryInverse: colorToken("Neutral-80"),
+    backgroundInteractive: colorToken("Interactive-40"),
+    backgroundInteractiveOverlay: colorToken("Interactive-10", 40),
+    backgroundInformative: colorToken("Informative-5"),
+    backgroundPositive: colorToken("Positive-5"),
+    backgroundWarning: colorToken("Warning-5"),
+    backgroundNegative: colorToken("Negative-5"),
+    backgroundLightScrim: colorToken("white", 80),
+    backgroundDarkScrim: colorToken("Neutral-90", 60),
   },
   foregroundColor: {
-    foregroundPrimary: { colorKey: "Neutral-90", alpha: 100 },
-    foregroundSecondary: { colorKey: "Neutral-50", alpha: 100 },
-    foregroundPrimaryInverse: { colorKey: "Neutral-1", alpha: 100 },
-    foregroundSecondaryInverse: { colorKey: "Neutral-30", alpha: 100 },
-    foregroundInteractive: { colorKey: "Interactive-40", alpha: 100 },
-    foregroundInformative: { colorKey: "Informative-30", alpha: 100 },
-    foregroundPositive: { colorKey: "Positive-50", alpha: 100 },
-    foregroundWarning: { colorKey: "Warning-40", alpha: 100 },
-    foregroundNegative: { colorKey: "Negative-30", alpha: 100 },
-    foregroundDisabled: { colorKey: "Neutral-40", alpha: 30 },
+    foregroundPrimary: colorToken("Neutral-90"),
+    foregroundSecondary: colorToken("Neutral-50"),
+    foregroundPrimaryInverse: colorToken("Neutral-1"),
+    foregroundSecondaryInverse: colorToken("Neutral-30"),
+    foregroundInteractive: colorToken("Interactive-40"),
+    foregroundInformative: colorToken("Informative-30"),
+    foregroundPositive: colorToken("Positive-50"),
+    foregroundWarning: colorToken("Warning-40"),
+    foregroundNegative: colorToken("Negative-30"),
+    foregroundDisabled: colorToken("Neutral-40", 30),
   },
   textColor: {
-    textPrimary: { colorKey: "Neutral-90", alpha: 100 },
-    textSecondary: { colorKey: "Neutral-50", alpha: 100 },
-    textPrimaryInverse: { colorKey: "Neutral-1", alpha: 100 },
-    textSecondaryInverse: { colorKey: "Neutral-30", alpha: 100 },
-    textInteractive: { colorKey: "Interactive-40", alpha: 100 },
-    textInformative: { colorKey: "Informative-50", alpha: 100 },
-    textPositive: { colorKey: "Positive-70", alpha: 100 },
-    textWarning: { colorKey: "Warning-60", alpha: 100 },
-    textNegative: { colorKey: "Negative-60", alpha: 100 },
-    textDisabled: { colorKey: "Neutral-40", alpha: 30 },
+    textPrimary: colorToken("Neutral-90"),
+    textSecondary: colorToken("Neutral-50"),
+    textPrimaryInverse: colorToken("Neutral-1"),
+    textSecondaryInverse: colorToken("Neutral-30"),
+    textInteractive: colorToken("Interactive-40"),
+    textInformative: colorToken("Informative-50"),
+    textPositive: colorToken("Positive-70"),
+    textWarning: colorToken("Warning-60"),
+    textNegative: colorToken("Negative-60"),
+    textDisabled: colorToken("Neutral-40", 30),
+  },
+  interactiveBackgroundColor: {
+    primarySolidEnabledBackground: colorToken("Interactive-40"),
+    primarySolidHoverBackground: colorToken("Interactive-60"),
+    primarySolidFocusBackground: colorToken("Interactive-60"),
+    primaryTransparentEnabledBackground: colorToken("white", 0),
+    primaryTransparentHoverBackground: colorToken("Interactive-10", 40),
+    primaryTransparentFocusBackground: colorToken("Interactive-10", 40),
+    dangerSolidEnabledBackground: colorToken("Negative-40"),
+    dangerSolidHoverBackground: colorToken("Negative-40"),
+    dangerSolidFocusBackground: colorToken("Negative-40"),
+    dangerTransparentEnabledBackground: colorToken("white", 0),
+    dangerTransparentHoverBackground: colorToken("Negative-40", 10),
+    dangerTransparentFocusBackground: colorToken("Negative-40", 10),
+    secondarySolidEnabledBackground: colorToken("Neutral-5"),
+    secondarySolidHoverBackground: colorToken("Neutral-20"),
+    secondarySolidFocusBackground: colorToken("Neutral-20"),
+    secondaryTransparentEnabledBackground: colorToken("white", 0),
+    secondaryTransparentHoverBackground: colorToken("Neutral-20", 40),
+    secondaryTransparentFocusBackground: colorToken("Neutral-20", 40),
+    disabledSolidBackground: colorToken("Neutral-20", 20),
+    disabledTransparentBackground: colorToken("white", 0),
+  },
+  interactiveForegroundColor: {
+    primarySolidEnabledForeground: colorToken("white"),
+    primarySolidHoverForeground: colorToken("white"),
+    primarySolidFocusForeground: colorToken("white"),
+    primaryTransparentEnabledForeground: colorToken("Interactive-40"),
+    primaryTransparentHoverForeground: colorToken("Interactive-60"),
+    primaryTransparentFocusForeground: colorToken("Interactive-60"),
+    dangerSolidEnabledForeground: colorToken("white"),
+    dangerSolidHoverForeground: colorToken("white"),
+    dangerSolidFocusForeground: colorToken("white"),
+    dangerTransparentEnabledForeground: colorToken("Negative-40"),
+    dangerTransparentHoverForeground: colorToken("Negative-60"),
+    dangerTransparentFocusForeground: colorToken("Negative-60"),
+    secondarySolidEnabledForeground: colorToken("Neutral-90"),
+    secondarySolidHoverForeground: colorToken("Neutral-90"),
+    secondarySolidFocusForeground: colorToken("Neutral-90"),
+    secondaryTransparentEnabledForeground: colorToken("Neutral-80"),
+    secondaryTransparentHoverForeground: colorToken("black"),
+    secondaryTransparentFocusForeground: colorToken("black"),
+    disabledSolidForeground: colorToken("Neutral-40", 30),
+    disabledTransparentForeground: colorToken("Neutral-40", 30),
+    linkEnabled: colorToken("Interactive-40"),
+    linkHover: colorToken("Interactive-60"),
+    linkFocus: colorToken("Interactive-60"),
+    linkDisabled: colorToken("Neutral-40", 30),
+    linkEnabledInverse: colorToken("Interactive-10"),
+    linkHoverInverse: colorToken("Interactive-5"),
+    linkFocusInverse: colorToken("Interactive-5"),
+    linkDisabledInverse: colorToken("Neutral-60"),
   },
 };
 
diff --git a/packages/configuration-builder/src/TokensSection/ColorSelector.tsx b/packages/configuration-builder/src/TokensSection/ColorSelector.tsx
index d3759c143..4fd47c327 100644
--- a/packages/configuration-builder/src/TokensSection/ColorSelector.tsx
+++ b/packages/configuration-builder/src/TokensSection/ColorSelector.tsx
@@ -10,17 +10,12 @@ import {
 import { useConfiguratorStatusContext } from "../ConfiguratorStatusContext";
 import { useTranslation } from "react-i18next";
 import { ColorPickerField } from "../ColorPickerField/ColorPickerField";
-import { ColorKey, colorTokenToRGBA } from "../utils/paletteUtils";
-
-type Value = {
-  colorKey: ColorKey;
-  alpha: number;
-};
+import { ColorToken, colorTokenToRGBA } from "../utils/paletteUtils";
 
 export function ColorSelector(props: {
   label: LocalizedString;
-  value: Value;
-  onChange: (value: Value) => void;
+  value: ColorToken;
+  onChange: (value: ColorToken) => void;
 }) {
   const colors = useConfiguratorStatusContext().theme.colors;
   const selectedColor = colorTokenToRGBA(colors)(props.value);
diff --git a/packages/configuration-builder/src/TokensSection/InteractiveElementsTokens.tsx b/packages/configuration-builder/src/TokensSection/InteractiveElementsTokens.tsx
new file mode 100644
index 000000000..5f55c53e6
--- /dev/null
+++ b/packages/configuration-builder/src/TokensSection/InteractiveElementsTokens.tsx
@@ -0,0 +1,249 @@
+import {
+  Stack,
+  Headline,
+  Title,
+  Actions,
+  Columns,
+  ButtonProps,
+  Button,
+  unsafeLocalizedString,
+  withBentoTheme,
+  Children,
+  Body,
+} from "@buildo/bento-design-system";
+import { ColorSelector } from "./ColorSelector";
+import { useTranslation } from "react-i18next";
+import { Playground } from "./Playground";
+import { ThemeConfig } from "../ConfiguratorStatusContext";
+import { useConfiguredTheme } from "../utils/preview";
+import { ColorKey, ColorToken, stepNames } from "../utils/paletteUtils";
+
+type Props = {
+  tokens: Pick<ThemeConfig["tokens"], "interactiveBackgroundColor" | "interactiveForegroundColor">;
+  onChange: (
+    value: Pick<ThemeConfig["tokens"], "interactiveBackgroundColor" | "interactiveForegroundColor">
+  ) => void;
+  onNext: () => void;
+  onBack: () => void;
+};
+
+function PlayGroundButtonsStack({ hierarchy, kind }: Pick<ButtonProps, "kind" | "hierarchy">) {
+  const theme = useConfiguredTheme();
+  const { t } = useTranslation();
+
+  const HoverButton = withBentoTheme(
+    {
+      interactiveBackgroundColor: {
+        [`${hierarchy}SolidEnabledBackground`]:
+          theme.interactiveBackgroundColor?.[`${hierarchy}SolidHoverBackground`],
+        [`${hierarchy}TransparentEnabledBackground`]:
+          theme.interactiveBackgroundColor?.[`${hierarchy}TransparentHoverBackground`],
+      },
+      interactiveForegroundColor: {
+        [`${hierarchy}SolidEnabledForeground`]:
+          theme.interactiveForegroundColor?.[`${hierarchy}SolidHoverForeground`],
+        [`${hierarchy}TransparentEnabledForeground`]:
+          theme.interactiveForegroundColor?.[`${hierarchy}TransparentHoverForeground`],
+      },
+    },
+    Button
+  );
+
+  const FocusButton = withBentoTheme(
+    {
+      interactiveBackgroundColor: {
+        [`${hierarchy}SolidEnabledBackground`]:
+          theme.interactiveBackgroundColor?.[`${hierarchy}SolidFocusBackground`],
+        [`${hierarchy}TransparentEnabledBackground`]:
+          theme.interactiveBackgroundColor?.[`${hierarchy}TransparentFocusBackground`],
+      },
+      interactiveForegroundColor: {
+        [`${hierarchy}SolidEnabledForeground`]:
+          theme.interactiveForegroundColor?.[`${hierarchy}SolidFocusForeground`],
+        [`${hierarchy}TransparentEnabledForeground`]:
+          theme.interactiveForegroundColor?.[`${hierarchy}TransparentFocusForeground`],
+      },
+    },
+    Button
+  );
+
+  return (
+    <Stack space={12}>
+      <Body size="medium" color="secondary">
+        {t(`TokensSection.Step.InteractiveElements.${kind}Button`)}
+      </Body>
+      <Button
+        size="large"
+        hierarchy={hierarchy}
+        kind={kind}
+        label={unsafeLocalizedString("Button")}
+        onPress={() => {}}
+      />
+      <HoverButton
+        size="large"
+        hierarchy={hierarchy}
+        kind={kind}
+        label={unsafeLocalizedString("Button")}
+        onPress={() => {}}
+      />
+      <FocusButton
+        size="large"
+        hierarchy={hierarchy}
+        kind={kind}
+        label={unsafeLocalizedString("Button")}
+        onPress={() => {}}
+      />
+      <Button
+        size="large"
+        hierarchy={hierarchy}
+        kind="solid"
+        label={unsafeLocalizedString("Button")}
+        onPress={() => {}}
+        isDisabled
+      />
+    </Stack>
+  );
+}
+
+function PlaygroundExample({ hierarchy }: { hierarchy: ButtonProps["hierarchy"] }) {
+  return (
+    <Columns space={80}>
+      <PlayGroundButtonsStack hierarchy={hierarchy} kind="solid" />
+      <PlayGroundButtonsStack hierarchy={hierarchy} kind="outline" />
+      <PlayGroundButtonsStack hierarchy={hierarchy} kind="transparent" />
+    </Columns>
+  );
+}
+
+function getNextStep(colorToken: ColorToken, steps: number): ColorToken {
+  if (colorToken.colorKey === "black" || colorToken.colorKey === "white") {
+    return { colorKey: "black", alpha: colorToken.alpha };
+  }
+  const [palette, step] = colorToken.colorKey.split("-");
+  const stepIndex = stepNames.indexOf(step as (typeof stepNames)[number]);
+  const nextStepIndex = stepIndex + steps;
+  if (stepNames[nextStepIndex] != null) {
+    return {
+      colorKey: `${palette}-${stepNames[nextStepIndex]}` as ColorKey,
+      alpha: colorToken.alpha,
+    };
+  } else {
+    return { colorKey: "black", alpha: colorToken.alpha };
+  }
+}
+
+function getPaletteStep(
+  colorKey: ColorKey,
+  step: (typeof stepNames)[number],
+  alpha: number
+): ColorToken {
+  if (colorKey === "black" || colorKey === "white") {
+    return { colorKey: "black", alpha };
+  }
+  const [palette] = colorKey.split("-");
+  return {
+    colorKey: `${palette}-${step}` as ColorKey,
+    alpha,
+  };
+}
+
+function ButtonHierarchyConfiguration(
+  props: Pick<Props, "tokens" | "onChange"> & {
+    hierarchy: ButtonProps["hierarchy"];
+    children?: Children;
+  }
+) {
+  const { t } = useTranslation();
+
+  return (
+    <Columns space={40}>
+      <Stack space={24}>
+        <Title size="large">{t(`Tokens.Color.${props.hierarchy}Interactive`)}</Title>
+        <Stack space={16}>
+          <ColorSelector
+            label={t("Tokens.Color.interactiveSolidBackground")}
+            value={
+              props.tokens.interactiveBackgroundColor[`${props.hierarchy}SolidEnabledBackground`]
+            }
+            onChange={(value) =>
+              props.onChange({
+                ...props.tokens,
+                interactiveBackgroundColor: {
+                  ...props.tokens.interactiveBackgroundColor,
+                  [`${props.hierarchy}SolidEnabledBackground`]: value,
+                  [`${props.hierarchy}SolidHoverBackground`]: getNextStep(value, 2),
+                  [`${props.hierarchy}SolidFocusBackground`]: getNextStep(value, 2),
+                  [`${props.hierarchy}TransparentHoverBackground`]: getPaletteStep(
+                    value.colorKey,
+                    "10",
+                    40
+                  ),
+                  [`${props.hierarchy}TransparentFocusBackground`]: getPaletteStep(
+                    value.colorKey,
+                    "10",
+                    40
+                  ),
+                },
+                interactiveForegroundColor: {
+                  ...props.tokens.interactiveForegroundColor,
+                  [`${props.hierarchy}TransparentEnabledForeground`]: value,
+                  [`${props.hierarchy}TransparentHoverForeground`]: getNextStep(value, 2),
+                  [`${props.hierarchy}TransparentFocusForeground`]: getNextStep(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,
+                },
+              })
+            }
+          />
+        </Stack>
+      </Stack>
+      <Playground>
+        <PlaygroundExample hierarchy={props.hierarchy} />
+      </Playground>
+    </Columns>
+  );
+}
+
+export function InteractiveElementsTokens(props: Props) {
+  const { t } = useTranslation();
+
+  return (
+    <Stack space={40}>
+      <Headline size="small">{t("TokensSection.Step.interactiveElements")}</Headline>
+      <ButtonHierarchyConfiguration
+        tokens={props.tokens}
+        onChange={props.onChange}
+        hierarchy="primary"
+      />
+      <ButtonHierarchyConfiguration
+        tokens={props.tokens}
+        onChange={props.onChange}
+        hierarchy="secondary"
+      />
+      <ButtonHierarchyConfiguration
+        tokens={props.tokens}
+        onChange={props.onChange}
+        hierarchy="danger"
+      />
+      <Actions
+        primaryAction={{ label: t("Next"), onPress: props.onNext }}
+        secondaryAction={{ label: t("Back"), onPress: props.onBack }}
+      />
+    </Stack>
+  );
+}
diff --git a/packages/configuration-builder/src/TokensSection/TokensSection.tsx b/packages/configuration-builder/src/TokensSection/TokensSection.tsx
index 990af3c86..00456b685 100644
--- a/packages/configuration-builder/src/TokensSection/TokensSection.tsx
+++ b/packages/configuration-builder/src/TokensSection/TokensSection.tsx
@@ -6,13 +6,14 @@ import { BrandTokens } from "./BrandTokens";
 import { match } from "ts-pattern";
 import { TextAndIconsTokens } from "./TextAndIconsTokens";
 import { useNavigate } from "react-router-dom";
+import { InteractiveElementsTokens } from "./InteractiveElementsTokens";
 
 export function TokensSection() {
   const { theme, setTheme } = useConfiguratorStatusContext();
   const { t } = useTranslation();
   const navigate = useNavigate();
 
-  const steps = ["brand" as const, "textAndIcons" as const];
+  const steps = ["brand" as const, "textAndIcons" as const, "interactiveElements" as const];
   const [currentStep, setCurrentStep] = useState<(typeof steps)[0]>("brand");
   const currentStepIndex = steps.indexOf(currentStep);
 
@@ -43,7 +44,19 @@ export function TokensSection() {
         .with("textAndIcons", () => (
           <TextAndIconsTokens
             tokens={theme.tokens}
-            onChange={(newTokens) => setTheme({ ...theme, tokens: newTokens })}
+            onChange={(newTokens) =>
+              setTheme({ ...theme, tokens: { ...theme.tokens, ...newTokens } })
+            }
+            onNext={onNext}
+            onBack={onBack}
+          />
+        ))
+        .with("interactiveElements", () => (
+          <InteractiveElementsTokens
+            tokens={theme.tokens}
+            onChange={(newTokens) =>
+              setTheme({ ...theme, tokens: { ...theme.tokens, ...newTokens } })
+            }
             onNext={onNext}
             onBack={onBack}
           />
diff --git a/packages/configuration-builder/src/locales/en.json b/packages/configuration-builder/src/locales/en.json
index fe541e9d0..35c89f41e 100644
--- a/packages/configuration-builder/src/locales/en.json
+++ b/packages/configuration-builder/src/locales/en.json
@@ -106,6 +106,11 @@
     "Tokens.Color.foregroundSecondary": "Secondary",
     "Tokens.Color.foregroundPrimaryInverse": "Primary Inverse",
     "Tokens.Color.foregroundSecondaryInverse": "Secondary Inverse",
+    "Tokens.Color.primaryInteractive": "Primary",
+    "Tokens.Color.secondaryInteractive": "Secondary",
+    "Tokens.Color.dangerInteractive": "Danger",
+    "Tokens.Color.interactiveSolidBackground": "Solid Background",
+    "Tokens.Color.interactiveSolidForeground": "Solid Foreground",
     "Tokens.Color.label": "Color",
     "Tokens.Color.alphaLabel": "Alpha",
     "Component.decorativeDivider": "Decorative Divider",
@@ -113,6 +118,10 @@
     "Component.sliderField": "Slider Field",
     "TokensSection.Step.brand": "Brand",
     "TokensSection.Step.textAndIcons": "Text & icons",
+    "TokensSection.Step.interactiveElements": "Interactive elements",
+    "TokensSection.Step.InteractiveElements.solidButton": "Button solid",
+    "TokensSection.Step.InteractiveElements.outlineButton": "Button outline",
+    "TokensSection.Step.InteractiveElements.transparentButton": "Button transparent",
     "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."
   }
diff --git a/packages/configuration-builder/src/utils/paletteUtils.ts b/packages/configuration-builder/src/utils/paletteUtils.ts
index 7e282df3c..03f699351 100644
--- a/packages/configuration-builder/src/utils/paletteUtils.ts
+++ b/packages/configuration-builder/src/utils/paletteUtils.ts
@@ -76,7 +76,7 @@ export function getPaletteKeyColor(
     .exhaustive();
 }
 
-type ColorToken = {
+export type ColorToken = {
   colorKey: ColorKey;
   alpha: number;
 };
diff --git a/packages/configuration-builder/src/utils/preview.ts b/packages/configuration-builder/src/utils/preview.ts
index 9c8e1191d..fbe2eed17 100644
--- a/packages/configuration-builder/src/utils/preview.ts
+++ b/packages/configuration-builder/src/utils/preview.ts
@@ -1,63 +1,24 @@
 import { BentoTheme } from "@buildo/bento-design-system";
-import { defaultTokens, useConfiguratorStatusContext } from "../ConfiguratorStatusContext";
-import { colorTokenToRGBA as _colorTokenToRGBA } from "./paletteUtils";
+import { useConfiguratorStatusContext } from "../ConfiguratorStatusContext";
+import { ColorToken, colorTokenToRGBA as _colorTokenToRGBA } from "./paletteUtils";
 
-export function useConfiguredTheme(): BentoTheme {
-  const { tokens, colors } = useConfiguratorStatusContext().theme;
+export function useConfiguredTheme(): BentoTheme & object {
+  const { tokens: _tokens, colors } = useConfiguratorStatusContext().theme;
+  const tokens = _tokens as Record<string, Record<string, ColorToken>>;
 
   const colorTokenToRGBA = _colorTokenToRGBA(colors);
 
-  return {
-    ...defaultTokens,
-    brandColor: {
-      brandPrimary: colorTokenToRGBA(tokens.brandColor.brandPrimary),
-      brandSecondary: colorTokenToRGBA(tokens.brandColor.brandSecondary),
-      brandTertiary: colorTokenToRGBA(tokens.brandColor.brandTertiary),
-    },
-    backgroundColor: {
-      backgroundPrimary: colorTokenToRGBA(tokens.backgroundColor.backgroundPrimary),
-      backgroundSecondary: colorTokenToRGBA(tokens.backgroundColor.backgroundSecondary),
-      backgroundOverlay: colorTokenToRGBA(tokens.backgroundColor.backgroundOverlay),
-      backgroundPrimaryInverse: colorTokenToRGBA(tokens.backgroundColor.backgroundPrimaryInverse),
-      backgroundSecondaryInverse: colorTokenToRGBA(
-        tokens.backgroundColor.backgroundSecondaryInverse
+  return Object.keys(tokens).reduce(
+    (acc, key) => ({
+      ...acc,
+      [key]: Object.keys(tokens[key]).reduce(
+        (acc2, key2) => ({
+          ...acc2,
+          [key2]: colorTokenToRGBA(tokens[key][key2]),
+        }),
+        {}
       ),
-      backgroundInteractive: colorTokenToRGBA(tokens.backgroundColor.backgroundInteractive),
-      backgroundInteractiveOverlay: colorTokenToRGBA(
-        tokens.backgroundColor.backgroundInteractiveOverlay
-      ),
-      backgroundInformative: colorTokenToRGBA(tokens.backgroundColor.backgroundInformative),
-      backgroundPositive: colorTokenToRGBA(tokens.backgroundColor.backgroundPositive),
-      backgroundWarning: colorTokenToRGBA(tokens.backgroundColor.backgroundWarning),
-      backgroundNegative: colorTokenToRGBA(tokens.backgroundColor.backgroundNegative),
-      backgroundLightScrim: colorTokenToRGBA(tokens.backgroundColor.backgroundLightScrim),
-      backgroundDarkScrim: colorTokenToRGBA(tokens.backgroundColor.backgroundDarkScrim),
-    },
-    foregroundColor: {
-      foregroundPrimary: colorTokenToRGBA(tokens.foregroundColor.foregroundPrimary),
-      foregroundSecondary: colorTokenToRGBA(tokens.foregroundColor.foregroundSecondary),
-      foregroundPrimaryInverse: colorTokenToRGBA(tokens.foregroundColor.foregroundPrimaryInverse),
-      foregroundSecondaryInverse: colorTokenToRGBA(
-        tokens.foregroundColor.foregroundSecondaryInverse
-      ),
-      foregroundInteractive: colorTokenToRGBA(tokens.foregroundColor.foregroundInteractive),
-      foregroundInformative: colorTokenToRGBA(tokens.foregroundColor.foregroundInformative),
-      foregroundPositive: colorTokenToRGBA(tokens.foregroundColor.foregroundPositive),
-      foregroundWarning: colorTokenToRGBA(tokens.foregroundColor.foregroundWarning),
-      foregroundNegative: colorTokenToRGBA(tokens.foregroundColor.foregroundNegative),
-      foregroundDisabled: colorTokenToRGBA(tokens.foregroundColor.foregroundDisabled),
-    },
-    textColor: {
-      textPrimary: colorTokenToRGBA(tokens.textColor.textPrimary),
-      textSecondary: colorTokenToRGBA(tokens.textColor.textSecondary),
-      textPrimaryInverse: colorTokenToRGBA(tokens.textColor.textPrimaryInverse),
-      textSecondaryInverse: colorTokenToRGBA(tokens.textColor.textSecondaryInverse),
-      textInteractive: colorTokenToRGBA(tokens.textColor.textInteractive),
-      textInformative: colorTokenToRGBA(tokens.textColor.textInformative),
-      textPositive: colorTokenToRGBA(tokens.textColor.textPositive),
-      textWarning: colorTokenToRGBA(tokens.textColor.textWarning),
-      textNegative: colorTokenToRGBA(tokens.textColor.textNegative),
-      textDisabled: colorTokenToRGBA(tokens.textColor.textDisabled),
-    },
-  };
+    }),
+    {}
+  );
 }

From 3fe8757424fd3d44339979d2ee6724a5ac113a15 Mon Sep 17 00:00:00 2001
From: Vincenzo Guerrisi <vincenzo@buildo.io>
Date: Wed, 4 Oct 2023 14:57:18 +0200
Subject: [PATCH 2/4] set interactive outline

---
 .../src/ConfiguratorStatusContext.tsx         | 24 ++++++++++
 .../InteractiveElementsTokens.tsx             | 34 ++++++++++----
 .../src/utils/preview.ts                      | 44 ++++++++++++++++++-
 3 files changed, 93 insertions(+), 9 deletions(-)

diff --git a/packages/configuration-builder/src/ConfiguratorStatusContext.tsx b/packages/configuration-builder/src/ConfiguratorStatusContext.tsx
index e81527e36..8c504ba02 100644
--- a/packages/configuration-builder/src/ConfiguratorStatusContext.tsx
+++ b/packages/configuration-builder/src/ConfiguratorStatusContext.tsx
@@ -24,6 +24,7 @@ type TokensConfig = MapLeafNodes<
     | "textColor"
     | "interactiveBackgroundColor"
     | "interactiveForegroundColor"
+    | "outlineColor"
   >,
   ColorToken
 >;
@@ -167,6 +168,29 @@ export const defaultTokens: TokensConfig = {
     linkFocusInverse: colorToken("Interactive-5"),
     linkDisabledInverse: colorToken("Neutral-60"),
   },
+  outlineColor: {
+    outlineInteractive: colorToken("Interactive-40"),
+    outlineDecorative: colorToken("Neutral-20"),
+    outlineContainer: colorToken("Neutral-40", 20),
+    outlineInputEnabled: colorToken("Neutral-40"),
+    outlineInputHover: colorToken("Neutral-60"),
+    outlineInputFocus: colorToken("Interactive-40"),
+    outlineInputDisabled: colorToken("Neutral-40", 30),
+    outlineInformative: colorToken("Informative-30"),
+    outlinePositive: colorToken("Positive-50"),
+    outlineWarning: colorToken("Warning-40"),
+    outlineNegative: colorToken("Negative-30"),
+    outlineInteractivePrimaryEnabled: colorToken("Interactive-40"),
+    outlineInteractivePrimaryHover: colorToken("Interactive-60"),
+    outlineInteractivePrimaryFocus: colorToken("Interactive-60"),
+    outlineInteractiveSecondaryEnabled: colorToken("Neutral-80"),
+    outlineInteractiveSecondaryHover: colorToken("black"),
+    outlineInteractiveSecondaryFocus: colorToken("black"),
+    outlineInteractiveDangerEnabled: colorToken("Negative-40"),
+    outlineInteractiveDangerHover: colorToken("Negative-60"),
+    outlineInteractiveDangerFocus: colorToken("Negative-60"),
+    outlineInteractiveDisabled: colorToken("Neutral-40", 30),
+  },
 };
 
 export function ConfiguratorStatusProvider(props: { children: Children }) {
diff --git a/packages/configuration-builder/src/TokensSection/InteractiveElementsTokens.tsx b/packages/configuration-builder/src/TokensSection/InteractiveElementsTokens.tsx
index 5f55c53e6..9485eb545 100644
--- a/packages/configuration-builder/src/TokensSection/InteractiveElementsTokens.tsx
+++ b/packages/configuration-builder/src/TokensSection/InteractiveElementsTokens.tsx
@@ -19,9 +19,15 @@ import { useConfiguredTheme } from "../utils/preview";
 import { ColorKey, ColorToken, stepNames } from "../utils/paletteUtils";
 
 type Props = {
-  tokens: Pick<ThemeConfig["tokens"], "interactiveBackgroundColor" | "interactiveForegroundColor">;
+  tokens: Pick<
+    ThemeConfig["tokens"],
+    "interactiveBackgroundColor" | "interactiveForegroundColor" | "outlineColor"
+  >;
   onChange: (
-    value: Pick<ThemeConfig["tokens"], "interactiveBackgroundColor" | "interactiveForegroundColor">
+    value: Pick<
+      ThemeConfig["tokens"],
+      "interactiveBackgroundColor" | "interactiveForegroundColor" | "outlineColor"
+    >
   ) => void;
   onNext: () => void;
   onBack: () => void;
@@ -115,13 +121,13 @@ function PlaygroundExample({ hierarchy }: { hierarchy: ButtonProps["hierarchy"]
   );
 }
 
-function getNextStep(colorToken: ColorToken, steps: number): ColorToken {
+function getRelativeStep(colorToken: ColorToken, gap: number): ColorToken {
   if (colorToken.colorKey === "black" || colorToken.colorKey === "white") {
     return { colorKey: "black", alpha: colorToken.alpha };
   }
   const [palette, step] = colorToken.colorKey.split("-");
   const stepIndex = stepNames.indexOf(step as (typeof stepNames)[number]);
-  const nextStepIndex = stepIndex + steps;
+  const nextStepIndex = stepIndex + gap;
   if (stepNames[nextStepIndex] != null) {
     return {
       colorKey: `${palette}-${stepNames[nextStepIndex]}` as ColorKey,
@@ -147,6 +153,10 @@ function getPaletteStep(
   };
 }
 
+function capitalizeFirstLetter(value: string) {
+  return value.charAt(0).toUpperCase() + value.slice(1);
+}
+
 function ButtonHierarchyConfiguration(
   props: Pick<Props, "tokens" | "onChange"> & {
     hierarchy: ButtonProps["hierarchy"];
@@ -171,8 +181,8 @@ function ButtonHierarchyConfiguration(
                 interactiveBackgroundColor: {
                   ...props.tokens.interactiveBackgroundColor,
                   [`${props.hierarchy}SolidEnabledBackground`]: value,
-                  [`${props.hierarchy}SolidHoverBackground`]: getNextStep(value, 2),
-                  [`${props.hierarchy}SolidFocusBackground`]: getNextStep(value, 2),
+                  [`${props.hierarchy}SolidHoverBackground`]: getRelativeStep(value, 2),
+                  [`${props.hierarchy}SolidFocusBackground`]: getRelativeStep(value, 2),
                   [`${props.hierarchy}TransparentHoverBackground`]: getPaletteStep(
                     value.colorKey,
                     "10",
@@ -187,8 +197,16 @@ function ButtonHierarchyConfiguration(
                 interactiveForegroundColor: {
                   ...props.tokens.interactiveForegroundColor,
                   [`${props.hierarchy}TransparentEnabledForeground`]: value,
-                  [`${props.hierarchy}TransparentHoverForeground`]: getNextStep(value, 2),
-                  [`${props.hierarchy}TransparentFocusForeground`]: getNextStep(value, 2),
+                  [`${props.hierarchy}TransparentHoverForeground`]: getRelativeStep(value, 2),
+                  [`${props.hierarchy}TransparentFocusForeground`]: getRelativeStep(value, 2),
+                },
+                outlineColor: {
+                  ...props.tokens.outlineColor,
+                  [`outlineInteractive${capitalizeFirstLetter(props.hierarchy)}Enabled`]: value,
+                  [`outlineInteractive${capitalizeFirstLetter(props.hierarchy)}Focus`]:
+                    getRelativeStep(value, 2),
+                  [`outlineInteractive${capitalizeFirstLetter(props.hierarchy)}Hover`]:
+                    getRelativeStep(value, 2),
                 },
               })
             }
diff --git a/packages/configuration-builder/src/utils/preview.ts b/packages/configuration-builder/src/utils/preview.ts
index fbe2eed17..6b9e1afe7 100644
--- a/packages/configuration-builder/src/utils/preview.ts
+++ b/packages/configuration-builder/src/utils/preview.ts
@@ -8,7 +8,7 @@ export function useConfiguredTheme(): BentoTheme & object {
 
   const colorTokenToRGBA = _colorTokenToRGBA(colors);
 
-  return Object.keys(tokens).reduce(
+  const theme: BentoTheme & object = Object.keys(tokens).reduce(
     (acc, key) => ({
       ...acc,
       [key]: Object.keys(tokens[key]).reduce(
@@ -21,4 +21,46 @@ export function useConfiguredTheme(): BentoTheme & object {
     }),
     {}
   );
+
+  return {
+    ...theme,
+    boxShadow: {
+      outlineInteractive: theme.outlineColor?.outlineInteractive
+        ? `inset 0px 0px 0px 1px ${theme.outlineColor.outlineInteractive}`
+        : undefined,
+      outlineInteractiveBottom: theme.outlineColor?.outlineInteractive
+        ? `inset 0px -1px 0px ${theme.outlineColor.outlineInteractive}`
+        : undefined,
+      outlineInteractivePrimaryEnabled: theme.outlineColor?.outlineInteractivePrimaryEnabled
+        ? `inset 0px 0px 0px 1px ${theme.outlineColor?.outlineInteractivePrimaryEnabled}`
+        : undefined,
+      outlineInteractivePrimaryFocus: theme.outlineColor?.outlineInteractivePrimaryFocus
+        ? `inset 0px 0px 0px 1px ${theme.outlineColor.outlineInteractivePrimaryEnabled}`
+        : undefined,
+      outlineInteractivePrimaryHover: theme.outlineColor?.outlineInteractivePrimaryHover
+        ? `inset 0px 0px 0px 1px ${theme.outlineColor.outlineInteractivePrimaryHover}`
+        : undefined,
+      outlineInteractiveSecondaryEnabled: theme.outlineColor?.outlineInteractiveSecondaryEnabled
+        ? `inset 0px 0px 0px 1px ${theme.outlineColor.outlineInteractiveSecondaryEnabled}`
+        : undefined,
+      outlineInteractiveSecondaryFocus: theme.outlineColor?.outlineInteractiveSecondaryFocus
+        ? `inset 0px 0px 0px 1px ${theme.outlineColor.outlineInteractiveSecondaryFocus}`
+        : undefined,
+      outlineInteractiveSecondaryHover: theme.outlineColor?.outlineInteractiveSecondaryHover
+        ? `inset 0px 0px 0px 1px ${theme.outlineColor.outlineInteractiveSecondaryHover}`
+        : undefined,
+      outlineInteractiveDangerEnabled: theme.outlineColor?.outlineInteractiveDangerEnabled
+        ? `inset 0px 0px 0px 1px ${theme.outlineColor.outlineInteractiveDangerEnabled}`
+        : undefined,
+      outlineInteractiveDangerFocus: theme.outlineColor?.outlineInteractiveDangerFocus
+        ? `inset 0px 0px 0px 1px ${theme.outlineColor.outlineInteractiveDangerFocus}`
+        : undefined,
+      outlineInteractiveDangerHover: theme.outlineColor?.outlineInteractiveDangerHover
+        ? `inset 0px 0px 0px 1px ${theme.outlineColor?.outlineInteractiveDangerHover}`
+        : undefined,
+      outlineInteractiveDisabled: theme.outlineColor?.outlineInteractiveDisabled
+        ? `inset 0px 0px 0px 1px ${theme.outlineColor.outlineInteractiveDisabled}`
+        : undefined,
+    },
+  };
 }

From aefe15f728cc49a6b8781c29b794b4dfd1aed29c Mon Sep 17 00:00:00 2001
From: Vincenzo Guerrisi <vincenzo@buildo.io>
Date: Mon, 9 Oct 2023 15:55:44 +0200
Subject: [PATCH 3/4] secondary dark vs light

---
 .../src/ConfiguratorStatusContext.tsx         |  10 +-
 .../InteractiveElementsTokens.tsx             | 221 ++++++++++++------
 .../configuration-builder/src/locales/en.json |   3 +
 .../src/utils/paletteUtils.ts                 |   4 +
 4 files changed, 154 insertions(+), 84 deletions(-)

diff --git a/packages/configuration-builder/src/ConfiguratorStatusContext.tsx b/packages/configuration-builder/src/ConfiguratorStatusContext.tsx
index 8c504ba02..97317f2d5 100644
--- a/packages/configuration-builder/src/ConfiguratorStatusContext.tsx
+++ b/packages/configuration-builder/src/ConfiguratorStatusContext.tsx
@@ -8,7 +8,7 @@ import {
 import { HexColor } from "./utils/colorUtils";
 import { ColorConfig } from "./ColorEditor/ColorEditor";
 import { MapLeafNodes } from "./utils/mapLeafNodes";
-import { ColorKey, ColorToken } from "./utils/paletteUtils";
+import { ColorToken, colorToken } from "./utils/paletteUtils";
 
 type BrandColors =
   | [ColorConfig]
@@ -67,10 +67,6 @@ type ConfiguratorStatus = {
 
 export const ConfiguratorStatusContext = createContext<ConfiguratorStatus | null>(null);
 
-function colorToken(colorKey: ColorKey, alpha?: number): ColorToken {
-  return { colorKey, alpha: alpha ?? 100 };
-}
-
 export const defaultTokens: TokensConfig = {
   brandColor: {
     brandPrimary: colorToken("BrandPrimary-40"),
@@ -133,8 +129,8 @@ export const defaultTokens: TokensConfig = {
     secondarySolidHoverBackground: colorToken("Neutral-20"),
     secondarySolidFocusBackground: colorToken("Neutral-20"),
     secondaryTransparentEnabledBackground: colorToken("white", 0),
-    secondaryTransparentHoverBackground: colorToken("Neutral-20", 40),
-    secondaryTransparentFocusBackground: colorToken("Neutral-20", 40),
+    secondaryTransparentHoverBackground: colorToken("Neutral-10", 40),
+    secondaryTransparentFocusBackground: colorToken("Neutral-10", 40),
     disabledSolidBackground: colorToken("Neutral-20", 20),
     disabledTransparentBackground: colorToken("white", 0),
   },
diff --git a/packages/configuration-builder/src/TokensSection/InteractiveElementsTokens.tsx b/packages/configuration-builder/src/TokensSection/InteractiveElementsTokens.tsx
index 9485eb545..f55ba923f 100644
--- a/packages/configuration-builder/src/TokensSection/InteractiveElementsTokens.tsx
+++ b/packages/configuration-builder/src/TokensSection/InteractiveElementsTokens.tsx
@@ -10,13 +10,17 @@ import {
   withBentoTheme,
   Children,
   Body,
+  SelectField,
+  Column,
 } from "@buildo/bento-design-system";
 import { ColorSelector } from "./ColorSelector";
 import { useTranslation } from "react-i18next";
-import { Playground } from "./Playground";
+import { Playground as _Playground } from "./Playground";
 import { ThemeConfig } from "../ConfiguratorStatusContext";
 import { useConfiguredTheme } from "../utils/preview";
-import { ColorKey, ColorToken, stepNames } from "../utils/paletteUtils";
+import { ColorKey, ColorToken, colorToken, stepNames } from "../utils/paletteUtils";
+import { useState } from "react";
+import { match } from "ts-pattern";
 
 type Props = {
   tokens: Pick<
@@ -37,6 +41,8 @@ function PlayGroundButtonsStack({ hierarchy, kind }: Pick<ButtonProps, "kind" |
   const theme = useConfiguredTheme();
   const { t } = useTranslation();
 
+  // Note(vince): We simulate an hovered/focused button by replacing the Enabled status tokens with
+  // the Hover/Focus ones, so that the button in the playground shows the hover/focus style when in idle state.
   const HoverButton = withBentoTheme(
     {
       interactiveBackgroundColor: {
@@ -111,13 +117,15 @@ function PlayGroundButtonsStack({ hierarchy, kind }: Pick<ButtonProps, "kind" |
   );
 }
 
-function PlaygroundExample({ hierarchy }: { hierarchy: ButtonProps["hierarchy"] }) {
+function Playground({ hierarchy }: { hierarchy: ButtonProps["hierarchy"] }) {
   return (
-    <Columns space={80}>
-      <PlayGroundButtonsStack hierarchy={hierarchy} kind="solid" />
-      <PlayGroundButtonsStack hierarchy={hierarchy} kind="outline" />
-      <PlayGroundButtonsStack hierarchy={hierarchy} kind="transparent" />
-    </Columns>
+    <_Playground>
+      <Columns space={80}>
+        <PlayGroundButtonsStack hierarchy={hierarchy} kind="solid" />
+        <PlayGroundButtonsStack hierarchy={hierarchy} kind="outline" />
+        <PlayGroundButtonsStack hierarchy={hierarchy} kind="transparent" />
+      </Columns>
+    </_Playground>
   );
 }
 
@@ -167,72 +175,135 @@ function ButtonHierarchyConfiguration(
 
   return (
     <Columns space={40}>
-      <Stack space={24}>
-        <Title size="large">{t(`Tokens.Color.${props.hierarchy}Interactive`)}</Title>
-        <Stack space={16}>
-          <ColorSelector
-            label={t("Tokens.Color.interactiveSolidBackground")}
-            value={
-              props.tokens.interactiveBackgroundColor[`${props.hierarchy}SolidEnabledBackground`]
-            }
-            onChange={(value) =>
-              props.onChange({
-                ...props.tokens,
-                interactiveBackgroundColor: {
-                  ...props.tokens.interactiveBackgroundColor,
-                  [`${props.hierarchy}SolidEnabledBackground`]: value,
-                  [`${props.hierarchy}SolidHoverBackground`]: getRelativeStep(value, 2),
-                  [`${props.hierarchy}SolidFocusBackground`]: getRelativeStep(value, 2),
-                  [`${props.hierarchy}TransparentHoverBackground`]: getPaletteStep(
-                    value.colorKey,
-                    "10",
-                    40
-                  ),
-                  [`${props.hierarchy}TransparentFocusBackground`]: getPaletteStep(
-                    value.colorKey,
-                    "10",
-                    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,
-                  [`outlineInteractive${capitalizeFirstLetter(props.hierarchy)}Focus`]:
-                    getRelativeStep(value, 2),
-                  [`outlineInteractive${capitalizeFirstLetter(props.hierarchy)}Hover`]:
-                    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,
-                },
-              })
-            }
+      <Column width="1/3">
+        <Stack space={24}>
+          <Title size="large">{t(`Tokens.Color.${props.hierarchy}Interactive`)}</Title>
+          <Stack space={16}>
+            <ColorSelector
+              label={t("Tokens.Color.interactiveSolidBackground")}
+              value={
+                props.tokens.interactiveBackgroundColor[`${props.hierarchy}SolidEnabledBackground`]
+              }
+              onChange={(value) =>
+                props.onChange({
+                  ...props.tokens,
+                  interactiveBackgroundColor: {
+                    ...props.tokens.interactiveBackgroundColor,
+                    [`${props.hierarchy}SolidEnabledBackground`]: value,
+                    [`${props.hierarchy}SolidHoverBackground`]: getRelativeStep(value, 2),
+                    [`${props.hierarchy}SolidFocusBackground`]: getRelativeStep(value, 2),
+                    [`${props.hierarchy}TransparentHoverBackground`]: getPaletteStep(
+                      value.colorKey,
+                      "10",
+                      40
+                    ),
+                    [`${props.hierarchy}TransparentFocusBackground`]: getPaletteStep(
+                      value.colorKey,
+                      "10",
+                      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,
+                    [`outlineInteractive${capitalizeFirstLetter(props.hierarchy)}Focus`]:
+                      getRelativeStep(value, 2),
+                    [`outlineInteractive${capitalizeFirstLetter(props.hierarchy)}Hover`]:
+                      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,
+                  },
+                })
+              }
+            />
+          </Stack>
+        </Stack>
+      </Column>
+      <Playground hierarchy={props.hierarchy} />
+    </Columns>
+  );
+}
+
+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>
-      </Stack>
-      <Playground>
-        <PlaygroundExample hierarchy={props.hierarchy} />
-      </Playground>
+      </Column>
+      <Playground hierarchy="secondary" />
     </Columns>
   );
 }
@@ -248,11 +319,7 @@ export function InteractiveElementsTokens(props: Props) {
         onChange={props.onChange}
         hierarchy="primary"
       />
-      <ButtonHierarchyConfiguration
-        tokens={props.tokens}
-        onChange={props.onChange}
-        hierarchy="secondary"
-      />
+      <SecondaryButtonConfiguration tokens={props.tokens} onChange={props.onChange} />
       <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 35c89f41e..42a60cb13 100644
--- a/packages/configuration-builder/src/locales/en.json
+++ b/packages/configuration-builder/src/locales/en.json
@@ -113,6 +113,9 @@
     "Tokens.Color.interactiveSolidForeground": "Solid Foreground",
     "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",
diff --git a/packages/configuration-builder/src/utils/paletteUtils.ts b/packages/configuration-builder/src/utils/paletteUtils.ts
index 03f699351..342920ad3 100644
--- a/packages/configuration-builder/src/utils/paletteUtils.ts
+++ b/packages/configuration-builder/src/utils/paletteUtils.ts
@@ -104,3 +104,7 @@ export function colorTokenToRGBA(colors: ThemeConfig["colors"]) {
     }
   };
 }
+
+export function colorToken(colorKey: ColorKey, alpha?: number): ColorToken {
+  return { colorKey, alpha: alpha ?? 100 };
+}

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 4/4] 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",