@workday/canvas-kit-css 14.0.0-alpha.1164-next.0 → 14.0.0-alpha.1167-next.0

package/form-field.css

@@ -1,190 +0,0 @@
-.cnvs-form-field-label {
-  box-sizing: border-box;
-  font-weight: var(--cnvs-sys-font-weight-medium);
-  color: var(--cnvs-sys-color-text-default);
-  padding-inline-start: var(--cnvs-sys-space-zero);
-  display: flex;
-  align-items: center;
-  min-width: 11.25rem;
-}
-
-
-.cnvs-form-field-label.is-required::after {
-  content: "*";
-  font-size: var(--cnvs-sys-font-size-body-large);
-  font-weight: var(--cnvs-sys-font-weight-normal);
-  color: var(--cnvs-brand-error-base);
-  text-decoration: unset;
-  margin-inline-start: var(--cnvs-sys-space-x1);
-}
-
-
-.cnvs-form-field-label.orientation-horizontal-start {
-  justify-content: flex-start;
-  float: left;
-  max-height: var(--cnvs-sys-space-x10);
-}
-
-
-.cnvs-form-field-label.orientation-horizontal-end {
-  max-height: var(--cnvs-sys-space-x10);
-  float: left;
-  justify-content: flex-end;
-}
-
-
-.cnvs-form-field-label.orientation-vertical {
-  width: 100%;
-}
-
-
-.cnvs-form-field-label.is-hidden {
-  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;
-}
-
-
-.cnvs-form-field-hint {
-  box-sizing: border-box;
-  margin: var(--cnvs-sys-space-zero);
-}
-
-
-.cnvs-form-field-hint.error-error {
-  color: var(--cnvs-brand-error-base);
-}
-
-
-
-.cnvs-form-field-container {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  gap: var(--cnvs-sys-space-x2);
-}
-
-
-.cnvs-form-field {
-  box-sizing: border-box;
-  display: flex;
-  border: none;
-  padding: var(--cnvs-sys-space-zero);
-  margin: var(--cnvs-sys-space-zero) var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x6);
-}
-
-
-.cnvs-form-field.grow {
-  width: 100%;
-}
-
-.cnvs-form-field.grow [data-width="ck-formfield-width"] {
-  width: 100%;
-}
-
-.cnvs-form-field.grow:has(div[data-width="ck-formfield-width"]) {
-  width: 100%;
-}
-
-
-.cnvs-form-field.orientation-horizontal-start {
-  flex-direction: row;
-  gap: var(--cnvs-sys-space-x8);
-}
-
-
-.cnvs-form-field.orientation-horizontal-end {
-  flex-direction: row;
-  gap: var(--cnvs-sys-space-x8);
-}
-
-
-.cnvs-form-field.orientation-vertical {
-  flex-direction: column;
-  gap: var(--cnvs-sys-space-x1);
-  align-items: flex-start;
-}
-
-
-
-
-
-.cnvs-form-field-field {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  gap: var(--cnvs-sys-space-x2);
-}
-
-
-.cnvs-form-field-group-list {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  border-radius: var(--cnvs-sys-shape-x1);
-  gap: var(--cnvs-sys-space-x2);
-  padding: 0.625rem var(--cnvs-sys-space-x3) var(--cnvs-sys-space-x2);
-  margin: 0 calc(var(--cnvs-sys-space-x3) * -1);
-  transition: 100ms box-shadow;
-  width: fit-content;
-}
-
-
-.cnvs-form-field-group-list.error-error {
-  box-shadow: inset 0 0 0 0.125rem var(--cnvs-brand-error-base);
-}
-
-
-.cnvs-form-field-group-list.error-alert {
-  box-shadow: inset 0 0 0 0.0625rem var(--cnvs-brand-alert-darkest),inset 0 0 0 0.1875rem var(--cnvs-brand-alert-base);
-}
-
-
-.cnvs-form-field-group-label {
-  box-sizing: border-box;
-  font-weight: var(--cnvs-sys-font-weight-medium);
-  color: var(--cnvs-sys-color-text-default);
-  padding-inline-start: var(--cnvs-sys-space-zero);
-  display: flex;
-  align-items: center;
-  min-width: 11.25rem;
-}
-
-
-.cnvs-form-field-group-label.is-required::after {
-  content: "*";
-  font-size: var(--cnvs-sys-font-size-body-large);
-  font-weight: var(--cnvs-sys-font-weight-normal);
-  color: var(--cnvs-brand-error-base);
-  text-decoration: unset;
-  margin-inline-start: var(--cnvs-sys-space-x1);
-}
-
-
-.cnvs-form-field-group-label.orientation-vertical {
-  width: 100%;
-}
-
-
-.cnvs-form-field-group-label.orientation-horizontal-start {
-  justify-content: flex-start;
-  float: left;
-  max-height: var(--cnvs-sys-space-x10);
-}
-
-
-.cnvs-form-field-group-label.orientation-horizontal-end {
-  max-height: var(--cnvs-sys-space-x10);
-  float: left;
-  justify-content: flex-end;
-}
-

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-sys-color-bg-primary-strong));
-}
-
-.cnvs-accent-icon .french-vanilla-100 {
-  fill: var(--cnvs-sys-color-bg-default);
-}
-
-
-.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-sys-color-fg-inverse);
-}
-
-.cnvs-applet-icon .color-200 {
-  fill: var(--cnvs-applet-icon-color200, var(--cnvs-base-palette-blue-200));
-}
-
-.cnvs-applet-icon .color-300 {
-  fill: var(--cnvs-applet-icon-color300, var(--cnvs-base-palette-blue-400));
-}
-
-.cnvs-applet-icon .color-400 {
-  fill: var(--cnvs-applet-icon-color400, var(--cnvs-base-palette-blue-600));
-}
-
-.cnvs-applet-icon .color-400-alpha-20 {
-  fill: var(--cnvs-applet-icon-color400, var(--cnvs-base-palette-blue-600));
-}
-
-.cnvs-applet-icon .color-500 {
-  fill: var(--cnvs-applet-icon-color500, var(--cnvs-base-palette-blue-700));
-}
-
-
-.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-sys-color-icon-default));
-}
-
-.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-sys-color-fg-default)));
-}
-
-.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-sys-color-fg-default))));
-}
-
-.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-sys-color-fg-default)))));
-}
-
-.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-sys-color-bg-alt-soft));
-  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-pt3z6e {
-  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-pt3z6e;
-  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,155 +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-fg-disabled);
-  cursor: default;
-}
-
-.cnvs-menu-item:is(:disabled, [aria-disabled=true]):where(.focus, :focus) {
-  color: var(--cnvs-sys-color-fg-inverse);
-  background-color: var(--cnvs-brand-primary-light);
-}
-
-.cnvs-menu-item:is(:disabled, [aria-disabled=true]):where(.hover, :hover, [aria-selected=true]) {
-  background: none;
-}
-
-.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,108 +0,0 @@
-@keyframes animation-pt3z6g {
-  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-pt3z6g;
-}
-
-.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 {
-  gap: var(--cnvs-sys-space-zero);
-  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 {
-  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 {
-  padding: var(--cnvs-sys-space-x1) var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x2);
-}
-
-
-}
-