npm - @workday/canvas-kit-react - Versions diffs - 16.0.0-alpha.0499-next.0 → 16.0.0 - Mend

@workday/canvas-kit-react 16.0.0-alpha.0499-next.0 → 16.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (325) hide show

package/common/lib/theming/sanaTheme.ts ADDED Viewed

@@ -0,0 +1,133 @@
+/**
+ * Sana Canvas theme presets.
+ *
+ * Sana is a distinct theme from classic Canvas — not a delta on `defaultCanvasTheme`.
+ * Full visual treatment (fonts, shapes, system surfaces) comes from global CSS:
+ * import `@workday/canvas-tokens-web/css/sana/_variables.css` and set
+ * `data-theme="sana-canvas"` on `<html>`.
+ *
+ * These JS presets reference Sana brand CSS variables so `CanvasProvider` can forward
+ * them to popup containers (menus, selects, modals). Keep in sync with
+ * `@workday/canvas-tokens-web/css/sana/_variables.css`.
+ *
+ * | Preset | Use case |
+ * |--------|----------|
+ * | `sanaCanvasNumericalTheme` | Numerical `brand` shape for popup forwarding |
+ * | `sanaCanvasProviderTheme` | Same — pass to root `CanvasProvider` when `<html>` is unavailable |
+ */
+import {base, brand} from '@workday/canvas-tokens-web';
+import type {CanvasNumericalBrandTheme} from './types';
+/** Reference a canvas-tokens CSS variable (resolves under `[data-theme="sana-canvas"]`). */
+const varRef = (token: string) => `var(${token})`;
+/**
+ * Sana extends the neutral ramp with steps not yet exported from canvas-tokens-web JS.
+ * Defined in `@workday/canvas-tokens-web/css/sana/_variables.css`.
+ */
+const sanaBrandNeutral = {
+  '150': '--cnvs-brand-neutral-150',
+  '850': '--cnvs-brand-neutral-850',
+  A150: '--cnvs-brand-neutral-a150',
+} as const;
+/**
+ * Sana Canvas brand tokens for scoped `CanvasProvider` / popup forwarding.
+ * Values are `var()` references to Sana brand variables — not merged from `defaultCanvasTheme`.
+ */
+export const sanaCanvasNumericalTheme: CanvasNumericalBrandTheme = {
+  // Explicit brand vars only — multi-key ramps write 1:1; no system shortcut bundles run.
+  themeScope: 'brand',
+  brand: {
+    action: {
+      base: varRef(brand.neutral975),
+      dark: varRef(brand.neutral950),
+      darkest: varRef(brand.neutral900),
+      accent: varRef(base.neutral0),
+      lightest: varRef(brand.neutral25),
+      lighter: varRef(brand.neutral50),
+      light: varRef(brand.neutral200),
+    },
+    neutral: {
+      '25': varRef(brand.neutral25),
+      '50': varRef(brand.neutral50),
+      '100': varRef(brand.neutral100),
+      '150': varRef(sanaBrandNeutral['150']),
+      '200': varRef(brand.neutral200),
+      '300': varRef(brand.neutral300),
+      '400': varRef(brand.neutral400),
+      '500': varRef(brand.neutral500),
+      '600': varRef(brand.neutral600),
+      '700': varRef(brand.neutral700),
+      '800': varRef(brand.neutral800),
+      '850': varRef(sanaBrandNeutral['850']),
+      '900': varRef(brand.neutral900),
+      '950': varRef(brand.neutral950),
+      '975': varRef(brand.neutral975),
+      A25: varRef(brand.neutralA25),
+      A50: varRef(brand.neutralA50),
+      A100: varRef(brand.neutralA100),
+      A150: varRef(sanaBrandNeutral.A150),
+      A200: varRef(brand.neutralA200),
+    },
+    primary: {
+      '500': varRef(brand.primary500),
+      '600': varRef(brand.primary600),
+      '700': varRef(brand.primary700),
+      A25: varRef(brand.primaryA25),
+      A50: varRef(brand.primaryA50),
+      A100: varRef(brand.primaryA100),
+    },
+    critical: {
+      '500': varRef(brand.critical500),
+      '600': varRef(brand.critical600),
+      '700': varRef(brand.critical700),
+      A25: varRef(brand.criticalA25),
+      A50: varRef(brand.criticalA50),
+    },
+    caution: {
+      '400': varRef(brand.caution400),
+      '500': varRef(brand.caution500),
+      A25: varRef(brand.cautionA25),
+      A50: varRef(brand.cautionA50),
+    },
+    positive: {
+      '600': varRef(brand.positive600),
+      '800': varRef(brand.positive800),
+      A25: varRef(brand.positiveA25),
+      A50: varRef(brand.positiveA50),
+    },
+  },
+  selected: {
+    fg: varRef(brand.neutralA900),
+    surface: varRef(brand.neutralA100),
+  },
+};
+/**
+ * Pass to root `CanvasProvider` to forward Sana brand CSS variables onto popup containers
+ * (menus, selects, modals, tooltips).
+ *
+ * **When to use it**
+ * - **Required** when you cannot set `data-theme="sana-canvas"` on `<html>` (embedded apps,
+ *   microfrontends, third-party shells). Popups portal to `document.body` and will not inherit
+ *   a nested `data-theme` — this preset copies Sana brand vars onto the popup stack container.
+ * - Also useful in tests without global Sana CSS, or custom popup hosts outside normal cascade.
+ *
+ * **When you can skip it**
+ * - Prefer setting `data-theme="sana-canvas"` on `<html>` with Sana CSS imported. Popups then
+ *   inherit brand variables from the document and no `theme` prop is needed.
+ *
+ * @example
+ * ```tsx
+ * // Preferred — control <html>
+ * import '@workday/canvas-tokens-web/css/sana/_variables.css';
+ * // <html data-theme="sana-canvas">
+ * <CanvasProvider><App /></CanvasProvider>
+ *
+ * // No access to <html> — required for popup parity
+ * <CanvasProvider theme={sanaCanvasProviderTheme}><App /></CanvasProvider>
+ * ```
+ */
+export const sanaCanvasProviderTheme = sanaCanvasNumericalTheme;

