Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WB-1814.4] Refactor Accordion, Banner, BirthdayPicker to use semantic colors #2446

Merged
merged 3 commits into from
Jan 31, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .changeset/gorgeous-adults-lay.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
"@khanacademy/wonder-blocks-birthday-picker": patch
"@khanacademy/wonder-blocks-accordion": patch
"@khanacademy/wonder-blocks-banner": patch
---

Replace `color` with `semanticColor` tokens
4 changes: 4 additions & 0 deletions __docs__/wonder-blocks-accordion/accordion.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -611,6 +611,10 @@ export const BackgroundColorExample: StoryComponentType = {
render: () => {
const accordionSectionStyle = {
backgroundColor: tokens.color.fadedBlue,
// NOTE: This border color uses the opacity token to match the
// background color. By default, the border color is
// `fadedOffBlack16`, which is the HEX value of `offBlack16`.
borderColor: tokens.color.offBlack16,
};

const sections = [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import Clickable from "@khanacademy/wonder-blocks-clickable";
import {View} from "@khanacademy/wonder-blocks-core";
import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
import {HeadingSmall} from "@khanacademy/wonder-blocks-typography";
import * as tokens from "@khanacademy/wonder-blocks-tokens";
import {spacing, semanticColor} from "@khanacademy/wonder-blocks-tokens";
import type {StyleType} from "@khanacademy/wonder-blocks-core";

import type {AccordionCornerKindType} from "./accordion";
Expand Down Expand Up @@ -125,7 +125,7 @@ const AccordionSectionHeader = React.forwardRef(function AccordionSectionHeader(
{collapsible && (
<PhosphorIcon
icon={caretDown}
color={tokens.color.offBlack64}
color={semanticColor.icon.primary}
size="small"
style={[
animated && styles.iconWithAnimation,
Expand All @@ -150,7 +150,7 @@ const AccordionSectionHeader = React.forwardRef(function AccordionSectionHeader(
// If we set the inner radius to the same value, there ends up being
// a 1px gap between the border and the outline. To fix this, we
// subtract 1 from the border radius.
const INNER_BORDER_RADIUS = tokens.spacing.small_12 - 1;
const INNER_BORDER_RADIUS = spacing.small_12 - 1;
const ANIMATION_LENGTH = "300ms";

const styles = StyleSheet.create({
Expand All @@ -176,27 +176,15 @@ const styles = StyleSheet.create({
zIndex: 1,

":active": {
outline: `2px solid ${tokens.color.activeBlue}`,
outline: `2px solid ${semanticColor.action.outlined.progressive.press.border}`,
},

":hover": {
outline: `2px solid ${tokens.color.blue}`,
},

// Provide basic, default focus styles on older browsers (e.g.
// Safari 14)
":focus": {
boxShadow: `0 0 0 2px ${tokens.color.blue}`,
},
Comment on lines -186 to -190
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

note: We now support Safari v14+, so I dropped this.


// Remove default focus styles for mouse users ONLY if
// :focus-visible is supported on this platform.
":focus:not(:focus-visible)": {
boxShadow: "none",
outline: `2px solid ${semanticColor.border.focus}`,
},

":focus-visible": {
outline: `2px solid ${tokens.color.blue}`,
outline: `2px solid ${semanticColor.border.focus}`,
},
},
headerWrapperWithAnimation: {
Expand All @@ -222,16 +210,16 @@ const styles = StyleSheet.create({
textAlign: "start",
},
headerString: {
paddingTop: tokens.spacing.medium_16,
paddingBottom: tokens.spacing.medium_16,
paddingTop: spacing.medium_16,
paddingBottom: spacing.medium_16,
},
headerStringCaretEnd: {
paddingInlineEnd: tokens.spacing.small_12,
paddingInlineStart: tokens.spacing.medium_16,
paddingInlineEnd: spacing.small_12,
paddingInlineStart: spacing.medium_16,
},
headerStringCaretStart: {
paddingInlineEnd: tokens.spacing.medium_16,
paddingInlineStart: tokens.spacing.small_12,
paddingInlineEnd: spacing.medium_16,
paddingInlineStart: spacing.small_12,
},
iconWithAnimation: {
transition: `transform ${ANIMATION_LENGTH}`,
Expand All @@ -241,29 +229,18 @@ const styles = StyleSheet.create({
transform: "rotate(180deg)",
},
iconStart: {
marginInlineStart: tokens.spacing.medium_16,
marginInlineStart: spacing.medium_16,
},
iconEnd: {
marginInlineEnd: tokens.spacing.medium_16,
marginInlineEnd: spacing.medium_16,
},
disabled: {
pointerEvents: "none",
color: "inherit",

// Provide basic, default focus styles on older browsers (e.g.
// Safari 14)
":focus": {
boxShadow: `0 0 0 2px ${tokens.color.offBlack32}`,
},

// Remove default focus styles for mouse users ONLY if
// :focus-visible is supported on this platform.
":focus:not(:focus-visible)": {
boxShadow: "none",
},

":focus-visible": {
outline: `2px solid ${tokens.color.offBlack32}`,
// TODO(WB-1856): Verify if we can use the global focus color
outline: `2px solid ${semanticColor.action.disabled.default}`,
},
},
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import {StyleSheet} from "aphrodite";
import type {StyleDeclaration} from "aphrodite";

import {View} from "@khanacademy/wonder-blocks-core";
import * as tokens from "@khanacademy/wonder-blocks-tokens";
import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
import {Body} from "@khanacademy/wonder-blocks-typography";
import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";

Expand Down Expand Up @@ -311,7 +311,7 @@ const styles = StyleSheet.create({
// vertically stacked.
position: "static",
boxSizing: "border-box",
backgroundColor: tokens.color.white,
backgroundColor: semanticColor.surface.primary,
},
wrapperWithAnimation: {
transition: "grid-template-rows 300ms",
Expand All @@ -334,7 +334,7 @@ const styles = StyleSheet.create({
visibility: "visible",
},
stringContent: {
padding: tokens.spacing.medium_16,
padding: spacing.medium_16,
},
});

Expand All @@ -355,38 +355,40 @@ const _generateStyles = (
let firstSectionStyle: StyleType = Object.freeze({});
let lastSectionStyle: StyleType = Object.freeze({});

const borderStyle = `1px solid ${semanticColor.border.primary}`;

if (cornerKind === "square") {
wrapperStyle = {
border: `1px solid ${tokens.color.offBlack16}`,
border: borderStyle,
borderBottom: "none",
borderRadius: 0,
};

if (isLastSection) {
lastSectionStyle = {
borderBottom: `1px solid ${tokens.color.offBlack16}`,
borderBottom: borderStyle,
};
}
}

if (cornerKind === "rounded") {
wrapperStyle = {
border: `1px solid ${tokens.color.offBlack16}`,
border: borderStyle,
borderBottom: "none",
};

if (isFirstSection) {
firstSectionStyle = {
borderStartStartRadius: tokens.spacing.small_12,
borderStartEndRadius: tokens.spacing.small_12,
borderStartStartRadius: spacing.small_12,
borderStartEndRadius: spacing.small_12,
};
}

if (isLastSection) {
lastSectionStyle = {
borderBottom: `1px solid ${tokens.color.offBlack16}`,
borderEndStartRadius: tokens.spacing.small_12,
borderEndEndRadius: tokens.spacing.small_12,
borderBottom: borderStyle,
borderEndStartRadius: spacing.small_12,
borderEndEndRadius: spacing.small_12,
};

contentWrapperStyle = {
Expand All @@ -395,26 +397,26 @@ const _generateStyles = (
// overflow out the corners. This issue can't be solved by
// putting `overflow: "hidden"` on the overall container
// because that cuts off the header's focus outline.
borderEndEndRadius: tokens.spacing.small_12,
borderEndStartRadius: tokens.spacing.small_12,
borderEndEndRadius: spacing.small_12,
borderEndStartRadius: spacing.small_12,
};
}
}

if (cornerKind === "rounded-per-section") {
wrapperStyle = {
border: `1px solid ${tokens.color.offBlack16}`,
borderRadius: tokens.spacing.small_12,
marginBottom: tokens.spacing.medium_16,
border: borderStyle,
borderRadius: spacing.small_12,
marginBottom: spacing.medium_16,
};

contentWrapperStyle = {
// Give the content wrapper the same border radius as the wrapper
// so that the content doesn't overflow out the corners. We
// can't put `overflow: "hidden"` on the overall container
// because it cuts off the header's focus outline.
borderEndEndRadius: tokens.spacing.small_12,
borderEndStartRadius: tokens.spacing.small_12,
borderEndEndRadius: spacing.small_12,
borderEndStartRadius: spacing.small_12,
};
}

Expand Down
18 changes: 10 additions & 8 deletions packages/wonder-blocks-banner/src/components/banner.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {View} from "@khanacademy/wonder-blocks-core";
import {PhosphorIcon, PhosphorIconAsset} from "@khanacademy/wonder-blocks-icon";
import IconButton from "@khanacademy/wonder-blocks-icon-button";
import Link from "@khanacademy/wonder-blocks-link";
import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
import {font, semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
import {LabelSmall} from "@khanacademy/wonder-blocks-typography";

import infoIcon from "@phosphor-icons/core/regular/info.svg";
Expand Down Expand Up @@ -131,26 +131,26 @@ const getValuesForKind = (kind: BannerKind): BannerValues => {
switch (kind) {
case "success":
return {
color: color.green,
color: semanticColor.status.success.foreground,
icon: successIcon,
role: "status",
};
case "warning":
return {
color: color.gold,
color: semanticColor.status.warning.foreground,
icon: warningIcon,
role: "alert",
ariaLive: "polite",
};
case "critical":
return {
color: color.red,
color: semanticColor.status.critical.foreground,
icon: criticalIcon,
role: "alert",
};
default:
return {
color: color.blue,
color: semanticColor.status.notice.foreground,
icon: infoIcon,
role: "status",
};
Expand Down Expand Up @@ -313,7 +313,9 @@ const styles = StyleSheet.create({
// the base color needs to be hard-coded as white for the
// intended pastel background color to show up correctly
// on dark backgrounds.
backgroundColor: color.white,
// TODO(WB-1865): Verify if we can change this to use semanticColor
// status tokens.
backgroundColor: semanticColor.surface.primary,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ohh interesting, we don't use the semantic background colors for the background of the banner (we rely on opacity). Do we want to use the semantic background tokens?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good question! tbh I'm not sure how this will be handled with the Polaris theme. I'm going to revisit this once we add theming support to banner. I'll add a TODO comment to make sure we track this.

},
containerInner: {
flexDirection: "row",
Expand All @@ -328,7 +330,7 @@ const styles = StyleSheet.create({
marginInlineStart: spacing.xxxxSmall_2,
marginInlineEnd: spacing.xSmall_8,
alignSelf: "flex-start",
color: color.offBlack64,
color: semanticColor.icon.primary,
},
labelAndButtonsContainer: {
flex: 1,
Expand Down Expand Up @@ -359,7 +361,7 @@ const styles = StyleSheet.create({
justifyContent: "center",
},
link: {
fontSize: 14,
fontSize: font.size.small,
},
dismiss: {
flexShrink: 1,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import * as React from "react";
import {StyleSheet} from "aphrodite";
import {StyleType, View} from "@khanacademy/wonder-blocks-core";
import {Strut} from "@khanacademy/wonder-blocks-layout";
import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
import {Body} from "@khanacademy/wonder-blocks-typography";
import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
import {SingleSelect, OptionItem} from "@khanacademy/wonder-blocks-dropdown";
Expand Down Expand Up @@ -284,11 +284,17 @@ export default class BirthdayPicker extends React.Component<Props, State> {
<PhosphorIcon
size="small"
icon={infoIcon}
color={color.red}
color={semanticColor.icon.destructive}
aria-hidden="true"
/>
<Strut size={spacing.xxxSmall_4} />
<Body style={{color: color.red}}>{error}</Body>
<Body
style={{
color: semanticColor.status.critical.foreground,
}}
>
{error}
</Body>
</View>
</>
);
Expand Down