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

package/tabs.css

@@ -0,0 +1,123 @@
+.cnvs-tab-item {
+  box-sizing: border-box;
+  font-family: var(--cnvs-sys-font-family-default),Helvetica Neue,Helvetica,Arial,sans-serif;
+  font-weight: var(--cnvs-sys-font-weight-medium);
+  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);
+  border: none;
+  background-color: transparent;
+  flex: 0 0 auto;
+  min-width: var(--cnvs-sys-space-zero);
+  align-items: center;
+  padding: var(--cnvs-sys-space-x3) var(--cnvs-sys-space-x4);
+  height: 3.25rem;
+  cursor: pointer;
+  color: var(--cnvs-sys-color-fg-muted-default);
+  position: relative;
+  border-radius: var(--cnvs-sys-space-x1) var(--cnvs-sys-space-x1) var(--cnvs-sys-space-zero) var(--cnvs-sys-space-zero);
+  transition: background 150ms ease,color 150ms ease;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-muted-soft);
+}
+
+.cnvs-tab-item:has(span) {
+  display: flex;
+  gap: var(--cnvs-sys-space-x2);
+}
+
+.cnvs-tab-item:hover, .cnvs-tab-item.hover, .cnvs-tab-item:focus-visible, .cnvs-tab-item.focus {
+  background-color: var(--cnvs-sys-color-bg-alt-default);
+  color: var(--cnvs-sys-color-fg-contrast-default);
+  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-contrast-default);
+}
+
+.cnvs-tab-item:focus-visible, .cnvs-tab-item.focus {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1)),inset 0 0 0 2px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1));
+  --cnvs-button-box-shadow-inner: var(--cnvs-sys-color-border-inverse);
+  --cnvs-button-box-shadow-outer: var(--cnvs-brand-common-focus-outline);
+  --cnvs-system-icon-color: var(--cnvs-sys-color-icon-strong);
+}
+
+.cnvs-tab-item:disabled, .cnvs-tab-item.disabled, .cnvs-tab-item[aria-disabled] {
+  color: var(--cnvs-sys-color-text-disabled);
+  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-disabled);
+}
+
+.cnvs-tab-item:disabled:hover, .cnvs-tab-item.disabled:hover, .cnvs-tab-item[aria-disabled]:hover {
+  cursor: auto;
+  background-color: var(--cnvs-sys-color-bg-transparent);
+  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-disabled);
+}
+
+.cnvs-tab-item[aria-selected=true] {
+  color: var(--cnvs-brand-primary-base);
+  cursor: default;
+  --cnvs-system-icon-color: var(--cnvs-brand-primary-base);
+}
+
+.cnvs-tab-item[aria-selected=true]:after {
+  position: absolute;
+  height: var(--cnvs-sys-space-x1);
+  border-radius: var(--cnvs-sys-shape-x1) var(--cnvs-sys-shape-x1) var(--cnvs-sys-shape-zero) var(--cnvs-sys-shape-zero);
+  background-color: var(--cnvs-brand-primary-base);
+  bottom: var(--cnvs-sys-space-zero);
+  content: '';
+  left: var(--cnvs-sys-space-zero);
+  margin-block-start: calc(calc(var(--cnvs-sys-space-x2) / var(--cnvs-sys-space-x1)) * -1);
+  width: 100%;
+}
+
+.cnvs-tab-item[aria-selected=true]:hover, .cnvs-tab-item[aria-selected=true].hover, .cnvs-tab-item[aria-selected=true]:focus-visible, .cnvs-tab-item[aria-selected=true].focus {
+  background-color: var(--cnvs-sys-color-bg-transparent);
+  color: var(--cnvs-brand-primary-base);
+}
+
+
+.cnvs-tabs-list {
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  border-bottom: 0.0625rem solid var(--cnvs-sys-color-border-divider);
+  gap: var(--cnvs-sys-space-x3);
+  padding-inline: var(--cnvs-sys-space-x6);
+}
+
+
+.cnvs-tabs-list.modality-touch {
+  overflow-x: auto;
+  padding-inline: var(--cnvs-sys-space-zero);
+}
+
+.cnvs-tabs-list.modality-touch[data-scroll-position="start"] {
+  mask-image: linear-gradient(to right, white 80%, transparent);
+}
+
+.cnvs-tabs-list.modality-touch[data-scroll-position="middle"] {
+  mask-image: linear-gradient(to left, white 80%, transparent),linear-gradient(to right, white 80%, transparent);
+  mask-composite: intersect;
+}
+
+.cnvs-tabs-list.modality-touch[data-scroll-position="end"] {
+  mask-image: linear-gradient(to left, white 80%, transparent);
+}
+
+
+
+
+
+
+
+
+.cnvs-tabs-overflow-button {
+  box-sizing: border-box;
+}
+
+.cnvs-tabs-overflow-button:has([data-part="tabs-overflow-button-icon"]) {
+  display: flex;
+  gap: var(--cnvs-sys-space-zero);
+}
+

