Skip to content

Commit 3be62fb

Browse files
gantoinegantoine
committed
create a primary color palette using existing purple colo
1 parent 81ac744 commit 3be62fb

File tree

2 files changed

+45
-65
lines changed

2 files changed

+45
-65
lines changed

‎app.vue

Lines changed: 31 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ const menuItems: MenuItem[] = [
6868
<nuxt-img
6969
:src="`images/blocks/logos/romm-dark.svg`"
7070
alt="romm logo"
71-
class="w-10 h-10"
71+
class="w-10 h-10 rounded-full"
7272
/>
7373
<span class="text-900 text-2xl font-semibold ml-1">RomM</span>
7474
</a>
@@ -95,15 +95,15 @@ const menuItems: MenuItem[] = [
9595
<a
9696
href="https://opencollective.com/romm"
9797
target="_blank"
98-
class="text-900 hover:text-purple-500 border-l ml-4 pl-6 border-slate-100 dark:border-slate-800"
98+
class="text-900 hover:text-primary border-l ml-4 pl-6 border-slate-100 dark:border-slate-800"
9999
title="support the project"
100100
>
101101
<font-awesome-icon :icon="faDonate" class="text-2xl h-4" />
102102
</a>
103103
<a
104104
href="https://github.com/rommapp/romm"
105105
target="_blank"
106-
class="text-900 hover:text-purple-500 pl-4"
106+
class="text-900 hover:text-primary pl-4"
107107
title="github repository"
108108
>
109109
<font-awesome-icon :icon="faGithub" class="text-2xl h-4" />
@@ -118,7 +118,7 @@ const menuItems: MenuItem[] = [
118118
Your beautiful, powerful,
119119
</span>
120120
<div
121-
class="text-4xl sm:text-5xl md:text-6xl text-purple-500 font-bold mb-8 md:mb-4"
121+
class="text-4xl sm:text-5xl md:text-6xl text-primary font-bold mb-8 md:mb-4"
122122
>
123123
self-hosted rom manager
124124
</div>
@@ -164,7 +164,7 @@ const menuItems: MenuItem[] = [
164164

165165
<div id="features" class="surface-section px-6 py-8 lg:px-8 md:text-center">
166166
<div class="text-700 mb-10 md:mb-12 text-2xl">
167-
The <span class="text-purple-500">most powerful</span> all-in-one app
167+
The <span class="text-primary">most powerful</span> all-in-one app
168168
for managing your game collection.
169169
</div>
170170
<div class="grid grid-rows-6 md:grid-cols-3 md:grid-rows-2">
@@ -175,7 +175,7 @@ const menuItems: MenuItem[] = [
175175
>
176176
<font-awesome-icon
177177
:icon="faWandSparkles"
178-
class="text-3xl md:text-4xl w-8 md:w-10 text-purple-500"
178+
class="text-3xl md:text-4xl w-8 md:w-10 text-primary"
179179
/>
180180
</span>
181181
</div>
@@ -189,7 +189,7 @@ const menuItems: MenuItem[] = [
189189
href="https://www.igdb.com/"
190190
target="_blank"
191191
rel="noopener"
192-
class="underline hover:text-purple-500"
192+
class="underline hover:text-primary"
193193
>
194194
IGDB</a
195195
>
@@ -198,7 +198,7 @@ const menuItems: MenuItem[] = [
198198
href="https://www.mobygames.com/"
199199
target="_blank"
200200
rel="noopener"
201-
class="underline hover:text-purple-500"
201+
class="underline hover:text-primary"
202202
>
203203
MobyGames</a
204204
>.
@@ -212,7 +212,7 @@ const menuItems: MenuItem[] = [
212212
>
213213
<font-awesome-icon
214214
:icon="faListCheck"
215-
class="text-3xl md:text-4xl w-8 md:w-10 text-purple-500"
215+
class="text-3xl md:text-4xl w-8 md:w-10 text-primary"
216216
/>
217217
</span>
218218
</div>
@@ -226,7 +226,7 @@ const menuItems: MenuItem[] = [
226226
href="https://github.com/rommapp/romm/wiki/Supported-Platforms"
227227
target="_blank"
228228
rel="noopener"
229-
class="underline hover:text-purple-500"
229+
class="underline hover:text-primary"
230230
>
231231
400+</a
232232
>
@@ -241,7 +241,7 @@ const menuItems: MenuItem[] = [
241241
>
242242
<font-awesome-icon
243243
:icon="faGamepad"
244-
class="text-3xl md:text-4xl w-8 md:w-10 text-purple-500"
244+
class="text-3xl md:text-4xl w-8 md:w-10 text-primary"
245245
/>
246246
</span>
247247
</div>
@@ -255,7 +255,7 @@ const menuItems: MenuItem[] = [
255255
href="https://emulatorjs.org/"
256256
target="_blank"
257257
rel="noopener"
258-
class="underline hover:text-purple-500"
258+
class="underline hover:text-primary"
259259
>
260260
EmulatorJS</a
261261
>
@@ -271,7 +271,7 @@ const menuItems: MenuItem[] = [
271271
>
272272
<font-awesome-icon
273273
:icon="faRotate"
274-
class="text-3xl md:text-4xl w-8 md:w-10 text-purple-500"
274+
class="text-3xl md:text-4xl w-8 md:w-10 text-primary"
275275
/>
276276
</span>
277277
</div>
@@ -299,7 +299,7 @@ const menuItems: MenuItem[] = [
299299
>
300300
<font-awesome-icon
301301
:icon="faGithub"
302-
class="text-3xl md:text-4xl w-8 md:w-10 text-purple-500"
302+
class="text-3xl md:text-4xl w-8 md:w-10 text-primary"
303303
/>
304304
</span>
305305
</div>
@@ -320,7 +320,7 @@ const menuItems: MenuItem[] = [
320320
>
321321
<font-awesome-icon
322322
:icon="faShieldHeart"
323-
class="text-3xl md:text-4xl w-8 md:w-10 text-purple-500"
323+
class="text-3xl md:text-4xl w-8 md:w-10 text-primary"
324324
/>
325325
</span>
326326
</div>
@@ -342,7 +342,7 @@ const menuItems: MenuItem[] = [
342342
class="surface-section px-6 py-8 md:py-12 md:px-6 lg:px-8 rounded-lg"
343343
>
344344
<div class="text-700 md:text-center">
345-
<div class="text-purple-600 font-bold mb-3">
345+
<div class="text-primary-600 font-bold mb-3">
346346
<i class="pi pi-discord"></i>&nbsp;POWERED BY FRIENDSHIP
347347
</div>
348348
<div class="text-900 font-bold text-5xl mb-3">Join Our Community</div>
@@ -372,7 +372,7 @@ const menuItems: MenuItem[] = [
372372
<div class="flex items-center">
373373
<font-awesome-icon
374374
:icon="faStar"
375-
class="text-2xl text-purple-500"
375+
class="text-2xl text-primary"
376376
/>
377377
<div class="font-bold ml-3 text-2xl">1,900+</div>
378378
</div>
@@ -382,7 +382,7 @@ const menuItems: MenuItem[] = [
382382
<div class="flex items-center">
383383
<font-awesome-icon
384384
:icon="faUsers"
385-
class="text-2xl text-purple-500"
385+
class="text-2xl text-primary"
386386
/>
387387
<div class="font-bold ml-3 text-2xl">1000+</div>
388388
</div>
@@ -392,7 +392,7 @@ const menuItems: MenuItem[] = [
392392
<div class="flex items-center">
393393
<font-awesome-icon
394394
:icon="faArrowDown"
395-
class="text-2xl text-purple-500"
395+
class="text-2xl text-primary"
396396
/>
397397
<div class="font-bold ml-3 text-2xl">375,000+</div>
398398
</div>
@@ -417,7 +417,7 @@ const menuItems: MenuItem[] = [
417417
loading="lazy"
418418
/>
419419
<div class="text-700 text-lg md:text-xl ml-2">
420-
romm<span class="text-purple-500">.</span>app
420+
romm<span class="text-primary">.</span>app
421421
<div class="text-700 text-sm text-center sm:hidden">
422422
Own your games.
423423
</div>
@@ -429,7 +429,7 @@ const menuItems: MenuItem[] = [
429429
<a
430430
href="https://github.com/rommapp/marketing-site"
431431
target="_blank"
432-
class="text-900 hover:text-purple-500 text-end"
432+
class="text-900 hover:text-primary text-end"
433433
title="github repository"
434434
>
435435
<font-awesome-icon :icon="faGithub" class="text-2xl h-4" />
@@ -438,6 +438,7 @@ const menuItems: MenuItem[] = [
438438
</template>
439439

440440
<style>
441+
body,
441442
.p-menubar.p-menubar-mobile,
442443
.p-menubar.p-menubar-mobile .p-menubar-root-list {
443444
background-color: theme("colors.slate.50");
@@ -448,18 +449,18 @@ const menuItems: MenuItem[] = [
448449
}
449450
450451
.p-button {
451-
background-color: theme("colors.purple.600");
452-
border-color: theme("colors.purple.600");
452+
background-color: theme("colors.primary.600");
453+
border-color: theme("colors.primary.600");
453454
color: theme("colors.white");
454455
455456
&:hover {
456-
background-color: theme("colors.purple.500");
457-
border-color: theme("colors.purple.500");
457+
background-color: theme("colors.primary.500");
458+
border-color: theme("colors.primary.500");
458459
}
459460
460461
&:focus {
461-
background-color: theme("colors.purple.400");
462-
border-color: theme("colors.purple.400");
462+
background-color: theme("colors.primary.400");
463+
border-color: theme("colors.primary.400");
463464
}
464465
}
465466
</style>
@@ -480,9 +481,9 @@ const menuItems: MenuItem[] = [
480481
#discord {
481482
background: linear-gradient(
482483
128deg,
483-
theme("colors.purple.50") 0%,
484-
theme("colors.purple.100") 50%,
485-
theme("colors.purple.50") 100%
484+
theme("colors.primary.50") 0%,
485+
theme("colors.primary.100") 50%,
486+
theme("colors.primary.50") 100%
486487
);
487488
488489
@media (prefers-color-scheme: dark) {

‎tailwind.config.js

Lines changed: 14 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -3,41 +3,20 @@ export default {
33
theme: {
44
extend: {
55
colors: {
6-
primary: "rgb(var(--primary))",
7-
"primary-inverse": "rgb(var(--primary-inverse))",
8-
"primary-hover": "rgb(var(--primary-hover))",
9-
"primary-active-color": "rgb(var(--primary-active-color))",
10-
11-
"primary-highlight":
12-
"rgb(var(--primary)/var(--primary-highlight-opacity))",
13-
"primary-highlight-inverse": "rgb(var(--primary-highlight-inverse))",
14-
"primary-highlight-hover":
15-
"rgb(var(--primary)/var(--primary-highlight-hover-opacity))",
16-
17-
"primary-50": "rgb(var(--primary-50))",
18-
"primary-100": "rgb(var(--primary-100))",
19-
"primary-200": "rgb(var(--primary-200))",
20-
"primary-300": "rgb(var(--primary-300))",
21-
"primary-400": "rgb(var(--primary-400))",
22-
"primary-500": "rgb(var(--primary-500))",
23-
"primary-600": "rgb(var(--primary-600))",
24-
"primary-700": "rgb(var(--primary-700))",
25-
"primary-800": "rgb(var(--primary-800))",
26-
"primary-900": "rgb(var(--primary-900))",
27-
"primary-950": "rgb(var(--primary-950))",
28-
29-
"surface-0": "rgb(var(--surface-0))",
30-
"surface-50": "rgb(var(--surface-50))",
31-
"surface-100": "rgb(var(--surface-100))",
32-
"surface-200": "rgb(var(--surface-200))",
33-
"surface-300": "rgb(var(--surface-300))",
34-
"surface-400": "rgb(var(--surface-400))",
35-
"surface-500": "rgb(var(--surface-500))",
36-
"surface-600": "rgb(var(--surface-600))",
37-
"surface-700": "rgb(var(--surface-700))",
38-
"surface-800": "rgb(var(--surface-800))",
39-
"surface-900": "rgb(var(--surface-900))",
40-
"surface-950": "rgb(var(--surface-950))",
6+
primary: {
7+
50: "#faf5ff",
8+
100: "#f3e8ff",
9+
200: "#e9d5ff",
10+
300: "#d8b4fe",
11+
400: "#c084fc",
12+
500: "#a855f7",
13+
DEFAULT: "#a855f7",
14+
600: "#9333ea",
15+
700: "#7e22ce",
16+
800: "#6b21a8",
17+
900: "#581c87",
18+
950: "#3b0764",
19+
},
4120
},
4221
},
4322
},

0 commit comments

Comments
 (0)