Skip to content

Commit 8a9d92d

Browse files
nmergetmfranzke
nmerget
and
mfranzke
authored
fix: issue with icon-font-family (#128)
* fix: issue with icon-font-family Co-authored-by: Maximilian Franzke <[email protected]>
1 parent bc1c029 commit 8a9d92d

6 files changed

+148
-103
lines changed

‎.markdown-lint.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ MD007:
2323
indent: 4 # Unordered list indentation
2424
MD010: false
2525
MD013:
26-
line_length: 500 # Line length 80 is far to short
26+
line_length: 550 # Line length 80 is far too short
2727
MD024: false #/no-duplicate-heading/no-duplicate-header
2828
MD026:
2929
punctuation: ".,;:!。，；:" # List of not allowed

‎scripts/scss-typography-generator.js

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
const prefix = 'db';
22

33
const fileHeader =
4-
'@use "sass:math";\n' +
4+
'@import "icon-family-calc";\n' +
55
'// Do not edit directly\n' +
66
'// Generated on ' +
77
new Date().toString() +
@@ -68,8 +68,8 @@ ${utility ? '.' : '%'}${prefix}-${scale}-${textType}-${getShortSize(size)}{
6868
} else {
6969
result += `
7070
--db-base-icon-font-size: #{$${prefix}-typography-${scale}-mobile-${textType}-${size}-font-size};
71-
--db-base-icon-font-family: #{"icons-" + (math.div($${prefix}-typography-${scale}-mobile-${textType}-${size}-font-size, 1rem)
72-
* 16 * $${prefix}-typography-${scale}-mobile-${textType}-${size}-line-height) + "-outline"},"missing-icons" !important;
71+
--db-base-icon-font-family: #{get-icon-family($${prefix}-typography-${scale}-mobile-${textType}-${size}-font-size,
72+
$${prefix}-typography-${scale}-mobile-${textType}-${size}-line-height)};
7373
`;
7474
}
7575

@@ -80,8 +80,8 @@ ${utility ? '.' : '%'}${prefix}-${scale}-${textType}-${getShortSize(size)}{
8080
if (!isHeadline) {
8181
result += `
8282
--db-base-icon-font-size: #{$${prefix}-typography-${scale}-tablet-${textType}-${size}-font-size};
83-
--db-base-icon-font-family: #{"icons-" + (math.div($${prefix}-typography-${scale}-tablet-${textType}-${size}-font-size, 1rem)
84-
* 16 * $${prefix}-typography-${scale}-tablet-${textType}-${size}-line-height) + "-outline"},"missing-icons" !important;
83+
--db-base-icon-font-family: #{get-icon-family($${prefix}-typography-${scale}-tablet-${textType}-${size}-font-size,
84+
$${prefix}-typography-${scale}-tablet-${textType}-${size}-line-height)};
8585
`;
8686
}
8787

@@ -94,8 +94,8 @@ ${utility ? '.' : '%'}${prefix}-${scale}-${textType}-${getShortSize(size)}{
9494
if (!isHeadline) {
9595
result += `
9696
--db-base-icon-font-size: #{$${prefix}-typography-${scale}-desktop-${textType}-${size}-font-size};
97-
--db-base-icon-font-family: #{"icons-" + (math.div($${prefix}-typography-${scale}-desktop-${textType}-${size}-font-size, 1rem)
98-
* 16 * $${prefix}-typography-${scale}-desktop-${textType}-${size}-line-height) + "-outline"},"missing-icons" !important;
97+
--db-base-icon-font-family: #{get-icon-family($${prefix}-typography-${scale}-desktop-${textType}-${size}-font-size,
98+
$${prefix}-typography-${scale}-desktop-${textType}-${size}-line-height)};
9999
`;
100100
}
101101

‎scss/_icon-family-calc.scss

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
@use "sass:math";
2+
@use "sass:map";
3+
@use "sass:list";
4+
5+
$all-icon-sizes: (
6+
16: "icons-16-outline",
7+
20: "icons-20-outline",
8+
24: "icons-24-outline",
9+
32: "icons-32-outline",
10+
48: "icons-48-outline",
11+
64: "icons-64-outline"
12+
);
13+
14+
@function get-icon-family($font-size, $line-height) {
15+
$icon-size: (math.div($font-size, 1rem) * 16 * $line-height);
16+
$valid-sizes: "";
17+
18+
@if ($icon-size<18) {
19+
$valid-sizes: append($valid-sizes, map.get($all-icon-sizes, 16));
20+
}
21+
@if ($icon-size<22) {
22+
$valid-sizes: append($valid-sizes, map.get($all-icon-sizes, 20));
23+
}
24+
@if ($icon-size<28) {
25+
$valid-sizes: append($valid-sizes, map.get($all-icon-sizes, 24));
26+
}
27+
@if ($icon-size<40) {
28+
$valid-sizes: append($valid-sizes, map.get($all-icon-sizes, 32));
29+
}
30+
@if ($icon-size<56) {
31+
$valid-sizes: append($valid-sizes, map.get($all-icon-sizes, 48));
32+
}
33+
$valid-sizes: append($valid-sizes, map.get($all-icon-sizes, 64));
34+
35+
$result-string: "";
36+
@each $size in $valid-sizes {
37+
@if ($size != "") {
38+
$result-string: $result-string + '"' + $size + '"' + ",";
39+
}
40+
}
41+
42+
$result-string: $result-string + '"missing-icons"';
43+
@return $result-string;
44+
}

‎scss/_typescale.scss

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
@import "font-faces";
2+
@import "typography-placeholder";
3+
@import "scaling-placeholder";
4+
5+
:root {
6+
@extend %db-ui-normal;
7+
8+
font-family: $db-font-family-sans;
9+
10+
h1,
11+
h2,
12+
h3,
13+
h4,
14+
h5,
15+
h6 {
16+
font-family: $db-font-family-head;
17+
}
18+
}
19+
20+
@mixin styles($styles...) {
21+
@for $i from 0 to length($styles) {
22+
%db-ui-#{nth($styles, $i + 1)},
23+
.db-ui-#{nth($styles, $i + 1)} {
24+
@extend %db-scaling-#{nth($styles, $i + 1)};
25+
26+
[data-size="large"] {
27+
@extend %db-#{nth($styles, $i + 1)}-body-lg;
28+
}
29+
30+
body,
31+
button,
32+
input,
33+
optgroup,
34+
select,
35+
textarea,
36+
[data-size="medium"] {
37+
@extend %db-#{nth($styles, $i + 1)}-body-md;
38+
}
39+
40+
small,
41+
[data-size="small"] {
42+
@extend %db-#{nth($styles, $i + 1)}-body-sm;
43+
}
44+
45+
h1 {
46+
@extend %db-#{nth($styles, $i + 1)}-headline-xl;
47+
}
48+
49+
h2 {
50+
@extend %db-#{nth($styles, $i + 1)}-headline-lg;
51+
}
52+
53+
h3 {
54+
@extend %db-#{nth($styles, $i + 1)}-headline-md;
55+
}
56+
57+
h4 {
58+
@extend %db-#{nth($styles, $i + 1)}-headline-sm;
59+
}
60+
61+
h5 {
62+
@extend %db-#{nth($styles, $i + 1)}-headline-xs;
63+
}
64+
65+
h6 {
66+
@extend %db-#{nth($styles, $i + 1)}-headline-2xs;
67+
}
68+
}
69+
}
70+
}
71+
72+
@include styles("expressive", "normal", "functional");

‎scss/_variables.global.scss

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
$db-sizing-xs: var(--db-sizing-xs);
2+
$db-sizing-sm: var(--db-sizing-sm);
3+
$db-sizing-md: var(--db-sizing-md);
4+
$db-sizing-lg: var(--db-sizing-lg);
5+
6+
$db-spacing-fixed-3xs: var(--db-spacing-fixed-3xs);
7+
$db-spacing-fixed-2xs: var(--db-spacing-fixed-2xs);
8+
$db-spacing-fixed-xs: var(--db-spacing-fixed-xs);
9+
$db-spacing-fixed-sm: var(--db-spacing-fixed-sm);
10+
$db-spacing-fixed-md: var(--db-spacing-fixed-md);
11+
$db-spacing-fixed-lg: var(--db-spacing-fixed-lg);
12+
$db-spacing-fixed-xl: var(--db-spacing-fixed-xl);
13+
14+
$db-spacing-responsive-xs: var(--db-spacing-responsive-xs);
15+
$db-spacing-responsive-sm: var(--db-spacing-responsive-sm);
16+
$db-spacing-responsive-md: var(--db-spacing-responsive-md);
17+
$db-spacing-responsive-lg: var(--db-spacing-responsive-lg);
18+
$db-spacing-responsive-xl: var(--db-spacing-responsive-xl);
19+
20+
$db-type-font-size-lg: var(--db-type-body-lg);
21+
$db-type-font-size-md: var(--db-type-body-md);
22+
$db-type-font-size-sm: var(--db-type-body-sm);

‎scss/db-ui-base.scss

+2-95
Original file line numberDiff line numberDiff line change
@@ -1,97 +1,4 @@
11
@import "variables";
2-
@import "font-faces";
3-
@import "typography-placeholder";
4-
@import "scaling-placeholder";
2+
@import "variables.global";
53
@import "color-placeholder";
6-
7-
:root {
8-
@extend %db-ui-normal;
9-
10-
font-family: $db-font-family-sans;
11-
12-
h1,
13-
h2,
14-
h3,
15-
h4,
16-
h5,
17-
h6 {
18-
font-family: $db-font-family-head;
19-
}
20-
}
21-
22-
$db-sizing-xs: var(--db-sizing-xs);
23-
$db-sizing-sm: var(--db-sizing-sm);
24-
$db-sizing-md: var(--db-sizing-md);
25-
$db-sizing-lg: var(--db-sizing-lg);
26-
27-
$db-spacing-fixed-3xs: var(--db-spacing-fixed-3xs);
28-
$db-spacing-fixed-2xs: var(--db-spacing-fixed-2xs);
29-
$db-spacing-fixed-xs: var(--db-spacing-fixed-xs);
30-
$db-spacing-fixed-sm: var(--db-spacing-fixed-sm);
31-
$db-spacing-fixed-md: var(--db-spacing-fixed-md);
32-
$db-spacing-fixed-lg: var(--db-spacing-fixed-lg);
33-
$db-spacing-fixed-xl: var(--db-spacing-fixed-xl);
34-
35-
$db-spacing-responsive-xs: var(--db-spacing-responsive-xs);
36-
$db-spacing-responsive-sm: var(--db-spacing-responsive-sm);
37-
$db-spacing-responsive-md: var(--db-spacing-responsive-md);
38-
$db-spacing-responsive-lg: var(--db-spacing-responsive-lg);
39-
$db-spacing-responsive-xl: var(--db-spacing-responsive-xl);
40-
41-
$db-type-font-size-lg: var(--db-type-body-lg);
42-
$db-type-font-size-md: var(--db-type-body-md);
43-
$db-type-font-size-sm: var(--db-type-body-sm);
44-
45-
@mixin styles($styles...) {
46-
@for $i from 0 to length($styles) {
47-
%db-ui-#{nth($styles, $i + 1)},
48-
.db-ui-#{nth($styles, $i + 1)} {
49-
@extend %db-scaling-#{nth($styles, $i + 1)};
50-
51-
[data-size="large"] {
52-
@extend %db-#{nth($styles, $i + 1)}-body-lg;
53-
}
54-
55-
body,
56-
button,
57-
input,
58-
optgroup,
59-
select,
60-
textarea,
61-
[data-size="medium"] {
62-
@extend %db-#{nth($styles, $i + 1)}-body-md;
63-
}
64-
65-
small,
66-
[data-size="small"] {
67-
@extend %db-#{nth($styles, $i + 1)}-body-sm;
68-
}
69-
70-
h1 {
71-
@extend %db-#{nth($styles, $i + 1)}-headline-xl;
72-
}
73-
74-
h2 {
75-
@extend %db-#{nth($styles, $i + 1)}-headline-lg;
76-
}
77-
78-
h3 {
79-
@extend %db-#{nth($styles, $i + 1)}-headline-md;
80-
}
81-
82-
h4 {
83-
@extend %db-#{nth($styles, $i + 1)}-headline-sm;
84-
}
85-
86-
h5 {
87-
@extend %db-#{nth($styles, $i + 1)}-headline-xs;
88-
}
89-
90-
h6 {
91-
@extend %db-#{nth($styles, $i + 1)}-headline-2xs;
92-
}
93-
}
94-
}
95-
}
96-
97-
@include styles("expressive", "normal", "functional");
4+
@import "typescale";

0 commit comments

Comments
 (0)