Skip to content

Commit

Permalink
[wb-button-semantic] Fix primary styles, adapt secondary styles
Browse files Browse the repository at this point in the history
  • Loading branch information
Juan Andrade committed Jan 21, 2025
1 parent 4c14a55 commit 54578c2
Show file tree
Hide file tree
Showing 2 changed files with 147 additions and 63 deletions.
100 changes: 41 additions & 59 deletions packages/wonder-blocks-button/src/components/button-core.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -344,14 +344,6 @@ export const _generateStyles = (
theme: ButtonThemeContract,
themeName: string,
) => {
const colorToAction = light
? buttonColor === "destructive"
? "destructiveInverse"
: "progressiveInverse"
: buttonColor === "destructive"
? "destructive"
: "progressive";
const themeColorAction = theme.color[colorToAction];
const color: string =
buttonColor === "destructive"
? theme.color.bg.critical.default
Expand All @@ -376,34 +368,36 @@ export const _generateStyles = (

let newStyles: Record<string, CSSProperties> = {};
if (kind === "primary") {
const colorToAction = light
? buttonColor === "destructive"
? "destructiveLight"
: "progressiveLight"
: buttonColor === "destructive"
? "destructive"
: "progressive";
const themeColorAction = theme.color[colorToAction];

// Default styles
const bgColor = themeColorAction.default.background;
const textColor = themeColorAction.default.foreground;
const outlineColor = themeColorAction.default.background;

const focusStyling = {
outlineColor: light ? theme.color.light.border : outlineColor,
outlineColor: themeColorAction.default.background,
outlineOffset: theme.border.offset.primary,
outlineStyle: "solid",
outlineWidth: theme.border.width.focused,
};

const activePressedStyling = {
background: light ? fadedColor : activeColor,
outlineColor: light ? fadedColor : activeColor,
background: themeColorAction.press.background,
outlineColor: themeColorAction.press.border,
outlineOffset: theme.border.offset.primary,
outlineStyle: "solid",
outlineWidth: theme.border.width.focused,
};

const inverseBgColor = themeColorAction.default.background;
const inverseTextColor = themeColorAction.default.foreground;
const disabledBgColor = themeColorAction.disabled.background;
const disabledInverseBgColor = themeColorAction.disabled.background;
const disabledFgColor = themeColorAction.disabled.foreground;
const disabledInverseFgColor = themeColorAction.disabled.foreground;

newStyles = {
default: {
background: light ? inverseBgColor : bgColor,
color: light ? inverseTextColor : textColor,
background: themeColorAction.default.background,
color: themeColorAction.default.foreground,
paddingInline: padding,
// TODO(WB-1844): Change this when we get final designs for
// hover.
Expand All @@ -416,59 +410,50 @@ export const _generateStyles = (
focused: focusStyling,
pressed: activePressedStyling,
disabled: {
background: light ? disabledInverseBgColor : disabledBgColor,
color: light ? disabledInverseFgColor : disabledFgColor,
background: themeColorAction.disabled.background,
color: themeColorAction.disabled.foreground,
cursor: "default",
":focus-visible": {
...focusStyling,
outlineColor: light
? disabledInverseBgColor
: disabledBgColor,
outlineColor: themeColorAction.disabled.border,
},
},
};
} else if (kind === "secondary") {
const secondaryBorderColor =
buttonColor === "destructive"
? theme.color.border.secondary.critical
: theme.color.border.secondary.action;
const secondaryActiveColor =
buttonColor === "destructive"
? theme.color.bg.secondary.active.critical
: theme.color.bg.secondary.active.action;
const colorToAction = !light
? buttonColor === "destructive"
? "destructiveOutline"
: "progressiveOutline"
: buttonColor === "destructive"
? "destructiveOutlineLight"
: "progressiveOutlineLight";
const themeColorAction = theme.color[colorToAction];

const focusStyling = {
background: light
? theme.color.bg.secondary.inverse
: theme.color.bg.secondary.focus,
background: themeColorAction.hover.background,
borderColor: "transparent",
outlineColor: light ? theme.color.border.primary.inverse : color,
outlineColor: themeColorAction.hover.border,
outlineStyle: "solid",
outlineWidth: theme.border.width.focused,
};

const activePressedStyling = {
background: light ? activeColor : secondaryActiveColor,
color: light ? fadedColor : activeColor,
background: themeColorAction.press.background,
color: themeColorAction.press.foreground,
borderColor: "transparent",
outlineColor: light ? fadedColor : activeColor,
outlineColor: themeColorAction.press.border,
outlineStyle: "solid",
outlineWidth: theme.border.width.focused,
};

newStyles = {
default: {
background: light
? theme.color.bg.secondary.inverse
: theme.color.bg.secondary.default,
color: light ? theme.color.text.inverse : color,
borderColor: light
? theme.color.border.secondary.inverse
: secondaryBorderColor,
background: themeColorAction.default.background,
color: themeColorAction.default.foreground,
borderColor: themeColorAction.default.border,
borderStyle: "solid",
borderWidth: theme.border.width.secondary,
paddingLeft: padding,
paddingRight: padding,
paddingInline: padding,
// TODO(WB-1844): Change this when we get final designs for
// hover.
[":hover:not([aria-disabled=true])" as any]: focusStyling,
Expand All @@ -480,15 +465,12 @@ export const _generateStyles = (
focused: focusStyling,
pressed: activePressedStyling,
disabled: {
color: light
? theme.color.text.secondary.inverse
: theme.color.text.disabled,
outlineColor: light ? fadedColor : theme.color.border.disabled,
color: themeColorAction.disabled.foreground,
borderColor: themeColorAction.disabled.border,
cursor: "default",
":focus-visible": {
outlineColor: light
? theme.color.border.secondary.inverse
: theme.color.border.disabled,
borderColor: themeColorAction.disabled.foreground,
outlineColor: themeColorAction.disabled.foreground,
outlineStyle: "solid",
outlineWidth: theme.border.width.disabled,
},
Expand Down
110 changes: 106 additions & 4 deletions packages/wonder-blocks-button/src/themes/default.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,42 +9,144 @@ const textUnderlineOffset = tokens.spacing.xxxSmall_4;

const theme = {
color: {
// kind=primary / color=default / light=false
progressive: {
// filled
...semanticColor.action.progressive,
disabled: {
border: semanticColor.action.disabled.default,
background: semanticColor.action.disabled.default,
foreground: semanticColor.action.disabled.secondary,
},
},
progressiveInverse: {
// kind=primary / color=default / light=true
progressiveLight: {
...semanticColor.action.progressiveInverse,
press: {
...semanticColor.action.progressiveInverse.press,
border: semanticColor.action.progressiveInverse.press
.background,
},
disabled: {
border: semanticColor.action.progressiveInverse.press
.background,
background:
semanticColor.action.progressiveInverse.press.background,
foreground:
semanticColor.action.progressiveInverse.press.foreground,
semanticColor.action.progressiveInverse.default.foreground,
},
},
// outlined buttons
// kind=secondary / color=default / light=false
progressiveOutline: {
...semanticColor.action.progressiveInverse,
default: {
...semanticColor.action.progressiveInverse.default,
// NOTE: This is a special case for the secondary button
background: "transparent",
},
disabled: {
border: semanticColor.action.disabled.default,
background:
semanticColor.action.progressiveInverse.press.background,
foreground: semanticColor.text.disabled,
},
},
// kind=secondary / color=default / light=true
progressiveOutlineLight: {
default: {
border: tokens.color.white64,
background: "transparent",
foreground: semanticColor.text.inverse,
},
hover: {
border: semanticColor.border.inverse,
background: "transparent",
foreground: semanticColor.text.inverse,
},
press: {
border: semanticColor.border.inverse,
background: semanticColor.action.progressive.press.background,
foreground: semanticColor.text.inverse,
},
disabled: {
border: semanticColor.action.progressiveInverse.press
.background,
background:
semanticColor.action.progressiveInverse.press.background,
foreground: tokens.color.white50,
},
},
// kind=primary / color=destructive / light=false
destructive: {
...semanticColor.action.destructive,
disabled: {
border: semanticColor.action.disabled.default,
background: semanticColor.action.disabled.default,
foreground: semanticColor.action.disabled.secondary,
},
},
destructiveInverse: {
// kind=primary / color=destructive / light=true
destructiveLight: {
...semanticColor.action.destructiveInverse,
press: {
...semanticColor.action.destructiveInverse.press,
border: semanticColor.action.destructiveInverse.press
.background,
},
disabled: {
border: semanticColor.action.destructiveInverse.press
.background,
background:
semanticColor.action.destructiveInverse.press.background,
foreground:
semanticColor.action.destructiveInverse.press.foreground,
semanticColor.action.destructiveInverse.default.foreground,
},
},
// outlined buttons
// kind=secondary / color=destructive / light=false
destructiveOutline: {
...semanticColor.action.destructiveInverse,
disabled: {
border: semanticColor.action.disabled.default,
background:
semanticColor.action.destructiveInverse.press.background,
foreground: semanticColor.text.disabled,
},
},
// kind=secondary / color=destructive / light=true
destructiveOutlineLight: {
default: {
border: tokens.color.white64,
background: "transparent",
foreground: semanticColor.text.inverse,
},
hover: {
border: semanticColor.border.inverse,
background: "transparent",
foreground: semanticColor.text.inverse,
},
press: {
border: semanticColor.border.inverse,
background: semanticColor.action.progressive.press.background,
foreground: semanticColor.text.inverse,
},
disabled: {
border: semanticColor.action.destructiveInverse.press
.background,
background:
semanticColor.action.destructiveInverse.press.background,
foreground: tokens.color.white50,
},
},
// NOTE: These colors will be removed from WB as soon as we remove the
// light variant.
light: {
border: semanticColor.border.inverse,
borderSecondary: tokens.color.white64,
backgroundSecondary: "none",
foregroundSecondary: semanticColor.text.inverse,
disabledForegroundSecondary: tokens.color.white50,
},

bg: {
Expand Down

0 comments on commit 54578c2

Please sign in to comment.