From c39bd244e2fa986b801a87284d57a18498c42111 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Tue, 1 Jul 2025 15:02:25 -0500 Subject: [PATCH 01/17] Scope icon size variable to button --- app/assets/stylesheets/buttons.css | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/app/assets/stylesheets/buttons.css b/app/assets/stylesheets/buttons.css index 34ceab7f4..30236f833 100644 --- a/app/assets/stylesheets/buttons.css +++ b/app/assets/stylesheets/buttons.css @@ -1,7 +1,8 @@ @layer components { .btn { - --transition: 150ms ease; + --icon-size: var(--btn-icon-size, 1.3em); --btn-border-radius: 99rem; + --transition: 150ms ease; align-items: center; background-color: var(--btn-background, var(--color-canvas)); @@ -24,13 +25,6 @@ opacity var( --transition), scale var( --transition); - /* Default icon styles */ - &:where(:has(.icon)) { - --icon-size: var(--btn-icon-size, 1.3em); - - text-align: start; - } - /* With radios and checkboxes */ &:has(input[type=radio]), &:has(input[type=checkbox]) { From 560e9d9d8ff5e51d6a6e006fdf112a74ca3409a2 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Tue, 1 Jul 2025 15:07:53 -0500 Subject: [PATCH 02/17] Separate toggle buttons from main component --- app/assets/stylesheets/buttons.css | 75 +++++++++++++++--------------- app/assets/stylesheets/layout.css | 2 + 2 files changed, 39 insertions(+), 38 deletions(-) diff --git a/app/assets/stylesheets/buttons.css b/app/assets/stylesheets/buttons.css index 30236f833..e8408855d 100644 --- a/app/assets/stylesheets/buttons.css +++ b/app/assets/stylesheets/buttons.css @@ -17,6 +17,7 @@ justify-content: center; padding: var(--btn-padding, 0.5em 1.1em); pointer-events: auto; + position: relative; transition: background-color var( --transition), border var( --transition), @@ -25,44 +26,6 @@ opacity var( --transition), scale var( --transition); - /* With radios and checkboxes */ - &:has(input[type=radio]), - &:has(input[type=checkbox]) { - position: relative; - - :is(input[type=radio]), - :is(input[type=checkbox]) { - --hover-size: 0; - - appearance: none; - border-radius: var(--btn-border-radius); - cursor: pointer; - display: flex; - inset: 0; - margin: 0; - padding: 0; - position: absolute; - - &:focus-visible { - outline: none; - } - } - - .checked { - display: none; - } - } - - &:has(input:checked) { - --btn-background: var(--color-ink); - --btn-color: var(--color-ink-inverted); - --outline-color: var(--color-ink); - - .checked { - display: block; - } - } - &[disabled], &:has([disabled]), [disabled] &[type=submit], @@ -154,6 +117,42 @@ --outline-color: var(--color-ink); } + /* Toggleable buttons + /* ------------------------------------------------------------------------ */ + + .btn { + :is(input[type=radio], input[type=checkbox]) { + --hover-size: 0; + + appearance: none; + border-radius: var(--btn-border-radius); + cursor: pointer; + display: flex; + inset: 0; + margin: 0; + padding: 0; + position: absolute; + + &:focus-visible { + outline: none; + } + } + + .checked { + display: none; + } + + &:has(input:checked) { + --btn-background: var(--color-ink); + --btn-color: var(--color-ink-inverted); + --outline-color: var(--color-ink); + + .checked { + display: block; + } + } + } + /* Button groups /* ------------------------------------------------------------------------ */ diff --git a/app/assets/stylesheets/layout.css b/app/assets/stylesheets/layout.css index 9bf4d4953..40de97e09 100644 --- a/app/assets/stylesheets/layout.css +++ b/app/assets/stylesheets/layout.css @@ -92,7 +92,9 @@ display: none; } } +} +@layer components { .skip-navigation { --left-offset: -999em; From aa67ed0a2c559fb81948c2e6cb4624f91d1f497c Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Tue, 1 Jul 2025 15:09:28 -0500 Subject: [PATCH 03/17] Refactor how link underlines are added --- app/assets/stylesheets/base.css | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/app/assets/stylesheets/base.css b/app/assets/stylesheets/base.css index 8ec590969..10f6ac9f2 100644 --- a/app/assets/stylesheets/base.css +++ b/app/assets/stylesheets/base.css @@ -28,19 +28,22 @@ text-size-adjust: none; } - a:not([class]) { - --hover-size: 0; + a { + text-decoration: none; - color: var(--color-link); - text-decoration: underline; - text-decoration-skip-ink: auto; + &:not([class]) { + --hover-size: 0; + + color: var(--color-link); + text-decoration: underline; + text-decoration-skip-ink: auto; + } } :is(a, button, input, textarea, .switch, .btn) { --outline-size: 2px; caret-color: var(--color-link); - text-decoration: none; touch-action: manipulation; transition: box-shadow 150ms ease, From 380e981a402a73ef6310b0eae2d3a70378da2879 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Tue, 1 Jul 2025 15:41:51 -0500 Subject: [PATCH 04/17] WIP Set up global vars for focus ring --- app/assets/stylesheets/_global.css | 12 ++++++++++ app/assets/stylesheets/base.css | 37 +++++++++++++----------------- app/assets/stylesheets/inputs.css | 2 -- 3 files changed, 28 insertions(+), 23 deletions(-) diff --git a/app/assets/stylesheets/_global.css b/app/assets/stylesheets/_global.css index 59a5b9357..e204e4049 100644 --- a/app/assets/stylesheets/_global.css +++ b/app/assets/stylesheets/_global.css @@ -10,6 +10,10 @@ --block-space-double: calc(var(--block-space) * 2); /* Text */ + --font-sans: system-ui; + --font-serif: ui-serif, serif; + --font-mono: ui-monospace, monospace; + --text-xx-small: 0.55rem; --text-x-small: 0.75rem; --text-small: 0.85rem; @@ -33,6 +37,14 @@ --footer-height: 3.5rem; --tray-size: clamp(12rem, 25dvw, 24rem); + /* Focus & Hover */ + --hover-color: var(--color-ink-medium); + --hover-size: 2px; + + --focus-ring-color: var(--color-link); + --focus-ring-offset: 1px; + --focus-ring-size: 2px; + @media (max-width: 799px) { --tray-size: var(--footer-height); } diff --git a/app/assets/stylesheets/base.css b/app/assets/stylesheets/base.css index 10f6ac9f2..ce8774cd0 100644 --- a/app/assets/stylesheets/base.css +++ b/app/assets/stylesheets/base.css @@ -8,13 +8,6 @@ } body { - --font-sans: system-ui; - --font-serif: ui-serif, serif; - --font-mono: ui-monospace, monospace; - --hover-color: var(--color-ink-medium); - --hover-size: 0.15rem; - --hover-filter: brightness(1); - -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; @@ -41,47 +34,49 @@ } :is(a, button, input, textarea, .switch, .btn) { + touch-action: manipulation; + + /* Keyboard navigation */ + &:where(:focus-visible) { + border-radius: 0.25ch; + outline: var(--focus-ring-size) solid var(--focus-ring-color); + outline-offset: var(--focus-ring-offset); + } + } + + /* Hover + /* ------------------------------------------------------------------------ */ + + /* :is(a, button, input, textarea, .switch, .btn) { --outline-size: 2px; - caret-color: var(--color-link); - touch-action: manipulation; transition: box-shadow 150ms ease, outline-offset 150ms ease, background-color 150ms ease, - opacity 150ms ease, - filter 150ms ease; + opacity 150ms ease; - /* Hover */ @media (any-hover: hover) { &:where(:not(:active):hover) { box-shadow: 0 0 0 var(--hover-size) var(--hover-color); } } - /* Keyboard navigation */ - &:where(:not(:active)):focus-visible { - outline-color: var(--outline-color, currentColor); - outline-width: var(--outline-size); - outline-offset: var(--outline-offset, calc(var(--outline-size) * 2)); - } &:where(:focus-visible):focus, &:where(:focus-visible):active { outline: 0; } - /* Pressing */ &:focus:not(:focus-visible) { --outline-offset: 0; } - /* Disabled */ &:where([disabled]):not(:hover):not(:active) { cursor: not-allowed; filter: brightness(0.75); } - } + } */ ::selection { background-color: var(--color-selected); diff --git a/app/assets/stylesheets/inputs.css b/app/assets/stylesheets/inputs.css index 3acda5855..5b1522385 100644 --- a/app/assets/stylesheets/inputs.css +++ b/app/assets/stylesheets/inputs.css @@ -27,7 +27,6 @@ --outline-size: 0; --outline-color: transparent; - filter: var(--hover-filter); box-shadow: 0 0 0 var(--hover-size) var(--hover-color); } @@ -198,7 +197,6 @@ --hover-color: var(--color-selected-dark); --outline-size: 0; - filter: var(--hover-filter); box-shadow: 0 0 0 var(--hover-size) var(--hover-color); } From 950ee833587ebb201b5e8f013debcbcbec480ec4 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Tue, 1 Jul 2025 16:18:06 -0500 Subject: [PATCH 05/17] Add hover effects to buttons --- app/assets/stylesheets/avatars.css | 6 +++--- app/assets/stylesheets/base.css | 14 +++++++++----- app/assets/stylesheets/buttons.css | 9 ++++++++- app/assets/stylesheets/inputs.css | 13 ++----------- app/views/accounts/settings/_users.html.erb | 2 +- 5 files changed, 23 insertions(+), 21 deletions(-) diff --git a/app/assets/stylesheets/avatars.css b/app/assets/stylesheets/avatars.css index 214ac26f1..ea3a3d4e7 100644 --- a/app/assets/stylesheets/avatars.css +++ b/app/assets/stylesheets/avatars.css @@ -24,9 +24,9 @@ object-fit: cover; } - &:where(a):not(:active):hover { - @media (any-hover: hover) { - filter: brightness(0.7); + @media (any-hover: hover) { + &:where(a):hover { + filter: brightness(0.8); } } } diff --git a/app/assets/stylesheets/base.css b/app/assets/stylesheets/base.css index ce8774cd0..a6e925cf5 100644 --- a/app/assets/stylesheets/base.css +++ b/app/assets/stylesheets/base.css @@ -34,6 +34,8 @@ } :is(a, button, input, textarea, .switch, .btn) { + transition: 100ms ease-out; + transition-property: background-color, border-color, box-shadow, filter, outline; touch-action: manipulation; /* Keyboard navigation */ @@ -42,6 +44,13 @@ outline: var(--focus-ring-size) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); } + + /* Default disabled styles */ + &:where([disabled]) { + cursor: not-allowed; + opacity: 0.5; + pointer-events: none; + } } /* Hover @@ -71,11 +80,6 @@ &:focus:not(:focus-visible) { --outline-offset: 0; } - - &:where([disabled]):not(:hover):not(:active) { - cursor: not-allowed; - filter: brightness(0.75); - } } */ ::selection { diff --git a/app/assets/stylesheets/buttons.css b/app/assets/stylesheets/buttons.css index e8408855d..c81668835 100644 --- a/app/assets/stylesheets/buttons.css +++ b/app/assets/stylesheets/buttons.css @@ -26,6 +26,12 @@ opacity var( --transition), scale var( --transition); + @media (any-hover: hover) { + &:hover { + filter: brightness(0.8); + } + } + &[disabled], &:has([disabled]), [disabled] &[type=submit], @@ -79,7 +85,7 @@ .btn--negative { --btn-background: var(--color-negative); - --btn-border-color: var(--color-canvas); + --btn-border-color: var(--color-negative); --btn-color: var(--color-ink-inverted); --outline-color: var(--color-negative); } @@ -144,6 +150,7 @@ &:has(input:checked) { --btn-background: var(--color-ink); + --btn-border-color: var(--color-ink); --btn-color: var(--color-ink-inverted); --outline-color: var(--color-ink); diff --git a/app/assets/stylesheets/inputs.css b/app/assets/stylesheets/inputs.css index 5b1522385..761150254 100644 --- a/app/assets/stylesheets/inputs.css +++ b/app/assets/stylesheets/inputs.css @@ -21,17 +21,8 @@ -webkit-box-shadow: 0 0 0px 1000px var(--color-selected) inset; } - &:where(:not(:active)):focus { - --input-border-color: var(--color-selected-dark); - --hover-color: var(--color-selected-dark); - --outline-size: 0; - --outline-color: transparent; - - box-shadow: 0 0 0 var(--hover-size) var(--hover-color); - } - - &:where([disabled]):not(:hover):not(:active) { - filter: none; + &:where(:focus) { + --focus-ring-offset: -1px; } } diff --git a/app/views/accounts/settings/_users.html.erb b/app/views/accounts/settings/_users.html.erb index 550715545..ba6e96cc6 100644 --- a/app/views/accounts/settings/_users.html.erb +++ b/app/views/accounts/settings/_users.html.erb @@ -7,7 +7,7 @@ -
+
<%= render partial: "accounts/user", collection: users %>
From 06706a78d8dda5191f21e774617e5cedea3809c1 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Tue, 1 Jul 2025 16:26:48 -0500 Subject: [PATCH 06/17] Subtler hover for buttons --- app/assets/stylesheets/avatars.css | 6 ------ app/assets/stylesheets/buttons.css | 17 ++++++++--------- 2 files changed, 8 insertions(+), 15 deletions(-) diff --git a/app/assets/stylesheets/avatars.css b/app/assets/stylesheets/avatars.css index ea3a3d4e7..16435981e 100644 --- a/app/assets/stylesheets/avatars.css +++ b/app/assets/stylesheets/avatars.css @@ -23,12 +23,6 @@ max-inline-size: 100%; object-fit: cover; } - - @media (any-hover: hover) { - &:where(a):hover { - filter: brightness(0.8); - } - } } .avatar__form { diff --git a/app/assets/stylesheets/buttons.css b/app/assets/stylesheets/buttons.css index c81668835..3ee2b1af6 100644 --- a/app/assets/stylesheets/buttons.css +++ b/app/assets/stylesheets/buttons.css @@ -2,7 +2,6 @@ .btn { --icon-size: var(--btn-icon-size, 1.3em); --btn-border-radius: 99rem; - --transition: 150ms ease; align-items: center; background-color: var(--btn-background, var(--color-canvas)); @@ -18,17 +17,12 @@ padding: var(--btn-padding, 0.5em 1.1em); pointer-events: auto; position: relative; - transition: - background-color var( --transition), - border var( --transition), - color var( --transition), - filter var( --transition), - opacity var( --transition), - scale var( --transition); + transition: 100ms ease-out; + transition-property: background-color, border, color, filter, opacity, scale; @media (any-hover: hover) { &:hover { - filter: brightness(0.8); + filter: brightness(0.85); } } @@ -148,6 +142,11 @@ display: none; } + &:has(input:focus-visible) { + outline: var(--focus-ring-size) solid var(--focus-ring-color); + outline-offset: var(--focus-ring-offset); + } + &:has(input:checked) { --btn-background: var(--color-ink); --btn-border-color: var(--color-ink); From f901f1a82a3f098d2c88afabfacb6f6d0c5118d9 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Tue, 1 Jul 2025 16:33:45 -0500 Subject: [PATCH 07/17] Handle dark mode --- app/assets/stylesheets/buttons.css | 12 +++++++++++- app/assets/stylesheets/card-perma.css | 5 +++-- 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/app/assets/stylesheets/buttons.css b/app/assets/stylesheets/buttons.css index 3ee2b1af6..885d296a3 100644 --- a/app/assets/stylesheets/buttons.css +++ b/app/assets/stylesheets/buttons.css @@ -2,6 +2,7 @@ .btn { --icon-size: var(--btn-icon-size, 1.3em); --btn-border-radius: 99rem; + --btn-hover-brightness: 0.9; align-items: center; background-color: var(--btn-background, var(--color-canvas)); @@ -22,10 +23,14 @@ @media (any-hover: hover) { &:hover { - filter: brightness(0.85); + filter: brightness(var(--btn-hover-brightness)); } } + @media (prefers-color-scheme: dark) { + --btn-hover-brightness: 1.5; + } + &[disabled], &:has([disabled]), [disabled] &[type=submit], @@ -114,7 +119,12 @@ --btn-background: var(--color-ink); --btn-border-color: var(--color-canvas); --btn-color: var(--color-canvas); + --btn-hover-brightness: 2; --outline-color: var(--color-ink); + + @media (prefers-color-scheme: dark) { + --btn-hover-brightness: 0.8; + } } /* Toggleable buttons diff --git a/app/assets/stylesheets/card-perma.css b/app/assets/stylesheets/card-perma.css index 9a4de11ed..13933d9da 100644 --- a/app/assets/stylesheets/card-perma.css +++ b/app/assets/stylesheets/card-perma.css @@ -48,10 +48,10 @@ .collection-picker__button { --btn-border-size: 0; - + font-size: 0.5em; margin-inline-start: 1ch; - + + .panel { --panel-size: 18ch; } @@ -152,6 +152,7 @@ &:has(input:checked) { --btn-background: var(--card-color); + --btn-border-color: var(--card-color); --btn-color: var(--color-ink-inverted); } } From 6f40afcfae61d9be93fd1887466986fc2308bc55 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Tue, 1 Jul 2025 16:42:47 -0500 Subject: [PATCH 08/17] Ensure avatar image size takes up the whole container --- app/assets/stylesheets/avatars.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/avatars.css b/app/assets/stylesheets/avatars.css index 16435981e..fd193d12f 100644 --- a/app/assets/stylesheets/avatars.css +++ b/app/assets/stylesheets/avatars.css @@ -16,10 +16,10 @@ :is(img, .icon) { aspect-ratio: 1; - block-size: auto; + block-size: 100%; border-radius: var(--avatar-border-radius); grid-area: 1/1; - inline-size: var(--avatar-size, var(--avatar-size-default)); + inline-size: 100%; max-inline-size: 100%; object-fit: cover; } From 9250c19e94bd0a6fb397cf4b069b7943c13231d9 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Tue, 1 Jul 2025 16:58:57 -0500 Subject: [PATCH 09/17] Hover effect for collection picker on cards --- app/assets/stylesheets/cards.css | 11 +++++++++++ app/assets/stylesheets/fizzy-menu.css | 9 ++++++++- app/assets/stylesheets/workflows.css | 4 ++-- 3 files changed, 21 insertions(+), 3 deletions(-) diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css index 9595b98ee..8700aa23f 100644 --- a/app/assets/stylesheets/cards.css +++ b/app/assets/stylesheets/cards.css @@ -64,6 +64,17 @@ max-inline-size: 100%; min-inline-size: 0; padding: var(--block-space-half) var(--inline-space) var(--block-space-half) var(--card-padding-inline); + + &:has(.collection-picker__button) { + cursor: pointer; + transition: background-color: 100ms ease-out; + + @media (any-hover: hover) { + &:hover { + background-color: color-mix(in srgb, var(--card-color) 90%, var(--color-ink)); + } + } + } } .card__collection-name { diff --git a/app/assets/stylesheets/fizzy-menu.css b/app/assets/stylesheets/fizzy-menu.css index bead9d38a..fa29fe8b6 100644 --- a/app/assets/stylesheets/fizzy-menu.css +++ b/app/assets/stylesheets/fizzy-menu.css @@ -14,12 +14,19 @@ --input-border-color: var(--color-selected-dark); --input-padding: 0.2em 2em 0.2em 0.9em; + background-color: var(--color-canvas); box-shadow: 0 0 0 1px oklch(var(--lch-blue-medium) / 5%), 0 0.2em 0.2em oklch(var(--lch-blue-medium) / 5%), 0 0.4em 0.4em oklch(var(--lch-blue-medium) / 5%), 0 0.8em 0.8em oklch(var(--lch-blue-medium) / 5%); margin-block-start: 0.1em; + @media (any-hover: hover) { + &:hover { + filter: brightness(0.9); + } + } + svg { block-size: auto; inline-size: 1.1em; @@ -69,4 +76,4 @@ } } } -} \ No newline at end of file +} diff --git a/app/assets/stylesheets/workflows.css b/app/assets/stylesheets/workflows.css index 2486b99fa..986a1f4f8 100644 --- a/app/assets/stylesheets/workflows.css +++ b/app/assets/stylesheets/workflows.css @@ -11,7 +11,7 @@ @media (hover: hover) { &:hover { - background-color: color(from var(--card-color) srgb r g b / 0.15); + --btn-background: color(from var(--card-color) srgb r g b / 0.15); } } } @@ -23,7 +23,7 @@ @media (hover: hover) { &:hover { - background-color: color(from var(--card-color) srgb r g b / 0.65); + --btn-background: var(--card-color); } } } From 624dc823c43fe979e8d55b9ed471d3059495de52 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Tue, 1 Jul 2025 17:16:09 -0500 Subject: [PATCH 10/17] Make card column filters interactive --- app/assets/stylesheets/card-columns.css | 12 ++++++++---- app/views/cards/index/_closure_filter.html.erb | 2 +- app/views/cards/index/_workflow_filter.html.erb | 4 ++-- 3 files changed, 11 insertions(+), 7 deletions(-) diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index bdbad0bcc..8e5acf159 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -114,6 +114,7 @@ /* ------------------------------------------------------------------------ */ .cards__heading { + background-color: var(--color-canvas); display: flex; font-size: var(--text-medium); @@ -125,17 +126,20 @@ position: sticky; z-index: 2; - &, button { + &, .cards__filter { font-weight: bold; text-transform: uppercase; } - button { + .cards__filter { + --filter-block-padding: 0.5rem; --hover-size: 0; + background-color: var(--color-canvas); + border-radius: 99rem; inline-size: auto; - margin-inline-start: 2em; - padding: 0 2em 0 0; + margin-block: calc(-1 * var(--filter-block-padding)); + padding-block: var(--filter-block-padding); } dialog { diff --git a/app/views/cards/index/_closure_filter.html.erb b/app/views/cards/index/_closure_filter.html.erb index da5b5bf22..49116a255 100644 --- a/app/views/cards/index/_closure_filter.html.erb +++ b/app/views/cards/index/_closure_filter.html.erb @@ -1,5 +1,5 @@
- diff --git a/app/views/cards/index/_workflow_filter.html.erb b/app/views/cards/index/_workflow_filter.html.erb index d453917d5..e0f9dea0b 100644 --- a/app/views/cards/index/_workflow_filter.html.erb +++ b/app/views/cards/index/_workflow_filter.html.erb @@ -1,5 +1,5 @@ -
- From 4bc1b36d3d4f3d389f805f405fb6fd2c80a03fa8 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Wed, 2 Jul 2025 16:14:34 -0500 Subject: [PATCH 13/17] Clean up --hover variables --- app/assets/stylesheets/_global.css | 3 -- app/assets/stylesheets/actiontext-lexical.css | 16 +++++----- app/assets/stylesheets/avatars.css | 3 +- app/assets/stylesheets/base.css | 31 ------------------- app/assets/stylesheets/buttons.css | 12 ++----- app/assets/stylesheets/cards.css | 15 +++++---- app/assets/stylesheets/events.css | 5 +-- app/assets/stylesheets/expander.css | 10 +++--- app/assets/stylesheets/inputs.css | 7 ++--- app/assets/stylesheets/knobs.css | 5 ++- app/assets/stylesheets/markdown.css | 1 - app/assets/stylesheets/popup.css | 19 +++++------- app/assets/stylesheets/reactions.css | 16 ++++------ app/assets/stylesheets/rich-text-content.css | 6 ---- app/assets/stylesheets/terminals.css | 3 -- app/assets/stylesheets/trays.css | 3 -- app/assets/stylesheets/utilities.css | 4 +++ app/assets/stylesheets/workflows.css | 2 -- .../comments/reactions/_reaction.html.erb | 2 +- app/views/cards/edit.html.erb | 2 +- app/views/commands/_form.html.erb | 2 +- 21 files changed, 51 insertions(+), 116 deletions(-) diff --git a/app/assets/stylesheets/_global.css b/app/assets/stylesheets/_global.css index e204e4049..315a2ebb1 100644 --- a/app/assets/stylesheets/_global.css +++ b/app/assets/stylesheets/_global.css @@ -38,9 +38,6 @@ --tray-size: clamp(12rem, 25dvw, 24rem); /* Focus & Hover */ - --hover-color: var(--color-ink-medium); - --hover-size: 2px; - --focus-ring-color: var(--color-link); --focus-ring-offset: 1px; --focus-ring-size: 2px; diff --git a/app/assets/stylesheets/actiontext-lexical.css b/app/assets/stylesheets/actiontext-lexical.css index c75cc7018..fe44c76de 100644 --- a/app/assets/stylesheets/actiontext-lexical.css +++ b/app/assets/stylesheets/actiontext-lexical.css @@ -6,12 +6,12 @@ .node--selected:not(.attachment--custom) { &:not(:has(img)) { - box-shadow: 0 0 0 var(--hover-size) var(--hover-color); + box-shadow: 0 0 0 var(--focus-ring-size) var(--focus-ring-color); } &:has(img) { img { - box-shadow: 0 0 0 var(--hover-size) var(--hover-color); + box-shadow: 0 0 0 var(--focus-ring-size) var(--focus-ring-color); } } } @@ -172,15 +172,11 @@ padding: var(--lexical-prompt-padding); &:hover { - background-color: var(--color-selected); + background-color: var(--color-ink-lightest); } &[aria-selected] { - box-shadow: 0 0 0 var(--hover-size) var(--color-selected-dark) inset; - - &:hover { - --hover-size: 0; - } + background-color: var(--color-selected); } img { @@ -190,6 +186,10 @@ inline-size: var(--lexical-prompt-avatar-size); margin: 0; } + + + & { + margin-top: 2px; + } } /* Empty state */ diff --git a/app/assets/stylesheets/avatars.css b/app/assets/stylesheets/avatars.css index fd193d12f..e3f15d4ab 100644 --- a/app/assets/stylesheets/avatars.css +++ b/app/assets/stylesheets/avatars.css @@ -2,8 +2,7 @@ .avatar { --avatar-border-radius: 50%; --avatar-size-default: 5ch; - --btn-border-size: 0; - --hover-size: 0; + --btn-border-size: 0; aspect-ratio: 1; block-size: var(--avatar-size, var(--avatar-size-default)); diff --git a/app/assets/stylesheets/base.css b/app/assets/stylesheets/base.css index a6e925cf5..3971e9a95 100644 --- a/app/assets/stylesheets/base.css +++ b/app/assets/stylesheets/base.css @@ -25,8 +25,6 @@ text-decoration: none; &:not([class]) { - --hover-size: 0; - color: var(--color-link); text-decoration: underline; text-decoration-skip-ink: auto; @@ -53,35 +51,6 @@ } } - /* Hover - /* ------------------------------------------------------------------------ */ - - /* :is(a, button, input, textarea, .switch, .btn) { - --outline-size: 2px; - - transition: - box-shadow 150ms ease, - outline-offset 150ms ease, - background-color 150ms ease, - opacity 150ms ease; - - @media (any-hover: hover) { - &:where(:not(:active):hover) { - box-shadow: 0 0 0 var(--hover-size) var(--hover-color); - } - } - - - &:where(:focus-visible):focus, - &:where(:focus-visible):active { - outline: 0; - } - - &:focus:not(:focus-visible) { - --outline-offset: 0; - } - } */ - ::selection { background-color: var(--color-selected); } diff --git a/app/assets/stylesheets/buttons.css b/app/assets/stylesheets/buttons.css index 885d296a3..2cc074617 100644 --- a/app/assets/stylesheets/buttons.css +++ b/app/assets/stylesheets/buttons.css @@ -19,7 +19,7 @@ pointer-events: auto; position: relative; transition: 100ms ease-out; - transition-property: background-color, border, color, filter, opacity, scale; + transition-property: background-color, border, box-shadow, color, filter, opacity, scale; @media (any-hover: hover) { &:hover { @@ -28,7 +28,7 @@ } @media (prefers-color-scheme: dark) { - --btn-hover-brightness: 1.5; + --btn-hover-brightness: 1.25; } &[disabled], @@ -55,7 +55,6 @@ --btn-color: inherit; --btn-icon-size: 100%; --btn-padding: 0; - --hover-size: 0; --outline-size: 0; } @@ -119,12 +118,7 @@ --btn-background: var(--color-ink); --btn-border-color: var(--color-canvas); --btn-color: var(--color-canvas); - --btn-hover-brightness: 2; --outline-color: var(--color-ink); - - @media (prefers-color-scheme: dark) { - --btn-hover-brightness: 0.8; - } } /* Toggleable buttons @@ -132,8 +126,6 @@ .btn { :is(input[type=radio], input[type=checkbox]) { - --hover-size: 0; - appearance: none; border-radius: var(--btn-border-radius); cursor: pointer; diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css index 8700aa23f..da83fde2c 100644 --- a/app/assets/stylesheets/cards.css +++ b/app/assets/stylesheets/cards.css @@ -150,8 +150,6 @@ } .card__link { - --hover-size: 0; - content: ""; inset: 0; position: absolute; @@ -179,7 +177,6 @@ } .card__title { - --hover-size: 0; --input-border-radius: 0; --input-color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink)); --lines: 3; @@ -215,10 +212,17 @@ --btn-icon-size: 1em; --card-padding-block: calc(var(--block-space) * 1.25); - box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-link) 20%, var(--color-canvas)); + box-shadow: 0 0 0 1px oklch(var(--lch-blue-lighter)); color: var(--btn-color); font-weight: 700; - transition: none; + transition: box-shadow 100ms ease-out; + + @media (any-hover: hover) { + &:hover { + filter: none; + box-shadow: 0 0 0 1px oklch(var(--lch-blue-lighter)), var(--shadow); + } + } } .card__move-button { @@ -404,7 +408,6 @@ --btn-icon-size: 0.75em; --btn-padding: 0; --btn-size: 1.25em; - --hover-size: 0; position: relative; z-index: 1; diff --git a/app/assets/stylesheets/events.css b/app/assets/stylesheets/events.css index 1d7f2264c..54bc73484 100644 --- a/app/assets/stylesheets/events.css +++ b/app/assets/stylesheets/events.css @@ -198,10 +198,7 @@ } .event--related { - --hover-color: var(--card-color); - --hover-size: 0.15rem; - - box-shadow: 0 0 0 var(--hover-size) var(--hover-color); + box-shadow: 0 0 0 0.15rem var(--card-color); } .event__content { diff --git a/app/assets/stylesheets/expander.css b/app/assets/stylesheets/expander.css index 291851b34..2d7f8d145 100644 --- a/app/assets/stylesheets/expander.css +++ b/app/assets/stylesheets/expander.css @@ -30,7 +30,7 @@ } [open] & { - box-shadow: none; + filter: none; } .icon { @@ -44,6 +44,7 @@ align-items: stretch; border-radius: var(--expander-radius); flex-direction: column; + filter: none; gap: 0; padding-block-start: var(--expander-height); @@ -92,12 +93,11 @@ } .expander__item { - --btn-background: transparent; + --btn-background: var(--card-color); --btn-border-radius: 0.3em; --btn-border-size: 0; --btn-font-weight: 500; --btn-padding: var(--inline-space-half) var(--inline-space); - --hover-size: 0; --outline-color: transparent; inline-size: calc(100% + var(--inline-space-double)); @@ -105,8 +105,8 @@ justify-content: flex-start; white-space: nowrap; - &:hover, + /* &:hover, &:focus-visible { background-color: oklch(var(--lch-canvas) / 15%); - } + } */ } diff --git a/app/assets/stylesheets/inputs.css b/app/assets/stylesheets/inputs.css index 761150254..a219b3575 100644 --- a/app/assets/stylesheets/inputs.css +++ b/app/assets/stylesheets/inputs.css @@ -181,14 +181,13 @@ /* Containers that act like (and contain) inputs */ .input--actor { + outline-offset: -1px; transition: box-shadow 150ms ease, outline-offset 150ms ease; &:focus-within { --input-border-color: var(--color-selected-dark); - --hover-color: var(--color-selected-dark); - --outline-size: 0; - box-shadow: 0 0 0 var(--hover-size) var(--hover-color); + outline: var(--focus-ring-size) solid var(--focus-ring-color); } .input { @@ -196,7 +195,6 @@ --input-border-radius: 0; --input-background: transparent; --input-border-size: 0; - --hover-size: 0; --outline-size: 0; --outline-color: transparent; @@ -222,7 +220,6 @@ } .input.boost__input { - --hover-size: 0; --input-border-radius: 0; --input-border-size: 0; --input-padding: 0; diff --git a/app/assets/stylesheets/knobs.css b/app/assets/stylesheets/knobs.css index 390fa6d5a..cf73d217b 100644 --- a/app/assets/stylesheets/knobs.css +++ b/app/assets/stylesheets/knobs.css @@ -19,8 +19,6 @@ } .knob__slider { - --hover-size: 0; - appearance: none; background-color: transparent; block-size: var(--knob-size); @@ -75,7 +73,8 @@ } &:has(:focus-visible) { - box-shadow: 0 0 0 2px var(--knob-color); + outline: var(--focus-ring-size) solid var(--focus-ring-color); + outline-offset: 0; } /* Tick marks */ diff --git a/app/assets/stylesheets/markdown.css b/app/assets/stylesheets/markdown.css index 3e91fb41e..5dfac832c 100644 --- a/app/assets/stylesheets/markdown.css +++ b/app/assets/stylesheets/markdown.css @@ -1,6 +1,5 @@ @layer components { .heading__link { - --hover-size: 0; --opacity: 0.5; --size: 0.8em; diff --git a/app/assets/stylesheets/popup.css b/app/assets/stylesheets/popup.css index 8e9edcea5..216afb5e0 100644 --- a/app/assets/stylesheets/popup.css +++ b/app/assets/stylesheets/popup.css @@ -59,14 +59,18 @@ @media (any-hover: hover) { &:hover { - --hover-size: 0; - - background: var(--color-selected); + background: var(--color-ink-lightest); } } &[aria-selected] { - box-shadow: 0 0 0 var(--hover-size) var(--color-selected-dark) inset; + background-color: var(--color-selected); + + @media (any-hover: hover) { + &:hover { + background-color: var(--color-selected); + } + } } } @@ -76,7 +80,6 @@ --btn-border-size: 0; --btn-font-weight: 500; --btn-padding: var(--inline-space-half) 0 var(--inline-space-half) var(--inline-space); - --hover-size: 0; --outline-color: transparent; flex: 1 1 auto; @@ -90,11 +93,6 @@ } } - &[aria-selected] { - border-radius: 0.3em; - box-shadow: 0 0 0 var(--hover-size) var(--color-selected-dark) inset; - } - &:has(input:checked) { --btn-background: transparent; --btn-color: var(--color-ink); @@ -110,7 +108,6 @@ @media (any-hover: hover) { &:where(:not(:active):hover) { - --hover-size: 0; --btn-background: var(--color-selected); } } diff --git a/app/assets/stylesheets/reactions.css b/app/assets/stylesheets/reactions.css index 22454ca51..1405d3895 100644 --- a/app/assets/stylesheets/reactions.css +++ b/app/assets/stylesheets/reactions.css @@ -26,6 +26,7 @@ .reaction { --btn-size: 100%; + --reaction-hover-brightness: 0.9; align-items: center; background-color: var(--color-canvas); @@ -51,18 +52,13 @@ @media (any-hover: hover) { &:not(:active):hover { - --reaction-border-color: var(--color-ink-medium); + filter: brightness(var(--reaction-hover-brightness)); - box-shadow: 0 0 0 var(--hover-size) var(--hover-color); + @media (prefers-color-scheme: dark) { + --reaction-hover-brightness: 1.25; + } } } - - &:has(.reaction__input):focus-within { - --hover-color: var(--color-selected-dark); - --reaction-border-color: var(--color-selected-dark); - - box-shadow: 0 0 0 var(--hover-size) var(--hover-color); - } } /* Make the avatar and delete buttons fit nicely within the reaction */ @@ -74,6 +70,7 @@ .reaction__delete { display: none; + translate: 0.25em; .expanded & { display: flex; @@ -95,7 +92,6 @@ } .reaction__input { - --hover-size: 0; --input-background: transparent; --input-border-size: 0; --input-padding: 0; diff --git a/app/assets/stylesheets/rich-text-content.css b/app/assets/stylesheets/rich-text-content.css index e78805f95..4a6d3dba6 100644 --- a/app/assets/stylesheets/rich-text-content.css +++ b/app/assets/stylesheets/rich-text-content.css @@ -101,10 +101,6 @@ } } - .attachment__figure { - --hover-size: 0; - } - .attachment--file { align-items: center; display: inline-flex; @@ -214,8 +210,6 @@ } .attachment__link { - --hover-size: 0; - color: var(--color-link); text-decoration: underline; } diff --git a/app/assets/stylesheets/terminals.css b/app/assets/stylesheets/terminals.css index 58f1f3de6..dd4459715 100644 --- a/app/assets/stylesheets/terminals.css +++ b/app/assets/stylesheets/terminals.css @@ -23,8 +23,6 @@ --btn-border-color: var(--color-terminal-text); --btn-padding: 0.1em 0.7em; --btn-border-size: 1px; - --hover-color: var(--color-terminal-text); - --hover-size: 1px; font-family: var(--font-mono); font-size: var(--text-x-small); @@ -95,7 +93,6 @@ .terminal__input:is(.input) { --input-border-color: transparent; --input-border-radius: 0.3em; - --hover-color: transparent; --input-color: var(--color-terminal-text); --outline-size: 0; --outline-color: transparent; diff --git a/app/assets/stylesheets/trays.css b/app/assets/stylesheets/trays.css index d90c56ea8..dfd22536d 100644 --- a/app/assets/stylesheets/trays.css +++ b/app/assets/stylesheets/trays.css @@ -63,7 +63,6 @@ /* ------------------------------------------------------------------------ */ .tray__expander { - --hover-size: 0; --outline-size: 0; align-self: stretch; @@ -116,8 +115,6 @@ /* ------------------------------------------------------------------------ */ .tray__actions { - --hover-size: 0; - align-self: center; align-items: stretch; border: 1px dashed oklch(var(--lch-white) / 50%); diff --git a/app/assets/stylesheets/utilities.css b/app/assets/stylesheets/utilities.css index 741e417d7..65ec98fcf 100644 --- a/app/assets/stylesheets/utilities.css +++ b/app/assets/stylesheets/utilities.css @@ -218,4 +218,8 @@ /* Visibility */ [hidden] { display: none !important; } [contents] { display: contents; } + + .hide-focus-ring { + --focus-ring-size: 0; + } } diff --git a/app/assets/stylesheets/workflows.css b/app/assets/stylesheets/workflows.css index 5200fc207..2dc043584 100644 --- a/app/assets/stylesheets/workflows.css +++ b/app/assets/stylesheets/workflows.css @@ -4,7 +4,6 @@ --btn-padding: 0.2em 0.5em; --btn-border-size: 0; --btn-border-radius: 0.2em; - --hover-size: 0; color: inherit; inline-size: 100%; @@ -73,7 +72,6 @@ --btn-size: 1em; --btn-border-radius: 50%; --btn-border-size: 0; - --hover-size: 0; cursor: auto; } diff --git a/app/views/cards/comments/reactions/_reaction.html.erb b/app/views/cards/comments/reactions/_reaction.html.erb index 8f5c121a6..621b8406a 100644 --- a/app/views/cards/comments/reactions/_reaction.html.erb +++ b/app/views/cards/comments/reactions/_reaction.html.erb @@ -17,7 +17,7 @@ <%= button_to card_comment_reaction_path(reaction.comment.card, reaction.comment, reaction), method: :delete, - class: "btn btn--negative flex-item-justify-end reaction__delete", + class: "reaction__delete btn btn--negative flex-item-justify-end", data: { action: "reaction-delete#perform", reaction_delete_target: "button" } do %> <%= icon_tag "minus" %> Delete this reaction diff --git a/app/views/cards/edit.html.erb b/app/views/cards/edit.html.erb index e438dbbdb..8cf623422 100644 --- a/app/views/cards/edit.html.erb +++ b/app/views/cards/edit.html.erb @@ -2,7 +2,7 @@ <%= form_with model: @card, url: collection_card_path(@card.collection, @card), class: "card__content", data: { controller: "autoresize form" } do |form| %>

<%= form.label :title, class: "flex flex-column align-center autoresize__wrapper", data: { autoresize_target: "wrapper", autoresize_clone_value: "" } do %> - <%= form.text_area :title, class: "input input--textarea full-width borderless txt-align-start card-field__title autoresize__textarea", + <%= form.text_area :title, class: "card-field__title input input--textarea hide-focus-ring full-width borderless txt-align-start autoresize__textarea", required: true, autofocus: true, placeholder: "Name it…", rows: 1, data: { autoresize_target: "textarea", action: "input->autoresize#resize keydown.enter->form#submit:prevent keydown.ctrl+enter->form#submit:prevent keydown.meta+enter->form#submit:prevent keydown.esc->form#cancel focus->form#select" } %> <% end %> diff --git a/app/views/commands/_form.html.erb b/app/views/commands/_form.html.erb index afd59d6a0..9acb63a95 100644 --- a/app/views/commands/_form.html.erb +++ b/app/views/commands/_form.html.erb @@ -12,7 +12,7 @@ autocomplete: "off", autocorrect: "off", autocapitalize: "off", - class: "terminal__input input fill-transparent unpad", + class: "terminal__input input hide-focus-ring fill-transparent unpad", data: { terminal_target: "input", action: "keydown.up->toggle-class#add:prevent keydown.up->navigable-list#selectCurrentOrReset:stop terminal#hideError" From a07c827cdf6c57924efcef82227004fcc3fcbab8 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Wed, 2 Jul 2025 16:15:16 -0500 Subject: [PATCH 14/17] Clarify comment --- app/assets/stylesheets/_global.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/stylesheets/_global.css b/app/assets/stylesheets/_global.css index 315a2ebb1..1431f23e8 100644 --- a/app/assets/stylesheets/_global.css +++ b/app/assets/stylesheets/_global.css @@ -37,7 +37,7 @@ --footer-height: 3.5rem; --tray-size: clamp(12rem, 25dvw, 24rem); - /* Focus & Hover */ + /* Focus rings for keyboard navigation */ --focus-ring-color: var(--color-link); --focus-ring-offset: 1px; --focus-ring-size: 2px; From 7c30fd66747d226fa7aaa5f86c0e7b4c9f5edc4c Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Wed, 2 Jul 2025 16:18:12 -0500 Subject: [PATCH 15/17] Focus ring for collection select --- app/assets/stylesheets/cards.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css index da83fde2c..2a228094f 100644 --- a/app/assets/stylesheets/cards.css +++ b/app/assets/stylesheets/cards.css @@ -74,6 +74,11 @@ background-color: color-mix(in srgb, var(--card-color) 90%, var(--color-ink)); } } + + &:has(.btn:focus-visible) { + outline: var(--focus-ring-size) solid var(--focus-ring-color); + outline-offset: var(--focus-ring-offset); + } } } From a2f9339cdb05b0eccb13d555bdd7b7c5fd4e16a4 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Wed, 2 Jul 2025 16:40:59 -0500 Subject: [PATCH 16/17] Remove unused --outline vars --- app/assets/stylesheets/actiontext-lexical.css | 4 +--- app/assets/stylesheets/buttons.css | 11 +++++------ app/assets/stylesheets/expander.css | 1 - app/assets/stylesheets/inputs.css | 8 ++------ app/assets/stylesheets/popup.css | 1 - app/assets/stylesheets/reactions.css | 6 +++++- app/assets/stylesheets/terminals.css | 2 -- app/assets/stylesheets/trays.css | 2 -- 8 files changed, 13 insertions(+), 22 deletions(-) diff --git a/app/assets/stylesheets/actiontext-lexical.css b/app/assets/stylesheets/actiontext-lexical.css index fe44c76de..eb84701f1 100644 --- a/app/assets/stylesheets/actiontext-lexical.css +++ b/app/assets/stylesheets/actiontext-lexical.css @@ -45,7 +45,7 @@ &:is([type="submit"]) { --btn-background: var(--card-color, var(--color-link)); --btn-color: var(--color-ink-inverted); - --outline-color: var(--card-color, var(--color-link)); + --focus-ring-color: var(--card-color, var(--color-link)); } } @@ -55,8 +55,6 @@ } .lexical-editor__content { - --outline-size: max(2px, 0.08em); - margin: var(--block-space-half) 0; min-block-size: calc(7lh + var(--block-space)); outline: 0; diff --git a/app/assets/stylesheets/buttons.css b/app/assets/stylesheets/buttons.css index 2cc074617..cc8e2186b 100644 --- a/app/assets/stylesheets/buttons.css +++ b/app/assets/stylesheets/buttons.css @@ -55,14 +55,13 @@ --btn-color: inherit; --btn-icon-size: 100%; --btn-padding: 0; - --outline-size: 0; } .btn--link { --btn-background: var(--color-link); --btn-border-color: var(--color-canvas); --btn-color: var(--color-ink-inverted); - --outline-color: var(--color-link); + --focus-ring-color: var(--color-link); } .btn--circle, @@ -85,14 +84,14 @@ --btn-background: var(--color-negative); --btn-border-color: var(--color-negative); --btn-color: var(--color-ink-inverted); - --outline-color: var(--color-negative); + --focus-ring-color: var(--color-negative); } .btn--positive { --btn-background: var(--color-positive); --btn-border-color: var(--color-canvas); --btn-color: var(--color-ink-inverted); - --outline-color: var(--color-positive); + --focus-ring-color: var(--color-positive); } .btn--success { @@ -118,7 +117,7 @@ --btn-background: var(--color-ink); --btn-border-color: var(--color-canvas); --btn-color: var(--color-canvas); - --outline-color: var(--color-ink); + --focus-ring-color: var(--color-ink); } /* Toggleable buttons @@ -153,7 +152,7 @@ --btn-background: var(--color-ink); --btn-border-color: var(--color-ink); --btn-color: var(--color-ink-inverted); - --outline-color: var(--color-ink); + --focus-ring-color: var(--color-ink); .checked { display: block; diff --git a/app/assets/stylesheets/expander.css b/app/assets/stylesheets/expander.css index 2d7f8d145..0182f6497 100644 --- a/app/assets/stylesheets/expander.css +++ b/app/assets/stylesheets/expander.css @@ -98,7 +98,6 @@ --btn-border-size: 0; --btn-font-weight: 500; --btn-padding: var(--inline-space-half) var(--inline-space); - --outline-color: transparent; inline-size: calc(100% + var(--inline-space-double)); margin-inline-start: calc(-1 * var(--inline-space)); diff --git a/app/assets/stylesheets/inputs.css b/app/assets/stylesheets/inputs.css index a219b3575..6643ed065 100644 --- a/app/assets/stylesheets/inputs.css +++ b/app/assets/stylesheets/inputs.css @@ -132,9 +132,7 @@ &:has(:focus-visible) { .switch__btn { - box-shadow: - 0 0 0 var(--outline-size) var(--color-canvas), - 0 0 0 calc(var(--outline-size) * 2) var(--color-ink); + outline: var(--focus-ring-size) solid var(--focus-ring-color); } } } @@ -150,6 +148,7 @@ border-radius: 2em; cursor: pointer; inset: 0; + outline-offset: var(--focus-ring-offset); position: absolute; transition: 150ms ease; @@ -195,8 +194,6 @@ --input-border-radius: 0; --input-background: transparent; --input-border-size: 0; - --outline-size: 0; - --outline-color: transparent; inline-size: 100%; outline: 0; @@ -223,7 +220,6 @@ --input-border-radius: 0; --input-border-size: 0; --input-padding: 0; - --outline-size: 0; color: inherit; font-size: inherit; diff --git a/app/assets/stylesheets/popup.css b/app/assets/stylesheets/popup.css index 216afb5e0..1b158f9e6 100644 --- a/app/assets/stylesheets/popup.css +++ b/app/assets/stylesheets/popup.css @@ -80,7 +80,6 @@ --btn-border-size: 0; --btn-font-weight: 500; --btn-padding: var(--inline-space-half) 0 var(--inline-space-half) var(--inline-space); - --outline-color: transparent; flex: 1 1 auto; justify-content: start; diff --git a/app/assets/stylesheets/reactions.css b/app/assets/stylesheets/reactions.css index 1405d3895..f232c925f 100644 --- a/app/assets/stylesheets/reactions.css +++ b/app/assets/stylesheets/reactions.css @@ -86,6 +86,11 @@ transform-origin: left center; } + &:has(.input:focus) { + outline: var(--focus-ring-size) solid var(--focus-ring-color); + outline-offset: var(--focus-ring-offset); + } + .reaction__form-label:focus { outline: none; } @@ -95,7 +100,6 @@ --input-background: transparent; --input-border-size: 0; --input-padding: 0; - --outline-size: 0; box-shadow: none; display: inherit; diff --git a/app/assets/stylesheets/terminals.css b/app/assets/stylesheets/terminals.css index dd4459715..9f4966f7c 100644 --- a/app/assets/stylesheets/terminals.css +++ b/app/assets/stylesheets/terminals.css @@ -94,8 +94,6 @@ --input-border-color: transparent; --input-border-radius: 0.3em; --input-color: var(--color-terminal-text); - --outline-size: 0; - --outline-color: transparent; accent-color: var(--color-terminal-text); caret-color: var(--color-terminal-text); diff --git a/app/assets/stylesheets/trays.css b/app/assets/stylesheets/trays.css index dfd22536d..7b47b61da 100644 --- a/app/assets/stylesheets/trays.css +++ b/app/assets/stylesheets/trays.css @@ -63,8 +63,6 @@ /* ------------------------------------------------------------------------ */ .tray__expander { - --outline-size: 0; - align-self: stretch; background: transparent; border: 0; From 5c2997422ffe5a0f451337eeb96e67126d9e61b5 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Thu, 3 Jul 2025 15:00:12 -0500 Subject: [PATCH 17/17] Address PR feedback --- app/assets/stylesheets/cards.css | 3 ++- app/assets/stylesheets/inputs.css | 20 ++++++++++++++++--- .../cards/display/common/_assignees.html.erb | 2 +- app/views/cards/display/perma/_tags.html.erb | 2 +- .../display/public_preview/_meta.html.erb | 2 +- app/views/cards/show.html.erb | 7 +++++-- .../collections/edit/_publication.html.erb | 6 +++--- 7 files changed, 30 insertions(+), 12 deletions(-) diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css index 2a228094f..6f5425e1d 100644 --- a/app/assets/stylesheets/cards.css +++ b/app/assets/stylesheets/cards.css @@ -4,6 +4,7 @@ .card { --avatar-size: 2.75em; + --card-bg-color: color-mix(in srgb, var(--card-color) 4%, var(--color-canvas)); --card-padding-inline: var(--inline-space-double); --card-padding-block: var(--block-space); --border-color: transparent; @@ -11,7 +12,7 @@ --border-size: 0; aspect-ratio: var(--card-aspect-ratio, auto); - background-color: color-mix(in srgb, var(--card-color) 4%, var(--color-canvas)); + background-color: var(--card-bg-color); border-radius: var(--border-radius); box-shadow: var(--shadow); color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink)); diff --git a/app/assets/stylesheets/inputs.css b/app/assets/stylesheets/inputs.css index 6643ed065..61a1e43c6 100644 --- a/app/assets/stylesheets/inputs.css +++ b/app/assets/stylesheets/inputs.css @@ -24,6 +24,10 @@ &:where(:focus) { --focus-ring-offset: -1px; } + + &[readonly] { + --focus-ring-size: 0; + } } .input--file { @@ -124,6 +128,9 @@ /* Switches */ .switch { + --switch-color: var(--color-ink-medium); + --switch-hover-brightness: 0.9; + block-size: 1.75em; border-radius: 2em; display: inline-flex; @@ -144,7 +151,7 @@ } .switch__btn { - background-color: var(--color-ink-medium); + background-color: var(--switch-color); border-radius: 2em; cursor: pointer; inset: 0; @@ -164,13 +171,20 @@ transition: 150ms ease; } + @media (any-hover: hover) { + &:hover { + background-color: color-mix(in srgb, var(--switch-color) 80%, var(--color-ink)); + } + } + .switch__input:disabled + & { - background-color: var(--color-ink-medium) !important; + --switch-color: var(--color-ink-medium) !important; + cursor: not-allowed; } .switch__input:checked + & { - background-color: var(--color-link); + --switch-color: var(--color-link); &::before { transform: translateX(1.2em); diff --git a/app/views/cards/display/common/_assignees.html.erb b/app/views/cards/display/common/_assignees.html.erb index 19d5d1c83..614a976e0 100644 --- a/app/views/cards/display/common/_assignees.html.erb +++ b/app/views/cards/display/common/_assignees.html.erb @@ -4,7 +4,7 @@ <% end %>
> - diff --git a/app/views/cards/display/perma/_tags.html.erb b/app/views/cards/display/perma/_tags.html.erb index 637b55097..4e870078c 100644 --- a/app/views/cards/display/perma/_tags.html.erb +++ b/app/views/cards/display/perma/_tags.html.erb @@ -12,7 +12,7 @@
> - diff --git a/app/views/cards/display/public_preview/_meta.html.erb b/app/views/cards/display/public_preview/_meta.html.erb index 6b62fe970..a49cbfbcb 100644 --- a/app/views/cards/display/public_preview/_meta.html.erb +++ b/app/views/cards/display/public_preview/_meta.html.erb @@ -28,7 +28,7 @@ <% end %>
> - diff --git a/app/views/cards/show.html.erb b/app/views/cards/show.html.erb index fe318394e..19d95cae0 100644 --- a/app/views/cards/show.html.erb +++ b/app/views/cards/show.html.erb @@ -27,8 +27,11 @@ <% end %>
- <%= link_to cards_path(collection_ids: [ @card.collection ]), class: "txt-large overflow-ellipsis margin-none txt-ink", style: "view-transistion-name: card-collection-title", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %> - ← <%= @card.collection.name %> + <%= link_to cards_path(collection_ids: [ @card.collection ]), class: "btn borderless txt-large", style: "--btn-padding: 0.25ch 1ch 0.25ch 0.75ch; view-transistion-name: card-collection-title;", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %> + + ← + <%= @card.collection.name %> + <% end %>
diff --git a/app/views/collections/edit/_publication.html.erb b/app/views/collections/edit/_publication.html.erb index 72f315b8d..ce5568451 100644 --- a/app/views/collections/edit/_publication.html.erb +++ b/app/views/collections/edit/_publication.html.erb @@ -11,13 +11,13 @@ <%= form.check_box :published, class: "switch__input", checked: true, data: { action: "change->form#submit" } %> Turn off the public link - <% end %> + <% end %> <%= icon_tag "world" %>
- <%= text_field_tag :publication_url, published_collection_url(collection), disabled: true, class: "full-width input fill-white" %> + <%= text_field_tag :publication_url, published_collection_url(collection), readonly: true, class: "full-width input fill-white" %>
<%= button_to_copy_to_clipboard(published_collection_url(collection)) do %> <%= icon_tag "copy-paste" %> @@ -44,7 +44,7 @@ <%= form.check_box :published, class: "switch__input", checked: false, data: { action: "change->form#submit" } %> Turn on the public link - <% end %> + <% end %> <%= icon_tag "world" %>