@decoda-ui/tokens 0.1.0

package/dist/colors.d.ts

@@ -0,0 +1,93 @@
+/** Cifra theme values from Decoda UI Figma and cifra's source CSS. */
+export declare const cifraLightColors: {
+    readonly background: "#f3f7fa";
+    readonly foreground: "#0a1820";
+    readonly card: "#ffffff";
+    readonly cardForeground: "#0a1820";
+    readonly popover: "#ffffff";
+    readonly popoverForeground: "#0a1820";
+    readonly primary: "#086f94";
+    readonly primaryForeground: "#ffffff";
+    readonly brandPrimary: "#086f94";
+    readonly brandGradientStart: "#55d8ee";
+    readonly brandGradientEnd: "#2794ff";
+    readonly brandGradientHoverStart: "#88e7f6";
+    readonly brandGradientHoverEnd: "#50aeff";
+    readonly brandGradientBorder: "#2f9fdc";
+    readonly brandForeground: "#061721";
+    readonly secondary: "#ffffff";
+    readonly secondaryForeground: "#0a1820";
+    readonly secondaryBorder: "#7a95a3";
+    readonly secondaryHover: "#e9f1f6";
+    readonly muted: "#e6eef3";
+    readonly mutedForeground: "#4f6a79";
+    readonly accent: "#e2edf3";
+    readonly accentForeground: "#0a1820";
+    readonly destructive: "#b91c1c";
+    readonly destructiveSurface: "#fbeeee";
+    readonly destructiveBorder: "#e9a7a7";
+    readonly success: "#15803d";
+    readonly warning: "#8a5a05";
+    readonly caution: "#b45309";
+    readonly cautionForeground: "#ffffff";
+    readonly border: "rgb(23 84 110 / 0.2)";
+    readonly input: "rgb(23 84 110 / 0.62)";
+    readonly ring: "#086f94";
+    readonly chart1: "#1f7fb8";
+    readonly chart2: "#e0602c";
+    readonly chart3: "#4a3aa7";
+    readonly chart4: "#138a60";
+    readonly chart5: "#a87400";
+    readonly chart6: "#c9457d";
+    readonly chart7: "#b463f6";
+    readonly chartOther: "#7d8f9b";
+    readonly lineSoft: "#d5e2ea";
+    readonly overlay: "rgb(10 24 32 / 0.4)";
+};
+export type ColorRole = keyof typeof cifraLightColors;
+export type ColorRoles = Record<ColorRole, string>;
+export declare const cifraDarkColors: {
+    background: string;
+    foreground: string;
+    card: string;
+    cardForeground: string;
+    popover: string;
+    popoverForeground: string;
+    primary: string;
+    primaryForeground: string;
+    brandPrimary: string;
+    brandGradientStart: string;
+    brandGradientEnd: string;
+    brandGradientHoverStart: string;
+    brandGradientHoverEnd: string;
+    brandGradientBorder: string;
+    brandForeground: string;
+    secondary: string;
+    secondaryForeground: string;
+    secondaryBorder: string;
+    secondaryHover: string;
+    muted: string;
+    mutedForeground: string;
+    accent: string;
+    accentForeground: string;
+    destructive: string;
+    destructiveSurface: string;
+    destructiveBorder: string;
+    success: string;
+    warning: string;
+    caution: string;
+    cautionForeground: string;
+    border: string;
+    input: string;
+    ring: string;
+    chart1: string;
+    chart2: string;
+    chart3: string;
+    chart4: string;
+    chart5: string;
+    chart6: string;
+    chart7: string;
+    chartOther: string;
+    lineSoft: string;
+    overlay: string;
+};

package/dist/colors.js