package/text-area.css

@@ -0,0 +1,30 @@
+.cnvs-text-area {
+  box-sizing: border-box;
+  min-height: var(--cnvs-sys-space-x16);
+  min-width: calc(calc(var(--cnvs-sys-space-x20) * 3) + var(--cnvs-sys-space-x10));
+}
+
+.cnvs-text-area::webkit-resizer {
+  display: none;
+}
+
+
+.cnvs-text-area.resize-both {
+  resize: both;
+}
+
+
+.cnvs-text-area.resize-horizontal {
+  resize: horizontal;
+}
+
+
+.cnvs-text-area.resize-vertical {
+  resize: vertical;
+}
+
+
+.cnvs-text-area.resize-none {
+  resize: none;
+}
+

package/text-input.css

@@ -0,0 +1,148 @@
+.cnvs-text-input {
+  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: block;
+  border: 0.0625rem solid var(--cnvs-sys-color-border-input-default);
+  background-color: var(--cnvs-sys-color-bg-default);
+  border-radius: var(--cnvs-sys-shape-x1-half);
+  height: var(--cnvs-sys-space-x10);
+  transition: 0.2s box-shadow,0.2s border-color;
+  padding: var(--cnvs-sys-space-x2);
+  margin: 0rem;
+  width: var(--cnvs-text-input-width);
+  min-width: var(--cnvs-text-input-width, calc(calc(var(--cnvs-sys-space-x20) * 3) + var(--cnvs-sys-space-x10)));
+  color: var(--cnvs-sys-color-text-default);
+  text-overflow: ellipsis;
+}
+
+.cnvs-text-input ::-ms-clear {
+  display: none;
+}
+
+.cnvs-text-input::placeholder {
+  color: var(--cnvs-sys-color-text-hint);
+}
+
+.cnvs-text-input:is(:hover, .hover) {
+  border-color: var(--cnvs-sys-color-border-input-strong);
+}
+
+.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: 0.125rem solid transparent;
+}
+
+.cnvs-text-input:is(:disabled, .disabled) {
+  background-color: var(--cnvs-sys-color-bg-alt-softer);
+  border-color: var(--cnvs-sys-color-border-input-disabled);
+  color: var(--cnvs-sys-color-fg-disabled);
+}
+
+.cnvs-text-input:is(:disabled, .disabled)::placeholder {
+  color: var(--cnvs-sys-color-fg-disabled);
+}
+
+
+.cnvs-text-input.grow {
+  width: 100%;
+  resize: vertical;
+}
+
+
+.cnvs-text-input.grow-false {
+  width: initial;
+}
+
+
+.cnvs-text-input.error-error {
+  border-color: var(--cnvs-brand-common-error-inner);
+  border-width: 0.125rem;
+  background-color: var(--cnvs-brand-error-lightest);
+}
+
+.cnvs-text-input.error-error:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])) {
+  border-color: var(--cnvs-brand-common-error-inner);
+}
+
+.cnvs-text-input.error-error:is(:focus-visible, .focus):not([disabled]) {
+  box-shadow: 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-common-alert-outer);
+  box-shadow: inset 0 0 0 0.125rem var(--cnvs-brand-common-alert-inner);
+  background-color: var(--cnvs-brand-alert-lightest);
+  outline-offset: 0.125rem;
+}
+
+.cnvs-text-input.error-alert:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])) {
+  border-color: var(--cnvs-brand-common-alert-outer);
+}
+
+.cnvs-text-input.error-alert:is(:focus-visible, .focus):not([disabled]) {
+  box-shadow: inset 0 0 0 0.125rem var(--cnvs-brand-common-alert-inner),0 0 0 2px var(--cnvs-sys-color-border-inverse),0 0 0 4px var(--cnvs-brand-common-focus-outline);
+}
+
+
+.cnvs-input-group-inner {
+  --cnvs-input-group-inner-inset-inline-start: initial;
+  --cnvs-input-group-inner-inset-inline-end: initial;
+  --cnvs-input-group-inner-width: var(--cnvs-sys-space-x10);
+  --cnvs-input-group-inner-height: var(--cnvs-sys-space-x10);
+  box-sizing: border-box;
+  display: flex;
+  position: absolute;
+  align-items: center;
+  justify-content: center;
+  width: var(--cnvs-input-group-inner-width);
+  height: var(--cnvs-input-group-inner-height);
+  inset-inline-start: var(--cnvs-input-group-inner-inset-inline-start);
+  inset-inline-end: var(--cnvs-input-group-inner-inset-inline-end);
+}
+
+
+.cnvs-input-group-inner.pointer-events {
+  pointer-events: var(--cnvs-input-group-inner-pointer-events);
+}
+
+
+.cnvs-input-group-input {
+  box-sizing: border-box;
+  display: flex;
+  width: 100%;
+}
+
+
+.cnvs-input-group-input.padding-inline-start {
+  padding-inline-start: var(--cnvs-input-group-input-padding-inline-start);
+}
+
+
+.cnvs-input-group-input.padding-inline-end {
+  padding-inline-end: var(--cnvs-input-group-input-padding-inline-end);
+}
+
+
+.cnvs-input-group {
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  align-items: center;
+}
+
+.cnvs-input-group :has([data-part="input-group-clear-button"]) {
+  transition: opacity 300ms ease;
+}
+
+.cnvs-input-group:where(:has(input:placeholder-shown)) :has([data-part="input-group-clear-button"]) {
+  opacity: 0;
+  pointer-events: none;
+}
+

