@workday/canvas-kit-css 13.2.2 → 13.2.3

package/icon.css

@@ -0,0 +1,165 @@
+.cnvs-svg {
+  box-sizing: border-box;
+  display: inline-block;
+}
+
+.cnvs-svg >svg {
+  display: block;
+  width: var(--cnvs-svg-width, var(--cnvs-svg-size));
+  height: var(--cnvs-svg-height, var(--cnvs-svg-size));
+}
+
+
+.cnvs-svg.should-mirror {
+  transform: scaleX(-1);
+}
+
+
+.cnvs-accent-icon {
+  box-sizing: border-box;
+  --cnvs-svg-size: 3.5rem;
+}
+
+.cnvs-accent-icon .color-500 {
+  fill: var(--cnvs-accent-icon-color, var(--cnvs-base-palette-blueberry-500));
+}
+
+.cnvs-accent-icon .french-vanilla-100 {
+  fill: var(--cnvs-base-palette-french-vanilla-100);
+}
+
+
+.cnvs-accent-icon.transparent .french-vanilla-100 {
+  fill: transparent;
+}
+
+
+.cnvs-applet-icon {
+  box-sizing: border-box;
+  --cnvs-svg-size: 5.75rem;
+}
+
+.cnvs-applet-icon .color-100 {
+  fill: var(--cnvs-base-palette-french-vanilla-100);
+}
+
+.cnvs-applet-icon .color-200 {
+  fill: var(--cnvs-applet-icon-color200, var(--cnvs-base-palette-blueberry-200));
+}
+
+.cnvs-applet-icon .color-300 {
+  fill: var(--cnvs-applet-icon-color300, var(--cnvs-base-palette-blueberry-300));
+}
+
+.cnvs-applet-icon .color-400 {
+  fill: var(--cnvs-applet-icon-color400, var(--cnvs-base-palette-blueberry-400));
+}
+
+.cnvs-applet-icon .color-400-alpha-20 {
+  fill: var(--cnvs-applet-icon-color400, var(--cnvs-base-palette-blueberry-400));
+}
+
+.cnvs-applet-icon .color-500 {
+  fill: var(--cnvs-applet-icon-color500, var(--cnvs-base-palette-blueberry-400));
+}
+
+
+.cnvs-system-icon {
+  box-sizing: border-box;
+}
+
+.cnvs-system-icon svg {
+  width: var(--cnvs-svg-width, var(--cnvs-svg-size, var(--cnvs-sys-space-x6)));
+  height: var(--cnvs-svg-height, var(--cnvs-svg-size, var(--cnvs-sys-space-x6)));
+}
+
+.cnvs-system-icon .wd-icon-fill {
+  fill: var(--cnvs-system-icon-color, var(--cnvs-base-palette-licorice-200));
+}
+
+.cnvs-system-icon .wd-icon-accent, .cnvs-system-icon .wd-icon-accent2 {
+  fill: var(--cnvs-system-icon-accent-color, var(--cnvs-system-icon-color, var(--cnvs-base-palette-licorice-200)));
+}
+
+.cnvs-system-icon .wd-icon-background {
+  fill: var(--cnvs-system-icon-background-color, transparent);
+}
+
+.cnvs-system-icon:where(:hover, .hover) .wd-icon-fill {
+  fill: var(--cnvs-deprecated-system-icon-fill-hover, var(--cnvs-deprecated-system-icon-color-hover, var(--cnvs-system-icon-color, var(--cnvs-base-palette-licorice-200))));
+}
+
+.cnvs-system-icon:where(:hover, .hover) .wd-icon-accent, .cnvs-system-icon .wd-icon-accent2 {
+  fill: var(--cnvs-deprecated-system-icon-accent-hover, var(--cnvs-deprecated-system-icon-color-hover, var(--cnvs-system-icon-accent-color, var(--cnvs-system-icon-color, var(--cnvs-base-palette-licorice-200)))));
+}
+
+.cnvs-system-icon:where(:hover, .hover) .wd-icon-background {
+  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;
+  background: var(--cnvs-system-icon-circle-background, var(--cnvs-base-palette-soap-200));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--cnvs-sys-space-zero);
+  border: none;
+  border-radius: var(--cnvs-sys-shape-round);
+  overflow: hidden;
+  width: var(--cnvs-system-icon-circle-container-size, var(--cnvs-sys-space-x10));
+  height: var(--cnvs-system-icon-circle-container-size, var(--cnvs-sys-space-x10));
+  --cnvs-svg-size: calc(var(--cnvs-system-icon-circle-container-size, var(--cnvs-sys-space-x10)) * 0.625);
+  --cnvs-system-icon-color: var(--cnvs-system-icon-circle-color);
+}
+
+.cnvs-system-icon-circle img {
+  width: 100%;
+  height: 100%;
+}
+
+
+.cnvs-graphic {
+  box-sizing: border-box;
+}
+
+
+.cnvs-graphic.grow {
+  width: 100%;
+  --cnvs-svg-width: 100%;
+}
+
+
+.cnvs-graphic-image {
+  box-sizing: border-box;
+  width: var(--cnvs-graphic-image-width);
+  height: var(--cnvs-graphic-image-height);
+  display: inline-block;
+}
+
+.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 {
+  width: 100%;
+}
+
+.cnvs-graphic-image.grow [data-part="graphic-img"] {
+  width: 100%;
+}
+

