add base framework styles

2024-11-05 17:19:47 +00:00
parent 2204d6691c
commit 6cd48fdd31
33 changed files with 1011 additions and 8 deletions
--- a/bud.config.js
+++ b/bud.config.js
@@ -33,8 +33,8 @@ export default async (app) => {
   * @see {@link https://bud.js.org/reference/bud.watch}
   */
  app
-    .setUrl('http://localhost:3000')
-    .setProxyUrl('http://example.test')
+    .setUrl('https://localhost:3000')
+    .setProxyUrl('https://badegg-bedrock.localhost.1fp.ltd')
    .watch(['resources/views', 'app']);

  /**
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
  },
  "devDependencies": {
    "@roots/bud": "6.23.3",
+    "@roots/bud-sass": "^6.23.3",
    "@roots/sage": "6.23.3"
  },
  "dependencies": {}
--- a/resources/fonts/ubuntu-v20-latin-700.woff
+++ b/resources/fonts/ubuntu-v20-latin-700.woff
--- a/resources/fonts/ubuntu-v20-latin-700.woff2
+++ b/resources/fonts/ubuntu-v20-latin-700.woff2
--- a/resources/fonts/ubuntu-v20-latin-700italic.woff
+++ b/resources/fonts/ubuntu-v20-latin-700italic.woff
--- a/resources/fonts/ubuntu-v20-latin-700italic.woff2
+++ b/resources/fonts/ubuntu-v20-latin-700italic.woff2
--- a/resources/fonts/ubuntu-v20-latin-italic.woff
+++ b/resources/fonts/ubuntu-v20-latin-italic.woff
--- a/resources/fonts/ubuntu-v20-latin-italic.woff2
+++ b/resources/fonts/ubuntu-v20-latin-italic.woff2
--- a/resources/fonts/ubuntu-v20-latin-regular.woff
+++ b/resources/fonts/ubuntu-v20-latin-regular.woff
--- a/resources/fonts/ubuntu-v20-latin-regular.woff2
+++ b/resources/fonts/ubuntu-v20-latin-regular.woff2
--- a/resources/styles/app.scss
+++ b/resources/styles/app.scss
@@ -0,0 +1,16 @@
+// 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";
+
+// Page Styles
+@import "views/page";
+
+// Component Styles
+@import "components/card";
--- a/resources/styles/components/_card.scss
+++ b/resources/styles/components/_card.scss
@@ -0,0 +1,8 @@
+.card {
+  position: relative;
+  margin: 0.5em;
+
+  &-wrap {
+    margin: -0.5em;
+  }
+}
--- a/resources/styles/editor.scss
+++ b/resources/styles/editor.scss
--- a/resources/styles/global/_fonts.scss
+++ b/resources/styles/global/_fonts.scss
@@ -0,0 +1,56 @@
+$font: "Ubuntu", Helvetica, Arial, sans-serif;
+
+/*
+ * Roots Fonts Setup
+ * https://roots.io/sage/docs/fonts-setup/
+ *
+ * Self-Hosted Google Fonts (Ubuntu Demo)
+ * https://gwfh.mranftl.com/fonts/ubuntu?subsets=latin
+ *
+ * Add the font to your Tailwind config
+ * tailwind.config.cjs
+ *
+ * Configure theme.json to use the font with Bud
+ */
+
+/* stylelint-disable */
+
+/* ubuntu-regular - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  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+ */
+       url('~fonts/ubuntu-v20-latin-regular.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* ubuntu-italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  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+ */
+       url('~fonts/ubuntu-v20-latin-italic.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* ubuntu-700 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  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+ */
+       url('~fonts/ubuntu-v20-latin-700.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* ubuntu-700italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  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+ */
+       url('~fonts/ubuntu-v20-latin-700italic.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
--- a/resources/styles/global/_framework.scss
+++ b/resources/styles/global/_framework.scss
@@ -0,0 +1,4 @@
+@import "framework/breakpoints";
+@import "framework/normalise";
+@import "framework/colours";
+@import "framework/spacing";
--- a/resources/styles/global/_mixins.scss
+++ b/resources/styles/global/_mixins.scss
@@ -0,0 +1,4 @@
+@import "mixins/linear-gradient";
+@import "mixins/text-contrast";
+@import "mixins/generate-colour-classes";
+@import "mixins/generate-button-classes";
--- a/resources/styles/global/_typography.scss
+++ b/resources/styles/global/_typography.scss
@@ -0,0 +1,137 @@
+.wysiwyg {
+  *:first-child {
+    margin-top: 0;
+  }
+
+  *:last-child {
+    margin-bottom: 0;
+  }
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: $primary;
+  font-weight: 700;
+  font-family: $font;
+  line-height: 1.1em;
+  margin: 1.5em 0 0.25em;
+  padding: 0;
+
+  &.section-title {
+    margin-top: 0;
+  }
+
+  @media screen {
+    .knockout & {
+      color: $white;
+    }
+  }
+}
+
+h1 {
+  font-size: 1.75em;
+  margin-top: 0;
+}
+
+h2 { font-size: 1.5em; }
+h3 { font-size: 1.25em; }
+
+h4,
+h5 { font-size: 1.15em; }
+
+@media (min-width: $screen-sm) {
+  h1 { font-size: 2.5em; }
+  h2 { font-size: 2em; }
+  h3 { font-size: 1.5em; }
+
+  h4,
+  h5 {
+    font-size: 1.25em;
+  }
+}
+
+p,
+li,
+td,
+label {
+  color: $grey;
+  font-family: $font;
+  font-weight: 400;
+  line-height: 1.5em;
+  margin: 0 0 0.8em;
+  padding: 0;
+
+  @media screen {
+    .knockout & {
+      color: $white;
+    }
+  }
+}
+
+a {
+  color: $primary;
+  text-decoration: none;
+  outline: none;
+  transition: all 300ms ease;
+
+  &:hover,
+  &:focus {
+    color: $primary-dark;
+    text-decoration: none;
+  }
+
+  @media screen {
+    .knockout & {
+      color: $white;
+
+      &:hover,
+      &:focus {
+        color: $primary-light;
+      }
+    }
+  }
+}
+
+strong { font-weight: 700; }
+small { font-size: 0.8em; }
+
+li {
+  margin: 0.125em 0;
+  line-height: 1.5em;
+}
+
+ul,
+ol {
+  margin: 0 0 0.7em;
+  padding: 0 0 0 1.2em;
+  text-align: left;
+}
+
+.nolist {
+  margin: 0;
+  padding: 0;
+  text-align: inherit;
+  list-style: none;
+
+  li {
+    margin: 0;
+    padding: 0;
+  }
+}
+
+hr {
+  margin: 1.5em auto 2em;
+  height: 0;
+  border: 0 solid $grey-light;
+  border-width: $borderThin 0 0;
+
+  @media screen {
+    .knockout & {
+      border-color: $white;
+    }
+  }
+}
--- a/resources/styles/global/_variables.scss
+++ b/resources/styles/global/_variables.scss
@@ -0,0 +1,3 @@
+@import "variables/colours";
+@import "variables/breakpoints";
+@import "variables/spacing";
--- a/resources/styles/global/framework/_breakpoints.scss
+++ b/resources/styles/global/framework/_breakpoints.scss
@@ -0,0 +1,13 @@
+@each $label, $value in $breakpoints {
+  .min-#{$label} {
+    @media (min-width: $value) {
+      display: none;
+    }
+  }
+
+  .max-#{$label} {
+    @media (max-width: ($value - 0.0625)) {
+      display: none;
+    }
+  }
+}
--- a/resources/styles/global/framework/_colours.scss
+++ b/resources/styles/global/framework/_colours.scss
@@ -0,0 +1,9 @@
+::selection {
+  color: $white;
+  background: $primary;
+}
+
+@each $color, $hex in $colors {
+  @include generate_colour_classes($color, $hex);
+  @include generate_button_colors($color, $hex);
+}
--- a/resources/styles/global/framework/_normalise.scss
+++ b/resources/styles/global/framework/_normalise.scss
@@ -0,0 +1,25 @@
+* {
+  box-sizing: border-box;
+  backface-visibility: hidden; // removes jagged edges on rotated elements
+}
+
+html {
+  font-size: 16px;
+}
+
+body,
+html {
+  margin: 0;
+  padding: 0;
+  background: $white;
+}
+
+.visually-hidden {
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
--- a/resources/styles/global/framework/_spacing.scss
+++ b/resources/styles/global/framework/_spacing.scss
@@ -0,0 +1,83 @@
+.container {
+  width: 90%;
+  margin: auto;
+
+  &-large { max-width: $containerLarge; }
+  &-medium { max-width: $containerMedium; }
+  &-small { max-width: $containerSmall; }
+  &-narrow { max-width: $containerNarrow; }
+}
+
+.section {
+  padding: $sectionSmall;
+
+  @media (min-width: $screen-md) {
+    padding: $sectionMedium;
+  }
+
+  @media (min-width: $screen-lg) {
+    padding: $sectionLarge;
+  }
+
+  &-small { padding: $sectionSmall; }
+  &-medium { padding: $sectionMedium; }
+  &-large { padding: $sectionLarge; }
+
+  &-zero-top { padding-top: 0; }
+  &-zero-bottom { padding-bottom: 0; }
+}
+
+.inner {
+  padding: $innerMedium;
+
+  &-small { padding: $innerSmall; }
+  &-large { padding: $innerLarge; }
+}
+
+.rounded {
+  border-radius: $borderRadius;
+
+  &-top {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  &-bottom {
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+}
+
+.border {
+  border-style: solid;
+  border-width: $borderWidth;
+
+  &-thin { border-width: 0.0625em; }
+  &-regular { border-width: $borderWidth; }
+  &-thick { border-width: $borderThick; }
+  &-thicker { border-width: $borderThicker; }
+
+  &-top {
+    border-right-width: 0;
+    border-bottom-width: 0;
+    border-left-width: 0;
+  }
+
+  &-right {
+    border-top-width: 0;
+    border-bottom-width: 0;
+    border-left-width: 0;
+  }
+
+  &-bottom {
+    border-top-width: 0;
+    border-right-width: 0;
+    border-left-width: 0;
+  }
+
+  &-left {
+    border-top-width: 0;
+    border-right-width: 0;
+    border-bottom-width: 0;
+  }
+}
--- a/resources/styles/global/mixins/_generate-button-classes.scss
+++ b/resources/styles/global/mixins/_generate-button-classes.scss
@@ -0,0 +1,66 @@
+@use "sass:color";
+
+@mixin generate_button_colors($name, $hex) {
+
+  $buttons: (
+    ".button",
+    "button",
+    "input[type=submit]",
+  );
+
+  @each $button in $buttons {
+    #{$button}.#{$name} {
+      color: $white;
+      background: $hex;
+      border-color: $hex;
+
+      &:hover,
+      &:focus {
+        color: $white;
+        background: color.adjust($hex, $lightness: 10%);
+        border-color: color.adjust($hex, $lightness: 10%);
+      }
+    }
+
+    #{$button}.#{$name}.inverted {
+      color: $hex;
+      background: transparent;
+      border-color: $hex;
+
+      &:hover,
+      &:focus {
+        color: white;
+        background: #{$hex};
+        border-color: #{$hex};
+      }
+    }
+
+    @media screen {
+      *:not(.bg-#{$name}) #{$button}.#{$name} {
+        color: white;
+        background-color: $hex;
+        border-color: $hex;
+
+        &:hover,
+        &:focus {
+          color: white;
+          background-color: color.adjust($hex, $lightness: 10%);
+          border-color: color.adjust($hex, $lightness: 10%);
+        }
+      }
+
+      .bg-#{$name} #{$button}.#{$name} {
+        color: $hex;
+        background: white;
+        border-color: white;
+
+        &:hover,
+        &:focus {
+          color: white;
+          background: transparent;
+          border-color: white;
+        }
+      }
+    }
+  }
+}
--- a/resources/styles/global/mixins/_generate-colour-classes.scss
+++ b/resources/styles/global/mixins/_generate-colour-classes.scss
@@ -0,0 +1,26 @@
+@use "sass:color";
+
+@mixin generate_colour_classes($name, $hex) {
+  .#{$name} {
+    color: $hex;
+  }
+
+  .fill-#{$name} {
+    fill: $hex;
+  }
+
+  .border-#{$name} {
+    border-color: $hex;
+  }
+
+  @media screen {
+    .bg-#{$name} {
+      background-color: $hex;
+
+      ::selection {
+        @include text_contrast(color.invert($hex));
+        background: color.invert($hex);
+      }
+    }
+  }
+}
--- a/resources/styles/global/mixins/_linear-gradient.scss
+++ b/resources/styles/global/mixins/_linear-gradient.scss
@@ -0,0 +1,5 @@
+// define as many $color-stops as needed
+@mixin linear-gradient($direction, $color-stops...) {
+  background: list.nth(list.nth($color-stops, 1), 1);
+  background: linear-gradient($direction, $color-stops);
+}
--- a/resources/styles/global/mixins/_text-contrast.scss
+++ b/resources/styles/global/mixins/_text-contrast.scss
@@ -0,0 +1,15 @@
+@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;
+  }
+}
--- a/resources/styles/global/variables/_breakpoints.scss
+++ b/resources/styles/global/variables/_breakpoints.scss
@@ -0,0 +1,33 @@
+@use "sass:math";
+
+$px: math.div(1, 16);
+
+$screen-xxs:   22.5em !default;
+$screen-xs:    30.0em !default;
+$screen-sm:    48.0em !default;
+$screen-md:    62.0em !default;
+$screen-lg:    75.0em !default;
+$screen-xl:    87.5em !default;
+$screen-xxl:   100.0em !default;
+$screen-xxxl:  120.0em !default;
+
+// So media queries don"t overlap when required
+$screen-xxs-max: ($screen-xs   - $px) !default;
+$screen-xs-max:  ($screen-sm   - $px) !default;
+$screen-sm-max:  ($screen-md   - $px) !default;
+$screen-md-max:  ($screen-lg   - $px) !default;
+$screen-lg-max:  ($screen-xl   - $px) !default;
+$screen-xl-max:  ($screen-xxl  - $px) !default;
+$screen-xxl-max: ($screen-xxxl - $px) !default;
+
+// Breakpoints
+$breakpoints: (
+  "screen-xxs":  $screen-xxs,
+  "screen-xs":   $screen-xs,
+  "screen-sm":   $screen-sm,
+  "screen-md":   $screen-md,
+  "screen-lg":   $screen-lg,
+  "screen-xl":   $screen-xl,
+  "screen-xxl":  $screen-xxl,
+  "screen-xxxl": $screen-xxxl,
+);
--- a/resources/styles/global/variables/_colours.scss
+++ b/resources/styles/global/variables/_colours.scss
@@ -0,0 +1,105 @@
+@use "sass:color";
+
+//== Status
+$success: #39b54a;
+$error: #be1e2d;
+$alert: #eed202;
+
+//== Brand Colours
+$primary: #337ab7;
+$secondary: #5bc0de;
+$tertiary: invert($primary);
+$quaternary: invert($secondary);
+
+//== Primary Tints
+$primary-darkest: color.adjust($primary, $lightness: -30%);
+$primary-darker: color.adjust($primary, $lightness: -20%);
+$primary-dark: color.adjust($primary, $lightness: -10%);
+$primary-light: color.adjust($primary, $lightness: 10%);
+$primary-lighter: color.adjust($primary, $lightness: 20%);
+$primary-lightest: color.adjust($primary, $lightness: 30%);
+
+//== Secondary Tints
+$secondary-darkest: color.adjust($secondary, $lightness: -30%);
+$secondary-darker: color.adjust($secondary, $lightness: -20%);
+$secondary-dark: color.adjust($secondary, $lightness: -10%);
+$secondary-light: color.adjust($secondary, $lightness: 10%);
+$secondary-lighter: color.adjust($secondary, $lightness: 20%);
+$secondary-lightest: color.adjust($secondary, $lightness: 30%);
+
+//== Tertiary Tints
+$tertiary-darkest: color.adjust($tertiary, $lightness: -30%);
+$tertiary-darker: color.adjust($tertiary, $lightness: -20%);
+$tertiary-dark: color.adjust($tertiary, $lightness: -10%);
+$tertiary-light: color.adjust($tertiary, $lightness: 10%);
+$tertiary-lighter: color.adjust($tertiary, $lightness: 20%);
+$tertiary-lightest: color.adjust($tertiary, $lightness: 30%);
+
+//== quaternary Tints
+$quaternary-darkest: color.adjust($quaternary, $lightness: -30%);
+$quaternary-darker: color.adjust($quaternary, $lightness: -20%);
+$quaternary-dark: color.adjust($quaternary, $lightness: -10%);
+$quaternary-light: color.adjust($quaternary, $lightness: 10%);
+$quaternary-lighter: color.adjust($quaternary, $lightness: 20%);
+$quaternary-lightest: color.adjust($quaternary, $lightness: 30%);
+
+//== Shades
+$white:               white;
+$grey-lightest:       color.adjust(black, $lightness: 95%);
+$grey-lighter:        color.adjust(black, $lightness: 80%);
+$grey-light:          color.adjust(black, $lightness: 70%);
+$grey:                color.adjust(black, $lightness: 50%);
+$grey-dark:           color.adjust(black, $lightness: 40%);
+$grey-darker:         color.adjust(black, $lightness: 20%);
+$grey-darkest:        color.adjust(black, $lightness: 05%);
+$black:               black;
+
+//## Colour Array (used in generating colour classes).
+$colors: (
+  // shades
+  "black":     $black,
+  "grey-darkest": $grey-darkest,
+  "grey-darker": $grey-darker,
+  "grey-dark": $grey-dark,
+  "grey-light": $grey-light,
+  "grey-lighter": $grey-lighter,
+  "grey-lightest": $grey-lightest,
+  "white":     $white,
+  // status
+  "error":      $error,
+  "success":    $success,
+  "alert":      $alert,
+  // brand
+  "primary":    $primary,
+  "secondary":  $secondary,
+  "tertiary":   $tertiary,
+  "quaternary":   $quaternary,
+  // primary tints
+  "primary-darkest":  $primary-darkest,
+  "primary-darker":   $primary-darker,
+  "primary-dark":     $primary-dark,
+  "primary-light":    $primary-light,
+  "primary-lighter":  $primary-lighter,
+  "primary-lightest": $primary-lightest,
+  // secondary tints
+  "secondary-darkest":  $secondary-darkest,
+  "secondary-darker":   $secondary-darker,
+  "secondary-dark":     $secondary-dark,
+  "secondary-light":    $secondary-light,
+  "secondary-lighter":  $secondary-lighter,
+  "secondary-lightest": $secondary-lightest,
+  // tertiary tints
+  "tertiary-darkest":  $tertiary-darkest,
+  "tertiary-darker":   $tertiary-darker,
+  "tertiary-dark":     $tertiary-dark,
+  "tertiary-light":    $tertiary-light,
+  "tertiary-lighter":  $tertiary-lighter,
+  "tertiary-lightest": $tertiary-lightest,
+  // quaternary tints
+  "quaternary-darkest":  $quaternary-darkest,
+  "quaternary-darker":   $quaternary-darker,
+  "quaternary-dark":     $quaternary-dark,
+  "quaternary-light":    $quaternary-light,
+  "quaternary-lighter":  $quaternary-lighter,
+  "quaternary-lightest": $quaternary-lightest,
+);
--- a/resources/styles/global/variables/_spacing.scss
+++ b/resources/styles/global/variables/_spacing.scss
@@ -0,0 +1,40 @@
+@use "sass:math";
+
+$offCanvasWidth:      17.5em;
+
+$tileAspectRatio:     math.div(400, 640) * 100%;
+$heroAspectRatio:     math.div(593, 1920) * 100vw;
+$slideAspectRatio:    math.div(733, 1920) * 100vw;
+
+$sectionSmallest:       0.500em;
+$sectionSmaller:        1.000em;
+$sectionSmall:          1.500em;
+$sectionMedium:         3.000em;
+$sectionLarge:          5.000em;
+$sectionLarger:         7.500em;
+$sectionLargest:       10.000em;
+
+$containerLarge:       73.125em;
+$containerMedium:      60.000em;
+$containerSmall:       50.000em;
+$containerNarrow:      34.000em;
+
+$innerLarger:           5.000em;
+$innerLarger:           3.000em;
+$innerLarge:            2.000em;
+$innerMedium:           1.500em;
+$innerSmall:            1.000em;
+$innerSmaller:          0.750em;
+$innerSmallest:         0.500em;
+
+$borderRadiusLargeer:   1.500em;
+$borderRadiusLarge:     1.000em;
+$borderRadius:          1.000em;
+$borderRadiusSmall:     0.500em;
+$borderRadiusSmaller:   0.250em;
+
+$borderThin:           0.0625em;
+$borderWidth:          0.1250em;
+$borderThick:          0.2500em;
+$borderThicker:        0.5000em;
+$borderThickest:       1.0000em;
--- a/resources/styles/plugins/_contact-form-7.scss
+++ b/resources/styles/plugins/_contact-form-7.scss
@@ -0,0 +1,22 @@
+.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;
+}
--- a/resources/styles/plugins/_mce.scss
+++ b/resources/styles/plugins/_mce.scss
@@ -0,0 +1,12 @@
+#mce-responses {
+  .response {
+    padding: 0 0 1em;
+    margin: 0 0 1em;
+    font-size: 0.875em;
+    border-bottom: 1px solid $grey-lighter;
+  }
+}
+
+.knockout #mce-responses .response {
+  border-bottom-color: rgba($white, 0.3);
+}
--- a/resources/styles/views/_page.scss
+++ b/resources/styles/views/_page.scss
--- a/yarn.lock
+++ b/yarn.lock
@@ -558,6 +558,95 @@
    "@nodelib/fs.scandir" "2.1.5"
    fastq "^1.6.0"