package/common/lib/theming/types.ts CHANGED Viewed

@@ -281,3 +281,295 @@ declare module '@emotion/react' {
  * @deprecated ⚠️ `EmotionCanvasTheme` 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).
  */
 export type EmotionCanvasTheme = {canvas: CanvasTheme};
+/**
+ * Numerical brand ramp keys. Each key maps 1:1 to a `--cnvs-brand-{family}-{key}` CSS variable.
+ *
+ * Common keys:
+ * - `'600'` — main accent / button fill / default brand fg
+ * - `'700'` — strong fg / selected text (when not using `selected.fg`)
+ * - `'500'` — focus rings and border primary (independent of `'600'`)
+ * - `'A50'` — selected surface tint (when not using `selected.surface`)
+ * - `'25'` / `'A25'` — subtle brand surfaces
+ *
+ * Neutral-only Sana steps (`'150'`, `'850'`, `'A150'`) live on {@link CanvasNeutralBrandRamp}.
+ */
+export type CanvasBrandRamp = Partial<
+  Record<
+    | '25'
+    | '50'
+    | '100'
+    | '200'
+    | '300'
+    | '400'
+    | '500'
+    | '600'
+    | '700'
+    | '800'
+    | '900'
+    | '950'
+    | '975'
+    | 'A25'
+    | 'A50'
+    | 'A100'
+    | 'A200',
+    string
+  >
+>;
+/**
+ * Neutral brand ramp — includes Sana-only steps (`150` / `850` / `A150`) that are not
+ * exported for primary/critical/caution/positive families.
+ */
+export type CanvasNeutralBrandRamp = CanvasBrandRamp &
+  Partial<Record<'150' | '850' | 'A150', string>>;
+/** Semantic keys for `brand.action.*` CSS variables (PrimaryButton, etc.). */
+export type CanvasActionBrandRamp = Partial<
+  Record<
+    'base' | 'lightest' | 'lighter' | 'light' | 'dark' | 'darkest' | 'darker' | 'accent',
+    string
+  >
+>;
+/**
+ * Controls how partial theme input is expanded.
+ *
+ * - `'brand'` (default): predictable, design-aligned behavior. Setting only
+ *   `brand.primary['600']` themes PrimaryButton and selected list/menu
+ *   states. Other keys write only their CSS variable — no auto-generated ramps.
+ * - `'full'`: legacy behavior for the deprecated `canvas.palette` shape — auto-fills
+ *   lightest→darkest via `shiftColor` and forwards to many `system.color.brand.*`
+ *   tokens. On the numerical `brand` shape, `'full'` disables the primary shortcut
+ *   and writes each ramp key literally.
+ */
+export type CanvasThemingScope = 'brand' | 'full';
+/**
+ * Preferred theme input for `CanvasProvider`. Each value maps directly to brand CSS
+ * variables unless noted as a shortcut below.
+ *
+ * @example Minimal — brand buttons + selected states only
+ * ```tsx
+ * <CanvasProvider theme={{brand: {primary: {'600': base.magenta600}}}} />
+ * ```
+ *
+ * @example Explicit — focus independent of primary
+ * ```tsx
+ * <CanvasProvider theme={{
+ *   brand: {primary: {'600': base.red600, '500': base.blue500}},
+ *   selected: {fg: base.red700, surface: base.redA50},
+ * }} />
+ * ```
+ *
+ * @see sanaCanvasProviderTheme when `<html>` is unavailable and popups need Sana brand forwarding
+ */
+export interface CanvasNumericalBrandTheme {
+  brand?: {
+    /**
+     * Primary brand ramp (`--cnvs-brand-primary-*`).
+     *
+     * **Shortcut (brand scope only):** when `'600'` is the only key under `primary`,
+     * also sets:
+     * - `PrimaryButton` — `brand.action.base`, `accent.primary`, `accent.action`
+     * - Selected `Menu.Item` — `system.color.brand.fg.selected`, `surface.selected`
+     *
+     * Does **not** set focus rings — use `'500'` or `canvas.palette.common.focusOutline`.
+     *
+     * | Key | CSS variable | Typical consumers |
+     * |-----|--------------|-------------------|
+     * | `'600'` | `--cnvs-brand-primary-600` | PrimaryButton, brand links, accent.primary |
+     * | `'700'` | `--cnvs-brand-primary-700` | Strong primary fg, selected text |
+     * | `'500'` | `--cnvs-brand-primary-500` | Focus rings, border primary |
+     * | `'A50'` | `--cnvs-brand-primary-A50` | Selected/hover surfaces |
+     */
+    primary?: CanvasBrandRamp;
+    /**
+     * Button-specific ramp (`--cnvs-brand-action-*`). PrimaryButton reads
+     * these **before** `brand.primary`.
+     *
+     * | Key | Typical consumers |
+     * |-----|-------------------|
+     * | `base` | PrimaryButton background |
+     * | `dark` / `darkest` | PrimaryButton hover / pressed |
+     * | `accent` | PrimaryButton label color |
+     */
+    action?: CanvasActionBrandRamp;
+    /**
+     * Critical/error ramp (`--cnvs-brand-critical-*`).
+     *
+     * | Key | Typical consumers |
+     * |-----|-------------------|
+     * | `'600'` | TextInput error, DeleteButton, critical fg |
+     * | `'500'` | Critical focus ring, error border |
+     * | `'A25'` / `'A50'` | Error surface tints |
+     */
+    critical?: CanvasBrandRamp;
+    /**
+     * Caution/warning ramp (`--cnvs-brand-caution-*`).
+     *
+     * | Key | Typical consumers |
+     * |-----|-------------------|
+     * | `'400'` | Caution accent, TextInput caution |
+     * | `'500'` | Caution focus outer, caution border |
+     * | `'A25'` / `'A50'` | Caution surface tints |
+     */
+    caution?: CanvasBrandRamp;
+    /**
+     * Positive/success ramp (`--cnvs-brand-positive-*`).
+     *
+     * | Key | Typical consumers |
+     * |-----|-------------------|
+     * | `'600'` | Checkbox/Radio checked, success fg |
+     * | `'A25'` / `'A50'` | Success surface tints |
+     */
+    positive?: CanvasBrandRamp;
+    /**
+     * Neutral brand ramp (`--cnvs-brand-neutral-*`). Sana Canvas uses `base.neutral*`
+     * instead of legacy `base.slate*` — see {@link sanaCanvasNumericalTheme}.
+     *
+     * Affects brand-neutral text, borders, and surfaces where components reference
+     * `brand.neutral.*` or `system.color.brand` tokens tied to neutral.
+     */
+    neutral?: CanvasNeutralBrandRamp;
+  };
+  /**
+   * Selected-state shortcuts. Prefer these over indirect `brand.primary['700']` /
+   * `brand.primary.A50` when customizing list/menu selection.
+   *
+   * | Key | CSS variable | Typical consumers |
+   * |-----|--------------|-------------------|
+   * | `fg` | `--cnvs-sys-color-brand-fg-selected` | Menu.Item, SegmentedControl selected text |
+   * | `surface` | `--cnvs-sys-color-brand-surface-selected` | Menu.Item, list selected background |
+   */
+  selected?: {
+    /** Selected text/icon color */
+    fg?: string;
+    /** Selected row/chip background */
+    surface?: string;
+  };
+  /**
+   * Escape hatch for `system.color.brand.*` tokens not covered by `brand` ramps.
+   * Keys mirror the token path, e.g. `{color: {brand: {focus: {primary: '#00f'}}}}`.
+   */
+  system?: {
+    color?: {
+      brand?: Record<string, unknown>;
+    };
+  };
+  /** Text direction for the provider subtree. */
+  direction?: ContentDirection;
+  /**
+   * @default 'brand'
+   * @see CanvasThemingScope
+   */
+  themeScope?: CanvasThemingScope;
+}
+/**
+ * Theme input accepted by {@link CanvasProvider}.
+ * - Numerical `brand` shape (preferred)
+ * - Deprecated `canvas.palette` shape (legacy)
+ */
+export type CanvasProviderTheme =
+  | (PartialEmotionCanvasTheme & {themeScope?: CanvasThemingScope})
+  | CanvasNumericalBrandTheme;
+export function isNumericalTheme(
+  theme: CanvasProviderTheme | undefined
+): theme is CanvasNumericalBrandTheme {
+  if (!theme) {
+    return false;
+  }
+  if ('canvas' in theme) {
+    return false;
+  }
+  // `direction` / `themeScope` alone are valid numerical themes (e.g. RTL-only).
+  return (
+    'brand' in theme ||
+    'system' in theme ||
+    'selected' in theme ||
+    'direction' in theme ||
+    'themeScope' in theme
+  );
+}
+const EXTENDED_RAMP_KEYS = new Set([
+  '25',
+  '50',
+  '100',
+  '200',
+  '300',
+  '400',
+  '500',
+  '600',
+  '700',
+  '800',
+  '900',
+  '950',
+  '975',
+  'A25',
+  'A50',
+  'A100',
+  'A200',
+  'lightest',
+  'lighter',
+  'light',
+  'main',
+  'dark',
+  'darkest',
+  'contrast',
+]);
+export function resolveThemingScope(theme: CanvasProviderTheme | undefined): CanvasThemingScope {
+  if (!theme) {
+    return 'brand';
+  }
+  if (theme.themeScope) {
+    return theme.themeScope;
+  }
+  if (isNumericalTheme(theme)) {
+    return theme.themeScope ?? 'brand';
+  }
+  const palette = theme.canvas?.palette;
+  if (!palette) {
+    return 'brand';
+  }
+  if (palette.common && Object.keys(palette.common).length > 0) {
+    const commonOnlyFocus =
+      Object.keys(palette.common).length === 1 && palette.common.focusOutline != null;
+    if (!commonOnlyFocus) {
+      return 'full';
+    }
+  }
+  for (const color of ['primary', 'error', 'alert', 'success', 'neutral'] as const) {
+    const colorPalette = palette[color];
+    if (!colorPalette) {
+      continue;
+    }
+    for (const key of Object.keys(colorPalette)) {
+      // `main` alone uses brand-scope bundles for every semantic palette color.
+      if (key === 'main') {
+        continue;
+      }
+      if (EXTENDED_RAMP_KEYS.has(key)) {
+        return 'full';
+      }
+    }
+  }
+  return 'brand';
+}

