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

✨ Add specific font for persian and arabic locales

Browse source 
And remove deprecated and not used font files, simplifying
the font-face mixin.
This commit is contained in:
Andrey Antukh 2022-07-14 09:28:44 +02:00 • committed by Alonso Torres
parent 2e2b05a7a4
commit 54d9b02b4d
91 changed files with 90 additions and 433746 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -5,12 +5,16 @@
// Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
:root {
--font-family: "worksans", sans-serif;
}
body {
background-color: lighten($color-gray-10, 5%);
color: $color-gray-20;
display: flex;
flex-direction: column;
font-family: "worksans", sans-serif;
font-family: var(--font-family);
width: 100vw;
height: 100vh;
overflow: hidden;

24
frontend/resources/styles/common/dependencies/animations.scss
View file

@ -1809,19 +1809,15 @@
}
40% {
-webkit-transform: perspective(400px) translate3d(0, 0, 150px)
rotate3d(0, 1, 0, -190deg);
transform: perspective(400px) translate3d(0, 0, 150px)
rotate3d(0, 1, 0, -190deg);
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
50% {
-webkit-transform: perspective(400px) translate3d(0, 0, 150px)
rotate3d(0, 1, 0, -170deg);
transform: perspective(400px) translate3d(0, 0, 150px)
rotate3d(0, 1, 0, -170deg);
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
@ -1850,19 +1846,15 @@
}
40% {
-webkit-transform: perspective(400px) translate3d(0, 0, 150px)
rotate3d(0, 1, 0, -190deg);
transform: perspective(400px) translate3d(0, 0, 150px)
rotate3d(0, 1, 0, -190deg);
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
50% {
-webkit-transform: perspective(400px) translate3d(0, 0, 150px)
rotate3d(0, 1, 0, -170deg);
transform: perspective(400px) translate3d(0, 0, 150px)
rotate3d(0, 1, 0, -170deg);
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}

144
frontend/resources/styles/common/dependencies/colors.scss
View file

@ -46,138 +46,42 @@ $mix-percentage-lighter: 20%;
$mix-percentage-lightest: 10%;
// Lighter colors
$color-success-light: mix(
$color-success,
$color-white,
$mix-percentage-light
); //#79cf7d
$color-success-lighter: mix(
$color-success,
$color-white,
$mix-percentage-lighter
); //#def3de
$color-success-light: mix($color-success, $color-white, $mix-percentage-light); //#79cf7d
$color-success-lighter: mix($color-success, $color-white, $mix-percentage-lighter); //#def3de
$color-complete-light: mix(
$color-complete,
$color-white,
$mix-percentage-light
); //#b7add1
$color-complete-lighter: mix(
$color-complete,
$color-white,
$mix-percentage-lighter
); //#edebf4
$color-complete-light: mix($color-complete, $color-white, $mix-percentage-light); //#b7add1
$color-complete-lighter: mix($color-complete, $color-white, $mix-percentage-lighter); //#edebf4
$color-primary-light: mix(
$color-primary,
$color-white,
$mix-percentage-light
); //#5af2c6
$color-primary-lighter: mix(
$color-primary,
$color-white,
$mix-percentage-lighter
); //#d6fcf1
$color-primary-light: mix($color-primary, $color-white, $mix-percentage-light); //#5af2c6
$color-primary-lighter: mix($color-primary, $color-white, $mix-percentage-lighter); //#d6fcf1
$color-warning-light: mix(
$color-warning,
$color-white,
$mix-percentage-light
); //#fda035
$color-warning-lighter: mix(
$color-warning,
$color-white,
$mix-percentage-lighter
); //#fee7cc;
$color-warning-light: mix($color-warning, $color-white, $mix-percentage-light); //#fda035
$color-warning-lighter: mix($color-warning, $color-white, $mix-percentage-lighter); //#fee7cc;
$color-danger-light: mix(
$color-danger,
$color-white,
$mix-percentage-light
); //#eb7569
$color-danger-lighter: mix(
$color-danger,
$color-white,
$mix-percentage-lighter
); //#fadcda
$color-danger-light: mix($color-danger, $color-white, $mix-percentage-light); //#eb7569
$color-danger-lighter: mix($color-danger, $color-white, $mix-percentage-lighter); //#fadcda
$color-info-light: mix(
$color-info,
$color-white,
$mix-percentage-light
); //#7ac7e8
$color-info-lighter: mix(
$color-info,
$color-white,
$mix-percentage-lighter
); //#def1f9;
$color-info-light: mix($color-info, $color-white, $mix-percentage-light); //#7ac7e8
$color-info-lighter: mix($color-info, $color-white, $mix-percentage-lighter); //#def1f9;
// Darker colors
$color-success-dark: mix(
$color-success,
$color-black,
$mix-percentage-dark
); //#479e4b;
$color-success-darker: mix(
$color-success,
$color-black,
$mix-percentage-darker
); // #357537;
$color-success-dark: mix($color-success, $color-black, $mix-percentage-dark); //#479e4b;
$color-success-darker: mix($color-success, $color-black, $mix-percentage-darker); // #357537;
$color-complete-dark: mix(
$color-complete,
$color-black,
$mix-percentage-dark
); //#867ca0
$color-complete-darker: mix(
$color-complete,
$color-black,
$mix-percentage-darker
); //#635c77
$color-complete-dark: mix($color-complete, $color-black, $mix-percentage-dark); //#867ca0
$color-complete-darker: mix($color-complete, $color-black, $mix-percentage-darker); //#635c77
$color-primary-dark: mix(
$color-primary,
$color-black,
$mix-percentage-dark
); //#28c295;
$color-primary-darker: mix(
$color-primary,
$color-black,
$mix-percentage-darker
); // #1d8f6e
$color-primary-dark: mix($color-primary, $color-black, $mix-percentage-dark); //#28c295;
$color-primary-darker: mix($color-primary, $color-black, $mix-percentage-darker); // #1d8f6e
$color-warning-dark: mix(
$color-warning,
$color-black,
$mix-percentage-dark
); // #cc6e02;
$color-warning-darker: mix(
$color-warning,
$color-black,
$mix-percentage-darker
); //#975201
$color-warning-dark: mix($color-warning, $color-black, $mix-percentage-dark); // #cc6e02;
$color-warning-darker: mix($color-warning, $color-black, $mix-percentage-darker); //#975201
$color-danger-dark: mix(
$color-danger,
$color-black,
$mix-percentage-dark
); //#ba4237
$color-danger-darker: mix(
$color-danger,
$color-black,
$mix-percentage-darker
); // #8a3129;
$color-danger-dark: mix($color-danger, $color-black, $mix-percentage-dark); //#ba4237
$color-danger-darker: mix($color-danger, $color-black, $mix-percentage-darker); // #8a3129;
$color-info-dark: mix(
$color-info,
$color-black,
$mix-percentage-dark
); // #4896b7
$color-info-darker: mix(
$color-info,
$color-black,
$mix-percentage-darker
); // #356f88;
$color-info-dark: mix($color-info, $color-black, $mix-percentage-dark); // #4896b7
$color-info-darker: mix($color-info, $color-black, $mix-percentage-darker); // #356f88;
// bg transparent
$color-dark-bg: rgba(0, 0, 0, 0.4);

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

@ -59,24 +59,25 @@ $title-lh-sm: 1.15;
// Source Sans Pro
@include font-face("sourcesanspro", "sourcesanspro-extralight", "200");
@include font-face(
"sourcesanspro",
"sourcesanspro-extralightitalic",
"200",
italic
);
@include font-face("sourcesanspro", "sourcesanspro-extralightitalic", "200", italic);
@include font-face("sourcesanspro", "sourcesanspro-light", "300");
@include font-face("sourcesanspro", "sourcesanspro-lightitalic", "300", italic);
@include font-face("sourcesanspro", "sourcesanspro-regular", normal);
@include font-face("sourcesanspro", "sourcesanspro-italic", normal, italic);
@include font-face("sourcesanspro", "sourcesanspro-semibold", "600");
@include font-face(
"sourcesanspro",
"sourcesanspro-semibolditalic",
"600",
italic
);
@include font-face("sourcesanspro", "sourcesanspro-semibolditalic", "600", italic);
@include font-face("sourcesanspro", "sourcesanspro-bold", bold);
@include font-face("sourcesanspro", "sourcesanspro-bolditalic", bold, italic);
@include font-face("sourcesanspro", "sourcesanspro-black", "900");
@include font-face("sourcesanspro", "sourcesanspro-blackitalic", "900", italic);
// Vazirmatn
@include font-face("vazirmatn", "Vazirmatn-Thin", "100");
@include font-face("vazirmatn", "Vazirmatn-ExtraLight", "200");
@include font-face("vazirmatn", "Vazirmatn-Light", "300");
@include font-face("vazirmatn", "Vazirmatn-Regular", normal);
@include font-face("vazirmatn", "Vazirmatn-Medium", "500");
@include font-face("vazirmatn", "Vazirmatn-SemiBold", "600");
@include font-face("vazirmatn", "Vazirmatn-Bold", bold);
@include font-face("vazirmatn", "Vazirmatn-ExtraBold", "800");
@include font-face("vazirmatn", "Vazirmatn-Black", "900");

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

@ -111,27 +111,11 @@
text-shadow: none;
}
/// Shortcut mixin to add new font-face compatible with all browser. To work you need to add the follow formats of font:".eot", ".woff", ".ttf" and "svg".
/// @group Mixins
/// @parameter $style-name - Name of the font style
/// @parameter $file - Name of the font file.
/// @parameter $weight [normal] - With this variable you can add how much weight you want to add to this specific font. EX: Bold
/// @parameter $style [normal] - With this variable you can add a font style to this specific font. EX: Italic
@mixin font-face(
$style-name,
$file,
$weight: unquote("normal"),
$style: unquote("normal")
) {
@mixin font-face($style-name, $file, $weight: unquote("normal"), $style: unquote("normal")) {
$filepath: "/fonts/" + $file;
@font-face {
font-family: "#{$style-name}";
src: url($filepath + ".eot");
src: url($filepath + ".eot?#iefix") format("embedded-opentype"),
url($filepath + ".woff") format("woff"),
url($filepath + ".ttf") format("truetype"),
url($filepath + ".svg#" + $style-name + "") format("svg");
src: url($filepath + ".woff2") format("woff2"), url($filepath + ".ttf") format("truetype");
font-weight: unquote($weight);
font-style: unquote($style);
}

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

@ -243,10 +243,7 @@
}
}
.af-field-previous_design_tool
.af-choice-option:nth-child(7)
input:checked
+ label,
.af-field-previous_design_tool .af-choice-option:nth-child(7) input:checked + label,
.af-field-use_of_penpot .af-choice-option:nth-child(5) input:checked + label {
&::before {
background-color: $color-primary;

14
frontend/resources/styles/main/partials/colorpicker.scss
View file

@ -200,11 +200,7 @@
}
&.value {
background: linear-gradient(
var(--gradient-direction),
#fff 0%,
#000 100%
);
background: linear-gradient(var(--gradient-direction), #fff 0%, #000 100%);
}
.handler {
@ -237,8 +233,8 @@
border-radius: 6px;
z-index: 1;
border: 1px solid $color-white;
box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px inset,
rgb(0 0 0 / 0.25) 0px 4px 4px inset, rgb(0 0 0 / 0.25) 0px 4px 4px;
box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px inset, rgb(0 0 0 / 0.25) 0px 4px 4px inset,
rgb(0 0 0 / 0.25) 0px 4px 4px;
transform: translate(-6px, -6px);
left: 50%;
top: 50%;
@ -386,8 +382,8 @@
border-radius: 6px;
z-index: 1;
border: 1px solid $color-white;
box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px inset,
rgb(0 0 0 / 0.25) 0px 4px 4px inset, rgb(0 0 0 / 0.25) 0px 4px 4px;
box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px inset, rgb(0 0 0 / 0.25) 0px 4px 4px inset,
rgb(0 0 0 / 0.25) 0px 4px 4px;
transform: translate(-6px, -6px);
left: 50%;
top: 50%;

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

@ -177,7 +177,7 @@
span.element-title {
color: $color-gray-60;
font-size: $fs14;
overflow-x: hidden;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
user-select: none;

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

@ -1289,8 +1289,7 @@
}
.modal-container {
background-image: url("../images/deco-left.png"),
url("../images/deco-right.png");
background-image: url("../images/deco-left.png"), url("../images/deco-right.png");
background-repeat: no-repeat;
background-position: 10% 50px, 90% 50px;
background-size: 65px;
@ -1317,18 +1316,8 @@
--checkbox-border-radius: 3px;
--dropdown-option-background-color: rgba(0, 195, 139, 1);
--dropdown-option-active-background-color: rgba(0, 138, 98, 1);
--invalid-field-background-color: rgba(
238.51780000000002,
205.7178,
204.11780000000002,
1
);
--message-fail-background-color: rgba(
238.51780000000002,
205.7178,
204.11780000000002,
1
);
--invalid-field-background-color: rgba(238.51780000000002, 205.7178, 204.11780000000002, 1);
--message-fail-background-color: rgba(238.51780000000002, 205.7178, 204.11780000000002, 1);
--message-success-background-color: rgba(171, 232, 197, 1);
}
}