summaryrefslogtreecommitdiffstats
path: root/src/objects/_heading.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects/_heading.scss')
-rw-r--r--src/objects/_heading.scss114
1 files changed, 50 insertions, 64 deletions
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss
index 87a6269..0e8392e 100644
--- a/src/objects/_heading.scss
+++ b/src/objects/_heading.scss
@@ -1,70 +1,64 @@
1@use "sass:map"; 1@use 'sass:map';
2@use "sass:meta"; 2@use 'sass:meta';
3@use "sass:string"; 3@use 'sass:string';
4@use "pkg:iro-sass/bem"; 4@use 'pkg:iro-sass/src/bem';
5@use "pkg:iro-sass/props"; 5@use 'pkg:iro-sass/src/props';
6@use "../props" as *; 6@use '../props' as *;
7 7
8@forward "heading.vars"; 8@forward 'heading.vars';
9@use "heading.vars" as vars; 9@use 'heading.vars' as vars;
10 10
11@mixin styles { 11@mixin styles {
12 @include materialize-at-root(meta.module-variables("vars")); 12 @include materialize-at-root(meta.module-variables('vars'));
13 13
14 @include bem.object("heading") { 14 @include bem.object('heading') {
15 display: block; 15 display: block;
16 margin-block-start: props.get(vars.$margin-bs); 16 margin-block-start: props.get(vars.$margin-bs);
17 font-family: props.get(vars.$font-family); 17 font-family: props.get(vars.$font-family);
18 font-weight: props.get(vars.$font-weight); 18 font-weight: props.get(vars.$font-weight);
19 font-feature-settings: props.get(vars.$feature-settings); 19 font-feature-settings: props.get(vars.$feature-settings);
20 line-height: props.get(vars.$line-height); 20 line-height: props.get(vars.$line-height);
21 color: props.get(vars.$text-color); 21 color: props.get(vars.$text-color);
22 text-transform: props.get(vars.$text-transform); 22 text-transform: props.get(vars.$text-transform);
23 letter-spacing: normal; 23 letter-spacing: normal;
24 24
25 & + & { 25 & + & {
26 margin-block-start: props.get(vars.$margin-bs-sibling); 26 margin-block-start: props.get(vars.$margin-bs-sibling);
27 } 27 }
28 28
29 @include bem.elem("highlight") { 29 @include bem.elem('highlight') {
30 background-image: linear-gradient( 30 background-image: linear-gradient(to top,
31 to top, 31 transparent props.get(vars.$bg-start),
32 transparent props.get(vars.$bg-start), 32 props.get(vars.$bg-color) props.get(vars.$bg-start),
33 props.get(vars.$bg-color) props.get(vars.$bg-start), 33 props.get(vars.$bg-color) props.get(vars.$bg-end),
34 props.get(vars.$bg-color) props.get(vars.$bg-end), 34 transparent props.get(vars.$bg-end));
35 transparent props.get(vars.$bg-end)
36 );
37 } 35 }
38 36
39 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, 37 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings, $text-transform, $text-color in vars.$sizes {
40 $feature-settings, $text-transform, $text-color in vars.$sizes
41 {
42 @include bem.modifier($mod) { 38 @include bem.modifier($mod) {
43 font-family: props.get($font-family); 39 font-family: props.get($font-family);
44 font-size: props.get($font-size); 40 font-size: props.get($font-size);
45 font-weight: props.get($font-weight); 41 font-weight: props.get($font-weight);
46 font-feature-settings: props.get($feature-settings); 42 font-feature-settings: props.get($feature-settings);
47 line-height: props.get($line-height); 43 line-height: props.get($line-height);
48 color: props.get($text-color); 44 color: props.get($text-color);
49 text-transform: props.get($text-transform); 45 text-transform: props.get($text-transform);
50 letter-spacing: props.get($letter-spacing); 46 letter-spacing: props.get($letter-spacing);
51 } 47 }
52 } 48 }
53 49
54 @include bem.modifier("display") { 50 @include bem.modifier('display') {
55 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, 51 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings, $text-transform, $text-color in vars.$display--sizes {
56 $feature-settings, $text-transform, $text-color in vars.$display--sizes
57 {
58 @include bem.modifier($mod) { 52 @include bem.modifier($mod) {
59 font-family: props.get($font-family); 53 font-family: props.get($font-family);
60 font-size: props.get($font-size); 54 font-size: props.get($font-size);
61 font-weight: props.get($font-weight); 55 font-weight: props.get($font-weight);
62 font-feature-settings: props.get($feature-settings); 56 font-feature-settings: props.get($feature-settings);
63 line-height: props.get($line-height); 57 line-height: props.get($line-height);
64 color: props.get($text-color); 58 color: props.get($text-color);
65 text-transform: props.get($text-transform); 59 text-transform: props.get($text-transform);
66 letter-spacing: props.get($letter-spacing); 60 letter-spacing: props.get($letter-spacing);
67 transform: translateX(props.get(vars.$offset)); 61 transform: translateX(props.get(vars.$offset));
68 } 62 }
69 } 63 }
70 } 64 }
@@ -79,26 +73,18 @@
79 } 73 }
80 } 74 }
81 75
82 @include bem.elem("highlight") { 76 @include bem.elem('highlight') {
83 background-image: linear-gradient( 77 background-image: linear-gradient(to top,
84 to top, 78 transparent props.get(vars.$bg-start),
85 transparent props.get(vars.$bg-start), 79 props.get(vars.$static-themes, $theme, --bg-color) props.get(vars.$bg-start),
86 props.get(vars.$static-themes, $theme, --bg-color) props.get(vars.$bg-start), 80 props.get(vars.$static-themes, $theme, --bg-color) props.get(vars.$bg-end),
87 props.get(vars.$static-themes, $theme, --bg-color) props.get(vars.$bg-end), 81 transparent props.get(vars.$bg-end));
88 transparent props.get(vars.$bg-end)
89 );
90 } 82 }
91 83
92 @include bem.modifier("display") { 84 @include bem.modifier('display') {
93 @each $mod, $value in vars.$sizes { 85 @each $mod, $value in vars.$sizes {
94 @include bem.modifier($mod) { 86 @include bem.modifier($mod) {
95 color: props.get( 87 color: props.get(vars.$static-themes, $theme, --display, --#{$mod}, --text-color);
96 vars.$static-themes,
97 $theme,
98 --display,
99 --#{$mod},
100 --text-color
101 );
102 } 88 }
103 } 89 }
104 } 90 }
generated by cgit v1.3.1 (git 2.54.0) at 2026-07-22 21:29:51 +0000