@lukso/web-components 1.49.2 → 1.51.0

package/dist/shared/tailwind-element/index.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-c04e4744.cjs');
+const shared_tailwindElement_index = require('../../index-aaa67d55.cjs');
 
 
 

package/dist/shared/tailwind-element/index.js

@@ -1 +1 @@
-export { a as TailwindElement, T as TailwindStyledElement } from '../../index-cfea1b58.js';
+export { a as TailwindElement, T as TailwindStyledElement } from '../../index-2f5488b6.js';

package/dist/{style-map-ea2513e4.cjs → style-map-74906707.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-const shared_tailwindElement_index = require('./index-c04e4744.cjs');
+const shared_tailwindElement_index = require('./index-aaa67d55.cjs');
 const directive = require('./directive-8278ab14.cjs');
 
 /**

package/dist/{style-map-b2a337a1.js → style-map-88b4d8ad.js}

@@ -1,4 +1,4 @@
-import { b as T } from './index-cfea1b58.js';
+import { b as T } from './index-2f5488b6.js';
 import { e, i as i$1, t } from './directive-2bb7789e.js';
 
 /**

package/dist/styles/main.css

@@ -317,6 +317,236 @@
   *
   * This file contains all CSS variables used in designs.
   */
+.tippy-box[data-animation=fade][data-state=hidden] {
+  opacity: 0;
+}
+
+.tippy-arrow::before {
+  content: "";
+  position: absolute;
+  border-color: transparent;
+  border-style: solid;
+}
+
+.tippy-box[data-placement^=top] > .tippy-arrow::before {
+  border-top-color: initial;
+  transform-origin: center top;
+}
+
+.tippy-box[data-placement^=bottom] > .tippy-arrow::before {
+  border-bottom-color: initial;
+  transform-origin: center bottom;
+}
+
+.tippy-box[data-placement^=left] > .tippy-arrow::before {
+  border-left-color: initial;
+  transform-origin: center left;
+}
+
+.tippy-box[data-placement^=right] > .tippy-arrow::before {
+  border-right-color: initial;
+  transform-origin: center right;
+}
+
+.tippy-box[data-inertia][data-state=visible] {
+  transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
+}
+
+.tippy-arrow {
+  width: 16px;
+  height: 16px;
+}
+
+.tippy-size-medium {
+  @apply px-2 py-2 rounded-4 text-10 not-italic font-600 leading-12 font-inter shadow-neutral-drop-shadow-1xl;
+}
+.tippy-size-medium[data-placement^=top] > .tippy-arrow {
+  bottom: 0;
+}
+.tippy-size-medium[data-placement^=top] > .tippy-arrow::before {
+  bottom: -6px;
+  left: 2px;
+  border-width: 6px 6px 0;
+}
+.tippy-size-medium[data-placement^=bottom] > .tippy-arrow {
+  top: 0;
+}
+.tippy-size-medium[data-placement^=bottom] > .tippy-arrow::before {
+  top: -6px;
+  left: 2px;
+  border-width: 0 6px 6px;
+}
+.tippy-size-medium[data-placement^=left] > .tippy-arrow {
+  right: 0;
+}
+.tippy-size-medium[data-placement^=left] > .tippy-arrow::before {
+  border-width: 6px 0 6px 6px;
+  right: -6px;
+  top: 2px;
+}
+.tippy-size-medium[data-placement^=right] > .tippy-arrow {
+  left: 0;
+}
+.tippy-size-medium[data-placement^=right] > .tippy-arrow::before {
+  left: -6px;
+  top: 2px;
+  border-width: 6px 6px 6px 0;
+}
+
+.tippy-size-large {
+  @apply px-3 py-2 rounded-8 text-12 not-italic font-400 leading-20 font-inter shadow-neutral-drop-shadow-1xl;
+}
+.tippy-size-large[data-placement^=top] > .tippy-arrow {
+  bottom: 0;
+}
+.tippy-size-large[data-placement^=top] > .tippy-arrow::before {
+  bottom: -8px;
+  left: 0;
+  border-width: 8px 8px 0;
+}
+.tippy-size-large[data-placement^=bottom] > .tippy-arrow {
+  top: 0;
+}
+.tippy-size-large[data-placement^=bottom] > .tippy-arrow::before {
+  top: -8px;
+  left: 0;
+  border-width: 0 8px 8px;
+}
+.tippy-size-large[data-placement^=left] > .tippy-arrow {
+  right: 0;
+}
+.tippy-size-large[data-placement^=left] > .tippy-arrow::before {
+  border-width: 8px 0 8px 8px;
+  right: -8px;
+}
+.tippy-size-large[data-placement^=right] > .tippy-arrow {
+  left: 0;
+}
+.tippy-size-large[data-placement^=right] > .tippy-arrow::before {
+  left: -8px;
+  border-width: 8px 8px 8px 0;
+}
+
+.tippy-variant-dark {
+  @apply text-neutral-100 bg-neutral-30;
+}
+.tippy-variant-dark[data-placement^=top] .tippy-arrow::before {
+  @apply border-t-neutral-30;
+}
+.tippy-variant-dark[data-placement^=bottom] .tippy-arrow::before {
+  @apply border-b-neutral-30;
+}
+.tippy-variant-dark[data-placement^=left] .tippy-arrow::before {
+  @apply border-l-neutral-30;
+}
+.tippy-variant-dark[data-placement^=right] .tippy-arrow::before {
+  @apply border-r-neutral-30;
+}
+.tippy-variant-dark > .tippy-backdrop {
+  @apply bg-neutral-30;
+}
+.tippy-variant-dark > .tippy-svg-arrow {
+  @apply fill-neutral-30;
+}
+
+.tippy-variant-light {
+  @apply text-neutral-20 bg-neutral-97;
+}
+.tippy-variant-light[data-placement^=top] .tippy-arrow::before {
+  @apply border-t-neutral-97;
+}
+.tippy-variant-light[data-placement^=bottom] .tippy-arrow::before {
+  @apply border-b-neutral-97;
+}
+.tippy-variant-light[data-placement^=left] .tippy-arrow::before {
+  @apply border-l-neutral-97;
+}
+.tippy-variant-light[data-placement^=right] .tippy-arrow::before {
+  @apply border-r-neutral-97;
+}
+.tippy-variant-light > .tippy-backdrop {
+  @apply bg-neutral-97;
+}
+.tippy-variant-light > .tippy-svg-arrow {
+  @apply fill-neutral-97;
+}
+
+.tippy-variant-success {
+  @apply text-neutral-100 bg-green-54;
+}
+.tippy-variant-success[data-placement^=top] .tippy-arrow::before {
+  @apply border-t-green-54;
+}
+.tippy-variant-success[data-placement^=bottom] .tippy-arrow::before {
+  @apply border-b-green-54;
+}
+.tippy-variant-success[data-placement^=left] .tippy-arrow::before {
+  @apply border-l-green-54;
+}
+.tippy-variant-success[data-placement^=right] .tippy-arrow::before {
+  @apply border-r-green-54;
+}
+.tippy-variant-success > .tippy-backdrop {
+  @apply bg-green-54;
+}
+.tippy-variant-success > .tippy-svg-arrow {
+  @apply fill-green-54;
+}
+
+.tippy-variant-danger {
+  @apply text-neutral-100 bg-red-65;
+}
+.tippy-variant-danger[data-placement^=top] .tippy-arrow::before {
+  @apply border-t-red-65;
+}
+.tippy-variant-danger[data-placement^=bottom] .tippy-arrow::before {
+  @apply border-b-red-65;
+}
+.tippy-variant-danger[data-placement^=left] .tippy-arrow::before {
+  @apply border-l-red-65;
+}
+.tippy-variant-danger[data-placement^=right] .tippy-arrow::before {
+  @apply border-r-red-65;
+}
+.tippy-variant-danger > .tippy-backdrop {
+  @apply bg-red-65;
+}
+.tippy-variant-danger > .tippy-svg-arrow {
+  @apply fill-red-65;
+}
+
+.tippy-box[data-theme~=dark-medium] {
+  @apply tippy-variant-dark tippy-size-medium;
+}
+
+.tippy-box[data-theme~=dark-large] {
+  @apply tippy-variant-dark tippy-size-large;
+}
+
+.tippy-box[data-theme~=light-medium] {
+  @apply tippy-variant-light tippy-size-medium;
+}
+
+.tippy-box[data-theme~=light-large] {
+  @apply tippy-variant-light tippy-size-large;
+}
+
+.tippy-box[data-theme~=success-medium] {
+  @apply tippy-variant-success tippy-size-medium;
+}
+
+.tippy-box[data-theme~=success-large] {
+  @apply tippy-variant-success tippy-size-large;
+}
+
+.tippy-box[data-theme~=danger-medium] {
+  @apply tippy-variant-danger tippy-size-medium;
+}
+
+.tippy-box[data-theme~=danger-large] {
+  @apply tippy-variant-danger tippy-size-large;
+}
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

package/dist/styles/main.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/shared/styles/main.scss","../../../src/shared/styles/colors.scss","../../../src/shared/styles/fonts.scss","../../../src/shared/styles/typography.scss","../../../src/shared/styles/utilities.scss","../../../src/shared/styles/variables.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;ACCA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACzFF;AAAA;AAAA;AAAA;AAAA;AAQA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AC/FF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASA;EAGE;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAKF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAKF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAKF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;;AC3KJ;EACE;IACE;;EAEA;IACE;;;ACLN;AAAA;AAAA;AAAA;AAAA;ALYA;AACA;AACA;AAEA;EACE","file":"main.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/shared/styles/main.scss","../../../src/shared/styles/colors.scss","../../../src/shared/styles/fonts.scss","../../../src/shared/styles/typography.scss","../../../src/shared/styles/utilities.scss","../../../src/shared/styles/variables.scss","../../../src/shared/styles/vendor/tippy.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;ACCA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACzFF;AAAA;AAAA;AAAA;AAAA;AAQA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AC/FF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASA;EAGE;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAKF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAKF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAKF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;;AC3KJ;EACE;IACE;;EAEA;IACE;;;ACLN;AAAA;AAAA;AAAA;AAAA;ACAA;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAKF;EACE;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;;;AAIJ;EACE;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;;AAMJ;EACE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAIJ;EACE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAIJ;EACE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAIJ;EACE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAMJ;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;ANpQF;AACA;AACA;AAEA;EACE","file":"main.css"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukso/web-components",
-  "version": "1.49.2",
+  "version": "1.51.0",
   "type": "module",
   "files": [
     "dist",
@@ -170,6 +170,11 @@
       "import": "./dist/components/lukso-test/index.js",
       "types": "./dist/components/lukso-test/index.d.ts"
     },
+    "./dist/components/lukso-tooltip": {
+      "require": "./dist/components/lukso-tooltip/index.cjs",
+      "import": "./dist/components/lukso-tooltip/index.js",
+      "types": "./dist/components/lukso-tooltip/index.d.ts"
+    },
     "./dist/components/lukso-username": {
       "require": "./dist/components/lukso-username/index.cjs",
       "import": "./dist/components/lukso-username/index.js",
@@ -199,7 +204,8 @@
     ]
   },
   "dependencies": {
-    "ethereum-blockies-base64": "^1.0.2"
+    "ethereum-blockies-base64": "^1.0.2",
+    "tippy.js": "^6.3.7"
   },
   "customElements": "custom-elements.json"
 }

