/* Neutral */
.text-color-neutral-0 {
  color: var(--swatches-neutral-0);
}

.bg-color-neutral-0 {
  background-color: var(--swatches-neutral-0);
}

.text-color-neutral-50 {
  color: var(--swatches-neutral-50);
}

.bg-color-neutral-50 {
  background-color: var(--swatches-neutral-50);
}

.text-color-neutral-100 {
  color: var(--swatches-neutral-100);
}

.bg-color-neutral-100 {
  background-color: var(--swatches-neutral-100);
}

.text-color-neutral-200 {
  color: var(--swatches-neutral-200);
}

.bg-color-neutral-200 {
  background-color: var(--swatches-neutral-200);
}

.text-color-neutral-300 {
  color: var(--swatches-neutral-300);
}

.bg-color-neutral-300 {
  background-color: var(--swatches-neutral-300);
}

.text-color-neutral-400 {
  color: var(--swatches-neutral-400);
}

.bg-color-neutral-400 {
  background-color: var(--swatches-neutral-400);
}

.text-color-neutral-500 {
  color: var(--swatches-neutral-500);
}

.bg-color-neutral-500 {
  background-color: var(--swatches-neutral-500);
}

.text-color-neutral-600 {
  color: var(--swatches-neutral-600);
}

.bg-color-neutral-600 {
  background-color: var(--swatches-neutral-600);
}

.text-color-neutral-700 {
  color: var(--swatches-neutral-700);
}

.bg-color-neutral-700 {
  background-color: var(--swatches-neutral-700);
}

.text-color-neutral-800 {
  color: var(--swatches-neutral-800);
}

.bg-color-neutral-800 {
  background-color: var(--swatches-neutral-800);
}

.text-color-neutral-900 {
  color: var(--swatches-neutral-900);
}

.bg-color-neutral-900 {
  background-color: var(--swatches-neutral-900);
}

.text-color-neutral-950 {
  color: var(--swatches-neutral-950);
}

.bg-color-neutral-950 {
  background-color: var(--swatches-neutral-950);
}

.text-color-neutral-1000 {
  color: var(--swatches-neutral-1000);
}

.bg-color-neutral-1000 {
  background-color: var(--swatches-neutral-1000);
}

.text-color-neutral-950-alpha-5 {
  color: var(--swatches-neutral-950-alpha-5);
}

.bg-color-neutral-950-alpha-5 {
  background-color: var(--swatches-neutral-950-alpha-5);
}

.text-color-neutral-950-alpha-10 {
  color: var(--swatches-neutral-950-alpha-10);
}

.bg-color-neutral-950-alpha-10 {
  background-color: var(--swatches-neutral-950-alpha-10);
}

.text-color-neutral-950-alpha-20 {
  color: var(--swatches-neutral-950-alpha-20);
}

.bg-color-neutral-950-alpha-20 {
  background-color: var(--swatches-neutral-950-alpha-20);
}

.text-color-neutral-950-alpha-80 {
  color: var(--swatches-neutral-950-alpha-80);
}

.bg-color-neutral-950-alpha-80 {
  background-color: var(--swatches-neutral-950-alpha-80);
}

/* Primary */

.text-color-primary-50 {
  color: var(--swatches-primary-50);
}
.bg-color-primary-50 {
  background-color: var(--swatches-primary-50);
}

.text-color-primary-100 {
  color: var(--swatches-primary-100);
}
.bg-color-primary-100 {
  background-color: var(--swatches-primary-100);
}

.text-color-primary-200 {
  color: var(--swatches-primary-200);
}
.bg-color-primary-200 {
  background-color: var(--swatches-primary-200);
}

.text-color-primary-300 {
  color: var(--swatches-primary-300);
}
.bg-color-primary-300 {
  background-color: var(--swatches-primary-300);
}

.text-color-primary-400 {
  color: var(--swatches-primary-400);
}
.bg-color-primary-400 {
  background-color: var(--swatches-primary-400);
}