package/dist/commonjs/action-bar/lib/ActionBarList.js CHANGED Viewed

@@ -9,7 +9,7 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const useActionBarModel_1 = require("./useActionBarModel");
 exports.actionBarListStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "2resjc", styles: "box-sizing:border-box;display:flex;box-shadow:var(--cnvs-sys-depth-2);gap:var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem));background:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));border-block-start:solid 0.0625rem  var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));padding:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));position:fixed;inset-block-end:0;inset-inline:0;@media (max-width: 767.5px){> *{flex:1;}}" }
+    base: { name: "4ez5m3", styles: "box-sizing:border-box;display:flex;box-shadow:var(--cnvs-sys-depth-2);gap:var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem));background:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));border-block-start:solid 0.0625rem  var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));padding:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));position:fixed;inset-block-end:0;inset-inline:0;@media (max-width: 767.5px){> *{flex:1;}}" }
 }, "action-bar-list-887890");
 exports.useActionBarList = collection_1.useOverflowListMeasure;
 exports.ActionBarList = (0, common_1.createSubcomponent)('div')({

package/dist/commonjs/action-bar/lib/ActionBarOverflowButton.js CHANGED Viewed

@@ -11,7 +11,7 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
 const useActionBarModel_1 = require("./useActionBarModel");
 exports.actionBarOverflowButtonStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "2drekc", styles: "box-sizing:border-box;flex:0;" }
+    base: { name: "21b2hz", styles: "box-sizing:border-box;flex:0;" }
 }, "action-bar-overflow-button-0a24d9");
 exports.useActionBarOverflowButton = (0, common_1.composeHooks)((0, common_1.createElemPropsHook)(useActionBarModel_1.useActionBarModel)(() => ({
     'aria-haspopup': true,

package/dist/commonjs/avatar/lib/Avatar.js CHANGED Viewed

@@ -16,23 +16,23 @@ exports.avatarStencil = (0, canvas_kit_styling_1.createStencil)({
         avatarImage: 'avatar-image',
         avatarName: 'avatar-name',
     },
-    base: { name: "325428", styles: "box-sizing:border-box;" },
+    base: { name: "2vdsa1", styles: "box-sizing:border-box;" },
     modifiers: {
         imageLoaded: {
-            false: { name: "25oh3q", styles: "[data-part=\"avatar-image\"]{display:none;}" },
-            true: { name: "1mjwhm", styles: "background-color:var(--cnvs-sys-color-bg-default);" }
+            false: { name: "1q8t3", styles: "[data-part=\"avatar-image\"]{display:none;}" },
+            true: { name: "22xcyh", styles: "background-color:var(--cnvs-sys-color-bg-default);" }
         },
         objectFit: {
-            contain: { name: "eqlvf", styles: "[data-part=\"avatar-image\"]{object-fit:contain;}" },
-            cover: { name: "4aagsc", styles: "[data-part=\"avatar-image\"]{object-fit:cover;}" },
-            fill: { name: "4a4jfq", styles: "[data-part=\"avatar-image\"]{object-fit:fill;}" },
-            none: { name: "1575aw", styles: "[data-part=\"avatar-image\"]{object-fit:none;}" },
-            ['scale-down']: { name: "1jjh43", styles: "[data-part=\"avatar-image\"]{object-fit:scale-down;}" },
-            initial: { name: "3hubkx", styles: "[data-part=\"avatar-image\"]{object-fit:initial;}" },
-            inherit: { name: "3b8kdm", styles: "[data-part=\"avatar-image\"]{object-fit:inherit;}" },
-            unset: { name: "1kohg6", styles: "[data-part=\"avatar-image\"]{object-fit:unset;}" },
-            ['-moz-initial']: { name: "15ejsv", styles: "[data-part=\"avatar-image\"]{object-fit:-moz-initial;}" },
-            ['revert']: { name: "103qra", styles: "[data-part=\"avatar-image\"]{object-fit:revert;}" }
+            contain: { name: "3vlr3b", styles: "[data-part=\"avatar-image\"]{object-fit:contain;}" },
+            cover: { name: "14wblk", styles: "[data-part=\"avatar-image\"]{object-fit:cover;}" },
+            fill: { name: "12gz3x", styles: "[data-part=\"avatar-image\"]{object-fit:fill;}" },
+            none: { name: "2stef3", styles: "[data-part=\"avatar-image\"]{object-fit:none;}" },
+            ['scale-down']: { name: "417vg8", styles: "[data-part=\"avatar-image\"]{object-fit:scale-down;}" },
+            initial: { name: "1i7d5q", styles: "[data-part=\"avatar-image\"]{object-fit:initial;}" },
+            inherit: { name: "4azxq2", styles: "[data-part=\"avatar-image\"]{object-fit:inherit;}" },
+            unset: { name: "m2oq3", styles: "[data-part=\"avatar-image\"]{object-fit:unset;}" },
+            ['-moz-initial']: { name: "2hwkr7", styles: "[data-part=\"avatar-image\"]{object-fit:-moz-initial;}" },
+            ['revert']: { name: "ebh0h", styles: "[data-part=\"avatar-image\"]{object-fit:revert;}" }
         }
     }
 }, "avatar-620ed0");

package/dist/commonjs/avatar/lib/AvatarImage.js CHANGED Viewed

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const common_1 = require("@workday/canvas-kit-react/common");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 exports.avatarImageStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "1hubgy", styles: "box-sizing:border-box;height:100%;width:100%;object-fit:cover;" }
+    base: { name: "43vxwv", styles: "box-sizing:border-box;height:100%;width:100%;object-fit:cover;" }
 }, "avatar-image-e0bffc");
 exports.AvatarImage = (0, common_1.createComponent)('img')({
     displayName: 'AvatarImage',

package/dist/commonjs/avatar/lib/AvatarName.js CHANGED Viewed

@@ -6,7 +6,7 @@ const common_1 = require("@workday/canvas-kit-react/common");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const getInitialsFromName_1 = require("./getInitialsFromName");
 exports.avatarNameStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "3jdvii", styles: "box-sizing:border-box;text-transform:uppercase;cursor:default;" }
+    base: { name: "1ii5r", styles: "box-sizing:border-box;text-transform:uppercase;cursor:default;" }
 }, "avatar-name-c3d5d9");
 exports.AvatarName = (0, common_1.createComponent)('span')({
     displayName: 'AvatarName',

package/dist/commonjs/avatar/lib/BaseAvatar.js CHANGED Viewed

@@ -13,24 +13,24 @@ exports.baseAvatarStencil = (0, canvas_kit_styling_1.createStencil)({
         color: '',
         size: '',
     },
-    base: { name: "2hu0fe", styles: "box-sizing:border-box;border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));width:var(--size-base-avatar-bfdfb4, var(--cnvs-sys-size-lg, 3rem));height:var(--size-base-avatar-bfdfb4, var(--cnvs-sys-size-lg, 3rem));min-width:var(--size-base-avatar-bfdfb4, var(--cnvs-sys-size-lg, 3rem));min-height:var(--size-base-avatar-bfdfb4, var(--cnvs-sys-size-lg, 3rem));background-color:var(--backgroundColor-base-avatar-bfdfb4, var(--cnvs-base-palette-blue-600, oklch(0.5198 0.1782 256.11 / 1)));color:var(--color-base-avatar-bfdfb4, var(--cnvs-sys-color-fg-inverse));display:flex;align-items:center;justify-content:center;overflow:hidden;border:none;outline:0.0625rem solid transparent;button &, a &, &:is(button, a){outline:none;}&:is(button, a):focus-visible, &:is(button, a).focus{outline:0.125rem solid transparent;outline-offset:0.125rem;}font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-body-md, var(--cnvs-sys-line-height-body-medium, 1.75rem));font-size:var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium, 1.125rem));" },
+    base: { name: "7u0ib", styles: "box-sizing:border-box;border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));width:var(--size-base-avatar-bfdfb4, var(--cnvs-sys-size-lg, 3rem));height:var(--size-base-avatar-bfdfb4, var(--cnvs-sys-size-lg, 3rem));min-width:var(--size-base-avatar-bfdfb4, var(--cnvs-sys-size-lg, 3rem));min-height:var(--size-base-avatar-bfdfb4, var(--cnvs-sys-size-lg, 3rem));background-color:var(--backgroundColor-base-avatar-bfdfb4, var(--cnvs-base-palette-blue-600, oklch(0.5198 0.1782 256.11 / 1)));color:var(--color-base-avatar-bfdfb4, var(--cnvs-sys-color-fg-inverse));display:flex;align-items:center;justify-content:center;overflow:hidden;border:none;outline:0.0625rem solid transparent;button &, a &, &:is(button, a){outline:none;}&:is(button, a):focus-visible, &:is(button, a).focus{outline:0.125rem solid transparent;outline-offset:0.125rem;}font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-body-md, var(--cnvs-sys-line-height-body-medium, 1.75rem));font-size:var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium, 1.125rem));" },
     modifiers: {
         variant: {
-            blue: { name: "2viuvx", styles: "background-color:var(--backgroundColor-base-avatar-bfdfb4, var(--cnvs-base-palette-blue-600, oklch(0.5198 0.1782 256.11 / 1)));color:var(--color-base-avatar-bfdfb4, var(--cnvs-sys-color-fg-inverse));" },
-            amber: { name: "3sx3nx", styles: "background-color:var(--backgroundColor-base-avatar-bfdfb4, var(--cnvs-base-palette-amber-300, oklch(0.8432 0.1713 85.24 / 1)));color:var(--color-base-avatar-bfdfb4, var(--cnvs-base-palette-amber-800, oklch(0.4143 0.1245 42.21 / 1)));" },
-            teal: { name: "1lvooa", styles: "background-color:var(--backgroundColor-base-avatar-bfdfb4, var(--cnvs-base-palette-teal-300, oklch(0.7836 0.0874 204.93 / 1)));color:var(--color-base-avatar-bfdfb4, var(--cnvs-base-palette-teal-800, oklch(0.3982 0.0687 209.08 / 1)));" },
-            purple: { name: "dfpkv", styles: "background-color:var(--backgroundColor-base-avatar-bfdfb4, var(--cnvs-base-palette-purple-600, oklch(0.5177 0.162 313.92 / 1)));color:var(--color-base-avatar-bfdfb4, var(--cnvs-sys-color-fg-inverse));" },
-            magenta: { name: "gtx30", styles: "background-color:var(--backgroundColor-base-avatar-bfdfb4, var(--cnvs-base-palette-magenta-600, oklch(0.534 0.183 344.19 / 1)));color:var(--color-base-avatar-bfdfb4, var(--cnvs-sys-color-fg-inverse));" },
-            green: { name: "1x2vis", styles: "background-color:var(--backgroundColor-base-avatar-bfdfb4, var(--cnvs-base-palette-green-600, oklch(0.5069 0.1569 145.56 / 1)));color:var(--color-base-avatar-bfdfb4, var(--cnvs-sys-color-fg-inverse));" }
+            blue: { name: "3af3jo", styles: "background-color:var(--backgroundColor-base-avatar-bfdfb4, var(--cnvs-base-palette-blue-600, oklch(0.5198 0.1782 256.11 / 1)));color:var(--color-base-avatar-bfdfb4, var(--cnvs-sys-color-fg-inverse));" },
+            amber: { name: "1lcffr", styles: "background-color:var(--backgroundColor-base-avatar-bfdfb4, var(--cnvs-base-palette-amber-300, oklch(0.8432 0.1713 85.24 / 1)));color:var(--color-base-avatar-bfdfb4, var(--cnvs-base-palette-amber-800, oklch(0.4143 0.1245 42.21 / 1)));" },
+            teal: { name: "2ly3ar", styles: "background-color:var(--backgroundColor-base-avatar-bfdfb4, var(--cnvs-base-palette-teal-300, oklch(0.7836 0.0874 204.93 / 1)));color:var(--color-base-avatar-bfdfb4, var(--cnvs-base-palette-teal-800, oklch(0.3982 0.0687 209.08 / 1)));" },
+            purple: { name: "38ug0b", styles: "background-color:var(--backgroundColor-base-avatar-bfdfb4, var(--cnvs-base-palette-purple-600, oklch(0.5177 0.162 313.92 / 1)));color:var(--color-base-avatar-bfdfb4, var(--cnvs-sys-color-fg-inverse));" },
+            magenta: { name: "2b4fti", styles: "background-color:var(--backgroundColor-base-avatar-bfdfb4, var(--cnvs-base-palette-magenta-600, oklch(0.534 0.183 344.19 / 1)));color:var(--color-base-avatar-bfdfb4, var(--cnvs-sys-color-fg-inverse));" },
+            green: { name: "47vvh", styles: "background-color:var(--backgroundColor-base-avatar-bfdfb4, var(--cnvs-base-palette-green-600, oklch(0.5069 0.1569 145.56 / 1)));color:var(--color-base-avatar-bfdfb4, var(--cnvs-sys-color-fg-inverse));" }
         },
         size: {
-            extraExtraSmall: { name: "1aqozn", styles: "--size-base-avatar-bfdfb4:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));line-height:var(--cnvs-sys-line-height-subtext-sm, var(--cnvs-sys-line-height-subtext-small, 1rem));font-size:var(--cnvs-sys-font-size-subtext-sm, var(--cnvs-sys-font-size-subtext-small, 0.625rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-sm, var(--cnvs-sys-type-letter-spacing-subtext-small));" },
-            extraSmall: { name: "1m9mwx", styles: "--size-base-avatar-bfdfb4:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));line-height:var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem));font-size:var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium));" },
-            small: { name: "1ozm4o", styles: "--size-base-avatar-bfdfb4:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));line-height:var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small, 1.5rem));font-size:var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small, 1rem));letter-spacing:var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-sys-type-letter-spacing-body-small));" },
-            medium: { name: "l9xw2", styles: "--size-base-avatar-bfdfb4:var(--cnvs-base-size-600, 3rem);line-height:var(--cnvs-sys-line-height-body-md, var(--cnvs-sys-line-height-body-medium, 1.75rem));font-size:var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium, 1.125rem));" },
-            large: { name: "4buk74", styles: "--size-base-avatar-bfdfb4:var(--cnvs-base-size-900, 4.5rem);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-heading-md, var(--cnvs-sys-line-height-heading-medium, 2.25rem));font-size:var(--cnvs-sys-font-size-heading-md, var(--cnvs-sys-font-size-heading-medium, 1.75rem));" },
-            extraLarge: { name: "7yd3b", styles: "--size-base-avatar-bfdfb4:var(--cnvs-base-size-1200, 6rem);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-title-sm, var(--cnvs-sys-line-height-title-small, 3rem));font-size:var(--cnvs-sys-font-size-title-sm, var(--cnvs-sys-font-size-title-small, 2.5rem));" },
-            extraExtraLarge: { name: "1i64d6", styles: "--size-base-avatar-bfdfb4:7.5rem;font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-title-md, var(--cnvs-sys-line-height-title-medium, 3.5rem));font-size:var(--cnvs-sys-font-size-title-md, var(--cnvs-sys-font-size-title-medium, 3rem));" }
+            extraExtraSmall: { name: "37rd4b", styles: "--size-base-avatar-bfdfb4:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));line-height:var(--cnvs-sys-line-height-subtext-sm, var(--cnvs-sys-line-height-subtext-small, 1rem));font-size:var(--cnvs-sys-font-size-subtext-sm, var(--cnvs-sys-font-size-subtext-small, 0.625rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-sm, var(--cnvs-sys-type-letter-spacing-subtext-small));" },
+            extraSmall: { name: "2umexs", styles: "--size-base-avatar-bfdfb4:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));line-height:var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem));font-size:var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium));" },
+            small: { name: "3ozc6p", styles: "--size-base-avatar-bfdfb4:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));line-height:var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small, 1.5rem));font-size:var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small, 1rem));letter-spacing:var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-sys-type-letter-spacing-body-small));" },
+            medium: { name: "2unqd7", styles: "--size-base-avatar-bfdfb4:var(--cnvs-base-size-600, 3rem);line-height:var(--cnvs-sys-line-height-body-md, var(--cnvs-sys-line-height-body-medium, 1.75rem));font-size:var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium, 1.125rem));" },
+            large: { name: "3kpgek", styles: "--size-base-avatar-bfdfb4:var(--cnvs-base-size-900, 4.5rem);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-heading-md, var(--cnvs-sys-line-height-heading-medium, 2.25rem));font-size:var(--cnvs-sys-font-size-heading-md, var(--cnvs-sys-font-size-heading-medium, 1.75rem));" },
+            extraLarge: { name: "1nqb1r", styles: "--size-base-avatar-bfdfb4:var(--cnvs-base-size-1200, 6rem);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-title-sm, var(--cnvs-sys-line-height-title-small, 3rem));font-size:var(--cnvs-sys-font-size-title-sm, var(--cnvs-sys-font-size-title-small, 2.5rem));" },
+            extraExtraLarge: { name: "2e2q4r", styles: "--size-base-avatar-bfdfb4:7.5rem;font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-title-md, var(--cnvs-sys-line-height-title-medium, 3.5rem));font-size:var(--cnvs-sys-font-size-title-md, var(--cnvs-sys-font-size-title-medium, 3rem));" }
         }
     }
 }, "base-avatar-bfdfb4");

package/dist/commonjs/badge/lib/CountBadge.js CHANGED Viewed

@@ -5,24 +5,24 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const common_1 = require("@workday/canvas-kit-react/common");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
-const grow = (0, canvas_kit_styling_1.keyframes)({ name: "2wns1w", styles: "from{transform:scale(0.85);}to{transform:scale(1.0);}" });
+const grow = (0, canvas_kit_styling_1.keyframes)({ name: "3ujitz", styles: "from{transform:scale(0.85);}to{transform:scale(1.0);}" });
 // .cnvs-count-badge
 const countBadgeStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "43syuc", styles: "box-sizing:border-box;align-items:center;animation:animation-2wns1w 0.2s ease;border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));display:inline-flex;font-family:var(--cnvs-sys-font-family-default, \"Roboto\");font-weight:var(--cnvs-sys-font-weight-medium);line-height:var(--cnvs-sys-line-height-subtext-md, 1rem);font-size:var(--cnvs-sys-font-size-subtext-md, 0.75rem);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-md, 0.02rem);height:1.25rem;justify-content:center;min-width:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));padding:0 var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));background:var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));color:var(--cnvs-sys-color-fg-inverse);" },
