onecart-ui-tokens 0.1.0

package/.tokens.config.json

@@ -0,0 +1,16 @@
+{
+  "tokenFormat": "TokensStudio",
+  "figmaFileId": "",
+  "inputFile": "./tokens-studio.json",
+  "outputDir": "./src/styles/tokens",
+  "platforms": [
+    "css",
+    "cssAutocomplete",
+    "scss",
+    "scssMap",
+    "less",
+    "js",
+    "ts",
+    "json"
+  ]
+}

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "onecart-ui-tokens",
+  "version": "0.1.0",
+  "description": "Design tokens for OneCart UI built via Style Dictionary",
+  "scripts": {
+    "generate-tokens": "npx figma-token-engine",
+    "generate-tokens-safe": "node scripts/generate-safe.js",
+    "build": "style-dictionary build --config style-dictionary.config.js && node scripts/generate-dts.js"
+  },
+  "devDependencies": {
+    "style-dictionary": "^4.0.0",
+    "figma-token-engine": "^0.3.0"
+  },
+  "exports": {
+    "./web": {
+      "types": "./build/web/tokens.d.ts",
+      "import": "./build/web/tokens.js",
+      "default": "./build/web/tokens.js"
+    },
+    "./mobile": {
+      "types": "./build/mobile/tokens.d.ts",
+      "default": "./build/mobile/tokens.js"
+    },
+    "./styles": {
+      "types": "./src/styles/tokens/facade.d.ts",
+      "import": "./src/styles/tokens/facade.js",
+      "default": "./src/styles/tokens/facade.js"
+    },
+    ".": {
+      "types": "./build/web/tokens.d.ts",
+      "import": "./build/web/tokens.js",
+      "default": "./build/web/tokens.js"
+    }
+  }
+}

package/scripts/generate-dts.js

@@ -0,0 +1,39 @@
+#!/usr/bin/env node
+/** Enhanced DTS generator including raw styles tokens */
+const fs = require("fs");
+const path = require("path");
+
+const targets = [
+  {
+    js: path.join(__dirname, "..", "build", "web", "tokens.js"),
+    dts: path.join(__dirname, "..", "build", "web", "tokens.d.ts"),
+  },
+  {
+    js: path.join(__dirname, "..", "build", "mobile", "tokens.js"),
+    dts: path.join(__dirname, "..", "build", "mobile", "tokens.d.ts"),
+  },
+  {
+    js: path.join(__dirname, "..", "src", "styles", "tokens", "tokens.js"),
+    dts: path.join(__dirname, "..", "src", "styles", "tokens", "tokens.d.ts"),
+  },
+];
+
+function extractExports(jsContent) {
+  const regex = /export const (\w+)\s*=\s*/g;
+  const names = [];
+  let match;
+  while ((match = regex.exec(jsContent))) {
+    names.push(match[1]);
+  }
+  return names;
+}
+
+for (const t of targets) {
+  if (!fs.existsSync(t.js)) continue;
+  const content = fs.readFileSync(t.js, "utf8");
+  const names = extractExports(content);
+  const lines = names.map((n) => `export const ${n}: string | number;`);
+  const header = "/** Auto-generated token type declarations */";
+  fs.writeFileSync(t.dts, header + "\n" + lines.join("\n") + "\n");
+  console.log("Wrote", path.relative(process.cwd(), t.dts));
+}

package/src/styles/tokens/facade.cjs

