Skip to content

Commit c13d7c7

Browse files
nmergetnmerget
authored
refactor: changed typography to use only css-properties (#174)
* refactor: changed typography to use only css-properties
1 parent 344f053 commit c13d7c7

File tree

10 files changed

+159
-210
lines changed

10 files changed

+159
-210
lines changed

‎scripts/scss-scaling-generator.js

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,14 @@ const fileHeader =
55
new Date().toString() +
66
'\n';
77

8-
const generateSpacings = (utility) => {
8+
const generateScaling = () => {
99
let allClasses = fileHeader;
1010

11-
if (utility) {
12-
allClasses += `@use "scaling-placeholder" as *;\n`;
13-
}
14-
1511
const scaleTypeKey = ['regular', 'functional', 'expressive'];
1612

1713
for (const scale of scaleTypeKey) {
1814
allClasses += `
19-
${utility ? '.' : '%'}db-scaling-${scale}{
15+
%db-scaling-${scale}{
2016
\t--db-sizing-xs: #{$db-sizing-${scale}-xs};
2117
\t--db-sizing-sm: #{$db-sizing-${scale}-s};
2218
\t--db-sizing-md: #{$db-sizing-${scale}-m};
@@ -58,4 +54,4 @@ ${utility ? '.' : '%'}db-scaling-${scale}{
5854
return allClasses;
5955
};
6056

61-
module.exports = generateSpacings;
57+
module.exports = generateScaling;

‎scripts/scss-typography-generator.js

Lines changed: 65 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
const prefix = 'db';
22

33
const fileHeader = `
4-
@use "variables" as *;
5-
@use "icon/icon-family-calc" as *;
6-
// Do not edit directly
7-
// Generated on
8-
// ${new Date().toString()}
9-
`;
4+
@use "variables" as *;
5+
@use "icon/icon-family-calc" as *;
6+
// Do not edit directly
7+
// Generated on
8+
// ${new Date().toString()}
9+
`;
1010

1111
const getShortSize = (size) => {
1212
if (size === '3xlarge') {
@@ -48,99 +48,44 @@ const getShortSize = (size) => {
4848
return size;
4949
};
5050

51-
const getUtilityClass = (utility, scale, textType, size) => {
52-
const isHeadline = textType === 'headline';
53-
54-
let result = `
55-
${utility ? '.' : '%'}${prefix}-${scale}-${textType}-${getShortSize(size)}{
56-
`;
57-
result += `
58-
line-height: $${prefix}-typography-${scale}-mobile-${textType}-${size}-line-height;
59-
font-size: $${prefix}-typography-${scale}-mobile-${textType}-${size}-font-size;
60-
`;
61-
62-
if (isHeadline) {
63-
result += `
64-
font-weight: 700;
65-
66-
&-light,
67-
&[data-variant="light"] {
68-
font-weight: 300;
69-
}
51+
/**
52+
*
53+
* @param properties {{scale: string, textType:string, size:string, sSize:string, isHeadline:boolean, mQuery: string}}
54+
*/
55+
const getMediaQueryProperties = (properties) => {
56+
const { textType, sSize, scale, size, isHeadline, mQuery } = properties;
57+
let result = `--db-type-${textType}-font-size-${sSize}: #{$${prefix}-typography-${scale}-${mQuery}-${textType}-${size}-font-size};
58+
--db-type-${textType}-line-height-${sSize}: #{$${prefix}-typography-${scale}-${mQuery}-${textType}-${size}-line-height};
7059
`;
71-
} else {
72-
result += `
73-
--db-base-icon-font-size: #{$${prefix}-typography-${scale}-mobile-${textType}-${size}-font-size};
74-
--db-base-icon-font-family: #{get-icon-family($${prefix}-typography-${scale}-mobile-${textType}-${size}-font-size,
75-
$${prefix}-typography-${scale}-mobile-${textType}-${size}-line-height)};
76-
--db-base-icon-font-family-filled: #{get-icon-family($${prefix}-typography-${scale}-mobile-${textType}-${size}-font-size,
77-
$${prefix}-typography-${scale}-mobile-${textType}-${size}-line-height,"filled")};
78-
--db-type-body-font-size-${getShortSize(
79-
size
80-
)}: #{$${prefix}-typography-${scale}-mobile-${textType}-${size}-font-size};
81-
--db-type-body-line-height-${getShortSize(
82-
size
83-
)}: #{$${prefix}-typography-${scale}-mobile-${textType}-${size}-line-height};
84-
`;
85-
}
86-
87-
result += `
88-
@media only screen and (min-width: $db-screens-md) {
89-
line-height: $${prefix}-typography-${scale}-tablet-${textType}-${size}-line-height;
90-
font-size: $${prefix}-typography-${scale}-tablet-${textType}-${size}-font-size;`;
91-
if (!isHeadline) {
92-
result += `
93-
--db-base-icon-font-size: #{$${prefix}-typography-${scale}-tablet-${textType}-${size}-font-size};
94-
--db-base-icon-font-family: #{get-icon-family($${prefix}-typography-${scale}-tablet-${textType}-${size}-font-size,
95-
$${prefix}-typography-${scale}-tablet-${textType}-${size}-line-height)};
96-
--db-base-icon-font-family-filled: #{get-icon-family($${prefix}-typography-${scale}-tablet-${textType}-${size}-font-size,
97-
$${prefix}-typography-${scale}-tablet-${textType}-${size}-line-height,"filled")};
98-
--db-type-body-font-size-${getShortSize(
99-
size
100-
)}: #{$${prefix}-typography-${scale}-tablet-${textType}-${size}-font-size};
101-
--db-type-body-line-height-${getShortSize(
102-
size
103-
)}: #{$${prefix}-typography-${scale}-tablet-${textType}-${size}-line-height};
104-
`;
105-
}
106-
107-
result += `}\n`;
10860

109-
result += `
110-
@media only screen and (min-width: $db-screens-lg) {
111-
line-height: $${prefix}-typography-${scale}-desktop-${textType}-${size}-line-height;
112-
font-size: $${prefix}-typography-${scale}-desktop-${textType}-${size}-font-size;`;
11361
if (!isHeadline) {
11462
result += `
115-
--db-base-icon-font-size: #{$${prefix}-typography-${scale}-desktop-${textType}-${size}-font-size};
116-
--db-base-icon-font-family: #{get-icon-family($${prefix}-typography-${scale}-desktop-${textType}-${size}-font-size,
117-
$${prefix}-typography-${scale}-desktop-${textType}-${size}-line-height)};
118-
--db-base-icon-font-family-filled: #{get-icon-family($${prefix}-typography-${scale}-desktop-${textType}-${size}-font-size,
119-
$${prefix}-typography-${scale}-desktop-${textType}-${size}-line-height,"filled")};
120-
--db-type-body-font-size-${getShortSize(
121-
size
122-
)}: #{$${prefix}-typography-${scale}-desktop-${textType}-${size}-font-size};
123-
--db-type-body-line-height-${getShortSize(
124-
size
125-
)}: #{$${prefix}-typography-${scale}-desktop-${textType}-${size}-line-height};
63+
--db-base-icon-font-size-${sSize}: #{$${prefix}-typography-${scale}-${mQuery}-${textType}-${size}-font-size};
64+
--db-base-icon-font-family-${sSize}: #{get-icon-family($${prefix}-typography-${scale}-${mQuery}-${textType}-${size}-font-size,
65+
$${prefix}-typography-${scale}-${mQuery}-${textType}-${size}-line-height)};
66+
--db-base-icon-font-family-filled-${sSize}: #{get-icon-family($${prefix}-typography-${scale}-${mQuery}-${textType}-${size}-font-size,
67+
$${prefix}-typography-${scale}-${mQuery}-${textType}-${size}-line-height,"filled")};
12668
`;
12769
}
12870

129-
result += `}`;
130-
131-
result += `
132-
}
133-
`;
134-
13571
return result;
13672
};
13773

138-
const generateClasses = (typography, utility) => {
139-
let allClasses = fileHeader;
74+
const getSizeProperties = (scale, textType, size, mQuery) => {
75+
const isHeadline = textType === 'headline';
76+
const sSize = getShortSize(size);
77+
return getMediaQueryProperties({
78+
scale,
79+
size,
80+
textType,
81+
sSize,
82+
isHeadline,
83+
mQuery
84+
});
85+
};
14086

141-
if (utility) {
142-
allClasses += `@use "variables" as *;\n@use "typography-placeholder" as *;\n`;
143-
}
87+
const generateTypography = (typography) => {
88+
let allClasses = fileHeader;
14489

14590
// ScaleTypeKey = [regular, functional, expressive]
14691
for (const scaleTypeKey of Object.keys(typography)) {
@@ -154,19 +99,43 @@ const generateClasses = (typography, utility) => {
15499
for (const textTypeKey of Object.keys(firstMediaQueryObject)) {
155100
const textTypeObject = firstMediaQueryObject[textTypeKey];
156101
// SizeKey = [3xlarge - 3xsmall]
157-
for (const sizeKey of Object.keys(textTypeObject)) {
158-
allClasses += getUtilityClass(
159-
utility,
160-
scaleTypeKey,
161-
textTypeKey,
162-
sizeKey
163-
);
102+
allClasses += `
103+
%${prefix}-typography-${textTypeKey}-${scaleTypeKey}{
104+
`;
105+
for (const mQuery of ['mobile', 'tablet', 'desktop']) {
106+
if (mQuery !== 'mobile') {
107+
allClasses += `@media only screen and (min-width: ${
108+
mQuery === 'tablet'
109+
? '#{$db-screens-md}'
110+
: '#{$db-screens-lg}'
111+
}) {
112+
`;
113+
}
114+
115+
for (const sizeKey of Object.keys(textTypeObject)) {
116+
allClasses += getSizeProperties(
117+
scaleTypeKey,
118+
textTypeKey,
119+
sizeKey,
120+
mQuery
121+
);
122+
}
123+
124+
if (mQuery !== 'mobile') {
125+
allClasses += `}
126+
127+
`;
128+
}
164129
}
130+
131+
allClasses += `
132+
}
133+
`;
165134
}
166135
}
167136
}
168137

169138
return allClasses;
170139
};
171140

172-
module.exports = generateClasses;
141+
module.exports = generateTypography;

‎scss/_tonality.scss

Lines changed: 69 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -3,80 +3,94 @@
33
@use "typography-placeholder" as *;
44
@use "scaling-placeholder" as *;
55

6-
:root {
7-
font-family: $db-font-family-sans;
8-
9-
h1,
10-
h2,
11-
h3,
12-
h4,
13-
h5,
14-
h6 {
15-
font-family: $db-font-family-head;
16-
}
6+
@mixin body-style($size) {
7+
--db-base-icon-font-size: var(--db-base-icon-font-size-#{$size});
8+
--db-base-icon-font-family: var(--db-base-icon-font-family-#{$size});
9+
--db-base-icon-font-family-filled: var(
10+
--db-base-icon-font-family-filled-#{$size}
11+
);
12+
line-height: var(--db-type-body-line-height-#{$size});
13+
font-size: var(--db-type-body-font-size-#{$size});
1714
}
1815

19-
@mixin styles($styles...) {
20-
@for $i from 0 to length($styles) {
21-
%db-ui-#{nth($styles, $i + 1)},
22-
.db-ui-#{nth($styles, $i + 1)} {
23-
@extend %db-scaling-#{nth($styles, $i + 1)};
16+
$sizes: "2xl", "xl", "lg", "md", "sm", "xs", "2xs";
17+
18+
:root {
19+
font-family: $db-font-family-sans;
2420

21+
@each $size in $sizes {
22+
@if ($size == "md") {
2523
*, // TODO: let's check whether we could even also enable this without the asterisk just by inheriting line-height and font-size on non-inheriting elements like buttons
2624
[data-size="medium"],
27-
%db-body-md {
28-
@extend %db-#{nth($styles, $i + 1)}-body-md;
25+
%db-body-#{$size} {
26+
@include body-style($size);
2927
}
30-
28+
} @else if($size == "sm") {
3129
small,
3230
[data-size="small"],
33-
%db-body-sm {
34-
@extend %db-#{nth($styles, $i + 1)}-body-sm;
31+
%db-body-#{$size} {
32+
@include body-style($size);
3533
}
36-
37-
%db-body-2xl {
38-
@extend %db-#{nth($styles, $i + 1)}-body-2xl;
39-
}
40-
41-
%db-body-xl {
42-
@extend %db-#{nth($styles, $i + 1)}-body-xl;
34+
} @else {
35+
%db-body-#{$size} {
36+
@include body-style($size);
4337
}
38+
}
39+
}
4440

45-
%db-body-lg {
46-
@extend %db-#{nth($styles, $i + 1)}-body-lg;
47-
}
41+
h1,
42+
h2,
43+
h3,
44+
h4,
45+
h5,
46+
h6 {
47+
font-family: $db-font-family-head;
48+
font-weight: 700;
4849

49-
%db-body-xs {
50-
@extend %db-#{nth($styles, $i + 1)}-body-xs;
51-
}
50+
&[data-variant="light"] {
51+
font-weight: 300;
52+
}
53+
}
5254

53-
%db-body-2xs {
54-
@extend %db-#{nth($styles, $i + 1)}-body-2xs;
55-
}
55+
h1 {
56+
line-height: var(--db-type-headline-line-height-xl);
57+
font-size: var(--db-type-headline-font-size-xl);
58+
}
5659

57-
h1 {
58-
@extend %db-#{nth($styles, $i + 1)}-headline-xl;
59-
}
60+
h2 {
61+
line-height: var(--db-type-headline-line-height-lg);
62+
font-size: var(--db-type-headline-font-size-lg);
63+
}
6064

61-
h2 {
62-
@extend %db-#{nth($styles, $i + 1)}-headline-lg;
63-
}
65+
h3 {
66+
line-height: var(--db-type-headline-line-height-md);
67+
font-size: var(--db-type-headline-font-size-md);
68+
}
6469

65-
h3 {
66-
@extend %db-#{nth($styles, $i + 1)}-headline-md;
67-
}
70+
h4 {
71+
line-height: var(--db-type-headline-line-height-sm);
72+
font-size: var(--db-type-headline-font-size-sm);
73+
}
6874

69-
h4 {
70-
@extend %db-#{nth($styles, $i + 1)}-headline-sm;
71-
}
75+
h5 {
76+
line-height: var(--db-type-headline-line-height-xs);
77+
font-size: var(--db-type-headline-font-size-xs);
78+
}
7279

73-
h5 {
74-
@extend %db-#{nth($styles, $i + 1)}-headline-xs;
75-
}
80+
h6 {
81+
line-height: var(--db-type-headline-line-height-2xs);
82+
font-size: var(--db-type-headline-font-size-2xs);
83+
}
84+
}
7685

77-
h6 {
78-
@extend %db-#{nth($styles, $i + 1)}-headline-2xs;
79-
}
86+
@mixin styles($styles...) {
87+
@for $i from 0 to length($styles) {
88+
%db-ui-#{nth($styles, $i + 1)},
89+
.db-ui-#{nth($styles, $i + 1)},
90+
[data-tonality="#{nth($styles, $i + 1)}"] {
91+
@extend %db-scaling-#{nth($styles, $i + 1)};
92+
@extend %db-typography-headline-#{nth($styles, $i + 1)};
93+
@extend %db-typography-body-#{nth($styles, $i + 1)};
8094
}
8195
}
8296
}

‎scss/icon/_icon-family-calc.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ $all-icon-sizes: (
4747
}
4848
$valid-sizes: append(
4949
$valid-sizes,
50-
#{map.get($all-icon-sizes, 16) + $font-style}
50+
#{map.get($all-icon-sizes, 64) + $font-style}
5151
);
5252

5353
$result-string: "";

‎source/_patterns/typography/_examples.demonstration.scss

Whitespace-only changes.

0 commit comments

Comments
 (0)