Move styles to $lib

src/lib/styles/global.css.ts

@@ -0,0 +1,152 @@
+import { globalStyle } from '@vanilla-extract/css'
+import { breakpoints, colors, vars } from './vars.css'
+
+globalStyle('html', {
+  scrollBehavior: 'smooth',
+})
+
+globalStyle('body', {
+  margin: 0,
+  fontFamily:
+    'cantarell, roboto, -apple-system, blinkmacsystemfont, segoe ui, oxygen, ubuntu, fira sans, droid sans, helvetica neue, sans-serif',
+  fontSize: '16px',
+  lineHeight: 1.65,
+  color: vars.color.articleText,
+  background: vars.color.background,
+  minHeight: '100vh',
+  '@media': {
+    [`screen and (min-width: ${breakpoints.s}px)`]: {
+      fontSize: '18px',
+    },
+    [`screen and (min-width: ${breakpoints.m}px)`]: {
+      fontSize: '24px',
+    },
+  },
+})
+
+globalStyle('h1, h2, h3, h4, h5, h6', {
+  marginTop: vars.space['2x'],
+  marginBottom: vars.space['1x'],
+  marginLeft: vars.space.none,
+  marginRight: vars.space.none,
+  lineHeight: vars.lineHeight['1x'],
+  color: vars.color.header,
+  fontWeight: 500,
+  letterSpacing: '-0.01em',
+})
+
+globalStyle('h1', {
+  fontSize: vars.fontSize['5x'],
+  fontWeight: 800,
+})
+
+globalStyle('h2', {
+  fontSize: vars.fontSize['4x'],
+  fontWeight: 700,
+})
+
+globalStyle('h3', {
+  fontSize: vars.fontSize['3x'],
+})
+
+globalStyle('h4', {
+  fontSize: vars.space['2x'],
+})
+
+globalStyle('a', {
+  textDecoration: 'none',
+  transition: 'color 0.2s',
+})
+
+globalStyle('a:link', {
+  color: vars.color.link,
+})
+
+globalStyle('a:hover', {
+  color: vars.color.linkHover,
+  textDecoration: 'underline',
+})
+
+globalStyle('a:visited', {
+  color: vars.color.linkVisited,
+})
+
+globalStyle('a:visited:hover', {
+  color: vars.color.linkVisitedHover,
+})
+
+globalStyle('main pre, main pre[class*="language-"], main :not(pre) > code', {
+  fontFamily: 'menlo, inconsolata, monospace',
+  backgroundColor: vars.color.codeBackground,
+  paddingTop: vars.space['1x'],
+  paddingBottom: vars.space['1x'],
+  paddingLeft: vars.space['2x'],
+  paddingRight: vars.space['2x'],
+  color: vars.color.code,
+  lineHeight: vars.lineHeight['0x'],
+  boxShadow: vars.boxShadow.codeBoxShadow,
+  borderRadius: 3,
+})
+
+globalStyle('main code, main code[class*="language-"]', {
+  fontSize: vars.fontSize.sm,
+  '@media': {
+    [`screen and (min-width: ${breakpoints.m}px)`]: {
+      fontSize: vars.fontSize.xs,
+    },
+  },
+})
+
+globalStyle('code', {
+  whiteSpace: 'pre-line',
+})
+
+globalStyle('pre code', {
+  whiteSpace: 'pre',
+})
+
+globalStyle('figure', {
+  marginTop: vars.space['2x'],
+  marginBottom: vars.space['2x'],
+  marginLeft: vars.space['1x'],
+  marginRight: vars.space['1x'],
+  textAlign: 'center',
+})
+
+globalStyle('figcaption', {
+  fontSize: vars.fontSize.xs,
+  fontStyle: 'italic',
+})
+
+globalStyle('blockquote', {
+  lineHeight: vars.lineHeight['2x'],
+  margin: vars.space['0x'],
+  paddingLeft: vars.space['2x'],
+  paddingRight: vars.space['0x'],
+  paddingTop: vars.space['1x'],
+  paddingBottom: vars.space['2x'],
+  background: vars.color.quoteBackground,
+  borderRadius: 3,
+  borderLeft: `2px solid ${colors.tearkiss}`,
+  boxShadow: vars.boxShadow.contentBoxShadow,
+  fontSize: vars.fontSize.sm,
+  overflow: 'auto',
+})
+
+globalStyle('blockquote p', {
+  marginTop: vars.space['0x'],
+  marginBottom: vars.space['0x'],
+})
+
+globalStyle('p', {
+  marginTop: vars.space['1x'],
+  marginBottom: vars.space['1x'],
+})
+
+globalStyle('b, strong', {
+  fontWeight: 600,
+})
+
+globalStyle('::selection', {
+  background: vars.color.selection,
+})

