procode-vs-theme 1.0.5 → 1.0.6

package/src/utilities/_flex.scss

@@ -1,82 +1,83 @@
 @use "../base/mixins/breakpoints" as bp;
+@use "../base/mixins/meta-class" as mc;
 
 // Direction
-.qo-flex-row { flex-direction: row; }
-.qo-flex-column { flex-direction: column; }
-.qo-flex-row-reverse { flex-direction: row-reverse; }
-.qo-flex-column-reverse { flex-direction: column-reverse; }
+@include mc.meta("qo-flex-row", (flex-direction: row));
+@include mc.meta("qo-flex-column", (flex-direction: column));
+@include mc.meta("qo-flex-row-reverse", (flex-direction: row-reverse));
+@include mc.meta("qo-flex-column-reverse", (flex-direction: column-reverse));
 
 // Wrap
-.qo-flex-wrap { flex-wrap: wrap; }
-.qo-flex-nowrap { flex-wrap: nowrap; }
-.qo-flex-wrap-reverse { flex-wrap: wrap-reverse; }
+@include mc.meta("qo-flex-wrap", (flex-wrap: wrap));
+@include mc.meta("qo-flex-nowrap", (flex-wrap: nowrap));
+@include mc.meta("qo-flex-wrap-reverse", (flex-wrap: wrap-reverse));
 
 // Justify content
-.qo-justify-content-start { justify-content: flex-start; }
-.qo-justify-content-end { justify-content: flex-end; }
-.qo-justify-content-center { justify-content: center; }
-.qo-justify-content-between { justify-content: space-between; }
-.qo-justify-content-around { justify-content: space-around; }
-.qo-justify-content-evenly { justify-content: space-evenly; }
+@include mc.meta("qo-justify-content-start", (justify-content: flex-start));
+@include mc.meta("qo-justify-content-end", (justify-content: flex-end));
+@include mc.meta("qo-justify-content-center", (justify-content: center));
+@include mc.meta("qo-justify-content-between", (justify-content: space-between));
+@include mc.meta("qo-justify-content-around", (justify-content: space-around));
+@include mc.meta("qo-justify-content-evenly", (justify-content: space-evenly));
 
 // Align items
-.qo-align-items-start { align-items: flex-start; }
-.qo-align-items-end { align-items: flex-end; }
-.qo-align-items-center { align-items: center; }
-.qo-align-items-baseline { align-items: baseline; }
-.qo-align-items-stretch { align-items: stretch; }
+@include mc.meta("qo-align-items-start", (align-items: flex-start));
+@include mc.meta("qo-align-items-end", (align-items: flex-end));
+@include mc.meta("qo-align-items-center", (align-items: center));
+@include mc.meta("qo-align-items-baseline", (align-items: baseline));
+@include mc.meta("qo-align-items-stretch", (align-items: stretch));
 
 // Align self
-.qo-align-self-start { align-self: flex-start; }
-.qo-align-self-end { align-self: flex-end; }
-.qo-align-self-center { align-self: center; }
-.qo-align-self-baseline { align-self: baseline; }
-.qo-align-self-stretch { align-self: stretch; }
+@include mc.meta("qo-align-self-start", (align-self: flex-start));
+@include mc.meta("qo-align-self-end", (align-self: flex-end));
+@include mc.meta("qo-align-self-center", (align-self: center));
+@include mc.meta("qo-align-self-baseline", (align-self: baseline));
+@include mc.meta("qo-align-self-stretch", (align-self: stretch));
 
 // Align content
-.qo-align-content-start { align-content: flex-start; }
-.qo-align-content-end { align-content: flex-end; }
-.qo-align-content-center { align-content: center; }
-.qo-align-content-between { align-content: space-between; }
-.qo-align-content-around { align-content: space-around; }
-.qo-align-content-stretch { align-content: stretch; }
+@include mc.meta("qo-align-content-start", (align-content: flex-start));
+@include mc.meta("qo-align-content-end", (align-content: flex-end));
+@include mc.meta("qo-align-content-center", (align-content: center));
+@include mc.meta("qo-align-content-between", (align-content: space-between));
+@include mc.meta("qo-align-content-around", (align-content: space-around));
+@include mc.meta("qo-align-content-stretch", (align-content: stretch));
 
 // Flex grow/shrink/fill
