@fluentui/react-theme 0.0.0-nightly906d31cfa320211115.1 → 0.0.0-nightlyc0273fdc6920211123.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.json CHANGED
@@ -2,16 +2,22 @@
2
2
  "name": "@fluentui/react-theme",
3
3
  "entries": [
4
4
  {
5
- "date": "Mon, 15 Nov 2021 04:16:28 GMT",
6
- "tag": "@fluentui/react-theme_v0.0.0-nightly906d31cfa320211115.1",
7
- "version": "0.0.0-nightly906d31cfa320211115.1",
5
+ "date": "Tue, 23 Nov 2021 04:19:32 GMT",
6
+ "tag": "@fluentui/react-theme_v0.0.0-nightlyc0273fdc6920211123.1",
7
+ "version": "0.0.0-nightlyc0273fdc6920211123.1",
8
8
  "comments": {
9
9
  "prerelease": [
10
10
  {
11
11
  "author": "email not defined",
12
12
  "package": "@fluentui/react-theme",
13
- "commit": "05edacbae8d85aa6b3d4164f9cd7d1465b47f246",
13
+ "commit": "ecb84838dc29fe424995bfc3c2983d3cd335936e",
14
14
  "comment": "Release nightly v9"
15
+ },
16
+ {
17
+ "author": "miroslav.stastny@microsoft.com",
18
+ "package": "@fluentui/react-theme",
19
+ "commit": "0a328c7a57bfa78ff9a4cd896f17e2887da64bec",
20
+ "comment": "feat(react-theme): update shadow design tokens"
15
21
  }
16
22
  ]
17
23
  }
package/CHANGELOG.md CHANGED
@@ -1,17 +1,18 @@
1
1
  # Change Log - @fluentui/react-theme
2
2
 
3
- This log was last generated on Mon, 15 Nov 2021 04:16:28 GMT and should not be manually modified.
3
+ This log was last generated on Tue, 23 Nov 2021 04:19:32 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly906d31cfa320211115.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-theme_v0.0.0-nightly906d31cfa320211115.1)
7
+ ## [0.0.0-nightlyc0273fdc6920211123.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-theme_v0.0.0-nightlyc0273fdc6920211123.1)
8
8
 
9
- Mon, 15 Nov 2021 04:16:28 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v9.0.0-beta.3..@fluentui/react-theme_v0.0.0-nightly906d31cfa320211115.1)
9
+ Tue, 23 Nov 2021 04:19:32 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-theme_v9.0.0-beta.3..@fluentui/react-theme_v0.0.0-nightlyc0273fdc6920211123.1)
11
11
 
12
12
  ### Changes
13
13
 
