.github/labeler.yml

@@ -1,19 +1,15 @@
 build:
   - changed-files:
       - any-glob-to-any-file:
-          - .eslintrc.js
+          - vite.config.js
-          - .prettierrc
-          - .stylelintrc
-          - bud.config.js
-          - tsconfig.json
 dependencies:
   - changed-files:
       - any-glob-to-any-file:
-          - yarn.lock
+          - package-lock.json
 javascript:
   - changed-files:
       - any-glob-to-any-file:
-          - resources/scripts/**/*.js
+          - resources/js/**/*.js
 php:
   - changed-files:
       - any-glob-to-any-file:

.github/renovate.json

@@ -1,17 +1,23 @@
 {
-  "baseBranches": ["main"],
+  "baseBranches": [
+    "main"
+  ],
   "commitMessageAction": "⬆️ Bump",
   "commitMessageTopic": "{{depName}}",
-  "extends": ["config:base", "schedule:weekly"],
+  "extends": [
+    "config:recommended",
+    "schedule:weekly"
+  ],
+  "rangeStrategy": "bump",
   "packageRules": [
     {
-      "matchUpdateTypes": ["minor", "patch", "pin"]
+      "matchUpdateTypes": [
-    },
+        "minor",
-    {
+        "patch",
-      "groupName": "Bud",
+        "pin"
-      "matchPackagePrefixes": ["@roots/"],
+      ],
-      "schedule": ["at any time"]
+      "enabled": true
     }
   ],
-  "timezone": "America/Chicago"
+  "timezone": "America/Detroit"
 }

.github/workflows/main.yml

@@ -25,18 +25,34 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node }}
-          cache: 'yarn'
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Install dependencies using Yarn
+      - name: Install dependencies using npm
-        run: yarn install --frozen-lockfile
+        run: npm install
 
       - name: Build and compile assets
         run: |
-          yarn build
+          npm run build
-          cat public/entrypoints.json
+          cat public/build/manifest.json
-          cat public/manifest.json
+
+      - name: Validate theme.json
+        run: |
+          THEME_JSON="public/build/assets/theme.json"
+
+          if [ ! -f "$THEME_JSON" ]; then
+            echo "❌ theme.json not found"
+            exit 1
+          fi
+
+          jq -e '
+            (.settings.color.palette | length > 0) and
+            (.settings.typography.fontFamilies | length > 0) and
+            (.settings.typography.fontSizes | length > 0)
+          ' "$THEME_JSON" 2>&1 || {
+            echo "❌ Invalid theme.json structure or missing required values"
+            exit 1
+          }
 
   php:
     name: PHP ${{ matrix.php }}
@@ -44,7 +60,7 @@ jobs:
     if: "!contains(github.event.head_commit.message, '[ci skip]')"
     strategy:
       matrix:
-        php: ['8.1', '8.2']
+        php: ['8.2']
 
     steps:
       - name: Checkout the project

.gitignore

@@ -1,7 +1,6 @@
 /node_modules
 /vendor
