@mehdashti/tokens 0.2.0 → 0.2.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/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;

package/dist/index.d.ts

@@ -9,6 +9,7 @@
  * - Shadows
  * - Z-index layers
  * - Density modes (cozy/compact)
+ * - Interaction states (Ghost, Outlined, Underline variants)
  */
 export * from "./colors.js";
 export * from "./spacing.js";
@@ -18,4 +19,5 @@ 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;;;;;;;;;;;GAWG;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"}
+{"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

@@ -9,6 +9,7 @@
  * - Shadows
  * - Z-index layers
  * - Density modes (cozy/compact)
+ * - Interaction states (Ghost, Outlined, Underline variants)
  */
 export * from "./colors.js";
 export * from "./spacing.js";
@@ -18,4 +19,5 @@ 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;;;;;;;;;;;GAWG;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"}
+{"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.2.0",
+  "version": "0.2.1",
   "description": "Design tokens for Smart Platform - colors, spacing, typography, and themes",
   "author": "mehdashti",
   "license": "MIT",