package/loading-dots.css

@@ -0,0 +1,47 @@
+@keyframes animation-3v3m9s {
+  0%, 80%, 100% {
+    transform: scale(0);
+  }
+  
+  40% {
+    transform: scale(1);
+  }
+  
+}
+
+.cnvs-loading-dots {
+  --cnvs-loading-dots-animation-duration-ms: 40ms;
+  --cnvs-loading-dots-loading-dot-color: var(--cnvs-sys-color-bg-alt-strong);
+  box-sizing: border-box;
+  display: inline-flex;
+  gap: var(--cnvs-sys-space-x2);
+}
+
+.cnvs-loading-dots [data-part="loading-animation-dot"] {
+  background-color: var(--cnvs-loading-dots-loading-dot-color);
+  width: var(--cnvs-sys-space-x4);
+  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-3v3m9s;
+  animation-duration: calc(var(--cnvs-loading-dots-animation-duration-ms) * 35);
+  animation-iteration-count: infinite;
+  animation-timing-function: ease-in-out;
+  animation-fill-mode: both;
+}
+
+.cnvs-loading-dots [data-part="loading-animation-dot"]:nth-child(1) {
+  animation-delay: 0ms;
+}
+
+.cnvs-loading-dots [data-part="loading-animation-dot"]:nth-child(2) {
+  animation-delay: calc(var(--cnvs-loading-dots-animation-duration-ms) * 4);
+}
+
+.cnvs-loading-dots [data-part="loading-animation-dot"]:nth-child(3) {
+  animation-delay: calc(var(--cnvs-loading-dots-animation-duration-ms) * 8);
+}
+

package/menu.css

