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: make sass variables kebab-case

Browse Source
This commit is contained in:
Jan Laupetin
2025-10-28 19:49:32 +01:00
parent b8ca102131
commit f7bc97f4d1
7 changed files with 313 additions and 313 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

508
src/ModManUi/src/style/_colors_primitive.scss
View File

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

46
src/ModManUi/src/style/_colors_semantic.scss
View File

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

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

@@ -1,7 +1,7 @@
$BORDER_RADIUS_XS: 0.125rem; $border-radius-xs: 0.125rem;
$BORDER_RADIUS_SM: 0.25rem; $border-radius-sm: 0.25rem;
$BORDER_RADIUS_MD: 0.375rem; $border-radius-md: 0.375rem;
$BORDER_RADIUS_LG: 0.5rem; $border-radius-lg: 0.5rem;
$BORDER_RADIUS_XL: 0.75rem; $border-radius-xl: 0.75rem;
$TRANSITION_DURATION: var(--p-transition-duration); $transition-duration: 0.2s;

48
src/ModManUi/src/style/css_vars.scss
View File

@@ -11,19 +11,19 @@
:root:not(.dark) { :root:not(.dark) {
--color-surface-0: #ffffff; --color-surface-0: #ffffff;
--color-surface-50: #{colors.$COLOR_SLATE_50}; --color-surface-50: #{colors.$color-slate-50};
--color-surface-100: #{colors.$COLOR_SLATE_100}; --color-surface-100: #{colors.$color-slate-100};
--color-surface-200: #{colors.$COLOR_SLATE_200}; --color-surface-200: #{colors.$color-slate-200};
--color-surface-300: #{colors.$COLOR_SLATE_300}; --color-surface-300: #{colors.$color-slate-300};
--color-surface-400: #{colors.$COLOR_SLATE_400}; --color-surface-400: #{colors.$color-slate-400};
--color-surface-500: #{colors.$COLOR_SLATE_500}; --color-surface-500: #{colors.$color-slate-500};
--color-surface-600: #{colors.$COLOR_SLATE_600}; --color-surface-600: #{colors.$color-slate-600};
--color-surface-700: #{colors.$COLOR_SLATE_700}; --color-surface-700: #{colors.$color-slate-700};
--color-surface-800: #{colors.$COLOR_SLATE_800}; --color-surface-800: #{colors.$color-slate-800};
--color-surface-900: #{colors.$COLOR_SLATE_900}; --color-surface-900: #{colors.$color-slate-900};
--color-surface-950: #{colors.$COLOR_SLATE_950}; --color-surface-950: #{colors.$color-slate-950};
--color-primary: #{colors.$COLOR_BRAND_500}; --color-primary: #{colors.$color-brand-500};
--color-primary-contrast: #ffffff; --color-primary-contrast: #ffffff;
--color-primary-hover: var(--color-brand-600); --color-primary-hover: var(--color-brand-600);
--color-primary-active: var(--color-brand-700); --color-primary-active: var(--color-brand-700);
@@ -40,19 +40,19 @@
:root.dark { :root.dark {
--color-surface-0: #ffffff; --color-surface-0: #ffffff;
--color-surface-50: #{colors.$COLOR_ZINC_50}; --color-surface-50: #{colors.$color-zinc-50};
--color-surface-100: #{colors.$COLOR_ZINC_100}; --color-surface-100: #{colors.$color-zinc-100};
--color-surface-200: #{colors.$COLOR_ZINC_200}; --color-surface-200: #{colors.$color-zinc-200};
--color-surface-300: #{colors.$COLOR_ZINC_300}; --color-surface-300: #{colors.$color-zinc-300};
--color-surface-400: #{colors.$COLOR_ZINC_400}; --color-surface-400: #{colors.$color-zinc-400};
--color-surface-500: #{colors.$COLOR_ZINC_500}; --color-surface-500: #{colors.$color-zinc-500};
--color-surface-600: #{colors.$COLOR_ZINC_600}; --color-surface-600: #{colors.$color-zinc-600};
--color-surface-700: #{colors.$COLOR_ZINC_700}; --color-surface-700: #{colors.$color-zinc-700};
--color-surface-800: #{colors.$COLOR_ZINC_800}; --color-surface-800: #{colors.$color-zinc-800};
--color-surface-900: #{colors.$COLOR_ZINC_900}; --color-surface-900: #{colors.$color-zinc-900};
--color-surface-950: #{colors.$COLOR_ZINC_950}; --color-surface-950: #{colors.$color-zinc-950};
--color-primary: #{colors.$COLOR_BRAND_400}; --color-primary: #{colors.$color-brand-400};
--color-primary-contrast: var(--color-surface-900); --color-primary-contrast: var(--color-surface-900);
--color-primary-hover: var(--color-brand-300); --color-primary-hover: var(--color-brand-300);
--color-primary-active: var(--color-brand-200); --color-primary-active: var(--color-brand-200);

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

@@ -17,8 +17,8 @@
line-height: 24px; line-height: 24px;
font-weight: 400; font-weight: 400;
color: colors.$COLOR_TEXT; color: colors.$color-text;
background-color: colors.$COLOR_CONTENT_BACKGROUND; background-color: colors.$color-content-background;
font-synthesis: none; font-synthesis: none;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;

4
src/ModManUi/src/view/inspect_details/components/InspectPreview.vue
View File

@@ -17,7 +17,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: colors.$COLOR_CONTENT_HOVER_BACKGROUND; background-color: colors.$color-content-hover-background;
border-radius: variables.$BORDER_RADIUS_MD; border-radius: variables.$border-radius-md;
} }
</style> </style>