.text-color-primary-500 {
  color: var(--swatches-primary-500);
}
.bg-color-primary-500 {
  background-color: var(--swatches-primary-500);
}

.text-color-primary-600 {
  color: var(--swatches-primary-600);
}
.bg-color-primary-600 {
  background-color: var(--swatches-primary-600);
}

.text-color-primary-700 {
  color: var(--swatches-primary-700);
}
.bg-color-primary-700 {
  background-color: var(--swatches-primary-700);
}

.text-color-primary-800 {
  color: var(--swatches-primary-800);
}
.bg-color-primary-800 {
  background-color: var(--swatches-primary-800);
}

.text-color-primary-900 {
  color: var(--swatches-primary-900);
}
.bg-color-primary-900 {
  background-color: var(--swatches-primary-900);
}

.text-color-primary-950 {
  color: var(--swatches-primary-950);
}
.bg-color-primary-950 {
  background-color: var(--swatches-primary-950);
}

.text-color-yellow-50 {
  color: var(--swatches-yellow-50);
}
.bg-color-yellow-50 {
  background-color: var(--swatches-yellow-50);
}

/* Yellow */

.text-color-yellow-100 {
  color: var(--swatches-yellow-100);
}
.bg-color-yellow-100 {
  background-color: var(--swatches-yellow-100);
}

.text-color-yellow-200 {
  color: var(--swatches-yellow-200);
}
.bg-color-yellow-200 {
  background-color: var(--swatches-yellow-200);
}

.text-color-yellow-300 {
  color: var(--swatches-yellow-300);
}
.bg-color-yellow-300 {
  background-color: var(--swatches-yellow-300);
}

.text-color-yellow-400 {
  color: var(--swatches-yellow-400);
}
.bg-color-yellow-400 {
  background-color: var(--swatches-yellow-400);
}

.text-color-yellow-500 {
  color: var(--swatches-yellow-500);
}
.bg-color-yellow-500 {
  background-color: var(--swatches-yellow-500);
}

.text-color-yellow-600 {
  color: var(--swatches-yellow-600);
}
.bg-color-yellow-600 {
  background-color: var(--swatches-yellow-600);
}

.text-color-yellow-700 {
  color: var(--swatches-yellow-700);
}
.bg-color-yellow-700 {
  background-color: var(--swatches-yellow-700);
}

.text-color-yellow-800 {
  color: var(--swatches-yellow-800);
}
.bg-color-yellow-800 {
  background-color: var(--swatches-yellow-800);
}

.text-color-yellow-900 {
  color: var(--swatches-yellow-900);
}
.bg-color-yellow-900 {
  background-color: var(--swatches-yellow-900);
}

.text-color-yellow-950 {
  color: var(--swatches-yellow-950);
}
.bg-color-yellow-950 {
  background-color: var(--swatches-yellow-950);
}

/* Orange */

.text-color-orange-50 {
  color: var(--swatches-orange-50);
}
.bg-color-orange-50 {
  background-color: var(--swatches-orange-50);
}

.text-color-orange-100 {
  color: var(--swatches-orange-100);
}
.bg-color-orange-100 {
  background-color: var(--swatches-orange-100);
}

.text-color-orange-200 {
  color: var(--swatches-orange-200);
}
.bg-color-orange-200 {
  background-color: var(--swatches-orange-200);
}

.text-color-orange-300 {
  color: var(--swatches-orange-300);
}
.bg-color-orange-300 {
  background-color: var(--swatches-orange-300);
}

.text-color-orange-400 {
  color: var(--swatches-orange-400);
}
.bg-color-orange-400 {
  background-color: var(--swatches-orange-400);
}

.text-color-orange-500 {
  color: var(--swatches-orange-500);
}
.bg-color-orange-500 {
  background-color: var(--swatches-orange-500);
}

.text-color-orange-600 {
  color: var(--swatches-orange-600);
}
.bg-color-orange-600 {
  background-color: var(--swatches-orange-600);
}

