@workday/canvas-kit-react 11.0.0-alpha.767-next.0 → 11.0.0-alpha.770-next.0

package/dist/es6/button/lib/TertiaryButton.js

@@ -1,38 +1,85 @@
 import * as React from 'react';
-import { buttonVars, getIconPosition } from './BaseButton';
+import { buttonStencil } from './BaseButton';
 import { createComponent, focusRing } from '@workday/canvas-kit-react/common';
-import { createStyles, createModifiers } from '@workday/canvas-kit-styling';
-import { mergeStyles } from '@workday/canvas-kit-react/layout';
-import { system, brand, base } from '@workday/canvas-tokens-web';
-import { borderRadius, space } from '@workday/canvas-kit-react/tokens';
+import { calc, createStencil } from '@workday/canvas-kit-styling';
+import { system, brand } from '@workday/canvas-tokens-web';
 import { Button } from './Button';
-import { systemIconStencil } from '../../icon';
-const tertiaryStyles = createStyles({ name: "4e035a", styles: "padding-inline:var(--cnvs-sys-space-x2);min-width:auto;text-decoration:underline;border:0;--cnvs-button-default-background:transparent;--cnvs-button-default-border:transparent;--cnvs-button-default-borderRadius:var(--cnvs-sys-shape-x1);--cnvs-button-default-label-emotion-safe:var(--cnvs-brand-primary-base);--cnvs-system-icon-color:var(--cnvs-base-palette-black-pepper-400);&:focus-visible, &.focus{--cnvs-button-focus-background:transparent;--cnvs-button-focus-border:transparent;--cnvs-button-focus-label-emotion-safe:var(--cnvs-brand-primary-base);--cnvs-button-focus-boxShadowInner:var(--cnvs-brand-common-focus-outline);--cnvs-button-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline);--cnvs-system-icon-color:var(--cnvs-base-palette-black-pepper-400);box-shadow:0 0 0 0px var(--cnvs-base-palette-french-vanilla-100), 0 0 0 2px var(--cnvs-brand-common-focus-outline);}&:hover, &.hover{--cnvs-button-hover-background:var(--cnvs-base-palette-soap-300);--cnvs-button-hover-border:transparent;--cnvs-button-hover-label-emotion-safe:var(--cnvs-brand-primary-dark);--cnvs-system-icon-color:var(--cnvs-base-palette-black-pepper-400);}&:active, &.active{--cnvs-button-active-background:var(--cnvs-base-palette-soap-400);--cnvs-button-active-border:transparent;--cnvs-button-active-label-emotion-safe:var(--cnvs-brand-primary-darkest);--cnvs-system-icon-color:var(--cnvs-base-palette-black-pepper-500);}&:disabled, &.disabled{--cnvs-button-disabled-background:transparent;--cnvs-button-disabled-border:transparent;--cnvs-button-disabled-label-emotion-safe:var(--cnvs-brand-primary-base);--cnvs-button-disabled-opacity:0.4;}" });
-export const tertiaryButtonModifiers = createModifiers({
-    isThemeable: {
-        true: createStyles({ name: "4874c5", styles: "--cnvs-system-icon-color:var(--cnvs-brand-primary-base);&:focus-visible, &.focus{--cnvs-system-icon-color:var(--cnvs-brand-primary-base);}&:hover, &.hover{--cnvs-system-icon-color:var(--cnvs-brand-primary-dark);}&:active, &.active{--cnvs-system-icon-color:var(--cnvs-brand-primary-darkest);}&:disabled, &.disabled{--cnvs-system-icon-color:var(--cnvs-brand-primary-base);}" }),
-    },
-    variant: {
-        inverse: createStyles({ name: "375434", styles: "--cnvs-button-default-background:transparent;--cnvs-button-default-border:transparent;--cnvs-button-default-label-emotion-safe:var(--cnvs-base-palette-french-vanilla-100);--cnvs-system-icon-color:var(--cnvs-base-palette-french-vanilla-100);&:focus-visible, &.focus{--cnvs-button-focus-background:var(--cnvs-base-palette-french-vanilla-100);--cnvs-button-focus-border:transparent;--cnvs-button-focus-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400);--cnvs-system-icon-color:var(--cnvs-base-palette-black-pepper-400);box-shadow:inset 0 0 0 2px var(--cnvs-base-palette-black-pepper-400), 0 0 0 2px var(--cnvs-base-palette-french-vanilla-100);}&:hover, &.hover{--cnvs-button-hover-background:var(--cnvs-base-palette-french-vanilla-100);--cnvs-button-hover-border:transparent;--cnvs-button-hover-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400);--cnvs-system-icon-color:var(--cnvs-base-palette-black-pepper-400);}&:active, &.active{--cnvs-button-active-background:var(--cnvs-base-palette-soap-200);--cnvs-button-active-border:transparent;--cnvs-button-active-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400);--cnvs-system-icon-color:var(--cnvs-base-palette-black-pepper-400);}&:disabled, &.disabled{--cnvs-button-disabled-background:transparent;--cnvs-button-disabled-border:var(--cnvs-base-palette-french-vanilla-100);--cnvs-button-disabled-label-emotion-safe:var(--cnvs-base-palette-french-vanilla-100);--cnvs-system-icon-color:var(--cnvs-base-palette-french-vanilla-100);}" }),
-    },
-    iconPosition: {
-        largeOnly: createStyles({ name: "e29f7e", styles: "border-radius:999px;padding:0;min-width:calc(var(--cnvs-sys-space-x4) * 3);" }),
-        largeStart: createStyles({ name: "61470b", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
-        largeEnd: createStyles({ name: "909121", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
-        mediumOnly: createStyles({ name: "eb1770", styles: "padding:0;min-width:2.5rem;border-radius:999px;" }),
-        mediumStart: createStyles({ name: "620c69", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
-        mediumEnd: createStyles({ name: "e0639b", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
-        smallOnly: createStyles({ name: "ffd7ba", styles: "padding:0;min-width:2rem;border-radius:999px;" }),
-        smallStart: createStyles({ name: "778c36", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
-        smallEnd: createStyles({ name: "3d3437", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
-        extraSmallOnly: createStyles({ name: "312d52", styles: "padding:0;min-width:1.5rem;border-radius:999px;" }),
-        extraSmallStart: createStyles({ name: "9b7fcd", styles: "padding-inline-start:0.25rem;padding-inline-end:0.5rem;" }),
-        extraSmallEnd: createStyles({ name: "d37c78", styles: "padding-inline-start:0.5rem;padding-inline-end:0.25rem;" }),
+import { systemIconStencil } from '@workday/canvas-kit-react/icon';
+import { mergeStyles } from '@workday/canvas-kit-react/layout';
+const tertiaryButtonStencil = createStencil({
+    extends: buttonStencil,
+    // Base Styles
+    base: { name: "e61a81", styles: "box-sizing:border-box;padding-inline:var(--cnvs-sys-space-x2);min-width:auto;text-decoration:underline;border:var(--cnvs-sys-space-zero);--cnvs-button-background:transparent;--cnvs-button-borderRadius:var(--cnvs-sys-shape-x1);--cnvs-button-label-emotion-safe:var(--cnvs-brand-primary-base);--cnvs-system-icon-color:var(--cnvs-brand-primary-base);&:focus-visible, &.focus{--cnvs-button-background:transparent;--cnvs-button-label-emotion-safe:var(--cnvs-brand-primary-base);--cnvs-button-boxShadowInner:var(--cnvs-brand-common-focus-outline);--cnvs-button-boxShadowOuter:var(--cnvs-brand-common-focus-outline);--cnvs-system-icon-color:var(--cnvs-brand-primary-base);box-shadow:0 0 0 0px var(--cnvs-sys-color-fg-inverse), 0 0 0 2px var(--cnvs-brand-common-focus-outline);}&:hover, &.hover{--cnvs-button-background:var(--cnvs-sys-color-bg-alt-default);--cnvs-button-label-emotion-safe:var(--cnvs-brand-primary-dark);--cnvs-system-icon-color:var(--cnvs-brand-primary-dark);}&:active, &.active{--cnvs-button-background:var(--cnvs-sys-color-bg-alt-strong);--cnvs-button-label-emotion-safe:var(--cnvs-brand-primary-darkest);--cnvs-system-icon-color:var(--cnvs-brand-primary-darkest);}&:disabled, &.disabled{--cnvs-button-background:transparent;--cnvs-button-label-emotion-safe:var(--cnvs-brand-primary-base);--cnvs-button-opacity:var(--cnvs-sys-opacity-disabled);--cnvs-system-icon-color:var(--cnvs-brand-primary-base);}" },
+    modifiers: {
+        // IconPosition Styles
+        iconPosition: {
+            only: { name: "af38ec", styles: "padding:0;border-radius:var(--cnvs-sys-shape-round);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-strong);&:focus-visible, &.focus{--cnvs-system-icon-color:var(--cnvs-sys-color-fg-strong);}&:hover, &.hover{--cnvs-system-icon-color:var(--cnvs-sys-color-fg-strong);}&:active, &.active{--cnvs-system-icon-color:var(--cnvs-sys-color-fg-stronger);}&:disabled, &.disabled{--cnvs-system-icon-color:var(--cnvs-sys-color-fg-strong);}" },
+            start: {},
+            end: {}
+        },
+        isThemeable: {
+            true: { name: "12b694", styles: "--cnvs-system-icon-color:var(--cnvs-brand-primary-base);&:focus-visible, &.focus{--cnvs-system-icon-color:var(--cnvs-brand-primary-base);}&:hover, &.hover{--cnvs-system-icon-color:var(--cnvs-brand-primary-dark);}&:active, &.active{--cnvs-system-icon-color:var(--cnvs-brand-primary-darkest);}&:disabled, &.disabled{--cnvs-system-icon-color:var(--cnvs-brand-primary-base);}" }
+        },
+        variant: {
+            // Inverse Styles
+            inverse: { name: "bc73ca", styles: "--cnvs-button-background:transparent;--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-inverse);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-inverse);&:focus-visible, &.focus{--cnvs-button-background:var(--cnvs-sys-color-bg-default);--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-strong);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-strong);box-shadow:inset 0 0 0 2px var(--cnvs-sys-color-fg-strong), 0 0 0 2px var(--cnvs-sys-color-fg-inverse);}&:hover, &.hover{--cnvs-button-background:var(--cnvs-sys-color-bg-default);--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-strong);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-strong);}&:active, &.active{--cnvs-button-background:var(--cnvs-sys-color-bg-alt-soft);--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-strong);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-strong);}&:disabled, &.disabled{--cnvs-button-background:transparent;--cnvs-button-label-emotion-safe:var(--cnvs-sys-color-fg-inverse);--cnvs-system-icon-color:var(--cnvs-sys-color-fg-inverse);}" }
+        }
     },
-});
+    // Compound Modifier Styles
+    compound: [
+        {
+            modifiers: { size: 'large', iconPosition: 'only' },
+            styles: { name: "6972da", styles: "min-width:calc(var(--cnvs-sys-space-x4) * 3);" }
+        },
+        {
+            modifiers: { size: 'large', iconPosition: 'start' },
+            styles: { name: "911090", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
+        },
+        {
+            modifiers: { size: 'large', iconPosition: 'end' },
+            styles: { name: "2498ed", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
+        },
+        {
+            modifiers: { size: 'medium', iconPosition: 'only' },
+            styles: { name: "da144e", styles: "min-width:var(--cnvs-sys-space-x10);" }
+        },
+        {
+            modifiers: { size: 'medium', iconPosition: 'start' },
+            styles: { name: "1d5d37", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
+        },
+        {
+            modifiers: { size: 'medium', iconPosition: 'end' },
+            styles: { name: "c8c944", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
+        },
+        {
+            modifiers: { size: 'small', iconPosition: 'only' },
+            styles: { name: "3c90a7", styles: "min-width:var(--cnvs-sys-space-x8);" }
+        },
+        {
+            modifiers: { size: 'small', iconPosition: 'start' },
+            styles: { name: "62b15e", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x3);" }
+        },
+        {
+            modifiers: { size: 'small', iconPosition: 'end' },
+            styles: { name: "069e24", styles: "padding-inline-start:var(--cnvs-sys-space-x3);padding-inline-end:var(--cnvs-sys-space-x2);" }
+        },
+        {
+            modifiers: { size: 'extraSmall', iconPosition: 'only' },
+            styles: { name: "ad6f77", styles: "min-width:var(--cnvs-sys-space-x6);" }
+        },
+        {
+            modifiers: { size: 'extraSmall', iconPosition: 'start' },
+            styles: { name: "b6eb74", styles: "padding-inline-start:var(--cnvs-sys-space-x1);padding-inline-end:var(--cnvs-sys-space-x2);" }
+        },
+        {
+            modifiers: { size: 'extraSmall', iconPosition: 'end' },
+            styles: { name: "6f2522", styles: "padding-inline-start:var(--cnvs-sys-space-x2);padding-inline-end:var(--cnvs-sys-space-x1);" }
+        }
+    ]
+}, "cnvs-tertiary-button");
 export const TertiaryButton = createComponent('button')({
     displayName: 'TertiaryButton',
-    Component: ({ children, icon, size = 'medium', isThemeable, variant, iconPosition, ...elemProps }, ref, Element) => {
+    Component: ({ children, icon, isThemeable, size = 'medium', variant, iconPosition, ...elemProps }, ref, Element) => {
         const baseIconPosition = iconPosition
             ? iconPosition
             : icon
@@ -40,13 +87,11 @@ export const TertiaryButton = createComponent('button')({
                     ? 'start'
                     : 'only'
                 : undefined;
-        return (React.createElement(Button, Object.assign({ as: Element, ref: ref, icon: icon, iconPosition: iconPosition, size: size }, mergeStyles(elemProps, [
-            tertiaryStyles,
-            tertiaryButtonModifiers({
-                isThemeable: (isThemeable || baseIconPosition !== 'only'),
-                variant: variant,
-                iconPosition: getIconPosition(size, baseIconPosition),
-            }),
-        ])), children));
+        return (React.createElement(Button, Object.assign({ as: Element, ref: ref, icon: icon, size: size, iconPosition: iconPosition }, mergeStyles(elemProps, tertiaryButtonStencil({
+            variant,
+            size,
+            isThemeable: (isThemeable || baseIconPosition !== 'only'),
+            iconPosition: baseIconPosition,
+        }))), children));
     },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "11.0.0-alpha.767-next.0",
+  "version": "11.0.0-alpha.770-next.0",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -49,8 +49,8 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-popup-stack": "^11.0.0-alpha.767-next.0",
-    "@workday/canvas-kit-styling": "^11.0.0-alpha.767-next.0",
+    "@workday/canvas-kit-popup-stack": "^11.0.0-alpha.770-next.0",
+    "@workday/canvas-kit-styling": "^11.0.0-alpha.770-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^1.3.0",
     "@workday/design-assets-types": "^0.2.8",
@@ -67,5 +67,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "d52d032456b050c163ecff6643ece156056e40c8"
+  "gitHead": "54f26ac17e2a7d579539ae11adcaa1912faeef2e"
 }