Navigation migrated to sprinkles

src/components/Nav.css.ts

@@ -0,0 +1,80 @@
+import { globalStyle, style } from '@vanilla-extract/css'
+import { radialGradient, transparentize } from 'polished'
+import { menuBackground, transparent, vars } from '../styles/vars.css'
+import { sprinkles } from '../styles/sprinkles.css'
+
+export const navigationClass = style([
+  sprinkles({
+    paddingTop: '1x',
+    paddingBottom: '2x',
+    paddingX: '1x',
+    color: 'menu',
+    textShadow: 'menuLinkShadow',
+  }),
+  radialGradient({
+    colorStops: [
+      `${menuBackground} 0%`,
+      `${transparentize(1, menuBackground)} 100%`,
+    ],
+    extent: '120% 100% at 0% 0%',
+    fallback: transparent,
+  }),
+])
+
+export const navigationContentClass = sprinkles({
+  display: 'flex',
+  maxWidth: 'max',
+  marginY: 'none',
+  marginX: 'auto',
+})
+
+export const navigationLinksClass = sprinkles({
+  listStyle: 'none',
+  margin: 'none',
+  padding: 'none',
+  display: 'flex',
+  flex: '1',
+})
+
+export const logoSectionClass = sprinkles({
+  lineHeight: 'none',
+})
+
+export const logoLinkClass = sprinkles({
+  padding: 'none',
+  display: 'block',
+})
+
+globalStyle(`${navigationClass} a:not(${logoLinkClass})`, {
+  color: vars.color.menuLink,
+  padding: vars.space['1x'],
+})
+
+globalStyle(`${navigationClass} a:hover`, {
+  color: vars.color.menuLinkHover,
+})
+
+export const logoImgClass = style({
+  height: vars.space['3x'],
+})
+
+export const selectedClass = sprinkles({
+  textShadow: 'menuActiveLinkShadow',
+})
+
+export const portfolioPageNavigation = style({
+  position: 'sticky',
+  top: '0px',
+  zIndex: 1,
+  width: '100%',
+  fontSize: vars.fontSize.sm,
+  padding: vars.space['1x'],
+  background: vars.color.background,
+  boxShadow: `0px 0.5em 0.5em ${vars.color.background}`,
+})
+
+export const portfolioPageNavigationLinksClass = sprinkles({
+  maxWidth: 'l',
+  marginX: 'auto',
+  marginY: 'none',
+})

src/components/Nav.svelte

@@ -1,14 +1,25 @@
 <script>
   import classNames from 'classnames'
+  import {
+    logoImgClass,
+    logoLinkClass,
+    logoSectionClass,
+    navigationClass,
+    navigationContentClass,
+    navigationLinksClass,
+    portfolioPageNavigation,
+    portfolioPageNavigationLinksClass,
+    selectedClass,
+  } from './Nav.css'
 
   export let segment
 </script>
 
-<nav>
+<nav class={navigationClass}>
-  <section class="nav-main">
+  <section class={navigationContentClass}>
-    <ul>
+    <ul class={navigationLinksClass}>
       <li>
-        <a class={classNames({ selected: segment === '/' })} href="/">
+        <a class={classNames({ [selectedClass]: segment === '/' })} href="/">
           Introduction
         </a>
       </li>
@@ -17,7 +28,7 @@
       <li>
         <a
           rel="prefetch"
-          class={classNames({ selected: segment.startsWith('/blog') })}
+          class={classNames({ [selectedClass]: segment.startsWith('/blog') })}
           href="/blog"
         >
           Blog
@@ -25,7 +36,9 @@
       </li>
       <li>
         <a
-          class={classNames({ selected: segment.startsWith('/portfolio') })}
+          class={classNames({
+            [selectedClass]: segment.startsWith('/portfolio'),
+          })}
           href="/portfolio"
         >
           Portfolio
@@ -33,17 +46,23 @@
       </li>
     </ul>
 
-    <aside class="logo-section">
+    <aside class="logo-section {logoSectionClass}">
-      <a class="logo" href=".">
+      <a class="logo {logoLinkClass}" href=".">
-        <img src="/m-logo.svg" alt="m logo" width="44px" height="44px" />
+        <img
+          class={logoImgClass}
+          src="/m-logo.svg"
+          alt="m logo"
+          width="44px"
+          height="44px"
+        />
       </a>
     </aside>
   </section>
 </nav>
 
 {#if segment === '/portfolio'}
-  <section class="page-navigation">
+  <section class="page-navigation {portfolioPageNavigation}">
-    <div class="page-navigation-links">
+    <div class={portfolioPageNavigationLinksClass}>
       <a href="/portfolio#personal-information">About</a>
       <a href="/portfolio#skills">Skills</a>
       <a href="/portfolio#work-history">Work History</a>
@@ -52,80 +71,3 @@
     </div>
   </section>
 {/if}
-
-<style lang="less">
-  @import '../styles/variables.module.less';
-
-  a {
-    color: @menu-link-color;
-    padding: 0.4em 0.5em;
-
-    &:hover {
-      color: @menu-link-hover-color;
-    }
-  }
-
-  nav {
-    padding: 0.5em 0.5em 1em;
-
-    background: radial-gradient(
-      120% 100% at 0% 0%,
-      @menu-bg-color,
-      rgba(@pinky, 0) 100%
-    );
-
-    color: @menu-color;
-    text-shadow: @menu-link-text-shadow;
-  }
-
-  .nav-main {
-    display: flex;
-    max-width: @media-max;
-    margin: 0 auto;
-  }
-
-  .logo-section {
-    line-height: 0px;
-  }
-
-  .logo {
-    padding: 0;
-    display: block;
-    max-height: 1em;
-  }
-
-  .logo img {
-    height: 1.8em;
-  }
-
-  ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    display: flex;
-  }
-
-  .nav-main > ul {
-    flex: 1;
-  }
-
-  a.selected {
-    text-shadow: @menu-active-link-text-shadow;
-  }
-
-  .page-navigation {
-    position: sticky;
-    top: 0px;
-    z-index: 1;
-    width: 100%;
-    font-size: 0.86em;
-    padding: 0.3em;
-    background: @bg-color;
-    box-shadow: 0px 0.5em 0.5em @bg-color;
-  }
-
-  .page-navigation-links {
-    max-width: @media-l;
-    margin: 0 auto;
-  }
-</style>

src/styles/sprinkles.css.ts

@@ -32,7 +32,9 @@ const responsiveProperties = defineProperties({
       'space-between',
     ],
     alignItems: ['stretch', 'flex-start', 'center', 'flex-end'],
+    flex: ['1'],
     textAlign: ['left', 'center', 'right', 'justify', 'start'],
+    textShadow: vars.textShadow,
     paddingTop: vars.space,
     paddingBottom: vars.space,
     paddingLeft: vars.space,

src/styles/vars.css.ts

@@ -87,6 +87,7 @@ export const vars = createGlobalTheme(':root', {
     '6x': fontSizeScale(6),
   },
   lineHeight: {
+    none: '0',
     '0x': lineHeightScale(0),
     '1x': lineHeightScale(1),
     '2x': lineHeightScale(2),
@@ -99,6 +100,16 @@ export const vars = createGlobalTheme(':root', {
     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
+    )}`,
+  },
   width: {
     s: '400px',
     m: '700px',