-.qo-flex-fill { flex: 1 1 auto; }
-.qo-flex-grow-0 { flex-grow: 0; }
-.qo-flex-grow-1 { flex-grow: 1; }
-.qo-flex-shrink-0 { flex-shrink: 0; }
-.qo-flex-shrink-1 { flex-shrink: 1; }
+@include mc.meta("qo-flex-fill", (flex: 1 1 auto));
+@include mc.meta("qo-flex-grow-0", (flex-grow: 0));
+@include mc.meta("qo-flex-grow-1", (flex-grow: 1));
+@include mc.meta("qo-flex-shrink-0", (flex-shrink: 0));
+@include mc.meta("qo-flex-shrink-1", (flex-shrink: 1));
 
 // Order
-.qo-order-first { order: -1; }
-.qo-order-0 { order: 0; }
-.qo-order-1 { order: 1; }
-.qo-order-2 { order: 2; }
-.qo-order-3 { order: 3; }
-.qo-order-4 { order: 4; }
-.qo-order-5 { order: 5; }
-.qo-order-last { order: 6; }
+@include mc.meta("qo-order-first", (order: -1));
+@include mc.meta("qo-order-0", (order: 0));
+@include mc.meta("qo-order-1", (order: 1));
+@include mc.meta("qo-order-2", (order: 2));
+@include mc.meta("qo-order-3", (order: 3));
+@include mc.meta("qo-order-4", (order: 4));
+@include mc.meta("qo-order-5", (order: 5));
+@include mc.meta("qo-order-last", (order: 6));
 
 // Responsive variants
 @each $bp-name, $bp-value in bp.$breakpoints {
   @media (min-width: $bp-value) {
-    .qo-flex-#{$bp-name}-row { flex-direction: row; }
-    .qo-flex-#{$bp-name}-column { flex-direction: column; }
-    .qo-flex-#{$bp-name}-row-reverse { flex-direction: row-reverse; }
-    .qo-flex-#{$bp-name}-column-reverse { flex-direction: column-reverse; }
-    .qo-flex-#{$bp-name}-wrap { flex-wrap: wrap; }
-    .qo-flex-#{$bp-name}-nowrap { flex-wrap: nowrap; }
-    .qo-justify-content-#{$bp-name}-start { justify-content: flex-start; }
-    .qo-justify-content-#{$bp-name}-end { justify-content: flex-end; }
-    .qo-justify-content-#{$bp-name}-center { justify-content: center; }
-    .qo-justify-content-#{$bp-name}-between { justify-content: space-between; }
-    .qo-justify-content-#{$bp-name}-around { justify-content: space-around; }
-    .qo-justify-content-#{$bp-name}-evenly { justify-content: space-evenly; }
-    .qo-align-items-#{$bp-name}-start { align-items: flex-start; }
-    .qo-align-items-#{$bp-name}-end { align-items: flex-end; }
-    .qo-align-items-#{$bp-name}-center { align-items: center; }
-    .qo-align-items-#{$bp-name}-baseline { align-items: baseline; }
-    .qo-align-items-#{$bp-name}-stretch { align-items: stretch; }
+    @include mc.meta("qo-flex-#{$bp-name}-row", (flex-direction: row));
+    @include mc.meta("qo-flex-#{$bp-name}-column", (flex-direction: column));
+    @include mc.meta("qo-flex-#{$bp-name}-row-reverse", (flex-direction: row-reverse));
+    @include mc.meta("qo-flex-#{$bp-name}-column-reverse", (flex-direction: column-reverse));
+    @include mc.meta("qo-flex-#{$bp-name}-wrap", (flex-wrap: wrap));
+    @include mc.meta("qo-flex-#{$bp-name}-nowrap", (flex-wrap: nowrap));
+    @include mc.meta("qo-justify-content-#{$bp-name}-start", (justify-content: flex-start));
+    @include mc.meta("qo-justify-content-#{$bp-name}-end", (justify-content: flex-end));
+    @include mc.meta("qo-justify-content-#{$bp-name}-center", (justify-content: center));
+    @include mc.meta("qo-justify-content-#{$bp-name}-between", (justify-content: space-between));
+    @include mc.meta("qo-justify-content-#{$bp-name}-around", (justify-content: space-around));
+    @include mc.meta("qo-justify-content-#{$bp-name}-evenly", (justify-content: space-evenly));
+    @include mc.meta("qo-align-items-#{$bp-name}-start", (align-items: flex-start));
+    @include mc.meta("qo-align-items-#{$bp-name}-end", (align-items: flex-end));
+    @include mc.meta("qo-align-items-#{$bp-name}-center", (align-items: center));
+    @include mc.meta("qo-align-items-#{$bp-name}-baseline", (align-items: baseline));
+    @include mc.meta("qo-align-items-#{$bp-name}-stretch", (align-items: stretch));
   }
 }

