Ändere Tooltip-Hintergrund und Pfeilgröße

semantic-tokens-components.html

@@ -224,7 +224,7 @@
       <tr><td>text-help-icon</td><td>color-font-dark</td><td>Textfarbe im Help-Icon.</td></tr>
       <tr><td>text-help-panel</td><td>color-font-dark</td><td>Textfarbe im Help-Panel.</td></tr>
       <tr><td>layout-help-panel-width</td><td>calc(interaction-height * 8)</td><td>Standardbreite des Help-Panels.</td></tr>
-      <tr><td>surface-tooltip</td><td>color-light-grey</td><td>Fläche der generischen Tooltip-Sprechblase.</td></tr>
+      <tr><td>surface-tooltip</td><td>color-white</td><td>Fläche der generischen Tooltip-Sprechblase.</td></tr>
       <tr><td>text-tooltip</td><td>color-font-dark</td><td>Textfarbe der generischen Tooltip-Sprechblase.</td></tr>
       <tr><td>layout-tooltip-width</td><td>calc(interaction-height * 8)</td><td>Standardbreite der generischen Tooltip-Sprechblase.</td></tr>
       <tr><td>radius-tooltip</td><td>radius-interaction</td><td>Radius der generischen Tooltip-Sprechblase.</td></tr>

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);

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);
+      right: calc(var(--spacing-small) * -2);
-      border-width: var(--spacing-small) 0 var(--spacing-small) var(--spacing-small);
+      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);
+      left: calc(var(--spacing-small) * -2);
-      border-width: var(--spacing-small) var(--spacing-small) var(--spacing-small) 0;
+      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);
+      right: calc(var(--spacing-small) * -2);
-      border-width: var(--spacing-small) 0 var(--spacing-small) var(--spacing-small);
+      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);
+      left: calc(var(--spacing-small) * -2);
-      border-width: var(--spacing-small) var(--spacing-small) var(--spacing-small) 0;
+      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%);
     }