From e5bb60f8b3ccff752e8902a56718966099b2a2c6 Mon Sep 17 00:00:00 2001 From: Anwarul Islam Date: Fri, 25 Jul 2025 14:06:09 +0600 Subject: [PATCH] fix(common): added theme support for tooltips (#5242) Co-authored-by: nivedin --- .../hoppscotch-common/assets/scss/styles.scss | 101 -------- .../assets/themes/themes.scss | 5 + .../assets/themes/tippy-themes.scss | 227 ++++++++++++++++++ packages/hoppscotch-common/package.json | 2 +- pnpm-lock.yaml | 14 +- 5 files changed, 245 insertions(+), 104 deletions(-) create mode 100644 packages/hoppscotch-common/assets/themes/tippy-themes.scss diff --git a/packages/hoppscotch-common/assets/scss/styles.scss b/packages/hoppscotch-common/assets/scss/styles.scss index a16d71e7..79a83dcf 100644 --- a/packages/hoppscotch-common/assets/scss/styles.scss +++ b/packages/hoppscotch-common/assets/scss/styles.scss @@ -153,107 +153,6 @@ a { } } -.cm-tooltip { - .tippy-box { - @apply shadow-none #{!important}; - @apply fixed; - @apply inline-flex; - } -} - -.tippy-box[data-theme~="tooltip"] { - @apply bg-tooltip; - @apply border-solid border-tooltip; - @apply rounded; - @apply shadow; - - .env-tooltip-content { - @apply flex-col; - } - - .tippy-content { - @apply flex; - @apply text-tiny text-primary; - @apply font-semibold; - @apply px-2 py-1; - @apply truncate; - @apply leading-body; - @apply items-center; - - kbd { - @apply hidden; - @apply font-sans; - background-color: rgba(107, 114, 128, 0.45); - @apply text-primaryLight; - @apply rounded-sm; - @apply px-1; - @apply my-0 ml-1; - @apply truncate; - @apply sm:inline-flex; - } - - .env-icon { - @apply transition; - @apply inline-flex; - @apply items-center; - } - } - - .tippy-svg-arrow { - svg:first-child { - @apply fill-tooltip; - } - - svg:last-child { - @apply fill-tooltip; - } - } -} - -.tippy-box[data-theme~="popover"] { - @apply bg-popover; - @apply border-solid border-dividerDark; - @apply rounded; - @apply shadow-lg; - @apply max-w-[45vw] #{!important}; - - .tippy-content { - @apply flex flex-col; - @apply max-h-[45vh]; - @apply items-stretch; - @apply overflow-y-auto; - @apply text-body text-secondary; - @apply p-2; - @apply leading-body; - @apply focus:outline-none; - scroll-behavior: smooth; - - & > span { - @apply block #{!important}; - } - } - - .tippy-svg-arrow { - svg:first-child { - @apply fill-dividerDark; - } - - svg:last-child { - @apply fill-popover; - } - } -} - -[data-v-tippy] { - @apply flex flex-1; - @apply truncate; -} - -[interactive] > div { - @apply flex flex-1; - @apply h-full; -} - hr { @apply border-b border-dividerLight; @apply my-2 #{!important}; diff --git a/packages/hoppscotch-common/assets/themes/themes.scss b/packages/hoppscotch-common/assets/themes/themes.scss index f6401e21..cbf4b509 100644 --- a/packages/hoppscotch-common/assets/themes/themes.scss +++ b/packages/hoppscotch-common/assets/themes/themes.scss @@ -1,29 +1,34 @@ @import "./base-themes.scss"; @import "./editor-themes.scss"; @import "./accent-themes.scss"; +@import "./tippy-themes.scss"; :root { @include base-theme; @include dark-theme; @include green-theme; @include dark-editor-theme; + @include dark-tippy-theme; } :root.light { @include light-theme; @include light-editor-theme; + @include light-tippy-theme; color-scheme: light; } :root.dark { @include dark-theme; @include dark-editor-theme; + @include dark-tippy-theme; color-scheme: dark; } :root.black { @include black-theme; @include black-editor-theme; + @include black-tippy-theme; color-scheme: dark; } diff --git a/packages/hoppscotch-common/assets/themes/tippy-themes.scss b/packages/hoppscotch-common/assets/themes/tippy-themes.scss new file mode 100644 index 00000000..041658de --- /dev/null +++ b/packages/hoppscotch-common/assets/themes/tippy-themes.scss @@ -0,0 +1,227 @@ +// Base shared styles for all tippy themes +@mixin base-tippy-styles { + .cm-tooltip { + .tippy-box { + @apply shadow-none #{!important}; + @apply fixed; + @apply inline-flex; + } + } + + .tippy-box[data-theme~="tooltip"] { + @apply rounded; + + .env-tooltip-content { + @apply flex-col; + } + + .tippy-content { + @apply flex; + @apply text-tiny; + @apply font-semibold; + @apply px-2 py-1; + @apply truncate; + @apply leading-body; + @apply items-center; + + kbd { + @apply hidden; + @apply font-sans; + @apply rounded-sm; + @apply px-1; + @apply my-0 ml-1; + @apply truncate; + @apply sm:inline-flex; + @apply justify-center; + min-width: 17px; + } + + .env-icon { + @apply transition; + @apply inline-flex; + @apply items-center; + } + } + } + + .tippy-box[data-theme~="popover"] { + @apply bg-popover; + @apply border-solid; + @apply rounded; + @apply max-w-[45vw] #{!important}; + + .tippy-content { + @apply flex flex-col; + @apply max-h-[45vh]; + @apply items-stretch; + @apply overflow-y-auto; + @apply text-body text-secondary; + @apply p-2; + @apply leading-body; + @apply focus:outline-none; + scroll-behavior: smooth; + + & > span { + @apply block #{!important}; + } + } + + .tippy-svg-arrow { + svg:last-child { + @apply fill-popover; + } + } + } + + [data-v-tippy] { + @apply flex flex-1; + @apply truncate; + } + + [interactive] > div { + @apply flex flex-1; + @apply h-full; + } +} + +// Theme-specific styles +@mixin light-tippy-theme { + @include base-tippy-styles; + + .cm-tooltip { + .cm-tooltip-arrow:after, + .cm-tooltip-arrow:before { + border-bottom-color: theme("colors.primaryDark") !important; + } + } + + .tippy-box[data-theme~="tooltip"] { + @apply bg-popover; + @apply border-solid border-dividerDark; + @apply shadow; + + .tippy-content { + @apply text-secondary; + + kbd { + background-color: rgba(0, 0, 0, 0.1); + @apply text-secondaryDark; + } + } + + .tippy-svg-arrow { + svg:first-child { + @apply fill-dividerDark; + } + + svg:last-child { + @apply fill-popover; + } + } + } + + .tippy-box[data-theme~="popover"] { + @apply border-dividerDark; + @apply shadow-lg; + + .tippy-svg-arrow { + svg:first-child { + @apply fill-dividerDark; + } + } + } +} + +@mixin dark-tippy-theme { + @include base-tippy-styles; + + .cm-tooltip { + .cm-tooltip-arrow::after, + .cm-tooltip-arrow::before { + border-bottom-color: theme("colors.primaryDark") !important; + } + } + + .tippy-box[data-theme~="tooltip"] { + @apply bg-primaryDark; + @apply border-solid; + @apply shadow-lg; + + .tippy-content { + @apply text-secondary; + + kbd { + background-color: rgba(255, 255, 255, 0.1); + @apply text-secondary; + } + } + + .tippy-svg-arrow { + svg:first-child { + @apply fill-primaryDark; + } + + svg:last-child { + @apply fill-primaryDark; + } + } + } + + .tippy-box[data-theme~="popover"] { + @apply border-divider; + @apply shadow-xl; + + .tippy-svg-arrow { + svg:first-child { + @apply fill-divider; + } + } + } +} + +@mixin black-tippy-theme { + @include base-tippy-styles; + + .cm-tooltip { + .cm-tooltip-arrow:after, + .cm-tooltip-arrow:before { + border-bottom-color: theme("colors.primaryLight") !important; + } + } + + .tippy-box[data-theme~="tooltip"] { + @apply bg-primaryLight; + @apply border-solid border-[#33363d]; + @apply shadow-lg; + + .tippy-content { + @apply text-secondary; + + kbd { + background-color: rgba(255, 255, 255, 0.1); + @apply text-secondary; + } + } + + .tippy-svg-arrow { + svg:first-child { + @apply fill-primaryLight; + } + + svg:last-child { + @apply fill-primaryLight; + } + } + } + + .tippy-box[data-theme~="popover"] { + @apply border-divider; + @apply shadow-xl; + + .tippy-svg-arrow { + svg:first-child { + @apply fill-divider; + } + } + } +} diff --git a/packages/hoppscotch-common/package.json b/packages/hoppscotch-common/package.json index 29adfba0..6678e8a0 100644 --- a/packages/hoppscotch-common/package.json +++ b/packages/hoppscotch-common/package.json @@ -111,7 +111,7 @@ "vue-json-pretty": "2.4.0", "vue-pdf-embed": "2.1.0", "vue-router": "4.4.5", - "vue-tippy": "6.5.0", + "vue-tippy": "6.7.0", "vuedraggable-es": "4.1.1", "wonka": "6.3.4", "workbox-window": "7.1.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index dc2ae3fe..ce2cb262 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -741,8 +741,8 @@ importers: specifier: 4.4.5 version: 4.4.5(vue@3.5.12(typescript@5.8.3)) vue-tippy: - specifier: 6.5.0 - version: 6.5.0(vue@3.5.12(typescript@5.8.3)) + specifier: 6.7.0 + version: 6.7.0(vue@3.5.12(typescript@5.8.3)) vuedraggable-es: specifier: 4.1.1 version: 4.1.1(vue@3.5.12(typescript@5.8.3)) @@ -14062,6 +14062,11 @@ packages: peerDependencies: vue: 3.5.12 + vue-tippy@6.7.0: + resolution: {integrity: sha512-e0w6UA+A+J79GhDYNw5xZjGu7Tc2ksYypwF5RjkJVWgAGNSpXkLVNx4gZ8cMUa8FRHqmGAZxN3ue7MeXgbeZAQ==} + peerDependencies: + vue: 3.5.12 + vue-tsc@1.8.24: resolution: {integrity: sha512-eH1CSj231OzVEY5Hi7wS6ubzyOEwgr5jCptR0Ddf2SitGcaXIsPVDvrprm3eolCdyhDt3WS1Eb2F4fGX9BsUUw==} hasBin: true @@ -30725,6 +30730,11 @@ snapshots: tippy.js: 6.3.7 vue: 3.5.12(typescript@5.8.3) + vue-tippy@6.7.0(vue@3.5.12(typescript@5.8.3)): + dependencies: + tippy.js: 6.3.7 + vue: 3.5.12(typescript@5.8.3) + vue-tsc@1.8.24(typescript@5.8.3): dependencies: '@volar/typescript': 1.11.1