@nice2dev/design-tokens 1.0.28

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@nice2dev/design-tokens",
+  "version": "1.0.28",
+  "description": "W3C Design Tokens for Nice2Dev UI with CLI generator",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./tokens/*": "./tokens/*",
+    "./cli": "./dist/cli/index.js"
+  },
+  "bin": {
+    "nice-tokens": "./dist/cli/index.js"
+  },
+  "files": [
+    "dist",
+    "tokens"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts src/cli/index.ts --format esm,cjs --dts --clean",
+    "dev": "tsup src/index.ts src/cli/index.ts --format esm,cjs --dts --watch",
+    "generate": "node dist/cli/index.js generate",
+    "test": "vitest run --passWithNoTests",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "chroma-js": "^2.4.2",
+    "commander": "^12.1.0",
+    "fast-glob": "^3.3.2"
+  },
+  "devDependencies": {
+    "@types/chroma-js": "^2.4.4",
+    "@types/node": "^20.14.10",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2",
+    "vitest": "^2.1.8"
+  },
+  "keywords": [
+    "design-tokens",
+    "w3c",
+    "css-variables",
+    "nice2dev",
+    "design-system"
+  ],
+  "author": "Nice2Dev",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nicetogit/nice2dev-ui.git",
+    "directory": "packages/design-tokens"
+  }
+}

package/tokens/animation.json

@@ -0,0 +1,147 @@
+{
+  "$name": "animation",
+  "$description": "Animation and transition tokens (W3C Format)",
+
+  "duration": {
+    "$type": "duration",
+
+    "instant": { "$value": "0ms" },
+    "fastest": { "$value": "50ms" },
+    "faster": { "$value": "100ms" },
+    "fast": { "$value": "150ms" },
+    "normal": { "$value": "200ms" },
+    "slow": { "$value": "300ms" },
+    "slower": { "$value": "400ms" },
+    "slowest": { "$value": "500ms" },
+    "deliberate": { "$value": "700ms" }
+  },
+
+  "easing": {
+    "$type": "cubicBezier",
+
+    "linear": { "$value": [0, 0, 1, 1] },
+    "ease": { "$value": [0.25, 0.1, 0.25, 1] },
+    "ease-in": { "$value": [0.42, 0, 1, 1] },
+    "ease-out": { "$value": [0, 0, 0.58, 1] },
+    "ease-in-out": { "$value": [0.42, 0, 0.58, 1] },
+
+    "ease-in-quad": { "$value": [0.55, 0.085, 0.68, 0.53] },
+    "ease-out-quad": { "$value": [0.25, 0.46, 0.45, 0.94] },
+    "ease-in-out-quad": { "$value": [0.455, 0.03, 0.515, 0.955] },
+
+    "ease-in-cubic": { "$value": [0.55, 0.055, 0.675, 0.19] },
+    "ease-out-cubic": { "$value": [0.215, 0.61, 0.355, 1] },
+    "ease-in-out-cubic": { "$value": [0.645, 0.045, 0.355, 1] },
+
+    "ease-in-expo": { "$value": [0.95, 0.05, 0.795, 0.035] },
+    "ease-out-expo": { "$value": [0.19, 1, 0.22, 1] },
+    "ease-in-out-expo": { "$value": [1, 0, 0, 1] },
+
+    "ease-in-back": { "$value": [0.6, -0.28, 0.735, 0.045] },
+    "ease-out-back": { "$value": [0.175, 0.885, 0.32, 1.275] },
+    "ease-in-out-back": { "$value": [0.68, -0.55, 0.265, 1.55] },
+
+    "spring": { "$value": [0.5, 1.8, 0.5, 0.8] },
+    "bounce": { "$value": [0.175, 0.885, 0.32, 1.275] }
+  },
+
+  "transition": {
+    "$description": "Common transition presets",
+
+    "none": {
+      "$value": "none"
+    },
+
+    "all": {
+      "$value": "all {duration.normal} {easing.ease-out}"
+    },
+
+    "colors": {
+      "$value": "color {duration.fast} {easing.ease}, background-color {duration.fast} {easing.ease}, border-color {duration.fast} {easing.ease}"
+    },
+
+    "opacity": {
+      "$value": "opacity {duration.fast} {easing.ease}"
+    },
+
+    "shadow": {
+      "$value": "box-shadow {duration.normal} {easing.ease-out}"
+    },
+
+    "transform": {
+      "$value": "transform {duration.normal} {easing.ease-out}"
+    },
+
+    "width": {
+      "$value": "width {duration.slow} {easing.ease-out}"
+    },
+
+    "height": {
+      "$value": "height {duration.slow} {easing.ease-out}"
+    }
+  },
+
+  "animation": {
+    "$description": "Keyframe animation presets",
+
+    "spin": {
+      "keyframes": "@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }",
+      "value": "spin 1s linear infinite"
+    },
+
+    "ping": {
+      "keyframes": "@keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }",
+      "value": "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite"
+    },
+
+    "pulse": {
+      "keyframes": "@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }",
+      "value": "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
+    },
+
+    "bounce": {
+      "keyframes": "@keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } }",
+      "value": "bounce 1s infinite"
+    },
+
+    "fade-in": {
+      "keyframes": "@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }",
+      "value": "fadeIn {duration.normal} {easing.ease-out}"
+    },
+
+    "fade-out": {
+      "keyframes": "@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }",
+      "value": "fadeOut {duration.normal} {easing.ease-in}"
+    },
+
+    "slide-in-up": {
+      "keyframes": "@keyframes slideInUp { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }",
+      "value": "slideInUp {duration.normal} {easing.ease-out}"
+    },
+
+    "slide-in-down": {
+      "keyframes": "@keyframes slideInDown { from { transform: translateY(-10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }",
+      "value": "slideInDown {duration.normal} {easing.ease-out}"
+    },
+
+    "scale-in": {
+      "keyframes": "@keyframes scaleIn { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }",
+      "value": "scaleIn {duration.fast} {easing.ease-out}"
+    },
+
+    "shake": {
+      "keyframes": "@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }",
+      "value": "shake 0.5s ease-in-out"
+    }
+  },
+
+  "motion": {
+    "$description": "Reduced motion alternatives",
+
+    "reduced": {
+      "transition-duration": { "$value": "0.01ms" },
+      "animation-duration": { "$value": "0.01ms" },
+      "animation-iteration-count": { "$value": "1" }
+    }
+  }
+}

package/tokens/colors.json

@@ -0,0 +1,184 @@
+{
+  "$name": "@nice2dev/design-tokens",
+  "$version": "1.0.9",
+  "$description": "Nice2Dev Design System Tokens (W3C Format)",
+
+  "color": {
+    "$type": "color",
+
+    "primitive": {
+      "$description": "Raw color palette - do not use directly in components",
+
+      "blue": {
+        "50": { "$value": "#eff6ff" },
+        "100": { "$value": "#dbeafe" },
+        "200": { "$value": "#bfdbfe" },
+        "300": { "$value": "#93c5fd" },
+        "400": { "$value": "#60a5fa" },
+        "500": { "$value": "#3b82f6" },
+        "600": { "$value": "#2563eb" },
+        "700": { "$value": "#1d4ed8" },
+        "800": { "$value": "#1e40af" },
+        "900": { "$value": "#1e3a8a" },
+        "950": { "$value": "#172554" }
+      },
+
+      "green": {
+        "50": { "$value": "#f0fdf4" },
+        "100": { "$value": "#dcfce7" },
+        "200": { "$value": "#bbf7d0" },
+        "300": { "$value": "#86efac" },
+        "400": { "$value": "#4ade80" },
+        "500": { "$value": "#22c55e" },
+        "600": { "$value": "#16a34a" },
+        "700": { "$value": "#15803d" },
+        "800": { "$value": "#166534" },
+        "900": { "$value": "#14532d" },
+        "950": { "$value": "#052e16" }
+      },
+
+      "red": {
+        "50": { "$value": "#fef2f2" },
+        "100": { "$value": "#fee2e2" },
+        "200": { "$value": "#fecaca" },
+        "300": { "$value": "#fca5a5" },
+        "400": { "$value": "#f87171" },
+        "500": { "$value": "#ef4444" },
+        "600": { "$value": "#dc2626" },
+        "700": { "$value": "#b91c1c" },
+        "800": { "$value": "#991b1b" },
+        "900": { "$value": "#7f1d1d" },
+        "950": { "$value": "#450a0a" }
+      },
+
+      "amber": {
+        "50": { "$value": "#fffbeb" },
+        "100": { "$value": "#fef3c7" },
+        "200": { "$value": "#fde68a" },
+        "300": { "$value": "#fcd34d" },
+        "400": { "$value": "#fbbf24" },
+        "500": { "$value": "#f59e0b" },
+        "600": { "$value": "#d97706" },
+        "700": { "$value": "#b45309" },
+        "800": { "$value": "#92400e" },
+        "900": { "$value": "#78350f" },
+        "950": { "$value": "#451a03" }
+      },
+
+      "gray": {
+        "50": { "$value": "#f9fafb" },
+        "100": { "$value": "#f3f4f6" },
+        "200": { "$value": "#e5e7eb" },
+        "300": { "$value": "#d1d5db" },
+        "400": { "$value": "#9ca3af" },
+        "500": { "$value": "#6b7280" },
+        "600": { "$value": "#4b5563" },
+        "700": { "$value": "#374151" },
+        "800": { "$value": "#1f2937" },
+        "900": { "$value": "#111827" },
+        "950": { "$value": "#030712" }
+      },
+
+      "slate": {
+        "50": { "$value": "#f8fafc" },
+        "100": { "$value": "#f1f5f9" },
+        "200": { "$value": "#e2e8f0" },
+        "300": { "$value": "#cbd5e1" },
+        "400": { "$value": "#94a3b8" },
+        "500": { "$value": "#64748b" },
+        "600": { "$value": "#475569" },
+        "700": { "$value": "#334155" },
+        "800": { "$value": "#1e293b" },
+        "900": { "$value": "#0f172a" },
+        "950": { "$value": "#020617" }
+      },
+
+      "violet": {
+        "50": { "$value": "#f5f3ff" },
+        "100": { "$value": "#ede9fe" },
+        "200": { "$value": "#ddd6fe" },
+        "300": { "$value": "#c4b5fd" },
+        "400": { "$value": "#a78bfa" },
+        "500": { "$value": "#8b5cf6" },
+        "600": { "$value": "#7c3aed" },
+        "700": { "$value": "#6d28d9" },
+        "800": { "$value": "#5b21b6" },
+        "900": { "$value": "#4c1d95" },
+        "950": { "$value": "#2e1065" }
+      },
+
+      "cyan": {
+        "50": { "$value": "#ecfeff" },
+        "100": { "$value": "#cffafe" },
+        "200": { "$value": "#a5f3fc" },
+        "300": { "$value": "#67e8f9" },
+        "400": { "$value": "#22d3ee" },
+        "500": { "$value": "#06b6d4" },
+        "600": { "$value": "#0891b2" },
+        "700": { "$value": "#0e7490" },
+        "800": { "$value": "#155e75" },
+        "900": { "$value": "#164e63" },
+        "950": { "$value": "#083344" }
+      },
+
+      "white": { "$value": "#ffffff" },
+      "black": { "$value": "#000000" },
+      "transparent": { "$value": "transparent" }
+    },
+
+    "semantic": {
+      "$description": "Semantic colors - use these in components",
+
+      "brand": {
+        "primary": { "$value": "{color.primitive.blue.600}" },
+        "primary-hover": { "$value": "{color.primitive.blue.700}" },
+        "primary-active": { "$value": "{color.primitive.blue.800}" },
+        "primary-subtle": { "$value": "{color.primitive.blue.50}" },
+        "secondary": { "$value": "{color.primitive.violet.600}" },
+        "secondary-hover": { "$value": "{color.primitive.violet.700}" }
+      },
+
+      "feedback": {
+        "success": { "$value": "{color.primitive.green.600}" },
+        "success-subtle": { "$value": "{color.primitive.green.50}" },
+        "warning": { "$value": "{color.primitive.amber.500}" },
+        "warning-subtle": { "$value": "{color.primitive.amber.50}" },
+        "error": { "$value": "{color.primitive.red.600}" },
+        "error-subtle": { "$value": "{color.primitive.red.50}" },
+        "info": { "$value": "{color.primitive.cyan.600}" },
+        "info-subtle": { "$value": "{color.primitive.cyan.50}" }
+      },
+
+      "neutral": {
+        "background": { "$value": "{color.primitive.white}" },
+        "background-subtle": { "$value": "{color.primitive.gray.50}" },
+        "background-muted": { "$value": "{color.primitive.gray.100}" },
+        "surface": { "$value": "{color.primitive.white}" },
+        "surface-hover": { "$value": "{color.primitive.gray.50}" },
+        "surface-active": { "$value": "{color.primitive.gray.100}" },
+        "border": { "$value": "{color.primitive.gray.200}" },
+        "border-strong": { "$value": "{color.primitive.gray.300}" },
+        "divider": { "$value": "{color.primitive.gray.200}" }
+      },
+
+      "text": {
+        "primary": { "$value": "{color.primitive.gray.900}" },
+        "secondary": { "$value": "{color.primitive.gray.600}" },
+        "muted": { "$value": "{color.primitive.gray.500}" },
+        "disabled": { "$value": "{color.primitive.gray.400}" },
+        "inverse": { "$value": "{color.primitive.white}" },
+        "on-brand": { "$value": "{color.primitive.white}" },
+        "link": { "$value": "{color.primitive.blue.600}" },
+        "link-hover": { "$value": "{color.primitive.blue.700}" }
+      },
+
+      "interactive": {
+        "focus": { "$value": "{color.primitive.blue.500}" },
+        "focus-ring": { "$value": "rgba(59, 130, 246, 0.5)" },
+        "disabled": { "$value": "{color.primitive.gray.200}" },
+        "disabled-text": { "$value": "{color.primitive.gray.400}" },
+        "overlay": { "$value": "rgba(0, 0, 0, 0.5)" }
+      }
+    }
+  }
+}

package/tokens/components.json

@@ -0,0 +1,201 @@
+{
+  "$name": "components",
+  "$description": "Component-specific design tokens (W3C Format)",
+
+  "button": {
+    "$description": "Button component tokens",
+
+    "primary": {
+      "background": { "$value": "{color.semantic.brand.primary}" },
+      "background-hover": { "$value": "{color.semantic.brand.primary-hover}" },
+      "background-active": { "$value": "{color.semantic.brand.primary-active}" },
+      "text": { "$value": "{color.semantic.text.on-brand}" },
+      "border": { "$value": "transparent" }
+    },
+
+    "secondary": {
+      "background": { "$value": "transparent" },
+      "background-hover": { "$value": "{color.semantic.neutral.surface-hover}" },
+      "text": { "$value": "{color.semantic.text.primary}" },
+      "border": { "$value": "{color.semantic.neutral.border}" }
+    },
+
+    "ghost": {
+      "background": { "$value": "transparent" },
+      "background-hover": { "$value": "{color.semantic.neutral.surface-hover}" },
+      "text": { "$value": "{color.semantic.text.primary}" },
+      "border": { "$value": "transparent" }
+    },
+
+    "danger": {
+      "background": { "$value": "{color.semantic.feedback.error}" },
+      "background-hover": { "$value": "{color.primitive.red.700}" },
+      "text": { "$value": "{color.primitive.white}" },
+      "border": { "$value": "transparent" }
+    },
+
+    "padding": {
+      "xs": { "$value": "{spacing.1} {spacing.2}" },
+      "sm": { "$value": "{spacing.1.5} {spacing.3}" },
+      "base": { "$value": "{spacing.2} {spacing.4}" },
+      "lg": { "$value": "{spacing.2.5} {spacing.5}" },
+      "xl": { "$value": "{spacing.3} {spacing.6}" }
+    },
+
+    "radius": { "$value": "{border.radius.md}" },
+    "font-weight": { "$value": "{font.weight.medium}" },
+    "transition": { "$value": "{transition.colors}" }
+  },
+
+  "input": {
+    "$description": "Input/form field tokens",
+
+    "background": { "$value": "{color.semantic.neutral.background}" },
+    "background-disabled": { "$value": "{color.semantic.neutral.background-muted}" },
+    "border": { "$value": "{color.semantic.neutral.border}" },
+    "border-hover": { "$value": "{color.semantic.neutral.border-strong}" },
+    "border-focus": { "$value": "{color.semantic.brand.primary}" },
+    "border-error": { "$value": "{color.semantic.feedback.error}" },
+    "text": { "$value": "{color.semantic.text.primary}" },
+    "text-placeholder": { "$value": "{color.semantic.text.muted}" },
+
+    "padding": {
+      "sm": { "$value": "{spacing.2} {spacing.2.5}" },
+      "base": { "$value": "{spacing.2.5} {spacing.3}" },
+      "lg": { "$value": "{spacing.3} {spacing.4}" }
+    },
+
+    "radius": { "$value": "{border.radius.md}" },
+    "focus-ring": { "$value": "{shadow.focus}" }
+  },
+
+  "card": {
+    "$description": "Card component tokens",
+
+    "background": { "$value": "{color.semantic.neutral.surface}" },
+    "background-hover": { "$value": "{color.semantic.neutral.surface-hover}" },
+    "border": { "$value": "{color.semantic.neutral.border}" },
+    "shadow": { "$value": "{shadow.sm}" },
+    "shadow-hover": { "$value": "{shadow.md}" },
+
+    "padding": {
+      "sm": { "$value": "{spacing.3}" },
+      "base": { "$value": "{spacing.4}" },
+      "lg": { "$value": "{spacing.6}" }
+    },
+
+    "radius": { "$value": "{border.radius.lg}" }
+  },
+
+  "modal": {
+    "$description": "Modal/dialog tokens",
+
+    "background": { "$value": "{color.semantic.neutral.surface}" },
+    "overlay": { "$value": "{color.semantic.interactive.overlay}" },
+    "shadow": { "$value": "{shadow.2xl}" },
+    "radius": { "$value": "{border.radius.xl}" },
+
+    "padding": {
+      "header": { "$value": "{spacing.4} {spacing.6}" },
+      "body": { "$value": "{spacing.6}" },
+      "footer": { "$value": "{spacing.4} {spacing.6}" }
+    },
+
+    "width": {
+      "sm": { "$value": "24rem" },
+      "base": { "$value": "32rem" },
+      "lg": { "$value": "42rem" },
+      "xl": { "$value": "56rem" },
+      "full": { "$value": "calc(100vw - 2rem)" }
+    }
+  },
+
+  "tooltip": {
+    "$description": "Tooltip tokens",
+
+    "background": { "$value": "{color.primitive.gray.900}" },
+    "text": { "$value": "{color.primitive.white}" },
+    "padding": { "$value": "{spacing.1.5} {spacing.2.5}" },
+    "radius": { "$value": "{border.radius.md}" },
+    "shadow": { "$value": "{shadow.md}" },
+    "font-size": { "$value": "{font.size.xs}" },
+    "max-width": { "$value": "20rem" }
+  },
+
+  "badge": {
+    "$description": "Badge/tag tokens",
+
+    "padding": {
+      "sm": { "$value": "{spacing.0.5} {spacing.1.5}" },
+      "base": { "$value": "{spacing.1} {spacing.2}" }
+    },
+
+    "radius": { "$value": "{border.radius.full}" },
+    "font-size": { "$value": "{font.size.xs}" },
+    "font-weight": { "$value": "{font.weight.medium}" }
+  },
+
+  "avatar": {
+    "$description": "Avatar tokens",
+
+    "background": { "$value": "{color.semantic.neutral.background-muted}" },
+    "border": { "$value": "{color.semantic.neutral.border}" },
+    "text": { "$value": "{color.semantic.text.secondary}" },
+    "radius": { "$value": "{border.radius.full}" }
+  },
+
+  "table": {
+    "$description": "Table/DataGrid tokens",
+
+    "header-background": { "$value": "{color.semantic.neutral.background-subtle}" },
+    "header-text": { "$value": "{color.semantic.text.secondary}" },
+    "row-background": { "$value": "{color.semantic.neutral.background}" },
+    "row-background-hover": { "$value": "{color.semantic.neutral.surface-hover}" },
+    "row-background-selected": { "$value": "{color.semantic.brand.primary-subtle}" },
+    "row-background-striped": { "$value": "{color.semantic.neutral.background-subtle}" },
+    "border": { "$value": "{color.semantic.neutral.divider}" },
+
+    "cell-padding": {
+      "sm": { "$value": "{spacing.2} {spacing.3}" },
+      "base": { "$value": "{spacing.3} {spacing.4}" },
+      "lg": { "$value": "{spacing.4} {spacing.5}" }
+    }
+  },
+
+  "navigation": {
+    "$description": "Navigation/menu tokens",
+
+    "background": { "$value": "{color.semantic.neutral.surface}" },
+    "item-background-hover": { "$value": "{color.semantic.neutral.surface-hover}" },
+    "item-background-active": { "$value": "{color.semantic.brand.primary-subtle}" },
+    "item-text": { "$value": "{color.semantic.text.secondary}" },
+    "item-text-hover": { "$value": "{color.semantic.text.primary}" },
+    "item-text-active": { "$value": "{color.semantic.brand.primary}" },
+    "divider": { "$value": "{color.semantic.neutral.divider}" },
+
+    "item-padding": { "$value": "{spacing.2.5} {spacing.3}" },
+    "item-radius": { "$value": "{border.radius.md}" },
+
+    "level": {
+      "$description": "Per-depth nesting colors (sidebar/menu/tree). Vars --nice-{surface}-level-{1..10}-{bg|text|hover-bg|active-bg|border} are emitted at runtime by themeToCssVars() from NiceTheme.nesting. Defaults below are fallbacks used when no nesting config is provided.",
+      "1-bg": { "$value": "{color.semantic.neutral.surface}" },
+      "1-text": { "$value": "{color.semantic.text.primary}" },
+      "2-bg": { "$value": "{color.semantic.neutral.surface-hover}" },
+      "2-text": { "$value": "{color.semantic.text.primary}" },
+      "deep-bg": { "$value": "{color.semantic.neutral.background-subtle}" },
+      "deep-text": { "$value": "{color.semantic.text.secondary}" }
+    }
+  },
+
+  "tabs": {
+    "$description": "Tabs tokens",
+
+    "background": { "$value": "transparent" },
+    "border": { "$value": "{color.semantic.neutral.border}" },
+    "indicator": { "$value": "{color.semantic.brand.primary}" },
+    "text": { "$value": "{color.semantic.text.secondary}" },
+    "text-active": { "$value": "{color.semantic.brand.primary}" },
+
+    "padding": { "$value": "{spacing.2.5} {spacing.4}" }
+  }
+}