@workday/canvas-kit-css 14.0.0-alpha.1169-next.0 → 14.0.0-alpha.1174-next.0

package/form-field.css

@@ -0,0 +1,196 @@
+.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-hint.error-alert {
+  color: var(--cnvs-sys-color-text-caution-default);
+}
+
+
+.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-half);
+  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 {
+  background-color: var(--cnvs-brand-error-lightest);
+  box-shadow: inset 0 0 0 0.125rem var(--cnvs-brand-common-error-inner);
+}
+
+
+.cnvs-form-field-group-list.error-alert {
+  background-color: var(--cnvs-brand-alert-lightest);
+  box-shadow: inset 0 0 0 0.0625rem var(--cnvs-brand-common-alert-outer),inset 0 0 0 0.1875rem var(--cnvs-brand-common-alert-inner);
+}
+
+
+.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

@@ -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-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

@@ -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,155 @@
+.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

@@ -0,0 +1,108 @@
+@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 {
+  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);
+}
+
+
+}
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-css",
-  "version": "14.0.0-alpha.1169-next.0",
+  "version": "14.0.0-alpha.1174-next.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": "87a80034e7358532f3cb787312f2aba55497c352"
+  "gitHead": "6b57badf34512437caade1c0641a1db6301e3421"
 }