fix(css): reuse css vars (#256)

src/client/theme-default/components/BuySellAds.vue

@@ -69,7 +69,7 @@ function load() {
 
 .bsa-cpc {
   border-radius: 6px;
-  background-color: #f8f8f8;
+  background-color: var(--c-bg-accent);
 }
 
 .bsa-cpc ::v-deep(a._default_) {

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 */
 }
 

src/client/theme-default/components/HomeHero.vue

@@ -140,20 +140,20 @@ const hasAltAction = computed(
   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);
 }
 

src/client/theme-default/components/NavBar.vue

@@ -36,7 +36,7 @@ defineEmit(['toggle'])
   border-bottom: 1px solid var(--c-divider);
   padding: 0.7rem 1.5rem 0.7rem 4rem;
   height: var(--header-height);
-  background-color: #ffffff;
+  background-color: inherit;
 }
 
 @media (min-width: 720px) {

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 {

src/client/theme-default/styles/vars.css

@@ -5,6 +5,7 @@
    * --------------------------------------------------------------------- */
 
   --c-white: #ffffff;
+  --c-white-dark: #f8f8f8;
   --c-black: #000000;
 
   --c-divider-light: rgba(60, 60, 67, 0.12);
@@ -63,6 +64,7 @@
   --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);