@@ -0,0 +1,91 @@
+/** Cifra theme values from Decoda UI Figma and cifra's source CSS. */
+export const cifraLightColors = {
+    background: '#f3f7fa',
+    foreground: '#0a1820',
+    card: '#ffffff',
+    cardForeground: '#0a1820',
+    popover: '#ffffff',
+    popoverForeground: '#0a1820',
+    primary: '#086f94',
+    primaryForeground: '#ffffff',
+    brandPrimary: '#086f94',
+    brandGradientStart: '#55d8ee',
+    brandGradientEnd: '#2794ff',
+    brandGradientHoverStart: '#88e7f6',
+    brandGradientHoverEnd: '#50aeff',
+    brandGradientBorder: '#2f9fdc',
+    brandForeground: '#061721',
+    secondary: '#ffffff',
+    secondaryForeground: '#0a1820',
+    secondaryBorder: '#7a95a3',
+    secondaryHover: '#e9f1f6',
+    muted: '#e6eef3',
+    mutedForeground: '#4f6a79',
+    accent: '#e2edf3',
+    accentForeground: '#0a1820',
+    destructive: '#b91c1c',
+    destructiveSurface: '#fbeeee',
+    destructiveBorder: '#e9a7a7',
+    success: '#15803d',
+    warning: '#8a5a05',
+    caution: '#b45309',
+    cautionForeground: '#ffffff',
+    border: 'rgb(23 84 110 / 0.2)',
+    input: 'rgb(23 84 110 / 0.62)',
+    ring: '#086f94',
+    chart1: '#1f7fb8',
+    chart2: '#e0602c',
+    chart3: '#4a3aa7',
+    chart4: '#138a60',
+    chart5: '#a87400',
+    chart6: '#c9457d',
+    chart7: '#b463f6',
+    chartOther: '#7d8f9b',
+    lineSoft: '#d5e2ea',
+    overlay: 'rgb(10 24 32 / 0.4)'
+};
+export const cifraDarkColors = {
+    background: '#060c10',
+    foreground: '#f1f7fc',
+    card: '#0b151c',
+    cardForeground: '#f1f7fc',
+    popover: '#0b151c',
+    popoverForeground: '#f1f7fc',
+    primary: '#60d9f5',
+    primaryForeground: '#061721',
+    brandPrimary: '#60d9f5',
+    brandGradientStart: '#55d8ee',
+    brandGradientEnd: '#2794ff',
+    brandGradientHoverStart: '#88e7f6',
+    brandGradientHoverEnd: '#50aeff',
+    brandGradientBorder: '#4dbdf9',
+    brandForeground: '#061721',
+    secondary: '#0b141a',
+    secondaryForeground: '#f1f7fc',
+    secondaryBorder: '#2b3a45',
+    secondaryHover: '#14232b',
+    muted: '#0f1b22',
+    mutedForeground: '#94aaba',
+    accent: '#14232b',
+    accentForeground: '#f1f7fc',
+    destructive: '#f87171',
+    destructiveSurface: '#2b171a',
+    destructiveBorder: '#88424a',
+    success: '#4ade80',
+    warning: '#f2b23a',
+    caution: '#fbbf24',
+    cautionForeground: '#1a1204',
+    border: 'rgb(113 186 214 / 0.18)',
+    input: 'rgb(113 186 214 / 0.55)',
+    ring: '#60d9f5',
+    chart1: '#2f9fd6',
+    chart2: '#d95926',
+    chart3: '#9085e9',
+    chart4: '#199e70',
+    chart5: '#c98500',
+    chart6: '#d55181',
+    chart7: '#993ccf',
+    chartOther: '#5f7684',
+    lineSoft: '#1c303b',
+    overlay: 'rgb(6 12 16 / 0.7)'
+};

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { cifraLightColors, cifraDarkColors } from './colors.js';
+export type { ColorRole, ColorRoles } from './colors.js';
+export { space, radius, controlSize, fontFamily, duration } from './scales.js';
+export { createTheme, cifraLight, cifraDark, foundations } from './theme.js';
+export type { DecodaTheme, ThemeOverrides } from './theme.js';
+export { sharePercent } from './progress.js';

package/dist/index.js

@@ -0,0 +1,4 @@
+export { cifraLightColors, cifraDarkColors } from './colors.js';
+export { space, radius, controlSize, fontFamily, duration } from './scales.js';
+export { createTheme, cifraLight, cifraDark, foundations } from './theme.js';
+export { sharePercent } from './progress.js';

package/dist/progress.d.ts

@@ -0,0 +1,2 @@
+/** Convert a share (0–1) to a bounded percentage for painted progress. */
+export declare function sharePercent(share: number): number;

package/dist/progress.js

@@ -0,0 +1,6 @@
+/** Convert a share (0–1) to a bounded percentage for painted progress. */
+export function sharePercent(share) {
+    if (!Number.isFinite(share))
+        return 0;
+    return Math.max(0, Math.min(100, share * 100));
+}

package/dist/scales.d.ts

@@ -0,0 +1,41 @@
+export declare const space: {
+    readonly none: 0;
+    readonly xxs: 2;
+    readonly xs: 4;
+    readonly sm: 8;
+    readonly md: 12;
+    readonly lg: 16;
+    readonly xl: 20;
+    readonly '2xl': 24;
+    readonly '3xl': 32;
+    readonly '4xl': 40;
+    readonly '5xl': 48;
+    readonly '6xl': 64;
+};
+export declare const radius: {
+    readonly none: 0;
+    readonly xs: 4;
+    readonly sm: 8;
+    readonly md: 9;
+    readonly lg: 12;
+    readonly xl: 14;
+    readonly '2xl': 20;
+    readonly pill: 999;
+};
+export declare const controlSize: {
+    readonly sm: 32;
+    readonly md: 40;
+    readonly touch: 44;
+    readonly lg: 50;
+    readonly xl: 56;
+};
+export declare const fontFamily: {
+    readonly body: "Manrope";
+    readonly mono: "IBM Plex Mono";
+    readonly display: "Biysk";
+};
+export declare const duration: {
+    readonly fast: 120;
+    readonly normal: 200;
+    readonly slow: 300;
+};

package/dist/scales.js

