diff --git a/packages/web/src/scss/components/Tooltip/_theme.scss b/packages/web/src/scss/components/Tooltip/_theme.scss index 59ff9d1bed..d43b28e5db 100644 --- a/packages/web/src/scss/components/Tooltip/_theme.scss +++ b/packages/web/src/scss/components/Tooltip/_theme.scss @@ -1,23 +1,24 @@ -@use '@tokens' as tokens; +@use '@global' as global-tokens; @use '../../settings/dictionaries'; +@use '../../settings/globals'; @use '../../settings/transitions'; $max-width: 288px; -$typography: tokens.$body-medium-text-regular; -$padding: tokens.$space-500 tokens.$space-600; -$gap: tokens.$space-500; -$border-radius: tokens.$radius-100; -$color: tokens.$text-primary-inverted-default; -$background-color: tokens.$background-inverted; -$box-shadow: tokens.$shadow-400; +$typography: global-tokens.$body-medium-regular; +$padding: global-tokens.$space-600 global-tokens.$space-700; +$gap: global-tokens.$space-600; +$border-radius: global-tokens.$radius-300; +$color: var(--#{globals.$prefix}color-neutral-content-subtle); +$background-color: var(--#{globals.$prefix}color-neutral-background-basic); +$box-shadow: global-tokens.$shadow-400; $transition-duration: transitions.$duration-200; $transition-scale-ratio: transitions.$scale-ratio-small-objects; -$arrow-shape: url('data:image/svg+xml,'); +$arrow-shape: var(--#{globals.$prefix}tooltip-arrow-background-image-url); $arrow-width: 13px; $arrow-height: 8px; -$arrow-corner-offset: tokens.$space-500; +$arrow-corner-offset: global-tokens.$space-600; -$close-button-size: tokens.$space-700; +$close-button-size: global-tokens.$space-900; $placement-dictionary: dictionaries.$placement; diff --git a/packages/web/src/scss/components/Tooltip/index.html b/packages/web/src/scss/components/Tooltip/index.html index d80aa805db..d2a1b862fd 100644 --- a/packages/web/src/scss/components/Tooltip/index.html +++ b/packages/web/src/scss/components/Tooltip/index.html @@ -410,8 +410,8 @@
+
Try scrolling the frame or resizing the window to see how the Tooltip behaves. The Floating UI library is trying to keep the Tooltip in the viewport and it is also flipping, shifting and resizing the Tooltip when it is not possible to keep it in the viewport.
-