feat(forms): new light/dark mode colors (#1838)

Author: jzempel

packages/buttons/src/styled/StyledButton.ts

@@ -182,13 +182,14 @@ const colorStyles = ({
 
         if (isNeutral) {
           borderColor = getColor({ theme, variable: 'border.default', ...offset100 });
-          focusBorderColor = getColor(borderOptions);
+          hoverBorderColor = getColor(borderOptions);
+          focusBorderColor = hoverBorderColor;
+          activeBorderColor = getColor({ ...borderOptions, ...offset100 });
         } else {
           borderColor = getColor(borderOptions);
+          hoverBorderColor = getColor({ ...borderOptions, ...offset100 });
+          activeBorderColor = getColor({ ...borderOptions, ...offset200 });
         }
-
-        hoverBorderColor = getColor({ ...borderOptions, ...offset100 });
-        activeBorderColor = getColor({ ...borderOptions, ...offset200 });
       }
 
       backgroundVariable = 'background.primaryEmphasis';

packages/forms/demo/fileUpload.stories.mdx

@@ -24,6 +24,7 @@ import README from '../README.md';
       ...commonArgs
     }}
     argTypes={{
+      tabIndex: { control: 'number' },
       ...commonArgTypes
     }}
     parameters={{

packages/forms/demo/input.stories.mdx

@@ -20,22 +20,22 @@ import README from '../README.md';
     placeholder: { control: 'text' },
     type: {
       control: {
-        type: 'select',
-        options: [
-          'date',
-          'datetime-local',
-          'email',
-          'month',
-          'number',
-          'password',
-          'search',
-          'tel',
-          'text',
-          'time',
-          'url',
-          'week'
-        ]
-      }
+        type: 'select'
+      },
+      options: [
+        'date',
+        'datetime-local',
+        'email',
+        'month',
+        'number',
+        'password',
+        'search',
+        'tel',
+        'text',
+        'time',
+        'url',
+        'week'
+      ]
     }
   }}
   parameters={{

packages/forms/src/elements/FileUpload.spec.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { PALETTE } from '@zendeskgarden/react-theming';
 import { rgba } from 'polished';
 import { render, renderRtl } from 'garden-test-utils';
 import { FileUpload } from './FileUpload';
@@ -34,11 +34,8 @@ describe('FileUpload', () => {
   it('renders correct styling when isDragging is active', () => {
     const { container } = render(<FileUpload isDragging />);
 
-    const activeColor = getColorV8('primaryHue', 800, DEFAULT_THEME);
-    const activeBackgroundColor = rgba(getColorV8('primaryHue', 600, DEFAULT_THEME) as string, 0.2);
-
-    expect(container.firstChild).toHaveStyleRule('color', activeColor);
-    expect(container.firstChild).toHaveStyleRule('background-color', activeBackgroundColor);
-    expect(container.firstChild).toHaveStyleRule('border-color', activeColor);
+    expect(container.firstChild).toHaveStyleRule('color', PALETTE.blue[900]);
+    expect(container.firstChild).toHaveStyleRule('background-color', rgba(PALETTE.blue[700], 0.16));
+    expect(container.firstChild).toHaveStyleRule('border-color', PALETTE.blue[900]);
   });
 });

packages/forms/src/elements/Select.tsx

@@ -38,6 +38,7 @@ export const Select = React.forwardRef<HTMLSelectElement, ISelectProps>(
       <StyledSelectWrapper
         isCompact={isCompact}
         isBare={isBare}
+        isDisabled={disabled}
         validation={validation}
         focusInset={focusInset}
       >

packages/forms/src/elements/faux-input/components/EndIcon.tsx

@@ -9,10 +9,18 @@ import React from 'react';
 import { IFauxInputIconProps } from '../../../types';
 import { StyledTextMediaFigure } from '../../../styled';
 
-const EndIconComponent = ({ isDisabled, isRotated, ...props }: IFauxInputIconProps) => (
+const EndIconComponent = ({
+  isDisabled,
+  isFocused,
+  isHovered,
+  isRotated,
+  ...props
+}: IFauxInputIconProps) => (
   <StyledTextMediaFigure
     $position="end"
     $isDisabled={isDisabled}
+    $isFocused={isFocused}
+    $isHovered={isHovered}
     $isRotated={isRotated}
     {...props}
   />

packages/forms/src/elements/faux-input/components/StartIcon.tsx

@@ -9,10 +9,18 @@ import React from 'react';
 import { IFauxInputIconProps } from '../../../types';
 import { StyledTextMediaFigure } from '../../../styled';
 
-const StartIconComponent = ({ isDisabled, isRotated, ...props }: IFauxInputIconProps) => (
+const StartIconComponent = ({
+  isDisabled,
+  isFocused,
+  isHovered,
+  isRotated,
+  ...props
+}: IFauxInputIconProps) => (
   <StyledTextMediaFigure
     $position="start"
     $isDisabled={isDisabled}
+    $isFocused={isFocused}
+    $isHovered={isHovered}
     $isRotated={isRotated}
     {...props}
   />

packages/forms/src/elements/file-list/components/File.tsx

@@ -29,7 +29,7 @@ const FileComponent = forwardRef<HTMLDivElement, IFileProps>(
           ref={ref}
         >
           {validationType && (
-            <StyledFileIcon $isCompact={isCompact}>
+            <StyledFileIcon $isCompact={isCompact} $validation={validation}>
               {isCompact ? fileIconsCompact[validationType] : fileIconsDefault[validationType]}
             </StyledFileIcon>
           )}

packages/forms/src/elements/tiles/components/Tile.tsx

@@ -27,13 +27,7 @@ const TileComponent = React.forwardRef<HTMLLabelElement, ITilesTileProps>(
     }
 
     return (
-      <StyledTile
-        ref={ref}
-        aria-disabled={disabled}
-        isDisabled={disabled}
-        isSelected={tilesContext && tilesContext.value === value}
-        {...props}
-      >
+      <StyledTile ref={ref} aria-disabled={disabled} {...props}>
         {children}
         <StyledTileInput
           {...inputProps}

packages/forms/src/styled/checkbox/StyledCheckInput.ts

@@ -6,20 +6,31 @@
  */
 
 import styled, { css, DefaultTheme, ThemeProps } from 'styled-components';
-import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 import { StyledRadioInput } from '../radio/StyledRadioInput';
 import { StyledCheckLabel } from './StyledCheckLabel';
 
 const COMPONENT_ID = 'forms.checkbox';
 
-const colorStyles = (props: ThemeProps<DefaultTheme>) => {
-  const SHADE = 600;
+const colorStyles = ({ theme }: ThemeProps<DefaultTheme>) => {
+  const backgroundOptions = { theme, variable: 'background.primaryEmphasis' };
+  const borderOptions = { theme, variable: 'border.primaryEmphasis' };
 
-  const indeterminateBorderColor = getColorV8('primaryHue', SHADE, props.theme);
-  const indeterminateBackgroundColor = indeterminateBorderColor;
-  const indeterminateActiveBorderColor = getColorV8('primaryHue', SHADE + 100, props.theme);
-  const indeterminateActiveBackgroundColor = indeterminateActiveBorderColor;
-  const indeterminateDisabledBackgroundColor = getColorV8('neutralHue', SHADE - 400, props.theme);
+  const indeterminateBackgroundColor = getColor(backgroundOptions);
+  const indeterminateBorderColor = getColor(borderOptions);
+
+  const offset100 = { dark: { offset: -100 }, light: { offset: 100 } };
+  const offset200 = { dark: { offset: -200 }, light: { offset: 200 } };
+
+  const indeterminateHoverBackgroundColor = getColor({ ...backgroundOptions, ...offset100 });
+  const indeterminateHoverBorderColor = getColor({ ...borderOptions, ...offset100 });
+  const indeterminateActiveBackgroundColor = getColor({ ...backgroundOptions, ...offset200 });
+  const indeterminateActiveBorderColor = getColor({ ...borderOptions, ...offset200 });
+  const indeterminateDisabledBackgroundColor = getColor({
+    theme,
+    variable: 'background.disabled',
+    transparency: theme.opacity[300]
+  });
 
   return css`
     &:indeterminate ~ ${StyledCheckLabel}::before {
@@ -28,6 +39,11 @@ const colorStyles = (props: ThemeProps<DefaultTheme>) => {
     }
 
     /* stylelint-disable selector-max-specificity */
+    &:enabled:indeterminate ~ ${StyledCheckLabel}:hover::before {
+      border-color: ${indeterminateHoverBorderColor};
+      background-color: ${indeterminateHoverBackgroundColor};
+    }
+
     &:enabled:indeterminate ~ ${StyledCheckLabel}:active::before {
       border-color: ${indeterminateActiveBorderColor};
       background-color: ${indeterminateActiveBackgroundColor};
@@ -51,7 +67,7 @@ export const StyledCheckInput = styled(StyledRadioInput).attrs({
     border-radius: ${props => props.theme.borderRadii.md};
   }
 
-  ${props => colorStyles(props)};
+  ${colorStyles};
 
   ${props => retrieveComponentStyles(COMPONENT_ID, props)};
 `;