procode-vs-theme 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,42 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [1.0.0] - 2025-10-08
+
+### Added
+- Initial release of VarStreet VS Theme Package
+- Comprehensive SCSS theme system with modular architecture
+- Multiple export endpoints following Theme Export Pattern:
+  - Main theme export for complete theme access
+  - `/variables` for design tokens and theme variables
+  - `/components` for component-specific styling
+  - `/layout` for layout and grid system
+  - `/utilities` for utility classes and helpers
+  - `/scss` and `/styles` for direct SCSS file access
+- Theme configuration interface and utility functions
+- Full TypeScript support with comprehensive type definitions
+- Base styling system with typography, colors, and foundational styles
+- Component-specific styling for buttons, forms, and UI elements
+- Flexible layout system with grid, flexbox, and positioning utilities
+- Comprehensive utility classes for spacing, colors, and responsive design
+- MIT license for open source usage
+
+### Features
+- **Modular Architecture**: Import only the parts you need for optimal bundle size
+- **TypeScript Support**: Full type definitions for theme configuration and exports
+- **SCSS Compilation**: Compatible with modern build systems and SCSS processors
+- **Design System**: Structured approach to styling with variables, components, layout, and utilities
+- **Flexible Usage**: Multiple import patterns for different use cases
+- **Theme Configuration**: Programmatic access to theme metadata and file paths
+
+### Technical Implementation
+- Rollup build system with multiple bundle outputs (ESM/CJS)
+- SCSS file copying for external consumption
+- TypeScript declaration files generation
+- Comprehensive export structure for granular access
+- Theme utility functions for dynamic usage
+- Cross-platform compatibility with build tools

package/README.md

@@ -0,0 +1,201 @@
+# VarStreet VS Theme
+
+A comprehensive SCSS theme package for the VarStreet ProCode framework, providing modern styling and design system components with modular architecture for flexible usage.
+
+## Features
+
+- **Modular Architecture**: Import only what you need for optimal bundle size
+- **Comprehensive Variables**: Colors, fonts, spacing, design tokens, and more
+- **Component Styles**: Pre-styled UI components following design system principles
+- **Layout System**: Flexible layout components and grid systems
+- **Utility Classes**: Spacing, typography, borders, shadows and other utilities
+- **TypeScript Support**: Full type definitions and theme configuration included
+- **Multiple Export Endpoints**: Granular access to variables, components, layout, and utilities
+- **Theme Configuration**: Programmatic access to theme metadata and paths
+
+## Installation
+
+```bash
+npm install procode-vs-theme
+```
+
+### Peer Dependencies
+
+This package requires SCSS support in your build system:
+
+```bash
+# Install SCSS processor
+npm install sass --save-dev
+```
+
+## Usage
+
+### Import Complete Theme
+
+```scss
+// Import all theme styles
+@import 'procode-vs-theme/scss';
+```
+
+```typescript
+// Import theme configuration
+import theme from 'procode-vs-theme';
+console.log(theme.name); // 'vs-theme'
+console.log(theme.stylesheet); // './index.scss'
+```
+
+### Modular Imports
+
+```scss
+// Import specific SCSS files
+@import 'procode-vs-theme/src/base/color';
+@import 'procode-vs-theme/src/components/buttons';
+@import 'procode-vs-theme/src/utilities/spacing';
+```
+
+```typescript
+// Import specific TypeScript modules
+import { components } from 'procode-vs-theme/components';
+import { variables } from 'procode-vs-theme/variables';
+import { layout } from 'procode-vs-theme/layout';
+import { utilities } from 'procode-vs-theme/utilities';
+
+// Get theme configuration and utilities
+import { getThemeConfig, getThemeStylesheet } from 'procode-vs-theme';
+
+const config = getThemeConfig();
+const stylesheetPath = getThemeStylesheet();
+```
+
+### Available Export Endpoints
+
+- **Main**: `procode-vs-theme` - Complete theme with all modules
+- **Variables**: `procode-vs-theme/variables` - Colors, fonts, spacing, borders, sizes
+- **Components**: `procode-vs-theme/components` - Buttons, inputs, cards, forms
+- **Layout**: `procode-vs-theme/layout` - Drawer, header, footer, sidebar, grid
+- **Utilities**: `procode-vs-theme/utilities` - Reset, typography, spacing, borders, shadows
+- **SCSS**: `procode-vs-theme/scss` - Direct access to main SCSS file
+- **Styles**: `procode-vs-theme/styles` - Compiled SCSS from dist
+
+## Examples
+
+### Complete Theme Integration
+
+```scss
+// styles.scss - Import complete theme
+@import 'procode-vs-theme/scss';
+
+// Your custom styles can override theme variables
+:root {
+  --vs-primary-color: #007bff;
+  --vs-secondary-color: #6c757d;
+}
+```
+
+### Selective Module Usage
+
+```scss
+// Import only what you need
+@import 'procode-vs-theme/src/base/color';
+@import 'procode-vs-theme/src/base/spacing';
+@import 'procode-vs-theme/src/components/buttons';
+@import 'procode-vs-theme/src/utilities/typography';
+```
+
+### TypeScript Configuration Usage
+
+```typescript
+import { getThemeConfig, ThemeConfig } from 'procode-vs-theme';
+
+const themeConfig: ThemeConfig = getThemeConfig();
+
+// Use in your build configuration
+const scssImportPaths = [
+  `node_modules/procode-vs-theme/${themeConfig.stylesheet}`,
+  `node_modules/procode-vs-theme/${themeConfig.variables}`,
+  `node_modules/procode-vs-theme/${themeConfig.components}`
+];
+```
+
+### Webpack/Vite Configuration
+
+```javascript
+// webpack.config.js
+module.exports = {
+  // ...
+  module: {
+    rules: [
+      {
+        test: /\.scss$/,
+        use: [
+          'style-loader',
+          'css-loader',
+          {
+            loader: 'sass-loader',
+            options: {
+              additionalData: `@import "procode-vs-theme/scss";`
+            }
+          }
+        ]
+      }
+    ]
+  }
+};
+```
+
+## Theme Structure
+
+```
+src/
+├── index.scss          # Main theme entry point
+├── base/              # Variables and mixins
+│   ├── _color.scss    # Color variables
+│   ├── _font.scss     # Font variables
+│   ├── _space.scss    # Spacing variables
+│   └── mixins/        # Sass mixins
+├── components/        # Component styles
+│   ├── _buttons.scss  # Button styles
+│   ├── _input.scss    # Input styles
+│   └── _cards.scss    # Card styles
+├── layout/           # Layout components
+│   ├── _drawer.scss  # Drawer styles
+│   ├── _header.scss  # Header styles
+│   └── _sidebar.scss # Sidebar styles
+└── utilities/        # Utility classes
+    ├── _reset.scss   # CSS reset
+    ├── typography/   # Typography utilities
+    ├── spacing/      # Spacing utilities
+    └── border/       # Border utilities
+```
+
+## Requirements
+
+- Node.js 16+
+- SCSS processor (sass/node-sass)
+- Modern build system (Webpack, Vite, Rollup, etc.)
+- TypeScript 4.0+ (optional, for type support)
+
+## Development
+
+```bash
+# Build the package
+npm run build
+
+# Watch for changes during development
+npm run dev
+
+# Clean dist folder
+npm run clean
+```
+
+## License
+
+MIT
+
+## Contributing
+
+We welcome contributions! Please see our contributing guidelines for more details.
+
+## Support
+
+For support and questions, please visit our documentation or create an issue in the repository.

