@workday/canvas-kit-labs-css 15.0.0-alpha.1303-next.0 → 15.0.0

package/ai-ingress-button.css

@@ -1,9 +1,9 @@
 .cnvs-labs-a-i-ingress-button {
   box-sizing: border-box;
-  --cnvs-button-background: 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));
+  --cnvs-button-background: var(--cnvs-sys-color-accent-ai, var(--cnvs-sys-color-bg-ai-stronger, oklch(0.2452 0.0752 254.55 / 1)));
+  border-radius: var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));
+  height: calc(var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem)) + var(--cnvs-base-size-50, 0.25rem));
+  width: calc(var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem)) + var(--cnvs-base-size-50, 0.25rem));
   transition: box-shadow 300ms ease-out,background 300ms ease-out;
 }
 
@@ -17,23 +17,23 @@
 }
 
 .cnvs-labs-a-i-ingress-button:is(:hover, .hover):not(:disabled, .disabled) .wd-icon-ai-ingress-button linearGradient>stop:first-child {
-  stop-color: var(--cnvs-base-palette-red-200);
+  stop-color: var(--cnvs-base-palette-red-200, oklch(0.8339 0.092 28.19 / 1));
 }
 
 .cnvs-labs-a-i-ingress-button:is(:hover, .hover):not(:disabled, .disabled) .wd-icon-ai-ingress-button linearGradient>stop:nth-child(2) {
-  stop-color: var(--cnvs-base-palette-orange-200);
+  stop-color: var(--cnvs-base-palette-orange-200, oklch(0.8606 0.1002 65.34 / 1));
 }
 
 .cnvs-labs-a-i-ingress-button:is(:hover, .hover):not(:disabled, .disabled) .wd-icon-ai-ingress-button linearGradient>stop:nth-child(3) {
-  stop-color: var(--cnvs-base-palette-orange-200);
+  stop-color: var(--cnvs-base-palette-orange-200, oklch(0.8606 0.1002 65.34 / 1));
 }
 
 .cnvs-labs-a-i-ingress-button:is(:hover, .hover):not(:disabled, .disabled) .wd-icon-ai-ingress-button linearGradient>stop:nth-child(4) {
-  stop-color: var(--cnvs-base-palette-amber-200);
+  stop-color: var(--cnvs-base-palette-amber-200, oklch(0.9191 0.1547 99.7 / 1));
 }
 
 .cnvs-labs-a-i-ingress-button:is(:hover, .hover):not(:disabled, .disabled) .wd-icon-ai-ingress-button linearGradient>stop:nth-child(5) {
-  stop-color: var(--cnvs-base-palette-amber-300);
+  stop-color: var(--cnvs-base-palette-amber-300, oklch(0.8432 0.1713 85.24 / 1));
 }
 
 .cnvs-labs-a-i-ingress-button:disabled, .cnvs-labs-a-i-ingress-button:disabled:active, .cnvs-labs-a-i-ingress-button.disabled {
@@ -41,7 +41,7 @@
 }
 
 .cnvs-labs-a-i-ingress-button: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));
+  box-shadow: 0 0 0 0px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)),0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));
 }
 
 
