Skip to content

Commit

Permalink
feat: rebranding of colors
Browse files Browse the repository at this point in the history
  • Loading branch information
@theo-mesnil
theo-mesnil committed Jul 29, 2024
1 parent e3562ad commit 7cbb2ce
Show file tree
Hide file tree
Showing 28 changed files with 342 additions and 1,603 deletions.
1 change: 1 addition & 0 deletions packages/Core/src/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
// Themes
export * from './theme/core'
export * from './theme/dark'

// Base
export * from './utils/base'
Expand Down
262 changes: 153 additions & 109 deletions packages/Core/src/theme/colors.ts
View file
Original file line number Diff line number Diff line change
@@ -1,116 +1,160 @@
const palette = {
// dark
mercury: 'rgba(0, 0, 0, 0.1)',
todo: 'rgba(0, 0, 0, 0.17)',
nobel: 'rgba(0, 0, 0, 0.4)',
empress: 'rgba(0, 0, 0, 0.55)',
tundora: 'rgba(0, 0, 0, 0.7)',
black: 'rgba(0, 0, 0, 1)',

// light
nero: 'rgba(255, 255, 255, 0.1)',
mineshaft: 'rgba(255, 255, 255, 0.17)',
granite: 'rgba(255, 255, 255, 0.4)',
battleship: 'rgba(255, 255, 255, 0.55)',
silverchalice: 'rgba(255, 255, 255, 0.7)',
white: 'rgba(255, 255, 255, 1)',

// success
gin: '#E3F0EC',
riptide: '#99DCC7',
puertorico: '#45BE98',
jade: '#00A772',
spanishviridian: '#00875C',

// danger
rosewhite: '#FFE7E7',
beautybush: '#EBBDB5',
japonica: '#D87C6E',
valencia: '#CE5947',
carmen: '#AF4636',

// info
aliceblue: '#EDF3FE',
sail: '#B7D7F9',
lightsky: '#9AC7F7',
blueberry: '#4B9BF1',
celticblue: '#106DD1',

// warning
floralwhite: '#FFF2DC',
sidecar: '#F4DFBB',
marzipan: '#EBC484',
sunray: '#E4AE56',
bourbon: '#B97F22',

//subs
paleblue: '#8CB3DB',
blue: '#3B52D0',
red: '#EE4B65',
tangerine: '#F79D85',
palegreen: '#A5D0A8',
green: '#267566',
purple: '#9B8CC0',
'beige-10': '#FBF9F7',
'beige-20': '#F6F3EF',
'beige-30': '#F0EBE5',
'beige-40': '#D8D2CB',
'beige-50': '#B8B1A8',
'beige-60': '#928C85',
'beige-70': '#605B55',
'beige-80': '#3E3A35',
'beige-90': '#33302D',
'beige-100': '#272522',
'blue-10': '#E0F5FF',
'blue-20': '#BBEAFF',
'blue-30': '#9BDEF7',
'blue-40': '#55C3E9', // brand
'blue-50': '#27A5D0',
'blue-60': '#057AA3',
'blue-70': '#025A79',
'blue-80': '#013C50',
'blue-90': '#00202B',
'teal-10': '#D5FFFA',
'teal-20': '#AAF4EB',
'teal-30': '#6DE1D2',
'teal-40': '#00C7AE', // brand
'teal-50': '#01AA95',
'teal-60': '#008070',
'teal-70': '#00544A',
'teal-80': '#003D35',
'teal-90': '#00211D',
'gray-10': '#F3F3F3',
'gray-20': '#DEDEDE',
'gray-30': '#BDBDBD',
'gray-40': '#989898',
'gray-50': '#7B7B7B',
'gray-60': '#585858',
'gray-70': '#444444',
'gray-80': '#262626',
'green-10': '#EAFFD4',
'green-20': '#D6F6B4',
'green-30': '#BADE94', // brand
'green-40': '#9FC873',
'green-50': '#83AD57',
'green-60': '#5A8034',
'green-70': '#40611F',
'green-80': '#2A4210',
'green-90': '#142603',
'orange-10': '#FFDED0',
'orange-20': '#FFC9B2',
'orange-30': '#FFB595',
'orange-40': '#FF9868', // brand
'orange-50': '#E67B49',
'orange-60': '#C45927',
'orange-70': '#9F4217',
'orange-80': '#6D2605',
'orange-90': '#451701',
'pink-10': '#FFEAF5',
'pink-20': '#FFD5EB',
'pink-30': '#FEB7DC',
'pink-40': '#F696C8', // brand
'pink-50': '#E468A8',
'pink-60': '#C24887',
'pink-70': '#972962',
'pink-80': '#6D1142',
'pink-90': '#3C0725',
'purple-10': '#F2F2FF',
'purple-20': '#E0E0FF',
'purple-30': '#C9C9FF',
'purple-40': '#ACACFF', // brand
'purple-50': '#9080F0',
'purple-60': '#7958D6',
'purple-70': '#593CAC',
'purple-80': '#422A86',
'purple-90': '#1F0E51',
'red-10': '#FFEAEA',
'red-20': '#FFDCD2',
'red-30': '#FFC2B1',
'red-40': '#F79D85',
'red-50': '#F79D85',
'red-60': '#C86347',
'red-70': '#A5462D',
'red-80': '#842B18',
'red-90': '#691D0C',
'yellow-10': '#FFF9E1',
'yellow-20': '#FFF1B2',
'yellow-30': '#FFE166',
'yellow-40': '#FFCD00',
'yellow-50': '#E9BC06',
'yellow-60': '#C8A102',
'yellow-70': '#A88700',
'yellow-80': '#846A01',
'yellow-90': '#604D00',
'yellow-100': '#423500',
black: '#000000',
white: '#FFFFFF',
}

