@carbon/layout
Version:
Layout helpers for digital and software products using the Carbon Design System
242 lines (241 loc) • 5.36 kB
JavaScript
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
//#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 ` (min-width: ${breakpoints[name].width})`;
};
const breakpointDown = (name) => {
return ` (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
exports.baseFontSize = baseFontSize;
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.sizeLarge = sizeLarge;
exports.sizeMedium = sizeMedium;
exports.sizeSmall = sizeSmall;
exports.sizeXLarge = sizeXLarge;
exports.sizeXSmall = sizeXSmall;
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;