@v1nt1248/3nclient-lib 0.3.50 → 0.4.0

package/src/components/ui3n-table/ui3n-table.vue

@@ -132,6 +132,7 @@
   >
     <div
       ref="tableEl"
+      data-ui3n="table"
       :style="tableStyle"
       :class="[$style.ui3nTable, $style.ui3nTableInsideScrollbar, stickyColumnsActive && $style.stickyColumns]"
     >
@@ -316,6 +317,7 @@
   <div
     v-else
     ref="tableEl"
+    data-ui3n="table"
     :style="tableStyle"
     :class="[$style.ui3nTable, stickyColumnsActive && $style.stickyColumns]"
   >
@@ -505,21 +507,21 @@
   }
 
   .ui3nTable {
-    --ui3n-table-columns-width: auto;
-    --ui3n-table-base-head-height: 36px;
-    --ui3n-table-group-actions-height: 48px;
-    --ui3n-table-body-row-height: 28px;
-    --ui3n-table-group-actions-bg-color: var(--color-bg-block-primary-default);
-    --ui3n-table-header-bg-color: var(--color-bg-table-header-default);
-    --ui3n-table-header-color: var(--color-text-table-primary-default);
-    --ui3n-table-header-font-size: 14px;
-    --ui3n-table-padding-inline: 16px;
-    --ui3n-table-row-color: var(--color-text-table-primary-default);
-    --ui3n-table-row-bg-color-selected: var(--color-bg-control-primary-hover);
-    --ui3n-table-row-checkbox-width: 16px;
-    --ui3n-table-cell-font-size: 12px;
-    --ui3n-table-nodata-height: 48px;
-    --ui3n-table-nodata-color: var(--color-text-control-secondary-default);
+    --_table-columns-width: var(--ui3n-table-columns-width, auto);
+    --_table-base-head-height: var(--ui3n-table-base-head-height, 36px);
+    --_table-group-actions-height: var(--ui3n-table-group-actions-height, 48px);
+    --_table-body-row-height: var(--ui3n-table-body-row-height, 28px);
+    --_table-group-actions-bg-color: var(--ui3n-table-group-actions-bg-color, var(--color-bg-block-primary-default));
+    --_table-header-bg-color: var(--ui3n-table-header-bg-color, var(--color-bg-table-header-default));
+    --_table-header-color: var(--ui3n-table-header-color, var(--color-text-table-primary-default));
+    --_table-header-font-size: var(--ui3n-table-header-font-size, 14px);
+    --_table-padding-inline: var(--ui3n-table-padding-inline, 16px);
+    --_table-row-color: var(--ui3n-table-row-color, var(--color-text-table-primary-default));
+    --_table-row-bg-color-selected: var(--ui3n-table-row-bg-color-selected, var(--color-bg-control-primary-hover));
+    --_table-row-checkbox-width: var(--ui3n-table-row-checkbox-width, 16px);
+    --_table-cell-font-size: var(--ui3n-table-cell-font-size, 12px);
+    --_table-nodata-height: var(--ui3n-table-nodata-height, 48px);
+    --_table-nodata-color: var(--ui3n-table-nodata-color, var(--color-text-control-secondary-default));
 
     position: relative;
     width: 100%;
@@ -561,22 +563,22 @@
     position: sticky;
     top: 0;
     width: 100%;
-    min-height: var(--ui3n-table-base-head-height);
-    height: var(--ui3n-table-base-head-height);
+    min-height: var(--_table-base-head-height);
+    height: var(--_table-base-head-height);
     display: grid;
-    grid-template-columns: var(--ui3n-table-columns-width);
-    background-color: var(--ui3n-table-header-bg-color);
-    padding-left: var(--ui3n-table-padding-inline);
+    grid-template-columns: var(--_table-columns-width);
+    background-color: var(--_table-header-bg-color);
+    padding-left: var(--_table-padding-inline);
     z-index: 5;
 
     &.withGroupActions {
-      height: calc(var(--ui3n-table-base-head-height) + var(--ui3n-table-group-actions-height));
-      min-height: calc(var(--ui3n-table-base-head-height) + var(--ui3n-table-group-actions-height));
-      padding-top: var(--ui3n-table-group-actions-height);
+      height: calc(var(--_table-base-head-height) + var(--_table-group-actions-height));
+      min-height: calc(var(--_table-base-head-height) + var(--_table-group-actions-height));
+      padding-top: var(--_table-group-actions-height);
     }
 
     .headerItemWrapper:not(:first-child) {
-      padding: 0 calc(var(--ui3n-table-padding-inline) / 4);
+      padding: 0 calc(var(--_table-padding-inline) / 4);
     }
   }
 
