@fluentui/react-theme - npm Package Compare versions

Comparing version 9.0.0-rc.4 to 9.0.0-rc.5

CHANGELOG.json

@@ -5,3 +5,38 @@ {
     {
-      "date": "Fri, 04 Mar 2022 05:15:45 GMT",
+      "date": "Tue, 19 Apr 2022 19:14:12 GMT",
+      "tag": "@fluentui/react-theme_v9.0.0-rc.5",
+      "version": "9.0.0-rc.5",
+      "comments": {
+        "none": [
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-theme",
+            "commit": "b7f17e976f9e058f39c9fce4f0f9bb6eb4dfa577",
+            "comment": "Update React dev deps and hoist them to the repo root"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-theme",
+            "commit": "905e46db07ada986fd7885531f72a71b7bbaabdc",
+            "comment": "create v9 api extractor config and set all v9 packags to use it, suppress forgotten export"
+          }
+        ],
+        "prerelease": [
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-theme",
+            "commit": "d7e4ddf20d1ecb71d3dfc450c65ffde8c7394e3b",
+            "comment": "fix(react-theme): Update yellow shared color"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-theme",
+            "commit": "a91094de0bcf0467126052b6785fcbddd5ef0045",
+            "comment": "feat(react-theme): update color tokens"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 04 Mar 2022 05:17:31 GMT",
       "tag": "@fluentui/react-theme_v9.0.0-rc.4",
@@ -8,0 +43,0 @@ "version": "9.0.0-rc.4",

CHANGELOG.md

 # Change Log - @fluentui/react-theme
 
-This log was last generated on Fri, 04 Mar 2022 05:15:45 GMT and should not be manually modified.
+This log was last generated on Tue, 19 Apr 2022 19:14:12 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-rc.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-theme_v9.0.0-rc.5)
+
+Tue, 19 Apr 2022 19:14:12 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v9.0.0-rc.4..@fluentui/react-theme_v9.0.0-rc.5)
+
+### Changes
+
+- fix(react-theme): Update yellow shared color ([PR #22450](https://github.com/microsoft/fluentui/pull/22450) by [e-mail])
+- feat(react-theme): update color tokens ([PR #22238](https://github.com/microsoft/fluentui/pull/22238) by [e-mail])
+
 ## [9.0.0-rc.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-theme_v9.0.0-rc.4)
 
-Fri, 04 Mar 2022 05:15:45 GMT 
+Fri, 04 Mar 2022 05:17:31 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v9.0.0-rc.3..@fluentui/react-theme_v9.0.0-rc.4)
@@ -11,0 +21,0 @@

dist/react-theme.d.ts

@@ -206,2 +206,4 @@ export declare type BorderRadiusTokens = {
     colorNeutralStencil2: string;
+    colorBackgroundOverlay: string;
+    colorScrollbarOverlay: string;
     colorBrandBackground: string;
@@ -208,0 +210,0 @@ colorBrandBackgroundHover: string;

lib-commonjs/global/colors.d.ts

@@ -5,2 +5,3 @@ import type { GlobalSharedColors, Greys, AlphaColors } from '../types';
 export declare const blackAlpha: Record<AlphaColors, string>;
+export declare const grey14Alpha: Record<AlphaColors, string>;
 export declare const white = "#ffffff";
@@ -7,0 +8,0 @@ export declare const black = "#000000";

lib-commonjs/global/colors.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.sharedColors = exports.hcButtonFace = exports.hcButtonText = exports.hcHighlightText = exports.hcCanvasText = exports.hcCanvas = exports.hcDisabled = exports.hcHighlight = exports.hcHyperlink = exports.black = exports.white = exports.blackAlpha = exports.whiteAlpha = exports.grey = void 0;
+exports.sharedColors = 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.grey = {
@@ -85,2 +85,14 @@ '0': '#000000',
 };
+exports.grey14Alpha = {
+  '5': 'rgba(36, 36, 36, 0.05)',
+  '10': 'rgba(36, 36, 36, 0.1)',
+  '20': 'rgba(36, 36, 36, 0.2)',
+  '30': 'rgba(36, 36, 36, 0.3)',
+  '40': 'rgba(36, 36, 36, 0.4)',
+  '50': 'rgba(36, 36, 36, 0.5)',
+  '60': 'rgba(36, 36, 36, 0.6)',
+  '70': 'rgba(36, 36, 36, 0.7)',
+  '80': 'rgba(36, 36, 36, 0.8)',
+  '90': 'rgba(36, 36, 36, 0.9)'
+};
 exports.white = '#ffffff';
@@ -237,8 +249,8 @@ exports.black = '#000000';
 const yellow = {
+  primary: '#fde300',
+  shade10: '#e4cc00',
+  shade20: '#c0ad00',
+  shade30: '#817400',
+  shade40: '#4c4400',
   shade50: '#282400',
-  shade40: '#4c4400',
-  shade30: '#8e7f00',
-  shade20: '#c0ad00',
-  shade10: '#e4cc00',
-  primary: '#fde300',
   tint10: '#fde61e',
@@ -245,0 +257,0 @@ tint20: '#fdea3d',

lib-commonjs/tokens.js

@@ -97,2 +97,4 @@ "use strict";
   colorNeutralStencil2: 'var(--colorNeutralStencil2)',
+  colorBackgroundOverlay: 'var(--colorBackgroundOverlay)',
+  colorScrollbarOverlay: 'var(--colorScrollbarOverlay)',
   colorBrandBackground: 'var(--colorBrandBackground)',
@@ -99,0 +101,0 @@ colorBrandBackgroundHover: 'var(--colorBrandBackgroundHover)',

lib-commonjs/types.d.ts

@@ -93,2 +93,4 @@ /**
     colorNeutralStencil2: string;
+    colorBackgroundOverlay: string;
+    colorScrollbarOverlay: string;
     colorBrandBackground: string;
@@ -95,0 +97,0 @@ colorBrandBackgroundHover: string;

lib-commonjs/utils/createDarkTheme.js

@@ -8,4 +8,6 @@ "use strict";
 
-const dark_1 = /*#__PURE__*/require("../alias/dark");
+const darkColorPalette_1 = /*#__PURE__*/require("../alias/darkColorPalette");
 
+const darkColor_1 = /*#__PURE__*/require("../alias/darkColor");
+
 const index_1 = /*#__PURE__*/require("../global/index");
@@ -16,3 +18,3 @@
 const createDarkTheme = brand => {
-  const colorTokens = dark_1.generateColorTokens(brand);
+  const colorTokens = darkColor_1.generateColorTokens(brand);
   return { ...index_1.borderRadius,
@@ -25,3 +27,3 @@ ...index_1.fontSizes,
     ...colorTokens,
-    ...dark_1.colorPaletteTokens,
+    ...darkColorPalette_1.colorPaletteTokens,
     ...shadows_1.createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey),
@@ -28,0 +30,0 @@ ...shadows_1.createShadowTokens(colorTokens.colorBrandShadowAmbient, colorTokens.colorBrandShadowKey, 'Brand')

lib-commonjs/utils/createHighContrastTheme.js

@@ -8,4 +8,6 @@ "use strict";
 
-const highContrast_1 = /*#__PURE__*/require("../alias/highContrast");
+const highContrastColorPalette_1 = /*#__PURE__*/require("../alias/highContrastColorPalette");
 
+const highContrastColor_1 = /*#__PURE__*/require("../alias/highContrastColor");
+
 const index_1 = /*#__PURE__*/require("../global/index");
@@ -16,3 +18,3 @@
 const createHighContrastTheme = () => {
-  const colorTokens = highContrast_1.generateColorTokens();
+  const colorTokens = highContrastColor_1.generateColorTokens();
   return { ...index_1.borderRadius,
@@ -25,3 +27,3 @@ ...index_1.fontSizes,
     ...colorTokens,
-    ...highContrast_1.colorPaletteTokens,
+    ...highContrastColorPalette_1.colorPaletteTokens,
     ...shadows_1.createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey),
@@ -28,0 +30,0 @@ ...shadows_1.createShadowTokens(colorTokens.colorBrandShadowAmbient, colorTokens.colorBrandShadowKey, 'Brand')

lib-commonjs/utils/createLightTheme.js

@@ -8,4 +8,6 @@ "use strict";
 
-const light_1 = /*#__PURE__*/require("../alias/light");
+const lightColorPalette_1 = /*#__PURE__*/require("../alias/lightColorPalette");
 
+const lightColor_1 = /*#__PURE__*/require("../alias/lightColor");
+
 const index_1 = /*#__PURE__*/require("../global/index");
@@ -16,3 +18,3 @@
 const createLightTheme = brand => {
-  const colorTokens = light_1.generateColorTokens(brand);
+  const colorTokens = lightColor_1.generateColorTokens(brand);
   return { ...index_1.borderRadius,
@@ -25,3 +27,3 @@ ...index_1.fontSizes,
     ...colorTokens,
-    ...light_1.colorPaletteTokens,
+    ...lightColorPalette_1.colorPaletteTokens,
     ...shadows_1.createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey),
@@ -28,0 +30,0 @@ ...shadows_1.createShadowTokens(colorTokens.colorBrandShadowAmbient, colorTokens.colorBrandShadowKey, 'Brand')

lib-commonjs/utils/createTeamsDarkTheme.js

@@ -8,4 +8,6 @@ "use strict";
 
-const teamsDark_1 = /*#__PURE__*/require("../alias/teamsDark");
+const teamsDarkColorPalette_1 = /*#__PURE__*/require("../alias/teamsDarkColorPalette");
 
+const teamsDarkColor_1 = /*#__PURE__*/require("../alias/teamsDarkColor");
+
 const index_1 = /*#__PURE__*/require("../global/index");
@@ -16,3 +18,3 @@
 const createTeamsDarkTheme = brand => {
-  const colorTokens = teamsDark_1.generateColorTokens(brand);
+  const colorTokens = teamsDarkColor_1.generateColorTokens(brand);
   return { ...index_1.borderRadius,
@@ -25,3 +27,3 @@ ...index_1.fontSizes,
     ...colorTokens,
-    ...teamsDark_1.colorPaletteTokens,
+    ...teamsDarkColorPalette_1.colorPaletteTokens,
     ...shadows_1.createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey),
@@ -28,0 +30,0 @@ ...shadows_1.createShadowTokens(colorTokens.colorBrandShadowAmbient, colorTokens.colorBrandShadowKey, 'Brand')

lib/global/colors.d.ts

@@ -5,2 +5,3 @@ import type { GlobalSharedColors, Greys, AlphaColors } from '../types';
 export declare const blackAlpha: Record<AlphaColors, string>;
+export declare const grey14Alpha: Record<AlphaColors, string>;
 export declare const white = "#ffffff";
@@ -7,0 +8,0 @@ export declare const black = "#000000";

lib/global/colors.js

@@ -78,2 +78,14 @@ export const grey = {
 };
+export const grey14Alpha = {
+  '5': 'rgba(36, 36, 36, 0.05)',
+  '10': 'rgba(36, 36, 36, 0.1)',
+  '20': 'rgba(36, 36, 36, 0.2)',
+  '30': 'rgba(36, 36, 36, 0.3)',
+  '40': 'rgba(36, 36, 36, 0.4)',
+  '50': 'rgba(36, 36, 36, 0.5)',
+  '60': 'rgba(36, 36, 36, 0.6)',
+  '70': 'rgba(36, 36, 36, 0.7)',
+  '80': 'rgba(36, 36, 36, 0.8)',
+  '90': 'rgba(36, 36, 36, 0.9)'
+};
 export const white = '#ffffff';
@@ -230,8 +242,8 @@ export const black = '#000000';
 const yellow = {
+  primary: '#fde300',
+  shade10: '#e4cc00',
+  shade20: '#c0ad00',
+  shade30: '#817400',
+  shade40: '#4c4400',
   shade50: '#282400',
-  shade40: '#4c4400',
-  shade30: '#8e7f00',
-  shade20: '#c0ad00',
-  shade10: '#e4cc00',
-  primary: '#fde300',
   tint10: '#fde61e',
@@ -238,0 +250,0 @@ tint20: '#fdea3d',

lib/tokens.js

@@ -91,2 +91,4 @@ export const tokens = {
   colorNeutralStencil2: 'var(--colorNeutralStencil2)',
+  colorBackgroundOverlay: 'var(--colorBackgroundOverlay)',
+  colorScrollbarOverlay: 'var(--colorScrollbarOverlay)',
   colorBrandBackground: 'var(--colorBrandBackground)',
@@ -93,0 +95,0 @@ colorBrandBackgroundHover: 'var(--colorBrandBackgroundHover)',

lib/types.d.ts

@@ -93,2 +93,4 @@ /**
     colorNeutralStencil2: string;
+    colorBackgroundOverlay: string;
+    colorScrollbarOverlay: string;
     colorBrandBackground: string;
@@ -95,0 +97,0 @@ colorBrandBackgroundHover: string;

lib/utils/createDarkTheme.js

@@ -1,2 +0,3 @@
-import { colorPaletteTokens, generateColorTokens } from '../alias/dark';
+import { colorPaletteTokens } from '../alias/darkColorPalette';
+import { generateColorTokens } from '../alias/darkColor';
 import { borderRadius, fontSizes, lineHeights, fontFamilies, strokeWidths, fontWeights } from '../global/index';
@@ -3,0 +4,0 @@ import { createShadowTokens } from './shadows';

lib/utils/createHighContrastTheme.js

@@ -1,2 +0,3 @@
-import { colorPaletteTokens, generateColorTokens } from '../alias/highContrast';
+import { colorPaletteTokens } from '../alias/highContrastColorPalette';
+import { generateColorTokens } from '../alias/highContrastColor';
 import { borderRadius, fontSizes, lineHeights, fontFamilies, strokeWidths, fontWeights } from '../global/index';
@@ -3,0 +4,0 @@ import { createShadowTokens } from './shadows';

lib/utils/createLightTheme.js

@@ -1,2 +0,3 @@
-import { colorPaletteTokens, generateColorTokens } from '../alias/light';
+import { colorPaletteTokens } from '../alias/lightColorPalette';
+import { generateColorTokens } from '../alias/lightColor';
 import { borderRadius, fontSizes, lineHeights, fontFamilies, strokeWidths, fontWeights } from '../global/index';
@@ -3,0 +4,0 @@ import { createShadowTokens } from './shadows';

lib/utils/createTeamsDarkTheme.js

@@ -1,2 +0,3 @@
-import { colorPaletteTokens, generateColorTokens } from '../alias/teamsDark';
+import { colorPaletteTokens } from '../alias/teamsDarkColorPalette';
+import { generateColorTokens } from '../alias/teamsDarkColor';
 import { borderRadius, fontSizes, lineHeights, fontFamilies, strokeWidths, fontWeights } from '../global/index';
@@ -3,0 +4,0 @@ import { createShadowTokens } from './shadows';

package.json

 {
   "name": "@fluentui/react-theme",
-  "version": "9.0.0-rc.4",
+  "version": "9.0.0-rc.5",
   "description": "Fluent UI themes",
@@ -30,7 +30,3 @@ "main": "lib-commonjs/index.js",
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/scripts": "^1.0.0",
-    "@types/react": "16.9.42",
-    "@types/react-dom": "16.9.10",
-    "react": "16.8.6",
-    "react-dom": "16.8.6"
+    "@fluentui/scripts": "^1.0.0"
   },
@@ -37,0 +33,0 @@ "dependencies": {

No alert changes

Improved metrics

Total package byte prevSize

813111

increased by1.64%

Dev dependency count

2

decreased by-66.67%

Number of package files

205

increased by13.26%

Lines of code

7395

increased by1.8%

No dependency changes