export const colors = {
'primary-100': '#EBFAFA',
'primary-200': '#86E4DF',
'primary-500': '#36D2C9',
'primary-600': '#31BDB5',
'primary-700': '#207E79',
'primary-800': '#185F5B',
'primary-900': '#103F3C',
'success-100': palette.gin,
'success-200': palette.riptide,
'success-300': palette.puertorico,
'success-400': palette.jade,
'success-500': palette.spanishviridian,
'danger-100': palette.rosewhite,
'danger-200': palette.beautybush,
'danger-300': palette.japonica,
'danger-400': palette.valencia,
'danger-500': palette.carmen,
'warning-100': palette.floralwhite,
'warning-200': palette.sidecar,
'warning-300': palette.marzipan,
'warning-400': palette.sunray,
'warning-500': palette.bourbon,
'info-100': palette.aliceblue,
'info-200': palette.sail,
'info-300': palette.lightsky,
'info-400': palette.blueberry,
'info-500': palette.celticblue,
'light-100': palette.nero,
'light-200': palette.mineshaft,
'light-400': palette.granite,
'light-500': palette.battleship,
'light-700': palette.silverchalice,
'light-900': palette.white,
'dark-100': palette.mercury,
'dark-200': palette.todo,
'dark-400': palette.nobel,
'dark-500': palette.empress,
'dark-700': palette.tundora,
'dark-900': palette.black,
'nude-100': '#F3FAFA',
'nude-200': '#E9F6F6',
'nude-400': '#D2DDDD',
'nude-600': '#8C9494',
'nude-700': '#696F6F',
'nude-900': '#464A4A',
'sub-1': palette.paleblue,
'sub-2': palette.blue,
'sub-3': palette.red,
'sub-4': palette.tangerine,
'sub-5': palette.palegreen,
'sub-6': palette.green,
'sub-7': palette.purple,
black: palette.black,
white: palette.white,
overlay: palette.empress,
border: palette.mercury,
underline: '#36D2C9',
...palette,
'brand-green': palette['green-30'],
'brand-teal': palette['teal-40'],
'brand-blue': palette['blue-40'],
'brand-purple': palette['purple-40'],
'brand-pink': palette['pink-40'],
'brand-orange': palette['orange-40'],
'primary-10': palette['yellow-10'],
'primary-20': palette['yellow-20'],
'primary-30': palette['yellow-30'],
'primary-40': palette['yellow-40'],
'primary-50': palette['yellow-50'],
'primary-60': palette['yellow-60'],
'primary-70': palette['yellow-70'],
'primary-80': palette['yellow-80'],
'primary-90': palette['yellow-90'],
'primary-100': palette['yellow-100'],
'nude-10': palette['beige-10'],
'nude-20': palette['beige-20'],
'nude-30': palette['beige-30'],
'nude-40': palette['beige-40'],
'nude-50': palette['beige-50'],
'nude-60': palette['beige-60'],
'nude-70': palette['beige-70'],
'nude-80': palette['beige-80'],
'nude-90': palette['beige-90'],
'nude-100': palette['beige-100'],
'neutral-white': palette.white,
'neutral-10': palette['gray-10'],
'neutral-20': palette['gray-20'],
'neutral-30': palette['gray-30'],
'neutral-40': palette['gray-40'],
'neutral-50': palette['gray-50'],
'neutral-60': palette['gray-60'],
'neutral-70': palette['gray-70'],
'neutral-80': palette['gray-80'],
'neutral-black': palette.black,
'success-10': palette['green-10'],
'success-20': palette['green-20'],
'success-30': palette['green-30'],
'success-40': palette['green-60'],
'success-50': palette['green-70'],
'danger-10': palette['red-10'],
'danger-20': palette['red-20'],
'danger-30': palette['red-30'],
'danger-40': palette['red-60'],
'danger-50': palette['red-70'],
'warning-10': palette['orange-10'],
'warning-20': palette['orange-20'],
'warning-30': palette['orange-30'],
'warning-40': palette['orange-60'],
'warning-50': palette['orange-70'],
'info-10': palette['blue-10'],
'info-20': palette['blue-20'],
'info-30': palette['blue-30'],
'info-40': palette['blue-60'],
'info-50': palette['blue-70'],
overlay: 'rgba(0, 0, 0, 0.55)',
border: palette['gray-20'],
underline: palette['yellow-40'],
}

