Skip to content

Commit aaa60fd

Browse files
amjeamje
committed
feat!: more granular font weight vars
1 parent e448773 commit aaa60fd

12 files changed

Lines changed: 115 additions & 90 deletions

File tree

‎src/components/Avatar/Avatar.scss‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ $block: '.#{variables.$ns}avatar';
1111
--_--border-color: currentColor;
1212
--_--background-color: var(--g-color-base-misc-light);
1313
--_--text-color: var(--g-color-text-misc);
14-
--_--font-weight: var(--g-text-body-font-weight);
14+
--_--font-weight: var(--g-text-body-1-font-weight);
1515
--_--font-size: var(--g-text-body-1-font-size);
1616
--_--line-height: var(--g-text-body-1-line-height);
1717

@@ -90,26 +90,26 @@ $block: '.#{variables.$ns}avatar';
9090
&_3xs,
9191
&_2xs,
9292
&_xs {
93-
--_--font-weight: var(--g-text-caption-font-weight);
93+
--_--font-weight: var(--g-text-caption-1-font-weight);
9494
--_--font-size: var(--g-text-caption-1-font-size);
9595
--_--line-height: var(--g-text-caption-1-line-height);
9696
}
9797

9898
&_s {
99-
--_--font-weight: var(--g-text-caption-font-weight);
99+
--_--font-weight: var(--g-text-caption-2-font-weight);
100100
--_--font-size: var(--g-text-caption-2-font-size);
101101
--_--line-height: var(--g-text-caption-2-line-height);
102102
}
103103

104104
&_m,
105105
&_l {
106-
--_--font-weight: var(--g-text-subheader-font-weight);
106+
--_--font-weight: var(--g-text-subheader-1-font-weight);
107107
--_--font-size: var(--g-text-subheader-1-font-size);
108108
--_--line-height: var(--g-text-subheader-1-line-height);
109109
}
110110

111111
&_xl {
112-
--_--font-weight: var(--g-text-subheader-font-weight);
112+
--_--font-weight: var(--g-text-subheader-2-font-weight);
113113
--_--font-size: var(--g-text-subheader-2-font-size);
114114
--_--line-height: var(--g-text-subheader-2-line-height);
115115
}

‎src/components/ControlLabel/ControlLabel.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ $block: '.#{variables.$ns}control-label';
55
#{$block} {
66
display: inline-flex;
77
font-family: var(--g-text-body-font-family);
8-
font-weight: var(--g-text-body-font-weight);
98
color: var(--g-color-text-primary);
109
user-select: none;
1110
touch-action: manipulation;
@@ -20,16 +19,19 @@ $block: '.#{variables.$ns}control-label';
2019
&_size_s,
2120
&_size_m {
2221
font-size: var(--g-text-body-1-font-size);
22+
font-weight: var(--g-text-body-1-font-weight);
2323
line-height: 15px;
2424
}
2525

2626
&_size_l {
2727
font-size: var(--g-text-body-2-font-size);
28+
font-weight: var(--g-text-body-2-font-weight);
2829
line-height: 18px;
2930
}
3031

3132
&_size_xl {
3233
font-size: var(--g-text-body-2-font-size);
34+
font-weight: var(--g-text-body-2-font-weight);
3335
line-height: 25px;
3436
}
3537

‎src/components/Progress/Progress.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ $progress-xs-height: 4px;
99

