@fluentui/tokens - npm Package Compare versions

Comparing version 0.0.0-nightly-20240913-0407.1 to 0.0.0-nightly-20240916-0409.1

CHANGELOG.md

 # Change Log - @fluentui/tokens
 
-This log was last generated on Fri, 13 Sep 2024 04:12:25 GMT and should not be manually modified.
+This log was last generated on Mon, 16 Sep 2024 04:14:27 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20240913-0407.1](https://github.com/microsoft/fluentui/tree/@fluentui/tokens_v0.0.0-nightly-20240913-0407.1)
+## [0.0.0-nightly-20240916-0409.1](https://github.com/microsoft/fluentui/tree/@fluentui/tokens_v0.0.0-nightly-20240916-0409.1)
 
-Fri, 13 Sep 2024 04:12:25 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/tokens_v1.0.0-alpha.16..@fluentui/tokens_v0.0.0-nightly-20240913-0407.1)
+Mon, 16 Sep 2024 04:14:27 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/tokens_v1.0.0-alpha.16..@fluentui/tokens_v0.0.0-nightly-20240916-0409.1)
 
@@ -12,0 +12,0 @@ ### Changes

dist/index.d.ts

@@ -404,3 +404,3 @@ export declare type BorderRadiusTokens = {
 
-export declare type Theme = FontSizeTokens & LineHeightTokens & BorderRadiusTokens & StrokeWidthTokens & HorizontalSpacingTokens & VerticalSpacingTokens & DurationTokens & CurveTokens & ShadowTokens & ShadowBrandTokens & FontFamilyTokens & FontWeightTokens & ColorPaletteTokens & ColorStatusTokens & ColorTokens;
+export declare type Theme = FontSizeTokens & LineHeightTokens & BorderRadiusTokens & StrokeWidthTokens & HorizontalSpacingTokens & VerticalSpacingTokens & DurationTokens & CurveTokens & ShadowTokens & ShadowBrandTokens & FontFamilyTokens & FontWeightTokens & ColorPaletteTokens & ColorStatusTokens & ColorTokens & ZIndexTokens;
 
@@ -469,2 +469,16 @@ /**
 
+/**
+ * Design tokens for z-index groups and levels
+ */
+export declare type ZIndexTokens = {
+    zIndexBackground?: string;
+    zIndexContent?: string;
+    zIndexOverlay?: string;
+    zIndexPopup?: string;
+    zIndexMessages?: string;
+    zIndexFloating?: string;
+    zIndexPriority?: string;
+    zIndexDebug?: string;
+};
+
 export { }

lib-commonjs/tokens.js

@@ -498,3 +498,39 @@ "use strict";
     curveEasyEase: 'var(--curveEasyEase)',
-    curveLinear: 'var(--curveLinear)'
+    curveLinear: 'var(--curveLinear)',
+    /**
+   * ZIndexes
+   * Special case where the tokens contain default values
+   * ZIndexes are not mandatory, so they are not included in the theme, but can be used as tokens with default values
+   */ /**
+   * Elevation 0
+   * Can be used for background elements, like surfaces
+   */ zIndexBackground: 'var(--zIndexBackground, 0)',
+    /**
+   * Elevation 2
+   * Can be used content that is on top of the background, like cards
+   */ zIndexContent: 'var(--zIndexContent, 1)',
+    /**
+   * Elevation 4
+   * Can be used for overlays, like the backdrop of a modal
+   */ zIndexOverlay: 'var(--zIndexOverlay, 1000)',
+    /**
+   * Elevation 8
+   * Can be used for popups, like modals and drawers
+   */ zIndexPopup: 'var(--zIndexPopup, 2000)',
+    /**
+   * Elevation 16
+   * Can be used for messages, like snackbars and toasts
+   */ zIndexMessages: 'var(--zIndexMessages, 3000)',
+    /**
+   * Elevation 28
+   * Can be used for floating elements, like dropdowns
+   */ zIndexFloating: 'var(--zIndexFloating, 4000)',
+    /**
+   * Elevation 64
+   * Can be used for high priority floating elements, like tooltips
+   */ zIndexPriority: 'var(--zIndexPriority, 5000)',
+    /**
+   * Special elevation
+   * Can be used for elements that need to be above everything else, like debug overlays
+   */ zIndexDebug: 'var(--zIndexDebug, 6000)'
 };

lib/tokens.js

@@ -488,3 +488,39 @@ export const tokens = {
     curveEasyEase: 'var(--curveEasyEase)',
-    curveLinear: 'var(--curveLinear)'
+    curveLinear: 'var(--curveLinear)',
+    /**
+   * ZIndexes
+   * Special case where the tokens contain default values
+   * ZIndexes are not mandatory, so they are not included in the theme, but can be used as tokens with default values
+   */ /**
+   * Elevation 0
+   * Can be used for background elements, like surfaces
+   */ zIndexBackground: 'var(--zIndexBackground, 0)',
+    /**
+   * Elevation 2
+   * Can be used content that is on top of the background, like cards
+   */ zIndexContent: 'var(--zIndexContent, 1)',
+    /**
+   * Elevation 4
+   * Can be used for overlays, like the backdrop of a modal
+   */ zIndexOverlay: 'var(--zIndexOverlay, 1000)',
+    /**
+   * Elevation 8
+   * Can be used for popups, like modals and drawers
+   */ zIndexPopup: 'var(--zIndexPopup, 2000)',
+    /**
+   * Elevation 16
+   * Can be used for messages, like snackbars and toasts
+   */ zIndexMessages: 'var(--zIndexMessages, 3000)',
+    /**
+   * Elevation 28
+   * Can be used for floating elements, like dropdowns
+   */ zIndexFloating: 'var(--zIndexFloating, 4000)',
+    /**
+   * Elevation 64
+   * Can be used for high priority floating elements, like tooltips
+   */ zIndexPriority: 'var(--zIndexPriority, 5000)',
+    /**
+   * Special elevation
+   * Can be used for elements that need to be above everything else, like debug overlays
+   */ zIndexDebug: 'var(--zIndexDebug, 6000)'
 };

package.json

 {
   "name": "@fluentui/tokens",
-  "version": "0.0.0-nightly-20240913-0407.1",
+  "version": "0.0.0-nightly-20240916-0409.1",
   "description": "Fluent UI Theme Tokens",
@@ -5,0 +5,0 @@ "main": "lib-commonjs/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

825996

increased by0.88%

Lines of code

6575

increased by1.31%

No dependency changes