@@ -0,0 +1,37 @@
+export const space = {
+    none: 0,
+    xxs: 2,
+    xs: 4,
+    sm: 8,
+    md: 12,
+    lg: 16,
+    xl: 20,
+    '2xl': 24,
+    '3xl': 32,
+    '4xl': 40,
+    '5xl': 48,
+    '6xl': 64
+};
+export const radius = {
+    none: 0,
+    xs: 4,
+    sm: 8,
+    md: 9,
+    lg: 12,
+    xl: 14,
+    '2xl': 20,
+    pill: 999
+};
+export const controlSize = {
+    sm: 32,
+    md: 40,
+    touch: 44,
+    lg: 50,
+    xl: 56
+};
+export const fontFamily = {
+    body: 'Manrope',
+    mono: 'IBM Plex Mono',
+    display: 'Biysk'
+};
+export const duration = { fast: 120, normal: 200, slow: 300 };

package/dist/theme.d.ts

@@ -0,0 +1,70 @@
+import { type ColorRoles } from './colors.js';
+import { controlSize, duration, fontFamily, radius, space } from './scales.js';
+export interface DecodaTheme {
+    color: ColorRoles;
+    space: {
+        [K in keyof typeof space]: number;
+    };
+    radius: {
+        [K in keyof typeof radius]: number;
+    };
+    controlSize: {
+        [K in keyof typeof controlSize]: number;
+    };
+    fontFamily: {
+        [K in keyof typeof fontFamily]: string;
+    };
+    duration: {
+        [K in keyof typeof duration]: number;
+    };
+}
+export type ThemeOverrides = {
+    [K in keyof DecodaTheme]?: Partial<DecodaTheme[K]>;
+};
+/** Shallow merge per token group keeps overrides explicit and tree-shakeable. */
+export declare function createTheme(color: ColorRoles, overrides?: ThemeOverrides): DecodaTheme;
+export declare const cifraLight: DecodaTheme;
+export declare const cifraDark: DecodaTheme;
+export declare const foundations: {
+    space: {
+        readonly none: 0;
+        readonly xxs: 2;
+        readonly xs: 4;
+        readonly sm: 8;
+        readonly md: 12;
+        readonly lg: 16;
+        readonly xl: 20;
+        readonly '2xl': 24;
+        readonly '3xl': 32;
+        readonly '4xl': 40;
+        readonly '5xl': 48;
+        readonly '6xl': 64;
+    };
+    radius: {
+        readonly none: 0;
+        readonly xs: 4;
+        readonly sm: 8;
+        readonly md: 9;
+        readonly lg: 12;
+        readonly xl: 14;
+        readonly '2xl': 20;
+        readonly pill: 999;
+    };
+    controlSize: {
+        readonly sm: 32;
+        readonly md: 40;
+        readonly touch: 44;
+        readonly lg: 50;
+        readonly xl: 56;
+    };
+    fontFamily: {
+        readonly body: "Manrope";
+        readonly mono: "IBM Plex Mono";
+        readonly display: "Biysk";
+    };
+    duration: {
+        readonly fast: 120;
+        readonly normal: 200;
+        readonly slow: 300;
+    };
+};

package/dist/theme.js

@@ -0,0 +1,17 @@
+import { cifraDarkColors, cifraLightColors } from './colors.js';
+import { controlSize, duration, fontFamily, radius, space } from './scales.js';
+const base = { space, radius, controlSize, fontFamily, duration };
+/** Shallow merge per token group keeps overrides explicit and tree-shakeable. */
+export function createTheme(color, overrides = {}) {
+    return {
+        color: { ...color, ...overrides.color },
+        space: { ...space, ...overrides.space },
+        radius: { ...radius, ...overrides.radius },
+        controlSize: { ...controlSize, ...overrides.controlSize },
+        fontFamily: { ...fontFamily, ...overrides.fontFamily },
+        duration: { ...duration, ...overrides.duration }
+    };
+}
+export const cifraLight = createTheme(cifraLightColors);
+export const cifraDark = createTheme(cifraDarkColors);
+export const foundations = base;

package/dist/theme.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/theme.test.js

@@ -0,0 +1,21 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import { cifraDark, cifraLight, createTheme } from './theme.js';
+import { sharePercent } from './progress.js';
+test('a custom theme does not mutate Cifra defaults', () => {
+    const custom = createTheme(cifraLight.color, {
+        color: { primary: '#123456' },
+        radius: { md: 16 }
+    });
+    assert.equal(custom.color.primary, '#123456');
+    assert.equal(custom.radius.md, 16);
+    assert.equal(cifraLight.color.primary, '#086f94');
+    assert.equal(cifraLight.radius.md, 9);
+    assert.equal(cifraDark.color.primary, '#60d9f5');
+});
+test('a visual share stays inside its track', () => {
+    assert.equal(sharePercent(-0.4), 0);
+    assert.equal(sharePercent(0.25), 25);
+    assert.equal(sharePercent(1.8), 100);
+    assert.equal(sharePercent(Number.NaN), 0);
+});

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@decoda-ui/tokens",
+  "version": "0.1.0",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "pnpm build && node --test dist/theme.test.js"
+  }
+}