+"@parcel/watcher-android-arm64@2.5.0":
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.0.tgz#e32d3dda6647791ee930556aee206fcd5ea0fb7a"
+  integrity sha512-qlX4eS28bUcQCdribHkg/herLe+0A9RyYC+mm2PXpncit8z5b3nSqGVzMNR3CmtAOgRutiZ02eIJJgP/b1iEFQ==
+
+"@parcel/watcher-darwin-arm64@2.5.0":
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.0.tgz#0d9e680b7e9ec1c8f54944f1b945aa8755afb12f"
+  integrity sha512-hyZ3TANnzGfLpRA2s/4U1kbw2ZI4qGxaRJbBH2DCSREFfubMswheh8TeiC1sGZ3z2jUf3s37P0BBlrD3sjVTUw==
+
+"@parcel/watcher-darwin-x64@2.5.0":
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.0.tgz#f9f1d5ce9d5878d344f14ef1856b7a830c59d1bb"
+  integrity sha512-9rhlwd78saKf18fT869/poydQK8YqlU26TMiNg7AIu7eBp9adqbJZqmdFOsbZ5cnLp5XvRo9wcFmNHgHdWaGYA==
+
+"@parcel/watcher-freebsd-x64@2.5.0":
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.0.tgz#2b77f0c82d19e84ff4c21de6da7f7d096b1a7e82"
+  integrity sha512-syvfhZzyM8kErg3VF0xpV8dixJ+RzbUaaGaeb7uDuz0D3FK97/mZ5AJQ3XNnDsXX7KkFNtyQyFrXZzQIcN49Tw==
+
+"@parcel/watcher-linux-arm-glibc@2.5.0":
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.0.tgz#92ed322c56dbafa3d2545dcf2803334aee131e42"
+  integrity sha512-0VQY1K35DQET3dVYWpOaPFecqOT9dbuCfzjxoQyif1Wc574t3kOSkKevULddcR9znz1TcklCE7Ht6NIxjvTqLA==
+
+"@parcel/watcher-linux-arm-musl@2.5.0":
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.0.tgz#cd48e9bfde0cdbbd2ecd9accfc52967e22f849a4"
+  integrity sha512-6uHywSIzz8+vi2lAzFeltnYbdHsDm3iIB57d4g5oaB9vKwjb6N6dRIgZMujw4nm5r6v9/BQH0noq6DzHrqr2pA==
+
+"@parcel/watcher-linux-arm64-glibc@2.5.0":
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.0.tgz#7b81f6d5a442bb89fbabaf6c13573e94a46feb03"
+  integrity sha512-BfNjXwZKxBy4WibDb/LDCriWSKLz+jJRL3cM/DllnHH5QUyoiUNEp3GmL80ZqxeumoADfCCP19+qiYiC8gUBjA==
+
+"@parcel/watcher-linux-arm64-musl@2.5.0":
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.0.tgz#dcb8ff01077cdf59a18d9e0a4dff7a0cfe5fd732"
+  integrity sha512-S1qARKOphxfiBEkwLUbHjCY9BWPdWnW9j7f7Hb2jPplu8UZ3nes7zpPOW9bkLbHRvWM0WDTsjdOTUgW0xLBN1Q==
+
+"@parcel/watcher-linux-x64-glibc@2.5.0":
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.0.tgz#2e254600fda4e32d83942384d1106e1eed84494d"
+  integrity sha512-d9AOkusyXARkFD66S6zlGXyzx5RvY+chTP9Jp0ypSTC9d4lzyRs9ovGf/80VCxjKddcUvnsGwCHWuF2EoPgWjw==
+
+"@parcel/watcher-linux-x64-musl@2.5.0":
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.0.tgz#01fcea60fedbb3225af808d3f0a7b11229792eef"
+  integrity sha512-iqOC+GoTDoFyk/VYSFHwjHhYrk8bljW6zOhPuhi5t9ulqiYq1togGJB5e3PwYVFFfeVgc6pbz3JdQyDoBszVaA==
+
+"@parcel/watcher-win32-arm64@2.5.0":
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.0.tgz#87cdb16e0783e770197e52fb1dc027bb0c847154"
+  integrity sha512-twtft1d+JRNkM5YbmexfcH/N4znDtjgysFaV9zvZmmJezQsKpkfLYJ+JFV3uygugK6AtIM2oADPkB2AdhBrNig==
+
+"@parcel/watcher-win32-ia32@2.5.0":
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.0.tgz#778c39b56da33e045ba21c678c31a9f9d7c6b220"
+  integrity sha512-+rgpsNRKwo8A53elqbbHXdOMtY/tAtTzManTWShB5Kk54N8Q9mzNWV7tV+IbGueCbcj826MfWGU3mprWtuf1TA==
+
+"@parcel/watcher-win32-x64@2.5.0":
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.0.tgz#33873876d0bbc588aacce38e90d1d7480ce81cb7"
+  integrity sha512-lPrxve92zEHdgeff3aiu4gDOIt4u7sJYha6wbdEZDCDUhtjTsOMiaJzG5lMY4GkWH8p0fMmO2Ppq5G5XXG+DQw==
+
+"@parcel/watcher@^2.4.1":
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher/-/watcher-2.5.0.tgz#5c88818b12b8de4307a9d3e6dc3e28eba0dfbd10"
+  integrity sha512-i0GV1yJnm2n3Yq1qw6QrUrd/LI9bE8WEBOTtOkpCXHHdyN3TAGgqAK/DAT05z4fq2x04cARXt2pDmjWjL92iTQ==
+  dependencies:
+    detect-libc "^1.0.3"
+    is-glob "^4.0.3"
+    micromatch "^4.0.5"
+    node-addon-api "^7.0.0"
+  optionalDependencies:
+    "@parcel/watcher-android-arm64" "2.5.0"
+    "@parcel/watcher-darwin-arm64" "2.5.0"
+    "@parcel/watcher-darwin-x64" "2.5.0"
+    "@parcel/watcher-freebsd-x64" "2.5.0"
+    "@parcel/watcher-linux-arm-glibc" "2.5.0"
+    "@parcel/watcher-linux-arm-musl" "2.5.0"
+    "@parcel/watcher-linux-arm64-glibc" "2.5.0"
+    "@parcel/watcher-linux-arm64-musl" "2.5.0"
+    "@parcel/watcher-linux-x64-glibc" "2.5.0"
+    "@parcel/watcher-linux-x64-musl" "2.5.0"
+    "@parcel/watcher-win32-arm64" "2.5.0"
+    "@parcel/watcher-win32-ia32" "2.5.0"
+    "@parcel/watcher-win32-x64" "2.5.0"
+
 "@pmmmwh/react-refresh-webpack-plugin@0.5.15":
  version "0.5.15"
  resolved "https://registry.yarnpkg.com/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.15.tgz#f126be97c30b83ed777e2aeabd518bc592e6e7c4"
