Skip to content

Commit 991b1d0

Browse files
committed
update color with css variables
1 parent bd86d8a commit 991b1d0

File tree

5 files changed

+51
-28
lines changed

5 files changed

+51
-28
lines changed

src/components/AltHeroSection.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ const AltHeroSection = () => {
55
return (
66
<div className="flex flex-col items-center justify-center">
77
<div className="my-16 flex flex-col items-center px-3 pb-6 sm:mb-20 sm:mt-20">
8-
<h1 className="mb-16 text-center text-4xl font-black md:w-3/4 md:text-7xl lg:text-9xl dark:text-primary-400">
8+
<h1 className="mb-16 text-center text-5xl font-black md:w-3/4 md:text-7xl lg:text-9xl dark:text-primary-400">
99
FullStack Web Developer
1010
</h1>
1111
<p className="text-center text-xl text-dark-900 dark:text-white">

src/components/Logo.tsx

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,7 @@ import { Link } from 'react-router-dom';
22

33
import { cn } from '#/lib/cn';
44

5-
const Logo = ({
6-
large,
7-
variant,
8-
}: {
9-
large?: boolean;
10-
variant: 'dark' | 'light' | undefined;
11-
}) => {
5+
const Logo = ({ large, variant }: { large?: boolean; variant: string }) => {
126
return (
137
<Link to="/">
148
<svg
@@ -26,10 +20,10 @@ const Logo = ({
2620
mixBlendMode: 'normal',
2721
fill: `${
2822
variant === 'dark'
29-
? 'hsl(159, 94%, 57%)'
30-
: 'hsl(158, 100%, 38%)'
23+
? 'hsl(var(--color-primary-400))'
24+
: 'hsl(var(--color-primary-600))'
3125
}`,
32-
fillOpacity: 0.9,
26+
fillOpacity: 1,
3327
stroke: 'none',
3428
strokeWidth: 0.26,
3529
}}

src/index.css

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,30 @@
44
@tailwind components;
55
@tailwind utilities;
66

7+
@layer base {
8+
:root {
9+
--color-primary: 180 100% 40%;
10+
--color-primary-400: 180 100% 76%;
11+
--color-primary-500: 180 90% 58%;
12+
--color-primary-600: 180 100% 40%;
13+
--color-primary-700: 180 80% 36%;
14+
15+
--color-secondary: 259 100% 59%;
16+
--color-secondary-700: 259 100% 39%;
17+
--color-secondary-600: 259 100% 59%;
18+
--color-secondary-500: 259 100% 69%;
19+
--color-secondary-400: 259 100% 79%;
20+
21+
--color-dark: 240 10% 14%;
22+
--color-dark-900: 240 10% 14%;
23+
--color-dark-800: 240 10% 20%;
24+
--color-dark-700: 240 10% 30%;
25+
--color-dark-600: 240 10% 40%;
26+
--color-dark-500: 240 10% 50%;
27+
--color-dark-400: 240 10% 70%;
28+
}
29+
}
30+
731
#project-grid {
832
display: grid;
933
grid-template-columns: minmax(0, 1fr);

src/routes/navigation.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,25 @@
11
import { faBars } from '@fortawesome/free-solid-svg-icons';
22
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
33
import { useState } from 'react';
4+
import { useSelector } from 'react-redux';
45
import { Outlet } from 'react-router-dom';
56

67
import Container from '#components/Container';
78
import Logo from '#components/Logo';
89
import NavigationMenu from '#components/NavigationMenu';
10+
import { RootState } from '#store/store';
911

1012
const Navigation = () => {
1113
const [open, setOpen] = useState(false);
14+
const theme = useSelector((state: RootState) => state.theme);
1215

1316
return (
1417
<>
1518
<header className="relative bg-white dark:bg-dark">
1619
<Container>
1720
<div className="flex w-full flex-wrap items-center justify-between py-3">
1821
<div className="flex w-full items-center justify-between gap-4 md:w-max">
19-
<Logo variant="light" />
22+
<Logo variant={theme} large />
2023
<button
2124
data-collapse-toggle="navbar-default"
2225
type="button"
@@ -26,7 +29,7 @@ const Navigation = () => {
2629
onClick={() => setOpen(!open)}
2730
>
2831
<span className="sr-only">Open main menu</span>
29-
<FontAwesomeIcon icon={faBars} className="h-6 w-6" />
32+
<FontAwesomeIcon icon={faBars} className="h-8 w-8" />
3033
</button>
3134
</div>
3235
<NavigationMenu openState={open} />

tailwind.config.js

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -13,29 +13,31 @@ export default {
1313
},
1414
colors: {
1515
primary: {
16-
DEFAULT: 'hsl(180, 80%, 36%)',
17-
700: 'hsl(180, 80%, 36%)',
18-
600: 'hsl(180, 100%, 40%)',
19-
500: 'hsl(180, 90%, 58%)',
20-
400: 'hsl(180, 100%, 76%)',
16+
DEFAULT: 'hsl(var(--color-primary) / <alpha-value>)',
17+
700: 'hsl(var(--color-primary-700) / <alpha-value>)',
18+
600: 'hsl(var(--color-primary-600) / <alpha-value>)',
19+
500: 'hsl(var(--color-primary-500) / <alpha-value>)',
20+
400: 'hsl(var(--color-primary-400) / <alpha-value>)',
2121
},
2222
secondary: {
23-
DEFAULT: 'hsl(259, 100%, 59%)',
24-
600: 'hsl(259, 100%, 59%)',
25-
500: 'hsl(259, 100%, 69%)',
26-
400: 'hsl(259, 100%, 79%)',
23+
DEFAULT: 'hsl(var(--color-secondary) / <alpha-value>)',
24+
700: 'hsl(var(--color-secondary-700) / <alpha-value>)',
25+
600: 'hsl(var(--color-secondary-600) / <alpha-value>)',
26+
500: 'hsl(var(--color-secondary-500) / <alpha-value>)',
27+
400: 'hsl(var(--color-secondary-400) / <alpha-value>)',
2728
},
2829
white: {
2930
DEFAULT: 'hsl(240, 21%, 95%)',
3031
full: 'hsl(255, 100%,100%)',
3132
},
3233
dark: {
33-
DEFAULT: 'hsl(240, 10%, 14%)',
34-
900: 'hsl(240, 10%, 14%)',
35-
800: 'hsl(240, 10%, 20%)',
36-
700: 'hsl(240, 10%, 30%)',
37-
600: 'hsl(240, 10%, 40%)',
38-
500: 'hsl(240, 10%, 50%)',
34+
DEFAULT: 'hsl(var(--color-dark) / <alpha-value>)',
35+
900: 'hsl(var(--color-dark-900) / <alpha-value>)',
36+
800: 'hsl(var(--color-dark-800) / <alpha-value>)',
37+
700: 'hsl(var(--color-dark-700) / <alpha-value>)',
38+
600: 'hsl(var(--color-dark-600) / <alpha-value>)',
39+
500: 'hsl(var(--color-dark-500) / <alpha-value>)',
40+
400: 'hsl(var(--color-dark-400) / <alpha-value>)',
3941
},
4042
},
4143
animation: {

0 commit comments

Comments
 (0)