procode-vs-theme 1.0.0

package/package.json

@@ -0,0 +1,87 @@
+{
+  "name": "procode-vs-theme",
+  "version": "1.0.0",
+  "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",
+  "module": "dist/index.esm.js",
+  "types": "dist/types/index.d.ts",
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.js",
+      "types": "./dist/types/index.d.ts"
+    },
+    "./scss": "./src/index.scss",
+    "./styles": "./dist/src/index.scss",
+    "./variables": {
+      "import": "./dist/variables.esm.js",
+      "require": "./dist/variables.js",
+      "types": "./dist/types/variables.d.ts"
+    },
+    "./components": {
+      "import": "./dist/components.esm.js",
+      "require": "./dist/components.js",
+      "types": "./dist/types/components.d.ts"
+    },
+    "./layout": {
+      "import": "./dist/layout.esm.js",
+      "require": "./dist/layout.js",
+      "types": "./dist/types/layout.d.ts"
+    },
+    "./utilities": {
+      "import": "./dist/utilities.esm.js",
+      "require": "./dist/utilities.js",
+      "types": "./dist/types/utilities.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c --watch",
+    "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/\""
+  },
+  "keywords": [
+    "theme",
+    "scss",
+    "css",
+    "procode",
+    "vs-theme",
+    "ui-theme",
+    "design-system",
+    "varstreet",
+    "styling",
+    "variables",
+    "components",
+    "layout",
+    "utilities",
+    "theme-system",
+    "design-tokens"
+  ],
+  "author": "VarStreet Team",
+  "license": "MIT",
+  "peerDependencies": {
+    "sass": "^1.38.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^26.0.1",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@types/node": "^18.0.0",
+    "rimraf": "^5.0.0",
+    "rollup": "^4.18.0",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "sass": "^1.38.0",
+    "typescript": "^4.9.3"
+  }
+}

package/src/base/_border.scss

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

package/src/base/_color.scss

@@ -0,0 +1,39 @@
+$text-primary: #2666e3 !default;
+$text-secondary: #595959 !default;
+$text-success: #5ca224 !default;
+$text-warning: #f39c12 !default;
+$text-danger: #f90b0b !default;
+$text-info: #17baff !default;
+$text-default: #808080 !default;
+$text-dark: #464646 !default;
+$text-light: #ffffff !default;
+$text-tertiary: #ed5085 !default;
+
+$text-primary-hover: #1c428d !default;
+$text-danger-hover: #af251c !default;
+
+$background-primary: #2666e3 !default;
+$background-secondary: #f4f4f4 !default;
+$background-success: #67b926 !default;
+$background-warning: #f97d0b !default;
+$background-danger: #e74c3c !default;
+$background-info: #17baff !default;
+$background-default: #ffffff !default;
+$background-dark: #29466e !default;
+$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;
+
+$border-primary: #2666e3 !default;
+$border-secondary: #c6c6c6 !default;
+$border-success: #67b926 !default;
+$border-warning: #f97d0b !default;
+$border-danger: #e74c3c !default;
+$border-info: #17baff !default;
+$border-light: #e3e3e3 !default;
+$border-dark: #0f233d !default;
+$border-default: #d9d9d9 !default;
+
+$boxshadow-primary: #ababab40 !default;

package/src/base/_font.scss

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

package/src/base/_size.scss

@@ -0,0 +1,4 @@
+$menu-size: 32px;
+
+$size-sm: 16px;
+$size-md: 32px;

package/src/base/_space.scss

@@ -0,0 +1,4 @@
+$space-sm: 5px !default;
+$space-md: 12.5px !default;
+$space-lg: 16.5px !default;
+$space-xl: 21px !default;

package/src/base/mixins/_apply-theme.scss

@@ -0,0 +1,28 @@
+// /abstracts/_mixins.scss
+
+@mixin apply-theme($name) {
+  $theme: tf.get-theme($name);
+
+  background-color: mdg.map-deep-get($theme, "colors", "background", "main");
+  color: mdg.map-deep-get($theme, "colors", "text", "primary");
+
+  font-family: mdg.map-deep-get($theme, "typography", "font-family", "primary");
+  font-size: mdg.map-deep-get($theme, "typography", "font-size", "md");
+  line-height: mdg.map-deep-get($theme, "typography", "line-height", "normal");
+
+  .btn {
+    background-color: mdg.map-deep-get($theme, "colors", "primary");
+    color: mdg.map-deep-get($theme, "colors", "text", "primary");
+    padding: mdg.map-deep-get($theme, "spacing", "sm");
+    border-radius: mdg.map-deep-get($theme, "border-radius", "md");
+    transition: all mdg.map-deep-get($theme, "transitions", "speed", "normal")
+      mdg.map-deep-get($theme, "transitions", "easing", "ease-in-out");
+  }
+
+  .card {
+    background-color: mdg.map-deep-get($theme, "colors", "background", "paper");
+    box-shadow: 0 2px 8px mdg.map-deep-get($theme, "colors", "shadow");
+    padding: mdg.map-deep-get($theme, "spacing", "md");
+    border-radius: mdg.map-deep-get($theme, "border-radius", "lg");
+  }
+}

