procode-vs-theme 1.0.0

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

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

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

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

package/src/utilities/spaces/_margin.scss

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

package/src/utilities/spaces/_padding.scss

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

package/src/utilities/typography/_color.scss

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

package/src/utilities/typography/_font.scss

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

package/src/utilities.ts

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

package/src/variables.ts

@@ -0,0 +1,40 @@
+// 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';
+export const applyThemeMixins = './base/mixins/_apply-theme.scss';
+
+// All base variables combined
+export const allVariables = [
+  colors,
+  fonts,
+  spacing, 
+  borders,
+  sizes,
+  mediaQueryMixins,
+  fontSizeMixins,
+  applyThemeMixins
+];
+
+export default {
+  colors,
+  fonts,
+  spacing,
+  borders,
+  sizes,
+  mixins: {
+    mediaQuery: mediaQueryMixins,
+    fontSize: fontSizeMixins,
+    applyTheme: applyThemeMixins
+  },
+  all: allVariables
+};