@octaviaflow/layout 1.0.1 → 2.0.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 (11) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/es/index.js +181 -0
  3. package/lib/index.js +238 -0
  4. package/package.json +9 -12
  5. package/scss/generated/_container.scss +43 -0
  6. package/scss/generated/_fluid-spacing.scss +37 -0
  7. package/scss/generated/_icon-size.scss +25 -0
  8. package/scss/generated/_layout.scss +55 -0
  9. package/scss/generated/_size.scss +17 -0
  10. package/scss/generated/_spacing.scss +91 -0
  11. package/umd/index.js +244 -0
package/CHANGELOG.md ADDED
@@ -0,0 +1,21 @@
1
+ # Changelog
2
+
3
+ All notable changes to `@octaviaflow/layout` will be documented in this file.
4
+
5
+ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
6
+ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
7
+
8
+ ## [2.0.0] - 2026-02-07
9
+
10
+ ### Changed
11
+
12
+ - Major version bump to 2.0.0 for unified OctaviaFlow Design System release
13
+ - Updated all internal dependency references to ^2.0.0
14
+ - Replaced workspace protocol references with explicit version ranges
15
+
16
+ ## [1.1.3] - 2026-02-07
17
+
18
+ ### Changed
19
+
20
+ - Synchronized version to 1.1.3 across all OctaviaFlow Design System packages
21
+ - Aligned package versioning for unified release
package/es/index.js ADDED
@@ -0,0 +1,181 @@
1
+ const unstable_tokens = [
2
+ // Spacing
3
+ "spacing01",
4
+ "spacing02",
5
+ "spacing03",
6
+ "spacing04",
7
+ "spacing05",
8
+ "spacing06",
9
+ "spacing07",
10
+ "spacing08",
11
+ "spacing09",
12
+ "spacing10",
13
+ "spacing11",
14
+ "spacing12",
15
+ "spacing13",
16
+ // Fluid spacing
17
+ "fluidSpacing01",
18
+ "fluidSpacing02",
19
+ "fluidSpacing03",
20
+ "fluidSpacing04",
21
+ // Containers
22
+ "container01",
23
+ "container02",
24
+ "container03",
25
+ "container04",
26
+ "container05",
27
+ "sizeXSmall",
28
+ "sizeSmall",
29
+ "sizeMedium",
30
+ "sizeLarge",
31
+ "sizeXLarge",
32
+ "size2XLarge",
33
+ // Icon sizes
34
+ "iconSize01",
35
+ "iconSize02",
36
+ // Layout
37
+ // Deprecated
38
+ "layout01",
39
+ "layout02",
40
+ "layout03",
41
+ "layout04",
42
+ "layout05",
43
+ "layout06",
44
+ "layout07"
45
+ ];
46
+
47
+ const baseFontSize = 16;
48
+ function rem(px2) {
49
+ return `${px2 / baseFontSize}rem`;
50
+ }
51
+ function em(px2) {
52
+ return `${px2 / baseFontSize}em`;
53
+ }
54
+ function px(value) {
55
+ return `${value}px`;
56
+ }
57
+ const breakpoints = {
58
+ sm: {
59
+ width: rem(320),
60
+ columns: 4,
61
+ margin: "0"
62
+ },
63
+ md: {
64
+ width: rem(672),
65
+ columns: 8,
66
+ margin: rem(16)
67
+ },
68
+ lg: {
69
+ width: rem(1056),
70
+ columns: 16,
71
+ margin: rem(16)
72
+ },
73
+ xlg: {
74
+ width: rem(1312),
75
+ columns: 16,
76
+ margin: rem(16)
77
+ },
78
+ max: {
79
+ width: rem(1584),
80
+ columns: 16,
81
+ margin: rem(24)
82
+ }
83
+ };
84
+ function breakpointUp(name) {
85
+ return `@media (min-width: ${breakpoints[name].width})`;
86
+ }
87
+ function breakpointDown(name) {
88
+ return `@media (max-width: ${breakpoints[name].width})`;
89
+ }
90
+ function breakpoint(...args) {
91
+ return breakpointUp(...args);
92
+ }
93
+ const miniUnit = 8;
94
+ function miniUnits(count) {
95
+ return rem(miniUnit * count);
96
+ }
97
+ const spacing01 = miniUnits(0.25);
98
+ const spacing02 = miniUnits(0.5);
99
+ const spacing03 = miniUnits(1);
100
+ const spacing04 = miniUnits(1.5);
101
+ const spacing05 = miniUnits(2);
102
+ const spacing06 = miniUnits(3);
103
+ const spacing07 = miniUnits(4);
104
+ const spacing08 = miniUnits(5);
105
+ const spacing09 = miniUnits(6);
106
+ const spacing10 = miniUnits(8);
107
+ const spacing11 = miniUnits(10);
108
+ const spacing12 = miniUnits(12);
109
+ const spacing13 = miniUnits(20);
110
+ const spacing = [
111
+ spacing01,
112
+ spacing02,
113
+ spacing03,
114
+ spacing04,
115
+ spacing05,
116
+ spacing06,
117
+ spacing07,
118
+ spacing08,
119
+ spacing09,
120
+ spacing10,
121
+ spacing11,
122
+ spacing12,
123
+ spacing13
124
+ ];
125
+ const fluidSpacing01 = 0;
126
+ const fluidSpacing02 = "2vw";
127
+ const fluidSpacing03 = "5vw";
128
+ const fluidSpacing04 = "10vw";
129
+ const fluidSpacing = [
130
+ fluidSpacing01,
131
+ fluidSpacing02,
132
+ fluidSpacing03,
133
+ fluidSpacing04
134
+ ];
135
+ const layout01 = miniUnits(2);
136
+ const layout02 = miniUnits(3);
137
+ const layout03 = miniUnits(4);
138
+ const layout04 = miniUnits(6);
139
+ const layout05 = miniUnits(8);
140
+ const layout06 = miniUnits(12);
141
+ const layout07 = miniUnits(20);
142
+ const layout = [
143
+ layout01,
144
+ layout02,
145
+ layout03,
146
+ layout04,
147
+ layout05,
148
+ layout06,
149
+ layout07
150
+ ];
151
+ const container01 = miniUnits(3);
152
+ const container02 = miniUnits(4);
153
+ const container03 = miniUnits(5);
154
+ const container04 = miniUnits(6);
155
+ const container05 = miniUnits(8);
156
+ const container = [
157
+ container01,
158
+ container02,
159
+ container03,
160
+ container04,
161
+ container05
162
+ ];
163
+ const sizeXSmall = rem(24);
164
+ const sizeSmall = rem(32);
165
+ const sizeMedium = rem(40);
166
+ const sizeLarge = rem(48);
167
+ const sizeXLarge = rem(64);
168
+ const size2XLarge = rem(80);
169
+ const sizes = {
170
+ XSmall: sizeXSmall,
171
+ Small: sizeSmall,
172
+ Medium: sizeMedium,
173
+ Large: sizeLarge,
174
+ XLarge: sizeXLarge,
175
+ "2XLarge": size2XLarge
176
+ };
177
+ const iconSize01 = "1rem";
178
+ const iconSize02 = "1.25rem";
179
+ const iconSize = [iconSize01, iconSize02];
180
+
181
+ export { baseFontSize, breakpoint, breakpointDown, breakpointUp, breakpoints, container, container01, container02, container03, container04, container05, em, fluidSpacing, fluidSpacing01, fluidSpacing02, fluidSpacing03, fluidSpacing04, iconSize, iconSize01, iconSize02, layout, layout01, layout02, layout03, layout04, layout05, layout06, layout07, miniUnit, miniUnits, px, rem, size2XLarge, sizeLarge, sizeMedium, sizeSmall, sizeXLarge, sizeXSmall, sizes, spacing, spacing01, spacing02, spacing03, spacing04, spacing05, spacing06, spacing07, spacing08, spacing09, spacing10, spacing11, spacing12, spacing13, unstable_tokens };
package/lib/index.js ADDED
@@ -0,0 +1,238 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ const unstable_tokens = [
6
+ // Spacing
7
+ "spacing01",
8
+ "spacing02",
9
+ "spacing03",
10
+ "spacing04",
11
+ "spacing05",
12
+ "spacing06",
13
+ "spacing07",
14
+ "spacing08",
15
+ "spacing09",
16
+ "spacing10",
17
+ "spacing11",
18
+ "spacing12",
19
+ "spacing13",
20
+ // Fluid spacing
21
+ "fluidSpacing01",
22
+ "fluidSpacing02",
23
+ "fluidSpacing03",
24
+ "fluidSpacing04",
25
+ // Containers
26
+ "container01",
27
+ "container02",
28
+ "container03",
29
+ "container04",
30
+ "container05",
31
+ "sizeXSmall",
32
+ "sizeSmall",
33
+ "sizeMedium",
34
+ "sizeLarge",
35
+ "sizeXLarge",
36
+ "size2XLarge",
37
+ // Icon sizes
38
+ "iconSize01",
39
+ "iconSize02",
40
+ // Layout
41
+ // Deprecated
42
+ "layout01",
43
+ "layout02",
44
+ "layout03",
45
+ "layout04",
46
+ "layout05",
47
+ "layout06",
48
+ "layout07"
49
+ ];
50
+
51
+ const baseFontSize = 16;
52
+ function rem(px2) {
53
+ return `${px2 / baseFontSize}rem`;
54
+ }
55
+ function em(px2) {
56
+ return `${px2 / baseFontSize}em`;
57
+ }
58
+ function px(value) {
59
+ return `${value}px`;
60
+ }
61
+ const breakpoints = {
62
+ sm: {
63
+ width: rem(320),
64
+ columns: 4,
65
+ margin: "0"
66
+ },
67
+ md: {
68
+ width: rem(672),
69
+ columns: 8,
70
+ margin: rem(16)
71
+ },
72
+ lg: {
73
+ width: rem(1056),
74
+ columns: 16,
75
+ margin: rem(16)
76
+ },
77
+ xlg: {
78
+ width: rem(1312),
79
+ columns: 16,
80
+ margin: rem(16)
81
+ },
82
+ max: {
83
+ width: rem(1584),
84
+ columns: 16,
85
+ margin: rem(24)
86
+ }
87
+ };
88
+ function breakpointUp(name) {
89
+ return `@media (min-width: ${breakpoints[name].width})`;
90
+ }
91
+ function breakpointDown(name) {
92
+ return `@media (max-width: ${breakpoints[name].width})`;
93
+ }
94
+ function breakpoint(...args) {
95
+ return breakpointUp(...args);
96
+ }
97
+ const miniUnit = 8;
98
+ function miniUnits(count) {
99
+ return rem(miniUnit * count);
100
+ }
101
+ const spacing01 = miniUnits(0.25);
102
+ const spacing02 = miniUnits(0.5);
103
+ const spacing03 = miniUnits(1);
104
+ const spacing04 = miniUnits(1.5);
105
+ const spacing05 = miniUnits(2);
106
+ const spacing06 = miniUnits(3);
107
+ const spacing07 = miniUnits(4);
108
+ const spacing08 = miniUnits(5);
109
+ const spacing09 = miniUnits(6);
110
+ const spacing10 = miniUnits(8);
111
+ const spacing11 = miniUnits(10);
112
+ const spacing12 = miniUnits(12);
113
+ const spacing13 = miniUnits(20);
114
+ const spacing = [
115
+ spacing01,
116
+ spacing02,
117
+ spacing03,
118
+ spacing04,
119
+ spacing05,
120
+ spacing06,
121
+ spacing07,
122
+ spacing08,
123
+ spacing09,
124
+ spacing10,
125
+ spacing11,
126
+ spacing12,
127
+ spacing13
128
+ ];
129
+ const fluidSpacing01 = 0;
130
+ const fluidSpacing02 = "2vw";
131
+ const fluidSpacing03 = "5vw";
132
+ const fluidSpacing04 = "10vw";
133
+ const fluidSpacing = [
134
+ fluidSpacing01,
135
+ fluidSpacing02,
136
+ fluidSpacing03,
137
+ fluidSpacing04
138
+ ];
139
+ const layout01 = miniUnits(2);
140
+ const layout02 = miniUnits(3);
141
+ const layout03 = miniUnits(4);
142
+ const layout04 = miniUnits(6);
143
+ const layout05 = miniUnits(8);
144
+ const layout06 = miniUnits(12);
145
+ const layout07 = miniUnits(20);
146
+ const layout = [
147
+ layout01,
148
+ layout02,
149
+ layout03,
150
+ layout04,
151
+ layout05,
152
+ layout06,
153
+ layout07
154
+ ];
155
+ const container01 = miniUnits(3);
156
+ const container02 = miniUnits(4);
157
+ const container03 = miniUnits(5);
158
+ const container04 = miniUnits(6);
159
+ const container05 = miniUnits(8);
160
+ const container = [
161
+ container01,
162
+ container02,
163
+ container03,
164
+ container04,
165
+ container05
166
+ ];
167
+ const sizeXSmall = rem(24);
168
+ const sizeSmall = rem(32);
169
+ const sizeMedium = rem(40);
170
+ const sizeLarge = rem(48);
171
+ const sizeXLarge = rem(64);
172
+ const size2XLarge = rem(80);
173
+ const sizes = {
174
+ XSmall: sizeXSmall,
175
+ Small: sizeSmall,
176
+ Medium: sizeMedium,
177
+ Large: sizeLarge,
178
+ XLarge: sizeXLarge,
179
+ "2XLarge": size2XLarge
180
+ };
181
+ const iconSize01 = "1rem";
182
+ const iconSize02 = "1.25rem";
183
+ const iconSize = [iconSize01, iconSize02];
184
+
185
+ exports.baseFontSize = baseFontSize;
186
+ exports.breakpoint = breakpoint;
187
+ exports.breakpointDown = breakpointDown;
188
+ exports.breakpointUp = breakpointUp;
189
+ exports.breakpoints = breakpoints;
190
+ exports.container = container;
191
+ exports.container01 = container01;
192
+ exports.container02 = container02;
193
+ exports.container03 = container03;
194
+ exports.container04 = container04;
195
+ exports.container05 = container05;
196
+ exports.em = em;
197
+ exports.fluidSpacing = fluidSpacing;
198
+ exports.fluidSpacing01 = fluidSpacing01;
199
+ exports.fluidSpacing02 = fluidSpacing02;
200
+ exports.fluidSpacing03 = fluidSpacing03;
201
+ exports.fluidSpacing04 = fluidSpacing04;
202
+ exports.iconSize = iconSize;
203
+ exports.iconSize01 = iconSize01;
204
+ exports.iconSize02 = iconSize02;
205
+ exports.layout = layout;
206
+ exports.layout01 = layout01;
207
+ exports.layout02 = layout02;
208
+ exports.layout03 = layout03;
209
+ exports.layout04 = layout04;
210
+ exports.layout05 = layout05;
211
+ exports.layout06 = layout06;
212
+ exports.layout07 = layout07;
213
+ exports.miniUnit = miniUnit;
214
+ exports.miniUnits = miniUnits;
215
+ exports.px = px;
216
+ exports.rem = rem;
217
+ exports.size2XLarge = size2XLarge;
218
+ exports.sizeLarge = sizeLarge;
219
+ exports.sizeMedium = sizeMedium;
220
+ exports.sizeSmall = sizeSmall;
221
+ exports.sizeXLarge = sizeXLarge;
222
+ exports.sizeXSmall = sizeXSmall;
223
+ exports.sizes = sizes;
224
+ exports.spacing = spacing;
225
+ exports.spacing01 = spacing01;
226
+ exports.spacing02 = spacing02;
227
+ exports.spacing03 = spacing03;
228
+ exports.spacing04 = spacing04;
229
+ exports.spacing05 = spacing05;
230
+ exports.spacing06 = spacing06;
231
+ exports.spacing07 = spacing07;
232
+ exports.spacing08 = spacing08;
233
+ exports.spacing09 = spacing09;
234
+ exports.spacing10 = spacing10;
235
+ exports.spacing11 = spacing11;
236
+ exports.spacing12 = spacing12;
237
+ exports.spacing13 = spacing13;
238
+ exports.unstable_tokens = unstable_tokens;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@octaviaflow/layout",
3
3
  "description": "Layout helpers for digital and software products using the Carbon Design System",
