@under-io/tailwind/src/config/utilities.css

Under engineering Tailwind configuration

/** Text Colors **/
@utility text-primary {
  color: var(--text-primary);
}
@utility text-secondary {
  color: var(--text-secondary);
}
@utility text-secondary_hover {
  color: var(--text-secondary_hover);
}
@utility text-secondary_on-brand {
  color: var(--text-secondary_on-brand);
}
@utility text-tertiary {
  color: var(--text-tertiary);
}
@utility text-tertiary_hover {
  color: var(--text-tertiary_hover);
}
@utility text-tertiary_on-brand {
  color: var(--text-tertiary_on-brand);
}
@utility text-quaternary {
  color: var(--text-quaternary);
}
@utility text-quaternary_on-brand {
  color: var(--text-quaternary_on-brand);
}
@utility text-disabled {
  color: var(--text-disabled);
}
@utility text-placeholder {
  color: var(--text-placeholder);
}
@utility text-placeholder_subtle {
  color: var(--text-placeholder_subtle);
}
@utility text-brand-primary {
  color: var(--text-brand-primary);
}
@utility text-brand-secondary {
  color: var(--text-brand-secondary);
}
@utility text-brand-tertiary {
  color: var(--text-brand-tertiary);
}
@utility text-brand-tertiary_alt {
  color: var(--text-brand-tertiary_alt);
}
@utility text-error {
  color: var(--text-error);
}
@utility text-warning {
  color: var(--text-warning);
}
@utility text-success {
  color: var(--text-success);
}

/** Border classes **/
@utility border-primary {
  border-color: var(--border-primary);
}
@utility border-secondary {
  border-color: var(--border-secondary);
}
@utility border-tertiary {
  border-color: var(--border-tertiary);
}
@utility border-disabled {
  border-color: var(--border-disabled);
}
@utility border-disabled_subtle {
  border-color: var(--border-disabled_subtle);
}
@utility border-brand {
  border-color: var(--border-brand);
}
@utility border-brand_alt {
  border-color: var(--border-brand_alt);
}
@utility border-error {
  border-color: var(--border-error);
}
@utility border-error_subtle {
  border-color: var(--border-error_subtle);
}

/** Background classes **/
@utility bg-primary {
  background-color: var(--bg-primary);
}
@utility bg-primary_alt {
  background-color: var(--bg-primary_alt);
}
@utility bg-primary_hover {
  background-color: var(--bg-primary_hover);
}
@utility bg-primary_solid {
  background-color: var(--bg-primary_solid);
}
@utility bg-secondary {
  background-color: var(--bg-secondary);
}
@utility bg-secondary_alt {
  background-color: var(--bg-secondary_alt);
}
@utility bg-secondary_hover {
  background-color: var(--bg-secondary_hover);
}
@utility bg-secondary_subtle {
  background-color: var(--bg-secondary_subtle);
}
@utility bg-secondary_solid {
  background-color: var(--bg-secondary_solid);
}
@utility bg-tertiary {
  background-color: var(--bg-tertiary);
}
@utility bg-quaternary {
  background-color: var(--bg-quaternary);
}
@utility bg-active {
  background-color: var(--bg-active);
}
@utility bg-disabled {
  background-color: var(--bg-disabled);
}
@utility bg-disabled_subtle {
  background-color: var(--bg-disabled_subtle);
}
@utility bg-overlay {
  background-color: var(--bg-overlay);
}
@utility bg-brand-primary {
  background-color: var(--bg-brand-primary);
}
@utility bg-brand-primary_alt {
  background-color: var(--bg-brand-primary_alt);
}
@utility bg-brand-secondary {
  background-color: var(--bg-brand-secondary);
}
@utility bg-brand-solid {
  background-color: var(--bg-brand-solid);
}
@utility bg-brand-solid_hover {
  background-color: var(--bg-brand-solid_hover);
}
@utility bg-brand-section {
  background-color: var(--bg-brand-section);
}
@utility bg-brand-section_subtle {
  background-color: var(--bg-brand-section_subtle);
}
@utility bg-error-primary {
  background-color: var(--bg-error-primary);
}
@utility bg-error-secondary {
  background-color: var(--bg-error-secondary);
}
@utility bg-error-solid {
  background-color: var(--bg-error-solid);
}
@utility bg-warning-primary {
  background-color: var(--bg-warning-primary);
}
@utility bg-warning-secondary {
  background-color: var(--bg-warning-secondary);
}
@utility bg-warning-solid {
  background-color: var(--bg-warning-solid);
}
@utility bg-success-primary {
  background-color: var(--bg-success-primary);
}
@utility bg-success-secondary {
  background-color: var(--bg-success-secondary);
}
@utility bg-success-solid {
  background-color: var(--bg-warning-solid);
}

/** Foreground classes **/
@utility fg-primary {
  color: var(--fg-primary);
}
@utility fg-secondary {
  color: var(--fg-secondary);
}
@utility fg-secondary_hover {
  color: var(--fg-secondary_hover);
}
@utility fg-tertiary {
  color: var(--fg-tertiary);
}
@utility fg-tertiary_hover {
  color: var(--fg-tertiary_hover);
}
@utility fg-quaternary {
  color: var(--fg-quaternary);
}
@utility fg-quaternary_hover {
  color: var(--fg-quaternary_hover);
}
@utility fg-quinary {
  color: var(--fg-quinary);
}
@utility fg-quinary_hover {
  color: var(--fg-quinary_hover);
}
@utility fg-senary {
  color: var(--fg-senary);
}
@utility fg-disabled {
  color: var(--fg-disabled);
}
@utility fg-disabled_subtle {
  color: var(--fg-disabled_subtle);
}
@utility fg-brand-primary {
  color: var(--fg-brand-primary);
}
@utility fg-brand-primary_alt {
  color: var(--fg-brand-primary_alt);
}
@utility fg-brand-secondary {
  color: var(--fg-brand-secondary);
}
@utility fg-error-primary {
  color: var(--fg-error-primary);
}
@utility fg-error-secondary {
  color: var(--fg-error-secondary);
}
@utility fg-warning-primary {
  color: var(--fg-warning-primary);
}
@utility fg-warning-secondary {
  color: var(--fg-warning-secondary);
}
@utility fg-success-primary {
  color: var(--fg-success-primary);
}
@utility fg-success-secondary {
  color: var(--fg-success-secondary);
}