@aginies/tokens 0.1.0

package/dist/tokens.json

@@ -0,0 +1,357 @@
+{
+  "version": "0.1.0",
+  "color": {
+    "dark": {
+      "bg": "#070A14",
+      "bg-2": "#0B1020",
+      "panel": "#0E1426",
+      "panel-2": "#121A30",
+      "panel-3": "#182240",
+      "line": "#1B2238",
+      "line-2": "#2A3350",
+      "line-3": "#3C4560",
+      "text": "#E7ECF7",
+      "text-2": "#A9B2CC",
+      "mute": "#7F8AA8",
+      "signal": "#5FC8FF",
+      "signal-2": "#01B1F7",
+      "signal-ink": "#06111F",
+      "signal-soft": "rgba(95, 200, 255, 0.12)",
+      "ok": "#4FD1A0",
+      "ok-ink": "#06111F",
+      "ok-soft": "rgba(79, 209, 160, 0.14)",
+      "warn": "#F2B35B",
+      "warn-ink": "#06111F",
+      "warn-soft": "rgba(242, 179, 91, 0.14)",
+      "bad": "#FF7A7A",
+      "bad-ink": "#06111F",
+      "bad-soft": "rgba(255, 122, 122, 0.14)",
+      "shadow": "0 20px 60px rgba(0, 0, 0, 0.45)",
+      "shadow-sm": "0 8px 24px rgba(0, 0, 0, 0.35)",
+      "overlay": "rgba(7, 10, 20, 0.6)",
+      "ramps": {
+        "signal": {
+          "50": "#EBF7FF",
+          "100": "#D3EEFF",
+          "200": "#ADDEFB",
+          "300": "#7AC7F1",
+          "400": "#4BAFE2",
+          "500": "#2196CA",
+          "600": "#087DAC",
+          "700": "#01648B",
+          "800": "#024D6B",
+          "900": "#00364E",
+          "950": "#002435"
+        },
+        "ok": {
+          "50": "#E7FBF1",
+          "100": "#D0F3E2",
+          "200": "#ABE5CA",
+          "300": "#76D2AB",
+          "400": "#41BC8E",
+          "500": "#10A376",
+          "600": "#008861",
+          "700": "#056D4E",
+          "800": "#05543B",
+          "900": "#013C29",
+          "950": "#01281A"
+        },
+        "warn": {
+          "50": "#FFF3E5",
+          "100": "#FBE6CC",
+          "200": "#F1D0A6",
+          "300": "#E3B272",
+          "400": "#D09643",
+          "500": "#B97D19",
+          "600": "#9C6601",
+          "700": "#7D5205",
+          "800": "#613E00",
+          "900": "#452B01",
+          "950": "#2F1C00"
+        },
+        "bad": {
+          "50": "#FFF2F1",
+          "100": "#FFE2E0",
+          "200": "#FFC5C2",
+          "300": "#FE9E9B",
+          "400": "#F47777",
+          "500": "#DC5A5D",
+          "600": "#BC4548",
+          "700": "#9B3337",
+          "800": "#782629",
+          "900": "#561A1C",
+          "950": "#3C0E10"
+        }
+      }
+    },
+    "light": {
+      "bg": "#F4F6FA",
+      "bg-2": "#FFFFFF",
+      "panel": "#FFFFFF",
+      "panel-2": "#EEF1F7",
+      "panel-3": "#E4E9F2",
+      "line": "#DCE1EC",
+      "line-2": "#C5CCDB",
+      "line-3": "#A9B2CC",
+      "text": "#0B1220",
+      "text-2": "#3C4560",
+      "mute": "#6B7590",
+      "signal": "#0077C2",
+      "signal-2": "#005E9A",
+      "signal-ink": "#FFFFFF",
+      "signal-soft": "rgba(0, 119, 194, 0.10)",
+      "ok": "#0B7F57",
+      "ok-ink": "#FFFFFF",
+      "ok-soft": "rgba(11, 127, 87, 0.12)",
+      "warn": "#9C5A12",
+      "warn-ink": "#FFFFFF",
+      "warn-soft": "rgba(156, 90, 18, 0.12)",
+      "bad": "#B3261E",
+      "bad-ink": "#FFFFFF",
+      "bad-soft": "rgba(179, 38, 30, 0.10)",
+      "shadow": "0 20px 50px rgba(11, 18, 32, 0.10)",
+      "shadow-sm": "0 8px 20px rgba(11, 18, 32, 0.08)",
+      "overlay": "rgba(11, 18, 32, 0.45)",
+      "ramps": {
+        "signal": {
+          "50": "#EEF6FF",
+          "100": "#D9ECFF",
+          "200": "#B5DBFE",
+          "300": "#82C3FD",
+          "400": "#52AAF4",
+          "500": "#2E90DD",
+          "600": "#1578BF",
+          "700": "#03609D",
+          "800": "#034979",
+          "900": "#033457",
+          "950": "#01223D"
+        },
+        "ok": {
+          "50": "#EAFAF1",
+          "100": "#D5F2E2",
+          "200": "#B4E3CA",
+          "300": "#87CEAB",
+          "400": "#5EB88F",
+          "500": "#3CA076",
+          "600": "#268660",
+          "700": "#166D4B",
+          "800": "#105339",
+          "900": "#0A3B28",
+          "950": "#022819"
+        },
+        "warn": {
+          "50": "#FFF3E9",
+          "100": "#FDE4D1",
+          "200": "#F4CDAE",
+          "300": "#E7AF7F",
+          "400": "#D59257",
+          "500": "#BD7838",
+          "600": "#A16224",
+          "700": "#844D16",
+          "800": "#653B0F",
+          "900": "#492909",
+          "950": "#321A03"
+        },
+        "bad": {
+          "50": "#FFF2F0",
+          "100": "#FEE2DD",
+          "200": "#FFC6BD",
+          "300": "#FE9F91",
+          "400": "#FB7363",
+          "500": "#E25547",
+          "600": "#C23F34",
+          "700": "#A02E25",
+          "800": "#7C221B",
+          "900": "#591711",
+          "950": "#3F0B08"
+        }
+      }
+    },
+    "neutral": {
+      "50": "#F4F6FA",
+      "100": "#EEF1F7",
+      "200": "#DCE1EC",
+      "300": "#C5CCDB",
+      "400": "#A9B2CC",
+      "500": "#7F8AA8",
+      "600": "#6B7590",
+      "700": "#3C4560",
+      "800": "#2A3350",
+      "900": "#1B2238",
+      "950": "#0B1020"
+    },
+    "data": [
+      "signal",
+      "ok",
+      "warn",
+      "bad",
+      "text-2",
+      "mute"
+    ],
+    "canvas": {
+      "canvas-bg": "bg",
+      "canvas-grid": "line",
+      "canvas-node": "panel",
+      "canvas-node-line": "line-2",
+      "edge": "line-2",
+      "edge-hover": "text-2",
+      "edge-active": "signal",
+      "execution": "ok"
+    }
+  },
+  "fonts": {
+    "display": "'Bricolage Grotesque Variable', 'Instrument Sans Variable', ui-sans-serif, system-ui, sans-serif",
+    "body": "'Instrument Sans Variable', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif",
+    "mono": "'JetBrains Mono Variable', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"
+  },
+  "radius": {
+    "sm": "4px",
+    "md": "6px",
+    "lg": "10px",
+    "xl": "14px",
+    "2xl": "20px",
+    "full": "9999px"
+  },
+  "space": {
+    "1": "4px",
+    "2": "8px",
+    "3": "12px",
+    "4": "16px",
+    "5": "24px",
+    "6": "32px",
+    "7": "48px",
+    "8": "64px"
+  },
+  "type": {
+    "display": {
+      "size": "clamp(40px, 6.4vw, 88px)",
+      "lineHeight": "0.96",
+      "letterSpacing": "-0.04em",
+      "family": "display",
+      "weight": 600,
+      "opsz": 96
+    },
+    "h1": {
+      "size": "clamp(36px, 5.2vw, 68px)",
+      "lineHeight": "1",
+      "letterSpacing": "-0.035em",
+      "family": "display",
+      "weight": 600,
+      "opsz": 96
+    },
+    "h2": {
+      "size": "clamp(28px, 3.8vw, 50px)",
+      "lineHeight": "1.04",
+      "letterSpacing": "-0.03em",
+      "family": "display",
+      "weight": 600,
+      "opsz": 72
+    },
+    "h3": {
+      "size": "clamp(20px, 2vw, 26px)",
+      "lineHeight": "1.2",
+      "letterSpacing": "-0.02em",
+      "family": "display",
+      "weight": 600
+    },
+    "h4": {
+      "size": "17px",
+      "lineHeight": "1.3",
+      "letterSpacing": "-0.01em",
+      "family": "display",
+      "weight": 600
+    },
+    "stat": {
+      "size": "clamp(30px, 3.4vw, 44px)",
+      "lineHeight": "1",
+      "letterSpacing": "-0.03em",
+      "family": "display",
+      "weight": 600
+    },
+    "lede": {
+      "size": "clamp(17px, 1.4vw, 20px)",
+      "lineHeight": "1.5"
+    },
+    "body": {
+      "size": "16px",
+      "lineHeight": "1.55"
+    },
+    "body-2": {
+      "size": "15px",
+      "lineHeight": "1.5"
+    },
+    "small": {
+      "size": "13.5px",
+      "lineHeight": "1.45"
+    },
+    "eyebrow": {
+      "size": "11.5px",
+      "lineHeight": "1",
+      "letterSpacing": "0.14em",
+      "family": "mono",
+      "weight": 500,
+      "transform": "uppercase"
+    },
+    "label": {
+      "size": "11px",
+      "lineHeight": "1",
+      "letterSpacing": "0.1em",
+      "family": "mono",
+      "weight": 500,
+      "transform": "uppercase"
+    },
+    "tag": {
+      "size": "11.5px",
+      "lineHeight": "1",
+      "letterSpacing": "0.04em",
+      "family": "mono"
+    },
+    "ui": {
+      "size": "13px",
+      "lineHeight": "1.4"
+    },
+    "ui-sm": {
+      "size": "12px",
+      "lineHeight": "1.35"
+    },
+    "ui-xs": {
+      "size": "11px",
+      "lineHeight": "1.3"
+    }
+  },
+  "motion": {
+    "duration-fast": "150ms",
+    "duration-base": "200ms",
+    "duration-slow": "300ms",
+    "duration-enter": "600ms",
+    "ease-enter": "cubic-bezier(0.2, 0.7, 0.2, 1)"
+  },
+  "layout": {
+    "max": "1200px",
+    "gutter": "clamp(20px, 4vw, 40px)",
+    "section-y": "clamp(64px, 9vw, 128px)",
+    "section-y-tight": "clamp(40px, 6vw, 80px)"
+  },
+  "breakpoints": {
+    "sm": "640px",
+    "md": "768px",
+    "lg": "1024px",
+    "xl": "1280px",
+    "2xl": "1536px",
+    "nav": "1180px",
+    "wide": "1340px"
+  },
+  "z": {
+    "base": 0,
+    "raised": 10,
+    "sticky": 50,
+    "dropdown": 100,
+    "modal": 200,
+    "toast": 300
+  },
+  "focus": {
+    "ring": "2px solid var(--signal)",
+    "ring-offset": "3px",
+    "field-ring": "0 0 0 3px var(--signal-soft)"
+  }
+}

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@aginies/tokens",
+  "version": "0.1.0",
+  "description": "Aginies design tokens: CSS custom properties, JSON and a Tailwind CSS preset",
+  "license": "MIT",
+  "author": "Abra Partners",
+  "homepage": "https://www.aginies.com",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/abrapartners/agiwebuikit.git",
+    "directory": "packages/tokens"
+  },
+  "keywords": [
+    "aginies",
+    "design-tokens",
+    "design-system",
+    "tailwind",
+    "css-variables"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./tailwind-preset": {
+      "types": "./dist/preset.d.ts",
+      "import": "./dist/preset.js",
+      "require": "./dist/preset.cjs"
+    },
+    "./tokens.css": "./dist/tokens.css",
+    "./legacy-bridge.css": "./dist/legacy-bridge.css",
+    "./tokens.json": "./dist/tokens.json"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "generate": "node --experimental-strip-types --no-warnings src/build.ts",
+    "build": "tsup && node --experimental-strip-types --no-warnings src/build.ts",
+    "type-check": "tsc --noEmit",
+    "test": "vitest run --passWithNoTests",
+    "sync:platform": "node --experimental-strip-types --no-warnings scripts/sync-platform.ts"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "tailwindcss": ">=3.4.0 <4"
+  },
+  "peerDependenciesMeta": {
+    "tailwindcss": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.4.17"
+  }
+}