feat(colors): update colors to match andive-next migration (#153)

amblerhq · Oct 31, 2023 · 5805421 · 5805421 · vercel · Oct 31, 2023
1 parent 4a25ce9
commit 5805421
Show file tree

Hide file tree

Showing 16 changed files with 34 additions and 34 deletions.
diff --git a/packages/andive/src/components/alert.tsx b/packages/andive/src/components/alert.tsx
@@ -16,7 +16,7 @@ const backgroundColors = {
   success: palette.lightLettuceGreen,
   error: palette.lightRadishRed,
   warning: palette.lightPotatoYellow,
-  info: palette.lightBeetrootPurple,
+  info: palette.mediumBeetrootPurple,
   disabled: palette.border
 }
 

diff --git a/packages/andive/src/components/button.tsx b/packages/andive/src/components/button.tsx
@@ -8,7 +8,7 @@ import {ButtonGroupContext} from './button-group'
 import Box from './box'
 
 const lightGreyAlpha = palette.hexToRGBA(palette.mediumPrimary, 0.5)
-const lightBeetrootPurpleAlpha = palette.hexToRGBA(palette.mediumBeetrootPurple, 0.5)
+const lightBeetrootPurpleAlpha = palette.hexToRGBA(palette.darkBeetrootPurple, 0.5)
 
 interface ButtonProps {
   className?: string
@@ -58,7 +58,7 @@ const ButtonWrapper = styled.div.attrs({
     css`
       &:hover {
         background-color: ${props.$invert
-          ? palette.hexToRGBA(palette.darkGrey, 0.2)
+          ? palette.hexToRGBA(palette.lightPrimary, 0.2)
           : props.theme.hover.backgroundColor};
         border-radius: ${props.theme.hover.borderRadius}px;
       }
@@ -121,7 +121,7 @@ function defaultColor({disabled}) {
     return lightBeetrootPurpleAlpha
   }
 
-  return palette.mediumBeetrootPurple
+  return palette.darkBeetrootPurple
 }
 
 const DefaultButton = styled(ResetButton)<{
@@ -134,7 +134,7 @@ const DefaultButton = styled(ResetButton)<{
   disabled?: boolean
   loading?: boolean
 }>`
-  border: 1px solid ${palette.mediumBeetrootPurple};
+  border: 1px solid ${palette.darkBeetrootPurple};
   background-color: ${props => props.backgroundColor || palette.white};
   color: ${props => props.color};
   height: ${props => (props.mobile ? 40 : 56)}px;
@@ -191,8 +191,8 @@ const PrimaryButton = styled(DefaultButton)<{
   backgroundColor?: string
   disabled?: boolean
 }>`
-  border: 1px solid ${props => (props.invert ? palette.white : palette.mediumBeetrootPurple)};
-  background-color: ${props => props.backgroundColor || palette.mediumBeetrootPurple};
+  border: 1px solid ${props => (props.invert ? palette.white : palette.darkBeetrootPurple)};
+  background-color: ${props => props.backgroundColor || palette.darkBeetrootPurple};
   color: ${props => props.color};
   border-radius: 28px;
   box-shadow: 0 2px 5px 0 ${palette.hexToRGBA(palette.darkPrimary, 0.2)};
@@ -317,7 +317,7 @@ const Button = React.forwardRef(function Button(
       return invert ? palette.white : palette.mediumBerryBlue
     }
 
-    return palette.mediumBeetrootPurple
+    return palette.darkBeetrootPurple
   }, [variant, loading, invert])
 
   const contentJsx = (

diff --git a/packages/andive/src/components/dropdown-base.tsx b/packages/andive/src/components/dropdown-base.tsx
@@ -8,7 +8,7 @@ const DropdownBaseRoot = styled.div`
 
   padding: 16px;
   border-radius: 8px;
-  box-shadow: 0 1px 4px 0 ${palette.hexToRGBA(palette.darkPrimary, 0.3)};
+  box-shadow: 0 1px 4px 0 ${palette.lightPrimary};
 `
 
 interface DropdownBaseProps {

diff --git a/packages/andive/src/components/dropdown-filter.tsx b/packages/andive/src/components/dropdown-filter.tsx
@@ -30,7 +30,7 @@ const Menu = styled.div<{openLeft?: boolean; mobile?: boolean}>`
   margin-top: 8px;
   padding: 16px 16px 0 16px;
   border-radius: 8px;
-  box-shadow: 0 1px 4px 0 ${palette.hexToRGBA(palette.darkPrimary, 0.3)};
+  box-shadow: 0 1px 4px 0 ${palette.lightPrimary};
   background: white;
 
   z-index: ${ZIndexes.MODALS + 1};

diff --git a/packages/andive/src/components/dropdown.js b/packages/andive/src/components/dropdown.js
@@ -44,7 +44,7 @@ function DropdownComponent({
   return (
     <Dropdown fullWidth={fullWidth} {...props}>
       <Body2 color={palette.mediumPrimary}>{label}</Body2>
-      {disabled ? <Body1 color={palette.darkGrey}>{value || '—'}</Body1> : <Select {...selectProps} />}
+      {disabled ? <Body1 color={palette.lightPrimary}>{value || '—'}</Body1> : <Select {...selectProps} />}
     </Dropdown>
   )
 }

diff --git a/packages/andive/src/components/filter-button.tsx b/packages/andive/src/components/filter-button.tsx
@@ -12,7 +12,7 @@ const FilterButtonRoot = styled(({active, backgroundColor, ...props}) => <button
   outline: none;
   border: none;
   background: ${({active, backgroundColor}) =>
-    backgroundColor || (active ? palette.mediumBerryBlue : palette.mediumGrey)};
+    backgroundColor || (active ? palette.mediumBerryBlue : palette.darkGrey)};
   border-radius: 16px;
   cursor: pointer;
   height: 40px;
@@ -31,7 +31,7 @@ const FilterButtonRoot = styled(({active, backgroundColor, ...props}) => <button
     `}
 
   &:hover {
-    background-color: ${({active}) => (active ? palette.darkBerryBlue : palette.darkGrey)};
+    background-color: ${({active}) => (active ? palette.darkBerryBlue : palette.lightPrimary)};
   }
 `
 

diff --git a/packages/andive/src/components/icons/ambler.tsx b/packages/andive/src/components/icons/ambler.tsx
@@ -6,7 +6,7 @@ import {palette} from '../..'
 
 const DEFAULT_SIZE = 24
 
-const AmblerIcon = ({color = palette.lightBeetrootPurple, size = DEFAULT_SIZE, ...rest}) => {
+const AmblerIcon = ({color = palette.mediumBeetrootPurple, size = DEFAULT_SIZE, ...rest}) => {
   return (
     <SvgIcon color={color} size={size} {...rest}>
       <Ambler />

diff --git a/packages/andive/src/components/icons/patient-add.tsx b/packages/andive/src/components/icons/patient-add.tsx
@@ -5,7 +5,7 @@ import {palette} from '../..'
 
 const DEFAULT_SIZE = 24
 
-const PatientAddIcon = ({color = palette.mediumBeetrootPurple, size = DEFAULT_SIZE, ...rest}) => {
+const PatientAddIcon = ({color = palette.darkBeetrootPurple, size = DEFAULT_SIZE, ...rest}) => {
   return (
     <SvgIcon color={color} size={size} {...rest}>
       <PatientAdd />

diff --git a/packages/andive/src/components/info/block.tsx b/packages/andive/src/components/info/block.tsx
@@ -57,9 +57,9 @@ function Block({icon, variant, colors, className, children}: Props) {
     : variant === 'warning'
     ? palette.lightPotatoYellow
     : variant === 'info'
-    ? palette.hexToRGBA(palette.lightBeetrootPurple, 0.6)
+    ? palette.lightBeetrootPurple
     : variant === 'disabled'
-    ? palette.border
+    ? palette.darkGrey
     : palette.white
 
   // TODO: Fix the icon's React.cloneElement issue (remove the 'as any' cast to see).

diff --git a/packages/andive/src/components/input.tsx b/packages/andive/src/components/input.tsx
@@ -44,7 +44,7 @@ const getColor = ({state}: GetColorProps) => {
       `
     case 'EMPTY':
       return css`
-        background-color: ${palette.mediumGrey};
+        background-color: ${palette.darkGrey};
         ::placeholder {
           color: ${palette.secondaryText};
         }

diff --git a/packages/andive/src/components/loader.js b/packages/andive/src/components/loader.js
@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styled, {keyframes} from 'styled-components'
 
-import {lightBeetrootPurple} from '../constants/palette'
+import {mediumBeetrootPurple} from '../constants/palette'
 import {ZIndexes} from '../constants/enum'
 
 const LoaderModal = styled.div`
@@ -63,7 +63,7 @@ const Circle = styled.circle`
   animation: ${dash} ${duration} ease-in-out infinite;
 `
 
-function Loader({size = 32, color = lightBeetrootPurple, ...props}) {
+function Loader({size = 32, color = mediumBeetrootPurple, ...props}) {
   return (
     <Svg viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg" width={size} height={size} {...props}>
       <Circle cx="33" cy="33" r="30" fill="none" stroke={color} />

diff --git a/packages/andive/src/components/menu.js b/packages/andive/src/components/menu.js
@@ -26,7 +26,7 @@ const MenuLayout = styled.ul`
   padding: 8px;
 
   background: white;
-  border: 1px solid ${palette.mediumGrey};
+  border: 1px solid ${palette.darkGrey};
   border-radius: 8px;
   box-shadow: 0 1px 4px 0 ${palette.darkPrimary}44;
 

diff --git a/packages/andive/src/components/modal.js b/packages/andive/src/components/modal.js
@@ -9,7 +9,7 @@ import {ZIndexes} from '../constants/enum'
 
 const Modal = posed(styled.div`
   position: fixed;
-  background: ${props => (props.transparent ? palette.hexToRGBA(palette.white, 0.8) : palette.lightBeetrootPurple)};
+  background: ${props => (props.transparent ? palette.hexToRGBA(palette.white, 0.8) : palette.mediumBeetrootPurple)};
 
   top: 0;
   left: 0;

diff --git a/packages/andive/src/components/toast.js b/packages/andive/src/components/toast.js
@@ -5,7 +5,7 @@ import useInterval from 'use-interval'
 import moment from 'moment'
 
 import {ZIndexes} from '../constants/enum'
-import {success, error, warning, lightBeetrootPurple} from '../constants/palette'
+import {success, error, warning, mediumBeetrootPurple} from '../constants/palette'
 
 let queue = []
 
@@ -49,9 +49,9 @@ function typeToColor(type) {
     case ToastType.WARNING:
       return warning
     case ToastType.INFO:
-      return lightBeetrootPurple
+      return mediumBeetrootPurple
     default:
-      return lightBeetrootPurple
+      return mediumBeetrootPurple
   }
 }
 

diff --git a/packages/andive/src/components/upload.tsx b/packages/andive/src/components/upload.tsx
@@ -14,7 +14,7 @@ const UploadRow = styled.div<{$showError?: boolean; $isHighlighted?: boolean}>`
 
   padding: 16px;
 
-  border: 1px dashed ${({$isHighlighted}) => ($isHighlighted ? palette.lightBeetrootPurple : palette.lightPrimary)};
+  border: 1px dashed ${({$isHighlighted}) => ($isHighlighted ? palette.mediumBeetrootPurple : palette.lightPrimary)};
   ${({$showError}) => ($showError ? `border: 1px dashed ${palette.lightRadishRed}` : ``)};
   box-sizing: border-box;
   border-radius: 4px;
@@ -153,7 +153,7 @@ export const Upload = ({onChange, onDrag, error, loading, mobile, ...props}: Upl
                 <HiddenInput id="file" name="file" type="file" onChange={onChange} {...props} />
                 <PaddingBox>
                   <InputLabel htmlFor="file">
-                    <Body2 color={palette.lightBerryBlue}>Parcourir mes fichiers</Body2>
+                    <Body2 color={palette.mediumBerryBlue}>Parcourir mes fichiers</Body2>
                   </InputLabel>
                 </PaddingBox>
               </>

diff --git a/packages/andive/src/constants/palette.ts b/packages/andive/src/constants/palette.ts
@@ -8,8 +8,8 @@ export const mediumPrimary = '#708c91'
 export const darkPrimary = '#054752'
 
 export const lightGrey = '#fafafa'
-export const mediumGrey = '#ededed'
-export const darkGrey = '#dddddd'
+export const mediumGrey = '#f4f4f4'
+export const darkGrey = '#ededed'
 
 export const darkLettuceGreen = '#0c7615'
 export const mediumLettuceGreen = '#5dd167'
@@ -23,13 +23,13 @@ export const darkPotatoYellow = '#625d11'
 export const mediumPotatoYellow = '#e9e163'
 export const lightPotatoYellow = '#f2eda1'
 
-export const darkBeetrootPurple = '#55468c'
-export const mediumBeetrootPurple = '#5e48af'
-export const lightBeetrootPurple = '#7056ce'
+export const darkBeetrootPurple = '#5e48af'
+export const mediumBeetrootPurple = '#7056ce'
+export const lightBeetrootPurple = '#ece7ff'
 
 export const darkBerryBlue = '#00a3e4'
 export const mediumBerryBlue = '#00aff5'
-export const lightBerryBlue = '#1dbeff'
+export const lightBerryBlue = '#d3f2ff'
 
 // Semantic color palette
 
@@ -41,7 +41,7 @@ export const error = mediumRadishRed
 export const errorText = darkRadishRed
 export const success = mediumLettuceGreen
 export const successText = darkLettuceGreen
-export const border = mediumGrey
+export const border = lightPrimary
 
 export function hexToRGBA(hex: string, alpha: number) {
   const r = parseInt(hex.slice(1, 3), 16),