From e8d0a09c37a32368eb6f379d54db808ba004ab0e Mon Sep 17 00:00:00 2001 From: Jan Laupetin Date: Tue, 28 Oct 2025 00:47:09 +0100 Subject: [PATCH] chore: use sass vars for colors --- src/ModManUi/src/PrimeVue.ts | 20 +- src/ModManUi/src/components/ModManHeader.vue | 4 +- src/ModManUi/src/style/_colors.scss | 314 +----------------- src/ModManUi/src/style/_colors_primitive.scss | 278 ++++++++++++++++ src/ModManUi/src/style/_colors_semantic.scss | 28 ++ src/ModManUi/src/style/_variables.scss | 6 + src/ModManUi/src/style/css_vars.scss | 68 ++++ src/ModManUi/src/style/main.scss | 8 +- src/ModManUi/src/style/utils.scss | 4 +- 9 files changed, 411 insertions(+), 319 deletions(-) create mode 100644 src/ModManUi/src/style/_colors_primitive.scss create mode 100644 src/ModManUi/src/style/_colors_semantic.scss create mode 100644 src/ModManUi/src/style/css_vars.scss diff --git a/src/ModManUi/src/PrimeVue.ts b/src/ModManUi/src/PrimeVue.ts index 9eb4aeb4..0afa4311 100644 --- a/src/ModManUi/src/PrimeVue.ts +++ b/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"); } diff --git a/src/ModManUi/src/components/ModManHeader.vue b/src/ModManUi/src/components/ModManHeader.vue index e5419f5d..07e8f6cd 100644 --- a/src/ModManUi/src/components/ModManHeader.vue +++ b/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 { diff --git a/src/ModManUi/src/style/_colors.scss b/src/ModManUi/src/style/_colors.scss index 687d2dd2..a8bb3154 100644 --- a/src/ModManUi/src/style/_colors.scss +++ b/src/ModManUi/src/style/_colors.scss @@ -1,311 +1,5 @@ -// Primitive colors -$EMERALD-50: var(--p-emerald-50); -$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); +@use "colors_primitive"; +@forward "colors_primitive"; -$GREEN-50: var(--p-green-50); -$GREEN-100: var(--p-green-100); -$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); +@use "colors_semantic"; +@forward "colors_semantic"; diff --git a/src/ModManUi/src/style/_colors_primitive.scss b/src/ModManUi/src/style/_colors_primitive.scss new file mode 100644 index 00000000..f9c661bf --- /dev/null +++ b/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); diff --git a/src/ModManUi/src/style/_colors_semantic.scss b/src/ModManUi/src/style/_colors_semantic.scss new file mode 100644 index 00000000..55d69da0 --- /dev/null +++ b/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); diff --git a/src/ModManUi/src/style/_variables.scss b/src/ModManUi/src/style/_variables.scss index 70c003a2..003a37b0 100644 --- a/src/ModManUi/src/style/_variables.scss +++ b/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); diff --git a/src/ModManUi/src/style/css_vars.scss b/src/ModManUi/src/style/css_vars.scss new file mode 100644 index 00000000..2183188a --- /dev/null +++ b/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); +} diff --git a/src/ModManUi/src/style/main.scss b/src/ModManUi/src/style/main.scss index 05162d79..d70e84c2 100644 --- a/src/ModManUi/src/style/main.scss +++ b/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); - background-color: var(--p-content-background); + color: colors.$COLOR_TEXT; + background-color: colors.$COLOR_CONTENT_BACKGROUND; font-synthesis: none; text-rendering: optimizeLegibility; diff --git a/src/ModManUi/src/style/utils.scss b/src/ModManUi/src/style/utils.scss index 7de368ca..e7d7bfd5 100644 --- a/src/ModManUi/src/style/utils.scss +++ b/src/ModManUi/src/style/utils.scss @@ -1,3 +1,3 @@ .icon { - height: 1lh; -} \ No newline at end of file + height: 1lh; +}