diff --git a/modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx b/modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx index 251fa494df..386c9937d4 100644 --- a/modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx +++ b/modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx @@ -19,6 +19,14 @@ Soon to be... - [New Components](#new-components) - [KBD](#kbd) - [Component Updates](#component-updates) + - [Accessibility: Checked-State Contrast](#accessibility-checked-state-contrast) + - [Checkbox](#checkbox) + - [Radio](#radio) + - [Color Input](#color-input) + - [Color Picker](#color-picker) + - [Form Field](#form-field) + - [Text Area](#text-area) + - [Text Input](#text-input) - [Card](#card) - [New Utilities](#new-utilities) - [cornerShapeStencil](#cornershapestencil) @@ -122,8 +130,71 @@ functional shortcuts, refer to the storybook documentation and our example stori ## Component Updates -> **Note:** All visual updates apply to both the Default Canvas theme and new Sana Canvas theme -> unless specified otherwise. +### Accessibility: Checked-State Contrast + +> **Important:** The checked states of `Checkbox`, `Radio`, and `Switch` now derive their +> background/fill color from `system.color.brand.accent.positive` (which maps to your theme's +> `brand.success.600`), while the foreground (the check icon, radio dot, and switch thumb) remains +> an inverse/white color. This pairing relies on `brand.success.600` being a sufficiently dark +> color. + +This change is safe for the default Canvas themes, where `brand.success.600` is dark enough to +maintain adequate contrast against the white foreground. However, **consumer themes that override +`brand.success.600` with a light color may produce insufficient contrast** between the checked +background and the white check icon, radio dot, or switch thumb. This can cause the checked state to +fail +[WCAG 1.4.11 Non-text Contrast (3:1)](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html). + +If you customize `brand.success.600` in your theme, please verify the following: + +- **Maintain a minimum 3:1 contrast ratio** between your `brand.success.main` value and the white + (`#ffffff`) foreground used for the check icon, radio dot, and switch thumb. +- Prefer a `brand.success.600` value that is dark enough to pair with a light foreground. If your + brand requires a light success color, you may need to override the component styles so the + foreground uses a darker, paired contrast color instead of white. + > **Note:** All visual updates apply to both the Default Canvas theme and new Sana Canvas theme + > unless specified otherwise. + +### Checkbox + +**PR:** [#3984](https://github.com/Workday/canvas-kit/pull/3984) + +#### Visual Updates + +- The default Checkbox size is now **20px** (previously 24px). +- Checked state uses `system.color.brand.accent.positive` instead of + `system.color.brand.accent.primary` for the background. +- Error and alert states no longer display a status background color; only the standard background + is shown. +- The hover ring is smaller to better align with the smaller size. The hover ring background color + uses neutral instead of slate in `sana-canvas` theme. + +### Radio + +**PR:** [#3984](https://github.com/Workday/canvas-kit/pull/3984) + +#### Visual Updates + +- The default Radio size is now **20px** (previously 24px). +- Checked state uses `system.color.brand.accent.positive` instead of + `system.color.brand.accent.primary` for the background. +- Error and alert states no longer display a status background color; only the standard background + is shown. +- The hover ring is smaller to better align with the smaller size. The hover ring background color + uses a neutral color instead of slate in `sana-canvas` theme. + +### Switch + +**PR:** [#3984](https://github.com/Workday/canvas-kit/pull/3984) + +#### Visual Updates + +- The Switch thumb is now **16px** (was 14px). The icon-thumb container width remains unchanged. +- The checked state background now uses `system.color.brand.accent.positive` instead of + `system.color.brand.accent.primary`. +- The default (unchecked) background color now uses `system.color.surface.muted.default` instead of + `system.color.surface.muted.soft`. Background color uses a neutral color instead of slate in + `sana-canvas` theme. ### Color Input diff --git a/modules/docs/package.json b/modules/docs/package.json index 2b8ca5ec3a..2c52dd0b38 100644 --- a/modules/docs/package.json +++ b/modules/docs/package.json @@ -52,7 +52,7 @@ "@workday/canvas-kit-react": "^15.0.14", "@workday/canvas-kit-styling": "^15.0.14", "@workday/canvas-system-icons-web": "4.0.4", - "@workday/canvas-tokens-web": "4.4.0-beta.0", + "@workday/canvas-tokens-web": "4.4.0-beta.3", "markdown-to-jsx": "^7.2.0", "react-syntax-highlighter": "^15.5.0", "ts-node": "^10.9.1" diff --git a/modules/labs-react/package.json b/modules/labs-react/package.json index e0c217f53e..b0a5622e33 100644 --- a/modules/labs-react/package.json +++ b/modules/labs-react/package.json @@ -51,7 +51,7 @@ "@workday/canvas-kit-react": "^15.0.14", "@workday/canvas-kit-styling": "^15.0.14", "@workday/canvas-system-icons-web": "4.0.4", - "@workday/canvas-tokens-web": "4.4.0-beta.0", + "@workday/canvas-tokens-web": "4.4.0-beta.3", "@workday/design-assets-types": "^0.3.0", "chroma-js": "^2.2.0", "lodash.flatten": "^4.4.0", diff --git a/modules/preview-react/package.json b/modules/preview-react/package.json index b89d4b7059..3937e9fc9a 100644 --- a/modules/preview-react/package.json +++ b/modules/preview-react/package.json @@ -51,7 +51,7 @@ "@workday/canvas-kit-react": "^15.0.14", "@workday/canvas-kit-styling": "^15.0.14", "@workday/canvas-system-icons-web": "4.0.4", - "@workday/canvas-tokens-web": "4.4.0-beta.0", + "@workday/canvas-tokens-web": "4.4.0-beta.3", "@workday/design-assets-types": "^0.3.0" }, "devDependencies": { diff --git a/modules/preview-react/radio/lib/RadioGroup.tsx b/modules/preview-react/radio/lib/RadioGroup.tsx index ee790d560c..61229e0598 100644 --- a/modules/preview-react/radio/lib/RadioGroup.tsx +++ b/modules/preview-react/radio/lib/RadioGroup.tsx @@ -1,4 +1,9 @@ -import {ErrorType, Themeable, createContainer} from '@workday/canvas-kit-react/common'; +import { + ErrorType, + Themeable, + cornerShapeStencil, + createContainer, +} from '@workday/canvas-kit-react/common'; import {FlexProps, mergeStyles} from '@workday/canvas-kit-react/layout'; import {CSProps, calc, createStencil, px2rem} from '@workday/canvas-kit-styling'; import {base, system} from '@workday/canvas-tokens-web'; @@ -18,12 +23,13 @@ export interface RadioGroupProps extends Themeable, CSProps, FlexProps { * Styles for RadioGroup */ const radioGroupStencil = createStencil({ + extends: cornerShapeStencil, base: { + [cornerShapeStencil.vars.shape]: system.legacy.shape.lg, display: 'flex', flexDirection: 'column', - borderRadius: system.legacy.shape.md, gap: system.legacy.gap.sm, - padding: `${px2rem(10)} ${base.legacy.size150} ${system.legacy.padding.xs}`, + padding: `${system.legacy.padding.xs} ${system.legacy.padding.sm}`, margin: `0 ${calc.negate(base.legacy.size150)}`, transition: '100ms box-shadow', width: 'fit-content', @@ -32,10 +38,8 @@ const radioGroupStencil = createStencil({ error: { error: { boxShadow: `inset 0 0 0 ${px2rem(2)} ${system.legacy.color.brand.border.critical}`, - backgroundColor: system.legacy.color.brand.surface.critical.default, }, caution: { - backgroundColor: system.legacy.color.brand.surface.caution.default, boxShadow: `inset 0 0 0 ${px2rem(1)} ${system.legacy.color.brand.focus.caution.inner}, inset 0 0 0 ${px2rem(3)} ${system.legacy.color.brand.border.caution}`, }, }, diff --git a/modules/preview-react/radio/lib/RadioLabel.tsx b/modules/preview-react/radio/lib/RadioLabel.tsx index 5c0e489199..19c965020b 100644 --- a/modules/preview-react/radio/lib/RadioLabel.tsx +++ b/modules/preview-react/radio/lib/RadioLabel.tsx @@ -3,7 +3,7 @@ import React from 'react'; import {ExtractProps, Themeable, createSubcomponent} from '@workday/canvas-kit-react/common'; import {Flex, mergeStyles} from '@workday/canvas-kit-react/layout'; import {CSProps, createStencil} from '@workday/canvas-kit-styling'; -import {base, system} from '@workday/canvas-tokens-web'; +import {system} from '@workday/canvas-tokens-web'; import {RadioInput} from './RadioInput'; import {RadioText} from './RadioText'; @@ -28,7 +28,7 @@ export interface RadioLabelProps const radioLabelStencil = createStencil({ base: { alignItems: 'flex-start', - minHeight: base.legacy.size225, + minHeight: system.legacy.size.xxxs, position: 'relative', gap: system.legacy.gap.sm, }, diff --git a/modules/preview-react/radio/lib/StyledRadioButton.tsx b/modules/preview-react/radio/lib/StyledRadioButton.tsx index 227dfcfa87..a7522060df 100644 --- a/modules/preview-react/radio/lib/StyledRadioButton.tsx +++ b/modules/preview-react/radio/lib/StyledRadioButton.tsx @@ -3,7 +3,7 @@ import React from 'react'; import {ExtractProps, StyledType, createComponent} from '@workday/canvas-kit-react/common'; import {Box, Flex, mergeStyles} from '@workday/canvas-kit-react/layout'; import {CSProps, createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling'; -import {base, system} from '@workday/canvas-tokens-web'; +import {system} from '@workday/canvas-tokens-web'; import {RadioLabelContext} from './RadioLabel'; @@ -17,23 +17,23 @@ export const radioInputStencil = createStencil({ }, base: { cursor: 'pointer', - height: base.legacy.size225, - width: base.legacy.size225, + height: system.legacy.size.xs, + width: system.legacy.size.xs, borderRadius: system.legacy.shape.full, position: 'absolute', margin: 0, + opacity: system.opacity.zero, '&:focus-visible, &.focus, &:active': { - outline: 'transparent', + outline: `${px2rem(1)} solid transparent`, }, '&:disabled, &.disabled': { cursor: 'auto', - opacity: system.opacity.disabled, // This creates the inner circle when the Radio is checked. // The backgroundColor represents the dot in the middle of the radio. // The borderColor represents the border around the middle dot of the radio. '&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check': { backgroundColor: system.legacy.color.surface.default, // inner circle background color - border: `${px2rem(5)} solid ${system.legacy.color.brand.accent.primary}`, // inner circle border color + border: `${px2rem(5)} solid ${system.legacy.color.brand.accent.positive}`, // inner circle border color }, }, @@ -45,8 +45,8 @@ export const radioInputStencil = createStencil({ backgroundColor: system.color.bg.default, boxSizing: 'border-box', border: `${px2rem(1)} solid ${system.color.border.input.default}`, - height: base.legacy.size225, - width: base.legacy.size225, + height: system.legacy.size.xxxs, + width: system.legacy.size.xxxs, borderRadius: system.legacy.shape.full, justifyContent: 'center', pointerEvents: 'none', @@ -69,7 +69,7 @@ export const radioInputStencil = createStencil({ // The borderColor represents the border around the middle dot of the radio. '&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check': { backgroundColor: system.legacy.color.surface.default, // inner circle background color - border: `${px2rem(5)} solid ${system.legacy.color.brand.accent.primary}`, // inner circle border color + border: `${px2rem(5)} solid ${system.legacy.color.brand.accent.positive}`, // inner circle border color }, '&:focus-visible:checked + .cnvs-radio-check, &:focus-visible:hover:checked + .cnvs-radio-check, &.focus:checked + .cnvs-radio-check, &.focus:hover:checked + .cnvs-radio-check': @@ -96,7 +96,7 @@ export const radioInputStencil = createStencil({ // The backgroundColor represents the dot in the middle of the radio. // The borderColor represents the border around the middle dot of the radio. [`&:checked + ${checkPart}, &.checked + ${checkPart}`]: { - backgroundColor: system.legacy.color.brand.accent.primary, // inner circle background color + backgroundColor: system.legacy.color.brand.accent.positive, // inner circle background color borderColor: system.legacy.color.border.inverse.default, // inner circle border color }, }, @@ -135,29 +135,31 @@ const StyledRadioInput = createComponent('input') ({ [errorRingColorInner]: system.legacy.color.brand.border.critical, - - [errorRingColorOuter]: 'transparent', - backgroundColor: system.legacy.color.brand.surface.critical.default, + [errorRingColorOuter]: system.legacy.color.brand.border.critical, }), caution: ({errorRingColorInner, errorRingColorOuter}) => ({ [errorRingColorInner]: system.legacy.color.brand.focus.caution.inner, - [errorRingColorOuter]: system.legacy.color.brand.border.caution, - - backgroundColor: system.legacy.color.brand.surface.caution.default, }), }, }, diff --git a/modules/react/checkbox/lib/CheckboxCheck.tsx b/modules/react/checkbox/lib/CheckboxCheck.tsx index 6507e7908a..1a24e38284 100644 --- a/modules/react/checkbox/lib/CheckboxCheck.tsx +++ b/modules/react/checkbox/lib/CheckboxCheck.tsx @@ -2,7 +2,7 @@ import {ErrorType, createComponent} from '@workday/canvas-kit-react/common'; import {SystemIcon, systemIconStencil} from '@workday/canvas-kit-react/icon'; import {calc, createStencil, px2rem} from '@workday/canvas-kit-styling'; import {checkSmallIcon} from '@workday/canvas-system-icons-web'; -import {system} from '@workday/canvas-tokens-web'; +import {component, system} from '@workday/canvas-tokens-web'; import {CheckBackground} from './CheckBackground'; @@ -15,13 +15,15 @@ interface CheckboxCheckProps { const checkboxCheckStencil = createStencil({ base: { + [systemIconStencil.vars.size]: component.legacy.systemIcon.size.md, display: 'flex', flexDirection: 'column', + justifyContent: 'center', maxWidth: '100%', pointerEvents: 'none', transition: 'transform 200ms ease, opacity 200ms ease', span: { - marginInlineStart: calc.negate(px2rem(6)), + marginInlineStart: calc.negate(px2rem(5)), transition: 'margin 200ms ease', }, opacity: system.opacity.zero, @@ -43,7 +45,7 @@ const checkboxCheckStencil = createStencil({ }, variant: { inverse: { - [systemIconStencil.vars.color]: system.legacy.color.brand.fg.primary.default, + [systemIconStencil.vars.color]: system.legacy.color.brand.accent.primary, '& > div': { backgroundColor: system.legacy.color.brand.accent.primary, @@ -62,7 +64,7 @@ const indeterminateBoxStencil = createStencil({ modifiers: { variant: { inverse: { - backgroundColor: system.legacy.color.brand.accent.primary, + backgroundColor: system.legacy.color.brand.accent.positive, }, }, }, diff --git a/modules/react/checkbox/lib/CheckboxContainer.tsx b/modules/react/checkbox/lib/CheckboxContainer.tsx index e5fe0265ea..b662abe647 100644 --- a/modules/react/checkbox/lib/CheckboxContainer.tsx +++ b/modules/react/checkbox/lib/CheckboxContainer.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; import {createComponent} from '@workday/canvas-kit-react/common'; -import {LabelText} from '@workday/canvas-kit-react/text'; -import {CSProps, createStencil} from '@workday/canvas-kit-styling'; -import {base, system} from '@workday/canvas-tokens-web'; +import {Subtext} from '@workday/canvas-kit-react/text'; +import {CSProps, calc, createStencil, px2rem} from '@workday/canvas-kit-styling'; +import {system} from '@workday/canvas-tokens-web'; interface CheckboxContainerProps extends CSProps { children: React.ReactNode; @@ -14,10 +14,13 @@ interface CheckboxContainerProps extends CSProps { } const checkboxContainerStencil = createStencil({ - base: { + parts: { + label: 'checkbox-container-label', + }, + base: ({labelPart}) => ({ display: 'flex', alignItems: 'center', - minHeight: base.legacy.size225, + minHeight: system.legacy.size.xxxs, position: 'relative', /** * Using a wrapper prevents the browser default behavior of trigging @@ -26,13 +29,25 @@ const checkboxContainerStencil = createStencil({ */ '&>div': { display: 'flex', - height: base.legacy.size225, - minWidth: base.legacy.size225, + height: system.legacy.size.xxxs, + minWidth: system.legacy.size.xxxs, alignSelf: 'flex-start', position: 'relative', }, - '& > label': { - paddingInlineStart: system.legacy.padding.sm, + [labelPart]: { + paddingInlineStart: system.legacy.padding.xs, + cursor: 'pointer', + marginBlockStart: calc.negate(px2rem(2)), + }, + }), + modifiers: { + disabled: { + true: ({labelPart}) => ({ + opacity: system.opacity.disabled, + [labelPart]: { + cursor: 'default', + }, + }), }, }, }); @@ -41,17 +56,18 @@ export const CheckboxContainer = createComponent('div')({ displayName: 'CheckboxContainer', Component: ({children, disabled, id, label, variant}: CheckboxContainerProps) => { return ( -
+
{children}
{label && ( - {label} - + )}
); diff --git a/modules/react/checkbox/lib/CheckboxInput.tsx b/modules/react/checkbox/lib/CheckboxInput.tsx index fff4f17757..1b1e244b23 100644 --- a/modules/react/checkbox/lib/CheckboxInput.tsx +++ b/modules/react/checkbox/lib/CheckboxInput.tsx @@ -1,8 +1,13 @@ import * as React from 'react'; -import {ErrorType, createComponent, focusRing} from '@workday/canvas-kit-react/common'; +import { + ErrorType, + cornerShapeStencil, + createComponent, + focusRing, +} from '@workday/canvas-kit-react/common'; import {CSProps, calc, createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling'; -import {base, system} from '@workday/canvas-tokens-web'; +import {system} from '@workday/canvas-tokens-web'; import {checkboxBackgroundStencil} from './CheckBackground'; import {checkboxRippleStencil} from './CheckboxRipple'; @@ -52,13 +57,14 @@ export interface CheckboxProps extends CSProps { } const checkboxInputStencil = createStencil({ + extends: cornerShapeStencil, base: { - borderRadius: system.legacy.shape.sm, - width: base.legacy.size300, - height: base.legacy.size300, + [cornerShapeStencil.vars.shape]: system.legacy.shape.sm, + width: system.legacy.size.xs, + height: system.legacy.size.xs, margin: 0, - marginBlockStart: calc.negate(px2rem(3)), - marginInlineStart: calc.negate(px2rem(3)), + marginBlockStart: calc.negate(px2rem(4)), + marginInlineStart: calc.negate(px2rem(4)), position: 'absolute', opacity: system.opacity.zero, @@ -67,7 +73,7 @@ const checkboxInputStencil = createStencil({ }, [`&:where(:hover,.hover) ~ [data-part="${checkboxRippleStencil.parts.ripple['data-part']}"]`]: { - boxShadow: `0 0 0 ${px2rem(7)} ${system.legacy.color.surface.overlay.hover.default}`, + boxShadow: `0 0 0 ${px2rem(6)} ${system.legacy.color.surface.overlay.hover.default}`, }, // Hover state and not disabled @@ -78,8 +84,8 @@ const checkboxInputStencil = createStencil({ [`&:where(:checked, :indeterminate) ~ [data-part="${checkboxBackgroundStencil.parts.background['data-part']}"]`]: { - borderColor: system.legacy.color.brand.accent.primary, - backgroundColor: system.legacy.color.brand.accent.primary, + borderColor: system.legacy.color.brand.accent.positive, + backgroundColor: system.legacy.color.brand.accent.positive, }, [`&:where(:disabled, .disabled) ~ [data-part="${checkboxBackgroundStencil.parts.background['data-part']}"]`]: @@ -112,8 +118,16 @@ const checkboxInputStencil = createStencil({ animate: false, outerColor: system.legacy.color.brand.border.primary, }), - borderColor: system.legacy.color.brand.accent.primary, + borderColor: system.legacy.color.brand.accent.positive, borderWidth: px2rem(2), + '> div': { + span: { + marginInlineStart: calc.negate(px2rem(6)), + }, + div: { + marginInlineStart: calc.negate(px2rem(1)), + }, + }, }, }, }, @@ -138,10 +152,6 @@ const checkboxInputStencil = createStencil({ borderColor: system.legacy.color.focus.inverse, backgroundColor: system.legacy.color.surface.inverse, }, - // Disabled State for inverse variant (applies to all disabled states: unchecked, checked, and indeterminate) - [`&:disabled ~ [data-part="${checkboxBackgroundStencil.parts.background['data-part']}"]`]: { - opacity: system.opacity.disabled, - }, // Disabled + checked/indeterminate state for inverse variant [`&:where(:checked, :indeterminate):where(:disabled, .disabled) ~ [data-part="${checkboxBackgroundStencil.parts.background['data-part']}"]`]: { @@ -175,15 +185,15 @@ const checkboxInputStencil = createStencil({ '&:not(:where(:focus-visible, .focus)) ~ div:first-of-type': { borderColor: checkboxBackgroundStencil.vars.errorRingColorInner, boxShadow: ` - 0 0 0 ${px2rem(1)} ${checkboxBackgroundStencil.vars.errorRingColorInner}, - 0 0 0 ${px2rem(2)} ${checkboxBackgroundStencil.vars.errorRingColorOuter}`, + 0 0 0 ${px2rem(1)} ${checkboxBackgroundStencil.vars.errorRingColorOuter}, + 0 0 0 ${px2rem(1)} ${checkboxBackgroundStencil.vars.errorRingColorInner}`, }, '&:where(:checked, :indeterminate) ~ div:first-of-type': { borderColor: 'transparent', boxShadow: ` 0 0 0 ${px2rem(2)} ${system.legacy.color.focus.inverse}, - 0 0 0 ${px2rem(4)} ${checkboxBackgroundStencil.vars.errorRingColorInner}, - 0 0 0 ${px2rem(5)} ${checkboxBackgroundStencil.vars.errorRingColorOuter}`, + 0 0 0 ${px2rem(3)} ${checkboxBackgroundStencil.vars.errorRingColorInner}, + 0 0 0 ${px2rem(4)} ${checkboxBackgroundStencil.vars.errorRingColorOuter}`, }, '&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type': { @@ -194,12 +204,12 @@ const checkboxInputStencil = createStencil({ }, compound: [ { - modifiers: {variant: 'inverse', error: true}, + modifiers: {variant: 'inverse', error: 'true'}, styles: { '&:not(:where(:focus-visible, .focus)) ~ div:first-of-type': { border: `${px2rem(1)} solid ${system.legacy.color.focus.inverse}`, }, - '&:not(where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type': + '&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type': { borderColor: system.legacy.color.focus.inverse, }, @@ -221,7 +231,14 @@ export const CheckboxInput = createComponent('input')({ type="checkbox" ref={ref} aria-checked={indeterminate ? 'mixed' : checked} - {...handleCsProp(elemProps, checkboxInputStencil({variant, disabled, error: !!error}))} + {...handleCsProp( + elemProps, + checkboxInputStencil({ + variant, + disabled: disabled ? 'true' : undefined, + error: error ? 'true' : undefined, + }) + )} /> ); }, diff --git a/modules/react/checkbox/lib/CheckboxRipple.tsx b/modules/react/checkbox/lib/CheckboxRipple.tsx index 97516efc5d..8b72597bab 100644 --- a/modules/react/checkbox/lib/CheckboxRipple.tsx +++ b/modules/react/checkbox/lib/CheckboxRipple.tsx @@ -1,6 +1,6 @@ import {createComponent} from '@workday/canvas-kit-react/common'; import {CSProps, createStencil, handleCsProp} from '@workday/canvas-kit-styling'; -import {base, system} from '@workday/canvas-tokens-web'; +import {system} from '@workday/canvas-tokens-web'; export const checkboxRippleStencil = createStencil({ parts: { @@ -9,8 +9,8 @@ export const checkboxRippleStencil = createStencil({ base: { borderRadius: system.legacy.shape.full, boxShadow: 'none', - height: base.legacy.size225, - width: base.legacy.size225, + height: system.legacy.size.xxxs, + width: system.legacy.size.xxxs, transition: 'box-shadow 150ms ease-out', position: 'absolute', pointerEvents: 'none', diff --git a/modules/react/form-field/lib/FormFieldGroupList.tsx b/modules/react/form-field/lib/FormFieldGroupList.tsx index 83ca4d7596..c56c485d7e 100644 --- a/modules/react/form-field/lib/FormFieldGroupList.tsx +++ b/modules/react/form-field/lib/FormFieldGroupList.tsx @@ -14,7 +14,7 @@ const formFieldGroupListStencil = createStencil({ display: 'flex', flexDirection: 'column', gap: system.legacy.gap.sm, - padding: `${px2rem(10)} ${base.legacy.size150} ${system.legacy.padding.xs}`, + padding: `${system.legacy.padding.xs} ${system.legacy.padding.sm}`, margin: `0 ${calc.negate(base.legacy.size150)}`, transition: '100ms box-shadow', width: 'fit-content', diff --git a/modules/react/package.json b/modules/react/package.json index c1300bf9e8..042d749a99 100644 --- a/modules/react/package.json +++ b/modules/react/package.json @@ -57,7 +57,7 @@ "@workday/canvas-kit-preview-react": "^15.0.14", "@workday/canvas-kit-styling": "^15.0.14", "@workday/canvas-system-icons-web": "4.0.4", - "@workday/canvas-tokens-web": "4.4.0-beta.0", + "@workday/canvas-tokens-web": "4.4.0-beta.3", "@workday/design-assets-types": "^0.3.0", "chroma-js": "^2.2.0", "csstype": "^3.0.2", diff --git a/modules/styling-transform/package.json b/modules/styling-transform/package.json index 10ad32b308..f54b5d9768 100644 --- a/modules/styling-transform/package.json +++ b/modules/styling-transform/package.json @@ -37,7 +37,7 @@ "dependencies": { "@emotion/serialize": "^1.0.2", "@workday/canvas-kit-styling": "^15.0.14", - "@workday/canvas-tokens-web": "4.4.0-beta.0", + "@workday/canvas-tokens-web": "4.4.0-beta.3", "stylis": "4.3.6", "ts-node": "^10.9.1", "typescript": "5.0" diff --git a/modules/styling/package.json b/modules/styling/package.json index b4d01713c0..8440985067 100644 --- a/modules/styling/package.json +++ b/modules/styling/package.json @@ -55,7 +55,7 @@ "@emotion/styled": "^11.6.0", "@workday/canvas-kit-react": "^15.0.14", "@workday/canvas-system-icons-web": "4.0.4", - "@workday/canvas-tokens-web": "4.4.0-beta.0", + "@workday/canvas-tokens-web": "4.4.0-beta.3", "typescript": "5.0" } } diff --git a/package.json b/package.json index bd9283cd82..2b196fdc4e 100644 --- a/package.json +++ b/package.json @@ -140,7 +140,7 @@ "@workday/canvas-applet-icons-web": "^2.0.15", "@workday/canvas-expressive-icons-web": "1.0.2", "@workday/canvas-system-icons-web": "4.0.4", - "@workday/canvas-tokens-web": "4.4.0-beta.0", + "@workday/canvas-tokens-web": "4.4.0-beta.3", "resolutions": { "ansi-regex": "3.0.1", "braces": "3.0.3", diff --git a/utils/storybook/customThemes.ts b/utils/storybook/customThemes.ts index 16da8f120a..5b64b95a91 100644 --- a/utils/storybook/customThemes.ts +++ b/utils/storybook/customThemes.ts @@ -13,7 +13,7 @@ export const customColorTheme: PartialCanvasTheme = { main: 'crimson', }, success: { - main: 'aquamarine', + main: 'darkolivegreen', }, neutral: { main: 'gray', diff --git a/yarn.lock b/yarn.lock index 2e8c7ec31e..3d18e6caae 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4834,10 +4834,10 @@ resolved "https://registry.yarnpkg.com/@workday/canvas-system-icons-web/-/canvas-system-icons-web-4.0.4.tgz#8ddaa5a465059227d79b808c263f167f7d3b6915" integrity sha512-+CO8OTemP947vf/nQeVu3IxHrq9Q2sHra3/FAImkQ0w4/f3tlOgQn7YTWt7rKL2fvTYghjNN0HoHQSR0T64uWg== -"@workday/canvas-tokens-web@4.4.0-beta.0": - version "4.4.0-beta.0" - resolved "https://registry.yarnpkg.com/@workday/canvas-tokens-web/-/canvas-tokens-web-4.4.0-beta.0.tgz#6d93f5329eb94c6d3843ccb630d9a1b7b1faf66c" - integrity sha512-9q2alt3aG+coip7G3oyAubChFH3TBgOsGHtRDHVuTY1qN1l2UzzgWE/YGjJlHe8QK7ukBd4gc8bYys/817jtjw== +"@workday/canvas-tokens-web@4.4.0-beta.3": + version "4.4.0-beta.3" + resolved "https://registry.yarnpkg.com/@workday/canvas-tokens-web/-/canvas-tokens-web-4.4.0-beta.3.tgz#59964c31e43383499136f13e88b5b6aa6d4fedcd" + integrity sha512-MF4RhgcdOZSyhGZqLfD8iypoujqjP4CrWciKdGLHNbNoRqBlpmJTjv+mWrhRxAbDdi283Vf2oqk5TdfXH9BnTw== "@workday/design-assets-types@0.2.8": version "0.2.8"