Adjust icons, spacing; upgrade SB

package.json

@@ -53,19 +53,19 @@
     "@babel/preset-typescript": "^7.23.2",
     "@linaria/postcss-linaria": "^6.2.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
-    "@storybook/addon-essentials": "^8.3.6",
-    "@storybook/addon-interactions": "^8.3.6",
-    "@storybook/addon-links": "^8.3.6",
-    "@storybook/blocks": "^8.3.6",
-    "@storybook/channels": "^8.3.6",
-    "@storybook/components": "^8.3.6",
-    "@storybook/core-events": "^8.3.6",
-    "@storybook/manager-api": "^8.3.6",
-    "@storybook/preview-api": "^8.3.6",
-    "@storybook/react": "^8.3.6",
-    "@storybook/react-vite": "^8.3.6",
-    "@storybook/test": "^8.3.6",
-    "@storybook/theming": "^8.3.6",
+    "@storybook/addon-essentials": "^8.4.1",
+    "@storybook/addon-interactions": "^8.4.1",
+    "@storybook/addon-links": "^8.4.1",
+    "@storybook/blocks": "^8.4.1",
+    "@storybook/channels": "^8.4.1",
+    "@storybook/components": "^8.4.1",
+    "@storybook/core-events": "^8.4.1",
+    "@storybook/manager-api": "^8.4.1",
+    "@storybook/preview-api": "^8.4.1",
+    "@storybook/react": "^8.4.1",
+    "@storybook/react-vite": "^8.4.1",
+    "@storybook/test": "^8.4.1",
+    "@storybook/theming": "^8.4.1",
     "@types/compression": "^1",
     "@types/jsdom": "^21.1.7",
     "@types/node": "^20.11.19",
@@ -93,7 +93,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
     "eslint-plugin-simple-import-sort": "^12.0.0",
-    "eslint-plugin-storybook": "^0.10.1",
+    "eslint-plugin-storybook": "^0.10.2",
     "eslint-plugin-testing-library": "^6.1.0",
     "jsdom": "^25.0.0",
     "postcss": "^8.4.45",
@@ -104,7 +104,7 @@
     "rss-parser": "^3.13.0",
     "serve": "^14.2.4",
     "sitemap-static": "^0.4.4",
-    "storybook": "^8.3.6",
+    "storybook": "^8.4.1",
     "stylelint": "^16.9.0",
     "stylelint-order": "^6.0.4",
     "tsx": "^4.17.0",
@@ -114,7 +114,7 @@
     "vite-imagetools": "^7.0.4",
     "vite-plugin-markdown": "^2.2.0"
   },
-  "packageManager": "[email protected].0",
+  "packageManager": "[email protected].1",
   "resolutions": {
     "@storybook/core@npm:8.3.0": "patch:@storybook/core@npm%3A8.3.5#~/.yarn/patches/@storybook-core-npm-8.3.0-833013f32e.patch"
   }

src/components/github/numbers.styles.ts

