System-End/site
1
0
Fork 0
mirror of https://github.com/System-End/site.git synced 2026-04-20 00:25:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add utility functions to theme

Browse source
This commit is contained in:
Lachlan Campbell 2020-04-27 15:13:01 -04:00
parent 1d5556efd1
commit 0c4f9d31c6
3 changed files with 68 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
components/home/join-form.js
View file

@ -2,11 +2,6 @@ import { useState, useEffect } from 'react'
import { Card, Label, Input, Button, Checkbox, Textarea } from 'theme-ui'
import fetch from 'isomorphic-unfetch'
const grad = (theme, from, to) => `radial-gradient(
ellipse farthest-corner at top left,
${theme.colors[from] || from},
${theme.colors[to] || to})`
const JoinForm = () => {
const [name, setName] = useState('')
const [email, setEmail] = useState('')
@ -104,7 +99,7 @@ const JoinForm = () => {
fontSize: 2,
width: '100%',
fontFamily: 'inherit',
backgroundImage: (theme) => grad(theme, 'cyan', 'blue')
backgroundImage: (theme) => theme.util.gradient('cyan', 'blue')
}}
value={status === 'success' ? 'Submitted!' : 'Queue signup'}
/>

75
lib/theme.js
View file

@ -1,20 +1,42 @@
import base from '@hackclub/theme'
import { merge } from 'lodash'
const theme = base
theme.useColorSchemeMediaQuery = false
theme.buttons.cta = {
fontSize: 3,
fontWeight: 'bold',
textTransform: 'uppercase',
px: 4,
py: 3,
letterSpacing: 'headline',
theme.lineHeights.limit = 0.875
theme.util = {
reduceMotion: '@media (prefers-reduced-motion: reduce)',
reduceTransparency: '@media (prefers-reduced-transparency: reduce)',
supportsBackdrop:
'@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none)'
}
theme.util.cx = (c) => theme.colors[c] || c
theme.util.gradient = (from, to) => `radial-gradient(
ellipse farthest-corner at top left,
${theme.util.cx(from)},
${theme.util.cx(to)}
)`
theme.util.gradientText = (from, to) => ({
color: theme.util.cx(to),
'@supports (-webkit-background-clip: text)': {
backgroundImage: theme.util.gradient(from, to),
backgroundRepeat: 'no-repeat',
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent'
}
})
theme.buttons.primary = merge(theme.buttons.primary, {
fontFamily: 'inherit',
borderRadius: 'circle',
backgroundImage: (theme) =>
`linear-gradient(${theme.colors.orange}, ${theme.colors.red})`,
boxShadow: 'card',
fontWeight: 'bold',
letterSpacing: 'headline',
textTransform: 'uppercase',
WebkitTapHighlightColor: 'transparent',
transition: 'transform .125s ease-in-out, box-shadow .125s ease-in-out',
willChange: 'transform',
@ -22,6 +44,41 @@ theme.buttons.cta = {
boxShadow: 'elevated',
transform: 'scale(1.0625)'
}
})
theme.buttons.cta = {
variant: 'buttons.primary',
fontSize: 3,
px: 4,
py: 3,
backgroundImage: (theme) =>
`linear-gradient(${theme.colors.orange}, ${theme.colors.red})`
}
theme.cards.translucent = {
variant: 'cards.primary',
backgroundColor: 'rgba(255, 255, 255, 0.98)',
[theme.util.supportsBackdrop]: {
backgroundColor: 'rgba(255, 255, 255, 0.75)',
backdropFilter: 'saturate(180%) blur(20px)',
WebkitBackdropFilter: 'saturate(180%) blur(20px)'
},
[theme.util.reduceTransparency]: {
backdropFilter: 'none',
WebkitBackdropFilter: 'none'
}
}
theme.cards.translucentDark = {
variant: 'cards.primary',
backgroundColor: 'rgba(0, 0, 0, 0.875)',
[theme.util.supportsBackdrop]: {
backgroundColor: 'rgba(0, 0, 0, 0.75)',
backdropFilter: 'saturate(180%) blur(16px)',
WebkitBackdropFilter: 'saturate(180%) blur(16px)'
},
[theme.util.reduceTransparency]: {
backdropFilter: 'none',
WebkitBackdropFilter: 'none'
}
}
export default theme

8
pages/index.js
View file

@ -99,12 +99,6 @@ const Window = ({ title, children, ...props }) => (
</Card>
)
const grad = (theme, from, to) => `radial-gradient(
ellipse farthest-corner at top left, ${theme.colors[from] || from}, ${
theme.colors[to] || to
})`
export default () => (
<>
<Head>
<Meta
@ -536,7 +530,7 @@ export default () => (
as="footer"
sx={{
bg: 'cyan',
backgroundImage: (theme) => grad(theme, 'yellow', 'orange'),
backgroundImage: (theme) => theme.util.gradient('yellow', 'orange'),
color: 'white',
py: [5, 6]
}}