Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-31 00:51:19 -05:00
Code Issues Activity

♻️ Connect line-heigh values to variables and set scale

Browse source 
Signed-off-by: Ondřej Konečný <ondrej.konecny@gmail.com>
This commit is contained in:
Ondřej Konečný 2023-02-24 14:26:44 +01:00 • committed by Andrey Antukh
parent 582ec187f8
commit d337dbfa5d
18 changed files with 52 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
frontend/resources/styles/common/base.scss
View file

@ -70,19 +70,19 @@ button {
p {
font-size: $fs12;
margin-bottom: 1rem;
line-height: $base-lh-sm;
line-height: $lh-133;
@include bp(baby-bear) {
font-size: $fs16;
line-height: $base-lh;
line-height: $lh-143;
}
}
li {
line-height: $base-lh-sm;
line-height: $lh-133;
@include bp(baby-bear) {
line-height: $base-lh;
line-height: $lh-143;
}
}
@ -101,32 +101,32 @@ strong {
h1 {
font-size: $fs34;
font-weight: $fw500;
line-height: $title-lh-sm;
line-height: $lh-115;
@include bp(baby-bear) {
font-size: $fs38;
line-height: $title-lh;
line-height: $lh-125;
}
&.supertitle {
font-size: $fs44;
font-weight: $fw300;
line-height: $title-lh-sm;
line-height: $lh-115;
@include bp(baby-bear) {
font-size: $fs44;
line-height: $title-lh;
line-height: $lh-125;
}
}
}
h2 {
font-size: $fs24;
font-weight: $fw300;
line-height: $title-lh-sm;
line-height: $lh-115;
@include bp(baby-bear) {
font-size: $fs32;
line-height: $title-lh;
line-height: $lh-125;
}
}

20
frontend/resources/styles/common/dependencies/fonts.scss
View file

@ -46,10 +46,22 @@ $fw800: 800; // Extra Bold
$fw900: 900; // Black
// Line height
$base-lh: 1.43;
$base-lh-sm: 1.33;
$title-lh: 1.25;
$title-lh-sm: 1.15;
// Value are predefined as unitless (ratio to font size in %), because that is the best approach for browsers according to https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#values
$lh-normal: normal; // line-height depends of font-family, font-size, your browser, maybe your OS http://meyerweb.com/eric/thoughts/2008/05/06/line-height-abnormal/
$lh-088: 0.88;
$lh-100: 1;
$lh-115: 1.15; // original $title-lh-sm
$lh-125: 1.25; // original $title-lh
$lh-128: 1.28;
$lh-133: 1.33; // original $base-lh-sm
$lh-143: 1.43; // original $base-lh
$lh-145: 1.45;
$lh-150: 1.5;
$lh-188: 1.88;
$lh-192: 1.92;
$lh-200: 2;
$lh-236: 2.36;
$lh-500: 5;
// Work Sans
@include font-face("worksans", "WorkSans-Thin", "100");

4
frontend/resources/styles/common/dependencies/reset.scss
View file

@ -97,7 +97,7 @@ video {
border: 0;
font: inherit;
font-size: 100%;
line-height: $base-lh;
line-height: $lh-143;
margin: 0;
padding: 0;
text-decoration: none;
@ -118,7 +118,7 @@ section {
display: block;
}
body {
line-height: 1;
line-height: $lh-100;
}
ol,

2
frontend/resources/styles/common/framework.scss
View file

@ -500,7 +500,7 @@ input[type="radio"],
input[type="checkbox"] {
box-sizing: border-box;
cursor: pointer;
line-height: normal;
line-height: $lh-normal;
margin-top: 1px 0 0;
}

2
frontend/resources/styles/main/layouts/not-found.scss
View file

@ -47,7 +47,7 @@
.main-message {
color: $color-black;
font-size: $fs80;
line-height: 150px;
line-height: $lh-188; // Original value was 150px; 150px/80px = 187.5 % => lh-188 (rounded)
text-align: center;
}

2
frontend/resources/styles/main/partials/af-signup-questions.scss
View file

@ -115,7 +115,7 @@
font-family: "worksans", sans-serif !important;
font-size: $fs12;
height: 1.5rem;
line-height: 1.5rem;
line-height: $lh-200; // Original value was 1.5rem = 24px; 24px/12px = 200% => lh-200
text-align: center;
width: 2.5rem !important;
}

2
frontend/resources/styles/main/partials/comments.scss
View file

@ -411,7 +411,7 @@
font-weight: $fw400;
color: $color-black;
font-size: $fs14;
line-height: $fs18;
line-height: $lh-128; // Original value was $fs18 => 1.125rem = 18px; 18px/14px = 128.571428571% => $lh-128 (rounded)
flex-grow: 1;
}

2
frontend/resources/styles/main/partials/dashboard-grid.scss
View file

@ -133,7 +133,7 @@
text-overflow: ellipsis;
width: 100%;
white-space: nowrap;
line-height: 27px;
line-height: $lh-192; // Original value was 27px; 27px/14px = 192.857142857% => $lh-192 (rounded)
max-width: 260px;
@media #{$bp-max-1366} {
max-width: 230px;

2
frontend/resources/styles/main/partials/dashboard-settings.scss
View file

@ -85,7 +85,7 @@
border-radius: 50%;
font-size: $fs24;
color: $color-white;
line-height: 120px;
line-height: $lh-500; // Original value was 120px; 120px/24px = 500% => $lh-500
text-align: center;
background: $color-primary-dark;
z-index: 14;

18
frontend/resources/styles/main/partials/dashboard.scss
View file

@ -239,7 +239,7 @@
h2 {
cursor: pointer;
font-size: $fs18;
line-height: 1rem;
line-height: $lh-088; // Original value was 1rem = 16px; 16px/18px = 88.88888% => $lh-088
font-weight: $fw600;
color: $color-black;
margin-right: $size-1;
@ -251,7 +251,7 @@
.info {
font-size: $fs14;
line-height: 1rem;
line-height: $lh-115; // Original value was 1rem = 16px; 16px/14px = 114.285714286% => $lh-115 (rounded)
font-weight: $fw400;
color: $color-gray-60;
margin-left: 0.75rem;
@ -333,7 +333,7 @@
.recent-files-row-title-info {
color: $color-gray-60;
line-height: 1rem;
line-height: $lh-115; // Original value was 1rem = 16px; 16px/14px = 114.285714286% => $lh-115
font-size: $fs14;
font-weight: $fw400;
@media (max-width: 880px) {
@ -484,9 +484,8 @@
border: none;
cursor: pointer;
height: 58px;
display: inline-block;
line-height: 58px;
text-align: center;
display: inline-flex;
align-items: center;
border-top: 2px solid #e4e4e4;
border-left: 2px solid #e4e4e4;
border-right: 2px solid #e4e4e4;
@ -499,7 +498,7 @@
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
line-height: $lh-normal;
font-size: $fs18;
font-weight: $fw600;
color: $color-black;
@ -523,12 +522,13 @@
border: 2px solid #e0e4e9;
border-radius: 50%;
text-align: center;
line-height: 35px;
width: 35px;
height: 35px;
cursor: pointer;
background-color: $color-white;
display: flex;
align-items: center;
justify-content: center;
svg {
width: 12px;
height: 12px;

2
frontend/resources/styles/main/partials/exception-page.scss
View file

@ -50,7 +50,7 @@
.main-message {
color: $color-black;
font-size: $fs80;
line-height: 150px;
line-height: $lh-188; // Original value was 150px; 150px/80px = 187.5 % => $lh-188 (rounded)
text-align: center;
}

2
frontend/resources/styles/main/partials/forms.scss
View file

@ -276,7 +276,7 @@ textarea {
max-width: 85%;
overflow: hidden;
text-overflow: ellipsis;
line-height: 16px;
line-height: $lh-115; // Original value was 16px; 16px/14px = 114.285714286% => $lh-115 (rounded)
font-size: $fs14;
color: $color-black;
}

4
frontend/resources/styles/main/partials/modal.scss
View file

@ -520,7 +520,7 @@
h3,
p {
font-size: $fs12;
line-height: 1.5;
line-height: $lh-150;
margin: 0;
color: $color-black;
padding: 0;
@ -2024,7 +2024,7 @@
h2 {
font-size: $fs24;
color: $color-black;
line-height: $fs36;
line-height: $lh-150; // Original value was 2.25rem = 36px; 36px/24px = 150% => $lh-150
letter-spacing: 0px;
margin: 0 30px 20px 0;
}

2
frontend/resources/styles/main/partials/sidebar-element-options.scss
View file

@ -895,7 +895,7 @@
border-radius: $br2;
color: $color-gray-20;
font-size: $fs11;
line-height: 16px;
line-height: $lh-145; // Original value was 16px; 16px/11px = 145.454545455% => $lh-145
flex-grow: 1;
padding: 0.25rem 0;

2
frontend/resources/styles/main/partials/sidebar-layers.scss
View file

@ -404,7 +404,7 @@ span.element-name {
}
.active-filters {
margin-top: 5px;
line-height: 26px;
line-height: 26px; // Original value was 26px; 26px/11px = 236.363636364% => $lh-236 (rounded)
font-size: $fs11;
margin: 0 0.5rem;
span {

2
frontend/resources/styles/main/partials/sidebar.scss
View file

@ -189,7 +189,7 @@
.empty {
color: $color-gray-20;
font-size: $fs12;
line-height: 1.5;
line-height: $lh-150;
text-align: center;
padding: 0 15px;
display: flex;

2
frontend/resources/styles/main/partials/user-settings.scss
View file

@ -119,7 +119,7 @@
border-radius: 50%;
font-size: $fs24;
color: $color-white;
line-height: 120px;
line-height: $lh-500; // Original value was 120px; 120px/24px =500% => $lh-500
text-align: center;
background: $color-primary-dark;
z-index: 14;

2
frontend/resources/styles/main/partials/workspace.scss
View file

@ -352,7 +352,7 @@ $height-palette-max: 80px;
align-items: center;
height: 20px;
font-size: $fs12;
line-height: 1.5;
line-height: $lh-150;
}
.viewport-actions {