procode-vs-theme 1.0.5 → 1.0.7

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

package/src/utilities/typography/_color.scss

@@ -1,38 +1,20 @@
 @use "sass:color";
 @use "../../base/color" as cl;
+@use "../../base/mixins/meta-class" as mc;
 
-.qo-text-primary {
-  color: cl.$text-primary;
-}
-.qo-text-secondary {
-  color: cl.$text-secondary;
-}
-.qo-text-success {
-  color: cl.$text-success;
-}
-.qo-text-warning {
-  color: cl.$text-warning;
-}
-.qo-text-danger {
-  color: cl.$text-danger;
-}
-.qo-text-info {
-  color: cl.$text-info;
-}
-.qo-text-default {
-  color: cl.$text-default;
-}
-.qo-text-dark {
-  color: cl.$text-dark;
-}
-.qo-text-light {
-  color: cl.$text-light;
-}
-.qo-text-tertiary {
-  color: cl.$text-tertiary;
-}
+@include mc.meta("qo-text-primary", (color: cl.$text-primary));
+@include mc.meta("qo-text-secondary", (color: cl.$text-secondary));
+@include mc.meta("qo-text-success", (color: cl.$text-success));
+@include mc.meta("qo-text-warning", (color: cl.$text-warning));
+@include mc.meta("qo-text-danger", (color: cl.$text-danger));
+@include mc.meta("qo-text-info", (color: cl.$text-info));
+@include mc.meta("qo-text-default", (color: cl.$text-default));
+@include mc.meta("qo-text-dark", (color: cl.$text-dark));
+@include mc.meta("qo-text-light", (color: cl.$text-light));
+@include mc.meta("qo-text-tertiary", (color: cl.$text-tertiary));
 
 // Higher specificity variants when used with .qo-btn (beats Kendo .k-button-* selectors)
+// Intentionally NOT wrapped in meta() — button overrides must stay high specificity
 .qo-btn {
   &.qo-text-primary { color: cl.$text-primary; &:hover, &:focus, &:active { color: cl.$text-primary-hover; } }
   &.qo-text-secondary { color: cl.$text-secondary; &:hover, &:focus, &:active { color: cl.$text-dark; } }

package/src/utilities/typography/_font.scss

@@ -1,63 +1,35 @@
-@use "../../base/font" as ft;
-@use "../../base/mixins/font_size-mx" as mx;
-@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap");
-
-.qo-font-family-primary {
-  font-family: ft.$font-family-primary;
-}
-
-.qo-font-family-secondary {
-  font-family: ft.$font-family-secondary;
-}
-
-.qo-font-xxs {
-  @include mx.font-size(ft.$font-size-xxs, ft.$line-height-xxs);
-}
-.qo-font-xs {
-  @include mx.font-size(ft.$font-size-xs, ft.$line-height-xs);
-}
-.qo-font-sm {
-  @include mx.font-size(ft.$font-size-sm, ft.$line-height-sm);
-}
-.qo-font-md {
-  @include mx.font-size(ft.$font-size-md, ft.$line-height-md);
-}
-.qo-font-lg {
-  @include mx.font-size(ft.$font-size-lg, ft.$line-height-lg);
-}
-.qo-font-xl {
-  @include mx.font-size(ft.$font-size-xl, ft.$line-height-xl);
-}
-.qo-font-xxl {
-  @include mx.font-size(ft.$font-size-xxl, ft.$line-height-xxl);
-}
-
-.qo-font-weight-light {
-  font-weight: ft.$font-weight-light;
-}
-.qo-font-weight-regular {
-  font-weight: ft.$font-weight-regular;
-}
-.qo-font-weight-medium {
-  font-weight: ft.$font-weight-medium;
-}
-.qo-font-weight-semibold {
-  font-weight: ft.$font-weight-semibold;
-}
-.qo-font-weight-bold {
-  font-weight: ft.$font-weight-bold;
-}
-.qo-font-weight-extrabold {
-  font-weight: ft.$font-weight-extrabold;
-}
-.qo-validation {
-  @include mx.font-size(ft.$font-size-md, ft.$line-height-md);
-  font-weight: ft.$font-weight-light;
-  margin-top: 2px;
-}
-
-h4 {
-  @include mx.font-size(ft.$font-size-md, ft.$line-height-md);
-  font-family: ft.$font-family-primary;
-  font-weight: ft.$font-weight-medium;
-}
+@use "../../base/font" as ft;
+@use "../../base/mixins/meta-class" as mc;
+@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap");
+
+@include mc.meta("qo-font-family-primary", (font-family: ft.$font-family-primary));
+@include mc.meta("qo-font-family-secondary", (font-family: ft.$font-family-secondary));
+
+@include mc.meta("qo-font-xxs", (font-size: ft.$font-size-xxs, line-height: ft.$line-height-xxs));
+@include mc.meta("qo-font-xs", (font-size: ft.$font-size-xs, line-height: ft.$line-height-xs));
+@include mc.meta("qo-font-sm", (font-size: ft.$font-size-sm, line-height: ft.$line-height-sm));
+@include mc.meta("qo-font-md", (font-size: ft.$font-size-md, line-height: ft.$line-height-md));
+@include mc.meta("qo-font-lg", (font-size: ft.$font-size-lg, line-height: ft.$line-height-lg));
+@include mc.meta("qo-font-xl", (font-size: ft.$font-size-xl, line-height: ft.$line-height-xl));
+@include mc.meta("qo-font-xxl", (font-size: ft.$font-size-xxl, line-height: ft.$line-height-xxl));
+
+@include mc.meta("qo-font-weight-light", (font-weight: ft.$font-weight-light));
+@include mc.meta("qo-font-weight-regular", (font-weight: ft.$font-weight-regular));
+@include mc.meta("qo-font-weight-medium", (font-weight: ft.$font-weight-medium));
+@include mc.meta("qo-font-weight-semibold", (font-weight: ft.$font-weight-semibold));
+@include mc.meta("qo-font-weight-bold", (font-weight: ft.$font-weight-bold));
+@include mc.meta("qo-font-weight-extrabold", (font-weight: ft.$font-weight-extrabold));
+
+.qo-validation {
+  font-size: ft.$font-size-md;
+  line-height: ft.$line-height-md;
+  font-weight: ft.$font-weight-light;
+  margin-top: 2px;
+}
+
+h4 {
+  font-size: ft.$font-size-md;
+  line-height: ft.$line-height-md;
+  font-family: ft.$font-family-primary;
+  font-weight: ft.$font-weight-medium;
+}

package/dist/src/utilities/size/index.scss

@@ -1,9 +0,0 @@
-@use "../../base/size" as sz;
-
-.qo-size-sm {
-  height: sz.$size-sm;
-}
-
-.qo-size-md {
-  height: sz.$size-md;
-}

package/src/utilities/size/index.scss

@@ -1,9 +0,0 @@
-@use "../../base/size" as sz;
-
-.qo-size-sm {
-  height: sz.$size-sm;
-}
-
-.qo-size-md {
-  height: sz.$size-md;
-}