bterkuile/fizzy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update ink and inverted colors

Browse Source
This commit is contained in:
Andy Smith
2025-04-17 14:10:35 -05:00
parent 91df76928b
commit e00edb444d
21 changed files with 59 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/_global.css
+10 -7
View File
@@ -34,8 +34,9 @@
--btn-size: 2.65em;
/* Color values */
--lch-black: 27.13% 0.1035 284.77;
--lch-white: 100% 0 0;
--lch-ink: 27.13% 0.1035 284.77;
--lch-ink-inverted: 100% 0 0;
--lch-gray-light: 96% 0.005 96;
--lch-gray: 92% 0.005 96;
--lch-gray-dark: 75% 0.005 96;
@@ -53,12 +54,14 @@
--lch-light-blue: 84.94% 0.048 216.62;
/* Color abstractions */
--color-ink: oklch(var(--lch-ink));
--color-ink-inverted: oklch(var(--lch-ink-inverted));
--color-canvas: oklch(var(--lch-ink-inverted));
--color-negative: oklch(var(--lch-red));
--color-positive: oklch(var(--lch-green));
--color-positive-light: oklch(var(--lch-green-light));
--color-bg: oklch(var(--lch-white));
--color-ink: oklch(var(--lch-black));
--color-ink-reversed: oklch(var(--lch-white));
--color-link: oklch(var(--lch-blue));
--color-subtle-light: oklch(var(--lch-gray-light));
--color-subtle: oklch(var(--lch-gray));
@@ -73,8 +76,8 @@
--color-golden: oklch(var(--lch-golden));
@media (prefers-color-scheme: dark) {
--lch-black: 100% 0 0;
--lch-white: 0% 0 0;
--lch-ink: 100% 0 0;
--lch-ink-inverted: 0% 0 0;
--lch-gray-light: 25.2% 0 0;
--lch-gray: 30.12% 0 0;
--lch-gray-dark: 44.95% 0 0;
app/assets/stylesheets/base.css
+1 -1
View File
@@ -18,7 +18,7 @@
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
background: var(--color-bg);
background: var(--color-canvas);
color: var(--color-ink);
font-family: var(--font-sans);
interpolate-size: allow-keywords;
app/assets/stylesheets/buttons.css
+7 -7
View File
@@ -4,7 +4,7 @@
--btn-border-radius: 2em;
align-items: center;
background-color: var(--btn-background, var(--color-bg));
background-color: var(--btn-background, var(--color-canvas));
border-radius: var(--btn-border-radius);
border: var(--btn-border-size, 1px) solid var(--btn-border-color, var(--color-subtle-dark));
color: var(--btn-color, var(--color-ink));
@@ -112,7 +112,7 @@
&:has(input:checked) {
--btn-background: var(--color-ink);
--btn-color: var(--color-ink-reversed);
--btn-color: var(--color-ink-inverted);
--outline-color: var(--color-ink);
.checked {
@@ -137,13 +137,13 @@
/* Variants */
.btn--link {
--btn-background: var(--color-link);
--btn-color: var(--color-ink-reversed);
--btn-color: var(--color-ink-inverted);
--outline-color: var(--color-link);
}
.btn--negative {
--btn-background: var(--color-negative);
--btn-color: var(--color-ink-reversed);
--btn-color: var(--color-ink-inverted);
--outline-color: var(--color-negative);
}
@@ -163,7 +163,7 @@
.btn--positive {
--btn-background: var(--color-positive);
--btn-color: var(--color-ink-reversed);
--btn-color: var(--color-ink-inverted);
--outline-color: var(--color-positive);
}
@@ -173,12 +173,12 @@
.btn--reversed {
--btn-background: var(--color-ink);
--btn-color: var(--color-bg);
--btn-color: var(--color-canvas);
--outline-color: var(--color-ink);
}
:is(.btn--link, .btn--negative, .btn--positive, .btn--reversed) {
--btn-border-color: var(--color-bg);
--btn-border-color: var(--color-canvas);
}
.btn--success {
app/assets/stylesheets/card-columns.css
+1 -1
View File
@@ -77,7 +77,7 @@
--text-xx-large: 1.6em;
--text-small: 1.1em;
background-color: var(--color-bg);
background-color: var(--color-canvas);
box-shadow: 0 0 0 1px var(--color-subtle);
line-height: 1.2;
app/assets/stylesheets/card-perma.css
+3 -3
View File
@@ -4,7 +4,7 @@
.card-perma {
--actions-block-inset: 1.5rem;
--actions-inline-inset: 4rem;
--color-container: color-mix(in srgb, var(--card-color) 33%, var(--color-bg));
--color-container: color-mix(in srgb, var(--card-color) 33%, var(--color-canvas));
--padding-inline: calc(var(--block-space-double) + var(--block-space));
--padding-block: calc(var(--block-space-double) + var(--block-space-half));
@@ -87,7 +87,7 @@
&:has(input:checked) {
--btn-background: var(--card-color);
--btn-color: var(--color-ink-reversed);
--btn-color: var(--color-ink-inverted);
}
}
}
@@ -102,7 +102,7 @@
.btn:not(.popup__item, .btn--plain) {
--btn-background: var(--card-color);
--btn-color: var(--color-ink-reversed);
--btn-color: var(--color-ink-inverted);
}
.btn--plain {
app/assets/stylesheets/cards.css
+4 -4
View File
@@ -7,7 +7,7 @@
--border-size: 0;
aspect-ratio: var(--card-aspect-ratio, auto);
background-color: color-mix(in srgb, var(--card-color) 4%, var(--color-bg));
background-color: color-mix(in srgb, var(--card-color) 4%, var(--color-canvas));
border-radius: 0.5em;
box-shadow: var(--shadow);
color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
@@ -29,9 +29,9 @@
}
.card--golden.card--doing {
--border-color: var(--color-bg) !important;
--border-color: var(--color-canvas) !important;
background-color: var(--color-bg);
background-color: var(--color-canvas);
background-image: linear-gradient(90deg, oklch(var(--lch-golden) / 0.5) 0%, oklch(var(--lch-golden) / 0.1) 50%, oklch(var(--lch-golden) / 0.75) 100%);
box-shadow:
0 0 0.5em 0.2em var(--color-golden),
@@ -203,7 +203,7 @@
}
.card__closed-title {
color: var(--color-ink-reversed);
color: var(--color-ink-inverted);
font-size: var(--text-rel-large);
font-weight: 900;
text-shadow:
app/assets/stylesheets/events.css
+3 -3
View File
@@ -17,7 +17,7 @@
}
.events__day-header {
background-color: var(--color-bg);
background-color: var(--color-canvas);
block-size: var(--grid-lines);
display: block;
position: relative;
@@ -25,7 +25,7 @@
}
.events__day-header-content {
background-color: var(--color-bg);
background-color: var(--color-canvas);
display: inline-flex;
font-size: 0.8em;
inset: calc(var(--grid-lines) - 1em) auto -1em;
@@ -55,7 +55,7 @@
.events--none {
background-color: var(--color-container);
border-block-start: var(--grid-lines) solid var(--color-bg);
border-block-start: var(--grid-lines) solid var(--color-canvas);
padding-block: 3em;
margin: auto var(--grid-lines) calc(var(--grid-lines) * -1) auto;
}
app/assets/stylesheets/expander.css
+1 -1
View File
@@ -107,6 +107,6 @@
&:hover,
&:focus-visible {
background-color: oklch(var(--lch-white) / 15%);
background-color: oklch(var(--lch-ink-inverted) / 15%);
}
}
app/assets/stylesheets/flash.css
+1 -1
View File
@@ -12,7 +12,7 @@
animation: appear-then-fade 3s 300ms both;
background-color: var(--flash-background, var(--color-ink));
border-radius: 4em;
color: var(--flash-color, var(--color-ink-reversed));
color: var(--flash-color, var(--color-ink-inverted));
display: inline-flex;
font-size: var(--font-size-medium);
margin: 0 auto;
app/assets/stylesheets/house.css
+3 -3
View File
@@ -93,7 +93,7 @@
&[status="failed"] {
background-color: var(--color-negative);
color: var(--color-ink-reversed);
color: var(--color-ink-inverted);
font-weight: bold;
padding: 0.5em;
}
@@ -112,13 +112,13 @@
cursor: pointer;
house-md-upload[status="failed"] & {
color: var(--color-ink-reversed);
color: var(--color-ink-inverted);
display: inline-block;
}
&::before {
content: '×';
color: var(--color-ink-reversed);
color: var(--color-ink-inverted);
font-size: 24px;
font-weight: bold;
position: absolute;
app/assets/stylesheets/inputs.css
+2 -2
View File
@@ -135,7 +135,7 @@
&:has(:focus-visible) {
.switch__btn {
box-shadow:
0 0 0 var(--outline-size) var(--color-bg),
0 0 0 var(--outline-size) var(--color-canvas),
0 0 0 calc(var(--outline-size) * 2) var(--color-ink);
}
}
@@ -156,7 +156,7 @@
transition: 150ms ease;
&::before {
background-color: var(--color-ink-reversed);
background-color: var(--color-ink-inverted);
block-size: 1.35em;
border-radius: 50%;
content: "";
app/assets/stylesheets/lightbox.css
+1 -1
View File
@@ -2,7 +2,7 @@
.lightbox {
--backdrop-speed: 150ms;
background-color: oklch(var(--lch-white) / 0.66);
background-color: oklch(var(--lch-ink-inverted) / 0.66);
block-size: 100dvh;
border: 0;
inline-size: 100dvw;
app/assets/stylesheets/notifications.css
+1 -1
View File
@@ -62,7 +62,7 @@
.notification__unread_indicator {
--btn-background: var(--color-marker);
--btn-border-color: var(--color-bg);
--btn-border-color: var(--color-canvas);
--btn-icon-size: 0.7em;
--btn-padding: 0;
--btn-size: 1.2em;
app/assets/stylesheets/panels.css
+1 -1
View File
@@ -1,6 +1,6 @@
@layer components {
.panel {
background-color: var(--color-bg);
background-color: var(--color-canvas);
border: var(--panel-border-size, 1px) solid var(--panel-border-color, var(--color-subtle));
border-radius: var(--panel-border-radius, 1em);
color: var(--color-ink);
app/assets/stylesheets/pins.css
+1 -1
View File
@@ -30,7 +30,7 @@
--block-space-half: 0.5em;
--text-xx-large: 2em;
border: 1px solid var(--color-bg);
border: 1px solid var(--color-canvas);
}
.card__collection {
app/assets/stylesheets/syntax.css
+1 -1
View File
@@ -83,7 +83,7 @@
}
.err {
color: var(--color-ink-reversed);
color: var(--color-ink-inverted);
background-color: var(--markup-deleted);
}
app/assets/stylesheets/trays.css
+1 -1
View File
@@ -65,7 +65,7 @@
--hover-size: 0;
align-items: center;
color: var(--color-ink-reversed);
color: var(--color-ink-inverted);
display: flex;
gap: var(--inline-space-half);
justify-content: space-between;
app/assets/stylesheets/utilities.css
+3 -3
View File
@@ -14,7 +14,7 @@
.txt-align-end { text-align: end; }
.txt-ink { color: var(--color-ink); }
.txt-reversed { color: var(--color-ink-reversed); }
.txt-reversed { color: var(--color-ink-inverted); }
.txt-negative { color: var(--color-negative); }
.txt-subtle { color: var(--color-subtle-dark); }
.txt-alert { color: var(--color-marker); }
@@ -146,9 +146,9 @@
.position-sticky { position: sticky; inset: var(--inset, 0 auto auto auto); z-index: var(--z, 1); }
/* Fills */
.fill { background-color: var(--color-bg); }
.fill { background-color: var(--color-canvas); }
.fill-black { background-color: var(--color-ink); }
.fill-white { background-color: var(--color-ink-reversed); }
.fill-white { background-color: var(--color-ink-inverted); }
.fill-shade { background-color: var(--color-subtle-light); }
.fill-selected { background-color: var(--color-selected); }
.fill-highlight { background-color: var(--color-highlight); }
app/assets/stylesheets/workflows.css
+2 -2
View File
@@ -20,7 +20,7 @@
.workflow-stage--current {
--btn-background: var(--card-color);
color: var(--color-ink-reversed);
color: var(--color-ink-inverted);
@media (hover: hover) {
&:hover {
@@ -33,7 +33,7 @@
background: var(--card-color);
border-radius: 0.2em;
color: var(--color-ink-reversed);
color: var(--color-ink-inverted);
}
}
}
app/views/events/_event.html.erb
+1 -1
View File
@@ -3,7 +3,7 @@
<%= link_to link,
class: "event event--#{ event.action } panel center center-block flex-inline align-start justify-start gap position-relative",
style: "--card-color: #{ card.color }; background-color: color-mix(in srgb, var(--card-color) 10%, var(--color-bg));
style: "--card-color: #{ card.color }; background-color: color-mix(in srgb, var(--card-color) 10%, var(--color-canvas));
color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));",
data: { related_element_target: "related",
related_element_group_value: card.id,
public/406-unsupported-browser.html
+11 -11
View File
@@ -12,17 +12,17 @@
}
body {
--lch-black: 0% 0 0;
--lch-ink: 0% 0 0;
--lch-gray: 75% 0.005 96;
--lch-white: 100% 0 0;
--lch-ink-inverted: 100% 0 0;
--color-border: oklch(var(--lch-gray));
--color-bg: oklch(var(--lch-white));
--color-text: oklch(var(--lch-black));
--color-canvas: oklch(var(--lch-ink-inverted));
--color-text: oklch(var(--lch-ink));
--btn-size: 2.65em;
background-color: var(--color-bg);
background-color: var(--color-canvas);
block-size: 100dvh;
color: var(--color-text);
display: grid;
@@ -32,9 +32,9 @@
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@media (prefers-color-scheme: dark) {
--lch-black: 100% 0 0;
--lch-gray: 44.95% 0 0;
--lch-white: 0% 0 0;
--lch-ink: 100% 0 0;
--lch-gray: 45% 0 0;
--lch-ink-inverted: 0% 0 0;
}
}
@@ -65,12 +65,12 @@
inline-size: 30dvh;
svg {
fill: var(--color-bg);
fill: var(--color-canvas);
grid-area: 1/1;
max-inline-size: 66%;
@media (prefers-color-scheme: dark) {
fill: var(--color-bg);
fill: var(--color-canvas);
}
}
}
@@ -91,7 +91,7 @@
.btn {
align-items: center;
aspect-ratio: 1;
background-color: var(--color-bg);
background-color: var(--color-canvas);
block-size: var(--btn-size);
border-radius: 50%;
border: 1px solid var(--color-border);