initial

2026-03-17 13:24:22 +03:00
commit 82e5ac9d81
554 changed files with 29637 additions and 0 deletions
--- a/layers/ui/styles/mixins/typography.scss
+++ b/layers/ui/styles/mixins/typography.scss
@@ -0,0 +1,141 @@
+@mixin font($size, $weight, $lineHeight, $namespace: null, $onlyVars: false) {
+  @if ($namespace) {
+    @if ($onlyVars) {
+      --#{$namespace}-font-size: #{$size};
+      --#{$namespace}-font-weight: #{$weight};
+      --#{$namespace}-line-height: #{$lineHeight};
+    } @else {
+      font-size: var(--#{$namespace}-font-size, $size);
+      font-weight: var(--#{$namespace}-font-weight, $weight);
+      line-height: var(--#{$namespace}-line-height, $lineHeight);
+    }
+  } @else {
+    font-size: $size;
+    font-weight: $weight;
+    line-height: $lineHeight;
+  }
+}
+
+/* Headline */
+@mixin h1($namespace: null, $onlyVars: false) {
+  @include font(32px, 700, 41px, $namespace, $onlyVars);
+}
+@mixin h2($namespace: null, $onlyVars: false) {
+  @include font(24px, 700, 31px, $namespace, $onlyVars);
+}
+@mixin h3($namespace: null, $onlyVars: false) {
+  @include font(18px, 600, 23px, $namespace, $onlyVars);
+}
+@mixin h4($namespace: null, $onlyVars: false) {
+  @include font(14px, 500, 18px, $namespace, $onlyVars);
+}
+@mixin h5($namespace: null, $onlyVars: false) {
+  @include font(12px, 500, 15px, $namespace, $onlyVars);
+}
+
+/**
+Text
+
+Format:
+txt-{size}-{weight}
+
+Sizes:
+l   - Large
+m   - Medium
+i   - Interim
+r   - Regular
+s   - Small
+t   - Tiny
+
+Weights:
+r   - Regular (or leaved empty)
+m   - Medium
+sb  - Semibold
+b   - Bold
+ */
+@mixin txt-l($namespace: null, $onlyVars: false) {
+  @include font(18px, 400, 23px, $namespace, $onlyVars);
+}
+@mixin txt-l-m($namespace: null, $onlyVars: false) {
+  @include font(18px, 500, 23px, $namespace, $onlyVars);
+}
+@mixin txt-l-sb($namespace: null, $onlyVars: false) {
+  @include font(18px, 600, 23px, $namespace, $onlyVars);
+}
+@mixin txt-l-b($namespace: null, $onlyVars: false) {
+  @include font(18px, 700, 23px, $namespace, $onlyVars);
+}
+
+@mixin txt-m($namespace: null, $onlyVars: false) {
+  @include font(16px, 400, 20px, $namespace, $onlyVars);
+}
+@mixin txt-m-m($namespace: null, $onlyVars: false) {
+  @include font(16px, 500, 20px, $namespace, $onlyVars);
+}
+@mixin txt-m-sb($namespace: null, $onlyVars: false) {
+  @include font(16px, 600, 20px, $namespace, $onlyVars);
+}
+@mixin txt-m-b($namespace: null, $onlyVars: false) {
+  @include font(16px, 700, 20px, $namespace, $onlyVars);
+}
+
+@mixin txt-i($namespace: null, $onlyVars: false) {
+  @include font(14px, 400, 18px, $namespace, $onlyVars);
+}
+@mixin txt-i-m($namespace: null, $onlyVars: false) {
+  @include font(14px, 500, 18px, $namespace, $onlyVars);
+}
+@mixin txt-i-sb($namespace: null, $onlyVars: false) {
+  @include font(14px, 600, 18px, $namespace, $onlyVars);
+}
+@mixin txt-i-b($namespace: null, $onlyVars: false) {
+  @include font(14px, 700, 18px, $namespace, $onlyVars);
+}
+
+@mixin txt-r($namespace: null, $onlyVars: false) {
+  @include font(12px, 400, 15px, $namespace, $onlyVars);
+}
+@mixin txt-r-m($namespace: null, $onlyVars: false) {
+  @include font(12px, 500, 15px, $namespace, $onlyVars);
+}
+@mixin txt-r-sb($namespace: null, $onlyVars: false) {
+  @include font(12px, 600, 15px, $namespace, $onlyVars);
+}
+@mixin txt-r-b($namespace: null, $onlyVars: false) {
+  @include font(12px, 700, 15px, $namespace, $onlyVars);
+}
+
+@mixin txt-s($namespace: null, $onlyVars: false) {
+  @include font(11px, 400, 14px, $namespace, $onlyVars);
+}
+@mixin txt-s-m($namespace: null, $onlyVars: false) {
+  @include font(11px, 500, 14px, $namespace, $onlyVars);
+}
+@mixin txt-s-sb($namespace: null, $onlyVars: false) {
+  @include font(11px, 600, 14px, $namespace, $onlyVars);
+}
+@mixin txt-s-b($namespace: null, $onlyVars: false) {
+  @include font(11px, 700, 14px, $namespace, $onlyVars);
+}
+
+@mixin txt-t($namespace: null, $onlyVars: false) {
+  @include font(10px, 400, 13px, $namespace, $onlyVars);
+}
+@mixin txt-t-m($namespace: null, $onlyVars: false) {
+  @include font(10px, 500, 13px, $namespace, $onlyVars);
+}
+@mixin txt-t-sb($namespace: null, $onlyVars: false) {
+  @include font(10px, 600, 13px, $namespace, $onlyVars);
+}
+@mixin txt-t-b($namespace: null, $onlyVars: false) {
+  @include font(10px, 700, 13px, $namespace, $onlyVars);
+}
+
+@mixin text-gradient {
+  @content;
+
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  text-fill-color: transparent;
+}