@carbon/type 11.60.0 → 11.61.0-rc.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/index.js +87 -99
- package/lib/__tests__/exports-test.d.ts +1 -0
- package/lib/__tests__/fluid-test.d.ts +1 -0
- package/lib/__tests__/fontFamily-test.d.ts +1 -0
- package/lib/__tests__/fontWeight-test.d.ts +1 -0
- package/lib/__tests__/reset-test.d.ts +1 -0
- package/lib/__tests__/scale-test.d.ts +1 -0
- package/lib/__tests__/styles-test.d.ts +1 -0
- package/lib/__tests__/tokens-test.d.ts +1 -0
- package/lib/fluid.d.ts +15 -0
- package/lib/fontFamily.d.ts +16 -0
- package/lib/fontWeight.d.ts +14 -0
- package/lib/index.d.ts +15 -0
- package/lib/index.js +87 -99
- package/lib/print.d.ts +9 -0
- package/lib/reset.d.ts +8 -0
- package/lib/scale.d.ts +16 -0
- package/lib/styles.d.ts +744 -0
- package/lib/tokens.d.ts +65 -0
- package/lib/types.d.ts +16 -0
- package/package.json +8 -5
- package/umd/index.js +87 -99
- package/src/__tests__/__snapshots__/fontFamily-test.js.snap +0 -13
- package/src/__tests__/__snapshots__/fontWeight-test.js.snap +0 -11
- package/src/__tests__/__snapshots__/reset-test.js.snap +0 -11
- package/src/__tests__/__snapshots__/scale-test.js.snap +0 -29
- package/src/__tests__/__snapshots__/styles-test.js.snap +0 -411
- package/src/__tests__/exports-test.js +0 -88
- package/src/__tests__/fluid-test.js +0 -71
- package/src/__tests__/fontFamily-test.js +0 -33
- package/src/__tests__/fontWeight-test.js +0 -33
- package/src/__tests__/reset-test.js +0 -23
- package/src/__tests__/scale-test.js +0 -31
- package/src/__tests__/styles-test.js +0 -18
- package/src/__tests__/tokens-test.js +0 -21
- package/src/fluid.js +0 -86
- package/src/fontFamily.js +0 -30
- package/src/fontWeight.js +0 -24
- package/src/index.js +0 -28
- package/src/print.js +0 -36
- package/src/reset.js +0 -29
- package/src/scale.js +0 -30
- package/src/styles.js +0 -488
- package/src/tokens.js +0 -129
package/es/index.js
CHANGED
|
@@ -11,9 +11,68 @@ var __exportAll = (all, no_symbols) => {
|
|
|
11
11
|
return target;
|
|
12
12
|
};
|
|
13
13
|
//#endregion
|
|
14
|
-
//#region src/
|
|
14
|
+
//#region src/fluid.ts
|
|
15
15
|
/**
|
|
16
|
-
* Copyright IBM Corp. 2018,
|
|
16
|
+
* Copyright IBM Corp. 2018, 2026
|
|
17
|
+
*
|
|
18
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
19
|
+
* LICENSE file in the root directory of this source tree.
|
|
20
|
+
*/
|
|
21
|
+
const breakpointNames = Object.keys(breakpoints);
|
|
22
|
+
const next = (name) => {
|
|
23
|
+
return breakpointNames[breakpointNames.indexOf(name) + 1];
|
|
24
|
+
};
|
|
25
|
+
const fluid = (selector) => {
|
|
26
|
+
const { breakpoints: fluidBreakpoints, ...baseStyles } = selector;
|
|
27
|
+
const styles = { ...baseStyles };
|
|
28
|
+
if (typeof fluidBreakpoints !== "object" || fluidBreakpoints === null) return styles;
|
|
29
|
+
const fluidBreakpointNames = Object.keys(fluidBreakpoints);
|
|
30
|
+
if (fluidBreakpointNames.length === 0) return styles;
|
|
31
|
+
styles.fontSize = fluidTypeSize(styles, "sm", fluidBreakpoints);
|
|
32
|
+
fluidBreakpointNames.forEach((name) => {
|
|
33
|
+
styles[breakpoint(name)] = {
|
|
34
|
+
...fluidBreakpoints[name],
|
|
35
|
+
fontSize: fluidTypeSize(styles, name, fluidBreakpoints)
|
|
36
|
+
};
|
|
37
|
+
});
|
|
38
|
+
return styles;
|
|
39
|
+
};
|
|
40
|
+
const fluidTypeSize = (defaultStyles, fluidBreakpointName, fluidBreakpoints) => {
|
|
41
|
+
const breakpoint = breakpoints[fluidBreakpointName];
|
|
42
|
+
const fluidBreakpoint = fluidBreakpointName === "sm" ? defaultStyles : fluidBreakpoints[fluidBreakpointName];
|
|
43
|
+
const defaultFontSize = defaultStyles.fontSize ?? "";
|
|
44
|
+
const breakpointFontSize = fluidBreakpoint?.fontSize;
|
|
45
|
+
let maxFontSize = defaultFontSize;
|
|
46
|
+
let minFontSize = defaultFontSize;
|
|
47
|
+
if (breakpointFontSize) minFontSize = breakpointFontSize;
|
|
48
|
+
let maxViewportWidth = breakpoint.width;
|
|
49
|
+
const minViewportWidth = breakpoint.width;
|
|
50
|
+
let nextBreakpointAvailable = next(fluidBreakpointName);
|
|
51
|
+
let nextFluidBreakpointName = null;
|
|
52
|
+
while (nextBreakpointAvailable) {
|
|
53
|
+
if (fluidBreakpoints[nextBreakpointAvailable]) {
|
|
54
|
+
nextFluidBreakpointName = nextBreakpointAvailable;
|
|
55
|
+
break;
|
|
56
|
+
}
|
|
57
|
+
nextBreakpointAvailable = next(nextBreakpointAvailable);
|
|
58
|
+
}
|
|
59
|
+
if (nextFluidBreakpointName) {
|
|
60
|
+
const nextFluidBreakpoint = breakpoints[nextFluidBreakpointName];
|
|
61
|
+
const nextFontSize = fluidBreakpoints[nextFluidBreakpointName]?.fontSize;
|
|
62
|
+
if (!nextFontSize) return minFontSize;
|
|
63
|
+
maxFontSize = nextFontSize;
|
|
64
|
+
maxViewportWidth = nextFluidBreakpoint.width;
|
|
65
|
+
return `calc(${minFontSize} + ${subtract(maxFontSize, minFontSize)} * ((100vw - ${minViewportWidth}) / ${subtract(maxViewportWidth, minViewportWidth)}))`;
|
|
66
|
+
}
|
|
67
|
+
return minFontSize;
|
|
68
|
+
};
|
|
69
|
+
const subtract = (a, b) => {
|
|
70
|
+
return parseFloat(String(a)) - parseFloat(String(b));
|
|
71
|
+
};
|
|
72
|
+
//#endregion
|
|
73
|
+
//#region src/fontFamily.ts
|
|
74
|
+
/**
|
|
75
|
+
* Copyright IBM Corp. 2018, 2026
|
|
17
76
|
*
|
|
18
77
|
* This source code is licensed under the Apache-2.0 license found in the
|
|
19
78
|
* LICENSE file in the root directory of this source tree.
|
|
@@ -25,14 +84,14 @@ const fontFamilies = {
|
|
|
25
84
|
sansHebrew: "'IBM Plex Sans Hebrew', 'Helvetica Hebrew', 'Arial Hebrew', sans-serif",
|
|
26
85
|
serif: "'IBM Plex Serif', 'Georgia', Times, serif"
|
|
27
86
|
};
|
|
28
|
-
|
|
29
|
-
if (!fontFamilies
|
|
87
|
+
const fontFamily = (name) => {
|
|
88
|
+
if (!(name in fontFamilies)) throw new Error(`Unable to find font family: \`${name}\`. Expected one of: [${Object.keys(fontFamilies).join(", ")}]`);
|
|
30
89
|
return { fontFamily: fontFamilies[name] };
|
|
31
|
-
}
|
|
90
|
+
};
|
|
32
91
|
//#endregion
|
|
33
|
-
//#region src/fontWeight.
|
|
92
|
+
//#region src/fontWeight.ts
|
|
34
93
|
/**
|
|
35
|
-
* Copyright IBM Corp. 2018,
|
|
94
|
+
* Copyright IBM Corp. 2018, 2026
|
|
36
95
|
*
|
|
37
96
|
* This source code is licensed under the Apache-2.0 license found in the
|
|
38
97
|
* LICENSE file in the root directory of this source tree.
|
|
@@ -42,27 +101,21 @@ const fontWeights = {
|
|
|
42
101
|
regular: 400,
|
|
43
102
|
semibold: 600
|
|
44
103
|
};
|
|
45
|
-
|
|
46
|
-
if (!fontWeights
|
|
104
|
+
const fontWeight = (weight) => {
|
|
105
|
+
if (!(weight in fontWeights)) throw new Error(`Unable to find font weight: \`${weight}\`. Expected one of: [${Object.keys(fontWeights).join(", ")}]`);
|
|
47
106
|
return { fontWeight: fontWeights[weight] };
|
|
48
|
-
}
|
|
107
|
+
};
|
|
49
108
|
//#endregion
|
|
50
|
-
//#region src/print.
|
|
51
|
-
|
|
52
|
-
* Copyright IBM Corp. 2018, 2023
|
|
53
|
-
*
|
|
54
|
-
* This source code is licensed under the Apache-2.0 license found in the
|
|
55
|
-
* LICENSE file in the root directory of this source tree.
|
|
56
|
-
*/
|
|
57
|
-
function print(block) {
|
|
109
|
+
//#region src/print.ts
|
|
110
|
+
const print = (block) => {
|
|
58
111
|
return Object.keys(block).reduce((acc, key, index) => {
|
|
59
112
|
if (key === "breakpoints") return acc;
|
|
60
113
|
const property = `${paramCase(key)}: ${block[key]};`;
|
|
61
114
|
if (index === 0) return property;
|
|
62
115
|
return acc + "\n" + property;
|
|
63
116
|
}, "");
|
|
64
|
-
}
|
|
65
|
-
|
|
117
|
+
};
|
|
118
|
+
const paramCase = (string) => {
|
|
66
119
|
let result = "";
|
|
67
120
|
for (let i = 0; i < string.length; i++) {
|
|
68
121
|
const character = string[i];
|
|
@@ -73,11 +126,11 @@ function paramCase(string) {
|
|
|
73
126
|
result += character;
|
|
74
127
|
}
|
|
75
128
|
return result;
|
|
76
|
-
}
|
|
129
|
+
};
|
|
77
130
|
//#endregion
|
|
78
|
-
//#region src/reset.
|
|
131
|
+
//#region src/reset.ts
|
|
79
132
|
/**
|
|
80
|
-
* Copyright IBM Corp. 2018,
|
|
133
|
+
* Copyright IBM Corp. 2018, 2026
|
|
81
134
|
*
|
|
82
135
|
* This source code is licensed under the Apache-2.0 license found in the
|
|
83
136
|
* LICENSE file in the root directory of this source tree.
|
|
@@ -95,27 +148,24 @@ const reset = {
|
|
|
95
148
|
code: { fontFamily: fontFamilies.mono }
|
|
96
149
|
};
|
|
97
150
|
//#endregion
|
|
98
|
-
//#region src/scale.
|
|
151
|
+
//#region src/scale.ts
|
|
99
152
|
/**
|
|
100
|
-
* Copyright IBM Corp. 2018,
|
|
153
|
+
* Copyright IBM Corp. 2018, 2026
|
|
101
154
|
*
|
|
102
155
|
* This source code is licensed under the Apache-2.0 license found in the
|
|
103
156
|
* LICENSE file in the root directory of this source tree.
|
|
104
157
|
*/
|
|
105
|
-
|
|
106
|
-
* Get the type size for the given step
|
|
107
|
-
* @param {number} step
|
|
108
|
-
* @returns {number}
|
|
109
|
-
*/
|
|
110
|
-
function getTypeSize(step) {
|
|
158
|
+
const getTypeSize = (step) => {
|
|
111
159
|
if (step <= 1) return 12;
|
|
112
160
|
return getTypeSize(step - 1) + Math.floor((step - 2) / 4 + 1) * 2;
|
|
113
|
-
}
|
|
161
|
+
};
|
|
114
162
|
/**
|
|
115
|
-
*
|
|
116
|
-
* the follow step:
|
|
163
|
+
* Default type scale with 23 steps.
|
|
117
164
|
*
|
|
118
|
-
*
|
|
165
|
+
* Generated with:
|
|
166
|
+
* ```ts
|
|
167
|
+
* Array.from({ length: 23 }, (_, i) => getTypeSize(i + 1))
|
|
168
|
+
* ```
|
|
119
169
|
*/
|
|
120
170
|
const scale = [
|
|
121
171
|
12,
|
|
@@ -143,9 +193,9 @@ const scale = [
|
|
|
143
193
|
156
|
|
144
194
|
];
|
|
145
195
|
//#endregion
|
|
146
|
-
//#region src/styles.
|
|
196
|
+
//#region src/styles.ts
|
|
147
197
|
/**
|
|
148
|
-
* Copyright IBM Corp. 2018,
|
|
198
|
+
* Copyright IBM Corp. 2018, 2026
|
|
149
199
|
*
|
|
150
200
|
* This source code is licensed under the Apache-2.0 license found in the
|
|
151
201
|
* LICENSE file in the root directory of this source tree.
|
|
@@ -629,60 +679,6 @@ const fluidDisplay01 = display01;
|
|
|
629
679
|
const fluidDisplay02 = display02;
|
|
630
680
|
const fluidDisplay03 = display03;
|
|
631
681
|
const fluidDisplay04 = display04;
|
|
632
|
-
//#endregion
|
|
633
|
-
//#region src/fluid.js
|
|
634
|
-
/**
|
|
635
|
-
* Copyright IBM Corp. 2018, 2023
|
|
636
|
-
*
|
|
637
|
-
* This source code is licensed under the Apache-2.0 license found in the
|
|
638
|
-
* LICENSE file in the root directory of this source tree.
|
|
639
|
-
*/
|
|
640
|
-
const breakpointNames = Object.keys(breakpoints);
|
|
641
|
-
function next(name) {
|
|
642
|
-
return breakpointNames[breakpointNames.indexOf(name) + 1];
|
|
643
|
-
}
|
|
644
|
-
function fluid(selector) {
|
|
645
|
-
const { breakpoints: fluidBreakpoints, ...styles } = selector;
|
|
646
|
-
if (typeof fluidBreakpoints !== "object") return styles;
|
|
647
|
-
const fluidBreakpointNames = Object.keys(fluidBreakpoints);
|
|
648
|
-
if (fluidBreakpointNames.length === 0) return styles;
|
|
649
|
-
styles.fontSize = fluidTypeSize(styles, "sm", fluidBreakpoints);
|
|
650
|
-
fluidBreakpointNames.forEach((name) => {
|
|
651
|
-
styles[breakpoint(name)] = {
|
|
652
|
-
...fluidBreakpoints[name],
|
|
653
|
-
fontSize: fluidTypeSize(styles, name, fluidBreakpoints)
|
|
654
|
-
};
|
|
655
|
-
});
|
|
656
|
-
return styles;
|
|
657
|
-
}
|
|
658
|
-
function fluidTypeSize(defaultStyles, fluidBreakpointName, fluidBreakpoints) {
|
|
659
|
-
const breakpoint = breakpoints[fluidBreakpointName];
|
|
660
|
-
const fluidBreakpoint = fluidBreakpointName === "sm" ? defaultStyles : fluidBreakpoints[fluidBreakpointName];
|
|
661
|
-
let maxFontSize = defaultStyles.fontSize;
|
|
662
|
-
let minFontSize = defaultStyles.fontSize;
|
|
663
|
-
if (fluidBreakpoint.fontSize) minFontSize = fluidBreakpoint.fontSize;
|
|
664
|
-
let maxViewportWidth = breakpoint.width;
|
|
665
|
-
let minViewportWidth = breakpoint.width;
|
|
666
|
-
let nextBreakpointAvailable = next(fluidBreakpointName);
|
|
667
|
-
let nextFluidBreakpointName = null;
|
|
668
|
-
while (nextBreakpointAvailable) {
|
|
669
|
-
if (fluidBreakpoints[nextBreakpointAvailable]) {
|
|
670
|
-
nextFluidBreakpointName = nextBreakpointAvailable;
|
|
671
|
-
break;
|
|
672
|
-
}
|
|
673
|
-
nextBreakpointAvailable = next(nextBreakpointAvailable);
|
|
674
|
-
}
|
|
675
|
-
if (nextFluidBreakpointName) {
|
|
676
|
-
const nextFluidBreakpoint = breakpoints[nextFluidBreakpointName];
|
|
677
|
-
maxFontSize = fluidBreakpoints[nextFluidBreakpointName].fontSize;
|
|
678
|
-
maxViewportWidth = nextFluidBreakpoint.width;
|
|
679
|
-
return `calc(${minFontSize} + ${subtract(maxFontSize, minFontSize)} * ((100vw - ${minViewportWidth}) / ${subtract(maxViewportWidth, minViewportWidth)}))`;
|
|
680
|
-
}
|
|
681
|
-
return minFontSize;
|
|
682
|
-
}
|
|
683
|
-
function subtract(a, b) {
|
|
684
|
-
return parseFloat(a) - parseFloat(b);
|
|
685
|
-
}
|
|
686
682
|
const unstable_tokens = [
|
|
687
683
|
"caption01",
|
|
688
684
|
"caption02",
|
|
@@ -744,12 +740,4 @@ const unstable_tokens = [
|
|
|
744
740
|
"fluidDisplay04"
|
|
745
741
|
];
|
|
746
742
|
//#endregion
|
|
747
|
-
//#region src/index.js
|
|
748
|
-
/**
|
|
749
|
-
* Copyright IBM Corp. 2018, 2023
|
|
750
|
-
*
|
|
751
|
-
* This source code is licensed under the Apache-2.0 license found in the
|
|
752
|
-
* LICENSE file in the root directory of this source tree.
|
|
753
|
-
*/
|
|
754
|
-
//#endregion
|
|
755
743
|
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 };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/lib/fluid.d.ts
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2018, 2026
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
import type { BreakpointName } from '@carbon/layout';
|
|
8
|
+
import type { TypeStyle } from './types';
|
|
9
|
+
type TypeBreakpointStyles = Partial<TypeStyle>;
|
|
10
|
+
type TypeToken = TypeStyle & {
|
|
11
|
+
breakpoints?: Partial<Record<BreakpointName, TypeBreakpointStyles>>;
|
|
12
|
+
};
|
|
13
|
+
type FluidResult = TypeStyle & Record<string, TypeBreakpointStyles | number | string | undefined>;
|
|
14
|
+
export declare const fluid: (selector: TypeToken) => FluidResult;
|
|
15
|
+
export {};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2018, 2026
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
export declare const fontFamilies: {
|
|
8
|
+
mono: string;
|
|
9
|
+
sans: string;
|
|
10
|
+
sansCondensed: string;
|
|
11
|
+
sansHebrew: string;
|
|
12
|
+
serif: string;
|
|
13
|
+
};
|
|
14
|
+
export declare const fontFamily: (name: keyof typeof fontFamilies) => {
|
|
15
|
+
fontFamily: string;
|
|
16
|
+
};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2018, 2026
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
export declare const fontWeights: {
|
|
8
|
+
light: number;
|
|
9
|
+
regular: number;
|
|
10
|
+
semibold: number;
|
|
11
|
+
};
|
|
12
|
+
export declare const fontWeight: (weight: keyof typeof fontWeights) => {
|
|
13
|
+
fontWeight: number;
|
|
14
|
+
};
|
package/lib/index.d.ts
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2018, 2026
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
export { fluid } from './fluid';
|
|
8
|
+
export { fontFamilies, fontFamily } from './fontFamily';
|
|
9
|
+
export { fontWeight, fontWeights } from './fontWeight';
|
|
10
|
+
export { print } from './print';
|
|
11
|
+
export { reset } from './reset';
|
|
12
|
+
export { getTypeSize, scale } from './scale';
|
|
13
|
+
export * from './styles';
|
|
14
|
+
export * as styles from './styles';
|
|
15
|
+
export { unstable_tokens } from './tokens';
|
package/lib/index.js
CHANGED
|
@@ -12,9 +12,68 @@ var __exportAll = (all, no_symbols) => {
|
|
|
12
12
|
};
|
|
13
13
|
//#endregion
|
|
14
14
|
let _carbon_layout = require("@carbon/layout");
|
|
15
|
-
//#region src/
|
|
15
|
+
//#region src/fluid.ts
|
|
16
16
|
/**
|
|
17
|
-
* Copyright IBM Corp. 2018,
|
|
17
|
+
* Copyright IBM Corp. 2018, 2026
|
|
18
|
+
*
|
|
19
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
20
|
+
* LICENSE file in the root directory of this source tree.
|
|
21
|
+
*/
|
|
22
|
+
const breakpointNames = Object.keys(_carbon_layout.breakpoints);
|
|
23
|
+
const next = (name) => {
|
|
24
|
+
return breakpointNames[breakpointNames.indexOf(name) + 1];
|
|
25
|
+
};
|
|
26
|
+
const fluid = (selector) => {
|
|
27
|
+
const { breakpoints: fluidBreakpoints, ...baseStyles } = selector;
|
|
28
|
+
const styles = { ...baseStyles };
|
|
29
|
+
if (typeof fluidBreakpoints !== "object" || fluidBreakpoints === null) return styles;
|
|
30
|
+
const fluidBreakpointNames = Object.keys(fluidBreakpoints);
|
|
31
|
+
if (fluidBreakpointNames.length === 0) return styles;
|
|
32
|
+
styles.fontSize = fluidTypeSize(styles, "sm", fluidBreakpoints);
|
|
33
|
+
fluidBreakpointNames.forEach((name) => {
|
|
34
|
+
styles[(0, _carbon_layout.breakpoint)(name)] = {
|
|
35
|
+
...fluidBreakpoints[name],
|
|
36
|
+
fontSize: fluidTypeSize(styles, name, fluidBreakpoints)
|
|
37
|
+
};
|
|
38
|
+
});
|
|
39
|
+
return styles;
|
|
40
|
+
};
|
|
41
|
+
const fluidTypeSize = (defaultStyles, fluidBreakpointName, fluidBreakpoints) => {
|
|
42
|
+
const breakpoint = _carbon_layout.breakpoints[fluidBreakpointName];
|
|
43
|
+
const fluidBreakpoint = fluidBreakpointName === "sm" ? defaultStyles : fluidBreakpoints[fluidBreakpointName];
|
|
44
|
+
const defaultFontSize = defaultStyles.fontSize ?? "";
|
|
45
|
+
const breakpointFontSize = fluidBreakpoint?.fontSize;
|
|
46
|
+
let maxFontSize = defaultFontSize;
|
|
47
|
+
let minFontSize = defaultFontSize;
|
|
48
|
+
if (breakpointFontSize) minFontSize = breakpointFontSize;
|
|
49
|
+
let maxViewportWidth = breakpoint.width;
|
|
50
|
+
const minViewportWidth = breakpoint.width;
|
|
51
|
+
let nextBreakpointAvailable = next(fluidBreakpointName);
|
|
52
|
+
let nextFluidBreakpointName = null;
|
|
53
|
+
while (nextBreakpointAvailable) {
|
|
54
|
+
if (fluidBreakpoints[nextBreakpointAvailable]) {
|
|
55
|
+
nextFluidBreakpointName = nextBreakpointAvailable;
|
|
56
|
+
break;
|
|
57
|
+
}
|
|
58
|
+
nextBreakpointAvailable = next(nextBreakpointAvailable);
|
|
59
|
+
}
|
|
60
|
+
if (nextFluidBreakpointName) {
|
|
61
|
+
const nextFluidBreakpoint = _carbon_layout.breakpoints[nextFluidBreakpointName];
|
|
62
|
+
const nextFontSize = fluidBreakpoints[nextFluidBreakpointName]?.fontSize;
|
|
63
|
+
if (!nextFontSize) return minFontSize;
|
|
64
|
+
maxFontSize = nextFontSize;
|
|
65
|
+
maxViewportWidth = nextFluidBreakpoint.width;
|
|
66
|
+
return `calc(${minFontSize} + ${subtract(maxFontSize, minFontSize)} * ((100vw - ${minViewportWidth}) / ${subtract(maxViewportWidth, minViewportWidth)}))`;
|
|
67
|
+
}
|
|
68
|
+
return minFontSize;
|
|
69
|
+
};
|
|
70
|
+
const subtract = (a, b) => {
|
|
71
|
+
return parseFloat(String(a)) - parseFloat(String(b));
|
|
72
|
+
};
|
|
73
|
+
//#endregion
|
|
74
|
+
//#region src/fontFamily.ts
|
|
75
|
+
/**
|
|
76
|
+
* Copyright IBM Corp. 2018, 2026
|
|
18
77
|
*
|
|
19
78
|
* This source code is licensed under the Apache-2.0 license found in the
|
|
20
79
|
* LICENSE file in the root directory of this source tree.
|
|
@@ -26,14 +85,14 @@ const fontFamilies = {
|
|
|
26
85
|
sansHebrew: "'IBM Plex Sans Hebrew', 'Helvetica Hebrew', 'Arial Hebrew', sans-serif",
|
|
27
86
|
serif: "'IBM Plex Serif', 'Georgia', Times, serif"
|
|
28
87
|
};
|
|
29
|
-
|
|
30
|
-
if (!fontFamilies
|
|
88
|
+
const fontFamily = (name) => {
|
|
89
|
+
if (!(name in fontFamilies)) throw new Error(`Unable to find font family: \`${name}\`. Expected one of: [${Object.keys(fontFamilies).join(", ")}]`);
|
|
31
90
|
return { fontFamily: fontFamilies[name] };
|
|
32
|
-
}
|
|
91
|
+
};
|
|
33
92
|
//#endregion
|
|
34
|
-
//#region src/fontWeight.
|
|
93
|
+
//#region src/fontWeight.ts
|
|
35
94
|
/**
|
|
36
|
-
* Copyright IBM Corp. 2018,
|
|
95
|
+
* Copyright IBM Corp. 2018, 2026
|
|
37
96
|
*
|
|
38
97
|
* This source code is licensed under the Apache-2.0 license found in the
|
|
39
98
|
* LICENSE file in the root directory of this source tree.
|
|
@@ -43,27 +102,21 @@ const fontWeights = {
|
|
|
43
102
|
regular: 400,
|
|
44
103
|
semibold: 600
|
|
45
104
|
};
|
|
46
|
-
|
|
47
|
-
if (!fontWeights
|
|
105
|
+
const fontWeight = (weight) => {
|
|
106
|
+
if (!(weight in fontWeights)) throw new Error(`Unable to find font weight: \`${weight}\`. Expected one of: [${Object.keys(fontWeights).join(", ")}]`);
|
|
48
107
|
return { fontWeight: fontWeights[weight] };
|
|
49
|
-
}
|
|
108
|
+
};
|
|
50
109
|
//#endregion
|
|
51
|
-
//#region src/print.
|
|
52
|
-
|
|
53
|
-
* Copyright IBM Corp. 2018, 2023
|
|
54
|
-
*
|
|
55
|
-
* This source code is licensed under the Apache-2.0 license found in the
|
|
56
|
-
* LICENSE file in the root directory of this source tree.
|
|
57
|
-
*/
|
|
58
|
-
function print(block) {
|
|
110
|
+
//#region src/print.ts
|
|
111
|
+
const print = (block) => {
|
|
59
112
|
return Object.keys(block).reduce((acc, key, index) => {
|
|
60
113
|
if (key === "breakpoints") return acc;
|
|
61
114
|
const property = `${paramCase(key)}: ${block[key]};`;
|
|
62
115
|
if (index === 0) return property;
|
|
63
116
|
return acc + "\n" + property;
|
|
64
117
|
}, "");
|
|
65
|
-
}
|
|
66
|
-
|
|
118
|
+
};
|
|
119
|
+
const paramCase = (string) => {
|
|
67
120
|
let result = "";
|
|
68
121
|
for (let i = 0; i < string.length; i++) {
|
|
69
122
|
const character = string[i];
|
|
@@ -74,11 +127,11 @@ function paramCase(string) {
|
|
|
74
127
|
result += character;
|
|
75
128
|
}
|
|
76
129
|
return result;
|
|
77
|
-
}
|
|
130
|
+
};
|
|
78
131
|
//#endregion
|
|
79
|
-
//#region src/reset.
|
|
132
|
+
//#region src/reset.ts
|
|
80
133
|
/**
|
|
81
|
-
* Copyright IBM Corp. 2018,
|
|
134
|
+
* Copyright IBM Corp. 2018, 2026
|
|
82
135
|
*
|
|
83
136
|
* This source code is licensed under the Apache-2.0 license found in the
|
|
84
137
|
* LICENSE file in the root directory of this source tree.
|
|
@@ -96,27 +149,24 @@ const reset = {
|
|
|
96
149
|
code: { fontFamily: fontFamilies.mono }
|
|
97
150
|
};
|
|
98
151
|
//#endregion
|
|
99
|
-
//#region src/scale.
|
|
152
|
+
//#region src/scale.ts
|
|
100
153
|
/**
|
|
101
|
-
* Copyright IBM Corp. 2018,
|
|
154
|
+
* Copyright IBM Corp. 2018, 2026
|
|
102
155
|
*
|
|
103
156
|
* This source code is licensed under the Apache-2.0 license found in the
|
|
104
157
|
* LICENSE file in the root directory of this source tree.
|
|
105
158
|
*/
|
|
106
|
-
|
|
107
|
-
* Get the type size for the given step
|
|
108
|
-
* @param {number} step
|
|
109
|
-
* @returns {number}
|
|
110
|
-
*/
|
|
111
|
-
function getTypeSize(step) {
|
|
159
|
+
const getTypeSize = (step) => {
|
|
112
160
|
if (step <= 1) return 12;
|
|
113
161
|
return getTypeSize(step - 1) + Math.floor((step - 2) / 4 + 1) * 2;
|
|
114
|
-
}
|
|
162
|
+
};
|
|
115
163
|
/**
|
|
116
|
-
*
|
|
117
|
-
* the follow step:
|
|
164
|
+
* Default type scale with 23 steps.
|
|
118
165
|
*
|
|
119
|
-
*
|
|
166
|
+
* Generated with:
|
|
167
|
+
* ```ts
|
|
168
|
+
* Array.from({ length: 23 }, (_, i) => getTypeSize(i + 1))
|
|
169
|
+
* ```
|
|
120
170
|
*/
|
|
121
171
|
const scale = [
|
|
122
172
|
12,
|
|
@@ -144,9 +194,9 @@ const scale = [
|
|
|
144
194
|
156
|
|
145
195
|
];
|
|
146
196
|
//#endregion
|
|
147
|
-
//#region src/styles.
|
|
197
|
+
//#region src/styles.ts
|
|
148
198
|
/**
|
|
149
|
-
* Copyright IBM Corp. 2018,
|
|
199
|
+
* Copyright IBM Corp. 2018, 2026
|
|
150
200
|
*
|
|
151
201
|
* This source code is licensed under the Apache-2.0 license found in the
|
|
152
202
|
* LICENSE file in the root directory of this source tree.
|
|
@@ -630,60 +680,6 @@ const fluidDisplay01 = display01;
|
|
|
630
680
|
const fluidDisplay02 = display02;
|
|
631
681
|
const fluidDisplay03 = display03;
|
|
632
682
|
const fluidDisplay04 = display04;
|
|
633
|
-
//#endregion
|
|
634
|
-
//#region src/fluid.js
|
|
635
|
-
/**
|
|
636
|
-
* Copyright IBM Corp. 2018, 2023
|
|
637
|
-
*
|
|
638
|
-
* This source code is licensed under the Apache-2.0 license found in the
|
|
639
|
-
* LICENSE file in the root directory of this source tree.
|
|
640
|
-
*/
|
|
641
|
-
const breakpointNames = Object.keys(_carbon_layout.breakpoints);
|
|
642
|
-
function next(name) {
|
|
643
|
-
return breakpointNames[breakpointNames.indexOf(name) + 1];
|
|
644
|
-
}
|
|
645
|
-
function fluid(selector) {
|
|
646
|
-
const { breakpoints: fluidBreakpoints, ...styles } = selector;
|
|
647
|
-
if (typeof fluidBreakpoints !== "object") return styles;
|
|
648
|
-
const fluidBreakpointNames = Object.keys(fluidBreakpoints);
|
|
649
|
-
if (fluidBreakpointNames.length === 0) return styles;
|
|
650
|
-
styles.fontSize = fluidTypeSize(styles, "sm", fluidBreakpoints);
|
|
651
|
-
fluidBreakpointNames.forEach((name) => {
|
|
652
|
-
styles[(0, _carbon_layout.breakpoint)(name)] = {
|
|
653
|
-
...fluidBreakpoints[name],
|
|
654
|
-
fontSize: fluidTypeSize(styles, name, fluidBreakpoints)
|
|
655
|
-
};
|
|
656
|
-
});
|
|
657
|
-
return styles;
|
|
658
|
-
}
|
|
659
|
-
function fluidTypeSize(defaultStyles, fluidBreakpointName, fluidBreakpoints) {
|
|
660
|
-
const breakpoint = _carbon_layout.breakpoints[fluidBreakpointName];
|
|
661
|
-
const fluidBreakpoint = fluidBreakpointName === "sm" ? defaultStyles : fluidBreakpoints[fluidBreakpointName];
|
|
662
|
-
let maxFontSize = defaultStyles.fontSize;
|
|
663
|
-
let minFontSize = defaultStyles.fontSize;
|
|
664
|
-
if (fluidBreakpoint.fontSize) minFontSize = fluidBreakpoint.fontSize;
|
|
665
|
-
let maxViewportWidth = breakpoint.width;
|
|
666
|
-
let minViewportWidth = breakpoint.width;
|
|
667
|
-
let nextBreakpointAvailable = next(fluidBreakpointName);
|
|
668
|
-
let nextFluidBreakpointName = null;
|
|
669
|
-
while (nextBreakpointAvailable) {
|
|
670
|
-
if (fluidBreakpoints[nextBreakpointAvailable]) {
|
|
671
|
-
nextFluidBreakpointName = nextBreakpointAvailable;
|
|
672
|
-
break;
|
|
673
|
-
}
|
|
674
|
-
nextBreakpointAvailable = next(nextBreakpointAvailable);
|
|
675
|
-
}
|
|
676
|
-
if (nextFluidBreakpointName) {
|
|
677
|
-
const nextFluidBreakpoint = _carbon_layout.breakpoints[nextFluidBreakpointName];
|
|
678
|
-
maxFontSize = fluidBreakpoints[nextFluidBreakpointName].fontSize;
|
|
679
|
-
maxViewportWidth = nextFluidBreakpoint.width;
|
|
680
|
-
return `calc(${minFontSize} + ${subtract(maxFontSize, minFontSize)} * ((100vw - ${minViewportWidth}) / ${subtract(maxViewportWidth, minViewportWidth)}))`;
|
|
681
|
-
}
|
|
682
|
-
return minFontSize;
|
|
683
|
-
}
|
|
684
|
-
function subtract(a, b) {
|
|
685
|
-
return parseFloat(a) - parseFloat(b);
|
|
686
|
-
}
|
|
687
683
|
const unstable_tokens = [
|
|
688
684
|
"caption01",
|
|
689
685
|
"caption02",
|
|
@@ -745,14 +741,6 @@ const unstable_tokens = [
|
|
|
745
741
|
"fluidDisplay04"
|
|
746
742
|
];
|
|
747
743
|
//#endregion
|
|
748
|
-
//#region src/index.js
|
|
749
|
-
/**
|
|
750
|
-
* Copyright IBM Corp. 2018, 2023
|
|
751
|
-
*
|
|
752
|
-
* This source code is licensed under the Apache-2.0 license found in the
|
|
753
|
-
* LICENSE file in the root directory of this source tree.
|
|
754
|
-
*/
|
|
755
|
-
//#endregion
|
|
756
744
|
exports.body01 = body01;
|
|
757
745
|
exports.body02 = body02;
|
|
758
746
|
exports.bodyCompact01 = bodyCompact01;
|
package/lib/print.d.ts
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2018, 2026
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
type PrintableBlock = Record<string, number | string>;
|
|
8
|
+
export declare const print: (block: PrintableBlock) => string;
|
|
9
|
+
export {};
|
package/lib/reset.d.ts
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2018, 2026
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
import type { TypeStyle } from './types';
|
|
8
|
+
export declare const reset: Record<'body' | 'code' | 'html' | 'strong', TypeStyle>;
|
package/lib/scale.d.ts
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2018, 2026
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
export declare const getTypeSize: (step: number) => number;
|
|
8
|
+
/**
|
|
9
|
+
* Default type scale with 23 steps.
|
|
10
|
+
*
|
|
11
|
+
* Generated with:
|
|
12
|
+
* ```ts
|
|
13
|
+
* Array.from({ length: 23 }, (_, i) => getTypeSize(i + 1))
|
|
14
|
+
* ```
|
|
15
|
+
*/
|
|
16
|
+
export declare const scale: number[];
|