chore: Монорепо с общими пакетами
This commit is contained in:
262
packages/tach-typography/styles/typography-vars.scss
Normal file
262
packages/tach-typography/styles/typography-vars.scss
Normal file
@@ -0,0 +1,262 @@
|
||||
// Medium styles
|
||||
@mixin AppMediumLargeTitle {
|
||||
/* app/Medium/LargeTitle */
|
||||
font-family: Inter;
|
||||
font-size: 38px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 46px; /* 121.053% */
|
||||
}
|
||||
@mixin AppMediumTitle1 {
|
||||
/* app/Medium/Title1 */
|
||||
font-family: Inter;
|
||||
font-size: 28px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 34px; /* 121.429% */
|
||||
}
|
||||
@mixin AppMediumTitle2 {
|
||||
/* app/Medium/Title2 */
|
||||
font-family: Inter;
|
||||
font-size: 22px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 28px; /* 127.273% */
|
||||
}
|
||||
|
||||
@mixin AppMediumTitle3 {
|
||||
/* app/Medium/Title3 */
|
||||
font-family: Inter;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 26px; /* 130% */
|
||||
}
|
||||
@mixin AppMediumHeadline {
|
||||
/* app/Medium/Headline */
|
||||
font-family: Inter;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 24px; /* 150% */
|
||||
}
|
||||
@mixin AppMediumBody {
|
||||
/* app/Medium/Body */
|
||||
font-family: Inter;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 20px; /* 142.857% */
|
||||
}
|
||||
@mixin AppMediumInputs {
|
||||
/* app/Medium/Inputs */
|
||||
font-family: Inter;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 24px; /* 171.429% */
|
||||
}
|
||||
@mixin AppMediumSubheadline {
|
||||
/* app/Medium/Subheadline */
|
||||
font-family: Inter;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 18px; /* 128.571% */
|
||||
}
|
||||
@mixin AppMediumFootnoteUnderline {
|
||||
/* app/Medium/Footnote Underline */
|
||||
font-family: Inter;
|
||||
font-size: 13px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 18px;
|
||||
text-decoration-line: underline;
|
||||
text-decoration-style: solid;
|
||||
text-decoration-skip-ink: none;
|
||||
text-decoration-thickness: auto;
|
||||
text-underline-offset: auto;
|
||||
text-underline-position: from-font;
|
||||
}
|
||||
@mixin AppMediumFootnote {
|
||||
/* app/Medium/footnote */
|
||||
font-family: Inter;
|
||||
font-size: 13px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 18px; /* 138.462% */
|
||||
}
|
||||
@mixin AppMediumCaption {
|
||||
/* app/Medium/Caption */
|
||||
font-family: Inter;
|
||||
font-size: 10px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 12px; /* 120% */
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@mixin AppMediumCaption2 {
|
||||
/* app/Medium/Caption2 */
|
||||
font-family: Inter;
|
||||
font-size: 8px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 10px; /* 125% */
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@mixin AppMediumSubtext {
|
||||
text-align: center;
|
||||
font-family: Inter;
|
||||
font-size: 11px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 17px; /* 154.545% */
|
||||
}
|
||||
|
||||
@mixin AppMediumSubtextUnderline {
|
||||
font-family: Inter;
|
||||
font-size: 11px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 17px;
|
||||
text-decoration-line: underline;
|
||||
text-decoration-style: solid;
|
||||
text-decoration-skip-ink: none;
|
||||
text-decoration-thickness: auto;
|
||||
text-underline-offset: auto;
|
||||
text-underline-position: from-font;
|
||||
}
|
||||
|
||||
// Bold Styles
|
||||
@mixin AppBoldLargeTitle {
|
||||
@include AppMediumLargeTitle;
|
||||
font-weight: 700;
|
||||
}
|
||||
@mixin AppBoldTitle1 {
|
||||
@include AppMediumTitle1;
|
||||
font-weight: 700;
|
||||
}
|
||||
@mixin AppBoldTitle2 {
|
||||
@include AppMediumTitle2;
|
||||
font-weight: 700;
|
||||
}
|
||||
@mixin AppBoldTitle3 {
|
||||
@include AppMediumTitle3;
|
||||
font-weight: 700;
|
||||
}
|
||||
@mixin AppBoldHeadline {
|
||||
@include AppMediumHeadline;
|
||||
font-weight: 700;
|
||||
}
|
||||
@mixin AppBoldBody {
|
||||
@include AppMediumBody;
|
||||
font-weight: 700;
|
||||
}
|
||||
@mixin AppBoldInputs {
|
||||
@include AppBoldInputs;
|
||||
font-weight: 700;
|
||||
}
|
||||
@mixin AppBoldSubheadline {
|
||||
@include AppMediumSubheadline;
|
||||
font-weight: 700;
|
||||
}
|
||||
@mixin AppBoldFootnoteUnderline {
|
||||
@include AppMediumFootnoteUnderline;
|
||||
font-weight: 700;
|
||||
}
|
||||
@mixin AppBoldFootnote {
|
||||
@include AppMediumFootnote;
|
||||
font-weight: 700;
|
||||
}
|
||||
@mixin AppBoldCaption {
|
||||
@include AppMediumCaption;
|
||||
font-weight: 700;
|
||||
}
|
||||
@mixin AppBoldCaption2 {
|
||||
@include AppMediumCaption2;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
// Accent Styles
|
||||
@mixin AccentLargeTtl {
|
||||
font-family: Unbounded;
|
||||
font-size: 38px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 52px; /* 136.842% */
|
||||
|
||||
@media (max-width: 575px) {
|
||||
@include AccentFontH1;
|
||||
}
|
||||
}
|
||||
@mixin AccentFontH1 {
|
||||
/* Accent font/h1 */
|
||||
font-family: Unbounded;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 30px; /* 150% */
|
||||
}
|
||||
@mixin AccentFontH2 {
|
||||
/* Accent font/h2 */
|
||||
font-family: Unbounded;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 24px; /* 150% */
|
||||
}
|
||||
@mixin AccentFontSubttl {
|
||||
/* Accent font/subttl */
|
||||
font-family: Unbounded;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 22px; /* 157.143% */
|
||||
}
|
||||
@mixin AccentFontSubttl2 {
|
||||
/* Accent font/subttl2 */
|
||||
font-family: Unbounded;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 20px; /* 166.667% */
|
||||
}
|
||||
@mixin AccentFontCaption {
|
||||
/* Accent font/caption */
|
||||
font-family: Unbounded;
|
||||
font-size: 9px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 12px; /* 133.333% */
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@mixin AccentFontCaption2 {
|
||||
/* Accent font/caption2 */
|
||||
font-family: Unbounded;
|
||||
font-size: 7px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 10px; /* 142.857% */
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@mixin AccentFontRegularM {
|
||||
/* accent font/regularM */
|
||||
font-family: Unbounded;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px; /* 157.143% */
|
||||
|
||||
@media (max-width: 575px) {
|
||||
@include AccentFontRegularS;
|
||||
}
|
||||
}
|
||||
@mixin AccentFontRegularS {
|
||||
/* accent font/regularS */
|
||||
font-family: Unbounded;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 20px; /* 166.667% */
|
||||
}
|
||||
Reference in New Issue
Block a user