@@ -0,0 +1,150 @@
+.cnvs-menu-item {
+  box-sizing: border-box;
+  font-family: var(--cnvs-sys-font-family-default);
+  font-weight: var(--cnvs-sys-font-weight-normal);
+  line-height: var(--cnvs-sys-line-height-subtext-large);
+  font-size: var(--cnvs-sys-font-size-subtext-large);
+  letter-spacing: var(--cnvs-base-letter-spacing-150);
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: var(--cnvs-sys-space-x4);
+  padding: var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);
+  cursor: pointer;
+  color: var(--cnvs-sys-color-fg-default);
+  border-width: 0;
+  text-align: start;
+  transition: background-color 80ms,color 80ms;
+  background-color: inherit;
+  min-height: var(--cnvs-sys-space-x10);
+  overflow-wrap: anywhere;
+  --cnvs-system-icon-color: currentcolor;
+}
+
+.cnvs-menu-item :where([data-part="menu-item-selected"]) {
+  transition: opacity 80ms linear;
+  opacity: var(--cnvs-sys-opacity-zero);
+}
+
+.cnvs-menu-item:where(:has(span)) {
+  display: flex;
+}
+
+.cnvs-menu-item[aria-selected=true] {
+  color: var(--cnvs-brand-primary-dark);
+  background-color: var(--cnvs-brand-primary-lightest);
+}
+
+.cnvs-menu-item[aria-selected=true] :where([data-part="menu-item-selected"]) {
+  opacity: var(--cnvs-sys-opacity-full);
+}
+
+.cnvs-menu-item[aria-selected=true]:where(.focus, :focus) {
+  --cnvs-system-icon-color: var(--cnvs-brand-primary-accent);
+  outline: none;
+  background-color: var(--cnvs-brand-primary-base);
+  color: var(--cnvs-system-icon-color);
+}
+
+.cnvs-menu-item:is(.hover, :hover) {
+  color: var(--cnvs-sys-color-fg-strong);
+  background-color: var(--cnvs-brand-neutral-lightest);
+}
+
+.cnvs-menu-item:is(.focus, :focus) {
+  color: var(--cnvs-brand-primary-accent);
+  background-color: var(--cnvs-brand-primary-base);
+  outline: 0.125rem solid transparent;
+  outline-offset: -0.125rem;
+}
+
+.cnvs-menu-item:is(:disabled, [aria-disabled=true]) {
+  color: var(--cnvs-sys-color-text-disabled);
+  cursor: default;
+}
+
+.cnvs-menu-item:is(:disabled, [aria-disabled=true]):where(.focus, :focus) {
+  background-color: var(--cnvs-brand-primary-light);
+}
+
+.cnvs-menu-item :where([data-part="menu-item-text"]) {
+  flex-grow: 1;
+  align-self: center;
+}
+
+.cnvs-menu-item :where([data-part="menu-item-icon"]) {
+  align-self: start;
+}
+
+
+.cnvs-menu-card {
+  --cnvs-menu-card-min-width: 0.0625rem;
+  --cnvs-menu-card-transform-origin-vertical: top;
+  --cnvs-menu-card-transform-origin-horizontal: left;
+  box-sizing: border-box;
+  font-family: var(--cnvs-sys-font-family-default);
+  font-weight: var(--cnvs-sys-font-weight-normal);
+  line-height: var(--cnvs-sys-line-height-subtext-large);
+  font-size: var(--cnvs-sys-font-size-subtext-large);
+  letter-spacing: var(--cnvs-base-letter-spacing-150);
+  color: var(--cnvs-sys-color-text-default);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  transition: transform ease-out 150ms;
+  padding: var(--cnvs-sys-space-zero);
+  max-width: calc(100vw - var(--cnvs-sys-space-x8));
+  box-shadow: var(--cnvs-sys-depth-3);
+  min-width: var(--cnvs-menu-card-min-width);
+  max-height: var(--cnvs-menu-card-max-height);
+  transform-origin: var(--cnvs-menu-card-transform-origin-vertical) var(--cnvs-menu-card-transform-origin-horizontal);
+}
+
+.wd-no-animation .cnvs-menu-card {
+  animation: none;
+}
+
+
+.cnvs-menu-list {
+  box-sizing: border-box;
+  background: var(--cnvs-sys-color-bg-default);
+  border-radius: var(--cnvs-sys-shape-zero);
+  padding: var(--cnvs-sys-space-zero);
+  gap: var(--cnvs-sys-space-zero);
+}
+
+
+.cnvs-menu-list.orientation-vertical {
+  flex-direction: column;
+}
+
+
+.cnvs-menu-list.orientation-horizontal {
+  flex-direction: row;
+}
+
+
+.cnvs-menu-divider {
+  box-sizing: border-box;
+  display: block;
+  height: 0.0625rem;
+  border: var(--cnvs-sys-space-zero);
+  border-top: 0.0625rem solid var(--cnvs-sys-color-border-divider);
+  margin: var(--cnvs-sys-space-x2) var(--cnvs-sys-space-zero);
+}
+
+
+.cnvs-menu-group-heading {
+  box-sizing: border-box;
+  font-family: var(--cnvs-sys-font-family-default);
+  font-weight: var(--cnvs-sys-font-weight-bold);
+  line-height: var(--cnvs-sys-line-height-subtext-large);
+  font-size: var(--cnvs-sys-font-size-subtext-large);
+  letter-spacing: var(--cnvs-base-letter-spacing-150);
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: var(--cnvs-sys-space-x4);
+  padding: var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);
+}
+

package/modal.css

