Merge pull request #1026 from vincentbavitz/fonts-open

Convert to open fonts
pull/1064/head
Vince 5 years ago committed by GitHub
commit 7b0d088ae6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

@ -1248,7 +1248,7 @@
} }
.module-group-notification__contact { .module-group-notification__contact {
font-family: 'SF Pro Text'; font-family: 'Public Sans';
font-weight: bold; font-weight: bold;
} }

@ -1,39 +1,64 @@
// Fonts changed to 'Public Sans' and Space Mono' as per req. Chad.
$session-font-default: 'Public Sans';
$session-font-mono: 'SpaceMono';
@font-face { @font-face {
font-family: 'SpaceMono'; font-family: $session-font-mono;
src: url('../fonts/SpaceMono-Regular.ttf') format('truetype'); src: url('../fonts/SpaceMono-Regular.ttf') format('truetype');
} }
@font-face { @font-face {
font-family: 'SpaceMono'; font-family: $session-font-mono;
src: url('../fonts/SpaceMono-Bold.ttf') format('truetype'); src: url('../fonts/SpaceMono-Bold.ttf') format('truetype');
font-weight: bold; font-weight: bold;
} }
@font-face { @font-face {
font-family: 'SpaceMono'; font-family: $session-font-mono;
src: url('../fonts/SpaceMono-Italic.ttf') format('truetype'); src: url('../fonts/SpaceMono-Italic.ttf') format('truetype');
font-style: italic; font-style: italic;
} }
@font-face { @font-face {
font-family: 'SpaceMono'; font-family: $session-font-mono;
src: url('../fonts/SpaceMono-BoldItalic.ttf') format('truetype'); src: url('../fonts/SpaceMono-BoldItalic.ttf') format('truetype');
font-weight: bold; font-weight: bold;
font-style: italic; font-style: italic;
} }
// Public Sans is an open replacement for 'SF Pro Text'
@font-face {
font-family: $session-font-default;
src: url('../fonts/PublicSans-Regular.woff') format('woff');
}
@font-face {
font-family: $session-font-default;
src: url('../fonts/PublicSans-Italic.woff') format('woff');
font-style: italic;
}
@font-face { @font-face {
font-family: 'Wasa'; font-family: $session-font-default;
src: url('../fonts/Wasa-Bold.otf') format('opentype'); src: url('../fonts/PublicSans-Bold.woff') format('woff');
font-weight: bold; font-weight: bold;
} }
@font-face { @font-face {
font-family: 'SF Pro Text'; font-family: $session-font-default;
src: url('../fonts/SFProText-Regular.ttf') format('truetype'); src: url('../fonts/PublicSans-BoldItalic.woff') format('woff');
font-weight: bold;
font-style: italic;
}
@font-face {
font-family: $session-font-default;
src: url('../fonts/PublicSans-Light.woff') format('woff');
font-weight: lighter;
} }
@font-face { @font-face {
font-family: 'SF Pro Display'; font-family: $session-font-default;
src: url('../fonts/SFProDisplay-Regular.otf') format('opentype'); src: url('../fonts/PublicSans-LightItalic.woff') format('woff');
font-weight: lighter;
font-style: italic;
} }
@keyframes fadein { @keyframes fadein {
from { from {
opacity: 0; opacity: 0;
@ -44,8 +69,6 @@
} }
// Session Colors // Session Colors
$session-font-family: 'Wasa';
$session-color-green: #00f782; $session-color-green: #00f782;
$session-color-green-alt-1: #00f480; $session-color-green-alt-1: #00f480;
$session-color-green-alt-2: #00fd73; $session-color-green-alt-2: #00fd73;
@ -191,9 +214,9 @@ $session-modal-size-lg: 650px;
$session-conversation-header-height: 60px; $session-conversation-header-height: 60px;
@mixin fontWasaBold { @mixin fontDefaultBold {
font-weight: bold; font-weight: bold;
font-family: $session-font-family; font-family: $session-font-default;
} }
* { * {
@ -368,7 +391,7 @@ $session_message-container-border-radius: 5px;
line-height: 40px; line-height: 40px;
padding: 0px $session-margin-lg; padding: 0px $session-margin-lg;
font-size: $session-font-md; font-size: $session-font-md;
font-family: $session-font-family; font-family: $session-font-default;
border-radius: 500px; border-radius: 500px;
&:not(.disabled):hover { &:not(.disabled):hover {
@ -471,7 +494,7 @@ $session_message-container-border-radius: 5px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-family: $session-font-family; font-family: $session-font-default;
border-radius: 50%; border-radius: 50%;
font-weight: 700; font-weight: 700;
background: $session-color-danger; background: $session-color-danger;
@ -521,16 +544,18 @@ $session-element-border-green: 4px solid $session-color-green;
.module-conversation-header__title-flex, .module-conversation-header__title-flex,
.module-conversation-header__title { .module-conversation-header__title {
font-family: Wasa; font-family: $session-font-default;
font-weight: bold;
width: 100%; width: 100%;
display: flex; display: flex;
font-size: $session-font-md; font-size: $session-font-md;
&-text { &-text {
@include session-color-subtle($session-color-white); @include session-color-subtle($session-color-white);
font-family: 'SF Pro Text'; font-family: $session-font-default;
font-weight: 300; font-weight: 300;
font-size: $session-font-xs; font-size: $session-font-xs;
line-height: $session-font-xs;
} }
.module-contact-name { .module-contact-name {
@ -740,7 +765,7 @@ label {
padding: $session-margin-lg; padding: $session-margin-lg;
font-family: 'Wasa'; font-family: $session-font-default;
text-align: center; text-align: center;
line-height: 18px; line-height: 18px;
font-size: $session-font-md; font-size: $session-font-md;
@ -778,7 +803,7 @@ label {
&__body { &__body {
padding: 0px $session-margin-lg $session-margin-lg $session-margin-lg; padding: 0px $session-margin-lg $session-margin-lg $session-margin-lg;
font-family: 'Wasa'; font-family: $session-font-default;
line-height: $session-font-md; line-height: $session-font-md;
font-size: $session-font-sm; font-size: $session-font-sm;
@ -923,7 +948,7 @@ label {
background-color: $session-shade-4; background-color: $session-shade-4;
color: $session-color-white; color: $session-color-white;
font-family: 'Wasa'; font-family: $session-font-default;
font-size: $session-font-sm; font-size: $session-font-sm;
line-height: $session-icon-size-sm; line-height: $session-icon-size-sm;
font-weight: 700; font-weight: 700;
@ -1081,7 +1106,7 @@ label {
word-break: break-all; word-break: break-all;
font-size: $session-font-md; font-size: $session-font-md;
padding: 0px $session-margin-lg; padding: 0px $session-margin-lg;
font-family: 'SF Pro Text'; font-family: $session-font-default;
font-weight: 100; font-weight: 100;
color: rgba($session-color-white, 0.8); color: rgba($session-color-white, 0.8);
font-size: $session-font-md; font-size: $session-font-md;
@ -1283,7 +1308,7 @@ label {
} }
&__description { &__description {
font-family: 'SF Pro Text'; font-family: $session-font-default;
font-size: $session-font-sm; font-size: $session-font-sm;
font-weight: 100; font-weight: 100;
max-width: 700px; max-width: 700px;
@ -1358,7 +1383,7 @@ label {
text-align: center; text-align: center;
font-size: $session-font-xl; font-size: $session-font-xl;
letter-spacing: 5px; letter-spacing: 5px;
font-family: 'SF Pro Text'; font-family: $session-font-default;
} }
} }
} }
@ -1393,7 +1418,7 @@ label {
.discussion-container { .discussion-container {
.module-message { .module-message {
font-family: 'SF Pro Text'; font-family: $session-font-default;
border-radius: 5px; border-radius: 5px;
&__text--incoming { &__text--incoming {
@ -1606,7 +1631,7 @@ input {
/* Memberlist */ /* Memberlist */
.member-list-container .member { .member-list-container .member {
&-item { &-item {
font-family: 'SF Pro Text'; font-family: $session-font-default;
padding: $session-margin-sm $session-margin-md; padding: $session-margin-sm $session-margin-md;
background-color: $session-shade-5; background-color: $session-shade-5;
@ -1671,7 +1696,7 @@ input {
height: 400px; height: 400px;
text-align: center; text-align: center;
font-family: 'SF Pro Text'; font-family: $session-font-default;
} }
&__title h1 { &__title h1 {
@ -1687,7 +1712,7 @@ input {
} }
&__info { &__info {
font-family: 'Wasa'; font-family: $session-font-default;
margin-bottom: 2 * $session-margin-lg; margin-bottom: 2 * $session-margin-lg;
&--title { &--title {
@ -1697,7 +1722,7 @@ input {
} }
&--subtitle { &--subtitle {
font-family: 'SF Pro Text'; font-family: $session-font-default;
font-weight: 300; font-weight: 300;
line-height: $session-font-md; line-height: $session-font-md;
opacity: 0.8; opacity: 0.8;
@ -1737,7 +1762,7 @@ input {
} }
&__no-contacts { &__no-contacts {
font-family: 'SpaceMono'; font-family: $session-font-mono;
text-align: center; text-align: center;
padding: 20px; padding: 20px;
} }
@ -1758,7 +1783,7 @@ input {
.session-member-item { .session-member-item {
cursor: pointer; cursor: pointer;
font-family: 'SF Pro Text'; font-family: $session-font-default;
padding: 0px $session-margin-sm; padding: 0px $session-margin-sm;
height: 50px; height: 50px;
display: flex; display: flex;

@ -112,7 +112,7 @@ $session-compose-margin: 20px;
&__user__profile { &__user__profile {
&-number, &-number,
&-name { &-name {
@include fontWasaBold(); @include fontDefaultBold();
font-size: 15px; font-size: 15px;
@at-root .light-theme #{&} { @at-root .light-theme #{&} {
@ -193,7 +193,7 @@ $session-compose-margin: 20px;
.session-button { .session-button {
margin-left: auto; margin-left: auto;
@include fontWasaBold(); @include fontDefaultBold();
} }
&-buttons { &-buttons {
@ -302,7 +302,7 @@ $session-compose-margin: 20px;
font-size: $session-font-sm; font-size: $session-font-sm;
line-height: $session-font-h3; line-height: $session-font-h3;
margin: 0px 20px; margin: 0px 20px;
font-family: 'SF Pro Display'; font-family: $session-font-default;
} }
.session-id-editable { .session-id-editable {
@ -375,7 +375,7 @@ $session-compose-margin: 20px;
border: none; border: none;
flex-grow: 1; flex-grow: 1;
font-size: $session-font-sm; font-size: $session-font-sm;
font-family: 'SF Pro Text'; font-family: $session-font-default;
&:focus { &:focus {
outline: none !important; outline: none !important;
@ -637,7 +637,7 @@ $session-compose-margin: 20px;
border-radius: 50px; border-radius: 50px;
color: $session-color-light-grey; color: $session-color-light-grey;
border: 1px solid $session-color-dark-grey; border: 1px solid $session-color-dark-grey;
font-family: 'SF Pro Text'; font-family: $session-font-default;
font-size: $session-font-sm; font-size: $session-font-sm;
} }
} }

@ -17,7 +17,7 @@
&-text { &-text {
color: $session-color-white; color: $session-color-white;
font-family: $session-font-family; font-family: $session-font-default;
.title { .title {
font-size: 100px; font-size: 100px;
@ -87,7 +87,7 @@
} }
&__tab { &__tab {
@include fontWasaBold(); @include fontDefaultBold();
width: 100%; width: 100%;
padding-bottom: 10px; padding-bottom: 10px;
background-color: transparent; background-color: transparent;
@ -244,7 +244,7 @@
overflow-wrap: break-word; overflow-wrap: break-word;
padding: 0px 5px 20px 5px; padding: 0px 5px 20px 5px;
display: inline-block; display: inline-block;
font-family: 'SpaceMono'; font-family: $session-font-mono;
user-select: all; user-select: all;
} }
} }

@ -103,7 +103,7 @@
} }
@mixin session-h-title { @mixin session-h-title {
@include fontWasaBold(); @include fontDefaultBold();
} }
h1 { h1 {

Loading…
Cancel
Save