1010
@mixin progress-text {
1111
font-size: var(--g-text-body-short-font-size);
12-
font-weight: var(--g-text-body-font-weight);
12+
font-weight: var(--g-text-body-short-font-weight);
1313
font-family: var(--g-text-body-font-family);
1414
padding: 0 10px;
1515
box-sizing: border-box;

‎src/components/SegmentedRadioGroup/SegmentedRadioGroup.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ $block: '.#{variables.$ns}segmented-radio-group';
1010
display: inline-flex;
1111
flex-direction: row;
1212
font-family: var(--g-text-body-font-family);
13-
font-weight: var(--g-text-body-font-weight);
13+
font-weight: var(--g-text-body-1-font-weight);
1414
position: relative;
1515

1616
&__option {
@@ -215,6 +215,7 @@ $block: '.#{variables.$ns}segmented-radio-group';
215215
height: 44px;
216216
line-height: 44px;
217217
font-size: var(--g-text-body-2-font-size);
218+
font-weight: var(--g-text-body-2-font-weight);
218219

219220
&-text {
220221
margin: 0 25px;

‎src/components/User/User.scss‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@ $block: '.#{variables.$ns}user';
55

66
#{$block} {
77
--_--avatar-offset: var(--g-spacing-2);
8-
--_--name-font-weight: var(--g-text-body-font-weight);
8+
--_--name-font-weight: var(--g-text-body-short-font-weight);
99
--_--name-font-size: var(--g-text-body-short-font-size);
1010
--_--name-line-height: var(--g-text-body-short-line-height);
11-
--_--description-font-weight: var(--g-text-body-font-weight);
11+
--_--description-font-weight: var(--g-text-body-short-font-weight);
1212
--_--description-font-size: var(--g-text-body-short-font-size);
1313
--_--description-line-height: var(--g-text-body-short-line-height);
1414

@@ -39,11 +39,13 @@ $block: '.#{variables.$ns}user';
3939
&_s,
4040
&_m,
4141
&_l {
42+
--_--name-font-weight: var(--g-text-body-short-font-weight);
4243
--_--name-font-size: var(--g-text-body-short-font-size);
4344
--_--name-line-height: var(--g-text-body-short-line-height);
4445
}
4546

4647
&_xl {
48+
--_--name-font-weight: var(--g-text-body-2-font-weight);
4749
--_--name-font-size: var(--g-text-body-2-font-size);
4850
--_--name-line-height: var(--g-text-body-2-line-height);
4951
}

‎src/components/UserLabel/UserLabel.scss‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,10 @@ $block: '.#{variables.$ns}user-label';
1313
--_--border-radius: 25px;
1414
--_--padding: var(--g-spacing-3);
1515
--_--gap: calc(var(--g-spacing-base) * 1.5);
16-
--_--text-font-weight: var(--g-text-body-font-weight);
16+
--_--text-font-weight: var(--g-text-body-short-font-weight);
1717
--_--text-font-size: var(--g-text-body-short-font-size);
1818
--_--text-line-height: var(--g-text-body-short-line-height);
19-
--_--description-font-weight: var(--g-text-body-font-weight);
19+
--_--description-font-weight: var(--g-text-body-short-font-weight);
2020
--_--description-font-size: var(--g-text-body-short-font-size);
2121
--_--description-line-height: var(--g-text-body-short-line-height);
2222

@@ -87,21 +87,21 @@ $block: '.#{variables.$ns}user-label';
8787
&_3xs,
8888
&_2xs,
8989
&_xs {
90-
--_--text-font-weight: var(--g-text-caption-font-weight);
90+
--_--text-font-weight: var(--g-text-caption-2-font-weight);
9191
--_--text-font-size: var(--g-text-caption-2-font-size);
9292
--_--text-line-height: var(--g-text-caption-2-line-height);
9393
}
9494

9595
&_s,
9696
&_m,
9797
&_l {
98-
--_--text-font-weight: var(--g-text-body-font-weight);
98+
--_--text-font-weight: var(--g-text-body-short-font-weight);
9999
--_--text-font-size: var(--g-text-body-short-font-size);
100100
--_--text-line-height: var(--g-text-body-short-line-height);
101101
}
102102

103103
&_xl {
104-
--_--text-font-weight: var(--g-text-body-font-weight);
104+
--_--text-font-weight: var(--g-text-body-2-font-weight);
105105
--_--text-font-size: var(--g-text-body-2-font-size);
106106
--_--text-line-height: var(--g-text-body-2-line-height);
107107
}

‎src/components/controls/TextArea/TextArea.scss‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,8 +54,6 @@ $block: '.#{variables.$ns}text-area';
5454
margin: 0;
5555
padding: 0;
5656
width: 100%;
57-
font-weight: var(--g-text-body-font-weight);
58-
font-family: var(--g-text-body-font-family);
5957
color: inherit;
6058
background-color: transparent;
6159
border: none;

‎src/components/controls/TextInput/TextInput.scss‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -85,8 +85,6 @@ $block: '.#{variables.$ns}text-input';
8585
margin: 0;
8686
padding: 0;
8787
width: 100%;
88-
font-weight: var(--g-text-body-font-weight);
89-
font-family: var(--g-text-body-font-family);
9088
color: inherit;
9189
background-color: transparent;
9290
border: none;

‎src/components/lab/Menu/MenuItem.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ $b: '.#{variables.$ns}lab-menu-item';
1111
--_--submenu-icon-shift: 0;
1212

1313
display: flex;
14-
align-items: center;
14+
align-items: flex-start;
1515
padding: var(--_--padding-block) var(--_--padding-inline);
1616

1717
&::before,

‎src/stories/Branding/Overview.mdx‎

Lines changed: 27 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {Meta} from '@storybook/addon-docs';
22

3-
<Meta title="Branding/Overview"/>
3+
<Meta title="Branding/Overview" />
44

55
# Branding
66

@@ -13,6 +13,7 @@ you should provide values for each theme individually.
1313
## Basic customization
1414

1515
#### Typography
16+
1617
There are 2 font families, `sans-serif` and `monospace`, which can be configured via `--g-font-family-sans`
1718
and `--g-font-family-monospace`. Also, there are a lot of different text variants: `body-1` `body-2` `caption-1`
1819
`caption-2` `header-1` `header-2` and others. Full list of variants you can find [here](?path=/story/typography--default).
@@ -21,36 +22,43 @@ Each of these variants has a specific `font-size` and `line-height` properties w
2122
for each of the variant group (`body` `header` `subheader` `display` `caption` `code`) via `--g-text-{variantGroupName}-font-weight` variable.
2223
There is one specific variable, `--g-text-accent-font-weight`, which can be used separately from text variant.
2324

24-
2525
#### Accent
26+
2627
To give a unique look for components you can provide several variables that controls accent color. Here is the
2728
list of such variables:
28-
* `--g-color-base-brand` - Color for background (action button, active controls)
29-
* `--g-color-base-brand-hover` - Hover color for background
30-
* `--g-color-line-brand` - Color for lines (active tab underline)
31-
* `--g-color-text-brand` - Text color
32-
* `--g-color-text-brand-heavy` - Text color over background
33-
* `--g-color-text-brand-contrast` - Text color over brand background
34-
* `--g-color-base-selection` - Lighter version for background (List selection, Table row selection)
35-
* `--g-color-base-selection-hover` - Hover lighter version for background
36-
* `--g-color-text-link` - Color for links
37-
* `--g-color-text-link-hover` - Hover color for links
38-
* `--g-color-text-link-visited` - Color for visited links
39-
* `--g-color-text-link-visited-hover` - Hover color for visited links
29+
30+
- `--g-color-base-brand` - Color for background (action button, active controls)
31+
- `--g-color-base-brand-hover` - Hover color for background
32+
- `--g-color-line-brand` - Color for lines (active tab underline)
33+
- `--g-color-text-brand` - Text color
34+
- `--g-color-text-brand-heavy` - Text color over background
35+
- `--g-color-text-brand-contrast` - Text color over brand background
36+
- `--g-color-base-selection` - Lighter version for background (List selection, Table row selection)
37+
- `--g-color-base-selection-hover` - Hover lighter version for background
38+
- `--g-color-text-link` - Color for links
39+
- `--g-color-text-link-hover` - Hover color for links
40+
- `--g-color-text-link-visited` - Color for visited links
41+
- `--g-color-text-link-visited-hover` - Hover color for visited links
4042

4143
#### Shape
44+
4245
Controls share border radius sizes that can be configured via `--g-border-radius-{size}`, where size is one of xs, s, m, l or xl
4346

4447
### Example
4548

4649
```css
47-
4850
.g-root {
4951
--g-font-family-sans: 'Inter', sans-serif;
5052

51-
--g-text-header-font-weight: 600;
52-
--g-text-subheader-font-weight: 600;
53-
--g-text-display-font-weight: 600;
53+
--g-text-header-1-font-weight: 600;
54+
--g-text-header-2-font-weight: 600;
55+
--g-text-subheader-1-font-weight: 600;
56+
--g-text-subheader-2-font-weight: 600;
57+
--g-text-subheader-3-font-weight: 600;
58+
--g-text-display-1-font-weight: 600;
59+
--g-text-display-2-font-weight: 600;
60+
--g-text-display-3-font-weight: 600;
61+
--g-text-display-4-font-weight: 600;
5462
--g-text-accent-font-weight: 600;
5563

5664
--g-color-base-brand: rgb(117, 155, 255);
@@ -59,7 +67,7 @@ Controls share border radius sizes that can be configured via `--g-border-radius
5967
--g-color-base-selection-hover: rgba(82, 130, 255, 0.1);
6068
--g-color-line-brand: rgb(117, 155, 255);
6169
--g-color-text-brand: rgb(117, 155, 255);
62-
--g-color-text-brand-contrast: rgb(255, 255 ,255);
70+
--g-color-text-brand-contrast: rgb(255, 255, 255);
6371
--g-color-text-link: rgb(117, 155, 255);
6472
--g-color-text-link-hover: rgb(82, 130, 255);
6573
}

0 commit comments

Comments
 (0)