@@ -760,6 +849,22 @@
    tslib "2.6.3"
    webpack "5.93.0"

+"@roots/bud-sass@^6.23.3":
+  version "6.23.3"
+  resolved "https://registry.yarnpkg.com/@roots/bud-sass/-/bud-sass-6.23.3.tgz#f56afbe99838a1e3d84104e670cc5721bd095743"
+  integrity sha512-Yk6ea7LY6br+vHgqhAlPbJR85w/Mc4XzUaYf1INbsrTvSEAPy0MIkmpoXMKPBUB4hozwza1SjHYEwL/v+pYWJQ==
+  dependencies:
+    "@roots/bud-framework" "6.23.3"
+    "@roots/bud-support" "6.23.3"
+    "@types/sass-loader" "8.0.8"
+    postcss-scss "4.0.9"
+    resolve-url-loader "5.0.0"
+    sass "1.77.8"
+    sass-loader "14.2.1"
+    stylelint-config-recommended-scss "14.1.0"
+    stylelint-scss "6.4.1"
+    tslib "2.6.3"
+
 "@roots/bud-server@6.23.3":
  version "6.23.3"
  resolved "https://registry.yarnpkg.com/@roots/bud-server/-/bud-server-6.23.3.tgz#9ff25b1016e7051adbc1a580017b80426e6cc892"
