@tociva/tailng-theme 0.6.0 → 0.7.0

package/README.md

@@ -0,0 +1,163 @@
+# @tociva/tailng-theme
+
+Tailwind CSS preset and design tokens for Tailng components.
+
+## Overview
+
+`@tociva/tailng-theme` provides a shared Tailwind CSS configuration used by Tailng components and applications. It defines colors, typography, spacing, border radius, and other design tokens in a reusable preset that ensures consistency across your application.
+
+## Installation
+
+```bash
+npm install @tociva/tailng-theme
+```
+
+## Peer Dependencies
+
+- `tailwindcss`: ^3.4.0
+
+## Features
+
+- CSS variable-based theming
+- Consistent design tokens (colors, spacing, radius)
+- Tailwind preset for easy integration
+- Type-safe design tokens (TypeScript)
+- Light and dark mode support ready
+
+## Usage
+
+### Basic Setup
+
+Add the preset to your `tailwind.config.js`:
+
+```javascript
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  presets: [
+    require('@tociva/tailng-theme/tailwind/preset'),
+  ],
+  content: [
+    './src/**/*.{html,ts}',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
+```
+
+### With Custom Theme
+
+Extend the preset with your own theme:
+
+```javascript
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  presets: [
+    require('@tociva/tailng-theme/tailwind/preset'),
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: 'var(--color-primary, #2563eb)',
+      },
+      borderRadius: {
+        tng: 'var(--radius, 0.25rem)',
+      },
+    },
+  },
+};
+```
+
+### CSS Variables
+
+Define your theme variables in your global CSS:
+
+```css
+:root {
+  --color-primary: #2563eb;
+  --radius: 0.25rem;
+  --surface: #ffffff;
+  --surface-2: #f8fafc;
+}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-primary: #3b82f6;
+    --surface: #1e293b;
+    --surface-2: #0f172a;
+  }
+}
+```
+
+### Design Tokens
+
+Import and use design tokens in TypeScript:
+
+```typescript
+import { tailngTokens } from '@tociva/tailng-theme';
+
+// Use tokens programmatically
+const radius = tailngTokens.radius.md; // '0.25rem'
+```
+
+## Available Tokens
+
+### Border Radius
+
+- `sm`: `0.125rem`
+- `md`: `0.25rem`
+- `lg`: `0.5rem`
+
+### Colors
+
+The preset uses CSS variables for colors, allowing easy theming:
+
+- `primary`: `var(--color-primary, #2563eb)`
+- Custom colors can be added via CSS variables
+
+## Preset Structure
+
+The preset extends Tailwind's default theme with:
+
+- **Colors**: CSS variable-based primary color
+- **Border Radius**: Consistent radius values
+- **Spacing**: Standard spacing scale (can be extended)
+
+## Customization
+
+### Override Default Values
+
+```javascript
+module.exports = {
+  presets: [require('@tociva/tailng-theme/tailwind/preset')],
+  theme: {
+    extend: {
+      colors: {
+        primary: '#your-color', // Override default
+      },
+    },
+  },
+};
+```
+
+### Add Custom Variables
+
+```css
+:root {
+  --color-primary: #your-primary-color;
+  --color-secondary: #your-secondary-color;
+  --radius: 0.5rem;
+}
+```
+
+## Related Packages
+
+- [`@tociva/tailng-ui`](../ui/README.md) - UI components that use this theme
+- [`@tociva/tailng-icons`](../icons/README.md) - Icon components
+- [`@tociva/tailng-cdk`](../cdk/README.md) - Component development kit
+
+## License
+
+MIT

package/fesm2022/tociva-tailng-theme.mjs