14
- - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/05edacbae8d85aa6b3d4164f9cd7d1465b47f246) by email not defined)
14
+ - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/ecb84838dc29fe424995bfc3c2983d3cd335936e) by email not defined)
15
+ - feat(react-theme): update shadow design tokens ([PR #20604](https://github.com/microsoft/fluentui/pull/20604) by miroslav.stastny@microsoft.com)
15
16
 
16
17
  ## [9.0.0-beta.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-theme_v9.0.0-beta.3)
17
18
 
@@ -320,6 +320,15 @@ export declare function mergeThemes(a: Theme | undefined, b: PartialTheme | Them
320
320
 
321
321
  export declare type PartialTheme = Partial<Theme>;
322
322
 
323
+ export declare type ShadowBrandTokens = {
324
+ shadow2Brand: string;
325
+ shadow4Brand: string;
326
+ shadow8Brand: string;
327
+ shadow16Brand: string;
328
+ shadow28Brand: string;
329
+ shadow64Brand: string;
330
+ };
331
+
323
332
  /**
324
333
  * Design tokens for shadow levels
325
334
  */
@@ -345,7 +354,7 @@ export declare const teamsHighContrastTheme: Theme;
345
354
 
346
355
  export declare const teamsLightTheme: Theme;
347
356
 
348
- export declare type Theme = FontSizeTokens & LineHeightTokens & BorderRadiusTokens & StrokeWidthTokens & ShadowTokens & FontFamilyTokens & FontWeightTokens & ColorPaletteTokens & ColorTokens;
357
+ export declare type Theme = FontSizeTokens & LineHeightTokens & BorderRadiusTokens & StrokeWidthTokens & ShadowTokens & ShadowBrandTokens & FontFamilyTokens & FontWeightTokens & ColorPaletteTokens & ColorTokens;
349
358
 
350
359
  export declare function themeToCSSVariables(theme: Theme): Record<string, string | number>;
351
360
 
package/lib/index.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  export * from './themes/index';
2
2
  export * from './utils/index';
3
- export type { BrandVariants, FontSizeTokens, FontWeightTokens, LineHeightTokens, BorderRadiusTokens, StrokeWidthTokens, ShadowTokens, FontFamilyTokens, ColorPaletteTokens, ColorTokens, PartialTheme, Theme, } from './types';
3
+ export type { BrandVariants, FontSizeTokens, FontWeightTokens, LineHeightTokens, BorderRadiusTokens, StrokeWidthTokens, ShadowTokens, ShadowBrandTokens, FontFamilyTokens, ColorPaletteTokens, ColorTokens, PartialTheme, Theme, } from './types';
package/lib/types.d.ts CHANGED
@@ -328,6 +328,14 @@ export declare type ShadowTokens = {
328
328
  shadow28: string;
329
329
  shadow64: string;
330
330
  };
331
+ export declare type ShadowBrandTokens = {
332
+ shadow2Brand: string;
333
+ shadow4Brand: string;
334
+ shadow8Brand: string;
335
+ shadow16Brand: string;
336
+ shadow28Brand: string;
337
+ shadow64Brand: string;
338
+ };
331
339
  export declare type GhostColorTokens = {
332
340
  ghostBackground: string;
333
341
  ghostBackgroundHover: string;
@@ -355,5 +363,5 @@ export declare type BrandColorTokens = {
355
363
  };
356
364
  export declare type Greys = 0 | 2 | 4 | 6 | 8 | 10 | 12 | 14 | 16 | 18 | 20 | 22 | 24 | 26 | 28 | 30 | 32 | 34 | 36 | 38 | 40 | 42 | 44 | 46 | 48 | 50 | 52 | 54 | 56 | 58 | 60 | 62 | 64 | 66 | 68 | 70 | 72 | 74 | 76 | 78 | 80 | 82 | 84 | 86 | 88 | 90 | 92 | 94 | 96 | 98 | 100;
357
365
  export declare type AlphaColors = 5 | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90;
358
- export declare type Theme = FontSizeTokens & LineHeightTokens & BorderRadiusTokens & StrokeWidthTokens & ShadowTokens & FontFamilyTokens & FontWeightTokens & ColorPaletteTokens & ColorTokens;
366
+ export declare type Theme = FontSizeTokens & LineHeightTokens & BorderRadiusTokens & StrokeWidthTokens & ShadowTokens & ShadowBrandTokens & FontFamilyTokens & FontWeightTokens & ColorPaletteTokens & ColorTokens;
359
367
  export declare type PartialTheme = Partial<Theme>;
@@ -11,7 +11,8 @@ export const createDarkTheme = brand => {
11
11
  ...strokeWidths,
12
12
  ...colorTokens,
13
13
  ...colorPaletteTokens,
14
- ...createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey)
14
+ ...createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey),
15
+ ...createShadowTokens(colorTokens.colorBrandShadowAmbient, colorTokens.colorBrandShadowKey, 'Brand')
15
16
  };
16
17
  };
17
18
  //# sourceMappingURL=createDarkTheme.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/utils/createDarkTheme.ts"],"names":[],"mappings":"AAAA,SAAS,kBAAT,EAA6B,mBAA7B,QAAwD,eAAxD;AACA,SAAS,YAAT,EAAuB,SAAvB,EAAkC,WAAlC,EAA+C,YAA/C,EAA6D,YAA7D,EAA2E,WAA3E,QAA8F,iBAA9F;AACA,SAAS,kBAAT,QAAmC,WAAnC;AAGA,OAAO,MAAM,eAAe,GAAoC,KAAK,IAAG;AACtE,QAAM,WAAW,GAAG,mBAAmB,CAAC,KAAD,CAAvC;AAEA,SAAO,EACL,GAAG,YADE;AAEL,OAAG,SAFE;AAGL,OAAG,WAHE;AAIL,OAAG,YAJE;AAKL,OAAG,WALE;AAML,OAAG,YANE;AAQL,OAAG,WARE;AASL,OAAG,kBATE;AAWL,OAAG,kBAAkB,CAAC,WAAW,CAAC,yBAAb,EAAwC,WAAW,CAAC,qBAApD;AAXhB,GAAP;AAaD,CAhBM","sourceRoot":""}
1
+ {"version":3,"sources":["../../src/utils/createDarkTheme.ts"],"names":[],"mappings":"AAAA,SAAS,kBAAT,EAA6B,mBAA7B,QAAwD,eAAxD;AACA,SAAS,YAAT,EAAuB,SAAvB,EAAkC,WAAlC,EAA+C,YAA/C,EAA6D,YAA7D,EAA2E,WAA3E,QAA8F,iBAA9F;AACA,SAAS,kBAAT,QAAmC,WAAnC;AAGA,OAAO,MAAM,eAAe,GAAoC,KAAK,IAAG;AACtE,QAAM,WAAW,GAAG,mBAAmB,CAAC,KAAD,CAAvC;AAEA,SAAO,EACL,GAAG,YADE;AAEL,OAAG,SAFE;AAGL,OAAG,WAHE;AAIL,OAAG,YAJE;AAKL,OAAG,WALE;AAML,OAAG,YANE;AAQL,OAAG,WARE;AASL,OAAG,kBATE;AAWL,OAAG,kBAAkB,CAAC,WAAW,CAAC,yBAAb,EAAwC,WAAW,CAAC,qBAApD,CAXhB;AAYL,OAAG,kBAAkB,CAAC,WAAW,CAAC,uBAAb,EAAsC,WAAW,CAAC,mBAAlD,EAAuE,OAAvE;AAZhB,GAAP;AAcD,CAjBM","sourceRoot":""}
@@ -11,7 +11,8 @@ export const createHighContrastTheme = () => {
11
11
  ...strokeWidths,
12
12
  ...colorTokens,
13
13
  ...colorPaletteTokens,
14
- ...createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey)
14
+ ...createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey),
15
+ ...createShadowTokens(colorTokens.colorBrandShadowAmbient, colorTokens.colorBrandShadowKey, 'Brand')
15
16
  };
16
17
  };
