Initial version

themes/zen/assets/sass/mixins/breakpoint/_respond-to.scss

@@ -0,0 +1,27 @@
+@mixin respond-to($breakpoint) {
+  // If the key exists in the map
+  @if map-has-key($breakpoints, $breakpoint) {
+    // Prints a media query based on the value
+    @media (min-width: map-get($breakpoints, $breakpoint)) {
+      @content;
+    }
+  } @else {
+    @media (min-width: $breakpoint) {
+      @content;
+    }
+  }
+}
+
+@mixin respond-to-max($breakpoint) {
+  // If the key exists in the map
+  @if map-has-key($breakpoints, $breakpoint) {
+    // Prints a media query based on the value
+    @media (max-width: map-get($breakpoints, $breakpoint)) {
+      @content;
+    }
+  } @else {
+    @media (max-width: $breakpoint) {
+      @content;
+    }
+  }
+}

themes/zen/assets/sass/mixins/clearfix/_clearfix.scss

@@ -0,0 +1,19 @@
+// clearfix()
+//
+// Allows the bottom of an element to extend to the bottom of all floated
+// children elements. @see http://nicolasgallagher.com/micro-clearfix-hack/
+//
+// We use the micro-clearfix, optimized for use in `@extend` where fewer `&` is
+// better.
+@mixin clearfix() {
+  &::before {
+    content: '';
+    display: table;
+  }
+
+  &::after {
+    content: '';
+    display: table;
+    clear: both;
+  }
+}

themes/zen/assets/sass/mixins/debug/_debug.scss

@@ -0,0 +1,20 @@
+// Output a horizontal grid to help with debugging typography.
+@mixin debug-grid() {
+  @if $debug == true {
+    $grid-height: #{$base-line-height + 'rem'};
+
+    position: relative;
+    // stylelint-disable-next-line  max-line-length
+    background-image: repeating-linear-gradient(180deg, $debug-color, $debug-color 1px, transparent 1px, transparent $grid-height);
+
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: -1px;
+      left: 0;
+      height: 1px;
+      width: 100%;
+      background-color: $debug-color;
+    }
+  }
+}

themes/zen/assets/sass/mixins/flex-calc/_flex-calc.scss

@@ -0,0 +1,4 @@
+@mixin flex($c, $x) {
+  flex-basis: calc(100% / #{$c} - #{$x * $base-line-height + 'rem'});
+  flex-grow: 0;
+}

themes/zen/assets/sass/mixins/image-url/_image-url.scss

@@ -0,0 +1,50 @@
+// stylelint-disable function-url-quotes
+
+// The relative path from the css directory to the sass directory.
+$image-url-path-to-source: '../sass' !default;
+// The relative path from the root sass directory to where your components usually lie.
+$image-url-subdirectory: 'components' !default;
+
+// image-url()
+//
+// If you include your images next to your component Sass files, you need to
+// specify a url() to point from the generated CSS to the Sass source like this:
+//
+// ```css
+// content: url(../sass/components/is-quite/long.svg);
+// ```
+//
+// With the `image-url()` function the path to all your components is assumed to
+// start with `../sass/components/` and you just need to give it the last, short
+// bit of the path in your Sass code like this:
+//
+// ```scss
+// content: image-url(is-quite/short.svg);
+// ```
+//
+// If you want to point at an image that is not in the components sub-directory
+// of your sass directory, you can override the default $subdirectory by
+// passing it in as the first parameter of `image-url()` like this:
+//
+// ```scss
+// content: image-url(base, grouping/blockquote.svg);
+// ```
+//
+// which would output `url(../sass/base/grouping/blockquote.svg)`.
+//
+// $subdirectory   = $image-url-subdirectory - Optional. The relative path from
+//                   the root of your Sass source to the sub-directory where
+//                   components usually lie.
+// $path           - Required. The path to the image relative to the
+//                   `$subdirectory`.
+// $path-to-source = $image-url-path-to-source - Optional. The relative path
+//                   from the css build directory to the sass source directory.
+@function image-url($subdirectory, $path: null, $path-to-source: $image-url-path-to-source) {
+  // If only 1 parameter is given, its value is intended for the $path.
+  @if type-of($path) == 'null' {
+    $path: $subdirectory;
+    $subdirectory: $image-url-subdirectory;
+  }
+
+  @return url(unquote($path-to-source + '/' + $subdirectory + '/' + $path));
+}

themes/zen/assets/sass/mixins/rtl/_rtl.scss

@@ -0,0 +1,26 @@
+// stylelint-disable scss/at-if-closing-brace-newline-after, scss/at-if-closing-brace-space-after
+
+$include-rtl: true !default;
+
+// rtl()
+//
+// Includes Right-To-Left language support by adding a selector of
+// `[dir="rtl"]`.
+//
+// Can be turned off globally by setting `$include-rtl: false;`.
+//
+// $selector = ':dir(rtl)' - The RTL selector.
+@mixin rtl($selector: ':dir(rtl)') {
+  @if $include-rtl {
+    @if & {
+      &#{$selector} {
+        @content;
+      }
+    }
+    @else {
+      #{$selector} {
+        @content;
+      }
+    }
+  }
+}

