@ebay/skin 18.0.8 → 18.2.0

package/src/routes/static/sass/demo-colors.scss

@@ -0,0 +1,766 @@
+.demo-color-blue-100::before {
+    background-color: var(--color-blue-100);
+}
+
+.demo-color-blue-200::before {
+    background-color: var(--color-blue-200);
+}
+
+.demo-color-blue-300::before {
+    background-color: var(--color-blue-300);
+}
+
+.demo-color-blue-400::before {
+    background-color: var(--color-blue-400);
+}
+
+.demo-color-blue-500::before {
+    background-color: var(--color-blue-500);
+}
+
+.demo-color-blue-600::before {
+    background-color: var(--color-blue-600);
+}
+
+.demo-color-blue-700::before {
+    background-color: var(--color-blue-700);
+}
+
+.demo-color-blue-800::before {
+    background-color: var(--color-blue-800);
+}
+
+.demo-color-indigo-100::before {
+    background-color: var(--color-indigo-100);
+}
+
+.demo-color-indigo-200::before {
+    background-color: var(--color-indigo-200);
+}
+
+.demo-color-indigo-300::before {
+    background-color: var(--color-indigo-300);
+}
+
+.demo-color-indigo-400::before {
+    background-color: var(--color-indigo-400);
+}
+
+.demo-color-indigo-500::before {
+    background-color: var(--color-indigo-500);
+}
+
+.demo-color-indigo-600::before {
+    background-color: var(--color-indigo-600);
+}
+
+.demo-color-indigo-700::before {
+    background-color: var(--color-indigo-700);
+}
+
+.demo-color-indigo-800::before {
+    background-color: var(--color-indigo-800);
+}
+
+.demo-color-violet-100::before {
+    background-color: var(--color-violet-100);
+}
+
+.demo-color-violet-200::before {
+    background-color: var(--color-violet-200);
+}
+
+.demo-color-violet-300::before {
+    background-color: var(--color-violet-300);
+}
+
+.demo-color-violet-400::before {
+    background-color: var(--color-violet-400);
+}
+
+.demo-color-violet-500::before {
+    background-color: var(--color-violet-500);
+}
+
+.demo-color-violet-600::before {
+    background-color: var(--color-violet-600);
+}
+
+.demo-color-violet-700::before {
+    background-color: var(--color-violet-700);
+}
+
+.demo-color-violet-800::before {
+    background-color: var(--color-violet-800);
+}
+
+.demo-color-lilac-100::before {
+    background-color: var(--color-lilac-100);
+}
+
+.demo-color-lilac-200::before {
+    background-color: var(--color-lilac-200);
+}
+
+.demo-color-lilac-300::before {
+    background-color: var(--color-lilac-300);
+}
+
+.demo-color-lilac-400::before {
+    background-color: var(--color-lilac-400);
+}
+
+.demo-color-lilac-500::before {
+    background-color: var(--color-lilac-500);
+}
+
+.demo-color-lilac-600::before {
+    background-color: var(--color-lilac-600);
+}
+
+.demo-color-lilac-700::before {
+    background-color: var(--color-lilac-700);
+}
+
+.demo-color-lilac-800::before {
+    background-color: var(--color-lilac-800);
+}
+
+.demo-color-red-100::before {
+    background-color: var(--color-red-100);
+}
+
+.demo-color-red-200::before {
+    background-color: var(--color-red-200);
+}
+
+.demo-color-red-300::before {
+    background-color: var(--color-red-300);
+}
+
+.demo-color-red-400::before {
+    background-color: var(--color-red-400);
+}
+
+.demo-color-red-500::before {
+    background-color: var(--color-red-500);
+}
+
+.demo-color-red-600::before {
+    background-color: var(--color-red-600);
+}
+
+.demo-color-red-700::before {
+    background-color: var(--color-red-700);
+}
+
+.demo-color-red-800::before {
+    background-color: var(--color-red-800);
+}
+
+.demo-color-pink-100::before {
+    background-color: var(--color-pink-100);
+}
+
+.demo-color-pink-200::before {
+    background-color: var(--color-pink-200);
+}
+
+.demo-color-pink-300::before {
+    background-color: var(--color-pink-300);
+}
+
+.demo-color-pink-400::before {
+    background-color: var(--color-pink-400);
+}
+
+.demo-color-pink-500::before {
+    background-color: var(--color-pink-500);
+}
+
+.demo-color-pink-600::before {
+    background-color: var(--color-pink-600);
+}
+
+.demo-color-pink-700::before {
+    background-color: var(--color-pink-700);
+}
+
+.demo-color-pink-800::before {
+    background-color: var(--color-pink-800);
+}
+
+.demo-color-green-100::before {
+    background-color: var(--color-green-100);
+}
+
+.demo-color-green-200::before {
+    background-color: var(--color-green-200);
+}
+
+.demo-color-green-300::before {
+    background-color: var(--color-green-300);
+}
+
+.demo-color-green-400::before {
+    background-color: var(--color-green-400);
+}
+
+.demo-color-green-500::before {
+    background-color: var(--color-green-500);
+}
+
+.demo-color-green-600::before {
+    background-color: var(--color-green-600);
+}
+
+.demo-color-green-700::before {
+    background-color: var(--color-green-700);
+}
+
+.demo-color-green-800::before {
+    background-color: var(--color-green-800);
+}
+
+.demo-color-jade-100::before {
+    background-color: var(--color-jade-100);
+}
+
+.demo-color-jade-200::before {
+    background-color: var(--color-jade-200);
+}
+
+.demo-color-jade-300::before {
+    background-color: var(--color-jade-300);
+}
+
+.demo-color-jade-400::before {
+    background-color: var(--color-jade-400);
+}
+
+.demo-color-jade-500::before {
+    background-color: var(--color-jade-500);
+}
+
+.demo-color-jade-600::before {
+    background-color: var(--color-jade-600);
+}
+
+.demo-color-jade-700::before {
+    background-color: var(--color-jade-700);
+}
+
+.demo-color-jade-800::before {
+    background-color: var(--color-jade-800);
+}
+
+.demo-color-marigold-100::before {
+    background-color: var(--color-marigold-100);
+}
+
+.demo-color-marigold-200::before {
+    background-color: var(--color-marigold-200);
+}
+
+.demo-color-marigold-300::before {
+    background-color: var(--color-marigold-300);
+}
+
+.demo-color-marigold-400::before {
+    background-color: var(--color-marigold-400);
+}
+
+.demo-color-marigold-500::before {
+    background-color: var(--color-marigold-500);
+}
+
+.demo-color-marigold-600::before {
+    background-color: var(--color-marigold-600);
+}
+
+.demo-color-marigold-700::before {
+    background-color: var(--color-marigold-700);
+}
+
+.demo-color-marigold-800::before {
+    background-color: var(--color-marigold-800);
+}
+
+.demo-color-dijon-100::before {
+    background-color: var(--color-dijon-100);
+}
+
+.demo-color-dijon-200::before {
+    background-color: var(--color-dijon-200);
+}
+
+.demo-color-dijon-300::before {
+    background-color: var(--color-dijon-300);
+}
+
+.demo-color-dijon-400::before {
+    background-color: var(--color-dijon-400);
+}
+
+.demo-color-dijon-500::before {
+    background-color: var(--color-dijon-500);
+}
+
+.demo-color-dijon-600::before {
+    background-color: var(--color-dijon-600);
+}
+
+.demo-color-dijon-700::before {
+    background-color: var(--color-dijon-700);
+}
+
+.demo-color-dijon-800::before {
+    background-color: var(--color-dijon-800);
+}
+
+.demo-color-orange-100::before {
+    background-color: var(--color-orange-100);
+}
+
+.demo-color-orange-200::before {
+    background-color: var(--color-orange-200);
+}
+
+.demo-color-orange-300::before {
+    background-color: var(--color-orange-300);
+}
+
+.demo-color-orange-400::before {
+    background-color: var(--color-orange-400);
+}
+
+.demo-color-orange-500::before {
+    background-color: var(--color-orange-500);
+}
+
+.demo-color-orange-600::before {
+    background-color: var(--color-orange-600);
+}
+
+.demo-color-orange-700::before {
+    background-color: var(--color-orange-700);
+}
+
+.demo-color-orange-800::before {
+    background-color: var(--color-orange-800);
+}
+
+.demo-color-coral-100::before {
+    background-color: var(--color-coral-100);
+}
+
+.demo-color-coral-200::before {
+    background-color: var(--color-coral-200);
+}
+
+.demo-color-coral-300::before {
+    background-color: var(--color-coral-300);
+}
+
+.demo-color-coral-400::before {
+    background-color: var(--color-coral-400);
+}
+
+.demo-color-coral-500::before {
+    background-color: var(--color-coral-500);
+}
+
+.demo-color-coral-600::before {
+    background-color: var(--color-coral-600);
+}
+
+.demo-color-coral-700::before {
+    background-color: var(--color-coral-700);
+}
+
+.demo-color-coral-800::before {
+    background-color: var(--color-coral-800);
+}
+
+.demo-color-yellow-100::before {
+    background-color: var(--color-yellow-100);
+}
+
+.demo-color-yellow-200::before {
+    background-color: var(--color-yellow-200);
+}
+
+.demo-color-yellow-300::before {
+    background-color: var(--color-yellow-300);
+}
+
+.demo-color-yellow-400::before {
+    background-color: var(--color-yellow-400);
+}
+
+.demo-color-yellow-500::before {
+    background-color: var(--color-yellow-500);
+}
+
+.demo-color-yellow-600::before {
+    background-color: var(--color-yellow-600);
+}
+
+.demo-color-yellow-700::before {
+    background-color: var(--color-marigold-700);
+}
+
+.demo-color-yellow-800::before {
+    background-color: var(--color-marigold-800);
+}
+
+.demo-color-teal-100::before {
+    background-color: var(--color-teal-100);
+}
+
+.demo-color-teal-200::before {
+    background-color: var(--color-teal-200);
+}
+
+.demo-color-teal-300::before {
+    background-color: var(--color-teal-300);
+}
+
+.demo-color-teal-400::before {
+    background-color: var(--color-teal-400);
+}
+
+.demo-color-teal-500::before {
+    background-color: var(--color-teal-500);
+}
+
+.demo-color-teal-600::before {
+    background-color: var(--color-teal-600);
+}
+
+.demo-color-teal-700::before {
+    background-color: var(--color-teal-700);
+}
+
+.demo-color-teal-800::before {
+    background-color: var(--color-teal-800);
+}
+
+.demo-color-avocado-100::before {
+    background-color: var(--color-avocado-100);
+}
+
+.demo-color-avocado-200::before {
+    background-color: var(--color-avocado-200);
+}
+
+.demo-color-avocado-300::before {
+    background-color: var(--color-avocado-300);
+}
+
+.demo-color-avocado-400::before {
+    background-color: var(--color-avocado-400);
+}
+
+.demo-color-avocado-500::before {
+    background-color: var(--color-avocado-500);
+}
+
+.demo-color-avocado-600::before {
+    background-color: var(--color-avocado-600);
+}
+
+.demo-color-avocado-700::before {
+    background-color: var(--color-avocado-700);
+}
+
+.demo-color-avocado-800::before {
+    background-color: var(--color-avocado-800);
+}
+
+.demo-color-kiwi-100::before {
+    background-color: var(--color-kiwi-100);
+}
+
+.demo-color-kiwi-200::before {
+    background-color: var(--color-kiwi-200);
+}
+
+.demo-color-kiwi-300::before {
+    background-color: var(--color-kiwi-300);
+}
+
+.demo-color-kiwi-400::before {
+    background-color: var(--color-kiwi-400);
+}
+
+.demo-color-kiwi-500::before {
+    background-color: var(--color-kiwi-500);
+}
+
+.demo-color-kiwi-600::before {
+    background-color: var(--color-kiwi-600);
+}
+
+.demo-color-kiwi-700::before {
+    background-color: var(--color-kiwi-700);
+}
+
+.demo-color-kiwi-800::before {
+    background-color: var(--color-kiwi-800);
+}
+
+.demo-color-neutral-100::before {
+    background-color: var(--color-neutral-100);
+    outline: 1px dashed var(--color-neutral-400);
+}
+
+.demo-color-neutral-200::before {
+    background-color: var(--color-neutral-200);
+}
+
+.demo-color-neutral-300::before {
+    background-color: var(--color-neutral-300);
+}
+
+.demo-color-neutral-400::before {
+    background-color: var(--color-neutral-400);
+}
+
+.demo-color-neutral-500::before {
+    background-color: var(--color-neutral-500);
+}
+
+.demo-color-neutral-600::before {
+    background-color: var(--color-neutral-600);
+}
+
+.demo-color-neutral-700::before {
+    background-color: var(--color-neutral-700);
+}
+
+.demo-color-neutral-800::before {
+    background-color: var(--color-neutral-800);
+}
+
+.demo-color-neutral-900::before {
+    background-color: var(--color-neutral-900);
+}
+
+.demo-color-background-primary::before {
+    background-color: var(--color-background-primary);
+    border: 1px solid var(--color-stroke-default);
+}
+
+.demo-color-background-secondary::before {
+    background-color: var(--color-background-secondary);
+}
+
+.demo-color-background-disabled::before {
+    background-color: var(--color-background-disabled);
+}
+
+.demo-color-background-inverse::before {
+    background-color: var(--color-background-inverse);
+}
+
+.demo-color-background-attention::before {
+    background-color: var(--color-background-attention);
+}
+
+.demo-color-background-confirmation::before {
+    background-color: var(--color-background-confirmation);
+}
+
+.demo-color-background-information::before {
+    background-color: var(--color-background-information);
+}
+
+.demo-color-background-accent::before {
+    background-color: var(--color-background-accent);
+}
+
+.demo-color-background-invalid::before {
+    background-color: var(--color-background-invalid);
+}
+
+.demo-color-foreground-primary::before {
+    background-color: var(--color-foreground-primary);
+}
+
+.demo-color-foreground-secondary::before {
+    background-color: var(--color-foreground-secondary);
+}
+
+.demo-color-foreground-disabled::before {
+    background-color: var(--color-foreground-disabled);
+}
+
+.demo-color-foreground-attention::before {
+    background-color: var(--color-foreground-attention);
+}
+
+.demo-color-foreground-confirmation::before {
+    background-color: var(--color-foreground-confirmation);
+}
+
+.demo-color-foreground-information::before {
+    background-color: var(--color-foreground-information);
+}
+
+.demo-color-foreground-accent::before {
+    background-color: var(--color-foreground-accent);
+}
+
+.demo-color-foreground-visited::before {
+    background-color: var(--color-foreground-visited);
+}
+
+.demo-color-foreground-on-primary::before {
+    background-color: var(--color-foreground-on-primary);
+}
+
+.demo-color-foreground-on-secondary::before {
+    background-color: var(--color-foreground-on-secondary);
+}
+
+.demo-color-foreground-on-disabled::before {
+    background-color: var(--color-foreground-on-disabled);
+}
+
+.demo-color-foreground-on-inverse::before {
+    background-color: var(--color-foreground-on-inverse);
+    border: 1px solid var(--color-stroke-default);
+}
+
+.demo-color-foreground-on-attention::before {
+    background-color: var(--color-foreground-on-attention);
+    border: 1px solid var(--color-stroke-default);
+}
+
+.demo-color-foreground-on-confirmation::before {
+    background-color: var(--color-foreground-on-confirmation);
+    border: 1px solid var(--color-stroke-default);
+}
+
+.demo-color-foreground-on-information::before {
+    background-color: var(--color-foreground-on-information);
+    border: 1px solid var(--color-stroke-default);
+}
+
+.demo-color-foreground-on-accent::before {
+    background-color: var(--color-foreground-on-accent);
+    border: 1px solid var(--color-stroke-default);
+}
+
+.demo-color-stroke-default::before {
+    background-color: var(--color-stroke-default);
+}
+
+.demo-color-stroke-accent::before {
+    background-color: var(--color-stroke-accent);
+}
+
+.demo-color-stroke-attention::before {
+    background-color: var(--color-stroke-attention);
+}
+
+.demo-color-stroke-confirmation::before {
+    background-color: var(--color-stroke-confirmation);
+}
+
+.demo-color-stroke-information::before {
+    background-color: var(--color-stroke-information);
+}
+
+.demo-color-stroke-disabled::before {
+    background-color: var(--color-stroke-disabled);
+}
+
+.demo-color-stroke-strong::before {
+    background-color: var(--color-stroke-strong);
+}
+
+.demo-color-stroke-subtle::before {
+    background-color: var(--color-stroke-subtle);
+}
+
+.demo-color-state-visited::before {
+    background-color: var(--color-state-visited);
+}
+
+.demo-color-state-primary-hover::before {
+    background-color: var(--color-state-primary-hover);
+}
+
+.demo-color-state-primary-active::before {
+    background-color: var(--color-state-primary-active);
+}
+
+.demo-color-state-secondary-hover::before {
+    background-color: var(--color-state-secondary-hover);
+}
+
+.demo-color-state-secondary-active::before {
+    background-color: var(--color-state-secondary-active);
+}
+
+.demo-color-state-inverse-hover::before {
+    background-color: var(--color-state-inverse-hover);
+}
+
+.demo-color-state-inverse-active::before {
+    background-color: var(--color-state-inverse-active);
+}
+
+.demo-color-state-accent-hover::before {
+    background-color: var(--color-state-accent-hover);
+}
+
+.demo-color-state-accent-active::before {
+    background-color: var(--color-state-accent-active);
+}
+
+.demo-color-state-attention-hover::before {
+    background-color: var(--color-state-attention-hover);
+}
+
+.demo-color-state-attention-active::before {
+    background-color: var(--color-state-attention-active);
+}
+
+.demo-color-scrim-image::before {
+    background-color: var(--color-scrim-image);
+}
+
+.demo-color-scrim-background::before {
+    background-color: var(--color-scrim-background);
+}
+
+.demo-color-ai-gradient-full-spectrum::before {
+    background: var(--color-ai-gradient-full-spectrum);
+}
+
+.demo-color-ai-gradient-green-strong::before {
+    background: var(--color-ai-gradient-green-strong);
+}
+
+.demo-color-ai-gradient-blue-strong::before {
+    background: var(--color-ai-gradient-blue-strong);
+}
+
+.demo-color-ai-gradient-purple-strong::before {
+    background: var(--color-ai-gradient-purple-strong);
+}
+
+.demo-color-ai-gradient-green-subtle::before {
+    background: var(--color-ai-gradient-green-subtle);
+}
+
+.demo-color-ai-gradient-blue-subtle::before {
+    background: var(--color-ai-gradient-blue-subtle);
+}
+
+.demo-color-ai-gradient-purple-subtle::before {
+    background: var(--color-ai-gradient-purple-subtle);
+}