@workday/canvas-kit-react 10.0.0-alpha.552-next.0 → 10.0.0-alpha.554-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.
Files changed (21) hide show
  1. package/button/lib/BaseButton.tsx +44 -14
  2. package/dist/commonjs/button/lib/BaseButton.d.ts.map +1 -1
  3. package/dist/commonjs/button/lib/BaseButton.js +22 -171
  4. package/dist/commonjs/button/lib/DeleteButton.js +1 -28
  5. package/dist/commonjs/button/lib/PrimaryButton.js +2 -56
  6. package/dist/commonjs/button/lib/SecondaryButton.js +2 -60
  7. package/dist/commonjs/button/lib/TertiaryButton.js +15 -109
  8. package/dist/commonjs/tokens/index.d.ts.map +1 -1
  9. package/dist/commonjs/tokens/lib/colors.types.d.ts.map +1 -1
  10. package/dist/es6/button/lib/BaseButton.d.ts.map +1 -1
  11. package/dist/es6/button/lib/BaseButton.js +22 -171
  12. package/dist/es6/button/lib/DeleteButton.js +1 -28
  13. package/dist/es6/button/lib/PrimaryButton.js +2 -56
  14. package/dist/es6/button/lib/SecondaryButton.js +2 -60
  15. package/dist/es6/button/lib/TertiaryButton.js +15 -109
  16. package/dist/es6/tokens/index.d.ts.map +1 -1
  17. package/dist/es6/tokens/index.js +2 -2
  18. package/dist/es6/tokens/lib/colors.types.d.ts.map +1 -1
  19. package/package.json +6 -6
  20. package/tokens/index.ts +11 -4
  21. package/tokens/lib/colors.types.ts +1 -1
package/button/lib/BaseButton.tsx CHANGED
@@ -56,10 +56,10 @@ export interface ButtonContainerProps extends Partial<SystemIconProps>, GrowthBe
56
56
  export interface BaseButtonProps extends Omit<ButtonContainerProps, 'ref'> {}
57
57
 
58
58
  /**
59
- * Factory function for creating Button vars.
59
+ * Temporary css variables to be used across all Buttons.
60
60
  */
