fractalstyler2 0.4.0 → 0.4.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 (7) hide show
  1. package/dist/mcp/server.js +17 -6
  2. package/dist/styles/_00_tokens.sass +18 -0
  3. package/dist/styles/_10_layouts.sass +3 -2
  4. package/package.json +1 -1
  5. package/plugin.json +1 -1
  6. package/templates/_00_tokens.sass +18 -0
  7. package/templates/_10_layouts.sass +3 -2
package/dist/mcp/server.js CHANGED
@@ -11,7 +11,7 @@ import * as sass from 'sass';
11
11
  import { existsSync, readFileSync } from 'node:fs';
12
12
  import { dirname, join } from 'node:path';
13
13
  import { fileURLToPath } from 'node:url';
14
- const VERSION = '0.3.0';
14
+ const VERSION = '0.4.0';
15
15
  // Resolve styles directory for SASS compiler loadPaths
16
16
  function getStylesDir() {
17
17
  const HERE = dirname(fileURLToPath(import.meta.url));
@@ -58,11 +58,11 @@ const DESIGN_TOKENS = {
58
58
  '2xs': 9,
59
59
  xs: 14,
60
60
  s: 18,
61
- m: 27,
62
- l: 36,
63
- xl: 54,
64
- '2xl': 72,
65
- '3xl': 108
61
+ m: 28,
62
+ l: 38,
63
+ xl: 56,
64
+ '2xl': 76,
65
+ '3xl': 114
66
66
  }
67
67
  },
68
68
  typography: {
@@ -132,6 +132,17 @@ const DESIGN_TOKENS = {
132
132
  themeColor: 'var(--theme-color)',
133
133
  themeColorAlt: 'var(--theme-color-alt)'
134
134
  },
135
+ status: {
136
+ success: 'var(--success)',
137
+ successHover: 'var(--success-hover)',
138
+ warning: 'var(--warning)',
139
+ warningHover: 'var(--warning-hover)',
140
+ danger: 'var(--danger)',
141
+ dangerHover: 'var(--danger-hover)',
142
+ info: 'var(--info)',
143
+ infoHover: 'var(--info-hover)',
144
+ feedbackError: 'var(--feedback-error)'
145
+ },
135
146
  brand: {
136
147
  theme: 'var(--theme)',
137
148
  themeHover: 'var(--theme-hover)',
package/dist/styles/_00_tokens.sass CHANGED
@@ -30,6 +30,15 @@
30
30
  --theme-color-alt: #047857
31
31
  --theme: var(--theme-color)
32
32
  --theme-hover: var(--theme-color-alt)
33
+ --success: #10B981
34
+ --success-hover: #059669
35
+ --warning: #F59E0B
36
+ --warning-hover: #D97706
37
+ --danger: #EF4444
38
+ --danger-hover: #DC2626
39
+ --info: #3B82F6
40
+ --info-hover: #2563EB
41
+ --feedback-error: #DC2626
33
42
  --ring: rgba(0, 127, 78, 0.35)
34
43
 
35
44
  =dark-theme-tokens
@@ -57,6 +66,15 @@
57
66
  --theme: var(--theme-color)
58
67
  --theme-hover: var(--theme-color-alt)
59
68
  --text-inverse: #0E1118
69
+ --success: #34D399
70
+ --success-hover: #6EE7B7
71
+ --warning: #FBBF24
72
+ --warning-hover: #FCD34D
73
+ --danger: #F87171
74
+ --danger-hover: #FCA5A5
75
+ --info: #60A5FA
76
+ --info-hover: #93C5FD
77
+ --feedback-error: #F87171
60
78
  --ring: rgba(16, 185, 129, 0.4)
61
79
 
62
80
  :root
package/dist/styles/_10_layouts.sass CHANGED
@@ -353,13 +353,14 @@
353
353
  .app-shell
354
354
  +box
355
355
  +relative
356
- isolation: isolate
357
356
  min-height: 100vh
358
357
  > .app-header
359
358
  +row(null, center)
360
359
  +sticky(0)
361
360
  +px(m)
362
- background: var(--bg)
361
+ background: color-mix(in srgb, var(--bg-surface) 88%, transparent)
362
+ backdrop-filter: blur(12px)
363
+ -webkit-backdrop-filter: blur(12px)
363
364
  z-index: var(--z-sticky)
364
365
  height: var(--header-height)
365
366
  +border(bottom)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "fractalstyler2",
3
- "version": "0.4.0",
3
+ "version": "0.4.1",
4
4
  "description": "A fractal-composition styling system for SvelteKit — every style unit is a SASS mixin, and components and layouts are recipes of smaller fractals.",
5
5
  "bin": {
6
6
  "fractalstyler2": "./dist/cli.js",
package/plugin.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "fractalstyler2",
3
- "version": "0.3.0",
3
+ "version": "0.4.0",
4
4
  "description": "Fractal-composition styling system and design token engine for SvelteKit and AI design tools (OpenDesign, Pencil, Cursor).",
5
5
  "author": {
6
6
  "name": "Amrit",
package/templates/_00_tokens.sass CHANGED
@@ -30,6 +30,15 @@
30
30
  --theme-color-alt: #047857
31
31
  --theme: var(--theme-color)
32
32
  --theme-hover: var(--theme-color-alt)
33
+ --success: #10B981
34
+ --success-hover: #059669
35
+ --warning: #F59E0B
36
+ --warning-hover: #D97706
37
+ --danger: #EF4444
38
+ --danger-hover: #DC2626
39
+ --info: #3B82F6
40
+ --info-hover: #2563EB
41
+ --feedback-error: #DC2626
33
42
  --ring: rgba(0, 127, 78, 0.35)
34
43
 
35
44
  =dark-theme-tokens
@@ -57,6 +66,15 @@
57
66
  --theme: var(--theme-color)
58
67
  --theme-hover: var(--theme-color-alt)
59
68
  --text-inverse: #0E1118
69
+ --success: #34D399
70
+ --success-hover: #6EE7B7
71
+ --warning: #FBBF24
72
+ --warning-hover: #FCD34D
73
+ --danger: #F87171
74
+ --danger-hover: #FCA5A5
75
+ --info: #60A5FA
76
+ --info-hover: #93C5FD
77
+ --feedback-error: #F87171
60
78
  --ring: rgba(16, 185, 129, 0.4)
61
79
 
62
80
  :root
package/templates/_10_layouts.sass CHANGED
@@ -353,13 +353,14 @@
353
353
  .app-shell
354
354
  +box
355
355
  +relative
356
- isolation: isolate
357
356
  min-height: 100vh
358
357
  > .app-header
359
358
  +row(null, center)
360
359
  +sticky(0)
361
360
  +px(m)
362
- background: var(--bg)
361
+ background: color-mix(in srgb, var(--bg-surface) 88%, transparent)
362
+ backdrop-filter: blur(12px)
363
+ -webkit-backdrop-filter: blur(12px)
363
364
  z-index: var(--z-sticky)
364
365
  height: var(--header-height)
365
366
  +border(bottom)