package/src/utilities/_opacity.scss

@@ -1,7 +1,7 @@
+@use "../base/mixins/meta-class" as mc;
+
 $_opacities: (0: 0, 25: 0.25, 50: 0.5, 75: 0.75, 100: 1);
 
 @each $key, $value in $_opacities {
-  .qo-opacity-#{$key} {
-    opacity: $value;
-  }
+  @include mc.meta("qo-opacity-#{$key}", (opacity: $value));
 }

package/src/utilities/_overflow.scss

@@ -1,7 +1,9 @@
+@use "../base/mixins/meta-class" as mc;
+
 $_overflow-values: auto, hidden, visible, scroll;
 
 @each $value in $_overflow-values {
-  .qo-overflow-#{$value} { overflow: $value; }
-  .qo-overflow-x-#{$value} { overflow-x: $value; }
-  .qo-overflow-y-#{$value} { overflow-y: $value; }
+  @include mc.meta("qo-overflow-#{$value}", (overflow: $value));
+  @include mc.meta("qo-overflow-x-#{$value}", (overflow-x: $value));
+  @include mc.meta("qo-overflow-y-#{$value}", (overflow-y: $value));
 }

package/src/utilities/_position.scss

@@ -1,26 +1,22 @@
-.qo-position-static { position: static; }
-.qo-position-relative { position: relative; }
-.qo-position-absolute { position: absolute; }
-.qo-position-fixed { position: fixed; }
-.qo-position-sticky { position: sticky; }
+@use "../base/mixins/meta-class" as mc;
+
+@include mc.meta("qo-position-static", (position: static));
+@include mc.meta("qo-position-relative", (position: relative));
+@include mc.meta("qo-position-absolute", (position: absolute));
+@include mc.meta("qo-position-fixed", (position: fixed));
+@include mc.meta("qo-position-sticky", (position: sticky));
 
 // Edge positioning
 $_positions: (0: 0, 50: 50%, 100: 100%);
 
 @each $key, $value in $_positions {
-  .qo-top-#{$key} { top: $value; }
-  .qo-bottom-#{$key} { bottom: $value; }
-  .qo-start-#{$key} { left: $value; }
-  .qo-end-#{$key} { right: $value; }
+  @include mc.meta("qo-top-#{$key}", (top: $value));
+  @include mc.meta("qo-bottom-#{$key}", (bottom: $value));
+  @include mc.meta("qo-start-#{$key}", (left: $value));
+  @include mc.meta("qo-end-#{$key}", (right: $value));
 }
 
 // Center transform helpers
-.qo-translate-middle {
-  transform: translate(-50%, -50%);
-}
-.qo-translate-middle-x {
-  transform: translateX(-50%);
-}
-.qo-translate-middle-y {
-  transform: translateY(-50%);
-}
+@include mc.meta("qo-translate-middle", (transform: translate(-50%, -50%)));
+@include mc.meta("qo-translate-middle-x", (transform: translateX(-50%)));
+@include mc.meta("qo-translate-middle-y", (transform: translateY(-50%)));

package/src/utilities/_sizing.scss

@@ -1,13 +1,24 @@
-$_sizing-values: (25: 25%, 50: 50%, 75: 75%, 100: 100%, auto: auto);
+@use "../base/size" as sz;
+@use "../base/mixins/meta-class" as mc;
 
