Skip to content

Commit 484807e

Browse files
lochielochie
committed
update: metamask branding
1 parent cf8a1e2 commit 484807e

File tree

2 files changed

+23
-249
lines changed

2 files changed

+23
-249
lines changed

‎packages/connectkit/src/assets/logos.tsx‎

Lines changed: 15 additions & 236 deletions
Original file line numberDiff line numberDiff line change
@@ -94,265 +94,44 @@ export const MetaMask = ({ background = false, ...props }) => (
9494
style={
9595
background
9696
? {
97-
background:
98-
'linear-gradient(0deg, var(--ck-brand-metamask-12), var(--ck-brand-metamask-11))',
97+
background: 'var(--ck-brand-metamask-bg)',
9998
borderRadius: '27.5%',
10099
}
101100
: undefined
102101
}
103-
width="32"
104-
height="32"
105-
viewBox="0 0 32 32"
102+
width="88"
103+
height="88"
104+
viewBox="0 0 88 88"
106105
fill="none"
107106
xmlns="http://www.w3.org/2000/svg"
108107
>
109-
{/**
110-
<defs>
111-
<linearGradient
112-
id="paint0_linear_967_843"
113-
x1="16"
114-
y1="0"
115-
x2="16"
116-
y2="32"
117-
gradientUnits="userSpaceOnUse"
118-
>
119-
<stop offset="0.130682" stopColor="var(--ck-brand-metamask-11)" />
120-
<stop offset="1" stopColor="var(--ck-brand-metamask-12)" />
121-
</linearGradient>
122-
</defs>
123-
<rect width="32" height="32" fill="url(#paint0_linear_967_843)" />
124-
*/}
125-
<path
126-
d="M27.2684 4.03027L17.5018 11.2841L19.3079 7.00442L27.2684 4.03027Z"
127-
fill="var(--ck-brand-metamask-02)"
128-
stroke="var(--ck-brand-metamask-02)"
129-
strokeWidth="0.269931"
130-
strokeLinecap="round"
131-
strokeLinejoin="round"
132-
/>
133-
<path
134-
d="M4.7218 4.03027L14.4099 11.3528L12.6921 7.00442L4.7218 4.03027Z"
135-
fill="var(--ck-brand-metamask-08)"
136-
stroke="var(--ck-brand-metamask-08)"
137-
strokeWidth="0.269931"
138-
strokeLinecap="round"
139-
strokeLinejoin="round"
140-
/>
141-
<path
142-
d="M23.7544 20.8438L21.1532 24.8289L26.7187 26.3602L28.3187 20.9321L23.7544 20.8438Z"
143-
fill="var(--ck-brand-metamask-08)"
144-
stroke="var(--ck-brand-metamask-08)"
145-
strokeWidth="0.269931"
146-
strokeLinecap="round"
147-
strokeLinejoin="round"
148-
/>
149-
<path
150-
d="M3.69104 20.9321L5.28117 26.3602L10.8467 24.8289L8.24551 20.8438L3.69104 20.9321Z"
151-
fill="var(--ck-brand-metamask-08)"
152-
stroke="var(--ck-brand-metamask-08)"
153-
strokeWidth="0.269931"
154-
strokeLinecap="round"
155-
strokeLinejoin="round"
156-
/>
157-
<path
158-
d="M10.5327 14.1108L8.98181 16.4568L14.5081 16.7022L14.3117 10.7637L10.5327 14.1108Z"
159-
fill="var(--ck-brand-metamask-08)"
160-
stroke="var(--ck-brand-metamask-08)"
161-
strokeWidth="0.269931"
162-
strokeLinecap="round"
163-
strokeLinejoin="round"
164-
/>
165-
<path
166-
d="M21.4576 14.1111L17.6295 10.6953L17.5018 16.7025L23.0182 16.4571L21.4576 14.1111Z"
167-
fill="var(--ck-brand-metamask-08)"
168-
stroke="var(--ck-brand-metamask-08)"
169-
strokeWidth="0.269931"
170-
strokeLinecap="round"
171-
strokeLinejoin="round"
172-
/>
173-
<path
174-
d="M10.8469 24.8292L14.1647 23.2096L11.2984 20.9717L10.8469 24.8292Z"
175-
fill="var(--ck-brand-metamask-08)"
176-
stroke="var(--ck-brand-metamask-08)"
177-
strokeWidth="0.269931"
178-
strokeLinecap="round"
179-
strokeLinejoin="round"
180-
/>
181-
<path
182-
d="M17.8257 23.2096L21.1531 24.8292L20.6918 20.9717L17.8257 23.2096Z"
183-
fill="var(--ck-brand-metamask-08)"
184-
stroke="var(--ck-brand-metamask-08)"
185-
strokeWidth="0.269931"
186-
strokeLinecap="round"
187-
strokeLinejoin="round"
188-
/>
189-
<path
190-
d="M21.1531 24.8296L17.8257 23.21L18.0906 25.3793L18.0612 26.2921L21.1531 24.8296Z"
191-
fill="var(--ck-brand-metamask-06)"
192-
stroke="var(--ck-brand-metamask-06)"
193-
strokeWidth="0.269931"
194-
strokeLinecap="round"
195-
strokeLinejoin="round"
196-
/>
197-
<path
198-
d="M10.8469 24.8296L13.9388 26.2921L13.9192 25.3793L14.1647 23.21L10.8469 24.8296Z"
199-
fill="var(--ck-brand-metamask-06)"
200-
stroke="var(--ck-brand-metamask-06)"
201-
strokeWidth="0.269931"
202-
strokeLinecap="round"
203-
strokeLinejoin="round"
204-
/>
205-
<path
206-
d="M13.9877 19.5389L11.2196 18.7242L13.1729 17.8311L13.9877 19.5389Z"
207-
fill="var(--ck-brand-metamask-09)"
208-
stroke="var(--ck-brand-metamask-09)"
209-
strokeWidth="0.269931"
210-
strokeLinecap="round"
211-
strokeLinejoin="round"
212-
/>
213-
<path
214-
d="M18.0023 19.5389L18.8171 17.8311L20.7802 18.7242L18.0023 19.5389Z"
215-
fill="var(--ck-brand-metamask-09)"
216-
stroke="var(--ck-brand-metamask-09)"
217-
strokeWidth="0.269931"
218-
strokeLinecap="round"
219-
strokeLinejoin="round"
220-
/>
221-
<path
222-
d="M10.8468 24.8289L11.3179 20.8438L8.24561 20.9321L10.8468 24.8289Z"
223-
fill="var(--ck-brand-metamask-03)"
224-
stroke="var(--ck-brand-metamask-03)"
225-
strokeWidth="0.269931"
226-
strokeLinecap="round"
227-
strokeLinejoin="round"
228-
/>
229-
<path
230-
d="M20.6821 20.8438L21.1532 24.8289L23.7544 20.9321L20.6821 20.8438Z"
231-
fill="var(--ck-brand-metamask-03)"
232-
stroke="var(--ck-brand-metamask-03)"
233-
strokeWidth="0.269931"
234-
strokeLinecap="round"
235-
strokeLinejoin="round"
236-
/>
237-
<path
238-
d="M23.0182 16.4565L17.5018 16.7019L18.0122 19.5387L18.827 17.8308L20.7902 18.7239L23.0182 16.4565Z"
239-
fill="var(--ck-brand-metamask-03)"
240-
stroke="var(--ck-brand-metamask-03)"
241-
strokeWidth="0.269931"
242-
strokeLinecap="round"
243-
strokeLinejoin="round"
244-
/>
245-
<path
246-
d="M11.2198 18.7239L13.1829 17.8308L13.9878 19.5387L14.5081 16.7019L8.98181 16.4565L11.2198 18.7239Z"
247-
fill="var(--ck-brand-metamask-03)"
248-
stroke="var(--ck-brand-metamask-03)"
249-
strokeWidth="0.269931"
250-
strokeLinecap="round"
251-
strokeLinejoin="round"
252-
/>
253-
<path
254-
d="M8.98181 16.4565L11.2983 20.9718L11.2198 18.7239L8.98181 16.4565Z"
255-
fill="var(--ck-brand-metamask-10)"
256-
stroke="var(--ck-brand-metamask-10)"
257-
strokeWidth="0.269931"
258-
strokeLinecap="round"
259-
strokeLinejoin="round"
260-
/>
261-
<path
262-
d="M20.7901 18.7239L20.6919 20.9718L23.0181 16.4565L20.7901 18.7239Z"
263-
fill="var(--ck-brand-metamask-10)"
264-
stroke="var(--ck-brand-metamask-10)"
265-
strokeWidth="0.269931"
266-
strokeLinecap="round"
267-
strokeLinejoin="round"
268-
/>
269-
<path
270-
d="M14.508 16.7021L13.9878 19.5389L14.6356 22.886L14.7828 18.4788L14.508 16.7021Z"
271-
fill="var(--ck-brand-metamask-10)"
272-
stroke="var(--ck-brand-metamask-10)"
273-
strokeWidth="0.269931"
274-
strokeLinecap="round"
275-
strokeLinejoin="round"
276-
/>
277-
<path
278-
d="M17.5017 16.7021L17.2367 18.4689L17.3545 22.886L18.0121 19.5389L17.5017 16.7021Z"
279-
fill="var(--ck-brand-metamask-10)"
280-
stroke="var(--ck-brand-metamask-10)"
281-
strokeWidth="0.269931"
282-
strokeLinecap="round"
283-
strokeLinejoin="round"
284-
/>
285108
<path
286-
d="M18.0121 19.5388L17.3545 22.886L17.8257 23.2099L20.6918 20.972L20.79 18.7241L18.0121 19.5388Z"
109+
d="M74.4066 73.7063L59.3305 69.249L47.9614 75.9975L40.0287 75.9941L28.6527 69.249L13.5835 73.7063L9 58.3408L13.584 41.2875L9 26.8697L13.584 9L37.1306 22.969H50.8595L74.4066 9L78.9906 26.8697L74.4066 41.2875L78.9906 58.3408L74.4066 73.7063Z"
287110
fill="var(--ck-brand-metamask-01)"
288-
stroke="var(--ck-brand-metamask-01)"
289-
strokeWidth="0.269931"
290-
strokeLinecap="round"
291-
strokeLinejoin="round"
292111
/>
293112
<path
294-
d="M11.2196 18.7241L11.2981 20.972L14.1644 23.2099L14.6355 22.886L13.9877 19.5388L11.2196 18.7241Z"
113+
d="M13.587 9L37.1341 22.9788L36.198 32.5722L13.587 9ZM28.6567 58.3471L39.0172 66.1838L28.6567 69.2485V58.3471ZM38.189 45.3909L36.198 32.5791L23.452 41.2915L23.4451 41.288V41.2944L23.4846 50.2623L28.6532 45.3914L38.189 45.3909ZM74.4066 9L50.8595 22.9788L51.7927 32.5722L74.4066 9ZM59.3374 58.3471L48.9764 66.1838L59.3374 69.2485V58.3471ZM64.5455 41.2939V41.2875L64.5425 41.291L51.7961 32.5791L49.8051 45.3909H59.3369L64.509 50.2613L64.5455 41.2939Z"
295114
fill="var(--ck-brand-metamask-01)"
296-
stroke="var(--ck-brand-metamask-01)"
297-
strokeWidth="0.269931"
298-
strokeLinecap="round"
299-
strokeLinejoin="round"
300115
/>
301116
<path
302-
d="M18.0615 26.2917L18.0908 25.3788L17.8455 25.1628H14.145L13.9192 25.3788L13.9388 26.2917L10.8469 24.8291L11.9267 25.7126L14.1155 27.234H17.875L20.0736 25.7126L21.1533 24.8291L18.0615 26.2917Z"
303-
fill="var(--ck-brand-metamask-07)"
304-
stroke="var(--ck-brand-metamask-07)"
305-
strokeWidth="0.269931"
306-
strokeLinecap="round"
307-
strokeLinejoin="round"
117+
d="M28.6532 69.2485L13.584 73.7058L9 58.3471H28.6532V69.2485ZM38.1856 45.3875L41.0639 63.9097L37.0744 53.6109L23.4782 50.2613L28.6498 45.388L38.1856 45.3875ZM59.3369 69.2485L74.4066 73.7058L78.9906 58.3467H59.3369C59.3369 58.3471 59.3369 69.2485 59.3369 69.2485ZM49.8051 45.3875L46.9267 63.9097L50.9157 53.6109L64.513 50.2613L59.3379 45.388L49.8051 45.3875Z"
118+
fill="var(--ck-brand-metamask-02)"
308119
/>
309120
<path
310-
d="M17.8258 23.2096L17.3546 22.8857H14.6357L14.1646 23.2096L13.9191 25.379L14.1449 25.163H17.8454L18.0907 25.379L17.8258 23.2096Z"
311-
fill="var(--ck-brand-metamask-04)"
312-
stroke="var(--ck-brand-metamask-04)"
313-
strokeWidth="0.269931"
314-
strokeLinecap="round"
315-
strokeLinejoin="round"
121+
d="M9 58.3408L13.584 41.2876H23.4417L23.4777 50.2584L37.0754 53.6079L41.0644 63.9063L39.0137 66.174L28.6532 58.3374H9V58.3408ZM78.9906 58.3408L74.4066 41.2876H64.5485L64.5125 50.2584L50.9157 53.6079L46.9262 63.9063L48.9764 66.174L59.3374 58.3374H78.9906V58.3408ZM50.8595 22.969H37.1306L36.1985 32.5624L41.0649 63.896H46.9267L51.7961 32.5624L50.8595 22.969Z"
122+
fill="var(--ck-brand-metamask-03)"
316123
/>
317124
<path
318-
d="M27.6806 11.7552L28.5149 7.75041L27.2683 4.03027L17.8257 11.0387L21.4575 14.1109L26.591 15.6128L27.7296 14.2876L27.2389 13.9342L28.0241 13.2178L27.4156 12.7465L28.2007 12.1478L27.6806 11.7552Z"
319-
fill="var(--ck-brand-metamask-05)"
320-
stroke="var(--ck-brand-metamask-05)"
321-
strokeWidth="0.269931"
322-
strokeLinecap="round"
323-
strokeLinejoin="round"
125+
d="M13.584 9L9 26.8697L13.584 41.2875H23.4417L36.1945 32.5727L13.584 9ZM35.3368 49.1076H30.8711L28.4398 51.4743L37.0784 53.6006L35.3368 49.1042V49.1076ZM74.4066 9L78.9906 26.8697L74.4066 41.2875H64.5485L51.7961 32.5727L74.4066 9ZM52.6603 49.1076H57.1324L59.5637 51.4772L50.9152 53.6079L52.6603 49.1042V49.1076ZM47.958 69.8848L48.9769 66.1809L46.9262 63.9131H41.06L39.0098 66.1809L40.0282 69.8848"
126+
fill="var(--ck-brand-metamask-04)"
324127
/>
325128
<path
326-
d="M3.48486 7.75041L4.3192 11.7552L3.78916 12.1478L4.57441 12.7465L3.97566 13.2178L4.7609 13.9342L4.27012 14.2876L5.39892 15.6128L10.5325 14.1109L14.1644 11.0387L4.72164 4.03027L3.48486 7.75041Z"
129+
d="M47.958 69.8843V76.0005H40.0292V69.8843H47.958Z"
327130
fill="var(--ck-brand-metamask-05)"
328-
stroke="var(--ck-brand-metamask-05)"
329-
strokeWidth="0.269931"
330-
strokeLinecap="round"
331-
strokeLinejoin="round"
332131
/>
333132
<path
334-
d="M26.591 15.6122L21.4575 14.1104L23.0181 16.4564L20.6919 20.9716L23.7544 20.9323H28.3186L26.591 15.6122Z"
335-
fill="var(--ck-brand-metamask-01)"
336-
stroke="var(--ck-brand-metamask-01)"
337-
strokeWidth="0.269931"
338-
strokeLinecap="round"
339-
strokeLinejoin="round"
340-
/>
341-
<path
342-
d="M10.5326 14.1104L5.39897 15.6122L3.69104 20.9323H8.24551L11.2982 20.9716L8.98168 16.4564L10.5326 14.1104Z"
343-
fill="var(--ck-brand-metamask-01)"
344-
stroke="var(--ck-brand-metamask-01)"
345-
strokeWidth="0.269931"
346-
strokeLinecap="round"
347-
strokeLinejoin="round"
348-
/>
349-
<path
350-
d="M17.5018 16.7018L17.8258 11.0381L19.3177 7.00391H12.6921L14.1645 11.0381L14.5081 16.7018L14.6258 18.4883L14.6356 22.8856H17.3546L17.3742 18.4883L17.5018 16.7018Z"
351-
fill="var(--ck-brand-metamask-01)"
352-
stroke="var(--ck-brand-metamask-01)"
353-
strokeWidth="0.269931"
354-
strokeLinecap="round"
355-
strokeLinejoin="round"
133+
d="M28.6567 69.2421L40.0356 75.9971V69.8809L39.0167 66.1775L28.6567 69.2421ZM59.3374 69.2421L47.958 75.9971V69.8809L48.9769 66.1775L59.3374 69.2421Z"
134+
fill="var(--ck-brand-metamask-06)"
356135
/>
357136
</svg>
358137
);

