@workday/canvas-kit-react 10.0.0-alpha.550-next.0 → 10.0.0-alpha.552-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 (24) hide show
  1. package/button/lib/BaseButton.tsx +55 -53
  2. package/button/lib/DeleteButton.tsx +13 -13
  3. package/button/lib/PrimaryButton.tsx +36 -36
  4. package/button/lib/SecondaryButton.tsx +40 -40
  5. package/button/lib/TertiaryButton.tsx +37 -37
  6. package/button/lib/ToolbarDropdownButton.tsx +1 -1
  7. package/button/lib/ToolbarIconButton.tsx +1 -1
  8. package/dist/commonjs/button/lib/BaseButton.d.ts.map +1 -1
  9. package/dist/commonjs/button/lib/BaseButton.js +52 -53
  10. package/dist/commonjs/button/lib/DeleteButton.js +13 -13
  11. package/dist/commonjs/button/lib/PrimaryButton.js +36 -36
  12. package/dist/commonjs/button/lib/SecondaryButton.js +40 -40
  13. package/dist/commonjs/button/lib/TertiaryButton.js +37 -37
  14. package/dist/commonjs/button/lib/ToolbarDropdownButton.js +1 -1
  15. package/dist/commonjs/button/lib/ToolbarIconButton.js +1 -1
  16. package/dist/es6/button/lib/BaseButton.d.ts.map +1 -1
  17. package/dist/es6/button/lib/BaseButton.js +52 -53
  18. package/dist/es6/button/lib/DeleteButton.js +13 -13
  19. package/dist/es6/button/lib/PrimaryButton.js +36 -36
  20. package/dist/es6/button/lib/SecondaryButton.js +40 -40
  21. package/dist/es6/button/lib/TertiaryButton.js +37 -37
  22. package/dist/es6/button/lib/ToolbarDropdownButton.js +1 -1
  23. package/dist/es6/button/lib/ToolbarIconButton.js +1 -1
  24. package/package.json +4 -4
package/dist/commonjs/button/lib/TertiaryButton.js CHANGED
@@ -28,38 +28,38 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
28
28
  const tokens_1 = require("@workday/canvas-kit-react/tokens");
29
29
  const Button_1 = require("./Button");
30
30
  const tertiaryStyles = canvas_kit_styling_1.createStyles({
31
- paddingInline: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x2, tokens_1.space.xxs),
31
+ paddingInline: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x2, '0.5rem'),
32
32
  minWidth: 'auto',
33
33
  textDecoration: 'underline',
34
34
  border: 0,
35
35
  // Default Styles
36
36
  [BaseButton_1.buttonVars.default.background]: 'transparent',
37
37
  [BaseButton_1.buttonVars.default.border]: 'transparent',
38
- [BaseButton_1.buttonVars.default.borderRadius]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.shape.medium),
39
- [BaseButton_1.buttonVars.default.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.base),
40
- [BaseButton_1.buttonVars.default.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400),
38
+ [BaseButton_1.buttonVars.default.borderRadius]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.shape.medium, '0.25rem'),
39
+ [BaseButton_1.buttonVars.default.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.base, 'rgba(8,117,226,1)'),
40
+ [BaseButton_1.buttonVars.default.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, 'rgba(51, 51, 51, 1)'),
41
41
  // Hover Styles
42
- [BaseButton_1.buttonVars.hover.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.soap200),
42
+ [BaseButton_1.buttonVars.hover.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.soap200, 'rgba(241, 242, 243, 1)'),
43
43
  [BaseButton_1.buttonVars.hover.border]: 'transparent',
44
- [BaseButton_1.buttonVars.hover.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.dark),
45
- [BaseButton_1.buttonVars.hover.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500),
44
+ [BaseButton_1.buttonVars.hover.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.dark, 'rgba(0,92,184,1)'),
45
+ [BaseButton_1.buttonVars.hover.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500, 'rgba(31,31,31,1)'),
46
46
  // Focus Styles
47
47
  [BaseButton_1.buttonVars.focus.background]: 'transparent',
48
48
  [BaseButton_1.buttonVars.focus.border]: 'transparent',
49
- [BaseButton_1.buttonVars.focus.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.base),
50
- [BaseButton_1.buttonVars.focus.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500),
51
- [BaseButton_1.buttonVars.focus.boxShadowInner]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.common.focusOutline),
52
- [BaseButton_1.buttonVars.focus.boxShadowOuter]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.common.focusOutline),
49
+ [BaseButton_1.buttonVars.focus.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.base, 'rgba(8,117,226,1)'),
50
+ [BaseButton_1.buttonVars.focus.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500, 'rgba(31,31,31,1)'),
51
+ [BaseButton_1.buttonVars.focus.boxShadowInner]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.common.focusOutline, 'rgba(8,117,226,1)'),
52
+ [BaseButton_1.buttonVars.focus.boxShadowOuter]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.common.focusOutline, 'rgba(8,117,226,1)'),
53
53
  // Active Styles