.text-color-orange-700 {
  color: var(--swatches-orange-700);
}
.bg-color-orange-700 {
  background-color: var(--swatches-orange-700);
}

.text-color-orange-800 {
  color: var(--swatches-orange-800);
}
.bg-color-orange-800 {
  background-color: var(--swatches-orange-800);
}

.text-color-orange-900 {
  color: var(--swatches-orange-900);
}
.bg-color-orange-900 {
  background-color: var(--swatches-orange-900);
}

.text-color-orange-950 {
  color: var(--swatches-orange-950);
}
.bg-color-orange-950 {
  background-color: var(--swatches-orange-950);
}

/* Red */

.text-color-red-50 {
  color: var(--swatches-red-50);
}
.bg-color-red-50 {
  background-color: var(--swatches-red-50);
}

.text-color-red-100 {
  color: var(--swatches-red-100);
}
.bg-color-red-100 {
  background-color: var(--swatches-red-100);
}

.text-color-red-200 {
  color: var(--swatches-red-200);
}
.bg-color-red-200 {
  background-color: var(--swatches-red-200);
}

.text-color-red-300 {
  color: var(--swatches-red-300);
}
.bg-color-red-300 {
  background-color: var(--swatches-red-300);
}

.text-color-red-400 {
  color: var(--swatches-red-400);
}
.bg-color-red-400 {
  background-color: var(--swatches-red-400);
}

.text-color-red-500 {
  color: var(--swatches-red-500);
}
.bg-color-red-500 {
  background-color: var(--swatches-red-500);
}

.text-color-red-600 {
  color: var(--swatches-red-600);
}
.bg-color-red-600 {
  background-color: var(--swatches-red-600);
}

.text-color-red-700 {
  color: var(--swatches-red-700);
}
.bg-color-red-700 {
  background-color: var(--swatches-red-700);
}

.text-color-red-800 {
  color: var(--swatches-red-800);
}
.bg-color-red-800 {
  background-color: var(--swatches-red-800);
}

.text-color-red-900 {
  color: var(--swatches-red-900);
}
.bg-color-red-900 {
  background-color: var(--swatches-red-900);
}

.text-color-red-950 {
  color: var(--swatches-red-950);
}
.bg-color-red-950 {
  background-color: var(--swatches-red-950);
}

/* Pink */

.text-color-pink-50 {
  color: var(--swatches-pink-50);
}
.bg-color-pink-50 {
  background-color: var(--swatches-pink-50);
}

.text-color-pink-100 {
  color: var(--swatches-pink-100);
}
.bg-color-pink-100 {
  background-color: var(--swatches-pink-100);
}

.text-color-pink-200 {
  color: var(--swatches-pink-200);
}
.bg-color-pink-200 {
  background-color: var(--swatches-pink-200);
}

.text-color-pink-300 {
  color: var(--swatches-pink-300);
}
.bg-color-pink-300 {
  background-color: var(--swatches-pink-300);
}

.text-color-pink-400 {
  color: var(--swatches-pink-400);
}
.bg-color-pink-400 {
  background-color: var(--swatches-pink-400);
}

.text-color-pink-500 {
  color: var(--swatches-pink-500);
}
.bg-color-pink-500 {
  background-color: var(--swatches-pink-500);
}

.text-color-pink-600 {
  color: var(--swatches-pink-600);
}
.bg-color-pink-600 {
  background-color: var(--swatches-pink-600);
}

.text-color-pink-700 {
  color: var(--swatches-pink-700);
}
.bg-color-pink-700 {
  background-color: var(--swatches-pink-700);
}

.text-color-pink-800 {
  color: var(--swatches-pink-800);
}
.bg-color-pink-800 {
  background-color: var(--swatches-pink-800);
}

.text-color-pink-900 {
  color: var(--swatches-pink-900);
}
.bg-color-pink-900 {
  background-color: var(--swatches-pink-900);
}

.text-color-pink-950 {
  color: var(--swatches-pink-950);
}
.bg-color-pink-950 {
  background-color: var(--swatches-pink-950);
}

