codesandbox · SaraVieira · Jan 8, 2020 · Jan 8, 2020 · Jan 8, 2020 · Jan 8, 2020
diff --git a/packages/common/src/design-language/typography.ts b/packages/common/src/design-language/typography.ts
@@ -4,6 +4,11 @@ export const fontSizes = [
   11,
   13,
   16,
+  19,
+  24,
+  28,
+  33,
+  40,
 ];
 
 export const fontWeights = {

diff --git a/packages/components/.storybook/decorators/LayoutDecorator.tsx b/packages/components/.storybook/decorators/LayoutDecorator.tsx
@@ -3,25 +3,29 @@ import React from 'react';
 import styled from 'styled-components';
 
 const ColoredChildren = styled.div`
-  & > div > * {
+  & > * {
+    background: #343434;
+    min-height: 4em;
+  }
+  & > * > * {
     --color: rgb(103, 126, 208);
     background: var(--color);
     min-height: 4em;
     min-width: 4em;
   }
-  & > div > *:nth-child(6n + 2) {
+  & > * > *:nth-child(6n + 2) {
     --color: rgb(217, 103, 219);
   }
-  & > div > *:nth-child(6n + 3) {
+  & > * > *:nth-child(6n + 3) {
     --color: rgb(77, 214, 115);
   }
-  & > div > *:nth-child(6n + 4) {
+  & > * > *:nth-child(6n + 4) {
     --color: rgb(248, 110, 91);
   }
-  & > div > *:nth-child(6n + 5) {
+  & > * > *:nth-child(6n + 5) {
     --color: rgb(94, 204, 211);
   }
-  & > div > *:nth-child(6n + 6) {
+  & > * > *:nth-child(6n + 6) {
     --color: rgb(0, 35, 208);
   }
   & > div > *:nth-child(6n + 7) {

diff --git a/packages/components/src/components/Collapsible/index.tsx b/packages/components/src/components/Collapsible/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import css from '@styled-system/css';
+import { Element } from '../Element';
 
 export const Header = styled.div(
   css({
@@ -81,12 +82,12 @@ export const Collapsible: React.FC<ICollapsibleProps> = ({
   const toggle = () => setOpen(!open);
 
   return (
-    <section {...props}>
+    <Element as="section" {...props}>
       <Header onClick={toggle}>
         <ToggleIcon open={open} />
         <Title>{title}</Title>
       </Header>
       {open ? <Body>{children}</Body> : null}
-    </section>
+    </Element>
   );
 };
diff --git a/packages/components/src/components/Element/element.stories.tsx b/packages/components/src/components/Element/element.stories.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { LayoutDecorator } from '../../../.storybook/decorators';
+import { Element } from '.';
+
+export default {
+  title: 'components/Element',
+  component: Element,
+  decorators: [LayoutDecorator],
+};
+
+export const Basic = () => <Element>content</Element>;
+
+export const AsProp = () => <Element as="span">content</Element>;
+
+export const Margins = () => (
+  <>
+    <Element margin={2}>2 on the space grid is 2*4px = 8px or 0.5em</Element>
+    <Element marginX={2}>left and right</Element>
+    <Element marginY={2}>top and bottom</Element>
+    <Element marginBottom={2}>prefer margin bottom when you can</Element>
+  </>
+);
diff --git a/packages/components/src/components/Element/index.tsx b/packages/components/src/components/Element/index.tsx
@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+import css from '@styled-system/css';
+
+export const Element = styled.div<{
+  margin?: number;
+  marginX?: number;
+  marginY?: number;
+  marginBottom?: number;
+  marginTop?: number; // prefer margin bottom to top
+}>(props =>
+  css({
+    margin: props.margin || null,
+    marginX: props.marginX || null,
+    marginY: props.marginY || null,
+    marginBottom: props.marginBottom || null,
+    marginTop: props.marginTop || null,
+  })
+);
diff --git a/packages/components/src/components/Example/index.tsx b/packages/components/src/components/Example/index.tsx
@@ -1,9 +1,14 @@
 import React from 'react';
 import styled from 'styled-components';
+import css from '@styled-system/css';
+import { Element } from '../Element';
 
-const H1 = styled.h1`
-  color: red;
-`;
+const H1 = styled(Element).attrs({ as: 'h1' })(
+  css({
+    color: 'reds.500',
+    fontSize: 7,
+  })
+);
 
 const ExampleComponent = () => <H1>I am an example component</H1>;
 

diff --git a/packages/components/src/components/Grid/index.tsx b/packages/components/src/components/Grid/index.tsx
@@ -1,10 +1,11 @@
 import styled from 'styled-components';
 import css from '@styled-system/css';
+import { Element } from '../Element';
 
 const fontSize = 1; // rem = 16px
 const lineHeight = fontSize * 1.5;
 
-export const Grid = styled.div<{ columnGap?: number; rowGap?: number }>(
+export const Grid = styled(Element)<{ columnGap?: number; rowGap?: number }>(
   ({ columnGap, rowGap }) =>
     css({
       display: 'grid',
@@ -19,7 +20,7 @@ export const Grid = styled.div<{ columnGap?: number; rowGap?: number }>(
 // valid combinations are
 // start | start + end | start + span | span
 // span + end is also possible but not implemented here
-export const Column = styled.div<{
+export const Column = styled(Element)<{
   start?: number;
   end?: number;
   span?: number;

diff --git a/packages/components/src/components/Stack/index.tsx b/packages/components/src/components/Stack/index.tsx
@@ -1,7 +1,8 @@
 import styled from 'styled-components';
 import css from '@styled-system/css';
+import { Element } from '../Element';
 
-export const Stack = styled.div<{
+export const Stack = styled(Element)<{
   gap?: number; // theme.space token
   direction?: 'horizontal' | 'vertical';
   justify?: string;

diff --git a/packages/components/src/components/Stack/stack.stories.tsx b/packages/components/src/components/Stack/stack.stories.tsx
@@ -11,29 +11,29 @@ export default {
 
 // replace the text inside with Text variants when available
 export const Defaults = () => (
-  <Stack style={{ height: 100, background: '#343434' }}>
+  <Stack style={{ height: 100 }}>
     <div />
     <div />
   </Stack>
 );
 
 export const WithGap = () => (
-  <Stack gap={4} style={{ height: 100, background: '#343434' }}>
+  <Stack gap={4} style={{ height: 100 }}>
     <div />
     <div>spacing token as gap</div>
     <div />
   </Stack>
 );
 
 export const Justify = () => (
-  <Stack justify="space-around" style={{ height: 100, background: '#343434' }}>
+  <Stack justify="space-around" style={{ height: 100 }}>
     <div />
     <div />
   </Stack>
 );
 
 export const Align = () => (
-  <Stack align="center" style={{ height: 100, background: '#343434' }}>
+  <Stack align="center" style={{ height: 100 }}>
     <div />
     <div />
   </Stack>

diff --git a/packages/components/src/components/Text/index.tsx b/packages/components/src/components/Text/index.tsx
@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+import css from '@styled-system/css';
+import { Element } from '../Element';
+
+const variants = {
+  body: 'inherit',
+  muted: 'mutedForeground',
+  danger: 'errorForeground',
+};
+
+export const Text = styled(Element).attrs({ as: 'span' })<{
+  size?: number;
+  align?: string;
+  weight?: string;
+  variant?: 'body' | 'muted' | 'danger';
+}>(({ size, align, weight, variant = 'body', ...props }) =>
+  css({
+    fontSize: size || 'inherit', // from theme.fontSizes
+    fontWeight: weight || null, // from theme.fontWeights
+    color: variants[variant],
+    textAlign: align || 'left',
+  })
+);
diff --git a/packages/components/src/components/Text/text.stories.tsx b/packages/components/src/components/Text/text.stories.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import { Text } from '.';
+
+export default {
+  title: 'components/Text',
+  component: Text,
+};
+
+// replace the text inside with Text variants when available
+export const Basic = () => (
+  <Text>This is a static template with no bundling</Text>
+);
+
+export const Variants = () => (
+  <>
+    <Text variant="body">
+      body is the default variant which inherits color from it&apos;s container
+    </Text>
+    <br />
+    <br />
+    <Text variant="muted">
+      Use muted when you don&apos;t want to ask for too much attention
+    </Text>
+    <br />
+    <br />
+    <Text variant="danger">Now, we really want your atttention, hello!</Text>
+  </>
+);
+
+export const Weight = () => (
+  <>
+    <Text weight="thin">thin: These are all the weights Inter supports</Text>
+    <br />
+    <Text weight="light">light: These are all the weights Inter supports</Text>
+    <br />
+    <br />
+    <Text weight="normal">
+      normal (default): Most of our interface uses these 3 sizes
+    </Text>
+    <br />
+    <Text weight="medium">
+      medium: Most of our interface uses these 3 sizes
+    </Text>
+    <br />
+    <Text weight="semibold">
+      semibold: Most of our interface uses these 3 sizes
+    </Text>
+    <br />
+    <br />
+    <Text weight="bold">bold: These are all the weights Inter supports</Text>
+    <br />
+    <Text weight="extrabold">
+      extrabold: These are all the weights Inter supports
+    </Text>
+    <br />
+    <Text weight="black">black: These are all the weights Inter supports</Text>
+    <br />
+  </>
+);
+
+export const Size = () => (
+  <Text size={3}>Takes the size from fontSizes tokens</Text>
+);
+
+export const Align = () => (
+  <Text as="div" align="right">
+    sometimes, just sometimes you need to align right
+  </Text>
+);
diff --git a/packages/components/src/stories/decorators/ThemeDecorator.tsx b/packages/components/src/stories/decorators/ThemeDecorator.tsx
diff --git a/packages/components/src/stories/decorators/index.ts b/packages/components/src/stories/decorators/index.ts
diff --git a/packages/components/src/utils/polyfill-theme.ts b/packages/components/src/utils/polyfill-theme.ts
@@ -14,6 +14,7 @@ import deepmerge from 'deepmerge';
 // In that case, we should check if it exists before overriding it
 const polyfillTheme = vsCodeTheme =>
   deepmerge(vsCodeTheme, {
+    mutedForeground: vsCodeTheme.foreground, // todo: find a way to fill this value
     sideBar: {
       hoverBackground: vsCodeTheme.sideBar.border,
     },
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,6 +4,11 @@ export const fontSizes = [ @@
 ,
 ,
 ,
+,
+,
+,
+,
+,
     ];
     export const fontWeights = {
@@ Expand Down @@