@aginies/tokens 0.1.0

package/dist/index.d.cts

@@ -0,0 +1,203 @@
+/**
+ * Aginies design tokens — the single source of truth.
+ *
+ * Values mirror the aginies.com design system ("Control Room", dark-first, one signal
+ * colour) and extend it with what an application UI needs on top of a marketing site:
+ * a third panel level, a strong border, status inks and soft washes, canvas tokens,
+ * a data palette for charts, a spacing scale and dense UI type sizes.
+ *
+ * Everything under `dist/` is generated from this file by `src/build.ts`.
+ */
+type ThemeName = 'dark' | 'light';
+/** Theme-dependent colour values. Hex unless noted. */
+interface Palette {
+    /** Page ground. */
+    bg: string;
+    /** Secondary ground: inputs, inside screens. */
+    'bg-2': string;
+    /** Card / panel. */
+    panel: string;
+    /** Raised panel: popovers, active rows. */
+    'panel-2': string;
+    /** Hover / pressed surface on a panel. */
+    'panel-3': string;
+    /** Divider. */
+    line: string;
+    /** Border. */
+    'line-2': string;
+    /** Strong border: focused or selected outlines that are not the signal colour. */
+    'line-3': string;
+    /** Primary text. */
+    text: string;
+    /** Secondary text. */
+    'text-2': string;
+    /** Labels, quiet text. */
+    mute: string;
+    /** The single accent. */
+    signal: string;
+    /** Signal hover / pressed. */
+    'signal-2': string;
+    /** Ink on a signal fill. */
+    'signal-ink': string;
+    /** Soft signal wash (rgba). */
+    'signal-soft': string;
+    ok: string;
+    'ok-ink': string;
+    'ok-soft': string;
+    warn: string;
+    'warn-ink': string;
+    'warn-soft': string;
+    bad: string;
+    'bad-ink': string;
+    'bad-soft': string;
+    /** The one large shadow: floating shells. */
+    shadow: string;
+    /** Popovers and menus. */
+    'shadow-sm': string;
+    /** Modal scrim (rgba). */
+    overlay: string;
+}
+declare const palettes: Record<ThemeName, Palette>;
+/** Status colours that get a generated 50–950 ramp per theme. */
+declare const rampedColors: readonly ["signal", "ok", "warn", "bad"];
+type RampedColor = (typeof rampedColors)[number];
+declare const rampSteps: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+type RampStep = (typeof rampSteps)[number];
+/**
+ * Lightness targets (OKLCH L) and chroma factors for each ramp step. The hue is taken
+ * from the theme's base colour; chroma peaks around the middle and falls off at the ends
+ * so tints and shades stay in gamut and read as the same colour.
+ */
+declare const rampShape: Record<RampStep, {
+    l: number;
+    c: number;
+}>;
+/**
+ * Fixed neutral ramp, identical in both themes. It is the site's own set of surfaces and
+ * text colours laid out as a scale, so `neutral-*` utilities always land on a real token.
+ */
+declare const neutral: Record<RampStep, string>;
+/** Chart / category palette. References semantic tokens so it follows the theme. */
+declare const data: readonly ["signal", "ok", "warn", "bad", "text-2", "mute"];
+/** Workflow canvas tokens, expressed as references to semantic tokens. */
+declare const canvas: {
+    readonly 'canvas-bg': "bg";
+    readonly 'canvas-grid': "line";
+    readonly 'canvas-node': "panel";
+    readonly 'canvas-node-line': "line-2";
+    readonly edge: "line-2";
+    readonly 'edge-hover': "text-2";
+    readonly 'edge-active': "signal";
+    readonly execution: "ok";
+};
+declare const fonts: {
+    readonly display: "'Bricolage Grotesque Variable', 'Instrument Sans Variable', ui-sans-serif, system-ui, sans-serif";
+    readonly body: "'Instrument Sans Variable', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif";
+    readonly mono: "'JetBrains Mono Variable', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
+};
+declare const radius: {
+    readonly sm: "4px";
+    readonly md: "6px";
+    readonly lg: "10px";
+    readonly xl: "14px";
+    readonly '2xl': "20px";
+    readonly full: "9999px";
+};
+/** 4-point spacing scale. */
+declare const space: {
+    readonly 1: "4px";
+    readonly 2: "8px";
+    readonly 3: "12px";
+    readonly 4: "16px";
+    readonly 5: "24px";
+    readonly 6: "32px";
+    readonly 7: "48px";
+    readonly 8: "64px";
+};
+interface TypeStyle {
+    size: string;
+    lineHeight: string;
+    letterSpacing?: string;
+    family?: keyof typeof fonts;
+    weight?: number;
+    transform?: 'uppercase';
+    /** Bricolage optical size axis. */
+    opsz?: number;
+}
+/** The type scale. Marketing sizes come from the site; `ui-*` are the dense app sizes. */
+declare const type: Record<string, TypeStyle>;
+declare const motion: {
+    readonly 'duration-fast': "150ms";
+    readonly 'duration-base': "200ms";
+    readonly 'duration-slow': "300ms";
+    readonly 'duration-enter': "600ms";
+    readonly 'ease-enter': "cubic-bezier(0.2, 0.7, 0.2, 1)";
+};
+declare const layout: {
+    readonly max: "1200px";
+    readonly gutter: "clamp(20px, 4vw, 40px)";
+    readonly 'section-y': "clamp(64px, 9vw, 128px)";
+    readonly 'section-y-tight': "clamp(40px, 6vw, 80px)";
+};
+declare const breakpoints: {
+    readonly sm: "640px";
+    readonly md: "768px";
+    readonly lg: "1024px";
+    readonly xl: "1280px";
+    readonly '2xl': "1536px";
+    /** Site nav collapses here. */
+    readonly nav: "1180px";
+    readonly wide: "1340px";
+};
+declare const z: {
+    readonly base: 0;
+    readonly raised: 10;
+    readonly sticky: 50;
+    readonly dropdown: 100;
+    readonly modal: 200;
+    readonly toast: 300;
+};
+declare const focus: {
+    /** Keyboard focus ring on any element. */
+    readonly ring: "2px solid var(--signal)";
+    readonly 'ring-offset': "3px";
+    /** Form controls: soft halo instead of an outline. */
+    readonly 'field-ring': "0 0 0 3px var(--signal-soft)";
+};
+
+type Ramp = Record<RampStep, string>;
+/** Derives the 50–950 ramp for a base colour: hue from the base, lightness from the shape. */
+declare function buildRamp(baseHex: string): Ramp;
+
+/**
+ * Small colour utilities: sRGB ⇄ OKLCH, hex parsing, HSL triplets.
+ * Dependency-free so the token build can run under plain Node.
+ */
+interface Rgb {
+    r: number;
+    g: number;
+    b: number;
+}
+interface Oklch {
+    l: number;
+    c: number;
+    h: number;
+}
+declare function hexToRgb(hex: string): Rgb;
+declare function rgbToHex({ r, g, b }: Rgb): string;
+/** "95 200 255" — the channel form Tailwind's `<alpha-value>` colours need. */
+declare function rgbChannels(hex: string): string;
+/** "204 100% 68.6%" — the HSL triplet form the shadcn-era variables used. */
+declare function hslTriplet(hex: string): string;
+declare function rgbToOklch(rgb: Rgb): Oklch;
+/**
+ * OKLCH → sRGB hex. If the colour is out of gamut the chroma is reduced until it fits,
+ * which keeps lightness and hue (what the eye keys on) intact.
+ */
+declare function oklchToHex(color: Oklch): string;
+/** Relative luminance (WCAG). */
+declare function luminance(hex: string): number;
+/** WCAG contrast ratio between two hex colours. */
+declare function contrast(a: string, b: string): number;
+
+export { type Palette, type RampStep, type RampedColor, type ThemeName, type TypeStyle, breakpoints, buildRamp, canvas, contrast, data, focus, fonts, hexToRgb, hslTriplet, layout, luminance, motion, neutral, oklchToHex, palettes, radius, rampShape, rampSteps, rampedColors, rgbChannels, rgbToHex, rgbToOklch, space, type, z };