/* Purple */

.text-color-purple-50 {
  color: var(--swatches-purple-50);
}
.bg-color-purple-50 {
  background-color: var(--swatches-purple-50);
}

.text-color-purple-100 {
  color: var(--swatches-purple-100);
}
.bg-color-purple-100 {
  background-color: var(--swatches-purple-100);
}

.text-color-purple-200 {
  color: var(--swatches-purple-200);
}
.bg-color-purple-200 {
  background-color: var(--swatches-purple-200);
}

.text-color-purple-300 {
  color: var(--swatches-purple-300);
}
.bg-color-purple-300 {
  background-color: var(--swatches-purple-300);
}

.text-color-purple-400 {
  color: var(--swatches-purple-400);
}
.bg-color-purple-400 {
  background-color: var(--swatches-purple-400);
}

.text-color-purple-500 {
  color: var(--swatches-purple-500);
}
.bg-color-purple-500 {
  background-color: var(--swatches-purple-500);
}

.text-color-purple-600 {
  color: var(--swatches-purple-600);
}
.bg-color-purple-600 {
  background-color: var(--swatches-purple-600);
}

.text-color-purple-700 {
  color: var(--swatches-purple-700);
}
.bg-color-purple-700 {
  background-color: var(--swatches-purple-700);
}

.text-color-purple-800 {
  color: var(--swatches-purple-800);
}
.bg-color-purple-800 {
  background-color: var(--swatches-purple-800);
}

.text-color-purple-900 {
  color: var(--swatches-purple-900);
}
.bg-color-purple-900 {
  background-color: var(--swatches-purple-900);
}

.text-color-purple-950 {
  color: var(--swatches-purple-950);
}
.bg-color-purple-950 {
  background-color: var(--swatches-purple-950);
}

/* Blue */
.text-color-blue-50 {
  color: var(--swatches-blue-50);
}
.bg-color-blue-50 {
  background-color: var(--swatches-blue-50);
}

.text-color-blue-100 {
  color: var(--swatches-blue-100);
}
.bg-color-blue-100 {
  background-color: var(--swatches-blue-100);
}

.text-color-blue-200 {
  color: var(--swatches-blue-200);
}
.bg-color-blue-200 {
  background-color: var(--swatches-blue-200);
}

.text-color-blue-300 {
  color: var(--swatches-blue-300);
}
.bg-color-blue-300 {
  background-color: var(--swatches-blue-300);
}

.text-color-blue-400 {
  color: var(--swatches-blue-400);
}
.bg-color-blue-400 {
  background-color: var(--swatches-blue-400);
}

.text-color-blue-500 {
  color: var(--swatches-blue-500);
}
.bg-color-blue-500 {
  background-color: var(--swatches-blue-500);
}

.text-color-blue-600 {
  color: var(--swatches-blue-600);
}
.bg-color-blue-600 {
  background-color: var(--swatches-blue-600);
}

.text-color-blue-700 {
  color: var(--swatches-blue-700);
}
.bg-color-blue-700 {
  background-color: var(--swatches-blue-700);
}

.text-color-blue-800 {
  color: var(--swatches-blue-800);
}
.bg-color-blue-800 {
  background-color: var(--swatches-blue-800);
}

.text-color-blue-900 {
  color: var(--swatches-blue-900);
}
.bg-color-blue-900 {
  background-color: var(--swatches-blue-900);
}

.text-color-blue-950 {
  color: var(--swatches-blue-950);
}
.bg-color-blue-950 {
  background-color: var(--swatches-blue-950);
}

/* Cyan */
.text-color-cyan-50 {
  color: var(--swatches-cyan-50);
}
.bg-color-cyan-50 {
  background-color: var(--swatches-cyan-50);
}

.text-color-cyan-100 {
  color: var(--swatches-cyan-100);
}
.bg-color-cyan-100 {
  background-color: var(--swatches-cyan-100);
}

