@workday/canvas-kit-labs-react 14.1.19 → 15.0.0-alpha.0008-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 (5) hide show
  1. package/dist/commonjs/ai-ingress-button/lib/AIIngressButton.d.ts +29 -29
  2. package/dist/commonjs/ai-ingress-button/lib/AIIngressButton.js +4 -4
  3. package/dist/es6/ai-ingress-button/lib/AIIngressButton.d.ts +29 -29
  4. package/dist/es6/ai-ingress-button/lib/AIIngressButton.js +4 -4
  5. package/package.json +5 -5
package/dist/commonjs/ai-ingress-button/lib/AIIngressButton.d.ts CHANGED
@@ -135,45 +135,45 @@ export declare const AIIngressButtonStencil: import("@workday/canvas-kit-styling
135
135
  size: {
136
136
  large: {
137
137
  fontWeight: "--cnvs-sys-font-weight-bold";
138
- height: string;
139
- paddingInline: "--cnvs-sys-space-x8";
140
- minWidth: string;
138
+ height: "var(--cnvs-sys-size-xl, 3rem)";
139
+ paddingInline: "var(--cnvs-sys-padding-xxl, var(--cnvs-sys-space-x8))";
140
+ minWidth: "--cnvs-base-size-1400";
141
141
  fontFamily: "--cnvs-sys-font-family-default";
142
- lineHeight: "--cnvs-sys-line-height-body-small";
143
- fontSize: "--cnvs-sys-font-size-body-small";
144
- letterSpacing: "--cnvs-base-letter-spacing-200";
142
+ lineHeight: "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small))";
143
+ fontSize: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small))";
144
+ letterSpacing: "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-base-letter-spacing-200))";
145
145
  };
146
146
  medium: {
147
147
  fontWeight: "--cnvs-sys-font-weight-bold";
148
- minWidth: string;
149
- paddingInline: "--cnvs-sys-space-x6";
150
- height: "--cnvs-sys-space-x10";
151
- fontFamily: "--cnvs-sys-font-family-default";
152
- lineHeight: "--cnvs-sys-line-height-subtext-large";
153
- fontSize: "--cnvs-sys-font-size-subtext-large";
154
- letterSpacing: "--cnvs-base-letter-spacing-150";
148
+ minWidth: "--cnvs-base-size-1200";
149
+ paddingInline: "var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6))";
150
+ height: "var(--cnvs-sys-size-lg, var(--cnvs-sys-space-x10))";
151
+ fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
152
+ lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large))";
153
+ fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large))";
154
+ letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-50))";
155
155
  };
156
156
  small: {
157
157
  fontWeight: "--cnvs-sys-font-weight-bold";
158
- height: "--cnvs-sys-space-x8";
159
- minWidth: "--cnvs-sys-space-x20";
160
- paddingInline: "--cnvs-sys-space-x4";
161
- gap: "--cnvs-sys-space-x1";
162
- fontFamily: "--cnvs-sys-font-family-default";
163
- lineHeight: "--cnvs-sys-line-height-subtext-large";
164
- fontSize: "--cnvs-sys-font-size-subtext-large";
165
- letterSpacing: "--cnvs-base-letter-spacing-150";
158
+ height: "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x8))";
159
+ minWidth: "--cnvs-base-size-1000";
160
+ paddingInline: "var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4))";
161
+ gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1))";
162
+ fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
163
+ lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large))";
164
+ fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large))";
165
+ letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-50))";
166
166
  };
167
167
  extraSmall: {
168
168
  fontWeight: "--cnvs-sys-font-weight-bold";
169
- height: "--cnvs-sys-space-x6";
169
+ height: "var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x6))";
170
170
  minWidth: string;
171
- paddingInline: "--cnvs-sys-space-x3";
172
- gap: "--cnvs-sys-space-x1";
173
- fontFamily: "--cnvs-sys-font-family-default";
174
- lineHeight: "--cnvs-sys-line-height-subtext-medium";
175
- fontSize: "--cnvs-sys-font-size-subtext-medium";
176
- letterSpacing: "--cnvs-base-letter-spacing-100";
171
+ paddingInline: "var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3))";
172
+ gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1))";
173
+ fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
174
+ lineHeight: "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium))";
175
+ fontSize: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium))";
176
+ letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-base-letter-spacing-100))";
177
177
  };
178
178
  };