@@ -0,0 +1,49 @@
+const radii = {
+    sm: 'var(--radius-sm)',
+    md: 'var(--radius-md)',
+    lg: 'var(--radius-lg)',
+};
+const motion = {
+    fast: 'var(--duration-fast)',
+    normal: 'var(--duration-normal)',
+    slow: 'var(--duration-slow)',
+};
+
+const colors = {
+    bg: 'var(--background-color)',
+    fg: 'var(--text-color)',
+    border: 'var(--border-color)',
+    primary: 'var(--primary-color)',
+    danger: 'var(--danger-color)',
+    warning: 'var(--warning-color)',
+    success: 'var(--success-color)',
+    info: 'var(--info-color)',
+};
+
+/**
+ * Tailwind preset for @tailng/theme.
+ * Map Tailwind colors to CSS variables (no hardcoded colors here).
+ */
+const tailngPreset = {
+    theme: {
+        extend: {
+            colors: {
+                bg: 'var(--background-color)',
+                fg: 'var(--text-color)',
+                border: 'var(--border-color)',
+                primary: 'var(--primary-color)',
+                danger: 'var(--danger-color)',
+                warning: 'var(--warning-color)',
+                success: 'var(--success-color)',
+                info: 'var(--info-color)',
+            },
+        },
+    },
+};
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { colors, motion, radii, tailngPreset };
+//# sourceMappingURL=tociva-tailng-theme.mjs.map

package/fesm2022/tociva-tailng-theme.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tociva-tailng-theme.mjs","sources":["../../../../libs/theme/src/scales/scales.ts","../../../../libs/theme/src/scales/colors.ts","../../../../libs/theme/src/tailwind/tailwind.preset.ts","../../../../libs/theme/src/tociva-tailng-theme.ts"],"sourcesContent":["export const radii = {\n  sm: 'var(--radius-sm)',\n  md: 'var(--radius-md)',\n  lg: 'var(--radius-lg)',\n} as const;\n\nexport const motion = {\n  fast: 'var(--duration-fast)',\n  normal: 'var(--duration-normal)',\n  slow: 'var(--duration-slow)',\n} as const;\n","export const colors = {\n  bg: 'var(--background-color)',\n  fg: 'var(--text-color)',\n  border: 'var(--border-color)',\n\n  primary: 'var(--primary-color)',\n  danger: 'var(--danger-color)',\n  warning: 'var(--warning-color)',\n  success: 'var(--success-color)',\n  info: 'var(--info-color)',\n} as const;\n","import type { Config } from 'tailwindcss';\n\n/**\n * Tailwind preset for @tailng/theme.\n * Map Tailwind colors to CSS variables (no hardcoded colors here).\n */\nexport const tailngPreset: Partial<Config> = {\n  theme: {\n    extend: {\n      colors: {\n        bg: 'var(--background-color)',\n        fg: 'var(--text-color)',\n        border: 'var(--border-color)',\n\n        primary: 'var(--primary-color)',\n        danger: 'var(--danger-color)',\n        warning: 'var(--warning-color)',\n        success: 'var(--success-color)',\n        info: 'var(--info-color)',\n      },\n    },\n  },\n};\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"AAAO,MAAM,KAAK,GAAG;AACnB,IAAA,EAAE,EAAE,kBAAkB;AACtB,IAAA,EAAE,EAAE,kBAAkB;AACtB,IAAA,EAAE,EAAE,kBAAkB;;AAGjB,MAAM,MAAM,GAAG;AACpB,IAAA,IAAI,EAAE,sBAAsB;AAC5B,IAAA,MAAM,EAAE,wBAAwB;AAChC,IAAA,IAAI,EAAE,sBAAsB;;;ACTvB,MAAM,MAAM,GAAG;AACpB,IAAA,EAAE,EAAE,yBAAyB;AAC7B,IAAA,EAAE,EAAE,mBAAmB;AACvB,IAAA,MAAM,EAAE,qBAAqB;AAE7B,IAAA,OAAO,EAAE,sBAAsB;AAC/B,IAAA,MAAM,EAAE,qBAAqB;AAC7B,IAAA,OAAO,EAAE,sBAAsB;AAC/B,IAAA,OAAO,EAAE,sBAAsB;AAC/B,IAAA,IAAI,EAAE,mBAAmB;;;ACP3B;;;AAGG;AACI,MAAM,YAAY,GAAoB;AAC3C,IAAA,KAAK,EAAE;AACL,QAAA,MAAM,EAAE;AACN,YAAA,MAAM,EAAE;AACN,gBAAA,EAAE,EAAE,yBAAyB;AAC7B,gBAAA,EAAE,EAAE,mBAAmB;AACvB,gBAAA,MAAM,EAAE,qBAAqB;AAE7B,gBAAA,OAAO,EAAE,sBAAsB;AAC/B,gBAAA,MAAM,EAAE,qBAAqB;AAC7B,gBAAA,OAAO,EAAE,sBAAsB;AAC/B,gBAAA,OAAO,EAAE,sBAAsB;AAC/B,gBAAA,IAAI,EAAE,mBAAmB;AAC1B,aAAA;AACF,SAAA;AACF,KAAA;;;ACrBH;;AAEG;;;;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tociva/tailng-theme",
-  "version": "0.6.0",
-  "description": "Tailwind CSS preset for Tailng",
+  "version": "0.7.0",
+  "description": "TailNG theme tokens (CSS) + Tailwind preset/plugin helpers",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -11,10 +11,29 @@
   "bugs": {
     "url": "https://github.com/tociva/tailng/issues"
   },
