@workday/canvas-kit-react 16.0.0-alpha.0494-next.0 → 16.0.0-alpha.0499-next.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/button/lib/ToolbarDropdownButton.tsx +3 -18
- package/button/lib/ToolbarIconButton.tsx +2 -10
- package/dist/commonjs/banner/lib/Banner.js +2 -2
- package/dist/commonjs/button/lib/DeleteButton.js +1 -1
- package/dist/commonjs/button/lib/PrimaryButton.js +2 -2
- package/dist/commonjs/button/lib/ToolbarDropdownButton.d.ts.map +1 -1
- package/dist/commonjs/button/lib/ToolbarDropdownButton.js +4 -4
- package/dist/commonjs/button/lib/ToolbarIconButton.d.ts.map +1 -1
- package/dist/commonjs/button/lib/ToolbarIconButton.js +1 -1
- package/dist/commonjs/pill/lib/Pill.js +4 -4
- package/dist/es6/banner/lib/Banner.js +2 -2
- package/dist/es6/button/lib/DeleteButton.js +1 -1
- package/dist/es6/button/lib/PrimaryButton.js +2 -2
- package/dist/es6/button/lib/ToolbarDropdownButton.d.ts.map +1 -1
- package/dist/es6/button/lib/ToolbarDropdownButton.js +5 -5
- package/dist/es6/button/lib/ToolbarIconButton.d.ts.map +1 -1
- package/dist/es6/button/lib/ToolbarIconButton.js +1 -1
- package/dist/es6/pill/lib/Pill.js +5 -5
- package/package.json +6 -6
- package/pill/lib/Pill.tsx +5 -5
|
@@ -1,13 +1,6 @@
|
|
|
1
1
|
import {createComponent, focusRing} from '@workday/canvas-kit-react/common';
|
|
2
2
|
import {systemIconStencil} from '@workday/canvas-kit-react/icon';
|
|
3
|
-
import {
|
|
4
|
-
calc,
|
|
5
|
-
colorSpace,
|
|
6
|
-
createStencil,
|
|
7
|
-
cssVar,
|
|
8
|
-
handleCsProp,
|
|
9
|
-
px2rem,
|
|
10
|
-
} from '@workday/canvas-kit-styling';
|
|
3
|
+
import {calc, createStencil, cssVar, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
|
|
11
4
|
import {chevronDownSmallIcon} from '@workday/canvas-system-icons-web';
|
|
12
5
|
import {system} from '@workday/canvas-tokens-web';
|
|
13
6
|
|
|
@@ -51,11 +44,7 @@ export const toolbarDropdownButtonStencil = createStencil({
|
|
|
51
44
|
},
|
|
52
45
|
|
|
53
46
|
'&:hover, &.hover': {
|
|
54
|
-
[buttonStencil.vars.background]:
|
|
55
|
-
color: system.legacy.color.surface.transparent,
|
|
56
|
-
mixinColor: system.legacy.color.surface.overlay.mixin,
|
|
57
|
-
mixinValue: system.legacy.opacity.surface.hover,
|
|
58
|
-
}),
|
|
47
|
+
[buttonStencil.vars.background]: system.legacy.color.surface.overlay.hover.default,
|
|
59
48
|
[systemIconStencil.vars.color]: cssVar(
|
|
60
49
|
buttonColorPropVars.hover.icon,
|
|
61
50
|
system.color.fg.default
|
|
@@ -63,11 +52,7 @@ export const toolbarDropdownButtonStencil = createStencil({
|
|
|
63
52
|
},
|
|
64
53
|
|
|
65
54
|
'&:active, &.active': {
|
|
66
|
-
[buttonStencil.vars.background]:
|
|
67
|
-
color: system.legacy.color.surface.transparent,
|
|
68
|
-
mixinColor: system.legacy.color.surface.overlay.mixin,
|
|
69
|
-
mixinValue: system.legacy.opacity.surface.pressed,
|
|
70
|
-
}),
|
|
55
|
+
[buttonStencil.vars.background]: system.legacy.color.surface.overlay.pressed.default,
|
|
71
56
|
[systemIconStencil.vars.color]: cssVar(
|
|
72
57
|
buttonColorPropVars.active.icon,
|
|
73
58
|
system.color.fg.strong
|
|
@@ -36,20 +36,12 @@ export const toolbarIconButtonStencil = createStencil({
|
|
|
36
36
|
},
|
|
37
37
|
|
|
38
38
|
'&:hover, &.hover': {
|
|
39
|
-
[buttonStencil.vars.background]:
|
|
40
|
-
color: system.legacy.color.surface.transparent,
|
|
41
|
-
mixinColor: system.legacy.color.surface.overlay.mixin,
|
|
42
|
-
mixinValue: system.legacy.opacity.surface.hover,
|
|
43
|
-
}),
|
|
39
|
+
[buttonStencil.vars.background]: system.legacy.color.surface.overlay.hover.default,
|
|
44
40
|
[systemIconStencil.vars.color]: system.color.fg.strong,
|
|
45
41
|
},
|
|
46
42
|
|
|
47
43
|
'&:active, &.active': {
|
|
48
|
-
[buttonStencil.vars.background]:
|
|
49
|
-
color: system.legacy.color.surface.transparent,
|
|
50
|
-
mixinColor: system.legacy.color.surface.overlay.mixin,
|
|
51
|
-
mixinValue: system.legacy.opacity.surface.pressed,
|
|
52
|
-
}),
|
|
44
|
+
[buttonStencil.vars.background]: system.legacy.color.surface.overlay.pressed.default,
|
|
53
45
|
[systemIconStencil.vars.color]: system.color.fg.strong,
|
|
54
46
|
},
|
|
55
47
|
|
|
@@ -16,8 +16,8 @@ exports.bannerStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
|
16
16
|
base: { name: "2md52q", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default), Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));padding-inline:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem)) var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));padding-block:0.625rem;border:0;display:flex;align-items:center;text-align:left;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));cursor:pointer;transition:background-color 120ms linear;outline:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem)) solid transparent;box-shadow:var(--cnvs-sys-depth-5);&:focus-visible, &.focus{outline:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem)) double transparent;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-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));}" },
|
|
17
17
|
modifiers: {
|
|
18
18
|
hasErrors: {
|
|
19
|
-
true: { name: "17py5t", styles: "background-color:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));color:var(--cnvs-sys-color-fg-inverse);&:hover, &.hover{background:color-mix(in srgb, var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1))) , var(--cnvs-sys-color-accent-overlay-
|
|
20
|
-
false: { name: "3cdi5a", styles: "background-color:var(--cnvs-sys-color-brand-accent-caution, oklch(0.7909 0.1711 70.15 / 1));color:var(--cnvs-sys-color-fg-contrast-default);&:hover, &.hover{background:color-mix(in srgb, var(--cnvs-sys-color-brand-accent-caution, oklch(0.7909 0.1711 70.15 / 1)) , var(--cnvs-sys-color-accent-overlay-
|
|
19
|
+
true: { name: "17py5t", styles: "background-color:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));color:var(--cnvs-sys-color-fg-inverse);&:hover, &.hover{background:color-mix(in srgb, var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1))) , var(--cnvs-sys-color-accent-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-accent-hover, 0.18) * 100%));}& [data-part=\"exclamation-circle-icon\"]{--accentColor-system-icon-c9acc3:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);--backgroundColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);}" },
|
|
20
|
+
false: { name: "3cdi5a", styles: "background-color:var(--cnvs-sys-color-brand-accent-caution, oklch(0.7909 0.1711 70.15 / 1));color:var(--cnvs-sys-color-fg-contrast-default);&:hover, &.hover{background:color-mix(in srgb, var(--cnvs-sys-color-brand-accent-caution, oklch(0.7909 0.1711 70.15 / 1)) , var(--cnvs-sys-color-accent-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-accent-hover, 0.18) * 100%));}& [data-part=\"exclamation-triangle-icon\"]{--accentColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse, currentColor);--color-system-icon-c9acc3:var(--cnvs-sys-color-brand-fg-caution-strong, oklch(0.4824 0.1353 46.11 / 1));--backgroundColor-system-icon-c9acc3:var(--cnvs-sys-color-brand-fg-caution-strong, oklch(0.4824 0.1353 46.11 / 1));}" }
|
|
21
21
|
},
|
|
22
22
|
isSticky: {
|
|
23
23
|
true: { name: "3wgdf7", styles: "width:13.875rem;border-start-end-radius:0;border-end-end-radius:0;" },
|
|
@@ -10,7 +10,7 @@ const BaseButton_1 = require("./BaseButton");
|
|
|
10
10
|
const Button_1 = require("./Button");
|
|
11
11
|
const deleteButtonStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
12
12
|
extends: BaseButton_1.buttonStencil,
|
|
13
|
-
base: { name: "2y1qky", styles: "box-sizing:border-box;--background-button-a19f67:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--borderRadius-button-a19f67:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));--label-button-a19f67:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--icon-2f7547, var(--cnvs-sys-color-fg-inverse));&:focus-visible, &.focus{--background-button-a19f67:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--label-button-a19f67:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--icon-5e7d9c, var(--cnvs-sys-color-fg-inverse));--boxShadowInner-button-a19f67:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));--boxShadowOuter-button-a19f67:var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));}&:hover, &.hover{--background-button-a19f67:var(--cnvs-brand-critical-700, color-mix(in srgb, var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1))) , var(--cnvs-sys-color-accent-overlay-
|
|
13
|
+
base: { name: "2y1qky", styles: "box-sizing:border-box;--background-button-a19f67:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--borderRadius-button-a19f67:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));--label-button-a19f67:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--icon-2f7547, var(--cnvs-sys-color-fg-inverse));&:focus-visible, &.focus{--background-button-a19f67:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--label-button-a19f67:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--icon-5e7d9c, var(--cnvs-sys-color-fg-inverse));--boxShadowInner-button-a19f67:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));--boxShadowOuter-button-a19f67:var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));}&:hover, &.hover{--background-button-a19f67:var(--cnvs-brand-critical-700, color-mix(in srgb, var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1))) , var(--cnvs-sys-color-accent-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-accent-hover, 0.18) * 100%)));--label-button-a19f67:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--icon-60f068, var(--cnvs-sys-color-fg-inverse));}&:active, &.active{--background-button-a19f67:var(--cnvs-brand-critical-800, color-mix(in srgb, var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1))) , var(--cnvs-sys-color-accent-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-accent-pressed, 0.36) * 100%)));--label-button-a19f67:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--icon-76d965, var(--cnvs-sys-color-fg-inverse));}&:disabled, &.disabled{--opacity-button-a19f67:var(--cnvs-sys-opacity-disabled);--background-button-a19f67:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--color-system-icon-c9acc3:var(--icon-4fc0b7, var(--cnvs-sys-color-fg-inverse));--label-button-a19f67:var(--cnvs-sys-color-fg-inverse);}" },
|
|
14
14
|
modifiers: {
|
|
15
15
|
variant: {
|
|
16
16
|
outline: { name: "2r7qts", styles: "--background-button-a19f67:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--border-button-a19f67:var(--cnvs-sys-color-border-default);--label-button-a19f67:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--color-system-icon-c9acc3:var(--icon-2f7547, currentColor);&:hover, &.hover{--background-button-a19f67:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--border-button-a19f67:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));--label-button-a19f67:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--color-system-icon-c9acc3:var(--icon-60f068, currentColor);}&:focus-visible, &.focus{--background-button-a19f67:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));--border-button-a19f67:var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));--label-button-a19f67:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--boxShadowInner-button-a19f67:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));--boxShadowOuter-button-a19f67:var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));--color-system-icon-c9acc3:var(--icon-5e7d9c, currentColor);}&:active, &.active{--background-button-a19f67:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--border-button-a19f67:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));--label-button-a19f67:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--color-system-icon-c9acc3:var(--icon-76d965, currentColor);}&:disabled, &.disabled{--opacity-button-a19f67:var(--cnvs-sys-opacity-disabled);--background-button-a19f67:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--label-button-a19f67:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--color-system-icon-c9acc3:var(--icon-2f7547, currentColor);}" }
|
|
@@ -10,11 +10,11 @@ const BaseButton_1 = require("./BaseButton");
|
|
|
10
10
|
const Button_1 = require("./Button");
|
|
11
11
|
const primaryButtonStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
12
12
|
extends: BaseButton_1.buttonStencil,
|
|
13
|
-
base: { name: "qdj2q", styles: "box-sizing:border-box;--background-button-a19f67:var(--cnvs-brand-action-base, var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1))));--borderRadius-button-a19f67:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));--label-button-a19f67:var(--cnvs-brand-action-accent, var(--cnvs-sys-color-fg-inverse));--color-system-icon-c9acc3:var(--icon-2f7547, currentColor);&:focus-visible, &.focus{--background-button-a19f67:var(--cnvs-brand-action-base, var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1))));--label-button-a19f67:var(--cnvs-brand-action-accent, var(--cnvs-sys-color-fg-inverse));--boxShadowInner-button-a19f67:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));--boxShadowOuter-button-a19f67:var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));--color-system-icon-c9acc3:var(--icon-5e7d9c, currentColor);}&:hover, &.hover{--background-button-a19f67:var(--cnvs-brand-action-dark, color-mix(in srgb, var(--cnvs-brand-action-base, var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)))) , var(--cnvs-sys-color-accent-overlay-
|
|
13
|
+
base: { name: "qdj2q", styles: "box-sizing:border-box;--background-button-a19f67:var(--cnvs-brand-action-base, var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1))));--borderRadius-button-a19f67:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));--label-button-a19f67:var(--cnvs-brand-action-accent, var(--cnvs-sys-color-fg-inverse));--color-system-icon-c9acc3:var(--icon-2f7547, currentColor);&:focus-visible, &.focus{--background-button-a19f67:var(--cnvs-brand-action-base, var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1))));--label-button-a19f67:var(--cnvs-brand-action-accent, var(--cnvs-sys-color-fg-inverse));--boxShadowInner-button-a19f67:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));--boxShadowOuter-button-a19f67:var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));--color-system-icon-c9acc3:var(--icon-5e7d9c, currentColor);}&:hover, &.hover{--background-button-a19f67:var(--cnvs-brand-action-dark, color-mix(in srgb, var(--cnvs-brand-action-base, var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)))) , var(--cnvs-sys-color-accent-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-accent-hover, 0.18) * 100%)));--label-button-a19f67:var(--cnvs-brand-action-accent, var(--cnvs-sys-color-fg-inverse));--color-system-icon-c9acc3:var(--icon-60f068, currentColor);}&:active, &.active{--background-button-a19f67:var(--cnvs-brand-action-darkest, color-mix(in srgb, var(--cnvs-brand-action-base, var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)))) , var(--cnvs-sys-color-accent-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-accent-pressed, 0.36) * 100%)));--label-button-a19f67:var(--cnvs-brand-action-accent, var(--cnvs-sys-color-fg-inverse));--color-system-icon-c9acc3:var(--icon-76d965, currentColor);}&:disabled, &.disabled{--opacity-button-a19f67:var(--cnvs-sys-opacity-disabled);--background-button-a19f67:var(--cnvs-brand-action-base, var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1))));--label-button-a19f67:var(--cnvs-brand-action-accent, var(--cnvs-sys-color-fg-inverse));--color-system-icon-c9acc3:var(--icon-2f7547, currentColor);}" },
|
|
14
14
|
modifiers: {
|
|
15
15
|
variant: {
|
|
16
16
|
// Inverse Styles
|
|
17
|
-
inverse: { name: "wcd4a", styles: "--background-button-a19f67:var(--cnvs-brand-action-lightest, var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1))));--borderRadius-button-a19f67:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));--label-button-a19f67:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:var(--icon-2f7547, currentColor);&:hover, &.hover{--background-button-a19f67:var(--cnvs-brand-action-lighter, color-mix(in srgb, var(--cnvs-brand-action-lightest, var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)))) , var(--cnvs-sys-color-surface-overlay-
|
|
17
|
+
inverse: { name: "wcd4a", styles: "--background-button-a19f67:var(--cnvs-brand-action-lightest, var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1))));--borderRadius-button-a19f67:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));--label-button-a19f67:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:var(--icon-2f7547, currentColor);&:hover, &.hover{--background-button-a19f67:var(--cnvs-brand-action-lighter, color-mix(in srgb, var(--cnvs-brand-action-lightest, var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-surface-hover, 0.08) * 100%)));--label-button-a19f67:var(--cnvs-sys-color-fg-stronger);--color-system-icon-c9acc3:var(--icon-60f068, currentColor);}&:focus-visible, &.focus{--background-button-a19f67:var(--cnvs-brand-action-lightest, var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1))));--label-button-a19f67:var(--cnvs-sys-color-fg-strong);--boxShadowInner-button-a19f67:var(--cnvs-sys-color-border-contrast-default);--boxShadowOuter-button-a19f67:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));--color-system-icon-c9acc3:var(--icon-5e7d9c, currentColor);}&:active, &.active{--background-button-a19f67:var(--cnvs-brand-action-light, color-mix(in srgb, var(--cnvs-brand-action-lightest, var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-surface-pressed, 0.18) * 100%)));--label-button-a19f67:var(--cnvs-sys-color-fg-stronger);--color-system-icon-c9acc3:var(--icon-76d965, currentColor);}&:disabled, &.disabled{--opacity-button-a19f67:var(--cnvs-sys-opacity-disabled);--background-button-a19f67:var(--cnvs-brand-action-lightest, var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1))));--label-button-a19f67:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:var(--icon-4fc0b7, currentColor);}" }
|
|
18
18
|
}
|
|
19
19
|
}
|
|
20
20
|
}, "primary-button-821491");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToolbarDropdownButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/ToolbarDropdownButton.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ToolbarDropdownButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/ToolbarDropdownButton.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAC,sBAAsB,EAAC,MAAM,qBAAqB,CAAC;AAE3D,MAAM,WAAW,0BACf,SAAQ,IAAI,CAAC,sBAAsB,EAAE,SAAS,GAAG,gBAAgB,CAAC;CAAG;AAEvE,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA0FvC,CAAC;AAEH,eAAO,MAAM,qBAAqB,mGA4ChC,CAAC"}
|
|
@@ -14,16 +14,16 @@ exports.toolbarDropdownButtonStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
|
14
14
|
chevron: 'toolbar-dropdown-btn-arrow',
|
|
15
15
|
customIcon: 'toolbar-dropdown-btn-custom-icon',
|
|
16
16
|
},
|
|
17
|
-
base: { name: "
|
|
17
|
+
base: { name: "4dn69v", styles: "box-sizing:border-box;padding:0;min-width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));gap:0;--borderRadius-button-a19f67:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));--color-system-icon-c9acc3:var(--icon-2f7547, var(--cnvs-sys-color-fg-default));--background-button-a19f67:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));&:focus-visible, &.focus{--background-button-a19f67:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--color-system-icon-c9acc3:var(--icon-5e7d9c, var(--cnvs-sys-color-fg-strong));box-shadow:0 0 0 0px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))), 0 0 0 2px var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));}&:hover, &.hover{--background-button-a19f67:var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));--color-system-icon-c9acc3:var(--icon-60f068, var(--cnvs-sys-color-fg-default));}&:active, &.active{--background-button-a19f67:var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09));--color-system-icon-c9acc3:var(--icon-76d965, var(--cnvs-sys-color-fg-strong));}&:disabled, &.disabled{--background-button-a19f67:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--opacity-button-a19f67:var(--cnvs-sys-opacity-disabled);--color-system-icon-c9acc3:var(--icon-4fc0b7, var(--cnvs-sys-color-fg-default));}[data-part=\"toolbar-dropdown-btn-custom-icon\"]{margin-inline-start:var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));margin-inline-end:calc(0.125rem * -1);}[data-part=\"toolbar-dropdown-btn-arrow\"]{margin:0;margin-inline-end:0.125rem;}" },
|
|
18
18
|
modifiers: {
|
|
19
19
|
shouldMirrorIcon: {
|
|
20
|
-
true: { name: "
|
|
20
|
+
true: { name: "2bny6s", styles: "[data-part=\"toolbar-dropdown-btn-custom-icon\"]{margin-inline-end:0;margin-inline-start:0.125rem;}" }
|
|
21
21
|
},
|
|
22
22
|
shouldMirrorIconInRTL: {
|
|
23
|
-
true: { name: "
|
|
23
|
+
true: { name: "28w59b", styles: "&:dir(rtl) [data-part=\"toolbar-dropdown-btn-custom-icon\"]{margin-inline-end:0;margin-inline-start:0.125rem;}" }
|
|
24
24
|
}
|
|
25
25
|
}
|
|
26
|
-
}, "toolbar-dropdown-button-
|
|
26
|
+
}, "toolbar-dropdown-button-71fd2f");
|
|
27
27
|
exports.ToolbarDropdownButton = (0, common_1.createComponent)('button')({
|
|
28
28
|
displayName: 'ToolbarDropdownButton',
|
|
29
29
|
Component: ({ icon, shouldMirrorIcon = false, shouldMirrorIconInRTL = false, children, ...elemProps }, ref, Element) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToolbarIconButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/ToolbarIconButton.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAC,mBAAmB,EAAC,MAAM,kBAAkB,CAAC;AAErD,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,mBAAmB,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3F,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,SAAS,KAAK,IAAI,CAAC;IACxD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAED,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"ToolbarIconButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/ToolbarIconButton.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAC,mBAAmB,EAAC,MAAM,kBAAkB,CAAC;AAErD,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,mBAAmB,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3F,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,SAAS,KAAK,IAAI,CAAC;IACxD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAED,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAgEnC,CAAC;AAEH,eAAO,MAAM,iBAAiB,+FA+C5B,CAAC"}
|
|
@@ -33,7 +33,7 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
|
33
33
|
const BaseButton_1 = require("./BaseButton");
|
|
34
34
|
exports.toolbarIconButtonStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
35
35
|
extends: BaseButton_1.buttonStencil,
|
|
36
|
-
base: { name: "
|
|
36
|
+
base: { name: "1oxsp1", styles: "box-sizing:border-box;min-width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));padding:0;height:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));--borderRadius-button-a19f67:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-default);--background-button-a19f67:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));&:focus-visible, &.focus{--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);box-shadow:0 0 0 0px var(--cnvs-sys-color-border-transparent), 0 0 0 2px var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));}&:hover, &.hover{--background-button-a19f67:var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);}&:active, &.active{--background-button-a19f67:var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);}&:disabled, &.disabled{--opacity-button-a19f67:var(--cnvs-sys-opacity-disabled);--background-button-a19f67:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-default);}&[aria-pressed='true']{--color-system-icon-c9acc3:var(--cnvs-sys-color-brand-fg-primary-default, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));--background-button-a19f67:var(--cnvs-sys-color-brand-surface-primary-default, oklch(0.6499 0.1912 253.52 / 0.08));&:focus-visible, &.focus{--color-system-icon-c9acc3:var(--cnvs-sys-color-brand-fg-primary-strong, var(--cnvs-brand-primary-dark, oklch(0.4658 0.1562 255.5 / 1)));}&:hover, &.hover{--background-button-a19f67:color-mix(in srgb, var(--cnvs-sys-color-brand-surface-primary-default, oklch(0.6499 0.1912 253.52 / 0.08)) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-surface-hover, 0.08) * 100%));--color-system-icon-c9acc3:var(--cnvs-sys-color-brand-fg-primary-strong, var(--cnvs-brand-primary-dark, oklch(0.4658 0.1562 255.5 / 1)));}&:active, &.active{--background-button-a19f67:color-mix(in srgb, var(--cnvs-sys-color-brand-surface-primary-default, oklch(0.6499 0.1912 253.52 / 0.08)) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-surface-pressed, 0.18) * 100%));--color-system-icon-c9acc3:var(--cnvs-sys-color-brand-fg-primary-strong, var(--cnvs-brand-primary-dark, oklch(0.4658 0.1562 255.5 / 1)));}}" }
|
|
37
37
|
}, "toolbar-icon-button-8c40d9");
|
|
38
38
|
exports.ToolbarIconButton = (0, common_1.createComponent)('button')({
|
|
39
39
|
displayName: 'ToolbarIconButton',
|
|
@@ -19,14 +19,14 @@ exports.pillStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
|
19
19
|
vars: {
|
|
20
20
|
maxWidth: '',
|
|
21
21
|
},
|
|
22
|
-
base: { name: "
|
|
22
|
+
base: { name: "48hkcj", styles: "box-sizing:border-box;display:initial;flex-direction:row;align-items:center;border-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));font-family:var(--cnvs-sys-font-family-default, \"Roboto\");font-weight:var(--cnvs-sys-font-weight-normal, 400);line-height:var(--cnvs-sys-line-height-subtext-md, 1rem);font-size:var(--cnvs-sys-font-size-subtext-md, 0.75rem);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-md, 0.02rem);box-shadow:none;outline:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:fit-content;padding:0.125rem var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));height:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));position:relative;gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));max-width:var(--maxWidth-pill-089441);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;--background-button-a19f67:var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));--border-button-a19f67:var(--cnvs-sys-color-border-transparent);--label-button-a19f67:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:currentColor;--borderColor-pill-count-d41635:transparent;&:has(span){display:flex;line-height:var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem));}&:hover, &.hover{--background-button-a19f67:color-mix(in srgb, var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05))) , var(--cnvs-base-palette-neutral-1000, oklch(0 0 0 / 1)) calc(0.0392 * 100%));--border-button-a19f67:var(--cnvs-sys-color-border-transparent);--label-button-a19f67:var(--cnvs-sys-color-fg-stronger);--color-system-icon-c9acc3:currentColor;--borderColor-pill-count-d41635:transparent;}&:active, &.active{--background-button-a19f67:color-mix(in srgb, var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05))) , var(--cnvs-base-palette-neutral-1000, oklch(0 0 0 / 1)) calc(0.0745 * 100%));--label-button-a19f67:var(--cnvs-sys-color-fg-stronger);--color-system-icon-c9acc3:currentColor;--borderColor-pill-count-d41635:transparent;}&:focus-visible, &.focus{--border-button-a19f67:var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));--label-button-a19f67:var(--cnvs-sys-color-fg-strong);border-color:var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));--color-system-icon-c9acc3:currentColor;box-shadow:0 0 0 1px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1)), 0 0 0 1px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));}&:disabled, &.disabled{--opacity-button-a19f67:var(--cnvs-sys-opacity-disabled);--background-button-a19f67:var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));--label-button-a19f67:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:currentColor;--backgroundColor-pill-count-d41635:var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));--borderColor-pill-count-d41635:transparent;}" },
|
|
23
23
|
modifiers: {
|
|
24
24
|
variant: {
|
|
25
|
-
readOnly: { name: "
|
|
26
|
-
removable: { name: "
|
|
25
|
+
readOnly: { name: "8htfg", styles: "border:0.0625rem solid var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));cursor:default;--background-button-a19f67:var(--cnvs-sys-color-bg-default);--label-button-a19f67:var(--cnvs-sys-color-fg-default);&:hover, &.hover{border-color:var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));--background-button-a19f67:var(--cnvs-sys-color-bg-default);}&:focus-visible, &.focus{--background-button-a19f67:var(--cnvs-sys-color-bg-default);}&:active, &.active{--background-button-a19f67:var(--cnvs-sys-color-bg-default);}&:disabled, &.disabled{--background-button-a19f67:var(--cnvs-sys-color-bg-default);}" },
|
|
26
|
+
removable: { name: "25wdpe", styles: "&:focus-visible, &.focus{--background-button-a19f67:var(--cnvs-sys-color-bg-alt-default);--border-button-a19f67:var(--cnvs-sys-color-border-input-default);--label-button-a19f67:var(--cnvs-sys-color-fg-strong);box-shadow:none;}&:hover, &.hover{--background-button-a19f67:color-mix(in srgb, var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05))) , var(--cnvs-base-palette-neutral-1000, oklch(0 0 0 / 1)) calc(0.0392 * 100%));--backgroundColor-pill-count-d41635:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));}&:active, &.active{--background-button-a19f67:color-mix(in srgb, var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05))) , var(--cnvs-base-palette-neutral-1000, oklch(0 0 0 / 1)) calc(0.0745 * 100%));--backgroundColor-pill-count-d41635:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));}&:disabled, &.disabled{--background-button-a19f67:var(--cnvs-sys-color-bg-alt-default);--color-system-icon-c9acc3:currentColor;}cursor:default;overflow:revert;position:relative;" }
|
|
27
27
|
}
|
|
28
28
|
}
|
|
29
|
-
}, "pill-
|
|
29
|
+
}, "pill-089441");
|
|
30
30
|
/**
|
|
31
31
|
* By default, a `Pill` renders an interactive element that accepts subcomponents. By "interactive"
|
|
32
32
|
* we mean that the Pill container is a focusable element (a `<button>`). All leading elements
|
|
@@ -13,8 +13,8 @@ export const bannerStencil = createStencil({
|
|
|
13
13
|
base: { name: "2md52q", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default), Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));padding-inline:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem)) var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));padding-block:0.625rem;border:0;display:flex;align-items:center;text-align:left;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));cursor:pointer;transition:background-color 120ms linear;outline:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem)) solid transparent;box-shadow:var(--cnvs-sys-depth-5);&:focus-visible, &.focus{outline:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem)) double transparent;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-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));}" },
|
|
14
14
|
modifiers: {
|
|
15
15
|
hasErrors: {
|
|
16
|
-
true: { name: "17py5t", styles: "background-color:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));color:var(--cnvs-sys-color-fg-inverse);&:hover, &.hover{background:color-mix(in srgb, var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1))) , var(--cnvs-sys-color-accent-overlay-
|
|
17
|
-
false: { name: "3cdi5a", styles: "background-color:var(--cnvs-sys-color-brand-accent-caution, oklch(0.7909 0.1711 70.15 / 1));color:var(--cnvs-sys-color-fg-contrast-default);&:hover, &.hover{background:color-mix(in srgb, var(--cnvs-sys-color-brand-accent-caution, oklch(0.7909 0.1711 70.15 / 1)) , var(--cnvs-sys-color-accent-overlay-
|
|
16
|
+
true: { name: "17py5t", styles: "background-color:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));color:var(--cnvs-sys-color-fg-inverse);&:hover, &.hover{background:color-mix(in srgb, var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1))) , var(--cnvs-sys-color-accent-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-accent-hover, 0.18) * 100%));}& [data-part=\"exclamation-circle-icon\"]{--accentColor-system-icon-c9acc3:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);--backgroundColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);}" },
|
|
17
|
+
false: { name: "3cdi5a", styles: "background-color:var(--cnvs-sys-color-brand-accent-caution, oklch(0.7909 0.1711 70.15 / 1));color:var(--cnvs-sys-color-fg-contrast-default);&:hover, &.hover{background:color-mix(in srgb, var(--cnvs-sys-color-brand-accent-caution, oklch(0.7909 0.1711 70.15 / 1)) , var(--cnvs-sys-color-accent-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-accent-hover, 0.18) * 100%));}& [data-part=\"exclamation-triangle-icon\"]{--accentColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse, currentColor);--color-system-icon-c9acc3:var(--cnvs-sys-color-brand-fg-caution-strong, oklch(0.4824 0.1353 46.11 / 1));--backgroundColor-system-icon-c9acc3:var(--cnvs-sys-color-brand-fg-caution-strong, oklch(0.4824 0.1353 46.11 / 1));}" }
|
|
18
18
|
},
|
|
19
19
|
isSticky: {
|
|
20
20
|
true: { name: "3wgdf7", styles: "width:13.875rem;border-start-end-radius:0;border-end-end-radius:0;" },
|
|
@@ -7,7 +7,7 @@ import { buttonColorPropVars, buttonStencil } from './BaseButton';
|
|
|
7
7
|
import { Button } from './Button';
|
|
8
8
|
const deleteButtonStencil = createStencil({
|
|
9
9
|
extends: buttonStencil,
|
|
10
|
-
base: { name: "2y1qky", styles: "box-sizing:border-box;--background-button-a19f67:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--borderRadius-button-a19f67:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));--label-button-a19f67:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--icon-2f7547, var(--cnvs-sys-color-fg-inverse));&:focus-visible, &.focus{--background-button-a19f67:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--label-button-a19f67:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--icon-5e7d9c, var(--cnvs-sys-color-fg-inverse));--boxShadowInner-button-a19f67:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));--boxShadowOuter-button-a19f67:var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));}&:hover, &.hover{--background-button-a19f67:var(--cnvs-brand-critical-700, color-mix(in srgb, var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1))) , var(--cnvs-sys-color-accent-overlay-
|
|
10
|
+
base: { name: "2y1qky", styles: "box-sizing:border-box;--background-button-a19f67:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--borderRadius-button-a19f67:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));--label-button-a19f67:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--icon-2f7547, var(--cnvs-sys-color-fg-inverse));&:focus-visible, &.focus{--background-button-a19f67:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--label-button-a19f67:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--icon-5e7d9c, var(--cnvs-sys-color-fg-inverse));--boxShadowInner-button-a19f67:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));--boxShadowOuter-button-a19f67:var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));}&:hover, &.hover{--background-button-a19f67:var(--cnvs-brand-critical-700, color-mix(in srgb, var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1))) , var(--cnvs-sys-color-accent-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-accent-hover, 0.18) * 100%)));--label-button-a19f67:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--icon-60f068, var(--cnvs-sys-color-fg-inverse));}&:active, &.active{--background-button-a19f67:var(--cnvs-brand-critical-800, color-mix(in srgb, var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1))) , var(--cnvs-sys-color-accent-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-accent-pressed, 0.36) * 100%)));--label-button-a19f67:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--icon-76d965, var(--cnvs-sys-color-fg-inverse));}&:disabled, &.disabled{--opacity-button-a19f67:var(--cnvs-sys-opacity-disabled);--background-button-a19f67:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--color-system-icon-c9acc3:var(--icon-4fc0b7, var(--cnvs-sys-color-fg-inverse));--label-button-a19f67:var(--cnvs-sys-color-fg-inverse);}" },
|
|
11
11
|
modifiers: {
|
|
12
12
|
variant: {
|
|
13
13
|
outline: { name: "2r7qts", styles: "--background-button-a19f67:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--border-button-a19f67:var(--cnvs-sys-color-border-default);--label-button-a19f67:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--color-system-icon-c9acc3:var(--icon-2f7547, currentColor);&:hover, &.hover{--background-button-a19f67:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--border-button-a19f67:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));--label-button-a19f67:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--color-system-icon-c9acc3:var(--icon-60f068, currentColor);}&:focus-visible, &.focus{--background-button-a19f67:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));--border-button-a19f67:var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));--label-button-a19f67:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--boxShadowInner-button-a19f67:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));--boxShadowOuter-button-a19f67:var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));--color-system-icon-c9acc3:var(--icon-5e7d9c, currentColor);}&:active, &.active{--background-button-a19f67:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--border-button-a19f67:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));--label-button-a19f67:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--color-system-icon-c9acc3:var(--icon-76d965, currentColor);}&:disabled, &.disabled{--opacity-button-a19f67:var(--cnvs-sys-opacity-disabled);--background-button-a19f67:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--label-button-a19f67:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--color-system-icon-c9acc3:var(--icon-2f7547, currentColor);}" }
|
|
@@ -7,11 +7,11 @@ import { buttonColorPropVars, buttonStencil } from './BaseButton';
|
|
|
7
7
|
import { Button } from './Button';
|
|
8
8
|
const primaryButtonStencil = createStencil({
|
|
9
9
|
extends: buttonStencil,
|
|
10
|
-
base: { name: "qdj2q", styles: "box-sizing:border-box;--background-button-a19f67:var(--cnvs-brand-action-base, var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1))));--borderRadius-button-a19f67:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));--label-button-a19f67:var(--cnvs-brand-action-accent, var(--cnvs-sys-color-fg-inverse));--color-system-icon-c9acc3:var(--icon-2f7547, currentColor);&:focus-visible, &.focus{--background-button-a19f67:var(--cnvs-brand-action-base, var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1))));--label-button-a19f67:var(--cnvs-brand-action-accent, var(--cnvs-sys-color-fg-inverse));--boxShadowInner-button-a19f67:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));--boxShadowOuter-button-a19f67:var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));--color-system-icon-c9acc3:var(--icon-5e7d9c, currentColor);}&:hover, &.hover{--background-button-a19f67:var(--cnvs-brand-action-dark, color-mix(in srgb, var(--cnvs-brand-action-base, var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)))) , var(--cnvs-sys-color-accent-overlay-
|
|
10
|
+
base: { name: "qdj2q", styles: "box-sizing:border-box;--background-button-a19f67:var(--cnvs-brand-action-base, var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1))));--borderRadius-button-a19f67:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));--label-button-a19f67:var(--cnvs-brand-action-accent, var(--cnvs-sys-color-fg-inverse));--color-system-icon-c9acc3:var(--icon-2f7547, currentColor);&:focus-visible, &.focus{--background-button-a19f67:var(--cnvs-brand-action-base, var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1))));--label-button-a19f67:var(--cnvs-brand-action-accent, var(--cnvs-sys-color-fg-inverse));--boxShadowInner-button-a19f67:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));--boxShadowOuter-button-a19f67:var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));--color-system-icon-c9acc3:var(--icon-5e7d9c, currentColor);}&:hover, &.hover{--background-button-a19f67:var(--cnvs-brand-action-dark, color-mix(in srgb, var(--cnvs-brand-action-base, var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)))) , var(--cnvs-sys-color-accent-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-accent-hover, 0.18) * 100%)));--label-button-a19f67:var(--cnvs-brand-action-accent, var(--cnvs-sys-color-fg-inverse));--color-system-icon-c9acc3:var(--icon-60f068, currentColor);}&:active, &.active{--background-button-a19f67:var(--cnvs-brand-action-darkest, color-mix(in srgb, var(--cnvs-brand-action-base, var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)))) , var(--cnvs-sys-color-accent-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-accent-pressed, 0.36) * 100%)));--label-button-a19f67:var(--cnvs-brand-action-accent, var(--cnvs-sys-color-fg-inverse));--color-system-icon-c9acc3:var(--icon-76d965, currentColor);}&:disabled, &.disabled{--opacity-button-a19f67:var(--cnvs-sys-opacity-disabled);--background-button-a19f67:var(--cnvs-brand-action-base, var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1))));--label-button-a19f67:var(--cnvs-brand-action-accent, var(--cnvs-sys-color-fg-inverse));--color-system-icon-c9acc3:var(--icon-2f7547, currentColor);}" },
|
|
11
11
|
modifiers: {
|
|
12
12
|
variant: {
|
|
13
13
|
// Inverse Styles
|
|
14
|
-
inverse: { name: "wcd4a", styles: "--background-button-a19f67:var(--cnvs-brand-action-lightest, var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1))));--borderRadius-button-a19f67:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));--label-button-a19f67:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:var(--icon-2f7547, currentColor);&:hover, &.hover{--background-button-a19f67:var(--cnvs-brand-action-lighter, color-mix(in srgb, var(--cnvs-brand-action-lightest, var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)))) , var(--cnvs-sys-color-surface-overlay-
|
|
14
|
+
inverse: { name: "wcd4a", styles: "--background-button-a19f67:var(--cnvs-brand-action-lightest, var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1))));--borderRadius-button-a19f67:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));--label-button-a19f67:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:var(--icon-2f7547, currentColor);&:hover, &.hover{--background-button-a19f67:var(--cnvs-brand-action-lighter, color-mix(in srgb, var(--cnvs-brand-action-lightest, var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-surface-hover, 0.08) * 100%)));--label-button-a19f67:var(--cnvs-sys-color-fg-stronger);--color-system-icon-c9acc3:var(--icon-60f068, currentColor);}&:focus-visible, &.focus{--background-button-a19f67:var(--cnvs-brand-action-lightest, var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1))));--label-button-a19f67:var(--cnvs-sys-color-fg-strong);--boxShadowInner-button-a19f67:var(--cnvs-sys-color-border-contrast-default);--boxShadowOuter-button-a19f67:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));--color-system-icon-c9acc3:var(--icon-5e7d9c, currentColor);}&:active, &.active{--background-button-a19f67:var(--cnvs-brand-action-light, color-mix(in srgb, var(--cnvs-brand-action-lightest, var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-surface-pressed, 0.18) * 100%)));--label-button-a19f67:var(--cnvs-sys-color-fg-stronger);--color-system-icon-c9acc3:var(--icon-76d965, currentColor);}&:disabled, &.disabled{--opacity-button-a19f67:var(--cnvs-sys-opacity-disabled);--background-button-a19f67:var(--cnvs-brand-action-lightest, var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1))));--label-button-a19f67:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:var(--icon-4fc0b7, currentColor);}" }
|
|
15
15
|
}
|
|
16
16
|
}
|
|
17
17
|
}, "primary-button-821491");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToolbarDropdownButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/ToolbarDropdownButton.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ToolbarDropdownButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/ToolbarDropdownButton.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAC,sBAAsB,EAAC,MAAM,qBAAqB,CAAC;AAE3D,MAAM,WAAW,0BACf,SAAQ,IAAI,CAAC,sBAAsB,EAAE,SAAS,GAAG,gBAAgB,CAAC;CAAG;AAEvE,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA0FvC,CAAC;AAEH,eAAO,MAAM,qBAAqB,mGA4ChC,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { createComponent, focusRing } from '@workday/canvas-kit-react/common';
|
|
3
3
|
import { systemIconStencil } from '@workday/canvas-kit-react/icon';
|
|
4
|
-
import { calc,
|
|
4
|
+
import { calc, createStencil, cssVar, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
|
|
5
5
|
import { chevronDownSmallIcon } from '@workday/canvas-system-icons-web';
|
|
6
6
|
import { system } from '@workday/canvas-tokens-web';
|
|
7
7
|
import { BaseButton, buttonColorPropVars, buttonStencil } from './BaseButton';
|
|
@@ -11,16 +11,16 @@ export const toolbarDropdownButtonStencil = createStencil({
|
|
|
11
11
|
chevron: 'toolbar-dropdown-btn-arrow',
|
|
12
12
|
customIcon: 'toolbar-dropdown-btn-custom-icon',
|
|
13
13
|
},
|
|
14
|
-
base: { name: "
|
|
14
|
+
base: { name: "4dn69v", styles: "box-sizing:border-box;padding:0;min-width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));gap:0;--borderRadius-button-a19f67:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));--color-system-icon-c9acc3:var(--icon-2f7547, var(--cnvs-sys-color-fg-default));--background-button-a19f67:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));&:focus-visible, &.focus{--background-button-a19f67:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--color-system-icon-c9acc3:var(--icon-5e7d9c, var(--cnvs-sys-color-fg-strong));box-shadow:0 0 0 0px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))), 0 0 0 2px var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));}&:hover, &.hover{--background-button-a19f67:var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));--color-system-icon-c9acc3:var(--icon-60f068, var(--cnvs-sys-color-fg-default));}&:active, &.active{--background-button-a19f67:var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09));--color-system-icon-c9acc3:var(--icon-76d965, var(--cnvs-sys-color-fg-strong));}&:disabled, &.disabled{--background-button-a19f67:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--opacity-button-a19f67:var(--cnvs-sys-opacity-disabled);--color-system-icon-c9acc3:var(--icon-4fc0b7, var(--cnvs-sys-color-fg-default));}[data-part=\"toolbar-dropdown-btn-custom-icon\"]{margin-inline-start:var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));margin-inline-end:calc(0.125rem * -1);}[data-part=\"toolbar-dropdown-btn-arrow\"]{margin:0;margin-inline-end:0.125rem;}" },
|
|
15
15
|
modifiers: {
|
|
16
16
|
shouldMirrorIcon: {
|
|
17
|
-
true: { name: "
|
|
17
|
+
true: { name: "2bny6s", styles: "[data-part=\"toolbar-dropdown-btn-custom-icon\"]{margin-inline-end:0;margin-inline-start:0.125rem;}" }
|
|
18
18
|
},
|
|
19
19
|
shouldMirrorIconInRTL: {
|
|
20
|
-
true: { name: "
|
|
20
|
+
true: { name: "28w59b", styles: "&:dir(rtl) [data-part=\"toolbar-dropdown-btn-custom-icon\"]{margin-inline-end:0;margin-inline-start:0.125rem;}" }
|
|
21
21
|
}
|
|
22
22
|
}
|
|
23
|
-
}, "toolbar-dropdown-button-
|
|
23
|
+
}, "toolbar-dropdown-button-71fd2f");
|
|
24
24
|
export const ToolbarDropdownButton = createComponent('button')({
|
|
25
25
|
displayName: 'ToolbarDropdownButton',
|
|
26
26
|
Component: ({ icon, shouldMirrorIcon = false, shouldMirrorIconInRTL = false, children, ...elemProps }, ref, Element) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToolbarIconButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/ToolbarIconButton.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAC,mBAAmB,EAAC,MAAM,kBAAkB,CAAC;AAErD,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,mBAAmB,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3F,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,SAAS,KAAK,IAAI,CAAC;IACxD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAED,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"ToolbarIconButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/ToolbarIconButton.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAC,mBAAmB,EAAC,MAAM,kBAAkB,CAAC;AAErD,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,mBAAmB,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3F,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,SAAS,KAAK,IAAI,CAAC;IACxD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAED,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAgEnC,CAAC;AAEH,eAAO,MAAM,iBAAiB,+FA+C5B,CAAC"}
|
|
@@ -7,7 +7,7 @@ import { system } from '@workday/canvas-tokens-web';
|
|
|
7
7
|
import { BaseButton, buttonStencil } from './BaseButton';
|
|
8
8
|
export const toolbarIconButtonStencil = createStencil({
|
|
9
9
|
extends: buttonStencil,
|
|
10
|
-
base: { name: "
|
|
10
|
+
base: { name: "1oxsp1", styles: "box-sizing:border-box;min-width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));padding:0;height:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));--borderRadius-button-a19f67:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-default);--background-button-a19f67:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));&:focus-visible, &.focus{--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);box-shadow:0 0 0 0px var(--cnvs-sys-color-border-transparent), 0 0 0 2px var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));}&:hover, &.hover{--background-button-a19f67:var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);}&:active, &.active{--background-button-a19f67:var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);}&:disabled, &.disabled{--opacity-button-a19f67:var(--cnvs-sys-opacity-disabled);--background-button-a19f67:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-default);}&[aria-pressed='true']{--color-system-icon-c9acc3:var(--cnvs-sys-color-brand-fg-primary-default, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));--background-button-a19f67:var(--cnvs-sys-color-brand-surface-primary-default, oklch(0.6499 0.1912 253.52 / 0.08));&:focus-visible, &.focus{--color-system-icon-c9acc3:var(--cnvs-sys-color-brand-fg-primary-strong, var(--cnvs-brand-primary-dark, oklch(0.4658 0.1562 255.5 / 1)));}&:hover, &.hover{--background-button-a19f67:color-mix(in srgb, var(--cnvs-sys-color-brand-surface-primary-default, oklch(0.6499 0.1912 253.52 / 0.08)) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-surface-hover, 0.08) * 100%));--color-system-icon-c9acc3:var(--cnvs-sys-color-brand-fg-primary-strong, var(--cnvs-brand-primary-dark, oklch(0.4658 0.1562 255.5 / 1)));}&:active, &.active{--background-button-a19f67:color-mix(in srgb, var(--cnvs-sys-color-brand-surface-primary-default, oklch(0.6499 0.1912 253.52 / 0.08)) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-surface-pressed, 0.18) * 100%));--color-system-icon-c9acc3:var(--cnvs-sys-color-brand-fg-primary-strong, var(--cnvs-brand-primary-dark, oklch(0.4658 0.1562 255.5 / 1)));}}" }
|
|
11
11
|
}, "toolbar-icon-button-8c40d9");
|
|
12
12
|
export const ToolbarIconButton = createComponent('button')({
|
|
13
13
|
displayName: 'ToolbarIconButton',
|
|
@@ -4,7 +4,7 @@ import { createContainer, focusRing } from '@workday/canvas-kit-react/common';
|
|
|
4
4
|
import { systemIconStencil } from '@workday/canvas-kit-react/icon';
|
|
5
5
|
import { Box, mergeStyles } from '@workday/canvas-kit-react/layout';
|
|
6
6
|
import { colorSpace, createStencil, px2rem } from '@workday/canvas-kit-styling';
|
|
7
|
-
import { system } from '@workday/canvas-tokens-web';
|
|
7
|
+
import { base, system } from '@workday/canvas-tokens-web';
|
|
8
8
|
import { PillAvatar } from './PillAvatar';
|
|
9
9
|
import { PillCount, pillCountStencil } from './PillCount';
|
|
10
10
|
import { PillIcon } from './PillIcon';
|
|
@@ -16,14 +16,14 @@ export const pillStencil = createStencil({
|
|
|
16
16
|
vars: {
|
|
17
17
|
maxWidth: '',
|
|
18
18
|
},
|
|
19
|
-
base: { name: "
|
|
19
|
+
base: { name: "48hkcj", styles: "box-sizing:border-box;display:initial;flex-direction:row;align-items:center;border-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));font-family:var(--cnvs-sys-font-family-default, \"Roboto\");font-weight:var(--cnvs-sys-font-weight-normal, 400);line-height:var(--cnvs-sys-line-height-subtext-md, 1rem);font-size:var(--cnvs-sys-font-size-subtext-md, 0.75rem);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-md, 0.02rem);box-shadow:none;outline:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:fit-content;padding:0.125rem var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));height:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));position:relative;gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));max-width:var(--maxWidth-pill-089441);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;--background-button-a19f67:var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));--border-button-a19f67:var(--cnvs-sys-color-border-transparent);--label-button-a19f67:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:currentColor;--borderColor-pill-count-d41635:transparent;&:has(span){display:flex;line-height:var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem));}&:hover, &.hover{--background-button-a19f67:color-mix(in srgb, var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05))) , var(--cnvs-base-palette-neutral-1000, oklch(0 0 0 / 1)) calc(0.0392 * 100%));--border-button-a19f67:var(--cnvs-sys-color-border-transparent);--label-button-a19f67:var(--cnvs-sys-color-fg-stronger);--color-system-icon-c9acc3:currentColor;--borderColor-pill-count-d41635:transparent;}&:active, &.active{--background-button-a19f67:color-mix(in srgb, var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05))) , var(--cnvs-base-palette-neutral-1000, oklch(0 0 0 / 1)) calc(0.0745 * 100%));--label-button-a19f67:var(--cnvs-sys-color-fg-stronger);--color-system-icon-c9acc3:currentColor;--borderColor-pill-count-d41635:transparent;}&:focus-visible, &.focus{--border-button-a19f67:var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));--label-button-a19f67:var(--cnvs-sys-color-fg-strong);border-color:var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));--color-system-icon-c9acc3:currentColor;box-shadow:0 0 0 1px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1)), 0 0 0 1px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));}&:disabled, &.disabled{--opacity-button-a19f67:var(--cnvs-sys-opacity-disabled);--background-button-a19f67:var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));--label-button-a19f67:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:currentColor;--backgroundColor-pill-count-d41635:var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));--borderColor-pill-count-d41635:transparent;}" },
|
|
20
20
|
modifiers: {
|
|
21
21
|
variant: {
|
|
22
|
-
readOnly: { name: "
|
|
23
|
-
removable: { name: "
|
|
22
|
+
readOnly: { name: "8htfg", styles: "border:0.0625rem solid var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));cursor:default;--background-button-a19f67:var(--cnvs-sys-color-bg-default);--label-button-a19f67:var(--cnvs-sys-color-fg-default);&:hover, &.hover{border-color:var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));--background-button-a19f67:var(--cnvs-sys-color-bg-default);}&:focus-visible, &.focus{--background-button-a19f67:var(--cnvs-sys-color-bg-default);}&:active, &.active{--background-button-a19f67:var(--cnvs-sys-color-bg-default);}&:disabled, &.disabled{--background-button-a19f67:var(--cnvs-sys-color-bg-default);}" },
|
|
23
|
+
removable: { name: "25wdpe", styles: "&:focus-visible, &.focus{--background-button-a19f67:var(--cnvs-sys-color-bg-alt-default);--border-button-a19f67:var(--cnvs-sys-color-border-input-default);--label-button-a19f67:var(--cnvs-sys-color-fg-strong);box-shadow:none;}&:hover, &.hover{--background-button-a19f67:color-mix(in srgb, var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05))) , var(--cnvs-base-palette-neutral-1000, oklch(0 0 0 / 1)) calc(0.0392 * 100%));--backgroundColor-pill-count-d41635:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));}&:active, &.active{--background-button-a19f67:color-mix(in srgb, var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05))) , var(--cnvs-base-palette-neutral-1000, oklch(0 0 0 / 1)) calc(0.0745 * 100%));--backgroundColor-pill-count-d41635:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));}&:disabled, &.disabled{--background-button-a19f67:var(--cnvs-sys-color-bg-alt-default);--color-system-icon-c9acc3:currentColor;}cursor:default;overflow:revert;position:relative;" }
|
|
24
24
|
}
|
|
25
25
|
}
|
|
26
|
-
}, "pill-
|
|
26
|
+
}, "pill-089441");
|
|
27
27
|
/**
|
|
28
28
|
* By default, a `Pill` renders an interactive element that accepts subcomponents. By "interactive"
|
|
29
29
|
* we mean that the Pill container is a focusable element (a `<button>`). All leading elements
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-react",
|
|
3
|
-
"version": "16.0.0-alpha.
|
|
3
|
+
"version": "16.0.0-alpha.0499-next.0",
|
|
4
4
|
"description": "The parent module that contains all Workday Canvas Kit React components",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -53,10 +53,10 @@
|
|
|
53
53
|
"@tanstack/react-virtual": "^3.13.9",
|
|
54
54
|
"@workday/canvas-colors-web": "^2.0.0",
|
|
55
55
|
"@workday/canvas-expressive-icons-web": "1.0.2",
|
|
56
|
-
"@workday/canvas-kit-popup-stack": "^16.0.0-alpha.
|
|
57
|
-
"@workday/canvas-kit-styling": "^16.0.0-alpha.
|
|
58
|
-
"@workday/canvas-system-icons-web": "5.0.
|
|
59
|
-
"@workday/canvas-tokens-web": "4.4.0
|
|
56
|
+
"@workday/canvas-kit-popup-stack": "^16.0.0-alpha.0499-next.0",
|
|
57
|
+
"@workday/canvas-kit-styling": "^16.0.0-alpha.0499-next.0",
|
|
58
|
+
"@workday/canvas-system-icons-web": "^5.0.3",
|
|
59
|
+
"@workday/canvas-tokens-web": "^4.4.0",
|
|
60
60
|
"@workday/design-assets-types": "^0.3.0",
|
|
61
61
|
"chroma-js": "^2.2.0",
|
|
62
62
|
"csstype": "^3.0.2",
|
|
@@ -69,5 +69,5 @@
|
|
|
69
69
|
"@workday/canvas-accent-icons-web": "^3.0.0",
|
|
70
70
|
"@workday/canvas-applet-icons-web": "^2.0.0"
|
|
71
71
|
},
|
|
72
|
-
"gitHead": "
|
|
72
|
+
"gitHead": "cd5cbb846495120a4bffea4ee17b3b0a482e68c0"
|
|
73
73
|
}
|
package/pill/lib/Pill.tsx
CHANGED
|
@@ -3,7 +3,7 @@ import {createContainer, focusRing} from '@workday/canvas-kit-react/common';
|
|
|
3
3
|
import {systemIconStencil} from '@workday/canvas-kit-react/icon';
|
|
4
4
|
import {Box, BoxProps, mergeStyles} from '@workday/canvas-kit-react/layout';
|
|
5
5
|
import {colorSpace, createStencil, px2rem} from '@workday/canvas-kit-styling';
|
|
6
|
-
import {system} from '@workday/canvas-tokens-web';
|
|
6
|
+
import {base, system} from '@workday/canvas-tokens-web';
|
|
7
7
|
|
|
8
8
|
import {PillAvatar} from './PillAvatar';
|
|
9
9
|
import {PillCount, pillCountStencil} from './PillCount';
|
|
@@ -63,7 +63,7 @@ export const pillStencil = createStencil({
|
|
|
63
63
|
[buttonStencil.vars.background]: colorSpace.darken({
|
|
64
64
|
color: system.legacy.color.surface.alt.default,
|
|
65
65
|
fallback: system.legacy.color.surface.alt.default,
|
|
66
|
-
mixinColor:
|
|
66
|
+
mixinColor: base.legacy.neutral1000,
|
|
67
67
|
mixinValue: '0.0392',
|
|
68
68
|
}),
|
|
69
69
|
[buttonStencil.vars.border]: system.color.border.transparent,
|
|
@@ -75,7 +75,7 @@ export const pillStencil = createStencil({
|
|
|
75
75
|
[buttonStencil.vars.background]: colorSpace.darken({
|
|
76
76
|
color: system.legacy.color.surface.alt.default,
|
|
77
77
|
fallback: system.legacy.color.surface.alt.default,
|
|
78
|
-
mixinColor:
|
|
78
|
+
mixinColor: base.legacy.neutral1000,
|
|
79
79
|
mixinValue: '0.0745',
|
|
80
80
|
}),
|
|
81
81
|
[buttonStencil.vars.label]: system.color.fg.stronger,
|
|
@@ -136,7 +136,7 @@ export const pillStencil = createStencil({
|
|
|
136
136
|
[buttonStencil.vars.background]: colorSpace.darken({
|
|
137
137
|
color: system.legacy.color.surface.alt.default,
|
|
138
138
|
fallback: system.legacy.color.surface.alt.default,
|
|
139
|
-
mixinColor:
|
|
139
|
+
mixinColor: base.legacy.neutral1000,
|
|
140
140
|
mixinValue: '0.0392',
|
|
141
141
|
}),
|
|
142
142
|
[pillCountStencil.vars.backgroundColor]: system.legacy.color.surface.transparent,
|
|
@@ -145,7 +145,7 @@ export const pillStencil = createStencil({
|
|
|
145
145
|
[buttonStencil.vars.background]: colorSpace.darken({
|
|
146
146
|
color: system.legacy.color.surface.alt.default,
|
|
147
147
|
fallback: system.legacy.color.surface.alt.default,
|
|
148
|
-
mixinColor:
|
|
148
|
+
mixinColor: base.legacy.neutral1000,
|
|
149
149
|
mixinValue: '0.0745',
|
|
150
150
|
}),
|
|
151
151
|
[pillCountStencil.vars.backgroundColor]: system.legacy.color.surface.transparent,
|