package/dist/index.d.ts

@@ -0,0 +1,203 @@
+/**
+ * Aginies design tokens — the single source of truth.
+ *
+ * Values mirror the aginies.com design system ("Control Room", dark-first, one signal
+ * colour) and extend it with what an application UI needs on top of a marketing site:
+ * a third panel level, a strong border, status inks and soft washes, canvas tokens,
+ * a data palette for charts, a spacing scale and dense UI type sizes.
+ *
+ * Everything under `dist/` is generated from this file by `src/build.ts`.
+ */
+type ThemeName = 'dark' | 'light';
+/** Theme-dependent colour values. Hex unless noted. */
+interface Palette {
+    /** Page ground. */
+    bg: string;
+    /** Secondary ground: inputs, inside screens. */
+    'bg-2': string;
+    /** Card / panel. */
+    panel: string;
+    /** Raised panel: popovers, active rows. */
+    'panel-2': string;
+    /** Hover / pressed surface on a panel. */
+    'panel-3': string;
+    /** Divider. */
+    line: string;
+    /** Border. */
+    'line-2': string;
+    /** Strong border: focused or selected outlines that are not the signal colour. */
+    'line-3': string;
+    /** Primary text. */
+    text: string;
+    /** Secondary text. */
+    'text-2': string;
+    /** Labels, quiet text. */
+    mute: string;
+    /** The single accent. */
+    signal: string;
+    /** Signal hover / pressed. */
+    'signal-2': string;
+    /** Ink on a signal fill. */
+    'signal-ink': string;
+    /** Soft signal wash (rgba). */
+    'signal-soft': string;
+    ok: string;
+    'ok-ink': string;
+    'ok-soft': string;
+    warn: string;
+    'warn-ink': string;
+    'warn-soft': string;
+    bad: string;
+    'bad-ink': string;
+    'bad-soft': string;
+    /** The one large shadow: floating shells. */
+    shadow: string;
+    /** Popovers and menus. */
+    'shadow-sm': string;
+    /** Modal scrim (rgba). */
+    overlay: string;
+}
+declare const palettes: Record<ThemeName, Palette>;
+/** Status colours that get a generated 50–950 ramp per theme. */
+declare const rampedColors: readonly ["signal", "ok", "warn", "bad"];
+type RampedColor = (typeof rampedColors)[number];
+declare const rampSteps: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+type RampStep = (typeof rampSteps)[number];
+/**
+ * Lightness targets (OKLCH L) and chroma factors for each ramp step. The hue is taken
+ * from the theme's base colour; chroma peaks around the middle and falls off at the ends
+ * so tints and shades stay in gamut and read as the same colour.
+ */
+declare const rampShape: Record<RampStep, {
+    l: number;
+    c: number;
+}>;
+/**
+ * Fixed neutral ramp, identical in both themes. It is the site's own set of surfaces and
+ * text colours laid out as a scale, so `neutral-*` utilities always land on a real token.
+ */
+declare const neutral: Record<RampStep, string>;
+/** Chart / category palette. References semantic tokens so it follows the theme. */
+declare const data: readonly ["signal", "ok", "warn", "bad", "text-2", "mute"];
+/** Workflow canvas tokens, expressed as references to semantic tokens. */
+declare const canvas: {
+    readonly 'canvas-bg': "bg";
+    readonly 'canvas-grid': "line";
+    readonly 'canvas-node': "panel";
+    readonly 'canvas-node-line': "line-2";
+    readonly edge: "line-2";
+    readonly 'edge-hover': "text-2";
+    readonly 'edge-active': "signal";
+    readonly execution: "ok";
+};
+declare const fonts: {
+    readonly display: "'Bricolage Grotesque Variable', 'Instrument Sans Variable', ui-sans-serif, system-ui, sans-serif";
+    readonly body: "'Instrument Sans Variable', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif";
+    readonly mono: "'JetBrains Mono Variable', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
+};
+declare const radius: {
+    readonly sm: "4px";
+    readonly md: "6px";
+    readonly lg: "10px";
+    readonly xl: "14px";
+    readonly '2xl': "20px";
+    readonly full: "9999px";
+};
+/** 4-point spacing scale. */
+declare const space: {
+    readonly 1: "4px";
+    readonly 2: "8px";
+    readonly 3: "12px";
+    readonly 4: "16px";
+    readonly 5: "24px";
+    readonly 6: "32px";
+    readonly 7: "48px";
+    readonly 8: "64px";
+};
+interface TypeStyle {
+    size: string;
+    lineHeight: string;
+    letterSpacing?: string;
+    family?: keyof typeof fonts;
+    weight?: number;
+    transform?: 'uppercase';
+    /** Bricolage optical size axis. */
+    opsz?: number;
+}
+/** The type scale. Marketing sizes come from the site; `ui-*` are the dense app sizes. */
+declare const type: Record<string, TypeStyle>;
+declare const motion: {
+    readonly 'duration-fast': "150ms";
+    readonly 'duration-base': "200ms";
+    readonly 'duration-slow': "300ms";
+    readonly 'duration-enter': "600ms";
+    readonly 'ease-enter': "cubic-bezier(0.2, 0.7, 0.2, 1)";
+};
+declare const layout: {
+    readonly max: "1200px";
+    readonly gutter: "clamp(20px, 4vw, 40px)";
+    readonly 'section-y': "clamp(64px, 9vw, 128px)";
+    readonly 'section-y-tight': "clamp(40px, 6vw, 80px)";
+};
+declare const breakpoints: {
+    readonly sm: "640px";
+    readonly md: "768px";
+    readonly lg: "1024px";
+    readonly xl: "1280px";
+    readonly '2xl': "1536px";
+    /** Site nav collapses here. */
+    readonly nav: "1180px";
+    readonly wide: "1340px";
+};
+declare const z: {
+    readonly base: 0;
+    readonly raised: 10;
+    readonly sticky: 50;
+    readonly dropdown: 100;
+    readonly modal: 200;
+    readonly toast: 300;
+};
+declare const focus: {
+    /** Keyboard focus ring on any element. */
+    readonly ring: "2px solid var(--signal)";
+    readonly 'ring-offset': "3px";
+    /** Form controls: soft halo instead of an outline. */
+    readonly 'field-ring': "0 0 0 3px var(--signal-soft)";
+};
+
+type Ramp = Record<RampStep, string>;
+/** Derives the 50–950 ramp for a base colour: hue from the base, lightness from the shape. */
+declare function buildRamp(baseHex: string): Ramp;
+
+/**
+ * Small colour utilities: sRGB ⇄ OKLCH, hex parsing, HSL triplets.
+ * Dependency-free so the token build can run under plain Node.
+ */
+interface Rgb {
+    r: number;
+    g: number;
+    b: number;
+}
+interface Oklch {
+    l: number;
+    c: number;
+    h: number;
+}
+declare function hexToRgb(hex: string): Rgb;
+declare function rgbToHex({ r, g, b }: Rgb): string;
+/** "95 200 255" — the channel form Tailwind's `<alpha-value>` colours need. */
+declare function rgbChannels(hex: string): string;
+/** "204 100% 68.6%" — the HSL triplet form the shadcn-era variables used. */
+declare function hslTriplet(hex: string): string;
+declare function rgbToOklch(rgb: Rgb): Oklch;
+/**
+ * OKLCH → sRGB hex. If the colour is out of gamut the chroma is reduced until it fits,
+ * which keeps lightness and hue (what the eye keys on) intact.
+ */
+declare function oklchToHex(color: Oklch): string;
+/** Relative luminance (WCAG). */
+declare function luminance(hex: string): number;
+/** WCAG contrast ratio between two hex colours. */
+declare function contrast(a: string, b: string): number;
+
+export { type Palette, type RampStep, type RampedColor, type ThemeName, type TypeStyle, breakpoints, buildRamp, canvas, contrast, data, focus, fonts, hexToRgb, hslTriplet, layout, luminance, motion, neutral, oklchToHex, palettes, radius, rampShape, rampSteps, rampedColors, rgbChannels, rgbToHex, rgbToOklch, space, type, z };