17
18
  //# sourceMappingURL=createHighContrastTheme.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/utils/createHighContrastTheme.ts"],"names":[],"mappings":"AAAA,SAAS,kBAAT,EAA6B,mBAA7B,QAAwD,uBAAxD;AACA,SAAS,YAAT,EAAuB,SAAvB,EAAkC,WAAlC,EAA+C,YAA/C,EAA6D,YAA7D,EAA2E,WAA3E,QAA8F,iBAA9F;AACA,SAAS,kBAAT,QAAmC,WAAnC;AAGA,OAAO,MAAM,uBAAuB,GAAG,MAAY;AACjD,QAAM,WAAW,GAAG,mBAAmB,EAAvC;AAEA,SAAO,EACL,GAAG,YADE;AAEL,OAAG,SAFE;AAGL,OAAG,WAHE;AAIL,OAAG,YAJE;AAKL,OAAG,WALE;AAML,OAAG,YANE;AAQL,OAAG,WARE;AASL,OAAG,kBATE;AAWL,OAAG,kBAAkB,CAAC,WAAW,CAAC,yBAAb,EAAwC,WAAW,CAAC,qBAApD;AAXhB,GAAP;AAaD,CAhBM","sourceRoot":""}
1
+ {"version":3,"sources":["../../src/utils/createHighContrastTheme.ts"],"names":[],"mappings":"AAAA,SAAS,kBAAT,EAA6B,mBAA7B,QAAwD,uBAAxD;AACA,SAAS,YAAT,EAAuB,SAAvB,EAAkC,WAAlC,EAA+C,YAA/C,EAA6D,YAA7D,EAA2E,WAA3E,QAA8F,iBAA9F;AACA,SAAS,kBAAT,QAAmC,WAAnC;AAGA,OAAO,MAAM,uBAAuB,GAAG,MAAY;AACjD,QAAM,WAAW,GAAG,mBAAmB,EAAvC;AAEA,SAAO,EACL,GAAG,YADE;AAEL,OAAG,SAFE;AAGL,OAAG,WAHE;AAIL,OAAG,YAJE;AAKL,OAAG,WALE;AAML,OAAG,YANE;AAQL,OAAG,WARE;AASL,OAAG,kBATE;AAWL,OAAG,kBAAkB,CAAC,WAAW,CAAC,yBAAb,EAAwC,WAAW,CAAC,qBAApD,CAXhB;AAYL,OAAG,kBAAkB,CAAC,WAAW,CAAC,uBAAb,EAAsC,WAAW,CAAC,mBAAlD,EAAuE,OAAvE;AAZhB,GAAP;AAcD,CAjBM","sourceRoot":""}
@@ -11,7 +11,8 @@ export const createLightTheme = brand => {
11
11
  ...strokeWidths,
12
12
  ...colorTokens,
13
13
  ...colorPaletteTokens,
14
- ...createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey)
14
+ ...createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey),
15
+ ...createShadowTokens(colorTokens.colorBrandShadowAmbient, colorTokens.colorBrandShadowKey, 'Brand')
15
16
  };
16
17
  };
17
18
  //# sourceMappingURL=createLightTheme.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/utils/createLightTheme.ts"],"names":[],"mappings":"AAAA,SAAS,kBAAT,EAA6B,mBAA7B,QAAwD,gBAAxD;AACA,SAAS,YAAT,EAAuB,SAAvB,EAAkC,WAAlC,EAA+C,YAA/C,EAA6D,YAA7D,EAA2E,WAA3E,QAA8F,iBAA9F;AACA,SAAS,kBAAT,QAAmC,WAAnC;AAGA,OAAO,MAAM,gBAAgB,GAAoC,KAAK,IAAG;AACvE,QAAM,WAAW,GAAG,mBAAmB,CAAC,KAAD,CAAvC;AAEA,SAAO,EACL,GAAG,YADE;AAEL,OAAG,SAFE;AAGL,OAAG,WAHE;AAIL,OAAG,YAJE;AAKL,OAAG,WALE;AAML,OAAG,YANE;AAQL,OAAG,WARE;AASL,OAAG,kBATE;AAWL,OAAG,kBAAkB,CAAC,WAAW,CAAC,yBAAb,EAAwC,WAAW,CAAC,qBAApD;AAXhB,GAAP;AAaD,CAhBM","sourceRoot":""}
1
+ {"version":3,"sources":["../../src/utils/createLightTheme.ts"],"names":[],"mappings":"AAAA,SAAS,kBAAT,EAA6B,mBAA7B,QAAwD,gBAAxD;AACA,SAAS,YAAT,EAAuB,SAAvB,EAAkC,WAAlC,EAA+C,YAA/C,EAA6D,YAA7D,EAA2E,WAA3E,QAA8F,iBAA9F;AACA,SAAS,kBAAT,QAAmC,WAAnC;AAGA,OAAO,MAAM,gBAAgB,GAAoC,KAAK,IAAG;AACvE,QAAM,WAAW,GAAG,mBAAmB,CAAC,KAAD,CAAvC;AAEA,SAAO,EACL,GAAG,YADE;AAEL,OAAG,SAFE;AAGL,OAAG,WAHE;AAIL,OAAG,YAJE;AAKL,OAAG,WALE;AAML,OAAG,YANE;AAQL,OAAG,WARE;AASL,OAAG,kBATE;AAWL,OAAG,kBAAkB,CAAC,WAAW,CAAC,yBAAb,EAAwC,WAAW,CAAC,qBAApD,CAXhB;AAYL,OAAG,kBAAkB,CAAC,WAAW,CAAC,uBAAb,EAAsC,WAAW,CAAC,mBAAlD,EAAuE,OAAvE;AAZhB,GAAP;AAcD,CAjBM","sourceRoot":""}
@@ -11,7 +11,8 @@ export const createTeamsDarkTheme = brand => {
11
11
  ...strokeWidths,
12
12
  ...colorTokens,
13
13
  ...colorPaletteTokens,
14
- ...createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey)
14
+ ...createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey),
15
+ ...createShadowTokens(colorTokens.colorBrandShadowAmbient, colorTokens.colorBrandShadowKey, 'Brand')
15
16
  };
