From fd296b9d45551df73a56f786038696810b46cda2 Mon Sep 17 00:00:00 2001
From: Julia Mnizhek <j.mnizhek@semrush.com>
Date: Fri, 14 Aug 2026 20:56:26 +0200
Subject: [PATCH 1/3] [typography] update styles

---
 semcore/link/src/style/link.shadow.css        |  2 +-
 .../src/style/blockquote.shadow.css           |  4 +-
 semcore/typography/src/style/list.shadow.css  |  8 +-
 semcore/typography/src/style/text.shadow.css  | 74 +++++++++----------
 .../typography/docs/examples/basic-usage.tsx  | 11 +--
 .../examples/font-size-and-line-height.tsx    |  3 +
 .../docs/examples/formattext-nested-lists.tsx | 29 +++++++-
 .../docs/examples/headings-other.tsx          |  4 +
 tools/theme/src/theme.ts                      |  2 +-
 .../style/design-tokens/design-tokens.json    | 49 ++++++++----
 10 files changed, 113 insertions(+), 73 deletions(-)

diff --git a/semcore/link/src/style/link.shadow.css b/semcore/link/src/style/link.shadow.css
index f85f7e0bd5..e6da7c0a4b 100644
--- a/semcore/link/src/style/link.shadow.css
+++ b/semcore/link/src/style/link.shadow.css
@@ -27,7 +27,7 @@ SLink {
 
   &[enableVisited]:visited,
   &[enableVisited]:visited:hover {
-    color: var(--intergalactic-text-link-visited, oklch(0.23 0.113 296));
+    color: var(--intergalactic-text-link-visited, oklch(0.53 0.26 296));
   }
 }
 
