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, 64 insertions, 50 deletions
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss
index 0e8392e..87a6269 100644
--- a/src/objects/_heading.scss
+++ b/src/objects/_heading.scss
@@ -1,64 +1,70 @@
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/src/bem'; 4@use "pkg:iro-sass/bem";
5@use 'pkg:iro-sass/src/props'; 5@use "pkg:iro-sass/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(to top, 30 background-image: linear-gradient(
31 transparent props.get(vars.$bg-start), 31 to top,
32 props.get(vars.$bg-color) props.get(vars.$bg-start), 32 transparent props.get(vars.$bg-start),
33 props.get(vars.$bg-color) props.get(vars.$bg-end), 33 props.get(vars.$bg-color) props.get(vars.$bg-start),
34 transparent props.get(vars.$bg-end)); 34 props.get(vars.$bg-color) props.get(vars.$bg-end),
35 transparent props.get(vars.$bg-end)
36 );
35 } 37 }
36 38
37 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings, $text-transform, $text-color in vars.$sizes { 39 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing,
40 $feature-settings, $text-transform, $text-color in vars.$sizes
41 {
38 @include bem.modifier($mod) { 42 @include bem.modifier($mod) {
39 font-family: props.get($font-family); 43 font-family: props.get($font-family);
40 font-size: props.get($font-size); 44 font-size: props.get($font-size);
41 font-weight: props.get($font-weight); 45 font-weight: props.get($font-weight);
42 font-feature-settings: props.get($feature-settings); 46 font-feature-settings: props.get($feature-settings);
43 line-height: props.get($line-height); 47 line-height: props.get($line-height);
44 color: props.get($text-color); 48 color: props.get($text-color);
45 text-transform: props.get($text-transform); 49 text-transform: props.get($text-transform);
46 letter-spacing: props.get($letter-spacing); 50 letter-spacing: props.get($letter-spacing);
47 } 51 }
48 } 52 }
49 53
50 @include bem.modifier('display') { 54 @include bem.modifier("display") {
51 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings, $text-transform, $text-color in vars.$display--sizes { 55 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing,
56 $feature-settings, $text-transform, $text-color in vars.$display--sizes
57 {
52 @include bem.modifier($mod) { 58 @include bem.modifier($mod) {
53 font-family: props.get($font-family); 59 font-family: props.get($font-family);
54 font-size: props.get($font-size); 60 font-size: props.get($font-size);
55 font-weight: props.get($font-weight); 61 font-weight: props.get($font-weight);
56 font-feature-settings: props.get($feature-settings); 62 font-feature-settings: props.get($feature-settings);
57 line-height: props.get($line-height); 63 line-height: props.get($line-height);
58 color: props.get($text-color); 64 color: props.get($text-color);
59 text-transform: props.get($text-transform); 65 text-transform: props.get($text-transform);
60 letter-spacing: props.get($letter-spacing); 66 letter-spacing: props.get($letter-spacing);
61 transform: translateX(props.get(vars.$offset)); 67 transform: translateX(props.get(vars.$offset));
62 } 68 }
63 } 69 }
64 } 70 }
@@ -73,18 +79,26 @@
73 } 79 }
74 } 80 }
75 81
76 @include bem.elem('highlight') { 82 @include bem.elem("highlight") {
77 background-image: linear-gradient(to top, 83 background-image: linear-gradient(
78 transparent props.get(vars.$bg-start), 84 to top,
79 props.get(vars.$static-themes, $theme, --bg-color) props.get(vars.$bg-start), 85 transparent props.get(vars.$bg-start),
80 props.get(vars.$static-themes, $theme, --bg-color) props.get(vars.$bg-end), 86 props.get(vars.$static-themes, $theme, --bg-color) props.get(vars.$bg-start),
81 transparent props.get(vars.$bg-end)); 87 props.get(vars.$static-themes, $theme, --bg-color) props.get(vars.$bg-end),
88 transparent props.get(vars.$bg-end)
89 );
82 } 90 }
83 91
84 @include bem.modifier('display') { 92 @include bem.modifier("display") {
85 @each $mod, $value in vars.$sizes { 93 @each $mod, $value in vars.$sizes {
86 @include bem.modifier($mod) { 94 @include bem.modifier($mod) {
87 color: props.get(vars.$static-themes, $theme, --display, --#{$mod}, --text-color); 95 color: props.get(
96 vars.$static-themes,
97 $theme,
98 --display,
99 --#{$mod},
100 --text-color
101 );
88 } 102 }
89 } 103 }
90 } 104 }
generated by cgit v1.3.1 (git 2.54.0) at 2026-07-22 15:23:28 +0000