feat(palette): migrate colors to amblea (#154)

amblerhq · Feb 12, 2024 · a41369a · a41369a
1 parent 4a04fd1
commit a41369a
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 29 deletions.
diff --git a/packages/andive/src/components/dropdown-filter.tsx b/packages/andive/src/components/dropdown-filter.tsx
@@ -106,7 +106,7 @@ const StickyFooter = styled.div`
   width: 100%;
   height: 88px;
 
-  box-shadow: inset 0 1px 0 0 #dddddd;
+  box-shadow: inset 0 1px 0 0 ${palette.lightPrimary};
   background: rgba(255, 255, 255, 0.8);
 
   display: flex;

diff --git a/packages/andive/src/components/hover.tsx b/packages/andive/src/components/hover.tsx
@@ -1,9 +1,10 @@
+import * as palette from '../constants/palette'
 import React from 'react'
 import styled from 'styled-components'
 
 const HoverEffect = styled.div`
   :hover {
-    background: #fafafa;
+    background: ${palette.lightGrey};
   }
 `
 

diff --git a/packages/andive/src/components/input.tsx b/packages/andive/src/components/input.tsx
@@ -28,7 +28,7 @@ const getColor = ({state}: GetColorProps) => {
     case 'FILLED':
       return css`
         background-color: white;
-        border: 1px solid #dddddd;
+        border: 1px solid ${palette.lightPrimary};
         color: ${palette.mainText};
       `
     case 'ERRORED':
@@ -39,7 +39,7 @@ const getColor = ({state}: GetColorProps) => {
       `
     case 'DISABLED':
       return css`
-        background-color: #dddddd;
+        background-color: ${palette.lightPrimary};
         color: ${palette.secondaryText};
       `
     case 'EMPTY':

diff --git a/packages/andive/src/components/menu.js b/packages/andive/src/components/menu.js
@@ -41,7 +41,7 @@ const MenuLayout = styled.ul`
 const OptionLayout = styled.div`
   cursor: pointer;
   :hover {
-    ${props => !props.disabled && `background: #fafafa;`}
+    ${props => !props.disabled && `background: ${palette.lightGrey};`}
   }
 
   ${props =>
@@ -87,7 +87,7 @@ const OptionGroupLayout = styled.div`
   cursor: pointer;
 
   :hover {
-    background: #fafafa;
+    background: ${palette.lightGrey};
   }
 `
 
@@ -156,7 +156,7 @@ const BackButton = styled(BackIcon)`
 
   background: white;
   :hover {
-    background: #fafafa;
+    background: ${palette.lightGrey};
   }
 `
 

diff --git a/packages/andive/src/components/svg-icon.js b/packages/andive/src/components/svg-icon.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import styled from 'styled-components'
 import PropTypes from 'prop-types'
+import * as palette from '../constants/palette'
 
 const getWidth = props => (props.circle ? 32 : props.size || 32)
 
@@ -17,7 +18,7 @@ const IconRoot = styled(({size, circleColor, circle, ...props}) => <SvgRoot size
   flex: 0 0 ${getWidth}px;
 
   border-radius: ${props => (props.circle ? '50%' : 0)};
-  background: ${props => (props.circle ? props.circleColor || '#ededed' : 'transparent')};
+  background: ${props => (props.circle ? props.circleColor || palette.darkGrey : 'transparent')};
   & > * {
     position: absolute;
     top: calc(50% - ${props => props.size / 2}px);

diff --git a/packages/andive/src/constants/palette.ts b/packages/andive/src/constants/palette.ts
@@ -1,35 +1,100 @@
 // Raw color palette
 
+// ? copied from andive next for compatibility during migration
+const amblea = {
+  blue: {
+    800: '#0c2344',
+    700: '#1a4b92',
+    600: '#256acf',
+    500: '#568cda',
+    400: '#87aee5',
+    300: '#b8d0f0',
+    200: '#e9f0fb'
+  },
+  grey: {
+    800: '#090c11',
+    700: '#36404e',
+    600: '#63748b',
+    500: '#91a7c7',
+    400: '#b0c0d7',
+    300: '#cfd9e7',
+    200: '#eef1f6',
+    100: '#f7fcfd'
+  },
+  pink: {
+    800: '#532e3b',
+    700: '#b27a8f',
+    600: '#ffb6d1',
+    500: '#ffc2d9',
+    400: '#ffcee1',
+    300: '#ffdae9',
+    200: '#ffe5ef'
+  },
+  tea: {
+    800: '#013f3b',
+    700: '#027f76',
+    600: '#02b2a5',
+    500: '#3bbfb7',
+    400: '#74cdc9',
+    300: '#addbdb',
+    200: '#e6fffd'
+  },
+  azure: {
+    800: '#45757b',
+    700: '#59959d',
+    600: '#83d7e1',
+    500: '#9ddfe7',
+    400: '#b7e7ed',
+    300: '#d1eff3',
+    200: '#eaf8fa'
+  },
+  red: {
+    700: '#c52323',
+    500: '#e18787',
+    200: '#fbe9e9'
+  },
+  orange: {
+    700: '#cf7725',
+    500: '#e5b587',
+    200: '#fff5e1'
+  },
+  green: {
+    700: '#147647',
+    500: '#62c193',
+    200: '#d4f7e7'
+  }
+}
+
 export const white = '#ffffff'
 export const black = '#000000'
 
-export const lightPrimary = '#dddddd'
-export const mediumPrimary = '#708c91'
-export const darkPrimary = '#054752'
+export const lightPrimary = amblea.grey[400] //'#dddddd'
+export const mediumPrimary = amblea.grey[600] //'#708c91'
+export const darkPrimary = amblea.blue[800] //"#054752'
 
-export const lightGrey = '#fafafa'
-export const mediumGrey = '#f4f4f4'
-export const darkGrey = '#ededed'
+export const lightGrey = amblea.grey[100] // '#fafafa'
+export const mediumGrey = amblea.grey[200] //'#f4f4f4'
+export const darkGrey = amblea.grey[200] // '#ededed'
 
-export const darkLettuceGreen = '#0c7615'
-export const mediumLettuceGreen = '#5dd167'
-export const lightLettuceGreen = '#9ee3a4'
+export const darkLettuceGreen = amblea.green[700] // '#0c7615'
+export const mediumLettuceGreen = amblea.green[500] // '#5dd167'
+export const lightLettuceGreen = amblea.green[200] // '#9ee3a4'
 
-export const darkRadishRed = '#a61b30'
-export const mediumRadishRed = '#f53f5b'
-export const lightRadishRed = '#f98c9d'
+export const darkRadishRed = amblea.red[700] // '#a61b30'
+export const mediumRadishRed = amblea.red[500] // '#f53f5b'
+export const lightRadishRed = amblea.red[200] // '#f98c9d'
 
-export const darkPotatoYellow = '#625d11'
-export const mediumPotatoYellow = '#e9e163'
-export const lightPotatoYellow = '#f2eda1'
+export const darkPotatoYellow = amblea.orange[700] // '#625d11'
+export const mediumPotatoYellow = amblea.orange[500] // '#e9e163'
+export const lightPotatoYellow = amblea.orange[200] // '#f2eda1'
 
-export const darkBeetrootPurple = '#5e48af'
-export const mediumBeetrootPurple = '#7056ce'
-export const lightBeetrootPurple = '#ece7ff'
+export const darkBeetrootPurple = amblea.blue[600] // '#5e48af'
+export const mediumBeetrootPurple = amblea.blue[500] // '#7056ce'
+export const lightBeetrootPurple = amblea.blue[200] // '#ece7ff'
 
-export const darkBerryBlue = '#00a3e4'
-export const mediumBerryBlue = '#00aff5'
-export const lightBerryBlue = '#d3f2ff'
+export const darkBerryBlue = amblea.tea[600] // '#00a3e4'
+export const mediumBerryBlue = amblea.tea[600] // '#00aff5'
+export const lightBerryBlue = amblea.tea[200] // '#d3f2ff'
 
 // Semantic color palette