crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-04 12:11:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Base layout

Browse Source
This commit is contained in:
Jonatan Schultz 2021-08-24 18:08:35 +02:00
parent 55a261a890
commit 60da0bf0ba
5 changed files with 37 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
assets/base.css
View File

@ -1,35 +1,25 @@
:root { :root {
--primary: #ffffff; --primary: #ffffff;
--primary-2: #f1f3f5; --primary-2: #f4f4f4;
--secondary: #000000; --secondary: #000000;
--secondary-2: #111; --secondary-2: #111;
--selection: var(--cyan); --selection: var(--red);
--text-base: #000000; --text-base: #000000;
--text-primary: #000000; --text-primary: #000000;
--text-secondary: white; --text-secondary: #ffffff;
--hover: rgba(0, 0, 0, 0.075); --hover: rgba(0, 0, 0, 0.075);
--hover-1: rgba(0, 0, 0, 0.15); --hover-1: rgba(0, 0, 0, 0.15);
--hover-2: rgba(0, 0, 0, 0.25); --hover-2: rgba(0, 0, 0, 0.25);
--cyan: #22b8cf; --red: #fc3f1d;
--green: #37b679; --blue: #4628f0;
--red: #da3c3c; --yellow: #fab413;
--purple: #f81ce5;
--blue: #0070f3;
--pink: #ff0080;
--pink-light: #ff379c;
--magenta: #eb367f;
--violet: #7928ca;
--violet-dark: #4c2889;
--accent-0: #fff; --accent-0: #fff;
--accent-1: #fafafa; --accent-1: #fafafa;
--accent-2: #eaeaea; --accent-2: #eaeaea;
--accent-3: #999999; --accent-3: #b4afaf;
--accent-4: #888888; --accent-4: #888888;
--accent-5: #666666; --accent-5: #666666;
--accent-6: #444444; --accent-6: #444444;
@ -37,34 +27,16 @@
--accent-8: #111111; --accent-8: #111111;
--accent-9: #000; --accent-9: #000;
--font-sans: -apple-system, system-ui, BlinkMacSystemFont, 'Helvetica Neue', --font-sans: 'Inter', sans-serif;
'Helvetica', sans-serif;
}
[data-theme='dark'] { --cyan: #22b8cf;
--primary: #000000; --green: #37b679;
--primary-2: #111; --purple: #f81ce5;
--secondary: #ffffff; --pink: #ff0080;
--secondary-2: #f1f3f5; --pink-light: #ff379c;
--hover: rgba(255, 255, 255, 0.075); --magenta: #eb367f;
--hover-1: rgba(255, 255, 255, 0.15); --violet: #7928ca;
--hover-2: rgba(255, 255, 255, 0.25); --violet-dark: #4c2889;
--selection: var(--purple);
--text-base: white;
--text-primary: white;
--text-secondary: black;
--accent-9: #fff;
--accent-8: #fafafa;
--accent-7: #eaeaea;
--accent-6: #999999;
--accent-5: #888888;
--accent-4: #666666;
--accent-3: #444444;
--accent-2: #333333;
--accent-1: #111111;
--accent-0: #000;
} }
*, *,
@ -80,6 +52,12 @@ html {
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
@apply text-html;
}
@screen lg {
html {
@apply text-html-lg;
}
} }
html, html,

1
components/common/Layout/Layout.module.css
View File

@ -1,4 +1,3 @@
.root { .root {
@apply h-full bg-primary mx-auto transition-colors duration-150; @apply h-full bg-primary mx-auto transition-colors duration-150;
max-width: 2460px;
} }

2
components/ui/Container/Container.tsx
View File

@ -15,7 +15,7 @@ const Container: FC<ContainerProps> = ({
clean, clean,
}) => { }) => {
const rootClassName = cn(className, { const rootClassName = cn(className, {
'mx-auto max-w-8xl px-6': !clean, 'mx-auto max-w-8xl px-4 lg:px-6': !clean,
}) })
let Component: React.ComponentType<React.HTMLAttributes<HTMLDivElement>> = let Component: React.ComponentType<React.HTMLAttributes<HTMLDivElement>> =

7
pages/_document.tsx
View File

@ -4,7 +4,12 @@ class MyDocument extends Document {
render() { render() {
return ( return (
<Html> <Html>
<Head /> <Head>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;700&display=swap"
rel="stylesheet"
/>
</Head>
<body className="loading"> <body className="loading">
<Main /> <Main />
<NextScript /> <NextScript />

11
tailwind.config.js
View File

@ -17,7 +17,7 @@ module.exports = {
theme: { theme: {
extend: { extend: {
maxWidth: { maxWidth: {
'8xl': '1920px', '8xl': '2560px',
}, },
colors: { colors: {
primary: 'var(--primary)', primary: 'var(--primary)',
@ -37,15 +37,16 @@ module.exports = {
'accent-7': 'var(--accent-7)', 'accent-7': 'var(--accent-7)',
'accent-8': 'var(--accent-8)', 'accent-8': 'var(--accent-8)',
'accent-9': 'var(--accent-9)', 'accent-9': 'var(--accent-9)',
blue: 'var(--blue)',
red: 'var(--red)',
yellow: 'var(--yellow)',
violet: 'var(--violet)', violet: 'var(--violet)',
'violet-light': 'var(--violet-light)', 'violet-light': 'var(--violet-light)',
'violet-dark': 'var(--violet-dark)', 'violet-dark': 'var(--violet-dark)',
pink: 'var(--pink)', pink: 'var(--pink)',
'pink-light': 'var(--pink-light)', 'pink-light': 'var(--pink-light)',
cyan: 'var(--cyan)', cyan: 'var(--cyan)',
blue: 'var(--blue)',
green: 'var(--green)', green: 'var(--green)',
red: 'var(--red)',
}, },
textColor: { textColor: {
base: 'var(--text-base)', base: 'var(--text-base)',
@ -57,6 +58,10 @@ module.exports = {
magical: magical:
'rgba(0, 0, 0, 0.02) 0px 30px 30px, rgba(0, 0, 0, 0.03) 0px 0px 8px, rgba(0, 0, 0, 0.05) 0px 1px 0px', 'rgba(0, 0, 0, 0.02) 0px 30px 30px, rgba(0, 0, 0, 0.03) 0px 0px 8px, rgba(0, 0, 0, 0.05) 0px 1px 0px',
}, },
fontSize: {
html: '15px',
'html-lg': '18px',
},
lineHeight: { lineHeight: {
'extra-loose': '2.2', 'extra-loose': '2.2',
}, },