16
17
  };
17
18
  //# sourceMappingURL=createTeamsDarkTheme.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/utils/createTeamsDarkTheme.ts"],"names":[],"mappings":"AAAA,SAAS,kBAAT,EAA6B,mBAA7B,QAAwD,oBAAxD;AACA,SAAS,YAAT,EAAuB,SAAvB,EAAkC,WAAlC,EAA+C,YAA/C,EAA6D,YAA7D,EAA2E,WAA3E,QAA8F,iBAA9F;AACA,SAAS,kBAAT,QAAmC,WAAnC;AAGA,OAAO,MAAM,oBAAoB,GAAoC,KAAK,IAAG;AAC3E,QAAM,WAAW,GAAG,mBAAmB,CAAC,KAAD,CAAvC;AAEA,SAAO,EACL,GAAG,YADE;AAEL,OAAG,SAFE;AAGL,OAAG,WAHE;AAIL,OAAG,YAJE;AAKL,OAAG,WALE;AAML,OAAG,YANE;AAQL,OAAG,WARE;AASL,OAAG,kBATE;AAWL,OAAG,kBAAkB,CAAC,WAAW,CAAC,yBAAb,EAAwC,WAAW,CAAC,qBAApD;AAXhB,GAAP;AAaD,CAhBM","sourceRoot":""}
1
+ {"version":3,"sources":["../../src/utils/createTeamsDarkTheme.ts"],"names":[],"mappings":"AAAA,SAAS,kBAAT,EAA6B,mBAA7B,QAAwD,oBAAxD;AACA,SAAS,YAAT,EAAuB,SAAvB,EAAkC,WAAlC,EAA+C,YAA/C,EAA6D,YAA7D,EAA2E,WAA3E,QAA8F,iBAA9F;AACA,SAAS,kBAAT,QAAmC,WAAnC;AAGA,OAAO,MAAM,oBAAoB,GAAoC,KAAK,IAAG;AAC3E,QAAM,WAAW,GAAG,mBAAmB,CAAC,KAAD,CAAvC;AAEA,SAAO,EACL,GAAG,YADE;AAEL,OAAG,SAFE;AAGL,OAAG,WAHE;AAIL,OAAG,YAJE;AAKL,OAAG,WALE;AAML,OAAG,YANE;AAQL,OAAG,WARE;AASL,OAAG,kBATE;AAWL,OAAG,kBAAkB,CAAC,WAAW,CAAC,yBAAb,EAAwC,WAAW,CAAC,qBAApD,CAXhB;AAYL,OAAG,kBAAkB,CAAC,WAAW,CAAC,uBAAb,EAAsC,WAAW,CAAC,mBAAlD,EAAuE,OAAvE;AAZhB,GAAP;AAcD,CAjBM","sourceRoot":""}
@@ -1,2 +1,3 @@
1
- import type { ShadowTokens } from '../types';
1
+ import type { ShadowBrandTokens, ShadowTokens } from '../types';
2
+ export declare function createShadowTokens(ambientColor: string, keyColor: string, tokenSuffix: 'Brand'): ShadowBrandTokens;
2
3
  export declare function createShadowTokens(ambientColor: string, keyColor: string): ShadowTokens;
