fractalstyler2 0.3.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 (12) hide show
  1. package/README.md +1 -1
  2. package/dist/mcp/server.js +17 -6
  3. package/dist/styles/_00_tokens.sass +84 -105
  4. package/dist/styles/_01_config.sass +21 -35
  5. package/dist/styles/_09_utilities.sass +7 -4
  6. package/dist/styles/_10_layouts.sass +3 -2
  7. package/package.json +1 -1
  8. package/plugin.json +1 -1
  9. package/templates/_00_tokens.sass +82 -105
  10. package/templates/_01_config.sass +17 -35
  11. package/templates/_09_utilities.sass +6 -4
  12. package/templates/_10_layouts.sass +3 -2
package/README.md CHANGED
@@ -15,7 +15,7 @@ Scaffold the complete, customizable SASS design system directly into your projec
15
15
  npx fractalstyler2 init
16
16
 
17
17
  # Or using pnpm
18
- pnpm dlx fractalstyler2 init
18
+ pnpm --package=fractalstyler2 dlx fractalstyler2 init
19
19
  ```
20
20
 
21
21
  ### Next Steps in Your Project
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
@@ -5,6 +5,78 @@
5
5
  // JS disabled; dark comes from prefers-color-scheme and explicit [data-mode='dark'].
6
6
  // =============================================================================
7
7
 
8
+ =light-theme-tokens
9
+ color-scheme: light
10
+ --bg: #fdfefe
11
+ --bg-surface: #f8f7f7
12
+ --bg-raised: #f1f5f9
13
+ --bg-panel: #F1F3F5
14
+ --bg-footer: #E9ECEF
15
+ --bg-popover: #FFFFFF
16
+ --bg-dialog: #FFFFFF
17
+ --bg-terminal: #0F172A
18
+ --bg-input: #FFFFFF
19
+ --bg-canvas: #F8F9FA
20
+ --text-primary: #0f172a
21
+ --text-secondary: #5b6472
22
+ --text-muted: #929497
23
+ --text-inverse: #ffffff
24
+ --state-hover: #E2E8F0
25
+ --state-hover-subtle: #F1F5F9
26
+ --state-selected: #CBD5E1
27
+ --border: #E2E8F0
28
+ --border-subtle: #EDF2F7
29
+ --theme-color: #04825B
30
+ --theme-color-alt: #047857
31
+ --theme: var(--theme-color)
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
42
+ --ring: rgba(0, 127, 78, 0.35)
43
+
44
+ =dark-theme-tokens
45
+ color-scheme: dark
46
+ --bg: #0E1118
47
+ --bg-surface: #141824
48
+ --bg-raised: #1C2232
49
+ --bg-panel: #101420
50
+ --bg-footer: #0B0D14
51
+ --bg-popover: #20273A
52
+ --bg-dialog: #20273A
53
+ --bg-terminal: #080A0F
54
+ --bg-input: #121622
55
+ --bg-canvas: #0E1118
56
+ --border: #28324A
57
+ --border-subtle: #1E2538
58
+ --text-primary: #EDF2F7
59
+ --text-secondary: #9BB0C7
60
+ --text-muted: #5D7087
61
+ --state-hover: #263047
62
+ --state-hover-subtle: #1B2233
63
+ --state-selected: #32405E
64
+ --theme-color: #38BDF8
65
+ --theme-color-alt: #0EA5E9
66
+ --theme: var(--theme-color)
67
+ --theme-hover: var(--theme-color-alt)
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
78
+ --ring: rgba(16, 185, 129, 0.4)
79
+
8
80
  :root
9
81
  color-scheme: light
10
82
 
@@ -34,16 +106,16 @@
34
106
  --space-3xl: clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem)
35
107
  --space-s-l: clamp(1.125rem, 0.5625rem + 2.5vw, 2.5rem)
36
108
 
37
- // Radius (Concentric 2px, 3px, 4px, 6px hierarchy)
109
+ // Radius (Concentric hierarchy)
38
110
  --radius-0: 0
39
111
  --radius-2: 2px
40
112
  --radius-3: 3px
41
113
  --radius-4: 4px
42
114
  --radius-6: 6px
43
- --radius-8: 6px
44
- --radius-12: 6px
45
- --radius-16: 6px
46
- --radius-24: 6px
115
+ --radius-8: 8px
116
+ --radius-12: 12px
117
+ --radius-16: 16px
118
+ --radius-24: 24px
47
119
  --radius-full: 9999px
48
120
 
49
121
  // Control Heights
@@ -68,110 +140,17 @@
68
140
  --footer-height: 56px
69
141
  --measure: 65ch
70
142
 
71
- // Light palette (marker-free default)
72
- --bg: #fdfefe
73
- --bg-surface: #f8f7f7
74
- --bg-raised: #f1f5f9
75
- --bg-panel: #F1F3F5
76
- --bg-footer: #E9ECEF
77
- --bg-popover: #FFFFFF
78
- --bg-dialog: #FFFFFF
79
- --bg-terminal: #0F172A
80
- --bg-input: #FFFFFF
81
- --bg-canvas: #F8F9FA
82
- --text-primary: #0f172a
83
- --text-secondary: #5b6472
84
- --text-muted: #929497
85
- --text-inverse: #ffffff
86
- --state-hover: #E2E8F0
87
- --state-hover-subtle: #F1F5F9
88
- --state-selected: #CBD5E1
89
- --border: #E2E8F0
90
- --border-subtle: #EDF2F7
91
- --theme-color: #04825B
92
- --theme-color-alt: #047857
93
- --theme: var(--theme-color)
94
- --theme-hover: var(--theme-color-alt)
95
- --ring: rgba(0, 127, 78, 0.35)
143
+ // Default Light Palette
144
+ +light-theme-tokens
96
145
 
97
146
  @media (prefers-color-scheme: dark)
98
147
  :root:not([data-mode='light'])
99
- color-scheme: dark
100
- --bg: #0E1118
101
- --bg-surface: #141824
102
- --bg-raised: #1C2232
103
- --bg-panel: #101420
104
- --bg-footer: #0B0D14
105
- --bg-popover: #20273A
106
- --bg-dialog: #20273A
107
- --bg-terminal: #080A0F
108
- --bg-input: #121622
109
- --bg-canvas: #0E1118
110
- --border: #28324A
111
- --border-subtle: #1E2538
112
- --text-primary: #EDF2F7
113
- --text-secondary: #9BB0C7
114
- --text-muted: #5D7087
115
- --state-hover: #263047
116
- --state-hover-subtle: #1B2233
117
- --state-selected: #32405E
118
- --theme-color: #38BDF8
119
- --theme-color-alt: #0EA5E9
120
- --theme: var(--theme-color)
121
- --theme-hover: var(--theme-color-alt)
122
- --text-inverse: #0E1118
123
- --ring: rgba(16, 185, 129, 0.4)
148
+ +dark-theme-tokens
124
149
 
125
150
  [data-mode='dark']
126
- color-scheme: dark
127
- --bg: #0E1118
128
- --bg-surface: #141824
129
- --bg-raised: #1C2232
130
- --bg-panel: #101420
131
- --bg-footer: #0B0D14
132
- --bg-popover: #20273A
133
- --bg-dialog: #20273A
134
- --bg-terminal: #080A0F
135
- --bg-input: #121622
136
- --bg-canvas: #0E1118
137
- --border: #28324A
138
- --border-subtle: #1E2538
139
- --text-primary: #EDF2F7
140
- --text-secondary: #9BB0C7
141
- --text-muted: #5D7087
142
- --state-hover: #263047
143
- --state-hover-subtle: #1B2233
144
- --state-selected: #32405E
145
- --theme-color: #38BDF8
146
- --theme-color-alt: #0EA5E9
147
- --theme: var(--theme-color)
148
- --theme-hover: var(--theme-color-alt)
149
- --text-inverse: #0E1118
150
- --ring: rgba(16, 185, 129, 0.4)
151
+ +dark-theme-tokens
151
152
 
152
153
  [data-mode='light']
153
- color-scheme: light
154
- --bg: #fdfefe
155
- --bg-surface: #f8f7f7
156
- --bg-raised: #f1f5f9
157
- --bg-panel: #F1F3F5
158
- --bg-footer: #E9ECEF
159
- --bg-popover: #FFFFFF
160
- --bg-dialog: #FFFFFF
161
- --bg-terminal: #0F172A
162
- --bg-input: #FFFFFF
163
- --bg-canvas: #F8F9FA
164
- --text-primary: #0f172a
165
- --text-secondary: #5b6472
166
- --text-muted: #929497
167
- --text-inverse: #ffffff
168
- --state-hover: #E2E8F0
169
- --state-hover-subtle: #F1F5F9
170
- --state-selected: #CBD5E1
171
- --border: #E2E8F0
172
- --border-subtle: #EDF2F7
173
- --theme-color: #04825B
174
- --theme-color-alt: #047857
175
- --theme: var(--theme-color)
176
- --theme-hover: var(--theme-color-alt)
177
- --ring: rgba(0, 127, 78, 0.35)
154
+ +light-theme-tokens
155
+
156
+
package/dist/styles/_01_config.sass CHANGED
@@ -25,60 +25,46 @@ $ink-roles: primary secondary muted inverse theme-color theme-color-alt
25
25
 
26
26
  $align-map: (start: flex-start, end: flex-end, center: center, between: space-between, around: space-around, evenly: space-evenly, stretch: stretch, baseline: baseline)
27
27
 
28
+ // --- Universal Token Resolver --------------------------------------------------
29
+ @function tok($group, $v)
30
+ @if $v == null
31
+ @return null
32
+ @if meta.type-of($v) == number
33
+ @if math.is-unitless($v)
34
+ @return #{$v}px
35
+ @else
36
+ @return $v
37
+ @if meta.type-of($v) == string
38
+ @return var(--#{$group}-#{$v})
39
+ @return $v
40
+
28
41
  // --- Resolvers ----------------------------------------------------------------
29
42
 
30
- // space(m) → var(--space-m) | space(18) → 18px | space(2rem) → 2rem
31
43
  @function space($v)
32
- @if $v == null
33
- @return null
34
- @else if list.index($space-steps, $v)
35
- @return var(--space-#{$v})
36
- @else if meta.type-of($v) == number and math.is-unitless($v)
37
- @return #{$v}px
38
- @else
39
- @return $v
44
+ @return tok(space, $v)
40
45
 
41
46
  @function radius($v)
42
- @if list.index($radius-steps, $v)
43
- @return var(--radius-#{$v})
44
- @else if meta.type-of($v) == number and math.is-unitless($v)
45
- @return #{$v}px
46
- @else
47
- @return $v
47
+ @return tok(radius, $v)
48
48
 
49
49
  @function text-size($v)
50
- @if list.index($text-steps, $v)
51
- @return var(--text-#{$v})
52
- @else
53
- @return $v
50
+ @return tok(text, $v)
54
51
 
55
52
  @function shadow($v)
56
- @if list.index($shadow-steps, $v)
57
- @return var(--shadow-#{$v})
58
- @else
59
- @return $v
53
+ @return tok(shadow, $v)
60
54
 
61
55
  @function surface($role)
62
56
  @if $role == bg
63
57
  @return var(--bg)
64
- @else if list.index($surface-roles, $role)
65
- @return var(--bg-#{$role})
66
- @else
67
- @return var(--bg-#{$role})
58
+ @return tok(bg, $role)
68
59
 
69
60
  @function ink($role)
70
61
  @if $role == primary
71
62
  @return var(--text-primary)
72
- @else if list.index($ink-roles, $role)
73
- @return var(--text-#{$role})
74
- @else
75
- @return var(--text-#{$role})
63
+ @return tok(text, $role)
76
64
 
77
65
  @function align($v)
78
- $m: map.get($align-map, $v)
79
- @if $m
80
- @return $m
81
- @return $v
66
+ @return map.get($align-map, $v) or $v
82
67
 
83
68
  @function bp($name)
84
69
  @return map.get($breakpoints, $name)
70
+
package/dist/styles/_09_utilities.sass CHANGED
@@ -44,6 +44,8 @@
44
44
  align-items: flex-start
45
45
  &.ybot
46
46
  align-items: flex-end
47
+ &.xcenter
48
+ justify-content: center
47
49
  &.xbetween
48
50
  justify-content: space-between
49
51
  &.xevenly
@@ -91,13 +93,13 @@
91
93
  +px($s)
92
94
  .py-#{$s}
93
95
  +py($s)
94
- .pad-top-#{$s}, .pt-#{$s}
96
+ .pt-#{$s}, .padtop-#{$s}, .pad-top-#{$s}
95
97
  padding-top: space($s)
96
- .pad-bottom-#{$s}, .pb-#{$s}
98
+ .pb-#{$s}, .padbot-#{$s}, .pad-bottom-#{$s}
97
99
  padding-bottom: space($s)
98
- .pad-left-#{$s}, .pl-#{$s}
100
+ .pl-#{$s}, .padleft-#{$s}, .pad-left-#{$s}
99
101
  padding-left: space($s)
100
- .pad-right-#{$s}, .pr-#{$s}
102
+ .pr-#{$s}, .padright-#{$s}, .pad-right-#{$s}
101
103
  padding-right: space($s)
102
104
  .m-#{$s}
103
105
  margin: space($s)
@@ -110,6 +112,7 @@
110
112
  .mb-#{$s}, .margin-bottom-#{$s}
111
113
  margin-bottom: space($s)
112
114
 
115
+
113
116
  .mx-auto
114
117
  +mx-auto
115
118
  .my-auto
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.3.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
@@ -5,6 +5,78 @@
5
5
  // JS disabled; dark comes from prefers-color-scheme and explicit [data-mode='dark'].
6
6
  // =============================================================================
7
7
 
8
+ =light-theme-tokens
9
+ color-scheme: light
10
+ --bg: #fdfefe
11
+ --bg-surface: #f8f7f7
12
+ --bg-raised: #f1f5f9
13
+ --bg-panel: #F1F3F5
14
+ --bg-footer: #E9ECEF
15
+ --bg-popover: #FFFFFF
16
+ --bg-dialog: #FFFFFF
17
+ --bg-terminal: #0F172A
18
+ --bg-input: #FFFFFF
19
+ --bg-canvas: #F8F9FA
20
+ --text-primary: #0f172a
21
+ --text-secondary: #5b6472
22
+ --text-muted: #929497
23
+ --text-inverse: #ffffff
24
+ --state-hover: #E2E8F0
25
+ --state-hover-subtle: #F1F5F9
26
+ --state-selected: #CBD5E1
27
+ --border: #E2E8F0
28
+ --border-subtle: #EDF2F7
29
+ --theme-color: #04825B
30
+ --theme-color-alt: #047857
31
+ --theme: var(--theme-color)
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
42
+ --ring: rgba(0, 127, 78, 0.35)
43
+
44
+ =dark-theme-tokens
45
+ color-scheme: dark
46
+ --bg: #0E1118
47
+ --bg-surface: #141824
48
+ --bg-raised: #1C2232
49
+ --bg-panel: #101420
50
+ --bg-footer: #0B0D14
51
+ --bg-popover: #20273A
52
+ --bg-dialog: #20273A
53
+ --bg-terminal: #080A0F
54
+ --bg-input: #121622
55
+ --bg-canvas: #0E1118
56
+ --border: #28324A
57
+ --border-subtle: #1E2538
58
+ --text-primary: #EDF2F7
59
+ --text-secondary: #9BB0C7
60
+ --text-muted: #5D7087
61
+ --state-hover: #263047
62
+ --state-hover-subtle: #1B2233
63
+ --state-selected: #32405E
64
+ --theme-color: #38BDF8
65
+ --theme-color-alt: #0EA5E9
66
+ --theme: var(--theme-color)
67
+ --theme-hover: var(--theme-color-alt)
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
78
+ --ring: rgba(16, 185, 129, 0.4)
79
+
8
80
  :root
9
81
  color-scheme: light
10
82
 
@@ -34,16 +106,16 @@
34
106
  --space-3xl: clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem)
35
107
  --space-s-l: clamp(1.125rem, 0.5625rem + 2.5vw, 2.5rem)
36
108
 
37
- // Radius (Concentric 2px, 3px, 4px, 6px hierarchy)
109
+ // Radius (Concentric hierarchy)
38
110
  --radius-0: 0
39
111
  --radius-2: 2px
40
112
  --radius-3: 3px
41
113
  --radius-4: 4px
42
114
  --radius-6: 6px
43
- --radius-8: 6px
44
- --radius-12: 6px
45
- --radius-16: 6px
46
- --radius-24: 6px
115
+ --radius-8: 8px
116
+ --radius-12: 12px
117
+ --radius-16: 16px
118
+ --radius-24: 24px
47
119
  --radius-full: 9999px
48
120
 
49
121
  // Control Heights
@@ -68,110 +140,15 @@
68
140
  --footer-height: 56px
69
141
  --measure: 65ch
70
142
 
71
- // Light palette (marker-free default)
72
- --bg: #fdfefe
73
- --bg-surface: #f8f7f7
74
- --bg-raised: #f1f5f9
75
- --bg-panel: #F1F3F5
76
- --bg-footer: #E9ECEF
77
- --bg-popover: #FFFFFF
78
- --bg-dialog: #FFFFFF
79
- --bg-terminal: #0F172A
80
- --bg-input: #FFFFFF
81
- --bg-canvas: #F8F9FA
82
- --text-primary: #0f172a
83
- --text-secondary: #5b6472
84
- --text-muted: #929497
85
- --text-inverse: #ffffff
86
- --state-hover: #E2E8F0
87
- --state-hover-subtle: #F1F5F9
88
- --state-selected: #CBD5E1
89
- --border: #E2E8F0
90
- --border-subtle: #EDF2F7
91
- --theme-color: #04825B
92
- --theme-color-alt: #047857
93
- --theme: var(--theme-color)
94
- --theme-hover: var(--theme-color-alt)
95
- --ring: rgba(0, 127, 78, 0.35)
143
+ // Default Light Palette
144
+ +light-theme-tokens
96
145
 
97
146
  @media (prefers-color-scheme: dark)
98
147
  :root:not([data-mode='light'])
99
- color-scheme: dark
100
- --bg: #0E1118
101
- --bg-surface: #141824
102
- --bg-raised: #1C2232
103
- --bg-panel: #101420
104
- --bg-footer: #0B0D14
105
- --bg-popover: #20273A
106
- --bg-dialog: #20273A
107
- --bg-terminal: #080A0F
108
- --bg-input: #121622
109
- --bg-canvas: #0E1118
110
- --border: #28324A
111
- --border-subtle: #1E2538
112
- --text-primary: #EDF2F7
113
- --text-secondary: #9BB0C7
114
- --text-muted: #5D7087
115
- --state-hover: #263047
116
- --state-hover-subtle: #1B2233
117
- --state-selected: #32405E
118
- --theme-color: #38BDF8
119
- --theme-color-alt: #0EA5E9
120
- --theme: var(--theme-color)
121
- --theme-hover: var(--theme-color-alt)
122
- --text-inverse: #0E1118
123
- --ring: rgba(16, 185, 129, 0.4)
148
+ +dark-theme-tokens
124
149
 
125
150
  [data-mode='dark']
126
- color-scheme: dark
127
- --bg: #0E1118
128
- --bg-surface: #141824
129
- --bg-raised: #1C2232
130
- --bg-panel: #101420
131
- --bg-footer: #0B0D14
132
- --bg-popover: #20273A
133
- --bg-dialog: #20273A
134
- --bg-terminal: #080A0F
135
- --bg-input: #121622
136
- --bg-canvas: #0E1118
137
- --border: #28324A
138
- --border-subtle: #1E2538
139
- --text-primary: #EDF2F7
140
- --text-secondary: #9BB0C7
141
- --text-muted: #5D7087
142
- --state-hover: #263047
143
- --state-hover-subtle: #1B2233
144
- --state-selected: #32405E
145
- --theme-color: #38BDF8
146
- --theme-color-alt: #0EA5E9
147
- --theme: var(--theme-color)
148
- --theme-hover: var(--theme-color-alt)
149
- --text-inverse: #0E1118
150
- --ring: rgba(16, 185, 129, 0.4)
151
+ +dark-theme-tokens
151
152
 
152
153
  [data-mode='light']
153
- color-scheme: light
154
- --bg: #fdfefe
155
- --bg-surface: #f8f7f7
156
- --bg-raised: #f1f5f9
157
- --bg-panel: #F1F3F5
158
- --bg-footer: #E9ECEF
159
- --bg-popover: #FFFFFF
160
- --bg-dialog: #FFFFFF
161
- --bg-terminal: #0F172A
162
- --bg-input: #FFFFFF
163
- --bg-canvas: #F8F9FA
164
- --text-primary: #0f172a
165
- --text-secondary: #5b6472
166
- --text-muted: #929497
167
- --text-inverse: #ffffff
168
- --state-hover: #E2E8F0
169
- --state-hover-subtle: #F1F5F9
170
- --state-selected: #CBD5E1
171
- --border: #E2E8F0
172
- --border-subtle: #EDF2F7
173
- --theme-color: #04825B
174
- --theme-color-alt: #047857
175
- --theme: var(--theme-color)
176
- --theme-hover: var(--theme-color-alt)
177
- --ring: rgba(0, 127, 78, 0.35)
154
+ +light-theme-tokens
package/templates/_01_config.sass CHANGED
@@ -25,60 +25,42 @@ $ink-roles: primary secondary muted inverse theme-color theme-color-alt
25
25
 
26
26
  $align-map: (start: flex-start, end: flex-end, center: center, between: space-between, around: space-around, evenly: space-evenly, stretch: stretch, baseline: baseline)
27
27
 
28
- // --- Resolvers ----------------------------------------------------------------
29
-
30
- // space(m) → var(--space-m) | space(18) → 18px | space(2rem) → 2rem
31
- @function space($v)
28
+ // --- Universal Token Resolver --------------------------------------------------
29
+ @function tok($group, $v)
32
30
  @if $v == null
33
31
  @return null
34
- @else if list.index($space-steps, $v)
35
- @return var(--space-#{$v})
36
- @else if meta.type-of($v) == number and math.is-unitless($v)
32
+ @if meta.type-of($v) == number and math.is-unitless($v)
37
33
  @return #{$v}px
38
- @else
39
- @return $v
34
+ @if meta.type-of($v) == string and not (math.unit($v) != '')
35
+ @return var(--#{$group}-#{$v})
36
+ @return $v
37
+
38
+ // --- Resolvers ----------------------------------------------------------------
39
+
40
+ @function space($v)
41
+ @return tok(space, $v)
40
42
 
41
43
  @function radius($v)
42
- @if list.index($radius-steps, $v)
43
- @return var(--radius-#{$v})
44
- @else if meta.type-of($v) == number and math.is-unitless($v)
45
- @return #{$v}px
46
- @else
47
- @return $v
44
+ @return tok(radius, $v)
48
45
 
49
46
  @function text-size($v)
50
- @if list.index($text-steps, $v)
51
- @return var(--text-#{$v})
52
- @else
53
- @return $v
47
+ @return tok(text, $v)
54
48
 
55
49
  @function shadow($v)
56
- @if list.index($shadow-steps, $v)
57
- @return var(--shadow-#{$v})
58
- @else
59
- @return $v
50
+ @return tok(shadow, $v)
60
51
 
61
52
  @function surface($role)
62
53
  @if $role == bg
63
54
  @return var(--bg)
64
- @else if list.index($surface-roles, $role)
65
- @return var(--bg-#{$role})
66
- @else
67
- @return var(--bg-#{$role})
55
+ @return tok(bg, $role)
68
56
 
69
57
  @function ink($role)
70
58
  @if $role == primary
71
59
  @return var(--text-primary)
72
- @else if list.index($ink-roles, $role)
73
- @return var(--text-#{$role})
74
- @else
75
- @return var(--text-#{$role})
60
+ @return tok(text, $role)
76
61
 
77
62
  @function align($v)
78
- $m: map.get($align-map, $v)
79
- @if $m
80
- @return $m
81
- @return $v
63
+ @return map.get($align-map, $v) or $v
82
64
 
83
65
  @function bp($name)
84
66
  @return map.get($breakpoints, $name)
package/templates/_09_utilities.sass CHANGED
@@ -44,6 +44,8 @@
44
44
  align-items: flex-start
45
45
  &.ybot
46
46
  align-items: flex-end
47
+ &.xcenter
48
+ justify-content: center
47
49
  &.xbetween
48
50
  justify-content: space-between
49
51
  &.xevenly
@@ -91,13 +93,13 @@
91
93
  +px($s)
92
94
  .py-#{$s}
93
95
  +py($s)
94
- .pad-top-#{$s}, .pt-#{$s}
96
+ .pt-#{$s}, .padtop-#{$s}, .pad-top-#{$s}
95
97
  padding-top: space($s)
96
- .pad-bottom-#{$s}, .pb-#{$s}
98
+ .pb-#{$s}, .padbot-#{$s}, .pad-bottom-#{$s}
97
99
  padding-bottom: space($s)
98
- .pad-left-#{$s}, .pl-#{$s}
100
+ .pl-#{$s}, .padleft-#{$s}, .pad-left-#{$s}
99
101
  padding-left: space($s)
100
- .pad-right-#{$s}, .pr-#{$s}
102
+ .pr-#{$s}, .padright-#{$s}, .pad-right-#{$s}
101
103
  padding-right: space($s)
102
104
  .m-#{$s}
103
105
  margin: space($s)
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)