summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/_declare-vars.scss9
-rw-r--r--src/_mixins.scss4
-rw-r--r--src/objects/_heading.scss25
-rw-r--r--src/scopes/_headings.scss25
4 files changed, 61 insertions, 2 deletions
diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
index 6da86be..aa06e92 100644
--- a/src/_declare-vars.scss
+++ b/src/_declare-vars.scss
@@ -119,6 +119,15 @@
119 --md: fn.dim(--font-size --150, null), 119 --md: fn.dim(--font-size --150, null),
120 --sm: fn.dim(--font-size --75, null), 120 --sm: fn.dim(--font-size --75, null),
121 --xs: fn.dim(--font-size --50, null), 121 --xs: fn.dim(--font-size --50, null),
122 ),
123
124 --display-sm: (
125 --xxl: fn.dim(--font-size --900, null),
126 --xl: fn.dim(--font-size --600, null),
127 --lg: fn.dim(--font-size --200, null),
128 --md: fn.dim(--font-size --100, null),
129 --sm: fn.dim(--font-size --75, null),
130 --xs: fn.dim(--font-size --50, null),
122 ) 131 )
123 ), 132 ),
124 133
diff --git a/src/_mixins.scss b/src/_mixins.scss
index b1dda37..4eeb1ad 100644
--- a/src/_mixins.scss
+++ b/src/_mixins.scss
@@ -18,7 +18,7 @@
18@mixin heading-medium($size) { 18@mixin heading-medium($size) {
19 @include set-font(--standard, ( 19 @include set-font(--standard, (
20 --line-height: null, 20 --line-height: null,
21 --size: $size, 21 --size: fn.global-dim(join(--heading, $size)),
22 --weight: bold, 22 --weight: bold,
23 --transform: uppercase, 23 --transform: uppercase,
24 --spacing: 1px 24 --spacing: 1px
@@ -31,7 +31,7 @@
31@mixin heading-faint($size) { 31@mixin heading-faint($size) {
32 @include set-font(--standard, ( 32 @include set-font(--standard, (
33 --line-height: null, 33 --line-height: null,
34 --size: $size, 34 --size: fn.global-dim(join(--heading, $size)),
35 --weight: 500, 35 --weight: 500,
36 --transform: uppercase, 36 --transform: uppercase,
37 --spacing: 1px 37 --spacing: 1px
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss
index 6f5e5b0..5d84e61 100644
--- a/src/objects/_heading.scss
+++ b/src/objects/_heading.scss
@@ -2,6 +2,7 @@
2@use '../functions' as fn; 2@use '../functions' as fn;
3@use '../mixins' as mx; 3@use '../mixins' as mx;
4@use '../config'; 4@use '../config';
5@use 'include-media/dist/include-media' as media;
5 6
6@include iro.props-namespace('heading') { 7@include iro.props-namespace('heading') {
7 @include iro.props-store(( 8 @include iro.props-store((
@@ -58,26 +59,50 @@
58 59
59 @include iro.bem-modifier('xxl') { 60 @include iro.bem-modifier('xxl') {
60 @include mx.heading-strong(--display --xxl); 61 @include mx.heading-strong(--display --xxl);
62
63 @include media.media('<=md') {
64 @include mx.heading-strong(--display-sm --xxl);
65 }
61 } 66 }
62 67
63 @include iro.bem-modifier('xl') { 68 @include iro.bem-modifier('xl') {
64 @include mx.heading-strong(--display --xl); 69 @include mx.heading-strong(--display --xl);
70
71 @include media.media('<=md') {
72 @include mx.heading-strong(--display-sm --xl);
73 }
65 } 74 }
66 75
67 @include iro.bem-modifier('lg') { 76 @include iro.bem-modifier('lg') {
68 @include mx.heading-strong(--display --lg); 77 @include mx.heading-strong(--display --lg);
78
79 @include media.media('<=md') {
80 @include mx.heading-strong(--display-sm --lg);
81 }
69 } 82 }
70 83
71 @include iro.bem-modifier('md') { 84 @include iro.bem-modifier('md') {
72 @include mx.heading-strong(--display --md); 85 @include mx.heading-strong(--display --md);
86
87 @include media.media('<=md') {
88 @include mx.heading-strong(--display-sm --md);
89 }
73 } 90 }
74 91
75 @include iro.bem-modifier('sm') { 92 @include iro.bem-modifier('sm') {
76 @include mx.heading-medium(--display --sm); 93 @include mx.heading-medium(--display --sm);
94
95 @include media.media('<=md') {
96 @include mx.heading-medium(--display-sm --sm);
97 }
77 } 98 }
78 99
79 @include iro.bem-modifier('xs') { 100 @include iro.bem-modifier('xs') {
80 @include mx.heading-faint(--display --xs); 101 @include mx.heading-faint(--display --xs);
102
103 @include media.media('<=md') {
104 @include mx.heading-faint(--display-sm --xs);
105 }
81 } 106 }
82 } 107 }
83 } 108 }
diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss
index c241557..c5033e8 100644
--- a/src/scopes/_headings.scss
+++ b/src/scopes/_headings.scss
@@ -1,6 +1,7 @@
1@use 'iro-sass/src/index' as iro; 1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn; 2@use '../functions' as fn;
3@use '../mixins' as mx; 3@use '../mixins' as mx;
4@use 'include-media/dist/include-media' as media;
4 5
5@include iro.props-namespace('headings') { 6@include iro.props-namespace('headings') {
6 @include iro.bem-scope(iro.props-namespace()) { 7 @include iro.bem-scope(iro.props-namespace()) {
@@ -56,26 +57,50 @@
56 57
57 h1 { 58 h1 {
58 @include mx.heading-strong(--display --xxl); 59 @include mx.heading-strong(--display --xxl);
60
61 @include media.media('<=md') {
62 @include mx.heading-strong(--display-sm --xxl);
63 }
59 } 64 }
60 65
61 h2 { 66 h2 {
62 @include mx.heading-strong(--display --xl); 67 @include mx.heading-strong(--display --xl);
68
69 @include media.media('<=md') {
70 @include mx.heading-strong(--display-sm --xl);
71 }
63 } 72 }
64 73
65 h3 { 74 h3 {
66 @include mx.heading-strong(--display --lg); 75 @include mx.heading-strong(--display --lg);
76
77 @include media.media('<=md') {
78 @include mx.heading-strong(--display-sm --lg);
79 }
67 } 80 }
68 81
69 h4 { 82 h4 {
70 @include mx.heading-strong(--display --md); 83 @include mx.heading-strong(--display --md);
84
85 @include media.media('<=md') {
86 @include mx.heading-strong(--display-sm --md);
87 }
71 } 88 }
72 89
73 h5 { 90 h5 {
74 @include mx.heading-medium(--display --sm); 91 @include mx.heading-medium(--display --sm);
92
93 @include media.media('<=md') {
94 @include mx.heading-medium(--display-sm --sm);
95 }
75 } 96 }
76 97
77 h6 { 98 h6 {
78 @include mx.heading-faint(--display --xs); 99 @include mx.heading-faint(--display --xs);
100
101 @include media.media('<=md') {
102 @include mx.heading-faint(--display-sm --xs);
103 }
79 } 104 }
80 } 105 }
81 } 106 }