package/src/base/mixins/_font_size-mx.scss

@@ -0,0 +1,4 @@
+@mixin font-size($size, $lineheight) {
+  font-size: $size;
+  line-height: $lineheight;
+}

package/src/base/mixins/_media-query-mx.scss

@@ -0,0 +1,35 @@
+// abstracts/_media-queries.scss
+
+$breakpoint-xs: 320px !default;
+$breakpoint-sm: 576px !default;
+$breakpoint-md: 768px !default;
+$breakpoint-lg: 992px !default;
+$breakpoint-xl: 1200px !default;
+$breakpoint-xxl: 1366px !default;
+
+$breakpoint-xs-mx-width: 100% !default;
+$breakpoint-sm-mx-width: 100% !default;
+$breakpoint-md-mx-width: 768px !default;
+$breakpoint-lg-mx-width: 992px !default;
+$breakpoint-xl-mx-width: 1180px !default;
+$breakpoint-xxl-mx-width: 1346px !default;
+
+@mixin responsive-body {
+  max-width: $breakpoint-xs-mx-width;
+  margin: auto;
+  @media (min-width: $breakpoint-sm) {
+    max-width: $breakpoint-sm-mx-width;
+  }
+  @media (min-width: $breakpoint-md) {
+    max-width: $breakpoint-md-mx-width;
+  }
+  @media (min-width: $breakpoint-lg) {
+    max-width: $breakpoint-lg-mx-width;
+  }
+  @media (min-width: $breakpoint-xl) {
+    max-width: $breakpoint-xl-mx-width;
+  }
+  @media (min-width: $breakpoint-xxl) {
+    max-width: $breakpoint-xxl-mx-width;
+  }
+}

package/src/baseExports.ts

@@ -0,0 +1,39 @@
+// VS Theme Base Export
+// Provides access to all 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 styles combined
+export const allBase = [
+  colors,
+  fonts,
+  spacing,
+  borders,
+  sizes,
+  mediaQueryMixins,
+  fontSizeMixins,
+  applyThemeMixins
+];
+
+export default {
+  colors,
+  fonts,
+  spacing,
+  borders,
+  sizes,
+  mixins: {
+    mediaQuery: mediaQueryMixins,
+    fontSize: fontSizeMixins,
+    applyTheme: applyThemeMixins
+  },
+  all: allBase
+};

package/src/components/_buttons.scss

@@ -0,0 +1,38 @@
+@use "../base/mixins/font_size-mx" as mx;
+@use "../base/font" as ft;
+@use "../base/color" as cl;
+@use "../base/border" as bo;
+
+$btn-padding-xs: 5.5px !default;
+$btn-padding-md: 8px !default;
+$btn-padding-xl: 16px !default;
+
+.qo-btn {
+  display: inline-block;
+  border-radius: bo.$border-radius-sm;
+}
+.qo-btn-full {
+  display: block;
+  border-radius: bo.$border-radius-sm;
+  width: 100%;
+  padding: $btn-padding-xl;
+  @include mx.font-size(ft.$font-size-md, ft.$line-height-md);
+}
+.qo-btn-xs {
+  padding: $btn-padding-xs;
+  @include mx.font-size(ft.$font-size-xs, ft.$line-height-xs);
+}
+.qo-btn-md {
+  padding: $btn-padding-md;
+  @include mx.font-size(ft.$font-size-md, ft.$line-height-md);
+}
+.qo-btn-primary {
+  background-color: cl.$background-primary !important;
+  border: bo.$border-width-sm solid cl.$border-primary;
+  color: cl.$text-light !important;
+}
+.qo-btn-default {
+  background-color: cl.$background-default;
+  border: bo.$border-width-sm solid cl.$border-default;
+  color: cl.$text-dark !important;
+}

package/src/components/_input.scss

@@ -0,0 +1,32 @@
+@use "../base/mixins/font_size-mx" as mx;
+@use "../base/font" as ft;
+@use "../base/color" as cl;
+@use "../base/border" as bo;
+
+$input-padding-xs: 5.5px !default;
+$input-padding-md: 8px !default;
+$input-padding-xl: 16px !default;
+
+.qo-input {
+  display: inline-block;
+  border-radius: bo.$border-radius-sm;
+}
+.qo-input-full {
+  display: block;
+  border-radius: bo.$border-radius-sm;
+  width: 100%;
+  padding: $input-padding-xl;
+  @include mx.font-size(ft.$font-size-md, ft.$line-height-md);
+}
+.qo-input-xs {
+  padding: $input-padding-xs;
+  @include mx.font-size(ft.$font-size-xs, ft.$line-height-xs);
+}
+.qo-input-md {
+  padding: $input-padding-md;
+  @include mx.font-size(ft.$font-size-md, ft.$line-height-md);
+}
+.qo-input-default {
+  background-color: cl.$background-default;
+  border: bo.$border-width-sm solid cl.$border-default;
+}

