@fluentui/react-theme - npm Package Compare versions

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

CHANGELOG.json

@@ -5,3 +5,68 @@ {
     {
-      "date": "Tue, 19 Apr 2022 19:14:12 GMT",
+      "date": "Wed, 04 May 2022 13:24:01 GMT",
+      "tag": "@fluentui/react-theme_v9.0.0-rc.6",
+      "version": "9.0.0-rc.6",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-theme",
+            "commit": "27ba5613b1253801c3ae4e2aba0fc9eb2ae464b8",
+            "comment": "Add px suffix to spacings"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-theme",
+            "commit": "75ad2567f62e804a8deb3ea6016ba8a674c45627",
+            "comment": "Fixed typo in typography"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-theme",
+            "commit": "7ad290b51135cb84c84e7dd8771bd712892c7484",
+            "comment": "Fixed line-height in title2"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-theme",
+            "commit": "57583bfffa6bf28be389dec6c642f36ed253ecdd",
+            "comment": "Added global theme types and tokens"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-theme",
+            "commit": "3e0ff753cbb3375f28477b2249ecd8b012e2e946",
+            "comment": "fix(react-theme): Update CompoundBrandBackground and BrandStroke1"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-theme",
+            "commit": "354c4f6290d7957345fd53a8f26c8f5472ff92db",
+            "comment": "Add base font family per figma"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-theme",
+            "commit": "78da3be7484d156379a105048c535767f7e1b85f",
+            "comment": "Added typeography styles"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-theme",
+            "commit": "e45629a0978492d5a8a44934f5263e47862ac8b3",
+            "comment": "feat(react-theme): Add colorNeutralForeground2Link color tokens"
+          }
+        ],
+        "none": [
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-theme",
+            "commit": "8ec3d32fa26e6cf803ab9d18671fd51ba06c74ab",
+            "comment": "react-theme: Move to new common folder."
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 19 Apr 2022 19:17:02 GMT",
       "tag": "@fluentui/react-theme_v9.0.0-rc.5",
@@ -8,0 +73,0 @@ "version": "9.0.0-rc.5",

CHANGELOG.md

 # Change Log - @fluentui/react-theme
 
-This log was last generated on Tue, 19 Apr 2022 19:14:12 GMT and should not be manually modified.
+This log was last generated on Wed, 04 May 2022 13:24:01 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-rc.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-theme_v9.0.0-rc.6)
+
+Wed, 04 May 2022 13:24:01 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v9.0.0-rc.5..@fluentui/react-theme_v9.0.0-rc.6)
+
+### Changes
+
+- Add px suffix to spacings ([PR #22722](https://github.com/microsoft/fluentui/pull/22722) by [e-mail])
+- Fixed typo in typography ([PR #22625](https://github.com/microsoft/fluentui/pull/22625) by [e-mail])
+- Fixed line-height in title2 ([PR #22716](https://github.com/microsoft/fluentui/pull/22716) by [e-mail])
+- Added global theme types and tokens ([PR #22607](https://github.com/microsoft/fluentui/pull/22607) by [e-mail])
+- fix(react-theme): Update CompoundBrandBackground and BrandStroke1 ([PR #22751](https://github.com/microsoft/fluentui/pull/22751) by [e-mail])
+- Add base font family per figma ([PR #22627](https://github.com/microsoft/fluentui/pull/22627) by [e-mail])
+- Added typeography styles ([PR #22610](https://github.com/microsoft/fluentui/pull/22610) by [e-mail])
+- feat(react-theme): Add colorNeutralForeground2Link color tokens ([PR #22570](https://github.com/microsoft/fluentui/pull/22570) by [e-mail])
+
 ## [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 
+Tue, 19 Apr 2022 19:17:02 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)
@@ -19,3 +35,3 @@
 
-Fri, 04 Mar 2022 05:17:31 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)
@@ -29,3 +45,3 @@
 
-Fri, 18 Feb 2022 13:35:36 GMT 
+Fri, 18 Feb 2022 13:35:36 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v9.0.0-rc.1..@fluentui/react-theme_v9.0.0-rc.3)
@@ -39,3 +55,3 @@
 
-Thu, 10 Feb 2022 08:51:02 GMT 
+Thu, 10 Feb 2022 08:51:02 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v9.0.0-beta.4..@fluentui/react-theme_v9.0.0-rc.1)
@@ -57,3 +73,3 @@
 
-Thu, 25 Nov 2021 08:34:16 GMT 
+Thu, 25 Nov 2021 08:34:16 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v9.0.0-beta.3..@fluentui/react-theme_v9.0.0-beta.4)
@@ -67,3 +83,3 @@
 
-Fri, 12 Nov 2021 13:25:09 GMT 
+Fri, 12 Nov 2021 13:25:09 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v9.0.0-beta.2..@fluentui/react-theme_v9.0.0-beta.3)
@@ -78,3 +94,3 @@
 
-Wed, 27 Oct 2021 12:14:23 GMT 
+Wed, 27 Oct 2021 12:14:23 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v9.0.0-beta.1..@fluentui/react-theme_v9.0.0-beta.2)
@@ -89,3 +105,3 @@
 
-Wed, 06 Oct 2021 10:37:22 GMT 
+Wed, 06 Oct 2021 10:37:22 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v9.0.0-alpha.26..@fluentui/react-theme_v9.0.0-beta.1)
@@ -99,3 +115,3 @@
 
-Fri, 01 Oct 2021 14:13:08 GMT 
+Fri, 01 Oct 2021 14:13:08 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v9.0.0-alpha.24..@fluentui/react-theme_v9.0.0-alpha.26)
@@ -109,3 +125,3 @@
 
-Wed, 29 Sep 2021 08:06:11 GMT 
+Wed, 29 Sep 2021 08:06:11 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v9.0.0-alpha.23..@fluentui/react-theme_v9.0.0-alpha.24)
@@ -119,3 +135,3 @@
 
-Tue, 21 Sep 2021 07:42:34 GMT 
+Tue, 21 Sep 2021 07:42:34 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v9.0.0-alpha.22..@fluentui/react-theme_v9.0.0-alpha.23)
@@ -129,3 +145,3 @@
 
-Tue, 24 Aug 2021 07:34:48 GMT 
+Tue, 24 Aug 2021 07:34:48 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v9.0.0-alpha.21..@fluentui/react-theme_v9.0.0-alpha.22)
@@ -139,3 +155,3 @@
 
-Fri, 20 Aug 2021 07:37:28 GMT 
+Fri, 20 Aug 2021 07:37:28 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v9.0.0-alpha.20..@fluentui/react-theme_v9.0.0-alpha.21)
@@ -149,3 +165,3 @@
 
-Tue, 03 Aug 2021 07:39:30 GMT 
+Tue, 03 Aug 2021 07:39:30 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v9.0.0-alpha.19..@fluentui/react-theme_v9.0.0-alpha.20)
@@ -164,3 +180,3 @@
 
-Mon, 26 Jul 2021 07:37:30 GMT 
+Mon, 26 Jul 2021 07:37:30 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v9.0.0-alpha.18..@fluentui/react-theme_v9.0.0-alpha.19)
@@ -174,3 +190,3 @@
 
-Fri, 23 Jul 2021 07:38:19 GMT 
+Fri, 23 Jul 2021 07:38:19 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v9.0.0-alpha.17..@fluentui/react-theme_v9.0.0-alpha.18)
@@ -184,3 +200,3 @@
 
