@carbon/type 11.60.0-rc.0 → 11.61.0-rc.0

package/lib/tokens.d.ts

@@ -0,0 +1,65 @@
+/**
+ * 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.
+ */
+export declare const caption01 = "caption01";
+export declare const caption02 = "caption02";
+export declare const label01 = "label01";
+export declare const label02 = "label02";
+export declare const helperText01 = "helperText01";
+export declare const helperText02 = "helperText02";
+export declare const bodyShort01 = "bodyShort01";
+export declare const bodyLong01 = "bodyLong01";
+export declare const bodyShort02 = "bodyShort02";
+export declare const bodyLong02 = "bodyLong02";
+export declare const code01 = "code01";
+export declare const code02 = "code02";
+export declare const heading01 = "heading01";
+export declare const productiveHeading01 = "productiveHeading01";
+export declare const heading02 = "heading02";
+export declare const productiveHeading02 = "productiveHeading02";
+export declare const productiveHeading03 = "productiveHeading03";
+export declare const productiveHeading04 = "productiveHeading04";
+export declare const productiveHeading05 = "productiveHeading05";
+export declare const productiveHeading06 = "productiveHeading06";
+export declare const productiveHeading07 = "productiveHeading07";
+export declare const expressiveHeading01 = "expressiveHeading01";
+export declare const expressiveHeading02 = "expressiveHeading02";
+export declare const expressiveHeading03 = "expressiveHeading03";
+export declare const expressiveHeading04 = "expressiveHeading04";
+export declare const expressiveHeading05 = "expressiveHeading05";
+export declare const expressiveHeading06 = "expressiveHeading06";
+export declare const expressiveParagraph01 = "expressiveParagraph01";
+export declare const quotation01 = "quotation01";
+export declare const quotation02 = "quotation02";
+export declare const display01 = "display01";
+export declare const display02 = "display02";
+export declare const display03 = "display03";
+export declare const display04 = "display04";
+export declare const legal01 = "legal01";
+export declare const legal02 = "legal02";
+export declare const bodyCompact01 = "bodyCompact01";
+export declare const bodyCompact02 = "bodyCompact02";
+export declare const body01 = "body01";
+export declare const body02 = "body02";
+export declare const headingCompact01 = "headingCompact01";
+export declare const headingCompact02 = "headingCompact02";
+export declare const heading03 = "heading03";
+export declare const heading04 = "heading04";
+export declare const heading05 = "heading05";
+export declare const heading06 = "heading06";
+export declare const heading07 = "heading07";
+export declare const fluidHeading03 = "fluidHeading03";
+export declare const fluidHeading04 = "fluidHeading04";
+export declare const fluidHeading05 = "fluidHeading05";
+export declare const fluidHeading06 = "fluidHeading06";
+export declare const fluidParagraph01 = "fluidParagraph01";
+export declare const fluidQuotation01 = "fluidQuotation01";
+export declare const fluidQuotation02 = "fluidQuotation02";
+export declare const fluidDisplay01 = "fluidDisplay01";
+export declare const fluidDisplay02 = "fluidDisplay02";
+export declare const fluidDisplay03 = "fluidDisplay03";
+export declare const fluidDisplay04 = "fluidDisplay04";
+export declare const unstable_tokens: string[];

package/lib/types.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Copyright IBM Corp. 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.
+ */
+export type TypeStyle = {
+    '-moz-osx-font-smoothing'?: string;
+    '-webkit-font-smoothing'?: string;
+    fontFamily?: string;
+    fontSize?: string;
+    fontWeight?: number;
+    letterSpacing?: number | string;
+    lineHeight?: number;
+    textRendering?: string;
+};

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@carbon/type",
   "description": "Typography for digital and software products using the Carbon Design System",
