From aed59a3f75b0fc12b248e5e9e5a761f429dc6ea0 Mon Sep 17 00:00:00 2001 From: outfoxxed Date: Fri, 8 Nov 2024 20:20:38 -0800 Subject: [PATCH] improve light theme --- src/config/io/markdown.ts | 1 + src/styles/components/featurelist.css | 12 ++++++++---- src/styles/css-config/base.css | 26 +++++++++++++------------- src/styles/docs/docs-types.css | 6 ------ src/styles/docs/docs.css | 2 +- src/styles/docs/type-title.css | 13 ------------- src/styles/global.css | 2 +- 7 files changed, 24 insertions(+), 38 deletions(-) diff --git a/src/config/io/markdown.ts b/src/config/io/markdown.ts index b5a715c..fc213e7 100644 --- a/src/config/io/markdown.ts +++ b/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 }, diff --git a/src/styles/components/featurelist.css b/src/styles/components/featurelist.css index 2201634..2c79171 100644 --- a/src/styles/components/featurelist.css +++ b/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; } diff --git a/src/styles/css-config/base.css b/src/styles/css-config/base.css index 8d2119c..860ab8c 100644 --- a/src/styles/css-config/base.css +++ b/src/styles/css-config/base.css @@ -31,20 +31,20 @@ html { /* primary */ --white: 194; - --bg-400: var(--white) 33 100; - --bg-500: var(--white) 12 96; - --bg-600: var(--white) 12 76; - --bg-700: var(--white) 12 56; - --bg-800: var(--white) 12 36; - --bg-900: var(--white) 12 16; + --bg-400: var(--white) 10 95; + --bg-500: var(--white) 5 90; + --bg-600: var(--white) 5 76; + --bg-700: var(--white) 5 56; + --bg-800: var(--white) 5 36; + --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-weak-bkg: var(--blue) 100 93; + --nav-hovered-bkg: var(--blue) 100 87; + --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; diff --git a/src/styles/docs/docs-types.css b/src/styles/docs/docs-types.css index 00c9984..83b4b0f 100644 --- a/src/styles/docs/docs-types.css +++ b/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 { diff --git a/src/styles/docs/docs.css b/src/styles/docs/docs.css index 355df9b..d1f9e4d 100644 --- a/src/styles/docs/docs.css +++ b/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; diff --git a/src/styles/docs/type-title.css b/src/styles/docs/type-title.css index 8022a38..a00b391 100644 --- a/src/styles/docs/type-title.css +++ b/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; diff --git a/src/styles/global.css b/src/styles/global.css index ffc1699..468036a 100644 --- a/src/styles/global.css +++ b/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,