179
179
  grow: {
@@ -184,7 +184,7 @@ export declare const AIIngressButtonStencil: import("@workday/canvas-kit-styling
184
184
  };
185
185
  iconPosition: {
186
186
  only: {
187
- padding: "--cnvs-sys-space-zero";
187
+ padding: "var(--cnvs-sys-padding-none, var(--cnvs-sys-space-zero))";
188
188
  };
189
189
  start: {};
190
190
  end: {};
package/dist/commonjs/ai-ingress-button/lib/AIIngressButton.js CHANGED
@@ -26,20 +26,20 @@ const glowHappyHour = canvas_tokens_web_1.base.orange400; //'#FD7E00';
26
26
  const glowThumbtack = canvas_tokens_web_1.base.coral500; //'#FC5B05';
27
27
  exports.AIIngressButtonStencil = (0, canvas_kit_styling_1.createStencil)({
28
28
  extends: button_1.buttonStencil,
29
- base: { name: "1n6m4e", styles: "box-sizing:border-box;--background-button-85bf0e:var(--cnvs-sys-color-bg-ai-strongest);border-radius:var(--cnvs-sys-shape-round);height:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x1));width:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x1));transition:box-shadow 300ms ease-out, background 300ms ease-out;.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-inverse);}}&:is(:hover, .hover):not(:disabled, .disabled){.wd-icon-ai-ingress-button{linearGradient > stop:first-child{stop-color:var(--cnvs-base-palette-red-200);}linearGradient > stop:nth-child(2){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(3){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(4){stop-color:var(--cnvs-base-palette-amber-200);}linearGradient > stop:nth-child(5){stop-color:var(--cnvs-base-palette-amber-300);}}}&:disabled, &:disabled:active, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}" },
29
+ base: { name: "1n6m4e", styles: "box-sizing:border-box;--background-button-f6d2bd:var(--cnvs-sys-color-bg-ai-strongest);border-radius:var(--cnvs-sys-shape-round);height:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x1));width:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x1));transition:box-shadow 300ms ease-out, background 300ms ease-out;.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-inverse);}}&:is(:hover, .hover):not(:disabled, .disabled){.wd-icon-ai-ingress-button{linearGradient > stop:first-child{stop-color:var(--cnvs-base-palette-red-200);}linearGradient > stop:nth-child(2){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(3){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(4){stop-color:var(--cnvs-base-palette-amber-200);}linearGradient > stop:nth-child(5){stop-color:var(--cnvs-base-palette-amber-300);}}}&:disabled, &:disabled:active, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}" },
30
30
  modifiers: {
31
31
  variant: {
32
- inverse: { name: "xod6j", styles: "--background-button-85bf0e:var(--cnvs-sys-color-bg-default);.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}}&:is(:hover, .hover):not(:disabled, .disabled){.wd-icon-ai-ingress-button{linearGradient > stop:first-child{stop-color:var(--cnvs-base-palette-red-200);}linearGradient > stop:nth-child(2){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(3){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(4){stop-color:var(--cnvs-base-palette-amber-200);}linearGradient > stop:nth-child(5){stop-color:var(--cnvs-base-palette-amber-300);}}}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-sys-color-fg-inverse);border:2px solid var(--cnvs-sys-color-border-ai) ;}" }
32
+ inverse: { name: "xod6j", styles: "--background-button-f6d2bd:var(--cnvs-sys-color-bg-default);.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}}&:is(:hover, .hover):not(:disabled, .disabled){.wd-icon-ai-ingress-button{linearGradient > stop:first-child{stop-color:var(--cnvs-base-palette-red-200);}linearGradient > stop:nth-child(2){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(3){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(4){stop-color:var(--cnvs-base-palette-amber-200);}linearGradient > stop:nth-child(5){stop-color:var(--cnvs-base-palette-amber-300);}}}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-sys-color-fg-inverse);border:2px solid var(--cnvs-sys-color-border-ai) ;}" }
33
33
  },
34
34
  toggled: {
35
- true: { name: "3b7vx7", styles: "--background-button-85bf0e:var(--cnvs-sys-color-bg-default);transition:box-shadow 300ms ease-out, background 300ms ease-out;box-shadow:0px 0px 4.9px 0px var(--cnvs-base-palette-magenta-200), 0px 0px 0.98px 0px var(--cnvs-base-palette-amber-100), 0px 0px 1.96px 0px var(--cnvs-base-palette-amber-300), 0px 0px 2.94px 0px var(--cnvs-base-palette-amber-300), 0px 0px 4.9px 0px var(--cnvs-base-palette-orange-400), 0px 0px 7.36px 0px var(--cnvs-base-palette-coral-500), 0px 0px 9.81px 0px var(--cnvs-base-palette-magenta-200), 0px 0px 12.26px 0px rgba(255, 194, 253, 0.50);.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));border:1px solid var(--cnvs-sys-color-border-container) ;}" },
35
+ true: { name: "3b7vx7", styles: "--background-button-f6d2bd:var(--cnvs-sys-color-bg-default);transition:box-shadow 300ms ease-out, background 300ms ease-out;box-shadow:0px 0px 4.9px 0px var(--cnvs-base-palette-magenta-200), 0px 0px 0.98px 0px var(--cnvs-base-palette-amber-100), 0px 0px 1.96px 0px var(--cnvs-base-palette-amber-300), 0px 0px 2.94px 0px var(--cnvs-base-palette-amber-300), 0px 0px 4.9px 0px var(--cnvs-base-palette-orange-400), 0px 0px 7.36px 0px var(--cnvs-base-palette-coral-500), 0px 0px 9.81px 0px var(--cnvs-base-palette-magenta-200), 0px 0px 12.26px 0px rgba(255, 194, 253, 0.50);.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));border:1px solid var(--cnvs-sys-color-border-container) ;}" },
36
36
  false: { name: "2oqj0f", styles: "transition:box-shadow 300ms ease-out, background 300ms ease-out;" }
37
37
  }
38
38
  },
39
39
  compound: [
40
40
  {
41
41
  modifiers: { toggled: true, variant: 'inverse' },
42
- styles: { name: "karj8", styles: "--background-button-85bf0e:var(--cnvs-sys-color-bg-ai-strongest);.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-inverse);}}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-sys-color-fg-inverse);border:none;}" }
42
+ styles: { name: "karj8", styles: "--background-button-f6d2bd:var(--cnvs-sys-color-bg-ai-strongest);.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-inverse);}}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-sys-color-fg-inverse);border:none;}" }
43
43
  }
44
44
  ]
45
45
  }, "a-i-ingress-button-ea1953");
package/dist/es6/ai-ingress-button/lib/AIIngressButton.d.ts CHANGED
@@ -135,45 +135,45 @@ export declare const AIIngressButtonStencil: import("@workday/canvas-kit-styling
135
135
  size: {
136
136
  large: {
137
137
  fontWeight: "--cnvs-sys-font-weight-bold";
138
- height: string;
139
- paddingInline: "--cnvs-sys-space-x8";
140
- minWidth: string;
138
+ height: "var(--cnvs-sys-size-xl, 3rem)";
139
+ paddingInline: "var(--cnvs-sys-padding-xxl, var(--cnvs-sys-space-x8))";
140
+ minWidth: "--cnvs-base-size-1400";
141
141
  fontFamily: "--cnvs-sys-font-family-default";
142
- lineHeight: "--cnvs-sys-line-height-body-small";
143
- fontSize: "--cnvs-sys-font-size-body-small";
144
- letterSpacing: "--cnvs-base-letter-spacing-200";
142
+ lineHeight: "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small))";
143
+ fontSize: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small))";
144
+ letterSpacing: "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-base-letter-spacing-200))";
145
145
  };
146
146
  medium: {
147
147
  fontWeight: "--cnvs-sys-font-weight-bold";
148
- minWidth: string;
149
- paddingInline: "--cnvs-sys-space-x6";
150
- height: "--cnvs-sys-space-x10";
151
- fontFamily: "--cnvs-sys-font-family-default";
152
- lineHeight: "--cnvs-sys-line-height-subtext-large";
153
- fontSize: "--cnvs-sys-font-size-subtext-large";
154
- letterSpacing: "--cnvs-base-letter-spacing-150";
148
+ minWidth: "--cnvs-base-size-1200";
149
+ paddingInline: "var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6))";
150
+ height: "var(--cnvs-sys-size-lg, var(--cnvs-sys-space-x10))";
151
+ fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
152
+ lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large))";
153
+ fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large))";
154
+ letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-50))";
155
155
  };
