summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/layouts/_container.scss12
-rw-r--r--src/layouts/_container.vars.scss16
-rw-r--r--src/objects/_card.vars.scss3
-rw-r--r--src/objects/_divider.scss2
-rw-r--r--src/objects/_divider.vars.scss1
-rw-r--r--src/objects/_heading.scss28
-rw-r--r--src/objects/_heading.vars.scss114
-rw-r--r--src/objects/_tabbar.scss4
-rw-r--r--src/objects/_tabbar.vars.scss1
-rw-r--r--src/scopes/_headings.scss27
-rw-r--r--src/scopes/_links.scss11
-rw-r--r--tpl/objects/heading.pug56
-rw-r--r--tpl/views/heading.pug44
13 files changed, 281 insertions, 38 deletions
diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss
index 0ae68c1..05d99a8 100644
--- a/src/layouts/_container.scss
+++ b/src/layouts/_container.scss
@@ -24,5 +24,17 @@
24 @include bem.modifier('pad-b') { 24 @include bem.modifier('pad-b') {
25 padding-block: props.get(vars.$pad-b); 25 padding-block: props.get(vars.$pad-b);
26 } 26 }
27
28 @each $mod, $pad-i, $pad-b in vars.$sizes {
29 @include bem.modifier($mod) {
30 @include bem.modifier('pad-i') {
31 padding-inline: props.get($pad-i);
32 }
33
34 @include bem.modifier('pad-b') {
35 padding-block: props.get($pad-b);
36 }
37 }
38 }
27 } 39 }
28} 40}
diff --git a/src/layouts/_container.vars.scss b/src/layouts/_container.vars.scss
index 8f0cef6..784203f 100644
--- a/src/layouts/_container.vars.scss
+++ b/src/layouts/_container.vars.scss
@@ -12,7 +12,7 @@ $fixed-sizes: (
12 'fixed': $fixed 12 'fixed': $fixed
13) !default; 13) !default;
14 14
15$pad-i: props.def(--l-container--pad-i, props.get(core.$size--400)) !default; 15$pad-i: props.def(--l-container--pad-i, props.get(core.$size--600)) !default;
16$pad-b: props.def(--l-container--pad-b, props.get(core.$size--800)) !default; 16$pad-b: props.def(--l-container--pad-b, props.get(core.$size--800)) !default;
17 17
18$pad-i--sm: props.def(--l-container--pad-i, props.get(core.$size--200), 'sm') !default; 18$pad-i--sm: props.def(--l-container--pad-i, props.get(core.$size--200), 'sm') !default;
@@ -20,3 +20,17 @@ $pad-b--sm: props.def(--l-container--pad-b, props.get(core.$size--600), 'sm') !d
20 20
21$pad-i--xs: props.def(--l-container--pad-i, props.get(core.$size--150), 'xs') !default; 21$pad-i--xs: props.def(--l-container--pad-i, props.get(core.$size--150), 'xs') !default;
22$pad-b--xs: props.def(--l-container--pad-b, props.get(core.$size--450), 'xs') !default; 22$pad-b--xs: props.def(--l-container--pad-b, props.get(core.$size--450), 'xs') !default;
23
24$sm--pad-i: props.def(--l-container--sm--pad-i, props.get(core.$size--300)) !default;
25$sm--pad-b: props.def(--l-container--sm--pad-b, props.get(core.$size--800)) !default;
26
27$sm--pad-i--sm: props.def(--l-container--sm--pad-i, props.get(core.$size--200), 'sm') !default;
28$sm--pad-b--sm: props.def(--l-container--sm--pad-b, props.get(core.$size--600), 'sm') !default;
29
30$sm--pad-i--xs: props.def(--l-container--sm--pad-i, props.get(core.$size--150), 'xs') !default;
31$sm--pad-b--xs: props.def(--l-container--sm--pad-b, props.get(core.$size--450), 'xs') !default;
32
33$sizes: (
34 'sm' $sm--pad-i $sm--pad-b,
35 'md' $sm--pad-i $sm--pad-b,
36) !default;
diff --git a/src/objects/_card.vars.scss b/src/objects/_card.vars.scss
index ebfba10..1e6448a 100644
--- a/src/objects/_card.vars.scss
+++ b/src/objects/_card.vars.scss
@@ -37,3 +37,6 @@ $key-focus--outline-color: props.def(--o-card--key-focus--outline-color, props.g
37 37
38$quiet--image-color: props.def(--o-card--quiet--image-color, props.get(core.$theme, --bg-base), 'color') !default; 38$quiet--image-color: props.def(--o-card--quiet--image-color, props.get(core.$theme, --bg-base), 'color') !default;
39$quiet--hover--image-color: props.def(--o-card--quiet--hover--image-color, props.get(core.$theme, --border), 'color') !default; 39$quiet--hover--image-color: props.def(--o-card--quiet--hover--image-color, props.get(core.$theme, --border), 'color') !default;
40
41$pad-i--sm: props.def(--o-card--pad-i, props.get(core.$size--200), 'sm') !default;
42$pad-b--sm: props.def(--o-card--pad-b, props.get(core.$size--175), 'sm') !default;
diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss
index 27af173..51175a7 100644
--- a/src/objects/_divider.scss
+++ b/src/objects/_divider.scss
@@ -24,7 +24,7 @@
24 line-height: 1; 24 line-height: 1;
25 color: props.get(vars.$strong--label-color); 25 color: props.get(vars.$strong--label-color);
26 text-transform: uppercase; 26 text-transform: uppercase;
27 letter-spacing: .5px; 27 letter-spacing: props.get(vars.$letter-spacing);
28 background-color: transparent; 28 background-color: transparent;
29 29
30 &::before, 30 &::before,
diff --git a/src/objects/_divider.vars.scss b/src/objects/_divider.vars.scss
index 688fbb3..7081f47 100644
--- a/src/objects/_divider.vars.scss
+++ b/src/objects/_divider.vars.scss
@@ -6,6 +6,7 @@
6$margin-b: props.def(--o-divider--size, props.get(core.$size--85)) !default; 6$margin-b: props.def(--o-divider--size, props.get(core.$size--85)) !default;
7$vertical--border-width: props.def(--o-divider--vertical--width, props.get(core.$border-width--thin)) !default; 7$vertical--border-width: props.def(--o-divider--vertical--width, props.get(core.$border-width--thin)) !default;
8$dot--size: props.def(--o-divider--dot--size, props.get(core.$size--50)) !default; 8$dot--size: props.def(--o-divider--dot--size, props.get(core.$size--50)) !default;
9$letter-spacing: props.def(--o-divider--letter-spacing, 1px) !default;
9 10
10$strong--border-width: props.def(--o-divider--strong--border-width, props.get(core.$border-width--thick)) !default; 11$strong--border-width: props.def(--o-divider--strong--border-width, props.get(core.$border-width--thick)) !default;
11$strong--label-font-size: props.def(--o-divider--strong--label-font-size, props.get(core.$font-size--100)) !default; 12$strong--label-font-size: props.def(--o-divider--strong--label-font-size, props.get(core.$font-size--100)) !default;
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss
index 82e03f3..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 *;
@@ -32,31 +34,53 @@
32 transparent props.get(vars.$bg-end)); 34 transparent props.get(vars.$bg-end));
33 } 35 }
34 36
35 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings, $text-transform in vars.$sizes { 37 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings, $text-transform, $text-color in vars.$sizes {
36 @include bem.modifier($mod) { 38 @include bem.modifier($mod) {
37 font-family: props.get($font-family); 39 font-family: props.get($font-family);
38 font-size: props.get($font-size); 40 font-size: props.get($font-size);
39 font-weight: props.get($font-weight); 41 font-weight: props.get($font-weight);
40 font-feature-settings: props.get($feature-settings); 42 font-feature-settings: props.get($feature-settings);
41 line-height: props.get($line-height); 43 line-height: props.get($line-height);
44 color: props.get($text-color);
42 text-transform: props.get($text-transform); 45 text-transform: props.get($text-transform);
43 letter-spacing: props.get($letter-spacing); 46 letter-spacing: props.get($letter-spacing);
44 } 47 }
45 } 48 }
46 49
47 @include bem.modifier('display') { 50 @include bem.modifier('display') {
48 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings, $text-transform in vars.$display--sizes { 51 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings, $text-transform, $text-color in vars.$display--sizes {
49 @include bem.modifier($mod) { 52 @include bem.modifier($mod) {
50 font-family: props.get($font-family); 53 font-family: props.get($font-family);
51 font-size: props.get($font-size); 54 font-size: props.get($font-size);
52 font-weight: props.get($font-weight); 55 font-weight: props.get($font-weight);
53 font-feature-settings: props.get($feature-settings); 56 font-feature-settings: props.get($feature-settings);
54 line-height: props.get($line-height); 57 line-height: props.get($line-height);
58 color: props.get($text-color);
55 text-transform: props.get($text-transform); 59 text-transform: props.get($text-transform);
56 letter-spacing: props.get($letter-spacing); 60 letter-spacing: props.get($letter-spacing);
57 transform: translateX(props.get(vars.$offset)); 61 transform: translateX(props.get(vars.$offset));
58 } 62 }
59 } 63 }
60 } 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 }
61 } 85 }
62} 86}
diff --git a/src/objects/_heading.vars.scss b/src/objects/_heading.vars.scss
index 78413dd..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
@@ -5,8 +7,22 @@ $offset: props.def(--o-heading--offset, -.02em) !default;
5$margin-bs: props.def(--o-heading--margin-bs, props.get(core.$size--700)) !default; 7$margin-bs: props.def(--o-heading--margin-bs, props.get(core.$size--700)) !default;
6$margin-bs-sibling: props.def(--o-heading--margin-bs-sibling, props.get(core.$size--325)) !default; 8$margin-bs-sibling: props.def(--o-heading--margin-bs-sibling, props.get(core.$size--325)) !default;
7 9
8$text-color: props.def(--o-heading--text-color, props.get(core.$theme, --heading), 'color') !default; 10$text-color: props.def(--o-heading--text-color, props.get(core.$theme, --heading), 'color') !default;
9$bg-color: props.def(--o-heading--bg-color, props.get(core.$theme, --base, --50), 'color') !default; 11$bg-color: props.def(--o-heading--bg-color, props.get(core.$theme, --base, --50), 'color') !default;
12
13$text-color--xxl: props.def(--o-heading--xxl--text-color, props.get(core.$theme, --heading), 'color') !default;
14$text-color--xl: props.def(--o-heading--xl--text-color, props.get($text-color--xxl), 'color') !default;
15$text-color--lg: props.def(--o-heading--lg--text-color, props.get($text-color--xxl), 'color') !default;
16$text-color--md: props.def(--o-heading--md--text-color, props.get($text-color--xxl), 'color') !default;
17$text-color--sm: props.def(--o-heading--sm--text-color, props.get(core.$theme, --text-mute-more), 'color') !default;
18$text-color--xs: props.def(--o-heading--xs--text-color, props.get($text-color--sm), 'color') !default;
19
20$display--text-color--xxl: props.def(--o-heading--display--xxl--text-color, props.get(core.$theme, --heading), 'color') !default;
21$display--text-color--xl: props.def(--o-heading--display--xl--text-color, props.get($display--text-color--xxl), 'color') !default;
22$display--text-color--lg: props.def(--o-heading--display--lg--text-color, props.get($display--text-color--xxl), 'color') !default;
23$display--text-color--md: props.def(--o-heading--display--md--text-color, props.get($display--text-color--xxl), 'color') !default;
24$display--text-color--sm: props.def(--o-heading--display--sm--text-color, props.get($display--text-color--xxl), 'color') !default;
25$display--text-color--xs: props.def(--o-heading--display--xs--text-color, props.get(core.$theme, --text-mute-more), 'color') !default;
10 26
11$bg-start: props.def(--o-heading--bg-start, .05em) !default; 27$bg-start: props.def(--o-heading--bg-start, .05em) !default;
12$bg-end: props.def(--o-heading--bg-end, .5em) !default; 28$bg-end: props.def(--o-heading--bg-end, .5em) !default;
@@ -20,7 +36,7 @@ $text-transform: props.def(--o-heading--text-transform, none) !default;
20$font-family--xxl: props.def(--o-heading--xxl--font-family, props.get(core.$font--standard--family)) !default; 36$font-family--xxl: props.def(--o-heading--xxl--font-family, props.get(core.$font--standard--family)) !default;
21$line-height--xxl: props.def(--o-heading--xxl--line-height, props.get(core.$font--standard--line-height)) !default; 37$line-height--xxl: props.def(--o-heading--xxl--line-height, props.get(core.$font--standard--line-height)) !default;
22$font-size--xxl: props.def(--o-heading--xxl--font-size, props.get(core.$font-size--300)) !default; 38$font-size--xxl: props.def(--o-heading--xxl--font-size, props.get(core.$font-size--300)) !default;
23$font-weight--xxl: props.def(--o-heading--xxl--font-weight, props.get(core.$font--standard--weight)) !default; 39$font-weight--xxl: props.def(--o-heading--xxl--font-weight, bold) !default;
24$letter-spacing--xxl: props.def(--o-heading--xxl--letter-spacing, 0) !default; 40$letter-spacing--xxl: props.def(--o-heading--xxl--letter-spacing, 0) !default;
25$feature-settings--xxl: props.def(--o-heading--xxl--feature-settings, props.get(core.$font--standard--feature-settings)) !default; 41$feature-settings--xxl: props.def(--o-heading--xxl--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
26$text-transform--xxl: props.def(--o-heading--xxl--text-transform, none) !default; 42$text-transform--xxl: props.def(--o-heading--xxl--text-transform, none) !default;
@@ -28,7 +44,7 @@ $text-transform--xxl: props.def(--o-heading--xxl--text-transform, none) !defau
28$font-family--xl: props.def(--o-heading--xl--font-family, props.get(core.$font--standard--family)) !default; 44$font-family--xl: props.def(--o-heading--xl--font-family, props.get(core.$font--standard--family)) !default;
29$line-height--xl: props.def(--o-heading--xl--line-height, props.get(core.$font--standard--line-height)) !default; 45$line-height--xl: props.def(--o-heading--xl--line-height, props.get(core.$font--standard--line-height)) !default;
30$font-size--xl: props.def(--o-heading--xl--font-size, props.get(core.$font-size--200)) !default; 46$font-size--xl: props.def(--o-heading--xl--font-size, props.get(core.$font-size--200)) !default;
31$font-weight--xl: props.def(--o-heading--xl--font-weight, props.get(core.$font--standard--weight)) !default; 47$font-weight--xl: props.def(--o-heading--xl--font-weight, bold) !default;
32$letter-spacing--xl: props.def(--o-heading--xl--letter-spacing, 0) !default; 48$letter-spacing--xl: props.def(--o-heading--xl--letter-spacing, 0) !default;
33$feature-settings--xl: props.def(--o-heading--xl--feature-settings, props.get(core.$font--standard--feature-settings)) !default; 49$feature-settings--xl: props.def(--o-heading--xl--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
34$text-transform--xl: props.def(--o-heading--xl--text-transform, none) !default; 50$text-transform--xl: props.def(--o-heading--xl--text-transform, none) !default;
@@ -51,27 +67,27 @@ $text-transform--md: props.def(--o-heading--md--text-transform, none) !default
51 67
52$font-family--sm: props.def(--o-heading--sm--font-family, props.get(core.$font--standard--family)) !default; 68$font-family--sm: props.def(--o-heading--sm--font-family, props.get(core.$font--standard--family)) !default;
53$line-height--sm: props.def(--o-heading--sm--line-height, props.get(core.$font--standard--line-height)) !default; 69$line-height--sm: props.def(--o-heading--sm--line-height, props.get(core.$font--standard--line-height)) !default;
54$font-size--sm: props.def(--o-heading--sm--font-size, props.get(core.$font-size--75)) !default; 70$font-size--sm: props.def(--o-heading--sm--font-size, props.get(core.$font-size--100)) !default;
55$font-weight--sm: props.def(--o-heading--sm--font-weight, 500) !default; 71$font-weight--sm: props.def(--o-heading--sm--font-weight, normal) !default;
56$letter-spacing--sm: props.def(--o-heading--sm--letter-spacing, 1px) !default; 72$letter-spacing--sm: props.def(--o-heading--sm--letter-spacing, 0) !default;
57$feature-settings--sm: props.def(--o-heading--sm--feature-settings, props.get(core.$font--standard--feature-settings)) !default; 73$feature-settings--sm: props.def(--o-heading--sm--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
58$text-transform--sm: props.def(--o-heading--sm--text-transform, none) !default; 74$text-transform--sm: props.def(--o-heading--sm--text-transform, none) !default;
59 75
60$font-family--xs: props.def(--o-heading--xs--font-family, props.get(core.$font--standard--family)) !default; 76$font-family--xs: props.def(--o-heading--xs--font-family, props.get(core.$font--standard--family)) !default;
61$line-height--xs: props.def(--o-heading--xs--line-height, props.get(core.$font--standard--line-height)) !default; 77$line-height--xs: props.def(--o-heading--xs--line-height, props.get(core.$font--standard--line-height)) !default;
62$font-size--xs: props.def(--o-heading--xs--font-size, props.get(core.$font-size--50)) !default; 78$font-size--xs: props.def(--o-heading--xs--font-size, props.get(core.$font-size--50)) !default;
63$font-weight--xs: props.def(--o-heading--xs--font-weight, 500) !default; 79$font-weight--xs: props.def(--o-heading--xs--font-weight, normal) !default;
64$letter-spacing--xs: props.def(--o-heading--xs--letter-spacing, 1px) !default; 80$letter-spacing--xs: props.def(--o-heading--xs--letter-spacing, 1px) !default;
65$feature-settings--xs: props.def(--o-heading--xs--feature-settings, props.get(core.$font--standard--feature-settings)) !default; 81$feature-settings--xs: props.def(--o-heading--xs--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
66$text-transform--xs: props.def(--o-heading--xs--text-transform, none) !default; 82$text-transform--xs: props.def(--o-heading--xs--text-transform, none) !default;
67 83
68$sizes: ( 84$sizes: (
69 'xs' $font-family--xs $line-height--xs $font-size--xs $font-weight--xs $letter-spacing--xs $feature-settings--xs $text-transform--xs, 85 'xs' $font-family--xs $line-height--xs $font-size--xs $font-weight--xs $letter-spacing--xs $feature-settings--xs $text-transform--xs $text-color--xs,
70 'sm' $font-family--sm $line-height--sm $font-size--sm $font-weight--sm $letter-spacing--sm $feature-settings--sm $text-transform--sm, 86 'sm' $font-family--sm $line-height--sm $font-size--sm $font-weight--sm $letter-spacing--sm $feature-settings--sm $text-transform--sm $text-color--sm,
71 'md' $font-family--md $line-height--md $font-size--md $font-weight--md $letter-spacing--md $feature-settings--md $text-transform--md, 87 'md' $font-family--md $line-height--md $font-size--md $font-weight--md $letter-spacing--md $feature-settings--md $text-transform--md $text-color--md,
72 'lg' $font-family--lg $line-height--lg $font-size--lg $font-weight--lg $letter-spacing--lg $feature-settings--lg $text-transform--lg, 88 'lg' $font-family--lg $line-height--lg $font-size--lg $font-weight--lg $letter-spacing--lg $feature-settings--lg $text-transform--lg $text-color--lg,
73 'xl' $font-family--xl $line-height--xl $font-size--xl $font-weight--xl $letter-spacing--xl $feature-settings--xl $text-transform--xl, 89 'xl' $font-family--xl $line-height--xl $font-size--xl $font-weight--xl $letter-spacing--xl $feature-settings--xl $text-transform--xl $text-color--xl,
74 'xxl' $font-family--xxl $line-height--xxl $font-size--xxl $font-weight--xxl $letter-spacing--xxl $feature-settings--xxl $text-transform--xxl, 90 'xxl' $font-family--xxl $line-height--xxl $font-size--xxl $font-weight--xxl $letter-spacing--xxl $feature-settings--xxl $text-transform--xxl $text-color--xxl,
75) !default; 91) !default;
76 92
77$display--font-family--xxl: props.def(--o-heading--display--xxl--font-family, props.get(core.$font--headline--family)) !default; 93$display--font-family--xxl: props.def(--o-heading--display--xxl--font-family, props.get(core.$font--headline--family)) !default;
@@ -101,14 +117,14 @@ $display--text-transform--lg: props.def(--o-heading--display--lg--text-transfo
101$display--font-family--md: props.def(--o-heading--display--md--font-family, props.get(core.$font--standard--family)) !default; 117$display--font-family--md: props.def(--o-heading--display--md--font-family, props.get(core.$font--standard--family)) !default;
102$display--line-height--md: props.def(--o-heading--display--md--line-height, props.get(core.$font--standard--line-height)) !default; 118$display--line-height--md: props.def(--o-heading--display--md--line-height, props.get(core.$font--standard--line-height)) !default;
103$display--font-size--md: props.def(--o-heading--display--md--font-size, props.get(core.$font-size--150)) !default; 119$display--font-size--md: props.def(--o-heading--display--md--font-size, props.get(core.$font-size--150)) !default;
104$display--font-weight--md: props.def(--o-heading--display--md--font-weight, props.get(core.$font--standard--weight)) !default; 120$display--font-weight--md: props.def(--o-heading--display--md--font-weight, bold) !default;
105$display--letter-spacing--md: props.def(--o-heading--display--md--letter-spacing, 0) !default; 121$display--letter-spacing--md: props.def(--o-heading--display--md--letter-spacing, 0) !default;
106$display--feature-settings--md: props.def(--o-heading--display--md--feature-settings, props.get(core.$font--standard--feature-settings)) !default; 122$display--feature-settings--md: props.def(--o-heading--display--md--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
107$display--text-transform--md: props.def(--o-heading--display--md--text-transform, none) !default; 123$display--text-transform--md: props.def(--o-heading--display--md--text-transform, none) !default;
108 124
109$display--font-family--sm: props.def(--o-heading--display--sm--font-family, props.get(core.$font--standard--family)) !default; 125$display--font-family--sm: props.def(--o-heading--display--sm--font-family, props.get(core.$font--standard--family)) !default;
110$display--line-height--sm: props.def(--o-heading--display--sm--line-height, props.get(core.$font--standard--line-height)) !default; 126$display--line-height--sm: props.def(--o-heading--display--sm--line-height, props.get(core.$font--standard--line-height)) !default;
111$display--font-size--sm: props.def(--o-heading--display--sm--font-size, props.get(core.$font-size--75)) !default; 127$display--font-size--sm: props.def(--o-heading--display--sm--font-size, props.get(core.$font-size--100)) !default;
112$display--font-weight--sm: props.def(--o-heading--display--sm--font-weight, bold) !default; 128$display--font-weight--sm: props.def(--o-heading--display--sm--font-weight, bold) !default;
113$display--letter-spacing--sm: props.def(--o-heading--display--sm--letter-spacing, 0) !default; 129$display--letter-spacing--sm: props.def(--o-heading--display--sm--letter-spacing, 0) !default;
114$display--feature-settings--sm: props.def(--o-heading--display--sm--feature-settings, props.get(core.$font--standard--feature-settings)) !default; 130$display--feature-settings--sm: props.def(--o-heading--display--sm--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
@@ -117,7 +133,7 @@ $display--text-transform--sm: props.def(--o-heading--display--sm--text-transfo
117$display--font-family--xs: props.def(--o-heading--display--xs--font-family, props.get(core.$font--standard--family)) !default; 133$display--font-family--xs: props.def(--o-heading--display--xs--font-family, props.get(core.$font--standard--family)) !default;
118$display--line-height--xs: props.def(--o-heading--display--xs--line-height, props.get(core.$font--standard--line-height)) !default; 134$display--line-height--xs: props.def(--o-heading--display--xs--line-height, props.get(core.$font--standard--line-height)) !default;
119$display--font-size--xs: props.def(--o-heading--display--xs--font-size, props.get(core.$font-size--50)) !default; 135$display--font-size--xs: props.def(--o-heading--display--xs--font-size, props.get(core.$font-size--50)) !default;
120$display--font-weight--xs: props.def(--o-heading--display--xs--font-weight, 500) !default; 136$display--font-weight--xs: props.def(--o-heading--display--xs--font-weight, normal) !default;
121$display--letter-spacing--xs: props.def(--o-heading--display--xs--letter-spacing, 1px) !default; 137$display--letter-spacing--xs: props.def(--o-heading--display--xs--letter-spacing, 1px) !default;
122$display--feature-settings--xs: props.def(--o-heading--display--xs--feature-settings, props.get(core.$font--standard--feature-settings)) !default; 138$display--feature-settings--xs: props.def(--o-heading--display--xs--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
123$display--text-transform--xs: props.def(--o-heading--display--xs--text-transform, none) !default; 139$display--text-transform--xs: props.def(--o-heading--display--xs--text-transform, none) !default;
@@ -130,10 +146,62 @@ $display--font-size--sm--md: props.def(--o-heading--display--sm--font-size, pro
130$display--font-size--xs--md: props.def(--o-heading--display--xs--font-size, props.get(core.$font-size--50), 'md') !default; 146$display--font-size--xs--md: props.def(--o-heading--display--xs--font-size, props.get(core.$font-size--50), 'md') !default;
131 147
132$display--sizes: ( 148$display--sizes: (
133 'xs' $display--font-family--xs $display--line-height--xs $display--font-size--xs $display--font-weight--xs $display--letter-spacing--xs $display--feature-settings--xs $display--text-transform--xs, 149 'xs' $display--font-family--xs $display--line-height--xs $display--font-size--xs $display--font-weight--xs $display--letter-spacing--xs $display--feature-settings--xs $display--text-transform--xs $display--text-color--xs,
134 'sm' $display--font-family--sm $display--line-height--sm $display--font-size--sm $display--font-weight--sm $display--letter-spacing--sm $display--feature-settings--sm $display--text-transform--sm, 150 'sm' $display--font-family--sm $display--line-height--sm $display--font-size--sm $display--font-weight--sm $display--letter-spacing--sm $display--feature-settings--sm $display--text-transform--sm $display--text-color--sm,
135 'md' $display--font-family--md $display--line-height--md $display--font-size--md $display--font-weight--md $display--letter-spacing--md $display--feature-settings--md $display--text-transform--md, 151 'md' $display--font-family--md $display--line-height--md $display--font-size--md $display--font-weight--md $display--letter-spacing--md $display--feature-settings--md $display--text-transform--md $display--text-color--md,
136 'lg' $display--font-family--lg $display--line-height--lg $display--font-size--lg $display--font-weight--lg $display--letter-spacing--lg $display--feature-settings--lg $display--text-transform--lg, 152 'lg' $display--font-family--lg $display--line-height--lg $display--font-size--lg $display--font-weight--lg $display--letter-spacing--lg $display--feature-settings--lg $display--text-transform--lg $display--text-color--lg,
137 '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, 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,
138 '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, 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,
139) !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/objects/_tabbar.scss b/src/objects/_tabbar.scss
index a9daaae..eee38e9 100644
--- a/src/objects/_tabbar.scss
+++ b/src/objects/_tabbar.scss
@@ -18,8 +18,8 @@
18 18
19 &::after { 19 &::after {
20 display: block; 20 display: block;
21 block-size: props.get(vars.$indicator--width); 21 block-size: props.get(vars.$border--width);
22 margin-block-start: calc(-1 * props.get(vars.$indicator--width)); 22 margin-block-start: calc(-1 * props.get(vars.$border--width));
23 content: ''; 23 content: '';
24 background-color: props.get(vars.$railing--bg-color); 24 background-color: props.get(vars.$railing--bg-color);
25 } 25 }
diff --git a/src/objects/_tabbar.vars.scss b/src/objects/_tabbar.vars.scss
index 4095629..3cf01fd 100644
--- a/src/objects/_tabbar.vars.scss
+++ b/src/objects/_tabbar.vars.scss
@@ -8,6 +8,7 @@ $rounding: props.def(--o-tabbar--rounding, props.get(core.$rounding--sm)) !def
8$spacing: props.def(--o-tabbar--spacing, props.get(core.$size--400)) !default; 8$spacing: props.def(--o-tabbar--spacing, props.get(core.$size--400)) !default;
9$tab--pad-i: props.def(--o-tabbar--tab--pad-i, props.get(core.$size--50)) !default; 9$tab--pad-i: props.def(--o-tabbar--tab--pad-i, props.get(core.$size--50)) !default;
10 10
11$border--width: props.def(--o-tabbar--border--width, props.get(core.$border-width--thin)) !default;
11$indicator--width: props.def(--o-tabbar--indicator--width, props.get(core.$border-width--medium)) !default; 12$indicator--width: props.def(--o-tabbar--indicator--width, props.get(core.$border-width--medium)) !default;
12 13
13$key-focus--border-width: props.def(--o-tabbar--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; 14$key-focus--border-width: props.def(--o-tabbar--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss
index 7a9f088..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;
@@ -40,30 +41,52 @@
40 transparent .6em); 41 transparent .6em);
41 } 42 }
42 43
43 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings, $text-transform in heading.$sizes { 44 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings, $text-transform, $text-color in heading.$sizes {
44 #{map.get($-size-map, $mod)} { 45 #{map.get($-size-map, $mod)} {
45 font-family: props.get($font-family); 46 font-family: props.get($font-family);
46 font-size: props.get($font-size); 47 font-size: props.get($font-size);
47 font-weight: props.get($font-weight); 48 font-weight: props.get($font-weight);
48 font-feature-settings: props.get($feature-settings); 49 font-feature-settings: props.get($feature-settings);
49 line-height: props.get($line-height); 50 line-height: props.get($line-height);
51 color: props.get($text-color);
50 text-transform: props.get($text-transform); 52 text-transform: props.get($text-transform);
51 letter-spacing: props.get($letter-spacing); 53 letter-spacing: props.get($letter-spacing);
52 } 54 }
53 } 55 }
54 56
55 @include bem.modifier('display') { 57 @include bem.modifier('display') {
56 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings, $text-transform in heading.$display--sizes { 58 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings, $text-transform, $text-color in heading.$display--sizes {
57 #{map.get($-size-map, $mod)} { 59 #{map.get($-size-map, $mod)} {
58 font-family: props.get($font-family); 60 font-family: props.get($font-family);
59 font-size: props.get($font-size); 61 font-size: props.get($font-size);
60 font-weight: props.get($font-weight); 62 font-weight: props.get($font-weight);
61 font-feature-settings: props.get($feature-settings); 63 font-feature-settings: props.get($feature-settings);
62 line-height: props.get($line-height); 64 line-height: props.get($line-height);
65 color: props.get($text-color);
63 text-transform: props.get($text-transform); 66 text-transform: props.get($text-transform);
64 letter-spacing: props.get($letter-spacing); 67 letter-spacing: props.get($letter-spacing);
65 } 68 }
66 } 69 }
67 } 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 }
68 } 91 }
69} 92}
diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss
index 9ade0c2..40be069 100644
--- a/src/scopes/_links.scss
+++ b/src/scopes/_links.scss
@@ -67,6 +67,17 @@
67 } 67 }
68 } 68 }
69 69
70 @include bem.modifier('mark-external') {
71 :link,
72 :visited {
73 &[href^='http'] {
74 &::after {
75 content: ' ↗';
76 }
77 }
78 }
79 }
80
70 @each $theme in map.keys(props.get(vars.$static-themes)) { 81 @each $theme in map.keys(props.get(vars.$static-themes)) {
71 @include bem.modifier(string.slice($theme, 3)) { 82 @include bem.modifier(string.slice($theme, 3)) {
72 :link, 83 :link,
diff --git a/tpl/objects/heading.pug b/tpl/objects/heading.pug
index 6cc05ad..cdc28f0 100644
--- a/tpl/objects/heading.pug
+++ b/tpl/objects/heading.pug
@@ -1,34 +1,76 @@
1mixin h1-heading(level, display = false) 1mixin h1-heading(level, display = false)
2 - let classes = ['o-heading', 'o-heading--' + level, { 'o-heading--display': display }] 2 -
3 let classes = [
4 'o-heading',
5 'o-heading--' + level,
6 'o-heading--' + attributes.color,
7 { 'o-heading--display': display }
8 ]
3 h1(class=classes)&attributes(attributes) 9 h1(class=classes)&attributes(attributes)
4 block 10 block
5 11
6mixin h2-heading(level, display = false) 12mixin h2-heading(level, display = false)
7 - let classes = ['o-heading', 'o-heading--' + level, { 'o-heading--display': display }] 13 -
14 let classes = [
15 'o-heading',
16 'o-heading--' + level,
17 'o-heading--' + attributes.color,
18 { 'o-heading--display': display }
19 ]
8 h2(class=classes)&attributes(attributes) 20 h2(class=classes)&attributes(attributes)
9 block 21 block
10 22
11mixin h3-heading(level, display = false) 23mixin h3-heading(level, display = false)
12 - let classes = ['o-heading', 'o-heading--' + level, { 'o-heading--display': display }] 24 -
25 let classes = [
26 'o-heading',
27 'o-heading--' + level,
28 'o-heading--' + attributes.color,
29 { 'o-heading--display': display }
30 ]
13 h3(class=classes)&attributes(attributes) 31 h3(class=classes)&attributes(attributes)
14 block 32 block
15 33
16mixin h4-heading(level, display = false) 34mixin h4-heading(level, display = false)
17 - let classes = ['o-heading', 'o-heading--' + level, { 'o-heading--display': display }] 35 -
36 let classes = [
37 'o-heading',
38 'o-heading--' + level,
39 'o-heading--' + attributes.color,
40 { 'o-heading--display': display }
41 ]
18 h4(class=classes)&attributes(attributes) 42 h4(class=classes)&attributes(attributes)
19 block 43 block
20 44
21mixin h5-heading(level, display = false) 45mixin h5-heading(level, display = false)
22 - let classes = ['o-heading', 'o-heading--' + level, { 'o-heading--display': display }] 46 -
47 let classes = [
48 'o-heading',
49 'o-heading--' + level,
50 'o-heading--' + attributes.color,
51 { 'o-heading--display': display }
52 ]
23 h5(class=classes)&attributes(attributes) 53 h5(class=classes)&attributes(attributes)
24 block 54 block
25 55
26mixin h6-heading(level, display = false) 56mixin h6-heading(level, display = false)
27 - let classes = ['o-heading', 'o-heading--' + level, { 'o-heading--display': display }] 57 -
58 let classes = [
59 'o-heading',
60 'o-heading--' + level,
61 'o-heading--' + attributes.color,
62 { 'o-heading--display': display }
63 ]
28 h6(class=classes)&attributes(attributes) 64 h6(class=classes)&attributes(attributes)
29 block 65 block
30 66
31mixin div-heading(level, display = false) 67mixin div-heading(level, display = false)
32 - let classes = ['o-heading', 'o-heading--' + level, { 'o-heading--display': display }] 68 -
69 let classes = [
70 'o-heading',
71 'o-heading--' + level,
72 'o-heading--' + attributes.color,
73 { 'o-heading--display': display }
74 ]
33 div(class=classes)&attributes(attributes) 75 div(class=classes)&attributes(attributes)
34 block 76 block
diff --git a/tpl/views/heading.pug b/tpl/views/heading.pug
index bc16cee..35c4de4 100644
--- a/tpl/views/heading.pug
+++ b/tpl/views/heading.pug
@@ -39,3 +39,47 @@ mixin view-heading
39 +div-heading('md', true)= 'MD display Heading' 39 +div-heading('md', true)= 'MD display Heading'
40 +div-heading('sm', true)= 'SM display Heading' 40 +div-heading('sm', true)= 'SM display Heading'
41 +div-heading('xs', true)= 'XS display Heading' 41 +div-heading('xs', true)= 'XS display Heading'
42
43 each theme in ['static-black', 'static-white']
44 -
45 const bg = theme.startsWith('static-black') ? 500 : 1000;
46
47 .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
48 h1.u-mt-0= 'H1 default'
49 h2= 'H2 default'
50 h3= 'H3 default'
51 h4= 'H4 default'
52 h5= 'H5 default'
53 h6= 'H6 default'
54
55 .c-box.s-headings(class=`s-headings--${theme}` style=`background-color: var(--colors--blue-static--${bg});`)
56 h1.u-mt-0= 'H1 styled'
57 h2= 'H2 styled'
58 h3= 'H3 styled'
59 h4= 'H4 styled'
60 h5= 'H5 styled'
61 h6= 'H6 styled'
62
63 .c-box.s-headings.s-headings--display(class=`s-headings--${theme}` style=`background-color: var(--colors--blue-static--${bg});`)
64 h1.u-mt-0= 'H1 display styled'
65 h2= 'H2 display styled'
66 h3= 'H3 display styled'
67 h4= 'H4 display styled'
68 h5= 'H5 display styled'
69 h6= 'H6 display styled'
70
71 .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
72 +div-heading('xxl')(color=theme class='u-mt-0')= 'XXL Heading'
73 +div-heading('xl')(color=theme)= 'XL Heading'
74 +div-heading('lg')(color=theme)= 'LG Heading'
75 +div-heading('md')(color=theme)= 'MD Heading'
76 +div-heading('sm')(color=theme)= 'SM Heading'
77 +div-heading('xs')(color=theme)= 'XS Heading'
78
79 .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
80 +div-heading('xxl', true)(color=theme class='u-mt-0')= 'XXL display Heading'
81 +div-heading('xl', true)(color=theme)= 'XL display Heading'
82 +div-heading('lg', true)(color=theme)= 'LG display Heading'
83 +div-heading('md', true)(color=theme)= 'MD display Heading'
84 +div-heading('sm', true)(color=theme)= 'SM display Heading'
85 +div-heading('xs', true)(color=theme)= 'XS display Heading'
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-11-09 13:18:46 +0000