@digigov/css 2.0.13 → 2.0.14-platform-201.01-04-26-11-49

package/README.md

@@ -1,7 +1,76 @@
-# Digigov Css
+# @digigov/css
 
-Get started with Digigov CSS, the official CSS library of the GOV.GR design system for building responsive, mobile-first services.
+CSS component library for the Digigov design system. Ships pre-built CSS files that include base styles, component classes (`.ds-*`), and layout utilities — all built on Tailwind CSS and themed via CSS custom properties.
 
-Our goal is to provide a lightweight, easy-to-use and well documented CSS library for everyone that wants to create a pixel-perfect GOV.GR Service.
+## Installation
 
-Use our [design system](https://guide.demo.gov.gr/) to make your service consistent with GOV.GR.
+```bash
+npm install @digigov/css
+```
+
+## Usage
+
+### Without Tailwind CSS
+
+Import the pre-built CSS bundle. No build tooling required — all Tailwind directives are already compiled.
+
+```js
+import '@digigov/css'; // dist/digigov.css — includes theme-default + theme-govgr
+```
+
+Or pick a variant:
+
+| Dist file                | Contents                                                    |
+| ------------------------ | ----------------------------------------------------------- |
+| `dist/digigov.css`       | theme-default + theme-govgr + base + components + utilities |
+| `dist/digigov-plain.css` | theme-default + base + components + utilities               |
+| `dist/digigov-base.css`  | base + components + utilities (no theme)                    |
+
+### With Tailwind CSS
+
+If your app uses Tailwind and you want to write utility classes like `bg-primary`, `text-error/50`, or `md:flex` using the design system tokens, use the exported Tailwind config as a preset:
+
+```js
+// tailwind.config.js
+module.exports = {
+  presets: [require('@digigov/css/tailwind.config.js')],
+  content: ['./src/**/*.{js,ts,jsx,tsx}'],
+};
+```
+
+Then import the dist CSS alongside your own Tailwind entry:
+
+```js
+import '@digigov/css'; // design system components + theme
+import './main.css'; // your Tailwind entry point
+```
+
+```css
+/* main.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+The preset gives your Tailwind build access to all design system colors, breakpoints, fonts, and extended theme values. Your utility classes will resolve to the same CSS custom properties that the design system components use.
+
+## Dist contents
+
+The pre-built CSS includes:
+
+- **Base styles** — Global defaults (`body`, `html`) using design system tokens
+- **Components** — All `.ds-*` component classes (buttons, forms, cards, accordions, navigation, etc.)
+- **Utilities** — Layout helpers (`.ds-grid`, `.ds-gap-*`, `.ds-m-*`, `.ds-p-*`, `.ds-print-*`)
+
+## Theming
+
+Themes provide CSS custom properties (e.g. `--color-primary-rgb`) that the component styles reference. Two themes are available:
+
+- **theme-default** — included in `digigov.css` and `digigov-plain.css`
+- **theme-govgr** — included in `digigov.css`
+
+Use `digigov-plain.css` if you only need the default theme, or `digigov-base.css` if you want to provide your own theme variables.
+
+### Dark mode
+
+Dark mode uses the `class` strategy. Add the `dark` class to an ancestor element to activate dark theme overrides.