@krrli/cm-designsystem 1.34.9 → 1.34.10

package/README.md

@@ -20,32 +20,58 @@ 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:
+To use the components and styles in your project with Tailwind CSS v4:
 
-1. Install the package:
+### 1. Install the package
 
 ```bash
-npm i @krrli/cm-designsystem
+npm install @krrli/cm-designsystem
 ```
 
-2. Import the bundled CSS in your app entry (e.g., `main.tsx` or `App.tsx`):
+### 2. Configure Tailwind CSS in your consuming app
 
-```js
-import "cm-designsystem/dist/cm-designsystem.css";
+In your app's CSS file (e.g., `app/globals.css` or `src/index.css`), add:
+
+```css
+@import "tailwindcss";
+
+/* Import the design system's Tailwind configuration and theme */
+@import "@krrli/cm-designsystem/src/index.css";
+
+/* Scan the design system's components for Tailwind classes */
+@source "../node_modules/@krrli/cm-designsystem/dist/**/*.js";
+
+/* Your app's custom theme/styles can go here */
 ```
 
-3. Import and use components as needed:
+### 3. Install required peer dependencies
+
+```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
+```
 
-```js
-import { Button } from "cm-designsystem";
+### 4. Import and use components
+
+```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>
   );
 }
 ```
 
+### Notes
+
+- **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.
+
+````
+
 ---
 
 ## Technical Stack
@@ -71,7 +97,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/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@krrli/cm-designsystem",
   "repository": "https://github.com/ost-cas-fea-25-26/cm-designsystem",
-  "version": "1.34.9",
+  "version": "1.34.10",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "src/index.css"
   ],
   "sideEffects": false,
   "publishConfig": {
@@ -32,6 +33,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 +51,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 +75,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 +85,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/index.css

@@ -0,0 +1,88 @@
+@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);
+  }
+}