‎packages/connectkit/src/styles/index.ts‎

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -94,19 +94,14 @@ const themeGlobals = {
9494
'--ck-family-brand': '#1A88F8',
9595
'--ck-brand-walletConnect': '#3B99FC',
9696
'--ck-brand-coinbaseWallet': '#0052FF',
97-
'--ck-brand-metamask': '#f6851b',
98-
'--ck-brand-metamask-01': '#F6851B',
99-
'--ck-brand-metamask-02': '#E2761B',
100-
'--ck-brand-metamask-03': '#CD6116',
101-
'--ck-brand-metamask-04': '#161616',
102-
'--ck-brand-metamask-05': '#763D16',
103-
'--ck-brand-metamask-06': '#D7C1B3',
104-
'--ck-brand-metamask-07': '#C0AD9E',
105-
'--ck-brand-metamask-08': '#E4761B',
106-
'--ck-brand-metamask-09': '#233447',
107-
'--ck-brand-metamask-10': '#E4751F',
108-
'--ck-brand-metamask-11': '#FEF5E7',
109-
'--ck-brand-metamask-12': '#E3C8AB',
97+
'--ck-brand-metamask': '#FF5C16',
98+
'--ck-brand-metamask-bg': '#FFF2EB',
99+
'--ck-brand-metamask-01': '#FF5C16',
100+
'--ck-brand-metamask-02': '#E34807',
101+
'--ck-brand-metamask-03': '#FF8D5D',
102+
'--ck-brand-metamask-04': '#661800',
103+
'--ck-brand-metamask-05': '#C0C4CD',
104+
'--ck-brand-metamask-06': '#E7EBF6',
110105
'--ck-brand-trust-01': '#3375BB',
111106
'--ck-brand-trust-02': '#ffffff',
112107
'--ck-brand-trust-01b': '#ffffff', // dark Theme

0 commit comments

Comments
 (0)