@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/es6/button/lib/SecondaryButton.js CHANGED
@@ -7,64 +7,64 @@ import { Button } from './Button';
7
7
  const secondaryStyles = createStyles({
8
8
  // Default Styles
9
9
  [buttonVars.default.background]: 'transparent',
10
- [buttonVars.default.border]: cssVar(base.blackPepper400),
11
- [buttonVars.default.borderRadius]: cssVar(system.shape.circle),
12
- [buttonVars.default.label]: cssVar(base.blackPepper400),
13
- [buttonVars.default.icon]: cssVar(base.blackPepper400),
10
+ [buttonVars.default.border]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
11
+ [buttonVars.default.borderRadius]: cssVar(system.shape.circle, '999px'),
12
+ [buttonVars.default.label]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
13
+ [buttonVars.default.icon]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
14
14
  // Hover Styles
15
- [buttonVars.hover.background]: cssVar(base.blackPepper400),
16
- [buttonVars.hover.border]: cssVar(base.blackPepper400),
17
- [buttonVars.hover.label]: cssVar(brand.primary.accent),
18
- [buttonVars.hover.icon]: cssVar(brand.primary.accent),
15
+ [buttonVars.hover.background]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
16
+ [buttonVars.hover.border]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
17
+ [buttonVars.hover.label]: cssVar(brand.primary.accent, 'rgba(255,255,255,1)'),
18
+ [buttonVars.hover.icon]: cssVar(brand.primary.accent, 'rgba(255,255,255,1)'),
19
19
  // Focus Styles
20
20
  [buttonVars.focus.background]: 'transparent',
21
- [buttonVars.focus.border]: cssVar(base.blackPepper400),
22
- [buttonVars.focus.label]: cssVar(base.blackPepper400),
23
- [buttonVars.focus.icon]: cssVar(base.blackPepper400),
24
- [buttonVars.focus.boxShadowInner]: cssVar(base.frenchVanilla100),
25
- [buttonVars.focus.boxShadowOuter]: cssVar(brand.common.focusOutline),
21
+ [buttonVars.focus.border]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
22
+ [buttonVars.focus.label]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
23
+ [buttonVars.focus.icon]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
24
+ [buttonVars.focus.boxShadowInner]: cssVar(base.frenchVanilla100, 'rgba(255,255,255,1)'),
25
+ [buttonVars.focus.boxShadowOuter]: cssVar(brand.common.focusOutline, 'rgba(8,117,226,1)'),
26
26
  // Active Styles
27
- [buttonVars.active.background]: cssVar(base.blackPepper500),
28
- [buttonVars.active.border]: cssVar(base.blackPepper500),
29
- [buttonVars.active.label]: cssVar(brand.primary.accent),
30
- [buttonVars.active.icon]: cssVar(brand.primary.accent),
27
+ [buttonVars.active.background]: cssVar(base.blackPepper500, 'rgba(31,31,31,1)'),
28
+ [buttonVars.active.border]: cssVar(base.blackPepper500, 'rgba(31,31,31,1)'),
29
+ [buttonVars.active.label]: cssVar(brand.primary.accent, 'rgba(255,255,255,1)'),
30
+ [buttonVars.active.icon]: cssVar(brand.primary.accent, 'rgba(255,255,255,1)'),
31
31
  // Disabled Styles
32
32
  [buttonVars.disabled.background]: 'transparent',
33
- [buttonVars.disabled.border]: cssVar(base.blackPepper400),
34
- [buttonVars.disabled.label]: cssVar(base.blackPepper400),
33
+ [buttonVars.disabled.border]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
34
+ [buttonVars.disabled.label]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
35
35
  [buttonVars.disabled.opacity]: '0.4',
36
- [buttonVars.disabled.icon]: cssVar(base.blackPepper400),
36
+ [buttonVars.disabled.icon]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
37
37
  });
