3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-28 03:26:12 +02:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #4837 from penpot/eva-ds-foundations-typography

Browse source 
✨ Add typography ds tokens
This commit is contained in:
Belén Albeza 2024-07-04 16:11:25 +02:00 • committed by GitHub
commit 8959d39356
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
12 changed files with 189 additions and 77 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/app/main/ui/components/button_link.scss
View file

@ -12,7 +12,7 @@
border: none;
cursor: pointer;
display: flex;
font-family: "worksans", sans-serif;
font-family: "worksans", "vazirmatn", sans-serif;
justify-content: center;
min-width: 25px;
padding: 0 1rem;

136
frontend/src/app/main/ui/ds/typography.scss Normal file
View file

@ -0,0 +1,136 @@
// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC
@use "sass:math";
$_font-weight-regular: 400;
$_font-weight-medium: 500;
$_font-lineheight-dense: 1.2;
$_font-lineheight-compact: 1.3;
$_font-lineheight-normal: 1.4;
@function px2Rem($value) {
$remValue: math.div($value, 16) * 1rem;
@return $remValue;
}
$_fs-12: px2Rem(12);
$_fs-14: px2Rem(14);
$_fs-16: px2Rem(16);
$_fs-18: px2Rem(18);
$_fs-20: px2Rem(20);
$_fs-24: px2Rem(24);
$_fs-36: px2Rem(36);
@mixin _font-style-display {
font-family: "worksans", "vazirmatn", sans-serif;
font-optical-sizing: auto;
font-weight: $_font-weight-regular;
line-height: $_font-lineheight-dense;
font-size: $_fs-36;
}
@mixin _font-style-title-large {
font-family: "worksans", "vazirmatn", sans-serif;
font-optical-sizing: auto;
font-weight: $_font-weight-regular;
line-height: $_font-lineheight-dense;
font-size: $_fs-24;
}
@mixin _font-style-title-medium {
font-family: "worksans", "vazirmatn", sans-serif;
font-optical-sizing: auto;
font-weight: $_font-weight-regular;
line-height: $_font-lineheight-dense;
font-size: $_fs-20;
}
@mixin _font-style-heading-large {
font-family: "worksans", "vazirmatn", sans-serif;
font-optical-sizing: auto;
font-weight: $_font-weight-regular;
line-height: $_font-lineheight-normal;
font-size: $_fs-18;
text-transform: uppercase;
}
@mixin _font-style-heading-medium {
font-family: "worksans", "vazirmatn", sans-serif;
font-optical-sizing: auto;
font-weight: $_font-weight-regular;
line-height: $_font-lineheight-dense;
font-size: $_fs-16;
text-transform: uppercase;
}
@mixin _font-style-heading-small {
font-family: "worksans", "vazirmatn", sans-serif;
font-optical-sizing: auto;
font-weight: $_font-weight-medium;
line-height: $_font-lineheight-dense;
font-size: $_fs-12;
text-transform: uppercase;
}
@mixin _font-style-body-large {
font-family: "worksans", "vazirmatn", sans-serif;
font-optical-sizing: auto;
font-weight: $_font-weight-regular;
line-height: $_font-lineheight-normal;
font-size: $_fs-16;
}
@mixin _font-style-body-medium {
font-family: "worksans", "vazirmatn", sans-serif;
font-optical-sizing: auto;
font-weight: $_font-weight-regular;
line-height: $_font-lineheight-compact;
font-size: $_fs-14;
}
@mixin _font-style-body-small {
font-family: "worksans", "vazirmatn", sans-serif;
font-optical-sizing: auto;
font-weight: $_font-weight-regular;
line-height: $_font-lineheight-compact;
font-size: $_fs-12;
}
@mixin _font-style-code-font {
font-family: "Roboto Mono", monospace;
font-optical-sizing: auto;
font-weight: $_font-weight-regular;
line-height: $_font-lineheight-dense;
font-size: $_fs-12;
}
@mixin use-typography($typography-name) {
@if $typography-name == "display" {
@include _font-style-display;
} @else if $typography-name == "title-large" {
@include _font-style-title-large;
} @else if $typography-name == "title-medium" {
@include _font-style-title-medium;
} @else if $typography-name == "heading-large" {
@include _font-style-heading-large;
} @else if $typography-name == "heading-medium" {
@include _font-style-heading-medium;
} @else if $typography-name == "heading-small" {
@include _font-style-heading-small;
} @else if $typography-name == "body-large" {
@include _font-style-body-large;
} @else if $typography-name == "body-medium" {
@include _font-style-body-medium;
} @else if $typography-name == "body-small" {
@include _font-style-body-small;
} @else if $typography-name == "code-font" {
@include _font-style-code-font;
} @else {
@error "Unknown typography: " + $typography-name;
}
}

6
frontend/src/app/main/ui/settings.scss
View file

@ -186,13 +186,13 @@
margin-bottom: $s-32;
.newsletter-title {
font-family: "worksans", sans-serif;
font-family: "worksans", "vazirmatn", sans-serif;
color: $df-secondary;
font-size: $fs-14;
}
label {
font-family: "worksans", sans-serif;
font-family: "worksans", "vazirmatn", sans-serif;
color: $db-primary;
font-size: $fs-12;
margin-right: calc(-1 * $s-16);
@ -200,7 +200,7 @@
}
.info {
font-family: "worksans", sans-serif;
font-family: "worksans", "vazirmatn", sans-serif;
color: $df-secondary;
font-size: $fs-12;
margin-bottom: $s-8;

4
frontend/src/app/main/ui/settings/profile.scss
View file

@ -296,13 +296,13 @@ form.avatar-form {
margin-bottom: $s-32;
.newsletter-title {
font-family: "worksans", sans-serif;
font-family: "worksans", "vazirmatn", sans-serif;
color: $df-secondary;
font-size: $fs-14;
}
label {
font-family: "worksans", sans-serif;
font-family: "worksans", "vazirmatn", sans-serif;
color: $db-primary;
font-size: $fs-12;
margin-right: calc(-1 * $s-16);

2
frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss
View file

@ -419,7 +419,7 @@
align-items: center;
height: $s-32;
border-radius: $br-8;
font-family: "worksans", sans-serif;
font-family: "worksans", "vazirmatn", sans-serif;
background-color: var(--input-background-color);
}

2
frontend/src/app/main/ui/workspace/sidebar/shortcuts.scss
View file

@ -20,7 +20,7 @@
height: $s-32;
margin: $s-16 $s-12 $s-4 $s-12;
border-radius: $br-8;
font-family: "worksans", sans-serif;
font-family: "worksans", "vazirmatn", sans-serif;
background-color: var(--color-background-tertiary);
.search-box {
align-items: center;