significantly improve light theme

src/styles/css-config/base.css

@@ -16,9 +16,10 @@ html {
   color-scheme: light dark;
   /* accent */
   --green: 141;
-  --accent-400: var(--green) 100 67;
+  --accent-400: var(--green) 90 57;
-  --accent-500: var(--green) 100 57;
+  --accent-500: var(--green) 90 47;
-  --accent-600: var(--green) 98 50;
+  --accent-600: var(--green) 88 40;
+	--accent-700: var(--green) 70 40;
 
   /* secondary */
   --blue: 224;
@@ -37,6 +38,17 @@ html {
   --bg-700: var(--white) 12 56;
   --bg-800: var(--white) 12 36;
   --bg-900: var(--white) 12 16;
+
+  /* docs */
+  --prop-color: 350 78 70;
+  --prop-link-color: 350 78 60;
+  --func-color: 50 68 50;
+  --func-link-color: 50 58 55;
+  --signal-color: 270 78 70;
+  --signal-link-color: 270 85 60;
+  --var-color: 190 78 70;
+  --var-link-color: 190 85 60;
+  --inner-param-color: 215 60 70;
 }
 
 html.dark {
@@ -45,6 +57,7 @@ html.dark {
   --accent-400: var(--green) 100 67;
   --accent-500: var(--green) 95 55;
   --accent-600: var(--green) 90 40;
+  --accent-700: var(--green) 80 30;
 
   /* secondary */
   --white: 194;

src/styles/docs/docs-types.css

@@ -216,10 +216,10 @@
 
 .typeprops {
   & .typeprop-root {
-    border: 1px solid hsla(var(--prop-color) / 0.3);
+    border: 1px solid hsla(var(--prop-color) / 0.6);
 
     &:hover {
-      border: 1px solid hsla(var(--prop-color) / 0.6);
+      border: 1px solid hsla(var(--prop-color));
 
       & .type-datatype {
         opacity: 1;
@@ -232,12 +232,22 @@
   }
 }
 
-.typefuncs {
+html.dark .typeprops {
-  & .typefunc-root {
+  & .typeprop-root {
-    border: 1px solid hsla(var(--func-color) / 0.3);
+    border: 1px solid hsla(var(--prop-color) / 0.3);
 
     &:hover {
-      border: 1px solid hsla(var(--func-color) / 0.6);
+      border: 1px solid hsla(var(--prop-color) / 0.6);
+    }
+  }
+}
+
+.typefuncs {
+  & .typefunc-root {
+    border: 1px solid hsla(var(--func-color) / 0.6);
+
+    &:hover {
+      border: 1px solid hsla(var(--func-color));
 
       & .type-datatype {
         opacity: 1;
@@ -264,12 +274,22 @@
   }
 }
 
-.typesignals {
+html.dark .typefuncs {
-  & .typesignal-root {
+  & .typefunc-root {
-    border: 1px solid hsla(var(--signal-color) / 0.3);
+    border: 1px solid hsla(var(--func-color) / 0.3);
 
     &:hover {
-      border: 1px solid hsla(var(--signal-color) / 0.6);
+      border: 1px solid hsla(var(--func-color) / 0.6);
+    }
+  }
+}
+
+.typesignals {
+  & .typesignal-root {
+    border: 1px solid hsla(var(--signal-color) / 0.6);
+
+    &:hover {
+      border: 1px solid hsla(var(--signal-color));
 
       & .typesignal-doclink {
         opacity: 1;
@@ -306,12 +326,22 @@
   }
 }
 
-.typevariants {
+html.dark .typesignals {
-  & .typevariant-root {
+  & .typesignal-root {
-    border: 1px solid hsla(var(--var-color) / 0.3);
+    border: 1px solid hsla(var(--signal-color) / 0.3);
 
     &:hover {
-      border: 1px solid hsla(var(--var-color) / 0.6);
+      border: 1px solid hsla(var(--signal-color) / 0.6);
+    }
+  }
+}
+
+.typevariants {
+  & .typevariant-root {
+    border: 1px solid hsla(var(--var-color) / 0.6);
+
+    &:hover {
+      border: 1px solid hsla(var(--var-color));
 
       & .typevariant-doclink {
         opacity: 1;
@@ -334,6 +364,16 @@
   }
 }
 
+html.dark .typevariants {
+  & .typevariant-root {
+    border: 1px solid hsla(var(--var-color) / 0.3);
+
+    &:hover {
+      border: 1px solid hsla(var(--var-color) / 0.6);
+    }
+  }
+}
+
 @media (min-width: 768px) {
   .root-nav {
     & .root-nav-entry {

src/styles/docs/docs.css

@@ -17,6 +17,7 @@
 }
 
 .c-breadcrumbs {
+  --color-link-breadcrumbs: hsl(var(--accent-600));
   margin-top: 1.056rem;
   margin-bottom: 0.318rem;
   max-width: 100svw;
@@ -80,7 +81,6 @@ ul {
 }
 
 @media (min-width: 768px) {
-
   .docs,
   .docslayout-root {
     gap: 0.648rem;

src/styles/docs/nav/nav-tree.css

@@ -13,7 +13,7 @@
 }
 
 [data-scope="accordion"][data-part="item-trigger"] {
-  background-color: hsl(var(--bg-900));
+  background-color: transparent;
   position: relative;
   border: unset;
   border-radius: 6px;
@@ -46,14 +46,15 @@
     position: absolute;
     border-radius: 6px;
     z-index: -1;
-    inset: -1px;
+    inset: -0px;
-    background-color: hsla(var(--green) 80 70 / 0.3);
+    /*border: 1px solid hsla(var(--green) 80 70 / 0.3);*/
-    transition: background-color 0.3s;
+    border: 1px solid hsl(var(--accent-700));
+    transition: border-color 0.3s;
   }
 
   &:hover {
     &::before {
-      background-color: hsla(var(--green) 80 70 / 0.6);
+      border-color: hsla(var(--accent-500));
     }
   }
 }
@@ -70,10 +71,22 @@
   margin-left: 3px;
 
   &:hover {
-    background-color: hsl(var(--blue) 30 30);
+    background-color: hsl(var(--blue) 20 80);
   }
 }
 
+html.dark [data-scope="accordion"][data-part="item-indicator"]:hover {
+  background-color: hsl(var(--blue) 30 30);
+}
+
+.nav-shevron {
+  color: black;
+}
+
+html.dark .nav-shevron {
+  color: white;
+}
+
 [data-scope="accordion"][data-part="item-indicator"][data-state="open"] {
   animation: rotateIn 250ms ease-in-out forwards;
 }

src/styles/docs/nav/search.css

@@ -229,6 +229,10 @@ button>kbd {
   font-size: 0.75rem;
   gap: 0.25em;
   padding-inline: 0.375rem;
+  background-color: hsla(var(--blue) 15 80);
+}
+
+html.dark button>kbd {
   background-color: hsla(var(--blue) 5 20 / 0.5);
 }
 
@@ -305,16 +309,15 @@ button[data-close-modal] {
     border-radius: 6px;
     padding-inline-start: 0.75rem;
     padding-inline-end: 0.5rem;
-    background-color: hsla(var(--blue) 15 15 / 0.5);
+    background-color: hsla(var(--blue) 15 90);
-    color: hsl(var(--blue) 40 65);
+    color: hsl(var(--blue) 40 45);
     font-size: 0.875rem;
     width: 100%;
     max-width: 15rem;
     transition: color 0.23s, border-color 0.23s;
 
     &:hover {
-      border-color: hsl(0 0 50);
+      color: hsl(var(--blue) 50 30);
-      color: hsl(var(--blue) 60 85);
     }
 
     &> :last-child {
@@ -322,6 +325,15 @@ button[data-close-modal] {
     }
   }
 
+	html.dark button[data-open-modal] {
+    background-color: hsla(var(--blue) 15 15 / 0.5);
+    color: hsl(var(--blue) 40 65);
+
+    &:hover {
+      color: hsl(var(--blue) 60 85);
+    }
+	}
+
   #qs_search {
     --search-cancel-space: 0px;
   }

src/styles/global.css

@@ -13,8 +13,8 @@
 
 /* color styling */
 .header {
-  background-color: hsl(var(--blue) 100 88);
+  background-color: hsl(var(--bg-400));
-  box-shadow: 0 3px 3px 3px hsla(var(--white) 100 0 / 0.3);
+  box-shadow: 0 3px 3px 3px hsla(var(--white) 100 0 / 0.1);
 }
 
 .baselayout,