@carbon/layout 11.57.0 → 11.58.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 (10) hide show
  1. package/docs/sass.md +31 -24
  2. package/es/index.js +17 -1
  3. package/index.scss +2 -1
  4. package/lib/index.d.ts +9 -0
  5. package/lib/index.js +24 -0
  6. package/package.json +3 -3
  7. package/scss/_border-radius.scss +8 -0
  8. package/scss/generated/_border-radius.scss +55 -0
  9. package/src/index.ts +26 -0
  10. package/umd/index.js +24 -0
package/docs/sass.md CHANGED
@@ -20,30 +20,37 @@ the following:
20
20
 
21
21
  ## API
22
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` | | ✅ |
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
+ | `$border-radius-00` | | ✅ |
45
+ | `$border-radius-02` | | ✅ |
46
+ | `$border-radius-04` | | ✅ |
47
+ | `$border-radius-08` | | ✅ |
48
+ | `$border-radius-16` | | ✅ |
49
+ | `$border-radius-24` | | ✅ |
50
+ | `$border-radius-max` | | ✅ |
51
+ | `@function em` | | |
52
+ | `@function rem` | | |
53
+ | `$base-font-size` | | ✅ |
47
54
 
48
55
  ### Configuration
49
56
 
package/es/index.js CHANGED
@@ -183,5 +183,21 @@ const sizes = {
183
183
  const iconSize01 = "1rem";
184
184
  const iconSize02 = "1.25rem";
185
185
  const iconSize = [iconSize01, iconSize02];
186
+ const borderRadius00 = "0px";
187
+ const borderRadius02 = rem(2);
188
+ const borderRadius04 = rem(4);
189
+ const borderRadius08 = rem(8);
190
+ const borderRadius16 = rem(16);
191
+ const borderRadius24 = rem(24);
192
+ const borderRadiusMax = "999999px";
193
+ const borderRadius = {
194
+ "border-radius-00": "0px",
195
+ "border-radius-02": borderRadius02,
196
+ "border-radius-04": borderRadius04,
197
+ "border-radius-08": borderRadius08,
198
+ "border-radius-16": borderRadius16,
199
+ "border-radius-24": borderRadius24,
200
+ "border-radius-max": borderRadiusMax
201
+ };
186
202
  //#endregion
187
- 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 };
203
+ export { baseFontSize, borderRadius, borderRadius00, borderRadius02, borderRadius04, borderRadius08, borderRadius16, borderRadius24, borderRadiusMax, 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/index.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  //
2
- // Copyright IBM Corp. 2018, 2023
2
+ // Copyright IBM Corp. 2018, 2026
3
3
  //
4
4
  // This source code is licensed under the Apache-2.0 license found in the
5
5
  // LICENSE file in the root directory of this source tree.
@@ -7,6 +7,7 @@
7
7
 
8
8
  @forward 'scss/convert';
9
9
  @forward 'scss/spacing';
10
+ @forward 'scss/border-radius';
10
11
  @forward 'scss/generated/container';
11
12
  @forward 'scss/generated/icon-size';
12
13
  @forward 'scss/generated/size';
package/lib/index.d.ts CHANGED
@@ -13,6 +13,7 @@ export type Breakpoint = {
13
13
  margin: string;
14
14
  };
15
15
  export type SizeName = 'XSmall' | 'Small' | 'Medium' | 'Large' | 'XLarge' | '2XLarge';
16
+ export type BorderRadiusToken = 'border-radius-00' | 'border-radius-02' | 'border-radius-04' | 'border-radius-08' | 'border-radius-16' | 'border-radius-24' | 'border-radius-max';
16
17
  export declare const baseFontSize = 16;
17
18
  export declare const rem: (px: number) => string;
18
19
  export declare const em: (px: number) => string;
@@ -66,3 +67,11 @@ export declare const sizes: Record<SizeName, string>;
66
67
  export declare const iconSize01 = "1rem";
67
68
  export declare const iconSize02 = "1.25rem";
68
69
  export declare const iconSize: string[];
70
+ export declare const borderRadius00 = "0px";
71
+ export declare const borderRadius02: string;
72
+ export declare const borderRadius04: string;
73
+ export declare const borderRadius08: string;
74
+ export declare const borderRadius16: string;
75
+ export declare const borderRadius24: string;
76
+ export declare const borderRadiusMax = "999999px";
77
+ export declare const borderRadius: Record<BorderRadiusToken, string>;
package/lib/index.js CHANGED
@@ -184,8 +184,32 @@ const sizes = {
184
184
  const iconSize01 = "1rem";
185
185
  const iconSize02 = "1.25rem";
186
186
  const iconSize = [iconSize01, iconSize02];
187
+ const borderRadius00 = "0px";
188
+ const borderRadius02 = rem(2);
189
+ const borderRadius04 = rem(4);
190
+ const borderRadius08 = rem(8);
191
+ const borderRadius16 = rem(16);
192
+ const borderRadius24 = rem(24);
193
+ const borderRadiusMax = "999999px";
194
+ const borderRadius = {
195
+ "border-radius-00": "0px",
196
+ "border-radius-02": borderRadius02,
197
+ "border-radius-04": borderRadius04,
198
+ "border-radius-08": borderRadius08,
199
+ "border-radius-16": borderRadius16,
200
+ "border-radius-24": borderRadius24,
201
+ "border-radius-max": borderRadiusMax
202
+ };
187
203
  //#endregion
188
204
  exports.baseFontSize = baseFontSize;
205
+ exports.borderRadius = borderRadius;
206
+ exports.borderRadius00 = borderRadius00;
207
+ exports.borderRadius02 = borderRadius02;
208
+ exports.borderRadius04 = borderRadius04;
209
+ exports.borderRadius08 = borderRadius08;
210
+ exports.borderRadius16 = borderRadius16;
211
+ exports.borderRadius24 = borderRadius24;
212
+ exports.borderRadiusMax = borderRadiusMax;
189
213
  exports.breakpoint = breakpoint;
190
214
  exports.breakpointDown = breakpointDown;
191
215
  exports.breakpointUp = breakpointUp;
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.57.0",
4
+ "version": "11.58.0-rc.0",
5
5
  "license": "Apache-2.0",
6
6
  "sideEffects": [
7
7
  "index.scss",
@@ -37,7 +37,7 @@
37
37
  "postinstall": "ibmtelemetry --config=telemetry.yml"
38
38
  },
39
39
  "devDependencies": {
40
- "@carbon/cli": "^11.48.0",
40
+ "@carbon/cli": "^11.49.0-rc.0",
41
41
  "@carbon/cli-reporter": "^10.9.0",
42
42
  "@carbon/scss-generator": "^10.20.0",
43
43
  "@carbon/test-utils": "^10.41.0",
@@ -49,5 +49,5 @@
49
49
  "dependencies": {
50
50
  "@ibm/telemetry-js": "^1.5.0"
51
51
  },
52
- "gitHead": "188d23202ec1092322dee92cf0df9d9958224ae4"
52
+ "gitHead": "e848b98936051ac0026fb83551c91bfe603c589c"
53
53
  }
package/scss/_border-radius.scss ADDED
@@ -0,0 +1,8 @@
1
+ //
2
+ // Copyright IBM Corp. 2026
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/border-radius';
package/scss/generated/_border-radius.scss ADDED
@@ -0,0 +1,55 @@
1
+ // Code generated by @carbon/layout. DO NOT EDIT.
2
+ //
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
+
9
+ /// @type Number
10
+ /// @access public
11
+ /// @group @carbon/layout
12
+ $border-radius-00: 0px !default;
13
+
14
+ /// @type Number
15
+ /// @access public
16
+ /// @group @carbon/layout
17
+ $border-radius-02: 0.125rem !default;
18
+
19
+ /// @type Number
20
+ /// @access public
21
+ /// @group @carbon/layout
22
+ $border-radius-04: 0.25rem !default;
23
+
24
+ /// @type Number
25
+ /// @access public
26
+ /// @group @carbon/layout
27
+ $border-radius-08: 0.5rem !default;
28
+
29
+ /// @type Number
30
+ /// @access public
31
+ /// @group @carbon/layout
32
+ $border-radius-16: 1rem !default;
33
+
34
+ /// @type Number
35
+ /// @access public
36
+ /// @group @carbon/layout
37
+ $border-radius-24: 1.5rem !default;
38
+
39
+ /// @type Number
40
+ /// @access public
41
+ /// @group @carbon/layout
42
+ $border-radius-max: 999999px !default;
43
+
44
+ /// @type Map
45
+ /// @access public
46
+ /// @group @carbon/layout
47
+ $border-radius: (
48
+ border-radius-00: $border-radius-00,
49
+ border-radius-02: $border-radius-02,
50
+ border-radius-04: $border-radius-04,
51
+ border-radius-08: $border-radius-08,
52
+ border-radius-16: $border-radius-16,
53
+ border-radius-24: $border-radius-24,
54
+ border-radius-max: $border-radius-max,
55
+ );
package/src/index.ts CHANGED
@@ -22,6 +22,14 @@ export type SizeName =
22
22
  | 'Large'
23
23
  | 'XLarge'
24
24
  | '2XLarge';
25
+ export type BorderRadiusToken =
26
+ | 'border-radius-00'
27
+ | 'border-radius-02'
28
+ | 'border-radius-04'
29
+ | 'border-radius-08'
30
+ | 'border-radius-16'
31
+ | 'border-radius-24'
32
+ | 'border-radius-max';
25
33
 
26
34
  // Convert
27
35
  // Default, Use with em() and rem() functions
@@ -179,3 +187,21 @@ export const sizes: Record<SizeName, string> = {
179
187
  export const iconSize01 = '1rem';
180
188
  export const iconSize02 = '1.25rem';
181
189
  export const iconSize = [iconSize01, iconSize02];
190
+
191
+ // Border radius
192
+ export const borderRadius00 = '0px';
193
+ export const borderRadius02 = rem(2);
194
+ export const borderRadius04 = rem(4);
195
+ export const borderRadius08 = rem(8);
196
+ export const borderRadius16 = rem(16);
197
+ export const borderRadius24 = rem(24);
198
+ export const borderRadiusMax = '999999px';
199
+ export const borderRadius: Record<BorderRadiusToken, string> = {
200
+ 'border-radius-00': borderRadius00,
201
+ 'border-radius-02': borderRadius02,
202
+ 'border-radius-04': borderRadius04,
203
+ 'border-radius-08': borderRadius08,
204
+ 'border-radius-16': borderRadius16,
205
+ 'border-radius-24': borderRadius24,
206
+ 'border-radius-max': borderRadiusMax,
207
+ };
package/umd/index.js CHANGED
@@ -187,8 +187,32 @@
187
187
  const iconSize01 = "1rem";
188
188
  const iconSize02 = "1.25rem";
189
189
  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
+ const borderRadius = {
198
+ "border-radius-00": "0px",
199
+ "border-radius-02": borderRadius02,
200
+ "border-radius-04": borderRadius04,
201
+ "border-radius-08": borderRadius08,
202
+ "border-radius-16": borderRadius16,
203
+ "border-radius-24": borderRadius24,
204
+ "border-radius-max": borderRadiusMax
205
+ };
190
206
  //#endregion
191
207
  exports.baseFontSize = baseFontSize;
208
+ exports.borderRadius = borderRadius;
209
+ exports.borderRadius00 = borderRadius00;
210
+ exports.borderRadius02 = borderRadius02;
211
+ exports.borderRadius04 = borderRadius04;
212
+ exports.borderRadius08 = borderRadius08;
213
+ exports.borderRadius16 = borderRadius16;
214
+ exports.borderRadius24 = borderRadius24;
215
+ exports.borderRadiusMax = borderRadiusMax;
192
216
  exports.breakpoint = breakpoint;
193
217
  exports.breakpointDown = breakpointDown;
194
218
  exports.breakpointUp = breakpointUp;