@@ -0,0 +1,109 @@
+@keyframes animation-4d4gjl {
+  0% {
+    background: none;
+  }
+  
+  100% {
+    background: var(--cnvs-sys-color-bg-overlay);
+  }
+  
+}
+
+.cnvs-modal-overlay-container {
+  box-sizing: border-box;
+  position: fixed;
+  top: var(--cnvs-sys-space-zero);
+  left: var(--cnvs-sys-space-zero);
+  width: 100vw;
+  height: 100vh;
+  background: var(--cnvs-sys-color-bg-overlay);
+  animation-duration: 0.3s;
+  animation-name: animation-4d4gjl;
+}
+
+.wd-no-animation .cnvs-modal-overlay-container {
+  animation: none;
+}
+
+.cnvs-modal-overlay-container>div {
+  max-height: 100%;
+  display: flex;
+  position: absolute;
+  left: var(--cnvs-sys-space-zero);
+  top: var(--cnvs-sys-space-zero);
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: var(--cnvs-modal-overlay-container-container-center);
+}
+
+@media screen and (max-width: 768px) {
+.cnvs-modal-overlay-container {
+  height: 100%;
+}
+
+.cnvs-modal-overlay-container>div {
+  align-items: end;
+}
+
+
+}
+
+
+.cnvs-modal-card {
+  box-sizing: border-box;
+  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);
+}
+
+@media screen and (max-width: 768px) {
+.cnvs-modal-card {
+  margin: var(--cnvs-sys-space-x4);
+  padding: var(--cnvs-sys-space-x4);
+  border-radius: var(--cnvs-sys-space-x6);
+}
+
+
+}
+
+
+.cnvs-modal-heading {
+  box-sizing: border-box;
+}
+
+@media screen and (max-width: 768px) {
+.cnvs-modal-heading {
+  margin-block-end: var(--cnvs-sys-space-zero);
+  padding: var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x1);
+}
+
+
+}
+
+
+.cnvs-modal-overflow-overlay {
+  box-sizing: border-box;
+  overflow: hidden auto;
+}
+
+.cnvs-modal-overflow-overlay>div {
+  max-height: inherit;
+}
+
+
+.cnvs-modal-body {
+  box-sizing: border-box;
+}
+
+@media screen and (max-width: 768px) {
+.cnvs-modal-body {
+  margin-block-end: var(--cnvs-sys-space-zero);
+  padding: var(--cnvs-sys-space-x1) var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x2);
+}
+
+
+}
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-css",
-  "version": "13.2.2",
+  "version": "13.2.3",
   "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": "fdcf5da36c0f9b37d0a297d925a911515de53d1a"
+  "gitHead": "4bf7deabfbac10c4b4ff7b706c54292c4bf79e35"
 }

package/popup.css

@@ -0,0 +1,74 @@
+.cnvs-disable-body-scroll {
+  overflow: hidden!important;
+}
+
+
+@keyframes animation-284ori {
+  0% {
+    opacity: 1;
+    transform: translate(var(--cnvs-translate-position-x), var(--cnvs-translate-position-y));
+  }
+  
+  100% {
+    opacity: 1;
+    transform: translate(0);
+  }
+  
+}
+
+.cnvs-popup-card {
+  box-sizing: border-box;
+  font-family: var(--cnvs-sys-font-family-default);
+  font-weight: var(--cnvs-sys-font-weight-normal);
+  line-height: var(--cnvs-sys-line-height-subtext-large);
+  font-size: var(--cnvs-sys-font-size-subtext-large);
+  letter-spacing: var(--cnvs-base-letter-spacing-150);
+  display: flex;
+  position: relative;
+  max-width: calc(100vw - var(--cnvs-sys-space-x8));
+  flex-direction: column;
+  box-shadow: var(--cnvs-sys-depth-5);
+  min-height: var(--cnvs-sys-space-zero);
+  padding: var(--cnvs-sys-space-x6);
+  max-height: var(--cnvs-popup-card-max-height);
+  overflow-y: auto;
+  animation-name: animation-284ori;
+  animation-duration: 150ms;
+  animation-timing-function: ease-out;
+  transform-origin: var(--cnvs-popup-card-transform-origin-vertical) var(--cnvs-popup-card-transform-origin-horizontal);
+}
+
+.wd-no-animation .cnvs-popup-card {
+  animation: none;
+}
+
+@media screen and (max-width: 768px) {
+.cnvs-popup-card {
+  transform-origin: bottom center;
+}
+
+
+}
+
+
+.cnvs-popup-heading {
+  box-sizing: border-box;
+  margin-block-end: var(--cnvs-sys-space-x2);
+  padding: var(--cnvs-sys-space-x2);
+}
+
+
+.cnvs-popup-close-icon {
+  box-sizing: border-box;
+  position: absolute;
+  inset-inline-end: var(--cnvs-sys-space-x1);
+  top: var(--cnvs-sys-space-x1);
+}
+
+
+.cnvs-popup-body {
+  box-sizing: border-box;
+  overflow-y: auto;
+  padding: var(--cnvs-sys-space-x2);
+}
+

