Feature/high level

README.md

@@ -38,4 +38,20 @@ $ yarn test:coverage
 **🛠 stands for fixes or chores**
 
 - [ ] 🛠 Fix bugs with the current component.
-- [ ] ⚠️ Change the color representation structure, to represent solid colors in hex format.
+- [x] Button
+- [x] Typo
+- [x] Box
+- [ ] Image
+- [x] Label
+- [x] Input
+- [x] Spinner
+- [ ] Tabs
+- [ ] Collapsible
+- [ ] Hoverable
+- [x] Scrollable
+- [x] Clickable
+- [x] Flexible
+- [ ] Carousel
+- [ ] Toolbar
+- [ ] Theme Parser
+- [ ] Responsive Breakpoints

src/components/DarksideTheme.tsx → src/components/AdaptProvider.tsx

@@ -2,7 +2,8 @@ import React, { FC } from 'react'
 import { ThemeProvider, DefaultTheme } from 'styled-components'
 
 import { theme } from '../config'
-import { GlobalStyle } from './GlobalStyle'
+import GlobalStyle from './GlobalStyle'
+import Typo from './Typo'
 
 interface Props {
   theme?: DefaultTheme
@@ -12,19 +13,20 @@ interface Props {
  * Wraps around Theme-provider from emotion 💅🏻
  *
  */
-const DarksideTheme: FC<Props> = ({ theme, children }) => {
+const AdaptProvider: FC<Props> = ({ theme, children }) => {
   return (
     <ThemeProvider theme={theme!}>
       <>
         <GlobalStyle />
+        <Typo />
         {children}
       </>
     </ThemeProvider>
   )
 }
 
-DarksideTheme.defaultProps = {
+AdaptProvider.defaultProps = {
   theme: theme,
 }
 
-export { DarksideTheme }
+export default AdaptProvider

src/components/Button.tsx

@@ -1,9 +1,15 @@
 import React, { FC } from 'react'
-import styled from 'styled-components'
+import styled, { DefaultTheme } from 'styled-components'
 
 import { getMeasure } from '../helpers'
-import { Loader } from './Loader'
+import Spinner from './Spinner'
 import Clickable from './core/Clickable'
+import { useTheme } from '../hooks/useTheme'
+
+const parseTheme = (theme: DefaultTheme) => {
+  const buttonSizes = Object.keys(theme.button.sizes)
+  return buttonSizes
+}
 
 const getFontSize = (measure: Measure): number =>
   getMeasure(measure, [0.8, 1, 1.25, 1.5])
@@ -24,10 +30,12 @@ const StyledClickable = styled(Clickable)<any>(({ fontSize, padding }) => ({
 const Button: FC<ButtonType> = ({ size, children, loading, ...props }) => {
   const fontSize = `${getFontSize(size!)}rem`
   const padding = getPadding(size!)
+  const theme = useTheme()
 
+  console.log(parseTheme(theme))
   return (
     <StyledClickable fontSize={fontSize} padding={padding} {...props}>
-      {loading ? <Loader size={getFontSize(size!)} /> : children}
+      {loading ? <Spinner size={getFontSize(size!)} /> : children}
     </StyledClickable>
   )
 }

src/components/GlobalStyle.tsx

@@ -1,34 +1,23 @@
 import { createGlobalStyle } from 'styled-components'
 
-export const GlobalStyle = createGlobalStyle`
-  @import url('https://fonts.googleapis.com/css?family=Work+Sans:400,500,700&display=swap');
+const GlobalStyle = createGlobalStyle`
 
   *,
   *::before,
   *::after {
     box-sizing: inherit;
   }
 
-  h1, h2, h3, h4, h5, h6, p, button, input { 
-    font-family: 'Work Sans', sans-serif;
-    line-height: 1.15; 
-  }
-
   html {
-    line-height: 1.15; 
-    -webkit-text-size-adjust: 100%;
     box-sizing: border-box;
     margin: 0;
     padding: 0;
   }
 
   body {
-    font-family: 'Work Sans', sans-serif;
     overflow-x: hidden;
-    text-rendering: optimizeLegibility;
     background-color: rgb(16, 16, 28) ;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-    font-variant-ligatures: no-common-ligatures;
     padding: 0;
     margin: 0;
   }
@@ -43,41 +32,16 @@ export const GlobalStyle = createGlobalStyle`
     overflow: visible; 
   }
 
-  pre {
-    font-family: monospace, monospace; 
-    font-size: 1em; 
-  }
-
   a {
     background-color: transparent;
   }
 
   abbr[title] {
     border-bottom: none;
-    text-decoration: underline; 
-    text-decoration: underline dotted; 
-  }
-
-  b,
-  strong {
-    font-weight: bolder;
-  }
-
-  code,
-  kbd,
-  samp {
-    font-family: monospace, monospace;
-    font-size: 1em; 
-  }
-
-  small {
-    font-size: 80%;
   }
 
   sub,
   sup {
-    font-size: 75%;
-    line-height: 0;
     position: relative;
     vertical-align: baseline;
   }
@@ -99,9 +63,6 @@ export const GlobalStyle = createGlobalStyle`
   optgroup,
   select,
   textarea {
-    font-family: inherit; 
-    font-size: 100%; 
-    line-height: 1.15; 
     margin: 0; 
   }
 
@@ -110,11 +71,6 @@ export const GlobalStyle = createGlobalStyle`
     overflow: visible;
   }
 
-  button,
-  select {
-    text-transform: none;
-  }
-
   button,
   [type="button"],
   [type="reset"],
@@ -180,7 +136,6 @@ export const GlobalStyle = createGlobalStyle`
 
   ::-webkit-file-upload-button {
     -webkit-appearance: button; 
-    font: inherit; 
   }
 
   details {
@@ -200,3 +155,5 @@ export const GlobalStyle = createGlobalStyle`
     display: none;
   }
 `
+
+export default GlobalStyle