From 06b708737f8e37ed8adc4c8b7f8b096b5d3468b1 Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Tue, 13 Jan 2026 17:14:30 +0100 Subject: [PATCH 1/2] [core] update values for lh variables to round them in different browsers --- .../src/style/base-trigger.shadow.css | 2 +- .../src/style/breadcrumbs.shadow.css | 2 +- .../InputField/inputField.shadow.css | 4 +-- .../src/component/Button/button.shadow.css | 4 +-- .../ButtonLink/buttonLink.shadow.css | 14 ++++---- semcore/card/src/style/card.shadow.css | 2 +- .../checkbox/src/style/checkbox.shadow.css | 4 +-- semcore/core/src/theme/dark.json | 14 ++++---- semcore/core/src/theme/light.json | 14 ++++---- semcore/core/src/theme/themes/auto.css | 28 +++++++-------- semcore/core/src/theme/themes/dark.css | 14 ++++---- semcore/core/src/theme/themes/dark.ts | 14 ++++---- semcore/core/src/theme/themes/default.css | 16 ++++----- semcore/core/src/theme/themes/default.ts | 14 ++++---- semcore/core/src/theme/themes/light.css | 16 ++++----- semcore/core/src/theme/themes/light.ts | 14 ++++---- .../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/format-text.shadow.css | 18 +++++----- .../src/style/fullscreen-modal.shadow.css | 8 ++--- semcore/modal/src/style/modal.shadow.css | 2 +- .../src/style/notice-bubble.shadow.css | 2 +- .../src/style/notice-global.shadow.css | 2 +- semcore/notice/src/style/notice.shadow.css | 2 +- .../src/style/pagination.shadow.css | 8 ++--- .../product-head/src/style/info.shadow.css | 2 +- .../src/style/product-head.shadow.css | 2 +- semcore/radio/src/style/radio.shadow.css | 4 +-- .../src/style/side-panel.shadow.css | 2 +- semcore/slider/src/style/slider.shadow.css | 2 +- semcore/switch/src/style/switch.shadow.css | 6 ++-- .../tab-line/src/style/tab-line.shadow.css | 4 +-- .../tab-panel/src/style/tab-panel.shadow.css | 2 +- 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 | 2 +- semcore/typography/src/style/text.shadow.css | 34 +++++++++---------- .../src/style/widget-empty.shadow.css | 4 +-- semcore/wizard/src/style/wizard.shadow.css | 4 +-- ...size-and-weight-headers-and-paragrapsh.tsx | 10 +++--- .../style/design-tokens/design-tokens.json | 28 +++++++-------- 48 files changed, 181 insertions(+), 181 deletions(-) diff --git a/semcore/base-trigger/src/style/base-trigger.shadow.css b/semcore/base-trigger/src/style/base-trigger.shadow.css index 7ded4ce257..3f1339010a 100644 --- a/semcore/base-trigger/src/style/base-trigger.shadow.css +++ b/semcore/base-trigger/src/style/base-trigger.shadow.css @@ -72,7 +72,7 @@ SText { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - line-height: var(--intergalactic-lh-200, 142%); + line-height: var(--intergalactic-lh-200, 1.4286); flex-grow: 1; text-align: left; } diff --git a/semcore/breadcrumbs/src/style/breadcrumbs.shadow.css b/semcore/breadcrumbs/src/style/breadcrumbs.shadow.css index e965967762..ae7554fb52 100644 --- a/semcore/breadcrumbs/src/style/breadcrumbs.shadow.css +++ b/semcore/breadcrumbs/src/style/breadcrumbs.shadow.css @@ -33,7 +33,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, #6c6e79); 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 1db8c6d3b0..66eaf1b80b 100644 --- a/semcore/bulk-textarea/src/components/InputField/inputField.shadow.css +++ b/semcore/bulk-textarea/src/components/InputField/inputField.shadow.css @@ -124,7 +124,7 @@ SInputField[showErrors]>div[aria-invalid]>p[aria-invalid]:after { SInputField[size='m']>div { padding: var(--intergalactic-spacing-2x, 8px) 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); min-height: calc(var(--minRows) * 20px); /* (maxRowsLength - 1 * (rowsHeight + marginBottom)) + lastRowHeight */ @@ -142,7 +142,7 @@ SInputField[size='m']>div { SInputField[size='l']>div { padding: var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-4x, 16px); 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 a73cd07370..b925ce433d 100644 --- a/semcore/button/src/component/Button/button.shadow.css +++ b/semcore/button/src/component/Button/button.shadow.css @@ -330,13 +330,13 @@ SText { SText[size='m'] { margin-left: var(--intergalactic-spacing-2x, 8px); margin-right: var(--intergalactic-spacing-2x, 8px); - line-height: var(--intergalactic-lh-200, 142%); + line-height: var(--intergalactic-lh-200, 1.4286); } SText[size='l'] { margin-left: var(--intergalactic-spacing-2x, 8px); margin-right: var(--intergalactic-spacing-2x, 8px); - line-height: var(--intergalactic-lh-300, 150%); + line-height: var(--intergalactic-lh-300, 1.5); &:only-child { margin-left: var(--intergalactic-spacing-3x, 12px); diff --git a/semcore/button/src/component/ButtonLink/buttonLink.shadow.css b/semcore/button/src/component/ButtonLink/buttonLink.shadow.css index 250b59345f..d7f5670269 100644 --- a/semcore/button/src/component/ButtonLink/buttonLink.shadow.css +++ b/semcore/button/src/component/ButtonLink/buttonLink.shadow.css @@ -110,17 +110,17 @@ SButton[text-color] { SButton[size='100'] { font-size: var(--intergalactic-fs-100, 12px); - line-height: var(--intergalactic-lh-100, 133%); + line-height: var(--intergalactic-lh-100, 1.3334); } SButton[size='200'] { font-size: var(--intergalactic-fs-200, 14px); - line-height: var(--intergalactic-lh-200, 142%); + line-height: var(--intergalactic-lh-200, 1.4286); } SButton[size='300'] { font-size: var(--intergalactic-fs-300, 16px); - line-height: var(--intergalactic-lh-300, 150%); + line-height: var(--intergalactic-lh-300, 1.5); } SButton[size='400'] { @@ -130,22 +130,22 @@ SButton[size='400'] { SButton[size='500'] { font-size: var(--intergalactic-fs-500, 24px); - line-height: var(--intergalactic-lh-500, 117%); + line-height: var(--intergalactic-lh-500, 1.1667); } SButton[size='600'] { font-size: var(--intergalactic-fs-600, 32px); - line-height: var(--intergalactic-lh-600, 125%); + line-height: var(--intergalactic-lh-600, 1.25); } SButton[size='700'] { font-size: var(--intergalactic-fs-700, 36px); - line-height: var(--intergalactic-lh-700, 110%); + line-height: var(--intergalactic-lh-700, 1.1112); } SButton[size='800'] { font-size: var(--intergalactic-fs-800, 48px); - line-height: var(--intergalactic-lh-800, 117%); + line-height: var(--intergalactic-lh-800, 1.16667); } @media (prefers-reduced-motion) { diff --git a/semcore/card/src/style/card.shadow.css b/semcore/card/src/style/card.shadow.css index 7faae788da..b982fcd4b7 100644 --- a/semcore/card/src/style/card.shadow.css +++ b/semcore/card/src/style/card.shadow.css @@ -12,7 +12,7 @@ SCard { STitle { color: var(--intergalactic-text-primary, #191b23); 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-right: var(--intergalactic-spacing-1x, 4px); diff --git a/semcore/checkbox/src/style/checkbox.shadow.css b/semcore/checkbox/src/style/checkbox.shadow.css index 1c5f293a4f..ac14470497 100644 --- a/semcore/checkbox/src/style/checkbox.shadow.css +++ b/semcore/checkbox/src/style/checkbox.shadow.css @@ -94,12 +94,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); } diff --git a/semcore/core/src/theme/dark.json b/semcore/core/src/theme/dark.json index 43b5bbab1d..883200cf59 100644 --- a/semcore/core/src/theme/dark.json +++ b/semcore/core/src/theme/dark.json @@ -1606,22 +1606,22 @@ "description": "Base font family." }, "lh-800": { - "value": "117%", + "value": "1.16667", "type": "lineHeights", "description": "Use with font-size-800." }, "lh-700": { - "value": "110%", + "value": "1.1112", "type": "lineHeights", "description": "Use with font-size-700." }, "lh-600": { - "value": "125%", + "value": "1.25", "type": "lineHeights", "description": "Use with font-size-600." }, "lh-500": { - "value": "117%", + "value": "1.1667", "type": "lineHeights", "description": "Use with font-size-500." }, @@ -1631,17 +1631,17 @@ "description": "Use with font-size-400." }, "lh-300": { - "value": "150%", + "value": "1.5", "type": "lineHeights", "description": "Use with font-size-300." }, "lh-200": { - "value": "142%", + "value": "1.4286", "type": "lineHeights", "description": "Use with font-size-200." }, "lh-100": { - "value": "133%", + "value": "1.3334", "type": "lineHeights", "description": "Use with font-size-100." }, diff --git a/semcore/core/src/theme/light.json b/semcore/core/src/theme/light.json index 0878488d7b..16f52c2b2d 100644 --- a/semcore/core/src/theme/light.json +++ b/semcore/core/src/theme/light.json @@ -1641,22 +1641,22 @@ "description": "Base font family." }, "lh-800": { - "value": "117%", + "value": "1.16667", "type": "lineHeights", "description": "Use with font-size-800." }, "lh-700": { - "value": "110%", + "value": "1.1112", "type": "lineHeights", "description": "Use with font-size-700." }, "lh-600": { - "value": "125%", + "value": "1.25", "type": "lineHeights", "description": "Use with font-size-600." }, "lh-500": { - "value": "117%", + "value": "1.1667", "type": "lineHeights", "description": "Use with font-size-500." }, @@ -1666,17 +1666,17 @@ "description": "Use with font-size-400." }, "lh-300": { - "value": "150%", + "value": "1.5", "type": "lineHeights", "description": "Use with font-size-300." }, "lh-200": { - "value": "142%", + "value": "1.4286", "type": "lineHeights", "description": "Use with font-size-200." }, "lh-100": { - "value": "133%", + "value": "1.3334", "type": "lineHeights", "description": "Use with font-size-100." }, diff --git a/semcore/core/src/theme/themes/auto.css b/semcore/core/src/theme/themes/auto.css index 1fef6aa40c..a513feae1e 100644 --- a/semcore/core/src/theme/themes/auto.css +++ b/semcore/core/src/theme/themes/auto.css @@ -557,21 +557,21 @@ /* Base font family. */ --intergalactic-base: Inter; /* Use with font-size-800. */ - --intergalactic-lh-800: 117%; + --intergalactic-lh-800: 1.16667; /* Use with font-size-700. */ - --intergalactic-lh-700: 110%; + --intergalactic-lh-700: 1.1112; /* Use with font-size-600. */ - --intergalactic-lh-600: 125%; + --intergalactic-lh-600: 1.25; /* Use with font-size-500. */ - --intergalactic-lh-500: 117%; + --intergalactic-lh-500: 1.1667; /* Use with font-size-400. */ --intergalactic-lh-400: 120%; /* Use with font-size-300. */ - --intergalactic-lh-300: 150%; + --intergalactic-lh-300: 1.5; /* Use with font-size-200. */ - --intergalactic-lh-200: 142%; + --intergalactic-lh-200: 1.4286; /* Use with font-size-100. */ - --intergalactic-lh-100: 133%; + --intergalactic-lh-100: 1.3334; /* Semi-bold font weight. */ --intergalactic-semi-bold: 600; /* Bold font weight. */ @@ -1428,21 +1428,21 @@ /* Base font family. */ --intergalactic-base: Inter; /* Use with font-size-800. */ - --intergalactic-lh-800: 117%; + --intergalactic-lh-800: 1.16667; /* Use with font-size-700. */ - --intergalactic-lh-700: 110%; + --intergalactic-lh-700: 1.1112; /* Use with font-size-600. */ - --intergalactic-lh-600: 125%; + --intergalactic-lh-600: 1.25; /* Use with font-size-500. */ - --intergalactic-lh-500: 117%; + --intergalactic-lh-500: 1.1667; /* Use with font-size-400. */ --intergalactic-lh-400: 120%; /* Use with font-size-300. */ - --intergalactic-lh-300: 150%; + --intergalactic-lh-300: 1.5; /* Use with font-size-200. */ - --intergalactic-lh-200: 142%; + --intergalactic-lh-200: 1.4286; /* Use with font-size-100. */ - --intergalactic-lh-100: 133%; + --intergalactic-lh-100: 1.3334; /* Semi-bold font weight. */ --intergalactic-semi-bold: 600; /* Bold font weight. */ diff --git a/semcore/core/src/theme/themes/dark.css b/semcore/core/src/theme/themes/dark.css index 67a3cfb1ab..3e169f419b 100644 --- a/semcore/core/src/theme/themes/dark.css +++ b/semcore/core/src/theme/themes/dark.css @@ -551,21 +551,21 @@ /* Base font family. */ --intergalactic-base: Inter; /* Use with font-size-800. */ - --intergalactic-lh-800: 117%; + --intergalactic-lh-800: 1.16667; /* Use with font-size-700. */ - --intergalactic-lh-700: 110%; + --intergalactic-lh-700: 1.1112; /* Use with font-size-600. */ - --intergalactic-lh-600: 125%; + --intergalactic-lh-600: 1.25; /* Use with font-size-500. */ - --intergalactic-lh-500: 117%; + --intergalactic-lh-500: 1.1667; /* Use with font-size-400. */ --intergalactic-lh-400: 120%; /* Use with font-size-300. */ - --intergalactic-lh-300: 150%; + --intergalactic-lh-300: 1.5; /* Use with font-size-200. */ - --intergalactic-lh-200: 142%; + --intergalactic-lh-200: 1.4286; /* Use with font-size-100. */ - --intergalactic-lh-100: 133%; + --intergalactic-lh-100: 1.3334; /* Semi-bold font weight. */ --intergalactic-semi-bold: 600; /* Bold font weight. */ diff --git a/semcore/core/src/theme/themes/dark.ts b/semcore/core/src/theme/themes/dark.ts index cf74fbc903..128604c528 100644 --- a/semcore/core/src/theme/themes/dark.ts +++ b/semcore/core/src/theme/themes/dark.ts @@ -310,14 +310,14 @@ export default { '--intergalactic-keyboard-focus-invert': '0px 0px 0px 3px rgba(255, 255, 255, 0.8)', '--intergalactic-keyboard-focus': '0px 0px 0px 3px rgba(0, 143, 248, 0.5)', '--intergalactic-base': 'Inter', - '--intergalactic-lh-800': '117%', - '--intergalactic-lh-700': '110%', - '--intergalactic-lh-600': '125%', - '--intergalactic-lh-500': '117%', + '--intergalactic-lh-800': '1.16667', + '--intergalactic-lh-700': '1.1112', + '--intergalactic-lh-600': '1.25', + '--intergalactic-lh-500': '1.1667', '--intergalactic-lh-400': '120%', - '--intergalactic-lh-300': '150%', - '--intergalactic-lh-200': '142%', - '--intergalactic-lh-100': '133%', + '--intergalactic-lh-300': '1.5', + '--intergalactic-lh-200': '1.4286', + '--intergalactic-lh-100': '1.3334', '--intergalactic-semi-bold': '600', '--intergalactic-bold': '700', '--intergalactic-regular': '400', diff --git a/semcore/core/src/theme/themes/default.css b/semcore/core/src/theme/themes/default.css index f382248a02..4b84b1f869 100644 --- a/semcore/core/src/theme/themes/default.css +++ b/semcore/core/src/theme/themes/default.css @@ -557,21 +557,21 @@ /* Base font family. */ --intergalactic-base: Inter; /* Use with font-size-800. */ - --intergalactic-lh-800: 117%; + --intergalactic-lh-800: 1.16667; /* Use with font-size-700. */ - --intergalactic-lh-700: 110%; + --intergalactic-lh-700: 1.1112; /* Use with font-size-600. */ - --intergalactic-lh-600: 125%; + --intergalactic-lh-600: 1.25; /* Use with font-size-500. */ - --intergalactic-lh-500: 117%; + --intergalactic-lh-500: 1.1667; /* Use with font-size-400. */ --intergalactic-lh-400: 120%; /* Use with font-size-300. */ - --intergalactic-lh-300: 150%; + --intergalactic-lh-300: 1.5; /* Use with font-size-200. */ - --intergalactic-lh-200: 142%; + --intergalactic-lh-200: 1.4286; /* Use with font-size-100. */ - --intergalactic-lh-100: 133%; + --intergalactic-lh-100: 1.3334; /* Semi-bold font weight. */ --intergalactic-semi-bold: 600; /* Bold font weight. */ @@ -713,7 +713,7 @@ --intergalactic-tag-primary-gray-hover-active: #E3E4E9; /* Blue background color for primary tag. It’s built with CSS filter brightness(150%) that was applied to blue-500 color with 0.2 opacity on the white background underneath. */ --intergalactic-tag-primary-blue-normal: #D0EEFF; - /* Blue background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the blue-500 color with 0.3 opacity on the white background underneath. */ + /* Blue background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the blue-500 color with 0.3 opacity on the white background underneath. */ --intergalactic-tag-primary-blue-hover-active: #B7E4FF; /* Green background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the green-500 color with 0.2 opacity on the white background underneath. */ --intergalactic-tag-primary-green-normal: #CFF1EA; diff --git a/semcore/core/src/theme/themes/default.ts b/semcore/core/src/theme/themes/default.ts index 00eb26cdfd..259b641ef4 100644 --- a/semcore/core/src/theme/themes/default.ts +++ b/semcore/core/src/theme/themes/default.ts @@ -313,14 +313,14 @@ export default { '--intergalactic-keyboard-focus-invert': '0px 0px 0px 3px rgba(255, 255, 255, 0.8)', '--intergalactic-keyboard-focus': '0px 0px 0px 3px rgba(0, 143, 248, 0.5)', '--intergalactic-base': 'Inter', - '--intergalactic-lh-800': '117%', - '--intergalactic-lh-700': '110%', - '--intergalactic-lh-600': '125%', - '--intergalactic-lh-500': '117%', + '--intergalactic-lh-800': '1.16667', + '--intergalactic-lh-700': '1.1112', + '--intergalactic-lh-600': '1.25', + '--intergalactic-lh-500': '1.1667', '--intergalactic-lh-400': '120%', - '--intergalactic-lh-300': '150%', - '--intergalactic-lh-200': '142%', - '--intergalactic-lh-100': '133%', + '--intergalactic-lh-300': '1.5', + '--intergalactic-lh-200': '1.4286', + '--intergalactic-lh-100': '1.3334', '--intergalactic-semi-bold': '600', '--intergalactic-bold': '700', '--intergalactic-regular': '400', diff --git a/semcore/core/src/theme/themes/light.css b/semcore/core/src/theme/themes/light.css index f382248a02..4b84b1f869 100644 --- a/semcore/core/src/theme/themes/light.css +++ b/semcore/core/src/theme/themes/light.css @@ -557,21 +557,21 @@ /* Base font family. */ --intergalactic-base: Inter; /* Use with font-size-800. */ - --intergalactic-lh-800: 117%; + --intergalactic-lh-800: 1.16667; /* Use with font-size-700. */ - --intergalactic-lh-700: 110%; + --intergalactic-lh-700: 1.1112; /* Use with font-size-600. */ - --intergalactic-lh-600: 125%; + --intergalactic-lh-600: 1.25; /* Use with font-size-500. */ - --intergalactic-lh-500: 117%; + --intergalactic-lh-500: 1.1667; /* Use with font-size-400. */ --intergalactic-lh-400: 120%; /* Use with font-size-300. */ - --intergalactic-lh-300: 150%; + --intergalactic-lh-300: 1.5; /* Use with font-size-200. */ - --intergalactic-lh-200: 142%; + --intergalactic-lh-200: 1.4286; /* Use with font-size-100. */ - --intergalactic-lh-100: 133%; + --intergalactic-lh-100: 1.3334; /* Semi-bold font weight. */ --intergalactic-semi-bold: 600; /* Bold font weight. */ @@ -713,7 +713,7 @@ --intergalactic-tag-primary-gray-hover-active: #E3E4E9; /* Blue background color for primary tag. It’s built with CSS filter brightness(150%) that was applied to blue-500 color with 0.2 opacity on the white background underneath. */ --intergalactic-tag-primary-blue-normal: #D0EEFF; - /* Blue background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the blue-500 color with 0.3 opacity on the white background underneath. */ + /* Blue background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the blue-500 color with 0.3 opacity on the white background underneath. */ --intergalactic-tag-primary-blue-hover-active: #B7E4FF; /* Green background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the green-500 color with 0.2 opacity on the white background underneath. */ --intergalactic-tag-primary-green-normal: #CFF1EA; diff --git a/semcore/core/src/theme/themes/light.ts b/semcore/core/src/theme/themes/light.ts index 00eb26cdfd..259b641ef4 100644 --- a/semcore/core/src/theme/themes/light.ts +++ b/semcore/core/src/theme/themes/light.ts @@ -313,14 +313,14 @@ export default { '--intergalactic-keyboard-focus-invert': '0px 0px 0px 3px rgba(255, 255, 255, 0.8)', '--intergalactic-keyboard-focus': '0px 0px 0px 3px rgba(0, 143, 248, 0.5)', '--intergalactic-base': 'Inter', - '--intergalactic-lh-800': '117%', - '--intergalactic-lh-700': '110%', - '--intergalactic-lh-600': '125%', - '--intergalactic-lh-500': '117%', + '--intergalactic-lh-800': '1.16667', + '--intergalactic-lh-700': '1.1112', + '--intergalactic-lh-600': '1.25', + '--intergalactic-lh-500': '1.1667', '--intergalactic-lh-400': '120%', - '--intergalactic-lh-300': '150%', - '--intergalactic-lh-200': '142%', - '--intergalactic-lh-100': '133%', + '--intergalactic-lh-300': '1.5', + '--intergalactic-lh-200': '1.4286', + '--intergalactic-lh-100': '1.3334', '--intergalactic-semi-bold': '600', '--intergalactic-bold': '700', '--intergalactic-regular': '400', 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 b7bcbcf70f..9cc7218ed2 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 89cb71da0e..a2501231cb 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, #191b23); 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, #6c6e79); 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, #191b23); 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 f2d484d18c..c4475ac2ff 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 29f3ab6183..be53801579 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, #ffffff); 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 7583173075..abf2a99553 100644 --- a/semcore/data-table/src/components/Body/style.shadow.css +++ b/semcore/data-table/src/components/Body/style.shadow.css @@ -239,7 +239,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, #191b23); box-sizing: border-box; border-bottom: 1px solid var(--intergalactic-border-secondary, #e0e1e9); diff --git a/semcore/data-table/src/components/Head/style.shadow.css b/semcore/data-table/src/components/Head/style.shadow.css index 80f6f9e630..ba4a1d308f 100644 --- a/semcore/data-table/src/components/Head/style.shadow.css +++ b/semcore/data-table/src/components/Head/style.shadow.css @@ -38,7 +38,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 8460ee15b6..882a1c4d9c 100644 --- a/semcore/dropdown/src/style/dropdown.shadow.css +++ b/semcore/dropdown/src/style/dropdown.shadow.css @@ -86,7 +86,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-2x, 8px) var(--intergalactic-spacing-3x, 12px); min-height: 40px; @@ -105,7 +105,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-1x, 4px) + var(--intergalactic-spacing-05x, 2px)) var(--intergalactic-spacing-2x, 8px); min-height: 32px; diff --git a/semcore/errors/src/style/errors.shadow.css b/semcore/errors/src/style/errors.shadow.css index 7060ed3ac1..c65631d7ca 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, #191b23); font-weight: var(--intergalactic-semi-bold, 600); margin: 0 0 var(--intergalactic-spacing-4x, 16px) 0; @@ -56,7 +56,7 @@ SError { SDescription { 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, #191b23); margin: 0 0 var(--intergalactic-spacing-6x, 24px) 0; } diff --git a/semcore/format-text/src/style/format-text.shadow.css b/semcore/format-text/src/style/format-text.shadow.css index 814e6c1466..3d64c12177 100644 --- a/semcore/format-text/src/style/format-text.shadow.css +++ b/semcore/format-text/src/style/format-text.shadow.css @@ -65,7 +65,7 @@ SFormatText { margin-top: var(--intergalactic-spacing-4x, 16px); color: var(--intergalactic-text-secondary, #6c6e79); font-size: var(--intergalactic-fs-300, 16px); - line-height: var(--intergalactic-lh-300, 150%); + line-height: var(--intergalactic-lh-300, 1.5); } } @@ -105,7 +105,7 @@ SFormatText { & 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-bold, 700); margin: 0 0 var(--intergalactic-spacing-6x, 24px) 0; @@ -116,7 +116,7 @@ SFormatText { & 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-bold, 700); margin: 0 0 var(--intergalactic-spacing-4x, 16px) 0; @@ -127,7 +127,7 @@ SFormatText { & 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-medium, 500); margin: 0 0 var(--intergalactic-spacing-4x, 16px) 0; @@ -138,7 +138,7 @@ SFormatText { & 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-medium, 500); margin: 0 0 var(--intergalactic-spacing-3x, 12px) 0; @@ -160,7 +160,7 @@ SFormatText { & 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-1x, 4px) 0; @@ -188,7 +188,7 @@ SFormatText[size='s'] { & 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 { @@ -225,7 +225,7 @@ SFormatText[size='m'] { & 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 { @@ -263,7 +263,7 @@ SFormatText[size='l'] { & 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 { diff --git a/semcore/fullscreen-modal/src/style/fullscreen-modal.shadow.css b/semcore/fullscreen-modal/src/style/fullscreen-modal.shadow.css index cb0b173885..50d809b694 100644 --- a/semcore/fullscreen-modal/src/style/fullscreen-modal.shadow.css +++ b/semcore/fullscreen-modal/src/style/fullscreen-modal.shadow.css @@ -33,7 +33,7 @@ SBack { margin-bottom: var(--intergalactic-spacing-3x, 12px); color: var(--intergalactic-icon-primary-neutral, #6c6e79); font-size: var(--intergalactic-fs-100, 12px); - line-height: var(--intergalactic-lh-100, 133%); + line-height: var(--intergalactic-lh-100, 1.3334); background: none; padding: 0; border: none; @@ -47,7 +47,7 @@ SBack { SBackText { margin-left: var(--intergalactic-spacing-1x, 4px); font-size: var(--intergalactic-fs-200, 14px); - line-height: var(--intergalactic-lh-200, 142%); + line-height: var(--intergalactic-lh-200, 1.4286); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -62,7 +62,7 @@ SDescription { 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, #191b23); } @@ -71,7 +71,7 @@ SDescription { display: flex; align-items: baseline; 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, #6c6e79); &::before { diff --git a/semcore/modal/src/style/modal.shadow.css b/semcore/modal/src/style/modal.shadow.css index fcbff4fabc..ff738ac2cf 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, #191b23); 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-4x, 16px); diff --git a/semcore/notice-bubble/src/style/notice-bubble.shadow.css b/semcore/notice-bubble/src/style/notice-bubble.shadow.css index 6721ef50ce..42f1dbf03e 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-global/src/style/notice-global.shadow.css b/semcore/notice-global/src/style/notice-global.shadow.css index 89b95307c6..80c6b329a6 100644 --- a/semcore/notice-global/src/style/notice-global.shadow.css +++ b/semcore/notice-global/src/style/notice-global.shadow.css @@ -2,7 +2,7 @@ SNoticeGlobal { display: flex; align-items: center; 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; padding: var(--intergalactic-spacing-2x, 8px) var(--intergalactic-spacing-8x, 32px); } diff --git a/semcore/notice/src/style/notice.shadow.css b/semcore/notice/src/style/notice.shadow.css index 019f58d40e..1a64b8f50e 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 826ec52be6..9ef20d7715 100644 --- a/semcore/pagination/src/style/pagination.shadow.css +++ b/semcore/pagination/src/style/pagination.shadow.css @@ -47,12 +47,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, #191b23); &[size='l'] { font-size: var(--intergalactic-fs-300, 16px); - line-height: var(--intergalactic-lh-300, 150%); + line-height: var(--intergalactic-lh-300, 1.5); } } @@ -81,10 +81,10 @@ SLabel, STotalPages, STotalPagesLabel { font-size: var(--intergalactic-fs-200, 14px); - line-height: var(--intergalactic-lh-200, 142%); + line-height: var(--intergalactic-lh-200, 1.4286); &[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/radio/src/style/radio.shadow.css b/semcore/radio/src/style/radio.shadow.css index 8b8aa2ea47..25df7225a1 100644 --- a/semcore/radio/src/style/radio.shadow.css +++ b/semcore/radio/src/style/radio.shadow.css @@ -19,12 +19,12 @@ SRadio[disabled] { 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); } 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); } SValue { diff --git a/semcore/side-panel/src/style/side-panel.shadow.css b/semcore/side-panel/src/style/side-panel.shadow.css index 81521478af..adc907106e 100644 --- a/semcore/side-panel/src/style/side-panel.shadow.css +++ b/semcore/side-panel/src/style/side-panel.shadow.css @@ -85,7 +85,7 @@ SBack { STitle { 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); color: var(--intergalactic-text-primary, #191b23); white-space: nowrap; diff --git a/semcore/slider/src/style/slider.shadow.css b/semcore/slider/src/style/slider.shadow.css index 6603231b20..1746a431ba 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, #6c6e79); 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 22c5ef74cf..ba5ca38240 100644 --- a/semcore/switch/src/style/switch.shadow.css +++ b/semcore/switch/src/style/switch.shadow.css @@ -14,7 +14,7 @@ SSwitch[size] { SSwitch[size='m'] { font-size: var(--intergalactic-fs-100, 12px); - line-height: var(--intergalactic-lh-100, 133%); + line-height: var(--intergalactic-lh-100, 1.3334); & SToggle { width: 20px; @@ -31,7 +31,7 @@ SSwitch[size='m'] { SSwitch[size='l'] { font-size: var(--intergalactic-fs-200, 14px); - line-height: var(--intergalactic-lh-200, 142%); + line-height: var(--intergalactic-lh-200, 1.4286); & SToggle { height: 20px; @@ -48,7 +48,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/tab-line/src/style/tab-line.shadow.css b/semcore/tab-line/src/style/tab-line.shadow.css index 46b2f47491..b9417d85ea 100644 --- a/semcore/tab-line/src/style/tab-line.shadow.css +++ b/semcore/tab-line/src/style/tab-line.shadow.css @@ -116,7 +116,7 @@ STabLineItem[size='m'] { & SText { font-size: var(--intergalactic-fs-200, 14px); - line-height: var(--intergalactic-lh-200, 142%); + line-height: var(--intergalactic-lh-200, 1.4286); } } @@ -126,7 +126,7 @@ STabLineItem[size='l'] { & 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/tab-panel/src/style/tab-panel.shadow.css b/semcore/tab-panel/src/style/tab-panel.shadow.css index 0f19aa0cca..01df5534c8 100644 --- a/semcore/tab-panel/src/style/tab-panel.shadow.css +++ b/semcore/tab-panel/src/style/tab-panel.shadow.css @@ -42,7 +42,7 @@ STabPanelItem { & SText { font-size: var(--intergalactic-fs-200, 14px); - line-height: var(--intergalactic-lh-200, 142%); + line-height: var(--intergalactic-lh-200, 1.4286); font-weight: var(--intergalactic-medium, 500); } diff --git a/semcore/tag/src/style/tag.shadow.css b/semcore/tag/src/style/tag.shadow.css index 5463f786ce..99bf656968 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 f18aec58e5..e35108f12c 100644 --- a/semcore/textarea/src/style/textarea.shadow.css +++ b/semcore/textarea/src/style/textarea.shadow.css @@ -25,13 +25,13 @@ STextarea { STextarea[size='m'] { padding: var(--intergalactic-spacing-1x, 4px) 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); } STextarea[size='l'] { padding: var(--intergalactic-spacing-2x, 8px) var(--intergalactic-spacing-2x, 8px) var(--intergalactic-spacing-2x, 8px) var(--intergalactic-spacing-3x, 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 6de8889b0f..4820610bbf 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-text-primary, #191b23); 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 6fa2e30147..7abc16f561 100644 --- a/semcore/typography/src/style/blockquote.shadow.css +++ b/semcore/typography/src/style/blockquote.shadow.css @@ -24,5 +24,5 @@ SAuthor { color: var(--intergalactic-text-secondary, #6c6e79); 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 b1719d3a44..0f59b665ad 100644 --- a/semcore/typography/src/style/text.shadow.css +++ b/semcore/typography/src/style/text.shadow.css @@ -68,7 +68,7 @@ SText { margin-top: var(--intergalactic-spacing-4x, 16px); color: var(--intergalactic-text-secondary, #6c6e79); font-size: var(--intergalactic-fs-300, 16px); - line-height: var(--intergalactic-lh-300, 150%); + line-height: var(--intergalactic-lh-300, 1.5); } } @@ -108,7 +108,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-6x, 24px) 0; @@ -119,7 +119,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-4x, 16px) 0; @@ -130,7 +130,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-4x, 16px) 0; @@ -141,7 +141,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-3x, 12px) 0; @@ -163,7 +163,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-1x, 4px) 0; @@ -188,7 +188,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 { @@ -224,13 +224,13 @@ SText { 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 { @@ -265,13 +265,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 { @@ -307,13 +307,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 { @@ -353,22 +353,22 @@ SText[size='400'] { 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 8f3c176db6..4794e54073 100644 --- a/semcore/widget-empty/src/style/widget-empty.shadow.css +++ b/semcore/widget-empty/src/style/widget-empty.shadow.css @@ -18,7 +18,7 @@ STitle { text-align: center; color: var(--intergalactic-text-secondary, #6c6e79); 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); } @@ -26,7 +26,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, #6c6e79); max-width: 400px; } diff --git a/semcore/wizard/src/style/wizard.shadow.css b/semcore/wizard/src/style/wizard.shadow.css index 511a803342..e47d8fc96d 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, #ffffff); 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, rgba(255, 255, 255, 0.8)); diff --git a/stories/components/typography/tests/examples/text-font-size-and-weight-headers-and-paragrapsh.tsx b/stories/components/typography/tests/examples/text-font-size-and-weight-headers-and-paragrapsh.tsx index 8ef66f88ee..c37adb6c6e 100644 --- a/stories/components/typography/tests/examples/text-font-size-and-weight-headers-and-paragrapsh.tsx +++ b/stories/components/typography/tests/examples/text-font-size-and-weight-headers-and-paragrapsh.tsx @@ -14,19 +14,19 @@ const Demo = () => ( H2, 36px, --fs-700 - + Paragraph example. H3, 32px, --fs-600 - + Paragraph example. H4, 24px, --fs-500 - + Paragraph example. @@ -35,7 +35,7 @@ const Demo = () => ( H5, 20px, --fs-400 - + Paragraph example. @@ -44,7 +44,7 @@ const Demo = () => ( Paragraph, 14px, --fs-200 - + Paragraph example, 16px, --fs-300 diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json index f120856d02..0498781e70 100644 --- a/website/docs/style/design-tokens/design-tokens.json +++ b/website/docs/style/design-tokens/design-tokens.json @@ -2314,8 +2314,8 @@ { "name": "--intergalactic-lh-800", "type": "lineHeights", - "rawValue": "117%", - "computedValue": "117%", + "rawValue": "1.16667", + "computedValue": "1.16667", "description": "Use with font-size-800.", "components": [ "button", @@ -2326,8 +2326,8 @@ { "name": "--intergalactic-lh-700", "type": "lineHeights", - "rawValue": "110%", - "computedValue": "110%", + "rawValue": "1.1112", + "computedValue": "1.1112", "description": "Use with font-size-700.", "components": [ "button", @@ -2339,8 +2339,8 @@ { "name": "--intergalactic-lh-600", "type": "lineHeights", - "rawValue": "125%", - "computedValue": "125%", + "rawValue": "1.25", + "computedValue": "1.25", "description": "Use with font-size-600.", "components": [ "button", @@ -2351,8 +2351,8 @@ { "name": "--intergalactic-lh-500", "type": "lineHeights", - "rawValue": "117%", - "computedValue": "117%", + "rawValue": "1.1667", + "computedValue": "1.1667", "description": "Use with font-size-500.", "components": [ "button", @@ -2378,8 +2378,8 @@ { "name": "--intergalactic-lh-300", "type": "lineHeights", - "rawValue": "150%", - "computedValue": "150%", + "rawValue": "1.5", + "computedValue": "1.5", "description": "Use with font-size-300.", "components": [ "bulk-textarea", @@ -2405,8 +2405,8 @@ { "name": "--intergalactic-lh-200", "type": "lineHeights", - "rawValue": "142%", - "computedValue": "142%", + "rawValue": "1.4286", + "computedValue": "1.4286", "description": "Use with font-size-200.", "components": [ "base-trigger", @@ -2440,8 +2440,8 @@ { "name": "--intergalactic-lh-100", "type": "lineHeights", - "rawValue": "133%", - "computedValue": "133%", + "rawValue": "1.3334", + "computedValue": "1.3334", "description": "Use with font-size-100.", "components": [ "button", From df916edc17865c3f81a70a4f8442e5d9a120e9c8 Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Tue, 13 Jan 2026 17:25:38 +0100 Subject: [PATCH 2/2] [core] update value for lh-400 --- .../button/src/component/ButtonLink/buttonLink.shadow.css | 2 +- semcore/core/src/theme/dark.json | 2 +- semcore/core/src/theme/light.json | 2 +- semcore/core/src/theme/themes/auto.css | 4 ++-- semcore/core/src/theme/themes/dark.css | 2 +- semcore/core/src/theme/themes/dark.ts | 2 +- semcore/core/src/theme/themes/default.css | 2 +- semcore/core/src/theme/themes/default.ts | 2 +- semcore/core/src/theme/themes/light.css | 2 +- semcore/core/src/theme/themes/light.ts | 2 +- semcore/format-text/src/style/format-text.shadow.css | 4 ++-- semcore/product-head/src/style/title.shadow.css | 2 +- semcore/typography/src/style/blockquote.shadow.css | 2 +- semcore/typography/src/style/text.shadow.css | 6 +++--- website/docs/style/design-tokens/design-tokens.json | 4 ++-- 15 files changed, 20 insertions(+), 20 deletions(-) diff --git a/semcore/button/src/component/ButtonLink/buttonLink.shadow.css b/semcore/button/src/component/ButtonLink/buttonLink.shadow.css index d7f5670269..4f1466cf8b 100644 --- a/semcore/button/src/component/ButtonLink/buttonLink.shadow.css +++ b/semcore/button/src/component/ButtonLink/buttonLink.shadow.css @@ -125,7 +125,7 @@ SButton[size='300'] { SButton[size='400'] { font-size: var(--intergalactic-fs-400, 20px); - line-height: var(--intergalactic-lh-400, 120%); + line-height: var(--intergalactic-lh-400, 1.2); } SButton[size='500'] { diff --git a/semcore/core/src/theme/dark.json b/semcore/core/src/theme/dark.json index 883200cf59..0c9a0adbc6 100644 --- a/semcore/core/src/theme/dark.json +++ b/semcore/core/src/theme/dark.json @@ -1626,7 +1626,7 @@ "description": "Use with font-size-500." }, "lh-400": { - "value": "120%", + "value": "1.2", "type": "lineHeights", "description": "Use with font-size-400." }, diff --git a/semcore/core/src/theme/light.json b/semcore/core/src/theme/light.json index 16f52c2b2d..251282470b 100644 --- a/semcore/core/src/theme/light.json +++ b/semcore/core/src/theme/light.json @@ -1661,7 +1661,7 @@ "description": "Use with font-size-500." }, "lh-400": { - "value": "120%", + "value": "1.2", "type": "lineHeights", "description": "Use with font-size-400." }, diff --git a/semcore/core/src/theme/themes/auto.css b/semcore/core/src/theme/themes/auto.css index a513feae1e..efb77352e2 100644 --- a/semcore/core/src/theme/themes/auto.css +++ b/semcore/core/src/theme/themes/auto.css @@ -565,7 +565,7 @@ /* Use with font-size-500. */ --intergalactic-lh-500: 1.1667; /* Use with font-size-400. */ - --intergalactic-lh-400: 120%; + --intergalactic-lh-400: 1.2; /* Use with font-size-300. */ --intergalactic-lh-300: 1.5; /* Use with font-size-200. */ @@ -1436,7 +1436,7 @@ /* Use with font-size-500. */ --intergalactic-lh-500: 1.1667; /* Use with font-size-400. */ - --intergalactic-lh-400: 120%; + --intergalactic-lh-400: 1.2; /* Use with font-size-300. */ --intergalactic-lh-300: 1.5; /* Use with font-size-200. */ diff --git a/semcore/core/src/theme/themes/dark.css b/semcore/core/src/theme/themes/dark.css index 3e169f419b..95e1a1578a 100644 --- a/semcore/core/src/theme/themes/dark.css +++ b/semcore/core/src/theme/themes/dark.css @@ -559,7 +559,7 @@ /* Use with font-size-500. */ --intergalactic-lh-500: 1.1667; /* Use with font-size-400. */ - --intergalactic-lh-400: 120%; + --intergalactic-lh-400: 1.2; /* Use with font-size-300. */ --intergalactic-lh-300: 1.5; /* Use with font-size-200. */ diff --git a/semcore/core/src/theme/themes/dark.ts b/semcore/core/src/theme/themes/dark.ts index 128604c528..b9ea9fcea1 100644 --- a/semcore/core/src/theme/themes/dark.ts +++ b/semcore/core/src/theme/themes/dark.ts @@ -314,7 +314,7 @@ export default { '--intergalactic-lh-700': '1.1112', '--intergalactic-lh-600': '1.25', '--intergalactic-lh-500': '1.1667', - '--intergalactic-lh-400': '120%', + '--intergalactic-lh-400': '1.2', '--intergalactic-lh-300': '1.5', '--intergalactic-lh-200': '1.4286', '--intergalactic-lh-100': '1.3334', diff --git a/semcore/core/src/theme/themes/default.css b/semcore/core/src/theme/themes/default.css index 4b84b1f869..d7c100cd04 100644 --- a/semcore/core/src/theme/themes/default.css +++ b/semcore/core/src/theme/themes/default.css @@ -565,7 +565,7 @@ /* Use with font-size-500. */ --intergalactic-lh-500: 1.1667; /* Use with font-size-400. */ - --intergalactic-lh-400: 120%; + --intergalactic-lh-400: 1.2; /* Use with font-size-300. */ --intergalactic-lh-300: 1.5; /* Use with font-size-200. */ diff --git a/semcore/core/src/theme/themes/default.ts b/semcore/core/src/theme/themes/default.ts index 259b641ef4..4664e0fe86 100644 --- a/semcore/core/src/theme/themes/default.ts +++ b/semcore/core/src/theme/themes/default.ts @@ -317,7 +317,7 @@ export default { '--intergalactic-lh-700': '1.1112', '--intergalactic-lh-600': '1.25', '--intergalactic-lh-500': '1.1667', - '--intergalactic-lh-400': '120%', + '--intergalactic-lh-400': '1.2', '--intergalactic-lh-300': '1.5', '--intergalactic-lh-200': '1.4286', '--intergalactic-lh-100': '1.3334', diff --git a/semcore/core/src/theme/themes/light.css b/semcore/core/src/theme/themes/light.css index 4b84b1f869..d7c100cd04 100644 --- a/semcore/core/src/theme/themes/light.css +++ b/semcore/core/src/theme/themes/light.css @@ -565,7 +565,7 @@ /* Use with font-size-500. */ --intergalactic-lh-500: 1.1667; /* Use with font-size-400. */ - --intergalactic-lh-400: 120%; + --intergalactic-lh-400: 1.2; /* Use with font-size-300. */ --intergalactic-lh-300: 1.5; /* Use with font-size-200. */ diff --git a/semcore/core/src/theme/themes/light.ts b/semcore/core/src/theme/themes/light.ts index 259b641ef4..4664e0fe86 100644 --- a/semcore/core/src/theme/themes/light.ts +++ b/semcore/core/src/theme/themes/light.ts @@ -317,7 +317,7 @@ export default { '--intergalactic-lh-700': '1.1112', '--intergalactic-lh-600': '1.25', '--intergalactic-lh-500': '1.1667', - '--intergalactic-lh-400': '120%', + '--intergalactic-lh-400': '1.2', '--intergalactic-lh-300': '1.5', '--intergalactic-lh-200': '1.4286', '--intergalactic-lh-100': '1.3334', diff --git a/semcore/format-text/src/style/format-text.shadow.css b/semcore/format-text/src/style/format-text.shadow.css index 3d64c12177..795f42ac81 100644 --- a/semcore/format-text/src/style/format-text.shadow.css +++ b/semcore/format-text/src/style/format-text.shadow.css @@ -47,7 +47,7 @@ SFormatText { /* 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 { @@ -149,7 +149,7 @@ SFormatText { & 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-medium, 500); margin: 0 0 var(--intergalactic-spacing-2x, 8px) 0; diff --git a/semcore/product-head/src/style/title.shadow.css b/semcore/product-head/src/style/title.shadow.css index fb5f9d05bb..06b6a95144 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/typography/src/style/blockquote.shadow.css b/semcore/typography/src/style/blockquote.shadow.css index 7abc16f561..a960f77a15 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, #191b23); } diff --git a/semcore/typography/src/style/text.shadow.css b/semcore/typography/src/style/text.shadow.css index 0f59b665ad..2ec3e42b62 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 { @@ -152,7 +152,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-2x, 8px) 0; @@ -348,7 +348,7 @@ SText[size='300'] { 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'] { diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json index 0498781e70..7c128ab7fc 100644 --- a/website/docs/style/design-tokens/design-tokens.json +++ b/website/docs/style/design-tokens/design-tokens.json @@ -2365,8 +2365,8 @@ { "name": "--intergalactic-lh-400", "type": "lineHeights", - "rawValue": "120%", - "computedValue": "120%", + "rawValue": "1.2", + "computedValue": "1.2", "description": "Use with font-size-400.", "components": [ "button",