-/public
+/public/*
+!/public/.gitkeep
 .env
-.budfiles
 npm-debug.log
-yarn-error.log

LICENSE.md

@@ -1,4 +1,4 @@
-Copyright (c) Roots Software Foundation LLC
+Copyright (c) Roots Software LLC
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of
 this software and associated documentation files (the "Software"), to deal in

README.md

@@ -1,54 +1,31 @@
 <p align="center">
-  <a href="https://roots.io/sage/">
+  <a href="https://roots.io/sage/"><img alt="Sage" src="https://cdn.roots.io/app/uploads/logo-sage.svg" height="100"></a>
-    <img alt="Sage" src="https://cdn.roots.io/app/uploads/logo-sage.svg" height="100">
-  </a>
 </p>
 
 <p align="center">
-  <a href="https://packagist.org/packages/roots/sage">
+  <a href="https://packagist.org/packages/roots/sage"><img alt="Packagist Installs" src="https://img.shields.io/packagist/dt/roots/sage?label=projects%20created&colorB=2b3072&colorA=525ddc&style=flat-square"></a>
-    <img alt="Packagist Installs" src="https://img.shields.io/packagist/dt/roots/sage?label=projects%20created&colorB=2b3072&colorA=525ddc&style=flat-square">
+  <a href="https://github.com/roots/sage/actions/workflows/main.yml"><img alt="Build Status" src="https://img.shields.io/github/actions/workflow/status/roots/sage/main.yml?branch=main&logo=github&label=CI&style=flat-square"></a>
-  </a>
+  <a href="https://bsky.app/profile/roots.dev"><img alt="Follow roots.dev on Bluesky" src="https://img.shields.io/badge/follow-@roots.dev-0085ff?logo=bluesky&style=flat-square"></a>
-
-  <a href="https://github.com/roots/sage/actions/workflows/main.yml">
-    <img alt="Build Status" src="https://img.shields.io/github/actions/workflow/status/roots/sage/main.yml?branch=main&logo=github&label=CI&style=flat-square">
-  </a>
-
-  <a href="https://twitter.com/rootswp">
-    <img alt="Follow Roots" src="https://img.shields.io/badge/follow%20@rootswp-1da1f2?logo=twitter&logoColor=ffffff&message=&style=flat-square">
-  </a>
 </p>
 
-<p align="center">Advanced WordPress starter theme with Tailwind CSS and Laravel Blade</p>
+# Sage
 
-<p align="center">
+**Advanced hybrid WordPress starter theme with Laravel Blade and Tailwind CSS**
-  <a href="https://roots.io/sage/">Website</a> &nbsp;&nbsp; <a href="https://roots.io/sage/docs/installation/">Documentation</a> &nbsp;&nbsp; <a href="https://github.com/roots/sage/releases">Releases</a> &nbsp;&nbsp; <a href="https://discourse.roots.io/">Community</a>
+
-</p>
+- 🔧 Clean, efficient theme templating with Laravel Blade
+- ⚡️ Modern front-end development workflow powered by Vite
+- 🎨 Out of the box support for Tailwind CSS
+- 🚀 Harness the power of Laravel with [Acorn integration](https://github.com/roots/acorn)
+- 📦 Block editor support built-in
+
+Sage brings proper PHP templating and modern JavaScript tooling to WordPress themes. Write organized, component-based code using Laravel Blade, enjoy instant builds and CSS hot-reloading with Vite, and leverage Laravel's robust feature set through Acorn.
+
+[Read the docs to get started](https://roots.io/sage/docs/installation/)
 
 ## Sponsors
 
-Sage is an open source project and completely free to use. If you've benefited from our projects and would like to support our future endeavors, please consider [sponsoring Roots](https://github.com/sponsors/roots).
+Sage is an open source project and completely free to use. If you've benefited from our projects and would like to support our future endeavors, [please consider sponsoring us](https://github.com/sponsors/roots).
 
 <div align="center">
-<a href="https://k-m.com/"><img src="https://cdn.roots.io/app/uploads/km-digital.svg" alt="KM Digital" width="120" height="90"></a> <a href="https://carrot.com/"><img src="https://cdn.roots.io/app/uploads/carrot.svg" alt="Carrot" width="120" height="90"></a> <a href="https://wordpress.com/"><img src="https://cdn.roots.io/app/uploads/wordpress.svg" alt="WordPress.com" width="120" height="90"></a> <a href="https://worksitesafety.ca/careers/"><img src="https://cdn.roots.io/app/uploads/worksite-safety.svg" alt="Worksite Safety" width="120" height="90"></a> <a href="https://40q.agency/"><img src="https://cdn.roots.io/app/uploads/40q.svg" alt="40Q" width="120" height="90"></a> <a href="https://www.itineris.co.uk/"><img src="https://cdn.roots.io/app/uploads/itineris.svg" alt="Itineris" width="120" height="90"></a>
+<a href="https://carrot.com/"><img src="https://cdn.roots.io/app/uploads/carrot.svg" alt="Carrot" width="120" height="90"></a> <a href="https://wordpress.com/"><img src="https://cdn.roots.io/app/uploads/wordpress.svg" alt="WordPress.com" width="120" height="90"></a> <a href="https://worksitesafety.ca/careers/"><img src="https://cdn.roots.io/app/uploads/worksite-safety.svg" alt="Worksite Safety" width="120" height="90"></a> <a href="https://40q.agency/"><img src="https://cdn.roots.io/app/uploads/40q.svg" alt="40Q" width="120" height="90"></a> <a href="https://www.itineris.co.uk/"><img src="https://cdn.roots.io/app/uploads/itineris.svg" alt="Itineris" width="120" height="90"></a> <a href="https://bonsai.so/"><img src="https://cdn.roots.io/app/uploads/bonsai.svg" alt="Bonsai" width="120" height="90"></a>
 </div>
-
-## Overview
-
-Sage is a WordPress starter theme with block editor support.
-
-- Harness the power of [Laravel](https://laravel.com) and its available packages thanks to [Acorn](https://github.com/roots/acorn)
-- Clean, efficient theme templating utilizing [Laravel Blade](https://laravel.com/docs/master/blade)
-- Modern frontend development workflow powered by [Bud](https://bud.js.org/)
-- Out of the box support for [Tailwind CSS](https://tailwindcss.com/)
-
-## Getting Started
-
-See the [Sage installation documentation](https://roots.io/sage/docs/installation/).
-
-## Stay Connected
-
-- Join us on Discord by [sponsoring us on GitHub](https://github.com/sponsors/roots)
-- Participate on [Roots Discourse](https://discourse.roots.io/)
-- Follow [@rootswp on Twitter](https://twitter.com/rootswp)
-- Read the [Roots Blog](https://roots.io/blog/)
-- Subscribe to the [Roots Newsletter](https://roots.io/newsletter/)

app/View/Composers/App.php

@@ -17,10 +17,13 @@ class App extends Composer
     ];
 
     /**
-     * Data to be passed to view before rendering.
+     * Retrieve the site name.
-     *
-     * @return array
      */
+    public function siteName(): string
+    {
+        return get_bloginfo('name', 'display');
+    }
+
     public function with()
     {
         return [
@@ -28,20 +31,9 @@ class App extends Composer
             'VideoSrcset' => new Utilities\VideoSrcset,
             'ImageSrcset' => new Utilities\ImageSrcset,
             'siteName' => $this->siteName(),
-            'siteLogo' => @file_get_contents(get_template_directory() . '/resources/images/logo-rhythm-road-entertainment.svg'),
             'company_legal' => get_field('badegg_company_legal', 'option'),
             'company_tel' => get_field('badegg_company_tel', 'option'),
             'company_email' => get_field('badegg_company_email', 'option'),
         ];
     }
-
-    /**
-     * Returns the site name.
-     *
-     * @return string
-     */
-    public function siteName()
-    {
-        return get_bloginfo('name', 'display');
-    }
 }

app/View/Composers/Comments.php

@@ -15,29 +15,10 @@ class Comments extends Composer
         'partials.comments',
     ];
 
-    /**
-     * Data to be passed to view before rendering.
-     *
-     * @return array
-     */
-    public function with()
-    {
-        return [
-            'title' => $this->title(),
-            'responses' => $this->responses(),
-            'previous' => $this->previous(),
-            'next' => $this->next(),
-            'paginated' => $this->paginated(),
-            'closed' => $this->closed(),
-        ];
-    }
-
     /**
      * The comment title.
-     *
-     * @return string
      */
