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

Comparing version 5.10.0 to 5.11.0

CHANGELOG.md

		@@ -8,2 +8,32 @@ # Changelog

		## 📦 5.11.0 - 2025-02-12

		### ⚠️ Breaking changes

		###### [FONT]

		- Created core token for font families and use them in semantic tokens
		- Renamed semantic font family tokens :
		- `--nj-semantic-font-family-sansSerif` to `--nj-semantic-font-family-default`
		- `--nj-semantic-font-family-monospace` to `--nj-semantic-font-family-code`
		- Deprecated some weight tokens: `--nj-font-weight-light` and `--nj-font-weight-black`
		- Renamed semantic font weight token `--nj-semantic-font-weight-normal` to `--nj-semantic-font-weight-regular`

		### 🚀 Added

		###### [SPACING]

		- Added two new spacing tokens to increase granularity: `--nj-semantic-size-spacing-40` and `--nj-semantic-size-spacing-128`

		###### [CSS]

		- Added a new `system` value to `data-theme` attribute. When the `system` value is set, the theme will reflect user's system preferences (dark/light)

		```html
		<!-- set the theme based on the system theme -->
		<body data-theme="system">
		...
		</body>
		```

		## 📦 5.10.0 - 2024-12-06
		@@ -10,0 +40,0 @@

package.json

		{
		"name": "@engie-group/fluid-design-tokens",
		"version": "5.10.0",
		"version": "5.11.0",
		"description": "Fluid Design Tokens",
		@@ -5,0 +5,0 @@ "keywords": [

README.md

		@@ -122,4 +122,6 @@ ## Engie's design token of the Fluid design system

		This allows to switch theme easily by adding a data-theme attribute in your html.
		This allows to switch theme easily by adding a data-theme attribute in your html.

		You also can provide a `"system"` value to the `data-theme` attribute to switch between light and dark theme based on the user's system preferences.

		```html
		@@ -126,0 +128,0 @@ <!-- In your html -->

lib/css/tokens.css

Sorry, the diff of this file is not supported yet

lib/index.cjs

Sorry, the diff of this file is not supported yet

lib/index.js