+  "sideEffects": [
+    "*.css"
+  ],
   "peerDependencies": {
     "tailwindcss": "^3.4.0"
   },
-  "types": "./src/index.d.ts",
-  "main": "./src/index.js",
-  "type": "commonjs"
+  "exports": {
+    ".": {
+      "types": "./types/tociva-tailng-theme.d.ts",
+      "default": "./fesm2022/tociva-tailng-theme.mjs"
+    },
+    "./tokens/index.css": "./tokens/index.css",
+    "./tokens/base.css": "./tokens/base.css",
+    "./tokens/light.css": "./tokens/light.css",
+    "./tokens/dark.css": "./tokens/dark.css",
+    "./tailwind/plugin": "./tailwind/plugin.cjs",
+    "./package.json": {
+      "default": "./package.json"
+    }
+  },
+  "module": "fesm2022/tociva-tailng-theme.mjs",
+  "typings": "types/tociva-tailng-theme.d.ts",
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
 }

package/tailwind/plugin.cjs

@@ -0,0 +1,48 @@
+/**
+ * @tailng/theme - Tailwind plugin (CommonJS)
+ * Adds a few small utilities that leverage theme variables.
+ *
+ * Usage:
+ *   // tailwind.config.cjs
+ *   module.exports = {
+ *     plugins: [require('@tailng/theme/tailwind/plugin.cjs')],
+ *   };
+ */
+const plugin = require('tailwindcss/plugin');
+
+module.exports = plugin(function ({ addUtilities, addBase }) {
+  // Base defaults (optional but handy)
+  addBase({
+    ':root': {
+      color: 'var(--text-color)',
+      backgroundColor: 'var(--background-color)',
+    },
+  });
+
+  // Utilities
+  addUtilities(
+    {
+      '.tng-ring': {
+        outline: 'none',
+        boxShadow: '0 0 0 var(--focus-ring-width) color-mix(in srgb, var(--primary-color) 35%, transparent)',
+      },
+      '.tng-ring-danger': {
+        outline: 'none',
+        boxShadow: '0 0 0 var(--focus-ring-width) color-mix(in srgb, var(--danger-color) 35%, transparent)',
+      },
+      '.tng-border': {
+        borderWidth: 'var(--border-width)',
+        borderColor: 'var(--border-color)',
+      },
+      '.tng-border-hover:hover': {
+        borderColor: 'var(--border-color-hover)',
+      },
+      '.tng-disabled': {
+        color: 'var(--disable-color)',
+        cursor: 'not-allowed',
+        opacity: '0.7',
+      },
+    },
+    { variants: ['responsive', 'hover', 'focus'] }
+  );
+});

package/tailwind/preset.cjs

