From c88133a9a3061f84472b173ab3c29257dceb556f Mon Sep 17 00:00:00 2001 From: Alexis <35.alexis.pele@gmail.com> Date: Fri, 20 Jun 2025 20:06:07 +0200 Subject: [PATCH] Moved some variables to root --- src/assets/scss/_buttons.scss | 18 +++++++++--------- src/assets/scss/_card.scss | 8 ++++---- src/assets/scss/_forms.scss | 2 +- src/assets/scss/_leaflet.scss | 2 +- src/assets/scss/radix/_dialog.scss | 8 ++++---- src/assets/scss/radix/_toast.scss | 10 +++++----- src/assets/scss/theme.scss | 8 +++++++- .../maps/MapOverlayBreadcrumbs.astro | 4 ++-- src/components/maps/MarkerContent.astro | 4 ++-- src/components/maps/overlay/MarkerCreator.vue | 12 ++++++------ .../maps/overlay/SearchMapSwitch.vue | 4 ++-- src/components/maps/overlay/SearchMarkers.vue | 6 +++--- .../maps/overlay/SearchMarkersTags.vue | 10 +++++----- 13 files changed, 51 insertions(+), 45 deletions(-) diff --git a/src/assets/scss/_buttons.scss b/src/assets/scss/_buttons.scss index c2bcc5bc..c4c3f085 100644 --- a/src/assets/scss/_buttons.scss +++ b/src/assets/scss/_buttons.scss @@ -22,7 +22,7 @@ &:hover, &:focus-visible { - color: var(--white); + color: var(--background); background-color: var(--blue-500); } } @@ -39,7 +39,7 @@ &:hover, &:focus-visible { - color: var(--white); + color: var(--background); background-color: var(--blue-500); } } @@ -51,7 +51,7 @@ &:hover, &:focus-visible { - color: var(--white); + color: var(--background); background-color: var(--red-500); } } @@ -76,7 +76,7 @@ } &.btn-shadow { - box-shadow: color-mix(in srgb, var(--black) 10%, transparent) 0 .2rem .3rem; + box-shadow: var(--shadow); } } @@ -85,9 +85,9 @@ place-items: center; height: 45px; aspect-ratio: 1; - background-color: var(--white); - border: 1px solid var(--slate-400); - box-shadow: color-mix(in srgb, var(--black) 10%, transparent) 0px 4px 12px; + background-color: var(--background); + border: 1px solid var(--border); + box-shadow: var(--shadow); border-radius: 100vmax; pointer-events: all; cursor: pointer; @@ -114,12 +114,12 @@ } &.active { - color: var(--white); + color: var(--background); background-color: var(--blue-500); border-color: var(--blue-700); svg { - fill: var(--white); + fill: var(--background); } } } \ No newline at end of file diff --git a/src/assets/scss/_card.scss b/src/assets/scss/_card.scss index f58ced75..4fdcbbf7 100644 --- a/src/assets/scss/_card.scss +++ b/src/assets/scss/_card.scss @@ -2,13 +2,13 @@ padding-block: 0.75rem; padding-inline: .75rem; border-radius: 8px; - background-color: var(--white); - border: 1px solid var(--slate-100); - box-shadow: color-mix(in srgb, var(--black) 10%, transparent) 0px 4px 12px; + background-color: var(--background); + border: 1px solid var(--border); + box-shadow: var(--shadow); min-width: 15rem; .card-arrow { - fill: var(--white); + fill: var(--background); } &.p-sm { diff --git a/src/assets/scss/_forms.scss b/src/assets/scss/_forms.scss index 485875a1..b7845e55 100644 --- a/src/assets/scss/_forms.scss +++ b/src/assets/scss/_forms.scss @@ -16,7 +16,7 @@ padding: .4rem .5rem; border: 1px solid var(--slate-300); font-size: .8em; - border-radius: .2rem; + border-radius: var(--border-radius); transition-property: box-shadow; transition-duration: .2s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); diff --git a/src/assets/scss/_leaflet.scss b/src/assets/scss/_leaflet.scss index 100f7453..40a11a4e 100644 --- a/src/assets/scss/_leaflet.scss +++ b/src/assets/scss/_leaflet.scss @@ -10,7 +10,7 @@ .leaflet-map-pane { .leaflet-popup-pane { .leaflet-popup-content-wrapper { - border-radius: .25rem; + border-radius: var(--border-radius); overflow: clip; .leaflet-popup-content { diff --git a/src/assets/scss/radix/_dialog.scss b/src/assets/scss/radix/_dialog.scss index dd7f68da..025898be 100644 --- a/src/assets/scss/radix/_dialog.scss +++ b/src/assets/scss/radix/_dialog.scss @@ -19,10 +19,10 @@ padding: 25px; display: grid; grid-template-rows: auto 1fr; - border-radius: 8px; - background-color: var(--white); - border: 1px solid var(--slate-100); - box-shadow: color-mix(in srgb, var(--black) 10%, transparent) 0px 4px 12px; + border-radius: var(--border-radius); + background-color: var(--background); + border: 1px solid var(--border); + box-shadow: var(--shadow); animation: show-content 150ms cubic-bezier(0.16, 1, 0.3, 1); &:focus { diff --git a/src/assets/scss/radix/_toast.scss b/src/assets/scss/radix/_toast.scss index 0e46aaf9..1da154ce 100644 --- a/src/assets/scss/radix/_toast.scss +++ b/src/assets/scss/radix/_toast.scss @@ -23,16 +23,16 @@ grid-template-columns: auto max-content; column-gap: 15px; align-items: center; - color: var(--slate-800); - border: 1px solid var(--slate-400); - background-color: var(--white); - border-radius: 6px; + color: var(--foreground); + border: 1px solid var(--border); + background-color: var(--background); + border-radius: var(--border-radius); box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px; &.toast-success { color: var(--green-700); border: 1px solid var(--green-700); - background-color: color-mix(in srgb, var(--green-500) 17.5%, var(--white)); + background-color: color-mix(in srgb, var(--green-500) 17.5%, var(--background)); .toast-icon svg { fill: var(--green-700); diff --git a/src/assets/scss/theme.scss b/src/assets/scss/theme.scss index d047e7a2..b5da0f1a 100644 --- a/src/assets/scss/theme.scss +++ b/src/assets/scss/theme.scss @@ -37,11 +37,17 @@ --orange-700: #c2410c; --purple-500: #8b5cf6; --purple-700: #6d28d9; + + --foreground: var(--black); + --background: var(--white); + --border: var(--slate-400); + --border-radius: .25rem; + --shadow: color-mix(in srgb, var(--foreground) 10%, transparent) 0px 4px 12px; } html { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; - color: var(--slate-900); + color: var(--foreground); } a[href^='http'] { diff --git a/src/components/maps/MapOverlayBreadcrumbs.astro b/src/components/maps/MapOverlayBreadcrumbs.astro index a2751d22..7349c9b3 100644 --- a/src/components/maps/MapOverlayBreadcrumbs.astro +++ b/src/components/maps/MapOverlayBreadcrumbs.astro @@ -48,8 +48,8 @@ menu { margin-top: .5rem; padding-block: .25rem; padding-inline: .8rem; - border: 1px solid var(--slate-400); - background: var(--white); + border: 1px solid var(--border); + background: var(--background); border-radius: 100vmax; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; pointer-events: all; diff --git a/src/components/maps/MarkerContent.astro b/src/components/maps/MarkerContent.astro index cb6b3e28..fe497db0 100644 --- a/src/components/maps/MarkerContent.astro +++ b/src/components/maps/MarkerContent.astro @@ -101,7 +101,7 @@ const seeMapText = t('maps.go-to-map', lang) font-weight: 600; bottom: .5rem; right: 1rem; - color: var(--white); + color: var(--background); z-index: 20; opacity: .6; transition-property: opacity; @@ -110,7 +110,7 @@ const seeMapText = t('maps.go-to-map', lang) a { padding-right: 0; - color: var(--white); + color: var(--background); text-decoration: underline; text-underline-offset: .15rem; diff --git a/src/components/maps/overlay/MarkerCreator.vue b/src/components/maps/overlay/MarkerCreator.vue index 9130baac..bdb355d4 100644 --- a/src/components/maps/overlay/MarkerCreator.vue +++ b/src/components/maps/overlay/MarkerCreator.vue @@ -275,10 +275,10 @@ menu { padding-block: .25rem; top: calc(var(--mouse-y) - .5rem); left: calc(var(--mouse-x) + .75rem); - background-color: var(--white); - border: 1px solid var(--slate-400); + background-color: var(--background); + border: 1px solid var(--border); border-radius: .3rem; - box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 12px; + box-shadow: var(--shadow); z-index: 1000; transition-property: top, left; transition-duration: .16s; @@ -313,10 +313,10 @@ dialog { max-width: calc(100% - 6rem); padding: 1.5rem 2rem; z-index: 9999; - background-color: var(--white); - border: 1px solid var(--slate-400); + background-color: var(--background); + border: 1px solid var(--border); border-radius: .75rem; - box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 12px; + box-shadow: var(--shadow); overflow: visible; transform: translateY(1rem); transition: visibility 0s ease-out .3s, opacity .3s ease-out, transform .3s ease-out; diff --git a/src/components/maps/overlay/SearchMapSwitch.vue b/src/components/maps/overlay/SearchMapSwitch.vue index 894c8377..104dc676 100644 --- a/src/components/maps/overlay/SearchMapSwitch.vue +++ b/src/components/maps/overlay/SearchMapSwitch.vue @@ -251,7 +251,7 @@ const menus: Menu[] = [ img { display: block; border-radius: .3rem; - border: .1rem solid var(--white); + border: .1rem solid var(--background); outline: .15rem solid transparent; } @@ -264,7 +264,7 @@ const menus: Menu[] = [ pointer-events: none; .fill { fill: var(--orange-500); } - .stroke { fill: var(--white); } + .stroke { fill: var(--background); } } } diff --git a/src/components/maps/overlay/SearchMarkers.vue b/src/components/maps/overlay/SearchMarkers.vue index 3c724abc..2f649dfa 100644 --- a/src/components/maps/overlay/SearchMarkers.vue +++ b/src/components/maps/overlay/SearchMarkers.vue @@ -308,10 +308,10 @@ function resetAllFields(actionAfter?: "focusAfter") { margin-left: calc(45px + .5rem); padding: .5rem 1.2rem; width: calc(100% - 3rem); - background: var(--white); - border: 1px solid var(--slate-400); + background: var(--background); + border: 1px solid var(--border); border-radius: 25px; - box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; + box-shadow: var(--shadow); pointer-events: all; @media screen and (width >= 900px) { diff --git a/src/components/maps/overlay/SearchMarkersTags.vue b/src/components/maps/overlay/SearchMarkersTags.vue index d79654dc..d8b2f70c 100644 --- a/src/components/maps/overlay/SearchMarkersTags.vue +++ b/src/components/maps/overlay/SearchMarkersTags.vue @@ -125,10 +125,10 @@ function emitCategorySwitch(newCategory: MapMarkerGroup) { padding-inline: .8rem; font-weight: 600; font-size: .85em; - background: var(--white); - border: 1px solid var(--slate-400); + background: var(--background); + border: 1px solid var(--border); border-radius: 100vmax; - box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; + box-shadow: var(--shadow); white-space: nowrap; pointer-events: all; cursor: pointer; @@ -154,12 +154,12 @@ function emitCategorySwitch(newCategory: MapMarkerGroup) { @each $c in $colors { &.#{$c} { &.active { - color: var(--white); + color: var(--background); background-color: var(--#{$c}-500); border-color: var(--#{$c}-700); .icon { - fill: var(--white); + fill: var(--background); } }