rastack 0.0.24 → 0.0.26

package/src/tokens/types.ts

@@ -0,0 +1,125 @@
+/**
+ * Design-token model — the **W3C Design Tokens (DTCG) format**.
+ *
+ * A design token is the smallest, named, platform-agnostic decision about how
+ * the UI looks: a colour, a spacing step, a radius, a font family. The DTCG
+ * community-group spec (https://tr.designtokens.org) is the industry standard
+ * serialization: a nested JSON tree of **groups** whose leaves are **tokens**,
+ * each carrying a `$value`, an optional `$type`, and an optional
+ * `$description`. Values may be literals or **aliases** — a `"{group.token}"`
+ * reference to another token.
+ *
+ * ```jsonc
+ * {
+ *   "color": {
+ *     "$type": "color",
+ *     "brand": { "500": { "$value": "#4F6BFF" } },
+ *     "text":  { "$value": "{color.brand.500}" }   // alias
+ *   }
+ * }
+ * ```
+ *
+ * This module is the pure data model shared by the compiler
+ * (`tools/src/tokens/{resolve,css,ts}.ts`) and the React runtime
+ * (`rastack/theme`). It has no filesystem or React dependency, so it builds for
+ * the browser exactly like `rastack/define`.
+ */
+
+/** The DTCG `$type`s this framework understands. */
+export type TokenType =
+  | "color"
+  | "dimension"
+  | "fontFamily"
+  | "fontWeight"
+  | "duration"
+  | "cubicBezier"
+  | "number"
+  | "shadow"
+  | "border"
+  | "typography"
+  | "transition";
+
+/** A shadow token value (single shadow or a stack of them). */
+export interface ShadowValue {
+  offsetX: string | number;
+  offsetY: string | number;
+  blur?: string | number;
+  spread?: string | number;
+  color: string;
+  inset?: boolean;
+}
+
+/** Anything that can appear as a token `$value` (including aliases as strings). */
+export type TokenValue =
+  | string
+  | number
+  | boolean
+  | ShadowValue
+  | ShadowValue[]
+  | string[]
+  | Record<string, unknown>;
+
+/** A single design token — a group leaf. Identified by the presence of `$value`. */
+export interface DesignToken {
+  $value: TokenValue;
+  $type?: TokenType;
+  $description?: string;
+  $extensions?: Record<string, unknown>;
+}
+
+/**
+ * A group node: named children (tokens or nested groups) plus optional group
+ * metadata. `$type` set on a group is **inherited** by descendant tokens that
+ * don't declare their own — the standard DTCG type-inheritance rule.
+ *
+ * Typed loosely (`any` children) on purpose: the tree is arbitrary-depth data,
+ * mirroring how the codebase types OpenAPI documents.
+ */
+export interface TokenGroup {
+  $type?: TokenType;
+  $description?: string;
+  [child: string]: DesignToken | TokenGroup | TokenType | string | undefined;
+}
+
+/** The root of a token tree. */
+export type TokenDocument = TokenGroup;
+
+/**
+ * A themeable token document: a base tree plus named **modes** (e.g. `light`,
+ * `dark`) that override a subset of tokens. Modes compile to CSS selector
+ * scopes, so a running app flips theme by toggling one attribute.
+ */
+export interface ThemedTokens {
+  /** Base tokens — the values that apply in every mode. */
+  tokens: TokenDocument;
+  /** Per-mode overrides, deep-merged over the base. */
+  modes?: Record<string, TokenDocument>;
+  /** Which mode is the default (emitted onto `:root`). */
+  defaultMode?: string;
+}
+
+/** A token after alias resolution and `$type` inheritance — ready to emit. */
+export interface ResolvedToken {
+  /** Dotted path, e.g. `color.brand.500`. */
+  path: string;
+  /** The token's `$type` (inherited or inferred). */
+  type: TokenType | undefined;
+  /** The literal value with every alias followed to its source. */
+  value: TokenValue;
+  /**
+   * If this token is a direct alias of another, the target's dotted path.
+   * Emitters use it to preserve the reference (CSS `var(--target)`), so theming
+   * cascades instead of being flattened away.
+   */
+  aliasOf?: string;
+  $description?: string;
+}
+
+/** True when a node is a token leaf (has `$value`) rather than a group. */
+export function isToken(node: unknown): node is DesignToken {
+  return (
+    typeof node === "object" &&
+    node !== null &&
+    Object.prototype.hasOwnProperty.call(node, "$value")
+  );
+}

