@workday/canvas-kit-react 10.3.1 → 10.3.4
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/common/README.md +32 -14
- package/common/lib/styles/focusRing.ts +4 -17
- package/dist/commonjs/avatar/lib/Avatar.js +1 -1
- package/dist/commonjs/banner/lib/Banner.js +1 -1
- package/dist/commonjs/button/lib/BaseButton.js +22 -22
- package/dist/commonjs/button/lib/DeleteButton.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.js +15 -15
- package/dist/commonjs/button/lib/ToolbarDropdownButton.js +6 -1
- package/dist/commonjs/button/lib/ToolbarIconButton.js +6 -1
- package/dist/commonjs/button/lib/deprecated_Button.js +2 -2
- package/dist/commonjs/checkbox/lib/Checkbox.js +14 -2
- package/dist/commonjs/common/lib/AccessibleHide.js +1 -1
- package/dist/commonjs/common/lib/CanvasProvider.js +1 -1
- package/dist/commonjs/common/lib/styles/focusRing.d.ts.map +1 -1
- package/dist/commonjs/common/lib/styles/focusRing.js +5 -16
- package/dist/commonjs/radio/lib/Radio.js +17 -3
- package/dist/commonjs/select/lib/Select.js +1 -1
- package/dist/commonjs/switch/lib/Switch.js +2 -2
- package/dist/commonjs/tabs/lib/TabsItem.js +1 -1
- package/dist/es6/avatar/lib/Avatar.js +1 -1
- package/dist/es6/banner/lib/Banner.js +1 -1
- package/dist/es6/button/lib/BaseButton.js +22 -22
- package/dist/es6/button/lib/DeleteButton.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.js +15 -15
- package/dist/es6/button/lib/ToolbarDropdownButton.js +6 -1
- package/dist/es6/button/lib/ToolbarIconButton.js +6 -1
- package/dist/es6/button/lib/deprecated_Button.js +2 -2
- package/dist/es6/checkbox/lib/Checkbox.js +14 -2
- package/dist/es6/common/lib/AccessibleHide.js +1 -1
- package/dist/es6/common/lib/CanvasProvider.js +1 -1
- package/dist/es6/common/lib/styles/focusRing.d.ts.map +1 -1
- package/dist/es6/common/lib/styles/focusRing.js +5 -16
- package/dist/es6/radio/lib/Radio.js +17 -3
- package/dist/es6/select/lib/Select.js +1 -1
- package/dist/es6/switch/lib/Switch.js +2 -2
- package/dist/es6/tabs/lib/TabsItem.js +1 -1
- package/package.json +4 -4
package/common/README.md
CHANGED
|
@@ -10,16 +10,32 @@ yarn add @workday/canvas-kit-react
|
|
|
10
10
|
|
|
11
11
|
Includes:
|
|
12
12
|
|
|
13
|
-
- [
|
|
14
|
-
- [
|
|
15
|
-
- [
|
|
16
|
-
- [
|
|
17
|
-
- [
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
- [
|
|
21
|
-
|
|
22
|
-
- [
|
|
13
|
+
- [Canvas Kit Common](#canvas-kit-common)
|
|
14
|
+
- [Installation](#installation)
|
|
15
|
+
- [CanvasProvider](#canvasprovider)
|
|
16
|
+
- [Storybook Decorator](#storybook-decorator)
|
|
17
|
+
- [Input Provider](#input-provider)
|
|
18
|
+
- [Definitions](#definitions)
|
|
19
|
+
- [Usage](#usage)
|
|
20
|
+
- [Static Properties](#static-properties)
|
|
21
|
+
- [`InputTypes`](#inputtypes)
|
|
22
|
+
- [Component Props](#component-props)
|
|
23
|
+
- [Required](#required)
|
|
24
|
+
- [Optional](#optional)
|
|
25
|
+
- [`provideIntent: boolean`](#provideintent-boolean)
|
|
26
|
+
- [`container: HTMLElement | React.RefObject<HTMLElement>`](#container-htmlelement--reactrefobjecthtmlelement)
|
|
27
|
+
- [Storybook Decorator](#storybook-decorator-1)
|
|
28
|
+
- [Theming](#theming)
|
|
29
|
+
- [Bidirectionality](#bidirectionality)
|
|
30
|
+
- [Component Functions](#component-functions)
|
|
31
|
+
- [`createComponent`](#createcomponent)
|
|
32
|
+
- [`ExtractProps`](#extractprops)
|
|
33
|
+
- [Common Hooks](#common-hooks)
|
|
34
|
+
- [useUniqueId](#useuniqueid)
|
|
35
|
+
- [Utility Functions](#utility-functions)
|
|
36
|
+
- [generateUniqueId](#generateuniqueid)
|
|
37
|
+
- [setUniqueSeed](#setuniqueseed)
|
|
38
|
+
- [resetUniqueIdCount](#resetuniqueidcount)
|
|
23
39
|
|
|
24
40
|
## CanvasProvider
|
|
25
41
|
|
|
@@ -71,7 +87,7 @@ MyStory.decorators = [CanvasProviderDecorator];
|
|
|
71
87
|
### Input Provider
|
|
72
88
|
|
|
73
89
|
This is a higher order (wrapping) component for providing css-referencable data attributes for the
|
|
74
|
-
users current input. Focus outlines are required for
|
|
90
|
+
users current input. Focus outlines are required for accessibility, but they can be unnecessary
|
|
75
91
|
visual noise when using a mouse. This allows us to hide focus outlines (as desired) while the user
|
|
76
92
|
is interacting with components using a mouse, touch, etc. and show them when keyboard navigation
|
|
77
93
|
begins. This logic is heavily influenced by [what-input](https://github.com/ten1seven/what-input).
|
|
@@ -344,7 +360,7 @@ this example, `onClick` doesn't exist on `MyComponent`, but since `MyComponent`
|
|
|
344
360
|
If we inspect the `MyNewComponentProps` type, it will return the following:
|
|
345
361
|
|
|
346
362
|
```tsx
|
|
347
|
-
MyComponentProps & React.HTMLAttributes<HTMLElement
|
|
363
|
+
MyComponentProps & React.HTMLAttributes<HTMLElement>;
|
|
348
364
|
```
|
|
349
365
|
|
|
350
366
|
Inside Canvas Kit components, we use `ExtractProps` when we need to extend from the interfaces of
|
|
@@ -377,9 +393,11 @@ be returned since there is not HTML attribute interface associated with `Compone
|
|
|
377
393
|
|
|
378
394
|
### useUniqueId
|
|
379
395
|
|
|
380
|
-
A hook to generate a unique identifier for an element
|
|
396
|
+
A hook to generate a unique identifier for an element – most commonly used for accessibility. The
|
|
381
397
|
hook will generate a unique id the first render and always return the same id every render. This
|
|
382
|
-
uses [generateUniqueId](#generateuniqueid) internally.
|
|
398
|
+
uses [generateUniqueId](#generateuniqueid) internally. You should use `useUniqueId` when you need to
|
|
399
|
+
create a unique ID within a component's render loop. Otherwise, you should opt for
|
|
400
|
+
`generateUniqueId`.
|
|
383
401
|
|
|
384
402
|
```tsx
|
|
385
403
|
const MyComponent = () => {
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {canvas} from '@workday/canvas-kit-react/tokens';
|
|
1
|
+
import {Theme, CSSObject} from '@emotion/react';
|
|
3
2
|
import {cssVar} from '@workday/canvas-kit-styling';
|
|
4
|
-
import {
|
|
3
|
+
import {base, brand} from '@workday/canvas-tokens-web';
|
|
5
4
|
|
|
6
5
|
interface FocusRingOptions {
|
|
7
6
|
width?: number;
|
|
@@ -21,7 +20,6 @@ interface FocusRingOptions {
|
|
|
21
20
|
function calculateFocusRing({
|
|
22
21
|
width,
|
|
23
22
|
separation,
|
|
24
|
-
animate,
|
|
25
23
|
inset,
|
|
26
24
|
innerColor,
|
|
27
25
|
outerColor,
|
|
@@ -57,15 +55,6 @@ function calculateFocusRing({
|
|
|
57
55
|
break;
|
|
58
56
|
}
|
|
59
57
|
|
|
60
|
-
if (animate) {
|
|
61
|
-
const fadeIn = keyframes({
|
|
62
|
-
'0%': {boxShadow},
|
|
63
|
-
'100%': {boxShadow},
|
|
64
|
-
});
|
|
65
|
-
|
|
66
|
-
return {animation: `${fadeIn} 100ms`, boxShadow};
|
|
67
|
-
}
|
|
68
|
-
|
|
69
58
|
return {boxShadow};
|
|
70
59
|
}
|
|
71
60
|
|
|
@@ -97,10 +86,8 @@ export function focusRing(options: FocusRingOptions = {}, theme?: Theme): CSSObj
|
|
|
97
86
|
width = 2,
|
|
98
87
|
separation = 0,
|
|
99
88
|
animate = true,
|
|
100
|
-
innerColor =
|
|
101
|
-
outerColor =
|
|
102
|
-
? theme.canvas.palette.common.focusOutline
|
|
103
|
-
: defaultCanvasTheme.palette.common.focusOutline,
|
|
89
|
+
innerColor = base.frenchVanilla100,
|
|
90
|
+
outerColor = brand.common.focusOutline,
|
|
104
91
|
inset,
|
|
105
92
|
} = options;
|
|
106
93
|
|
|
@@ -51,7 +51,7 @@ const StyledContainer = common_1.styled('button', {
|
|
|
51
51
|
'&:not([disabled])': {
|
|
52
52
|
'&:focus': {
|
|
53
53
|
outline: 'none',
|
|
54
|
-
...{
|
|
54
|
+
...common_1.focusRing({ separation: 2 }),
|
|
55
55
|
},
|
|
56
56
|
},
|
|
57
57
|
...common_1.hideMouseFocus,
|
|
@@ -16,7 +16,7 @@ const styles = {
|
|
|
16
16
|
transition: 'background-color 120ms',
|
|
17
17
|
'&:focus': {
|
|
18
18
|
outline: 'none',
|
|
19
|
-
...{
|
|
19
|
+
...common_1.focusRing({ separation: 2 }),
|
|
20
20
|
},
|
|
21
21
|
...common_1.hideMouseFocus,
|
|
22
22
|
};
|
|
@@ -31,16 +31,16 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
|
31
31
|
* Temporary css variables to be used across all Buttons.
|
|
32
32
|
*/
|
|
33
33
|
exports.buttonVars = {
|
|
34
|
-
default: canvas_kit_styling_1.createVars({ id: "
|
|
35
|
-
hover: canvas_kit_styling_1.createVars({ id: "
|
|
36
|
-
active: canvas_kit_styling_1.createVars({ id: "
|
|
37
|
-
focus: canvas_kit_styling_1.createVars({ id: "
|
|
38
|
-
disabled: canvas_kit_styling_1.createVars({ id: "
|
|
34
|
+
default: canvas_kit_styling_1.createVars({ id: "cnvs-button-default", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
|
|
35
|
+
hover: canvas_kit_styling_1.createVars({ id: "cnvs-button-hover", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
|
|
36
|
+
active: canvas_kit_styling_1.createVars({ id: "cnvs-button-active", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
|
|
37
|
+
focus: canvas_kit_styling_1.createVars({ id: "cnvs-button-focus", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
|
|
38
|
+
disabled: canvas_kit_styling_1.createVars({ id: "cnvs-button-disabled", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
|
|
39
39
|
};
|
|
40
40
|
/**
|
|
41
41
|
* Base styles for Buttons.
|
|
42
42
|
*/
|
|
43
|
-
const baseButtonStyles = canvas_kit_styling_1.createStyles({ name: "
|
|
43
|
+
const baseButtonStyles = canvas_kit_styling_1.createStyles({ name: "ejxkmr", styles: "font-family:\"Roboto\", \"Helvetica Neue\", \"Helvetica\", Arial, sans-serif;font-size:0.875rem;line-height:normal;letter-spacing:0.015rem;font-weight:bold;background-color:var(--cnvs-button-default-background, transparent);color:var(--cnvs-button-default-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400));border-width:1px;border-style:solid;gap:var(--cnvs-sys-space-x2, calc(0.25rem * 2));border-color:var(--cnvs-button-default-border, transparent);cursor:pointer;display:inline-flex;box-shadow:none;align-items:center;justify-content:center;box-sizing:border-box;outline:2px transparent;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-radius:var(--cnvs-button-default-borderRadius, var(--cnvs-sys-shape-round));position:relative;vertical-align:middle;overflow:hidden;transition:box-shadow 120ms linear, border 120ms linear, background-color 120ms linear, color 120ms linear;&:disabled, &:disabled:active, &.disabled{cursor:default;box-shadow:none;opacity:var(--cnvs-button-disabled-opacity, 1);}& span .wd-icon-fill{transition-duration:40ms;fill:var(--cnvs-button-default-icon, var(--cnvs-base-palette-black-pepper-400));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--cnvs-button-default-icon, var(--cnvs-base-palette-black-pepper-400));}&:focus-visible, &.focus{background-color:var(--cnvs-button-focus-background, transparent);border-color:var(--cnvs-button-focus-border, transparent);color:var(--cnvs-button-focus-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400));& span .wd-icon-fill{fill:var(--cnvs-button-focus-icon, var(--cnvs-base-palette-black-pepper-400));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--cnvs-button-focus-icon, var(--cnvs-base-palette-black-pepper-400));}box-shadow:0 0 0 2px var(--cnvs-button-focus-boxShadowInner, var(--cnvs-base-palette-french-vanilla-100)), 0 0 0 4px var(--cnvs-button-focus-boxShadowOuter, var(--cnvs-brand-primary-base));}&:hover, &.hover{background-color:var(--cnvs-button-hover-background, var(--cnvs-base-palette-black-pepper-500));border-color:var(--cnvs-button-hover-border, transparent);color:var(--cnvs-button-hover-label-emotion-safe, var(--cnvs-base-palette-black-pepper-500));& span .wd-icon-fill{fill:var(--cnvs-button-hover-icon, var(--cnvs-base-palette-black-pepper-500));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--cnvs-button-hover-icon, var(--cnvs-base-palette-black-pepper-500));}}&:hover:active{transition-duration:40ms;}&:active, &.active{background-color:var(--cnvs-button-active-background, transparent);border-color:var(--cnvs-button-active-border, transparent);color:var(--cnvs-button-active-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400));& span .wd-icon-fill{fill:var(--cnvs-button-active-icon, var(--cnvs-base-palette-black-pepper-400));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--cnvs-button-active-icon, var(--cnvs-base-palette-black-pepper-400));}}&:disabled, &.disabled{background-color:var(--cnvs-button-disabled-background, transparent);border-color:var(--cnvs-button-disabled-border, transparent);color:var(--cnvs-button-disabled-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400));& span .wd-icon-fill{fill:var(--cnvs-button-disabled-icon, var(--cnvs-base-palette-black-pepper-400));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--cnvs-button-disabled-icon, var(--cnvs-base-palette-black-pepper-400));}}" });
|
|
44
44
|
/**
|
|
45
45
|
* Button modifiers that will overwrite the base styles of Buttons.
|
|
46
46
|
* - `Size`: These modifiers will dictate a size of a Button and has a set of styles to associated with it.
|
|
@@ -49,24 +49,24 @@ const baseButtonStyles = canvas_kit_styling_1.createStyles({ name: "tlms2", styl
|
|
|
49
49
|
*/
|
|
50
50
|
exports.buttonModifiers = canvas_kit_styling_1.createModifiers({
|
|
51
51
|
size: {
|
|
52
|
-
large: canvas_kit_styling_1.createStyles({ name: "
|
|
53
|
-
medium: canvas_kit_styling_1.createStyles({ name: "
|
|
54
|
-
small: canvas_kit_styling_1.createStyles({ name: "
|
|
55
|
-
extraSmall: canvas_kit_styling_1.createStyles({ name: "
|
|
52
|
+
large: canvas_kit_styling_1.createStyles({ name: "1vuu82a", styles: "font-size:var(--cnvs-sys-space-x4, calc(0.25rem * 4));line-height:var(--cnvs-sys-space-x6, calc(0.25rem * 6));letter-spacing:0.01rem;height:48px;padding-inline:var(--cnvs-sys-space-x8, calc(0.25rem * 8));min-width:112px;" }),
|
|
53
|
+
medium: canvas_kit_styling_1.createStyles({ name: "1tv5kp2", styles: "font-size:0.875rem;letter-spacing:0.015rem;min-width:96px;padding-inline:var(--cnvs-sys-space-x6, calc(0.25rem * 6));height:var(--cnvs-sys-space-x10, calc(0.25rem * 10));" }),
|
|
54
|
+
small: canvas_kit_styling_1.createStyles({ name: "1bibd9a", styles: "font-size:0.875rem;letter-spacing:0.015rem;height:var(--cnvs-sys-space-x8, calc(0.25rem * 8));min-width:var(--cnvs-sys-space-x20, calc(0.25rem * 20));padding-inline:var(--cnvs-sys-space-x4, calc(0.25rem * 4));gap:var(--cnvs-sys-space-x1, 0.25rem);" }),
|
|
55
|
+
extraSmall: canvas_kit_styling_1.createStyles({ name: "jxl8ry", styles: "font-size:0.75rem;line-height:var(--cnvs-sys-space-x4, calc(0.25rem * 4));letter-spacing:0.02rem;height:var(--cnvs-sys-space-x6, calc(0.25rem * 6));min-width:auto;padding-inline:var(--cnvs-sys-space-x3, calc(0.25rem * 3));gap:var(--cnvs-sys-space-x1, 0.25rem);" }),
|
|
56
56
|
},
|
|
57
57
|
iconPosition: {
|
|
58
|
-
largeOnly: canvas_kit_styling_1.createStyles({ name: "
|
|
59
|
-
largeStart: canvas_kit_styling_1.createStyles({ name: "
|
|
60
|
-
largeEnd: canvas_kit_styling_1.createStyles({ name: "
|
|
61
|
-
mediumOnly: canvas_kit_styling_1.createStyles({ name: "
|
|
62
|
-
mediumStart: canvas_kit_styling_1.createStyles({ name: "
|
|
63
|
-
mediumEnd: canvas_kit_styling_1.createStyles({ name: "
|
|
64
|
-
smallOnly: canvas_kit_styling_1.createStyles({ name: "
|
|
65
|
-
smallStart: canvas_kit_styling_1.createStyles({ name: "
|
|
66
|
-
smallEnd: canvas_kit_styling_1.createStyles({ name: "
|
|
67
|
-
extraSmallOnly: canvas_kit_styling_1.createStyles({ name: "
|
|
68
|
-
extraSmallStart: canvas_kit_styling_1.createStyles({ name: "
|
|
69
|
-
extraSmallEnd: canvas_kit_styling_1.createStyles({ name: "
|
|
58
|
+
largeOnly: canvas_kit_styling_1.createStyles({ name: "17x7zv9", styles: "padding:0;min-width:calc(var(--cnvs-sys-space-x4, calc(0.25rem * 4)) * 3);" }),
|
|
59
|
+
largeStart: canvas_kit_styling_1.createStyles({ name: "6nuy87", styles: "padding-inline-start:var(--cnvs-sys-space-x6, calc(0.25rem * 6));padding-inline-end:var(--cnvs-sys-space-x8, calc(0.25rem * 8));" }),
|
|
60
|
+
largeEnd: canvas_kit_styling_1.createStyles({ name: "sco5n0", styles: "padding-inline-start:var(--cnvs-sys-space-x8, calc(0.25rem * 8));padding-inline-end:var(--cnvs-sys-space-x6, calc(0.25rem * 6));" }),
|
|
61
|
+
mediumOnly: canvas_kit_styling_1.createStyles({ name: "184b2d3", styles: "padding:0;min-width:var(--cnvs-sys-space-x10, calc(0.25rem * 10));" }),
|
|
62
|
+
mediumStart: canvas_kit_styling_1.createStyles({ name: "1spsu3s", styles: "padding-inline-start:calc(var(--cnvs-sys-space-x1, 0.25rem) * 5);padding-inline-end:var(--cnvs-sys-space-x6, calc(0.25rem * 6));" }),
|
|
63
|
+
mediumEnd: canvas_kit_styling_1.createStyles({ name: "aawort", styles: "padding-inline-start:var(--cnvs-sys-space-x6, calc(0.25rem * 6));padding-inline-end:calc(var(--cnvs-sys-space-x1, 0.25rem) * 5);" }),
|
|
64
|
+
smallOnly: canvas_kit_styling_1.createStyles({ name: "4un8za", styles: "padding:0;min-width:var(--cnvs-sys-space-x8, calc(0.25rem * 8));" }),
|
|
65
|
+
smallStart: canvas_kit_styling_1.createStyles({ name: "996eys", styles: "padding-inline-start:var(--cnvs-sys-space-x3, calc(0.25rem * 3));padding-inline-end:var(--cnvs-sys-space-x4, calc(0.25rem * 4));" }),
|
|
66
|
+
smallEnd: canvas_kit_styling_1.createStyles({ name: "1khaens", styles: "padding-inline-start:var(--cnvs-sys-space-x4, calc(0.25rem * 4));padding-inline-end:var(--cnvs-sys-space-x3, calc(0.25rem * 3));" }),
|
|
67
|
+
extraSmallOnly: canvas_kit_styling_1.createStyles({ name: "uyhf8a", styles: "padding:0;min-width:var(--cnvs-sys-space-x6, calc(0.25rem * 6));" }),
|
|
68
|
+
extraSmallStart: canvas_kit_styling_1.createStyles({ name: "1m2nnkm", styles: "padding-inline-start:var(--cnvs-sys-space-x2, calc(0.25rem * 2));padding-inline-end:var(--cnvs-sys-space-x3, calc(0.25rem * 3));" }),
|
|
69
|
+
extraSmallEnd: canvas_kit_styling_1.createStyles({ name: "11knxyn", styles: "padding-inline-start:var(--cnvs-sys-space-x3, calc(0.25rem * 3));padding-inline-end:var(--cnvs-sys-space-x2, calc(0.25rem * 2));" }),
|
|
70
70
|
},
|
|
71
71
|
});
|
|
72
72
|
function capitalize(string = '') {
|
|
@@ -27,7 +27,7 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
|
27
27
|
const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
28
28
|
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
29
29
|
const Button_1 = require("./Button");
|
|
30
|
-
const deleteStyles = canvas_kit_styling_1.createStyles({ name: "
|
|
30
|
+
const deleteStyles = canvas_kit_styling_1.createStyles({ name: "vj7j6z", styles: "--cnvs-button-default-background:var(--cnvs-brand-error-base, rgba(222,46,33,1));--cnvs-button-default-border:transparent;--cnvs-button-default-borderRadius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));--cnvs-button-default-label-emotion-safe:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--cnvs-button-default-icon:var(--cnvs-brand-error-accent, rgba(255,255,255,1));&:hover, &.hover{--cnvs-button-hover-background:var(--cnvs-brand-error-dark, rgba(163,27,18,1));--cnvs-button-hover-border:transparent;--cnvs-button-hover-label-emotion-safe:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--cnvs-button-hover-icon:var(--cnvs-brand-error-accent, rgba(255,255,255,1));}&:focus-visible, &.focus{--cnvs-button-focus-background:var(--cnvs-brand-error-base, rgba(222,46,33,1));--cnvs-button-focus-border:transparent;--cnvs-button-focus-label-emotion-safe:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--cnvs-button-focus-icon:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--cnvs-button-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}&:active, &.active{--cnvs-button-active-background:var(--cnvs-brand-error-darkest, rgba(128,22,14,1));--cnvs-button-active-border:transparent;--cnvs-button-active-label-emotion-safe:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--cnvs-button-active-icon:var(--cnvs-brand-error-accent, rgba(255,255,255,1));}&:disabled, &:active:disabled, &:focus:disabled, &:hover:disabled{--cnvs-button-disabled-background:var(--cnvs-brand-error-light, rgba(252,201,197,1));--cnvs-button-disabled-label-emotion-safe:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--cnvs-button-disabled-icon:var(--cnvs-brand-error-accent, rgba(255,255,255,1));opacity:1px;}" });
|
|
31
31
|
/**
|
|
32
32
|
* Use sparingly for destructive actions that will result in data loss, can’t be undone, or will
|
|
33
33
|
* have significant consequences. They commonly appear in confirmation dialogs as the final
|
|
@@ -27,10 +27,10 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
|
27
27
|
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
28
28
|
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
29
29
|
const Button_1 = require("./Button");
|
|
30
|
-
const primaryStyles = canvas_kit_styling_1.createStyles({ name: "
|
|
30
|
+
const primaryStyles = canvas_kit_styling_1.createStyles({ name: "1pt3ej4", styles: "--cnvs-button-default-background:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--cnvs-button-default-border:transparent;--cnvs-button-default-borderRadius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));--cnvs-button-default-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-default-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-hover-background:var(--cnvs-brand-primary-dark, rgba(0,92,185,1));--cnvs-button-hover-border:transparent;--cnvs-button-hover-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-hover-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-focus-background:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--cnvs-button-focus-border:transparent;--cnvs-button-focus-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-focus-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));--cnvs-button-active-background:var(--cnvs-brand-primary-darkest, rgba(0,67,135,1));--cnvs-button-active-border:transparent;--cnvs-button-active-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-active-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-disabled-background:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--cnvs-button-disabled-border:transparent;--cnvs-button-disabled-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-disabled-opacity:0.4;--cnvs-button-disabled-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));" });
|
|
31
31
|
exports.primaryButtonModifiers = canvas_kit_styling_1.createModifiers({
|
|
32
32
|
variant: {
|
|
33
|
-
inverse: canvas_kit_styling_1.createStyles({ name: "
|
|
33
|
+
inverse: canvas_kit_styling_1.createStyles({ name: "a2rvr", styles: "--cnvs-button-default-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-default-borderRadius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));--cnvs-button-default-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-default-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-hover-background:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--cnvs-button-hover-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-hover-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-focus-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-focus-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-focus-boxShadowInner:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-focus-boxShadowOuter:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-active-background:var(--cnvs-base-palette-soap-400, rgba(223,226,230,1));--cnvs-button-active-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-active-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-disabled-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-disabled-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-disabled-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" }),
|
|
34
34
|
},
|
|
35
35
|
});
|
|
36
36
|
exports.PrimaryButton = common_1.createComponent('button')({
|
|
@@ -27,10 +27,10 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
|
27
27
|
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
28
28
|
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
29
29
|
const Button_1 = require("./Button");
|
|
30
|
-
const secondaryStyles = canvas_kit_styling_1.createStyles({ name: "
|
|
30
|
+
const secondaryStyles = canvas_kit_styling_1.createStyles({ name: "193160q", styles: "--cnvs-button-default-background:transparent;--cnvs-button-default-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-default-borderRadius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));--cnvs-button-default-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-default-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-hover-background:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-hover-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-hover-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-hover-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-focus-background:transparent;--cnvs-button-focus-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-focus-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));--cnvs-button-active-background:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-active-border:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-active-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-active-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-disabled-background:transparent;--cnvs-button-disabled-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-disabled-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-disabled-opacity:0.4;--cnvs-button-disabled-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" });
|
|
31
31
|
exports.secondaryButtonModifiers = canvas_kit_styling_1.createModifiers({
|
|
32
32
|
variant: {
|
|
33
|
-
inverse: canvas_kit_styling_1.createStyles({ name: "
|
|
33
|
+
inverse: canvas_kit_styling_1.createStyles({ name: "tuwrzc", styles: "--cnvs-button-default-background:transparent;--cnvs-button-default-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-default-label-emotion-safe:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-default-icon:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-hover-background:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--cnvs-button-hover-border:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--cnvs-button-hover-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-hover-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-focus-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-focus-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-focus-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-focus-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-focus-boxShadowInner:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-focus-boxShadowOuter:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-active-background:var(--cnvs-base-palette-soap-400, rgba(223,226,230,1));--cnvs-button-active-border:var(--cnvs-base-palette-soap-400, rgba(223,226,230,1));--cnvs-button-active-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-active-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-disabled-background:transparent;--cnvs-button-disabled-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-disabled-label-emotion-safe:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-disabled-icon:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));" }),
|
|
34
34
|
},
|
|
35
35
|
});
|
|
36
36
|
exports.SecondaryButton = common_1.createComponent('button')({
|
|
@@ -28,27 +28,27 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
|
28
28
|
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
29
29
|
const tokens_1 = require("@workday/canvas-kit-react/tokens");
|
|
30
30
|
const Button_1 = require("./Button");
|
|
31
|
-
const tertiaryStyles = canvas_kit_styling_1.createStyles({ name: "
|
|
31
|
+
const tertiaryStyles = canvas_kit_styling_1.createStyles({ name: "fuwbd5", styles: "padding-inline:var(--cnvs-sys-space-x2, calc(0.25rem * 2));min-width:auto;text-decoration:underline;border:0px;--cnvs-button-default-background:transparent;--cnvs-button-default-border:transparent;--cnvs-button-default-borderRadius:var(--cnvs-sys-shape-x1, 0.25rem);--cnvs-button-default-label-emotion-safe:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--cnvs-button-default-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-hover-background:var(--cnvs-base-palette-soap-200, rgba(240,241,242,1));--cnvs-button-hover-border:transparent;--cnvs-button-hover-label-emotion-safe:var(--cnvs-brand-primary-dark, rgba(0,92,185,1));--cnvs-button-hover-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-focus-background:transparent;--cnvs-button-focus-border:transparent;--cnvs-button-focus-label-emotion-safe:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--cnvs-button-focus-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-focus-boxShadowInner:var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));--cnvs-button-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));--cnvs-button-active-background:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--cnvs-button-active-border:transparent;--cnvs-button-active-label-emotion-safe:var(--cnvs-brand-primary-dark, rgba(0,92,185,1));--cnvs-button-active-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-disabled-background:transparent;--cnvs-button-disabled-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-disabled-label-emotion-safe:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--cnvs-button-disabled-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-disabled-opacity:0.4;&:focus-visible, &.focus{box-shadow:0 0 0 0px var(--cnvs-base-palette-french-vanilla-100), 0 0 0 2px var(--cnvs-brand-common-focus-outline);}" });
|
|
32
32
|
exports.tertiaryButtonModifiers = canvas_kit_styling_1.createModifiers({
|
|
33
33
|
isThemeable: {
|
|
34
|
-
true: canvas_kit_styling_1.createStyles({ name: "
|
|
34
|
+
true: canvas_kit_styling_1.createStyles({ name: "6a60el", styles: "--cnvs-button-default-icon:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--cnvs-button-hover-icon:var(--cnvs-brand-primary-dark, rgba(0,92,185,1));--cnvs-button-focus-icon:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--cnvs-button-active-icon:var(--cnvs-brand-primary-dark, rgba(0,92,185,1));--cnvs-button-disabled-icon:var(--cnvs-brand-primary-base, rgba(8,117,225,1));" }),
|
|
35
35
|
},
|
|
36
36
|
variant: {
|
|
37
|
-
inverse: canvas_kit_styling_1.createStyles({ name: "
|
|
37
|
+
inverse: canvas_kit_styling_1.createStyles({ name: "1n00uny", styles: "--cnvs-button-default-background:transparent;--cnvs-button-default-border:transparent;--cnvs-button-default-label-emotion-safe:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-default-icon:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-hover-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-hover-border:transparent;--cnvs-button-hover-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-hover-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-focus-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-focus-border:transparent;--cnvs-button-focus-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-active-background:var(--cnvs-base-palette-soap-200, rgba(240,241,242,1));--cnvs-button-active-border:transparent;--cnvs-button-active-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-active-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-disabled-background:transparent;--cnvs-button-disabled-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-disabled-label-emotion-safe:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-disabled-icon:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));&:focus-visible, &.focus{box-shadow:inset 0 0 0 2px var(--cnvs-base-palette-black-pepper-400), 0 0 0 2px var(--cnvs-base-palette-french-vanilla-100);}" }),
|
|
38
38
|
},
|
|
39
39
|
iconPosition: {
|
|
40
|
-
largeOnly: canvas_kit_styling_1.createStyles({ name: "
|
|
41
|
-
largeStart: canvas_kit_styling_1.createStyles({ name: "
|
|
42
|
-
largeEnd: canvas_kit_styling_1.createStyles({ name: "
|
|
43
|
-
mediumOnly: canvas_kit_styling_1.createStyles({ name: "
|
|
44
|
-
mediumStart: canvas_kit_styling_1.createStyles({ name: "
|
|
45
|
-
mediumEnd: canvas_kit_styling_1.createStyles({ name: "
|
|
46
|
-
smallOnly: canvas_kit_styling_1.createStyles({ name: "
|
|
47
|
-
smallStart: canvas_kit_styling_1.createStyles({ name: "
|
|
48
|
-
smallEnd: canvas_kit_styling_1.createStyles({ name: "
|
|
49
|
-
extraSmallOnly: canvas_kit_styling_1.createStyles({ name: "
|
|
50
|
-
extraSmallStart: canvas_kit_styling_1.createStyles({ name: "
|
|
51
|
-
extraSmallEnd: canvas_kit_styling_1.createStyles({ name: "
|
|
40
|
+
largeOnly: canvas_kit_styling_1.createStyles({ name: "xih0j4", styles: "border-radius:999px;padding:0;min-width:calc(var(--cnvs-sys-space-x4, calc(0.25rem * 4)) * 3);" }),
|
|
41
|
+
largeStart: canvas_kit_styling_1.createStyles({ name: "13w6ubi", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
|
|
42
|
+
largeEnd: canvas_kit_styling_1.createStyles({ name: "1g2rd08", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
|
|
43
|
+
mediumOnly: canvas_kit_styling_1.createStyles({ name: "10i0ly8", styles: "padding:0;min-width:2.5rem;border-radius:999px;" }),
|
|
44
|
+
mediumStart: canvas_kit_styling_1.createStyles({ name: "13w6ubi", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
|
|
45
|
+
mediumEnd: canvas_kit_styling_1.createStyles({ name: "1g2rd08", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
|
|
46
|
+
smallOnly: canvas_kit_styling_1.createStyles({ name: "18m1kdv", styles: "padding:0;min-width:2rem;border-radius:999px;" }),
|
|
47
|
+
smallStart: canvas_kit_styling_1.createStyles({ name: "13w6ubi", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
|
|
48
|
+
smallEnd: canvas_kit_styling_1.createStyles({ name: "1g2rd08", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
|
|
49
|
+
extraSmallOnly: canvas_kit_styling_1.createStyles({ name: "1pnzsxn", styles: "padding:0;min-width:1.5rem;border-radius:999px;" }),
|
|
50
|
+
extraSmallStart: canvas_kit_styling_1.createStyles({ name: "1ixecau", styles: "padding-inline-start:0.25rem;padding-inline-end:0.5rem;" }),
|
|
51
|
+
extraSmallEnd: canvas_kit_styling_1.createStyles({ name: "f1t4k2", styles: "padding-inline-start:0.5rem;padding-inline-end:0.25rem;" }),
|
|
52
52
|
},
|
|
53
53
|
});
|
|
54
54
|
exports.TertiaryButton = common_1.createComponent('button')({
|
|
@@ -31,7 +31,12 @@ const StyledToolbarDropdownButton = common_1.styled(BaseButton_1.BaseButton)({
|
|
|
31
31
|
width: 18, // decrease the space between a custom icon and the chevron per design
|
|
32
32
|
},
|
|
33
33
|
'&:focus-visible, &.focus': {
|
|
34
|
-
...
|
|
34
|
+
...common_1.focusRing({
|
|
35
|
+
width: 2,
|
|
36
|
+
separation: 0,
|
|
37
|
+
innerColor: 'transparent',
|
|
38
|
+
outerColor: canvas_tokens_web_1.brand.common.focusOutline,
|
|
39
|
+
}),
|
|
35
40
|
},
|
|
36
41
|
});
|
|
37
42
|
exports.ToolbarDropdownButton = common_1.createComponent('button')({
|
|
@@ -32,7 +32,12 @@ const StyledToolbarIconButton = common_1.styled(BaseButton_1.BaseButton)({
|
|
|
32
32
|
height: 20,
|
|
33
33
|
},
|
|
34
34
|
'&:focus-visible, &.focus': {
|
|
35
|
-
...
|
|
35
|
+
...common_1.focusRing({
|
|
36
|
+
width: 2,
|
|
37
|
+
separation: 0,
|
|
38
|
+
innerColor: 'transparent',
|
|
39
|
+
outerColor: canvas_tokens_web_1.brand.common.focusOutline,
|
|
40
|
+
}),
|
|
36
41
|
},
|
|
37
42
|
});
|
|
38
43
|
exports.ToolbarIconButton = common_1.createComponent('button')({
|
|
@@ -130,11 +130,11 @@ const Container = styled_1.default('button')({
|
|
|
130
130
|
'&:not([disabled])': {
|
|
131
131
|
'&:focus': {
|
|
132
132
|
borderColor: buttonColors.focusBorder,
|
|
133
|
-
...
|
|
133
|
+
...common_1.focusRing(),
|
|
134
134
|
},
|
|
135
135
|
'&:active': {
|
|
136
136
|
borderColor: buttonColors.activeBorder,
|
|
137
|
-
...
|
|
137
|
+
...common_1.focusRing(),
|
|
138
138
|
},
|
|
139
139
|
},
|
|
140
140
|
...common_1.mouseFocusBehavior({
|
|
@@ -98,10 +98,22 @@ const CheckboxInput = common_1.styled('input')(({ theme: { canvas: { palette: {
|
|
|
98
98
|
borderColor: variant === 'inverse' ? tokens_1.colors.blackPepper400 : themePrimary.main,
|
|
99
99
|
borderWidth: '2px',
|
|
100
100
|
boxShadow: 'none',
|
|
101
|
-
...
|
|
101
|
+
...common_1.focusRing({
|
|
102
|
+
width: variant === 'inverse' ? 2 : 0,
|
|
103
|
+
separation: 0,
|
|
104
|
+
animate: false,
|
|
105
|
+
innerColor: variant === 'inverse' ? tokens_1.colors.blackPepper400 : undefined,
|
|
106
|
+
outerColor: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : undefined,
|
|
107
|
+
}),
|
|
102
108
|
},
|
|
103
109
|
'&:checked:focus ~ div:first-of-type, &:indeterminate:focus ~ div:first-of-type': {
|
|
104
|
-
...
|
|
110
|
+
...common_1.focusRing({
|
|
111
|
+
width: 2,
|
|
112
|
+
separation: 2,
|
|
113
|
+
animate: false,
|
|
114
|
+
innerColor: variant === 'inverse' ? tokens_1.colors.blackPepper400 : undefined,
|
|
115
|
+
outerColor: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : themeFocusOutline,
|
|
116
|
+
}),
|
|
105
117
|
borderColor: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : themePrimary.main,
|
|
106
118
|
borderWidth: '2px',
|
|
107
119
|
'& span': {
|
|
@@ -39,7 +39,7 @@ exports.accessibleHide = {
|
|
|
39
39
|
padding: 0,
|
|
40
40
|
border: 0,
|
|
41
41
|
};
|
|
42
|
-
const accessibleHideStyles = canvas_kit_styling_1.createStyles({ name: "
|
|
42
|
+
const accessibleHideStyles = canvas_kit_styling_1.createStyles({ name: "1jqqftm", styles: "clip:rect(1px, 1px, 1px, 1px);clip-path:polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);position:absolute;overflow:hidden;white-space:nowrap;height:1px;width:1px;margin:-1px;padding:0px;border:0px;" });
|
|
43
43
|
/**
|
|
44
44
|
* A convenient component wrapper to visually hide content, while still making it accessible to screen readers
|
|
45
45
|
*/
|
|
@@ -28,7 +28,7 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
|
28
28
|
const css_1 = require("@emotion/css");
|
|
29
29
|
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
30
30
|
// copied from brand/_variables.css
|
|
31
|
-
const defaultBranding = canvas_kit_styling_1.createStyles({ name: "
|
|
31
|
+
const defaultBranding = canvas_kit_styling_1.createStyles({ name: "192nfdp", styles: "--cnvs-brand-error-darkest:rgba(128,22,14,1);--cnvs-brand-common-alert-inner:var(--cnvs-base-palette-cantaloupe-400);--cnvs-brand-common-error-inner:var(--cnvs-base-palette-cinnamon-500);--cnvs-brand-common-focus-outline:var(--cnvs-base-palette-blueberry-400);--cnvs-brand-neutral-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-neutral-darkest:var(--cnvs-base-palette-licorice-400);--cnvs-brand-neutral-dark:var(--cnvs-base-palette-licorice-300);--cnvs-brand-neutral-base:var(--cnvs-base-palette-soap-600);--cnvs-brand-neutral-light:var(--cnvs-base-palette-soap-300);--cnvs-brand-neutral-lightest:var(--cnvs-base-palette-soap-200);--cnvs-brand-success-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-success-darkest:var(--cnvs-base-palette-green-apple-600);--cnvs-brand-success-dark:var(--cnvs-base-palette-green-apple-500);--cnvs-brand-success-base:var(--cnvs-base-palette-green-apple-400);--cnvs-brand-success-light:var(--cnvs-base-palette-green-apple-300);--cnvs-brand-success-lightest:var(--cnvs-base-palette-green-apple-100);--cnvs-brand-error-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-error-dark:var(--cnvs-base-palette-cinnamon-600);--cnvs-brand-error-base:var(--cnvs-base-palette-cinnamon-500);--cnvs-brand-error-light:var(--cnvs-base-palette-cinnamon-200);--cnvs-brand-error-lightest:var(--cnvs-base-palette-cinnamon-100);--cnvs-brand-alert-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-alert-darkest:var(--cnvs-base-palette-cantaloupe-600);--cnvs-brand-alert-dark:var(--cnvs-base-palette-cantaloupe-500);--cnvs-brand-alert-base:var(--cnvs-base-palette-cantaloupe-400);--cnvs-brand-alert-light:var(--cnvs-base-palette-cantaloupe-200);--cnvs-brand-alert-lightest:var(--cnvs-base-palette-cantaloupe-100);--cnvs-brand-primary-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-primary-darkest:var(--cnvs-base-palette-blueberry-600);--cnvs-brand-primary-dark:var(--cnvs-base-palette-blueberry-500);--cnvs-brand-primary-base:var(--cnvs-base-palette-blueberry-400);--cnvs-brand-primary-light:var(--cnvs-base-palette-blueberry-200);--cnvs-brand-primary-lightest:var(--cnvs-base-palette-blueberry-100);--cnvs-brand-gradient-primary:linear-gradient(90deg, var(--cnvs-brand-primary-base) 0%, var(--cnvs-brand-primary-dark) 100%);" });
|
|
32
32
|
const mappedKeys = {
|
|
33
33
|
lightest: 'lightest',
|
|
34
34
|
light: 'light',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"focusRing.d.ts","sourceRoot":"","sources":["../../../../../common/lib/styles/focusRing.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"focusRing.d.ts","sourceRoot":"","sources":["../../../../../common/lib/styles/focusRing.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,EAAE,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAIhD,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;AA2CD;;;;;;;;;;;;;;GAcG;AAEH;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,OAAO,GAAE,gBAAqB,EAAE,KAAK,CAAC,EAAE,KAAK,GAAG,SAAS,CAoBlF"}
|
|
@@ -1,19 +1,17 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.focusRing = void 0;
|
|
4
|
-
const react_1 = require("@emotion/react");
|
|
5
|
-
const tokens_1 = require("@workday/canvas-kit-react/tokens");
|
|
6
4
|
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
7
|
-
const
|
|
8
|
-
function calculateFocusRing({ width, separation,
|
|
5
|
+
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
6
|
+
function calculateFocusRing({ width, separation, inset, innerColor, outerColor, }) {
|
|
9
7
|
let boxShadow, innerWidth, outerWidth;
|
|
10
8
|
if (innerColor && innerColor.startsWith('--')) {
|
|
11
9
|
// eslint-disable-next-line no-param-reassign
|
|
12
|
-
innerColor = innerColor;
|
|
10
|
+
innerColor = canvas_kit_styling_1.cssVar(innerColor);
|
|
13
11
|
}
|
|
14
12
|
if (outerColor && outerColor.startsWith('--')) {
|
|
15
13
|
// eslint-disable-next-line no-param-reassign
|
|
16
|
-
outerColor = outerColor;
|
|
14
|
+
outerColor = canvas_kit_styling_1.cssVar(outerColor);
|
|
17
15
|
}
|
|
18
16
|
switch (inset) {
|
|
19
17
|
case 'outer':
|
|
@@ -32,13 +30,6 @@ function calculateFocusRing({ width, separation, animate, inset, innerColor, out
|
|
|
32
30
|
boxShadow = `0 0 0 ${innerWidth}px ${innerColor}, 0 0 0 ${outerWidth}px ${outerColor}`;
|
|
33
31
|
break;
|
|
34
32
|
}
|
|
35
|
-
if (animate) {
|
|
36
|
-
const fadeIn = react_1.keyframes({
|
|
37
|
-
'0%': { boxShadow },
|
|
38
|
-
'100%': { boxShadow },
|
|
39
|
-
});
|
|
40
|
-
return { animation: `${fadeIn} 100ms`, boxShadow };
|
|
41
|
-
}
|
|
42
33
|
return { boxShadow };
|
|
43
34
|
}
|
|
44
35
|
/**
|
|
@@ -64,9 +55,7 @@ function calculateFocusRing({ width, separation, animate, inset, innerColor, out
|
|
|
64
55
|
* @returns {CSSObject} the css object for the focus ring style
|
|
65
56
|
*/
|
|
66
57
|
function focusRing(options = {}, theme) {
|
|
67
|
-
const { width = 2, separation = 0, animate = true, innerColor =
|
|
68
|
-
? theme.canvas.palette.common.focusOutline
|
|
69
|
-
: index_1.defaultCanvasTheme.palette.common.focusOutline, inset, } = options;
|
|
58
|
+
const { width = 2, separation = 0, animate = true, innerColor = canvas_tokens_web_1.base.frenchVanilla100, outerColor = canvas_tokens_web_1.brand.common.focusOutline, inset, } = options;
|
|
70
59
|
const args = {
|
|
71
60
|
width: width,
|
|
72
61
|
separation: separation,
|
|
@@ -107,17 +107,31 @@ const RadioInput = common_1.styled('input')({
|
|
|
107
107
|
borderWidth: '2px',
|
|
108
108
|
borderColor: variant === 'inverse' ? tokens_1.colors.blackPepper400 : themeFocusOutline,
|
|
109
109
|
boxShadow: 'none',
|
|
110
|
-
...
|
|
110
|
+
...common_1.focusRing({
|
|
111
|
+
width: variant === 'inverse' ? 2 : 0,
|
|
112
|
+
separation: 0,
|
|
113
|
+
animate: false,
|
|
114
|
+
innerColor: variant === 'inverse' ? tokens_1.colors.blackPepper400 : undefined,
|
|
115
|
+
outerColor: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : undefined,
|
|
116
|
+
}),
|
|
111
117
|
},
|
|
112
118
|
},
|
|
113
119
|
'&:checked:focus ~ div:first-of-type': {
|
|
114
|
-
...
|
|
120
|
+
...common_1.focusRing({
|
|
121
|
+
separation: 2,
|
|
122
|
+
width: 2,
|
|
123
|
+
innerColor: variant === 'inverse' ? tokens_1.colors.blackPepper400 : undefined,
|
|
124
|
+
outerColor: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : themeFocusOutline,
|
|
125
|
+
}),
|
|
115
126
|
borderColor: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : themePrimary.main,
|
|
116
127
|
borderWidth: '2px',
|
|
117
128
|
},
|
|
118
129
|
...common_1.mouseFocusBehavior({
|
|
119
130
|
'&:focus ~ div:first-of-type': {
|
|
120
|
-
...
|
|
131
|
+
...common_1.focusRing({
|
|
132
|
+
width: 0,
|
|
133
|
+
outerColor: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : themeFocusOutline,
|
|
134
|
+
}),
|
|
121
135
|
borderWidth: '1px',
|
|
122
136
|
borderColor: checked
|
|
123
137
|
? variant === 'inverse'
|
|
@@ -15,7 +15,7 @@ const useSelectModel_1 = require("./hooks/useSelectModel");
|
|
|
15
15
|
const useSelectCard_1 = require("./hooks/useSelectCard");
|
|
16
16
|
const useSelectInput_1 = require("./hooks/useSelectInput");
|
|
17
17
|
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
18
|
-
const selectInputStyles = canvas_kit_styling_1.createStyles({ name: "
|
|
18
|
+
const selectInputStyles = canvas_kit_styling_1.createStyles({ name: "1gpclr4", styles: "caret-color:transparent;cursor:default;&::selection{background-color:transparent;}" });
|
|
19
19
|
exports.SelectInput = common_1.createSubcomponent(text_input_1.TextInput)({
|
|
20
20
|
modelHook: useSelectModel_1.useSelectModel,
|
|
21
21
|
elemPropsHook: useSelectInput_1.useSelectInput,
|
|
@@ -53,7 +53,7 @@ const SwitchInput = common_1.styled('input')({
|
|
|
53
53
|
'&:focus': {
|
|
54
54
|
outline: 'none',
|
|
55
55
|
'& ~ div:first-of-type': {
|
|
56
|
-
...{
|
|
56
|
+
...common_1.focusRing({ separation: 2, animate: false }, theme),
|
|
57
57
|
},
|
|
58
58
|
},
|
|
59
59
|
'& ~ div:first-of-type': {
|
|
@@ -63,7 +63,7 @@ const SwitchInput = common_1.styled('input')({
|
|
|
63
63
|
0 0 0 5px ${errorColors.outer}`,
|
|
64
64
|
},
|
|
65
65
|
'&:focus ~ div:first-of-type': {
|
|
66
|
-
...{
|
|
66
|
+
...common_1.focusRing({ separation: 2, animate: false }, theme),
|
|
67
67
|
},
|
|
68
68
|
};
|
|
69
69
|
return {
|
|
@@ -53,7 +53,7 @@ exports.StyledTabItem = common_1.styled(layout_1.Box.as('button'))(({ theme }) =
|
|
|
53
53
|
},
|
|
54
54
|
'&:focus': {
|
|
55
55
|
outline: `none`,
|
|
56
|
-
...{
|
|
56
|
+
...common_1.focusRing({ inset: 'outer', width: 0, separation: 2 }, theme),
|
|
57
57
|
},
|
|
58
58
|
'&:disabled, &[aria-disabled]': {
|
|
59
59
|
color: tokens_1.colors.licorice100,
|
|
@@ -26,7 +26,7 @@ const StyledContainer = styled('button', {
|
|
|
26
26
|
'&:not([disabled])': {
|
|
27
27
|
'&:focus': {
|
|
28
28
|
outline: 'none',
|
|
29
|
-
...{
|
|
29
|
+
...focusRing({ separation: 2 }),
|
|
30
30
|
},
|
|
31
31
|
},
|
|
32
32
|
...hideMouseFocus,
|
|
@@ -13,7 +13,7 @@ const styles = {
|
|
|
13
13
|
transition: 'background-color 120ms',
|
|
14
14
|
'&:focus': {
|
|
15
15
|
outline: 'none',
|
|
16
|
-
...{
|
|
16
|
+
...focusRing({ separation: 2 }),
|
|
17
17
|
},
|
|
18
18
|
...hideMouseFocus,
|
|
19
19
|
};
|
|
@@ -9,16 +9,16 @@ import { base, brand, system } from '@workday/canvas-tokens-web';
|
|
|
9
9
|
* Temporary css variables to be used across all Buttons.
|
|
10
10
|
*/
|
|
11
11
|
export const buttonVars = {
|
|
12
|
-
default: createVars({ id: "
|
|
13
|
-
hover: createVars({ id: "
|
|
14
|
-
active: createVars({ id: "
|
|
15
|
-
focus: createVars({ id: "
|
|
16
|
-
disabled: createVars({ id: "
|
|
12
|
+
default: createVars({ id: "cnvs-button-default", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
|
|
13
|
+
hover: createVars({ id: "cnvs-button-hover", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
|
|
14
|
+
active: createVars({ id: "cnvs-button-active", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
|
|
15
|
+
focus: createVars({ id: "cnvs-button-focus", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
|
|
16
|
+
disabled: createVars({ id: "cnvs-button-disabled", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
|
|
17
17
|
};
|
|
18
18
|
/**
|
|
19
19
|
* Base styles for Buttons.
|
|
20
20
|
*/
|
|
21
|
-
const baseButtonStyles = createStyles({ name: "
|
|
21
|
+
const baseButtonStyles = createStyles({ name: "ejxkmr", styles: "font-family:\"Roboto\", \"Helvetica Neue\", \"Helvetica\", Arial, sans-serif;font-size:0.875rem;line-height:normal;letter-spacing:0.015rem;font-weight:bold;background-color:var(--cnvs-button-default-background, transparent);color:var(--cnvs-button-default-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400));border-width:1px;border-style:solid;gap:var(--cnvs-sys-space-x2, calc(0.25rem * 2));border-color:var(--cnvs-button-default-border, transparent);cursor:pointer;display:inline-flex;box-shadow:none;align-items:center;justify-content:center;box-sizing:border-box;outline:2px transparent;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-radius:var(--cnvs-button-default-borderRadius, var(--cnvs-sys-shape-round));position:relative;vertical-align:middle;overflow:hidden;transition:box-shadow 120ms linear, border 120ms linear, background-color 120ms linear, color 120ms linear;&:disabled, &:disabled:active, &.disabled{cursor:default;box-shadow:none;opacity:var(--cnvs-button-disabled-opacity, 1);}& span .wd-icon-fill{transition-duration:40ms;fill:var(--cnvs-button-default-icon, var(--cnvs-base-palette-black-pepper-400));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--cnvs-button-default-icon, var(--cnvs-base-palette-black-pepper-400));}&:focus-visible, &.focus{background-color:var(--cnvs-button-focus-background, transparent);border-color:var(--cnvs-button-focus-border, transparent);color:var(--cnvs-button-focus-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400));& span .wd-icon-fill{fill:var(--cnvs-button-focus-icon, var(--cnvs-base-palette-black-pepper-400));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--cnvs-button-focus-icon, var(--cnvs-base-palette-black-pepper-400));}box-shadow:0 0 0 2px var(--cnvs-button-focus-boxShadowInner, var(--cnvs-base-palette-french-vanilla-100)), 0 0 0 4px var(--cnvs-button-focus-boxShadowOuter, var(--cnvs-brand-primary-base));}&:hover, &.hover{background-color:var(--cnvs-button-hover-background, var(--cnvs-base-palette-black-pepper-500));border-color:var(--cnvs-button-hover-border, transparent);color:var(--cnvs-button-hover-label-emotion-safe, var(--cnvs-base-palette-black-pepper-500));& span .wd-icon-fill{fill:var(--cnvs-button-hover-icon, var(--cnvs-base-palette-black-pepper-500));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--cnvs-button-hover-icon, var(--cnvs-base-palette-black-pepper-500));}}&:hover:active{transition-duration:40ms;}&:active, &.active{background-color:var(--cnvs-button-active-background, transparent);border-color:var(--cnvs-button-active-border, transparent);color:var(--cnvs-button-active-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400));& span .wd-icon-fill{fill:var(--cnvs-button-active-icon, var(--cnvs-base-palette-black-pepper-400));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--cnvs-button-active-icon, var(--cnvs-base-palette-black-pepper-400));}}&:disabled, &.disabled{background-color:var(--cnvs-button-disabled-background, transparent);border-color:var(--cnvs-button-disabled-border, transparent);color:var(--cnvs-button-disabled-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400));& span .wd-icon-fill{fill:var(--cnvs-button-disabled-icon, var(--cnvs-base-palette-black-pepper-400));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--cnvs-button-disabled-icon, var(--cnvs-base-palette-black-pepper-400));}}" });
|
|
22
22
|
/**
|
|
23
23
|
* Button modifiers that will overwrite the base styles of Buttons.
|
|
24
24
|
* - `Size`: These modifiers will dictate a size of a Button and has a set of styles to associated with it.
|
|
@@ -27,24 +27,24 @@ const baseButtonStyles = createStyles({ name: "k4ib2", styles: "font-family:\"Ro
|
|
|
27
27
|
*/
|
|
28
28
|
export const buttonModifiers = createModifiers({
|
|
29
29
|
size: {
|
|
30
|
-
large: createStyles({ name: "
|
|
31
|
-
medium: createStyles({ name: "
|
|
32
|
-
small: createStyles({ name: "
|
|
33
|
-
extraSmall: createStyles({ name: "
|
|
30
|
+
large: createStyles({ name: "1vuu82a", styles: "font-size:var(--cnvs-sys-space-x4, calc(0.25rem * 4));line-height:var(--cnvs-sys-space-x6, calc(0.25rem * 6));letter-spacing:0.01rem;height:48px;padding-inline:var(--cnvs-sys-space-x8, calc(0.25rem * 8));min-width:112px;" }),
|
|
31
|
+
medium: createStyles({ name: "1tv5kp2", styles: "font-size:0.875rem;letter-spacing:0.015rem;min-width:96px;padding-inline:var(--cnvs-sys-space-x6, calc(0.25rem * 6));height:var(--cnvs-sys-space-x10, calc(0.25rem * 10));" }),
|
|
32
|
+
small: createStyles({ name: "1bibd9a", styles: "font-size:0.875rem;letter-spacing:0.015rem;height:var(--cnvs-sys-space-x8, calc(0.25rem * 8));min-width:var(--cnvs-sys-space-x20, calc(0.25rem * 20));padding-inline:var(--cnvs-sys-space-x4, calc(0.25rem * 4));gap:var(--cnvs-sys-space-x1, 0.25rem);" }),
|
|
33
|
+
extraSmall: createStyles({ name: "jxl8ry", styles: "font-size:0.75rem;line-height:var(--cnvs-sys-space-x4, calc(0.25rem * 4));letter-spacing:0.02rem;height:var(--cnvs-sys-space-x6, calc(0.25rem * 6));min-width:auto;padding-inline:var(--cnvs-sys-space-x3, calc(0.25rem * 3));gap:var(--cnvs-sys-space-x1, 0.25rem);" }),
|
|
34
34
|
},
|
|
35
35
|
iconPosition: {
|
|
36
|
-
largeOnly: createStyles({ name: "
|
|
37
|
-
largeStart: createStyles({ name: "
|
|
38
|
-
largeEnd: createStyles({ name: "
|
|
39
|
-
mediumOnly: createStyles({ name: "
|
|
40
|
-
mediumStart: createStyles({ name: "
|
|
41
|
-
mediumEnd: createStyles({ name: "
|
|
42
|
-
smallOnly: createStyles({ name: "
|
|
43
|
-
smallStart: createStyles({ name: "
|
|
44
|
-
smallEnd: createStyles({ name: "
|
|
45
|
-
extraSmallOnly: createStyles({ name: "
|
|
46
|
-
extraSmallStart: createStyles({ name: "
|
|
47
|
-
extraSmallEnd: createStyles({ name: "
|
|
36
|
+
largeOnly: createStyles({ name: "17x7zv9", styles: "padding:0;min-width:calc(var(--cnvs-sys-space-x4, calc(0.25rem * 4)) * 3);" }),
|
|
37
|
+
largeStart: createStyles({ name: "6nuy87", styles: "padding-inline-start:var(--cnvs-sys-space-x6, calc(0.25rem * 6));padding-inline-end:var(--cnvs-sys-space-x8, calc(0.25rem * 8));" }),
|
|
38
|
+
largeEnd: createStyles({ name: "sco5n0", styles: "padding-inline-start:var(--cnvs-sys-space-x8, calc(0.25rem * 8));padding-inline-end:var(--cnvs-sys-space-x6, calc(0.25rem * 6));" }),
|
|
39
|
+
mediumOnly: createStyles({ name: "184b2d3", styles: "padding:0;min-width:var(--cnvs-sys-space-x10, calc(0.25rem * 10));" }),
|
|
40
|
+
mediumStart: createStyles({ name: "1spsu3s", styles: "padding-inline-start:calc(var(--cnvs-sys-space-x1, 0.25rem) * 5);padding-inline-end:var(--cnvs-sys-space-x6, calc(0.25rem * 6));" }),
|
|
41
|
+
mediumEnd: createStyles({ name: "aawort", styles: "padding-inline-start:var(--cnvs-sys-space-x6, calc(0.25rem * 6));padding-inline-end:calc(var(--cnvs-sys-space-x1, 0.25rem) * 5);" }),
|
|
42
|
+
smallOnly: createStyles({ name: "4un8za", styles: "padding:0;min-width:var(--cnvs-sys-space-x8, calc(0.25rem * 8));" }),
|
|
43
|
+
smallStart: createStyles({ name: "996eys", styles: "padding-inline-start:var(--cnvs-sys-space-x3, calc(0.25rem * 3));padding-inline-end:var(--cnvs-sys-space-x4, calc(0.25rem * 4));" }),
|
|
44
|
+
smallEnd: createStyles({ name: "1khaens", styles: "padding-inline-start:var(--cnvs-sys-space-x4, calc(0.25rem * 4));padding-inline-end:var(--cnvs-sys-space-x3, calc(0.25rem * 3));" }),
|
|
45
|
+
extraSmallOnly: createStyles({ name: "uyhf8a", styles: "padding:0;min-width:var(--cnvs-sys-space-x6, calc(0.25rem * 6));" }),
|
|
46
|
+
extraSmallStart: createStyles({ name: "1m2nnkm", styles: "padding-inline-start:var(--cnvs-sys-space-x2, calc(0.25rem * 2));padding-inline-end:var(--cnvs-sys-space-x3, calc(0.25rem * 3));" }),
|
|
47
|
+
extraSmallEnd: createStyles({ name: "11knxyn", styles: "padding-inline-start:var(--cnvs-sys-space-x3, calc(0.25rem * 3));padding-inline-end:var(--cnvs-sys-space-x2, calc(0.25rem * 2));" }),
|
|
48
48
|
},
|
|
49
49
|
});
|
|
50
50
|
export function capitalize(string = '') {
|
|
@@ -5,7 +5,7 @@ import { createStyles } from '@workday/canvas-kit-styling';
|
|
|
5
5
|
import { mergeStyles } from '@workday/canvas-kit-react/layout';
|
|
6
6
|
import { base, brand, system } from '@workday/canvas-tokens-web';
|
|
7
7
|
import { Button } from './Button';
|
|
8
|
-
const deleteStyles = createStyles({ name: "
|
|
8
|
+
const deleteStyles = createStyles({ name: "vj7j6z", styles: "--cnvs-button-default-background:var(--cnvs-brand-error-base, rgba(222,46,33,1));--cnvs-button-default-border:transparent;--cnvs-button-default-borderRadius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));--cnvs-button-default-label-emotion-safe:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--cnvs-button-default-icon:var(--cnvs-brand-error-accent, rgba(255,255,255,1));&:hover, &.hover{--cnvs-button-hover-background:var(--cnvs-brand-error-dark, rgba(163,27,18,1));--cnvs-button-hover-border:transparent;--cnvs-button-hover-label-emotion-safe:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--cnvs-button-hover-icon:var(--cnvs-brand-error-accent, rgba(255,255,255,1));}&:focus-visible, &.focus{--cnvs-button-focus-background:var(--cnvs-brand-error-base, rgba(222,46,33,1));--cnvs-button-focus-border:transparent;--cnvs-button-focus-label-emotion-safe:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--cnvs-button-focus-icon:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--cnvs-button-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}&:active, &.active{--cnvs-button-active-background:var(--cnvs-brand-error-darkest, rgba(128,22,14,1));--cnvs-button-active-border:transparent;--cnvs-button-active-label-emotion-safe:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--cnvs-button-active-icon:var(--cnvs-brand-error-accent, rgba(255,255,255,1));}&:disabled, &:active:disabled, &:focus:disabled, &:hover:disabled{--cnvs-button-disabled-background:var(--cnvs-brand-error-light, rgba(252,201,197,1));--cnvs-button-disabled-label-emotion-safe:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--cnvs-button-disabled-icon:var(--cnvs-brand-error-accent, rgba(255,255,255,1));opacity:1px;}" });
|
|
9
9
|
/**
|
|
10
10
|
* Use sparingly for destructive actions that will result in data loss, can’t be undone, or will
|
|
11
11
|
* have significant consequences. They commonly appear in confirmation dialogs as the final
|
|
@@ -5,10 +5,10 @@ import { mergeStyles } from '@workday/canvas-kit-react/layout';
|
|
|
5
5
|
import { createStyles, createModifiers } from '@workday/canvas-kit-styling';
|
|
6
6
|
import { base, brand, system } from '@workday/canvas-tokens-web';
|
|
7
7
|
import { Button } from './Button';
|
|
8
|
-
const primaryStyles = createStyles({ name: "
|
|
8
|
+
const primaryStyles = createStyles({ name: "1pt3ej4", styles: "--cnvs-button-default-background:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--cnvs-button-default-border:transparent;--cnvs-button-default-borderRadius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));--cnvs-button-default-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-default-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-hover-background:var(--cnvs-brand-primary-dark, rgba(0,92,185,1));--cnvs-button-hover-border:transparent;--cnvs-button-hover-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-hover-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-focus-background:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--cnvs-button-focus-border:transparent;--cnvs-button-focus-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-focus-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));--cnvs-button-active-background:var(--cnvs-brand-primary-darkest, rgba(0,67,135,1));--cnvs-button-active-border:transparent;--cnvs-button-active-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-active-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-disabled-background:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--cnvs-button-disabled-border:transparent;--cnvs-button-disabled-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-disabled-opacity:0.4;--cnvs-button-disabled-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));" });
|
|
9
9
|
export const primaryButtonModifiers = createModifiers({
|
|
10
10
|
variant: {
|
|
11
|
-
inverse: createStyles({ name: "
|
|
11
|
+
inverse: createStyles({ name: "a2rvr", styles: "--cnvs-button-default-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-default-borderRadius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));--cnvs-button-default-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-default-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-hover-background:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--cnvs-button-hover-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-hover-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-focus-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-focus-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-focus-boxShadowInner:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-focus-boxShadowOuter:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-active-background:var(--cnvs-base-palette-soap-400, rgba(223,226,230,1));--cnvs-button-active-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-active-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-disabled-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-disabled-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-disabled-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" }),
|
|
12
12
|
},
|
|
13
13
|
});
|
|
14
14
|
export const PrimaryButton = createComponent('button')({
|
|
@@ -5,10 +5,10 @@ import { mergeStyles } from '@workday/canvas-kit-react/layout';
|
|
|
5
5
|
import { createStyles, createModifiers } from '@workday/canvas-kit-styling';
|
|
6
6
|
import { base, brand, system } from '@workday/canvas-tokens-web';
|
|
7
7
|
import { Button } from './Button';
|
|
8
|
-
const secondaryStyles = createStyles({ name: "
|
|
8
|
+
const secondaryStyles = createStyles({ name: "193160q", styles: "--cnvs-button-default-background:transparent;--cnvs-button-default-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-default-borderRadius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));--cnvs-button-default-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-default-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-hover-background:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-hover-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-hover-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-hover-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-focus-background:transparent;--cnvs-button-focus-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-focus-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));--cnvs-button-active-background:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-active-border:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-active-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-active-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--cnvs-button-disabled-background:transparent;--cnvs-button-disabled-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-disabled-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-disabled-opacity:0.4;--cnvs-button-disabled-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" });
|
|
9
9
|
export const secondaryButtonModifiers = createModifiers({
|
|
10
10
|
variant: {
|
|
11
|
-
inverse: createStyles({ name: "
|
|
11
|
+
inverse: createStyles({ name: "tuwrzc", styles: "--cnvs-button-default-background:transparent;--cnvs-button-default-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-default-label-emotion-safe:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-default-icon:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-hover-background:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--cnvs-button-hover-border:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--cnvs-button-hover-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-hover-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-focus-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-focus-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-focus-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-focus-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-focus-boxShadowInner:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-focus-boxShadowOuter:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-active-background:var(--cnvs-base-palette-soap-400, rgba(223,226,230,1));--cnvs-button-active-border:var(--cnvs-base-palette-soap-400, rgba(223,226,230,1));--cnvs-button-active-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-active-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-disabled-background:transparent;--cnvs-button-disabled-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-disabled-label-emotion-safe:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-disabled-icon:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));" }),
|
|
12
12
|
},
|
|
13
13
|
});
|
|
14
14
|
export const SecondaryButton = createComponent('button')({
|
|
@@ -6,27 +6,27 @@ import { mergeStyles } from '@workday/canvas-kit-react/layout';
|
|
|
6
6
|
import { system, brand, base } from '@workday/canvas-tokens-web';
|
|
7
7
|
import { borderRadius, space } from '@workday/canvas-kit-react/tokens';
|
|
8
8
|
import { Button } from './Button';
|
|
9
|
-
const tertiaryStyles = createStyles({ name: "
|
|
9
|
+
const tertiaryStyles = createStyles({ name: "fuwbd5", styles: "padding-inline:var(--cnvs-sys-space-x2, calc(0.25rem * 2));min-width:auto;text-decoration:underline;border:0px;--cnvs-button-default-background:transparent;--cnvs-button-default-border:transparent;--cnvs-button-default-borderRadius:var(--cnvs-sys-shape-x1, 0.25rem);--cnvs-button-default-label-emotion-safe:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--cnvs-button-default-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-hover-background:var(--cnvs-base-palette-soap-200, rgba(240,241,242,1));--cnvs-button-hover-border:transparent;--cnvs-button-hover-label-emotion-safe:var(--cnvs-brand-primary-dark, rgba(0,92,185,1));--cnvs-button-hover-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-focus-background:transparent;--cnvs-button-focus-border:transparent;--cnvs-button-focus-label-emotion-safe:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--cnvs-button-focus-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-focus-boxShadowInner:var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));--cnvs-button-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));--cnvs-button-active-background:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--cnvs-button-active-border:transparent;--cnvs-button-active-label-emotion-safe:var(--cnvs-brand-primary-dark, rgba(0,92,185,1));--cnvs-button-active-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--cnvs-button-disabled-background:transparent;--cnvs-button-disabled-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-disabled-label-emotion-safe:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--cnvs-button-disabled-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-disabled-opacity:0.4;&:focus-visible, &.focus{box-shadow:0 0 0 0px var(--cnvs-base-palette-french-vanilla-100), 0 0 0 2px var(--cnvs-brand-common-focus-outline);}" });
|
|
10
10
|
export const tertiaryButtonModifiers = createModifiers({
|
|
11
11
|
isThemeable: {
|
|
12
|
-
true: createStyles({ name: "
|
|
12
|
+
true: createStyles({ name: "6a60el", styles: "--cnvs-button-default-icon:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--cnvs-button-hover-icon:var(--cnvs-brand-primary-dark, rgba(0,92,185,1));--cnvs-button-focus-icon:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--cnvs-button-active-icon:var(--cnvs-brand-primary-dark, rgba(0,92,185,1));--cnvs-button-disabled-icon:var(--cnvs-brand-primary-base, rgba(8,117,225,1));" }),
|
|
13
13
|
},
|
|
14
14
|
variant: {
|
|
15
|
-
inverse: createStyles({ name: "
|
|
15
|
+
inverse: createStyles({ name: "1n00uny", styles: "--cnvs-button-default-background:transparent;--cnvs-button-default-border:transparent;--cnvs-button-default-label-emotion-safe:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-default-icon:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-hover-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-hover-border:transparent;--cnvs-button-hover-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-hover-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-focus-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-focus-border:transparent;--cnvs-button-focus-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-active-background:var(--cnvs-base-palette-soap-200, rgba(240,241,242,1));--cnvs-button-active-border:transparent;--cnvs-button-active-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-active-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--cnvs-button-disabled-background:transparent;--cnvs-button-disabled-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-disabled-label-emotion-safe:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-button-disabled-icon:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));&:focus-visible, &.focus{box-shadow:inset 0 0 0 2px var(--cnvs-base-palette-black-pepper-400), 0 0 0 2px var(--cnvs-base-palette-french-vanilla-100);}" }),
|
|
16
16
|
},
|
|
17
17
|
iconPosition: {
|
|
18
|
-
largeOnly: createStyles({ name: "
|
|
19
|
-
largeStart: createStyles({ name: "
|
|
20
|
-
largeEnd: createStyles({ name: "
|
|
21
|
-
mediumOnly: createStyles({ name: "
|
|
22
|
-
mediumStart: createStyles({ name: "
|
|
23
|
-
mediumEnd: createStyles({ name: "
|
|
24
|
-
smallOnly: createStyles({ name: "
|
|
25
|
-
smallStart: createStyles({ name: "
|
|
26
|
-
smallEnd: createStyles({ name: "
|
|
27
|
-
extraSmallOnly: createStyles({ name: "
|
|
28
|
-
extraSmallStart: createStyles({ name: "
|
|
29
|
-
extraSmallEnd: createStyles({ name: "
|
|
18
|
+
largeOnly: createStyles({ name: "xih0j4", styles: "border-radius:999px;padding:0;min-width:calc(var(--cnvs-sys-space-x4, calc(0.25rem * 4)) * 3);" }),
|
|
19
|
+
largeStart: createStyles({ name: "13w6ubi", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
|
|
20
|
+
largeEnd: createStyles({ name: "1g2rd08", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
|
|
21
|
+
mediumOnly: createStyles({ name: "10i0ly8", styles: "padding:0;min-width:2.5rem;border-radius:999px;" }),
|
|
22
|
+
mediumStart: createStyles({ name: "13w6ubi", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
|
|
23
|
+
mediumEnd: createStyles({ name: "1g2rd08", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
|
|
24
|
+
smallOnly: createStyles({ name: "18m1kdv", styles: "padding:0;min-width:2rem;border-radius:999px;" }),
|
|
25
|
+
smallStart: createStyles({ name: "13w6ubi", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
|
|
26
|
+
smallEnd: createStyles({ name: "1g2rd08", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
|
|
27
|
+
extraSmallOnly: createStyles({ name: "1pnzsxn", styles: "padding:0;min-width:1.5rem;border-radius:999px;" }),
|
|
28
|
+
extraSmallStart: createStyles({ name: "1ixecau", styles: "padding-inline-start:0.25rem;padding-inline-end:0.5rem;" }),
|
|
29
|
+
extraSmallEnd: createStyles({ name: "f1t4k2", styles: "padding-inline-start:0.5rem;padding-inline-end:0.25rem;" }),
|
|
30
30
|
},
|
|
31
31
|
});
|
|
32
32
|
export const TertiaryButton = createComponent('button')({
|
|
@@ -25,7 +25,12 @@ const StyledToolbarDropdownButton = styled(BaseButton)({
|
|
|
25
25
|
width: 18, // decrease the space between a custom icon and the chevron per design
|
|
26
26
|
},
|
|
27
27
|
'&:focus-visible, &.focus': {
|
|
28
|
-
...
|
|
28
|
+
...focusRing({
|
|
29
|
+
width: 2,
|
|
30
|
+
separation: 0,
|
|
31
|
+
innerColor: 'transparent',
|
|
32
|
+
outerColor: brand.common.focusOutline,
|
|
33
|
+
}),
|
|
29
34
|
},
|
|
30
35
|
});
|
|
31
36
|
export const ToolbarDropdownButton = createComponent('button')({
|
|
@@ -10,7 +10,12 @@ const StyledToolbarIconButton = styled(BaseButton)({
|
|
|
10
10
|
height: 20,
|
|
11
11
|
},
|
|
12
12
|
'&:focus-visible, &.focus': {
|
|
13
|
-
...
|
|
13
|
+
...focusRing({
|
|
14
|
+
width: 2,
|
|
15
|
+
separation: 0,
|
|
16
|
+
innerColor: 'transparent',
|
|
17
|
+
outerColor: brand.common.focusOutline,
|
|
18
|
+
}),
|
|
14
19
|
},
|
|
15
20
|
});
|
|
16
21
|
export const ToolbarIconButton = createComponent('button')({
|
|
@@ -105,11 +105,11 @@ const Container = styled('button')({
|
|
|
105
105
|
'&:not([disabled])': {
|
|
106
106
|
'&:focus': {
|
|
107
107
|
borderColor: buttonColors.focusBorder,
|
|
108
|
-
...
|
|
108
|
+
...focusRing(),
|
|
109
109
|
},
|
|
110
110
|
'&:active': {
|
|
111
111
|
borderColor: buttonColors.activeBorder,
|
|
112
|
-
...
|
|
112
|
+
...focusRing(),
|
|
113
113
|
},
|
|
114
114
|
},
|
|
115
115
|
...mouseFocusBehavior({
|
|
@@ -76,10 +76,22 @@ const CheckboxInput = styled('input')(({ theme: { canvas: { palette: { primary:
|
|
|
76
76
|
borderColor: variant === 'inverse' ? colors.blackPepper400 : themePrimary.main,
|
|
77
77
|
borderWidth: '2px',
|
|
78
78
|
boxShadow: 'none',
|
|
79
|
-
...
|
|
79
|
+
...focusRing({
|
|
80
|
+
width: variant === 'inverse' ? 2 : 0,
|
|
81
|
+
separation: 0,
|
|
82
|
+
animate: false,
|
|
83
|
+
innerColor: variant === 'inverse' ? colors.blackPepper400 : undefined,
|
|
84
|
+
outerColor: variant === 'inverse' ? colors.frenchVanilla100 : undefined,
|
|
85
|
+
}),
|
|
80
86
|
},
|
|
81
87
|
'&:checked:focus ~ div:first-of-type, &:indeterminate:focus ~ div:first-of-type': {
|
|
82
|
-
...
|
|
88
|
+
...focusRing({
|
|
89
|
+
width: 2,
|
|
90
|
+
separation: 2,
|
|
91
|
+
animate: false,
|
|
92
|
+
innerColor: variant === 'inverse' ? colors.blackPepper400 : undefined,
|
|
93
|
+
outerColor: variant === 'inverse' ? colors.frenchVanilla100 : themeFocusOutline,
|
|
94
|
+
}),
|
|
83
95
|
borderColor: variant === 'inverse' ? colors.frenchVanilla100 : themePrimary.main,
|
|
84
96
|
borderWidth: '2px',
|
|
85
97
|
'& span': {
|
|
@@ -17,7 +17,7 @@ export const accessibleHide = {
|
|
|
17
17
|
padding: 0,
|
|
18
18
|
border: 0,
|
|
19
19
|
};
|
|
20
|
-
const accessibleHideStyles = createStyles({ name: "
|
|
20
|
+
const accessibleHideStyles = createStyles({ name: "1jqqftm", styles: "clip:rect(1px, 1px, 1px, 1px);clip-path:polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);position:absolute;overflow:hidden;white-space:nowrap;height:1px;width:1px;margin:-1px;padding:0px;border:0px;" });
|
|
21
21
|
/**
|
|
22
22
|
* A convenient component wrapper to visually hide content, while still making it accessible to screen readers
|
|
23
23
|
*/
|
|
@@ -6,7 +6,7 @@ import { brand } from '@workday/canvas-tokens-web';
|
|
|
6
6
|
import { cache } from '@emotion/css';
|
|
7
7
|
import { createStyles } from '@workday/canvas-kit-styling';
|
|
8
8
|
// copied from brand/_variables.css
|
|
9
|
-
const defaultBranding = createStyles({ name: "
|
|
9
|
+
const defaultBranding = createStyles({ name: "192nfdp", styles: "--cnvs-brand-error-darkest:rgba(128,22,14,1);--cnvs-brand-common-alert-inner:var(--cnvs-base-palette-cantaloupe-400);--cnvs-brand-common-error-inner:var(--cnvs-base-palette-cinnamon-500);--cnvs-brand-common-focus-outline:var(--cnvs-base-palette-blueberry-400);--cnvs-brand-neutral-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-neutral-darkest:var(--cnvs-base-palette-licorice-400);--cnvs-brand-neutral-dark:var(--cnvs-base-palette-licorice-300);--cnvs-brand-neutral-base:var(--cnvs-base-palette-soap-600);--cnvs-brand-neutral-light:var(--cnvs-base-palette-soap-300);--cnvs-brand-neutral-lightest:var(--cnvs-base-palette-soap-200);--cnvs-brand-success-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-success-darkest:var(--cnvs-base-palette-green-apple-600);--cnvs-brand-success-dark:var(--cnvs-base-palette-green-apple-500);--cnvs-brand-success-base:var(--cnvs-base-palette-green-apple-400);--cnvs-brand-success-light:var(--cnvs-base-palette-green-apple-300);--cnvs-brand-success-lightest:var(--cnvs-base-palette-green-apple-100);--cnvs-brand-error-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-error-dark:var(--cnvs-base-palette-cinnamon-600);--cnvs-brand-error-base:var(--cnvs-base-palette-cinnamon-500);--cnvs-brand-error-light:var(--cnvs-base-palette-cinnamon-200);--cnvs-brand-error-lightest:var(--cnvs-base-palette-cinnamon-100);--cnvs-brand-alert-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-alert-darkest:var(--cnvs-base-palette-cantaloupe-600);--cnvs-brand-alert-dark:var(--cnvs-base-palette-cantaloupe-500);--cnvs-brand-alert-base:var(--cnvs-base-palette-cantaloupe-400);--cnvs-brand-alert-light:var(--cnvs-base-palette-cantaloupe-200);--cnvs-brand-alert-lightest:var(--cnvs-base-palette-cantaloupe-100);--cnvs-brand-primary-accent:var(--cnvs-base-palette-french-vanilla-100);--cnvs-brand-primary-darkest:var(--cnvs-base-palette-blueberry-600);--cnvs-brand-primary-dark:var(--cnvs-base-palette-blueberry-500);--cnvs-brand-primary-base:var(--cnvs-base-palette-blueberry-400);--cnvs-brand-primary-light:var(--cnvs-base-palette-blueberry-200);--cnvs-brand-primary-lightest:var(--cnvs-base-palette-blueberry-100);--cnvs-brand-gradient-primary:linear-gradient(90deg, var(--cnvs-brand-primary-base) 0%, var(--cnvs-brand-primary-dark) 100%);" });
|
|
10
10
|
const mappedKeys = {
|
|
11
11
|
lightest: 'lightest',
|
|
12
12
|
light: 'light',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"focusRing.d.ts","sourceRoot":"","sources":["../../../../../common/lib/styles/focusRing.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"focusRing.d.ts","sourceRoot":"","sources":["../../../../../common/lib/styles/focusRing.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,EAAE,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAIhD,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;AA2CD;;;;;;;;;;;;;;GAcG;AAEH;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,OAAO,GAAE,gBAAqB,EAAE,KAAK,CAAC,EAAE,KAAK,GAAG,SAAS,CAoBlF"}
|
|
@@ -1,16 +1,14 @@
|
|
|
1
|
-
import { keyframes } from '@emotion/react';
|
|
2
|
-
import { canvas } from '@workday/canvas-kit-react/tokens';
|
|
3
1
|
import { cssVar } from '@workday/canvas-kit-styling';
|
|
4
|
-
import {
|
|
5
|
-
function calculateFocusRing({ width, separation,
|
|
2
|
+
import { base, brand } from '@workday/canvas-tokens-web';
|
|
3
|
+
function calculateFocusRing({ width, separation, inset, innerColor, outerColor, }) {
|
|
6
4
|
let boxShadow, innerWidth, outerWidth;
|
|
7
5
|
if (innerColor && innerColor.startsWith('--')) {
|
|
8
6
|
// eslint-disable-next-line no-param-reassign
|
|
9
|
-
innerColor = innerColor;
|
|
7
|
+
innerColor = cssVar(innerColor);
|
|
10
8
|
}
|
|
11
9
|
if (outerColor && outerColor.startsWith('--')) {
|
|
12
10
|
// eslint-disable-next-line no-param-reassign
|
|
13
|
-
outerColor = outerColor;
|
|
11
|
+
outerColor = cssVar(outerColor);
|
|
14
12
|
}
|
|
15
13
|
switch (inset) {
|
|
16
14
|
case 'outer':
|
|
@@ -29,13 +27,6 @@ function calculateFocusRing({ width, separation, animate, inset, innerColor, out
|
|
|
29
27
|
boxShadow = `0 0 0 ${innerWidth}px ${innerColor}, 0 0 0 ${outerWidth}px ${outerColor}`;
|
|
30
28
|
break;
|
|
31
29
|
}
|
|
32
|
-
if (animate) {
|
|
33
|
-
const fadeIn = keyframes({
|
|
34
|
-
'0%': { boxShadow },
|
|
35
|
-
'100%': { boxShadow },
|
|
36
|
-
});
|
|
37
|
-
return { animation: `${fadeIn} 100ms`, boxShadow };
|
|
38
|
-
}
|
|
39
30
|
return { boxShadow };
|
|
40
31
|
}
|
|
41
32
|
/**
|
|
@@ -61,9 +52,7 @@ function calculateFocusRing({ width, separation, animate, inset, innerColor, out
|
|
|
61
52
|
* @returns {CSSObject} the css object for the focus ring style
|
|
62
53
|
*/
|
|
63
54
|
export function focusRing(options = {}, theme) {
|
|
64
|
-
const { width = 2, separation = 0, animate = true, innerColor =
|
|
65
|
-
? theme.canvas.palette.common.focusOutline
|
|
66
|
-
: defaultCanvasTheme.palette.common.focusOutline, inset, } = options;
|
|
55
|
+
const { width = 2, separation = 0, animate = true, innerColor = base.frenchVanilla100, outerColor = brand.common.focusOutline, inset, } = options;
|
|
67
56
|
const args = {
|
|
68
57
|
width: width,
|
|
69
58
|
separation: separation,
|
|
@@ -85,17 +85,31 @@ const RadioInput = styled('input')({
|
|
|
85
85
|
borderWidth: '2px',
|
|
86
86
|
borderColor: variant === 'inverse' ? colors.blackPepper400 : themeFocusOutline,
|
|
87
87
|
boxShadow: 'none',
|
|
88
|
-
...
|
|
88
|
+
...focusRing({
|
|
89
|
+
width: variant === 'inverse' ? 2 : 0,
|
|
90
|
+
separation: 0,
|
|
91
|
+
animate: false,
|
|
92
|
+
innerColor: variant === 'inverse' ? colors.blackPepper400 : undefined,
|
|
93
|
+
outerColor: variant === 'inverse' ? colors.frenchVanilla100 : undefined,
|
|
94
|
+
}),
|
|
89
95
|
},
|
|
90
96
|
},
|
|
91
97
|
'&:checked:focus ~ div:first-of-type': {
|
|
92
|
-
...
|
|
98
|
+
...focusRing({
|
|
99
|
+
separation: 2,
|
|
100
|
+
width: 2,
|
|
101
|
+
innerColor: variant === 'inverse' ? colors.blackPepper400 : undefined,
|
|
102
|
+
outerColor: variant === 'inverse' ? colors.frenchVanilla100 : themeFocusOutline,
|
|
103
|
+
}),
|
|
93
104
|
borderColor: variant === 'inverse' ? colors.frenchVanilla100 : themePrimary.main,
|
|
94
105
|
borderWidth: '2px',
|
|
95
106
|
},
|
|
96
107
|
...mouseFocusBehavior({
|
|
97
108
|
'&:focus ~ div:first-of-type': {
|
|
98
|
-
...
|
|
109
|
+
...focusRing({
|
|
110
|
+
width: 0,
|
|
111
|
+
outerColor: variant === 'inverse' ? colors.frenchVanilla100 : themeFocusOutline,
|
|
112
|
+
}),
|
|
99
113
|
borderWidth: '1px',
|
|
100
114
|
borderColor: checked
|
|
101
115
|
? variant === 'inverse'
|
|
@@ -9,7 +9,7 @@ import { useSelectModel } from './hooks/useSelectModel';
|
|
|
9
9
|
import { useSelectCard } from './hooks/useSelectCard';
|
|
10
10
|
import { useSelectInput } from './hooks/useSelectInput';
|
|
11
11
|
import { createStyles } from '@workday/canvas-kit-styling';
|
|
12
|
-
const selectInputStyles = createStyles({ name: "
|
|
12
|
+
const selectInputStyles = createStyles({ name: "1gpclr4", styles: "caret-color:transparent;cursor:default;&::selection{background-color:transparent;}" });
|
|
13
13
|
export const SelectInput = createSubcomponent(TextInput)({
|
|
14
14
|
modelHook: useSelectModel,
|
|
15
15
|
elemPropsHook: useSelectInput,
|
|
@@ -31,7 +31,7 @@ const SwitchInput = styled('input')({
|
|
|
31
31
|
'&:focus': {
|
|
32
32
|
outline: 'none',
|
|
33
33
|
'& ~ div:first-of-type': {
|
|
34
|
-
...{
|
|
34
|
+
...focusRing({ separation: 2, animate: false }, theme),
|
|
35
35
|
},
|
|
36
36
|
},
|
|
37
37
|
'& ~ div:first-of-type': {
|
|
@@ -41,7 +41,7 @@ const SwitchInput = styled('input')({
|
|
|
41
41
|
0 0 0 5px ${errorColors.outer}`,
|
|
42
42
|
},
|
|
43
43
|
'&:focus ~ div:first-of-type': {
|
|
44
|
-
...{
|
|
44
|
+
...focusRing({ separation: 2, animate: false }, theme),
|
|
45
45
|
},
|
|
46
46
|
};
|
|
47
47
|
return {
|
|
@@ -31,7 +31,7 @@ export const StyledTabItem = styled(Box.as('button'))(({ theme }) => ({
|
|
|
31
31
|
},
|
|
32
32
|
'&:focus': {
|
|
33
33
|
outline: `none`,
|
|
34
|
-
...{
|
|
34
|
+
...focusRing({ inset: 'outer', width: 0, separation: 2 }, theme),
|
|
35
35
|
},
|
|
36
36
|
'&:disabled, &[aria-disabled]': {
|
|
37
37
|
color: colors.licorice100,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-react",
|
|
3
|
-
"version": "10.3.
|
|
3
|
+
"version": "10.3.4",
|
|
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",
|
|
@@ -50,8 +50,8 @@
|
|
|
50
50
|
"@emotion/styled": "^11.6.0",
|
|
51
51
|
"@popperjs/core": "^2.5.4",
|
|
52
52
|
"@workday/canvas-colors-web": "^2.0.0",
|
|
53
|
-
"@workday/canvas-kit-popup-stack": "^10.3.
|
|
54
|
-
"@workday/canvas-kit-styling": "^10.3.
|
|
53
|
+
"@workday/canvas-kit-popup-stack": "^10.3.4",
|
|
54
|
+
"@workday/canvas-kit-styling": "^10.3.4",
|
|
55
55
|
"@workday/canvas-system-icons-web": "^3.0.0",
|
|
56
56
|
"@workday/canvas-tokens-web": "^1.0.0",
|
|
57
57
|
"@workday/design-assets-types": "^0.2.8",
|
|
@@ -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": "86269e56ac2b18223ec4e6318a63123eabdeef40"
|
|
73
73
|
}
|