@workday/canvas-kit-css 16.0.0-alpha.0463-next.0 → 16.0.0-alpha.0465-next.0

package/checkbox.css

@@ -119,10 +119,6 @@
 }
 
 
-.cnvs-checkbox-container.disabled {
-  opacity: var(--cnvs-sys-opacity-disabled);
-}
-
 .cnvs-checkbox-container.disabled [data-part="checkbox-container-label"] {
   cursor: default;
 }

package/combobox.css

@@ -1,12 +1,3 @@
-.cnvs-combobox-card {
-  box-sizing: border-box;
-}
-
-.cnvs-combobox-card :where([data-part="list-box-container"]) {
-  border-radius: var(--cnvs-sys-shape-xxl, var(--cnvs-sys-shape-x6, 1.5rem));
-}
-
-
 .cnvs-combobox-menu-list {
   box-sizing: border-box;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-css",
-  "version": "16.0.0-alpha.0463-next.0",
+  "version": "16.0.0-alpha.0465-next.0",
   "type": "module",
   "description": "The parent module that contains all Workday Canvas Kit CSS components",
   "author": "Workday, Inc. (https://www.workday.com)",
@@ -26,5 +26,5 @@
     "components",
     "workday"
   ],
-  "gitHead": "f21d7cc4d8f56e8a7ffffbb5881aa903f852c025"
+  "gitHead": "02dd284d77ccf92991d5526190f453d442ccebcc"
 }

package/popup.css

@@ -10,6 +10,41 @@
 }
 
 
+.cnvs-popup-button-group {
+  box-sizing: border-box;
+  display: flex;
+  gap: var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));
+}
+
+@media screen and (max-width: 768px) {
+.cnvs-popup-button-group {
+  flex-direction: column;
+}
+
+
+}
+
+
+.cnvs-popup-button-group.position-start {
+  justify-content: flex-start;
+}
+
+
+.cnvs-popup-button-group.position-center {
+  justify-content: center;
+}
+
+
+.cnvs-popup-button-group.position-end {
+  justify-content: flex-end;
+}
+
+
+.cnvs-popup-button-group.grow button {
+  width: 100%;
+}
+
+
 @keyframes animation-29kkhp {
   0% {
     opacity: 1;
@@ -52,6 +87,7 @@
 @media screen and (max-width: 768px) {
 .cnvs-popup-card {
   transform-origin: bottom center;
+  padding: var(--cnvs-sys-padding-lg, var(--cnvs-sys-space-x5, 1.25rem));
 }
 
 

package/toast.css

@@ -3,22 +3,22 @@
   align-items: flex-start;
   flex-direction: column;
   justify-content: center;
-  padding-block: var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));
   flex-grow: 1;
-  gap: var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));
+  gap: 0;
 }
 
 
 .cnvs-toast-close-icon {
   box-sizing: border-box;
-  position: relative;
+  position: absolute;
+  inset-block-start: var(--cnvs-base-size-50, 0.25rem);
+  inset-inline-end: var(--cnvs-base-size-50, 0.25rem);
 }
 
 
 .cnvs-toast-icon {
   box-sizing: border-box;
   align-self: start;
-  margin: var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem)) var(--cnvs-base-size-150, 0.75rem);
 }
 
 
@@ -34,8 +34,20 @@
   display: flex;
   flex-direction: row;
   width: 22.5rem;
-  padding: 0;
-  gap: var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));
+  padding-block: var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));
+  padding-inline: var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem)) var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6, 1.5rem));
+  gap: var(--cnvs-base-size-150, 0.75rem);
   border-radius: var(--cnvs-sys-shape-xl, var(--cnvs-sys-shape-x4, 1rem));
+  border: 0.0625rem solid var(--cnvs-sys-color-border-default);
+  background-color: var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));
+  box-shadow: var(--cnvs-sys-depth-3);
+}
+
+@media (forced-colors: active) {
+.cnvs-toast {
+  outline: 0.0625rem solid CanvasText;
+}
+
+
 }
 

package/tooltip.css

@@ -13,34 +13,34 @@
 
 .cnvs-tooltip-container {
   box-sizing: border-box;
-  font-family: var(--cnvs-sys-font-family-default);
-  font-weight: var(--cnvs-sys-font-weight-normal);
-  font-size: var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem));
-  line-height: var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem));
-  letter-spacing: var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium));
+  font-family: var(--cnvs-sys-font-family-default, "Roboto");
+  font-weight: var(--cnvs-sys-font-weight-normal, 400);
+  line-height: var(--cnvs-sys-line-height-subtext-lg, 1.25rem);
+  font-size: var(--cnvs-sys-font-size-subtext-lg, 0.875rem);
+  letter-spacing: var(--cnvs-sys-letter-spacing-subtext-lg, 0.015rem);
   display: inline-flex;
   position: relative;
-  padding: var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));
-  color: var(--cnvs-sys-color-fg-inverse);
+  padding: 0.375rem var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));
+  color: var(--cnvs-sys-color-fg-default);
   animation-name: animation-3s4los;
   animation-duration: 150ms;
   animation-timing-function: ease-out;
   transform-origin: var(--cnvs-tooltip-container-tooltip-transform-origin-vertical) var(--cnvs-tooltip-container-tooltip-transform-origin-horizontal);
+  margin: var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));
 }
 
 .cnvs-tooltip-container a {
-  color: var(--cnvs-sys-color-fg-inverse);
+  color: var(--cnvs-sys-color-fg-default);
   text-decoration: underline;
 }
 
 .cnvs-tooltip-container:before {
   content: "";
-  border-radius: var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));
-  outline: 0.0625rem solid transparent;
-  outline-offset: -0.0625rem;
+  border-radius: var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));
+  border: 0.0625rem solid var(--cnvs-sys-color-border-default);
   z-index: -1;
-  margin: var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));
-  background-color: var(--cnvs-sys-color-surface-contrast-default, var(--cnvs-sys-color-bg-contrast-default, oklch(0.0969 0 0 / 0.84)));
+  margin: 0;
+  background-color: var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));
   position: absolute;
   top: 0;
   left: 0;
@@ -70,12 +70,16 @@
   bottom: calc(var(--cnvs-base-size-50, 0.25rem) * -1);
 }
 
+@media (forced-colors: active) {
+.cnvs-tooltip-container {
+  outline: 0.0625rem solid CanvasText;
+}
+
 
-.cnvs-tooltip-container.element-has-focus {
-  padding: calc(var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem)) - calc(var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem)) / 2));
 }
 
-.cnvs-tooltip-container.element-has-focus:before {
-  margin: var(--cnvs-base-size-75, 0.375rem);
+
+.cnvs-tooltip-container.element-has-focus {
+  margin: 0.375rem;
 }