@workday/canvas-kit-react 15.0.0-alpha.1326-next.0 → 15.0.1

package/common/lib/CanvasProvider.tsx

@@ -1,10 +1,18 @@
+import {CacheProvider, Theme, ThemeProvider} from '@emotion/react';
 import * as React from 'react';
-import {Theme, ThemeProvider, CacheProvider} from '@emotion/react';
-import {defaultCanvasTheme, PartialEmotionCanvasTheme, useTheme} from './theming';
-import {brand, base} from '@workday/canvas-tokens-web';
-import {getCache, maybeWrapCSSVariables, createStyles} from '@workday/canvas-kit-styling';
+
+import {createStyles, getCache, maybeWrapCSSVariables} from '@workday/canvas-kit-styling';
+import {base, brand, system} from '@workday/canvas-tokens-web';
+
+import {PartialEmotionCanvasTheme, defaultCanvasTheme, useTheme} from './theming';
 
 export interface CanvasProviderProps {
+  /**
+   * ⚠️ Only use this prop if you intent to to theme a part of your application that is different from global theming.
+   * For more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#global-vs-scoped-theming).
+   *
+   * While we support theme overrides, we advise to use global theming via CSS Variables.
+   */
   theme?: PartialEmotionCanvasTheme;
 }
 
@@ -18,6 +26,92 @@ const mappedKeys = {
   contrast: 'accent',
 };
 
+/**
+ * Mapping from deprecated theme palette keys to new numerical brand tokens.
+ * This ensures backwards compatibility when consumers use the old theme format.
+ * For example: palette.primary.main -> brand.primary600
+ */
+const numericalTokenMapping = {
+  lightest: '25',
+  lighter: '50',
+  light: '200',
+  main: '600',
+  dark: '700',
+  darkest: '800',
+} as const;
+
+/**
+ * Mapping from deprecated theme palette colors to new brand token names.
+ * For example:
+ * `primary` -> `primary`
+ * `error` -> `critical`
+ * `success` -> `positive`
+ * `alert` -> `caution`
+ * `neutral` -> `neutral`
+ */
+const brandColorMapping = {
+  primary: 'primary',
+  error: 'critical',
+  success: 'positive',
+  alert: 'caution',
+  neutral: 'neutral',
+} as const;
+
+/**
+ * Mapping from deprecated common palette keys to new brand.common tokens.
+ *
+ * ## Brandable System Tokens
+ *
+ * These are all the `system.color.brand.*` tokens that can be customized via theming.
+ * Each token references a brand token that can be overridden through the CanvasProvider theme prop.
+ *
+ * ### Focus Tokens
+ * - `system.color.brand.focus.primary` → `brand.primary.500` → Controlled by `focusOutline` (separately from `palette.primary.main`, which controls `brand.primary.600`)
+ * - `system.color.brand.focus.critical` → `brand.critical.500` → Controlled by `palette.error.dark` or `errorInner`
+ * - `system.color.brand.focus.caution.inner` → `brand.caution.400` → Controlled by `palette.alert.main` or `alertInner`
+ * - `system.color.brand.focus.caution.outer` → `brand.caution.500` → Controlled by `palette.alert.dark` or `alertOuter`
+ *
+ * ### Border Tokens
+ * - `system.color.brand.border.primary` → `brand.primary.500` → Controlled by `focusOutline` (separately from `palette.primary.main`, which controls `brand.primary.600`)
+ * - `system.color.brand.border.critical` → `brand.critical.500` → Controlled by `palette.error.dark` or `errorInner`
+ * - `system.color.brand.border.caution` → `brand.caution.500` → Controlled by `palette.alert.dark` or `alertOuter`
+ *
+ * ### Surface Tokens
+ * - `system.color.brand.surface.primary.default` → `brand.primary.A25` → Controlled by `palette.primary.lightest`
+ * - `system.color.brand.surface.primary.strong` → `brand.primary.A50` → Controlled by `palette.primary.lighter`
+ * - `system.color.brand.surface.critical.default` → `brand.critical.A25` → Controlled by `palette.error.lightest`
+ * - `system.color.brand.surface.critical.strong` → `brand.critical.A50` → Controlled by `palette.error.lighter`
+ * - `system.color.brand.surface.caution.default` → `brand.caution.A25` → Controlled by `palette.alert.lightest`
+ * - `system.color.brand.surface.caution.strong` → `brand.caution.A50` → Controlled by `palette.alert.lighter`
+ * - `system.color.brand.surface.positive.default` → `brand.positive.A25` → Controlled by `palette.success.lightest`
+ * - `system.color.brand.surface.positive.strong` → `brand.positive.A50` → Controlled by `palette.success.lighter`
+ * - `system.color.brand.surface.selected` → `brand.primary.A50` → Controlled by `palette.primary.lighter`
+ *
+ * ### Accent Tokens
+ * - `system.color.brand.accent.primary` → `brand.primary.600` → Controlled by `palette.primary.main`
+ * - `system.color.brand.accent.critical` → `brand.critical.600` → Controlled by `palette.error.main`
+ * - `system.color.brand.accent.caution` → `brand.caution.400` → Controlled by `palette.alert.main`
+ * - `system.color.brand.accent.positive` → `brand.positive.600` → Controlled by `palette.success.main`
+ * - `system.color.brand.accent.action` → `brand.primary.600` → Controlled by `palette.primary.main`
+ *
+ * ### Foreground (Text/Icon) Tokens
+ * - `system.color.brand.fg.primary.default` → `brand.primary.600` → Controlled by `palette.primary.main`
+ * - `system.color.brand.fg.primary.strong` → `brand.primary.700` → Controlled by `palette.primary.dark`
+ * - `system.color.brand.fg.critical.default` → `brand.critical.600` → Controlled by `palette.error.main`
+ * - `system.color.brand.fg.critical.strong` → `brand.critical.700` → Controlled by `palette.error.dark`
+ * - `system.color.brand.fg.caution.default` → `brand.caution.600` → Controlled by `palette.alert.darkest`
+ * - `system.color.brand.fg.caution.strong` → `brand.caution.700` → Controlled by `palette.alert.dark` (Note: no direct mapping, inherits default)
+ * - `system.color.brand.fg.positive.default` → `brand.positive.600` → Controlled by `palette.success.main`
+ * - `system.color.brand.fg.positive.strong` → `brand.positive.700` → Controlled by `palette.success.dark`
+ * - `system.color.brand.fg.selected` → `brand.primary.700` → Controlled by `palette.primary.dark`
+ */
+const commonTokenMapping = {
+  focusOutline: brand.common.focus, // maps to brand.primary500
+  alertInner: brand.common.caution.inner, // maps to brand.caution400
+  alertOuter: brand.common.caution.outer, // maps to brand.caution500
+  errorInner: brand.common.critical, // maps to brand.critical500
+} as const;
+
 /**
  * If you wish to reset the theme to the default, apply this class on the CanvasProvider.
  */