.text-color-cyan-200 {
  color: var(--swatches-cyan-200);
}
.bg-color-cyan-200 {
  background-color: var(--swatches-cyan-200);
}

.text-color-cyan-300 {
  color: var(--swatches-cyan-300);
}
.bg-color-cyan-300 {
  background-color: var(--swatches-cyan-300);
}

.text-color-cyan-400 {
  color: var(--swatches-cyan-400);
}
.bg-color-cyan-400 {
  background-color: var(--swatches-cyan-400);
}

.text-color-cyan-500 {
  color: var(--swatches-cyan-500);
}
.bg-color-cyan-500 {
  background-color: var(--swatches-cyan-500);
}

.text-color-cyan-600 {
  color: var(--swatches-cyan-600);
}
.bg-color-cyan-600 {
  background-color: var(--swatches-cyan-600);
}

.text-color-cyan-700 {
  color: var(--swatches-cyan-700);
}
.bg-color-cyan-700 {
  background-color: var(--swatches-cyan-700);
}

.text-color-cyan-800 {
  color: var(--swatches-cyan-800);
}
.bg-color-cyan-800 {
  background-color: var(--swatches-cyan-800);
}

.text-color-cyan-900 {
  color: var(--swatches-cyan-900);
}
.bg-color-cyan-900 {
  background-color: var(--swatches-cyan-900);
}

.text-color-cyan-950 {
  color: var(--swatches-cyan-950);
}
.bg-color-cyan-950 {
  background-color: var(--swatches-cyan-950);
}

/* Teal */
.text-color-teal-50 {
  color: var(--swatches-teal-50);
}
.bg-color-teal-50 {
  background-color: var(--swatches-teal-50);
}

.text-color-teal-100 {
  color: var(--swatches-teal-100);
}
.bg-color-teal-100 {
  background-color: var(--swatches-teal-100);
}

.text-color-teal-200 {
  color: var(--swatches-teal-200);
}
.bg-color-teal-200 {
  background-color: var(--swatches-teal-200);
}

.text-color-teal-300 {
  color: var(--swatches-teal-300);
}
.bg-color-teal-300 {
  background-color: var(--swatches-teal-300);
}

.text-color-teal-400 {
  color: var(--swatches-teal-400);
}
.bg-color-teal-400 {
  background-color: var(--swatches-teal-400);
}

.text-color-teal-500 {
  color: var(--swatches-teal-500);
}
.bg-color-teal-500 {
  background-color: var(--swatches-teal-500);
}

.text-color-teal-600 {
  color: var(--swatches-teal-600);
}
.bg-color-teal-600 {
  background-color: var(--swatches-teal-600);
}

.text-color-teal-700 {
  color: var(--swatches-teal-700);
}
.bg-color-teal-700 {
  background-color: var(--swatches-teal-700);
}

.text-color-teal-800 {
  color: var(--swatches-teal-800);
}
.bg-color-teal-800 {
  background-color: var(--swatches-teal-800);
}

.text-color-teal-900 {
  color: var(--swatches-teal-900);
}
.bg-color-teal-900 {
  background-color: var(--swatches-teal-900);
}

.text-color-teal-950 {
  color: var(--swatches-teal-950);
}
.bg-color-teal-950 {
  background-color: var(--swatches-teal-950);
}

/* Green */

.text-color-green-50 {
  color: var(--swatches-green-50);
}
.bg-color-green-50 {
  background-color: var(--swatches-green-50);
}

.text-color-green-100 {
  color: var(--swatches-green-100);
}
.bg-color-green-100 {
  background-color: var(--swatches-green-100);
}

.text-color-green-200 {
  color: var(--swatches-green-200);
}
.bg-color-green-200 {
  background-color: var(--swatches-green-200);
}

.text-color-green-300 {
  color: var(--swatches-green-300);
}
.bg-color-green-300 {
  background-color: var(--swatches-green-300);
}

.text-color-green-400 {
  color: var(--swatches-green-400);
}
.bg-color-green-400 {
  background-color: var(--swatches-green-400);
}

