diff --git a/frontend/resources/fonts/Vazirmatn-VariableFont.ttf b/frontend/resources/fonts/Vazirmatn-VariableFont.ttf new file mode 100644 index 000000000..22595c499 Binary files /dev/null and b/frontend/resources/fonts/Vazirmatn-VariableFont.ttf differ diff --git a/frontend/resources/fonts/WorkSans-VariableFont.ttf b/frontend/resources/fonts/WorkSans-VariableFont.ttf new file mode 100644 index 000000000..9a827989b Binary files /dev/null and b/frontend/resources/fonts/WorkSans-VariableFont.ttf differ diff --git a/frontend/resources/styles/common/base.scss b/frontend/resources/styles/common/base.scss index f764e045f..49f037129 100644 --- a/frontend/resources/styles/common/base.scss +++ b/frontend/resources/styles/common/base.scss @@ -19,7 +19,7 @@ $lh-133: 1.33; $size-4: 1rem; :root { - --font-family: "worksans", sans-serif; + --font-family: "worksans", "vazirmatn", sans-serif; } body { @@ -74,7 +74,7 @@ a { } button { - font-family: "worksans", sans-serif; + font-family: "worksans", "vazirmatn", sans-serif; } p { @@ -140,7 +140,7 @@ input[type="number"] { input, select { box-sizing: border-box; - font-family: "worksans", sans-serif; + font-family: "worksans", "vazirmatn", sans-serif; font-size: $fs14; margin-bottom: $size-4; -webkit-appearance: none; diff --git a/frontend/resources/styles/common/dependencies/fonts.scss b/frontend/resources/styles/common/dependencies/fonts.scss index 3837591fa..e4c64e7ec 100644 --- a/frontend/resources/styles/common/dependencies/fonts.scss +++ b/frontend/resources/styles/common/dependencies/fonts.scss @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS INC -@mixin font-face($style-name, $file, $weight: unquote("normal"), $style: unquote("normal")) { +@mixin font-face($style-name, $file, $unicode-range, $weight: unquote("normal"), $style: unquote("normal")) { $filepath: "/fonts/" + $file; @font-face { @@ -14,51 +14,39 @@ url($filepath + ".ttf") format("truetype"); font-weight: unquote($weight); font-style: unquote($style); + unicode-range: $unicode-range; } } -// Work Sans -@include font-face("worksans", "WorkSans-Thin", "100"); -@include font-face("worksans", "WorkSans-ThinItalic", "100", italic); -@include font-face("worksans", "WorkSans-ExtraLight", "200"); -@include font-face("worksans", "WorkSans-ExtraLightitalic", "200", italic); -@include font-face("worksans", "WorkSans-Light", "300"); -@include font-face("worksans", "WorkSans-LightItalic", "300", italic); -@include font-face("worksans", "WorkSans-Regular", normal); -@include font-face("worksans", "WorkSans-Italic", normal, italic); -@include font-face("worksans", "WorkSans-Medium", "500"); -@include font-face("worksans", "WorkSans-MediumItalic", "500", italic); -@include font-face("worksans", "WorkSans-SemiBold", "600"); -@include font-face("worksans", "WorkSans-SemiBoldItalic", "600", italic); -@include font-face("worksans", "WorkSans-Bold", bold); -@include font-face("worksans", "WorkSans-BoldItalic", bold, italic); -@include font-face("worksans", "WorkSans-Black", "900"); -@include font-face("worksans", "WorkSans-BlackItalic", "900", italic); +@mixin font-face-variable($style-name, $file, $unicode-range) { + $filepath: "/fonts/" + $file; + + @font-face { + font-family: "#{$style-name}"; + src: url($filepath + ".ttf") format("truetype"); + unicode-range: $unicode-range; + } +} + +$_arabic-unicode-list: "U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EFD-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1"; +$_latin-unicode-list: "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF"; + +@include font-face-variable("worksans", "WorkSans-VariableFont", $_latin-unicode-list); +@include font-face-variable("vazirmatn", "Vazirmatn-VariableFont", $_arabic-unicode-list); // Source Sans Pro -@include font-face("sourcesanspro", "sourcesanspro-extralight", "200"); -@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-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); +@include font-face("sourcesanspro", "sourcesanspro-extralight", $_latin-unicode-list, "200"); +@include font-face("sourcesanspro", "sourcesanspro-extralightitalic", $_latin-unicode-list, "200", italic); +@include font-face("sourcesanspro", "sourcesanspro-light", $_latin-unicode-list, "300"); +@include font-face("sourcesanspro", "sourcesanspro-lightitalic", $_latin-unicode-list, "300", italic); +@include font-face("sourcesanspro", "sourcesanspro-regular", $_latin-unicode-list, normal); +@include font-face("sourcesanspro", "sourcesanspro-italic", $_latin-unicode-list, normal, italic); +@include font-face("sourcesanspro", "sourcesanspro-semibold", $_latin-unicode-list, "600"); +@include font-face("sourcesanspro", "sourcesanspro-semibolditalic", $_latin-unicode-list, "600", italic); +@include font-face("sourcesanspro", "sourcesanspro-bold", $_latin-unicode-list, bold); +@include font-face("sourcesanspro", "sourcesanspro-bolditalic", $_latin-unicode-list, bold, italic); +@include font-face("sourcesanspro", "sourcesanspro-black", $_latin-unicode-list, "900"); +@include font-face("sourcesanspro", "sourcesanspro-blackitalic", $_latin-unicode-list, "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"); - -// Space mono -@include font-face("robotomono", "RobotoMono-Regular", normal); +// Roboto mono +@include font-face("robotomono", "RobotoMono-Regular", $_latin-unicode-list, normal); diff --git a/frontend/resources/styles/common/refactor/design-tokens.scss b/frontend/resources/styles/common/refactor/design-tokens.scss index a9c9b72cb..aefd62bfa 100644 --- a/frontend/resources/styles/common/refactor/design-tokens.scss +++ b/frontend/resources/styles/common/refactor/design-tokens.scss @@ -238,7 +238,7 @@ --assets-item-background-color-drag: transparent; --assets-item-border-color-drag: var(--color-accent-primary-muted); --assets-component-background-color: var(--color-canvas); - --assets-component-background-color-disabled: var(--df-secondary;); + --assets-component-background-color-disabled: var(--color-foreground-secondary); --assets-component-border-color: var(--color-background-tertiary); --assets-component-border-selected: var(--color-accent-tertiary); --assets-component-second-border-selected: var(--color-background-primary); diff --git a/frontend/resources/styles/common/refactor/mixins.scss b/frontend/resources/styles/common/refactor/mixins.scss index 1a9c06ab8..f2d734ccf 100644 --- a/frontend/resources/styles/common/refactor/mixins.scss +++ b/frontend/resources/styles/common/refactor/mixins.scss @@ -4,18 +4,6 @@ // // 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 flexCenter { display: flex; justify-content: center; @@ -47,7 +35,7 @@ } @mixin uppercaseTitleTipography { - font-family: "worksans", sans-serif; + font-family: "worksans", "vazirmatn", sans-serif; font-size: $fs-11; font-weight: $fw500; line-height: 1.2; @@ -55,28 +43,28 @@ } @mixin bigTitleTipography { - font-family: "worksans", sans-serif; + font-family: "worksans", "vazirmatn", sans-serif; font-size: $fs-24; font-weight: $fw400; line-height: 1.2; } @mixin medTitleTipography { - font-family: "worksans", sans-serif; + font-family: "worksans", "vazirmatn", sans-serif; font-size: $fs-20; font-weight: $fw400; line-height: 1.2; } @mixin smallTitleTipography { - font-family: "worksans", sans-serif; + font-family: "worksans", "vazirmatn", sans-serif; font-size: $fs-14; font-weight: $fw400; line-height: 1.2; } @mixin headlineLargeTypography { - font-family: "worksans", sans-serif; + font-family: "worksans", "vazirmatn", sans-serif; font-size: $fs-18; line-height: 1.2; text-transform: uppercase; @@ -84,7 +72,7 @@ } @mixin headlineMediumTypography { - font-family: "worksans", sans-serif; + font-family: "worksans", "vazirmatn", sans-serif; font-size: $fs-16; line-height: 1.4; text-transform: uppercase; @@ -92,7 +80,7 @@ } @mixin headlineSmallTypography { - font-family: "worksans", sans-serif; + font-family: "worksans", "vazirmatn", sans-serif; font-size: $fs-12; line-height: 1.2; text-transform: uppercase; @@ -100,21 +88,21 @@ } @mixin bodyLargeTypography { - font-family: "worksans", sans-serif; + font-family: "worksans", "vazirmatn", sans-serif; font-size: $fs-16; line-height: 1.5; font-weight: $fw400; } @mixin bodyMediumTypography { - font-family: "worksans", sans-serif; + font-family: "worksans", "vazirmatn", sans-serif; font-size: $fs-14; line-height: 1.4; font-weight: $fw400; } @mixin bodySmallTypography { - font-family: "worksans", sans-serif; + font-family: "worksans", "vazirmatn", sans-serif; font-size: $fs-12; font-weight: $fw400; line-height: 1.4; diff --git a/frontend/src/app/main/ui/components/button_link.scss b/frontend/src/app/main/ui/components/button_link.scss index 309685300..81b0538d9 100644 --- a/frontend/src/app/main/ui/components/button_link.scss +++ b/frontend/src/app/main/ui/components/button_link.scss @@ -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; diff --git a/frontend/src/app/main/ui/ds/typography.scss b/frontend/src/app/main/ui/ds/typography.scss new file mode 100644 index 000000000..4b8b2049a --- /dev/null +++ b/frontend/src/app/main/ui/ds/typography.scss @@ -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; + } +} diff --git a/frontend/src/app/main/ui/settings.scss b/frontend/src/app/main/ui/settings.scss index 6bae8499f..9b2f10851 100644 --- a/frontend/src/app/main/ui/settings.scss +++ b/frontend/src/app/main/ui/settings.scss @@ -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; diff --git a/frontend/src/app/main/ui/settings/profile.scss b/frontend/src/app/main/ui/settings/profile.scss index 62b81e3df..c1f4c41e7 100644 --- a/frontend/src/app/main/ui/settings/profile.scss +++ b/frontend/src/app/main/ui/settings/profile.scss @@ -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); diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss index e6234ffe4..02babb274 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss @@ -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); } diff --git a/frontend/src/app/main/ui/workspace/sidebar/shortcuts.scss b/frontend/src/app/main/ui/workspace/sidebar/shortcuts.scss index 54ca47a4a..e5353c9e5 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/shortcuts.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/shortcuts.scss @@ -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;