@howssatoshi/quantumcss 1.0.2 → 1.2.0

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@howssatoshi/quantumcss",
3
- "version": "1.0.2",
3
+ "version": "1.2.0",
4
4
  "description": "Advanced utility-first CSS framework with JIT generation and modern components",
5
5
  "main": "dist/quantum.min.css",
6
6
  "bin": {
@@ -16,12 +16,13 @@
16
16
  "build": "node scripts/build.js --minify",
17
17
  "build:dev": "node scripts/build.js",
18
18
  "watch": "node scripts/build.js --watch",
19
+ "docs": "node scripts/build.js --docs",
19
20
  "generate": "node src/cli.js",
20
21
  "generate:watch": "node src/cli.js --watch"
21
22
  },
22
23
  "repository": {
23
24
  "type": "git",
24
- "url": "https://github.com/macroadster/quantumcss.git"
25
+ "url": "git+https://github.com/macroadster/quantumcss.git"
25
26
  },
26
27
  "bugs": {
27
28
  "url": "https://github.com/macroadster/quantumcss/issues"
package/src/cli.js CHANGED
@@ -20,8 +20,61 @@ function build(outputPath) {
20
20
  }
21
21
  }
22
22
 
23
+ function scaffold(template, targetPath) {
24
+ const templatesDir = path.resolve(__dirname, '../examples');
25
+ const templateMap = {
26
+ gaming: 'gaming-template.html',
27
+ blog: 'blog-template.html',
28
+ travel: 'travel/index.html',
29
+ shopping: 'shopping/index.html',
30
+ starlight: 'starlight.html',
31
+ news: 'news-template.html',
32
+ docs: 'kitchen-sink.html',
33
+ demo: 'demo.html'
34
+ };
35
+
36
+ const templateFile = templateMap[template];
37
+ if (!templateFile) {
38
+ console.error(`❌ Error: Unknown template '${template}'. Available: ${Object.keys(templateMap).join(', ')}`);
39
+ process.exit(1);
40
+ }
41
+
42
+ const srcPath = path.join(templatesDir, templateFile);
43
+ if (!fs.existsSync(srcPath)) {
44
+ console.error(`❌ Error: Template file not found at ${srcPath}`);
45
+ process.exit(1);
46
+ }
47
+
48
+ let content = fs.readFileSync(srcPath, 'utf8');
49
+
50
+ // Adjust stylesheet path in template
51
+ content = content.replace(/href="(\.\.\/)*dist\/quantum(\.min)?\.css"/, 'href="dist/quantum.css"');
52
+
53
+ const fullTargetPath = path.resolve(targetPath);
54
+ const targetDir = path.dirname(fullTargetPath);
55
+ if (!fs.existsSync(targetDir)) {
56
+ fs.mkdirSync(targetDir, { recursive: true });
57
+ }
58
+
59
+ fs.writeFileSync(fullTargetPath, content);
60
+ console.log(`🚀 Successfully scaffolded '${template}' template to ${targetPath}`);
61
+ console.log(`👉 Run 'quantumcss' to generate the required CSS.`);
62
+ }
63
+
23
64
  function main() {
24
65
  const args = process.argv.slice(2);
66
+
67
+ if (args[0] === 'scaffold') {
68
+ const template = args[1];
69
+ const targetPath = args[2] || 'index.html';
70
+ if (!template) {
71
+ console.error('❌ Error: Please specify a template name (e.g., gaming, blog, travel)');
72
+ process.exit(1);
73
+ }
74
+ scaffold(template, targetPath);
75
+ return;
76
+ }
77
+
25
78
  const watch = args.includes('--watch') || args.includes('-w');
26
79
  const outputPath = args.find(a => !a.startsWith('-')) || 'dist/quantum.css';
27
80
 
package/src/defaults.js CHANGED
@@ -2,226 +2,95 @@ const defaultTheme = {
2
2
  colors: {
3
3
  white: '#ffffff',
4
4
  black: '#000000',
5
- gray: {
6
- 50: '#f9fafb',
7
- 100: '#f3f4f6',
8
- 200: '#e5e7eb',
9
- 300: '#d1d5db',
10
- 400: '#9ca3af',
11
- 500: '#6b7280',
12
- 600: '#4b5563',
13
- 700: '#374151',
14
- 800: '#1f2937',
15
- 900: '#111827',
5
+ slate: {
6
+ 50: '#f8fafc', 100: '#f1f5f9', 200: '#e2e8f0', 300: '#cbd5e1', 400: '#94a3b8',
7
+ 500: '#64748b', 600: '#475569', 700: '#334155', 800: '#1e293b', 900: '#0f172a', 950: '#020617'
16
8
  },
17
9
  blue: {
18
- 50: '#eff6ff',
19
- 500: '#3b82f6',
20
- 600: '#2563eb',
10
+ 50: '#eff6ff', 100: '#dbeafe', 200: '#bfdbfe', 300: '#93c5fd', 400: '#60a5fa', 500: '#3b82f6', 600: '#2563eb'
21
11
  },
22
- red: {
23
- 500: '#ef4444',
12
+ orange: {
13
+ 50: '#fff7ed', 100: '#ffedd5', 200: '#fed7aa', 300: '#fdba74', 400: '#fb923c', 500: '#f97316', 600: '#ea580c'
24
14
  },
15
+ red: { 500: '#ef4444' },
25
16
  green: {
26
- 500: '#10b981',
17
+ 100: '#d1fae5',
18
+ 500: '#10b981'
27
19
  },
28
20
  starlight: {
29
- blue: '#00d4ff',
30
- peach: '#ffb38a',
31
- orange: '#ff7e5f',
32
- deep: '#08081a',
33
- }
21
+ blue: '#00d4ff', peach: '#ffb38a', orange: '#ff7e5f', deep: '#08081a',
22
+ },
23
+ transparent: 'transparent',
34
24
  },
35
25
  spacing: {
36
- 0: '0px',
37
- 1: '0.25rem',
38
- 2: '0.5rem',
39
- 3: '0.75rem',
40
- 4: '1rem',
41
- 5: '1.25rem',
42
- 6: '1.5rem',
43
- 8: '2rem',
44
- 10: '2.5rem',
45
- 12: '3rem',
46
- 16: '4rem',
47
- 20: '5rem',
48
- 24: '6rem',
49
- 32: '8rem',
50
- 64: '16rem',
51
- 128: '32rem',
52
- 144: '36rem',
26
+ 0: '0px', px: '1px', 1: '0.25rem', 2: '0.5rem', 3: '0.75rem', 4: '1rem', 5: '1.25rem',
27
+ 6: '1.5rem', 8: '2rem', 10: '2.5rem', 12: '3rem', 14: '3.5rem', 16: '4rem', 20: '5rem',
28
+ 24: '6rem', 32: '8rem', 40: '10rem', 48: '12rem', 64: '16rem', 128: '32rem',
53
29
  },
54
30
  fontSize: {
55
- xs: '0.75rem',
56
- sm: '0.875rem',
57
- base: '1rem',
58
- lg: '1.125rem',
59
- xl: '1.25rem',
60
- '2xl': '1.5rem',
61
- '3xl': '2rem',
62
- '4xl': '2.5rem',
63
- '5xl': '3.5rem',
64
- '6xl': '4.5rem',
31
+ xs: '0.75rem', sm: '0.875rem', base: '1rem', lg: '1.125rem', xl: '1.25rem',
32
+ '2xl': '1.5rem', '3xl': '2rem', '4xl': '2.5rem', '5xl': '3rem', '6xl': '4rem',
65
33
  },
66
34
  shadows: {
67
35
  sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
68
36
  md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
69
37
  lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
70
38
  xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
39
+ '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
71
40
  }
72
41
  };
73
42
 
74
43
  const utilityMaps = {
75
- // Layout
76
44
  flex: { property: 'display', value: 'flex' },
77
45
  grid: { property: 'display', value: 'grid' },
78
46
  hidden: { property: 'display', value: 'none' },
79
47
  block: { property: 'display', value: 'block' },
80
48
  'inline-block': { property: 'display', value: 'inline-block' },
81
-
82
- // Alignment
83
49
  'items-center': { property: 'align-items', value: 'center' },
84
50
  'items-start': { property: 'align-items', value: 'flex-start' },
85
51
  'items-end': { property: 'align-items', value: 'flex-end' },
86
52
  'justify-center': { property: 'justify-content', value: 'center' },
87
53
  'justify-between': { property: 'justify-content', value: 'space-between' },
88
- 'justify-start': { property: 'justify-content', value: 'flex-start' },
89
- 'justify-end': { property: 'justify-content', value: 'flex-end' },
90
-
91
- // Flex/Grid specific
92
54
  'flex-col': { property: 'flex-direction', value: 'column' },
93
- 'flex-grow': { property: 'flex-grow', value: '1' },
94
- 'flex-wrap': { property: 'flex-wrap', value: 'wrap' },
95
-
96
- // Sizing
97
- w: 'width',
98
- h: 'height',
55
+ 'flex-row': { property: 'flex-direction', value: 'row' },
56
+ 'flex-1': { property: 'flex', value: '1 1 0%' },
57
+ 'flex-shrink-0': { property: 'flex-shrink', value: '0' },
99
58
  'w-full': { property: 'width', value: '100%' },
100
59
  'h-full': { property: 'height', value: '100%' },
101
- 'max-w-prose': { property: 'max-width', value: '65ch' },
102
- 'min-h-screen': { property: 'min-height', value: '100vh' },
103
-
104
- // Spacing
105
- m: 'margin',
106
- mt: 'margin-top',
107
- mr: 'margin-right',
108
- mb: 'margin-bottom',
109
- ml: 'margin-left',
110
- mx: ['margin-left', 'margin-right'],
111
- my: ['margin-top', 'margin-bottom'],
112
- p: 'padding',
113
- pt: 'padding-top',
114
- pr: 'padding-right',
115
- pb: 'padding-bottom',
116
- pl: 'padding-left',
117
- px: ['padding-left', 'padding-right'],
118
- py: ['padding-top', 'padding-bottom'],
119
- gap: 'gap',
120
-
121
- // Typography
122
- text: 'font-size',
123
- 'font-bold': { property: 'font-weight', value: '700' },
124
- 'font-medium': { property: 'font-weight', value: '500' },
125
- 'font-light': { property: 'font-weight', value: '300' },
126
- 'tracking-tighter': { property: 'letter-spacing', value: '-0.05em' },
127
- 'tracking-tight': { property: 'letter-spacing', value: '-0.025em' },
128
- 'text-center': { property: 'text-align', value: 'center' },
129
- 'text-left': { property: 'text-align', value: 'left' },
130
- 'text-right': { property: 'text-align', value: 'right' },
131
-
132
- // Visuals
133
- bg: 'background-color',
134
- rounded: 'border-radius',
135
- 'rounded-full': { property: 'border-radius', value: '9999px' },
136
- 'rounded-xl': { property: 'border-radius', value: '0.75rem' },
137
- border: { property: 'border-width', value: '1px' },
138
- 'border-t': { property: 'border-top-width', value: '1px' },
139
- 'border-b': { property: 'border-bottom-width', value: '1px' },
140
- shadow: 'box-shadow',
141
-
142
- // Interactivity & States
143
- transition: { property: 'transition', value: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)' },
144
- 'scale-105': { property: 'transform', value: 'scale(1.05)' },
145
- 'active-scale': { property: 'transform', value: 'scale(0.96)' },
146
- 'cursor-pointer': { property: 'cursor', value: 'pointer' },
60
+ 'min-w-0': { property: 'min-width', value: '0' },
147
61
  'overflow-hidden': { property: 'overflow', value: 'hidden' },
148
-
149
- // Starlight Primitives
62
+ 'overflow-visible': { property: 'overflow', value: 'visible' },
63
+ 'border-none': { property: 'border-width', value: '0' },
64
+ 'bg-transparent': { property: 'background-color', value: 'transparent' },
150
65
  'glass': {
151
- property: ['background-color', 'backdrop-filter', '-webkit-backdrop-filter', 'border', 'box-shadow'],
152
- value: ['rgba(255, 255, 255, 0.03)', 'blur(16px)', 'blur(16px)', '1px solid rgba(255, 255, 255, 0.1)', '0 8px 32px 0 rgba(0, 0, 0, 0.37)']
66
+ property: ['background-color', 'backdrop-filter', '-webkit-backdrop-filter', 'border-width', 'border-color'],
67
+ value: ['rgba(255, 255, 255, 0.03)', 'blur(16px)', 'blur(16px)', '1px', 'rgba(255, 255, 255, 0.1)']
153
68
  },
154
69
  'glow-blue': { property: 'box-shadow', value: '0 0 30px rgba(0, 212, 255, 0.25)' },
155
- 'glow-peach': { property: 'box-shadow', value: '0 0 30px rgba(255, 179, 138, 0.2)' },
156
70
  'bg-starlight': { property: 'background', value: 'linear-gradient(135deg, #ffb38a 0%, #00d4ff 100%)' },
157
71
  'text-gradient-starlight': {
158
72
  property: ['background', '-webkit-background-clip', '-webkit-text-fill-color', 'display'],
159
73
  value: ['linear-gradient(to right, #ffb38a, #00d4ff)', 'text', 'transparent', 'inline-block']
160
74
  },
161
-
162
- // Components
163
75
  'btn-starlight': {
164
76
  property: ['background', 'color', 'border', 'box-shadow', 'font-weight', 'transition', 'height', 'padding', 'display', 'align-items', 'justify-content', 'border-radius', 'cursor'],
165
77
  value: ['linear-gradient(135deg, #ffb38a 0%, #00d4ff 100%)', '#000', 'none', '0 0 20px rgba(0, 212, 255, 0.3)', '700', 'all 0.2s ease', '3rem', '0 1.5rem', 'inline-flex', 'center', 'center', '0.75rem', 'pointer']
166
78
  },
167
79
  'btn-secondary': {
168
- property: ['background', 'color', 'border', 'font-weight', 'transition', 'height', 'padding', 'display', 'align-items', 'justify-content', 'border-radius', 'cursor'],
169
- value: ['rgba(255, 255, 255, 0.05)', 'inherit', '1px solid rgba(255, 255, 255, 0.15)', '700', 'all 0.2s ease', '3rem', '0 1.5rem', 'inline-flex', 'center', 'center', '0.75rem', 'pointer']
80
+ property: ['background', 'color', 'border', 'font-weight', 'transition', 'height', 'padding', 'display', 'align-items', 'justify-content', 'border-radius', 'cursor', 'backdrop-filter', '-webkit-backdrop-filter'],
81
+ value: ['rgba(255, 255, 255, 0.05)', 'inherit', '1px solid rgba(255, 255, 255, 0.15)', '700', 'all 0.2s ease', '3rem', '0 1.5rem', 'inline-flex', 'center', 'center', '0.75rem', 'pointer', 'blur(12px)', 'blur(12px)']
170
82
  },
171
83
  'input-starlight': {
172
- property: ['background-color', 'border', 'color', 'border-radius', 'padding', 'appearance', 'background-image', 'background-repeat', 'background-position', 'background-size', 'transition', 'height'],
173
- value: [
174
- 'rgba(255, 255, 255, 0.04)',
175
- '1px solid rgba(255, 255, 255, 0.15)',
176
- 'inherit',
177
- '0.75rem',
178
- '0 2.5rem 0 1rem',
179
- 'none',
180
- 'url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' fill=\'none\' viewBox=\'0 0 24 24\' stroke=\'rgba(255,255,255,0.4)\'%3E%3Cpath stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-width=\'2\' d=\'M8 9l4 4 4-4\' /%3E%3C/svg%3E")',
181
- 'no-repeat',
182
- 'right 1rem center',
183
- '1rem',
184
- 'all 0.2s ease',
185
- '3rem'
186
- ]
84
+ property: ['background-color', 'border', 'color', 'border-radius', 'padding', 'appearance', 'transition', 'height'],
85
+ value: ['rgba(255, 255, 255, 0.04)', '1px solid rgba(255, 255, 255, 0.15)', 'inherit', '0.75rem', '0 1rem', 'none', 'all 0.2s ease', '3rem']
86
+ },
87
+ 'textarea-starlight': {
88
+ property: ['background-color', 'border', 'color', 'border-radius', 'padding', 'appearance', 'transition', 'min-height', 'width', 'display'],
89
+ value: ['rgba(255, 255, 255, 0.04)', '1px solid rgba(255, 255, 255, 0.15)', 'inherit', '0.75rem', '1rem', 'none', 'all 0.2s ease', '8rem', '100%', 'block']
187
90
  },
188
91
  'checkbox-starlight': {
189
92
  property: ['appearance', 'width', 'height', 'background', 'border', 'border-radius', 'cursor', 'transition', 'position', 'display', 'align-items', 'justify-content'],
190
93
  value: ['none', '1.25rem', '1.25rem', 'rgba(255, 255, 255, 0.05)', '1px solid rgba(255, 255, 255, 0.2)', '0.375rem', 'pointer', 'all 0.2s ease', 'relative', 'inline-flex', 'center', 'center']
191
- },
192
- 'radio-starlight': {
193
- property: ['appearance', 'width', 'height', 'background', 'border', 'border-radius', 'cursor', 'transition', 'position', 'display', 'align-items', 'justify-content'],
194
- value: ['none', '1.25rem', '1.25rem', 'rgba(255, 255, 255, 0.05)', '1px solid rgba(255, 255, 255, 0.2)', '50%', 'pointer', 'all 0.2s ease', 'relative', 'inline-flex', 'center', 'center']
195
- },
196
-
197
- // Dialog & Menu
198
- 'dialog-overlay': {
199
- property: ['position', 'top', 'left', 'width', 'height', 'background', 'backdrop-filter', 'display', 'align-items', 'justify-content', 'z-index'],
200
- value: ['fixed', '0', '0', '100vw', '100vh', 'rgba(0, 0, 0, 0.6)', 'blur(12px)', 'flex', 'center', 'center', '400']
201
- },
202
- 'dialog-content': {
203
- property: ['background-color', 'backdrop-filter', 'border', 'border-radius', 'width', 'max-width', 'box-shadow', 'overflow', 'position'],
204
- value: ['rgba(10, 10, 20, 0.98)', 'blur(20px)', '1px solid rgba(255, 255, 255, 0.1)', '1.5rem', '90%', '600px', '0 25px 50px -12px rgba(0, 0, 0, 0.5)', 'hidden', 'relative']
205
- },
206
- 'dropdown-menu': {
207
- property: ['background-color', 'backdrop-filter', 'border', 'border-radius', 'padding', 'box-shadow', 'min-width', 'z-index', 'margin-top'],
208
- value: ['rgba(15, 15, 30, 0.98)', 'blur(20px)', '1px solid rgba(255, 255, 255, 0.1)', '1rem', '0.5rem', '0 20px 40px rgba(0,0,0,0.4)', '200px', '600', '0.5rem']
209
- },
210
- 'dropdown-item': {
211
- property: ['padding', 'color', 'border-radius', 'display', 'width', 'text-align', 'transition', 'cursor', 'font-size'],
212
- value: ['0.625rem 1rem', 'rgba(255,255,255,0.7)', '0.625rem', 'block', '100%', 'left', 'all 0.2s', 'pointer', '0.875rem']
213
- },
214
-
215
- // Tooltip
216
- 'tooltip': {
217
- property: ['position', 'bottom', 'left', 'transform', 'padding', 'background-color', 'backdrop-filter', 'border', 'border-radius', 'color', 'font-size', 'white-space', 'pointer-events', 'opacity', 'transition', 'z-index', 'box-shadow'],
218
- value: ['absolute', '125%', '50%', 'translateX(-50%)', '0.5rem 0.75rem', 'rgba(10, 10, 30, 0.98)', 'blur(12px)', '1px solid rgba(0, 212, 255, 0.3)', '0.5rem', '#f1f5f9', '0.75rem', 'nowrap', 'none', '0', 'all 0.2s ease', '800', '0 4px 15px rgba(0, 0, 0, 0.4)']
219
- },
220
-
221
- // Skeleton
222
- 'skeleton': {
223
- property: ['background-color', 'background-image', 'background-size', 'background-repeat', 'border-radius', 'width', 'height'],
224
- value: ['rgba(255, 255, 255, 0.1)', 'linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent)', '200% 100%', 'no-repeat', '0.5rem', '100%', '1rem']
225
94
  }
226
95
  };
227
96