-  "version": "11.60.0-rc.0",
+  "version": "11.61.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
+  "types": "lib/index.d.ts",
   "module": "es/index.js",
   "sass": "index.scss",
   "repository": {
@@ -16,7 +17,6 @@
     "es",
     "lib",
     "scss",
-    "src",
     "umd",
     "index.scss",
     "telemetry.yml"
@@ -36,21 +36,24 @@
     "provenance": true
   },
   "scripts": {
-    "build": "yarn clean && carbon-cli bundle src/index.js --name CarbonType && carbon-cli check \"scss/*.scss\"",
+    "build:types": "tsc -p tsconfig.types.json",
+    "build": "yarn clean && carbon-cli bundle src/index.ts --name CarbonType && yarn build:types && carbon-cli check \"scss/*.scss\"",
     "clean": "rimraf css es lib umd",
     "postinstall": "ibmtelemetry --config=telemetry.yml"
   },
   "dependencies": {
-    "@carbon/grid": "^11.56.0-rc.0",
-    "@carbon/layout": "^11.53.0-rc.0",
+    "@carbon/grid": "^11.56.0",
+    "@carbon/layout": "^11.53.0",
     "@ibm/telemetry-js": "^1.5.0"
   },
   "devDependencies": {
-    "@carbon/cli": "^11.44.0-rc.0",
+    "@carbon/cli": "^11.44.0",
     "@carbon/test-utils": "^10.41.0",
     "change-case-all": "^2.1.0",
     "css": "^3.0.0",
-    "rimraf": "^6.0.1"
+    "rimraf": "^6.0.1",
+    "typescript": "^5.7.3",
+    "typescript-config-carbon": "^0.10.0"
   },
   "eyeglass": {
     "exports": false,
@@ -58,5 +61,5 @@
     "sassDir": "scss",
     "needs": "^1.3.0"
   },
-  "gitHead": "3d219dfcc2a3da515016f7ce0e769d013c3a6c03"
+  "gitHead": "b23ca747c33b76557a54aa88b6df70bc76f55da9"
 }

package/umd/index.js

@@ -14,9 +14,68 @@
 		return target;
 	};
 	//#endregion
-	//#region src/fontFamily.js
+	//#region src/fluid.ts
 	/**
-	* Copyright IBM Corp. 2018, 2023
+	* 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(_carbon_layout.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[(0, _carbon_layout.breakpoint)(name)] = {
+				...fluidBreakpoints[name],
+				fontSize: fluidTypeSize(styles, name, fluidBreakpoints)
+			};
+		});
+		return styles;
+	};
+	const fluidTypeSize = (defaultStyles, fluidBreakpointName, fluidBreakpoints) => {
+		const breakpoint = _carbon_layout.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 = _carbon_layout.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.
@@ -28,14 +87,14 @@
 		sansHebrew: "'IBM Plex Sans Hebrew', 'Helvetica Hebrew', 'Arial Hebrew', sans-serif",
 		serif: "'IBM Plex Serif', 'Georgia', Times, serif"
 	};
-	function fontFamily(name) {
-		if (!fontFamilies[name]) throw new Error(`Unable to find font family: \`${name}\`. Expected one of: [${Object.keys(fontFamilies).join(", ")}]`);
+	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.js
+	//#region src/fontWeight.ts
 	/**
-	* Copyright IBM Corp. 2018, 2023
+	* 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.
@@ -45,27 +104,21 @@
 		regular: 400,
 		semibold: 600
 	};
-	function fontWeight(weight) {
-		if (!fontWeights[weight]) throw new Error(`Unable to find font weight: \`${weight}\`. Expected one of: [${Object.keys(fontWeights).join(", ")}]`);
+	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.js
-	/**
-	* Copyright IBM Corp. 2018, 2023
-	*
-	* This source code is licensed under the Apache-2.0 license found in the
-	* LICENSE file in the root directory of this source tree.
-	*/
-	function print(block) {
+	//#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;
 		}, "");
-	}
-	function paramCase(string) {
+	};
+	const paramCase = (string) => {
 		let result = "";
 		for (let i = 0; i < string.length; i++) {
 			const character = string[i];
@@ -76,11 +129,11 @@
 			result += character;
 		}
 		return result;
-	}
+	};
 	//#endregion
-	//#region src/reset.js
+	//#region src/reset.ts
 	/**
-	* Copyright IBM Corp. 2018, 2023
+	* 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.
@@ -98,27 +151,24 @@
 		code: { fontFamily: fontFamilies.mono }
 	};
 	//#endregion
-	//#region src/scale.js
+	//#region src/scale.ts
 	/**
-	* Copyright IBM Corp. 2018, 2023
+	* 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.
 	*/
-	/**
-	* Get the type size for the given step
-	* @param {number} step
-	* @returns {number}
-	*/
-	function getTypeSize(step) {
+	const getTypeSize = (step) => {
 		if (step <= 1) return 12;
 		return getTypeSize(step - 1) + Math.floor((step - 2) / 4 + 1) * 2;
-	}
+	};
 	/**
-	* The default type scale for 23 steps. Inlined as an array here through running
-	* the follow step:
+	* Default type scale with 23 steps.
 	*
-	* > Array.from({ length: 23 }, (_, i) => getTypeSize(i + 1))
+	* Generated with:
+	* ```ts
+	* Array.from({ length: 23 }, (_, i) => getTypeSize(i + 1))
+	* ```
 	*/
 	const scale = [
 		12,
@@ -146,9 +196,9 @@
 		156
 	];
 	//#endregion
