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

Clean up abstractions

Browse Source
This commit is contained in:
Andy Smith
2025-04-17 15:42:17 -05:00
parent 82c2c4b5bd
commit ec7161bde5
28 changed files with 68 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/_global.css
+14 -13
View File
@@ -20,7 +20,7 @@
--text-xx-large: 2.5rem;
/* Borders */
--border: 1px solid var(--color-subtle);
--border: 1px solid var(--color-ink-lighter);
/* Shadows */
--shadow: 0 0 0 1px oklch(var(--lch-black) / 0.02),
@@ -127,27 +127,28 @@
--lch-pink-lighter: 92% 0.03 338;
--lch-pink-lightest: 96% 0.02 336;
/* Color abstractions */
/* Named colors */
--color-black: oklch(var(--lch-black));
--color-white: oklch(var(--lch-white));
--color-canvas: oklch(var(--lch-white));
--color-ink: oklch(var(--lch-ink));
--color-ink: oklch(var(--lch-ink-darkest));
--color-ink-darkest: oklch(var(--lch-ink-darkest));
--color-ink-darker: oklch(var(--lch-ink-darker));
--color-ink-dark: oklch(var(--lch-ink-dark));
--color-ink-medium: oklch(var(--lch-ink-medium));
--color-ink-light: oklch(var(--lch-ink-light));
--color-ink-lighter: oklch(var(--lch-ink-lighter));
--color-ink-lightest: oklch(var(--lch-ink-lightest));
--color-ink-inverted: oklch(var(--lch-ink-inverted));
/* Color abstractions */
--color-canvas: oklch(var(--lch-white));
--color-negative: oklch(var(--lch-red-dark));
--color-positive: oklch(var(--lch-green-medium));
--color-positive-light: oklch(var(--lch-green-lightest));
--color-positive: oklch(var(--lch-green-dark));
--color-link: oklch(var(--lch-blue-dark));
--color-subtle-light: oklch(var(--lch-ink-lightest));
--color-subtle: oklch(var(--lch-ink-lighter));
--color-subtle-dark: oklch(var(--lch-ink-medium));
--color-selected: oklch(var(--lch-blue-lighter));
--color-selected-dark: oklch(var(--lch-blue-light));
--color-highlight: oklch(var(--lch-yellow-lighter));
app/assets/stylesheets/base.css
+1 -1
View File
@@ -11,7 +11,7 @@
--font-sans: system-ui;
--font-serif: ui-serif, serif;
--font-mono: ui-monospace, monospace;
--hover-color: var(--color-subtle-dark);
--hover-color: var(--color-ink-medium);
--hover-size: 0.15rem;
--hover-filter: brightness(1);
app/assets/stylesheets/buttons.css
+1 -1
View File
@@ -6,7 +6,7 @@
align-items: center;
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));
border: var(--btn-border-size, 1px) solid var(--btn-border-color, var(--color-ink-medium));
color: var(--btn-color, var(--color-ink));
cursor: pointer;
display: inline-flex;
app/assets/stylesheets/card-columns.css
+5 -5
View File
@@ -10,7 +10,7 @@
}
.card-columns {
border-block-start: 1px solid var(--color-subtle);
border-block-start: 1px solid var(--color-ink-lighter);
display: grid;
grid-template-columns: repeat(2, 50%);
margin: auto;
@@ -78,11 +78,11 @@
--text-small: 1.1em;
background-color: var(--color-canvas);
box-shadow: 0 0 0 1px var(--color-subtle);
box-shadow: 0 0 0 1px var(--color-ink-lighter);
line-height: 1.2;
@media (prefers-color-scheme: dark) {
box-shadow: 0 0 0 1px var(--color-subtle-dark);
box-shadow: 0 0 0 1px var(--color-ink-medium);
}
.avatar {
@@ -92,7 +92,7 @@
}
.card--drafted {
--card-color: var(--color-subtle-dark) !important;
--card-color: var(--color-ink-medium) !important;
border-color: var(--card-color) !important;
border-style: dashed !important;
@@ -124,7 +124,7 @@
/* -------------------------------------------------------------------------- */
.cards--closed {
border-block-start: 1px solid var(--color-subtle);
border-block-start: 1px solid var(--color-ink-lighter);
justify-content: center;
flex-direction: row;
flex-wrap: wrap;
app/assets/stylesheets/cards.css
+1 -1
View File
@@ -24,7 +24,7 @@
}
@media (prefers-color-scheme: dark) {
--border-color: var(--color-subtle-dark);
--border-color: var(--color-ink-medium);
}
}
app/assets/stylesheets/comment-content.css
+4 -4
View File
@@ -27,7 +27,7 @@
}
:where(hr) {
border-color: var(--color-subtle-dark);
border-color: var(--color-ink-medium);
border-style: var(--border-style, solid) none none;
margin: 2lh auto;
}
@@ -37,8 +37,8 @@
}
:is(pre, code, .pre, .code) {
background-color: var(--color-subtle-light);
border: 1px solid var(--color-subtle);
background-color: var(--color-ink-lightest);
border: 1px solid var(--color-ink-lighter);
border-radius: 0.3em;
font-family: var(--font-mono);
font-size: 0.85em;
@@ -80,7 +80,7 @@
}
:where(table, th, td) {
border: 1px solid var(--color-subtle-dark);
border: 1px solid var(--color-ink-medium);
}
:where(table) {
app/assets/stylesheets/comments.css
+1 -1
View File
@@ -63,7 +63,7 @@
}
.comment__content {
background-color: var(--color-subtle-light);
background-color: var(--color-ink-lightest);
border-radius: 0.2em;
padding:
var(--comment-padding-block)
app/assets/stylesheets/expander.css
+1 -1
View File
@@ -107,6 +107,6 @@
&:hover,
&:focus-visible {
background-color: oklch(var(--lch-ink-inverted) / 15%);
background-color: oklch(var(--lch-canvas) / 15%);
}
}
app/assets/stylesheets/filters.css
+1 -1
View File
@@ -67,7 +67,7 @@
block-size: 100%;
border-block: 0;
border-inline-end: 0;
border-inline-start: 1px solid var(--color-subtle);
border-inline-start: 1px solid var(--color-ink-lighter);
content: "";
display: inline-flex;
inline-size: 0;
app/assets/stylesheets/house.css
+4 -4
View File
@@ -13,7 +13,7 @@
/* Toolbar */
house-md-toolbar {
background-color: inherit;
border-block-end: 1px solid var(--color-subtle-dark);
border-block-end: 1px solid var(--color-ink-medium);
border-radius: 0;
color: currentColor;
display: inline-flex;
@@ -47,7 +47,7 @@
}
&:is(:focus, :hover) {
background-color: var(--color-subtle);
background-color: var(--color-ink-lighter);
}
&:is(:active) {
@@ -139,7 +139,7 @@
.md-progress-bar {
-webkit-appearance: none;
appearance: none;
background-color: var(--color-subtle);
background-color: var(--color-ink-lighter);
border-radius: 0.5em;
block-size: 1ex;
display: block;
@@ -154,7 +154,7 @@
&::-webkit-progress-bar {
border-radius: 0.5em;
background-color: var(--color-subtle);
background-color: var(--color-ink-lighter);
}
&::-webkit-progress-inner-element {
app/assets/stylesheets/inputs.css
+3 -3
View File
@@ -4,7 +4,7 @@
accent-color: var(--input-accent-color, var(--color-ink));
background-color: var(--input-background, transparent);
border-radius: var(--input-border-radius, 0.5em);
border: var(--input-border-size, 1px) solid var(--input-border-color, var(--color-subtle-dark));
border: var(--input-border-size, 1px) solid var(--input-border-color, var(--color-ink-medium));
color: var(--input-color, var(--color-ink));
font-size: max(16px, 1em);
inline-size: 100%;
@@ -148,7 +148,7 @@
}
.switch__btn {
background-color: var(--color-subtle-dark);
background-color: var(--color-ink-medium);
border-radius: 2em;
cursor: pointer;
inset: 0;
@@ -168,7 +168,7 @@
}
.switch__input:disabled + & {
background-color: var(--color-subtle-dark) !important;
background-color: var(--color-ink-medium) !important;
cursor: not-allowed;
}
app/assets/stylesheets/layout.css
+2 -2
View File
@@ -53,7 +53,7 @@
}
a:not([class]) {
background-color: var(--color-subtle-light);
background-color: var(--color-ink-lightest);
border-radius: 2em;
color: var(--color-ink);
font-weight: 500;
@@ -62,7 +62,7 @@
@media (hover: hover) {
&:hover {
background-color: var(--color-subtle);
background-color: var(--color-ink-lighter);
text-decoration: none;
}
}
app/assets/stylesheets/lightbox.css
+1 -1
View File
@@ -2,7 +2,7 @@
.lightbox {
--backdrop-speed: 150ms;
background-color: oklch(var(--lch-ink-inverted) / 0.66);
background-color: oklch(var(--lch-canvas) / 0.66);
block-size: 100dvh;
border: 0;
inline-size: 100dvw;
app/assets/stylesheets/notifications.css
+4 -4
View File
@@ -46,11 +46,11 @@
padding: var(--padding);
@media (prefers-color-scheme: dark) {
--border-color: var(--color-subtle-dark);
--border-color: var(--color-ink-medium);
}
.notificiations-list--read & {
--border-color: var(--color-subtle);
--border-color: var(--color-ink-lighter);
box-shadow: none !important;
}
@@ -78,8 +78,8 @@
@media (hover: hover) {
&:hover {
--btn-background: var(--color-subtle-dark);
--btn-border-color: var(--color-subtle-dark);
--btn-background: var(--color-ink-medium);
--btn-border-color: var(--color-ink-medium);
scale: 1;
app/assets/stylesheets/panels.css
+2 -2
View File
@@ -1,7 +1,7 @@
@layer components {
.panel {
background-color: var(--color-canvas);
border: var(--panel-border-size, 1px) solid var(--panel-border-color, var(--color-subtle));
border: var(--panel-border-size, 1px) solid var(--panel-border-color, var(--color-ink-lighter));
border-radius: var(--panel-border-radius, 1em);
color: var(--color-ink);
inline-size: var(--panel-size, 60ch);
@@ -9,7 +9,7 @@
padding: var(--panel-padding, calc(var(--block-space) * 2));
@media (prefers-color-scheme: dark) {
--panel-border-color: var(--color-subtle-dark);
--panel-border-color: var(--color-ink-medium);
}
}
}
app/assets/stylesheets/popup.css
+2 -2
View File
@@ -17,7 +17,7 @@
}
.popup__item {
--btn-background: var(--color-subtle-light);
--btn-background: var(--color-ink-lightest);
--btn-border-radius: 0.3em;
--btn-border-size: 0;
--btn-font-weight: 500;
@@ -29,7 +29,7 @@
&::after {
border-radius: var(--btn-border-radius);
border: var(--btn-border-size) solid var(--btn-border-color, var(--color-subtle));
border: var(--btn-border-size) solid var(--btn-border-color, var(--color-ink-lighter));
content: "";
display: block;
inline-size: calc(100% - var(--btn-padding) * 2);
app/assets/stylesheets/reactions.css
+3 -3
View File
@@ -1,7 +1,7 @@
@layer components {
.reactions {
--column-gap: 0.4ch;
--reaction-border-color: var(--color-subtle);
--reaction-border-color: var(--color-ink-lighter);
--row-gap: 0;
margin-block-start: calc(var(--block-space-half) / 2);
@@ -30,7 +30,7 @@
@media (any-hover: hover) {
&:where(:not(:active):hover) {
--reaction-border-color: var(--color-subtle-dark);
--reaction-border-color: var(--color-ink-medium);
box-shadow: 0 0 0 var(--hover-size) var(--hover-color);
}
@@ -52,7 +52,7 @@
@media (any-hover: hover) {
&:where(:not(:active):hover) {
--reaction-border-color: var(--color-subtle-dark);
--reaction-border-color: var(--color-ink-medium);
}
}
}
app/assets/stylesheets/syntax.css
+1 -1
View File
@@ -39,7 +39,7 @@
}
.gr {
color: var(--color-subtle-light);
color: var(--color-ink-lightest);
}
.gd {
app/assets/stylesheets/terminals.css
+1 -1
View File
@@ -13,7 +13,7 @@
@media (prefers-color-scheme: dark) {
background-color: var(--color-black);
border-block-start: 1px solid var(--color-subtle-dark);
border-block-start: 1px solid var(--color-ink-medium);
}
.terminal__input {
app/assets/stylesheets/utilities.css
+6 -6
View File
@@ -16,7 +16,7 @@
.txt-ink { color: var(--color-ink); }
.txt-reversed { color: var(--color-ink-inverted); }
.txt-negative { color: var(--color-negative); }
.txt-subtle { color: var(--color-subtle-dark); }
.txt-subtle { color: var(--color-ink-medium); }
.txt-alert { color: var(--color-marker); }
.txt-undecorated { text-decoration: none; }
.txt-tight-lines { line-height: 1.2; }
@@ -149,7 +149,7 @@
.fill { background-color: var(--color-canvas); }
.fill-black { background-color: var(--color-ink); }
.fill-white { background-color: var(--color-ink-inverted); }
.fill-shade { background-color: var(--color-subtle-light); }
.fill-shade { background-color: var(--color-ink-lightest); }
.fill-selected { background-color: var(--color-selected); }
.fill-highlight { background-color: var(--color-highlight); }
.fill-transparent { background-color: transparent; }
@@ -157,10 +157,10 @@
.translucent { opacity: var(--opacity, 0.66); }
/* Borders */
.border { border: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--color-subtle)); }
.border-block { border-block: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--color-subtle)); }
.border-bottom { border-block-end: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--color-subtle)); }
.border-top { border-block-start: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--color-subtle)); }
.border { border: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--color-ink-lighter)); }
.border-block { border-block: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--color-ink-lighter)); }
.border-bottom { border-block-end: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--color-ink-lighter)); }
.border-top { border-block-start: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--color-ink-lighter)); }
.borderless { border: 0; }
/* Border radius */
app/views/collections/_access_toggle.erb
+1 -1
View File
@@ -9,7 +9,7 @@
</div>
</div>
<hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-subtle-dark); --border-style: dashed" aria-hidden="true">
<hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-ink-medium); --border-style: dashed" aria-hidden="true">
<%= icon_tag "check", class: "toggler__visible-when-on" %>
app/views/collections/edit.html.erb
+2 -2
View File
@@ -35,7 +35,7 @@
<div class="overflow-ellipsis fill-shade"><strong>Everyone</strong></div>
</div>
<hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-subtle-dark); --border-style: dashed" aria-hidden="true" />
<hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-ink-medium); --border-style: dashed" aria-hidden="true" />
<label for="collection_all_access" class="switch">
<%= form.check_box :all_access, class: "switch__input", checked: @collection.all_access?, data: { action: "change->toggle-class#toggle" } %>
@@ -44,7 +44,7 @@
</label>
</li>
<hr class="separator--horizontal full-width" style="--border-color: var(--color-subtle-dark);" aria-hidden="true" />
<hr class="separator--horizontal full-width" style="--border-color: var(--color-ink-medium);" aria-hidden="true" />
<% if User.active.count > 20 %>
<input placeholder="Filter…" class="input input--transparent full-width" type="search" autocorrect="off" autocomplete="off" data-1p-ignore="true" data-action="input->filter#filter">
app/views/events/index.html.erb
+2 -2
View File
@@ -19,7 +19,7 @@
<div class="events__container align-start gap">
<div class="txt-align-start">
<h2 class="txt-normal txt-uppercase txt-nowrap">Custom views</h2>
<div style="border-block-start: 1px solid var(--color-subtle); padding-block-start: var(--block-space-half);">
<div style="border-block-start: 1px solid var(--color-ink-lighter); padding-block-start: var(--block-space-half);">
<% @filters.each do |filter| %>
<h3 class="txt-small margin-block-end-half txt-tight-lines">
<%= link_to filter.summary, cards_path(**filter.as_params) %>
@@ -43,7 +43,7 @@
<% end %>
</div>
<div style="border-block-start: 1px solid var(--color-subtle); padding-block-start: var(--block-space-half);">
<div style="border-block-start: 1px solid var(--color-ink-lighter); padding-block-start: var(--block-space-half);">
<% @collections.each do |collection| %>
<h3 class="txt-small margin-block-end-half txt-tight-lines"><%= link_to collection.name, cards_path(collection_ids: [ collection ]) %></h3>
<% end %>
app/views/filters/_dialog.html.erb
+1 -1
View File
@@ -31,7 +31,7 @@
<% end %>
</div>
<%= form_with url: cards_path, id: :filter_form, method: :get, class: "flex flex-column gap full-width", style: "--border-color: var(--color-subtle)" do %>
<%= form_with url: cards_path, id: :filter_form, method: :get, class: "flex flex-column gap full-width", style: "--border-color: var(--color-ink-lighter)" do %>
<% Array(params[:terms]).each do |term| %>
<%= hidden_field_tag "terms[]", term, id: nil %>
<% end %>
app/views/notifications/settings/_collection.html.erb
+1 -1
View File
@@ -4,7 +4,7 @@
<%= collection.name %>
</h2>
<hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-subtle-dark); --border-style: dashed" aria-hidden="true">
<hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-ink-medium); --border-style: dashed" aria-hidden="true">
<label class="switch flex-item-no-shrink">
<%= access_involvement_advance_button(collection, user) %>
app/views/tags/index.html.erb
+1 -1
View File
@@ -2,7 +2,7 @@
<h1>All tags</h1>
<ul class="txt-align-start">
<% @tags.each do |tag| %>
<li class="flex align-start justify-space-between gap pad" style="border-block-end: 1px solid var(--color-subtle)">
<li class="flex align-start justify-space-between gap pad" style="border-block-end: 1px solid var(--color-ink-lighter)">
<span>
<strong class="txt-nowrap"><%= tag.title %></strong>
</span>
app/views/users/_user.html.erb
+1 -1
View File
@@ -5,7 +5,7 @@
<%= link_to user.name, user, class: "txt-ink btn btn--plain" %>
</strong>
<hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-subtle-dark); --border-style: dashed" aria-hidden="true">
<hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-ink-medium); --border-style: dashed" aria-hidden="true">
<%= form_with model: user, url: user_role_path(user), data: { controller: "form" }, method: :patch do | form | %>
<label class="btn txt-small flex-item-no-shrink" for="<%= dom_id(user, :role) %>" arial-label="Role: <%= user.admin? ? "Administrator" : "Member" %>">
app/views/workflows/_workflow.html.erb
+1 -1
View File
@@ -8,7 +8,7 @@
<% end %>
</div>
<hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-subtle-dark);" aria-hidden="true">
<hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-ink-medium);" aria-hidden="true">
<div class="flex flex-column gap margin-block-start">
<%= turbo_frame_tag dom_id(workflow, :stages) do %>