zone/OpenAssetTools
2
0
Fork 0
mirror of https://github.com/Laupetin/OpenAssetTools.git synced 2025-11-17 18:52:06 +00:00
Code Activity

chore: use sass vars for colors

Browse Source
This commit is contained in:
Jan Laupetin
2025-10-28 00:47:09 +01:00
parent 27ecb4cc57
commit e8d0a09c37
9 changed files with 411 additions and 319 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/ModManUi/src/PrimeVue.ts
View File

@@ -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");
}

4
src/ModManUi/src/components/ModManHeader.vue
View File

@@ -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 {

314
src/ModManUi/src/style/_colors.scss
View File

@@ -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";

278
src/ModManUi/src/style/_colors_primitive.scss Normal file
View File

@@ -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);

28
src/ModManUi/src/style/_colors_semantic.scss Normal file
View File

@@ -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);

6
src/ModManUi/src/style/_variables.scss
View File

@@ -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);

68
src/ModManUi/src/style/css_vars.scss Normal file
View File

@@ -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);
}

8
src/ModManUi/src/style/main.scss
View File

@@ -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;

4
src/ModManUi/src/style/utils.scss
View File

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