quickshell/quickshell-web
3
1
Fork 0
Code Issues Projects Activity

improve light theme

Browse source
This commit is contained in:
outfoxxed 2024-11-08 20:20:38 -08:00
parent 5e253ef331
commit aed59a3f75
Signed by: outfoxxed
GPG key ID: 4C88A185FB89301E
7 changed files with 24 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/config/io/markdown.ts
View file

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

12
src/styles/components/featurelist.css
View file

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

26
src/styles/css-config/base.css
View file

@ -31,20 +31,20 @@ html {
/* primary */ /* primary */
--white: 194; --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 */ /* docs */
--text: var(--white) 0 0; --text: var(--white) 0 0;
--text-dark: var(--white) 0 18; --text-dark: var(--white) 0 18;
--text-darker: var(--white) 0 30; --text-darker: var(--white) 0 30;
--link: var(--green) 74 39; --link: var(--green) 48 40;
--toc-link: var(--green) 74 30; --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-color: 350 78 70;
--prop-link-color: 350 78 60; --prop-link-color: 350 78 60;
--func-color: 50 68 50; --func-color: 50 68 50;
@ -55,8 +55,8 @@ html {
--var-link-color: 190 85 60; --var-link-color: 190 85 60;
--inner-param-color: 215 80 27; --inner-param-color: 215 80 27;
--inner-param-border-color: 215 50 50; --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-bkg: var(--blue) 100 90;
--nav-selected-hovered-bkg: var(--blue) 100 85; --nav-selected-hovered-bkg: var(--blue) 100 85;
--nav-selected-text: var(--blue) 60 60; --nav-selected-text: var(--blue) 60 60;
@ -64,7 +64,7 @@ html {
--toc-hovered-bkg: 0 0 0 / 0.1; --toc-hovered-bkg: 0 0 0 / 0.1;
--overlay-bkg: var(--blue) 25 93; --overlay-bkg: var(--blue) 25 93;
--overlay-bkg-border: var(--blue) 10 75; --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; --footer-bkg-border: var(--blue) 32 84;
} }
@ -97,9 +97,9 @@ html.dark {
--text: var(--white) 0 100; --text: var(--white) 0 100;
--text-dark: var(--white) 0 70; --text-dark: var(--white) 0 70;
--text-darker: var(--white) 0 40; --text-darker: var(--white) 0 40;
--link: var(--green) 76 54; --link: var(--green) 60 44;
--toc-link: var(--green) 74 40; --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-color: 350 78 70;
--prop-link-color: 350 78 60; --prop-link-color: 350 78 60;
--func-color: 50 78 70; --func-color: 50 78 70;

6
src/styles/docs/docs-types.css
View file

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

2
src/styles/docs/docs.css
View file

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

13
src/styles/docs/type-title.css
View file

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

2
src/styles/global.css
View file

@ -21,7 +21,7 @@
/* color styling */ /* color styling */
.header { .header {
background-color: hsl(var(--bg-400)); 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, .baselayout,