@gem-sdk/core 1.24.4 → 1.24.9
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.
|
@@ -18,20 +18,21 @@ const composeTypographyCss = (typography)=>{
|
|
|
18
18
|
${lineHeight ? `line-height: ${lineHeight};` : ''}
|
|
19
19
|
`;
|
|
20
20
|
};
|
|
21
|
-
const composeTypographyV2Css = (typography)=>{
|
|
21
|
+
const composeTypographyV2Css = (typography, isImportant)=>{
|
|
22
22
|
const typographyCustom = typography?.custom;
|
|
23
23
|
const { fontFamily, fontSize, fontWeight, lineHeight, letterSpacing } = typographyCustom ?? {};
|
|
24
24
|
const typographyAttrs = typography?.attrs;
|
|
25
25
|
const { bold, italic, underline, transform } = typographyAttrs ?? {};
|
|
26
|
+
const composeImportant = isImportant ? '!important' : '';
|
|
26
27
|
return `
|
|
27
|
-
${fontFamily ? `font-family: var(--g-font-${fontFamily}, ${fontFamily});` : ''}
|
|
28
|
-
${fontSize?.desktop ? `font-size: ${fontSize?.desktop};` : ''}
|
|
29
|
-
${bold ? `font-weight: bold;` : fontWeight ? `font-weight: ${fontWeight};` : ''}
|
|
30
|
-
${letterSpacing ? `letter-spacing: ${letterSpacing};` : ''}
|
|
31
|
-
${lineHeight ? `line-height: ${lineHeight};` : ''}
|
|
32
|
-
${italic ? `font-style: italic;` : ''}
|
|
33
|
-
${underline ? `text-decoration-line: underline;` : ''}
|
|
34
|
-
${transform ? `text-transform: ${transform};` : ''}
|
|
28
|
+
${fontFamily ? `font-family: var(--g-font-${fontFamily}, ${fontFamily}) ${composeImportant};` : ''}
|
|
29
|
+
${fontSize?.desktop ? `font-size: ${fontSize?.desktop} ${composeImportant};` : ''}
|
|
30
|
+
${bold ? `font-weight: bold;` : fontWeight ? `font-weight: ${fontWeight} ${composeImportant};` : ''}
|
|
31
|
+
${letterSpacing ? `letter-spacing: ${letterSpacing} ${composeImportant};` : ''}
|
|
32
|
+
${lineHeight ? `line-height: ${lineHeight} ${composeImportant};` : ''}
|
|
33
|
+
${italic ? `font-style: italic${composeImportant};` : ''}
|
|
34
|
+
${underline ? `text-decoration-line: underline ${composeImportant};` : ''}
|
|
35
|
+
${transform ? `text-transform: ${transform} ${composeImportant};` : ''}
|
|
35
36
|
`;
|
|
36
37
|
};
|
|
37
38
|
function getCustomCSSByDevice(typography, device) {
|
|
@@ -16,20 +16,21 @@ const composeTypographyCss = (typography)=>{
|
|
|
16
16
|
${lineHeight ? `line-height: ${lineHeight};` : ''}
|
|
17
17
|
`;
|
|
18
18
|
};
|
|
19
|
-
const composeTypographyV2Css = (typography)=>{
|
|
19
|
+
const composeTypographyV2Css = (typography, isImportant)=>{
|
|
20
20
|
const typographyCustom = typography?.custom;
|
|
21
21
|
const { fontFamily, fontSize, fontWeight, lineHeight, letterSpacing } = typographyCustom ?? {};
|
|
22
22
|
const typographyAttrs = typography?.attrs;
|
|
23
23
|
const { bold, italic, underline, transform } = typographyAttrs ?? {};
|
|
24
|
+
const composeImportant = isImportant ? '!important' : '';
|
|
24
25
|
return `
|
|
25
|
-
${fontFamily ? `font-family: var(--g-font-${fontFamily}, ${fontFamily});` : ''}
|
|
26
|
-
${fontSize?.desktop ? `font-size: ${fontSize?.desktop};` : ''}
|
|
27
|
-
${bold ? `font-weight: bold;` : fontWeight ? `font-weight: ${fontWeight};` : ''}
|
|
28
|
-
${letterSpacing ? `letter-spacing: ${letterSpacing};` : ''}
|
|
29
|
-
${lineHeight ? `line-height: ${lineHeight};` : ''}
|
|
30
|
-
${italic ? `font-style: italic;` : ''}
|
|
31
|
-
${underline ? `text-decoration-line: underline;` : ''}
|
|
32
|
-
${transform ? `text-transform: ${transform};` : ''}
|
|
26
|
+
${fontFamily ? `font-family: var(--g-font-${fontFamily}, ${fontFamily}) ${composeImportant};` : ''}
|
|
27
|
+
${fontSize?.desktop ? `font-size: ${fontSize?.desktop} ${composeImportant};` : ''}
|
|
28
|
+
${bold ? `font-weight: bold;` : fontWeight ? `font-weight: ${fontWeight} ${composeImportant};` : ''}
|
|
29
|
+
${letterSpacing ? `letter-spacing: ${letterSpacing} ${composeImportant};` : ''}
|
|
30
|
+
${lineHeight ? `line-height: ${lineHeight} ${composeImportant};` : ''}
|
|
31
|
+
${italic ? `font-style: italic${composeImportant};` : ''}
|
|
32
|
+
${underline ? `text-decoration-line: underline ${composeImportant};` : ''}
|
|
33
|
+
${transform ? `text-transform: ${transform} ${composeImportant};` : ''}
|
|
33
34
|
`;
|
|
34
35
|
};
|
|
35
36
|
function getCustomCSSByDevice(typography, device) {
|
package/dist/types/index.d.ts
CHANGED
|
@@ -7884,7 +7884,7 @@ declare const composeTextColorCss: (color?: ColorValueType) => string;
|
|
|
7884
7884
|
type TypographyClass = `g-${TypographyType}`;
|
|
7885
7885
|
declare const genTypoClass: (name: TypographyType) => TypographyClass;
|
|
7886
7886
|
declare const composeTypographyCss: (typography: TypographySetting | undefined) => string;
|
|
7887
|
-
declare const composeTypographyV2Css: (typography: TypographySettingV2 | undefined) => string;
|
|
7887
|
+
declare const composeTypographyV2Css: (typography: TypographySettingV2 | undefined, isImportant?: boolean) => string;
|
|
7888
7888
|
declare const composeTypography: (typography?: ObjectDevices<TypographyProps>) => React.CSSProperties;
|
|
7889
7889
|
declare const composeTypographyV2: (value?: TypographyV2Props, attrs?: TypographyV2Attrs) => React.CSSProperties;
|
|
7890
7890
|
declare const composeTypographyAttr: (attrs?: TypographyV2Attrs) => React.CSSProperties;
|