procode-vs-theme 1.0.2 → 1.0.4

package/dist/utilities.js

@@ -12,7 +12,7 @@ const typographyColor = './utilities/typography/_color.scss';
 const typography = [typographyFont, typographyColor];
 // Background utilities
 const backgroundColor = './utilities/background-color/index.scss';
-// Border utilities  
+// Border utilities
 const borderColor = './utilities/border/_border-color.scss';
 const borderRadius = './utilities/border/_border-radius.scss';
 const borderSize = './utilities/border/_border-size.scss';
@@ -26,6 +26,24 @@ const spacing = [gap, margin, padding];
 const boxShadow = './utilities/box-shadow/index.scss';
 // Size utilities
 const size = './utilities/size/index.scss';
+// Display utilities
+const display = './utilities/_display.scss';
+// Flex utilities
+const flex = './utilities/_flex.scss';
+// Text utilities
+const text = './utilities/_text.scss';
+// Position utilities
+const position = './utilities/_position.scss';
+// Overflow utilities
+const overflow = './utilities/_overflow.scss';
+// Opacity utilities
+const opacity = './utilities/_opacity.scss';
+// Cursor utilities
+const cursor = './utilities/_cursor.scss';
+// Sizing utilities (width/height)
+const sizing = './utilities/_sizing.scss';
+// Visibility utilities
+const visibility = './utilities/_visibility.scss';
 // All utilities combined
 const allUtilities = [
     reset,
@@ -34,7 +52,16 @@ const allUtilities = [
     ...borders,
     ...spacing,
     boxShadow,
-    size
+    size,
+    display,
+    flex,
+    text,
+    position,
+    overflow,
+    opacity,
+    cursor,
+    sizing,
+    visibility,
 ];
 var utilities = {
     reset,
@@ -58,6 +85,15 @@ var utilities = {
     },
     boxShadow,
     size,
+    display,
+    flex,
+    text,
+    position,
+    overflow,
+    opacity,
+    cursor,
+    sizing,
+    visibility,
     all: allUtilities
 };
 
@@ -68,14 +104,23 @@ exports.borderRadius = borderRadius;
 exports.borderSize = borderSize;
 exports.borders = borders;
 exports.boxShadow = boxShadow;
+exports.cursor = cursor;
 exports.default = utilities;
+exports.display = display;
+exports.flex = flex;
 exports.gap = gap;
 exports.margin = margin;
+exports.opacity = opacity;
+exports.overflow = overflow;
 exports.padding = padding;
+exports.position = position;
 exports.reset = reset;
 exports.size = size;
+exports.sizing = sizing;
 exports.spacing = spacing;
+exports.text = text;
 exports.typography = typography;
 exports.typographyColor = typographyColor;
 exports.typographyFont = typographyFont;
+exports.visibility = visibility;
 //# sourceMappingURL=utilities.js.map

package/dist/utilities.js.map

@@ -1 +1 @@
-{"version":3,"file":"utilities.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"utilities.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/variables.esm.js

@@ -9,7 +9,6 @@ const sizes = './base/_size.scss';
 // Mixins
 const mediaQueryMixins = './base/mixins/_media-query-mx.scss';
 const fontSizeMixins = './base/mixins/_font_size-mx.scss';
-const applyThemeMixins = './base/mixins/_apply-theme.scss';
 // All base variables combined
 const allVariables = [
     colors,
@@ -19,7 +18,6 @@ const allVariables = [
     sizes,
     mediaQueryMixins,
     fontSizeMixins,
-    applyThemeMixins
 ];
 var variables = {
     colors,
@@ -30,10 +28,9 @@ var variables = {
     mixins: {
         mediaQuery: mediaQueryMixins,
         fontSize: fontSizeMixins,
-        applyTheme: applyThemeMixins
     },
     all: allVariables
 };
 
-export { allVariables, applyThemeMixins, borders, colors, variables as default, fontSizeMixins, fonts, mediaQueryMixins, sizes, spacing };
+export { allVariables, borders, colors, variables as default, fontSizeMixins, fonts, mediaQueryMixins, sizes, spacing };
 //# sourceMappingURL=variables.esm.js.map

package/dist/variables.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"variables.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"variables.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/variables.js

@@ -13,7 +13,6 @@ const sizes = './base/_size.scss';
 // Mixins
 const mediaQueryMixins = './base/mixins/_media-query-mx.scss';
 const fontSizeMixins = './base/mixins/_font_size-mx.scss';
-const applyThemeMixins = './base/mixins/_apply-theme.scss';
 // All base variables combined
 const allVariables = [
     colors,
@@ -23,7 +22,6 @@ const allVariables = [
     sizes,
     mediaQueryMixins,
     fontSizeMixins,
-    applyThemeMixins
 ];
 var variables = {
     colors,
@@ -34,13 +32,11 @@ var variables = {
     mixins: {
         mediaQuery: mediaQueryMixins,
         fontSize: fontSizeMixins,
-        applyTheme: applyThemeMixins
     },
     all: allVariables
 };
 
 exports.allVariables = allVariables;
-exports.applyThemeMixins = applyThemeMixins;
 exports.borders = borders;
 exports.colors = colors;
 exports.default = variables;

package/dist/variables.js.map

@@ -1 +1 @@
-{"version":3,"file":"variables.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"variables.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "procode-vs-theme",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "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",
@@ -47,7 +47,7 @@
     "clean": "rimraf dist",
     "prebuild": "npm run clean",
     "prepublishOnly": "npm run build",
-    "postbuild": "powershell -Command \"New-Item -ItemType Directory -Path dist/src -Force; Copy-Item src/*.scss dist/src/\""
+    "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": [
     "theme",

package/src/base/_border.scss

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

package/src/base/_color.scss

@@ -1,3 +1,5 @@
+@use "sass:color";
+
 $text-primary: #2666e3 !default;
 $text-secondary: #595959 !default;
 $text-success: #5ca224 !default;
@@ -24,7 +26,7 @@ $background-dark-a: #0f233d33 !default;
 $background-light: #F7F7F7 !default;
 $background-tertiary: #ed5085 !default;
 $background-lime: #f3de1d !default;
-$background-transparent: rgba(0, 0, 0, 0.1) !default;
+$background-transparent: color.change(#000000, $alpha: 0.1) !default;
 
 $border-primary: #2666e3 !default;
 $border-secondary: #c6c6c6 !default;

package/src/base/_custom-properties.scss

@@ -0,0 +1,102 @@
+@use "color" as cl;
+@use "font" as ft;
+@use "space" as sp;
+@use "border" as bo;
+@use "size" as sz;
+
+:root {
+  // Text colors
+  --qo-text-primary: #{cl.$text-primary};
+  --qo-text-secondary: #{cl.$text-secondary};
+  --qo-text-success: #{cl.$text-success};
+  --qo-text-warning: #{cl.$text-warning};
+  --qo-text-danger: #{cl.$text-danger};
+  --qo-text-info: #{cl.$text-info};
+  --qo-text-default: #{cl.$text-default};
+  --qo-text-dark: #{cl.$text-dark};
+  --qo-text-light: #{cl.$text-light};
+  --qo-text-tertiary: #{cl.$text-tertiary};
+
+  // Background colors
+  --qo-bg-primary: #{cl.$background-primary};
+  --qo-bg-secondary: #{cl.$background-secondary};
+  --qo-bg-success: #{cl.$background-success};
+  --qo-bg-warning: #{cl.$background-warning};
+  --qo-bg-danger: #{cl.$background-danger};
+  --qo-bg-info: #{cl.$background-info};
+  --qo-bg-default: #{cl.$background-default};
+  --qo-bg-dark: #{cl.$background-dark};
+  --qo-bg-light: #{cl.$background-light};
+  --qo-bg-tertiary: #{cl.$background-tertiary};
+
+  // Border colors
+  --qo-border-primary: #{cl.$border-primary};
+  --qo-border-secondary: #{cl.$border-secondary};
+  --qo-border-success: #{cl.$border-success};
+  --qo-border-warning: #{cl.$border-warning};
+  --qo-border-danger: #{cl.$border-danger};
+  --qo-border-info: #{cl.$border-info};
+  --qo-border-light: #{cl.$border-light};
+  --qo-border-dark: #{cl.$border-dark};
+  --qo-border-default: #{cl.$border-default};
+
+  // Font families
+  --qo-font-family-primary: #{ft.$font-family-primary};
+  --qo-font-family-secondary: #{ft.$font-family-secondary};
+
+  // Font sizes
+  --qo-font-size-xxs: #{ft.$font-size-xxs};
+  --qo-font-size-xs: #{ft.$font-size-xs};
+  --qo-font-size-sm: #{ft.$font-size-sm};
+  --qo-font-size-md: #{ft.$font-size-md};
+  --qo-font-size-lg: #{ft.$font-size-lg};
+  --qo-font-size-xl: #{ft.$font-size-xl};
+  --qo-font-size-xxl: #{ft.$font-size-xxl};
+  --qo-font-size-h1: #{ft.$font-size-h1};
+  --qo-font-size-h2: #{ft.$font-size-h2};
+  --qo-font-size-h3: #{ft.$font-size-h3};
+  --qo-font-size-h4: #{ft.$font-size-h4};
+  --qo-font-size-h5: #{ft.$font-size-h5};
+  --qo-font-size-h6: #{ft.$font-size-h6};
+
+  // Font weights
+  --qo-font-weight-light: #{ft.$font-weight-light};
+  --qo-font-weight-regular: #{ft.$font-weight-regular};
+  --qo-font-weight-medium: #{ft.$font-weight-medium};
+  --qo-font-weight-semibold: #{ft.$font-weight-semibold};
+  --qo-font-weight-bold: #{ft.$font-weight-bold};
+  --qo-font-weight-extrabold: #{ft.$font-weight-extrabold};
+
+  // Spacing
+  --qo-space-0: #{sp.$space-0};
+  --qo-space-1: #{sp.$space-1};
+  --qo-space-2: #{sp.$space-2};
+  --qo-space-3: #{sp.$space-3};
+  --qo-space-4: #{sp.$space-4};
+  --qo-space-5: #{sp.$space-5};
+  --qo-space-sm: #{sp.$space-sm};
+  --qo-space-md: #{sp.$space-md};
+  --qo-space-lg: #{sp.$space-lg};
+  --qo-space-xl: #{sp.$space-xl};
+
+  // Border radius
+  --qo-border-radius-0: #{bo.$border-radius-0};
+  --qo-border-radius-sm: #{bo.$border-radius-sm};
+  --qo-border-radius-md: #{bo.$border-radius-md};
+  --qo-border-radius-lg: #{bo.$border-radius-lg};
+  --qo-border-radius-xl: #{bo.$border-radius-xl};
+  --qo-border-radius-pill: #{bo.$border-radius-pill};
+  --qo-border-radius-full: #{bo.$border-radius-full};
+
+  // Border widths
+  --qo-border-width-sm: #{bo.$border-width-sm};
+  --qo-border-width-md: #{bo.$border-width-md};
+  --qo-border-width-lg: #{bo.$border-width-lg};
+
+  // Sizes
+  --qo-size-xs: #{sz.$size-xs};
+  --qo-size-sm: #{sz.$size-sm};
+  --qo-size-md: #{sz.$size-md};
+  --qo-size-lg: #{sz.$size-lg};
+  --qo-size-xl: #{sz.$size-xl};
+}

package/src/base/_font.scss

@@ -1,26 +1,37 @@
-$font-family-primary: "IBM Plex Sans", sans-serif !default;
-$font-family-secondary: SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono",
-  "Ubuntu Mono", "Lucida Console", "Courier New", monospace !default;
-
-$font-size-xxs: 8px !default;
-$font-size-xs: 10px !default;
-$font-size-sm: 11px !default;
-$font-size-md: 12px !default;
-$font-size-lg: 14px !default;
-$font-size-xl: 16px !default;
-$font-size-xxl: 18px !default;
-
-$line-height-xxs: 1.25 !default;
-$line-height-xs: 1.3 !default;
-$line-height-sm: 1.27 !default;
-$line-height-md: 1.33 !default;
-$line-height-lg: 1.29 !default;
-$line-height-xl: 1.31 !default;
-$line-height-xxl: 1.28 !default;
-
-$font-weight-light: 300 !default;
-$font-weight-regular: 400 !default;
-$font-weight-medium: 500 !default;
-$font-weight-semibold: 600 !default;
-$font-weight-bold: 700 !default;
-$font-weight-extrabold: 800 !default;
+$font-family-primary: "IBM Plex Sans", sans-serif !default;
+$font-family-secondary: SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono",
+  "Ubuntu Mono", "Lucida Console", "Courier New", monospace !default;
+
+// Base font sizes
+$font-size-xxs: 8px !default;
+$font-size-xs: 10px !default;
+$font-size-sm: 11px !default;
+$font-size-md: 12px !default;
+$font-size-lg: 14px !default;
+$font-size-xl: 16px !default;
+$font-size-xxl: 18px !default;
+
+// Heading font sizes
+$font-size-h6: 1rem !default;
+$font-size-h5: 1.25rem !default;
+$font-size-h4: 1.5rem !default;
+$font-size-h3: 1.75rem !default;
+$font-size-h2: 2rem !default;
+$font-size-h1: 2.5rem !default;
+
+// Line heights
+$line-height-xxs: 1.25 !default;
+$line-height-xs: 1.3 !default;
+$line-height-sm: 1.27 !default;
+$line-height-md: 1.33 !default;
+$line-height-lg: 1.29 !default;
+$line-height-xl: 1.31 !default;
+$line-height-xxl: 1.28 !default;
+
+// Font weights
+$font-weight-light: 300 !default;
+$font-weight-regular: 400 !default;
+$font-weight-medium: 500 !default;
+$font-weight-semibold: 600 !default;
+$font-weight-bold: 700 !default;
+$font-weight-extrabold: 800 !default;

package/src/base/_size.scss

@@ -1,4 +1,7 @@
-$menu-size: 32px;
-
-$size-sm: 16px;
-$size-md: 32px;
+$menu-size: 32px !default;
+
+$size-xs: 8px !default;
+$size-sm: 16px !default;
+$size-md: 32px !default;
+$size-lg: 48px !default;
+$size-xl: 64px !default;

package/src/base/_space.scss

@@ -1,4 +1,27 @@
-$space-sm: 5px !default;
-$space-md: 12.5px !default;
-$space-lg: 16.5px !default;
-$space-xl: 21px !default;
+// Bootstrap-compatible spacing scale (rem-based)
+$space-0: 0 !default;
+$space-1: 0.25rem !default;
+$space-2: 0.5rem !default;
+$space-3: 1rem !default;
+$space-4: 1.5rem !default;
+$space-5: 3rem !default;
+
+// Legacy spacing aliases
+$space-sm: 5px !default;
+$space-md: 12.5px !default;
+$space-lg: 16.5px !default;
+$space-xl: 21px !default;
+
+// Spacers map for loop-based utility generation
+$spacers: (
+  0: $space-0,
+  1: $space-1,
+  2: $space-2,
+  3: $space-3,
+  4: $space-4,
+  5: $space-5,
+  sm: $space-sm,
+  md: $space-md,
+  lg: $space-lg,
+  xl: $space-xl,
+) !default;

package/src/base/mixins/_breakpoints.scss

@@ -0,0 +1,27 @@
+@use "sass:map";
+@use "sass:math";
+
+$breakpoints: (
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+  xxl: 1366px,
+) !default;
+
+@mixin respond-above($bp) {
+  @if map.has-key($breakpoints, $bp) {
+    @media (min-width: map.get($breakpoints, $bp)) {
+      @content;
+    }
+  }
+}
+
+@mixin respond-below($bp) {
+  @if map.has-key($breakpoints, $bp) {
+    $max: map.get($breakpoints, $bp);
+    @media (max-width: calc(#{$max} - 0.02px)) {
+      @content;
+    }
+  }
+}

package/src/baseExports.ts

@@ -10,8 +10,6 @@ export const sizes = './base/_size.scss';
 // Mixins
 export const mediaQueryMixins = './base/mixins/_media-query-mx.scss';
 export const fontSizeMixins = './base/mixins/_font_size-mx.scss';
-export const applyThemeMixins = './base/mixins/_apply-theme.scss';
-
 // All base styles combined
 export const allBase = [
   colors,
@@ -21,7 +19,6 @@ export const allBase = [
   sizes,
   mediaQueryMixins,
   fontSizeMixins,
-  applyThemeMixins
 ];
 
 export default {
@@ -33,7 +30,6 @@ export default {
   mixins: {
     mediaQuery: mediaQueryMixins,
     fontSize: fontSizeMixins,
-    applyTheme: applyThemeMixins
   },
   all: allBase
 };