summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2025-11-08 11:07:52 +0100
committerVolpeon <git@volpeon.ink>2025-11-08 11:07:52 +0100
commit6e00d88cb8524ea4445c204883882a46ceb4ad11 (patch)
treeeaa0d99dabee226dc3f559b6785cae18c0642314
parents-links: Add --mark-external (diff)
downloadiro-design-6e00d88cb8524ea4445c204883882a46ceb4ad11.tar.gz
iro-design-6e00d88cb8524ea4445c204883882a46ceb4ad11.tar.bz2
iro-design-6e00d88cb8524ea4445c204883882a46ceb4ad11.zip
Heading typography
Diffstat
-rw-r--r--src/objects/_divider.scss2
-rw-r--r--src/objects/_divider.vars.scss1
-rw-r--r--src/objects/_heading.scss6
-rw-r--r--src/objects/_heading.vars.scss54
-rw-r--r--src/scopes/_headings.scss6
5 files changed, 44 insertions, 25 deletions
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..2d27658 100644
--- a/src/objects/_heading.scss
+++ b/src/objects/_heading.scss
@@ -32,26 +32,28 @@
32 transparent props.get(vars.$bg-end)); 32 transparent props.get(vars.$bg-end));
33 } 33 }
34 34
35 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings, $text-transform in vars.$sizes { 35 @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) { 36 @include bem.modifier($mod) {
37 font-family: props.get($font-family); 37 font-family: props.get($font-family);
38 font-size: props.get($font-size); 38 font-size: props.get($font-size);
39 font-weight: props.get($font-weight); 39 font-weight: props.get($font-weight);
40 font-feature-settings: props.get($feature-settings); 40 font-feature-settings: props.get($feature-settings);
41 line-height: props.get($line-height); 41 line-height: props.get($line-height);
42 color: props.get($text-color);
42 text-transform: props.get($text-transform); 43 text-transform: props.get($text-transform);
43 letter-spacing: props.get($letter-spacing); 44 letter-spacing: props.get($letter-spacing);
44 } 45 }
45 } 46 }
46 47
47 @include bem.modifier('display') { 48 @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 { 49 @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) { 50 @include bem.modifier($mod) {
50 font-family: props.get($font-family); 51 font-family: props.get($font-family);
51 font-size: props.get($font-size); 52 font-size: props.get($font-size);
52 font-weight: props.get($font-weight); 53 font-weight: props.get($font-weight);
53 font-feature-settings: props.get($feature-settings); 54 font-feature-settings: props.get($feature-settings);
54 line-height: props.get($line-height); 55 line-height: props.get($line-height);
56 color: props.get($text-color);
55 text-transform: props.get($text-transform); 57 text-transform: props.get($text-transform);
56 letter-spacing: props.get($letter-spacing); 58 letter-spacing: props.get($letter-spacing);
57 transform: translateX(props.get(vars.$offset)); 59 transform: translateX(props.get(vars.$offset));
diff --git a/src/objects/_heading.vars.scss b/src/objects/_heading.vars.scss
index f6b77fc..ccef017 100644
--- a/src/objects/_heading.vars.scss
+++ b/src/objects/_heading.vars.scss
@@ -5,8 +5,22 @@ $offset: props.def(--o-heading--offset, -.02em) !default;
5$margin-bs: props.def(--o-heading--margin-bs, props.get(core.$size--700)) !default; 5$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; 6$margin-bs-sibling: props.def(--o-heading--margin-bs-sibling, props.get(core.$size--325)) !default;
7 7
8$text-color: props.def(--o-heading--text-color, props.get(core.$theme, --heading), 'color') !default; 8$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; 9$bg-color: props.def(--o-heading--bg-color, props.get(core.$theme, --base, --50), 'color') !default;
10
11$text-color--xxl: props.def(--o-heading--xxl--text-color, props.get(core.$theme, --heading), 'color') !default;
12$text-color--xl: props.def(--o-heading--xl--text-color, props.get($text-color--xxl), 'color') !default;
13$text-color--lg: props.def(--o-heading--lg--text-color, props.get($text-color--xxl), 'color') !default;
14$text-color--md: props.def(--o-heading--md--text-color, props.get($text-color--xxl), 'color') !default;
15$text-color--sm: props.def(--o-heading--sm--text-color, props.get(core.$theme, --text-mute-more), 'color') !default;
16$text-color--xs: props.def(--o-heading--xs--text-color, props.get($text-color--sm), 'color') !default;
17
18$display--text-color--xxl: props.def(--o-heading--display--xxl--text-color, props.get(core.$theme, --heading), 'color') !default;
19$display--text-color--xl: props.def(--o-heading--display--xl--text-color, props.get($display--text-color--xxl), 'color') !default;
20$display--text-color--lg: props.def(--o-heading--display--lg--text-color, props.get($display--text-color--xxl), 'color') !default;
21$display--text-color--md: props.def(--o-heading--display--md--text-color, props.get($display--text-color--xxl), 'color') !default;
22$display--text-color--sm: props.def(--o-heading--display--sm--text-color, props.get($display--text-color--xxl), 'color') !default;
23$display--text-color--xs: props.def(--o-heading--display--xs--text-color, props.get(core.$theme, --text-mute-more), 'color') !default;
10 24
11$bg-start: props.def(--o-heading--bg-start, .05em) !default; 25$bg-start: props.def(--o-heading--bg-start, .05em) !default;
12$bg-end: props.def(--o-heading--bg-end, .5em) !default; 26$bg-end: props.def(--o-heading--bg-end, .5em) !default;
@@ -51,27 +65,27 @@ $text-transform--md: props.def(--o-heading--md--text-transform, none) !default
51 65
52$font-family--sm: props.def(--o-heading--sm--font-family, props.get(core.$font--standard--family)) !default; 66$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; 67$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; 68$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; 69$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; 70$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; 71$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; 72$text-transform--sm: props.def(--o-heading--sm--text-transform, none) !default;
59 73
60$font-family--xs: props.def(--o-heading--xs--font-family, props.get(core.$font--standard--family)) !default; 74$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; 75$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; 76$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; 77$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; 78$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; 79$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; 80$text-transform--xs: props.def(--o-heading--xs--text-transform, none) !default;
67 81
68$sizes: ( 82$sizes: (
69 'xs' $font-family--xs $line-height--xs $font-size--xs $font-weight--xs $letter-spacing--xs $feature-settings--xs $text-transform--xs, 83 '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, 84 '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, 85 '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, 86 '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, 87 '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, 88 '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; 89) !default;
76 90
77$display--font-family--xxl: props.def(--o-heading--display--xxl--font-family, props.get(core.$font--headline--family)) !default; 91$display--font-family--xxl: props.def(--o-heading--display--xxl--font-family, props.get(core.$font--headline--family)) !default;
@@ -108,7 +122,7 @@ $display--text-transform--md: props.def(--o-heading--display--md--text-transfo
108 122
109$display--font-family--sm: props.def(--o-heading--display--sm--font-family, props.get(core.$font--standard--family)) !default; 123$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; 124$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; 125$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; 126$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; 127$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; 128$display--feature-settings--sm: props.def(--o-heading--display--sm--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
@@ -117,7 +131,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; 131$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; 132$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; 133$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; 134$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; 135$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; 136$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; 137$display--text-transform--xs: props.def(--o-heading--display--xs--text-transform, none) !default;
@@ -130,10 +144,10 @@ $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; 144$display--font-size--xs--md: props.def(--o-heading--display--xs--font-size, props.get(core.$font-size--50), 'md') !default;
131 145
132$display--sizes: ( 146$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, 147 '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, 148 '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, 149 '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, 150 '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, 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,
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, 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,
139) !default; 153) !default;
diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss
index 7a9f088..0a56ef1 100644
--- a/src/scopes/_headings.scss
+++ b/src/scopes/_headings.scss
@@ -40,26 +40,28 @@
40 transparent .6em); 40 transparent .6em);
41 } 41 }
42 42
43 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings, $text-transform in heading.$sizes { 43 @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)} { 44 #{map.get($-size-map, $mod)} {
45 font-family: props.get($font-family); 45 font-family: props.get($font-family);
46 font-size: props.get($font-size); 46 font-size: props.get($font-size);
47 font-weight: props.get($font-weight); 47 font-weight: props.get($font-weight);
48 font-feature-settings: props.get($feature-settings); 48 font-feature-settings: props.get($feature-settings);
49 line-height: props.get($line-height); 49 line-height: props.get($line-height);
50 color: props.get($text-color);
50 text-transform: props.get($text-transform); 51 text-transform: props.get($text-transform);
51 letter-spacing: props.get($letter-spacing); 52 letter-spacing: props.get($letter-spacing);
52 } 53 }
53 } 54 }
54 55
55 @include bem.modifier('display') { 56 @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 { 57 @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)} { 58 #{map.get($-size-map, $mod)} {
58 font-family: props.get($font-family); 59 font-family: props.get($font-family);
59 font-size: props.get($font-size); 60 font-size: props.get($font-size);
60 font-weight: props.get($font-weight); 61 font-weight: props.get($font-weight);
61 font-feature-settings: props.get($feature-settings); 62 font-feature-settings: props.get($feature-settings);
62 line-height: props.get($line-height); 63 line-height: props.get($line-height);
64 color: props.get($text-color);
63 text-transform: props.get($text-transform); 65 text-transform: props.get($text-transform);
64 letter-spacing: props.get($letter-spacing); 66 letter-spacing: props.get($letter-spacing);
65 } 67 }
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-11-08 22:35:38 +0000