procode-vs-theme 1.0.2 → 1.0.4

package/dist/src/utilities/_overflow.scss

@@ -0,0 +1,7 @@
+$_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; }
+}

package/dist/src/utilities/_position.scss

@@ -0,0 +1,26 @@
+.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; }
+
+// 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; }
+}
+
+// Center transform helpers
+.qo-translate-middle {
+  transform: translate(-50%, -50%);
+}
+.qo-translate-middle-x {
+  transform: translateX(-50%);
+}
+.qo-translate-middle-y {
+  transform: translateY(-50%);
+}

package/dist/src/utilities/_sizing.scss

@@ -0,0 +1,13 @@
+$_sizing-values: (25: 25%, 50: 50%, 75: 75%, 100: 100%, auto: auto);
+
+@each $key, $value in $_sizing-values {
+  .qo-w-#{$key} { width: $value; }
+  .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; }

package/dist/src/utilities/_text.scss

@@ -0,0 +1,49 @@
+@use "../base/mixins/breakpoints" as bp;
+
+// 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; }
+
+// 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;
+}
+
+// Text transform
+.qo-text-uppercase { text-transform: uppercase; }
+.qo-text-lowercase { text-transform: lowercase; }
+.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; }
+
+// Font style
+.qo-fst-italic { font-style: italic; }
+.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; }
+
+// 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; }
+  }
+}

package/dist/src/utilities/_visibility.scss

@@ -0,0 +1,2 @@
+.qo-visible { visibility: visible; }
+.qo-invisible { visibility: hidden; }

package/dist/src/utilities/background-color/index.scss

@@ -0,0 +1,37 @@
+@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;
+}

package/dist/src/{_border-radius.scss → utilities/border/_border-radius.scss}

@@ -1,17 +1,29 @@
-@use "../../base/border" as bo;
-
-.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-full {
-  border-radius: bo.$border-radius-full;
-}
+@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;
+}

package/dist/src/utilities/box-shadow/index.scss

@@ -0,0 +1,17 @@
+@use "../../base/color" as cl;
+
+.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;
+}

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

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

package/dist/src/utilities/spaces/_gap.scss

@@ -0,0 +1,15 @@
+@use "../../base/space" as sp;
+
+@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;
+  }
+}

package/dist/src/utilities/spaces/_margin.scss

@@ -0,0 +1,46 @@
+@use "../../base/space" as sp;
+
+$_directions: (
+  "": "",
+  "top-": "top",
+  "right-": "right",
+  "bottom-": "bottom",
+  "left-": "left",
+);
+
+@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;
+      }
+    }
+  }
+
+  .qo-margin-x-#{$key} {
+    margin-left: $value;
+    margin-right: $value;
+  }
+
+  .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; }
+
+// @deprecated — typo aliases kept for backwards compatibility
+.qo-margin-botttom-sm { margin-bottom: sp.$space-sm; }
+.qo-margin-botttom-md { margin-bottom: sp.$space-md; }
+.qo-margin-botttom-lg { margin-bottom: sp.$space-lg; }
+.qo-margin-botttom-xl { margin-bottom: sp.$space-xl; }

package/dist/src/utilities/spaces/_padding.scss

@@ -0,0 +1,37 @@
+@use "../../base/space" as sp;
+
+$_directions: (
+  "": "",
+  "top-": "top",
+  "right-": "right",
+  "bottom-": "bottom",
+  "left-": "left",
+);
+
+@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;
+      }
+    }
+  }
+
+  .qo-padding-x-#{$key} {
+    padding-left: $value;
+    padding-right: $value;
+  }
+
+  .qo-padding-y-#{$key} {
+    padding-top: $value;
+    padding-bottom: $value;
+  }
+}
+
+// @deprecated — typo aliases kept for backwards compatibility
+.qo-padding-botttom-sm { padding-bottom: sp.$space-sm; }
+.qo-padding-botttom-md { padding-bottom: sp.$space-md; }
+.qo-padding-botttom-lg { padding-bottom: sp.$space-lg; }
+.qo-padding-botttom-xl { padding-bottom: sp.$space-xl; }

package/dist/src/utilities/typography/_color.scss