@@ -605,9 +607,9 @@
 
   .headerText {
     display: block;
-    font-size: var(--ui3n-table-header-font-size);
+    font-size: var(--_table-header-font-size);
     font-weight: 500;
-    color: var(--ui3n-table-header-color);
+    color: var(--_table-header-color);
     @include mixins.text-overflow-ellipsis();
   }
 
@@ -623,11 +625,11 @@
     left: 0;
     display: flex;
     width: 100%;
-    height: var(--ui3n-table-group-actions-height);
-    padding: 0 var(--ui3n-table-padding-inline);
+    height: var(--_table-group-actions-height);
+    padding: 0 var(--_table-padding-inline);
     justify-content: space-between;
     align-items: center;
-    background-color: var(--ui3n-table-group-actions-bg-color);
+    background-color: var(--_table-group-actions-bg-color);
     border-left: 1px solid var(--color-border-block-primary-default);
     border-top: 1px solid var(--color-border-block-primary-default);
     border-right: 1px solid var(--color-border-block-primary-default);
@@ -636,7 +638,7 @@
   .groupActionsBody {
     display: flex;
     height: 100%;
-    padding: 0 calc(var(--ui3n-table-padding-inline) / 2);
+    padding: 0 calc(var(--_table-padding-inline) / 2);
     flex-grow: 1;
   }
 
