Skip to content

Commit

Permalink
fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@xugao
xugao committed Sep 16, 2020
1 parent c33bd91 commit 4176a14
Show file tree
Hide file tree
Showing 4 changed files with 51 additions and 32 deletions.
70 changes: 42 additions & 28 deletions packages/react-theme-provider/src/__snapshots__/ThemeProvider.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,15 +36,13 @@ exports[`ThemeProvider can apply body theme to body 1`] = `
--accent-pressed-iconColor: var(--accent-iconColor);
--accent-pressed-secondaryContentColor: #ffffff;
--accent-secondaryContentColor: #ffffff;
--body-MozOsxFontSmoothing: grayscale;
--body-WebkitFontSmoothing: antialiased;
--body-background: black;
--body-contentColor: white;
--body-fontFamily: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
--body-fontSize: 14px;
--body-fontWeight: 400;
--button-MozOsxFontSmoothing: grayscale;
--button-WebkitFontSmoothing: antialiased;
--body-mozOsxFontSmoothing: grayscale;
--body-webkitFontSmoothing: antialiased;
--button-background: #ffffff;
--button-borderColor: #8a8886;
--button-borderRadius: 2px;
Expand Down Expand Up @@ -88,6 +86,7 @@ exports[`ThemeProvider can apply body theme to body 1`] = `
--button-menuIconColor: inherit;
--button-minHeight: var(--button-size-regular);
--button-minWiedth: 80px;
--button-mozOsxFontSmoothing: grayscale;
--button-paddingBottom: 0;
--button-paddingLeft: 20px;
--button-paddingRight: 20px;
Expand All @@ -107,6 +106,7 @@ exports[`ThemeProvider can apply body theme to body 1`] = `
--button-size-small: 24px;
--button-size-smaller: 24px;
--button-size-smallest: 24px;
--button-webkitFontSmoothing: antialiased;
--effects-elevation16: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
--effects-elevation4: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108);
--effects-elevation64: 0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18);
Expand Down Expand Up @@ -372,6 +372,8 @@ exports[`ThemeProvider can apply body theme to body 1`] = `
--spacing-m: 16px;
--spacing-s1: 8px;
--spacing-s2: 4px;
-moz-osx-font-smoothing: var(--body-mozOsxFontSmoothing);
-webkit-font-smoothing: var(--body-webkitFontSmoothing);
color: var(--body-contentColor);
font-family: var(--body-fontFamily);
font-size: var(--body-fontSize);
Expand Down Expand Up @@ -427,15 +429,13 @@ exports[`ThemeProvider can apply body theme to root element 1`] = `
--accent-pressed-iconColor: var(--accent-iconColor);
--accent-pressed-secondaryContentColor: #ffffff;
--accent-secondaryContentColor: #ffffff;
--body-MozOsxFontSmoothing: grayscale;
--body-WebkitFontSmoothing: antialiased;
--body-background: black;
--body-contentColor: white;
--body-fontFamily: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
--body-fontSize: 14px;
--body-fontWeight: 400;
--button-MozOsxFontSmoothing: grayscale;
--button-WebkitFontSmoothing: antialiased;
--body-mozOsxFontSmoothing: grayscale;
--body-webkitFontSmoothing: antialiased;
--button-background: #ffffff;
--button-borderColor: #8a8886;
--button-borderRadius: 2px;
Expand Down Expand Up @@ -479,6 +479,7 @@ exports[`ThemeProvider can apply body theme to root element 1`] = `
--button-menuIconColor: inherit;
--button-minHeight: var(--button-size-regular);
--button-minWiedth: 80px;
--button-mozOsxFontSmoothing: grayscale;
--button-paddingBottom: 0;
--button-paddingLeft: 20px;
--button-paddingRight: 20px;
Expand All @@ -498,6 +499,7 @@ exports[`ThemeProvider can apply body theme to root element 1`] = `
--button-size-small: 24px;
--button-size-smaller: 24px;
--button-size-smallest: 24px;
--button-webkitFontSmoothing: antialiased;
--effects-elevation16: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
--effects-elevation4: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108);
--effects-elevation64: 0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18);
Expand Down Expand Up @@ -763,6 +765,8 @@ exports[`ThemeProvider can apply body theme to root element 1`] = `
--spacing-m: 16px;
--spacing-s1: 8px;
--spacing-s2: 4px;
-moz-osx-font-smoothing: var(--body-mozOsxFontSmoothing);
-webkit-font-smoothing: var(--body-webkitFontSmoothing);
color: var(--body-contentColor);
font-family: var(--body-fontFamily);
font-size: var(--body-fontSize);
Expand Down Expand Up @@ -818,15 +822,13 @@ exports[`ThemeProvider can handle a partial theme 1`] = `
--accent-pressed-iconColor: var(--accent-iconColor);
--accent-pressed-secondaryContentColor: #ffffff;
--accent-secondaryContentColor: #ffffff;
--body-MozOsxFontSmoothing: grayscale;
--body-WebkitFontSmoothing: antialiased;
--body-background: #ffffff;
--body-contentColor: #323130;
--body-fontFamily: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
--body-fontSize: 14px;
--body-fontWeight: 400;
--button-MozOsxFontSmoothing: grayscale;
--button-WebkitFontSmoothing: antialiased;
--body-mozOsxFontSmoothing: grayscale;
--body-webkitFontSmoothing: antialiased;
--button-background: #ffffff;
--button-borderColor: #8a8886;
--button-borderRadius: 2px;
Expand Down Expand Up @@ -870,6 +872,7 @@ exports[`ThemeProvider can handle a partial theme 1`] = `
--button-menuIconColor: inherit;
--button-minHeight: var(--button-size-regular);
--button-minWiedth: 80px;
--button-mozOsxFontSmoothing: grayscale;
--button-paddingBottom: 0;
--button-paddingLeft: 20px;
--button-paddingRight: 20px;
Expand All @@ -889,6 +892,7 @@ exports[`ThemeProvider can handle a partial theme 1`] = `
--button-size-small: 24px;
--button-size-smaller: 24px;
--button-size-smallest: 24px;
--button-webkitFontSmoothing: antialiased;
--effects-elevation16: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
--effects-elevation4: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108);
--effects-elevation64: 0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18);
Expand Down Expand Up @@ -1155,6 +1159,8 @@ exports[`ThemeProvider can handle a partial theme 1`] = `
--spacing-m: 16px;
--spacing-s1: 8px;
--spacing-s2: 4px;
-moz-osx-font-smoothing: var(--body-mozOsxFontSmoothing);
-webkit-font-smoothing: var(--body-webkitFontSmoothing);
color: var(--body-contentColor);
font-family: var(--body-fontFamily);
font-size: var(--body-fontSize);
Expand Down Expand Up @@ -1207,15 +1213,13 @@ exports[`ThemeProvider renders a div 1`] = `
--accent-pressed-iconColor: var(--accent-iconColor);
--accent-pressed-secondaryContentColor: #ffffff;
--accent-secondaryContentColor: #ffffff;
--body-MozOsxFontSmoothing: grayscale;
--body-WebkitFontSmoothing: antialiased;
--body-background: #ffffff;
--body-contentColor: #323130;
--body-fontFamily: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
--body-fontSize: 14px;
--body-fontWeight: 400;
--button-MozOsxFontSmoothing: grayscale;
--button-WebkitFontSmoothing: antialiased;
--body-mozOsxFontSmoothing: grayscale;
--body-webkitFontSmoothing: antialiased;
--button-background: #ffffff;
--button-borderColor: #8a8886;
--button-borderRadius: 2px;
Expand Down Expand Up @@ -1259,6 +1263,7 @@ exports[`ThemeProvider renders a div 1`] = `
--button-menuIconColor: inherit;
--button-minHeight: var(--button-size-regular);
--button-minWiedth: 80px;
--button-mozOsxFontSmoothing: grayscale;
--button-paddingBottom: 0;
--button-paddingLeft: 20px;
--button-paddingRight: 20px;
Expand All @@ -1278,6 +1283,7 @@ exports[`ThemeProvider renders a div 1`] = `
--button-size-small: 24px;
--button-size-smaller: 24px;
--button-size-smallest: 24px;
--button-webkitFontSmoothing: antialiased;
--effects-elevation16: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
--effects-elevation4: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108);
--effects-elevation64: 0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18);
Expand Down Expand Up @@ -1543,6 +1549,8 @@ exports[`ThemeProvider renders a div 1`] = `
--spacing-m: 16px;
--spacing-s1: 8px;
--spacing-s2: 4px;
-moz-osx-font-smoothing: var(--body-mozOsxFontSmoothing);
-webkit-font-smoothing: var(--body-webkitFontSmoothing);
color: var(--body-contentColor);
font-family: var(--body-fontFamily);
font-size: var(--body-fontSize);
Expand Down Expand Up @@ -1595,15 +1603,13 @@ exports[`ThemeProvider renders a div with styling 1`] = `
--accent-pressed-iconColor: var(--accent-iconColor);
--accent-pressed-secondaryContentColor: #ffffff;
--accent-secondaryContentColor: #ffffff;
--body-MozOsxFontSmoothing: grayscale;
--body-WebkitFontSmoothing: antialiased;
--body-background: white;
--body-contentColor: black;
--body-fontFamily: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
--body-fontSize: 14px;
--body-fontWeight: 400;
--button-MozOsxFontSmoothing: grayscale;
--button-WebkitFontSmoothing: antialiased;
--body-mozOsxFontSmoothing: grayscale;
--body-webkitFontSmoothing: antialiased;
--button-background: #ffffff;
--button-borderColor: #8a8886;
--button-borderRadius: 2px;
Expand Down Expand Up @@ -1647,6 +1653,7 @@ exports[`ThemeProvider renders a div with styling 1`] = `
--button-menuIconColor: inherit;
--button-minHeight: var(--button-size-regular);
--button-minWiedth: 80px;
--button-mozOsxFontSmoothing: grayscale;
--button-paddingBottom: 0;
--button-paddingLeft: 20px;
--button-paddingRight: 20px;
Expand All @@ -1666,6 +1673,7 @@ exports[`ThemeProvider renders a div with styling 1`] = `
--button-size-small: 24px;
--button-size-smaller: 24px;
--button-size-smallest: 24px;
--button-webkitFontSmoothing: antialiased;
--effects-elevation16: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
--effects-elevation4: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108);
--effects-elevation64: 0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18);
Expand Down Expand Up @@ -1931,6 +1939,8 @@ exports[`ThemeProvider renders a div with styling 1`] = `
--spacing-m: 16px;
--spacing-s1: 8px;
--spacing-s2: 4px;
-moz-osx-font-smoothing: var(--body-mozOsxFontSmoothing);
-webkit-font-smoothing: var(--body-webkitFontSmoothing);
color: var(--body-contentColor);
font-family: var(--body-fontFamily);
font-size: var(--body-fontSize);
Expand Down Expand Up @@ -1983,15 +1993,13 @@ exports[`ThemeProvider renders nested themes 1`] = `
--accent-pressed-iconColor: var(--accent-iconColor);
--accent-pressed-secondaryContentColor: #ffffff;
--accent-secondaryContentColor: #ffffff;
--body-MozOsxFontSmoothing: grayscale;
--body-WebkitFontSmoothing: antialiased;
--body-background: white;
--body-contentColor: black;
--body-fontFamily: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
--body-fontSize: 14px;
--body-fontWeight: 400;
--button-MozOsxFontSmoothing: grayscale;
--button-WebkitFontSmoothing: antialiased;
--body-mozOsxFontSmoothing: grayscale;
--body-webkitFontSmoothing: antialiased;
--button-background: #ffffff;
--button-borderColor: #8a8886;
--button-borderRadius: 2px;
Expand Down Expand Up @@ -2035,6 +2043,7 @@ exports[`ThemeProvider renders nested themes 1`] = `
--button-menuIconColor: inherit;
--button-minHeight: var(--button-size-regular);
--button-minWiedth: 80px;
--button-mozOsxFontSmoothing: grayscale;
--button-paddingBottom: 0;
--button-paddingLeft: 20px;
--button-paddingRight: 20px;
Expand All @@ -2054,6 +2063,7 @@ exports[`ThemeProvider renders nested themes 1`] = `
--button-size-small: 24px;
--button-size-smaller: 24px;
--button-size-smallest: 24px;
--button-webkitFontSmoothing: antialiased;
--effects-elevation16: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
--effects-elevation4: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108);
--effects-elevation64: 0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18);
Expand Down Expand Up @@ -2319,6 +2329,8 @@ exports[`ThemeProvider renders nested themes 1`] = `
--spacing-m: 16px;
--spacing-s1: 8px;
--spacing-s2: 4px;
-moz-osx-font-smoothing: var(--body-mozOsxFontSmoothing);
-webkit-font-smoothing: var(--body-webkitFontSmoothing);
color: var(--body-contentColor);
font-family: var(--body-fontFamily);
font-size: var(--body-fontSize);
Expand Down Expand Up @@ -2369,15 +2381,13 @@ exports[`ThemeProvider renders nested themes 1`] = `
--accent-pressed-iconColor: var(--accent-iconColor);
--accent-pressed-secondaryContentColor: #ffffff;
--accent-secondaryContentColor: #ffffff;
--body-MozOsxFontSmoothing: grayscale;
--body-WebkitFontSmoothing: antialiased;
--body-background: black;
--body-contentColor: white;
--body-fontFamily: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
--body-fontSize: 14px;
--body-fontWeight: 400;
--button-MozOsxFontSmoothing: grayscale;
--button-WebkitFontSmoothing: antialiased;
--body-mozOsxFontSmoothing: grayscale;
--body-webkitFontSmoothing: antialiased;
--button-background: #ffffff;
--button-borderColor: #8a8886;
--button-borderRadius: 2px;
Expand Down Expand Up @@ -2421,6 +2431,7 @@ exports[`ThemeProvider renders nested themes 1`] = `
--button-menuIconColor: inherit;
--button-minHeight: var(--button-size-regular);
--button-minWiedth: 80px;
--button-mozOsxFontSmoothing: grayscale;
--button-paddingBottom: 0;
--button-paddingLeft: 20px;
--button-paddingRight: 20px;
Expand All @@ -2440,6 +2451,7 @@ exports[`ThemeProvider renders nested themes 1`] = `
--button-size-small: 24px;
--button-size-smaller: 24px;
--button-size-smallest: 24px;
--button-webkitFontSmoothing: antialiased;
--effects-elevation16: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
--effects-elevation4: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108);
--effects-elevation64: 0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18);
Expand Down Expand Up @@ -2705,6 +2717,8 @@ exports[`ThemeProvider renders nested themes 1`] = `
--spacing-m: 16px;
--spacing-s1: 8px;
--spacing-s2: 4px;
-moz-osx-font-smoothing: var(--body-mozOsxFontSmoothing);
-webkit-font-smoothing: var(--body-webkitFontSmoothing);
color: var(--body-contentColor);
font-family: var(--body-fontFamily);
font-size: var(--body-fontSize);
Expand Down
4 changes: 2 additions & 2 deletions packages/react-theme-provider/src/createDefaultTheme.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@ const defaultFonts = {
fontFamily: `'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif`,
fontSize: '14px',
fontWeight: 400,
MozOsxFontSmoothing: 'grayscale',
WebkitFontSmoothing: 'antialiased',
mozOsxFontSmoothing: 'grayscale',
webkitFontSmoothing: 'antialiased',
};

