chore: use sass vars for colors

src/ModManUi/src/PrimeVue.ts

@@ -2,8 +2,24 @@ import type { App } from "vue";
 import PrimeVue from "primevue/config";
 import Aura from "@primeuix/themes/aura";
 import { definePreset } from "@primeuix/themes";
+import type { ColorScale } from "@primeuix/styled";
 
 const ModManTheme = definePreset(Aura, {
+  primitive: {
+    brand: {
+      50: "var(--color-brand-50)",
+      100: "var(--color-brand-100)",
+      200: "var(--color-brand-200)",
+      300: "var(--color-brand-300)",
+      400: "var(--color-brand-400)",
+      500: "var(--color-brand-500)",
+      600: "var(--color-brand-600)",
+      700: "var(--color-brand-700)",
+      800: "var(--color-brand-800)",
+      900: "var(--color-brand-900)",
+      950: "var(--color-brand-950)",
+    } satisfies ColorScale,
+  },
   semantic: {
     primary: {
       50: "{orange.50}",
@@ -26,10 +42,10 @@ export function configurePrimeVue(app: App) {
     theme: {
       preset: ModManTheme,
       options: {
-        darkModeSelector: ".dark-mode",
+        darkModeSelector: ".dark",
       },
     },
   });
   // Always make dark mode for now
-  document.documentElement.classList.add("dark-mode");
+  document.documentElement.classList.add("dark");
 }

src/ModManUi/src/components/ModManHeader.vue

@@ -45,7 +45,7 @@ function onClickBack() {
 @use "@style/colors";
 
 .header {
-  background-color: colors.$CONTENT-BACKGROUND;
+  background-color: colors.$COLOR_CONTENT_BACKGROUND;
   text-align: center;
 
   padding: 0.25rem 0.25rem;
@@ -53,7 +53,7 @@ function onClickBack() {
   display: flex;
   justify-content: space-between;
 
-  border-bottom: 1px solid colors.$CONTENT-BORDER-COLOR;
+  border-bottom: 1px solid colors.$COLOR_CONTENT_BORDER;
 }
 
 .header-section {

src/ModManUi/src/style/_colors.scss

@@ -1,311 +1,5 @@
-// Primitive colors
+@use "colors_primitive";
-$EMERALD-50: var(--p-emerald-50);
+@forward "colors_primitive";
-$EMERALD-100: var(--p-emerald-100);
-$EMERALD-200: var(--p-emerald-200);
-$EMERALD-300: var(--p-emerald-300);
-$EMERALD-400: var(--p-emerald-400);
-$EMERALD-500: var(--p-emerald-500);
-$EMERALD-600: var(--p-emerald-600);
-$EMERALD-700: var(--p-emerald-700);
-$EMERALD-800: var(--p-emerald-800);
-$EMERALD-900: var(--p-emerald-900);
-$EMERALD-950: var(--p-emerald-950);
 
-$GREEN-50: var(--p-green-50);
+@use "colors_semantic";
-$GREEN-100: var(--p-green-100);
+@forward "colors_semantic";
-$GREEN-200: var(--p-green-200);
-$GREEN-300: var(--p-green-300);
-$GREEN-400: var(--p-green-400);
-$GREEN-500: var(--p-green-500);
-$GREEN-600: var(--p-green-600);
-$GREEN-700: var(--p-green-700);
-$GREEN-800: var(--p-green-800);
-$GREEN-900: var(--p-green-900);
-$GREEN-950: var(--p-green-950);
-
-$LIME-50: var(--p-lime-50);
-$LIME-100: var(--p-lime-100);
-$LIME-200: var(--p-lime-200);
-$LIME-300: var(--p-lime-300);
-$LIME-400: var(--p-lime-400);
-$LIME-500: var(--p-lime-500);
-$LIME-600: var(--p-lime-600);
-$LIME-700: var(--p-lime-700);
-$LIME-800: var(--p-lime-800);
-$LIME-900: var(--p-lime-900);
-$LIME-950: var(--p-lime-950);
-
-$RED-50: var(--p-red-50);
-$RED-100: var(--p-red-100);
-$RED-200: var(--p-red-200);
-$RED-300: var(--p-red-300);
-$RED-400: var(--p-red-400);
-$RED-500: var(--p-red-500);
-$RED-600: var(--p-red-600);
-$RED-700: var(--p-red-700);
-$RED-800: var(--p-red-800);
-$RED-900: var(--p-red-900);
-$RED-950: var(--p-red-950);
-
-$ORANGE-50: var(--p-orange-50);
-$ORANGE-100: var(--p-orange-100);
-$ORANGE-200: var(--p-orange-200);
-$ORANGE-300: var(--p-orange-300);
-$ORANGE-400: var(--p-orange-400);
-$ORANGE-500: var(--p-orange-500);
-$ORANGE-600: var(--p-orange-600);
-$ORANGE-700: var(--p-orange-700);
-$ORANGE-800: var(--p-orange-800);
-$ORANGE-900: var(--p-orange-900);
-$ORANGE-950: var(--p-orange-950);
-
-$AMBER-50: var(--p-amber-50);
-$AMBER-100: var(--p-amber-100);
-$AMBER-200: var(--p-amber-200);
-$AMBER-300: var(--p-amber-300);
-$AMBER-400: var(--p-amber-400);
-$AMBER-500: var(--p-amber-500);
-$AMBER-600: var(--p-amber-600);
-$AMBER-700: var(--p-amber-700);
-$AMBER-800: var(--p-amber-800);
-$AMBER-900: var(--p-amber-900);
-$AMBER-950: var(--p-amber-950);
-
-$YELLOW-50: var(--p-yellow-50);
-$YELLOW-100: var(--p-yellow-100);
-$YELLOW-200: var(--p-yellow-200);
-$YELLOW-300: var(--p-yellow-300);
-$YELLOW-400: var(--p-yellow-400);
-$YELLOW-500: var(--p-yellow-500);
-$YELLOW-600: var(--p-yellow-600);
-$YELLOW-700: var(--p-yellow-700);
-$YELLOW-800: var(--p-yellow-800);
-$YELLOW-900: var(--p-yellow-900);
-$YELLOW-950: var(--p-yellow-950);
-
-$TEAL-50: var(--p-teal-50);
-$TEAL-100: var(--p-teal-100);
-$TEAL-200: var(--p-teal-200);
-$TEAL-300: var(--p-teal-300);
-$TEAL-400: var(--p-teal-400);
-$TEAL-500: var(--p-teal-500);
-$TEAL-600: var(--p-teal-600);
-$TEAL-700: var(--p-teal-700);
-$TEAL-800: var(--p-teal-800);
-$TEAL-900: var(--p-teal-900);
-$TEAL-950: var(--p-teal-950);
-
-$CYAN-50: var(--p-cyan-50);
-$CYAN-100: var(--p-cyan-100);
-$CYAN-200: var(--p-cyan-200);
-$CYAN-300: var(--p-cyan-300);
-$CYAN-400: var(--p-cyan-400);
-$CYAN-500: var(--p-cyan-500);
-$CYAN-600: var(--p-cyan-600);
-$CYAN-700: var(--p-cyan-700);
-$CYAN-800: var(--p-cyan-800);
-$CYAN-900: var(--p-cyan-900);
-$CYAN-950: var(--p-cyan-950);
-
-$SKY-50: var(--p-sky-50);
-$SKY-100: var(--p-sky-100);
-$SKY-200: var(--p-sky-200);
-$SKY-300: var(--p-sky-300);
-$SKY-400: var(--p-sky-400);
-$SKY-500: var(--p-sky-500);
-$SKY-600: var(--p-sky-600);
-$SKY-700: var(--p-sky-700);
-$SKY-800: var(--p-sky-800);
-$SKY-900: var(--p-sky-900);
-$SKY-950: var(--p-sky-950);
-
-$BLUE-50: var(--p-blue-50);
-$BLUE-100: var(--p-blue-100);
-$BLUE-200: var(--p-blue-200);
-$BLUE-300: var(--p-blue-300);
-$BLUE-400: var(--p-blue-400);
-$BLUE-500: var(--p-blue-500);
-$BLUE-600: var(--p-blue-600);
-$BLUE-700: var(--p-blue-700);
-$BLUE-800: var(--p-blue-800);
-$BLUE-900: var(--p-blue-900);
-$BLUE-950: var(--p-blue-950);
-
-$INDIGO-50: var(--p-indigo-50);
-$INDIGO-100: var(--p-indigo-100);
-$INDIGO-200: var(--p-indigo-200);
-$INDIGO-300: var(--p-indigo-300);
-$INDIGO-400: var(--p-indigo-400);
-$INDIGO-500: var(--p-indigo-500);
-$INDIGO-600: var(--p-indigo-600);
-$INDIGO-700: var(--p-indigo-700);
-$INDIGO-800: var(--p-indigo-800);
-$INDIGO-900: var(--p-indigo-900);
-$INDIGO-950: var(--p-indigo-950);
-
-$VIOLET-50: var(--p-violet-50);
-$VIOLET-100: var(--p-violet-100);
-$VIOLET-200: var(--p-violet-200);
-$VIOLET-300: var(--p-violet-300);
-$VIOLET-400: var(--p-violet-400);
-$VIOLET-500: var(--p-violet-500);
-$VIOLET-600: var(--p-violet-600);
-$VIOLET-700: var(--p-violet-700);
-$VIOLET-800: var(--p-violet-800);
-$VIOLET-900: var(--p-violet-900);
-$VIOLET-950: var(--p-violet-950);
-
-$PURPLE-50: var(--p-purple-50);
-$PURPLE-100: var(--p-purple-100);
-$PURPLE-200: var(--p-purple-200);
-$PURPLE-300: var(--p-purple-300);
-$PURPLE-400: var(--p-purple-400);
-$PURPLE-500: var(--p-purple-500);
-$PURPLE-600: var(--p-purple-600);
-$PURPLE-700: var(--p-purple-700);
-$PURPLE-800: var(--p-purple-800);
-$PURPLE-900: var(--p-purple-900);
-$PURPLE-950: var(--p-purple-950);
-
-$FUCHSIA-50: var(--p-fuchsia-50);
-$FUCHSIA-100: var(--p-fuchsia-100);
-$FUCHSIA-200: var(--p-fuchsia-200);
-$FUCHSIA-300: var(--p-fuchsia-300);
-$FUCHSIA-400: var(--p-fuchsia-400);
-$FUCHSIA-500: var(--p-fuchsia-500);
-$FUCHSIA-600: var(--p-fuchsia-600);
-$FUCHSIA-700: var(--p-fuchsia-700);
-$FUCHSIA-800: var(--p-fuchsia-800);
-$FUCHSIA-900: var(--p-fuchsia-900);
-$FUCHSIA-950: var(--p-fuchsia-950);
-
-$PINK-50: var(--p-pink-50);
-$PINK-100: var(--p-pink-100);
-$PINK-200: var(--p-pink-200);
-$PINK-300: var(--p-pink-300);
-$PINK-400: var(--p-pink-400);
-$PINK-500: var(--p-pink-500);
-$PINK-600: var(--p-pink-600);
-$PINK-700: var(--p-pink-700);
-$PINK-800: var(--p-pink-800);
-$PINK-900: var(--p-pink-900);
-$PINK-950: var(--p-pink-950);
-
-$ROSE-50: var(--p-rose-50);
-$ROSE-100: var(--p-rose-100);
-$ROSE-200: var(--p-rose-200);
-$ROSE-300: var(--p-rose-300);
-$ROSE-400: var(--p-rose-400);
-$ROSE-500: var(--p-rose-500);
-$ROSE-600: var(--p-rose-600);
-$ROSE-700: var(--p-rose-700);
-$ROSE-800: var(--p-rose-800);
-$ROSE-900: var(--p-rose-900);
-$ROSE-950: var(--p-rose-950);
-
-$SLATE-50: var(--p-slate-50);
-$SLATE-100: var(--p-slate-100);
-$SLATE-200: var(--p-slate-200);
-$SLATE-300: var(--p-slate-300);
-$SLATE-400: var(--p-slate-400);
-$SLATE-500: var(--p-slate-500);
-$SLATE-600: var(--p-slate-600);
-$SLATE-700: var(--p-slate-700);
-$SLATE-800: var(--p-slate-800);
-$SLATE-900: var(--p-slate-900);
-$SLATE-950: var(--p-slate-950);
-
-$GRAY-50: var(--p-gray-50);
-$GRAY-100: var(--p-gray-100);
-$GRAY-200: var(--p-gray-200);
-$GRAY-300: var(--p-gray-300);
-$GRAY-400: var(--p-gray-400);
-$GRAY-500: var(--p-gray-500);
-$GRAY-600: var(--p-gray-600);
-$GRAY-700: var(--p-gray-700);
-$GRAY-800: var(--p-gray-800);
-$GRAY-900: var(--p-gray-900);
-$GRAY-950: var(--p-gray-950);
-
-$ZINC-50: var(--p-zinc-50);
-$ZINC-100: var(--p-zinc-100);
-$ZINC-200: var(--p-zinc-200);
-$ZINC-300: var(--p-zinc-300);
-$ZINC-400: var(--p-zinc-400);
-$ZINC-500: var(--p-zinc-500);
-$ZINC-600: var(--p-zinc-600);
-$ZINC-700: var(--p-zinc-700);
-$ZINC-800: var(--p-zinc-800);
-$ZINC-900: var(--p-zinc-900);
-$ZINC-950: var(--p-zinc-950);
-
-$NEUTRAL-50: var(--p-neutral-50);
-$NEUTRAL-100: var(--p-neutral-100);
-$NEUTRAL-200: var(--p-neutral-200);
-$NEUTRAL-300: var(--p-neutral-300);
-$NEUTRAL-400: var(--p-neutral-400);
-$NEUTRAL-500: var(--p-neutral-500);
-$NEUTRAL-600: var(--p-neutral-600);
-$NEUTRAL-700: var(--p-neutral-700);
-$NEUTRAL-800: var(--p-neutral-800);
-$NEUTRAL-900: var(--p-neutral-900);
-$NEUTRAL-950: var(--p-neutral-950);
-
-$STONE-50: var(--p-stone-50);
-$STONE-100: var(--p-stone-100);
-$STONE-200: var(--p-stone-200);
-$STONE-300: var(--p-stone-300);
-$STONE-400: var(--p-stone-400);
-$STONE-500: var(--p-stone-500);
-$STONE-600: var(--p-stone-600);
-$STONE-700: var(--p-stone-700);
-$STONE-800: var(--p-stone-800);
-$STONE-900: var(--p-stone-900);
-$STONE-950: var(--p-stone-950);
-
-// Semantic colors
-
-$PRIMARY-50: var(--p-primary-50);
-$PRIMARY-100: var(--p-primary-100);
-$PRIMARY-200: var(--p-primary-200);
-$PRIMARY-300: var(--p-primary-300);
-$PRIMARY-400: var(--p-primary-400);
-$PRIMARY-500: var(--p-primary-500);
-$PRIMARY-600: var(--p-primary-600);
-$PRIMARY-700: var(--p-primary-700);
-$PRIMARY-800: var(--p-primary-800);
-$PRIMARY-900: var(--p-primary-900);
-$PRIMARY-950: var(--p-primary-950);
-
-$SURFACE-50: var(--p-surface-50);
-$SURFACE-100: var(--p-surface-100);
-$SURFACE-200: var(--p-surface-200);
-$SURFACE-300: var(--p-surface-300);
-$SURFACE-400: var(--p-surface-400);
-$SURFACE-500: var(--p-surface-500);
-$SURFACE-600: var(--p-surface-600);
-$SURFACE-700: var(--p-surface-700);
-$SURFACE-800: var(--p-surface-800);
-$SURFACE-900: var(--p-surface-900);
-$SURFACE-950: var(--p-surface-950);
-
-$PRIMARY-COLOR: var(--p-primary-color);
-$PRIMARY-CONTRAST-COLOR: var(--p-primary-contrast-color);
-$PRIMARY-HOVER-COLOR: var(--p-primary-hover-color);
-$PRIMARY-ACTIVE-COLOR: var(--p-primary-active-color);
-
-$CONTENT-BACKGROUND: var(--p-content-background);
-$CONTENT-HOVER-BACKGROUND: var(--p-content-hover-background);
-$CONTENT-BORDER-COLOR: var(--p-content-border-color);
-$CONTENT-COLOR: var(--p-content-color);
-$CONTENT-HOVER-COLOR: var(--p-content-hover-color);
-
-$HIGHLIGHT-BACKGROUND: var(--p-highlight-background);
-$HIGHLIGHT-FOCUS-BACKGROUND: var(--p-highlight-focus-background);
-$HIGHLIGHT-COLOR: var(--p-highlight-color);
-$HIGHLIGHT-FOCUS-COLOR: var(--p-highlight-focus-color);
-
-$TEXT-COLOR: var(--p-text-color);
-$TEXT-HOVER-COLOR: var(--p-text-hover-color);
-$TEXT-MUTED-COLOR: var(--p-text-muted-color);
-$TEXT-HOVER-MUTED-COLOR: var(--p-text-hover-muted-color);

src/ModManUi/src/style/_colors_primitive.scss

@@ -0,0 +1,278 @@
+// Primitive colors are colors that have literal values and they do not change depending on the context.
+$COLOR_BRAND_50: #f7ebdf;
+$COLOR_BRAND_100: #f1dfca;
+$COLOR_BRAND_200: #eaceae;
+$COLOR_BRAND_300: #e0b685;
+$COLOR_BRAND_400: #d59d5d;
+$COLOR_BRAND_500: #cc8838;
+$COLOR_BRAND_600: #b9772c;
+$COLOR_BRAND_700: #784818;
+$COLOR_BRAND_800: #573816;
+$COLOR_BRAND_900: #3d2810;
+$COLOR_BRAND_950: #291b0a;
+$COLOR_BRAND: $COLOR_BRAND_500;
+
+// These colors are taken from PrimeVue Aura theme
+$COLOR_EMERALD_50: var(--p-emerald-50);
+$COLOR_EMERALD_100: var(--p-emerald-100);
+$COLOR_EMERALD_200: var(--p-emerald-200);
+$COLOR_EMERALD_300: var(--p-emerald-300);
+$COLOR_EMERALD_400: var(--p-emerald-400);
+$COLOR_EMERALD_500: var(--p-emerald-500);
+$COLOR_EMERALD_600: var(--p-emerald-600);
+$COLOR_EMERALD_700: var(--p-emerald-700);
+$COLOR_EMERALD_800: var(--p-emerald-800);
+$COLOR_EMERALD_900: var(--p-emerald-900);
+$COLOR_EMERALD_950: var(--p-emerald-950);
+
+$COLOR_GREEN_50: var(--p-green-50);
+$COLOR_GREEN_100: var(--p-green-100);
+$COLOR_GREEN_200: var(--p-green-200);
+$COLOR_GREEN_300: var(--p-green-300);
+$COLOR_GREEN_400: var(--p-green-400);
+$COLOR_GREEN_500: var(--p-green-500);
+$COLOR_GREEN_600: var(--p-green-600);
+$COLOR_GREEN_700: var(--p-green-700);
+$COLOR_GREEN_800: var(--p-green-800);
+$COLOR_GREEN_900: var(--p-green-900);
+$COLOR_GREEN_950: var(--p-green-950);
+
+$COLOR_LIME_50: var(--p-lime-50);
+$COLOR_LIME_100: var(--p-lime-100);
+$COLOR_LIME_200: var(--p-lime-200);
+$COLOR_LIME_300: var(--p-lime-300);
+$COLOR_LIME_400: var(--p-lime-400);
+$COLOR_LIME_500: var(--p-lime-500);
+$COLOR_LIME_600: var(--p-lime-600);
+$COLOR_LIME_700: var(--p-lime-700);
+$COLOR_LIME_800: var(--p-lime-800);
+$COLOR_LIME_900: var(--p-lime-900);
+$COLOR_LIME_950: var(--p-lime-950);
+
+$COLOR_RED_50: var(--p-red-50);
+$COLOR_RED_100: var(--p-red-100);
+$COLOR_RED_200: var(--p-red-200);
+$COLOR_RED_300: var(--p-red-300);
+$COLOR_RED_400: var(--p-red-400);
+$COLOR_RED_500: var(--p-red-500);
+$COLOR_RED_600: var(--p-red-600);
+$COLOR_RED_700: var(--p-red-700);
+$COLOR_RED_800: var(--p-red-800);
+$COLOR_RED_900: var(--p-red-900);
+$COLOR_RED_950: var(--p-red-950);
+
+$COLOR_ORANGE_50: var(--p-orange-50);
+$COLOR_ORANGE_100: var(--p-orange-100);
+$COLOR_ORANGE_200: var(--p-orange-200);
+$COLOR_ORANGE_300: var(--p-orange-300);
+$COLOR_ORANGE_400: var(--p-orange-400);
+$COLOR_ORANGE_500: var(--p-orange-500);
+$COLOR_ORANGE_600: var(--p-orange-600);
+$COLOR_ORANGE_700: var(--p-orange-700);
+$COLOR_ORANGE_800: var(--p-orange-800);
+$COLOR_ORANGE_900: var(--p-orange-900);
+$COLOR_ORANGE_950: var(--p-orange-950);
+
+$COLOR_AMBER_50: var(--p-amber-50);
+$COLOR_AMBER_100: var(--p-amber-100);
+$COLOR_AMBER_200: var(--p-amber-200);
+$COLOR_AMBER_300: var(--p-amber-300);
+$COLOR_AMBER_400: var(--p-amber-400);
+$COLOR_AMBER_500: var(--p-amber-500);
+$COLOR_AMBER_600: var(--p-amber-600);
+$COLOR_AMBER_700: var(--p-amber-700);
+$COLOR_AMBER_800: var(--p-amber-800);
+$COLOR_AMBER_900: var(--p-amber-900);
+$COLOR_AMBER_950: var(--p-amber-950);
+
+$COLOR_YELLOW_50: var(--p-yellow-50);
+$COLOR_YELLOW_100: var(--p-yellow-100);
+$COLOR_YELLOW_200: var(--p-yellow-200);
+$COLOR_YELLOW_300: var(--p-yellow-300);
+$COLOR_YELLOW_400: var(--p-yellow-400);
+$COLOR_YELLOW_500: var(--p-yellow-500);
+$COLOR_YELLOW_600: var(--p-yellow-600);
+$COLOR_YELLOW_700: var(--p-yellow-700);
+$COLOR_YELLOW_800: var(--p-yellow-800);
+$COLOR_YELLOW_900: var(--p-yellow-900);
+$COLOR_YELLOW_950: var(--p-yellow-950);
+
+$COLOR_TEAL_50: var(--p-teal-50);
+$COLOR_TEAL_100: var(--p-teal-100);
+$COLOR_TEAL_200: var(--p-teal-200);
+$COLOR_TEAL_300: var(--p-teal-300);
+$COLOR_TEAL_400: var(--p-teal-400);
+$COLOR_TEAL_500: var(--p-teal-500);
+$COLOR_TEAL_600: var(--p-teal-600);
+$COLOR_TEAL_700: var(--p-teal-700);
+$COLOR_TEAL_800: var(--p-teal-800);
+$COLOR_TEAL_900: var(--p-teal-900);
+$COLOR_TEAL_950: var(--p-teal-950);
+
+$COLOR_CYAN_50: var(--p-cyan-50);
+$COLOR_CYAN_100: var(--p-cyan-100);
+$COLOR_CYAN_200: var(--p-cyan-200);
+$COLOR_CYAN_300: var(--p-cyan-300);
+$COLOR_CYAN_400: var(--p-cyan-400);
+$COLOR_CYAN_500: var(--p-cyan-500);
+$COLOR_CYAN_600: var(--p-cyan-600);
+$COLOR_CYAN_700: var(--p-cyan-700);
+$COLOR_CYAN_800: var(--p-cyan-800);
+$COLOR_CYAN_900: var(--p-cyan-900);
+$COLOR_CYAN_950: var(--p-cyan-950);
+
+$COLOR_SKY_50: var(--p-sky-50);
+$COLOR_SKY_100: var(--p-sky-100);
+$COLOR_SKY_200: var(--p-sky-200);
+$COLOR_SKY_300: var(--p-sky-300);
+$COLOR_SKY_400: var(--p-sky-400);
+$COLOR_SKY_500: var(--p-sky-500);
+$COLOR_SKY_600: var(--p-sky-600);
+$COLOR_SKY_700: var(--p-sky-700);
+$COLOR_SKY_800: var(--p-sky-800);
+$COLOR_SKY_900: var(--p-sky-900);
+$COLOR_SKY_950: var(--p-sky-950);
+
+$COLOR_BLUE_50: var(--p-blue-50);
+$COLOR_BLUE_100: var(--p-blue-100);
+$COLOR_BLUE_200: var(--p-blue-200);
+$COLOR_BLUE_300: var(--p-blue-300);
+$COLOR_BLUE_400: var(--p-blue-400);
+$COLOR_BLUE_500: var(--p-blue-500);
+$COLOR_BLUE_600: var(--p-blue-600);
+$COLOR_BLUE_700: var(--p-blue-700);
+$COLOR_BLUE_800: var(--p-blue-800);
+$COLOR_BLUE_900: var(--p-blue-900);
+$COLOR_BLUE_950: var(--p-blue-950);
+
+$COLOR_INDIGO_50: var(--p-indigo-50);
+$COLOR_INDIGO_100: var(--p-indigo-100);
+$COLOR_INDIGO_200: var(--p-indigo-200);
+$COLOR_INDIGO_300: var(--p-indigo-300);
+$COLOR_INDIGO_400: var(--p-indigo-400);
+$COLOR_INDIGO_500: var(--p-indigo-500);
+$COLOR_INDIGO_600: var(--p-indigo-600);
+$COLOR_INDIGO_700: var(--p-indigo-700);
+$COLOR_INDIGO_800: var(--p-indigo-800);
+$COLOR_INDIGO_900: var(--p-indigo-900);
+$COLOR_INDIGO_950: var(--p-indigo-950);
+
+$COLOR_VIOLET_50: var(--p-violet-50);
+$COLOR_VIOLET_100: var(--p-violet-100);
+$COLOR_VIOLET_200: var(--p-violet-200);
+$COLOR_VIOLET_300: var(--p-violet-300);
+$COLOR_VIOLET_400: var(--p-violet-400);
+$COLOR_VIOLET_500: var(--p-violet-500);
+$COLOR_VIOLET_600: var(--p-violet-600);
+$COLOR_VIOLET_700: var(--p-violet-700);
+$COLOR_VIOLET_800: var(--p-violet-800);
+$COLOR_VIOLET_900: var(--p-violet-900);
+$COLOR_VIOLET_950: var(--p-violet-950);
+
+$COLOR_PURPLE_50: var(--p-purple-50);
+$COLOR_PURPLE_100: var(--p-purple-100);
+$COLOR_PURPLE_200: var(--p-purple-200);
+$COLOR_PURPLE_300: var(--p-purple-300);
+$COLOR_PURPLE_400: var(--p-purple-400);
+$COLOR_PURPLE_500: var(--p-purple-500);
+$COLOR_PURPLE_600: var(--p-purple-600);
+$COLOR_PURPLE_700: var(--p-purple-700);
+$COLOR_PURPLE_800: var(--p-purple-800);
+$COLOR_PURPLE_900: var(--p-purple-900);
+$COLOR_PURPLE_950: var(--p-purple-950);
+
+$COLOR_FUCHSIA_50: var(--p-fuchsia-50);
+$COLOR_FUCHSIA_100: var(--p-fuchsia-100);
+$COLOR_FUCHSIA_200: var(--p-fuchsia-200);
+$COLOR_FUCHSIA_300: var(--p-fuchsia-300);
+$COLOR_FUCHSIA_400: var(--p-fuchsia-400);
+$COLOR_FUCHSIA_500: var(--p-fuchsia-500);
+$COLOR_FUCHSIA_600: var(--p-fuchsia-600);
+$COLOR_FUCHSIA_700: var(--p-fuchsia-700);
+$COLOR_FUCHSIA_800: var(--p-fuchsia-800);
+$COLOR_FUCHSIA_900: var(--p-fuchsia-900);
+$COLOR_FUCHSIA_950: var(--p-fuchsia-950);
+
+$COLOR_PINK_50: var(--p-pink-50);
+$COLOR_PINK_100: var(--p-pink-100);
+$COLOR_PINK_200: var(--p-pink-200);
+$COLOR_PINK_300: var(--p-pink-300);
+$COLOR_PINK_400: var(--p-pink-400);
+$COLOR_PINK_500: var(--p-pink-500);
+$COLOR_PINK_600: var(--p-pink-600);
+$COLOR_PINK_700: var(--p-pink-700);
+$COLOR_PINK_800: var(--p-pink-800);
+$COLOR_PINK_900: var(--p-pink-900);
+$COLOR_PINK_950: var(--p-pink-950);
+
+$COLOR_ROSE_50: var(--p-rose-50);
+$COLOR_ROSE_100: var(--p-rose-100);
+$COLOR_ROSE_200: var(--p-rose-200);
+$COLOR_ROSE_300: var(--p-rose-300);
+$COLOR_ROSE_400: var(--p-rose-400);
+$COLOR_ROSE_500: var(--p-rose-500);
+$COLOR_ROSE_600: var(--p-rose-600);
+$COLOR_ROSE_700: var(--p-rose-700);
+$COLOR_ROSE_800: var(--p-rose-800);
+$COLOR_ROSE_900: var(--p-rose-900);
+$COLOR_ROSE_950: var(--p-rose-950);
+
+$COLOR_SLATE_50: var(--p-slate-50);
+$COLOR_SLATE_100: var(--p-slate-100);
+$COLOR_SLATE_200: var(--p-slate-200);
+$COLOR_SLATE_300: var(--p-slate-300);
+$COLOR_SLATE_400: var(--p-slate-400);
+$COLOR_SLATE_500: var(--p-slate-500);
+$COLOR_SLATE_600: var(--p-slate-600);
+$COLOR_SLATE_700: var(--p-slate-700);
+$COLOR_SLATE_800: var(--p-slate-800);
+$COLOR_SLATE_900: var(--p-slate-900);
+$COLOR_SLATE_950: var(--p-slate-950);
+
+$COLOR_GRAY_50: var(--p-gray-50);
+$COLOR_GRAY_100: var(--p-gray-100);
+$COLOR_GRAY_200: var(--p-gray-200);
+$COLOR_GRAY_300: var(--p-gray-300);
+$COLOR_GRAY_400: var(--p-gray-400);
+$COLOR_GRAY_500: var(--p-gray-500);
+$COLOR_GRAY_600: var(--p-gray-600);
+$COLOR_GRAY_700: var(--p-gray-700);
+$COLOR_GRAY_800: var(--p-gray-800);
+$COLOR_GRAY_900: var(--p-gray-900);
+$COLOR_GRAY_950: var(--p-gray-950);
+
+$COLOR_ZINC_50: var(--p-zinc-50);
+$COLOR_ZINC_100: var(--p-zinc-100);
+$COLOR_ZINC_200: var(--p-zinc-200);
+$COLOR_ZINC_300: var(--p-zinc-300);
+$COLOR_ZINC_400: var(--p-zinc-400);
+$COLOR_ZINC_500: var(--p-zinc-500);
+$COLOR_ZINC_600: var(--p-zinc-600);
+$COLOR_ZINC_700: var(--p-zinc-700);
+$COLOR_ZINC_800: var(--p-zinc-800);
+$COLOR_ZINC_900: var(--p-zinc-900);
+$COLOR_ZINC_950: var(--p-zinc-950);
+
+$COLOR_NEUTRAL_50: var(--p-neutral-50);
+$COLOR_NEUTRAL_100: var(--p-neutral-100);
+$COLOR_NEUTRAL_200: var(--p-neutral-200);
+$COLOR_NEUTRAL_300: var(--p-neutral-300);
+$COLOR_NEUTRAL_400: var(--p-neutral-400);
+$COLOR_NEUTRAL_500: var(--p-neutral-500);
+$COLOR_NEUTRAL_600: var(--p-neutral-600);
+$COLOR_NEUTRAL_700: var(--p-neutral-700);
+$COLOR_NEUTRAL_800: var(--p-neutral-800);
+$COLOR_NEUTRAL_900: var(--p-neutral-900);
+$COLOR_NEUTRAL_950: var(--p-neutral-950);
+
+$COLOR_STONE_50: var(--p-stone-50);
+$COLOR_STONE_100: var(--p-stone-100);
+$COLOR_STONE_200: var(--p-stone-200);
+$COLOR_STONE_300: var(--p-stone-300);
+$COLOR_STONE_400: var(--p-stone-400);
+$COLOR_STONE_500: var(--p-stone-500);
+$COLOR_STONE_600: var(--p-stone-600);
+$COLOR_STONE_700: var(--p-stone-700);
+$COLOR_STONE_800: var(--p-stone-800);
+$COLOR_STONE_900: var(--p-stone-900);
+$COLOR_STONE_950: var(--p-stone-950);

src/ModManUi/src/style/_colors_semantic.scss

@@ -0,0 +1,28 @@
+// Semantic colors are colors that may be different depending on the context.
+// They have to be used via CSS variables (which is what the SASS variables access).
+$COLOR_SURFACE_0: var(--color-surface-0);
+$COLOR_SURFACE_50: var(--color-surface-50);
+$COLOR_SURFACE_100: var(--color-surface-100);
+$COLOR_SURFACE_200: var(--color-surface-200);
+$COLOR_SURFACE_300: var(--color-surface-300);
+$COLOR_SURFACE_400: var(--color-surface-400);
+$COLOR_SURFACE_500: var(--color-surface-500);
+$COLOR_SURFACE_600: var(--color-surface-600);
+$COLOR_SURFACE_700: var(--color-surface-700);
+$COLOR_SURFACE_800: var(--color-surface-800);
+$COLOR_SURFACE_900: var(--color-surface-900);
+$COLOR_SURFACE_950: var(--color-surface-950);
+
+$COLOR_PRIMARY: var(--color-primary);
+$COLOR_PRIMARY_CONTRAST: var(--color-primary-contrast);
+$COLOR_PRIMARY_HOVER: var(--color-primary-hover);
+$COLOR_PRIMARY_ACTIVE: var(--color-primary-active);
+
+$COLOR_CONTENT_BACKGROUND: var(--color-content-background);
+$COLOR_CONTENT_HOVER_BACKGROUND: var(--color-content-hover-background);
+$COLOR_CONTENT_BORDER: var(--color-content-border);
+
+$COLOR_TEXT: var(--color-text);
+$COLOR_TEXT_HOVER: var(--color-text-hover);
+$COLOR_TEXT_MUTED: var(--color-text-muted);
+$COLOR_TEXT_HOVER_MUTED: var(--color-text-hover-muted);

src/ModManUi/src/style/_variables.scss

@@ -1 +1,7 @@
+$BORDER_RADIUS_XS: 0.125rem;
+$BORDER_RADIUS_SM: 0.25rem;
+$BORDER_RADIUS_MD: 0.375rem;
+$BORDER_RADIUS_LG: 0.5rem;
+$BORDER_RADIUS_XL: 0.75rem;
+
 $TRANSITION_DURATION: var(--p-transition-duration);

src/ModManUi/src/style/css_vars.scss

@@ -0,0 +1,68 @@
+@use "colors";
+@use "colors_primitive";
+@use "sass:meta";
+@use "sass:string";
+
+:root {
+  @each $name, $value in meta.module-variables(colors_primitive) {
+    --#{string.to-lower-case($name)}: #{$value};
+  }
+}
+
+:root:not(.dark) {
+  --color-surface-0: #ffffff;
+  --color-surface-50: #{colors.$COLOR_SLATE_50};
+  --color-surface-100: #{colors.$COLOR_SLATE_100};
+  --color-surface-200: #{colors.$COLOR_SLATE_200};
+  --color-surface-300: #{colors.$COLOR_SLATE_300};
+  --color-surface-400: #{colors.$COLOR_SLATE_400};
+  --color-surface-500: #{colors.$COLOR_SLATE_500};
+  --color-surface-600: #{colors.$COLOR_SLATE_600};
+  --color-surface-700: #{colors.$COLOR_SLATE_700};
+  --color-surface-800: #{colors.$COLOR_SLATE_800};
+  --color-surface-900: #{colors.$COLOR_SLATE_900};
+  --color-surface-950: #{colors.$COLOR_SLATE_950};
+
+  --color-primary: #{colors.$COLOR_BRAND_500};
+  --color-primary-contrast: #ffffff;
+  --color-primary-hover: var(--color-brand-600);
+  --color-primary-active: var(--color-brand-700);
+
+  --color-content-background: var(--color-surface-0);
+  --color-content-hover-background: var(--color-surface-100);
+  --color-content-border: var(--color-surface-200);
+
+  --color-text: var(--color-surface-700);
+  --color-text-hover: var(--color-surface-800);
+  --color-text-muted: var(--color-surface-500);
+  --color-text-hover-muted: var(--color-surface-600);
+}
+
+:root.dark {
+  --color-surface-0: #ffffff;
+  --color-surface-50: #{colors.$COLOR_ZINC_50};
+  --color-surface-100: #{colors.$COLOR_ZINC_100};
+  --color-surface-200: #{colors.$COLOR_ZINC_200};
+  --color-surface-300: #{colors.$COLOR_ZINC_300};
+  --color-surface-400: #{colors.$COLOR_ZINC_400};
+  --color-surface-500: #{colors.$COLOR_ZINC_500};
+  --color-surface-600: #{colors.$COLOR_ZINC_600};
+  --color-surface-700: #{colors.$COLOR_ZINC_700};
+  --color-surface-800: #{colors.$COLOR_ZINC_800};
+  --color-surface-900: #{colors.$COLOR_ZINC_900};
+  --color-surface-950: #{colors.$COLOR_ZINC_950};
+
+  --color-primary: #{colors.$COLOR_BRAND_400};
+  --color-primary-contrast: var(--color-surface-900);
+  --color-primary-hover: var(--color-brand-300);
+  --color-primary-active: var(--color-brand-200);
+
+  --color-content-background: var(--color-surface-900);
+  --color-content-hover-background: var(--color-surface-800);
+  --color-content-border: var(--color-surface-700);
+
+  --color-text: var(--color-surface-0);
+  --color-text-hover: var(--color-surface-0);
+  --color-text-muted: var(--color-surface-400);
+  --color-text-hover-muted: var(--color-surface-300);
+}

src/ModManUi/src/style/main.scss

@@ -1,4 +1,6 @@
-@use "utils.scss";
+@use "colors";
+@use "css_vars";
+@use "utils.scss";
 
 @import "@fontsource/inter/latin-300.css";
 @import "@fontsource/inter/latin-300-italic.css";
@@ -15,8 +17,8 @@
   line-height: 24px;
   font-weight: 400;
 
-  color: var(--p-text-color);
+  color: colors.$COLOR_TEXT;
-  background-color: var(--p-content-background);
+  background-color: colors.$COLOR_CONTENT_BACKGROUND;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;

src/ModManUi/src/style/utils.scss

@@ -1,3 +1,3 @@
 .icon {
-    height: 1lh;
+  height: 1lh;
 }