@@ -61,11 +155,57 @@ export const defaultBranding = createStyles({
   [brand.primary.light]: base.blue200,
   [brand.primary.lighter]: base.blue50,
   [brand.primary.lightest]: base.blue25,
-  [brand.gradient
-    .primary]: `linear-gradient(90deg, ${brand.primary.base} 0%, ${brand.primary.dark} 100%)`,
+  [brand.gradient.primary]:
+    `linear-gradient(90deg, ${brand.primary.base} 0%, ${brand.primary.dark} 100%)`,
+
+  /**
+   * Default `system.color.brand.*` values on the provider scope so components that read
+   * system tokens first (e.g. `cssVar(system.color.brand.accent.primary, brand.primary.base)`)
+   * still resolve to the same branding as legacy `brand.*` vars when globals define system
+   * tokens differently, or when consumers override `brand.*` via `className`.
+   */
+  [system.color.brand.focus.primary]: brand.common.focusOutline,
+  [system.color.brand.border.primary]: brand.common.focusOutline,
+  [system.color.brand.accent.primary]: brand.primary.base,
+  ...(system.color.brand.accent.action
+    ? {[system.color.brand.accent.action]: brand.primary.base}
+    : {}),
+  [system.color.brand.accent.critical]: brand.error.base,
+  [system.color.brand.accent.caution]: brand.alert.base,
+  [system.color.brand.accent.positive]: brand.success.base,
+  [system.color.brand.fg.primary.default]: brand.primary.base,
+  [system.color.brand.fg.primary.strong]: brand.primary.dark,
+  [system.color.brand.fg.critical.default]: brand.error.base,
+  [system.color.brand.fg.critical.strong]: brand.error.dark,
+  [system.color.brand.fg.caution.default]: brand.alert.darkest,
+  [system.color.brand.fg.caution.strong]: brand.alert.darkest,
+  [system.color.brand.fg.positive.default]: brand.success.base,
+  [system.color.brand.fg.positive.strong]: brand.success.dark,
+  [system.color.brand.fg.selected]: brand.primary.dark,
+  [system.color.brand.focus.critical]: brand.error.dark,
+  [system.color.brand.border.critical]: brand.error.base,
+  ...(system.color.brand.focus.caution
+    ? {
+        [system.color.brand.focus.caution.inner]: brand.common.alertInner,
+        [system.color.brand.focus.caution.outer]: brand.alert.dark,
+      }
+    : {}),
+  [system.color.brand.border.caution]: brand.alert.dark,
+  [system.color.brand.surface.primary.default]: brand.primary.lightest,
+  [system.color.brand.surface.primary.strong]: brand.primary.lighter,
+  [system.color.brand.surface.critical.default]: brand.error.lightest,
+  [system.color.brand.surface.critical.strong]: brand.error.lighter,
+  [system.color.brand.surface.caution.default]: brand.alert.lightest,
+  [system.color.brand.surface.caution.strong]: brand.alert.lighter,
+  [system.color.brand.surface.positive.default]: brand.success.lightest,
+  [system.color.brand.surface.positive.strong]: brand.success.lighter,
+  [system.color.brand.surface.selected]: brand.primary.lighter,
 });
 
 export const useCanvasThemeToCssVars = (
+  /**
+   * @deprecated ⚠️ `theme` is deprecated. In previous versions of Canvas Kit, we allowed teams to pass a theme object, this supported [Emotion's theming](https://emotion.sh/docs/theming). Now that we're shifting to a global theming approach based on CSS variables, we advise to no longer using the theme prop. For more information, view our [Theming Docs](https://workday.github.io/canvas-kit/?path=/docs/features-theming-overview--docs#-preferred-approach-v14).
+   */
   theme: PartialEmotionCanvasTheme | undefined,
   elemProps: React.HTMLAttributes<HTMLElement>
 ) => {
@@ -73,32 +213,208 @@ export const useCanvasThemeToCssVars = (
   const className = (elemProps.className || '').split(' ').concat(defaultBranding).join(' ');
   const style = elemProps.style || {};
   const {palette} = filledTheme.canvas;
+
   (['common', 'primary', 'error', 'alert', 'success', 'neutral'] as const).forEach(color => {
     if (color === 'common') {
       (['focusOutline', 'alertInner', 'alertOuter', 'errorInner'] as const).forEach(key => {
         if (palette.common[key] !== defaultCanvasTheme.palette.common[key]) {
+          const value = maybeWrapCSSVariables(palette.common[key]);
+
+          // Set deprecated token for backwards compatibility
           //@ts-ignore
-          style[brand.common.focusOutline] = maybeWrapCSSVariables(palette.common.focusOutline);
-          //@ts-ignore
-          style[brand.common.alertInner] = maybeWrapCSSVariables(palette.common.alertInner);
-          //@ts-ignore
-          style[brand.common.alertOuter] = maybeWrapCSSVariables(palette.common.alertOuter);
+          style[brand.common[key]] = value;
+
+          // Forward to new brand.common tokens
           //@ts-ignore
-          style[brand.common.errorInner] = maybeWrapCSSVariables(palette.common.errorInner);
+          style[commonTokenMapping[key]] = value;
+
+          // Additional system token forwarding for focusOutline
+          if (key === 'focusOutline') {
+            // system.color.brand.focus.primary -> brand.primary.500 (via brand.common.focus)
+            // @ts-ignore
+            style[system.color.brand.focus.primary] = value;
+            // system.color.brand.border.primary -> brand.primary.500
+            // @ts-ignore
+            style[system.color.brand.border.primary] = value;
+          }
+
+          // Additional system token forwarding for alertInner
+          if (key === 'alertInner') {
+            // Forward alertInner to system.color.brand.focus.caution.inner
+            // This token is used by components (e.g., TextInput with error="caution")
+            // for inner focus ring styling. Maps to brand.caution400 via brand.common.caution.inner.
+            // This ensures backwards compatibility when users customize alertInner in their theme.
+            // @ts-ignore
+            style[system.color.brand.focus.caution.inner] = value;
+          }
+
+          // Additional system token forwarding for alertOuter
+          if (key === 'alertOuter') {
+            // Forward alertOuter to system.color.brand.border.caution
+            // This token is used by components (e.g., TextInput with error="caution")
+            // for border and outer focus ring styling. Maps to brand.caution500 via brand.common.caution.outer.
+            // This ensures backwards compatibility when users customize alertOuter in their theme.
+            // @ts-ignore
+            style[system.color.brand.border.caution] = value;
+          }
+
+          // Additional system token forwarding for errorInner
+          if (key === 'errorInner') {
+            // Forward errorInner to system.color.brand.focus.critical and system.color.brand.border.critical
+            // These tokens are used by components (e.g., TextInput with error="error", Switch) for critical
+            // focus ring and border styling. Maps to brand.critical500 via brand.common.errorInner.
+            // This ensures backwards compatibility when users customize errorInner in their theme.
+            // @ts-ignore
+            style[system.color.brand.focus.critical] = value;
+            // @ts-ignore
+            style[system.color.brand.border.critical] = value;
+          }
         }
       });
-    }
-    (['lightest', 'lighter', 'light', 'main', 'dark', 'darkest', 'contrast'] as const).forEach(
-      key => {
-        // We only want to set custom colors if they do not match the default. The `defaultBranding` class will take care of the rest.
-        //@ts-ignore
-        if (palette[color][key] !== defaultCanvasTheme.palette[color][key]) {
-          // @ts-ignore
-          style[brand[color][mappedKeys[key]]] = maybeWrapCSSVariables(palette[color][key]);
+    } else {
+      (['lightest', 'lighter', 'light', 'main', 'dark', 'darkest', 'contrast'] as const).forEach(
+        key => {
+          // We only want to set custom colors if they do not match the default. The `defaultBranding` class will take care of the rest.
+          //@ts-ignore
+          if (palette[color][key] !== defaultCanvasTheme.palette[color][key]) {
+            const value = maybeWrapCSSVariables(palette[color][key]);
+
+            // Set deprecated token (e.g., brand.primary.base) for backwards compatibility
+            // @ts-ignore
+            style[brand[color][mappedKeys[key]]] = value;
+
+            // Forward to new numerical brand tokens (e.g., brand.primary600)
+            // Skip 'contrast' as it doesn't map to numerical tokens
+            if (key !== 'contrast' && key in numericalTokenMapping) {
+              const newBrandColor = brandColorMapping[color as keyof typeof brandColorMapping];
+              const numericalSuffix =
+                numericalTokenMapping[key as keyof typeof numericalTokenMapping];
+
+              // @ts-ignore - Dynamically access brand tokens like brand.primary600
+              const numericalToken = brand[newBrandColor + numericalSuffix];
+              if (numericalToken) {
+                // @ts-ignore
+                style[numericalToken] = value;
+              }
+
+              // Forward to all relevant system.color.brand.* tokens
+              // These system tokens reference the numerical brand tokens, so updating them ensures full compatibility
+              if (key === 'main') {
+                // system.color.brand.accent.{color} -> brand.{color}.600 (except caution -> 400)
+                // @ts-ignore
+                const systemAccentToken = system.color.brand.accent[newBrandColor];
+                if (systemAccentToken) {
+                  // @ts-ignore
+                  style[systemAccentToken] = value;
+                }
+
+                // system.color.brand.fg.{color}.default -> brand.{color}.600
+                // @ts-ignore
+                const systemFgToken = system.color.brand.fg[newBrandColor]?.default;
+                if (systemFgToken) {
+                  // @ts-ignore
+                  style[systemFgToken] = value;
+                }
+
+                // system.color.brand.focus.primary (maps to brand.primary.500 per docs)
+                // For primary only, update focus when 'main' changes — unless focusOutline was customized (it takes precedence)
+                if (newBrandColor === 'primary') {
+                  const focusOutlineCustomized =
+                    palette.common.focusOutline !== defaultCanvasTheme.palette.common.focusOutline;
+                  if (!focusOutlineCustomized) {
+                    // @ts-ignore
+                    const focusToken = system.color.brand.focus.primary;
+                    if (focusToken) {
+                      // @ts-ignore
+                      style[focusToken] = value;
+                    }
+                  }
+                }
+              } else if (key === 'dark') {
+                // system.color.brand.fg.{color}.strong -> brand.{color}.700
+                // @ts-ignore
+                const systemFgStrongToken = system.color.brand.fg[newBrandColor]?.strong;
+                if (systemFgStrongToken) {
+                  // @ts-ignore
+                  style[systemFgStrongToken] = value;
+                }
+
+                // system.color.brand.fg.selected -> brand.primary.700 (for primary only)
+                if (newBrandColor === 'primary') {
+                  // @ts-ignore
+                  const selectedToken = system.color.brand.fg.selected;
+                  if (selectedToken) {
+                    // @ts-ignore
+                    style[selectedToken] = value;
+                  }
+                }
+
+                // system.color.brand.focus.critical & system.color.brand.border.critical -> brand.critical.500 (palette.error.dark)
+                if (newBrandColor === 'critical') {
+                  // @ts-ignore
+                  const focusCriticalToken = system.color.brand.focus.critical;
+                  if (focusCriticalToken) {
+                    // @ts-ignore
+                    style[focusCriticalToken] = value;
+                  }
+                  // @ts-ignore
+                  const borderCriticalToken = system.color.brand.border.critical;
+                  if (borderCriticalToken) {
+                    // @ts-ignore
+                    style[borderCriticalToken] = value;
+                  }
+                }
+
+                // system.color.brand.focus.caution.outer & system.color.brand.border.caution -> brand.caution.500 (palette.alert.dark)
+                if (newBrandColor === 'caution') {
+                  // @ts-ignore
+                  const focusCautionOuterToken = system.color.brand.focus.caution?.outer;
+                  if (focusCautionOuterToken) {
+                    // @ts-ignore
+                    style[focusCautionOuterToken] = value;
+                  }
+                  // @ts-ignore
+                  const borderCautionToken = system.color.brand.border.caution;
+                  if (borderCautionToken) {
+                    // @ts-ignore
+                    style[borderCautionToken] = value;
+                  }
+                }
+              } else if (key === 'lighter') {
+                // system.color.brand.surface.{color}.strong -> brand.{color}.A50
+                // Note: A50 tokens are different from regular 50 tokens but we'll forward the lighter value
+                // @ts-ignore
+                const surfaceStrongToken = system.color.brand.surface[newBrandColor]?.strong;
+                if (surfaceStrongToken) {
+                  // @ts-ignore
+                  style[surfaceStrongToken] = value;
+                }
+
+                // system.color.brand.surface.selected -> brand.primary.A50 (for primary only)
+                if (newBrandColor === 'primary') {
+                  // @ts-ignore
+                  const selectedSurfaceToken = system.color.brand.surface.selected;
+                  if (selectedSurfaceToken) {
+                    // @ts-ignore
+                    style[selectedSurfaceToken] = value;
+                  }
+                }
+              } else if (key === 'lightest') {
+                // system.color.brand.surface.{color}.default -> brand.{color}.A25
+                // @ts-ignore
+                const surfaceDefaultToken = system.color.brand.surface[newBrandColor]?.default;
+                if (surfaceDefaultToken) {
+                  // @ts-ignore
+                  style[surfaceDefaultToken] = value;
+                }
+              }
+            }
+          }
         }
-      }
-    );
+      );
+    }
   });
+
   return {...elemProps, className, style};
 };
 

package/common/lib/responsive/useResponsiveContainerStyles.ts

@@ -1,12 +1,12 @@
-import { useTheme, breakpointKeys, CanvasBreakpoints } from "@workday/canvas-kit-react/common";
-import type {AllStyleProps} from "@workday/canvas-kit-react/layout";
-import {isWithinBreakpoint} from '../utils/isWithinBreakpoint'
+import {CanvasBreakpoints, breakpointKeys, useTheme} from '@workday/canvas-kit-react/common';
+import type {AllStyleProps} from '@workday/canvas-kit-react/layout';
 
-export type BreakpointKeys = typeof breakpointKeys[number];
+import {isWithinBreakpoint} from '../utils/isWithinBreakpoint';
+
+export type BreakpointKeys = (typeof breakpointKeys)[number];
 
 type ResponsiveCSSObject<T> = {
-  [P in keyof T]: Partial<Record<BreakpointKeys, AllStyleProps>> &
-    AllStyleProps;
+  [P in keyof T]: Partial<Record<BreakpointKeys, AllStyleProps>> & AllStyleProps;
 };
 type CSSObject<T> = {
   [P in keyof T]: AllStyleProps;
@@ -15,15 +15,18 @@ type CSSObject<T> = {
 // Takes in CanvasBreakpoint keys and returns current breakpoint key. Current breakpoint key is determined by the `width` of the container
 
 const getSize = (width: number, breakpoints: CanvasBreakpoints) => {
-  const ranges: {[key: string ]: [number, number?]} = {
-    'zero': [0, breakpoints.s],
-    's': [breakpoints.s, breakpoints.m],
-    'm': [breakpoints.m, breakpoints.l],
-    'l': [breakpoints.l, breakpoints.xl],
-    'xl': [breakpoints.xl]
+  const ranges: {[key: string]: [number, number?]} = {
+    zero: [0, breakpoints.s],
+    s: [breakpoints.s, breakpoints.m],
+    m: [breakpoints.m, breakpoints.l],
+    l: [breakpoints.l, breakpoints.xl],
+    xl: [breakpoints.xl],
   };
-  return breakpointKeys.find((size: BreakpointKeys) => isWithinBreakpoint(width, ...ranges[size])) || 'zero';
-}
+  return (
+    breakpointKeys.find((size: BreakpointKeys) => isWithinBreakpoint(width, ...ranges[size])) ||
+    'zero'
+  );
+};
 
 // Returns responsive style objects that are within the current CanvasBreakpoint size
 
@@ -33,15 +36,14 @@ function getStyles<T>(key: BreakpointKeys, styles: ResponsiveCSSObject<T>) {
   for (let i = 0; i <= breakpointSize; i++) {
     const breakpointName = breakpointKeys[i];
     // property is key of the style object
-    Object.keys(styles).forEach((property) => {
-      const { zero, s, m, l, xl, ...base } = styles[property as keyof T];
-      const currentBreakpointStyles =
-        styles[property as keyof T][breakpointName] ?? {};
+    Object.keys(styles).forEach(property => {
+      const {zero, s, m, l, xl, ...base} = styles[property as keyof T];
+      const currentBreakpointStyles = styles[property as keyof T][breakpointName] ?? {};
       const previousBreakpointStyles = responsiveStyles[property as keyof T] ?? {};
       responsiveStyles[property as keyof T] = {
         ...base,
         ...previousBreakpointStyles,
-        ...currentBreakpointStyles
+        ...currentBreakpointStyles,
       };
     });
   }

package/common/lib/styles/errorRing.ts

@@ -1,8 +1,8 @@
-import {EmotionCanvasTheme} from '../theming/index';
-import {ErrorType} from '../types';
 import {cssVar} from '@workday/canvas-kit-styling';
+import {base, brand, system} from '@workday/canvas-tokens-web';
 
-import {brand, system} from '@workday/canvas-tokens-web';
+import {EmotionCanvasTheme} from '../theming/index';
+import {ErrorType} from '../types';
 
 export function getErrorColors(error?: ErrorType, theme?: EmotionCanvasTheme) {
   if (error === ErrorType.Error) {
@@ -55,7 +55,7 @@ export function errorRing(error?: ErrorType, theme?: EmotionCanvasTheme) {
     '&:focus-visible:not([disabled]), &.focus:not([disabled])': {
       borderColor: errorColors.outer,
       boxShadow: `${errorBoxShadow},
-        0 0 0 2px ${cssVar(system.color.border.inverse)},
+        0 0 0 2px ${cssVar(system.color.border.inverse.default, base.neutral0)},
         0 0 0 4px ${
           theme ? theme.canvas.palette.common.focusOutline : cssVar(brand.common.focusOutline)
         }`,

package/common/lib/styles/focusRing.ts

@@ -1,7 +1,6 @@
 import {cssVar} from '@workday/canvas-kit-styling';
-
 // Backwards compatible type that works with both styled components and Canvas Kit styling
-import {system, brand} from '@workday/canvas-tokens-web';
+import {base, brand, system} from '@workday/canvas-tokens-web';
 
 interface FocusRingOptions {
   width?: number;
@@ -87,7 +86,8 @@ export function focusRing(options: FocusRingOptions = {}) {
     separation = 0,
     animate = true,
     // hard code CSS fallbacks for dynamic styles that don't use the static style transform
-    innerColor = cssVar(system.color.border.inverse, 'rgba(255,255,255,1)'),
+    /* TODO: Update to `system.color.border.inverse.default` in v15. */
+    innerColor = cssVar(system.color.border.inverse.default, base.neutral0),
     outerColor = cssVar(brand.common.focusOutline, 'rgba(8,117,225,1)'),
     inset,
   } = options;

package/common/lib/styles/hideMouseFocus.ts

@@ -1,4 +1,5 @@
 import {Interpolation} from '@emotion/react';
+
 import {CSSProperties} from '@workday/canvas-kit-react/tokens';
 
 /**