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

package/color-picker/index.ts

@@ -1 +1 @@
-export {ColorPicker, ColorPickerProps} from './lib/ColorPicker';
+export {ColorPicker, type ColorPickerProps} from './lib/ColorPicker';

package/color-picker/lib/ColorPicker.tsx

@@ -1,13 +1,15 @@
-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 {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {ColorInput} from '@workday/canvas-kit-react/color-picker';
 import {FormField} from '@workday/canvas-kit-react/form-field';
+import {createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {checkIcon} from '@workday/canvas-system-icons-web';
+import {system} from '@workday/canvas-tokens-web';
 
+import {defaultColorSet} from './defaultColorSet';
 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,71 +60,6 @@ export interface ColorPickerProps extends React.HTMLAttributes<HTMLDivElement> {
   resetLabel?: string;
 }
 
-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',
-};
-
 export const colorPickerStencil = createStencil({
   parts: {
     button: 'color-picker-button',
@@ -137,12 +74,12 @@ export const colorPickerStencil = createStencil({
       display: 'flex',
       flexDirection: 'row',
       justifyContent: 'space-between',
-      marginBlockStart: system.space.x4,
+      marginBlockStart: system.legacy.gap.md,
     },
     [inputWrapperPart]: {
       display: 'flex',
       flexDirection: 'column',
-      margin: system.space.zero,
+      margin: 0,
     },
     [buttonPart]: {
       alignSelf: 'flex-end',

package/color-picker/lib/defaultColorSet.ts

@@ -0,0 +1,64 @@
+export 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',
+};

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

@@ -1,8 +1,8 @@
-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';
+import {calc, createStencil, handleCsProp} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
 
 export interface ResetButtonProps {
   label: string;
@@ -18,10 +18,10 @@ export const resetButtonStencil = createStencil({
     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}`,
+    width: calc.add('100%', system.legacy.size.sm),
+    height: system.legacy.size.sm,
+    margin: `${calc.negate(base.legacy.size100)} ${calc.negate(system.legacy.size.xxxs)} ${base.legacy.size100}`,
+    padding: `0 ${system.legacy.padding.md}`,
     whiteSpace: 'nowrap',
     border: 'none',
     outline: 'none',
@@ -34,13 +34,13 @@ export const resetButtonStencil = createStencil({
     },
 
     '&:active, &.active': {
-      backgroundColor: system.color.bg.alt.strong,
+      backgroundColor: system.legacy.color.surface.default,
     },
     '&:focus-visible, &.focus': {
       ...focusRing(),
     },
     [labelPart]: {
-      marginLeft: system.space.x2,
+      marginLeft: system.legacy.gap.sm,
     },
   }),
 });

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import {focusRing} from '@workday/canvas-kit-react/common';
+
 import {ColorSwatch} from '@workday/canvas-kit-react/color-picker';
+import {focusRing} from '@workday/canvas-kit-react/common';
 import {calc, createStencil, px2rem} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
@@ -17,7 +18,7 @@ export interface SwatchBookProps {
 
 const colorPickerSwatchBookStencil = createStencil({
   vars: {
-    shadow: `${system.color.border.inverse} 0 0 0 ${px2rem(2)}, ${
+    shadow: `${system.legacy.color.border.inverse.default} 0 0 0 ${px2rem(2)}, ${
       system.color.border.input.default
     } 0 0 0 ${px2rem(3)}`,
   },
@@ -27,15 +28,15 @@ const colorPickerSwatchBookStencil = createStencil({
   base: ({tilePart, shadow}) => ({
     display: 'flex',
     flexWrap: 'wrap',
-    margin: `0 ${calc.negate(system.space.x2)} ${calc.negate(system.space.x2)} 0`,
+    margin: `0 ${calc.negate(system.legacy.gap.sm)} ${calc.negate(system.legacy.gap.sm)} 0`,
     [tilePart]: {
       display: 'flex',
-      width: px2rem(20),
-      height: px2rem(20),
+      width: system.legacy.size.xxs,
+      height: system.legacy.size.xxs,
       cursor: 'pointer',
-      borderRadius: system.shape.half,
+      borderRadius: system.legacy.shape.sm,
       transition: 'box-shadow 120ms ease',
-      margin: `0px ${system.space.x2} ${system.space.x2} 0px`,
+      margin: `0px ${system.legacy.gap.sm} ${system.legacy.gap.sm} 0px`,
 
       '&:hover': {
         boxShadow: shadow,

package/dist/commonjs/color-picker/index.d.ts

@@ -1,2 +1,2 @@
-export { ColorPicker, ColorPickerProps } from './lib/ColorPicker';
+export { ColorPicker, type ColorPickerProps } from './lib/ColorPicker';
 //# sourceMappingURL=index.d.ts.map

package/dist/commonjs/color-picker/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../color-picker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAE,gBAAgB,EAAC,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../color-picker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAE,KAAK,gBAAgB,EAAC,MAAM,mBAAmB,CAAC"}

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":"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"}
+{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../../color-picker/lib/ColorPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/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;AAED,eAAO,MAAM,kBAAkB;;;;;;;;;;oBA4B7B,CAAC;AAiBH,eAAO,MAAM,WAAW;kKAYrB,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwDlB,CAAC"}

package/dist/commonjs/color-picker/lib/ColorPicker.js

@@ -25,73 +25,16 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColorPicker = exports.colorPickerStencil = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
-const color_picker_1 = require("@workday/canvas-kit-react/color-picker");
-const button_1 = require("@workday/canvas-kit-react/button");
 const React = __importStar(require("react"));
+const button_1 = require("@workday/canvas-kit-react/button");
+const color_picker_1 = require("@workday/canvas-kit-react/color-picker");
 const form_field_1 = require("@workday/canvas-kit-react/form-field");
-const ColorReset_1 = require("./parts/ColorReset");
-const SwatchBook_1 = require("./parts/SwatchBook");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
-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 defaultColorSet_1 = require("./defaultColorSet");
+const ColorReset_1 = require("./parts/ColorReset");
+const SwatchBook_1 = require("./parts/SwatchBook");
 exports.colorPickerStencil = (0, canvas_kit_styling_1.createStencil)({
     parts: {
         button: 'color-picker-button',
@@ -99,8 +42,8 @@ exports.colorPickerStencil = (0, canvas_kit_styling_1.createStencil)({
         hexInput: 'color-picker-hex-input',
         inputWrapper: 'color-picker-input-wrapper',
     },
-    base: { name: "3fumvk", styles: "box-sizing:border-box;width:13.5rem;[data-part=\"color-picker-form\"]{width:100%;display:flex;flex-direction:row;justify-content:space-between;margin-block-start:var(--cnvs-sys-space-x4);}[data-part=\"color-picker-input-wrapper\"]{display:flex;flex-direction:column;margin:var(--cnvs-sys-space-zero);}[data-part=\"color-picker-button\"]{align-self:flex-end;}[data-part=\"color-picker-hex-input\"]{width:10.5rem;}" }
-}, "color-picker-c9dd1d");
+    base: { name: "16zeg5", styles: "box-sizing:border-box;width:13.5rem;[data-part=\"color-picker-form\"]{width:100%;display:flex;flex-direction:row;justify-content:space-between;margin-block-start:var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem));}[data-part=\"color-picker-input-wrapper\"]{display:flex;flex-direction:column;margin:0;}[data-part=\"color-picker-button\"]{align-self:flex-end;}[data-part=\"color-picker-hex-input\"]{width:10.5rem;}" }
+}, "color-picker-a530b2");
 const isCustomColor = (colors, hexCode) => {
     if (!hexCode) {
         return false;
@@ -115,7 +58,7 @@ const isCustomColor = (colors, hexCode) => {
         }
     });
 };
-const ColorPicker = ({ colorSet = Object.values(defaultColorSet), customHexInputLabel = 'Custom Hex Color', submitLabel = 'Submit', onColorChange, onColorReset, onSubmitClick, resetLabel = 'Reset', resetColor, value = '', showCustomHexInput = false, ...elemProps }) => {
+const ColorPicker = ({ colorSet = Object.values(defaultColorSet_1.defaultColorSet), customHexInputLabel = 'Custom Hex Color', submitLabel = 'Submit', onColorChange, onColorReset, onSubmitClick, resetLabel = 'Reset', resetColor, value = '', showCustomHexInput = false, ...elemProps }) => {
     const [validHexValue, setValidHexValue] = React.useState('');
     const [disabled, setDisabled] = React.useState(true);
     const [customHexValue, setCustomHexValue] = React.useState(isCustomColor(colorSet, value) ? value : '');
@@ -138,4 +81,4 @@ const ColorPicker = ({ colorSet = Object.values(defaultColorSet), customHexInput
     return ((0, jsx_runtime_1.jsxs)("div", { ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.colorPickerStencil)()), children: [onColorReset && resetColor && ((0, jsx_runtime_1.jsx)(ColorReset_1.ResetButton, { onClick: onColorReset, resetColor: resetColor, label: resetLabel })), (0, jsx_runtime_1.jsx)(SwatchBook_1.SwatchBook, { colors: colorSet, onSelect: onColorChange, value: value }), showCustomHexInput && ((0, jsx_runtime_1.jsxs)("form", { onSubmit: onSubmit, ...exports.colorPickerStencil.parts.form, children: [(0, jsx_runtime_1.jsxs)(form_field_1.FormField, { ...exports.colorPickerStencil.parts.inputWrapper, children: [(0, jsx_runtime_1.jsx)(form_field_1.FormField.Label, { children: customHexInputLabel }), (0, jsx_runtime_1.jsx)(form_field_1.FormField.Input, { as: color_picker_1.ColorInput, onChange: onCustomHexChange, onValidColorChange: onValidCustomHexChange, value: customHexValue, showCheck: value === validHexValue || value === customHexValue, ...exports.colorPickerStencil.parts.hexInput })] }), (0, jsx_runtime_1.jsx)(button_1.SecondaryButton, { "aria-label": submitLabel, icon: canvas_system_icons_web_1.checkIcon, type: "submit", disabled: disabled, ...exports.colorPickerStencil.parts.button })] }))] }));
 };
 exports.ColorPicker = ColorPicker;
-exports.ColorPicker.defaultColorSet = defaultColorSet;
+exports.ColorPicker.defaultColorSet = defaultColorSet_1.defaultColorSet;

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

@@ -0,0 +1,59 @@
+export declare const 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=defaultColorSet.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"defaultColorSet.d.ts","sourceRoot":"","sources":["../../../../color-picker/lib/defaultColorSet.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+D3B,CAAC"}

package/dist/commonjs/color-picker/lib/defaultColorSet.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultColorSet = void 0;
+exports.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',
+};

package/dist/commonjs/color-picker/lib/parts/ColorReset.js

@@ -2,17 +2,17 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ResetButton = exports.resetButtonStencil = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const color_picker_1 = require("@workday/canvas-kit-react/color-picker");
 const common_1 = require("@workday/canvas-kit-react/common");
-const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const text_1 = require("@workday/canvas-kit-react/text");
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 exports.resetButtonStencil = (0, canvas_kit_styling_1.createStencil)({
     parts: {
         label: 'reset-button-label',
     },
-    base: { name: "3e4w86", styles: "box-sizing:border-box;display:flex;align-items:center;justify-content:flex-start;width:calc(100% + var(--cnvs-sys-space-x8));height:var(--cnvs-sys-space-x8);margin:calc(var(--cnvs-sys-space-x2) * -1) calc(var(--cnvs-sys-space-x4) * -1) var(--cnvs-sys-space-x2);padding:0 var(--cnvs-sys-space-x4);white-space:nowrap;border:none;outline:none;background:none;cursor:pointer;transition:color 120ms ease, background-color 120ms ease;&:hover, &.hover{background-color:var(--cnvs-sys-color-bg-alt-default);}&:active, &.active{background-color:var(--cnvs-sys-color-bg-alt-strong);}&:focus-visible, &.focus{box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}[data-part=\"reset-button-label\"]{margin-left:var(--cnvs-sys-space-x2);}" }
-}, "reset-button-af92a8");
+    base: { name: "1lxd3u", styles: "box-sizing:border-box;display:flex;align-items:center;justify-content:flex-start;width:calc(100% + var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem)));height:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));margin:calc(var(--cnvs-base-size-100, 0.5rem) * -1) calc(var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem)) * -1) var(--cnvs-base-size-100, 0.5rem);padding:0 var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));white-space:nowrap;border:none;outline:none;background:none;cursor:pointer;transition:color 120ms ease, background-color 120ms ease;&:hover, &.hover{background-color:var(--cnvs-sys-color-bg-alt-default);}&:active, &.active{background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));}&:focus-visible, &.focus{box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}[data-part=\"reset-button-label\"]{margin-left:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));}" }
+}, "reset-button-531e85");
 const ResetButton = ({ onClick, resetColor, label }) => {
     const handleResetColor = () => onClick(resetColor);
     return ((0, jsx_runtime_1.jsxs)("button", { onClick: handleResetColor, ...(0, canvas_kit_styling_1.handleCsProp)({}, (0, exports.resetButtonStencil)()), children: [(0, jsx_runtime_1.jsx)(color_picker_1.ColorSwatch, { color: resetColor, "data-color": "" }), (0, jsx_runtime_1.jsx)(text_1.Subtext, { size: "medium", as: "div", ...exports.resetButtonStencil.parts.label, children: label })] }));

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

@@ -1 +1 @@
-{"version":3,"file":"SwatchBook.d.ts","sourceRoot":"","sources":["../../../../../color-picker/lib/parts/SwatchBook.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,CAAC,MAAM,GAAG,qBAAqB,CAAC,EAAE,CAAC;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAiDD,eAAO,MAAM,UAAU,gCAA+B,eAAe,4CA6BpE,CAAC"}
+{"version":3,"file":"SwatchBook.d.ts","sourceRoot":"","sources":["../../../../../color-picker/lib/parts/SwatchBook.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,CAAC,MAAM,GAAG,qBAAqB,CAAC,EAAE,CAAC;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAiDD,eAAO,MAAM,UAAU,gCAA+B,eAAe,4CA6BpE,CAAC"}

package/dist/commonjs/color-picker/lib/parts/SwatchBook.js

@@ -2,19 +2,19 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SwatchBook = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const common_1 = require("@workday/canvas-kit-react/common");
 const color_picker_1 = require("@workday/canvas-kit-react/color-picker");
+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 colorPickerSwatchBookStencil = (0, canvas_kit_styling_1.createStencil)({
     vars: {
-        shadow: `${canvas_tokens_web_1.system.color.border.inverse} 0 0 0 ${(0, canvas_kit_styling_1.px2rem)(2)}, ${canvas_tokens_web_1.system.color.border.input.default} 0 0 0 ${(0, canvas_kit_styling_1.px2rem)(3)}`,
+        shadow: `${canvas_tokens_web_1.system.legacy.color.border.inverse.default} 0 0 0 ${(0, canvas_kit_styling_1.px2rem)(2)}, ${canvas_tokens_web_1.system.color.border.input.default} 0 0 0 ${(0, canvas_kit_styling_1.px2rem)(3)}`,
     },
     parts: {
         tile: 'color-picker-swatch-book-tile',
     },
-    base: { name: "12094g", styles: "--shadow-color-picker-swatch-book-a4010d:var(--cnvs-sys-color-border-inverse) 0 0 0 0.125rem, var(--cnvs-sys-color-border-input-default) 0 0 0 0.1875rem;box-sizing:border-box;display:flex;flex-wrap:wrap;margin:0 calc(var(--cnvs-sys-space-x2) * -1) calc(var(--cnvs-sys-space-x2) * -1) 0;[data-part=\"color-picker-swatch-book-tile\"]{display:flex;width:1.25rem;height:1.25rem;cursor:pointer;border-radius:var(--cnvs-sys-shape-half);transition:box-shadow 120ms ease;margin:0px var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x2) 0px;&:hover{box-shadow:var(--shadow-color-picker-swatch-book-a4010d);}&:focus-visible{outline:none;box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}&[aria-selected=\"true\"]{box-shadow:var(--shadow-color-picker-swatch-book-a4010d);&:focus-visible{animation:none;box-shadow:none;}&:hover{box-shadow:var(--shadow-color-picker-swatch-book-a4010d);}}}" }
-}, "color-picker-swatch-book-a4010d");
+    base: { name: "yoghw", styles: "--shadow-color-picker-swatch-book-915ea6:var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1))) 0 0 0 0.125rem, var(--cnvs-sys-color-border-input-default) 0 0 0 0.1875rem;box-sizing:border-box;display:flex;flex-wrap:wrap;margin:0 calc(var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem)) * -1) calc(var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem)) * -1) 0;[data-part=\"color-picker-swatch-book-tile\"]{display:flex;width:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));height:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));cursor:pointer;border-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));transition:box-shadow 120ms ease;margin:0px var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem)) 0px;&:hover{box-shadow:var(--shadow-color-picker-swatch-book-915ea6);}&:focus-visible{outline:none;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-brand-common-focus-outline, rgba(8,117,225,1));}&[aria-selected=\"true\"]{box-shadow:var(--shadow-color-picker-swatch-book-915ea6);&:focus-visible{animation:none;box-shadow:none;}&:hover{box-shadow:var(--shadow-color-picker-swatch-book-915ea6);}}}" }
+}, "color-picker-swatch-book-915ea6");
 const SwatchBook = ({ colors, value, onSelect }) => {
     return ((0, jsx_runtime_1.jsx)("div", { ...colorPickerSwatchBookStencil(), children: colors.map((color, index) => {
             const hexCode = typeof color === 'object' ? color.value : color.toLowerCase();

package/dist/commonjs/divider/lib/Divider.d.ts

@@ -1,14 +1,14 @@
 import { CSProps } from '@workday/canvas-kit-styling';
 export declare const dividerStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {
-    space: "var(--cnvs-sys-space-x4)";
+    space: string;
 }, never>, {}, {
-    space: "var(--cnvs-sys-space-x4)";
+    space: string;
 }, never, never>;
 export interface DividerProps extends CSProps {
     /**
      * Applies top and bottom margin evenly. It divides the provided value by two and applies half to each end.
      * E.g. `space="2rem"` would apply `1rem` margin to the top, and `1rem` margin to the bottom.
-     * @default `system.space.x4` (1rem)
+     * @default `system.gap.md` (1rem)
      */
     space?: string;
 }
@@ -19,14 +19,14 @@ export interface DividerProps extends CSProps {
  * [View Docs](https://workday.github.io/canvas-kit/?path=/docs/preview-divider--docs)
  *
  * The `space` prop will equally apply top and bottom margin styles.
- * In the example below, `x2` (0.5rem), adds `0.25rem` margin to the top and `0.25rem` to the bottom
+ * In the example below, `system.gap.xs` (0.5rem), adds `0.25rem` margin to the top and `0.25rem` to the bottom
  *
  * @example
  * ```tsx
  * import { Divider } from '@workday/canvas-kit-preview-react/divider';
- * import {system} from '@workday/canvas-tokens-web';
  *
- * <Divider space={system.space.x2} />
+ *
+ * <Divider space={system.gap.xs} />
  *
  * ```
  */

package/dist/commonjs/divider/lib/Divider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../../divider/lib/Divider.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,OAAO,EAIR,MAAM,6BAA6B,CAAC;AAGrC,eAAO,MAAM,cAAc;;;;gBAazB,CAAC;AAEH,MAAM,WAAW,YAAa,SAAQ,OAAO;IAC3C;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,OAAO,iFAKlB,CAAC"}
+{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../../divider/lib/Divider.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,OAAO,EAMR,MAAM,6BAA6B,CAAC;AAGrC,eAAO,MAAM,cAAc;;;;gBAazB,CAAC;AAEH,MAAM,WAAW,YAAa,SAAQ,OAAO;IAC3C;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,OAAO,iFAKlB,CAAC"}

package/dist/commonjs/divider/lib/Divider.js

@@ -7,9 +7,9 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 exports.dividerStencil = (0, canvas_kit_styling_1.createStencil)({
     vars: {
-        space: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.system.space.x4),
+        space: '',
     },
-    base: { name: "2ifa1q", styles: "--space-divider-a2c50d:var(--cnvs-sys-space-x4);box-sizing:border-box;display:block;height:0.0625rem;border:none;border-top:1px solid var(--cnvs-sys-color-border-divider);margin:calc(var(--space-divider-a2c50d) / 2) 0;" }
+    base: { name: "586m3", styles: "box-sizing:border-box;display:block;height:0.0625rem;border:none;border-top:1px solid var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));margin:calc(var(--space-divider-a2c50d, var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem))) / 2) 0;" }
 }, "divider-a2c50d");
 /**
  * # Divider
@@ -18,14 +18,14 @@ exports.dividerStencil = (0, canvas_kit_styling_1.createStencil)({
  * [View Docs](https://workday.github.io/canvas-kit/?path=/docs/preview-divider--docs)
  *
  * The `space` prop will equally apply top and bottom margin styles.
- * In the example below, `x2` (0.5rem), adds `0.25rem` margin to the top and `0.25rem` to the bottom
+ * In the example below, `system.gap.xs` (0.5rem), adds `0.25rem` margin to the top and `0.25rem` to the bottom
  *
  * @example
  * ```tsx
  * import { Divider } from '@workday/canvas-kit-preview-react/divider';
- * import {system} from '@workday/canvas-tokens-web';
  *
- * <Divider space={system.space.x2} />
+ *
+ * <Divider space={system.gap.xs} />
  *
  * ```
  */