export type ThemeColors = typeof colors
54 changes: 54 additions & 0 deletions packages/Core/src/theme/dark.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import { createTheme } from './core'
import { WuiTheme } from './types'

const theme = createTheme()

type RecursivePartial<T> = {
[P in keyof T]?: T[P] | RecursivePartial<T[P]>
}

export const colors: WuiTheme['colors'] = {
...theme.colors,
'gray-10': theme.colors['gray-80'],
'gray-20': theme.colors['gray-70'],
'gray-30': theme.colors['gray-60'],
'gray-40': theme.colors['gray-50'],
'gray-50': theme.colors['gray-40'],
'gray-60': theme.colors['gray-30'],
'gray-70': theme.colors['gray-20'],
'gray-80': theme.colors['gray-10'],
'beige-10': theme.colors['beige-100'],
'beige-20': theme.colors['beige-90'],
'beige-30': theme.colors['beige-80'],
'beige-40': theme.colors['beige-70'],
'beige-50': theme.colors['beige-60'],
'beige-60': theme.colors['beige-50'],
'beige-70': theme.colors['beige-40'],
'beige-80': theme.colors['beige-30'],
'beige-90': theme.colors['beige-20'],
'beige-100': theme.colors['beige-10'],
'nude-10': theme.colors['nude-100'],
'nude-20': theme.colors['nude-90'],
'nude-30': theme.colors['nude-80'],
'nude-40': theme.colors['nude-70'],
'nude-50': theme.colors['nude-60'],
'nude-60': theme.colors['nude-50'],
'nude-70': theme.colors['nude-40'],
'nude-80': theme.colors['nude-30'],
'nude-90': theme.colors['nude-20'],
'nude-100': theme.colors['nude-10'],
'neutral-white': theme.colors['neutral-black'],
'neutral-10': theme.colors['neutral-80'],
'neutral-20': theme.colors['neutral-70'],
'neutral-30': theme.colors['neutral-60'],
'neutral-40': theme.colors['neutral-50'],
'neutral-50': theme.colors['neutral-40'],
'neutral-60': theme.colors['neutral-30'],
'neutral-80': theme.colors['neutral-20'],
'neutral-black': theme.colors['neutral-white'],
border: theme.colors['neutral-70'],
}

export const darkTheme: RecursivePartial<WuiTheme> = {
colors,
}
18 changes: 2 additions & 16 deletions packages/Core/tests/index.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { welcomeTheme } from '../../Themes/Welcome'
import { createTheme } from '../src/theme/core'
import { colors } from '../src/theme/colors'

Expand All @@ -8,21 +7,8 @@ test('core theme has the correct color for buttons.primary.color', () => {
expect(theme.buttons.primary.color).toBe(colors['dark-900'])
})

test('welcomeTheme correctly overwrites core theme.buttons with its custom styles', () => {
const theme = createTheme(welcomeTheme)

expect(theme.buttons.primary.color).toBe('rgba(0, 0, 0, 1)')
})

test('Can overwrite welcomeTheme.buttons with custom button styles', () => {
const theme = createTheme({
...welcomeTheme,
buttons: {
primary: {
color: 'red',
},
},
})
test('correctly overwrites core theme.buttons with its custom styles', () => {
const theme = createTheme({ buttons: { primary: { color: 'red' } } })

expect(theme.buttons.primary.color).toBe('red')
})
Loading

0 comments on commit 7cbb2ce

Please sign in to comment.