@roadtrip/css/styles/utilities/_color.css

CSS framework for Roadtrip Design System

/*
 * Colors utitlities
 *
 * Index
 * - Text colors
 * - Backgriund colors
 * - Icon colors
 *
 */


/* TEXT COLORS
 -------------------- */

.text-primary {
  color: var(--road-primary-10);
}

.text-secondary {
  color: var(--road-primary-50);
}

.text-accent {
  color: var(--road-secondary-50);
}

.text-info {
  color: var(--road-on-info-surface);
}

.text-success {
  color: var(--road-on-success-surface);
}

.text-warning {
  color: var(--road-on-warning-surface);
}

.text-danger {
  color: var(--road-on-danger-surface);
}

.text-gray {
  color: var(--road-on-surface-weak);
}

.text-gray-second {
  color: var(--road-on-surface-extra-weak);
}

.text-disabled {
  color: var(--road-on-surface-disabled);
}

.text-white {
  color: var(--road-on-primary);
}

/* BACKGROUND COLORS
 -------------------- */

.bg-primary {
  background-color: var(--road-primary-variant);
}

.bg-secondary {
  background-color: var(--road-primary);
}

.bg-accent {
  background-color: var(--road-secondary-500);
}

.bg-info {
  background-color: var(--road-info-surface-inverse);
}

.bg-success {
  background-color: var(--road-success-surface-inverse);
}

.bg-warning {
  background-color: var(--road-warning-surface-inverse);
}

.bg-danger {
  background-color: var(--road-danger-surface-inverse);
}

.bg-rating {
  background-color: var(--road-rating);
}

.bg-light {
  background-color: var(--road-surface-inverse);
}

.bg-white {
  background-color: var(--road-surface);
}