61
- const createButtonVars = () =>
62
- createVars(
61
+ export const buttonVars = {
62
+ default: createVars(
63
63
  'background',
64
64
  'border',
65
65
  'boxShadowInner',
@@ -68,17 +68,47 @@ const createButtonVars = () =>
68
68
  'label',
69
69
  'opacity',
70
70
  'borderRadius'
71
- );
72
-
73
- /**
74
- * Temporary css variables to be used across all Buttons.
75
- */
76
- export const buttonVars = {
77
- default: createButtonVars(),
78
- hover: createButtonVars(),
79
- active: createButtonVars(),
80
- focus: createButtonVars(),
81
- disabled: createButtonVars(),
71
+ ),
72
+ hover: createVars(
73
+ 'background',
74
+ 'border',
75
+ 'boxShadowInner',
76
+ 'boxShadowOuter',
77
+ 'icon',
78
+ 'label',
79
+ 'opacity',
80
+ 'borderRadius'
81
+ ),
82
+ active: createVars(
83
+ 'background',
84
+ 'border',
85
+ 'boxShadowInner',
86
+ 'boxShadowOuter',
87
+ 'icon',
88
+ 'label',
89
+ 'opacity',
90
+ 'borderRadius'
91
+ ),
92
+ focus: createVars(
93
+ 'background',
94
+ 'border',
95
+ 'boxShadowInner',
96
+ 'boxShadowOuter',
97
+ 'icon',
98
+ 'label',
99
+ 'opacity',
100
+ 'borderRadius'
101
+ ),
102
+ disabled: createVars(
103
+ 'background',
104
+ 'border',
105
+ 'boxShadowInner',
106
+ 'boxShadowOuter',
107
+ 'icon',
108
+ 'label',
109
+ 'opacity',
110
+ 'borderRadius'
111
+ ),
82
112
  };
83
113
 
84
114
  /**
package/dist/commonjs/button/lib/BaseButton.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"BaseButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/BaseButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAkB,cAAc,EAAY,MAAM,kCAAkC,CAAC;AAE5F,OAAO,EAAC,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAG/D,OAAO,EAAC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AACjE,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAE9D,MAAM,WAAW,oBAAqB,SAAQ,OAAO,CAAC,eAAe,CAAC,EAAE,cAAc;IACpF;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;GAIG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC;CAAG;AAiB7E;;GAEG;AACH,eAAO,MAAM,UAAU;;;;;;CAMtB,CAAC;AAqGF;;;;;GAKG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;cA4E1B,CAAC;AAEH,wBAAgB,UAAU,CAAC,MAAM,GAAE,MAAW,UAE7C;AAED,wBAAgB,eAAe,CAC7B,IAAI,CAAC,EAAE,MAAM,OAAO,eAAe,CAAC,IAAI,EACxC,YAAY,CAAC,EAAE,aAAa,EAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GACzB,MAAM,OAAO,eAAe,CAAC,YAAY,CAE3C;AAED;;GAEG;AACH,eAAO,MAAM,UAAU;;;CA8CrB,CAAC"}
1
+ {"version":3,"file":"BaseButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/BaseButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAkB,cAAc,EAAY,MAAM,kCAAkC,CAAC;AAE5F,OAAO,EAAC,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAG/D,OAAO,EAAC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AACjE,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAE9D,MAAM,WAAW,oBAAqB,SAAQ,OAAO,CAAC,eAAe,CAAC,EAAE,cAAc;IACpF;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;GAIG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC;CAAG;AAE7E;;GAEG;AACH,eAAO,MAAM,UAAU;;;;;;CAmDtB,CAAC;AAqGF;;;;;GAKG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;cA4E1B,CAAC;AAEH,wBAAgB,UAAU,CAAC,MAAM,GAAE,MAAW,UAE7C;AAED,wBAAgB,eAAe,CAC7B,IAAI,CAAC,EAAE,MAAM,OAAO,eAAe,CAAC,IAAI,EACxC,YAAY,CAAC,EAAE,aAAa,EAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GACzB,MAAM,OAAO,eAAe,CAAC,YAAY,CAE3C;AAED;;GAEG;AACH,eAAO,MAAM,UAAU;;;CA8CrB,CAAC"}
package/dist/commonjs/button/lib/BaseButton.js CHANGED
@@ -27,114 +27,20 @@ const common_1 = require("@workday/canvas-kit-react/common");
27
27
  const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
28
28
  const layout_1 = require("@workday/canvas-kit-react/layout");
29
29
  const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
30
- /**
31
- * Factory function for creating Button vars.
32
- */
33
- const createButtonVars = () => canvas_kit_styling_1.createVars('background', 'border', 'boxShadowInner', 'boxShadowOuter', 'icon', 'label', 'opacity', 'borderRadius');
34
30
  /**
35
31
  * Temporary css variables to be used across all Buttons.
36
32
  */
37
33
  exports.buttonVars = {
38
- default: createButtonVars(),
39
- hover: createButtonVars(),
40
- active: createButtonVars(),
41
- focus: createButtonVars(),
42
- disabled: createButtonVars(),
34
+ default: canvas_kit_styling_1.createVars({ id: "css-button-vars-default", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
35
+ hover: canvas_kit_styling_1.createVars({ id: "css-button-vars-hover", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
36
+ active: canvas_kit_styling_1.createVars({ id: "css-button-vars-active", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
37
+ focus: canvas_kit_styling_1.createVars({ id: "css-button-vars-focus", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
38
+ disabled: canvas_kit_styling_1.createVars({ id: "css-button-vars-disabled", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
43
39
  };
44
40
  /**
45
41
  * Base styles for Buttons.
46
42
  */
47
- const baseButtonStyles = canvas_kit_styling_1.createStyles({
48
- fontFamily: '"Roboto", "Helvetica Neue", "Helvetica", Arial, sans-serif',
49
- fontSize: '0.875rem',
50
- lineHeight: 'normal',
51
- letterSpacing: '0.015rem',
52
- fontWeight: 'bold',
53
- backgroundColor: canvas_kit_styling_1.cssVar(exports.buttonVars.default.background, 'transparent'),
54
- color: canvas_kit_styling_1.cssVar(exports.buttonVars.default.label, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, '#333333')),
55
- borderWidth: '1px',
56
- borderStyle: 'solid',
57
- gap: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x2, '0.5rem'),
58
- borderColor: canvas_kit_styling_1.cssVar(exports.buttonVars.default.border, 'transparent'),
59
- cursor: 'pointer',
60
- display: 'inline-flex',
61
- boxShadow: 'none',
62
- alignItems: 'center',
63
- justifyContent: 'center',
64
- boxSizing: 'border-box',
65
- outline: '2px transparent',
66
- whiteSpace: 'nowrap',
67
- WebkitFontSmoothing: 'antialiased',
68
- MozOsxFontSmoothing: 'grayscale',
69
- borderRadius: canvas_kit_styling_1.cssVar(exports.buttonVars.default.borderRadius, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.shape.circle, '999px')),
70
- position: 'relative',
71
- verticalAlign: 'middle',
72
- overflow: 'hidden',
73
- transition: 'box-shadow 120ms linear, border 120ms linear, background-color 120ms linear, color 120ms linear',
74
- '&:disabled, &:disabled:active': {
75
- cursor: 'default',
76
- boxShadow: 'none',
77
- opacity: canvas_kit_styling_1.cssVar(exports.buttonVars.disabled.opacity, '1'),
78
- },
79
- '& span .wd-icon-fill': {
80
- transitionDuration: '40ms',
81
- fill: canvas_kit_styling_1.cssVar(exports.buttonVars.default.icon, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, '#333333')),
82
- },
83
- '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
84
- fill: canvas_kit_styling_1.cssVar(exports.buttonVars.default.icon, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, '#333333')),
85
- },
86
- '&:focus-visible, &.focus': {
87
- backgroundColor: canvas_kit_styling_1.cssVar(exports.buttonVars.focus.background, 'transparent'),
88
- borderColor: canvas_kit_styling_1.cssVar(exports.buttonVars.focus.border, 'transparent'),
89
- color: canvas_kit_styling_1.cssVar(exports.buttonVars.focus.label, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, '#333333')),
90
- '& span .wd-icon-fill': {
91
- fill: canvas_kit_styling_1.cssVar(exports.buttonVars.focus.icon, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, '#333333')),
92
- },
93
- '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
94
- fill: canvas_kit_styling_1.cssVar(exports.buttonVars.focus.icon, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, '#333333')),
95
- },
96
- ...common_1.focusRing({
97
- width: 2,
98
- separation: 2,
99
- innerColor: canvas_kit_styling_1.cssVar(exports.buttonVars.focus.boxShadowInner, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100, '#fff')),
100
- outerColor: canvas_kit_styling_1.cssVar(exports.buttonVars.focus.boxShadowOuter, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.base, 'rgba(0,92,184,1)')),
101
- }),
102
- },
103
- '&:hover, &.hover': {
104
- backgroundColor: canvas_kit_styling_1.cssVar(exports.buttonVars.hover.background, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500, '#1e1e1e')),
105
- borderColor: canvas_kit_styling_1.cssVar(exports.buttonVars.hover.border, 'transparent'),
106
- color: canvas_kit_styling_1.cssVar(exports.buttonVars.hover.label, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500, '#1e1e1e')),
107
- '& span .wd-icon-fill': {
108
- fill: canvas_kit_styling_1.cssVar(exports.buttonVars.hover.icon, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500, '#1e1e1e')),
109
- },
110
- '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
111
- fill: canvas_kit_styling_1.cssVar(exports.buttonVars.hover.icon, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500, '#1e1e1e')),
112
- },
113
- },
114
- '&:hover:active': { transitionDuration: '40ms' },
115
- '&:active, &.active': {
116
- backgroundColor: canvas_kit_styling_1.cssVar(exports.buttonVars.active.background, 'transparent'),
117
- borderColor: canvas_kit_styling_1.cssVar(exports.buttonVars.active.border, 'transparent'),
118
- color: canvas_kit_styling_1.cssVar(exports.buttonVars.active.label, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, '#333333')),
119
- '& span .wd-icon-fill': {
120
- fill: canvas_kit_styling_1.cssVar(exports.buttonVars.active.icon, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, '#333333')),
121
- },
122
- '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
123
- fill: canvas_kit_styling_1.cssVar(exports.buttonVars.active.icon),
124
- },
125
- },
126
- '&:disabled': {
127
- backgroundColor: canvas_kit_styling_1.cssVar(exports.buttonVars.disabled.background, 'transparent'),
128
- borderColor: canvas_kit_styling_1.cssVar(exports.buttonVars.disabled.border, 'transparent'),
129
- color: canvas_kit_styling_1.cssVar(exports.buttonVars.disabled.label, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, '#333333')),
130
- '& span .wd-icon-fill': {
131
- fill: canvas_kit_styling_1.cssVar(exports.buttonVars.disabled.icon, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, '#333333')),
132
- },
133
- '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
134
- fill: canvas_kit_styling_1.cssVar(exports.buttonVars.disabled.icon, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, '#333333')),
135
- },
136
- },
137
- });
43
+ const baseButtonStyles = canvas_kit_styling_1.createStyles({ name: "wmi80", 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-vars-default-background, transparent);color:var(--css-button-vars-default-label, var(--cnvs-base-palette-black-pepper-400, #333333));border-width:1px;border-style:solid;gap:var(--cnvs-sys-space-x2, 0.5rem);border-color:var(--css-button-vars-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-vars-default-borderRadius, var(--cnvs-sys-shape-circle, 999px));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{cursor:default;box-shadow:none;opacity:var(--css-button-vars-disabled-opacity, 1);}& span .wd-icon-fill{transition-duration:40ms;fill:var(--css-button-vars-default-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-vars-default-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}&:focus-visible, &.focus{background-color:var(--css-button-vars-focus-background, transparent);border-color:var(--css-button-vars-focus-border, transparent);color:var(--css-button-vars-focus-label, var(--cnvs-base-palette-black-pepper-400, #333333));& span .wd-icon-fill{fill:var(--css-button-vars-focus-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-vars-focus-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}box-shadow:0 0 0 2px var(--css-button-vars-focus-boxShadowInner, var(--cnvs-base-palette-french-vanilla-100, #fff)), 0 0 0 calc(2px + 2px) var(--css-button-vars-focus-boxShadowOuter, var(--cnvs-brand-primary-base, rgba(0,92,184,1)));}&:hover, &.hover{background-color:var(--css-button-vars-hover-background, var(--cnvs-base-palette-black-pepper-500, #1e1e1e));border-color:var(--css-button-vars-hover-border, transparent);color:var(--css-button-vars-hover-label, var(--cnvs-base-palette-black-pepper-500, #1e1e1e));& span .wd-icon-fill{fill:var(--css-button-vars-hover-icon, var(--cnvs-base-palette-black-pepper-500, #1e1e1e));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-vars-hover-icon, var(--cnvs-base-palette-black-pepper-500, #1e1e1e));}}&:hover:active{transition-duration:40ms;}&:active, &.active{background-color:var(--css-button-vars-active-background, transparent);border-color:var(--css-button-vars-active-border, transparent);color:var(--css-button-vars-active-label, var(--cnvs-base-palette-black-pepper-400, #333333));& span .wd-icon-fill{fill:var(--css-button-vars-active-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-vars-active-icon);}}&:disabled{background-color:var(--css-button-vars-disabled-background, transparent);border-color:var(--css-button-vars-disabled-border, transparent);color:var(--css-button-vars-disabled-label, var(--cnvs-base-palette-black-pepper-400, #333333));& span .wd-icon-fill{fill:var(--css-button-vars-disabled-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-vars-disabled-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}}" });
138
44
  /**
139
45
  * Button modifiers that will overwrite the base styles of Buttons.
140
46
  * - `Size`: These modifiers will dictate a size of a Button and has a set of styles to associated with it.
@@ -143,79 +49,24 @@ const baseButtonStyles = canvas_kit_styling_1.createStyles({
143
49
  */
144
50
  exports.buttonModifiers = canvas_kit_styling_1.createModifiers({
145
51
  size: {
146
- large: canvas_kit_styling_1.createStyles({
147
- fontSize: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x4, '1rem'),
148
- lineHeight: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x6, '1.5rem'),
149
- letterSpacing: '0.01rem',
150
- height: '48px',
151
- paddingInline: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x8, '2rem'),
152
- minWidth: '112px',
153
- }),
154
- medium: canvas_kit_styling_1.createStyles({
155
- fontSize: '0.875rem',
156
- letterSpacing: '0.015rem',
157
- minWidth: '96px',
158
- paddingInline: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x6, '1.5rem'),
159
- height: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x10, '2.5rem'),
160
- }),
161
- small: canvas_kit_styling_1.createStyles({
162
- fontSize: '0.875rem',
163
- letterSpacing: '0.015rem',
164
- height: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x8, '2rem'),
165
- minWidth: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x20, '5rem'),
166
- paddingInline: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x4, '1rem'),
167
- gap: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x1, '0.25rem'),
168
- }),
169
- extraSmall: canvas_kit_styling_1.createStyles({
170
- fontSize: '0.75rem',
171
- lineHeight: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x4, '1rem'),
172
- letterSpacing: '0.02rem',
173
- height: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x6, '1.5rem'),
174
- minWidth: 'auto',
175
- paddingInline: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x3, '0.75rem'),
176
- gap: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x1, '0.25rem'),
177
- }),
52
+ large: canvas_kit_styling_1.createStyles({ name: "wmi81", styles: "font-size:var(--cnvs-sys-space-x4, 1rem);line-height:var(--cnvs-sys-space-x6, 1.5rem);letter-spacing:0.01rem;height:48px;padding-inline:var(--cnvs-sys-space-x8, 2rem);min-width:112px;" }),
53
+ medium: canvas_kit_styling_1.createStyles({ name: "wmi82", styles: "font-size:0.875rem;letter-spacing:0.015rem;min-width:96px;padding-inline:var(--cnvs-sys-space-x6, 1.5rem);height:var(--cnvs-sys-space-x10, 2.5rem);" }),
54
+ small: canvas_kit_styling_1.createStyles({ name: "wmi83", styles: "font-size:0.875rem;letter-spacing:0.015rem;height:var(--cnvs-sys-space-x8, 2rem);min-width:var(--cnvs-sys-space-x20, 5rem);padding-inline:var(--cnvs-sys-space-x4, 1rem);gap:var(--cnvs-sys-space-x1, 0.25rem);" }),
55
+ extraSmall: canvas_kit_styling_1.createStyles({ name: "wmi84", styles: "font-size:0.75rem;line-height:var(--cnvs-sys-space-x4, 1rem);letter-spacing:0.02rem;height:var(--cnvs-sys-space-x6, 1.5rem);min-width:auto;padding-inline:var(--cnvs-sys-space-x3, 0.75rem);gap:var(--cnvs-sys-space-x1, 0.25rem);" }),
178
56
  },