-Fri, 09 Jul 2021 07:39:31 GMT 
+Fri, 09 Jul 2021 07:39:31 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v9.0.0-alpha.16..@fluentui/react-theme_v9.0.0-alpha.17)
@@ -195,3 +211,3 @@
 
-Fri, 02 Jul 2021 07:37:06 GMT 
+Fri, 02 Jul 2021 07:37:06 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v9.0.0-alpha.15..@fluentui/react-theme_v9.0.0-alpha.16)
@@ -205,3 +221,3 @@
 
-Mon, 07 Jun 2021 07:38:15 GMT 
+Mon, 07 Jun 2021 07:38:15 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v9.0.0-alpha.14..@fluentui/react-theme_v9.0.0-alpha.15)
@@ -216,3 +232,3 @@
 
-Thu, 03 Jun 2021 07:36:03 GMT 
+Thu, 03 Jun 2021 07:36:03 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v9.0.0-alpha.13..@fluentui/react-theme_v9.0.0-alpha.14)
@@ -226,3 +242,3 @@
 
-Thu, 20 May 2021 07:41:54 GMT 
+Thu, 20 May 2021 07:41:54 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v9.0.0-alpha.12..@fluentui/react-theme_v9.0.0-alpha.13)
@@ -237,3 +253,3 @@
 
-Wed, 19 May 2021 07:34:20 GMT 
+Wed, 19 May 2021 07:34:20 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v9.0.0-alpha.11..@fluentui/react-theme_v9.0.0-alpha.12)
@@ -247,3 +263,3 @@
 
-Thu, 13 May 2021 07:36:55 GMT 
+Thu, 13 May 2021 07:36:55 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v9.0.0-alpha.10..@fluentui/react-theme_v9.0.0-alpha.11)
@@ -257,3 +273,3 @@
 
-Fri, 30 Apr 2021 07:42:23 GMT 
+Fri, 30 Apr 2021 07:42:23 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v9.0.0-alpha.9..@fluentui/react-theme_v9.0.0-alpha.10)
@@ -272,3 +288,3 @@
 
-Fri, 23 Apr 2021 07:37:10 GMT 
+Fri, 23 Apr 2021 07:37:10 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v9.0.0-alpha.8..@fluentui/react-theme_v9.0.0-alpha.9)
@@ -283,3 +299,3 @@
 
-Thu, 08 Apr 2021 07:33:06 GMT 
+Thu, 08 Apr 2021 07:33:06 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v9.0.0-alpha.7..@fluentui/react-theme_v9.0.0-alpha.8)
@@ -293,3 +309,3 @@
 
-Wed, 31 Mar 2021 00:53:43 GMT 
+Wed, 31 Mar 2021 00:53:43 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v9.0.0-alpha.6..@fluentui/react-theme_v9.0.0-alpha.7)
@@ -304,3 +320,3 @@
 
-Mon, 15 Mar 2021 07:36:20 GMT 
+Mon, 15 Mar 2021 07:36:20 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v9.0.0-alpha.5..@fluentui/react-theme_v9.0.0-alpha.6)
@@ -314,3 +330,3 @@
 
-Wed, 03 Mar 2021 00:10:09 GMT 
+Wed, 03 Mar 2021 00:10:09 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v9.0.0-alpha.4..@fluentui/react-theme_v9.0.0-alpha.5)
@@ -324,3 +340,3 @@
 
-Tue, 02 Mar 2021 07:24:27 GMT 
+Tue, 02 Mar 2021 07:24:27 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v9.0.0-alpha.3..@fluentui/react-theme_v9.0.0-alpha.4)
@@ -335,3 +351,3 @@
 
-Fri, 26 Feb 2021 01:16:27 GMT 
+Fri, 26 Feb 2021 01:16:27 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v9.0.0-alpha.2..@fluentui/react-theme_v9.0.0-alpha.3)
@@ -352,3 +368,3 @@
 
-Thu, 25 Feb 2021 20:16:39 GMT 
+Thu, 25 Feb 2021 20:16:39 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v9.0.0-alpha.1..@fluentui/react-theme_v9.0.0-alpha.2)
@@ -362,3 +378,3 @@
 
-Wed, 24 Feb 2021 00:05:29 GMT 
+Wed, 24 Feb 2021 00:05:29 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v0.3.3..@fluentui/react-theme_v9.0.0-alpha.1)
@@ -372,3 +388,3 @@
 
-Mon, 22 Feb 2021 12:26:22 GMT 
+Mon, 22 Feb 2021 12:26:22 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v0.3.2..@fluentui/react-theme_v0.3.3)
@@ -386,3 +402,3 @@
 
-Thu, 18 Feb 2021 19:38:50 GMT 
+Thu, 18 Feb 2021 19:38:50 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v0.3.1..@fluentui/react-theme_v0.3.2)
@@ -400,3 +416,3 @@
 
-Thu, 18 Feb 2021 12:27:34 GMT 
+Thu, 18 Feb 2021 12:27:34 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v0.3.1..@fluentui/react-theme_v0.3.1)
@@ -413,3 +429,3 @@
 
-Mon, 15 Feb 2021 12:22:00 GMT 
+Mon, 15 Feb 2021 12:22:00 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v0.3.1..@fluentui/react-theme_v0.3.1)
@@ -423,3 +439,3 @@
 
-Thu, 11 Feb 2021 00:58:10 GMT 
+Thu, 11 Feb 2021 00:58:10 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v0.3.1..@fluentui/react-theme_v0.3.1)
@@ -433,3 +449,3 @@
 
-Tue, 09 Feb 2021 00:56:52 GMT 
+Tue, 09 Feb 2021 00:56:52 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v0.3.0..@fluentui/react-theme_v0.3.1)
@@ -443,3 +459,3 @@
 
-Mon, 08 Feb 2021 12:23:08 GMT 
+Mon, 08 Feb 2021 12:23:08 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v0.2.0..@fluentui/react-theme_v0.3.0)
@@ -446,0 +462,0 @@

lib-commonjs/alias/darkColor.js

@@ -32,9 +32,13 @@ "use strict";
   colorNeutralForegroundInvertedDisabled: colors_1.whiteAlpha[40],
-  colorBrandForegroundLink: brand[90],
+  colorBrandForegroundLink: brand[100],
   colorBrandForegroundLinkHover: brand[110],
-  colorBrandForegroundLinkPressed: brand[100],
-  colorBrandForegroundLinkSelected: brand[90],
-  colorCompoundBrandForeground1: brand[90],
-  colorCompoundBrandForeground1Hover: brand[100],
-  colorCompoundBrandForeground1Pressed: brand[80],
+  colorBrandForegroundLinkPressed: brand[90],
+  colorBrandForegroundLinkSelected: brand[100],
+  colorNeutralForeground2Link: colors_1.grey[84],
+  colorNeutralForeground2LinkHover: colors_1.white,
+  colorNeutralForeground2LinkPressed: colors_1.white,
+  colorNeutralForeground2LinkSelected: colors_1.white,
+  colorCompoundBrandForeground1: brand[100],
+  colorCompoundBrandForeground1Hover: brand[110],
+  colorCompoundBrandForeground1Pressed: brand[90],
   colorBrandForeground1: brand[100],
@@ -106,5 +110,5 @@ colorBrandForeground2: brand[110],
   colorBrandBackgroundSelected: brand[60],
-  colorCompoundBrandBackground: brand[90],
-  colorCompoundBrandBackgroundHover: brand[100],
-  colorCompoundBrandBackgroundPressed: brand[80],
+  colorCompoundBrandBackground: brand[100],
+  colorCompoundBrandBackgroundHover: brand[110],
+  colorCompoundBrandBackgroundPressed: brand[90],
   colorBrandBackgroundStatic: brand[80],