38
38
  export const secondaryButtonModifiers = createModifiers({
39
39
  variant: {
40
40
  inverse: createStyles({
41
41
  // Default Styles
42
42
  [buttonVars.default.background]: 'transparent',
43
- [buttonVars.default.border]: cssVar(base.frenchVanilla100),
44
- [buttonVars.default.label]: cssVar(base.frenchVanilla100),
45
- [buttonVars.default.icon]: cssVar(base.frenchVanilla100),
43
+ [buttonVars.default.border]: cssVar(base.frenchVanilla100, 'rgba(255,255,255,1)'),
44
+ [buttonVars.default.label]: cssVar(base.frenchVanilla100, 'rgba(255,255,255,1)'),
45
+ [buttonVars.default.icon]: cssVar(base.frenchVanilla100, 'rgba(255,255,255,1)'),
46
46
  // Hover Styles
47
- [buttonVars.hover.background]: cssVar(base.soap300),
48
- [buttonVars.hover.border]: cssVar(base.soap300),
49
- [buttonVars.hover.label]: cssVar(base.blackPepper500),
50
- [buttonVars.hover.icon]: cssVar(base.blackPepper500),
47
+ [buttonVars.hover.background]: cssVar(base.soap300, 'rgba(232,235,237,1)'),
48
+ [buttonVars.hover.border]: cssVar(base.soap300, 'rgba(232,235,237,1)'),
49
+ [buttonVars.hover.label]: cssVar(base.blackPepper500, 'rgba(31,31,31,1)'),
50
+ [buttonVars.hover.icon]: cssVar(base.blackPepper500, 'rgba(31,31,31,1)'),
51
51
  // Focus Styles
52
- [buttonVars.focus.background]: cssVar(base.frenchVanilla100),
53
- [buttonVars.focus.border]: cssVar(base.frenchVanilla100),
54
- [buttonVars.focus.label]: cssVar(base.blackPepper500),
55
- [buttonVars.focus.icon]: cssVar(base.blackPepper500),
56
- [buttonVars.focus.boxShadowInner]: cssVar(base.blackPepper500),
57
- [buttonVars.focus.boxShadowOuter]: cssVar(base.frenchVanilla100),
52
+ [buttonVars.focus.background]: cssVar(base.frenchVanilla100, 'rgba(255,255,255,1)'),
53
+ [buttonVars.focus.border]: cssVar(base.frenchVanilla100, 'rgba(255,255,255,1)'),
54
+ [buttonVars.focus.label]: cssVar(base.blackPepper500, 'rgba(31,31,31,1)'),
55
+ [buttonVars.focus.icon]: cssVar(base.blackPepper500, 'rgba(31,31,31,1)'),
56
+ [buttonVars.focus.boxShadowInner]: cssVar(base.blackPepper500, 'rgba(31,31,31,1)'),
57
+ [buttonVars.focus.boxShadowOuter]: cssVar(base.frenchVanilla100, 'rgba(255,255,255,1)'),
58
58
  // Active Styles
59
- [buttonVars.active.background]: cssVar(base.soap400),
60
- [buttonVars.active.border]: cssVar(base.soap400),
61
- [buttonVars.active.label]: cssVar(base.blackPepper500),
62
- [buttonVars.active.icon]: cssVar(base.blackPepper500),
59
+ [buttonVars.active.background]: cssVar(base.soap400, 'rgba(224,227,230,1)'),
60
+ [buttonVars.active.border]: cssVar(base.soap400, 'rgba(224,227,230,1)'),
61
+ [buttonVars.active.label]: cssVar(base.blackPepper500, 'rgba(31,31,31,1)'),
62
+ [buttonVars.active.icon]: cssVar(base.blackPepper500, 'rgba(31,31,31,1)'),
63
63
  // Disabled Styles
64
64
  [buttonVars.disabled.background]: 'transparent',
65
- [buttonVars.disabled.border]: cssVar(base.frenchVanilla100),
66
- [buttonVars.disabled.label]: cssVar(base.frenchVanilla100),
67
- [buttonVars.disabled.icon]: cssVar(base.frenchVanilla100),
65
+ [buttonVars.disabled.border]: cssVar(base.frenchVanilla100, 'rgba(255,255,255,1)'),
66
+ [buttonVars.disabled.label]: cssVar(base.frenchVanilla100, 'rgba(255,255,255,1)'),
67
+ [buttonVars.disabled.icon]: cssVar(base.frenchVanilla100, 'rgba(255,255,255,1)'),
68
68
  }),
69
69
  },
70
70
  });