@@ -1197,6 +1302,13 @@
  resolved "https://registry.yarnpkg.com/@types/ms/-/ms-0.7.34.tgz#10964ba0dee6ac4cd462e2795b6bebd407303433"
  integrity sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g==

+"@types/node-sass@*":
+  version "4.11.8"
+  resolved "https://registry.yarnpkg.com/@types/node-sass/-/node-sass-4.11.8.tgz#c45b136a53eccd8c623123a956dc4bc183af096f"
+  integrity sha512-dWWMGPX8uselSQ1MLzDvQnVz5Qy1pe7SJuUl1Yqi2NCNRkrk5DmHlP44VZmTWm+buR2T217+5zEAPbAmTwKIOQ==
+  dependencies:
+    "@types/node" "*"
+
 "@types/node@*":
  version "22.9.0"
  resolved "https://registry.yarnpkg.com/@types/node/-/node-22.9.0.tgz#b7f16e5c3384788542c72dc3d561a7ceae2c0365"
@@ -1204,11 +1316,59 @@
  dependencies:
    undici-types "~6.19.8"

+"@types/sass-loader@8.0.8":
+  version "8.0.8"
+  resolved "https://registry.yarnpkg.com/@types/sass-loader/-/sass-loader-8.0.8.tgz#85eed3f02c72d099da56a645ae20f60d9525d694"
+  integrity sha512-hjP8aUyTDde2blD6clAGso/+ctC+9Rch/mDpvMe/kZrpXGZBDqf1K/48jWzXOX7hbd4jXQKQMPWdbBv4MRp0yQ==
+  dependencies:
+    "@types/node" "*"
+    "@types/node-sass" "*"
+    "@types/webpack" "^4"
+    sass "^1.45.0"
+
+"@types/source-list-map@*":
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/@types/source-list-map/-/source-list-map-0.1.6.tgz#164e169dd061795b50b83c19e4d3be09f8d3a454"
+  integrity sha512-5JcVt1u5HDmlXkwOD2nslZVllBBc7HDuOICfiZah2Z0is8M8g+ddAEawbmd3VjedfDHBzxCaXLs07QEmb7y54g==
+
+"@types/tapable@^1":
+  version "1.0.12"
+  resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.12.tgz#bc2cab12e87978eee89fb21576b670350d6d86ab"
+  integrity sha512-bTHG8fcxEqv1M9+TD14P8ok8hjxoOCkfKc8XXLaaD05kI7ohpeI956jtDOD3XHKBQrlyPughUtzm1jtVhHpA5Q==
+
+"@types/uglify-js@*":
+  version "3.17.5"
+  resolved "https://registry.yarnpkg.com/@types/uglify-js/-/uglify-js-3.17.5.tgz#905ce03a3cbbf2e31cbefcbc68d15497ee2e17df"
+  integrity sha512-TU+fZFBTBcXj/GpDpDaBmgWk/gn96kMZ+uocaFUlV2f8a6WdMzzI44QBCmGcCiYR0Y6ZlNRiyUyKKt5nl/lbzQ==
+  dependencies:
+    source-map "^0.6.1"
+
 "@types/unist@*", "@types/unist@^3.0.0":
  version "3.0.3"
  resolved "https://registry.yarnpkg.com/@types/unist/-/unist-3.0.3.tgz#acaab0f919ce69cce629c2d4ed2eb4adc1b6c20c"
  integrity sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==

