src/scale.ts1.2 KB · typescript
import { fluid } from "./index";
export interface ScaleConfig {
baseMin: number;
baseMax: number;
ratioMin?: number; // default 1.2 (Minor Third)
ratioMax?: number; // default 1.25 (Major Third)
steps?: number[]; // default [-2, -1, 0, 1, 2, 3, 4, 5]
minView?: number;
maxView?: number;
}
export type FluidScale = Record<string, string>;
/**
* Generates a modular scale where the ratio itself is fluid.
* This allows type to be more compressed on mobile (1.2 ratio) and more expressive on desktop (1.33 ratio).
*/
export function generateFluidScale(config: ScaleConfig): FluidScale {
const {
baseMin,
baseMax,
ratioMin = 1.2,
ratioMax = 1.25,
steps = [-2, -1, 0, 1, 2, 3, 4, 5],
minView,
maxView
} = config;
const scale: FluidScale = {};
steps.forEach(step => {
// Calculate min size at this step
const minSize = baseMin * Math.pow(ratioMin, step);
// Calculate max size at this step
const maxSize = baseMax * Math.pow(ratioMax, step);
const name = step === 0 ? "base" : step > 0 ? `up-${step}` : `down-${Math.abs(step)}`;
scale[name] = fluid({
minSize,
maxSize,
minView,
maxView
});
});
return scale;
}