-    public function title()
+    public function title(): string
     {
         return sprintf(
             /* translators: %1$s is replaced with the number of comments and %2$s with the post title */
@@ -49,13 +30,11 @@ class Comments extends Composer
 
     /**
      * Retrieve the comments.
-     *
-     * @return string
      */
-    public function responses()
+    public function responses(): ?string
     {
         if (! have_comments()) {
-            return;
+            return null;
         }
 
         return wp_list_comments([
@@ -67,13 +46,11 @@ class Comments extends Composer
 
     /**
      * The previous comments link.
-     *
-     * @return string
      */
-    public function previous()
+    public function previous(): ?string
     {
         if (! get_previous_comments_link()) {
-            return;
+            return null;
         }
 
         return get_previous_comments_link(
@@ -83,13 +60,11 @@ class Comments extends Composer
 
     /**
      * The next comments link.
-     *
-     * @return string
      */
-    public function next()
+    public function next(): ?string
     {
         if (! get_next_comments_link()) {
-            return;
+            return null;
         }
 
         return get_next_comments_link(
@@ -99,20 +74,16 @@ class Comments extends Composer
 
     /**
      * Determine if the comments are paginated.
-     *
-     * @return bool
      */
-    public function paginated()
+    public function paginated(): bool
     {
         return get_comment_pages_count() > 1 && get_option('page_comments');
     }
 
     /**
      * Determine if the comments are closed.
-     *
-     * @return bool
      */
-    public function closed()
+    public function closed(): bool
     {
         return ! comments_open() && get_comments_number() != '0' && post_type_supports(get_post_type(), 'comments');
     }

app/View/Composers/Post.php

@@ -17,25 +17,10 @@ class Post extends Composer
         'partials.content-*',
     ];
 
-    /**
-     * Data to be passed to view before rendering, but after merging.
-     *
-     * @return array
-     */
-    public function override()
-    {
-        return [
-            'title' => $this->title(),
-            'pagination' => $this->pagination(),
-        ];
-    }
-
     /**
      * Retrieve the post title.
-     *
-     * @return string
      */
-    public function title()
+    public function title(): string
     {
         if ($this->view->name() !== 'partials.page-header') {
             return get_the_title();
@@ -70,10 +55,8 @@ class Post extends Composer
 
     /**
      * Retrieve the pagination links.
-     *
-     * @return string
      */
-    public function pagination()
+    public function pagination(): string
     {
         return wp_link_pages([
             'echo' => 0,

app/setup.php

@@ -6,25 +6,56 @@
 
 namespace App;
 
-use function Roots\bundle;
+use Illuminate\Support\Facades\Vite;
 
 /**
- * Register the theme assets.
+ * Inject styles into the block editor.
+ *
+ * @return array
+ */
+add_filter('block_editor_settings_all', function ($settings) {
+    $style = Vite::asset('resources/css/editor.scss');
+
+    $settings['styles'][] = [
+        'css' => "@import url('{$style}')",
+    ];
+
+    return $settings;
+});
+
+/**
+ * Inject scripts into the block editor.
  *
  * @return void
  */
-add_action('wp_enqueue_scripts', function () {
+add_filter('admin_head', function () {
-    bundle('app')->enqueue();
+    if (! get_current_screen()?->is_block_editor()) {
-}, 100);
+        return;
+    }
+
+    $dependencies = json_decode(Vite::content('editor.deps.json'));
+
+    foreach ($dependencies as $dependency) {
+        if (! wp_script_is($dependency)) {
+            wp_enqueue_script($dependency);
+        }
+    }
+
+    echo Vite::withEntryPoints([
+        'resources/js/editor.js',
+    ])->toHtml();
+});
 
 /**
- * Register the theme assets with the block editor.
+ * Use the generated theme.json file.
  *
- * @return void
+ * @return string
  */
-add_action('enqueue_block_editor_assets', function () {
+add_filter('theme_file_path', function ($path, $file) {
-    bundle('editor')->enqueue();
+    return $file === 'theme.json'
-}, 100);
+        ? public_path('build/assets/theme.json')
+        : $path;
+}, 10, 2);
 
 /**
  * Register the initial theme setup.

bud.config.js

@@ -1,78 +0,0 @@
-/**
- * Compiler configuration
- *
- * @see {@link https://roots.io/sage/docs sage documentation}
- * @see {@link https://bud.js.org/learn/config bud.js configuration guide}
- *
- * @type {import('@roots/bud').Config}
- */
-export default async (app) => {
-  /**
-   * Application assets & entrypoints
-   *
-   * @see {@link https://bud.js.org/reference/bud.entry}
-   * @see {@link https://bud.js.org/reference/bud.assets}
-   */
-  app
-    .entry('app', ['@scripts/app', '@styles/app'])
-    .entry('editor', ['@scripts/editor', '@styles/editor'])
-    .assets(['images']);
-
-  /**
-   * Set public path
-   *
-   * @see {@link https://bud.js.org/reference/bud.setPublicPath}
-   */
-  app.setPublicPath('/app/themes/sage/public/');
-
-  /**
-   * Development server settings
-   *
-   * @see {@link https://bud.js.org/reference/bud.setUrl}
-   * @see {@link https://bud.js.org/reference/bud.setProxyUrl}
-   * @see {@link https://bud.js.org/reference/bud.watch}
-   */
-  app
-    .setUrl('https://localhost:3000')
-    .setProxyUrl('https://badegg-bedrock.localhost.1fp.ltd')
-    .watch(['resources/views', 'app']);
-
-  /**
-   * Generate WordPress `theme.json`
-   *
-   * @note This overwrites `theme.json` on every build.
-   *
-   * @see {@link https://bud.js.org/extensions/sage/theme.json}
-   * @see {@link https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json}
-   */
-  app.wpjson
-    .setSettings({
-      background: {
-        backgroundImage: true,
-      },
-      color: {
-        custom: false,
-        customDuotone: false,
-        customGradient: false,
-        defaultDuotone: false,
-        defaultGradients: false,
-        defaultPalette: false,
-        duotone: [],
-      },
-      custom: {
-        spacing: {},
-        typography: {
-          'font-size': {},
-          'line-height': {},
-        },
-      },
-      spacing: {
-        padding: true,
-        units: ['px', '%', 'em', 'rem', 'vw', 'vh'],
-      },
-      typography: {
-        customFontSize: false,
-      },
-    })
-    .enable();
-};

composer.json

@@ -39,11 +39,12 @@
     }
   },
   "require": {
-    "php": ">=8.1",
+    "php": ">=8.2",
+    "roots/acorn": "^5.0",
     "ourcodeworld/name-that-color": "dev-master"
   },
   "require-dev": {
-    "laravel/pint": "^1.13"
+    "laravel/pint": "^1.20"
   },
   "suggest": {
     "log1x/sage-directives": "A collection of useful Blade directives for WordPress and Sage (^1.0)."
@@ -55,11 +56,9 @@
   },
   "minimum-stability": "dev",
   "prefer-stable": true,
-  "extra": {
+  "scripts": {
-    "acorn": {
+    "post-autoload-dump": [
-      "providers": [
+      "Roots\\Acorn\\ComposerScripts::postAutoloadDump"
-        "App\\Providers\\ThemeServiceProvider"
+    ]
-      ]
-    }
   }
 }

functions.php

@@ -1,5 +1,7 @@
 <?php
 
+use Roots\Acorn\Application;
+
 /*
 |--------------------------------------------------------------------------
 | Register The Auto Loader
@@ -29,18 +31,11 @@ require $composer;
 |
 */
 
-if (! function_exists('\Roots\bootloader')) {
+Application::configure()
-    wp_die(
+    ->withProviders([
-        __('You need to install Acorn to use this theme.', 'sage'),
+        App\Providers\ThemeServiceProvider::class,
-        '',
+    ])
-        [
+    ->boot();
-            'link_url' => 'https://roots.io/acorn/docs/installation/',
-            'link_text' => __('Acorn Docs: Installation', 'sage'),
-        ]
-    );
-}
-
-\Roots\bootloader()->boot();
 
 /*
 |--------------------------------------------------------------------------

jsconfig.json

@@ -1,33 +0,0 @@
-{
-  "extends": [
-    "@roots/bud/config/jsconfig.json",
-    "@roots/sage/config/jsconfig.json"
-  ],
-  "compilerOptions": {
-    "baseUrl": "resources",
-    /**
-     * Resolve aliases
-     */
-    "paths": {
-      "@fonts/*": ["fonts/*"],
-      "@images/*": ["images/*"],
-      "@scripts/*": ["scripts/*"],
-      "@styles/*": ["styles/*"]
-    },
-    /**
-     * Type definitions
-     */
-    "types": [
-      "@roots/bud",
-      "@roots/bud-react",
-      "@roots/bud-postcss",
-      "@roots/bud-preset-recommend",
-      "@roots/bud-preset-wordpress",
-      "@roots/bud-wordpress-theme-json",
-      "@roots/sage"
-    ]
-  },
-  "files": ["bud.config.js"],
-  "include": ["resources"],
-  "exclude": ["node_modules", "public"]
-}

package.json

@@ -1,16 +1,13 @@
 {
   "name": "sage",
   "private": true,
-  "browserslist": [
-    "extends @roots/browserslist-config"
-  ],
   "engines": {
     "node": ">=20.0.0"
   },
   "type": "module",
   "scripts": {
-    "dev": "bud dev",
+    "dev": "vite",
-    "build": "bud build",
+    "build": "vite build",
     "translate": "npm run translate:pot && npm run translate:update",
     "translate:pot": "wp i18n make-pot . ./resources/lang/sage.pot --include=\"theme.json,patterns,app,resources\"",
     "translate:update": "for file in ./resources/lang/*.po; do wp i18n update-po ./resources/lang/sage.pot $file; done",
@@ -19,9 +16,9 @@
     "translate:mo": "wp i18n make-mo ./resources/lang ./resources/lang"
   },
   "devDependencies": {
-    "@roots/bud": "6.23.3",
+    "@roots/vite-plugin": "^1.0.2",
-    "@roots/bud-sass": "^6.23.3",
+    "laravel-vite-plugin": "^1.2.0",
-    "@roots/sage": "6.23.3"
+    "sass": "^1.93.2",
-  },
+    "vite": "^6.2.0"
-  "dependencies": {}
+  }
 }

resources/css/app.scss

@@ -0,0 +1,26 @@
+// Global Variables, Mixins, and Framework
+@use "global/variables";
+@use "global/mixins";
+@use "global/fonts";
+@use "global/typography";
+@use "global/framework";
+
+// Third Party Plugins
+@use "plugins/contact-form-7";
+@use "plugins/mce";
+
+// Sections
+@use "sections/header";
+@use "sections/footer";
+
+// Components
+@use "components/forms";
+@use "components/button";
+@use "components/card";
+
+// Blocks
+@use "blocks/BadExample";
+
+// Page Styles
+@use "views/page";
+

resources/css/components/_button.scss

@@ -1,3 +1,6 @@
+@use "../global/fonts";
+@use "../global/variables/colours";
+
 button {
   &%block,
   &.block {
@@ -19,11 +22,11 @@ input[type="submit"] {
 .button {
   display: inline-block;
   padding: 0.5em 1.25em;
-  border: 0.125em solid $black;
+  border: 0.125em solid colours.$black;
   border-radius: 0.25em;
-  background-color: $black;
+  background-color: colours.$black;
-  color: $white;
+  color: colours.$white;
-  font-family: $font;
+  font-family: fonts.$font;
   font-weight: 700;
   text-decoration: none;
   white-space: normal;
@@ -31,45 +34,45 @@ input[type="submit"] {
   transition: 300ms ease all;
 
   .knockout & {
-    background-color: $white;
+    background-color: colours.$white;
-    border-color: $white;
+    border-color: colours.$white;
     color: currentcolor;
   }
 
   &:hover,
   &:focus {
-    color: $white;
+    color: colours.$white;
     text-decoration: none;
-    background-color: rgba($black, 0.5);
+    background-color: rgba(colours.$black, 0.5);
-    border-color: rgba($black, 0.5);
+    border-color: rgba(colours.$black, 0.5);
 
     .knockout & {
-      background-color: rgba($white, 0.5);
+      background-color: rgba(colours.$white, 0.5);
-      border-color: rgba($white, 0.5);
+      border-color: rgba(colours.$white, 0.5);
       color: currentcolor;
     }
   }
 
   &.outline {
-    border-color: $black;
+    border-color: colours.$black;
     background-color: transparent;
-    color: $black;
+    color: colours.$black;
 
     &:hover,
     &:focus {
-      background-color: $black;
+      background-color: colours.$black;
-      color: $white;
+      color: colours.$white;
     }
 
     .knockout & {
       @media screen {
-        border-color: $white;
+        border-color: colours.$white;
-        color: $white;
+        color: colours.$white;
 
         &:hover,
         &:focus {
-          background-color: $white;
+          background-color: colours.$white;
-          color: $black;
+          color: colours.$black;
         }
       }
     }

resources/css/components/_forms.scss

@@ -1,28 +1,32 @@
+@use "../global/fonts";
+@use "../global/variables/breakpoints";
+@use "../global/variables/colours";
+
 textarea {
   min-height: 10.375em;
 }
 
 input,
 textarea {
-  color: $grey;
+  color: colours.$grey;
   background: white;
   font-weight: 400;
   font-size: 1em;
-  font-family: $font;
+  font-family: fonts.$font;
   width: 100%;
   padding: 0.875em 1em;
   margin: 0 0 1em;
   // border-radius: 0.125em;
-  border: 0.0625em solid rgba($black, 0.1);
+  border: 0.0625em solid rgba(colours.$black, 0.1);
   outline: none;
   transition: all 300ms ease;
 
   &::placeholder {
-    color: $grey-light;
+    color: colours.$grey-light;
   }
 
   &:focus {
-    box-shadow: 0 0.25em 0.5em rgba($black, 0.1);
+    box-shadow: 0 0.25em 0.5em rgba(colours.$black, 0.1);
   }
 }
 
@@ -71,11 +75,11 @@ select {
     max-width: 100%;
     width: 100%;
     margin: 0;
-    font-family: $font;
+    font-family: fonts.$font;
   }
   /* stylelint-enable selector-class-pattern */
 
-  @media (min-width: $screen-sm) {
+  @media (min-width: breakpoints.$screen-sm) {
     &.half {
       flex: 0 0 calc(50% - 1em);
       max-width: calc(50% - 1em);
@@ -107,7 +111,7 @@ select {
     margin: 2em 0 0;
   }
 
-  @media (min-width: $screen-sm) {
+  @media (min-width: breakpoints.$screen-sm) {
     display: flex;
     flex-wrap: wrap;
 
@@ -164,8 +168,8 @@ select {
       }
 
       &-not-valid-tip {
-        background: $error;
+        background: colours.$error;
-        color: $white;
+        color: colours.$white;
         padding: 0.5em 1em;
         border-radius: 0 0 0.5em 0.5em;
         font-weight: 700;
@@ -177,11 +181,11 @@ select {
         width: calc(100% - 1em);
         flex: 0 0 calc(100% - 1em);
         text-align: center;
-        color: $white;
+        color: colours.$white;
-        font-family: $font;
+        font-family: fonts.$font;
         font-weight: 700;
-        background: $black;
+        background: colours.$black;
-        border: 0.125em solid $white;
+        border: 0.125em solid colours.$white;
         padding: 0.5em 1em;
         border-radius: 0.5em;
       }
@@ -207,7 +211,7 @@ select {
           display: block;
           width: 1.25em;
           height: 1.25em;
-          border: 0.125em solid $black;
+          border: 0.125em solid colours.$black;
           background: transparent;
           color: currentcolor;
 
@@ -250,15 +254,15 @@ select {
 
     &.sent {
       .wpcf7-response-output {
-        background: $success;
+        background: colours.$success;
-        border-color: $white;
+        border-color: colours.$white;
       }
     }
 
     &.invalid {
       .wpcf7-response-output {
-        background: $error;
+        background: colours.$error;
-        border-color: $white;
+        border-color: colours.$white;
       }
     }
 
@@ -277,7 +281,7 @@ select {
       .wpcf7 {
         &-checkbox {
           input[type="checkbox"] {
-            border-color: $white;
+            border-color: colours.$white;
           }
         }
       }

resources/css/global/_fonts.scss

@@ -21,8 +21,8 @@ $font: "Ubuntu", Helvetica, Arial, sans-serif;
   font-family: 'Ubuntu';
   font-style: normal;
   font-weight: 400;
-  src: url('~fonts/ubuntu-v20-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
+  src: url('../fonts/ubuntu-v20-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
-       url('~fonts/ubuntu-v20-latin-regular.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+       url('../fonts/ubuntu-v20-latin-regular.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 
 /* ubuntu-italic - latin */
@@ -31,8 +31,8 @@ $font: "Ubuntu", Helvetica, Arial, sans-serif;
   font-family: 'Ubuntu';
   font-style: italic;
   font-weight: 400;
-  src: url('~fonts/ubuntu-v20-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
+  src: url('../fonts/ubuntu-v20-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
-       url('~fonts/ubuntu-v20-latin-italic.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+       url('../fonts/ubuntu-v20-latin-italic.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 
 /* ubuntu-700 - latin */
@@ -41,8 +41,8 @@ $font: "Ubuntu", Helvetica, Arial, sans-serif;
   font-family: 'Ubuntu';
   font-style: normal;
   font-weight: 700;
-  src: url('~fonts/ubuntu-v20-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
+  src: url('../fonts/ubuntu-v20-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
-       url('~fonts/ubuntu-v20-latin-700.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+       url('../fonts/ubuntu-v20-latin-700.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 
 /* ubuntu-700italic - latin */
@@ -51,6 +51,6 @@ $font: "Ubuntu", Helvetica, Arial, sans-serif;
   font-family: 'Ubuntu';
   font-style: italic;
   font-weight: 700;
-  src: url('~fonts/ubuntu-v20-latin-700italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
+  src: url('../fonts/ubuntu-v20-latin-700italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
-       url('~fonts/ubuntu-v20-latin-700italic.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+       url('../fonts/ubuntu-v20-latin-700italic.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }

resources/css/global/_framework.scss

@@ -0,0 +1,4 @@
+@use "framework/breakpoints";
+@use "framework/normalise";
+@use "framework/colours";
+@use "framework/spacing";

resources/css/global/_mixins.scss

@@ -0,0 +1,4 @@
+@use "mixins/linear-gradient";
+@use "mixins/text-contrast";
+@use "mixins/generate-colour-classes";
+@use "mixins/generate-button-classes";

resources/css/global/_typography.scss

@@ -1,3 +1,8 @@
+@use "fonts";
+@use "variables/breakpoints";
+@use "variables/colours";
+@use "variables/spacing";
+
 .wysiwyg {
   *:first-child {
     margin-top: 0;
@@ -14,9 +19,9 @@ h3,
 h4,
 h5,
 h6 {
-  color: $primary;
+  color: colours.$primary;
   font-weight: 700;
-  font-family: $font;
+  font-family: fonts.$font;
   line-height: 1.1em;
   margin: 1.5em 0 0.25em;
   padding: 0;
@@ -27,7 +32,7 @@ h6 {
 
   @media screen {
     .knockout & {
-      color: $white;
+      color: colours.$white;
     }
   }
 }
@@ -43,7 +48,7 @@ h3 { font-size: 1.25em; }
 h4,
 h5 { font-size: 1.15em; }
 
-@media (min-width: $screen-sm) {
+@media (min-width: breakpoints.$screen-sm) {
   h1 { font-size: 2.5em; }
   h2 { font-size: 2em; }
   h3 { font-size: 1.5em; }
@@ -58,8 +63,8 @@ p,
 li,
 td,
 label {
-  color: $grey;
+  color: colours.$grey;
-  font-family: $font;
+  font-family: fonts.$font;
   font-weight: 400;
   line-height: 1.5em;
   margin: 0 0 0.8em;
@@ -67,30 +72,30 @@ label {
 
   @media screen {
     .knockout & {
-      color: $white;
+      color: colours.$white;
     }
   }
 }
 
 a {
-  color: $primary;
+  color: colours.$primary;
   text-decoration: none;
   outline: none;
   transition: all 300ms ease;
 
   &:hover,
   &:focus {
-    color: $primary-dark;
+    color: colours.$primary-dark;
     text-decoration: none;
   }
 
   @media screen {
     .knockout & {
-      color: $white;
+      color: colours.$white;
 
       &:hover,
       &:focus {
-        color: $primary-light;
+        color: colours.$primary-light;
       }
     }
   }
@@ -126,12 +131,12 @@ ol {
 hr {
   margin: 1.5em auto 2em;
   height: 0;
-  border: 0 solid $grey-light;
+  border: 0 solid colours.$grey-light;
-  border-width: $borderThin 0 0;
+  border-width: spacing.$borderThin 0 0;
 
   @media screen {
     .knockout & {
-      border-color: $white;
+      border-color: colours.$white;
     }
   }
 }

resources/css/global/_variables.scss

@@ -0,0 +1,3 @@
+@use "variables/colours";
+@use "variables/breakpoints";
+@use "variables/spacing";

resources/css/global/framework/_breakpoints.scss

@@ -1,4 +1,6 @@
-@each $label, $value in $breakpoints {
+@use "../variables/breakpoints";
+
+@each $label, $value in breakpoints.$breakpoints {
   .min-#{$label} {
     @media (min-width: $value) {
       display: none;

resources/css/global/framework/_colours.scss

@@ -0,0 +1,13 @@
+@use "../mixins/generate-button-classes";
+@use "../mixins/generate-colour-classes";
+@use "../variables/colours";
+
+::selection {
+  color: colours.$white;
+  background: colours.$primary;
+}
+
+@each $color, $hex in colours.$colors {
+  @include generate-colour-classes.generate_colour_classes($color, $hex);
+  @include generate-button-classes.generate_button_colors($color, $hex);
+}

resources/css/global/framework/_normalise.scss

@@ -1,3 +1,5 @@
+@use "../variables/colours";
+
 * {
   box-sizing: border-box;
   backface-visibility: hidden; // removes jagged edges on rotated elements
@@ -11,7 +13,7 @@ body,
 html {
   margin: 0;
   padding: 0;
-  background: $white;
+  background: colours.$white;
 }
 
 .visually-hidden {

resources/css/global/framework/_spacing.scss

@@ -1,23 +1,26 @@
+@use "../variables/colours";
+@use "../variables/spacing";
+
 .brand {
   display: block;
-  width: $brandWidth;
+  width: spacing.$brandWidth;
-  height: $brandHeight;
+  height: spacing.$brandHeight;
 
   svg,
   img {
     display: block;
-    width: $brandWidth;
+    width: spacing.$brandWidth;
-    height: $brandHeight;
+    height: spacing.$brandHeight;
   }
 
   .knockout & {
     @media screen {
       .fill-primary {
-        fill: $white;
+        fill: colours.$white;
       }
 
       .fill-grey {
-        fill: rgba($white, 0.8);
+        fill: rgba(colours.$white, 0.8);
       }
     }
   }
@@ -27,28 +30,28 @@
   width: 90%;
   margin: auto;
 
-  &-large { max-width: $containerLarge; }
+  &-large { max-width: spacing.$containerLarge; }
-  &-medium { max-width: $containerMedium; }
+  &-medium { max-width: spacing.$containerMedium; }
-  &-small { max-width: $containerSmall; }
+  &-small { max-width: spacing.$containerSmall; }
-  &-narrow { max-width: $containerNarrow; }
+  &-narrow { max-width: spacing.$containerNarrow; }
 }
 
 .section {
-  padding: $sectionMedium 0;
+  padding: spacing.$sectionMedium 0;
 
-  &-small { padding: $sectionSmall 0; }
+  &-small { padding: spacing.$sectionSmall 0; }
-  &-medium { padding: $sectionMedium 0; }
+  &-medium { padding: spacing.$sectionMedium 0; }
-  &-large { padding: $sectionLarge 0; }
+  &-large { padding: spacing.$sectionLarge 0; }
 
   &-zero-top { padding-top: 0; }
   &-zero-bottom { padding-bottom: 0; }
 }
 
 .inner {
-  padding: $innerMedium;
+  padding: spacing.$innerMedium;
 
-  &-small { padding: $innerSmall; }
+  &-small { padding: spacing.$innerSmall; }
-  &-large { padding: $innerLarge; }
+  &-large { padding: spacing.$innerLarge; }
 
   &-zero-x {
     padding-left: 0;
@@ -62,7 +65,7 @@
 }
 
 .rounded {
-  border-radius: $borderRadius;
+  border-radius: spacing.$borderRadius;
 
   &-top {
     border-bottom-right-radius: 0;
@@ -77,12 +80,12 @@
 
 .border {
   border-style: solid;
-  border-width: $borderWidth;
+  border-width: spacing.$borderWidth;
 
   &-thin { border-width: 0.0625em; }
-  &-regular { border-width: $borderWidth; }
+  &-regular { border-width: spacing.$borderWidth; }
-  &-thick { border-width: $borderThick; }
+  &-thick { border-width: spacing.$borderThick; }
-  &-thicker { border-width: $borderThicker; }
+  &-thicker { border-width: spacing.$borderThicker; }
 
   &-top {
     border-right-width: 0;

resources/css/global/mixins/_generate-button-classes.scss

@@ -1,3 +1,5 @@
+@use "../variables/colours";
+
 @use "sass:color";
 
 @mixin generate_button_colors($name, $hex) {
@@ -10,13 +12,13 @@
 
   @each $button in $buttons {
     #{$button}.#{$name} {
-      color: $white;
+      color: colours.$white;
       background: $hex;
       border-color: $hex;
 
       &:hover,
       &:focus {
-        color: $white;
+        color: colours.$white;
         background: color.adjust($hex, $lightness: 10%);
         border-color: color.adjust($hex, $lightness: 10%);
       }

resources/css/global/mixins/_generate-colour-classes.scss

@@ -1,3 +1,5 @@
+@use "text-contrast";
+
 @use "sass:color";
 
 @mixin generate_colour_classes($name, $hex) {
@@ -18,7 +20,7 @@
       background-color: $hex;
 
       ::selection {
-        @include text_contrast(color.invert($hex));
+        @include text-contrast.text_contrast(color.invert($hex));
         background: color.invert($hex);
       }
     }

resources/css/global/mixins/_text-contrast.scss

@@ -0,0 +1,17 @@
+@use "../variables/colours";
+
+@use "sass:color";
+@use "sass:math";
+
+@mixin text-contrast($n, $dark: colours.$black, $light: colours.$white, $cutoff: 1.667) {
+  $brightness: math.round((color.channel($n, "red") * 299) + (color.channel($n, "green") * 587) + math.div((color.channel($n, "blue") * 114), 1000));
+  $light-color: math.round((color.channel(colours.$white, "red") * 299) + (color.channel(colours.$white, "green") * 587) + math.div((color.channel(colours.$white, "blue") * 114), 1000));
+
+  @if math.abs($brightness) < (math.div($light-color, $cutoff)) {
+    color: $light;
+  }
+
+  @else {
+    color: $dark;
+  }
+}

resources/css/global/variables/_colours.scss

@@ -8,8 +8,8 @@ $alert: #eed202;
 //== Brand Colours
 $primary: #337ab7;
 $secondary: #5bc0de;
-$tertiary: invert($primary);
+$tertiary: color.invert($primary);
-$quaternary: invert($secondary);
+$quaternary: color.invert($secondary);
 
 //== Primary Tints
 $primary-darkest: color.adjust($primary, $lightness: -30%);

resources/css/global/variables/_spacing.scss

@@ -2,6 +2,9 @@
 
 $offCanvasWidth:      17.5em;
 
+$brandWidth:          9em !default;
+$brandHeight:         3em !default;
+
 $tileAspectRatio:     math.div(400, 640) * 100%;
 $heroAspectRatio:     math.div(593, 1920) * 100vw;
 $slideAspectRatio:    math.div(733, 1920) * 100vw;

resources/css/plugins/_contact-form-7.scss

@@ -0,0 +1,24 @@
+@use "../global/variables/colours";
+
+.wpcf7 .screen-reader-response {
+  display: none;
+}
+
+.wpcf7-response-output {
+  @extend p !optional;
+  @extend .container !optional;
+  @extend .container-narrow !optional;
+
+  padding: 1em 0 0;
+  margin-top: 2em;
+  border: 1px solid colours.$grey-light;
+  border-width: 1px 0 0;
+
+  .knockout & {
+    border-color: rgba(colours.$white, 0.3);
+  }
+}
+
+.wpcf7-display-none {
+  display: none;
+}

resources/css/plugins/_mce.scss

@@ -1,12 +1,14 @@
+@use "../global/variables/colours";
+
 #mce-responses {
   .response {
     padding: 0 0 1em;
     margin: 0 0 1em;
     font-size: 0.875em;
-    border-bottom: 1px solid $grey-lighter;
+    border-bottom: 1px solid colours.$grey-lighter;
   }
 }
 
 .knockout #mce-responses .response {
-  border-bottom-color: rgba($white, 0.3);
+  border-bottom-color: rgba(colours.$white, 0.3);
 }

resources/js/app.js

@@ -1,4 +1,9 @@
-import domReady from '@roots/sage/client/dom-ready';
+import.meta.glob([
+  '../images/**',
+  '../fonts/**',
+]);
+
+import domReady from '@wordpress/dom-ready';
 import blocks from './blocks.js';
 import Header from './sections/header.js';
 import LazyLoad from './lib/Lazy.js';
@@ -11,8 +16,3 @@ domReady(async () => {
   blocks();
   Header();
 });
-
-/**
- * @see {@link https://webpack.js.org/api/hot-module-replacement/}
- */
-if (import.meta.webpackHot) import.meta.webpackHot.accept(console.error);

resources/js/editor.js

@@ -0,0 +1,5 @@
+import domReady from '@wordpress/dom-ready';
+
+domReady(() => {
+  //
+});

resources/scripts/editor.js

@@ -1,9 +0,0 @@
-/**
- * @see {@link https://bud.js.org/extensions/bud-preset-wordpress/editor-integration/filters}
- */
-roots.register.filters('@scripts/filters');
-
-/**
- * @see {@link https://webpack.js.org/api/hot-module-replacement/}
- */
-if (import.meta.webpackHot) import.meta.webpackHot.accept(console.error);

resources/scripts/filters/button.filter.js

@@ -1,25 +0,0 @@
-/**
- * @see {@link https://developer.wordpress.org/block-editor/reference-guides/filters/block-filters/#blocks-registerblocktype}
- */
-export const hook = 'blocks.registerBlockType';
-
-/**
- * Filter handle
- */
-export const name = 'sage/button';
-
-/**
- * Filter callback
- *
- * @param {object} settings
- * @param {string} name
- * @returns modified settings
- */
-export function callback(settings, name) {
-  if (name !== 'core/button') return settings;
-
-  return {
-    ...settings,
-    styles: [{ label: 'Outline', name: 'outline' }],
-  };
-}

resources/styles/app.scss

@@ -1,26 +0,0 @@
-// Global Variables, Mixins, and Framework
-@import "global/variables";
-@import "global/mixins";
-@import "global/fonts";
-@import "global/typography";
-@import "global/framework";
-
-// Third Party Plugins
-@import "plugins/contact-form-7";
-@import "plugins/mce";
-
-// Sections
-@import "sections/header";
-@import "sections/footer";
-
-// Components
-@import "components/forms";
-@import "components/button";
-@import "components/card";
-
-// Blocks
-@import "blocks/BadExample";
-
-// Page Styles
-@import "views/page";
-

resources/styles/global/_framework.scss

@@ -1,4 +0,0 @@
-@import "framework/breakpoints";
-@import "framework/normalise";
-@import "framework/colours";
-@import "framework/spacing";

resources/styles/global/_mixins.scss

@@ -1,4 +0,0 @@
-@import "mixins/linear-gradient";
-@import "mixins/text-contrast";
-@import "mixins/generate-colour-classes";
-@import "mixins/generate-button-classes";

resources/styles/global/_variables.scss

@@ -1,3 +0,0 @@
-@import "variables/colours";
-@import "variables/breakpoints";
-@import "variables/spacing";

resources/styles/global/framework/_colours.scss

@@ -1,9 +0,0 @@
-::selection {
-  color: $white;
-  background: $primary;
-}
-
-@each $color, $hex in $colors {
-  @include generate_colour_classes($color, $hex);
-  @include generate_button_colors($color, $hex);
-}

resources/styles/global/mixins/_text-contrast.scss

@@ -1,15 +0,0 @@
-@use "sass:color";
-@use "sass:math";
-
-@mixin text-contrast($n, $dark: $black, $light: $white, $cutoff: 1.667) {
-  $brightness: math.round((color.red($n) * 299) + (color.green($n) * 587) + math.div((color.blue($n) * 114), 1000));
-  $light-color: math.round((color.red($white) * 299) + (color.green($white) * 587) + math.div((color.blue($white) * 114), 1000));
-
-  @if abs($brightness) < (math.div($light-color, $cutoff)) {
-    color: $light;
-  }
-
-  @else {
-    color: $dark;
-  }
-}

resources/styles/plugins/_contact-form-7.scss

@@ -1,22 +0,0 @@
-.wpcf7 .screen-reader-response {
-  display: none;
-}
-
-.wpcf7-response-output {
-  @extend p;
-  @extend .container;
-  @extend .container-narrow;
-
-  padding: 1em 0 0;
-  margin-top: 2em;
-  border: 1px solid $grey-light;
-  border-width: 1px 0 0;
-
-  .knockout & {
-    border-color: rgba($white, 0.3);
-  }
-}
-
-.wpcf7-display-none {
-  display: none;
-}

resources/views/layouts/app.blade.php

@@ -5,6 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     @php(do_action('get_header'))
     @php(wp_head())
+
+    @vite(['resources/css/app.scss', 'resources/js/app.js'])
   </head>
 
   <body @php(body_class())>

resources/views/partials/comments.blade.php

@@ -1,6 +1,6 @@
 @if (! post_password_required())
   <section id="comments" class="comments">
-    @if ($responses)
+    @if ($responses())
       <h2>
         {!! $title !!}
       </h2>
@@ -9,16 +9,16 @@
         {!! $responses !!}
       </ol>
 
-      @if ($paginated)
+      @if ($paginated())
         <nav aria-label="Comment">
           <ul class="pager">
-            @if ($previous)
+            @if ($previous())
               <li class="previous">
                 {!! $previous !!}
               </li>
             @endif
 
-            @if ($next)
+            @if ($next())
               <li class="next">
                 {!! $next !!}
               </li>
@@ -28,7 +28,7 @@
       @endif
     @endif
 
-    @if ($closed)
+    @if ($closed())
       <x-alert type="warning">
         {!! __('Comments are closed.', 'sage') !!}
       </x-alert>

resources/views/partials/content-page.blade.php

@@ -1,6 +1,6 @@
 @php(the_content())
 
-@if ($pagination)
+@if ($pagination())
   <nav class="page-nav" aria-label="Page">
     {!! $pagination !!}
   </nav>

resources/views/partials/content-single.blade.php

@@ -11,7 +11,7 @@
     @php(the_content())
   </div>
 
-  @if ($pagination)
+  @if ($pagination())
     <footer>
       <nav class="page-nav" aria-label="Page">
         {!! $pagination !!}

style.css

@@ -1,13 +1,13 @@
 /*
 Theme Name:         Bad Egg Digital
-Theme URI:          https://www.badegg.uk
+Theme URI:          https://www.badegg.uk/?utm_source=wp_theme
 Description:        A bespoke Wordpress theme using Roots' Sage as a starting point.
-Version:            10.x-dev
+Version:            11.0.1
 Author:             Steve Ross
-Author URI:         https://badegg.uk/about/steve-ross
+Author URI:         https://badegg.uk/about/steve-ross/?utm_source=wp_theme
 Text Domain:        sage
 License:            MIT License
 License URI:        https://opensource.org/licenses/MIT
-Requires PHP:       8.1
+Requires PHP:       8.2
-Requires at least:  5.9
+Requires at least:  6.6
 */

theme.json

@@ -1,8 +1,11 @@
 {
-  "__generated__": "⚠️ This file is generated. Do not edit.",
+  "__preprocessed__": "This file is used to build the theme.json file in the `public/build/assets` directory. The built artifact includes Tailwind's colors, fonts, and font sizes.",
   "$schema": "https://schemas.wp.org/trunk/theme.json",
-  "version": 2,
+  "version": 3,
   "settings": {
+    "layout": {
+      "contentSize": "48rem"
+    },
     "background": {
       "backgroundImage": true
     },
@@ -24,17 +27,11 @@
     },
     "spacing": {
       "padding": true,
-      "units": [
+      "units": ["px", "%", "em", "rem", "vw", "vh"]
-        "px",
-        "%",
-        "em",
-        "rem",
-        "vw",
-        "vh"
-      ]
     },
     "typography": {
+      "defaultFontSizes": false,
       "customFontSize": false
     }
   }
-}
+}

vite.config.js

@@ -0,0 +1,37 @@
+import { defineConfig } from 'vite'
+import laravel from 'laravel-vite-plugin'
+import { wordpressPlugin, wordpressThemeJson } from '@roots/vite-plugin';
+
+export default defineConfig({
+  base: '/app/themes/sage/public/build/',
+  plugins: [
+    laravel({
+      input: [
+        'resources/css/app.scss',
+        'resources/js/app.js',
+        'resources/css/editor.scss',
+        'resources/js/editor.js',
+      ],
+      refresh: true,
+      url: process.env.APP_URL,
+    }),
+
+    wordpressPlugin(),
+
+    // Generate the theme.json file in the public/build/assets directory
+    // based on the Tailwind config and the theme.json file from base theme folder
+    wordpressThemeJson({
+      disableTailwindColors: true,
+      disableTailwindFonts: true,
+      disableTailwindFontSizes: true,
+    }),
+  ],
+  resolve: {
+    alias: {
+      '@scripts': '/resources/js',
+      '@styles': '/resources/css',
+      '@fonts': '/resources/fonts',
+      '@images': '/resources/images',
+    },
+  },
+})