@carbon/layout 11.49.0 → 11.50.0-rc.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 (5) hide show
  1. package/es/index.js +184 -144
  2. package/lib/index.js +185 -145
  3. package/package.json +3 -3
  4. package/scss/generated/_size.scss +1 -1
  5. package/umd/index.js +263 -223
package/es/index.js CHANGED
@@ -1,166 +1,206 @@
1
+ //#region src/tokens.js
1
2
  /**
2
- * Copyright IBM Corp. 2018, 2023
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
- var unstable_tokens = [
9
- // Spacing
10
- 'spacing01', 'spacing02', 'spacing03', 'spacing04', 'spacing05', 'spacing06', 'spacing07', 'spacing08', 'spacing09', 'spacing10', 'spacing11', 'spacing12', 'spacing13',
11
- // Fluid spacing
12
- 'fluidSpacing01', 'fluidSpacing02', 'fluidSpacing03', 'fluidSpacing04',
13
- // Containers
14
- 'container01', 'container02', 'container03', 'container04', 'container05', 'sizeXSmall', 'sizeSmall', 'sizeMedium', 'sizeLarge', 'sizeXLarge', 'size2XLarge',
15
- // Icon sizes
16
- 'iconSize01', 'iconSize02',
17
- // Layout
18
- // Deprecated
19
- 'layout01', 'layout02', 'layout03', 'layout04', 'layout05', 'layout06', 'layout07'];
3
+ * Copyright IBM Corp. 2018, 2023
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
+ const unstable_tokens = [
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
+ "fluidSpacing01",
23
+ "fluidSpacing02",
24
+ "fluidSpacing03",
25
+ "fluidSpacing04",
26
+ "container01",
27
+ "container02",
28
+ "container03",
29
+ "container04",
30
+ "container05",
31
+ "sizeXSmall",
32
+ "sizeSmall",
33
+ "sizeMedium",
34
+ "sizeLarge",
35
+ "sizeXLarge",
36
+ "size2XLarge",
37
+ "iconSize01",
38
+ "iconSize02",
39
+ "layout01",
40
+ "layout02",
41
+ "layout03",
42
+ "layout04",
43
+ "layout05",
44
+ "layout06",
45
+ "layout07"
46
+ ];
20
47
 
48
+ //#endregion
49
+ //#region src/index.js
21
50
  /**
22
- * Copyright IBM Corp. 2018, 2023
23
- *
24
- * This source code is licensed under the Apache-2.0 license found in the
25
- * LICENSE file in the root directory of this source tree.
26
- */
27
-
28
-
29
- // Convert
30
- // Default, Use with em() and rem() functions
31
- var baseFontSize = 16;
32
-
51
+ * Copyright IBM Corp. 2018, 2023
52
+ *
53
+ * This source code is licensed under the Apache-2.0 license found in the
54
+ * LICENSE file in the root directory of this source tree.
55
+ */
56
+ const baseFontSize = 16;
33
57
  /**
34
- * Convert a given px unit to a rem unit
35
- * @param {number} px
36
- * @returns {string}
37
- */
58
+ * Convert a given px unit to a rem unit
59
+ * @param {number} px
60
+ * @returns {string}
61
+ */
38
62
  function rem(px) {
39
- return "".concat(px / baseFontSize, "rem");
63
+ return `${px / baseFontSize}rem`;
40
64
  }
41
-
42
65
  /**
43
- * Convert a given px unit to a em unit
44
- * @param {number} px
45
- * @returns {string}
46
- */
66
+ * Convert a given px unit to a em unit
67
+ * @param {number} px
68
+ * @returns {string}
69
+ */
47
70
  function em(px) {
48
- return "".concat(px / baseFontSize, "em");
71
+ return `${px / baseFontSize}em`;
49
72
  }
50
-
51
73
  /**
52
- * Convert a given px unit to its string representation
53
- * @param {number} value - number of pixels
54
- * @returns {string}
55
- */
74
+ * Convert a given px unit to its string representation
75
+ * @param {number} value - number of pixels
76
+ * @returns {string}
77
+ */
56
78
  function px(value) {
57
- return "".concat(value, "px");
79
+ return `${value}px`;
58
80
  }
