Merge pull request #5988 from gaetanmaisse/improve-lib-theming-ts-typing

Improve typings of theming lib
storybookjs · Mar 11, 2019 · 1e71612 · 1e71612
2 parents 3f94f5b + fcdc0ba
commit 1e71612
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 2 deletions.
diff --git a/lib/components/src/syntaxhighlighter/__snapshots__/syntaxhighlighter.stories.storyshot b/lib/components/src/syntaxhighlighter/__snapshots__/syntaxhighlighter.stories.storyshot
@@ -260,6 +260,7 @@ exports[`Storyshots Basics|SyntaxHighlighter bordered & copy-able 1`] = `
   position: relative;
   overflow: hidden;
   border: 1px solid rgba(0,0,0,.1);
+  background: #FFFFFF;
 }
 
 .emotion-2 {

diff --git a/lib/theming/src/base.ts b/lib/theming/src/base.ts
@@ -40,6 +40,7 @@ export const color = {
 
 export const background = {
   app: '#F6F9FC',
+  bar: '#FFFFFF',
   content: color.lightest,
   hoverable: 'rgba(0,0,0,.05)', // hover state for items in a list
 

diff --git a/lib/theming/src/create.ts b/lib/theming/src/create.ts
@@ -129,6 +129,7 @@ export const convert = (inherit: ThemeVars = lightThemeVars): Theme => {
     color: createColors(inherit),
     background: {
       app: appBg,
+      bar: background.bar,
       content: appContentBg,
       hoverable:
         base === 'light' ? 'rgba(0,0,0,.05)' : 'rgba(250,250,252,.1)' || background.hoverable,

diff --git a/lib/theming/src/index.ts b/lib/theming/src/index.ts
@@ -1,8 +1,9 @@
-import styled from '@emotion/styled';
+import emotionStyled, { CreateStyled } from '@emotion/styled';
 import dark from './themes/dark';
 import light from './themes/light';
+import { Theme } from './base';
 
-export { styled };
+export const styled = emotionStyled as CreateStyled<Theme>;
 
 export * from './base';
 

diff --git a/lib/ui/src/settings/__snapshots__/about.stories.storyshot b/lib/ui/src/settings/__snapshots__/about.stories.storyshot
@@ -1432,6 +1432,7 @@ exports[`Storyshots UI|Settings/AboutScreen new version required 1`] = `
   position: relative;
   overflow: hidden;
   border: 1px solid rgba(0,0,0,.1);
+  background: #FFFFFF;
 }
 
 .emotion-20 {