mod-base 1.0.18 → 1.0.19

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.
Files changed (4) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/package.json +1 -1
  3. package/src/styles/base/_fonts.scss +7 -7
  4. package/src/styles/base/_variables.scss +16 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,9 @@
1
1
  # Changelog
2
2
 
3
+ ## 1.0.19
4
+
5
+ - Adding variables for our base typography (`h2`, `h3`, `body`) — so that our accessible components can use those instead of repeating values.
6
+
3
7
  ## 1.0.18
4
8
 
5
9
  - Dark-mode updates: correct selectors list
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mod-base",
3
- "version": "1.0.18",
3
+ "version": "1.0.19",
4
4
  "description": "Base Styles for S3 Sites",
5
5
  "author": "",
6
6
  "license": "ISC"
package/src/styles/base/_fonts.scss CHANGED
@@ -20,20 +20,20 @@
20
20
 
21
21
  @mixin h2($font-family, $font-weight: 400) {
22
22
  @include font($font-family, $font-weight);
23
- @include font-size(1.375rem, 1.5rem);
24
- line-height: 1.25;
23
+ @include font-size($h2-font-size, $h2-font-size-desktop);
24
+ line-height: $h2-line-height;
25
25
  }
26
26
 
27
27
  @mixin body($font-family, $font-weight: 400) {
28
28
  @include font($font-family, $font-weight);
29
- @include font-size(1rem, 1.125rem);
30
- line-height: 1.35;
29
+ @include font-size($body-font-size, $body-font-size-desktop);
30
+ line-height: $body-line-height;
31
31
  }
32
32
 
33
33
  @mixin disclaimer($font-family, $font-weight: 400) {
34
34
  @include font($font-family, $font-weight);
35
- @include font-size(.75rem);
36
- line-height: 1.35;
35
+ @include font-size($disclaimer-font-size);
36
+ line-height: $disclaimer-line-height;
37
37
  }
38
38
 
39
39
  @mixin button($font-family, $font-weight: 700) {
@@ -44,6 +44,6 @@
44
44
 
45
45
  @mixin form-element($font-family, $font-weight: 400) {
46
46
  @include font($font-family, $font-weight);
47
- @include font-size(1rem, 1.125rem);
47
+ @include font-size($body-font-size, $body-font-size-desktop);
48
48
  line-height: 1.25;
49
49
  }
package/src/styles/base/_variables.scss CHANGED
@@ -2,6 +2,22 @@ $base-body-color: $color-charcoal8 !default;
2
2
  $base-font-family: 'Roboto', sans-serif !default;
3
3
  $base-transition: all .15s ease-in-out !default;
4
4
 
5
+ // Typography
6
+ $h2-font-size: 1.375rem !default;
7
+ $h2-font-size-desktop: 1.5rem !default;
8
+ $h2-line-height: 1.25 !default;
9
+
10
+ $h3-font-size: 1.125rem !default;
11
+ $h3-font-size-desktop: 1.125rem !default;
12
+ $h3-line-height: 1.25 !default;
13
+
14
+ $body-font-size: 1rem !default;
15
+ $body-font-size-desktop: 1.125rem !default;
16
+ $body-line-height: 1.35 !default;
17
+
18
+ $disclaimer-font-size: .75rem !default;
19
+ $disclaimer-line-height: 1.35 !default;
20
+
5
21
  // Best Company
6
22
  $bc-base-font-family: 'Lato', sans-serif !default;
7
23
  $bc-secondary-font-family: 'Work Sans', sans-serif !default;