+    base: { name: "cogmg", styles: "box-sizing:border-box;align-items:center;animation:animation-3ujitz 0.2s ease;border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));display:inline-flex;font-family:var(--cnvs-sys-font-family-default, \"Roboto\");font-weight:var(--cnvs-sys-font-weight-medium);line-height:var(--cnvs-sys-line-height-subtext-md, 1rem);font-size:var(--cnvs-sys-font-size-subtext-md, 0.75rem);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-md, 0.02rem);height:1.25rem;justify-content:center;min-width:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));padding:0 var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));background:var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));color:var(--cnvs-sys-color-fg-inverse);" },
     modifiers: {
         variant: {
             // .cnvs-count-badge--variant-inverse
-            inverse: { name: "2y791n", styles: "background:var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));color:var(--cnvs-sys-color-fg-strong);" }
+            inverse: { name: "41a8kn", styles: "background:var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));color:var(--cnvs-sys-color-fg-strong);" }
         },
         emphasis: {
-            high: { name: "405v33", styles: "" },
-            low: { name: "1bgy87", styles: "background:var(--cnvs-sys-color-surface-info-strong, var(--cnvs-sys-color-bg-info-softer, oklch(0.6152 0.2108 256.1 / 0.11)));color:var(--cnvs-sys-color-fg-info-strong, var(--cnvs-sys-color-fg-primary-strong, oklch(0.4658 0.1562 255.5 / 1)));" }
+            high: { name: "37bw5s", styles: "" },
+            low: { name: "xe8p", styles: "background:var(--cnvs-sys-color-surface-info-strong, var(--cnvs-sys-color-bg-info-softer, oklch(0.6152 0.2108 256.1 / 0.11)));color:var(--cnvs-sys-color-fg-info-strong, var(--cnvs-sys-color-fg-primary-strong, oklch(0.4658 0.1562 255.5 / 1)));" }
         }
     },
     compound: [
         {
             modifiers: { variant: 'inverse', emphasis: 'low' },
-            styles: { name: "13bf4h", styles: "background:var(--cnvs-sys-color-surface-overlay-hover-inverse, oklch(1 0 0 / 0.16));color:var(--cnvs-sys-color-fg-inverse);" }
+            styles: { name: "1z4z7e", styles: "background:var(--cnvs-sys-color-surface-overlay-hover-inverse, oklch(1 0 0 / 0.16));color:var(--cnvs-sys-color-fg-inverse);" }
         }
     ]
 }, "count-badge-524876");

