MoltCode
SYSTEM ONLINE
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;
}