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-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/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%); }