@v1nt1248/3nclient-lib 0.3.51 → 0.4.0

package/src/components/ui3n-progress/ui3n-progress-linear.vue

@@ -8,8 +8,6 @@
   const props = withDefaults(defineProps<Ui3nProgressLinearProps>(), {
     value: 0,
     height: 2,
-    bgColor: 'var(--color-bg-control-primary-default)',
-    color: 'var(--color-bg-control-accent-default)',
     indeterminate: false,
     withText: false,
   });
@@ -28,16 +26,28 @@
   const isValueShown = computed(() => props.withText && !props.indeterminate);
   const displayValue = computed(() => `${innerValue.value}%`);
 
-  const progressStyle = computed(() => ({
-    '--ui3n-progress-linear-height': `${innerHeight.value}px`,
-    '--ui3n-progress-linear-bg': props.bgColor,
-    '--ui3n-progress-linear-color': props.color,
-    '--ui3n-progress-linear-font-size': `${Math.max(innerHeight.value - 2, 10)}px`,
-  }));
+  /* the geometry is computed here; the colours default in CSS */
+  const progressStyle = computed(() => {
+    const styles: Record<string, string> = {
+      '--ui3n-progress-linear-height': `${innerHeight.value}px`,
+      '--ui3n-progress-linear-font-size': `${Math.max(innerHeight.value - 2, 10)}px`,
+    };
+
+    if (props.bgColor) {
+      styles['--ui3n-progress-linear-bg'] = props.bgColor;
+    }
+
+    if (props.color) {
+      styles['--ui3n-progress-linear-color'] = props.color;
+    }
+
+    return styles;
+  });
 </script>
 
 <template>
   <div
+    data-ui3n="progress-linear"
     :style="progressStyle"
     :class="[$style.ui3nProgressLinear, indeterminate && $style.indeterminate]"
   >
@@ -66,6 +76,9 @@
 
 <style lang="scss" module>
   .ui3nProgressLinear {
+    --_progress-linear-bg: var(--ui3n-progress-linear-bg, var(--color-bg-control-primary-default));
+    --_progress-linear-color: var(--ui3n-progress-linear-color, var(--color-bg-control-accent-default));
+
     position: relative;
     width: 100%;
     user-select: none;
@@ -74,9 +87,9 @@
   .body {
     position: relative;
     width: 100%;
-    height: var(--ui3n-progress-linear-height);
-    border-radius: calc(var(--ui3n-progress-linear-height) - 2px);
-    background-color: var(--ui3n-progress-linear-bg);
+    height: var(--ui3n-progress-linear-height, 2px);
+    border-radius: calc(var(--ui3n-progress-linear-height, 2px) - 2px);
+    background-color: var(--_progress-linear-bg);
     overflow: hidden;
   }
 
@@ -88,16 +101,16 @@
     left: 0;
     top: 0;
     height: 100%;
-    border-radius: calc(var(--ui3n-progress-linear-height) - 2px);
-    background-color: var(--ui3n-progress-linear-color);
+    border-radius: calc(var(--ui3n-progress-linear-height, 2px) - 2px);
+    background-color: var(--_progress-linear-color);
     transition: width 0.2s ease-in-out;
   }
 
   .text {
-    font-size: var(--ui3n-progress-linear-font-size);
+    font-size: var(--ui3n-progress-linear-font-size, 10px);
     font-weight: 600;
-    line-height: var(--ui3n-progress-linear-height);
-    color: var(--ui3n-progress-linear-bg);
+    line-height: var(--ui3n-progress-linear-height, 2px);
+    color: var(--_progress-linear-bg);
     white-space: nowrap;
   }
 
@@ -105,8 +118,8 @@
     position: relative;
     width: 100%;
     text-align: center;
-    font-size: var(--font-14);
-    line-height: var(--font-16);
+    font-size: var(--ui3n-progress-linear-label-font-size, 14px);
+    line-height: var(--ui3n-progress-linear-label-line-height, 16px);
     color: var(--color-bg-control-accent-default);
     margin-bottom: 4px;
   }

package/src/components/ui3n-radio-group/ui3n-radio-group.vue

@@ -57,7 +57,10 @@
 </script>
 
 <template>
-  <div :class="[$style.ui3nRadioGroup, direction === 'horizontal' && $style.horizontal]">
+  <div
+    data-ui3n="radio-group"
+    :class="[$style.ui3nRadioGroup, direction === 'horizontal' && $style.horizontal]"
+  >
     <slot />
   </div>
 </template>

