Skip to content

Commit

Permalink
sync colors (#493)
Browse files Browse the repository at this point in the history 
* sync colors

* f

* a ch

* f
  • Loading branch information
@felicio
felicio authored Oct 20, 2023
1 parent 29b9734 commit d796765
Show file tree
Hide file tree
Showing 31 changed files with 151 additions and 307 deletions.
5 changes: 5 additions & 0 deletions .changeset/stale-ducks-chew.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@status-im/components': patch
---

sync colors
1 change: 1 addition & 0 deletions packages/colors/src/customisation.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ export const customisation = {
'camel/30': 'rgba(199 143 103 / 30%)',
'camel/40': 'rgba(199 143 103 / 40%)',
'camel/5': 'rgba(199 143 103 / 5%)',
// fixme: rename to copper in Figma
'cooper-50': 'rgba(203 98 86 / 100%)',
'cooper-60': 'rgba(162 78 69 / 100%)',
'cooper/10': 'rgba(203 98 86 / 10%)',
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/avatar/avatar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -188,7 +188,7 @@ const Avatar = (props: AvatarProps) => {
}

if (props.type === 'channel') {
return '$blue-50-opa-20'
return '$blue/20'
}

return '$neutral-95'
Expand Down
14 changes: 4 additions & 10 deletions packages/components/src/banner/banner.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,15 +40,15 @@ export const NoCount: Story = {

export const NetworkStateConnecting: Story = {
args: {
backgroundColor: '$neutral-80-opa-5',
backgroundColor: '$neutral-80/5',
icon: <RecentIcon size={20} />,
children: 'Connecting...',
},
}

export const NetworkStateError: Story = {
args: {
backgroundColor: '$danger-50-opa-20',
backgroundColor: '$danger-/20',
icon: <AlertIcon size={20} />,
children: 'Network is down',
},
Expand All @@ -62,16 +62,10 @@ export const AllVariants: Story = {
Banner message
</Banner>
<Banner count={5}>Banner message</Banner>
<Banner
backgroundColor="$neutral-80-opa-5"
icon={<RecentIcon size={20} />}
>
<Banner backgroundColor="$neutral-80/20" icon={<RecentIcon size={20} />}>
Connecting...
</Banner>
<Banner
backgroundColor="$danger-50-opa-20"
icon={<AlertIcon size={20} />}
>
<Banner backgroundColor="$danger-/20" icon={<AlertIcon size={20} />}>
Network is down
</Banner>
<Banner icon={<PinIcon size={20} />}>Banner message</Banner>
Expand Down
7 changes: 1 addition & 6 deletions packages/components/src/banner/banner.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,7 @@ type Props = {
}

const Banner = (props: Props) => {
const {
icon = null,
children,
count,
backgroundColor = '$primary-50-opa-20',
} = props
const { icon = null, children, count, backgroundColor = '$blue/20' } = props

return (
<Base backgroundColor={backgroundColor}>
Expand Down
12 changes: 6 additions & 6 deletions packages/components/src/button/button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,10 +119,10 @@ const Base = styled(View, {
variants: {
variant: {
primary: {
backgroundColor: '$primary-50',
hoverStyle: { backgroundColor: '$primary-60' },
backgroundColor: '$blue-50',
hoverStyle: { backgroundColor: '$blue-60' },
// TODO: update background color
pressStyle: { backgroundColor: '$primary-50' },
pressStyle: { backgroundColor: '$blue-50' },
},
positive: {
backgroundColor: '$success-50',
Expand Down Expand Up @@ -174,9 +174,9 @@ const Base = styled(View, {
pressStyle: { backgroundColor: '$orange-50' },
},
army: {
backgroundColor: '$indigo-50',
hoverStyle: { backgroundColor: '$indigo-60' },
pressStyle: { backgroundColor: '$indigo-50' },
backgroundColor: '$army-50',
hoverStyle: { backgroundColor: '$army-60' },
pressStyle: { backgroundColor: '$army-50' },
},
turquoise: {
backgroundColor: '$turquoise-50',
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/channel/channel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,10 +126,10 @@ const Base = styled(Stack, {
variants: {
state: {
active: {
backgroundColor: '$primary-50-opa-5',
backgroundColor: '$blue/5',
},
selected: {
backgroundColor: '$primary-50-opa-10',
backgroundColor: '$blue/10',
},
},
},
Expand Down
12 changes: 6 additions & 6 deletions packages/components/src/checkbox/checkbox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,18 +90,18 @@ const Base = styled(Root, {
},
selected: {
filled: {
hoverStyle: { backgroundColor: '$primary-60' },
pressStyle: { backgroundColor: '$primary-60' },
hoverStyle: { backgroundColor: '$blue-60' },
pressStyle: { backgroundColor: '$blue-60' },
},
outline: {
backgroundColor: '$primary-50',
borderColor: '$primary-50',
backgroundColor: '$blue-50',
borderColor: '$blue-50',

hoverStyle: {
backgroundColor: '$primary-60',
backgroundColor: '$blue-60',
},
pressStyle: {
backgroundColor: '$primary-60',
backgroundColor: '$blue-60',
},
},
},
Expand Down
8 changes: 4 additions & 4 deletions packages/components/src/community/topbar/topbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ const Topbar = (props: Props) => {
padding={16}
backgroundColor={'$blurBackground'}
borderBottomWidth={1}
borderColor={blur ? 'transparent' : '$neutral-80-opa-10'}
borderColor={blur ? 'transparent' : '$neutral-80/10'}
>
<Stack flexDirection="row" alignItems="center" flexWrap="wrap">
<Stack marginRight={12} $gtSm={{ display: 'none' }}>
Expand All @@ -76,10 +76,10 @@ const Topbar = (props: Props) => {
{title}
</Text>
<Stack marginLeft={4}>
<LockedIcon size={20} color="$neutral-80-opa-40" />
<LockedIcon size={20} color="$neutral-80/40" />
</Stack>
<Stack
backgroundColor="$neutral-80-opa-10"
backgroundColor="$neutral-80/10"
marginHorizontal={12}
height={16}
width={1}
Expand All @@ -88,7 +88,7 @@ const Topbar = (props: Props) => {
</Stack>

<Stack flexGrow={1} flexShrink={1} $sm={{ display: 'none' }}>
<Text size={13} weight="medium" color="$neutral-80-opa-50" truncate>
<Text size={13} weight="medium" color="$neutral-80/50" truncate>
{description}
</Text>
</Stack>
Expand Down
8 changes: 4 additions & 4 deletions packages/components/src/context-tag/context-tag.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,7 +194,7 @@ const ContextTag = (props: Props) => {
type="icon"
size={avatarSizes[size]}
icon={<PlayIcon size={16} />}
backgroundColor="$primary-50"
backgroundColor="$blue-50"
color="$white-100"
/>
<Label size={textSize}>{props.audioLength}</Label>
Expand All @@ -220,7 +220,7 @@ const ContextTag = (props: Props) => {
type="icon"
size={avatarSizes[size]}
backgroundColor="$purple-50"
color="$white-70"
color="$white/70"
icon={props.group.icon}
/>
<Label size={textSize}>{props.group.name}</Label>
Expand Down Expand Up @@ -300,13 +300,13 @@ const Base = styled(View, {
outline: {
true: {
borderWidth: '1px',
borderColor: '$primary-50',
borderColor: '$blue-50',
borderStyle: 'solid',
},
},
blur: {
true: {
backgroundColor: '$neutral-80-opa-5',
backgroundColor: '$neutral-80/5',
},
false: {
backgroundColor: '$neutral-10',
Expand Down
6 changes: 3 additions & 3 deletions packages/components/src/counter/counter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ const Base = styled(Stack, {
})

const Content = styled(Stack, {
backgroundColor: '$primary-50',
backgroundColor: '$blue-50',
paddingHorizontal: 3,
paddingVertical: 0,
borderRadius: '$6',
Expand All @@ -53,10 +53,10 @@ const Content = styled(Stack, {
variants: {
type: {
default: {
backgroundColor: '$primary-50',
backgroundColor: '$blue-50',
},
secondary: {
backgroundColor: '$neutral-80-opa-5',
backgroundColor: '$neutral-80/5',
},
grey: {
backgroundColor: '$neutral-10',
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/dividers/divider-new-messages/divider-new-messages.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export const Default: Story = {
render: () => {
return (
<Stack gap={24}>
<DividerNewMessages color="$primary-50" />
<DividerNewMessages color="$blue-50" />
<DividerNewMessages color="$yellow-50" />
<DividerNewMessages color="$turquoise-50" />
{/* <NewMessages color="$cooper-50" /> */}
Expand Down
12 changes: 6 additions & 6 deletions packages/components/src/dynamic-button/dynamic-button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,15 +67,15 @@ const Button = styled(View, {
variants: {
type: {
mention: {
backgroundColor: '$primary-50',
hoverStyle: { backgroundColor: '$primary-60' },
pressStyle: { backgroundColor: '$primary-50' },
backgroundColor: '$blue-50',
hoverStyle: { backgroundColor: '$blue-60' },
pressStyle: { backgroundColor: '$blue-50' },
},

notification: {
backgroundColor: '$neutral-80-opa-70',
hoverStyle: { backgroundColor: '$neutral-90-opa-70' },
pressStyle: { backgroundColor: '$neutral-80-opa-80' },
backgroundColor: '$neutral-80/70',
hoverStyle: { backgroundColor: '$neutral-90/70' },
pressStyle: { backgroundColor: '$neutral-80/80' },
},
},

Expand Down
38 changes: 19 additions & 19 deletions packages/components/src/icon-button/icon-button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,8 @@ const IconButton = (props: Props, ref: Ref<View>) => {

const { pressableProps, color } = usePressableColors(
{
default: blur ? '$neutral-80-opa-70' : '$neutral-50',
hover: blur ? '$neutral-80-opa-70' : '$neutral-50',
default: blur ? '$neutral-80/70' : '$neutral-50',
hover: blur ? '$neutral-80/70' : '$neutral-50',
press: '$neutral-100',
active: '$neutral-100',
},
Expand Down Expand Up @@ -130,49 +130,49 @@ const Base = styled(View, {

variantBlur: {
default: {
backgroundColor: '$neutral-80-opa-5',
backgroundColor: '$neutral-80/5',
borderColor: 'transparent',
hoverStyle: { backgroundColor: '$neutral-80-opa-10' },
hoverStyle: { backgroundColor: '$neutral-80/10' },
pressStyle: {
backgroundColor: '$neutral-80-opa-10',
borderColor: '$neutral-80-opa-5',
backgroundColor: '$neutral-80/10',
borderColor: '$neutral-80/5',
},
},

outline: {
backgroundColor: 'transparent',
borderColor: '$neutral-80-opa-10',
hoverStyle: { borderColor: '$neutral-80-opa-20' },
borderColor: '$neutral-80/10',
hoverStyle: { borderColor: '$neutral-80/20' },
pressStyle: {
borderColor: '$neutral-80-opa-10',
backgroundColor: '$neutral-80-opa-5',
borderColor: '$neutral-80/10',
backgroundColor: '$neutral-80/5',
},
},

ghost: {
backgroundColor: 'transparent',
hoverStyle: { backgroundColor: '$neutral-80-opa-5' },
hoverStyle: { backgroundColor: '$neutral-80/5' },
pressStyle: {
backgroundColor: '$neutral-80-opa-5',
borderColor: '$neutral-80-opa-10',
backgroundColor: '$neutral-80/5',
borderColor: '$neutral-80/10',
},
},
},

activeBlur: {
default: {
backgroundColor: '$neutral-80-opa-10',
borderColor: '$neutral-80-opa-5',
backgroundColor: '$neutral-80/10',
borderColor: '$neutral-80/5',
},

outline: {
borderColor: '$neutral-80-opa-10',
backgroundColor: '$neutral-80-opa-5',
borderColor: '$neutral-80/10',
backgroundColor: '$neutral-80/5',
},

ghost: {
backgroundColor: '$neutral-80-opa-5',
borderColor: '$neutral-80-opa-10',
backgroundColor: '$neutral-80/5',
borderColor: '$neutral-80/10',
},
},

Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/icons/icons.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export const Overview: Story = {
args: {
search: '',
size: 20,
// color: '$primary-50',
// color: '$blue-50',
},

argTypes: {
Expand Down
8 changes: 4 additions & 4 deletions packages/components/src/information-box/information-box.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,12 +122,12 @@ const Base = styled(Stack, {
borderColor: '$neutral-20',
},
information: {
backgroundColor: '$blue-50-opa-5',
borderColor: '$blue-50-opa-10',
backgroundColor: '$blue/5',
borderColor: '$blue/10',
},
error: {
backgroundColor: '$danger-50-opa-5',
borderColor: '$danger-50-opa-10',
backgroundColor: '$danger-/5',
borderColor: '$danger-/10',
},
},
},
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/input/input.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -218,7 +218,7 @@ const InputContainer = styled(Stack, {
},
error: {
true: {
borderColor: '$danger-50-opa-40',
borderColor: '$danger-/40',
},
},

Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/messages/components/reactions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ const Reaction = (props: ReactionProps) => {
and
</Text>
<Stack
backgroundColor="$turquoise-50-opa-10"
backgroundColor="$turquoise/10"
borderRadius="$6"
paddingHorizontal={4}
>
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/messages/message.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ const Base = styled(Stack, {

pinned: {
true: {
backgroundColor: '$blue-50-opa-5',
backgroundColor: '$blue/5',
},
},
} as const,
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/shortcut/shortcut.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,8 +71,8 @@ const Base = styled(Stack, {
variants: {
variant: {
primary: {
backgroundColor: '$primary-50',
borderColor: '$primary-60',
backgroundColor: '$blue-50',
borderColor: '$blue-60',
},
secondary: {
backgroundColor: '$neutral-10',
Expand Down
Loading

2 comments on commit d796765

@vercel
Copy link

@vercel vercel bot commented on d796765 Oct 20, 2023

Choose a reason for hiding this comment

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

Successfully deployed to the following URLs:

status-web – ./apps/web

status-web-git-main-status-im-web.vercel.app
status-web-status-im-web.vercel.app
status-web.vercel.app

@vercel
Copy link

@vercel vercel bot commented on d796765 Oct 20, 2023

Choose a reason for hiding this comment

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

Successfully deployed to the following URLs:

status-components – ./packages/components

status-components-status-im-web.vercel.app
status-components-git-main-status-im-web.vercel.app
status-components.vercel.app

Please sign in to comment.