-@each $key, $value in $_sizing-values {
-  .qo-w-#{$key} { width: $value; }
-  .qo-h-#{$key} { height: $value; }
+@each $key, $value in sz.$sizing-values {
+  @include mc.meta("qo-w-#{$key}", (width: $value));
+  @include mc.meta("qo-h-#{$key}", (height: $value));
 }
 
-.qo-mw-100 { max-width: 100%; }
-.qo-mh-100 { max-height: 100%; }
-.qo-min-vw-100 { min-width: 100vw; }
-.qo-min-vh-100 { min-height: 100vh; }
-.qo-vw-100 { width: 100vw; }
-.qo-vh-100 { height: 100vh; }
+@each $key, $value in sz.$sizing-values {
+  @include mc.meta("qo-min-w-#{$key}", (min-width: $value));
+  @include mc.meta("qo-min-h-#{$key}", (min-height: $value));
+}
+
+@each $key, $value in sz.$sizing-values {
+  @include mc.meta("qo-max-w-#{$key}", (max-width: $value));
+  @include mc.meta("qo-max-h-#{$key}", (max-height: $value));
+}
+
+@include mc.meta("qo-mw-100", (max-width: 100%));
+@include mc.meta("qo-mh-100", (max-height: 100%));
+@include mc.meta("qo-min-vw-100", (min-width: 100vw));
+@include mc.meta("qo-min-vh-100", (min-height: 100vh));
+@include mc.meta("qo-vw-100", (width: 100vw));
+@include mc.meta("qo-vh-100", (height: 100vh));

package/src/utilities/_text.scss

@@ -1,49 +1,43 @@
 @use "../base/mixins/breakpoints" as bp;
+@use "../base/mixins/meta-class" as mc;
 
 // Text alignment
-.qo-text-start { text-align: left; }
-.qo-text-end { text-align: right; }
-.qo-text-center { text-align: center; }
-.qo-text-justify { text-align: justify; }
+@include mc.meta("qo-text-start", (text-align: left));
+@include mc.meta("qo-text-end", (text-align: right));
+@include mc.meta("qo-text-center", (text-align: center));
+@include mc.meta("qo-text-justify", (text-align: justify));
 
 // Text wrapping
-.qo-text-nowrap { white-space: nowrap; }
-.qo-text-wrap { white-space: normal; }
-.qo-text-truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.qo-text-break {
-  word-wrap: break-word;
-  word-break: break-word;
-}
+@include mc.meta("qo-text-nowrap", (white-space: nowrap));
+@include mc.meta("qo-text-wrap", (white-space: normal));
+@include mc.meta("qo-text-truncate", (overflow: hidden, text-overflow: ellipsis, white-space: nowrap));
+@include mc.meta("qo-text-break", (word-wrap: break-word, word-break: break-word));
 
 // Text transform
-.qo-text-uppercase { text-transform: uppercase; }
-.qo-text-lowercase { text-transform: lowercase; }
-.qo-text-capitalize { text-transform: capitalize; }
+@include mc.meta("qo-text-uppercase", (text-transform: uppercase));
+@include mc.meta("qo-text-lowercase", (text-transform: lowercase));
+@include mc.meta("qo-text-capitalize", (text-transform: capitalize));
 
 // Text decoration
-.qo-text-decoration-none { text-decoration: none; }
-.qo-text-decoration-underline { text-decoration: underline; }
-.qo-text-decoration-line-through { text-decoration: line-through; }
+@include mc.meta("qo-text-decoration-none", (text-decoration: none));
+@include mc.meta("qo-text-decoration-underline", (text-decoration: underline));
+@include mc.meta("qo-text-decoration-line-through", (text-decoration: line-through));
 
 // Font style
-.qo-fst-italic { font-style: italic; }
-.qo-fst-normal { font-style: normal; }
+@include mc.meta("qo-fst-italic", (font-style: italic));
+@include mc.meta("qo-fst-normal", (font-style: normal));
 
 // Line height
-.qo-lh-1 { line-height: 1; }
-.qo-lh-sm { line-height: 1.25; }
-.qo-lh-base { line-height: 1.5; }
-.qo-lh-lg { line-height: 2; }
+@include mc.meta("qo-lh-1", (line-height: 1));
+@include mc.meta("qo-lh-sm", (line-height: 1.25));
+@include mc.meta("qo-lh-base", (line-height: 1.5));
+@include mc.meta("qo-lh-lg", (line-height: 2));
 
 // Responsive text alignment
 @each $bp-name, $bp-value in bp.$breakpoints {
   @media (min-width: $bp-value) {
-    .qo-text-#{$bp-name}-start { text-align: left; }
-    .qo-text-#{$bp-name}-end { text-align: right; }
-    .qo-text-#{$bp-name}-center { text-align: center; }
+    @include mc.meta("qo-text-#{$bp-name}-start", (text-align: left));
+    @include mc.meta("qo-text-#{$bp-name}-end", (text-align: right));
+    @include mc.meta("qo-text-#{$bp-name}-center", (text-align: center));
   }
 }

package/src/utilities/_visibility.scss

@@ -1,2 +1,4 @@
-.qo-visible { visibility: visible; }
-.qo-invisible { visibility: hidden; }
+@use "../base/mixins/meta-class" as mc;
+
+@include mc.meta("qo-visible", (visibility: visible));
+@include mc.meta("qo-invisible", (visibility: hidden));

package/src/utilities/background-color/index.scss

@@ -1,37 +1,16 @@
-@use "../../base/color" as cl;
-.qo-bg-primary {
-  background-color: cl.$background-primary;
-}
-.qo-bg-secondary {
-  background-color: cl.$background-secondary;
-}
-.qo-bg-success {
-  background-color: cl.$background-success;
-}
-.qo-bg-warning {
-  background-color: cl.$background-warning;
-}
-.qo-bg-danger {
-  background-color: cl.$background-danger;
-}
-.qo-bg-info {
-  background-color: cl.$background-info;
-}
-.qo-bg-default {
-  background-color: cl.$background-default;
-}
-.qo-bg-dark {
-  background-color: cl.$background-dark;
-}
-.qo-bg-dark-alt {
-  background-color: cl.$background-dark-a;
-}
-.qo-bg-light {
-  background-color: cl.$background-light;
-}
-.qo-bg-tertiary {
-  background-color: cl.$background-tertiary;
-}
-.qo-bg-lime {
-  background-color: cl.$background-lime;
-}
+@use "../../base/color" as cl;
+@use "../../base/mixins/meta-class" as mc;
+
+@include mc.meta("qo-bg-primary", (background-color: cl.$background-primary));
+@include mc.meta("qo-bg-secondary", (background-color: cl.$background-secondary));
+@include mc.meta("qo-bg-success", (background-color: cl.$background-success));
+@include mc.meta("qo-bg-warning", (background-color: cl.$background-warning));
+@include mc.meta("qo-bg-danger", (background-color: cl.$background-danger));
+@include mc.meta("qo-bg-info", (background-color: cl.$background-info));
+@include mc.meta("qo-bg-default", (background-color: cl.$background-default));
+@include mc.meta("qo-bg-dark", (background-color: cl.$background-dark));
+@include mc.meta("qo-bg-dark-alt", (background-color: cl.$background-dark-a));
+@include mc.meta("qo-bg-medium", (background-color: cl.$background-medium));
+@include mc.meta("qo-bg-light", (background-color: cl.$background-light));
+@include mc.meta("qo-bg-tertiary", (background-color: cl.$background-tertiary));
+@include mc.meta("qo-bg-lime", (background-color: cl.$background-lime));

package/src/utilities/border/_border-color.scss

@@ -1,33 +1,11 @@
-@use "../../base/color" as cl;
-
-.qo-border-primary {
-  border-color: cl.$border-primary;
-}
-
-.qo-border-secondary {
-  border-color: cl.$border-secondary;
-}
-
-.qo-border-success {
-  border-color: cl.$border-success;
-}
-
-.qo-border-warning {
-  border-color: cl.$border-warning;
-}
-
-.qo-border-danger {
-  border-color: cl.$border-danger;
-}
-
-.qo-border-info {
-  border-color: cl.$border-info;
-}
-
-.qo-border-light {
-  border-color: cl.$border-light;
-}
-
-.qo-border-dark {
-  border-color: cl.$border-dark;
-}
+@use "../../base/color" as cl;
+@use "../../base/mixins/meta-class" as mc;
+
+@include mc.meta("qo-border-primary", (border-color: cl.$border-primary));
+@include mc.meta("qo-border-secondary", (border-color: cl.$border-secondary));
+@include mc.meta("qo-border-success", (border-color: cl.$border-success));
+@include mc.meta("qo-border-warning", (border-color: cl.$border-warning));
+@include mc.meta("qo-border-danger", (border-color: cl.$border-danger));
+@include mc.meta("qo-border-info", (border-color: cl.$border-info));
+@include mc.meta("qo-border-light", (border-color: cl.$border-light));
+@include mc.meta("qo-border-dark", (border-color: cl.$border-dark));

package/src/utilities/border/_border-radius.scss

@@ -1,29 +1,10 @@
 @use "../../base/border" as bo;
-
-.qo-border-radius-0 {
-  border-radius: bo.$border-radius-0;
-}
-
-.qo-border-radius-sm {
-  border-radius: bo.$border-radius-sm;
-}
-
-.qo-border-radius-md {
-  border-radius: bo.$border-radius-md;
-}
-
-.qo-border-radius-lg {
-  border-radius: bo.$border-radius-lg;
-}
-
-.qo-border-radius-xl {
-  border-radius: bo.$border-radius-xl;
-}
-
-.qo-border-radius-pill {
-  border-radius: bo.$border-radius-pill;
-}
-
-.qo-border-radius-full {
-  border-radius: bo.$border-radius-full;
-}
+@use "../../base/mixins/meta-class" as mc;
+
+@include mc.meta("qo-border-radius-0", (border-radius: bo.$border-radius-0));
+@include mc.meta("qo-border-radius-sm", (border-radius: bo.$border-radius-sm));
+@include mc.meta("qo-border-radius-md", (border-radius: bo.$border-radius-md));
+@include mc.meta("qo-border-radius-lg", (border-radius: bo.$border-radius-lg));
+@include mc.meta("qo-border-radius-xl", (border-radius: bo.$border-radius-xl));
+@include mc.meta("qo-border-radius-pill", (border-radius: bo.$border-radius-pill));
+@include mc.meta("qo-border-radius-full", (border-radius: bo.$border-radius-full));

package/src/utilities/border/_border-size.scss

@@ -1,10 +1,8 @@
-@use "../../base/border" as bo;
-.qo-border-sm {
-  border-width: bo.$border-width-sm;
-}
-.qo-border-md {
-  border-width: bo.$border-width-md;
-}
-.qo-border-lg {
-  border-width: bo.$border-width-lg;
-}
+@use "../../base/border" as bo;
+@use "../../base/mixins/meta-class" as mc;
+
+
+@include mc.meta("qo-border-none", (border-width: bo.$border-width-none));
+@include mc.meta("qo-border-sm", (border-width: bo.$border-width-sm));
+@include mc.meta("qo-border-md", (border-width: bo.$border-width-md));
+@include mc.meta("qo-border-lg", (border-width: bo.$border-width-lg));

package/src/utilities/box-shadow/index.scss

@@ -1,17 +1,8 @@
 @use "../../base/color" as cl;
+@use "../../base/mixins/meta-class" as mc;
 
-.qo-boxshadow-none {
-  box-shadow: none;
-}
-.qo-boxshadow-sm {
-  box-shadow: 0 1px 2px 0 cl.$boxshadow-primary;
-}
-.qo-boxshadow-md {
-  box-shadow: 0 4px 8px 0 cl.$boxshadow-primary;
-}
-.qo-boxshadow-lg {
-  box-shadow: 0 8px 16px 0 cl.$boxshadow-primary;
-}
-.qo-boxshadow-xl {
-  box-shadow: 0 12px 24px 0 cl.$boxshadow-primary;
-}
+@include mc.meta("qo-boxshadow-none", (box-shadow: none));
+@include mc.meta("qo-boxshadow-sm", (box-shadow: 0 1px 2px 0 cl.$boxshadow-primary));
+@include mc.meta("qo-boxshadow-md", (box-shadow: 0 4px 8px 0 cl.$boxshadow-primary));
+@include mc.meta("qo-boxshadow-lg", (box-shadow: 0 8px 16px 0 cl.$boxshadow-primary));
+@include mc.meta("qo-boxshadow-xl", (box-shadow: 0 12px 24px 0 cl.$boxshadow-primary));

package/src/utilities/spaces/_gap.scss

@@ -1,15 +1,8 @@
 @use "../../base/space" as sp;
+@use "../../base/mixins/meta-class" as mc;
 
 @each $key, $value in sp.$spacers {
-  .qo-gap-#{$key} {
-    gap: $value;
-  }
-
-  .qo-gap-x-#{$key} {
-    column-gap: $value;
-  }
-
-  .qo-gap-y-#{$key} {
-    row-gap: $value;
-  }
+  @include mc.meta("qo-gap-#{$key}", (gap: $value));
+  @include mc.meta("qo-gap-x-#{$key}", (column-gap: $value));
+  @include mc.meta("qo-gap-y-#{$key}", (row-gap: $value));
 }

