feat(tabs): new light/dark mode colors (#1843)

ze-flo · web-flow · commit 4a4b92ddb5ff · 2024-06-26T15:07:33.000-07:00
diff --git a/packages/tabs/src/elements/Tab.tsx b/packages/tabs/src/elements/Tab.tsx
@@ -27,7 +27,7 @@ export const Tab = React.forwardRef<HTMLDivElement, ITabProps>(
           role="tab"
           aria-disabled={disabled}
           ref={ref}
-          isVertical={tabsPropGetters?.isVertical}
+          $isVertical={tabsPropGetters?.isVertical}
           {...otherProps}
         />
       );
@@ -39,8 +39,8 @@ export const Tab = React.forwardRef<HTMLDivElement, ITabProps>(
 
     return (
       <StyledTab
-        isSelected={item === tabsPropGetters.selectedValue}
-        isVertical={tabsPropGetters.isVertical}
+        $isSelected={item === tabsPropGetters.selectedValue}
+        $isVertical={tabsPropGetters.isVertical}
         {...tabProps}
         {...otherProps}
         ref={mergeRefs([tabRef, ref])}
diff --git a/packages/tabs/src/elements/TabList.tsx b/packages/tabs/src/elements/TabList.tsx
@@ -27,7 +27,7 @@ export const TabList = React.forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivEl
 
     return (
       <StyledTabList
-        isVertical={tabsPropGetters.isVertical}
+        $isVertical={tabsPropGetters.isVertical}
         {...tabListProps}
         {...props}
         ref={ref}
diff --git a/packages/tabs/src/elements/TabPanel.tsx b/packages/tabs/src/elements/TabPanel.tsx
@@ -31,7 +31,7 @@ export const TabPanel = React.forwardRef<HTMLDivElement, ITabPanelProps>(
     return (
       <StyledTabPanel
         aria-hidden={tabsPropGetters.selectedValue !== item}
-        isVertical={tabsPropGetters.isVertical}
+        $isVertical={tabsPropGetters.isVertical}
         {...tabPanelProps}
         {...otherProps}
         ref={ref}
diff --git a/packages/tabs/src/elements/Tabs.tsx b/packages/tabs/src/elements/Tabs.tsx
@@ -52,7 +52,7 @@ export const TabsComponent = forwardRef<HTMLDivElement, ITabsProps>(
 
     return (
       <TabsContext.Provider value={contextValue}>
-        <StyledTabs isVertical={isVertical} {...otherProps} ref={ref}>
+        <StyledTabs $isVertical={isVertical} {...otherProps} ref={ref}>
           {children}
         </StyledTabs>
       </TabsContext.Provider>
diff --git a/packages/tabs/src/styled/StyledTab.ts b/packages/tabs/src/styled/StyledTab.ts
@@ -8,31 +8,38 @@
 import styled, { DefaultTheme, css, ThemeProps } from 'styled-components';
 import {
   DEFAULT_THEME,
-  getColorV8,
   focusStyles,
-  retrieveComponentStyles
+  retrieveComponentStyles,
+  getColor
 } from '@zendeskgarden/react-theming';
 import { stripUnit } from 'polished';
 
 const COMPONENT_ID = 'tabs.tab';
 
 interface IStyledTabProps {
-  isSelected?: boolean;
-  isVertical?: boolean;
+  $isSelected?: boolean;
+  $isVertical?: boolean;
 }
 
 const colorStyles = ({
   theme,
-  isSelected,
-  isVertical
+  $isSelected,
+  $isVertical
 }: IStyledTabProps & ThemeProps<DefaultTheme>) => {
-  const borderColor = isSelected ? 'currentcolor' : 'transparent';
-  const selectedColor = getColorV8('primaryHue', 600, theme);
+  const borderColor = $isSelected
+    ? getColor({ theme, variable: 'border.primaryEmphasis' })
+    : 'transparent';
+  const borderBlockEndColor = $isVertical ? undefined : borderColor;
+  const borderInlineColor = $isVertical ? borderColor : undefined;
+
+  const selectedColor = getColor({ theme, variable: 'foreground.primary' });
+  const foregroundColor = $isSelected ? selectedColor : 'inherit';
+  const disabledColor = getColor({ theme, variable: 'foreground.disabled' });
 
   return css`
-    border-bottom-color: ${isVertical ? undefined : borderColor};
-    border-${theme.rtl ? 'right' : 'left'}-color: ${isVertical ? borderColor : undefined};
-    color: ${isSelected ? selectedColor : 'inherit'};
+    border-bottom-color: ${borderBlockEndColor};
+    border-${theme.rtl ? 'right' : 'left'}-color: ${borderInlineColor};
+    color: ${foregroundColor};
 
     &:hover {
       color: ${selectedColor};
@@ -54,18 +61,18 @@ const colorStyles = ({
 
     &[aria-disabled='true'] {
       border-color: transparent;
-      color: ${props => getColorV8('neutralHue', 400, props.theme)};
+      color: ${disabledColor};
     }
   `;
 };
 
-const sizeStyles = ({ theme, isVertical }: IStyledTabProps & ThemeProps<DefaultTheme>) => {
+const sizeStyles = ({ theme, $isVertical }: IStyledTabProps & ThemeProps<DefaultTheme>) => {
   const borderWidth = theme.borderWidths.md;
   const focusHeight = `${theme.space.base * 5}px`;
   let marginBottom;
   let padding;
 
-  if (isVertical) {
+  if ($isVertical) {
     marginBottom = `${theme.space.base * 5}px`;
     padding = `${theme.space.base}px ${theme.space.base * 2}px`;
   } else {
@@ -104,17 +111,17 @@ export const StyledTab = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
 })<IStyledTabProps>`
-  display: ${props => (props.isVertical ? 'block' : 'inline-block')};
+  display: ${props => (props.$isVertical ? 'block' : 'inline-block')};
   position: relative;
   transition: color 0.25s ease-in-out;
-  border-bottom: ${props => (props.isVertical ? undefined : props.theme.borderStyles.solid)};
-  border-${props => (props.theme.rtl ? 'right' : 'left')}: ${props => (props.isVertical ? props.theme.borderStyles.solid : undefined)};
+  border-bottom: ${props => (props.$isVertical ? undefined : props.theme.borderStyles.solid)};
+  border-${props => (props.theme.rtl ? 'right' : 'left')}: ${props => (props.$isVertical ? props.theme.borderStyles.solid : undefined)};
   cursor: pointer;
   overflow: hidden; /* [1] */
   vertical-align: top; /* [2] */
   user-select: none;
   text-align: ${props => {
-    if (props.isVertical) {
+    if (props.$isVertical) {
       return props.theme.rtl ? 'right' : 'left';
     }
 
@@ -138,9 +145,9 @@ export const StyledTab = styled.div.attrs({
 
   &:focus-visible::before {
     position: absolute;
-    top: ${props => props.theme.space.base * (props.isVertical ? 1 : 2.5)}px;
-    right: ${props => props.theme.space.base * (props.isVertical ? 1 : 6)}px;
-    left: ${props => props.theme.space.base * (props.isVertical ? 1 : 6)}px;
+    top: ${props => props.theme.space.base * (props.$isVertical ? 1 : 2.5)}px;
+    right: ${props => props.theme.space.base * (props.$isVertical ? 1 : 6)}px;
+    left: ${props => props.theme.space.base * (props.$isVertical ? 1 : 6)}px;
     border-radius: ${props => props.theme.borderRadii.md};
     pointer-events: none;
   }
diff --git a/packages/tabs/src/styled/StyledTabList.ts b/packages/tabs/src/styled/StyledTabList.ts
@@ -8,20 +8,20 @@
 import styled, { DefaultTheme, ThemeProps, css } from 'styled-components';
 import {
   retrieveComponentStyles,
-  getColorV8,
   DEFAULT_THEME,
-  getLineHeight
+  getLineHeight,
+  getColor
 } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'tabs.tablist';
 
 interface IStyledTabListProps {
-  isVertical?: boolean;
+  $isVertical?: boolean;
 }
 
 const colorStyles = ({ theme }: ThemeProps<DefaultTheme>) => {
-  const borderColor = getColorV8('neutralHue', 300, theme);
-  const foregroundColor = getColorV8('neutralHue', 600, theme);
+  const borderColor = getColor({ theme, variable: 'border.default' });
+  const foregroundColor = getColor({ theme, variable: 'foreground.default' });
 
   return css`
     border-bottom-color: ${borderColor};
@@ -32,9 +32,9 @@ const colorStyles = ({ theme }: ThemeProps<DefaultTheme>) => {
 /*
  * 1. List element reset.
  */
-const sizeStyles = ({ theme, isVertical }: IStyledTabListProps & ThemeProps<DefaultTheme>) => {
-  const marginBottom = isVertical ? 0 : `${theme.space.base * 5}px`;
-  const borderBottom = isVertical ? undefined : theme.borderWidths.sm;
+const sizeStyles = ({ theme, $isVertical }: IStyledTabListProps & ThemeProps<DefaultTheme>) => {
+  const marginBottom = $isVertical ? 0 : `${theme.space.base * 5}px`;
+  const borderBottom = $isVertical ? undefined : theme.borderWidths.sm;
   const fontSize = theme.fontSizes.md;
   const lineHeight = getLineHeight(theme.space.base * 5, fontSize);
 
@@ -52,9 +52,9 @@ export const StyledTabList = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
 })<IStyledTabListProps>`
-  display: ${props => (props.isVertical ? 'table-cell' : 'block')};
-  border-bottom: ${props => (props.isVertical ? 'none' : props.theme.borderStyles.solid)};
-  vertical-align: ${props => (props.isVertical ? 'top' : undefined)};
+  display: ${props => (props.$isVertical ? 'table-cell' : 'block')};
+  border-bottom: ${props => (props.$isVertical ? 'none' : props.theme.borderStyles.solid)};
+  vertical-align: ${props => (props.$isVertical ? 'top' : undefined)};
   white-space: nowrap;
 
   ${sizeStyles};
diff --git a/packages/tabs/src/styled/StyledTabPanel.ts b/packages/tabs/src/styled/StyledTabPanel.ts
@@ -11,11 +11,11 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'tabs.tabpanel';
 
 interface IStyledTabPanelProps {
-  isVertical?: boolean;
+  $isVertical?: boolean;
 }
 
-const sizeStyles = ({ theme, isVertical }: IStyledTabPanelProps & ThemeProps<DefaultTheme>) => {
-  const margin = isVertical ? `${theme.space.base * 8}px` : undefined;
+const sizeStyles = ({ theme, $isVertical }: IStyledTabPanelProps & ThemeProps<DefaultTheme>) => {
+  const margin = $isVertical ? `${theme.space.base * 8}px` : undefined;
 
   return css`
     margin-${theme.rtl ? 'right' : 'left'}: ${margin};
@@ -27,7 +27,7 @@ export const StyledTabPanel = styled.div.attrs({
   'data-garden-version': PACKAGE_VERSION
 })<IStyledTabPanelProps>`
   display: block;
-  vertical-align: ${props => props.isVertical && 'top'};
+  vertical-align: ${props => props.$isVertical && 'top'};
 
   ${sizeStyles};
 
diff --git a/packages/tabs/src/styled/StyledTabs.ts b/packages/tabs/src/styled/StyledTabs.ts
@@ -11,7 +11,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'tabs.tabs';
 
 interface IStyledTabsProps {
-  isVertical?: boolean;
+  $isVertical?: boolean;
 }
 
 /**
@@ -21,7 +21,7 @@ export const StyledTabs = styled.div.attrs<IStyledTabsProps>({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
 })<IStyledTabsProps>`
-  display: ${props => (props.isVertical ? 'table' : 'block')};
+  display: ${props => (props.$isVertical ? 'table' : 'block')};
   overflow: hidden;
   direction: ${props => props.theme.rtl && 'rtl'};
 