+"@types/webpack-sources@*":
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/@types/webpack-sources/-/webpack-sources-3.2.3.tgz#b667bd13e9fa15a9c26603dce502c7985418c3d8"
+  integrity sha512-4nZOdMwSPHZ4pTEZzSp0AsTM4K7Qmu40UKW4tJDiOVs20UzYF9l+qUe4s0ftfN0pin06n+5cWWDJXH+sbhAiDw==
+  dependencies:
+    "@types/node" "*"
+    "@types/source-list-map" "*"
+    source-map "^0.7.3"
+
+"@types/webpack@^4":
+  version "4.41.40"
+  resolved "https://registry.yarnpkg.com/@types/webpack/-/webpack-4.41.40.tgz#41ea11cfafe08de24c3ef410c58976350667e2d1"
+  integrity sha512-u6kMFSBM9HcoTpUXnL6mt2HSzftqb3JgYV6oxIgL2dl6sX6aCa5k6SOkzv5DuZjBTPUE/dJltKtwwuqrkZHpfw==
+  dependencies:
+    "@types/node" "*"
+    "@types/tapable" "^1"
+    "@types/uglify-js" "*"
+    "@types/webpack-sources" "*"
+    anymatch "^3.0.0"
+    source-map "^0.6.0"
+
 "@types/yargs-parser@*":
  version "21.0.3"
  resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-21.0.3.tgz#815e30b786d2e8f0dcd85fd5bcf5e1a04d008f15"
