css-tags 0.1.0

package/core/palette-extended.css

@@ -0,0 +1,142 @@
+:root {
+ /* == Extended Palette (Common Colors) == */
+
+
+ /* Olive Scale */
+ --olive-0: oklch(var(--scale-l-0) min(var(--scale-c-1), var(--clamp-max-c-0)) var(--hue-olive)); --olive-1: oklch(var(--scale-l-1) min(var(--scale-c-2), var(--clamp-max-c-0)) var(--hue-olive)); --olive-2: oklch(var(--scale-l-2) min(var(--scale-c-3), var(--clamp-max-c-1)) var(--hue-olive)); --olive-3: oklch(var(--scale-l-3) min(var(--scale-c-4), var(--clamp-max-c-1)) var(--hue-olive)); --olive-4: oklch(var(--scale-l-4) min(var(--scale-c-5), var(--clamp-max-c-2)) var(--hue-olive)); --olive-5: oklch(var(--scale-l-5) min(var(--scale-c-7), var(--clamp-max-c-2)) var(--hue-olive)); --olive-6: oklch(var(--scale-l-6) min(var(--scale-c-8), var(--clamp-max-c-3)) var(--hue-olive)); --olive-7: oklch(var(--scale-l-7) min(var(--scale-c-9), var(--clamp-max-c-3)) var(--hue-olive)); --olive-8: oklch(var(--scale-l-8) min(var(--scale-c-8), var(--clamp-max-c-4)) var(--hue-olive)); --olive-9: oklch(var(--scale-l-9) min(var(--scale-c-7), var(--clamp-max-c-4)) var(--hue-olive)); --olive-10: oklch(var(--scale-l-10) min(var(--scale-c-5), var(--clamp-max-c-5)) var(--hue-olive)); --olive-11: oklch(var(--scale-l-11) min(var(--scale-c-4), var(--clamp-max-c-5)) var(--hue-olive)); --olive-12: oklch(var(--scale-l-12) min(var(--scale-c-3), var(--clamp-max-c-6)) var(--hue-olive));
+
+ /* Magenta Scale */
+ --magenta-0: oklch(var(--scale-l-0) min(var(--scale-c-1), var(--clamp-max-c-0)) var(--hue-magenta)); --magenta-1: oklch(var(--scale-l-1) min(var(--scale-c-2), var(--clamp-max-c-0)) var(--hue-magenta)); --magenta-2: oklch(var(--scale-l-2) min(var(--scale-c-3), var(--clamp-max-c-1)) var(--hue-magenta)); --magenta-3: oklch(var(--scale-l-3) min(var(--scale-c-4), var(--clamp-max-c-1)) var(--hue-magenta)); --magenta-4: oklch(var(--scale-l-4) min(var(--scale-c-5), var(--clamp-max-c-2)) var(--hue-magenta)); --magenta-5: oklch(var(--scale-l-5) min(var(--scale-c-7), var(--clamp-max-c-2)) var(--hue-magenta)); --magenta-6: oklch(var(--scale-l-6) min(var(--scale-c-8), var(--clamp-max-c-3)) var(--hue-magenta)); --magenta-7: oklch(var(--scale-l-7) min(var(--scale-c-9), var(--clamp-max-c-3)) var(--hue-magenta)); --magenta-8: oklch(var(--scale-l-8) min(var(--scale-c-8), var(--clamp-max-c-4)) var(--hue-magenta)); --magenta-9: oklch(var(--scale-l-9) min(var(--scale-c-7), var(--clamp-max-c-4)) var(--hue-magenta)); --magenta-10: oklch(var(--scale-l-10) min(var(--scale-c-5), var(--clamp-max-c-5)) var(--hue-magenta)); --magenta-11: oklch(var(--scale-l-11) min(var(--scale-c-4), var(--clamp-max-c-5)) var(--hue-magenta)); --magenta-12: oklch(var(--scale-l-12) min(var(--scale-c-3), var(--clamp-max-c-6)) var(--hue-magenta));
+
+ /* Blue Scale */
+ --blue-0: oklch(var(--scale-l-0) min(var(--scale-c-1), var(--clamp-max-c-0)) var(--hue-blue)); --blue-1: oklch(var(--scale-l-1) min(var(--scale-c-2), var(--clamp-max-c-0)) var(--hue-blue)); --blue-2: oklch(var(--scale-l-2) min(var(--scale-c-3), var(--clamp-max-c-1)) var(--hue-blue)); --blue-3: oklch(var(--scale-l-3) min(var(--scale-c-4), var(--clamp-max-c-1)) var(--hue-blue)); --blue-4: oklch(var(--scale-l-4) min(var(--scale-c-5), var(--clamp-max-c-2)) var(--hue-blue)); --blue-5: oklch(var(--scale-l-5) min(var(--scale-c-7), var(--clamp-max-c-2)) var(--hue-blue)); --blue-6: oklch(var(--scale-l-6) min(var(--scale-c-8), var(--clamp-max-c-3)) var(--hue-blue)); --blue-7: oklch(var(--scale-l-7) min(var(--scale-c-9), var(--clamp-max-c-3)) var(--hue-blue)); --blue-8: oklch(var(--scale-l-8) min(var(--scale-c-8), var(--clamp-max-c-4)) var(--hue-blue)); --blue-9: oklch(var(--scale-l-9) min(var(--scale-c-7), var(--clamp-max-c-4)) var(--hue-blue)); --blue-10: oklch(var(--scale-l-10) min(var(--scale-c-5), var(--clamp-max-c-5)) var(--hue-blue)); --blue-11: oklch(var(--scale-l-11) min(var(--scale-c-4), var(--clamp-max-c-5)) var(--hue-blue)); --blue-12: oklch(var(--scale-l-12) min(var(--scale-c-3), var(--clamp-max-c-6)) var(--hue-blue));
+ 
+ /* Red Scale */
+ --red-0: oklch(var(--scale-l-0) min(var(--scale-c-1), var(--clamp-max-c-0)) var(--hue-red)); --red-1: oklch(var(--scale-l-1) min(var(--scale-c-2), var(--clamp-max-c-0)) var(--hue-red)); --red-2: oklch(var(--scale-l-2) min(var(--scale-c-3), var(--clamp-max-c-1)) var(--hue-red)); --red-3: oklch(var(--scale-l-3) min(var(--scale-c-4), var(--clamp-max-c-1)) var(--hue-red)); --red-4: oklch(var(--scale-l-4) min(var(--scale-c-5), var(--clamp-error-max-c-2, var(--clamp-max-c-2))) var(--hue-red)); --red-5: oklch(var(--scale-l-5) min(var(--scale-c-6), var(--clamp-error-max-c-2, var(--clamp-max-c-2))) var(--hue-red)); --red-6: oklch(var(--scale-l-6) min(var(--scale-c-8), var(--clamp-error-max-c-3, var(--clamp-max-c-3))) var(--hue-red)); --red-7: oklch(var(--scale-l-7) min(var(--scale-c-9), var(--clamp-error-max-c-3, var(--clamp-max-c-3))) var(--hue-red)); --red-8: oklch(var(--scale-l-8) min(var(--scale-c-9), var(--clamp-error-max-c-4, var(--clamp-max-c-4))) var(--hue-red)); --red-9: oklch(var(--scale-l-9) min(var(--scale-c-7), var(--clamp-error-max-c-4, var(--clamp-max-c-4))) var(--hue-red)); --red-10: oklch(var(--scale-l-10) min(var(--scale-c-6), var(--clamp-max-c-5)) var(--hue-red)); --red-11: oklch(var(--scale-l-11) min(var(--scale-c-4), var(--clamp-max-c-5)) var(--hue-red)); --red-12: oklch(var(--scale-l-12) min(var(--scale-c-3), var(--clamp-max-c-6)) var(--hue-red));
+ 
+ /* Green Scale */
+ --green-0: oklch(var(--scale-l-0) min(var(--scale-c-1), var(--clamp-max-c-0)) var(--hue-green)); --green-1: oklch(var(--scale-l-1) min(var(--scale-c-2), var(--clamp-max-c-0)) var(--hue-green)); --green-2: oklch(var(--scale-l-2) min(var(--scale-c-3), var(--clamp-max-c-1)) var(--hue-green)); --green-3: oklch(var(--scale-l-3) min(var(--scale-c-4), var(--clamp-max-c-1)) var(--hue-green)); --green-4: oklch(var(--scale-l-4) min(var(--scale-c-5), var(--clamp-max-c-2)) var(--hue-green)); --green-5: oklch(var(--scale-l-5) min(var(--scale-c-6), var(--clamp-max-c-2)) var(--hue-green)); --green-6: oklch(var(--scale-l-6) min(var(--scale-c-7), var(--clamp-max-c-3)) var(--hue-green)); --green-7: oklch(var(--scale-l-7) min(var(--scale-c-8), var(--clamp-max-c-3)) var(--hue-green)); --green-8: oklch(var(--scale-l-8) min(var(--scale-c-8), var(--clamp-max-c-4)) var(--hue-green)); --green-9: oklch(var(--scale-l-9) min(var(--scale-c-6), var(--clamp-max-c-4)) var(--hue-green)); --green-10: oklch(var(--scale-l-10) min(var(--scale-c-5), var(--clamp-max-c-5)) var(--hue-green)); --green-11: oklch(var(--scale-l-11) min(var(--scale-c-4), var(--clamp-max-c-5)) var(--hue-green)); --green-12: oklch(var(--scale-l-12) min(var(--scale-c-3), var(--clamp-max-c-6)) var(--hue-green));
+ 
+ 
+ 
+ /* Amber Scale */
+ --amber-0: oklch(var(--scale-l-0) min(var(--scale-c-1), var(--clamp-max-c-0)) var(--hue-amber)); --amber-1: oklch(var(--scale-l-1) min(var(--scale-c-2), var(--clamp-max-c-0)) var(--hue-amber)); --amber-2: oklch(var(--scale-l-2) min(var(--scale-c-3), var(--clamp-max-c-1)) var(--hue-amber)); --amber-3: oklch(var(--scale-l-3) min(var(--scale-c-4), var(--clamp-max-c-1)) var(--hue-amber)); --amber-4: oklch(var(--scale-l-4) min(var(--scale-c-5), var(--clamp-max-c-2)) var(--hue-amber)); --amber-5: oklch(var(--scale-l-5) min(var(--scale-c-6), var(--clamp-max-c-2)) var(--hue-amber)); --amber-6: oklch(var(--scale-l-6) min(var(--scale-c-7), var(--clamp-max-c-3)) var(--hue-amber)); --amber-7: oklch(var(--scale-l-7) min(var(--scale-c-8), var(--clamp-max-c-3)) var(--hue-amber)); --amber-8: oklch(var(--scale-l-8) min(var(--scale-c-7), var(--clamp-max-c-4)) var(--hue-amber)); --amber-9: oklch(var(--scale-l-9) min(var(--scale-c-6), var(--clamp-max-c-4)) var(--hue-amber)); --amber-10: oklch(var(--scale-l-10) min(var(--scale-c-5), var(--clamp-max-c-5)) var(--hue-amber)); --amber-11: oklch(var(--scale-l-11) min(var(--scale-c-4), var(--clamp-max-c-5)) var(--hue-amber)); --amber-12: oklch(var(--scale-l-12) min(var(--scale-c-3), var(--clamp-max-c-6)) var(--hue-amber));
+ 
+ 
+ /* Lime Scale */
+ --lime-0: oklch(var(--scale-l-0) min(var(--scale-c-1), var(--clamp-max-c-0)) var(--hue-lime)); --lime-1: oklch(var(--scale-l-1) min(var(--scale-c-2), var(--clamp-max-c-0)) var(--hue-lime)); --lime-2: oklch(var(--scale-l-2) min(var(--scale-c-3), var(--clamp-max-c-1)) var(--hue-lime)); --lime-3: oklch(var(--scale-l-3) min(var(--scale-c-4), var(--clamp-max-c-1)) var(--hue-lime)); --lime-4: oklch(var(--scale-l-4) min(var(--scale-c-5), var(--clamp-max-c-2)) var(--hue-lime)); --lime-5: oklch(var(--scale-l-5) min(var(--scale-c-6), var(--clamp-max-c-2)) var(--hue-lime)); --lime-6: oklch(var(--scale-l-6) min(var(--scale-c-7), var(--clamp-max-c-3)) var(--hue-lime)); --lime-7: oklch(var(--scale-l-7) min(var(--scale-c-8), var(--clamp-max-c-3)) var(--hue-lime)); --lime-8: oklch(var(--scale-l-8) min(var(--scale-c-7), var(--clamp-max-c-4)) var(--hue-lime)); --lime-9: oklch(var(--scale-l-9) min(var(--scale-c-6), var(--clamp-max-c-4)) var(--hue-lime)); --lime-10: oklch(var(--scale-l-10) min(var(--scale-c-5), var(--clamp-max-c-5)) var(--hue-lime)); --lime-11: oklch(var(--scale-l-11) min(var(--scale-c-4), var(--clamp-max-c-5)) var(--hue-lime)); --lime-12: oklch(var(--scale-l-12) min(var(--scale-c-3), var(--clamp-max-c-6)) var(--hue-lime));
+ 
+ /* Emerald Scale */
+ --emerald-0: oklch(var(--scale-l-0) min(var(--scale-c-1), var(--clamp-max-c-0)) var(--hue-emerald)); --emerald-1: oklch(var(--scale-l-1) min(var(--scale-c-2), var(--clamp-max-c-0)) var(--hue-emerald)); --emerald-2: oklch(var(--scale-l-2) min(var(--scale-c-3), var(--clamp-max-c-1)) var(--hue-emerald)); --emerald-3: oklch(var(--scale-l-3) min(var(--scale-c-4), var(--clamp-max-c-1)) var(--hue-emerald)); --emerald-4: oklch(var(--scale-l-4) min(var(--scale-c-5), var(--clamp-max-c-2)) var(--hue-emerald)); --emerald-5: oklch(var(--scale-l-5) min(var(--scale-c-6), var(--clamp-max-c-2)) var(--hue-emerald)); --emerald-6: oklch(var(--scale-l-6) min(var(--scale-c-7), var(--clamp-max-c-3)) var(--hue-emerald)); --emerald-7: oklch(var(--scale-l-7) min(var(--scale-c-8), var(--clamp-max-c-3)) var(--hue-emerald)); --emerald-8: oklch(var(--scale-l-8) min(var(--scale-c-7), var(--clamp-max-c-4)) var(--hue-emerald)); --emerald-9: oklch(var(--scale-l-9) min(var(--scale-c-6), var(--clamp-max-c-4)) var(--hue-emerald)); --emerald-10: oklch(var(--scale-l-10) min(var(--scale-c-5), var(--clamp-max-c-5)) var(--hue-emerald)); --emerald-11: oklch(var(--scale-l-11) min(var(--scale-c-4), var(--clamp-max-c-5)) var(--hue-emerald)); --emerald-12: oklch(var(--scale-l-12) min(var(--scale-c-3), var(--clamp-max-c-6)) var(--hue-emerald));
+ 
+ /* Teal Scale */
+ --teal-0: oklch(var(--scale-l-0) min(var(--scale-c-1), var(--clamp-max-c-0)) var(--hue-teal)); --teal-1: oklch(var(--scale-l-1) min(var(--scale-c-2), var(--clamp-max-c-0)) var(--hue-teal)); --teal-2: oklch(var(--scale-l-2) min(var(--scale-c-3), var(--clamp-max-c-1)) var(--hue-teal)); --teal-3: oklch(var(--scale-l-3) min(var(--scale-c-4), var(--clamp-max-c-1)) var(--hue-teal)); --teal-4: oklch(var(--scale-l-4) min(var(--scale-c-5), var(--clamp-max-c-2)) var(--hue-teal)); --teal-5: oklch(var(--scale-l-5) min(var(--scale-c-6), var(--clamp-max-c-2)) var(--hue-teal)); --teal-6: oklch(var(--scale-l-6) min(var(--scale-c-7), var(--clamp-max-c-3)) var(--hue-teal)); --teal-7: oklch(var(--scale-l-7) min(var(--scale-c-8), var(--clamp-max-c-3)) var(--hue-teal)); --teal-8: oklch(var(--scale-l-8) min(var(--scale-c-7), var(--clamp-max-c-4)) var(--hue-teal)); --teal-9: oklch(var(--scale-l-9) min(var(--scale-c-6), var(--clamp-max-c-4)) var(--hue-teal)); --teal-10: oklch(var(--scale-l-10) min(var(--scale-c-5), var(--clamp-max-c-5)) var(--hue-teal)); --teal-11: oklch(var(--scale-l-11) min(var(--scale-c-4), var(--clamp-max-c-5)) var(--hue-teal)); --teal-12: oklch(var(--scale-l-12) min(var(--scale-c-3), var(--clamp-max-c-6)) var(--hue-teal));
+ 
+ 
+ /* Sky Scale */
+ --sky-0: oklch(var(--scale-l-0) min(var(--scale-c-1), var(--clamp-max-c-0)) var(--hue-sky)); --sky-1: oklch(var(--scale-l-1) min(var(--scale-c-2), var(--clamp-max-c-0)) var(--hue-sky)); --sky-2: oklch(var(--scale-l-2) min(var(--scale-c-3), var(--clamp-max-c-1)) var(--hue-sky)); --sky-3: oklch(var(--scale-l-3) min(var(--scale-c-4), var(--clamp-max-c-1)) var(--hue-sky)); --sky-4: oklch(var(--scale-l-4) min(var(--scale-c-5), var(--clamp-max-c-2)) var(--hue-sky)); --sky-5: oklch(var(--scale-l-5) min(var(--scale-c-6), var(--clamp-max-c-2)) var(--hue-sky)); --sky-6: oklch(var(--scale-l-6) min(var(--scale-c-7), var(--clamp-max-c-3)) var(--hue-sky)); --sky-7: oklch(var(--scale-l-7) min(var(--scale-c-8), var(--clamp-max-c-3)) var(--hue-sky)); --sky-8: oklch(var(--scale-l-8) min(var(--scale-c-7), var(--clamp-max-c-4)) var(--hue-sky)); --sky-9: oklch(var(--scale-l-9) min(var(--scale-c-6), var(--clamp-max-c-4)) var(--hue-sky)); --sky-10: oklch(var(--scale-l-10) min(var(--scale-c-5), var(--clamp-max-c-5)) var(--hue-sky)); --sky-11: oklch(var(--scale-l-11) min(var(--scale-c-4), var(--clamp-max-c-5)) var(--hue-sky)); --sky-12: oklch(var(--scale-l-12) min(var(--scale-c-3), var(--clamp-max-c-6)) var(--hue-sky));
+ 
+ /* Indigo Scale */
+ --indigo-0: oklch(var(--scale-l-0) min(var(--scale-c-1), var(--clamp-max-c-0)) var(--hue-indigo)); --indigo-1: oklch(var(--scale-l-1) min(var(--scale-c-2), var(--clamp-max-c-0)) var(--hue-indigo)); --indigo-2: oklch(var(--scale-l-2) min(var(--scale-c-3), var(--clamp-max-c-1)) var(--hue-indigo)); --indigo-3: oklch(var(--scale-l-3) min(var(--scale-c-4), var(--clamp-max-c-1)) var(--hue-indigo)); --indigo-4: oklch(var(--scale-l-4) min(var(--scale-c-5), var(--clamp-max-c-2)) var(--hue-indigo)); --indigo-5: oklch(var(--scale-l-5) min(var(--scale-c-6), var(--clamp-max-c-2)) var(--hue-indigo)); --indigo-6: oklch(var(--scale-l-6) min(var(--scale-c-7), var(--clamp-max-c-3)) var(--hue-indigo)); --indigo-7: oklch(var(--scale-l-7) min(var(--scale-c-8), var(--clamp-max-c-3)) var(--hue-indigo)); --indigo-8: oklch(var(--scale-l-8) min(var(--scale-c-7), var(--clamp-max-c-4)) var(--hue-indigo)); --indigo-9: oklch(var(--scale-l-9) min(var(--scale-c-6), var(--clamp-max-c-4)) var(--hue-indigo)); --indigo-10: oklch(var(--scale-l-10) min(var(--scale-c-5), var(--clamp-max-c-5)) var(--hue-indigo)); --indigo-11: oklch(var(--scale-l-11) min(var(--scale-c-4), var(--clamp-max-c-5)) var(--hue-indigo)); --indigo-12: oklch(var(--scale-l-12) min(var(--scale-c-3), var(--clamp-max-c-6)) var(--hue-indigo));
+ 
+ /* Violet Scale */
+ --violet-0: oklch(var(--scale-l-0) min(var(--scale-c-1), var(--clamp-max-c-0)) var(--hue-violet)); --violet-1: oklch(var(--scale-l-1) min(var(--scale-c-2), var(--clamp-max-c-0)) var(--hue-violet)); --violet-2: oklch(var(--scale-l-2) min(var(--scale-c-3), var(--clamp-max-c-1)) var(--hue-violet)); --violet-3: oklch(var(--scale-l-3) min(var(--scale-c-4), var(--clamp-max-c-1)) var(--hue-violet)); --violet-4: oklch(var(--scale-l-4) min(var(--scale-c-5), var(--clamp-max-c-2)) var(--hue-violet)); --violet-5: oklch(var(--scale-l-5) min(var(--scale-c-6), var(--clamp-max-c-2)) var(--hue-violet)); --violet-6: oklch(var(--scale-l-6) min(var(--scale-c-7), var(--clamp-max-c-3)) var(--hue-violet)); --violet-7: oklch(var(--scale-l-7) min(var(--scale-c-8), var(--clamp-max-c-3)) var(--hue-violet)); --violet-8: oklch(var(--scale-l-8) min(var(--scale-c-7), var(--clamp-max-c-4)) var(--hue-violet)); --violet-9: oklch(var(--scale-l-9) min(var(--scale-c-6), var(--clamp-max-c-4)) var(--hue-violet)); --violet-10: oklch(var(--scale-l-10) min(var(--scale-c-5), var(--clamp-max-c-5)) var(--hue-violet)); --violet-11: oklch(var(--scale-l-11) min(var(--scale-c-4), var(--clamp-max-c-5)) var(--hue-violet)); --violet-12: oklch(var(--scale-l-12) min(var(--scale-c-3), var(--clamp-max-c-6)) var(--hue-violet));
+ 
+ /* Purple Scale */
+ --purple-0: oklch(var(--scale-l-0) min(var(--scale-c-1), var(--clamp-max-c-0)) var(--hue-purple)); --purple-1: oklch(var(--scale-l-1) min(var(--scale-c-2), var(--clamp-max-c-0)) var(--hue-purple)); --purple-2: oklch(var(--scale-l-2) min(var(--scale-c-3), var(--clamp-max-c-1)) var(--hue-purple)); --purple-3: oklch(var(--scale-l-3) min(var(--scale-c-4), var(--clamp-max-c-1)) var(--hue-purple)); --purple-4: oklch(var(--scale-l-4) min(var(--scale-c-5), var(--clamp-max-c-2)) var(--hue-purple)); --purple-5: oklch(var(--scale-l-5) min(var(--scale-c-6), var(--clamp-max-c-2)) var(--hue-purple)); --purple-6: oklch(var(--scale-l-6) min(var(--scale-c-7), var(--clamp-max-c-3)) var(--hue-purple)); --purple-7: oklch(var(--scale-l-7) min(var(--scale-c-8), var(--clamp-max-c-3)) var(--hue-purple)); --purple-8: oklch(var(--scale-l-8) min(var(--scale-c-7), var(--clamp-max-c-4)) var(--hue-purple)); --purple-9: oklch(var(--scale-l-9) min(var(--scale-c-6), var(--clamp-max-c-4)) var(--hue-purple)); --purple-10: oklch(var(--scale-l-10) min(var(--scale-c-5), var(--clamp-max-c-5)) var(--hue-purple)); --purple-11: oklch(var(--scale-l-11) min(var(--scale-c-4), var(--clamp-max-c-5)) var(--hue-purple)); --purple-12: oklch(var(--scale-l-12) min(var(--scale-c-3), var(--clamp-max-c-6)) var(--hue-purple));
+ 
+ /* Fuchsia Scale */
+ --fuchsia-0: oklch(var(--scale-l-0) min(var(--scale-c-1), var(--clamp-max-c-0)) var(--hue-fuchsia)); --fuchsia-1: oklch(var(--scale-l-1) min(var(--scale-c-2), var(--clamp-max-c-0)) var(--hue-fuchsia)); --fuchsia-2: oklch(var(--scale-l-2) min(var(--scale-c-3), var(--clamp-max-c-1)) var(--hue-fuchsia)); --fuchsia-3: oklch(var(--scale-l-3) min(var(--scale-c-4), var(--clamp-max-c-1)) var(--hue-fuchsia)); --fuchsia-4: oklch(var(--scale-l-4) min(var(--scale-c-5), var(--clamp-max-c-2)) var(--hue-fuchsia)); --fuchsia-5: oklch(var(--scale-l-5) min(var(--scale-c-6), var(--clamp-max-c-2)) var(--hue-fuchsia)); --fuchsia-6: oklch(var(--scale-l-6) min(var(--scale-c-7), var(--clamp-max-c-3)) var(--hue-fuchsia)); --fuchsia-7: oklch(var(--scale-l-7) min(var(--scale-c-8), var(--clamp-max-c-3)) var(--hue-fuchsia)); --fuchsia-8: oklch(var(--scale-l-8) min(var(--scale-c-7), var(--clamp-max-c-4)) var(--hue-fuchsia)); --fuchsia-9: oklch(var(--scale-l-9) min(var(--scale-c-6), var(--clamp-max-c-4)) var(--hue-fuchsia)); --fuchsia-10: oklch(var(--scale-l-10) min(var(--scale-c-5), var(--clamp-max-c-5)) var(--hue-fuchsia)); --fuchsia-11: oklch(var(--scale-l-11) min(var(--scale-c-4), var(--clamp-max-c-5)) var(--hue-fuchsia)); --fuchsia-12: oklch(var(--scale-l-12) min(var(--scale-c-3), var(--clamp-max-c-6)) var(--hue-fuchsia));
+ 
+ /* Pink Scale */
+ --pink-0: oklch(var(--scale-l-0) min(var(--scale-c-1), var(--clamp-max-c-0)) var(--hue-pink)); --pink-1: oklch(var(--scale-l-1) min(var(--scale-c-2), var(--clamp-max-c-0)) var(--hue-pink)); --pink-2: oklch(var(--scale-l-2) min(var(--scale-c-3), var(--clamp-max-c-1)) var(--hue-pink)); --pink-3: oklch(var(--scale-l-3) min(var(--scale-c-4), var(--clamp-max-c-1)) var(--hue-pink)); --pink-4: oklch(var(--scale-l-4) min(var(--scale-c-5), var(--clamp-max-c-2)) var(--hue-pink)); --pink-5: oklch(var(--scale-l-5) min(var(--scale-c-6), var(--clamp-max-c-2)) var(--hue-pink)); --pink-6: oklch(var(--scale-l-6) min(var(--scale-c-7), var(--clamp-max-c-3)) var(--hue-pink)); --pink-7: oklch(var(--scale-l-7) min(var(--scale-c-8), var(--clamp-max-c-3)) var(--hue-pink)); --pink-8: oklch(var(--scale-l-8) min(var(--scale-c-7), var(--clamp-max-c-4)) var(--hue-pink)); --pink-9: oklch(var(--scale-l-9) min(var(--scale-c-6), var(--clamp-max-c-4)) var(--hue-pink)); --pink-10: oklch(var(--scale-l-10) min(var(--scale-c-5), var(--clamp-max-c-5)) var(--hue-pink)); --pink-11: oklch(var(--scale-l-11) min(var(--scale-c-4), var(--clamp-max-c-5)) var(--hue-pink)); --pink-12: oklch(var(--scale-l-12) min(var(--scale-c-3), var(--clamp-max-c-6)) var(--hue-pink));
+ 
+ /* Rose Scale */
+ --rose-0: oklch(var(--scale-l-0) min(var(--scale-c-1), var(--clamp-max-c-0)) var(--hue-rose)); --rose-1: oklch(var(--scale-l-1) min(var(--scale-c-2), var(--clamp-max-c-0)) var(--hue-rose)); --rose-2: oklch(var(--scale-l-2) min(var(--scale-c-3), var(--clamp-max-c-1)) var(--hue-rose)); --rose-3: oklch(var(--scale-l-3) min(var(--scale-c-4), var(--clamp-max-c-1)) var(--hue-rose)); --rose-4: oklch(var(--scale-l-4) min(var(--scale-c-5), var(--clamp-max-c-2)) var(--hue-rose)); --rose-5: oklch(var(--scale-l-5) min(var(--scale-c-6), var(--clamp-max-c-2)) var(--hue-rose)); --rose-6: oklch(var(--scale-l-6) min(var(--scale-c-7), var(--clamp-max-c-3)) var(--hue-rose)); --rose-7: oklch(var(--scale-l-7) min(var(--scale-c-8), var(--clamp-max-c-3)) var(--hue-rose)); --rose-8: oklch(var(--scale-l-8) min(var(--scale-c-7), var(--clamp-max-c-4)) var(--hue-rose)); --rose-9: oklch(var(--scale-l-9) min(var(--scale-c-6), var(--clamp-max-c-4)) var(--hue-rose)); --rose-10: oklch(var(--scale-l-10) min(var(--scale-c-5), var(--clamp-max-c-5)) var(--hue-rose)); --rose-11: oklch(var(--scale-l-11) min(var(--scale-c-4), var(--clamp-max-c-5)) var(--hue-rose)); --rose-12: oklch(var(--scale-l-12) min(var(--scale-c-3), var(--clamp-max-c-6)) var(--hue-rose));
+
+ /* Perceptually tuned named scales. Hue alone does not produce equally vivid families. */
+ /* Brown profile */
+ --brown-0: oklch(var(--scale-l-0) var(--palette-brown-chroma-0) var(--hue-brown));
+ --brown-1: oklch(var(--scale-l-1) var(--palette-brown-chroma-1) var(--hue-brown));
+ --brown-2: oklch(var(--scale-l-2) var(--palette-brown-chroma-2) var(--hue-brown));
+ --brown-3: oklch(var(--scale-l-3) var(--palette-brown-chroma-3) var(--hue-brown));
+ --brown-4: oklch(var(--scale-l-4) var(--palette-brown-chroma-4) var(--hue-brown));
+ --brown-5: oklch(var(--scale-l-5) var(--palette-brown-chroma-5) var(--hue-brown));
+ --brown-6: oklch(var(--scale-l-6) var(--palette-brown-chroma-6) var(--hue-brown));
+ --brown-7: oklch(var(--scale-l-7) var(--palette-brown-chroma-7) var(--hue-brown));
+ --brown-8: oklch(var(--scale-l-8) var(--palette-brown-chroma-8) var(--hue-brown));
+ --brown-9: oklch(var(--scale-l-9) var(--palette-brown-chroma-9) var(--hue-brown));
+ --brown-10: oklch(var(--scale-l-10) var(--palette-brown-chroma-10) var(--hue-brown));
+ --brown-11: oklch(var(--scale-l-11) var(--palette-brown-chroma-11) var(--hue-brown));
+ --brown-12: oklch(var(--scale-l-12) var(--palette-brown-chroma-12) var(--hue-brown));
+ /* Gold profile */
+ --gold-0: oklch(var(--scale-l-0) var(--palette-gold-chroma-0) var(--hue-gold));
+ --gold-1: oklch(var(--scale-l-1) var(--palette-gold-chroma-1) var(--hue-gold));
+ --gold-2: oklch(var(--scale-l-2) var(--palette-gold-chroma-2) var(--hue-gold));
+ --gold-3: oklch(var(--scale-l-3) var(--palette-gold-chroma-3) var(--hue-gold));
+ --gold-4: oklch(var(--scale-l-4) var(--palette-gold-chroma-4) var(--hue-gold));
+ --gold-5: oklch(var(--scale-l-5) var(--palette-gold-chroma-5) var(--hue-gold));
+ --gold-6: oklch(var(--scale-l-6) var(--palette-gold-chroma-6) var(--hue-gold));
+ --gold-7: oklch(var(--scale-l-7) var(--palette-gold-chroma-7) var(--hue-gold));
+ --gold-8: oklch(var(--scale-l-8) var(--palette-gold-chroma-8) var(--hue-gold));
+ --gold-9: oklch(var(--scale-l-9) var(--palette-gold-chroma-9) var(--hue-gold));
+ --gold-10: oklch(var(--scale-l-10) var(--palette-gold-chroma-10) var(--hue-gold));
+ --gold-11: oklch(var(--scale-l-11) var(--palette-gold-chroma-11) var(--hue-gold));
+ --gold-12: oklch(var(--scale-l-12) var(--palette-gold-chroma-12) var(--hue-gold));
+ /* Orange profile */
+ --orange-0: oklch(var(--scale-l-0) var(--palette-orange-chroma-0) var(--hue-orange));
+ --orange-1: oklch(var(--scale-l-1) var(--palette-orange-chroma-1) var(--hue-orange));
+ --orange-2: oklch(var(--scale-l-2) var(--palette-orange-chroma-2) var(--hue-orange));
+ --orange-3: oklch(var(--scale-l-3) var(--palette-orange-chroma-3) var(--hue-orange));
+ --orange-4: oklch(var(--scale-l-4) var(--palette-orange-chroma-4) var(--hue-orange));
+ --orange-5: oklch(var(--scale-l-5) var(--palette-orange-chroma-5) var(--hue-orange));
+ --orange-6: oklch(var(--scale-l-6) var(--palette-orange-chroma-6) var(--hue-orange));
+ --orange-7: oklch(var(--scale-l-7) var(--palette-orange-chroma-7) var(--hue-orange));
+ --orange-8: oklch(var(--scale-l-8) var(--palette-orange-chroma-8) var(--hue-orange));
+ --orange-9: oklch(var(--scale-l-9) var(--palette-orange-chroma-9) var(--hue-orange));
+ --orange-10: oklch(var(--scale-l-10) var(--palette-orange-chroma-10) var(--hue-orange));
+ --orange-11: oklch(var(--scale-l-11) var(--palette-orange-chroma-11) var(--hue-orange));
+ --orange-12: oklch(var(--scale-l-12) var(--palette-orange-chroma-12) var(--hue-orange));
+ /* Yellow profile */
+ --yellow-0: oklch(var(--scale-l-0) var(--palette-yellow-chroma-0) var(--hue-yellow));
+ --yellow-1: oklch(var(--scale-l-1) var(--palette-yellow-chroma-1) var(--hue-yellow));
+ --yellow-2: oklch(var(--scale-l-2) var(--palette-yellow-chroma-2) var(--hue-yellow));
+ --yellow-3: oklch(var(--scale-l-3) var(--palette-yellow-chroma-3) var(--hue-yellow));
+ --yellow-4: oklch(var(--scale-l-4) var(--palette-yellow-chroma-4) var(--hue-yellow));
+ --yellow-5: oklch(var(--scale-l-5) var(--palette-yellow-chroma-5) var(--hue-yellow));
+ --yellow-6: oklch(var(--scale-l-6) var(--palette-yellow-chroma-6) var(--hue-yellow));
+ --yellow-7: oklch(var(--scale-l-7) var(--palette-yellow-chroma-7) var(--hue-yellow));
+ --yellow-8: oklch(var(--scale-l-8) var(--palette-yellow-chroma-8) var(--hue-yellow));
+ --yellow-9: oklch(var(--scale-l-9) var(--palette-yellow-chroma-9) var(--hue-yellow));
+ --yellow-10: oklch(var(--scale-l-10) var(--palette-yellow-chroma-10) var(--hue-yellow));
+ --yellow-11: oklch(var(--scale-l-11) var(--palette-yellow-chroma-11) var(--hue-yellow));
+ --yellow-12: oklch(var(--scale-l-12) var(--palette-yellow-chroma-12) var(--hue-yellow));
+ /* Cyan profile */
+ --cyan-0: oklch(var(--scale-l-0) var(--palette-cyan-chroma-0) var(--hue-cyan));
+ --cyan-1: oklch(var(--scale-l-1) var(--palette-cyan-chroma-1) var(--hue-cyan));
+ --cyan-2: oklch(var(--scale-l-2) var(--palette-cyan-chroma-2) var(--hue-cyan));
+ --cyan-3: oklch(var(--scale-l-3) var(--palette-cyan-chroma-3) var(--hue-cyan));
+ --cyan-4: oklch(var(--scale-l-4) var(--palette-cyan-chroma-4) var(--hue-cyan));
+ --cyan-5: oklch(var(--scale-l-5) var(--palette-cyan-chroma-5) var(--hue-cyan));
+ --cyan-6: oklch(var(--scale-l-6) var(--palette-cyan-chroma-6) var(--hue-cyan));
+ --cyan-7: oklch(var(--scale-l-7) var(--palette-cyan-chroma-7) var(--hue-cyan));
+ --cyan-8: oklch(var(--scale-l-8) var(--palette-cyan-chroma-8) var(--hue-cyan));
+ --cyan-9: oklch(var(--scale-l-9) var(--palette-cyan-chroma-9) var(--hue-cyan));
+ --cyan-10: oklch(var(--scale-l-10) var(--palette-cyan-chroma-10) var(--hue-cyan));
+ --cyan-11: oklch(var(--scale-l-11) var(--palette-cyan-chroma-11) var(--hue-cyan));
+ --cyan-12: oklch(var(--scale-l-12) var(--palette-cyan-chroma-12) var(--hue-cyan));
+ /* Slate profile */
+ --slate-0: oklch(var(--scale-l-0) var(--palette-slate-chroma-0) var(--hue-slate));
+ --slate-1: oklch(var(--scale-l-1) var(--palette-slate-chroma-1) var(--hue-slate));
+ --slate-2: oklch(var(--scale-l-2) var(--palette-slate-chroma-2) var(--hue-slate));
+ --slate-3: oklch(var(--scale-l-3) var(--palette-slate-chroma-3) var(--hue-slate));
+ --slate-4: oklch(var(--scale-l-4) var(--palette-slate-chroma-4) var(--hue-slate));
+ --slate-5: oklch(var(--scale-l-5) var(--palette-slate-chroma-5) var(--hue-slate));
+ --slate-6: oklch(var(--scale-l-6) var(--palette-slate-chroma-6) var(--hue-slate));
+ --slate-7: oklch(var(--scale-l-7) var(--palette-slate-chroma-7) var(--hue-slate));
+ --slate-8: oklch(var(--scale-l-8) var(--palette-slate-chroma-8) var(--hue-slate));
+ --slate-9: oklch(var(--scale-l-9) var(--palette-slate-chroma-9) var(--hue-slate));
+ --slate-10: oklch(var(--scale-l-10) var(--palette-slate-chroma-10) var(--hue-slate));
+ --slate-11: oklch(var(--scale-l-11) var(--palette-slate-chroma-11) var(--hue-slate));
+ --slate-12: oklch(var(--scale-l-12) var(--palette-slate-chroma-12) var(--hue-slate));
+}

