Skip to content

Commit 44c1b3a

Browse files
GuiBibeauGuiBibeau
committed
light mode done
1 parent 3e1c07c commit 44c1b3a

File tree

18 files changed

+263
-278
lines changed

18 files changed

+263
-278
lines changed

‎packages/ui/button/button.module.css‎

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -64,17 +64,6 @@
6464
color: white;
6565
}
6666

67-
.pink {
68-
background-color: var(--geist-highlight-magenta);
69-
color: white;
70-
border-color: var(--geist-highlight-pink);
71-
}
72-
73-
.pink:hover {
74-
background-color: var(--geist-highlight-pink);
75-
color: white;
76-
}
77-
7867
.white {
7968
background-color: #fff;
8069
color: #000;

‎packages/ui/button/button.tsx‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,6 @@ import cn from 'clsx'
88
import LoadingDots from '../loading-dots'
99
import s from './button.module.css'
1010

11-
export type ButtonVariant =
12-
| 'primary'
13-
| 'secondary'
14-
| 'success'
15-
| 'ghost'
16-
| 'violet'
17-
| 'black'
18-
| 'white'
19-
| 'pink'
20-
2111
/**
2212
* All the component types allowed by the Button component.
2313
*/
@@ -29,7 +19,14 @@ export type ButtonComponentType = 'button' | 'a' | JSXElementConstructor<any>
2919
export interface ButtonProps<C extends ButtonComponentType = 'button'> {
3020
href?: string
3121
className?: string
32-
variant?: ButtonVariant
22+
variant?:
23+
| 'primary'
24+
| 'secondary'
25+
| 'success'
26+
| 'ghost'
27+
| 'violet'
28+
| 'black'
29+
| 'white'
3330
size?: 'xs' | 'sm' | 'md' | 'lg'
3431
active?: boolean
3532
type?: 'submit' | 'reset' | 'button'

‎packages/ui/deploy-button.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { FC } from 'react'
2-
import Button, { ButtonVariant } from './button'
2+
import Button from './button'
33

44
const VERCEL_CLONE = 'https://vercel.com/new/clone'
55

@@ -8,7 +8,6 @@ export interface DeployButtonProps {
88
env?: string[]
99
projectName?: string
1010
repositoryName?: string
11-
variant?: ButtonVariant
1211
}
1312

1413
const DeployButton: FC<DeployButtonProps> = (props) => {
@@ -31,7 +30,6 @@ const DeployButton: FC<DeployButtonProps> = (props) => {
3130
href={`${VERCEL_CLONE}${query ? `?${query}` : ''}`}
3231
target="_blank"
3332
rel="noreferrer"
34-
variant={props.variant ?? 'primary'}
3533
>
3634
Clone & Deploy
3735
</Button>

‎packages/ui/layout.tsx‎

Lines changed: 24 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -2,64 +2,40 @@ import React, { FC } from 'react'
22
import Head from 'next/head'
33
import Nav, { NavProps } from './nav'
44
import { Vercel } from './icons'
5-
import { UiProvider } from './UiContext'
65

76
export interface LayoutProps extends NavProps {
87
title?: string
9-
darkMode?: boolean
108
}
119

12-
const Layout: FC<LayoutProps> = ({
13-
title,
14-
path,
15-
deployButton,
16-
darkMode,
17-
children,
18-
}) => {
10+
const Layout: FC<LayoutProps> = ({ title, path, deployButton, children }) => {
1911
return (
20-
<UiProvider darkMode={Boolean(darkMode)}>
21-
<div
22-
className={`mx-auto h-screen flex flex-col ${
23-
darkMode ? 'bg-dark-accents-0' : ''
24-
}`}
25-
>
26-
{title && (
27-
<Head>
28-
<title>{title} - Vercel Examples</title>
29-
</Head>
30-
)}
12+
<div className="mx-auto h-screen flex flex-col">
13+
{title && (
14+
<Head>
15+
<title>{title} - Vercel Examples</title>
16+
</Head>
17+
)}
3118

32-
<Nav path={path} deployButton={deployButton} />
19+
<Nav path={path} deployButton={deployButton} />
3320

34-
<div
35-
className={`${
36-
darkMode ? 'bg-dark-accents-0' : 'bg-accents-0 px-8 '
37-
} `}
38-
>
39-
{children}
40-
</div>
21+
<div className="px-8 bg-accents-0">{children}</div>
4122

42-
<footer
43-
className={`py-10 w-full mt-auto border-t flex items-center justify-center ${
44-
darkMode ? 'bg-dark-accents-0' : 'bg-accents-1'
45-
} z-20`}
23+
<footer className="py-10 w-full mt-auto border-t flex items-center justify-center bg-accents-1 z-20">
24+
<span className="text-primary">Created by</span>
25+
<a
26+
href="https://vercel.com"
27+
aria-label="Vercel.com Link"
28+
target="_blank"
29+
rel="noreferrer"
30+
className="text-black"
4631
>
47-
<span className="text-white">Created by</span>
48-
<a
49-
href="https://vercel.com"
50-
aria-label="Vercel.com Link"
51-
target="_blank"
52-
rel="noreferrer"
53-
className="text-white"
54-
>
55-
<Vercel
56-
className="inline-block h-6 ml-3 text-primary"
57-
alt="Vercel.com Logo"
58-
/>
59-
</a>
60-
</footer>
61-
</div>
62-
</UiProvider>
32+
<Vercel
33+
className="inline-block h-6 ml-3 text-primary"
34+
alt="Vercel.com Logo"
35+
/>
36+
</a>
37+
</footer>
38+
</div>
6339
)
6440
}
6541

‎packages/ui/nav/nav.module.css‎

Lines changed: 0 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,6 @@
33
box-shadow: 0 0 15px 0 rgb(0 0 0 / 10%);
44
}
55

6-
.root-dark {
7-
@apply border-b border-gray-800 py-5 relative z-20 bg-dark-accents-0;
8-
box-shadow: 0 0 15px 0 rgb(0 0 0 / 10%);
9-
}
10-
116
.container {
127
@apply mx-auto max-w-7xl px-14;
138
}
@@ -25,31 +20,3 @@
2520
color: var(--accents-8);
2621
cursor: pointer;
2722
}
28-
29-
.link-dark {
30-
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
31-
color: var(--accents-2);
32-
-webkit-text-decoration: none;
33-
text-decoration: none;
34-
-webkit-transition: color 0.2s ease;
35-
transition: color 0.2s ease;
36-
}
37-
38-
.link-dark:hover {
39-
color: var(--accents-4);
40-
cursor: pointer;
41-
}
42-
43-
.link-pink {
44-
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
45-
color: var(--geist-highlight-magenta);
46-
-webkit-text-decoration: none;
47-
text-decoration: none;
48-
-webkit-transition: color 0.2s ease;
49-
transition: color 0.2s ease;
50-
}
51-
52-
.link-pink:hover {
53-
color: var(--geist-highlight-pink);
54-
cursor: pointer;
55-
}

‎packages/ui/nav/nav.tsx‎

Lines changed: 5 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import Link from '../link'
44
import Button from '../button'
55
import DeployButton, { DeployButtonProps } from '../deploy-button'
66
import s from './nav.module.css'
7-
import { useDarkMode } from '../UiContext'
87

98
const REPO_URL = 'https://github.com/vercel/examples'
109
const REPO_DIR = '/tree/main/'
@@ -18,28 +17,20 @@ export default function Nav({ path, deployButton }: NavProps) {
1817
const displayPath = ['Vercel Examples']
1918
.concat(path?.split('/').filter(Boolean) || [])
2019
.join(' / ')
21-
const darkMode = useDarkMode()
20+
2221
return (
23-
<nav className={darkMode ? s['root-dark'] : s.root}>
22+
<nav className={s.root}>
2423
<div className={cn('flex items-center lg:px-6 px-8', s.container)}>
2524
<div className="flex flex-row items-center">
2625
<Link href="/">
2726
<span>
28-
<svg
29-
height="26"
30-
viewBox="0 0 75 65"
31-
fill={darkMode ? 'white' : '#000'}
32-
>
27+
<svg height="26" viewBox="0 0 75 65" fill="#000">
3328
<title>Vercel Logo</title>
3429
<path d="M37.59.25l36.95 64H.64l36.95-64z"></path>
3530
</svg>
3631
</span>
3732
</Link>
38-
<li
39-
className={`ml-2 ${
40-
darkMode ? 'text-dark-accents-9' : 'text-gray-200'
41-
}`}
42-
>
33+
<li className="ml-2 text-gray-200">
4334
<svg
4435
viewBox="0 0 24 24"
4536
width="32"
@@ -55,7 +46,7 @@ export default function Nav({ path, deployButton }: NavProps) {
5546
</svg>
5647
</li>
5748
<li className="font-medium" style={{ letterSpacing: '.01px' }}>
58-
<Link href="/" className={darkMode ? s['link-dark'] : s.link}>
49+
<Link href="/" className={s.link}>
5950
{displayPath}
6051
</Link>
6152
</li>
@@ -66,15 +57,13 @@ export default function Nav({ path, deployButton }: NavProps) {
6657
<Button
6758
variant="ghost"
6859
Component="a"
69-
className={darkMode ? s['link-pink'] : s.link}
7060
href="https://github.com/vercel/examples/tree/main"
7161
>
7262
More Examples →
7363
</Button>
7464
</span>
7565
<span className="ml-2 h-full flex items-center cursor-not-allowed text-accents-5">
7666
<DeployButton
77-
variant={darkMode ? 'pink' : 'primary'}
7867
{...deployButton}
7968
repositoryUrl={
8069
deployButton?.repositoryUrl ||

‎packages/ui/package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/ui/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@vercel/examples-ui",
3-
"version": "0.2.8-beta.0",
3+
"version": "0.2.8",
44
"main": "index.tsx",
55
"license": "MIT",
66
"scripts": {

‎packages/ui/tailwind.js‎

Lines changed: 0 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -19,31 +19,6 @@ module.exports = {
1919
'success-light': 'var(--geist-success-light)',
2020
success: 'var(--geist-success-lighter)',
2121
'success-dark': 'var(--geist-success-dark)',
22-
'highlight-magenta': 'var(--geist-highlight-magenta)',
23-
'highlight-purple': 'var(--geist-highlight-purple)',
24-
'highlight-pink': 'var(--geist-highlight-pink)',
25-
'highlight-yellow': 'var(--geist-highlight-yellow)',
26-
dark: {
27-
'accents-0': 'var(--accents-9)',
28-
'accents-1': 'var(--accents-8)',
29-
'accents-2': 'var(--accents-7)',
30-
'accents-3': 'var(--accents-6)',
31-
'accents-4': 'var(--accents-5)',
32-
'accents-5': 'var(--accents-4)',
33-
'accents-6': 'var(--accents-3)',
34-
'accents-7': 'var(--accents-2)',
35-
'accents-8': 'var(--accents-1)',
36-
'accents-9': 'var(--accents-0)',
37-
},
38-
},
39-
keyframes: {
40-
gradient: {
41-
'0%, 100%': { 'background-position': '0% 50%' },
42-
'50%': { 'background-position': '100% 50%;' },
43-
},
44-
},
45-
animation: {
46-
gradient: 'gradient 1s infinite',
4722
},
4823
},
4924
},

0 commit comments

Comments
 (0)