Skip to content

Commit df7ad4f

Browse files
pavel-fokinPavel Fokin
pavel-fokin
and
Pavel Fokin
authored
Update Card design (#421)
* Add color system with CSS variables * Update Card component design --------- Co-authored-by: Pavel Fokin <pavel.fokin.dev@gmail.com>
1 parent 3e6e08d commit df7ad4f

5 files changed

Lines changed: 117 additions & 46 deletions

File tree

‎components/UI/Card.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import PropTypes from 'prop-types'
22

3-
import styles from '@/styles/components/card.module.scss'
3+
import styles from '@/styles/components/card.module.css'
44

55
export default function Card({
66
children,

‎styles/colors.scss‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
:root {
2+
--color-primary-50: #ebfffd;
3+
--color-primary-100: #a4f3f4;
4+
--color-primary-200: #4ee4e8;
5+
--color-primary-300: #00cfd7;
6+
--color-primary-400: #01b8c1;
7+
--color-primary-500: #02a2ab;
8+
--color-primary-600: #028c96;
9+
--color-primary-700: #037781;
10+
--color-primary-800: #04626d;
11+
--color-primary-900: #044e5a;
12+
--color-primary-950: #053b47;
13+
14+
--color-purple-50: #fdebff;
15+
--color-purple-100: #f3cef4;
16+
--color-purple-200: #e9b1e8;
17+
--color-purple-300: #de94dc;
18+
--color-purple-400: #d375d0;
19+
--color-purple-500: #c854c3;
20+
--color-purple-600: #ba2db3;
21+
--color-purple-700: #a4029b;
22+
--color-purple-800: #84037a;
23+
--color-purple-900: #65045a;
24+
--color-purple-950: #47053b;
25+
26+
--color-gray-50: #f8fafb;
27+
--color-gray-100: #dde0e0;
28+
--color-gray-200: #c3c6c6;
29+
--color-gray-300: #a9adad;
30+
--color-gray-400: #909494;
31+
--color-gray-500: #787c7c;
32+
--color-gray-600: #626564;
33+
--color-gray-700: #4c4f4e;
34+
--color-gray-800: #383938;
35+
--color-gray-900: #252524;
36+
--color-gray-950: #121210;
37+
38+
--color-red-50: #fff5f5;
39+
--color-red-100: #fedbdb;
40+
--color-red-200: #fdc0c0;
41+
--color-red-300: #fda5a5;
42+
--color-red-400: #fc8787;
43+
--color-red-500: #fb6565;
44+
--color-red-600: #eb4b4b;
45+
--color-red-700: #ce3e3e;
46+
--color-red-800: #b23232;
47+
--color-red-900: #972626;
48+
--color-red-950: #7d1a1a;
49+
50+
--color-green-50: #f4fce3;
51+
--color-green-100: #d6ecb4;
52+
--color-green-200: #b9dc84;
53+
--color-green-300: #9acc53;
54+
--color-green-400: #7abb20;
55+
--color-green-500: #69a714;
56+
--color-green-600: #5c9311;
57+
--color-green-700: #507f0e;
58+
--color-green-800: #436c0b;
59+
--color-green-900: #385909;
60+
--color-green-950: #2c4706;
61+
62+
--color-yellow-50: #fff9db;
63+
--color-yellow-100: #fce2a3;
64+
--color-yellow-200: #faca68;
65+
--color-yellow-300: #f7b02a;
66+
--color-yellow-400: #ec9800;
67+
--color-yellow-500: #d48700;
68+
--color-yellow-600: #bd7500;
69+
--color-yellow-700: #a66500;
70+
--color-yellow-800: #905400;
71+
--color-yellow-900: #7b4400;
72+
--color-yellow-950: #663500;
73+
}

‎styles/components/card.module.css‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
@reference 'tailwindcss';
2+
3+
.card {
4+
@apply shadow p-4 transition-all duration-200;
5+
border: 1px solid var(--card-border);
6+
background-color: var(--card-bg);
7+
color: var(--card-text);
8+
padding: 1rem;
9+
10+
&:active {
11+
@apply shadow-md;
12+
}
13+
14+
&:focus-visible {
15+
outline: 2px solid var(--accent-icon);
16+
outline-offset: 2px;
17+
}
18+
19+
&:hover {
20+
@apply shadow-md;
21+
}
22+
23+
@media (prefers-reduced-motion: reduce) {
24+
transition: none;
25+
26+
&:hover {
27+
@apply shadow-md;
28+
transform: none;
29+
}
30+
}
31+
}

‎styles/components/card.module.scss‎

Lines changed: 0 additions & 35 deletions
This file was deleted.

‎styles/variables.scss‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1+
@use './colors' as *;
2+
13
body {
24
--background-header: #002C37;
35
--background-block: #002C37;
4-
--background-main: white;
6+
--background-main: var(--color-gray-50);
57
--background-footer: #333333;
68
--background-menu: #005460;
79
--background-secondary: #F9F9F9;
@@ -25,15 +27,15 @@ body {
2527
--orange: #FCAC45;
2628
--purple: #800080;
2729
// Card variables
28-
--card-shadow: #000;
29-
--card-border: #000;
30-
--card-bg: #fff;
31-
--card-text: #000;
30+
--card-shadow: var(--color-gray-800);
31+
--card-border: var(--color-gray-200);
32+
--card-bg: white;
33+
--card-text: var(--color-gray-950);
3234
}
3335
body.dark {
3436
--background-header: #031B21;
3537
--background-block: #031B21;
36-
--background-main: #090909;
38+
--background-main: var(--color-gray-950);
3739
--background-footer: #1C1C1C;
3840
--background-menu: black;
3941
--background-secondary: #101010;
@@ -57,10 +59,10 @@ body {
5759
--orange: #FAD29E;
5860
--purple: #EE82EE;
5961
// Card variables
60-
--card-shadow: #787878;
61-
--card-border: #787878;
62-
--card-bg: #1a1a1a;
63-
--card-text: #fff;
62+
--card-shadow: var(--color-gray-800);
63+
--card-border: var(--color-gray-800);
64+
--card-bg: black;
65+
--card-text: var(--color-gray-100);
6466
}
6567

6668
body[data-networkname*="xahau"] {

0 commit comments

Comments
 (0)