src/lib/styles/scoops.css.ts

@@ -0,0 +1,10 @@
+import { style } from '@vanilla-extract/css'
+import { desaturate, transparentize } from 'polished'
+import { colors } from './vars.css'
+
+export const horizontalBorderTopClass = style({
+  borderTop: `1px solid ${transparentize(
+    0.6,
+    desaturate(0.5, colors.tearkiss)
+  )}`,
+})

src/lib/styles/sprinkles.css.ts

@@ -0,0 +1,78 @@
+import { createSprinkles, defineProperties } from '@vanilla-extract/sprinkles'
+import { breakpoints, vars } from './vars.css'
+
+const responsiveProperties = defineProperties({
+  conditions: {
+    mobile: {},
+    tablet: { '@media': `screen and (min-width: ${breakpoints.m}px)` },
+    desktop: { '@media': `screen and (min-width: ${breakpoints.l}px)` },
+  },
+  defaultCondition: 'mobile',
+  properties: {
+    display: ['none', 'flex', 'block', 'inline', 'inline-block', 'grid'],
+    position: ['relative', 'absolute', 'fixed'],
+    flexDirection: ['row', 'column'],
+    flexWrap: ['wrap', 'nowrap'],
+    flexShrink: [0],
+    flexGrow: [0, 1],
+    justifyContent: [
+      'stretch',
+      'start',
+      'center',
+      'end',
+      'space-around',
+      'space-between',
+    ],
+    justifyItems: [
+      'stretch',
+      'start',
+      'center',
+      'end',
+      'space-around',
+      'space-between',
+    ],
+    alignItems: ['stretch', 'flex-start', 'center', 'flex-end'],
+    flex: ['1'],
+    textAlign: ['center', 'justify', 'start', 'end'],
+    textShadow: vars.textShadow,
+    paddingTop: vars.space,
+    paddingBottom: vars.space,
+    paddingLeft: vars.space,
+    paddingRight: vars.space,
+    marginTop: vars.space,
+    marginBottom: vars.space,
+    marginRight: vars.space,
+    marginLeft: vars.space,
+    columnGap: vars.space,
+    fontSize: vars.fontSize,
+    fontFamily: vars.fontFamily,
+    fontWeight: vars.fontWeight,
+    fontStyle: ['italic', 'normal'],
+    lineHeight: vars.lineHeight,
+    whiteSpace: ['normal', 'nowrap'],
+    width: vars.width,
+    maxWidth: vars.width,
+    height: ['100vh', '100&'],
+    listStyle: ['none'],
+    overflow: ['auto'],
+  },
+  shorthands: {
+    padding: ['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight'],
+    paddingX: ['paddingLeft', 'paddingRight'],
+    paddingY: ['paddingTop', 'paddingBottom'],
+    placeItems: ['justifyContent', 'alignItems'],
+    typeSize: ['fontSize', 'lineHeight'],
+    margin: ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'],
+    marginX: ['marginLeft', 'marginRight'],
+    marginY: ['marginTop', 'marginBottom'],
+  },
+})
+
+const colorProperties = defineProperties({
+  properties: {
+    color: vars.color,
+    background: vars.color,
+  },
+})
+
+export const sprinkles = createSprinkles(responsiveProperties, colorProperties)

src/lib/styles/vars.css.ts

@@ -0,0 +1,149 @@
+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',
+  },
+})