summaryrefslogtreecommitdiffstats
path: root/src/objects/_heading.vars.scss
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2025-11-07 18:13:11 +0100
committerVolpeon <git@volpeon.ink>2025-11-07 18:13:11 +0100
commitc1b24fc8d1786ec8963c50d82320dcdc0367934e (patch)
tree228264d7668ae1b2af84aae71ef4ce7fe12b5c9c /src/objects/_heading.vars.scss
parentHeadline font family adjusted (diff)
downloadiro-design-c1b24fc8d1786ec8963c50d82320dcdc0367934e.tar.gz
iro-design-c1b24fc8d1786ec8963c50d82320dcdc0367934e.tar.bz2
iro-design-c1b24fc8d1786ec8963c50d82320dcdc0367934e.zip
Add text-transform variable for headings
Diffstat (limited to 'src/objects/_heading.vars.scss')
-rw-r--r--src/objects/_heading.vars.scss37
1 files changed, 25 insertions, 12 deletions
diff --git a/src/objects/_heading.vars.scss b/src/objects/_heading.vars.scss
index 1d6df26..371cab0 100644
--- a/src/objects/_heading.vars.scss
+++ b/src/objects/_heading.vars.scss
@@ -12,6 +12,7 @@ $font-family: props.def(--o-heading--font-family, props.get(core.$font--sta
12$line-height: props.def(--o-heading--line-height, props.get(core.$font--standard--line-height)) !default; 12$line-height: props.def(--o-heading--line-height, props.get(core.$font--standard--line-height)) !default;
13$font-weight: props.def(--o-heading--font-weight, bold) !default; 13$font-weight: props.def(--o-heading--font-weight, bold) !default;
14$feature-settings: props.def(--o-heading--feature-settings, props.get(core.$font--standard--feature-settings)) !default; 14$feature-settings: props.def(--o-heading--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
15$text-transform: props.def(--o-heading--text-transform, none) !default;
15 16
16$font-family--xxl: props.def(--o-heading--xxl--font-family, props.get(core.$font--headline--family)) !default; 17$font-family--xxl: props.def(--o-heading--xxl--font-family, props.get(core.$font--headline--family)) !default;
17$line-height--xxl: props.def(--o-heading--xxl--line-height, props.get(core.$font--headline--line-height)) !default; 18$line-height--xxl: props.def(--o-heading--xxl--line-height, props.get(core.$font--headline--line-height)) !default;
@@ -19,6 +20,7 @@ $font-size--xxl: props.def(--o-heading--xxl--font-size, props.get(core.$f
19$font-weight--xxl: props.def(--o-heading--xxl--font-weight, props.get(core.$font--headline--weight)) !default; 20$font-weight--xxl: props.def(--o-heading--xxl--font-weight, props.get(core.$font--headline--weight)) !default;
20$letter-spacing--xxl: props.def(--o-heading--xxl--letter-spacing, 0) !default; 21$letter-spacing--xxl: props.def(--o-heading--xxl--letter-spacing, 0) !default;
21$feature-settings--xxl: props.def(--o-heading--xxl--feature-settings, props.get(core.$font--headline--feature-settings)) !default; 22$feature-settings--xxl: props.def(--o-heading--xxl--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
23$text-transform--xxl: props.def(--o-heading--xxl--text-transform, none) !default;
22 24
23$font-family--xl: props.def(--o-heading--xl--font-family, props.get(core.$font--headline--family)) !default; 25$font-family--xl: props.def(--o-heading--xl--font-family, props.get(core.$font--headline--family)) !default;
24$line-height--xl: props.def(--o-heading--xl--line-height, props.get(core.$font--headline--line-height)) !default; 26$line-height--xl: props.def(--o-heading--xl--line-height, props.get(core.$font--headline--line-height)) !default;
@@ -26,6 +28,7 @@ $font-size--xl: props.def(--o-heading--xl--font-size, props.get(core.$fon
26$font-weight--xl: props.def(--o-heading--xl--font-weight, props.get(core.$font--headline--weight)) !default; 28$font-weight--xl: props.def(--o-heading--xl--font-weight, props.get(core.$font--headline--weight)) !default;
27$letter-spacing--xl: props.def(--o-heading--xl--letter-spacing, 0) !default; 29$letter-spacing--xl: props.def(--o-heading--xl--letter-spacing, 0) !default;
28$feature-settings--xl: props.def(--o-heading--xl--feature-settings, props.get(core.$font--headline--feature-settings)) !default; 30$feature-settings--xl: props.def(--o-heading--xl--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
31$text-transform--xl: props.def(--o-heading--xl--text-transform, none) !default;
29 32
30$font-family--lg: props.def(--o-heading--lg--font-family, props.get(core.$font--standard--family)) !default; 33$font-family--lg: props.def(--o-heading--lg--font-family, props.get(core.$font--standard--family)) !default;
31$line-height--lg: props.def(--o-heading--lg--line-height, props.get(core.$font--standard--line-height)) !default; 34$line-height--lg: props.def(--o-heading--lg--line-height, props.get(core.$font--standard--line-height)) !default;
@@ -33,6 +36,7 @@ $font-size--lg: props.def(--o-heading--lg--font-size, props.get(core.$fon
33$font-weight--lg: props.def(--o-heading--lg--font-weight, bold) !default; 36$font-weight--lg: props.def(--o-heading--lg--font-weight, bold) !default;
34$letter-spacing--lg: props.def(--o-heading--lg--letter-spacing, 0) !default; 37$letter-spacing--lg: props.def(--o-heading--lg--letter-spacing, 0) !default;
35$feature-settings--lg: props.def(--o-heading--lg--feature-settings, props.get(core.$font--standard--feature-settings)) !default; 38$feature-settings--lg: props.def(--o-heading--lg--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
39$text-transform--lg: props.def(--o-heading--lg--text-transform, none) !default;
36 40
37$font-family--md: props.def(--o-heading--md--font-family, props.get(core.$font--standard--family)) !default; 41$font-family--md: props.def(--o-heading--md--font-family, props.get(core.$font--standard--family)) !default;
38$line-height--md: props.def(--o-heading--md--line-height, props.get(core.$font--standard--line-height)) !default; 42$line-height--md: props.def(--o-heading--md--line-height, props.get(core.$font--standard--line-height)) !default;
@@ -40,6 +44,7 @@ $font-size--md: props.def(--o-heading--md--font-size, props.get(core.$fon
40$font-weight--md: props.def(--o-heading--md--font-weight, bold) !default; 44$font-weight--md: props.def(--o-heading--md--font-weight, bold) !default;
41$letter-spacing--md: props.def(--o-heading--md--letter-spacing, 0) !default; 45$letter-spacing--md: props.def(--o-heading--md--letter-spacing, 0) !default;
42$feature-settings--md: props.def(--o-heading--md--feature-settings, props.get(core.$font--standard--feature-settings)) !default; 46$feature-settings--md: props.def(--o-heading--md--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
47$text-transform--md: props.def(--o-heading--md--text-transform, none) !default;
43 48
44$font-family--sm: props.def(--o-heading--sm--font-family, props.get(core.$font--standard--family)) !default; 49$font-family--sm: props.def(--o-heading--sm--font-family, props.get(core.$font--standard--family)) !default;
45$line-height--sm: props.def(--o-heading--sm--line-height, props.get(core.$font--standard--line-height)) !default; 50$line-height--sm: props.def(--o-heading--sm--line-height, props.get(core.$font--standard--line-height)) !default;
@@ -47,6 +52,7 @@ $font-size--sm: props.def(--o-heading--sm--font-size, props.get(core.$fon
47$font-weight--sm: props.def(--o-heading--sm--font-weight, 500) !default; 52$font-weight--sm: props.def(--o-heading--sm--font-weight, 500) !default;
48$letter-spacing--sm: props.def(--o-heading--sm--letter-spacing, 1px) !default; 53$letter-spacing--sm: props.def(--o-heading--sm--letter-spacing, 1px) !default;
49$feature-settings--sm: props.def(--o-heading--sm--feature-settings, props.get(core.$font--standard--feature-settings)) !default; 54$feature-settings--sm: props.def(--o-heading--sm--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
55$text-transform--sm: props.def(--o-heading--sm--text-transform, none) !default;
50 56
51$font-family--xs: props.def(--o-heading--xs--font-family, props.get(core.$font--standard--family)) !default; 57$font-family--xs: props.def(--o-heading--xs--font-family, props.get(core.$font--standard--family)) !default;
52$line-height--xs: props.def(--o-heading--xs--line-height, props.get(core.$font--standard--line-height)) !default; 58$line-height--xs: props.def(--o-heading--xs--line-height, props.get(core.$font--standard--line-height)) !default;
@@ -54,14 +60,15 @@ $font-size--xs: props.def(--o-heading--xs--font-size, props.get(core.$fon
54$font-weight--xs: props.def(--o-heading--xs--font-weight, 500) !default; 60$font-weight--xs: props.def(--o-heading--xs--font-weight, 500) !default;
55$letter-spacing--xs: props.def(--o-heading--xs--letter-spacing, 1px) !default; 61$letter-spacing--xs: props.def(--o-heading--xs--letter-spacing, 1px) !default;
56$feature-settings--xs: props.def(--o-heading--xs--feature-settings, props.get(core.$font--standard--feature-settings)) !default; 62$feature-settings--xs: props.def(--o-heading--xs--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
63$text-transform--xs: props.def(--o-heading--xs--text-transform, none) !default;
57 64
58$sizes: ( 65$sizes: (
59 'xs' $font-family--xs $line-height--xs $font-size--xs $font-weight--xs $letter-spacing--xs $feature-settings--xs, 66 'xs' $font-family--xs $line-height--xs $font-size--xs $font-weight--xs $letter-spacing--xs $feature-settings--xs $text-transform--xs,
60 'sm' $font-family--sm $line-height--sm $font-size--sm $font-weight--sm $letter-spacing--sm $feature-settings--sm, 67 'sm' $font-family--sm $line-height--sm $font-size--sm $font-weight--sm $letter-spacing--sm $feature-settings--sm $text-transform--sm,
61 'md' $font-family--md $line-height--md $font-size--md $font-weight--md $letter-spacing--md $feature-settings--md, 68 'md' $font-family--md $line-height--md $font-size--md $font-weight--md $letter-spacing--md $feature-settings--md $text-transform--md,
62 'lg' $font-family--lg $line-height--lg $font-size--lg $font-weight--lg $letter-spacing--lg $feature-settings--lg, 69 'lg' $font-family--lg $line-height--lg $font-size--lg $font-weight--lg $letter-spacing--lg $feature-settings--lg $text-transform--lg,
63 'xl' $font-family--xl $line-height--xl $font-size--xl $font-weight--xl $letter-spacing--xl $feature-settings--xl, 70 'xl' $font-family--xl $line-height--xl $font-size--xl $font-weight--xl $letter-spacing--xl $feature-settings--xl $text-transform--xl,
64 'xxl' $font-family--xxl $line-height--xxl $font-size--xxl $font-weight--xxl $letter-spacing--xxl $feature-settings--xxl, 71 'xxl' $font-family--xxl $line-height--xxl $font-size--xxl $font-weight--xxl $letter-spacing--xxl $feature-settings--xxl $text-transform--xxl,
65) !default; 72) !default;
66 73
67$display--font-family--xxl: props.def(--o-heading--display--xxl--font-family, props.get(core.$font--headline--family)) !default; 74$display--font-family--xxl: props.def(--o-heading--display--xxl--font-family, props.get(core.$font--headline--family)) !default;
@@ -70,6 +77,7 @@ $display--font-size--xxl: props.def(--o-heading--display--xxl--font-size,
70$display--font-weight--xxl: props.def(--o-heading--display--xxl--font-weight, props.get(core.$font--headline--weight)) !default; 77$display--font-weight--xxl: props.def(--o-heading--display--xxl--font-weight, props.get(core.$font--headline--weight)) !default;
71$display--letter-spacing--xxl: props.def(--o-heading--display--xxl--letter-spacing, 0) !default; 78$display--letter-spacing--xxl: props.def(--o-heading--display--xxl--letter-spacing, 0) !default;
72$display--feature-settings--xxl: props.def(--o-heading--display--xxl--feature-settings, props.get(core.$font--headline--feature-settings)) !default; 79$display--feature-settings--xxl: props.def(--o-heading--display--xxl--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
80$display--text-transform--xxl: props.def(--o-heading--display--xxl--text-transform, none) !default;
73 81
74$display--font-family--xl: props.def(--o-heading--display--xl--font-family, props.get(core.$font--headline--family)) !default; 82$display--font-family--xl: props.def(--o-heading--display--xl--font-family, props.get(core.$font--headline--family)) !default;
75$display--line-height--xl: props.def(--o-heading--display--xl--line-height, props.get(core.$font--headline--line-height)) !default; 83$display--line-height--xl: props.def(--o-heading--display--xl--line-height, props.get(core.$font--headline--line-height)) !default;
@@ -77,6 +85,7 @@ $display--font-size--xl: props.def(--o-heading--display--xl--font-size, p
77$display--font-weight--xl: props.def(--o-heading--display--xl--font-weight, props.get(core.$font--headline--weight)) !default; 85$display--font-weight--xl: props.def(--o-heading--display--xl--font-weight, props.get(core.$font--headline--weight)) !default;
78$display--letter-spacing--xl: props.def(--o-heading--display--xl--letter-spacing, 0) !default; 86$display--letter-spacing--xl: props.def(--o-heading--display--xl--letter-spacing, 0) !default;
79$display--feature-settings--xl: props.def(--o-heading--display--xl--feature-settings, props.get(core.$font--headline--feature-settings)) !default; 87$display--feature-settings--xl: props.def(--o-heading--display--xl--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
88$display--text-transform--xl: props.def(--o-heading--display--xl--text-transform, none) !default;
80 89
81$display--font-family--lg: props.def(--o-heading--display--lg--font-family, props.get(core.$font--headline--family)) !default; 90$display--font-family--lg: props.def(--o-heading--display--lg--font-family, props.get(core.$font--headline--family)) !default;
82$display--line-height--lg: props.def(--o-heading--display--lg--line-height, props.get(core.$font--headline--line-height)) !default; 91$display--line-height--lg: props.def(--o-heading--display--lg--line-height, props.get(core.$font--headline--line-height)) !default;
@@ -84,6 +93,7 @@ $display--font-size--lg: props.def(--o-heading--display--lg--font-size, p
84$display--font-weight--lg: props.def(--o-heading--display--lg--font-weight, props.get(core.$font--headline--weight)) !default; 93$display--font-weight--lg: props.def(--o-heading--display--lg--font-weight, props.get(core.$font--headline--weight)) !default;
85$display--letter-spacing--lg: props.def(--o-heading--display--lg--letter-spacing, 0) !default; 94$display--letter-spacing--lg: props.def(--o-heading--display--lg--letter-spacing, 0) !default;
86$display--feature-settings--lg: props.def(--o-heading--display--lg--feature-settings, props.get(core.$font--headline--feature-settings)) !default; 95$display--feature-settings--lg: props.def(--o-heading--display--lg--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
96$display--text-transform--lg: props.def(--o-heading--display--lg--text-transform, none) !default;
87 97
88$display--font-family--md: props.def(--o-heading--display--md--font-family, props.get(core.$font--headline--family)) !default; 98$display--font-family--md: props.def(--o-heading--display--md--font-family, props.get(core.$font--headline--family)) !default;
89$display--line-height--md: props.def(--o-heading--display--md--line-height, props.get(core.$font--headline--line-height)) !default; 99$display--line-height--md: props.def(--o-heading--display--md--line-height, props.get(core.$font--headline--line-height)) !default;
@@ -91,6 +101,7 @@ $display--font-size--md: props.def(--o-heading--display--md--font-size, p
91$display--font-weight--md: props.def(--o-heading--display--md--font-weight, props.get(core.$font--headline--weight)) !default; 101$display--font-weight--md: props.def(--o-heading--display--md--font-weight, props.get(core.$font--headline--weight)) !default;
92$display--letter-spacing--md: props.def(--o-heading--display--md--letter-spacing, 0) !default; 102$display--letter-spacing--md: props.def(--o-heading--display--md--letter-spacing, 0) !default;
93$display--feature-settings--md: props.def(--o-heading--display--md--feature-settings, props.get(core.$font--headline--feature-settings)) !default; 103$display--feature-settings--md: props.def(--o-heading--display--md--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
104$display--text-transform--md: props.def(--o-heading--display--md--text-transform, none) !default;
94 105
95$display--font-family--sm: props.def(--o-heading--display--sm--font-family, props.get(core.$font--standard--family)) !default; 106$display--font-family--sm: props.def(--o-heading--display--sm--font-family, props.get(core.$font--standard--family)) !default;
96$display--line-height--sm: props.def(--o-heading--display--sm--line-height, props.get(core.$font--standard--line-height)) !default; 107$display--line-height--sm: props.def(--o-heading--display--sm--line-height, props.get(core.$font--standard--line-height)) !default;
@@ -98,6 +109,7 @@ $display--font-size--sm: props.def(--o-heading--display--sm--font-size, p
98$display--font-weight--sm: props.def(--o-heading--display--sm--font-weight, bold) !default; 109$display--font-weight--sm: props.def(--o-heading--display--sm--font-weight, bold) !default;
99$display--letter-spacing--sm: props.def(--o-heading--display--sm--letter-spacing, 0) !default; 110$display--letter-spacing--sm: props.def(--o-heading--display--sm--letter-spacing, 0) !default;
100$display--feature-settings--sm: props.def(--o-heading--display--sm--feature-settings, props.get(core.$font--standard--feature-settings)) !default; 111$display--feature-settings--sm: props.def(--o-heading--display--sm--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
112$display--text-transform--sm: props.def(--o-heading--display--sm--text-transform, none) !default;
101 113
102$display--font-family--xs: props.def(--o-heading--display--xs--font-family, props.get(core.$font--standard--family)) !default; 114$display--font-family--xs: props.def(--o-heading--display--xs--font-family, props.get(core.$font--standard--family)) !default;
103$display--line-height--xs: props.def(--o-heading--display--xs--line-height, props.get(core.$font--standard--line-height)) !default; 115$display--line-height--xs: props.def(--o-heading--display--xs--line-height, props.get(core.$font--standard--line-height)) !default;
@@ -105,6 +117,7 @@ $display--font-size--xs: props.def(--o-heading--display--xs--font-size, p
105$display--font-weight--xs: props.def(--o-heading--display--xs--font-weight, 500) !default; 117$display--font-weight--xs: props.def(--o-heading--display--xs--font-weight, 500) !default;
106$display--letter-spacing--xs: props.def(--o-heading--display--xs--letter-spacing, 1px) !default; 118$display--letter-spacing--xs: props.def(--o-heading--display--xs--letter-spacing, 1px) !default;
107$display--feature-settings--xs: props.def(--o-heading--display--xs--feature-settings, props.get(core.$font--standard--feature-settings)) !default; 119$display--feature-settings--xs: props.def(--o-heading--display--xs--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
120$display--text-transform--xs: props.def(--o-heading--display--xs--text-transform, none) !default;
108 121
109$display--font-size--xxl--md: props.def(--o-heading--display--xxl--font-size, props.get(core.$font-size--900), 'md') !default; 122$display--font-size--xxl--md: props.def(--o-heading--display--xxl--font-size, props.get(core.$font-size--900), 'md') !default;
110$display--font-size--xl--md: props.def(--o-heading--display--xl--font-size, props.get(core.$font-size--600), 'md') !default; 123$display--font-size--xl--md: props.def(--o-heading--display--xl--font-size, props.get(core.$font-size--600), 'md') !default;
@@ -114,10 +127,10 @@ $display--font-size--sm--md: props.def(--o-heading--display--sm--font-size, pro
114$display--font-size--xs--md: props.def(--o-heading--display--xs--font-size, props.get(core.$font-size--50), 'md') !default; 127$display--font-size--xs--md: props.def(--o-heading--display--xs--font-size, props.get(core.$font-size--50), 'md') !default;
115 128
116$display--sizes: ( 129$display--sizes: (
117 '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, 130 '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,
118 '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, 131 '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,
119 '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, 132 '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,
120 '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, 133 '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,
121 '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, 134 '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,
122 '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, 135 '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,
123) !default; 136) !default;