@carbon/layout 11.59.0 → 11.60.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 (13) hide show
  1. package/es/index.js +62 -60
  2. package/js/generated/layout-tokens.d.ts +51 -0
  3. package/js/generated/layout-tokens.js +51 -0
  4. package/lib/index.d.ts +1 -38
  5. package/lib/index.js +67 -59
  6. package/package.json +7 -5
  7. package/src/dtcg/README.md +266 -0
  8. package/src/dtcg/layout.json +432 -0
  9. package/src/index.ts +74 -60
  10. package/style-dictionary/formats/js-layout.js +104 -0
  11. package/style-dictionary/formats/scss-layout.js +188 -0
  12. package/style-dictionary/sd.config.js +104 -0
  13. package/umd/index.js +67 -59
package/umd/index.js CHANGED
@@ -2,6 +2,52 @@
2
2
  typeof exports === "object" && typeof module !== "undefined" ? factory(exports) : typeof define === "function" && define.amd ? define(["exports"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.CarbonLayout = {}));
3
3
  })(this, function(exports) {
4
4
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
5
+ //#region js/generated/layout-tokens.js
6
+ const spacing01 = "0.125rem";
7
+ const spacing02 = "0.25rem";
8
+ const spacing03 = "0.5rem";
9
+ const spacing04 = "0.75rem";
10
+ const spacing05 = "1rem";
11
+ const spacing06 = "1.5rem";
12
+ const spacing07 = "2rem";
13
+ const spacing08 = "2.5rem";
14
+ const spacing09 = "3rem";
15
+ const spacing10 = "4rem";
16
+ const spacing11 = "5rem";
17
+ const spacing12 = "6rem";
18
+ const spacing13 = "10rem";
19
+ const fluidSpacing01 = 0;
20
+ const fluidSpacing02 = "2vw";
21
+ const fluidSpacing03 = "5vw";
22
+ const fluidSpacing04 = "10vw";
23
+ const container01 = "1.5rem";
24
+ const container02 = "2rem";
25
+ const container03 = "2.5rem";
26
+ const container04 = "3rem";
27
+ const container05 = "4rem";
28
+ const sizeXs = "1.5rem";
29
+ const sizeSm = "2rem";
30
+ const sizeMd = "2.5rem";
31
+ const sizeLg = "3rem";
32
+ const sizeXl = "4rem";
33
+ const size2xl = "5rem";
34
+ const iconSize01 = "1rem";
35
+ const iconSize02 = "1.25rem";
36
+ const borderRadius00 = "0px";
37
+ const borderRadius02 = "0.125rem";
38
+ const borderRadius04 = "0.25rem";
39
+ const borderRadius08 = "0.5rem";
40
+ const borderRadius16 = "1rem";
41
+ const borderRadius24 = "1.5rem";
42
+ const borderRadiusMax = "999999px";
43
+ const layout01 = "1rem";
44
+ const layout02 = "1.5rem";
45
+ const layout03 = "2rem";
46
+ const layout04 = "3rem";
47
+ const layout05 = "4rem";
48
+ const layout06 = "6rem";
49
+ const layout07 = "10rem";
50
+ //#endregion
5
51
  //#region src/tokens.ts
6
52
  /**
7
53
  * Copyright IBM Corp. 2018, 2026
@@ -50,12 +96,6 @@
50
96
  ];
51
97
  //#endregion
52
98
  //#region src/index.ts
53
- /**
54
- * Copyright IBM Corp. 2018, 2026
55
- *
56
- * This source code is licensed under the Apache-2.0 license found in the
57
- * LICENSE file in the root directory of this source tree.
58
- */
59
99
  const baseFontSize = 16;
60
100
  const rem = (px) => {
61
101
  return `${px / 16}rem`;
@@ -68,29 +108,29 @@
68
108
  };
69
109
  const breakpoints = {
70
110
  sm: {
71
- width: /*#__PURE__*/ rem(320),
111
+ width: rem(320),
72
112
  columns: 4,
73
113
  margin: "0"
74
114
  },
75
115
  md: {
76
- width: /*#__PURE__*/ rem(672),
116
+ width: rem(672),
77
117
  columns: 8,
78
- margin: /*#__PURE__*/ rem(16)
118
+ margin: rem(16)
79
119
  },
80
120
  lg: {
81
- width: /*#__PURE__*/ rem(1056),
121
+ width: rem(1056),
82
122
  columns: 16,
83
- margin: /*#__PURE__*/ rem(16)
123
+ margin: rem(16)
84
124
  },
85
125
  xlg: {
86
- width: /*#__PURE__*/ rem(1312),
126
+ width: rem(1312),
87
127
  columns: 16,
88
- margin: /*#__PURE__*/ rem(16)
128
+ margin: rem(16)
89
129
  },
90
130
  max: {
91
- width: /*#__PURE__*/ rem(1584),
131
+ width: rem(1584),
92
132
  columns: 16,
93
- margin: /*#__PURE__*/ rem(24)
133
+ margin: rem(24)
94
134
  }
95
135
  };
96
136
  const breakpointUp = (name) => {
@@ -104,19 +144,6 @@
104
144
  const miniUnits = (count) => {
105
145
  return rem(8 * count);
106
146
  };
107
- const spacing01 = /*#__PURE__*/ miniUnits(.25);
108
- const spacing02 = /*#__PURE__*/ miniUnits(.5);
109
- const spacing03 = /*#__PURE__*/ miniUnits(1);
110
- const spacing04 = /*#__PURE__*/ miniUnits(1.5);
111
- const spacing05 = /*#__PURE__*/ miniUnits(2);
112
- const spacing06 = /*#__PURE__*/ miniUnits(3);
113
- const spacing07 = /*#__PURE__*/ miniUnits(4);
114
- const spacing08 = /*#__PURE__*/ miniUnits(5);
115
- const spacing09 = /*#__PURE__*/ miniUnits(6);
116
- const spacing10 = /*#__PURE__*/ miniUnits(8);
117
- const spacing11 = /*#__PURE__*/ miniUnits(10);
118
- const spacing12 = /*#__PURE__*/ miniUnits(12);
119
- const spacing13 = /*#__PURE__*/ miniUnits(20);
120
147
  const spacing = [
121
148
  spacing01,
122
149
  spacing02,
@@ -132,23 +159,12 @@
132
159
  spacing12,
133
160
  spacing13
134
161
  ];
135
- const fluidSpacing01 = 0;
136
- const fluidSpacing02 = "2vw";
137
- const fluidSpacing03 = "5vw";
138
- const fluidSpacing04 = "10vw";
139
162
  const fluidSpacing = [
140
163
  0,
141
164
  "2vw",
142
165
  "5vw",
143
166
  fluidSpacing04
144
167
  ];
145
- const layout01 = /*#__PURE__*/ miniUnits(2);
146
- const layout02 = /*#__PURE__*/ miniUnits(3);
147
- const layout03 = /*#__PURE__*/ miniUnits(4);
148
- const layout04 = /*#__PURE__*/ miniUnits(6);
149
- const layout05 = /*#__PURE__*/ miniUnits(8);
150
- const layout06 = /*#__PURE__*/ miniUnits(12);
151
- const layout07 = /*#__PURE__*/ miniUnits(20);
152
168
  const layout = [
153
169
  layout01,
154
170
  layout02,
@@ -158,11 +174,6 @@
158
174
  layout06,
159
175
  layout07
160
176
  ];
161
- const container01 = /*#__PURE__*/ miniUnits(3);
162
- const container02 = /*#__PURE__*/ miniUnits(4);
163
- const container03 = /*#__PURE__*/ miniUnits(5);
164
- const container04 = /*#__PURE__*/ miniUnits(6);
165
- const container05 = /*#__PURE__*/ miniUnits(8);
166
177
  const container = [
167
178
  container01,
168
179
  container02,
@@ -170,12 +181,12 @@
170
181
  container04,
171
182
  container05
172
183
  ];
173
- const sizeXSmall = /*#__PURE__*/ rem(24);
174
- const sizeSmall = /*#__PURE__*/ rem(32);
175
- const sizeMedium = /*#__PURE__*/ rem(40);
176
- const sizeLarge = /*#__PURE__*/ rem(48);
177
- const sizeXLarge = /*#__PURE__*/ rem(64);
178
- const size2XLarge = /*#__PURE__*/ rem(80);
184
+ const sizeXSmall = sizeXs;
185
+ const sizeSmall = sizeSm;
186
+ const sizeMedium = sizeMd;
187
+ const sizeLarge = sizeLg;
188
+ const sizeXLarge = sizeXl;
189
+ const size2XLarge = size2xl;
179
190
  const sizes = {
180
191
  XSmall: sizeXSmall,
181
192
  Small: sizeSmall,
@@ -184,16 +195,7 @@
184
195
  XLarge: sizeXLarge,
185
196
  "2XLarge": size2XLarge
186
197
  };
187
- const iconSize01 = "1rem";
188
- const iconSize02 = "1.25rem";
189
198
  const iconSize = [iconSize01, iconSize02];
190
- const borderRadius00 = "0px";
191
- const borderRadius02 = rem(2);
192
- const borderRadius04 = rem(4);
193
- const borderRadius08 = rem(8);
194
- const borderRadius16 = rem(16);
195
- const borderRadius24 = rem(24);
196
- const borderRadiusMax = "999999px";
197
199
  const borderRadius = {
198
200
  "border-radius-00": "0px",
199
201
  "border-radius-02": borderRadius02,
@@ -245,11 +247,17 @@
245
247
  exports.px = px;
246
248
  exports.rem = rem;
247
249
  exports.size2XLarge = size2XLarge;
250
+ exports.size2xl = size2xl;
248
251
  exports.sizeLarge = sizeLarge;
252
+ exports.sizeLg = sizeLg;
253
+ exports.sizeMd = sizeMd;
249
254
  exports.sizeMedium = sizeMedium;
255
+ exports.sizeSm = sizeSm;
250
256
  exports.sizeSmall = sizeSmall;
251
257
  exports.sizeXLarge = sizeXLarge;
252
258
  exports.sizeXSmall = sizeXSmall;
259
+ exports.sizeXl = sizeXl;
260
+ exports.sizeXs = sizeXs;
253
261
  exports.sizes = sizes;
254
262
  exports.spacing = spacing;
255
263
  exports.spacing01 = spacing01;