@mehdashti/tokens 0.1.1 → 0.2.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Mahdi Ashti
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -215,4 +215,4 @@ function PrimaryButton() {
 
 ---
 
-**Version:** 0.0.1
+**Version:** 0.1.1

package/dist/borders.d.ts

@@ -5,6 +5,7 @@
  */
 export declare const borderRadius: {
     readonly none: "0";
+    readonly xs: "0.1875rem";
     readonly sm: "0.125rem";
     readonly base: "0.25rem";
     readonly md: "0.375rem";

package/dist/borders.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"borders.d.ts","sourceRoot":"","sources":["../src/borders.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAMH,eAAO,MAAM,YAAY;;;;;;;;;;CAUf,CAAC;AAMX,eAAO,MAAM,WAAW;;;;;;CAMd,CAAC"}
+{"version":3,"file":"borders.d.ts","sourceRoot":"","sources":["../src/borders.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAMH,eAAO,MAAM,YAAY;;;;;;;;;;;CAWf,CAAC;AAMX,eAAO,MAAM,WAAW;;;;;;CAMd,CAAC"}

package/dist/borders.js

@@ -8,6 +8,7 @@
 // =============================================================================
 export const borderRadius = {
     none: "0",
+    xs: "0.1875rem", // 3px - Material Design 3 standard for interactive components
     sm: "0.125rem", // 2px
     base: "0.25rem", // 4px
     md: "0.375rem", // 6px

package/dist/borders.js.map

@@ -1 +1 @@
-{"version":3,"file":"borders.js","sourceRoot":"","sources":["../src/borders.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,gFAAgF;AAChF,gBAAgB;AAChB,gFAAgF;AAEhF,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,IAAI,EAAE,GAAG;IACT,EAAE,EAAE,UAAU,EAAE,MAAM;IACtB,IAAI,EAAE,SAAS,EAAE,MAAM;IACvB,EAAE,EAAE,UAAU,EAAE,MAAM;IACtB,EAAE,EAAE,QAAQ,EAAE,MAAM;IACpB,EAAE,EAAE,SAAS,EAAE,OAAO;IACtB,KAAK,EAAE,MAAM,EAAE,OAAO;IACtB,KAAK,EAAE,QAAQ,EAAE,OAAO;IACxB,IAAI,EAAE,QAAQ;CACN,CAAC;AAEX,gFAAgF;AAChF,eAAe;AACf,gFAAgF;AAEhF,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,CAAC,EAAE,KAAK;IACR,CAAC,EAAE,KAAK;IACR,CAAC,EAAE,KAAK;IACR,CAAC,EAAE,KAAK;IACR,CAAC,EAAE,KAAK;CACA,CAAC"}
+{"version":3,"file":"borders.js","sourceRoot":"","sources":["../src/borders.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,gFAAgF;AAChF,gBAAgB;AAChB,gFAAgF;AAEhF,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,IAAI,EAAE,GAAG;IACT,EAAE,EAAE,WAAW,EAAE,8DAA8D;IAC/E,EAAE,EAAE,UAAU,EAAE,MAAM;IACtB,IAAI,EAAE,SAAS,EAAE,MAAM;IACvB,EAAE,EAAE,UAAU,EAAE,MAAM;IACtB,EAAE,EAAE,QAAQ,EAAE,MAAM;IACpB,EAAE,EAAE,SAAS,EAAE,OAAO;IACtB,KAAK,EAAE,MAAM,EAAE,OAAO;IACtB,KAAK,EAAE,QAAQ,EAAE,OAAO;IACxB,IAAI,EAAE,QAAQ;CACN,CAAC;AAEX,gFAAgF;AAChF,eAAe;AACf,gFAAgF;AAEhF,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,CAAC,EAAE,KAAK;IACR,CAAC,EAAE,KAAK;IACR,CAAC,EAAE,KAAK;IACR,CAAC,EAAE,KAAK;IACR,CAAC,EAAE,KAAK;CACA,CAAC"}

package/dist/colors.d.ts

@@ -32,6 +32,18 @@ export declare const brandColors: {
     };
 };
 export declare const semanticColors: {
+    readonly neutral: {
+        readonly 50: "#eff6ff";
+        readonly 100: "#dbeafe";
+        readonly 200: "#bfdbfe";
+        readonly 300: "#93c5fd";
+        readonly 400: "#60a5fa";
+        readonly 500: "#3b82f6";
+        readonly 600: "#2563eb";
+        readonly 700: "#1d4ed8";
+        readonly 800: "#1e40af";
+        readonly 900: "#1e3a8a";
+    };
     readonly success: {
         readonly 50: "#f0fdf4";
         readonly 100: "#dcfce7";
@@ -45,16 +57,16 @@ export declare const semanticColors: {
         readonly 900: "#14532d";
     };
     readonly warning: {
-        readonly 50: "#fffbeb";
-        readonly 100: "#fef3c7";
-        readonly 200: "#fde68a";
-        readonly 300: "#fcd34d";
-        readonly 400: "#fbbf24";
-        readonly 500: "#f59e0b";
-        readonly 600: "#d97706";
-        readonly 700: "#b45309";
-        readonly 800: "#92400e";
-        readonly 900: "#78350f";
+        readonly 50: "#fff7ed";
+        readonly 100: "#ffedd5";
+        readonly 200: "#fed7aa";
+        readonly 300: "#fdba74";
+        readonly 400: "#fb923c";
+        readonly 500: "#f97316";
+        readonly 600: "#ea580c";
+        readonly 700: "#c2410c";
+        readonly 800: "#9a3412";
+        readonly 900: "#7c2d12";
     };
     readonly error: {
         readonly 50: "#fef2f2";
@@ -119,6 +131,8 @@ export interface ThemeColors {
     destructiveForeground: string;
     muted: string;
     mutedForeground: string;
+    neutral: string;
+    neutralForeground: string;
     success: string;
     successForeground: string;
     warning: string;

package/dist/colors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../src/colors.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAMH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2Bd,CAAC;AAMX,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiDjB,CAAC;AAMX,eAAO,MAAM,aAAa;;;;;;;;;;;;CAYhB,CAAC;AAMX,MAAM,WAAW,WAAW;IAE1B,UAAU,EAAE,MAAM,CAAC;IACnB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,kBAAkB,EAAE,MAAM,CAAC;IAG3B,UAAU,EAAE,MAAM,CAAC;IACnB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,kBAAkB,EAAE,MAAM,CAAC;IAG3B,MAAM,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,MAAM,CAAC;IAGxB,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,iBAAiB,EAAE,MAAM,CAAC;IAG1B,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,mBAAmB,EAAE,MAAM,CAAC;IAG5B,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,gBAAgB,EAAE,MAAM,CAAC;IAGzB,WAAW,EAAE,MAAM,CAAC;IACpB,gBAAgB,EAAE,MAAM,CAAC;IACzB,qBAAqB,EAAE,MAAM,CAAC;IAG9B,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IAGxB,OAAO,EAAE,MAAM,CAAC;IAChB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,UAAU,EAAE,WAyCxB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,WAyCvB,CAAC"}
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../src/colors.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAMH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2Bd,CAAC;AAMX,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkEjB,CAAC;AAMX,eAAO,MAAM,aAAa;;;;;;;;;;;;CAYhB,CAAC;AAMX,MAAM,WAAW,WAAW;IAE1B,UAAU,EAAE,MAAM,CAAC;IACnB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,kBAAkB,EAAE,MAAM,CAAC;IAG3B,UAAU,EAAE,MAAM,CAAC;IACnB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,kBAAkB,EAAE,MAAM,CAAC;IAG3B,MAAM,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,MAAM,CAAC;IAGxB,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,iBAAiB,EAAE,MAAM,CAAC;IAG1B,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,mBAAmB,EAAE,MAAM,CAAC;IAG5B,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,gBAAgB,EAAE,MAAM,CAAC;IAGzB,WAAW,EAAE,MAAM,CAAC;IACpB,gBAAgB,EAAE,MAAM,CAAC;IACzB,qBAAqB,EAAE,MAAM,CAAC;IAG9B,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IAGxB,OAAO,EAAE,MAAM,CAAC;IAChB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,UAAU,EAAE,WA2CxB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,WA2CvB,CAAC"}

package/dist/colors.js

@@ -38,6 +38,20 @@ export const brandColors = {
 // Semantic Colors
 // =============================================================================
 export const semanticColors = {
+    // Neutral (Blue) - SAP Fiori Neutral state
+    neutral: {
+        50: "#eff6ff",
+        100: "#dbeafe",
+        200: "#bfdbfe",
+        300: "#93c5fd",
+        400: "#60a5fa",
+        500: "#3b82f6",
+        600: "#2563eb",
+        700: "#1d4ed8",
+        800: "#1e40af",
+        900: "#1e3a8a",
+    },
+    // Success (Green) - SAP Fiori Positive state
     success: {
         50: "#f0fdf4",
         100: "#dcfce7",
@@ -50,18 +64,20 @@ export const semanticColors = {
         800: "#166534",
         900: "#14532d",
     },
+    // Warning (Orange) - SAP Fiori Critical state
     warning: {
-        50: "#fffbeb",
-        100: "#fef3c7",
-        200: "#fde68a",
-        300: "#fcd34d",
-        400: "#fbbf24",
-        500: "#f59e0b",
-        600: "#d97706",
-        700: "#b45309",
-        800: "#92400e",
-        900: "#78350f",
+        50: "#fff7ed",
+        100: "#ffedd5",
+        200: "#fed7aa",
+        300: "#fdba74",
+        400: "#fb923c",
+        500: "#f97316",
+        600: "#ea580c",
+        700: "#c2410c",
+        800: "#9a3412",
+        900: "#7c2d12",
     },
+    // Error/Destructive (Red) - SAP Fiori Negative state
     error: {
         50: "#fef2f2",
         100: "#fee2e2",
@@ -74,6 +90,7 @@ export const semanticColors = {
         800: "#991b1b",
         900: "#7f1d1d",
     },
+    // Info (Blue) - Additional informational state
     info: {
         50: "#eff6ff",
         100: "#dbeafe",
@@ -128,10 +145,12 @@ export const lightTheme = {
     destructiveForeground: "#ffffff",
     muted: neutralColors[100],
     mutedForeground: neutralColors[500],
+    neutral: semanticColors.neutral[600],
+    neutralForeground: "#ffffff",
     success: semanticColors.success[600],
     successForeground: "#ffffff",
-    warning: semanticColors.warning[500],
-    warningForeground: neutralColors[900],
+    warning: semanticColors.warning[600],
+    warningForeground: "#ffffff",
     error: semanticColors.error[600],
     errorForeground: "#ffffff",
     info: semanticColors.info[600],
@@ -162,10 +181,12 @@ export const darkTheme = {
     destructiveForeground: "#ffffff",
     muted: neutralColors[800],
     mutedForeground: neutralColors[400],
+    neutral: semanticColors.neutral[500],
+    neutralForeground: "#ffffff",
     success: semanticColors.success[500],
     successForeground: "#ffffff",
     warning: semanticColors.warning[500],
-    warningForeground: neutralColors[900],
+    warningForeground: "#ffffff",
     error: semanticColors.error[500],
     errorForeground: "#ffffff",
     info: semanticColors.info[500],

package/dist/colors.js.map

@@ -1 +1 @@
-{"version":3,"file":"colors.js","sourceRoot":"","sources":["../src/colors.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"colors.js","sourceRoot":"","sources":["../src/colors.ts"],"names":[],"mappings":"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"}

package/dist/css/theme-dark.css

@@ -40,17 +40,22 @@
   --ring: 195 45% 38%;
 
   /* Semantic colors - Dark */
-  --success: 156 72% 67%;           /* #6EE7B7 - text */
+  --neutral: 213 93% 78%;           /* #93C5FD - SAP Fiori Neutral state */
+  --neutral-foreground: 213 93% 78%;
+  --neutral-bg: 214 52% 24%;        /* #1E3A5F */
+  --neutral-border: 224 76% 40%;    /* #1E40AF */
+
+  --success: 156 72% 67%;           /* #6EE7B7 - SAP Fiori Positive state */
   --success-foreground: 156 72% 67%;
   --success-bg: 166 91% 16%;        /* #064E3B */
   --success-border: 163 94% 20%;    /* #065F46 */
 
-  --warning: 43 96% 65%;            /* #FCD34D - text */
+  --warning: 43 96% 65%;            /* #FCD34D - SAP Fiori Critical state */
   --warning-foreground: 43 96% 65%;
   --warning-bg: 22 92% 14%;         /* #451A03 */
   --warning-border: 26 79% 26%;     /* #78350F */
 
-  --info: 213 93% 78%;              /* #93C5FD - text */
+  --info: 213 93% 78%;              /* #93C5FD */
   --info-foreground: 213 93% 78%;
   --info-bg: 214 52% 24%;           /* #1E3A5F */
   --info-border: 224 76% 40%;       /* #1E40AF */
@@ -58,7 +63,7 @@
   --destructive-bg: 0 77% 15%;      /* #450A0A */
   --destructive-border: 0 63% 31%;  /* #7F1D1D */
 
-  /* Error alias (same as destructive) */
+  /* Error alias (same as destructive) - SAP Fiori Negative state */
   --error: 0 94% 82%;               /* #FCA5A5 */
   --error-bg: 0 77% 15%;            /* #450A0A */
   --error-border: 0 63% 31%;        /* #7F1D1D */

package/dist/css/theme-light.css

@@ -42,25 +42,30 @@
   --radius: 3px;
 
   /* Semantic colors - Light */
-  --success: 142 64% 24%;           /* #166534 - text */
+  --neutral: 224 76% 48%;           /* #2563EB - SAP Fiori Neutral state */
+  --neutral-foreground: 0 0% 100%;
+  --neutral-bg: 214 95% 93%;        /* #DBEAFE */
+  --neutral-border: 213 93% 78%;    /* #93C5FD */
+
+  --success: 142 64% 24%;           /* #166534 - SAP Fiori Positive state */
   --success-foreground: 0 0% 100%;
   --success-bg: 142 72% 94%;        /* #DCFCE7 */
   --success-border: 142 77% 73%;    /* #86EFAC */
 
-  --warning: 26 83% 31%;            /* #92400E - text */
-  --warning-foreground: 26 83% 31%;
-  --warning-bg: 48 96% 89%;         /* #FEF3C7 */
-  --warning-border: 43 96% 65%;     /* #FCD34D */
+  --warning: 26 83% 31%;            /* #92400E - SAP Fiori Critical state */
+  --warning-foreground: 0 0% 100%;
+  --warning-bg: 25 95% 90%;         /* #FFEDD5 */
+  --warning-border: 25 95% 70%;     /* #FDBA74 */
 
-  --info: 224 76% 40%;              /* #1E40AF - text */
-  --info-foreground: 224 76% 40%;
+  --info: 224 76% 40%;              /* #1E40AF */
+  --info-foreground: 0 0% 100%;
   --info-bg: 214 95% 93%;           /* #DBEAFE */
   --info-border: 213 93% 78%;       /* #93C5FD */
 
   --destructive-bg: 0 93% 94%;      /* #FEE2E2 */
   --destructive-border: 0 94% 82%;  /* #FCA5A5 */
 
-  /* Error alias (same as destructive) */
+  /* Error alias (same as destructive) - SAP Fiori Negative state */
   --error: 0 74% 35%;               /* #991B1B */
   --error-bg: 0 93% 94%;            /* #FEE2E2 */
   --error-border: 0 94% 82%;        /* #FCA5A5 */

package/dist/css/theme.css

@@ -41,6 +41,7 @@
 
   /* Border Radius */
   --radius-none: 0;
+  --radius-xs: 0.1875rem;
   --radius-sm: 0.125rem;
   --radius-base: 0.25rem;
   --radius-md: 0.375rem;
@@ -70,6 +71,36 @@
   --z-popover: 1500;
   --z-tooltip: 1600;
   --z-toast: 1700;
+
+  /* Density Modes - Default (Balanced) */
+  --density-height: 2.5rem;
+  --density-padding-x: 0.875rem;
+  --density-padding-y: 0.625rem;
+  --density-font-size: 0.9375rem;
+  --density-gap: 0.625rem;
+  --density-icon-size: 1.125rem;
+}
+
+/* Cozy Mode - Touch-friendly */
+.density-cozy,
+[data-density="cozy"] {
+  --density-height: 2.75rem;
+  --density-padding-x: 1rem;
+  --density-padding-y: 0.75rem;
+  --density-font-size: 1rem;
+  --density-gap: 0.75rem;
+  --density-icon-size: 1.25rem;
+}
+
+/* Compact Mode - Desktop-optimized */
+.density-compact,
+[data-density="compact"] {
+  --density-height: 2rem;
+  --density-padding-x: 0.75rem;
+  --density-padding-y: 0.5rem;
+  --density-font-size: 0.875rem;
+  --density-gap: 0.5rem;
+  --density-icon-size: 1rem;
 }
 
 /**
@@ -116,25 +147,30 @@
   --radius: 3px;
 
   /* Semantic colors - Light */
-  --success: 142 64% 24%;           /* #166534 - text */
+  --neutral: 224 76% 48%;           /* #2563EB - SAP Fiori Neutral state */
+  --neutral-foreground: 0 0% 100%;
+  --neutral-bg: 214 95% 93%;        /* #DBEAFE */
+  --neutral-border: 213 93% 78%;    /* #93C5FD */
+
+  --success: 142 64% 24%;           /* #166534 - SAP Fiori Positive state */
   --success-foreground: 0 0% 100%;
   --success-bg: 142 72% 94%;        /* #DCFCE7 */
   --success-border: 142 77% 73%;    /* #86EFAC */
 
-  --warning: 26 83% 31%;            /* #92400E - text */
-  --warning-foreground: 26 83% 31%;
-  --warning-bg: 48 96% 89%;         /* #FEF3C7 */
-  --warning-border: 43 96% 65%;     /* #FCD34D */
+  --warning: 26 83% 31%;            /* #92400E - SAP Fiori Critical state */
+  --warning-foreground: 0 0% 100%;
+  --warning-bg: 25 95% 90%;         /* #FFEDD5 */
+  --warning-border: 25 95% 70%;     /* #FDBA74 */
 
-  --info: 224 76% 40%;              /* #1E40AF - text */
-  --info-foreground: 224 76% 40%;
+  --info: 224 76% 40%;              /* #1E40AF */
+  --info-foreground: 0 0% 100%;
   --info-bg: 214 95% 93%;           /* #DBEAFE */
   --info-border: 213 93% 78%;       /* #93C5FD */
 
   --destructive-bg: 0 93% 94%;      /* #FEE2E2 */
   --destructive-border: 0 94% 82%;  /* #FCA5A5 */
 
-  /* Error alias (same as destructive) */
+  /* Error alias (same as destructive) - SAP Fiori Negative state */
   --error: 0 74% 35%;               /* #991B1B */
   --error-bg: 0 93% 94%;            /* #FEE2E2 */
   --error-border: 0 94% 82%;        /* #FCA5A5 */
@@ -196,17 +232,22 @@
   --ring: 195 45% 38%;
 
   /* Semantic colors - Dark */
-  --success: 156 72% 67%;           /* #6EE7B7 - text */
+  --neutral: 213 93% 78%;           /* #93C5FD - SAP Fiori Neutral state */
+  --neutral-foreground: 213 93% 78%;
+  --neutral-bg: 214 52% 24%;        /* #1E3A5F */
+  --neutral-border: 224 76% 40%;    /* #1E40AF */
+
+  --success: 156 72% 67%;           /* #6EE7B7 - SAP Fiori Positive state */
   --success-foreground: 156 72% 67%;
   --success-bg: 166 91% 16%;        /* #064E3B */
   --success-border: 163 94% 20%;    /* #065F46 */
 
-  --warning: 43 96% 65%;            /* #FCD34D - text */
+  --warning: 43 96% 65%;            /* #FCD34D - SAP Fiori Critical state */
   --warning-foreground: 43 96% 65%;
   --warning-bg: 22 92% 14%;         /* #451A03 */
   --warning-border: 26 79% 26%;     /* #78350F */
 
-  --info: 213 93% 78%;              /* #93C5FD - text */
+  --info: 213 93% 78%;              /* #93C5FD */
   --info-foreground: 213 93% 78%;
   --info-bg: 214 52% 24%;           /* #1E3A5F */
   --info-border: 224 76% 40%;       /* #1E40AF */
@@ -214,7 +255,7 @@
   --destructive-bg: 0 77% 15%;      /* #450A0A */
   --destructive-border: 0 63% 31%;  /* #7F1D1D */
 
-  /* Error alias (same as destructive) */
+  /* Error alias (same as destructive) - SAP Fiori Negative state */
   --error: 0 94% 82%;               /* #FCA5A5 */
   --error-bg: 0 77% 15%;            /* #450A0A */
   --error-border: 0 63% 31%;        /* #7F1D1D */

package/dist/density.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Density Mode Tokens
+ *
+ * Defines spacing and sizing for different density modes
+ * Aligned with SAP Fiori Cozy/Compact patterns
+ */
+export interface DensityConfig {
+    height: string;
+    paddingX: string;
+    paddingY: string;
+    fontSize: string;
+    gap: string;
+    iconSize: string;
+}
+/**
+ * Cozy mode - Touch-friendly sizing for mobile and tablet devices
+ * Minimum touch target: 44px (Apple HIG) / 48px (Material Design)
+ */
+export declare const cozyMode: DensityConfig;
+/**
+ * Compact mode - Desktop-optimized for mouse and keyboard
+ * Smaller footprint for information density
+ */
+export declare const compactMode: DensityConfig;
+/**
+ * Default mode - Balanced between cozy and compact
+ * Used when density is set to "inherit"
+ */
+export declare const defaultMode: DensityConfig;
+export declare const density: {
+    readonly cozy: DensityConfig;
+    readonly compact: DensityConfig;
+    readonly default: DensityConfig;
+};
+export type DensityMode = keyof typeof density;
+//# sourceMappingURL=density.d.ts.map

package/dist/density.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"density.d.ts","sourceRoot":"","sources":["../src/density.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,EAAE,aAOb,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,aAOhB,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,aAOhB,CAAC;AAEX,eAAO,MAAM,OAAO;;;;CAIV,CAAC;AAEX,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,OAAO,CAAC"}

package/dist/density.js

@@ -0,0 +1,48 @@
+/**
+ * Density Mode Tokens
+ *
+ * Defines spacing and sizing for different density modes
+ * Aligned with SAP Fiori Cozy/Compact patterns
+ */
+/**
+ * Cozy mode - Touch-friendly sizing for mobile and tablet devices
+ * Minimum touch target: 44px (Apple HIG) / 48px (Material Design)
+ */
+export const cozyMode = {
+    height: "2.75rem", // 44px
+    paddingX: "1rem", // 16px
+    paddingY: "0.75rem", // 12px
+    fontSize: "1rem", // 16px
+    gap: "0.75rem", // 12px
+    iconSize: "1.25rem", // 20px
+};
+/**
+ * Compact mode - Desktop-optimized for mouse and keyboard
+ * Smaller footprint for information density
+ */
+export const compactMode = {
+    height: "2rem", // 32px
+    paddingX: "0.75rem", // 12px
+    paddingY: "0.5rem", // 8px
+    fontSize: "0.875rem", // 14px
+    gap: "0.5rem", // 8px
+    iconSize: "1rem", // 16px
+};
+/**
+ * Default mode - Balanced between cozy and compact
+ * Used when density is set to "inherit"
+ */
+export const defaultMode = {
+    height: "2.5rem", // 40px
+    paddingX: "0.875rem", // 14px
+    paddingY: "0.625rem", // 10px
+    fontSize: "0.9375rem", // 15px
+    gap: "0.625rem", // 10px
+    iconSize: "1.125rem", // 18px
+};
+export const density = {
+    cozy: cozyMode,
+    compact: compactMode,
+    default: defaultMode,
+};
+//# sourceMappingURL=density.js.map

package/dist/density.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"density.js","sourceRoot":"","sources":["../src/density.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAWH;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAkB;IACrC,MAAM,EAAE,SAAS,EAAE,OAAO;IAC1B,QAAQ,EAAE,MAAM,EAAE,OAAO;IACzB,QAAQ,EAAE,SAAS,EAAE,OAAO;IAC5B,QAAQ,EAAE,MAAM,EAAE,OAAO;IACzB,GAAG,EAAE,SAAS,EAAE,OAAO;IACvB,QAAQ,EAAE,SAAS,EAAE,OAAO;CACpB,CAAC;AAEX;;;GAGG;AACH,MAAM,CAAC,MAAM,WAAW,GAAkB;IACxC,MAAM,EAAE,MAAM,EAAE,OAAO;IACvB,QAAQ,EAAE,SAAS,EAAE,OAAO;IAC5B,QAAQ,EAAE,QAAQ,EAAE,MAAM;IAC1B,QAAQ,EAAE,UAAU,EAAE,OAAO;IAC7B,GAAG,EAAE,QAAQ,EAAE,MAAM;IACrB,QAAQ,EAAE,MAAM,EAAE,OAAO;CACjB,CAAC;AAEX;;;GAGG;AACH,MAAM,CAAC,MAAM,WAAW,GAAkB;IACxC,MAAM,EAAE,QAAQ,EAAE,OAAO;IACzB,QAAQ,EAAE,UAAU,EAAE,OAAO;IAC7B,QAAQ,EAAE,UAAU,EAAE,OAAO;IAC7B,QAAQ,EAAE,WAAW,EAAE,OAAO;IAC9B,GAAG,EAAE,UAAU,EAAE,OAAO;IACxB,QAAQ,EAAE,UAAU,EAAE,OAAO;CACrB,CAAC;AAEX,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,IAAI,EAAE,QAAQ;IACd,OAAO,EAAE,WAAW;IACpB,OAAO,EAAE,WAAW;CACZ,CAAC"}

package/dist/index.d.ts

@@ -8,6 +8,8 @@
  * - Border radius
  * - Shadows
  * - Z-index layers
+ * - Density modes (cozy/compact)
+ * - Interaction states (Ghost, Outlined, Underline variants)
  */
 export * from "./colors.js";
 export * from "./spacing.js";
@@ -16,4 +18,6 @@ export * from "./borders.js";
 export * from "./shadows.js";
 export * from "./zIndex.js";
 export * from "./breakpoints.js";
+export * from "./density.js";
+export * from "./interactions.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC"}

package/dist/index.js

@@ -8,6 +8,8 @@
  * - Border radius
  * - Shadows
  * - Z-index layers
+ * - Density modes (cozy/compact)
+ * - Interaction states (Ghost, Outlined, Underline variants)
  */
 export * from "./colors.js";
 export * from "./spacing.js";
@@ -16,4 +18,6 @@ export * from "./borders.js";
 export * from "./shadows.js";
 export * from "./zIndex.js";
 export * from "./breakpoints.js";
+export * from "./density.js";
+export * from "./interactions.js";
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC"}

package/dist/interactions.d.ts

@@ -0,0 +1,111 @@
+/**
+ * Interaction State Tokens
+ *
+ * Defines interaction patterns for components following enterprise UI standards:
+ * - Ghost variant (IFS Cloud style): No borders, background on hover
+ * - Outlined variant (SAP Fiori style): With borders, background + border on hover
+ * - Underline variant (Navigation style): Bottom border on hover
+ */
+export declare const interactionOpacity: {
+    readonly hover: "0.05";
+    readonly hoverStrong: "0.10";
+    readonly active: "0.15";
+    readonly focus: "0.08";
+    readonly disabled: "0.40";
+};
+/**
+ * Ghost Variant Pattern (IFS Cloud Style)
+ * - No borders
+ * - Transparent background
+ * - Background color on hover (5-10% opacity)
+ * - Border radius: 3px (Material Design 3 standard)
+ */
+export declare const ghostVariant: {
+    readonly base: {
+        readonly border: "none";
+        readonly borderWidth: "0";
+        readonly background: "transparent";
+        readonly borderRadius: "0.1875rem";
+    };
+    readonly hover: {
+        readonly background: "hsl(var(--accent) / 0.5)";
+    };
+    readonly focus: {
+        readonly background: "hsl(var(--accent) / 0.5)";
+        readonly outline: "2px solid hsl(var(--ring))";
+        readonly outlineOffset: "2px";
+    };
+    readonly active: {
+        readonly background: "hsl(var(--accent) / 0.5)";
+    };
+};
+/**
+ * Outlined Variant Pattern (SAP Fiori Style)
+ * - With borders
+ * - Background + border color change on hover
+ * - Border radius: 3px
+ */
+export declare const outlinedVariant: {
+    readonly base: {
+        readonly border: "1px solid hsl(var(--input))";
+        readonly background: "transparent";
+        readonly borderRadius: "0.1875rem";
+    };
+    readonly hover: {
+        readonly background: "hsl(var(--accent) / 0.5)";
+        readonly borderColor: "hsl(var(--primary) / 0.5)";
+    };
+    readonly focus: {
+        readonly background: "hsl(var(--accent) / 0.5)";
+        readonly borderColor: "hsl(var(--ring))";
+        readonly outline: "2px solid hsl(var(--ring))";
+        readonly outlineOffset: "2px";
+    };
+    readonly active: {
+        readonly background: "hsl(var(--accent))";
+        readonly borderColor: "hsl(var(--primary))";
+    };
+};
+/**
+ * Underline Variant Pattern (Navigation Style)
+ * - No top/side borders
+ * - Bottom border appears on hover
+ * - No border radius (sharp corners for navigation)
+ */
+export declare const underlineVariant: {
+    readonly base: {
+        readonly border: "none";
+        readonly borderBottom: "2px solid transparent";
+        readonly background: "transparent";
+        readonly borderRadius: "0";
+    };
+    readonly hover: {
+        readonly borderBottomColor: "hsl(var(--primary) / 0.5)";
+    };
+    readonly focus: {
+        readonly borderBottomColor: "hsl(var(--primary))";
+        readonly outline: "2px solid hsl(var(--ring))";
+        readonly outlineOffset: "2px";
+    };
+    readonly active: {
+        readonly borderBottomColor: "hsl(var(--primary))";
+    };
+};
+/**
+ * Standard border radius for interactive components
+ * Following Material Design 3: 3px for buttons, inputs, cards, filters, tabs
+ */
+export declare const interactiveBorderRadius = "0.1875rem";
+/**
+ * Hover background opacity for ghost-style components
+ */
+export declare const hoverBackgroundOpacity = "0.5";
+/**
+ * Focus ring configuration
+ */
+export declare const focusRing: {
+    readonly width: "2px";
+    readonly color: "hsl(var(--ring))";
+    readonly offset: "2px";
+};
+//# sourceMappingURL=interactions.d.ts.map

package/dist/interactions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interactions.d.ts","sourceRoot":"","sources":["../src/interactions.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAMH,eAAO,MAAM,kBAAkB;;;;;;CAMrB,CAAC;AAMX;;;;;;GAMG;AACH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;CAkBf,CAAC;AAEX;;;;;GAKG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;CAoBlB,CAAC;AAEX;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;CAkBnB,CAAC;AAMX;;;GAGG;AACH,eAAO,MAAM,uBAAuB,cAAc,CAAC;AAEnD;;GAEG;AACH,eAAO,MAAM,sBAAsB,QAAQ,CAAC;AAE5C;;GAEG;AACH,eAAO,MAAM,SAAS;;;;CAIZ,CAAC"}

package/dist/interactions.js

@@ -0,0 +1,120 @@
+/**
+ * Interaction State Tokens
+ *
+ * Defines interaction patterns for components following enterprise UI standards:
+ * - Ghost variant (IFS Cloud style): No borders, background on hover
+ * - Outlined variant (SAP Fiori style): With borders, background + border on hover
+ * - Underline variant (Navigation style): Bottom border on hover
+ */
+// =============================================================================
+// Opacity Levels for Interaction States
+// =============================================================================
+export const interactionOpacity = {
+    hover: "0.05", // 5% for ghost variant hover
+    hoverStrong: "0.10", // 10% for stronger hover states
+    active: "0.15", // 15% for active/pressed states
+    focus: "0.08", // 8% for focus states
+    disabled: "0.40", // 40% for disabled states
+};
+// =============================================================================
+// Variant Patterns
+// =============================================================================
+/**
+ * Ghost Variant Pattern (IFS Cloud Style)
+ * - No borders
+ * - Transparent background
+ * - Background color on hover (5-10% opacity)
+ * - Border radius: 3px (Material Design 3 standard)
+ */
+export const ghostVariant = {
+    base: {
+        border: "none",
+        borderWidth: "0",
+        background: "transparent",
+        borderRadius: "0.1875rem", // 3px
+    },
+    hover: {
+        background: "hsl(var(--accent) / 0.5)", // 50% opacity of accent color
+    },
+    focus: {
+        background: "hsl(var(--accent) / 0.5)",
+        outline: "2px solid hsl(var(--ring))",
+        outlineOffset: "2px",
+    },
+    active: {
+        background: "hsl(var(--accent) / 0.5)",
+    },
+};
+/**
+ * Outlined Variant Pattern (SAP Fiori Style)
+ * - With borders
+ * - Background + border color change on hover
+ * - Border radius: 3px
+ */
+export const outlinedVariant = {
+    base: {
+        border: "1px solid hsl(var(--input))",
+        background: "transparent",
+        borderRadius: "0.1875rem", // 3px
+    },
+    hover: {
+        background: "hsl(var(--accent) / 0.5)",
+        borderColor: "hsl(var(--primary) / 0.5)",
+    },
+    focus: {
+        background: "hsl(var(--accent) / 0.5)",
+        borderColor: "hsl(var(--ring))",
+        outline: "2px solid hsl(var(--ring))",
+        outlineOffset: "2px",
+    },
+    active: {
+        background: "hsl(var(--accent))",
+        borderColor: "hsl(var(--primary))",
+    },
+};
+/**
+ * Underline Variant Pattern (Navigation Style)
+ * - No top/side borders
+ * - Bottom border appears on hover
+ * - No border radius (sharp corners for navigation)
+ */
+export const underlineVariant = {
+    base: {
+        border: "none",
+        borderBottom: "2px solid transparent",
+        background: "transparent",
+        borderRadius: "0",
+    },
+    hover: {
+        borderBottomColor: "hsl(var(--primary) / 0.5)",
+    },
+    focus: {
+        borderBottomColor: "hsl(var(--primary))",
+        outline: "2px solid hsl(var(--ring))",
+        outlineOffset: "2px",
+    },
+    active: {
+        borderBottomColor: "hsl(var(--primary))",
+    },
+};
+// =============================================================================
+// Semantic Interaction Tokens
+// =============================================================================
+/**
+ * Standard border radius for interactive components
+ * Following Material Design 3: 3px for buttons, inputs, cards, filters, tabs
+ */
+export const interactiveBorderRadius = "0.1875rem"; // 3px
+/**
+ * Hover background opacity for ghost-style components
+ */
+export const hoverBackgroundOpacity = "0.5"; // 50% of accent color
+/**
+ * Focus ring configuration
+ */
+export const focusRing = {
+    width: "2px",
+    color: "hsl(var(--ring))",
+    offset: "2px",
+};
+//# sourceMappingURL=interactions.js.map

package/dist/interactions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interactions.js","sourceRoot":"","sources":["../src/interactions.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,gFAAgF;AAChF,wCAAwC;AACxC,gFAAgF;AAEhF,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,KAAK,EAAE,MAAM,EAAE,6BAA6B;IAC5C,WAAW,EAAE,MAAM,EAAE,gCAAgC;IACrD,MAAM,EAAE,MAAM,EAAE,gCAAgC;IAChD,KAAK,EAAE,MAAM,EAAE,sBAAsB;IACrC,QAAQ,EAAE,MAAM,EAAE,0BAA0B;CACpC,CAAC;AAEX,gFAAgF;AAChF,mBAAmB;AACnB,gFAAgF;AAEhF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;QACd,WAAW,EAAE,GAAG;QAChB,UAAU,EAAE,aAAa;QACzB,YAAY,EAAE,WAAW,EAAE,MAAM;KAClC;IACD,KAAK,EAAE;QACL,UAAU,EAAE,0BAA0B,EAAE,8BAA8B;KACvE;IACD,KAAK,EAAE;QACL,UAAU,EAAE,0BAA0B;QACtC,OAAO,EAAE,4BAA4B;QACrC,aAAa,EAAE,KAAK;KACrB;IACD,MAAM,EAAE;QACN,UAAU,EAAE,0BAA0B;KACvC;CACO,CAAC;AAEX;;;;;GAKG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,IAAI,EAAE;QACJ,MAAM,EAAE,6BAA6B;QACrC,UAAU,EAAE,aAAa;QACzB,YAAY,EAAE,WAAW,EAAE,MAAM;KAClC;IACD,KAAK,EAAE;QACL,UAAU,EAAE,0BAA0B;QACtC,WAAW,EAAE,2BAA2B;KACzC;IACD,KAAK,EAAE;QACL,UAAU,EAAE,0BAA0B;QACtC,WAAW,EAAE,kBAAkB;QAC/B,OAAO,EAAE,4BAA4B;QACrC,aAAa,EAAE,KAAK;KACrB;IACD,MAAM,EAAE;QACN,UAAU,EAAE,oBAAoB;QAChC,WAAW,EAAE,qBAAqB;KACnC;CACO,CAAC;AAEX;;;;;GAKG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;QACd,YAAY,EAAE,uBAAuB;QACrC,UAAU,EAAE,aAAa;QACzB,YAAY,EAAE,GAAG;KAClB;IACD,KAAK,EAAE;QACL,iBAAiB,EAAE,2BAA2B;KAC/C;IACD,KAAK,EAAE;QACL,iBAAiB,EAAE,qBAAqB;QACxC,OAAO,EAAE,4BAA4B;QACrC,aAAa,EAAE,KAAK;KACrB;IACD,MAAM,EAAE;QACN,iBAAiB,EAAE,qBAAqB;KACzC;CACO,CAAC;AAEX,gFAAgF;AAChF,8BAA8B;AAC9B,gFAAgF;AAEhF;;;GAGG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,WAAW,CAAC,CAAC,MAAM;AAE1D;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,KAAK,CAAC,CAAC,sBAAsB;AAEnE;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,KAAK,EAAE,KAAK;IACZ,KAAK,EAAE,kBAAkB;IACzB,MAAM,EAAE,KAAK;CACL,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mehdashti/tokens",
-  "version": "0.1.1",
+  "version": "0.2.1",
   "description": "Design tokens for Smart Platform - colors, spacing, typography, and themes",
   "author": "mehdashti",
   "license": "MIT",
@@ -37,13 +37,13 @@
   "files": [
     "dist"
   ],
+  "devDependencies": {
+    "typescript": "^5.7.2",
+    "@smart/typescript-config": "0.0.0"
+  },
   "scripts": {
     "build": "node scripts/build.js && tsc",
     "dev": "node scripts/build.js --watch",
     "clean": "rm -rf dist"
-  },
-  "devDependencies": {
-    "@smart/typescript-config": "workspace:*",
-    "typescript": "^5.7.2"
   }
-}
+}