procode-vs-theme 1.0.3 → 1.0.4

package/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/src/utilities/_visibility.scss

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

package/src/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/src/utilities/box-shadow/index.scss

@@ -1,8 +1,17 @@
-@use "../../base/color" as cl;
-
-.qo-boxshadow-sm {
-  box-shadow: 0 1px 2px 0 cl.$boxshadow-primary;
-}
-.qo-boxshadow-md {
-  box-shadow: 0 4px 8px 0 cl.$boxshadow-primary;
-}
+@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/src/utilities/spaces/_gap.scss

@@ -1,20 +1,15 @@
-@use "../../base/space" as sp;
-
-.qo-gap-sm {
-  gap: sp.$space-sm;
-}
-.qo-gap-md {
-  gap: sp.$space-md;
-}
-.qo-gap-md-y {
-  gap: sp.$space-md 0;
-}
-.qo-gap-md-x {
-  gap: 0 sp.$space-md;
-}
-.qo-gap-lg {
-  gap: sp.$space-lg;
-}
-.qo-gap-xl {
-  gap: sp.$space-xl;
-}
+@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/src/utilities/spaces/_margin.scss

@@ -1,69 +1,46 @@
-@use "../../base/space" as sp;
-
-//small
-.qo-margin-sm {
-  margin: sp.$space-sm;
-}
-.qo-margin-top-sm {
-  margin-top: sp.$space-sm;
-}
-.qo-margin-right-sm {
-  margin-right: sp.$space-sm;
-}
-.qo-margin-botttom-sm {
-  margin-bottom: sp.$space-sm;
-}
-.qo-margin-left-sm {
-  margin-left: sp.$space-sm;
-}
-
-//medium
-.qo-margin-md {
-  margin: sp.$space-md;
-}
-.qo-margin-top-md {
-  margin-top: sp.$space-md;
-}
-.qo-margin-right-md {
-  margin-right: sp.$space-md;
-}
-.qo-margin-botttom-md {
-  margin-bottom: sp.$space-md;
-}
-.qo-margin-left-md {
-  margin-left: sp.$space-md;
-}
-
-//large
-.qo-margin-lg {
-  margin: sp.$space-lg;
-}
-.qo-margin-top-lg {
-  margin-top: sp.$space-lg;
-}
-.qo-margin-right-lg {
-  margin-right: sp.$space-lg;
-}
-.qo-margin-botttom-lg {
-  margin-bottom: sp.$space-lg;
-}
-.qo-margin-left-lg {
-  margin-left: sp.$space-lg;
-}
-
-//extra large
-.qo-margin-xl {
-  margin: sp.$space-xl;
-}
-.qo-margin-top-xl {
-  margin-top: sp.$space-xl;
-}
-.qo-margin-right-xl {
-  margin-right: sp.$space-xl;
-}
-.qo-margin-botttom-xl {
-  margin-bottom: sp.$space-xl;
-}
-.qo-margin-left-xl {
-  margin-left: sp.$space-xl;
-}
+@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/src/utilities/spaces/_padding.scss

@@ -1,69 +1,37 @@
-@use "../../base/space" as sp;
-
-//small
-.qo-padding-sm {
-  padding: sp.$space-sm;
-}
-.qo-padding-top-sm {
-  padding-top: sp.$space-sm;
-}
-.qo-padding-right-sm {
-  padding-right: sp.$space-sm;
-}
-.qo-padding-botttom-sm {
-  padding-bottom: sp.$space-sm;
-}
-.qo-padding-left-sm {
-  padding-left: sp.$space-sm;
-}
-
-//medium
-.qo-padding-md {
-  padding: sp.$space-md;
-}
-.qo-padding-top-md {
-  padding-top: sp.$space-md;
-}
-.qo-padding-right-md {
-  padding-right: sp.$space-md;
-}
-.qo-padding-botttom-md {
-  padding-bottom: sp.$space-md;
-}
-.qo-padding-left-md {
-  padding-left: sp.$space-md;
-}
-
-//large
-.qo-padding-lg {
-  padding: sp.$space-lg;
-}
-.qo-padding-top-lg {
-  padding-top: sp.$space-lg;
-}
-.qo-padding-right-lg {
-  padding-right: sp.$space-lg;
-}
-.qo-padding-botttom-lg {
-  padding-bottom: sp.$space-lg;
-}
-.qo-padding-left-lg {
-  padding-left: sp.$space-lg;
-}
-
-//extra large
-.qo-padding-xl {
-  padding: sp.$space-xl;
-}
-.qo-padding-top-xl {
-  padding-top: sp.$space-xl;
-}
-.qo-padding-right-xl {
-  padding-right: sp.$space-xl;
-}
-.qo-padding-botttom-xl {
-  padding-bottom: sp.$space-xl;
-}
-.qo-padding-left-xl {
-  padding-left: sp.$space-xl;
-}
+@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/src/utilities/typography/_color.scss

@@ -1,35 +1,51 @@
-@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 !important;
-}
-.qo-text-tertiary {
-  color: cl.$text-tertiary;
-}
-
-.qo-validation{
-   color: cl.$text-danger;
-}
+@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/src/utilities.ts

@@ -1,67 +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';
-
-// All utilities combined
-export const allUtilities = [
-  reset,
-  ...typography,
-  backgroundColor,
-  ...borders, 
-  ...spacing,
-  boxShadow,
-  size
-];
-
-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,
-  all: allUtilities
-};
+// 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
+};