.text-color-green-500 {
  color: var(--swatches-green-500);
}
.bg-color-green-500 {
  background-color: var(--swatches-green-500);
}

.text-color-green-600 {
  color: var(--swatches-green-600);
}
.bg-color-green-600 {
  background-color: var(--swatches-green-600);
}

.text-color-green-700 {
  color: var(--swatches-green-700);
}
.bg-color-green-700 {
  background-color: var(--swatches-green-700);
}

.text-color-green-800 {
  color: var(--swatches-green-800);
}
.bg-color-green-800 {
  background-color: var(--swatches-green-800);
}

.text-color-green-900 {
  color: var(--swatches-green-900);
}
.bg-color-green-900 {
  background-color: var(--swatches-green-900);
}

.text-color-green-950 {
  color: var(--swatches-green-950);
}
.bg-color-green-950 {
  background-color: var(--swatches-green-950);
}

/* Color on Surface - Neutral */
.text-on-surface-neutral-primary {
  color: var(--color-on-surface-neutral-primary);
}
.text-on-surface-neutral-secondary {
  color: var(--color-on-surface-neutral-secondary);
}
.text-on-surface-neutral-disabled {
  color: var(--color-on-surface-neutral-disabled);
}

/* Color on Surface - Brand */
.text-on-surface-brand-primary {
  color: var(--color-on-surface-brand-primary);
}
.text-on-surface-brand-disabled {
  color: var(--color-on-surface-brand-disabled);
}

/* Color on Surface - Alt */
.text-on-surface-alt-primary {
  color: var(--color-on-surface-alt-primary);
}
.text-on-surface-alt-secondary {
  color: var(--color-on-surface-alt-secondary);
}
.text-on-surface-alt-disabled {
  color: var(--color-on-surface-alt-disabled);
}

/* Color on Surface - Success */
.text-on-surface-success-primary {
  color: var(--color-on-surface-success-primary);
}
.text-on-surface-success-disabled {
  color: var(--color-on-surface-success-disabled);
}

/* Color on Surface - Info */
.text-on-surface-info-primary {
  color: var(--color-on-surface-info-primary);
}
.text-on-surface-info-disabled {
  color: var(--color-on-surface-info-disabled);
}

/* Color on Surface - Warning */
.text-on-surface-warning-primary {
  color: var(--color-on-surface-warning-primary);
}
.text-on-surface-warning-disabled {
  color: var(--color-on-surface-warning-disabled);
}

/* Color on Surface - Danger */
.text-on-surface-danger-primary {
  color: var(--color-on-surface-danger-primary);
}
.text-on-surface-danger-disabled {
  color: var(--color-on-surface-danger-disabled);
}

/* Color Surface - Neutral */
.bg-surface-neutral-idle {
  background-color: var(--color-surface-neutral-idle);
}
.bg-surface-neutral-hover {
  background-color: var(--color-surface-neutral-hover);
}
.bg-surface-neutral-press {
  background-color: var(--color-surface-neutral-press);
}
.bg-surface-neutral-disabled {
  background-color: var(--color-surface-neutral-disabled);
}
.bg-surface-neutral-nested {
  background-color: var(--color-surface-neutral-nested);
}

/* Color Surface - Alt */
.bg-surface-alt-idle {
  background-color: var(--color-surface-alt-idle);
}
.bg-surface-alt-hover {
  background-color: var(--color-surface-alt-hover);
}
.bg-surface-alt-press {
  background-color: var(--color-surface-alt-press);
}
.bg-surface-alt-disabled {
  background-color: var(--color-surface-alt-disabled);
}
.bg-surface-alt-nested {
  background-color: var(--color-surface-alt-nested);
}

/* Color Surface - Brand */
.bg-surface-brand-idle {
  background-color: var(--color-surface-brand-idle);
}
.bg-surface-brand-hover {
  background-color: var(--color-surface-brand-hover);
}
.bg-surface-brand-press {
  background-color: var(--color-surface-brand-press);
}
.bg-surface-brand-disabled {
  background-color: var(--color-surface-brand-disabled);
}

