Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Remove $font-size variable #2027

Merged
merged 1 commit into from
Sep 5, 2024
Merged

Remove $font-size variable #2027

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
106 changes: 32 additions & 74 deletions packages/cfpb-design-system/src/abstracts/heading-mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,78 +8,54 @@
Base styles
========================================================================== */

/* stylelint-disable selector-class-pattern */
@mixin heading-1($fs: $size-i) {
/* stylelint-enable */
$font-size: $fs;

margin-bottom: math.div(15px, $font-size) + em;
font-size: math.div($font-size, $base-font-size-px) + em;
@mixin heading-1() {
margin-bottom: math.div(15px, $size-i) + em;
font-size: math.div($size-i, $base-font-size-px) + em;
font-weight: 600;
letter-spacing: inherit;
line-height: 1.25;
text-transform: inherit;
}

/* stylelint-disable selector-class-pattern */
@mixin heading-2($fs: $size-ii) {
/* stylelint-enable */
$font-size: $fs;

margin-bottom: math.div(15px, $font-size) + em;
font-size: math.div($font-size, $base-font-size-px) + em;
@mixin heading-2() {
margin-bottom: math.div(15px, $size-ii) + em;
font-size: math.div($size-ii, $base-font-size-px) + em;
font-weight: 600;
letter-spacing: inherit;
line-height: 1.25;
text-transform: inherit;
}

/* stylelint-disable selector-class-pattern */
@mixin heading-3($fs: $size-iii) {
/* stylelint-enable */
$font-size: $fs;

margin-bottom: math.div(15px, $font-size) + em;
font-size: math.div($font-size, $base-font-size-px) + em;
@mixin heading-3() {
margin-bottom: math.div(15px, $size-iii) + em;
font-size: math.div($size-iii, $base-font-size-px) + em;
font-weight: normal;
letter-spacing: inherit;
line-height: 1.25;
text-transform: inherit;
}

/* stylelint-disable selector-class-pattern */
@mixin heading-4($fs: $size-iv) {
/* stylelint-enable */
$font-size: $fs;

margin-bottom: math.div(15px, $font-size) + em;
font-size: math.div($font-size, $base-font-size-px) + em;
@mixin heading-4() {
margin-bottom: math.div(15px, $size-iv) + em;
font-size: math.div($size-iv, $base-font-size-px) + em;
font-weight: 500;
letter-spacing: inherit;
line-height: 1.25;
text-transform: inherit;
}

/* stylelint-disable selector-class-pattern */
@mixin heading-5($fs: $size-v) {
/* stylelint-enable */
$font-size: $fs;

margin-bottom: math.div(15px, $font-size) + em;
font-size: math.div($font-size, $base-font-size-px) + em;
@mixin heading-5() {
margin-bottom: math.div(15px, $size-v) + em;
font-size: math.div($size-v, $base-font-size-px) + em;
font-weight: 600;
letter-spacing: 1px;
line-height: 1.25;
text-transform: uppercase;
}

/* stylelint-disable selector-class-pattern */
@mixin heading-6($fs: $size-vi) {
/* stylelint-enable */
$font-size: $fs;

margin-bottom: math.div(15px, $font-size) + em;
font-size: math.div($font-size, $base-font-size-px) + em;
@mixin heading-6() {
margin-bottom: math.div(15px, $size-vi) + em;
font-size: math.div($size-vi, $base-font-size-px) + em;
font-weight: 600;
letter-spacing: 1px;
line-height: 1.25;
Expand All @@ -89,8 +65,6 @@
@mixin h1() {
@include heading-1;

$font-size: $size-i;

p + &,
ul + &,
ol + &,
Expand All @@ -99,15 +73,13 @@
img + &,
table + &,
blockquote + & {
margin-top: math.div(60px, $font-size) + em;
margin-top: math.div(60px, $size-i) + em;
}

// Mobile only.
@include respond-to-max($bp-xs-max) {
@include heading-2;

$font-size: $size-ii;

p + &,
ul + &,
ol + &,
Expand All @@ -116,7 +88,7 @@
img + &,
table + &,
blockquote + & {
margin-top: math.div(45px, $font-size) + em;
margin-top: math.div(45px, $size-ii) + em;
}
h2 + &,
.h2 + &,
Expand All @@ -128,16 +100,14 @@
.h5 + &,
h6 + &,
.h6 + & {
margin-top: math.div(30px, $font-size) + em;
margin-top: math.div(30px, $size-ii) + em;
}
}
}

@mixin h2() {
@include heading-2;

$font-size: $size-ii;

p + &,
ul + &,
ol + &,
Expand All @@ -146,7 +116,7 @@
img + &,
table + &,
blockquote + & {
margin-top: math.div(45px, $font-size) + em;
margin-top: math.div(45px, $size-ii) + em;
}

h1 + &,
Expand All @@ -159,15 +129,13 @@
.h5 + &,
h6 + &,
.h6 + & {
margin-top: math.div(30px, $font-size) + em;
margin-top: math.div(30px, $size-ii) + em;
}

// Mobile only.
@include respond-to-max($bp-xs-max) {
@include heading-3;

$font-size: $size-iii;

p + &,
ul + &,
ol + &,
Expand All @@ -176,16 +144,14 @@
img + &,
table + &,
blockquote + & {
margin-top: math.div(30px, $font-size) + em;
margin-top: math.div(30px, $size-iii) + em;
}
}
}

@mixin h3() {
@include heading-3;

$font-size: $size-iii;

p + &,
ul + &,
ol + &,
Expand All @@ -204,7 +170,7 @@
.h5 + &,
h6 + &,
.h6 + & {
margin-top: math.div(30px, $font-size) + em;
margin-top: math.div(30px, $size-iii) + em;
}

// Mobile only.
Expand All @@ -216,8 +182,6 @@
@mixin h4() {
@include heading-4;

$font-size: $size-iv;

p + &,
ul + &,
ol + &,
Expand All @@ -236,7 +200,7 @@
.h5 + &,
h6 + &,
.h6 + & {
margin-top: math.div(30px, $font-size) + em;
margin-top: math.div(30px, $size-iv) + em;
}

// Mobile only.
Expand All @@ -251,8 +215,6 @@
@mixin h5() {
@include heading-5;

$font-size: $size-v;

p + &,
ul + &,
ol + &,
Expand All @@ -271,15 +233,13 @@
.h4 + &,
h6 + &,
.h6 + & {
margin-top: math.div(30px, $font-size) + em;
margin-top: math.div(30px, $size-v) + em;
}
}

@mixin h6() {
@include heading-6;

$font-size: $size-vi;

p + &,
ul + &,
ol + &,
Expand All @@ -298,7 +258,7 @@
.h4 + &,
h5 + &,
.h5 + & {
margin-top: math.div(30px, $font-size) + em;
margin-top: math.div(30px, $size-vi) + em;
}
}

Expand All @@ -310,17 +270,15 @@

// Mobile only.
@include respond-to-max($bp-xs-max) {
// Use the same regular weight but reduce the sizes to h4 size
// Use the same regular weight but reduce the sizes to h4 size.
font-size: math.div(18px, $base-font-size-px) + em;
}
}

// For when you want a heading that's bigger than a normal H1.
@mixin u-superheading() {
// For when you want a heading that's bigger than a normal H1
$font-size: $size-xl;

margin-bottom: math.div(20px, $font-size) + em;
font-size: math.div($font-size, $base-font-size-px) + em;
margin-bottom: math.div(20px, $size-xl) + em;
font-size: math.div($size-xl, $base-font-size-px) + em;
font-weight: normal;
line-height: 1.25;
}
4 changes: 1 addition & 3 deletions packages/cfpb-design-system/src/components/cfpb-typography/slug-header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,8 @@
&__heading {
@include heading-5;

$font-size: $size-v;

display: inline-block;
padding-top: math.div(4px, $font-size) + em;
padding-top: math.div(4px, $size-v) + em;
border-top: 5px solid $slug-header-border-thick;
margin-top: -3px;
}
Expand Down