@@ -1,11 +1,11 @@
1
- export function createShadowTokens(ambientColor, keyColor) {
1
+ export function createShadowTokens(ambientColor, keyColor, tokenSuffix = '') {
2
2
  return {
3
- shadow2: `0 0 2px ${ambientColor}, 0 1px 2px ${keyColor}`,
4
- shadow4: `0 0 2px ${ambientColor}, 0 2px 4px ${keyColor}`,
5
- shadow8: `0 0 2px ${ambientColor}, 0 4px 8px ${keyColor}`,
6
- shadow16: `0 0 2px ${ambientColor}, 0 6px 16px ${keyColor}`,
7
- shadow28: `0 0 8px ${ambientColor}, 0 14px 28px ${keyColor}`,
8
- shadow64: `0 0 8px ${ambientColor}, 0 32px 64px ${keyColor}`
3
+ [`shadow2${tokenSuffix}`]: `0 0 2px ${ambientColor}, 0 1px 2px ${keyColor}`,
4
+ [`shadow4${tokenSuffix}`]: `0 0 2px ${ambientColor}, 0 2px 4px ${keyColor}`,
5
+ [`shadow8${tokenSuffix}`]: `0 0 2px ${ambientColor}, 0 4px 8px ${keyColor}`,
6
+ [`shadow16${tokenSuffix}`]: `0 0 2px ${ambientColor}, 0 8px 16px ${keyColor}`,
7
+ [`shadow28${tokenSuffix}`]: `0 0 8px ${ambientColor}, 0 14px 28px ${keyColor}`,
8
+ [`shadow64${tokenSuffix}`]: `0 0 8px ${ambientColor}, 0 32px 64px ${keyColor}`
9
9
  };
10
10
  }
11
11
  //# sourceMappingURL=shadows.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/utils/shadows.ts"],"names":[],"mappings":"AAEA,OAAM,SAAU,kBAAV,CAA6B,YAA7B,EAAmD,QAAnD,EAAmE;AACvE,SAAO;AACL,IAAA,OAAO,EAAE,WAAW,YAAY,eAAe,QAAQ,EADlD;AAEL,IAAA,OAAO,EAAE,WAAW,YAAY,eAAe,QAAQ,EAFlD;AAGL,IAAA,OAAO,EAAE,WAAW,YAAY,eAAe,QAAQ,EAHlD;AAIL,IAAA,QAAQ,EAAE,WAAW,YAAY,gBAAgB,QAAQ,EAJpD;AAKL,IAAA,QAAQ,EAAE,WAAW,YAAY,iBAAiB,QAAQ,EALrD;AAML,IAAA,QAAQ,EAAE,WAAW,YAAY,iBAAiB,QAAQ;AANrD,GAAP;AAQD","sourceRoot":""}
1
+ {"version":3,"sources":["../../src/utils/shadows.ts"],"names":[],"mappings":"AAKA,OAAM,SAAU,kBAAV,CAA6B,YAA7B,EAAmD,QAAnD,EAAqE,WAAA,GAA4B,EAAjG,EAAmG;AACvG,SAAO;AACL,KAAC,UAAU,WAAW,EAAtB,GAA2B,WAAW,YAAY,eAAe,QAAQ,EADpE;AAEL,KAAC,UAAU,WAAW,EAAtB,GAA2B,WAAW,YAAY,eAAe,QAAQ,EAFpE;AAGL,KAAC,UAAU,WAAW,EAAtB,GAA2B,WAAW,YAAY,eAAe,QAAQ,EAHpE;AAIL,KAAC,WAAW,WAAW,EAAvB,GAA4B,WAAW,YAAY,gBAAgB,QAAQ,EAJtE;AAKL,KAAC,WAAW,WAAW,EAAvB,GAA4B,WAAW,YAAY,iBAAiB,QAAQ,EALvE;AAML,KAAC,WAAW,WAAW,EAAvB,GAA4B,WAAW,YAAY,iBAAiB,QAAQ;AANvE,GAAP;AAQD","sourceRoot":""}
@@ -1,3 +1,3 @@
1
1
  export * from './themes/index';
2
2
  export * from './utils/index';
3
- export type { BrandVariants, FontSizeTokens, FontWeightTokens, LineHeightTokens, BorderRadiusTokens, StrokeWidthTokens, ShadowTokens, FontFamilyTokens, ColorPaletteTokens, ColorTokens, PartialTheme, Theme, } from './types';
3
+ export type { BrandVariants, FontSizeTokens, FontWeightTokens, LineHeightTokens, BorderRadiusTokens, StrokeWidthTokens, ShadowTokens, ShadowBrandTokens, FontFamilyTokens, ColorPaletteTokens, ColorTokens, PartialTheme, Theme, } from './types';
@@ -328,6 +328,14 @@ export declare type ShadowTokens = {
328
328
  shadow28: string;
329
329
  shadow64: string;
330
330
  };
331
+ export declare type ShadowBrandTokens = {
332
+ shadow2Brand: string;
333
+ shadow4Brand: string;
334
+ shadow8Brand: string;
335
+ shadow16Brand: string;
336
+ shadow28Brand: string;
337
+ shadow64Brand: string;
338
+ };
331
339
  export declare type GhostColorTokens = {
332
340
  ghostBackground: string;
333
341
  ghostBackgroundHover: string;
@@ -355,5 +363,5 @@ export declare type BrandColorTokens = {
355
363
  };
356
364
  export declare type Greys = 0 | 2 | 4 | 6 | 8 | 10 | 12 | 14 | 16 | 18 | 20 | 22 | 24 | 26 | 28 | 30 | 32 | 34 | 36 | 38 | 40 | 42 | 44 | 46 | 48 | 50 | 52 | 54 | 56 | 58 | 60 | 62 | 64 | 66 | 68 | 70 | 72 | 74 | 76 | 78 | 80 | 82 | 84 | 86 | 88 | 90 | 92 | 94 | 96 | 98 | 100;
357
365
  export declare type AlphaColors = 5 | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90;
358
- export declare type Theme = FontSizeTokens & LineHeightTokens & BorderRadiusTokens & StrokeWidthTokens & ShadowTokens & FontFamilyTokens & FontWeightTokens & ColorPaletteTokens & ColorTokens;
366
+ export declare type Theme = FontSizeTokens & LineHeightTokens & BorderRadiusTokens & StrokeWidthTokens & ShadowTokens & ShadowBrandTokens & FontFamilyTokens & FontWeightTokens & ColorPaletteTokens & ColorTokens;
359
367
  export declare type PartialTheme = Partial<Theme>;
@@ -21,7 +21,8 @@ const createDarkTheme = brand => {
21
21
  ...index_1.strokeWidths,
22
22
  ...colorTokens,
23
23
  ...dark_1.colorPaletteTokens,
24
- ...shadows_1.createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey)
24
+ ...shadows_1.createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey),
25
+ ...shadows_1.createShadowTokens(colorTokens.colorBrandShadowAmbient, colorTokens.colorBrandShadowKey, 'Brand')
25
26
  };
26
27
  };