@@ -0,0 +1,32 @@
+// CommonJS wrapper for Jest (which runs in CJS context under ts-jest by default)
+const raw = require("./tokens.cjs");
+module.exports = {
+  ACTION_PRIMARY_DEFAULT: raw.ACTION_PRIMARY_DEFAULT,
+  ACTION_PRIMARY_HOVER: raw.ACTION_PRIMARY_HOVER,
+  ACTION_PRIMARY_ACTIVE: raw.ACTION_PRIMARY_ACTIVE,
+  ACTION_PRIMARY_DISABLED: raw.ACTION_PRIMARY_DISABLED,
+  ACTION_SECONDARY_DEFAULT: raw.ACTION_SECONDARY_DEFAULT,
+  ACTION_SECONDARY_HOVER: raw.ACTION_SECONDARY_HOVER,
+  ACTION_SECONDARY_ACTIVE: raw.ACTION_SECONDARY_ACTIVE,
+  ACTION_SECONDARY_DISABLED: raw.ACTION_SECONDARY_DISABLED,
+  ACTION_TERTIARY_DEFAULT: raw.ACTION_TERTIARY_DEFAULT,
+  ACTION_TERTIARY_HOVER: raw.ACTION_TERTIARY_HOVER,
+  ACTION_TERTIARY_ACTIVE: raw.ACTION_TERTIARY_ACTIVE,
+  ACTION_TERTIARY_DISABLE: raw.ACTION_TERTIARY_DISABLE,
+  ACTION_DESTRUCTIVE_DEFAULT: raw.ACTION_DESTRUCTIVE_DEFAULT,
+  ACTION_DESTRUCTIVE_HOVER: raw.ACTION_DESTRUCTIVE_HOVER,
+  ACTION_DESTRUCTIVE_ACTIVE: raw.ACTION_DESTRUCTIVE_ACTIVE,
+  ACTION_DESTRUCTIVE_DISABLE: raw.ACTION_DESTRUCTIVE_DISABLE,
+  NEUTRAL_80: raw.NEUTRAL_80,
+  BORDER_WIDTH_BUTTON_DEFAULT: raw.BORDER_WIDTH_BUTTON_DEFAULT,
+  BORDER_WIDTH_BUTTON_HOVER: raw.BORDER_WIDTH_BUTTON_HOVER,
+  BORDER_WIDTH_BUTTON_PRESSED: raw.BORDER_WIDTH_BUTTON_PRESSED,
+  SPACE_0: raw.SPACE_0,
+  COMPONENT_CARD_SM: raw.COMPONENT_CARD_SM,
+  LAYOUT_SPACING_INLINE_MD: raw.LAYOUT_SPACING_INLINE_MD,
+  LAYOUT_SPACING_INLINE_XS: raw.LAYOUT_SPACING_INLINE_XS,
+  BORDER_RADIUS_BUTTON_FULL: raw.BORDER_RADIUS_BUTTON_FULL,
+  FONT_FAMILIES_CAMPTON: raw.FONT_FAMILIES_CAMPTON,
+  MEDIUM: raw.MEDIUM,
+  raw,
+};

package/src/styles/tokens/facade.d.ts

@@ -0,0 +1,29 @@
+// Type declarations for curated button token subset
+export const ACTION_PRIMARY_DEFAULT: string;
+export const ACTION_PRIMARY_HOVER: string;
+export const ACTION_PRIMARY_ACTIVE: string;
+export const ACTION_PRIMARY_DISABLED: string;
+export const ACTION_SECONDARY_DEFAULT: string;
+export const ACTION_SECONDARY_HOVER: string;
+export const ACTION_SECONDARY_ACTIVE: string;
+export const ACTION_SECONDARY_DISABLED: string;
+export const ACTION_TERTIARY_DEFAULT: string;
+export const ACTION_TERTIARY_HOVER: string;
+export const ACTION_TERTIARY_ACTIVE: string;
+export const ACTION_TERTIARY_DISABLE: string;
+export const ACTION_DESTRUCTIVE_DEFAULT: string;
+export const ACTION_DESTRUCTIVE_HOVER: string;
+export const ACTION_DESTRUCTIVE_ACTIVE: string;
+export const ACTION_DESTRUCTIVE_DISABLE: string;
+export const NEUTRAL_80: string;
+export const BORDER_WIDTH_BUTTON_DEFAULT: string;
+export const BORDER_WIDTH_BUTTON_HOVER: string;
+export const BORDER_WIDTH_BUTTON_PRESSED: string;
+export const SPACE_0: string | number;
+export const COMPONENT_CARD_SM: string;
+export const LAYOUT_SPACING_INLINE_MD: string;
+export const LAYOUT_SPACING_INLINE_XS: string;
+export const BORDER_RADIUS_BUTTON_FULL: string;
+export const FONT_FAMILIES_CAMPTON: string;
+export const MEDIUM: string | number;
+export const raw: Record<string, string | number>;

