@fluid-topics/ft-typography 1.0.59 → 1.0.60
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/build/ft-typography.css.d.ts +23 -0
- package/build/ft-typography.css.helper.d.ts +3 -0
- package/build/ft-typography.css.helper.js +13 -0
- package/build/ft-typography.css.js +93 -68
- package/build/ft-typography.d.ts +1 -1
- package/build/ft-typography.js +3 -2
- package/build/ft-typography.light.js +86 -79
- package/build/ft-typography.min.js +94 -87
- package/build/ft-typography.properties.d.ts +23 -1
- package/build/ft-typography.properties.js +23 -0
- package/package.json +4 -3
|
@@ -97,3 +97,26 @@ export declare const FtTypographyBreadcrumb: import("lit").CSSResult;
|
|
|
97
97
|
export declare const FtTypographyOverline: import("lit").CSSResult;
|
|
98
98
|
export declare const FtTypographyButton: import("lit").CSSResult;
|
|
99
99
|
export declare const FtTypographyStyles: import("lit").CSSResult;
|
|
100
|
+
export { typographyDisplay as FtTypographyDisplayCssVariables } from "@fluid-topics/design-system-variables";
|
|
101
|
+
export { typographyTitle1 as FtTypographyTitle1CssVariables } from "@fluid-topics/design-system-variables";
|
|
102
|
+
export { typographyTitle2 as FtTypographyTitle2CssVariables } from "@fluid-topics/design-system-variables";
|
|
103
|
+
export { typographyTitle3 as FtTypographyTitle3CssVariables } from "@fluid-topics/design-system-variables";
|
|
104
|
+
export { typographyBody1Regular as FtTypographyBody1RegularCssVariables } from "@fluid-topics/design-system-variables";
|
|
105
|
+
export { typographyBody1Medium as FtTypographyBody1MediumCssVariables } from "@fluid-topics/design-system-variables";
|
|
106
|
+
export { typographyBody1Semibold as FtTypographyBody1SemiboldCssVariables } from "@fluid-topics/design-system-variables";
|
|
107
|
+
export { typographyBody2Regular as FtTypographyBody2RegularCssVariables } from "@fluid-topics/design-system-variables";
|
|
108
|
+
export { typographyBody2Medium as FtTypographyBody2MediumCssVariables } from "@fluid-topics/design-system-variables";
|
|
109
|
+
export { typographyBody2Semibold as FtTypographyBody2SemiboldCssVariables } from "@fluid-topics/design-system-variables";
|
|
110
|
+
export { typographyLabel1Medium as FtTypographyLabel1MediumCssVariables } from "@fluid-topics/design-system-variables";
|
|
111
|
+
export { typographyLabel1Semibold as FtTypographyLabel1SemiboldCssVariables } from "@fluid-topics/design-system-variables";
|
|
112
|
+
export { typographyLabel1Bold as FtTypographyLabel1BoldCssVariables } from "@fluid-topics/design-system-variables";
|
|
113
|
+
export { typographyLabel2Medium as FtTypographyLabel2MediumCssVariables } from "@fluid-topics/design-system-variables";
|
|
114
|
+
export { typographyLabel2Semibold as FtTypographyLabel2SemiboldCssVariables } from "@fluid-topics/design-system-variables";
|
|
115
|
+
export { typographyLabel2Bold as FtTypographyLabel2BoldCssVariables } from "@fluid-topics/design-system-variables";
|
|
116
|
+
export { typographyCaption1Medium as FtTypographyCaption1MediumCssVariables } from "@fluid-topics/design-system-variables";
|
|
117
|
+
export { typographyCaption1Semibold as FtTypographyCaption1SemiboldCssVariables } from "@fluid-topics/design-system-variables";
|
|
118
|
+
export { typographyCaption1Bold as FtTypographyCaption1BoldCssVariables } from "@fluid-topics/design-system-variables";
|
|
119
|
+
export { typographyCaption2Medium as FtTypographyCaption2MediumCssVariables } from "@fluid-topics/design-system-variables";
|
|
120
|
+
export { typographyCaption2Semibold as FtTypographyCaption2SemiboldCssVariables } from "@fluid-topics/design-system-variables";
|
|
121
|
+
export { typographyCaption2Bold as FtTypographyCaption2BoldCssVariables } from "@fluid-topics/design-system-variables";
|
|
122
|
+
export declare const FtdsTypographyStyles: import("lit").CSSResult[][];
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { css } from "lit";
|
|
2
|
+
import { typographies } from "@fluid-topics/design-system-variables";
|
|
3
|
+
export function buildDsTypographyCss(variant) {
|
|
4
|
+
const typographyVariables = typographies[variant];
|
|
5
|
+
return css `
|
|
6
|
+
font-family: ${typographyVariables.fontFamily};
|
|
7
|
+
font-size: ${typographyVariables.fontSize};
|
|
8
|
+
font-weight: ${typographyVariables.fontWeight};
|
|
9
|
+
letter-spacing: ${typographyVariables.letterSpacing};
|
|
10
|
+
line-height: ${typographyVariables.lineHeight};
|
|
11
|
+
text-transform: ${typographyVariables.textCase};
|
|
12
|
+
`;
|
|
13
|
+
}
|
|
@@ -1,94 +1,96 @@
|
|
|
1
1
|
import { css } from "lit";
|
|
2
|
-
import { designSystemVariables, FtCssVariableFactory } from "@fluid-topics/ft-wc-utils";
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
import { designSystemVariables, FtCssVariableFactory, } from "@fluid-topics/ft-wc-utils";
|
|
3
|
+
import { typographies, } from "@fluid-topics/design-system-variables";
|
|
4
|
+
import { buildDsTypographyCss } from "./ft-typography.css.helper";
|
|
5
|
+
const titleFontFamily = FtCssVariableFactory.extend("--ft-typography-font-family", "", designSystemVariables.titleFont);
|
|
6
|
+
const contentFontFamily = FtCssVariableFactory.extend("--ft-typography-font-family", "", designSystemVariables.contentFont);
|
|
5
7
|
export const FtTypographyCssVariables = {
|
|
6
8
|
fontFamily: contentFontFamily,
|
|
7
|
-
fontSize: FtCssVariableFactory.create("--ft-typography-font-size", "SIZE", "16px"),
|
|
8
|
-
fontWeight: FtCssVariableFactory.create("--ft-typography-font-weight", "UNKNOWN", "normal"),
|
|
9
|
-
letterSpacing: FtCssVariableFactory.create("--ft-typography-letter-spacing", "SIZE", "0.496px"),
|
|
10
|
-
lineHeight: FtCssVariableFactory.create("--ft-typography-line-height", "NUMBER", "1.5"),
|
|
11
|
-
textTransform: FtCssVariableFactory.create("--ft-typography-text-transform", "UNKNOWN", "inherit"),
|
|
9
|
+
fontSize: FtCssVariableFactory.create("--ft-typography-font-size", "", "SIZE", "16px"),
|
|
10
|
+
fontWeight: FtCssVariableFactory.create("--ft-typography-font-weight", "", "UNKNOWN", "normal"),
|
|
11
|
+
letterSpacing: FtCssVariableFactory.create("--ft-typography-letter-spacing", "", "SIZE", "0.496px"),
|
|
12
|
+
lineHeight: FtCssVariableFactory.create("--ft-typography-line-height", "", "NUMBER", "1.5"),
|
|
13
|
+
textTransform: FtCssVariableFactory.create("--ft-typography-text-transform", "", "UNKNOWN", "inherit"),
|
|
12
14
|
};
|
|
13
15
|
export const FtTypographyTitleCssVariables = {
|
|
14
|
-
fontFamily: FtCssVariableFactory.extend("--ft-typography-title-font-family", titleFontFamily),
|
|
15
|
-
fontSize: FtCssVariableFactory.extend("--ft-typography-title-font-size", FtTypographyCssVariables.fontSize, "20px"),
|
|
16
|
-
fontWeight: FtCssVariableFactory.extend("--ft-typography-title-font-weight", FtTypographyCssVariables.fontWeight, "normal"),
|
|
17
|
-
letterSpacing: FtCssVariableFactory.extend("--ft-typography-title-letter-spacing", FtTypographyCssVariables.letterSpacing, "0.15px"),
|
|
18
|
-
lineHeight: FtCssVariableFactory.extend("--ft-typography-title-line-height", FtTypographyCssVariables.lineHeight, "1.2"),
|
|
19
|
-
textTransform: FtCssVariableFactory.extend("--ft-typography-title-text-transform", FtTypographyCssVariables.textTransform, "inherit"),
|
|
16
|
+
fontFamily: FtCssVariableFactory.extend("--ft-typography-title-font-family", "", titleFontFamily),
|
|
17
|
+
fontSize: FtCssVariableFactory.extend("--ft-typography-title-font-size", "", FtTypographyCssVariables.fontSize, "20px"),
|
|
18
|
+
fontWeight: FtCssVariableFactory.extend("--ft-typography-title-font-weight", "", FtTypographyCssVariables.fontWeight, "normal"),
|
|
19
|
+
letterSpacing: FtCssVariableFactory.extend("--ft-typography-title-letter-spacing", "", FtTypographyCssVariables.letterSpacing, "0.15px"),
|
|
20
|
+
lineHeight: FtCssVariableFactory.extend("--ft-typography-title-line-height", "", FtTypographyCssVariables.lineHeight, "1.2"),
|
|
21
|
+
textTransform: FtCssVariableFactory.extend("--ft-typography-title-text-transform", "", FtTypographyCssVariables.textTransform, "inherit"),
|
|
20
22
|
};
|
|
21
23
|
export const FtTypographyTitleDenseCssVariables = {
|
|
22
|
-
fontFamily: FtCssVariableFactory.extend("--ft-typography-title-dense-font-family", titleFontFamily),
|
|
23
|
-
fontSize: FtCssVariableFactory.extend("--ft-typography-title-dense-font-size", FtTypographyCssVariables.fontSize, "14px"),
|
|
24
|
-
fontWeight: FtCssVariableFactory.extend("--ft-typography-title-dense-font-weight", FtTypographyCssVariables.fontWeight, "normal"),
|
|
25
|
-
letterSpacing: FtCssVariableFactory.extend("--ft-typography-title-dense-letter-spacing", FtTypographyCssVariables.letterSpacing, "0.105px"),
|
|
26
|
-
lineHeight: FtCssVariableFactory.extend("--ft-typography-title-dense-line-height", FtTypographyCssVariables.lineHeight, "1.7"),
|
|
27
|
-
textTransform: FtCssVariableFactory.extend("--ft-typography-title-dense-text-transform", FtTypographyCssVariables.textTransform, "inherit"),
|
|
24
|
+
fontFamily: FtCssVariableFactory.extend("--ft-typography-title-dense-font-family", "", titleFontFamily),
|
|
25
|
+
fontSize: FtCssVariableFactory.extend("--ft-typography-title-dense-font-size", "", FtTypographyCssVariables.fontSize, "14px"),
|
|
26
|
+
fontWeight: FtCssVariableFactory.extend("--ft-typography-title-dense-font-weight", "", FtTypographyCssVariables.fontWeight, "normal"),
|
|
27
|
+
letterSpacing: FtCssVariableFactory.extend("--ft-typography-title-dense-letter-spacing", "", FtTypographyCssVariables.letterSpacing, "0.105px"),
|
|
28
|
+
lineHeight: FtCssVariableFactory.extend("--ft-typography-title-dense-line-height", "", FtTypographyCssVariables.lineHeight, "1.7"),
|
|
29
|
+
textTransform: FtCssVariableFactory.extend("--ft-typography-title-dense-text-transform", "", FtTypographyCssVariables.textTransform, "inherit"),
|
|
28
30
|
};
|
|
29
31
|
export const FtTypographySubtitle1CssVariables = {
|
|
30
|
-
fontFamily: FtCssVariableFactory.extend("--ft-typography-subtitle1-font-family", contentFontFamily),
|
|
31
|
-
fontSize: FtCssVariableFactory.extend("--ft-typography-subtitle1-font-size", FtTypographyCssVariables.fontSize, "16px"),
|
|
32
|
-
fontWeight: FtCssVariableFactory.extend("--ft-typography-subtitle1-font-weight", FtTypographyCssVariables.fontWeight, "600"),
|
|
33
|
-
letterSpacing: FtCssVariableFactory.extend("--ft-typography-subtitle1-letter-spacing", FtTypographyCssVariables.letterSpacing, "0.144px"),
|
|
34
|
-
lineHeight: FtCssVariableFactory.extend("--ft-typography-subtitle1-line-height", FtTypographyCssVariables.lineHeight, "1.5"),
|
|
35
|
-
textTransform: FtCssVariableFactory.extend("--ft-typography-subtitle1-text-transform", FtTypographyCssVariables.textTransform, "inherit"),
|
|
32
|
+
fontFamily: FtCssVariableFactory.extend("--ft-typography-subtitle1-font-family", "", contentFontFamily),
|
|
33
|
+
fontSize: FtCssVariableFactory.extend("--ft-typography-subtitle1-font-size", "", FtTypographyCssVariables.fontSize, "16px"),
|
|
34
|
+
fontWeight: FtCssVariableFactory.extend("--ft-typography-subtitle1-font-weight", "", FtTypographyCssVariables.fontWeight, "600"),
|
|
35
|
+
letterSpacing: FtCssVariableFactory.extend("--ft-typography-subtitle1-letter-spacing", "", FtTypographyCssVariables.letterSpacing, "0.144px"),
|
|
36
|
+
lineHeight: FtCssVariableFactory.extend("--ft-typography-subtitle1-line-height", "", FtTypographyCssVariables.lineHeight, "1.5"),
|
|
37
|
+
textTransform: FtCssVariableFactory.extend("--ft-typography-subtitle1-text-transform", "", FtTypographyCssVariables.textTransform, "inherit"),
|
|
36
38
|
};
|
|
37
39
|
export const FtTypographySubtitle2CssVariables = {
|
|
38
|
-
fontFamily: FtCssVariableFactory.extend("--ft-typography-subtitle2-font-family", contentFontFamily),
|
|
39
|
-
fontSize: FtCssVariableFactory.extend("--ft-typography-subtitle2-font-size", FtTypographyCssVariables.fontSize, "14px"),
|
|
40
|
-
fontWeight: FtCssVariableFactory.extend("--ft-typography-subtitle2-font-weight", FtTypographyCssVariables.fontWeight, "normal"),
|
|
41
|
-
letterSpacing: FtCssVariableFactory.extend("--ft-typography-subtitle2-letter-spacing", FtTypographyCssVariables.letterSpacing, "0.098px"),
|
|
42
|
-
lineHeight: FtCssVariableFactory.extend("--ft-typography-subtitle2-line-height", FtTypographyCssVariables.lineHeight, "1.7"),
|
|
43
|
-
textTransform: FtCssVariableFactory.extend("--ft-typography-subtitle2-text-transform", FtTypographyCssVariables.textTransform, "inherit"),
|
|
40
|
+
fontFamily: FtCssVariableFactory.extend("--ft-typography-subtitle2-font-family", "", contentFontFamily),
|
|
41
|
+
fontSize: FtCssVariableFactory.extend("--ft-typography-subtitle2-font-size", "", FtTypographyCssVariables.fontSize, "14px"),
|
|
42
|
+
fontWeight: FtCssVariableFactory.extend("--ft-typography-subtitle2-font-weight", "", FtTypographyCssVariables.fontWeight, "normal"),
|
|
43
|
+
letterSpacing: FtCssVariableFactory.extend("--ft-typography-subtitle2-letter-spacing", "", FtTypographyCssVariables.letterSpacing, "0.098px"),
|
|
44
|
+
lineHeight: FtCssVariableFactory.extend("--ft-typography-subtitle2-line-height", "", FtTypographyCssVariables.lineHeight, "1.7"),
|
|
45
|
+
textTransform: FtCssVariableFactory.extend("--ft-typography-subtitle2-text-transform", "", FtTypographyCssVariables.textTransform, "inherit"),
|
|
44
46
|
};
|
|
45
47
|
export const FtTypographyBody1CssVariables = {
|
|
46
|
-
fontFamily: FtCssVariableFactory.extend("--ft-typography-body1-font-family", contentFontFamily),
|
|
47
|
-
fontSize: FtCssVariableFactory.extend("--ft-typography-body1-font-size", FtTypographyCssVariables.fontSize, "16px"),
|
|
48
|
-
fontWeight: FtCssVariableFactory.extend("--ft-typography-body1-font-weight", FtTypographyCssVariables.fontWeight, "normal"),
|
|
49
|
-
letterSpacing: FtCssVariableFactory.extend("--ft-typography-body1-letter-spacing", FtTypographyCssVariables.letterSpacing, "0.496px"),
|
|
50
|
-
lineHeight: FtCssVariableFactory.extend("--ft-typography-body1-line-height", FtTypographyCssVariables.lineHeight, "1.5"),
|
|
51
|
-
textTransform: FtCssVariableFactory.extend("--ft-typography-body1-text-transform", FtTypographyCssVariables.textTransform, "inherit"),
|
|
48
|
+
fontFamily: FtCssVariableFactory.extend("--ft-typography-body1-font-family", "", contentFontFamily),
|
|
49
|
+
fontSize: FtCssVariableFactory.extend("--ft-typography-body1-font-size", "", FtTypographyCssVariables.fontSize, "16px"),
|
|
50
|
+
fontWeight: FtCssVariableFactory.extend("--ft-typography-body1-font-weight", "", FtTypographyCssVariables.fontWeight, "normal"),
|
|
51
|
+
letterSpacing: FtCssVariableFactory.extend("--ft-typography-body1-letter-spacing", "", FtTypographyCssVariables.letterSpacing, "0.496px"),
|
|
52
|
+
lineHeight: FtCssVariableFactory.extend("--ft-typography-body1-line-height", "", FtTypographyCssVariables.lineHeight, "1.5"),
|
|
53
|
+
textTransform: FtCssVariableFactory.extend("--ft-typography-body1-text-transform", "", FtTypographyCssVariables.textTransform, "inherit"),
|
|
52
54
|
};
|
|
53
55
|
export const FtTypographyBody2CssVariables = {
|
|
54
|
-
fontFamily: FtCssVariableFactory.extend("--ft-typography-body2-font-family", contentFontFamily),
|
|
55
|
-
fontSize: FtCssVariableFactory.extend("--ft-typography-body2-font-size", FtTypographyCssVariables.fontSize, "14px"),
|
|
56
|
-
fontWeight: FtCssVariableFactory.extend("--ft-typography-body2-font-weight", FtTypographyCssVariables.fontWeight, "normal"),
|
|
57
|
-
letterSpacing: FtCssVariableFactory.extend("--ft-typography-body2-letter-spacing", FtTypographyCssVariables.letterSpacing, "0.252px"),
|
|
58
|
-
lineHeight: FtCssVariableFactory.extend("--ft-typography-body2-line-height", FtTypographyCssVariables.lineHeight, "1.4"),
|
|
59
|
-
textTransform: FtCssVariableFactory.extend("--ft-typography-body2-text-transform", FtTypographyCssVariables.textTransform, "inherit"),
|
|
56
|
+
fontFamily: FtCssVariableFactory.extend("--ft-typography-body2-font-family", "", contentFontFamily),
|
|
57
|
+
fontSize: FtCssVariableFactory.extend("--ft-typography-body2-font-size", "", FtTypographyCssVariables.fontSize, "14px"),
|
|
58
|
+
fontWeight: FtCssVariableFactory.extend("--ft-typography-body2-font-weight", "", FtTypographyCssVariables.fontWeight, "normal"),
|
|
59
|
+
letterSpacing: FtCssVariableFactory.extend("--ft-typography-body2-letter-spacing", "", FtTypographyCssVariables.letterSpacing, "0.252px"),
|
|
60
|
+
lineHeight: FtCssVariableFactory.extend("--ft-typography-body2-line-height", "", FtTypographyCssVariables.lineHeight, "1.4"),
|
|
61
|
+
textTransform: FtCssVariableFactory.extend("--ft-typography-body2-text-transform", "", FtTypographyCssVariables.textTransform, "inherit"),
|
|
60
62
|
};
|
|
61
63
|
export const FtTypographyCaptionCssVariables = {
|
|
62
|
-
fontFamily: FtCssVariableFactory.extend("--ft-typography-caption-font-family", contentFontFamily),
|
|
63
|
-
fontSize: FtCssVariableFactory.extend("--ft-typography-caption-font-size", FtTypographyCssVariables.fontSize, "12px"),
|
|
64
|
-
fontWeight: FtCssVariableFactory.extend("--ft-typography-caption-font-weight", FtTypographyCssVariables.fontWeight, "normal"),
|
|
65
|
-
letterSpacing: FtCssVariableFactory.extend("--ft-typography-caption-letter-spacing", FtTypographyCssVariables.letterSpacing, "0.396px"),
|
|
66
|
-
lineHeight: FtCssVariableFactory.extend("--ft-typography-caption-line-height", FtTypographyCssVariables.lineHeight, "1.33"),
|
|
67
|
-
textTransform: FtCssVariableFactory.extend("--ft-typography-caption-text-transform", FtTypographyCssVariables.textTransform, "inherit"),
|
|
64
|
+
fontFamily: FtCssVariableFactory.extend("--ft-typography-caption-font-family", "", contentFontFamily),
|
|
65
|
+
fontSize: FtCssVariableFactory.extend("--ft-typography-caption-font-size", "", FtTypographyCssVariables.fontSize, "12px"),
|
|
66
|
+
fontWeight: FtCssVariableFactory.extend("--ft-typography-caption-font-weight", "", FtTypographyCssVariables.fontWeight, "normal"),
|
|
67
|
+
letterSpacing: FtCssVariableFactory.extend("--ft-typography-caption-letter-spacing", "", FtTypographyCssVariables.letterSpacing, "0.396px"),
|
|
68
|
+
lineHeight: FtCssVariableFactory.extend("--ft-typography-caption-line-height", "", FtTypographyCssVariables.lineHeight, "1.33"),
|
|
69
|
+
textTransform: FtCssVariableFactory.extend("--ft-typography-caption-text-transform", "", FtTypographyCssVariables.textTransform, "inherit"),
|
|
68
70
|
};
|
|
69
71
|
export const FtTypographyBreadcrumbCssVariables = {
|
|
70
|
-
fontFamily: FtCssVariableFactory.extend("--ft-typography-breadcrumb-font-family", contentFontFamily),
|
|
71
|
-
fontSize: FtCssVariableFactory.extend("--ft-typography-breadcrumb-font-size", FtTypographyCssVariables.fontSize, "10px"),
|
|
72
|
-
fontWeight: FtCssVariableFactory.extend("--ft-typography-breadcrumb-font-weight", FtTypographyCssVariables.fontWeight, "normal"),
|
|
73
|
-
letterSpacing: FtCssVariableFactory.extend("--ft-typography-breadcrumb-letter-spacing", FtTypographyCssVariables.letterSpacing, "0.33px"),
|
|
74
|
-
lineHeight: FtCssVariableFactory.extend("--ft-typography-breadcrumb-line-height", FtTypographyCssVariables.lineHeight, "1.6"),
|
|
75
|
-
textTransform: FtCssVariableFactory.extend("--ft-typography-breadcrumb-text-transform", FtTypographyCssVariables.textTransform, "inherit"),
|
|
72
|
+
fontFamily: FtCssVariableFactory.extend("--ft-typography-breadcrumb-font-family", "", contentFontFamily),
|
|
73
|
+
fontSize: FtCssVariableFactory.extend("--ft-typography-breadcrumb-font-size", "", FtTypographyCssVariables.fontSize, "10px"),
|
|
74
|
+
fontWeight: FtCssVariableFactory.extend("--ft-typography-breadcrumb-font-weight", "", FtTypographyCssVariables.fontWeight, "normal"),
|
|
75
|
+
letterSpacing: FtCssVariableFactory.extend("--ft-typography-breadcrumb-letter-spacing", "", FtTypographyCssVariables.letterSpacing, "0.33px"),
|
|
76
|
+
lineHeight: FtCssVariableFactory.extend("--ft-typography-breadcrumb-line-height", "", FtTypographyCssVariables.lineHeight, "1.6"),
|
|
77
|
+
textTransform: FtCssVariableFactory.extend("--ft-typography-breadcrumb-text-transform", "", FtTypographyCssVariables.textTransform, "inherit"),
|
|
76
78
|
};
|
|
77
79
|
export const FtTypographyOverlineCssVariables = {
|
|
78
|
-
fontFamily: FtCssVariableFactory.extend("--ft-typography-overline-font-family", contentFontFamily),
|
|
79
|
-
fontSize: FtCssVariableFactory.extend("--ft-typography-overline-font-size", FtTypographyCssVariables.fontSize, "10px"),
|
|
80
|
-
fontWeight: FtCssVariableFactory.extend("--ft-typography-overline-font-weight", FtTypographyCssVariables.fontWeight, "normal"),
|
|
81
|
-
letterSpacing: FtCssVariableFactory.extend("--ft-typography-overline-letter-spacing", FtTypographyCssVariables.letterSpacing, "1.5px"),
|
|
82
|
-
lineHeight: FtCssVariableFactory.extend("--ft-typography-overline-line-height", FtTypographyCssVariables.lineHeight, "1.6"),
|
|
83
|
-
textTransform: FtCssVariableFactory.extend("--ft-typography-overline-text-transform", FtTypographyCssVariables.textTransform, "uppercase"),
|
|
80
|
+
fontFamily: FtCssVariableFactory.extend("--ft-typography-overline-font-family", "", contentFontFamily),
|
|
81
|
+
fontSize: FtCssVariableFactory.extend("--ft-typography-overline-font-size", "", FtTypographyCssVariables.fontSize, "10px"),
|
|
82
|
+
fontWeight: FtCssVariableFactory.extend("--ft-typography-overline-font-weight", "", FtTypographyCssVariables.fontWeight, "normal"),
|
|
83
|
+
letterSpacing: FtCssVariableFactory.extend("--ft-typography-overline-letter-spacing", "", FtTypographyCssVariables.letterSpacing, "1.5px"),
|
|
84
|
+
lineHeight: FtCssVariableFactory.extend("--ft-typography-overline-line-height", "", FtTypographyCssVariables.lineHeight, "1.6"),
|
|
85
|
+
textTransform: FtCssVariableFactory.extend("--ft-typography-overline-text-transform", "", FtTypographyCssVariables.textTransform, "uppercase"),
|
|
84
86
|
};
|
|
85
87
|
export const FtTypographyButtonCssVariables = {
|
|
86
|
-
fontFamily: FtCssVariableFactory.extend("--ft-typography-button-font-family", contentFontFamily),
|
|
87
|
-
fontSize: FtCssVariableFactory.extend("--ft-typography-button-font-size", FtTypographyCssVariables.fontSize, "14px"),
|
|
88
|
-
fontWeight: FtCssVariableFactory.extend("--ft-typography-button-font-weight", FtTypographyCssVariables.fontWeight, "600"),
|
|
89
|
-
letterSpacing: FtCssVariableFactory.extend("--ft-typography-button-letter-spacing", FtTypographyCssVariables.letterSpacing, "1.246px"),
|
|
90
|
-
lineHeight: FtCssVariableFactory.extend("--ft-typography-button-line-height", FtTypographyCssVariables.lineHeight, "1.15"),
|
|
91
|
-
textTransform: FtCssVariableFactory.extend("--ft-typography-button-text-transform", FtTypographyCssVariables.textTransform, "uppercase"),
|
|
88
|
+
fontFamily: FtCssVariableFactory.extend("--ft-typography-button-font-family", "", contentFontFamily),
|
|
89
|
+
fontSize: FtCssVariableFactory.extend("--ft-typography-button-font-size", "", FtTypographyCssVariables.fontSize, "14px"),
|
|
90
|
+
fontWeight: FtCssVariableFactory.extend("--ft-typography-button-font-weight", "", FtTypographyCssVariables.fontWeight, "600"),
|
|
91
|
+
letterSpacing: FtCssVariableFactory.extend("--ft-typography-button-letter-spacing", "", FtTypographyCssVariables.letterSpacing, "1.246px"),
|
|
92
|
+
lineHeight: FtCssVariableFactory.extend("--ft-typography-button-line-height", "", FtTypographyCssVariables.lineHeight, "1.15"),
|
|
93
|
+
textTransform: FtCssVariableFactory.extend("--ft-typography-button-text-transform", "", FtTypographyCssVariables.textTransform, "uppercase"),
|
|
92
94
|
};
|
|
93
95
|
// language=CSS
|
|
94
96
|
export const FtTypographyTitle = css `
|
|
@@ -207,3 +209,26 @@ export const FtTypographyStyles = css `
|
|
|
207
209
|
vertical-align: inherit;
|
|
208
210
|
}
|
|
209
211
|
`;
|
|
212
|
+
export { typographyDisplay as FtTypographyDisplayCssVariables } from "@fluid-topics/design-system-variables";
|
|
213
|
+
export { typographyTitle1 as FtTypographyTitle1CssVariables } from "@fluid-topics/design-system-variables";
|
|
214
|
+
export { typographyTitle2 as FtTypographyTitle2CssVariables } from "@fluid-topics/design-system-variables";
|
|
215
|
+
export { typographyTitle3 as FtTypographyTitle3CssVariables } from "@fluid-topics/design-system-variables";
|
|
216
|
+
export { typographyBody1Regular as FtTypographyBody1RegularCssVariables } from "@fluid-topics/design-system-variables";
|
|
217
|
+
export { typographyBody1Medium as FtTypographyBody1MediumCssVariables } from "@fluid-topics/design-system-variables";
|
|
218
|
+
export { typographyBody1Semibold as FtTypographyBody1SemiboldCssVariables } from "@fluid-topics/design-system-variables";
|
|
219
|
+
export { typographyBody2Regular as FtTypographyBody2RegularCssVariables } from "@fluid-topics/design-system-variables";
|
|
220
|
+
export { typographyBody2Medium as FtTypographyBody2MediumCssVariables } from "@fluid-topics/design-system-variables";
|
|
221
|
+
export { typographyBody2Semibold as FtTypographyBody2SemiboldCssVariables } from "@fluid-topics/design-system-variables";
|
|
222
|
+
export { typographyLabel1Medium as FtTypographyLabel1MediumCssVariables } from "@fluid-topics/design-system-variables";
|
|
223
|
+
export { typographyLabel1Semibold as FtTypographyLabel1SemiboldCssVariables } from "@fluid-topics/design-system-variables";
|
|
224
|
+
export { typographyLabel1Bold as FtTypographyLabel1BoldCssVariables } from "@fluid-topics/design-system-variables";
|
|
225
|
+
export { typographyLabel2Medium as FtTypographyLabel2MediumCssVariables } from "@fluid-topics/design-system-variables";
|
|
226
|
+
export { typographyLabel2Semibold as FtTypographyLabel2SemiboldCssVariables } from "@fluid-topics/design-system-variables";
|
|
227
|
+
export { typographyLabel2Bold as FtTypographyLabel2BoldCssVariables } from "@fluid-topics/design-system-variables";
|
|
228
|
+
export { typographyCaption1Medium as FtTypographyCaption1MediumCssVariables } from "@fluid-topics/design-system-variables";
|
|
229
|
+
export { typographyCaption1Semibold as FtTypographyCaption1SemiboldCssVariables } from "@fluid-topics/design-system-variables";
|
|
230
|
+
export { typographyCaption1Bold as FtTypographyCaption1BoldCssVariables } from "@fluid-topics/design-system-variables";
|
|
231
|
+
export { typographyCaption2Medium as FtTypographyCaption2MediumCssVariables } from "@fluid-topics/design-system-variables";
|
|
232
|
+
export { typographyCaption2Semibold as FtTypographyCaption2SemiboldCssVariables } from "@fluid-topics/design-system-variables";
|
|
233
|
+
export { typographyCaption2Bold as FtTypographyCaption2BoldCssVariables } from "@fluid-topics/design-system-variables";
|
|
234
|
+
export const FtdsTypographyStyles = [Object.keys(typographies).map(v => buildDsTypographyCss(v))];
|
package/build/ft-typography.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { FtLitElement } from "@fluid-topics/ft-wc-utils";
|
|
2
2
|
import { FtTypographyProperties, FtTypographyVariants } from "./ft-typography.properties";
|
|
3
3
|
export declare class FtTypography extends FtLitElement implements FtTypographyProperties {
|
|
4
|
-
static styles: import("lit").CSSResult[];
|
|
4
|
+
static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
|
|
5
5
|
element?: string;
|
|
6
6
|
variant: FtTypographyVariants;
|
|
7
7
|
protected render(): import("lit-html").TemplateResult;
|
package/build/ft-typography.js
CHANGED
|
@@ -8,7 +8,7 @@ import { html, unsafeStatic } from "lit/static-html.js";
|
|
|
8
8
|
import { property } from "lit/decorators.js";
|
|
9
9
|
import { FtLitElement } from "@fluid-topics/ft-wc-utils";
|
|
10
10
|
import { FtTypographyVariants } from "./ft-typography.properties";
|
|
11
|
-
import { FtTypographyBody1, FtTypographyBody2, FtTypographyBreadcrumb, FtTypographyButton, FtTypographyCaption, FtTypographyOverline, FtTypographyStyles, FtTypographySubtitle1, FtTypographySubtitle2, FtTypographyTitle, FtTypographyTitleDense } from "./ft-typography.css";
|
|
11
|
+
import { FtdsTypographyStyles, FtTypographyBody1, FtTypographyBody2, FtTypographyBreadcrumb, FtTypographyButton, FtTypographyCaption, FtTypographyOverline, FtTypographyStyles, FtTypographySubtitle1, FtTypographySubtitle2, FtTypographyTitle, FtTypographyTitleDense } from "./ft-typography.css";
|
|
12
12
|
class FtTypography extends FtLitElement {
|
|
13
13
|
constructor() {
|
|
14
14
|
super(...arguments);
|
|
@@ -18,7 +18,7 @@ class FtTypography extends FtLitElement {
|
|
|
18
18
|
if (this.element) {
|
|
19
19
|
return html `
|
|
20
20
|
<${unsafeStatic(this.element)}
|
|
21
|
-
|
|
21
|
+
class="ft-typography ft-typography--${this.variant}">
|
|
22
22
|
<slot></slot>
|
|
23
23
|
</${unsafeStatic(this.element)}>
|
|
24
24
|
`;
|
|
@@ -41,6 +41,7 @@ FtTypography.styles = [
|
|
|
41
41
|
FtTypographyOverline,
|
|
42
42
|
FtTypographyButton,
|
|
43
43
|
FtTypographyStyles,
|
|
44
|
+
...FtdsTypographyStyles
|
|
44
45
|
];
|
|
45
46
|
__decorate([
|
|
46
47
|
property()
|