59
-
60
- // Breakpoint
61
- // Initial map of our breakpoints and their values
62
- var breakpoints = {
63
- sm: {
64
- width: rem(320),
65
- columns: 4,
66
- margin: '0'
67
- },
68
- md: {
69
- width: rem(672),
70
- columns: 8,
71
- margin: rem(16)
72
- },
73
- lg: {
74
- width: rem(1056),
75
- columns: 16,
76
- margin: rem(16)
77
- },
78
- xlg: {
79
- width: rem(1312),
80
- columns: 16,
81
- margin: rem(16)
82
- },
83
- max: {
84
- width: rem(1584),
85
- columns: 16,
86
- margin: rem(24)
87
- }
81
+ const breakpoints = {
82
+ sm: {
83
+ width: rem(320),
84
+ columns: 4,
85
+ margin: "0"
86
+ },
87
+ md: {
88
+ width: rem(672),
89
+ columns: 8,
90
+ margin: rem(16)
91
+ },
92
+ lg: {
93
+ width: rem(1056),
94
+ columns: 16,
95
+ margin: rem(16)
96
+ },
97
+ xlg: {
98
+ width: rem(1312),
99
+ columns: 16,
100
+ margin: rem(16)
101
+ },
102
+ max: {
103
+ width: rem(1584),
104
+ columns: 16,
105
+ margin: rem(24)
106
+ }
88
107
  };
89
108
  function breakpointUp(name) {
90
- return "@media (min-width: ".concat(breakpoints[name].width, ")");
109
+ return `@media (min-width: ${breakpoints[name].width})`;
91
110
  }
92
111
  function breakpointDown(name) {
93
- return "@media (max-width: ".concat(breakpoints[name].width, ")");
112
+ return `@media (max-width: ${breakpoints[name].width})`;
94
113
  }
95
- function breakpoint() {
96
- return breakpointUp.apply(void 0, arguments);
114
+ function breakpoint(...args) {
115
+ return breakpointUp(...args);
97
116
  }
98
-
99
- // Mini-unit
100
- var miniUnit = 8;
117
+ const miniUnit = 8;
101
118
  function miniUnits(count) {
102
- return rem(miniUnit * count);
119
+ return rem(miniUnit * count);
103
120
  }
104
-
105
- // Spacing
106
- var spacing01 = miniUnits(0.25);
107
- var spacing02 = miniUnits(0.5);
108
- var spacing03 = miniUnits(1);
109
- var spacing04 = miniUnits(1.5);
110
- var spacing05 = miniUnits(2);
111
- var spacing06 = miniUnits(3);
112
- var spacing07 = miniUnits(4);
113
- var spacing08 = miniUnits(5);
114
- var spacing09 = miniUnits(6);
115
- var spacing10 = miniUnits(8);
116
- var spacing11 = miniUnits(10);
117
- var spacing12 = miniUnits(12);
118
- var spacing13 = miniUnits(20);
119
- var spacing = [spacing01, spacing02, spacing03, spacing04, spacing05, spacing06, spacing07, spacing08, spacing09, spacing10, spacing11, spacing12, spacing13];
120
-
121
- // Fluid spacing
122
- var fluidSpacing01 = 0;
123
- var fluidSpacing02 = '2vw';
124
- var fluidSpacing03 = '5vw';
125
- var fluidSpacing04 = '10vw';
126
- var fluidSpacing = [fluidSpacing01, fluidSpacing02, fluidSpacing03, fluidSpacing04];
127
-
128
- // Layout
129
- // Deprecated
130
- var layout01 = miniUnits(2);
131
- var layout02 = miniUnits(3);
132
- var layout03 = miniUnits(4);
133
- var layout04 = miniUnits(6);
134
- var layout05 = miniUnits(8);
135
- var layout06 = miniUnits(12);
136
- var layout07 = miniUnits(20);
137
- var layout = [layout01, layout02, layout03, layout04, layout05, layout06, layout07];
138
-
139
- // Container
140
- var container01 = miniUnits(3);
141
- var container02 = miniUnits(4);
142
- var container03 = miniUnits(5);
143
- var container04 = miniUnits(6);
144
- var container05 = miniUnits(8);
145
- var container = [container01, container02, container03, container04, container05];
146
- var sizeXSmall = rem(24);
147
- var sizeSmall = rem(32);
148
- var sizeMedium = rem(40);
149
- var sizeLarge = rem(48);
150
- var sizeXLarge = rem(64);
151
- var size2XLarge = rem(80);
152
- var sizes = {
153
- XSmall: sizeXSmall,
154
- Small: sizeSmall,
155
- Medium: sizeMedium,
156
- Large: sizeLarge,
157
- XLarge: sizeXLarge,
158
- '2XLarge': size2XLarge
121
+ const spacing01 = miniUnits(.25);
122
+ const spacing02 = miniUnits(.5);
123
+ const spacing03 = miniUnits(1);
124
+ const spacing04 = miniUnits(1.5);
125
+ const spacing05 = miniUnits(2);
126
+ const spacing06 = miniUnits(3);
127
+ const spacing07 = miniUnits(4);
128
+ const spacing08 = miniUnits(5);
129
+ const spacing09 = miniUnits(6);
130
+ const spacing10 = miniUnits(8);
131
+ const spacing11 = miniUnits(10);
132
+ const spacing12 = miniUnits(12);
133
+ const spacing13 = miniUnits(20);
134
+ const spacing = [
135
+ spacing01,
136
+ spacing02,
137
+ spacing03,
138
+ spacing04,
139
+ spacing05,
140
+ spacing06,
141
+ spacing07,
142
+ spacing08,
143
+ spacing09,
144
+ spacing10,
145
+ spacing11,
146
+ spacing12,
147
+ spacing13
148
+ ];
149
+ const fluidSpacing01 = 0;
150
+ const fluidSpacing02 = "2vw";
151
+ const fluidSpacing03 = "5vw";
152
+ const fluidSpacing04 = "10vw";
153
+ const fluidSpacing = [
154
+ fluidSpacing01,
155
+ fluidSpacing02,
156
+ fluidSpacing03,
157
+ fluidSpacing04
158
+ ];
159
+ const layout01 = miniUnits(2);
160
+ const layout02 = miniUnits(3);
161
+ const layout03 = miniUnits(4);
162
+ const layout04 = miniUnits(6);
163
+ const layout05 = miniUnits(8);
164
+ const layout06 = miniUnits(12);
165
+ const layout07 = miniUnits(20);
166
+ const layout = [
167
+ layout01,
168
+ layout02,
169
+ layout03,
170
+ layout04,
171
+ layout05,
172
+ layout06,
173
+ layout07
174
+ ];
175
+ const container01 = miniUnits(3);
176
+ const container02 = miniUnits(4);
177
+ const container03 = miniUnits(5);
178
+ const container04 = miniUnits(6);
179
+ const container05 = miniUnits(8);
180
+ const container = [
181
+ container01,
182
+ container02,
183
+ container03,
184
+ container04,
185
+ container05
186
+ ];
187
+ const sizeXSmall = rem(24);
188
+ const sizeSmall = rem(32);
189
+ const sizeMedium = rem(40);
190
+ const sizeLarge = rem(48);
191
+ const sizeXLarge = rem(64);
192
+ const size2XLarge = rem(80);
193
+ const sizes = {
194
+ XSmall: sizeXSmall,
195
+ Small: sizeSmall,
196
+ Medium: sizeMedium,
197
+ Large: sizeLarge,
198
+ XLarge: sizeXLarge,
199
+ "2XLarge": size2XLarge
159
200
  };
201
+ const iconSize01 = "1rem";
202
+ const iconSize02 = "1.25rem";
203
+ const iconSize = [iconSize01, iconSize02];
160
204
 
161
- // Icon
162
- var iconSize01 = '1rem';
163
- var iconSize02 = '1.25rem';
164
- var iconSize = [iconSize01, iconSize02];
165
-
166
- 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 };
205
+ //#endregion
206
+ 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 CHANGED
@@ -1,170 +1,210 @@
1
- 'use strict';
1
+ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
2
2
 
3
+ //#region src/tokens.js
3
4
  /**
4
- * Copyright IBM Corp. 2018, 2023
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
- var unstable_tokens = [
11
- // Spacing
12
- 'spacing01', 'spacing02', 'spacing03', 'spacing04', 'spacing05', 'spacing06', 'spacing07', 'spacing08', 'spacing09', 'spacing10', 'spacing11', 'spacing12', 'spacing13',
13
- // Fluid spacing
14
- 'fluidSpacing01', 'fluidSpacing02', 'fluidSpacing03', 'fluidSpacing04',
15
- // Containers
16
- 'container01', 'container02', 'container03', 'container04', 'container05', 'sizeXSmall', 'sizeSmall', 'sizeMedium', 'sizeLarge', 'sizeXLarge', 'size2XLarge',
17
- // Icon sizes
18
- 'iconSize01', 'iconSize02',
19
- // Layout
20
- // Deprecated
21
- 'layout01', 'layout02', 'layout03', 'layout04', 'layout05', 'layout06', 'layout07'];
5
+ * Copyright IBM Corp. 2018, 2023
6
+ *
7
+ * This source code is licensed under the Apache-2.0 license found in the
8
+ * LICENSE file in the root directory of this source tree.
9
+ */
10
+ const unstable_tokens = [
11
+ "spacing01",
12
+ "spacing02",
13
+ "spacing03",
14
+ "spacing04",
15
+ "spacing05",
16
+ "spacing06",
17
+ "spacing07",
18
+ "spacing08",
19
+ "spacing09",
20
+ "spacing10",
21
+ "spacing11",
22
+ "spacing12",
23
+ "spacing13",
24
+ "fluidSpacing01",
25
+ "fluidSpacing02",
26
+ "fluidSpacing03",
27
+ "fluidSpacing04",
28
+ "container01",
29
+ "container02",
30
+ "container03",
31
+ "container04",
32
+ "container05",
33
+ "sizeXSmall",
34
+ "sizeSmall",
35
+ "sizeMedium",
36
+ "sizeLarge",
37
+ "sizeXLarge",
38
+ "size2XLarge",
39
+ "iconSize01",
40
+ "iconSize02",
41
+ "layout01",
42
+ "layout02",
43
+ "layout03",
44
+ "layout04",
45
+ "layout05",
46
+ "layout06",
47
+ "layout07"
48
+ ];
22
49
 
50
+ //#endregion
51
+ //#region src/index.js
23
52
  /**
24
- * Copyright IBM Corp. 2018, 2023
25
- *
26
- * This source code is licensed under the Apache-2.0 license found in the
27
- * LICENSE file in the root directory of this source tree.
28
- */
29
-
30
-
31
- // Convert
32
- // Default, Use with em() and rem() functions
33
- var baseFontSize = 16;
34
-
53
+ * Copyright IBM Corp. 2018, 2023
54
+ *
55
+ * This source code is licensed under the Apache-2.0 license found in the
56
+ * LICENSE file in the root directory of this source tree.
57
+ */
58
+ const baseFontSize = 16;
35
59
  /**
36
- * Convert a given px unit to a rem unit
37
- * @param {number} px
38
- * @returns {string}
39
- */
60
+ * Convert a given px unit to a rem unit
61
+ * @param {number} px
62
+ * @returns {string}
63
+ */
40
64
  function rem(px) {
41
- return "".concat(px / baseFontSize, "rem");
65
+ return `${px / baseFontSize}rem`;
42
66
  }
43
-
44
67
  /**
45
- * Convert a given px unit to a em unit
46
- * @param {number} px
47
- * @returns {string}
48
- */
68
+ * Convert a given px unit to a em unit
69
+ * @param {number} px
70
+ * @returns {string}
71
+ */
49
72
  function em(px) {
50
- return "".concat(px / baseFontSize, "em");
73
+ return `${px / baseFontSize}em`;
51
74
  }
52
-
53
75
  /**
54
- * Convert a given px unit to its string representation
55
- * @param {number} value - number of pixels
56
- * @returns {string}
57
- */
76
+ * Convert a given px unit to its string representation
77
+ * @param {number} value - number of pixels
78
+ * @returns {string}
79
+ */
58
80
  function px(value) {
59
- return "".concat(value, "px");
81
+ return `${value}px`;
60
82
  }
61
-
62
- // Breakpoint
63
- // Initial map of our breakpoints and their values
64
- var breakpoints = {
65
- sm: {
66
- width: rem(320),
67
- columns: 4,
68
- margin: '0'
69
- },
70
- md: {
71
- width: rem(672),
72
- columns: 8,
73
- margin: rem(16)
74
- },
75
- lg: {
76
- width: rem(1056),
77
- columns: 16,
78
- margin: rem(16)
79
- },
80
- xlg: {
81
- width: rem(1312),
82
- columns: 16,
83
- margin: rem(16)
84
- },
85
- max: {
86
- width: rem(1584),
87
- columns: 16,
88
- margin: rem(24)
89
- }
83
+ const breakpoints = {
84
+ sm: {
85
+ width: rem(320),
86
+ columns: 4,
87
+ margin: "0"
88
+ },
89
+ md: {
90
+ width: rem(672),
91
+ columns: 8,
92
+ margin: rem(16)
93
+ },
94
+ lg: {
95
+ width: rem(1056),
96
+ columns: 16,
97
+ margin: rem(16)
98
+ },
99
+ xlg: {
100
+ width: rem(1312),
101
+ columns: 16,
102
+ margin: rem(16)
103
+ },
104
+ max: {
105
+ width: rem(1584),
106
+ columns: 16,
107
+ margin: rem(24)
108
+ }
90
109
  };
91
110
  function breakpointUp(name) {
92
- return "@media (min-width: ".concat(breakpoints[name].width, ")");
111
+ return `@media (min-width: ${breakpoints[name].width})`;
93
112
  }
94
113
  function breakpointDown(name) {
95
- return "@media (max-width: ".concat(breakpoints[name].width, ")");
114
+ return `@media (max-width: ${breakpoints[name].width})`;
96
115
  }
97
- function breakpoint() {
98
- return breakpointUp.apply(void 0, arguments);
116
+ function breakpoint(...args) {
117
+ return breakpointUp(...args);
99
118
  }
100
-
101
- // Mini-unit
102
- var miniUnit = 8;
119
+ const miniUnit = 8;
103
120
  function miniUnits(count) {
104
- return rem(miniUnit * count);
121
+ return rem(miniUnit * count);
105
122
  }
106
-
107
- // Spacing
108
- var spacing01 = miniUnits(0.25);
109
- var spacing02 = miniUnits(0.5);
110
- var spacing03 = miniUnits(1);
111
- var spacing04 = miniUnits(1.5);
112
- var spacing05 = miniUnits(2);
113
- var spacing06 = miniUnits(3);
114
- var spacing07 = miniUnits(4);
115
- var spacing08 = miniUnits(5);
116
- var spacing09 = miniUnits(6);
117
- var spacing10 = miniUnits(8);
118
- var spacing11 = miniUnits(10);
119
- var spacing12 = miniUnits(12);
120
- var spacing13 = miniUnits(20);
121
- var spacing = [spacing01, spacing02, spacing03, spacing04, spacing05, spacing06, spacing07, spacing08, spacing09, spacing10, spacing11, spacing12, spacing13];
122
-
123
- // Fluid spacing
124
- var fluidSpacing01 = 0;
125
- var fluidSpacing02 = '2vw';
126
- var fluidSpacing03 = '5vw';
127
- var fluidSpacing04 = '10vw';
128
- var fluidSpacing = [fluidSpacing01, fluidSpacing02, fluidSpacing03, fluidSpacing04];
129
-
130
- // Layout
131
- // Deprecated
132
- var layout01 = miniUnits(2);
133
- var layout02 = miniUnits(3);
134
- var layout03 = miniUnits(4);
135
- var layout04 = miniUnits(6);
136
- var layout05 = miniUnits(8);
137
- var layout06 = miniUnits(12);
138
- var layout07 = miniUnits(20);
139
- var layout = [layout01, layout02, layout03, layout04, layout05, layout06, layout07];
140
-
141
- // Container
142
- var container01 = miniUnits(3);
143
- var container02 = miniUnits(4);
144
- var container03 = miniUnits(5);
145
- var container04 = miniUnits(6);
146
- var container05 = miniUnits(8);
147
- var container = [container01, container02, container03, container04, container05];
148
- var sizeXSmall = rem(24);
149
- var sizeSmall = rem(32);
150
- var sizeMedium = rem(40);
151
- var sizeLarge = rem(48);
152
- var sizeXLarge = rem(64);
153
- var size2XLarge = rem(80);
154
- var sizes = {
155
- XSmall: sizeXSmall,
156
- Small: sizeSmall,
157
- Medium: sizeMedium,
158
- Large: sizeLarge,
159
- XLarge: sizeXLarge,
160
- '2XLarge': size2XLarge
123
+ const spacing01 = miniUnits(.25);
124
+ const spacing02 = miniUnits(.5);
125
+ const spacing03 = miniUnits(1);
126
+ const spacing04 = miniUnits(1.5);
127
+ const spacing05 = miniUnits(2);
128
+ const spacing06 = miniUnits(3);
129
+ const spacing07 = miniUnits(4);
130
+ const spacing08 = miniUnits(5);
131
+ const spacing09 = miniUnits(6);
132
+ const spacing10 = miniUnits(8);
133
+ const spacing11 = miniUnits(10);
134
+ const spacing12 = miniUnits(12);
135
+ const spacing13 = miniUnits(20);
136
+ const spacing = [
137
+ spacing01,
138
+ spacing02,
139
+ spacing03,
140
+ spacing04,
141
+ spacing05,
142
+ spacing06,
143
+ spacing07,
144
+ spacing08,
145
+ spacing09,
146
+ spacing10,
147
+ spacing11,
148
+ spacing12,
149
+ spacing13
150
+ ];
151
+ const fluidSpacing01 = 0;
152
+ const fluidSpacing02 = "2vw";
153
+ const fluidSpacing03 = "5vw";
154
+ const fluidSpacing04 = "10vw";
155
+ const fluidSpacing = [
156
+ fluidSpacing01,
157
+ fluidSpacing02,
158
+ fluidSpacing03,
159
+ fluidSpacing04
160
+ ];
161
+ const layout01 = miniUnits(2);
162
+ const layout02 = miniUnits(3);
163
+ const layout03 = miniUnits(4);
164
+ const layout04 = miniUnits(6);
165
+ const layout05 = miniUnits(8);
166
+ const layout06 = miniUnits(12);
167
+ const layout07 = miniUnits(20);
168
+ const layout = [
169
+ layout01,
170
+ layout02,
171
+ layout03,
172
+ layout04,
173
+ layout05,
174
+ layout06,
175
+ layout07
176
+ ];
177
+ const container01 = miniUnits(3);
178
+ const container02 = miniUnits(4);
179
+ const container03 = miniUnits(5);
180
+ const container04 = miniUnits(6);
181
+ const container05 = miniUnits(8);
182
+ const container = [
183
+ container01,
184
+ container02,
185
+ container03,
186
+ container04,
187
+ container05
188
+ ];
189
+ const sizeXSmall = rem(24);
190
+ const sizeSmall = rem(32);
191
+ const sizeMedium = rem(40);
192
+ const sizeLarge = rem(48);
193
+ const sizeXLarge = rem(64);
194
+ const size2XLarge = rem(80);
195
+ const sizes = {
196
+ XSmall: sizeXSmall,
197
+ Small: sizeSmall,
198
+ Medium: sizeMedium,
199
+ Large: sizeLarge,
200
+ XLarge: sizeXLarge,
201
+ "2XLarge": size2XLarge
161
202
  };
203
+ const iconSize01 = "1rem";
204
+ const iconSize02 = "1.25rem";
205
+ const iconSize = [iconSize01, iconSize02];
162
206
 
163
- // Icon
164
- var iconSize01 = '1rem';
165
- var iconSize02 = '1.25rem';
166
- var iconSize = [iconSize01, iconSize02];
167
-
207
+ //#endregion
168
208
  exports.baseFontSize = baseFontSize;
169
209
  exports.breakpoint = breakpoint;
170
210
  exports.breakpointDown = breakpointDown;
@@ -218,4 +258,4 @@ exports.spacing10 = spacing10;
218
258
  exports.spacing11 = spacing11;
219
259
  exports.spacing12 = spacing12;
220
260
  exports.spacing13 = spacing13;
221
- exports.unstable_tokens = unstable_tokens;
261
+ exports.unstable_tokens = unstable_tokens;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@carbon/layout",
3
3
  "description": "Layout helpers for digital and software products using the Carbon Design System",
4
- "version": "11.49.0",
4
+ "version": "11.50.0-rc.0",
5
5
  "license": "Apache-2.0",
6
6
  "main": "lib/index.js",
7
7
  "module": "es/index.js",
@@ -31,7 +31,7 @@
31
31
  "postinstall": "ibmtelemetry --config=telemetry.yml"
32
32
  },
33
33
  "devDependencies": {
34
- "@carbon/cli": "^11.41.0",
34
+ "@carbon/cli": "^11.42.0-rc.0",
35
35
  "@carbon/cli-reporter": "^10.8.0",
36
36
  "@carbon/scss-generator": "^10.20.0",
37
37
  "@carbon/test-utils": "^10.40.0",
@@ -41,5 +41,5 @@
41
41
  "dependencies": {
42
42
  "@ibm/telemetry-js": "^1.5.0"
43
43
  },
44
- "gitHead": "4f48ac426be7302a57460b1c81d74dd5d6071ad6"
44
+ "gitHead": "d901529b78f5b70b49309ad45604fa5ec99a2e69"
45
45
  }
package/scss/generated/_size.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  // Code generated by @carbon/layout. DO NOT EDIT.
2
2
  //
3
- // Copyright IBM Corp. 2018, 2023
3
+ // Copyright IBM Corp. 2018, 2026
4
4
  //
5
5
  // This source code is licensed under the Apache-2.0 license found in the
6
6
  // LICENSE file in the root directory of this source tree.
package/umd/index.js CHANGED
@@ -1,227 +1,267 @@
1
- (function (global, factory) {
2
- typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
1
+ (function(global, factory) {
2
+ typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
3
3
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
4
- (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.CarbonLayout = {}));
5
- })(this, (function (exports) { 'use strict';
4
+ (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.CarbonLayout = {})));
5
+ })(this, function(exports) {
6
+ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
6
7
 
7
- /**
8
- * Copyright IBM Corp. 2018, 2023
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
- */
8
+ //#region src/tokens.js
9
+ /**
10
+ * Copyright IBM Corp. 2018, 2023
11
+ *
12
+ * This source code is licensed under the Apache-2.0 license found in the
13
+ * LICENSE file in the root directory of this source tree.
14
+ */
15
+ const unstable_tokens = [
16
+ "spacing01",
17
+ "spacing02",
18
+ "spacing03",
19
+ "spacing04",
20
+ "spacing05",
21
+ "spacing06",
22
+ "spacing07",
23
+ "spacing08",
24
+ "spacing09",
25
+ "spacing10",
26
+ "spacing11",
27
+ "spacing12",
28
+ "spacing13",
29
+ "fluidSpacing01",
30
+ "fluidSpacing02",
31
+ "fluidSpacing03",
32
+ "fluidSpacing04",
33
+ "container01",
34
+ "container02",
35
+ "container03",
36
+ "container04",
37
+ "container05",
38
+ "sizeXSmall",
39
+ "sizeSmall",
40
+ "sizeMedium",
41
+ "sizeLarge",
42
+ "sizeXLarge",
43
+ "size2XLarge",
44
+ "iconSize01",
45
+ "iconSize02",
46
+ "layout01",
47
+ "layout02",
48
+ "layout03",
49
+ "layout04",
50
+ "layout05",
51
+ "layout06",
52
+ "layout07"
53
+ ];
13
54
 
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'];
55
+ //#endregion
56
+ //#region src/index.js
57
+ /**
58
+ * Copyright IBM Corp. 2018, 2023
59
+ *
60
+ * This source code is licensed under the Apache-2.0 license found in the
61
+ * LICENSE file in the root directory of this source tree.
62
+ */
63
+ const baseFontSize = 16;
64
+ /**
65
+ * Convert a given px unit to a rem unit
66
+ * @param {number} px
67
+ * @returns {string}
68
+ */
69
+ function rem(px) {
70
+ return `${px / baseFontSize}rem`;
71
+ }
72
+ /**
73
+ * Convert a given px unit to a em unit
74
+ * @param {number} px
75
+ * @returns {string}
76
+ */
77
+ function em(px) {
78
+ return `${px / baseFontSize}em`;
79
+ }
80
+ /**
81
+ * Convert a given px unit to its string representation
82
+ * @param {number} value - number of pixels
83
+ * @returns {string}
84
+ */
85
+ function px(value) {
86
+ return `${value}px`;
87
+ }
88
+ const breakpoints = {
89
+ sm: {
90
+ width: rem(320),
91
+ columns: 4,
92
+ margin: "0"
93
+ },
94
+ md: {
95
+ width: rem(672),
96
+ columns: 8,
97
+ margin: rem(16)
98
+ },
99
+ lg: {
100
+ width: rem(1056),
101
+ columns: 16,
102
+ margin: rem(16)
103
+ },
104
+ xlg: {
105
+ width: rem(1312),
106
+ columns: 16,
107
+ margin: rem(16)
108
+ },
109
+ max: {
110
+ width: rem(1584),
111
+ columns: 16,
112
+ margin: rem(24)
113
+ }
114
+ };
115
+ function breakpointUp(name) {
116
+ return `@media (min-width: ${breakpoints[name].width})`;
117
+ }
118
+ function breakpointDown(name) {
119
+ return `@media (max-width: ${breakpoints[name].width})`;
120
+ }
121
+ function breakpoint(...args) {
122
+ return breakpointUp(...args);
123
+ }
124
+ const miniUnit = 8;
125
+ function miniUnits(count) {
126
+ return rem(miniUnit * count);
127
+ }
128
+ const spacing01 = miniUnits(.25);
129
+ const spacing02 = miniUnits(.5);
130
+ const spacing03 = miniUnits(1);
131
+ const spacing04 = miniUnits(1.5);
132
+ const spacing05 = miniUnits(2);
133
+ const spacing06 = miniUnits(3);
134
+ const spacing07 = miniUnits(4);
135
+ const spacing08 = miniUnits(5);
136
+ const spacing09 = miniUnits(6);
137
+ const spacing10 = miniUnits(8);
138
+ const spacing11 = miniUnits(10);
139
+ const spacing12 = miniUnits(12);
140
+ const spacing13 = miniUnits(20);
141
+ const spacing = [
142
+ spacing01,
143
+ spacing02,
144
+ spacing03,
145
+ spacing04,
146
+ spacing05,
147
+ spacing06,
148
+ spacing07,
149
+ spacing08,
150
+ spacing09,
151
+ spacing10,
152
+ spacing11,
153
+ spacing12,
154
+ spacing13
155
+ ];
156
+ const fluidSpacing01 = 0;
157
+ const fluidSpacing02 = "2vw";
158
+ const fluidSpacing03 = "5vw";
159
+ const fluidSpacing04 = "10vw";
160
+ const fluidSpacing = [
161
+ fluidSpacing01,
162
+ fluidSpacing02,
163
+ fluidSpacing03,
164
+ fluidSpacing04
165
+ ];
166
+ const layout01 = miniUnits(2);
167
+ const layout02 = miniUnits(3);
168
+ const layout03 = miniUnits(4);
169
+ const layout04 = miniUnits(6);
170
+ const layout05 = miniUnits(8);
171
+ const layout06 = miniUnits(12);
172
+ const layout07 = miniUnits(20);
173
+ const layout = [
174
+ layout01,
175
+ layout02,
176
+ layout03,
177
+ layout04,
178
+ layout05,
179
+ layout06,
180
+ layout07
181
+ ];
182
+ const container01 = miniUnits(3);
183
+ const container02 = miniUnits(4);
184
+ const container03 = miniUnits(5);
185
+ const container04 = miniUnits(6);
186
+ const container05 = miniUnits(8);
187
+ const container = [
188
+ container01,
189
+ container02,
190
+ container03,
191
+ container04,
192
+ container05
193
+ ];
194
+ const sizeXSmall = rem(24);
195
+ const sizeSmall = rem(32);
196
+ const sizeMedium = rem(40);
197
+ const sizeLarge = rem(48);
198
+ const sizeXLarge = rem(64);
199
+ const size2XLarge = rem(80);
200
+ const sizes = {
201
+ XSmall: sizeXSmall,
202
+ Small: sizeSmall,
203
+ Medium: sizeMedium,
204
+ Large: sizeLarge,
205
+ XLarge: sizeXLarge,
206
+ "2XLarge": size2XLarge
207
+ };
208
+ const iconSize01 = "1rem";
209
+ const iconSize02 = "1.25rem";
210
+ const iconSize = [iconSize01, iconSize02];
26
211
 
27
- /**
28
- * Copyright IBM Corp. 2018, 2023
29
- *
30
- * This source code is licensed under the Apache-2.0 license found in the
31
- * LICENSE file in the root directory of this source tree.
32
- */
33
-
34
-
35
- // Convert
36
- // Default, Use with em() and rem() functions
37
- var baseFontSize = 16;
38
-
39
- /**
40
- * Convert a given px unit to a rem unit
41
- * @param {number} px
42
- * @returns {string}
43
- */
44
- function rem(px) {
45
- return "".concat(px / baseFontSize, "rem");
46
- }
47
-
48
- /**
49
- * Convert a given px unit to a em unit
50
- * @param {number} px
51
- * @returns {string}
52
- */
53
- function em(px) {
54
- return "".concat(px / baseFontSize, "em");
55
- }
56
-
57
- /**
58
- * Convert a given px unit to its string representation
59
- * @param {number} value - number of pixels
60
- * @returns {string}
61
- */
62
- function px(value) {
63
- return "".concat(value, "px");
64
- }
65
-
66
- // Breakpoint
67
- // Initial map of our breakpoints and their values
68
- var breakpoints = {
69
- sm: {
70
- width: rem(320),
71
- columns: 4,
72
- margin: '0'
73
- },
74
- md: {
75
- width: rem(672),
76
- columns: 8,
77
- margin: rem(16)
78
- },
79
- lg: {
80
- width: rem(1056),
81
- columns: 16,
82
- margin: rem(16)
83
- },
84
- xlg: {
85
- width: rem(1312),
86
- columns: 16,
87
- margin: rem(16)
88
- },
89
- max: {
90
- width: rem(1584),
91
- columns: 16,
92
- margin: rem(24)
93
- }
94
- };
95
- function breakpointUp(name) {
96
- return "@media (min-width: ".concat(breakpoints[name].width, ")");
97
- }
98
- function breakpointDown(name) {
99
- return "@media (max-width: ".concat(breakpoints[name].width, ")");
100
- }
101
- function breakpoint() {
102
- return breakpointUp.apply(void 0, arguments);
103
- }
104
-
105
- // Mini-unit
106
- var miniUnit = 8;
107
- function miniUnits(count) {
108
- return rem(miniUnit * count);
109
- }
110
-
111
- // Spacing
112
- var spacing01 = miniUnits(0.25);
113
- var spacing02 = miniUnits(0.5);
114
- var spacing03 = miniUnits(1);
115
- var spacing04 = miniUnits(1.5);
116
- var spacing05 = miniUnits(2);
117
- var spacing06 = miniUnits(3);
118
- var spacing07 = miniUnits(4);
119
- var spacing08 = miniUnits(5);
120
- var spacing09 = miniUnits(6);
121
- var spacing10 = miniUnits(8);
122
- var spacing11 = miniUnits(10);
123
- var spacing12 = miniUnits(12);
124
- var spacing13 = miniUnits(20);
125
- var spacing = [spacing01, spacing02, spacing03, spacing04, spacing05, spacing06, spacing07, spacing08, spacing09, spacing10, spacing11, spacing12, spacing13];
126
-
127
- // Fluid spacing
128
- var fluidSpacing01 = 0;
129
- var fluidSpacing02 = '2vw';
130
- var fluidSpacing03 = '5vw';
131
- var fluidSpacing04 = '10vw';
132
- var fluidSpacing = [fluidSpacing01, fluidSpacing02, fluidSpacing03, fluidSpacing04];
133
-
134
- // Layout
135
- // Deprecated
136
- var layout01 = miniUnits(2);
137
- var layout02 = miniUnits(3);
138
- var layout03 = miniUnits(4);
139
- var layout04 = miniUnits(6);
140
- var layout05 = miniUnits(8);
141
- var layout06 = miniUnits(12);
142
- var layout07 = miniUnits(20);
143
- var layout = [layout01, layout02, layout03, layout04, layout05, layout06, layout07];
144
-
145
- // Container
146
- var container01 = miniUnits(3);
147
- var container02 = miniUnits(4);
148
- var container03 = miniUnits(5);
149
- var container04 = miniUnits(6);
150
- var container05 = miniUnits(8);
151
- var container = [container01, container02, container03, container04, container05];
152
- var sizeXSmall = rem(24);
153
- var sizeSmall = rem(32);
154
- var sizeMedium = rem(40);
155
- var sizeLarge = rem(48);
156
- var sizeXLarge = rem(64);
157
- var size2XLarge = rem(80);
158
- var sizes = {
159
- XSmall: sizeXSmall,
160
- Small: sizeSmall,
161
- Medium: sizeMedium,
162
- Large: sizeLarge,
163
- XLarge: sizeXLarge,
164
- '2XLarge': size2XLarge
165
- };
166
-
167
- // Icon
168
- var iconSize01 = '1rem';
169
- var iconSize02 = '1.25rem';
170
- var iconSize = [iconSize01, iconSize02];
171
-
172
- exports.baseFontSize = baseFontSize;
173
- exports.breakpoint = breakpoint;
174
- exports.breakpointDown = breakpointDown;
175
- exports.breakpointUp = breakpointUp;
176
- exports.breakpoints = breakpoints;
177
- exports.container = container;
178
- exports.container01 = container01;
179
- exports.container02 = container02;
180
- exports.container03 = container03;
181
- exports.container04 = container04;
182
- exports.container05 = container05;
183
- exports.em = em;
184
- exports.fluidSpacing = fluidSpacing;
185
- exports.fluidSpacing01 = fluidSpacing01;
186
- exports.fluidSpacing02 = fluidSpacing02;
187
- exports.fluidSpacing03 = fluidSpacing03;
188
- exports.fluidSpacing04 = fluidSpacing04;
189
- exports.iconSize = iconSize;
190
- exports.iconSize01 = iconSize01;
191
- exports.iconSize02 = iconSize02;
192
- exports.layout = layout;
193
- exports.layout01 = layout01;
194
- exports.layout02 = layout02;
195
- exports.layout03 = layout03;
196
- exports.layout04 = layout04;
197
- exports.layout05 = layout05;
198
- exports.layout06 = layout06;
199
- exports.layout07 = layout07;
200
- exports.miniUnit = miniUnit;
201
- exports.miniUnits = miniUnits;
202
- exports.px = px;
203
- exports.rem = rem;
204
- exports.size2XLarge = size2XLarge;
205
- exports.sizeLarge = sizeLarge;
206
- exports.sizeMedium = sizeMedium;
207
- exports.sizeSmall = sizeSmall;
208
- exports.sizeXLarge = sizeXLarge;
209
- exports.sizeXSmall = sizeXSmall;
210
- exports.sizes = sizes;
211
- exports.spacing = spacing;
212
- exports.spacing01 = spacing01;
213
- exports.spacing02 = spacing02;
214
- exports.spacing03 = spacing03;
215
- exports.spacing04 = spacing04;
216
- exports.spacing05 = spacing05;
217
- exports.spacing06 = spacing06;
218
- exports.spacing07 = spacing07;
219
- exports.spacing08 = spacing08;
220
- exports.spacing09 = spacing09;
221
- exports.spacing10 = spacing10;
222
- exports.spacing11 = spacing11;
223
- exports.spacing12 = spacing12;
224
- exports.spacing13 = spacing13;
225
- exports.unstable_tokens = unstable_tokens;
226
-
227
- }));
212
+ //#endregion
213
+ exports.baseFontSize = baseFontSize;
214
+ exports.breakpoint = breakpoint;
215
+ exports.breakpointDown = breakpointDown;
216
+ exports.breakpointUp = breakpointUp;
217
+ exports.breakpoints = breakpoints;
218
+ exports.container = container;
219
+ exports.container01 = container01;
220
+ exports.container02 = container02;
221
+ exports.container03 = container03;
222
+ exports.container04 = container04;
223
+ exports.container05 = container05;
224
+ exports.em = em;
225
+ exports.fluidSpacing = fluidSpacing;
226
+ exports.fluidSpacing01 = fluidSpacing01;
227
+ exports.fluidSpacing02 = fluidSpacing02;
228
+ exports.fluidSpacing03 = fluidSpacing03;
229
+ exports.fluidSpacing04 = fluidSpacing04;
230
+ exports.iconSize = iconSize;
231
+ exports.iconSize01 = iconSize01;
232
+ exports.iconSize02 = iconSize02;
233
+ exports.layout = layout;
234
+ exports.layout01 = layout01;
235
+ exports.layout02 = layout02;
236
+ exports.layout03 = layout03;
237
+ exports.layout04 = layout04;
238
+ exports.layout05 = layout05;
239
+ exports.layout06 = layout06;
240
+ exports.layout07 = layout07;
241
+ exports.miniUnit = miniUnit;
242
+ exports.miniUnits = miniUnits;
243
+ exports.px = px;
244
+ exports.rem = rem;
245
+ exports.size2XLarge = size2XLarge;
246
+ exports.sizeLarge = sizeLarge;
247
+ exports.sizeMedium = sizeMedium;
248
+ exports.sizeSmall = sizeSmall;
249
+ exports.sizeXLarge = sizeXLarge;
250
+ exports.sizeXSmall = sizeXSmall;
251
+ exports.sizes = sizes;
252
+ exports.spacing = spacing;
253
+ exports.spacing01 = spacing01;
254
+ exports.spacing02 = spacing02;
255
+ exports.spacing03 = spacing03;
256
+ exports.spacing04 = spacing04;
257
+ exports.spacing05 = spacing05;
258
+ exports.spacing06 = spacing06;
259
+ exports.spacing07 = spacing07;
260
+ exports.spacing08 = spacing08;
261
+ exports.spacing09 = spacing09;
262
+ exports.spacing10 = spacing10;
263
+ exports.spacing11 = spacing11;
264
+ exports.spacing12 = spacing12;
265
+ exports.spacing13 = spacing13;
266
+ exports.unstable_tokens = unstable_tokens;
267
+ });