@workday/canvas-kit-css 16.0.0-alpha.0396-next.0 → 16.0.0-alpha.0424-next.0

package/avatar.css

@@ -20,29 +20,39 @@
   height: var(--cnvs-base-avatar-size, var(--cnvs-sys-size-lg, 3rem));
   min-width: var(--cnvs-base-avatar-size, var(--cnvs-sys-size-lg, 3rem));
   min-height: var(--cnvs-base-avatar-size, var(--cnvs-sys-size-lg, 3rem));
-  background-color: var(--cnvs-base-avatar-background-color, var(--cnvs-base-palette-blue-300, oklch(0.7933 0.1076 252.08 / 1)));
-  color: var(--cnvs-base-avatar-color, var(--cnvs-base-palette-blue-800, oklch(0.3908 0.128 256 / 1)));
+  background-color: var(--cnvs-base-avatar-background-color, var(--cnvs-base-palette-blue-600, oklch(0.5198 0.1782 256.11 / 1)));
+  color: var(--cnvs-base-avatar-color, var(--cnvs-sys-color-fg-inverse));
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   border: none;
+  outline: 0.0625rem solid transparent;
   font-family: var(--cnvs-sys-font-family-default);
   font-weight: var(--cnvs-sys-font-weight-normal);
   line-height: var(--cnvs-sys-line-height-body-md, var(--cnvs-sys-line-height-body-medium, 1.75rem));
   font-size: var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium, 1.125rem));
 }
 
+button .cnvs-base-avatar, a .cnvs-base-avatar, .cnvs-base-avatar:is(button, a) {
+  outline: none;
+}
+
+.cnvs-base-avatar:is(button, a):focus-visible, .cnvs-base-avatar:is(button, a).focus {
+  outline: 0.125rem solid transparent;
+  outline-offset: 0.125rem;
+}
+
 
 .cnvs-base-avatar.variant-blue {
-  background-color: var(--cnvs-base-avatar-background-color, var(--cnvs-base-palette-blue-300, oklch(0.7933 0.1076 252.08 / 1)));
-  color: var(--cnvs-base-avatar-color, var(--cnvs-base-palette-blue-800, oklch(0.3908 0.128 256 / 1)));
+  background-color: var(--cnvs-base-avatar-background-color, var(--cnvs-base-palette-blue-600, oklch(0.5198 0.1782 256.11 / 1)));
+  color: var(--cnvs-base-avatar-color, var(--cnvs-sys-color-fg-inverse));
 }
 
 
 .cnvs-base-avatar.variant-amber {
-  background-color: var(--cnvs-base-avatar-background-color, var(--cnvs-base-palette-amber-200, oklch(0.9191 0.1547 99.7 / 1)));
-  color: var(--cnvs-base-avatar-color, var(--cnvs-base-palette-amber-700, oklch(0.4824 0.1353 46.11 / 1)));
+  background-color: var(--cnvs-base-avatar-background-color, var(--cnvs-base-palette-amber-300, oklch(0.8432 0.1713 85.24 / 1)));
+  color: var(--cnvs-base-avatar-color, var(--cnvs-base-palette-amber-800, oklch(0.4143 0.1245 42.21 / 1)));
 }
 
 
@@ -53,8 +63,20 @@
 
 
 .cnvs-base-avatar.variant-purple {
-  background-color: var(--cnvs-base-avatar-background-color, var(--cnvs-base-palette-purple-300, oklch(0.8108 0.1412 315.48 / 1)));
-  color: var(--cnvs-base-avatar-color, var(--cnvs-base-palette-purple-800, oklch(0.422 0.136 315.49 / 1)));
+  background-color: var(--cnvs-base-avatar-background-color, var(--cnvs-base-palette-purple-600, oklch(0.5177 0.162 313.92 / 1)));
+  color: var(--cnvs-base-avatar-color, var(--cnvs-sys-color-fg-inverse));
+}
+
+
+.cnvs-base-avatar.variant-magenta {
+  background-color: var(--cnvs-base-avatar-background-color, var(--cnvs-base-palette-magenta-600, oklch(0.534 0.183 344.19 / 1)));
+  color: var(--cnvs-base-avatar-color, var(--cnvs-sys-color-fg-inverse));
+}
+
+
+.cnvs-base-avatar.variant-green {
+  background-color: var(--cnvs-base-avatar-background-color, var(--cnvs-base-palette-green-600, oklch(0.5069 0.1569 145.56 / 1)));
+  color: var(--cnvs-base-avatar-color, var(--cnvs-sys-color-fg-inverse));
 }
 
 

package/badge.css

