@fluentui/tokens - npm Package Compare versions

Comparing version 0.0.0-nightly-20230315-0421.1 to 0.0.0-nightly-20230316-0427.1

CHANGELOG.json

@@ -5,5 +5,5 @@ {
     {
-      "date": "Wed, 15 Mar 2023 04:28:33 GMT",
-      "tag": "@fluentui/tokens_v0.0.0-nightly-20230315-0421.1",
-      "version": "0.0.0-nightly-20230315-0421.1",
+      "date": "Thu, 16 Mar 2023 04:34:12 GMT",
+      "tag": "@fluentui/tokens_v0.0.0-nightly-20230316-0427.1",
+      "version": "0.0.0-nightly-20230316-0427.1",
       "comments": {
@@ -21,2 +21,17 @@ "prerelease": [
     {
+      "date": "Wed, 15 Mar 2023 10:19:53 GMT",
+      "tag": "@fluentui/tokens_v1.0.0-alpha.3",
+      "version": "1.0.0-alpha.3",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/tokens",
+            "commit": "76e6598eae0c9247fb7f8834c1e24d8e864bf5df",
+            "comment": "feat(tokens): Add colorNeutralBackgroundAlpha and colorNeutralStrokeAlpha tokens"
+          }
+        ]
+      }
+    },
+    {
       "date": "Wed, 08 Mar 2023 17:42:50 GMT",
@@ -23,0 +38,0 @@ "tag": "@fluentui/tokens_v1.0.0-alpha.2",

CHANGELOG.md

 # Change Log - @fluentui/tokens
 
-This log was last generated on Wed, 15 Mar 2023 04:28:33 GMT and should not be manually modified.
+This log was last generated on Thu, 16 Mar 2023 04:34:12 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20230315-0421.1](https://github.com/microsoft/fluentui/tree/@fluentui/tokens_v0.0.0-nightly-20230315-0421.1)
+## [0.0.0-nightly-20230316-0427.1](https://github.com/microsoft/fluentui/tree/@fluentui/tokens_v0.0.0-nightly-20230316-0427.1)
 
-Wed, 15 Mar 2023 04:28:33 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/tokens_v1.0.0-alpha.2..@fluentui/tokens_v0.0.0-nightly-20230315-0421.1)
+Thu, 16 Mar 2023 04:34:12 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/tokens_v1.0.0-alpha.3..@fluentui/tokens_v0.0.0-nightly-20230316-0427.1)
 
@@ -16,2 +16,11 @@ ### Changes
 
