procode-vs-theme 1.0.0 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/CHANGELOG.md +2 -19
  2. package/README.md +19 -156
  3. package/package.json +2 -4
package/CHANGELOG.md CHANGED
@@ -10,7 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
10
10
  ### Added
11
11
  - Initial release of VarStreet VS Theme Package
12
12
  - Comprehensive SCSS theme system with modular architecture
13
- - Multiple export endpoints following Theme Export Pattern:
13
+ - Multiple export endpoints:
14
14
  - Main theme export for complete theme access
15
15
  - `/variables` for design tokens and theme variables
16
16
  - `/components` for component-specific styling
@@ -22,21 +22,4 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
22
22
  - Base styling system with typography, colors, and foundational styles
23
23
  - Component-specific styling for buttons, forms, and UI elements
24
24
  - Flexible layout system with grid, flexbox, and positioning utilities
25
- - Comprehensive utility classes for spacing, colors, and responsive design
26
- - MIT license for open source usage
27
-
28
- ### Features
29
- - **Modular Architecture**: Import only the parts you need for optimal bundle size
30
- - **TypeScript Support**: Full type definitions for theme configuration and exports
31
- - **SCSS Compilation**: Compatible with modern build systems and SCSS processors
32
- - **Design System**: Structured approach to styling with variables, components, layout, and utilities
33
- - **Flexible Usage**: Multiple import patterns for different use cases
34
- - **Theme Configuration**: Programmatic access to theme metadata and file paths
35
-
36
- ### Technical Implementation
37
- - Rollup build system with multiple bundle outputs (ESM/CJS)
38
- - SCSS file copying for external consumption
39
- - TypeScript declaration files generation
40
- - Comprehensive export structure for granular access
41
- - Theme utility functions for dynamic usage
42
- - Cross-platform compatibility with build tools
25
+ - Comprehensive utility classes for spacing, colors, and responsive design
package/README.md CHANGED
@@ -1,19 +1,17 @@
1
1
  # VarStreet VS Theme
2
2
 
3
- A comprehensive SCSS theme package for the VarStreet ProCode framework, providing modern styling and design system components with modular architecture for flexible usage.
3
+ A comprehensive SCSS theme package for the VarStreet ProCode framework with modern styling and design system components.
4
4
 
5
- ## Features
5
+ ## 🌟 Features
6
6
 
7
7
  - **Modular Architecture**: Import only what you need for optimal bundle size
8
- - **Comprehensive Variables**: Colors, fonts, spacing, design tokens, and more
9
- - **Component Styles**: Pre-styled UI components following design system principles
8
+ - **Design System**: Colors, fonts, spacing, and design tokens
9
+ - **Component Styles**: Pre-styled UI components
10
10
  - **Layout System**: Flexible layout components and grid systems
11
11
  - **Utility Classes**: Spacing, typography, borders, shadows and other utilities
12
- - **TypeScript Support**: Full type definitions and theme configuration included
13
- - **Multiple Export Endpoints**: Granular access to variables, components, layout, and utilities
14
- - **Theme Configuration**: Programmatic access to theme metadata and paths
12
+ - **TypeScript Support**: Full type definitions and theme configuration
15
13
 
16
- ## Installation
14
+ ## 📦 Installation
17
15
 
18
16
  ```bash
19
17
  npm install procode-vs-theme
@@ -21,181 +19,46 @@ npm install procode-vs-theme
21
19
 
22
20
  ### Peer Dependencies
23
21
 
24
- This package requires SCSS support in your build system:
25
-
26
22
  ```bash
27
- # Install SCSS processor
28
23
  npm install sass --save-dev
29
24
  ```
30
25
 
31
- ## Usage
26
+ ## 🛠️ Usage
32
27
 
33
- ### Import Complete Theme
28
+ ### Complete Theme
34
29
 
35
30
  ```scss
36
31
  // Import all theme styles
37
32
  @import 'procode-vs-theme/scss';
38
33
  ```
39
34
 
40
- ```typescript
41
- // Import theme configuration
42
- import theme from 'procode-vs-theme';
43
- console.log(theme.name); // 'vs-theme'
44
- console.log(theme.stylesheet); // './index.scss'
45
- ```
46
-
47
35
  ### Modular Imports
48
36
 
49
37
  ```scss
50
- // Import specific SCSS files
38
+ // Import specific modules
51
39
  @import 'procode-vs-theme/src/base/color';
52
40
  @import 'procode-vs-theme/src/components/buttons';
53
41
  @import 'procode-vs-theme/src/utilities/spacing';
