@ldmjs/ui 1.0.90 → 2.0.0-beta.1

package/dist/scss/_fonts.scss

@@ -11,3 +11,118 @@
 @font-face {
   @include mix-font-face('Roboto', Roboto-Regular);
 }
+
+@font-face {
+  @include mix-font-face('Roboto Medium', Roboto-Medium);
+}
+
+@font-face {
+  @include mix-font-face('Roboto Semi Bold', Roboto-SemiBold);
+}
+
+$font-size: 12px !default; // основной шрифт приложения
+
+$regular: "Roboto Regular", Arial, Helvetica, sans-serif;
+$semibold: "Roboto Semi Bold", Arial, Helvetica, sans-serif;
+$medium: "Roboto Medium", Arial, Helvetica, sans-serif;
+
+:root {
+  --font-size: #{$font-size}; // 12px
+  --caption-xs: calc(#{$font-size} - 4px); // 8px
+  --caption-s: calc(#{$font-size} - 2px); // 10px
+  --caption: #{#{$font-size}}; // 12px
+  --text-body: #{$font-size}; // 12px
+  --text-body-s: calc(#{$font-size} + 2px); // 14px
+  --text-body-m: calc(#{$font-size} + 4px); // 16px
+  --text-body-l: calc(#{$font-size} + 6px); // 18px
+  --text-body-x: calc(#{$font-size} + 8px); // 20px
+  --heading-6: calc(#{$font-size} + 10px); // 22px
+  --heading-5: calc(#{$font-size} * 2); // 24px
+  --heading-4: calc(#{$font-size} * 2 + 10px); // 34px
+  --heading-3: calc(#{$font-size} * 3 + 2px); // 38px
+  --heading-2: calc(#{$font-size} * 4 - 4px); // 44px
+  --heading-1: calc(#{$font-size} * 4 + 2px); // 50px
+  --regular: #{$regular};
+  --semibold: #{$semibold};
+  --medium: #{$medium};
+}
+
+html,
+body {
+  font-size: var(--font-size);
+}
+
+body {
+  h1,
+  .heading-1 {
+    font-size: var(--heading-1);
+    line-height: 56px;
+  }
+
+  h2,
+  .heading-2 {
+    font-size: var(--heading-2);
+    line-height: 52px;
+  }
+
+  h3,
+  .heading-3 {
+    font-size: var(--heading-3);
+    line-height: 48px;
+  }
+
+  h4,
+  .heading-4 {
+    font-size: var(--heading-4);
+    line-height: 44px;
+  }
+
+  h5,
+  .heading-5 {
+    font-size: var(--heading-5);
+    line-height: 36px;
+  }
+
+  h6,
+  .heading-6 {
+    font-size: var(--heading-6);
+    line-height: 32px;
+  }
+
+  .caption-s {
+    font-size: var(--caption-s);
+    line-height: 14px;
+  }
+
+  .caption {
+    font-size: var(--caption);
+    line-height: 16px;
+  }
+
+  .text-body {
+    font-size: var(--text-body);
+  }
+
+  .text-body-s {
+    font-size: var(--text-body-s);
+  }
+
+  .text-body-m {
+    font-size: var(--text-body-m);
+  }
+
+  .text-body-l {
+    font-size: var(--text-body-l);
+  }
+
+  .text-body-x {
+    font-size: var(--text-body-x);
+  }
+
+  .text-ellipsis {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}