27
28
 
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/utils/createDarkTheme.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,MAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,MAAA,SAAA,gBAAA,OAAA,CAAA,WAAA,CAAA;;AAGO,MAAM,eAAe,GAAoC,KAAK,IAAG;AACtE,QAAM,WAAW,GAAG,MAAA,CAAA,mBAAA,CAAoB,KAApB,CAApB;AAEA,SAAO,EACL,GAAG,OAAA,CAAA,YADE;AAEL,OAAG,OAAA,CAAA,SAFE;AAGL,OAAG,OAAA,CAAA,WAHE;AAIL,OAAG,OAAA,CAAA,YAJE;AAKL,OAAG,OAAA,CAAA,WALE;AAML,OAAG,OAAA,CAAA,YANE;AAQL,OAAG,WARE;AASL,OAAG,MAAA,CAAA,kBATE;AAWL,OAAG,SAAA,CAAA,kBAAA,CAAmB,WAAW,CAAC,yBAA/B,EAA0D,WAAW,CAAC,qBAAtE;AAXE,GAAP;AAaD,CAhBM;;AAAM,OAAA,CAAA,eAAA,GAAe,eAAf","sourceRoot":""}
1
+ {"version":3,"sources":["../../src/utils/createDarkTheme.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,MAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,MAAA,SAAA,gBAAA,OAAA,CAAA,WAAA,CAAA;;AAGO,MAAM,eAAe,GAAoC,KAAK,IAAG;AACtE,QAAM,WAAW,GAAG,MAAA,CAAA,mBAAA,CAAoB,KAApB,CAApB;AAEA,SAAO,EACL,GAAG,OAAA,CAAA,YADE;AAEL,OAAG,OAAA,CAAA,SAFE;AAGL,OAAG,OAAA,CAAA,WAHE;AAIL,OAAG,OAAA,CAAA,YAJE;AAKL,OAAG,OAAA,CAAA,WALE;AAML,OAAG,OAAA,CAAA,YANE;AAQL,OAAG,WARE;AASL,OAAG,MAAA,CAAA,kBATE;AAWL,OAAG,SAAA,CAAA,kBAAA,CAAmB,WAAW,CAAC,yBAA/B,EAA0D,WAAW,CAAC,qBAAtE,CAXE;AAYL,OAAG,SAAA,CAAA,kBAAA,CAAmB,WAAW,CAAC,uBAA/B,EAAwD,WAAW,CAAC,mBAApE,EAAyF,OAAzF;AAZE,GAAP;AAcD,CAjBM;;AAAM,OAAA,CAAA,eAAA,GAAe,eAAf","sourceRoot":""}
@@ -21,7 +21,8 @@ const createHighContrastTheme = () => {
21
21
  ...index_1.strokeWidths,
22
22
  ...colorTokens,
23
23
  ...highContrast_1.colorPaletteTokens,
24
- ...shadows_1.createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey)
24
+ ...shadows_1.createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey),
25
+ ...shadows_1.createShadowTokens(colorTokens.colorBrandShadowAmbient, colorTokens.colorBrandShadowKey, 'Brand')
25
26
  };
26
27
  };
27
28
 
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/utils/createHighContrastTheme.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,cAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,MAAA,SAAA,gBAAA,OAAA,CAAA,WAAA,CAAA;;AAGO,MAAM,uBAAuB,GAAG,MAAY;AACjD,QAAM,WAAW,GAAG,cAAA,CAAA,mBAAA,EAApB;AAEA,SAAO,EACL,GAAG,OAAA,CAAA,YADE;AAEL,OAAG,OAAA,CAAA,SAFE;AAGL,OAAG,OAAA,CAAA,WAHE;AAIL,OAAG,OAAA,CAAA,YAJE;AAKL,OAAG,OAAA,CAAA,WALE;AAML,OAAG,OAAA,CAAA,YANE;AAQL,OAAG,WARE;AASL,OAAG,cAAA,CAAA,kBATE;AAWL,OAAG,SAAA,CAAA,kBAAA,CAAmB,WAAW,CAAC,yBAA/B,EAA0D,WAAW,CAAC,qBAAtE;AAXE,GAAP;AAaD,CAhBM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourceRoot":""}
1
+ {"version":3,"sources":["../../src/utils/createHighContrastTheme.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,cAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,MAAA,SAAA,gBAAA,OAAA,CAAA,WAAA,CAAA;;AAGO,MAAM,uBAAuB,GAAG,MAAY;AACjD,QAAM,WAAW,GAAG,cAAA,CAAA,mBAAA,EAApB;AAEA,SAAO,EACL,GAAG,OAAA,CAAA,YADE;AAEL,OAAG,OAAA,CAAA,SAFE;AAGL,OAAG,OAAA,CAAA,WAHE;AAIL,OAAG,OAAA,CAAA,YAJE;AAKL,OAAG,OAAA,CAAA,WALE;AAML,OAAG,OAAA,CAAA,YANE;AAQL,OAAG,WARE;AASL,OAAG,cAAA,CAAA,kBATE;AAWL,OAAG,SAAA,CAAA,kBAAA,CAAmB,WAAW,CAAC,yBAA/B,EAA0D,WAAW,CAAC,qBAAtE,CAXE;AAYL,OAAG,SAAA,CAAA,kBAAA,CAAmB,WAAW,CAAC,uBAA/B,EAAwD,WAAW,CAAC,mBAApE,EAAyF,OAAzF;AAZE,GAAP;AAcD,CAjBM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourceRoot":""}
@@ -21,7 +21,8 @@ const createLightTheme = brand => {
21
21
  ...index_1.strokeWidths,
22
22
  ...colorTokens,
23
23
  ...light_1.colorPaletteTokens,
24
- ...shadows_1.createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey)
24
+ ...shadows_1.createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey),
25
+ ...shadows_1.createShadowTokens(colorTokens.colorBrandShadowAmbient, colorTokens.colorBrandShadowKey, 'Brand')
25
26
  };
