@krrli/cm-designsystem 1.34.10 → 1.34.11

package/README.md

@@ -20,7 +20,12 @@ A modern React component library built with TypeScript, Tailwind CSS, and Storyb
 
 ## Usage in Your Project
 
-To use the components and styles in your project with Tailwind CSS v4:
+The CM Design System provides four key exports:
+
+1. **Design Tokens** - Colors, spacing, fonts (framework-agnostic)
+2. **Tailwind Preset** - Pre-configured Tailwind theme
+3. **React Components** - Built with Radix UI + Tailwind
+4. **Base Styles** - Font imports and base CSS
 
 ### 1. Install the package
 
@@ -28,29 +33,40 @@ To use the components and styles in your project with Tailwind CSS v4:
 npm install @krrli/cm-designsystem
 ```
 
-### 2. Configure Tailwind CSS in your consuming app
+### 2. Install peer dependencies
 
-In your app's CSS file (e.g., `app/globals.css` or `src/index.css`), add:
+```bash
+npm install @radix-ui/react-accessible-icon @radix-ui/react-aspect-ratio @radix-ui/react-avatar @radix-ui/react-dialog @radix-ui/react-form @radix-ui/react-tabs @radix-ui/react-toggle
+```
 
-```css
-@import "tailwindcss";
+### 3. Configure Tailwind CSS
 
-/* Import the design system's Tailwind configuration and theme */
-@import "@krrli/cm-designsystem/src/index.css";
+Create or update your `tailwind.config.ts`:
 
-/* Scan the design system's components for Tailwind classes */
-@source "../node_modules/@krrli/cm-designsystem/dist/**/*.js";
+```typescript
+import type { Config } from "tailwindcss";
+import designSystemPreset from "@krrli/cm-designsystem/tailwind.preset";
 
-/* Your app's custom theme/styles can go here */
+export default {
+  presets: [designSystemPreset],
+  content: [
+    "./src/**/*.{ts,tsx,js,jsx}",
+    // Scan design system components for Tailwind classes
+    "./node_modules/@krrli/cm-designsystem/dist/**/*.js",
+  ],
+} satisfies Config;
 ```
 
-### 3. Install required peer dependencies
+### 4. Import base styles
 
-```bash
-npm install @radix-ui/react-accessible-icon @radix-ui/react-aspect-ratio @radix-ui/react-avatar @radix-ui/react-dialog @radix-ui/react-form @radix-ui/react-tabs @radix-ui/react-toggle
+In your app's CSS file (e.g., `app/globals.css` or `src/index.css`):
+
+```css
+@import "tailwindcss";
+@import "@krrli/cm-designsystem/base.css";
 ```
 
-### 4. Import and use components
+### 5. Use components
 
 ```tsx
 import { Button } from "@krrli/cm-designsystem";