4
- "version": "1.0.1",
4
+ "version": "2.0.0",
5
5
  "license": "Apache-2.0",
6
6
  "main": "lib/index.js",
7
7
  "module": "es/index.js",
@@ -21,21 +21,18 @@
21
21
  "publishConfig": {
22
22
  "access": "public"
23
23
  },
24
- "dependencies": {
25
- "@babel/runtime": "^7.25.0"
26
- },
24
+ "dependencies": {},
27
25
  "scripts": {
28
26
  "build": "bun run clean && octaviaflow-cli bundle src/index.js --name OctaviaLayout && bun tasks/build.js",
29
- "clean": "rimraf es lib umd scss/generated"
27
+ "clean": "rimraf es lib umd scss/generated",
28
+ "test": "bun test ."
30
29
  },
31
30
  "devDependencies": {
32
- "@babel/core": "^7.28.6",
33
- "@babel/preset-env": "^7.28.6",
34
- "@octaviaflow/cli": "^1.5.2",
35
- "@octaviaflow/cli-reporter": "^1.0.1",
36
- "@octaviaflow/scss-generator": "^1.0.0",
37
- "@octaviaflow/telemetry": "^1.1.2",
38
- "@octaviaflow/test-utils": "^1.0.0",
31
+ "@octaviaflow/cli": "^2.0.0",
32
+ "@octaviaflow/cli-reporter": "^2.0.0",
33
+ "@octaviaflow/scss-generator": "^2.0.0",
34
+ "@octaviaflow/telemetry": "^2.0.0",
35
+ "@octaviaflow/test-utils": "^2.0.0",
39
36
  "core-js": "^3.16.0",
40
37
  "fs-extra": "^11.3.3",
41
38
  "rimraf": "^6.0.0"
package/scss/generated/_container.scss ADDED
@@ -0,0 +1,43 @@
1
+ // Code generated by @octaviaflow/layout. DO NOT EDIT.
2
+ //
3
+ // Copyright OctaviaFlow. 2025
4
+ //
5
+ // This source code is licensed under the Apache-2.0 license found in the
6
+ // LICENSE file in the root directory of this source tree.
7
+ //
8
+
9
+ /// @type Number
10
+ /// @access public
11
+ /// @group @octaviaflow/layout
12
+ $container-01: 1.5rem !default;
13
+
14
+ /// @type Number
15
+ /// @access public
16
+ /// @group @octaviaflow/layout
17
+ $container-02: 2rem !default;
18
+
19
+ /// @type Number
20
+ /// @access public
21
+ /// @group @octaviaflow/layout
22
+ $container-03: 2.5rem !default;
23
+
24
+ /// @type Number
25
+ /// @access public
26
+ /// @group @octaviaflow/layout
27
+ $container-04: 3rem !default;
28
+
29
+ /// @type Number
30
+ /// @access public
31
+ /// @group @octaviaflow/layout
32
+ $container-05: 4rem !default;
33
+
34
+ /// @type Map
35
+ /// @access public
36
+ /// @group @octaviaflow/layout
37
+ $container: (
38
+ container-01: $container-01,
39
+ container-02: $container-02,
40
+ container-03: $container-03,
41
+ container-04: $container-04,
42
+ container-05: $container-05,
43
+ );
package/scss/generated/_fluid-spacing.scss ADDED
@@ -0,0 +1,37 @@
1
+ // Code generated by @octaviaflow/layout. DO NOT EDIT.
2
+ //
3
+ // Copyright OctaviaFlow. 2025
4
+ //
5
+ // This source code is licensed under the Apache-2.0 license found in the
6
+ // LICENSE file in the root directory of this source tree.
7
+ //
8
+
9
+ /// @type Number
10
+ /// @access public
11
+ /// @group @octaviaflow/layout
12
+ $fluid-spacing-01: 0 !default;
13
+
14
+ /// @type Number
15
+ /// @access public
16
+ /// @group @octaviaflow/layout
17
+ $fluid-spacing-02: 2vw !default;
18
+
19
+ /// @type Number
20
+ /// @access public
21
+ /// @group @octaviaflow/layout
22
+ $fluid-spacing-03: 5vw !default;
23
+
24
+ /// @type Number
25
+ /// @access public
26
+ /// @group @octaviaflow/layout
27
+ $fluid-spacing-04: 10vw !default;
28
+
29
+ /// @type Map
30
+ /// @access public
31
+ /// @group @octaviaflow/layout
32
+ $fluid-spacing: (
33
+ fluid-spacing-01: $fluid-spacing-01,
34
+ fluid-spacing-02: $fluid-spacing-02,
35
+ fluid-spacing-03: $fluid-spacing-03,
36
+ fluid-spacing-04: $fluid-spacing-04,
37
+ );
package/scss/generated/_icon-size.scss ADDED
@@ -0,0 +1,25 @@
1
+ // Code generated by @octaviaflow/layout. DO NOT EDIT.
2
+ //
3
+ // Copyright OctaviaFlow. 2025
4
+ //
5
+ // This source code is licensed under the Apache-2.0 license found in the
6
+ // LICENSE file in the root directory of this source tree.
7
+ //
8
+
9
+ /// @type Number
10
+ /// @access public
11
+ /// @group @octaviaflow/layout
12
+ $icon-size-01: 1rem !default;
13
+
14
+ /// @type Number
15
+ /// @access public
16
+ /// @group @octaviaflow/layout
17
+ $icon-size-02: 1.25rem !default;
18
+
19
+ /// @type Map
20
+ /// @access public
21
+ /// @group @octaviaflow/layout
22
+ $icon-size: (
23
+ icon-size-01: $icon-size-01,
24
+ icon-size-02: $icon-size-02,
25
+ );
package/scss/generated/_layout.scss ADDED
@@ -0,0 +1,55 @@
1
+ // Code generated by @octaviaflow/layout. DO NOT EDIT.
2
+ //
3
+ // Copyright OctaviaFlow. 2025
4
+ //
5
+ // This source code is licensed under the Apache-2.0 license found in the
6
+ // LICENSE file in the root directory of this source tree.
7
+ //
8
+
9
+ /// @type Number
10
+ /// @access public
11
+ /// @group @octaviaflow/layout
12
+ $layout-01: 1rem !default;
13
+
14
+ /// @type Number
15
+ /// @access public
16
+ /// @group @octaviaflow/layout
17
+ $layout-02: 1.5rem !default;
18
+
19
+ /// @type Number
20
+ /// @access public
21
+ /// @group @octaviaflow/layout
22
+ $layout-03: 2rem !default;
23
+
24
+ /// @type Number
25
+ /// @access public
26
+ /// @group @octaviaflow/layout
27
+ $layout-04: 3rem !default;
28
+
29
+ /// @type Number
30
+ /// @access public
31
+ /// @group @octaviaflow/layout
32
+ $layout-05: 4rem !default;
33
+
34
+ /// @type Number
35
+ /// @access public
36
+ /// @group @octaviaflow/layout
37
+ $layout-06: 6rem !default;
38
+
39
+ /// @type Number
40
+ /// @access public
41
+ /// @group @octaviaflow/layout
42
+ $layout-07: 10rem !default;
43
+
44
+ /// @type Map
45
+ /// @access public
46
+ /// @group @octaviaflow/layout
47
+ $layout: (
48
+ layout-01: $layout-01,
49
+ layout-02: $layout-02,
50
+ layout-03: $layout-03,
51
+ layout-04: $layout-04,
52
+ layout-05: $layout-05,
53
+ layout-06: $layout-06,
54
+ layout-07: $layout-07,
55
+ );
package/scss/generated/_size.scss ADDED
@@ -0,0 +1,17 @@
1
+ // Code generated by @octaviaflow/layout. DO NOT EDIT.
2
+ //
3
+ // Copyright OctaviaFlow. 2025
4
+ //
5
+ // This source code is licensed under the Apache-2.0 license found in the
6
+ // LICENSE file in the root directory of this source tree.
7
+ //
8
+
9
+ /// @type Number
10
+ /// @access public
11
+ /// @group @octaviaflow/layout
12
+ $size-xs: 1.5rem;
13
+ $size-sm: 2rem;
14
+ $size-md: 2.5rem;
15
+ $size-lg: 3rem;
16
+ $size-xl: 4rem;
17
+ $size-2xl: 5rem;
package/scss/generated/_spacing.scss ADDED
@@ -0,0 +1,91 @@
1
+ // Code generated by @octaviaflow/layout. DO NOT EDIT.
2
+ //
3
+ // Copyright OctaviaFlow. 2025
4
+ //
5
+ // This source code is licensed under the Apache-2.0 license found in the
6
+ // LICENSE file in the root directory of this source tree.
7
+ //
8
+
9
+ /// @type Number
10
+ /// @access public
11
+ /// @group @octaviaflow/layout
12
+ $spacing-01: 0.125rem !default;
13
+
14
+ /// @type Number
15
+ /// @access public
16
+ /// @group @octaviaflow/layout
17
+ $spacing-02: 0.25rem !default;
18
+
19
+ /// @type Number
20
+ /// @access public
21
+ /// @group @octaviaflow/layout
22
+ $spacing-03: 0.5rem !default;
23
+
24
+ /// @type Number
25
+ /// @access public
26
+ /// @group @octaviaflow/layout
27
+ $spacing-04: 0.75rem !default;
28
+
29
+ /// @type Number
30
+ /// @access public
31
+ /// @group @octaviaflow/layout
32
+ $spacing-05: 1rem !default;
33
+
34
+ /// @type Number
35
+ /// @access public
36
+ /// @group @octaviaflow/layout
37
+ $spacing-06: 1.5rem !default;
38
+
39
+ /// @type Number
40
+ /// @access public
41
+ /// @group @octaviaflow/layout
42
+ $spacing-07: 2rem !default;
43
+
44
+ /// @type Number
45
+ /// @access public
46
+ /// @group @octaviaflow/layout
47
+ $spacing-08: 2.5rem !default;
48
+
49
+ /// @type Number
50
+ /// @access public
51
+ /// @group @octaviaflow/layout
52
+ $spacing-09: 3rem !default;
53
+
54
+ /// @type Number
55
+ /// @access public
56
+ /// @group @octaviaflow/layout
57
+ $spacing-10: 4rem !default;
58
+
59
+ /// @type Number
60
+ /// @access public
61
+ /// @group @octaviaflow/layout
62
+ $spacing-11: 5rem !default;
63
+
64
+ /// @type Number
65
+ /// @access public
66
+ /// @group @octaviaflow/layout
67
+ $spacing-12: 6rem !default;
68
+
69
+ /// @type Number
70
+ /// @access public
71
+ /// @group @octaviaflow/layout
72
+ $spacing-13: 10rem !default;
73
+
74
+ /// @type Map
75
+ /// @access public
76
+ /// @group @octaviaflow/layout
77
+ $spacing: (
78
+ spacing-01: $spacing-01,
79
+ spacing-02: $spacing-02,
80
+ spacing-03: $spacing-03,
81
+ spacing-04: $spacing-04,
82
+ spacing-05: $spacing-05,
83
+ spacing-06: $spacing-06,
84
+ spacing-07: $spacing-07,
85
+ spacing-08: $spacing-08,
86
+ spacing-09: $spacing-09,
87
+ spacing-10: $spacing-10,
88
+ spacing-11: $spacing-11,
89
+ spacing-12: $spacing-12,
90
+ spacing-13: $spacing-13,
91
+ );
package/umd/index.js ADDED
@@ -0,0 +1,244 @@
1
+ (function (global, factory) {
2
+ typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
3
+ typeof define === 'function' && define.amd ? define(['exports'], factory) :
4
+ (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.OctaviaLayout = {}));
5
+ })(this, (function (exports) { 'use strict';
6
+
7
+ const unstable_tokens = [
8
+ // Spacing
9
+ "spacing01",
10
+ "spacing02",
11
+ "spacing03",
12
+ "spacing04",
13
+ "spacing05",
14
+ "spacing06",
15
+ "spacing07",
16
+ "spacing08",
17
+ "spacing09",
18
+ "spacing10",
19
+ "spacing11",
20
+ "spacing12",
21
+ "spacing13",
22
+ // Fluid spacing
23
+ "fluidSpacing01",
24
+ "fluidSpacing02",
25
+ "fluidSpacing03",
26
+ "fluidSpacing04",
27
+ // Containers
28
+ "container01",
29
+ "container02",
30
+ "container03",
31
+ "container04",
32
+ "container05",
33
+ "sizeXSmall",
34
+ "sizeSmall",
35
+ "sizeMedium",
36
+ "sizeLarge",
37
+ "sizeXLarge",
38
+ "size2XLarge",
39
+ // Icon sizes
40
+ "iconSize01",
41
+ "iconSize02",
42
+ // Layout
43
+ // Deprecated
44
+ "layout01",
45
+ "layout02",
46
+ "layout03",
47
+ "layout04",
48
+ "layout05",
49
+ "layout06",
50
+ "layout07"
51
+ ];
52
+
53
+ const baseFontSize = 16;
54
+ function rem(px2) {
55
+ return `${px2 / baseFontSize}rem`;
56
+ }
57
+ function em(px2) {
58
+ return `${px2 / baseFontSize}em`;
59
+ }
60
+ function px(value) {
61
+ return `${value}px`;
62
+ }
63
+ const breakpoints = {
64
+ sm: {
65
+ width: rem(320),
66
+ columns: 4,
67
+ margin: "0"
68
+ },
69
+ md: {
70
+ width: rem(672),
71
+ columns: 8,
72
+ margin: rem(16)
73
+ },
74
+ lg: {
75
+ width: rem(1056),
76
+ columns: 16,
77
+ margin: rem(16)
78
+ },
79
+ xlg: {
80
+ width: rem(1312),
81
+ columns: 16,
82
+ margin: rem(16)
83
+ },
84
+ max: {
85
+ width: rem(1584),
86
+ columns: 16,
87
+ margin: rem(24)
88
+ }
89
+ };
90
+ function breakpointUp(name) {
91
+ return `@media (min-width: ${breakpoints[name].width})`;
92
+ }
93
+ function breakpointDown(name) {
94
+ return `@media (max-width: ${breakpoints[name].width})`;
95
+ }
96
+ function breakpoint(...args) {
97
+ return breakpointUp(...args);
98
+ }
99
+ const miniUnit = 8;
100
+ function miniUnits(count) {
101
+ return rem(miniUnit * count);
102
+ }
103
+ const spacing01 = miniUnits(0.25);
104
+ const spacing02 = miniUnits(0.5);
105
+ const spacing03 = miniUnits(1);
106
+ const spacing04 = miniUnits(1.5);
107
+ const spacing05 = miniUnits(2);
108
+ const spacing06 = miniUnits(3);
109
+ const spacing07 = miniUnits(4);
110
+ const spacing08 = miniUnits(5);
111
+ const spacing09 = miniUnits(6);
112
+ const spacing10 = miniUnits(8);
113
+ const spacing11 = miniUnits(10);
114
+ const spacing12 = miniUnits(12);
115
+ const spacing13 = miniUnits(20);
116
+ const spacing = [
117
+ spacing01,
118
+ spacing02,
119
+ spacing03,
120
+ spacing04,
121
+ spacing05,
122
+ spacing06,
123
+ spacing07,
124
+ spacing08,
125
+ spacing09,
126
+ spacing10,
127
+ spacing11,
128
+ spacing12,
129
+ spacing13
130
+ ];
131
+ const fluidSpacing01 = 0;
132
+ const fluidSpacing02 = "2vw";
133
+ const fluidSpacing03 = "5vw";
134
+ const fluidSpacing04 = "10vw";
135
+ const fluidSpacing = [
136
+ fluidSpacing01,
137
+ fluidSpacing02,
138
+ fluidSpacing03,
139
+ fluidSpacing04
140
+ ];
141
+ const layout01 = miniUnits(2);
142
+ const layout02 = miniUnits(3);
143
+ const layout03 = miniUnits(4);
144
+ const layout04 = miniUnits(6);
145
+ const layout05 = miniUnits(8);
146
+ const layout06 = miniUnits(12);
147
+ const layout07 = miniUnits(20);
148
+ const layout = [
149
+ layout01,
150
+ layout02,
151
+ layout03,
152
+ layout04,
153
+ layout05,
154
+ layout06,
155
+ layout07
156
+ ];
157
+ const container01 = miniUnits(3);
158
+ const container02 = miniUnits(4);
159
+ const container03 = miniUnits(5);
160
+ const container04 = miniUnits(6);
161
+ const container05 = miniUnits(8);
162
+ const container = [
163
+ container01,
164
+ container02,
165
+ container03,
166
+ container04,
167
+ container05
168
+ ];
169
+ const sizeXSmall = rem(24);
170
+ const sizeSmall = rem(32);
171
+ const sizeMedium = rem(40);
172
+ const sizeLarge = rem(48);
173
+ const sizeXLarge = rem(64);
174
+ const size2XLarge = rem(80);
175
+ const sizes = {
176
+ XSmall: sizeXSmall,
177
+ Small: sizeSmall,
178
+ Medium: sizeMedium,
179
+ Large: sizeLarge,
180
+ XLarge: sizeXLarge,
181
+ "2XLarge": size2XLarge
182
+ };
183
+ const iconSize01 = "1rem";
184
+ const iconSize02 = "1.25rem";
185
+ const iconSize = [iconSize01, iconSize02];
186
+
187
+ exports.baseFontSize = baseFontSize;
188
+ exports.breakpoint = breakpoint;
189
+ exports.breakpointDown = breakpointDown;
190
+ exports.breakpointUp = breakpointUp;
191
+ exports.breakpoints = breakpoints;
192
+ exports.container = container;
193
+ exports.container01 = container01;
194
+ exports.container02 = container02;
195
+ exports.container03 = container03;
196
+ exports.container04 = container04;
197
+ exports.container05 = container05;
198
+ exports.em = em;
199
+ exports.fluidSpacing = fluidSpacing;
200
+ exports.fluidSpacing01 = fluidSpacing01;
201
+ exports.fluidSpacing02 = fluidSpacing02;
202
+ exports.fluidSpacing03 = fluidSpacing03;
203
+ exports.fluidSpacing04 = fluidSpacing04;
204
+ exports.iconSize = iconSize;
205
+ exports.iconSize01 = iconSize01;
206
+ exports.iconSize02 = iconSize02;
207
+ exports.layout = layout;
208
+ exports.layout01 = layout01;
209
+ exports.layout02 = layout02;
210
+ exports.layout03 = layout03;
211
+ exports.layout04 = layout04;
212
+ exports.layout05 = layout05;
213
+ exports.layout06 = layout06;
214
+ exports.layout07 = layout07;
215
+ exports.miniUnit = miniUnit;
216
+ exports.miniUnits = miniUnits;
217
+ exports.px = px;
218
+ exports.rem = rem;
219
+ exports.size2XLarge = size2XLarge;
220
+ exports.sizeLarge = sizeLarge;
221
+ exports.sizeMedium = sizeMedium;
222
+ exports.sizeSmall = sizeSmall;
223
+ exports.sizeXLarge = sizeXLarge;
224
+ exports.sizeXSmall = sizeXSmall;
225
+ exports.sizes = sizes;
226
+ exports.spacing = spacing;
227
+ exports.spacing01 = spacing01;
228
+ exports.spacing02 = spacing02;
229
+ exports.spacing03 = spacing03;
230
+ exports.spacing04 = spacing04;
231
+ exports.spacing05 = spacing05;
232
+ exports.spacing06 = spacing06;
233
+ exports.spacing07 = spacing07;
234
+ exports.spacing08 = spacing08;
235
+ exports.spacing09 = spacing09;
236
+ exports.spacing10 = spacing10;
237
+ exports.spacing11 = spacing11;
238
+ exports.spacing12 = spacing12;
239
+ exports.spacing13 = spacing13;
240
+ exports.unstable_tokens = unstable_tokens;
241
+
242
+ Object.defineProperty(exports, '__esModule', { value: true });
243
+
244
+ }));