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); }