/* Color Surface - Success */
.bg-surface-success-idle {
  background-color: var(--color-surface-success-idle);
}
.bg-surface-success-hover {
  background-color: var(--color-surface-success-hover);
}
.bg-surface-success-press {
  background-color: var(--color-surface-success-press);
}
.bg-surface-success-disabled {
  background-color: var(--color-surface-success-disabled);
}

/* Color Surface - Info */
.bg-surface-info-idle {
  background-color: var(--color-surface-info-idle);
}
.bg-surface-info-hover {
  background-color: var(--color-surface-info-hover);
}
.bg-surface-info-press {
  background-color: var(--color-surface-info-press);
}
.bg-surface-info-disabled {
  background-color: var(--color-surface-info-disabled);
}

/* Color Surface - Warning */
.bg-surface-warning-idle {
  background-color: var(--color-surface-warning-idle);
}
.bg-surface-warning-hover {
  background-color: var(--color-surface-warning-hover);
}
.bg-surface-warning-press {
  background-color: var(--color-surface-warning-press);
}
.bg-surface-warning-disabled {
  background-color: var(--color-surface-warning-disabled);
}

/* Color Surface - Danger */
.bg-surface-danger-idle {
  background-color: var(--color-surface-danger-idle);
}
.bg-surface-danger-hover {
  background-color: var(--color-surface-danger-hover);
}
.bg-surface-danger-press {
  background-color: var(--color-surface-danger-press);
}
.bg-surface-danger-disabled {
  background-color: var(--color-surface-danger-disabled);
}

/* Other */

.bg-color-other-idle {
  background-color: var(--color-other-bg-idle);
}
.bg-color-other-hover {
  background-color: var(--color-other-bg-hover);
}
.bg-color-other-pressed {
  background-color: var(--color-other-bg-pressed);
}
.bg-color-other-disabled {
  background-color: var(--color-other-bg-disabled);
}
.bg-color-other-overlay {
  background-color: var(--color-other-overlay);
}
.bg-color-other-skeleton {
  background-color: var(--color-other-skeleton);
}

/* Color Data - 10 */
.text-color-data-10-light {
  color: var(--color-data-10-light);
}
.bg-color-data-10-light {
  background-color: var(--color-data-10-light);
}
.text-color-data-10-default {
  color: var(--color-data-10-default);
}
.bg-color-data-10-default {
  background-color: var(--color-data-10-default);
}
.text-color-data-10-dark {
  color: var(--color-data-10-dark);
}
.bg-color-data-10-dark {
  background-color: var(--color-data-10-dark);
}

/* Color Data - 01 */
.text-color-data-01-light {
  color: var(--color-data-01-light);
}
.bg-color-data-01-light {
  background-color: var(--color-data-01-light);
}
.text-color-data-01-default {
  color: var(--color-data-01-default);
}
.bg-color-data-01-default {
  background-color: var(--color-data-01-default);
}
.text-color-data-01-dark {
  color: var(--color-data-01-dark);
}
.bg-color-data-01-dark {
  background-color: var(--color-data-01-dark);
}

/* Color Data - 02 */
.text-color-data-02-light {
  color: var(--color-data-02-light);
}
.bg-color-data-02-light {
  background-color: var(--color-data-02-light);
}
.text-color-data-02-default {
  color: var(--color-data-02-default);
}
.bg-color-data-02-default {
  background-color: var(--color-data-02-default);
}
.text-color-data-02-dark {
  color: var(--color-data-02-dark);
}
.bg-color-data-02-dark {
  background-color: var(--color-data-02-dark);
}

/* Color Data - 03 */
.text-color-data-03-light {
  color: var(--color-data-03-light);
}
.bg-color-data-03-light {
  background-color: var(--color-data-03-light);
}
.text-color-data-03-default {
  color: var(--color-data-03-default);
}
.bg-color-data-03-default {
  background-color: var(--color-data-03-default);
}
.text-color-data-03-dark {
  color: var(--color-data-03-dark);
}
.bg-color-data-03-dark {
  background-color: var(--color-data-03-dark);
}