package/core/palette-feedback.css

@@ -0,0 +1,62 @@
+:root {
+ /* Feedback Scales (Success, Warning, Error, Info) */
+ /* Success Palette */
+ --success-palette-0: oklch(var(--scale-l-0) min(var(--scale-c-1), var(--clamp-max-c-0)) var(--success-h));
+ --success-palette-1: oklch(var(--scale-l-1) min(var(--scale-c-2), var(--clamp-max-c-0)) var(--success-h));
+ --success-palette-2: oklch(var(--scale-l-2) min(var(--scale-c-3), var(--clamp-max-c-1)) var(--success-h));
+ --success-palette-3: oklch(var(--scale-l-3) min(var(--scale-c-4), var(--clamp-max-c-1)) var(--success-h));
+ --success-palette-4: oklch(var(--scale-l-4) min(var(--scale-c-5), var(--clamp-max-c-2)) var(--success-h));
+ --success-palette-5: oklch(var(--scale-l-5) min(var(--scale-c-7), var(--clamp-max-c-2)) var(--success-h));
+ --success-palette-6: oklch(var(--scale-l-6) min(var(--scale-c-8), var(--clamp-max-c-3)) var(--success-h));
+ --success-palette-7: oklch(var(--scale-l-7) min(var(--scale-c-9), var(--clamp-max-c-3)) var(--success-h));
+ --success-palette-8: oklch(var(--scale-l-8) min(var(--scale-c-8), var(--clamp-max-c-4)) var(--success-h));
+ --success-palette-9: oklch(var(--scale-l-9) min(var(--scale-c-7), var(--clamp-max-c-4)) var(--success-h));
+ --success-palette-10: oklch(var(--scale-l-10) min(var(--scale-c-5), var(--clamp-max-c-5)) var(--success-h));
+ --success-palette-11: oklch(var(--scale-l-11) min(var(--scale-c-4), var(--clamp-max-c-5)) var(--success-h));
+ --success-palette-12: oklch(var(--scale-l-12) min(var(--scale-c-3), var(--clamp-max-c-6)) var(--success-h));
+ 
+ /* Warning Palette */
+ --warning-palette-0: oklch(var(--scale-l-0) min(var(--scale-c-1), var(--clamp-max-c-0)) var(--warning-h));
+ --warning-palette-1: oklch(var(--scale-l-1) min(var(--scale-c-2), var(--clamp-max-c-0)) var(--warning-h));
+ --warning-palette-2: oklch(var(--scale-l-2) min(var(--scale-c-3), var(--clamp-max-c-1)) var(--warning-h));
+ --warning-palette-3: oklch(var(--scale-l-3) min(var(--scale-c-4), var(--clamp-max-c-1)) var(--warning-h));
+ --warning-palette-4: oklch(var(--scale-l-4) min(var(--scale-c-5), var(--clamp-max-c-2)) var(--warning-h));
+ --warning-palette-5: oklch(var(--scale-l-5) min(var(--scale-c-7), var(--clamp-max-c-2)) var(--warning-h));
+ --warning-palette-6: oklch(var(--scale-l-6) min(var(--scale-c-8), var(--clamp-max-c-3)) var(--warning-h));
+ --warning-palette-7: oklch(var(--scale-l-7) min(var(--scale-c-9), var(--clamp-max-c-3)) var(--warning-h));
+ --warning-palette-8: oklch(var(--scale-l-8) min(var(--scale-c-8), var(--clamp-max-c-4)) var(--warning-h));
+ --warning-palette-9: oklch(var(--scale-l-9) min(var(--scale-c-7), var(--clamp-max-c-4)) var(--warning-h));
+ --warning-palette-10: oklch(var(--scale-l-10) min(var(--scale-c-5), var(--clamp-max-c-5)) var(--warning-h));
+ --warning-palette-11: oklch(var(--scale-l-11) min(var(--scale-c-4), var(--clamp-max-c-5)) var(--warning-h));
+ --warning-palette-12: oklch(var(--scale-l-12) min(var(--scale-c-3), var(--clamp-max-c-6)) var(--warning-h));
+ 
+ /* Error Palette */
+ --error-palette-0: oklch(var(--scale-l-0) min(var(--scale-c-1), var(--clamp-max-c-0)) var(--error-h));
+ --error-palette-1: oklch(var(--scale-l-1) min(var(--scale-c-2), var(--clamp-max-c-0)) var(--error-h));
+ --error-palette-2: oklch(var(--scale-l-2) min(var(--scale-c-3), var(--clamp-max-c-1)) var(--error-h));
+ --error-palette-3: oklch(var(--scale-l-3) min(var(--scale-c-4), var(--clamp-max-c-1)) var(--error-h));
+ --error-palette-4: oklch(var(--scale-l-4) min(var(--scale-c-5), var(--clamp-error-max-c-2, var(--clamp-max-c-2))) var(--error-h));
+ --error-palette-5: oklch(var(--scale-l-5) min(var(--scale-c-7), var(--clamp-error-max-c-2, var(--clamp-max-c-2))) var(--error-h));
+ --error-palette-6: oklch(var(--scale-l-6) min(var(--scale-c-8), var(--clamp-error-max-c-3, var(--clamp-max-c-3))) var(--error-h));
+ --error-palette-7: oklch(var(--scale-l-7) min(var(--scale-c-9), var(--clamp-error-max-c-3, var(--clamp-max-c-3))) var(--error-h));
+ --error-palette-8: oklch(var(--scale-l-8) min(var(--scale-c-8), var(--clamp-error-max-c-4, var(--clamp-max-c-4))) var(--error-h));
+ --error-palette-9: oklch(var(--scale-l-9) min(var(--scale-c-7), var(--clamp-error-max-c-4, var(--clamp-max-c-4))) var(--error-h));
+ --error-palette-10: oklch(var(--scale-l-10) min(var(--scale-c-5), var(--clamp-max-c-5)) var(--error-h));
+ --error-palette-11: oklch(var(--scale-l-11) min(var(--scale-c-4), var(--clamp-max-c-5)) var(--error-h));
+ --error-palette-12: oklch(var(--scale-l-12) min(var(--scale-c-3), var(--clamp-max-c-6)) var(--error-h));
+ 
+ /* Info Palette */
+ --info-palette-0: oklch(var(--scale-l-0) min(var(--scale-c-1), var(--clamp-max-c-0)) var(--info-h));
+ --info-palette-1: oklch(var(--scale-l-1) min(var(--scale-c-2), var(--clamp-max-c-0)) var(--info-h));
+ --info-palette-2: oklch(var(--scale-l-2) min(var(--scale-c-3), var(--clamp-max-c-1)) var(--info-h));
+ --info-palette-3: oklch(var(--scale-l-3) min(var(--scale-c-4), var(--clamp-max-c-1)) var(--info-h));
+ --info-palette-4: oklch(var(--scale-l-4) min(var(--scale-c-5), var(--clamp-max-c-2)) var(--info-h));
+ --info-palette-5: oklch(var(--scale-l-5) min(var(--scale-c-7), var(--clamp-max-c-2)) var(--info-h));
+ --info-palette-6: oklch(var(--scale-l-6) min(var(--scale-c-8), var(--clamp-max-c-3)) var(--info-h));
+ --info-palette-7: oklch(var(--scale-l-7) min(var(--scale-c-9), var(--clamp-max-c-3)) var(--info-h));
+ --info-palette-8: oklch(var(--scale-l-8) min(var(--scale-c-8), var(--clamp-max-c-4)) var(--info-h));
+ --info-palette-9: oklch(var(--scale-l-9) min(var(--scale-c-7), var(--clamp-max-c-4)) var(--info-h));
+ --info-palette-10: oklch(var(--scale-l-10) min(var(--scale-c-5), var(--clamp-max-c-5)) var(--info-h));
+ --info-palette-11: oklch(var(--scale-l-11) min(var(--scale-c-4), var(--clamp-max-c-5)) var(--info-h));
+ --info-palette-12: oklch(var(--scale-l-12) min(var(--scale-c-3), var(--clamp-max-c-6)) var(--info-h));
+}

