mirror of
https://github.com/penpot/penpot.git
synced 2026-05-23 00:43:41 +00:00
142 lines
4.0 KiB
SCSS
142 lines
4.0 KiB
SCSS
// 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 "./utils.scss" as *;
|
|
|
|
$_font-weight-regular: 400;
|
|
$_font-weight-medium: 500;
|
|
|
|
$_font-lineheight-dense: 1.2;
|
|
$_font-lineheight-compact: 1.3;
|
|
$_font-lineheight-normal: 1.4;
|
|
|
|
$_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-normal;
|
|
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-normal;
|
|
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-normal;
|
|
font-size: $_fs-20;
|
|
}
|
|
|
|
@mixin _font-style-title-small {
|
|
font-family: "worksans", "vazirmatn", sans-serif;
|
|
font-optical-sizing: auto;
|
|
font-weight: $_font-weight-regular;
|
|
line-height: $_font-lineheight-dense;
|
|
font-size: $_fs-14;
|
|
}
|
|
|
|
@mixin _font-style-headline-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-headline-medium {
|
|
font-family: "worksans", "vazirmatn", sans-serif;
|
|
font-optical-sizing: auto;
|
|
font-weight: $_font-weight-regular;
|
|
line-height: $_font-lineheight-normal;
|
|
font-size: $_fs-16;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
@mixin _font-style-headline-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 == "title-small" {
|
|
@include _font-style-title-small;
|
|
} @else if $typography-name == "headline-large" {
|
|
@include _font-style-headline-large;
|
|
} @else if $typography-name == "headline-medium" {
|
|
@include _font-style-headline-medium;
|
|
} @else if $typography-name == "headline-small" {
|
|
@include _font-style-headline-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;
|
|
}
|
|
}
|