Footer styles converted to sprinkles in vanilla extract

package.json

@@ -15,8 +15,9 @@
     "svgstore": "svgstore -o static/build/icons-sprite.svg src/svg/**.svg"
   },
   "dependencies": {
-    "@vanilla-extract/css": "^1.6.1",
+    "@vanilla-extract/css": "^1.6.3",
-    "@vanilla-extract/vite-plugin": "^2.1.1",
+    "@vanilla-extract/sprinkles": "^1.3.1",
+    "@vanilla-extract/vite-plugin": "^3.0.0",
     "classnames": "^2.3.1",
     "date-fns": "^2.25.0",
     "feed": "^4.2.2",
@@ -34,19 +35,19 @@
     "@types/classnames": "^2.3.1",
     "@types/node": "^16.10.2",
     "@types/ramda": "^0.27.45",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/eslint-plugin": "^5.3.1",
-    "@typescript-eslint/parser": "^4.33.0",
+    "@typescript-eslint/parser": "^5.3.1",
-    "eslint": "^7.32.0",
+    "eslint": "^8.2.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-svelte3": "^3.2.1",
     "less": "^4.1.2",
     "prettier": "~2.4.1",
     "prettier-plugin-svelte": "^2.4.0",
-    "svelte": "^3.43.1",
+    "svelte": "^3.44.1",
     "svelte-preprocess": "^4.9.8",
-    "svgstore-cli": "^2.0.0",
+    "svgstore-cli": "^2.0.1",
     "tslib": "^2.3.1",
-    "typescript": "^4.4.3",
+    "typescript": "^4.4.4",
-    "vite": "^2.6.3"
+    "vite": "^2.6.13"
   }
 }

src/components/Footer.css.ts

@@ -1,19 +1,24 @@
-import { style } from '@vanilla-extract/css'
+import { globalStyle, style } from '@vanilla-extract/css'
-import { radialGradient, transparentize } from 'polished'
+import { radialGradient, rgba, transparentize } from 'polished'
+import { sprinkles } from '../styles/sprinkles.css'
 import {
   breakpoints,
+  colors,
   mediaAt,
   menuBackground,
   transparent,
   vars,
 } from '../styles/vars.css'
 
