Remove alpha channel from bg-light

components/Ecosystem/Ecosystem.module.css

@@ -1,12 +1,4 @@
 .Ecosystem {
     --ecosystem-width: calc(var(--sidebar-width) - 88px);
-    --ecosystem-color: var(--bg-light, #f5f8fb);
-}
-
-.Ecosystem [class^="_toggle__activeproject"] {
-    background: none;
-}
-
-.Ecosystem [class^="_toggle__control"] {
-    background: none;
+    --ecosystem-color: var(--bg-light);
 }

components/MainPage/MainPage.jsx

@@ -4,14 +4,16 @@ import Image from 'next/image'
 import ManualPreview from '../ManualPreview/ManualPreview'
 
 import mainPageLogo from './MainPageLogo.svg'
-import styles from './MainPage.module.css'
 import { Ecosystem } from '../Ecosystem/Ecosystem'
 import { MainPageToolbar } from '../Toolbar/MainPageToolbar'
+import { getCSSVarsColors } from '../../utils/getCSSVarsColors'
+
+import styles from './MainPage.module.css'
 
 export default function MainPage({ pageTitle, manualsPreview }) {
     return (
         <>
-            <main className={styles.mainPage}>
+            <main className={styles.mainPage} style={{ ...getCSSVarsColors('#2a5099') }}>
                 <h1 className={styles.mainPageTitle}>
                     <div className={styles.mainPageLogo}>
                         <Image src={mainPageLogo} fill alt="" />

components/ManualPreview/ManualPreview.module.css

@@ -78,6 +78,7 @@
 }
 
 .manualSubtitle {
+    position: relative;
     font-size: 3vw;
     line-height: 1.25;
     font-weight: 300;
@@ -109,9 +110,9 @@
     font-weight: 300;
     bottom: 10px;
     right: 12px;
-    opacity: .6;
     padding: 2px 4px 2px 4px;
     border-radius: 100px;
+    background-color: var(--bg-light);
 }
 
 @media screen and (min-width: 768px) {

components/TableOfContents/TableOfContents.module.css

@@ -1,16 +1,17 @@
 .tableOfContents {
+    position: fixed;
     text-align: left;
     padding: 8px;
     display: none;
     width: 100%;
     height: 100vh;
-    position: fixed;
     top: 0;
     left: 0;
     margin: 0;
     z-index: 12;
     overflow: auto;
     scrollbar-width: none;
+    background-color: var(--bg-light);
 }
 
 .linkMainpage {
@@ -236,7 +237,6 @@ html:has(.open) {
 }
 
 .innerlinkContainerList {
-    background-color: var(--bg-light);
     padding-bottom: 0.5rem;
     padding-left: 0.6rem;
     padding-right: 0.6rem;
@@ -247,20 +247,18 @@ html:has(.open) {
     list-style: none;
 }
 
-.active {
+.active,
+.active:hover,
+.innerlinkContainerList {
     text-decoration: none;
     font-weight: 400;
-    background-color: var(--bg-light);
-}
-
-.active:hover {
-    background-color: var(--bg-light);
+    background-color: hsl(var(--color-h) var(--color-s) calc(var(--color-l) + 10%) / 10%);
 }
 
 .separator {
     margin: 0;
     border: 0;
-    border-top: 1px solid var(--underline);
+    border-top: 1px solid hsl(var(--color-hsl) / 20%);
 }
 
 .TableOfContents__aside {
@@ -285,7 +283,6 @@ html:has(.open) {
         position: fixed;
         height: calc(100vh - 100px);
         width: var(--sidebar-width);
-        background-color: var(--bg-light);
         overflow: auto;
         scrollbar-width: none;
         padding: 0px 11px 11px 9px;

utils/getCSSVarsColors.js

@@ -12,8 +12,8 @@ export function getCSSVarsColors(color) {
 
         // Colors presets
         '--text': `hsl(${h} ${s} ${l})`,
-        '--underline': `hsl(${h} ${s} ${l} / 30%)`,
-        '--bg-light': `hsl(${h} ${s} calc(${l} + 10%) / 10%)`,
+        '--underline': `hsl(${h} ${s} ${l} / 35%)`,
+        '--bg-light': `hsl(${h} ${s} min(calc(${l} + 62%), 97%))`,
         '--bg-dark': `hsl(${h} ${s} ${l} / 30%)`,
     }
 }