barbican-reset 2.19.0 → 2.20.0

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.
@@ -23,8 +23,7 @@ export default {
23
23
 
24
24
  <style lang="scss" module>
25
25
 
26
- .title {
27
- font-size: $h2-font-size;
26
+ @mixin title {
28
27
  margin-bottom: 1.25rem;
29
28
 
30
29
  @include media-breakpoint-up(md) {
@@ -32,8 +31,12 @@ export default {
32
31
  }
33
32
  }
34
33
 
34
+ .title {
35
+ @include title;
36
+ }
37
+
35
38
  .placeholder {
36
- composes: title;
39
+ @include title;
37
40
  @include placeholder;
38
41
  width: 30%;
39
42
  }
@@ -13,11 +13,11 @@
13
13
  <style lang="scss" module>
14
14
 
15
15
  .container {
16
+ @include fontfamily-black;
16
17
  padding: 0.875rem 0.75rem 0.625rem 0.75rem;
17
18
  border-left: 0.25rem solid;
18
19
  background: $c-grey-l96;
19
20
  margin-bottom: 1rem;
20
- font-weight: 700;
21
21
  }
22
22
 
23
23
  </style>
@@ -41,6 +41,7 @@ export default {
41
41
 
42
42
  <style lang="scss" module>
43
43
  @mixin title {
44
+ @include fontfamily-black;
44
45
  letter-spacing: $headings-letter-spacing;
45
46
  line-height: $line-height-sm;
46
47
  }
@@ -49,7 +50,7 @@ export default {
49
50
  @include title;
50
51
  font-size: $h5-font-size;
51
52
  color: $c-grey-l44;
52
- font-weight: normal;
53
+ font-weight: 400;
53
54
 
54
55
  @include media-breakpoint-up(md) {
55
56
  font-size: $h4-font-size;
@@ -97,7 +98,6 @@ export default {
97
98
 
98
99
  .title {
99
100
  @include title;
100
- font-weight: $headings-font-weight;
101
101
  font-size: $h2-font-size;
102
102
  margin-bottom: 0.75rem;
103
103
  }
@@ -33,9 +33,9 @@ export default {
33
33
  }
34
34
 
35
35
  .title {
36
+ @include fontfamily-black;
36
37
  font-size: $h5-font-size;
37
38
  margin-bottom: 3rem;
38
- font-weight: bold;
39
39
 
40
40
  @include media-breakpoint-up(md) {
41
41
  grid-template-columns: 1fr auto 1fr;
@@ -8,4 +8,8 @@
8
8
 
9
9
  @function input-bg($value) {
10
10
  @return rgba($value,0.08);
11
+ }
12
+
13
+ @function toRem($value) {
14
+ @return ($value * 0.0625)+rem;
11
15
  }
@@ -63,8 +63,8 @@
63
63
  }
64
64
 
65
65
  @mixin br-alert--title {
66
+ @include fontfamily-black;
66
67
  margin-bottom: 0.25rem;
67
- font-weight: 700;
68
68
  }
69
69
 
70
70
  @mixin br-alert--flex {
@@ -176,9 +176,9 @@
176
176
  background-color: $background;
177
177
  text-decoration: underline;
178
178
  vertical-align: baseline;
179
- font-weight: inherit;
180
179
  padding: $padding;
181
180
  border-radius: 0;
181
+ font-weight: 400;
182
182
  text-align: left;
183
183
  color: $color;
184
184
  border: none;
@@ -282,7 +282,7 @@
282
282
 
283
283
  @mixin btn-video-help {
284
284
  @include link-button($padding: 1.25em, $background: $c-grey-l96);
285
- font-weight: 700;
285
+ @include fontfamily-black;
286
286
  width: 100%;
287
287
 
288
288
  @include focus {
@@ -21,9 +21,9 @@
21
21
  }
22
22
 
23
23
  &.total {
24
+ @include fontfamily-black;
24
25
  font-size: $h4-font-size;
25
26
  border-bottom: none;
26
- font-weight: 700;
27
27
  }
28
28
 
29
29
  &.continue {
@@ -3,9 +3,9 @@
3
3
  $mq: md;
4
4
 
5
5
  thead {
6
+ @include fontfamily-black;
6
7
  background-color: $c-grey-l96;
7
8
  margin-bottom: 1rem;
8
- font-weight: 700;
9
9
  display: block;
10
10
 
11
11
  @include media-breakpoint-down($mq) {
@@ -2,9 +2,9 @@
2
2
  $mq: md;
3
3
 
4
4
  thead {
5
+ @include fontfamily-black;
5
6
  background-color: $c-grey-l96;
6
7
  margin-bottom: 1rem;
7
- font-weight: 700;
8
8
  display: block;
9
9
 
10
10
  @include media-breakpoint-down($mq) {
@@ -9,7 +9,7 @@
9
9
  }
10
10
 
11
11
  th {
12
- font-weight: 700;
12
+ @include fontfamily-black;
13
13
  }
14
14
 
15
15
  tr {
@@ -2,9 +2,9 @@
2
2
  $mq: md;
3
3
 
4
4
  thead {
5
+ @include fontfamily-black;
5
6
  background-color: $c-grey-l96;
6
7
  margin-bottom: 1rem;
7
- font-weight: 700;
8
8
  display: block;
9
9
 
10
10
  @include media-breakpoint-down($mq) {
@@ -2,9 +2,9 @@
2
2
  $mq: md;
3
3
 
4
4
  thead {
5
+ @include fontfamily-black;
5
6
  background-color: $c-grey-l96;
6
7
  margin-bottom: 1rem;
7
- font-weight: 700;
8
8
  display: block;
9
9
 
10
10
  @include media-breakpoint-down($mq) {
@@ -3,7 +3,7 @@
3
3
  $mq: sm;
4
4
 
5
5
  th {
6
- font-weight: 700;
6
+ @include fontfamily-black;
7
7
  }
8
8
 
9
9
  tr {
@@ -1,10 +1,31 @@
1
+ $fontfamily-light: Supreme-Light, Arial, Helvetica, sans-serif;
2
+
3
+ $fontfamily-light-italic: Supreme-LightItalic, Arial, Helvetica, sans-serif;
4
+
5
+ $fontfamily-black: Supreme-Black, Arial, Helvetica, sans-serif;
6
+
7
+ $fontfamily-black-italic: Supreme-BlackItalic, Arial, Helvetica, sans-serif;
8
+
9
+ // adjusting bootstrap variables for supreme
10
+
11
+ $body-font-size: toRem(17);
12
+
13
+ $h1-font-size: toRem(42);
14
+
15
+ $h2-font-size: toRem(34);
16
+
17
+ $h4-font-size: toRem(24);
1
18
 
2
19
  $line-height-xs: 1.1;
20
+
3
21
  $line-height-sm: 1.2;
4
- $line-height-md: 1.4;
22
+
23
+ $line-height-md: 1.35;
24
+
5
25
  $line-height-lg: 1.8;
6
26
 
7
27
  $headings-line-height: $line-height-sm;
28
+
8
29
  $headings-letter-spacing: -0.015em;
9
- $link-decoration: underline;
10
- $headings-font-weight: 700;
30
+
31
+ $link-decoration: underline;
@@ -1,7 +1,6 @@
1
1
  @import '../../patterns/scss/colors/index';
2
- @import "fonts";
2
+ @import 'typography';
3
3
  @import 'alerts';
4
4
  @import 'layout';
5
5
  @import 'breakpoints';
6
- @import 'typography';
7
6
  @import 'columns';
package/package.json CHANGED
@@ -103,5 +103,5 @@
103
103
  "watch:patterns": "cd patterns && gulp watch"
104
104
  },
105
105
  "style": "dist/css/barbican-reset.css",
106
- "version": "2.19.0"
106
+ "version": "2.20.0"
107
107
  }
@@ -3,7 +3,7 @@
3
3
  @include br-form-row;
4
4
 
5
5
  label {
6
- font-weight: normal;
6
+ font-weight: 400;
7
7
  }
8
8
 
9
9
  .content {
package/scss/_btn.scss CHANGED
@@ -103,7 +103,7 @@
103
103
  &.btn-radio {
104
104
  border: 1px solid hsl(0deg, 0%, 65%);
105
105
  padding: 0.75rem 0.75rem 0.625rem;
106
- font-weight: normal;
106
+ font-weight: 400;
107
107
  margin: 0.25rem;
108
108
 
109
109
  @include focus {
package/scss/_form.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  label {
2
+ @include fontfamily-black;
2
3
  display: block;
3
- font-weight: bold;
4
4
  }
5
5
 
6
6
  .secondary-actions {
package/scss/_klaro.scss CHANGED
@@ -1,10 +1,10 @@
1
1
  @mixin cm-button {
2
+ @include fontfamily-black;
2
3
  background: $c-grey-l44;
3
4
  border-radius: $border-radius;
4
5
  font-size: $font-size-sm;
5
6
  padding: 0.5em 0.75em;
6
7
  margin-right: 1em;
7
- font-weight: 700;
8
8
  cursor: pointer;
9
9
  color: $white;
10
10
  border: 0;
@@ -294,7 +294,7 @@
294
294
  }
295
295
 
296
296
  span.cm-list-title {
297
- font-weight: bold;
297
+ @include fontfamily-black;
298
298
  }
299
299
 
300
300
  p.purposes {
@@ -420,12 +420,12 @@
420
420
  }
421
421
 
422
422
  .cn-learn-more {
423
+ @include fontfamily-black;
423
424
  background: $c-grey-l44;
424
425
  border-radius: $border-radius;
425
426
  text-decoration: none;
426
427
  display: inline-block;
427
428
  font-size: 0.875rem;
428
- font-weight: bold;
429
429
  padding: 0.5rem;
430
430
  color: $white;
431
431
 
package/scss/index.scss CHANGED
@@ -55,19 +55,34 @@ body {
55
55
  color: $c-grey-l21;
56
56
  }
57
57
 
58
- h6,
59
- .h6,
60
- h5,
61
- .h5,
62
- h4,
63
- .h4,
64
- h3,
65
- .h3,
66
- h2,
67
- .h2,
68
- h1,
69
- .h1 {
58
+ h1, .h1 {
70
59
  @include fontfamily-black;
60
+ font-size: $h1-font-size;
61
+ }
62
+
63
+ h2, .h2 {
64
+ @include fontfamily-black;
65
+ font-size: $h2-font-size;
66
+ }
67
+
68
+ h3, .h3 {
69
+ @include fontfamily-black;
70
+ font-size: $h3-font-size;
71
+ }
72
+
73
+ h4, .h4 {
74
+ @include fontfamily-black;
75
+ font-size: $h4-font-size;
76
+ }
77
+
78
+ h5, .h5 {
79
+ @include fontfamily-black;
80
+ font-size: $h5-font-size;
81
+ }
82
+
83
+ h6, .h6 {
84
+ @include fontfamily-black;
85
+ font-size: $h6-font-size;
71
86
  }
72
87
 
73
88
  a,
@@ -81,4 +96,8 @@ p {
81
96
 
82
97
  p+p {
83
98
  margin-top: 1rem;
99
+ }
100
+
101
+ strong {
102
+ @include fontfamily-black;
84
103
  }
@@ -1,4 +0,0 @@
1
- $fontfamily-light: Supreme-Light, Arial, Helvetica, sans-serif;
2
- $fontfamily-light-italic: Supreme-LightItalic, Arial, Helvetica, sans-serif;
3
- $fontfamily-black: Supreme-Black, Arial, Helvetica, sans-serif;
4
- $fontfamily-black-italic: Supreme-BlackItalic, Arial, Helvetica, sans-serif;