diff --git a/src/features/colorScheme/components/ColorSchemeButton.vue b/src/features/colorScheme/components/ColorSchemeButton.vue index 7a25065..7f4e47e 100644 --- a/src/features/colorScheme/components/ColorSchemeButton.vue +++ b/src/features/colorScheme/components/ColorSchemeButton.vue @@ -52,7 +52,7 @@ const getTooltipTranslation = function (colorScheme) { \ No newline at end of file diff --git a/src/features/footer/components/Footer.vue b/src/features/footer/components/Footer.vue index 31fc5e2..d9ff4c4 100644 --- a/src/features/footer/components/Footer.vue +++ b/src/features/footer/components/Footer.vue @@ -40,7 +40,8 @@ const copyrightPeriod = display: flex; justify-content: center; padding: var(--padding-y); - background-color: var(--light-d-1); margin-top: var(--padding-y); + background-color: var(--light-bg); + border-top: 1px solid var(--border); } \ No newline at end of file diff --git a/src/features/i18n/components/LanguageSwitchButton.vue b/src/features/i18n/components/LanguageSwitchButton.vue index 7e30294..25386e2 100644 --- a/src/features/i18n/components/LanguageSwitchButton.vue +++ b/src/features/i18n/components/LanguageSwitchButton.vue @@ -92,7 +92,7 @@ const open = function () { align-items: center; gap: 6px; background: none; - border: 1px solid var(--light-d-3); + border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px; cursor: pointer; @@ -100,7 +100,7 @@ const open = function () { } .language-button:hover { - background-color: var(--light-d-1); + background-color: var(--light-hover); } .chevron { @@ -118,7 +118,7 @@ const open = function () { right: 0; top: calc(100% + 6px); background-color: var(--light-bg); - border: 1px solid var(--light-d-3); + border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); list-style: none; @@ -138,7 +138,7 @@ const open = function () { } .language-dropdown li:hover { - background-color: var(--light-d-1); + background-color: var(--light-hover); } .language-dropdown li.active { diff --git a/src/features/nav/components/Navbar.vue b/src/features/nav/components/Navbar.vue index 409f71f..508fb18 100644 --- a/src/features/nav/components/Navbar.vue +++ b/src/features/nav/components/Navbar.vue @@ -55,7 +55,7 @@ import logo from '@/assets/logo.svg'; .global-nav .right-links a { text-decoration: none; - color: #000; + color: var(--dark); } .global-nav .right-links a:hover{ diff --git a/src/features/search/components/Searchbar.vue b/src/features/search/components/Searchbar.vue index ac0f9df..9e3e3de 100644 --- a/src/features/search/components/Searchbar.vue +++ b/src/features/search/components/Searchbar.vue @@ -57,8 +57,8 @@ const submitSearch = function () { --padding-left: calc(var(--content-height) + var(--padding)); display: flex; align-items: center; - border: 1.5px solid var(--light-d-3); - box-shadow: 0 0px 32px rgba(69, 98, 190, 0.25); + border: 1.5px solid var(--border); + box-shadow: 0 0px 32px var(--blue-box-shadow); border-radius: calc(var(--content-height) * 0.5 + var(--submit-button-padding-y) + var(--padding)); padding: var(--padding); padding-left: var(--padding-left); diff --git a/src/features/search/views/SearchResultsView.vue b/src/features/search/views/SearchResultsView.vue index d005576..e87c644 100644 --- a/src/features/search/views/SearchResultsView.vue +++ b/src/features/search/views/SearchResultsView.vue @@ -68,16 +68,16 @@ searchQueryModel.value = props.searchQuery; .search-results-error-message { padding: var(--error-message-padding); font-size: 18px; - box-shadow: 0px 0px 42px #cdcdcdb3; + box-shadow: 0px 0px 42px var(--gray-box-shadow); border-radius: 28px; text-align: center; - background-color: #f7f7f7; + background-color: var(--light-bg); animation: fade-in 0.8s ease-out; height: var(--error-message-height); display: flex; justify-content: center; flex-direction: column; - outline: 1px solid var(--light-d-2); + outline: 1px solid var(--border); } @media (max-width: 48rem) { diff --git a/src/styles/variables/colors.css b/src/styles/variables/colors.css index ab7ed28..e79a738 100644 --- a/src/styles/variables/colors.css +++ b/src/styles/variables/colors.css @@ -75,6 +75,13 @@ limitations under the License. --dark-bg: var(--black-l-2); --light-bg: var(--white); + + --border: var(--white-d-3); + + --gray-box-shadow: oklch(0.8 0.0001 271 / 0.7); + --blue-box-shadow: oklch(0.52 0.15 268 / 0.25); + + --light-hover: var(--light-d-2); } @media (prefers-color-scheme: dark) { @@ -88,9 +95,9 @@ limitations under the License. --dark-l-2: var(--white-d-2); --dark-l-1: var(--white-d-1); --dark: var(--white); - + --light: var(--black); - --light-d-1: var(--black-l-1); + --light-d-1: oklch(0.10 0 0); --light-d-2: var(--black-l-2); --light-d-3: var(--black-l-3); --light-d-4: var(--black-l-4); @@ -98,9 +105,15 @@ limitations under the License. --light-d-6: var(--black-l-6); --light-d-7: var(--black-l-7); --light-d-8: var(--black-l-8); - + --dark-bg: var(--white); - --light-bg: var(--black); + --light-bg: oklch(0.18 0 0); + + --border: var(--black-l-6); + + --gray-box-shadow: oklch(0.25 0.0001 271 / 0.7); + + --light-hover: var(--light-d-5); } } @@ -114,9 +127,9 @@ limitations under the License. --dark-l-2: var(--white-d-2); --dark-l-1: var(--white-d-1); --dark: var(--white); - + --light: var(--black); - --light-d-1: var(--black-l-1); + --light-d-1: oklch(0.10 0 0); --light-d-2: var(--black-l-2); --light-d-3: var(--black-l-3); --light-d-4: var(--black-l-4); @@ -124,7 +137,13 @@ limitations under the License. --light-d-6: var(--black-l-6); --light-d-7: var(--black-l-7); --light-d-8: var(--black-l-8); - + --dark-bg: var(--white); - --light-bg: var(--black); + --light-bg: oklch(0.18 0 0); + + --border: var(--black-l-6); + + --gray-box-shadow: oklch(0.25 0.0001 271 / 0.7); + + --light-hover: var(--light-d-5); } \ No newline at end of file