54
- [BaseButton_1.buttonVars.active.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.soap300),
54
+ [BaseButton_1.buttonVars.active.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.soap300, 'rgba(232,235,237,1)'),
55
55
  [BaseButton_1.buttonVars.active.border]: 'transparent',
56
- [BaseButton_1.buttonVars.active.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.dark),
57
- [BaseButton_1.buttonVars.active.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500),
56
+ [BaseButton_1.buttonVars.active.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.dark, 'rgba(0,92,184,1)'),
57
+ [BaseButton_1.buttonVars.active.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500, 'rgba(31,31,31,1)'),
58
58
  // Disabled Styles
59
59
  [BaseButton_1.buttonVars.disabled.background]: 'transparent',
60
- [BaseButton_1.buttonVars.disabled.border]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100),
61
- [BaseButton_1.buttonVars.disabled.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.base),
62
- [BaseButton_1.buttonVars.disabled.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400),
60
+ [BaseButton_1.buttonVars.disabled.border]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100, '#fff'),
61
+ [BaseButton_1.buttonVars.disabled.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.base, 'rgba(8,117,226,1)'),
62
+ [BaseButton_1.buttonVars.disabled.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, 'rgba(51, 51, 51, 1)'),
63
63
  [BaseButton_1.buttonVars.disabled.opacity]: '0.4',
