@fluentui/react-theme - npm Package Compare versions

Comparing version 0.0.0-nightly-20220428-0420.1 to 0.0.0-nightly-20220429-0418.1

CHANGELOG.json

@@ -5,5 +5,5 @@ {
     {
-      "date": "Thu, 28 Apr 2022 04:29:41 GMT",
-      "tag": "@fluentui/react-theme_v0.0.0-nightly-20220428-0420.1",
-      "version": "0.0.0-nightly-20220428-0420.1",
+      "date": "Fri, 29 Apr 2022 04:27:33 GMT",
+      "tag": "@fluentui/react-theme_v0.0.0-nightly-20220429-0418.1",
+      "version": "0.0.0-nightly-20220429-0418.1",
       "comments": {
@@ -26,2 +26,14 @@ "prerelease": [
             "package": "@fluentui/react-theme",
+            "commit": "57583bfffa6bf28be389dec6c642f36ed253ecdd",
+            "comment": "Added global theme types and tokens"
+          },
+          {
+            "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",
@@ -28,0 +40,0 @@ "comment": "Added typeography styles"

CHANGELOG.md

 # Change Log - @fluentui/react-theme
 
-This log was last generated on Thu, 28 Apr 2022 04:29:41 GMT and should not be manually modified.
+This log was last generated on Fri, 29 Apr 2022 04:27:33 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20220428-0420.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-theme_v0.0.0-nightly-20220428-0420.1)
+## [0.0.0-nightly-20220429-0418.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-theme_v0.0.0-nightly-20220429-0418.1)
 
-Thu, 28 Apr 2022 04:29:41 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v9.0.0-rc.5..@fluentui/react-theme_v0.0.0-nightly-20220428-0420.1)
+Fri, 29 Apr 2022 04:27:33 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v9.0.0-rc.5..@fluentui/react-theme_v0.0.0-nightly-20220429-0418.1)
 
@@ -16,2 +16,4 @@ ### Changes
 - Fixed typo in typography ([PR #22625](https://github.com/microsoft/fluentui/pull/22625) by [e-mail])
+- Added global theme types and tokens ([PR #22607](https://github.com/microsoft/fluentui/pull/22607) 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])
@@ -18,0 +20,0 @@ - feat(react-theme): Add colorNeutralForeground2Link color tokens ([PR #22570](https://github.com/microsoft/fluentui/pull/22570) by [e-mail])

lib-commonjs/global/index.d.ts

@@ -0,5 +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,6 +9,14 @@ "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);
@@ -15,0 +23,0 @@

lib-commonjs/global/typographyStyles.js

@@ -16,2 +16,3 @@ "use strict";
   body1: {
+    fontFamily: tokens_1.tokens.fontFamilyBase,
     fontSize: tokens_1.tokens.fontSizeBase300,
@@ -22,2 +23,3 @@ fontWeight: tokens_1.tokens.fontWeightRegular,
   body1Strong: {
+    fontFamily: tokens_1.tokens.fontFamilyBase,
     fontSize: tokens_1.tokens.fontSizeBase300,
@@ -28,2 +30,3 @@ fontWeight: tokens_1.tokens.fontWeightSemibold,
   body1Stronger: {
+    fontFamily: tokens_1.tokens.fontFamilyBase,
     fontSize: tokens_1.tokens.fontSizeBase300,
@@ -34,2 +37,3 @@ fontWeight: tokens_1.tokens.fontWeightMedium,
   caption1: {
+    fontFamily: tokens_1.tokens.fontFamilyBase,
     fontSize: tokens_1.tokens.fontSizeBase200,
@@ -40,2 +44,3 @@ fontWeight: tokens_1.tokens.fontWeightRegular,
   caption1Strong: {
+    fontFamily: tokens_1.tokens.fontFamilyBase,
     fontSize: tokens_1.tokens.fontSizeBase200,
@@ -46,2 +51,3 @@ fontWeight: tokens_1.tokens.fontWeightSemibold,
   caption1Stronger: {
+    fontFamily: tokens_1.tokens.fontFamilyBase,
     fontSize: tokens_1.tokens.fontSizeBase200,
@@ -52,2 +58,3 @@ fontWeight: tokens_1.tokens.fontWeightMedium,
   caption2: {
+    fontFamily: tokens_1.tokens.fontFamilyBase,
     fontSize: tokens_1.tokens.fontSizeBase100,
@@ -58,2 +65,3 @@ fontWeight: tokens_1.tokens.fontWeightRegular,
   caption2Strong: {
+    fontFamily: tokens_1.tokens.fontFamilyBase,
     fontSize: tokens_1.tokens.fontSizeBase100,
@@ -64,2 +72,3 @@ fontWeight: tokens_1.tokens.fontWeightSemibold,
   subtitle1: {
+    fontFamily: tokens_1.tokens.fontFamilyBase,
     fontSize: tokens_1.tokens.fontSizeBase500,
@@ -70,2 +79,3 @@ fontWeight: tokens_1.tokens.fontWeightSemibold,
   subtitle2: {
+    fontFamily: tokens_1.tokens.fontFamilyBase,
     fontSize: tokens_1.tokens.fontSizeBase400,
@@ -76,2 +86,3 @@ fontWeight: tokens_1.tokens.fontWeightSemibold,
   subtitle2Stronger: {
+    fontFamily: tokens_1.tokens.fontFamilyBase,
     fontSize: tokens_1.tokens.fontSizeBase400,
@@ -82,2 +93,3 @@ fontWeight: tokens_1.tokens.fontWeightMedium,
   title1: {
+    fontFamily: tokens_1.tokens.fontFamilyBase,
     fontSize: tokens_1.tokens.fontSizeHero800,
@@ -88,2 +100,3 @@ fontWeight: tokens_1.tokens.fontWeightSemibold,
   title2: {
+    fontFamily: tokens_1.tokens.fontFamilyBase,
     fontSize: tokens_1.tokens.fontSizeHero700,
@@ -94,2 +107,3 @@ fontWeight: tokens_1.tokens.fontWeightSemibold,
   title3: {
+    fontFamily: tokens_1.tokens.fontFamilyBase,
     fontSize: tokens_1.tokens.fontSizeBase600,
@@ -100,2 +114,3 @@ fontWeight: tokens_1.tokens.fontWeightSemibold,
   largeTitle: {
+    fontFamily: tokens_1.tokens.fontFamilyBase,
     fontSize: tokens_1.tokens.fontSizeHero900,
@@ -106,2 +121,3 @@ fontWeight: tokens_1.tokens.fontWeightSemibold,
   display: {
+    fontFamily: tokens_1.tokens.fontFamilyBase,
     fontSize: tokens_1.tokens.fontSizeHero1000,
@@ -108,0 +124,0 @@ fontWeight: tokens_1.tokens.fontWeightSemibold,

lib-commonjs/index.d.ts

@@ -6,2 +6,2 @@ export * from './themes/index';
 export { typographyStyles } from './global/index';
-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, TypographyStyles, } from './types';
+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/tokens.js

@@ -697,4 +697,45 @@ "use strict";
   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

@@ -313,2 +313,3 @@ /**
 declare type TypographyStyle = {
+    fontFamily: string;
     fontSize: string;
@@ -350,2 +351,61 @@ fontWeight: 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;
+};
 /**
@@ -372,4 +432,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/global/index.d.ts

@@ -0,5 +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,3 +1,7 @@
+export * from './borderRadius';
 export * from './colors';
+export * from './curves';
+export * from './durations';
 export * from './fonts';
+export * from './spacings';
 export * from './strokeWidths';
@@ -4,0 +8,0 @@ export * from './borderRadius';

lib/global/typographyStyles.js

@@ -8,2 +8,3 @@ import { tokens } from '../tokens';
   body1: {
+    fontFamily: tokens.fontFamilyBase,
     fontSize: tokens.fontSizeBase300,
@@ -14,2 +15,3 @@ fontWeight: tokens.fontWeightRegular,
   body1Strong: {
+    fontFamily: tokens.fontFamilyBase,
     fontSize: tokens.fontSizeBase300,
@@ -20,2 +22,3 @@ fontWeight: tokens.fontWeightSemibold,
   body1Stronger: {
+    fontFamily: tokens.fontFamilyBase,
     fontSize: tokens.fontSizeBase300,
@@ -26,2 +29,3 @@ fontWeight: tokens.fontWeightMedium,
   caption1: {
+    fontFamily: tokens.fontFamilyBase,
     fontSize: tokens.fontSizeBase200,
@@ -32,2 +36,3 @@ fontWeight: tokens.fontWeightRegular,
   caption1Strong: {
+    fontFamily: tokens.fontFamilyBase,
     fontSize: tokens.fontSizeBase200,
@@ -38,2 +43,3 @@ fontWeight: tokens.fontWeightSemibold,
   caption1Stronger: {
+    fontFamily: tokens.fontFamilyBase,
     fontSize: tokens.fontSizeBase200,
@@ -44,2 +50,3 @@ fontWeight: tokens.fontWeightMedium,
   caption2: {
+    fontFamily: tokens.fontFamilyBase,
     fontSize: tokens.fontSizeBase100,
@@ -50,2 +57,3 @@ fontWeight: tokens.fontWeightRegular,
   caption2Strong: {
+    fontFamily: tokens.fontFamilyBase,
     fontSize: tokens.fontSizeBase100,
@@ -56,2 +64,3 @@ fontWeight: tokens.fontWeightSemibold,
   subtitle1: {
+    fontFamily: tokens.fontFamilyBase,
     fontSize: tokens.fontSizeBase500,
@@ -62,2 +71,3 @@ fontWeight: tokens.fontWeightSemibold,
   subtitle2: {
+    fontFamily: tokens.fontFamilyBase,
     fontSize: tokens.fontSizeBase400,
@@ -68,2 +78,3 @@ fontWeight: tokens.fontWeightSemibold,
   subtitle2Stronger: {
+    fontFamily: tokens.fontFamilyBase,
     fontSize: tokens.fontSizeBase400,
@@ -74,2 +85,3 @@ fontWeight: tokens.fontWeightMedium,
   title1: {
+    fontFamily: tokens.fontFamilyBase,
     fontSize: tokens.fontSizeHero800,
@@ -80,2 +92,3 @@ fontWeight: tokens.fontWeightSemibold,
   title2: {
+    fontFamily: tokens.fontFamilyBase,
     fontSize: tokens.fontSizeHero700,
@@ -86,2 +99,3 @@ fontWeight: tokens.fontWeightSemibold,
   title3: {
+    fontFamily: tokens.fontFamilyBase,
     fontSize: tokens.fontSizeBase600,
@@ -92,2 +106,3 @@ fontWeight: tokens.fontWeightSemibold,
   largeTitle: {
+    fontFamily: tokens.fontFamilyBase,
     fontSize: tokens.fontSizeHero900,
@@ -98,2 +113,3 @@ fontWeight: tokens.fontWeightSemibold,
   display: {
+    fontFamily: tokens.fontFamilyBase,
     fontSize: tokens.fontSizeHero1000,
@@ -100,0 +116,0 @@ fontWeight: tokens.fontWeightSemibold,

lib/index.d.ts

@@ -6,2 +6,2 @@ export * from './themes/index';
 export { typographyStyles } from './global/index';
-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, TypographyStyles, } from './types';
+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/tokens.js

@@ -691,4 +691,45 @@ export const tokens = {
   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

@@ -313,2 +313,3 @@ /**
 declare type TypographyStyle = {
+    fontFamily: string;
     fontSize: string;
@@ -350,2 +351,61 @@ fontWeight: 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;
+};
 /**
@@ -372,4 +432,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": "0.0.0-nightly-20220428-0420.1",
+  "version": "0.0.0-nightly-20220429-0418.1",
   "description": "Fluent UI themes",
@@ -5,0 +5,0 @@ "main": "lib-commonjs/index.js",

No alert changes

Improved metrics

Total package byte prevSize

886224

5.11%

Number of package files

229

8.53%

Lines of code

8288

6.86%

No dependency changes