UNPKG

@workday/canvas-kit-react

Version:

The parent module that contains all Workday Canvas Kit React components

github.com/Workday/canvas-kit

Workday/canvas-kit

129 lines (128 loc) • 13.2 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
import { jsx as _jsx } from "react/jsx-runtime"; import { createComponent } from '@workday/canvas-kit-react/common'; import { systemIconStencil } from '@workday/canvas-kit-react/icon'; import { mergeStyles } from '@workday/canvas-kit-react/layout'; import { calc, createStencil, createVars, cssVar, px2rem } from '@workday/canvas-kit-styling'; import { base, system } from '@workday/canvas-tokens-web'; import { ButtonLabel } from '../lib/parts/ButtonLabel'; import { ButtonLabelIcon } from '../lib/parts/ButtonLabelIcon'; /** * The purpose of this object is for the `colors` prop - to provide backwards compatibility with how we allowed color overrides in Emotion. */ export const buttonColorPropVars = { default: createVars({ id: "2f7547", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }), focus: createVars({ id: "5e7d9c", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }), hover: createVars({ id: "60f068", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }), active: createVars({ id: "76d965", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }), disabled: createVars({ id: "4fc0b7", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }), }; /** * Base styles for Buttons. */ export const buttonStencil = createStencil({ vars: { background: '', border: '', boxShadowInner: '', boxShadowOuter: '', label: '', opacity: '', borderRadius: '', }, base: { name: "1vchmp", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));font-weight:var(--cnvs-sys-font-weight-medium);background-color:var(--background-2f7547, var(--background-button-a19f67, transparent));color:var(--label-2f7547, var(--label-button-a19f67, var(--cnvs-sys-color-fg-strong)));border-width:0.0625rem;border-style:solid;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));border-color:var(--border-2f7547, var(--border-button-a19f67, transparent));cursor:pointer;display:inline-flex;box-shadow:none;align-items:center;justify-content:center;outline:0.125rem transparent;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-radius:var(--borderRadius-2f7547, var(--borderRadius-button-a19f67, var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem))));position:relative;vertical-align:middle;overflow:hidden;--color-system-icon-c9acc3:var(--icon-2f7547, var(--cnvs-sys-color-fg-strong));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(--opacity-2f7547, var(--opacity-button-a19f67, var(--cnvs-sys-opacity-full)));}&:focus-visible, &.focus{background-color:var(--background-5e7d9c, var(--background-button-a19f67, transparent));border-color:var(--border-5e7d9c, var(--border-button-a19f67, transparent));color:var(--label-5e7d9c, var(--label-button-a19f67, var(--cnvs-sys-color-fg-strong)));--color-system-icon-c9acc3:var(--icon-5e7d9c, var(--cnvs-sys-color-fg-strong));outline:0.125rem solid transparent;outline-offset:0.125rem;box-shadow:0 0 0 0.125rem var(--boxShadowInner-5e7d9c, var(--boxShadowInner-button-a19f67, var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1))))),0 0 0 0.25rem var(--boxShadowOuter-5e7d9c, var(--boxShadowOuter-button-a19f67, var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)))));}&:hover, &.hover{background-color:var(--background-60f068, var(--background-button-a19f67, var(--cnvs-sys-color-surface-contrast-strong, var(--cnvs-sys-color-bg-contrast-strong, oklch(0.0672 0 0 / 0.89)))));border-color:var(--border-60f068, var(--border-button-a19f67, transparent));color:var(--label-60f068, var(--label-button-a19f67, var(--cnvs-sys-color-fg-stronger)));--color-system-icon-c9acc3:var(--icon-60f068, var(--cnvs-sys-color-fg-stronger));}&:hover:active{transition-duration:40ms;}&:active, &.active{background-color:var(--background-76d965, var(--background-button-a19f67, transparent));border-color:var(--border-76d965, var(--border-button-a19f67, transparent));color:var(--label-76d965, var(--label-button-a19f67, var(--cnvs-sys-color-fg-strong)));--color-system-icon-c9acc3:var(--icon-76d965, var(--cnvs-sys-color-fg-strong));}&:disabled, &.disabled{background-color:var(--background-4fc0b7, var(--background-button-a19f67, transparent));border-color:var(--border-4fc0b7, var(--border-button-a19f67, transparent));color:var(--label-4fc0b7, var(--label-button-a19f67, var(--cnvs-sys-color-fg-strong)));--color-system-icon-c9acc3:var(--icon-4fc0b7, currentColor);}@media (prefers-contrast: more){&[aria-pressed=\"true\"]{outline:0.125rem solid transparent;outline-offset:-0.0625rem;}&[aria-pressed=\"true\"]:focus-visible, &[aria-pressed=\"true\"].focus{outline:0.25rem double transparent;outline-offset:0;}}svg{pointer-events:none;}" }, modifiers: { /** * Button modifiers that will overwrite the base styles of Buttons. * - `Size`: These modifiers will dictate a size of a Button and has a set of styles to associated with it. * - `iconPosition`: These modifiers will override the existing `Size` styles. These are specific to icon locations * within a button or if there is only an icon and no text. */ size: { large: { name: "403cw", styles: "font-size:var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small, 1rem));line-height:var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small, 1.5rem));letter-spacing:var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-sys-type-letter-spacing-body-small));height:var(--cnvs-sys-size-lg, 3rem);padding-inline:var(--cnvs-sys-padding-lg, var(--cnvs-sys-space-x5, 1.25rem));min-width:var(--cnvs-base-size-1300, 6.5rem);" }, medium: { name: "1zyaiy", styles: "font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));padding-inline:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));gap:var(--cnvs-base-size-75, 0.375rem);min-width:var(--cnvs-base-size-1100, 5.5rem);" }, small: { name: "2j4lsh", styles: "font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));height:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));padding-inline:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));min-width:var(--cnvs-base-size-900, 4.5rem);" }, extraSmall: { name: "kmsuz", styles: "font-size:var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem));line-height:var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium));height:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));padding-inline:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));min-width:auto;" } }, grow: { true: { name: "wjv1k", styles: "width:100%;max-width:100%;" } }, // IconPosition Styles iconPosition: { only: { name: "28x48v", styles: "padding:0;" }, start: { name: "1zy6hy", styles: "" }, end: { name: "10cm92", styles: "" } } }, // Compound Modifier Styles compound: [ { modifiers: { size: 'large', iconPosition: 'only' }, styles: { name: "3csdae", styles: "min-width:var(--cnvs-sys-size-lg, 3rem);" } }, { modifiers: { size: 'large', iconPosition: 'start' }, styles: { name: "3g1nba", styles: "padding-inline-start:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));padding-inline-end:var(--cnvs-sys-padding-lg, var(--cnvs-sys-space-x5, 1.25rem));" } }, { modifiers: { size: 'large', iconPosition: 'end' }, styles: { name: "1f819w", styles: "padding-inline-start:var(--cnvs-sys-padding-lg, var(--cnvs-sys-space-x5, 1.25rem));padding-inline-end:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));" } }, { modifiers: { size: 'medium', iconPosition: 'only' }, styles: { name: "4c3fw1", styles: "min-width:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));" } }, { modifiers: { size: 'medium', iconPosition: 'start' }, styles: { name: "2b1mg7", styles: "padding-inline-start:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));padding-inline-end:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));" } }, { modifiers: { size: 'medium', iconPosition: 'end' }, styles: { name: "431m32", styles: "padding-inline-start:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));padding-inline-end:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));" } }, { modifiers: { size: 'small', iconPosition: 'only' }, styles: { name: "2e8f1p", styles: "min-width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));" } }, { modifiers: { size: 'small', iconPosition: 'start' }, styles: { name: "4a0wgo", styles: "padding-inline-start:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));padding-inline-end:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));" } }, { modifiers: { size: 'small', iconPosition: 'end' }, styles: { name: "11gwm1", styles: "padding-inline-start:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));padding-inline-end:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));" } }, { modifiers: { size: 'extraSmall', iconPosition: 'only' }, styles: { name: "23drrp", styles: "min-width:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));" } }, { modifiers: { size: 'extraSmall', iconPosition: 'start' }, styles: { name: "1xq4k7", styles: "padding-inline-start:calc(var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem)) + 0.125rem);padding-inline-end:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));" } }, { modifiers: { size: 'extraSmall', iconPosition: 'end' }, styles: { name: "1flbof", styles: "padding-inline-start:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));padding-inline-end:calc(var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem)) + 0.125rem);" } } ] }, "button-a19f67"); /** * The baseLegacy button which which is the foundation of all Button variants (`PrimaryButton`, * `SecondaryButton`, `TertiaryButton`, `DeleteButton`, `ToolbarIconButton` and `ToolbarDropdownButton`). */ export const BaseButton = createComponent('button')({ displayName: 'BaseButton', Component: ({ children, size, fillIcon, grow, iconPosition, icon, colors, ...elemProps }, ref, Element) => { return (_jsx(Element, { ref: ref, type: "button", ...mergeStyles(elemProps, [ buttonStencil({ size, iconPosition, grow }), buttonColorPropVars.default((colors === null || colors === void 0 ? void 0 : colors.default) || {}), buttonColorPropVars.focus((colors === null || colors === void 0 ? void 0 : colors.focus) || {}), buttonColorPropVars.hover((colors === null || colors === void 0 ? void 0 : colors.hover) || {}), buttonColorPropVars.active((colors === null || colors === void 0 ? void 0 : colors.active) || {}), buttonColorPropVars.disabled((colors === null || colors === void 0 ? void 0 : colors.disabled) || {}), ]), children: children })); }, subComponents: { Icon: ButtonLabelIcon, Label: ButtonLabel, }, });