@workday/canvas-kit-css 12.5.0-1046-next.0 → 12.5.0

package/badge.css

@@ -1,4 +1,4 @@
-@keyframes animation-pk5n3f {
+@keyframes animation-bfu53h {
   from {
     transform: scale(0.85);
   }
@@ -12,7 +12,7 @@
 .cnvs-count-badge {
   box-sizing: border-box;
   align-items: center;
-  animation: animation-pk5n3f 0.2s ease;
+  animation: animation-bfu53h 0.2s ease;
   background: var(--cnvs-sys-color-static-red-default);
   border-radius: var(--cnvs-sys-shape-round);
   color: var(--cnvs-sys-color-text-inverse);

package/button.css

@@ -39,6 +39,8 @@
   border-color: var(--cnvs-button-color-prop-focus-border, var(--cnvs-button-border, transparent));
   color: var(--cnvs-button-color-prop-focus-label, var(--cnvs-button-label, var(--cnvs-sys-color-fg-strong)));
   --cnvs-system-icon-color: var(--cnvs-button-color-prop-focus-icon, var(--cnvs-sys-color-fg-strong));
+  outline: 0.125rem solid transparent;
+  outline-offset: 0.125rem;
   box-shadow: 0 0 0 2px var(--cnvs-button-color-prop-focus-box-shadow-inner, var(--cnvs-button-box-shadow-inner, var(--cnvs-sys-color-border-inverse))),0 0 0 4px var(--cnvs-button-color-prop-focus-box-shadow-outer, var(--cnvs-button-box-shadow-outer, var(--cnvs-brand-common-focus-outline)));
 }
 
@@ -67,6 +69,20 @@
   --cnvs-system-icon-color: var(--cnvs-button-color-prop-disabled-icon, var(--cnvs-sys-color-fg-strong));
 }
 
+@media (prefers-contrast: more) {
+.cnvs-button[aria-pressed="true"] {
+  outline: 0.125rem solid transparent;
+  outline-offset: -0.0625rem;
+}
+
+.cnvs-button[aria-pressed="true"]:focus-visible, .cnvs-button[aria-pressed="true"].focus {
+  outline: 0.25rem double transparent;
+  outline-offset: 0;
+}
+
+
+}
+
 
 .cnvs-button.size-large {
   font-family: var(--cnvs-sys-font-family-default);

package/icon.css

@@ -97,6 +97,15 @@
   fill: var(--cnvs-deprecated-system-icon-background-hover, var(--cnvs-system-icon-background-color, transparent));
 }
 
+@media (prefers-contrast: more) {
+.cnvs-system-icon .wd-icon-fill, .cnvs-system-icon .wd-icon-accent {
+  color: currentColor;
+  fill: currentColor;
+}
+
+
+}
+
 
 .cnvs-system-icon-circle {
   box-sizing: border-box;
@@ -130,3 +139,20 @@
   --cnvs-svg-width: 100%;
 }
 
+
+.cnvs-graphic-image {
+  box-sizing: border-box;
+}
+
+.cnvs-graphic-image [data-part="graphic-img"] {
+  width: var(--cnvs-graphic-image-width);
+  height: var(--cnvs-graphic-image-height);
+  max-width: 100%;
+  max-height: 100%;
+}
+
+
+.cnvs-graphic-image.grow [data-part="graphic-img"] {
+  width: 100%;
+}
+

package/loading-dots.css

@@ -1,4 +1,4 @@
-@keyframes animation-pk5n50 {
+@keyframes animation-bfu552 {
   0%, 80%, 100% {
     transform: scale(0);
   }
@@ -23,9 +23,10 @@
   height: var(--cnvs-sys-space-x4);
   font-size: var(--cnvs-sys-space-zero);
   border-radius: var(--cnvs-sys-shape-round);
+  outline: 0.125rem solid transparent;
   transform: scale(0);
   display: inline-block;
-  animation-name: animation-pk5n50;
+  animation-name: animation-bfu552;
   animation-duration: calc(var(--cnvs-loading-dots-animation-duration-ms) * 35);
   animation-iteration-count: infinite;
   animation-timing-function: ease-in-out;

package/menu.css

@@ -42,8 +42,9 @@
 
 .cnvs-menu-item:is(.focus, :focus) {
   color: var(--cnvs-brand-primary-accent);
-  outline: none;
   background-color: var(--cnvs-brand-primary-base);
+  outline: 0.125rem solid transparent;
+  outline-offset: -0.125rem;
 }
 
 .cnvs-menu-item:is(:disabled, [aria-disabled=true]) {

package/modal.css

@@ -1,4 +1,4 @@
-@keyframes animation-pk5n52 {
+@keyframes animation-bfu554 {
   0% {
     background: none;
   }
@@ -18,7 +18,7 @@
   height: 100vh;
   background: var(--cnvs-sys-color-bg-overlay);
   animation-duration: 0.3s;
-  animation-name: animation-pk5n52;
+  animation-name: animation-bfu554;
 }
 
 .wd-no-animation .cnvs-modal-overlay-container {
@@ -55,6 +55,7 @@
   margin: var(--cnvs-sys-space-x10);
   width: calc(calc(var(--cnvs-sys-space-x20) * 5) + var(--cnvs-sys-space-x10));
   border-width: var(--cnvs-sys-space-zero);
+  outline: 0.0625rem solid transparent;
   box-shadow: var(--cnvs-sys-depth-6);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-css",
-  "version": "12.5.0-1046-next.0",
+  "version": "12.5.0",
   "description": "The parent module that contains all Workday Canvas Kit CSS components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -25,5 +25,5 @@
     "components",
     "workday"
   ],
-  "gitHead": "3350db5e9a6aa32c04b6bad66fb7638b61010650"
+  "gitHead": "3f9fe28cbb758a0a56d3f9db5cee2a29509f0cd2"
 }

package/popup.css

@@ -1,4 +1,4 @@
-@keyframes animation-pk5nx {
+@keyframes animation-bfu5x {
   0% {
     opacity: 1;
     transform: translate(var(--cnvs-translate-position-x), var(--cnvs-translate-position-y));
@@ -27,7 +27,7 @@
   padding: var(--cnvs-sys-space-x6);
   max-height: var(--cnvs-popup-card-max-height);
   overflow-y: auto;
-  animation-name: animation-pk5nx;
+  animation-name: animation-bfu5x;
   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/text-input.css

@@ -34,7 +34,7 @@
 .cnvs-text-input:is(:focus-visible, .focus):where(:not([disabled])) {
   border-color: var(--cnvs-brand-common-focus-outline);
   box-shadow: inset 0 0 0 1px var(--cnvs-brand-common-focus-outline);
-  outline: none;
+  outline: 0.125rem solid transparent;
 }
 
 .cnvs-text-input:is(:disabled, .disabled) {
@@ -70,12 +70,14 @@
 
 .cnvs-text-input.error-error:is(:focus-visible, .focus):not([disabled]) {
   box-shadow: inset 0 0 0 0.0625rem var(--cnvs-brand-error-base),0 0 0 2px var(--cnvs-sys-color-border-inverse),0 0 0 4px var(--cnvs-brand-common-focus-outline);
+  outline-offset: 0.125rem;
 }
 
 
 .cnvs-text-input.error-alert {
   border-color: var(--cnvs-brand-alert-darkest);
   box-shadow: inset 0 0 0 0.125rem var(--cnvs-brand-alert-base);
+  outline-offset: 0.125rem;
 }
 
 .cnvs-text-input.error-alert:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])) {