@@ -1375,6 +1535,14 @@ acorn@^8.7.1, acorn@^8.8.2:
  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.14.0.tgz#063e2c70cac5fb4f6467f0b11152e04c682795b0"
  integrity sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==

+adjust-sourcemap-loader@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/adjust-sourcemap-loader/-/adjust-sourcemap-loader-4.0.0.tgz#fc4a0fd080f7d10471f30a7320f25560ade28c99"
+  integrity sha512-OXwN5b9pCUXNQHJpwwD2qP40byEmSgzj8B4ydSN0uMNYWiFmJ6x6KwUllMmfk8Rwu/HJDFR7U8ubsWBoN0Xp0A==
+  dependencies:
+    loader-utils "^2.0.0"
+    regex-parser "^2.2.11"
+
 ajv-formats@^2.1.1:
  version "2.1.1"
  resolved "https://registry.yarnpkg.com/ajv-formats/-/ajv-formats-2.1.1.tgz#6e669400659eb74973bbf2e33327180a0996b520"
@@ -1458,7 +1626,7 @@ ansi-styles@^6.0.0, ansi-styles@^6.1.0, ansi-styles@^6.2.1:
  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.2.1.tgz#0e62320cf99c21afff3b3012192546aacbfb05c5"
  integrity sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==

-anymatch@~3.1.2:
+anymatch@^3.0.0, anymatch@~3.1.2:
  version "3.1.3"
  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e"
  integrity sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==
@@ -1718,7 +1886,7 @@ character-entities@^2.0.0:
  resolved "https://registry.yarnpkg.com/character-entities/-/character-entities-2.0.2.tgz#2d09c2e72cd9523076ccb21157dff66ad43fcc22"
  integrity sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==

-chokidar@3.6.0:
+chokidar@3.6.0, "chokidar@>=3.0.0 <4.0.0":
  version "3.6.0"
  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b"
  integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
@@ -1733,6 +1901,13 @@ chokidar@3.6.0:
  optionalDependencies:
    fsevents "~2.3.2"

+chokidar@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-4.0.1.tgz#4a6dff66798fb0f72a94f616abbd7e1a19f31d41"
+  integrity sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==
+  dependencies:
+    readdirp "^4.0.1"
+
 chrome-trace-event@^1.0.2:
  version "1.0.4"
  resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz#05bffd7ff928465093314708c93bdfa9bd1f0f5b"
@@ -1864,6 +2039,11 @@ content-type@~1.0.4, content-type@~1.0.5:
  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.5.tgz#8b773162656d1d1086784c8f23a54ce6d73d7918"
  integrity sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==

+convert-source-map@^1.7.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
+  integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==
+
 convert-to-spaces@^2.0.1:
  version "2.0.1"
  resolved "https://registry.yarnpkg.com/convert-to-spaces/-/convert-to-spaces-2.0.1.tgz#61a6c98f8aa626c16b296b862a91412a33bceb6b"
@@ -1999,6 +2179,14 @@ css-tree@^2.3.1:
    mdn-data "2.0.30"
    source-map-js "^1.0.1"

+css-tree@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-3.0.1.tgz#bea6deaea60bb5bcf416adfb1ecf607a8d9471f6"
+  integrity sha512-8Fxxv+tGhORlshCdCwnNJytvlvq46sOLSYEx2ZIGurahWvMucSRnyjPA3AmrMq4VPRYbHVpWj5VkiVasrM2H4Q==
+  dependencies:
+    mdn-data "2.12.1"
+    source-map-js "^1.0.1"
+
 css-tree@~2.2.0:
  version "2.2.1"
  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-2.2.1.tgz#36115d382d60afd271e377f9c5f67d02bd48c032"
@@ -2893,6 +3081,11 @@ ignore@^5.2.4:
  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.2.tgz#3cd40e729f3643fd87cb04e50bf0eb722bc596f5"
  integrity sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==

