Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Compute color variables using relative color syntax #62

Open
wants to merge 4 commits into
base: dev
Choose a base branch
from
Open

Compute color variables using relative color syntax #62

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b36918d
Generate all colors relative to --accent
dz4k Aug 20, 2024
839017a
Relative colors: compute even more stuff
dz4k Aug 21, 2024
b05107f
Merge branch 'dev' into feat-relative-colors
dz4k Aug 30, 2024
c8d7b02
Merge branch 'dev' into feat-relative-colors
dz4k Aug 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 5 additions & 15 deletions src/colorways.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,22 @@

.plain {
--box-bg: var(--plain-bg);
--accent: var(--plain-fg);
--graphical-fg: var(--plain-graphical-fg);
--accent: var(--base-accent);
}

.info {
--box-bg: var(--info-bg);
--accent: var(--info-fg);
--graphical-fg: var(--info-graphical-fg);
--accent: var(--info-accent);
}

.ok {
--box-bg: var(--ok-bg);
--accent: var(--ok-fg);
--graphical-fg: var(--ok-graphical-fg);
--accent: var(--ok-accent);
}

.warn {
--box-bg: var(--warn-bg);
--accent: var(--warn-fg);
--graphical-fg: var(--warn-graphical-fg);
--accent: var(--warn-accent);
}

.bad {
--box-bg: var(--bad-bg);
--accent: var(--bad-fg);
--graphical-fg: var(--bad-graphical-fg);
--accent: var(--bad-accent);
}

.color {
Expand Down
19 changes: 9 additions & 10 deletions src/components.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ details,
margin: var(--gap) 0;
padding: var(--gap);
overflow: clip;

border-radius: var(--border-radius);
background: var(--box-bg);
border: 1px solid var(--graphical-fg);
Expand All @@ -24,12 +24,11 @@ details,
font: inherit;
font-family: var(--secondary-font);
font-weight: bold;

translate: 0 calc(-1px - var(--gap));

background: var(--graphical-fg);
color: var(--bg);
text-shadow: 0 .1em .2em var(--fg);
border-bottom: 1px solid;
border-bottom-color: inherit;
}
Expand Down Expand Up @@ -81,7 +80,7 @@ details,
display: grid;
grid-template-columns: 25ch auto;
inset: 0;

& > header {
border-block: none;
border-inline-start: none;
Expand Down Expand Up @@ -163,7 +162,7 @@ details,
flex-shrink: 0;
margin-block: 0;
}

&:not(.expanded) {
& > :first-child, & nav > :first-child { margin-inline-start: auto; }
& > :last-child, & nav > :last-child { margin-inline-end: auto; }
Expand All @@ -175,10 +174,10 @@ details,
display: flex;
flex-flow: row;
gap: var(--rhythm);

& * { flex-shrink: 0 }
}

& nav ul[role="list"] {
padding-inline-start: 0;
}
Expand All @@ -196,7 +195,7 @@ details,
& [aria-current=page] {
position: relative;
}