diff --git a/semcore/typography/src/style/blockquote.shadow.css b/semcore/typography/src/style/blockquote.shadow.css
index fd6bad801d..e2d4c1e812 100644
--- a/semcore/typography/src/style/blockquote.shadow.css
+++ b/semcore/typography/src/style/blockquote.shadow.css
@@ -9,7 +9,7 @@ SBlockquote {
 
 SDoubleQuotation {
   position: relative;
-  margin-right: var(--intergalactic-spacing-5x, 20px);
+  margin-right: var(--intergalactic-spacing-content-gap-xxlarge-extended, 20px);
   font-family: 'Times New Roman', serif;
   font-style: normal;
   /* disable-tokens-validator */
@@ -20,7 +20,7 @@ SDoubleQuotation {
 
 SAuthor {
   display: block;
-  margin-top: var(--intergalactic-spacing-4x, 16px);
+  margin-top: var(--intergalactic-spacing-content-gap-xxlarge, 16px);
   color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
   font-style: normal;
   font-size: var(--intergalactic-fs-300, 16px);
diff --git a/semcore/typography/src/style/list.shadow.css b/semcore/typography/src/style/list.shadow.css
index 394ff8c499..b173904a20 100644
--- a/semcore/typography/src/style/list.shadow.css
+++ b/semcore/typography/src/style/list.shadow.css
@@ -10,7 +10,7 @@ SContent {
 }
 
 SList SList {
-  margin-top: var(--intergalactic-spacing-2x, 8px);
+  margin-top: var(--intergalactic-spacing-content-gap-large, 8px);
 }
 
 SItem {
@@ -18,11 +18,11 @@ SItem {
 }
 
 SItem + SItem {
-  margin-top: var(--intergalactic-spacing-2x, 8px);
+  margin-top: var(--intergalactic-spacing-content-gap-large, 8px);
 }
 
 SMarker {
-  margin-right: var(--intergalactic-spacing-2x, 8px);
-  color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
+  margin-right: var(--intergalactic-spacing-content-gap-large, 8px);
+  color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
   line-height: normal;
 }
diff --git a/semcore/typography/src/style/text.shadow.css b/semcore/typography/src/style/text.shadow.css
index c1a01e998b..042cd65180 100644
--- a/semcore/typography/src/style/text.shadow.css
+++ b/semcore/typography/src/style/text.shadow.css
@@ -6,7 +6,7 @@ SText {
 
     & abbr {
       color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
-      text-decoration: underline dashed var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
+      text-decoration: underline dashed var(--intergalactic-text-hint, oklch(0.088 0.026 147.7 / 0.583));
 
       &:active,
       &:hover,
@@ -22,7 +22,7 @@ SText {
       background: none;
       outline: none;
       text-decoration: none;
-      color: var(--intergalactic-text-link, oklch(0.1 0.03 137 / 0.899)); /* TODO: --intergalactic-text-link-primary */
+      color: var(--intergalactic-text-link-primary, oklch(0.1 0.03 137 / 0.899));
       border-bottom-width: 1px;
       border-bottom-style: solid;
       border-color: transparent;
@@ -31,8 +31,8 @@ SText {
       &:hover {
         outline: none;
         text-decoration: none;
-        color: var(--intergalactic-text-link-hover-active, oklch(0.1 0.03 137 / 0.899)); /* TODO: --intergalactic-text-link-primary-hover-active */
-        border-color: var(--intergalactic-text-link-hover-active, oklch(0.1 0.03 137 / 0.899)); /* TODO: --intergalactic-text-link-primary-hover-active */
+        color: var(--intergalactic-text-link-primary-hover-active, oklch(0.1 0.03 137 / 0.899));
+        border-color: var(--intergalactic-text-link-primary-hover-active, oklch(0.1 0.03 137 / 0.899));
       }
 
       &:focus {
@@ -74,7 +74,7 @@ SText {
 
     & ol:not(ol[start], ol[reversed], ol[type]),
     & ul:not(ul[start], ul[reversed], ul[type]) {
-      margin: var(--intergalactic-spacing-2x, 8px) 0;
+      margin: var(--intergalactic-spacing-content-gap-large, 8px) 0;
       padding: 0;
       list-style: none;
       position: relative;
@@ -88,7 +88,7 @@ SText {
       }
 
       & li:not(SText) + li:not(SText) {
-        margin: var(--intergalactic-spacing-2x, 8px) 0 0 0;
+        margin: var(--intergalactic-spacing-content-gap-large, 8px) 0 0 0;
       }
     }
 
@@ -108,14 +108,14 @@ SText {
 
     & ol:not(ol[start], ol[reversed], ol[type]):has(+ p),
     & ul:not(ul[start], ul[reversed], ul[type]):has(+ p) {
-      margin-bottom: var(--intergalactic-spacing-4x, 16px);
+      margin-bottom: var(--intergalactic-spacing-content-gap-xxlarge, 16px);
     }
 
     & h1 {
       font-size: var(--intergalactic-fs-800, 48px);
       line-height: var(--intergalactic-lh-800, 117%);
       font-weight: var(--intergalactic-semi-bold, 600);
-      margin: 0 0 var(--intergalactic-spacing-6x, 24px) 0;
+      margin: 0 0 var(--intergalactic-spacing-content-gap-xxlarge-extended, 20px) 0;
 
       &:only-child {
         margin-bottom: 0;
@@ -126,7 +126,7 @@ SText {
       font-size: var(--intergalactic-fs-700, 36px);
       line-height: var(--intergalactic-lh-700, 110%);
       font-weight: var(--intergalactic-semi-bold, 600);
-      margin: 0 0 var(--intergalactic-spacing-4x, 16px) 0;
+      margin: 0 0 var(--intergalactic-spacing-content-gap-xxlarge, 16px) 0;
 
       &:only-child {
         margin-bottom: 0;
@@ -137,7 +137,7 @@ SText {
       font-size: var(--intergalactic-fs-600, 32px);
       line-height: var(--intergalactic-lh-600, 125%);
       font-weight: var(--intergalactic-semi-bold, 600);
-      margin: 0 0 var(--intergalactic-spacing-4x, 16px) 0;
+      margin: 0 0 var(--intergalactic-spacing-content-gap-xlarge, 12px) 0;
 
       &:only-child {
         margin-bottom: 0;
@@ -148,7 +148,7 @@ SText {
       font-size: var(--intergalactic-fs-500, 24px);
       line-height: var(--intergalactic-lh-500, 117%);
       font-weight: var(--intergalactic-semi-bold, 600);
-      margin: 0 0 var(--intergalactic-spacing-3x, 12px) 0;
+      margin: 0 0 var(--intergalactic-spacing-content-gap-xlarge, 12px) 0;
 
       &:only-child {
         margin-bottom: 0;
@@ -159,7 +159,7 @@ SText {
       font-size: var(--intergalactic-fs-400, 20px);
       line-height: var(--intergalactic-lh-400, 120%);
       font-weight: var(--intergalactic-semi-bold, 600);
-      margin: 0 0 var(--intergalactic-spacing-2x, 8px) 0;
+      margin: 0 0 var(--intergalactic-spacing-content-gap-large, 8px) 0;
 
       &:only-child {
         margin-bottom: 0;
@@ -170,7 +170,7 @@ SText {
       font-size: var(--intergalactic-fs-300, 16px);
       line-height: var(--intergalactic-lh-300, 150%);
       font-weight: var(--intergalactic-bold, 700);
-      margin: 0 0 var(--intergalactic-spacing-1x, 4px) 0;
+      margin: 0 0 var(--intergalactic-spacing-content-gap-small, 4px) 0;
 
       &:only-child {
         margin-bottom: 0;
@@ -197,7 +197,7 @@ SText {
     }
 
     & p {
-      margin: 0 0 var(--intergalactic-spacing-4x, 16px) 0;
+      margin: 0 0 var(--intergalactic-spacing-content-gap-xxlarge, 16px) 0;
 
       &:last-child {
         margin-bottom: 0;
@@ -205,15 +205,15 @@ SText {
     }
 
     & li {
-      padding-left: calc(var(--intergalactic-spacing-4x, 16px) + var(--intergalactic-spacing-05x, 2px));
+      padding-left: calc(var(--intergalactic-spacing-content-gap-xxlarge, 16px) + var(--intergalactic-spacing-content-gap-xsmall, 2px));
     }
 
     & ol ol li {
-      padding-left: calc(var(--intergalactic-spacing-6x, 24px) + var(--intergalactic-spacing-05x, 2px));
+      padding-left: calc(var(--intergalactic-spacing-content-gap-xxxlarge, 24px) + var(--intergalactic-spacing-content-gap-xsmall, 2px));
     }
 
     & ol ol ol li {
-      padding-left: calc(var(--intergalactic-spacing-8x, 32px) + var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px));
+      padding-left: calc(var(--intergalactic-spacing-content-gap-xxxlarge, 24px) + var(--intergalactic-spacing-content-gap-xxlarge, 16px));
     }
 
     & ul li:before {
@@ -221,8 +221,8 @@ SText {
       height: 4px;
       border-radius: 50%;
       /* disable-tokens-validator */
-      margin-top: calc(var(--intergalactic-spacing-2x, 8px) - 1px);
-      margin-left: var(--intergalactic-spacing-05x, 2px);
+      margin-top: calc(var(--intergalactic-spacing-content-gap-large, 8px) - 1px);
+      margin-left: var(--intergalactic-spacing-content-gap-xsmall, 2px);
     }
   }
 }
@@ -264,7 +264,7 @@ SText[size='100'] {
     }
 
     & p {
-      margin: 0 0 calc(var(--intergalactic-spacing-4x, 16px) + var(--intergalactic-spacing-05x, 2px)) 0;
+      margin: 0 0 calc(var(--intergalactic-spacing-content-gap-xxlarge, 16px) + var(--intergalactic-spacing-content-gap-xsmall, 2px)) 0;
 
       &:last-child {
         margin-bottom: 0;
@@ -272,23 +272,23 @@ SText[size='100'] {
     }
 
     & li {
-      padding-left: calc(var(--intergalactic-spacing-4x, 16px) + var(--intergalactic-spacing-05x, 2px));
+      padding-left: calc(var(--intergalactic-spacing-content-padding-large, 16px) + var(--intergalactic-spacing-content-padding-xxsmall, 2px));
     }
 
     & ol ol li {
-      padding-left: calc(var(--intergalactic-spacing-6x, 24px) + var(--intergalactic-spacing-05x, 2px));
+      padding-left: calc(var(--intergalactic-spacing-content-padding-xlarge-extended, 24px) + var(--intergalactic-spacing-content-padding-xxsmall, 2px));
     }
 
     & ol ol ol li {
-      padding-left: calc(var(--intergalactic-spacing-8x, 32px) + var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px));
+      padding-left: calc(var(--intergalactic-spacing-content-padding-xlarge-extended, 24px) + var(--intergalactic-spacing-content-padding-xlarge, 20px));
     }
 
     & ul li:before {
       width: 3px;
       height: 3px;
       border-radius: 50%;
-      margin-top: var(--intergalactic-spacing-2x, 8px);
-      margin-left: var(--intergalactic-spacing-05x, 2px);
+      margin-top: var(--intergalactic-spacing-content-gap-large, 8px);
+      margin-left: var(--intergalactic-spacing-content-gap-xsmall, 2px);
     }
   }
 }
@@ -305,7 +305,7 @@ SText[size='200'] {
     }
 
     & p {
-      margin: 0 0 var(--intergalactic-spacing-3x, 12px) 0;
+      margin: 0 0 var(--intergalactic-spacing-content-gap-xlarge, 12px) 0;
 
       &:last-child {
         margin-bottom: 0;
@@ -313,15 +313,15 @@ SText[size='200'] {
     }
 
     & li {
-      padding-left: calc(var(--intergalactic-spacing-4x, 16px) + var(--intergalactic-spacing-05x, 2px));
+      padding-left: calc(var(--intergalactic-spacing-content-padding-large, 16px) + var(--intergalactic-spacing-content-padding-xxsmall, 2px));
     }
 
     & ol ol li {
-      padding-left: calc(var(--intergalactic-spacing-6x, 24px) + var(--intergalactic-spacing-05x, 2px));
+      padding-left: calc(var(--intergalactic-spacing-content-padding-xlarge-extended, 24px) + var(--intergalactic-spacing-content-padding-xxsmall, 2px));
     }
 
     & ol ol ol li {
-      padding-left: calc(var(--intergalactic-spacing-8x, 32px) + var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px));
+      padding-left: calc(var(--intergalactic-spacing-content-padding-xlarge-extended, 24px) + var(--intergalactic-spacing-content-padding-xlarge, 20px));
     }
 
     & ul li:before {
@@ -329,8 +329,8 @@ SText[size='200'] {
       height: 4px;
       border-radius: 50%;
       /* disable-tokens-validator */
-      margin-top: calc(var(--intergalactic-spacing-2x, 8px) - 1px);
-      margin-left: var(--intergalactic-spacing-05x, 2px);
+      margin-top: calc(var(--intergalactic-spacing-content-gap-large, 8px) - 1px);
+      margin-left: var(--intergalactic-spacing-content-gap-xsmall, 2px);
     }
   }
 }
@@ -347,7 +347,7 @@ SText[size='300'] {
     }
 
     & p {
-      margin: 0 0 var(--intergalactic-spacing-4x, 16px) 0;
+      margin: 0 0 var(--intergalactic-spacing-content-gap-xxlarge, 16px) 0;
 
       &:last-child {
         margin-bottom: 0;
@@ -355,23 +355,23 @@ SText[size='300'] {
     }
 
     & li {
-      padding-left: calc(var(--intergalactic-spacing-4x, 16px) + var(--intergalactic-spacing-05x, 2px));
+      padding-left: calc(var(--intergalactic-spacing-content-padding-large, 16px) + var(--intergalactic-spacing-content-padding-xxsmall, 2px));
     }
 
     & ol ol li {
-      padding-left: calc(var(--intergalactic-spacing-6x, 24px) + var(--intergalactic-spacing-05x, 2px));
+      padding-left: calc(var(--intergalactic-spacing-content-padding-xlarge-extended, 24px) + var(--intergalactic-spacing-content-padding-xxsmall, 2px));
     }
 
     & ol ol ol li {
-      padding-left: calc(var(--intergalactic-spacing-8x, 32px) + var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px));
+      padding-left: calc(var(--intergalactic-spacing-content-padding-xlarge-extended, 24px) + var(--intergalactic-spacing-content-padding-xlarge, 20px));
     }
 
     & ul li:before {
       width: 5px;
       height: 5px;
       border-radius: 50%;
-      margin-top: calc(var(--intergalactic-spacing-2x, 8px) + var(--intergalactic-spacing-05x, 2px));
-      margin-left: var(--intergalactic-spacing-05x, 2px);
+      margin-top: calc(var(--intergalactic-spacing-content-gap-large, 8px) + var(--intergalactic-spacing-content-gap-xsmall, 2px));
+      margin-left: var(--intergalactic-spacing-content-gap-xsmall, 2px);
     }
   }
 }
diff --git a/stories/components/typography/docs/examples/basic-usage.tsx b/stories/components/typography/docs/examples/basic-usage.tsx
index 1f381ef1cb..07a4bce796 100644
--- a/stories/components/typography/docs/examples/basic-usage.tsx
+++ b/stories/components/typography/docs/examples/basic-usage.tsx
@@ -1,9 +1,9 @@
-import { Blockquote, List, Text } from '@semcore/ui/typography';
+import { List, Text } from '@semcore/ui/typography';
 import React from 'react';
 
 const Demo = () => (
   <div>
-    <Text size={800} tag='h1' fontWeight={600} mb={6} mt={0}>
+    <Text size={800} tag='h1' fontWeight={600} mb={5} mt={0}>
       H1, 48px, --fs-800
     </Text>
     <Text size={300} tag='p' mb={2} mt={0}>
@@ -15,7 +15,7 @@ const Demo = () => (
     <Text tag='p' mb={2} mt={0}>
       Paragraph example.
     </Text>
-    <Text size={600} tag='h3' fontWeight={600} mb={4} mt={10}>
+    <Text size={600} tag='h3' fontWeight={600} mb={3} mt={10}>
       H3, 32px, --fs-600
     </Text>
     <Text tag='p' mb={2} mt={0}>
@@ -58,11 +58,6 @@ const Demo = () => (
         Carpe diem. Seize the day, boys. Make your lives extraordinary.
       </List.Item>
     </List>
-    <Blockquote author='Roy Batty' my={4.5}>
-      I've seen things you people wouldn't believe. Attack ships on fire off the shoulder of Orion.
-      I watched C-beams glitter in the dark near the Tannhäuser Gate. All those moments will be lost
-      in time, like tears in rain. Time to die.
-    </Blockquote>
   </div>
 );
 
diff --git a/stories/components/typography/docs/examples/font-size-and-line-height.tsx b/stories/components/typography/docs/examples/font-size-and-line-height.tsx
index 1a638fbb67..8fd39acbb2 100644
--- a/stories/components/typography/docs/examples/font-size-and-line-height.tsx
+++ b/stories/components/typography/docs/examples/font-size-and-line-height.tsx
@@ -12,6 +12,9 @@ const Demo = () => (
     <Text size={300} tag='p'>
       16px / --fs-300,--lh-300
     </Text>
+    <Text size={350} tag='p'>
+      18px / --fs-350,--lh-350
+    </Text>
     <Text size={400} tag='p'>
       20px / --fs-400,--lh-400
     </Text>
diff --git a/stories/components/typography/docs/examples/formattext-nested-lists.tsx b/stories/components/typography/docs/examples/formattext-nested-lists.tsx
index 2b408ba267..3d9e708035 100644
--- a/stories/components/typography/docs/examples/formattext-nested-lists.tsx
+++ b/stories/components/typography/docs/examples/formattext-nested-lists.tsx
@@ -7,13 +7,34 @@ type ExampleProps = {
 
 const Demo = (props: ExampleProps) => (
   <Text formatTags={props.formatTags}>
-    <ol start={1}>
+    <ol>
       <li>List item one</li>
       <li>
-        List item two with subitems:
+        List item two with nested ordered list:
+        <ol>
+          <li>Level 2 item</li>
+          <li>
+            Level 2 item with nested list:
+            <ol>
+              <li>Level 3 item</li>
+              <li>Level 3 item</li>
+              <li>Level 3 item</li>
+            </ol>
+          </li>
+          <li>Level 2 item</li>
+        </ol>
+      </li>
+      <li>
+        List item three with nested unordered list:
         <ul>
-          <li>Subitem 1</li>
-          <li>Subitem 2</li>
+          <li>Unordered subitem</li>
+          <li>
+            Unordered subitem with nested list:
+            <ul>
+              <li>Deep unordered subitem</li>
+              <li>Deep unordered subitem</li>
+            </ul>
+          </li>
         </ul>
       </li>
       <li>Final list item</li>
diff --git a/stories/components/typography/docs/examples/headings-other.tsx b/stories/components/typography/docs/examples/headings-other.tsx
index 40baf63373..4c6fafd94d 100644
--- a/stories/components/typography/docs/examples/headings-other.tsx
+++ b/stories/components/typography/docs/examples/headings-other.tsx
@@ -7,12 +7,16 @@ const Demo = () => (
     <Text size={400} mb={2} mt={0} semibold>
       20px / --fs-400,--lh-400
     </Text>
+    <Text size={350} mb={3} mt={0} semibold>
+      18px / --fs-350,--lh-350
+    </Text>
     <Text size={300} mb={1} mt={0} bold>
       16px / --fs-300,--lh-300
     </Text>
     <Text size={200} mb={1} mt={0} bold>
       14px / --fs-200,--lh-200
     </Text>
+
   </Flex>
 );
 
diff --git a/tools/theme/src/theme.ts b/tools/theme/src/theme.ts
index 5c0f7667de..e0d0c042c1 100644
--- a/tools/theme/src/theme.ts
+++ b/tools/theme/src/theme.ts
@@ -1893,7 +1893,7 @@ export const theme: Theme = {
         description: 'Hover and active states for the accent link.',
       },
       text_link_visited: {
-        value: violet.at(L_TEXT_PRIMARY),
+        value: violet.at(L_TEXT_SECONDARY),
         description: 'Visited link state so users can tell visited destinations apart from default links.',
       },
       text_placeholder: {
diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json
index 6feac33620..f1e0220e1d 100644
--- a/website/docs/style/design-tokens/design-tokens.json
+++ b/website/docs/style/design-tokens/design-tokens.json
@@ -2792,7 +2792,8 @@
     "description": "Supplementary helper text near controls (short guidance), distinct from placeholder text inside inputs.",
     "components": [
       "button",
-      "d3-chart"
+      "d3-chart",
+      "typography"
     ]
   },
   {
@@ -2867,7 +2868,8 @@
     "value": "oklch(0.1 0.03 137 / 0.899)",
     "description": "Default primary link color.",
     "components": [
-      "link"
+      "link",
+      "typography"
     ]
   },
   {
@@ -2875,7 +2877,8 @@
     "value": "oklch(0.1 0.03 137 / 0.899)",
     "description": "Hover and active states for the primary link.",
     "components": [
-      "link"
+      "link",
+      "typography"
     ]
   },
   {
@@ -2926,7 +2929,7 @@
   },
   {
     "name": "--intergalactic-text-link-visited",
-    "value": "oklch(0.23 0.113 296)",
+    "value": "oklch(0.53 0.26 296)",
     "description": "Visited link state so users can tell visited destinations apart from default links.",
     "components": [
       "link"
@@ -3294,7 +3297,8 @@
       "counter",
       "input-tags",
       "notice-bubble",
-      "pills"
+      "pills",
+      "typography"
     ]
   },
   {
@@ -3358,7 +3362,8 @@
     "components": [
       "bulk-textarea",
       "feature-popover",
-      "notice-bubble"
+      "notice-bubble",
+      "typography"
     ]
   },
   {
@@ -3367,14 +3372,17 @@
     "description": "Extra large padding for content inside controls and surfaces.",
     "components": [
       "bulk-textarea",
-      "card"
+      "card",
+      "typography"
     ]
   },
   {
     "name": "--intergalactic-spacing-content-padding-xlarge-extended",
     "value": "24px",
     "description": "Extended extra large padding for content inside controls and surfaces.",
-    "components": []
+    "components": [
+      "typography"
+    ]
   },
   {
     "name": "--intergalactic-spacing-content-padding-xxlarge",
@@ -3389,8 +3397,10 @@
   {
     "name": "--intergalactic-spacing-content-gap-xsmall",
     "value": "2px",
-    "description": "Small gap between content elements inside controls, rows, or columns.",
-    "components": []
+    "description": "Extra small gap between content elements inside controls, rows, or columns.",
+    "components": [
+      "typography"
+    ]
   },
   {
     "name": "--intergalactic-spacing-content-gap-small",
@@ -3403,7 +3413,8 @@
       "dropdown-menu",
       "inline-input",
       "pagination",
-      "tag"
+      "tag",
+      "typography"
     ]
   },
   {
@@ -3435,7 +3446,8 @@
       "pagination",
       "radio",
       "select",
-      "tag"
+      "tag",
+      "typography"
     ]
   },
   {
@@ -3444,7 +3456,8 @@
     "description": "Extra large gap between elements, rows, or columns.",
     "components": [
       "notice-bubble",
-      "pagination"
+      "pagination",
+      "typography"
     ]
   },
   {
@@ -3452,7 +3465,8 @@
     "value": "16px",
     "description": "2x large gap between elements, rows, or columns.",
     "components": [
-      "pagination"
+      "pagination",
+      "typography"
     ]
   },
   {
@@ -3460,14 +3474,17 @@
     "value": "20px",
     "description": "Extended 2x large gap between elements, rows, or columns.",
     "components": [
-      "pagination"
+      "pagination",
+      "typography"
     ]
   },
   {
     "name": "--intergalactic-spacing-content-gap-xxxlarge",
     "value": "24px",
     "description": "3x large gap between elements, rows, or columns.",
-    "components": []
+    "components": [
+      "typography"
+    ]
   },
   {
     "name": "--intergalactic-spacing-layout-padding-desktop",

From 2599be0674867085c06161395cfbf4c093a1448d Mon Sep 17 00:00:00 2001
From: Julia Mnizhek <j.mnizhek@semrush.com>
Date: Mon, 17 Aug 2026 11:30:49 +0200
Subject: [PATCH 2/3] [theme] round lineHeight variables

---
 .../src/components/hint/style/hint.shadow.css |   2 +-
 .../src/style/base-trigger.shadow.css         |   4 +-
 .../src/style/breadcrumbs.shadow.css          |   2 +-
 .../InputField/inputField.shadow.css          |   4 +-
 .../src/component/Button/button.shadow.css    |   4 +-
 semcore/card/src/style/card.shadow.css        |   2 +-
 .../checkbox/src/style/checkbox.shadow.css    |   4 +-
 .../LegendItem/legend-item.shadow.css         |   4 +-
 semcore/d3-chart/src/style/bar.shadow.css     |   6 +-
 semcore/d3-chart/src/style/donut.shadow.css   |   2 +-
 semcore/d3-chart/src/style/tooltip.shadow.css |   2 +-
 .../src/components/Body/style.shadow.css      |   2 +-
 .../src/components/Head/style.shadow.css      |   2 +-
 .../dropdown/src/style/dropdown.shadow.css    |   4 +-
 semcore/errors/src/style/errors.shadow.css    |   4 +-
 .../src/style/feedback-rating.shadow.css      |   2 +-
 .../src/style/fullscreen-modal.shadow.css     |   4 +-
 semcore/modal/src/style/modal.shadow.css      |   2 +-
 .../src/style/notice-bubble.shadow.css        |   2 +-
 semcore/notice/src/style/notice.shadow.css    |   2 +-
 .../src/style/pagination.shadow.css           |   4 +-
 .../product-head/src/style/info.shadow.css    |   2 +-
 .../src/style/product-head.shadow.css         |   2 +-
 .../product-head/src/style/title.shadow.css   |   2 +-
 semcore/slider/src/style/slider.shadow.css    |   2 +-
 semcore/switch/src/style/switch.shadow.css    |   6 +-
 semcore/tag/src/style/tag.shadow.css          |   6 +-
 .../textarea/src/style/textarea.shadow.css    |   4 +-
 semcore/tooltip/src/style/tooltip.shadow.css  |   2 +-
 .../src/style/blockquote.shadow.css           |   4 +-
 semcore/typography/src/style/text.shadow.css  |  42 +++----
 .../src/style/widget-empty.shadow.css         |   4 +-
 semcore/wizard/src/style/wizard.shadow.css    |   4 +-
 .../button/advanced/button.stories.tsx        |  26 ++++
 .../advanced/examples/button-playground.tsx   | 111 ++++++++++++++++++
 tools/theme/src/theme.ts                      |  18 +--
 .../docs/style/design-tokens/base-tokens.json |  18 +--
 37 files changed, 227 insertions(+), 90 deletions(-)
 create mode 100644 stories/components/button/advanced/examples/button-playground.tsx

diff --git a/semcore/base-components/src/components/hint/style/hint.shadow.css b/semcore/base-components/src/components/hint/style/hint.shadow.css
index 63c65c796f..d79dcbc21a 100644
--- a/semcore/base-components/src/components/hint/style/hint.shadow.css
+++ b/semcore/base-components/src/components/hint/style/hint.shadow.css
@@ -14,7 +14,7 @@ SHintPopper {
   padding: var(--intergalactic-spacing-content-padding-xsmall, 4px) var(--intergalactic-spacing-content-padding-small, 8px);
   border-radius: var(--intergalactic-rounded-small, 4px);
   font-size: var(--intergalactic-fs-100, 12px);
-  line-height: var(--intergalactic-lh-100, 133%);
+  line-height: var(--intergalactic-lh-100, 1.3334);
   box-shadow: var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px oklch(0.176 0.033 175.7 / 0.07));
 
   animation-fill-mode: both;
diff --git a/semcore/base-trigger/src/style/base-trigger.shadow.css b/semcore/base-trigger/src/style/base-trigger.shadow.css
index fcc36a2e3f..0c82c65d0a 100644
--- a/semcore/base-trigger/src/style/base-trigger.shadow.css
+++ b/semcore/base-trigger/src/style/base-trigger.shadow.css
@@ -99,14 +99,14 @@ SBaseTrigger[size='m'] {
   min-width: var(--intergalactic-form-control-m, 32px);
   height: var(--intergalactic-form-control-m, 32px);
   font-size: var(--intergalactic-fs-200, 14px);
-  line-height: var(--intergalactic-lh-200, 142%);
+  line-height: var(--intergalactic-lh-200, 1.4286);
 }
 
 SBaseTrigger[size='l'] {
   min-width: var(--intergalactic-form-control-l, 44px);
   height: var(--intergalactic-form-control-l, 44px);
   font-size: var(--intergalactic-fs-300, 16px);
-  line-height: var(--intergalactic-lh-300, 150%);
+  line-height: var(--intergalactic-lh-300, 1.5);
 }
 
 SBaseTrigger[neighborLocation='right'] {
diff --git a/semcore/breadcrumbs/src/style/breadcrumbs.shadow.css b/semcore/breadcrumbs/src/style/breadcrumbs.shadow.css
index b852876975..cc228bc023 100644
--- a/semcore/breadcrumbs/src/style/breadcrumbs.shadow.css
+++ b/semcore/breadcrumbs/src/style/breadcrumbs.shadow.css
@@ -30,7 +30,7 @@ SBreadcrumbs {
         display: block;
         position: relative;
         font-size: var(--intergalactic-fs-200, 14px);
-        line-height: var(--intergalactic-lh-200, 142%);
+        line-height: var(--intergalactic-lh-200, 1.4286);
         color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
         text-decoration: none;
         cursor: pointer;
diff --git a/semcore/bulk-textarea/src/components/InputField/inputField.shadow.css b/semcore/bulk-textarea/src/components/InputField/inputField.shadow.css
index a71898adbb..10ffc1baa8 100644
--- a/semcore/bulk-textarea/src/components/InputField/inputField.shadow.css
+++ b/semcore/bulk-textarea/src/components/InputField/inputField.shadow.css
@@ -116,7 +116,7 @@ SInputField[showErrors]>ol[aria-invalid]>li[aria-invalid]:after {
 SInputField[size='m']>ol {
   padding: var(--intergalactic-spacing-content-padding-xsmall, 4px) var(--intergalactic-spacing-content-padding-large, 16px) var(--intergalactic-spacing-content-padding-xsmall, 4px) var(--intergalactic-spacing-content-padding-medium, 12px);
   font-size: var(--intergalactic-fs-200, 14px);
-  line-height: var(--intergalactic-lh-200, 142%);
+  line-height: var(--intergalactic-lh-200, 1.4286);
 
   min-height: calc(var(--minRows) * 20px);
   /* (maxRowsLength - 1 * (rowsHeight + marginBottom)) + lastRowHeight */
@@ -134,7 +134,7 @@ SInputField[size='m']>ol {
 SInputField[size='l']>ol {
   padding: var(--intergalactic-spacing-content-padding-small, 8px) var(--intergalactic-spacing-content-padding-large, 16px) var(--intergalactic-spacing-content-padding-small, 8px) var(--intergalactic-spacing-content-padding-medium, 12px);
   font-size: var(--intergalactic-fs-300, 16px);
-  line-height: var(--intergalactic-lh-300, 150%);
+  line-height: var(--intergalactic-lh-300, 1.5);
 
   min-height: calc(var(--minRows) * 24px);
   max-height: calc((var(--maxRows) - 1) * (24px + var(--intergalactic-spacing-1x, 4px)) + 20px);
diff --git a/semcore/button/src/component/Button/button.shadow.css b/semcore/button/src/component/Button/button.shadow.css
index df5b6bb96b..2d8717b6ef 100644
--- a/semcore/button/src/component/Button/button.shadow.css
+++ b/semcore/button/src/component/Button/button.shadow.css
@@ -317,7 +317,7 @@ SText {
 SText[size='m'] {
   margin-left: var(--intergalactic-spacing-content-gap-medium, 6px);
   margin-right: var(--intergalactic-spacing-content-gap-medium, 6px);
-  line-height: var(--intergalactic-lh-200, 142%);
+  line-height: var(--intergalactic-lh-200, 1.4286);
 
   &:only-child {
     margin-left: var(--intergalactic-spacing-content-padding-medium, 12px);
@@ -336,7 +336,7 @@ SText[size='m'] {
 SText[size='l'] {
   margin-left: var(--intergalactic-spacing-content-gap-medium, 6px);
   margin-right: var(--intergalactic-spacing-content-gap-medium, 6px);
-  line-height: var(--intergalactic-lh-300, 150%);
+  line-height: var(--intergalactic-lh-300, 1.5);
 
   &:only-child {
     margin-left: var(--intergalactic-spacing-content-padding-medium, 12px);
diff --git a/semcore/card/src/style/card.shadow.css b/semcore/card/src/style/card.shadow.css
index fe563e60ef..4106ae5ad4 100644
--- a/semcore/card/src/style/card.shadow.css
+++ b/semcore/card/src/style/card.shadow.css
@@ -19,7 +19,7 @@ SCard {
     display: block;
     margin: 0 0 var(--intergalactic-spacing-1x, 4px) 0;
     font-size: var(--intergalactic-fs-200, 14px);
-    line-height: var(--intergalactic-lh-200, 142%);
+    line-height: var(--intergalactic-lh-200, 1.4286);
     color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
   }
 
diff --git a/semcore/checkbox/src/style/checkbox.shadow.css b/semcore/checkbox/src/style/checkbox.shadow.css
index e6b543b410..be89f82cb9 100644
--- a/semcore/checkbox/src/style/checkbox.shadow.css
+++ b/semcore/checkbox/src/style/checkbox.shadow.css
@@ -95,12 +95,12 @@ SCheckbox[size='m'] {
 
 SText[size='l'] {
   font-size: var(--intergalactic-fs-300, 16px);
-  line-height: var(--intergalactic-lh-300, 150%);
+  line-height: var(--intergalactic-lh-300, 1.5);
 }
 
 SText[size='m'] {
   font-size: var(--intergalactic-fs-200, 14px);
-  line-height: var(--intergalactic-lh-200, 142%);
+  line-height: var(--intergalactic-lh-200, 1.4286);
 }
 
 SControl[checked]~SCheckbox[state='normal']:before,
diff --git a/semcore/d3-chart/src/component/ChartLegend/LegendItem/legend-item.shadow.css b/semcore/d3-chart/src/component/ChartLegend/LegendItem/legend-item.shadow.css
index 47bf705c45..493508f930 100644
--- a/semcore/d3-chart/src/component/ChartLegend/LegendItem/legend-item.shadow.css
+++ b/semcore/d3-chart/src/component/ChartLegend/LegendItem/legend-item.shadow.css
@@ -85,14 +85,14 @@ SLabel[size='l'],
 SAdditionalLabel[size='l'],
 SCount[size='l'] {
   font-size: var(--intergalactic-fs-300, 16px);
-  line-height: var(--intergalactic-lh-300, 150%);
+  line-height: var(--intergalactic-lh-300, 1.5);
 }
 
 SLabel[size='m'],
 SAdditionalLabel[size='m'],
 SCount[size='m'] {
   font-size: var(--intergalactic-fs-200, 14px);
-  line-height: var(--intergalactic-lh-200, 142%);
+  line-height: var(--intergalactic-lh-200, 1.4286);
 }
 
 SAdditionalLabel,
diff --git a/semcore/d3-chart/src/style/bar.shadow.css b/semcore/d3-chart/src/style/bar.shadow.css
index b393437a92..7795e1231f 100644
--- a/semcore/d3-chart/src/style/bar.shadow.css
+++ b/semcore/d3-chart/src/style/bar.shadow.css
@@ -44,13 +44,13 @@ SBarLabel {
   color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
   margin-right: auto;
   font-size: var(--intergalactic-fs-200, 14px);
-  line-height: var(--intergalactic-lh-200, 142%);
+  line-height: var(--intergalactic-lh-200, 1.4286);
 }
 SBarPercent {
   color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
   margin-right: var(--intergalactic-spacing-2x, 8px);
   font-size: var(--intergalactic-fs-200, 14px);
-  line-height: var(--intergalactic-lh-200, 142%);
+  line-height: var(--intergalactic-lh-200, 1.4286);
 }
 SBarValue {
   min-width: 52px;
@@ -58,7 +58,7 @@ SBarValue {
   justify-content: flex-end;
   color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
   font-size: var(--intergalactic-fs-200, 14px);
-  line-height: var(--intergalactic-lh-200, 142%);
+  line-height: var(--intergalactic-lh-200, 1.4286);
   text-align: right;
 }
 SCompactHorizontalBarHoverRect {
diff --git a/semcore/d3-chart/src/style/donut.shadow.css b/semcore/d3-chart/src/style/donut.shadow.css
index 2a36c8d566..199c0741d0 100644
--- a/semcore/d3-chart/src/style/donut.shadow.css
+++ b/semcore/d3-chart/src/style/donut.shadow.css
@@ -31,6 +31,6 @@ SLabel {
   text-anchor: middle;
   vertical-anchor: middle;
   font-size: var(--intergalactic-fs-200, 14px);
-  line-height: var(--intergalactic-lh-200, 142%);
+  line-height: var(--intergalactic-lh-200, 1.4286);
 
 }
\ No newline at end of file
diff --git a/semcore/d3-chart/src/style/tooltip.shadow.css b/semcore/d3-chart/src/style/tooltip.shadow.css
index 0e5dc23996..cdb4789080 100644
--- a/semcore/d3-chart/src/style/tooltip.shadow.css
+++ b/semcore/d3-chart/src/style/tooltip.shadow.css
@@ -2,7 +2,7 @@
 
 STooltip {
   font-size: var(--intergalactic-fs-100, 12px);
-  line-height: var(--intergalactic-lh-100, 133%);
+  line-height: var(--intergalactic-lh-100, 1.3334);
   position: relative;
   background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0));
   border-radius: var(--intergalactic-popper-rounded, 6px);
diff --git a/semcore/data-table/src/components/Body/style.shadow.css b/semcore/data-table/src/components/Body/style.shadow.css
index 2d9c4aaec4..398b63e9f2 100644
--- a/semcore/data-table/src/components/Body/style.shadow.css
+++ b/semcore/data-table/src/components/Body/style.shadow.css
@@ -151,7 +151,7 @@ SCell {
   display: flex;
   height: 100%;
   font-size: var(--intergalactic-fs-200, 14px);
-  line-height: var(--intergalactic-lh-200, 142%);
+  line-height: var(--intergalactic-lh-200, 1.4286);
   color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
   box-sizing: border-box;
   border-bottom: 1px solid var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07));
diff --git a/semcore/data-table/src/components/Head/style.shadow.css b/semcore/data-table/src/components/Head/style.shadow.css
index 25fc3d26a1..3cd4d024d1 100644
--- a/semcore/data-table/src/components/Head/style.shadow.css
+++ b/semcore/data-table/src/components/Head/style.shadow.css
@@ -55,7 +55,7 @@ SGroup, SColumn {
   position: relative;
   transition: width calc(var(--intergalactic-duration-extra-fast, 100) * 1ms) ease-in-out, min-width calc(var(--intergalactic-duration-extra-fast, 100) * 1ms) ease-in-out, max-width calc(var(--intergalactic-duration-extra-fast, 100) * 1ms) ease-in-out;
   overflow: hidden;
-  line-height: var(--intergalactic-lh-100, 133%);
+  line-height: var(--intergalactic-lh-100, 1.3334);
 }
 
 SGroup {
diff --git a/semcore/dropdown/src/style/dropdown.shadow.css b/semcore/dropdown/src/style/dropdown.shadow.css
index a121a22112..df9c469fee 100644
--- a/semcore/dropdown/src/style/dropdown.shadow.css
+++ b/semcore/dropdown/src/style/dropdown.shadow.css
@@ -98,7 +98,7 @@ SDropdownPopper {
 
   SDropdownItem[size='l'] {
     font-size: var(--intergalactic-fs-300, 16px);
-    line-height: var(--intergalactic-lh-300, 150%);
+    line-height: var(--intergalactic-lh-300, 1.5);
     padding: var(--intergalactic-spacing-content-padding-small, 8px) var(--intergalactic-spacing-content-padding-medium, 12px);
     min-height: 40px;
 
@@ -118,7 +118,7 @@ SDropdownPopper {
 
   SDropdownItem[size='m'] {
     font-size: var(--intergalactic-fs-200, 14px);
-    line-height: var(--intergalactic-lh-200, 142%);
+    line-height: var(--intergalactic-lh-200, 1.4286);
     padding: calc(var(--intergalactic-spacing-content-padding-xsmall, 4px) + var(--intergalactic-spacing-05x, 2px)) var(--intergalactic-spacing-content-padding-medium, 12px);
     min-height: 32px;
 
diff --git a/semcore/errors/src/style/errors.shadow.css b/semcore/errors/src/style/errors.shadow.css
index 0ad8d07153..65ce5e8705 100644
--- a/semcore/errors/src/style/errors.shadow.css
+++ b/semcore/errors/src/style/errors.shadow.css
@@ -48,7 +48,7 @@ SError {
 
     STitle[data-errors-title] {
       font-size: var(--intergalactic-fs-700, 36px);
-      line-height: var(--intergalactic-lh-700, 110%);
+      line-height: var(--intergalactic-lh-700, 1.1112);
       color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
       font-weight: var(--intergalactic-semi-bold, 600);
       margin: 0 0 var(--intergalactic-spacing-4x, 16px) 0;
@@ -57,7 +57,7 @@ SError {
     SDescription {
       display: block;
       font-size: var(--intergalactic-fs-300, 16px);
-      line-height: var(--intergalactic-lh-300, 150%);
+      line-height: var(--intergalactic-lh-300, 1.5);
       color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
       margin: 0 0 var(--intergalactic-spacing-6x, 24px) 0;
     }
diff --git a/semcore/feedback-form/src/style/feedback-rating.shadow.css b/semcore/feedback-form/src/style/feedback-rating.shadow.css
index bdc5b1a246..b76f6f9eaf 100644
--- a/semcore/feedback-form/src/style/feedback-rating.shadow.css
+++ b/semcore/feedback-form/src/style/feedback-rating.shadow.css
@@ -9,7 +9,7 @@ SFeedbackRating {
 
   SHeader {
     font-size: var(--intergalactic-fs-300, 16px);
-    line-height: var(--intergalactic-lh-300, 150%);
+    line-height: var(--intergalactic-lh-300, 1.5);
     font-weight: var(--intergalactic-bold, 700);
     margin: var(--intergalactic-spacing-4x, 16px) 0;
     text-align: center;
diff --git a/semcore/fullscreen-modal/src/style/fullscreen-modal.shadow.css b/semcore/fullscreen-modal/src/style/fullscreen-modal.shadow.css
index ab12fb8d25..1e4159bcfd 100644
--- a/semcore/fullscreen-modal/src/style/fullscreen-modal.shadow.css
+++ b/semcore/fullscreen-modal/src/style/fullscreen-modal.shadow.css
@@ -37,14 +37,14 @@ SFullscreenOverlay {
 
   STitle {
     font-size: var(--intergalactic-fs-500, 24px);
-    line-height: var(--intergalactic-lh-500, 117%);
+    line-height: var(--intergalactic-lh-500, 1.1667);
     font-weight: var(--intergalactic-bold, 700);
     color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
   }
 
   SDescription {
     font-size: var(--intergalactic-fs-100, 12px);
-    line-height: var(--intergalactic-lh-100, 133%);
+    line-height: var(--intergalactic-lh-100, 1.3334);
     color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
   }
 
diff --git a/semcore/modal/src/style/modal.shadow.css b/semcore/modal/src/style/modal.shadow.css
index 5044072dcb..be31924163 100644
--- a/semcore/modal/src/style/modal.shadow.css
+++ b/semcore/modal/src/style/modal.shadow.css
@@ -15,7 +15,7 @@ SWindow {
   STitle {
     color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
     font-size: var(--intergalactic-fs-500, 24px);
-    line-height: var(--intergalactic-lh-500, 117%);
+    line-height: var(--intergalactic-lh-500, 1.1667);
     font-weight: var(--intergalactic-semi-bold, 600);
     margin-bottom: var(--intergalactic-spacing-2x, 8px);
     margin-right: var(--intergalactic-spacing-8x, 32px);
diff --git a/semcore/notice-bubble/src/style/notice-bubble.shadow.css b/semcore/notice-bubble/src/style/notice-bubble.shadow.css
index 409390ae3c..4694b72dac 100644
--- a/semcore/notice-bubble/src/style/notice-bubble.shadow.css
+++ b/semcore/notice-bubble/src/style/notice-bubble.shadow.css
@@ -28,7 +28,7 @@ SContent {
 
 SMessage {
   font-size: var(--intergalactic-fs-200, 14px);
-  line-height: var(--intergalactic-lh-200, 142%);
+  line-height: var(--intergalactic-lh-200, 1.4286);
 }
 
 SDismiss {
diff --git a/semcore/notice/src/style/notice.shadow.css b/semcore/notice/src/style/notice.shadow.css
index d905d6496e..7af01829c3 100644
--- a/semcore/notice/src/style/notice.shadow.css
+++ b/semcore/notice/src/style/notice.shadow.css
@@ -2,7 +2,7 @@ SNotice {
   display: flex;
   padding: var(--intergalactic-spacing-4x, 16px);
   font-size: var(--intergalactic-fs-200, 14px);
-  line-height: var(--intergalactic-lh-200, 142%);
+  line-height: var(--intergalactic-lh-200, 1.4286);
   box-sizing: border-box;
   border-style: solid;
   border-width: 1px;
diff --git a/semcore/pagination/src/style/pagination.shadow.css b/semcore/pagination/src/style/pagination.shadow.css
index fc8251a637..c487f39407 100644
--- a/semcore/pagination/src/style/pagination.shadow.css
+++ b/semcore/pagination/src/style/pagination.shadow.css
@@ -45,12 +45,12 @@ STotalPagesLabel {
 
 STotalLastPages {
   font-size: var(--intergalactic-fs-200, 14px);
-  line-height: var(--intergalactic-lh-200, 142%);
+  line-height: var(--intergalactic-lh-200, 1.4286);
   color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
 
   &[size='l'] {
     font-size: var(--intergalactic-fs-300, 16px);
-    line-height: var(--intergalactic-lh-300, 150%);
+    line-height: var(--intergalactic-lh-300, 1.5);
   }
 }
 
diff --git a/semcore/product-head/src/style/info.shadow.css b/semcore/product-head/src/style/info.shadow.css
index 7f5f27902b..d0d2756c9e 100644
--- a/semcore/product-head/src/style/info.shadow.css
+++ b/semcore/product-head/src/style/info.shadow.css
@@ -3,7 +3,7 @@ SInfo {
   align-items: center;
   flex-wrap: wrap;
   font-size: var(--intergalactic-fs-200, 14px);
-  line-height: var(--intergalactic-lh-200, 142%);
+  line-height: var(--intergalactic-lh-200, 1.4286);
 
   & > SItem:not(:last-child) {
     margin-right: var(--intergalactic-spacing-6x, 24px);
diff --git a/semcore/product-head/src/style/product-head.shadow.css b/semcore/product-head/src/style/product-head.shadow.css
index cbe1e683c6..765fe8a331 100644
--- a/semcore/product-head/src/style/product-head.shadow.css
+++ b/semcore/product-head/src/style/product-head.shadow.css
@@ -27,7 +27,7 @@ SLinks {
   justify-content: flex-end;
   margin-left: var(--intergalactic-spacing-2x, 8px);
   font-size: var(--intergalactic-fs-200, 14px);
-  line-height: var(--intergalactic-lh-200, 142%);
+  line-height: var(--intergalactic-lh-200, 1.4286);
 
   & > *:not(:first-child) {
     margin-left: var(--intergalactic-spacing-5x, 20px);
diff --git a/semcore/product-head/src/style/title.shadow.css b/semcore/product-head/src/style/title.shadow.css
index 1f0825c823..8b3df5c40a 100644
--- a/semcore/product-head/src/style/title.shadow.css
+++ b/semcore/product-head/src/style/title.shadow.css
@@ -2,7 +2,7 @@ STitle {
   align-items: center;
   display: flex;
   font-size: var(--intergalactic-fs-400, 20px);
-  line-height: var(--intergalactic-lh-400, 120%);
+  line-height: var(--intergalactic-lh-400, 1.2);
   font-weight: var(--intergalactic-semi-bold, 600);
   min-width: 0;
   overflow: hidden;
diff --git a/semcore/slider/src/style/slider.shadow.css b/semcore/slider/src/style/slider.shadow.css
index e7936885d1..59d8c8f6c2 100644
--- a/semcore/slider/src/style/slider.shadow.css
+++ b/semcore/slider/src/style/slider.shadow.css
@@ -84,5 +84,5 @@ SSliderOptions {
   color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
   font-size: var(--intergalactic-fs-200, 14px);
   font-weight: var(--intergalactic-regular, 400);
-  line-height: var(--intergalactic-lh-200, 142%);
+  line-height: var(--intergalactic-lh-200, 1.4286);
 }
diff --git a/semcore/switch/src/style/switch.shadow.css b/semcore/switch/src/style/switch.shadow.css
index b9ab4657d9..ec96d3bac2 100644
--- a/semcore/switch/src/style/switch.shadow.css
+++ b/semcore/switch/src/style/switch.shadow.css
@@ -17,7 +17,7 @@ SSwitch[size] {
 
 SSwitch[size='m'] {
   font-size: var(--intergalactic-fs-200, 14px);
-  line-height: var(--intergalactic-lh-200, 142%);
+  line-height: var(--intergalactic-lh-200, 1.4286);
 
   & SToggle {
     width: 28px;
@@ -33,7 +33,7 @@ SSwitch[size='m'] {
 
 SSwitch[size='l'] {
   font-size: var(--intergalactic-fs-300, 16px);
-  line-height: var(--intergalactic-lh-300, 150%);
+  line-height: var(--intergalactic-lh-300, 1.5);
 
   & SToggle {
     width: 36px;
@@ -49,7 +49,7 @@ SSwitch[size='l'] {
 
 SSwitch[size='xl'] {
   font-size: var(--intergalactic-fs-300, 16px);
-  line-height: var(--intergalactic-lh-300, 150%);
+  line-height: var(--intergalactic-lh-300, 1.5);
 
   & SToggle {
     width: 44px;
diff --git a/semcore/tag/src/style/tag.shadow.css b/semcore/tag/src/style/tag.shadow.css
index 86ef71a184..626999fd0c 100644
--- a/semcore/tag/src/style/tag.shadow.css
+++ b/semcore/tag/src/style/tag.shadow.css
@@ -115,7 +115,7 @@ STagContainer[size="m"] {
 
   & SText {
     font-size: var(--intergalactic-fs-100, 12px);
-    line-height: var(--intergalactic-lh-100, 133%);
+    line-height: var(--intergalactic-lh-100, 1.3334);
   }
 }
 
@@ -127,7 +127,7 @@ STagContainer[size="l"] {
 
   & SText {
     font-size: var(--intergalactic-fs-200, 14px);
-    line-height: var(--intergalactic-lh-200, 142%);
+    line-height: var(--intergalactic-lh-200, 1.4286);
   }
 }
 
@@ -139,7 +139,7 @@ STagContainerClose[size="xl"] {
 
   & SText {
     font-size: var(--intergalactic-fs-300, 16px);
-    line-height: var(--intergalactic-lh-300, 150%);
+    line-height: var(--intergalactic-lh-300, 1.5);
   }
 }
 
diff --git a/semcore/textarea/src/style/textarea.shadow.css b/semcore/textarea/src/style/textarea.shadow.css
index 7d76a8e5ec..40f2049261 100644
--- a/semcore/textarea/src/style/textarea.shadow.css
+++ b/semcore/textarea/src/style/textarea.shadow.css
@@ -26,14 +26,14 @@ STextarea[size='m'] {
   min-height: var(--intergalactic-form-control-m, 32px);
   padding: var(--intergalactic-spacing-1x, 4px) var(--intergalactic-spacing-content-padding-medium, 12px);
   font-size: var(--intergalactic-fs-200, 14px);
-  line-height: var(--intergalactic-lh-200, 142%);
+  line-height: var(--intergalactic-lh-200, 1.4286);
 }
 
 STextarea[size='l'] {
   min-height: var(--intergalactic-form-control-l, 44px);
   padding: var(--intergalactic-spacing-2x, 8px) var(--intergalactic-spacing-content-padding-medium, 12px);
   font-size: var(--intergalactic-fs-300, 16px);
-  line-height: var(--intergalactic-lh-300, 150%);
+  line-height: var(--intergalactic-lh-300, 1.5);
 }
 
 STextarea[state='normal'] {
diff --git a/semcore/tooltip/src/style/tooltip.shadow.css b/semcore/tooltip/src/style/tooltip.shadow.css
index ae1b7b9452..fdb0beb37f 100644
--- a/semcore/tooltip/src/style/tooltip.shadow.css
+++ b/semcore/tooltip/src/style/tooltip.shadow.css
@@ -5,7 +5,7 @@ STooltip {
   box-sizing: border-box;
   color: var(--intergalactic-tooltip-text, oklch(0.1 0.03 137 / 0.899));
   font-size: var(--intergalactic-fs-200, 14px);
-  line-height: var(--intergalactic-lh-200, 142%);
+  line-height: var(--intergalactic-lh-200, 1.4286);
   word-wrap: break-word;
   max-width: 228px;
   font-weight: normal;
diff --git a/semcore/typography/src/style/blockquote.shadow.css b/semcore/typography/src/style/blockquote.shadow.css
index e2d4c1e812..93ac835464 100644
--- a/semcore/typography/src/style/blockquote.shadow.css
+++ b/semcore/typography/src/style/blockquote.shadow.css
@@ -3,7 +3,7 @@ SBlockquote {
   display: flex;
   font-style: italic;
   font-size: var(--intergalactic-fs-400, 20px);
-  line-height: var(--intergalactic-lh-400, 120%);
+  line-height: var(--intergalactic-lh-400, 1.2);
   color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
 }
 
@@ -24,5 +24,5 @@ SAuthor {
   color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
   font-style: normal;
   font-size: var(--intergalactic-fs-300, 16px);
-  line-height: var(--intergalactic-lh-300, 150%);
+  line-height: var(--intergalactic-lh-300, 1.5);
 }
diff --git a/semcore/typography/src/style/text.shadow.css b/semcore/typography/src/style/text.shadow.css
index 042cd65180..63c48c7ebd 100644
--- a/semcore/typography/src/style/text.shadow.css
+++ b/semcore/typography/src/style/text.shadow.css
@@ -50,7 +50,7 @@ SText {
       /* disable-tokens-validator */
       padding-left: 51px;
       font-size: var(--intergalactic-fs-400, 20px);
-      line-height: var(--intergalactic-lh-400, 120%);
+      line-height: var(--intergalactic-lh-400, 1.2);
       font-style: italic;
 
       &:before {
@@ -68,7 +68,7 @@ SText {
         margin-top: var(--intergalactic-spacing-4x, 16px);
         color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
         font-size: var(--intergalactic-fs-300, 16px);
-        line-height: var(--intergalactic-lh-300, 150%);
+        line-height: var(--intergalactic-lh-300, 1.5);
       }
     }
 
@@ -113,7 +113,7 @@ SText {
 
     & h1 {
       font-size: var(--intergalactic-fs-800, 48px);
-      line-height: var(--intergalactic-lh-800, 117%);
+      line-height: var(--intergalactic-lh-800, 1.16667);
       font-weight: var(--intergalactic-semi-bold, 600);
       margin: 0 0 var(--intergalactic-spacing-content-gap-xxlarge-extended, 20px) 0;
 
@@ -124,7 +124,7 @@ SText {
 
     & h2 {
       font-size: var(--intergalactic-fs-700, 36px);
-      line-height: var(--intergalactic-lh-700, 110%);
+      line-height: var(--intergalactic-lh-700, 1.1112);
       font-weight: var(--intergalactic-semi-bold, 600);
       margin: 0 0 var(--intergalactic-spacing-content-gap-xxlarge, 16px) 0;
 
@@ -135,7 +135,7 @@ SText {
 
     & h3 {
       font-size: var(--intergalactic-fs-600, 32px);
-      line-height: var(--intergalactic-lh-600, 125%);
+      line-height: var(--intergalactic-lh-600, 1.25);
       font-weight: var(--intergalactic-semi-bold, 600);
       margin: 0 0 var(--intergalactic-spacing-content-gap-xlarge, 12px) 0;
 
@@ -146,7 +146,7 @@ SText {
 
     & h4 {
       font-size: var(--intergalactic-fs-500, 24px);
-      line-height: var(--intergalactic-lh-500, 117%);
+      line-height: var(--intergalactic-lh-500, 1.1667);
       font-weight: var(--intergalactic-semi-bold, 600);
       margin: 0 0 var(--intergalactic-spacing-content-gap-xlarge, 12px) 0;
 
@@ -157,7 +157,7 @@ SText {
 
     & h5 {
       font-size: var(--intergalactic-fs-400, 20px);
-      line-height: var(--intergalactic-lh-400, 120%);
+      line-height: var(--intergalactic-lh-400, 1.2);
       font-weight: var(--intergalactic-semi-bold, 600);
       margin: 0 0 var(--intergalactic-spacing-content-gap-large, 8px) 0;
 
@@ -168,7 +168,7 @@ SText {
 
     & h6 {
       font-size: var(--intergalactic-fs-300, 16px);
-      line-height: var(--intergalactic-lh-300, 150%);
+      line-height: var(--intergalactic-lh-300, 1.5);
       font-weight: var(--intergalactic-bold, 700);
       margin: 0 0 var(--intergalactic-spacing-content-gap-small, 4px) 0;
 
@@ -193,7 +193,7 @@ SText {
     & p,
     & li {
       font-size: var(--intergalactic-fs-200, 14px);
-      line-height: var(--intergalactic-lh-200, 142%);
+      line-height: var(--intergalactic-lh-200, 1.4286);
     }
 
     & p {
@@ -254,13 +254,13 @@ SText[ellipsis] {
 
 SText[size='100'] {
   font-size: var(--intergalactic-fs-100, 12px);
-  line-height: var(--intergalactic-lh-100, 133%);
+  line-height: var(--intergalactic-lh-100, 1.3334);
 
   &[formatTags] {
     & p,
     & li {
       font-size: var(--intergalactic-fs-100, 12px);
-      line-height: var(--intergalactic-lh-100, 133%);
+      line-height: var(--intergalactic-lh-100, 1.3334);
     }
 
     & p {
@@ -295,13 +295,13 @@ SText[size='100'] {
 
 SText[size='200'] {
   font-size: var(--intergalactic-fs-200, 14px);
-  line-height: var(--intergalactic-lh-200, 142%);
+  line-height: var(--intergalactic-lh-200, 1.4286);
 
   &[formatTags] {
     & p,
     & li {
       font-size: var(--intergalactic-fs-200, 14px);
-      line-height: var(--intergalactic-lh-200, 142%);
+      line-height: var(--intergalactic-lh-200, 1.4286);
     }
 
     & p {
@@ -337,13 +337,13 @@ SText[size='200'] {
 
 SText[size='300'] {
   font-size: var(--intergalactic-fs-300, 16px);
-  line-height: var(--intergalactic-lh-300, 150%);
+  line-height: var(--intergalactic-lh-300, 1.5);
 
   &[formatTags] {
     & p,
     & li {
       font-size: var(--intergalactic-fs-300, 16px);
-      line-height: var(--intergalactic-lh-300, 150%);
+      line-height: var(--intergalactic-lh-300, 1.5);
     }
 
     & p {
@@ -378,32 +378,32 @@ SText[size='300'] {
 
 SText[size='350'] {
   font-size: var(--intergalactic-fs-350, 18px);
-  line-height: var(--intergalactic-lh-350, 150%);
+  line-height: var(--intergalactic-lh-350, 1.3334);
 }
 
 SText[size='400'] {
   font-size: var(--intergalactic-fs-400, 20px);
-  line-height: var(--intergalactic-lh-400, 120%);
+  line-height: var(--intergalactic-lh-400, 1.2);
 }
 
 SText[size='500'] {
   font-size: var(--intergalactic-fs-500, 24px);
-  line-height: var(--intergalactic-lh-500, 117%);
+  line-height: var(--intergalactic-lh-500, 1.1667);
 }
 
 SText[size='600'] {
   font-size: var(--intergalactic-fs-600, 32px);
-  line-height: var(--intergalactic-lh-600, 125%);
+  line-height: var(--intergalactic-lh-600, 1.25);
 }
 
 SText[size='700'] {
   font-size: var(--intergalactic-fs-700, 36px);
-  line-height: var(--intergalactic-lh-700, 110%);
+  line-height: var(--intergalactic-lh-700, 1.1112);
 }
 
 SText[size='800'] {
   font-size: var(--intergalactic-fs-800, 48px);
-  line-height: var(--intergalactic-lh-800, 117%);
+  line-height: var(--intergalactic-lh-800, 1.16667);
 }
 
 SText[noWrap] {
diff --git a/semcore/widget-empty/src/style/widget-empty.shadow.css b/semcore/widget-empty/src/style/widget-empty.shadow.css
index d580211e38..906d49a865 100644
--- a/semcore/widget-empty/src/style/widget-empty.shadow.css
+++ b/semcore/widget-empty/src/style/widget-empty.shadow.css
@@ -15,7 +15,7 @@ STitle {
   text-align: center;
   color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
   font-size: var(--intergalactic-fs-300, 16px);
-  line-height: var(--intergalactic-lh-300, 150%);
+  line-height: var(--intergalactic-lh-300, 1.5);
   font-weight: var(--intergalactic-bold, 700);
 }
 
@@ -23,7 +23,7 @@ SDescription {
   text-align: center;
   text-wrap: balance;
   font-size: var(--intergalactic-fs-200, 14px);
-  line-height: var(--intergalactic-lh-200, 142%);
+  line-height: var(--intergalactic-lh-200, 1.4286);
   color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
   max-width: 400px;
 }
diff --git a/semcore/wizard/src/style/wizard.shadow.css b/semcore/wizard/src/style/wizard.shadow.css
index fd0f1bfc37..a342db4eb2 100644
--- a/semcore/wizard/src/style/wizard.shadow.css
+++ b/semcore/wizard/src/style/wizard.shadow.css
@@ -11,7 +11,7 @@ SSidebar {
   color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-wizard-sidebar-text-primary */
   font-weight: var(--intergalactic-bold, 700);
   font-size: var(--intergalactic-fs-300, 16px);
-  line-height: var(--intergalactic-lh-300, 150%);
+  line-height: var(--intergalactic-lh-300, 1.5);
   padding: var(--intergalactic-spacing-10x, 40px) var(--intergalactic-spacing-2x, 8px);
   max-width: 220px;
   flex-shrink: 0;
@@ -31,7 +31,7 @@ SSidebar {
     cursor: pointer;
     position: relative;
     overflow: auto;
-    line-height: var(--intergalactic-lh-200, 142%);
+    line-height: var(--intergalactic-lh-200, 1.4286);
 
     &:focus-visible {
       outline-color: var(--intergalactic-keyboard-focus-invert-outline, oklch(1 0 0 / 0.7));
diff --git a/stories/components/button/advanced/button.stories.tsx b/stories/components/button/advanced/button.stories.tsx
index c1bad65096..59d82446a8 100644
--- a/stories/components/button/advanced/button.stories.tsx
+++ b/stories/components/button/advanced/button.stories.tsx
@@ -1,6 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
+import { themeArg, THEMES } from '../tests/themeUtils';
 import AllButtonsExample from './examples/all-buttons';
+import ButtonPlaygroundExample, { defaultProps as playgroundProps } from './examples/button-playground';
 
 const meta: Meta = {
   title: 'Components/Button/Advanced',
@@ -11,3 +13,27 @@ export default meta;
 export const AllButtons: StoryObj = {
   render: AllButtonsExample,
 };
+
+export const ButtonPlayground: StoryObj<typeof playgroundProps> = {
+  render: ButtonPlaygroundExample,
+  argTypes: {
+    use: { control: { type: 'select' }, options: Object.keys(THEMES) },
+    theme_primary: themeArg('primary'),
+    theme_secondary: themeArg('secondary'),
+    theme_tertiary: themeArg('tertiary'),
+    size: { control: { type: 'select' }, options: ['m', 'l'] },
+    addonLeft: { control: { type: 'boolean' }, name: 'addonLeft (MathPlus)' },
+    addonRight: { control: { type: 'boolean' }, name: 'addonRight (ChevronRight)' },
+    linkUse: { control: { type: 'select' }, options: ['primary', 'secondary'] },
+    linkSize: {
+      control: { type: 'select' },
+      options: [100, 200, 300, 400, 500, 600, 700, 800],
+    },
+  },
+  args: {
+    ...playgroundProps,
+    theme_primary: THEMES.primary[0],
+    theme_secondary: THEMES.secondary[0],
+    theme_tertiary: THEMES.tertiary[0],
+  },
+};
diff --git a/stories/components/button/advanced/examples/button-playground.tsx b/stories/components/button/advanced/examples/button-playground.tsx
new file mode 100644
index 0000000000..31452f44f0
--- /dev/null
+++ b/stories/components/button/advanced/examples/button-playground.tsx
@@ -0,0 +1,111 @@
+import ChevronRightM from '@semcore/icon/ChevronRight/m';
+import MathPlusM from '@semcore/icon/MathPlus/m';
+import { Box, Flex } from '@semcore/ui/base-components';
+import Button, { ButtonLink } from '@semcore/ui/button';
+import React from 'react';
+
+import { themeFor } from '../../tests/themeUtils';
+
+type ExampleProps = {
+  use: 'primary' | 'secondary' | 'tertiary';
+  size: 'm' | 'l';
+  addonLeft: boolean;
+  addonRight: boolean;
+  linkUse: 'primary' | 'secondary';
+  linkSize: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800;
+  theme_primary?: string;
+  theme_secondary?: string;
+  theme_tertiary?: string;
+};
+
+const Demo = (props: ExampleProps) => {
+  const theme = themeFor(props);
+  const addonLeft = props.addonLeft ? MathPlusM : undefined;
+  const addonRight = props.addonRight ? ChevronRightM : undefined;
+
+  const buttonProps = {
+    use: props.use,
+    theme,
+    size: props.size,
+    addonLeft,
+    addonRight,
+  } as const;
+
+  const buttons = (
+    <Flex gap={2} alignItems='center' flexWrap>
+      <Button {...buttonProps}>Default</Button>
+      <Button {...buttonProps} active>
+        Active
+      </Button>
+      <Button {...buttonProps} disabled>
+        Disabled
+      </Button>
+      <Button {...buttonProps} loading>
+        Loading
+      </Button>
+      <Button
+        use={props.use}
+        theme={theme}
+        size={props.size}
+        addonLeft={MathPlusM}
+        aria-label='Add'
+      />
+    </Flex>
+  );
+
+  const links = (
+    <Flex gap={2} alignItems='center' flexWrap>
+      <ButtonLink
+        use={props.linkUse}
+        size={props.linkSize}
+        addonLeft={addonLeft}
+        addonRight={addonRight}
+      >
+        Default link
+      </ButtonLink>
+      <ButtonLink
+        use={props.linkUse}
+        size={props.linkSize}
+        addonLeft={addonLeft}
+        addonRight={addonRight}
+        disabled
+      >
+        Disabled link
+      </ButtonLink>
+    </Flex>
+  );
+
+  return (
+    <Flex direction='column' gap={8}>
+      {theme === 'invert'
+        ? (
+            <Box
+              p={4}
+              style={{
+                background: 'var(--intergalactic-bg-primary-invert)',
+                borderRadius: 'var(--intergalactic-surface-rounded, 6px)',
+              }}
+            >
+              {buttons}
+            </Box>
+          )
+        : (
+            buttons
+          )}
+      {links}
+    </Flex>
+  );
+};
+
+export const defaultProps: ExampleProps = {
+  use: 'primary',
+  size: 'm',
+  addonLeft: false,
+  addonRight: false,
+  linkUse: 'primary',
+  linkSize: 300,
+};
+
+Demo.defaultProps = defaultProps;
+
+export default Demo;
diff --git a/tools/theme/src/theme.ts b/tools/theme/src/theme.ts
index e0d0c042c1..8a02443a98 100644
--- a/tools/theme/src/theme.ts
+++ b/tools/theme/src/theme.ts
@@ -137,39 +137,39 @@ export const theme: Theme = {
     },
     lineHeights: {
       100: {
-        value: '133%',
+        value: '1.3334',
         description: 'Use with font-size-100.',
       },
       200: {
-        value: '142%',
+        value: '1.4286',
         description: 'Use with font-size-200.',
       },
       300: {
-        value: '150%',
+        value: '1.5',
         description: 'Use with font-size-300.',
       },
       350: {
-        value: '150%',
+        value: '1.3334',
         description: 'Use with font-size-350.',
       },
       400: {
-        value: '120%',
+        value: '1.2',
         description: 'Use with font-size-400.',
       },
       500: {
-        value: '117%',
+        value: '1.1667',
         description: 'Use with font-size-500.',
       },
       600: {
-        value: '125%',
+        value: '1.25',
         description: 'Use with font-size-600.',
       },
       700: {
-        value: '110%',
+        value: '1.1112',
         description: 'Use with font-size-700.',
       },
       800: {
-        value: '117%',
+        value: '1.16667',
         description: 'Use with font-size-800.',
       },
     },
diff --git a/website/docs/style/design-tokens/base-tokens.json b/website/docs/style/design-tokens/base-tokens.json
index 08809ccd5c..f5e6700870 100644
--- a/website/docs/style/design-tokens/base-tokens.json
+++ b/website/docs/style/design-tokens/base-tokens.json
@@ -620,47 +620,47 @@
   },
   {
     "name": "--intergalactic-lh-100",
-    "value": "133%",
+    "value": "1.3334",
     "description": "Use with font-size-100."
   },
   {
     "name": "--intergalactic-lh-200",
-    "value": "142%",
+    "value": "1.4286",
     "description": "Use with font-size-200."
   },
   {
     "name": "--intergalactic-lh-300",
-    "value": "150%",
+    "value": "1.5",
     "description": "Use with font-size-300."
   },
   {
     "name": "--intergalactic-lh-350",
-    "value": "150%",
+    "value": "1.3334",
     "description": "Use with font-size-350."
   },
   {
     "name": "--intergalactic-lh-400",
-    "value": "120%",
+    "value": "1.2",
     "description": "Use with font-size-400."
   },
   {
     "name": "--intergalactic-lh-500",
-    "value": "117%",
+    "value": "1.1667",
     "description": "Use with font-size-500."
   },
   {
     "name": "--intergalactic-lh-600",
-    "value": "125%",
+    "value": "1.25",
     "description": "Use with font-size-600."
   },
   {
     "name": "--intergalactic-lh-700",
-    "value": "110%",
+    "value": "1.1112",
     "description": "Use with font-size-700."
   },
   {
     "name": "--intergalactic-lh-800",
-    "value": "117%",
+    "value": "1.16667",
     "description": "Use with font-size-800."
   },
   {

From e0be0a3a4a3823deb1f143803399d7ae3a9226f3 Mon Sep 17 00:00:00 2001
From: Julia Mnizhek <j.mnizhek@semrush.com>
Date: Mon, 17 Aug 2026 14:58:32 +0200
Subject: [PATCH 3/3] [stories] update Link diff sizes

---
 .../link/tests/examples/link-different-sizes.tsx       | 10 ++++++++--
 stories/components/link/tests/link.stories.tsx         |  2 +-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/stories/components/link/tests/examples/link-different-sizes.tsx b/stories/components/link/tests/examples/link-different-sizes.tsx
index c2ba7e329d..b5ec5f6fc6 100644
--- a/stories/components/link/tests/examples/link-different-sizes.tsx
+++ b/stories/components/link/tests/examples/link-different-sizes.tsx
@@ -4,6 +4,7 @@ import Badge from '@semcore/ui/badge';
 import Counter, { type NSCounter } from '@semcore/ui/counter';
 import Link from '@semcore/ui/link';
 import Spin, { type NSSpin } from '@semcore/ui/spin';
+import Tag from '@semcore/ui/tag';
 import { Text } from '@semcore/ui/typography';
 import React from 'react';
 
@@ -93,6 +94,11 @@ const Demo = (props: LinkSizesProps) => {
                   <Spin size={spinSize} />
                 </Link.Addon>
               )}
+              {props.addonRight === 'tag' && (
+                <Link.Addon>
+                  <Tag size='m'>Tag</Tag>
+                </Link.Addon>
+              )}
             </Link>
 
           </Text>
@@ -103,8 +109,8 @@ const Demo = (props: LinkSizesProps) => {
 };
 
 type LinkSizesProps = {
-  addonLeft: 'icon' | 'badge' | 'counter' | 'spin';
-  addonRight: 'icon' | 'badge' | 'counter' | 'spin';
+  addonLeft: 'icon' | 'spin';
+  addonRight: 'icon' | 'badge' | 'counter' | 'spin' | 'tag';
   ellipsis: boolean;
   active: boolean;
 };
diff --git a/stories/components/link/tests/link.stories.tsx b/stories/components/link/tests/link.stories.tsx
index fba8e5dd0e..f4a1e0efe0 100644
--- a/stories/components/link/tests/link.stories.tsx
+++ b/stories/components/link/tests/link.stories.tsx
@@ -124,7 +124,7 @@ export const LinkDifferentSizes: StoryObj<typeof defaultLinksizesProps> = {
     },
     addonRight: {
       control: { type: 'select' },
-      options: ['icon', 'badge', 'counter', 'spin'],
+      options: ['icon', 'badge', 'counter', 'spin', 'tag'],
     },
   },
 };