@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/BaseButton.js CHANGED
@@ -26,7 +26,6 @@ const ButtonLabel_1 = require("../lib/parts/ButtonLabel");
26
26
  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
- const tokens_1 = require("@workday/canvas-kit-react/tokens");
30
29
  const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
31
30
  /**
32
31
  * Factory function for creating Button vars.
@@ -52,10 +51,10 @@ const baseButtonStyles = canvas_kit_styling_1.createStyles({
52
51
  letterSpacing: '0.015rem',
53
52
  fontWeight: 'bold',
54
53
  backgroundColor: canvas_kit_styling_1.cssVar(exports.buttonVars.default.background, 'transparent'),
55
- color: canvas_kit_styling_1.cssVar(exports.buttonVars.default.label, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400)),
54
+ color: canvas_kit_styling_1.cssVar(exports.buttonVars.default.label, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, '#333333')),
56
55
  borderWidth: '1px',
57
56
  borderStyle: 'solid',
58
- gap: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x2, tokens_1.space.xxs),
57
+ gap: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x2, '0.5rem'),
59
58
  borderColor: canvas_kit_styling_1.cssVar(exports.buttonVars.default.border, 'transparent'),
60
59
  cursor: 'pointer',
61
60
  display: 'inline-flex',
@@ -67,7 +66,7 @@ const baseButtonStyles = canvas_kit_styling_1.createStyles({
67
66
  whiteSpace: 'nowrap',
68
67
  WebkitFontSmoothing: 'antialiased',
69
68
  MozOsxFontSmoothing: 'grayscale',
70
- borderRadius: canvas_kit_styling_1.cssVar(exports.buttonVars.default.borderRadius, canvas_tokens_web_1.system.shape.circle),
69
+ borderRadius: canvas_kit_styling_1.cssVar(exports.buttonVars.default.borderRadius, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.shape.circle, '999px')),
71
70
  position: 'relative',
72
71
  verticalAlign: 'middle',
73
72
  overflow: 'hidden',
@@ -79,46 +78,46 @@ const baseButtonStyles = canvas_kit_styling_1.createStyles({
79
78
  },
80
79
  '& span .wd-icon-fill': {
81
80
  transitionDuration: '40ms',
82
- fill: canvas_kit_styling_1.cssVar(exports.buttonVars.default.icon, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400)),
81
+ fill: canvas_kit_styling_1.cssVar(exports.buttonVars.default.icon, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, '#333333')),
83
82
  },
84
83
  '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
85
- fill: canvas_kit_styling_1.cssVar(exports.buttonVars.default.icon, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400)),
84
+ fill: canvas_kit_styling_1.cssVar(exports.buttonVars.default.icon, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, '#333333')),
86
85
  },
87
86
  '&:focus-visible, &.focus': {
88
87
  backgroundColor: canvas_kit_styling_1.cssVar(exports.buttonVars.focus.background, 'transparent'),
89
88
  borderColor: canvas_kit_styling_1.cssVar(exports.buttonVars.focus.border, 'transparent'),
90
- color: canvas_kit_styling_1.cssVar(exports.buttonVars.focus.label, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400)),
89
+ color: canvas_kit_styling_1.cssVar(exports.buttonVars.focus.label, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, '#333333')),
91
90
  '& span .wd-icon-fill': {
92
- fill: canvas_kit_styling_1.cssVar(exports.buttonVars.focus.icon, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400)),
91
+ fill: canvas_kit_styling_1.cssVar(exports.buttonVars.focus.icon, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, '#333333')),
93
92
  },
94
93
  '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
95
- fill: canvas_kit_styling_1.cssVar(exports.buttonVars.focus.icon, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400)),
94
+ fill: canvas_kit_styling_1.cssVar(exports.buttonVars.focus.icon, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, '#333333')),
96
95
  },
97
96
  ...common_1.focusRing({
98
97
  width: 2,
99
98
  separation: 2,
100
- innerColor: canvas_kit_styling_1.cssVar(exports.buttonVars.focus.boxShadowInner, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100)),
101
- outerColor: canvas_kit_styling_1.cssVar(exports.buttonVars.focus.boxShadowOuter, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.base)),
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)')),
102
101
  }),
103
102
  },
104
103
  '&:hover, &.hover': {
105
- backgroundColor: canvas_kit_styling_1.cssVar(exports.buttonVars.hover.background, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500)),
104
+ backgroundColor: canvas_kit_styling_1.cssVar(exports.buttonVars.hover.background, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500, '#1e1e1e')),
106
105
  borderColor: canvas_kit_styling_1.cssVar(exports.buttonVars.hover.border, 'transparent'),
107
- color: canvas_kit_styling_1.cssVar(exports.buttonVars.hover.label, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500)),
106
+ color: canvas_kit_styling_1.cssVar(exports.buttonVars.hover.label, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500, '#1e1e1e')),
108
107
  '& span .wd-icon-fill': {
109
- fill: canvas_kit_styling_1.cssVar(exports.buttonVars.hover.icon, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500)),
108
+ fill: canvas_kit_styling_1.cssVar(exports.buttonVars.hover.icon, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500, '#1e1e1e')),
110
109
  },
111
110
  '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
112
- fill: canvas_kit_styling_1.cssVar(exports.buttonVars.hover.icon, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500)),
111
+ fill: canvas_kit_styling_1.cssVar(exports.buttonVars.hover.icon, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500, '#1e1e1e')),
113
112
  },
114
113
  },
115
114
  '&:hover:active': { transitionDuration: '40ms' },
116
115
  '&:active, &.active': {
117
116
  backgroundColor: canvas_kit_styling_1.cssVar(exports.buttonVars.active.background, 'transparent'),
118
117
  borderColor: canvas_kit_styling_1.cssVar(exports.buttonVars.active.border, 'transparent'),
119
- color: canvas_kit_styling_1.cssVar(exports.buttonVars.active.label, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400)),
118
+ color: canvas_kit_styling_1.cssVar(exports.buttonVars.active.label, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, '#333333')),
120
119
  '& span .wd-icon-fill': {
121
- fill: canvas_kit_styling_1.cssVar(exports.buttonVars.active.icon, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400)),
120
+ fill: canvas_kit_styling_1.cssVar(exports.buttonVars.active.icon, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, '#333333')),
122
121
  },
123
122
  '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
124
123
  fill: canvas_kit_styling_1.cssVar(exports.buttonVars.active.icon),
@@ -127,12 +126,12 @@ const baseButtonStyles = canvas_kit_styling_1.createStyles({
127
126
  '&:disabled': {
128
127
  backgroundColor: canvas_kit_styling_1.cssVar(exports.buttonVars.disabled.background, 'transparent'),
129
128
  borderColor: canvas_kit_styling_1.cssVar(exports.buttonVars.disabled.border, 'transparent'),
130
- color: canvas_kit_styling_1.cssVar(exports.buttonVars.disabled.label, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400)),
129
+ color: canvas_kit_styling_1.cssVar(exports.buttonVars.disabled.label, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, '#333333')),
131
130
  '& span .wd-icon-fill': {
132
- fill: canvas_kit_styling_1.cssVar(exports.buttonVars.disabled.icon, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400)),
131
+ fill: canvas_kit_styling_1.cssVar(exports.buttonVars.disabled.icon, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, '#333333')),
133
132
  },
134
133
  '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
135
- fill: canvas_kit_styling_1.cssVar(exports.buttonVars.disabled.icon, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400)),
134
+ fill: canvas_kit_styling_1.cssVar(exports.buttonVars.disabled.icon, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, '#333333')),
136
135
  },
137
136
  },
138
137
  });
@@ -145,77 +144,77 @@ const baseButtonStyles = canvas_kit_styling_1.createStyles({
145
144
  exports.buttonModifiers = canvas_kit_styling_1.createModifiers({
146
145
  size: {
147
146
  large: canvas_kit_styling_1.createStyles({
148
- fontSize: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x4),
149
- lineHeight: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x6),
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'),
150
149
  letterSpacing: '0.01rem',
151
150
  height: '48px',
152
- paddingInline: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x8),
151
+ paddingInline: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x8, '2rem'),
153
152
  minWidth: '112px',
154
153
  }),
155
154
  medium: canvas_kit_styling_1.createStyles({
156
155
  fontSize: '0.875rem',
157
156
  letterSpacing: '0.015rem',
158
157
  minWidth: '96px',
159
- paddingInline: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x6),
160
- height: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x10),
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'),
161
160
  }),
162
161
  small: canvas_kit_styling_1.createStyles({
163
162
  fontSize: '0.875rem',
164
163
  letterSpacing: '0.015rem',
165
- height: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x8),
166
- minWidth: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x20),
167
- paddingInline: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x4),
168
- gap: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x1),
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'),
169
168
  }),
170
169
  extraSmall: canvas_kit_styling_1.createStyles({
171
170
  fontSize: '0.75rem',
172
- lineHeight: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x4),
171
+ lineHeight: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x4, '1rem'),
173
172
  letterSpacing: '0.02rem',
174
- height: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x6),
173
+ height: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x6, '1.5rem'),
175
174
  minWidth: 'auto',
176
- paddingInline: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x3),
177
- gap: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x1),
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'),
178
177
  }),
179
178
  },
180
179
  iconPosition: {
181
180
  largeOnly: canvas_kit_styling_1.createStyles({
182
181
  padding: '0',
183
- minWidth: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x12),
182
+ minWidth: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x12, '3rem'),
184
183
  }),
185
184
  largeStart: canvas_kit_styling_1.createStyles({
186
- paddingInlineStart: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x6),
187
- paddingInlineEnd: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x8),
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'),
188
187
  }),
189
188
  largeEnd: canvas_kit_styling_1.createStyles({
190
- paddingInlineStart: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x8),
191
- paddingInlineEnd: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x6),
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'),
192
191
  }),
193
- mediumOnly: canvas_kit_styling_1.createStyles({ padding: '0', minWidth: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x10, tokens_1.space.xl) }),
192
+ mediumOnly: canvas_kit_styling_1.createStyles({ padding: '0', minWidth: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x10, '2.5rem') }),
194
193
  mediumStart: canvas_kit_styling_1.createStyles({
195
- paddingInlineStart: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x5),
196
- paddingInlineEnd: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x6),
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'),
197
196
  }),
198
197
  mediumEnd: canvas_kit_styling_1.createStyles({
199
- paddingInlineStart: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x6),
200
- paddingInlineEnd: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x5),
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'),
201
200
  }),
202
- smallOnly: canvas_kit_styling_1.createStyles({ padding: '0', minWidth: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x8, tokens_1.space.l) }),
201
+ smallOnly: canvas_kit_styling_1.createStyles({ padding: '0', minWidth: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x8, '2rem') }),
203
202
  smallStart: canvas_kit_styling_1.createStyles({
204
- paddingInlineStart: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x3),
205
- paddingInlineEnd: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x4),
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'),
206
205
  }),
207
206
  smallEnd: canvas_kit_styling_1.createStyles({
208
- paddingInlineStart: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x4),
209
- paddingInlineEnd: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x3),
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'),
210
209
  }),
211
- extraSmallOnly: canvas_kit_styling_1.createStyles({ padding: '0', minWidth: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x6, tokens_1.space.m) }),
210
+ extraSmallOnly: canvas_kit_styling_1.createStyles({ padding: '0', minWidth: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x6, '1.5rem') }),
212
211
  extraSmallStart: canvas_kit_styling_1.createStyles({
213
- paddingInlineStart: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x2),
214
- paddingInlineEnd: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x3),
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'),
215
214
  }),
216
215
  extraSmallEnd: canvas_kit_styling_1.createStyles({
217
- paddingInlineStart: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x3),
218
- paddingInlineEnd: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x2),
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'),
219
218
  }),
220
219
  },
221
220
  });
package/dist/commonjs/button/lib/DeleteButton.js CHANGED
@@ -27,30 +27,30 @@ 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
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),
30
+ [BaseButton_1.buttonVars.default.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.error.base, '#de2e21'),
31
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),
33
- [BaseButton_1.buttonVars.default.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.error.accent),
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
34
  '&:hover, &.hover': {
35
- [BaseButton_1.buttonVars.hover.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.error.dark),
35
+ [BaseButton_1.buttonVars.hover.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.error.dark, '#a31b12'),
36
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),
37
+ [BaseButton_1.buttonVars.hover.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.error.accent, '#ffffff'),
38
38
  },
39
39
  '&:focus-visible, &.focus': {
40
- [BaseButton_1.buttonVars.focus.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.error.base),
40
+ [BaseButton_1.buttonVars.focus.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.error.base, '#de2e21'),
41
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),
43
- [BaseButton_1.buttonVars.focus.boxShadowInner]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100),
44
- [BaseButton_1.buttonVars.focus.boxShadowOuter]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.common.focusOutline),
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
45
  },
46
46
  '&:active, &.active': {
47
- [BaseButton_1.buttonVars.active.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.error.darkest),
47
+ [BaseButton_1.buttonVars.active.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.error.darkest, 'rgba(128,22,14,1)'),
48
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),
49
+ [BaseButton_1.buttonVars.active.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.error.accent, '#ffffff'),
50
50
  },
51
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),
53
- [BaseButton_1.buttonVars.disabled.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.error.accent),
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
54
  opacity: 1,
55
55
  },
56
56
  });
package/dist/commonjs/button/lib/PrimaryButton.js CHANGED
@@ -28,61 +28,61 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
28
28
  const Button_1 = require("./Button");
29
29
  const primaryStyles = canvas_kit_styling_1.createStyles({
30
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)),
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
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),
34
- [BaseButton_1.buttonVars.default.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.accent),
35
- [BaseButton_1.buttonVars.default.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.accent),
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
36
  // Hover Styles
37
- [BaseButton_1.buttonVars.hover.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.dark),
37
+ [BaseButton_1.buttonVars.hover.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.dark, 'rgba(0,92,184,1)'),
38
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),
40
- [BaseButton_1.buttonVars.hover.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.accent),
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
41
  // Focus Styles
42
- [BaseButton_1.buttonVars.focus.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.base),
42
+ [BaseButton_1.buttonVars.focus.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.base, 'rgba(8,117,226,1)'),
43
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),
45
- [BaseButton_1.buttonVars.focus.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.accent),
46
- [BaseButton_1.buttonVars.focus.boxShadowInner]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100),
47
- [BaseButton_1.buttonVars.focus.boxShadowOuter]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.common.focusOutline),
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
48
  // Active Styles
49
- [BaseButton_1.buttonVars.active.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.darkest),
49
+ [BaseButton_1.buttonVars.active.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.darkest, 'rgba(0,66,133,1)'),
50
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),
52
- [BaseButton_1.buttonVars.active.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.accent),
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
53
  // Disabled Styles
54
- [BaseButton_1.buttonVars.disabled.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.base),
54
+ [BaseButton_1.buttonVars.disabled.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.base, 'rgba(8,117,226,1)'),
55
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),
56
+ [BaseButton_1.buttonVars.disabled.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.accent, '#ffffff'),
57
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),
58
+ [BaseButton_1.buttonVars.disabled.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.accent, '#ffffff'),
59
59
  });
60
60
  exports.primaryButtonModifiers = canvas_kit_styling_1.createModifiers({
61
61
  variant: {
62
62
  inverse: canvas_kit_styling_1.createStyles({
63
63
  // Default Styles
64
- [BaseButton_1.buttonVars.default.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100),
65
- [BaseButton_1.buttonVars.default.borderRadius]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.shape.circle),
66
- [BaseButton_1.buttonVars.default.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400),
67
- [BaseButton_1.buttonVars.default.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400),
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
68
  // Hover Styles
69
- [BaseButton_1.buttonVars.hover.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.soap300),
70
- [BaseButton_1.buttonVars.hover.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500),
71
- [BaseButton_1.buttonVars.hover.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500),
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
72
  // Focus Styles
73
- [BaseButton_1.buttonVars.focus.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100),
74
- [BaseButton_1.buttonVars.focus.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400),
75
- [BaseButton_1.buttonVars.focus.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400),
76
- [BaseButton_1.buttonVars.focus.boxShadowInner]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400),
77
- [BaseButton_1.buttonVars.focus.boxShadowOuter]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100),
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
78
  // Active Styles
79
- [BaseButton_1.buttonVars.active.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.soap400),
80
- [BaseButton_1.buttonVars.active.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500),
81
- [BaseButton_1.buttonVars.active.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500),
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
82
  // Disabled Styles
83
- [BaseButton_1.buttonVars.disabled.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100),
84
- [BaseButton_1.buttonVars.disabled.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400),
85
- [BaseButton_1.buttonVars.disabled.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400),
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
86
  }),
87
87
  },
88
88
  });
package/dist/commonjs/button/lib/SecondaryButton.js CHANGED
@@ -29,64 +29,64 @@ const Button_1 = require("./Button");
29
29
  const secondaryStyles = canvas_kit_styling_1.createStyles({
30
30
  // Default Styles
31
31
  [BaseButton_1.buttonVars.default.background]: 'transparent',
32
- [BaseButton_1.buttonVars.default.border]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400),
33
- [BaseButton_1.buttonVars.default.borderRadius]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.shape.circle),
34
- [BaseButton_1.buttonVars.default.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400),
35
- [BaseButton_1.buttonVars.default.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400),
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
36
  // Hover Styles
37
- [BaseButton_1.buttonVars.hover.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400),
38
- [BaseButton_1.buttonVars.hover.border]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400),
39
- [BaseButton_1.buttonVars.hover.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.accent),
40
- [BaseButton_1.buttonVars.hover.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.accent),
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
41
  // Focus Styles
42
42
  [BaseButton_1.buttonVars.focus.background]: 'transparent',
43
- [BaseButton_1.buttonVars.focus.border]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400),
44
- [BaseButton_1.buttonVars.focus.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400),
45
- [BaseButton_1.buttonVars.focus.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400),
46
- [BaseButton_1.buttonVars.focus.boxShadowInner]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100),
47
- [BaseButton_1.buttonVars.focus.boxShadowOuter]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.common.focusOutline),
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
48
  // Active Styles
49
- [BaseButton_1.buttonVars.active.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500),
50
- [BaseButton_1.buttonVars.active.border]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500),
51
- [BaseButton_1.buttonVars.active.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.accent),
52
- [BaseButton_1.buttonVars.active.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.accent),
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
53
  // Disabled Styles
54
54
  [BaseButton_1.buttonVars.disabled.background]: 'transparent',
55
- [BaseButton_1.buttonVars.disabled.border]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400),
56
- [BaseButton_1.buttonVars.disabled.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400),
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
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),
58
+ [BaseButton_1.buttonVars.disabled.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, 'rgba(51,51,51,1)'),
59
59
  });
60
60
  exports.secondaryButtonModifiers = canvas_kit_styling_1.createModifiers({
61
61
  variant: {
62
62
  inverse: canvas_kit_styling_1.createStyles({
63
63
  // Default Styles
64
64
  [BaseButton_1.buttonVars.default.background]: 'transparent',
65
- [BaseButton_1.buttonVars.default.border]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100),
66
- [BaseButton_1.buttonVars.default.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100),
67
- [BaseButton_1.buttonVars.default.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100),
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
68
  // Hover Styles
69
- [BaseButton_1.buttonVars.hover.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.soap300),
70
- [BaseButton_1.buttonVars.hover.border]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.soap300),
71
- [BaseButton_1.buttonVars.hover.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500),
72
- [BaseButton_1.buttonVars.hover.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500),
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
73
  // Focus Styles
74
- [BaseButton_1.buttonVars.focus.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100),
75
- [BaseButton_1.buttonVars.focus.border]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100),
76
- [BaseButton_1.buttonVars.focus.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500),
77
- [BaseButton_1.buttonVars.focus.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500),
78
- [BaseButton_1.buttonVars.focus.boxShadowInner]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500),
79
- [BaseButton_1.buttonVars.focus.boxShadowOuter]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100),
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
80
  // Active Styles
81
- [BaseButton_1.buttonVars.active.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.soap400),
82
- [BaseButton_1.buttonVars.active.border]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.soap400),
83
- [BaseButton_1.buttonVars.active.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500),
84
- [BaseButton_1.buttonVars.active.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500),
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
85
  // Disabled Styles
86
86
  [BaseButton_1.buttonVars.disabled.background]: 'transparent',
87
- [BaseButton_1.buttonVars.disabled.border]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100),
88
- [BaseButton_1.buttonVars.disabled.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100),
89
- [BaseButton_1.buttonVars.disabled.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100),
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
90
  }),
91
91
  },
92
92
  });