diff --git a/docs/styleguide/semantic-tokens-components.html b/docs/styleguide/semantic-tokens-components.html
index d9849f4..ebd5ff1 100644
--- a/docs/styleguide/semantic-tokens-components.html
+++ b/docs/styleguide/semantic-tokens-components.html
@@ -224,7 +224,7 @@
| text-help-icon | color-font-dark | Textfarbe im Help-Icon. |
| text-help-panel | color-font-dark | Textfarbe im Help-Panel. |
| layout-help-panel-width | calc(interaction-height * 8) | Standardbreite des Help-Panels. |
- | surface-tooltip | color-light-grey | Fläche der generischen Tooltip-Sprechblase. |
+ | surface-tooltip | color-white | Fläche der generischen Tooltip-Sprechblase. |
| text-tooltip | color-font-dark | Textfarbe der generischen Tooltip-Sprechblase. |
| layout-tooltip-width | calc(interaction-height * 8) | Standardbreite der generischen Tooltip-Sprechblase. |
| radius-tooltip | radius-interaction | Radius der generischen Tooltip-Sprechblase. |
diff --git a/docs/styleguide/styles/01-foundations.css b/docs/styleguide/styles/01-foundations.css
index e43b72e..5f2fcd4 100644
--- a/docs/styleguide/styles/01-foundations.css
+++ b/docs/styleguide/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/docs/styleguide/styles/10-components-interactive-elements.css b/docs/styleguide/styles/10-components-interactive-elements.css
index 1776b76..82fa878 100644
--- a/docs/styleguide/styles/10-components-interactive-elements.css
+++ b/docs/styleguide/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%);
}
diff --git a/public/assets/styleguide.upstream.css b/public/assets/styleguide.upstream.css
index b28ae12..ac12aad 100644
--- a/public/assets/styleguide.upstream.css
+++ b/public/assets/styleguide.upstream.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);
@@ -1820,33 +1820,33 @@ section + section {
}
.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%);
}
@@ -1861,33 +1861,33 @@ section + section {
}
.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%);
}
diff --git a/public/assets/styleguide.upstream.meta.json b/public/assets/styleguide.upstream.meta.json
index 06b97eb..dff6f97 100644
--- a/public/assets/styleguide.upstream.meta.json
+++ b/public/assets/styleguide.upstream.meta.json
@@ -1,7 +1,7 @@
{
"styleguideVersion": "2026.05.18.2",
- "styleguideCommit": "519ed6b",
- "syncedAtUtc": "2026-09-24T11:09:21Z",
+ "styleguideCommit": "4edff9e",
+ "syncedAtUtc": "2026-09-25T11:10:49Z",
"sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide",
"mirroredDocsPath": "docs/styleguide"
}
diff --git a/public/assets/styles.css b/public/assets/styles.css
index b28ae12..ac12aad 100644
--- a/public/assets/styles.css
+++ b/public/assets/styles.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);
@@ -1820,33 +1820,33 @@ section + section {
}
.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%);
}
@@ -1861,33 +1861,33 @@ section + section {
}
.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%);
}