@workday/canvas-kit-react 11.0.0-alpha.662-next.0 → 11.0.0-alpha.667-next.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/commonjs/badge/lib/CountBadge.js +3 -3
- package/dist/commonjs/button/lib/BaseButton.js +17 -17
- 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/card/lib/Card.js +1 -1
- package/dist/commonjs/card/lib/CardHeading.js +1 -1
- package/dist/commonjs/common/lib/AccessibleHide.js +1 -1
- package/dist/commonjs/common/lib/CanvasProvider.js +1 -1
- package/dist/commonjs/form-field/lib/FormField.d.ts +2 -2
- package/dist/commonjs/form-field/lib/FormField.js +1 -1
- package/dist/commonjs/form-field/lib/Hint.d.ts +2 -2
- package/dist/commonjs/form-field/lib/Hint.js +1 -1
- package/dist/commonjs/form-field/lib/Label.d.ts +2 -2
- package/dist/commonjs/form-field/lib/Label.js +1 -1
- package/dist/commonjs/form-field/lib/types.d.ts +2 -2
- package/dist/commonjs/form-field/lib/types.js +1 -1
- package/dist/commonjs/loading-dots/lib/LoadingDots.d.ts +2 -2
- package/dist/commonjs/loading-dots/lib/LoadingDots.d.ts.map +1 -1
- package/dist/commonjs/loading-dots/lib/LoadingDots.js +19 -42
- package/dist/commonjs/popup/lib/hooks/useCloseOnOutsideClick.d.ts.map +1 -1
- package/dist/commonjs/popup/lib/hooks/useCloseOnOutsideClick.js +2 -0
- package/dist/commonjs/select/lib/Select.js +2 -2
- package/dist/commonjs/text/lib/LabelText.js +18 -18
- package/dist/commonjs/text/lib/Text.js +15 -15
- package/dist/es6/badge/lib/CountBadge.js +3 -3
- package/dist/es6/button/lib/BaseButton.js +17 -17
- 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/card/lib/Card.js +1 -1
- package/dist/es6/card/lib/CardHeading.js +1 -1
- package/dist/es6/common/lib/AccessibleHide.js +1 -1
- package/dist/es6/common/lib/CanvasProvider.js +1 -1
- package/dist/es6/form-field/lib/FormField.d.ts +2 -2
- package/dist/es6/form-field/lib/FormField.js +1 -1
- package/dist/es6/form-field/lib/Hint.d.ts +2 -2
- package/dist/es6/form-field/lib/Hint.js +1 -1
- package/dist/es6/form-field/lib/Label.d.ts +2 -2
- package/dist/es6/form-field/lib/Label.js +1 -1
- package/dist/es6/form-field/lib/types.d.ts +2 -2
- package/dist/es6/form-field/lib/types.js +1 -1
- package/dist/es6/loading-dots/lib/LoadingDots.d.ts +2 -2
- package/dist/es6/loading-dots/lib/LoadingDots.d.ts.map +1 -1
- package/dist/es6/loading-dots/lib/LoadingDots.js +20 -42
- package/dist/es6/popup/lib/hooks/useCloseOnOutsideClick.d.ts.map +1 -1
- package/dist/es6/popup/lib/hooks/useCloseOnOutsideClick.js +2 -0
- package/dist/es6/select/lib/Select.js +2 -2
- package/dist/es6/text/lib/LabelText.js +18 -18
- package/dist/es6/text/lib/Text.js +15 -15
- package/form-field/lib/FormField.tsx +2 -2
- package/form-field/lib/Hint.tsx +2 -2
- package/form-field/lib/Label.tsx +2 -2
- package/form-field/lib/types.ts +2 -2
- package/loading-dots/lib/LoadingDots.tsx +55 -54
- package/package.json +4 -4
- package/popup/lib/hooks/useCloseOnOutsideClick.ts +2 -0
- package/select/lib/Select.tsx +1 -1
|
@@ -26,39 +26,39 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
|
26
26
|
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
27
27
|
const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
28
28
|
const labelTextStencil = canvas_kit_styling_1.createStencil({
|
|
29
|
-
base: { name: "
|
|
29
|
+
base: { name: "yxo5h", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-400;line-height:--cnvs-base-line-height-100;font-size:--cnvs-base-font-size-75;letter-spacing:--cnvs-base-letter-spacing-150;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" },
|
|
30
30
|
modifiers: {
|
|
31
31
|
typeLevel: {
|
|
32
32
|
// Title level styles
|
|
33
|
-
'title.large': { name: "
|
|
34
|
-
'title.medium': { name: "
|
|
35
|
-
'title.small': { name: "
|
|
33
|
+
'title.large': { name: "yxo5i", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-700;line-height:--cnvs-base-line-height-600;font-size:--cnvs-base-font-size-600;color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" },
|
|
34
|
+
'title.medium': { name: "yxo5j", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-700;line-height:--cnvs-base-line-height-500;font-size:--cnvs-base-font-size-500;color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" },
|
|
35
|
+
'title.small': { name: "yxo5k", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-700;line-height:--cnvs-base-line-height-400;font-size:--cnvs-base-font-size-400;color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" },
|
|
36
36
|
// Heading level styles
|
|
37
|
-
'heading.large': { name: "
|
|
38
|
-
'heading.medium': { name: "
|
|
39
|
-
'heading.small': { name: "
|
|
37
|
+
'heading.large': { name: "yxo5l", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-700;line-height:--cnvs-base-line-height-350;font-size:--cnvs-base-font-size-300;color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" },
|
|
38
|
+
'heading.medium': { name: "yxo5m", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-700;line-height:--cnvs-base-line-height-300;font-size:--cnvs-base-font-size-250;color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" },
|
|
39
|
+
'heading.small': { name: "yxo5n", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-700;line-height:--cnvs-base-line-height-250;font-size:--cnvs-base-font-size-200;color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" },
|
|
40
40
|
// Body level styles
|
|
41
|
-
'body.large': { name: "
|
|
42
|
-
'body.medium': { name: "
|
|
43
|
-
'body.small': { name: "
|
|
41
|
+
'body.large': { name: "yxo5o", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-400;line-height:--cnvs-base-line-height-200;font-size:--cnvs-base-font-size-150;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" },
|
|
42
|
+
'body.medium': { name: "yxo5p", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-400;line-height:--cnvs-base-line-height-200;font-size:--cnvs-base-font-size-125;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" },
|
|
43
|
+
'body.small': { name: "yxo5q", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-400;line-height:--cnvs-base-line-height-150;font-size:--cnvs-base-font-size-100;letter-spacing:--cnvs-base-letter-spacing-200;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" },
|
|
44
44
|
// Subtext level styles
|
|
45
|
-
'subtext.large': { name: "
|
|
46
|
-
'subtext.medium': { name: "
|
|
47
|
-
'subtext.small': { name: "
|
|
45
|
+
'subtext.large': { name: "yxo5r", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-400;line-height:--cnvs-base-line-height-100;font-size:--cnvs-base-font-size-75;letter-spacing:--cnvs-base-letter-spacing-150;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" },
|
|
46
|
+
'subtext.medium': { name: "yxo5s", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-400;line-height:--cnvs-base-line-height-50;font-size:--cnvs-base-font-size-50;letter-spacing:--cnvs-base-letter-spacing-100;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" },
|
|
47
|
+
'subtext.small': { name: "yxo5t", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-400;line-height:--cnvs-base-line-height-50;font-size:--cnvs-base-font-size-25;letter-spacing:--cnvs-base-letter-spacing-50;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" },
|
|
48
48
|
},
|
|
49
49
|
variant: {
|
|
50
|
-
error: { name: "
|
|
51
|
-
hint: { name: "
|
|
52
|
-
inverse: { name: "
|
|
50
|
+
error: { name: "yxo5u", styles: "color:var(--cnvs-base-palette-cinnamon-500, rgba(222,46,33,1));" },
|
|
51
|
+
hint: { name: "yxo5v", styles: "color:var(--cnvs-base-palette-licorice-300, rgba(94,106,117,1));" },
|
|
52
|
+
inverse: { name: "yxo5w", styles: "color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));" },
|
|
53
53
|
},
|
|
54
54
|
disabled: {
|
|
55
|
-
true: { name: "
|
|
55
|
+
true: { name: "yxo5x", styles: "cursor:default;color:var(--cnvs-base-palette-licorice-100, rgba(161,170,179,1));" },
|
|
56
56
|
},
|
|
57
57
|
},
|
|
58
58
|
compound: [
|
|
59
59
|
{
|
|
60
60
|
modifiers: { variant: 'inverse', disabled: true },
|
|
61
|
-
styles: { name: "
|
|
61
|
+
styles: { name: "yxo5y", styles: "opacity:var(--cnvs-sys-opacity-disabled, 0.4);color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));" },
|
|
62
62
|
},
|
|
63
63
|
],
|
|
64
64
|
}, "label-text");
|
|
@@ -28,26 +28,26 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
|
28
28
|
const textModifiers = canvas_kit_styling_1.createModifiers({
|
|
29
29
|
typeLevel: {
|
|
30
30
|
// Title level styles
|
|
31
|
-
'title.large': canvas_kit_styling_1.createStyles({ name: "
|
|
32
|
-
'title.medium': canvas_kit_styling_1.createStyles({ name: "
|
|
33
|
-
'title.small': canvas_kit_styling_1.createStyles({ name: "
|
|
31
|
+
'title.large': canvas_kit_styling_1.createStyles({ name: "yxo52", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-700;line-height:--cnvs-base-line-height-600;font-size:--cnvs-base-font-size-600;color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" }),
|
|
32
|
+
'title.medium': canvas_kit_styling_1.createStyles({ name: "yxo53", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-700;line-height:--cnvs-base-line-height-500;font-size:--cnvs-base-font-size-500;color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" }),
|
|
33
|
+
'title.small': canvas_kit_styling_1.createStyles({ name: "yxo54", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-700;line-height:--cnvs-base-line-height-400;font-size:--cnvs-base-font-size-400;color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" }),
|
|
34
34
|
// Heading level styles
|
|
35
|
-
'heading.large': canvas_kit_styling_1.createStyles({ name: "
|
|
36
|
-
'heading.medium': canvas_kit_styling_1.createStyles({ name: "
|
|
37
|
-
'heading.small': canvas_kit_styling_1.createStyles({ name: "
|
|
35
|
+
'heading.large': canvas_kit_styling_1.createStyles({ name: "yxo55", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-700;line-height:--cnvs-base-line-height-350;font-size:--cnvs-base-font-size-300;color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" }),
|
|
36
|
+
'heading.medium': canvas_kit_styling_1.createStyles({ name: "yxo56", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-700;line-height:--cnvs-base-line-height-300;font-size:--cnvs-base-font-size-250;color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" }),
|
|
37
|
+
'heading.small': canvas_kit_styling_1.createStyles({ name: "yxo57", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-700;line-height:--cnvs-base-line-height-250;font-size:--cnvs-base-font-size-200;color:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" }),
|
|
38
38
|
// Body level styles
|
|
39
|
-
'body.large': canvas_kit_styling_1.createStyles({ name: "
|
|
40
|
-
'body.medium': canvas_kit_styling_1.createStyles({ name: "
|
|
41
|
-
'body.small': canvas_kit_styling_1.createStyles({ name: "
|
|
39
|
+
'body.large': canvas_kit_styling_1.createStyles({ name: "yxo58", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-400;line-height:--cnvs-base-line-height-200;font-size:--cnvs-base-font-size-150;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" }),
|
|
40
|
+
'body.medium': canvas_kit_styling_1.createStyles({ name: "yxo59", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-400;line-height:--cnvs-base-line-height-200;font-size:--cnvs-base-font-size-125;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" }),
|
|
41
|
+
'body.small': canvas_kit_styling_1.createStyles({ name: "yxo5a", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-400;line-height:--cnvs-base-line-height-150;font-size:--cnvs-base-font-size-100;letter-spacing:--cnvs-base-letter-spacing-200;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" }),
|
|
42
42
|
// Subtext level styles
|
|
43
|
-
'subtext.large': canvas_kit_styling_1.createStyles({ name: "
|
|
44
|
-
'subtext.medium': canvas_kit_styling_1.createStyles({ name: "
|
|
45
|
-
'subtext.small': canvas_kit_styling_1.createStyles({ name: "
|
|
43
|
+
'subtext.large': canvas_kit_styling_1.createStyles({ name: "yxo5b", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-400;line-height:--cnvs-base-line-height-100;font-size:--cnvs-base-font-size-75;letter-spacing:--cnvs-base-letter-spacing-150;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" }),
|
|
44
|
+
'subtext.medium': canvas_kit_styling_1.createStyles({ name: "yxo5c", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-400;line-height:--cnvs-base-line-height-50;font-size:--cnvs-base-font-size-50;letter-spacing:--cnvs-base-letter-spacing-100;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" }),
|
|
45
|
+
'subtext.small': canvas_kit_styling_1.createStyles({ name: "yxo5d", styles: "font-family:--cnvs-base-font-family-50;font-weight:--cnvs-base-font-weight-400;line-height:--cnvs-base-line-height-50;font-size:--cnvs-base-font-size-25;letter-spacing:--cnvs-base-letter-spacing-50;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" }),
|
|
46
46
|
},
|
|
47
47
|
variant: {
|
|
48
|
-
error: canvas_kit_styling_1.createStyles({ name: "
|
|
49
|
-
hint: canvas_kit_styling_1.createStyles({ name: "
|
|
50
|
-
inverse: canvas_kit_styling_1.createStyles({ name: "
|
|
48
|
+
error: canvas_kit_styling_1.createStyles({ name: "yxo5e", styles: "color:var(--cnvs-base-palette-cinnamon-500, rgba(222,46,33,1));" }),
|
|
49
|
+
hint: canvas_kit_styling_1.createStyles({ name: "yxo5f", styles: "color:var(--cnvs-base-palette-licorice-300, rgba(94,106,117,1));" }),
|
|
50
|
+
inverse: canvas_kit_styling_1.createStyles({ name: "yxo5g", styles: "color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));" }),
|
|
51
51
|
},
|
|
52
52
|
});
|
|
53
53
|
/**
|
|
@@ -4,11 +4,11 @@ import { handleCsProp, createStencil, px2rem, keyframes } from '@workday/canvas-
|
|
|
4
4
|
import { base, system } from '@workday/canvas-tokens-web';
|
|
5
5
|
const grow = keyframes({ name: "b0dw69", styles: "from{transform:scale(0.85);}to{transform:scale(1.0);}" });
|
|
6
6
|
const countBadgeStencil = createStencil({
|
|
7
|
-
base: { name: "
|
|
7
|
+
base: { name: "krub22", styles: "align-items:center;animation:animation-b0dw69 0.2s ease;border-radius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));box-sizing:border-box;display:inline-flex;font-family:var(--cnvs-sys-font-family-default, \"Roboto\");font-size:var(--cnvs-sys-font-size-subtext-medium, 0.75rem);font-weight:var(--cnvs-sys-font-weight-bold, 700);height:1.25rem;justify-content:center;line-height:1.25rem;min-width:1.25rem;padding:0 0.40625rem;" },
|
|
8
8
|
modifiers: {
|
|
9
9
|
variant: {
|
|
10
|
-
default: { name: "
|
|
11
|
-
inverse: { name: "
|
|
10
|
+
default: { name: "krub23", styles: "background:var(--cnvs-base-palette-cinnamon-500, rgba(222,46,33,1));color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));text-shadow:0 0 0.0625rem rgba(0,0,0, 0.35);" },
|
|
11
|
+
inverse: { name: "krub24", styles: "background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));box-shadow:0 0.0625rem 0.125rem rgba(0,0,0, 0.25);color:var(--cnvs-base-palette-blueberry-400, rgba(8,117,225,1));" },
|
|
12
12
|
},
|
|
13
13
|
},
|
|
14
14
|
}, "");
|
|
@@ -18,7 +18,7 @@ export const buttonVars = {
|
|
|
18
18
|
/**
|
|
19
19
|
* Base styles for Buttons.
|
|
20
20
|
*/
|
|
21
|
-
const baseButtonStyles = createStyles({ name: "
|
|
21
|
+
const baseButtonStyles = createStyles({ name: "krub11", 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(--css-button-default-background, transparent);color:var(--css-button-default-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));border-width:1px;border-style:solid;gap:var(--cnvs-sys-space-x2, calc(0.25rem * 2));border-color:var(--css-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(--css-button-default-borderRadius, var(--cnvs-sys-shape-round, calc(0.25rem * 250)));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(--css-button-disabled-opacity, 1);}& span .wd-icon-fill{transition-duration:40ms;fill:var(--css-button-default-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-default-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}&:focus-visible, &.focus{background-color:var(--css-button-focus-background, transparent);border-color:var(--css-button-focus-border, transparent);color:var(--css-button-focus-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));& span .wd-icon-fill{fill:var(--css-button-focus-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-focus-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}box-shadow:0 0 0 2px var(--css-button-focus-boxShadowInner, var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1))), 0 0 0 calc(2px + 2px) var(--css-button-focus-boxShadowOuter, var(--cnvs-brand-primary-base, rgba(8,117,225,1)));}&:hover, &.hover{background-color:var(--css-button-hover-background, var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1)));border-color:var(--css-button-hover-border, transparent);color:var(--css-button-hover-label-emotion-safe, var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1)));& span .wd-icon-fill{fill:var(--css-button-hover-icon, var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1)));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-hover-icon, var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1)));}}&:hover:active{transition-duration:40ms;}&:active, &.active{background-color:var(--css-button-active-background, transparent);border-color:var(--css-button-active-border, transparent);color:var(--css-button-active-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));& span .wd-icon-fill{fill:var(--css-button-active-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-active-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}}&:disabled, &.disabled{background-color:var(--css-button-disabled-background, transparent);border-color:var(--css-button-disabled-border, transparent);color:var(--css-button-disabled-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));& span .wd-icon-fill{fill:var(--css-button-disabled-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-disabled-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}}" });
|
|
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: "ruj811", styles: "font-family:\"R
|
|
|
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: "krub12", 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: "krub13", 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: "krub14", 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: "krub15", 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: "krub16", styles: "padding:0;min-width:calc(var(--cnvs-sys-space-x4, calc(0.25rem * 4)) * 3);" }),
|
|
37
|
+
largeStart: createStyles({ name: "krub17", 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: "krub18", 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: "krub19", styles: "padding:0;min-width:var(--cnvs-sys-space-x10, calc(0.25rem * 10));" }),
|
|
40
|
+
mediumStart: createStyles({ name: "krub1a", 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: "krub1b", 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: "krub1c", styles: "padding:0;min-width:var(--cnvs-sys-space-x8, calc(0.25rem * 8));" }),
|
|
43
|
+
smallStart: createStyles({ name: "krub1d", 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: "krub1e", 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: "krub1f", styles: "padding:0;min-width:var(--cnvs-sys-space-x6, calc(0.25rem * 6));" }),
|
|
46
|
+
extraSmallStart: createStyles({ name: "krub1g", 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: "krub1h", 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: "krub21", styles: "--css-button-default-background:var(--cnvs-brand-error-base, rgba(222,46,33,1));--css-button-default-border:transparent;--css-button-default-borderRadius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));--css-button-default-label-emotion-safe:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--css-button-default-icon:var(--cnvs-brand-error-accent, rgba(255,255,255,1));&:hover, &.hover{--css-button-hover-background:var(--cnvs-brand-error-dark, rgba(163,27,18,1));--css-button-hover-border:transparent;--css-button-hover-label-emotion-safe:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--css-button-hover-icon:var(--cnvs-brand-error-accent, rgba(255,255,255,1));}&:focus-visible, &.focus{--css-button-focus-background:var(--cnvs-brand-error-base, rgba(222,46,33,1));--css-button-focus-border:transparent;--css-button-focus-label-emotion-safe:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--css-button-focus-icon:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--css-button-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}&:active, &.active{--css-button-active-background:var(--cnvs-brand-error-darkest, rgba(128,22,14,1));--css-button-active-border:transparent;--css-button-active-label-emotion-safe:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--css-button-active-icon:var(--cnvs-brand-error-accent, rgba(255,255,255,1));}&:disabled, &:active:disabled, &:focus:disabled, &:hover:disabled{--css-button-disabled-background:var(--cnvs-brand-error-base, rgba(222,46,33,1));--css-button-disabled-label-emotion-safe:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--css-button-disabled-icon:var(--cnvs-brand-error-accent, rgba(255,255,255,1));--css-button-disabled-opacity:0.4;}" });
|
|
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: "krub1x", styles: "--css-button-default-background:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--css-button-default-border:transparent;--css-button-default-borderRadius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));--css-button-default-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-default-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-hover-background:var(--cnvs-brand-primary-dark, rgba(0,92,185,1));--css-button-hover-border:transparent;--css-button-hover-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-hover-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-focus-background:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--css-button-focus-border:transparent;--css-button-focus-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-focus-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));--css-button-active-background:var(--cnvs-brand-primary-darkest, rgba(0,67,135,1));--css-button-active-border:transparent;--css-button-active-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-active-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-disabled-background:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--css-button-disabled-border:transparent;--css-button-disabled-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-disabled-opacity:0.4;--css-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: "krub1y", styles: "--css-button-default-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-default-borderRadius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));--css-button-default-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-default-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-hover-background:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--css-button-hover-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-hover-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-focus-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-focus-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-boxShadowInner:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-boxShadowOuter:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-active-background:var(--cnvs-base-palette-soap-400, rgba(223,226,230,1));--css-button-active-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-active-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-disabled-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-disabled-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-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: "krub1z", styles: "--css-button-default-background:transparent;--css-button-default-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-default-borderRadius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));--css-button-default-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-default-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-hover-background:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-hover-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-hover-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-hover-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-focus-background:transparent;--css-button-focus-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));--css-button-active-background:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-active-border:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-active-label-emotion-safe:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-active-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-disabled-background:transparent;--css-button-disabled-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-disabled-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-disabled-opacity:0.4;--css-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: "krub20", styles: "--css-button-default-background:transparent;--css-button-default-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-default-label-emotion-safe:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-default-icon:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-hover-background:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--css-button-hover-border:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--css-button-hover-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-hover-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-focus-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-focus-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-focus-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-boxShadowInner:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-boxShadowOuter:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-active-background:var(--cnvs-base-palette-soap-400, rgba(223,226,230,1));--css-button-active-border:var(--cnvs-base-palette-soap-400, rgba(223,226,230,1));--css-button-active-label-emotion-safe:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-active-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-disabled-background:transparent;--css-button-disabled-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-disabled-label-emotion-safe:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-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: "krub1i", styles: "padding-inline:var(--cnvs-sys-space-x2, calc(0.25rem * 2));min-width:auto;text-decoration:underline;border:0px;--css-button-default-background:transparent;--css-button-default-border:transparent;--css-button-default-borderRadius:var(--cnvs-sys-shape-x1, 0.25rem);--css-button-default-label-emotion-safe:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--css-button-default-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-hover-background:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--css-button-hover-border:transparent;--css-button-hover-label-emotion-safe:var(--cnvs-brand-primary-dark, rgba(0,92,185,1));--css-button-hover-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-background:transparent;--css-button-focus-border:transparent;--css-button-focus-label-emotion-safe:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--css-button-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-boxShadowInner:var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));--css-button-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));--css-button-active-background:var(--cnvs-base-palette-soap-400, rgba(223,226,230,1));--css-button-active-border:transparent;--css-button-active-label-emotion-safe:var(--cnvs-brand-primary-darkest, rgba(0,67,135,1));--css-button-active-icon:var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1));--css-button-disabled-background:transparent;--css-button-disabled-border:transparent;--css-button-disabled-label-emotion-safe:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--css-button-disabled-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-disabled-opacity:0.4;&:focus-visible, &.focus{box-shadow:0 0 0 0px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)), 0 0 0 calc(2px + 0px) var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}" });
|
|
10
10
|
export const tertiaryButtonModifiers = createModifiers({
|
|
11
11
|
isThemeable: {
|
|
12
|
-
true: createStyles({ name: "
|
|
12
|
+
true: createStyles({ name: "krub1j", styles: "--css-button-default-icon:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--css-button-hover-icon:var(--cnvs-brand-primary-dark, rgba(0,92,185,1));--css-button-focus-icon:var(--cnvs-brand-primary-base, rgba(8,117,225,1));--css-button-active-icon:var(--cnvs-brand-primary-darkest, rgba(0,67,135,1));--css-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: "krub1k", styles: "--css-button-default-background:transparent;--css-button-default-border:transparent;--css-button-default-label-emotion-safe:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-default-icon:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-hover-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-hover-border:transparent;--css-button-hover-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-hover-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-focus-border:transparent;--css-button-focus-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-active-background:var(--cnvs-base-palette-soap-200, rgba(240,241,242,1));--css-button-active-border:transparent;--css-button-active-label-emotion-safe:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-active-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-disabled-background:transparent;--css-button-disabled-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-disabled-label-emotion-safe:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-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, rgba(51,51,51,1)), 0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));}" }),
|
|
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: "krub1l", styles: "border-radius:999px;padding:0;min-width:calc(var(--cnvs-sys-space-x4, calc(0.25rem * 4)) * 3);" }),
|
|
19
|
+
largeStart: createStyles({ name: "krub1m", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
|
|
20
|
+
largeEnd: createStyles({ name: "krub1n", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
|
|
21
|
+
mediumOnly: createStyles({ name: "krub1o", styles: "padding:0;min-width:2.5rem;border-radius:999px;" }),
|
|
22
|
+
mediumStart: createStyles({ name: "krub1p", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
|
|
23
|
+
mediumEnd: createStyles({ name: "krub1q", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
|
|
24
|
+
smallOnly: createStyles({ name: "krub1r", styles: "padding:0;min-width:2rem;border-radius:999px;" }),
|
|
25
|
+
smallStart: createStyles({ name: "krub1s", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
|
|
26
|
+
smallEnd: createStyles({ name: "krub1t", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
|
|
27
|
+
extraSmallOnly: createStyles({ name: "krub1u", styles: "padding:0;min-width:1.5rem;border-radius:999px;" }),
|
|
28
|
+
extraSmallStart: createStyles({ name: "krub1v", styles: "padding-inline-start:0.25rem;padding-inline-end:0.5rem;" }),
|
|
29
|
+
extraSmallEnd: createStyles({ name: "krub1w", styles: "padding-inline-start:0.5rem;padding-inline-end:0.25rem;" }),
|
|
30
30
|
},
|
|
31
31
|
});
|
|
32
32
|
export const TertiaryButton = createComponent('button')({
|
|
@@ -5,7 +5,7 @@ import { createStyles } from '@workday/canvas-kit-styling';
|
|
|
5
5
|
import { base, system } from '@workday/canvas-tokens-web';
|
|
6
6
|
import { CardHeading } from './CardHeading';
|
|
7
7
|
import { CardBody } from './CardBody';
|
|
8
|
-
const cardBaseStyles = createStyles({ name: "
|
|
8
|
+
const cardBaseStyles = createStyles({ name: "krub10", styles: "box-shadow:var(--cnvs-sys-depth-1, 0 0.0625rem 0.25rem 0 rgba(31,38,46,0.12),0 0.125rem 0.5rem 0 rgba(31,38,46,0.08));padding:var(--cnvs-sys-space-x8, calc(0.25rem * 8));background-color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));border:0.0625rem solid var(--cnvs-base-palette-soap-500, rgba(206,211,217,1));border-radius:var(--cnvs-sys-shape-x2, calc(0.25rem * 2));" });
|
|
9
9
|
/**
|
|
10
10
|
* `Card` is a container component that holds a {@link CardBody Card.Body} and an optional
|
|
11
11
|
* {@link CardHeading Card.Heading}. `Card` wraps a non-semantic `div` element. The element can be
|
|
@@ -4,7 +4,7 @@ import { mergeStyles } from '@workday/canvas-kit-react/layout';
|
|
|
4
4
|
import { BodyText } from '@workday/canvas-kit-react/text';
|
|
5
5
|
import { createStyles } from '@workday/canvas-kit-styling';
|
|
6
6
|
import { system } from '@workday/canvas-tokens-web';
|
|
7
|
-
const cardHeadingBaseStyles = createStyles({ name: "
|
|
7
|
+
const cardHeadingBaseStyles = createStyles({ name: "krubz", styles: "font-weight:var(--cnvs-sys-font-weight-bold, 700);margin-bottom:var(--cnvs-sys-space-x6, calc(0.25rem * 6));margin-top:0px;" });
|
|
8
8
|
export const CardHeading = createComponent('h3')({
|
|
9
9
|
displayName: 'Card.Heading',
|
|
10
10
|
Component: ({ children, ...elemProps }, ref, Element) => {
|
|
@@ -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: "krub0", 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: "krub1", 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',
|
|
@@ -2,7 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
import { GrowthBehavior, ErrorType, Themeable } from '@workday/canvas-kit-react/common';
|
|
3
3
|
import { FormFieldLabelPosition } from './types';
|
|
4
4
|
/**
|
|
5
|
-
* @deprecated ⚠️ `FormFieldProps` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--
|
|
5
|
+
* @deprecated ⚠️ `FormFieldProps` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
|
|
6
6
|
*/
|
|
7
7
|
export interface FormFieldProps extends Themeable, React.HTMLAttributes<HTMLDivElement>, GrowthBehavior {
|
|
8
8
|
/**
|
|
@@ -59,7 +59,7 @@ export interface FormFieldErrorBehavior {
|
|
|
59
59
|
error?: ErrorType;
|
|
60
60
|
}
|
|
61
61
|
/**
|
|
62
|
-
* @deprecated ⚠️ `FormField` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--
|
|
62
|
+
* @deprecated ⚠️ `FormField` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
|
|
63
63
|
*/
|
|
64
64
|
export declare class FormField extends React.Component<React.PropsWithChildren<FormFieldProps>> {
|
|
65
65
|
static LabelPosition: typeof FormFieldLabelPosition;
|
|
@@ -56,7 +56,7 @@ const FormFieldInputContainer = styled('div')(({ grow, labelPosition }) => {
|
|
|
56
56
|
};
|
|
57
57
|
});
|
|
58
58
|
/**
|
|
59
|
-
* @deprecated ⚠️ `FormField` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--
|
|
59
|
+
* @deprecated ⚠️ `FormField` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
|
|
60
60
|
*/
|
|
61
61
|
export class FormField extends React.Component {
|
|
62
62
|
constructor() {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { ErrorType, Themeable } from '@workday/canvas-kit-react/common';
|
|
3
3
|
/**
|
|
4
|
-
* @deprecated ⚠️ `HintProps` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--
|
|
4
|
+
* @deprecated ⚠️ `HintProps` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
|
|
5
5
|
*/
|
|
6
6
|
export interface HintProps extends Themeable, React.HTMLAttributes<HTMLParagraphElement> {
|
|
7
7
|
/**
|
|
@@ -20,7 +20,7 @@ export interface HintProps extends Themeable, React.HTMLAttributes<HTMLParagraph
|
|
|
20
20
|
alertLabel?: string;
|
|
21
21
|
}
|
|
22
22
|
/**
|
|
23
|
-
* @deprecated ⚠️ `Hint` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--
|
|
23
|
+
* @deprecated ⚠️ `Hint` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
|
|
24
24
|
*/
|
|
25
25
|
declare class Hint extends React.Component<HintProps> {
|
|
26
26
|
static ErrorType: typeof ErrorType;
|
|
@@ -4,7 +4,7 @@ import { space } from '@workday/canvas-kit-react/tokens';
|
|
|
4
4
|
import { Subtext, Text } from '@workday/canvas-kit-react/text';
|
|
5
5
|
const Message = styled(Subtext)(({ error, theme }) => error === ErrorType.Error && { color: theme.canvas.palette.error.main });
|
|
6
6
|
/**
|
|
7
|
-
* @deprecated ⚠️ `Hint` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--
|
|
7
|
+
* @deprecated ⚠️ `Hint` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
|
|
8
8
|
*/
|
|
9
9
|
class Hint extends React.Component {
|
|
10
10
|
render() {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { FormFieldLabelPosition, FormFieldLabelPositionBehavior } from './types';
|
|
3
3
|
/**
|
|
4
|
-
* @deprecated ⚠️ `LabelProps` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--
|
|
4
|
+
* @deprecated ⚠️ `LabelProps` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
|
|
5
5
|
*/
|
|
6
6
|
export interface LabelProps extends FormFieldLabelPositionBehavior {
|
|
7
7
|
/**
|
|
@@ -36,7 +36,7 @@ export interface LabelProps extends FormFieldLabelPositionBehavior {
|
|
|
36
36
|
accessibleHide?: boolean;
|
|
37
37
|
}
|
|
38
38
|
/**
|
|
39
|
-
* @deprecated ⚠️ `Label` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--
|
|
39
|
+
* @deprecated ⚠️ `Label` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
|
|
40
40
|
*/
|
|
41
41
|
declare class Label extends React.Component<React.PropsWithChildren<LabelProps>> {
|
|
42
42
|
static Position: typeof FormFieldLabelPosition;
|
|
@@ -50,7 +50,7 @@ const LegendComponent = styled('legend')(...labelStyles, ({ labelPosition }) =>
|
|
|
50
50
|
});
|
|
51
51
|
const LabelComponent = styled('label')(...labelStyles);
|
|
52
52
|
/**
|
|
53
|
-
* @deprecated ⚠️ `Label` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--
|
|
53
|
+
* @deprecated ⚠️ `Label` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
|
|
54
54
|
*/
|
|
55
55
|
class Label extends React.Component {
|
|
56
56
|
render() {
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
*
|
|
3
3
|
* The position of the FormField label (Top vs Left vs Hidden).
|
|
4
4
|
*
|
|
5
|
-
* @deprecated ⚠️ `FormFieldLabelPosition` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--
|
|
5
|
+
* @deprecated ⚠️ `FormFieldLabelPosition` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
|
|
6
6
|
*/
|
|
7
7
|
export declare enum FormFieldLabelPosition {
|
|
8
8
|
Top = 0,
|
|
@@ -10,7 +10,7 @@ export declare enum FormFieldLabelPosition {
|
|
|
10
10
|
Hidden = 2
|
|
11
11
|
}
|
|
12
12
|
/**
|
|
13
|
-
* @deprecated ⚠️ `FormFieldLabelPositionBehavior` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--
|
|
13
|
+
* @deprecated ⚠️ `FormFieldLabelPositionBehavior` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
|
|
14
14
|
*/
|
|
15
15
|
export interface FormFieldLabelPositionBehavior {
|
|
16
16
|
labelPosition?: FormFieldLabelPosition;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
*
|
|
3
3
|
* The position of the FormField label (Top vs Left vs Hidden).
|
|
4
4
|
*
|
|
5
|
-
* @deprecated ⚠️ `FormFieldLabelPosition` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--
|
|
5
|
+
* @deprecated ⚠️ `FormFieldLabelPosition` in Main has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
|
|
6
6
|
*/
|
|
7
7
|
export var FormFieldLabelPosition;
|
|
8
8
|
(function (FormFieldLabelPosition) {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { CSProps } from '@workday/canvas-kit-styling';
|
|
2
2
|
/**
|
|
3
3
|
* A simple component that displays three horizontal dots, to be used when some data is loading.
|
|
4
4
|
*/
|
|
5
|
-
export declare
|
|
5
|
+
export declare const LoadingDots: import("@workday/canvas-kit-react/common").ElementComponent<"div", CSProps>;
|
|
6
6
|
//# sourceMappingURL=LoadingDots.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LoadingDots.d.ts","sourceRoot":"","sources":["../../../../loading-dots/lib/LoadingDots.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"LoadingDots.d.ts","sourceRoot":"","sources":["../../../../loading-dots/lib/LoadingDots.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAwC,OAAO,EAAC,MAAM,6BAA6B,CAAC;AAwD3F;;GAEG;AACH,eAAO,MAAM,WAAW,6EAWtB,CAAC"}
|