fix(kit): replace all instances of legacy faint, subtle tokens with outline token

Author: alstnc

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<typeof StyledAccordionItem> &

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,

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,
   },
 };
 

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,

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",

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",
       },
     },

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,

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",

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,

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",

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",

packages/kit/src/select/SelectGroup.tsx

@@ -48,7 +48,7 @@ export const SelectGroup = React.forwardRef<HTMLDivElement, SelectGroupProps>(
         {children}
       </StyledSelectGroup>
       <DividerContainer>
-        <Divider css={{ backgroundColor: theme.colors.subtle }} />
+        <Divider css={{ backgroundColor: theme.colors.outline }} />
       </DividerContainer>
     </>
   )

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",
   },
 });

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",

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}`,
     },
   },
 });

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,
       },
     },
   },

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}
           <StyledArrow
-            stroke={theme.colors.subtle.value}
+            stroke={theme.colors.outline.value}
             strokeWidth="2"
             strokeDasharray="0 30 28.284"
           />