feat(user-apps): appearance settings (dark mode + reduced motion), product morph, filter sheet
Applies to both user-app and user-app-v2. Logic and structure are shared; each app keeps its own look. Appearance settings - New "تنظیمات ظاهری" page (/settings/appearance), opened from the dashboard and available without login. It offers a light/dark/system theme and a "fast & light" motion switch. - appearanceStore saves the choice to localStorage. A small inline boot script in index.html applies it before first paint so there is no white flash. The "system" option follows OS changes live. - New ToggleSwitch component. Dark mode - Theme LESS tokens now compile to CSS custom properties. Light/dark values come from a generated virtual:palette.css (themeConfig/ appearance.ts, with colors.json + new colors.dark.json). - New LESS alpha() plugin replaces fade() on theme tokens. - New semantic tokens: page, onInk, heroSurface, hairlineStrong, photoMat, photoStage. - The dark palette is layered (page < card < panel < border) so surfaces separate without shadows. - Hard-coded colors were replaced by tokens according to their role. - antd inputs/text get dark overrides; vant uses its own .van-theme-dark. - Light mode looks the same as before. Reduced motion - With html.motion-reduced, transitions are capped at 120ms, keyframe loops stop, and backdrop blurs and permanent will-change are dropped. - Spinners and the toast progress bar (which closes the toast) are exempt via .keep-motion. - Carousel autoplay, the v1 Lottie and the product morph honor the setting. Product detail - Opening a product is now a container-transform morph from the tapped card (ProductMorph). It replaces the bottom Drawer and uses composited transform/opacity only. - The detail view is seeded with the card's data, so it no longer opens blank and jumps. Filters and sheets - Filters are now a full-width bottom sheet. Selections stay a draft until applied, so the result list no longer re-renders while dragging the slider. - DropDown collapse animates grid-template-rows instead of a capped max-height. - v2 IslandSheet is restyled to the v2 design language (API unchanged). Fixes - filtersStore.reset() shallow-copied shared arrays, so clearing the filters never cleared the selected brands.
This commit is contained in:
s.esmaeili
@@ -367,8 +367,8 @@ input:focus-visible {
|
||||
}
|
||||
|
||||
.ant-btn-primary[disabled], .ant-btn-primary[disabled]:hover, .ant-btn-primary[disabled]:focus, .ant-btn-primary[disabled]:active {
|
||||
background: fade(@white, 20%);
|
||||
color: fade(@white, 50%);
|
||||
background: alpha(@white, 20%);
|
||||
color: alpha(@white, 50%);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
@@ -632,7 +632,7 @@ img[lazy='error'] {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
transform: translateX(100%);
|
||||
background: linear-gradient(90deg, transparent, fade(#fff, 65%), transparent);
|
||||
background: linear-gradient(90deg, transparent, alpha(@canvas, 65%), transparent);
|
||||
animation: skeleton-sweep 1.3s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
@@ -688,3 +688,107 @@ img[lazy='error'] {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Appearance: theme switch & reduced motion ─────────────────
|
||||
Classes set on <html> by stores/appearanceStore.ts (and, before the bundle
|
||||
loads, by the boot script in index.html). */
|
||||
|
||||
// One-frame guard while the palette flips: without it every element with a
|
||||
// colour transition animates from the old theme to the new one at once.
|
||||
html.theme-switching *,
|
||||
html.theme-switching *::before,
|
||||
html.theme-switching *::after {
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
// "Fast & light" mode. Not "no motion": the aim is speed without the app
|
||||
// going dead, so
|
||||
// - every transition still runs, capped at 120ms with no delay — taps still
|
||||
// press, colours still change, sheets and pages still arrive, just quick;
|
||||
// - keyframe animations run one near-instant iteration, so decorative loops
|
||||
// (pulses, shimmers, illustration loops) stop at rest and one-shot reveals
|
||||
// land in their final state;
|
||||
// - backdrop blurs (recomputed every frame anything moves behind them) and
|
||||
// permanent will-change layers are dropped;
|
||||
// - .keep-motion opts working motion out: spinners, and the toast progress
|
||||
// bar whose animationend is what closes the toast. vant's own <Loading>
|
||||
// spinner is excluded by class.
|
||||
html.motion-reduced :where(*:not(.keep-motion, .keep-motion *, .van-loading, .van-loading *)),
|
||||
html.motion-reduced :where(*:not(.keep-motion, .keep-motion *, .van-loading, .van-loading *))::before,
|
||||
html.motion-reduced :where(*:not(.keep-motion, .keep-motion *, .van-loading, .van-loading *))::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
animation-delay: 0s !important;
|
||||
transition-duration: 0.12s !important;
|
||||
transition-delay: 0s !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
|
||||
html.motion-reduced *,
|
||||
html.motion-reduced *::before,
|
||||
html.motion-reduced *::after {
|
||||
-webkit-backdrop-filter: none !important;
|
||||
backdrop-filter: none !important;
|
||||
will-change: auto !important;
|
||||
}
|
||||
|
||||
// Glass that was only legible because of its blur gets a near-solid fill.
|
||||
html.motion-reduced .tabbar__inner,
|
||||
html.motion-reduced .toast {
|
||||
background: alpha(@canvas, 97%) !important;
|
||||
}
|
||||
|
||||
/* ── Dark theme: third-party surfaces ──────────────────────────
|
||||
ant-design-vue compiles its theme at build time with black text
|
||||
(fade(@black, 85%)) and white fills; only its surface backgrounds were
|
||||
switched to the theme tokens (themeConfig.ts). The text and input chrome it
|
||||
leaves light-only are covered here. vant follows on its own through the
|
||||
.van-theme-dark class. */
|
||||
html.theme-dark body {
|
||||
color: @ink;
|
||||
}
|
||||
|
||||
html.theme-dark {
|
||||
.ant-input,
|
||||
.ant-input-affix-wrapper,
|
||||
.ant-input-number,
|
||||
textarea.ant-input {
|
||||
color: @ink;
|
||||
background-color: @canvas;
|
||||
border-color: @hairline;
|
||||
}
|
||||
.ant-input::placeholder,
|
||||
textarea.ant-input::placeholder {
|
||||
color: @inkFaint;
|
||||
}
|
||||
.ant-input-affix-wrapper > input.ant-input {
|
||||
background-color: transparent;
|
||||
}
|
||||
.ant-form-item-label > label,
|
||||
.ant-drawer-title,
|
||||
.ant-spin-text {
|
||||
color: @ink;
|
||||
}
|
||||
.ant-form-item-explain-error {
|
||||
color: @red;
|
||||
}
|
||||
.ant-empty-description {
|
||||
color: @inkFaint;
|
||||
}
|
||||
.ant-drawer-header {
|
||||
border-bottom-color: @hairline;
|
||||
}
|
||||
.ant-slider-handle {
|
||||
background-color: @canvas;
|
||||
}
|
||||
}
|
||||
|
||||
// Dark: the toast's frosted glass is mostly clear by design, which on a dark
|
||||
// page leaves nothing to separate it from what scrolls beneath. Give it a
|
||||
// near-solid card fill and a hairline edge instead.
|
||||
html.theme-dark .toast {
|
||||
background: alpha(@canvas, 94%) !important;
|
||||
box-shadow:
|
||||
inset 0 0 0 1px @hairline,
|
||||
0 18px 40px -14px rgba(0, 0, 0, 0.6) !important;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user