@fluentui/react-theme 0.0.0-nightlyfc5cfdc52420220215.1 → 0.0.0
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 +224 -6
- package/CHANGELOG.md +124 -42
- package/dist/index.d.ts +433 -0
- package/{lib → dist}/tsdoc-metadata.json +0 -0
- package/lib/alias/{dark.js → darkColor.js} +20 -31
- package/lib/alias/darkColor.js.map +1 -0
- package/lib/alias/darkColorPalette.js +33 -0
- package/lib/alias/darkColorPalette.js.map +1 -0
- package/lib/alias/{highContrast.js → highContrastColor.js} +8 -19
- package/lib/alias/highContrastColor.js.map +1 -0
- package/lib/alias/highContrastColorPalette.js +33 -0
- package/lib/alias/highContrastColorPalette.js.map +1 -0
- package/lib/alias/{light.js → lightColor.js} +9 -20
- package/lib/alias/lightColor.js.map +1 -0
- package/lib/alias/lightColorPalette.js +33 -0
- package/lib/alias/lightColorPalette.js.map +1 -0
- package/lib/alias/{teamsDark.js → teamsDarkColor.js} +20 -31
- package/lib/alias/teamsDarkColor.js.map +1 -0
- package/lib/alias/teamsDarkColorPalette.js +33 -0
- package/lib/alias/teamsDarkColorPalette.js.map +1 -0
- package/lib/global/borderRadius.js.map +1 -1
- package/lib/global/brandColors.js +16 -16
- package/lib/global/brandColors.js.map +1 -1
- package/lib/global/colors.js +45 -27
- package/lib/global/colors.js.map +1 -1
- package/lib/global/curves.js +12 -0
- package/lib/global/curves.js.map +1 -0
- package/lib/global/durations.js +10 -0
- package/lib/global/durations.js.map +1 -0
- package/lib/global/fonts.js.map +1 -1
- package/lib/global/index.js +5 -0
- package/lib/global/index.js.map +1 -1
- package/lib/global/spacings.js +40 -0
- package/lib/global/spacings.js.map +1 -0
- package/lib/global/strokeWidths.js.map +1 -1
- package/lib/global/typographyStyles.js +104 -0
- package/lib/global/typographyStyles.js.map +1 -0
- package/lib/index.js +3 -2
- package/lib/index.js.map +1 -1
- package/lib/themeToTokensObject.js.map +1 -1
- package/lib/themes/index.js.map +1 -1
- package/lib/themes/teams/darkTheme.js.map +1 -1
- package/lib/themes/teams/highContrastTheme.js.map +1 -1
- package/lib/themes/teams/index.js.map +1 -1
- package/lib/themes/teams/lightTheme.js.map +1 -1
- package/lib/themes/web/darkTheme.js.map +1 -1
- package/lib/themes/web/index.js +0 -1
- package/lib/themes/web/index.js.map +1 -1
- package/lib/themes/web/lightTheme.js.map +1 -1
- package/lib/tokens.js +116 -377
- package/lib/tokens.js.map +1 -1
- package/lib/types.js.map +1 -1
- package/lib/utils/createDarkTheme.js +9 -1
- package/lib/utils/createDarkTheme.js.map +1 -1
- package/lib/utils/createHighContrastTheme.js +9 -1
- package/lib/utils/createHighContrastTheme.js.map +1 -1
- package/lib/utils/createLightTheme.js +9 -1
- package/lib/utils/createLightTheme.js.map +1 -1
- package/lib/utils/createTeamsDarkTheme.js +9 -1
- package/lib/utils/createTeamsDarkTheme.js.map +1 -1
- package/lib/utils/index.js.map +1 -1
- package/lib/utils/shadows.js.map +1 -1
- package/lib-commonjs/alias/{dark.js → darkColor.js} +20 -31
- package/lib-commonjs/alias/darkColor.js.map +1 -0
- package/lib-commonjs/alias/darkColorPalette.js +41 -0
- package/lib-commonjs/alias/darkColorPalette.js.map +1 -0
- package/lib-commonjs/alias/{highContrast.js → highContrastColor.js} +8 -19
- package/lib-commonjs/alias/highContrastColor.js.map +1 -0
- package/lib-commonjs/alias/highContrastColorPalette.js +41 -0
- package/lib-commonjs/alias/highContrastColorPalette.js.map +1 -0
- package/lib-commonjs/alias/{light.js → lightColor.js} +9 -20
- package/lib-commonjs/alias/lightColor.js.map +1 -0
- package/lib-commonjs/alias/lightColorPalette.js +41 -0
- package/lib-commonjs/alias/lightColorPalette.js.map +1 -0
- package/lib-commonjs/alias/{teamsDark.js → teamsDarkColor.js} +20 -31
- package/lib-commonjs/alias/teamsDarkColor.js.map +1 -0
- package/lib-commonjs/alias/teamsDarkColorPalette.js +41 -0
- package/lib-commonjs/alias/teamsDarkColorPalette.js.map +1 -0
- package/lib-commonjs/global/borderRadius.js.map +1 -1
- package/lib-commonjs/global/brandColors.js +16 -16
- package/lib-commonjs/global/brandColors.js.map +1 -1
- package/lib-commonjs/global/colors.js +46 -28
- package/lib-commonjs/global/colors.js.map +1 -1
- package/lib-commonjs/global/curves.js +18 -0
- package/lib-commonjs/global/curves.js.map +1 -0
- package/lib-commonjs/global/durations.js +16 -0
- package/lib-commonjs/global/durations.js.map +1 -0
- package/lib-commonjs/global/fonts.js.map +1 -1
- package/lib-commonjs/global/index.js +10 -0
- package/lib-commonjs/global/index.js.map +1 -1
- package/lib-commonjs/global/spacings.js +46 -0
- package/lib-commonjs/global/spacings.js.map +1 -0
- package/lib-commonjs/global/strokeWidths.js.map +1 -1
- package/lib-commonjs/global/typographyStyles.js +112 -0
- package/lib-commonjs/global/typographyStyles.js.map +1 -0
- package/lib-commonjs/index.js +67 -4
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/themeToTokensObject.js.map +1 -1
- package/lib-commonjs/themes/index.js.map +1 -1
- package/lib-commonjs/themes/teams/darkTheme.js.map +1 -1
- package/lib-commonjs/themes/teams/highContrastTheme.js.map +1 -1
- package/lib-commonjs/themes/teams/index.js.map +1 -1
- package/lib-commonjs/themes/teams/lightTheme.js.map +1 -1
- package/lib-commonjs/themes/web/darkTheme.js.map +1 -1
- package/lib-commonjs/themes/web/index.js +0 -2
- package/lib-commonjs/themes/web/index.js.map +1 -1
- package/lib-commonjs/themes/web/lightTheme.js.map +1 -1
- package/lib-commonjs/tokens.js +116 -377
- package/lib-commonjs/tokens.js.map +1 -1
- package/lib-commonjs/types.js.map +1 -1
- package/lib-commonjs/utils/createDarkTheme.js +15 -3
- package/lib-commonjs/utils/createDarkTheme.js.map +1 -1
- package/lib-commonjs/utils/createHighContrastTheme.js +15 -3
- package/lib-commonjs/utils/createHighContrastTheme.js.map +1 -1
- package/lib-commonjs/utils/createLightTheme.js +15 -3
- package/lib-commonjs/utils/createLightTheme.js.map +1 -1
- package/lib-commonjs/utils/createTeamsDarkTheme.js +15 -3
- package/lib-commonjs/utils/createTeamsDarkTheme.js.map +1 -1
- package/lib-commonjs/utils/index.js.map +1 -1
- package/lib-commonjs/utils/shadows.js.map +1 -1
- package/package.json +14 -12
- package/dist/react-theme.d.ts +0 -358
- package/lib/alias/dark.d.ts +0 -3
- package/lib/alias/dark.js.map +0 -1
- package/lib/alias/highContrast.d.ts +0 -3
- package/lib/alias/highContrast.js.map +0 -1
- package/lib/alias/light.d.ts +0 -3
- package/lib/alias/light.js.map +0 -1
- package/lib/alias/teamsDark.d.ts +0 -3
- package/lib/alias/teamsDark.js.map +0 -1
- package/lib/global/borderRadius.d.ts +0 -2
- package/lib/global/brandColors.d.ts +0 -4
- package/lib/global/colors.d.ts +0 -15
- package/lib/global/fonts.d.ts +0 -5
- package/lib/global/index.d.ts +0 -4
- package/lib/global/strokeWidths.d.ts +0 -2
- package/lib/index.d.ts +0 -5
- package/lib/themeToTokensObject.d.ts +0 -10
- package/lib/themes/index.d.ts +0 -2
- package/lib/themes/teams/darkTheme.d.ts +0 -2
- package/lib/themes/teams/highContrastTheme.d.ts +0 -2
- package/lib/themes/teams/index.d.ts +0 -3
- package/lib/themes/teams/lightTheme.d.ts +0 -2
- package/lib/themes/web/darkTheme.d.ts +0 -2
- package/lib/themes/web/highContrastTheme.d.ts +0 -2
- package/lib/themes/web/highContrastTheme.js +0 -3
- package/lib/themes/web/highContrastTheme.js.map +0 -1
- package/lib/themes/web/index.d.ts +0 -3
- package/lib/themes/web/lightTheme.d.ts +0 -2
- package/lib/tokens.d.ts +0 -2
- package/lib/types.d.ts +0 -342
- package/lib/utils/createDarkTheme.d.ts +0 -2
- package/lib/utils/createHighContrastTheme.d.ts +0 -2
- package/lib/utils/createLightTheme.d.ts +0 -2
- package/lib/utils/createTeamsDarkTheme.d.ts +0 -2
- package/lib/utils/index.d.ts +0 -4
- package/lib/utils/shadows.d.ts +0 -3
- package/lib-commonjs/alias/dark.d.ts +0 -3
- package/lib-commonjs/alias/dark.js.map +0 -1
- package/lib-commonjs/alias/highContrast.d.ts +0 -3
- package/lib-commonjs/alias/highContrast.js.map +0 -1
- package/lib-commonjs/alias/light.d.ts +0 -3
- package/lib-commonjs/alias/light.js.map +0 -1
- package/lib-commonjs/alias/teamsDark.d.ts +0 -3
- package/lib-commonjs/alias/teamsDark.js.map +0 -1
- package/lib-commonjs/global/borderRadius.d.ts +0 -2
- package/lib-commonjs/global/brandColors.d.ts +0 -4
- package/lib-commonjs/global/colors.d.ts +0 -15
- package/lib-commonjs/global/fonts.d.ts +0 -5
- package/lib-commonjs/global/index.d.ts +0 -4
- package/lib-commonjs/global/strokeWidths.d.ts +0 -2
- package/lib-commonjs/index.d.ts +0 -5
- package/lib-commonjs/themeToTokensObject.d.ts +0 -10
- package/lib-commonjs/themes/index.d.ts +0 -2
- package/lib-commonjs/themes/teams/darkTheme.d.ts +0 -2
- package/lib-commonjs/themes/teams/highContrastTheme.d.ts +0 -2
- package/lib-commonjs/themes/teams/index.d.ts +0 -3
- package/lib-commonjs/themes/teams/lightTheme.d.ts +0 -2
- package/lib-commonjs/themes/web/darkTheme.d.ts +0 -2
- package/lib-commonjs/themes/web/highContrastTheme.d.ts +0 -2
- package/lib-commonjs/themes/web/highContrastTheme.js +0 -11
- package/lib-commonjs/themes/web/highContrastTheme.js.map +0 -1
- package/lib-commonjs/themes/web/index.d.ts +0 -3
- package/lib-commonjs/themes/web/lightTheme.d.ts +0 -2
- package/lib-commonjs/tokens.d.ts +0 -2
- package/lib-commonjs/types.d.ts +0 -342
- package/lib-commonjs/utils/createDarkTheme.d.ts +0 -2
- package/lib-commonjs/utils/createHighContrastTheme.d.ts +0 -2
- package/lib-commonjs/utils/createLightTheme.d.ts +0 -2
- package/lib-commonjs/utils/createTeamsDarkTheme.d.ts +0 -2
- package/lib-commonjs/utils/index.d.ts +0 -4
- package/lib-commonjs/utils/shadows.d.ts +0 -3
package/dist/index.d.ts
ADDED
@@ -0,0 +1,433 @@
|
|
1
|
+
export declare type BorderRadiusTokens = {
|
2
|
+
borderRadiusNone: string;
|
3
|
+
borderRadiusSmall: string;
|
4
|
+
borderRadiusMedium: string;
|
5
|
+
borderRadiusLarge: string;
|
6
|
+
borderRadiusXLarge: string;
|
7
|
+
borderRadiusCircular: string;
|
8
|
+
};
|
9
|
+
|
10
|
+
export declare type Brands = 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100 | 110 | 120 | 130 | 140 | 150 | 160;
|
11
|
+
|
12
|
+
export declare type BrandVariants = Record<Brands, string>;
|
13
|
+
|
14
|
+
export declare type ColorPaletteAnchor = 'colorPaletteAnchorBackground2' | 'colorPaletteAnchorForeground2' | 'colorPaletteAnchorBorderActive';
|
15
|
+
|
16
|
+
export declare type ColorPaletteBeige = 'colorPaletteBeigeBackground2' | 'colorPaletteBeigeForeground2' | 'colorPaletteBeigeBorderActive';
|
17
|
+
|
18
|
+
export declare type ColorPaletteBerry = 'colorPaletteBerryBackground1' | 'colorPaletteBerryBackground2' | 'colorPaletteBerryBackground3' | 'colorPaletteBerryForeground1' | 'colorPaletteBerryForeground2' | 'colorPaletteBerryForeground3' | 'colorPaletteBerryBorderActive' | 'colorPaletteBerryBorder1' | 'colorPaletteBerryBorder2';
|
19
|
+
|
20
|
+
export declare type ColorPaletteBlue = 'colorPaletteBlueBackground2' | 'colorPaletteBlueForeground2' | 'colorPaletteBlueBorderActive';
|
21
|
+
|
22
|
+
export declare type ColorPaletteBrass = 'colorPaletteBrassBackground2' | 'colorPaletteBrassForeground2' | 'colorPaletteBrassBorderActive';
|
23
|
+
|
24
|
+
export declare type ColorPaletteBrown = 'colorPaletteBrownBackground2' | 'colorPaletteBrownForeground2' | 'colorPaletteBrownBorderActive';
|
25
|
+
|
26
|
+
export declare type ColorPaletteCornflower = 'colorPaletteCornflowerBackground2' | 'colorPaletteCornflowerForeground2' | 'colorPaletteCornflowerBorderActive';
|
27
|
+
|
28
|
+
export declare type ColorPaletteCranberry = 'colorPaletteCranberryBackground2' | 'colorPaletteCranberryForeground2' | 'colorPaletteCranberryBorderActive';
|
29
|
+
|
30
|
+
export declare type ColorPaletteDarkGreen = 'colorPaletteDarkGreenBackground2' | 'colorPaletteDarkGreenForeground2' | 'colorPaletteDarkGreenBorderActive';
|
31
|
+
|
32
|
+
export declare type ColorPaletteDarkOrange = 'colorPaletteDarkOrangeBackground1' | 'colorPaletteDarkOrangeBackground2' | 'colorPaletteDarkOrangeBackground3' | 'colorPaletteDarkOrangeForeground1' | 'colorPaletteDarkOrangeForeground2' | 'colorPaletteDarkOrangeForeground3' | 'colorPaletteDarkOrangeBorderActive' | 'colorPaletteDarkOrangeBorder1' | 'colorPaletteDarkOrangeBorder2';
|
33
|
+
|
34
|
+
export declare type ColorPaletteDarkRed = 'colorPaletteDarkRedBackground2' | 'colorPaletteDarkRedForeground2' | 'colorPaletteDarkRedBorderActive';
|
35
|
+
|
36
|
+
export declare type ColorPaletteForest = 'colorPaletteForestBackground2' | 'colorPaletteForestForeground2' | 'colorPaletteForestBorderActive';
|
37
|
+
|
38
|
+
export declare type ColorPaletteGold = 'colorPaletteGoldBackground2' | 'colorPaletteGoldForeground2' | 'colorPaletteGoldBorderActive';
|
39
|
+
|
40
|
+
export declare type ColorPaletteGrape = 'colorPaletteGrapeBackground2' | 'colorPaletteGrapeForeground2' | 'colorPaletteGrapeBorderActive';
|
41
|
+
|
42
|
+
export declare type ColorPaletteGreen = 'colorPaletteGreenBackground1' | 'colorPaletteGreenBackground2' | 'colorPaletteGreenBackground3' | 'colorPaletteGreenForeground1' | 'colorPaletteGreenForeground2' | 'colorPaletteGreenForeground3' | 'colorPaletteGreenBorderActive' | 'colorPaletteGreenBorder1' | 'colorPaletteGreenBorder2';
|
43
|
+
|
44
|
+
export declare type ColorPaletteLavender = 'colorPaletteLavenderBackground2' | 'colorPaletteLavenderForeground2' | 'colorPaletteLavenderBorderActive';
|
45
|
+
|
46
|
+
export declare type ColorPaletteLightGreen = 'colorPaletteLightGreenBackground1' | 'colorPaletteLightGreenBackground2' | 'colorPaletteLightGreenBackground3' | 'colorPaletteLightGreenForeground1' | 'colorPaletteLightGreenForeground2' | 'colorPaletteLightGreenForeground3' | 'colorPaletteLightGreenBorderActive' | 'colorPaletteLightGreenBorder1' | 'colorPaletteLightGreenBorder2';
|
47
|
+
|
48
|
+
export declare type ColorPaletteLightTeal = 'colorPaletteLightTealBackground2' | 'colorPaletteLightTealForeground2' | 'colorPaletteLightTealBorderActive';
|
49
|
+
|
50
|
+
export declare type ColorPaletteLilac = 'colorPaletteLilacBackground2' | 'colorPaletteLilacForeground2' | 'colorPaletteLilacBorderActive';
|
51
|
+
|
52
|
+
export declare type ColorPaletteMagenta = 'colorPaletteMagentaBackground2' | 'colorPaletteMagentaForeground2' | 'colorPaletteMagentaBorderActive';
|
53
|
+
|
54
|
+
export declare type ColorPaletteMarigold = 'colorPaletteMarigoldBackground1' | 'colorPaletteMarigoldBackground2' | 'colorPaletteMarigoldBackground3' | 'colorPaletteMarigoldForeground1' | 'colorPaletteMarigoldForeground2' | 'colorPaletteMarigoldForeground3' | 'colorPaletteMarigoldBorderActive' | 'colorPaletteMarigoldBorder1' | 'colorPaletteMarigoldBorder2';
|
55
|
+
|
56
|
+
export declare type ColorPaletteMink = 'colorPaletteMinkBackground2' | 'colorPaletteMinkForeground2' | 'colorPaletteMinkBorderActive';
|
57
|
+
|
58
|
+
export declare type ColorPaletteNavy = 'colorPaletteNavyBackground2' | 'colorPaletteNavyForeground2' | 'colorPaletteNavyBorderActive';
|
59
|
+
|
60
|
+
export declare type ColorPalettePeach = 'colorPalettePeachBackground2' | 'colorPalettePeachForeground2' | 'colorPalettePeachBorderActive';
|
61
|
+
|
62
|
+
export declare type ColorPalettePink = 'colorPalettePinkBackground2' | 'colorPalettePinkForeground2' | 'colorPalettePinkBorderActive';
|
63
|
+
|
64
|
+
export declare type ColorPalettePlatinum = 'colorPalettePlatinumBackground2' | 'colorPalettePlatinumForeground2' | 'colorPalettePlatinumBorderActive';
|
65
|
+
|
66
|
+
export declare type ColorPalettePlum = 'colorPalettePlumBackground2' | 'colorPalettePlumForeground2' | 'colorPalettePlumBorderActive';
|
67
|
+
|
68
|
+
export declare type ColorPalettePumpkin = 'colorPalettePumpkinBackground2' | 'colorPalettePumpkinForeground2' | 'colorPalettePumpkinBorderActive';
|
69
|
+
|
70
|
+
export declare type ColorPalettePurple = 'colorPalettePurpleBackground2' | 'colorPalettePurpleForeground2' | 'colorPalettePurpleBorderActive';
|
71
|
+
|
72
|
+
export declare type ColorPaletteRed = 'colorPaletteRedBackground1' | 'colorPaletteRedBackground2' | 'colorPaletteRedBackground3' | 'colorPaletteRedForeground1' | 'colorPaletteRedForeground2' | 'colorPaletteRedForeground3' | 'colorPaletteRedBorderActive' | 'colorPaletteRedBorder1' | 'colorPaletteRedBorder2';
|
73
|
+
|
74
|
+
export declare type ColorPaletteRoyalBlue = 'colorPaletteRoyalBlueBackground2' | 'colorPaletteRoyalBlueForeground2' | 'colorPaletteRoyalBlueBorderActive';
|
75
|
+
|
76
|
+
export declare type ColorPaletteSeafoam = 'colorPaletteSeafoamBackground2' | 'colorPaletteSeafoamForeground2' | 'colorPaletteSeafoamBorderActive';
|
77
|
+
|
78
|
+
export declare type ColorPaletteSteel = 'colorPaletteSteelBackground2' | 'colorPaletteSteelForeground2' | 'colorPaletteSteelBorderActive';
|
79
|
+
|
80
|
+
export declare type ColorPaletteTeal = 'colorPaletteTealBackground2' | 'colorPaletteTealForeground2' | 'colorPaletteTealBorderActive';
|
81
|
+
|
82
|
+
export declare type ColorPaletteTokens = StatusColorPaletteTokens & PersonaColorPaletteTokens;
|
83
|
+
|
84
|
+
export declare type ColorPaletteYellow = 'colorPaletteYellowBackground1' | 'colorPaletteYellowBackground2' | 'colorPaletteYellowBackground3' | 'colorPaletteYellowForeground1' | 'colorPaletteYellowForeground2' | 'colorPaletteYellowForeground3' | 'colorPaletteYellowBorderActive' | 'colorPaletteYellowBorder1' | 'colorPaletteYellowBorder2';
|
85
|
+
|
86
|
+
/**
|
87
|
+
* Design tokens for alias colors
|
88
|
+
*/
|
89
|
+
export declare type ColorTokens = {
|
90
|
+
colorNeutralForeground1: string;
|
91
|
+
colorNeutralForeground1Hover: string;
|
92
|
+
colorNeutralForeground1Pressed: string;
|
93
|
+
colorNeutralForeground1Selected: string;
|
94
|
+
colorNeutralForeground2: string;
|
95
|
+
colorNeutralForeground2Hover: string;
|
96
|
+
colorNeutralForeground2Pressed: string;
|
97
|
+
colorNeutralForeground2Selected: string;
|
98
|
+
colorNeutralForeground2BrandHover: string;
|
99
|
+
colorNeutralForeground2BrandPressed: string;
|
100
|
+
colorNeutralForeground2BrandSelected: string;
|
101
|
+
colorNeutralForeground3: string;
|
102
|
+
colorNeutralForeground3Hover: string;
|
103
|
+
colorNeutralForeground3Pressed: string;
|
104
|
+
colorNeutralForeground3Selected: string;
|
105
|
+
colorNeutralForeground3BrandHover: string;
|
106
|
+
colorNeutralForeground3BrandPressed: string;
|
107
|
+
colorNeutralForeground3BrandSelected: string;
|
108
|
+
colorNeutralForeground4: string;
|
109
|
+
colorNeutralForegroundDisabled: string;
|
110
|
+
colorNeutralForegroundInvertedDisabled: string;
|
111
|
+
colorBrandForegroundLink: string;
|
112
|
+
colorBrandForegroundLinkHover: string;
|
113
|
+
colorBrandForegroundLinkPressed: string;
|
114
|
+
colorBrandForegroundLinkSelected: string;
|
115
|
+
colorNeutralForeground2Link: string;
|
116
|
+
colorNeutralForeground2LinkHover: string;
|
117
|
+
colorNeutralForeground2LinkPressed: string;
|
118
|
+
colorNeutralForeground2LinkSelected: string;
|
119
|
+
colorCompoundBrandForeground1: string;
|
120
|
+
colorCompoundBrandForeground1Hover: string;
|
121
|
+
colorCompoundBrandForeground1Pressed: string;
|
122
|
+
colorBrandForeground1: string;
|
123
|
+
colorBrandForeground2: string;
|
124
|
+
colorNeutralForeground1Static: string;
|
125
|
+
colorNeutralForegroundInverted: string;
|
126
|
+
colorNeutralForegroundInvertedHover: string;
|
127
|
+
colorNeutralForegroundInvertedPressed: string;
|
128
|
+
colorNeutralForegroundInvertedSelected: string;
|
129
|
+
colorNeutralForegroundOnBrand: string;
|
130
|
+
colorNeutralForegroundInvertedLink: string;
|
131
|
+
colorNeutralForegroundInvertedLinkHover: string;
|
132
|
+
colorNeutralForegroundInvertedLinkPressed: string;
|
133
|
+
colorNeutralForegroundInvertedLinkSelected: string;
|
134
|
+
colorBrandForegroundInverted: string;
|
135
|
+
colorBrandForegroundInvertedHover: string;
|
136
|
+
colorBrandForegroundInvertedPressed: string;
|
137
|
+
colorBrandForegroundOnLight: string;
|
138
|
+
colorBrandForegroundOnLightHover: string;
|
139
|
+
colorBrandForegroundOnLightPressed: string;
|
140
|
+
colorBrandForegroundOnLightSelected: string;
|
141
|
+
colorNeutralBackground1: string;
|
142
|
+
colorNeutralBackground1Hover: string;
|
143
|
+
colorNeutralBackground1Pressed: string;
|
144
|
+
colorNeutralBackground1Selected: string;
|
145
|
+
colorNeutralBackground2: string;
|
146
|
+
colorNeutralBackground2Hover: string;
|
147
|
+
colorNeutralBackground2Pressed: string;
|
148
|
+
colorNeutralBackground2Selected: string;
|
149
|
+
colorNeutralBackground3: string;
|
150
|
+
colorNeutralBackground3Hover: string;
|
151
|
+
colorNeutralBackground3Pressed: string;
|
152
|
+
colorNeutralBackground3Selected: string;
|
153
|
+
colorNeutralBackground4: string;
|
154
|
+
colorNeutralBackground4Hover: string;
|
155
|
+
colorNeutralBackground4Pressed: string;
|
156
|
+
colorNeutralBackground4Selected: string;
|
157
|
+
colorNeutralBackground5: string;
|
158
|
+
colorNeutralBackground5Hover: string;
|
159
|
+
colorNeutralBackground5Pressed: string;
|
160
|
+
colorNeutralBackground5Selected: string;
|
161
|
+
colorNeutralBackground6: string;
|
162
|
+
colorNeutralBackgroundInverted: string;
|
163
|
+
colorSubtleBackground: string;
|
164
|
+
colorSubtleBackgroundHover: string;
|
165
|
+
colorSubtleBackgroundPressed: string;
|
166
|
+
colorSubtleBackgroundSelected: string;
|
167
|
+
colorSubtleBackgroundLightAlphaHover: string;
|
168
|
+
colorSubtleBackgroundLightAlphaPressed: string;
|
169
|
+
colorSubtleBackgroundLightAlphaSelected: string;
|
170
|
+
colorSubtleBackgroundInverted: string;
|
171
|
+
colorSubtleBackgroundInvertedHover: string;
|
172
|
+
colorSubtleBackgroundInvertedPressed: string;
|
173
|
+
colorSubtleBackgroundInvertedSelected: string;
|
174
|
+
colorTransparentBackground: string;
|
175
|
+
colorTransparentBackgroundHover: string;
|
176
|
+
colorTransparentBackgroundPressed: string;
|
177
|
+
colorTransparentBackgroundSelected: string;
|
178
|
+
colorNeutralBackgroundDisabled: string;
|
179
|
+
colorNeutralBackgroundInvertedDisabled: string;
|
180
|
+
colorNeutralStencil1: string;
|
181
|
+
colorNeutralStencil2: string;
|
182
|
+
colorBackgroundOverlay: string;
|
183
|
+
colorScrollbarOverlay: string;
|
184
|
+
colorBrandBackground: string;
|
185
|
+
colorBrandBackgroundHover: string;
|
186
|
+
colorBrandBackgroundPressed: string;
|
187
|
+
colorBrandBackgroundSelected: string;
|
188
|
+
colorCompoundBrandBackground: string;
|
189
|
+
colorCompoundBrandBackgroundHover: string;
|
190
|
+
colorCompoundBrandBackgroundPressed: string;
|
191
|
+
colorBrandBackgroundStatic: string;
|
192
|
+
colorBrandBackground2: string;
|
193
|
+
colorBrandBackgroundInverted: string;
|
194
|
+
colorBrandBackgroundInvertedHover: string;
|
195
|
+
colorBrandBackgroundInvertedPressed: string;
|
196
|
+
colorBrandBackgroundInvertedSelected: string;
|
197
|
+
colorNeutralStrokeAccessible: string;
|
198
|
+
colorNeutralStrokeAccessibleHover: string;
|
199
|
+
colorNeutralStrokeAccessiblePressed: string;
|
200
|
+
colorNeutralStrokeAccessibleSelected: string;
|
201
|
+
colorNeutralStroke1: string;
|
202
|
+
colorNeutralStroke1Hover: string;
|
203
|
+
colorNeutralStroke1Pressed: string;
|
204
|
+
colorNeutralStroke1Selected: string;
|
205
|
+
colorNeutralStroke2: string;
|
206
|
+
colorNeutralStroke3: string;
|
207
|
+
colorNeutralStrokeOnBrand: string;
|
208
|
+
colorNeutralStrokeOnBrand2: string;
|
209
|
+
colorNeutralStrokeOnBrand2Hover: string;
|
210
|
+
colorNeutralStrokeOnBrand2Pressed: string;
|
211
|
+
colorNeutralStrokeOnBrand2Selected: string;
|
212
|
+
colorBrandStroke1: string;
|
213
|
+
colorBrandStroke2: string;
|
214
|
+
colorCompoundBrandStroke: string;
|
215
|
+
colorCompoundBrandStrokeHover: string;
|
216
|
+
colorCompoundBrandStrokePressed: string;
|
217
|
+
colorNeutralStrokeDisabled: string;
|
218
|
+
colorNeutralStrokeInvertedDisabled: string;
|
219
|
+
colorTransparentStroke: string;
|
220
|
+
colorTransparentStrokeInteractive: string;
|
221
|
+
colorTransparentStrokeDisabled: string;
|
222
|
+
colorStrokeFocus1: string;
|
223
|
+
colorStrokeFocus2: string;
|
224
|
+
colorNeutralShadowAmbient: string;
|
225
|
+
colorNeutralShadowKey: string;
|
226
|
+
colorNeutralShadowAmbientLighter: string;
|
227
|
+
colorNeutralShadowKeyLighter: string;
|
228
|
+
colorNeutralShadowAmbientDarker: string;
|
229
|
+
colorNeutralShadowKeyDarker: string;
|
230
|
+
colorBrandShadowAmbient: string;
|
231
|
+
colorBrandShadowKey: string;
|
232
|
+
};
|
233
|
+
|
234
|
+
export declare const createDarkTheme: (brand: BrandVariants) => Theme;
|
235
|
+
|
236
|
+
export declare const createHighContrastTheme: () => Theme;
|
237
|
+
|
238
|
+
export declare const createLightTheme: (brand: BrandVariants) => Theme;
|
239
|
+
|
240
|
+
export declare const createTeamsDarkTheme: (brand: BrandVariants) => Theme;
|
241
|
+
|
242
|
+
export declare type CurveTokens = {
|
243
|
+
curveAccelerateMax: string;
|
244
|
+
curveAccelerateMid: string;
|
245
|
+
curveAccelerateMin: string;
|
246
|
+
curveDecelerateMax: string;
|
247
|
+
curveDecelerateMid: string;
|
248
|
+
curveDecelerateMin: string;
|
249
|
+
curveEasyEaseMax: string;
|
250
|
+
curveEasyEase: string;
|
251
|
+
curveLinear: string;
|
252
|
+
};
|
253
|
+
|
254
|
+
export declare type DurationTokens = {
|
255
|
+
durationUltraFast: string;
|
256
|
+
durationFaster: string;
|
257
|
+
durationFast: string;
|
258
|
+
durationNormal: string;
|
259
|
+
durationSlow: string;
|
260
|
+
durationSlower: string;
|
261
|
+
durationUltraSlow: string;
|
262
|
+
};
|
263
|
+
|
264
|
+
export declare type FontFamilyTokens = {
|
265
|
+
fontFamilyBase: string;
|
266
|
+
fontFamilyMonospace: string;
|
267
|
+
fontFamilyNumeric: string;
|
268
|
+
};
|
269
|
+
|
270
|
+
export declare type FontSizeTokens = {
|
271
|
+
fontSizeBase100: string;
|
272
|
+
fontSizeBase200: string;
|
273
|
+
fontSizeBase300: string;
|
274
|
+
fontSizeBase400: string;
|
275
|
+
fontSizeBase500: string;
|
276
|
+
fontSizeBase600: string;
|
277
|
+
fontSizeHero700: string;
|
278
|
+
fontSizeHero800: string;
|
279
|
+
fontSizeHero900: string;
|
280
|
+
fontSizeHero1000: string;
|
281
|
+
};
|
282
|
+
|
283
|
+
export declare type FontWeightTokens = {
|
284
|
+
fontWeightRegular: number;
|
285
|
+
fontWeightMedium: number;
|
286
|
+
fontWeightSemibold: number;
|
287
|
+
};
|
288
|
+
|
289
|
+
export declare type HorizontalSpacingTokens = {
|
290
|
+
spacingHorizontalNone: string;
|
291
|
+
spacingHorizontalXXS: string;
|
292
|
+
spacingHorizontalXS: string;
|
293
|
+
spacingHorizontalSNudge: string;
|
294
|
+
spacingHorizontalS: string;
|
295
|
+
spacingHorizontalMNudge: string;
|
296
|
+
spacingHorizontalM: string;
|
297
|
+
spacingHorizontalL: string;
|
298
|
+
spacingHorizontalXL: string;
|
299
|
+
spacingHorizontalXXL: string;
|
300
|
+
spacingHorizontalXXXL: string;
|
301
|
+
};
|
302
|
+
|
303
|
+
export declare type LineHeightTokens = {
|
304
|
+
lineHeightBase100: string;
|
305
|
+
lineHeightBase200: string;
|
306
|
+
lineHeightBase300: string;
|
307
|
+
lineHeightBase400: string;
|
308
|
+
lineHeightBase500: string;
|
309
|
+
lineHeightBase600: string;
|
310
|
+
lineHeightHero700: string;
|
311
|
+
lineHeightHero800: string;
|
312
|
+
lineHeightHero900: string;
|
313
|
+
lineHeightHero1000: string;
|
314
|
+
};
|
315
|
+
|
316
|
+
export declare type PartialTheme = Partial<Theme>;
|
317
|
+
|
318
|
+
declare type PersonaColorPaletteTokens = Record<ColorPaletteDarkRed | ColorPaletteCranberry | ColorPalettePumpkin | ColorPalettePeach | ColorPaletteGold | ColorPaletteBrass | ColorPaletteBrown | ColorPaletteForest | ColorPaletteSeafoam | ColorPaletteDarkGreen | ColorPaletteLightTeal | ColorPaletteTeal | ColorPaletteSteel | ColorPaletteBlue | ColorPaletteRoyalBlue | ColorPaletteCornflower | ColorPaletteNavy | ColorPaletteLavender | ColorPalettePurple | ColorPaletteGrape | ColorPaletteLilac | ColorPalettePink | ColorPaletteMagenta | ColorPalettePlum | ColorPaletteBeige | ColorPaletteMink | ColorPalettePlatinum | ColorPaletteAnchor, string>;
|
319
|
+
|
320
|
+
export declare type ShadowBrandTokens = {
|
321
|
+
shadow2Brand: string;
|
322
|
+
shadow4Brand: string;
|
323
|
+
shadow8Brand: string;
|
324
|
+
shadow16Brand: string;
|
325
|
+
shadow28Brand: string;
|
326
|
+
shadow64Brand: string;
|
327
|
+
};
|
328
|
+
|
329
|
+
/**
|
330
|
+
* Design tokens for shadow levels
|
331
|
+
*/
|
332
|
+
export declare type ShadowTokens = {
|
333
|
+
shadow2: string;
|
334
|
+
shadow4: string;
|
335
|
+
shadow8: string;
|
336
|
+
shadow16: string;
|
337
|
+
shadow28: string;
|
338
|
+
shadow64: string;
|
339
|
+
};
|
340
|
+
|
341
|
+
export declare type SpacingTokens = {
|
342
|
+
none: string;
|
343
|
+
xxs: string;
|
344
|
+
xs: string;
|
345
|
+
sNudge: string;
|
346
|
+
s: string;
|
347
|
+
mNudge: string;
|
348
|
+
m: string;
|
349
|
+
l: string;
|
350
|
+
xl: string;
|
351
|
+
xxl: string;
|
352
|
+
xxxl: string;
|
353
|
+
};
|
354
|
+
|
355
|
+
declare type StatusColorPaletteTokens = Record<ColorPaletteRed | ColorPaletteGreen | ColorPaletteDarkOrange | ColorPaletteYellow | ColorPaletteBerry | ColorPaletteMarigold | ColorPaletteLightGreen, string>;
|
356
|
+
|
357
|
+
export declare type StrokeWidthTokens = {
|
358
|
+
strokeWidthThin: string;
|
359
|
+
strokeWidthThick: string;
|
360
|
+
strokeWidthThicker: string;
|
361
|
+
strokeWidthThickest: string;
|
362
|
+
};
|
363
|
+
|
364
|
+
export declare const teamsDarkTheme: Theme;
|
365
|
+
|
366
|
+
export declare const teamsHighContrastTheme: Theme;
|
367
|
+
|
368
|
+
export declare const teamsLightTheme: Theme;
|
369
|
+
|
370
|
+
export declare type Theme = FontSizeTokens & LineHeightTokens & BorderRadiusTokens & StrokeWidthTokens & HorizontalSpacingTokens & VerticalSpacingTokens & DurationTokens & CurveTokens & ShadowTokens & ShadowBrandTokens & FontFamilyTokens & FontWeightTokens & ColorPaletteTokens & ColorTokens;
|
371
|
+
|
372
|
+
/**
|
373
|
+
* Programmatically generates a tokens to css variables mapping object from the keys in a theme.
|
374
|
+
* This helps with ease of use as a user of a custom theme does not have to manually construct this object, but it could
|
375
|
+
* affect tree-shaking since bundlers do not know the shape of the output.
|
376
|
+
*
|
377
|
+
* @param theme - Theme from which to get the keys to generate the tokens to css variables mapping object
|
378
|
+
* @returns Tokens to css variables mapping object corresponding to the passed theme
|
379
|
+
*/
|
380
|
+
export declare function themeToTokensObject<TTheme extends Theme>(theme: TTheme): Record<keyof TTheme, string>;
|
381
|
+
|
382
|
+
export declare const tokens: Record<keyof Theme, string>;
|
383
|
+
|
384
|
+
export declare type TypographyStyle = {
|
385
|
+
fontFamily: string;
|
386
|
+
fontSize: string;
|
387
|
+
fontWeight: string;
|
388
|
+
lineHeight: string;
|
389
|
+
};
|
390
|
+
|
391
|
+
export declare type TypographyStyles = {
|
392
|
+
body1: TypographyStyle;
|
393
|
+
body1Strong: TypographyStyle;
|
394
|
+
body1Stronger: TypographyStyle;
|
395
|
+
caption1: TypographyStyle;
|
396
|
+
caption1Strong: TypographyStyle;
|
397
|
+
caption1Stronger: TypographyStyle;
|
398
|
+
caption2: TypographyStyle;
|
399
|
+
caption2Strong: TypographyStyle;
|
400
|
+
subtitle1: TypographyStyle;
|
401
|
+
subtitle2: TypographyStyle;
|
402
|
+
subtitle2Stronger: TypographyStyle;
|
403
|
+
title1: TypographyStyle;
|
404
|
+
title2: TypographyStyle;
|
405
|
+
title3: TypographyStyle;
|
406
|
+
largeTitle: TypographyStyle;
|
407
|
+
display: TypographyStyle;
|
408
|
+
};
|
409
|
+
|
410
|
+
/**
|
411
|
+
* Global typography styles (fontSize, fontWeight, and lineHeight)
|
412
|
+
*/
|
413
|
+
export declare const typographyStyles: TypographyStyles;
|
414
|
+
|
415
|
+
export declare type VerticalSpacingTokens = {
|
416
|
+
spacingVerticalNone: string;
|
417
|
+
spacingVerticalXXS: string;
|
418
|
+
spacingVerticalXS: string;
|
419
|
+
spacingVerticalSNudge: string;
|
420
|
+
spacingVerticalS: string;
|
421
|
+
spacingVerticalMNudge: string;
|
422
|
+
spacingVerticalM: string;
|
423
|
+
spacingVerticalL: string;
|
424
|
+
spacingVerticalXL: string;
|
425
|
+
spacingVerticalXXL: string;
|
426
|
+
spacingVerticalXXXL: string;
|
427
|
+
};
|
428
|
+
|
429
|
+
export declare const webDarkTheme: Theme;
|
430
|
+
|
431
|
+
export declare const webLightTheme: Theme;
|
432
|
+
|
433
|
+
export { }
|
File without changes
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { black, blackAlpha, grey, white, whiteAlpha
|
1
|
+
import { black, blackAlpha, grey, grey14Alpha, white, whiteAlpha } from '../global/colors';
|
2
2
|
export const generateColorTokens = brand => ({
|
3
3
|
colorNeutralForeground1: white,
|
4
4
|
colorNeutralForeground1Hover: white,
|
@@ -21,13 +21,17 @@ export const generateColorTokens = brand => ({
|
|
21
21
|
colorNeutralForeground4: grey[60],
|
22
22
|
colorNeutralForegroundDisabled: grey[36],
|
23
23
|
colorNeutralForegroundInvertedDisabled: whiteAlpha[40],
|
24
|
-
colorBrandForegroundLink: brand[
|
24
|
+
colorBrandForegroundLink: brand[100],
|
25
25
|
colorBrandForegroundLinkHover: brand[110],
|
26
|
-
colorBrandForegroundLinkPressed: brand[
|
27
|
-
colorBrandForegroundLinkSelected: brand[
|
28
|
-
|
29
|
-
|
30
|
-
|
26
|
+
colorBrandForegroundLinkPressed: brand[90],
|
27
|
+
colorBrandForegroundLinkSelected: brand[100],
|
28
|
+
colorNeutralForeground2Link: grey[84],
|
29
|
+
colorNeutralForeground2LinkHover: white,
|
30
|
+
colorNeutralForeground2LinkPressed: white,
|
31
|
+
colorNeutralForeground2LinkSelected: white,
|
32
|
+
colorCompoundBrandForeground1: brand[100],
|
33
|
+
colorCompoundBrandForeground1Hover: brand[110],
|
34
|
+
colorCompoundBrandForeground1Pressed: brand[90],
|
31
35
|
colorBrandForeground1: brand[100],
|
32
36
|
colorBrandForeground2: brand[110],
|
33
37
|
colorNeutralForeground1Static: grey[14],
|
@@ -73,8 +77,8 @@ export const generateColorTokens = brand => ({
|
|
73
77
|
colorSubtleBackgroundHover: grey[22],
|
74
78
|
colorSubtleBackgroundPressed: grey[18],
|
75
79
|
colorSubtleBackgroundSelected: grey[20],
|
76
|
-
colorSubtleBackgroundLightAlphaHover:
|
77
|
-
colorSubtleBackgroundLightAlphaPressed:
|
80
|
+
colorSubtleBackgroundLightAlphaHover: grey14Alpha[80],
|
81
|
+
colorSubtleBackgroundLightAlphaPressed: grey14Alpha[50],
|
78
82
|
colorSubtleBackgroundLightAlphaSelected: 'transparent',
|
79
83
|
colorSubtleBackgroundInverted: 'transparent',
|
80
84
|
colorSubtleBackgroundInvertedHover: blackAlpha[10],
|
@@ -88,13 +92,15 @@ export const generateColorTokens = brand => ({
|
|
88
92
|
colorNeutralBackgroundInvertedDisabled: whiteAlpha[10],
|
89
93
|
colorNeutralStencil1: grey[34],
|
90
94
|
colorNeutralStencil2: grey[20],
|
95
|
+
colorBackgroundOverlay: blackAlpha[50],
|
96
|
+
colorScrollbarOverlay: whiteAlpha[60],
|
91
97
|
colorBrandBackground: brand[70],
|
92
98
|
colorBrandBackgroundHover: brand[80],
|
93
99
|
colorBrandBackgroundPressed: brand[40],
|
94
100
|
colorBrandBackgroundSelected: brand[60],
|
95
|
-
colorCompoundBrandBackground: brand[
|
96
|
-
colorCompoundBrandBackgroundHover: brand[
|
97
|
-
colorCompoundBrandBackgroundPressed: brand[
|
101
|
+
colorCompoundBrandBackground: brand[100],
|
102
|
+
colorCompoundBrandBackgroundHover: brand[110],
|
103
|
+
colorCompoundBrandBackgroundPressed: brand[90],
|
98
104
|
colorBrandBackgroundStatic: brand[80],
|
99
105
|
colorBrandBackground2: brand[40],
|
100
106
|
colorBrandBackgroundInverted: white,
|
@@ -116,7 +122,7 @@ export const generateColorTokens = brand => ({
|
|
116
122
|
colorNeutralStrokeOnBrand2Hover: white,
|
117
123
|
colorNeutralStrokeOnBrand2Pressed: white,
|
118
124
|
colorNeutralStrokeOnBrand2Selected: white,
|
119
|
-
colorBrandStroke1: brand[
|
125
|
+
colorBrandStroke1: brand[100],
|
120
126
|
colorBrandStroke2: brand[50],
|
121
127
|
colorCompoundBrandStroke: brand[90],
|
122
128
|
colorCompoundBrandStrokeHover: brand[100],
|
@@ -138,21 +144,4 @@ export const generateColorTokens = brand => ({
|
|
138
144
|
colorBrandShadowKey: 'rgba(0,0,0,0.25)' // rgba(0,0,0,0.25) undefined
|
139
145
|
|
140
146
|
});
|
141
|
-
|
142
|
-
const color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1);
|
143
|
-
const sharedColorTokens = {
|
144
|
-
[`colorPalette${color}Background1`]: sharedColors[sharedColor].shade40,
|
145
|
-
[`colorPalette${color}Background2`]: sharedColors[sharedColor].shade30,
|
146
|
-
[`colorPalette${color}Background3`]: sharedColors[sharedColor].primary,
|
147
|
-
[`colorPalette${color}Foreground1`]: sharedColors[sharedColor].tint30,
|
148
|
-
[`colorPalette${color}Foreground2`]: sharedColors[sharedColor].tint40,
|
149
|
-
[`colorPalette${color}Foreground3`]: sharedColors[sharedColor].tint20,
|
150
|
-
[`colorPalette${color}BorderActive`]: sharedColors[sharedColor].tint30,
|
151
|
-
[`colorPalette${color}Border1`]: sharedColors[sharedColor].primary,
|
152
|
-
[`colorPalette${color}Border2`]: sharedColors[sharedColor].tint20
|
153
|
-
};
|
154
|
-
return { ...acc,
|
155
|
-
...sharedColorTokens
|
156
|
-
};
|
157
|
-
}, {});
|
158
|
-
//# sourceMappingURL=dark.js.map
|
147
|
+
//# sourceMappingURL=darkColor.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["alias/darkColor.ts"],"names":[],"mappings":"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","sourcesContent":["import { black, blackAlpha, grey, grey14Alpha, white, whiteAlpha } from '../global/colors';\nimport type { BrandVariants, ColorTokens } from '../types';\n\nexport const generateColorTokens = (brand: BrandVariants): ColorTokens => ({\n colorNeutralForeground1: white, // #ffffff Global.Color.White\n colorNeutralForeground1Hover: white, // #ffffff Global.Color.White\n colorNeutralForeground1Pressed: white, // #ffffff Global.Color.White\n colorNeutralForeground1Selected: white, // #ffffff Global.Color.White\n colorNeutralForeground2: grey[84], // #d6d6d6 Global.Color.Grey.84\n colorNeutralForeground2Hover: white, // #ffffff Global.Color.White\n colorNeutralForeground2Pressed: white, // #ffffff Global.Color.White\n colorNeutralForeground2Selected: white, // #ffffff Global.Color.White\n colorNeutralForeground2BrandHover: brand[100], // #2899f5 Global.Color.Brand.100\n colorNeutralForeground2BrandPressed: brand[90], // #1890f1 Global.Color.Brand.90\n colorNeutralForeground2BrandSelected: brand[100], // #2899f5 Global.Color.Brand.100\n colorNeutralForeground3: grey[68], // #adadad Global.Color.Grey.68\n colorNeutralForeground3Hover: grey[84], // #d6d6d6 Global.Color.Grey.84\n colorNeutralForeground3Pressed: grey[84], // #d6d6d6 Global.Color.Grey.84\n colorNeutralForeground3Selected: grey[84], // #d6d6d6 Global.Color.Grey.84\n colorNeutralForeground3BrandHover: brand[100], // #2899f5 Global.Color.Brand.100\n colorNeutralForeground3BrandPressed: brand[90], // #1890f1 Global.Color.Brand.90\n colorNeutralForeground3BrandSelected: brand[100], // #2899f5 Global.Color.Brand.100\n colorNeutralForeground4: grey[60], // #999999 Global.Color.Grey.60\n colorNeutralForegroundDisabled: grey[36], // #5c5c5c Global.Color.Grey.36\n colorNeutralForegroundInvertedDisabled: whiteAlpha[40], // rgba(255, 255, 255, 0.4) Global.Color.WhiteAlpha.40\n colorBrandForegroundLink: brand[100], // #2899f5 Global.Color.Brand.100\n colorBrandForegroundLinkHover: brand[110], // #3aa0f3 Global.Color.Brand.110\n colorBrandForegroundLinkPressed: brand[90], // #1890f1 Global.Color.Brand.90\n colorBrandForegroundLinkSelected: brand[100], // #2899f5 Global.Color.Brand.100\n colorNeutralForeground2Link: grey[84], // #d6d6d6 Global.Color.Grey.84\n colorNeutralForeground2LinkHover: white, // #ffffff Global.Color.White\n colorNeutralForeground2LinkPressed: white, // #ffffff Global.Color.White\n colorNeutralForeground2LinkSelected: white, // #ffffff Global.Color.White\n colorCompoundBrandForeground1: brand[100], // #2899f5 Global.Color.Brand.100\n colorCompoundBrandForeground1Hover: brand[110], // #3aa0f3 Global.Color.Brand.110\n colorCompoundBrandForeground1Pressed: brand[90], // #1890f1 Global.Color.Brand.90\n colorBrandForeground1: brand[100], // #2899f5 Global.Color.Brand.100\n colorBrandForeground2: brand[110], // #3aa0f3 Global.Color.Brand.110\n colorNeutralForeground1Static: grey[14], // #242424 Global.Color.Grey.14\n colorNeutralForegroundInverted: white, // #ffffff Global.Color.White\n colorNeutralForegroundInvertedHover: white, // #ffffff Global.Color.White\n colorNeutralForegroundInvertedPressed: white, // #ffffff Global.Color.White\n colorNeutralForegroundInvertedSelected: white, // #ffffff Global.Color.White\n colorNeutralForegroundOnBrand: white, // #ffffff Global.Color.White\n colorNeutralForegroundInvertedLink: white, // #ffffff Global.Color.White\n colorNeutralForegroundInvertedLinkHover: white, // #ffffff Global.Color.White\n colorNeutralForegroundInvertedLinkPressed: white, // #ffffff Global.Color.White\n colorNeutralForegroundInvertedLinkSelected: white, // #ffffff Global.Color.White\n colorBrandForegroundInverted: brand[100], // #2899f5 Global.Color.Brand.100\n colorBrandForegroundInvertedHover: brand[110], // #3aa0f3 Global.Color.Brand.110\n colorBrandForegroundInvertedPressed: brand[100], // #2899f5 Global.Color.Brand.100\n colorBrandForegroundOnLight: brand[80], // #0078d4 Global.Color.Brand.80\n colorBrandForegroundOnLightHover: brand[70], // #106ebe Global.Color.Brand.70\n colorBrandForegroundOnLightPressed: brand[50], // #004c87 Global.Color.Brand.50\n colorBrandForegroundOnLightSelected: brand[60], // #005a9e Global.Color.Brand.60\n colorNeutralBackground1: grey[16], // #292929 Global.Color.Grey.16\n colorNeutralBackground1Hover: grey[24], // #3d3d3d Global.Color.Grey.24\n colorNeutralBackground1Pressed: grey[12], // #1f1f1f Global.Color.Grey.12\n colorNeutralBackground1Selected: grey[22], // #383838 Global.Color.Grey.22\n colorNeutralBackground2: grey[12], // #1f1f1f Global.Color.Grey.12\n colorNeutralBackground2Hover: grey[20], // #333333 Global.Color.Grey.20\n colorNeutralBackground2Pressed: grey[8], // #141414 Global.Color.Grey.8\n colorNeutralBackground2Selected: grey[18], // #2e2e2e Global.Color.Grey.18\n colorNeutralBackground3: grey[8], // #141414 Global.Color.Grey.8\n colorNeutralBackground3Hover: grey[16], // #292929 Global.Color.Grey.16\n colorNeutralBackground3Pressed: grey[4], // #0a0a0a Global.Color.Grey.4\n colorNeutralBackground3Selected: grey[14], // #242424 Global.Color.Grey.14\n colorNeutralBackground4: grey[4], // #0a0a0a Global.Color.Grey.4\n colorNeutralBackground4Hover: grey[12], // #1f1f1f Global.Color.Grey.12\n colorNeutralBackground4Pressed: black, // #000000 Global.Color.Black\n colorNeutralBackground4Selected: grey[10], // #1a1a1a Global.Color.Grey.10\n colorNeutralBackground5: black, // #000000 Global.Color.Black\n colorNeutralBackground5Hover: grey[8], // #141414 Global.Color.Grey.8\n colorNeutralBackground5Pressed: grey[2], // #050505 Global.Color.Grey.2\n colorNeutralBackground5Selected: grey[6], // #0f0f0f Global.Color.Grey.6\n colorNeutralBackground6: grey[20], // #333333 Global.Color.Grey.20\n colorNeutralBackgroundInverted: grey[24], // #3d3d3d Global.Color.Grey.24\n colorSubtleBackground: 'transparent', // transparent undefined\n colorSubtleBackgroundHover: grey[22], // #383838 Global.Color.Grey.22\n colorSubtleBackgroundPressed: grey[18], // #2e2e2e Global.Color.Grey.18\n colorSubtleBackgroundSelected: grey[20], // #333333 Global.Color.Grey.20\n colorSubtleBackgroundLightAlphaHover: grey14Alpha[80], // rgba(36, 36, 36, 0.8) Global.Color.Grey14Alpha.80\n colorSubtleBackgroundLightAlphaPressed: grey14Alpha[50], // rgba(36, 36, 36, 0.5) Global.Color.Grey14Alpha.50\n colorSubtleBackgroundLightAlphaSelected: 'transparent', // transparent undefined\n colorSubtleBackgroundInverted: 'transparent', // transparent undefined\n colorSubtleBackgroundInvertedHover: blackAlpha[10], // rgba(0, 0, 0, 0.1) Global.Color.BlackAlpha.10\n colorSubtleBackgroundInvertedPressed: blackAlpha[30], // rgba(0, 0, 0, 0.3) Global.Color.BlackAlpha.30\n colorSubtleBackgroundInvertedSelected: blackAlpha[20], // rgba(0, 0, 0, 0.2) Global.Color.BlackAlpha.20\n colorTransparentBackground: 'transparent', // transparent undefined\n colorTransparentBackgroundHover: 'transparent', // transparent undefined\n colorTransparentBackgroundPressed: 'transparent', // transparent undefined\n colorTransparentBackgroundSelected: 'transparent', // transparent undefined\n colorNeutralBackgroundDisabled: grey[8], // #141414 Global.Color.Grey.8\n colorNeutralBackgroundInvertedDisabled: whiteAlpha[10], // rgba(255, 255, 255, 0.1) Global.Color.WhiteAlpha.10\n colorNeutralStencil1: grey[34], // #575757 Global.Color.Grey.34\n colorNeutralStencil2: grey[20], // #333333 Global.Color.Grey.20\n colorBackgroundOverlay: blackAlpha[50], // rgba(0, 0, 0, 0.5) Global.Color.BlackAlpha.50\n colorScrollbarOverlay: whiteAlpha[60], // rgba(255, 255, 255, 0.6) Global.Color.WhiteAlpha.60\n colorBrandBackground: brand[70], // #106ebe Global.Color.Brand.70\n colorBrandBackgroundHover: brand[80], // #0078d4 Global.Color.Brand.80\n colorBrandBackgroundPressed: brand[40], // #004578 Global.Color.Brand.40\n colorBrandBackgroundSelected: brand[60], // #005a9e Global.Color.Brand.60\n colorCompoundBrandBackground: brand[100], // #2899f5 Global.Color.Brand.100\n colorCompoundBrandBackgroundHover: brand[110], // #3aa0f3 Global.Color.Brand.110\n colorCompoundBrandBackgroundPressed: brand[90], // #1890f1 Global.Color.Brand.90\n colorBrandBackgroundStatic: brand[80], // #0078d4 Global.Color.Brand.80\n colorBrandBackground2: brand[40], // #004578 Global.Color.Brand.40\n colorBrandBackgroundInverted: white, // #ffffff Global.Color.White\n colorBrandBackgroundInvertedHover: brand[160], // #eff6fc Global.Color.Brand.160\n colorBrandBackgroundInvertedPressed: brand[140], // #c7e0f4 Global.Color.Brand.140\n colorBrandBackgroundInvertedSelected: brand[150], // #deecf9 Global.Color.Brand.150\n colorNeutralStrokeAccessible: grey[68], // #adadad Global.Color.Grey.68\n colorNeutralStrokeAccessibleHover: grey[74], // #bdbdbd Global.Color.Grey.74\n colorNeutralStrokeAccessiblePressed: grey[70], // #b3b3b3 Global.Color.Grey.70\n colorNeutralStrokeAccessibleSelected: brand[100], // #2899f5 Global.Color.Brand.100\n colorNeutralStroke1: grey[40], // #666666 Global.Color.Grey.40\n colorNeutralStroke1Hover: grey[46], // #757575 Global.Color.Grey.46\n colorNeutralStroke1Pressed: grey[42], // #6b6b6b Global.Color.Grey.42\n colorNeutralStroke1Selected: grey[44], // #707070 Global.Color.Grey.44\n colorNeutralStroke2: grey[32], // #525252 Global.Color.Grey.32\n colorNeutralStroke3: grey[24], // #3d3d3d Global.Color.Grey.24\n colorNeutralStrokeOnBrand: grey[16], // #292929 Global.Color.Grey.16\n colorNeutralStrokeOnBrand2: white, // #ffffff Global.Color.White\n colorNeutralStrokeOnBrand2Hover: white, // #ffffff Global.Color.White\n colorNeutralStrokeOnBrand2Pressed: white, // #ffffff Global.Color.White\n colorNeutralStrokeOnBrand2Selected: white, // #ffffff Global.Color.White\n colorBrandStroke1: brand[100], // #2899f5 Global.Color.Brand.100\n colorBrandStroke2: brand[50], // #004c87 Global.Color.Brand.50\n colorCompoundBrandStroke: brand[90], // #1890f1 Global.Color.Brand.90\n colorCompoundBrandStrokeHover: brand[100], // #2899f5 Global.Color.Brand.100\n colorCompoundBrandStrokePressed: brand[80], // #0078d4 Global.Color.Brand.80\n colorNeutralStrokeDisabled: grey[26], // #424242 Global.Color.Grey.26\n colorNeutralStrokeInvertedDisabled: whiteAlpha[40], // rgba(255, 255, 255, 0.4) Global.Color.WhiteAlpha.40\n colorTransparentStroke: 'transparent', // transparent undefined\n colorTransparentStrokeInteractive: 'transparent', // transparent undefined\n colorTransparentStrokeDisabled: 'transparent', // transparent undefined\n colorStrokeFocus1: black, // #000000 Global.Color.Black\n colorStrokeFocus2: white, // #ffffff Global.Color.White\n colorNeutralShadowAmbient: 'rgba(0,0,0,0.24)', // rgba(0,0,0,0.24) undefined\n colorNeutralShadowKey: 'rgba(0,0,0,0.28)', // rgba(0,0,0,0.28) undefined\n colorNeutralShadowAmbientLighter: 'rgba(0,0,0,0.12)', // rgba(0,0,0,0.12) undefined\n colorNeutralShadowKeyLighter: 'rgba(0,0,0,0.14)', // rgba(0,0,0,0.14) undefined\n colorNeutralShadowAmbientDarker: 'rgba(0,0,0,0.40)', // rgba(0,0,0,0.40) undefined\n colorNeutralShadowKeyDarker: 'rgba(0,0,0,0.48)', // rgba(0,0,0,0.48) undefined\n colorBrandShadowAmbient: 'rgba(0,0,0,0.30)', // rgba(0,0,0,0.30) undefined\n colorBrandShadowKey: 'rgba(0,0,0,0.25)', // rgba(0,0,0,0.25) undefined\n});\n"],"sourceRoot":"../src/"}
|
@@ -0,0 +1,33 @@
|
|
1
|
+
import { statusSharedColors, personaSharedColors } from '../global/colors';
|
2
|
+
const statusColorPaletteTokens = /*#__PURE__*/Object.keys(statusSharedColors).reduce((acc, sharedColor) => {
|
3
|
+
const color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1);
|
4
|
+
const sharedColorTokens = {
|
5
|
+
[`colorPalette${color}Background1`]: statusSharedColors[sharedColor].shade40,
|
6
|
+
[`colorPalette${color}Background2`]: statusSharedColors[sharedColor].shade30,
|
7
|
+
[`colorPalette${color}Background3`]: statusSharedColors[sharedColor].primary,
|
8
|
+
[`colorPalette${color}Foreground1`]: statusSharedColors[sharedColor].tint30,
|
9
|
+
[`colorPalette${color}Foreground2`]: statusSharedColors[sharedColor].tint40,
|
10
|
+
[`colorPalette${color}Foreground3`]: statusSharedColors[sharedColor].tint20,
|
11
|
+
[`colorPalette${color}BorderActive`]: statusSharedColors[sharedColor].tint30,
|
12
|
+
[`colorPalette${color}Border1`]: statusSharedColors[sharedColor].primary,
|
13
|
+
[`colorPalette${color}Border2`]: statusSharedColors[sharedColor].tint20
|
14
|
+
};
|
15
|
+
return { ...acc,
|
16
|
+
...sharedColorTokens
|
17
|
+
};
|
18
|
+
}, {});
|
19
|
+
const personaColorPaletteTokens = /*#__PURE__*/Object.keys(personaSharedColors).reduce((acc, sharedColor) => {
|
20
|
+
const color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1);
|
21
|
+
const sharedColorTokens = {
|
22
|
+
[`colorPalette${color}Background2`]: personaSharedColors[sharedColor].shade30,
|
23
|
+
[`colorPalette${color}Foreground2`]: personaSharedColors[sharedColor].tint40,
|
24
|
+
[`colorPalette${color}BorderActive`]: personaSharedColors[sharedColor].tint30
|
25
|
+
};
|
26
|
+
return { ...acc,
|
27
|
+
...sharedColorTokens
|
28
|
+
};
|
29
|
+
}, {});
|
30
|
+
export const colorPaletteTokens = { ...statusColorPaletteTokens,
|
31
|
+
...personaColorPaletteTokens
|
32
|
+
};
|
33
|
+
//# sourceMappingURL=darkColorPalette.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["alias/darkColorPalette.ts"],"names":[],"mappings":"AAAA,SAAS,kBAAT,EAA6B,mBAA7B,QAAiG,kBAAjG;AAGA,MAAM,wBAAwB,gBAAI,MAAM,CAAC,IAAP,CAAY,kBAAZ,EAE/B,MAF+B,CAExB,CAAC,GAAD,EAAM,WAAN,KAAqB;EAC7B,MAAM,KAAK,GAAG,WAAW,CAAC,KAAZ,CAAkB,CAAlB,EAAqB,CAArB,EAAwB,WAAxB,KAAwC,WAAW,CAAC,KAAZ,CAAkB,CAAlB,CAAtD;EACA,MAAM,iBAAiB,GAAG;IACxB,CAAC,eAAe,KAAK,aAArB,GAAqC,kBAAkB,CAAC,WAAD,CAAlB,CAAgC,OAD7C;IAExB,CAAC,eAAe,KAAK,aAArB,GAAqC,kBAAkB,CAAC,WAAD,CAAlB,CAAgC,OAF7C;IAGxB,CAAC,eAAe,KAAK,aAArB,GAAqC,kBAAkB,CAAC,WAAD,CAAlB,CAAgC,OAH7C;IAIxB,CAAC,eAAe,KAAK,aAArB,GAAqC,kBAAkB,CAAC,WAAD,CAAlB,CAAgC,MAJ7C;IAKxB,CAAC,eAAe,KAAK,aAArB,GAAqC,kBAAkB,CAAC,WAAD,CAAlB,CAAgC,MAL7C;IAMxB,CAAC,eAAe,KAAK,aAArB,GAAqC,kBAAkB,CAAC,WAAD,CAAlB,CAAgC,MAN7C;IAOxB,CAAC,eAAe,KAAK,cAArB,GAAsC,kBAAkB,CAAC,WAAD,CAAlB,CAAgC,MAP9C;IAQxB,CAAC,eAAe,KAAK,SAArB,GAAiC,kBAAkB,CAAC,WAAD,CAAlB,CAAgC,OARzC;IASxB,CAAC,eAAe,KAAK,SAArB,GAAiC,kBAAkB,CAAC,WAAD,CAAlB,CAAgC;EATzC,CAA1B;EAYA,OAAO,EAAE,GAAG,GAAL;IAAU,GAAG;EAAb,CAAP;AACD,CAjBiC,EAiB/B,EAjB+B,CAAlC;AAmBA,MAAM,yBAAyB,gBAAI,MAAM,CAAC,IAAP,CAAY,mBAAZ,EAEhC,MAFgC,CAEzB,CAAC,GAAD,EAAM,WAAN,KAAqB;EAC7B,MAAM,KAAK,GAAG,WAAW,CAAC,KAAZ,CAAkB,CAAlB,EAAqB,CAArB,EAAwB,WAAxB,KAAwC,WAAW,CAAC,KAAZ,CAAkB,CAAlB,CAAtD;EACA,MAAM,iBAAiB,GAAG;IACxB,CAAC,eAAe,KAAK,aAArB,GAAqC,mBAAmB,CAAC,WAAD,CAAnB,CAAiC,OAD9C;IAExB,CAAC,eAAe,KAAK,aAArB,GAAqC,mBAAmB,CAAC,WAAD,CAAnB,CAAiC,MAF9C;IAGxB,CAAC,eAAe,KAAK,cAArB,GAAsC,mBAAmB,CAAC,WAAD,CAAnB,CAAiC;EAH/C,CAA1B;EAMA,OAAO,EAAE,GAAG,GAAL;IAAU,GAAG;EAAb,CAAP;AACD,CAXkC,EAWhC,EAXgC,CAAnC;AAaA,OAAO,MAAM,kBAAkB,GAAuB,EAAE,GAAG,wBAAL;EAA+B,GAAG;AAAlC,CAA/C","sourcesContent":["import { statusSharedColors, personaSharedColors, StatusSharedColors, PersonaSharedColors } from '../global/colors';\nimport { ColorPaletteTokens, GlobalSharedColors, PersonaColorPaletteTokens, StatusColorPaletteTokens } from '../types';\n\nconst statusColorPaletteTokens = (Object.keys(statusSharedColors) as Array<\n keyof Pick<GlobalSharedColors, StatusSharedColors>\n>).reduce((acc, sharedColor) => {\n const color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1);\n const sharedColorTokens = {\n [`colorPalette${color}Background1`]: statusSharedColors[sharedColor].shade40,\n [`colorPalette${color}Background2`]: statusSharedColors[sharedColor].shade30,\n [`colorPalette${color}Background3`]: statusSharedColors[sharedColor].primary,\n [`colorPalette${color}Foreground1`]: statusSharedColors[sharedColor].tint30,\n [`colorPalette${color}Foreground2`]: statusSharedColors[sharedColor].tint40,\n [`colorPalette${color}Foreground3`]: statusSharedColors[sharedColor].tint20,\n [`colorPalette${color}BorderActive`]: statusSharedColors[sharedColor].tint30,\n [`colorPalette${color}Border1`]: statusSharedColors[sharedColor].primary,\n [`colorPalette${color}Border2`]: statusSharedColors[sharedColor].tint20,\n };\n\n return { ...acc, ...sharedColorTokens };\n}, {} as StatusColorPaletteTokens);\n\nconst personaColorPaletteTokens = (Object.keys(personaSharedColors) as Array<\n keyof Pick<GlobalSharedColors, PersonaSharedColors>\n>).reduce((acc, sharedColor) => {\n const color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1);\n const sharedColorTokens = {\n [`colorPalette${color}Background2`]: personaSharedColors[sharedColor].shade30,\n [`colorPalette${color}Foreground2`]: personaSharedColors[sharedColor].tint40,\n [`colorPalette${color}BorderActive`]: personaSharedColors[sharedColor].tint30,\n };\n\n return { ...acc, ...sharedColorTokens };\n}, {} as PersonaColorPaletteTokens);\n\nexport const colorPaletteTokens: ColorPaletteTokens = { ...statusColorPaletteTokens, ...personaColorPaletteTokens };\n"],"sourceRoot":"../src/"}
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { hcButtonFace, hcButtonText, hcCanvas, hcCanvasText, hcDisabled, hcHighlight, hcHighlightText, hcHyperlink
|
1
|
+
import { blackAlpha, hcButtonFace, hcButtonText, hcCanvas, hcCanvasText, hcDisabled, hcHighlight, hcHighlightText, hcHyperlink } from '../global/colors';
|
2
2
|
export const generateColorTokens = () => ({
|
3
3
|
colorNeutralForeground1: hcCanvasText,
|
4
4
|
colorNeutralForeground1Hover: hcHighlightText,
|
@@ -25,6 +25,10 @@ export const generateColorTokens = () => ({
|
|
25
25
|
colorBrandForegroundLinkHover: hcHyperlink,
|
26
26
|
colorBrandForegroundLinkPressed: hcHyperlink,
|
27
27
|
colorBrandForegroundLinkSelected: hcHyperlink,
|
28
|
+
colorNeutralForeground2Link: hcHyperlink,
|
29
|
+
colorNeutralForeground2LinkHover: hcHyperlink,
|
30
|
+
colorNeutralForeground2LinkPressed: hcHyperlink,
|
31
|
+
colorNeutralForeground2LinkSelected: hcHyperlink,
|
28
32
|
colorCompoundBrandForeground1: hcHighlight,
|
29
33
|
colorCompoundBrandForeground1Hover: hcHighlight,
|
30
34
|
colorCompoundBrandForeground1Pressed: hcHighlight,
|
@@ -88,6 +92,8 @@ export const generateColorTokens = () => ({
|
|
88
92
|
colorNeutralBackgroundInvertedDisabled: hcCanvas,
|
89
93
|
colorNeutralStencil1: hcCanvasText,
|
90
94
|
colorNeutralStencil2: hcCanvasText,
|
95
|
+
colorBackgroundOverlay: blackAlpha[50],
|
96
|
+
colorScrollbarOverlay: hcButtonFace,
|
91
97
|
colorBrandBackground: hcButtonFace,
|
92
98
|
colorBrandBackgroundHover: hcHighlight,
|
93
99
|
colorBrandBackgroundPressed: hcHighlight,
|
@@ -138,21 +144,4 @@ export const generateColorTokens = () => ({
|
|
138
144
|
colorBrandShadowKey: 'rgba(0,0,0,0.25)' // rgba(0,0,0,0.25) undefined
|
139
145
|
|
140
146
|
});
|
141
|
-
|
142
|
-
const color = sharedColor.slice(0, 1).toUpperCase() + sharedColor.slice(1);
|
143
|
-
const sharedColorTokens = {
|
144
|
-
[`colorPalette${color}Background1`]: white,
|
145
|
-
[`colorPalette${color}Background2`]: black,
|
146
|
-
[`colorPalette${color}Background3`]: white,
|
147
|
-
[`colorPalette${color}Foreground1`]: black,
|
148
|
-
[`colorPalette${color}Foreground2`]: white,
|
149
|
-
[`colorPalette${color}Foreground3`]: white,
|
150
|
-
[`colorPalette${color}BorderActive`]: hcHighlight,
|
151
|
-
[`colorPalette${color}Border1`]: white,
|
152
|
-
[`colorPalette${color}Border2`]: white
|
153
|
-
};
|
154
|
-
return { ...acc,
|
155
|
-
...sharedColorTokens
|
156
|
-
};
|
157
|
-
}, {});
|
158
|
-
//# sourceMappingURL=highContrast.js.map
|
147
|
+
//# sourceMappingURL=highContrastColor.js.map
|