From b36918dd89fe78d993c7561e81abe694dcc8a7b1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Deniz=20Ak=C5=9Fim=C5=9Fek?= Date: Tue, 20 Aug 2024 23:46:40 +0300 Subject: [PATCH 1/2] Generate all colors relative to --accent using new lch(from) syntax --- src/components.css | 19 +++---- src/variables.css | 133 ++++++++++++++++++++------------------------- 2 files changed, 67 insertions(+), 85 deletions(-) diff --git a/src/components.css b/src/components.css index de73e22..b1a8d8d 100644 --- a/src/components.css +++ b/src/components.css @@ -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); @@ -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; } @@ -81,7 +80,7 @@ details, display: grid; grid-template-columns: 25ch auto; inset: 0; - + & > header { border-block: none; border-inline-start: none; @@ -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; } @@ -175,10 +174,10 @@ details, display: flex; flex-flow: row; gap: var(--rhythm); - + & * { flex-shrink: 0 } } - + & nav ul[role="list"] { padding-inline-start: 0; } @@ -196,7 +195,7 @@ details, & [aria-current=page] { position: relative; } - + & [aria-current=page]::after { width: 100%; height: 6px; @@ -218,7 +217,7 @@ details, .permalink-anchor { display: none; - + *:hover > & { display: initial; } diff --git a/src/variables.css b/src/variables.css index d059bb5..40e2d7e 100644 --- a/src/variables.css +++ b/src/variables.css @@ -1,38 +1,38 @@ :root { /* Colors */ - --fg: var(--gray-12); /* Text. */ - --muted-fg: var(--gray-10); /* Secondary text color. Will be + --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: var(--gray-6); /* Disabled text color. */ + --faded-fg: lch(from var(--accent) 15% calc(.05*C) H); /* 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 background of --c-bg and --c-bg-2 -- check contrast! */ - --muted-accent: var(--blue-7); /* Muted accent color. Will not be used for text. */ + --muted-accent: lch(from var(--accent) calc(2*L) calc(.8*C) H); + + --plain-fg: var(--accent); + --info-fg: lch(from var(--accent) L calc(.8*C) 280deg); + --ok-fg: lch(from var(--accent) L calc(.8*C) 120deg); + --bad-fg: lch(from var(--accent) L calc(.8*C) 20deg); + --warn-fg: lch(from var(--accent) L calc(.8*C) 80deg); + + --plain-graphical-fg: lch(from var(--accent) L calc(1.4*C) H); + --info-graphical-fg: lch(from var(--accent) L calc(1.4*C) 280deg); + --ok-graphical-fg: lch(from var(--accent) L calc(1.4*C) 120deg); + --bad-graphical-fg: lch(from var(--accent) L calc(1.4*C) 20deg); + --warn-graphical-fg: lch(from var(--accent) L calc(1.4*C) 80deg); + + --box-bg: lch(from var(--accent) 94% 2% H); /* Background for blocks: cards, admonitions etc. */ + --interactive-bg: lch(from var(--accent) 90% 3% H); /* Background for interactive elements */ + + --plain-bg: lch(from var(--accent) 94% 8% H); + --info-bg: lch(94% 15% 280deg); + --ok-bg: lch(94% 15% 120deg); + --bad-bg: lch(94% 15% 20deg); + --warn-bg: lch(94% 15% 80deg); /* Lengths */ --rhythm: 1.4rem; /* Vertical rhythm, line height. */ @@ -44,7 +44,7 @@ --secondary-font: var(--main-font); /* Headings etc. */ --mono-font: 'M Plus Code Latin', monospace, monospace; /* monospace twice stops browsers from shrinking this */ - + /* Density */ --density: 1; @@ -68,61 +68,44 @@ /* 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: (--blue-2); - --info-fg: var(--blue-2); - --ok-fg: var(--green-2); - --bad-fg: var(--red-2); - --warn-fg: var(--yellow-2); + --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: var(--plain-graphical-fg); + --accent: var(--blue-2); - --muted-accent: var(--blue-5) + --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) 4% 3% H); /* Background for interactive elements */ + + --plain-bg: lch(from var(--accent) 12% 8% H); + --info-bg: lch(15% 15% 280deg); + --ok-bg: lch(15% 15% 120deg); + --bad-bg: lch(15% 15% 20deg); + --warn-bg: lch(15% 15% 80deg); } @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: (--blue-2); - --info-fg: var(--blue-2); - --ok-fg: var(--green-2); - --bad-fg: var(--red-2); - --warn-fg: var(--yellow-2); + --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: var(--plain-graphical-fg); --accent: var(--blue-2); - --muted-accent: var(--blue-5); + --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) 4% 3% H); /* Background for interactive elements */ + + --plain-bg: lch(from var(--accent) 12% 8% H); + --info-bg: lch(15% 15% 280deg); + --ok-bg: lch(15% 15% 120deg); + --bad-bg: lch(15% 15% 20deg); + --warn-bg: lch(15% 15% 80deg); } } From 839017a8c7afe4de67bf27398cd699d73073ba5f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Deniz=20Ak=C5=9Fim=C5=9Fek?= Date: Wed, 21 Aug 2024 10:16:49 +0300 Subject: [PATCH 2/2] Relative colors: compute even more stuff --- src/colorways.css | 20 +++-------- src/variables.css | 92 +++++++++++++++++++---------------------------- 2 files changed, 41 insertions(+), 71 deletions(-) diff --git a/src/colorways.css b/src/colorways.css index 92a5a17..00089b2 100644 --- a/src/colorways.css +++ b/src/colorways.css @@ -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 { diff --git a/src/variables.css b/src/variables.css index 40e2d7e..a3f210f 100644 --- a/src/variables.css +++ b/src/variables.css @@ -1,38 +1,28 @@ :root { /* Colors */ - --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: var(--plain-graphical-fg); /* Graphical elements. Will not - be used as a text color. */ - - --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: lch(from var(--accent) calc(2*L) calc(.8*C) H); - - --plain-fg: var(--accent); - --info-fg: lch(from var(--accent) L calc(.8*C) 280deg); - --ok-fg: lch(from var(--accent) L calc(.8*C) 120deg); - --bad-fg: lch(from var(--accent) L calc(.8*C) 20deg); - --warn-fg: lch(from var(--accent) L calc(.8*C) 80deg); - - --plain-graphical-fg: lch(from var(--accent) L calc(1.4*C) H); - --info-graphical-fg: lch(from var(--accent) L calc(1.4*C) 280deg); - --ok-graphical-fg: lch(from var(--accent) L calc(1.4*C) 120deg); - --bad-graphical-fg: lch(from var(--accent) L calc(1.4*C) 20deg); - --warn-graphical-fg: lch(from var(--accent) L calc(1.4*C) 80deg); - - --box-bg: lch(from var(--accent) 94% 2% H); /* Background for blocks: cards, admonitions etc. */ - --interactive-bg: lch(from var(--accent) 90% 3% H); /* Background for interactive elements */ - - --plain-bg: lch(from var(--accent) 94% 8% H); - --info-bg: lch(94% 15% 280deg); - --ok-bg: lch(94% 15% 120deg); - --bad-bg: lch(94% 15% 20deg); - --warn-bg: lch(94% 15% 80deg); + --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. */ @@ -72,40 +62,30 @@ --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: var(--plain-graphical-fg); + --graphical-fg: lch(from var(--accent) calc(.9*L) calc(.9*C) H); - --accent: var(--blue-2); + --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) 4% 3% H); /* Background for interactive elements */ - - --plain-bg: lch(from var(--accent) 12% 8% H); - --info-bg: lch(15% 15% 280deg); - --ok-bg: lch(15% 15% 120deg); - --bad-bg: lch(15% 15% 20deg); - --warn-bg: lch(15% 15% 80deg); } @media (prefers-color-scheme: dark) { :root:not(.-no-dark-theme) { - --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: var(--plain-graphical-fg); - - --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) 4% 3% H); /* Background for interactive elements */ - - --plain-bg: lch(from var(--accent) 12% 8% H); - --info-bg: lch(15% 15% 280deg); - --ok-bg: lch(15% 15% 120deg); - --bad-bg: lch(15% 15% 20deg); - --warn-bg: lch(15% 15% 80deg); + &,* { + --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 */ + } } }