Skip to content

Instantly share code, notes, and snippets.

@splincode
Created February 18, 2025 14:35
Show Gist options
  • Save splincode/d20690ae8de23b1d3317b7a2684a6a3f to your computer and use it in GitHub Desktop.
Save splincode/d20690ae8de23b1d3317b7a2684a6a3f to your computer and use it in GitHub Desktop.
:root {
--tui-font-heading-h1: 700 calc(var(--tui-font-offset) + 3.125rem) / 1.12 'Tinkoff Sans';
--tui-font-heading-h2: 700 calc(var(--tui-font-offset) + 2.75rem) / 1.09 'Tinkoff Sans';
--tui-font-heading-h3: 500 calc(var(--tui-font-offset) + 2.25rem) / 1.11 'Tinkoff Sans';
--tui-font-heading-h4: 500 calc(var(--tui-font-offset) + 1.75rem) / 1.14 'Tinkoff Sans';
--tui-font-heading-h5: 500 calc(var(--tui-font-offset) + 1.5rem) / 1.17 'Tinkoff Sans';
--tui-font-heading-h6: 500 calc(var(--tui-font-offset) + 1.25rem) / 1.2 'Tinkoff Sans';
--tui-font-body-l-bold: 500 calc(var(--tui-font-offset) + 1.0625rem) / 1.65 'Neue Haas Unica W1G';
--tui-font-body-l: 400 calc(var(--tui-font-offset) + 1.0625rem) / 1.65 'Neue Haas Unica W1G';
--tui-font-body-m-bold: 500 calc(var(--tui-font-offset) + 0.9375rem) / 1.6 'Neue Haas Unica W1G';
--tui-font-body-m: 400 calc(var(--tui-font-offset) + 0.9375rem) / 1.6 'Neue Haas Unica W1G';
--tui-font-body-s-bold: 500 calc(var(--tui-font-offset) + 0.8125rem) / 1.54 'Neue Haas Unica W1G';
--tui-font-body-s: 400 calc(var(--tui-font-offset) + 0.8125rem) / 1.54 'Neue Haas Unica W1G';
--tui-font-body-xs-bold: 500 calc(var(--tui-font-offset) + 0.75rem) / 1.58 'Neue Haas Unica W1G';
--tui-font-body-xs: 400 calc(var(--tui-font-offset) + 0.75rem) / 1.58 'Neue Haas Unica W1G';
--tui-font-ui-l-bold: 500 calc(var(--tui-font-offset) + 1.0625rem) / 1.41 'Neue Haas Unica W1G';
--tui-font-ui-l: 400 calc(var(--tui-font-offset) + 1.0625rem) / 1.41 'Neue Haas Unica W1G';
--tui-font-ui-m-bold: 500 calc(var(--tui-font-offset) + 0.9375rem) / 1.33 'Neue Haas Unica W1G';
--tui-font-ui-m: 400 calc(var(--tui-font-offset) + 0.9375rem) / 1.33 'Neue Haas Unica W1G';
--tui-font-ui-s-bold: 500 calc(var(--tui-font-offset) + 0.8125rem) / 1.23 'Neue Haas Unica W1G';
--tui-font-ui-s: 400 calc(var(--tui-font-offset) + 0.8125rem) / 1.23 'Neue Haas Unica W1G';
--tui-font-ui-xs-bold: 500 calc(var(--tui-font-offset) + 0.75rem) / 1.25 'Neue Haas Unica W1G';
--tui-font-ui-xs: 400 calc(var(--tui-font-offset) + 0.75rem) / 1.25 'Neue Haas Unica W1G';
--tui-font-ui-2xs-bold: 500 calc(var(--tui-font-offset) + 0.6875rem) / 1.18 'Neue Haas Unica W1G';
--tui-font-ui-2xs: 400 calc(var(--tui-font-offset) + 0.6875rem) / 1.18 'Neue Haas Unica W1G';
--tui-font-ui-3xs-bold: 700 calc(var(--tui-font-offset) + 0.5625rem) / 1.44 'Neue Haas Unica W1G';
--tui-font-ui-3xs: 400 calc(var(--tui-font-offset) + 0.5625rem) / 1.44 'Neue Haas Unica W1G';
--tui-font-caps-s-bold: 500 calc(var(--tui-font-offset) + 0.8125rem) / 1.54 'Neue Haas Unica W1G';
--tui-font-caps-s: 400 calc(var(--tui-font-offset) + 0.8125rem) / 1.54 'Neue Haas Unica W1G';
--tui-font-caps-2xs-bold: 500 calc(var(--tui-font-offset) + 0.6875rem) / 1.45 'Neue Haas Unica W1G';
--tui-font-caps-2xs: 400 calc(var(--tui-font-offset) + 0.6875rem) / 1.45 'Neue Haas Unica W1G';
--tui-font-numbers-xl: 500 calc(var(--tui-font-offset) + 2.25rem) / 1.11 'Tinkoff Sans';
--tui-font-numbers-m: 500 calc(var(--tui-font-offset) + 1.25rem) / 1.2 'Tinkoff Sans';
}
[data-platform='ios'] {
--tui-font-heading-mobile-l: 700 calc(var(--tui-font-offset) + 1.875rem) / 1.2 'SF Pro';
--tui-font-heading-mobile-m: 700 calc(var(--tui-font-offset) + 1.25rem) / 1.2 'SF Pro';
--tui-font-heading-mobile-s-bold: 700 calc(var(--tui-font-offset) + 1.0625rem) / 1.18 'SF Pro';
--tui-font-heading-mobile-s: 600 calc(var(--tui-font-offset) + 1.0625rem) / 1.18 'SF Pro';
--tui-font-body-l-bold: 700 calc(var(--tui-font-offset) + 1.0625rem) / 1.41 'SF Pro';
--tui-font-body-l: 400 calc(var(--tui-font-offset) + 1.0625rem) / 1.41 'SF Pro';
--tui-font-body-m-bold: 600 calc(var(--tui-font-offset) + 0.9375rem) / 1.4 'SF Pro';
--tui-font-body-m: 400 calc(var(--tui-font-offset) + 0.9375rem) / 1.4 'SF Pro';
--tui-font-body-s-bold: 600 calc(var(--tui-font-offset) + 0.8125rem) / 1.38 'SF Pro';
--tui-font-body-s: 400 calc(var(--tui-font-offset) + 0.8125rem) / 1.38 'SF Pro';
--tui-font-body-xs-bold: 600 calc(var(--tui-font-offset) + 0.75rem) / 1.42 'SF Pro';
--tui-font-body-xs: 400 calc(var(--tui-font-offset) + 0.75rem) / 1.42 'SF Pro';
--tui-font-ui-l-bold: 700 calc(var(--tui-font-offset) + 1.0625rem) / 1.18 'SF Pro';
--tui-font-ui-l: 400 calc(var(--tui-font-offset) + 1.0625rem) / 1.18 'SF Pro';
--tui-font-ui-m-bold: 600 calc(var(--tui-font-offset) + 0.9375rem) / 1.2 'SF Pro';
--tui-font-ui-m: 400 calc(var(--tui-font-offset) + 0.9375rem) / 1.2 'SF Pro';
--tui-font-ui-s-bold: 600 calc(var(--tui-font-offset) + 0.8125rem) / 1.23 'SF Pro';
--tui-font-ui-s: 400 calc(var(--tui-font-offset) + 0.8125rem) / 1.23 'SF Pro';
--tui-font-ui-xs-bold: 600 calc(var(--tui-font-offset) + 0.75rem) / 1.17 'SF Pro';
--tui-font-ui-xs: 400 calc(var(--tui-font-offset) + 0.75rem) / 1.17 'SF Pro';
--tui-font-ui-2xs-bold: 600 calc(var(--tui-font-offset) + 0.6875rem) / 1.18 'SF Pro';
--tui-font-ui-2xs: 400 calc(var(--tui-font-offset) + 0.6875rem) / 1.18 'SF Pro';
--tui-font-ui-3xs-bold: 700 calc(var(--tui-font-offset) + 0.5625rem) / 1.22 'SF Pro';
--tui-font-ui-3xs: 400 calc(var(--tui-font-offset) + 0.5625rem) / 1.22 'SF Pro';
--tui-font-caps-s-bold: 500 calc(var(--tui-font-offset) + 0.8125rem) / 1.23 'SF Pro';
--tui-font-caps-s: 400 calc(var(--tui-font-offset) + 0.8125rem) / 1.23 'SF Pro';
--tui-font-caps-2xs-bold: 500 calc(var(--tui-font-offset) + 0.6875rem) / 1.18 'SF Pro';
--tui-font-caps-2xs: 400 calc(var(--tui-font-offset) + 0.6875rem) / 1.18 'SF Pro';
--tui-font-numbers-xl: 700 calc(var(--tui-font-offset) + 1.875rem) / 1.2 'SF Pro Rounded';
--tui-font-numbers-m: 700 calc(var(--tui-font-offset) + 1.25rem) / 1.2 'SF Pro Rounded';
}
[data-platform='android'] {
--tui-font-heading-mobile-l: 700 calc(var(--tui-font-offset) + 1.75rem) / 1.18 'Roboto';
--tui-font-heading-mobile-m: 700 calc(var(--tui-font-offset) + 1.25rem) / 1.15 'Roboto';
--tui-font-heading-mobile-s-bold: 700 calc(var(--tui-font-offset) + 1rem) / 1.19 'Roboto';
--tui-font-heading-mobile-s: 600 calc(var(--tui-font-offset) + 1rem) / 1.19 'Roboto';
--tui-font-body-l-bold: 700 calc(var(--tui-font-offset) + 1rem) / 1.44 'Roboto';
--tui-font-body-l: 400 calc(var(--tui-font-offset) + 1rem) / 1.44 'Roboto';
--tui-font-body-m-bold: 500 calc(var(--tui-font-offset) + 0.875rem) / 1.5 'Roboto';
--tui-font-body-m: 400 calc(var(--tui-font-offset) + 0.875rem) / 1.5 'Roboto';
--tui-font-body-s-bold: 500 calc(var(--tui-font-offset) + 0.8125rem) / 1.38 'Roboto';
--tui-font-body-s: 400 calc(var(--tui-font-offset) + 0.8125rem) / 1.38 'Roboto';
--tui-font-body-xs-bold: 500 calc(var(--tui-font-offset) + 0.75rem) / 1.42 'Roboto';
--tui-font-body-xs: 400 calc(var(--tui-font-offset) + 0.75rem) / 1.42 'Roboto';
--tui-font-ui-l-bold: 700 calc(var(--tui-font-offset) + 1rem) / 1.19 'Roboto';
--tui-font-ui-l: 400 calc(var(--tui-font-offset) + 1rem) / 1.19 'Roboto';
--tui-font-ui-m-bold: 500 calc(var(--tui-font-offset) + 0.875rem) / 1.14 'Roboto';
--tui-font-ui-m: 400 calc(var(--tui-font-offset) + 0.875rem) / 1.14 'Roboto';
--tui-font-ui-s-bold: 500 calc(var(--tui-font-offset) + 0.8125rem) / 1.15 'Roboto';
--tui-font-ui-s: 400 calc(var(--tui-font-offset) + 0.8125rem) / 1.15 'Roboto';
--tui-font-ui-xs-bold: 500 calc(var(--tui-font-offset) + 0.75rem) / 1.17 'Roboto';
--tui-font-ui-xs: 400 calc(var(--tui-font-offset) + 0.75rem) / 1.17 'Roboto';
--tui-font-ui-2xs-bold: 500 calc(var(--tui-font-offset) + 0.6875rem) / 1.18 'Roboto';
--tui-font-ui-2xs: 400 calc(var(--tui-font-offset) + 0.6875rem) / 1.18 'Roboto';
--tui-font-ui-3xs-bold: 600 calc(var(--tui-font-offset) + 0.5625rem) / 1.22 'Roboto';
--tui-font-ui-3xs: 400 calc(var(--tui-font-offset) + 0.5625rem) / 1.22 'Roboto';
--tui-font-caps-s-bold: 500 calc(var(--tui-font-offset) + 0.8125rem) / 1.15 'Roboto';
--tui-font-caps-s: 400 calc(var(--tui-font-offset) + 0.8125rem) / 1.15 'Roboto';
--tui-font-caps-2xs-bold: 500 calc(var(--tui-font-offset) + 0.6875rem) / 1.18 'Roboto';
--tui-font-caps-2xs: 400 calc(var(--tui-font-offset) + 0.6875rem) / 1.18 'Roboto';
--tui-font-numbers-xl: 700 calc(var(--tui-font-offset) + 1.875rem) / 1.17 'Roboto';
--tui-font-numbers-m: 500 calc(var(--tui-font-offset) + 1.25rem) / 1.15 'Roboto';
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment