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"