Skip to content

Commit 71e999f

Browse files
marcoaciernomarcoacierno
authored
Add new colors (#25)
1 parent d5d6075 commit 71e999f

File tree

16 files changed

+247
-67
lines changed

16 files changed

+247
-67
lines changed

‎.editorconfig

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
root = true
22

3-
[*.{ts,tsx}]
3+
[*.{ts,tsx,js}]
44
indent_size = 2

‎src/button/button.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,10 @@ export const Button = ({
1717
className={clsx(
1818
"flex items-center justify-items-center border-black border-2 p-3",
1919
{
20-
"bg-aquamarine": color === "aquamarine",
21-
"bg-casablanca": color === "casablanca",
20+
"bg-blue": color === "aquamarine",
21+
"bg-orange": color === "casablanca",
2222
"bg-orange": color === "orange",
23-
"bg-keppel": color === "casablanca",
23+
"bg-green": color === "casablanca",
2424
"bg-pink": color === "pink",
2525
"bg-purple": color === "purple",
2626
"bg-white": color === "white",

‎src/carousel/carousel.tsx

+1-7
Original file line numberDiff line numberDiff line change
@@ -34,13 +34,7 @@ const RightArrow = ({ className }: { className?: string }) => (
3434
</svg>
3535
);
3636

37-
const COLORS: Color[] = [
38-
"orange",
39-
"keppel",
40-
"casablanca",
41-
"aquamarine",
42-
"purple",
43-
];
37+
const COLORS: Color[] = ["orange", "green", "blue", "yellow", "purple"];
4438

4539
const ArrowButton = ({
4640
onClick,

‎src/colors/colors.stories.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import React from "react";
2-
import { Colors } from "./colors";
2+
import { Colors, DarkColors } from "./colors";
33

44
export const Standard = () => <Colors />;
5+
export const Dark = () => <DarkColors />;
56

67
export default {
78
title: "Colors",

‎src/colors/colors.tsx

+108-10
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,114 @@ import React from "react";
22

33
export const Colors = () => {
44
return (
5-
<div className="flex space-x-10">
6-
<div className="w-40 h-40 border-2 border-black bg-white" />
7-
<div className="w-40 h-40 border-2 border-black bg-black" />
8-
<div className="w-40 h-40 border-2 border-black bg-orange" />
9-
<div className="w-40 h-40 border-2 border-black bg-keppel" />
10-
<div className="w-40 h-40 border-2 border-black bg-casablanca" />
11-
<div className="w-40 h-40 border-2 border-black bg-aquamarine" />
12-
<div className="w-40 h-40 border-2 border-black bg-pink" />
13-
<div className="w-40 h-40 border-2 border-black bg-purple" />
14-
<div className="w-40 h-40 border-2 border-black bg-cornflower-blue" />
5+
<div className="grid grid-cols-4 gap-3 p-4">
6+
<div>
7+
<div className={`w-40 h-40 border-2 border-black bg-white`} />
8+
<span>white</span>
9+
</div>
10+
<div>
11+
<div className={`w-40 h-40 border-2 border-black bg-cream`} />
12+
<span>cream</span>
13+
</div>
14+
<div>
15+
<div className={`w-40 h-40 border-2 border-black bg-orange`} />
16+
<span>orange</span>
17+
</div>
18+
<div>
19+
<div className={`w-40 h-40 border-2 border-black bg-red`} />
20+
<span>red</span>
21+
</div>
22+
<div>
23+
<div className={`w-40 h-40 border-2 border-black bg-yellow`} />
24+
<span>yellow</span>
25+
</div>
26+
<div>
27+
<div className={`w-40 h-40 border-2 border-black bg-green`} />
28+
<span>green</span>
29+
</div>
30+
<div>
31+
<div className={`w-40 h-40 border-2 border-black bg-pink`} />
32+
<span>pink</span>
33+
</div>
34+
<div>
35+
<div className={`w-40 h-40 border-2 border-black bg-purple`} />
36+
<span>purple</span>
37+
</div>
38+
<div>
39+
<div className={`w-40 h-40 border-2 border-black bg-blue`} />
40+
<span>blue</span>
41+
</div>
42+
<div>
43+
<div className={`w-40 h-40 border-2 border-black bg-black`} />
44+
<span>black</span>
45+
</div>
46+
<div>
47+
<div className={`w-40 h-40 border-2 border-black bg-grey-50`} />
48+
<span>grey-50</span>
49+
</div>
50+
<div>
51+
<div className={`w-40 h-40 border-2 border-black bg-grey-100`} />
52+
<span>grey-100</span>
53+
</div>
54+
<div>
55+
<div className={`w-40 h-40 border-2 border-black bg-grey-300`} />
56+
<span>grey-300</span>
57+
</div>
58+
<div>
59+
<div className={`w-40 h-40 border-2 border-black bg-grey-500`} />
60+
<span>grey-500</span>
61+
</div>
62+
<div>
63+
<div className={`w-40 h-40 border-2 border-black bg-grey-700`} />
64+
<span>grey-700</span>
65+
</div>
66+
<div>
67+
<div className={`w-40 h-40 border-2 border-black bg-grey-900`} />
68+
<span>grey-900</span>
69+
</div>
70+
</div>
71+
);
72+
};
73+
74+
export const DarkColors = () => {
75+
return (
76+
<div className="bg-black grid grid-cols-4 gap-3 p-4">
77+
<div>
78+
<div className={`w-40 h-40 border-2 border-black bg-white`} />
79+
<span className="text-white">white</span>
80+
</div>
81+
<div>
82+
<div className={`w-40 h-40 border-2 border-black bg-cream`} />
83+
<span className="text-white">cream</span>
84+
</div>
85+
<div>
86+
<div className={`w-40 h-40 border-2 border-black bg-orange-dark`} />
87+
<span className="text-white">orange</span>
88+
</div>
89+
<div>
90+
<div className={`w-40 h-40 border-2 border-black bg-red-dark`} />
91+
<span className="text-white">red</span>
92+
</div>
93+
<div>
94+
<div className={`w-40 h-40 border-2 border-black bg-yellow-dark`} />
95+
<span className="text-white">yellow</span>
96+
</div>
97+
<div>
98+
<div className={`w-40 h-40 border-2 border-black bg-green-dark`} />
99+
<span className="text-white">green</span>
100+
</div>
101+
<div>
102+
<div className={`w-40 h-40 border-2 border-black bg-pink-dark`} />
103+
<span className="text-white">pink</span>
104+
</div>
105+
<div>
106+
<div className={`w-40 h-40 border-2 border-black bg-purple-dark`} />
107+
<span className="text-white">purple</span>
108+
</div>
109+
<div>
110+
<div className={`w-40 h-40 border-2 border-black bg-blue-dark`} />
111+
<span className="text-white">blue</span>
112+
</div>
15113
</div>
16114
);
17115
};

‎src/footer/footer.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export const Footer = () => (
1414
<li>
1515
<SocialLink
1616
href="https://twitter.com/pyconit"
17-
className="bg-keppel"
17+
className="bg-green"
1818
icon={TwitterIcon}
1919
>
2020
Twitter

‎src/header/header.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ const Menu = ({ links }: { links: Link[] }) => {
5454
<li>
5555
<SocialLink
5656
href="https://twitter.com/pyconit"
57-
className="bg-keppel border-black border-4 fill-current text-black"
57+
className="bg-green border-black border-4 fill-current text-black"
5858
icon={TwitterIcon}
5959
>
6060
Twitter
@@ -84,7 +84,6 @@ const Menu = ({ links }: { links: Link[] }) => {
8484
);
8585
};
8686

87-
8887
export const Header = ({
8988
links = [],
9089
backgroundColor = "white",

‎src/paragraph/paragraph.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,11 @@ export const Paragraph = ({
1414
<p
1515
className={clsx("mb-8", {
1616
"font-bold": bold,
17-
"text-aquamarine": color === "aquamarine",
18-
"text-casablanca": color === "casablanca",
17+
"text-blue": color === "aquamarine",
18+
"text-orange": color === "casablanca",
1919
"text-black": color === "black",
2020
"text-orange": color === "orange",
21-
"text-keppel": color === "casablanca",
21+
"text-green": color === "casablanca",
2222
"text-pink": color === "pink",
2323
"text-purple": color === "purple",
2424
"text-white": color === "white",

‎src/schedule/schedule-item.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -33,23 +33,23 @@ export const ScheduleItem = ({
3333
className?: string;
3434
}) => {
3535
const background = {
36-
LIVE_CODING: "bg-keppel",
37-
PERFORMANCE: "bg-cornflower-blue",
36+
LIVE_CODING: "bg-green",
37+
PERFORMANCE: "bg-blue",
3838
INTERMISSION: "bg-white",
39-
LIGHTNING_TALK: "bg-casablanca",
39+
LIGHTNING_TALK: "bg-orange",
4040
QUIZ: "bg-purple",
4141
INTERVIEW: "bg-pink",
42-
CLOSING: "bg-cornflower-blue",
42+
CLOSING: "bg-blue",
4343
DIVERSITY_SUCCESS_STORY: "bg-orange",
44-
AMA: "bg-keppel",
44+
AMA: "bg-green",
4545
}[event.type];
4646

4747
if (event.status == "TBC") {
4848
return (
4949
<div
5050
key={event.start}
5151
className={clsx(
52-
"flex flex-col p-4 font-bold text-white bg-aquamarine",
52+
"flex flex-col p-4 font-bold text-white bg-blue",
5353
className
5454
)}
5555
{...props}

‎src/speaker-details/speaker-details.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -40,10 +40,10 @@ export const SpeakerDetails = ({
4040
portraitUrl={portraitUrl}
4141
subtitle={subtitle}
4242
className={clsx({
43-
"bg-aquamarine": color === "aquamarine",
44-
"bg-casablanca": color === "casablanca",
43+
"bg-blue": color === "aquamarine",
44+
"bg-orange": color === "casablanca",
4545
"bg-orange": color === "orange",
46-
"bg-keppel": color === "casablanca",
46+
"bg-green": color === "casablanca",
4747
"bg-pink": color === "pink",
4848
"bg-purple": color === "purple",
4949
})}

‎src/split-section/split-section.tsx

+12-7
Original file line numberDiff line numberDiff line change
@@ -38,11 +38,11 @@ export const SplitSection = ({
3838
<div className="max-w-xs">
3939
<div className="relative aspect-w-1 aspect-h-1">
4040
<div
41-
className={clsx("absolute w-full h-full bg-keppel top-10 left-20", {
42-
"bg-aquamarine": highlightColor === "aquamarine",
43-
"bg-casablanca": highlightColor === "casablanca",
41+
className={clsx("absolute w-full h-full bg-green top-10 left-20", {
42+
"bg-blue": highlightColor === "aquamarine",
43+
"bg-orange": highlightColor === "casablanca",
4444
"bg-orange": highlightColor === "orange",
45-
"bg-keppel": highlightColor === "casablanca",
45+
"bg-green": highlightColor === "casablanca",
4646
"bg-pink": highlightColor === "pink",
4747
"bg-purple": highlightColor === "purple",
4848
"bg-black": highlightColor === "black",
@@ -60,9 +60,14 @@ export const SplitSection = ({
6060

6161
return (
6262
<div>
63-
<div className={clsx("max-w-7xl mx-auto md:flex md:grid-cols-2 md:divide-y-0 md:divide-x-4", {
64-
"divide-y-4": !hideIllustrationOnMobile
65-
})}>
63+
<div
64+
className={clsx(
65+
"max-w-7xl mx-auto md:flex md:grid-cols-2 md:divide-y-0 md:divide-x-4",
66+
{
67+
"divide-y-4": !hideIllustrationOnMobile,
68+
}
69+
)}
70+
>
6671
{top}
6772
{bottom}
6873
</div>

‎src/style.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,15 @@ p a {
1010
.dotted-underline {
1111
text-decoration: underline;
1212
text-decoration-style: dotted;
13-
text-decoration-color: theme("colors.purple");
13+
text-decoration-color: theme("colors.purple.light");
1414
text-underline-offset: 2px;
1515
text-decoration-thickness: 1px;
1616
}
1717

1818
.wavy-underline {
1919
text-decoration: underline;
2020
text-decoration-style: wavy;
21-
text-decoration-color: theme("colors.aquamarine");
21+
text-decoration-color: theme("colors.blue.light");
2222
}
2323

2424
.carousel-container {

‎src/ticket/lanyard.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import React from "react";
33
export const Lanyard = () => {
44
return (
55
<div className="flex flex-col items-center justify-center w-full">
6-
<div className="z-30 h-1 origin-bottom ticket:scale-y-150 scale-y-10000 ticket:h-24 transform-gpu w-14 bg-cornflower-blue" />
7-
<div className="z-30 h-10 -mt-2 transform-gpu rounded-b-md w-14 bg-cornflower-blue" />
6+
<div className="z-30 h-1 origin-bottom ticket:scale-y-150 scale-y-10000 ticket:h-24 transform-gpu w-14 bg-blue" />
7+
<div className="z-30 h-10 -mt-2 transform-gpu rounded-b-md w-14 bg-blue" />
88

99
<div
1010
style={{

‎src/ticket/ticket.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,10 @@ export const Ticket = ({ name, company, username }: TicketProps) => {
3939
<div className="w-1/3 px-2 pt-2 bg-green">
4040
<PythonSquare1 />
4141
</div>
42-
<div className="w-1/3 border-l-4 border-r-4 border-black border-solid bg-casablanca ">
42+
<div className="w-1/3 border-l-4 border-r-4 border-black border-solid bg-orange ">
4343
<PythonSquare2 />
4444
</div>
45-
<div className="w-1/3 bg-aquamarine ">
45+
<div className="w-1/3 bg-blue ">
4646
<PythonSquare3 />
4747
</div>
4848
</div>

‎src/types.ts

+8-6
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
export type Color =
2-
| "white"
3-
| "black"
2+
| "purple"
43
| "orange"
5-
| "keppel"
6-
| "casablanca"
7-
| "aquamarine"
4+
| "blue"
5+
| "green"
6+
| "yellow"
87
| "pink"
9-
| "purple";
8+
| "red"
9+
| "black"
10+
| "cream"
11+
| "white";

0 commit comments

Comments
 (0)