@@ -649,16 +651,16 @@
   .row {
     position: relative;
     width: 100%;
-    min-height: var(--ui3n-table-body-row-height);
+    min-height: var(--_table-body-row-height);
     border-left: 1px solid var(--color-border-table-primary-default);
     border-right: 1px solid var(--color-border-table-primary-default);
     border-bottom: 1px solid var(--color-border-block-primary-default);
     background-color: transparent;
 
     &:not(.customRow) {
-      padding-left: var(--ui3n-table-padding-inline);
+      padding-left: var(--_table-padding-inline);
       display: grid;
-      grid-template-columns: var(--ui3n-table-columns-width);
+      grid-template-columns: var(--_table-columns-width);
     }
 
     &.selectable {
@@ -671,14 +673,14 @@
   }
 
   .selected {
-    background-color: var(--ui3n-table-row-bg-color-selected);
+    background-color: var(--_table-row-bg-color-selected);
   }
 
   .rowCheckbox {
     position: absolute;
     top: 0;
     left: 16px;
-    width: var(--ui3n-table-row-checkbox-width);
+    width: var(--_table-row-checkbox-width);
     height: 100%;
     display: flex;
     justify-content: flex-start;
@@ -694,27 +696,27 @@
     align-items: center;
 
     &.bodyItemFirst {
-      padding-left: calc(var(--ui3n-table-padding-inline) * 1.5);
+      padding-left: calc(var(--_table-padding-inline) * 1.5);
     }
   }
 
   .cell {
-    font-size: var(--ui3n-table-cell-font-size);
+    font-size: var(--_table-cell-font-size);
     font-weight: 400;
-    color: var(--ui3n-table-row-color);
+    color: var(--_table-row-color);
   }
 
   .noData {
     position: relative;
     width: 100%;
-    height: var(--ui3n-table-nodata-height);
+    height: var(--_table-nodata-height);
     padding-top: 24px;
     display: flex;
     justify-content: center;
     align-items: center;
-    font-size: var(--ui3n-table-cell-font-size);
+    font-size: var(--_table-cell-font-size);
     font-weight: 600;
-    color: var(--ui3n-table-nodata-color);
+    color: var(--_table-nodata-color);
   }
 
   .unusedPlace {
@@ -729,7 +731,7 @@
       width: max-content;
       min-width: 100%;
       display: grid;
-      grid-template-columns: var(--ui3n-table-columns-width);
+      grid-template-columns: var(--_table-columns-width);
     }
 
     .header {
@@ -746,15 +748,15 @@
 
     .headerItemSticky {
       position: sticky;
-      background-color: var(--ui3n-table-header-bg-color);
+      background-color: var(--_table-header-bg-color);
     }
 
     .headerItemFirst.headerItemSticky {
-      padding-left: var(--ui3n-table-padding-inline);
+      padding-left: var(--_table-padding-inline);
     }
 
     .headerItemWrapper:not(.headerItemFirst) {
-      padding: 0 calc(var(--ui3n-table-padding-inline) / 4);
+      padding: 0 calc(var(--_table-padding-inline) / 4);
     }
 
     .bodyItemSticky {
@@ -763,7 +765,7 @@
     }
 
     .bodyItemFirst.bodyItemSticky {
-      padding-left: calc(var(--ui3n-table-padding-inline) + var(--ui3n-table-padding-inline) * 1.5);
+      padding-left: calc(var(--_table-padding-inline) + var(--_table-padding-inline) * 1.5);
     }
 
     .row:hover .bodyItemSticky {
@@ -771,12 +773,12 @@
     }
 
     .row.selected .bodyItemSticky {
-      background-color: var(--ui3n-table-row-bg-color-selected);
+      background-color: var(--_table-row-bg-color-selected);
     }
 
     .rowCheckbox {
       position: sticky;
-      left: var(--ui3n-table-padding-inline);
+      left: var(--_table-padding-inline);
       z-index: 3;
     }
 

package/src/components/ui3n-tabs/ui3n-tabs.vue

@@ -2,13 +2,10 @@
   import { computed, nextTick, onMounted, ref, watch, useCssModule } from 'vue';
   import type { Ui3nTabsEmits, Ui3nTabsProps, Ui3nTabsSlots } from './types';
 
+  /* colours and the indicator size keep their defaults in CSS */
   const props = withDefaults(defineProps<Ui3nTabsProps>(), {
     modelValue: 0,
     itemDirection: 'horizontal',
-    activeColor: 'var(--color-text-control-accent-default)',
-    inactiveColor: 'var(--color-text-control-primary-default)',
-    indicatorColor: 'var(--color-border-control-accent-default)',
-    indicatorSize: 2,
     indicatorPosition: 'normal',
   });
   const emits = defineEmits<Ui3nTabsEmits>();
@@ -19,13 +16,29 @@
   const tabs = ref<HTMLDivElement | null>(null);
   const activeIndex = ref(props.modelValue);
 
-  const tabsStyle = computed(() => ({
-    '--ui3n-tabs-active-color': props.activeColor,
-    '--ui3n-tabs-inactive-color': props.inactiveColor,
-    '--ui3n-tabs-indicator-color': props.indicatorColor,
-    '--ui3n-tabs-indicator-size': `${props.indicatorSize}px`,
-    '--ui3n-tabs-indicator-position': props.indicatorPosition === 'reverse' ? '100%' : '0',
-  }));
+  const tabsStyle = computed(() => {
+    const styles: Record<string, string> = {
+      '--ui3n-tabs-indicator-position': props.indicatorPosition === 'reverse' ? '100%' : '0',
+    };
+
+    if (props.activeColor) {
+      styles['--ui3n-tabs-active-color'] = props.activeColor;
+    }
+
+    if (props.inactiveColor) {
+      styles['--ui3n-tabs-inactive-color'] = props.inactiveColor;
+    }
+
+    if (props.indicatorColor) {
+      styles['--ui3n-tabs-indicator-color'] = props.indicatorColor;
+    }
+
+    if (props.indicatorSize !== undefined) {
+      styles['--ui3n-tabs-indicator-size'] = `${props.indicatorSize}px`;
+    }
+
+    return styles;
+  });
 
   function updateChildrenAttributes(): void {
     if (tabs.value?.children) {
@@ -89,6 +102,7 @@
   <div
     ref="tabs"
     :id="id"
+    data-ui3n="tabs"
     :style="tabsStyle"
     :class="[$style.ui3nTabs, itemDirection === 'vertical' && $style.vertical]"
     @click="onClick"
@@ -99,10 +113,14 @@
 
 <style lang="scss" module>
   .ui3nTabs {
-    --ui3n-tabs-height: 48px;
+    --_tabs-height: var(--ui3n-tabs-height, 48px);
+    --_tabs-active-color: var(--ui3n-tabs-active-color, var(--color-text-control-accent-default));
+    --_tabs-inactive-color: var(--ui3n-tabs-inactive-color, var(--color-text-control-primary-default));
+    --_tabs-indicator-color: var(--ui3n-tabs-indicator-color, var(--color-border-control-accent-default));
+    --_tabs-indicator-size: var(--ui3n-tabs-indicator-size, 2px);
 
     position: relative;
-    height: var(--ui3n-tabs-height);
+    height: var(--_tabs-height);
     display: flex;
     justify-content: center;
     align-items: stretch;
@@ -113,7 +131,7 @@
     cursor: pointer;
     position: relative;
     user-select: none;
-    color: var(--ui3n-tabs-inactive-color);
+    color: var(--_tabs-inactive-color);
 
     &:hover {
       background-color: var(--color-bg-control-secondary-default);
@@ -124,8 +142,8 @@
       content: '';
       left: 0;
       width: 100%;
-      bottom: var(--ui3n-tabs-indicator-position);
-      height: var(--ui3n-tabs-indicator-size);
+      bottom: var(--ui3n-tabs-indicator-position, 0);
+      height: var(--_tabs-indicator-size);
       background-color: transparent;
       transition: background-color 250ms ease-in-out;
     }
@@ -138,10 +156,10 @@
   }
 
   .active {
-    color: var(--ui3n-tabs-active-color);
+    color: var(--_tabs-active-color);
 
     &::after {
-      background-color: var(--ui3n-tabs-indicator-color);
+      background-color: var(--_tabs-indicator-color);
       transition: background-color 250ms ease-in-out;
     }
   }
@@ -152,8 +170,8 @@
 
     .item {
       &::after {
-        left: var(--ui3n-tabs-indicator-position);
-        width: var(--ui3n-tabs-indicator-size);
+        left: var(--ui3n-tabs-indicator-position, 0);
+        width: var(--_tabs-indicator-size);
         bottom: 0;
         height: 100%;
       }

package/src/components/ui3n-text/ui3n-text.vue

@@ -141,6 +141,7 @@
 <template>
   <div
     :id="id"
+    data-ui3n="text"
     :class="[
       $style.ui3nText,
       disabled && $style.disabled,
@@ -187,22 +188,22 @@
 
 <style lang="scss" module>
   .ui3nText {
-    --ui3n-text-border-radius: 4px;
-    --ui3n-text-label-font-size: 12px;
-    --ui3n-text-font-size: 13px;
-    --ui3n-text-padding-inline: 8px;
-    --ui3n-text-padding-block: 8px;
+    --_text-border-radius: var(--ui3n-text-border-radius, 4px);
+    --_text-label-font-size: var(--ui3n-text-label-font-size, 12px);
+    --_text-font-size: var(--ui3n-text-font-size, 13px);
+    --_text-padding-inline: var(--ui3n-text-padding-inline, 8px);
+    --_text-padding-block: var(--ui3n-text-padding-block, 8px);
 
     position: relative;
     width: 100%;
-    border-radius: var(--ui3n-text-border-radius);
+    border-radius: var(--_text-border-radius);
     padding: 1px;
   }
 
   .label {
     display: block;
     width: 100%;
-    font-size: var(--ui3n-text-label-font-size);
+    font-size: var(--_text-label-font-size);
     line-height: 1.33;
     font-weight: 600;
     color: var(--color-text-control-primary-default);
@@ -212,9 +213,9 @@
   .body {
     position: relative;
     width: 100%;
-    padding: var(--ui3n-text-padding-block) 0;
+    padding: var(--_text-padding-block) 0;
     background-color: var(--color-bg-control-secondary-default);
-    border-radius: var(--ui3n-text-border-radius);
+    border-radius: var(--_text-border-radius);
     transition: all 0.2s ease-in-out;
 
     &:hover {
@@ -239,11 +240,11 @@
     box-sizing: border-box;
     position: relative;
     width: 100%;
-    border-radius: var(--ui3n-text-border-radius);
+    border-radius: var(--_text-border-radius);
     background-color: var(--color-bg-control-secondary-default);
-    padding: 0 var(--ui3n-text-padding-inline);
-    font-family: Inter, system-ui, sans-serif;
-    font-size: var(--ui3n-text-font-size);
+    padding: 0 var(--_text-padding-inline);
+    font-family: inherit;
+    font-size: var(--_text-font-size);
     line-height: 1.23;
     font-weight: 400;
     color: var(--color-text-control-primary-default);
@@ -252,7 +253,7 @@
     &::placeholder {
       color: var(--color-text-control-secondary-default);
       font-style: italic;
-      font-size: var(--ui3n-text-font-size);
+      font-size: var(--_text-font-size);
       line-height: 1.23;
       font-weight: 400;
     }

package/src/components/ui3n-tooltip/ui3n-tooltip-old.vue

@@ -94,7 +94,10 @@ watch(isPositioned, val => {
 </script>
 
 <template>
-  <div :class="$style.ui3nTooltip">
+  <div
+    data-ui3n="tooltip-old"
+    :class="$style.ui3nTooltip"
+  >
     <div
       ref="referenceEl"
       :class="$style.reference"
@@ -128,8 +131,8 @@ watch(isPositioned, val => {
 
 <style lang="scss" module>
 .ui3nTooltip {
-  --ui3n-tooltip-bg-color: v-bind(color);
-  --ui3n-tooltip-text-color: v-bind(textColor);
+  --_tooltip-bg-color: var(--ui3n-tooltip-bg-color, v-bind(color));
+  --_tooltip-text-color: var(--ui3n-tooltip-text-color, v-bind(textColor));
 
   position: relative;
   width: max-content;
@@ -153,7 +156,7 @@ watch(isPositioned, val => {
   &-bottom {
     border-style: solid;
     border-width: 0 v-bind(arrowSizeCssValue) v-bind(arrowSizeCssValue) v-bind(arrowSizeCssValue);
-    border-color: transparent transparent var(--ui3n-tooltip-bg-color) transparent;
+    border-color: transparent transparent var(--_tooltip-bg-color) transparent;
   }
 
   &-top {
@@ -170,7 +173,7 @@ watch(isPositioned, val => {
   &-right {
     border-style: solid;
     border-width: v-bind(arrowSizeCssValue) 0 v-bind(arrowSizeCssValue) v-bind(arrowSizeCssValue);
-    border-color: transparent transparent transparent var(--ui3n-tooltip-bg-color);
+    border-color: transparent transparent transparent var(--_tooltip-bg-color);
   }
 
   &-left {
@@ -187,12 +190,12 @@ watch(isPositioned, val => {
 .content {
   position: relative;
   max-width: 400px;
-  padding: var(--spacing-xs) var(--spacing-s);
-  border-radius: var(--spacing-xs);
-  font-size: var(--font-11);
-  line-height: var(--font-12);
+  padding: var(--ui3n-tooltip-padding, 4px 8px);
+  border-radius: var(--ui3n-tooltip-border-radius, 4px);
+  font-size: var(--ui3n-tooltip-font-size, 11px);
+  line-height: var(--ui3n-tooltip-line-height, 12px);
   font-weight: 400;
-  background-color: var(--ui3n-tooltip-bg-color);
-  color: var(--ui3n-tooltip-text-color);
+  background-color: var(--_tooltip-bg-color);
+  color: var(--_tooltip-text-color);
 }
 </style>

package/src/components/ui3n-tooltip/ui3n-tooltip.vue

@@ -1,15 +1,13 @@
 <script lang="ts" setup>
   import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
   import { arrow, autoUpdate, offset, useFloating } from '@floating-ui/vue';
+  import { toCssLength } from '../../utils/ui/to-css-length';
   import type { Nullable } from '../../types';
   import type { Ui3nTooltipProps, Ui3nTooltipEmits, Ui3nTooltipSlots } from './types';
 
   const baseOffset = 5;
 
   const props = withDefaults(defineProps<Ui3nTooltipProps>(), {
-    maxContentWidth: 400,
-    color: 'var(--color-bg-block-tritery-default)',
-    textColor: 'var(--color-text-block-darkery-default)',
     placement: 'top',
     positionStrategy: 'absolute',
     offsetX: 0,
@@ -68,20 +66,27 @@
     whileElementsMounted: props.positionStrategy === 'fixed' ? autoUpdate : undefined,
   });
 
+  /* colours and the maximum width default in CSS, so a stylesheet can change them */
   const tooltipStylesComputed = computed(() => {
-    const maxWidth =
-      typeof props.maxContentWidth === 'number' || !isNaN(Number(props.maxContentWidth))
-        ? `${props.maxContentWidth}px`
-        : String(props.maxContentWidth);
-
-    return {
+    const styles: Record<string, string> = {
       ...floatingStyles.value,
-      '--ui3n-tooltip-bg-color': props.color,
-      '--ui3n-tooltip-text-color': props.textColor,
-      '--ui3n-tooltip-max-width': maxWidth,
       '--ui3n-tooltip-arrow-size': `${baseOffset}px`,
       '--ui3n-tooltip-base-offset': `${-baseOffset}px`,
     };
+
+    if (props.color) {
+      styles['--ui3n-tooltip-bg-color'] = props.color;
+    }
+
+    if (props.textColor) {
+      styles['--ui3n-tooltip-text-color'] = props.textColor;
+    }
+
+    if (props.maxContentWidth !== undefined) {
+      styles['--ui3n-tooltip-max-width'] = toCssLength(props.maxContentWidth);
+    }
+
+    return styles;
   });
 
   function onMouseenter() {
@@ -167,6 +172,7 @@
 <template>
   <div
     ref="referenceContainer"
+    data-ui3n="tooltip"
     :class="$style.container"
   >
     <slot />
@@ -175,6 +181,7 @@
   <div
     v-if="showTooltip"
     ref="floatingEl"
+    data-ui3n="tooltip-content"
     :class="$style.floating"
     :style="tooltipStylesComputed"
   >
@@ -202,6 +209,10 @@
   }
 
   .floating {
+    --_tooltip-bg-color: var(--ui3n-tooltip-bg-color, var(--color-bg-block-tritery-default));
+    --_tooltip-text-color: var(--ui3n-tooltip-text-color, var(--color-text-block-darkery-default));
+    --_tooltip-max-width: var(--ui3n-tooltip-max-width, 400px);
+
     width: max-content;
     z-index: 5;
   }
@@ -214,47 +225,47 @@
     &-top,
     &-bottom {
       border-style: solid;
-      border-width: 0 var(--ui3n-tooltip-arrow-size) var(--ui3n-tooltip-arrow-size) var(--ui3n-tooltip-arrow-size);
-      border-color: transparent transparent var(--ui3n-tooltip-bg-color) transparent;
+      border-width: 0 var(--ui3n-tooltip-arrow-size, 5px) var(--ui3n-tooltip-arrow-size, 5px) var(--ui3n-tooltip-arrow-size, 5px);
+      border-color: transparent transparent var(--_tooltip-bg-color) transparent;
     }
 
     &-top {
-      bottom: var(--ui3n-tooltip-base-offset);
+      bottom: var(--ui3n-tooltip-base-offset, -5px);
       transform: rotate(180deg);
     }
 
     &-bottom {
-      top: var(--ui3n-tooltip-base-offset);
+      top: var(--ui3n-tooltip-base-offset, -5px);
       transform: rotate(0deg);
     }
 
     &-left,
     &-right {
       border-style: solid;
-      border-width: var(--ui3n-tooltip-arrow-size) 0 var(--ui3n-tooltip-arrow-size) var(--ui3n-tooltip-arrow-size);
-      border-color: transparent transparent transparent var(--ui3n-tooltip-bg-color);
+      border-width: var(--ui3n-tooltip-arrow-size, 5px) 0 var(--ui3n-tooltip-arrow-size, 5px) var(--ui3n-tooltip-arrow-size, 5px);
+      border-color: transparent transparent transparent var(--_tooltip-bg-color);
     }
 
     &-left {
-      right: var(--ui3n-tooltip-base-offset);
+      right: var(--ui3n-tooltip-base-offset, -5px);
       transform: rotate(0deg);
     }
 
     &-right {
-      left: var(--ui3n-tooltip-base-offset);
+      left: var(--ui3n-tooltip-base-offset, -5px);
       transform: rotate(180deg);
     }
   }
 
   .content {
     position: relative;
-    max-width: var(--ui3n-tooltip-max-width);
-    padding: 6px var(--spacing-s);
-    border-radius: 6px;
-    font-size: var(--font-11);
-    line-height: var(--font-12);
+    max-width: var(--_tooltip-max-width);
+    padding: var(--ui3n-tooltip-padding, 6px 8px);
+    border-radius: var(--ui3n-tooltip-border-radius, 6px);
+    font-size: var(--ui3n-tooltip-font-size, 11px);
+    line-height: var(--ui3n-tooltip-line-height, 12px);
     font-weight: 400;
-    background-color: var(--ui3n-tooltip-bg-color);
-    color: var(--ui3n-tooltip-text-color);
+    background-color: var(--_tooltip-bg-color);
+    color: var(--_tooltip-text-color);
   }
 </style>