Skip to content

Commit

Permalink
feat!: rename typography variables
Browse files Browse the repository at this point in the history
  • Loading branch information
@amje
amje committed Jun 27, 2023
1 parent 162a118 commit 02e7772
Show file tree
Hide file tree
Showing 11 changed files with 155 additions and 142 deletions.
2 changes: 1 addition & 1 deletion src/components/ControlLabel/ControlLabel.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ $block: '.#{variables.$ns}control-label';

#{$block} {
display: inline-flex;
font-family: var(--yc-text-body-font-family);
font-family: var(--g-font-family-sans);
font-weight: normal;
color: var(--yc-color-text-primary);
user-select: none;
Expand Down
2 changes: 1 addition & 1 deletion src/components/Hotkey/Hotkey.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ $block: '.#{variables.$ns}hotkey';
&,
kbd {
@include mixins.text-body-1();
font-family: var(--yc-text-body-font-family);
font-family: var(--g-font-family-sans);
}

&_view {
Expand Down
8 changes: 4 additions & 4 deletions src/components/PromoSheet/PromoSheet.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@ $block: '.#{variables.$ns}promo-sheet';
&__title {
margin: 0;

font-size: var(--yc-text-header-1-font-size);
line-height: var(--yc-text-header-1-line-height);
font-size: var(--g-text-header-1-font-size);
line-height: var(--g-text-header-1-line-height);
}

&__close-button {
Expand All @@ -36,8 +36,8 @@ $block: '.#{variables.$ns}promo-sheet';
&__message {
margin: 0 0 var(--yc-promo-sheet-message-margin);

font-size: var(--yc-text-body-3-font-size);
line-height: var(--yc-text-body-3-line-height);
font-size: var(--g-text-body-3-font-size);
line-height: var(--g-text-body-3-line-height);
}

&__image-container {
Expand Down
2 changes: 1 addition & 1 deletion src/components/RadioButton/RadioButton.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ $block: '.#{variables.$ns}radio-button';
box-sizing: border-box;
display: inline-flex;
flex-direction: row;
font-family: var(--yc-text-body-font-family);
font-family: var(--g-font-family-sans);
font-weight: normal;
border-radius: var(--yc-radio-button-border-radius);
background-color: var(--yc-color-base-generic);
Expand Down
2 changes: 1 addition & 1 deletion src/components/Sheet/Sheet.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ $block: '.#{variables.$ns}sheet';

&__sheet-content-title {
padding-bottom: 8px;
font-size: var(--yc-text-body-2-font-size);
font-size: var(--g-text-body-2-font-size);
line-height: 28px;
text-align: center;
overflow: hidden;
Expand Down
2 changes: 1 addition & 1 deletion src/components/TextInput/TextInput.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ $block: '.#{variables.$ns}text-input';
padding: 0;
width: 100%;
font-weight: normal;
font-family: var(--yc-text-body-font-family);
font-family: var(--g-font-family-sans);
color: var(--yc-color-text-primary);
background-color: transparent;
border: none;
Expand Down
2 changes: 1 addition & 1 deletion src/demo/Typography/Typography.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@
&__item_name {
// font-families
&_monospace #{$block}__value {
font-family: var(--yc-font-family-monospace);
font-family: var(--g-font-family-monospace);
}
}

Expand Down
2 changes: 1 addition & 1 deletion src/demo/Typography/Typography.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export const Typography = () => (
return (
<ReactCopyToClipboard
key={`family-${name}`}
text={`font-family: var(--yc-font-family-${name});`}
text={`font-family: var(--g-font-family-${name});`}
>
<div className={b('item', {name})}>
<div className={b('caption')}>{name}</div>
Expand Down
2 changes: 1 addition & 1 deletion src/demo/colors/ColorPanel.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@

&__bg-switcher {
letter-spacing: 1px;
font-family: var(--yc-font-family-monospace);
font-family: var(--g-font-family-monospace);
color: var(--yc-color-text-hint);
position: absolute;
top: 15px;
Expand Down
142 changes: 71 additions & 71 deletions styles/mixins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
margin: 0;
padding: 0;

font-family: var(--yc-text-body-font-family);
font-family: var(--g-font-family-sans);
font-size: inherit;
font-weight: 400;

Expand Down Expand Up @@ -141,139 +141,139 @@
// Typography

@mixin text-body-1() {
font-size: var(--yc-text-body-1-font-size);
line-height: var(--yc-text-body-1-line-height);
font-weight: var(--yc-text-body-font-weight);
font-size: var(--g-text-body-1-font-size);
line-height: var(--g-text-body-1-line-height);
font-weight: var(--g-text-body-font-weight);
}

@mixin text-body-2() {
font-size: var(--yc-text-body-2-font-size);
line-height: var(--yc-text-body-2-line-height);
font-weight: var(--yc-text-body-font-weight);
font-size: var(--g-text-body-2-font-size);
line-height: var(--g-text-body-2-line-height);
font-weight: var(--g-text-body-font-weight);
}

@mixin text-body-3() {
font-size: var(--yc-text-body-3-font-size);
line-height: var(--yc-text-body-3-line-height);
font-weight: var(--yc-text-body-font-weight);
font-size: var(--g-text-body-3-font-size);
line-height: var(--g-text-body-3-line-height);
font-weight: var(--g-text-body-font-weight);
}

@mixin text-body-short() {
font-size: var(--yc-text-body-short-font-size);
line-height: var(--yc-text-body-short-line-height);
font-weight: var(--yc-text-body-font-weight);
font-size: var(--g-text-body-short-font-size);
line-height: var(--g-text-body-short-line-height);
font-weight: var(--g-text-body-font-weight);
}

@mixin text-caption-1() {
font-size: var(--yc-text-caption-1-font-size);
line-height: var(--yc-text-caption-1-line-height);
font-weight: var(--yc-text-caption-font-weight);
font-size: var(--g-text-caption-1-font-size);
line-height: var(--g-text-caption-1-line-height);
font-weight: var(--g-text-caption-font-weight);
}

@mixin text-caption-2() {
font-size: var(--yc-text-caption-2-font-size);
line-height: var(--yc-text-caption-2-line-height);
font-weight: var(--yc-text-caption-font-weight);
font-size: var(--g-text-caption-2-font-size);
line-height: var(--g-text-caption-2-line-height);
font-weight: var(--g-text-caption-font-weight);
}

@mixin text-header-1() {
font-size: var(--yc-text-header-1-font-size);
line-height: var(--yc-text-header-1-line-height);
font-weight: var(--yc-text-header-font-weight);
font-size: var(--g-text-header-1-font-size);
line-height: var(--g-text-header-1-line-height);
font-weight: var(--g-text-header-font-weight);
}

@mixin text-header-2() {
font-size: var(--yc-text-header-2-font-size);
line-height: var(--yc-text-header-2-line-height);
font-weight: var(--yc-text-header-font-weight);
font-size: var(--g-text-header-2-font-size);
line-height: var(--g-text-header-2-line-height);
font-weight: var(--g-text-header-font-weight);
}

@mixin text-subheader-1() {
font-size: var(--yc-text-subheader-1-font-size);
line-height: var(--yc-text-subheader-1-line-height);
font-weight: var(--yc-text-subheader-font-weight);
font-size: var(--g-text-subheader-1-font-size);
line-height: var(--g-text-subheader-1-line-height);
font-weight: var(--g-text-subheader-font-weight);
}

@mixin text-subheader-2() {
font-size: var(--yc-text-subheader-2-font-size);
line-height: var(--yc-text-subheader-2-line-height);
font-weight: var(--yc-text-subheader-font-weight);
font-size: var(--g-text-subheader-2-font-size);
line-height: var(--g-text-subheader-2-line-height);
font-weight: var(--g-text-subheader-font-weight);
}

@mixin text-subheader-3() {
font-size: var(--yc-text-subheader-3-font-size);
line-height: var(--yc-text-subheader-3-line-height);
font-weight: var(--yc-text-subheader-font-weight);
font-size: var(--g-text-subheader-3-font-size);
line-height: var(--g-text-subheader-3-line-height);
font-weight: var(--g-text-subheader-font-weight);
}

@mixin text-display-1() {
font-size: var(--yc-text-display-1-font-size);
line-height: var(--yc-text-display-1-line-height);
font-weight: var(--yc-text-display-font-weight);
font-size: var(--g-text-display-1-font-size);
line-height: var(--g-text-display-1-line-height);
font-weight: var(--g-text-display-font-weight);
}

@mixin text-display-2() {
font-size: var(--yc-text-display-2-font-size);
line-height: var(--yc-text-display-2-line-height);
font-weight: var(--yc-text-display-font-weight);
font-size: var(--g-text-display-2-font-size);
line-height: var(--g-text-display-2-line-height);
font-weight: var(--g-text-display-font-weight);
}

@mixin text-display-3() {
font-size: var(--yc-text-display-3-font-size);
line-height: var(--yc-text-display-3-line-height);
font-weight: var(--yc-text-display-font-weight);
font-size: var(--g-text-display-3-font-size);
line-height: var(--g-text-display-3-line-height);
font-weight: var(--g-text-display-font-weight);
}

@mixin text-display-4() {
font-size: var(--yc-text-display-4-font-size);
line-height: var(--yc-text-display-4-line-height);
font-weight: var(--yc-text-display-font-weight);
font-size: var(--g-text-display-4-font-size);
line-height: var(--g-text-display-4-line-height);
font-weight: var(--g-text-display-font-weight);
}

@mixin text-code-1() {
font-family: var(--yc-text-code-font-family);
font-size: var(--yc-text-code-1-font-size);
line-height: var(--yc-text-code-1-line-height);
font-weight: var(--yc-text-code-font-weight);
font-family: var(--g-font-family-monospace);
font-size: var(--g-text-code-1-font-size);
line-height: var(--g-text-code-1-line-height);
font-weight: var(--g-text-code-font-weight);
}

@mixin text-code-2() {
font-family: var(--yc-text-code-font-family);
font-size: var(--yc-text-code-2-font-size);
line-height: var(--yc-text-code-2-line-height);
font-weight: var(--yc-text-code-font-weight);
font-family: var(--g-font-family-monospace);
font-size: var(--g-text-code-2-font-size);
line-height: var(--g-text-code-2-line-height);
font-weight: var(--g-text-code-font-weight);
}

@mixin text-code-3() {
font-family: var(--yc-text-code-font-family);
font-size: var(--yc-text-code-3-font-size);
line-height: var(--yc-text-code-3-line-height);
font-weight: var(--yc-text-code-font-weight);
font-family: var(--g-font-family-monospace);
font-size: var(--g-text-code-3-font-size);
line-height: var(--g-text-code-3-line-height);
font-weight: var(--g-text-code-font-weight);
}

@mixin text-code-inline-1() {
font-family: var(--yc-text-code-font-family);
font-size: var(--yc-text-code-inline-1-font-size);
line-height: var(--yc-text-code-inline-1-line-height);
font-weight: var(--yc-text-code-font-weight);
font-family: var(--g-font-family-monospace);
font-size: var(--g-text-code-inline-1-font-size);
line-height: var(--g-text-code-inline-1-line-height);
font-weight: var(--g-text-code-font-weight);
}

@mixin text-code-inline-2() {
font-family: var(--yc-text-code-font-family);
font-size: var(--yc-text-code-inline-2-font-size);
line-height: var(--yc-text-code-inline-2-line-height);
font-weight: var(--yc-text-code-inline-font-weight);
font-family: var(--g-font-family-monospace);
font-size: var(--g-text-code-inline-2-font-size);
line-height: var(--g-text-code-inline-2-line-height);
font-weight: var(--g-text-code-font-weight);
}

@mixin text-code-inline-3() {
font-family: var(--yc-text-code-font-family);
font-size: var(--yc-text-code-inline-3-font-size);
line-height: var(--yc-text-code-inline-3-line-height);
font-weight: var(--yc-text-code-font-weight);
font-family: var(--g-font-family-monospace);
font-size: var(--g-text-code-inline-3-font-size);
line-height: var(--g-text-code-inline-3-line-height);
font-weight: var(--g-text-code-font-weight);
}

@mixin text-accent() {
font-weight: var(--yc-text-accent-font-weight);
font-weight: var(--g-text-accent-font-weight);
}

@mixin loading($loading-color-1: rgba(255, 255, 255, 0.3), $loading-color-2: transparent) {
Expand Down
Loading

0 comments on commit 02e7772

Please sign in to comment.