@genfeedai/design-tokens 1.0.2

package/gen-vars.scss

@@ -0,0 +1,72 @@
+/**
+ * gen-* overlay design variables
+ *
+ * Composition layer on top of the base token system.
+ * Import this in any app that uses the gen-* design language
+ * (Cloud, Core, extensions, etc.) to get the shared accent,
+ * shadow-glow, and glass overlay vars.
+ *
+ * Usage:
+ *   @use '@genfeedai/design-tokens/gen-vars.scss';
+ */
+
+@layer base {
+  /* Dark theme (default) */
+  :root,
+  [data-theme='dark'] {
+    --gen-accent: 0 0% 100%;
+    --gen-accent-bright: 0 0% 90%;
+    --gen-accent-bg: rgba(255, 255, 255, 0.05);
+    --gen-accent-tint: rgba(255, 255, 255, 0.08);
+    --gen-accent-border: rgba(255, 255, 255, 0.14);
+    --gen-accent-border-strong: rgba(255, 255, 255, 0.2);
+    --gen-accent-glow: rgba(255, 255, 255, 0.15);
+    --gen-accent-hover: rgba(255, 255, 255, 0.25);
+    --gen-accent-selection: rgba(255, 255, 255, 0.3);
+    --gen-accent-text: rgba(255, 255, 255, 0.4);
+    --gen-accent-heading: rgba(255, 255, 255, 0.6);
+
+    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
+    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
+    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
+    --shadow-glow: 0 0 20px rgba(255, 255, 255, 0.15);
+    --shadow-glow-sm: 0 0 20px rgba(255, 255, 255, 0.08);
+    --shadow-glow-md: 0 0 40px rgba(255, 255, 255, 0.12);
+    --shadow-glow-lg: 0 0 60px rgba(255, 255, 255, 0.15);
+
+    --nn-bg-glass: rgba(255, 255, 255, 0.05);
+    --nn-bg-glass-hover: rgba(255, 255, 255, 0.08);
+    --nn-border-subtle: rgba(255, 255, 255, 0.08);
+    --nn-border-hover: rgba(255, 255, 255, 0.15);
+    --nn-border-active: rgba(255, 255, 255, 0.25);
+  }
+
+  /* Light theme overrides */
+  [data-theme='light'] {
+    --gen-accent: 0 0% 0%;
+    --gen-accent-bright: 0 0% 15%;
+    --gen-accent-bg: rgba(0, 0, 0, 0.03);
+    --gen-accent-tint: rgba(0, 0, 0, 0.05);
+    --gen-accent-border: rgba(0, 0, 0, 0.08);
+    --gen-accent-border-strong: rgba(0, 0, 0, 0.15);
+    --gen-accent-glow: rgba(0, 0, 0, 0.06);
+    --gen-accent-hover: rgba(0, 0, 0, 0.15);
+    --gen-accent-selection: rgba(0, 0, 0, 0.2);
+    --gen-accent-text: rgba(0, 0, 0, 0.5);
+    --gen-accent-heading: rgba(0, 0, 0, 0.7);
+
+    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
+    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
+    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
+    --shadow-glow: none;
+    --shadow-glow-sm: 0 1px 4px rgba(0, 0, 0, 0.06);
+    --shadow-glow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
+    --shadow-glow-lg: 0 8px 30px rgba(0, 0, 0, 0.1);
+
+    --nn-bg-glass: rgba(0, 0, 0, 0.02);
+    --nn-bg-glass-hover: rgba(0, 0, 0, 0.04);
+    --nn-border-subtle: rgba(0, 0, 0, 0.06);
+    --nn-border-hover: rgba(0, 0, 0, 0.12);
+    --nn-border-active: rgba(0, 0, 0, 0.2);
+  }
+}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "description": "Shared design tokens for Genfeed web, mobile, and extension surfaces",
+  "devDependencies": {
+    "tsc-alias": "1.8.16",
+    "typescript": "5.9.3"
+  },
+  "exports": {
+    ".": {
+      "default": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./gen-vars.scss": "./gen-vars.scss",
+    "./web-tokens.scss": "./web-tokens.scss"
+  },
+  "files": [
+    "dist",
+    "web-tokens.scss",
+    "gen-vars.scss"
+  ],
+  "license": "MIT",
+  "main": "./dist/index.js",
+  "name": "@genfeedai/design-tokens",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "directory": "design-tokens",
+    "type": "git",
+    "url": "git+https://github.com/genfeedai/packages.git"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json && bunx tsc-alias -p tsconfig.json",
+    "clean": "rm -rf dist tsconfig.tsbuildinfo"
+  },
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ],
+  "types": "./dist/index.d.ts",
+  "version": "1.0.2"
+}

