summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2025-11-08 11:50:57 +0100
committerVolpeon <git@volpeon.ink>2025-11-08 11:50:57 +0100
commit990a2cd28ed8814442546c749c35c63f231df59d (patch)
tree277b31bf20f049aca2fa596ce0251b6a26f95e79 /src
parentHeading typography (diff)
downloadiro-design-990a2cd28ed8814442546c749c35c63f231df59d.tar.gz
iro-design-990a2cd28ed8814442546c749c35c63f231df59d.tar.bz2
iro-design-990a2cd28ed8814442546c749c35c63f231df59d.zip
Heading: Add static theme colors
Diffstat (limited to 'src')
-rw-r--r--src/objects/_heading.scss22
-rw-r--r--src/objects/_heading.vars.scss54
-rw-r--r--src/scopes/_headings.scss21
3 files changed, 97 insertions, 0 deletions
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss
index 2d27658..1d6e2dc 100644
--- a/src/objects/_heading.scss
+++ b/src/objects/_heading.scss
@@ -1,4 +1,6 @@
1@use 'sass:map';
1@use 'sass:meta'; 2@use 'sass:meta';
3@use 'sass:string';
2@use 'iro-sass/src/bem'; 4@use 'iro-sass/src/bem';
3@use 'iro-sass/src/props'; 5@use 'iro-sass/src/props';
4@use '../props' as *; 6@use '../props' as *;
@@ -60,5 +62,25 @@
60 } 62 }
61 } 63 }
62 } 64 }
65
66 @each $theme in map.keys(props.get(vars.$static-themes)) {
67 @include bem.modifier(string.slice($theme, 3)) {
68 color: props.get(vars.$static-themes, $theme, --text-color);
69
70 @each $mod, $value in vars.$sizes {
71 @include bem.modifier($mod) {
72 color: props.get(vars.$static-themes, $theme, --#{$mod}, --text-color);
73 }
74 }
75
76 @include bem.modifier('display') {
77 @each $mod, $value in vars.$sizes {
78 @include bem.modifier($mod) {
79 color: props.get(vars.$static-themes, $theme, --display, --#{$mod}, --text-color);
80 }
81 }
82 }
83 }
84 }
63 } 85 }
64} 86}
diff --git a/src/objects/_heading.vars.scss b/src/objects/_heading.vars.scss
index ccef017..cf07488 100644
--- a/src/objects/_heading.vars.scss
+++ b/src/objects/_heading.vars.scss
@@ -1,3 +1,5 @@
1@use 'sass:map';
2@use 'sass:string';
1@use 'iro-sass/src/props'; 3@use 'iro-sass/src/props';
2@use '../core.vars' as core; 4@use '../core.vars' as core;
3 5
@@ -151,3 +153,55 @@ $display--sizes: (
151 'xl' $display--font-family--xl $display--line-height--xl $display--font-size--xl $display--font-weight--xl $display--letter-spacing--xl $display--feature-settings--xl $display--text-transform--xl $display--text-color--xl, 153 'xl' $display--font-family--xl $display--line-height--xl $display--font-size--xl $display--font-weight--xl $display--letter-spacing--xl $display--feature-settings--xl $display--text-transform--xl $display--text-color--xl,
152 'xxl' $display--font-family--xxl $display--line-height--xxl $display--font-size--xxl $display--font-weight--xxl $display--letter-spacing--xxl $display--feature-settings--xxl $display--text-transform--xxl $display--text-color--xxl, 154 'xxl' $display--font-family--xxl $display--line-height--xxl $display--font-size--xxl $display--font-weight--xxl $display--letter-spacing--xxl $display--feature-settings--xxl $display--text-transform--xxl $display--text-color--xxl,
153) !default; 155) !default;
156
157$static-themes: props.def(--o-heading, (), 'color');
158
159@each $theme in map.keys(props.get(core.$transparent-colors)) {
160 $heading-theme: --static-#{string.slice($theme, 3)};
161
162 $static-themes: props.merge($static-themes, (
163 $heading-theme: (
164 --text-color: props.get(core.$transparent-colors, $theme, --900),
165
166 --xxl: (
167 --text-color: props.get(core.$transparent-colors, $theme, --900),
168 ),
169 --xl: (
170 --text-color: props.get(core.$transparent-colors, $theme, --900),
171 ),
172 --lg: (
173 --text-color: props.get(core.$transparent-colors, $theme, --900),
174 ),
175 --md: (
176 --text-color: props.get(core.$transparent-colors, $theme, --900),
177 ),
178 --sm: (
179 --text-color: props.get(core.$transparent-colors, $theme, --500),
180 ),
181 --xs: (
182 --text-color: props.get(core.$transparent-colors, $theme, --500),
183 ),
184
185 --display: (
186 --xxl: (
187 --text-color: props.get(core.$transparent-colors, $theme, --900),
188 ),
189 --xl: (
190 --text-color: props.get(core.$transparent-colors, $theme, --900),
191 ),
192 --lg: (
193 --text-color: props.get(core.$transparent-colors, $theme, --900),
194 ),
195 --md: (
196 --text-color: props.get(core.$transparent-colors, $theme, --900),
197 ),
198 --sm: (
199 --text-color: props.get(core.$transparent-colors, $theme, --900),
200 ),
201 --xs: (
202 --text-color: props.get(core.$transparent-colors, $theme, --500),
203 ),
204 ),
205 )
206 ));
207}
diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss
index 0a56ef1..362b116 100644
--- a/src/scopes/_headings.scss
+++ b/src/scopes/_headings.scss
@@ -1,4 +1,5 @@
1@use 'sass:map'; 1@use 'sass:map';
2@use 'sass:string';
2@use 'iro-sass/src/bem'; 3@use 'iro-sass/src/bem';
3@use 'iro-sass/src/props'; 4@use 'iro-sass/src/props';
4@use '../objects/heading.vars' as heading; 5@use '../objects/heading.vars' as heading;
@@ -67,5 +68,25 @@
67 } 68 }
68 } 69 }
69 } 70 }
71
72 @each $theme in map.keys(props.get(heading.$static-themes)) {
73 @include bem.modifier(string.slice($theme, 3)) {
74 color: props.get(heading.$static-themes, $theme, --text-color);
75
76 @each $mod, $value in heading.$sizes {
77 #{map.get($-size-map, $mod)} {
78 color: props.get(heading.$static-themes, $theme, --#{$mod}, --text-color);
79 }
80 }
81
82 @include bem.modifier('display') {
83 @each $mod, $value in heading.$sizes {
84 #{map.get($-size-map, $mod)} {
85 color: props.get(heading.$static-themes, $theme, --display, --#{$mod}, --text-color);
86 }
87 }
88 }
89 }
90 }
70 } 91 }
71} 92}
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-11-08 20:12:48 +0000