export const defaultTokens: Tokens = {
Expand Down
7 changes: 5 additions & 2 deletions packages/react-theme-provider/src/getTokens.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,8 +125,11 @@ export function getTokens(theme: Theme): Tokens {
body: {
background: semanticColors?.bodyBackground,
contentColor: semanticColors?.bodyText,
// eslint-disable-next-line @typescript-eslint/no-explicit-any
...(fonts?.medium as any),
fontFamily: fonts?.medium.fontFamily,
fontWeight: fonts?.medium.fontWeight,
fontSize: fonts?.medium.fontSize,
mozOsxFontSmoothing: fonts?.medium.MozOsxFontSmoothing,
webkitFontSmoothing: fonts?.medium.WebkitFontSmoothing,
},

button: {
Expand Down
2 changes: 2 additions & 0 deletions packages/react-theme-provider/src/useThemeProviderClasses.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ export const useThemeProviderClasses = makeClasses(theme => {
fontFamily: 'var(--body-fontFamily)',
fontWeight: 'var(--body-fontWeight)',
fontSize: 'var(--body-fontSize)',
MozOsxFontSmoothing: 'var(--body-mozOsxFontSmoothing)',
WebkitFontSmoothing: 'var(--body-webkitFontSmoothing)',
},
{
'& input': inheritFont,
Expand Down

0 comments on commit 4176a14

Please sign in to comment.