150 lines
3.6 KiB
TypeScript
150 lines
3.6 KiB
TypeScript
import { createGlobalTheme } from '@vanilla-extract/css'
|
|
import {
|
|
darken,
|
|
desaturate,
|
|
lighten,
|
|
mix,
|
|
modularScale,
|
|
saturate,
|
|
tint,
|
|
transparentize,
|
|
} from 'polished'
|
|
|
|
export const colors = {
|
|
tearkiss: '#42a6f0',
|
|
pinky: '#fea6eb',
|
|
lightCyan: '#d8f6ff',
|
|
midnightBlue: '#171664',
|
|
frenchViolet: '#7332c3',
|
|
}
|
|
|
|
export const menuBackground = transparentize(0.6, colors.tearkiss)
|
|
export const background = tint(0.7, colors.lightCyan)
|
|
export const codeBackground = tint(0.2, background)
|
|
export const quoteBackground = darken(0.02, background)
|
|
export const transparent = transparentize(1, '#ffffff')
|
|
const articleText = desaturate(0.16, colors.midnightBlue)
|
|
|
|
export enum breakpoints {
|
|
s = 400,
|
|
m = 700,
|
|
image = 800,
|
|
l = 1000,
|
|
max = 1140,
|
|
}
|
|
|
|
export function mediaAt(breakpoint: breakpoints) {
|
|
return `screen and (min-width: ${breakpoint}px)`
|
|
}
|
|
|
|
const createScale =
|
|
(base: number, ratio: number, unit = 'em') =>
|
|
(steps: number) =>
|
|
`${modularScale(steps, base, ratio)}${unit}`
|
|
|
|
const spaceScale = createScale(0.2, 2)
|
|
const fontSizeScale = createScale(1, 1.125)
|
|
const lineHeightScale = createScale(1.05, 1.125)
|
|
// const borderRadiusScale = createScale(1.5, 4)
|
|
|
|
export const vars = createGlobalTheme(':root', {
|
|
space: {
|
|
none: '0',
|
|
auto: 'auto',
|
|
'0x': spaceScale(0),
|
|
'1x': spaceScale(1),
|
|
'2x': spaceScale(2),
|
|
'3x': spaceScale(3),
|
|
'4x': spaceScale(4),
|
|
'5x': spaceScale(5),
|
|
'6x': spaceScale(6),
|
|
'7x': spaceScale(7),
|
|
'8x': spaceScale(8),
|
|
},
|
|
color: {
|
|
articleText,
|
|
tintedText: tint(0.25, articleText),
|
|
selection: tint(0.4, colors.pinky),
|
|
link: saturate(0.2, mix(0.66, colors.tearkiss, colors.midnightBlue)),
|
|
linkHover: colors.tearkiss,
|
|
linkVisited: colors.frenchViolet,
|
|
linkVisitedHover: lighten(0.1, colors.frenchViolet),
|
|
code: lighten(0.15, articleText),
|
|
|
|
menu: colors.midnightBlue,
|
|
menuLink: colors.midnightBlue,
|
|
menuLinkHover: lighten(0.15, colors.midnightBlue),
|
|
|
|
header: lighten(0.1, colors.midnightBlue),
|
|
background,
|
|
codeBackground,
|
|
quoteBackground,
|
|
menuBackground,
|
|
},
|
|
fontFamily: {
|
|
body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
|
|
},
|
|
fontSize: {
|
|
xs: fontSizeScale(-2),
|
|
sm: fontSizeScale(-1),
|
|
base: fontSizeScale(0),
|
|
xl: fontSizeScale(1),
|
|
'2x': fontSizeScale(2),
|
|
'3x': fontSizeScale(3),
|
|
'4x': fontSizeScale(5),
|
|
'5x': fontSizeScale(7),
|
|
'6x': fontSizeScale(9),
|
|
},
|
|
lineHeight: {
|
|
none: '0',
|
|
'0x': lineHeightScale(0),
|
|
'1x': lineHeightScale(1),
|
|
'2x': lineHeightScale(2),
|
|
'3x': lineHeightScale(3),
|
|
'4x': lineHeightScale(4),
|
|
'5x': lineHeightScale(5),
|
|
},
|
|
fontWeight: {
|
|
thin: 'thin',
|
|
normal: 'normal',
|
|
bold: 'bold',
|
|
},
|
|
textShadow: {
|
|
menuLinkShadow: `0.02em 0.02em 0.03em ${transparentize(
|
|
0.7,
|
|
colors.midnightBlue
|
|
)}`,
|
|
menuActiveLinkShadow: `0.01em 0.01em 0.05em ${transparentize(
|
|
0.1,
|
|
colors.midnightBlue
|
|
)}`,
|
|
},
|
|
boxShadow: {
|
|
contentBoxShadow: `0px 0px 2px 1px ${transparentize(
|
|
0.5,
|
|
desaturate(0.5, colors.tearkiss)
|
|
)}`,
|
|
codeBoxShadow: `inset 0px 0px 2px 1px ${transparentize(
|
|
0.8,
|
|
desaturate(0.5, colors.tearkiss)
|
|
)}`,
|
|
},
|
|
width: {
|
|
s: '400px',
|
|
m: '700px',
|
|
image: '800px',
|
|
l: '1000px',
|
|
max: '1140px',
|
|
full: '100vw',
|
|
parent: '100%',
|
|
layoutMax: '42rem',
|
|
headerFooterMax: '52rem',
|
|
additionalBlockMax: '46rem',
|
|
},
|
|
height: {
|
|
full: '100hw',
|
|
parent: '100%',
|
|
image: '640px',
|
|
},
|
|
})
|