156
156
  small: {
157
157
  fontWeight: "--cnvs-sys-font-weight-bold";
158
- height: "--cnvs-sys-space-x8";
159
- minWidth: "--cnvs-sys-space-x20";
160
- paddingInline: "--cnvs-sys-space-x4";
161
- gap: "--cnvs-sys-space-x1";
162
- fontFamily: "--cnvs-sys-font-family-default";
163
- lineHeight: "--cnvs-sys-line-height-subtext-large";
164
- fontSize: "--cnvs-sys-font-size-subtext-large";
165
- letterSpacing: "--cnvs-base-letter-spacing-150";
158
+ height: "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x8))";
159
+ minWidth: "--cnvs-base-size-1000";
160
+ paddingInline: "var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4))";
161
+ gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1))";
162
+ fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
163
+ lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large))";
164
+ fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large))";
165
+ letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-50))";
166
166
  };
167
167
  extraSmall: {
168
168
  fontWeight: "--cnvs-sys-font-weight-bold";
169
- height: "--cnvs-sys-space-x6";
169
+ height: "var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x6))";
170
170
  minWidth: string;
171
- paddingInline: "--cnvs-sys-space-x3";
172
- gap: "--cnvs-sys-space-x1";
173
- fontFamily: "--cnvs-sys-font-family-default";
174
- lineHeight: "--cnvs-sys-line-height-subtext-medium";
175
- fontSize: "--cnvs-sys-font-size-subtext-medium";
176
- letterSpacing: "--cnvs-base-letter-spacing-100";
171
+ paddingInline: "var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3))";
172
+ gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1))";
173
+ fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
174
+ lineHeight: "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium))";
175
+ fontSize: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium))";
176
+ letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-base-letter-spacing-100))";
177
177
  };
