From 2330bcfc63d06fec3f812777f2437a82a9188c26 Mon Sep 17 00:00:00 2001 From: "ilia.brauer" Date: Tue, 28 Jul 2026 10:31:22 +0200 Subject: [PATCH 1/3] [hint] changed bg --- .../base-components/src/components/hint/style/hint.shadow.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 42e1b824a8..fdf1d69857 100644 --- a/semcore/base-components/src/components/hint/style/hint.shadow.css +++ b/semcore/base-components/src/components/hint/style/hint.shadow.css @@ -8,8 +8,8 @@ SHintPopper { opacity: 0; pointer-events: none; - background: var(--intergalactic-tooltip-invert, oklch(0.23 0.01 140)); /* TODO: --intergalactic-tooltip-bg-invert or consider adding hint category */ - border: 1px solid var(--intergalactic-border-tooltip-invert, oklch(0.995 0.008 145.9 / 0.369)); /* TODO: --intergalactic-tooltip-border-invert or consider adding hint category */ + background: var(--intergalactic-tooltip-bg-invert, oklch(0.23 0.01 140)); + border: 1px solid var(--intergalactic-tooltip-border-invert, oklch(0.995 0.008 145.9 / 0.369)); color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); padding: var(--intergalactic-spacing-1x, 4px) var(--intergalactic-spacing-2x, 8px); border-radius: var(--intergalactic-rounded-small, 4px); From 8bb8b04f04139d09e307a4618cc40900b124650b Mon Sep 17 00:00:00 2001 From: "ilia.brauer" Date: Tue, 28 Jul 2026 10:36:30 +0200 Subject: [PATCH 2/3] [tooltip] changed bg and paddings --- .../src/components/hint/style/hint.shadow.css | 2 +- semcore/tooltip/src/style/tooltip.shadow.css | 14 +++++++------- 2 files changed, 8 insertions(+), 8 deletions(-) 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 fdf1d69857..6cc8ed39f3 100644 --- a/semcore/base-components/src/components/hint/style/hint.shadow.css +++ b/semcore/base-components/src/components/hint/style/hint.shadow.css @@ -10,7 +10,7 @@ SHintPopper { background: var(--intergalactic-tooltip-bg-invert, oklch(0.23 0.01 140)); border: 1px solid var(--intergalactic-tooltip-border-invert, oklch(0.995 0.008 145.9 / 0.369)); - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); + color: var(--intergalactic-tooltip-text-invert, oklch(0.999 0.001 180 / 0.949)); padding: var(--intergalactic-spacing-1x, 4px) var(--intergalactic-spacing-2x, 8px); border-radius: var(--intergalactic-rounded-small, 4px); font-size: var(--intergalactic-fs-100, 12px); diff --git a/semcore/tooltip/src/style/tooltip.shadow.css b/semcore/tooltip/src/style/tooltip.shadow.css index 6a2e50be7c..2cd94b91da 100644 --- a/semcore/tooltip/src/style/tooltip.shadow.css +++ b/semcore/tooltip/src/style/tooltip.shadow.css @@ -1,9 +1,9 @@ STooltip { position: relative; - padding: var(--intergalactic-spacing-3x, 12px); + padding: var(--intergalactic-spacing-content-inset-inline, 12px); border-radius: var(--intergalactic-popper-rounded, 6px); box-sizing: border-box; - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); /* TODO: --intergalactic-tooltip-text */ + 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%); word-wrap: break-word; @@ -15,18 +15,18 @@ STooltip { /* stylelint-disable-next-line no-duplicate-selectors */ STooltip { - background-color: var(--intergalactic-tooltip-default, oklch(1 0 0)); /* TODO: --intergalactic-tooltip-bg-default */ + background-color: var(--intergalactic-tooltip-bg-default, oklch(1 0 0)); /* TODO: --intergalactic-tooltip-bg-default */ border: 1px solid var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07)); } STooltip[theme='invert'] { - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-tooltip-text-invert */ - background-color: var(--intergalactic-tooltip-invert, oklch(0.23 0.01 140)); /* TODO: --intergalactic-tooltip-bg-invert */ - border: 1px solid var(--intergalactic-border-tooltip-invert, oklch(0.995 0.008 145.9 / 0.369)); /* TODO: --intergalactic-tooltip-border-invert */ + color: var(--intergalactic-tooltip-text-invert, oklch(0.999 0.001 180 / 0.949)); + background-color: var(--intergalactic-tooltip-bg-invert, oklch(0.23 0.01 140)); + border: 1px solid var(--intergalactic-tooltip-border-invert, oklch(0.995 0.008 145.9 / 0.369)); } STooltip[theme='warning'] { - background-color: var(--intergalactic-tooltip-warning, oklch(0.958 0.029 5.7)); /* TODO: --intergalactic-tooltip-bg-warning */ + background-color: var(--intergalactic-tooltip-bg-warning, oklch(0.958 0.029 5.7)); border: 1px solid var(--intergalactic-border-critical-active, oklch(0.7 0.21 23)); } From b32b2eeef8978d73626e1543e8a3b807e178deaa Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Tue, 28 Jul 2026 17:33:15 +0200 Subject: [PATCH 3/3] [tooltip] update vars names --- .../src/components/hint/style/hint.shadow.css | 2 +- semcore/tooltip/src/style/tooltip.shadow.css | 12 +++--- .../style/design-tokens/design-tokens.json | 41 +++++++++++++------ 3 files changed, 36 insertions(+), 19 deletions(-) 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 6cc8ed39f3..f455893090 100644 --- a/semcore/base-components/src/components/hint/style/hint.shadow.css +++ b/semcore/base-components/src/components/hint/style/hint.shadow.css @@ -11,7 +11,7 @@ SHintPopper { background: var(--intergalactic-tooltip-bg-invert, oklch(0.23 0.01 140)); border: 1px solid var(--intergalactic-tooltip-border-invert, oklch(0.995 0.008 145.9 / 0.369)); color: var(--intergalactic-tooltip-text-invert, oklch(0.999 0.001 180 / 0.949)); - padding: var(--intergalactic-spacing-1x, 4px) var(--intergalactic-spacing-2x, 8px); + 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%); diff --git a/semcore/tooltip/src/style/tooltip.shadow.css b/semcore/tooltip/src/style/tooltip.shadow.css index 2cd94b91da..3c3d597b18 100644 --- a/semcore/tooltip/src/style/tooltip.shadow.css +++ b/semcore/tooltip/src/style/tooltip.shadow.css @@ -1,6 +1,6 @@ STooltip { position: relative; - padding: var(--intergalactic-spacing-content-inset-inline, 12px); + padding: var(--intergalactic-spacing-content-padding-medium, 12px); border-radius: var(--intergalactic-popper-rounded, 6px); box-sizing: border-box; color: var(--intergalactic-tooltip-text, oklch(0.1 0.03 137 / 0.899)); @@ -15,7 +15,7 @@ STooltip { /* stylelint-disable-next-line no-duplicate-selectors */ STooltip { - background-color: var(--intergalactic-tooltip-bg-default, oklch(1 0 0)); /* TODO: --intergalactic-tooltip-bg-default */ + background-color: var(--intergalactic-tooltip-bg-default, oklch(1 0 0)); border: 1px solid var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07)); } @@ -47,15 +47,15 @@ SArrow { /* stylelint-disable-next-line no-duplicate-selectors */ &:before { - border-color: var(--intergalactic-tooltip-default, oklch(1 0 0)); /* TODO: --intergalactic-tooltip-bg-default */ + border-color: var(--intergalactic-tooltip-bg-default, oklch(1 0 0)); } } SArrow[theme='invert'] { - border-color: var(--intergalactic-border-tooltip-invert, oklch(0.995 0.008 145.9 / 0.369)); /* TODO: --intergalactic-tooltip-border-invert */ + border-color: var(--intergalactic-tooltip-border-invert, oklch(0.995 0.008 145.9 / 0.369)); &::before { - border-color: var(--intergalactic-tooltip-invert, oklch(0.23 0.01 140)); /* TODO: --intergalactic-tooltip-bg-invert */ + border-color: var(--intergalactic-tooltip-border-invert, oklch(0.995 0.008 145.9 / 0.369)); } } @@ -63,7 +63,7 @@ SArrow[theme='warning'] { border-color: var(--intergalactic-border-critical-active, oklch(0.7 0.21 23)); &::before { - border-color: var(--intergalactic-tooltip-warning, oklch(0.958 0.029 5.7)); /* TODO: --intergalactic-tooltip-bg-warning */ + border-color: var(--intergalactic-tooltip-bg-warning, oklch(0.958 0.029 5.7)); } } diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json index aa08c08a37..0e1bebc458 100644 --- a/website/docs/style/design-tokens/design-tokens.json +++ b/website/docs/style/design-tokens/design-tokens.json @@ -2827,7 +2827,6 @@ "tab-panel", "textarea", "time-picker", - "tooltip", "typography" ] }, @@ -2837,14 +2836,12 @@ "description": "Inverted version of the primary text.", "components": [ "badge", - "base-components", "date-picker", "dot", "feature-highlight", "feature-popover", "notice-bubble", "tag", - "tooltip", "wizard" ] }, @@ -2894,37 +2891,52 @@ "name": "--intergalactic-tooltip-bg-default", "value": "oklch(1 0 0)", "description": "Default Tooltip background.", - "components": [] + "components": [ + "tooltip" + ] }, { "name": "--intergalactic-tooltip-bg-invert", "value": "oklch(0.23 0.01 140)", "description": "Inverted version of the default Tooltip background.", - "components": [] + "components": [ + "base-components", + "tooltip" + ] }, { "name": "--intergalactic-tooltip-bg-warning", "value": "oklch(0.958 0.029 5.7)", "description": "Warning Tooltip background.", - "components": [] + "components": [ + "tooltip" + ] }, { "name": "--intergalactic-tooltip-border-invert", "value": "oklch(0.995 0.008 145.9 / 0.369)", "description": "Border of the Tooltip with dark theme.", - "components": [] + "components": [ + "base-components", + "tooltip" + ] }, { "name": "--intergalactic-tooltip-text", "value": "oklch(0.1 0.03 137 / 0.899)", "description": "Text color of the default Tooltip.", - "components": [] + "components": [ + "tooltip" + ] }, { "name": "--intergalactic-tooltip-text-invert", "value": "oklch(0.999 0.001 180 / 0.949)", "description": "Text color of the inverted Tooltip.", - "components": [] + "components": [ + "base-components", + "tooltip" + ] }, { "name": "--intergalactic-wizard-bg", @@ -3126,13 +3138,17 @@ "name": "--intergalactic-spacing-content-padding-xsmall", "value": "4px", "description": "Extra small padding for content inside controls and surfaces.", - "components": [] + "components": [ + "base-components" + ] }, { "name": "--intergalactic-spacing-content-padding-small", "value": "8px", "description": "Small padding for content inside controls and surfaces.", - "components": [] + "components": [ + "base-components" + ] }, { "name": "--intergalactic-spacing-content-padding-medium", @@ -3141,7 +3157,8 @@ "components": [ "button", "input", - "time-picker" + "time-picker", + "tooltip" ] }, {