package/web-tokens.scss

@@ -0,0 +1,116 @@
+@layer base {
+  :root,
+  [data-theme='light'] {
+    --background: 60 10% 98%;
+    --background-secondary: 60 9% 96%;
+    --background-tertiary: 60 7% 94%;
+    --foreground: 0 0% 5%;
+    --card: 60 9% 96%;
+    --card-foreground: 0 0% 5%;
+    --popover: 60 10% 98%;
+    --popover-foreground: 0 0% 5%;
+    --primary: 221 83% 53%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 60 7% 94%;
+    --secondary-foreground: 0 0% 5%;
+    --muted: 60 7% 94%;
+    --muted-foreground: 0 0% 44%;
+    --accent: 60 9% 96%;
+    --accent-foreground: 0 0% 5%;
+    --destructive: 0 84% 60%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 45 5% 85%;
+    --input: 45 5% 85%;
+    --ring: 221 83% 53%;
+    --success: 142 71% 45%;
+    --success-foreground: 0 0% 100%;
+    --warning: 38 92% 50%;
+    --warning-foreground: 0 0% 0%;
+    --info: 199 89% 48%;
+    --info-foreground: 0 0% 100%;
+    --surface: 12 12 12;
+    --fill: 12 12 12;
+    --edge: 12 12 12;
+    --inv: 12 12 12;
+    --inv-fg: 250 250 250;
+    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    --font-serif: Georgia, 'Times New Roman', serif;
+    --font-serif-italic: Georgia, 'Times New Roman', serif;
+    --space-xs: 4px;
+    --space-sm: 8px;
+    --space-md: 12px;
+    --space-lg: 16px;
+    --space-xl: 20px;
+    --space-xxl: 24px;
+    --space-xxxl: 32px;
+    --space-xxxxl: 48px;
+    --radius-none: 0px;
+    --radius-sm: 6px;
+    --radius-md: 8px;
+    --radius-lg: 12px;
+    --radius-xl: 16px;
+    --radius-xxl: 24px;
+    --radius-full: 999px;
+    --motion-duration-fast: 200ms;
+    --motion-duration-normal: 300ms;
+    --motion-duration-slow: 500ms;
+    --motion-ease-standard: cubic-bezier(0.32, 0.72, 0, 1);
+  }
+
+  [data-theme='dark'] {
+    --background: 0 0% 4%;
+    --background-secondary: 0 0% 6%;
+    --background-tertiary: 0 0% 10%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 8%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 8%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 100%;
+    --primary-foreground: 0 0% 0%;
+    --secondary: 0 0% 11%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 11%;
+    --muted-foreground: 0 0% 58%;
+    --accent: 0 0% 11%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62% 50%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 0 0% 15%;
+    --input: 0 0% 15%;
+    --ring: 0 0% 100%;
+    --success: 142 71% 45%;
+    --success-foreground: 0 0% 100%;
+    --warning: 38 92% 50%;
+    --warning-foreground: 0 0% 0%;
+    --info: 199 89% 48%;
+    --info-foreground: 0 0% 100%;
+    --surface: 255 255 255;
+    --fill: 255 255 255;
+    --edge: 255 255 255;
+    --inv: 255 255 255;
+    --inv-fg: 10 10 10;
+    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    --font-serif: Georgia, 'Times New Roman', serif;
+    --font-serif-italic: Georgia, 'Times New Roman', serif;
+    --space-xs: 4px;
+    --space-sm: 8px;
+    --space-md: 12px;
+    --space-lg: 16px;
+    --space-xl: 20px;
+    --space-xxl: 24px;
+    --space-xxxl: 32px;
+    --space-xxxxl: 48px;
+    --radius-none: 0px;
+    --radius-sm: 6px;
+    --radius-md: 8px;
+    --radius-lg: 12px;
+    --radius-xl: 16px;
+    --radius-xxl: 24px;
+    --radius-full: 999px;
+    --motion-duration-fast: 200ms;
+    --motion-duration-normal: 300ms;
+    --motion-duration-slow: 500ms;
+    --motion-ease-standard: cubic-bezier(0.32, 0.72, 0, 1);
+  }
+}