@carbon/layout 12.0.0-alpha.1 → 12.0.0-alpha.2

package/es/index.js

@@ -0,0 +1,205 @@
+//#region js/generated/layout-tokens.js
+const spacing01 = "0.125rem";
+const spacing02 = "0.25rem";
+const spacing03 = "0.5rem";
+const spacing04 = "0.75rem";
+const spacing05 = "1rem";
+const spacing06 = "1.5rem";
+const spacing07 = "2rem";
+const spacing08 = "2.5rem";
+const spacing09 = "3rem";
+const spacing10 = "4rem";
+const spacing11 = "5rem";
+const spacing12 = "6rem";
+const spacing13 = "10rem";
+const fluidSpacing01 = 0;
+const fluidSpacing02 = "2vw";
+const fluidSpacing03 = "5vw";
+const fluidSpacing04 = "10vw";
+const container01 = "1.5rem";
+const container02 = "2rem";
+const container03 = "2.5rem";
+const container04 = "3rem";
+const container05 = "4rem";
+const sizeXs = "1.5rem";
+const sizeSm = "2rem";
+const sizeMd = "2.5rem";
+const sizeLg = "3rem";
+const sizeXl = "4rem";
+const size2xl = "5rem";
+const iconSize01 = "1rem";
+const iconSize02 = "1.25rem";
+const borderRadius00 = "0px";
+const borderRadius02 = "0.125rem";
+const borderRadius04 = "0.25rem";
+const borderRadius08 = "0.5rem";
+const borderRadius16 = "1rem";
+const borderRadius24 = "1.5rem";
+const borderRadiusMax = "999999px";
+const layout01 = "1rem";
+const layout02 = "1.5rem";
+const layout03 = "2rem";
+const layout04 = "3rem";
+const layout05 = "4rem";
+const layout06 = "6rem";
+const layout07 = "10rem";
+//#endregion
+//#region src/tokens.ts
+/**
+* Copyright IBM Corp. 2018, 2026
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+const unstable_tokens = [
+	"spacing01",
+	"spacing02",
+	"spacing03",
+	"spacing04",
+	"spacing05",
+	"spacing06",
+	"spacing07",
+	"spacing08",
+	"spacing09",
+	"spacing10",
+	"spacing11",
+	"spacing12",
+	"spacing13",
+	"fluidSpacing01",
+	"fluidSpacing02",
+	"fluidSpacing03",
+	"fluidSpacing04",
+	"container01",
+	"container02",
+	"container03",
+	"container04",
+	"container05",
+	"sizeXSmall",
+	"sizeSmall",
+	"sizeMedium",
+	"sizeLarge",
+	"sizeXLarge",
+	"size2XLarge",
+	"iconSize01",
+	"iconSize02",
+	"layout01",
+	"layout02",
+	"layout03",
+	"layout04",
+	"layout05",
+	"layout06",
+	"layout07"
+];
+//#endregion
+//#region src/index.ts
+const baseFontSize = 16;
+const rem = (px) => {
+	return `${px / 16}rem`;
+};
+const em = (px) => {
+	return `${px / 16}em`;
+};
+const px = (value) => {
+	return `${value}px`;
+};
+const breakpoints = {
+	sm: {
+		width: rem(320),
+		columns: 4,
+		margin: "0"
+	},
+	md: {
+		width: rem(672),
+		columns: 8,
+		margin: rem(16)
+	},
+	lg: {
+		width: rem(1056),
+		columns: 16,
+		margin: rem(16)
+	},
+	xlg: {
+		width: rem(1312),
+		columns: 16,
+		margin: rem(16)
+	},
+	max: {
+		width: rem(1584),
+		columns: 16,
+		margin: rem(24)
+	}
+};
+const breakpointUp = (name) => {
+	return `@media (min-width: ${breakpoints[name].width})`;
+};
+const breakpointDown = (name) => {
+	return `@media (max-width: ${breakpoints[name].width})`;
+};
+const breakpoint = breakpointUp;
+const miniUnit = 8;
+const miniUnits = (count) => {
+	return rem(8 * count);
+};
+const spacing = [
+	spacing01,
+	spacing02,
+	spacing03,
+	spacing04,
+	spacing05,
+	spacing06,
+	spacing07,
+	spacing08,
+	spacing09,
+	spacing10,
+	spacing11,
+	spacing12,
+	spacing13
+];
+const fluidSpacing = [
+	0,
+	"2vw",
+	"5vw",
+	fluidSpacing04
+];
+const layout = [
+	layout01,
+	layout02,
+	layout03,
+	layout04,
+	layout05,
+	layout06,
+	layout07
+];
+const container = [
+	container01,
+	container02,
+	container03,
+	container04,
+	container05
+];
+const sizeXSmall = sizeXs;
+const sizeSmall = sizeSm;
+const sizeMedium = sizeMd;
+const sizeLarge = sizeLg;
+const sizeXLarge = sizeXl;
+const size2XLarge = size2xl;
+const sizes = {
+	XSmall: sizeXSmall,
+	Small: sizeSmall,
+	Medium: sizeMedium,
+	Large: sizeLarge,
+	XLarge: sizeXLarge,
+	"2XLarge": size2XLarge
+};
+const iconSize = [iconSize01, iconSize02];
+const borderRadius = {
+	"border-radius-00": "0px",
+	"border-radius-02": borderRadius02,
+	"border-radius-04": borderRadius04,
+	"border-radius-08": borderRadius08,
+	"border-radius-16": borderRadius16,
+	"border-radius-24": borderRadius24,
+	"border-radius-max": borderRadiusMax
+};
+//#endregion
+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, size2xl, sizeLarge, sizeLg, sizeMd, sizeMedium, sizeSm, sizeSmall, sizeXLarge, sizeXSmall, sizeXl, sizeXs, sizes, spacing, spacing01, spacing02, spacing03, spacing04, spacing05, spacing06, spacing07, spacing08, spacing09, spacing10, spacing11, spacing12, spacing13, unstable_tokens };

package/lib/__tests__/tokens-test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/layout",
   "description": "Layout helpers for digital and software products using the Carbon Design System",
-  "version": "12.0.0-alpha.1",
+  "version": "12.0.0-alpha.2",
   "license": "Apache-2.0",
   "sideEffects": [
     "index.scss",
@@ -17,6 +17,15 @@
     "directory": "packages/layout"
   },
   "bugs": "https://github.com/carbon-design-system/carbon/issues",
+  "files": [
+    "es",
+    "js/generated",
+    "lib",
+    "scss",
+    "umd",
+    "index.scss",
+    "telemetry.yml"
+  ],
   "keywords": [
     "ibm",
     "elements",
@@ -27,7 +36,7 @@
     "react"
   ],
   "publishConfig": {
-   "access": "public"
+    "access": "public"
   },
   "scripts": {
     "build:types": "tsc -p tsconfig.types.json",

package/umd/index.js

@@ -0,0 +1,277 @@
+(function(global, factory) {
+	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 = {}));
+})(this, function(exports) {
+	Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+	//#region js/generated/layout-tokens.js
+	const spacing01 = "0.125rem";
+	const spacing02 = "0.25rem";
+	const spacing03 = "0.5rem";
+	const spacing04 = "0.75rem";
+	const spacing05 = "1rem";
+	const spacing06 = "1.5rem";
+	const spacing07 = "2rem";
+	const spacing08 = "2.5rem";
+	const spacing09 = "3rem";
+	const spacing10 = "4rem";
+	const spacing11 = "5rem";
+	const spacing12 = "6rem";
+	const spacing13 = "10rem";
+	const fluidSpacing01 = 0;
+	const fluidSpacing02 = "2vw";
+	const fluidSpacing03 = "5vw";
+	const fluidSpacing04 = "10vw";
+	const container01 = "1.5rem";
+	const container02 = "2rem";
+	const container03 = "2.5rem";
+	const container04 = "3rem";
+	const container05 = "4rem";
+	const sizeXs = "1.5rem";
+	const sizeSm = "2rem";
+	const sizeMd = "2.5rem";
+	const sizeLg = "3rem";
+	const sizeXl = "4rem";
+	const size2xl = "5rem";
+	const iconSize01 = "1rem";
+	const iconSize02 = "1.25rem";
+	const borderRadius00 = "0px";
+	const borderRadius02 = "0.125rem";
+	const borderRadius04 = "0.25rem";
+	const borderRadius08 = "0.5rem";
+	const borderRadius16 = "1rem";
+	const borderRadius24 = "1.5rem";
+	const borderRadiusMax = "999999px";
+	const layout01 = "1rem";
+	const layout02 = "1.5rem";
+	const layout03 = "2rem";
+	const layout04 = "3rem";
+	const layout05 = "4rem";
+	const layout06 = "6rem";
+	const layout07 = "10rem";
+	//#endregion
+	//#region src/tokens.ts
+	/**
+	* Copyright IBM Corp. 2018, 2026
+	*
+	* This source code is licensed under the Apache-2.0 license found in the
+	* LICENSE file in the root directory of this source tree.
+	*/
+	const unstable_tokens = [
+		"spacing01",
+		"spacing02",
+		"spacing03",
+		"spacing04",
+		"spacing05",
+		"spacing06",
+		"spacing07",
+		"spacing08",
+		"spacing09",
+		"spacing10",
+		"spacing11",
+		"spacing12",
+		"spacing13",
+		"fluidSpacing01",
+		"fluidSpacing02",
+		"fluidSpacing03",
+		"fluidSpacing04",
+		"container01",
+		"container02",
+		"container03",
+		"container04",
+		"container05",
+		"sizeXSmall",
+		"sizeSmall",
+		"sizeMedium",
+		"sizeLarge",
+		"sizeXLarge",
+		"size2XLarge",
+		"iconSize01",
+		"iconSize02",
+		"layout01",
+		"layout02",
+		"layout03",
+		"layout04",
+		"layout05",
+		"layout06",
+		"layout07"
+	];
+	//#endregion
+	//#region src/index.ts
+	const baseFontSize = 16;
+	const rem = (px) => {
+		return `${px / 16}rem`;
+	};
+	const em = (px) => {
+		return `${px / 16}em`;
+	};
+	const px = (value) => {
+		return `${value}px`;
+	};
+	const breakpoints = {
+		sm: {
+			width: rem(320),
+			columns: 4,
+			margin: "0"
+		},
+		md: {
+			width: rem(672),
+			columns: 8,
+			margin: rem(16)
+		},
+		lg: {
+			width: rem(1056),
+			columns: 16,
+			margin: rem(16)
+		},
+		xlg: {
+			width: rem(1312),
+			columns: 16,
+			margin: rem(16)
+		},
+		max: {
+			width: rem(1584),
+			columns: 16,
+			margin: rem(24)
+		}
+	};
+	const breakpointUp = (name) => {
+		return `@media (min-width: ${breakpoints[name].width})`;
+	};
+	const breakpointDown = (name) => {
+		return `@media (max-width: ${breakpoints[name].width})`;
+	};
+	const breakpoint = breakpointUp;
+	const miniUnit = 8;
+	const miniUnits = (count) => {
+		return rem(8 * count);
+	};
+	const spacing = [
+		spacing01,
+		spacing02,
+		spacing03,
+		spacing04,
+		spacing05,
+		spacing06,
+		spacing07,
+		spacing08,
+		spacing09,
+		spacing10,
+		spacing11,
+		spacing12,
+		spacing13
+	];
+	const fluidSpacing = [
+		0,
+		"2vw",
+		"5vw",
+		fluidSpacing04
+	];
+	const layout = [
+		layout01,
+		layout02,
+		layout03,
+		layout04,
+		layout05,
+		layout06,
+		layout07
+	];
+	const container = [
+		container01,
+		container02,
+		container03,
+		container04,
+		container05
+	];
+	const sizeXSmall = sizeXs;
+	const sizeSmall = sizeSm;
+	const sizeMedium = sizeMd;
+	const sizeLarge = sizeLg;
+	const sizeXLarge = sizeXl;
+	const size2XLarge = size2xl;
+	const sizes = {
+		XSmall: sizeXSmall,
+		Small: sizeSmall,
+		Medium: sizeMedium,
+		Large: sizeLarge,
+		XLarge: sizeXLarge,
+		"2XLarge": size2XLarge
+	};
+	const iconSize = [iconSize01, iconSize02];
+	const borderRadius = {
+		"border-radius-00": "0px",
+		"border-radius-02": borderRadius02,
+		"border-radius-04": borderRadius04,
+		"border-radius-08": borderRadius08,
+		"border-radius-16": borderRadius16,
+		"border-radius-24": borderRadius24,
+		"border-radius-max": borderRadiusMax
+	};
+	//#endregion
+	exports.baseFontSize = baseFontSize;
+	exports.borderRadius = borderRadius;
+	exports.borderRadius00 = borderRadius00;
+	exports.borderRadius02 = borderRadius02;
+	exports.borderRadius04 = borderRadius04;
+	exports.borderRadius08 = borderRadius08;
+	exports.borderRadius16 = borderRadius16;
+	exports.borderRadius24 = borderRadius24;
+	exports.borderRadiusMax = borderRadiusMax;
+	exports.breakpoint = breakpoint;
+	exports.breakpointDown = breakpointDown;
+	exports.breakpointUp = breakpointUp;
+	exports.breakpoints = breakpoints;
+	exports.container = container;
+	exports.container01 = container01;
+	exports.container02 = container02;
+	exports.container03 = container03;
+	exports.container04 = container04;
+	exports.container05 = container05;
+	exports.em = em;
+	exports.fluidSpacing = fluidSpacing;
+	exports.fluidSpacing01 = fluidSpacing01;
+	exports.fluidSpacing02 = fluidSpacing02;
+	exports.fluidSpacing03 = fluidSpacing03;
+	exports.fluidSpacing04 = fluidSpacing04;
+	exports.iconSize = iconSize;
+	exports.iconSize01 = iconSize01;
+	exports.iconSize02 = iconSize02;
+	exports.layout = layout;
+	exports.layout01 = layout01;
+	exports.layout02 = layout02;
+	exports.layout03 = layout03;
+	exports.layout04 = layout04;
+	exports.layout05 = layout05;
+	exports.layout06 = layout06;
+	exports.layout07 = layout07;
+	exports.miniUnit = miniUnit;
+	exports.miniUnits = miniUnits;
+	exports.px = px;
+	exports.rem = rem;
+	exports.size2XLarge = size2XLarge;
+	exports.size2xl = size2xl;
+	exports.sizeLarge = sizeLarge;
+	exports.sizeLg = sizeLg;
+	exports.sizeMd = sizeMd;
+	exports.sizeMedium = sizeMedium;
+	exports.sizeSm = sizeSm;
+	exports.sizeSmall = sizeSmall;
+	exports.sizeXLarge = sizeXLarge;
+	exports.sizeXSmall = sizeXSmall;
+	exports.sizeXl = sizeXl;
+	exports.sizeXs = sizeXs;
+	exports.sizes = sizes;
+	exports.spacing = spacing;
+	exports.spacing01 = spacing01;
+	exports.spacing02 = spacing02;
+	exports.spacing03 = spacing03;
+	exports.spacing04 = spacing04;
+	exports.spacing05 = spacing05;
+	exports.spacing06 = spacing06;
+	exports.spacing07 = spacing07;
+	exports.spacing08 = spacing08;
+	exports.spacing09 = spacing09;
+	exports.spacing10 = spacing10;
+	exports.spacing11 = spacing11;
+	exports.spacing12 = spacing12;
+	exports.spacing13 = spacing13;
+	exports.unstable_tokens = unstable_tokens;
+});