-export const siteFooterStyle = style({
+export const siteFooterClass = style([
-  fontSize: '0.9em',
+  sprinkles({
-  padding: '2em 0.8em 0',
+    fontSize: { mobile: 'base', desktop: 'sm' },
-  color: vars.color.menuLink,
+    paddingX: '2x',
+    paddingTop: '1x',
+    color: 'menuLink',
+  }),
 
-  ...radialGradient({
+  radialGradient({
     colorStops: [
       `${menuBackground}  56%`,
       `${transparentize(0.4, menuBackground)} 100%`,
@@ -21,10 +26,9 @@ export const siteFooterStyle = style({
     extent: '160% 100% at 100% 100%',
     fallback: transparent,
   }),
-
+  {
-  '@media': {
+    '@media': {
-    [mediaAt(breakpoints.m)]: {
+      [mediaAt(breakpoints.m)]: radialGradient({
-      ...radialGradient({
         colorStops: [
           `${menuBackground} 48%`,
           `${transparentize(1, menuBackground)} 100%`,
@@ -33,8 +37,127 @@ export const siteFooterStyle = style({
         fallback: transparent,
       }),
     },
-    [mediaAt(breakpoints.l)]: {
+  },
-      fontSize: '0.8em',
+])
+
+export const headerClass = sprinkles({
+  fontWeight: 'bold',
+  fontSize: 'base',
+  color: 'menuLink',
+  margin: 'none',
+  lineHeight: '3x',
+  marginBottom: '1x',
+})
+
+export const sectionListsClass = style([
+  sprinkles({
+    display: 'grid',
+    justifyItems: { mobile: 'center', desktop: 'start' },
+    textAlign: { mobile: 'center', desktop: 'start' },
+    maxWidth: 'max',
+    columnGap: '3x',
+    margin: 'auto',
+  }),
+  {
+    '@media': {
+      [mediaAt(breakpoints.l)]: {
+        gridTemplateColumns: 'auto auto auto',
+      },
     },
   },
+])
+
+export const sectionListSectionClass = sprinkles({
+  marginY: '3x',
+})
+
+export const noWrapClass = sprinkles({
+  whiteSpace: 'nowrap',
+})
+
+export const listUlClass = sprinkles({
+  listStyle: 'none',
+  padding: 'none',
+  margin: 'none',
+})
+
+export const listLiClass = sprinkles({
+  marginLeft: '1x',
+})
+
+export const nestedListLiClass = style([
+  listLiClass,
+  sprinkles({
+    fontSize: 'sm',
+  }),
+])
+
+export const socialLinkLabelClass = sprinkles({
+  paddingX: '1x',
+})
+
+export const svgClass = style({
+  fill: vars.color.menuLink,
+  height: '1em',
+  width: '1em',
+})
+
+export const strokeSvgClass = style([
+  svgClass,
+  {
+    stroke: vars.color.menuLink,
+    strokeWidth: '2px',
+  },
+])
+
+export const socialLinkClass = sprinkles({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: {
+    mobile: 'center',
+    desktop: 'start',
+  },
+})
+
+export const bottomLineClass = sprinkles({
+  display: 'flex',
+  justifyContent: 'space-between',
+  marginX: 'auto',
+  marginBottom: '1x',
+  marginTop: '2x',
+  maxWidth: 'max',
+})
+
+export const dateClass = sprinkles({
+  fontSize: 'xs',
+  whiteSpace: 'nowrap',
+})
+
+export const boldClass = sprinkles({
+  fontWeight: 'bold',
+})
+
+export const hrClass = style([
+  sprinkles({
+    marginY: '2x',
+    marginX: '1x',
+  }),
+  {
+    color: rgba(colors.midnightBlue, 0.14),
+    borderWidth: '1px 0 0',
+  },
+])
+
+export const latestPostsClass = style({})
+
+globalStyle(`${siteFooterClass} a`, {
+  color: vars.color.menuLink,
+})
+
+globalStyle(`${siteFooterClass} a:hover`, {
+  color: vars.color.menuLinkHover,
+})
+
+globalStyle(`${latestPostsClass} li a:visited:not(:hover)`, {
+  color: vars.color.linkVisited,
 })

src/components/Footer.svelte

@@ -2,61 +2,79 @@
   import { format } from 'date-fns'
   import type { PostContent } from 'src/routes/blog/_content'
   import SvgIcon from './SvgIcon.svelte'
-  import { siteFooterStyle } from './Footer.css'
+  import {
+    boldClass,
+    bottomLineClass,
+    dateClass,
+    headerClass,
+    hrClass,
+    latestPostsClass,
+    listLiClass,
+    listUlClass,
+    nestedListLiClass,
+    noWrapClass,
+    sectionListsClass,
+    sectionListSectionClass,
+    siteFooterClass,
+    socialLinkClass,
+    socialLinkLabelClass,
+    strokeSvgClass,
+    svgClass,
+  } from './Footer.css'
 
   export let latestPosts: PostContent[]
 </script>
 
-<footer class="site-footer navigation-theme {siteFooterStyle}">
+<footer class="site-footer navigation-theme {siteFooterClass}">
-  <div class="lists">
+  <div class="lists {sectionListsClass}">
-    <section class="site-map">
+    <section class="site-map {sectionListSectionClass}">
-      <ul>
+      <ul class={listUlClass}>
-        <li>
+        <li class={listLiClass}>
           <a href="/">Introduction</a>
         </li>
-        <li>
+        <li class={listLiClass}>
           <a href="/portfolio">Portfolio</a>
-          <ul>
+          <ul class={listUlClass}>
-            <li>
+            <li class={nestedListLiClass}>
               <a href="/portfolio#personal-information">About</a>
             </li>
-            <li>
+            <li class={nestedListLiClass}>
               <a href="/portfolio#skills">Skills</a>
             </li>
-            <li>
+            <li class={nestedListLiClass}>
               <a href="/portfolio#work-history">Work History</a>
             </li>
-            <li>
+            <li class={nestedListLiClass}>
               <a href="/portfolio#projects">Projects</a>
             </li>
-            <li>
+            <li class={nestedListLiClass}>
               <a href="/portfolio#education">Education</a>
             </li>
           </ul>
         </li>
       </ul>
     </section>
-    <section class="latest-posts">
+    <section class="latest-posts {sectionListSectionClass} {latestPostsClass}">
-      <h3>
+      <h3 class={headerClass}>
         <a href="/blog">Latest posts</a>
       </h3>
-      <ul>
+      <ul class={listUlClass}>
         {#each latestPosts as post}
-          <li>
+          <li class={listLiClass}>
             <a rel="prefetch" href="/blog/{post.slug}">
               <span>{post.title}</span>
-              <span class="date">
+              <time class="date {dateClass}" datetime={post.date}>
                 - {format(new Date(post.date), 'do MMM, yyyy')}
-              </span>
+              </time>
             </a>
           </li>
         {/each}
       </ul>
-      <hr />
+      <hr class={hrClass} />
-      <section class="subscribe">
+      <section class="subscribe {boldClass}">
         <a href="/feed.xml" title="RSS feed" class="rss">
           Subscribe
-          <SvgIcon name="rss" className="svg-icon" />
+          <SvgIcon name="rss" className={svgClass} />
         </a>
         <a
           href="/feed.json"
@@ -64,215 +82,68 @@
           class="json-feed"
           aria-label="Subscribe with JSON feed"
         >
-          <SvgIcon name="json-feed" className="svg-icon" />
+          <SvgIcon name="json-feed" className={svgClass} />
         </a>
       </section>
     </section>
-    <section class="socials">
+    <section class="socials {sectionListSectionClass}">
-      <h3>Contact</h3>
+      <h3 class={headerClass}>Contact</h3>
-      <ul class="social-links">
+      <ul class="social-links {listUlClass}">
-        <li class="email">
+        <li class="email {listLiClass}">
-          <a href="mailto: michalvankosk@gmail.com" title="E-mail address">
-            <SvgIcon name="mail" className="svg-icon" />
-            <span>michalvankosk@gmail.com</span>
-          </a>
-        </li>
-        <li class="twitter">
-          <a href="https://twitter.com/michalvankodev" title="Twitter profile">
-            <SvgIcon name="twitter" className="svg-icon" />
-            <span>Twitter</span>
-          </a>
-        </li>
-        <li class="github">
-          <a href="https://github.com/michalvankodev" title="Github profile">
-            <SvgIcon name="github" className="svg-icon" />
-            <span>Github</span>
-          </a>
-        </li>
-        <li class="twitch">
-          <a href="https://twitch.tv/michalvankodev" title="Twitch profile">
-            <SvgIcon name="twitch" className="svg-icon" />
-            <span>Twitch</span>
-          </a>
-        </li>
-        <li class="instagram">
           <a
+            class={socialLinkClass}
+            href="mailto: michalvankosk@gmail.com"
+            title="E-mail address"
+          >
+            <SvgIcon name="mail" className={svgClass} />
+            <span class={socialLinkLabelClass}>michalvankosk@gmail.com</span>
+          </a>
+        </li>
+        <li class="twitter {listLiClass}">
+          <a
+            class={socialLinkClass}
+            href="https://twitter.com/michalvankodev"
+            title="Twitter profile"
+          >
+            <SvgIcon name="twitter" className={strokeSvgClass} />
+            <span class={socialLinkLabelClass}>Twitter</span>
+          </a>
+        </li>
+        <li class="github {listLiClass}">
+          <a
+            class={socialLinkClass}
+            href="https://github.com/michalvankodev"
+            title="Github profile"
+          >
+            <SvgIcon name="github" className={strokeSvgClass} />
+            <span class={socialLinkLabelClass}>Github</span>
+          </a>
+        </li>
+        <li class="twitch {listLiClass}">
+          <a
+            class={socialLinkClass}
+            href="https://twitch.tv/michalvankodev"
+            title="Twitch profile"
+          >
+            <SvgIcon name="twitch" className={svgClass} />
+            <span class={socialLinkLabelClass}>Twitch</span>
+          </a>
+        </li>
+        <li class="instagram {listLiClass}">
+          <a
+            class={socialLinkClass}
             href="https://www.instagram.com/michalvankodev/"
             title="Instagram profile"
           >
-            <SvgIcon name="instagram" className="svg-icon" />
+            <SvgIcon name="instagram" className={svgClass} />
-            <span>Instagram</span>
+            <span class={socialLinkLabelClass}>Instagram</span>
           </a>
         </li>
       </ul>
     </section>
   </div>
-  <footer class="bottom-line">
+  <footer class={bottomLineClass}>
-    <span class="no-wrap">Created by @michalvankodev</span>
+    <span class={noWrapClass}>Created by @michalvankodev</span>
-    <span class="no-wrap">&copy; 2020</span>
+    <span class={noWrapClass}>&copy; 2020</span>
   </footer>
 </footer>
-
-<style lang="less">
-  @import '../styles/variables.module.less';
-
-  /* .site-footer {
-    font-size: 0.9em;
-    padding: 2em 0.8em 0em;
-    color: @menu-link-color;
-
-    background: radial-gradient(
-      160% 100% at 100% 100%,
-      @menu-bg-color 56%,
-      fade(@menu-bg-color, 0) 100%
-    );
-
-    @media (min-width: @media-m) {
-      background: radial-gradient(
-        140% 100% at 100% 100%,
-        @menu-bg-color 48%,
-        fade(@menu-bg-color, 0) 100%
-      );
-    }
-
-    @media (min-width: @media-l) {
-      font-size: 0.8em;
-    }
-  } */
-
-  h3 {
-    font: inherit;
-    font-weight: bold;
-    font-size: 1.15em;
-    text-shadow: inherit;
-    color: @menu-link-color;
-    margin: 0;
-  }
-
-  .lists {
-    display: grid;
-    justify-items: center;
-    text-align: center;
-    max-width: @media-max;
-    column-gap: 1em;
-    margin: auto;
-
-    @media only screen and (min-width: @media-l) {
-      grid-template-columns: auto auto auto;
-      justify-items: start;
-      text-align: start;
-    }
-  }
-
-  .lists > section {
-    margin: 1em 0;
-  }
-
-  .no-wrap {
-    white-space: nowrap;
-  }
-
-  .lists ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-  }
-
-  .lists li {
-    margin-left: 0.5em;
-  }
-
-  .lists li li {
-    font-size: 0.9em;
-
-    @media only screen and (min-width: @media-l) {
-      font-size: 0.8em;
-    }
-  }
-
-  .social-links a span {
-    /* display: none; */
-    padding: 0 0.4em;
-  }
-
-  .email :global(svg) {
-    fill: @menu-link-color;
-  }
-
-  .twitter :global(svg) {
-    stroke: @menu-link-color;
-    stroke-width: 2px;
-    fill: @menu-link-color;
-  }
-
-  .github :global(svg) {
-    stroke: @menu-link-color;
-    stroke-width: 2px;
-  }
-
-  .twitch :global(svg),
-  .twitch :global(svg rect) {
-    fill: @menu-link-color;
-  }
-
-  .instagram :global(svg) {
-    fill: @menu-link-color;
-  }
-
-  .rss :global(svg) {
-    fill: @menu-link-color;
-  }
-
-  .json-feed :global(svg) {
-    fill: @menu-link-color;
-  }
-
-  :global(.svg-icon) {
-    height: 1em;
-    width: 1em;
-  }
-
-  .social-links a {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    @media only screen and (min-width: @media-l) {
-      justify-content: start;
-    }
-  }
-
-  .bottom-line {
-    display: flex;
-    justify-content: space-between;
-    margin: 1em auto 0.4em;
-    max-width: @media-max;
-  }
-
-  .date {
-    font-size: 0.7em;
-    white-space: nowrap;
-  }
-
-  .subscribe {
-    font-weight: bold;
-  }
-
-  hr {
-    color: fade(@menu-link-color, 14%);
-    margin: 0.75em 0.2em;
-    border-width: 1px 0 0;
-  }
-
-  a {
-    color: @menu-link-color;
-
-    &:hover {
-      color: @menu-link-hover-color;
-    }
-  }
-
-  .latest-posts li a:visited:not(:hover) {
-    color: @link-visited-color;
-  }
-</style>

src/styles/global.module.less

@@ -56,18 +56,18 @@ a {
     color: @link-color;
   }
 
-  &:visited {
+  // &:visited {
-    color: @link-visited-color;
+  //   color: @link-visited-color;
-  }
+  // }
 
   &:hover {
     text-decoration: underline;
     color: @link-hover-color;
   }
 
-  &:visited:hover {
+  // &:visited:hover {
-    color: @link-visited-hover-color;
+  //   color: @link-visited-hover-color;
-  }
+  // }
 }
 
 main {

src/styles/sprinkles.css.ts

@@ -0,0 +1,74 @@
+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'],
+    textAlign: ['left', 'center', 'right', 'justify', 'start'],
+    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,
+    lineHeight: vars.lineHeight,
+    whiteSpace: ['normal', 'nowrap'],
+    width: vars.width,
+    maxWidth: vars.width,
+    height: ['100vh', '100&'],
+    listStyle: ['none'],
+  },
+  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/styles/vars.css.ts

@@ -3,6 +3,7 @@ import {
   desaturate,
   lighten,
   mix,
+  modularScale,
   saturate,
   tint,
   transparentize,
@@ -31,7 +32,30 @@ 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: desaturate(0.16, colors.midnightBlue),
     selection: tint(0.4, colors.pinky),
@@ -48,4 +72,40 @@ export const vars = createGlobalTheme(':root', {
     background: tint(0.7, colors.lightCyan),
     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(4),
+    '5x': fontSizeScale(5),
+    '6x': fontSizeScale(6),
+  },
+  lineHeight: {
+    '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',
+  },
+  width: {
+    s: '400px',
+    m: '700px',
+    image: '800px',
+    l: '1000px',
+    max: '1140px',
+    full: '100vw',
+    parent: '100%',
+  },
 })