& [aria-current=page]::after {
width: 100%;
height: 6px;
Expand All @@ -218,7 +217,7 @@ details,

.permalink-anchor {
display: none;

*:hover > & {
display: initial;
}
Expand Down
131 changes: 48 additions & 83 deletions src/variables.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,38 +1,28 @@

:root {
/* Colors */
--fg: var(--gray-12); /* Text. */
--muted-fg: var(--gray-10); /* Secondary text color. Will be
used with a background of --c-bg and --c-bg-2 -- check contrast! */
--faded-fg: var(--gray-6); /* Disabled text color. */
--graphical-fg: var(--plain-graphical-fg); /* Graphical elements. Will not
be used as a text color. */

--plain-fg: var(--blue-10);
--info-fg: var(--blue-11);
--ok-fg: var(--green-11);
--bad-fg: var(--red-11);
--warn-fg: var(--yellow-11);

--plain-graphical-fg: var(--gray-6);
--info-graphical-fg: var(--blue-6);
--ok-graphical-fg: var(--green-6);
--bad-graphical-fg: var(--red-6);
--warn-graphical-fg: var(--yellow-6);

--bg: var(--gray-0); /* Page background. */
--box-bg: var(--plain-bg); /* Background for blocks: cards, admonitions etc. */
--interactive-bg: var(--gray-4); /* Background for interactive elements */

--plain-bg: var(--gray-1);
--info-bg: var(--blue-1);
--ok-bg: var(--green-1);
--bad-bg: var(--red-1);
--warn-bg: var(--yellow-1);

--accent: var(--blue-10); /* Accent color. Will be used *as a text color* with a
--base-accent: var(--blue-10); /* Accent color. Will be used *as a text color* with a
background of --c-bg and --c-bg-2 -- check contrast! */
--muted-accent: var(--blue-7); /* Muted accent color. Will not be used for text. */
--accent: var(--base-accent);
&,* {
--fg: lch(from var(--accent) 2% calc(.1*C) H); /* Text. */
--bg: lch(from var(--accent) 98% calc(.02*C) H);
--muted-fg: lch(from var(--accent) 7% calc(.15*C) H); /* Secondary text color. Will be
used with a background of --c-bg and --c-bg-2 -- check contrast! */
--faded-fg: lch(from var(--accent) 15% calc(.05*C) H); /* Disabled text color. */
--graphical-fg: lch(from var(--accent) calc(.9*L) calc(.9*C) H); /* Graphical elements. Will not
be used as a text color. */

--muted-accent: lch(from var(--accent) calc(2*L) calc(.8*C) H);

--info-accent: lch(from var(--base-accent) L calc(.8*C) 270deg);
--ok-accent: lch(from var(--base-accent) L calc(.8*C) 120deg);
--bad-accent: lch(from var(--base-accent) L calc(.8*C) 20deg);
--warn-accent: lch(from var(--base-accent) L calc(.8*C) 80deg);

--box-bg: lch(from var(--accent) 94% 8% H); /* Background for blocks: cards, admonitions etc. */
--interactive-bg: lch(from var(--accent) 90% 3% H); /* Background for interactive elements */
}

/* Lengths */
--rhythm: 1.4rem; /* Vertical rhythm, line height. */
Expand All @@ -45,7 +35,7 @@
--display-font: var(--secondary-font); /* Headings */
--mono-font: 'M Plus Code Latin', monospace, monospace; /* monospace twice stops browsers from
shrinking this */

/* Density */
--density: 1;

Expand All @@ -69,61 +59,36 @@

/* Enable dark theme independently of os preferences*/
:root.-dark-theme {
--fg: var(--gray-0);
--muted-fg: var(--gray-2);
--faded-fg: var(--gray-7);
--plain-bg: var(--gray-11);
--info-bg: var(--blue-12);
--ok-bg: var(--green-12);
--bad-bg: var(--red-12);
--warn-bg: var(--yellow-12);
--plain-faded-fg: var(--blue-6);
--info-faded-fg: var(--blue-6);
--ok-faded-fg: var(--green-6);
--bad-faded-fg: var(--red-6);
--warn-faded-fg: var(--yellow-6);
--bg: var(--gray-12);
--box-bg: var(--gray-10);
--interactive-bg: var(--gray-8);
--plain-fg: var(--blue-2);
--info-fg: var(--blue-2);
--ok-fg: var(--green-2);
--bad-fg: var(--red-2);
--warn-fg: var(--yellow-2);
--accent: var(--blue-2);
--muted-accent: var(--blue-5)
&,* {
--fg: lch(from var(--accent) 96% calc(.1*C) H);
--bg: lch(from var(--accent) 1% calc(.02*C) H);
--muted-fg: lch(from var(--accent) 93% calc(.15*C) H);
--faded-fg: lch(from var(--accent) 90% calc(.05*C) H);
--graphical-fg: lch(from var(--accent) calc(.9*L) calc(.9*C) H);

--base-accent: var(--blue-2);
--muted-accent: lch(from var(--accent) calc(.7*L) calc(.8*C) H);

--box-bg: lch(from var(--accent) 12% 5% H); /* Background for blocks: cards, admonitions etc. */
--interactive-bg: lch(from var(--accent) 20% 10% H); /* Background for interactive elements */
}
}

@media (prefers-color-scheme: dark) {
:root:not(.-no-dark-theme) {
--fg: var(--gray-0);
--muted-fg: var(--gray-2);
--faded-fg: var(--gray-7);

--plain-bg: var(--gray-11);
--info-bg: var(--blue-12);
--ok-bg: var(--green-12);
--bad-bg: var(--red-12);
--warn-bg: var(--yellow-12);

--plain-faded-fg: var(--blue-6);
--info-faded-fg: var(--blue-6);
--ok-faded-fg: var(--green-6);
--bad-faded-fg: var(--red-6);
--warn-faded-fg: var(--yellow-6);

--bg: var(--gray-12);
--box-bg: var(--gray-10);
--interactive-bg: var(--gray-8);

--plain-fg: var(--blue-2);
--info-fg: var(--blue-2);
--ok-fg: var(--green-2);
--bad-fg: var(--red-2);
--warn-fg: var(--yellow-2);

--accent: var(--blue-2);
--muted-accent: var(--blue-5);
&,* {
--fg: lch(from var(--accent) 96% calc(.1*C) H);
--bg: lch(from var(--accent) 1% calc(.02*C) H);
--muted-fg: lch(from var(--accent) 93% calc(.15*C) H);
--faded-fg: lch(from var(--accent) 90% calc(.05*C) H);
--graphical-fg: lch(from var(--accent) calc(.9*L) calc(.9*C) H);

--base-accent: var(--blue-2);
--muted-accent: lch(from var(--accent) calc(.7*L) calc(.8*C) H);

--box-bg: lch(from var(--accent) 12% 5% H); /* Background for blocks: cards, admonitions etc. */
--interactive-bg: lch(from var(--accent) 20% 10% H); /* Background for interactive elements */
}
}
}

Expand Down