From f7bc97f4d1f461190bb26ee352bba2d0dca33b7d Mon Sep 17 00:00:00 2001 From: Jan Laupetin Date: Tue, 28 Oct 2025 19:49:32 +0100 Subject: [PATCH] chore: make sass variables kebab-case --- src/ModManUi/src/components/ModManHeader.vue | 4 +- src/ModManUi/src/style/_colors_primitive.scss | 508 +++++++++--------- src/ModManUi/src/style/_colors_semantic.scss | 46 +- src/ModManUi/src/style/_variables.scss | 12 +- src/ModManUi/src/style/css_vars.scss | 48 +- src/ModManUi/src/style/main.scss | 4 +- .../components/InspectPreview.vue | 4 +- 7 files changed, 313 insertions(+), 313 deletions(-) diff --git a/src/ModManUi/src/components/ModManHeader.vue b/src/ModManUi/src/components/ModManHeader.vue index 07e8f6cd..95966c4b 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.$COLOR_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.$COLOR_CONTENT_BORDER; + border-bottom: 1px solid colors.$color-content-border; } .header-section { diff --git a/src/ModManUi/src/style/_colors_primitive.scss b/src/ModManUi/src/style/_colors_primitive.scss index f9c661bf..e5ae558b 100644 --- a/src/ModManUi/src/style/_colors_primitive.scss +++ b/src/ModManUi/src/style/_colors_primitive.scss @@ -1,278 +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; +$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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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); +$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 index 55d69da0..d474a295 100644 --- a/src/ModManUi/src/style/_colors_semantic.scss +++ b/src/ModManUi/src/style/_colors_semantic.scss @@ -1,28 +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-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-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-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); +$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 003a37b0..dede5bb8 100644 --- a/src/ModManUi/src/style/_variables.scss +++ b/src/ModManUi/src/style/_variables.scss @@ -1,7 +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; +$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); +$transition-duration: 0.2s; diff --git a/src/ModManUi/src/style/css_vars.scss b/src/ModManUi/src/style/css_vars.scss index 2183188a..83223e26 100644 --- a/src/ModManUi/src/style/css_vars.scss +++ b/src/ModManUi/src/style/css_vars.scss @@ -11,19 +11,19 @@ :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-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: #{colors.$color-brand-500}; --color-primary-contrast: #ffffff; --color-primary-hover: var(--color-brand-600); --color-primary-active: var(--color-brand-700); @@ -40,19 +40,19 @@ :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-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: #{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); diff --git a/src/ModManUi/src/style/main.scss b/src/ModManUi/src/style/main.scss index d70e84c2..be5bc42a 100644 --- a/src/ModManUi/src/style/main.scss +++ b/src/ModManUi/src/style/main.scss @@ -17,8 +17,8 @@ line-height: 24px; font-weight: 400; - color: colors.$COLOR_TEXT; - background-color: colors.$COLOR_CONTENT_BACKGROUND; + color: colors.$color-text; + background-color: colors.$color-content-background; font-synthesis: none; text-rendering: optimizeLegibility; diff --git a/src/ModManUi/src/view/inspect_details/components/InspectPreview.vue b/src/ModManUi/src/view/inspect_details/components/InspectPreview.vue index ef6a6b9f..d76e14da 100644 --- a/src/ModManUi/src/view/inspect_details/components/InspectPreview.vue +++ b/src/ModManUi/src/view/inspect_details/components/InspectPreview.vue @@ -17,7 +17,7 @@ justify-content: center; align-items: center; - background-color: colors.$COLOR_CONTENT_HOVER_BACKGROUND; - border-radius: variables.$BORDER_RADIUS_MD; + background-color: colors.$color-content-hover-background; + border-radius: variables.$border-radius-md; }