package/text.css

@@ -0,0 +1,189 @@
+.cnvs-text {
+  box-sizing: border-box;
+}
+
+
+.cnvs-text.type-level-title-large {
+  font-family: var(--cnvs-sys-font-family-default);
+  font-weight: var(--cnvs-sys-font-weight-bold);
+  line-height: var(--cnvs-sys-line-height-title-large);
+  font-size: var(--cnvs-sys-font-size-title-large);
+  color: var(--cnvs-sys-color-text-strong);
+}
+
+
+.cnvs-text.type-level-title-medium {
+  font-family: var(--cnvs-sys-font-family-default);
+  font-weight: var(--cnvs-sys-font-weight-bold);
+  line-height: var(--cnvs-sys-line-height-title-medium);
+  font-size: var(--cnvs-sys-font-size-title-medium);
+  color: var(--cnvs-sys-color-text-strong);
+}
+
+
+.cnvs-text.type-level-title-small {
+  font-family: var(--cnvs-sys-font-family-default);
+  font-weight: var(--cnvs-sys-font-weight-bold);
+  line-height: var(--cnvs-sys-line-height-title-small);
+  font-size: var(--cnvs-sys-font-size-title-small);
+  color: var(--cnvs-sys-color-text-strong);
+}
+
+
+.cnvs-text.type-level-heading-large {
+  font-family: var(--cnvs-sys-font-family-default);
+  font-weight: var(--cnvs-sys-font-weight-bold);
+  line-height: var(--cnvs-sys-line-height-heading-large);
+  font-size: var(--cnvs-sys-font-size-heading-large);
+  color: var(--cnvs-sys-color-text-strong);
+}
+
+
+.cnvs-text.type-level-heading-medium {
+  font-family: var(--cnvs-sys-font-family-default);
+  font-weight: var(--cnvs-sys-font-weight-bold);
+  line-height: var(--cnvs-sys-line-height-heading-medium);
+  font-size: var(--cnvs-sys-font-size-heading-medium);
+  color: var(--cnvs-sys-color-text-strong);
+}
+
+
+.cnvs-text.type-level-heading-small {
+  font-family: var(--cnvs-sys-font-family-default);
+  font-weight: var(--cnvs-sys-font-weight-bold);
+  line-height: var(--cnvs-sys-line-height-heading-small);
+  font-size: var(--cnvs-sys-font-size-heading-small);
+  color: var(--cnvs-sys-color-text-strong);
+}
+
+
+.cnvs-text.type-level-body-large {
+  font-family: var(--cnvs-sys-font-family-default);
+  font-weight: var(--cnvs-sys-font-weight-normal);
+  line-height: var(--cnvs-sys-line-height-body-large);
+  font-size: var(--cnvs-sys-font-size-body-large);
+  color: var(--cnvs-sys-color-text-default);
+}
+
+
+.cnvs-text.type-level-body-medium {
+  font-family: var(--cnvs-sys-font-family-default);
+  font-weight: var(--cnvs-sys-font-weight-normal);
+  line-height: var(--cnvs-sys-line-height-body-medium);
+  font-size: var(--cnvs-sys-font-size-body-medium);
+  color: var(--cnvs-sys-color-text-default);
+}
+
+
+.cnvs-text.type-level-body-small {
+  font-family: var(--cnvs-sys-font-family-default);
+  font-weight: var(--cnvs-sys-font-weight-normal);
+  line-height: var(--cnvs-sys-line-height-body-small);
+  font-size: var(--cnvs-sys-font-size-body-small);
+  letter-spacing: var(--cnvs-base-letter-spacing-200);
+  color: var(--cnvs-sys-color-text-default);
+}
+
+
+.cnvs-text.type-level-subtext-large {
+  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);
+}
+
+
+.cnvs-text.type-level-subtext-medium {
+  font-family: var(--cnvs-sys-font-family-default);
+  font-weight: var(--cnvs-sys-font-weight-normal);
+  line-height: var(--cnvs-sys-line-height-subtext-medium);
+  font-size: var(--cnvs-sys-font-size-subtext-medium);
+  letter-spacing: var(--cnvs-base-letter-spacing-100);
+  color: var(--cnvs-sys-color-text-default);
+}
+
+
+.cnvs-text.type-level-subtext-small {
+  font-family: var(--cnvs-sys-font-family-default);
+  font-weight: var(--cnvs-sys-font-weight-normal);
+  line-height: var(--cnvs-sys-line-height-subtext-small);
+  font-size: var(--cnvs-sys-font-size-subtext-small);
+  letter-spacing: var(--cnvs-base-letter-spacing-50);
+  color: var(--cnvs-sys-color-text-default);
+}
+
+
+.cnvs-text.variant-error {
+  color: var(--cnvs-sys-color-text-critical-default);
+}
+
+
+.cnvs-text.variant-hint {
+  color: var(--cnvs-sys-color-text-hint);
+}
+
+
+.cnvs-text.variant-inverse {
+  color: var(--cnvs-sys-color-text-inverse);
+}
+
+
+.cnvs-subtext {
+  box-sizing: border-box;
+}
+
+
+.cnvs-body-text {
+  box-sizing: border-box;
+}
+
+
+.cnvs-heading {
+  box-sizing: border-box;
+}
+
+
+.cnvs-title {
+  box-sizing: border-box;
+}
+
+
+.cnvs-label-text {
+  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);
+}
+
+
+.cnvs-label-text.disabled {
+  cursor: default;
+  color: var(--cnvs-sys-color-text-disabled);
+}
+
+
+.cnvs-label-text.variant-inverse {
+  color: var(--cnvs-sys-color-text-inverse);
+}
+
+
+.cnvs-label-text.variant-error {
+  color: var(--cnvs-sys-color-text-critical-default);
+}
+
+
+.cnvs-label-text.variant-hint {
+  color: var(--cnvs-sys-color-text-hint);
+}
+
+
+.cnvs-label-text.variant-inverse.disabled {
+  opacity: var(--cnvs-sys-opacity-disabled);
+  color: var(--cnvs-sys-color-text-inverse);
+}
+