@@ -131,3 +135,3 @@ colorBrandBackground2: brand[40],
   colorNeutralStrokeOnBrand2Selected: colors_1.white,
-  colorBrandStroke1: brand[90],
+  colorBrandStroke1: brand[100],
   colorBrandStroke2: brand[50],
@@ -134,0 +138,0 @@ colorCompoundBrandStroke: brand[90],

lib-commonjs/alias/highContrastColor.js

@@ -36,2 +36,6 @@ "use strict";
   colorBrandForegroundLinkSelected: colors_1.hcHyperlink,
+  colorNeutralForeground2Link: colors_1.hcHyperlink,
+  colorNeutralForeground2LinkHover: colors_1.hcHyperlink,
+  colorNeutralForeground2LinkPressed: colors_1.hcHyperlink,
+  colorNeutralForeground2LinkSelected: colors_1.hcHyperlink,
   colorCompoundBrandForeground1: colors_1.hcHighlight,
@@ -38,0 +42,0 @@ colorCompoundBrandForeground1Hover: colors_1.hcHighlight,

lib-commonjs/alias/lightColor.js

@@ -36,2 +36,6 @@ "use strict";
   colorBrandForegroundLinkSelected: brand[70],
+  colorNeutralForeground2Link: colors_1.grey[26],
+  colorNeutralForeground2LinkHover: colors_1.grey[14],
+  colorNeutralForeground2LinkPressed: colors_1.grey[14],
+  colorNeutralForeground2LinkSelected: colors_1.grey[14],
   colorCompoundBrandForeground1: brand[80],
@@ -38,0 +42,0 @@ colorCompoundBrandForeground1Hover: brand[70],

lib-commonjs/alias/teamsDarkColor.js

@@ -32,9 +32,13 @@ "use strict";
   colorNeutralForegroundInvertedDisabled: colors_1.whiteAlpha[40],
-  colorBrandForegroundLink: brand[90],
+  colorBrandForegroundLink: brand[100],
   colorBrandForegroundLinkHover: brand[110],
-  colorBrandForegroundLinkPressed: brand[100],
-  colorBrandForegroundLinkSelected: brand[90],
-  colorCompoundBrandForeground1: brand[90],
-  colorCompoundBrandForeground1Hover: brand[100],
-  colorCompoundBrandForeground1Pressed: brand[80],
+  colorBrandForegroundLinkPressed: brand[90],
+  colorBrandForegroundLinkSelected: brand[100],
+  colorNeutralForeground2Link: colors_1.grey[84],
+  colorNeutralForeground2LinkHover: colors_1.white,
+  colorNeutralForeground2LinkPressed: colors_1.white,
+  colorNeutralForeground2LinkSelected: colors_1.white,
+  colorCompoundBrandForeground1: brand[100],
+  colorCompoundBrandForeground1Hover: brand[110],
+  colorCompoundBrandForeground1Pressed: brand[90],
   colorBrandForeground1: brand[100],
@@ -106,5 +110,5 @@ colorBrandForeground2: brand[110],
   colorBrandBackgroundSelected: brand[60],
-  colorCompoundBrandBackground: brand[90],
-  colorCompoundBrandBackgroundHover: brand[100],
-  colorCompoundBrandBackgroundPressed: brand[80],
+  colorCompoundBrandBackground: brand[100],
+  colorCompoundBrandBackgroundHover: brand[110],
+  colorCompoundBrandBackgroundPressed: brand[90],
   colorBrandBackgroundStatic: brand[80],
@@ -131,3 +135,3 @@ colorBrandBackground2: brand[40],
   colorNeutralStrokeOnBrand2Selected: colors_1.white,
-  colorBrandStroke1: brand[90],
+  colorBrandStroke1: brand[100],
   colorBrandStroke2: brand[50],
@@ -134,0 +138,0 @@ colorCompoundBrandStroke: brand[90],

lib-commonjs/global/brandColors.js

@@ -8,18 +8,18 @@ "use strict";
 exports.brandWeb = {
-  10: `#001526`,
-  20: `#002848`,
-  30: `#043862`,
-  40: `#004578`,
-  50: `#004c87`,
-  60: `#005a9e`,
-  70: `#106ebe`,
-  80: `#0078d4`,
-  90: `#1890f1`,
-  100: `#2899f5`,
-  110: `#3aa0f3`,
-  120: `#6cb8f6`,
-  130: `#82c7ff`,
-  140: `#c7e0f4`,
-  150: `#deecf9`,
-  160: `#eff6fc`
+  10: `#061724`,
+  20: `#082338`,
+  30: `#0a2e4a`,
+  40: `#0c3b5e`,
+  50: `#0e4775`,
+  60: `#0f548c`,
+  70: `#115ea3`,
+  80: `#0f6cbd`,
+  90: `#2886de`,
+  100: `#479ef5`,
+  110: `#62abf5`,
+  120: `#77b7f7`,
+  130: `#96c6fa`,
+  140: `#b4d6fa`,
+  150: `#cfe4fa`,
+  160: `#ebf3fc`
 };
