@octaviaflow/layout 1.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.
- package/README.md +61 -0
- package/docs/sass.md +58 -0
- package/index.scss +12 -0
- package/lib/index.js +226 -0
- package/package.json +43 -0
- package/project.json +41 -0
- package/scss/_convert.scss +56 -0
- package/scss/_spacing.scss +10 -0
- package/scss/_utilities.scss +41 -0
- package/scss/modules/_convert.scss +56 -0
- package/src/index.js +187 -0
- package/src/tokens.js +59 -0
- package/telemetry.yml +17 -0
package/README.md
ADDED
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
# @octaviaflow/layout
|
|
2
|
+
|
|
3
|
+
> Layout helpers for digital and software products using the Carbon Design
|
|
4
|
+
> System
|
|
5
|
+
|
|
6
|
+
## Getting started
|
|
7
|
+
|
|
8
|
+
To install `@octaviaflow/layout` in your project, you will need to run the following
|
|
9
|
+
command using [npm](https://www.npmjs.com/):
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
npm install -S @octaviaflow/layout
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
If you prefer [Yarn](https://yarnpkg.com/en/), use the following command
|
|
16
|
+
instead:
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
yarn add @octaviaflow/layout
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## Usage
|
|
23
|
+
|
|
24
|
+
`@octaviaflow/layout` provides a couple of useful utilities alongside the
|
|
25
|
+
specification for the grid system for the IBM Design Language. This package
|
|
26
|
+
includes:
|
|
27
|
+
|
|
28
|
+
| Feature | Description |
|
|
29
|
+
| --------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
|
|
30
|
+
| Breakpoints | Variables and settings for the IBM Design Grid, including gutter and breakpoints. It also includes helpers for working with breakpoints |
|
|
31
|
+
| Unit conversion | Helpers for converting from `px` to `rem` or `em`. |
|
|
32
|
+
| Key heights | Helpers for working with key heights at different breakpoints |
|
|
33
|
+
| Mini unit | Helpers for working in multiples of the mini-unit |
|
|
34
|
+
| Spacing | Provides a spacing scale and helper for using steps in the scale |
|
|
35
|
+
|
|
36
|
+
One important thing to remember is that `@octaviaflow/layout` is not responsible for
|
|
37
|
+
the grid itself. If you are looking for a grid implementation to use, definitely
|
|
38
|
+
check out the [`@octaviaflow/grid`](../grid) package.
|
|
39
|
+
|
|
40
|
+
`@octaviaflow/layout` provides the above features in both Sass and JavaScript. If
|
|
41
|
+
you're looking for support in a different language, feel free to file an issue
|
|
42
|
+
proposing the new addition!
|
|
43
|
+
|
|
44
|
+
## 🙌 Contributing
|
|
45
|
+
|
|
46
|
+
We're always looking for contributors to help us fix bugs, build new features,
|
|
47
|
+
or help us improve the project documentation. If you're interested, definitely
|
|
48
|
+
check out our [Contributing Guide](/.github/CONTRIBUTING.md)! 👀
|
|
49
|
+
|
|
50
|
+
## 📝 License
|
|
51
|
+
|
|
52
|
+
Licensed under the [Apache 2.0 License](/LICENSE).
|
|
53
|
+
|
|
54
|
+
## <picture><source height="20" width="20" media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-dark.svg"><source height="20" width="20" media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg"><img height="20" width="20" alt="IBM Telemetry" src="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg"></picture> IBM Telemetry
|
|
55
|
+
|
|
56
|
+
This package uses IBM Telemetry to collect de-identified and anonymized metrics
|
|
57
|
+
data. By installing this package as a dependency you are agreeing to telemetry
|
|
58
|
+
collection. To opt out, see
|
|
59
|
+
[Opting out of IBM Telemetry data collection](https://github.com/ibm-telemetry/telemetry-js/tree/main#opting-out-of-ibm-telemetry-data-collection).
|
|
60
|
+
For more information on the data being collected, please see the
|
|
61
|
+
[IBM Telemetry documentation](https://github.com/ibm-telemetry/telemetry-js/tree/main#ibm-telemetry-collection-basics).
|
package/docs/sass.md
ADDED
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
# Sass
|
|
2
|
+
|
|
3
|
+
> Sass documentation for `@octaviaflow/layout`
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
The `@octaviaflow/layout` package provides spacing tokens and conversion utilities
|
|
8
|
+
for the Carbon Design System. You can access these tokens and helpers by writing
|
|
9
|
+
the following:
|
|
10
|
+
|
|
11
|
+
```scss
|
|
12
|
+
@use '@octaviaflow/layout';
|
|
13
|
+
|
|
14
|
+
.selector {
|
|
15
|
+
margin-bottom: layout.$spacing-05;
|
|
16
|
+
width: layout.rem(24px);
|
|
17
|
+
height: layout.rem(24px);
|
|
18
|
+
}
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## API
|
|
22
|
+
|
|
23
|
+
| Export | Description | !default |
|
|
24
|
+
| :------------------ | :---------- | :------- |
|
|
25
|
+
| `$spacing-01` | | ✅ |
|
|
26
|
+
| `$spacing-02` | | ✅ |
|
|
27
|
+
| `$spacing-03` | | ✅ |
|
|
28
|
+
| `$spacing-04` | | ✅ |
|
|
29
|
+
| `$spacing-05` | | ✅ |
|
|
30
|
+
| `$spacing-06` | | ✅ |
|
|
31
|
+
| `$spacing-07` | | ✅ |
|
|
32
|
+
| `$spacing-08` | | ✅ |
|
|
33
|
+
| `$spacing-09` | | ✅ |
|
|
34
|
+
| `$spacing-10` | | ✅ |
|
|
35
|
+
| `$spacing-11` | | ✅ |
|
|
36
|
+
| `$spacing-12` | | ✅ |
|
|
37
|
+
| `$spacing-13` | | ✅ |
|
|
38
|
+
| `$spacing ` | | |
|
|
39
|
+
| `$fluid-spacing-01` | | ✅ |
|
|
40
|
+
| `$fluid-spacing-02` | | ✅ |
|
|
41
|
+
| `$fluid-spacing-03` | | ✅ |
|
|
42
|
+
| `$fluid-spacing-04` | | ✅ |
|
|
43
|
+
| `$fluid-spacing ` | | |
|
|
44
|
+
| `@function em` | | |
|
|
45
|
+
| `@function rem` | | |
|
|
46
|
+
| `$base-font-size` | | ✅ |
|
|
47
|
+
|
|
48
|
+
### Configuration
|
|
49
|
+
|
|
50
|
+
You can configure parts of the `@octaviaflow/layout` package that are `!default` with
|
|
51
|
+
Sass Modules. For example, you can change the `$base-font-size` by writing the
|
|
52
|
+
following:
|
|
53
|
+
|
|
54
|
+
```scss
|
|
55
|
+
@use '@octaviaflow/layout' with (
|
|
56
|
+
$base-font-size: 18px
|
|
57
|
+
);
|
|
58
|
+
```
|
package/index.scss
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright OctaviaFlow. 2025
|
|
3
|
+
//
|
|
4
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
// LICENSE file in the root directory of this source tree.
|
|
6
|
+
//
|
|
7
|
+
|
|
8
|
+
@forward 'scss/convert';
|
|
9
|
+
@forward 'scss/spacing';
|
|
10
|
+
@forward 'scss/generated/container';
|
|
11
|
+
@forward 'scss/generated/icon-size';
|
|
12
|
+
@forward 'scss/generated/size';
|
package/lib/index.js
ADDED
|
@@ -0,0 +1,226 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Copyright OctaviaFlow
|
|
7
|
+
* Author: Vishal Kumar
|
|
8
|
+
* Created: 11/November/2025
|
|
9
|
+
*
|
|
10
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
11
|
+
* LICENSE file in the root directory of this source tree.
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
var unstable_tokens = [
|
|
15
|
+
// Spacing
|
|
16
|
+
'spacing01', 'spacing02', 'spacing03', 'spacing04', 'spacing05', 'spacing06', 'spacing07', 'spacing08', 'spacing09', 'spacing10', 'spacing11', 'spacing12', 'spacing13',
|
|
17
|
+
// Fluid spacing
|
|
18
|
+
'fluidSpacing01', 'fluidSpacing02', 'fluidSpacing03', 'fluidSpacing04',
|
|
19
|
+
// Containers
|
|
20
|
+
'container01', 'container02', 'container03', 'container04', 'container05', 'sizeXSmall', 'sizeSmall', 'sizeMedium', 'sizeLarge', 'sizeXLarge', 'size2XLarge',
|
|
21
|
+
// Icon sizes
|
|
22
|
+
'iconSize01', 'iconSize02',
|
|
23
|
+
// Layout
|
|
24
|
+
// Deprecated
|
|
25
|
+
'layout01', 'layout02', 'layout03', 'layout04', 'layout05', 'layout06', 'layout07'];
|
|
26
|
+
|
|
27
|
+
/**
|
|
28
|
+
* Copyright OctaviaFlow
|
|
29
|
+
* Author: Vishal Kumar
|
|
30
|
+
* Created: 11/November/2025
|
|
31
|
+
*
|
|
32
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
33
|
+
* LICENSE file in the root directory of this source tree.
|
|
34
|
+
*/
|
|
35
|
+
|
|
36
|
+
// Convert
|
|
37
|
+
// Default, Use with em() and rem() functions
|
|
38
|
+
var baseFontSize = 16;
|
|
39
|
+
|
|
40
|
+
/**
|
|
41
|
+
* Convert a given px unit to a rem unit
|
|
42
|
+
* @param {number} px
|
|
43
|
+
* @returns {string}
|
|
44
|
+
*/
|
|
45
|
+
function rem(px) {
|
|
46
|
+
return "".concat(px / baseFontSize, "rem");
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
/**
|
|
50
|
+
* Convert a given px unit to a em unit
|
|
51
|
+
* @param {number} px
|
|
52
|
+
* @returns {string}
|
|
53
|
+
*/
|
|
54
|
+
function em(px) {
|
|
55
|
+
return "".concat(px / baseFontSize, "em");
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
/**
|
|
59
|
+
* Convert a given px unit to its string representation
|
|
60
|
+
* @param {number} value - number of pixels
|
|
61
|
+
* @returns {string}
|
|
62
|
+
*/
|
|
63
|
+
function px(value) {
|
|
64
|
+
return "".concat(value, "px");
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
// Breakpoint
|
|
68
|
+
// Initial map of our breakpoints and their values
|
|
69
|
+
var breakpoints = {
|
|
70
|
+
sm: {
|
|
71
|
+
width: rem(320),
|
|
72
|
+
columns: 4,
|
|
73
|
+
margin: '0'
|
|
74
|
+
},
|
|
75
|
+
md: {
|
|
76
|
+
width: rem(672),
|
|
77
|
+
columns: 8,
|
|
78
|
+
margin: rem(16)
|
|
79
|
+
},
|
|
80
|
+
lg: {
|
|
81
|
+
width: rem(1056),
|
|
82
|
+
columns: 16,
|
|
83
|
+
margin: rem(16)
|
|
84
|
+
},
|
|
85
|
+
xlg: {
|
|
86
|
+
width: rem(1312),
|
|
87
|
+
columns: 16,
|
|
88
|
+
margin: rem(16)
|
|
89
|
+
},
|
|
90
|
+
max: {
|
|
91
|
+
width: rem(1584),
|
|
92
|
+
columns: 16,
|
|
93
|
+
margin: rem(24)
|
|
94
|
+
}
|
|
95
|
+
};
|
|
96
|
+
function breakpointUp(name) {
|
|
97
|
+
return "@media (min-width: ".concat(breakpoints[name].width, ")");
|
|
98
|
+
}
|
|
99
|
+
function breakpointDown(name) {
|
|
100
|
+
return "@media (max-width: ".concat(breakpoints[name].width, ")");
|
|
101
|
+
}
|
|
102
|
+
function breakpoint() {
|
|
103
|
+
return breakpointUp.apply(void 0, arguments);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
// Mini-unit
|
|
107
|
+
var miniUnit = 8;
|
|
108
|
+
function miniUnits(count) {
|
|
109
|
+
return rem(miniUnit * count);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
// Spacing
|
|
113
|
+
var spacing01 = miniUnits(0.25);
|
|
114
|
+
var spacing02 = miniUnits(0.5);
|
|
115
|
+
var spacing03 = miniUnits(1);
|
|
116
|
+
var spacing04 = miniUnits(1.5);
|
|
117
|
+
var spacing05 = miniUnits(2);
|
|
118
|
+
var spacing06 = miniUnits(3);
|
|
119
|
+
var spacing07 = miniUnits(4);
|
|
120
|
+
var spacing08 = miniUnits(5);
|
|
121
|
+
var spacing09 = miniUnits(6);
|
|
122
|
+
var spacing10 = miniUnits(8);
|
|
123
|
+
var spacing11 = miniUnits(10);
|
|
124
|
+
var spacing12 = miniUnits(12);
|
|
125
|
+
var spacing13 = miniUnits(20);
|
|
126
|
+
var spacing = [spacing01, spacing02, spacing03, spacing04, spacing05, spacing06, spacing07, spacing08, spacing09, spacing10, spacing11, spacing12, spacing13];
|
|
127
|
+
|
|
128
|
+
// Fluid spacing
|
|
129
|
+
var fluidSpacing01 = 0;
|
|
130
|
+
var fluidSpacing02 = '2vw';
|
|
131
|
+
var fluidSpacing03 = '5vw';
|
|
132
|
+
var fluidSpacing04 = '10vw';
|
|
133
|
+
var fluidSpacing = [fluidSpacing01, fluidSpacing02, fluidSpacing03, fluidSpacing04];
|
|
134
|
+
|
|
135
|
+
// Layout
|
|
136
|
+
// Deprecated
|
|
137
|
+
var layout01 = miniUnits(2);
|
|
138
|
+
var layout02 = miniUnits(3);
|
|
139
|
+
var layout03 = miniUnits(4);
|
|
140
|
+
var layout04 = miniUnits(6);
|
|
141
|
+
var layout05 = miniUnits(8);
|
|
142
|
+
var layout06 = miniUnits(12);
|
|
143
|
+
var layout07 = miniUnits(20);
|
|
144
|
+
var layout = [layout01, layout02, layout03, layout04, layout05, layout06, layout07];
|
|
145
|
+
|
|
146
|
+
// Container
|
|
147
|
+
var container01 = miniUnits(3);
|
|
148
|
+
var container02 = miniUnits(4);
|
|
149
|
+
var container03 = miniUnits(5);
|
|
150
|
+
var container04 = miniUnits(6);
|
|
151
|
+
var container05 = miniUnits(8);
|
|
152
|
+
var container = [container01, container02, container03, container04, container05];
|
|
153
|
+
var sizeXSmall = rem(24);
|
|
154
|
+
var sizeSmall = rem(32);
|
|
155
|
+
var sizeMedium = rem(40);
|
|
156
|
+
var sizeLarge = rem(48);
|
|
157
|
+
var sizeXLarge = rem(64);
|
|
158
|
+
var size2XLarge = rem(80);
|
|
159
|
+
var sizes = {
|
|
160
|
+
XSmall: sizeXSmall,
|
|
161
|
+
Small: sizeSmall,
|
|
162
|
+
Medium: sizeMedium,
|
|
163
|
+
Large: sizeLarge,
|
|
164
|
+
XLarge: sizeXLarge,
|
|
165
|
+
'2XLarge': size2XLarge
|
|
166
|
+
};
|
|
167
|
+
|
|
168
|
+
// Icon
|
|
169
|
+
var iconSize01 = '1rem';
|
|
170
|
+
var iconSize02 = '1.25rem';
|
|
171
|
+
var iconSize = [iconSize01, iconSize02];
|
|
172
|
+
|
|
173
|
+
exports.baseFontSize = baseFontSize;
|
|
174
|
+
exports.breakpoint = breakpoint;
|
|
175
|
+
exports.breakpointDown = breakpointDown;
|
|
176
|
+
exports.breakpointUp = breakpointUp;
|
|
177
|
+
exports.breakpoints = breakpoints;
|
|
178
|
+
exports.container = container;
|
|
179
|
+
exports.container01 = container01;
|
|
180
|
+
exports.container02 = container02;
|
|
181
|
+
exports.container03 = container03;
|
|
182
|
+
exports.container04 = container04;
|
|
183
|
+
exports.container05 = container05;
|
|
184
|
+
exports.em = em;
|
|
185
|
+
exports.fluidSpacing = fluidSpacing;
|
|
186
|
+
exports.fluidSpacing01 = fluidSpacing01;
|
|
187
|
+
exports.fluidSpacing02 = fluidSpacing02;
|
|
188
|
+
exports.fluidSpacing03 = fluidSpacing03;
|
|
189
|
+
exports.fluidSpacing04 = fluidSpacing04;
|
|
190
|
+
exports.iconSize = iconSize;
|
|
191
|
+
exports.iconSize01 = iconSize01;
|
|
192
|
+
exports.iconSize02 = iconSize02;
|
|
193
|
+
exports.layout = layout;
|
|
194
|
+
exports.layout01 = layout01;
|
|
195
|
+
exports.layout02 = layout02;
|
|
196
|
+
exports.layout03 = layout03;
|
|
197
|
+
exports.layout04 = layout04;
|
|
198
|
+
exports.layout05 = layout05;
|
|
199
|
+
exports.layout06 = layout06;
|
|
200
|
+
exports.layout07 = layout07;
|
|
201
|
+
exports.miniUnit = miniUnit;
|
|
202
|
+
exports.miniUnits = miniUnits;
|
|
203
|
+
exports.px = px;
|
|
204
|
+
exports.rem = rem;
|
|
205
|
+
exports.size2XLarge = size2XLarge;
|
|
206
|
+
exports.sizeLarge = sizeLarge;
|
|
207
|
+
exports.sizeMedium = sizeMedium;
|
|
208
|
+
exports.sizeSmall = sizeSmall;
|
|
209
|
+
exports.sizeXLarge = sizeXLarge;
|
|
210
|
+
exports.sizeXSmall = sizeXSmall;
|
|
211
|
+
exports.sizes = sizes;
|
|
212
|
+
exports.spacing = spacing;
|
|
213
|
+
exports.spacing01 = spacing01;
|
|
214
|
+
exports.spacing02 = spacing02;
|
|
215
|
+
exports.spacing03 = spacing03;
|
|
216
|
+
exports.spacing04 = spacing04;
|
|
217
|
+
exports.spacing05 = spacing05;
|
|
218
|
+
exports.spacing06 = spacing06;
|
|
219
|
+
exports.spacing07 = spacing07;
|
|
220
|
+
exports.spacing08 = spacing08;
|
|
221
|
+
exports.spacing09 = spacing09;
|
|
222
|
+
exports.spacing10 = spacing10;
|
|
223
|
+
exports.spacing11 = spacing11;
|
|
224
|
+
exports.spacing12 = spacing12;
|
|
225
|
+
exports.spacing13 = spacing13;
|
|
226
|
+
exports.unstable_tokens = unstable_tokens;
|
package/package.json
ADDED
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@octaviaflow/layout",
|
|
3
|
+
"description": "Layout helpers for digital and software products using the Carbon Design System",
|
|
4
|
+
"version": "1.0.0",
|
|
5
|
+
"license": "Apache-2.0",
|
|
6
|
+
"main": "lib/index.js",
|
|
7
|
+
"module": "es/index.js",
|
|
8
|
+
"repository": {
|
|
9
|
+
"type": "git",
|
|
10
|
+
"url": "https://github.com/octaviaflow-design-system.git",
|
|
11
|
+
"directory": "packages/layout"
|
|
12
|
+
},
|
|
13
|
+
"bugs": "https://github.com/octaviaflow-design-system/issues",
|
|
14
|
+
"keywords": [
|
|
15
|
+
"octaviaflow",
|
|
16
|
+
"layout",
|
|
17
|
+
"elements",
|
|
18
|
+
"components",
|
|
19
|
+
"react"
|
|
20
|
+
],
|
|
21
|
+
"publishConfig": {
|
|
22
|
+
"access": "public"
|
|
23
|
+
},
|
|
24
|
+
"dependencies": {
|
|
25
|
+
"@babel/runtime": "^7.25.0"
|
|
26
|
+
},
|
|
27
|
+
"scripts": {
|
|
28
|
+
"build": "bun run clean && octaviaflow-cli bundle src/index.js --name OctaviaLayout && bun tasks/build.js",
|
|
29
|
+
"clean": "rimraf es lib umd scss/generated"
|
|
30
|
+
},
|
|
31
|
+
"devDependencies": {
|
|
32
|
+
"@babel/core": "^7.28.6",
|
|
33
|
+
"@babel/preset-env": "^7.28.6",
|
|
34
|
+
"@octaviaflow/cli": "^1.0.0",
|
|
35
|
+
"@octaviaflow/cli-reporter": "^1.0.0",
|
|
36
|
+
"@octaviaflow/scss-generator": "^1.0.0",
|
|
37
|
+
"@octaviaflow/telemetry": "^1.0.0",
|
|
38
|
+
"@octaviaflow/test-utils": "^1.0.0",
|
|
39
|
+
"core-js": "^3.16.0",
|
|
40
|
+
"fs-extra": "^11.3.3",
|
|
41
|
+
"rimraf": "^6.0.0"
|
|
42
|
+
}
|
|
43
|
+
}
|
package/project.json
ADDED
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@octaviaflow/layout",
|
|
3
|
+
"$schema": "../../node_modules/nx/schemas/project-schema.json",
|
|
4
|
+
"sourceRoot": "packages/layout/src",
|
|
5
|
+
"projectType": "library",
|
|
6
|
+
"targets": {
|
|
7
|
+
"build": {
|
|
8
|
+
"executor": "nx:run-commands",
|
|
9
|
+
"outputs": [
|
|
10
|
+
"{projectRoot}/es",
|
|
11
|
+
"{projectRoot}/lib",
|
|
12
|
+
"{projectRoot}/umd",
|
|
13
|
+
"{projectRoot}/scss/generated"
|
|
14
|
+
],
|
|
15
|
+
"options": {
|
|
16
|
+
"commands": [
|
|
17
|
+
"octaviaflow-cli bundle src/index.js --name OctaviaLayout",
|
|
18
|
+
"bun tasks/build.js"
|
|
19
|
+
],
|
|
20
|
+
"cwd": "packages/layout",
|
|
21
|
+
"parallel": false
|
|
22
|
+
},
|
|
23
|
+
"dependsOn": ["clean", "^build"]
|
|
24
|
+
},
|
|
25
|
+
"clean": {
|
|
26
|
+
"executor": "nx:run-commands",
|
|
27
|
+
"options": {
|
|
28
|
+
"command": "rimraf es lib umd scss/generated",
|
|
29
|
+
"cwd": "packages/layout"
|
|
30
|
+
}
|
|
31
|
+
},
|
|
32
|
+
"lint": {
|
|
33
|
+
"executor": "@nx/eslint:lint",
|
|
34
|
+
"outputs": ["{options.outputFile}"],
|
|
35
|
+
"options": {
|
|
36
|
+
"lintFilePatterns": ["packages/layout/**/*.{js,jsx,ts,tsx}"]
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
},
|
|
40
|
+
"tags": ["scope:layout", "type:library"]
|
|
41
|
+
}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright OctaviaFlow. 2025
|
|
3
|
+
//
|
|
4
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
// LICENSE file in the root directory of this source tree.
|
|
6
|
+
//
|
|
7
|
+
|
|
8
|
+
@use 'sass:meta';
|
|
9
|
+
@use 'sass:math';
|
|
10
|
+
|
|
11
|
+
/// Default font size
|
|
12
|
+
/// @type Number
|
|
13
|
+
/// @access public
|
|
14
|
+
/// @group @octaviaflow/layout
|
|
15
|
+
$base-font-size: 16px !default;
|
|
16
|
+
|
|
17
|
+
/// Convert a given px unit to a rem unit
|
|
18
|
+
/// @param {Number} $px - Number with px unit
|
|
19
|
+
/// @return {Number} Number with rem unit
|
|
20
|
+
/// @access public
|
|
21
|
+
/// @group @octaviaflow/layout
|
|
22
|
+
@function to-rem($px) {
|
|
23
|
+
@if math.unit($px) != 'px' {
|
|
24
|
+
@error "Expected argument $px to be of type `px`, instead received: `#{math.unit($px)}`";
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
@return math.div($px, $base-font-size) * 1rem;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
/// This function causes an error when using sass > 1.65.0
|
|
31
|
+
/// Replaced with `to-rem` function
|
|
32
|
+
/// @param {Number} $px - Number with px unit
|
|
33
|
+
/// @return {Number} Number with rem unit
|
|
34
|
+
/// @access public
|
|
35
|
+
/// @deprecated
|
|
36
|
+
/// @group @octaviaflow/layout
|
|
37
|
+
@function rem($px) {
|
|
38
|
+
@if unit($px) != 'px' {
|
|
39
|
+
@error "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
@return math.div($px, $base-font-size) * 1rem;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
/// Convert a given px unit to a em unit
|
|
46
|
+
/// @param {Number} $px - Number with px unit
|
|
47
|
+
/// @return {Number} Number with em unit
|
|
48
|
+
/// @access public
|
|
49
|
+
/// @group @octaviaflow/layout
|
|
50
|
+
@function em($px) {
|
|
51
|
+
@if unit($px) != 'px' {
|
|
52
|
+
@error "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
@return math.div($px, $base-font-size) * 1em;
|
|
56
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright OctaviaFlow. 2025
|
|
3
|
+
//
|
|
4
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
// LICENSE file in the root directory of this source tree.
|
|
6
|
+
//
|
|
7
|
+
|
|
8
|
+
@forward './generated/fluid-spacing';
|
|
9
|
+
@forward './generated/spacing';
|
|
10
|
+
@forward './generated/layout';
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright OctaviaFlow. 2025
|
|
3
|
+
//
|
|
4
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
// LICENSE file in the root directory of this source tree.
|
|
6
|
+
//
|
|
7
|
+
|
|
8
|
+
/// Map deep get
|
|
9
|
+
/// @author Hugo Giraudel
|
|
10
|
+
/// @access public
|
|
11
|
+
/// @param {Map} $map - Map
|
|
12
|
+
/// @param {Arglist} $keys - Key chain
|
|
13
|
+
/// @return {*} Desired value
|
|
14
|
+
/// @group @octaviaflow/layout
|
|
15
|
+
@function map-deep-get($map, $keys...) {
|
|
16
|
+
@each $key in $keys {
|
|
17
|
+
$map: map.get($map, $key);
|
|
18
|
+
}
|
|
19
|
+
@return $map;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
/// Provide a map and index, and get back the relevant key value
|
|
23
|
+
/// @access public
|
|
24
|
+
/// @param {Map} $map - Map
|
|
25
|
+
/// @param {Integer} $index - Key chain
|
|
26
|
+
/// @return {String} Desired value
|
|
27
|
+
/// @group @octaviaflow/layout
|
|
28
|
+
@function key-by-index($map, $index) {
|
|
29
|
+
$keys: map.keys($map);
|
|
30
|
+
@return nth($keys, $index);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
/// Pass in a map, and get the last one in the list back
|
|
34
|
+
/// @access public
|
|
35
|
+
/// @param {Map} $map - Map
|
|
36
|
+
/// @return {*} Desired value
|
|
37
|
+
/// @group @octaviaflow/layout
|
|
38
|
+
@function last-map-item($map) {
|
|
39
|
+
$total-length: list.length($map);
|
|
40
|
+
@return map-get($map, carbon--key-by-index($map, $total-length));
|
|
41
|
+
}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright OctaviaFlow. 2025
|
|
3
|
+
//
|
|
4
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
// LICENSE file in the root directory of this source tree.
|
|
6
|
+
//
|
|
7
|
+
|
|
8
|
+
@use 'sass:meta';
|
|
9
|
+
@use 'sass:math';
|
|
10
|
+
|
|
11
|
+
/// Default font size
|
|
12
|
+
/// @type Number
|
|
13
|
+
/// @access public
|
|
14
|
+
/// @group @octaviaflow/layout
|
|
15
|
+
$base-font-size: 16px !default;
|
|
16
|
+
|
|
17
|
+
/// Convert a given px unit to a rem unit
|
|
18
|
+
/// @param {Number} $px - Number with px unit
|
|
19
|
+
/// @return {Number} Number with rem unit
|
|
20
|
+
/// @access public
|
|
21
|
+
/// @group @octaviaflow/layout
|
|
22
|
+
@function to-rem($px) {
|
|
23
|
+
@if math.unit($px) != 'px' {
|
|
24
|
+
@error "Expected argument $px to be of type `px`, instead received: `#{math.unit($px)}`";
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
@return math.div($px, $base-font-size) * 1rem;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
/// This function causes an error when using sass > 1.65.0
|
|
31
|
+
/// Replaced with `to-rem` function
|
|
32
|
+
/// @param {Number} $px - Number with px unit
|
|
33
|
+
/// @return {Number} Number with rem unit
|
|
34
|
+
/// @access public
|
|
35
|
+
/// @deprecated
|
|
36
|
+
/// @group @octaviaflow/layout
|
|
37
|
+
@function rem($px) {
|
|
38
|
+
@if math.unit($px) != 'px' {
|
|
39
|
+
@error "Expected argument $px to be of type `px`, instead received: `#{math.unit($px)}`";
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
@return math.div($px, $base-font-size) * 1rem;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
/// Convert a given px unit to a em unit
|
|
46
|
+
/// @param {Number} $px - Number with px unit
|
|
47
|
+
/// @return {Number} Number with em unit
|
|
48
|
+
/// @access public
|
|
49
|
+
/// @group @octaviaflow/layout
|
|
50
|
+
@function em($px) {
|
|
51
|
+
@if math.unit($px) != 'px' {
|
|
52
|
+
@error "Expected argument $px to be of type `px`, instead received: `#{math.unit($px)}`";
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
@return math.div($px, $base-font-size) * 1em;
|
|
56
|
+
}
|
package/src/index.js
ADDED
|
@@ -0,0 +1,187 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright OctaviaFlow
|
|
3
|
+
* Author: Vishal Kumar
|
|
4
|
+
* Created: 11/November/2025
|
|
5
|
+
*
|
|
6
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
7
|
+
* LICENSE file in the root directory of this source tree.
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
import { unstable_tokens } from './tokens';
|
|
12
|
+
|
|
13
|
+
export { unstable_tokens };
|
|
14
|
+
|
|
15
|
+
// Convert
|
|
16
|
+
// Default, Use with em() and rem() functions
|
|
17
|
+
export const baseFontSize = 16;
|
|
18
|
+
|
|
19
|
+
/**
|
|
20
|
+
* Convert a given px unit to a rem unit
|
|
21
|
+
* @param {number} px
|
|
22
|
+
* @returns {string}
|
|
23
|
+
*/
|
|
24
|
+
export function rem(px) {
|
|
25
|
+
return `${px / baseFontSize}rem`;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
/**
|
|
29
|
+
* Convert a given px unit to a em unit
|
|
30
|
+
* @param {number} px
|
|
31
|
+
* @returns {string}
|
|
32
|
+
*/
|
|
33
|
+
export function em(px) {
|
|
34
|
+
return `${px / baseFontSize}em`;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
/**
|
|
38
|
+
* Convert a given px unit to its string representation
|
|
39
|
+
* @param {number} value - number of pixels
|
|
40
|
+
* @returns {string}
|
|
41
|
+
*/
|
|
42
|
+
export function px(value) {
|
|
43
|
+
return `${value}px`;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
// Breakpoint
|
|
47
|
+
// Initial map of our breakpoints and their values
|
|
48
|
+
export const breakpoints = {
|
|
49
|
+
sm: {
|
|
50
|
+
width: rem(320),
|
|
51
|
+
columns: 4,
|
|
52
|
+
margin: '0',
|
|
53
|
+
},
|
|
54
|
+
md: {
|
|
55
|
+
width: rem(672),
|
|
56
|
+
columns: 8,
|
|
57
|
+
margin: rem(16),
|
|
58
|
+
},
|
|
59
|
+
lg: {
|
|
60
|
+
width: rem(1056),
|
|
61
|
+
columns: 16,
|
|
62
|
+
margin: rem(16),
|
|
63
|
+
},
|
|
64
|
+
xlg: {
|
|
65
|
+
width: rem(1312),
|
|
66
|
+
columns: 16,
|
|
67
|
+
margin: rem(16),
|
|
68
|
+
},
|
|
69
|
+
max: {
|
|
70
|
+
width: rem(1584),
|
|
71
|
+
columns: 16,
|
|
72
|
+
margin: rem(24),
|
|
73
|
+
},
|
|
74
|
+
};
|
|
75
|
+
|
|
76
|
+
export function breakpointUp(name) {
|
|
77
|
+
return `@media (min-width: ${breakpoints[name].width})`;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
export function breakpointDown(name) {
|
|
81
|
+
return `@media (max-width: ${breakpoints[name].width})`;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
export function breakpoint(...args) {
|
|
85
|
+
return breakpointUp(...args);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
// Mini-unit
|
|
89
|
+
export const miniUnit = 8;
|
|
90
|
+
|
|
91
|
+
export function miniUnits(count) {
|
|
92
|
+
return rem(miniUnit * count);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
// Spacing
|
|
96
|
+
export const spacing01 = miniUnits(0.25);
|
|
97
|
+
export const spacing02 = miniUnits(0.5);
|
|
98
|
+
export const spacing03 = miniUnits(1);
|
|
99
|
+
export const spacing04 = miniUnits(1.5);
|
|
100
|
+
export const spacing05 = miniUnits(2);
|
|
101
|
+
export const spacing06 = miniUnits(3);
|
|
102
|
+
export const spacing07 = miniUnits(4);
|
|
103
|
+
export const spacing08 = miniUnits(5);
|
|
104
|
+
export const spacing09 = miniUnits(6);
|
|
105
|
+
export const spacing10 = miniUnits(8);
|
|
106
|
+
export const spacing11 = miniUnits(10);
|
|
107
|
+
export const spacing12 = miniUnits(12);
|
|
108
|
+
export const spacing13 = miniUnits(20);
|
|
109
|
+
export const spacing = [
|
|
110
|
+
spacing01,
|
|
111
|
+
spacing02,
|
|
112
|
+
spacing03,
|
|
113
|
+
spacing04,
|
|
114
|
+
spacing05,
|
|
115
|
+
spacing06,
|
|
116
|
+
spacing07,
|
|
117
|
+
spacing08,
|
|
118
|
+
spacing09,
|
|
119
|
+
spacing10,
|
|
120
|
+
spacing11,
|
|
121
|
+
spacing12,
|
|
122
|
+
spacing13,
|
|
123
|
+
];
|
|
124
|
+
|
|
125
|
+
// Fluid spacing
|
|
126
|
+
export const fluidSpacing01 = 0;
|
|
127
|
+
export const fluidSpacing02 = '2vw';
|
|
128
|
+
export const fluidSpacing03 = '5vw';
|
|
129
|
+
export const fluidSpacing04 = '10vw';
|
|
130
|
+
export const fluidSpacing = [
|
|
131
|
+
fluidSpacing01,
|
|
132
|
+
fluidSpacing02,
|
|
133
|
+
fluidSpacing03,
|
|
134
|
+
fluidSpacing04,
|
|
135
|
+
];
|
|
136
|
+
|
|
137
|
+
// Layout
|
|
138
|
+
// Deprecated
|
|
139
|
+
export const layout01 = miniUnits(2);
|
|
140
|
+
export const layout02 = miniUnits(3);
|
|
141
|
+
export const layout03 = miniUnits(4);
|
|
142
|
+
export const layout04 = miniUnits(6);
|
|
143
|
+
export const layout05 = miniUnits(8);
|
|
144
|
+
export const layout06 = miniUnits(12);
|
|
145
|
+
export const layout07 = miniUnits(20);
|
|
146
|
+
export const layout = [
|
|
147
|
+
layout01,
|
|
148
|
+
layout02,
|
|
149
|
+
layout03,
|
|
150
|
+
layout04,
|
|
151
|
+
layout05,
|
|
152
|
+
layout06,
|
|
153
|
+
layout07,
|
|
154
|
+
];
|
|
155
|
+
|
|
156
|
+
// Container
|
|
157
|
+
export const container01 = miniUnits(3);
|
|
158
|
+
export const container02 = miniUnits(4);
|
|
159
|
+
export const container03 = miniUnits(5);
|
|
160
|
+
export const container04 = miniUnits(6);
|
|
161
|
+
export const container05 = miniUnits(8);
|
|
162
|
+
export const container = [
|
|
163
|
+
container01,
|
|
164
|
+
container02,
|
|
165
|
+
container03,
|
|
166
|
+
container04,
|
|
167
|
+
container05,
|
|
168
|
+
];
|
|
169
|
+
export const sizeXSmall = rem(24);
|
|
170
|
+
export const sizeSmall = rem(32);
|
|
171
|
+
export const sizeMedium = rem(40);
|
|
172
|
+
export const sizeLarge = rem(48);
|
|
173
|
+
export const sizeXLarge = rem(64);
|
|
174
|
+
export const size2XLarge = rem(80);
|
|
175
|
+
export const sizes = {
|
|
176
|
+
XSmall: sizeXSmall,
|
|
177
|
+
Small: sizeSmall,
|
|
178
|
+
Medium: sizeMedium,
|
|
179
|
+
Large: sizeLarge,
|
|
180
|
+
XLarge: sizeXLarge,
|
|
181
|
+
'2XLarge': size2XLarge,
|
|
182
|
+
};
|
|
183
|
+
|
|
184
|
+
// Icon
|
|
185
|
+
export const iconSize01 = '1rem';
|
|
186
|
+
export const iconSize02 = '1.25rem';
|
|
187
|
+
export const iconSize = [iconSize01, iconSize02];
|
package/src/tokens.js
ADDED
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright OctaviaFlow
|
|
3
|
+
* Author: Vishal Kumar
|
|
4
|
+
* Created: 11/November/2025
|
|
5
|
+
*
|
|
6
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
7
|
+
* LICENSE file in the root directory of this source tree.
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
export const unstable_tokens = [
|
|
12
|
+
// Spacing
|
|
13
|
+
'spacing01',
|
|
14
|
+
'spacing02',
|
|
15
|
+
'spacing03',
|
|
16
|
+
'spacing04',
|
|
17
|
+
'spacing05',
|
|
18
|
+
'spacing06',
|
|
19
|
+
'spacing07',
|
|
20
|
+
'spacing08',
|
|
21
|
+
'spacing09',
|
|
22
|
+
'spacing10',
|
|
23
|
+
'spacing11',
|
|
24
|
+
'spacing12',
|
|
25
|
+
'spacing13',
|
|
26
|
+
|
|
27
|
+
// Fluid spacing
|
|
28
|
+
'fluidSpacing01',
|
|
29
|
+
'fluidSpacing02',
|
|
30
|
+
'fluidSpacing03',
|
|
31
|
+
'fluidSpacing04',
|
|
32
|
+
|
|
33
|
+
// Containers
|
|
34
|
+
'container01',
|
|
35
|
+
'container02',
|
|
36
|
+
'container03',
|
|
37
|
+
'container04',
|
|
38
|
+
'container05',
|
|
39
|
+
'sizeXSmall',
|
|
40
|
+
'sizeSmall',
|
|
41
|
+
'sizeMedium',
|
|
42
|
+
'sizeLarge',
|
|
43
|
+
'sizeXLarge',
|
|
44
|
+
'size2XLarge',
|
|
45
|
+
|
|
46
|
+
// Icon sizes
|
|
47
|
+
'iconSize01',
|
|
48
|
+
'iconSize02',
|
|
49
|
+
|
|
50
|
+
// Layout
|
|
51
|
+
// Deprecated
|
|
52
|
+
'layout01',
|
|
53
|
+
'layout02',
|
|
54
|
+
'layout03',
|
|
55
|
+
'layout04',
|
|
56
|
+
'layout05',
|
|
57
|
+
'layout06',
|
|
58
|
+
'layout07',
|
|
59
|
+
];
|
package/telemetry.yml
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
# yaml-language-server: $schema=https://unpkg.com/@octaviaflow/telemetry-config-schema@v1.0.0/dist/config.schema.json
|
|
2
|
+
version: 1
|
|
3
|
+
projectId: '7cb37cd7-4644-4ed8-bbd0-51a4beb167a9'
|
|
4
|
+
name: 'OctaviaFlow Layout'
|
|
5
|
+
storage:
|
|
6
|
+
type: 'file'
|
|
7
|
+
file:
|
|
8
|
+
directory: '/Volumes/Main/Projects/OctaviaFlow-Design-System/telemetry-logs'
|
|
9
|
+
fileNamePattern: 'octaviaflow-layout-{timestamp}.json'
|
|
10
|
+
maxFileSizeMB: 10
|
|
11
|
+
compress: false
|
|
12
|
+
collect:
|
|
13
|
+
npm:
|
|
14
|
+
dependencies: null
|
|
15
|
+
js:
|
|
16
|
+
functions: {}
|
|
17
|
+
tokens: null
|