@@ -0,0 +1,51 @@
+@use "sass:color";
+@use "../../base/color" as cl;
+
+.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;
+}
+
+// Higher specificity variants when used with .qo-btn (beats Kendo .k-button-* selectors)
+.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; } }
+  &.qo-text-success { color: cl.$text-success; &:hover, &:focus, &:active { color: color.adjust(cl.$text-success, $lightness: -10%); } }
+  &.qo-text-warning { color: cl.$text-warning; &:hover, &:focus, &:active { color: color.adjust(cl.$text-warning, $lightness: -10%); } }
+  &.qo-text-danger { color: cl.$text-danger; &:hover, &:focus, &:active { color: cl.$text-danger-hover; } }
+  &.qo-text-info { color: cl.$text-info; &:hover, &:focus, &:active { color: color.adjust(cl.$text-info, $lightness: -10%); } }
+  &.qo-text-default { color: cl.$text-default; &:hover, &:focus, &:active { color: cl.$text-dark; } }
+  &.qo-text-dark { color: cl.$text-dark; &:hover, &:focus, &:active { color: color.adjust(cl.$text-dark, $lightness: -10%); } }
+  &.qo-text-light { color: cl.$text-light; &:hover, &:focus, &:active { color: cl.$text-light; } }
+  &.qo-text-tertiary { color: cl.$text-tertiary; &:hover, &:focus, &:active { color: color.adjust(cl.$text-tertiary, $lightness: -10%); } }
+}
+
+.qo-validation {
+  color: cl.$text-danger;
+}

package/dist/src/utilities.ts

@@ -0,0 +1,112 @@
+// VS Theme Utilities Export
+// Provides access to all utility styles
+
+// Reset and base utilities
+export const reset = './utilities/_reset.scss';
+
+// Typography utilities
+export const typographyFont = './utilities/typography/_font.scss';
+export const typographyColor = './utilities/typography/_color.scss';
+export const typography = [typographyFont, typographyColor];
+
+// Background utilities
+export const backgroundColor = './utilities/background-color/index.scss';
+
+// Border utilities
+export const borderColor = './utilities/border/_border-color.scss';
+export const borderRadius = './utilities/border/_border-radius.scss';
+export const borderSize = './utilities/border/_border-size.scss';
+export const borders = [borderColor, borderRadius, borderSize];
+
+// Spacing utilities
+export const gap = './utilities/spaces/_gap.scss';
+export const margin = './utilities/spaces/_margin.scss';
+export const padding = './utilities/spaces/_padding.scss';
+export const spacing = [gap, margin, padding];
+
+// Box shadow utilities
+export const boxShadow = './utilities/box-shadow/index.scss';
+
+// Size utilities
+export const size = './utilities/size/index.scss';
+
+// Display utilities
+export const display = './utilities/_display.scss';
+
+// Flex utilities
+export const flex = './utilities/_flex.scss';
+
+// Text utilities
+export const text = './utilities/_text.scss';
+
+// Position utilities
+export const position = './utilities/_position.scss';
+
+// Overflow utilities
+export const overflow = './utilities/_overflow.scss';
+
+// Opacity utilities
+export const opacity = './utilities/_opacity.scss';
+
+// Cursor utilities
+export const cursor = './utilities/_cursor.scss';
+
+// Sizing utilities (width/height)
+export const sizing = './utilities/_sizing.scss';
+
+// Visibility utilities
+export const visibility = './utilities/_visibility.scss';
+
+// All utilities combined
+export const allUtilities = [
+  reset,
+  ...typography,
+  backgroundColor,
+  ...borders,
+  ...spacing,
+  boxShadow,
+  size,
+  display,
+  flex,
+  text,
+  position,
+  overflow,
+  opacity,
+  cursor,
+  sizing,
+  visibility,
+];
+
+export default {
+  reset,
+  typography: {
+    font: typographyFont,
+    color: typographyColor,
+    all: typography
+  },
+  backgroundColor,
+  borders: {
+    color: borderColor,
+    radius: borderRadius,
+    size: borderSize,
+    all: borders
+  },
+  spacing: {
+    gap,
+    margin,
+    padding,
+    all: spacing
+  },
+  boxShadow,
+  size,
+  display,
+  flex,
+  text,
+  position,
+  overflow,
+  opacity,
+  cursor,
+  sizing,
+  visibility,
+  all: allUtilities
+};

package/dist/src/variables.ts

