@workday/canvas-kit-preview-react 14.0.0-alpha.1168-next.0 → 14.0.0-alpha.1171-next.0

package/multi-select/lib/MultiSelectInput.tsx

@@ -26,7 +26,7 @@ export const multiSelectInputStencil = createStencil({
     display: 'flex',
     flexDirection: 'column',
     backgroundColor: system.color.bg.default,
-    borderRadius: system.shape.x1,
+    borderRadius: system.shape.x1Half,
     boxSizing: 'border-box',
     minHeight: system.space.x10,
     transition: '0.2s box-shadow, 0.2s border-color',
@@ -100,28 +100,31 @@ export const multiSelectInputStencil = createStencil({
   modifiers: {
     error: {
       error: {
-        borderColor: brand.error.base,
-        boxShadow: `inset 0 0 0 ${px2rem(1)} ${brand.error.base}`,
+        borderColor: brand.common.errorInner,
+        boxShadow: `inset 0 0 0 ${px2rem(1)} ${brand.common.errorInner}`,
+        backgroundColor: brand.error.lightest,
         '&:has(:hover, :disabled, :focus-visible), &:is(.hover, .disabled, .focus)': {
-          borderColor: brand.error.base,
+          borderColor: brand.common.errorInner,
         },
         '&:has(:focus-visible:not([disabled])), &.focus': {
-          boxShadow: `inset 0 0 0 ${px2rem(1)} ${brand.error.base}, 0 0 0 2px ${
+          borderColor: brand.common.errorInner,
+          boxShadow: `inset 0 0 0 ${px2rem(1)} ${brand.common.errorInner}, 0 0 0 2px ${
             system.color.border.inverse
           }, 0 0 0 4px ${brand.common.focusOutline}`,
           outlineOffset: px2rem(2),
         },
       },
       alert: {
-        borderColor: brand.alert.darkest,
-        boxShadow: `inset 0 0 0 ${px2rem(2)} ${brand.alert.base}`,
+        borderColor: brand.common.alertOuter,
+        boxShadow: `inset 0 0 0 ${px2rem(2)} ${brand.common.alertInner}`,
+        backgroundColor: brand.alert.lightest,
         '&:has(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled])), .focus:not(:has([disabled]))':
           {
-            borderColor: brand.alert.darkest,
+            borderColor: brand.common.alertOuter,
           },
 
         '&:has(:focus-visible, .focus):not(:has([disabled]))': {
-          boxShadow: `inset 0 0 0 ${px2rem(2)} ${brand.alert.base},
+          boxShadow: `inset 0 0 0 ${px2rem(2)} ${brand.common.alertInner},
         0 0 0 2px ${system.color.border.inverse},
         0 0 0 4px ${brand.common.focusOutline}`,
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-preview-react",
-  "version": "14.0.0-alpha.1168-next.0",
+  "version": "14.0.0-alpha.1171-next.0",
   "description": "Canvas Kit Preview is made up of components that have the full design and a11y review, are part of the DS ecosystem and are approved for use in product. The API's could be subject to change, but not without strong communication and migration strategies.",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -46,8 +46,8 @@
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@workday/canvas-kit-react": "^14.0.0-alpha.1168-next.0",
-    "@workday/canvas-kit-styling": "^14.0.0-alpha.1168-next.0",
+    "@workday/canvas-kit-react": "^14.0.0-alpha.1171-next.0",
+    "@workday/canvas-kit-styling": "^14.0.0-alpha.1171-next.0",
     "@workday/canvas-system-icons-web": "^3.0.35",
     "@workday/canvas-tokens-web": "3.0.0-alpha.5",
     "@workday/design-assets-types": "^0.2.10"
@@ -58,5 +58,5 @@
     "react-hook-form": "7.36.1",
     "yup": "^0.32.11"
   },
-  "gitHead": "c7f43dc689c7377f48786bc8d99b0bace1431c86"
+  "gitHead": "585934cc7f7bf81c6c86c75f7c3966368a3e1ca8"
 }

package/radio/lib/RadioGroup.tsx

@@ -20,7 +20,7 @@ const radioGroupStencil = createStencil({
   base: {
     display: 'flex',
     flexDirection: 'column',
-    borderRadius: system.shape.x1,
+    borderRadius: system.shape.x1Half,
     gap: system.space.x2,
     padding: `${px2rem(10)} ${system.space.x3} ${system.space.x2}`,
     margin: `0 ${calc.negate(system.space.x3)}`,
@@ -31,10 +31,12 @@ const radioGroupStencil = createStencil({
     error: {
       error: {
         boxShadow: `inset 0 0 0 ${px2rem(2)} ${brand.error.base}`,
+        backgroundColor: brand.error.lightest,
       },
       alert: {
-        boxShadow: `inset 0 0 0 ${px2rem(1)} ${brand.alert.darkest}, inset 0 0 0 ${px2rem(3)} ${
-          brand.alert.base
+        backgroundColor: brand.alert.lightest,
+        boxShadow: `inset 0 0 0 ${px2rem(1)} ${brand.common.alertInner}, inset 0 0 0 ${px2rem(3)} ${
+          brand.common.alertOuter
         }`,
       },
     },

package/text-input/lib/TextInputField.tsx

@@ -1,11 +1,3 @@
-import {
-  borderRadius,
-  colors,
-  CSSProperties,
-  inputColors,
-  space,
-  type,
-} from '@workday/canvas-kit-react/tokens';
 import {
   createSubcomponent,
   ExtractProps,
@@ -13,32 +5,56 @@ import {
   useThemedRing,
 } from '@workday/canvas-kit-react/common';
 import {FormField} from '@workday/canvas-kit-react/form-field';
+import {brand, system} from '@workday/canvas-tokens-web';
+import {createStencil, cssVar, px2rem} from '@workday/canvas-kit-styling';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
 
 import {useTextInputField, useTextInputModel} from './hooks';
 
-const baseStyles: CSSProperties = {
-  transition: '0.2s box-shadow, 0.2s border-color',
-  '&::placeholder': {
-    color: inputColors.placeholder,
-  },
-  '&:hover': {
-    borderColor: inputColors.hoverBorder,
-  },
-  '&:focus:not([disabled])': {
-    outline: 'none',
-  },
-  '&:disabled': {
-    backgroundColor: inputColors.disabled.background,
-    borderColor: colors.licorice100,
-    color: inputColors.disabled.text,
+const textInputFieldStencil = createStencil({
+  base: {
+    ...system.type.subtext.large,
+    transition: '0.2s box-shadow, 0.2s border-color',
+    border: `${px2rem(1)} solid ${cssVar(system.color.border.input.default)}`,
+    padding: system.space.x2,
+    margin: 0,
+    display: 'block',
+    height: system.space.x10,
+    minWidth: px2rem(280),
+    borderRadius: system.shape.x1,
+    backgroundColor: system.color.bg.default,
     '&::placeholder': {
-      color: inputColors.disabled.text,
+      color: system.color.text.default,
+    },
+    '&:hover': {
+      borderColor: system.color.border.input.strong,
+    },
+    '&:focus:not([disabled])': {
+      outline: 'none',
+    },
+    '&:disabled': {
+      backgroundColor: system.color.bg.alt.softer,
+      borderColor: system.color.border.input.disabled,
+      color: system.color.fg.disabled,
+      '&::placeholder': {
+        color: system.color.fg.disabled,
+      },
+    },
+    '::-ms-clear': {
+      display: 'none',
     },
   },
-  '::-ms-clear': {
-    display: 'none',
+  modifiers: {
+    error: {
+      error: {
+        backgroundColor: brand.error.lightest,
+      },
+      alert: {
+        backgroundColor: brand.alert.lightest,
+      },
+    },
   },
-};
+});
 
 /**
  * @deprecated ⚠️ `TextInputField` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
@@ -60,21 +76,11 @@ export const TextInputField = createSubcomponent('input')({
             boxShadow: `inset 0 0 0 1px ${theme.canvas.palette.common.focusOutline}`,
           },
         };
-
+  console.log(model.state.error);
   return (
     <FormField.Input
       as="input"
-      {...type.levels.subtext.large}
-      cs={[baseStyles, focusStyles]}
-      padding={space.xxs}
-      margin={0}
-      display="block"
-      height="40px"
-      minWidth="280px"
-      border={`1px solid ${inputColors.border}`}
-      backgroundColor={inputColors.background}
-      borderRadius={borderRadius.m}
-      {...elemProps}
+      {...mergeStyles(elemProps, [textInputFieldStencil({error: model.state.error}), focusStyles])}
     />
   );
 });