178
178
  };
179
179
  grow: {
@@ -184,7 +184,7 @@ export declare const AIIngressButtonStencil: import("@workday/canvas-kit-styling
184
184
  };
185
185
  iconPosition: {
186
186
  only: {
187
- padding: "--cnvs-sys-space-zero";
187
+ padding: "var(--cnvs-sys-padding-none, var(--cnvs-sys-space-zero))";
188
188
  };
189
189
  start: {};
190
190
  end: {};
package/dist/es6/ai-ingress-button/lib/AIIngressButton.js CHANGED
@@ -23,20 +23,20 @@ const glowHappyHour = base.orange400; //'#FD7E00';
23
23
  const glowThumbtack = base.coral500; //'#FC5B05';
24
24
  export const AIIngressButtonStencil = createStencil({
25
25
  extends: buttonStencil,
26
- base: { name: "1n6m4e", styles: "box-sizing:border-box;--background-button-85bf0e:var(--cnvs-sys-color-bg-ai-strongest);border-radius:var(--cnvs-sys-shape-round);height:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x1));width:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x1));transition:box-shadow 300ms ease-out, background 300ms ease-out;.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-inverse);}}&:is(:hover, .hover):not(:disabled, .disabled){.wd-icon-ai-ingress-button{linearGradient > stop:first-child{stop-color:var(--cnvs-base-palette-red-200);}linearGradient > stop:nth-child(2){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(3){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(4){stop-color:var(--cnvs-base-palette-amber-200);}linearGradient > stop:nth-child(5){stop-color:var(--cnvs-base-palette-amber-300);}}}&:disabled, &:disabled:active, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}" },
26
+ base: { name: "1n6m4e", styles: "box-sizing:border-box;--background-button-f6d2bd:var(--cnvs-sys-color-bg-ai-strongest);border-radius:var(--cnvs-sys-shape-round);height:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x1));width:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x1));transition:box-shadow 300ms ease-out, background 300ms ease-out;.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-inverse);}}&:is(:hover, .hover):not(:disabled, .disabled){.wd-icon-ai-ingress-button{linearGradient > stop:first-child{stop-color:var(--cnvs-base-palette-red-200);}linearGradient > stop:nth-child(2){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(3){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(4){stop-color:var(--cnvs-base-palette-amber-200);}linearGradient > stop:nth-child(5){stop-color:var(--cnvs-base-palette-amber-300);}}}&:disabled, &:disabled:active, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}" },
27
27
  modifiers: {
28
28
  variant: {
29
- inverse: { name: "xod6j", styles: "--background-button-85bf0e:var(--cnvs-sys-color-bg-default);.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}}&:is(:hover, .hover):not(:disabled, .disabled){.wd-icon-ai-ingress-button{linearGradient > stop:first-child{stop-color:var(--cnvs-base-palette-red-200);}linearGradient > stop:nth-child(2){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(3){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(4){stop-color:var(--cnvs-base-palette-amber-200);}linearGradient > stop:nth-child(5){stop-color:var(--cnvs-base-palette-amber-300);}}}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-sys-color-fg-inverse);border:2px solid var(--cnvs-sys-color-border-ai) ;}" }
29
+ inverse: { name: "xod6j", styles: "--background-button-f6d2bd:var(--cnvs-sys-color-bg-default);.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}}&:is(:hover, .hover):not(:disabled, .disabled){.wd-icon-ai-ingress-button{linearGradient > stop:first-child{stop-color:var(--cnvs-base-palette-red-200);}linearGradient > stop:nth-child(2){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(3){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(4){stop-color:var(--cnvs-base-palette-amber-200);}linearGradient > stop:nth-child(5){stop-color:var(--cnvs-base-palette-amber-300);}}}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-sys-color-fg-inverse);border:2px solid var(--cnvs-sys-color-border-ai) ;}" }
30
30
  },
31
31
  toggled: {
32
- true: { name: "3b7vx7", styles: "--background-button-85bf0e:var(--cnvs-sys-color-bg-default);transition:box-shadow 300ms ease-out, background 300ms ease-out;box-shadow:0px 0px 4.9px 0px var(--cnvs-base-palette-magenta-200), 0px 0px 0.98px 0px var(--cnvs-base-palette-amber-100), 0px 0px 1.96px 0px var(--cnvs-base-palette-amber-300), 0px 0px 2.94px 0px var(--cnvs-base-palette-amber-300), 0px 0px 4.9px 0px var(--cnvs-base-palette-orange-400), 0px 0px 7.36px 0px var(--cnvs-base-palette-coral-500), 0px 0px 9.81px 0px var(--cnvs-base-palette-magenta-200), 0px 0px 12.26px 0px rgba(255, 194, 253, 0.50);.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));border:1px solid var(--cnvs-sys-color-border-container) ;}" },
32
+ true: { name: "3b7vx7", styles: "--background-button-f6d2bd:var(--cnvs-sys-color-bg-default);transition:box-shadow 300ms ease-out, background 300ms ease-out;box-shadow:0px 0px 4.9px 0px var(--cnvs-base-palette-magenta-200), 0px 0px 0.98px 0px var(--cnvs-base-palette-amber-100), 0px 0px 1.96px 0px var(--cnvs-base-palette-amber-300), 0px 0px 2.94px 0px var(--cnvs-base-palette-amber-300), 0px 0px 4.9px 0px var(--cnvs-base-palette-orange-400), 0px 0px 7.36px 0px var(--cnvs-base-palette-coral-500), 0px 0px 9.81px 0px var(--cnvs-base-palette-magenta-200), 0px 0px 12.26px 0px rgba(255, 194, 253, 0.50);.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));border:1px solid var(--cnvs-sys-color-border-container) ;}" },
33
33
  false: { name: "2oqj0f", styles: "transition:box-shadow 300ms ease-out, background 300ms ease-out;" }
34
34
  }
35
35
  },
36
36
  compound: [
37
37
  {
38
38
  modifiers: { toggled: true, variant: 'inverse' },
39
- styles: { name: "karj8", styles: "--background-button-85bf0e:var(--cnvs-sys-color-bg-ai-strongest);.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-inverse);}}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-sys-color-fg-inverse);border:none;}" }
39
+ styles: { name: "karj8", styles: "--background-button-f6d2bd:var(--cnvs-sys-color-bg-ai-strongest);.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-inverse);}}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-sys-color-fg-inverse);border:none;}" }
40
40
  }
41
41
  ]
42
42
  }, "a-i-ingress-button-ea1953");
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-labs-react",
3
- "version": "14.1.19",
3
+ "version": "15.0.0-alpha.0008-next.0",
4
4
  "description": "Canvas Kit Labs is an incubator for new and experimental components. Since we have a rather rigorous process for getting components in at a production level, it can be valuable to make them available earlier while we continuously iterate on the API/functionality. The Labs modules allow us to do that as needed.",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "Apache-2.0",
@@ -48,10 +48,10 @@
48
48
  "dependencies": {
49
49
  "@emotion/react": "^11.7.1",
50
50
  "@emotion/styled": "^11.6.0",
51
- "@workday/canvas-kit-react": "^14.1.19",
52
- "@workday/canvas-kit-styling": "^14.1.19",
51
+ "@workday/canvas-kit-react": "^15.0.0-alpha.0008-next.0",
52
+ "@workday/canvas-kit-styling": "^15.0.0-alpha.0008-next.0",
53
53
  "@workday/canvas-system-icons-web": "^3.0.36",
54
- "@workday/canvas-tokens-web": "^3.1.1",
54
+ "@workday/canvas-tokens-web": "4.0.0-alpha.3",
55
55
  "@workday/design-assets-types": "^0.2.10",
56
56
  "chroma-js": "^2.2.0",
57
57
  "lodash.flatten": "^4.4.0",
@@ -60,5 +60,5 @@
60
60
  "devDependencies": {
61
61
  "@types/lodash.flatten": "^4.4.6"
62
62
  },
63
- "gitHead": "29a5672bb1d695563c5469d21223c15ba0321599"
63
+ "gitHead": "26a8bc06dba5ae759ca62ae8922aeaa7bba7015c"
64
64
  }