64
64
  '&:focus-visible, &.focus': {
65
65
  ...common_1.focusRing({
@@ -73,11 +73,11 @@ const tertiaryStyles = canvas_kit_styling_1.createStyles({
73
73
  exports.tertiaryButtonModifiers = canvas_kit_styling_1.createModifiers({
74
74
  isThemeable: {
75
75
  true: canvas_kit_styling_1.createStyles({
76
- [BaseButton_1.buttonVars.default.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.base),
77
- [BaseButton_1.buttonVars.hover.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.dark),
78
- [BaseButton_1.buttonVars.focus.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.base),
79
- [BaseButton_1.buttonVars.active.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.dark),
80
- [BaseButton_1.buttonVars.disabled.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.base),
76
+ [BaseButton_1.buttonVars.default.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.base, 'rgba(8,117,226,1)'),
77
+ [BaseButton_1.buttonVars.hover.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.dark, 'rgba(0,92,184,1)'),
78
+ [BaseButton_1.buttonVars.focus.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.base, 'rgba(8,117,226,1)'),
79
+ [BaseButton_1.buttonVars.active.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.dark, 'rgba(0,92,184,1)'),
80
+ [BaseButton_1.buttonVars.disabled.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.base, 'rgba(8,117,226,1)'),
81
81
  }),
82
82
  },
83
83
  variant: {
@@ -85,28 +85,28 @@ exports.tertiaryButtonModifiers = canvas_kit_styling_1.createModifiers({
85
85
  // Default Styles
86
86
  [BaseButton_1.buttonVars.default.background]: 'transparent',
87
87
  [BaseButton_1.buttonVars.default.border]: 'transparent',
88
- [BaseButton_1.buttonVars.default.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100),
89
- [BaseButton_1.buttonVars.default.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100),
88
+ [BaseButton_1.buttonVars.default.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100, '#fff'),
89
+ [BaseButton_1.buttonVars.default.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100, '#fff'),
90
90
  // Hover Styles
91
- [BaseButton_1.buttonVars.hover.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100),
91
+ [BaseButton_1.buttonVars.hover.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100, '#fff'),
92
92
  [BaseButton_1.buttonVars.hover.border]: 'transparent',
93
- [BaseButton_1.buttonVars.hover.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400),
94
- [BaseButton_1.buttonVars.hover.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400),
93
+ [BaseButton_1.buttonVars.hover.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, 'rgba(51, 51, 51, 1)'),
94
+ [BaseButton_1.buttonVars.hover.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, 'rgba(51, 51, 51, 1)'),
95
95
  // Focus Styles
96
- [BaseButton_1.buttonVars.focus.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100),
96
+ [BaseButton_1.buttonVars.focus.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100, '#fff'),
97
97
  [BaseButton_1.buttonVars.focus.border]: 'transparent',
98
- [BaseButton_1.buttonVars.focus.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400),
99
- [BaseButton_1.buttonVars.focus.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400),
98
+ [BaseButton_1.buttonVars.focus.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, 'rgba(51, 51, 51, 1)'),
99
+ [BaseButton_1.buttonVars.focus.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, 'rgba(51, 51, 51, 1)'),
100
100
  // Active Styles
101
- [BaseButton_1.buttonVars.active.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.soap200),
101
+ [BaseButton_1.buttonVars.active.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.soap200, 'rgba(241, 242, 243, 1)'),
102
102
  [BaseButton_1.buttonVars.active.border]: 'transparent',
103
- [BaseButton_1.buttonVars.active.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400),
104
- [BaseButton_1.buttonVars.active.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400),
103
+ [BaseButton_1.buttonVars.active.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, 'rgba(51, 51, 51, 1)'),
104
+ [BaseButton_1.buttonVars.active.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, 'rgba(51, 51, 51, 1)'),
105
105
  // Disabled Styles
106
106
  [BaseButton_1.buttonVars.disabled.background]: 'transparent',
107
- [BaseButton_1.buttonVars.disabled.border]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100),
108
- [BaseButton_1.buttonVars.disabled.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100),
109
- [BaseButton_1.buttonVars.disabled.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100),
107
+ [BaseButton_1.buttonVars.disabled.border]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100, '#fff'),
108
+ [BaseButton_1.buttonVars.disabled.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100, '#fff'),
109
+ [BaseButton_1.buttonVars.disabled.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100, '#fff'),
110
110
  '&:focus-visible, &.focus': {
111
111
  ...common_1.focusRing({
112
112
  inset: 'inner',
@@ -122,7 +122,7 @@ exports.tertiaryButtonModifiers = canvas_kit_styling_1.createModifiers({
122
122
  largeOnly: canvas_kit_styling_1.createStyles({
123
123
  borderRadius: tokens_1.borderRadius.circle,
124
124
  padding: '0',
125
- minWidth: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x12),
125
+ minWidth: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x12, '3rem'),
126
126
  }),
127
127
  largeStart: canvas_kit_styling_1.createStyles({
128
128
  paddingInlineStart: tokens_1.space.xxs,
package/dist/commonjs/button/lib/ToolbarDropdownButton.js CHANGED
@@ -36,7 +36,7 @@ const StyledToolbarDropdownButton = common_1.styled(BaseButton_1.BaseButton)({
36
36
  width: 2,
37
37
  separation: 0,
38
38
  innerColor: 'transparent',
39
- outerColor: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.common.focusOutline),
39
+ outerColor: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.common.focusOutline, '#0875e1'),
40
40
  }),
41
41
  },
42
42
  });
package/dist/commonjs/button/lib/ToolbarIconButton.js CHANGED
@@ -37,7 +37,7 @@ const StyledToolbarIconButton = common_1.styled(BaseButton_1.BaseButton)({
37
37
  width: 2,
38
38
  separation: 0,
39
39
  innerColor: 'transparent',
40
- outerColor: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.common.focusOutline),
40
+ outerColor: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.common.focusOutline, 'rgba(8,117,226,1)'),
41
41
  }),
42
42
  },
43
43
  });
package/dist/es6/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;AAI/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;AAkGF;;;;;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;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"}
package/dist/es6/button/lib/BaseButton.js CHANGED
@@ -4,7 +4,6 @@ import { ButtonLabel } from '../lib/parts/ButtonLabel';
4
4
  import { createComponent, focusRing } from '@workday/canvas-kit-react/common';
5
5
  import { createStyles, createVars, cssVar, createModifiers } from '@workday/canvas-kit-styling';
6
6
  import { Box } from '@workday/canvas-kit-react/layout';
7
- import { space } from '@workday/canvas-kit-react/tokens';
8
7
  import { base, brand, system } from '@workday/canvas-tokens-web';
9
8
  /**
10
9
  * Factory function for creating Button vars.
@@ -30,10 +29,10 @@ const baseButtonStyles = createStyles({
30
29
  letterSpacing: '0.015rem',
31
30
  fontWeight: 'bold',
32
31
  backgroundColor: cssVar(buttonVars.default.background, 'transparent'),
33
- color: cssVar(buttonVars.default.label, cssVar(base.blackPepper400)),
32
+ color: cssVar(buttonVars.default.label, cssVar(base.blackPepper400, '#333333')),
34
33
  borderWidth: '1px',
35
34
  borderStyle: 'solid',
36
- gap: cssVar(system.space.x2, space.xxs),
35
+ gap: cssVar(system.space.x2, '0.5rem'),
37
36
  borderColor: cssVar(buttonVars.default.border, 'transparent'),
38
37
  cursor: 'pointer',
39
38
  display: 'inline-flex',
@@ -45,7 +44,7 @@ const baseButtonStyles = createStyles({
45
44
  whiteSpace: 'nowrap',
46
45
  WebkitFontSmoothing: 'antialiased',
47
46
  MozOsxFontSmoothing: 'grayscale',
48
- borderRadius: cssVar(buttonVars.default.borderRadius, system.shape.circle),
47
+ borderRadius: cssVar(buttonVars.default.borderRadius, cssVar(system.shape.circle, '999px')),
49
48
  position: 'relative',
50
49
  verticalAlign: 'middle',
51
50
  overflow: 'hidden',
@@ -57,46 +56,46 @@ const baseButtonStyles = createStyles({
57
56
  },
58
57
  '& span .wd-icon-fill': {
59
58
  transitionDuration: '40ms',
60
- fill: cssVar(buttonVars.default.icon, cssVar(base.blackPepper400)),
59
+ fill: cssVar(buttonVars.default.icon, cssVar(base.blackPepper400, '#333333')),
61
60
  },
62
61
  '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
63
- fill: cssVar(buttonVars.default.icon, cssVar(base.blackPepper400)),
62
+ fill: cssVar(buttonVars.default.icon, cssVar(base.blackPepper400, '#333333')),
64
63
  },
65
64
  '&:focus-visible, &.focus': {
66
65
  backgroundColor: cssVar(buttonVars.focus.background, 'transparent'),
67
66
  borderColor: cssVar(buttonVars.focus.border, 'transparent'),
68
- color: cssVar(buttonVars.focus.label, cssVar(base.blackPepper400)),
67
+ color: cssVar(buttonVars.focus.label, cssVar(base.blackPepper400, '#333333')),
69
68
  '& span .wd-icon-fill': {
70
- fill: cssVar(buttonVars.focus.icon, cssVar(base.blackPepper400)),
69
+ fill: cssVar(buttonVars.focus.icon, cssVar(base.blackPepper400, '#333333')),
71
70
  },
72
71
  '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
73
- fill: cssVar(buttonVars.focus.icon, cssVar(base.blackPepper400)),
72
+ fill: cssVar(buttonVars.focus.icon, cssVar(base.blackPepper400, '#333333')),
74
73
  },
75
74
  ...focusRing({
76
75
  width: 2,
77
76
  separation: 2,
78
- innerColor: cssVar(buttonVars.focus.boxShadowInner, cssVar(base.frenchVanilla100)),
79
- outerColor: cssVar(buttonVars.focus.boxShadowOuter, cssVar(brand.primary.base)),
77
+ innerColor: cssVar(buttonVars.focus.boxShadowInner, cssVar(base.frenchVanilla100, '#fff')),
78
+ outerColor: cssVar(buttonVars.focus.boxShadowOuter, cssVar(brand.primary.base, 'rgba(0,92,184,1)')),
80
79
  }),
81
80
  },
82
81
  '&:hover, &.hover': {
83
- backgroundColor: cssVar(buttonVars.hover.background, cssVar(base.blackPepper500)),
82
+ backgroundColor: cssVar(buttonVars.hover.background, cssVar(base.blackPepper500, '#1e1e1e')),
84
83
  borderColor: cssVar(buttonVars.hover.border, 'transparent'),
85
- color: cssVar(buttonVars.hover.label, cssVar(base.blackPepper500)),
84
+ color: cssVar(buttonVars.hover.label, cssVar(base.blackPepper500, '#1e1e1e')),
86
85
  '& span .wd-icon-fill': {
87
- fill: cssVar(buttonVars.hover.icon, cssVar(base.blackPepper500)),
86
+ fill: cssVar(buttonVars.hover.icon, cssVar(base.blackPepper500, '#1e1e1e')),
88
87
  },
89
88
  '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
90
- fill: cssVar(buttonVars.hover.icon, cssVar(base.blackPepper500)),
89
+ fill: cssVar(buttonVars.hover.icon, cssVar(base.blackPepper500, '#1e1e1e')),
91
90
  },
92
91
  },
93
92
  '&:hover:active': { transitionDuration: '40ms' },
94
93
  '&:active, &.active': {
95
94
  backgroundColor: cssVar(buttonVars.active.background, 'transparent'),
96
95
  borderColor: cssVar(buttonVars.active.border, 'transparent'),
97
- color: cssVar(buttonVars.active.label, cssVar(base.blackPepper400)),
96
+ color: cssVar(buttonVars.active.label, cssVar(base.blackPepper400, '#333333')),
98
97
  '& span .wd-icon-fill': {
99
- fill: cssVar(buttonVars.active.icon, cssVar(base.blackPepper400)),
98
+ fill: cssVar(buttonVars.active.icon, cssVar(base.blackPepper400, '#333333')),
100
99
  },
101
100
  '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
102
101
  fill: cssVar(buttonVars.active.icon),
@@ -105,12 +104,12 @@ const baseButtonStyles = createStyles({
105
104
  '&:disabled': {
106
105
  backgroundColor: cssVar(buttonVars.disabled.background, 'transparent'),
107
106
  borderColor: cssVar(buttonVars.disabled.border, 'transparent'),
108
- color: cssVar(buttonVars.disabled.label, cssVar(base.blackPepper400)),
107
+ color: cssVar(buttonVars.disabled.label, cssVar(base.blackPepper400, '#333333')),
109
108
  '& span .wd-icon-fill': {
110
- fill: cssVar(buttonVars.disabled.icon, cssVar(base.blackPepper400)),
109
+ fill: cssVar(buttonVars.disabled.icon, cssVar(base.blackPepper400, '#333333')),
111
110
  },
112
111
  '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
113
- fill: cssVar(buttonVars.disabled.icon, cssVar(base.blackPepper400)),
112
+ fill: cssVar(buttonVars.disabled.icon, cssVar(base.blackPepper400, '#333333')),
114
113
  },
115
114
  },
116
115
  });
@@ -123,77 +122,77 @@ const baseButtonStyles = createStyles({
123
122
  export const buttonModifiers = createModifiers({
124
123
  size: {
125
124
  large: createStyles({
126
- fontSize: cssVar(system.space.x4),
127
- lineHeight: cssVar(system.space.x6),
125
+ fontSize: cssVar(system.space.x4, '1rem'),
126
+ lineHeight: cssVar(system.space.x6, '1.5rem'),
128
127
  letterSpacing: '0.01rem',
129
128
  height: '48px',
130
- paddingInline: cssVar(system.space.x8),
129
+ paddingInline: cssVar(system.space.x8, '2rem'),
131
130
  minWidth: '112px',
132
131
  }),
133
132
  medium: createStyles({
134
133
  fontSize: '0.875rem',
135
134
  letterSpacing: '0.015rem',
136
135
  minWidth: '96px',
137
- paddingInline: cssVar(system.space.x6),
138
- height: cssVar(system.space.x10),
136
+ paddingInline: cssVar(system.space.x6, '1.5rem'),
137
+ height: cssVar(system.space.x10, '2.5rem'),
139
138
  }),
140
139
  small: createStyles({
141
140
  fontSize: '0.875rem',
142
141
  letterSpacing: '0.015rem',
143
- height: cssVar(system.space.x8),
144
- minWidth: cssVar(system.space.x20),
145
- paddingInline: cssVar(system.space.x4),
146
- gap: cssVar(system.space.x1),
142
+ height: cssVar(system.space.x8, '2rem'),
143
+ minWidth: cssVar(system.space.x20, '5rem'),
144
+ paddingInline: cssVar(system.space.x4, '1rem'),
145
+ gap: cssVar(system.space.x1, '0.25rem'),
147
146
  }),
148
147
  extraSmall: createStyles({
149
148
  fontSize: '0.75rem',
150
- lineHeight: cssVar(system.space.x4),
149
+ lineHeight: cssVar(system.space.x4, '1rem'),
151
150
  letterSpacing: '0.02rem',
152
- height: cssVar(system.space.x6),
151
+ height: cssVar(system.space.x6, '1.5rem'),
153
152
  minWidth: 'auto',
154
- paddingInline: cssVar(system.space.x3),
155
- gap: cssVar(system.space.x1),
153
+ paddingInline: cssVar(system.space.x3, '0.75rem'),
154
+ gap: cssVar(system.space.x1, '0.25rem'),
156
155
  }),
157
156
  },
158
157
  iconPosition: {
159
158
  largeOnly: createStyles({
160
159
  padding: '0',
161
- minWidth: cssVar(system.space.x12),
160
+ minWidth: cssVar(system.space.x12, '3rem'),
162
161
  }),
163
162
  largeStart: createStyles({
164
- paddingInlineStart: cssVar(system.space.x6),
165
- paddingInlineEnd: cssVar(system.space.x8),
163
+ paddingInlineStart: cssVar(system.space.x6, '1.5rem'),
164
+ paddingInlineEnd: cssVar(system.space.x8, '2rem'),
166
165
  }),
167
166
  largeEnd: createStyles({
168
- paddingInlineStart: cssVar(system.space.x8),
169
- paddingInlineEnd: cssVar(system.space.x6),
167
+ paddingInlineStart: cssVar(system.space.x8, '2rem'),
168
+ paddingInlineEnd: cssVar(system.space.x6, '1.5rem'),
170
169
  }),
171
- mediumOnly: createStyles({ padding: '0', minWidth: cssVar(system.space.x10, space.xl) }),
170
+ mediumOnly: createStyles({ padding: '0', minWidth: cssVar(system.space.x10, '2.5rem') }),
172
171
  mediumStart: createStyles({
173
- paddingInlineStart: cssVar(system.space.x5),
174
- paddingInlineEnd: cssVar(system.space.x6),
172
+ paddingInlineStart: cssVar(system.space.x5, '1.25rem'),
173
+ paddingInlineEnd: cssVar(system.space.x6, '1.5rem'),
175
174
  }),
176
175
  mediumEnd: createStyles({
177
- paddingInlineStart: cssVar(system.space.x6),
178
- paddingInlineEnd: cssVar(system.space.x5),
176
+ paddingInlineStart: cssVar(system.space.x6, '1.5rem'),
177
+ paddingInlineEnd: cssVar(system.space.x5, '1.25rem'),
179
178
  }),
180
- smallOnly: createStyles({ padding: '0', minWidth: cssVar(system.space.x8, space.l) }),
179
+ smallOnly: createStyles({ padding: '0', minWidth: cssVar(system.space.x8, '2rem') }),
181
180
  smallStart: createStyles({
182
- paddingInlineStart: cssVar(system.space.x3),
183
- paddingInlineEnd: cssVar(system.space.x4),
181
+ paddingInlineStart: cssVar(system.space.x3, '0.75rem'),
182
+ paddingInlineEnd: cssVar(system.space.x4, '1rem'),
184
183
  }),
185
184
  smallEnd: createStyles({
186
- paddingInlineStart: cssVar(system.space.x4),
187
- paddingInlineEnd: cssVar(system.space.x3),
185
+ paddingInlineStart: cssVar(system.space.x4, '1rem'),
186
+ paddingInlineEnd: cssVar(system.space.x3, '0.75rem'),
188
187
  }),
189
- extraSmallOnly: createStyles({ padding: '0', minWidth: cssVar(system.space.x6, space.m) }),
188
+ extraSmallOnly: createStyles({ padding: '0', minWidth: cssVar(system.space.x6, '1.5rem') }),
190
189
  extraSmallStart: createStyles({
191
- paddingInlineStart: cssVar(system.space.x2),
192
- paddingInlineEnd: cssVar(system.space.x3),
190
+ paddingInlineStart: cssVar(system.space.x2, '0.5rem'),
191
+ paddingInlineEnd: cssVar(system.space.x3, '0.75rem'),
193
192
  }),
194
193
  extraSmallEnd: createStyles({
195
- paddingInlineStart: cssVar(system.space.x3),
196
- paddingInlineEnd: cssVar(system.space.x2),
194
+ paddingInlineStart: cssVar(system.space.x3, '0.75rem'),
195
+ paddingInlineEnd: cssVar(system.space.x2, '0.5rem'),
197
196
  }),
198
197
  },
199
198
  });
package/dist/es6/button/lib/DeleteButton.js CHANGED
@@ -5,30 +5,30 @@ import { createStyles, cssVar } from '@workday/canvas-kit-styling';
5
5
  import { base, brand, system } from '@workday/canvas-tokens-web';
6
6
  import { Button } from './Button';
7
7
  const deleteStyles = createStyles({
8
- [buttonVars.default.background]: cssVar(brand.error.base),
8
+ [buttonVars.default.background]: cssVar(brand.error.base, '#de2e21'),
9
9
  [buttonVars.default.border]: 'transparent',
10
- [buttonVars.default.borderRadius]: cssVar(system.shape.circle),
11
- [buttonVars.default.label]: cssVar(brand.error.accent),
10
+ [buttonVars.default.borderRadius]: cssVar(system.shape.circle, '999px'),
11
+ [buttonVars.default.label]: cssVar(brand.error.accent, '#ffffff'),
12
12
  '&:hover, &.hover': {
13
- [buttonVars.hover.background]: cssVar(brand.error.dark),
13
+ [buttonVars.hover.background]: cssVar(brand.error.dark, '#a31b12'),
14
14
  [buttonVars.hover.border]: 'transparent',
15
- [buttonVars.hover.label]: cssVar(brand.error.accent),
15
+ [buttonVars.hover.label]: cssVar(brand.error.accent, '#ffffff'),
16
16
  },
17
17
  '&:focus-visible, &.focus': {
18
- [buttonVars.focus.background]: cssVar(brand.error.base),
18
+ [buttonVars.focus.background]: cssVar(brand.error.base, '#de2e21'),
19
19
  [buttonVars.focus.border]: 'transparent',
20
- [buttonVars.focus.label]: cssVar(brand.error.accent),
21
- [buttonVars.focus.boxShadowInner]: cssVar(base.frenchVanilla100),
22
- [buttonVars.focus.boxShadowOuter]: cssVar(brand.common.focusOutline),
20
+ [buttonVars.focus.label]: cssVar(brand.error.accent, '#ffffff'),
21
+ [buttonVars.focus.boxShadowInner]: cssVar(base.frenchVanilla100, '#ffffff'),
22
+ [buttonVars.focus.boxShadowOuter]: cssVar(brand.common.focusOutline, '#0875e1'),
23
23
  },
24
24
  '&:active, &.active': {
25
- [buttonVars.active.background]: cssVar(brand.error.darkest),
25
+ [buttonVars.active.background]: cssVar(brand.error.darkest, 'rgba(128,22,14,1)'),
26
26
  [buttonVars.active.border]: 'transparent',
27
- [buttonVars.active.label]: cssVar(brand.error.accent),
27
+ [buttonVars.active.label]: cssVar(brand.error.accent, '#ffffff'),
28
28
  },
29
29
  '&:disabled, &:active:disabled, &:focus:disabled, &:hover:disabled': {
30
- [buttonVars.disabled.background]: cssVar(brand.error.light),
31
- [buttonVars.disabled.label]: cssVar(brand.error.accent),
30
+ [buttonVars.disabled.background]: cssVar(brand.error.light, '#fcc9c5'),
31
+ [buttonVars.disabled.label]: cssVar(brand.error.accent, '#ffffff'),
32
32
  opacity: 1,
33
33
  },
34
34
  });
package/dist/es6/button/lib/PrimaryButton.js CHANGED
@@ -6,61 +6,61 @@ import { base, brand, system } from '@workday/canvas-tokens-web';
6
6
  import { Button } from './Button';
7
7
  const primaryStyles = createStyles({
8
8
  // Default Styles
9
- [buttonVars.default.background]: cssVar(brand.primary.base, cssVar(base.blueberry400)),
9
+ [buttonVars.default.background]: cssVar(brand.primary.base, cssVar(base.blueberry400, '#0875e1')),
10
10
  [buttonVars.default.border]: 'transparent',
11
- [buttonVars.default.borderRadius]: cssVar(system.shape.circle),
12
- [buttonVars.default.label]: cssVar(brand.primary.accent),
13
- [buttonVars.default.icon]: cssVar(brand.primary.accent),
11
+ [buttonVars.default.borderRadius]: cssVar(system.shape.circle, '999px'),
12
+ [buttonVars.default.label]: cssVar(brand.primary.accent, '#ffffff'),
13
+ [buttonVars.default.icon]: cssVar(brand.primary.accent, '#ffffff'),
14
14
  // Hover Styles
15
- [buttonVars.hover.background]: cssVar(brand.primary.dark),
15
+ [buttonVars.hover.background]: cssVar(brand.primary.dark, 'rgba(0,92,184,1)'),
16
16
  [buttonVars.hover.border]: 'transparent',
17
- [buttonVars.hover.label]: cssVar(brand.primary.accent),
18
- [buttonVars.hover.icon]: cssVar(brand.primary.accent),
17
+ [buttonVars.hover.label]: cssVar(brand.primary.accent, '#ffffff'),
18
+ [buttonVars.hover.icon]: cssVar(brand.primary.accent, '#ffffff'),
19
19
  // Focus Styles
20
- [buttonVars.focus.background]: cssVar(brand.primary.base),
20
+ [buttonVars.focus.background]: cssVar(brand.primary.base, 'rgba(8,117,226,1)'),
21
21
  [buttonVars.focus.border]: 'transparent',
22
- [buttonVars.focus.label]: cssVar(brand.primary.accent),
23
- [buttonVars.focus.icon]: cssVar(brand.primary.accent),
24
- [buttonVars.focus.boxShadowInner]: cssVar(base.frenchVanilla100),
25
- [buttonVars.focus.boxShadowOuter]: cssVar(brand.common.focusOutline),
22
+ [buttonVars.focus.label]: cssVar(brand.primary.accent, '#ffffff'),
23
+ [buttonVars.focus.icon]: cssVar(brand.primary.accent, '#ffffff'),
24
+ [buttonVars.focus.boxShadowInner]: cssVar(base.frenchVanilla100, '#ffffff'),
25
+ [buttonVars.focus.boxShadowOuter]: cssVar(brand.common.focusOutline, 'rgba(8,117,226,1)'),
26
26
  // Active Styles
27
- [buttonVars.active.background]: cssVar(brand.primary.darkest),
27
+ [buttonVars.active.background]: cssVar(brand.primary.darkest, 'rgba(0,66,133,1)'),
28
28
  [buttonVars.active.border]: 'transparent',
29
- [buttonVars.active.label]: cssVar(brand.primary.accent),
30
- [buttonVars.active.icon]: cssVar(brand.primary.accent),
29
+ [buttonVars.active.label]: cssVar(brand.primary.accent, '#ffffff'),
30
+ [buttonVars.active.icon]: cssVar(brand.primary.accent, '#ffffff'),
31
31
  // Disabled Styles
32
- [buttonVars.disabled.background]: cssVar(brand.primary.base),
32
+ [buttonVars.disabled.background]: cssVar(brand.primary.base, 'rgba(8,117,226,1)'),
33
33
  [buttonVars.disabled.border]: 'transparent',
34
- [buttonVars.disabled.label]: cssVar(brand.primary.accent),
34
+ [buttonVars.disabled.label]: cssVar(brand.primary.accent, '#ffffff'),
35
35
  [buttonVars.disabled.opacity]: '0.4',
36
- [buttonVars.disabled.icon]: cssVar(brand.primary.accent),
36
+ [buttonVars.disabled.icon]: cssVar(brand.primary.accent, '#ffffff'),
37
37
  });
38
38
  export const primaryButtonModifiers = createModifiers({
39
39
  variant: {
40
40
  inverse: createStyles({
41
41
  // Default Styles
42
- [buttonVars.default.background]: cssVar(base.frenchVanilla100),
43
- [buttonVars.default.borderRadius]: cssVar(system.shape.circle),
44
- [buttonVars.default.label]: cssVar(base.blackPepper400),
45
- [buttonVars.default.icon]: cssVar(base.blackPepper400),
42
+ [buttonVars.default.background]: cssVar(base.frenchVanilla100, '#ffffff'),
43
+ [buttonVars.default.borderRadius]: cssVar(system.shape.circle, '999px'),
44
+ [buttonVars.default.label]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
45
+ [buttonVars.default.icon]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
46
46
  // Hover Styles
47
- [buttonVars.hover.background]: cssVar(base.soap300),
48
- [buttonVars.hover.label]: cssVar(base.blackPepper500),
49
- [buttonVars.hover.icon]: cssVar(base.blackPepper500),
47
+ [buttonVars.hover.background]: cssVar(base.soap300, 'rgba(232,235,237,1)'),
48
+ [buttonVars.hover.label]: cssVar(base.blackPepper500, 'rgba(31,31,31,1)'),
49
+ [buttonVars.hover.icon]: cssVar(base.blackPepper500, 'rgba(31,31,31,1)'),
50
50
  // Focus Styles
51
- [buttonVars.focus.background]: cssVar(base.frenchVanilla100),
52
- [buttonVars.focus.label]: cssVar(base.blackPepper400),
53
- [buttonVars.focus.icon]: cssVar(base.blackPepper400),
54
- [buttonVars.focus.boxShadowInner]: cssVar(base.blackPepper400),
55
- [buttonVars.focus.boxShadowOuter]: cssVar(base.frenchVanilla100),
51
+ [buttonVars.focus.background]: cssVar(base.frenchVanilla100, '#ffffff'),
52
+ [buttonVars.focus.label]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
53
+ [buttonVars.focus.icon]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
54
+ [buttonVars.focus.boxShadowInner]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
55
+ [buttonVars.focus.boxShadowOuter]: cssVar(base.frenchVanilla100, '#ffffff'),
56
56
  // Active Styles
57
- [buttonVars.active.background]: cssVar(base.soap400),
58
- [buttonVars.active.label]: cssVar(base.blackPepper500),
59
- [buttonVars.active.icon]: cssVar(base.blackPepper500),
57
+ [buttonVars.active.background]: cssVar(base.soap400, 'rgba(224,227,230,1)'),
58
+ [buttonVars.active.label]: cssVar(base.blackPepper500, 'rgba(31,31,31,1)'),
59
+ [buttonVars.active.icon]: cssVar(base.blackPepper500, 'rgba(31,31,31,1)'),
60
60
  // Disabled Styles
61
- [buttonVars.disabled.background]: cssVar(base.frenchVanilla100),
62
- [buttonVars.disabled.label]: cssVar(base.blackPepper400),
63
- [buttonVars.disabled.icon]: cssVar(base.blackPepper400),
61
+ [buttonVars.disabled.background]: cssVar(base.frenchVanilla100, '#ffffff'),
62
+ [buttonVars.disabled.label]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
63
+ [buttonVars.disabled.icon]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
64
64
  }),
65
65
  },
66
66
  });