26
27
  };
27
28
 
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/utils/createLightTheme.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,MAAA,SAAA,gBAAA,OAAA,CAAA,WAAA,CAAA;;AAGO,MAAM,gBAAgB,GAAoC,KAAK,IAAG;AACvE,QAAM,WAAW,GAAG,OAAA,CAAA,mBAAA,CAAoB,KAApB,CAApB;AAEA,SAAO,EACL,GAAG,OAAA,CAAA,YADE;AAEL,OAAG,OAAA,CAAA,SAFE;AAGL,OAAG,OAAA,CAAA,WAHE;AAIL,OAAG,OAAA,CAAA,YAJE;AAKL,OAAG,OAAA,CAAA,WALE;AAML,OAAG,OAAA,CAAA,YANE;AAQL,OAAG,WARE;AASL,OAAG,OAAA,CAAA,kBATE;AAWL,OAAG,SAAA,CAAA,kBAAA,CAAmB,WAAW,CAAC,yBAA/B,EAA0D,WAAW,CAAC,qBAAtE;AAXE,GAAP;AAaD,CAhBM;;AAAM,OAAA,CAAA,gBAAA,GAAgB,gBAAhB","sourceRoot":""}
1
+ {"version":3,"sources":["../../src/utils/createLightTheme.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,MAAA,SAAA,gBAAA,OAAA,CAAA,WAAA,CAAA;;AAGO,MAAM,gBAAgB,GAAoC,KAAK,IAAG;AACvE,QAAM,WAAW,GAAG,OAAA,CAAA,mBAAA,CAAoB,KAApB,CAApB;AAEA,SAAO,EACL,GAAG,OAAA,CAAA,YADE;AAEL,OAAG,OAAA,CAAA,SAFE;AAGL,OAAG,OAAA,CAAA,WAHE;AAIL,OAAG,OAAA,CAAA,YAJE;AAKL,OAAG,OAAA,CAAA,WALE;AAML,OAAG,OAAA,CAAA,YANE;AAQL,OAAG,WARE;AASL,OAAG,OAAA,CAAA,kBATE;AAWL,OAAG,SAAA,CAAA,kBAAA,CAAmB,WAAW,CAAC,yBAA/B,EAA0D,WAAW,CAAC,qBAAtE,CAXE;AAYL,OAAG,SAAA,CAAA,kBAAA,CAAmB,WAAW,CAAC,uBAA/B,EAAwD,WAAW,CAAC,mBAApE,EAAyF,OAAzF;AAZE,GAAP;AAcD,CAjBM;;AAAM,OAAA,CAAA,gBAAA,GAAgB,gBAAhB","sourceRoot":""}
@@ -21,7 +21,8 @@ const createTeamsDarkTheme = brand => {
21
21
  ...index_1.strokeWidths,
22
22
  ...colorTokens,
23
23
  ...teamsDark_1.colorPaletteTokens,
24
- ...shadows_1.createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey)
24
+ ...shadows_1.createShadowTokens(colorTokens.colorNeutralShadowAmbient, colorTokens.colorNeutralShadowKey),
25
+ ...shadows_1.createShadowTokens(colorTokens.colorBrandShadowAmbient, colorTokens.colorBrandShadowKey, 'Brand')
25
26
  };
26
27
  };