package/src/styles/tokens/facade.js

@@ -0,0 +1,33 @@
+// Facade: curated subset of raw Figma tokens for button usage
+// Generated manually; consider automating selection logic later.
+import * as raw from "./tokens.js";
+
+export const ACTION_PRIMARY_DEFAULT = raw.ACTION_PRIMARY_DEFAULT;
+export const ACTION_PRIMARY_HOVER = raw.ACTION_PRIMARY_HOVER;
+export const ACTION_PRIMARY_ACTIVE = raw.ACTION_PRIMARY_ACTIVE;
+export const ACTION_PRIMARY_DISABLED = raw.ACTION_PRIMARY_DISABLED;
+export const ACTION_SECONDARY_DEFAULT = raw.ACTION_SECONDARY_DEFAULT;
+export const ACTION_SECONDARY_HOVER = raw.ACTION_SECONDARY_HOVER;
+export const ACTION_SECONDARY_ACTIVE = raw.ACTION_SECONDARY_ACTIVE;
+export const ACTION_SECONDARY_DISABLED = raw.ACTION_SECONDARY_DISABLED;
+export const ACTION_TERTIARY_DEFAULT = raw.ACTION_TERTIARY_DEFAULT;
+export const ACTION_TERTIARY_HOVER = raw.ACTION_TERTIARY_HOVER;
+export const ACTION_TERTIARY_ACTIVE = raw.ACTION_TERTIARY_ACTIVE;
+export const ACTION_TERTIARY_DISABLE = raw.ACTION_TERTIARY_DISABLE;
+export const ACTION_DESTRUCTIVE_DEFAULT = raw.ACTION_DESTRUCTIVE_DEFAULT;
+export const ACTION_DESTRUCTIVE_HOVER = raw.ACTION_DESTRUCTIVE_HOVER;
+export const ACTION_DESTRUCTIVE_ACTIVE = raw.ACTION_DESTRUCTIVE_ACTIVE;
+export const ACTION_DESTRUCTIVE_DISABLE = raw.ACTION_DESTRUCTIVE_DISABLE;
+export const NEUTRAL_80 = raw.NEUTRAL_80;
+export const BORDER_WIDTH_BUTTON_DEFAULT = raw.BORDER_WIDTH_BUTTON_DEFAULT;
+export const BORDER_WIDTH_BUTTON_HOVER = raw.BORDER_WIDTH_BUTTON_HOVER;
+export const BORDER_WIDTH_BUTTON_PRESSED = raw.BORDER_WIDTH_BUTTON_PRESSED;
+export const SPACE_0 = raw.SPACE_0;
+export const COMPONENT_CARD_SM = raw.COMPONENT_CARD_SM;
+export const LAYOUT_SPACING_INLINE_MD = raw.LAYOUT_SPACING_INLINE_MD;
+export const LAYOUT_SPACING_INLINE_XS = raw.LAYOUT_SPACING_INLINE_XS;
+export const BORDER_RADIUS_BUTTON_FULL = raw.BORDER_RADIUS_BUTTON_FULL;
+export const FONT_FAMILIES_CAMPTON = raw.FONT_FAMILIES_CAMPTON;
+export const MEDIUM = raw.MEDIUM;
+// expose raw for rare escape hatches (avoid in production components)
+export { raw };