@@ -0,0 +1,59 @@
+/**
+ * @tailng/theme - Tailwind preset (CommonJS)
+ * Maps Tailwind tokens to CSS variables provided by @tailng/theme tokens.
+ *
+ * Usage:
+ *   // tailwind.config.cjs
+ *   module.exports = {
+ *     presets: [require('@tailng/theme/tailwind/preset.cjs')],
+ *   };
+ */
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        // Surfaces
+        bg: 'var(--background-color)',
+        fg: 'var(--text-color)',
+        border: 'var(--border-color)',
+        'border-hover': 'var(--border-color-hover)',
+
+        // Semantic
+        primary: 'var(--primary-color)',
+        danger: 'var(--danger-color)',
+        warning: 'var(--warning-color)',
+        success: 'var(--success-color)',
+        info: 'var(--info-color)',
+
+        // "on-*" helpers (useful for text color on colored bg)
+        'on-primary': 'var(--on-primary-color)',
+        'on-danger': 'var(--on-danger-color)',
+        'on-warning': 'var(--on-warning-color)',
+        'on-success': 'var(--on-success-color)',
+        'on-info': 'var(--on-info-color)',
+      },
+      borderRadius: {
+        sm: 'var(--radius-sm)',
+        md: 'var(--radius-md)',
+        lg: 'var(--radius-lg)',
+      },
+      boxShadow: {
+        sm: 'var(--shadow-sm)',
+        md: 'var(--shadow-md)',
+        lg: 'var(--shadow-lg)',
+      },
+      fontFamily: {
+        sans: ['var(--font-sans)'],
+      },
+      transitionTimingFunction: {
+        standard: 'var(--ease-standard)',
+        emphasized: 'var(--ease-emphasized)',
+      },
+      transitionDuration: {
+        fast: 'var(--duration-fast)',
+        normal: 'var(--duration-normal)',
+        slow: 'var(--duration-slow)',
+      },
+    },
+  },
+};

package/tailwind/tailng.plugin.cjs

@@ -0,0 +1,2 @@
+// Alias for plugin.cjs
+module.exports = require('./plugin.cjs');

package/tailwind/tailng.preset.cjs

@@ -0,0 +1,2 @@
+// Alias for preset.cjs
+module.exports = require('./preset.cjs');

package/tokens/components/code.css

@@ -0,0 +1,12 @@
+/* @tailng/theme - tokens/components/code.css
+   Code highlighting tokens (semantic). */
+
+:root {
+  --code-keyword-color: var(--primary-color);
+  --code-string-color: var(--success-color);
+  --code-comment-color: var(--disable-color);
+  --code-number-color: var(--info-color);
+  --code-tag-color: var(--danger-color);
+  --code-attr-color: var(--warning-color);
+  --code-decorator-color: var(--primary-color-hover);
+}

package/tokens/foundation/base.css

@@ -0,0 +1,13 @@
+/* @tailng/theme - tokens/foundation/base.css
+   Shared (non-theme) tokens. */
+:root {
+  --font-sans: Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
+
+  /* Radius scale */
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 10px;
+
+  /* Border widths */
+  --border-width: 1px;
+}

package/tokens/foundation/elevation.css

@@ -0,0 +1,6 @@
+/* @tailng/theme - tokens/foundation/elevation.css */
+:root {
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
+  --shadow-md: 0 4px 12px rgba(0,0,0,0.10);
+  --shadow-lg: 0 12px 28px rgba(0,0,0,0.14);
+}

package/tokens/foundation/motion.css

@@ -0,0 +1,9 @@
+/* @tailng/theme - tokens/foundation/motion.css */
+:root {
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
+
+  --duration-fast: 150ms;
+  --duration-normal: 250ms;
+  --duration-slow: 350ms;
+}

package/tokens/foundation/shapes.css

@@ -0,0 +1,4 @@
+/* @tailng/theme - tokens/foundation/shapes.css */
+:root {
+  --focus-ring-width: 2px;
+}

package/tokens/foundation/typography.css

@@ -0,0 +1,12 @@
+/* @tailng/theme - tokens/foundation/typography.css */
+:root {
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-md: 1rem;
+  --font-size-lg: 1.125rem;
+  --font-size-xl: 1.25rem;
+
+  --line-height-tight: 1.2;
+  --line-height-normal: 1.5;
+  --line-height-loose: 1.7;
+}

package/tokens/index.css

@@ -0,0 +1,27 @@
+/* @tailng/theme - tokens/index.css
+   Import this once in your app. */
+
+@import "./foundation/base.css";
+@import "./foundation/motion.css";
+@import "./foundation/typography.css";
+@import "./foundation/elevation.css";
+@import "./foundation/shapes.css";
+
+/* Optional palettes (not required) */
+@import "./palettes/default.css";
+@import "./palettes/slate.css";
+
+/* Theme (brand identity) */
+@import "./semantic/theme-default.css";
+@import "./semantic/theme-slate.css";
+@import "./semantic/theme-indigo.css";
+@import "./semantic/theme-emerald.css";
+@import "./semantic/theme-rose.css";
+
+/* Modes (light/dark/night) */
+@import "./modes/mode-light.css";
+@import "./modes/mode-dark.css";
+@import "./modes/mode-night.css";
+
+/* Component-level tokens (optional) */
+@import "./components/code.css";

