#The lib/ Directory

Colocated component styles cover what's unique to each component. The shared SCSS machinery — the fluid spacing scale, the fade mixin, common functions — lives once, in assets/lib/. It is the theme's SCSS standard library.

lib/ holds shared SCSS functionality only: mixins, functions, and global variables reused across component stylesheets. No JS lives here, and no component- specific rules — if a rule belongs to one component, it stays colocated with that component.

#How you use it

Vite aliases the directory to lib/, so any stylesheet anywhere in the tree pulls it in with a short, path-independent @use:

@use 'lib/rhythm' as rhythm;
@use 'lib/animate' as animate;

.intro {
  @include rhythm.default(sm, md, none, none);
  @include rhythm.apply();
}

You never write ../../../lib/rhythm — the alias resolves the same from a Module, a Component, or a Layout. It's configured in vite.config.js:

// vite.config.js
resolve: {
  alias: [
    {
      find: 'lib/',
      replacement: path.resolve(__dirname, 'resources/public/assets/lib') + '/',
    },
  ],
}

#What's in there

The current library is small and load-bearing:

• lib/rhythm — the fluid clamp()-based vertical-spacing scale: default, apply, stack, pile, gutter, negate.
• lib/animate — the fade mixin driven by .animate / .is-animated.

Add to lib/ only when something is genuinely shared. A mixin used by one component is just that component's SCSS.

#Related

• SCSS architecture — where colocated styles live.
• The rhythm system — the biggest thing lib/ exposes.
• Animation — the fade mixin from lib/animate.