54
42
  ```
55
43
 
56
- ```typescript
57
- // Import specific TypeScript modules
58
- import { components } from 'procode-vs-theme/components';
59
- import { variables } from 'procode-vs-theme/variables';
60
- import { layout } from 'procode-vs-theme/layout';
61
- import { utilities } from 'procode-vs-theme/utilities';
62
-
63
- // Get theme configuration and utilities
64
- import { getThemeConfig, getThemeStylesheet } from 'procode-vs-theme';
65
-
66
- const config = getThemeConfig();
67
- const stylesheetPath = getThemeStylesheet();
68
- ```
69
-
70
- ### Available Export Endpoints
71
-
72
- - **Main**: `procode-vs-theme` - Complete theme with all modules
73
- - **Variables**: `procode-vs-theme/variables` - Colors, fonts, spacing, borders, sizes
74
- - **Components**: `procode-vs-theme/components` - Buttons, inputs, cards, forms
75
- - **Layout**: `procode-vs-theme/layout` - Drawer, header, footer, sidebar, grid
76
- - **Utilities**: `procode-vs-theme/utilities` - Reset, typography, spacing, borders, shadows
77
- - **SCSS**: `procode-vs-theme/scss` - Direct access to main SCSS file
78
- - **Styles**: `procode-vs-theme/styles` - Compiled SCSS from dist
79
-
80
- ## Examples
81
-
82
- ### Complete Theme Integration
83
-
84
- ```scss
85
- // styles.scss - Import complete theme
86
- @import 'procode-vs-theme/scss';
87
-
88
- // Your custom styles can override theme variables
89
- :root {
90
- --vs-primary-color: #007bff;
91
- --vs-secondary-color: #6c757d;
92
- }
93
- ```
94
-
95
- ### Selective Module Usage
96
-
97
- ```scss
98
- // Import only what you need
99
- @import 'procode-vs-theme/src/base/color';
100
- @import 'procode-vs-theme/src/base/spacing';
101
- @import 'procode-vs-theme/src/components/buttons';
102
- @import 'procode-vs-theme/src/utilities/typography';
103
- ```
104
-
105
- ### TypeScript Configuration Usage
44
+ ### TypeScript Integration
106
45
 
107
46
  ```typescript
108
- import { getThemeConfig, ThemeConfig } from 'procode-vs-theme';
109
-
110
- const themeConfig: ThemeConfig = getThemeConfig();
111
-
112
- // Use in your build configuration
113
- const scssImportPaths = [
114
- `node_modules/procode-vs-theme/${themeConfig.stylesheet}`,
115
- `node_modules/procode-vs-theme/${themeConfig.variables}`,
116
- `node_modules/procode-vs-theme/${themeConfig.components}`
117
- ];
118
- ```
119
-
120
- ### Webpack/Vite Configuration
121
-
122
- ```javascript
123
- // webpack.config.js
124
- module.exports = {
125
- // ...
126
- module: {
127
- rules: [
128
- {
129
- test: /\.scss$/,
130
- use: [
131
- 'style-loader',
132
- 'css-loader',
133
- {
134
- loader: 'sass-loader',
135
- options: {
136
- additionalData: `@import "procode-vs-theme/scss";`
137
- }
138
- }
139
- ]
140
- }
141
- ]
142
- }
143
- };
144
- ```
145
-
146
- ## Theme Structure
147
-
148
- ```
149
- src/
150
- ├── index.scss # Main theme entry point
151
- ├── base/ # Variables and mixins
152
- │ ├── _color.scss # Color variables
153
- │ ├── _font.scss # Font variables
154
- │ ├── _space.scss # Spacing variables
155
- │ └── mixins/ # Sass mixins
156
- ├── components/ # Component styles
157
- │ ├── _buttons.scss # Button styles
158
- │ ├── _input.scss # Input styles
159
- │ └── _cards.scss # Card styles
160
- ├── layout/ # Layout components
161
- │ ├── _drawer.scss # Drawer styles
162
- │ ├── _header.scss # Header styles
163
- │ └── _sidebar.scss # Sidebar styles
164
- └── utilities/ # Utility classes
165
- ├── _reset.scss # CSS reset
166
- ├── typography/ # Typography utilities
167
- ├── spacing/ # Spacing utilities
168
- └── border/ # Border utilities
47
+ import { components, variables } from 'procode-vs-theme';
48
+ import { getThemeConfig } from 'procode-vs-theme';
169
49
  ```
170
50
 
171
- ## Requirements
51
+ ## 📋 Requirements
172
52
 
173
53
  - Node.js 16+
174
- - SCSS processor (sass/node-sass)
175
- - Modern build system (Webpack, Vite, Rollup, etc.)
176
- - TypeScript 4.0+ (optional, for type support)
177
-
178
- ## Development
179
-
180
- ```bash
181
- # Build the package
182
- npm run build
54
+ - SCSS processor (sass)
55
+ - Modern build system (Webpack, Vite, etc.)
56
+ - TypeScript 4.0+ (optional)
183
57
 
184
- # Watch for changes during development
185
- npm run dev
186
-
187
- # Clean dist folder
188
- npm run clean
189
- ```
190
-
191
- ## License
58
+ ## 📄 License
192
59
 
193
60
  MIT
194
61
 
195
- ## Contributing
196
-
197
- We welcome contributions! Please see our contributing guidelines for more details.
198
-
199
- ## Support
62
+ ## 🤝 Contributing
200
63
 
201
- For support and questions, please visit our documentation or create an issue in the repository.
64
+ Contributions are welcome! Please read our contributing guidelines.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "procode-vs-theme",
3
- "version": "1.0.0",
3
+ "version": "1.0.1",
4
4
  "description": "VarStreet VS Theme - A comprehensive SCSS theme package for ProCode framework with variables, components, layout, and utilities for flexible design system usage",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
@@ -68,9 +68,7 @@
68
68
  ],
69
69
  "author": "VarStreet Team",
70
70
  "license": "MIT",
71
- "peerDependencies": {
72
- "sass": "^1.38.0"
73
- },
71
+ "peerDependencies": {},
74
72
  "devDependencies": {
75
73
  "@rollup/plugin-commonjs": "^26.0.1",
76
74
  "@rollup/plugin-json": "^6.1.0",