@viur/shop-components 0.0.1-dev.58 → 0.0.1-dev.60

package/src/style/ignite/foundation/color.css

@@ -0,0 +1,323 @@
+/* COLOR TABLES */
+
+:root,
+:host {
+
+  /* Color Primitives */
+  /* Gray scale */
+  --ignt-color-gray-50: color-mix(in srgb, var(--ignt-color-gray), var(--ignt-mix-color-down) 95%);
+  --ignt-color-gray-100: color-mix(in srgb, var(--ignt-color-gray), var(--ignt-mix-color-down) 90%);
+  --ignt-color-gray-200: color-mix(in srgb, var(--ignt-color-gray), var(--ignt-mix-color-down) 75%);
+  --ignt-color-gray-300: color-mix(in srgb, var(--ignt-color-gray), var(--ignt-mix-color-down) 60%);
+  --ignt-color-gray-400: color-mix(in srgb, var(--ignt-color-gray), var(--ignt-mix-color-down) 25%);
+  --ignt-color-gray-500: var(--ignt-color-gray);
+  --ignt-color-gray-600: color-mix(in srgb, var(--ignt-color-gray), var(--ignt-mix-color-up) 15%);
+  --ignt-color-gray-700: color-mix(in srgb, var(--ignt-color-gray), var(--ignt-mix-color-up) 40%);
+  --ignt-color-gray-800: color-mix(in srgb, var(--ignt-color-gray), var(--ignt-mix-color-up) 60%);
+  --ignt-color-gray-900: color-mix(in srgb, var(--ignt-color-gray), var(--ignt-mix-color-up) 70%);
+  --ignt-color-gray-950: color-mix(in srgb, var(--ignt-color-gray), var(--ignt-mix-color-up) 80%);
+
+  /* Red */
+  --ignt-color-red-50: color-mix(in srgb, var(--ignt-color-red-500), var(--ignt-mix-color-down) 70%);
+  --ignt-color-red-100: color-mix(in srgb, var(--ignt-color-red-500), var(--ignt-mix-color-down) 65%);
+  --ignt-color-red-200: color-mix(in srgb, var(--ignt-color-red-500), var(--ignt-mix-color-down) 55%);
+  --ignt-color-red-300: color-mix(in srgb, var(--ignt-color-red-500), var(--ignt-mix-color-down) 35%);
+  --ignt-color-red-400: color-mix(in srgb, var(--ignt-color-red-500), var(--ignt-mix-color-down) 15%);
+  --ignt-color-red-500: hsl(0 84.2% 60.2%);
+  --ignt-color-red-600: color-mix(in srgb, var(--ignt-color-red-500), var(--ignt-mix-color-up) 15%);
+  --ignt-color-red-700: color-mix(in srgb, var(--ignt-color-red-500), var(--ignt-mix-color-up) 35%);
+  --ignt-color-red-800: color-mix(in srgb, var(--ignt-color-red-500), var(--ignt-mix-color-up) 55%);
+  --ignt-color-red-900: color-mix(in srgb, var(--ignt-color-red-500), var(--ignt-mix-color-up) 65%);
+  --ignt-color-red-950: color-mix(in srgb, var(--ignt-color-red-500), var(--ignt-mix-color-up) 70%);
+
+
+  /* Orange */
+  --ignt-color-orange-50: color-mix(in srgb, var(--ignt-color-orange-500), var(--ignt-mix-color-down) 70%);
+  --ignt-color-orange-100: color-mix(in srgb, var(--ignt-color-orange-500), var(--ignt-mix-color-down) 65%);
+  --ignt-color-orange-200: color-mix(in srgb, var(--ignt-color-orange-500), var(--ignt-mix-color-down) 55%);
+  --ignt-color-orange-300: color-mix(in srgb, var(--ignt-color-orange-500), var(--ignt-mix-color-down) 35%);
+  --ignt-color-orange-400: color-mix(in srgb, var(--ignt-color-orange-500), var(--ignt-mix-color-down) 15%);
+  --ignt-color-orange-500: hsl(25 95% 53.1%);
+  --ignt-color-orange-600: color-mix(in srgb, var(--ignt-color-orange-500), var(--ignt-mix-color-up) 15%);
+  --ignt-color-orange-700: color-mix(in srgb, var(--ignt-color-orange-500), var(--ignt-mix-color-up) 35%);
+  --ignt-color-orange-800: color-mix(in srgb, var(--ignt-color-orange-500), var(--ignt-mix-color-up) 55%);
+  --ignt-color-orange-900: color-mix(in srgb, var(--ignt-color-orange-500), var(--ignt-mix-color-up) 65%);
+  --ignt-color-orange-950: color-mix(in srgb, var(--ignt-color-orange-500), var(--ignt-mix-color-up) 70%);
+
+  /* Amber */
+  --ignt-color-amber-50: color-mix(in srgb, var(--ignt-color-amber-500), var(--ignt-mix-color-down) 70%);
+  --ignt-color-amber-100: color-mix(in srgb, var(--ignt-color-amber-500), var(--ignt-mix-color-down) 65%);
+  --ignt-color-amber-200: color-mix(in srgb, var(--ignt-color-amber-500), var(--ignt-mix-color-down) 55%);
+  --ignt-color-amber-300: color-mix(in srgb, var(--ignt-color-amber-500), var(--ignt-mix-color-down) 35%);
+  --ignt-color-amber-400: color-mix(in srgb, var(--ignt-color-amber-500), var(--ignt-mix-color-down) 15%);
+  --ignt-color-amber-500: hsl(38 92.1% 50.2%);
+  --ignt-color-amber-600: color-mix(in srgb, var(--ignt-color-amber-500), var(--ignt-mix-color-up) 15%);
+  --ignt-color-amber-700: color-mix(in srgb, var(--ignt-color-amber-500), var(--ignt-mix-color-up) 35%);
+  --ignt-color-amber-800: color-mix(in srgb, var(--ignt-color-amber-500), var(--ignt-mix-color-up) 55%);
+  --ignt-color-amber-900: color-mix(in srgb, var(--ignt-color-amber-500), var(--ignt-mix-color-up) 65%);
+  --ignt-color-amber-950: color-mix(in srgb, var(--ignt-color-amber-500), var(--ignt-mix-color-up) 70%);
+
+  /* Yellow */
+  --ignt-color-yellow-50: color-mix(in srgb, var(--ignt-color-yellow-500), var(--ignt-mix-color-down) 70%);
+  --ignt-color-yellow-100: color-mix(in srgb, var(--ignt-color-yellow-500), var(--ignt-mix-color-down) 65%);
+  --ignt-color-yellow-200: color-mix(in srgb, var(--ignt-color-yellow-500), var(--ignt-mix-color-down) 55%);
+  --ignt-color-yellow-300: color-mix(in srgb, var(--ignt-color-yellow-500), var(--ignt-mix-color-down) 35%);
+  --ignt-color-yellow-400: color-mix(in srgb, var(--ignt-color-yellow-500), var(--ignt-mix-color-down) 15%);
+  --ignt-color-yellow-500: hsl(45 93.4% 47.5%);
+  --ignt-color-yellow-600: color-mix(in srgb, var(--ignt-color-yellow-500), var(--ignt-mix-color-up) 15%);
+  --ignt-color-yellow-700: color-mix(in srgb, var(--ignt-color-yellow-500), var(--ignt-mix-color-up) 35%);
+  --ignt-color-yellow-800: color-mix(in srgb, var(--ignt-color-yellow-500), var(--ignt-mix-color-up) 55%);
+  --ignt-color-yellow-900: color-mix(in srgb, var(--ignt-color-yellow-500), var(--ignt-mix-color-up) 65%);
+  --ignt-color-yellow-950: color-mix(in srgb, var(--ignt-color-yellow-500), var(--ignt-mix-color-up) 70%);
+
+  /* Lime */
+  --ignt-color-lime-50: color-mix(in srgb, var(--ignt-color-lime-500), var(--ignt-mix-color-down) 70%);
+  --ignt-color-lime-100: color-mix(in srgb, var(--ignt-color-lime-500), var(--ignt-mix-color-down) 65%);
+  --ignt-color-lime-200: color-mix(in srgb, var(--ignt-color-lime-500), var(--ignt-mix-color-down) 55%);
+  --ignt-color-lime-300: color-mix(in srgb, var(--ignt-color-lime-500), var(--ignt-mix-color-down) 35%);
+  --ignt-color-lime-400: color-mix(in srgb, var(--ignt-color-lime-500), var(--ignt-mix-color-down) 15%);
+  --ignt-color-lime-500: hsl(83.7 80.5% 44.3%);
+  --ignt-color-lime-600: color-mix(in srgb, var(--ignt-color-lime-500), var(--ignt-mix-color-up) 15%);
+  --ignt-color-lime-700: color-mix(in srgb, var(--ignt-color-lime-500), var(--ignt-mix-color-up) 35%);
+  --ignt-color-lime-800: color-mix(in srgb, var(--ignt-color-lime-500), var(--ignt-mix-color-up) 50%);
+  --ignt-color-lime-900: color-mix(in srgb, var(--ignt-color-lime-500), var(--ignt-mix-color-up) 65%);
+  --ignt-color-lime-950: color-mix(in srgb, var(--ignt-color-lime-500), var(--ignt-mix-color-up) 70%);
+
+  /* Green */
+  --ignt-color-green-50: color-mix(in srgb, var(--ignt-color-green-500), var(--ignt-mix-color-down) 70%);
+  --ignt-color-green-100: color-mix(in srgb, var(--ignt-color-green-500), var(--ignt-mix-color-down) 65%);
+  --ignt-color-green-200: color-mix(in srgb, var(--ignt-color-green-500), var(--ignt-mix-color-down) 50%);
+  --ignt-color-green-300: color-mix(in srgb, var(--ignt-color-green-500), var(--ignt-mix-color-down) 35%);
+  --ignt-color-green-400: color-mix(in srgb, var(--ignt-color-green-500), var(--ignt-mix-color-down) 15%);
+  --ignt-color-green-500: hsl(142.1 70.6% 45.3%);
+  --ignt-color-green-600: color-mix(in srgb, var(--ignt-color-green-500), var(--ignt-mix-color-up) 15%);
+  --ignt-color-green-700: color-mix(in srgb, var(--ignt-color-green-500), var(--ignt-mix-color-up) 35%);
+  --ignt-color-green-800: color-mix(in srgb, var(--ignt-color-green-500), var(--ignt-mix-color-up) 50%);
+  --ignt-color-green-900: color-mix(in srgb, var(--ignt-color-green-500), var(--ignt-mix-color-up) 65%);
+  --ignt-color-green-950: color-mix(in srgb, var(--ignt-color-green-500), var(--ignt-mix-color-up) 70%);
+
+  /* Emerald */
+  --ignt-color-emerald-50: color-mix(in srgb, var(--ignt-color-emerald-500), var(--ignt-mix-color-down) 70%);
+  --ignt-color-emerald-100: color-mix(in srgb, var(--ignt-color-emerald-500), var(--ignt-mix-color-down) 65%);
+  --ignt-color-emerald-200: color-mix(in srgb, var(--ignt-color-emerald-500), var(--ignt-mix-color-down) 50%);
+  --ignt-color-emerald-300: color-mix(in srgb, var(--ignt-color-emerald-500), var(--ignt-mix-color-down) 35%);
+  --ignt-color-emerald-400: color-mix(in srgb, var(--ignt-color-emerald-500), var(--ignt-mix-color-down) 15%);
+  --ignt-color-emerald-500: hsl(160.1 84.1% 39.4%);
+  --ignt-color-emerald-600: color-mix(in srgb, var(--ignt-color-emerald-500), var(--ignt-mix-color-up) 15%);
+  --ignt-color-emerald-700: color-mix(in srgb, var(--ignt-color-emerald-500), var(--ignt-mix-color-up) 35%);
+  --ignt-color-emerald-800: color-mix(in srgb, var(--ignt-color-emerald-500), var(--ignt-mix-color-up) 50%);
+  --ignt-color-emerald-900: color-mix(in srgb, var(--ignt-color-emerald-500), var(--ignt-mix-color-up) 65%);
+  --ignt-color-emerald-950: color-mix(in srgb, var(--ignt-color-emerald-500), var(--ignt-mix-color-up) 70%);
+
+  /* Teal */
+  --ignt-color-teal-50: color-mix(in srgb, var(--ignt-color-teal-500), var(--ignt-mix-color-down) 70%);
+  --ignt-color-teal-100: color-mix(in srgb, var(--ignt-color-teal-500), var(--ignt-mix-color-down) 65%);
+  --ignt-color-teal-200: color-mix(in srgb, var(--ignt-color-teal-500), var(--ignt-mix-color-down) 50%);
+  --ignt-color-teal-300: color-mix(in srgb, var(--ignt-color-teal-500), var(--ignt-mix-color-down) 35%);
+  --ignt-color-teal-400: color-mix(in srgb, var(--ignt-color-teal-500), var(--ignt-mix-color-down) 15%);
+  --ignt-color-teal-500: hsl(173.4 80.4% 40%);
+  --ignt-color-teal-600: color-mix(in srgb, var(--ignt-color-teal-500), var(--ignt-mix-color-up) 15%);
+  --ignt-color-teal-700: color-mix(in srgb, var(--ignt-color-teal-500), var(--ignt-mix-color-up) 35%);
+  --ignt-color-teal-800: color-mix(in srgb, var(--ignt-color-teal-500), var(--ignt-mix-color-up) 50%);
+  --ignt-color-teal-900: color-mix(in srgb, var(--ignt-color-teal-500), var(--ignt-mix-color-up) 65%);
+  --ignt-color-teal-950: color-mix(in srgb, var(--ignt-color-teal-500), var(--ignt-mix-color-up) 70%);
+
+  /* Cyan */
+  --ignt-color-cyan-50: color-mix(in srgb, var(--ignt-color-cyan-500), var(--ignt-mix-color-down) 70%);
+  --ignt-color-cyan-100: color-mix(in srgb, var(--ignt-color-cyan-500), var(--ignt-mix-color-down) 65%);
+  --ignt-color-cyan-200: color-mix(in srgb, var(--ignt-color-cyan-500), var(--ignt-mix-color-down) 50%);
+  --ignt-color-cyan-300: color-mix(in srgb, var(--ignt-color-cyan-500), var(--ignt-mix-color-down) 35%);
+  --ignt-color-cyan-400: color-mix(in srgb, var(--ignt-color-cyan-500), var(--ignt-mix-color-down) 15%);
+  --ignt-color-cyan-500: hsl(188.7 94.5% 42.7%);
+  --ignt-color-cyan-600: color-mix(in srgb, var(--ignt-color-cyan-500), var(--ignt-mix-color-up) 15%);
+  --ignt-color-cyan-700: color-mix(in srgb, var(--ignt-color-cyan-500), var(--ignt-mix-color-up) 35%);
+  --ignt-color-cyan-800: color-mix(in srgb, var(--ignt-color-cyan-500), var(--ignt-mix-color-up) 50%);
+  --ignt-color-cyan-900: color-mix(in srgb, var(--ignt-color-cyan-500), var(--ignt-mix-color-up) 65%);
+  --ignt-color-cyan-950: color-mix(in srgb, var(--ignt-color-cyan-500), var(--ignt-mix-color-up) 70%);
+
+  /* Sky */
+  --ignt-color-sky-50: color-mix(in srgb, var(--ignt-color-sky-500), var(--ignt-mix-color-down) 70%);
+  --ignt-color-sky-100: color-mix(in srgb, var(--ignt-color-sky-500), var(--ignt-mix-color-down) 65%);
+  --ignt-color-sky-200: color-mix(in srgb, var(--ignt-color-sky-500), var(--ignt-mix-color-down) 50%);
+  --ignt-color-sky-300: color-mix(in srgb, var(--ignt-color-sky-500), var(--ignt-mix-color-down) 35%);
+  --ignt-color-sky-400: color-mix(in srgb, var(--ignt-color-sky-500), var(--ignt-mix-color-down) 15%);
+  --ignt-color-sky-500: hsl(198.6 88.7% 48.4%);
+  --ignt-color-sky-600: color-mix(in srgb, var(--ignt-color-sky-500), var(--ignt-mix-color-up) 15%);
+  --ignt-color-sky-700: color-mix(in srgb, var(--ignt-color-sky-500), var(--ignt-mix-color-up) 35%);
+  --ignt-color-sky-800: color-mix(in srgb, var(--ignt-color-sky-500), var(--ignt-mix-color-up) 50%);
+  --ignt-color-sky-900: color-mix(in srgb, var(--ignt-color-sky-500), var(--ignt-mix-color-up) 65%);
+  --ignt-color-sky-950: color-mix(in srgb, var(--ignt-color-sky-500), var(--ignt-mix-color-up) 70%);
+
+  /* Blue */
+  --ignt-color-blue-50: color-mix(in srgb, var(--ignt-color-blue-500), var(--ignt-mix-color-down) 70%);
+  --ignt-color-blue-100: color-mix(in srgb, var(--ignt-color-blue-500), var(--ignt-mix-color-down) 65%);
+  --ignt-color-blue-200: color-mix(in srgb, var(--ignt-color-blue-500), var(--ignt-mix-color-down) 50%);
+  --ignt-color-blue-300: color-mix(in srgb, var(--ignt-color-blue-500), var(--ignt-mix-color-down) 35%);
+  --ignt-color-blue-400: color-mix(in srgb, var(--ignt-color-blue-500), var(--ignt-mix-color-down) 15%);
+  --ignt-color-blue-500: hsl(217.2 91.2% 59.8%);
+  --ignt-color-blue-600: color-mix(in srgb, var(--ignt-color-blue-500), var(--ignt-mix-color-up) 15%);
+  --ignt-color-blue-700: color-mix(in srgb, var(--ignt-color-blue-500), var(--ignt-mix-color-up) 35%);
+  --ignt-color-blue-800: color-mix(in srgb, var(--ignt-color-blue-500), var(--ignt-mix-color-up) 50%);
+  --ignt-color-blue-900: color-mix(in srgb, var(--ignt-color-blue-500), var(--ignt-mix-color-up) 65%);
+  --ignt-color-blue-950: color-mix(in srgb, var(--ignt-color-blue-500), var(--ignt-mix-color-up) 70%);
+
+  /* Indigo */
+  --ignt-color-indigo-50: color-mix(in srgb, var(--ignt-color-indigo-500), var(--ignt-mix-color-down) 70%);
+  --ignt-color-indigo-100: color-mix(in srgb, var(--ignt-color-indigo-500), var(--ignt-mix-color-down) 65%);
+  --ignt-color-indigo-200: color-mix(in srgb, var(--ignt-color-indigo-500), var(--ignt-mix-color-down) 50%);
+  --ignt-color-indigo-300: color-mix(in srgb, var(--ignt-color-indigo-500), var(--ignt-mix-color-down) 35%);
+  --ignt-color-indigo-400: color-mix(in srgb, var(--ignt-color-indigo-500), var(--ignt-mix-color-down) 15%);
+  --ignt-color-indigo-500: hsl(240 83.5% 66.7%);
+  --ignt-color-indigo-600: color-mix(in srgb, var(--ignt-color-indigo-500), var(--ignt-mix-color-up) 15%);
+  --ignt-color-indigo-700: color-mix(in srgb, var(--ignt-color-indigo-500), var(--ignt-mix-color-up) 35%);
+  --ignt-color-indigo-800: color-mix(in srgb, var(--ignt-color-indigo-500), var(--ignt-mix-color-up) 50%);
+  --ignt-color-indigo-900: color-mix(in srgb, var(--ignt-color-indigo-500), var(--ignt-mix-color-up) 65%);
+  --ignt-color-indigo-950: color-mix(in srgb, var(--ignt-color-indigo-500), var(--ignt-mix-color-up) 70%);
+
+  /* Violet */
+  --ignt-color-violet-50: color-mix(in srgb, var(--ignt-color-violet-500), var(--ignt-mix-color-down) 70%);
+  --ignt-color-violet-100: color-mix(in srgb, var(--ignt-color-violet-500), var(--ignt-mix-color-down) 65%);
+  --ignt-color-violet-200: color-mix(in srgb, var(--ignt-color-violet-500), var(--ignt-mix-color-down) 50%);
+  --ignt-color-violet-300: color-mix(in srgb, var(--ignt-color-violet-500), var(--ignt-mix-color-down) 35%);
+  --ignt-color-violet-400: color-mix(in srgb, var(--ignt-color-violet-500), var(--ignt-mix-color-down) 15%);
+  --ignt-color-violet-500: hsl(260 89.5% 66.3%);
+  --ignt-color-violet-600: color-mix(in srgb, var(--ignt-color-violet-500), var(--ignt-mix-color-up) 15%);
+  --ignt-color-violet-700: color-mix(in srgb, var(--ignt-color-violet-500), var(--ignt-mix-color-up) 35%);
+  --ignt-color-violet-800: color-mix(in srgb, var(--ignt-color-violet-500), var(--ignt-mix-color-up) 50%);
+  --ignt-color-violet-900: color-mix(in srgb, var(--ignt-color-violet-500), var(--ignt-mix-color-up) 65%);
+  --ignt-color-violet-950: color-mix(in srgb, var(--ignt-color-violet-500), var(--ignt-mix-color-up) 70%);
+
+  /* Purple */
+  --ignt-color-purple-50: color-mix(in srgb, var(--ignt-color-purple-500), var(--ignt-mix-color-down) 70%);
+  --ignt-color-purple-100: color-mix(in srgb, var(--ignt-color-purple-500), var(--ignt-mix-color-down) 65%);
+  --ignt-color-purple-200: color-mix(in srgb, var(--ignt-color-purple-500), var(--ignt-mix-color-down) 50%);
+  --ignt-color-purple-300: color-mix(in srgb, var(--ignt-color-purple-500), var(--ignt-mix-color-down) 35%);
+  --ignt-color-purple-400: color-mix(in srgb, var(--ignt-color-purple-500), var(--ignt-mix-color-down) 15%);
+  --ignt-color-purple-500: hsl(270 91% 65.1%);
+  --ignt-color-purple-600: color-mix(in srgb, var(--ignt-color-purple-500), var(--ignt-mix-color-up) 15%);
+  --ignt-color-purple-700: color-mix(in srgb, var(--ignt-color-purple-500), var(--ignt-mix-color-up) 35%);
+  --ignt-color-purple-800: color-mix(in srgb, var(--ignt-color-purple-500), var(--ignt-mix-color-up) 50%);
+  --ignt-color-purple-900: color-mix(in srgb, var(--ignt-color-purple-500), var(--ignt-mix-color-up) 65%);
+  --ignt-color-purple-950: color-mix(in srgb, var(--ignt-color-purple-500), var(--ignt-mix-color-up) 70%);
+
+  /* Fuchsia */
+  --ignt-color-fuchsia-50: color-mix(in srgb, var(--ignt-color-fuchsia-500), var(--ignt-mix-color-down) 70%);
+  --ignt-color-fuchsia-100: color-mix(in srgb, var(--ignt-color-fuchsia-500), var(--ignt-mix-color-down) 65%);
+  --ignt-color-fuchsia-200: color-mix(in srgb, var(--ignt-color-fuchsia-500), var(--ignt-mix-color-down) 50%);
+  --ignt-color-fuchsia-300: color-mix(in srgb, var(--ignt-color-fuchsia-500), var(--ignt-mix-color-down) 35%);
+  --ignt-color-fuchsia-400: color-mix(in srgb, var(--ignt-color-fuchsia-500), var(--ignt-mix-color-down) 15%);
+  --ignt-color-fuchsia-500: hsl(292 84.1% 60.6%);
+  --ignt-color-fuchsia-600: color-mix(in srgb, var(--ignt-color-fuchsia-500), var(--ignt-mix-color-up) 15%);
+  --ignt-color-fuchsia-700: color-mix(in srgb, var(--ignt-color-fuchsia-500), var(--ignt-mix-color-up) 35%);
+  --ignt-color-fuchsia-800: color-mix(in srgb, var(--ignt-color-fuchsia-500), var(--ignt-mix-color-up) 50%);
+  --ignt-color-fuchsia-900: color-mix(in srgb, var(--ignt-color-fuchsia-500), var(--ignt-mix-color-up) 65%);
+  --ignt-color-fuchsia-950: color-mix(in srgb, var(--ignt-color-fuchsia-500), var(--ignt-mix-color-up) 70%);
+
+  /* Pink */
+  --ignt-color-pink-50: color-mix(in srgb, var(--ignt-color-pink-500), var(--ignt-mix-color-down) 70%);
+  --ignt-color-pink-100: color-mix(in srgb, var(--ignt-color-pink-500), var(--ignt-mix-color-down) 65%);
+  --ignt-color-pink-200: color-mix(in srgb, var(--ignt-color-pink-500), var(--ignt-mix-color-down) 50%);
+  --ignt-color-pink-300: color-mix(in srgb, var(--ignt-color-pink-500), var(--ignt-mix-color-down) 35%);
+  --ignt-color-pink-400: color-mix(in srgb, var(--ignt-color-pink-500), var(--ignt-mix-color-down) 15%);
+  --ignt-color-pink-500: hsl(330.4 81.2% 60.4%);
+  --ignt-color-pink-600: color-mix(in srgb, var(--ignt-color-pink-500), var(--ignt-mix-color-up) 15%);
+  --ignt-color-pink-700: color-mix(in srgb, var(--ignt-color-pink-500), var(--ignt-mix-color-up) 35%);
+  --ignt-color-pink-800: color-mix(in srgb, var(--ignt-color-pink-500), var(--ignt-mix-color-up) 50%);
+  --ignt-color-pink-900: color-mix(in srgb, var(--ignt-color-pink-500), var(--ignt-mix-color-up) 65%);
+  --ignt-color-pink-950: color-mix(in srgb, var(--ignt-color-pink-500), var(--ignt-mix-color-up) 70%);
+
+  /* Rose */
+  --ignt-color-rose-50: color-mix(in srgb, var(--ignt-color-rose-500), var(--ignt-mix-color-down) 70%);
+  --ignt-color-rose-100: color-mix(in srgb, var(--ignt-color-rose-500), var(--ignt-mix-color-down) 65%);
+  --ignt-color-rose-200: color-mix(in srgb, var(--ignt-color-rose-500), var(--ignt-mix-color-down) 50%);
+  --ignt-color-rose-300: color-mix(in srgb, var(--ignt-color-rose-500), var(--ignt-mix-color-down) 35%);
+  --ignt-color-rose-400: color-mix(in srgb, var(--ignt-color-rose-500), var(--ignt-mix-color-down) 15%);
+  --ignt-color-rose-500: hsl(349.7 89.2% 60.2%);
+  --ignt-color-rose-600: color-mix(in srgb, var(--ignt-color-rose-500), var(--ignt-mix-color-up) 15%);
+  --ignt-color-rose-700: color-mix(in srgb, var(--ignt-color-rose-500), var(--ignt-mix-color-up) 35%);
+  --ignt-color-rose-800: color-mix(in srgb, var(--ignt-color-rose-500), var(--ignt-mix-color-up) 50%);
+  --ignt-color-rose-900: color-mix(in srgb, var(--ignt-color-rose-500), var(--ignt-mix-color-up) 65%);
+  --ignt-color-rose-950: color-mix(in srgb, var(--ignt-color-rose-500), var(--ignt-mix-color-up) 70%);
+
+  /* Theme tokens */
+  /* Primary scale */
+  --ignt-color-primary-50: color-mix(in srgb, var(--ignt-color-primary), var(--ignt-mix-color-down) 70%);
+  --ignt-color-primary-100: color-mix(in srgb, var(--ignt-color-primary), var(--ignt-mix-color-down) 65%);
+  --ignt-color-primary-200: color-mix(in srgb, var(--ignt-color-primary), var(--ignt-mix-color-down) 50%);
+  --ignt-color-primary-300: color-mix(in srgb, var(--ignt-color-primary), var(--ignt-mix-color-down) 35%);
+  --ignt-color-primary-400: color-mix(in srgb, var(--ignt-color-primary), var(--ignt-mix-color-down) 15%);
+  --ignt-color-primary-500: var(--ignt-color-primary);
+  --ignt-color-primary-600: color-mix(in srgb, var(--ignt-color-primary), var(--ignt-mix-color-up) 15%);
+  --ignt-color-primary-700: color-mix(in srgb, var(--ignt-color-primary), var(--ignt-mix-color-up) 35%);
+  --ignt-color-primary-800: color-mix(in srgb, var(--ignt-color-primary), var(--ignt-mix-color-up) 50%);
+  --ignt-color-primary-900: color-mix(in srgb, var(--ignt-color-primary), var(--ignt-mix-color-up) 65%);
+  --ignt-color-primary-950: color-mix(in srgb, var(--ignt-color-primary), var(--ignt-mix-color-up) 70%);
+
+  /* Secondary scale */
+  --ignt-color-secondary-50: color-mix(in srgb, var(--ignt-color-secondary), var(--ignt-mix-color-down) 70%);
+  --ignt-color-secondary-100: color-mix(in srgb, var(--ignt-color-secondary), var(--ignt-mix-color-down) 65%);
+  --ignt-color-secondary-200: color-mix(in srgb, var(--ignt-color-secondary), var(--ignt-mix-color-down) 50%);
+  --ignt-color-secondary-300: color-mix(in srgb, var(--ignt-color-secondary), var(--ignt-mix-color-down) 35%);
+  --ignt-color-secondary-400: color-mix(in srgb, var(--ignt-color-secondary), var(--ignt-mix-color-down) 15%);
+  --ignt-color-secondary-500: var(--ignt-color-secondary);
+  --ignt-color-secondary-600: color-mix(in srgb, var(--ignt-color-secondary), var(--ignt-mix-color-up) 15%);
+  --ignt-color-secondary-700: color-mix(in srgb, var(--ignt-color-secondary), var(--ignt-mix-color-up) 35%);
+  --ignt-color-secondary-800: color-mix(in srgb, var(--ignt-color-secondary), var(--ignt-mix-color-up) 50%);
+  --ignt-color-secondary-900: color-mix(in srgb, var(--ignt-color-secondary), var(--ignt-mix-color-up) 65%);
+  --ignt-color-secondary-950: color-mix(in srgb, var(--ignt-color-secondary), var(--ignt-mix-color-up) 70%);
+
+  /* Success scale */
+  --ignt-color-success-50: color-mix(in srgb, var(--ignt-color-success), var(--ignt-mix-color-down) 70%);
+  --ignt-color-success-100: color-mix(in srgb, var(--ignt-color-success), var(--ignt-mix-color-down) 65%);
+  --ignt-color-success-200: color-mix(in srgb, var(--ignt-color-success), var(--ignt-mix-color-down) 50%);
+  --ignt-color-success-300: color-mix(in srgb, var(--ignt-color-success), var(--ignt-mix-color-down) 35%);
+  --ignt-color-success-400: color-mix(in srgb, var(--ignt-color-success), var(--ignt-mix-color-down) 15%);
+  --ignt-color-success-500: var(--ignt-color-success);
+  --ignt-color-success-600: color-mix(in srgb, var(--ignt-color-success), var(--ignt-mix-color-up) 15%);
+  --ignt-color-success-700: color-mix(in srgb, var(--ignt-color-success), var(--ignt-mix-color-up) 35%);
+  --ignt-color-success-800: color-mix(in srgb, var(--ignt-color-success), var(--ignt-mix-color-up) 50%);
+  --ignt-color-success-900: color-mix(in srgb, var(--ignt-color-success), var(--ignt-mix-color-up) 65%);
+  --ignt-color-success-950: color-mix(in srgb, var(--ignt-color-success), var(--ignt-mix-color-up) 70%);
+
+  /* Warn scale */
+  --ignt-color-warning-50: color-mix(in srgb, var(--ignt-color-warning), var(--ignt-mix-color-down) 70%);
+  --ignt-color-warning-100: color-mix(in srgb, var(--ignt-color-warning), var(--ignt-mix-color-down) 65%);
+  --ignt-color-warning-200: color-mix(in srgb, var(--ignt-color-warning), var(--ignt-mix-color-down) 50%);
+  --ignt-color-warning-300: color-mix(in srgb, var(--ignt-color-warning), var(--ignt-mix-color-down) 35%);
+  --ignt-color-warning-400: color-mix(in srgb, var(--ignt-color-warning), var(--ignt-mix-color-down) 15%);
+  --ignt-color-warning-500: var(--ignt-color-warning);
+  --ignt-color-warning-600: color-mix(in srgb, var(--ignt-color-warning), var(--ignt-mix-color-up) 15%);
+  --ignt-color-warning-700: color-mix(in srgb, var(--ignt-color-warning), var(--ignt-mix-color-up) 35%);
+  --ignt-color-warning-800: color-mix(in srgb, var(--ignt-color-warning), var(--ignt-mix-color-up) 50%);
+  --ignt-color-warning-900: color-mix(in srgb, var(--ignt-color-warning), var(--ignt-mix-color-up) 65%);
+  --ignt-color-warning-950: color-mix(in srgb, var(--ignt-color-warning), var(--ignt-mix-color-up) 70%);
+
+  /* Danger scale */
+  --ignt-color-danger-50: color-mix(in srgb, var(--ignt-color-danger), var(--ignt-mix-color-down) 70%);
+  --ignt-color-danger-100: color-mix(in srgb, var(--ignt-color-danger), var(--ignt-mix-color-down) 65%);
+  --ignt-color-danger-200: color-mix(in srgb, var(--ignt-color-danger), var(--ignt-mix-color-down) 50%);
+  --ignt-color-danger-300: color-mix(in srgb, var(--ignt-color-danger), var(--ignt-mix-color-down) 35%);
+  --ignt-color-danger-400: color-mix(in srgb, var(--ignt-color-danger), var(--ignt-mix-color-down) 15%);
+  --ignt-color-danger-500: var(--ignt-color-danger);
+  --ignt-color-danger-600: color-mix(in srgb, var(--ignt-color-danger), var(--ignt-mix-color-up) 15%);
+  --ignt-color-danger-700: color-mix(in srgb, var(--ignt-color-danger), var(--ignt-mix-color-up) 35%);
+  --ignt-color-danger-800: color-mix(in srgb, var(--ignt-color-danger), var(--ignt-mix-color-up) 50%);
+  --ignt-color-danger-900: color-mix(in srgb, var(--ignt-color-danger), var(--ignt-mix-color-up) 65%);
+  --ignt-color-danger-950: color-mix(in srgb, var(--ignt-color-danger), var(--ignt-mix-color-up) 70%);
+
+  /* Hint scale */
+  --ignt-color-info-50: color-mix(in srgb, var(--ignt-color-info), var(--ignt-mix-color-down) 70%);
+  --ignt-color-info-100: color-mix(in srgb, var(--ignt-color-info), var(--ignt-mix-color-down) 65%);
+  --ignt-color-info-200: color-mix(in srgb, var(--ignt-color-info), var(--ignt-mix-color-down) 50%);
+  --ignt-color-info-300: color-mix(in srgb, var(--ignt-color-info), var(--ignt-mix-color-down) 35%);
+  --ignt-color-info-400: color-mix(in srgb, var(--ignt-color-info), var(--ignt-mix-color-down) 15%);
+  --ignt-color-info-500: var(--ignt-color-info);
+  --ignt-color-info-600: color-mix(in srgb, var(--ignt-color-info), var(--ignt-mix-color-up) 15%);
+  --ignt-color-info-700: color-mix(in srgb, var(--ignt-color-info), var(--ignt-mix-color-up) 35%);
+  --ignt-color-info-800: color-mix(in srgb, var(--ignt-color-info), var(--ignt-mix-color-up) 50%);
+  --ignt-color-info-900: color-mix(in srgb, var(--ignt-color-info), var(--ignt-mix-color-up) 65%);
+  --ignt-color-info-950: color-mix(in srgb, var(--ignt-color-info), var(--ignt-mix-color-up) 70%);
+}
+
+
+

