procode-vs-theme 1.0.4 → 1.0.6

package/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "procode-vs-theme",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "VarStreet VS Theme - A comprehensive SCSS theme package for ProCode framework with variables, components, layout, and utilities for flexible design system usage",
   "type": "module",
   "main": "dist/index.js",
@@ -46,7 +46,7 @@
     "dev": "rollup -c --watch",
     "clean": "rimraf dist",
     "prebuild": "npm run clean",
-    "prepublishOnly": "npm run build",
+    "_prepublishOnly": "npm run build",
     "postbuild": "node -e \"const fs=require('fs');const path=require('path');function cpR(s,d){fs.mkdirSync(d,{recursive:true});fs.readdirSync(s).forEach(f=>{const sp=path.join(s,f),dp=path.join(d,f);fs.statSync(sp).isDirectory()?cpR(sp,dp):f.endsWith('.scss')&&fs.copyFileSync(sp,dp)});}cpR('src','dist/src');\""
   },
   "keywords": [

package/src/base/_border.scss

@@ -6,6 +6,7 @@ $border-radius-xl: 1rem !default;
 $border-radius-pill: 50rem !default;
 $border-radius-full: 50% !default;
 
+$border-width-none: 0 !default;
 $border-width-sm: 1px !default;
 $border-width-md: 2px !default;
 $border-width-lg: 4px !default;

package/src/base/_color.scss

@@ -21,13 +21,16 @@ $background-warning: #f97d0b !default;
 $background-danger: #e74c3c !default;
 $background-info: #17baff !default;
 $background-default: #ffffff !default;
-$background-dark: #29466e !default;
+$background-medium: #29466e !default;
+$background-dark: #0f233d !default;
 $background-dark-a: #0f233d33 !default;
-$background-light: #F7F7F7 !default;
+$background-light: #f7f7f7 !default;
 $background-tertiary: #ed5085 !default;
 $background-lime: #f3de1d !default;
 $background-transparent: color.change(#000000, $alpha: 0.1) !default;
 
+$background-disabled: #d9d9d9 !default;
+
 $border-primary: #2666e3 !default;
 $border-secondary: #c6c6c6 !default;
 $border-success: #67b926 !default;

package/src/base/_custom-properties.scss

@@ -26,8 +26,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 +92,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 +103,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;
+    }
+  }
+}