package/src/components/ui3n-radio-group/ui3n-radio.vue

@@ -111,6 +111,7 @@
 <template>
   <!-- eslint-disable max-len -->
   <div
+    data-ui3n="radio"
     :style="radioStyle"
     :class="[$style.ui3nRadio, disabled && $style.disabled, !slots.default && $style.noLabel]"
   >
@@ -174,17 +175,17 @@
 
 <style lang="scss" module>
   .ui3nRadio {
-    --ui3n-radio-min-height: 24px;
+    --_radio-min-height: var(--ui3n-radio-min-height, 24px);
 
     position: relative;
     display: flex;
     justify-content: flex-start;
     align-items: center;
-    min-height: var(--ui3n-radio-min-height);
+    min-height: var(--_radio-min-height);
     gap: 8px;
 
     &.disabled {
-      --ui3n-radio-color: var(--color-icon-control-primary-disabled) !important;
+      --_radio-color: var(--ui3n-radio-color-disabled, var(--color-icon-control-primary-disabled)) !important;
 
       pointer-events: none;
       cursor: default;
@@ -213,7 +214,7 @@
 
     &:hover {
       cursor: pointer;
-      background-color: color-mix(in oklch, var(--ui3n-radio-color) 16%, transparent);
+      background-color: color-mix(in oklch, var(--_radio-color) 16%, transparent);
     }
   }
 
@@ -225,7 +226,7 @@
   }
 
   .icon {
-    color: var(--ui3n-radio-color);
+    color: var(--_radio-color);
     min-height: calc(var(--ui3n-radio-size, 16px) - 2px);
     height: calc(var(--ui3n-radio-size, 16px) - 2px);
     min-width: calc(var(--ui3n-radio-size, 16px) - 2px);

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

@@ -10,31 +10,12 @@
     Ui3nScrollbarAxes,
     Ui3nScrollbarScrollPayload,
   } from './types';
+  import { toCssLength } from '../../utils/ui/to-css-length';
 
   const props = withDefaults(defineProps<Ui3nScrollbarProps>(), {
     axes: 'both',
-    vertical: () => ({
-      thumbMinHeight: 32,
-      thumbHeight: 'auto',
-      thumbRadius: 4,
-      thumbColor: 'var(--color-bg-control-accent-default)',
-      thumbHoverColor: 'var(--color-bg-control-accent-hover)',
-      thumbActiveColor: 'var(--color-bg-control-accent-focused)',
-      trackWidth: 6,
-      trackRadius: 4,
-      trackColor: 'transparent',
-    }),
-    horizontal: () => ({
-      thumbMinWidth: 32,
-      thumbWidth: 'auto',
-      thumbRadius: 4,
-      thumbColor: 'var(--color-bg-control-accent-default)',
-      thumbHoverColor: 'var(--color-bg-control-accent-hover)',
-      thumbActiveColor: 'var(--color-bg-control-accent-focused)',
-      trackHeight: 6,
-      trackRadius: 4,
-      trackColor: 'transparent',
-    }),
+    vertical: () => ({ thumbMinHeight: 32, thumbHeight: 'auto' }),
+    horizontal: () => ({ thumbMinWidth: 32, thumbWidth: 'auto' }),
     autoUpdate: true,
   });
   const emits = defineEmits<Ui3nScrollbarEmits>();
@@ -198,38 +179,67 @@
     return (scrollLeft.value / maxScrollLeft) * maxThumbLeft;
   });
 
