mirror of
https://github.com/getpaseo/paseo.git
synced 2026-11-04 15:34:39 +00:00
Mohamed Boudra
233997ed5c
* fix(scripts): recover installs when a dependency patch changed patch-package cannot apply a patch over a package patched with an earlier version of it, and without --error-on-fail it exits 0 locally. Checkouts kept the stale patch silently: the Markdown code block spacing fix never reached them. The script now fails the install and removes that package so the next npm install reinstalls it clean with the current patch. A patch-package that cannot start fails the install without removing anything. * fix(app): give Markdown blocks one gap and roomier desktop spacing Every Markdown block is followed by one gap, density.blockGap: 12 on compact layouts and 16 wider. The library's element styles and the views stacked outside it (Mermaid segments on native, streaming head and tail) take the same token, so no block type carries its own margins. Desktop was too tight at 12. Markdown images show a zoom-in cursor on web, since tapping opens the lightbox.
57 lines
2.2 KiB
TypeScript
57 lines
2.2 KiB
TypeScript
import { isCompactBreakpoint } from "@/constants/layout";
|
|
import { ICON_SIZE, type Theme } from "@/styles/theme";
|
|
|
|
/**
|
|
* Density sizes for surfaces that opt into touch sizing: rows and icons grow on compact
|
|
* layouts and keep their desktop sizes from the `md` breakpoint up. Plain theme tokens stay
|
|
* desktop-sized everywhere, so a surface migrates by swapping its sizes for these.
|
|
*
|
|
* Style values are Unistyles breakpoint values, resolved inside `StyleSheet.create`. Icon sizes
|
|
* are props, so icons take them through `DensityIcon` or a `densityIconProps` mapping.
|
|
*/
|
|
|
|
export type DensityIconSize = keyof typeof ICON_SIZE;
|
|
|
|
const COMPACT_ICON_SIZE: Record<DensityIconSize, number> = { xs: 14, sm: 18, md: 20, lg: 24 };
|
|
|
|
// Compact layouts end where `md` begins; see `isCompactBreakpoint`.
|
|
function byLayout<T>(compact: T, desktop: T) {
|
|
return { xs: compact, md: desktop };
|
|
}
|
|
|
|
export const density = {
|
|
/** A list row such as a sidebar entry. */
|
|
rowHeight: byLayout(44, 36),
|
|
/** A row in a tight group, such as the sidebar's navigation rows. */
|
|
tightRowHeight: byLayout(36, 28),
|
|
/** A square icon-only button that sits in a row or toolbar. */
|
|
iconButton: byLayout(44, 28),
|
|
/** The space between two blocks of rich text, such as Markdown paragraphs, code and images. */
|
|
blockGap: byLayout(12, 16),
|
|
};
|
|
|
|
/** Resolves a density value for a prop, which Unistyles cannot resolve on its own. */
|
|
export function resolveDensity<T>(rt: { breakpoint?: string }, value: { xs: T; md: T }): T {
|
|
return isCompactBreakpoint(rt.breakpoint) ? value.xs : value.md;
|
|
}
|
|
|
|
/** The width or height of a slot that holds an icon of `size`. */
|
|
export function densityIconBox(size: DensityIconSize) {
|
|
return byLayout(COMPACT_ICON_SIZE[size], ICON_SIZE[size]);
|
|
}
|
|
|
|
export function densityIconSize(rt: { breakpoint?: string }, size: DensityIconSize): number {
|
|
return resolveDensity(rt, densityIconBox(size));
|
|
}
|
|
|
|
/** Extends a `withUnistyles` icon mapping so the icon also takes its density size. */
|
|
export function densityIconProps<P extends object>(
|
|
size: DensityIconSize,
|
|
mapping: (theme: Theme) => P,
|
|
) {
|
|
return (theme: Theme, rt: { breakpoint?: string }) => ({
|
|
...mapping(theme),
|
|
size: densityIconSize(rt, size),
|
|
});
|
|
}
|