package/core/palette.css

@@ -0,0 +1,7 @@
+ /* ================================================ */
+ /* ==               @layer palette               == */
+ /* ================================================ */
+@import url("./palette-base.css") layer(palette);
+@import url("./palette-accent.css") layer(palette);
+@import url("./palette-feedback.css") layer(palette);
+@import url("./palette-extended.css") layer(palette);

package/core/reset.css

@@ -0,0 +1,270 @@
+/* Everything is in the reset layer so it can be easily overwritten. */
+  /* Applies to everything */
+  *, *::before, *::after { 
+    /* Controversial, but I like having a clean slate of margin / padding. */
+    margin:0; 
+    padding: 0; 
+    /* Resets to what I believe most people already assume is the case. */
+    box-sizing: border-box; 
+    vertical-align: baseline;
+    min-width: 0;
+    scroll-behavior: smooth;
+    transition-behavior: allow-discrete
+  }
+
+/* I prefer having some sort of transition */
+  :where(:not(:is(svg *, p, h1, h2, h3, h4, h5, h6))) {
+    transition: ease-out 100ms;
+    transition-property: color, background, margin, padding, width, grid-column, grid-row, height, grid-template-columns, grid-template-rows, opacity, border, border-radius
+  }
+
+  /* Everything is defined with :where so they have zero specificity and can easily be overwritten. */
+  
+   :where(html) { 
+     /* Fixes safari zoom issue */
+     text-size-adjust: none; 
+     -webkit-text-size-adjust: none; 
+     -moz-text-size-adjust: none; 
+
+     /* Enhanced font settings from old.css.txt */
+     --bodyFontSize: clamp(13.5px, 2.4vw, 16px);
+     --bodyFontColor: light-dark(#fafafa, #323232);
+     tab-size: 4; 
+     font-family: 'Work Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif ; 
+     color: var(--bodyFontColor);
+     line-height: 1.5; 
+     -webkit-font-smoothing: antialiased; 
+     font-size: var(--bodyFontSize);
+     font-synthesis: none;
+     text-rendering: optimizeLegibility;
+     overscroll-behavior: none;
+   }
+
+  /* Smooth scrolling when focusing within the page */
+  :where(html:focus-within) {
+   scroll-behavior: smooth;
+  }
+
+  /* Makes webcomponents / unknown elements display as you'd expect */
+  :where(:not(:defined)) { 
+      display: block; 
+  }
+
+  /* What most would already expect the size of the width / height to be. */
+  :where(:is(body, html)) { 
+    width: 100%; 
+    height: 100%; 
+  }
+
+  /* Opt-in to size animations */
+  :where(:root) {
+    interpolate-size: allow-keywords;
+  }
+
+  /* Fixes common media element issues */
+  :where(:is(img, picture, video, canvas, svg)) { 
+    display: block; 
+    max-width: 100%; 
+    vertical-align: middle; 
+  }
+
+  /* Makes the font / cursor of inputs what you'd probably expect. */
+  :where(:is(input, button, textarea, select):not([disabled])) { 
+    font: inherit; 
+    cursor: pointer; 
+  }
+
+  :where(*) {
+    transition-timing-function: ease-out;
+    transition-duration: 100ms;
+  }
+
+  :where(button) {
+    background: var(--bg);
+    border: var(--border);
+    border-radius: var(--radius-sm);
+    color: var(--text);
+    cursor: pointer;
+    font: inherit;
+    padding: var(--spacing-sm) var(--spacing-md);
+
+    transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.1s;
+  }
+
+  /* Headings / text outside of the normal places should look like normal text  */
+  :where(*:not(:is(main, body, .prose, .app, .root, #root)) > :is(h1, h2, h3, h4, h5, h6)), :where(p) { 
+    font-size: inherit; 
+    font-weight: inherit; 
+    overflow-wrap: break-word;
+    text-overflow: ellipsis;
+    background-color: inherit;
+  }
+
+  /* Normal headings should look like / act headings */
+  :where(:is(h1, h2, h3, h4, h5, h6)) { 
+    text-wrap: balance; 
+    letter-spacing: 0.2px; 
+    scroll-padding-block: 1lh; 
+  }
+
+  /* Make text pretty */
+  :where(p) { 
+    text-wrap: pretty
+  }
+
+  /* Auto-grow text areas. */
+  :where(textarea) { 
+    form-sizing: content; 
+    min-height: 2lh; 
+    max-height: 10lh; 
+  }
+
+  /* Shrink text areas to content */
+  :where(:is(textarea, select, input)) {
+    field-sizing: content;
+  }
+
+  /* Allow button borders to escape their containers. I think this is what most people want. Also, trim additional space in buttons */
+  :where(button) { 
+    box-sizing: content-box;
+  }
+
+  /* SPA containers should be isolated. Maybe will help with css performance? Doubt it tho. */
+  :where(:is(#root, #__next, div#app)) { 
+    isolation: isolate; 
+  }
+
+  /* Tables as you probably want them. */
+  :where(table) { 
+    text-indent: 0; 
+    border-color: inherit; 
+    border-collapse: collapse; 
+    border-spacing: 0; 
+  }
+
+  /* Lists that arnt next to text should not have bullet points. */
+  :where(*:not(p) ~ :is(ul, ol) > li), .list-style-none { 
+    list-style: none; 
+  }
+
+  /* Hide blank images  */
+  :where([src='']) { 
+    visibility: hidden; 
+  }
+
+  /* Fixes unexpected popover backdrop issues */
+  *::backdrop { 
+    all:unset;
+    position: fixed;
+    inset: 0;
+    opacity: 0.7;
+  }
+
+  :where(modal::dialog) { 
+    max-width: 100dvw; 
+    max-height:100dvh; 
+  }
+
+  /* Makes so if just a border color / width is defined, then it'll still work as expected */
+  :where(:not(:is(html, audio, textarea, body, main, table, button, checkbox, input, td, tr, th, tbody, table, tfoot, video, form, details, select, summary, fieldset, hr, *::before, *::after, frame, iframe, datalist, object))) { 
+    border-style: solid; 
+    border-width: 0; 
+  }
+
+  /* Hides empty elements */
+  :where(:is(a:empty, ul:empty, dl:empty, div:empty, section:empty, article:empty, p:empty, h1:empty, h2:empty, h3:empty, h4:empty, h5:empty, h6:empty)) { 
+    display: none; 
+  }
+
+  /* Everyone will probably need this at some point */
+  :where(.display-none) { 
+    display: none; 
+  }
+
+  :where([hidden], .visually-hidden) {
+    clip: rect(0 0 0 0); 
+    clip-path: inset(50%);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap; 
+    width: 1px;
+    content-visibility: hidden;
+  }
+
+  /* Makes Url heading targets display in view. */
+  :where(:target) { 
+    scroll-margin-block: 5ex; 
+  }
+
+   /* Enhanced prefers reduced motion from old.css.txt */
+   @media (prefers-reduced-motion: reduce) {
+     *, *::before, *::after { 
+       animation-duration: 0.01ms !important; 
+       animation-iteration-count: 1 !important; 
+       transition-duration: 0.01ms !important; 
+       transition: none; 
+       animation-name: none; 
+     }
+   }
+  /* Turns on view transitions */
+  @view-transition { 
+    navigation: auto; 
+  }
+
+  /* Consistent styling for the summary element */ 
+  :where(summary) { 
+   cursor: pointer; 
+   display: list-item; 
+  } 
+  
+  /* Remove the default border from iframes */ 
+  :where(iframe) { 
+   border: 0; 
+  }
+
+  /* Ensure SVGs inherit color and don't have a default size */
+  :where(svg:not([width])) {
+    height: auto;
+  }
+
+  :where(svg) {
+    fill: currentColor;
+  }
+
+   /* Makes select element styleable */
+   :where(select), :where(select::picker(select)) {
+     appearance: base-select
+   }
+
+   /* Additional rules from old.css.txt for better coverage */
+   :where(:is(textarea, select, input)) {
+     field-sizing: content;
+   }
+
+   :where(:root) {
+     interpolate-size: allow-keywords;
+   }
+
+   /* Enhanced visually-hidden for accessibility */
+   :where([hidden], .visually-hidden) {
+     clip: rect(0 0 0 0); 
+     clip-path: inset(50%);
+     height: 1px;
+     overflow: hidden;
+     position: absolute;
+     white-space: nowrap; 
+     width: 1px;
+     content-visibility: hidden;
+   }
+
+   /* Hide empty elements */
+   :where(:is(a:empty, ul:empty, dl:empty, div:empty, section:empty, article:empty, p:empty, h1:empty, h2:empty, h3:empty, h4:empty, h5:empty, h6:empty)) { 
+     display: none; 
+   }
+
+   /* Enhanced transitions for non-text elements */
+   :where(:not(:is(svg *, p, h1, h2, h3, h4, h5, h6))) {
+     transition: ease-out 100ms;
+     transition-property: color, background, margin, padding, width, grid-column, grid-row, height, grid-template-columns, grid-template-rows, opacity, border, border-radius;
+   }