@workday/canvas-kit-react 10.0.0-alpha.552-next.0 → 10.0.0-alpha.554-next.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/button/lib/BaseButton.tsx +44 -14
  2. package/dist/commonjs/button/lib/BaseButton.d.ts.map +1 -1
  3. package/dist/commonjs/button/lib/BaseButton.js +22 -171
  4. package/dist/commonjs/button/lib/DeleteButton.js +1 -28
  5. package/dist/commonjs/button/lib/PrimaryButton.js +2 -56
  6. package/dist/commonjs/button/lib/SecondaryButton.js +2 -60
  7. package/dist/commonjs/button/lib/TertiaryButton.js +15 -109
  8. package/dist/commonjs/tokens/index.d.ts.map +1 -1
  9. package/dist/commonjs/tokens/lib/colors.types.d.ts.map +1 -1
  10. package/dist/es6/button/lib/BaseButton.d.ts.map +1 -1
  11. package/dist/es6/button/lib/BaseButton.js +22 -171
  12. package/dist/es6/button/lib/DeleteButton.js +1 -28
  13. package/dist/es6/button/lib/PrimaryButton.js +2 -56
  14. package/dist/es6/button/lib/SecondaryButton.js +2 -60
  15. package/dist/es6/button/lib/TertiaryButton.js +15 -109
  16. package/dist/es6/tokens/index.d.ts.map +1 -1
  17. package/dist/es6/tokens/index.js +2 -2
  18. package/dist/es6/tokens/lib/colors.types.d.ts.map +1 -1
  19. package/package.json +6 -6
  20. package/tokens/index.ts +11 -4
  21. package/tokens/lib/colors.types.ts +1 -1
package/dist/commonjs/button/lib/TertiaryButton.js CHANGED
@@ -27,121 +27,27 @@ 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 tokens_1 = require("@workday/canvas-kit-react/tokens");
29
29
  const Button_1 = require("./Button");
30
- const tertiaryStyles = canvas_kit_styling_1.createStyles({
31
- paddingInline: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x2, '0.5rem'),
32
- minWidth: 'auto',
33
- textDecoration: 'underline',
34
- border: 0,
35
- // Default Styles
36
- [BaseButton_1.buttonVars.default.background]: 'transparent',
37
- [BaseButton_1.buttonVars.default.border]: 'transparent',
38
- [BaseButton_1.buttonVars.default.borderRadius]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.shape.medium, '0.25rem'),
39
- [BaseButton_1.buttonVars.default.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.base, 'rgba(8,117,226,1)'),
40
- [BaseButton_1.buttonVars.default.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, 'rgba(51, 51, 51, 1)'),
41
- // Hover Styles
42
- [BaseButton_1.buttonVars.hover.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.soap200, 'rgba(241, 242, 243, 1)'),
43
- [BaseButton_1.buttonVars.hover.border]: 'transparent',
44
- [BaseButton_1.buttonVars.hover.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.dark, 'rgba(0,92,184,1)'),
45
- [BaseButton_1.buttonVars.hover.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500, 'rgba(31,31,31,1)'),
46
- // Focus Styles
47
- [BaseButton_1.buttonVars.focus.background]: 'transparent',
48
- [BaseButton_1.buttonVars.focus.border]: 'transparent',
49
- [BaseButton_1.buttonVars.focus.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.base, 'rgba(8,117,226,1)'),
50
- [BaseButton_1.buttonVars.focus.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500, 'rgba(31,31,31,1)'),
51
- [BaseButton_1.buttonVars.focus.boxShadowInner]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.common.focusOutline, 'rgba(8,117,226,1)'),
52
- [BaseButton_1.buttonVars.focus.boxShadowOuter]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.common.focusOutline, 'rgba(8,117,226,1)'),
53
- // Active Styles
54
- [BaseButton_1.buttonVars.active.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.soap300, 'rgba(232,235,237,1)'),
55
- [BaseButton_1.buttonVars.active.border]: 'transparent',
56
- [BaseButton_1.buttonVars.active.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.dark, 'rgba(0,92,184,1)'),
57
- [BaseButton_1.buttonVars.active.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500, 'rgba(31,31,31,1)'),
58
- // Disabled Styles
59
- [BaseButton_1.buttonVars.disabled.background]: 'transparent',
60
- [BaseButton_1.buttonVars.disabled.border]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100, '#fff'),
61
- [BaseButton_1.buttonVars.disabled.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.base, 'rgba(8,117,226,1)'),
62
- [BaseButton_1.buttonVars.disabled.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, 'rgba(51, 51, 51, 1)'),
63
- [BaseButton_1.buttonVars.disabled.opacity]: '0.4',
64
- '&:focus-visible, &.focus': {
65
- ...common_1.focusRing({
66
- width: 2,
67
- separation: 0,
68
- innerColor: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100, canvas_kit_styling_1.cssVar(BaseButton_1.buttonVars.focus.boxShadowInner)),
69
- outerColor: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.common.focusOutline, canvas_kit_styling_1.cssVar(BaseButton_1.buttonVars.focus.boxShadowOuter)),
70
- }),
71
- },
72
- });
30
+ const tertiaryStyles = canvas_kit_styling_1.createStyles({ name: "wmi8h", styles: "padding-inline:var(--cnvs-sys-space-x2, 0.5rem);min-width:auto;text-decoration:underline;border:0px;--css-button-vars-default-background:transparent;--css-button-vars-default-border:transparent;--css-button-vars-default-borderRadius:var(--cnvs-sys-shape-medium, 0.25rem);--css-button-vars-default-label:var(--cnvs-brand-primary-base, rgba(8,117,226,1));--css-button-vars-default-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51, 51, 51, 1));--css-button-vars-hover-background:var(--cnvs-base-palette-soap-200, rgba(241, 242, 243, 1));--css-button-vars-hover-border:transparent;--css-button-vars-hover-label:var(--cnvs-brand-primary-dark, rgba(0,92,184,1));--css-button-vars-hover-icon:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-focus-background:transparent;--css-button-vars-focus-border:transparent;--css-button-vars-focus-label:var(--cnvs-brand-primary-base, rgba(8,117,226,1));--css-button-vars-focus-icon:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-focus-boxShadowInner:var(--cnvs-brand-common-focus-outline, rgba(8,117,226,1));--css-button-vars-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,226,1));--css-button-vars-active-background:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--css-button-vars-active-border:transparent;--css-button-vars-active-label:var(--cnvs-brand-primary-dark, rgba(0,92,184,1));--css-button-vars-active-icon:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-disabled-background:transparent;--css-button-vars-disabled-border:var(--cnvs-base-palette-french-vanilla-100, #fff);--css-button-vars-disabled-label:var(--cnvs-brand-primary-base, rgba(8,117,226,1));--css-button-vars-disabled-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51, 51, 51, 1));--css-button-vars-disabled-opacity:0.4;&:focus-visible, &.focus{box-shadow:0 0 0 0px var(--cnvs-base-palette-french-vanilla-100, var(--css-button-vars-focus-boxShadowInner)), 0 0 0 calc(2px + 0px) var(--cnvs-brand-common-focus-outline, var(--css-button-vars-focus-boxShadowOuter));}" });
73
31
  exports.tertiaryButtonModifiers = canvas_kit_styling_1.createModifiers({
74
32
  isThemeable: {
75
- true: canvas_kit_styling_1.createStyles({
76
- [BaseButton_1.buttonVars.default.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.base, 'rgba(8,117,226,1)'),
77
- [BaseButton_1.buttonVars.hover.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.dark, 'rgba(0,92,184,1)'),
78
- [BaseButton_1.buttonVars.focus.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.base, 'rgba(8,117,226,1)'),
79
- [BaseButton_1.buttonVars.active.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.dark, 'rgba(0,92,184,1)'),
80
- [BaseButton_1.buttonVars.disabled.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.base, 'rgba(8,117,226,1)'),
81
- }),
33
+ true: canvas_kit_styling_1.createStyles({ name: "wmi8i", styles: "--css-button-vars-default-icon:var(--cnvs-brand-primary-base, rgba(8,117,226,1));--css-button-vars-hover-icon:var(--cnvs-brand-primary-dark, rgba(0,92,184,1));--css-button-vars-focus-icon:var(--cnvs-brand-primary-base, rgba(8,117,226,1));--css-button-vars-active-icon:var(--cnvs-brand-primary-dark, rgba(0,92,184,1));--css-button-vars-disabled-icon:var(--cnvs-brand-primary-base, rgba(8,117,226,1));" }),
82
34
  },
83
35
  variant: {
84
- inverse: canvas_kit_styling_1.createStyles({
85
- // Default Styles
86
- [BaseButton_1.buttonVars.default.background]: 'transparent',
87
- [BaseButton_1.buttonVars.default.border]: 'transparent',
88
- [BaseButton_1.buttonVars.default.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100, '#fff'),
89
- [BaseButton_1.buttonVars.default.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100, '#fff'),
90
- // Hover Styles
91
- [BaseButton_1.buttonVars.hover.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100, '#fff'),
92
- [BaseButton_1.buttonVars.hover.border]: 'transparent',
93
- [BaseButton_1.buttonVars.hover.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, 'rgba(51, 51, 51, 1)'),
94
- [BaseButton_1.buttonVars.hover.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, 'rgba(51, 51, 51, 1)'),
95
- // Focus Styles
96
- [BaseButton_1.buttonVars.focus.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100, '#fff'),
97
- [BaseButton_1.buttonVars.focus.border]: 'transparent',
98
- [BaseButton_1.buttonVars.focus.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, 'rgba(51, 51, 51, 1)'),
99
- [BaseButton_1.buttonVars.focus.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, 'rgba(51, 51, 51, 1)'),
100
- // Active Styles
101
- [BaseButton_1.buttonVars.active.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.soap200, 'rgba(241, 242, 243, 1)'),
102
- [BaseButton_1.buttonVars.active.border]: 'transparent',
103
- [BaseButton_1.buttonVars.active.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, 'rgba(51, 51, 51, 1)'),
104
- [BaseButton_1.buttonVars.active.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, 'rgba(51, 51, 51, 1)'),
105
- // Disabled Styles
106
- [BaseButton_1.buttonVars.disabled.background]: 'transparent',
107
- [BaseButton_1.buttonVars.disabled.border]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100, '#fff'),
108
- [BaseButton_1.buttonVars.disabled.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100, '#fff'),
109
- [BaseButton_1.buttonVars.disabled.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100, '#fff'),
110
- '&:focus-visible, &.focus': {
111
- ...common_1.focusRing({
112
- inset: 'inner',
113
- width: 2,
114
- separation: 2,
115
- innerColor: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, canvas_kit_styling_1.cssVar(BaseButton_1.buttonVars.focus.boxShadowInner)),
116
- outerColor: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100, canvas_kit_styling_1.cssVar(BaseButton_1.buttonVars.focus.boxShadowOuter)),
117
- }),
118
- },
119
- }),
36
+ inverse: canvas_kit_styling_1.createStyles({ name: "wmi8j", styles: "--css-button-vars-default-background:transparent;--css-button-vars-default-border:transparent;--css-button-vars-default-label:var(--cnvs-base-palette-french-vanilla-100, #fff);--css-button-vars-default-icon:var(--cnvs-base-palette-french-vanilla-100, #fff);--css-button-vars-hover-background:var(--cnvs-base-palette-french-vanilla-100, #fff);--css-button-vars-hover-border:transparent;--css-button-vars-hover-label:var(--cnvs-base-palette-black-pepper-400, rgba(51, 51, 51, 1));--css-button-vars-hover-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51, 51, 51, 1));--css-button-vars-focus-background:var(--cnvs-base-palette-french-vanilla-100, #fff);--css-button-vars-focus-border:transparent;--css-button-vars-focus-label:var(--cnvs-base-palette-black-pepper-400, rgba(51, 51, 51, 1));--css-button-vars-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51, 51, 51, 1));--css-button-vars-active-background:var(--cnvs-base-palette-soap-200, rgba(241, 242, 243, 1));--css-button-vars-active-border:transparent;--css-button-vars-active-label:var(--cnvs-base-palette-black-pepper-400, rgba(51, 51, 51, 1));--css-button-vars-active-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51, 51, 51, 1));--css-button-vars-disabled-background:transparent;--css-button-vars-disabled-border:var(--cnvs-base-palette-french-vanilla-100, #fff);--css-button-vars-disabled-label:var(--cnvs-base-palette-french-vanilla-100, #fff);--css-button-vars-disabled-icon:var(--cnvs-base-palette-french-vanilla-100, #fff);&:focus-visible, &.focus{box-shadow:inset 0 0 0 2px var(--cnvs-base-palette-black-pepper-400, var(--css-button-vars-focus-boxShadowInner)), 0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, var(--css-button-vars-focus-boxShadowOuter));}" }),
120
37
  },