+immutable@^4.0.0:
+  version "4.3.7"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.7.tgz#c70145fc90d89fb02021e65c84eb0226e4e5a381"
+  integrity sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==
+
 import-fresh@^3.3.0:
  version "3.3.0"
  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
@@ -3069,6 +3262,11 @@ is-plain-obj@^4.0.0:
  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-4.1.0.tgz#d65025edec3657ce032fd7db63c97883eaed71f0"
  integrity sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==

+is-plain-object@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-5.0.0.tgz#4427f50ab3429e9025ea7d52e9043a9ef4159344"
+  integrity sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==
+
 is-stream@^2.0.0:
  version "2.0.1"
  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.1.tgz#fac1e3d53b97ad5a9d0ae9cef2389f5810a5c077"
@@ -3196,6 +3394,11 @@ json5@^1.0.1:
  dependencies:
    minimist "^1.2.0"

+known-css-properties@^0.34.0:
+  version "0.34.0"
+  resolved "https://registry.yarnpkg.com/known-css-properties/-/known-css-properties-0.34.0.tgz#ccd7e9f4388302231b3f174a8b1d5b1f7b576cea"
+  integrity sha512-tBECoUqNFbyAY4RrbqsBQqDFpGXAEbdD5QKr8kACx3+rnArmuuR22nKQWKazvp07N9yjTyDZaw/20UIH8tL9DQ==
+
 lightningcss-darwin-arm64@1.25.1:
  version "1.25.1"
  resolved "https://registry.yarnpkg.com/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.25.1.tgz#f2943d6dc1a4d331de0ff9ad54cd03cf10e0ead3"
@@ -3441,6 +3644,16 @@ mdn-data@2.0.30:
  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.30.tgz#ce4df6f80af6cfbe218ecd5c552ba13c4dfa08cc"
  integrity sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==

+mdn-data@2.12.1:
+  version "2.12.1"
+  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.12.1.tgz#10cb462215c13d95c92ff60d0fb3becac1bbb924"
+  integrity sha512-rsfnCbOHjqrhWxwt5/wtSLzpoKTzW7OXdT5lLOIH1OTYhWu9rRJveGq0sKvDZODABH7RX+uoR+DYcpFnq4Tf6Q==
+
+mdn-data@^2.11.1:
+  version "2.12.2"
+  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.12.2.tgz#9ae6c41a9e65adf61318b32bff7b64fbfb13f8cf"
+  integrity sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==
+
 media-typer@0.3.0:
  version "0.3.0"
  resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
@@ -3762,6 +3975,11 @@ neo-async@^2.6.2:
  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
  integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==

+node-addon-api@^7.0.0:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-7.1.1.tgz#1aba6693b0f255258a049d621329329322aad558"
+  integrity sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==
+
 node-notifier@10.0.1:
  version "10.0.1"
  resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-10.0.1.tgz#0e82014a15a8456c4cfcdb25858750399ae5f1c7"
@@ -4235,6 +4453,11 @@ postcss-logical@^7.0.1:
  dependencies:
    postcss-value-parser "^4.2.0"

+postcss-media-query-parser@^0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz#27b39c6f4d94f81b1a73b8f76351c609e5cef244"
+  integrity sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==
+
 postcss-merge-longhand@^6.0.5:
  version "6.0.5"
  resolved "https://registry.yarnpkg.com/postcss-merge-longhand/-/postcss-merge-longhand-6.0.5.tgz#ba8a8d473617c34a36abbea8dda2b215750a065a"
@@ -4517,6 +4740,16 @@ postcss-replace-overflow-wrap@^4.0.0:
  resolved "https://registry.yarnpkg.com/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-4.0.0.tgz#d2df6bed10b477bf9c52fab28c568b4b29ca4319"
  integrity sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw==

+postcss-resolve-nested-selector@^0.1.1, postcss-resolve-nested-selector@^0.1.6:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.6.tgz#3d84dec809f34de020372c41b039956966896686"
+  integrity sha512-0sglIs9Wmkzbr8lQwEyIzlDOOC9bGmfVKcJTaxv3vMmd3uo4o4DerC3En0bnmgceeql9BfC8hRkp7cg0fjdVqw==
+
+postcss-scss@4.0.9, postcss-scss@^4.0.9:
+  version "4.0.9"
+  resolved "https://registry.yarnpkg.com/postcss-scss/-/postcss-scss-4.0.9.tgz#a03c773cd4c9623cb04ce142a52afcec74806685"
+  integrity sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==
+
 postcss-selector-not@^7.0.2:
  version "7.0.2"
  resolved "https://registry.yarnpkg.com/postcss-selector-not/-/postcss-selector-not-7.0.2.tgz#f9184c7770be5dcb4abd7efa3610a15fbd2f0b31"
@@ -4524,7 +4757,7 @@ postcss-selector-not@^7.0.2:
  dependencies:
    postcss-selector-parser "^6.0.13"

-postcss-selector-parser@^6.0.11, postcss-selector-parser@^6.0.13, postcss-selector-parser@^6.0.16, postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4, postcss-selector-parser@^6.1.0, postcss-selector-parser@^6.1.1:
+postcss-selector-parser@^6.0.11, postcss-selector-parser@^6.0.13, postcss-selector-parser@^6.0.16, postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4, postcss-selector-parser@^6.1.0, postcss-selector-parser@^6.1.1, postcss-selector-parser@^6.1.2:
  version "6.1.2"
  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz#27ecb41fb0e3b6ba7a1ec84fff347f734c7929de"
  integrity sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==
@@ -4561,7 +4794,7 @@ postcss@8.4.40:
    picocolors "^1.0.1"
    source-map-js "^1.2.0"

-postcss@^8.4.33:
+postcss@^8.2.14, postcss@^8.4.33:
  version "8.4.47"
  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.47.tgz#5bf6c9a010f3e724c503bf03ef7947dcb0fea365"
  integrity sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==
@@ -4676,6 +4909,11 @@ read-cache@^1.0.0:
  dependencies:
    pify "^2.3.0"

+readdirp@^4.0.1:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-4.0.2.tgz#388fccb8b75665da3abffe2d8f8ed59fe74c230a"
+  integrity sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==
+
 readdirp@~3.6.0:
  version "3.6.0"
  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
@@ -4683,6 +4921,11 @@ readdirp@~3.6.0:
  dependencies:
    picomatch "^2.2.1"