@@ -0,0 +1,36 @@
+// VS Theme Variables Export
+// Provides access to all theme variables and base styles
+
+// Base variables and mixins
+export const colors = './base/_color.scss';
+export const fonts = './base/_font.scss'; 
+export const spacing = './base/_space.scss';
+export const borders = './base/_border.scss';
+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';
+// All base variables combined
+export const allVariables = [
+  colors,
+  fonts,
+  spacing,
+  borders,
+  sizes,
+  mediaQueryMixins,
+  fontSizeMixins,
+];
+
+export default {
+  colors,
+  fonts,
+  spacing,
+  borders,
+  sizes,
+  mixins: {
+    mediaQuery: mediaQueryMixins,
+    fontSize: fontSizeMixins,
+  },
+  all: allVariables
+};

package/dist/types/baseExports.d.ts

@@ -5,7 +5,6 @@ export declare const borders = "./base/_border.scss";
 export declare const sizes = "./base/_size.scss";
 export declare const mediaQueryMixins = "./base/mixins/_media-query-mx.scss";
 export declare const fontSizeMixins = "./base/mixins/_font_size-mx.scss";
-export declare const applyThemeMixins = "./base/mixins/_apply-theme.scss";
 export declare const allBase: string[];
 declare const _default: {
     colors: string;
@@ -16,7 +15,6 @@ declare const _default: {
     mixins: {
         mediaQuery: string;
         fontSize: string;
-        applyTheme: string;
     };
     all: string[];
 };

package/dist/types/utilities.d.ts

@@ -13,6 +13,15 @@ export declare const padding = "./utilities/spaces/_padding.scss";
 export declare const spacing: string[];
 export declare const boxShadow = "./utilities/box-shadow/index.scss";
 export declare const size = "./utilities/size/index.scss";
+export declare const display = "./utilities/_display.scss";
+export declare const flex = "./utilities/_flex.scss";
+export declare const text = "./utilities/_text.scss";
+export declare const position = "./utilities/_position.scss";
+export declare const overflow = "./utilities/_overflow.scss";
+export declare const opacity = "./utilities/_opacity.scss";
+export declare const cursor = "./utilities/_cursor.scss";
+export declare const sizing = "./utilities/_sizing.scss";
+export declare const visibility = "./utilities/_visibility.scss";
 export declare const allUtilities: string[];
 declare const _default: {
     reset: string;
@@ -36,6 +45,15 @@ declare const _default: {
     };
     boxShadow: string;
     size: string;
+    display: string;
+    flex: string;
+    text: string;
+    position: string;
+    overflow: string;
+    opacity: string;
+    cursor: string;
+    sizing: string;
+    visibility: string;
     all: string[];
 };
 export default _default;

package/dist/types/variables.d.ts

@@ -5,7 +5,6 @@ export declare const borders = "./base/_border.scss";
 export declare const sizes = "./base/_size.scss";
 export declare const mediaQueryMixins = "./base/mixins/_media-query-mx.scss";
 export declare const fontSizeMixins = "./base/mixins/_font_size-mx.scss";
-export declare const applyThemeMixins = "./base/mixins/_apply-theme.scss";
 export declare const allVariables: string[];
 declare const _default: {
     colors: string;
@@ -16,7 +15,6 @@ declare const _default: {
     mixins: {
         mediaQuery: string;
         fontSize: string;
-        applyTheme: string;
     };
     all: string[];
 };

package/dist/utilities.esm.js

@@ -8,7 +8,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';
@@ -22,6 +22,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,
@@ -30,7 +48,16 @@ const allUtilities = [
     ...borders,
     ...spacing,
     boxShadow,
-    size
+    size,
+    display,
+    flex,
+    text,
+    position,
+    overflow,
+    opacity,
+    cursor,
+    sizing,
+    visibility,
 ];
 var utilities = {
     reset,
@@ -54,8 +81,17 @@ var utilities = {
     },
     boxShadow,
     size,
+    display,
+    flex,
+    text,
+    position,
+    overflow,
+    opacity,
+    cursor,
+    sizing,
+    visibility,
     all: allUtilities
 };
 
-export { allUtilities, backgroundColor, borderColor, borderRadius, borderSize, borders, boxShadow, utilities as default, gap, margin, padding, reset, size, spacing, typography, typographyColor, typographyFont };
+export { allUtilities, backgroundColor, borderColor, borderRadius, borderSize, borders, boxShadow, cursor, utilities as default, display, flex, gap, margin, opacity, overflow, padding, position, reset, size, sizing, spacing, text, typography, typographyColor, typographyFont, visibility };
 //# sourceMappingURL=utilities.esm.js.map

package/dist/utilities.esm.js.map

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