121
38
  iconPosition: {
122
- largeOnly: canvas_kit_styling_1.createStyles({
123
- borderRadius: tokens_1.borderRadius.circle,
124
- padding: '0',
125
- minWidth: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x12, '3rem'),
126
- }),
127
- largeStart: canvas_kit_styling_1.createStyles({
128
- paddingInlineStart: tokens_1.space.xxs,
129
- paddingInlineEnd: tokens_1.space.xs,
130
- }),
131
- largeEnd: canvas_kit_styling_1.createStyles({ paddingInlineStart: tokens_1.space.xs, paddingInlineEnd: tokens_1.space.xxs }),
132
- mediumOnly: canvas_kit_styling_1.createStyles({ padding: '0', minWidth: tokens_1.space.xl, borderRadius: tokens_1.borderRadius.circle }),
133
- mediumStart: canvas_kit_styling_1.createStyles({ paddingInlineStart: tokens_1.space.xxs, paddingInlineEnd: tokens_1.space.xs }),
134
- mediumEnd: canvas_kit_styling_1.createStyles({ paddingInlineStart: tokens_1.space.xs, paddingInlineEnd: tokens_1.space.xxs }),
135
- smallOnly: canvas_kit_styling_1.createStyles({ padding: '0', minWidth: tokens_1.space.l, borderRadius: tokens_1.borderRadius.circle }),
136
- smallStart: canvas_kit_styling_1.createStyles({ paddingInlineStart: tokens_1.space.xxs, paddingInlineEnd: tokens_1.space.xs }),
137
- smallEnd: canvas_kit_styling_1.createStyles({ paddingInlineStart: tokens_1.space.xs, paddingInlineEnd: tokens_1.space.xxs }),
138
- extraSmallOnly: canvas_kit_styling_1.createStyles({
139
- padding: '0',
140
- minWidth: tokens_1.space.m,
141
- borderRadius: tokens_1.borderRadius.circle,
142
- }),
143
- extraSmallStart: canvas_kit_styling_1.createStyles({ paddingInlineStart: tokens_1.space.xxxs, paddingInlineEnd: tokens_1.space.xxs }),
144
- extraSmallEnd: canvas_kit_styling_1.createStyles({ paddingInlineStart: tokens_1.space.xxs, paddingInlineEnd: tokens_1.space.xxxs }),
39
+ largeOnly: canvas_kit_styling_1.createStyles({ name: "wmi8k", styles: "border-radius:999px;padding:0;min-width:var(--cnvs-sys-space-x12, 3rem);" }),
40
+ largeStart: canvas_kit_styling_1.createStyles({ name: "wmi8l", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
41
+ largeEnd: canvas_kit_styling_1.createStyles({ name: "wmi8m", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
42
+ mediumOnly: canvas_kit_styling_1.createStyles({ name: "wmi8n", styles: "padding:0;min-width:2.5rem;border-radius:999px;" }),
43
+ mediumStart: canvas_kit_styling_1.createStyles({ name: "wmi8o", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
44
+ mediumEnd: canvas_kit_styling_1.createStyles({ name: "wmi8p", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
45
+ smallOnly: canvas_kit_styling_1.createStyles({ name: "wmi8q", styles: "padding:0;min-width:2rem;border-radius:999px;" }),
46
+ smallStart: canvas_kit_styling_1.createStyles({ name: "wmi8r", styles: "padding-inline-start:0.5rem;padding-inline-end:0.75rem;" }),
47
+ smallEnd: canvas_kit_styling_1.createStyles({ name: "wmi8s", styles: "padding-inline-start:0.75rem;padding-inline-end:0.5rem;" }),
48
+ extraSmallOnly: canvas_kit_styling_1.createStyles({ name: "wmi8t", styles: "padding:0;min-width:1.5rem;border-radius:999px;" }),
49
+ extraSmallStart: canvas_kit_styling_1.createStyles({ name: "wmi8u", styles: "padding-inline-start:0.25rem;padding-inline-end:0.5rem;" }),
50
+ extraSmallEnd: canvas_kit_styling_1.createStyles({ name: "wmi8v", styles: "padding-inline-start:0.5rem;padding-inline-end:0.25rem;" }),
145
51
  },
146
52
  });
147
53
  exports.TertiaryButton = common_1.createComponent('button')({
package/dist/commonjs/tokens/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../tokens/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,MAAM,EAEN,SAAS,EAKV,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAC,YAAY,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,wBAAwB,EAAC,MAAM,cAAc,CAAC;AAChH,OAAO,EAAC,aAAa,EAAE,WAAW,EAAC,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAC,KAAK,EAAE,WAAW,EAAE,iBAAiB,EAAC,MAAM,aAAa,CAAC;AAClE,OAAO,EACL,KAAK,EACL,WAAW,EACX,eAAe,EACf,iBAAiB,EACjB,uBAAuB,EACvB,kBAAkB,EAClB,YAAY,EAAC,MAAM,aAAa,CAAC;AACnC,OAAO,EAAC,IAAI,EACV,UAAU,EACV,cAAc,EACd,UAAU,EACV,oBAAoB,EACpB,kBAAkB,EAClB,mBAAmB,EACpB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAC,aAAa,EAAC,MAAM,aAAa,CAAC;AAE1C,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBlB,CAAC;AAEF,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EACL,YAAY,EACZ,MAAM,EACN,SAAS,EACT,KAAK,EACL,KAAK,EACL,YAAY,EACZ,IAAI,EACJ,UAAU,EACV,cAAc,EACd,aAAa,GACd,CAAC;AAEF,YAAY,EACV,kBAAkB,EAClB,sBAAsB,EACtB,wBAAwB,EACxB,WAAW,EACX,WAAW,EACX,iBAAiB,EACjB,WAAW,EACX,eAAe,EACf,iBAAiB,EACjB,uBAAuB,EACvB,kBAAkB,EAClB,UAAU,EACV,oBAAoB,EACpB,kBAAkB,EAClB,mBAAmB,EACnB,aAAa,GACd,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../tokens/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,MAAM,EAEN,SAAS,EAKV,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,sBAAsB,EACtB,wBAAwB,EACzB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAC,aAAa,EAAE,WAAW,EAAC,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAC,KAAK,EAAE,WAAW,EAAE,iBAAiB,EAAC,MAAM,aAAa,CAAC;AAClE,OAAO,EACL,KAAK,EACL,WAAW,EACX,eAAe,EACf,iBAAiB,EACjB,uBAAuB,EACvB,kBAAkB,EAClB,YAAY,EACb,MAAM,aAAa,CAAC;AACrB,OAAO,EACL,IAAI,EACJ,UAAU,EACV,cAAc,EACd,UAAU,EACV,oBAAoB,EACpB,kBAAkB,EAClB,mBAAmB,EACpB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAC,aAAa,EAAC,MAAM,aAAa,CAAC;AAE1C,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBlB,CAAC;AAEF,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EACL,YAAY,EACZ,MAAM,EACN,SAAS,EACT,KAAK,EACL,KAAK,EACL,YAAY,EACZ,IAAI,EACJ,UAAU,EACV,cAAc,EACd,aAAa,GACd,CAAC;AAEF,YAAY,EACV,kBAAkB,EAClB,sBAAsB,EACtB,wBAAwB,EACxB,WAAW,EACX,WAAW,EACX,iBAAiB,EACjB,WAAW,EACX,eAAe,EACf,iBAAiB,EACjB,uBAAuB,EACvB,kBAAkB,EAClB,UAAU,EACV,oBAAoB,EACpB,kBAAkB,EAClB,mBAAmB,EACnB,aAAa,GACd,CAAC"}
package/dist/commonjs/tokens/lib/colors.types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"colors.types.d.ts","sourceRoot":"","sources":["../../../../tokens/lib/colors.types.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAEhD,oBAAY,aAAa;IACvB,QAAQ,aAAa;IACrB,KAAK,UAAU;IACf,UAAU,eAAe;IACzB,UAAU,eAAe;IACzB,SAAS,cAAc;IACvB,SAAS,cAAc;IACvB,IAAI,SAAS;IACb,UAAU,eAAe;IACzB,UAAU,eAAe;IACzB,KAAK,UAAU;IACf,UAAU,eAAe;IACzB,SAAS,cAAc;IACvB,IAAI,SAAS;IACb,aAAa,kBAAkB;IAC/B,UAAU,eAAe;IACzB,WAAW,gBAAgB;IAC3B,SAAS,cAAc;IACvB,WAAW,gBAAgB;IAC3B,UAAU,eAAe;IACzB,QAAQ,aAAa;IACrB,kBAAkB,uBAAuB;IACzC,UAAU,eAAe;IACzB,QAAQ,aAAa;IACrB,WAAW,gBAAgB;CAC5B;AAED,aAAK,WAAW,CAAC,CAAC,IAAI;KAClB,CAAC,IAAI,MAAM,CAAC,IAAI,MAAM,SAAS,CAAC,GAAG,KAAK,GAAG,MAAM,SAAS,CAAC,GAAG,KAAK,GAAG,CAAC,GAAK,CAAC,CAAC,CAAC,CAAC;CACnF,CAAC;AAEF,oBAAY,WAAW,GAAG,MAAM,WAAW,CAAC,OAAO,MAAM,CAAC,CAAC"}
1
+ {"version":3,"file":"colors.types.d.ts","sourceRoot":"","sources":["../../../../tokens/lib/colors.types.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAEhD,oBAAY,aAAa;IACvB,QAAQ,aAAa;IACrB,KAAK,UAAU;IACf,UAAU,eAAe;IACzB,UAAU,eAAe;IACzB,SAAS,cAAc;IACvB,SAAS,cAAc;IACvB,IAAI,SAAS;IACb,UAAU,eAAe;IACzB,UAAU,eAAe;IACzB,KAAK,UAAU;IACf,UAAU,eAAe;IACzB,SAAS,cAAc;IACvB,IAAI,SAAS;IACb,aAAa,kBAAkB;IAC/B,UAAU,eAAe;IACzB,WAAW,gBAAgB;IAC3B,SAAS,cAAc;IACvB,WAAW,gBAAgB;IAC3B,UAAU,eAAe;IACzB,QAAQ,aAAa;IACrB,kBAAkB,uBAAuB;IACzC,UAAU,eAAe;IACzB,QAAQ,aAAa;IACrB,WAAW,gBAAgB;CAC5B;AAED,aAAK,WAAW,CAAC,CAAC,IAAI;KACnB,CAAC,IAAI,MAAM,CAAC,IAAI,MAAM,SAAS,CAAC,GAAG,KAAK,GAAG,MAAM,SAAS,CAAC,GAAG,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAChF,CAAC;AAEF,oBAAY,WAAW,GAAG,MAAM,WAAW,CAAC,OAAO,MAAM,CAAC,CAAC"}
package/dist/es6/button/lib/BaseButton.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"BaseButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/BaseButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAkB,cAAc,EAAY,MAAM,kCAAkC,CAAC;AAE5F,OAAO,EAAC,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAG/D,OAAO,EAAC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AACjE,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAE9D,MAAM,WAAW,oBAAqB,SAAQ,OAAO,CAAC,eAAe,CAAC,EAAE,cAAc;IACpF;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;GAIG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC;CAAG;AAiB7E;;GAEG;AACH,eAAO,MAAM,UAAU;;;;;;CAMtB,CAAC;AAqGF;;;;;GAKG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;cA4E1B,CAAC;AAEH,wBAAgB,UAAU,CAAC,MAAM,GAAE,MAAW,UAE7C;AAED,wBAAgB,eAAe,CAC7B,IAAI,CAAC,EAAE,MAAM,OAAO,eAAe,CAAC,IAAI,EACxC,YAAY,CAAC,EAAE,aAAa,EAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GACzB,MAAM,OAAO,eAAe,CAAC,YAAY,CAE3C;AAED;;GAEG;AACH,eAAO,MAAM,UAAU;;;CA8CrB,CAAC"}
1
+ {"version":3,"file":"BaseButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/BaseButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAkB,cAAc,EAAY,MAAM,kCAAkC,CAAC;AAE5F,OAAO,EAAC,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAG/D,OAAO,EAAC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AACjE,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAE9D,MAAM,WAAW,oBAAqB,SAAQ,OAAO,CAAC,eAAe,CAAC,EAAE,cAAc;IACpF;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;GAIG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC;CAAG;AAE7E;;GAEG;AACH,eAAO,MAAM,UAAU;;;;;;CAmDtB,CAAC;AAqGF;;;;;GAKG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;cA4E1B,CAAC;AAEH,wBAAgB,UAAU,CAAC,MAAM,GAAE,MAAW,UAE7C;AAED,wBAAgB,eAAe,CAC7B,IAAI,CAAC,EAAE,MAAM,OAAO,eAAe,CAAC,IAAI,EACxC,YAAY,CAAC,EAAE,aAAa,EAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GACzB,MAAM,OAAO,eAAe,CAAC,YAAY,CAE3C;AAED;;GAEG;AACH,eAAO,MAAM,UAAU;;;CA8CrB,CAAC"}
package/dist/es6/button/lib/BaseButton.js CHANGED
@@ -5,114 +5,20 @@ import { createComponent, focusRing } from '@workday/canvas-kit-react/common';
5
5
  import { createStyles, createVars, cssVar, createModifiers } from '@workday/canvas-kit-styling';
6
6
  import { Box } from '@workday/canvas-kit-react/layout';
7
7
  import { base, brand, system } from '@workday/canvas-tokens-web';
8
- /**
9
- * Factory function for creating Button vars.
10
- */
11
- const createButtonVars = () => createVars('background', 'border', 'boxShadowInner', 'boxShadowOuter', 'icon', 'label', 'opacity', 'borderRadius');
12
8
  /**
13
9
  * Temporary css variables to be used across all Buttons.
14
10
  */
15
11
  export const buttonVars = {
16
- default: createButtonVars(),
17
- hover: createButtonVars(),
18
- active: createButtonVars(),
19
- focus: createButtonVars(),
20
- disabled: createButtonVars(),
12
+ default: createVars({ id: "css-button-vars-default", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
13
+ hover: createVars({ id: "css-button-vars-hover", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
14
+ active: createVars({ id: "css-button-vars-active", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
15
+ focus: createVars({ id: "css-button-vars-focus", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
16
+ disabled: createVars({ id: "css-button-vars-disabled", args: ["background", "border", "boxShadowInner", "boxShadowOuter", "icon", "label", "opacity", "borderRadius"] }),
21
17
  };
22
18
  /**
23
19
  * Base styles for Buttons.
24
20
  */
25
- const baseButtonStyles = createStyles({
26
- fontFamily: '"Roboto", "Helvetica Neue", "Helvetica", Arial, sans-serif',
27
- fontSize: '0.875rem',
28
- lineHeight: 'normal',
29
- letterSpacing: '0.015rem',
30
- fontWeight: 'bold',
31
- backgroundColor: cssVar(buttonVars.default.background, 'transparent'),
32
- color: cssVar(buttonVars.default.label, cssVar(base.blackPepper400, '#333333')),
33
- borderWidth: '1px',
34
- borderStyle: 'solid',
35
- gap: cssVar(system.space.x2, '0.5rem'),
36
- borderColor: cssVar(buttonVars.default.border, 'transparent'),
37
- cursor: 'pointer',
38
- display: 'inline-flex',
39
- boxShadow: 'none',
40
- alignItems: 'center',
41
- justifyContent: 'center',
42
- boxSizing: 'border-box',
43
- outline: '2px transparent',
44
- whiteSpace: 'nowrap',
45
- WebkitFontSmoothing: 'antialiased',
46
- MozOsxFontSmoothing: 'grayscale',
47
- borderRadius: cssVar(buttonVars.default.borderRadius, cssVar(system.shape.circle, '999px')),
48
- position: 'relative',
49
- verticalAlign: 'middle',
50
- overflow: 'hidden',
51
- transition: 'box-shadow 120ms linear, border 120ms linear, background-color 120ms linear, color 120ms linear',
52
- '&:disabled, &:disabled:active': {
53
- cursor: 'default',
54
- boxShadow: 'none',
55
- opacity: cssVar(buttonVars.disabled.opacity, '1'),
56
- },
57
- '& span .wd-icon-fill': {
58
- transitionDuration: '40ms',
59
- fill: cssVar(buttonVars.default.icon, cssVar(base.blackPepper400, '#333333')),
60
- },
61
- '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
62
- fill: cssVar(buttonVars.default.icon, cssVar(base.blackPepper400, '#333333')),
63
- },
64
- '&:focus-visible, &.focus': {
65
- backgroundColor: cssVar(buttonVars.focus.background, 'transparent'),
66
- borderColor: cssVar(buttonVars.focus.border, 'transparent'),
67
- color: cssVar(buttonVars.focus.label, cssVar(base.blackPepper400, '#333333')),
68
- '& span .wd-icon-fill': {
69
- fill: cssVar(buttonVars.focus.icon, cssVar(base.blackPepper400, '#333333')),
70
- },
71
- '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
72
- fill: cssVar(buttonVars.focus.icon, cssVar(base.blackPepper400, '#333333')),
73
- },
74
- ...focusRing({
75
- width: 2,
76
- separation: 2,
77
- innerColor: cssVar(buttonVars.focus.boxShadowInner, cssVar(base.frenchVanilla100, '#fff')),
78
- outerColor: cssVar(buttonVars.focus.boxShadowOuter, cssVar(brand.primary.base, 'rgba(0,92,184,1)')),
79
- }),
80
- },
81
- '&:hover, &.hover': {
82
- backgroundColor: cssVar(buttonVars.hover.background, cssVar(base.blackPepper500, '#1e1e1e')),
83
- borderColor: cssVar(buttonVars.hover.border, 'transparent'),
84
- color: cssVar(buttonVars.hover.label, cssVar(base.blackPepper500, '#1e1e1e')),
85
- '& span .wd-icon-fill': {
86
- fill: cssVar(buttonVars.hover.icon, cssVar(base.blackPepper500, '#1e1e1e')),
87
- },
88
- '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
89
- fill: cssVar(buttonVars.hover.icon, cssVar(base.blackPepper500, '#1e1e1e')),
90
- },
91
- },
92
- '&:hover:active': { transitionDuration: '40ms' },
93
- '&:active, &.active': {
94
- backgroundColor: cssVar(buttonVars.active.background, 'transparent'),
95
- borderColor: cssVar(buttonVars.active.border, 'transparent'),
96
- color: cssVar(buttonVars.active.label, cssVar(base.blackPepper400, '#333333')),
97
- '& span .wd-icon-fill': {
98
- fill: cssVar(buttonVars.active.icon, cssVar(base.blackPepper400, '#333333')),
99
- },
100
- '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
101
- fill: cssVar(buttonVars.active.icon),
102
- },
103
- },
104
- '&:disabled': {
105
- backgroundColor: cssVar(buttonVars.disabled.background, 'transparent'),
106
- borderColor: cssVar(buttonVars.disabled.border, 'transparent'),
107
- color: cssVar(buttonVars.disabled.label, cssVar(base.blackPepper400, '#333333')),
108
- '& span .wd-icon-fill': {
109
- fill: cssVar(buttonVars.disabled.icon, cssVar(base.blackPepper400, '#333333')),
110
- },
111
- '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
112
- fill: cssVar(buttonVars.disabled.icon, cssVar(base.blackPepper400, '#333333')),
113
- },
114
- },
115
- });
21
+ const baseButtonStyles = createStyles({ name: "i2ty0", styles: "font-family:\"Roboto\", \"Helvetica Neue\", \"Helvetica\", Arial, sans-serif;font-size:0.875rem;line-height:normal;letter-spacing:0.015rem;font-weight:bold;background-color:var(--css-button-vars-default-background, transparent);color:var(--css-button-vars-default-label, var(--cnvs-base-palette-black-pepper-400, #333333));border-width:1px;border-style:solid;gap:var(--cnvs-sys-space-x2, 0.5rem);border-color:var(--css-button-vars-default-border, transparent);cursor:pointer;display:inline-flex;box-shadow:none;align-items:center;justify-content:center;box-sizing:border-box;outline:2px transparent;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-radius:var(--css-button-vars-default-borderRadius, var(--cnvs-sys-shape-circle, 999px));position:relative;vertical-align:middle;overflow:hidden;transition:box-shadow 120ms linear, border 120ms linear, background-color 120ms linear, color 120ms linear;&:disabled, &:disabled:active{cursor:default;box-shadow:none;opacity:var(--css-button-vars-disabled-opacity, 1);}& span .wd-icon-fill{transition-duration:40ms;fill:var(--css-button-vars-default-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-vars-default-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}&:focus-visible, &.focus{background-color:var(--css-button-vars-focus-background, transparent);border-color:var(--css-button-vars-focus-border, transparent);color:var(--css-button-vars-focus-label, var(--cnvs-base-palette-black-pepper-400, #333333));& span .wd-icon-fill{fill:var(--css-button-vars-focus-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-vars-focus-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}box-shadow:0 0 0 2px var(--css-button-vars-focus-boxShadowInner, var(--cnvs-base-palette-french-vanilla-100, #fff)), 0 0 0 calc(2px + 2px) var(--css-button-vars-focus-boxShadowOuter, var(--cnvs-brand-primary-base, rgba(0,92,184,1)));}&:hover, &.hover{background-color:var(--css-button-vars-hover-background, var(--cnvs-base-palette-black-pepper-500, #1e1e1e));border-color:var(--css-button-vars-hover-border, transparent);color:var(--css-button-vars-hover-label, var(--cnvs-base-palette-black-pepper-500, #1e1e1e));& span .wd-icon-fill{fill:var(--css-button-vars-hover-icon, var(--cnvs-base-palette-black-pepper-500, #1e1e1e));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-vars-hover-icon, var(--cnvs-base-palette-black-pepper-500, #1e1e1e));}}&:hover:active{transition-duration:40ms;}&:active, &.active{background-color:var(--css-button-vars-active-background, transparent);border-color:var(--css-button-vars-active-border, transparent);color:var(--css-button-vars-active-label, var(--cnvs-base-palette-black-pepper-400, #333333));& span .wd-icon-fill{fill:var(--css-button-vars-active-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-vars-active-icon);}}&:disabled{background-color:var(--css-button-vars-disabled-background, transparent);border-color:var(--css-button-vars-disabled-border, transparent);color:var(--css-button-vars-disabled-label, var(--cnvs-base-palette-black-pepper-400, #333333));& span .wd-icon-fill{fill:var(--css-button-vars-disabled-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--css-button-vars-disabled-icon, var(--cnvs-base-palette-black-pepper-400, #333333));}}" });
116
22
  /**
117
23
  * Button modifiers that will overwrite the base styles of Buttons.
118
24
  * - `Size`: These modifiers will dictate a size of a Button and has a set of styles to associated with it.
@@ -121,79 +27,24 @@ const baseButtonStyles = createStyles({
121
27
  */
122
28
  export const buttonModifiers = createModifiers({
123
29
  size: {
124
- large: createStyles({
125
- fontSize: cssVar(system.space.x4, '1rem'),
126
- lineHeight: cssVar(system.space.x6, '1.5rem'),
127
- letterSpacing: '0.01rem',
128
- height: '48px',
129
- paddingInline: cssVar(system.space.x8, '2rem'),
130
- minWidth: '112px',
131
- }),
132
- medium: createStyles({
133
- fontSize: '0.875rem',
134
- letterSpacing: '0.015rem',
135
- minWidth: '96px',
136
- paddingInline: cssVar(system.space.x6, '1.5rem'),
137
- height: cssVar(system.space.x10, '2.5rem'),
138
- }),
139
- small: createStyles({
140
- fontSize: '0.875rem',
141
- letterSpacing: '0.015rem',
142
- height: cssVar(system.space.x8, '2rem'),
143
- minWidth: cssVar(system.space.x20, '5rem'),
144
- paddingInline: cssVar(system.space.x4, '1rem'),
145
- gap: cssVar(system.space.x1, '0.25rem'),
146
- }),
147
- extraSmall: createStyles({
148
- fontSize: '0.75rem',
149
- lineHeight: cssVar(system.space.x4, '1rem'),
150
- letterSpacing: '0.02rem',
151
- height: cssVar(system.space.x6, '1.5rem'),
152
- minWidth: 'auto',
153
- paddingInline: cssVar(system.space.x3, '0.75rem'),
154
- gap: cssVar(system.space.x1, '0.25rem'),
155
- }),
30
+ large: createStyles({ name: "i2ty1", styles: "font-size:var(--cnvs-sys-space-x4, 1rem);line-height:var(--cnvs-sys-space-x6, 1.5rem);letter-spacing:0.01rem;height:48px;padding-inline:var(--cnvs-sys-space-x8, 2rem);min-width:112px;" }),
31
+ medium: createStyles({ name: "i2ty2", styles: "font-size:0.875rem;letter-spacing:0.015rem;min-width:96px;padding-inline:var(--cnvs-sys-space-x6, 1.5rem);height:var(--cnvs-sys-space-x10, 2.5rem);" }),
32
+ small: createStyles({ name: "i2ty3", styles: "font-size:0.875rem;letter-spacing:0.015rem;height:var(--cnvs-sys-space-x8, 2rem);min-width:var(--cnvs-sys-space-x20, 5rem);padding-inline:var(--cnvs-sys-space-x4, 1rem);gap:var(--cnvs-sys-space-x1, 0.25rem);" }),
33
+ extraSmall: createStyles({ name: "i2ty4", styles: "font-size:0.75rem;line-height:var(--cnvs-sys-space-x4, 1rem);letter-spacing:0.02rem;height:var(--cnvs-sys-space-x6, 1.5rem);min-width:auto;padding-inline:var(--cnvs-sys-space-x3, 0.75rem);gap:var(--cnvs-sys-space-x1, 0.25rem);" }),
156
34
  },
157
35
  iconPosition: {
158
- largeOnly: createStyles({
159
- padding: '0',
160
- minWidth: cssVar(system.space.x12, '3rem'),
161
- }),
162
- largeStart: createStyles({
163
- paddingInlineStart: cssVar(system.space.x6, '1.5rem'),
164
- paddingInlineEnd: cssVar(system.space.x8, '2rem'),
165
- }),
166
- largeEnd: createStyles({
167
- paddingInlineStart: cssVar(system.space.x8, '2rem'),
168
- paddingInlineEnd: cssVar(system.space.x6, '1.5rem'),
169
- }),
170
- mediumOnly: createStyles({ padding: '0', minWidth: cssVar(system.space.x10, '2.5rem') }),
171
- mediumStart: createStyles({
172
- paddingInlineStart: cssVar(system.space.x5, '1.25rem'),
173
- paddingInlineEnd: cssVar(system.space.x6, '1.5rem'),
174
- }),
175
- mediumEnd: createStyles({
176
- paddingInlineStart: cssVar(system.space.x6, '1.5rem'),
177
- paddingInlineEnd: cssVar(system.space.x5, '1.25rem'),
178
- }),
179
- smallOnly: createStyles({ padding: '0', minWidth: cssVar(system.space.x8, '2rem') }),
180
- smallStart: createStyles({
181
- paddingInlineStart: cssVar(system.space.x3, '0.75rem'),
182
- paddingInlineEnd: cssVar(system.space.x4, '1rem'),
183
- }),
184
- smallEnd: createStyles({
185
- paddingInlineStart: cssVar(system.space.x4, '1rem'),
186
- paddingInlineEnd: cssVar(system.space.x3, '0.75rem'),
187
- }),
188
- extraSmallOnly: createStyles({ padding: '0', minWidth: cssVar(system.space.x6, '1.5rem') }),
189
- extraSmallStart: createStyles({
190
- paddingInlineStart: cssVar(system.space.x2, '0.5rem'),
191
- paddingInlineEnd: cssVar(system.space.x3, '0.75rem'),
192
- }),
193
- extraSmallEnd: createStyles({
194
- paddingInlineStart: cssVar(system.space.x3, '0.75rem'),
195
- paddingInlineEnd: cssVar(system.space.x2, '0.5rem'),
196
- }),
36
+ largeOnly: createStyles({ name: "i2ty5", styles: "padding:0;min-width:var(--cnvs-sys-space-x12, 3rem);" }),
37
+ largeStart: createStyles({ name: "i2ty6", styles: "padding-inline-start:var(--cnvs-sys-space-x6, 1.5rem);padding-inline-end:var(--cnvs-sys-space-x8, 2rem);" }),
38
+ largeEnd: createStyles({ name: "i2ty7", styles: "padding-inline-start:var(--cnvs-sys-space-x8, 2rem);padding-inline-end:var(--cnvs-sys-space-x6, 1.5rem);" }),
39
+ mediumOnly: createStyles({ name: "i2ty8", styles: "padding:0;min-width:var(--cnvs-sys-space-x10, 2.5rem);" }),
40
+ mediumStart: createStyles({ name: "i2ty9", styles: "padding-inline-start:var(--cnvs-sys-space-x5, 1.25rem);padding-inline-end:var(--cnvs-sys-space-x6, 1.5rem);" }),
41
+ mediumEnd: createStyles({ name: "i2tya", styles: "padding-inline-start:var(--cnvs-sys-space-x6, 1.5rem);padding-inline-end:var(--cnvs-sys-space-x5, 1.25rem);" }),
42
+ smallOnly: createStyles({ name: "i2tyb", styles: "padding:0;min-width:var(--cnvs-sys-space-x8, 2rem);" }),
43
+ smallStart: createStyles({ name: "i2tyc", styles: "padding-inline-start:var(--cnvs-sys-space-x3, 0.75rem);padding-inline-end:var(--cnvs-sys-space-x4, 1rem);" }),
44
+ smallEnd: createStyles({ name: "i2tyd", styles: "padding-inline-start:var(--cnvs-sys-space-x4, 1rem);padding-inline-end:var(--cnvs-sys-space-x3, 0.75rem);" }),
45
+ extraSmallOnly: createStyles({ name: "i2tye", styles: "padding:0;min-width:var(--cnvs-sys-space-x6, 1.5rem);" }),
46
+ extraSmallStart: createStyles({ name: "i2tyf", styles: "padding-inline-start:var(--cnvs-sys-space-x2, 0.5rem);padding-inline-end:var(--cnvs-sys-space-x3, 0.75rem);" }),
47
+ extraSmallEnd: createStyles({ name: "i2tyg", styles: "padding-inline-start:var(--cnvs-sys-space-x3, 0.75rem);padding-inline-end:var(--cnvs-sys-space-x2, 0.5rem);" }),
197
48
  },
198
49
  });
199
50
  export function capitalize(string = '') {
package/dist/es6/button/lib/DeleteButton.js CHANGED
@@ -4,34 +4,7 @@ import { createComponent } from '@workday/canvas-kit-react/common';
4
4
  import { createStyles, cssVar } from '@workday/canvas-kit-styling';
5
5
  import { base, brand, system } from '@workday/canvas-tokens-web';
6
6
  import { Button } from './Button';
7
- const deleteStyles = createStyles({
8
- [buttonVars.default.background]: cssVar(brand.error.base, '#de2e21'),
9
- [buttonVars.default.border]: 'transparent',
10
- [buttonVars.default.borderRadius]: cssVar(system.shape.circle, '999px'),
11
- [buttonVars.default.label]: cssVar(brand.error.accent, '#ffffff'),
12
- '&:hover, &.hover': {
13
- [buttonVars.hover.background]: cssVar(brand.error.dark, '#a31b12'),
14
- [buttonVars.hover.border]: 'transparent',
15
- [buttonVars.hover.label]: cssVar(brand.error.accent, '#ffffff'),
16
- },
17
- '&:focus-visible, &.focus': {
18
- [buttonVars.focus.background]: cssVar(brand.error.base, '#de2e21'),
19
- [buttonVars.focus.border]: 'transparent',
20
- [buttonVars.focus.label]: cssVar(brand.error.accent, '#ffffff'),
21
- [buttonVars.focus.boxShadowInner]: cssVar(base.frenchVanilla100, '#ffffff'),
22
- [buttonVars.focus.boxShadowOuter]: cssVar(brand.common.focusOutline, '#0875e1'),
23
- },
24
- '&:active, &.active': {
25
- [buttonVars.active.background]: cssVar(brand.error.darkest, 'rgba(128,22,14,1)'),
26
- [buttonVars.active.border]: 'transparent',
27
- [buttonVars.active.label]: cssVar(brand.error.accent, '#ffffff'),
28
- },
29
- '&:disabled, &:active:disabled, &:focus:disabled, &:hover:disabled': {
30
- [buttonVars.disabled.background]: cssVar(brand.error.light, '#fcc9c5'),
31
- [buttonVars.disabled.label]: cssVar(brand.error.accent, '#ffffff'),
32
- opacity: 1,
33
- },
34
- });
7
+ const deleteStyles = createStyles({ name: "i2ty10", styles: "--css-button-vars-default-background:var(--cnvs-brand-error-base, #de2e21);--css-button-vars-default-border:transparent;--css-button-vars-default-borderRadius:var(--cnvs-sys-shape-circle, 999px);--css-button-vars-default-label:var(--cnvs-brand-error-accent, #ffffff);&:hover, &.hover{--css-button-vars-hover-background:var(--cnvs-brand-error-dark, #a31b12);--css-button-vars-hover-border:transparent;--css-button-vars-hover-label:var(--cnvs-brand-error-accent, #ffffff);}&:focus-visible, &.focus{--css-button-vars-focus-background:var(--cnvs-brand-error-base, #de2e21);--css-button-vars-focus-border:transparent;--css-button-vars-focus-label:var(--cnvs-brand-error-accent, #ffffff);--css-button-vars-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100, #ffffff);--css-button-vars-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, #0875e1);}&:active, &.active{--css-button-vars-active-background:var(--cnvs-brand-error-darkest, rgba(128,22,14,1));--css-button-vars-active-border:transparent;--css-button-vars-active-label:var(--cnvs-brand-error-accent, #ffffff);}&:disabled, &:active:disabled, &:focus:disabled, &:hover:disabled{--css-button-vars-disabled-background:var(--cnvs-brand-error-light, #fcc9c5);--css-button-vars-disabled-label:var(--cnvs-brand-error-accent, #ffffff);opacity:1px;}" });
35
8
  /**
36
9
  * Use sparingly for destructive actions that will result in data loss, can’t be undone, or will
37
10
  * have significant consequences. They commonly appear in confirmation dialogs as the final
package/dist/es6/button/lib/PrimaryButton.js CHANGED
@@ -4,64 +4,10 @@ import { createComponent } from '@workday/canvas-kit-react/common';
4
4
  import { createStyles, cssVar, createModifiers } from '@workday/canvas-kit-styling';
5
5
  import { base, brand, system } from '@workday/canvas-tokens-web';
6
6
  import { Button } from './Button';
7
- const primaryStyles = createStyles({
8
- // Default Styles
9
- [buttonVars.default.background]: cssVar(brand.primary.base, cssVar(base.blueberry400, '#0875e1')),
10
- [buttonVars.default.border]: 'transparent',
11
- [buttonVars.default.borderRadius]: cssVar(system.shape.circle, '999px'),
12
- [buttonVars.default.label]: cssVar(brand.primary.accent, '#ffffff'),
13
- [buttonVars.default.icon]: cssVar(brand.primary.accent, '#ffffff'),
14
- // Hover Styles
15
- [buttonVars.hover.background]: cssVar(brand.primary.dark, 'rgba(0,92,184,1)'),
16
- [buttonVars.hover.border]: 'transparent',
17
- [buttonVars.hover.label]: cssVar(brand.primary.accent, '#ffffff'),
18
- [buttonVars.hover.icon]: cssVar(brand.primary.accent, '#ffffff'),
19
- // Focus Styles
20
- [buttonVars.focus.background]: cssVar(brand.primary.base, 'rgba(8,117,226,1)'),
21
- [buttonVars.focus.border]: 'transparent',
22
- [buttonVars.focus.label]: cssVar(brand.primary.accent, '#ffffff'),
23
- [buttonVars.focus.icon]: cssVar(brand.primary.accent, '#ffffff'),
24
- [buttonVars.focus.boxShadowInner]: cssVar(base.frenchVanilla100, '#ffffff'),
25
- [buttonVars.focus.boxShadowOuter]: cssVar(brand.common.focusOutline, 'rgba(8,117,226,1)'),
26
- // Active Styles
27
- [buttonVars.active.background]: cssVar(brand.primary.darkest, 'rgba(0,66,133,1)'),
28
- [buttonVars.active.border]: 'transparent',
29
- [buttonVars.active.label]: cssVar(brand.primary.accent, '#ffffff'),
30
- [buttonVars.active.icon]: cssVar(brand.primary.accent, '#ffffff'),
31
- // Disabled Styles
32
- [buttonVars.disabled.background]: cssVar(brand.primary.base, 'rgba(8,117,226,1)'),
33
- [buttonVars.disabled.border]: 'transparent',
34
- [buttonVars.disabled.label]: cssVar(brand.primary.accent, '#ffffff'),
35
- [buttonVars.disabled.opacity]: '0.4',
36
- [buttonVars.disabled.icon]: cssVar(brand.primary.accent, '#ffffff'),
37
- });
7
+ const primaryStyles = createStyles({ name: "i2tyw", styles: "--css-button-vars-default-background:var(--cnvs-brand-primary-base, var(--cnvs-base-palette-blueberry-400, #0875e1));--css-button-vars-default-border:transparent;--css-button-vars-default-borderRadius:var(--cnvs-sys-shape-circle, 999px);--css-button-vars-default-label:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-default-icon:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-hover-background:var(--cnvs-brand-primary-dark, rgba(0,92,184,1));--css-button-vars-hover-border:transparent;--css-button-vars-hover-label:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-hover-icon:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-focus-background:var(--cnvs-brand-primary-base, rgba(8,117,226,1));--css-button-vars-focus-border:transparent;--css-button-vars-focus-label:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-focus-icon:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100, #ffffff);--css-button-vars-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,226,1));--css-button-vars-active-background:var(--cnvs-brand-primary-darkest, rgba(0,66,133,1));--css-button-vars-active-border:transparent;--css-button-vars-active-label:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-active-icon:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-disabled-background:var(--cnvs-brand-primary-base, rgba(8,117,226,1));--css-button-vars-disabled-border:transparent;--css-button-vars-disabled-label:var(--cnvs-brand-primary-accent, #ffffff);--css-button-vars-disabled-opacity:0.4;--css-button-vars-disabled-icon:var(--cnvs-brand-primary-accent, #ffffff);" });
38
8
  export const primaryButtonModifiers = createModifiers({
39
9
  variant: {
40
- inverse: createStyles({
41
- // Default Styles
42
- [buttonVars.default.background]: cssVar(base.frenchVanilla100, '#ffffff'),
43
- [buttonVars.default.borderRadius]: cssVar(system.shape.circle, '999px'),
44
- [buttonVars.default.label]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
45
- [buttonVars.default.icon]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
46
- // Hover Styles
47
- [buttonVars.hover.background]: cssVar(base.soap300, 'rgba(232,235,237,1)'),
48
- [buttonVars.hover.label]: cssVar(base.blackPepper500, 'rgba(31,31,31,1)'),
49
- [buttonVars.hover.icon]: cssVar(base.blackPepper500, 'rgba(31,31,31,1)'),
50
- // Focus Styles
51
- [buttonVars.focus.background]: cssVar(base.frenchVanilla100, '#ffffff'),
52
- [buttonVars.focus.label]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
53
- [buttonVars.focus.icon]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
54
- [buttonVars.focus.boxShadowInner]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
55
- [buttonVars.focus.boxShadowOuter]: cssVar(base.frenchVanilla100, '#ffffff'),
56
- // Active Styles
57
- [buttonVars.active.background]: cssVar(base.soap400, 'rgba(224,227,230,1)'),
58
- [buttonVars.active.label]: cssVar(base.blackPepper500, 'rgba(31,31,31,1)'),
59
- [buttonVars.active.icon]: cssVar(base.blackPepper500, 'rgba(31,31,31,1)'),
60
- // Disabled Styles
61
- [buttonVars.disabled.background]: cssVar(base.frenchVanilla100, '#ffffff'),
62
- [buttonVars.disabled.label]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
63
- [buttonVars.disabled.icon]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
64
- }),
10
+ inverse: createStyles({ name: "i2tyx", styles: "--css-button-vars-default-background:var(--cnvs-base-palette-french-vanilla-100, #ffffff);--css-button-vars-default-borderRadius:var(--cnvs-sys-shape-circle, 999px);--css-button-vars-default-label:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-default-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-hover-background:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--css-button-vars-hover-label:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-hover-icon:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-focus-background:var(--cnvs-base-palette-french-vanilla-100, #ffffff);--css-button-vars-focus-label:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-focus-boxShadowInner:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-focus-boxShadowOuter:var(--cnvs-base-palette-french-vanilla-100, #ffffff);--css-button-vars-active-background:var(--cnvs-base-palette-soap-400, rgba(224,227,230,1));--css-button-vars-active-label:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-active-icon:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-disabled-background:var(--cnvs-base-palette-french-vanilla-100, #ffffff);--css-button-vars-disabled-label:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-disabled-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" }),
65
11
  },
66
12
  });
67
13
  export const PrimaryButton = createComponent('button')({
package/dist/es6/button/lib/SecondaryButton.js CHANGED
@@ -4,68 +4,10 @@ import { createComponent } from '@workday/canvas-kit-react/common';
4
4
  import { createStyles, cssVar, createModifiers } from '@workday/canvas-kit-styling';
5
5
  import { base, brand, system } from '@workday/canvas-tokens-web';
6
6
  import { Button } from './Button';
7
- const secondaryStyles = createStyles({
8
- // Default Styles
9
- [buttonVars.default.background]: 'transparent',
10
- [buttonVars.default.border]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
11
- [buttonVars.default.borderRadius]: cssVar(system.shape.circle, '999px'),
12
- [buttonVars.default.label]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
13
- [buttonVars.default.icon]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
14
- // Hover Styles
15
- [buttonVars.hover.background]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
16
- [buttonVars.hover.border]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
17
- [buttonVars.hover.label]: cssVar(brand.primary.accent, 'rgba(255,255,255,1)'),
18
- [buttonVars.hover.icon]: cssVar(brand.primary.accent, 'rgba(255,255,255,1)'),
19
- // Focus Styles
20
- [buttonVars.focus.background]: 'transparent',
21
- [buttonVars.focus.border]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
22
- [buttonVars.focus.label]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
23
- [buttonVars.focus.icon]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
24
- [buttonVars.focus.boxShadowInner]: cssVar(base.frenchVanilla100, 'rgba(255,255,255,1)'),
25
- [buttonVars.focus.boxShadowOuter]: cssVar(brand.common.focusOutline, 'rgba(8,117,226,1)'),
26
- // Active Styles
27
- [buttonVars.active.background]: cssVar(base.blackPepper500, 'rgba(31,31,31,1)'),
28
- [buttonVars.active.border]: cssVar(base.blackPepper500, 'rgba(31,31,31,1)'),
29
- [buttonVars.active.label]: cssVar(brand.primary.accent, 'rgba(255,255,255,1)'),
30
- [buttonVars.active.icon]: cssVar(brand.primary.accent, 'rgba(255,255,255,1)'),
31
- // Disabled Styles
32
- [buttonVars.disabled.background]: 'transparent',
33
- [buttonVars.disabled.border]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
34
- [buttonVars.disabled.label]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
35
- [buttonVars.disabled.opacity]: '0.4',
36
- [buttonVars.disabled.icon]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
37
- });
7
+ const secondaryStyles = createStyles({ name: "i2tyy", styles: "--css-button-vars-default-background:transparent;--css-button-vars-default-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-default-borderRadius:var(--cnvs-sys-shape-circle, 999px);--css-button-vars-default-label:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-default-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-hover-background:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-hover-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-hover-label:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-vars-hover-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-vars-focus-background:transparent;--css-button-vars-focus-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-focus-label:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-focus-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-focus-boxShadowInner:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-focus-boxShadowOuter:var(--cnvs-brand-common-focus-outline, rgba(8,117,226,1));--css-button-vars-active-background:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-active-border:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-active-label:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-vars-active-icon:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));--css-button-vars-disabled-background:transparent;--css-button-vars-disabled-border:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-disabled-label:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));--css-button-vars-disabled-opacity:0.4;--css-button-vars-disabled-icon:var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1));" });
38
8
  export const secondaryButtonModifiers = createModifiers({
39
9
  variant: {
40
- inverse: createStyles({
41
- // Default Styles
42
- [buttonVars.default.background]: 'transparent',
43
- [buttonVars.default.border]: cssVar(base.frenchVanilla100, 'rgba(255,255,255,1)'),
44
- [buttonVars.default.label]: cssVar(base.frenchVanilla100, 'rgba(255,255,255,1)'),
45
- [buttonVars.default.icon]: cssVar(base.frenchVanilla100, 'rgba(255,255,255,1)'),
46
- // Hover Styles
47
- [buttonVars.hover.background]: cssVar(base.soap300, 'rgba(232,235,237,1)'),
48
- [buttonVars.hover.border]: cssVar(base.soap300, 'rgba(232,235,237,1)'),
49
- [buttonVars.hover.label]: cssVar(base.blackPepper500, 'rgba(31,31,31,1)'),
50
- [buttonVars.hover.icon]: cssVar(base.blackPepper500, 'rgba(31,31,31,1)'),
51
- // Focus Styles
52
- [buttonVars.focus.background]: cssVar(base.frenchVanilla100, 'rgba(255,255,255,1)'),
53
- [buttonVars.focus.border]: cssVar(base.frenchVanilla100, 'rgba(255,255,255,1)'),
54
- [buttonVars.focus.label]: cssVar(base.blackPepper500, 'rgba(31,31,31,1)'),
55
- [buttonVars.focus.icon]: cssVar(base.blackPepper500, 'rgba(31,31,31,1)'),
56
- [buttonVars.focus.boxShadowInner]: cssVar(base.blackPepper500, 'rgba(31,31,31,1)'),
57
- [buttonVars.focus.boxShadowOuter]: cssVar(base.frenchVanilla100, 'rgba(255,255,255,1)'),
58
- // Active Styles
59
- [buttonVars.active.background]: cssVar(base.soap400, 'rgba(224,227,230,1)'),
60
- [buttonVars.active.border]: cssVar(base.soap400, 'rgba(224,227,230,1)'),
61
- [buttonVars.active.label]: cssVar(base.blackPepper500, 'rgba(31,31,31,1)'),
62
- [buttonVars.active.icon]: cssVar(base.blackPepper500, 'rgba(31,31,31,1)'),
63
- // Disabled Styles
64
- [buttonVars.disabled.background]: 'transparent',
65
- [buttonVars.disabled.border]: cssVar(base.frenchVanilla100, 'rgba(255,255,255,1)'),
66
- [buttonVars.disabled.label]: cssVar(base.frenchVanilla100, 'rgba(255,255,255,1)'),
67
- [buttonVars.disabled.icon]: cssVar(base.frenchVanilla100, 'rgba(255,255,255,1)'),
68
- }),
10
+ inverse: createStyles({ name: "i2tyz", styles: "--css-button-vars-default-background:transparent;--css-button-vars-default-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-default-label:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-default-icon:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-hover-background:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--css-button-vars-hover-border:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--css-button-vars-hover-label:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-hover-icon:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-focus-background:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-focus-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-focus-label:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-focus-icon:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-focus-boxShadowInner:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-focus-boxShadowOuter:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-active-background:var(--cnvs-base-palette-soap-400, rgba(224,227,230,1));--css-button-vars-active-border:var(--cnvs-base-palette-soap-400, rgba(224,227,230,1));--css-button-vars-active-label:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-active-icon:var(--cnvs-base-palette-black-pepper-500, rgba(31,31,31,1));--css-button-vars-disabled-background:transparent;--css-button-vars-disabled-border:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-disabled-label:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--css-button-vars-disabled-icon:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));" }),
69
11
  },
70
12
  });
71
13
  export const SecondaryButton = createComponent('button')({