From b6ee79a11ee11d14e2bc78f47ac078fa1ff5f9d5 Mon Sep 17 00:00:00 2001 From: Eduardo San Martin Morote Date: Fri, 5 Mar 2021 19:18:23 +0100 Subject: [PATCH 1/2] fix(css): reuse css vars --- src/client/theme-default/components/BuySellAds.vue | 2 +- src/client/theme-default/components/CarbonAds.vue | 2 +- src/client/theme-default/components/HomeHero.vue | 6 +++--- src/client/theme-default/components/NavBar.vue | 2 +- src/client/theme-default/styles/custom-blocks.css | 2 +- src/client/theme-default/styles/vars.css | 11 +++++------ 6 files changed, 12 insertions(+), 13 deletions(-) diff --git a/src/client/theme-default/components/BuySellAds.vue b/src/client/theme-default/components/BuySellAds.vue index 2ddccf3bca41..f42f3ee97f80 100644 --- a/src/client/theme-default/components/BuySellAds.vue +++ b/src/client/theme-default/components/BuySellAds.vue @@ -67,7 +67,7 @@ function load() { .bsa-cpc { border-radius: 6px; - background-color: #f8f8f8; + background-color: var(--c-bg-accent); } .bsa-cpc ::v-deep(a._default_) { diff --git a/src/client/theme-default/components/CarbonAds.vue b/src/client/theme-default/components/CarbonAds.vue index bc4f97b29173..3c60e5e79a28 100644 --- a/src/client/theme-default/components/CarbonAds.vue +++ b/src/client/theme-default/components/CarbonAds.vue @@ -26,7 +26,7 @@ onMounted(() => { margin: 0 auto; max-width: 280px; font-size: 0.75rem; - background-color: rgba(255, 255, 255, 0.8); + background-color: var(--c-bg-accent); min-height: 105.38px; /* avoid layout shift on mobile */ } diff --git a/src/client/theme-default/components/HomeHero.vue b/src/client/theme-default/components/HomeHero.vue index 3e4072b0d8ac..7e12f17c6405 100644 --- a/src/client/theme-default/components/HomeHero.vue +++ b/src/client/theme-default/components/HomeHero.vue @@ -132,20 +132,20 @@ const hasAltAction = computed(() => data.value.altActionLink && data.value.altAc line-height: 44px; font-size: 1rem; font-weight: 500; - color: #ffffff; + color: var(--c-bg); background-color: var(--c-brand); border: 2px solid var(--c-brand); transition: background-color 0.1s ease; } .action.alt :deep(.item) { - background-color: #fff; + background-color: var(--c-bg); color: var(--c-brand); } .action :deep(.item:hover) { text-decoration: none; - color: #ffffff; + color: var(--c-bg); background-color: var(--c-brand-light); } diff --git a/src/client/theme-default/components/NavBar.vue b/src/client/theme-default/components/NavBar.vue index bff24202cd95..099c9c588654 100644 --- a/src/client/theme-default/components/NavBar.vue +++ b/src/client/theme-default/components/NavBar.vue @@ -36,7 +36,7 @@ defineEmit(['toggle']) border-bottom: 1px solid var(--c-divider); padding: .7rem 1.5rem .7rem 4rem; height: var(--header-height); - background-color: #ffffff; + background-color: var(--c-bg); } @media (min-width: 720px) { diff --git a/src/client/theme-default/styles/custom-blocks.css b/src/client/theme-default/styles/custom-blocks.css index b5456d76ebb5..58d65899603b 100644 --- a/src/client/theme-default/styles/custom-blocks.css +++ b/src/client/theme-default/styles/custom-blocks.css @@ -9,7 +9,7 @@ .custom-block.tip { background-color: #f3f5f7; - border-color: #42b983; + border-color: var(--c-brand); } .custom-block.warning { diff --git a/src/client/theme-default/styles/vars.css b/src/client/theme-default/styles/vars.css index 7ee3882aad6b..68c6d3e42203 100644 --- a/src/client/theme-default/styles/vars.css +++ b/src/client/theme-default/styles/vars.css @@ -1,15 +1,15 @@ /** Base Styles */ :root { - /** * Colors * --------------------------------------------------------------------- */ --c-white: #ffffff; + --c-white-dark: #f8f8f8; --c-black: #000000; - --c-divider-light: rgba(60, 60, 67, .12); - --c-divider-dark: rgba(84, 84, 88, .48); + --c-divider-light: rgba(60, 60, 67, 0.12); + --c-divider-dark: rgba(84, 84, 88, 0.48); --c-text-light-1: #2c3e50; --c-text-light-2: #476582; @@ -54,7 +54,6 @@ /** Fallback Styles */ :root { - --c-divider: var(--c-divider-light); --c-text: var(--c-text-light-1); @@ -62,11 +61,11 @@ --c-text-lighter: var(--c-text-light-3); --c-bg: var(--c-white); + --c-bg-accent: var(--c-white-dark); --code-line-height: 24px; --code-font-family: var(--font-family-mono); --code-font-size: 14px; - --code-inline-bg-color: rgba(27, 31, 35, .05); + --code-inline-bg-color: rgba(27, 31, 35, 0.05); --code-bg-color: #282c34; - } From 517f8c6103b9f0d2559e35c60f2834aae36daa1f Mon Sep 17 00:00:00 2001 From: Eduardo San Martin Morote Date: Sat, 6 Mar 2021 00:41:10 +0100 Subject: [PATCH 2/2] refactor: use inherit --- src/client/theme-default/components/NavBar.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/client/theme-default/components/NavBar.vue b/src/client/theme-default/components/NavBar.vue index 099c9c588654..4687352af49a 100644 --- a/src/client/theme-default/components/NavBar.vue +++ b/src/client/theme-default/components/NavBar.vue @@ -36,7 +36,7 @@ defineEmit(['toggle']) border-bottom: 1px solid var(--c-divider); padding: .7rem 1.5rem .7rem 4rem; height: var(--header-height); - background-color: var(--c-bg); + background-color: inherit; } @media (min-width: 720px) {