package/src/utilities/spaces/_margin.scss

@@ -1,4 +1,5 @@
 @use "../../base/space" as sp;
+@use "../../base/mixins/meta-class" as mc;
 
 $_directions: (
   "": "",
@@ -10,34 +11,25 @@ $_directions: (
 
 @each $key, $value in sp.$spacers {
   @each $dir-name, $dir-prop in $_directions {
-    .qo-margin-#{$dir-name}#{$key} {
-      @if $dir-prop == "" {
-        margin: $value;
-      } @else {
-        margin-#{$dir-prop}: $value;
-      }
+    @if $dir-prop == "" {
+      @include mc.meta("qo-margin-#{$dir-name}#{$key}", (margin: $value));
+    } @else {
+      @include mc.meta("qo-margin-#{$dir-name}#{$key}", (margin-#{$dir-prop}: $value));
     }
   }
 
-  .qo-margin-x-#{$key} {
-    margin-left: $value;
-    margin-right: $value;
-  }
-
-  .qo-margin-y-#{$key} {
-    margin-top: $value;
-    margin-bottom: $value;
-  }
+  @include mc.meta("qo-margin-x-#{$key}", (margin-left: $value, margin-right: $value));
+  @include mc.meta("qo-margin-y-#{$key}", (margin-top: $value, margin-bottom: $value));
 }
 
 // Auto margins
-.qo-margin-auto { margin: auto; }
-.qo-margin-x-auto { margin-left: auto; margin-right: auto; }
-.qo-margin-y-auto { margin-top: auto; margin-bottom: auto; }
-.qo-margin-top-auto { margin-top: auto; }
-.qo-margin-bottom-auto { margin-bottom: auto; }
-.qo-margin-left-auto { margin-left: auto; }
-.qo-margin-right-auto { margin-right: auto; }
+@include mc.meta("qo-margin-auto", (margin: auto));
+@include mc.meta("qo-margin-x-auto", (margin-left: auto, margin-right: auto));
+@include mc.meta("qo-margin-y-auto", (margin-top: auto, margin-bottom: auto));
+@include mc.meta("qo-margin-top-auto", (margin-top: auto));
+@include mc.meta("qo-margin-bottom-auto", (margin-bottom: auto));
+@include mc.meta("qo-margin-left-auto", (margin-left: auto));
+@include mc.meta("qo-margin-right-auto", (margin-right: auto));
 
 // @deprecated — typo aliases kept for backwards compatibility
 .qo-margin-botttom-sm { margin-bottom: sp.$space-sm; }

package/src/utilities/spaces/_padding.scss

@@ -1,4 +1,5 @@
 @use "../../base/space" as sp;
+@use "../../base/mixins/meta-class" as mc;
 
 $_directions: (
   "": "",
@@ -10,24 +11,15 @@ $_directions: (
 
 @each $key, $value in sp.$spacers {
   @each $dir-name, $dir-prop in $_directions {
-    .qo-padding-#{$dir-name}#{$key} {
-      @if $dir-prop == "" {
-        padding: $value;
-      } @else {
-        padding-#{$dir-prop}: $value;
-      }
+    @if $dir-prop == "" {
+      @include mc.meta("qo-padding-#{$dir-name}#{$key}", (padding: $value));
+    } @else {
+      @include mc.meta("qo-padding-#{$dir-name}#{$key}", (padding-#{$dir-prop}: $value));
     }
   }
 
-  .qo-padding-x-#{$key} {
-    padding-left: $value;
-    padding-right: $value;
-  }
-
-  .qo-padding-y-#{$key} {
-    padding-top: $value;
-    padding-bottom: $value;
-  }
+  @include mc.meta("qo-padding-x-#{$key}", (padding-left: $value, padding-right: $value));
+  @include mc.meta("qo-padding-y-#{$key}", (padding-top: $value, padding-bottom: $value));
 }
 
 // @deprecated — typo aliases kept for backwards compatibility