+## [1.0.0-alpha.3](https://github.com/microsoft/fluentui/tree/@fluentui/tokens_v1.0.0-alpha.3)
+
+Wed, 15 Mar 2023 10:19:53 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/tokens_v1.0.0-alpha.2..@fluentui/tokens_v1.0.0-alpha.3)
+
+### Changes
+
+- feat(tokens): Add colorNeutralBackgroundAlpha and colorNeutralStrokeAlpha tokens ([PR #27034](https://github.com/microsoft/fluentui/pull/27034) by [e-mail])
+
 ## [1.0.0-alpha.2](https://github.com/microsoft/fluentui/tree/@fluentui/tokens_v1.0.0-alpha.2)
@@ -18,0 +27,0 @@

dist/index.d.ts

@@ -164,4 +164,6 @@ export declare type BorderRadiusTokens = {
     colorNeutralBackground6: string;
+    colorNeutralBackgroundInverted: string;
     colorNeutralBackgroundStatic: string;
-    colorNeutralBackgroundInverted: string;
+    colorNeutralBackgroundAlpha: string;
+    colorNeutralBackgroundAlpha2: string;
     colorSubtleBackground: string;
@@ -228,2 +230,3 @@ colorSubtleBackgroundHover: string;
     colorTransparentStrokeDisabled: string;
+    colorNeutralStrokeAlpha: string;
     colorStrokeFocus1: string;
@@ -230,0 +233,0 @@ colorStrokeFocus2: string;

lib-commonjs/alias/darkColor.js

@@ -87,2 +87,4 @@ "use strict";
   colorNeutralBackgroundStatic: colors_1.grey[24],
+  colorNeutralBackgroundAlpha: colors_1.grey10Alpha[50],
+  colorNeutralBackgroundAlpha2: colors_1.grey12Alpha[70],
   colorSubtleBackground: 'transparent',
@@ -149,2 +151,3 @@ colorSubtleBackgroundHover: colors_1.grey[22],
   colorTransparentStrokeDisabled: 'transparent',
+  colorNeutralStrokeAlpha: colors_1.whiteAlpha[10],
   colorStrokeFocus1: colors_1.black,
@@ -151,0 +154,0 @@ colorStrokeFocus2: colors_1.white,

lib-commonjs/alias/highContrastColor.js

@@ -87,2 +87,4 @@ "use strict";
   colorNeutralBackgroundStatic: colors_1.hcCanvas,
+  colorNeutralBackgroundAlpha: colors_1.hcCanvas,
+  colorNeutralBackgroundAlpha2: colors_1.hcCanvas,
   colorSubtleBackground: 'transparent',
@@ -149,2 +151,3 @@ colorSubtleBackgroundHover: colors_1.hcHighlight,
   colorTransparentStrokeDisabled: colors_1.hcDisabled,
+  colorNeutralStrokeAlpha: colors_1.hcCanvasText,
   colorStrokeFocus1: colors_1.hcCanvas,
@@ -151,0 +154,0 @@ colorStrokeFocus2: colors_1.hcHighlight,

lib-commonjs/alias/lightColor.js

@@ -87,2 +87,4 @@ "use strict";
   colorNeutralBackgroundStatic: colors_1.grey[20],
+  colorNeutralBackgroundAlpha: colors_1.whiteAlpha[50],
+  colorNeutralBackgroundAlpha2: colors_1.whiteAlpha[80],
   colorSubtleBackground: 'transparent',
@@ -149,2 +151,3 @@ colorSubtleBackgroundHover: colors_1.grey[96],
   colorTransparentStrokeDisabled: 'transparent',
+  colorNeutralStrokeAlpha: colors_1.blackAlpha[5],
   colorStrokeFocus1: colors_1.white,
@@ -151,0 +154,0 @@ colorStrokeFocus2: colors_1.black,

lib-commonjs/alias/teamsDarkColor.js

@@ -87,2 +87,4 @@ "use strict";
   colorNeutralBackgroundStatic: colors_1.grey[24],
+  colorNeutralBackgroundAlpha: colors_1.grey10Alpha[50],
+  colorNeutralBackgroundAlpha2: colors_1.grey12Alpha[70],
   colorSubtleBackground: 'transparent',
@@ -149,2 +151,3 @@ colorSubtleBackgroundHover: colors_1.grey[22],
   colorTransparentStrokeDisabled: 'transparent',
+  colorNeutralStrokeAlpha: colors_1.whiteAlpha[10],
   colorStrokeFocus1: colors_1.black,
@@ -151,0 +154,0 @@ colorStrokeFocus2: colors_1.white,

lib-commonjs/global/colors.js

@@ -8,6 +8,5 @@ "use strict";
 });
-exports.orchid = exports.darkPurple = exports.purple = exports.lavender = exports.navy = exports.cornflower = exports.darkBlue = exports.royalBlue = exports.blue = exports.lightBlue = exports.steel = exports.cyan = exports.darkTeal = exports.teal = exports.lightTeal = exports.darkGreen = exports.green = exports.lightGreen = exports.seafoam = exports.forest = exports.lime = exports.darkBrown = exports.brown = exports.brass = exports.gold = exports.yellow = exports.marigold = exports.peach = exports.orange = exports.pumpkin = exports.bronze = exports.darkOrange = exports.red = exports.cranberry = exports.burgundy = exports.darkRed = exports.hcButtonFace = exports.hcButtonText = exports.hcHighlightText = exports.hcCanvasText = exports.hcCanvas = exports.hcDisabled = exports.hcHighlight = exports.hcHyperlink = exports.black = exports.white = exports.grey14Alpha = exports.blackAlpha = exports.whiteAlpha = exports.grey = void 0;
-exports.charcoal = exports.anchor = exports.platinum = exports.silver = exports.mink = exports.beige = exports.plum = exports.magenta = exports.hotPink = exports.pink = exports.lilac = exports.berry = exports.grape = void 0;
+exports.purple = exports.lavender = exports.navy = exports.cornflower = exports.darkBlue = exports.royalBlue = exports.blue = exports.lightBlue = exports.steel = exports.cyan = exports.darkTeal = exports.teal = exports.lightTeal = exports.darkGreen = exports.green = exports.lightGreen = exports.seafoam = exports.forest = exports.lime = exports.darkBrown = exports.brown = exports.brass = exports.gold = exports.yellow = exports.marigold = exports.peach = exports.orange = exports.pumpkin = exports.bronze = exports.darkOrange = exports.red = exports.cranberry = exports.burgundy = exports.darkRed = exports.hcButtonFace = exports.hcButtonText = exports.hcHighlightText = exports.hcCanvasText = exports.hcCanvas = exports.hcDisabled = exports.hcHighlight = exports.hcHyperlink = exports.black = exports.white = exports.grey14Alpha = exports.grey12Alpha = exports.grey10Alpha = exports.blackAlpha = exports.whiteAlpha = exports.grey = void 0;
+exports.charcoal = exports.anchor = exports.platinum = exports.silver = exports.mink = exports.beige = exports.plum = exports.magenta = exports.hotPink = exports.pink = exports.lilac = exports.berry = exports.grape = exports.orchid = exports.darkPurple = void 0;
 exports.grey = {
-  '0': '#000000',
   '2': '#050505',
@@ -61,4 +60,3 @@ '4': '#0a0a0a',
   '96': '#f5f5f5',
-  '98': '#fafafa',
-  '100': '#ffffff'
+  '98': '#fafafa'
 };
@@ -89,2 +87,26 @@ exports.whiteAlpha = {
 };
+exports.grey10Alpha = {
+  '5': 'rgba(26, 26, 26, 0.05)',
+  '10': 'rgba(26, 26, 26, 0.1)',
+  '20': 'rgba(26, 26, 26, 0.2)',
+  '30': 'rgba(26, 26, 26, 0.3)',
+  '40': 'rgba(26, 26, 26, 0.4)',
+  '50': 'rgba(26, 26, 26, 0.5)',
+  '60': 'rgba(26, 26, 26, 0.6)',
+  '70': 'rgba(26, 26, 26, 0.7)',
+  '80': 'rgba(26, 26, 26, 0.8)',
+  '90': 'rgba(26, 26, 26, 0.9)'
+};
+exports.grey12Alpha = {
+  '5': 'rgba(31, 31, 31, 0.05)',
+  '10': 'rgba(31, 31, 31, 0.1)',
+  '20': 'rgba(31, 31, 31, 0.2)',
+  '30': 'rgba(31, 31, 31, 0.3)',
+  '40': 'rgba(31, 31, 31, 0.4)',
+  '50': 'rgba(31, 31, 31, 0.5)',
+  '60': 'rgba(31, 31, 31, 0.6)',
+  '70': 'rgba(31, 31, 31, 0.7)',
+  '80': 'rgba(31, 31, 31, 0.8)',
+  '90': 'rgba(31, 31, 31, 0.9)'
+};
 exports.grey14Alpha = {
@@ -91,0 +113,0 @@ '5': 'rgba(36, 36, 36, 0.05)',

lib-commonjs/tokens.js

@@ -83,4 +83,6 @@ "use strict";
   colorNeutralBackground6: 'var(--colorNeutralBackground6)',
+  colorNeutralBackgroundInverted: 'var(--colorNeutralBackgroundInverted)',
   colorNeutralBackgroundStatic: 'var(--colorNeutralBackgroundStatic)',
-  colorNeutralBackgroundInverted: 'var(--colorNeutralBackgroundInverted)',
+  colorNeutralBackgroundAlpha: 'var(--colorNeutralBackgroundAlpha)',
+  colorNeutralBackgroundAlpha2: 'var(--colorNeutralBackgroundAlpha2)',
   colorSubtleBackground: 'var(--colorSubtleBackground)',
@@ -147,2 +149,3 @@ colorSubtleBackgroundHover: 'var(--colorSubtleBackgroundHover)',
   colorTransparentStrokeDisabled: 'var(--colorTransparentStrokeDisabled)',
+  colorNeutralStrokeAlpha: 'var(--colorNeutralStrokeAlpha)',
   colorStrokeFocus1: 'var(--colorStrokeFocus1)',
@@ -149,0 +152,0 @@ colorStrokeFocus2: 'var(--colorStrokeFocus2)',

lib/alias/darkColor.js

 /* !!! DO NOT EDIT !!! */
 /* This file has been generated by the token pipeline */
-import { black, blackAlpha, grey, grey14Alpha, white, whiteAlpha } from '../global/colors';
+import { black, blackAlpha, grey, grey10Alpha, grey12Alpha, grey14Alpha, white, whiteAlpha } from '../global/colors';
 export const generateColorTokens = brand => ({
@@ -81,2 +81,4 @@ colorNeutralForeground1: white,
   colorNeutralBackgroundStatic: grey[24],
+  colorNeutralBackgroundAlpha: grey10Alpha[50],
+  colorNeutralBackgroundAlpha2: grey12Alpha[70],
   colorSubtleBackground: 'transparent',
@@ -143,2 +145,3 @@ colorSubtleBackgroundHover: grey[22],
   colorTransparentStrokeDisabled: 'transparent',
+  colorNeutralStrokeAlpha: whiteAlpha[10],
   colorStrokeFocus1: black,
@@ -145,0 +148,0 @@ colorStrokeFocus2: white,

lib/alias/highContrastColor.js

@@ -81,2 +81,4 @@ /* !!! DO NOT EDIT !!! */
   colorNeutralBackgroundStatic: hcCanvas,
+  colorNeutralBackgroundAlpha: hcCanvas,
+  colorNeutralBackgroundAlpha2: hcCanvas,
   colorSubtleBackground: 'transparent',
@@ -143,2 +145,3 @@ colorSubtleBackgroundHover: hcHighlight,
   colorTransparentStrokeDisabled: hcDisabled,
+  colorNeutralStrokeAlpha: hcCanvasText,
   colorStrokeFocus1: hcCanvas,
@@ -145,0 +148,0 @@ colorStrokeFocus2: hcHighlight,

lib/alias/lightColor.js

@@ -81,2 +81,4 @@ /* !!! DO NOT EDIT !!! */
   colorNeutralBackgroundStatic: grey[20],
+  colorNeutralBackgroundAlpha: whiteAlpha[50],
+  colorNeutralBackgroundAlpha2: whiteAlpha[80],
   colorSubtleBackground: 'transparent',
@@ -143,2 +145,3 @@ colorSubtleBackgroundHover: grey[96],
   colorTransparentStrokeDisabled: 'transparent',
+  colorNeutralStrokeAlpha: blackAlpha[5],
   colorStrokeFocus1: white,
@@ -145,0 +148,0 @@ colorStrokeFocus2: black,

lib/alias/teamsDarkColor.js

 /* !!! DO NOT EDIT !!! */
 /* This file has been generated by the token pipeline */
-import { black, blackAlpha, grey, grey14Alpha, white, whiteAlpha } from '../global/colors';
+import { black, blackAlpha, grey, grey10Alpha, grey12Alpha, grey14Alpha, white, whiteAlpha } from '../global/colors';
 export const generateColorTokens = brand => ({
@@ -81,2 +81,4 @@ colorNeutralForeground1: white,
   colorNeutralBackgroundStatic: grey[24],
+  colorNeutralBackgroundAlpha: grey10Alpha[50],
+  colorNeutralBackgroundAlpha2: grey12Alpha[70],
   colorSubtleBackground: 'transparent',
@@ -143,2 +145,3 @@ colorSubtleBackgroundHover: grey[22],
   colorTransparentStrokeDisabled: 'transparent',
+  colorNeutralStrokeAlpha: whiteAlpha[10],
   colorStrokeFocus1: black,
@@ -145,0 +148,0 @@ colorStrokeFocus2: white,

lib/global/colors.js

 /* !!! DO NOT EDIT !!! */
 /* This file has been generated by the token pipeline */
 export const grey = {
-  '0': '#000000',
   '2': '#050505',
@@ -53,4 +52,3 @@ '4': '#0a0a0a',
   '96': '#f5f5f5',
-  '98': '#fafafa',
-  '100': '#ffffff'
+  '98': '#fafafa'
 };
@@ -81,2 +79,26 @@ export const whiteAlpha = {
 };
+export const grey10Alpha = {
+  '5': 'rgba(26, 26, 26, 0.05)',
+  '10': 'rgba(26, 26, 26, 0.1)',
+  '20': 'rgba(26, 26, 26, 0.2)',
+  '30': 'rgba(26, 26, 26, 0.3)',
+  '40': 'rgba(26, 26, 26, 0.4)',
+  '50': 'rgba(26, 26, 26, 0.5)',
+  '60': 'rgba(26, 26, 26, 0.6)',
+  '70': 'rgba(26, 26, 26, 0.7)',
+  '80': 'rgba(26, 26, 26, 0.8)',
+  '90': 'rgba(26, 26, 26, 0.9)'
+};
+export const grey12Alpha = {
+  '5': 'rgba(31, 31, 31, 0.05)',
+  '10': 'rgba(31, 31, 31, 0.1)',
+  '20': 'rgba(31, 31, 31, 0.2)',
+  '30': 'rgba(31, 31, 31, 0.3)',
+  '40': 'rgba(31, 31, 31, 0.4)',
+  '50': 'rgba(31, 31, 31, 0.5)',
+  '60': 'rgba(31, 31, 31, 0.6)',
+  '70': 'rgba(31, 31, 31, 0.7)',
+  '80': 'rgba(31, 31, 31, 0.8)',
+  '90': 'rgba(31, 31, 31, 0.9)'
+};
 export const grey14Alpha = {
@@ -83,0 +105,0 @@ '5': 'rgba(36, 36, 36, 0.05)',

lib/tokens.js

@@ -77,4 +77,6 @@ export const tokens = {
   colorNeutralBackground6: 'var(--colorNeutralBackground6)',
+  colorNeutralBackgroundInverted: 'var(--colorNeutralBackgroundInverted)',
   colorNeutralBackgroundStatic: 'var(--colorNeutralBackgroundStatic)',
-  colorNeutralBackgroundInverted: 'var(--colorNeutralBackgroundInverted)',
+  colorNeutralBackgroundAlpha: 'var(--colorNeutralBackgroundAlpha)',
+  colorNeutralBackgroundAlpha2: 'var(--colorNeutralBackgroundAlpha2)',
   colorSubtleBackground: 'var(--colorSubtleBackground)',
@@ -141,2 +143,3 @@ colorSubtleBackgroundHover: 'var(--colorSubtleBackgroundHover)',
   colorTransparentStrokeDisabled: 'var(--colorTransparentStrokeDisabled)',
+  colorNeutralStrokeAlpha: 'var(--colorNeutralStrokeAlpha)',
   colorStrokeFocus1: 'var(--colorStrokeFocus1)',
@@ -143,0 +146,0 @@ colorStrokeFocus2: 'var(--colorStrokeFocus2)',

package.json

 {
   "name": "@fluentui/tokens",
-  "version": "0.0.0-nightly-20230315-0421.1",
+  "version": "0.0.0-nightly-20230316-0427.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

760294

increased by1.59%

Number of downloads

109781

increased by4.95%

Lines of code

5718

increased by1.64%

Published versions last months

22

increased by4.76%

Published versions last two months

39

increased by8.33%

Published versions last year

265

increased by0.38%

No dependency changes