179
57
  iconPosition: {
180
- largeOnly: canvas_kit_styling_1.createStyles({
181
- padding: '0',
182
- minWidth: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x12, '3rem'),
183
- }),
184
- largeStart: canvas_kit_styling_1.createStyles({
185
- paddingInlineStart: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x6, '1.5rem'),
186
- paddingInlineEnd: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x8, '2rem'),
187
- }),
188
- largeEnd: canvas_kit_styling_1.createStyles({
189
- paddingInlineStart: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x8, '2rem'),
190
- paddingInlineEnd: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x6, '1.5rem'),
191
- }),
192
- mediumOnly: canvas_kit_styling_1.createStyles({ padding: '0', minWidth: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x10, '2.5rem') }),
193
- mediumStart: canvas_kit_styling_1.createStyles({
194
- paddingInlineStart: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x5, '1.25rem'),
195
- paddingInlineEnd: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x6, '1.5rem'),
196
- }),
197
- mediumEnd: canvas_kit_styling_1.createStyles({
198
- paddingInlineStart: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x6, '1.5rem'),
199
- paddingInlineEnd: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x5, '1.25rem'),
200
- }),
201
- smallOnly: canvas_kit_styling_1.createStyles({ padding: '0', minWidth: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x8, '2rem') }),
202
- smallStart: canvas_kit_styling_1.createStyles({
203
- paddingInlineStart: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x3, '0.75rem'),
204
- paddingInlineEnd: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x4, '1rem'),
205
- }),
206
- smallEnd: canvas_kit_styling_1.createStyles({
207
- paddingInlineStart: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x4, '1rem'),
208
- paddingInlineEnd: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x3, '0.75rem'),
209
- }),
210
- extraSmallOnly: canvas_kit_styling_1.createStyles({ padding: '0', minWidth: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x6, '1.5rem') }),
211
- extraSmallStart: canvas_kit_styling_1.createStyles({
212
- paddingInlineStart: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x2, '0.5rem'),
213
- paddingInlineEnd: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x3, '0.75rem'),
214
- }),
215
- extraSmallEnd: canvas_kit_styling_1.createStyles({
216
- paddingInlineStart: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x3, '0.75rem'),
217
- paddingInlineEnd: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x2, '0.5rem'),
218
- }),
58
+ largeOnly: canvas_kit_styling_1.createStyles({ name: "wmi85", styles: "padding:0;min-width:var(--cnvs-sys-space-x12, 3rem);" }),
59
+ largeStart: canvas_kit_styling_1.createStyles({ name: "wmi86", styles: "padding-inline-start:var(--cnvs-sys-space-x6, 1.5rem);padding-inline-end:var(--cnvs-sys-space-x8, 2rem);" }),
60
+ largeEnd: canvas_kit_styling_1.createStyles({ name: "wmi87", styles: "padding-inline-start:var(--cnvs-sys-space-x8, 2rem);padding-inline-end:var(--cnvs-sys-space-x6, 1.5rem);" }),
61
+ mediumOnly: canvas_kit_styling_1.createStyles({ name: "wmi88", styles: "padding:0;min-width:var(--cnvs-sys-space-x10, 2.5rem);" }),
62
+ mediumStart: canvas_kit_styling_1.createStyles({ name: "wmi89", styles: "padding-inline-start:var(--cnvs-sys-space-x5, 1.25rem);padding-inline-end:var(--cnvs-sys-space-x6, 1.5rem);" }),
63
+ mediumEnd: canvas_kit_styling_1.createStyles({ name: "wmi8a", styles: "padding-inline-start:var(--cnvs-sys-space-x6, 1.5rem);padding-inline-end:var(--cnvs-sys-space-x5, 1.25rem);" }),
64
+ smallOnly: canvas_kit_styling_1.createStyles({ name: "wmi8b", styles: "padding:0;min-width:var(--cnvs-sys-space-x8, 2rem);" }),
65
+ smallStart: canvas_kit_styling_1.createStyles({ name: "wmi8c", styles: "padding-inline-start:var(--cnvs-sys-space-x3, 0.75rem);padding-inline-end:var(--cnvs-sys-space-x4, 1rem);" }),
66
+ smallEnd: canvas_kit_styling_1.createStyles({ name: "wmi8d", styles: "padding-inline-start:var(--cnvs-sys-space-x4, 1rem);padding-inline-end:var(--cnvs-sys-space-x3, 0.75rem);" }),
67
+ extraSmallOnly: canvas_kit_styling_1.createStyles({ name: "wmi8e", styles: "padding:0;min-width:var(--cnvs-sys-space-x6, 1.5rem);" }),
68
+ extraSmallStart: canvas_kit_styling_1.createStyles({ name: "wmi8f", styles: "padding-inline-start:var(--cnvs-sys-space-x2, 0.5rem);padding-inline-end:var(--cnvs-sys-space-x3, 0.75rem);" }),
69
+ extraSmallEnd: canvas_kit_styling_1.createStyles({ name: "wmi8g", styles: "padding-inline-start:var(--cnvs-sys-space-x3, 0.75rem);padding-inline-end:var(--cnvs-sys-space-x2, 0.5rem);" }),
219
70
  },