-	//#region src/styles.js
+	//#region src/styles.ts
 	/**
-	* Copyright IBM Corp. 2018, 2023
+	* 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.
@@ -632,60 +682,6 @@
 	const fluidDisplay02 = display02;
 	const fluidDisplay03 = display03;
 	const fluidDisplay04 = display04;
-	//#endregion
-	//#region src/fluid.js
-	/**
-	* Copyright IBM Corp. 2018, 2023
-	*
-	* 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(_carbon_layout.breakpoints);
-	function next(name) {
-		return breakpointNames[breakpointNames.indexOf(name) + 1];
-	}
-	function fluid(selector) {
-		const { breakpoints: fluidBreakpoints, ...styles } = selector;
-		if (typeof fluidBreakpoints !== "object") return styles;
-		const fluidBreakpointNames = Object.keys(fluidBreakpoints);
-		if (fluidBreakpointNames.length === 0) return styles;
-		styles.fontSize = fluidTypeSize(styles, "sm", fluidBreakpoints);
-		fluidBreakpointNames.forEach((name) => {
-			styles[(0, _carbon_layout.breakpoint)(name)] = {
-				...fluidBreakpoints[name],
-				fontSize: fluidTypeSize(styles, name, fluidBreakpoints)
-			};
-		});
-		return styles;
-	}
-	function fluidTypeSize(defaultStyles, fluidBreakpointName, fluidBreakpoints) {
-		const breakpoint = _carbon_layout.breakpoints[fluidBreakpointName];
-		const fluidBreakpoint = fluidBreakpointName === "sm" ? defaultStyles : fluidBreakpoints[fluidBreakpointName];
-		let maxFontSize = defaultStyles.fontSize;
-		let minFontSize = defaultStyles.fontSize;
-		if (fluidBreakpoint.fontSize) minFontSize = fluidBreakpoint.fontSize;
-		let maxViewportWidth = breakpoint.width;
-		let 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 = _carbon_layout.breakpoints[nextFluidBreakpointName];
-			maxFontSize = fluidBreakpoints[nextFluidBreakpointName].fontSize;
-			maxViewportWidth = nextFluidBreakpoint.width;
-			return `calc(${minFontSize} + ${subtract(maxFontSize, minFontSize)} * ((100vw - ${minViewportWidth}) / ${subtract(maxViewportWidth, minViewportWidth)}))`;
-		}
-		return minFontSize;
-	}
-	function subtract(a, b) {
-		return parseFloat(a) - parseFloat(b);
-	}
 	const unstable_tokens = [
 		"caption01",
 		"caption02",
@@ -747,14 +743,6 @@
 		"fluidDisplay04"
 	];
 	//#endregion
-	//#region src/index.js
-	/**
-	* Copyright IBM Corp. 2018, 2023
-	*
-	* This source code is licensed under the Apache-2.0 license found in the
-	* LICENSE file in the root directory of this source tree.
-	*/
-	//#endregion
 	exports.body01 = body01;
 	exports.body02 = body02;
 	exports.bodyCompact01 = bodyCompact01;

package/src/__tests__/__snapshots__/fontFamily-test.js.snap

@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`fontFamily should be printable 1`] = `"font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace;"`;
-
-exports[`fontFamily should export the supported font families 1`] = `
-{
-  "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",
-}
-`;

package/src/__tests__/__snapshots__/fontWeight-test.js.snap

@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`fontWeight should be printable 1`] = `"font-weight: 400;"`;
-
-exports[`fontWeight should export the supported font weights 1`] = `
-{
-  "light": 300,
-  "regular": 400,
-  "semibold": 600,
-}
-`;

package/src/__tests__/__snapshots__/reset-test.js.snap

@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`reset should be printable 1`] = `"font-size: 16px;"`;
-
-exports[`reset should be printable 2`] = `
-"font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
-font-weight: 400;
-text-rendering: optimizeLegibility;
---webkit--font--smoothing: antialiased;
---moz--osx--font--smoothing: grayscale;"
-`;

package/src/__tests__/__snapshots__/scale-test.js.snap

@@ -1,29 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`scale should export the type scale 1`] = `
-[
-  12,
-  14,
-  16,
-  18,
-  20,
-  24,
-  28,
-  32,
-  36,
-  42,
-  48,
-  54,
-  60,
-  68,
-  76,
-  84,
-  92,
-  102,
-  112,
-  122,
-  132,
-  144,
-  156,
-]
-`;