package/src/style/ignite/foundation/config.css

@@ -0,0 +1,188 @@
+/* IGNITE DEFAULT CONFIGURATION 2023 */
+
+:root,
+:host {
+  --ignt-theme-name: "viur";
+  --ignt-color-scheme: normal;
+  color-scheme: var(--ignt-color-scheme);
+
+  /* Color and Shadow Sets */
+
+  /* The corporate color - defining most of the looks. */
+  --ignt-color-primary: hsla(356 87% 44% / 100%);
+
+  /* A color used to sit next to the maincolor. */
+  --ignt-color-secondary: hsla(0 0% 20% / 100%);
+
+  /* From Black to White */
+  --ignt-color-gray: hsla(240 4% 46% / 100%);
+
+  --ignt-color-neutral-1000: hsla(0 0% 0% / 100%); /* black */
+  --ignt-color-neutral-0: hsla(0 0% 100% / 100%); /* white */
+
+  --ignt-mix-color-up: hsla(0 0% 0% / 100%); /* black */
+  --ignt-mix-color-down: hsla(0 0% 100% / 100%); /* white */
+
+  /* Alert colors */
+  --ignt-color-success: color-mix(in oklch, var(--ignt-color-primary), hsla(130 45% 47% / 100%) 90%);
+  --ignt-color-warning: color-mix(in oklch, var(--ignt-color-primary), hsla(40 90% 60% / 100%) 90%);
+  --ignt-color-danger: color-mix(in oklch, var(--ignt-color-primary), hsla(4 90% 58% / 100%) 90%);
+  --ignt-color-info: color-mix(in oklch, var(--ignt-color-primary), hsla(198 77% 49% / 100%) 90%);
+
+  /* Surfaces */
+  --ignt-surface-default: var(--ignt-color-gray-100);
+  --ignt-surface-alt: var(--ignt-color-neutral-0);
+
+  /* Text colors */
+  --ignt-color-text-default: var(--ignt-color-gray-800);
+  --ignt-color-text-inverted: var(--ignt-color-gray-100);
+  --ignt-color-link-default: var(--ignt-color-primary-700);
+  --ignt-color-hover-default: var(--ignt-color-primary-500);
+
+  /* Measurements and Media Queries */
+
+  /* Border radii */
+  --ignt-border-radius-default: 0.4rem;
+  --ignt-border-radius-small: calc(var(--ignt-border-radius-default) / 2);
+  --ignt-border-radius-medium: var(--ignt-border-radius-default);
+  --ignt-border-radius-large: calc(var(--ignt-border-radius-default) * 1.5);
+  --ignt-border-radius-x-large: calc(var(--ignt-border-radius-default) * 2);
+  --ignt-border-radius-circle: 50%;
+  --ignt-border-radius-pill: 9999px;
+
+  /* Border widths */
+  --ignt-border-width-default: 1px;
+  --ignt-border-width-small: calc(var(--ignt-border-width-default) / 2);
+  --ignt-border-width-medium: var(--ignt-border-width-default);
+  --ignt-border-width-large: calc(var(--ignt-border-width-default) * 1.5);
+
+  /* Elevations */
+  --ignt-shadow-default: var(--ignt-shadow-none);
+  --ignt-shadow-hover-default: var(--ignt-shadow-x-small);
+
+  --ignt-color-shadow: var(--ignt-color-neutral-1000);
+  --ignt-shadow-none: none;
+
+  --ignt-shadow-x-small:
+    0 1px 3px color-mix(in oklch, var(--ignt-color-shadow) 12%, transparent),
+    0 1px 2px color-mix(in oklch, var(--ignt-color-shadow) 24%, transparent);
+
+  --ignt-shadow-small:
+    0 3px 6px color-mix(in oklch, var(--ignt-color-shadow) 16%, transparent),
+    0 3px 6px color-mix(in oklch, var(--ignt-color-shadow) 23%, transparent);
+
+  --ignt-shadow-medium:
+    0 10px 20px color-mix(in oklch, var(--ignt-color-shadow) 19%, transparent),
+    0 6px 6px color-mix(in oklch, var(--ignt-color-shadow) 23%, transparent);
+
+  --ignt-shadow-large:
+    0 14px 28px color-mix(in oklch, var(--ignt-color-shadow) 25%, transparent),
+    0 10px 10px color-mix(in oklch, var(--ignt-color-shadow) 22%, transparent);
+
+  --ignt-shadow-x-large:
+    0 19px 38px color-mix(in oklch, var(--ignt-color-shadow) 30%, transparent),
+    0 15px 12px color-mix(in oklch, var(--ignt-color-shadow) 22%, transparent);
+
+  /* Spacings */
+  --ignt-spacing-3x-small: 0.125rem; /* 2px */
+  --ignt-spacing-2x-small: 0.25rem; /* 4px */
+  --ignt-spacing-x-small: 0.5rem; /* 8px */
+  --ignt-spacing-small: 0.75rem; /* 12px */
+  --ignt-spacing-medium: 1rem; /* 16px */
+  --ignt-spacing-large: 1.25rem; /* 20px */
+  --ignt-spacing-x-large: 1.75rem; /* 28px */
+  --ignt-spacing-2x-large: 2.25rem; /* 36px */
+  --ignt-spacing-3x-large: 3rem; /* 48px */
+  --ignt-spacing-4x-large: 4.5rem; /* 72px */
+
+  /* Transitions */
+  --ignt-transition-x-slow: 1000ms;
+  --ignt-transition-slow: 500ms;
+  --ignt-transition-medium: 300ms;
+  --ignt-transition-fast: 150ms;
+  --ignt-transition-x-fast: 50ms;
+
+  /* Font Stacks */
+  /* Default font stack. */
+  --ignt-font-sans: 'Source Sans Pro', 'Open Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
+  --ignt-font-serif: Georgia, 'Times New Roman', serif;
+
+  /* Fonts for headlines, blockquotes and alike. */
+  --ignt-head-font-sans: 'Source Sans Pro', 'Open Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --ignt-head-font-serif: Georgia, 'Times New Roman', serif;
+
+  /* Fonts for code pieces. */
+  --ignt-font-mono: 'Source Code Pro', Courier, monospace;
+
+  /* Font sizes */
+  --ignt-font-size-3x-small: 0.3em; /* ~5px */
+  --ignt-font-size-2x-small: 0.625em; /* 10px */
+  --ignt-font-size-x-small: 0.75em; /* 12px */
+  --ignt-font-size-small: 0.875em; /* 14px */
+  --ignt-font-size-medium: 1em; /* 16px */
+  --ignt-font-size-large: 1.25em; /* 20px */
+  --ignt-font-size-x-large: 1.5em; /* 24px */
+  --ignt-font-size-2x-large: 2.25em; /* 36px */
+  --ignt-font-size-3x-large: 3em; /* 48px */
+  --ignt-font-size-4x-large: 4.5em; /* 72px */
+
+  /* Font weights */
+  --ignt-font-weight-light: 300;
+  --ignt-font-weight-normal: 400;
+  --ignt-font-weight-semibold: 500;
+  --ignt-font-weight-bold: 700;
+
+  /* Letter spacings */
+  --ignt-letter-spacing-denser: -0.03em;
+  --ignt-letter-spacing-dense: -0.015em;
+  --ignt-letter-spacing-normal: normal;
+  --ignt-letter-spacing-loose: 0.075em;
+  --ignt-letter-spacing-looser: 0.15em;
+
+  /* Line heights */
+  --ignt-line-height-default: 1.5;
+  --ignt-line-height-denser: calc(var(--ignt-line-height-default) - 0.75);
+  --ignt-line-height-dense: calc(var(--ignt-line-height-default) - 0.5);
+  --ignt-line-height-normal: var(--ignt-line-height-default);
+  --ignt-line-height-loose: calc(var(--ignt-line-height-default) + 0.5);
+  --ignt-line-height-looser: calc(var(--ignt-line-height-default) + 0.75);
+
+  /* Different widths and heights */
+  --ignt-page-width-default: 1400px; /* max-width of the centered container */
+  --ignt-paragraph-width-default: 77ch; /* max-width of text paragraphs: 77 characters */
+  --ignt-input-height-small: 1.5rem;
+  --ignt-input-height-medium: 1.75rem;
+  --ignt-input-height-large: 2rem;
+
+  /* Grid */
+  --ignt-grid-width: 960;
+  --ignt-grid-column-width: 60;
+  --ignt-grid-columns: 12;
+
+  /* Z-indexes */
+  --ignt-z-index-drawer: 0;
+  --ignt-z-index-content: 100;
+  --ignt-z-index-dialog: 200;
+  --ignt-z-index-dropdown: 300;
+  --ignt-z-index-toast: 400;
+  --ignt-z-index-tooltip: 500;
+  --ignt-z-index-dev: 600;
+
+  /* ORDER!!! */
+  --ignt-order-header: 0;
+  --ignt-order-body: 100;
+  --ignt-order-footer: 200;
+
+  /* Media queries / Supported screen sizes */
+  --ignt-break-2x-small: 23em; /* old smart phones or gadgets like smart watches up to: 368px / 16px = 23em */
+  --ignt-break-x-small: 40em; /* smart phones up to: 640px / 16px = 40em */
+  --ignt-break-small: 65em; /* tablets up to: 1040px / 16px = 65em */
+  --ignt-break-medium: 75em; /* screens: 1200px / 16px = 75em */
+  --ignt-break-large: 93.75em; /* big screens: 1500px / 16px = 93.75em */
+  --ignt-break-x-large: 112.5em; /* huge screens: 1800px / 16px = 112.5em */
+  --ignt-break-2x-large: 225em; /* 4k screens: 3600px / 16px = 225em */
+
+  --ignt-break-hdpi: 2; /* hiDPI displays */
+  --ignt-break-print: print; /* make it printable! */
+}
+

