pull in v11.0.1 from upstream

resources/css/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;
+        }
+      }
+    }
+  }
+}

resources/css/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);
+      }
+    }
+  }
+}

resources/css/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);
+}

resources/css/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;
+  }
+}