@workday/canvas-kit-preview-react 11.0.0-alpha.787-next.0 → 11.0.0-alpha.790-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 (14) hide show
  1. package/dist/commonjs/pill/lib/Pill.d.ts.map +1 -1
  2. package/dist/commonjs/pill/lib/Pill.js +66 -66
  3. package/dist/commonjs/pill/lib/PillIconButton.d.ts.map +1 -1
  4. package/dist/commonjs/pill/lib/PillIconButton.js +16 -19
  5. package/dist/commonjs/status-indicator/lib/StatusIndicator.js +13 -13
  6. package/dist/es6/pill/lib/Pill.d.ts.map +1 -1
  7. package/dist/es6/pill/lib/Pill.js +68 -68
  8. package/dist/es6/pill/lib/PillIconButton.d.ts.map +1 -1
  9. package/dist/es6/pill/lib/PillIconButton.js +18 -21
  10. package/dist/es6/status-indicator/lib/StatusIndicator.js +13 -13
  11. package/package.json +4 -4
  12. package/pill/lib/Pill.tsx +84 -93
  13. package/pill/lib/PillIconButton.tsx +19 -22
  14. package/status-indicator/lib/StatusIndicator.tsx +1 -1
package/dist/commonjs/pill/lib/Pill.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../../../pill/lib/Pill.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAC,QAAQ,EAAmB,MAAM,kCAAkC,CAAC;AAa5E,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,WAAW,CAAC;CAChD;AAwJD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;IAIb;;;;;;;;;;OAUG;;;;;;;;;IAEH;;;;;;;;;OASG;;IAEH;;;;;;;;;;;OAWG;;;;;;;;;IAEH;;;;;;;;;;;OAWG;;;;;;;;;IAEH;;;;;;;;;OASG;;;;;;;;;CAmDL,CAAC"}
1
+ {"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../../../pill/lib/Pill.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAC,QAAQ,EAAmB,MAAM,kCAAkC,CAAC;AAa5E,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,WAAW,CAAC;CAChD;AAsJD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;IAIb;;;;;;;;;;OAUG;;;;;;;;;IAEH;;;;;;;;;OASG;;IAEH;;;;;;;;;;;OAWG;;;;;;;;;IAEH;;;;;;;;;;;OAWG;;;;;;;;;IAEH;;;;;;;;;OASG;;;;;;;;;CAmDL,CAAC"}
package/dist/commonjs/pill/lib/Pill.js CHANGED
@@ -17,7 +17,7 @@ const PillCount_1 = require("./PillCount");
17
17
  const PillAvatar_1 = require("./PillAvatar");
18
18
  const PillLabel_1 = require("./PillLabel");
19
19
  const icon_1 = require("@workday/canvas-kit-react/icon");
