@engie-group/fluid-design-tokens - npm Package Compare versions

Comparing version 5.7.2 to 5.8.0

CHANGELOG.md

@@ -8,2 +8,28 @@ # Changelog
 
+## 📦 5.8.0 - 2024-09-08
+
+### ⚠️ Breaking changes
+
+###### [GLOBAL]
+
+- Tailwind presets are now exported through a new entry point `@engie-group/fluid-design-tokens/tailwind`.
+  Please update your codebase accordingly:
+
+  ```diff
+  - import { FluidTailwindPresets } from '@engie-group/fluid-design-tokens';
+  + import { FluidTailwindPresets } from '@engie-group/fluid-design-tokens/tailwind';
+  ```
+
+### 🚀 Added
+
+###### [GLOBAL]
+
+- CSS tokens are now accessible through a new entry point `@engie-group/fluid-design-tokens/css`.
+  You can now import them like this:
+
+  ```diff
+  - import '@engie-group/fluid-design-tokens/lib/css/tokens.css';
+  + import '@engie-group/fluid-design-tokens/css';
+  ```
+
 ## 📦 5.7.2 - 2024-07-09
@@ -10,0 +36,0 @@

package.json

 {
   "name": "@engie-group/fluid-design-tokens",
-  "version": "5.7.2",
+  "version": "5.8.0",
   "description": "Fluid Design Tokens",
@@ -32,14 +32,22 @@ "keywords": [
     "lib/",
-    "src/",
     "docs/",
-    "public-api.js",
-    "tailwind.presets.js",
-    "types.d.ts",
-    "utils.js",
     "CHANGELOG.md"
   ],
-  "main": "./public-api.js",
-  "types": "./types.d.ts",
-  "directories": {
-    "lib": "lib/"
+  "type": "module",
+  "main": "./lib/index.cjs",
+  "module": "./lib/index.js",
+  "types": "./lib/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./lib/index.js",
+      "require": "./lib/index.cjs",
+      "types": "./lib/index.d.ts"
+    },
+    "./tailwind": {
+      "import": "./lib/tailwind.presets.js",
+      "require": "./lib/tailwindpresets.cjs",
+      "types": "./lib/tailwind.presets.d.ts"
+    },
+    "./css": "./lib/css/tokens.css",
+    "./lib/*": "./lib/*"
   },
@@ -54,2 +62,3 @@ "publishConfig": {
   "devDependencies": {
+    "@rollup/plugin-typescript": "^11.1.6",
     "dedent": "1.5.1",
@@ -59,5 +68,9 @@ "fs-extra": "^11.2.0",
     "prettier": "3.2.5",
+    "rollup": "^4.20.0",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-delete": "^2.0.0",
     "sd-tailwindcss-transformer": "1.4.1",
     "style-dictionary": "3.9.2",
-    "tinycolor2": "1.6.0"
+    "tinycolor2": "1.6.0",
+    "typescript": "^5.5.4"
   },
@@ -69,4 +82,4 @@ "dependencies": {
     "ci:build": "pnpm run build",
-    "build": "node ./build.js"
+    "build": "node ./build.js && pnpm rollup -c"
   }
 }

README.md

@@ -1,8 +0,12 @@
-## Fluid Design Tokens by ENGIE
+## Engie's design token of the Fluid design system
 
-This repository contains the design tokens from the Fluid Design System.
+[Fluid](https://www.engie.design/fluid-design-system/) is the Engie's design system, a collection of reusable components and styles used to build Engie's digital products.
 
+Here is the package to benefit from Fluid's design tokens in your project.
+
 > 🚀 NEWS 🚀 **v5.4 comes with huge changes**, and we are happy to announce that we provide a **script** to simplify the migration. Check out the [migration guide v5.3 to v5.4](https://www.engie.design/fluid-design-system/design-tokens/migration-guide-v53-to-v54/) and the [fluid-scripts' readme](https://www.engie.design/fluid-design-system/fluid-scripts/readme/) for more information.
 
-- [Quick start](#quick-start)
+- [Versioning](#versioning)
+- [Getting started](#getting-started)
+  - [Install this package](#install-this-package)
 - [How to use](#how-to-use)
@@ -20,6 +24,14 @@ - [Css](#css)
 
-### Quick start
+## Versioning
 
-#### Install this package:
+⚠️ This package doesn't follow semantic versioning, breaking changes may be introduced in minor versions.
 
+We recommend **fixing the version with the exact package version** to avoid breaking changes affecting your live website.
+Moreover, we recommend checking the [CHANGELOG](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/blob/master/CHANGELOG.md) before updating the package after a release.
+
+
+### Getting started
+
+#### Package installation:
+
 ```shell
@@ -31,7 +43,7 @@ # Using npm
 yarn add --exact @engie-group/fluid-design-tokens
+
+# Using pnpm 
+pnpm add --save-exact @engie-group/fluid-design-tokens
 ```
 
-##### ⚠ DISCLAIMER
-When installing the package via npm or importing it via CDN we recommend **fixing the version with the exact package version to avoid breaking changes** affecting your live website. With ever-evolving topics like Accessibility and Brand guidelines, we have to include some minor breaking changes in some minor versions.
-
 ### How to use
@@ -53,15 +65,13 @@
 │   │   └── tokens.css
-│   ├── js
-│   │   ├── standalone-tokens-dark.js
-│   │   ├── standalone-tokens.js
-│   │   ├── tokens-dark.js
-│   │   └── tokens.js
 │   ├── json
 │   │   ├── tokens-dark.json
 │   │   └── tokens.json
-│   └── ts
-│       ├── standalone-tokens-dark.ts
-│       ├── standalone-tokens.ts
-│       ├── tokens-dark.ts
-│       └── tokens.ts
+│   ├── tailwind
+│   │   └── tailwind.config.js
+│   ├── ts
+│   │   ├── standalone-tokens-dark.ts
+│   │   ├── standalone-tokens.ts
+│   │   ├── tokens-dark.ts
+│   │   └── tokens.ts
+│   └── index.js
 ```
@@ -76,3 +86,3 @@
 /* In your css / scss / ... */
-@import "~@engie-group/fluid-design-tokens/lib/css/tokens.css";
+@import "@engie-group/fluid-design-tokens/css";
 ```
@@ -82,3 +92,3 @@
 // In projects where you can import css files in the js
-import "~@engie-group/fluid-design-tokens/lib/css/tokens.css";
+import "@engie-group/fluid-design-tokens/css";
 ```
@@ -174,3 +184,3 @@
 ```js
-import {FluidTailwindPresets} from '@engie-group/fluid-design-tokens';
+import {FluidTailwindPresets} from '@engie-group/fluid-design-tokens/tailwind';
 
@@ -191,3 +201,3 @@ /** @type {import('tailwindcss').Config} */
 
-Exemple usage in code:
+Example usage in code:
 
@@ -194,0 +204,0 @@ ```html

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3147598

increased by100.67%

Lines of code

60712

increased by94.79%

Number of lines in readme file

316

increased by3.27%

Is type module

Yes

Worsened metrics

Dev dependency count

12

increased by71.43%

Number of package files

20

decreased by-60.78%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes