@workday/canvas-kit-css 13.2.0 → 13.2.2

package/icon.css

@@ -1,165 +0,0 @@
-.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

@@ -1,47 +0,0 @@
-@keyframes animation-ndvy5w {
-  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-ndvy5w;
-  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

@@ -1,150 +0,0 @@
-.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

@@ -1,109 +0,0 @@
-@keyframes animation-ndvy5y {
-  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-ndvy5y;
-}
-
-.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/popup.css

@@ -1,74 +0,0 @@
-.cnvs-disable-body-scroll {
-  overflow: hidden!important;
-}
-
-
-@keyframes animation-ndvyy {
-  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-ndvyy;
-  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

@@ -1,37 +0,0 @@
-.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

@@ -1,73 +0,0 @@
-.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-ndvy69 {
-  from {
-    opacity: 0.4;
-  }
-  
-  to {
-    opacity: 1;
-  }
-  
-}
-
-.cnvs-skeleton {
-  box-sizing: border-box;
-  animation: animation-ndvy69 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;
-}
-