feat(pagination): new light/dark mode colors

packages/pagination/src/styled/OffsetPagination/StyledGapListItem.ts

@@ -11,7 +11,7 @@ import {
   retrieveComponentStyles,
   DEFAULT_THEME,
   getLineHeight,
-  getColorV8
+  getColor
 } from '@zendeskgarden/react-theming';
 import { StyledListItem } from './StyledListItem';
 
@@ -34,15 +34,22 @@ const sizeStyles = (props: ThemeProps<DefaultTheme>) => {
   `;
 };
 
+const colorStyles = ({ theme }: ThemeProps<DefaultTheme>) => {
+  return css`
+    color: ${getColor({ variable: 'foreground.subtle', theme })};
+  `;
+};
+
 export const StyledGapListItem = styled(StyledListItem).attrs({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
 })`
   display: inline-block;
   text-align: center;
-  color: ${p => getColorV8('neutralHue', 600, p.theme)};
 
-  ${props => sizeStyles(props)};
+  ${sizeStyles};
+
+  ${colorStyles}
 
   &:hover {
     color: inherit;

packages/pagination/src/styled/OffsetPagination/StyledList.ts

@@ -5,11 +5,17 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import styled, { DefaultTheme, ThemeProps, css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'pagination.list';
 
+const colorStyles = ({ theme }: ThemeProps<DefaultTheme>) => {
+  return css`
+    color: ${getColor({ variable: 'foreground.subtle', theme })};
+  `;
+};
+
 /**
  * 1. List reset.
  * 2. Text truncation.
@@ -18,14 +24,15 @@ export const StyledList = styled.ul.attrs({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
 })`
-  direction: ${props => props.theme.rtl && 'rtl'};
+  direction: ${p => p.theme.rtl && 'rtl'};
   display: flex;
   justify-content: center;
   margin: 0; /* [1] */
   padding: 0; /* [1] */
   list-style: none; /* [1] */
   white-space: nowrap; /* [2] */
-  color: ${props => getColorV8('neutralHue', 600, props.theme)};
+
+  ${colorStyles}
 
   :focus {
     outline: none;

packages/pagination/src/styled/OffsetPagination/StyledPageBase.spec.tsx

@@ -0,0 +1,75 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+import React from 'react';
+import { getRenderFn, render } from 'garden-test-utils';
+
+import { StyledPageBase } from './StyledPageBase';
+import { DEFAULT_THEME, PALETTE } from '@zendeskgarden/react-theming';
+import { rgba } from 'polished';
+
+describe('StyledPageBase', () => {
+  it('renders the expected element', () => {
+    const { container } = render(<StyledPageBase />);
+
+    expect(container.firstChild!.nodeName).toBe('BUTTON');
+  });
+
+  it('renders hidden styling if provided', () => {
+    const { container } = render(<StyledPageBase hidden />);
+
+    expect(container.firstChild).toHaveStyleRule('visibility', 'hidden');
+  });
+
+  it.each<{ mode: 'light' | 'dark'; color: string }>([
+    { mode: 'light', color: rgba(PALETTE.blue[700], DEFAULT_THEME.opacity[100]) },
+    { mode: 'dark', color: rgba(PALETTE.blue[500], DEFAULT_THEME.opacity[100]) }
+  ])('renders $mode mode background when hovered', ({ mode, color }) => {
+    const { container } = getRenderFn(mode)(<StyledPageBase>{1}</StyledPageBase>);
+
+    expect(container.firstChild).toHaveStyleRule('background-color', color, {
+      modifier: '&:hover'
+    });
+  });
+
+  it.each<{ mode: 'light' | 'dark'; color: string }>([
+    { mode: 'light', color: rgba(PALETTE.blue[700], DEFAULT_THEME.opacity[200]) },
+    { mode: 'dark', color: rgba(PALETTE.blue[500], DEFAULT_THEME.opacity[200]) }
+  ])('renders $mode mode background when hovered', ({ mode, color }) => {
+    const { container } = getRenderFn(mode)(<StyledPageBase>{1}</StyledPageBase>);
+
+    expect(container.firstChild).toHaveStyleRule('background-color', color, {
+      modifier: '&:active'
+    });
+  });
+
+  it.each<{ mode: 'light' | 'dark'; color: string }>([
+    { mode: 'light', color: rgba(PALETTE.blue[700], DEFAULT_THEME.opacity[200]) },
+    { mode: 'dark', color: rgba(PALETTE.blue[500], DEFAULT_THEME.opacity[200]) }
+  ])('renders $mode mode background when hovered', ({ mode, color }) => {
+    const { container } = getRenderFn(mode)(
+      <StyledPageBase aria-current="page">{1}</StyledPageBase>
+    );
+
+    expect(container.firstChild).toHaveStyleRule('background-color', color, {
+      modifier: '&[aria-current="page"]:hover'
+    });
+  });
+
+  it.each<{ mode: 'light' | 'dark'; color: string }>([
+    { mode: 'light', color: rgba(PALETTE.blue[700], DEFAULT_THEME.opacity[300]) },
+    { mode: 'dark', color: rgba(PALETTE.blue[500], DEFAULT_THEME.opacity[300]) }
+  ])('renders $mode mode background when hovered', ({ mode, color }) => {
+    const { container } = getRenderFn(mode)(
+      <StyledPageBase aria-current="page">{1}</StyledPageBase>
+    );
+
+    expect(container.firstChild).toHaveStyleRule('background-color', color, {
+      modifier: '&[aria-current="page"]:active'
+    });
+  });
+});

packages/pagination/src/styled/OffsetPagination/StyledPageBase.ts

@@ -10,22 +10,50 @@ import {
   retrieveComponentStyles,
   DEFAULT_THEME,
   getLineHeight,
-  getColorV8,
-  focusStyles
+  focusStyles,
+  getColor
 } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'pagination.page';
 
-const colorStyles = (props: ThemeProps<DefaultTheme>) => {
-  const defaultColor = getColorV8('neutralHue', 600, props.theme);
-  const hoverForegroundColor = getColorV8('neutralHue', 700, props.theme);
-  const hoverBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.08);
-  const activeForegroundColor = getColorV8('neutralHue', 800, props.theme);
-  const activeBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.2);
+const colorStyles = ({ theme }: ThemeProps<DefaultTheme>) => {
+  const disabledColor = getColor({ variable: 'foreground.disabled', theme });
+  const defaultColor = getColor({ variable: 'foreground.subtle', theme });
+  const hoverForegroundColor = getColor({
+    variable: 'foreground.subtle',
+    light: { offset: 100 },
+    dark: { offset: -100 },
+    theme
+  });
+  const hoverBackgroundColor = getColor({
+    variable: 'background.primaryEmphasis',
+    transparency: theme.opacity[100],
+    dark: { offset: -100 },
+    theme
+  });
+  const activeForegroundColor = getColor({
+    variable: 'foreground.subtle',
+    light: { offset: 200 },
+    dark: { offset: -200 },
+    theme
+  });
+  const activeBackgroundColor = getColor({
+    variable: 'background.primaryEmphasis',
+    transparency: theme.opacity[200],
+    dark: { offset: -100 },
+    theme
+  });
+
+  // selected page
   const currentForegroundColor = activeForegroundColor;
   const currentBackgroundColor = hoverBackgroundColor;
-  const currentHoverBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.16);
-  const currentActiveBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.28);
+  const currentHoverBackgroundColor = activeBackgroundColor;
+  const currentActiveBackgroundColor = getColor({
+    variable: 'background.primaryEmphasis',
+    transparency: theme.opacity[300],
+    dark: { offset: -100 },
+    theme
+  });
 
   return css`
     border: none;
@@ -38,7 +66,7 @@ const colorStyles = (props: ThemeProps<DefaultTheme>) => {
     }
 
     ${focusStyles({
-      theme: props.theme,
+      theme,
       inset: true
     })}
 
@@ -64,7 +92,7 @@ const colorStyles = (props: ThemeProps<DefaultTheme>) => {
     :disabled,
     [aria-disabled='true'] {
       background-color: transparent;
-      color: ${getColorV8('grey', 300, props.theme)};
+      color: ${disabledColor};
     }
   `;
 };