@ama-pt/agora-design-system 3.7.0 → 4.0.1

package/README.md

@@ -38,90 +38,47 @@ ADS presents a set of rules and guidelines that must be followed in the design a
 > npm install @ama-pt/agora-design-system
 ```
 
-## Tailwind configuration
+## Tailwind CSS v4 configuration
 
-In order to reduce bundle size, we needed do strip some classes from the bundle. As result, some of the tailwind classes may not be available out of the box. To have access to all tailwind AgoraDS themed classes you have to do some additional steps.
-
-- Install and initialize tailwindcss
-
-```sh
-> npm install -D tailwindcss postcss autoprefixer
-> npx tailwindcss init -p
-```
-
-- Add the @tailwind directives for each of Tailwind’s layers to your main CSS file
+AgoraDS 4 requires Tailwind CSS v4. Configure Tailwind for your framework using the
+[official installation guide](https://tailwindcss.com/docs/installation), then add these imports to your main CSS file in the order shown:
 
 ```css
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-```
+/* AgoraDS design tokens */
+@import '@ama-pt/agora-design-system/theme.css';
 
-- Open tailwind.config.ts, set AgoraDS configs, and set the **content** config with the desired glob to allow tailwind to generate all of the corresponding CSS needed for your project:
+/* Tailwind v4 reset and utilities */
+@import 'tailwindcss/preflight';
+@import 'tailwindcss/utilities';
 
-```typescript
-import { AgoraTailwindConfig } from '@ama-pt/agora-design-system';
-import type { Config } from 'tailwindcss';
-
-const TailwindConfig: Config = {
-  content: ['src/**/*.{ts,tsx}'],
-  theme: AgoraTailwindConfig.theme,
-  plugins: AgoraTailwindConfig.plugins,
-  safelist: AgoraTailwindConfig.safelist,
-  corePlugins: {
-    preflight: false
-  }
-};
-
-export default TailwindConfig;
+/* AgoraDS compiled component styles */
+@import '@ama-pt/agora-design-system/index.css';
 ```
 
-- import the css style file that exists in node_modules folder into your layout.tsx file (if working with NextJS) or index.tsx (if working with React only)
+No `tailwind.config` file or `AgoraTailwindConfig` import is required. AgoraDS uses Tailwind v4's CSS-first configuration.
 
-```typescript
-//  typescript import
-import '@ama-pt/agora-design-system/artifacts/dist/index.css';
-//  or equivalent for javascript imports
-```
+## Overriding the AgoraDS theme
 
-- Run and test the app...
-
-## Overriding Tailwind configuration
-
-To override any tailwind config you need to update the tailwind.config.ts file as explained in the following example:
-
-```typescript
-import { AgoraTailwindConfig } from '@ama-pt/agora-design-system';
-import type { Config } from 'tailwindcss';
-
-const TailwindConfig: Config = {
-  content: ['src/**/*.tsx'],
-  theme: {
-    ...AgoraTailwindConfig.theme,
-    colors: {
-      ...AgoraTailwindConfig.theme.colors,
-      primary: {
-        50: '#FFF000',
-        100: '#FFF000',
-        200: '#FFF000',
-        300: '#FFF000',
-        400: '#FFF000',
-        500: '#FFF000',
-        600: '#FFF000',
-        700: '#FFF000',
-        800: '#FFF000',
-        900: '#FFF000'
-      }
-    }
-  },
-  plugins: AgoraTailwindConfig.plugins,
-  safelist: AgoraTailwindConfig.safelist,
-  corePlugins: { preflight: false }
-};
-
-export default TailwindConfig;
-```
+Override design tokens with an `@theme` block after the imports. For example, the following changes the primary color palette:
 
-With this example we are transforming all primary color shades into yellow.
+```css
+@import '@ama-pt/agora-design-system/theme.css';
+@import 'tailwindcss/preflight';
+@import 'tailwindcss/utilities';
+@import '@ama-pt/agora-design-system/index.css';
+
+@theme {
+  --color-primary-50: #fff000;
+  --color-primary-100: #fff000;
+  --color-primary-200: #fff000;
+  --color-primary-300: #fff000;
+  --color-primary-400: #fff000;
+  --color-primary-500: #fff000;
+  --color-primary-600: #fff000;
+  --color-primary-700: #fff000;
+  --color-primary-800: #fff000;
+  --color-primary-900: #fff000;
+}
+```
 
-**corePlugins** - is used to disable de tailwind resets already done by the AgoraDS library.
+See the Storybook Installation Guide, Tailwind Theme Configuration, and Migration Guide for the complete setup and all v3-to-v4 breaking changes.