From 133153dcfb1906b7ceb2c7998a08e61749be4eaa Mon Sep 17 00:00:00 2001 From: alston chan Date: Thu, 11 Jul 2024 10:27:56 -0400 Subject: [PATCH] fix(kit): replace all instances of legacy faint, subtle tokens with outline token --- packages/kit/src/accordion/AccordionItem.tsx | 2 +- packages/kit/src/action-menu/ActionMenuContent.tsx | 2 +- packages/kit/src/avatar/play.stories.tsx | 2 +- packages/kit/src/button/Button.tsx | 2 +- packages/kit/src/card/Card.tsx | 4 ++-- packages/kit/src/checkbox/Checkbox.tsx | 8 ++++---- packages/kit/src/divider/Divider.tsx | 2 +- packages/kit/src/input-search/InputSearchListHeading.tsx | 2 +- packages/kit/src/input-shared/InputShared.tsx | 2 +- .../kit/src/navigation-menu/NavigationMenuContent.tsx | 2 +- packages/kit/src/radio-group/RadioButton.tsx | 2 +- packages/kit/src/select/SelectGroup.tsx | 2 +- packages/kit/src/select/SelectItem.tsx | 2 +- packages/kit/src/tabs/TabsList.tsx | 2 +- packages/kit/src/tabs/TabsTrigger.tsx | 4 ++-- packages/kit/src/theme/play.stories.tsx | 2 +- packages/kit/src/tooltip/TooltipContent.tsx | 4 ++-- 17 files changed, 23 insertions(+), 23 deletions(-) diff --git a/packages/kit/src/accordion/AccordionItem.tsx b/packages/kit/src/accordion/AccordionItem.tsx index 679751afb..d84b8f363 100644 --- a/packages/kit/src/accordion/AccordionItem.tsx +++ b/packages/kit/src/accordion/AccordionItem.tsx @@ -5,7 +5,7 @@ import type * as WPDS from "../theme"; import { AccordionItemProps as RadixAccordionItemProps } from "@radix-ui/react-accordion"; const StyledAccordionItem = styled(AccordionPrimitive.Item, { - borderBottom: `1px solid ${theme.colors.subtle}`, + borderBottom: `1px solid ${theme.colors.outline}`, }); type AccordionItemProps = WPDS.VariantProps & diff --git a/packages/kit/src/action-menu/ActionMenuContent.tsx b/packages/kit/src/action-menu/ActionMenuContent.tsx index 0ebe22ef7..e17b9f8bc 100644 --- a/packages/kit/src/action-menu/ActionMenuContent.tsx +++ b/packages/kit/src/action-menu/ActionMenuContent.tsx @@ -14,7 +14,7 @@ const NAME = "ActionMenuContent"; export const ContentStyles = { background: theme.colors.secondary, - border: `solid 1px ${theme.colors.subtle}`, + border: `solid 1px ${theme.colors.outline}`, borderRadius: theme.radii["050"], boxShadow: theme.shadows["300"], color: theme.colors.primary, diff --git a/packages/kit/src/avatar/play.stories.tsx b/packages/kit/src/avatar/play.stories.tsx index ce0489deb..37389001e 100644 --- a/packages/kit/src/avatar/play.stories.tsx +++ b/packages/kit/src/avatar/play.stories.tsx @@ -35,7 +35,7 @@ export default { const defaultArgs = { size: 200, css: { - backgroundColor: theme.colors.subtle, + backgroundColor: theme.colors.outline, }, }; diff --git a/packages/kit/src/button/Button.tsx b/packages/kit/src/button/Button.tsx index 84fcc0546..183b80fbd 100644 --- a/packages/kit/src/button/Button.tsx +++ b/packages/kit/src/button/Button.tsx @@ -46,7 +46,7 @@ export const Button = styled("button", { secondary: { background: theme.colors.secondary, color: theme.colors.onSecondary, - border: "1px solid $subtle", + border: "1px solid $outline", "@hover": { "&:hover": { background: theme.colors.gray400, diff --git a/packages/kit/src/card/Card.tsx b/packages/kit/src/card/Card.tsx index d2b147907..ea5b6ab9e 100644 --- a/packages/kit/src/card/Card.tsx +++ b/packages/kit/src/card/Card.tsx @@ -1,10 +1,10 @@ import React from "react"; import type * as WPDS from "../theme"; import { theme, styled } from "../theme"; -// + const StyledCard = styled("div", { padding: theme.space["150"], - border: theme.colors.faint, + border: theme.colors.outline, borderRadius: theme.radii["012"], borderWidth: "1px", borderStyle: "solid", diff --git a/packages/kit/src/checkbox/Checkbox.tsx b/packages/kit/src/checkbox/Checkbox.tsx index 6d24bb140..cc48b5085 100644 --- a/packages/kit/src/checkbox/Checkbox.tsx +++ b/packages/kit/src/checkbox/Checkbox.tsx @@ -34,11 +34,11 @@ const StyledCheckbox = styled(PrimitiveCheckbox.Root, { $$color: "$colors$onDisabled", borderColor: "$colors$onDisabled", - color: theme.colors.subtle, + color: theme.colors.outline, }, "&[aria-checked='false']:not(:disabled)": { - borderColor: "$colors$subtle", + borderColor: "$colors$outline", }, variants: { @@ -84,7 +84,7 @@ const StyledCheckbox = styled(PrimitiveCheckbox.Root, { css: { "&:not([aria-checked='false']):not(:disabled)": { $$backgroundColor: "$colors$secondary", - $$color: "$colors$subtle", + $$color: "$colors$outline", }, }, }, @@ -141,7 +141,7 @@ const StyledIndicator = styled(PrimitiveCheckbox.Indicator, { disabled: { true: { $$variantColor: "$colors$disabled", - borderColor: "$colors$subtle", + borderColor: "$colors$outline", color: "$colors$onDisabled", }, }, diff --git a/packages/kit/src/divider/Divider.tsx b/packages/kit/src/divider/Divider.tsx index 3775f811b..31e6932b4 100644 --- a/packages/kit/src/divider/Divider.tsx +++ b/packages/kit/src/divider/Divider.tsx @@ -12,7 +12,7 @@ const StyledSeparator = Theme.styled(Separator.Root, { variants: { variant: { default: { - backgroundColor: Theme.theme.colors.faint, + backgroundColor: Theme.theme.colors.outline, }, strong: { backgroundColor: Theme.theme.colors.primary, diff --git a/packages/kit/src/input-search/InputSearchListHeading.tsx b/packages/kit/src/input-search/InputSearchListHeading.tsx index fe2d45d8f..ac978cf52 100644 --- a/packages/kit/src/input-search/InputSearchListHeading.tsx +++ b/packages/kit/src/input-search/InputSearchListHeading.tsx @@ -9,7 +9,7 @@ import type { Node } from "@react-types/shared"; import type * as WPDS from "../theme"; const StyledListItem = styled("li", { - borderBlockStart: `1px solid ${theme.colors.faint}`, + borderBlockStart: `1px solid ${theme.colors.outline}`, color: theme.colors.accessible, fontSize: theme.fontSizes["087"], marginBlockStart: "$050", diff --git a/packages/kit/src/input-shared/InputShared.tsx b/packages/kit/src/input-shared/InputShared.tsx index 0e6632faa..d779dcd8f 100644 --- a/packages/kit/src/input-shared/InputShared.tsx +++ b/packages/kit/src/input-shared/InputShared.tsx @@ -9,7 +9,7 @@ export const FloatingLabelStyles = { export const sharedInputStyles = { borderRadius: theme.radii["012"], - borderColor: theme.colors.subtle, + borderColor: theme.colors.outline, borderStyle: "solid", borderWidth: "1px", backgroundColor: theme.colors.secondary, diff --git a/packages/kit/src/navigation-menu/NavigationMenuContent.tsx b/packages/kit/src/navigation-menu/NavigationMenuContent.tsx index 582b37724..bc83efafc 100644 --- a/packages/kit/src/navigation-menu/NavigationMenuContent.tsx +++ b/packages/kit/src/navigation-menu/NavigationMenuContent.tsx @@ -13,7 +13,7 @@ const NAME = "NavigationMenuContent"; const StyledNavigationMenuContent = styled(NavigationMenuPrimitive.Content, { background: theme.colors.secondary, - border: `solid 1px ${theme.colors.subtle}`, + border: `solid 1px ${theme.colors.outline}`, borderRadius: theme.radii["012"], boxShadow: theme.shadows["200"], minWidth: "150px", diff --git a/packages/kit/src/radio-group/RadioButton.tsx b/packages/kit/src/radio-group/RadioButton.tsx index 083d6b496..3b75503cd 100644 --- a/packages/kit/src/radio-group/RadioButton.tsx +++ b/packages/kit/src/radio-group/RadioButton.tsx @@ -13,7 +13,7 @@ const ContainerCSS = Theme.css({ const StyledRadioButton = Theme.styled(RadioGroupPrimitive.Item, { backgroundColor: Theme.theme.colors.onPrimary, - borderColor: Theme.theme.colors.subtle, + borderColor: Theme.theme.colors.outline, borderStyle: "solid", borderRadius: "50%", borderWidth: "1px", diff --git a/packages/kit/src/select/SelectGroup.tsx b/packages/kit/src/select/SelectGroup.tsx index 225fd1c54..2c0a8caf1 100644 --- a/packages/kit/src/select/SelectGroup.tsx +++ b/packages/kit/src/select/SelectGroup.tsx @@ -48,7 +48,7 @@ export const SelectGroup = React.forwardRef( {children} - + ) diff --git a/packages/kit/src/select/SelectItem.tsx b/packages/kit/src/select/SelectItem.tsx index b81689a29..bf09cbe51 100644 --- a/packages/kit/src/select/SelectItem.tsx +++ b/packages/kit/src/select/SelectItem.tsx @@ -24,7 +24,7 @@ const StyledItem = styled(SelectPrimitive.Item, { }, "&[data-highlighted]": { - backgroundColor: theme.colors.faint, + backgroundColor: theme.colors.outline, cursor: "pointer", }, }); diff --git a/packages/kit/src/tabs/TabsList.tsx b/packages/kit/src/tabs/TabsList.tsx index 1e12b194a..f2235f9d6 100644 --- a/packages/kit/src/tabs/TabsList.tsx +++ b/packages/kit/src/tabs/TabsList.tsx @@ -8,7 +8,7 @@ import { styled, theme } from "../theme"; const StyledTabsList = styled(TabsPrimitive.List, { flexShrink: 0, display: "flex", - boxShadow: `inset 0 -1px 0 0 ${theme.colors.faint}, 0 0 0 0 ${theme.colors.faint}`, + boxShadow: `inset 0 -1px 0 0 ${theme.colors.outline}, 0 0 0 0 ${theme.colors.outline}`, gap: theme.space["075"], overflow: "auto", width: "fit-content", diff --git a/packages/kit/src/tabs/TabsTrigger.tsx b/packages/kit/src/tabs/TabsTrigger.tsx index addd10bd1..e35246a89 100644 --- a/packages/kit/src/tabs/TabsTrigger.tsx +++ b/packages/kit/src/tabs/TabsTrigger.tsx @@ -84,10 +84,10 @@ const StyledTabsTrigger = styled(TabsPrimitive.Trigger, { // styling when the element is disabled "&[disabled]": { - color: theme.colors.subtle, + color: theme.colors.outline, "&:hover::after": { ...afterConsts, - borderBottom: `1px solid ${theme.colors.faint}`, + borderBottom: `1px solid ${theme.colors.outline}`, }, }, }); diff --git a/packages/kit/src/theme/play.stories.tsx b/packages/kit/src/theme/play.stories.tsx index 7a8126bef..a43903f87 100644 --- a/packages/kit/src/theme/play.stories.tsx +++ b/packages/kit/src/theme/play.stories.tsx @@ -50,7 +50,7 @@ const StyledBox = styled("div", { fontWeight: theme.fontWeights.bold, }, false: { - backgroundColor: theme.colors.subtle, + backgroundColor: theme.colors.outline, }, }, }, diff --git a/packages/kit/src/tooltip/TooltipContent.tsx b/packages/kit/src/tooltip/TooltipContent.tsx index 9db250ba4..2fad9146d 100644 --- a/packages/kit/src/tooltip/TooltipContent.tsx +++ b/packages/kit/src/tooltip/TooltipContent.tsx @@ -40,7 +40,7 @@ const StyledContentWrapper = styled(TooltipPrimitive.Content, { borderRadius: theme.radii["012"], padding: theme.space["050"], color: theme.colors.primary, - border: `solid 1px ${theme.colors.subtle}`, + border: `solid 1px ${theme.colors.outline}`, backgroundColor: theme.colors.secondary, width: "144px", //set width as per design specs userSelect: "none", @@ -120,7 +120,7 @@ export const TooltipContent = forwardRef< > {children}