set interactive outline

buildo · Oct 4, 2023 · 3fe8757 · 3fe8757
1 parent 1924a68
commit 3fe8757
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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,
+    },
+  };
 }