@@ -26,0 +26,0 @@ exports.brandTeams = {

lib-commonjs/global/index.d.ts

@@ -0,4 +1,9 @@
+export * from './borderRadius';
 export * from './colors';
+export * from './curves';
+export * from './durations';
 export * from './fonts';
+export * from './spacings';
 export * from './strokeWidths';
 export * from './borderRadius';
+export * from './typographyStyles';

lib-commonjs/global/index.js

@@ -9,9 +9,19 @@ "use strict";
 
+tslib_1.__exportStar(require("./borderRadius"), exports);
+
 tslib_1.__exportStar(require("./colors"), exports);
 
+tslib_1.__exportStar(require("./curves"), exports);
+
+tslib_1.__exportStar(require("./durations"), exports);
+
 tslib_1.__exportStar(require("./fonts"), exports);
 
+tslib_1.__exportStar(require("./spacings"), exports);
+
 tslib_1.__exportStar(require("./strokeWidths"), exports);
 
 tslib_1.__exportStar(require("./borderRadius"), exports);
+
+tslib_1.__exportStar(require("./typographyStyles"), exports);
 //# sourceMappingURL=index.js.map

lib-commonjs/index.d.ts

@@ -5,2 +5,3 @@ export * from './themes/index';
 export { tokens } from './tokens';
-export type { Brands, BrandVariants, FontSizeTokens, FontWeightTokens, LineHeightTokens, BorderRadiusTokens, StrokeWidthTokens, ShadowTokens, ShadowBrandTokens, FontFamilyTokens, ColorPaletteTokens, ColorPaletteDarkRed, ColorPaletteBurgundy, ColorPaletteCranberry, ColorPaletteRed, ColorPaletteDarkOrange, ColorPaletteBronze, ColorPalettePumpkin, ColorPaletteOrange, ColorPalettePeach, ColorPaletteMarigold, ColorPaletteYellow, ColorPaletteGold, ColorPaletteBrass, ColorPaletteBrown, ColorPaletteDarkBrown, ColorPaletteLime, ColorPaletteForest, ColorPaletteSeafoam, ColorPaletteLightGreen, ColorPaletteGreen, ColorPaletteDarkGreen, ColorPaletteLightTeal, ColorPaletteTeal, ColorPaletteDarkTeal, ColorPaletteCyan, ColorPaletteSteel, ColorPaletteLightBlue, ColorPaletteBlue, ColorPaletteRoyalBlue, ColorPaletteDarkBlue, ColorPaletteCornflower, ColorPaletteNavy, ColorPaletteLavender, ColorPalettePurple, ColorPaletteDarkPurple, ColorPaletteOrchid, ColorPaletteGrape, ColorPaletteBerry, ColorPaletteLilac, ColorPalettePink, ColorPaletteHotPink, ColorPaletteMagenta, ColorPalettePlum, ColorPaletteBeige, ColorPaletteMink, ColorPaletteSilver, ColorPalettePlatinum, ColorPaletteAnchor, ColorPaletteCharcoal, ColorTokens, PartialTheme, Theme, } from './types';
+export { typographyStyles } from './global/index';
+export type { Brands, BrandVariants, FontSizeTokens, FontWeightTokens, LineHeightTokens, BorderRadiusTokens, StrokeWidthTokens, SpacingTokens, HorizontalSpacingTokens, VerticalSpacingTokens, DurationTokens, CurveTokens, ShadowTokens, ShadowBrandTokens, FontFamilyTokens, ColorPaletteTokens, ColorPaletteDarkRed, ColorPaletteBurgundy, ColorPaletteCranberry, ColorPaletteRed, ColorPaletteDarkOrange, ColorPaletteBronze, ColorPalettePumpkin, ColorPaletteOrange, ColorPalettePeach, ColorPaletteMarigold, ColorPaletteYellow, ColorPaletteGold, ColorPaletteBrass, ColorPaletteBrown, ColorPaletteDarkBrown, ColorPaletteLime, ColorPaletteForest, ColorPaletteSeafoam, ColorPaletteLightGreen, ColorPaletteGreen, ColorPaletteDarkGreen, ColorPaletteLightTeal, ColorPaletteTeal, ColorPaletteDarkTeal, ColorPaletteCyan, ColorPaletteSteel, ColorPaletteLightBlue, ColorPaletteBlue, ColorPaletteRoyalBlue, ColorPaletteDarkBlue, ColorPaletteCornflower, ColorPaletteNavy, ColorPaletteLavender, ColorPalettePurple, ColorPaletteDarkPurple, ColorPaletteOrchid, ColorPaletteGrape, ColorPaletteBerry, ColorPaletteLilac, ColorPalettePink, ColorPaletteHotPink, ColorPaletteMagenta, ColorPalettePlum, ColorPaletteBeige, ColorPaletteMink, ColorPaletteSilver, ColorPalettePlatinum, ColorPaletteAnchor, ColorPaletteCharcoal, ColorTokens, PartialTheme, Theme, TypographyStyles, } from './types';

lib-commonjs/index.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.tokens = exports.themeToTokensObject = void 0;
+exports.typographyStyles = exports.tokens = exports.themeToTokensObject = void 0;
 
@@ -32,2 +32,11 @@ const tslib_1 = /*#__PURE__*/require("tslib");
 });
+
+var index_1 = /*#__PURE__*/require("./global/index");
+
+Object.defineProperty(exports, "typographyStyles", {
+  enumerable: true,
+  get: function () {
+    return index_1.typographyStyles;
+  }
+});
 //# sourceMappingURL=index.js.map

lib-commonjs/tokens.js

@@ -33,2 +33,6 @@ "use strict";
   colorBrandForegroundLinkSelected: 'var(--colorBrandForegroundLinkSelected)',
+  colorNeutralForeground2Link: 'var(--colorNeutralForeground2Link)',
+  colorNeutralForeground2LinkHover: 'var(--colorNeutralForeground2LinkHover)',
+  colorNeutralForeground2LinkPressed: 'var(--colorNeutralForeground2LinkPressed)',
+  colorNeutralForeground2LinkSelected: 'var(--colorNeutralForeground2LinkSelected)',
   colorCompoundBrandForeground1: 'var(--colorCompoundBrandForeground1)',
@@ -694,4 +698,45 @@ colorCompoundBrandForeground1Hover: 'var(--colorCompoundBrandForeground1Hover)',
   strokeWidthThicker: 'var(--strokeWidthThicker)',
-  strokeWidthThickest: 'var(--strokeWidthThickest)'
+  strokeWidthThickest: 'var(--strokeWidthThickest)',
+  // Spacings
+  spacingHorizontalNone: 'var(--spacingHorizontalNone)',
+  spacingHorizontalXXS: 'var(--spacingHorizontalXXS)',
+  spacingHorizontalXS: 'var(--spacingHorizontalXS)',
+  spacingHorizontalSNudge: 'var(--spacingHorizontalSNudge)',
+  spacingHorizontalS: 'var(--spacingHorizontalS)',
+  spacingHorizontalMNudge: 'var(--spacingHorizontalMNudge)',
+  spacingHorizontalM: 'var(--spacingHorizontalM)',
+  spacingHorizontalL: 'var(--spacingHorizontalL)',
+  spacingHorizontalXL: 'var(--spacingHorizontalXL)',
+  spacingHorizontalXXL: 'var(--spacingHorizontalXXL)',
+  spacingHorizontalXXXL: 'var(--spacingHorizontalXXXL)',
+  spacingVerticalNone: 'var(--spacingVerticalNone)',
+  spacingVerticalXXS: 'var(--spacingVerticalXXS)',
+  spacingVerticalXS: 'var(--spacingVerticalXS)',
+  spacingVerticalSNudge: 'var(--spacingVerticalSNudge)',
+  spacingVerticalS: 'var(--spacingVerticalS)',
+  spacingVerticalMNudge: 'var(--spacingVerticalMNudge)',
+  spacingVerticalM: 'var(--spacingVerticalM)',
+  spacingVerticalL: 'var(--spacingVerticalL)',
+  spacingVerticalXL: 'var(--spacingVerticalXL)',
+  spacingVerticalXXL: 'var(--spacingVerticalXXL)',
+  spacingVerticalXXXL: 'var(--spacingVerticalXXXL)',
+  // Durations
+  durationUltraFast: 'var(--durationUltraFast)',
+  durationFaster: 'var(--durationFaster)',
+  durationFast: 'var(--durationFast)',
+  durationNormal: 'var(--durationNormal)',
+  durationSlow: 'var(--durationSlow)',
+  durationSlower: 'var(--durationSlower)',
+  durationUltraSlow: 'var(--durationUltraSlow)',
+  // Curves
+  curveAccelerateMax: 'var(--curveAccelerateMax)',
+  curveAccelerateMid: 'var(--curveAccelerateMid)',
+  curveAccelerateMin: 'var(--curveAccelerateMin)',
+  curveDecelerateMax: 'var(--curveDecelerateMax)',
+  curveDecelerateMid: 'var(--curveDecelerateMid)',
+  curveDecelerateMin: 'var(--curveDecelerateMin)',
+  curveEasyEaseMax: 'var(--curveEasyEaseMax)',
+  curveEasyEase: 'var(--curveEasyEase)',
+  curveLinear: 'var(--curveLinear)'
 };
 //# sourceMappingURL=tokens.js.map

lib-commonjs/types.d.ts

