Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: change the color palette #48

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
+221 −152
Open

chore: change the color palette #48

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
72547b8
chore: updating the colors to the new variants of storyblok
marcosh-ramos Jan 17, 2025
74cf601
chore: change shadows to folow the storyblok design system
marcosh-ramos Jan 17, 2025
2837e37
chore: change button height and padding
marcosh-ramos Jan 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 1 addition & 6 deletions src/storybook/design/Actions.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,12 +53,7 @@ export const ActionsPalette = () => {
<ActionItem name="disabled"/>
<ActionItem name="hover"/>
<ActionItem name="focus"/>
<ColorItem
title="selected"
colors={{
"": alpha(palette.action.selected, palette.action.selectedOpacity),
}}
/>
<ActionItem name="selected"/>
</ColorPalette>
</ThemeContainer>
)
Expand Down
2 changes: 1 addition & 1 deletion src/storybook/design/Shadows.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export const Shadows = () => {
Display
</Typography>
</Grid>
{Object.keys(theme.shadows).map((index) => (
{Object.keys(theme.shadows.slice(0, 5)).map((index) => (
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

did this because for the design system we only have 4 variants of shadow

<>
<Grid item xs={3}>
<Typography variant="subtitle1">
Expand Down
6 changes: 3 additions & 3 deletions src/theme/design-tokens/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { light } from '@src/theme/design-tokens/palette'
import { sb_base_200 } from '@src/theme/design-tokens/palette'

export * from './palette'
export * from './typography'
Expand All @@ -9,14 +9,14 @@ export const sb_avatar_small = `26px`
export const sb_avatar_normal = `32px`
export const sb_avatar_large = `46px`
//Datepicker variables
export const light_border = `1px solid ${light}`
export const light_border = `1px solid ${sb_base_200}`
//Box-shadow
export const box_shadow_default = `0 2px 17px 3px rgba(34, 42, 69, 0.07)`
//Transition
export const base_transition_duration = '0.1s'
export const base_transition_easing = 'ease-in-out'
export const base_transition = `all ${base_transition_duration} ${base_transition_easing}`
export const base_border_radius = 5
export const base_border_radius = 8

// Icon Sizes
export const icon_small_size = '1.6rem'
Expand Down
182 changes: 122 additions & 60 deletions src/theme/design-tokens/palette.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,60 +1,122 @@
// teal
export const sb_green = '#00b3b0'
export const sb_green_75 = '#40c6c4'
export const sb_green_50 = '#7fd9d7'
export const sb_green_25 = '#d9f4f3'

// Ink
export const sb_dark_blue = '#1b243f'
export const sb_dark_blue_75 = '#545b6f'
export const sb_dark_blue_50 = '#8d919f'
export const sb_dark_blue_25 = '#c6c8cf'

// green
export const green = '#2db47d'
export const green_75 = '#62c79e'
export const green_50 = '#96d9be'
export const green_25 = '#caecde'
export const green_disabled = '#004e4c'
// yellow
export const yellow = '#fbce41'
export const yellow_75 = '#fcdb71'
export const yellow_50 = '#fde6a0'
export const yellow_25 = '#fef3cf'

// blue
export const blue = '#395ece'
export const blue_75 = '#6b87db'
export const blue_50 = '#9caee6'
export const blue_25 = '#cdd7f3'

// orange
export const orange = '#ffac00'
export const orange_75 = '#ffc140'
export const orange_50 = '#ffd57f'
export const orange_25 = '#ffeabf'

// red
export const red = '#ff6159'
export const red_75 = '#ff8983'
export const red_50 = '#ffb0ac'
export const red_25 = '#ffd7d5'

// light
export const light = '#dfe3e8'
export const light_75 = '#e7eaee'
export const light_50 = '#eff1f3'
export const light_25 = '#f7f8f9'
export const light_gray = '#b1b5be'

export const black = '#101525'
export const white = '#fff'
export const black_trasparent = 'rgba($sb-dark-blue, 0.2)'

export const color_primary = sb_green
export const color_primary_dark = sb_dark_blue
export const color_secondary = green
export const color_positive = green
export const color_negative = red
export const color_warning = orange
export const color_white = white
// primary
export const sb_primary_50 = '#d5fcfa'
export const sb_primary_100 = '#b5ece9'
export const sb_primary_200 = '#9ae6e2'
export const sb_primary_300 = '#72dfda'
export const sb_primary_400 = '#37dcd3'
export const sb_primary_500 = '#04c8c0'
export const sb_primary_600 = '#00b3b0'
export const sb_primary_700 = '#05807f'
export const sb_primary_800 = '#0a6465'
export const sb_primary_900 = '#0a6465'
export const sb_primary_950 = '#003033'
export const sb_primary = sb_primary_700

// secondary
export const sb_secondary_50 = '#f7f9fc'
export const sb_secondary_100 = '#dde3ee'
export const sb_secondary_200 = '#b5c0e2'
export const sb_secondary_300 = '#9eaacf'
export const sb_secondary_400 = '#9eaacf'
export const sb_secondary_500 = '#8794bc'
export const sb_secondary_600 = '#5f6e9a'
export const sb_secondary_700 = '#495781'
export const sb_secondary_800 = '#424d6d'
export const sb_secondary_900 = '#293455'
export const sb_secondary_950 = '#1b243f'
export const sb_secondary = sb_secondary_950

// base
export const sb_base_50 = '#f6f7f8'
export const sb_base_100 = '#ebecee'
export const sb_base_200 = '#dbdde2'
export const sb_base_300 = '#c3c7cd'
export const sb_base_400 = '#b1b5be'
export const sb_base_500 = '#8f93a2'
export const sb_base_600 = '#717384'
export const sb_base_700 = '#5f616e'
export const sb_base_800 = '#4f5059'
export const sb_base_900 = '#333338'
export const sb_base_950 = '#242429'

// info
export const sb_info_50 = '#f1f5fd'
export const sb_info_100 = '#e0e9f9'
export const sb_info_200 = '#c8d9f5'
export const sb_info_300 = '#a2c1ee'
export const sb_info_400 = '#75a0e5'
export const sb_info_500 = '#557fdc'
export const sb_info_600 = '#395ece'
export const sb_info_700 = '#3751be'
export const sb_info_800 = '#32449b'
export const sb_info_900 = '#2d3c7b'
export const sb_info_950 = '#1b243f'
export const sb_info = sb_info_800

// success
export const sb_success_50 = '#eefbf4'
export const sb_success_100 = '#d7f4e3'
export const sb_success_200 = '#b2e8cb'
export const sb_success_300 = '#7fd6ac'
export const sb_success_400 = '#4bbc8a'
export const sb_success_500 = '#2db47d'
export const sb_success_600 = '#1a8159'
export const sb_success_700 = '#15674a'
export const sb_success_800 = '#13523b'
export const sb_success_900 = '#104432'
export const sb_success_950 = '#08261d'
export const sb_success = sb_success_500

// warning
export const sb_warning_50 = '#fff4d5'
export const sb_warning_100 = '#ffe6aa'
export const sb_warning_200 = '#fcd867'
export const sb_warning_300 = '#fbce41'
export const sb_warning_400 = '#fabd25'
export const sb_warning_500 = '#f49c0c'
export const sb_warning_600 = '#d87507'
export const sb_warning_700 = '#b3520a'
export const sb_warning_800 = '#913f0f'
export const sb_warning_900 = '#78340f'
export const sb_warning_950 = '#451903'
export const sb_warning = sb_warning_400

// danger
export const sb_danger_50 = '#fff2f1'
export const sb_danger_100 = '#ffe2e1'
export const sb_danger_200 = '#ffcac7'
export const sb_danger_300 = '#ffa5a0'
export const sb_danger_400 = '#ff6159'
export const sb_danger_500 = '#f83c3b'
export const sb_danger_600 = '#e5271d'
export const sb_danger_700 = '#c11c14'
export const sb_danger_800 = '#a01b14'
export const sb_danger_900 = '#841d18'
export const sb_danger_950 = '#480a07'
export const sb_danger = sb_danger_700

// neutral
export const sb_neutral_black = '#000'
export const sb_neutral_white = '#fff'

// overlay
export const sb_overlay_primary_subtle = 'rgba(27, 36, 63, 0.0800)'
export const sb_overlay_primary = 'rgba(27, 36, 63, 0.1400)'
export const sb_overlay_primary_bold = 'rgba(27, 36, 63, 0.5000)'
export const sb_overlay_secondary_subtle = 'rgba(246, 247, 248, 0.0800)'
export const sb_overlay_secondary = 'rgba(246, 247, 248, 0.1400)'
export const sb_overlay_secondary_bold = 'rgba(246, 247, 248, 0.5000)'
export const sb_overlay_darkness = 'rgba(0, 0, 0, 0.1400)'

// highlight
export const sb_highlight_50 = '#fbf8fc'
export const sb_highlight_100 = '#f5eef9'
export const sb_highlight_200 = '#e2d6fe'
export const sb_highlight_300 = '#cbb5fd'
export const sb_highlight_400 = '#ad8bfa'
export const sb_highlight_500 = '#8b5cf6'
export const sb_highlight_600 = '#713aed'
export const sb_highlight_700 = '#5e28d9'
export const sb_highlight_800 = '#4e21b6'
export const sb_highlight_900 = '#421d95'
export const sb_highlight_950 = '#2a1065'
4 changes: 2 additions & 2 deletions src/theme/design-tokens/typography.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { sb_dark_blue } from '@src/theme/design-tokens/palette'
import { sb_info_950 } from '@src/theme/design-tokens/palette'

export const primary_font_family = "'Roboto', sans-serif"
export const primary_text_color = sb_dark_blue
export const primary_text_color = sb_info_950
export const font_size_default = '1.6rem'
export const line_height_default = 1

Expand Down
Loading
Loading