27
28
 
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/utils/createTeamsDarkTheme.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,WAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,MAAA,SAAA,gBAAA,OAAA,CAAA,WAAA,CAAA;;AAGO,MAAM,oBAAoB,GAAoC,KAAK,IAAG;AAC3E,QAAM,WAAW,GAAG,WAAA,CAAA,mBAAA,CAAoB,KAApB,CAApB;AAEA,SAAO,EACL,GAAG,OAAA,CAAA,YADE;AAEL,OAAG,OAAA,CAAA,SAFE;AAGL,OAAG,OAAA,CAAA,WAHE;AAIL,OAAG,OAAA,CAAA,YAJE;AAKL,OAAG,OAAA,CAAA,WALE;AAML,OAAG,OAAA,CAAA,YANE;AAQL,OAAG,WARE;AASL,OAAG,WAAA,CAAA,kBATE;AAWL,OAAG,SAAA,CAAA,kBAAA,CAAmB,WAAW,CAAC,yBAA/B,EAA0D,WAAW,CAAC,qBAAtE;AAXE,GAAP;AAaD,CAhBM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","sourceRoot":""}
1
+ {"version":3,"sources":["../../src/utils/createTeamsDarkTheme.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,WAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,MAAA,SAAA,gBAAA,OAAA,CAAA,WAAA,CAAA;;AAGO,MAAM,oBAAoB,GAAoC,KAAK,IAAG;AAC3E,QAAM,WAAW,GAAG,WAAA,CAAA,mBAAA,CAAoB,KAApB,CAApB;AAEA,SAAO,EACL,GAAG,OAAA,CAAA,YADE;AAEL,OAAG,OAAA,CAAA,SAFE;AAGL,OAAG,OAAA,CAAA,WAHE;AAIL,OAAG,OAAA,CAAA,YAJE;AAKL,OAAG,OAAA,CAAA,WALE;AAML,OAAG,OAAA,CAAA,YANE;AAQL,OAAG,WARE;AASL,OAAG,WAAA,CAAA,kBATE;AAWL,OAAG,SAAA,CAAA,kBAAA,CAAmB,WAAW,CAAC,yBAA/B,EAA0D,WAAW,CAAC,qBAAtE,CAXE;AAYL,OAAG,SAAA,CAAA,kBAAA,CAAmB,WAAW,CAAC,uBAA/B,EAAwD,WAAW,CAAC,mBAApE,EAAyF,OAAzF;AAZE,GAAP;AAcD,CAjBM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","sourceRoot":""}
@@ -1,2 +1,3 @@
1
- import type { ShadowTokens } from '../types';
1
+ import type { ShadowBrandTokens, ShadowTokens } from '../types';
2
+ export declare function createShadowTokens(ambientColor: string, keyColor: string, tokenSuffix: 'Brand'): ShadowBrandTokens;
2
3
  export declare function createShadowTokens(ambientColor: string, keyColor: string): ShadowTokens;
@@ -5,14 +5,14 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.createShadowTokens = void 0;
7
7
 
8
- function createShadowTokens(ambientColor, keyColor) {
8
+ function createShadowTokens(ambientColor, keyColor, tokenSuffix = '') {
9
9
  return {
10
- shadow2: `0 0 2px ${ambientColor}, 0 1px 2px ${keyColor}`,
11
- shadow4: `0 0 2px ${ambientColor}, 0 2px 4px ${keyColor}`,
12
- shadow8: `0 0 2px ${ambientColor}, 0 4px 8px ${keyColor}`,
13
- shadow16: `0 0 2px ${ambientColor}, 0 6px 16px ${keyColor}`,
14
- shadow28: `0 0 8px ${ambientColor}, 0 14px 28px ${keyColor}`,
15
- shadow64: `0 0 8px ${ambientColor}, 0 32px 64px ${keyColor}`
10
+ [`shadow2${tokenSuffix}`]: `0 0 2px ${ambientColor}, 0 1px 2px ${keyColor}`,
11
+ [`shadow4${tokenSuffix}`]: `0 0 2px ${ambientColor}, 0 2px 4px ${keyColor}`,
12
+ [`shadow8${tokenSuffix}`]: `0 0 2px ${ambientColor}, 0 4px 8px ${keyColor}`,
13
+ [`shadow16${tokenSuffix}`]: `0 0 2px ${ambientColor}, 0 8px 16px ${keyColor}`,
14
+ [`shadow28${tokenSuffix}`]: `0 0 8px ${ambientColor}, 0 14px 28px ${keyColor}`,
15
+ [`shadow64${tokenSuffix}`]: `0 0 8px ${ambientColor}, 0 32px 64px ${keyColor}`
16
16
  };
17
17
  }
18
18
 
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/utils/shadows.ts"],"names":[],"mappings":";;;;;;;AAEA,SAAgB,kBAAhB,CAAmC,YAAnC,EAAyD,QAAzD,EAAyE;AACvE,SAAO;AACL,IAAA,OAAO,EAAE,WAAW,YAAY,eAAe,QAAQ,EADlD;AAEL,IAAA,OAAO,EAAE,WAAW,YAAY,eAAe,QAAQ,EAFlD;AAGL,IAAA,OAAO,EAAE,WAAW,YAAY,eAAe,QAAQ,EAHlD;AAIL,IAAA,QAAQ,EAAE,WAAW,YAAY,gBAAgB,QAAQ,EAJpD;AAKL,IAAA,QAAQ,EAAE,WAAW,YAAY,iBAAiB,QAAQ,EALrD;AAML,IAAA,QAAQ,EAAE,WAAW,YAAY,iBAAiB,QAAQ;AANrD,GAAP;AAQD;;AATD,OAAA,CAAA,kBAAA,GAAA,kBAAA","sourceRoot":""}
1
+ {"version":3,"sources":["../../src/utils/shadows.ts"],"names":[],"mappings":";;;;;;;AAKA,SAAgB,kBAAhB,CAAmC,YAAnC,EAAyD,QAAzD,EAA2E,WAAA,GAA4B,EAAvG,EAAyG;AACvG,SAAO;AACL,KAAC,UAAU,WAAW,EAAtB,GAA2B,WAAW,YAAY,eAAe,QAAQ,EADpE;AAEL,KAAC,UAAU,WAAW,EAAtB,GAA2B,WAAW,YAAY,eAAe,QAAQ,EAFpE;AAGL,KAAC,UAAU,WAAW,EAAtB,GAA2B,WAAW,YAAY,eAAe,QAAQ,EAHpE;AAIL,KAAC,WAAW,WAAW,EAAvB,GAA4B,WAAW,YAAY,gBAAgB,QAAQ,EAJtE;AAKL,KAAC,WAAW,WAAW,EAAvB,GAA4B,WAAW,YAAY,iBAAiB,QAAQ,EALvE;AAML,KAAC,WAAW,WAAW,EAAvB,GAA4B,WAAW,YAAY,iBAAiB,QAAQ;AANvE,GAAP;AAQD;;AATD,OAAA,CAAA,kBAAA,GAAA,kBAAA","sourceRoot":""}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-theme",
3
- "version": "0.0.0-nightly906d31cfa320211115.1",
3
+ "version": "0.0.0-nightlyc0273fdc6920211123.1",
4
4
  "description": "Fluent UI themes",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",