/* Color Data - 04 */
.text-color-data-04-light {
  color: var(--color-data-04-light);
}
.bg-color-data-04-light {
  background-color: var(--color-data-04-light);
}
.text-color-data-04-default {
  color: var(--color-data-04-default);
}
.bg-color-data-04-default {
  background-color: var(--color-data-04-default);
}
.text-color-data-04-dark {
  color: var(--color-data-04-dark);
}
.bg-color-data-04-dark {
  background-color: var(--color-data-04-dark);
}

/* Color Data - 05 */
.text-color-data-05-light {
  color: var(--color-data-05-light);
}
.bg-color-data-05-light {
  background-color: var(--color-data-05-light);
}
.text-color-data-05-default {
  color: var(--color-data-05-default);
}
.bg-color-data-05-default {
  background-color: var(--color-data-05-default);
}
.text-color-data-05-dark {
  color: var(--color-data-05-dark);
}
.bg-color-data-05-dark {
  background-color: var(--color-data-05-dark);
}

/* Color Data - 06 */
.text-color-data-06-light {
  color: var(--color-data-06-light);
}
.bg-color-data-06-light {
  background-color: var(--color-data-06-light);
}
.text-color-data-06-default {
  color: var(--color-data-06-default);
}
.bg-color-data-06-default {
  background-color: var(--color-data-06-default);
}
.text-color-data-06-dark {
  color: var(--color-data-06-dark);
}
.bg-color-data-06-dark {
  background-color: var(--color-data-06-dark);
}

/* Color Data - 07 */
.text-color-data-07-light {
  color: var(--color-data-07-light);
}
.bg-color-data-07-light {
  background-color: var(--color-data-07-light);
}
.text-color-data-07-default {
  color: var(--color-data-07-default);
}
.bg-color-data-07-default {
  background-color: var(--color-data-07-default);
}
.text-color-data-07-dark {
  color: var(--color-data-07-dark);
}
.bg-color-data-07-dark {
  background-color: var(--color-data-07-dark);
}

/* Color Data - 08 */
.text-color-data-08-light {
  color: var(--color-data-08-light);
}
.bg-color-data-08-light {
  background-color: var(--color-data-08-light);
}
.text-color-data-08-default {
  color: var(--color-data-08-default);
}
.bg-color-data-08-default {
  background-color: var(--color-data-08-default);
}
.text-color-data-08-dark {
  color: var(--color-data-08-dark);
}
.bg-color-data-08-dark {
  background-color: var(--color-data-08-dark);
}

/* Color Data - 09 */
.text-color-data-09-light {
  color: var(--color-data-09-light);
}
.bg-color-data-09-light {
  background-color: var(--color-data-09-light);
}
.text-color-data-09-default {
  color: var(--color-data-09-default);
}
.bg-color-data-09-default {
  background-color: var(--color-data-09-default);
}
.text-color-data-09-dark {
  color: var(--color-data-09-dark);
}
.bg-color-data-09-dark {
  background-color: var(--color-data-09-dark);
}

.bg-color-transparent {
  background-color: transparent;
}

/* Fill colors */

.fill-color-brand {
  fill: var(--color-surface-brand-idle);
}

.fill-color-surface {
  fill: var(--color-surface-neutral-idle);
}

.fill-color-surface-alternative {
  fill: var(--color-surface-alt-idle);
}

.fill-color-neutral {
  fill: var(--color-surface-neutral-idle);
}

.fill-color-info {
  fill: var(--color-surface-info-idle);
}

.fill-color-success {
  fill: var(--color-surface-success-idle);
}

.fill-color-warning {
  fill: var(--color-surface-warning-idle);
}

.fill-color-danger {
  fill: var(--color-surface-danger-idle);
}