-  const trackRadiusVCss = computed(() => {
-    const num = Number(vOpts.value.trackRadius);
-    return isNaN(num) ? String(vOpts.value.trackRadius ?? 4) : `${num}px`;
-  });
-  const trackColorVCss = computed(() => vOpts.value.trackColor ?? 'transparent');
-  const thumbRadiusVCss = computed(() => {
-    const num = Number(vOpts.value.thumbRadius);
-    return isNaN(num) ? String(vOpts.value.thumbRadius ?? 4) : `${num}px`;
-  });
-  const thumbColorVCss = computed(() => vOpts.value.thumbColor ?? 'var(--color-bg-control-accent-default)');
-  const thumbHoverColorVCss = computed(() => vOpts.value.thumbHoverColor ?? 'var(--color-bg-control-accent-hover)');
-  const thumbActiveColorVCss = computed(() => vOpts.value.thumbActiveColor ?? 'var(--color-bg-control-accent-focused)');
-  const trackWidthVCss = computed(() => {
-    const num = Number(vOpts.value.trackWidth);
-    return isNaN(num) ? String(vOpts.value.trackWidth ?? 6) : `${num}px`;
-  });
+  /* sizes and colours default in CSS; an option, when given, wins as an inline variable */
+  const scrollbarStyle = computed(() => {
+    const styles: Record<string, string> = {};
 
-  const trackRadiusHCss = computed(() => {
-    const num = Number(hOpts.value.trackRadius);
-    return isNaN(num) ? String(hOpts.value.trackRadius ?? 4) : `${num}px`;
-  });
-  const trackColorHCss = computed(() => hOpts.value.trackColor ?? 'transparent');
-  const thumbRadiusHCss = computed(() => {
-    const num = Number(hOpts.value.thumbRadius);
-    return isNaN(num) ? String(hOpts.value.thumbRadius ?? 4) : `${num}px`;
-  });
-  const thumbColorHCss = computed(() => hOpts.value.thumbColor ?? 'var(--color-bg-control-accent-default)');
-  const thumbHoverColorHCss = computed(() => hOpts.value.thumbHoverColor ?? 'var(--color-bg-control-accent-hover)');
-  const thumbActiveColorHCss = computed(() => hOpts.value.thumbActiveColor ?? 'var(--color-bg-control-accent-focused)');
-  const trackHeightHCss = computed(() => {
-    const num = Number(hOpts.value.trackHeight);
-    return isNaN(num) ? String(hOpts.value.trackHeight ?? 6) : `${num}px`;
+    if (vOpts.value.trackRadius !== undefined) {
+      styles['--ui3n-scrollbar-vertical-track-radius'] = toCssLength(vOpts.value.trackRadius);
+    }
+
+    if (vOpts.value.trackColor) {
+      styles['--ui3n-scrollbar-vertical-track-color'] = vOpts.value.trackColor;
+    }
+
+    if (vOpts.value.thumbRadius !== undefined) {
+      styles['--ui3n-scrollbar-vertical-thumb-radius'] = toCssLength(vOpts.value.thumbRadius);
+    }
+
+    if (vOpts.value.thumbColor) {
+      styles['--ui3n-scrollbar-vertical-thumb-color'] = vOpts.value.thumbColor;
+    }
+
+    if (vOpts.value.thumbHoverColor) {
+      styles['--ui3n-scrollbar-vertical-thumb-hover-color'] = vOpts.value.thumbHoverColor;
+    }
+
+    if (vOpts.value.thumbActiveColor) {
+      styles['--ui3n-scrollbar-vertical-thumb-active-color'] = vOpts.value.thumbActiveColor;
+    }
+
+    if (vOpts.value.trackWidth !== undefined) {
+      styles['--ui3n-scrollbar-vertical-track-width'] = toCssLength(vOpts.value.trackWidth);
+    }
+
+    if (hOpts.value.trackRadius !== undefined) {
+      styles['--ui3n-scrollbar-horizontal-track-radius'] = toCssLength(hOpts.value.trackRadius);
+    }
+
+    if (hOpts.value.trackColor) {
+      styles['--ui3n-scrollbar-horizontal-track-color'] = hOpts.value.trackColor;
+    }
+
+    if (hOpts.value.thumbRadius !== undefined) {
+      styles['--ui3n-scrollbar-horizontal-thumb-radius'] = toCssLength(hOpts.value.thumbRadius);
+    }
+
+    if (hOpts.value.thumbColor) {
+      styles['--ui3n-scrollbar-horizontal-thumb-color'] = hOpts.value.thumbColor;
+    }
+
+    if (hOpts.value.thumbHoverColor) {
+      styles['--ui3n-scrollbar-horizontal-thumb-hover-color'] = hOpts.value.thumbHoverColor;
+    }
+
+    if (hOpts.value.thumbActiveColor) {
+      styles['--ui3n-scrollbar-horizontal-thumb-active-color'] = hOpts.value.thumbActiveColor;
+    }
+
+    if (hOpts.value.trackHeight !== undefined) {
+      styles['--ui3n-scrollbar-horizontal-track-height'] = toCssLength(hOpts.value.trackHeight);
+    }
+
+    return styles;
   });
 
   function updateMetrics() {
@@ -513,23 +523,9 @@
 
 <template>
   <div
+    data-ui3n="scrollbar"
     :class="$style.ui3nScrollbar"
-    :style="{
-      '--ui3n-scrollbar-vertical-thumb-radius': thumbRadiusVCss,
-      '--ui3n-scrollbar-vertical-thumb-color': thumbColorVCss,
-      '--ui3n-scrollbar-vertical-thumb-hover-color': thumbHoverColorVCss,
-      '--ui3n-scrollbar-vertical-thumb-active-color': thumbActiveColorVCss,
-      '--ui3n-scrollbar-vertical-track-width': trackWidthVCss,
-      '--ui3n-scrollbar-vertical-track-radius': trackRadiusVCss,
-      '--ui3n-scrollbar-vertical-track-color': trackColorVCss,
-      '--ui3n-scrollbar-horizontal-thumb-radius': thumbRadiusHCss,
-      '--ui3n-scrollbar-horizontal-thumb-color': thumbColorHCss,
-      '--ui3n-scrollbar-horizontal-thumb-hover-color': thumbHoverColorHCss,
-      '--ui3n-scrollbar-horizontal-thumb-active-color': thumbActiveColorHCss,
-      '--ui3n-scrollbar-horizontal-track-height': trackHeightHCss,
-      '--ui3n-scrollbar-horizontal-track-radius': trackRadiusHCss,
-      '--ui3n-scrollbar-horizontal-track-color': trackColorHCss,
-    }"
+    :style="scrollbarStyle"
     @mouseenter="isHovered = true"
     @mouseleave="isHovered = false"
   >
@@ -585,6 +581,21 @@
 
 <style lang="scss" module>
   .ui3nScrollbar {
+    --_scrollbar-vertical-thumb-radius: var(--ui3n-scrollbar-vertical-thumb-radius, 4px);
+    --_scrollbar-vertical-thumb-color: var(--ui3n-scrollbar-vertical-thumb-color, var(--color-bg-control-accent-default));
+    --_scrollbar-vertical-thumb-hover-color: var(--ui3n-scrollbar-vertical-thumb-hover-color, var(--color-bg-control-accent-hover));
+    --_scrollbar-vertical-thumb-active-color: var(--ui3n-scrollbar-vertical-thumb-active-color, var(--color-bg-control-accent-focused));
+    --_scrollbar-vertical-track-width: var(--ui3n-scrollbar-vertical-track-width, 6px);
+    --_scrollbar-vertical-track-radius: var(--ui3n-scrollbar-vertical-track-radius, 4px);
+    --_scrollbar-vertical-track-color: var(--ui3n-scrollbar-vertical-track-color, transparent);
+    --_scrollbar-horizontal-thumb-radius: var(--ui3n-scrollbar-horizontal-thumb-radius, 4px);
+    --_scrollbar-horizontal-thumb-color: var(--ui3n-scrollbar-horizontal-thumb-color, var(--color-bg-control-accent-default));
+    --_scrollbar-horizontal-thumb-hover-color: var(--ui3n-scrollbar-horizontal-thumb-hover-color, var(--color-bg-control-accent-hover));
+    --_scrollbar-horizontal-thumb-active-color: var(--ui3n-scrollbar-horizontal-thumb-active-color, var(--color-bg-control-accent-focused));
+    --_scrollbar-horizontal-track-height: var(--ui3n-scrollbar-horizontal-track-height, 6px);
+    --_scrollbar-horizontal-track-radius: var(--ui3n-scrollbar-horizontal-track-radius, 4px);
+    --_scrollbar-horizontal-track-color: var(--ui3n-scrollbar-horizontal-track-color, transparent);
+
     position: relative;
     width: 100%;
     height: 100%;
@@ -618,9 +629,9 @@
     top: 2px;
     right: 2px;
     bottom: 2px;
-    width: var(--ui3n-scrollbar-vertical-track-width);
-    background: var(--ui3n-scrollbar-vertical-track-color);
-    border-radius: var(--ui3n-scrollbar-vertical-track-radius);
+    width: var(--_scrollbar-vertical-track-width);
+    background: var(--_scrollbar-vertical-track-color);
+    border-radius: var(--_scrollbar-vertical-track-radius);
     z-index: 10;
     visibility: hidden;
     opacity: 0;
@@ -635,9 +646,9 @@
     left: 2px;
     right: 2px;
     bottom: 2px;
-    height: var(--ui3n-scrollbar-horizontal-track-height);
-    background: var(--ui3n-scrollbar-horizontal-track-color);
-    border-radius: var(--ui3n-scrollbar-horizontal-track-radius);
+    height: var(--_scrollbar-horizontal-track-height);
+    background: var(--_scrollbar-horizontal-track-color);
+    border-radius: var(--_scrollbar-horizontal-track-radius);
     z-index: 10;
     visibility: hidden;
     opacity: 0;
@@ -658,19 +669,19 @@
     top: 0;
     left: 0;
     width: 100%;
-    border-radius: var(--ui3n-scrollbar-vertical-thumb-radius);
-    background-color: var(--ui3n-scrollbar-vertical-thumb-color);
+    border-radius: var(--_scrollbar-vertical-thumb-radius);
+    background-color: var(--_scrollbar-vertical-thumb-color);
     cursor: pointer;
     transition: background-color 0.15s ease;
     touch-action: none;
 
     &:hover {
-      background-color: var(--ui3n-scrollbar-vertical-thumb-hover-color);
+      background-color: var(--_scrollbar-vertical-thumb-hover-color);
     }
 
     &:active,
     &.active {
-      background-color: var(--ui3n-scrollbar-vertical-thumb-active-color);
+      background-color: var(--_scrollbar-vertical-thumb-active-color);
     }
   }
 
@@ -679,19 +690,19 @@
     top: 0;
     left: 0;
     height: 100%;
-    border-radius: var(--ui3n-scrollbar-horizontal-thumb-radius);
-    background-color: var(--ui3n-scrollbar-horizontal-thumb-color);
+    border-radius: var(--_scrollbar-horizontal-thumb-radius);
+    background-color: var(--_scrollbar-horizontal-thumb-color);
     cursor: pointer;
     transition: background-color 0.15s ease;
     touch-action: none;
 
     &:hover {
-      background-color: var(--ui3n-scrollbar-horizontal-thumb-hover-color);
+      background-color: var(--_scrollbar-horizontal-thumb-hover-color);
     }
 
     &:active,
     &.active {
-      background-color: var(--ui3n-scrollbar-horizontal-thumb-active-color);
+      background-color: var(--_scrollbar-horizontal-thumb-active-color);
     }
   }
 </style>

package/src/components/ui3n-scrollbar-horizontal/ui3n-scrollbar-horizontal.vue

@@ -6,19 +6,13 @@
     Ui3nScrollbarHorizontalSlots,
     Ui3nScrollbarHorizontalExpose,
   } from './types';
