@carbon/layout/es/index.js

Layout helpers for digital and software products using the Carbon Design System

//#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
/**
* 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 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 spacing01 = miniUnits(.25);
const spacing02 = miniUnits(.5);
const spacing03 = miniUnits(1);
const spacing04 = miniUnits(1.5);
const spacing05 = miniUnits(2);
const spacing06 = miniUnits(3);
const spacing07 = miniUnits(4);
const spacing08 = miniUnits(5);
const spacing09 = miniUnits(6);
const spacing10 = miniUnits(8);
const spacing11 = miniUnits(10);
const spacing12 = miniUnits(12);
const spacing13 = miniUnits(20);
const spacing = [
	spacing01,
	spacing02,
	spacing03,
	spacing04,
	spacing05,
	spacing06,
	spacing07,
	spacing08,
	spacing09,
	spacing10,
	spacing11,
	spacing12,
	spacing13
];
const fluidSpacing01 = 0;
const fluidSpacing02 = "2vw";
const fluidSpacing03 = "5vw";
const fluidSpacing04 = "10vw";
const fluidSpacing = [
	0,
	"2vw",
	"5vw",
	fluidSpacing04
];
const layout01 = miniUnits(2);
const layout02 = miniUnits(3);
const layout03 = miniUnits(4);
const layout04 = miniUnits(6);
const layout05 = miniUnits(8);
const layout06 = miniUnits(12);
const layout07 = miniUnits(20);
const layout = [
	layout01,
	layout02,
	layout03,
	layout04,
	layout05,
	layout06,
	layout07
];
const container01 = miniUnits(3);
const container02 = miniUnits(4);
const container03 = miniUnits(5);
const container04 = miniUnits(6);
const container05 = miniUnits(8);
const container = [
	container01,
	container02,
	container03,
	container04,
	container05
];
const sizeXSmall = rem(24);
const sizeSmall = rem(32);
const sizeMedium = rem(40);
const sizeLarge = rem(48);
const sizeXLarge = rem(64);
const size2XLarge = rem(80);
const sizes = {
	XSmall: sizeXSmall,
	Small: sizeSmall,
	Medium: sizeMedium,
	Large: sizeLarge,
	XLarge: sizeXLarge,
	"2XLarge": size2XLarge
};
const iconSize01 = "1rem";
const iconSize02 = "1.25rem";
const iconSize = [iconSize01, iconSize02];
//#endregion
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 };