fix(common): added theme support for tooltips (#5242)
Co-authored-by: nivedin <nivedinp@gmail.com>
This commit is contained in:
Anwarul Islam
GitHub
parent
40aca4d35b
commit
e5bb60f8b3
5 changed files with 245 additions and 104 deletions
|
|
@ -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};
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
227
packages/hoppscotch-common/assets/themes/tippy-themes.scss
Normal file
227
packages/hoppscotch-common/assets/themes/tippy-themes.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in a new issue