+  import { toCssLength } from '../../utils/ui/to-css-length';
 
   const MIN_WIDTH = 32;
 
   const props = withDefaults(defineProps<Ui3nScrollbarHorizontalProps>(), {
     thumbMinWidth: MIN_WIDTH,
     thumbWidth: 'auto',
-    thumbRadius: 4,
-    thumbColor: 'var(--color-bg-control-accent-default)',
-    thumbHoverColor: 'var(--color-bg-control-accent-hover)',
-    thumbActiveColor: 'var(--color-bg-control-accent-focused)',
-    trackHeight: 6,
-    trackRadius: 4,
-    trackColor: 'transparent',
   });
 
   const emits = defineEmits<Ui3nScrollbarHorizontalEmits>();
@@ -81,23 +75,40 @@
     return (scrollLeft.value / maxScrollLeft) * maxThumbLeft;
   });
 
-  const thumbRadiusCss = computed(() => {
-    const num = Number(props.thumbRadius);
-    return isNaN(num) ? String(props.thumbRadius) : `${num}px`;
-  });
-  const thumbColorCss = computed(() => props.thumbColor);
-  const thumbHoverColorCss = computed(() => props.thumbHoverColor);
-  const thumbActiveColorCss = computed(() => props.thumbActiveColor);
-  const trackHeightCss = computed(() => {
-    const num = Number(props.trackHeight);
-    return isNaN(num) ? String(props.trackHeight) : `${num}px`;
-  });
-  const trackRadiusCss = computed(() => {
-    const num = Number(props.trackRadius);
-    return isNaN(num) ? String(props.trackRadius) : `${num}px`;
-  });
-  const trackColorCss = computed(() => props.trackColor);
 