package/dist/commonjs/banner/lib/Banner.js CHANGED Viewed

@@ -13,15 +13,15 @@ const BannerLabel_1 = require("./BannerLabel");
 const hooks_1 = require("./hooks");
 exports.bannerStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: common_1.cornerShapeStencil,
-    base: { name: "2md52q", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default), Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));padding-inline:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem)) var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));padding-block:0.625rem;border:0;display:flex;align-items:center;text-align:left;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));cursor:pointer;transition:background-color 120ms linear;outline:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem)) solid transparent;box-shadow:var(--cnvs-sys-depth-5);&:focus-visible, &.focus{outline:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem)) double transparent;box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 4px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));}" },
+    base: { name: "2nlmpz", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default), Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));padding-inline:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem)) var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));padding-block:0.625rem;border:0;display:flex;align-items:center;text-align:left;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));cursor:pointer;transition:background-color 120ms linear;outline:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem)) solid transparent;box-shadow:var(--cnvs-sys-depth-5);&:focus-visible, &.focus{outline:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem)) double transparent;box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 4px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));}" },
     modifiers: {
         hasErrors: {
-            true: { name: "17py5t", styles: "background-color:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));color:var(--cnvs-sys-color-fg-inverse);&:hover, &.hover{background:color-mix(in srgb, var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1))) , var(--cnvs-sys-color-accent-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-accent-hover, 0.18) * 100%));}& [data-part=\"exclamation-circle-icon\"]{--accentColor-system-icon-c9acc3:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);--backgroundColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);}" },
-            false: { name: "3cdi5a", styles: "background-color:var(--cnvs-sys-color-brand-accent-caution, oklch(0.7909 0.1711 70.15 / 1));color:var(--cnvs-sys-color-fg-contrast-default);&:hover, &.hover{background:color-mix(in srgb, var(--cnvs-sys-color-brand-accent-caution, oklch(0.7909 0.1711 70.15 / 1)) , var(--cnvs-sys-color-accent-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-accent-hover, 0.18) * 100%));}& [data-part=\"exclamation-triangle-icon\"]{--accentColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse, currentColor);--color-system-icon-c9acc3:var(--cnvs-sys-color-brand-fg-caution-strong, oklch(0.4824 0.1353 46.11 / 1));--backgroundColor-system-icon-c9acc3:var(--cnvs-sys-color-brand-fg-caution-strong, oklch(0.4824 0.1353 46.11 / 1));}" }
+            true: { name: "2buj7f", styles: "background-color:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));color:var(--cnvs-sys-color-fg-inverse);&:hover, &.hover{background:color-mix(in srgb, var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1))) , var(--cnvs-sys-color-accent-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-accent-hover, 0.18) * 100%));}& [data-part=\"exclamation-circle-icon\"]{--accentColor-system-icon-c9acc3:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);--backgroundColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);}" },
+            false: { name: "1n3j98", styles: "background-color:var(--cnvs-sys-color-brand-accent-caution, oklch(0.7909 0.1711 70.15 / 1));color:var(--cnvs-sys-color-fg-contrast-default);&:hover, &.hover{background:color-mix(in srgb, var(--cnvs-sys-color-brand-accent-caution, oklch(0.7909 0.1711 70.15 / 1)) , var(--cnvs-sys-color-accent-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-accent-hover, 0.18) * 100%));}& [data-part=\"exclamation-triangle-icon\"]{--accentColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse, currentColor);--color-system-icon-c9acc3:var(--cnvs-sys-color-brand-fg-caution-strong, oklch(0.4824 0.1353 46.11 / 1));--backgroundColor-system-icon-c9acc3:var(--cnvs-sys-color-brand-fg-caution-strong, oklch(0.4824 0.1353 46.11 / 1));}" }
         },
         isSticky: {
-            true: { name: "3wgdf7", styles: "width:13.875rem;border-start-end-radius:0;border-end-end-radius:0;" },
-            false: { name: "1bd139", styles: "width:20.5rem;" }
+            true: { name: "3c99jr", styles: "width:13.875rem;border-start-end-radius:0;border-end-end-radius:0;" },
+            false: { name: "4cn4w1", styles: "width:20.5rem;" }
         }
     }
 }, "banner-5b2eb3");

package/dist/commonjs/banner/lib/BannerActionText.js CHANGED Viewed

@@ -7,10 +7,10 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const hooks_1 = require("./hooks");
 exports.actionBarTextStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "3rpxgu", styles: "box-sizing:border-box;text-decoration:underline;display:inline;" },
+    base: { name: "39db89", styles: "box-sizing:border-box;text-decoration:underline;display:inline;" },
     modifiers: {
         isSticky: {
-            true: { name: "fa7iv", styles: "display:none;" }
+            true: { name: "34fe2c", styles: "display:none;" }
         }
     }
 }, "action-bar-text-c1912f");