@@ -64,11 +80,25 @@ function App() {
 }
 ```
 
-### Notes
+### Optional: Use design tokens directly
+
+```typescript
+import { colors, fonts, spacing } from "@krrli/cm-designsystem/tokens";
+
+// Use in your own components
+const customStyle = {
+  color: colors.violet[600],
+  fontFamily: fonts.poppins.join(", "),
+};
+```
+
+### Architecture Benefits
 
-- **Tailwind CSS v4**: This design system uses Tailwind CSS v4. Your consuming app must also use Tailwind v4 with the `@tailwindcss/vite` plugin.
-- **Source-based approach**: The design system ships JavaScript/TypeScript source files. Your app's Tailwind processes all utility classes, including responsive variants.
-- **Font**: The Poppins font is bundled with the design system and will be automatically available when you import the CSS.
+- ✅ **SSR-safe**: No runtime CSS-in-JS
+- ✅ **All responsive variants work**: Your Tailwind scans the design system
+- ✅ **Type-safe tokens**: Import and use tokens directly
+- ✅ **Clean separation**: Tokens, config, components, and styles are separate
+- ✅ **Framework-compatible**: Works with Next.js, Vite, and other tools
 
 ````
 

package/dist/tailwind.preset.d.ts

@@ -0,0 +1,8 @@
+import { Config } from 'tailwindcss';
+/**
+ * Tailwind CSS Preset for CM Design System
+ * Import this preset in your tailwind.config.ts
+ */
+declare const preset: Partial<Config>;
+export default preset;
+//# sourceMappingURL=tailwind.preset.d.ts.map

package/dist/tailwind.preset.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tailwind.preset.d.ts","sourceRoot":"","sources":["../src/tailwind.preset.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAE1C;;;GAGG;AACH,QAAA,MAAM,MAAM,EAAE,OAAO,CAAC,MAAM,CAwB3B,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/tailwind.preset.js

@@ -0,0 +1,29 @@
+import { spacing, fontWeights, fonts, colors } from "./tokens.js";
+const preset = {
+  theme: {
+    extend: {
+      colors: {
+        black: colors.black,
+        white: colors.white,
+        error: colors.error,
+        slate: colors.slate,
+        pink: colors.pink,
+        violet: colors.violet
+      },
+      fontFamily: {
+        poppins: fonts.poppins
+      },
+      fontWeight: {
+        medium: fontWeights.medium,
+        semibold: fontWeights.semibold,
+        bold: fontWeights.bold
+      },
+      spacing: {
+        base: spacing.base
+      }
+    }
+  }
+};
+export {
+  preset as default
+};

package/dist/tokens/index.d.ts

@@ -0,0 +1,60 @@
+/**
+ * Design Tokens
+ * Framework-agnostic design values that can be used in any context
+ */
+export declare const colors: {
+    readonly black: "oklch(0 0 0)";
+    readonly white: "oklch(1 0 0)";
+    readonly error: "oklch(57.7% 0.245 27.325)";
+    readonly slate: {
+        readonly 50: "oklch(0.984 0.003 247.858)";
+        readonly 100: "oklch(0.968 0.007 247.896)";
+        readonly 200: "oklch(0.929 0.013 255.508)";
+        readonly 300: "oklch(0.869 0.022 252.894)";
+        readonly 400: "oklch(0.704 0.04 256.788)";
+        readonly 500: "oklch(0.554 0.046 257.417)";
+        readonly 600: "oklch(0.446 0.043 257.281)";
+        readonly 700: "oklch(0.372 0.044 257.287)";
+        readonly 800: "oklch(0.279 0.041 260.031)";
+        readonly 900: "oklch(0.208 0.042 265.755)";
+        readonly 950: "oklch(0.129 0.042 264.695)";
+    };
+    readonly pink: {
+        readonly 50: "oklch(0.971 0.014 343.198)";
+        readonly 100: "oklch(0.948 0.028 342.258)";
+        readonly 200: "oklch(0.899 0.061 343.231)";
+        readonly 300: "oklch(0.823 0.12 346.018)";
+        readonly 400: "oklch(0.718 0.202 349.761)";
+        readonly 500: "oklch(0.656 0.241 354.308)";
+        readonly 600: "oklch(0.592 0.249 0.584)";
+        readonly 700: "oklch(0.525 0.223 3.958)";
+        readonly 800: "oklch(0.459 0.187 3.815)";
+        readonly 900: "oklch(0.408 0.153 2.432)";
+        readonly 950: "oklch(0.284 0.109 3.907)";
+    };
+    readonly violet: {
+        readonly 50: "oklch(0.969 0.016 293.756)";
+        readonly 100: "oklch(0.943 0.029 294.588)";
+        readonly 200: "oklch(0.894 0.057 293.283)";
+        readonly 300: "oklch(0.811 0.111 293.571)";
+        readonly 400: "oklch(0.702 0.183 293.541)";
+        readonly 500: "oklch(0.606 0.25 292.717)";
+        readonly 600: "oklch(0.541 0.281 293.009)";
+        readonly 700: "oklch(0.491 0.27 292.581)";
+        readonly 800: "oklch(0.432 0.232 292.759)";
+        readonly 900: "oklch(0.38 0.189 293.745)";
+        readonly 950: "oklch(0.283 0.141 291.089)";
+    };
+};
+export declare const spacing: {
+    readonly base: "4px";
+};
+export declare const fonts: {
+    readonly poppins: readonly ["Poppins", "sans-serif"];
+};
+export declare const fontWeights: {
+    readonly medium: "500";
+    readonly semibold: "600";
+    readonly bold: "700";
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/tokens/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tokens/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDT,CAAC;AAEX,eAAO,MAAM,OAAO;;CAEV,CAAC;AAEX,eAAO,MAAM,KAAK;;CAER,CAAC;AAEX,eAAO,MAAM,WAAW;;;;CAId,CAAC"}

package/dist/tokens.js

@@ -0,0 +1,65 @@
+const colors = {
+  // Base
+  black: "oklch(0 0 0)",
+  white: "oklch(1 0 0)",
+  error: "oklch(57.7% 0.245 27.325)",
+  // Slate
+  slate: {
+    50: "oklch(0.984 0.003 247.858)",
+    100: "oklch(0.968 0.007 247.896)",
+    200: "oklch(0.929 0.013 255.508)",
+    300: "oklch(0.869 0.022 252.894)",
+    400: "oklch(0.704 0.04 256.788)",
+    500: "oklch(0.554 0.046 257.417)",
+    600: "oklch(0.446 0.043 257.281)",
+    700: "oklch(0.372 0.044 257.287)",
+    800: "oklch(0.279 0.041 260.031)",
+    900: "oklch(0.208 0.042 265.755)",
+    950: "oklch(0.129 0.042 264.695)"
+  },
+  // Pink
+  pink: {
+    50: "oklch(0.971 0.014 343.198)",
+    100: "oklch(0.948 0.028 342.258)",
+    200: "oklch(0.899 0.061 343.231)",
+    300: "oklch(0.823 0.12 346.018)",
+    400: "oklch(0.718 0.202 349.761)",
+    500: "oklch(0.656 0.241 354.308)",
+    600: "oklch(0.592 0.249 0.584)",
+    700: "oklch(0.525 0.223 3.958)",
+    800: "oklch(0.459 0.187 3.815)",
+    900: "oklch(0.408 0.153 2.432)",
+    950: "oklch(0.284 0.109 3.907)"
+  },
+  // Violet
+  violet: {
+    50: "oklch(0.969 0.016 293.756)",
+    100: "oklch(0.943 0.029 294.588)",
+    200: "oklch(0.894 0.057 293.283)",
+    300: "oklch(0.811 0.111 293.571)",
+    400: "oklch(0.702 0.183 293.541)",
+    500: "oklch(0.606 0.25 292.717)",
+    600: "oklch(0.541 0.281 293.009)",
+    700: "oklch(0.491 0.27 292.581)",
+    800: "oklch(0.432 0.232 292.759)",
+    900: "oklch(0.38 0.189 293.745)",
+    950: "oklch(0.283 0.141 291.089)"
+  }
+};
+const spacing = {
+  base: "4px"
+};
+const fonts = {
+  poppins: ["Poppins", "sans-serif"]
+};
+const fontWeights = {
+  medium: "500",
+  semibold: "600",
+  bold: "700"
+};
+export {
+  colors,
+  fontWeights,
+  fonts,
+  spacing
+};

package/package.json

@@ -1,14 +1,29 @@
 {
   "name": "@krrli/cm-designsystem",
   "repository": "https://github.com/ost-cas-fea-25-26/cm-designsystem",
-  "version": "1.34.10",
+  "version": "1.34.11",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./tokens": {
+      "types": "./dist/tokens/index.d.ts",
+      "import": "./dist/tokens/index.js"
+    },
+    "./tailwind.preset": {
+      "types": "./dist/tailwind.preset.d.ts",
+      "import": "./dist/tailwind.preset.js"
+    },
+    "./base.css": "./src/base.css"
+  },
   "files": [
     "dist",
-    "src/index.css"
+    "src/base.css"
   ],
   "sideEffects": false,
   "publishConfig": {

package/src/base.css

@@ -0,0 +1,17 @@
+/**
+ * Base styles for CM Design System
+ * Import this in your consuming app's CSS file
+ */
+
+/* Import Poppins font */
+@import "@fontsource/poppins/400.css";
+@import "@fontsource/poppins/500.css";
+@import "@fontsource/poppins/600.css";
+@import "@fontsource/poppins/700.css";
+
+@layer base {
+  html {
+    font-family: theme("fontFamily.poppins");
+    color: theme("colors.slate.600");
+  }
+}

package/dist/setupTests.d.ts

@@ -1 +0,0 @@
-//# sourceMappingURL=setupTests.d.ts.map

package/dist/setupTests.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"setupTests.d.ts","sourceRoot":"","sources":["../src/setupTests.ts"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAC"}

package/src/index.css

@@ -1,88 +0,0 @@
-@import "tailwindcss";
-@source "../src/**/*.{ts,tsx,js,jsx}";
-
-/* Import Poppins font */
-@import "@fontsource/poppins/400.css";
-@import "@fontsource/poppins/500.css";
-@import "@fontsource/poppins/600.css";
-@import "@fontsource/poppins/700.css";
-
-@theme {
-  /* -----------------------------------------
-    Color
-  ----------------------------------------- */
-  --color-*: initial;
-
-  /* Base */
-  --color-black: oklch(0 0 0);
-  --color-white: oklch(1 0 0);
-  --color-error: oklch(57.7% 0.245 27.325);
-
-  /* Slate */
-  --color-slate-50: oklch(0.984 0.003 247.858);
-  --color-slate-100: oklch(0.968 0.007 247.896);
-  --color-slate-200: oklch(0.929 0.013 255.508);
-  --color-slate-300: oklch(0.869 0.022 252.894);
-  --color-slate-400: oklch(0.704 0.04 256.788);
-  --color-slate-500: oklch(0.554 0.046 257.417);
-  --color-slate-600: oklch(0.446 0.043 257.281);
-  --color-slate-700: oklch(0.372 0.044 257.287);
-  --color-slate-800: oklch(0.279 0.041 260.031);
-  --color-slate-900: oklch(0.208 0.042 265.755);
-  --color-slate-950: oklch(0.129 0.042 264.695);
-
-  /* Pink */
-  --color-pink-50: oklch(0.971 0.014 343.198);
-  --color-pink-100: oklch(0.948 0.028 342.258);
-  --color-pink-200: oklch(0.899 0.061 343.231);
-  --color-pink-300: oklch(0.823 0.12 346.018);
-  --color-pink-400: oklch(0.718 0.202 349.761);
-  --color-pink-500: oklch(0.656 0.241 354.308);
-  --color-pink-600: oklch(0.592 0.249 0.584);
-  --color-pink-700: oklch(0.525 0.223 3.958);
-  --color-pink-800: oklch(0.459 0.187 3.815);
-  --color-pink-900: oklch(0.408 0.153 2.432);
-  --color-pink-950: oklch(0.284 0.109 3.907);
-
-  /* Violet */
-  --color-violet-50: oklch(0.969 0.016 293.756);
-  --color-violet-100: oklch(0.943 0.029 294.588);
-  --color-violet-200: oklch(0.894 0.057 293.283);
-  --color-violet-300: oklch(0.811 0.111 293.571);
-  --color-violet-400: oklch(0.702 0.183 293.541);
-  --color-violet-500: oklch(0.606 0.25 292.717);
-  --color-violet-600: oklch(0.541 0.281 293.009);
-  --color-violet-700: oklch(0.491 0.27 292.581);
-  --color-violet-800: oklch(0.432 0.232 292.759);
-  --color-violet-900: oklch(0.38 0.189 293.745);
-  --color-violet-950: oklch(0.283 0.141 291.089);
-
-  /* -----------------------------------------
-    Spacing
-  ----------------------------------------- */
-  --spacing-*: initial;
-  --spacing: 4px;
-
-  /* -----------------------------------------
-    Typography
-  ----------------------------------------- */
-  /* Font family */
-  --font-*: initial;
-  --font-poppins: Poppins, sans-serif;
-
-  /* Font weight */
-  --font-weight-*: initial;
-  --font-weight-medium: 500;
-  --font-weight-semibold: 600;
-  --font-weight-bold: 700;
-
-  /* Text */
-  --text-*: initial;
-}
-
-@layer base {
-  html {
-    font-family: var(--font-poppins);
-    color: var(--color-slate-600);
-  }
-}