package/docs/sass.md

@@ -1,65 +0,0 @@
-# Sass
-
-> Sass documentation for `@carbon/layout`
-
-## Usage
-
-The `@carbon/layout` package provides spacing tokens and conversion utilities
-for the Carbon Design System. You can access these tokens and helpers by writing
-the following:
-
-```scss
-@use '@carbon/layout';
-
-.selector {
-  margin-bottom: layout.$spacing-05;
-  width: layout.rem(24px);
-  height: layout.rem(24px);
-}
-```
-
-## API
-
-| Export               | Description | !default |
-| :------------------- | :---------- | :------- |
-| `$spacing-01`        |             | ✅       |
-| `$spacing-02`        |             | ✅       |
-| `$spacing-03`        |             | ✅       |
-| `$spacing-04`        |             | ✅       |
-| `$spacing-05`        |             | ✅       |
-| `$spacing-06`        |             | ✅       |
-| `$spacing-07`        |             | ✅       |
-| `$spacing-08`        |             | ✅       |
-| `$spacing-09`        |             | ✅       |
-| `$spacing-10`        |             | ✅       |
-| `$spacing-11`        |             | ✅       |
-| `$spacing-12`        |             | ✅       |
-| `$spacing-13`        |             | ✅       |
-| `$spacing `          |             |          |
-| `$fluid-spacing-01`  |             | ✅       |
-| `$fluid-spacing-02`  |             | ✅       |
-| `$fluid-spacing-03`  |             | ✅       |
-| `$fluid-spacing-04`  |             | ✅       |
-| `$fluid-spacing `    |             |          |
-| `$border-radius-00`  |             | ✅       |
-| `$border-radius-02`  |             | ✅       |
-| `$border-radius-04`  |             | ✅       |
-| `$border-radius-08`  |             | ✅       |
-| `$border-radius-16`  |             | ✅       |
-| `$border-radius-24`  |             | ✅       |
-| `$border-radius-max` |             | ✅       |
-| `@function em`       |             |          |
-| `@function rem`      |             |          |
-| `$base-font-size`    |             | ✅       |
-
-### Configuration
-
-You can configure parts of the `@carbon/layout` package that are `!default` with
-Sass Modules. For example, you can change the `$base-font-size` by writing the
-following:
-
-```scss
-@use '@carbon/layout' with (
-  $base-font-size: 18px
-);
-```