@@ -1,4 +1,4 @@
-@keyframes animation-2n07n0 {
+@keyframes animation-3ixwlo {
   from {
     transform: scale(0.85);
   }
@@ -12,7 +12,7 @@
 .cnvs-count-badge {
   box-sizing: border-box;
   align-items: center;
-  animation: animation-2n07n0 0.2s ease;
+  animation: animation-3ixwlo 0.2s ease;
   border-radius: var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));
   display: inline-flex;
   font-family: var(--cnvs-sys-font-family-default);

package/card.css

@@ -7,18 +7,19 @@
   box-sizing: border-box;
   color: var(--cnvs-sys-color-fg-strong);
   font-weight: var(--cnvs-sys-font-weight-bold);
-  margin-block: var(--cnvs-sys-padding-none, var(--cnvs-sys-space-zero, 0));
+  margin-block-start: var(--cnvs-sys-padding-none, var(--cnvs-sys-space-zero, 0));
+  margin-block-end: var(--cnvs-sys-padding-none, var(--cnvs-sys-space-zero, 0));
 }
 
 
 .cnvs-card {
   box-sizing: border-box;
+  --cnvs-corner-shape-shape: var(--cnvs-sys-shape-xxl, var(--cnvs-sys-shape-x6, 1.5rem));
   display: flex;
   flex-direction: column;
-  gap: var(--cnvs-sys-gap-lg, var(--cnvs-sys-space-x6, 1.5rem));
+  gap: var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));
   padding: var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6, 1.5rem));
   background-color: var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));
-  border-radius: var(--cnvs-sys-shape-xxl, var(--cnvs-sys-shape-x6, 1.5rem));
   border: 0.0625rem solid var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));
 }
 

package/color-picker.css

@@ -1,13 +1,14 @@
 .cnvs-color-picker-color-swatch {
   box-sizing: border-box;
   --cnvs-system-icon-color: var(--cnvs-color-picker-color-swatch-icon-color);
+  --cnvs-corner-shape-shape: var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));
   width: var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));
   height: var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));
-  border-radius: var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));
   background-color: var(--cnvs-color-picker-color-swatch-color);
   display: flex;
   align-items: center;
   justify-content: center;
+  forced-color-adjust: none;
 }
 
 .cnvs-color-picker-color-swatch>* {
@@ -19,6 +20,14 @@
   box-shadow: inset 0px 0px 0px 0.0625rem rgba(0, 0, 0, 0.25);
 }
 
+@media (forced-colors: active) {
+.cnvs-color-picker-color-swatch.with-shadow {
+  outline: solid 0.0625rem SelectedItemText;
+}
+
+
+}
+
 
 .cnvs-color-picker-hex-input {
   box-sizing: border-box;
@@ -53,6 +62,14 @@
   pointer-events: none;
 }
 
+@media (forced-colors: active) {
+.cnvs-color-picker-hex-input [data-part="color-picker-hex-input-swatch"] {
+  outline: solid 0.0625rem SelectedItemText;
+}
+
+
+}
+
 .cnvs-color-picker-hex-input :dir(ltr) [data-part="color-picker-hex-input"] {
   padding-inline-start: 2.875rem;
 }

package/common.css

@@ -1,3 +1,10 @@
+.cnvs-corner-shape {
+  box-sizing: border-box;
+  border-radius: var(--cnvs-corner-shape-shape);
+  corner-shape: superellipse(1.1);
+}
+
+
 .cnvs-accessible-hide {
   clip: rect(1px, 1px, 1px, 1px);
   clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);

package/form-field.css

@@ -166,9 +166,9 @@
 
 .cnvs-form-field-group-list {
   box-sizing: border-box;
+  --cnvs-corner-shape-shape: var(--cnvs-sys-shape-lg, 0.75rem);
   display: flex;
   flex-direction: column;
-  border-radius: var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));
   gap: var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));
   padding: 0.625rem var(--cnvs-base-size-150, 0.75rem) var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));
   margin: 0 calc(var(--cnvs-base-size-150, 0.75rem) * -1);
@@ -178,13 +178,27 @@
 
 
 .cnvs-form-field-group-list.error-error {
-  background-color: var(--cnvs-sys-color-brand-surface-critical-default, oklch(0.6289 0.2567 29.11 / 0.04));
   box-shadow: inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));
 }
 
+@media (forced-colors: active) {
+.cnvs-form-field-group-list.error-error {
+  outline: solid 0.125rem ButtonBorder;
+}
+
+
+}
+
 
 .cnvs-form-field-group-list.error-caution {
-  background-color: var(--cnvs-sys-color-brand-surface-caution-default, oklch(0.7982 0.159 92.57 / 0.1));
   box-shadow: inset 0 0 0 0.0625rem var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1))),inset 0 0 0 0.1875rem var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1)));
 }
 
+@media (forced-colors: active) {
+.cnvs-form-field-group-list.error-caution {
+  outline: solid 0.125rem ButtonBorder;
+}
+
+
+}
+

package/loading-dots.css

