@workday/canvas-kit-css 13.2.0 → 13.2.2

package/switch.css

@@ -1,93 +0,0 @@
-.cnvs-switch-container {
-  box-sizing: border-box;
-  position: relative;
-  height: var(--cnvs-sys-space-x6);
-  width: var(--cnvs-sys-space-x8);
-}
-
-
-.cnvs-switch-input {
-  box-sizing: border-box;
-  display: flex;
-  position: absolute;
-  height: var(--cnvs-sys-space-x6);
-  width: var(--cnvs-sys-space-x8);
-  margin: var(--cnvs-sys-space-zero);
-  margin-left: var(--cnvs-sys-space-x1);
-  border-radius: var(--cnvs-sys-shape-round);
-  opacity: 0;
-  cursor: pointer;
-}
-
-.cnvs-switch-input:checked~div:first-of-type, .cnvs-switch-input.checked~div:first-of-type {
-  background-color: var(--cnvs-brand-primary-base);
-}
-
-.cnvs-switch-input:checked:disabled~div:first-of-type, .cnvs-switch-input.checked:disabled~div:first-of-type, .cnvs-switch-input:checked.disabled~div:first-of-type, .cnvs-switch-input.checked.disabled~div:first-of-type {
-  opacity: var(--cnvs-sys-opacity-disabled);
-}
-
-.cnvs-switch-input:disabled, .cnvs-switch-input.disabled {
-  cursor: not-allowed;
-}
-
-.cnvs-switch-input:disabled~div:first-of-type, .cnvs-switch-input.disabled~div:first-of-type {
-  opacity: var(--cnvs-sys-opacity-disabled);
-}
-
-.cnvs-switch-input:focus-visible, .cnvs-switch-input:focus, .cnvs-switch-input.focus {
-  outline: none;
-}
-
-.cnvs-switch-input:focus-visible~div:first-of-type, .cnvs-switch-input:focus~div:first-of-type, .cnvs-switch-input.focus~div:first-of-type {
-  box-shadow: 0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)),0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));
-}
-
-
-.cnvs-switch-input.error-error~div:first-of-type {
-  box-shadow: 0 0 0 0.125rem var(--cnvs-sys-color-border-inverse),0 0 0 var(--cnvs-sys-space-x1) var(--cnvs-brand-error-base),0 0 0 0.3125rem transparent;
-}
-
-
-.cnvs-switch-input.error-alert~div:first-of-type {
-  box-shadow: 0 0 0 0.125rem var(--cnvs-sys-color-border-inverse),0 0 0 var(--cnvs-sys-space-x1) var(--cnvs-brand-alert-base),0 0 0 0.3125rem var(--cnvs-brand-alert-darkest);
-}
-
-
-.cnvs-switch-background {
-  box-sizing: border-box;
-  position: absolute;
-  display: flex;
-  align-items: center;
-  pointer-events: none;
-  margin-top: var(--cnvs-sys-space-x1);
-  width: var(--cnvs-sys-space-x8);
-  height: var(--cnvs-sys-space-x4);
-  border-radius: var(--cnvs-sys-shape-round);
-  padding: var(--cnvs-sys-space-zero) 0.125rem;
-  transition: background-color 200ms ease;
-  background-color: var(--cnvs-sys-color-bg-muted-soft);
-}
-
-
-.cnvs-switch-circle {
-  box-sizing: border-box;
-  width: var(--cnvs-sys-space-x3);
-  height: var(--cnvs-sys-space-x3);
-  border-radius: var(--cnvs-sys-shape-round);
-  box-shadow: var(--cnvs-sys-depth-1);
-  transition: transform 150ms ease;
-  pointer-events: none;
-  background-color: var(--cnvs-brand-primary-accent);
-  transform: translateX(var(--cnvs-sys-space-zero));
-}
-
-
-.cnvs-switch-circle.checked {
-  transform: translateX(var(--cnvs-sys-space-x4));
-}
-
-.cnvs-switch-circle.checked :dir(rtl) {
-  transform: translateX(calc(var(--cnvs-sys-space-x4) * -1));
-}
-

