@roots/sage
@roots/sage is a preset configuration for the Sage WordPress starter theme.
Installation
- yarn
- npm
yarn add @roots/sage --dev
npm install @roots/sage --save-dev
Generate theme.json
You can generate a theme.json
during build using the themeJson
function provided by Sage.
Shown with defaults:
app.wptheme.settings({
color: {
custom: false,
customGradient: false,
},
custom: {
spacing: {},
typography: {'font-size': {}, 'line-height': {}},
},
spacing: {
padding: true,
units: ['px', '%', 'em', 'rem', 'vw', 'vh'],
},
typography: {
customFontSize: false,
dropCap: false,
},
})
If you just want to modify the defaults rather than provide your own entirely, you can do so with a function.
By default, the callback will supply you with a container of the default theme.json
values:
app.wptheme.settings(theme => {
theme.set('typography.customFontSize', true)
return theme
})
If preferred, you can request a normal object by passing true
as an optional second parameter:
app.wptheme.settings(
theme => ({
...theme,
typography: {
...theme.typography,
customFontSize: true,
},
}),
true,
)
Defining theme.json
colors from tailwind.config.js
If generating theme.json
with the themeJson
function, you can define the theme.json
color.palette
option from values found in tailwind.config.js
.
app.wpjson.useTailwindColors().enable()
This only works with colors defined under the theme.extend.colors
key in tailwind.config.js
:
module.exports = {
content: ['./app/**/*.php', './resources/**/*.{php,vue,js}'],
theme: {
extend: {
colors: {
primary: '#525ddc',
},
},
},
variants: {
extend: {},
},
plugins: [],
}
Linting
Linting with eslint
Install the @roots/bud-eslint
extension:
yarn add @roots/bud-eslint --dev
Next, in your theme directory create a eslint.config.js
file and include the Sage default eslint config:
module.exports = {
root: true,
extends: ['@roots/eslint-config/sage'],
}
Linting with stylelint
Install the @roots/bud-stylelint
extension:
yarn add @roots/bud-stylelint --dev
Next, in your theme directory create a .stylelintrc.js
file and include the Sage default stylelint config:
module.exports = {
extends: ['@roots/sage/stylelint-config'],
rules: {
'color-no-invalid-hex': true,
},
}
Usage with Sass
Install the @roots/bud-sass
extension:
yarn add @roots/bud-sass --dev
If using stylelint you will need to configure it for sass:
module.exports = {
extends: [
'@roots/sage/stylelint-config',
'@roots/bud-sass/stylelint-config',
],
rules: {
'color-no-invalid-hex': true,
},
}