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

Clean up --hover variables

Browse Source
This commit is contained in:
Andy Smith
2025-07-02 16:14:34 -05:00
parent 4c42b8fe15
commit 4bc1b36d3d
21 changed files with 51 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/_global.css
-3
View File
@@ -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;
app/assets/stylesheets/actiontext-lexical.css
+8 -8
View File
@@ -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 */
app/assets/stylesheets/avatars.css
+1 -2
View File
@@ -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));
app/assets/stylesheets/base.css
-31
View File
@@ -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);
}
app/assets/stylesheets/buttons.css
+2 -10
View File
@@ -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;
app/assets/stylesheets/cards.css
+9 -6
View File
@@ -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;
app/assets/stylesheets/events.css
+1 -4
View File
@@ -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 {
app/assets/stylesheets/expander.css
+5 -5
View File
@@ -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%);
}
} */
}
app/assets/stylesheets/inputs.css
+2 -5
View File
@@ -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;
app/assets/stylesheets/knobs.css
+2 -3
View File
@@ -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 */
app/assets/stylesheets/markdown.css
-1
View File
@@ -1,6 +1,5 @@
@layer components {
.heading__link {
--hover-size: 0;
--opacity: 0.5;
--size: 0.8em;
app/assets/stylesheets/popup.css
+8 -11
View File
@@ -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);
}
}
app/assets/stylesheets/reactions.css
+6 -10
View File
@@ -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;
app/assets/stylesheets/rich-text-content.css
-6
View File
@@ -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;
}
app/assets/stylesheets/terminals.css
-3
View File
@@ -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;
app/assets/stylesheets/trays.css
-3
View File
@@ -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%);
app/assets/stylesheets/utilities.css
+4
View File
@@ -218,4 +218,8 @@
/* Visibility */
[hidden] { display: none !important; }
[contents] { display: contents; }
.hide-focus-ring {
--focus-ring-size: 0;
}
}
app/assets/stylesheets/workflows.css
-2
View File
@@ -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;
}
app/views/cards/comments/reactions/_reaction.html.erb
+1 -1
View File
@@ -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" %>
<span class="for-screen-reader">Delete this reaction</span>
app/views/cards/edit.html.erb
+1 -1
View File
@@ -2,7 +2,7 @@
<%= form_with model: @card, url: collection_card_path(@card.collection, @card), class: "card__content", data: { controller: "autoresize form" } do |form| %>
<h1 class="card__title">
<%= 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 %>
app/views/commands/_form.html.erb
+1 -1
View File
@@ -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"