package/table.css

@@ -1,132 +0,0 @@
-.cnvs-base-table-head {
-  box-sizing: border-box;
-  background-color: var(--cnvs-sys-color-bg-alt-softer);
-  min-height: calc(var(--cnvs-sys-space-x16) - var(--cnvs-sys-space-x4));
-}
-
-.cnvs-base-table-head th:first-of-type {
-  border-inline-start: none;
-}
-
-.cnvs-base-table-head th:last-of-type {
-  border-inline-end: none;
-}
-
-
-.cnvs-base-table-body {
-  box-sizing: border-box;
-}
-
-.cnvs-base-table-body tr:last-of-type td, .cnvs-base-table-body tr:last-of-type th {
-  border-bottom: none;
-}
-
-.cnvs-base-table-body tr:first-of-type td, .cnvs-base-table-body tr:first-of-type th {
-  border-top: none;
-}
-
-.cnvs-base-table-body td:last-of-type {
-  border-inline-end: none;
-}
-
-.cnvs-base-table-body td:first-of-type {
-  border-inline-start: none;
-}
-
-
-.cnvs-base-table-header {
-  box-sizing: border-box;
-  background-color: var(--cnvs-sys-color-bg-default);
-  border-bottom: 0.0625rem solid var(--cnvs-sys-color-border-divider);
-  justify-content: start;
-  min-height: calc(var(--cnvs-sys-space-x16) - var(--cnvs-sys-space-x2));
-  padding: var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);
-  word-break: break-word;
-  font-weight: var(--cnvs-sys-font-weight-medium);
-}
-
-
-.cnvs-base-table-cell {
-  box-sizing: border-box;
-  align-items: center;
-  background-color: var(--cnvs-sys-color-bg-default);
-  border-bottom: 0.0625rem solid var(--cnvs-sys-color-border-divider);
-  grid-template-columns: 1fr;
-  justify-content: start;
-  min-height: 3.5rem;
-  padding: var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);
-  word-break: break-word;
-}
-
-
-.cnvs-base-table-caption {
-  box-sizing: border-box;
-  padding: var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);
-}
-
-
-.cnvs-base-table {
-  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);
-  border: 0.0625rem solid var(--cnvs-sys-color-border-container);
-  border-radius: var(--cnvs-sys-shape-x2);
-  overflow: auto;
-  color: var(--cnvs-sys-color-text-default);
-}
-
-
-.cnvs-table-row {
-  box-sizing: border-box;
-  display: grid;
-  grid-auto-flow: column;
-  grid-template-columns: repeat(var(--cnvs-table-row-children-cell-number), minmax(10rem, 1fr));
-}
-
-
-.cnvs-table {
-  box-sizing: border-box;
-  display: grid;
-}
-
-
-.cnvs-table-body {
-  box-sizing: border-box;
-  display: grid;
-}
-
-
-.cnvs-table-caption {
-  box-sizing: border-box;
-  display: flex;
-  border-bottom: 0.0625rem solid var(--cnvs-sys-color-border-container);
-}
-
-
-.cnvs-table-cell {
-  box-sizing: border-box;
-  display: grid;
-}
-
-
-.cnvs-table-footer {
-  box-sizing: border-box;
-  display: grid;
-}
-
-
-.cnvs-table-head {
-  box-sizing: border-box;
-  display: grid;
-}
-
-
-.cnvs-table-header {
-  box-sizing: border-box;
-  display: grid;
-  align-items: center;
-}
-

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-base-palette-soap-200);
-  color: var(--cnvs-base-palette-black-pepper-400);
-  --cnvs-system-icon-color: var(--cnvs-sys-color-icon-strong);
-}
-
-.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-base-palette-french-vanilla-100, 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);
-}
-