package/tokens/modes/mode-dark.css

@@ -0,0 +1,14 @@
+/* @tailng/theme - tokens/modes/mode-dark.css
+   Mode tokens (dark).
+   Apply by setting: <html class="mode-dark"> */
+
+:where(html.mode-dark, .mode-dark) {
+  --background-color: #020617;
+  --alternate-background-color: #0b1220;
+  --text-color: #e5e7eb;
+
+  --border-color: #1e293b;
+  --border-color-hover: #334155;
+
+  --disable-color: #94a3b8;
+}

package/tokens/modes/mode-light.css

@@ -0,0 +1,14 @@
+/* @tailng/theme - tokens/modes/mode-light.css
+   Mode tokens (light).
+   Apply by setting: <html class="mode-light"> */
+
+:where(html.mode-light, .mode-light) {
+  --background-color: #ffffff;
+  --alternate-background-color: #f8fafc;
+  --text-color: #0f172a;
+
+  --border-color: #e2e8f0;
+  --border-color-hover: #cbd5e1;
+
+  --disable-color: #64748b;
+}

package/tokens/modes/mode-night.css

@@ -0,0 +1,14 @@
+/* @tailng/theme - tokens/modes/mode-night.css
+   Mode tokens (night / true-black).
+   Apply by setting: <html class="mode-night"> */
+
+:where(html.mode-night, .mode-night) {
+  --background-color: #000000;
+  --alternate-background-color: #070a10;
+  --text-color: #e5e7eb;
+
+  --border-color: #111827;
+  --border-color-hover: #1f2937;
+
+  --disable-color: #9ca3af;
+}

package/tokens/palettes/default.css

@@ -0,0 +1,3 @@
+/* @tailng/theme - tokens/palettes/default.css
+   Optional raw palette definitions (if you want to maintain palette ramps).
+   Keep empty for now or define ramps like --blue-50 ... --blue-900. */

package/tokens/palettes/slate.css

@@ -0,0 +1,2 @@
+/* @tailng/theme - tokens/palettes/slate.css
+   Optional slate palette ramp definitions. */

package/tokens/semantic/theme-default.css

@@ -0,0 +1,30 @@
+/* @tailng/theme - tokens/semantic/theme-default.css
+   Brand identity tokens (stable across modes).
+   Apply by setting: <html class="theme-default"> */
+
+:where(html.theme-default, .theme-default) {
+  /* Primary (blue) */
+  --primary-color: #2563eb;        /* blue-600 */
+  --primary-color-hover: #1d4ed8;  /* blue-700 */
+  --on-primary-color: #ffffff;
+
+  /* Danger (red) */
+  --danger-color: #dc2626;         /* red-600 */
+  --danger-color-hover: #b91c1c;   /* red-700 */
+  --on-danger-color: #ffffff;
+
+  /* Warning (amber) */
+  --warning-color: #f59e0b;        /* amber-500 */
+  --warning-color-hover: #d97706;  /* amber-600 */
+  --on-warning-color: #020617;     /* near-slate-950 */
+
+  /* Success (green) */
+  --success-color: #16a34a;        /* green-600 */
+  --success-color-hover: #15803d;  /* green-700 */
+  --on-success-color: #ffffff;
+
+  /* Info (cyan) */
+  --info-color: #0891b2;           /* cyan-600 */
+  --info-color-hover: #0e7490;     /* cyan-700 */
+  --on-info-color: #ffffff;
+}

package/tokens/semantic/theme-emerald.css

@@ -0,0 +1,24 @@
+/* @tailng/theme - semantic/theme-emerald.css
+   Calm, positive theme */
+
+   :where(html.theme-emerald, .theme-emerald) {
+    --primary-color: #059669;        /* emerald-600 */
+    --primary-color-hover: #047857;  /* emerald-700 */
+    --on-primary-color: #ffffff;
+  
+    --danger-color: #dc2626;
+    --danger-color-hover: #b91c1c;
+    --on-danger-color: #ffffff;
+  
+    --warning-color: #f59e0b;
+    --warning-color-hover: #d97706;
+    --on-warning-color: #020617;
+  
+    --success-color: #16a34a;
+    --success-color-hover: #15803d;
+    --on-success-color: #ffffff;
+  
+    --info-color: #0ea5e9;
+    --info-color-hover: #0284c7;
+    --on-info-color: #ffffff;
+  }

