The white-on-white highlight was invisible yet shifted perceived letter
center downward. Variable is preserved so custom themes can still set it.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Replace hardcoded rgba shadow colors with --kbd-glow-top/--kbd-glow-bottom
CSS variables, tuned per theme (light: stronger top highlight, dark: deeper
bottom shadow)
- Use filter: brightness(0.92) for pressed state instead of manipulating
box-shadow layers with outer drop shadows — theme-agnostic and physically
correct (depressed key = in shadow = darker)
- Keep top inset highlight shift (1px → 2px) and bottom inset compression
(1px → 0.5px) for realistic keycap depression alongside brightness
- Fix bottom clipping on press: change .action-wrap overflow from hidden
to visible so translateY(1px) doesn't get chopped
- Remove non-glow pressed shadow rules (brightness handles all cases)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Row highlight on shortcut trigger now uses a horizontal gradient sweep
(background-position animation) instead of a static background flash,
providing a distinct visual language from the focus ring
- Shimmer uses theme-aware accent color via color-mix on keymap page,
with a neutral fallback in shui.css base styles
- Guard against animation spam: clearTimeout+reset pattern prevents
stale timeout accumulation during rapid key repeat; reflow only
forced on first trigger, class stays applied until last trigger ends
- Fix combo key press animation: animate the container (the keycap)
instead of individual kbd elements, so translateY and box-shadow
follow the container's border-radius correctly
- Scope row shimmer to .shui-shortcut-row/.shortcut-row elements
to prevent accidental shimmer on standalone badge containers
- Respect prefers-reduced-motion for all new animations
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The settings article has a fixed CSS width (44rem) for dialog intrinsic
sizing, but when the viewport constrains the dialog, the inner flex
container overflows and gets clipped. CSS percentages resolve against
the declared width, not the rendered width, so a JS solution is needed.
A ResizeObserver on the dialog element measures its actual clientWidth,
subtracts the aside (only in row layout), and sets an explicit max-width
on the shortcut container. Also makes inner elements flexible: removes
flex-shrink-0 and min-width constraints on keystroke buttons, adds
flex-wrap to toolbar and shortcut rows, and adds min-width: 0 to
shortcut badge containers in shui.css.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The inner glow uses white-on-top / black-on-bottom to simulate 3D keycap lighting.
Theme variables would swap these in dark mode, destroying the effect. Row-pressed
highlight still uses theme variable (accent tint, not physical light).
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Extract animate-element!/highlight-row! helpers in shortcut-press! (was 4x duplication)
- Extract matches-keystroke? predicate (was duplicated in count + render)
- Replace <a> tags with <button> for all interactive elements (remove, clear, reset, undo, toggle, refresh)
- Add aria-label to icon-only buttons for screen reader support
- Add button reset CSS for elements changed from <a> to <button>
- Replace hardcoded rgba colors in CSS glow/shadow/row-pressed with theme variables
- Define press-animation-ms constant (was magic number 160)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Ensure shortcut component and shui shortcut badges work across both
Radix and legacy Logseq color themes by adding proper fallback chains:
- shortcut.css: Add --lx-* → --rx-* fallbacks for gray scale (08-12),
--lx-* → --ls-* → --rx-* for background steps (01-04, 06), use
opacity-based row dimming instead of color-based for theme-agnostic
muting, and use --color-level-6 for icon link color
- shui.css: Add --rx-* fallbacks to bare --lx-* variables on shortcut
key badges (background, border, text color, separator)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Remove unused `interactive?` prop from shortcut component and all call sites
- Trigger `shortcut-press!` animation when shortcuts are invoked
- Update shortcut settings UI to use `shui/shortcut` instead of raw `<code>` elements
- Fix shortcut key min-width (fit-content → 20px) for consistent sizing
- Pass raw-binding through `render-keyboard-shortcut` for data attribute matching
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace the single-style shortcut renderer with a new component
supporting combo (simultaneous keys), separate (sequential keys),
and compact (text-only) display styles with auto-detection.
- Add shortcut-press! for triggering key press animations via DOM
- Add CSS for all 3 styles with glow effects and reduced-motion support
- Update CMD+K to use v2 styles and press animations on Enter/Cmd+C
- Add accessibility defaults (interactive?/aria-hidden?) to consumers
- Remove old v1 namespace, consolidate under logseq.shui.shortcut
- Remove unused size/theme/animate-on-press? params from API
* enhance(ui): login form
* enhance(ui): add localization support with translate and locale management
* enhance(ui): WIP implement new authentication forms with context management
* enhance(ui): add password visibility toggle to input row
* enhance(ui): adjust padding for password visibility toggle
* enhance(i18n): implement internationalization support for authentication UI
* enhance(ui): implement sign in and sign up functionality with loading state
* enhance(ui): add session management and error handling in login form
* enhance(ui): add confirm code form and enhance authentication flow
* enhance(ui): improve sign-in flow and confirm code handling
* enhance(ui): add warning variant to alerts and improve error handling
* enhance(ui): implement countdown timer for code resend functionality
* enhance(ui): implement countdown timer for password reset and enhance login flow
* enhance(ui): export authentication and enhance UI components
* enhance(ui): integrate new login component and refresh token handling
* chore: clear amplify related codes
* enhance(i18n): normalize language codes and update locale handling
* enhance(auth): add multilingual support for signup and password reset flows
* enhance(ui): update login styles to inherit text color
* enhance(ui): adjust input color variables for improved accessibility
* enhance(auth): add password policy validation and tips in multiple languages
* enhance(ui): improve localization handling and update alert styles
* enhance(mobile): enhance login modal styling and accessibility
* fix(ui): update password validation regex for special characters
* enhance(ui): add padding to card header in login dialog
---------
Co-authored-by: Tienson Qin <tiensonqin@gmail.com>