@@ -6,7 +6,7 @@ const { vars, decl } = theme;
 const root = toProps(css`
   ${decl.color.background.subtlest}
   ${decl.color.font.dark}
-  ${decl.shadow.small}
+  ${decl.boxShadow.small}
   border-color: var(${vars.color.border.medium});
   border-radius: var(${vars.spacing.step0});
   border-style: solid;

src/components/layout/section/section_link.styles.ts

@@ -13,7 +13,7 @@ const root = toProps(css`
 `);
 
 const link = toProps(css`
-  ${decl.shadow.large}
+  ${decl.boxShadow.large}
   border-radius: var(${vars.spacing.step1});
   a& {
     ${decl.color.font.light}

src/components/portfolio/portfolio_item.styles.ts

@@ -258,21 +258,15 @@ const projectLink = toProps(css`
     ${decl.font.size.step0}
 
     height: calc(var(${vars.spacing.step9}) + var(${vars.spacing.step0}));
-    line-height: calc(
-      calc(var(${vars.spacing.step9}) + var(/* ${decl.color.font.light}:16 */)) +
-        var(/* ${decl.color.font.light}:11 */)
-    );
+    line-height: calc(var(${vars.spacing.step9}) + var(${vars.spacing.step0}) + 2px);
     width: calc(var(${vars.spacing.step9}) + var(${vars.spacing.step0}));
   }
 
   ${decl.media.medium} {
     ${decl.font.size.step0}
 
     height: calc(var(${vars.spacing.step9}) + var(${vars.spacing.step2}));
-    line-height: calc(
-      calc(var(${vars.spacing.step9}) + var(/* ${decl.color.font.light}:25 */)) +
-        var(/* ${decl.color.font.light}:19 */)
-    );
+    line-height: calc(var(${vars.spacing.step9}) + var(${vars.spacing.step2}) + 2px);
     width: calc(var(${vars.spacing.step9}) + var(${vars.spacing.step2}));
   }
 `);

src/components/timeline/timeline.styles.ts

@@ -17,18 +17,6 @@ const root = toProps(css`
   column-width: calc(50% - var(${vars.grid.gutter}) / 2);
   position: relative;
 
-  &:before {
-    background-color: var(${vars.color.background.subtler});
-    bottom: 0;
-    content: '';
-    display: block;
-    left: calc(var(--bullet-size) / 2);
-    position: absolute;
-    top: calc(var(--bullet-size));
-    width: 1px;
-    z-index: 0;
-  }
-
   ${decl.media.narrow} {
     column-count: 1;
     column-width: revert;

src/components/timeline/timeline_item.styles.ts

@@ -27,8 +27,9 @@ const root = (logo?: string) =>
     css`
       --bullet-top: ${BULLET_TOP};
       break-inside: avoid;
-      padding-bottom: var(${vars.spacing.step9});
+      padding-bottom: var(${vars.spacing.step3});
       padding-left: calc(var(--bullet-size) + (var(${vars.grid.gutter}) / 2));
+      padding-top: var(${vars.spacing.step3});
       position: relative;
 
       &:before {
@@ -58,7 +59,7 @@ const root = (logo?: string) =>
           );
           bottom: calc(0 - var(${vars.spacing.step9}));
           content: '';
-          height: var(${vars.spacing.step9});
+          height: var(${vars.spacing.sectionTop});
           left: calc(var(--bullet-size) / 2);
           position: absolute;
           width: 1px;
@@ -81,7 +82,7 @@ const header = toProps(css`
   flex-direction: column;
 
   &:before {
-    ${decl.shadow.medium}
+    ${decl.dropShadow.small}
     background-image: var(--timeline-item-logo);
     background-position: center;
     background-size: var(--image-size);
@@ -97,7 +98,7 @@ const header = toProps(css`
   }
 
   &:after {
-    ${decl.shadow.medium}
+    ${decl.boxShadow.small}
     background-color: var(${vars.color.background.subtler});
     border-radius: 50%;
     content: '';

src/lib/hooks/use_logos.ts

@@ -2,7 +2,7 @@
 // to derive the correct key... so it's COPY PASTA TIME
 const IMG_PATH_PREFIX = '/src/content/logos/';
 
-const imageModules = import.meta.glob<{ default: ImageOutputMetadata }>('@content/logos/*.png', {
+const imageModules = import.meta.glob<{ default: ImageOutputMetadata }>('@content/logos/*.*', {
   query: { w: '40', as: 'metadata', format: 'webp' },
   eager: true,
 });

src/pages/home/about/about.tsx

@@ -15,7 +15,6 @@ const Component = () => {
     <Section {...{ ref, ...attributes }} {...styles.root}>
       <Section.Header {...attributes} {...styles.header} />
       <About.Summary />
-      <Section.Divider />
       <About.Work />
       <About.Code />
     </Section>

src/theme/common.ts

@@ -18,3 +18,4 @@ export const VAR_PREFIX_GRID = '--grid';
 export const VAR_PREFIX_MEDIA = '--media';
 export const VAR_PREFIX_HEADER = '--header';
 export const VAR_PREFIX_BOX_SHADOW = '--box-shadow';
+export const VAR_PREFIX_DROP_SHADOW = '--drop-shadow';

src/theme/index.ts

@@ -7,25 +7,27 @@ import { grid } from './grid';
 import { header } from './header';
 import { icons } from './icons';
 import { media } from './media';
-import { shadow } from './shadow';
+import { boxShadow, dropShadow } from './shadow';
 import { spacing } from './spacing';
 
 export const theme = {
   vars: {
+    boxShadow: boxShadow.vars,
     color: color.vars,
+    dropShadow: dropShadow.vars,
     font: font.vars,
     grid: grid.vars,
     header: header.vars,
     media: media.vars,
-    shadow: shadow.vars,
     spacing: spacing.vars,
   },
   decl: {
+    boxShadow: boxShadow.decl,
     color: color.decl,
+    dropShadow: dropShadow.decl,
     font: font.decl,
     grid: grid.decl,
     media: media.decl,
-    shadow: shadow.decl,
     anchor: `
       a {
         ${color.decl.font.accent}
@@ -39,12 +41,13 @@ export const theme = {
     `,
   },
   definitions: {
+    ...boxShadow.definitions,
     ...color.definitions,
+    ...dropShadow.definitions,
     ...font.definitions,
     ...grid.definitions,
     ...header.definitions,
     ...media.definitions,
-    ...shadow.definitions,
     ...spacing.definitions,
   },
   icons,

src/theme/media.ts

@@ -17,7 +17,7 @@ const { vars, definitions } = buildTheme(
 const decl = {
   narrow: `@media (max-width: ${BREAKPOINT_NARROW}px)`,
   medium: `@media (max-width: ${BREAKPOINT_MEDIUM}px)`,
-  mediumToWide: `@media (max-width: ${BREAKPOINT_WIDE}px) and (min-width: ${BREAKPOINT_MEDIUM}px))`,
+  mediumToWide: `@media (max-width: ${BREAKPOINT_WIDE}px), (min-width: ${BREAKPOINT_MEDIUM}px))`,
   wide: `@media (max-width: ${BREAKPOINT_WIDE}px))`,
   max: `@media (min-width: ${BREAKPOINT_WIDE}px))`,
   wideOrPortrait: `@media (max-width: ${BREAKPOINT_WIDE}px), (orientation: portrait)`,

src/theme/shadow.ts

@@ -1,18 +1,58 @@
 import { buildTheme } from '@lib/css';
-import { VAR_PREFIX_BOX_SHADOW as varPrefix } from '@theme/common';
+import { VAR_PREFIX_BOX_SHADOW, VAR_PREFIX_DROP_SHADOW } from '@theme/common';
 
-const { vars, definitions, decl } = buildTheme(
+const shadows = {
+  large: [
+    'rgba(0, 0, 0, 0.07) 0px 1px 1px',
+    'rgba(0, 0, 0, 0.07) 0px 2px 2px',
+    'rgba(0, 0, 0, 0.07) 0px 4px 4px',
+    'rgba(0, 0, 0, 0.07) 0px 8px 8px',
+    'rgba(0, 0, 0, 0.07) 0px 16px 16px',
+  ],
+  medium: [
+    'rgba(0, 0, 0, 0.07) 0px 1px 1px',
+    'rgba(0, 0, 0, 0.07) 0px 2px 2px',
+    'rgba(0, 0, 0, 0.07) 0px 4px 4px',
+  ],
+  small: ['rgba(0, 0, 0, 0.12) 0px 1px 1px', 'rgba(0, 0, 0, 0.24) 0px 1px 1px'],
+};
+
+const {
+  vars: boxVars,
+  definitions: boxDef,
+  decl: boxDecl,
+} = buildTheme(
   {
-    large: `rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;`,
-    medium: `rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px;`,
-    small: `rgba(0, 0, 0, 0.45) 0px 12px 10px -15px;`,
+    large: `${shadows.large.join(', ')}`,
+    medium: `${shadows.medium.join(', ')}`,
+    small: `${shadows.small.join(', ')}`,
   },
-  varPrefix,
+  VAR_PREFIX_BOX_SHADOW,
   'box-shadow',
 );
 
-export const shadow = {
-  vars,
-  definitions,
-  decl,
+const {
+  vars: dropShadowVars,
+  definitions: dropShadowDef,
+  decl: dropShadowDecl,
+} = buildTheme(
+  {
+    large: `${shadows.large.map((s) => `drop-shadow(${s})`).join(' ')}`,
+    medium: `${shadows.medium.map((s) => `drop-shadow(${s})`).join(' ')}`,
+    small: `${shadows.small.map((s) => `drop-shadow(${s})`).join(' ')}`,
+  },
+  VAR_PREFIX_DROP_SHADOW,
+  'filter',
+);
+
+export const boxShadow = {
+  vars: boxVars,
+  definitions: boxDef,
+  decl: boxDecl,
+};
+
+export const dropShadow = {
+  vars: dropShadowVars,
+  definitions: dropShadowDef,
+  decl: dropShadowDecl,
 };