220
71
  });
221
72
  function capitalize(string = '') {
package/dist/commonjs/button/lib/DeleteButton.js CHANGED
@@ -26,34 +26,7 @@ const common_1 = require("@workday/canvas-kit-react/common");
26
26
  const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
27
27
  const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
28
28
  const Button_1 = require("./Button");
29
- const deleteStyles = canvas_kit_styling_1.createStyles({
30
- [BaseButton_1.buttonVars.default.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.error.base, '#de2e21'),
31
- [BaseButton_1.buttonVars.default.border]: 'transparent',
32
- [BaseButton_1.buttonVars.default.borderRadius]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.shape.circle, '999px'),
33
- [BaseButton_1.buttonVars.default.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.error.accent, '#ffffff'),
34
- '&:hover, &.hover': {
35
- [BaseButton_1.buttonVars.hover.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.error.dark, '#a31b12'),
36
- [BaseButton_1.buttonVars.hover.border]: 'transparent',
37
- [BaseButton_1.buttonVars.hover.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.error.accent, '#ffffff'),
38
- },
39
- '&:focus-visible, &.focus': {
40
- [BaseButton_1.buttonVars.focus.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.error.base, '#de2e21'),
41
- [BaseButton_1.buttonVars.focus.border]: 'transparent',
42
- [BaseButton_1.buttonVars.focus.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.error.accent, '#ffffff'),
43
- [BaseButton_1.buttonVars.focus.boxShadowInner]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100, '#ffffff'),
44
- [BaseButton_1.buttonVars.focus.boxShadowOuter]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.common.focusOutline, '#0875e1'),
45
- },
46
- '&:active, &.active': {
47
- [BaseButton_1.buttonVars.active.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.error.darkest, 'rgba(128,22,14,1)'),
48
- [BaseButton_1.buttonVars.active.border]: 'transparent',
49
- [BaseButton_1.buttonVars.active.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.error.accent, '#ffffff'),
50
- },
51
- '&:disabled, &:active:disabled, &:focus:disabled, &:hover:disabled': {
52
- [BaseButton_1.buttonVars.disabled.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.error.light, '#fcc9c5'),
53
- [BaseButton_1.buttonVars.disabled.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.error.accent, '#ffffff'),
54
- opacity: 1,
55
- },
56
- });
29
+ const deleteStyles = canvas_kit_styling_1.createStyles({ name: "wmi810", styles: "--css-button-vars-default-background:var(--cnvs-brand-error-base, #de2e21);--css-button-vars-default-border:transparent;--css-button-vars-default-borderRadius:var(--cnvs-sys-shape-circle, 999px);--css-button-vars-default-label:var(--cnvs-brand-error-accent, #ffffff);&:hover, &.hover{--css-button-vars-hover-background:var(--cnvs-brand-error-dark, #a31b12);--css-button-vars-hover-border:transparent;--css-button-vars-hover-label:var(--cnvs-brand-error-accent, #ffffff);}&:focus-visible, &.focus{--css-button-vars-focus-background:var(--cnvs-brand-error-base, #de2e21);--css-button-vars-focus-border:transparent;--css-button-vars-focus-label:var(--cnvs-brand-error-accent, #ffffff);--css-button-vars-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100, #ffffff);--css-button-vars-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, #0875e1);}&:active, &.active{--css-button-vars-active-background:var(--cnvs-brand-error-darkest, rgba(128,22,14,1));--css-button-vars-active-border:transparent;--css-button-vars-active-label:var(--cnvs-brand-error-accent, #ffffff);}&:disabled, &:active:disabled, &:focus:disabled, &:hover:disabled{--css-button-vars-disabled-background:var(--cnvs-brand-error-light, #fcc9c5);--css-button-vars-disabled-label:var(--cnvs-brand-error-accent, #ffffff);opacity:1px;}" });
57
30
  /**
58
31
  * Use sparingly for destructive actions that will result in data loss, can’t be undone, or will
59
32
  * have significant consequences. They commonly appear in confirmation dialogs as the final
package/dist/commonjs/button/lib/PrimaryButton.js CHANGED
@@ -26,64 +26,10 @@ const common_1 = require("@workday/canvas-kit-react/common");
26
26
  const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
27
27
  const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
28
28
  const Button_1 = require("./Button");
29
- const primaryStyles = canvas_kit_styling_1.createStyles({
30
- // Default Styles
31
- [BaseButton_1.buttonVars.default.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.base, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blueberry400, '#0875e1')),
32
- [BaseButton_1.buttonVars.default.border]: 'transparent',
33
- [BaseButton_1.buttonVars.default.borderRadius]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.shape.circle, '999px'),
34
- [BaseButton_1.buttonVars.default.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.accent, '#ffffff'),
35
- [BaseButton_1.buttonVars.default.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.accent, '#ffffff'),
36
- // Hover Styles
37
- [BaseButton_1.buttonVars.hover.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.dark, 'rgba(0,92,184,1)'),
38
- [BaseButton_1.buttonVars.hover.border]: 'transparent',
39
- [BaseButton_1.buttonVars.hover.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.accent, '#ffffff'),
40
- [BaseButton_1.buttonVars.hover.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.accent, '#ffffff'),
41
- // Focus Styles
42
- [BaseButton_1.buttonVars.focus.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.base, 'rgba(8,117,226,1)'),
43
- [BaseButton_1.buttonVars.focus.border]: 'transparent',
44
- [BaseButton_1.buttonVars.focus.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.accent, '#ffffff'),
45
- [BaseButton_1.buttonVars.focus.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.accent, '#ffffff'),
46
- [BaseButton_1.buttonVars.focus.boxShadowInner]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100, '#ffffff'),
47
- [BaseButton_1.buttonVars.focus.boxShadowOuter]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.common.focusOutline, 'rgba(8,117,226,1)'),
48
- // Active Styles
49
- [BaseButton_1.buttonVars.active.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.darkest, 'rgba(0,66,133,1)'),
50
- [BaseButton_1.buttonVars.active.border]: 'transparent',
51
- [BaseButton_1.buttonVars.active.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.accent, '#ffffff'),
52
- [BaseButton_1.buttonVars.active.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.accent, '#ffffff'),
53
- // Disabled Styles
54
- [BaseButton_1.buttonVars.disabled.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.base, 'rgba(8,117,226,1)'),
55
- [BaseButton_1.buttonVars.disabled.border]: 'transparent',
56
- [BaseButton_1.buttonVars.disabled.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.accent, '#ffffff'),
57
- [BaseButton_1.buttonVars.disabled.opacity]: '0.4',
58
- [BaseButton_1.buttonVars.disabled.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.accent, '#ffffff'),
59
- });
29
+ const primaryStyles = canvas_kit_styling_1.createStyles({ name: "wmi8w", styles: "--css-button-vars-default-background:var(--cnvs-brand-primary-base, var(--cnvs-base-palette-blueberry-400, #0875e1));--css-button-vars-default-border:transparent;--css-button-vars-default-borderRadius:var(--cnvs-sys-shape-circle, 999px);--css-button-vars-default-label:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-default-icon:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-hover-background:var(--cnvs-brand-primary-dark, rgba(0,92,184,1));--css-button-vars-hover-border:transparent;--css-button-vars-hover-label:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-hover-icon:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-focus-background:var(--cnvs-brand-primary-base, rgba(8,117,226,1));--css-button-vars-focus-border:transparent;--css-button-vars-focus-label:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-focus-icon:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100, #ffffff);--css-button-vars-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,226,1));--css-button-vars-active-background:var(--cnvs-brand-primary-darkest, rgba(0,66,133,1));--css-button-vars-active-border:transparent;--css-button-vars-active-label:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-active-icon:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-disabled-background:var(--cnvs-brand-primary-base, rgba(8,117,226,1));--css-button-vars-disabled-border:transparent;--css-button-vars-disabled-label:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-disabled-opacity:0.4;--css-button-vars-disabled-icon:var(--cnvs-brand-primary-accent, #ffffff);" });
60
30
  exports.primaryButtonModifiers = canvas_kit_styling_1.createModifiers({
61
31
  variant: {
62
- inverse: canvas_kit_styling_1.createStyles({
63
- // Default Styles
64
- [BaseButton_1.buttonVars.default.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100, '#ffffff'),
65
- [BaseButton_1.buttonVars.default.borderRadius]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.shape.circle, '999px'),
66
- [BaseButton_1.buttonVars.default.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, 'rgba(51,51,51,1)'),
67
- [BaseButton_1.buttonVars.default.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, 'rgba(51,51,51,1)'),
68
- // Hover Styles
69
- [BaseButton_1.buttonVars.hover.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.soap300, 'rgba(232,235,237,1)'),
70
- [BaseButton_1.buttonVars.hover.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500, 'rgba(31,31,31,1)'),
71
- [BaseButton_1.buttonVars.hover.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500, 'rgba(31,31,31,1)'),
72
- // Focus Styles
73
- [BaseButton_1.buttonVars.focus.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100, '#ffffff'),
74
- [BaseButton_1.buttonVars.focus.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, 'rgba(51,51,51,1)'),
75
- [BaseButton_1.buttonVars.focus.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, 'rgba(51,51,51,1)'),
76
- [BaseButton_1.buttonVars.focus.boxShadowInner]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, 'rgba(51,51,51,1)'),
77
- [BaseButton_1.buttonVars.focus.boxShadowOuter]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100, '#ffffff'),
78
- // Active Styles
79
- [BaseButton_1.buttonVars.active.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.soap400, 'rgba(224,227,230,1)'),
80
- [BaseButton_1.buttonVars.active.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500, 'rgba(31,31,31,1)'),
81
- [BaseButton_1.buttonVars.active.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500, 'rgba(31,31,31,1)'),
82
- // Disabled Styles
83
- [BaseButton_1.buttonVars.disabled.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100, '#ffffff'),
84
- [BaseButton_1.buttonVars.disabled.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, 'rgba(51,51,51,1)'),
85
- [BaseButton_1.buttonVars.disabled.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, 'rgba(51,51,51,1)'),
86
- }),
32
+ inverse: canvas_kit_styling_1.createStyles({ name: "wmi8x", styles: "--css-button-vars-default-background:var(--cnvs-base-palette-french-vanilla-100, #ffffff);--css-button-vars-default-borderRadius:var(--cnvs-sys-shape-circle, 999px);--css-button-vars-default-label:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-default-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-hover-background:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--css-button-vars-hover-label:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-hover-icon:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-focus-background:var(--cnvs-base-palette-french-vanilla-100, #ffffff);--css-button-vars-focus-label:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-focus-boxShadowInner:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-focus-boxShadowOuter:var(--cnvs-base-palette-french-vanilla-100, #ffffff);--css-button-vars-active-background:var(--cnvs-base-palette-soap-400, rgba(224,227,230,1));--css-button-vars-active-label:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-active-icon:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-disabled-background:var(--cnvs-base-palette-french-vanilla-100, #ffffff);--css-button-vars-disabled-label:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-disabled-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" }),
87
33
  },
88
34
  });
89
35
  exports.PrimaryButton = common_1.createComponent('button')({
package/dist/commonjs/button/lib/SecondaryButton.js CHANGED
@@ -26,68 +26,10 @@ const common_1 = require("@workday/canvas-kit-react/common");
26
26
  const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
27
27
  const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
28
28
  const Button_1 = require("./Button");
29
- const secondaryStyles = canvas_kit_styling_1.createStyles({
30
- // Default Styles
31
- [BaseButton_1.buttonVars.default.background]: 'transparent',
32
- [BaseButton_1.buttonVars.default.border]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, 'rgba(51,51,51,1)'),
33
- [BaseButton_1.buttonVars.default.borderRadius]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.shape.circle, '999px'),
34
- [BaseButton_1.buttonVars.default.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, 'rgba(51,51,51,1)'),
35
- [BaseButton_1.buttonVars.default.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, 'rgba(51,51,51,1)'),
36
- // Hover Styles
37
- [BaseButton_1.buttonVars.hover.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, 'rgba(51,51,51,1)'),
38
- [BaseButton_1.buttonVars.hover.border]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, 'rgba(51,51,51,1)'),
39
- [BaseButton_1.buttonVars.hover.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.accent, 'rgba(255,255,255,1)'),
40
- [BaseButton_1.buttonVars.hover.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.accent, 'rgba(255,255,255,1)'),
41
- // Focus Styles
42
- [BaseButton_1.buttonVars.focus.background]: 'transparent',
43
- [BaseButton_1.buttonVars.focus.border]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, 'rgba(51,51,51,1)'),
44
- [BaseButton_1.buttonVars.focus.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, 'rgba(51,51,51,1)'),
45
- [BaseButton_1.buttonVars.focus.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, 'rgba(51,51,51,1)'),
46
- [BaseButton_1.buttonVars.focus.boxShadowInner]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100, 'rgba(255,255,255,1)'),
47
- [BaseButton_1.buttonVars.focus.boxShadowOuter]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.common.focusOutline, 'rgba(8,117,226,1)'),
48
- // Active Styles
49
- [BaseButton_1.buttonVars.active.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500, 'rgba(31,31,31,1)'),
50
- [BaseButton_1.buttonVars.active.border]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500, 'rgba(31,31,31,1)'),
51
- [BaseButton_1.buttonVars.active.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.accent, 'rgba(255,255,255,1)'),
52
- [BaseButton_1.buttonVars.active.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.accent, 'rgba(255,255,255,1)'),
53
- // Disabled Styles
54
- [BaseButton_1.buttonVars.disabled.background]: 'transparent',
55
- [BaseButton_1.buttonVars.disabled.border]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, 'rgba(51,51,51,1)'),
56
- [BaseButton_1.buttonVars.disabled.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, 'rgba(51,51,51,1)'),
57
- [BaseButton_1.buttonVars.disabled.opacity]: '0.4',
58
- [BaseButton_1.buttonVars.disabled.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, 'rgba(51,51,51,1)'),
59
- });
29
+ const secondaryStyles = canvas_kit_styling_1.createStyles({ name: "wmi8y", styles: "--css-button-vars-default-background:transparent;--css-button-vars-default-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-default-borderRadius:var(--cnvs-sys-shape-circle, 999px);--css-button-vars-default-label:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-default-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-hover-background:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-hover-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-hover-label:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-vars-hover-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-vars-focus-background:transparent;--css-button-vars-focus-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-focus-label:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,226,1));--css-button-vars-active-background:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-active-border:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-active-label:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-vars-active-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-vars-disabled-background:transparent;--css-button-vars-disabled-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-disabled-label:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-disabled-opacity:0.4;--css-button-vars-disabled-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" });
60
30
  exports.secondaryButtonModifiers = canvas_kit_styling_1.createModifiers({
61
31
  variant: {
62
- inverse: canvas_kit_styling_1.createStyles({
63
- // Default Styles
64
- [BaseButton_1.buttonVars.default.background]: 'transparent',
65
- [BaseButton_1.buttonVars.default.border]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100, 'rgba(255,255,255,1)'),
66
- [BaseButton_1.buttonVars.default.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100, 'rgba(255,255,255,1)'),
67
- [BaseButton_1.buttonVars.default.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100, 'rgba(255,255,255,1)'),
68
- // Hover Styles
69
- [BaseButton_1.buttonVars.hover.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.soap300, 'rgba(232,235,237,1)'),
70
- [BaseButton_1.buttonVars.hover.border]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.soap300, 'rgba(232,235,237,1)'),
71
- [BaseButton_1.buttonVars.hover.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500, 'rgba(31,31,31,1)'),
72
- [BaseButton_1.buttonVars.hover.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500, 'rgba(31,31,31,1)'),
73
- // Focus Styles
74
- [BaseButton_1.buttonVars.focus.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100, 'rgba(255,255,255,1)'),
75
- [BaseButton_1.buttonVars.focus.border]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100, 'rgba(255,255,255,1)'),
76
- [BaseButton_1.buttonVars.focus.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500, 'rgba(31,31,31,1)'),
77
- [BaseButton_1.buttonVars.focus.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500, 'rgba(31,31,31,1)'),
78
- [BaseButton_1.buttonVars.focus.boxShadowInner]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500, 'rgba(31,31,31,1)'),
79
- [BaseButton_1.buttonVars.focus.boxShadowOuter]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100, 'rgba(255,255,255,1)'),
80
- // Active Styles
81
- [BaseButton_1.buttonVars.active.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.soap400, 'rgba(224,227,230,1)'),
82
- [BaseButton_1.buttonVars.active.border]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.soap400, 'rgba(224,227,230,1)'),
83
- [BaseButton_1.buttonVars.active.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500, 'rgba(31,31,31,1)'),
84
- [BaseButton_1.buttonVars.active.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500, 'rgba(31,31,31,1)'),
85
- // Disabled Styles
86
- [BaseButton_1.buttonVars.disabled.background]: 'transparent',
87
- [BaseButton_1.buttonVars.disabled.border]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100, 'rgba(255,255,255,1)'),
88
- [BaseButton_1.buttonVars.disabled.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100, 'rgba(255,255,255,1)'),
89
- [BaseButton_1.buttonVars.disabled.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100, 'rgba(255,255,255,1)'),
90
- }),
32
+ inverse: canvas_kit_styling_1.createStyles({ name: "wmi8z", styles: "--css-button-vars-default-background:transparent;--css-button-vars-default-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-default-label:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-default-icon:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-hover-background:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--css-button-vars-hover-border:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--css-button-vars-hover-label:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-hover-icon:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-focus-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-focus-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-focus-label:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-focus-icon:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-focus-boxShadowInner:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-focus-boxShadowOuter:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-active-background:var(--cnvs-base-palette-soap-400, rgba(224,227,230,1));--css-button-vars-active-border:var(--cnvs-base-palette-soap-400, rgba(224,227,230,1));--css-button-vars-active-label:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-active-icon:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-disabled-background:transparent;--css-button-vars-disabled-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-disabled-label:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-disabled-icon:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));" }),
91
33
  },
92
34
  });
93
35
  exports.SecondaryButton = common_1.createComponent('button')({