20
- const pillBaseStyles = {
20
+ const StyledBasePill = common_1.styled(button_1.BaseButton)({
21
21
  display: 'inline-flex',
22
22
  alignItems: 'center',
23
23
  borderRadius: tokens_1.borderRadius.m,
@@ -33,73 +33,66 @@ const pillBaseStyles = {
33
33
  padding: `2px ${tokens_1.space.xxs}`,
34
34
  height: tokens_1.space.m,
35
35
  position: 'relative',
36
- };
37
- const StyledBasePill = common_1.styled(button_1.BaseButton.as('button'))({
38
- ...pillBaseStyles,
39
- '&:active, &:active:hover, &:active:focus': {
40
- 'span[data-count="ck-pill-count"]': {
41
- backgroundColor: tokens_1.colors.soap600,
42
- border: 'none',
43
- },
36
+ 'span[data-count="ck-pill-count"]': {
37
+ borderTop: `${canvas_kit_styling_1.px2rem(1)} solid transparent`,
38
+ borderBottom: `${canvas_kit_styling_1.px2rem(1)} solid transparent`,
39
+ borderRight: `${canvas_kit_styling_1.px2rem(1)} solid transparent`,
44
40
  },
45
- ...common_1.mouseFocusBehavior({
46
- '&:focus': {
47
- 'span[data-count="ck-pill-count"]': {
48
- border: 'none',
49
- },
50
- },
51
- }),
52
- [button_1.buttonColorPropVars.default.background]: tokens_1.colors.soap300,
53
- [button_1.buttonColorPropVars.default.border]: tokens_1.colors.licorice200,
54
- [button_1.buttonColorPropVars.default.label]: tokens_1.colors.blackPepper400,
41
+ [button_1.buttonStencil.vars.background]: tokens_1.colors.soap300,
42
+ [button_1.buttonStencil.vars.border]: tokens_1.colors.licorice200,
43
+ [button_1.buttonStencil.vars.label]: tokens_1.colors.blackPepper400,
55
44
  [icon_1.systemIconStencil.vars.color]: tokens_1.colors.licorice200,
45
+ // This style ensures the removable button icon changes when you hover over the pill and not just the removable PillButton
56
46
  button: {
57
47
  [icon_1.systemIconStencil.vars.color]: tokens_1.colors.licorice200,
58
48
  },
59
49
  '&:focus-visible, &.focus': {
60
- [button_1.buttonColorPropVars.focus.background]: tokens_1.colors.soap300,
61
- [button_1.buttonColorPropVars.focus.border]: tokens_1.colors.blueberry400,
62
- [button_1.buttonColorPropVars.focus.label]: tokens_1.colors.blackPepper400,
50
+ [button_1.buttonStencil.vars.background]: tokens_1.colors.soap300,
51
+ [button_1.buttonStencil.vars.border]: tokens_1.colors.blueberry400,
52
+ [button_1.buttonStencil.vars.label]: tokens_1.colors.blackPepper400,
63
53
  [icon_1.systemIconStencil.vars.color]: tokens_1.colors.licorice500,
64
54
  button: {
65
55
  [icon_1.systemIconStencil.vars.color]: tokens_1.colors.licorice500,
66
56
  },
67
57
  'span[data-count="ck-pill-count"]': {
68
- borderTop: `${canvas_kit_styling_1.px2rem(1)} solid ${tokens_1.colors.blueberry400}`,
69
- borderBottom: `${canvas_kit_styling_1.px2rem(1)} solid ${tokens_1.colors.blueberry400}`,
70
- borderRight: `${canvas_kit_styling_1.px2rem(1)} solid ${tokens_1.colors.blueberry400}`,
58
+ borderColor: tokens_1.colors.blueberry400,
71
59
  },
72
60
  },
73
61
  '&:hover, &.hover': {
74
- [button_1.buttonColorPropVars.hover.background]: tokens_1.colors.soap400,
75
- [button_1.buttonColorPropVars.hover.border]: tokens_1.colors.licorice400,
76
- [button_1.buttonColorPropVars.hover.label]: tokens_1.colors.blackPepper400,
62
+ [button_1.buttonStencil.vars.background]: tokens_1.colors.soap400,
63
+ [button_1.buttonStencil.vars.border]: tokens_1.colors.licorice400,
64
+ [button_1.buttonStencil.vars.label]: tokens_1.colors.blackPepper400,
77
65
  [icon_1.systemIconStencil.vars.color]: tokens_1.colors.licorice500,
78
66
  button: {
79
67
  [icon_1.systemIconStencil.vars.color]: tokens_1.colors.licorice500,
80
68
  },
81
69
  },
82
70
  '&:active, &.active': {
83
- [button_1.buttonColorPropVars.active.background]: tokens_1.colors.soap500,
84
- [button_1.buttonColorPropVars.active.border]: tokens_1.colors.licorice500,
85
- [button_1.buttonColorPropVars.active.label]: tokens_1.colors.blackPepper400,
71
+ [button_1.buttonStencil.vars.background]: tokens_1.colors.soap500,
72
+ [button_1.buttonStencil.vars.border]: tokens_1.colors.licorice500,
73
+ [button_1.buttonStencil.vars.label]: tokens_1.colors.blackPepper400,
86
74
  [icon_1.systemIconStencil.vars.color]: tokens_1.colors.licorice500,
87
75
  button: {
76
+ [button_1.buttonStencil.vars.background]: tokens_1.colors.soap500,
88
77
  [icon_1.systemIconStencil.vars.color]: tokens_1.colors.licorice500,
89
78
  },
79
+ 'span[data-count="ck-pill-count"]': {
80
+ backgroundColor: tokens_1.colors.soap600,
81
+ borderColor: 'transparent',
82
+ },
90
83
  },
91
84
  '&:disabled, &.disabled': {
92
- [button_1.buttonColorPropVars.disabled.background]: tokens_1.colors.soap100,
93
- [button_1.buttonColorPropVars.disabled.border]: tokens_1.colors.licorice100,
94
- [button_1.buttonColorPropVars.disabled.label]: tokens_1.colors.licorice100,
95
- [button_1.buttonColorPropVars.disabled.opacity]: '1',
85
+ [button_1.buttonStencil.vars.background]: tokens_1.colors.soap100,
86
+ [button_1.buttonStencil.vars.border]: tokens_1.colors.licorice100,
87
+ [button_1.buttonStencil.vars.label]: tokens_1.colors.licorice100,
88
+ [button_1.buttonStencil.vars.opacity]: '1',
96
89
  [icon_1.systemIconStencil.vars.color]: tokens_1.colors.licorice100,
97
90
  button: {
98
91
  [icon_1.systemIconStencil.vars.color]: tokens_1.colors.licorice100,
99
92
  },
100
93
  },
101
94
  }, ({ variant }) => ({
102
- '&:focus-visible, &:focus': {
95
+ '&:focus-visible, &.focus': {
103
96
  borderColor: variant === 'removable' ? undefined : tokens_1.colors.blueberry400,
104
97
  ...common_1.focusRing({
105
98
  width: 0,
@@ -110,47 +103,54 @@ const StyledBasePill = common_1.styled(button_1.BaseButton.as('button'))({
110
103
  }),
111
104
  },
112
105
  }), layout_1.boxStyleFn);
113
- const StyledNonInteractivePill = common_1.styled(StyledBasePill)({
114
- [button_1.buttonColorPropVars.default.background]: tokens_1.colors.soap300,
115
- [button_1.buttonColorPropVars.default.border]: tokens_1.colors.licorice200,
116
- [button_1.buttonColorPropVars.default.label]: tokens_1.colors.blackPepper400,
106
+ const StyledRemoveablePill = common_1.styled(StyledBasePill)({
107
+ [button_1.buttonStencil.vars.background]: tokens_1.colors.soap300,
108
+ [button_1.buttonStencil.vars.border]: tokens_1.colors.licorice200,
109
+ [button_1.buttonStencil.vars.label]: tokens_1.colors.blackPepper400,
110
+ [icon_1.systemIconStencil.vars.backgroundColor]: tokens_1.colors.soap100,
117
111
  '&:focus-visible, &.focus': {
118
- [button_1.buttonColorPropVars.focus.background]: tokens_1.colors.soap300,
119
- [button_1.buttonColorPropVars.focus.border]: tokens_1.colors.licorice200,
120
- [button_1.buttonColorPropVars.focus.label]: tokens_1.colors.blackPepper400,
112
+ [button_1.buttonStencil.vars.background]: tokens_1.colors.soap300,
113
+ [button_1.buttonStencil.vars.border]: tokens_1.colors.licorice200,
114
+ [button_1.buttonStencil.vars.label]: tokens_1.colors.blackPepper400,
115
+ [icon_1.systemIconStencil.vars.backgroundColor]: tokens_1.colors.soap300,
116
+ boxShadow: 'none',
121
117
  },
122
118
  '&:hover, &.hover': {
123
- [button_1.buttonColorPropVars.hover.background]: tokens_1.colors.soap300,
124
- [button_1.buttonColorPropVars.hover.border]: tokens_1.colors.licorice200,
125
- [button_1.buttonColorPropVars.hover.label]: tokens_1.colors.blackPepper400,
119
+ [button_1.buttonStencil.vars.background]: tokens_1.colors.soap300,
120
+ [button_1.buttonStencil.vars.border]: tokens_1.colors.licorice200,
121
+ [button_1.buttonStencil.vars.label]: tokens_1.colors.blackPepper400,
122
+ [icon_1.systemIconStencil.vars.backgroundColor]: tokens_1.colors.soap300,
126
123
  },
127
124
  '&:active, &.active': {
128
- [button_1.buttonColorPropVars.active.background]: tokens_1.colors.soap500,
129
- [button_1.buttonColorPropVars.active.border]: tokens_1.colors.licorice500,
130
- [button_1.buttonColorPropVars.active.label]: tokens_1.colors.blackPepper400,
125
+ [button_1.buttonStencil.vars.background]: tokens_1.colors.soap500,
126
+ [button_1.buttonStencil.vars.border]: tokens_1.colors.licorice500,
127
+ [button_1.buttonStencil.vars.label]: tokens_1.colors.blackPepper400,
128
+ [icon_1.systemIconStencil.vars.backgroundColor]: tokens_1.colors.soap500,
131
129
  },
132
130
  '&:disabled, &.disabled': {
133
- [button_1.buttonColorPropVars.disabled.background]: tokens_1.colors.soap100,
134
- [button_1.buttonColorPropVars.disabled.label]: tokens_1.colors.licorice100,
135
- [button_1.buttonColorPropVars.disabled.border]: tokens_1.colors.licorice100,
131
+ [button_1.buttonStencil.vars.background]: tokens_1.colors.soap100,
132
+ [button_1.buttonStencil.vars.label]: tokens_1.colors.licorice100,
133
+ [button_1.buttonStencil.vars.border]: tokens_1.colors.licorice100,
134
+ [icon_1.systemIconStencil.vars.backgroundColor]: tokens_1.colors.soap100,
136
135
  },
137
136
  cursor: 'default',
138
137
  overflow: 'revert',
139
138
  position: 'relative',
140
- '&:focus-visibile, &.focus': {
141
- ...common_1.focusRing({
142
- width: 0,
143
- innerColor: 'transparent',
144
- outerColor: 'transparent',
145
- }),
146
- },
147
139
  });
148
- const StyledReadOnlyPill = common_1.styled(StyledNonInteractivePill)({
149
- [button_1.buttonColorPropVars.default.background]: 'transparent',
150
- [button_1.buttonColorPropVars.hover.background]: 'transparent',
151
- [button_1.buttonColorPropVars.focus.background]: 'transparent',
152
- [button_1.buttonColorPropVars.active.background]: 'transparent',
153
- [button_1.buttonColorPropVars.disabled.background]: 'transparent',
140
+ const StyledReadOnlyPill = common_1.styled(StyledRemoveablePill)({
141
+ [button_1.buttonStencil.vars.background]: 'transparent',
142
+ '&:hover, &.hover': {
143
+ [button_1.buttonStencil.vars.background]: 'transparent',
144
+ },
145
+ '&:focus-visible, &.focus': {
146
+ [button_1.buttonStencil.vars.background]: 'transparent',
147
+ },
148
+ '&:active, &.active': {
149
+ [button_1.buttonStencil.vars.background]: 'transparent',
150
+ },
151
+ '&:disabled, &.disabled': {
152
+ [button_1.buttonStencil.vars.background]: 'transparent',
153
+ },
154
154
  border: `${canvas_kit_styling_1.px2rem(1)} solid ${tokens_1.colors.licorice200}`,
155
155
  });
156
156
  /**
@@ -272,7 +272,7 @@ exports.Pill = common_1.createContainer('button')({
272
272
  }
273
273
  return (react_1.default.createElement(layout_1.Flex.Item, { key: index, display: "inline-flex" }, child));
274
274
  })))),
275
- variant === 'removable' && (react_1.default.createElement(StyledNonInteractivePill, Object.assign({ as: Element !== 'button' ? Element : 'span', variant: variant, type: undefined }, canvas_kit_styling_1.handleCsProp(elemProps, [model.state.disabled ? 'disabled' : undefined])),
275
+ variant === 'removable' && (react_1.default.createElement(StyledRemoveablePill, Object.assign({ as: Element !== 'button' ? Element : 'span', variant: variant, type: undefined }, canvas_kit_styling_1.handleCsProp(elemProps, [model.state.disabled ? 'disabled' : undefined])),
276
276
  react_1.default.createElement(layout_1.Flex, { gap: "xxxs", display: "inline-flex", alignItems: "center", justifyContent: "center" }, react_1.default.Children.map(elemProps.children, (child, index) => {
277
277
  if (typeof child === 'string') {
278
278
  return react_1.default.createElement(PillLabel_1.PillLabel, { key: index }, child);
package/dist/commonjs/pill/lib/PillIconButton.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PillIconButton.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillIconButton.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,eAAe,EAAoB,MAAM,gCAAgC,CAAC;AAG9F,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAI9D,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC;IACxE;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAmDD,eAAO,MAAM,cAAc;;;;;;;EA+B1B,CAAC"}
1
+ {"version":3,"file":"PillIconButton.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillIconButton.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAG3E,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAI9D,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC;IACxE;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAgDD,eAAO,MAAM,cAAc;;;;;;;EA+B1B,CAAC"}
package/dist/commonjs/pill/lib/PillIconButton.js CHANGED
@@ -15,6 +15,9 @@ const StyledIconButton = common_1.styled(button_1.BaseButton)({
15
15
  marginInlineEnd: '-7px',
16
16
  marginInlineStart: `-2px`,
17
17
  overflow: 'visible',
18
+ [button_1.buttonStencil.vars.background]: tokens_1.colors.soap300,
19
+ [button_1.buttonStencil.vars.border]: 'transparent',
20
+ [button_1.buttonStencil.vars.label]: tokens_1.colors.blackPepper400,
18
21
  '::after': {
19
22
  content: '""',
20
23
  height: tokens_1.space.l,
@@ -25,34 +28,28 @@ const StyledIconButton = common_1.styled(button_1.BaseButton)({
25
28
  margin: 0,
26
29
  pointerEvents: 'all',
27
30
  },
28
- '&.focus, &:focus-visible': {
31
+ '&:focus-visible, &.focus': {
29
32
  ...common_1.focusRing({
30
33
  innerColor: 'transparent',
31
34
  }),
32
- },
33
- [button_1.buttonColorPropVars.default.background]: tokens_1.colors.soap300,
34
- [button_1.buttonColorPropVars.default.border]: 'transparent',
35
- [button_1.buttonColorPropVars.default.label]: tokens_1.colors.blackPepper400,
36
- '&:focus-visible, &.focus': {
37
- [button_1.buttonColorPropVars.focus.background]: tokens_1.colors.soap300,
38
- [button_1.buttonColorPropVars.focus.border]: 'transparent',
39
- [button_1.buttonColorPropVars.focus.label]: tokens_1.colors.blackPepper400,
35
+ [button_1.buttonStencil.vars.background]: tokens_1.colors.soap300,
36
+ [button_1.buttonStencil.vars.border]: 'transparent',
37
+ [button_1.buttonStencil.vars.label]: tokens_1.colors.blackPepper400,
40
38
  },
41
39
  '&:hover, &.hover': {
42
- [button_1.buttonColorPropVars.hover.background]: tokens_1.colors.soap300,
43
- [button_1.buttonColorPropVars.hover.border]: 'transparent',
44
- [button_1.buttonColorPropVars.hover.label]: tokens_1.colors.blackPepper400,
40
+ [button_1.buttonStencil.vars.background]: tokens_1.colors.soap300,
41
+ [button_1.buttonStencil.vars.border]: 'transparent',
42
+ [button_1.buttonStencil.vars.label]: tokens_1.colors.blackPepper400,
45
43
  },
46
44
  '&:active, &.active': {
47
- [button_1.buttonColorPropVars.active.background]: tokens_1.colors.soap500,
48
- [button_1.buttonColorPropVars.active.border]: 'transparent',
49
- [button_1.buttonColorPropVars.active.label]: tokens_1.colors.blackPepper400,
45
+ [button_1.buttonStencil.vars.background]: tokens_1.colors.soap500,
46
+ [button_1.buttonStencil.vars.border]: 'transparent',
47
+ [button_1.buttonStencil.vars.label]: tokens_1.colors.blackPepper400,
50
48
  },
51
49
  '&:disabled, &.disabled': {
52
- [button_1.buttonColorPropVars.disabled.background]: tokens_1.colors.soap100,
53
- [button_1.buttonColorPropVars.disabled.label]: tokens_1.colors.licorice100,
54
- [button_1.buttonColorPropVars.disabled.border]: 'transparent',
55
- [icon_1.systemIconStencil.vars.color]: tokens_1.colors.licorice100,
50
+ [button_1.buttonStencil.vars.background]: tokens_1.colors.soap100,
51
+ [button_1.buttonStencil.vars.label]: tokens_1.colors.licorice100,
52
+ [button_1.buttonStencil.vars.border]: 'transparent',
56
53
  },
57
54
  });
58
55
  exports.PillIconButton = common_1.createSubcomponent('button')({
package/dist/commonjs/status-indicator/lib/StatusIndicator.js CHANGED
@@ -13,31 +13,31 @@ const icon_1 = require("@workday/canvas-kit-react/icon");
13
13
  const StatusIndicatorIcon_1 = require("./StatusIndicatorIcon");
14
14
  const StatusIndicatorLabel_1 = require("./StatusIndicatorLabel");
15
15
  const statusIndicatorStencil = canvas_kit_styling_1.createStencil({
16
- base: { name: "f088dd", styles: "box-sizing:border-box;display:inline-flex;gap:var(--cnvs-sys-space-x1);max-width:12.5rem;align-items:center;border-radius:var(--cnvs-sys-shape-half);height:1.25rem;padding:var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x1)};" },
16
+ base: { name: "f088dd", styles: "box-sizing:border-box;display:inline-flex;gap:var(--cnvs-sys-space-x1);max-width:12.5rem;align-items:center;border-radius:var(--cnvs-sys-shape-half);height:1.25rem;padding:var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x1);" },
17
17
  modifiers: {
18
18
  gray: {
19
- high: { name: "bbe564", styles: "color:var(--cnvs-sys-color-static-white);--cnvs-system-icon-color:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-gray-default);" },
20
- low: { name: "ff8112", styles: "color:var(--cnvs-sys-color-static-gray-strong);--cnvs-system-icon-color:var(--cnvs-sys-color-static-gray-strong);background:var(--cnvs-sys-color-static-gray-soft);" }
19
+ high: { name: "3d70e3", styles: "color:var(--cnvs-sys-color-static-white);--cnvs-system-icon-color:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-gray-default);" },
20
+ low: { name: "f99899", styles: "color:var(--cnvs-sys-color-static-gray-strong);--cnvs-system-icon-color:var(--cnvs-sys-color-static-gray-strong);background:var(--cnvs-sys-color-static-gray-soft);" }
21
21
  },
22
22
  orange: {
23
- high: { name: "ccfc55", styles: "color:var(--cnvs-sys-color-static-gray-stronger);--cnvs-system-icon-color:var(--cnvs-sys-color-static-gray-stronger);background:var(--cnvs-sys-color-static-orange-default);" },
24
- low: { name: "346026", styles: "color:var(--cnvs-sys-color-static-gold-stronger);--cnvs-system-icon-color:var(--cnvs-sys-color-static-gold-stronger);background:var(--cnvs-sys-color-static-orange-soft);" }
23
+ high: { name: "7ff109", styles: "color:var(--cnvs-sys-color-static-gray-stronger);--cnvs-system-icon-color:var(--cnvs-sys-color-static-gray-stronger);background:var(--cnvs-sys-color-static-orange-default);" },
24
+ low: { name: "62c44d", styles: "color:var(--cnvs-sys-color-static-gold-stronger);--cnvs-system-icon-color:var(--cnvs-sys-color-static-gold-stronger);background:var(--cnvs-sys-color-static-orange-soft);" }
25
25
  },
26
26
  blue: {
27
- high: { name: "9682a7", styles: "color:var(--cnvs-sys-color-static-white);--cnvs-system-icon-color:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-blue-default);" },
28
- low: { name: "77ced2", styles: "color:var(--cnvs-sys-color-static-blue-strong);--cnvs-system-icon-color:var(--cnvs-sys-color-static-blue-strong);background:var(--cnvs-sys-color-static-blue-soft);" }
27
+ high: { name: "5af7bb", styles: "color:var(--cnvs-sys-color-static-white);--cnvs-system-icon-color:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-blue-default);" },
28
+ low: { name: "eda4b3", styles: "color:var(--cnvs-sys-color-static-blue-strong);--cnvs-system-icon-color:var(--cnvs-sys-color-static-blue-strong);background:var(--cnvs-sys-color-static-blue-soft);" }
29
29
  },
30
30
  green: {
31
- high: { name: "41233c", styles: "color:var(--cnvs-sys-color-static-white);--cnvs-system-icon-color:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-green-strong);" },
32
- low: { name: "b6b0e1", styles: "color:var(--cnvs-sys-color-static-green-strong);--cnvs-system-icon-color:var(--cnvs-sys-color-static-green-strong);background:var(--cnvs-sys-color-static-green-soft);" }
31
+ high: { name: "5eed70", styles: "color:var(--cnvs-sys-color-static-white);--cnvs-system-icon-color:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-green-strong);" },
32
+ low: { name: "6698cb", styles: "color:var(--cnvs-sys-color-static-green-strong);--cnvs-system-icon-color:var(--cnvs-sys-color-static-green-strong);background:var(--cnvs-sys-color-static-green-soft);" }
33
33
  },
34
34
  red: {
35
- high: { name: "a1e4f5", styles: "color:var(--cnvs-sys-color-static-white);--cnvs-system-icon-color:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-red-default);" },
36
- low: { name: "640784", styles: "color:var(--cnvs-sys-color-static-red-strong);--cnvs-system-icon-color:var(--cnvs-sys-color-static-red-strong);background:var(--cnvs-sys-color-static-red-soft);" }
35
+ high: { name: "b59424", styles: "color:var(--cnvs-sys-color-static-white);--cnvs-system-icon-color:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-red-default);" },
36
+ low: { name: "bf727b", styles: "color:var(--cnvs-sys-color-static-red-strong);--cnvs-system-icon-color:var(--cnvs-sys-color-static-red-strong);background:var(--cnvs-sys-color-static-red-soft);" }
37
37
  },
38
38
  transparent: {
39
- high: { name: "91853f", styles: "color:var(--cnvs-sys-color-static-white);--cnvs-system-icon-color:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-bg-translucent);" },
40
- low: { name: "cee730", styles: "color:var(--cnvs-sys-color-static-white);--cnvs-system-icon-color:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-bg-translucent);" }
39
+ high: { name: "46c455", styles: "color:var(--cnvs-sys-color-static-white);--cnvs-system-icon-color:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-bg-translucent);" },
40
+ low: { name: "2d9e66", styles: "color:var(--cnvs-sys-color-static-white);--cnvs-system-icon-color:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-bg-translucent);" }
41
41
  }
42
42
  }
43
43
  }, "cnvs-preview-status-indicator");
package/dist/es6/pill/lib/Pill.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../../../pill/lib/Pill.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAC,QAAQ,EAAmB,MAAM,kCAAkC,CAAC;AAa5E,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,WAAW,CAAC;CAChD;AAwJD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;IAIb;;;;;;;;;;OAUG;;;;;;;;;IAEH;;;;;;;;;OASG;;IAEH;;;;;;;;;;;OAWG;;;;;;;;;IAEH;;;;;;;;;;;OAWG;;;;;;;;;IAEH;;;;;;;;;OASG;;;;;;;;;CAmDL,CAAC"}
1
+ {"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../../../pill/lib/Pill.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAC,QAAQ,EAAmB,MAAM,kCAAkC,CAAC;AAa5E,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,WAAW,CAAC;CAChD;AAsJD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;IAIb;;;;;;;;;;OAUG;;;;;;;;;IAEH;;;;;;;;;OASG;;IAEH;;;;;;;;;;;OAWG;;;;;;;;;IAEH;;;;;;;;;;;OAWG;;;;;;;;;IAEH;;;;;;;;;OASG;;;;;;;;;CAmDL,CAAC"}
package/dist/es6/pill/lib/Pill.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
- import { BaseButton, buttonColorPropVars } from '@workday/canvas-kit-react/button';
3
- import { createContainer, focusRing, mouseFocusBehavior, styled, } from '@workday/canvas-kit-react/common';
2
+ import { BaseButton, buttonStencil } from '@workday/canvas-kit-react/button';
3
+ import { createContainer, focusRing, styled } from '@workday/canvas-kit-react/common';
4
4
  import { boxStyleFn, Flex } from '@workday/canvas-kit-react/layout';
5
5
  import { borderRadius, colors, space, type } from '@workday/canvas-kit-react/tokens';
6
6
  import { handleCsProp, px2rem } from '@workday/canvas-kit-styling';
@@ -11,7 +11,7 @@ import { PillCount } from './PillCount';
11
11
  import { PillAvatar } from './PillAvatar';
12
12
  import { PillLabel } from './PillLabel';
13
13
  import { systemIconStencil } from '@workday/canvas-kit-react/icon';
14
- const pillBaseStyles = {
14
+ const StyledBasePill = styled(BaseButton)({
15
15
  display: 'inline-flex',
16
16
  alignItems: 'center',
17
17
  borderRadius: borderRadius.m,
@@ -27,73 +27,66 @@ const pillBaseStyles = {
27
27
  padding: `2px ${space.xxs}`,
28
28
  height: space.m,
29
29
  position: 'relative',
30
- };
31
- const StyledBasePill = styled(BaseButton.as('button'))({
32
- ...pillBaseStyles,
33
- '&:active, &:active:hover, &:active:focus': {
34
- 'span[data-count="ck-pill-count"]': {
35
- backgroundColor: colors.soap600,
36
- border: 'none',
37
- },
30
+ 'span[data-count="ck-pill-count"]': {
31
+ borderTop: `${px2rem(1)} solid transparent`,
32
+ borderBottom: `${px2rem(1)} solid transparent`,
33
+ borderRight: `${px2rem(1)} solid transparent`,
38
34
  },
39
- ...mouseFocusBehavior({
40
- '&:focus': {
41
- 'span[data-count="ck-pill-count"]': {
42
- border: 'none',
43
- },
44
- },
45
- }),
46
- [buttonColorPropVars.default.background]: colors.soap300,
47
- [buttonColorPropVars.default.border]: colors.licorice200,
48
- [buttonColorPropVars.default.label]: colors.blackPepper400,
35
+ [buttonStencil.vars.background]: colors.soap300,
36
+ [buttonStencil.vars.border]: colors.licorice200,
37
+ [buttonStencil.vars.label]: colors.blackPepper400,
49
38
  [systemIconStencil.vars.color]: colors.licorice200,
39
+ // This style ensures the removable button icon changes when you hover over the pill and not just the removable PillButton
50
40
  button: {
51
41
  [systemIconStencil.vars.color]: colors.licorice200,
52
42
  },
53
43
  '&:focus-visible, &.focus': {
54
- [buttonColorPropVars.focus.background]: colors.soap300,
55
- [buttonColorPropVars.focus.border]: colors.blueberry400,
56
- [buttonColorPropVars.focus.label]: colors.blackPepper400,
44
+ [buttonStencil.vars.background]: colors.soap300,
45
+ [buttonStencil.vars.border]: colors.blueberry400,
46
+ [buttonStencil.vars.label]: colors.blackPepper400,
57
47
  [systemIconStencil.vars.color]: colors.licorice500,
58
48
  button: {
59
49
  [systemIconStencil.vars.color]: colors.licorice500,
60
50
  },
61
51
  'span[data-count="ck-pill-count"]': {
62
- borderTop: `${px2rem(1)} solid ${colors.blueberry400}`,
63
- borderBottom: `${px2rem(1)} solid ${colors.blueberry400}`,
64
- borderRight: `${px2rem(1)} solid ${colors.blueberry400}`,
52
+ borderColor: colors.blueberry400,
65
53
  },
66
54
  },
67
55
  '&:hover, &.hover': {
68
- [buttonColorPropVars.hover.background]: colors.soap400,
69
- [buttonColorPropVars.hover.border]: colors.licorice400,
70
- [buttonColorPropVars.hover.label]: colors.blackPepper400,
56
+ [buttonStencil.vars.background]: colors.soap400,
57
+ [buttonStencil.vars.border]: colors.licorice400,
58
+ [buttonStencil.vars.label]: colors.blackPepper400,
71
59
  [systemIconStencil.vars.color]: colors.licorice500,
72
60
  button: {
73
61
  [systemIconStencil.vars.color]: colors.licorice500,
74
62
  },
75
63
  },
76
64
  '&:active, &.active': {
77
- [buttonColorPropVars.active.background]: colors.soap500,
78
- [buttonColorPropVars.active.border]: colors.licorice500,
79
- [buttonColorPropVars.active.label]: colors.blackPepper400,
65
+ [buttonStencil.vars.background]: colors.soap500,
66
+ [buttonStencil.vars.border]: colors.licorice500,
67
+ [buttonStencil.vars.label]: colors.blackPepper400,
80
68
  [systemIconStencil.vars.color]: colors.licorice500,
81
69
  button: {
70
+ [buttonStencil.vars.background]: colors.soap500,
82
71
  [systemIconStencil.vars.color]: colors.licorice500,
83
72
  },
73
+ 'span[data-count="ck-pill-count"]': {
74
+ backgroundColor: colors.soap600,
75
+ borderColor: 'transparent',
76
+ },
84
77
  },
85
78
  '&:disabled, &.disabled': {
86
- [buttonColorPropVars.disabled.background]: colors.soap100,
87
- [buttonColorPropVars.disabled.border]: colors.licorice100,
88
- [buttonColorPropVars.disabled.label]: colors.licorice100,
89
- [buttonColorPropVars.disabled.opacity]: '1',
79
+ [buttonStencil.vars.background]: colors.soap100,
80
+ [buttonStencil.vars.border]: colors.licorice100,
81
+ [buttonStencil.vars.label]: colors.licorice100,
82
+ [buttonStencil.vars.opacity]: '1',
90
83
  [systemIconStencil.vars.color]: colors.licorice100,
91
84
  button: {
92
85
  [systemIconStencil.vars.color]: colors.licorice100,
93
86
  },
94
87
  },
95
88
  }, ({ variant }) => ({
96
- '&:focus-visible, &:focus': {
89
+ '&:focus-visible, &.focus': {
97
90
  borderColor: variant === 'removable' ? undefined : colors.blueberry400,
98
91
  ...focusRing({
99
92
  width: 0,
@@ -104,47 +97,54 @@ const StyledBasePill = styled(BaseButton.as('button'))({
104
97
  }),
105
98
  },
106
99
  }), boxStyleFn);
107
- const StyledNonInteractivePill = styled(StyledBasePill)({
108
- [buttonColorPropVars.default.background]: colors.soap300,
109
- [buttonColorPropVars.default.border]: colors.licorice200,
110
- [buttonColorPropVars.default.label]: colors.blackPepper400,
100
+ const StyledRemoveablePill = styled(StyledBasePill)({
101
+ [buttonStencil.vars.background]: colors.soap300,
102
+ [buttonStencil.vars.border]: colors.licorice200,
103
+ [buttonStencil.vars.label]: colors.blackPepper400,
104
+ [systemIconStencil.vars.backgroundColor]: colors.soap100,
111
105
  '&:focus-visible, &.focus': {
112
- [buttonColorPropVars.focus.background]: colors.soap300,
113
- [buttonColorPropVars.focus.border]: colors.licorice200,
114
- [buttonColorPropVars.focus.label]: colors.blackPepper400,
106
+ [buttonStencil.vars.background]: colors.soap300,
107
+ [buttonStencil.vars.border]: colors.licorice200,
108
+ [buttonStencil.vars.label]: colors.blackPepper400,
109
+ [systemIconStencil.vars.backgroundColor]: colors.soap300,
110
+ boxShadow: 'none',
115
111
  },
116
112
  '&:hover, &.hover': {
117
- [buttonColorPropVars.hover.background]: colors.soap300,
118
- [buttonColorPropVars.hover.border]: colors.licorice200,
119
- [buttonColorPropVars.hover.label]: colors.blackPepper400,
113
+ [buttonStencil.vars.background]: colors.soap300,
114
+ [buttonStencil.vars.border]: colors.licorice200,
115
+ [buttonStencil.vars.label]: colors.blackPepper400,
116
+ [systemIconStencil.vars.backgroundColor]: colors.soap300,
120
117
  },
121
118
  '&:active, &.active': {
122
- [buttonColorPropVars.active.background]: colors.soap500,
123
- [buttonColorPropVars.active.border]: colors.licorice500,
124
- [buttonColorPropVars.active.label]: colors.blackPepper400,
119
+ [buttonStencil.vars.background]: colors.soap500,
120
+ [buttonStencil.vars.border]: colors.licorice500,
121
+ [buttonStencil.vars.label]: colors.blackPepper400,
122
+ [systemIconStencil.vars.backgroundColor]: colors.soap500,
125
123
  },
126
124
  '&:disabled, &.disabled': {
127
- [buttonColorPropVars.disabled.background]: colors.soap100,
128
- [buttonColorPropVars.disabled.label]: colors.licorice100,
129
- [buttonColorPropVars.disabled.border]: colors.licorice100,
125
+ [buttonStencil.vars.background]: colors.soap100,
126
+ [buttonStencil.vars.label]: colors.licorice100,
127
+ [buttonStencil.vars.border]: colors.licorice100,
128
+ [systemIconStencil.vars.backgroundColor]: colors.soap100,
130
129
  },
131
130
  cursor: 'default',
132
131
  overflow: 'revert',
133
132
  position: 'relative',
134
- '&:focus-visibile, &.focus': {
135
- ...focusRing({
136
- width: 0,
137
- innerColor: 'transparent',
138
- outerColor: 'transparent',
139
- }),
140
- },
141
133
  });
142
- const StyledReadOnlyPill = styled(StyledNonInteractivePill)({
143
- [buttonColorPropVars.default.background]: 'transparent',
144
- [buttonColorPropVars.hover.background]: 'transparent',
145
- [buttonColorPropVars.focus.background]: 'transparent',
146
- [buttonColorPropVars.active.background]: 'transparent',
147
- [buttonColorPropVars.disabled.background]: 'transparent',
134
+ const StyledReadOnlyPill = styled(StyledRemoveablePill)({
135
+ [buttonStencil.vars.background]: 'transparent',
136
+ '&:hover, &.hover': {
137
+ [buttonStencil.vars.background]: 'transparent',
138
+ },
139
+ '&:focus-visible, &.focus': {
140
+ [buttonStencil.vars.background]: 'transparent',
141
+ },
142
+ '&:active, &.active': {
143
+ [buttonStencil.vars.background]: 'transparent',
144
+ },
145
+ '&:disabled, &.disabled': {
146
+ [buttonStencil.vars.background]: 'transparent',
147
+ },
148
148
  border: `${px2rem(1)} solid ${colors.licorice200}`,
149
149
  });
150
150
  /**
@@ -266,7 +266,7 @@ export const Pill = createContainer('button')({
266
266
  }
267
267
  return (React.createElement(Flex.Item, { key: index, display: "inline-flex" }, child));
268
268
  })))),
269
- variant === 'removable' && (React.createElement(StyledNonInteractivePill, Object.assign({ as: Element !== 'button' ? Element : 'span', variant: variant, type: undefined }, handleCsProp(elemProps, [model.state.disabled ? 'disabled' : undefined])),
269
+ variant === 'removable' && (React.createElement(StyledRemoveablePill, Object.assign({ as: Element !== 'button' ? Element : 'span', variant: variant, type: undefined }, handleCsProp(elemProps, [model.state.disabled ? 'disabled' : undefined])),
270
270
  React.createElement(Flex, { gap: "xxxs", display: "inline-flex", alignItems: "center", justifyContent: "center" }, React.Children.map(elemProps.children, (child, index) => {
271
271
  if (typeof child === 'string') {
272
272
  return React.createElement(PillLabel, { key: index }, child);
package/dist/es6/pill/lib/PillIconButton.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PillIconButton.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillIconButton.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,eAAe,EAAoB,MAAM,gCAAgC,CAAC;AAG9F,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAI9D,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC;IACxE;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAmDD,eAAO,MAAM,cAAc;;;;;;;EA+B1B,CAAC"}
1
+ {"version":3,"file":"PillIconButton.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillIconButton.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAG3E,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAI9D,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC;IACxE;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAgDD,eAAO,MAAM,cAAc;;;;;;;EA+B1B,CAAC"}
package/dist/es6/pill/lib/PillIconButton.js CHANGED
@@ -1,14 +1,17 @@
1
1
  import React from 'react';
2
2
  import { focusRing, styled, createSubcomponent } from '@workday/canvas-kit-react/common';
3
- import { SystemIcon, systemIconStencil } from '@workday/canvas-kit-react/icon';
3
+ import { SystemIcon } from '@workday/canvas-kit-react/icon';
4
4
  import { usePillModel } from './usePillModel';
5
5
  import { xSmallIcon } from '@workday/canvas-system-icons-web';
6
6
  import { colors, space } from '@workday/canvas-kit-react/tokens';
7
- import { BaseButton, buttonColorPropVars } from '@workday/canvas-kit-react/button';
7
+ import { BaseButton, buttonStencil } from '@workday/canvas-kit-react/button';
8
8
  const StyledIconButton = styled(BaseButton)({
9
9
  marginInlineEnd: '-7px',
10
10
  marginInlineStart: `-2px`,
11
11
  overflow: 'visible',
12
+ [buttonStencil.vars.background]: colors.soap300,
13
+ [buttonStencil.vars.border]: 'transparent',
14
+ [buttonStencil.vars.label]: colors.blackPepper400,
12
15
  '::after': {
13
16
  content: '""',
14
17
  height: space.l,
@@ -19,34 +22,28 @@ const StyledIconButton = styled(BaseButton)({
19
22
  margin: 0,
20
23
  pointerEvents: 'all',
21
24
  },
22
- '&.focus, &:focus-visible': {
25
+ '&:focus-visible, &.focus': {
23
26
  ...focusRing({
24
27
  innerColor: 'transparent',
25
28
  }),
26
- },
27
- [buttonColorPropVars.default.background]: colors.soap300,
28
- [buttonColorPropVars.default.border]: 'transparent',
29
- [buttonColorPropVars.default.label]: colors.blackPepper400,
30
- '&:focus-visible, &.focus': {
31
- [buttonColorPropVars.focus.background]: colors.soap300,
32
- [buttonColorPropVars.focus.border]: 'transparent',
33
- [buttonColorPropVars.focus.label]: colors.blackPepper400,
29
+ [buttonStencil.vars.background]: colors.soap300,
30
+ [buttonStencil.vars.border]: 'transparent',
31
+ [buttonStencil.vars.label]: colors.blackPepper400,
34
32
  },
35
33
  '&:hover, &.hover': {
36
- [buttonColorPropVars.hover.background]: colors.soap300,
37
- [buttonColorPropVars.hover.border]: 'transparent',
38
- [buttonColorPropVars.hover.label]: colors.blackPepper400,
34
+ [buttonStencil.vars.background]: colors.soap300,
35
+ [buttonStencil.vars.border]: 'transparent',
36
+ [buttonStencil.vars.label]: colors.blackPepper400,
39
37
  },
40
38
  '&:active, &.active': {
41
- [buttonColorPropVars.active.background]: colors.soap500,
42
- [buttonColorPropVars.active.border]: 'transparent',
43
- [buttonColorPropVars.active.label]: colors.blackPepper400,
39
+ [buttonStencil.vars.background]: colors.soap500,
40
+ [buttonStencil.vars.border]: 'transparent',
41
+ [buttonStencil.vars.label]: colors.blackPepper400,
44
42
  },
45
43
  '&:disabled, &.disabled': {
46
- [buttonColorPropVars.disabled.background]: colors.soap100,
47
- [buttonColorPropVars.disabled.label]: colors.licorice100,
48
- [buttonColorPropVars.disabled.border]: 'transparent',
49
- [systemIconStencil.vars.color]: colors.licorice100,
44
+ [buttonStencil.vars.background]: colors.soap100,
45
+ [buttonStencil.vars.label]: colors.licorice100,
46
+ [buttonStencil.vars.border]: 'transparent',
50
47
  },
51
48
  });
52
49
  export const PillIconButton = createSubcomponent('button')({
package/dist/es6/status-indicator/lib/StatusIndicator.js CHANGED
@@ -7,31 +7,31 @@ import { systemIconStencil } from '@workday/canvas-kit-react/icon';
7
7
  import { StatusIndicatorIcon } from './StatusIndicatorIcon';
8
8
  import { StatusIndicatorLabel } from './StatusIndicatorLabel';
9
9
  const statusIndicatorStencil = createStencil({
10
- base: { name: "f088dd", styles: "box-sizing:border-box;display:inline-flex;gap:var(--cnvs-sys-space-x1);max-width:12.5rem;align-items:center;border-radius:var(--cnvs-sys-shape-half);height:1.25rem;padding:var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x1)};" },
10
+ base: { name: "f088dd", styles: "box-sizing:border-box;display:inline-flex;gap:var(--cnvs-sys-space-x1);max-width:12.5rem;align-items:center;border-radius:var(--cnvs-sys-shape-half);height:1.25rem;padding:var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x1);" },
11
11
  modifiers: {
12
12
  gray: {
13
- high: { name: "bbe564", styles: "color:var(--cnvs-sys-color-static-white);--cnvs-system-icon-color:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-gray-default);" },
14
- low: { name: "ff8112", styles: "color:var(--cnvs-sys-color-static-gray-strong);--cnvs-system-icon-color:var(--cnvs-sys-color-static-gray-strong);background:var(--cnvs-sys-color-static-gray-soft);" }
13
+ high: { name: "3d70e3", styles: "color:var(--cnvs-sys-color-static-white);--cnvs-system-icon-color:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-gray-default);" },
14
+ low: { name: "f99899", styles: "color:var(--cnvs-sys-color-static-gray-strong);--cnvs-system-icon-color:var(--cnvs-sys-color-static-gray-strong);background:var(--cnvs-sys-color-static-gray-soft);" }
15
15
  },
16
16
  orange: {
17
- high: { name: "ccfc55", styles: "color:var(--cnvs-sys-color-static-gray-stronger);--cnvs-system-icon-color:var(--cnvs-sys-color-static-gray-stronger);background:var(--cnvs-sys-color-static-orange-default);" },
18
- low: { name: "346026", styles: "color:var(--cnvs-sys-color-static-gold-stronger);--cnvs-system-icon-color:var(--cnvs-sys-color-static-gold-stronger);background:var(--cnvs-sys-color-static-orange-soft);" }
17
+ high: { name: "7ff109", styles: "color:var(--cnvs-sys-color-static-gray-stronger);--cnvs-system-icon-color:var(--cnvs-sys-color-static-gray-stronger);background:var(--cnvs-sys-color-static-orange-default);" },
18
+ low: { name: "62c44d", styles: "color:var(--cnvs-sys-color-static-gold-stronger);--cnvs-system-icon-color:var(--cnvs-sys-color-static-gold-stronger);background:var(--cnvs-sys-color-static-orange-soft);" }
19
19
  },
20
20
  blue: {
21
- high: { name: "9682a7", styles: "color:var(--cnvs-sys-color-static-white);--cnvs-system-icon-color:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-blue-default);" },
22
- low: { name: "77ced2", styles: "color:var(--cnvs-sys-color-static-blue-strong);--cnvs-system-icon-color:var(--cnvs-sys-color-static-blue-strong);background:var(--cnvs-sys-color-static-blue-soft);" }
21
+ high: { name: "5af7bb", styles: "color:var(--cnvs-sys-color-static-white);--cnvs-system-icon-color:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-blue-default);" },
22
+ low: { name: "eda4b3", styles: "color:var(--cnvs-sys-color-static-blue-strong);--cnvs-system-icon-color:var(--cnvs-sys-color-static-blue-strong);background:var(--cnvs-sys-color-static-blue-soft);" }
23
23
  },
24
24
  green: {
25
- high: { name: "41233c", styles: "color:var(--cnvs-sys-color-static-white);--cnvs-system-icon-color:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-green-strong);" },
26
- low: { name: "b6b0e1", styles: "color:var(--cnvs-sys-color-static-green-strong);--cnvs-system-icon-color:var(--cnvs-sys-color-static-green-strong);background:var(--cnvs-sys-color-static-green-soft);" }
25
+ high: { name: "5eed70", styles: "color:var(--cnvs-sys-color-static-white);--cnvs-system-icon-color:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-green-strong);" },
26
+ low: { name: "6698cb", styles: "color:var(--cnvs-sys-color-static-green-strong);--cnvs-system-icon-color:var(--cnvs-sys-color-static-green-strong);background:var(--cnvs-sys-color-static-green-soft);" }
27
27
  },
28
28
  red: {
29
- high: { name: "a1e4f5", styles: "color:var(--cnvs-sys-color-static-white);--cnvs-system-icon-color:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-red-default);" },
30
- low: { name: "640784", styles: "color:var(--cnvs-sys-color-static-red-strong);--cnvs-system-icon-color:var(--cnvs-sys-color-static-red-strong);background:var(--cnvs-sys-color-static-red-soft);" }
29
+ high: { name: "b59424", styles: "color:var(--cnvs-sys-color-static-white);--cnvs-system-icon-color:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-red-default);" },
30
+ low: { name: "bf727b", styles: "color:var(--cnvs-sys-color-static-red-strong);--cnvs-system-icon-color:var(--cnvs-sys-color-static-red-strong);background:var(--cnvs-sys-color-static-red-soft);" }
31
31
  },
32
32
  transparent: {
33
- high: { name: "91853f", styles: "color:var(--cnvs-sys-color-static-white);--cnvs-system-icon-color:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-bg-translucent);" },
34
- low: { name: "cee730", styles: "color:var(--cnvs-sys-color-static-white);--cnvs-system-icon-color:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-bg-translucent);" }
33
+ high: { name: "46c455", styles: "color:var(--cnvs-sys-color-static-white);--cnvs-system-icon-color:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-bg-translucent);" },
34
+ low: { name: "2d9e66", styles: "color:var(--cnvs-sys-color-static-white);--cnvs-system-icon-color:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-bg-translucent);" }
35
35
  }
36
36
  }
37
37
  }, "cnvs-preview-status-indicator");
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-preview-react",
3
- "version": "11.0.0-alpha.787-next.0",
3
+ "version": "11.0.0-alpha.790-next.0",
4
4
  "description": "Canvas Kit Preview is made up of components that have the full design and a11y review, are part of the DS ecosystem and are approved for use in product. The API's could be subject to change, but not without strong communication and migration strategies.",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "Apache-2.0",
@@ -46,8 +46,8 @@
46
46
  "dependencies": {
47
47
  "@emotion/react": "^11.7.1",
48
48
  "@emotion/styled": "^11.6.0",
49
- "@workday/canvas-kit-react": "^11.0.0-alpha.787-next.0",
50
- "@workday/canvas-kit-styling": "^11.0.0-alpha.787-next.0",
49
+ "@workday/canvas-kit-react": "^11.0.0-alpha.790-next.0",
50
+ "@workday/canvas-kit-styling": "^11.0.0-alpha.790-next.0",
51
51
  "@workday/canvas-system-icons-web": "^3.0.0",
52
52
  "@workday/canvas-tokens-web": "^1.3.1",
53
53
  "@workday/design-assets-types": "^0.2.8"
@@ -58,5 +58,5 @@
58
58
  "react-hook-form": "7.36.1",
59
59
  "yup": "^0.32.11"
60
60
  },
61
- "gitHead": "a5866a938139a19b6cac09d6d78df0902600cb4a"
61
+ "gitHead": "b8255498bfbad751b0b6e2a0172dd2c26b277feb"
62
62
  }
package/pill/lib/Pill.tsx CHANGED
@@ -1,14 +1,7 @@
1
1
  import React from 'react';
2
- import {CSSObject} from '@emotion/react';
3
2
 
4
- import {BaseButton, buttonColorPropVars} from '@workday/canvas-kit-react/button';
5
- import {
6
- createContainer,
7
- focusRing,
8
- mouseFocusBehavior,
9
- styled,
10
- StyledType,
11
- } from '@workday/canvas-kit-react/common';
3
+ import {BaseButton, buttonStencil} from '@workday/canvas-kit-react/button';
4
+ import {createContainer, focusRing, styled, StyledType} from '@workday/canvas-kit-react/common';
12
5
  import {BoxProps, boxStyleFn, Flex} from '@workday/canvas-kit-react/layout';
13
6
  import {borderRadius, colors, space, type} from '@workday/canvas-kit-react/tokens';
14
7
  import {handleCsProp, CSProps, px2rem} from '@workday/canvas-kit-styling';
@@ -30,85 +23,76 @@ export interface PillProps extends BoxProps {
30
23
  variant?: 'default' | 'readOnly' | 'removable';
31
24
  }
32
25
 
33
- const pillBaseStyles: CSSObject = {
34
- display: 'inline-flex',
35
- alignItems: 'center',
36
- borderRadius: borderRadius.m,
37
- flexShrink: 0,
38
- ...type.levels.subtext.large,
39
- color: colors.blackPepper400,
40
- boxShadow: 'none',
41
- outline: 'none',
42
- fontWeight: type.properties.fontWeights.medium,
43
- WebkitFontSmoothing: 'antialiased',
44
- MozOsxFontSmoothing: 'grayscale',
45
- width: 'fit-content',
46
- padding: `2px ${space.xxs}`,
47
- height: space.m,
48
- position: 'relative',
49
- };
50
-
51
- const StyledBasePill = styled(BaseButton.as('button'))<StyledType & PillProps>(
26
+ const StyledBasePill = styled(BaseButton)<StyledType & PillProps>(
52
27
  {
53
- ...pillBaseStyles,
54
- '&:active, &:active:hover, &:active:focus': {
55
- 'span[data-count="ck-pill-count"]': {
56
- backgroundColor: colors.soap600,
57
- border: 'none',
58
- },
28
+ display: 'inline-flex',
29
+ alignItems: 'center',
30
+ borderRadius: borderRadius.m,
31
+ flexShrink: 0,
32
+ ...type.levels.subtext.large,
33
+ color: colors.blackPepper400,
34
+ boxShadow: 'none',
35
+ outline: 'none',
36
+ fontWeight: type.properties.fontWeights.medium,
37
+ WebkitFontSmoothing: 'antialiased',
38
+ MozOsxFontSmoothing: 'grayscale',
39
+ width: 'fit-content',
40
+ padding: `2px ${space.xxs}`,
41
+ height: space.m,
42
+ position: 'relative',
43
+ 'span[data-count="ck-pill-count"]': {
44
+ borderTop: `${px2rem(1)} solid transparent`,
45
+ borderBottom: `${px2rem(1)} solid transparent`,
46
+ borderRight: `${px2rem(1)} solid transparent`,
59
47
  },
60
-
61
- ...mouseFocusBehavior({
62
- '&:focus': {
63
- 'span[data-count="ck-pill-count"]': {
64
- border: 'none',
65
- },
66
- },
67
- }),
68
- [buttonColorPropVars.default.background]: colors.soap300,
69
- [buttonColorPropVars.default.border]: colors.licorice200,
70
- [buttonColorPropVars.default.label]: colors.blackPepper400,
48
+ [buttonStencil.vars.background]: colors.soap300,
49
+ [buttonStencil.vars.border]: colors.licorice200,
50
+ [buttonStencil.vars.label]: colors.blackPepper400,
71
51
  [systemIconStencil.vars.color]: colors.licorice200,
52
+ // This style ensures the removable button icon changes when you hover over the pill and not just the removable PillButton
72
53
  button: {
73
54
  [systemIconStencil.vars.color]: colors.licorice200,
74
55
  },
75
56
  '&:focus-visible, &.focus': {
76
- [buttonColorPropVars.focus.background]: colors.soap300,
77
- [buttonColorPropVars.focus.border]: colors.blueberry400,
78
- [buttonColorPropVars.focus.label]: colors.blackPepper400,
57
+ [buttonStencil.vars.background]: colors.soap300,
58
+ [buttonStencil.vars.border]: colors.blueberry400,
59
+ [buttonStencil.vars.label]: colors.blackPepper400,
79
60
  [systemIconStencil.vars.color]: colors.licorice500,
80
61
  button: {
81
62
  [systemIconStencil.vars.color]: colors.licorice500,
82
63
  },
83
64
  'span[data-count="ck-pill-count"]': {
84
- borderTop: `${px2rem(1)} solid ${colors.blueberry400}`,
85
- borderBottom: `${px2rem(1)} solid ${colors.blueberry400}`,
86
- borderRight: `${px2rem(1)} solid ${colors.blueberry400}`,
65
+ borderColor: colors.blueberry400,
87
66
  },
88
67
  },
89
68
  '&:hover, &.hover': {
90
- [buttonColorPropVars.hover.background]: colors.soap400,
91
- [buttonColorPropVars.hover.border]: colors.licorice400,
92
- [buttonColorPropVars.hover.label]: colors.blackPepper400,
69
+ [buttonStencil.vars.background]: colors.soap400,
70
+ [buttonStencil.vars.border]: colors.licorice400,
71
+ [buttonStencil.vars.label]: colors.blackPepper400,
93
72
  [systemIconStencil.vars.color]: colors.licorice500,
94
73
  button: {
95
74
  [systemIconStencil.vars.color]: colors.licorice500,
96
75
  },
97
76
  },
98
77
  '&:active, &.active': {
99
- [buttonColorPropVars.active.background]: colors.soap500,
100
- [buttonColorPropVars.active.border]: colors.licorice500,
101
- [buttonColorPropVars.active.label]: colors.blackPepper400,
78
+ [buttonStencil.vars.background]: colors.soap500,
79
+ [buttonStencil.vars.border]: colors.licorice500,
80
+ [buttonStencil.vars.label]: colors.blackPepper400,
102
81
  [systemIconStencil.vars.color]: colors.licorice500,
103
82
  button: {
83
+ [buttonStencil.vars.background]: colors.soap500,
104
84
  [systemIconStencil.vars.color]: colors.licorice500,
105
85
  },
86
+ 'span[data-count="ck-pill-count"]': {
87
+ backgroundColor: colors.soap600,
88
+ borderColor: 'transparent',
89
+ },
106
90
  },
107
91
  '&:disabled, &.disabled': {
108
- [buttonColorPropVars.disabled.background]: colors.soap100,
109
- [buttonColorPropVars.disabled.border]: colors.licorice100,
110
- [buttonColorPropVars.disabled.label]: colors.licorice100,
111
- [buttonColorPropVars.disabled.opacity]: '1',
92
+ [buttonStencil.vars.background]: colors.soap100,
93
+ [buttonStencil.vars.border]: colors.licorice100,
94
+ [buttonStencil.vars.label]: colors.licorice100,
95
+ [buttonStencil.vars.opacity]: '1',
112
96
  [systemIconStencil.vars.color]: colors.licorice100,
113
97
  button: {
114
98
  [systemIconStencil.vars.color]: colors.licorice100,
@@ -117,7 +101,7 @@ const StyledBasePill = styled(BaseButton.as('button'))<StyledType & PillProps>(
117
101
  },
118
102
 
119
103
  ({variant}) => ({
120
- '&:focus-visible, &:focus': {
104
+ '&:focus-visible, &.focus': {
121
105
  borderColor: variant === 'removable' ? undefined : colors.blueberry400,
122
106
  ...focusRing({
123
107
  width: 0,
@@ -131,52 +115,59 @@ const StyledBasePill = styled(BaseButton.as('button'))<StyledType & PillProps>(
131
115
  boxStyleFn
132
116
  );
133
117
 
134
- const StyledNonInteractivePill = styled(StyledBasePill)<StyledType & CSProps>({
135
- [buttonColorPropVars.default.background]: colors.soap300,
136
- [buttonColorPropVars.default.border]: colors.licorice200,
137
- [buttonColorPropVars.default.label]: colors.blackPepper400,
118
+ const StyledRemoveablePill = styled(StyledBasePill)<StyledType & CSProps>({
119
+ [buttonStencil.vars.background]: colors.soap300,
120
+ [buttonStencil.vars.border]: colors.licorice200,
121
+ [buttonStencil.vars.label]: colors.blackPepper400,
122
+ [systemIconStencil.vars.backgroundColor]: colors.soap100,
138
123
 
139
124
  '&:focus-visible, &.focus': {
140
- [buttonColorPropVars.focus.background]: colors.soap300,
141
- [buttonColorPropVars.focus.border]: colors.licorice200,
142
- [buttonColorPropVars.focus.label]: colors.blackPepper400,
125
+ [buttonStencil.vars.background]: colors.soap300,
126
+ [buttonStencil.vars.border]: colors.licorice200,
127
+ [buttonStencil.vars.label]: colors.blackPepper400,
128
+ [systemIconStencil.vars.backgroundColor]: colors.soap300,
129
+ boxShadow: 'none',
143
130
  },
144
131
 
145
132
  '&:hover, &.hover': {
146
- [buttonColorPropVars.hover.background]: colors.soap300,
147
- [buttonColorPropVars.hover.border]: colors.licorice200,
148
- [buttonColorPropVars.hover.label]: colors.blackPepper400,
133
+ [buttonStencil.vars.background]: colors.soap300,
134
+ [buttonStencil.vars.border]: colors.licorice200,
135
+ [buttonStencil.vars.label]: colors.blackPepper400,
136
+ [systemIconStencil.vars.backgroundColor]: colors.soap300,
149
137
  },
150
138
 
151
139
  '&:active, &.active': {
152
- [buttonColorPropVars.active.background]: colors.soap500,
153
- [buttonColorPropVars.active.border]: colors.licorice500,
154
- [buttonColorPropVars.active.label]: colors.blackPepper400,
140
+ [buttonStencil.vars.background]: colors.soap500,
141
+ [buttonStencil.vars.border]: colors.licorice500,
142
+ [buttonStencil.vars.label]: colors.blackPepper400,
143
+ [systemIconStencil.vars.backgroundColor]: colors.soap500,
155
144
  },
156
145
 
157
146
  '&:disabled, &.disabled': {
158
- [buttonColorPropVars.disabled.background]: colors.soap100,
159
- [buttonColorPropVars.disabled.label]: colors.licorice100,
160
- [buttonColorPropVars.disabled.border]: colors.licorice100,
147
+ [buttonStencil.vars.background]: colors.soap100,
148
+ [buttonStencil.vars.label]: colors.licorice100,
149
+ [buttonStencil.vars.border]: colors.licorice100,
150
+ [systemIconStencil.vars.backgroundColor]: colors.soap100,
161
151
  },
162
152
  cursor: 'default',
163
153
  overflow: 'revert', // override BaseButton overflow styles so the click target exists outside the pill for removable
164
154
  position: 'relative',
165
- '&:focus-visibile, &.focus': {
166
- ...focusRing({
167
- width: 0,
168
- innerColor: 'transparent',
169
- outerColor: 'transparent',
170
- }),
171
- },
172
155
  });
173
156
 
174
- const StyledReadOnlyPill = styled(StyledNonInteractivePill)<StyledType>({
175
- [buttonColorPropVars.default.background]: 'transparent',
176
- [buttonColorPropVars.hover.background]: 'transparent',
177
- [buttonColorPropVars.focus.background]: 'transparent',
178
- [buttonColorPropVars.active.background]: 'transparent',
179
- [buttonColorPropVars.disabled.background]: 'transparent',
157
+ const StyledReadOnlyPill = styled(StyledRemoveablePill)<StyledType>({
158
+ [buttonStencil.vars.background]: 'transparent',
159
+ '&:hover, &.hover': {
160
+ [buttonStencil.vars.background]: 'transparent',
161
+ },
162
+ '&:focus-visible, &.focus': {
163
+ [buttonStencil.vars.background]: 'transparent',
164
+ },
165
+ '&:active, &.active': {
166
+ [buttonStencil.vars.background]: 'transparent',
167
+ },
168
+ '&:disabled, &.disabled': {
169
+ [buttonStencil.vars.background]: 'transparent',
170
+ },
180
171
  border: `${px2rem(1)} solid ${colors.licorice200}`,
181
172
  });
182
173
 
@@ -318,7 +309,7 @@ export const Pill = createContainer('button')({
318
309
  </StyledBasePill>
319
310
  )}
320
311
  {variant === 'removable' && (
321
- <StyledNonInteractivePill
312
+ <StyledRemoveablePill
322
313
  as={Element !== 'button' ? Element : 'span'}
323
314
  variant={variant}
324
315
  type={undefined}
@@ -332,7 +323,7 @@ export const Pill = createContainer('button')({
332
323
  return <Flex.Item key={index}>{child}</Flex.Item>;
333
324
  })}
334
325
  </Flex>
335
- </StyledNonInteractivePill>
326
+ </StyledRemoveablePill>
336
327
  )}
337
328
  </>
338
329
  );
package/pill/lib/PillIconButton.tsx CHANGED
@@ -2,12 +2,12 @@ import React from 'react';
2
2
 
3
3
  import {focusRing, styled, StyledType, createSubcomponent} from '@workday/canvas-kit-react/common';
4
4
 
5
- import {SystemIcon, SystemIconProps, systemIconStencil} from '@workday/canvas-kit-react/icon';
5
+ import {SystemIcon, SystemIconProps} from '@workday/canvas-kit-react/icon';
6
6
  import {usePillModel} from './usePillModel';
7
7
  import {xSmallIcon} from '@workday/canvas-system-icons-web';
8
8
  import {CanvasSystemIcon} from '@workday/design-assets-types';
9
9
  import {colors, space} from '@workday/canvas-kit-react/tokens';
10
- import {BaseButton, buttonColorPropVars} from '@workday/canvas-kit-react/button';
10
+ import {BaseButton, buttonStencil} from '@workday/canvas-kit-react/button';
11
11
 
12
12
  export interface PillIconButtonProps extends Omit<SystemIconProps, 'icon'> {
13
13
  /**
@@ -26,6 +26,9 @@ const StyledIconButton = styled(BaseButton)<StyledType & PillIconButtonProps>({
26
26
  marginInlineEnd: '-7px', // visually pull in the pill to the right size
27
27
  marginInlineStart: `-2px`, // visually create space between label and the button
28
28
  overflow: 'visible',
29
+ [buttonStencil.vars.background]: colors.soap300,
30
+ [buttonStencil.vars.border]: 'transparent',
31
+ [buttonStencil.vars.label]: colors.blackPepper400,
29
32
  '::after': {
30
33
  content: '""',
31
34
  height: space.l,
@@ -36,38 +39,32 @@ const StyledIconButton = styled(BaseButton)<StyledType & PillIconButtonProps>({
36
39
  margin: 0,
37
40
  pointerEvents: 'all',
38
41
  },
39
- '&.focus, &:focus-visible': {
42
+
43
+ '&:focus-visible, &.focus': {
40
44
  ...focusRing({
41
45
  innerColor: 'transparent',
42
46
  }),
43
- },
44
- [buttonColorPropVars.default.background]: colors.soap300,
45
- [buttonColorPropVars.default.border]: 'transparent',
46
- [buttonColorPropVars.default.label]: colors.blackPepper400,
47
-
48
- '&:focus-visible, &.focus': {
49
- [buttonColorPropVars.focus.background]: colors.soap300,
50
- [buttonColorPropVars.focus.border]: 'transparent',
51
- [buttonColorPropVars.focus.label]: colors.blackPepper400,
47
+ [buttonStencil.vars.background]: colors.soap300,
48
+ [buttonStencil.vars.border]: 'transparent',
49
+ [buttonStencil.vars.label]: colors.blackPepper400,
52
50
  },
53
51
 
54
52
  '&:hover, &.hover': {
55
- [buttonColorPropVars.hover.background]: colors.soap300,
56
- [buttonColorPropVars.hover.border]: 'transparent',
57
- [buttonColorPropVars.hover.label]: colors.blackPepper400,
53
+ [buttonStencil.vars.background]: colors.soap300,
54
+ [buttonStencil.vars.border]: 'transparent',
55
+ [buttonStencil.vars.label]: colors.blackPepper400,
58
56
  },
59
57
 
60
58
  '&:active, &.active': {
61
- [buttonColorPropVars.active.background]: colors.soap500,
62
- [buttonColorPropVars.active.border]: 'transparent',
63
- [buttonColorPropVars.active.label]: colors.blackPepper400,
59
+ [buttonStencil.vars.background]: colors.soap500,
60
+ [buttonStencil.vars.border]: 'transparent',
61
+ [buttonStencil.vars.label]: colors.blackPepper400,
64
62
  },
65
63
 
66
64
  '&:disabled, &.disabled': {
67
- [buttonColorPropVars.disabled.background]: colors.soap100,
68
- [buttonColorPropVars.disabled.label]: colors.licorice100,
69
- [buttonColorPropVars.disabled.border]: 'transparent',
70
- [systemIconStencil.vars.color]: colors.licorice100,
65
+ [buttonStencil.vars.background]: colors.soap100,
66
+ [buttonStencil.vars.label]: colors.licorice100,
67
+ [buttonStencil.vars.border]: 'transparent',
71
68
  },
72
69
  });
73
70
 
package/status-indicator/lib/StatusIndicator.tsx CHANGED
@@ -37,7 +37,7 @@ const statusIndicatorStencil = createStencil({
37
37
  alignItems: 'center',
38
38
  borderRadius: system.shape.half,
39
39
  height: px2rem(20),
40
- padding: `${system.space.zero} ${system.space.x1}}`,
40
+ padding: `${system.space.zero} ${system.space.x1}`,
41
41
  },
42
42
  modifiers: {
43
43
  gray: {