s.esmaeili
f441ca8289
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.
54 lines
1.8 KiB
TypeScript
54 lines
1.8 KiB
TypeScript
// Ported from legacy henza_pwa/themeConfig/themeConfig.ts — styling values only.
|
|
// (legacy also defined baseURL/coreURL for its own Laravel API here; those are
|
|
// out of scope for a presentation-only port and superseded by this app's own
|
|
// src/api/client.ts, which already talks to the new NestJS API.)
|
|
import data from './colors.json'
|
|
import { themeLessVarOverrides } from './appearance'
|
|
|
|
const colors = data
|
|
const curve = {
|
|
none: 0,
|
|
xs: 2,
|
|
sm: 4,
|
|
font: 14,
|
|
px: 'px',
|
|
}
|
|
const vars = {
|
|
prefix: 'montzar',
|
|
// headers
|
|
'font-size': curve.font + curve.px,
|
|
'h1-font-size': curve.font * 2 + curve.px,
|
|
'h2-font-size': curve.font * 1.74 + curve.px,
|
|
'h3-font-size': curve.font * 1.51 + curve.px,
|
|
'h4-font-size': curve.font * 1.32 + curve.px,
|
|
'h5-font-size': curve.font * 1.2 + curve.px,
|
|
'h6-font-size': curve.font * 1.1 + curve.px,
|
|
// headers
|
|
//ant
|
|
'primary-color': colors.secondary,
|
|
'link-color': colors.primary,
|
|
'heading-color': colors.primary,
|
|
'error-color': colors.danger,
|
|
'border-radius-base': 5 + curve.px,
|
|
'input-padding-horizontal-base': 10 + curve.px,
|
|
'input-padding-vertical-base': 10 + curve.px,
|
|
'height-lg': '42px',
|
|
'height-base': '32px',
|
|
'checkbox-size': '20px',
|
|
'checkbox-border-radius': '3px',
|
|
//ant
|
|
|
|
'transition-duration': '.5s',
|
|
'transition-delay': '.5s',
|
|
}
|
|
// Theme tokens (see appearance.ts) are overridden last, so @canvas, @ink, …
|
|
// compile to var(--c-…) and switch with the theme at runtime. The antd keys
|
|
// above were already resolved to hex from `colors`, so antd still gets real
|
|
// colours for its colour functions; only its surface backgrounds follow the
|
|
// theme.
|
|
export const $themeLessVars = Object.assign(vars, colors, themeLessVarOverrides, {
|
|
'component-background': 'var(--c-canvas)',
|
|
'body-background': 'var(--c-page)',
|
|
'popover-background': 'var(--c-canvas)',
|
|
})
|