@kjaniec-dev/design 0.4.1 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kjaniec-dev/design",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "Design tokens and Tailwind v4 theme for the KJ Product Kit",
   "license": "MIT",
   "author": "kjaniec-dev",

package/src/theme.css

@@ -61,6 +61,17 @@
   --kj-shadow-md: 0 8px 30px rgb(15 23 42 / 0.08);
   --kj-shadow-lg: 0 20px 60px rgb(15 23 42 / 0.12);
   --kj-shadow-glow: 0 0 0 1px rgb(245 158 11 / 0.16), 0 16px 48px rgb(245 158 11 / 0.18);
+  --kj-density-default: 1.0;
+  --kj-density-compact: 0.82;
+  --kj-density-comfortable: 1.18;
+  --kj-density: var(--kj-density-default);
+}
+
+[data-density="compact"] {
+  --kj-density: var(--kj-density-compact);
+}
+[data-density="comfortable"] {
+  --kj-density: var(--kj-density-comfortable);
 }
 
 .dark {

package/tokens.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://design-tokens.github.io/community-group/format/",
   "name": "KJ Product Kit",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "Personal product design system tokens for KJ apps, portfolio, dashboards and SaaS tools.",
   "color": {
     "primitive": {
@@ -550,5 +550,19 @@
       "$type": "shadow",
       "$value": "0 0 0 1px rgb(245 158 11 / 0.16), 0 16px 48px rgb(245 158 11 / 0.18)"
     }
+  },
+  "density": {
+    "default": {
+      "$type": "dimension",
+      "$value": "1.0"
+    },
+    "compact": {
+      "$type": "dimension",
+      "$value": "0.82"
+    },
+    "comfortable": {
+      "$type": "dimension",
+      "$value": "1.18"
+    }
   }
 }