package/dist/components.esm.js

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

package/dist/components.esm.js.map

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

package/dist/components.js

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+// VS Theme Components Export
+// Provides access to all component styles
+const buttons = './components/_buttons.scss';
+const input = './components/_input.scss';
+const cards = './components/_cards.scss';
+// All components combined
+const allComponents = [
+    buttons,
+    input,
+    cards
+];
+var components = {
+    buttons,
+    input,
+    cards,
+    all: allComponents
+};
+
+exports.allComponents = allComponents;
+exports.buttons = buttons;
+exports.cards = cards;
+exports.default = components;
+exports.input = input;
+//# sourceMappingURL=components.js.map

package/dist/components.js.map

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

package/dist/index.esm.js

@@ -0,0 +1,267 @@
+// VS Theme Variables Export
+// Provides access to all theme variables and base styles
+// Base variables and mixins
+const colors$1 = './base/_color.scss';
+const fonts$1 = './base/_font.scss';
+const spacing$2 = './base/_space.scss';
+const borders$2 = './base/_border.scss';
+const sizes$1 = './base/_size.scss';
+// Mixins
+const mediaQueryMixins$1 = './base/mixins/_media-query-mx.scss';
+const fontSizeMixins$1 = './base/mixins/_font_size-mx.scss';
+const applyThemeMixins$1 = './base/mixins/_apply-theme.scss';
+// All base variables combined
+const allVariables = [
+    colors$1,
+    fonts$1,
+    spacing$2,
+    borders$2,
+    sizes$1,
+    mediaQueryMixins$1,
+    fontSizeMixins$1,
+    applyThemeMixins$1
+];
+var variables = {
+    colors: colors$1,
+    fonts: fonts$1,
+    spacing: spacing$2,
+    borders: borders$2,
+    sizes: sizes$1,
+    mixins: {
+        mediaQuery: mediaQueryMixins$1,
+        fontSize: fontSizeMixins$1,
+        applyTheme: applyThemeMixins$1
+    },
+    all: allVariables
+};
+
+var variables$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  allVariables: allVariables,
+  applyThemeMixins: applyThemeMixins$1,
+  borders: borders$2,
+  colors: colors$1,
+  default: variables,
+  fontSizeMixins: fontSizeMixins$1,
+  fonts: fonts$1,
+  mediaQueryMixins: mediaQueryMixins$1,
+  sizes: sizes$1,
+  spacing: spacing$2
+});
+
+// VS Theme Base Export
+// Provides access to all base variables and mixins
+const colors = './base/_color.scss';
+const fonts = './base/_font.scss';
+const spacing$1 = './base/_space.scss';
+const borders$1 = './base/_border.scss';
+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 styles combined
+const allBase = [
+    colors,
+    fonts,
+    spacing$1,
+    borders$1,
+    sizes,
+    mediaQueryMixins,
+    fontSizeMixins,
+    applyThemeMixins
+];
+var baseExports = {
+    colors,
+    fonts,
+    spacing: spacing$1,
+    borders: borders$1,
+    sizes,
+    mixins: {
+        mediaQuery: mediaQueryMixins,
+        fontSize: fontSizeMixins,
+        applyTheme: applyThemeMixins
+    },
+    all: allBase
+};
+
+var baseExports$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  allBase: allBase,
+  applyThemeMixins: applyThemeMixins,
+  borders: borders$1,
+  colors: colors,
+  default: baseExports,
+  fontSizeMixins: fontSizeMixins,
+  fonts: fonts,
+  mediaQueryMixins: mediaQueryMixins,
+  sizes: sizes,
+  spacing: spacing$1
+});
+
+// VS Theme Components Export
+// Provides access to all component styles
+const buttons = './components/_buttons.scss';
+const input = './components/_input.scss';
+const cards = './components/_cards.scss';
+// All components combined
+const allComponents = [
+    buttons,
+    input,
+    cards
+];
+var components = {
+    buttons,
+    input,
+    cards,
+    all: allComponents
+};
+
+var components$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  allComponents: allComponents,
+  buttons: buttons,
+  cards: cards,
+  default: components,
+  input: input
+});
+
+// VS Theme Layout Export  
+// Provides access to all layout styles
+const drawer = './layout/_drawer.scss';
+const header = './layout/_header.scss';
+const footer = './layout/_footer.scss';
+const sidebar = './layout/_sidebar.scss';
+// All layout components combined
+const allLayout = [
+    drawer,
+    header,
+    footer,
+    sidebar
+];
+var layout = {
+    drawer,
+    header,
+    footer,
+    sidebar,
+    all: allLayout
+};
+
+var layout$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  allLayout: allLayout,
+  default: layout,
+  drawer: drawer,
+  footer: footer,
+  header: header,
+  sidebar: sidebar
+});
+
+// VS Theme Utilities Export
+// Provides access to all utility styles
+// Reset and base utilities
+const reset = './utilities/_reset.scss';
+// Typography utilities
+const typographyFont = './utilities/typography/_font.scss';
+const typographyColor = './utilities/typography/_color.scss';
+const typography = [typographyFont, typographyColor];
+// Background utilities
+const backgroundColor = './utilities/background-color/index.scss';
+// Border utilities  
+const borderColor = './utilities/border/_border-color.scss';
+const borderRadius = './utilities/border/_border-radius.scss';
+const borderSize = './utilities/border/_border-size.scss';
+const borders = [borderColor, borderRadius, borderSize];
+// Spacing utilities
+const gap = './utilities/spaces/_gap.scss';
+const margin = './utilities/spaces/_margin.scss';
+const padding = './utilities/spaces/_padding.scss';
+const spacing = [gap, margin, padding];
+// Box shadow utilities
+const boxShadow = './utilities/box-shadow/index.scss';
+// Size utilities
+const size = './utilities/size/index.scss';
+// All utilities combined
+const allUtilities = [
+    reset,
+    ...typography,
+    backgroundColor,
+    ...borders,
+    ...spacing,
+    boxShadow,
+    size
+];
+var utilities = {
+    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
+};
+
+var utilities$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  allUtilities: allUtilities,
+  backgroundColor: backgroundColor,
+  borderColor: borderColor,
+  borderRadius: borderRadius,
+  borderSize: borderSize,
+  borders: borders,
+  boxShadow: boxShadow,
+  default: utilities,
+  gap: gap,
+  margin: margin,
+  padding: padding,
+  reset: reset,
+  size: size,
+  spacing: spacing,
+  typography: typography,
+  typographyColor: typographyColor,
+  typographyFont: typographyFont
+});
+
+// VS Theme - Main Entry Point
+// Provides comprehensive access to all theme components
+// Main theme SCSS entry point
+const themeStylesheet = './index.scss';
+// Default export - Main theme configuration
+var index = {
+    name: 'vs-theme',
+    version: '1.0.0',
+    stylesheet: './index.scss',
+    variables: './variables',
+    components: './components',
+    layout: './layout',
+    utilities: './utilities'
+};
+// Theme utility functions
+const getThemeStylesheet = () => themeStylesheet;
+const getThemeConfig = () => ({
+    name: 'vs-theme',
+    version: '1.0.0',
+    stylesheet: './index.scss',
+    variables: './variables',
+    components: './components',
+    layout: './layout',
+    utilities: './utilities'
+});
+
+export { baseExports$1 as base, components$1 as components, index as default, getThemeConfig, getThemeStylesheet, layout$1 as layout, themeStylesheet, utilities$1 as utilities, variables$1 as variables };
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

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