@@ -59,35 +59,35 @@
 }
 
 .cnvs-labs-a-i-ingress-button.variant-inverse:is(:hover, .hover):not(:disabled, .disabled) .wd-icon-ai-ingress-button linearGradient>stop:first-child {
-  stop-color: var(--cnvs-base-palette-red-200);
+  stop-color: var(--cnvs-base-palette-red-200, oklch(0.8339 0.092 28.19 / 1));
 }
 
 .cnvs-labs-a-i-ingress-button.variant-inverse:is(:hover, .hover):not(:disabled, .disabled) .wd-icon-ai-ingress-button linearGradient>stop:nth-child(2) {
-  stop-color: var(--cnvs-base-palette-orange-200);
+  stop-color: var(--cnvs-base-palette-orange-200, oklch(0.8606 0.1002 65.34 / 1));
 }
 
 .cnvs-labs-a-i-ingress-button.variant-inverse:is(:hover, .hover):not(:disabled, .disabled) .wd-icon-ai-ingress-button linearGradient>stop:nth-child(3) {
-  stop-color: var(--cnvs-base-palette-orange-200);
+  stop-color: var(--cnvs-base-palette-orange-200, oklch(0.8606 0.1002 65.34 / 1));
 }
 
 .cnvs-labs-a-i-ingress-button.variant-inverse:is(:hover, .hover):not(:disabled, .disabled) .wd-icon-ai-ingress-button linearGradient>stop:nth-child(4) {
-  stop-color: var(--cnvs-base-palette-amber-200);
+  stop-color: var(--cnvs-base-palette-amber-200, oklch(0.9191 0.1547 99.7 / 1));
 }
 
 .cnvs-labs-a-i-ingress-button.variant-inverse:is(:hover, .hover):not(:disabled, .disabled) .wd-icon-ai-ingress-button linearGradient>stop:nth-child(5) {
-  stop-color: var(--cnvs-base-palette-amber-300);
+  stop-color: var(--cnvs-base-palette-amber-300, oklch(0.8432 0.1713 85.24 / 1));
 }
 
 .cnvs-labs-a-i-ingress-button.variant-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: 2px solid var(--cnvs-sys-color-border-ai);
+  box-shadow: 0 0 0 0px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)),0 0 0 2px var(--cnvs-sys-color-fg-inverse);
+  border: 2px solid var(--cnvs-sys-color-accent-ai, var(--cnvs-sys-color-bg-ai-stronger, oklch(0.2452 0.0752 254.55 / 1)));
 }
 
 
 .cnvs-labs-a-i-ingress-button.toggled {
   --cnvs-button-background: 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);
+  box-shadow: 0px 0px 4.9px 0px var(--cnvs-base-palette-magenta-200, oklch(0.887 0.1029 327.44 / 1)),0px 0px 0.98px 0px var(--cnvs-base-palette-amber-100, oklch(0.9567 0.0948 100.22 / 1)),0px 0px 1.96px 0px var(--cnvs-base-palette-amber-300, oklch(0.8432 0.1713 85.24 / 1)),0px 0px 2.94px 0px var(--cnvs-base-palette-amber-300, oklch(0.8432 0.1713 85.24 / 1)),0px 0px 4.9px 0px var(--cnvs-base-palette-orange-400, oklch(0.7261 0.1852 52.58 / 1)),0px 0px 7.36px 0px var(--cnvs-base-palette-coral-500, oklch(0.6779 0.2096 40.36 / 1)),0px 0px 9.81px 0px var(--cnvs-base-palette-magenta-200, oklch(0.887 0.1029 327.44 / 1)),0px 0px 12.26px 0px rgba(255, 194, 253, 0.50);
 }
 
 .cnvs-labs-a-i-ingress-button.toggled .wd-icon-ai-ingress-button .wd-icon-fill {
@@ -105,8 +105,8 @@
 }
 
 .cnvs-labs-a-i-ingress-button.toggled: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);
+  box-shadow: 0 0 0 2px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)),0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));
+  border: 1px solid var(--cnvs-sys-color-border-strong, var(--cnvs-sys-color-border-container, oklch(0.2442 0.0693 257.66 / 0.21)));
 }
 
 
@@ -116,7 +116,7 @@
 
 
 .cnvs-labs-a-i-ingress-button.toggled.variant-inverse {
-  --cnvs-button-background: var(--cnvs-sys-color-bg-ai-strongest);
+  --cnvs-button-background: var(--cnvs-sys-color-accent-ai, var(--cnvs-sys-color-bg-ai-stronger, oklch(0.2452 0.0752 254.55 / 1)));
 }
 
 .cnvs-labs-a-i-ingress-button.toggled.variant-inverse .wd-icon-ai-ingress-button .wd-icon-fill {
@@ -129,7 +129,7 @@
 }
 
 .cnvs-labs-a-i-ingress-button.toggled.variant-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);
