+12
fcd7c979df
fcd7c979df
Co-authored-by: Artur <145776561+arturict@users.noreply.github.com> Co-authored-by: arturict <arturict@users.noreply.github.com> Co-authored-by: Thomas <thomas@ajnart.fr> Co-authored-by: Afonso Jorge Ramos <afonsojorgeramos@gmail.com> Co-authored-by: Danura30082 <danura30082+github@gmail.com> Co-authored-by: Kushie <122986913+kushiemoon-dev@users.noreply.github.com> Co-authored-by: ajnart <thomas@ajnart.fr> Co-authored-by: ajnart <thomas@ajnart.dev> Co-authored-by: chenjun <chenjun@foxmail.com> Co-authored-by: Wikibear <wikibear@users.noreply.github.com> Co-authored-by: Bergasha <bergasha@gmail.com> Co-authored-by: leafyelin <43306196+leafyelin@users.noreply.github.com> Co-authored-by: Lucas Araujo <lucas.lra@gmail.com> Co-authored-by: GreenMonito <86085570+GreenMonito@users.noreply.github.com> Co-authored-by: Nerdy-Technician <roffo@nerdy-technician.social> Co-authored-by: Jun <34545896+jcstrong@users.noreply.github.com> Co-authored-by: Edmond Abraham <54119952+gitedmond@users.noreply.github.com> Co-authored-by: thrawnx <tight.bulb9384@fastmail.com> Co-authored-by: Chris <58918656+nordada@users.noreply.github.com> Co-authored-by: yi111 <153097222+Yi-111-a@users.noreply.github.com> Co-authored-by: Yanis <naamaneyanis@gmail.com> Co-authored-by: Wikibear <me@sej.de> Co-authored-by: alessiottavo <93441886+alessiottavo@users.noreply.github.com>
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,
|
|
});
|