Skip to content

Commit 344f053

Browse files
nmergetnmerget
authored
fix: update from zeplin and fix naming issues (normal -> regular) (#173)
1 parent 2be1b3f commit 344f053

14 files changed

+300
-333
lines changed

‎scripts/scss-scaling-generator.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const generateSpacings = (utility) => {
1212
allClasses += `@use "scaling-placeholder" as *;\n`;
1313
}
1414

15-
const scaleTypeKey = ['normal', 'functional', 'expressive'];
15+
const scaleTypeKey = ['regular', 'functional', 'expressive'];
1616

1717
for (const scale of scaleTypeKey) {
1818
allClasses += `

‎scripts/scss-typography-generator.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,8 @@ ${utility ? '.' : '%'}${prefix}-${scale}-${textType}-${getShortSize(size)}{
6161

6262
if (isHeadline) {
6363
result += `
64+
font-weight: 700;
65+
6466
&-light,
6567
&[data-variant="light"] {
6668
font-weight: 300;
@@ -140,7 +142,7 @@ const generateClasses = (typography, utility) => {
140142
allClasses += `@use "variables" as *;\n@use "typography-placeholder" as *;\n`;
141143
}
142144

143-
// ScaleTypeKey = [normal, functional, expressive]
145+
// ScaleTypeKey = [regular, functional, expressive]
144146
for (const scaleTypeKey of Object.keys(typography)) {
145147
const scaleObject = typography[scaleTypeKey];
146148
const mediaQueryKeys = Object.keys(scaleObject);

‎scripts/tailwind-config-generator.mjs

+1
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ const run = async () => {
2020
theme: {
2121
screens: tokens.screens,
2222
spacing: tokens.spacing,
23+
boxShadow: tokens.elevation,
2324
gap: ({ theme }) => ({
2425
...theme('spacing')
2526
}),

‎scripts/zeplin-styleguide.js

+6-3
Original file line numberDiff line numberDiff line change
@@ -151,8 +151,10 @@ const convertTextStyles = (data) => {
151151
.replace('foundation-', '')
152152
.replace('typography-', '')
153153
.replace('token-', '')
154-
.replace('regular-', '')
155-
.replace('black-', '');
154+
.replace('black-', '')
155+
.replace('regular-center', 'center')
156+
.replace('regular-left', 'left')
157+
.replace('regular-right', 'right');
156158
newTextStyles[cKey] = { value: textStyle.value };
157159
}
158160

@@ -165,8 +167,9 @@ const convertSpacings = (data) => {
165167
);
166168
const spacings = {};
167169
const sizes = {};
168-
for (const key of keys) {
170+
for (let key of keys) {
169171
const spacing = data.spacing[key];
172+
key = key.replace('normal', 'regular');
170173
if (key?.includes('sizing')) {
171174
sizes[key.replace('sizing-', '')] = {
172175
value: `${spacing.value}`,

‎scss/_tonality.scss

+24-6
Original file line numberDiff line numberDiff line change
@@ -23,17 +23,35 @@
2323
@extend %db-scaling-#{nth($styles, $i + 1)};
2424

2525
*, // 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
26-
[data-size="medium"] {
26+
[data-size="medium"],
27+
%db-body-md {
2728
@extend %db-#{nth($styles, $i + 1)}-body-md;
2829
}
2930

30-
[data-size="large"] {
31+
small,
32+
[data-size="small"],
33+
%db-body-sm {
34+
@extend %db-#{nth($styles, $i + 1)}-body-sm;
35+
}
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;
43+
}
44+
45+
%db-body-lg {
3146
@extend %db-#{nth($styles, $i + 1)}-body-lg;
3247
}
3348

34-
small,
35-
[data-size="small"] {
36-
@extend %db-#{nth($styles, $i + 1)}-body-sm;
49+
%db-body-xs {
50+
@extend %db-#{nth($styles, $i + 1)}-body-xs;
51+
}
52+
53+
%db-body-2xs {
54+
@extend %db-#{nth($styles, $i + 1)}-body-2xs;
3755
}
3856

3957
h1 {
@@ -63,4 +81,4 @@
6381
}
6482
}
6583

66-
@include styles("expressive", "normal", "functional");
84+
@include styles("expressive", "regular", "functional");

‎scss/_variables.global.scss

-16
Original file line numberDiff line numberDiff line change
@@ -16,19 +16,3 @@ $db-spacing-responsive-sm: var(--db-spacing-responsive-sm);
1616
$db-spacing-responsive-md: var(--db-spacing-responsive-md);
1717
$db-spacing-responsive-lg: var(--db-spacing-responsive-lg);
1818
$db-spacing-responsive-xl: var(--db-spacing-responsive-xl);
19-
20-
$db-type-font-size-2xl: var(--db-type-body-font-size-2xl);
21-
$db-type-font-size-xl: var(--db-type-body-font-size-xl);
22-
$db-type-font-size-lg: var(--db-type-body-font-size-lg);
23-
$db-type-font-size-md: var(--db-type-body-font-size-md);
24-
$db-type-font-size-sm: var(--db-type-body-font-size-sm);
25-
$db-type-font-size-xs: var(--db-type-body-font-size-xs);
26-
$db-type-font-size-2xs: var(--db-type-body-font-size-2xs);
27-
28-
$db-type-line-height-2xl: var(--db-type-body-line-height-2xl);
29-
$db-type-line-height-xl: var(--db-type-body-line-height-xl);
30-
$db-type-line-height-lg: var(--db-type-body-line-height-lg);
31-
$db-type-line-height-md: var(--db-type-body-line-height-md);
32-
$db-type-line-height-sm: var(--db-type-body-line-height-sm);
33-
$db-type-line-height-xs: var(--db-type-body-line-height-xs);
34-
$db-type-line-height-2xs: var(--db-type-body-line-height-2xs);

‎scss/db-ui-base.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,5 @@
77
@use "init" as *;
88

99
:root {
10-
@extend %db-ui-normal;
10+
@extend %db-ui-regular;
1111
}

‎source/_patterns/sizings/examples.hbs

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
</h3>
99

1010
<div style="display: flex; flex-wrap: wrap; gap: 8px">
11-
{{spacing-examples @root "sizings" "Normal" "normal"}}
11+
{{spacing-examples @root "sizings" "Regular" "regular"}}
1212
</div>
1313

1414

@@ -32,7 +32,7 @@
3232

3333
<db-tab label="Normal" name="tab-bar">
3434
<div style="display: flex; flex-wrap: wrap; gap: 8px">
35-
{{spacing-examples @root "sizings" "Normal" "normal"}}
35+
{{spacing-examples @root "sizings" "Regular" "regular"}}
3636
</div>
3737
</db-tab>
3838

‎source/_patterns/spacings/examples.hbs

+10-10
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,14 @@
44
<db-tab-bar>
55
<db-tab label="All" name="tab-bar" active>
66
<h3>
7-
Tables of all "normal" styles
7+
Tables of all "Regular" styles
88
</h3>
99

1010
<div style="display: flex; flex-wrap: wrap; gap: 8px">
11-
{{spacing-examples @root "spacings" "Normal Desktop" "responsive-normal-desktop"}}
12-
{{spacing-examples @root "spacings" "Normal Tablet" "responsive-normal-tablet"}}
13-
{{spacing-examples @root "spacings" "Normal Mobile" "responsive-normal-mobile"}}
14-
{{spacing-examples @root "spacings" "Normal Fixed" "fixed-normal"}}
11+
{{spacing-examples @root "spacings" "Regular Desktop" "responsive-regular-desktop"}}
12+
{{spacing-examples @root "spacings" "Regular Tablet" "responsive-regular-tablet"}}
13+
{{spacing-examples @root "spacings" "Regular Mobile" "responsive-regular-mobile"}}
14+
{{spacing-examples @root "spacings" "Regular Fixed" "fixed-regular"}}
1515
</div>
1616

1717

@@ -39,12 +39,12 @@
3939
</div>
4040
</db-tab>
4141

42-
<db-tab label="Normal" name="tab-bar">
42+
<db-tab label="Regular" name="tab-bar">
4343
<div style="display: flex; flex-wrap: wrap; gap: 8px">
44-
{{spacing-examples @root "spacings" "Normal Desktop" "responsive-normal-desktop"}}
45-
{{spacing-examples @root "spacings" "Normal Tablet" "responsive-normal-tablet"}}
46-
{{spacing-examples @root "spacings" "Normal Mobile" "responsive-normal-mobile"}}
47-
{{spacing-examples @root "spacings" "Normal Fixed" "fixed-normal"}}
44+
{{spacing-examples @root "spacings" "Regular Desktop" "responsive-regular-desktop"}}
45+
{{spacing-examples @root "spacings" "Regular Tablet" "responsive-regular-tablet"}}
46+
{{spacing-examples @root "spacings" "Regular Mobile" "responsive-regular-mobile"}}
47+
{{spacing-examples @root "spacings" "Regular Fixed" "fixed-regular"}}
4848
</div>
4949
</db-tab>
5050

‎source/_patterns/spacings/intro.hbs

+8-8
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@
1111
</h3>
1212

1313
<div style="display: flex; flex-direction: column; gap: 8px">
14-
{{spacing-into-table @root "spacings" "Normal Desktop" "responsive-normal-desktop"}}
15-
{{spacing-into-table @root "spacings" "Normal Tablet" "responsive-normal-tablet"}}
16-
{{spacing-into-table @root "spacings" "Normal Mobile" "responsive-normal-mobile"}}
17-
{{spacing-into-table @root "spacings" "Normal Fixed" "fixed-normal"}}
14+
{{spacing-into-table @root "spacings" "Normal Desktop" "responsive-regular-desktop"}}
15+
{{spacing-into-table @root "spacings" "Normal Tablet" "responsive-regular-tablet"}}
16+
{{spacing-into-table @root "spacings" "Normal Mobile" "responsive-regular-mobile"}}
17+
{{spacing-into-table @root "spacings" "Normal Fixed" "fixed-regular"}}
1818
</div>
1919

2020

@@ -43,10 +43,10 @@
4343
</db-tab>
4444
<db-tab label="Normal" name="tab-bar">
4545
<div style="display: flex; flex-wrap: wrap; gap: 8px">
46-
{{spacing-into-table @root "spacings" "Normal Desktop" "responsive-normal-desktop"}}
47-
{{spacing-into-table @root "spacings" "Normal Tablet" "responsive-normal-tablet"}}
48-
{{spacing-into-table @root "spacings" "Normal Mobile" "responsive-normal-mobile"}}
49-
{{spacing-into-table @root "spacings" "Normal Fixed" "fixed-normal"}}
46+
{{spacing-into-table @root "spacings" "Normal Desktop" "responsive-regular-desktop"}}
47+
{{spacing-into-table @root "spacings" "Normal Tablet" "responsive-regular-tablet"}}
48+
{{spacing-into-table @root "spacings" "Normal Mobile" "responsive-regular-mobile"}}
49+
{{spacing-into-table @root "spacings" "Normal Fixed" "fixed-regular"}}
5050
</div>
5151
</db-tab>
5252
<db-tab label="Functional" name="tab-bar">

‎source/_patterns/typography/usage.hbs

+2-2
Original file line numberDiff line numberDiff line change
@@ -48,9 +48,9 @@ body {
4848
@import "@db-ui-base/scss/typography-classes";
4949
</code>
5050
</pre>
51-
<strong>Example html (class='db-normal-body-xs'):</strong>
51+
<strong>Example html (class='db-regular-body-xs'):</strong>
5252
<p>Default: <strong>14px</strong></p>
53-
<p class='db-normal-body-xs'>SM: <strong>12px</strong></p>
53+
<p class='db-regular-body-xs'>SM: <strong>12px</strong></p>
5454

5555
</db-tab>
5656
<db-tab label="Tailwind" name="tab-bar">

‎source/css/documentation.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,11 @@ textarea {
2323
@import "../_patterns/elevation/examples.demonstration";
2424

2525
main {
26-
padding: $db-spacing-fixed-normal-xs $db-spacing-fixed-normal-l;
26+
padding: $db-spacing-fixed-regular-xs $db-spacing-fixed-regular-l;
2727
}
2828

2929
.typography-table {
3030
tr > td {
31-
padding: $db-spacing-fixed-normal-2xs $db-spacing-fixed-normal-xs;
31+
padding: $db-spacing-fixed-regular-2xs $db-spacing-fixed-regular-xs;
3232
}
3333
}

‎style-dictionary.js

-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ const generateScaling = require('./scripts/scss-scaling-generator');
1313
const modifyTailwind = (dictionary) => {
1414
for (const token of [
1515
'colors',
16-
'elevation',
1716
'font',
1817
'transition',
1918
'sizing',

0 commit comments

Comments
 (0)