Skip to content
This repository has been archived by the owner on Jul 13, 2023. It is now read-only.

Commit

Permalink
refactor!: Change to new design (#16)
Browse files Browse the repository at this point in the history 
Co-authored-by: moripen <107696180+moripen@users.noreply.github.com>
Co-authored-by: moripen <markusmoripen@gmail.com>
  • Loading branch information
@simenandre @moripen
3 people committed Jul 5, 2022
1 parent 6f80fcb commit 4051f16
Show file tree
Hide file tree
Showing 27 changed files with 248 additions and 377 deletions.
36 changes: 0 additions & 36 deletions .github/workflows/figmagic.yml
View file

This file was deleted.

1 change: 0 additions & 1 deletion .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,5 +104,4 @@ dist
.tern-port

package-lock.json
.figmagic
out/
4 changes: 1 addition & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,7 @@
"build:watch": "tsc --watch -p tsconfig.theme.json && tsc --watch -p tsconfig.theme.cjs.json",
"dev": "next",
"lint": "eslint .",
"docs:build": "next build && next export",
"download": "figmagic"
"docs:build": "next build && next export"
},
"prettier": "@cobraz/prettier",
"devDependencies": {
Expand All @@ -32,7 +31,6 @@
"@theme-ui/style-guide": "0.14.0-develop.13",
"@types/react": "^17.0.38",
"eslint": "^8.6.0",
"figmagic": "^4.4.4",
"jest": "^27.4.5",
"lodash": "^4.17.21",
"next": "^12.0.7",
Expand Down
161 changes: 85 additions & 76 deletions pages/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,9 @@ import {
Heading,
Input,
Label,
// Link,
Link,
NavLink,
Paragraph,
Radio,
Select,
Slider,
Expand All @@ -21,11 +22,10 @@ import {
} from '@theme-ui/components';
import { ColorPalette, TypeScale } from '@theme-ui/style-guide';
import Head from 'next/head';
import Link from 'next/link';
//import Link from 'next/link';
import React from 'react';
import { HiArrowRight } from 'react-icons/hi';
import type { Theme } from 'theme-ui';
import { BaseStyles, ThemeProvider } from 'theme-ui';
import { ThemeProvider } from 'theme-ui';
import { theme as baseTheme } from '../index';
import { scaleAsArray } from '../utils';

Expand All @@ -35,50 +35,55 @@ const Sheet: React.FC<{ theme: Theme; name: string }> = ({
}) => {
return (
<ThemeProvider theme={theme}>
<Container sx={{ size: 'readable' }}>
<Container variant='layout.readable'>
<Head>
<title>Bjerk Theme</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
<link
href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;800&display=swap"
rel="preconnect"
href="https://fonts.gstatic.com"
crossOrigin=""
/>
<link
href="https://fonts.googleapis.com/css2?family=Sora:wght@400;600&display=swap"
rel="stylesheet"
/>
</Head>
<Flex as="main" sx={{ gap: 4, flexDirection: 'column' }}>
<Box as="header" sx={{ color: 'text' }}>
<Container>
<Heading as="h1" variant="title" sx={{ py: 4 }}>
Bjerk {name} Theme
</Heading>
<Flex sx={{ gap: 3 }}>
<NavLink href="https://github.com/bjerkio/brand">
<Container sx={{ pt: 4 }}>
<Text variant="title">Bjerk {name} Theme</Text>
<Flex sx={{ gap: 3, pt: 3 }}>
<Link variant="primary" href="https://github.com/bjerkio/brand">
GitHub
</NavLink>
<NavLink href="https://npmjs.com/package/@bjerk/brand">
</Link>
<Link
variant="primary"
href="https://npmjs.com/package/@bjerk/brand"
>
NPM
</NavLink>
<Link href="/">Base Theme</Link>
<Link href="/web">Web Theme</Link>
</Link>
<NavLink href="/">Base Theme</NavLink>
<NavLink href="/web">Web Theme</NavLink>
</Flex>
</Container>
</Box>
<Card>
<Heading>Text styles</Heading>
<Grid gap={4}>
<Container sx={{ p:3, backgroundColor:'accent' }}>
<Box sx={{pb:3}}>
<Text variant="subsection">Text styles</Text>
</Box>
<Grid gap={1}>
{Object.keys(theme.text).map(key => {
const Component = key.toLowerCase().includes('head')
? Heading
: Text;
const Component = Text;
return (
<Flex
key={key}
sx={{
gap: 3,
gap: 1,
flexDirection: 'column',
}}
>
<Text sx={{ color: 'secondary' }}>{key}</Text>
<Text variant="subtitle">{key}</Text>
<Component variant={key}>
{
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet neque ultricies, mollis leo quis, luctus magna.'
Expand All @@ -89,11 +94,13 @@ const Sheet: React.FC<{ theme: Theme; name: string }> = ({
);
})}
</Grid>
</Card>
<Card>
<Heading>Base styles</Heading>
<Box as={BaseStyles}>
<p>
</Container>
<Container sx={{ backgroundColor: 'accent', p: 3 }}>
<Box sx={{pb:3}}>
<Text variant="subsection">Base styles</Text>
</Box>
<Box>
<Paragraph variant='text.standard' sx={{pb:1}}>
This is a whole paragraph of text, include{' '}
<code>code like this</code>, as well as{' '}
<a href="https://hackclub.com/">
Expand All @@ -103,46 +110,41 @@ const Sheet: React.FC<{ theme: Theme; name: string }> = ({
<a href="https://hackclub.com/">regular links</a>. The paragraph
ended up being 1 sentence, but now I guess it’s{' '}
<strong>two</strong>.
</p>
<pre>
</Paragraph>
<Paragraph variant='standard'>
<code>Here’s a code block! No highlighting to be found.</code>
</pre>
</Paragraph>
</Box>
</Card>
<Card>
<Heading>Buttons</Heading>
<Flex sx={{ flexWrap: 'wrap', gap: 3 }}>
{Object.keys(theme.buttons).map(key => (
<Button key={key} variant={key}>
{key} btn
</Button>
))}
</Flex>
</Card>
<Card>
<Heading>Buttons with Icon</Heading>
</Container>
<Container sx={{ backgroundColor: 'accent', p: 3 }}>
<Box sx={{pb:3}}>
<Text variant="subsection">Buttons</Text>
</Box>
<Flex sx={{ flexWrap: 'wrap', gap: 3 }}>
{Object.keys(theme.buttons).map(key => (
<Button key={key} variant={key}>
{key} btn
<HiArrowRight />
</Button>
))}
</Flex>
</Card>
<Card>
<Heading>Disabled Buttons</Heading>
</Container>
<Container sx={{ backgroundColor: 'accent', p: 3 }}>
<Box sx={{pb:3}}>
<Text variant="subsection">Disabled Buttons</Text>
</Box>
<Flex sx={{ flexWrap: 'wrap', gap: 3 }}>
{Object.keys(theme.buttons).map(key => (
<Button key={key} variant={key} disabled>
{key} btn
</Button>
))}
</Flex>
</Card>
</Container>

<Card>
<Heading>Spacing</Heading>
<Container sx={{ backgroundColor: 'accent', p: 3 }}>
<Box sx={{pb:3}}>
<Text variant="subsection">Spacing</Text>
</Box>
<Flex sx={{ flexWrap: 'wrap', gap: 4 }}>
{scaleAsArray(theme.space).map((s, key) => (
<Box key={key} sx={{ textAlign: 'center' }}>
Expand All @@ -152,10 +154,12 @@ const Sheet: React.FC<{ theme: Theme; name: string }> = ({
</Box>
))}
</Flex>
</Card>
<Card>
<Heading>Forms</Heading>
<Grid gap={3} columns={[null, 2]} as="form">
</Container>
<Container sx={{ backgroundColor: 'accent', p: 3 }}>
<Box sx={{pb:3}}>
<Text variant="subsection">Forms</Text>
</Box>
<Grid gap={2} columns={[null, 2]} as="form">
<Label>
Full name
<Input placeholder="Zach Latta" />
Expand Down Expand Up @@ -203,10 +207,12 @@ const Sheet: React.FC<{ theme: Theme; name: string }> = ({
sx={{ gridColumn: [null, 'span 2'] }}
/>
</Grid>
</Card>
</Container>

<Card>
<Heading>Badges</Heading>
<Container sx={{ backgroundColor: 'accent', p: 3 }}>
<Box sx={{pb:3}}>
<Text variant="subsection">Badges</Text>
</Box>
{Object.keys(theme.badges).map(key => (
<Badge
key={key}
Expand All @@ -217,29 +223,32 @@ const Sheet: React.FC<{ theme: Theme; name: string }> = ({
{key}
</Badge>
))}
</Card>
<Card>
<Heading>Colors</Heading>
</Container>
<Container sx={{ backgroundColor: 'white', p: 3 }}>
<Box sx={{pb:3}}>
<Text variant="subsection">Colors</Text>
</Box>
<ColorPalette
omit={[
'modes',
'placeholder',
'twitter',
'instagram',
'facebook',
'error',
'warning',
]}
/>
</Card>
<Card>
<Heading>Type scale</Heading>
</Container>
<Container sx={{ backgroundColor: 'accent', p: 3 }}>
<Box sx={{pb:3}}>
<Text variant="subsection">Type scale</Text>
</Box>
<TypeScale />
</Card>
<Card>
<Heading>Theme Object</Heading>
</Container>
<Container sx={{ backgroundColor: 'accent', p: 3 }}>
<Box sx={{pb:3}}>
<Text variant="subsection">Theme Object</Text>
</Box>
<Text as="pre" variant="styles.pre">
{JSON.stringify(theme, null, 2)}
</Text>
</Card>
</Container>
</Flex>
</Container>
</ThemeProvider>
Expand Down
16 changes: 9 additions & 7 deletions theme/buttons.ts
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,18 @@
import { Theme } from '@theme-ui/css';

const baseStyle = {
display: 'flex',
gap: 2,
alignItems: 'center',
fontFamily: 'body',
color: 'dark100',
p: 3,
borderRadius: '30px',
width: 'fit-content',
};

export const buttons: Theme['buttons'] = {
primary: baseStyle,
secondary: {
primary: {
...baseStyle,
color: 'white',
bg: 'secondary',
backgroundColor: 'transparent',
boxShadow:
'2px 4px 11px rgba(0, 0, 0, 0.1), inset 3px 4px 9px rgba(255, 255, 255, 0.15)',
},
};
22 changes: 22 additions & 0 deletions theme/colors.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { Theme } from '@theme-ui/css';

export const colors: Theme['colors'] = {
blue20: '#C9D1FF',
blue40: '#8FA1FF',
blue60: '#7087FF',
blue80: '#4B5CF0',
blue100: '#2A3BCC',
dark20: '#B7BCC6',
dark40: '#878F9F',
dark60: '#576379',
dark80: '#273653',
text: '#0F2040',
background: '#EDF9F1',
green40: '#D2FBE0',
green60: '#BCF9C6',
green80: '#A6F7AE',
accent: '#90F494',
access: '#4AD97B',
error: '#DC3B58',
warning: '#FFD464',
};

0 comments on commit 4051f16

Please sign in to comment.