@roots/sage

@roots/sage preset for @roots/bud

Installation

Install @roots/sage to your project.

Yarn:

yarn add @roots/sage --dev

npm:

npm install @roots/sage --save-dev

Usage

Documentation for this package is available on bud.js.org. It may include additional context and information not available in this README.

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"],
};

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,
  },
};

Tailwind

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: [],
};

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
);

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,
  },
};