@workday/canvas-kit-css/text.css

The parent module that contains all Workday Canvas Kit CSS components

.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);
}