procode-vs-theme 1.0.5 → 1.0.7

package/src/base/_custom-properties.scss

@@ -16,6 +16,7 @@
   --qo-text-dark: #{cl.$text-dark};
   --qo-text-light: #{cl.$text-light};
   --qo-text-tertiary: #{cl.$text-tertiary};
+  --qo-text-placeholder: #{cl.$text-placeholder};
 
   // Background colors
   --qo-bg-primary: #{cl.$background-primary};
@@ -26,8 +27,11 @@
   --qo-bg-info: #{cl.$background-info};
   --qo-bg-default: #{cl.$background-default};
   --qo-bg-dark: #{cl.$background-dark};
+  --qo-bg-dark-a: #{cl.$background-dark-a};
+  --qo-bg-medium: #{cl.$background-medium};
   --qo-bg-light: #{cl.$background-light};
   --qo-bg-tertiary: #{cl.$background-tertiary};
+  --qo-bg-disabled: #{cl.$background-disabled};
 
   // Border colors
   --qo-border-primary: #{cl.$border-primary};
@@ -89,6 +93,7 @@
   --qo-border-radius-full: #{bo.$border-radius-full};
 
   // Border widths
+  --qo-border-width-none: #{bo.$border-width-none};
   --qo-border-width-sm: #{bo.$border-width-sm};
   --qo-border-width-md: #{bo.$border-width-md};
   --qo-border-width-lg: #{bo.$border-width-lg};
@@ -99,4 +104,5 @@
   --qo-size-md: #{sz.$size-md};
   --qo-size-lg: #{sz.$size-lg};
   --qo-size-xl: #{sz.$size-xl};
+  --qo-size-xxl: #{sz.$size-xxl};
 }

package/src/base/_size.scss

@@ -2,6 +2,16 @@ $menu-size: 32px !default;
 
 $size-xs: 8px !default;
 $size-sm: 16px !default;
-$size-md: 32px !default;
-$size-lg: 48px !default;
-$size-xl: 64px !default;
+$size-md: 20px !default;
+$size-lg: 32px !default;
+$size-xl: 48px !default;
+$size-xxl: 64px !default;
+
+$sizing-values: (
+  xs: $size-xs,
+  sm: $size-sm,
+  md: $size-md,
+  lg: $size-lg,
+  xl: $size-xl,
+  xxl: $size-xxl,
+) !default;

package/src/base/_space.scss

@@ -7,6 +7,7 @@ $space-4: 1.5rem !default;
 $space-5: 3rem !default;
 
 // Legacy spacing aliases
+$space-xs: 2.5px !default;
 $space-sm: 5px !default;
 $space-md: 12.5px !default;
 $space-lg: 16.5px !default;
@@ -20,6 +21,7 @@ $spacers: (
   3: $space-3,
   4: $space-4,
   5: $space-5,
+  xs: $space-xs,
   sm: $space-sm,
   md: $space-md,
   lg: $space-lg,

package/src/base/mixins/_meta-class.scss

@@ -0,0 +1,26 @@
+/// Generates two tiers for each utility class:
+///
+/// 1. Regular class:   .qo-x { ... }                                    → specificity (0,1,0)
+/// 2. Force-important: [data-prc-col-important~="qo-x"] { ... !important }
+///
+/// @param {String} $class-name — CSS class name without the dot
+/// @param {Map}    $properties — map of (property: value) pairs
+///
+/// Usage:
+///   @include meta("qo-padding-sm", (padding: 8px));
+///   @include meta("qo-text-truncate", (overflow: hidden, text-overflow: ellipsis, white-space: nowrap));
+@mixin meta($class-name, $properties) {
+  // Normal — direct class usage
+  .#{$class-name} {
+    @each $prop, $val in $properties {
+      #{$prop}: $val;
+    }
+  }
+
+  // Force override — column metadata with important flag
+  [data-prc-col-important~="#{$class-name}"] {
+    @each $prop, $val in $properties {
+      #{$prop}: $val !important;
+    }
+  }
+}

package/src/components/_disabled.scss

@@ -0,0 +1,8 @@
+@use "../base/color" as cl;
+
+*:disabled,
+*[disabled],
+*.k-disabled {
+  background-color: cl.$background-disabled !important;
+  cursor: not-allowed !important;
+}

package/src/components/_placeholder.scss

