Skip to content

Commit 7cd51bc

Browse files
gabitoesmiapodogabitoesmiapodo
committed
refactor(token input): styles from global to local
1 parent e8aa4c1 commit 7cd51bc

4 files changed

Lines changed: 76 additions & 76 deletions

File tree

‎src/components/sharedComponents/TokenInput/index.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import { Dialog, Portal, Spinner } from '@chakra-ui/react'
2727
import { type ComponentPropsWithoutRef, type FC, useMemo, useState } from 'react'
2828
import { type NumberFormatValues, NumericFormat } from 'react-number-format'
2929
import { formatUnits } from 'viem'
30+
import css from './styles'
3031

3132
interface TokenInputProps extends Omit<TokenSelectProps, 'onTokenSelect'> {
3233
singleToken?: boolean
@@ -71,7 +72,7 @@ const TokenInput: FC<Props> = ({
7172
title,
7273
tokenInput,
7374
...restProps
74-
}) => {
75+
}: Props) => {
7576
const [isOpen, setIsOpen] = useState(false)
7677
const {
7778
amount,
@@ -128,7 +129,10 @@ const TokenInput: FC<Props> = ({
128129
open={isOpen}
129130
onOpenChange={(state) => setIsOpen(state.open)}
130131
>
131-
<Wrapper {...restProps}>
132+
<Wrapper
133+
css={{ ...css }}
134+
{...restProps}
135+
>
132136
{title && <Title>{title}</Title>}
133137
<TopRow>
134138
<BigNumberInput

‎src/components/sharedComponents/TokenInput/styles.ts‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
export const styles = {
2+
'html.light &': {
3+
'--theme-token-input-title-color': '#2e3048',
4+
'--theme-token-input-background': '#fff',
5+
'--theme-token-input-textfield-background-color': '#fff',
6+
'--theme-token-input-textfield-background-color-active': 'rgb(0 0 0 / 5%)',
7+
'--theme-token-input-textfield-border-color': '#e2e0e7',
8+
'--theme-token-input-textfield-border-color-active': '#e2e0e7',
9+
'--theme-token-input-textfield-color': '#2e3048',
10+
'--theme-token-input-textfield-color-active': '#2e3048',
11+
'--theme-token-input-textfield-placeholder-color': 'rgb(22 29 26 / 60%)',
12+
'--theme-token-input-dropdown-button-background-color': '#fff',
13+
'--theme-token-input-dropdown-button-background-color-hover': 'rgb(0 0 0 / 5%)',
14+
'--theme-token-input-dropdown-button-border-color': '#e2e0e7',
15+
'--theme-token-input-dropdown-button-border-color-hover': '#e2e0e7',
16+
'--theme-token-input-dropdown-button-border-color-active': '#e2e0e7',
17+
'--theme-token-input-dropdown-button-color': '#2e3048',
18+
'--theme-token-input-dropdown-button-color-hover': '#2e3048',
19+
'--theme-token-input-dropdown-button-background-color-disabled': '#fff',
20+
'--theme-token-input-dropdown-button-border-color-disabled': '#e2e0e7',
21+
'--theme-token-input-dropdown-button-color-disabled': '#2e3048',
22+
'--theme-token-input-max-button-background-color': '#fff',
23+
'--theme-token-input-max-button-background-color-hover': 'rgb(0 0 0 / 5%)',
24+
'--theme-token-input-max-button-border-color': '#e2e0e7',
25+
'--theme-token-input-max-button-border-color-hover': '#e2e0e7',
26+
'--theme-token-input-max-button-border-color-active': '#e2e0e7',
27+
'--theme-token-input-max-button-color': '#8b46a4',
28+
'--theme-token-input-max-button-color-hover': '#8b46a4',
29+
'--theme-token-input-max-button-background-color-disabled': '#fff',
30+
'--theme-token-input-max-button-border-color-disabled': '#e2e0e7',
31+
'--theme-token-input-max-button-color-disabled': '#8b46a4',
32+
'--theme-token-input-estimated-usd-color': '#4b4d60',
33+
'--theme-token-input-balance-color': '#4b4d60',
34+
},
35+
'html.dark &': {
36+
'--theme-token-input-title-color': '#fff',
37+
'--theme-token-input-background': '#373954',
38+
'--theme-token-input-textfield-background-color': '#373954',
39+
'--theme-token-input-textfield-background-color-active': 'rgb(255 255 255 / 5%)',
40+
'--theme-token-input-textfield-border-color': '#5f6178',
41+
'--theme-token-input-textfield-border-color-active': '#5f6178',
42+
'--theme-token-input-textfield-color': 'rgb(255 255 255 / 80%)',
43+
'--theme-token-input-textfield-color-active': 'rgb(255 255 255 / 80%)',
44+
'--theme-token-input-textfield-placeholder-color': 'rgb(255 255 255 / 50%)',
45+
'--theme-token-input-dropdown-button-background-color': '#373954',
46+
'--theme-token-input-dropdown-button-background-color-hover': 'rgb(255 255 255 / 5%)',
47+
'--theme-token-input-dropdown-button-border-color': '#5f6178',
48+
'--theme-token-input-dropdown-button-border-color-hover': '#5f6178',
49+
'--theme-token-input-dropdown-button-border-color-active': '#5f6178',
50+
'--theme-token-input-dropdown-button-color': '#fff',
51+
'--theme-token-input-dropdown-button-color-hover': '#fff',
52+
'--theme-token-input-dropdown-button-background-color-disabled': '#373954',
53+
'--theme-token-input-dropdown-button-border-color-disabled': '#5f6178',
54+
'--theme-token-input-dropdown-button-color-disabled': '#fff',
55+
'--theme-token-input-max-button-background-color': '#373954',
56+
'--theme-token-input-max-button-background-color-hover': 'rgb(255 255 255 / 5%)',
57+
'--theme-token-input-max-button-border-color': '#c5c2cb',
58+
'--theme-token-input-max-button-border-color-hover': '#c5c2cb',
59+
'--theme-token-input-max-button-border-color-active': '#c5c2cb',
60+
'--theme-token-input-max-button-color': '#c5c2cb',
61+
'--theme-token-input-max-button-color-hover': '#fff',
62+
'--theme-token-input-max-button-background-color-disabled': '#373954',
63+
'--theme-token-input-max-button-border-color-disabled': '#5f6178',
64+
'--theme-token-input-max-button-color-disabled': '#fff',
65+
'--theme-token-input-estimated-usd-color': '#e2e0e7',
66+
'--theme-token-input-balance-color': '#e2e0e7',
67+
},
68+
}
69+
70+
export default styles

‎src/styles/dark.css‎

Lines changed: 0 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -68,43 +68,6 @@ html.dark {
6868
/* Token Select */
6969

7070
/* Token Input */
71-
--theme-token-input-title-color: #fff;
72-
73-
--theme-token-input-background: #373954;
74-
75-
--theme-token-input-textfield-background-color: #373954;
76-
--theme-token-input-textfield-background-color-active: rgb(255 255 255 / 5%);
77-
--theme-token-input-textfield-border-color: #5f6178;
78-
--theme-token-input-textfield-border-color-active: #5f6178;
79-
--theme-token-input-textfield-color: rgb(255 255 255 / 80%);
80-
--theme-token-input-textfield-color-active: rgb(255 255 255 / 80%);
81-
--theme-token-input-textfield-placeholder-color: rgb(255 255 255 / 50%);
82-
83-
--theme-token-input-dropdown-button-background-color: #373954;
84-
--theme-token-input-dropdown-button-background-color-hover: rgb(255 255 255 / 5%);
85-
--theme-token-input-dropdown-button-border-color: #5f6178;
86-
--theme-token-input-dropdown-button-border-color-hover: #5f6178;
87-
--theme-token-input-dropdown-button-border-color-active: #5f6178;
88-
--theme-token-input-dropdown-button-color: #fff;
89-
--theme-token-input-dropdown-button-color-hover: #fff;
90-
--theme-token-input-dropdown-button-background-color-disabled: #373954;
91-
--theme-token-input-dropdown-button-border-color-disabled: #5f6178;
92-
--theme-token-input-dropdown-button-color-disabled: #fff;
93-
94-
--theme-token-input-max-button-background-color: #373954;
95-
--theme-token-input-max-button-background-color-hover: rgb(255 255 255 / 5%);
96-
--theme-token-input-max-button-border-color: #c5c2cb;
97-
--theme-token-input-max-button-border-color-hover: #c5c2cb;
98-
--theme-token-input-max-button-border-color-active: #c5c2cb;
99-
--theme-token-input-max-button-color: #c5c2cb;
100-
--theme-token-input-max-button-color-hover: #fff;
101-
--theme-token-input-max-button-background-color-disabled: #373954;
102-
--theme-token-input-max-button-border-color-disabled: #5f6178;
103-
--theme-token-input-max-button-color-disabled: #fff;
104-
105-
--theme-token-input-estimated-usd-color: #e2e0e7;
106-
107-
--theme-token-input-balance-color: #e2e0e7;
10871

10972
/* Skeleton loading */
11073
--theme-skeleton-loading-background-color: #373954;

‎src/styles/light.css‎

Lines changed: 0 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -50,43 +50,6 @@ html.light {
5050
/* Token Select */
5151

5252
/* Token Input */
53-
--theme-token-input-title-color: #2e3048;
54-
55-
--theme-token-input-background: #fff;
56-
57-
--theme-token-input-textfield-background-color: #fff;
58-
--theme-token-input-textfield-background-color-active: rgb(0 0 0 / 5%);
59-
--theme-token-input-textfield-border-color: #e2e0e7;
60-
--theme-token-input-textfield-border-color-active: #e2e0e7;
61-
--theme-token-input-textfield-color: #2e3048;
62-
--theme-token-input-textfield-color-active: #2e3048;
63-
--theme-token-input-textfield-placeholder-color: rgb(22 29 26 / 60%);
64-
65-
--theme-token-input-dropdown-button-background-color: #fff;
66-
--theme-token-input-dropdown-button-background-color-hover: rgb(0 0 0 / 5%);
67-
--theme-token-input-dropdown-button-border-color: #e2e0e7;
68-
--theme-token-input-dropdown-button-border-color-hover: #e2e0e7;
69-
--theme-token-input-dropdown-button-border-color-active: #e2e0e7;
70-
--theme-token-input-dropdown-button-color: #2e3048;
71-
--theme-token-input-dropdown-button-color-hover: #2e3048;
72-
--theme-token-input-dropdown-button-background-color-disabled: #fff;
73-
--theme-token-input-dropdown-button-border-color-disabled: #e2e0e7;
74-
--theme-token-input-dropdown-button-color-disabled: #2e3048;
75-
76-
--theme-token-input-max-button-background-color: #fff;
77-
--theme-token-input-max-button-background-color-hover: rgb(0 0 0 / 5%);
78-
--theme-token-input-max-button-border-color: #e2e0e7;
79-
--theme-token-input-max-button-border-color-hover: #e2e0e7;
80-
--theme-token-input-max-button-border-color-active: #e2e0e7;
81-
--theme-token-input-max-button-color: #8b46a4;
82-
--theme-token-input-max-button-color-hover: #8b46a4;
83-
--theme-token-input-max-button-background-color-disabled: #fff;
84-
--theme-token-input-max-button-border-color-disabled: #e2e0e7;
85-
--theme-token-input-max-button-color-disabled: #8b46a4;
86-
87-
--theme-token-input-estimated-usd-color: #4b4d60;
88-
89-
--theme-token-input-balance-color: #4b4d60;
9053

9154
/* Skeleton loading */
9255
--theme-skeleton-loading-background-color: #f3f3f3;

0 commit comments

Comments
 (0)