package/dist/es6/button/lib/TertiaryButton.js CHANGED
@@ -6,38 +6,38 @@ import { system, brand, base } from '@workday/canvas-tokens-web';
6
6
  import { borderRadius, space } from '@workday/canvas-kit-react/tokens';
7
7
  import { Button } from './Button';
8
8
  const tertiaryStyles = createStyles({
9
- paddingInline: cssVar(system.space.x2, space.xxs),
9
+ paddingInline: cssVar(system.space.x2, '0.5rem'),
10
10
  minWidth: 'auto',
11
11
  textDecoration: 'underline',
12
12
  border: 0,
13
13
  // Default Styles
14
14
  [buttonVars.default.background]: 'transparent',
15
15
  [buttonVars.default.border]: 'transparent',
16
- [buttonVars.default.borderRadius]: cssVar(system.shape.medium),
17
- [buttonVars.default.label]: cssVar(brand.primary.base),
18
- [buttonVars.default.icon]: cssVar(base.blackPepper400),
16
+ [buttonVars.default.borderRadius]: cssVar(system.shape.medium, '0.25rem'),
17
+ [buttonVars.default.label]: cssVar(brand.primary.base, 'rgba(8,117,226,1)'),
18
+ [buttonVars.default.icon]: cssVar(base.blackPepper400, 'rgba(51, 51, 51, 1)'),
19
19
  // Hover Styles
20
- [buttonVars.hover.background]: cssVar(base.soap200),
20
+ [buttonVars.hover.background]: cssVar(base.soap200, 'rgba(241, 242, 243, 1)'),
21
21
  [buttonVars.hover.border]: 'transparent',
22
- [buttonVars.hover.label]: cssVar(brand.primary.dark),
23
- [buttonVars.hover.icon]: cssVar(base.blackPepper500),
22
+ [buttonVars.hover.label]: cssVar(brand.primary.dark, 'rgba(0,92,184,1)'),
23
+ [buttonVars.hover.icon]: cssVar(base.blackPepper500, 'rgba(31,31,31,1)'),
24
24
  // Focus Styles
25
25
  [buttonVars.focus.background]: 'transparent',
26
26
  [buttonVars.focus.border]: 'transparent',
27
- [buttonVars.focus.label]: cssVar(brand.primary.base),
28
- [buttonVars.focus.icon]: cssVar(base.blackPepper500),
29
- [buttonVars.focus.boxShadowInner]: cssVar(brand.common.focusOutline),
30
- [buttonVars.focus.boxShadowOuter]: cssVar(brand.common.focusOutline),
27
+ [buttonVars.focus.label]: cssVar(brand.primary.base, 'rgba(8,117,226,1)'),
28
+ [buttonVars.focus.icon]: cssVar(base.blackPepper500, 'rgba(31,31,31,1)'),
29
+ [buttonVars.focus.boxShadowInner]: cssVar(brand.common.focusOutline, 'rgba(8,117,226,1)'),
30
+ [buttonVars.focus.boxShadowOuter]: cssVar(brand.common.focusOutline, 'rgba(8,117,226,1)'),
31
31
  // Active Styles
32
- [buttonVars.active.background]: cssVar(base.soap300),
32
+ [buttonVars.active.background]: cssVar(base.soap300, 'rgba(232,235,237,1)'),
33
33
  [buttonVars.active.border]: 'transparent',
34
- [buttonVars.active.label]: cssVar(brand.primary.dark),
35
- [buttonVars.active.icon]: cssVar(base.blackPepper500),
34
+ [buttonVars.active.label]: cssVar(brand.primary.dark, 'rgba(0,92,184,1)'),
35
+ [buttonVars.active.icon]: cssVar(base.blackPepper500, 'rgba(31,31,31,1)'),
36
36
  // Disabled Styles
37
37
  [buttonVars.disabled.background]: 'transparent',
38
- [buttonVars.disabled.border]: cssVar(base.frenchVanilla100),
39
- [buttonVars.disabled.label]: cssVar(brand.primary.base),
40
- [buttonVars.disabled.icon]: cssVar(base.blackPepper400),
38
+ [buttonVars.disabled.border]: cssVar(base.frenchVanilla100, '#fff'),
39
+ [buttonVars.disabled.label]: cssVar(brand.primary.base, 'rgba(8,117,226,1)'),
40
+ [buttonVars.disabled.icon]: cssVar(base.blackPepper400, 'rgba(51, 51, 51, 1)'),
41
41
  [buttonVars.disabled.opacity]: '0.4',
42
42
  '&:focus-visible, &.focus': {
43
43
  ...focusRing({
@@ -51,11 +51,11 @@ const tertiaryStyles = createStyles({
51
51
  export const tertiaryButtonModifiers = createModifiers({
52
52
  isThemeable: {
53
53
  true: createStyles({
54
- [buttonVars.default.icon]: cssVar(brand.primary.base),
55
- [buttonVars.hover.icon]: cssVar(brand.primary.dark),
56
- [buttonVars.focus.icon]: cssVar(brand.primary.base),
57
- [buttonVars.active.icon]: cssVar(brand.primary.dark),
58
- [buttonVars.disabled.icon]: cssVar(brand.primary.base),
54
+ [buttonVars.default.icon]: cssVar(brand.primary.base, 'rgba(8,117,226,1)'),
55
+ [buttonVars.hover.icon]: cssVar(brand.primary.dark, 'rgba(0,92,184,1)'),
56
+ [buttonVars.focus.icon]: cssVar(brand.primary.base, 'rgba(8,117,226,1)'),
57
+ [buttonVars.active.icon]: cssVar(brand.primary.dark, 'rgba(0,92,184,1)'),
58
+ [buttonVars.disabled.icon]: cssVar(brand.primary.base, 'rgba(8,117,226,1)'),
59
59
  }),
60
60
  },
61
61
  variant: {
@@ -63,28 +63,28 @@ export const tertiaryButtonModifiers = createModifiers({
63
63
  // Default Styles
64
64
  [buttonVars.default.background]: 'transparent',
65
65
  [buttonVars.default.border]: 'transparent',
66
- [buttonVars.default.label]: cssVar(base.frenchVanilla100),
67
- [buttonVars.default.icon]: cssVar(base.frenchVanilla100),
66
+ [buttonVars.default.label]: cssVar(base.frenchVanilla100, '#fff'),
67
+ [buttonVars.default.icon]: cssVar(base.frenchVanilla100, '#fff'),
68
68
  // Hover Styles
69
- [buttonVars.hover.background]: cssVar(base.frenchVanilla100),
69
+ [buttonVars.hover.background]: cssVar(base.frenchVanilla100, '#fff'),
70
70
  [buttonVars.hover.border]: 'transparent',
71
- [buttonVars.hover.label]: cssVar(base.blackPepper400),
72
- [buttonVars.hover.icon]: cssVar(base.blackPepper400),
71
+ [buttonVars.hover.label]: cssVar(base.blackPepper400, 'rgba(51, 51, 51, 1)'),
72
+ [buttonVars.hover.icon]: cssVar(base.blackPepper400, 'rgba(51, 51, 51, 1)'),
73
73
  // Focus Styles
74
- [buttonVars.focus.background]: cssVar(base.frenchVanilla100),
74
+ [buttonVars.focus.background]: cssVar(base.frenchVanilla100, '#fff'),
75
75
  [buttonVars.focus.border]: 'transparent',
76
- [buttonVars.focus.label]: cssVar(base.blackPepper400),
77
- [buttonVars.focus.icon]: cssVar(base.blackPepper400),
76
+ [buttonVars.focus.label]: cssVar(base.blackPepper400, 'rgba(51, 51, 51, 1)'),
77
+ [buttonVars.focus.icon]: cssVar(base.blackPepper400, 'rgba(51, 51, 51, 1)'),
78
78
  // Active Styles
79
- [buttonVars.active.background]: cssVar(base.soap200),
79
+ [buttonVars.active.background]: cssVar(base.soap200, 'rgba(241, 242, 243, 1)'),
80
80
  [buttonVars.active.border]: 'transparent',
81
- [buttonVars.active.label]: cssVar(base.blackPepper400),
82
- [buttonVars.active.icon]: cssVar(base.blackPepper400),
81
+ [buttonVars.active.label]: cssVar(base.blackPepper400, 'rgba(51, 51, 51, 1)'),
82
+ [buttonVars.active.icon]: cssVar(base.blackPepper400, 'rgba(51, 51, 51, 1)'),
83
83
  // Disabled Styles
84
84
  [buttonVars.disabled.background]: 'transparent',
85
- [buttonVars.disabled.border]: cssVar(base.frenchVanilla100),
86
- [buttonVars.disabled.label]: cssVar(base.frenchVanilla100),
87
- [buttonVars.disabled.icon]: cssVar(base.frenchVanilla100),
85
+ [buttonVars.disabled.border]: cssVar(base.frenchVanilla100, '#fff'),
86
+ [buttonVars.disabled.label]: cssVar(base.frenchVanilla100, '#fff'),
87
+ [buttonVars.disabled.icon]: cssVar(base.frenchVanilla100, '#fff'),
88
88
  '&:focus-visible, &.focus': {
89
89
  ...focusRing({
90
90
  inset: 'inner',
@@ -100,7 +100,7 @@ export const tertiaryButtonModifiers = createModifiers({
100
100
  largeOnly: createStyles({
101
101
  borderRadius: borderRadius.circle,
102
102
  padding: '0',
103
- minWidth: cssVar(system.space.x12),
103
+ minWidth: cssVar(system.space.x12, '3rem'),
104
104
  }),
105
105
  largeStart: createStyles({
106
106
  paddingInlineStart: space.xxs,
package/dist/es6/button/lib/ToolbarDropdownButton.js CHANGED
@@ -30,7 +30,7 @@ const StyledToolbarDropdownButton = styled(BaseButton)({
30
30
  width: 2,
31
31
  separation: 0,
32
32
  innerColor: 'transparent',
33
- outerColor: cssVar(brand.common.focusOutline),
33
+ outerColor: cssVar(brand.common.focusOutline, '#0875e1'),
34
34
  }),
35
35
  },
36
36
  });
package/dist/es6/button/lib/ToolbarIconButton.js CHANGED
@@ -15,7 +15,7 @@ const StyledToolbarIconButton = styled(BaseButton)({
15
15
  width: 2,
16
16
  separation: 0,
17
17
  innerColor: 'transparent',
18
- outerColor: cssVar(brand.common.focusOutline),
18
+ outerColor: cssVar(brand.common.focusOutline, 'rgba(8,117,226,1)'),
19
19
  }),
20
20
  },
21
21
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-react",
3
- "version": "10.0.0-alpha.550-next.0",
3
+ "version": "10.0.0-alpha.552-next.0",
4
4
  "description": "The parent module that contains all Workday Canvas Kit React components",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "Apache-2.0",
@@ -49,8 +49,8 @@
49
49
  "@emotion/styled": "^11.6.0",
50
50
  "@popperjs/core": "^2.5.4",
51
51
  "@workday/canvas-colors-web": "^2.0.0",
52
- "@workday/canvas-kit-popup-stack": "^10.0.0-alpha.550-next.0",
53
- "@workday/canvas-kit-styling": "^10.0.0-alpha.550-next.0",
52
+ "@workday/canvas-kit-popup-stack": "^10.0.0-alpha.552-next.0",
53
+ "@workday/canvas-kit-styling": "^10.0.0-alpha.552-next.0",
54
54
  "@workday/canvas-system-icons-web": "^3.0.0",
55
55
  "@workday/canvas-tokens-web": "0.1.6",
56
56
  "@workday/design-assets-types": "^0.2.8",
@@ -68,5 +68,5 @@
68
68
  "@workday/canvas-accent-icons-web": "^3.0.0",
69
69
  "@workday/canvas-applet-icons-web": "^2.0.0"
70
70
  },
71
- "gitHead": "0dd148672b853a5f8c3f2d50904c538bcec74c14"
71
+ "gitHead": "73b9c6f0e6ae847d93cc460065857756e25c9d90"
72
72
  }