Skip to content

Commit f5a0a0a

Browse files
Update heading & icon sizes
They now use math + global font size variable
1 parent 4542141 commit f5a0a0a

File tree

1 file changed

+18
-18
lines changed

1 file changed

+18
-18
lines changed

themes/cp-theme/red-hat-sass/variables/_typography.scss

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -29,21 +29,21 @@ $rh-global--FontFamily--monospace: "Overpass Mono", Consolas, Monaco, 'Andal
2929
// ========================================================================
3030

3131
// Heading sizes for Apps
32-
$rh-global--FontSize--heading--xxl: rh-size-prem(32px) !default;
33-
$rh-global--FontSize--heading--xl: rh-size-prem(28px) !default;
34-
$rh-global--FontSize--heading--lg: rh-size-prem(24px) !default;
35-
$rh-global--FontSize--heading--md: rh-size-prem(20px) !default;
36-
$rh-global--FontSize--heading--sm: rh-size-prem(18px) !default;
37-
$rh-global--FontSize--heading--xs: rh-size-prem(16px) !default;
38-
$rh-global--FontSize--heading--xxs: rh-size-prem(14px) !default;
39-
40-
41-
// ========================================================================
42-
// Icons Sizes
43-
// ========================================================================
44-
45-
$rh-global--icon-size--xl: rh-size-prem(64px) !default;
46-
$rh-global--icon-size--lg: rh-size-prem(48px) !default;
47-
$rh-global--icon-size--md: rh-size-prem(32px) !default;
48-
$rh-global--icon-size--sm: rh-size-prem(16px) !default;
49-
$rh-global--icon-size--xs: rh-size-prem(14px) !default;
32+
$rh-global--FontSize--heading--xxl: rh-size-prem($rh-global--font-size-root * 2) !default; // 32px
33+
$rh-global--FontSize--heading--xl: rh-size-prem($rh-global--font-size-root * 1.75) !default; // 28px
34+
$rh-global--FontSize--heading--lg: rh-size-prem($rh-global--font-size-root * 1.5) !default; // 24px
35+
$rh-global--FontSize--heading--md: rh-size-prem($rh-global--font-size-root * 1.25) !default; // 20px
36+
$rh-global--FontSize--heading--sm: rh-size-prem($rh-global--font-size-root * 1.125)!default; // 18px
37+
$rh-global--FontSize--heading--xs: rh-size-prem($rh-global--font-size-root * 1) !default; // 16px
38+
$rh-global--FontSize--heading--xxs: rh-size-prem($rh-global--font-size-root * 0.875)!default; // 14px
39+
40+
41+
// ========================================================================
42+
// Icons Sizes
43+
// ========================================================================
44+
45+
$rh-global--icon-size--xl: rh-size-prem($rh-global--font-size-root * 4) !default; // 64px
46+
$rh-global--icon-size--lg: rh-size-prem($rh-global--font-size-root * 3) !default; // 48px
47+
$rh-global--icon-size--md: rh-size-prem($rh-global--font-size-root * 2) !default; // 32px
48+
$rh-global--icon-size--sm: rh-size-prem($rh-global--font-size-root * 1) !default; // 16px
49+
$rh-global--icon-size--xs: rh-size-prem($rh-global--font-size-root * 0.875)!default; // 14px

0 commit comments

Comments
 (0)