@@ -30,2 +30,6 @@ /**
     colorBrandForegroundLinkSelected: string;
+    colorNeutralForeground2Link: string;
+    colorNeutralForeground2LinkHover: string;
+    colorNeutralForeground2LinkPressed: string;
+    colorNeutralForeground2LinkSelected: string;
     colorCompoundBrandForeground1: string;
@@ -309,2 +313,26 @@ colorCompoundBrandForeground1Hover: string;
 };
+declare type TypographyStyle = {
+    fontFamily: string;
+    fontSize: string;
+    fontWeight: string;
+    lineHeight: string;
+};
+export declare type TypographyStyles = {
+    body1: TypographyStyle;
+    body1Strong: TypographyStyle;
+    body1Stronger: TypographyStyle;
+    caption1: TypographyStyle;
+    caption1Strong: TypographyStyle;
+    caption1Stronger: TypographyStyle;
+    caption2: TypographyStyle;
+    caption2Strong: TypographyStyle;
+    subtitle1: TypographyStyle;
+    subtitle2: TypographyStyle;
+    subtitle2Stronger: TypographyStyle;
+    title1: TypographyStyle;
+    title2: TypographyStyle;
+    title3: TypographyStyle;
+    largeTitle: TypographyStyle;
+    display: TypographyStyle;
+};
 export declare type BorderRadiusTokens = {
@@ -324,2 +352,61 @@ borderRadiusNone: string;
 };
+export declare type SpacingTokens = {
+    none: string;
+    xxs: string;
+    xs: string;
+    sNudge: string;
+    s: string;
+    mNudge: string;
+    m: string;
+    l: string;
+    xl: string;
+    xxl: string;
+    xxxl: string;
+};
+export declare type HorizontalSpacingTokens = {
+    spacingHorizontalNone: string;
+    spacingHorizontalXXS: string;
+    spacingHorizontalXS: string;
+    spacingHorizontalSNudge: string;
+    spacingHorizontalS: string;
+    spacingHorizontalMNudge: string;
+    spacingHorizontalM: string;
+    spacingHorizontalL: string;
+    spacingHorizontalXL: string;
+    spacingHorizontalXXL: string;
+    spacingHorizontalXXXL: string;
+};
+export declare type VerticalSpacingTokens = {
+    spacingVerticalNone: string;
+    spacingVerticalXXS: string;
+    spacingVerticalXS: string;
+    spacingVerticalSNudge: string;
+    spacingVerticalS: string;
+    spacingVerticalMNudge: string;
+    spacingVerticalM: string;
+    spacingVerticalL: string;
+    spacingVerticalXL: string;
+    spacingVerticalXXL: string;
+    spacingVerticalXXXL: string;
+};
+export declare type DurationTokens = {
+    durationUltraFast: string;
+    durationFaster: string;
+    durationFast: string;
+    durationNormal: string;
+    durationSlow: string;
+    durationSlower: string;
+    durationUltraSlow: string;
+};
+export declare type CurveTokens = {
+    curveAccelerateMax: string;
+    curveAccelerateMid: string;
+    curveAccelerateMin: string;
+    curveDecelerateMax: string;
+    curveDecelerateMid: string;
+    curveDecelerateMin: string;
+    curveEasyEaseMax: string;
+    curveEasyEase: string;
+    curveLinear: string;
+};
 /**
@@ -346,3 +433,4 @@ * Design tokens for shadow levels
 export declare type AlphaColors = 5 | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90;
-export declare type Theme = FontSizeTokens & LineHeightTokens & BorderRadiusTokens & StrokeWidthTokens & ShadowTokens & ShadowBrandTokens & FontFamilyTokens & FontWeightTokens & ColorPaletteTokens & ColorTokens;
+export declare type Theme = FontSizeTokens & LineHeightTokens & BorderRadiusTokens & StrokeWidthTokens & HorizontalSpacingTokens & VerticalSpacingTokens & DurationTokens & CurveTokens & ShadowTokens & ShadowBrandTokens & FontFamilyTokens & FontWeightTokens & ColorPaletteTokens & ColorTokens;
 export declare type PartialTheme = Partial<Theme>;
+export {};

lib-commonjs/utils/createDarkTheme.js

@@ -16,2 +16,8 @@ "use strict";
 
+const durations_1 = /*#__PURE__*/require("../global/durations");
+
+const curves_1 = /*#__PURE__*/require("../global/curves");
+
+const spacings_1 = /*#__PURE__*/require("../global/spacings");
+
 const createDarkTheme = brand => {
@@ -25,2 +31,6 @@ const colorTokens = darkColor_1.generateColorTokens(brand);
     ...index_1.strokeWidths,
+    ...spacings_1.horizontalSpacings,
+    ...spacings_1.verticalSpacings,
+    ...durations_1.durations,
+    ...curves_1.curves,
     ...colorTokens,
@@ -27,0 +37,0 @@ ...darkColorPalette_1.colorPaletteTokens,

lib-commonjs/utils/createHighContrastTheme.js

@@ -16,2 +16,8 @@ "use strict";
 
+const durations_1 = /*#__PURE__*/require("../global/durations");
+
+const curves_1 = /*#__PURE__*/require("../global/curves");
+
+const spacings_1 = /*#__PURE__*/require("../global/spacings");
+
 const createHighContrastTheme = () => {
@@ -25,2 +31,6 @@ const colorTokens = highContrastColor_1.generateColorTokens();
     ...index_1.strokeWidths,
+    ...spacings_1.horizontalSpacings,
+    ...spacings_1.verticalSpacings,
+    ...durations_1.durations,
+    ...curves_1.curves,
     ...colorTokens,
@@ -27,0 +37,0 @@ ...highContrastColorPalette_1.colorPaletteTokens,

lib-commonjs/utils/createLightTheme.js

@@ -16,2 +16,8 @@ "use strict";
 
+const durations_1 = /*#__PURE__*/require("../global/durations");
+
+const curves_1 = /*#__PURE__*/require("../global/curves");
+
+const spacings_1 = /*#__PURE__*/require("../global/spacings");
+
 const createLightTheme = brand => {
@@ -25,2 +31,6 @@ const colorTokens = lightColor_1.generateColorTokens(brand);
     ...index_1.strokeWidths,
+    ...spacings_1.horizontalSpacings,
+    ...spacings_1.verticalSpacings,
+    ...durations_1.durations,
+    ...curves_1.curves,
     ...colorTokens,
@@ -27,0 +37,0 @@ ...lightColorPalette_1.colorPaletteTokens,

lib-commonjs/utils/createTeamsDarkTheme.js

@@ -16,2 +16,8 @@ "use strict";
 
+const durations_1 = /*#__PURE__*/require("../global/durations");
+
+const curves_1 = /*#__PURE__*/require("../global/curves");
+
+const spacings_1 = /*#__PURE__*/require("../global/spacings");
+
 const createTeamsDarkTheme = brand => {
@@ -25,2 +31,6 @@ const colorTokens = teamsDarkColor_1.generateColorTokens(brand);
     ...index_1.strokeWidths,
+    ...spacings_1.horizontalSpacings,
+    ...spacings_1.verticalSpacings,
+    ...durations_1.durations,
+    ...curves_1.curves,
     ...colorTokens,
@@ -27,0 +37,0 @@ ...teamsDarkColorPalette_1.colorPaletteTokens,

lib/alias/darkColor.js

@@ -24,9 +24,13 @@ import { black, blackAlpha, grey, grey14Alpha, white, whiteAlpha } from '../global/colors';
   colorNeutralForegroundInvertedDisabled: whiteAlpha[40],
-  colorBrandForegroundLink: brand[90],
+  colorBrandForegroundLink: brand[100],
   colorBrandForegroundLinkHover: brand[110],
-  colorBrandForegroundLinkPressed: brand[100],
-  colorBrandForegroundLinkSelected: brand[90],
-  colorCompoundBrandForeground1: brand[90],
-  colorCompoundBrandForeground1Hover: brand[100],
-  colorCompoundBrandForeground1Pressed: brand[80],
+  colorBrandForegroundLinkPressed: brand[90],
+  colorBrandForegroundLinkSelected: brand[100],
+  colorNeutralForeground2Link: grey[84],
+  colorNeutralForeground2LinkHover: white,
+  colorNeutralForeground2LinkPressed: white,
+  colorNeutralForeground2LinkSelected: white,
+  colorCompoundBrandForeground1: brand[100],
+  colorCompoundBrandForeground1Hover: brand[110],
+  colorCompoundBrandForeground1Pressed: brand[90],
   colorBrandForeground1: brand[100],
@@ -98,5 +102,5 @@ colorBrandForeground2: brand[110],
   colorBrandBackgroundSelected: brand[60],
-  colorCompoundBrandBackground: brand[90],
-  colorCompoundBrandBackgroundHover: brand[100],
-  colorCompoundBrandBackgroundPressed: brand[80],
+  colorCompoundBrandBackground: brand[100],
+  colorCompoundBrandBackgroundHover: brand[110],
+  colorCompoundBrandBackgroundPressed: brand[90],
   colorBrandBackgroundStatic: brand[80],
@@ -123,3 +127,3 @@ colorBrandBackground2: brand[40],
   colorNeutralStrokeOnBrand2Selected: white,
-  colorBrandStroke1: brand[90],
+  colorBrandStroke1: brand[100],
   colorBrandStroke2: brand[50],
@@ -126,0 +130,0 @@ colorCompoundBrandStroke: brand[90],

lib/alias/highContrastColor.js

@@ -28,2 +28,6 @@ import { blackAlpha, hcButtonFace, hcButtonText, hcCanvas, hcCanvasText, hcDisabled, hcHighlight, hcHighlightText, hcHyperlink } from '../global/colors';
   colorBrandForegroundLinkSelected: hcHyperlink,
+  colorNeutralForeground2Link: hcHyperlink,
+  colorNeutralForeground2LinkHover: hcHyperlink,
+  colorNeutralForeground2LinkPressed: hcHyperlink,
+  colorNeutralForeground2LinkSelected: hcHyperlink,
   colorCompoundBrandForeground1: hcHighlight,
@@ -30,0 +34,0 @@ colorCompoundBrandForeground1Hover: hcHighlight,

lib/alias/lightColor.js

@@ -28,2 +28,6 @@ import { black, blackAlpha, grey, white, whiteAlpha } from '../global/colors';
   colorBrandForegroundLinkSelected: brand[70],
+  colorNeutralForeground2Link: grey[26],
+  colorNeutralForeground2LinkHover: grey[14],
+  colorNeutralForeground2LinkPressed: grey[14],
+  colorNeutralForeground2LinkSelected: grey[14],
   colorCompoundBrandForeground1: brand[80],
@@ -30,0 +34,0 @@ colorCompoundBrandForeground1Hover: brand[70],

lib/alias/teamsDarkColor.js

@@ -24,9 +24,13 @@ import { black, blackAlpha, grey, grey14Alpha, white, whiteAlpha } from '../global/colors';
   colorNeutralForegroundInvertedDisabled: whiteAlpha[40],
-  colorBrandForegroundLink: brand[90],
+  colorBrandForegroundLink: brand[100],
   colorBrandForegroundLinkHover: brand[110],
-  colorBrandForegroundLinkPressed: brand[100],
-  colorBrandForegroundLinkSelected: brand[90],
-  colorCompoundBrandForeground1: brand[90],
-  colorCompoundBrandForeground1Hover: brand[100],
-  colorCompoundBrandForeground1Pressed: brand[80],
+  colorBrandForegroundLinkPressed: brand[90],
+  colorBrandForegroundLinkSelected: brand[100],
+  colorNeutralForeground2Link: grey[84],
+  colorNeutralForeground2LinkHover: white,
+  colorNeutralForeground2LinkPressed: white,
+  colorNeutralForeground2LinkSelected: white,
+  colorCompoundBrandForeground1: brand[100],
+  colorCompoundBrandForeground1Hover: brand[110],
+  colorCompoundBrandForeground1Pressed: brand[90],
   colorBrandForeground1: brand[100],
@@ -98,5 +102,5 @@ colorBrandForeground2: brand[110],
   colorBrandBackgroundSelected: brand[60],
-  colorCompoundBrandBackground: brand[90],
-  colorCompoundBrandBackgroundHover: brand[100],
-  colorCompoundBrandBackgroundPressed: brand[80],
+  colorCompoundBrandBackground: brand[100],
+  colorCompoundBrandBackgroundHover: brand[110],
+  colorCompoundBrandBackgroundPressed: brand[90],
   colorBrandBackgroundStatic: brand[80],
@@ -123,3 +127,3 @@ colorBrandBackground2: brand[40],
   colorNeutralStrokeOnBrand2Selected: white,
-  colorBrandStroke1: brand[90],
+  colorBrandStroke1: brand[100],
   colorBrandStroke2: brand[50],
@@ -126,0 +130,0 @@ colorCompoundBrandStroke: brand[90],

lib/global/brandColors.js

 export const brandWeb = {
-  10: `#001526`,
-  20: `#002848`,
-  30: `#043862`,
-  40: `#004578`,
-  50: `#004c87`,
-  60: `#005a9e`,
-  70: `#106ebe`,
-  80: `#0078d4`,
-  90: `#1890f1`,
-  100: `#2899f5`,
-  110: `#3aa0f3`,
-  120: `#6cb8f6`,
-  130: `#82c7ff`,
-  140: `#c7e0f4`,
-  150: `#deecf9`,
-  160: `#eff6fc`
+  10: `#061724`,
+  20: `#082338`,
+  30: `#0a2e4a`,
+  40: `#0c3b5e`,
+  50: `#0e4775`,
+  60: `#0f548c`,
+  70: `#115ea3`,
+  80: `#0f6cbd`,
+  90: `#2886de`,
+  100: `#479ef5`,
+  110: `#62abf5`,
+  120: `#77b7f7`,
+  130: `#96c6fa`,
+  140: `#b4d6fa`,
+  150: `#cfe4fa`,
+  160: `#ebf3fc`
 };
@@ -19,0 +19,0 @@ export const brandTeams = {

lib/global/index.d.ts

@@ -0,4 +1,9 @@
+export * from './borderRadius';
 export * from './colors';
+export * from './curves';
+export * from './durations';
 export * from './fonts';
+export * from './spacings';
 export * from './strokeWidths';
 export * from './borderRadius';
+export * from './typographyStyles';

lib/global/index.js

@@ -0,5 +1,10 @@
+export * from './borderRadius';
 export * from './colors';
+export * from './curves';
+export * from './durations';
 export * from './fonts';
+export * from './spacings';
 export * from './strokeWidths';
 export * from './borderRadius';
+export * from './typographyStyles';
 //# sourceMappingURL=index.js.map

lib/index.d.ts

@@ -5,2 +5,3 @@ export * from './themes/index';
 export { tokens } from './tokens';
-export type { Brands, BrandVariants, FontSizeTokens, FontWeightTokens, LineHeightTokens, BorderRadiusTokens, StrokeWidthTokens, ShadowTokens, ShadowBrandTokens, FontFamilyTokens, ColorPaletteTokens, ColorPaletteDarkRed, ColorPaletteBurgundy, ColorPaletteCranberry, ColorPaletteRed, ColorPaletteDarkOrange, ColorPaletteBronze, ColorPalettePumpkin, ColorPaletteOrange, ColorPalettePeach, ColorPaletteMarigold, ColorPaletteYellow, ColorPaletteGold, ColorPaletteBrass, ColorPaletteBrown, ColorPaletteDarkBrown, ColorPaletteLime, ColorPaletteForest, ColorPaletteSeafoam, ColorPaletteLightGreen, ColorPaletteGreen, ColorPaletteDarkGreen, ColorPaletteLightTeal, ColorPaletteTeal, ColorPaletteDarkTeal, ColorPaletteCyan, ColorPaletteSteel, ColorPaletteLightBlue, ColorPaletteBlue, ColorPaletteRoyalBlue, ColorPaletteDarkBlue, ColorPaletteCornflower, ColorPaletteNavy, ColorPaletteLavender, ColorPalettePurple, ColorPaletteDarkPurple, ColorPaletteOrchid, ColorPaletteGrape, ColorPaletteBerry, ColorPaletteLilac, ColorPalettePink, ColorPaletteHotPink, ColorPaletteMagenta, ColorPalettePlum, ColorPaletteBeige, ColorPaletteMink, ColorPaletteSilver, ColorPalettePlatinum, ColorPaletteAnchor, ColorPaletteCharcoal, ColorTokens, PartialTheme, Theme, } from './types';
+export { typographyStyles } from './global/index';
+export type { Brands, BrandVariants, FontSizeTokens, FontWeightTokens, LineHeightTokens, BorderRadiusTokens, StrokeWidthTokens, SpacingTokens, HorizontalSpacingTokens, VerticalSpacingTokens, DurationTokens, CurveTokens, ShadowTokens, ShadowBrandTokens, FontFamilyTokens, ColorPaletteTokens, ColorPaletteDarkRed, ColorPaletteBurgundy, ColorPaletteCranberry, ColorPaletteRed, ColorPaletteDarkOrange, ColorPaletteBronze, ColorPalettePumpkin, ColorPaletteOrange, ColorPalettePeach, ColorPaletteMarigold, ColorPaletteYellow, ColorPaletteGold, ColorPaletteBrass, ColorPaletteBrown, ColorPaletteDarkBrown, ColorPaletteLime, ColorPaletteForest, ColorPaletteSeafoam, ColorPaletteLightGreen, ColorPaletteGreen, ColorPaletteDarkGreen, ColorPaletteLightTeal, ColorPaletteTeal, ColorPaletteDarkTeal, ColorPaletteCyan, ColorPaletteSteel, ColorPaletteLightBlue, ColorPaletteBlue, ColorPaletteRoyalBlue, ColorPaletteDarkBlue, ColorPaletteCornflower, ColorPaletteNavy, ColorPaletteLavender, ColorPalettePurple, ColorPaletteDarkPurple, ColorPaletteOrchid, ColorPaletteGrape, ColorPaletteBerry, ColorPaletteLilac, ColorPalettePink, ColorPaletteHotPink, ColorPaletteMagenta, ColorPalettePlum, ColorPaletteBeige, ColorPaletteMink, ColorPaletteSilver, ColorPalettePlatinum, ColorPaletteAnchor, ColorPaletteCharcoal, ColorTokens, PartialTheme, Theme, TypographyStyles, } from './types';

lib/index.js

@@ -5,2 +5,3 @@ export * from './themes/index';
 export { tokens } from './tokens';
+export { typographyStyles } from './global/index';
 //# sourceMappingURL=index.js.map

lib/tokens.js

@@ -27,2 +27,6 @@ export const tokens = {
   colorBrandForegroundLinkSelected: 'var(--colorBrandForegroundLinkSelected)',
+  colorNeutralForeground2Link: 'var(--colorNeutralForeground2Link)',
+  colorNeutralForeground2LinkHover: 'var(--colorNeutralForeground2LinkHover)',
+  colorNeutralForeground2LinkPressed: 'var(--colorNeutralForeground2LinkPressed)',
+  colorNeutralForeground2LinkSelected: 'var(--colorNeutralForeground2LinkSelected)',
   colorCompoundBrandForeground1: 'var(--colorCompoundBrandForeground1)',
@@ -688,4 +692,45 @@ colorCompoundBrandForeground1Hover: 'var(--colorCompoundBrandForeground1Hover)',
   strokeWidthThicker: 'var(--strokeWidthThicker)',
-  strokeWidthThickest: 'var(--strokeWidthThickest)'
+  strokeWidthThickest: 'var(--strokeWidthThickest)',
+  // Spacings
+  spacingHorizontalNone: 'var(--spacingHorizontalNone)',
+  spacingHorizontalXXS: 'var(--spacingHorizontalXXS)',
+  spacingHorizontalXS: 'var(--spacingHorizontalXS)',
+  spacingHorizontalSNudge: 'var(--spacingHorizontalSNudge)',
+  spacingHorizontalS: 'var(--spacingHorizontalS)',
+  spacingHorizontalMNudge: 'var(--spacingHorizontalMNudge)',
+  spacingHorizontalM: 'var(--spacingHorizontalM)',
+  spacingHorizontalL: 'var(--spacingHorizontalL)',
+  spacingHorizontalXL: 'var(--spacingHorizontalXL)',
+  spacingHorizontalXXL: 'var(--spacingHorizontalXXL)',
+  spacingHorizontalXXXL: 'var(--spacingHorizontalXXXL)',
+  spacingVerticalNone: 'var(--spacingVerticalNone)',
+  spacingVerticalXXS: 'var(--spacingVerticalXXS)',
+  spacingVerticalXS: 'var(--spacingVerticalXS)',
+  spacingVerticalSNudge: 'var(--spacingVerticalSNudge)',
+  spacingVerticalS: 'var(--spacingVerticalS)',
+  spacingVerticalMNudge: 'var(--spacingVerticalMNudge)',
+  spacingVerticalM: 'var(--spacingVerticalM)',
+  spacingVerticalL: 'var(--spacingVerticalL)',
+  spacingVerticalXL: 'var(--spacingVerticalXL)',
+  spacingVerticalXXL: 'var(--spacingVerticalXXL)',
+  spacingVerticalXXXL: 'var(--spacingVerticalXXXL)',
+  // Durations
+  durationUltraFast: 'var(--durationUltraFast)',
+  durationFaster: 'var(--durationFaster)',
+  durationFast: 'var(--durationFast)',
+  durationNormal: 'var(--durationNormal)',
+  durationSlow: 'var(--durationSlow)',
+  durationSlower: 'var(--durationSlower)',
+  durationUltraSlow: 'var(--durationUltraSlow)',
+  // Curves
+  curveAccelerateMax: 'var(--curveAccelerateMax)',
+  curveAccelerateMid: 'var(--curveAccelerateMid)',
+  curveAccelerateMin: 'var(--curveAccelerateMin)',
+  curveDecelerateMax: 'var(--curveDecelerateMax)',
+  curveDecelerateMid: 'var(--curveDecelerateMid)',
+  curveDecelerateMin: 'var(--curveDecelerateMin)',
+  curveEasyEaseMax: 'var(--curveEasyEaseMax)',
+  curveEasyEase: 'var(--curveEasyEase)',
+  curveLinear: 'var(--curveLinear)'
 };
 //# sourceMappingURL=tokens.js.map

lib/types.d.ts

@@ -30,2 +30,6 @@ /**
     colorBrandForegroundLinkSelected: string;
+    colorNeutralForeground2Link: string;
+    colorNeutralForeground2LinkHover: string;
+    colorNeutralForeground2LinkPressed: string;
+    colorNeutralForeground2LinkSelected: string;
     colorCompoundBrandForeground1: string;
@@ -309,2 +313,26 @@ colorCompoundBrandForeground1Hover: string;
 };
+declare type TypographyStyle = {
+    fontFamily: string;
+    fontSize: string;
+    fontWeight: string;
+    lineHeight: string;
+};
+export declare type TypographyStyles = {
+    body1: TypographyStyle;
+    body1Strong: TypographyStyle;
+    body1Stronger: TypographyStyle;
+    caption1: TypographyStyle;
+    caption1Strong: TypographyStyle;
+    caption1Stronger: TypographyStyle;
+    caption2: TypographyStyle;
+    caption2Strong: TypographyStyle;
+    subtitle1: TypographyStyle;
+    subtitle2: TypographyStyle;
+    subtitle2Stronger: TypographyStyle;
+    title1: TypographyStyle;
+    title2: TypographyStyle;
+    title3: TypographyStyle;
+    largeTitle: TypographyStyle;
+    display: TypographyStyle;
+};
 export declare type BorderRadiusTokens = {
@@ -324,2 +352,61 @@ borderRadiusNone: string;
 };
+export declare type SpacingTokens = {
+    none: string;
+    xxs: string;
+    xs: string;
+    sNudge: string;
+    s: string;
+    mNudge: string;
+    m: string;
+    l: string;
+    xl: string;
+    xxl: string;
+    xxxl: string;
+};
+export declare type HorizontalSpacingTokens = {
+    spacingHorizontalNone: string;
+    spacingHorizontalXXS: string;
+    spacingHorizontalXS: string;
+    spacingHorizontalSNudge: string;
+    spacingHorizontalS: string;
+    spacingHorizontalMNudge: string;
+    spacingHorizontalM: string;
+    spacingHorizontalL: string;
+    spacingHorizontalXL: string;
+    spacingHorizontalXXL: string;
+    spacingHorizontalXXXL: string;
+};
+export declare type VerticalSpacingTokens = {
+    spacingVerticalNone: string;
+    spacingVerticalXXS: string;
+    spacingVerticalXS: string;
+    spacingVerticalSNudge: string;
+    spacingVerticalS: string;
+    spacingVerticalMNudge: string;
+    spacingVerticalM: string;
+    spacingVerticalL: string;
+    spacingVerticalXL: string;
+    spacingVerticalXXL: string;
+    spacingVerticalXXXL: string;
+};
+export declare type DurationTokens = {
+    durationUltraFast: string;
+    durationFaster: string;
+    durationFast: string;
+    durationNormal: string;
+    durationSlow: string;
+    durationSlower: string;
+    durationUltraSlow: string;
+};
+export declare type CurveTokens = {
+    curveAccelerateMax: string;
+    curveAccelerateMid: string;
+    curveAccelerateMin: string;
+    curveDecelerateMax: string;
+    curveDecelerateMid: string;
+    curveDecelerateMin: string;
+    curveEasyEaseMax: string;
+    curveEasyEase: string;
+    curveLinear: string;
+};
 /**
@@ -346,3 +433,4 @@ * Design tokens for shadow levels
 export declare type AlphaColors = 5 | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90;
-export declare type Theme = FontSizeTokens & LineHeightTokens & BorderRadiusTokens & StrokeWidthTokens & ShadowTokens & ShadowBrandTokens & FontFamilyTokens & FontWeightTokens & ColorPaletteTokens & ColorTokens;
+export declare type Theme = FontSizeTokens & LineHeightTokens & BorderRadiusTokens & StrokeWidthTokens & HorizontalSpacingTokens & VerticalSpacingTokens & DurationTokens & CurveTokens & ShadowTokens & ShadowBrandTokens & FontFamilyTokens & FontWeightTokens & ColorPaletteTokens & ColorTokens;
 export declare type PartialTheme = Partial<Theme>;
+export {};

lib/utils/createDarkTheme.js

@@ -5,2 +5,5 @@ import { colorPaletteTokens } from '../alias/darkColorPalette';
 import { createShadowTokens } from './shadows';
+import { durations } from '../global/durations';
+import { curves } from '../global/curves';
+import { horizontalSpacings, verticalSpacings } from '../global/spacings';
 export const createDarkTheme = brand => {
@@ -14,2 +17,6 @@ const colorTokens = generateColorTokens(brand);
     ...strokeWidths,
+    ...horizontalSpacings,
+    ...verticalSpacings,
+    ...durations,
+    ...curves,
     ...colorTokens,
@@ -16,0 +23,0 @@ ...colorPaletteTokens,

lib/utils/createHighContrastTheme.js

@@ -5,2 +5,5 @@ import { colorPaletteTokens } from '../alias/highContrastColorPalette';
 import { createShadowTokens } from './shadows';
+import { durations } from '../global/durations';
+import { curves } from '../global/curves';
+import { horizontalSpacings, verticalSpacings } from '../global/spacings';
 export const createHighContrastTheme = () => {
@@ -14,2 +17,6 @@ const colorTokens = generateColorTokens();
     ...strokeWidths,
+    ...horizontalSpacings,
+    ...verticalSpacings,
+    ...durations,
+    ...curves,
     ...colorTokens,
@@ -16,0 +23,0 @@ ...colorPaletteTokens,

lib/utils/createLightTheme.js

@@ -5,2 +5,5 @@ import { colorPaletteTokens } from '../alias/lightColorPalette';
 import { createShadowTokens } from './shadows';
+import { durations } from '../global/durations';
+import { curves } from '../global/curves';
+import { horizontalSpacings, verticalSpacings } from '../global/spacings';
 export const createLightTheme = brand => {
@@ -14,2 +17,6 @@ const colorTokens = generateColorTokens(brand);
     ...strokeWidths,
+    ...horizontalSpacings,
+    ...verticalSpacings,
+    ...durations,
+    ...curves,
     ...colorTokens,
@@ -16,0 +23,0 @@ ...colorPaletteTokens,

lib/utils/createTeamsDarkTheme.js

@@ -5,2 +5,5 @@ import { colorPaletteTokens } from '../alias/teamsDarkColorPalette';
 import { createShadowTokens } from './shadows';
+import { durations } from '../global/durations';
+import { curves } from '../global/curves';
+import { horizontalSpacings, verticalSpacings } from '../global/spacings';
 export const createTeamsDarkTheme = brand => {
@@ -14,2 +17,6 @@ const colorTokens = generateColorTokens(brand);
     ...strokeWidths,
+    ...horizontalSpacings,
+    ...verticalSpacings,
+    ...durations,
+    ...curves,
     ...colorTokens,
@@ -16,0 +23,0 @@ ...colorPaletteTokens,

package.json

 {
   "name": "@fluentui/react-theme",
-  "version": "9.0.0-rc.5",
+  "version": "9.0.0-rc.6",
   "description": "Fluent UI themes",
@@ -22,6 +22,6 @@ "main": "lib-commonjs/index.js",
     "start": "yarn storybook",
-    "storybook": "node ../../scripts/storybook/runner",
+    "storybook": "node ../../../scripts/storybook/runner",
     "test": "jest --passWithNoTests",
     "docs": "api-extractor run --config=config/api-extractor.local.json --local",
-    "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-theme/src && yarn docs",
+    "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/packages/react-components/react-theme/src && yarn docs",
     "type-check": "tsc -b tsconfig.json"
@@ -28,0 +28,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

887329

increased by9.13%

Number of package files

229

increased by11.71%

Lines of code

8308

increased by12.35%

No dependency changes