improve light theme

src/config/io/markdown.ts

@@ -146,6 +146,7 @@ export const markdownConfig: AstroMarkdownOptions = {
         },
         colorReplacements: {
           "slack-ochin": {
+            "#fff": "#f1f3f4", // bg
             "#357b42": "#989eb9", // comments
             "#b1108e": "#224bbb", // fields
           },

src/styles/components/featurelist.css

@@ -18,17 +18,16 @@
   align-items: center;
   margin-block: 0.618rem;
   border-radius: 9px;
-  background-color: hsla(var(--blue) 60 98 / 0.6);
+  background-color: hsl(var(--blue) 60 98);
   padding-inline: 0.618rem;
   padding-block: 1.217rem;
-  border: 1px solid hsla(0 0 0 / 0.1);
+  border: 1px solid hsl(var(--blue) 9 75);
   &::before {
     content: "";
     position: absolute;
     inset: 0.618rem;
-    z-index: -1;
     background-image: radial-gradient(
-      hsla(0 0 0 / 0.4) 1px,
+      hsl(var(--blue) 9 75) 1px,
       transparent 1px
     );
     background-position: 50% 50%;
@@ -73,6 +72,11 @@ html.dark .feature-text {
   aspect-ratio: 16 / 9;
 }
 
+html:not(.dark) .feature-showcase .shiki,
+html:not(.dark) .feature-showcase .shiki span {
+  background-color: #ffffff;
+}
+
 .feature-video {
   border-radius: 0.681rem;
 }

src/styles/css-config/base.css

@@ -31,20 +31,20 @@ html {
 
   /* primary */
   --white: 194;
-  --bg-400: var(--white) 33 100;
+  --bg-400: var(--white) 10 95;
-  --bg-500: var(--white) 12 96;
+  --bg-500: var(--white) 5 90;
-  --bg-600: var(--white) 12 76;
+  --bg-600: var(--white) 5 76;
-  --bg-700: var(--white) 12 56;
+  --bg-700: var(--white) 5 56;
-  --bg-800: var(--white) 12 36;
+  --bg-800: var(--white) 5 36;
-  --bg-900: var(--white) 12 16;
+  --bg-900: var(--white) 5 16;
 
   /* docs */
   --text: var(--white) 0 0;
   --text-dark: var(--white) 0 18;
   --text-darker: var(--white) 0 30;
-  --link: var(--green) 74 39;
+  --link: var(--green) 48 40;
   --toc-link: var(--green) 74 30;
-  --toc-link-active: var(--green) 74 40;
+  --toc-link-active: var(--green) 80 38;
   --prop-color: 350 78 70;
   --prop-link-color: 350 78 60;
   --func-color: 50 68 50;
@@ -55,8 +55,8 @@ html {
   --var-link-color: 190 85 60;
   --inner-param-color: 215 80 27;
   --inner-param-border-color: 215 50 50;
-  --nav-hovered-bkg: var(--blue) 100 92;
+  --nav-hovered-bkg: var(--blue) 100 87;
-  --nav-hovered-weak-bkg: var(--blue) 100 93;
+  --nav-hovered-weak-bkg: var(--blue) 100 91;
   --nav-selected-bkg: var(--blue) 100 90;
   --nav-selected-hovered-bkg: var(--blue) 100 85;
   --nav-selected-text: var(--blue) 60 60;
@@ -64,7 +64,7 @@ html {
   --toc-hovered-bkg: 0 0 0 / 0.1;
   --overlay-bkg: var(--blue) 25 93;
   --overlay-bkg-border: var(--blue) 10 75;
-  --footer-bkg: var(--blue) 32 92;
+  --footer-bkg: var(--blue) 8 87;
   --footer-bkg-border: var(--blue) 32 84;
 }
 
@@ -97,9 +97,9 @@ html.dark {
   --text: var(--white) 0 100;
   --text-dark: var(--white) 0 70;
   --text-darker: var(--white) 0 40;
-  --link: var(--green) 76 54;
+  --link: var(--green) 60 44;
   --toc-link: var(--green) 74 40;
-  --toc-link-active: var(--green) 74 50;
+  --toc-link-active: var(--green) 80 60;
   --prop-color: 350 78 70;
   --prop-link-color: 350 78 60;
   --func-color: 50 78 70;

src/styles/docs/docs-types.css

@@ -152,13 +152,7 @@
 
 .type-datatype {
   color: #808080;
-  opacity: 0.8;
   width: max-content;
-  transition: opacity 0.5s;
-
-  & > a {
-    opacity: inherit;
-  }
 }
 
 .typeprops {

src/styles/docs/docs.css

@@ -57,7 +57,7 @@
 }
 
 .c-breadcrumbs {
-  --color-link-breadcrumbs: hsl(var(--accent-600));
+  --color-link-breadcrumbs: hsl(var(--link));
   margin-top: 0.5rem;
   margin-bottom: 0.318rem;
   max-width: 100svw;

src/styles/docs/type-title.css

@@ -4,19 +4,6 @@
   margin-block: 0 !important;
 }
 
-.typedocs-title-text {
-  letter-spacing: 0.012rem;
-
-  & a {
-    opacity: 0.6;
-    transition: opacity 0.5s;
-
-    &:hover {
-      opacity: 1;
-    }
-  }
-}
-
 .typedata-title {
   margin-bottom: 1.618rem;
 

src/styles/global.css

@@ -21,7 +21,7 @@
 /* color styling */
 .header {
   background-color: hsl(var(--bg-400));
-  box-shadow: 0 3px 3px 3px hsla(var(--white) 100 0 / 0.1);
+  box-shadow: 0 1px 1px 1px hsla(var(--white) 100 0 / 0.1);
 }
 
 .baselayout,