+  const scrollbarStyle = computed(() => {
+    const styles: Record<string, string> = {};
+
+    if (props.thumbRadius !== undefined) {
+      styles['--ui3n-scrollbar-horizontal-thumb-radius'] = toCssLength(props.thumbRadius);
+    }
+
+    if (props.thumbColor) {
+      styles['--ui3n-scrollbar-horizontal-thumb-color'] = props.thumbColor;
+    }
+
+    if (props.thumbHoverColor) {
+      styles['--ui3n-scrollbar-horizontal-thumb-hover-color'] = props.thumbHoverColor;
+    }
+
+    if (props.thumbActiveColor) {
+      styles['--ui3n-scrollbar-horizontal-thumb-active-color'] = props.thumbActiveColor;
+    }
+
+    if (props.trackHeight !== undefined) {
+      styles['--ui3n-scrollbar-horizontal-track-height'] = toCssLength(props.trackHeight);
+    }
+
+    if (props.trackRadius !== undefined) {
+      styles['--ui3n-scrollbar-horizontal-track-radius'] = toCssLength(props.trackRadius);
+    }
+
+    if (props.trackColor) {
+      styles['--ui3n-scrollbar-horizontal-track-color'] = props.trackColor;
+    }
+
+    return styles;
+  });
   function updateMetrics() {
     if (!containerRef.value) {
       return;
@@ -230,16 +241,9 @@
 
 <template>
   <div
+    data-ui3n="scrollbar-horizontal"
     :class="$style.ui3nScrollbarHorizontal"
-    :style="{
-      '--ui3n-scrollbar-horizontal-thumb-radius': thumbRadiusCss,
-      '--ui3n-scrollbar-horizontal-thumb-color': thumbColorCss,
-      '--ui3n-scrollbar-horizontal-thumb-hover-color': thumbHoverColorCss,
-      '--ui3n-scrollbar-horizontal-thumb-active-color': thumbActiveColorCss,
-      '--ui3n-scrollbar-horizontal-track-height': trackHeightCss,
-      '--ui3n-scrollbar-horizontal-track-radius': trackRadiusCss,
-      '--ui3n-scrollbar-horizontal-track-color': trackColorCss,
-    }"
+    :style="scrollbarStyle"
     @mouseenter="isHovered = true"
     @mouseleave="isHovered = false"
   >
@@ -271,6 +275,14 @@
 
 <style lang="scss" module>
   .ui3nScrollbarHorizontal {
+    --_scrollbar-horizontal-thumb-radius: var(--ui3n-scrollbar-horizontal-thumb-radius, 4px);
+    --_scrollbar-horizontal-thumb-color: var(--ui3n-scrollbar-horizontal-thumb-color, var(--color-bg-control-accent-default));
+    --_scrollbar-horizontal-thumb-hover-color: var(--ui3n-scrollbar-horizontal-thumb-hover-color, var(--color-bg-control-accent-hover));
+    --_scrollbar-horizontal-thumb-active-color: var(--ui3n-scrollbar-horizontal-thumb-active-color, var(--color-bg-control-accent-focused));
+    --_scrollbar-horizontal-track-height: var(--ui3n-scrollbar-horizontal-track-height, 6px);
+    --_scrollbar-horizontal-track-radius: var(--ui3n-scrollbar-horizontal-track-radius, 4px);
+    --_scrollbar-horizontal-track-color: var(--ui3n-scrollbar-horizontal-track-color, transparent);
+
     position: relative;
     width: 100%;
     overflow: visible;
@@ -295,9 +307,9 @@
     left: 0;
     right: 0;
     bottom: 2px;
-    height: var(--ui3n-scrollbar-horizontal-track-height);
-    background: var(--ui3n-scrollbar-horizontal-track-color);
-    border-radius: var(--ui3n-scrollbar-horizontal-track-radius);
+    height: var(--_scrollbar-horizontal-track-height);
+    background: var(--_scrollbar-horizontal-track-color);
+    border-radius: var(--_scrollbar-horizontal-track-radius);
     z-index: 10;
     visibility: hidden;
     opacity: 0;
@@ -317,19 +329,19 @@
     position: absolute;
     top: 0;
     height: 100%;
-    border-radius: var(--ui3n-scrollbar-horizontal-thumb-radius);
-    background-color: var(--ui3n-scrollbar-horizontal-thumb-color);
+    border-radius: var(--_scrollbar-horizontal-thumb-radius);
+    background-color: var(--_scrollbar-horizontal-thumb-color);
     cursor: pointer;
     transition: background-color 0.15s ease;
     touch-action: none;
 
     &:hover {
-      background-color: var(--ui3n-scrollbar-horizontal-thumb-hover-color);
+      background-color: var(--_scrollbar-horizontal-thumb-hover-color);
     }
 
     &:active,
     &.active {
-      background-color: var(--ui3n-scrollbar-horizontal-thumb-active-color);
+      background-color: var(--_scrollbar-horizontal-thumb-active-color);
     }
   }
 </style>