themes/zen/assets/sass/mixins/spacing/_spacing.scss

@@ -0,0 +1,108 @@
+@mixin spacing($property, $spacing, $unit) {
+  $converted-list: ();
+
+  @each $x in $spacing {
+    $xunit: $unit;
+
+    @if $x == 0 {
+      $xunit: '';
+    }
+
+    $spacing: #{$x * $base-line-height + $xunit};
+    $converted-list: join($converted-list, $spacing, $separator: space);
+  }
+
+  #{$property}: $converted-list;
+}
+
+@mixin gap($x, $unit: 'rem') {
+  @include spacing(gap, $x, $unit);
+}
+
+@mixin margin($x, $unit: 'rem') {
+  @include spacing(margin, $x, $unit);
+}
+
+@mixin margin-inline($x, $unit: 'rem') {
+  @include spacing(margin-inline, $x, $unit);
+}
+
+@mixin margin-inline-start($x, $unit: 'rem') {
+  @include spacing(margin-inline-start, $x, $unit);
+}
+
+@mixin margin-inline-end($x, $unit: 'rem') {
+  @include spacing(margin-inline-end, $x, $unit);
+}
+
+@mixin margin-block($x, $unit: 'rem') {
+  @include spacing(margin-block, $x, $unit);
+}
+
+@mixin margin-block-start($x, $unit: 'rem') {
+  @include spacing(margin-block-start, $x, $unit);
+}
+
+@mixin margin-block-end($x, $unit: 'rem') {
+  @include spacing(margin-block-end, $x, $unit);
+}
+
+@mixin margin-top($x, $unit: 'rem') {
+  @include spacing(margin-top, $x, $unit);
+}
+
+@mixin margin-bottom($x, $unit: 'rem') {
+  @include spacing(margin-bottom, $x, $unit);
+}
+
+@mixin margin-left($x, $unit: 'rem') {
+  @include spacing(margin-left, $x, $unit);
+}
+
+@mixin margin-right($x, $unit: 'rem') {
+  @include spacing(margin-right, $x, $unit);
+}
+
+@mixin padding($x, $unit: 'rem') {
+  @include spacing(padding, $x, $unit);
+}
+
+@mixin padding-inline($x, $unit: 'rem') {
+  @include spacing(padding-inline, $x, $unit);
+}
+
+@mixin padding-inline-start($x, $unit: 'rem') {
+  @include spacing(padding-inline-start, $x, $unit);
+}
+
+@mixin padding-inline-end($x, $unit: 'rem') {
+  @include spacing(padding-inline-end, $x, $unit);
+}
+
+@mixin padding-block($x, $unit: 'rem') {
+  @include spacing(padding-block, $x, $unit);
+}
+
+@mixin padding-block-start($x, $unit: 'rem') {
+  @include spacing(padding-block-start, $x, $unit);
+}
+
+@mixin padding-block-end($x, $unit: 'rem') {
+  @include spacing(padding-block-end, $x, $unit);
+}
+
+@mixin padding-top($x, $unit: 'rem') {
+  @include spacing(padding-top, $x, $unit);
+}
+
+@mixin padding-bottom($x, $unit: 'rem') {
+  @include spacing(padding-bottom, $x, $unit);
+}
+
+@mixin padding-left($x, $unit: 'rem') {
+  @include spacing(padding-left, $x, $unit);
+}
+
+@mixin padding-right($x, $unit: 'rem') {
+  @include spacing(padding-right, $x, $unit);
+}