diff options
| -rw-r--r-- | src/colorways.css | 20 | ||||
| -rw-r--r-- | src/components.css | 19 | ||||
| -rw-r--r-- | src/variables.css | 131 |
3 files changed, 62 insertions, 108 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/components.css b/src/components.css index 961394a..6faf345 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 463938b..ba4d3c1 100644 --- a/src/variables.css +++ b/src/variables.css @@ -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. */ @@ -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; @@ -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 */ + } } } |