From 4edff9e222b2cef91b57d2f015c6a6dc6102d1cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= Date: Fri, 25 Sep 2026 13:10:46 +0200 Subject: [PATCH] =?UTF-8?q?=C3=84ndere=20Tooltip-Hintergrund=20und=20Pfeil?= =?UTF-8?q?gr=C3=B6=C3=9Fe?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- semantic-tokens-components.html | 2 +- styles/01-foundations.css | 2 +- styles/10-components-interactive-elements.css | 32 +++++++++---------- 3 files changed, 18 insertions(+), 18 deletions(-) diff --git a/semantic-tokens-components.html b/semantic-tokens-components.html index d9849f4..ebd5ff1 100644 --- a/semantic-tokens-components.html +++ b/semantic-tokens-components.html @@ -224,7 +224,7 @@ text-help-iconcolor-font-darkTextfarbe im Help-Icon. text-help-panelcolor-font-darkTextfarbe im Help-Panel. layout-help-panel-widthcalc(interaction-height * 8)Standardbreite des Help-Panels. - surface-tooltipcolor-light-greyFläche der generischen Tooltip-Sprechblase. + surface-tooltipcolor-whiteFläche der generischen Tooltip-Sprechblase. text-tooltipcolor-font-darkTextfarbe der generischen Tooltip-Sprechblase. layout-tooltip-widthcalc(interaction-height * 8)Standardbreite der generischen Tooltip-Sprechblase. radius-tooltipradius-interactionRadius der generischen Tooltip-Sprechblase. diff --git a/styles/01-foundations.css b/styles/01-foundations.css index e43b72e..5f2fcd4 100644 --- a/styles/01-foundations.css +++ b/styles/01-foundations.css @@ -64,7 +64,7 @@ --surface-menu-panel-portal: var(--color-light-grey); --surface-help-icon: var(--color-medium-grey); --surface-help-panel: var(--color-light-grey); - --surface-tooltip: var(--color-light-grey); + --surface-tooltip: var(--color-white); --surface-pulldown-panel: var(--color-light-grey); --surface-activatable-remove: var(--surface-control-default); --surface-slider-track: var(--color-medium-grey); diff --git a/styles/10-components-interactive-elements.css b/styles/10-components-interactive-elements.css index 1776b76..82fa878 100644 --- a/styles/10-components-interactive-elements.css +++ b/styles/10-components-interactive-elements.css @@ -1295,33 +1295,33 @@ } .sg-tooltip-wrap[data-tooltip-placement="bottom"] .sg-tooltip-panel::before { - top: calc(var(--spacing-small) * -1); + top: calc(var(--spacing-small) * -2); left: 50%; - border-width: 0 var(--spacing-small) var(--spacing-small); + border-width: 0 calc(var(--spacing-small) * 2) calc(var(--spacing-small) * 2); border-color: transparent transparent var(--surface-tooltip); transform: translateX(-50%); } .sg-tooltip-wrap[data-tooltip-placement="top"] .sg-tooltip-panel::before { - bottom: calc(var(--spacing-small) * -1); + bottom: calc(var(--spacing-small) * -2); left: 50%; - border-width: var(--spacing-small) var(--spacing-small) 0; + border-width: calc(var(--spacing-small) * 2) calc(var(--spacing-small) * 2) 0; border-color: var(--surface-tooltip) transparent transparent; transform: translateX(-50%); } .sg-tooltip-wrap[data-tooltip-placement="left"] .sg-tooltip-panel::before { top: 50%; - right: calc(var(--spacing-small) * -1); - border-width: var(--spacing-small) 0 var(--spacing-small) var(--spacing-small); + right: calc(var(--spacing-small) * -2); + border-width: calc(var(--spacing-small) * 2) 0 calc(var(--spacing-small) * 2) calc(var(--spacing-small) * 2); border-color: transparent transparent transparent var(--surface-tooltip); transform: translateY(-50%); } .sg-tooltip-wrap[data-tooltip-placement="right"] .sg-tooltip-panel::before { top: 50%; - left: calc(var(--spacing-small) * -1); - border-width: var(--spacing-small) var(--spacing-small) var(--spacing-small) 0; + left: calc(var(--spacing-small) * -2); + border-width: calc(var(--spacing-small) * 2) calc(var(--spacing-small) * 2) calc(var(--spacing-small) * 2) 0; border-color: transparent var(--surface-tooltip) transparent transparent; transform: translateY(-50%); } @@ -1336,33 +1336,33 @@ } .sg-tooltip-panel[data-tooltip-portal="true"][data-tooltip-placement="bottom"]::before { - top: calc(var(--spacing-small) * -1); + top: calc(var(--spacing-small) * -2); left: var(--tooltip-arrow-offset); - border-width: 0 var(--spacing-small) var(--spacing-small); + border-width: 0 calc(var(--spacing-small) * 2) calc(var(--spacing-small) * 2); border-color: transparent transparent var(--surface-tooltip); transform: translateX(-50%); } .sg-tooltip-panel[data-tooltip-portal="true"][data-tooltip-placement="top"]::before { - bottom: calc(var(--spacing-small) * -1); + bottom: calc(var(--spacing-small) * -2); left: var(--tooltip-arrow-offset); - border-width: var(--spacing-small) var(--spacing-small) 0; + border-width: calc(var(--spacing-small) * 2) calc(var(--spacing-small) * 2) 0; border-color: var(--surface-tooltip) transparent transparent; transform: translateX(-50%); } .sg-tooltip-panel[data-tooltip-portal="true"][data-tooltip-placement="left"]::before { top: var(--tooltip-arrow-offset); - right: calc(var(--spacing-small) * -1); - border-width: var(--spacing-small) 0 var(--spacing-small) var(--spacing-small); + right: calc(var(--spacing-small) * -2); + border-width: calc(var(--spacing-small) * 2) 0 calc(var(--spacing-small) * 2) calc(var(--spacing-small) * 2); border-color: transparent transparent transparent var(--surface-tooltip); transform: translateY(-50%); } .sg-tooltip-panel[data-tooltip-portal="true"][data-tooltip-placement="right"]::before { top: var(--tooltip-arrow-offset); - left: calc(var(--spacing-small) * -1); - border-width: var(--spacing-small) var(--spacing-small) var(--spacing-small) 0; + left: calc(var(--spacing-small) * -2); + border-width: calc(var(--spacing-small) * 2) calc(var(--spacing-small) * 2) calc(var(--spacing-small) * 2) 0; border-color: transparent var(--surface-tooltip) transparent transparent; transform: translateY(-50%); }