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

package/tabs.css

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

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

@@ -1,146 +0,0 @@
-.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);
-  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-text-disabled);
-}
-
-.cnvs-text-input:is(:disabled, .disabled)::placeholder {
-  color: var(--cnvs-sys-color-text-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-error-base);
-  box-shadow: inset 0 0 0 0.0625rem var(--cnvs-brand-error-base);
-}
-
-.cnvs-text-input.error-error:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])) {
-  border-color: var(--cnvs-brand-error-base);
-}
-
-.cnvs-text-input.error-error:is(:focus-visible, .focus):not([disabled]) {
-  box-shadow: inset 0 0 0 0.0625rem var(--cnvs-brand-error-base),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-alert-darkest);
-  box-shadow: inset 0 0 0 0.125rem var(--cnvs-brand-alert-base);
-  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-alert-darkest);
-}
-
-.cnvs-text-input.error-alert:is(:focus-visible, .focus):not([disabled]) {
-  box-shadow: inset 0 0 0 0.125rem var(--cnvs-brand-alert-base),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

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

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

@@ -1,79 +0,0 @@
-@keyframes animation-pt3z2x {
-  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-pt3z2x;
-  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);
-}
-