Skip to content

Commit

Permalink
add outline/transparent tokens in guided mode, fix secondary buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
@veej
veej committed Oct 9, 2023
1 parent aefe15f commit 3479853
Show file tree
Hide file tree
Showing 2 changed files with 56 additions and 98 deletions.
150 changes: 55 additions & 95 deletions packages/configuration-builder/src/TokensSection/InteractiveElementsTokens.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,14 @@ import {
withBentoTheme,
Children,
Body,
SelectField,
Column,
} from "@buildo/bento-design-system";
import { ColorSelector } from "./ColorSelector";
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<
Expand Down Expand Up @@ -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>
);
Expand Down Expand Up @@ -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",
Expand All @@ -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,
Expand All @@ -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>
Expand All @@ -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();

Expand All @@ -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}
Expand Down
4 changes: 1 addition & 3 deletions packages/configuration-builder/src/locales/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down

0 comments on commit 3479853

Please sign in to comment.