package/test/tokens.spec.ts

@@ -0,0 +1,302 @@
+import { existsSync, mkdirSync, readFileSync, rmSync, writeFileSync } from "fs";
+import { join } from "path";
+import {
+  defineTheme,
+  defineTokens,
+  emitCss,
+  emitTs,
+  cssVarName,
+  formatCssValue,
+  ref,
+  resolveTokens,
+  resolveTheme,
+  t,
+  ThemedTokens,
+  TokenDocument,
+} from "../src/tokens";
+import { compileTokens, loadTokens } from "../src/tokens/compile";
+import { renderStudio } from "../src/tokens/studio";
+
+const workRoot = join(__dirname, "tokens-fixtures");
+
+function findTok<T extends { path: string }>(list: T[], path: string): T {
+  const found = list.find((x) => x.path === path);
+  if (!found) throw new Error(`missing token ${path}`);
+  return found;
+}
+
+describe("design tokens — resolution", () => {
+  it("inherits a group $type down to its tokens", () => {
+    const doc: TokenDocument = {
+      color: { $type: "color", brand: { 500: { $value: "#4F6BFF" } } },
+    };
+    const resolved = resolveTokens(doc);
+    expect(findTok(resolved, "color.brand.500").type).toBe("color");
+  });
+
+  it("resolves alias values transitively and records the immediate target", () => {
+    const doc: TokenDocument = {
+      color: {
+        $type: "color",
+        brand: { 500: { $value: "#4F6BFF" } },
+        accent: { $value: ref("color.brand.500") },
+        cta: { $value: ref("color.accent") },
+      },
+    };
+    const resolved = resolveTokens(doc);
+    const accent = findTok(resolved, "color.accent");
+    const cta = findTok(resolved, "color.cta");
+    expect(accent.value).toBe("#4F6BFF");
+    expect(accent.aliasOf).toBe("color.brand.500");
+    // transitive: cta -> accent -> brand.500
+    expect(cta.value).toBe("#4F6BFF");
+    expect(cta.aliasOf).toBe("color.accent");
+  });
+
+  it("throws on a dangling alias", () => {
+    const doc: TokenDocument = { color: { a: { $type: "color", $value: ref("color.missing") } } };
+    expect(() => resolveTokens(doc)).toThrow(/unknown token "color.missing"/);
+  });
+
+  it("throws on an alias cycle", () => {
+    const doc: TokenDocument = {
+      a: { $type: "color", $value: ref("b") },
+      b: { $type: "color", $value: ref("a") },
+    };
+    expect(() => resolveTokens(doc)).toThrow(/cycle/i);
+  });
+
+  it("names CSS variables from dotted paths (kebab, camel-split, prefix)", () => {
+    expect(cssVarName("color.brand.500")).toBe("--color-brand-500");
+    expect(cssVarName("color.surfaceAlt")).toBe("--color-surface-alt");
+    expect(cssVarName("color.accent", "rs")).toBe("--rs-color-accent");
+  });
+});
+
+describe("design tokens — DSL builders", () => {
+  it("t.dimension coerces bare numbers to px; t.duration to ms", () => {
+    const doc = defineTokens({
+      space: { md: t.dimension(16) },
+      motion: { fast: t.duration(150) },
+    }).tokens;
+    const resolved = resolveTokens(doc);
+    expect(findTok(resolved, "space.md").value).toBe("16px");
+    expect(findTok(resolved, "motion.fast").value).toBe("150ms");
+  });
+
+  it("defineTokens normalises a bare tree and a themed shape alike", () => {
+    const bare = defineTokens({ color: { bg: t.color("#fff") } });
+    expect(bare.tokens.color).toBeDefined();
+    expect(bare.modes).toEqual({});
+
+    const themed = defineTokens({ tokens: { color: { bg: t.color("#fff") } }, defaultMode: "light" });
+    expect(themed.defaultMode).toBe("light");
+  });
+});
+
+describe("design tokens — CSS emission", () => {
+  const themed: ThemedTokens = {
+    tokens: {
+      color: {
+        $type: "color",
+        brand: { 500: { $value: "#4F6BFF" } },
+        accent: { $value: ref("color.brand.500") },
+        bg: { $value: "#FFFFFF" },
+      },
+      space: { $type: "dimension", md: { $value: "16px" } },
+      font: { family: { $type: "fontFamily", sans: { $value: ["Inter", "sans-serif"] } } },
+      shadow: { $type: "shadow", sm: { $value: { offsetX: "0", offsetY: "1px", blur: "2px", color: "#0001" } } },
+    },
+    modes: { dark: { color: { bg: { $value: "#06080F" } } } },
+    defaultMode: "light",
+  };
+
+  const css = emitCss(themed);
+
+  it("emits :root custom properties", () => {
+    expect(css).toMatch(/:root\s*\{/);
+    expect(css).toContain("--color-brand-500: #4F6BFF;");
+    expect(css).toContain("--space-md: 16px;");
+  });
+
+  it("preserves aliases as var() references so themes cascade", () => {
+    expect(css).toContain("--color-accent: var(--color-brand-500);");
+  });
+
+  it("quotes font families with spaces and joins the stack", () => {
+    expect(css).toContain('--font-family-sans: Inter, sans-serif;');
+  });
+
+  it("renders shadows as box-shadow strings", () => {
+    expect(css).toContain("--shadow-sm: 0 1px 2px #0001;");
+  });
+
+  it("scopes a mode override to its selector and omits unchanged tokens", () => {
+    expect(css).toContain('[data-theme="dark"]');
+    // only bg changed in dark
+    const darkBlock = css.slice(css.indexOf('[data-theme="dark"]'));
+    expect(darkBlock).toContain("--color-bg: #06080F;");
+    expect(darkBlock).not.toContain("--color-brand-500");
+  });
+
+  it("respects a variable prefix", () => {
+    expect(emitCss(themed, { prefix: "rs" })).toContain("--rs-color-brand-500:");
+  });
+});
+
+describe("design tokens — typed TS emission", () => {
+  const base = resolveTokens({
+    color: { $type: "color", brand: { 500: { $value: "#4F6BFF" } }, surfaceAlt: { $value: "#eee" } },
+  });
+  const source = emitTs(base);
+
+  it("emits a nested theme tree of var() references", () => {
+    expect(source).toContain('"500": "var(--color-brand-500)"');
+    expect(source).toContain('surfaceAlt: "var(--color-surface-alt)"');
+  });
+
+  it("emits a TokenPath union of every token", () => {
+    expect(source).toContain('| "color.brand.500"');
+    expect(source).toContain('| "color.surfaceAlt"');
+  });
+});
+
+describe("design tokens — compile to disk", () => {
+  const outDir = join(workRoot, "out");
+  const jsonSrc = join(workRoot, "sample.tokens.json");
+
+  beforeAll(() => {
+    mkdirSync(workRoot, { recursive: true });
+    writeFileSync(
+      jsonSrc,
+      JSON.stringify({
+        tokens: { color: { $type: "color", accent: { $value: "#4F6BFF" } } },
+        modes: { dark: { color: { accent: { $value: "#8BA4FF" } } } },
+        defaultMode: "light",
+      }),
+    );
+  });
+  afterAll(() => rmSync(workRoot, { recursive: true, force: true }));
+
+  it("writes tokens.rastack.json, tokens.css and tokens.ts", () => {
+    const { files } = compileTokens(jsonSrc, outDir);
+    expect(files.map((f) => f.split("/").pop())).toEqual([
+      "tokens.rastack.json",
+      "tokens.css",
+      "tokens.ts",
+    ]);
+    for (const f of files) expect(existsSync(f)).toBe(true);
+    expect(readFileSync(join(outDir, "tokens.css"), "utf8")).toContain("--color-accent: #4F6BFF;");
+    expect(readFileSync(join(outDir, "tokens.ts"), "utf8")).toContain('| "color.accent"');
+  });
+
+  it("loadTokens parses a bare DTCG tree as well as a themed doc", () => {
+    const bareSrc = join(workRoot, "bare.tokens.json");
+    writeFileSync(bareSrc, JSON.stringify({ color: { $type: "color", bg: { $value: "#fff" } } }));
+    const themed = loadTokens(bareSrc);
+    expect(themed.tokens.color).toBeDefined();
+  });
+});
+
+describe("design tokens — studio page", () => {
+  const themed = defineTokens({
+    tokens: { color: { brand: { 500: t.color("#4F6BFF") }, accent: t.color(ref("color.brand.500")) } },
+    modes: { dark: { color: { brand: { 500: t.color("#8BA4FF") } } } },
+    defaultMode: "light",
+  });
+
+  it("renders a self-contained HTML page embedding the tokens + CSS", () => {
+    const html = renderStudio(themed, { editable: true });
+    expect(html).toMatch(/^<!doctype html>/);
+    expect(html).toContain("--color-brand-500: #4F6BFF;");
+    expect(html).toContain('id="studio-data"');
+    // the embedded payload carries the layers + raw doc for the editor
+    expect(html).toContain('"color.accent"');
+    expect(html).toContain('"editable":true');
+  });
+});
+
+describe("design tokens — defineTheme() intent layer", () => {
+  it("derives a full 50–950 brand scale from one colour, with 500 = the seed", () => {
+    const resolved = resolveTheme(defineTheme({ brand: "#4F6BFF" }));
+    expect(findTok(resolved.base, "color.brand.500").value).toBe("#4F6BFF");
+    for (const step of ["50", "100", "200", "300", "400", "600", "700", "800", "900", "950"]) {
+      expect(findTok(resolved.base, `color.brand.${step}`).value).toMatch(/^#[0-9A-F]{6}$/);
+    }
+  });
+
+  it("generates semantic tokens plus a dark mode by default", () => {
+    const themed = defineTheme({ brand: "#4F6BFF" });
+    expect(Object.keys(themed.modes ?? {})).toEqual(["dark"]);
+    const resolved = resolveTheme(themed);
+    for (const name of ["bg", "surface", "border", "text", "text-muted", "accent", "on-accent"]) {
+      expect(findTok(resolved.base, `color.${name}`)).toBeDefined();
+    }
+    // The accent is an alias of the brand ramp, and reads lighter in dark.
+    expect(findTok(resolved.base, "color.accent").aliasOf).toBe("color.brand.500");
+    expect(findTok(resolved.modes.dark, "color.accent").aliasOf).toBe("color.brand.400");
+    // dark bg is dark, light bg is white
+    expect(findTok(resolved.base, "color.bg").value).toBe("#FFFFFF");
+    expect(findTok(resolved.modes.dark, "color.bg").value).not.toBe("#FFFFFF");
+  });
+
+  it("picks a readable on-accent colour by contrast", () => {
+    expect(findTok(resolveTheme(defineTheme({ brand: "#FACC15" })).base, "color.on-accent").value).toBe("#0B1020");
+    expect(findTok(resolveTheme(defineTheme({ brand: "#1D4ED8" })).base, "color.on-accent").value).toBe("#FFFFFF");
+  });
+
+  it("maps radius keywords and honours a numeric radius", () => {
+    expect(findTok(resolveTheme(defineTheme({ brand: "#4F6BFF", radius: "sharp" })).base, "color.brand.500")).toBeDefined();
+    const r = resolveTheme(defineTheme({ brand: "#4F6BFF", radius: 20 }));
+    expect(findTok(r.base, "radius.md").value).toBe("20px");
+  });
+
+  it("lowers to the same ThemedTokens shape and compiles to valid CSS", () => {
+    const css = emitCss(defineTheme({ brand: "#4F6BFF", font: "Poppins" }));
+    expect(css).toContain("--color-brand-500: #4F6BFF;");
+    expect(css).toContain("--color-accent: var(--color-brand-500);");
+    expect(css).toContain('[data-theme="dark"]');
+    expect(css).toContain("--font-family-sans: Poppins;");
+  });
+
+  it("applies colour overrides and the extend escape hatch", () => {
+    const themed = defineTheme({
+      brand: "#4F6BFF",
+      colors: { success: "#00A86B" },
+      extend: { tokens: { z: { index: { modal: { $type: "number", $value: 1000 } } } } },
+    });
+    const base = resolveTheme(themed).base;
+    expect(findTok(base, "color.success").value).toBe("#00A86B");
+    expect(findTok(base, "z.index.modal").value).toBe(1000);
+  });
+
+  it("appearance:'light' emits no dark mode; 'dark' makes :root dark", () => {
+    expect(Object.keys(defineTheme({ brand: "#4F6BFF", appearance: "light" }).modes ?? {})).toEqual([]);
+    const dark = defineTheme({ brand: "#4F6BFF", appearance: "dark" });
+    expect(dark.defaultMode).toBe("dark");
+    expect(findTok(resolveTheme(dark).base, "color.bg").value).not.toBe("#FFFFFF");
+  });
+});
+
+describe("design tokens — the repo's own theme.tokens.ts + .json agree", () => {
+  it("the TS authoring source resolves and matches the JSON source", () => {
+    // Executed by ts-jest, importing the package by its subpath name.
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const tsThemed = require("../../tokens/theme.tokens").default as ThemedTokens;
+    const jsonThemed = loadTokens(join(__dirname, "..", "..", "tokens", "theme.tokens.json"));
+
+    const fromTs = resolveTheme(tsThemed);
+    const fromJson = resolveTheme(jsonThemed);
+
+    // Same set of token paths and the same emitted CSS values (composite types
+    // like shadows may be authored with numbers in TS and strings in JSON, but
+    // must render identically).
+    const map = (r: ReturnType<typeof resolveTheme>) =>
+      Object.fromEntries(r.base.map((tok) => [tok.path, formatCssValue(tok)]));
+    expect(map(fromTs)).toEqual(map(fromJson));
+
+    // Alias cascades through the dark mode (accent follows brand.500).
+    const darkAccent = findTok(fromTs.modes.dark, "color.accent");
+    expect(darkAccent.value).toBe("#8BA4FF");
+  });
+});

package/theme/index.ts

@@ -0,0 +1,9 @@
+/**
+ * `rastack/theme` — the React runtime that applies a design-token set: a
+ * `<ThemeProvider>` that injects the token CSS variables and manages light/dark
+ * (and any custom) modes, plus `useTheme` / `useToken` / `useThemeMode` hooks.
+ *
+ * Tokens are authored with `rastack/tokens` and compiled by `rastack tokens`;
+ * this is where they light up the UI.
+ */
+export * from "./provider";

package/theme/provider.tsx

@@ -0,0 +1,157 @@
+import React, {
+  createContext,
+  ReactNode,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import {
+  emitCss,
+  formatCssValue,
+  cssVarName,
+  resolveTheme,
+  ThemedTokens,
+} from "../src/tokens";
+
+/**
+ * `rastack/theme` — apply a design-token set to a React app.
+ *
+ * The counterpart to `rastack tokens`: where the CLI emits static CSS, this
+ * provider injects the same CSS custom properties at runtime and manages the
+ * active **mode** (light / dark / …). Because every value is a CSS variable,
+ * flipping mode re-cascades instantly with no re-render of consuming
+ * components — exactly like `RAStackProvider` reconfiguring the API in place.
+ *
+ * ```tsx
+ * import tokens from "../tokens/theme.tokens";        // defineTokens(...)
+ * import { ThemeProvider, useToken, useThemeMode } from "rastack/theme";
+ *
+ * <ThemeProvider tokens={tokens}>
+ *   <App />
+ * </ThemeProvider>
+ *
+ * const accent = useToken("color.accent");            // "var(--color-accent)"
+ * const [mode, setMode] = useThemeMode();             // "light" | "dark" | …
+ * ```
+ */
+
+export interface ThemeContextValue {
+  /** The active mode, or `undefined` for the base (mode-less) theme. */
+  mode: string | undefined;
+  /** Switch mode; unknown modes fall back to the base. */
+  setMode: (mode: string | undefined) => void;
+  /** The modes this theme defines. */
+  modes: string[];
+  /** `token("color.accent")` → `"var(--color-accent)"`. */
+  token: (path: string) => string;
+  /**
+   * The resolved *literal* value of a token in the current mode
+   * (`"#4F6BFF"`), for contexts without CSS variables (React Native, canvas).
+   */
+  value: (path: string) => string | undefined;
+}
+
+const ThemeContext = createContext<ThemeContextValue | null>(null);
+
+export interface ThemeProviderProps {
+  /** A `defineTokens(...)` result, or a bare `{ tokens, modes }` document. */
+  tokens: ThemedTokens;
+  /** Initial mode. Defaults to the token set's `defaultMode`. */
+  mode?: string;
+  /** Prefix every CSS variable (`prefix="rs"` → `--rs-color-accent`). */
+  prefix?: string;
+  /**
+   * The attribute set on `<html>` for the active mode. Default `data-theme`,
+   * matching the emitted CSS's `[data-theme="dark"]` selectors.
+   */
+  modeAttribute?: string;
+  /**
+   * Where to scope the CSS. `document` (default) injects a `<style>` and sets
+   * the mode attribute on `<html>`. Pass an element to scope to a subtree.
+   */
+  target?: HTMLElement | "document";
+  children: ReactNode;
+}
+
+export function ThemeProvider({
+  tokens,
+  mode: initialMode,
+  prefix = "",
+  modeAttribute = "data-theme",
+  target = "document",
+  children,
+}: ThemeProviderProps): JSX.Element {
+  const resolved = useMemo(() => resolveTheme(tokens), [tokens]);
+  const css = useMemo(() => emitCss(tokens, { prefix }), [tokens, prefix]);
+  const [mode, setMode] = useState<string | undefined>(
+    initialMode ?? resolved.defaultMode,
+  );
+
+  // Inject (and keep in sync) the generated CSS as a single <style> element.
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    const style = document.createElement("style");
+    style.setAttribute("data-rastack-theme", "");
+    style.textContent = css;
+    document.head.appendChild(style);
+    return () => {
+      style.remove();
+    };
+  }, [css]);
+
+  // Reflect the active mode onto the target element's attribute.
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    const el =
+      target === "document" ? document.documentElement : (target as HTMLElement);
+    const prev = el.getAttribute(modeAttribute);
+    if (mode) el.setAttribute(modeAttribute, mode);
+    else el.removeAttribute(modeAttribute);
+    return () => {
+      if (prev != null) el.setAttribute(modeAttribute, prev);
+      else el.removeAttribute(modeAttribute);
+    };
+  }, [mode, modeAttribute, target]);
+
+  const ctx = useMemo<ThemeContextValue>(() => {
+    const active = (mode && resolved.modes[mode]) || resolved.base;
+    const literals = new Map(active.map((t) => [t.path, formatCssValue(t)]));
+    return {
+      mode,
+      setMode,
+      modes: Object.keys(resolved.modes),
+      token: (path) => `var(${cssVarName(path, prefix)})`,
+      value: (path) => literals.get(path),
+    };
+  }, [mode, resolved, prefix]);
+
+  return <ThemeContext.Provider value={ctx}>{children}</ThemeContext.Provider>;
+}
+
+/** The full theme context (mode, setMode, token/value lookups). */
+export function useTheme(): ThemeContextValue {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) throw new Error("useTheme must be used within a <ThemeProvider>.");
+  return ctx;
+}
+
+/** `[mode, setMode]` — the active mode and a switcher. */
+export function useThemeMode(): [string | undefined, (mode: string | undefined) => void] {
+  const { mode, setMode } = useTheme();
+  return [mode, setMode];
+}
+
+/** A token's CSS-variable reference: `useToken("color.accent")` → `"var(--color-accent)"`. */
+export function useToken(path: string): string {
+  return useTheme().token(path);
+}
+
+/**
+ * A token's resolved *literal* value in the active mode (`"#4F6BFF"`). Use on
+ * platforms without CSS variables (React Native); on the web prefer
+ * {@link useToken} so mode switches don't re-render.
+ */
+export function useTokenValue(path: string): string | undefined {
+  return useTheme().value(path);
+}

package/tokens.ts

@@ -0,0 +1,9 @@
+/**
+ * `rastack/tokens` — the design-system authoring DSL and pure token engine.
+ *
+ * Author your design system in TypeScript with {@link defineTokens} + {@link t},
+ * following the industry-standard W3C Design Tokens (DTCG) format. `rastack
+ * tokens` compiles it to CSS custom properties + a typed theme; `rastack/theme`
+ * applies it at runtime. Filesystem-free, so it also runs in the browser.
+ */
+export * from "./src/tokens";

package/tsconfig.json

@@ -11,6 +11,9 @@
     ],
     "outDir": "dist",
     "rootDir": "src",
+    "paths": {
+      "rastack/tokens": ["./tokens.ts"]
+    },
     "declaration": true,
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,