37 lines
1.8 KiB
TypeScript
37 lines
1.8 KiB
TypeScript
import type { CSSProperties } from "react";
|
|
import type { Icon123, IconProps } from "@tabler/icons-react";
|
|
|
|
export * from "./src";
|
|
|
|
export type TablerIcon = typeof Icon123;
|
|
|
|
export type TablerIconProps = IconProps;
|
|
|
|
/**
|
|
* Icon sizes tied to Mantine's font-size scale instead of raw pixel
|
|
* numbers, so icons stay legible under the board's CSS zoom scaling.
|
|
* Pass as the `style` prop (not `size`) - tabler icons convert `size` into
|
|
* raw SVG width/height attributes, and CSS `var()` isn't guaranteed to
|
|
* resolve there (Firefox especially). `style` is real CSS, so it does.
|
|
*/
|
|
export const iconSizes = {
|
|
xs: { width: "var(--mantine-font-size-xs)", height: "var(--mantine-font-size-xs)", flexShrink: 0 },
|
|
sm: { width: "var(--mantine-font-size-sm)", height: "var(--mantine-font-size-sm)", flexShrink: 0 },
|
|
md: { width: "var(--mantine-font-size-md)", height: "var(--mantine-font-size-md)", flexShrink: 0 },
|
|
lg: { width: "var(--mantine-font-size-lg)", height: "var(--mantine-font-size-lg)", flexShrink: 0 },
|
|
xl: { width: "var(--mantine-font-size-xl)", height: "var(--mantine-font-size-xl)", flexShrink: 0 },
|
|
} as const satisfies Record<string, CSSProperties>;
|
|
|
|
/**
|
|
* For icon/element sizes that don't fit one of `iconSizes`' fixed tokens (e.g. a deliberately
|
|
* oversized icon). Same reasoning as `iconSizes`: pass as `style`, not a raw `size` number - a
|
|
* bare pixel value never re-scales when the board's zoom level changes, so it renders at a
|
|
* fraction of its intended size on any board that isn't at 100% zoom (which is most boards with
|
|
* more than a couple of widgets).
|
|
*/
|
|
export const zoomCompensatedSize = (px: number): CSSProperties => ({
|
|
width: `calc(${px}px * var(--board-canvas-ui-scale, 1))`,
|
|
height: `calc(${px}px * var(--board-canvas-ui-scale, 1))`,
|
|
flexShrink: 0,
|
|
});
|