package/select.css

@@ -0,0 +1,37 @@
+.cnvs-select-input {
+  box-sizing: border-box;
+}
+
+.cnvs-select-input [data-part="select-hidden-input"] {
+  position: absolute;
+  top: var(--cnvs-sys-space-zero);
+  bottom: var(--cnvs-sys-space-zero);
+  left: var(--cnvs-sys-space-zero);
+  right: var(--cnvs-sys-space-zero);
+  opacity: var(--cnvs-sys-opacity-zero);
+  cursor: default;
+  pointer-events: none;
+  min-width: 100%;
+  width: 100%;
+}
+
+.cnvs-select-input [data-part="select-start-icon"], .cnvs-select-input [data-part="select-end-icon"], .cnvs-select-input [data-part="select-caret-container"], .cnvs-select-input [data-part="select-start-icon-container"] {
+  position: absolute;
+  pointer-events: none;
+}
+
+.cnvs-select-input [data-part="select-visual-input"] {
+  caret-color: transparent;
+  cursor: default;
+}
+
+.cnvs-select-input [data-part="select-visual-input"]::selection {
+  background-color: transparent;
+}
+
+
+.cnvs-select-card {
+  box-sizing: border-box;
+  --cnvs-menu-card-max-height: 18.75rem;
+}
+

package/skeleton.css

@@ -0,0 +1,73 @@
+.cnvs-skeleton-shape {
+  box-sizing: border-box;
+  background-color: var(--cnvs-skeleton-shape-background-color, var(--cnvs-sys-color-bg-alt-strong));
+  border-radius: var(--cnvs-skeleton-shape-border-radius, var(--cnvs-sys-space-zero));
+  height: var(--cnvs-skeleton-shape-height, 100%);
+  width: var(--cnvs-skeleton-shape-width);
+  margin-bottom: var(--cnvs-sys-space-x4);
+}
+
+
+.cnvs-skeleton-header {
+  box-sizing: border-box;
+  background-color: var(--cnvs-skeleton-header-background-color, var(--cnvs-sys-color-bg-alt-strong));
+  border-radius: 0;
+  height: var(--cnvs-skeleton-header-height, calc(var(--cnvs-sys-space-x1) * 7));
+  width: var(--cnvs-skeleton-header-width);
+  margin-bottom: var(--cnvs-sys-space-x4);
+}
+
+
+.cnvs-skeleton-text {
+  box-sizing: border-box;
+  margin-bottom: var(--cnvs-sys-space-x6);
+}
+
+.cnvs-skeleton-text [data-part="skeleton-text-lines"] {
+  background-color: var(--cnvs-skeleton-text-background-color, var(--cnvs-sys-color-bg-alt-strong));
+  height: 1.3125rem;
+  margin-block-end: var(--cnvs-sys-space-x3);
+  border-radius: var(--cnvs-sys-shape-half);
+  width: 100%;
+}
+
+.cnvs-skeleton-text [data-part="skeleton-text-lines"]:last-child {
+  width: 60%;
+}
+
+
+@keyframes animation-t0ia0 {
+  from {
+    opacity: 0.4;
+  }
+  
+  to {
+    opacity: 1;
+  }
+  
+}
+
+.cnvs-skeleton {
+  box-sizing: border-box;
+  animation: animation-t0ia0 0.8s linear infinite alternate;
+  position: relative;
+  overflow: hidden;
+  height: 100%;
+  width: 100%;
+}
+
+.cnvs-skeleton [data-part="skeleton-accessible-hide"] {
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  height: 1px;
+  min-height: 1px;
+  width: 1px;
+  min-width: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+}
+