summaryrefslogtreecommitdiffstats
path: root/src/scopes/_headings.scss
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2026-07-22 13:00:59 +0200
committerVolpeon <git@volpeon.ink>2026-07-22 13:00:59 +0200
commitaeed08dc46662a0d70e04bcea612a701633736e7 (patch)
treea4077017d3519185ccd9ea08955fccdd737ffe17 /src/scopes/_headings.scss
parentPaths (diff)
downloadiro-design-aeed08dc46662a0d70e04bcea612a701633736e7.tar.gz
iro-design-aeed08dc46662a0d70e04bcea612a701633736e7.tar.bz2
iro-design-aeed08dc46662a0d70e04bcea612a701633736e7.zip
Revert "Paths"
This reverts commit cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226.
Diffstat (limited to 'src/scopes/_headings.scss')
-rw-r--r--src/scopes/_headings.scss90
1 files changed, 39 insertions, 51 deletions
diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss
index a6a7bbb..23623fd 100644
--- a/src/scopes/_headings.scss
+++ b/src/scopes/_headings.scss
@@ -1,8 +1,8 @@
1@use "sass:map"; 1@use 'sass:map';
2@use "sass:string"; 2@use 'sass:string';
3@use "pkg:iro-sass/bem"; 3@use 'pkg:iro-sass/src/bem';
4@use "pkg:iro-sass/props"; 4@use 'pkg:iro-sass/src/props';
5@use "../objects/heading.vars" as heading; 5@use '../objects/heading.vars' as heading;
6 6
7@mixin styles { 7@mixin styles {
8 /* stylelint-disable-next-line scss/dollar-variable-pattern */ 8 /* stylelint-disable-next-line scss/dollar-variable-pattern */
@@ -15,62 +15,56 @@
15 xxl: h1, 15 xxl: h1,
16 ); 16 );
17 17
18 @include bem.scope("headings") { 18 @include bem.scope('headings') {
19 h1, 19 h1,
20 h2, 20 h2,
21 h3, 21 h3,
22 h4, 22 h4,
23 h5, 23 h5,
24 h6 { 24 h6 {
25 display: block; 25 display: block;
26 margin-block-start: props.get(heading.$margin-bs); 26 margin-block-start: props.get(heading.$margin-bs);
27 font-family: props.get(heading.$font-family); 27 font-family: props.get(heading.$font-family);
28 font-weight: props.get(heading.$font-weight); 28 font-weight: props.get(heading.$font-weight);
29 font-feature-settings: props.get(heading.$feature-settings); 29 font-feature-settings: props.get(heading.$feature-settings);
30 line-height: props.get(heading.$line-height); 30 line-height: props.get(heading.$line-height);
31 text-transform: props.get(heading.$text-transform); 31 text-transform: props.get(heading.$text-transform);
32 letter-spacing: normal; 32 letter-spacing: normal;
33 transform: translateX(props.get(heading.$offset)); 33 transform: translateX(props.get(heading.$offset));
34 } 34 }
35 35
36 @include bem.elem("highlight") { 36 @include bem.elem('highlight') {
37 background-image: linear-gradient( 37 background-image: linear-gradient(to top,
38 to top, 38 transparent .15em,
39 transparent 0.15em, 39 props.get(heading.$bg-color) .15em,
40 props.get(heading.$bg-color) 0.15em, 40 props.get(heading.$bg-color) .6em,
41 props.get(heading.$bg-color) 0.6em, 41 transparent .6em);
42 transparent 0.6em
43 );
44 } 42 }
45 43
46 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, 44 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings, $text-transform, $text-color in heading.$sizes {
47 $feature-settings, $text-transform, $text-color in heading.$sizes
48 {
49 #{map.get($-size-map, $mod)} { 45 #{map.get($-size-map, $mod)} {
50 font-family: props.get($font-family); 46 font-family: props.get($font-family);
51 font-size: props.get($font-size); 47 font-size: props.get($font-size);
52 font-weight: props.get($font-weight); 48 font-weight: props.get($font-weight);
53 font-feature-settings: props.get($feature-settings); 49 font-feature-settings: props.get($feature-settings);
54 line-height: props.get($line-height); 50 line-height: props.get($line-height);
55 color: props.get($text-color); 51 color: props.get($text-color);
56 text-transform: props.get($text-transform); 52 text-transform: props.get($text-transform);
57 letter-spacing: props.get($letter-spacing); 53 letter-spacing: props.get($letter-spacing);
58 } 54 }
59 } 55 }
60 56
61 @include bem.modifier("display") { 57 @include bem.modifier('display') {
62 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, 58 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings, $text-transform, $text-color in heading.$display--sizes {
63 $feature-settings, $text-transform, $text-color in heading.$display--sizes
64 {
65 #{map.get($-size-map, $mod)} { 59 #{map.get($-size-map, $mod)} {
66 font-family: props.get($font-family); 60 font-family: props.get($font-family);
67 font-size: props.get($font-size); 61 font-size: props.get($font-size);
68 font-weight: props.get($font-weight); 62 font-weight: props.get($font-weight);
69 font-feature-settings: props.get($feature-settings); 63 font-feature-settings: props.get($feature-settings);
70 line-height: props.get($line-height); 64 line-height: props.get($line-height);
71 color: props.get($text-color); 65 color: props.get($text-color);
72 text-transform: props.get($text-transform); 66 text-transform: props.get($text-transform);
73 letter-spacing: props.get($letter-spacing); 67 letter-spacing: props.get($letter-spacing);
74 } 68 }
75 } 69 }
76 } 70 }
@@ -85,16 +79,10 @@
85 } 79 }
86 } 80 }
87 81
88 @include bem.modifier("display") { 82 @include bem.modifier('display') {
89 @each $mod, $value in heading.$sizes { 83 @each $mod, $value in heading.$sizes {
90 #{map.get($-size-map, $mod)} { 84 #{map.get($-size-map, $mod)} {
91 color: props.get( 85 color: props.get(heading.$static-themes, $theme, --display, --#{$mod}, --text-color);
92 heading.$static-themes,
93 $theme,
94 --display,
95 --#{$mod},
96 --text-color
97 );
98 } 86 }
99 } 87 }
100 } 88 }
generated by cgit v1.3.1 (git 2.54.0) at 2026-07-22 20:10:53 +0000