+regex-parser@^2.2.11:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/regex-parser/-/regex-parser-2.3.0.tgz#4bb61461b1a19b8b913f3960364bb57887f920ee"
+  integrity sha512-TVILVSz2jY5D47F4mA4MppkBrafEaiUWJO/TcZHEIuI13AqoZMkK1WMA4Om1YkYbTx+9Ki1/tSUXbceyr9saRg==
+
 remark-html@16.0.1:
  version "16.0.1"
  resolved "https://registry.yarnpkg.com/remark-html/-/remark-html-16.0.1.tgz#9246d0cf22254c208a86531cbeb26203ae2dd34c"
@@ -4745,6 +4988,17 @@ resolve-from@^4.0.0:
  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
  integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==

+resolve-url-loader@5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-url-loader/-/resolve-url-loader-5.0.0.tgz#ee3142fb1f1e0d9db9524d539cfa166e9314f795"
+  integrity sha512-uZtduh8/8srhBoMx//5bwqjQ+rfYOUq8zC9NrMUGtjBiGTtFJM42s58/36+hTqeqINcnYe08Nj3LkK9lW4N8Xg==
+  dependencies:
+    adjust-sourcemap-loader "^4.0.0"
+    convert-source-map "^1.7.0"
+    loader-utils "^2.0.0"
+    postcss "^8.2.14"
+    source-map "0.6.1"
+
 resolve@^1.1.7:
  version "1.22.8"
  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d"
@@ -4803,6 +5057,33 @@ safe-json-stringify@1.2.0:
  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==

+sass-loader@14.2.1:
+  version "14.2.1"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-14.2.1.tgz#db9ad96b56dc1c1ea546101e76375d5b008fec70"
+  integrity sha512-G0VcnMYU18a4N7VoNDegg2OuMjYtxnqzQWARVWCIVSZwJeiL9kg8QMsuIZOplsJgTzZLF6jGxI3AClj8I9nRdQ==
+  dependencies:
+    neo-async "^2.6.2"
+
+sass@1.77.8:
+  version "1.77.8"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.77.8.tgz#9f18b449ea401759ef7ec1752a16373e296b52bd"
+  integrity sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
+    immutable "^4.0.0"
+    source-map-js ">=0.6.2 <2.0.0"
+
+sass@^1.45.0:
+  version "1.80.6"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.80.6.tgz#5d0aa55763984effe41e40019c9571ab73e6851f"
+  integrity sha512-ccZgdHNiBF1NHBsWvacvT5rju3y1d/Eu+8Ex6c21nHp2lZGLBEtuwc415QfiI1PJa1TpCo3iXwwSRjRpn2Ckjg==
+  dependencies:
+    chokidar "^4.0.0"
+    immutable "^4.0.0"
+    source-map-js ">=0.6.2 <2.0.0"
+  optionalDependencies:
+    "@parcel/watcher" "^2.4.1"
+
 scheduler@^0.23.0, scheduler@^0.23.2:
  version "0.23.2"
  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.2.tgz#414ba64a3b282892e944cf2108ecc078d115cdc3"
@@ -4964,7 +5245,7 @@ source-list-map@^2.0.1:
  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
  integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==

-source-map-js@^1.0.1, source-map-js@^1.2.0, source-map-js@^1.2.1:
+"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.1, source-map-js@^1.2.0, source-map-js@^1.2.1:
  version "1.2.1"
  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
  integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
@@ -4977,7 +5258,7 @@ source-map-support@~0.5.20:
    buffer-from "^1.0.0"
    source-map "^0.6.0"

-source-map@^0.6.0, source-map@^0.6.1:
+source-map@0.6.1, source-map@^0.6.0, source-map@^0.6.1:
  version "0.6.1"
  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
@@ -5066,6 +5347,45 @@ stylehacks@^6.1.1:
    browserslist "^4.23.0"
    postcss-selector-parser "^6.0.16"

+stylelint-config-recommended-scss@14.1.0:
+  version "14.1.0"
+  resolved "https://registry.yarnpkg.com/stylelint-config-recommended-scss/-/stylelint-config-recommended-scss-14.1.0.tgz#1a5855655cddcb5f77c10f38c76567adf2bb9aa3"
+  integrity sha512-bhaMhh1u5dQqSsf6ri2GVWWQW5iUjBYgcHkh7SgDDn92ijoItC/cfO/W+fpXshgTQWhwFkP1rVcewcv4jaftRg==
+  dependencies:
+    postcss-scss "^4.0.9"
+    stylelint-config-recommended "^14.0.1"
+    stylelint-scss "^6.4.0"
+
+stylelint-config-recommended@^14.0.1:
+  version "14.0.1"
+  resolved "https://registry.yarnpkg.com/stylelint-config-recommended/-/stylelint-config-recommended-14.0.1.tgz#d25e86409aaf79ee6c6085c2c14b33c7e23c90c6"
+  integrity sha512-bLvc1WOz/14aPImu/cufKAZYfXs/A/owZfSMZ4N+16WGXLoX5lOir53M6odBxvhgmgdxCVnNySJmZKx73T93cg==
+
+stylelint-scss@6.4.1:
+  version "6.4.1"
+  resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-6.4.1.tgz#78a197bbcdf9a61b7365769a9a42dddc722a24c5"
+  integrity sha512-+clI2bQC2FPOt06ZwUlXZZ95IO2C5bKTP0GLN1LNQPVvISfSNcgMKv/VTwym1mK9vnqhHbOk8lO4rj4nY7L9pw==
+  dependencies:
+    known-css-properties "^0.34.0"
+    postcss-media-query-parser "^0.2.3"
+    postcss-resolve-nested-selector "^0.1.1"
+    postcss-selector-parser "^6.1.0"
+    postcss-value-parser "^4.2.0"
+
+stylelint-scss@^6.4.0:
+  version "6.8.1"
+  resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-6.8.1.tgz#b6554d93f2ea0bf37ffdcae571bbfaa35d79ba8a"
+  integrity sha512-al+5eRb72bKrFyVAY+CLWKUMX+k+wsDCgyooSfhISJA2exqnJq1PX1iIIpdrvhu3GtJgNJZl9/BIW6EVSMCxdg==
+  dependencies:
+    css-tree "^3.0.0"
+    is-plain-object "^5.0.0"
+    known-css-properties "^0.34.0"
+    mdn-data "^2.11.1"
+    postcss-media-query-parser "^0.2.3"
+    postcss-resolve-nested-selector "^0.1.6"
+    postcss-selector-parser "^6.1.2"
+    postcss-value-parser "^4.2.0"
+
 supports-color@^5.3.0:
  version "5.5.0"
  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"