@amandaguthrie/panda-preset-font-modernfs NPM

@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.

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

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