@krrli/cm-designsystem 1.34.9 → 1.34.11

package/README.md

@@ -20,32 +20,88 @@ 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:
+The CM Design System provides four key exports:
 
-1. Install the package:
+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
+
+```bash
+npm install @krrli/cm-designsystem
+```
+
+### 2. Install peer dependencies
 
 ```bash
-npm i @krrli/cm-designsystem
+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
+```
+
+### 3. Configure Tailwind CSS
+
+Create or update your `tailwind.config.ts`:
+
+```typescript
+import type { Config } from "tailwindcss";
+import designSystemPreset from "@krrli/cm-designsystem/tailwind.preset";
+
+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;
 ```
 
-2. Import the bundled CSS in your app entry (e.g., `main.tsx` or `App.tsx`):
+### 4. Import base styles
 
-```js
-import "cm-designsystem/dist/cm-designsystem.css";
+In your app's CSS file (e.g., `app/globals.css` or `src/index.css`):
+
+```css
+@import "tailwindcss";
+@import "@krrli/cm-designsystem/base.css";
 ```
 
-3. Import and use components as needed:
+### 5. Use components
 
-```js
-import { Button } from "cm-designsystem";
+```tsx
+import { Button } from "@krrli/cm-designsystem";
 
 function App() {
   return (
-    <Button label="Click me" intent="primary" size="md" onClick={() => {}} />
+    <Button intent="primary" size="md" onClick={() => console.log("Clicked!")}>
+      Click me
+    </Button>
   );
 }
 ```
 
+### 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
+
+- ✅ **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
+
+````
+
 ---
 
 ## Technical Stack
@@ -71,7 +127,7 @@ npm install
 
 # Start Storybook development server
 npm run storybook
-```
+````
 
 Storybook will be available at [http://localhost:6006](http://localhost:6006)
 

package/dist/components/icons/IconBase.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { AccessibleIcon } from "@radix-ui/react-accessible-icon";
-import { cn, tv } from "tailwind-variants";
+import { tv, cn } from "tailwind-variants";
 const iconStyles = tv({
   base: ["w-4", "h-4"]
 });

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,aAAa,CAAC;AAErB,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC"}

package/dist/index.js

@@ -1,4 +1,3 @@
-/* empty css          */
 import { Avatar } from "./components/avatar/Avatar.js";
 import { BrandingGallery } from "./components/branding/BrandingGallery.js";
 import { Button } from "./components/button/Button.js";

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,13 +1,29 @@
 {
   "name": "@krrli/cm-designsystem",
   "repository": "https://github.com/ost-cas-fea-25-26/cm-designsystem",
-  "version": "1.34.9",
+  "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"
+    "dist",
+    "src/base.css"
   ],
   "sideEffects": false,
   "publishConfig": {
@@ -32,6 +48,7 @@
     "e2e:update": "npm run build-storybook & docker run --rm -i -e TEST_BASE_URL=http://localhost:6006 -e CI=true -v ./playwright-report:/app/playwright-report -v ./test-results:/app/test-results -v ./storybook-static:/app/storybook-static -v ./tests:/app/tests -v ./playwright.config.ts:/app/playwright.config.ts cm-designsystem-visual-testing sh -c \"npx http-server /app/storybook-static -p 6006 & npx playwright test --update-snapshots\""
   },
   "dependencies": {
+    "@fontsource/poppins": "^5.2.7",
     "tailwind-variants": "3.2.2"
   },
   "peerDependencies": {
@@ -49,10 +66,10 @@
     "@chromatic-com/storybook": "4.1.3",
     "@eslint/js": "9.39.2",
     "@playwright/test": "1.57.0",
-    "@storybook/addon-a11y": "10.1.10",
-    "@storybook/addon-docs": "10.1.10",
-    "@storybook/addon-vitest": "10.1.10",
-    "@storybook/react-vite": "10.1.10",
+    "@storybook/addon-a11y": "10.1.11",
+    "@storybook/addon-docs": "10.1.11",
+    "@storybook/addon-vitest": "10.1.11",
+    "@storybook/react-vite": "10.1.11",
     "@tailwindcss/vite": "4.1.18",
     "@testing-library/dom": "10.4.1",
     "@testing-library/jest-dom": "6.9.1",
@@ -73,7 +90,7 @@
     "eslint-plugin-react": "7.37.5",
     "eslint-plugin-react-hooks": "7.0.1",
     "eslint-plugin-react-refresh": "0.4.26",
-    "eslint-plugin-storybook": "10.1.10",
+    "eslint-plugin-storybook": "10.1.11",
     "eslint-plugin-unused-imports": "4.3.0",
     "globals": "16.5.0",
     "jsdom": "27.4.0",
@@ -83,11 +100,11 @@
     "prettier-plugin-tailwindcss": "0.7.2",
     "rollup-preserve-directives": "1.1.3",
     "semantic-release": "25.0.2",
-    "storybook": "10.1.10",
+    "storybook": "10.1.11",
     "tailwind-merge": "3.4.0",
     "tailwindcss": "4.1.18",
     "typescript": "5.9.3",
-    "typescript-eslint": "8.50.1",
+    "typescript-eslint": "8.51.0",
     "vite": "7.3.0",
     "vite-plugin-dts": "4.5.4",
     "vite-plugin-svgr": "^4.5.0",

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");
+  }
+}