@carbon/type
Version:
Typography for digital and software products using the Carbon Design System
744 lines (743 loc) • 18.9 kB
JavaScript
import { baseFontSize, breakpoint, breakpoints, px, rem } from "@carbon/layout";
//#region \0rolldown/runtime.js
var __defProp = Object.defineProperty;
var __exportAll = (all, no_symbols) => {
let target = {};
for (var name in all) __defProp(target, name, {
get: all[name],
enumerable: true
});
if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
return target;
};
//#endregion
//#region src/fluid.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 breakpointNames = Object.keys(breakpoints);
const next = (name) => {
return breakpointNames[breakpointNames.indexOf(name) + 1];
};
const fluid = (selector) => {
const { breakpoints: fluidBreakpoints, ...baseStyles } = selector;
const styles = { ...baseStyles };
if (typeof fluidBreakpoints !== "object" || fluidBreakpoints === null) return styles;
const fluidBreakpointNames = Object.keys(fluidBreakpoints);
if (fluidBreakpointNames.length === 0) return styles;
styles.fontSize = fluidTypeSize(styles, "sm", fluidBreakpoints);
fluidBreakpointNames.forEach((name) => {
styles[breakpoint(name)] = {
...fluidBreakpoints[name],
fontSize: fluidTypeSize(styles, name, fluidBreakpoints)
};
});
return styles;
};
const fluidTypeSize = (defaultStyles, fluidBreakpointName, fluidBreakpoints) => {
const breakpoint = breakpoints[fluidBreakpointName];
const fluidBreakpoint = fluidBreakpointName === "sm" ? defaultStyles : fluidBreakpoints[fluidBreakpointName];
const defaultFontSize = defaultStyles.fontSize ?? "";
const breakpointFontSize = fluidBreakpoint?.fontSize;
let maxFontSize = defaultFontSize;
let minFontSize = defaultFontSize;
if (breakpointFontSize) minFontSize = breakpointFontSize;
let maxViewportWidth = breakpoint.width;
const minViewportWidth = breakpoint.width;
let nextBreakpointAvailable = next(fluidBreakpointName);
let nextFluidBreakpointName = null;
while (nextBreakpointAvailable) {
if (fluidBreakpoints[nextBreakpointAvailable]) {
nextFluidBreakpointName = nextBreakpointAvailable;
break;
}
nextBreakpointAvailable = next(nextBreakpointAvailable);
}
if (nextFluidBreakpointName) {
const nextFluidBreakpoint = breakpoints[nextFluidBreakpointName];
const nextFontSize = fluidBreakpoints[nextFluidBreakpointName]?.fontSize;
if (!nextFontSize) return minFontSize;
maxFontSize = nextFontSize;
maxViewportWidth = nextFluidBreakpoint.width;
return `calc(${minFontSize} + ${subtract(maxFontSize, minFontSize)} * ((100vw - ${minViewportWidth}) / ${subtract(maxViewportWidth, minViewportWidth)}))`;
}
return minFontSize;
};
const subtract = (a, b) => {
return parseFloat(String(a)) - parseFloat(String(b));
};
//#endregion
//#region src/fontFamily.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 fontFamilies = {
mono: "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace",
sans: "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif",
sansCondensed: "'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif",
sansHebrew: "'IBM Plex Sans Hebrew', 'Helvetica Hebrew', 'Arial Hebrew', sans-serif",
serif: "'IBM Plex Serif', 'Georgia', Times, serif"
};
const fontFamily = (name) => {
if (!(name in fontFamilies)) throw new Error(`Unable to find font family: \`${name}\`. Expected one of: [${Object.keys(fontFamilies).join(", ")}]`);
return { fontFamily: fontFamilies[name] };
};
//#endregion
//#region src/fontWeight.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 fontWeights = {
light: 300,
regular: 400,
semibold: 600
};
const fontWeight = (weight) => {
if (!(weight in fontWeights)) throw new Error(`Unable to find font weight: \`${weight}\`. Expected one of: [${Object.keys(fontWeights).join(", ")}]`);
return { fontWeight: fontWeights[weight] };
};
//#endregion
//#region src/print.ts
const print = (block) => {
return Object.keys(block).reduce((acc, key, index) => {
if (key === "breakpoints") return acc;
const property = `${paramCase(key)}: ${block[key]};`;
if (index === 0) return property;
return acc + "\n" + property;
}, "");
};
const paramCase = (string) => {
let result = "";
for (let i = 0; i < string.length; i++) {
const character = string[i];
if (character === character.toUpperCase()) {
result += "-" + character.toLowerCase();
continue;
}
result += character;
}
return result;
};
//#endregion
//#region src/reset.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 reset = {
html: { fontSize: px(baseFontSize) },
body: {
fontFamily: fontFamilies.sans,
fontWeight: fontWeights.regular,
textRendering: "optimizeLegibility",
"-webkit-font-smoothing": "antialiased",
"-moz-osx-font-smoothing": "grayscale"
},
strong: { fontWeight: fontWeights.semibold },
code: { fontFamily: fontFamilies.mono }
};
//#endregion
//#region src/scale.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 getTypeSize = (step) => {
if (step <= 1) return 12;
return getTypeSize(step - 1) + Math.floor((step - 2) / 4 + 1) * 2;
};
/**
* Default type scale with 23 steps.
*
* Generated with:
* ```ts
* Array.from({ length: 23 }, (_, i) => getTypeSize(i + 1))
* ```
*/
const scale = [
12,
14,
16,
18,
20,
24,
28,
32,
36,
42,
48,
54,
60,
68,
76,
84,
92,
102,
112,
122,
132,
144,
156
];
//#endregion
//#region src/styles.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.
*/
var styles_exports = /* @__PURE__ */ __exportAll({
body01: () => body01,
body02: () => body02,
bodyCompact01: () => bodyCompact01,
bodyCompact02: () => bodyCompact02,
bodyLong01: () => bodyLong01,
bodyLong02: () => bodyLong02,
bodyShort01: () => bodyShort01,
bodyShort02: () => bodyShort02,
caption01: () => caption01,
caption02: () => caption02,
code01: () => code01,
code02: () => code02,
display01: () => display01,
display02: () => display02,
display03: () => display03,
display04: () => display04,
expressiveHeading01: () => expressiveHeading01,
expressiveHeading02: () => expressiveHeading02,
expressiveHeading03: () => expressiveHeading03,
expressiveHeading04: () => expressiveHeading04,
expressiveHeading05: () => expressiveHeading05,
expressiveHeading06: () => expressiveHeading06,
expressiveParagraph01: () => expressiveParagraph01,
fluidDisplay01: () => fluidDisplay01,
fluidDisplay02: () => fluidDisplay02,
fluidDisplay03: () => fluidDisplay03,
fluidDisplay04: () => fluidDisplay04,
fluidHeading03: () => fluidHeading03,
fluidHeading04: () => fluidHeading04,
fluidHeading05: () => fluidHeading05,
fluidHeading06: () => fluidHeading06,
fluidParagraph01: () => fluidParagraph01,
fluidQuotation01: () => fluidQuotation01,
fluidQuotation02: () => fluidQuotation02,
heading01: () => heading01,
heading02: () => heading02,
heading03: () => heading03,
heading04: () => heading04,
heading05: () => heading05,
heading06: () => heading06,
heading07: () => heading07,
headingCompact01: () => headingCompact01,
headingCompact02: () => headingCompact02,
helperText01: () => helperText01,
helperText02: () => helperText02,
label01: () => label01,
label02: () => label02,
legal01: () => legal01,
legal02: () => legal02,
productiveHeading01: () => productiveHeading01,
productiveHeading02: () => productiveHeading02,
productiveHeading03: () => productiveHeading03,
productiveHeading04: () => productiveHeading04,
productiveHeading05: () => productiveHeading05,
productiveHeading06: () => productiveHeading06,
productiveHeading07: () => productiveHeading07,
quotation01: () => quotation01,
quotation02: () => quotation02
});
const caption01 = {
fontSize: rem(scale[0]),
fontWeight: fontWeights.regular,
lineHeight: 1.33333,
letterSpacing: px(.32)
};
const caption02 = {
fontSize: rem(scale[1]),
fontWeight: fontWeights.regular,
lineHeight: 1.28572,
letterSpacing: px(.32)
};
const label01 = {
fontSize: rem(scale[0]),
fontWeight: fontWeights.regular,
lineHeight: 1.33333,
letterSpacing: px(.32)
};
const label02 = {
fontSize: rem(scale[1]),
fontWeight: fontWeights.regular,
lineHeight: 1.28572,
letterSpacing: px(.16)
};
const helperText01 = {
fontSize: rem(scale[0]),
lineHeight: 1.33333,
letterSpacing: px(.32)
};
const helperText02 = {
fontSize: rem(scale[1]),
lineHeight: 1.28572,
letterSpacing: px(.16)
};
const bodyShort01 = {
fontSize: rem(scale[1]),
fontWeight: fontWeights.regular,
lineHeight: 1.28572,
letterSpacing: px(.16)
};
const bodyLong01 = {
fontSize: rem(scale[1]),
fontWeight: fontWeights.regular,
lineHeight: 1.42857,
letterSpacing: px(.16)
};
const bodyShort02 = {
fontSize: rem(scale[2]),
fontWeight: fontWeights.regular,
lineHeight: 1.375,
letterSpacing: 0
};
const bodyLong02 = {
fontSize: rem(scale[2]),
fontWeight: fontWeights.regular,
lineHeight: 1.5,
letterSpacing: 0
};
const code01 = {
fontFamily: fontFamilies.mono,
fontSize: rem(scale[0]),
fontWeight: fontWeights.regular,
lineHeight: 1.33333,
letterSpacing: px(.32)
};
const code02 = {
fontFamily: fontFamilies.mono,
fontSize: rem(scale[1]),
fontWeight: fontWeights.regular,
lineHeight: 1.42857,
letterSpacing: px(.32)
};
const heading01 = {
fontSize: rem(scale[1]),
fontWeight: fontWeights.semibold,
lineHeight: 1.42857,
letterSpacing: px(.16)
};
const productiveHeading01 = {
fontSize: rem(scale[1]),
fontWeight: fontWeights.semibold,
lineHeight: 1.28572,
letterSpacing: px(.16)
};
const heading02 = {
fontSize: rem(scale[2]),
fontWeight: fontWeights.semibold,
lineHeight: 1.5,
letterSpacing: 0
};
const productiveHeading02 = {
fontSize: rem(scale[2]),
fontWeight: fontWeights.semibold,
lineHeight: 1.375,
letterSpacing: 0
};
const productiveHeading03 = {
fontSize: rem(scale[4]),
fontWeight: fontWeights.regular,
lineHeight: 1.4,
letterSpacing: 0
};
const productiveHeading04 = {
fontSize: rem(scale[6]),
fontWeight: fontWeights.regular,
lineHeight: 1.28572,
letterSpacing: 0
};
const productiveHeading05 = {
fontSize: rem(scale[7]),
fontWeight: fontWeights.regular,
lineHeight: 1.25,
letterSpacing: 0
};
const productiveHeading06 = {
fontSize: rem(scale[9]),
fontWeight: fontWeights.light,
lineHeight: 1.199,
letterSpacing: 0
};
const productiveHeading07 = {
fontSize: rem(scale[11]),
fontWeight: fontWeights.light,
lineHeight: 1.199,
letterSpacing: 0
};
const expressiveHeading01 = {
...heading01,
lineHeight: 1.25
};
const expressiveHeading02 = {
...heading02,
lineHeight: 1.5
};
const expressiveHeading03 = {
fontSize: rem(scale[4]),
fontWeight: fontWeights.regular,
lineHeight: 1.4,
letterSpacing: 0,
breakpoints: {
xlg: {
fontSize: rem(scale[4]),
lineHeight: 1.4
},
max: {
fontSize: rem(scale[5]),
lineHeight: 1.334
}
}
};
const expressiveHeading04 = {
fontSize: rem(scale[6]),
fontWeight: fontWeights.regular,
lineHeight: 1.28572,
letterSpacing: 0,
breakpoints: {
xlg: {
fontSize: rem(scale[7]),
fontWeight: fontWeights.regular,
lineHeight: 1.25
},
max: {
fontSize: rem(scale[7]),
fontWeight: fontWeights.regular
}
}
};
const expressiveHeading05 = {
fontSize: rem(scale[7]),
fontWeight: fontWeights.regular,
lineHeight: 1.25,
letterSpacing: 0,
breakpoints: {
md: {
fontSize: rem(scale[8]),
fontWeight: fontWeights.light,
lineHeight: 1.22,
letterSpacing: 0
},
lg: {
fontSize: rem(scale[9]),
lineHeight: 1.19,
letterSpacing: 0
},
xlg: {
fontSize: rem(scale[10]),
lineHeight: 1.17,
letterSpacing: 0
},
max: {
fontSize: rem(scale[12]),
letterSpacing: 0
}
}
};
const expressiveHeading06 = {
fontSize: rem(scale[7]),
fontWeight: fontWeights.semibold,
lineHeight: 1.25,
letterSpacing: 0,
breakpoints: {
md: {
fontSize: rem(scale[8]),
fontWeight: fontWeights.semibold,
lineHeight: 1.22,
letterSpacing: 0
},
lg: {
fontSize: rem(scale[9]),
fontWeight: fontWeights.semibold,
lineHeight: 1.19,
letterSpacing: 0
},
xlg: {
fontSize: rem(scale[10]),
fontWeight: fontWeights.semibold,
lineHeight: 1.17,
letterSpacing: 0
},
max: {
fontSize: rem(scale[12]),
fontWeight: fontWeights.semibold,
letterSpacing: 0
}
}
};
const expressiveParagraph01 = {
fontSize: rem(scale[5]),
fontWeight: fontWeights.light,
lineHeight: 1.334,
letterSpacing: 0,
breakpoints: {
lg: {
fontSize: rem(scale[6]),
lineHeight: 1.28572
},
max: {
fontSize: rem(scale[7]),
lineHeight: 1.25
}
}
};
const quotation01 = {
fontFamily: fontFamilies.serif,
fontSize: rem(scale[4]),
fontWeight: fontWeights.regular,
lineHeight: 1.3,
letterSpacing: 0,
breakpoints: {
md: {
fontSize: rem(scale[4]),
fontWeight: fontWeights.regular,
letterSpacing: 0
},
lg: {
fontSize: rem(scale[5]),
fontWeight: fontWeights.regular,
lineHeight: 1.334,
letterSpacing: 0
},
xlg: {
fontSize: rem(scale[6]),
fontWeight: fontWeights.regular,
lineHeight: 1.28572,
letterSpacing: 0
},
max: {
fontSize: rem(scale[7]),
fontWeight: fontWeights.regular,
lineHeight: 1.25,
letterSpacing: 0
}
}
};
const quotation02 = {
fontFamily: fontFamilies.serif,
fontSize: rem(scale[7]),
fontWeight: fontWeights.light,
lineHeight: 1.25,
letterSpacing: 0,
breakpoints: {
md: {
fontSize: rem(scale[8]),
lineHeight: 1.22
},
lg: {
fontSize: rem(scale[9]),
lineHeight: 1.19
},
xlg: {
fontSize: rem(scale[10]),
lineHeight: 1.17
},
max: { fontSize: rem(scale[12]) }
}
};
const display01 = {
fontSize: rem(scale[9]),
fontWeight: fontWeights.light,
lineHeight: 1.19,
letterSpacing: 0,
breakpoints: {
md: { fontSize: rem(scale[9]) },
lg: { fontSize: rem(scale[11]) },
xlg: {
fontSize: rem(scale[12]),
lineHeight: 1.17
},
max: {
fontSize: rem(scale[14]),
lineHeight: 1.13
}
}
};
const display02 = {
fontSize: rem(scale[9]),
fontWeight: fontWeights.semibold,
lineHeight: 1.19,
letterSpacing: 0,
breakpoints: {
md: { fontSize: rem(scale[9]) },
lg: { fontSize: rem(scale[11]) },
xlg: {
fontSize: rem(scale[12]),
lineHeight: 1.16
},
max: {
fontSize: rem(scale[14]),
lineHeight: 1.13
}
}
};
const display03 = {
fontSize: rem(scale[9]),
fontWeight: fontWeights.light,
lineHeight: 1.19,
letterSpacing: 0,
breakpoints: {
md: {
fontSize: rem(scale[11]),
lineHeight: 1.18
},
lg: {
fontSize: rem(scale[12]),
lineHeight: 1.16,
letterSpacing: px(-.64)
},
xlg: {
fontSize: rem(scale[14]),
lineHeight: 1.13
},
max: {
fontSize: rem(scale[15]),
lineHeight: 1.11,
letterSpacing: px(-.96)
}
}
};
const display04 = {
fontSize: rem(scale[9]),
fontWeight: fontWeights.light,
lineHeight: 1.19,
letterSpacing: 0,
breakpoints: {
md: {
fontSize: rem(scale[13]),
lineHeight: 1.15
},
lg: {
fontSize: rem(scale[16]),
lineHeight: 1.11,
letterSpacing: px(-.64)
},
xlg: {
fontSize: rem(scale[19]),
lineHeight: 1.07,
letterSpacing: px(-.64)
},
max: {
fontSize: rem(scale[22]),
lineHeight: 1.05,
letterSpacing: px(-.96)
}
}
};
const legal01 = {
fontSize: rem(scale[0]),
fontWeight: fontWeights.regular,
lineHeight: 1.33333,
letterSpacing: px(.32)
};
const legal02 = {
fontSize: rem(scale[1]),
fontWeight: fontWeights.regular,
lineHeight: 1.28572,
letterSpacing: px(.16)
};
const bodyCompact01 = bodyShort01;
const bodyCompact02 = bodyShort02;
const body01 = bodyLong01;
const body02 = bodyLong02;
const headingCompact01 = productiveHeading01;
const headingCompact02 = productiveHeading02;
const heading03 = productiveHeading03;
const heading04 = productiveHeading04;
const heading05 = productiveHeading05;
const heading06 = productiveHeading06;
const heading07 = productiveHeading07;
const fluidHeading03 = expressiveHeading03;
const fluidHeading04 = expressiveHeading04;
const fluidHeading05 = expressiveHeading05;
const fluidHeading06 = expressiveHeading06;
const fluidParagraph01 = expressiveParagraph01;
const fluidQuotation01 = quotation01;
const fluidQuotation02 = quotation02;
const fluidDisplay01 = display01;
const fluidDisplay02 = display02;
const fluidDisplay03 = display03;
const fluidDisplay04 = display04;
const unstable_tokens = [
"caption01",
"caption02",
"label01",
"label02",
"helperText01",
"helperText02",
"bodyShort01",
"bodyLong01",
"bodyShort02",
"bodyLong02",
"code01",
"code02",
"heading01",
"productiveHeading01",
"heading02",
"productiveHeading02",
"productiveHeading03",
"productiveHeading04",
"productiveHeading05",
"productiveHeading06",
"productiveHeading07",
"expressiveHeading01",
"expressiveHeading02",
"expressiveHeading03",
"expressiveHeading04",
"expressiveHeading05",
"expressiveHeading06",
"expressiveParagraph01",
"quotation01",
"quotation02",
"display01",
"display02",
"display03",
"display04",
"legal01",
"legal02",
"bodyCompact01",
"bodyCompact02",
"body01",
"body02",
"headingCompact01",
"headingCompact02",
"heading03",
"heading04",
"heading05",
"heading06",
"heading07",
"fluidHeading03",
"fluidHeading04",
"fluidHeading05",
"fluidHeading06",
"fluidParagraph01",
"fluidQuotation01",
"fluidQuotation02",
"fluidDisplay01",
"fluidDisplay02",
"fluidDisplay03",
"fluidDisplay04"
];
//#endregion
export { body01, body02, bodyCompact01, bodyCompact02, bodyLong01, bodyLong02, bodyShort01, bodyShort02, caption01, caption02, code01, code02, display01, display02, display03, display04, expressiveHeading01, expressiveHeading02, expressiveHeading03, expressiveHeading04, expressiveHeading05, expressiveHeading06, expressiveParagraph01, fluid, fluidDisplay01, fluidDisplay02, fluidDisplay03, fluidDisplay04, fluidHeading03, fluidHeading04, fluidHeading05, fluidHeading06, fluidParagraph01, fluidQuotation01, fluidQuotation02, fontFamilies, fontFamily, fontWeight, fontWeights, getTypeSize, heading01, heading02, heading03, heading04, heading05, heading06, heading07, headingCompact01, headingCompact02, helperText01, helperText02, label01, label02, legal01, legal02, print, productiveHeading01, productiveHeading02, productiveHeading03, productiveHeading04, productiveHeading05, productiveHeading06, productiveHeading07, quotation01, quotation02, reset, scale, styles_exports as styles, unstable_tokens };