Config
To define a configuration, create a shoreline.config.ts file. The defineConfig function helps with the types.
shoreline.config.ts
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
shoreline.config.ts
export default defineConfig({
preset: 'base',
})Other options override the preset.
shoreline.config.ts
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
shoreline.config.ts
export default defineConfig({
outdir: './shoreline',
})cwd
The current working directory.
- Type:
string - Default:
undefined
shoreline.config.ts
export default defineConfig({
cwd: process.cwd(),
})tokens
- Type:
Record<string, any> - Default:
undefined
shoreline.config.ts
export default defineConfig({
// ...
tokens: {
color: {
blue: {
100: 'oklch(56.03% 0.212 282)',
// ...
},
},
},
})