package/src/components.ts

@@ -0,0 +1,20 @@
+// VS Theme Components Export
+// Provides access to all component styles
+
+export const buttons = './components/_buttons.scss';
+export const input = './components/_input.scss';
+export const cards = './components/_cards.scss';
+
+// All components combined
+export const allComponents = [
+  buttons,
+  input,
+  cards
+];
+
+export default {
+  buttons,
+  input,
+  cards,
+  all: allComponents
+};

package/src/index.scss

@@ -0,0 +1,24 @@
+@forward "./utilities/reset";
+@forward "./utilities/typography/font";
+@forward "./utilities/typography/color";
+@forward "./utilities/background-color/index.scss";
+@forward "./utilities/border/border-color";
+@forward "./utilities/border/border-radius";
+@forward "./utilities/border/border-size";
+@forward "./utilities/spaces/gap";
+@forward "./utilities/spaces/margin";
+@forward "./utilities/spaces/padding";
+@forward "./utilities/box-shadow/index.scss";
+@forward "./utilities/size/index.scss";
+
+@forward "./base/mixins/media-query-mx";
+@forward "./base/border";
+@forward "./base/color";
+@forward "./base/font";
+@forward "./base/space";
+@forward "./base/size";
+
+@forward "./components/buttons";
+@forward "./components/input";
+
+@forward "./layout/drawer";

package/src/index.ts

@@ -0,0 +1,52 @@
+// VS Theme - Main Entry Point
+// Provides comprehensive access to all theme components
+
+// Main theme SCSS entry point
+export const themeStylesheet = './index.scss';
+
+// Theme Variables
+export * as variables from './variables';
+export * as base from './baseExports';
+
+// Theme Components
+export * as components from './components';
+
+// Theme Layout
+export * as layout from './layout';
+
+// Theme Utilities  
+export * as utilities from './utilities';
+
+// Default export - Main theme configuration
+export default {
+  name: 'vs-theme',
+  version: '1.0.0',
+  stylesheet: './index.scss',
+  variables: './variables',
+  components: './components', 
+  layout: './layout',
+  utilities: './utilities'
+};
+
+// Type definitions for theme configuration
+export interface ThemeConfig {
+  name: string;
+  version: string;
+  stylesheet: string;
+  variables: string;
+  components: string;
+  layout: string;
+  utilities: string;
+}
+
+// Theme utility functions
+export const getThemeStylesheet = (): string => themeStylesheet;
+export const getThemeConfig = (): ThemeConfig => ({
+  name: 'vs-theme',
+  version: '1.0.0',
+  stylesheet: './index.scss',
+  variables: './variables',
+  components: './components',
+  layout: './layout', 
+  utilities: './utilities'
+});

package/src/layout/_drawer.scss

@@ -0,0 +1,16 @@
+@use "../base/color" as cl;
+
+.qo-drawer-shield {
+  background-color: cl.$background-transparent;
+  width: 100%;
+  height: 100vh;
+}
+
+.qo-drawer {
+  background-color: cl.$background-default;
+}
+
+.qo-drawer-md {
+  width: 43.53%;
+  height: 100%;
+}

package/src/layout.ts

@@ -0,0 +1,23 @@
+// VS Theme Layout Export  
+// Provides access to all layout styles
+
+export const drawer = './layout/_drawer.scss';
+export const header = './layout/_header.scss';
+export const footer = './layout/_footer.scss';
+export const sidebar = './layout/_sidebar.scss';
+
+// All layout components combined
+export const allLayout = [
+  drawer,
+  header,
+  footer,
+  sidebar
+];
+
+export default {
+  drawer,
+  header,
+  footer,
+  sidebar,
+  all: allLayout
+};

package/src/utilities/_reset.scss

@@ -0,0 +1,68 @@
+@use "../base/mixins/media-query-mx" as mx;
+/* Box sizing reset */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Remove default margin and padding */
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+dl,
+dd,
+ol,
+ul,
+figure,
+hr,
+fieldset,
+legend {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  height: 100vh;
+  @include mx.responsive-body;
+}
+
+/* Remove list styles */
+ul,
+ol {
+  list-style: none;
+}
+
+/* Remove default border */
+img,
+fieldset {
+  border: 0;
+}
+
+/* Remove link underlines */
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+/* Inherit fonts for form elements */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+/* Remove outline on buttons (optional, but be careful for accessibility) */
+button {
+  background: none;
+  border: none;
+  cursor: pointer;
+}

package/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/src/utilities/border/_border-color.scss

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

package/src/utilities/border/_border-radius.scss

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

package/src/utilities/border/_border-size.scss

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