package/tools/sass/main.scss

@@ -9,6 +9,7 @@
 @import './typography';
 @import './utilities';
 @import './variables';
+@import './vendor/tippy';
 
 @tailwind base;
 @tailwind components;

package/tools/sass/tippy.scss

@@ -0,0 +1,275 @@
+.tippy-box[data-animation='fade'][data-state='hidden'] {
+  opacity: 0;
+}
+
+.tippy-arrow::before {
+  content: '';
+  position: absolute;
+  border-color: transparent;
+  border-style: solid;
+}
+
+.tippy-box[data-placement^='top'] > .tippy-arrow::before {
+  border-top-color: initial;
+  transform-origin: center top;
+}
+
+.tippy-box[data-placement^='bottom'] > .tippy-arrow::before {
+  border-bottom-color: initial;
+  transform-origin: center bottom;
+}
+
+.tippy-box[data-placement^='left'] > .tippy-arrow::before {
+  border-left-color: initial;
+  transform-origin: center left;
+}
+
+.tippy-box[data-placement^='right'] > .tippy-arrow::before {
+  border-right-color: initial;
+  transform-origin: center right;
+}
+
+.tippy-box[data-inertia][data-state='visible'] {
+  transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
+}
+
+.tippy-arrow {
+  width: 16px;
+  height: 16px;
+}
+
+// sizes
+
+.tippy-size-medium {
+  @apply px-2 py-2 rounded-4 text-10 not-italic font-600 leading-12 font-inter shadow-neutral-drop-shadow-1xl;
+
+  &[data-placement^='top'] > .tippy-arrow {
+    bottom: 0;
+  }
+
+  &[data-placement^='top'] > .tippy-arrow::before {
+    bottom: -6px;
+    left: 2px;
+    border-width: 6px 6px 0;
+  }
+
+  &[data-placement^='bottom'] > .tippy-arrow {
+    top: 0;
+  }
+
+  &[data-placement^='bottom'] > .tippy-arrow::before {
+    top: -6px;
+    left: 2px;
+    border-width: 0 6px 6px;
+  }
+
+  &[data-placement^='left'] > .tippy-arrow {
+    right: 0;
+  }
+
+  &[data-placement^='left'] > .tippy-arrow::before {
+    border-width: 6px 0 6px 6px;
+    right: -6px;
+    top: 2px;
+  }
+
+  &[data-placement^='right'] > .tippy-arrow {
+    left: 0;
+  }
+
+  &[data-placement^='right'] > .tippy-arrow::before {
+    left: -6px;
+    top: 2px;
+    border-width: 6px 6px 6px 0;
+  }
+}
+
+.tippy-size-large {
+  @apply px-3 py-2 rounded-8 text-12 not-italic font-400 leading-20 font-inter shadow-neutral-drop-shadow-1xl;
+
+  &[data-placement^='top'] > .tippy-arrow {
+    bottom: 0;
+  }
+
+  &[data-placement^='top'] > .tippy-arrow::before {
+    bottom: -8px;
+    left: 0;
+    border-width: 8px 8px 0;
+  }
+
+  &[data-placement^='bottom'] > .tippy-arrow {
+    top: 0;
+  }
+
+  &[data-placement^='bottom'] > .tippy-arrow::before {
+    top: -8px;
+    left: 0;
+    border-width: 0 8px 8px;
+  }
+
+  &[data-placement^='left'] > .tippy-arrow {
+    right: 0;
+  }
+
+  &[data-placement^='left'] > .tippy-arrow::before {
+    border-width: 8px 0 8px 8px;
+    right: -8px;
+  }
+
+  &[data-placement^='right'] > .tippy-arrow {
+    left: 0;
+  }
+
+  &[data-placement^='right'] > .tippy-arrow::before {
+    left: -8px;
+    border-width: 8px 8px 8px 0;
+  }
+}
+
+// variants
+
+.tippy-variant-dark {
+  @apply text-neutral-100 bg-neutral-30;
+
+  &[data-placement^='top'] .tippy-arrow::before {
+    @apply border-t-neutral-30;
+  }
+
+  &[data-placement^='bottom'] .tippy-arrow::before {
+    @apply border-b-neutral-30;
+  }
+
+  &[data-placement^='left'] .tippy-arrow::before {
+    @apply border-l-neutral-30;
+  }
+
+  &[data-placement^='right'] .tippy-arrow::before {
+    @apply border-r-neutral-30;
+  }
+
+  & > .tippy-backdrop {
+    @apply bg-neutral-30;
+  }
+
+  & > .tippy-svg-arrow {
+    @apply fill-neutral-30;
+  }
+}
+
+.tippy-variant-light {
+  @apply text-neutral-20 bg-neutral-97;
+
+  &[data-placement^='top'] .tippy-arrow::before {
+    @apply border-t-neutral-97;
+  }
+
+  &[data-placement^='bottom'] .tippy-arrow::before {
+    @apply border-b-neutral-97;
+  }
+
+  &[data-placement^='left'] .tippy-arrow::before {
+    @apply border-l-neutral-97;
+  }
+
+  &[data-placement^='right'] .tippy-arrow::before {
+    @apply border-r-neutral-97;
+  }
+
+  & > .tippy-backdrop {
+    @apply bg-neutral-97;
+  }
+
+  & > .tippy-svg-arrow {
+    @apply fill-neutral-97;
+  }
+}
+
+.tippy-variant-success {
+  @apply text-neutral-100 bg-green-54;
+
+  &[data-placement^='top'] .tippy-arrow::before {
+    @apply border-t-green-54;
+  }
+
+  &[data-placement^='bottom'] .tippy-arrow::before {
+    @apply border-b-green-54;
+  }
+
+  &[data-placement^='left'] .tippy-arrow::before {
+    @apply border-l-green-54;
+  }
+
+  &[data-placement^='right'] .tippy-arrow::before {
+    @apply border-r-green-54;
+  }
+
+  & > .tippy-backdrop {
+    @apply bg-green-54;
+  }
+
+  & > .tippy-svg-arrow {
+    @apply fill-green-54;
+  }
+}
+
+.tippy-variant-danger {
+  @apply text-neutral-100 bg-red-65;
+
+  &[data-placement^='top'] .tippy-arrow::before {
+    @apply border-t-red-65;
+  }
+
+  &[data-placement^='bottom'] .tippy-arrow::before {
+    @apply border-b-red-65;
+  }
+
+  &[data-placement^='left'] .tippy-arrow::before {
+    @apply border-l-red-65;
+  }
+
+  &[data-placement^='right'] .tippy-arrow::before {
+    @apply border-r-red-65;
+  }
+
+  & > .tippy-backdrop {
+    @apply bg-red-65;
+  }
+
+  & > .tippy-svg-arrow {
+    @apply fill-red-65;
+  }
+}
+
+// themes
+
+.tippy-box[data-theme~='dark-medium'] {
+  @apply tippy-variant-dark tippy-size-medium;
+}
+
+.tippy-box[data-theme~='dark-large'] {
+  @apply tippy-variant-dark tippy-size-large;
+}
+
+.tippy-box[data-theme~='light-medium'] {
+  @apply tippy-variant-light tippy-size-medium;
+}
+
+.tippy-box[data-theme~='light-large'] {
+  @apply tippy-variant-light tippy-size-large;
+}
+
+.tippy-box[data-theme~='success-medium'] {
+  @apply tippy-variant-success tippy-size-medium;
+}
+
+.tippy-box[data-theme~='success-large'] {
+  @apply tippy-variant-success tippy-size-large;
+}
+
+.tippy-box[data-theme~='danger-medium'] {
+  @apply tippy-variant-danger tippy-size-medium;
+}
+
+.tippy-box[data-theme~='danger-large'] {
+  @apply tippy-variant-danger tippy-size-large;
+}