package/tokens/semantic/theme-indigo.css

@@ -0,0 +1,24 @@
+/* @tailng/theme - semantic/theme-indigo.css
+   Modern SaaS theme */
+
+   :where(html.theme-indigo, .theme-indigo) {
+    --primary-color: #4f46e5;        /* indigo-600 */
+    --primary-color-hover: #4338ca;  /* indigo-700 */
+    --on-primary-color: #ffffff;
+  
+    --danger-color: #ef4444;
+    --danger-color-hover: #dc2626;
+    --on-danger-color: #ffffff;
+  
+    --warning-color: #f59e0b;
+    --warning-color-hover: #d97706;
+    --on-warning-color: #020617;
+  
+    --success-color: #22c55e;
+    --success-color-hover: #16a34a;
+    --on-success-color: #ffffff;
+  
+    --info-color: #06b6d4;
+    --info-color-hover: #0891b2;
+    --on-info-color: #ffffff;
+  }

package/tokens/semantic/theme-rose.css

@@ -0,0 +1,24 @@
+/* @tailng/theme - semantic/theme-rose.css
+   Soft but professional theme */
+
+   :where(html.theme-rose, .theme-rose) {
+    --primary-color: #e11d48;        /* rose-600 */
+    --primary-color-hover: #be123c;  /* rose-700 */
+    --on-primary-color: #ffffff;
+  
+    --danger-color: #dc2626;
+    --danger-color-hover: #b91c1c;
+    --on-danger-color: #ffffff;
+  
+    --warning-color: #f59e0b;
+    --warning-color-hover: #d97706;
+    --on-warning-color: #020617;
+  
+    --success-color: #22c55e;
+    --success-color-hover: #16a34a;
+    --on-success-color: #ffffff;
+  
+    --info-color: #0ea5e9;
+    --info-color-hover: #0284c7;
+    --on-info-color: #ffffff;
+  }

package/tokens/semantic/theme-slate.css

@@ -0,0 +1,24 @@
+/* @tailng/theme - semantic/theme-slate.css
+   Enterprise neutral theme */
+
+   :where(html.theme-slate, .theme-slate) {
+    --primary-color: #334155;        /* slate-700 */
+    --primary-color-hover: #1e293b;  /* slate-800 */
+    --on-primary-color: #ffffff;
+  
+    --danger-color: #dc2626;
+    --danger-color-hover: #b91c1c;
+    --on-danger-color: #ffffff;
+  
+    --warning-color: #f59e0b;
+    --warning-color-hover: #d97706;
+    --on-warning-color: #020617;
+  
+    --success-color: #16a34a;
+    --success-color-hover: #15803d;
+    --on-success-color: #ffffff;
+  
+    --info-color: #0ea5e9;
+    --info-color-hover: #0284c7;
+    --on-info-color: #ffffff;
+  }

package/types/tociva-tailng-theme.d.ts

@@ -0,0 +1,31 @@
+import { Config } from 'tailwindcss';
+
+declare const radii: {
+    readonly sm: "var(--radius-sm)";
+    readonly md: "var(--radius-md)";
+    readonly lg: "var(--radius-lg)";
+};
+declare const motion: {
+    readonly fast: "var(--duration-fast)";
+    readonly normal: "var(--duration-normal)";
+    readonly slow: "var(--duration-slow)";
+};
+
+declare const colors: {
+    readonly bg: "var(--background-color)";
+    readonly fg: "var(--text-color)";
+    readonly border: "var(--border-color)";
+    readonly primary: "var(--primary-color)";
+    readonly danger: "var(--danger-color)";
+    readonly warning: "var(--warning-color)";
+    readonly success: "var(--success-color)";
+    readonly info: "var(--info-color)";
+};
+
+/**
+ * Tailwind preset for @tailng/theme.
+ * Map Tailwind colors to CSS variables (no hardcoded colors here).
+ */
+declare const tailngPreset: Partial<Config>;
+
+export { colors, motion, radii, tailngPreset };