@@ -0,0 +1,46 @@
+@use "../base/color" as cl;
+@use "../base/font" as ft;
+@use "../base/mixins/font_size-mx" as mx;
+
+::placeholder {
+  color: cl.$text-placeholder;
+  opacity: 1;
+  @include mx.font-size(ft.$font-size-sm, ft.$line-height-sm);
+}
+
+::-webkit-input-placeholder {
+  color: cl.$text-placeholder;
+  @include mx.font-size(ft.$font-size-sm, ft.$line-height-sm);
+}
+
+:-ms-input-placeholder {
+  color: cl.$text-placeholder;
+  @include mx.font-size(ft.$font-size-sm, ft.$line-height-sm);
+}
+
+.qo-placeholder-xs::placeholder {
+  @include mx.font-size(ft.$font-size-xs, ft.$line-height-xs);
+}
+
+.qo-placeholder-sm::placeholder {
+  @include mx.font-size(ft.$font-size-sm, ft.$line-height-sm);
+}
+
+.qo-placeholder-md::placeholder {
+  @include mx.font-size(ft.$font-size-md, ft.$line-height-md);
+}
+
+.qo-placeholder-italic::placeholder {
+  font-style: italic;
+}
+
+.qo-placeholder-primary::placeholder { color: cl.$text-primary; }
+.qo-placeholder-secondary::placeholder { color: cl.$text-secondary; }
+.qo-placeholder-success::placeholder { color: cl.$text-success; }
+.qo-placeholder-warning::placeholder { color: cl.$text-warning; }
+.qo-placeholder-danger::placeholder { color: cl.$text-danger; }
+.qo-placeholder-info::placeholder { color: cl.$text-info; }
+.qo-placeholder-default::placeholder { color: cl.$text-default; }
+.qo-placeholder-dark::placeholder { color: cl.$text-dark; }
+.qo-placeholder-light::placeholder { color: cl.$text-light; }
+.qo-placeholder-tertiary::placeholder { color: cl.$text-tertiary; }

package/src/components.ts

@@ -1,20 +1,23 @@
-// VS Theme Components Export
-// Provides access to all component styles
-
-export const buttons = './components/_buttons.scss';
-export const input = './components/_input.scss';
-export const cards = './components/_cards.scss';
-
-// All components combined
-export const allComponents = [
-  buttons,
-  input,
-  cards
-];
-
-export default {
-  buttons,
-  input,
-  cards,
-  all: allComponents
-};
+// VS Theme Components Export
+// Provides access to all component styles
+
+export const buttons = './components/_buttons.scss';
+export const input = './components/_input.scss';
+export const placeholder = './components/_placeholder.scss';
+export const cards = './components/_cards.scss';
+
+// All components combined
+export const allComponents = [
+  buttons,
+  input,
+  placeholder,
+  cards
+];
+
+export default {
+  buttons,
+  input,
+  placeholder,
+  cards,
+  all: allComponents
+};

package/src/index.scss

@@ -24,8 +24,6 @@
 // Box shadow
 @forward "./utilities/box-shadow/index.scss";
 
-// Size
-@forward "./utilities/size/index.scss";
 
 // Display
 @forward "./utilities/display";
@@ -66,6 +64,8 @@
 // Components
 @forward "./components/buttons";
 @forward "./components/input";
+@forward "./components/placeholder";
+@forward "./components/disabled";
 
 // Layout
 @forward "./layout/drawer";

package/src/utilities/_cursor.scss

@@ -1,7 +1,7 @@
+@use "../base/mixins/meta-class" as mc;
+
 $_cursors: auto, default, pointer, wait, text, move, not-allowed, grab, grabbing;
 
 @each $cursor in $_cursors {
-  .qo-cursor-#{$cursor} {
-    cursor: $cursor;
-  }
+  @include mc.meta("qo-cursor-#{$cursor}", (cursor: $cursor));
 }

package/src/utilities/_display.scss

@@ -1,20 +1,17 @@
 @use "../base/mixins/breakpoints" as bp;
+@use "../base/mixins/meta-class" as mc;
 
 $_displays: none, inline, inline-block, block, flex, inline-flex, grid, inline-grid, table, table-row, table-cell;
 
 @each $display in $_displays {
-  .qo-d-#{$display} {
-    display: $display;
-  }
+  @include mc.meta("qo-d-#{$display}", (display: $display));
 }
 
 // Responsive variants
 @each $bp-name, $bp-value in bp.$breakpoints {
   @media (min-width: $bp-value) {
     @each $display in $_displays {
-      .qo-d-#{$bp-name}-#{$display} {
-        display: $display;
-      }
+      @include mc.meta("qo-d-#{$bp-name}-#{$display}", (display: $display));
     }
   }
 }

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));