@amandaguthrie/panda-preset-font-modernfs

A Panda CSS preset that formats Modern Font Stack font stacks as core tokens.

This preset makes it easy to import Modern Font Stack fonts into Panda CSS.

Contents

• Install
• Configure
• Token Structure
• Examples
• License

Install

npm

npm install -D @amandaguthrie/panda-preset-font-modernfs

pnpm

pnpm install -D @amandaguthrie/panda-preset-font-modernfs

yarn

yarn add -D @amandaguthrie/panda-preset-font-modernfs

bun

bun add -D @amandaguthrie/panda-preset-font-modernfs

> Back to Contents

Configure

In your panda.config.{ts,js} file, import the preset and include it in your presets list. This preset does not rely on any of the default @pandacss presets as a dependency.

[!TIP] If you don't currently have any presets in your config file and are using any of the Panda CSS defaults, add @pandacss/preset-base and/or @pandacss/preset-panda to the array.

import {defineConfig} from '@pandacss/dev';
import modernFSPreset, {type FontModernFSPresetOptions} from '@amandaguthrie/panda-preset-font-modernfs';

const modernFSPresetConfig: FontModernFSPresetOptions = {
  fonts: '*'
};

export default defineConfig({
  // ...
  presets: [
    // ... Other presets
    modernFSPreset(modernFSPresetConfig),
  ],
  // ...
});

Function pandaPresetFontModernFS

The function pandaPresetFontModernFS is the default export which optionally accepts configuration parameters and returns Panda CSS core tokens as a preset.

Parameters

The parameters for the default export options are exported as type FontModernFSPresetOptions.

• fonts ("*" | FontKeyModernFontStack[], Optional)
  • Specify an array of Modern Font Stack names, or "*" to generate all Modern Font Stack names.
  • If a string in the array is not a valid Modern Font Stack name, it is filtered out.
  • If there are no valid Modern Font Stack names in the array, all font stacks are generated.
  • Default: "*"

Return

Panda CSS Preset

> Back to Contents

Token Structure

Core Tokens

Core tokens generated by this preset utilize the following structure:

const coreTokenStructure = {
  modernfs: {
    humanist: {value: []}
    // Other fonts
  },
};

Use them like other core font tokens.

Config File

{fonts.modernfs.humanist} {fonts.modernfs.neoGrotesque}

CSS Variable Examples

var(--fonts-modernfs-humanist) var(--fonts-modernfs-neo-grotesque)

> Back to Contents

Examples

• Generate all fonts as core tokens
• Generate some fonts as core tokens

Generate all fonts as core tokens

import {defineConfig} from '@pandacss/dev';
import modernFSPreset from '@amandaguthrie/panda-preset-font-modernfs';

export default defineConfig({
  // ...
  presets: [
    // ... Other presets
    modernFSPreset(),
  ],
  // ...
});

const allFonts = {
  theme: {
    extend: {
      tokens: {
        fonts: {
          modernfs: {
            monospaceCode: {value: ["ui-monospace", "Cascadia Code", "Source Code Pro", "Menlo", "Consolas", "DejaVu Sans Mono", "monospace"]},
            // ... Other fonts
            transitional: {value: ["Charter", "Bitstream Charter", "Sitka Text", "Cambria", "serif"]}
          }
        }
      }
    }
  }
}

> Back to examples

Generate some fonts as core tokens

import {defineConfig} from '@pandacss/dev';
import modernFSPreset from '@amandaguthrie/panda-preset-font-modernfs';

export default defineConfig({
  // ...
  presets: [
    // ... Other presets
    modernFSPreset({fonts: ["geometricHumanist"]}),
  ],
  // ...
});

This generates only the font tokens that are included in the fonts array.

const someFonts = {
  theme: {
    extend: {
      tokens: {
        fonts: {
          modernfs: {
            geometricHumanist: {value: ["Avenir", "Montserrat", "Corbel", "URW Gothic", "source-sans-pro", "sans-serif"]}
          }
        }
      }
    }
  }
}

> Back to Contents

Acknowledgement

• Panda CSS for building a robust and extensible styling solution
• Modern Font Stacks for curating cohesive collections of native web fonts

> Back to Contents

License

MIT © 2024 Amanda Guthrie

> Back to Contents