package/src/style/ignite/foundation/grid.css

@@ -0,0 +1,78 @@
+/* GRID */
+/* Based on Russel Bishop's Container Units: https://russellbishop.co.uk/container-units and
+   Tylor Sticka's Breaking Out Layout: https://codepen.io/tylersticka/pen/wdmymG
+*/
+
+:root {
+  /* Grid logic */
+  --ignt-grid-gutters: calc(var(--ignt-grid-columns) - 1);
+
+  /* Grid proportion logic */
+  --ignt-column-proportion: calc(var(--ignt-grid-column-width) / var(--ignt-grid-width));
+  --ignt-gutter-proportion: calc((1 - (var(--ignt-grid-columns) * var(--ignt-column-proportion))) / var(--ignt-grid-gutters));
+
+  /* Container Units */
+  --ignt-column-unit: calc(var(--ignt-column-proportion) * var(--ignt-container-width));
+  --ignt-gutter-unit: calc(var(--ignt-gutter-proportion) * var(--ignt-container-width));
+  --ignt-column-and-gutter-unit: calc(var(--ignt-column-unit) + var(--ignt-gutter-unit));
+
+  /* Subgrid column spans */
+  /* Use `--ignt-subgrid-columns` with any number < `--ignt-grid-columns` */
+  --ignt-subgrid-columns: clamp(1, calc(var(--ignt-grid-columns) - 6), var(--ignt-grid-columns));
+  --ignt-subgrid-span: calc(var(--ignt-subgrid-columns) * var(--ignt-column-and-gutter-unit) - var(--ignt-gutter-unit));
+
+  /* Container Width */
+  --ignt-container-width: 95vw;
+}
+
+@media (--ignt-mq-min-break-small) {
+  :root {
+    --ignt-container-width: 90vw;
+  }
+}
+
+@media (--ignt-mq-min-break-large) {
+  :root {
+    --ignt-container-width: var(--ignt-page-width-default);
+  }
+}
+
+.grid {
+  width: 100vw;
+  display: grid;
+  grid-template-columns: [wrap-start] minmax(var(--ignt-spacing-medium), 1fr)
+                         [bind-start] repeat(var(--ignt-grid-columns), var(--ignt-column-unit))
+                         [bind-end] minmax(var(--ignt-spacing-medium), 1fr)
+                         [wrap-end];
+  grid-column-gap: var(--ignt-gutter-unit);
+}
+
+.subgrid {
+  width: var(--ignt-subgrid-span);
+  display: grid;
+  grid-template-columns: repeat(var(--ignt-subgrid-columns), var(--ignt-column-unit));
+  grid-column-gap: var(--ignt-gutter-unit);
+}
+
+.wrap {
+  grid-column: wrap-start / wrap-end;
+  display: grid;
+  grid-template-columns: subgrid;
+  position: relative;
+  & + .wrap {margin-top: var(--ignt-spacing-medium);}
+}
+
+.bind {
+  grid-column: bind-start / bind-end;
+  display: grid;
+  grid-template-columns: subgrid;
+  position: relative;
+  & + .bind {margin-top: var(--ignt-spacing-medium);}
+  @media (--ignt-mq-print) {
+    padding:0;
+    margin:0;
+    display:block;
+    flex:none;
+    max-width:210mm;
+  };
+}