Merge pull request #212 from WTTJ/theme-fixs

fix: edit colors config on themes
WTTJ · Jul 17, 2019 · a0ac1c8 · a0ac1c8 · vercel · Jul 17, 2019
2 parents d074c4b + 818e45a
commit a0ac1c8
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 65 deletions.
diff --git a/doczrc.js b/doczrc.js
@@ -1,9 +1,9 @@
 import { css } from 'styled-components'
 
-import { welcomeTheme } from './src/theme/welcome'
+import { welcomekitTheme } from './src/theme/welcomekit'
 import { createTheme } from './src/theme/core'
 
-const theme = createTheme(welcomeTheme)
+const theme = createTheme(welcomekitTheme)
 
 export default {
   title: 'Welcome UI',

diff --git a/src/components/Button/index.test.js b/src/components/Button/index.test.js
@@ -13,7 +13,7 @@ describe('<Button>', () => {
 
     expect(button).toHaveTextContent(content)
     expect(button).not.toBeDisabled()
-    expect(button).toHaveStyleRule('background-color', '#1B74B5')
+    expect(button).toHaveStyleRule('background-color', '#187EC7')
     expect(button).toHaveStyleRule('height', '2.25rem')
   })
 

diff --git a/src/components/FileUpload/styles.js b/src/components/FileUpload/styles.js
@@ -21,7 +21,7 @@ const disabledStyles = css`
 
   h3,
   p {
-    color: nude.300;
+    color: nude.700;
   }
 `
 
@@ -40,7 +40,6 @@ export const FileUpload = styled.div(
     h3 {
       font-size: h3;
       font-weight: normal;
-      color: secondary.500;
     }
 
     ${props.disabled && disabledStyles};

diff --git a/src/components/Pagination/styles.js b/src/components/Pagination/styles.js
@@ -39,18 +39,17 @@ const AbstractLink = styled.a`
   cursor: pointer;
   border-radius: 50%;
   transition: medium;
-  transition-property: color, box-shadow;
+  transition-property: color;
   text-decoration: none;
 
   &:focus {
     outline: none;
-    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
+    transition: none;
   }
 `
 
 export const ArrowLink = styled(AbstractLink)`
   ${th('paginations.arrow')};
-  transition-property: color, box-shadow, border-color;
 `
 
 export const PageLink = styled(AbstractLink)`

diff --git a/src/theme/colors.js b/src/theme/colors.js
@@ -1,11 +1,12 @@
 export const colors = {
   primary: {
     200: '#208DDB',
-    500: '#1B74B5'
+    500: '#187EC7'
   },
   secondary: {
     200: '#3A3A3A',
-    500: '#232323'
+    500: '#2E2E2E',
+    700: '#171717'
   },
   success: {
     200: '#66CC75',

diff --git a/src/theme/paginations.js b/src/theme/paginations.js
@@ -6,31 +6,33 @@ export const getPaginations = ({ colors, fontSizes, fontWeights, toRem }) => ({
     'border-width': '1px',
     'border-style': 'solid',
     width: toRem(30),
-    height: toRem(30)
+    height: toRem(30),
+    '&:hover, &:focus': {
+      color: colors.nude[800],
+      'border-color': colors.nude[400]
+    }
   },
   active: {
     color: colors.light[100],
     'background-color': colors.primary[500],
     'border-color': colors.primary[500],
     '&:hover, &:focus': {
-      color: colors.light[100]
+      color: colors.light[100],
+      'border-color': colors.primary[500]
     }
   },
   number: {
+    'font-size': fontSizes.body3
+  },
+  dots: {
+    color: colors.nude[600],
     'font-size': fontSizes.body3,
     '&:hover, &:focus': {
-      color: colors.nude[800]
+      border: 'none'
     }
   },
-  dots: {
-    'font-size': fontSizes.body3
-  },
   arrow: {
     'background-color': colors.light[200],
-    'border-color': colors.nude[200],
-    '&:hover, &:focus': {
-      color: colors.nude[800],
-      'border-color': colors.nude[400]
-    }
+    'border-color': colors.nude[200]
   }
 })
diff --git a/src/theme/welcome.js b/src/theme/welcome.js
@@ -1,4 +1,8 @@
 const palette = {
+  // primary
+  seafoamblue: '#00C29A',
+  carribeangreen: '#66C8AB',
+
   richblack: '#050506',
   smokyblack: '#0B0B0D',
   licorice: '#101013',
@@ -19,61 +23,88 @@ const palette = {
   isabelline: '#EEEEEE',
   snow: '#F9F9F9',
 
+  // states : infos, warning & danger
+  bluedefrance: '#3790F0',
+  blueberry: '#4B9BF1',
+  anzac: '#DDA343',
+  sunray: '#E4AE56',
+  carmen: '#BF4C3B',
+  valencia: '#CE5947',
+
+  // others
   iceberg: '#71A6DE',
   lightcyan: '#E1F0FF',
-
-  pastelorange: '#FFAF51',
-  lemonchiffon: '#FFF2E3',
-
-  seafoamblue: '#00C29A',
-  carribeangreen: '#66C8AB',
   pastelmint: '#E3F8F4',
-
-  alabamacrimson: '#F35454',
-  mistryrose: '#FEE6E6',
-
   linkedin: '#0077B5'
 }
 
+const colors = {
+  primary: {
+    200: palette.carribeangreen,
+    500: palette.seafoamblue
+  },
+  secondary: {
+    200: palette.granite,
+    500: palette.onyx,
+    700: palette.metal
+  },
+  danger: {
+    200: palette.valencia,
+    500: palette.carmen
+  },
+  warning: {
+    200: palette.sunray,
+    500: palette.anzac
+  },
+  info: {
+    200: palette.blueberry,
+    500: palette.bluedefrance
+  },
+  light: {
+    100: '#FFFFFF',
+    200: palette.snow,
+    500: palette.isabelline,
+    700: palette.timberwolf
+  },
+  dark: {
+    200: palette.metal,
+    500: palette.raisinblack,
+    700: palette.moodyblack,
+    900: palette.richblack
+  },
+  nude: {
+    100: palette.isabelline,
+    200: palette.timberwolf,
+    300: palette.silver,
+    400: palette.silverchalice,
+    500: palette.steel,
+    600: palette.battleship,
+    700: palette.granite,
+    800: palette.darkliver
+  }
+}
+
 export const welcomeTheme = {
-  colors: {
-    primary: {
-      200: palette.carribeangreen,
-      500: palette.seafoamblue
-    },
+  colors,
+  buttons: {
     secondary: {
-      200: palette.raisinblack,
-      500: palette.moodyblack,
-      700: palette.eerieblack
-    },
-    danger: {
-      500: palette.alabamacrimson
-    },
-    warning: {
-      200: palette.lemonchiffon,
-      500: palette.pastelorange
+      color: colors.secondary[500]
     },
-    light: {
-      100: '#FFFFFF',
-      200: palette.snow,
-      500: palette.isabelline,
-      700: palette.timberwolf
+    tertiary: {
+      'background-color': colors.secondary[500],
+      'border-color': colors.secondary[500]
     },
-    dark: {
-      200: palette.licorice,
-      500: palette.smokyblack,
-      700: palette.richblack,
-      900: '#000'
+    focused: {
+      secondary: {
+        color: colors.secondary[200]
+      },
+      tertiary: {
+        'background-color': colors.secondary[200],
+        'border-color': colors.secondary[200]
+      }
     },
-    nude: {
-      100: palette.silver,
-      200: palette.silverchalice,
-      300: palette.steel,
-      400: palette.battleship,
-      500: palette.granite,
-      600: palette.darkliver,
-      700: palette.onyx,
-      800: palette.metal
+    disabled: {
+      color: colors.nude[600]
     }
   },
   palette