@@ -1,4 +1,4 @@
-@keyframes animation-11xvt3 {
+@keyframes animation-2zsp0u {
   0%, 80%, 100% {
     transform: scale(0);
   }
@@ -37,7 +37,7 @@
   outline: 0.125rem solid transparent;
   transform: scale(0);
   display: inline-block;
-  animation-name: animation-11xvt3;
+  animation-name: animation-2zsp0u;
   animation-duration: calc(var(--cnvs-loading-dots-animation-duration-ms) * 35);
   animation-iteration-count: infinite;
   animation-timing-function: ease-in-out;

package/modal.css

@@ -45,7 +45,7 @@
 }
 
 
-@keyframes animation-46a317 {
+@keyframes animation-3vqy2x {
   0% {
     background: none;
   }
@@ -65,7 +65,7 @@
   height: 100vh;
   background: var(--cnvs-sys-color-surface-overlay-scrim, oklch(0.0847 0 0 / 0.36));
   animation-duration: 0.3s;
-  animation-name: animation-46a317;
+  animation-name: animation-3vqy2x;
 }
 
 .wd-no-animation .cnvs-modal-overlay-container {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-css",
-  "version": "16.0.0-alpha.0396-next.0",
+  "version": "16.0.0-alpha.0424-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": "70f2ee99c66df706e5101477f62799d1967358ad"
+  "gitHead": "cebd41107b3d9b3a051bfe89c62ee33f9665f0a7"
 }

package/popup.css

@@ -10,7 +10,7 @@
 }
 
 
-@keyframes animation-3yz2xp {
+@keyframes animation-4dht9 {
   0% {
     opacity: 1;
     transform: translate(var(--cnvs-translate-position-x), var(--cnvs-translate-position-y));
@@ -39,7 +39,7 @@
   border-radius: var(--cnvs-sys-shape-xxxl, 2rem);
   max-height: var(--cnvs-popup-card-max-height);
   overflow-y: auto;
-  animation-name: animation-3yz2xp;
+  animation-name: animation-4dht9;
   animation-duration: 150ms;
   animation-timing-function: ease-out;
   transform-origin: var(--cnvs-popup-card-transform-origin-vertical) var(--cnvs-popup-card-transform-origin-horizontal);

package/skeleton.css

@@ -36,7 +36,7 @@
 }
 
 
-@keyframes animation-14y9b4 {
+@keyframes animation-4908wy {
   from {
     opacity: 0.4;
   }
@@ -49,7 +49,7 @@
 
 .cnvs-skeleton {
   box-sizing: border-box;
-  animation: animation-14y9b4 0.8s linear infinite alternate;
+  animation: animation-4908wy 0.8s linear infinite alternate;
   position: relative;
   overflow: hidden;
   height: 100%;

package/text-input.css

@@ -1,5 +1,6 @@
 .cnvs-text-input {
   box-sizing: border-box;
+  --cnvs-corner-shape-shape: var(--cnvs-sys-shape-lg, 0.75rem);
   font-family: var(--cnvs-sys-font-family-default);
   font-size: var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));
   font-weight: var(--cnvs-sys-font-weight-normal);
@@ -8,7 +9,6 @@
   display: block;
   border: 0.0625rem solid var(--cnvs-sys-color-border-input-default);
   background-color: var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));
-  border-radius: var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));
   height: var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));
   transition: 0.2s box-shadow,0.2s border-color;
   padding: var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));
@@ -60,7 +60,6 @@
 .cnvs-text-input.error-error {
   border-color: var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));
   box-shadow: inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));
-  background-color: var(--cnvs-sys-color-brand-surface-critical-default, oklch(0.6289 0.2567 29.11 / 0.04));
 }
 
 .cnvs-text-input.error-error:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])) {
@@ -72,11 +71,18 @@
   outline-offset: 0.125rem;
 }
 
+@media (forced-colors: active) {
+.cnvs-text-input.error-error {
+  outline: solid 0.25rem ButtonBorder;
+}
+
+
+}
+
 
 .cnvs-text-input.error-caution {
   border-color: var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));
   box-shadow: inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1)));
-  background-color: var(--cnvs-sys-color-brand-surface-caution-default, oklch(0.7982 0.159 92.57 / 0.1));
   outline-offset: 0.125rem;
 }
 
@@ -88,6 +94,15 @@
   box-shadow: inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1))),0 0 0 2px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),0 0 0 4px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));
 }
 
+@media (forced-colors: active) {
+.cnvs-text-input.error-caution {
+  outline: solid 0.25rem ButtonBorder;
+  outline-offset: 0;
+}
+
+
+}
+
 
 .cnvs-input-group-inner {
   --cnvs-input-group-inner-inset-inline-start: initial;

package/tooltip.css

@@ -1,4 +1,4 @@
-@keyframes animation-4bzd0b {
+@keyframes animation-1za7de {
   0% {
     opacity: 0;
     transform: translate(var(--cnvs-tooltip-translate-position-x), var(--cnvs-tooltip-translate-position-y));
@@ -22,7 +22,7 @@
   position: relative;
   padding: var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));
   color: var(--cnvs-sys-color-fg-inverse);
-  animation-name: animation-4bzd0b;
+  animation-name: animation-1za7de;
   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);