Config

To define a configuration, create a shoreline.config.ts file. The defineConfig function helps with the types.

import { defineConfig } from '@vtex/shoreline-theme'
export default defineConfig({
  preset: 'base',
})

prefix

The namespace prefix for the generated CSS. A shoreline config has the sl prefix.

Options

preset

A configuration to be used as a base.

• Type: 'base' | 'admin'
• Default: undefined

export default defineConfig({
  preset: 'base',
})

Other options override the preset.

export default defineConfig({
  preset: 'base',
  tokens: {
    space: {
      1: '1rem',
    },
  },
})

base

The base configuration of Shoreline.

const presetBase = {
  prefix: 'sl',
  outdir: './shoreline',
  cwd: process.cwd(),
  tokens: {},
}

admin

The admin preset combines base with the admin tokens.

outdir

Output directory for the generated code.

• Type: string
• Default: undefined

export default defineConfig({
  outdir: './shoreline',
})

cwd

The current working directory.

• Type: string
• Default: undefined

export default defineConfig({
  cwd: process.cwd(),
})

tokens

• Type: Record<string, any>
• Default: undefined

export default defineConfig({
  // ...
  tokens: {
    color: {
      blue: {
        100: 'oklch(56.03% 0.212 282)',
        // ...
      },
    },
  },
})