mirror of
https://github.com/penpot/penpot.git
synced 2025-02-13 02:28:18 -05:00
✨ Clean up fonts scss files
This commit is contained in:
Belén Albeza
parent
0c3f47b0c3
commit
49fd000217
10 changed files with 47 additions and 113 deletions
|
|
@ -4,6 +4,18 @@
|
|||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
// TODO: Legacy sass vars. We should use DS tokens.
|
||||
$fs12: 0.75rem;
|
||||
$fs18: 1.125rem;
|
||||
$fs24: 1.5rem;
|
||||
$fs34: 2.125rem;
|
||||
$fs44: 2.75rem;
|
||||
$fw300: 300;
|
||||
$fw500: 500;
|
||||
$fw700: 700;
|
||||
$lh-115: 1.15;
|
||||
$lh-133: 1.33;
|
||||
|
||||
:root {
|
||||
--font-family: "worksans", sans-serif;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,64 +4,18 @@
|
|||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
// Font sizes
|
||||
$fs8: 0.5rem;
|
||||
$fs9: 0.5625rem;
|
||||
$fs10: 0.625rem;
|
||||
$fs11: 0.6875rem;
|
||||
$fs12: 0.75rem;
|
||||
$fs13: 0.8125rem;
|
||||
$fs14: 0.875rem;
|
||||
$fs15: 0.9375rem;
|
||||
$fs16: 1rem;
|
||||
$fs17: 1.0625rem;
|
||||
$fs18: 1.125rem;
|
||||
$fs19: 1.1875rem;
|
||||
$fs20: 1.25rem;
|
||||
$fs21: 1.315rem;
|
||||
$fs22: 1.375rem;
|
||||
$fs23: 1.4375rem;
|
||||
$fs24: 1.5rem;
|
||||
$fs26: 1.625rem;
|
||||
$fs30: 1.875rem;
|
||||
$fs32: 2rem;
|
||||
$fs34: 2.125rem;
|
||||
$fs36: 2.25rem;
|
||||
$fs38: 2.375rem;
|
||||
$fs40: 2.5rem;
|
||||
$fs42: 2.675rem;
|
||||
$fs44: 2.75rem;
|
||||
$fs80: 5rem;
|
||||
@mixin font-face($style-name, $file, $weight: unquote("normal"), $style: unquote("normal")) {
|
||||
$filepath: "/fonts/" + $file;
|
||||
|
||||
// Font weight
|
||||
// Taken from https://fonts.google.com/specimen/Work+Sans
|
||||
$fw100: 100; // Thin
|
||||
$fw200: 200; // Extra Light
|
||||
$fw300: 300; // Light
|
||||
$fw400: 400; // Regular (CSS value: 'normal')
|
||||
$fw500: 500; // Medium
|
||||
$fw600: 600; // Semi Bold
|
||||
$fw700: 700; // Bold (CSS value: 'bold')
|
||||
$fw800: 800; // Extra Bold
|
||||
$fw900: 900; // Black
|
||||
|
||||
// Line height
|
||||
// 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;
|
||||
@font-face {
|
||||
font-family: "#{$style-name}";
|
||||
src:
|
||||
url($filepath + ".woff2") format("woff2"),
|
||||
url($filepath + ".ttf") format("truetype");
|
||||
font-weight: unquote($weight);
|
||||
font-style: unquote($style);
|
||||
}
|
||||
}
|
||||
|
||||
// Work Sans
|
||||
@include font-face("worksans", "WorkSans-Thin", "100");
|
||||
|
|
@ -105,3 +59,6 @@ $lh-500: 5;
|
|||
@include font-face("vazirmatn", "Vazirmatn-Bold", bold);
|
||||
@include font-face("vazirmatn", "Vazirmatn-ExtraBold", "800");
|
||||
@include font-face("vazirmatn", "Vazirmatn-Black", "900");
|
||||
|
||||
// Space mono
|
||||
@include font-face("robotomono", "RobotoMono-Regular", normal);
|
||||
|
|
|
|||
|
|
@ -2,6 +2,9 @@
|
|||
Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/
|
||||
*/
|
||||
|
||||
// TODO: Legacy sass vars. We should use DS tokens.
|
||||
$fw700: 700;
|
||||
|
||||
.hljs {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
|
|
|
|||
|
|
@ -1,40 +0,0 @@
|
|||
// 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
|
||||
|
||||
@mixin font-face($style-name, $file, $weight: unquote("normal"), $style: unquote("normal")) {
|
||||
$filepath: "/fonts/" + $file;
|
||||
@font-face {
|
||||
font-family: "#{$style-name}";
|
||||
src:
|
||||
url($filepath + ".woff2") format("woff2"),
|
||||
url($filepath + ".ttf") format("truetype");
|
||||
font-weight: unquote($weight);
|
||||
font-style: unquote($style);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin tooltipShow {
|
||||
&:hover {
|
||||
.icon-tooltip {
|
||||
display: block;
|
||||
left: 2rem;
|
||||
animation: tooltipAppear 0.2s linear;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
.icon-tooltip {
|
||||
display: block;
|
||||
left: 2rem;
|
||||
animation: tooltipAppear 0.2s linear;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin text-ellipsis {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -1,3 +1,7 @@
|
|||
// TODO: Legacy sass vars. We should not be using Sass vars here in this
|
||||
// file at all.
|
||||
$lh-143: 1.43;
|
||||
|
||||
/*
|
||||
http://meyerweb.com/eric/tools/css/reset/
|
||||
v2.0 | 20110126
|
||||
|
|
@ -97,6 +101,9 @@ video {
|
|||
border: 0;
|
||||
font: inherit;
|
||||
font-size: 100%;
|
||||
// TODO: Changing line-height to 1 (as it should be) makes the visual tests
|
||||
// fail with a max pixel diff ratio of 0.005.
|
||||
// We should tackle this later.
|
||||
line-height: $lh-143;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
@ -118,7 +125,7 @@ section {
|
|||
display: block;
|
||||
}
|
||||
body {
|
||||
line-height: $lh-100;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
ol,
|
||||
|
|
|
|||
|
|
@ -12,6 +12,8 @@ $size-4: 1rem;
|
|||
$br7: 7px;
|
||||
$br25: 25px;
|
||||
$br50: 50px;
|
||||
$fs14: 0.875rem;
|
||||
$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/
|
||||
|
||||
input[type="button"][disabled] {
|
||||
background-color: var(--color-canvas); // TODO: see if we can remove this whole selector
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
@use "sass:math";
|
||||
@import "common/dependencies/mixin";
|
||||
|
||||
// Typography scale
|
||||
$fs-base: 16;
|
||||
|
|
|
|||
|
|
@ -15,7 +15,6 @@
|
|||
//#################################################
|
||||
|
||||
@import "common/refactor/color-defs.scss";
|
||||
@import "common/dependencies/mixin";
|
||||
@import "common/dependencies/fonts";
|
||||
@import "common/dependencies/reset";
|
||||
@import "common/dependencies/animations";
|
||||
|
|
|
|||
|
|
@ -4,9 +4,12 @@
|
|||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
// TODO: legacy sass vars. To be removed in favor of DS tokens
|
||||
@import "refactor/common-refactor.scss";
|
||||
|
||||
// TODO: legacy sass vars. To be removed in favor of DS tokens.
|
||||
$br3: 3px;
|
||||
$br4: 4px;
|
||||
$lh-150: 1.5;
|
||||
|
||||
$width-left-toolbar: 48px;
|
||||
|
||||
|
|
@ -119,7 +122,7 @@ $height-palette-max: 80px;
|
|||
|
||||
span {
|
||||
color: var(--df-primary);
|
||||
font-size: $fs12;
|
||||
font-size: $fs-12;
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
|
|
@ -128,7 +131,7 @@ $height-palette-max: 80px;
|
|||
background-color: var(--db-secondary-40);
|
||||
border-radius: $br3;
|
||||
color: var(--df-primary);
|
||||
font-size: $fs12;
|
||||
font-size: $fs-12;
|
||||
padding: 3px 8px;
|
||||
transition: none;
|
||||
text-align: center;
|
||||
|
|
@ -236,7 +239,7 @@ $height-palette-max: 80px;
|
|||
}
|
||||
|
||||
.workspace-frame-label {
|
||||
font-size: $fs12;
|
||||
font-size: $fs-12;
|
||||
}
|
||||
|
||||
.multiuser-cursor {
|
||||
|
|
@ -252,7 +255,7 @@ $height-palette-max: 80px;
|
|||
display: flex;
|
||||
align-items: center;
|
||||
height: 20px;
|
||||
font-size: $fs12;
|
||||
font-size: $fs-12;
|
||||
line-height: $lh-150;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,14 +6,6 @@
|
|||
|
||||
@import "refactor/common-refactor.scss";
|
||||
|
||||
// Work Sans
|
||||
@include font-face("worksans", "WorkSans-Regular", normal);
|
||||
@include font-face("worksans", "WorkSans-Medium", "500");
|
||||
@include font-face("worksans", "WorkSans-Bold", bold);
|
||||
|
||||
// Space mono
|
||||
@include font-face("robotomono", "RobotoMono-Regular", normal);
|
||||
|
||||
:global(:root) {
|
||||
--s-4: 0.25rem;
|
||||
--layer-indentation-size: calc(var(--s-4) * 6);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue