procode-vs-theme 1.0.5 → 1.0.6

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