@workday/canvas-kit-react 15.0.0-alpha.0324-next.0 → 15.0.0-alpha.0325-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/TertiaryButton.tsx +3 -15
- package/common/lib/styles/focusRing.ts +1 -0
- package/dist/commonjs/banner/lib/Banner.js +2 -2
- package/dist/commonjs/breadcrumbs/lib/BreadcrumbsItem.js +1 -1
- package/dist/commonjs/breadcrumbs/lib/BreadcrumbsOverflowButton.js +1 -1
- package/dist/commonjs/button/lib/DeleteButton.js +1 -1
- package/dist/commonjs/button/lib/ExternalHyperlink.js +1 -1
- package/dist/commonjs/button/lib/PrimaryButton.js +2 -2
- package/dist/commonjs/button/lib/SecondaryButton.js +2 -2
- package/dist/commonjs/button/lib/TertiaryButton.d.ts +0 -8
- package/dist/commonjs/button/lib/TertiaryButton.d.ts.map +1 -1
- package/dist/commonjs/button/lib/TertiaryButton.js +23 -25
- package/dist/commonjs/button/lib/ToolbarDropdownButton.js +1 -1
- package/dist/commonjs/button/lib/ToolbarIconButton.js +1 -1
- package/dist/commonjs/checkbox/lib/CheckboxCheck.js +2 -2
- package/dist/commonjs/color-picker/lib/parts/ColorSwatch.js +1 -1
- package/dist/commonjs/common/lib/styles/focusRing.d.ts.map +1 -1
- package/dist/commonjs/common/lib/styles/focusRing.js +1 -0
- package/dist/commonjs/expandable/lib/ExpandableIcon.js +1 -1
- package/dist/commonjs/information-highlight/lib/InformationHighlight.js +6 -6
- package/dist/commonjs/menu/lib/MenuItem.js +1 -1
- package/dist/commonjs/pill/lib/Pill.js +2 -2
- package/dist/commonjs/pill/lib/PillIcon.js +1 -1
- package/dist/commonjs/pill/lib/PillIconButton.js +1 -1
- package/dist/commonjs/segmented-control/lib/SegmentedControlItem.js +1 -1
- package/dist/commonjs/select/lib/SelectInput.js +1 -1
- package/dist/commonjs/tabs/lib/TabsItem.js +1 -1
- package/dist/es6/banner/lib/Banner.js +2 -2
- package/dist/es6/breadcrumbs/lib/BreadcrumbsItem.js +1 -1
- package/dist/es6/breadcrumbs/lib/BreadcrumbsOverflowButton.js +1 -1
- package/dist/es6/button/lib/DeleteButton.js +1 -1
- package/dist/es6/button/lib/ExternalHyperlink.js +1 -1
- package/dist/es6/button/lib/PrimaryButton.js +2 -2
- package/dist/es6/button/lib/SecondaryButton.js +2 -2
- package/dist/es6/button/lib/TertiaryButton.d.ts +0 -8
- package/dist/es6/button/lib/TertiaryButton.d.ts.map +1 -1
- package/dist/es6/button/lib/TertiaryButton.js +23 -25
- package/dist/es6/button/lib/ToolbarDropdownButton.js +1 -1
- package/dist/es6/button/lib/ToolbarIconButton.js +1 -1
- package/dist/es6/checkbox/lib/CheckboxCheck.js +2 -2
- package/dist/es6/color-picker/lib/parts/ColorSwatch.js +1 -1
- package/dist/es6/common/lib/styles/focusRing.d.ts.map +1 -1
- package/dist/es6/common/lib/styles/focusRing.js +1 -0
- package/dist/es6/expandable/lib/ExpandableIcon.js +1 -1
- package/dist/es6/information-highlight/lib/InformationHighlight.js +6 -6
- package/dist/es6/menu/lib/MenuItem.js +1 -1
- package/dist/es6/pill/lib/Pill.js +2 -2
- package/dist/es6/pill/lib/PillIcon.js +1 -1
- package/dist/es6/pill/lib/PillIconButton.js +1 -1
- package/dist/es6/segmented-control/lib/SegmentedControlItem.js +1 -1
- package/dist/es6/select/lib/SelectInput.js +1 -1
- package/dist/es6/tabs/lib/TabsItem.js +1 -1
- package/package.json +5 -5
- package/button/lib/deprecated/v14ButtonStencil.ts +0 -341
- package/button/lib/deprecated/v14SystemIconStencil.ts +0 -109
- package/button/lib/deprecated/v14TertiaryButtonStencil.ts +0 -218
- package/dist/commonjs/button/lib/deprecated/v14ButtonStencil.d.ts +0 -87
- package/dist/commonjs/button/lib/deprecated/v14ButtonStencil.d.ts.map +0 -1
- package/dist/commonjs/button/lib/deprecated/v14ButtonStencil.js +0 -106
- package/dist/commonjs/button/lib/deprecated/v14SystemIconStencil.d.ts +0 -52
- package/dist/commonjs/button/lib/deprecated/v14SystemIconStencil.d.ts.map +0 -1
- package/dist/commonjs/button/lib/deprecated/v14SystemIconStencil.js +0 -48
- package/dist/commonjs/button/lib/deprecated/v14TertiaryButtonStencil.d.ts +0 -112
- package/dist/commonjs/button/lib/deprecated/v14TertiaryButtonStencil.d.ts.map +0 -1
- package/dist/commonjs/button/lib/deprecated/v14TertiaryButtonStencil.js +0 -76
- package/dist/es6/button/lib/deprecated/v14ButtonStencil.d.ts +0 -87
- package/dist/es6/button/lib/deprecated/v14ButtonStencil.d.ts.map +0 -1
- package/dist/es6/button/lib/deprecated/v14ButtonStencil.js +0 -103
- package/dist/es6/button/lib/deprecated/v14SystemIconStencil.d.ts +0 -52
- package/dist/es6/button/lib/deprecated/v14SystemIconStencil.d.ts.map +0 -1
- package/dist/es6/button/lib/deprecated/v14SystemIconStencil.js +0 -45
- package/dist/es6/button/lib/deprecated/v14TertiaryButtonStencil.d.ts +0 -112
- package/dist/es6/button/lib/deprecated/v14TertiaryButtonStencil.d.ts.map +0 -1
- package/dist/es6/button/lib/deprecated/v14TertiaryButtonStencil.js +0 -73
|
@@ -5,7 +5,6 @@ import {system} from '@workday/canvas-tokens-web';
|
|
|
5
5
|
|
|
6
6
|
import {buttonColorPropVars, buttonStencil} from './BaseButton';
|
|
7
7
|
import {Button, ButtonProps} from './Button';
|
|
8
|
-
import {v14TertiaryButtonStencil} from './deprecated/v14TertiaryButtonStencil';
|
|
9
8
|
|
|
10
9
|
/**
|
|
11
10
|
* Extends all the style properties from Box to our buttons as well as props from ButtonProps.
|
|
@@ -17,14 +16,6 @@ export interface TertiaryButtonProps extends ButtonProps {
|
|
|
17
16
|
* Variant has an option for `inverse` which will inverse the styling
|
|
18
17
|
*/
|
|
19
18
|
variant?: 'inverse';
|
|
20
|
-
/**
|
|
21
|
-
* This data attributes affords toggling Tertiary Button styles to pre-DSR styles
|
|
22
|
-
* to look like the former v14 Tertiary Buttons.
|
|
23
|
-
*
|
|
24
|
-
* This functionality is temporary and will be removed in the next major version of Canvas Kit.
|
|
25
|
-
* @default undefined
|
|
26
|
-
*/
|
|
27
|
-
'data-dsr-off'?: boolean;
|
|
28
19
|
}
|
|
29
20
|
|
|
30
21
|
const tertiaryButtonStencil = createStencil({
|
|
@@ -269,7 +260,6 @@ export const TertiaryButton = createComponent('button')({
|
|
|
269
260
|
iconPosition,
|
|
270
261
|
grow,
|
|
271
262
|
cs,
|
|
272
|
-
'data-dsr-off': dataDSROff,
|
|
273
263
|
...elemProps
|
|
274
264
|
}: TertiaryButtonProps,
|
|
275
265
|
ref,
|
|
@@ -282,7 +272,6 @@ export const TertiaryButton = createComponent('button')({
|
|
|
282
272
|
? 'start'
|
|
283
273
|
: 'only'
|
|
284
274
|
: undefined;
|
|
285
|
-
const tertiaryStencil = dataDSROff ? v14TertiaryButtonStencil : tertiaryButtonStencil;
|
|
286
275
|
|
|
287
276
|
return (
|
|
288
277
|
<Button
|
|
@@ -292,13 +281,12 @@ export const TertiaryButton = createComponent('button')({
|
|
|
292
281
|
size={size}
|
|
293
282
|
iconPosition={iconPosition}
|
|
294
283
|
grow={grow}
|
|
295
|
-
data-dsr-off={dataDSROff}
|
|
296
284
|
cs={[
|
|
297
|
-
|
|
298
|
-
grow,
|
|
299
|
-
iconPosition: baseIconPosition,
|
|
285
|
+
tertiaryButtonStencil({
|
|
300
286
|
size,
|
|
301
287
|
variant,
|
|
288
|
+
grow,
|
|
289
|
+
iconPosition: baseIconPosition,
|
|
302
290
|
}),
|
|
303
291
|
cs,
|
|
304
292
|
]}
|
|
@@ -86,6 +86,7 @@ export function focusRing(options: FocusRingOptions = {}) {
|
|
|
86
86
|
separation = 0,
|
|
87
87
|
animate = true,
|
|
88
88
|
// hard code CSS fallbacks for dynamic styles that don't use the static style transform
|
|
89
|
+
/* TODO: Update to `system.color.border.inverse.default` in v15. */
|
|
89
90
|
innerColor = cssVar(system.color.border.inverse.default, base.neutral0),
|
|
90
91
|
outerColor = cssVar(brand.common.focusOutline, 'rgba(8,117,225,1)'),
|
|
91
92
|
inset,
|
|
@@ -15,8 +15,8 @@ exports.bannerStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
|
15
15
|
base: { name: "2m5s3r", 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-medium);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:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));border:0;display:flex;align-items:center;text-align:left;border-start-start-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));border-start-end-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));border-end-start-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));border-end-end-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));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;&: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-brand-common-focus-outline, rgba(8,117,225,1));}" },
|
|
16
16
|
modifiers: {
|
|
17
17
|
hasErrors: {
|
|
18
|
-
true: { name: "a472f", 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-
|
|
19
|
-
false: { name: "pt6tj", 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-
|
|
18
|
+
true: { name: "a472f", 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);}" },
|
|
19
|
+
false: { name: "pt6tj", 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));}" }
|
|
20
20
|
},
|
|
21
21
|
isSticky: {
|
|
22
22
|
true: { name: "2t4u77", styles: "width:13.875rem;border-start-end-radius:0;border-end-end-radius:0;" },
|
|
@@ -15,7 +15,7 @@ exports.breadcrumbsItemStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
|
15
15
|
parts: {
|
|
16
16
|
chevronRightIcon: 'breadcrumbs-item-chevron-right-icon',
|
|
17
17
|
},
|
|
18
|
-
base: { name: "15o6r1", styles: "box-sizing:border-box;align-items:center;display:inline-flex;white-space:nowrap;--size-
|
|
18
|
+
base: { name: "15o6r1", styles: "box-sizing:border-box;align-items:center;display:inline-flex;white-space:nowrap;--size-svg-bca693:var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5, 1.25rem));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-default);[data-part=\"breadcrumbs-item-chevron-right-icon\"]{height:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));justify-content:center;align-items:center;display:inline-flex;:dir(rtl){transform:scaleX(-1);}}" }
|
|
19
19
|
}, "breadcrumbs-item-118728");
|
|
20
20
|
exports.useBreadcrumbsItem = (0, common_1.composeHooks)(collection_1.useOverflowListItemMeasure, collection_1.useListItemRegister);
|
|
21
21
|
exports.BreadcrumbsItem = (0, common_1.createSubcomponent)('li')({
|
|
@@ -16,7 +16,7 @@ exports.breadcrumbsOverflowButtonStencil = (0, canvas_kit_styling_1.createStenci
|
|
|
16
16
|
overflowButton: 'breadcrumbs-overflow-button',
|
|
17
17
|
chevronRightIcon: 'breadcrumbs-overflow-button-chevron-right-icon',
|
|
18
18
|
},
|
|
19
|
-
base: { name: "1iwhld", styles: "box-sizing:border-box;align-items:center;display:flex;--color-system-icon-
|
|
19
|
+
base: { name: "1iwhld", styles: "box-sizing:border-box;align-items:center;display:flex;--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-default);--size-svg-bca693:var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5, 1.25rem));[data-part=\"breadcrumbs-overflow-button-chevron-right-icon\"]{height:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));justify-content:center;align-items:center;display:inline-flex;:dir(rtl){transform:scaleX(-1);}}" }
|
|
20
20
|
}, "breadcrumbs-overflow-button-16df19");
|
|
21
21
|
exports.useBreadcrumbsOverflowButton = (0, common_1.composeHooks)((0, common_1.createElemPropsHook)(useBreadcrumbsModel_1.useBreadcrumbsModel)(() => ({
|
|
22
22
|
'aria-haspopup': true,
|
|
@@ -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: "1u4fau", styles: "box-sizing:border-box;--background-button-c26182:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--borderRadius-button-c26182:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));--label-button-c26182:var(--cnvs-sys-color-fg-inverse);--color-system-icon-
|
|
13
|
+
base: { name: "1u4fau", styles: "box-sizing:border-box;--background-button-c26182:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--borderRadius-button-c26182:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));--label-button-c26182:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--icon-a282d7, var(--cnvs-sys-color-fg-inverse));&:focus-visible, &.focus{--background-button-c26182:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--label-button-c26182:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--icon-328a7e, var(--cnvs-sys-color-fg-inverse));--boxShadowInner-button-c26182:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));--boxShadowOuter-button-c26182: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-c26182: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-c26182:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--icon-d047e0, var(--cnvs-sys-color-fg-inverse));}&:active, &.active{--background-button-c26182: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-c26182:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--icon-dc35d3, var(--cnvs-sys-color-fg-inverse));}&:disabled, &.disabled{--opacity-button-c26182:var(--cnvs-sys-opacity-disabled);--background-button-c26182: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-d319ee, var(--cnvs-sys-color-fg-inverse));--label-button-c26182:var(--cnvs-sys-color-fg-inverse);}" }
|
|
14
14
|
}, "delete-button-413bcc");
|
|
15
15
|
/**
|
|
16
16
|
* Use sparingly for destructive actions that will result in data loss, can’t be undone, or will
|
|
@@ -13,7 +13,7 @@ exports.externalHyperlinkStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
|
13
13
|
parts: {
|
|
14
14
|
externalHyperlinkIcon: 'external-hyperlink-icon',
|
|
15
15
|
},
|
|
16
|
-
base: { name: "1lshtc", styles: "box-sizing:border-box;[data-part=\"external-hyperlink-icon\"]{vertical-align:text-top;--color-system-icon-
|
|
16
|
+
base: { name: "1lshtc", styles: "box-sizing:border-box;[data-part=\"external-hyperlink-icon\"]{vertical-align:text-top;--color-system-icon-c9acc3:currentColor;--size-svg-bca693:1em;width:calc(1em - 0.0625rem);min-width:calc(var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem)) - 0.0625rem);margin-inline-start:calc(var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem)) - 0.125rem);& > svg{min-width:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));min-height:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));}:dir(rtl){transform:rotate(270deg);}}" }
|
|
17
17
|
}, "external-hyperlink-5efdf6");
|
|
18
18
|
/**
|
|
19
19
|
* `ExternalHyperlink`s also have an `inverse` variant. Use this variant when you need to place the
|
|
@@ -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: "4ablh", styles: "box-sizing:border-box;--background-button-c26182: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-c26182:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));--label-button-c26182:var(--cnvs-brand-action-accent, var(--cnvs-sys-color-fg-inverse));--color-system-icon-
|
|
13
|
+
base: { name: "4ablh", styles: "box-sizing:border-box;--background-button-c26182: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-c26182:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));--label-button-c26182:var(--cnvs-brand-action-accent, var(--cnvs-sys-color-fg-inverse));--color-system-icon-c9acc3:var(--icon-a282d7, currentColor);&:focus-visible, &.focus{--background-button-c26182: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-c26182:var(--cnvs-brand-action-accent, var(--cnvs-sys-color-fg-inverse));--boxShadowInner-button-c26182:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));--boxShadowOuter-button-c26182: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-328a7e, currentColor);}&:hover, &.hover{--background-button-c26182: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-c26182:var(--cnvs-brand-action-accent, var(--cnvs-sys-color-fg-inverse));--color-system-icon-c9acc3:var(--icon-d047e0, currentColor);}&:active, &.active{--background-button-c26182: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-c26182:var(--cnvs-brand-action-accent, var(--cnvs-sys-color-fg-inverse));--color-system-icon-c9acc3:var(--icon-dc35d3, currentColor);}&:disabled, &.disabled{--opacity-button-c26182:var(--cnvs-sys-opacity-disabled);--background-button-c26182: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-c26182:var(--cnvs-brand-action-accent, var(--cnvs-sys-color-fg-inverse));--color-system-icon-c9acc3:var(--icon-a282d7, currentColor);}" },
|
|
14
14
|
modifiers: {
|
|
15
15
|
variant: {
|
|
16
16
|
// Inverse Styles
|
|
17
|
-
inverse: { name: "46mfs", styles: "--background-button-c26182:var(--cnvs-brand-action-lightest, var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1))));--borderRadius-button-c26182:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));--label-button-c26182:var(--cnvs-sys-color-fg-strong);--color-system-icon-
|
|
17
|
+
inverse: { name: "46mfs", styles: "--background-button-c26182:var(--cnvs-brand-action-lightest, var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1))));--borderRadius-button-c26182:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));--label-button-c26182:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:var(--icon-a282d7, currentColor);&:hover, &.hover{--background-button-c26182: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-accent-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-accent-hover, 0.18) * 100%));--label-button-c26182:var(--cnvs-sys-color-fg-stronger);--color-system-icon-c9acc3:var(--icon-d047e0, currentColor);}&:focus-visible, &.focus{--background-button-c26182:var(--cnvs-brand-action-lightest, var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1))));--label-button-c26182:var(--cnvs-sys-color-fg-strong);--boxShadowInner-button-c26182:var(--cnvs-sys-color-border-contrast-default);--boxShadowOuter-button-c26182:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));--color-system-icon-c9acc3:var(--icon-328a7e, currentColor);}&:active, &.active{--background-button-c26182: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-accent-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-accent-pressed, 0.36) * 100%));--label-button-c26182:var(--cnvs-sys-color-fg-stronger);--color-system-icon-c9acc3:var(--icon-dc35d3, currentColor);}&:disabled, &.disabled{--opacity-button-c26182:var(--cnvs-sys-opacity-disabled);--background-button-c26182:var(--cnvs-brand-action-lightest, var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1))));--label-button-c26182:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:var(--icon-d319ee, currentColor);}" }
|
|
18
18
|
}
|
|
19
19
|
}
|
|
20
20
|
}, "primary-button-821491");
|
|
@@ -10,10 +10,10 @@ const BaseButton_1 = require("./BaseButton");
|
|
|
10
10
|
const Button_1 = require("./Button");
|
|
11
11
|
const secondaryButtonStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
12
12
|
extends: BaseButton_1.buttonStencil,
|
|
13
|
-
base: { name: "2nqk16", styles: "box-sizing:border-box;--background-button-c26182:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--borderRadius-button-c26182:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));--border-button-c26182:var(--cnvs-sys-color-border-input-default);--label-button-c26182:var(--cnvs-sys-color-fg-default);--color-system-icon-
|
|
13
|
+
base: { name: "2nqk16", styles: "box-sizing:border-box;--background-button-c26182:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--borderRadius-button-c26182:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));--border-button-c26182:var(--cnvs-sys-color-border-input-default);--label-button-c26182:var(--cnvs-sys-color-fg-default);--color-system-icon-c9acc3:var(--icon-a282d7, currentColor);&:focus-visible, &.focus{--background-button-c26182:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));--label-button-c26182:var(--cnvs-sys-color-fg-strong);--boxShadowInner-button-c26182:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));--boxShadowOuter-button-c26182: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-328a7e, currentColor);}&:hover, &.hover{--background-button-c26182:color-mix(in srgb, var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0))) , 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-c26182:var(--cnvs-sys-color-fg-strong);--border-button-c26182:var(--cnvs-sys-color-border-input-hover, var(--cnvs-sys-color-border-input-strong, oklch(0.1595 0.0431 250.87 / 0.7)));--color-system-icon-c9acc3:var(--icon-d047e0, currentColor);}&:active, &.active{--background-button-c26182:color-mix(in srgb, var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0))) , 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-c26182:var(--cnvs-sys-color-fg-strong);--border-button-c26182:var(--cnvs-sys-color-border-input-hover, var(--cnvs-sys-color-border-input-strong, oklch(0.1595 0.0431 250.87 / 0.7)));--color-system-icon-c9acc3:var(--icon-dc35d3, currentColor);}&:disabled, &.disabled{--opacity-button-c26182:var(--cnvs-sys-opacity-disabled);--background-button-c26182:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--label-button-c26182:var(--cnvs-sys-color-fg-default);--color-system-icon-c9acc3:var(--icon-a282d7, currentColor);}" },
|
|
14
14
|
modifiers: {
|
|
15
15
|
variant: {
|
|
16
|
-
inverse: { name: "3l3nfy", styles: "--background-button-c26182:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--border-button-c26182:var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)));--label-button-c26182:var(--cnvs-sys-color-fg-inverse);--color-system-icon-
|
|
16
|
+
inverse: { name: "3l3nfy", styles: "--background-button-c26182:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--border-button-c26182:var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)));--label-button-c26182:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--icon-a282d7, currentColor);&:hover, &.hover{--background-button-c26182:color-mix(in srgb, var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0))) , 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%));--border-button-c26182:var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)));--label-button-c26182:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--icon-d047e0, currentColor);}&:focus-visible, &.focus{--background-button-c26182:var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));--border-button-c26182:var(--cnvs-sys-color-border-transparent);--label-button-c26182:var(--cnvs-sys-color-fg-contrast-default);--boxShadowInner-button-c26182:var(--cnvs-sys-color-border-contrast-default);--boxShadowOuter-button-c26182:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));--color-system-icon-c9acc3:var(--icon-328a7e, currentColor);}&:active, &.active{--background-button-c26182:color-mix(in srgb, var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0))) , 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%));--border-button-c26182:var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)));--label-button-c26182:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--icon-dc35d3, currentColor);}&:disabled, &.disabled{--opacity-button-c26182:var(--cnvs-sys-opacity-disabled);--background-button-c26182:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--label-button-c26182:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--icon-a282d7, currentColor);}" }
|
|
17
17
|
}
|
|
18
18
|
}
|
|
19
19
|
}, "secondary-button-e18eed");
|
|
@@ -9,14 +9,6 @@ export interface TertiaryButtonProps extends ButtonProps {
|
|
|
9
9
|
* Variant has an option for `inverse` which will inverse the styling
|
|
10
10
|
*/
|
|
11
11
|
variant?: 'inverse';
|
|
12
|
-
/**
|
|
13
|
-
* This data attributes affords toggling Tertiary Button styles to pre-DSR styles
|
|
14
|
-
* to look like the former v14 Tertiary Buttons.
|
|
15
|
-
*
|
|
16
|
-
* This functionality is temporary and will be removed in the next major version of Canvas Kit.
|
|
17
|
-
* @default undefined
|
|
18
|
-
*/
|
|
19
|
-
'data-dsr-off'?: boolean;
|
|
20
12
|
}
|
|
21
13
|
export declare const TertiaryButton: import("@workday/canvas-kit-react/common").ElementComponent<"button", TertiaryButtonProps>;
|
|
22
14
|
//# sourceMappingURL=TertiaryButton.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TertiaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/TertiaryButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"TertiaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/TertiaryButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAE7C;;;;GAIG;AACH,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAyOD,eAAO,MAAM,cAAc,4FA+CzB,CAAC"}
|
|
@@ -8,78 +8,77 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
|
8
8
|
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
9
9
|
const BaseButton_1 = require("./BaseButton");
|
|
10
10
|
const Button_1 = require("./Button");
|
|
11
|
-
const v14TertiaryButtonStencil_1 = require("./deprecated/v14TertiaryButtonStencil");
|
|
12
11
|
const tertiaryButtonStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
13
12
|
extends: BaseButton_1.buttonStencil,
|
|
14
13
|
// Base Styles
|
|
15
|
-
base: { name: "
|
|
14
|
+
base: { name: "iuneb", styles: "box-sizing:border-box;padding-inline:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));min-width:auto;border-width:0.125rem;--borderRadius-button-c26182:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));--background-button-c26182:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--label-button-c26182:var(--cnvs-sys-color-fg-default);--color-system-icon-c9acc3:var(--icon-a282d7, currentColor);&:focus-visible, &.focus{--background-button-c26182:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--label-button-c26182:var(--cnvs-sys-color-fg-contrast-default);--color-system-icon-c9acc3:var(--icon-328a7e, currentColor);--border-button-c26182:var(--cnvs-sys-color-border-transparent);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-c26182:color-mix(in srgb, var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0))) , 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-c26182:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);text-decoration:underline;}&:active, &.active{--background-button-c26182:color-mix(in srgb, var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0))) , 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-c26182:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:var(--icon-dc35d3, currentColor);text-decoration:underline;}&:disabled, &.disabled{text-decoration:none;--opacity-button-c26182:var(--cnvs-sys-opacity-disabled);--background-button-c26182:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--label-button-c26182:var(--cnvs-sys-color-fg-default);--color-system-icon-c9acc3:var(--icon-a282d7, currentColor);}" },
|
|
16
15
|
modifiers: {
|
|
17
16
|
// IconPosition Styles
|
|
18
17
|
iconPosition: {
|
|
19
|
-
only: { name: "
|
|
20
|
-
start: { name: "
|
|
21
|
-
end: { name: "
|
|
18
|
+
only: { name: "28b7cf", styles: "padding:0;--color-system-icon-c9acc3:var(--icon-a282d7, var(--cnvs-sys-color-fg-default));&:focus-visible, &.focus{--color-system-icon-c9acc3:var(--icon-328a7e, var(--cnvs-sys-color-fg-strong));}&:hover, &.hover{--color-system-icon-c9acc3:var(--icon-d047e0, var(--cnvs-sys-color-fg-strong));}&:active, &.active{--color-system-icon-c9acc3:var(--icon-dc35d3, var(--cnvs-sys-color-fg-strong));}&:disabled, &.disabled{--opacity-button-c26182:var(--cnvs-sys-opacity-disabled);--color-system-icon-c9acc3:var(--icon-d319ee, var(--cnvs-sys-color-fg-default));}" },
|
|
19
|
+
start: { name: "3ymcc2", styles: "" },
|
|
20
|
+
end: { name: "syko9", styles: "" }
|
|
22
21
|
},
|
|
23
22
|
variant: {
|
|
24
23
|
// Inverse Styles
|
|
25
|
-
inverse: { name: "
|
|
24
|
+
inverse: { name: "32la40", styles: "--background-button-c26182:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--label-button-c26182:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--icon-a282d7, currentColor);&:hover, &.hover{--background-button-c26182:color-mix(in srgb, var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0))) , 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-c26182:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--icon-d047e0, currentColor);}&:focus-visible, &.focus{--background-button-c26182:var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));--label-button-c26182:var(--cnvs-sys-color-fg-contrast-default);--color-system-icon-c9acc3:var(--icon-328a7e, currentColor);box-shadow:0 0 0 2px var(--cnvs-sys-color-border-contrast-default), 0 0 0 4px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));}&:active, &.active{--background-button-c26182:color-mix(in srgb, var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0))) , 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-c26182:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--icon-dc35d3, currentColor);}&:disabled, &.disabled{--opacity-button-c26182:var(--cnvs-sys-opacity-disabled);--background-button-c26182:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--label-button-c26182:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--icon-a282d7, currentColor);}" }
|
|
26
25
|
}
|
|
27
26
|
},
|
|
28
27
|
// Compound Modifier Styles
|
|
29
28
|
compound: [
|
|
30
29
|
{
|
|
31
30
|
modifiers: { size: 'large', iconPosition: 'only' },
|
|
32
|
-
styles: { name: "
|
|
31
|
+
styles: { name: "4dneru", styles: "min-width:var(--cnvs-sys-size-lg, 3rem);" }
|
|
33
32
|
},
|
|
34
33
|
{
|
|
35
34
|
modifiers: { size: 'large', iconPosition: 'start' },
|
|
36
|
-
styles: { name: "
|
|
35
|
+
styles: { name: "2yh5vb", styles: "padding-inline-start:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));padding-inline-end:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));" }
|
|
37
36
|
},
|
|
38
37
|
{
|
|
39
38
|
modifiers: { size: 'large', iconPosition: 'end' },
|
|
40
|
-
styles: { name: "
|
|
39
|
+
styles: { name: "2chj1v", styles: "padding-inline-start:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));padding-inline-end:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));" }
|
|
41
40
|
},
|
|
42
41
|
{
|
|
43
42
|
modifiers: { size: 'medium', iconPosition: 'only' },
|
|
44
|
-
styles: { name: "
|
|
43
|
+
styles: { name: "3pgli2", styles: "min-width:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));" }
|
|
45
44
|
},
|
|
46
45
|
{
|
|
47
46
|
modifiers: { size: 'medium', iconPosition: 'start' },
|
|
48
|
-
styles: { name: "
|
|
47
|
+
styles: { name: "1b5zvh", styles: "padding-inline-start:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));padding-inline-end:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));" }
|
|
49
48
|
},
|
|
50
49
|
{
|
|
51
50
|
modifiers: { size: 'medium', iconPosition: 'end' },
|
|
52
|
-
styles: { name: "
|
|
51
|
+
styles: { name: "2nq0mg", styles: "padding-inline-start:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));padding-inline-end:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));" }
|
|
53
52
|
},
|
|
54
53
|
{
|
|
55
54
|
modifiers: { size: 'small', iconPosition: 'only' },
|
|
56
|
-
styles: { name: "
|
|
55
|
+
styles: { name: "3mxj4v", styles: "min-width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));" }
|
|
57
56
|
},
|
|
58
57
|
{
|
|
59
58
|
modifiers: { size: 'small', iconPosition: 'start' },
|
|
60
|
-
styles: { name: "
|
|
59
|
+
styles: { name: "9g30q", styles: "padding-inline-start:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));padding-inline-end:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));" }
|
|
61
60
|
},
|
|
62
61
|
{
|
|
63
62
|
modifiers: { size: 'small', iconPosition: 'end' },
|
|
64
|
-
styles: { name: "
|
|
63
|
+
styles: { name: "3eqd5u", styles: "padding-inline-start:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));padding-inline-end:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));" }
|
|
65
64
|
},
|
|
66
65
|
{
|
|
67
66
|
modifiers: { size: 'extraSmall', iconPosition: 'only' },
|
|
68
|
-
styles: { name: "
|
|
67
|
+
styles: { name: "2ibq9u", styles: "min-width:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));" }
|
|
69
68
|
},
|
|
70
69
|
{
|
|
71
70
|
modifiers: { size: 'extraSmall', iconPosition: 'start' },
|
|
72
|
-
styles: { name: "
|
|
71
|
+
styles: { name: "1rrz3t", styles: "padding-inline-start:var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));padding-inline-end:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));" }
|
|
73
72
|
},
|
|
74
73
|
{
|
|
75
74
|
modifiers: { size: 'extraSmall', iconPosition: 'end' },
|
|
76
|
-
styles: { name: "
|
|
75
|
+
styles: { name: "btc7c", styles: "padding-inline-start:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));padding-inline-end:var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));" }
|
|
77
76
|
}
|
|
78
77
|
]
|
|
79
|
-
}, "tertiary-button-
|
|
78
|
+
}, "tertiary-button-b70e28");
|
|
80
79
|
exports.TertiaryButton = (0, common_1.createComponent)('button')({
|
|
81
80
|
displayName: 'TertiaryButton',
|
|
82
|
-
Component: ({ children, icon, size = 'medium', variant, iconPosition, grow, cs,
|
|
81
|
+
Component: ({ children, icon, size = 'medium', variant, iconPosition, grow, cs, ...elemProps }, ref, Element) => {
|
|
83
82
|
const baseIconPosition = iconPosition
|
|
84
83
|
? iconPosition
|
|
85
84
|
: icon
|
|
@@ -87,13 +86,12 @@ exports.TertiaryButton = (0, common_1.createComponent)('button')({
|
|
|
87
86
|
? 'start'
|
|
88
87
|
: 'only'
|
|
89
88
|
: undefined;
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
tertiaryStencil({
|
|
93
|
-
grow,
|
|
94
|
-
iconPosition: baseIconPosition,
|
|
89
|
+
return ((0, jsx_runtime_1.jsx)(Button_1.Button, { as: Element, ref: ref, icon: icon, size: size, iconPosition: iconPosition, grow: grow, cs: [
|
|
90
|
+
tertiaryButtonStencil({
|
|
95
91
|
size,
|
|
96
92
|
variant,
|
|
93
|
+
grow,
|
|
94
|
+
iconPosition: baseIconPosition,
|
|
97
95
|
}),
|
|
98
96
|
cs,
|
|
99
97
|
], ...elemProps, children: children }));
|
|
@@ -14,7 +14,7 @@ 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: "3pwyjk", styles: "box-sizing:border-box;padding:0;min-width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));gap:0;--borderRadius-button-c26182:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));--color-system-icon-
|
|
17
|
+
base: { name: "3pwyjk", styles: "box-sizing:border-box;padding:0;min-width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));gap:0;--borderRadius-button-c26182:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));--color-system-icon-c9acc3:var(--icon-a282d7, var(--cnvs-sys-color-fg-default));--background-button-c26182:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));&:focus-visible, &.focus{--background-button-c26182:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--color-system-icon-c9acc3:var(--icon-328a7e, 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-c26182:color-mix(in srgb, var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0))) , 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(--icon-d047e0, var(--cnvs-sys-color-fg-default));}&:active, &.active{--background-button-c26182:color-mix(in srgb, var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0))) , 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(--icon-dc35d3, var(--cnvs-sys-color-fg-strong));}&:disabled, &.disabled{--background-button-c26182:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--opacity-button-c26182:var(--cnvs-sys-opacity-disabled);--color-system-icon-c9acc3:var(--icon-d319ee, 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
20
|
true: { name: "26aa1b", styles: "[data-part=\"toolbar-dropdown-btn-custom-icon\"]{margin-inline-end:0;margin-inline-start:0.125rem;}" }
|
|
@@ -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: "2vy802", 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-c26182:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));--color-system-icon-
|
|
36
|
+
base: { name: "2vy802", 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-c26182:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-default);--background-button-c26182: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-c26182:color-mix(in srgb, var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0))) , 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-fg-strong);}&:active, &.active{--background-button-c26182:color-mix(in srgb, var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0))) , 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-fg-strong);}&:disabled, &.disabled{--opacity-button-c26182:var(--cnvs-sys-opacity-disabled);--background-button-c26182: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-c26182: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-c26182: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-c26182: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',
|
|
@@ -12,13 +12,13 @@ const checkboxCheckStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
|
12
12
|
base: { name: "22q717", styles: "box-sizing:border-box;display:flex;flex-direction:column;max-width:100%;pointer-events:none;transition:transform 200ms ease, opacity 200ms ease;span{margin-inline-start:calc(0.375rem * -1);transition:margin 200ms ease;}opacity:var(--cnvs-sys-opacity-zero);transform:scale(0.5);" },
|
|
13
13
|
modifiers: {
|
|
14
14
|
checked: {
|
|
15
|
-
true: { name: "24hhhs", styles: "--color-system-icon-
|
|
15
|
+
true: { name: "24hhhs", styles: "--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);opacity:var(--cnvs-sys-opacity-full);transform:scale(1);" }
|
|
16
16
|
},
|
|
17
17
|
indeterminate: {
|
|
18
18
|
true: { name: "2gk762", styles: "opacity:var(--cnvs-sys-opacity-full);transform:scale(1);" }
|
|
19
19
|
},
|
|
20
20
|
variant: {
|
|
21
|
-
inverse: { name: "2tivln", styles: "--color-system-icon-
|
|
21
|
+
inverse: { name: "2tivln", styles: "--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)));& > div{background-color:var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));}" }
|
|
22
22
|
}
|
|
23
23
|
}
|
|
24
24
|
}, "checkbox-check-ed2489");
|
|
@@ -12,7 +12,7 @@ exports.colorPickerColorSwatchStencil = (0, canvas_kit_styling_1.createStencil)(
|
|
|
12
12
|
color: '',
|
|
13
13
|
iconColor: '',
|
|
14
14
|
},
|
|
15
|
-
base: { name: "3ly4tk", styles: "box-sizing:border-box;--color-system-icon-
|
|
15
|
+
base: { name: "3ly4tk", styles: "box-sizing:border-box;--color-system-icon-c9acc3:var(--iconColor-color-picker-color-swatch-06964b);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));border-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));background-color:var(--color-color-picker-color-swatch-06964b);display:flex;align-items:center;justify-content:center;& > *{margin:calc(0.125rem * -1);}" },
|
|
16
16
|
modifiers: {
|
|
17
17
|
withShadow: {
|
|
18
18
|
true: { name: "hi8ix", styles: "box-shadow:inset 0px 0px 0px 0.0625rem rgba(0, 0, 0, 0.25);" }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"focusRing.d.ts","sourceRoot":"","sources":["../../../../../common/lib/styles/focusRing.ts"],"names":[],"mappings":"AAIA,UAAU,gBAAgB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AA0CD;;;;;;;;;;;;;;GAcG;AAEH;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,OAAO,GAAE,gBAAqB;;
|
|
1
|
+
{"version":3,"file":"focusRing.d.ts","sourceRoot":"","sources":["../../../../../common/lib/styles/focusRing.ts"],"names":[],"mappings":"AAIA,UAAU,gBAAgB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AA0CD;;;;;;;;;;;;;;GAcG;AAEH;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,OAAO,GAAE,gBAAqB;;EAsBvD"}
|
|
@@ -58,6 +58,7 @@ function calculateFocusRing({ width, separation, inset, innerColor, outerColor,
|
|
|
58
58
|
function focusRing(options = {}) {
|
|
59
59
|
const { width = 2, separation = 0, animate = true,
|
|
60
60
|
// hard code CSS fallbacks for dynamic styles that don't use the static style transform
|
|
61
|
+
/* TODO: Update to `system.color.border.inverse.default` in v15. */
|
|
61
62
|
innerColor = (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.system.color.border.inverse.default, canvas_tokens_web_1.base.neutral0), outerColor = (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.brand.common.focusOutline, 'rgba(8,117,225,1)'), inset, } = options;
|
|
62
63
|
const args = {
|
|
63
64
|
width: width,
|
|
@@ -12,7 +12,7 @@ const useExpandableIcon_1 = require("./hooks/useExpandableIcon");
|
|
|
12
12
|
const useExpandableModel_1 = require("./hooks/useExpandableModel");
|
|
13
13
|
exports.expandableIconStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
14
14
|
extends: icon_1.systemIconStencil,
|
|
15
|
-
base: { name: "1djuqg", styles: "box-sizing:border-box;padding:var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));--color-system-icon-
|
|
15
|
+
base: { name: "1djuqg", styles: "box-sizing:border-box;padding:var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-default);--size-svg-bca693:var(--cnvs-component-system-icon-size-xs, var(--cnvs-sys-space-x4, 1rem));" },
|
|
16
16
|
modifiers: {
|
|
17
17
|
isExpanded: {
|
|
18
18
|
true: { name: "cm4k4", styles: "" },
|
|
@@ -15,16 +15,16 @@ exports.informationHighlightStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
|
15
15
|
base: { name: "3f0mlz", styles: "box-sizing:border-box;display:grid;grid-template-columns:min-content;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem));padding:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));border-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));outline:0.0625rem solid transparent;border-inline-start:var(--cnvs-base-size-50, 0.25rem) solid transparent;" },
|
|
16
16
|
modifiers: {
|
|
17
17
|
informational: {
|
|
18
|
-
low: { name: "2vnnjm", styles: "border-inline-start-color:var(--cnvs-sys-color-border-info-default, var(--cnvs-sys-color-border-primary-default, oklch(0.6023 0.2032 255.68 / 1)));background-color:var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-
|
|
19
|
-
high: { name: "18844m", styles: "border-inline-start-color:var(--cnvs-sys-color-border-info-default, var(--cnvs-sys-color-border-primary-default, oklch(0.6023 0.2032 255.68 / 1)));background-color:var(--cnvs-sys-color-surface-info-default, var(--cnvs-sys-color-bg-info-softest, oklch(0.6499 0.1912 253.52 / 0.08)));& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-
|
|
18
|
+
low: { name: "2vnnjm", styles: "border-inline-start-color:var(--cnvs-sys-color-border-info-default, var(--cnvs-sys-color-border-primary-default, oklch(0.6023 0.2032 255.68 / 1)));background-color:var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-info-default, var(--cnvs-sys-color-fg-primary-default, oklch(0.5198 0.1782 256.11 / 1)));--backgroundColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-info-default, var(--cnvs-sys-color-fg-primary-default, oklch(0.5198 0.1782 256.11 / 1)));}" },
|
|
19
|
+
high: { name: "18844m", styles: "border-inline-start-color:var(--cnvs-sys-color-border-info-default, var(--cnvs-sys-color-border-primary-default, oklch(0.6023 0.2032 255.68 / 1)));background-color:var(--cnvs-sys-color-surface-info-default, var(--cnvs-sys-color-bg-info-softest, oklch(0.6499 0.1912 253.52 / 0.08)));& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-info-default, var(--cnvs-sys-color-fg-primary-default, oklch(0.5198 0.1782 256.11 / 1)));--backgroundColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-info-default, var(--cnvs-sys-color-fg-primary-default, oklch(0.5198 0.1782 256.11 / 1)));}" }
|
|
20
20
|
},
|
|
21
21
|
caution: {
|
|
22
|
-
low: { name: "2vd6i8", styles: "border-inline-start-color:var(--cnvs-sys-color-border-warning, var(--cnvs-sys-color-border-caution-default, oklch(0.7909 0.1711 70.15 / 1)));background-color:var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-
|
|
23
|
-
high: { name: "k0ncp", styles: "border-inline-start-color:var(--cnvs-sys-color-border-warning, var(--cnvs-sys-color-border-caution-default, oklch(0.7909 0.1711 70.15 / 1)));background-color:var(--cnvs-sys-color-surface-warning-default, var(--cnvs-sys-color-static-amber-softest, oklch(0.7982 0.159 92.57 / 0.1)));& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-
|
|
22
|
+
low: { name: "2vd6i8", styles: "border-inline-start-color:var(--cnvs-sys-color-border-warning, var(--cnvs-sys-color-border-caution-default, oklch(0.7909 0.1711 70.15 / 1)));background-color:var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-warning-default, oklch(0.5505 0.1439 50.78 / 1));--backgroundColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-warning-default, oklch(0.5505 0.1439 50.78 / 1));}" },
|
|
23
|
+
high: { name: "k0ncp", styles: "border-inline-start-color:var(--cnvs-sys-color-border-warning, var(--cnvs-sys-color-border-caution-default, oklch(0.7909 0.1711 70.15 / 1)));background-color:var(--cnvs-sys-color-surface-warning-default, var(--cnvs-sys-color-static-amber-softest, oklch(0.7982 0.159 92.57 / 0.1)));& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-warning-default, oklch(0.5505 0.1439 50.78 / 1));--backgroundColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-warning-default, oklch(0.5505 0.1439 50.78 / 1));}" }
|
|
24
24
|
},
|
|
25
25
|
critical: {
|
|
26
|
-
low: { name: "ofmbx", styles: "border-inline-start-color:var(--cnvs-sys-color-border-danger, var(--cnvs-sys-color-border-critical-default, oklch(0.6495 0.2369 30.04 / 1)));background-color:var(--cnvs-sys-color-surface-danger-default, oklch(0.6289 0.2567 29.11 / 0.04));& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-
|
|
27
|
-
high: { name: "hkgiw", styles: "border-inline-start-color:var(--cnvs-sys-color-border-danger, var(--cnvs-sys-color-border-critical-default, oklch(0.6495 0.2369 30.04 / 1)));background-color:var(--cnvs-sys-color-surface-danger-default, oklch(0.6289 0.2567 29.11 / 0.04));& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-
|
|
26
|
+
low: { name: "ofmbx", styles: "border-inline-start-color:var(--cnvs-sys-color-border-danger, var(--cnvs-sys-color-border-critical-default, oklch(0.6495 0.2369 30.04 / 1)));background-color:var(--cnvs-sys-color-surface-danger-default, oklch(0.6289 0.2567 29.11 / 0.04));& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-danger-default, var(--cnvs-sys-color-fg-critical-default, oklch(0.5342 0.2172 29.53 / 1)));--backgroundColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-danger-default, var(--cnvs-sys-color-fg-critical-default, oklch(0.5342 0.2172 29.53 / 1)));}" },
|
|
27
|
+
high: { name: "hkgiw", styles: "border-inline-start-color:var(--cnvs-sys-color-border-danger, var(--cnvs-sys-color-border-critical-default, oklch(0.6495 0.2369 30.04 / 1)));background-color:var(--cnvs-sys-color-surface-danger-default, oklch(0.6289 0.2567 29.11 / 0.04));& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-danger-default, var(--cnvs-sys-color-fg-critical-default, oklch(0.5342 0.2172 29.53 / 1)));--backgroundColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-danger-default, var(--cnvs-sys-color-fg-critical-default, oklch(0.5342 0.2172 29.53 / 1)));}" }
|
|
28
28
|
}
|
|
29
29
|
}
|
|
30
30
|
}, "information-highlight-689af3");
|
|
@@ -40,7 +40,7 @@ exports.menuItemStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
|
40
40
|
icon: 'menu-item-icon',
|
|
41
41
|
selected: 'menu-item-selected',
|
|
42
42
|
},
|
|
43
|
-
base: { name: "3u111y", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));display:flex;align-items:center;width:100%;gap:var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem));padding:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem)) var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));cursor:pointer;color:var(--cnvs-sys-color-fg-default);border-width:0;border-radius:var(--cnvs-sys-shape-xxl, var(--cnvs-sys-shape-x6, 1.5rem));text-align:start;transition:background-color 80ms, color 80ms;background-color:inherit;min-height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));overflow-wrap:anywhere;--color-system-icon-
|
|
43
|
+
base: { name: "3u111y", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));display:flex;align-items:center;width:100%;gap:var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem));padding:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem)) var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));cursor:pointer;color:var(--cnvs-sys-color-fg-default);border-width:0;border-radius:var(--cnvs-sys-shape-xxl, var(--cnvs-sys-shape-x6, 1.5rem));text-align:start;transition:background-color 80ms, color 80ms;background-color:inherit;min-height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));overflow-wrap:anywhere;--color-system-icon-c9acc3:currentColor;& :where([data-part=\"menu-item-selected\"]){transition:opacity 80ms linear;opacity:var(--cnvs-sys-opacity-zero);}&:where(:has(span)){display:flex;}&[aria-selected=true]{color:var(--cnvs-sys-color-brand-fg-primary-strong, var(--cnvs-brand-primary-dark, oklch(0.4658 0.1562 255.5 / 1)));background-color:var(--cnvs-sys-color-brand-surface-primary-strong, oklch(0.6152 0.2108 256.1 / 0.11));& :where([data-part=\"menu-item-selected\"]){opacity:var(--cnvs-sys-opacity-full);}&:where(.focus, :focus-visible){--color-system-icon-c9acc3:currentColor;outline:none;background-color:var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));color:var(--cnvs-sys-color-fg-inverse, var(--cnvs-brand-primary-accent));}}&:is(.hover, :hover){color:var(--cnvs-sys-color-fg-strong);background-color:var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));}&:is(.focus, :focus-visible){color:var(--cnvs-sys-color-fg-inverse, var(--cnvs-brand-primary-accent));background-color:var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));outline:0.125rem solid transparent;outline-offset:-0.125rem;}&:is(:disabled, [aria-disabled=true]){cursor:default;opacity:var(--cnvs-sys-opacity-disabled);&:where(.hover, :hover, [aria-selected=true]){background:none;}&:where(.focus, :focus-visible){background-color:var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));opacity:var(--cnvs-sys-opacity-disabled);}}& :where([data-part=\"menu-item-text\"]){flex-grow:1;align-self:center;}& :where([data-part=\"menu-item-icon\"]){align-self:start;}" }
|
|
44
44
|
}, "menu-item-58a446");
|
|
45
45
|
const MenuItemIcon = (elemProps) => {
|
|
46
46
|
return (0, jsx_runtime_1.jsx)(icon_1.SystemIcon, { ...exports.menuItemStencil.parts.icon, ...elemProps });
|
|
@@ -19,11 +19,11 @@ exports.pillStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
|
19
19
|
vars: {
|
|
20
20
|
maxWidth: '',
|
|
21
21
|
},
|
|
22
|
-
base: { name: "1rxill", 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);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));line-height:var(--cnvs-sys-line-height-subtext-sm, var(--cnvs-sys-line-height-subtext-small, 1rem));box-shadow:none;outline:none;font-weight:var(--cnvs-sys-font-weight-medium);-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-4e10dd);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;--background-button-c26182:var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09)));--border-button-c26182:var(--cnvs-sys-color-border-transparent);--label-button-c26182:var(--cnvs-sys-color-fg-strong);--color-system-icon-
|
|
22
|
+
base: { name: "1rxill", 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);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));line-height:var(--cnvs-sys-line-height-subtext-sm, var(--cnvs-sys-line-height-subtext-small, 1rem));box-shadow:none;outline:none;font-weight:var(--cnvs-sys-font-weight-medium);-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-4e10dd);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;--background-button-c26182:var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09)));--border-button-c26182:var(--cnvs-sys-color-border-transparent);--label-button-c26182: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-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));}&:hover, &.hover{--background-button-c26182:color-mix(in srgb, var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09))) , 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%));--border-button-c26182:var(--cnvs-sys-color-border-transparent);--label-button-c26182:var(--cnvs-sys-color-fg-stronger);--color-system-icon-c9acc3:currentColor;--borderColor-pill-count-d41635:transparent;}&:active, &.active{--background-button-c26182:color-mix(in srgb, var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09))) , 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-c26182:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:currentColor;--borderColor-pill-count-d41635:transparent;}&:focus-visible, &.focus{--border-button-c26182:var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));--label-button-c26182: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{--background-button-c26182:var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09)));--label-button-c26182:var(--cnvs-sys-color-fg-disabled);--color-system-icon-c9acc3:currentColor;--backgroundColor-pill-count-d41635:var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09)));--borderColor-pill-count-d41635:transparent;}" },
|
|
23
23
|
modifiers: {
|
|
24
24
|
variant: {
|
|
25
25
|
readOnly: { name: "xxt02", 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-c26182:var(--cnvs-sys-color-bg-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-c26182:var(--cnvs-sys-color-bg-default);}&:focus-visible, &.focus{--background-button-c26182:var(--cnvs-sys-color-bg-default);}&:active, &.active{--background-button-c26182:var(--cnvs-sys-color-bg-default);}&:disabled, &.disabled{--background-button-c26182:var(--cnvs-sys-color-bg-default);}" },
|
|
26
|
-
removable: { name: "2gp73a", styles: "&:focus-visible, &.focus{--background-button-c26182:var(--cnvs-sys-color-bg-alt-default);--border-button-c26182:var(--cnvs-sys-color-border-input-default);--label-button-c26182:var(--cnvs-sys-color-fg-strong);box-shadow:none;}&:hover, &.hover{--background-button-c26182:color-mix(in srgb, var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09))) , 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%));--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-c26182:color-mix(in srgb, var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09))) , 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%));--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-c26182:var(--cnvs-sys-color-bg-alt-default);--color-system-icon-
|
|
26
|
+
removable: { name: "2gp73a", styles: "&:focus-visible, &.focus{--background-button-c26182:var(--cnvs-sys-color-bg-alt-default);--border-button-c26182:var(--cnvs-sys-color-border-input-default);--label-button-c26182:var(--cnvs-sys-color-fg-strong);box-shadow:none;}&:hover, &.hover{--background-button-c26182:color-mix(in srgb, var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09))) , 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%));--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-c26182:color-mix(in srgb, var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09))) , 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%));--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-c26182:var(--cnvs-sys-color-bg-alt-default);--color-system-icon-c9acc3:currentColor;}cursor:default;overflow:revert;position:relative;" }
|
|
27
27
|
}
|
|
28
28
|
}
|
|
29
29
|
}, "pill-4e10dd");
|
|
@@ -11,7 +11,7 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
|
11
11
|
const usePillModel_1 = require("./usePillModel");
|
|
12
12
|
exports.pillIconStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
13
13
|
extends: icon_1.systemIconStencil,
|
|
14
|
-
base: { name: "2fvlna", styles: "box-sizing:border-box;margin-inline-start:calc(var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem)) * -1);--size-
|
|
14
|
+
base: { name: "2fvlna", styles: "box-sizing:border-box;margin-inline-start:calc(var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem)) * -1);--size-svg-bca693:var(--cnvs-component-system-icon-size-sm, 1.125rem);flex:0 0 auto;" }
|
|
15
15
|
}, "pill-icon-ded2a2");
|
|
16
16
|
exports.PillIcon = (0, common_1.createSubcomponent)('span')({
|
|
17
17
|
modelHook: usePillModel_1.usePillModel,
|