package/toast.css

@@ -0,0 +1,42 @@
+.cnvs-toast-close-icon {
+  box-sizing: border-box;
+  position: relative;
+}
+
+
+.cnvs-toast-icon {
+  box-sizing: border-box;
+  align-self: start;
+  margin: var(--cnvs-sys-space-x4) var(--cnvs-sys-space-x3);
+}
+
+
+.cnvs-toast-message {
+  box-sizing: border-box;
+  word-break: break-word;
+  margin-block-start: var(--cnvs-sys-space-zero);
+  margin-block-end: var(--cnvs-sys-space-zero);
+}
+
+
+.cnvs-toast-body {
+  box-sizing: border-box;
+  align-items: flex-start;
+  flex-direction: column;
+  justify-content: center;
+  padding-top: var(--cnvs-sys-space-x4);
+  padding-bottom: var(--cnvs-sys-space-x4);
+  flex-grow: 1;
+  gap: var(--cnvs-sys-space-x1);
+}
+
+
+.cnvs-toast {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  width: calc(calc(var(--cnvs-sys-space-x20) * 4) + var(--cnvs-sys-space-x10));
+  padding: var(--cnvs-sys-space-zero);
+  gap: var(--cnvs-sys-space-x1);
+}
+

package/tooltip.css

@@ -0,0 +1,79 @@
+@keyframes animation-2wqdc9 {
+  0% {
+    opacity: 0;
+    transform: translate(var(--cnvs-tooltip-translate-position-x), var(--cnvs-tooltip-translate-position-y));
+  }
+  
+  100% {
+    opacity: 1;
+    transform: translate(0);
+  }
+  
+}
+
+.cnvs-tooltip-container {
+  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-medium);
+  font-size: var(--cnvs-sys-font-size-subtext-medium);
+  letter-spacing: var(--cnvs-base-letter-spacing-100);
+  display: inline-flex;
+  position: relative;
+  padding: var(--cnvs-sys-space-x3);
+  color: var(--cnvs-sys-color-text-inverse);
+  animation-name: animation-2wqdc9;
+  animation-duration: 150ms;
+  animation-timing-function: ease-out;
+  transform-origin: var(--cnvs-tooltip-container-tooltip-transform-origin-vertical) var(--cnvs-tooltip-container-tooltip-transform-origin-horizontal);
+}
+
+.cnvs-tooltip-container a {
+  color: var(--cnvs-sys-color-text-inverse);
+  text-decoration: underline;
+}
+
+.cnvs-tooltip-container:before {
+  content: "";
+  border-radius: var(--cnvs-sys-shape-x1);
+  outline: 0.0625rem solid transparent;
+  outline-offset: -0.0625rem;
+  z-index: -1;
+  margin: var(--cnvs-sys-space-x1);
+  background-color: var(--cnvs-sys-color-bg-translucent);
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+body:has(:focus-visible, .focus) .cnvs-tooltip-container {
+  padding: calc(var(--cnvs-sys-space-x4) - calc(var(--cnvs-sys-space-x1) / 2));
+}
+
+body:has(:focus-visible, .focus) .cnvs-tooltip-container:before {
+  margin: calc(var(--cnvs-sys-space-x1) + calc(var(--cnvs-sys-space-x1) / 2));
+}
+
+[data-popper-reference-hidden] .cnvs-tooltip-container {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+[data-popper-placement="top-start"] .cnvs-tooltip-container, [data-popper-placement="bottom-start"] .cnvs-tooltip-container {
+  left: calc(var(--cnvs-sys-space-x1) * -1);
+}
+
+[data-popper-placement="top-end"] .cnvs-tooltip-container, [data-popper-placement="bottom-end"] .cnvs-tooltip-container {
+  right: calc(var(--cnvs-sys-space-x1) * -1);
+}
+
+[data-popper-placement="left-start"] .cnvs-tooltip-container, [data-popper-placement="right-start"] .cnvs-tooltip-container {
+  top: calc(var(--cnvs-sys-space-x1) * -1);
+}
+
+[data-popper-placement="left-end"] .cnvs-tooltip-container, [data-popper-placement="right-end"] .cnvs-tooltip-container {
+  bottom: calc(var(--cnvs-sys-space-x1) * -1);
+}
+