@workday/canvas-kit-preview-react 14.0.0-alpha.1144-next.0 → 14.0.0-alpha.1147-next.0

package/color-picker/lib/ColorPicker.tsx

@@ -1,13 +1,13 @@
-import {colors, space} from '@workday/canvas-kit-react/tokens';
 import {checkIcon} from '@workday/canvas-system-icons-web';
 import {ColorInput} from '@workday/canvas-kit-react/color-picker';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import * as React from 'react';
 import {FormField} from '@workday/canvas-kit-react/form-field';
-import styled from '@emotion/styled';
 
 import {ResetButton} from './parts/ColorReset';
 import {SwatchBook, SwatchBookColorObject} from './parts/SwatchBook';
+import {createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 export interface ColorPickerProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
@@ -58,95 +58,99 @@ export interface ColorPickerProps extends React.HTMLAttributes<HTMLDivElement> {
   resetLabel?: string;
 }
 
-const defaultColorSet = [
-  colors.blueberry600,
-  colors.grapeSoda600,
-  colors.pomegranate600,
-  colors.cinnamon600,
-  colors.cantaloupe600,
-  colors.sourLemon600,
-  colors.greenApple600,
-  colors.jewel600,
-
-  colors.blueberry500,
-  colors.grapeSoda500,
-  colors.pomegranate500,
-  colors.cinnamon500,
-  colors.cantaloupe500,
-  colors.sourLemon500,
-  colors.greenApple500,
-  colors.jewel500,
-
-  colors.blueberry400,
-  colors.grapeSoda400,
-  colors.pomegranate400,
-  colors.cinnamon400,
-  colors.cantaloupe400,
-  colors.sourLemon400,
-  colors.greenApple400,
-  colors.jewel400,
-
-  colors.blueberry300,
-  colors.grapeSoda300,
-  colors.pomegranate300,
-  colors.cinnamon300,
-  colors.cantaloupe300,
-  colors.sourLemon300,
-  colors.greenApple300,
-  colors.jewel300,
-
-  colors.blueberry200,
-  colors.grapeSoda200,
-  colors.pomegranate200,
-  colors.cinnamon200,
-  colors.cantaloupe200,
-  colors.sourLemon200,
-  colors.greenApple200,
-  colors.jewel200,
-
-  colors.blueberry100,
-  colors.grapeSoda100,
-  colors.pomegranate100,
-  colors.cinnamon100,
-  colors.cantaloupe100,
-  colors.sourLemon100,
-  colors.greenApple100,
-  colors.jewel100,
-
-  colors.blackPepper600,
-  colors.blackPepper400,
-  colors.blackPepper300,
-  colors.blackPepper100,
-  colors.frenchVanilla500,
-  colors.frenchVanilla400,
-  colors.frenchVanilla200,
-  colors.frenchVanilla100,
-];
-
-const ColorPickerContainer = styled('div')({
-  width: 216,
-});
-
-const ColorInputWrapper = styled('form')({
-  width: '100%',
-  marginTop: space.s,
-  display: 'flex',
-  flexDirection: 'row',
-  justifyContent: 'space-between',
-});
-
-const ColorInputAndLabel = styled(FormField)({
-  display: 'flex',
-  flexDirection: 'column',
-  margin: 0,
-});
-
-const CheckButton = styled(SecondaryButton)({
-  alignSelf: 'flex-end',
-});
+const defaultColorSet = {
+  blueberry600: '#004387',
+  grapeSoda600: '#7c3882',
+  pomegranate600: '#99003a',
+  cinnamon600: '#a31b12',
+  cantaloupe600: '#c06c00',
+  sourLemon600: '#bd9100',
+  greenApple600: '#217a37',
+  jewel600: '#156973',
+
+  blueberry500: '#005cb9',
+  grapeSoda500: '#97499e',
+  pomegranate500: '#c70550',
+  cinnamon500: '#de2e21',
+  cantaloupe500: '#f38b00',
+  sourLemon500: '#ebb400',
+  greenApple500: '#319c4c',
+  jewel500: '#1a818c',
+
+  blueberry400: '#0875e1',
+  grapeSoda400: '#c860d1',
+  pomegranate400: '#f31167',
+  cinnamon400: '#ff5347',
+  cantaloupe400: '#ffa126',
+  sourLemon400: '#ffc629',
+  greenApple400: '#43c463',
+  jewel400: '#1ea4b3',
+
+  blueberry300: '#40a0ff',
+  grapeSoda300: '#de8ae6',
+  pomegranate300: '#ff5c9a',
+  cinnamon300: '#ff867d',
+  cantaloupe300: '#ffbc63',
+  sourLemon300: '#ffda61',
+  greenApple300: '#5fe380',
+  jewel300: '#44c8d7',
+
+  blueberry200: '#a6d2ff',
+  grapeSoda200: '#fac0ff',
+  pomegranate200: '#ffbdd6',
+  cinnamon200: '#fcc9c5',
+  cantaloupe200: '#fcd49f',
+  sourLemon200: '#ffecab',
+  greenApple200: '#acf5be',
+  jewel200: '#acecf3',
+
+  blueberry100: '#d7eafc',
+  grapeSoda100: '#feebff',
+  pomegranate100: '#ffebf3',
+  cinnamon100: '#ffefee',
+  cantaloupe100: '#ffeed9',
+  sourLemon100: '#fff9e6',
+  greenApple100: '#ebfff0',
+  jewel100: '#ebfdff',
+
+  blackPepper600: '#000000',
+  blackPepper400: '#333333',
+  blackPepper300: '#494949',
+  blackPepper100: '#787878',
+  frenchVanilla500: '#a6a6a6',
+  frenchVanilla400: '#bdbdbd',
+  frenchVanilla200: '#ebebeb',
+  frenchVanilla100: '#ffffff',
+};
 
-const HexColorInput = styled(ColorInput)({
-  width: '168px',
+export const colorPickerStencil = createStencil({
+  parts: {
+    button: 'color-picker-button',
+    form: 'color-picker-form',
+    hexInput: 'color-picker-hex-input',
+    inputWrapper: 'color-picker-input-wrapper',
+  },
+  base: ({buttonPart, formPart, hexInputPart, inputWrapperPart}) => ({
+    width: px2rem(216),
+    [formPart]: {
+      width: '100%',
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      marginBlockStart: system.space.x4,
+    },
+    [inputWrapperPart]: {
+      display: 'flex',
+      flexDirection: 'column',
+      margin: system.space.zero,
+    },
+    [buttonPart]: {
+      alignSelf: 'flex-end',
+    },
+    [hexInputPart]: {
+      width: px2rem(168),
+    },
+  }),
 });
 
 const isCustomColor = (colors: (string | SwatchBookColorObject)[], hexCode?: string) => {
@@ -165,7 +169,7 @@ const isCustomColor = (colors: (string | SwatchBookColorObject)[], hexCode?: str
 };
 
 export const ColorPicker = ({
-  colorSet = defaultColorSet,
+  colorSet = Object.values(defaultColorSet),
   customHexInputLabel = 'Custom Hex Color',
   submitLabel = 'Submit',
   onColorChange,
@@ -203,32 +207,34 @@ export const ColorPicker = ({
   };
 
   return (
-    <ColorPickerContainer {...elemProps}>
+    <div {...handleCsProp(elemProps, colorPickerStencil())}>
       {onColorReset && resetColor && (
         <ResetButton onClick={onColorReset} resetColor={resetColor} label={resetLabel} />
       )}
       <SwatchBook colors={colorSet} onSelect={onColorChange} value={value} />
       {showCustomHexInput && (
-        <ColorInputWrapper onSubmit={onSubmit}>
-          <ColorInputAndLabel>
+        <form onSubmit={onSubmit} {...colorPickerStencil.parts.form}>
+          <FormField {...colorPickerStencil.parts.inputWrapper}>
             <FormField.Label>{customHexInputLabel}</FormField.Label>
             <FormField.Input
-              as={HexColorInput}
+              as={ColorInput}
               onChange={onCustomHexChange}
               onValidColorChange={onValidCustomHexChange}
               value={customHexValue}
               showCheck={value === validHexValue || value === customHexValue}
+              {...colorPickerStencil.parts.hexInput}
             />
-          </ColorInputAndLabel>
-          <CheckButton
+          </FormField>
+          <SecondaryButton
             aria-label={submitLabel}
             icon={checkIcon}
             type="submit"
             disabled={disabled}
+            {...colorPickerStencil.parts.button}
           />
-        </ColorInputWrapper>
+        </form>
       )}
-    </ColorPickerContainer>
+    </div>
   );
 };
 

package/color-picker/lib/parts/ColorReset.tsx

@@ -1,9 +1,8 @@
-import styled from '@emotion/styled';
-
-import {colors, space, type} from '@workday/canvas-kit-react/tokens';
-import {focusRing, hideMouseFocus} from '@workday/canvas-kit-react/common';
-
+import {calc, createStencil, handleCsProp} from '@workday/canvas-kit-styling';
 import {ColorSwatch} from '@workday/canvas-kit-react/color-picker';
+import {focusRing} from '@workday/canvas-kit-react/common';
+import {system} from '@workday/canvas-tokens-web';
+import {Subtext} from '@workday/canvas-kit-react/text';
 
 export interface ResetButtonProps {
   label: string;
@@ -11,47 +10,51 @@ export interface ResetButtonProps {
   onClick: (color: string) => void;
 }
 
-const Label = styled('div')({
-  marginLeft: space.xxs,
-});
-
-const Container = styled('button')({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'flex-start',
-  width: `calc(100% + ${space.l})`,
-  height: space.l,
-  margin: `-${space.xxs} -${space.s} ${space.xxs}`,
-  padding: `0px ${space.s}`,
-  ...type.levels.subtext.medium,
-  whiteSpace: 'nowrap',
-  border: 'none',
-  outline: 'none',
-  background: 'none',
-  cursor: 'pointer',
-  transition: 'color 120ms ease, background-color 120ms ease',
-
-  '&:hover': {
-    backgroundColor: colors.soap300,
-  },
-
-  '&:active': {
-    backgroundColor: colors.soap400,
-  },
-
-  '&:focus': {
-    ...focusRing(),
+export const resetButtonStencil = createStencil({
+  parts: {
+    label: 'reset-button-label',
   },
-  ...hideMouseFocus,
+  base: ({labelPart}) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    width: calc.add('100%', system.space.x8),
+    height: system.space.x8,
+    margin: `${calc.negate(system.space.x2)} ${calc.negate(system.space.x4)} ${system.space.x2}`,
+    padding: `0 ${system.space.x4}`,
+    whiteSpace: 'nowrap',
+    border: 'none',
+    outline: 'none',
+    background: 'none',
+    cursor: 'pointer',
+    transition: 'color 120ms ease, background-color 120ms ease',
+
+    '&:hover, &.hover': {
+      backgroundColor: system.color.bg.alt.default,
+    },
+
+    '&:active, &.active': {
+      backgroundColor: system.color.bg.alt.strong,
+    },
+
+    '&:focus-visible, &.focus': {
+      ...focusRing(),
+    },
+    [labelPart]: {
+      marginLeft: system.space.x2,
+    },
+  }),
 });
 
 export const ResetButton = ({onClick, resetColor, label}: ResetButtonProps) => {
   const handleResetColor = () => onClick(resetColor);
 
   return (
-    <Container onClick={handleResetColor}>
-      <ColorSwatch color={resetColor} />
-      <Label>{label}</Label>
-    </Container>
+    <button onClick={handleResetColor} {...handleCsProp({}, resetButtonStencil())}>
+      <ColorSwatch color={resetColor} data-color="" />
+      <Subtext size="medium" as="div" {...resetButtonStencil.parts.label}>
+        {label}
+      </Subtext>
+    </button>
   );
 };

package/color-picker/lib/parts/SwatchBook.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import styled from '@emotion/styled';
-import {borderRadius, colors, space} from '@workday/canvas-kit-react/tokens';
-import {focusRing, mouseFocusBehavior} from '@workday/canvas-kit-react/common';
+import {focusRing} from '@workday/canvas-kit-react/common';
 import {ColorSwatch} from '@workday/canvas-kit-react/color-picker';
+import {calc, createStencil, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 export interface SwatchBookColorObject {
   value: string;
@@ -15,60 +15,59 @@ export interface SwatchBookProps {
   onSelect: (color: string) => void;
 }
 
-interface SwatchContainerProps {
-  isSelected: boolean;
-}
-
-const accessibilityBorder = `${colors.frenchVanilla100} 0px 0px 0px 2px, ${colors.licorice200} 0px 0px 0px 3px`;
-
-const SwatchContainer = styled('div')<SwatchContainerProps>(
-  {
+const colorPickerSwatchBookStencil = createStencil({
+  vars: {
+    shadow: `${system.color.border.inverse} 0 0 0 ${px2rem(2)}, ${
+      system.color.border.input.default
+    } 0 0 0 ${px2rem(3)}`,
+  },
+  parts: {
+    tile: 'color-picker-swatch-book-tile',
+  },
+  base: ({tilePart, shadow}) => ({
     display: 'flex',
-    width: 20,
-    height: 20,
-    cursor: 'pointer',
-    borderRadius: borderRadius.s,
-    transition: 'box-shadow 120ms ease',
-    margin: `0px ${space.xxs} ${space.xxs} 0px`,
-
-    '&:hover': {
-      boxShadow: accessibilityBorder,
-    },
+    flexWrap: 'wrap',
+    margin: `0 ${calc.negate(system.space.x2)} ${calc.negate(system.space.x2)} 0`,
+    [tilePart]: {
+      display: 'flex',
+      width: px2rem(20),
+      height: px2rem(20),
+      cursor: 'pointer',
+      borderRadius: system.shape.half,
+      transition: 'box-shadow 120ms ease',
+      margin: `0px ${system.space.x2} ${system.space.x2} 0px`,
 
-    '&:focus': {
-      outline: 'none',
-      ...focusRing({separation: 2}),
-    },
-  },
-  ({isSelected}) => ({
-    boxShadow: isSelected ? accessibilityBorder : undefined,
-    ...mouseFocusBehavior({
-      '&:focus': {
-        animation: 'none',
-        boxShadow: 'none',
-      },
       '&:hover': {
-        boxShadow: accessibilityBorder,
+        boxShadow: shadow,
       },
-      '&': {
-        boxShadow: isSelected ? accessibilityBorder : undefined,
+
+      '&:focus-visible': {
+        outline: 'none',
+        ...focusRing({separation: 2}),
       },
-    }),
-  })
-);
 
-const Container = styled('div')({
-  display: 'flex',
-  flexWrap: 'wrap',
-  margin: `0px -${space.xxs} -${space.xxs} 0px`,
+      '&[aria-selected="true"]': {
+        boxShadow: shadow,
+
+        '&:focus-visible': {
+          animation: 'none',
+          boxShadow: 'none',
+        },
+
+        '&:hover': {
+          boxShadow: shadow,
+        },
+      },
+    },
+  }),
 });
 
 export const SwatchBook = ({colors, value, onSelect}: SwatchBookProps) => {
   return (
-    <Container>
+    <div {...colorPickerSwatchBookStencil()}>
       {colors.map((color: string | SwatchBookColorObject, index: number) => {
-        const hexCode = typeof color === 'object' ? color.value : color;
-        const label = typeof color === 'object' ? color.label : color;
+        const hexCode = typeof color === 'object' ? color.value : color.toLowerCase();
+        const label = typeof color === 'object' ? color.label : color.toLowerCase();
         const isSelected = value ? hexCode.toLowerCase() === value.toLowerCase() : false;
 
         const handleClick = () => onSelect(hexCode);
@@ -76,20 +75,20 @@ export const SwatchBook = ({colors, value, onSelect}: SwatchBookProps) => {
           (event.key === 'Enter' || event.key === ' ') && onSelect(hexCode);
 
         return (
-          <SwatchContainer
+          <div
             key={index + '-' + color}
             onClick={handleClick}
             onKeyDown={handleKeyDown}
             tabIndex={0}
-            isSelected={isSelected}
             role="button"
             aria-label={label}
             aria-selected={isSelected}
+            {...colorPickerSwatchBookStencil.parts.tile}
           >
             <ColorSwatch color={hexCode} showCheck={isSelected} />
-          </SwatchContainer>
+          </div>
         );
       })}
-    </Container>
+    </div>
   );
 };

package/dist/commonjs/color-picker/lib/ColorPicker.d.ts

@@ -48,8 +48,76 @@ export interface ColorPickerProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     resetLabel?: string;
 }
+export declare const colorPickerStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{
+    readonly button: "color-picker-button";
+    readonly form: "color-picker-form";
+    readonly hexInput: "color-picker-hex-input";
+    readonly inputWrapper: "color-picker-input-wrapper";
+}, {}, never>, {
+    readonly button: "color-picker-button";
+    readonly form: "color-picker-form";
+    readonly hexInput: "color-picker-hex-input";
+    readonly inputWrapper: "color-picker-input-wrapper";
+}, {}, never, never>;
 export declare const ColorPicker: {
     ({ colorSet, customHexInputLabel, submitLabel, onColorChange, onColorReset, onSubmitClick, resetLabel, resetColor, value, showCustomHexInput, ...elemProps }: ColorPickerProps): import("react/jsx-runtime").JSX.Element;
-    defaultColorSet: string[];
+    defaultColorSet: {
+        blueberry600: string;
+        grapeSoda600: string;
+        pomegranate600: string;
+        cinnamon600: string;
+        cantaloupe600: string;
+        sourLemon600: string;
+        greenApple600: string;
+        jewel600: string;
+        blueberry500: string;
+        grapeSoda500: string;
+        pomegranate500: string;
+        cinnamon500: string;
+        cantaloupe500: string;
+        sourLemon500: string;
+        greenApple500: string;
+        jewel500: string;
+        blueberry400: string;
+        grapeSoda400: string;
+        pomegranate400: string;
+        cinnamon400: string;
+        cantaloupe400: string;
+        sourLemon400: string;
+        greenApple400: string;
+        jewel400: string;
+        blueberry300: string;
+        grapeSoda300: string;
+        pomegranate300: string;
+        cinnamon300: string;
+        cantaloupe300: string;
+        sourLemon300: string;
+        greenApple300: string;
+        jewel300: string;
+        blueberry200: string;
+        grapeSoda200: string;
+        pomegranate200: string;
+        cinnamon200: string;
+        cantaloupe200: string;
+        sourLemon200: string;
+        greenApple200: string;
+        jewel200: string;
+        blueberry100: string;
+        grapeSoda100: string;
+        pomegranate100: string;
+        cinnamon100: string;
+        cantaloupe100: string;
+        sourLemon100: string;
+        greenApple100: string;
+        jewel100: string;
+        blackPepper600: string;
+        blackPepper400: string;
+        blackPepper300: string;
+        blackPepper100: string;
+        frenchVanilla500: string;
+        frenchVanilla400: string;
+        frenchVanilla200: string;
+        frenchVanilla100: string;
+    };
 };
 //# sourceMappingURL=ColorPicker.d.ts.map

package/dist/commonjs/color-picker/lib/ColorPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../../color-picker/lib/ColorPicker.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAa,qBAAqB,EAAC,MAAM,oBAAoB,CAAC;AAErE,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E;;OAEG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,EAAE,GAAG,qBAAqB,EAAE,CAAC;IAC9C;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IACjD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AA4GD,eAAO,MAAM,WAAW;kKAYrB,gBAAgB;;CAsDlB,CAAC"}
+{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../../color-picker/lib/ColorPicker.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAa,qBAAqB,EAAC,MAAM,oBAAoB,CAAC;AAIrE,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E;;OAEG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,EAAE,GAAG,qBAAqB,EAAE,CAAC;IAC9C;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IACjD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAmED,eAAO,MAAM,kBAAkB;;;;;;;;;;oBA4B7B,CAAC;AAiBH,eAAO,MAAM,WAAW;kKAYrB,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwDlB,CAAC"}