fractalstyler2 0.3.0 → 0.4.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.
Files changed (8) hide show
  1. package/README.md +1 -1
  2. package/dist/styles/_00_tokens.sass +66 -105
  3. package/dist/styles/_01_config.sass +21 -35
  4. package/dist/styles/_09_utilities.sass +7 -4
  5. package/package.json +1 -1
  6. package/templates/_00_tokens.sass +64 -105
  7. package/templates/_01_config.sass +17 -35
  8. package/templates/_09_utilities.sass +6 -4
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/styles/_00_tokens.sass CHANGED
@@ -5,6 +5,60 @@
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
+ --ring: rgba(0, 127, 78, 0.35)
34
+
35
+ =dark-theme-tokens
36
+ color-scheme: dark
37
+ --bg: #0E1118
38
+ --bg-surface: #141824
39
+ --bg-raised: #1C2232
40
+ --bg-panel: #101420
41
+ --bg-footer: #0B0D14
42
+ --bg-popover: #20273A
43
+ --bg-dialog: #20273A
44
+ --bg-terminal: #080A0F
45
+ --bg-input: #121622
46
+ --bg-canvas: #0E1118
47
+ --border: #28324A
48
+ --border-subtle: #1E2538
49
+ --text-primary: #EDF2F7
50
+ --text-secondary: #9BB0C7
51
+ --text-muted: #5D7087
52
+ --state-hover: #263047
53
+ --state-hover-subtle: #1B2233
54
+ --state-selected: #32405E
55
+ --theme-color: #38BDF8
56
+ --theme-color-alt: #0EA5E9
57
+ --theme: var(--theme-color)
58
+ --theme-hover: var(--theme-color-alt)
59
+ --text-inverse: #0E1118
60
+ --ring: rgba(16, 185, 129, 0.4)
61
+
8
62
  :root
9
63
  color-scheme: light
10
64
 
@@ -34,16 +88,16 @@
34
88
  --space-3xl: clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem)
35
89
  --space-s-l: clamp(1.125rem, 0.5625rem + 2.5vw, 2.5rem)
36
90
 
37
- // Radius (Concentric 2px, 3px, 4px, 6px hierarchy)
91
+ // Radius (Concentric hierarchy)
38
92
  --radius-0: 0
39
93
  --radius-2: 2px
40
94
  --radius-3: 3px
41
95
  --radius-4: 4px
42
96
  --radius-6: 6px
43
- --radius-8: 6px
44
- --radius-12: 6px
45
- --radius-16: 6px
46
- --radius-24: 6px
97
+ --radius-8: 8px
98
+ --radius-12: 12px
99
+ --radius-16: 16px
100
+ --radius-24: 24px
47
101
  --radius-full: 9999px
48
102
 
49
103
  // Control Heights
@@ -68,110 +122,17 @@
68
122
  --footer-height: 56px
69
123
  --measure: 65ch
70
124
 
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)
125
+ // Default Light Palette
126
+ +light-theme-tokens
96
127
 
97
128
  @media (prefers-color-scheme: dark)
98
129
  :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)
130
+ +dark-theme-tokens
124
131
 
125
132
  [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)
133
+ +dark-theme-tokens
151
134
 
152
135
  [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)
136
+ +light-theme-tokens
137
+
138
+
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/package.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": "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/templates/_00_tokens.sass CHANGED
@@ -5,6 +5,60 @@
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
+ --ring: rgba(0, 127, 78, 0.35)
34
+
35
+ =dark-theme-tokens
36
+ color-scheme: dark
37
+ --bg: #0E1118
38
+ --bg-surface: #141824
39
+ --bg-raised: #1C2232
40
+ --bg-panel: #101420
41
+ --bg-footer: #0B0D14
42
+ --bg-popover: #20273A
43
+ --bg-dialog: #20273A
44
+ --bg-terminal: #080A0F
45
+ --bg-input: #121622
46
+ --bg-canvas: #0E1118
47
+ --border: #28324A
48
+ --border-subtle: #1E2538
49
+ --text-primary: #EDF2F7
50
+ --text-secondary: #9BB0C7
51
+ --text-muted: #5D7087
52
+ --state-hover: #263047
53
+ --state-hover-subtle: #1B2233
54
+ --state-selected: #32405E
55
+ --theme-color: #38BDF8
56
+ --theme-color-alt: #0EA5E9
57
+ --theme: var(--theme-color)
58
+ --theme-hover: var(--theme-color-alt)
59
+ --text-inverse: #0E1118
60
+ --ring: rgba(16, 185, 129, 0.4)
61
+
8
62
  :root
9
63
  color-scheme: light
10
64
 
@@ -34,16 +88,16 @@
34
88
  --space-3xl: clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem)
35
89
  --space-s-l: clamp(1.125rem, 0.5625rem + 2.5vw, 2.5rem)
36
90
 
37
- // Radius (Concentric 2px, 3px, 4px, 6px hierarchy)
91
+ // Radius (Concentric hierarchy)
38
92
  --radius-0: 0
39
93
  --radius-2: 2px
40
94
  --radius-3: 3px
41
95
  --radius-4: 4px
42
96
  --radius-6: 6px
43
- --radius-8: 6px
44
- --radius-12: 6px
45
- --radius-16: 6px
46
- --radius-24: 6px
97
+ --radius-8: 8px
98
+ --radius-12: 12px
99
+ --radius-16: 16px
100
+ --radius-24: 24px
47
101
  --radius-full: 9999px
48
102
 
49
103
  // Control Heights
@@ -68,110 +122,15 @@
68
122
  --footer-height: 56px
69
123
  --measure: 65ch
70
124
 
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)
125
+ // Default Light Palette
126
+ +light-theme-tokens
96
127
 
97
128
  @media (prefers-color-scheme: dark)
98
129
  :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)
130
+ +dark-theme-tokens
124
131
 
125
132
  [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)
133
+ +dark-theme-tokens
151
134
 
152
135
  [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)
136
+ +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)