+  box-shadow: 0 0 0 0px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)),0 0 0 2px var(--cnvs-sys-color-fg-inverse);
   border: none;
 }
 

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@workday/canvas-kit-labs-css",
-  "version": "15.0.0-alpha.1303-next.0",
+  "version": "15.0.0",
+  "type": "module",
   "description": "The parent module that contains all Workday Canvas Kit Labs CSS components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
   "sideEffects": false,
   "repository": {
     "type": "git",
-    "url": "https://github.com/workday/canvas-kit.git",
+    "url": "https://github.com/Workday/canvas-kit.git",
     "directory": "modules/labs-css"
   },
   "files": [
@@ -25,5 +26,5 @@
     "components",
     "workday"
   ],
-  "gitHead": "4dc1e2083d2767fd402c2d014bedd8b35a014490"
+  "gitHead": "d7401bd7648fa6dbe66fdf3400e05770b77b030b"
 }

package/search-form.css

@@ -1,263 +0,0 @@
-.cnvs-labs-search-form {
-  box-sizing: border-box;
-  position: relative;
-  flex-grow: 1;
-  display: flex;
-  align-items: center;
-  margin-inline-start: var(--cnvs-sys-space-x6);
-  min-width: var(--cnvs-labs-search-form-min-width, 7.5rem);
-  max-width: var(--cnvs-labs-search-form-max-width, 30rem);
-}
-
-.cnvs-labs-search-form [data-part="search-form-container"] {
-  position: relative;
-  display: flex;
-  align-items: center;
-  width: 100%;
-  text-align: left;
-  min-height: var(--cnvs-labs-search-form-height, var(--cnvs-sys-space-x10));
-}
-
-.cnvs-labs-search-form [data-part="search-form-combobox"] {
-  width: 100%;
-}
-
-.cnvs-labs-search-form [data-part="search-form-close-button"] {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  margin: auto var(--cnvs-sys-space-x2);
-  z-index: 3;
-  display: none;
-}
-
-.cnvs-labs-search-form [data-part="search-form-field"] {
-  width: 100%;
-  height: var(--cnvs-labs-search-form-height, var(--cnvs-sys-space-x10));
-  max-width: var(--cnvs-labs-search-form-max-width, 30rem);
-  margin-bottom: 0;
-  display: inline-block;
-}
-
-.cnvs-labs-search-form [data-part="search-form-field"] >div {
-  display: block;
-}
-
-.cnvs-labs-search-form [data-part="search-form-submit-search-icon"], .cnvs-labs-search-form [data-part="search-form-open-search-icon"] {
-  position: absolute;
-  margin: auto var(--cnvs-sys-space-x2);
-  top: 0;
-  bottom: 0;
-  left: 0;
-  padding: 0;
-  z-index: 3;
-}
-
-.cnvs-labs-search-form [data-part="search-form-submit-search-icon"] :dir(rtl), .cnvs-labs-search-form [data-part="search-form-open-search-icon"] :dir(rtl) {
-  right: 0;
-  left: auto;
-}
-
-.cnvs-labs-search-form [data-part="search-form-input"] {
-  max-width: var(--cnvs-labs-search-form-max-width);
-  min-width: var(--cnvs-labs-search-form-min-width);
-  padding-inline-start: calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x2));
-  padding-inline-end: var(--cnvs-sys-space-x10);
-  background-color: var(--cnvs-labs-search-form-background, var(--cnvs-sys-color-bg-alt-soft));
-  height: var(--cnvs-labs-search-form-height, var(--cnvs-sys-space-x10));
-  font-size: var(--cnvs-sys-font-size-subtext-large);
-  box-shadow: var(--cnvs-labs-search-form-box-shadow);
-  color: var(--cnvs-labs-search-form-color, var(--cnvs-sys-color-text-default));
-  border: none;
-  -webkit-appearance: none;
-  transition: background-color 120ms,color 120ms,box-shadow 200ms,border-color 200ms;
-  z-index: 2;
-  width: 100%;
-}
-
-.cnvs-labs-search-form [data-part="search-form-input"]::-webkit-search-cancel-button {
-  display: none;
-}
-
-.cnvs-labs-search-form [data-part="search-form-input"]::placeholder {
-  color: var(--cnvs-labs-search-form-placeholder-color, var(--cnvs-sys-color-text-hint));
-}
-
-.cnvs-labs-search-form [data-part="search-form-input"]:placeholder-shown {
-  text-overflow: ellipsis;
-}
-
-.cnvs-labs-search-form [data-part="search-form-input"]:hover {
-  background-color: var(--cnvs-labs-search-form-background-hover, var(--cnvs-labs-search-form-background, var(--cnvs-sys-color-bg-alt-default)));
-}
-
-.cnvs-labs-search-form [data-part="search-form-input"]:is(:focus-visible, .focus):where(:not([disabled])) {
-  background: var(--cnvs-labs-search-form-background-focus, var(--cnvs-sys-color-bg-alt-soft));
-  color: var(--cnvs-labs-search-form-color-focus);
-  border-color: var(--cnvs-brand-common-focus-outline);
-  outline: 0.125rem solid transparent;
-  box-shadow: var(--cnvs-labs-search-form-box-shadow-focus, 0 0 0 0px var(--cnvs-sys-color-bg-default), 0 0 0 2px var(--cnvs-brand-common-focus-outline));
-}
-
-.cnvs-labs-search-form [data-part="search-form-input"]:is(:focus-visible, .focus):where(:not([disabled])) ::placeholder {
-  color: var(--cnvs-labs-search-form-placeholder-color-focus);
-}
-
-
-.cnvs-labs-search-form.is-hidden-submit-search-icon [data-part="search-form-submit-search-icon"] {
-  display: none;
-}
-
-
-.cnvs-labs-search-form.is-hidden-open-seach-icon [data-part="search-form-open-search-icon"] {
-  display: none;
-}
-
-
-.cnvs-labs-search-form.is-collapsed {
-  top: 0;
-  right: 0;
-  left: 0;
-  bottom: 0;
-  margin: 0;
-  position: relative;
-  background-color: var(--cnvs-sys-color-bg-transparent-default);
-  transition: background-color 120ms;
-  max-width: calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x2));
-  min-width: calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x3));
-  overflow: hidden;
-  z-index: 1;
-}
-
-.cnvs-labs-search-form.is-collapsed [data-part="search-form-field"] {
-  display: none;
-  max-width: 100%;
-}
-
-.cnvs-labs-search-form.is-collapsed [data-part="search-form-submit-search-icon"], .cnvs-labs-search-form.is-collapsed [data-part="search-form-open-search-icon"] {
-  margin: auto var(--cnvs-sys-space-x2);
-}
-
-.cnvs-labs-search-form.is-collapsed [data-part="search-form-input"] {
-  font-size: 20px;
-  padding-inline-start: calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x4));
-  padding-inline-end: calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x4));
-  max-width: none;
-  min-width: 0;
-  background-color: var(--cnvs-sys-color-bg-transparent-default);
-  height: var(--cnvs-labs-search-form-height, var(--cnvs-sys-space-x10));
-}
-
-
-.cnvs-labs-search-form.is-collapsed-false [data-part="search-form-field"] {
-  display: inline-block;
-}
-
-
-.cnvs-labs-search-form.right-align {
-  text-align: right;
-}
-
-
-
-
-.cnvs-labs-search-form.grow {
-  max-width: 100%;
-}
-
-.cnvs-labs-search-form.grow [data-part="search-form-field"], .cnvs-labs-search-form.grow [data-part="search-form-input"] {
-  max-width: 100%;
-}
-
-
-.cnvs-labs-search-form.search-theme-light [data-part="search-form-input"] {
-  background: var(--cnvs-sys-color-bg-alt-soft);
-  color: var(--cnvs-sys-color-text-default);
-}
-
-.cnvs-labs-search-form.search-theme-light [data-part="search-form-input"] ::placeholder {
-  color: var(--cnvs-sys-color-text-hint);
-}
-
-.cnvs-labs-search-form.search-theme-light [data-part="search-form-input"]:hover {
-  background: var(--cnvs-sys-color-bg-alt-default);
-}
-
-.cnvs-labs-search-form.search-theme-light [data-part="search-form-input"]:is(:focus-visible, .cnvs-labs-search-form.search-theme-light [data-part="search-form-input"].focus):where(:not([disabled])) {
-  background: var(--cnvs-sys-color-bg-alt-soft);
-  box-shadow: 0 0 0 0px var(--cnvs-sys-color-border-inverse),0 0 0 2px var(--cnvs-brand-common-focus-outline);
-}
-
-
-.cnvs-labs-search-form.search-theme-dark [data-part="search-form-input"] {
-  background-color: rgba(0, 0, 0, 0.2);
-  color: var(--cnvs-sys-color-text-inverse);
-  box-shadow: none;
-}
-
-.cnvs-labs-search-form.search-theme-dark [data-part="search-form-input"] ::placeholder {
-  color: var(--cnvs-sys-color-text-inverse);
-}
-
-.cnvs-labs-search-form.search-theme-dark [data-part="search-form-input"] :hover {
-  background: rgba(0, 0, 0, 0.2);
-}
-
-.cnvs-labs-search-form.search-theme-dark [data-part="search-form-input"]:is(:focus-visible, .cnvs-labs-search-form.search-theme-dark [data-part="search-form-input"].focus):where(:not([disabled])) {
-  background: var(--cnvs-sys-color-bg-default);
-  color: var(--cnvs-sys-color-text-default);
-  box-shadow: none;
-}
-
-.cnvs-labs-search-form.search-theme-dark [data-part="search-form-input"]:is(:focus-visible, .cnvs-labs-search-form.search-theme-dark [data-part="search-form-input"].focus):where(:not([disabled])) ::placeholder {
-  color: var(--cnvs-sys-color-text-hint);
-}
-
-
-.cnvs-labs-search-form.search-theme-transparent [data-part="search-form-input"] {
-  background: var(--cnvs-sys-color-bg-transparent-default);
-  background-focus: var(--cnvs-sys-color-bg-transparent-default);
-  color: var(--cnvs-sys-color-text-default);
-  color-focus: var(--cnvs-sys-color-text-default);
-  placeholder-color: var(--cnvs-sys-color-text-hint);
-  placeholder-color-focus: var(--cnvs-sys-color-text-hint);
-  box-shadow: none;
-  box-shadow-focus: none;
-}
-
-
-.cnvs-labs-search-form.show-form-true.is-collapsed-true {
-  position: absolute;
-  background-color: var(--cnvs-sys-color-bg-default);
-  max-width: none;
-  overflow: visible;
-}
-
-.cnvs-labs-search-form.show-form-true.is-collapsed-true [data-part="search-form-close-button"] {
-  display: inline-block;
-}
-
-.cnvs-labs-search-form.show-form-true.is-collapsed-true [data-part="search-form-field"] {
-  display: inline-block;
-}
-
-.cnvs-labs-search-form.show-form-true.is-collapsed-true [data-part="search-form-input"] {
-  box-shadow: none;
-  background: var(--cnvs-sys-color-bg-transparent-default);
-}
-
-.cnvs-labs-search-form.show-form-true.is-collapsed-true [data-part="search-form-input"] :hover {
-  background: var(--cnvs-sys-color-bg-transparent-default);
-}
-
-.cnvs-labs-search-form.show-form-true.is-collapsed-true [data-part="search-form-input"]:is(:focus-visible, .cnvs-labs-search-form.show-form-true.is-collapsed-true [data-part="search-form-input"].focus):where(:not([disabled])) {
-  background: var(--cnvs-sys-color-bg-transparent-default);
-  box-shadow: none;
-}
-
-
-.cnvs-labs-search-form.is-collapsed-true.show-form-true [data-part="search-form-field"] {
-  display: inline-block;
-}
-