wave-ui 3.19.0 → 3.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "3.19.0",
+  "version": "3.21.0",
   "description": "A UI framework for Vue.js 3 (and 2) with only the bright side. :sunny:",
   "author": "Antoni Andre <antoniandre.web@gmail.com>",
   "homepage": "https://antoniandre.github.io/wave-ui",
@@ -42,22 +42,27 @@
     "vue framework",
     "ui"
   ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build --base /wave-ui/",
+    "build-types": "tsc -p ./tsconfig.json",
+    "build-bundle": "BUNDLE=true vite build && npm run build-types",
+    "preview": "vite preview --base /wave-ui/",
+    "lint": "biome check .",
+    "lint:fix": "biome check --apply .",
+    "format": "biome format .",
+    "format:fix": "biome format --write .",
+    "publish-doc": "npm run build && npm run build-bundle && git add . && git commit -m 'Publish documentation on Github.' && git push && git push --tag"
+  },
   "devDependencies": {
-    "@eslint/js": "^9.21.0",
-    "@faker-js/faker": "^9.5.1",
+    "@babel/core": "^7.26.10",
+    "@biomejs/biome": "^1.9.4",
+    "@faker-js/faker": "^9.7.0",
     "@mdi/font": "^7.4.47",
     "@tsconfig/recommended": "^1.0.8",
-    "@typescript-eslint/eslint-plugin": "^8.25.0",
-    "@typescript-eslint/parser": "^8.25.0",
-    "@vitejs/plugin-vue": "^5.2.1",
-    "autoprefixer": "^10.4.20",
-    "axios": "^1.8.1",
-    "eslint": "^9.21.0",
-    "eslint-config-standard": "^17.1.0",
-    "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-n": "^17.15.1",
-    "eslint-plugin-promise": "^7.2.1",
-    "eslint-plugin-vue": "^9.32.0",
+    "@vitejs/plugin-vue": "^5.2.3",
+    "autoprefixer": "^10.4.21",
+    "axios": "^1.8.4",
     "font-awesome": "^4.7.0",
     "globals": "^16.0.0",
     "gsap": "^3.12.7",
@@ -65,13 +70,12 @@
     "material-design-icons": "^3.0.1",
     "postcss": "^8.5.3",
     "pug": "^3.0.3",
-    "rollup-plugin-delete": "^3.0.0",
-    "sass": "^1.85.1",
+    "rollup-plugin-delete": "^3.0.1",
+    "sass": "^1.86.3",
     "simple-syntax-highlighter": "^3.1.1",
-    "splitpanes": "^3.1.8",
-    "typescript": "^5.8.2",
-    "typescript-eslint": "^8.25.0",
-    "vite": "^6.2.0",
+    "splitpanes": "^4.0.3",
+    "typescript": "^5.8.3",
+    "vite": "^6.2.6",
     "vite-svg-loader": "^5.1.0",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0",
@@ -84,14 +88,5 @@
   "engines": {
     "node": ">=16.0.0",
     "pnpm": ">=8.0.0"
-  },
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build --base /wave-ui/",
-    "build-types": "tsc -p ./tsconfig.json",
-    "build-bundle": "BUNDLE=true vite build && npm run build-types",
-    "preview": "vite preview --base /wave-ui/",
-    "lint": "vite lint",
-    "publish-doc": "npm run build && npm run build-bundle && git add . && git commit -m 'Publish documentation on Github.' && git push && git push --tag"
   }
-}
+}

package/src/wave-ui/components/transitions/w-transition-expand.vue

@@ -135,7 +135,7 @@ export default {
     },
     applyShowStyles (el) {
       if (this.animX) {
-        el.style.width = this.el.width + 'px'
+        el.style.width = `${this.el.width}px`
         el.style.marginLeft = this.el.marginLeft
         el.style.marginRight = this.el.marginRight
         el.style.paddingLeft = this.el.paddingLeft
@@ -144,7 +144,7 @@ export default {
         el.style.borderRightWidth = this.el.borderRightWidth
       }
       if (this.animY) {
-        el.style.height = this.el.height + 'px'
+        el.style.height = `${this.el.height}px`
         el.style.marginTop = this.el.marginTop
         el.style.marginBottom = this.el.marginBottom
         el.style.paddingTop = this.el.paddingTop
@@ -153,7 +153,7 @@ export default {
         el.style.borderBottomWidth = this.el.borderBottomWidth
       }
 
-      el.style.transition = this.duration + 'ms ease-in-out'
+      el.style.transition = `${this.duration}ms ease-in-out`
     },
     applyOriginalStyles (el) {
       el.style.cssText = this.el.originalStyles

package/src/wave-ui/components/w-autocomplete.vue

@@ -99,8 +99,8 @@ export default {
       if (this.keywords) {
         items = items.filter(item => {
           if (!item.searchable.includes(this.normalizedKeywords)) return false
-          else if (this.multiple && !this.allowDuplicates) return isItemNotSelected(item)
-          else return true
+          if (this.multiple && !this.allowDuplicates) return isItemNotSelected(item)
+          return true
         })
       }
 
@@ -111,7 +111,7 @@ export default {
 
     highlightedItemIndex () {
       if (this.highlightedItem === null) return -1
-      else if (this.highlightedItem === 'extra-item') return this.filteredItems.length
+      if (this.highlightedItem === 'extra-item') return this.filteredItems.length
 
       return this.filteredItems.findIndex(item => item.uid === this.highlightedItem)
     },

package/src/wave-ui/components/w-badge.vue

@@ -66,13 +66,13 @@ export default {
       ]
     },
     classes () {
-      const slotText = this.$slots.badge && this.$slots.badge().map(item => item.children).join('')
+      const slotText = this.$slots.badge?.().map(item => item.children).join('')
 
       return {
         [this.color]: this.color,
         [`${this.bgColor}--bg`]: this.bgColor,
         [this.badgeClass]: this.badgeClass || null,
-        'w-badge--round': this.round || (slotText || this.modelValue + '' || '').length < 2,
+        'w-badge--round': this.round || (slotText || `${this.modelValue}` || '').length < 2,
         'w-badge--dark': this.dark,
         'w-badge--light': this.light,
         'w-badge--outline': this.outline,

package/src/wave-ui/components/w-card.vue

@@ -52,12 +52,12 @@ export default {
 
     titleHasToolbar () {
       const { title } = this.$slots
-      return title && title().map(vnode => vnode.type.name).join('').includes('w-toolbar')
+      return title?.()?.map(vnode => vnode.type.name).join('').includes('w-toolbar')
     },
 
     actionsHasToolbar () {
       const { actions } = this.$slots
-      return actions && actions().map(vnode => vnode.type.name).join('').includes('w-toolbar')
+      return actions?.()?.map(vnode => vnode.type.name).join('').includes('w-toolbar')
     },
 
     imgProps () {

package/src/wave-ui/components/w-checkboxes.vue

@@ -75,7 +75,7 @@ export default {
           _index: i,
           value: itemValue, // If no value is set then add one to prevent error.
           color: item[this.itemColorKey] || this.color,
-          _isChecked: this.modelValue && this.modelValue.includes(itemValue)
+          _isChecked: this.modelValue?.includes(itemValue)
         })
       })
     },

package/src/wave-ui/components/w-icon.vue

@@ -87,7 +87,7 @@ export default {
   methods: {
     readIcon () {
       const { default: slot } = this.$slots
-      const [fontName = '', icon = ''] = (typeof slot === 'function' && slot()[0].children.trim().split(' ')) || []
+      const [fontName = '', icon = ''] = (typeof slot === 'function' && slot()?.[0]?.children?.trim()?.split(' ')) || []
       this.fontName = fontName
       this.icon = icon
 

package/src/wave-ui/components/w-image.vue

@@ -183,7 +183,7 @@ export default {
 
     if (this.lazy) {
       const IntersectObserver = new IntersectionObserver(entry => {
-        if (entry[0] && entry[0].isIntersecting) {
+        if (entry[0]?.isIntersecting) {
           this.loadImage()
           IntersectObserver.disconnect()
         }

package/src/wave-ui/components/w-input.vue

@@ -335,7 +335,7 @@ export default {
       // If the preview prop is a string, the user is setting the  preview to an icon and
       // don't need the actual file preview.
       const isPreviewAnIcon = typeof this.preview === 'string'
-      const isFileAnImage = original.type && original.type.startsWith('image/')
+      const isFileAnImage = original.type?.startsWith('image/')
       // Check if the file is an image and set a preview image.
       if (this.preview && !isPreviewAnIcon && isFileAnImage) {
         reader.addEventListener('load', e => {
@@ -357,7 +357,7 @@ export default {
     // On page load, check if the field is autofilled by the browser.
     // 20211229. Only a problem on Chrome. Firefox ok, Safari always prompts before filling up.
     setTimeout(() => {
-      if (this.$refs.input && this.$refs.input.matches(':-webkit-autofill')) this.isAutofilled = true
+      if (this.$refs.input?.matches(':-webkit-autofill')) this.isAutofilled = true
     }, 400) // Can't be less than 350: time for the browser to autofill.
   },
 

package/src/wave-ui/components/w-list.vue

@@ -133,9 +133,9 @@ export default {
     getItemValue (item) {
       if (item && typeof item === 'object') {
         if (item[this.itemValueKey] !== undefined) return item[this.itemValueKey]
-        else return item[this.itemLabelKey] !== undefined ? item[this.itemLabelKey] : item.index
+        return item[this.itemLabelKey] !== undefined ? item[this.itemLabelKey] : item.index
       }
-      else return item
+      return item
     },
 
     // Action of selecting 1 item.

package/src/wave-ui/components/w-menu.vue

@@ -122,12 +122,12 @@ export default {
 
     menuMinWidth () {
       if (this.minWidth === 'activator') return this.activatorWidth ? `${this.activatorWidth}px` : 0
-      else return isNaN(this.minWidth) ? this.minWidth : (this.minWidth ? `${this.minWidth}px` : 0)
+      return isNaN(this.minWidth) ? this.minWidth : (this.minWidth ? `${this.minWidth}px` : 0)
     },
 
     menuMaxWidth () {
       if (this.maxWidth === 'activator') return this.activatorWidth ? `${this.activatorWidth}px` : 0
-      else return isNaN(this.maxWidth) ? this.maxWidth : (this.maxWidth ? `${this.maxWidth}px` : 0)
+      return isNaN(this.maxWidth) ? this.maxWidth : (this.maxWidth ? `${this.maxWidth}px` : 0)
     },
 
     menuClasses () {
@@ -190,7 +190,7 @@ export default {
             this.hoveringActivator = true
             this.open(e)
           },
-          mouseleave: e => {
+          mouseleave: () => {
             this.hoveringActivator = false
             // Wait 10ms, the time to get the hoveringMenu updated on mouseenter on the menu.
             setTimeout(() => {
@@ -313,7 +313,15 @@ export default {
     &.w-menu--left {margin-left: -4 * $base-increment;}
     &.w-menu--right {margin-left: 4 * $base-increment;}
 
-    @include triangle(var(--w-menu-bg-color), '.w-menu', 9px);
-  }
+    // Menu without border.
+    &.w-menu--no-border {
+      @include triangle(var(--w-menu-bg-color), '.w-menu', 9px, 0);
+    }
+
+    // Menu with border.
+    &:not(.w-menu--no-border) {
+      @include triangle(var(--w-menu-bg-color), '.w-menu', 9px);
+    }
+}
 }
 </style>

package/src/wave-ui/components/w-scrollable.vue

@@ -1,18 +1,31 @@
 <template lang="pug">
 .w-scrollable(
-  ref="scrollable"
   @mouseenter="onMouseEnter"
   @mouseleave="onMouseLeave"
   @mousewheel="onMouseWheel"
   :class="scrollableClasses"
   v-bind="$attrs"
   :style="scrollableStyles")
-  slot
-.w-scrollbar(ref="track" @mousedown="onTrackMouseDown" :class="scrollbarClasses")
-  .w-scrollbar__thumb(ref="thumb" :style="thumbStyles")
+  .w-scrollable__content(ref="scrollableEl")
+    slot
+  .w-scrollable__scrollbar(ref="trackEl" @mousedown="onTrackMouseDown" :class="scrollbarClasses")
+    .w-scrollable__scrollbar-thumb(ref="thumbEl" :style="thumbStyles")
 </template>
 
-<script>
+<script setup>
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
+
+defineOptions({ name: 'WScrollable' })
+
+const props = defineProps({
+  color: { type: String, default: 'primary' },
+  bgColor: { type: String },
+  width: { type: [Number, String] },
+  height: { type: [Number, String] }
+})
+
+const emit = defineEmits([])
+
 const domProps = {
   h: {
     direction: 'horizontal',
@@ -38,201 +51,198 @@ const domProps = {
   }
 }
 
-export default {
-  name: 'w-scrollable',
-  props: {
-    color: { type: String, default: 'primary' },
-    bgColor: { type: String },
-    width: { type: [Number, String] },
-    height: { type: [Number, String] }
-  },
-
-  emits: [],
-
-  data: () => ({
-    mounted: false,
-    scrollable: {
-      top: null,
-      left: null,
-      hovered: false
-    },
-    scrollValuePercent: 0
-  }),
-
-  computed: {
-    isHorizontal () {
-      if (!this.mounted) return false
-      console.log('💂‍♂️', this.$refs.scrollable?.scrollWidth, this.$refs.scrollable?.offsetWidth)
-      return (this.width && !this.height) || (this.$refs.scrollable?.scrollWidth > this.$refs.scrollable?.offsetWidth)
-    },
-
-    m () { // m = shorthand for map of DOM properties.
-      return domProps[this.isHorizontal ? 'h' : 'v']
-    },
-
-    scrollableClasses () {
-      return {
-        [`w-scrollable--${this.m.direction}`]: true
-      }
-    },
-
-    scrollbarClasses () {
-      return {
-        [`w-scrollbar--${this.m.direction}`]: true
-      }
-    },
-
-    thumbSizePercent () {
-      if (!this.mounted) return 0
-      const size = this[this.m.size] ?? this.$refs.scrollable[[this.m.offsetSize]]
-      // if (size === undefined) size = this.$refs.scrollable.offsetSize
-      return (size * 100 / this.$refs.scrollable?.[this.m.scrollSize]) || 0
-    },
-
-    scrollableStyles () {
-      return {
-        [this.m.maxSize]: `${this[this.m.size]}px`
-      }
-    },
-
-    thumbStyles () {
-      let topOrLeftValue = this.scrollValuePercent
-      topOrLeftValue = Math.max(0, Math.min(topOrLeftValue, 100 - this.thumbSizePercent))
-      return {
-        [this.m.size]: `${this.thumbSizePercent}%`,
-        [this.m.topOrLeft]: `${topOrLeftValue}%`
-      }
-    }
-  },
+// Refs used in template and functions.
+const mounted = ref(false)
+const scrollableEl = ref(null)
+const trackEl = ref(null)
+const thumbEl = ref(null)
+const scrollableState = ref({
+  top: null,
+  left: null,
+  hovered: false
+})
+const scrollValuePercent = ref(0)
+const dragging = ref(false)
+
+const isHorizontal = computed(() => {
+  if (!mounted.value) return false
+  console.log('💂‍♂️', scrollableEl.value?.scrollWidth, scrollableEl.value?.offsetWidth)
+  return (props.width && !props.height) || (scrollableEl.value?.scrollWidth > scrollableEl.value?.offsetWidth)
+})
+
+const m = computed(() => domProps[isHorizontal.value ? 'h' : 'v'])
+
+const scrollableClasses = computed(() => ({
+  [`w-scrollable--${m.value.direction}`]: true
+}))
+
+const scrollbarClasses = computed(() => ({
+  [`w-scrollable__scrollbar--${m.value.direction}`]: true
+}))
+
+const refreshThumb = ref(0)
+
+const thumbSizePercent = computed(() => {
+  refreshThumb.value // Dependency to force re-evaluation.
+  if (!mounted.value) return 0
+  const size = props[m.value.size] ?? scrollableEl.value?.[m.value.offsetSize]
+  return (size * 100 / scrollableEl.value?.[m.value.scrollSize]) || 0
+})
+
+function forceRefreshThumb () {
+  refreshThumb.value++
+}
 
-  methods: {
-    onTrackMouseDown (e) {
-      if (this.isDisabled || this.isReadonly) return
-      // On touch screen don't listen for both touchstart & mousedown.
-      if ('ontouchstart' in window && e.type === 'mousedown') return
-
-      const { top, left, width, height } = this.$refs.track.getBoundingClientRect()
-      if (this.isHorizontal) {
-        this.$refs.track.width = width
-        this.$refs.track.left = left
-      }
-      else {
-        this.$refs.track.height = height
-        this.$refs.track.top = top
-      }
-      this.dragging = true
-
-      this.computeScroll(e.type === 'touchstart' ? e.touches[0][this.m.clientXorY] : e[this.m.clientXorY])
-      this.scroll()
-
-      document.addEventListener(e.type === 'touchstart' ? 'touchmove' : 'mousemove', this.onDrag)
-      document.addEventListener(e.type === 'touchstart' ? 'touchend' : 'mouseup', this.onMouseUp, { once: true })
-    },
-
-    onDrag (e) {
-      this.computeScroll((e.type === 'touchmove' ? e.touches[0][this.m.clientXorY] : e[this.m.clientXorY]))
-      this.scroll()
-    },
-
-    onMouseUp (e) {
-      this.dragging = false
-      document.removeEventListener(e.type === 'touchend' ? 'touchmove' : 'mousemove', this.onDrag)
-      if (this.$refs.thumb) this.$refs.thumb.focus()
-    },
-
-    onMouseEnter () {
-      this.scrollable.hovered = true
-    },
-
-    onMouseLeave () {
-      this.scrollable.hovered = false
-    },
-
-    onResize (e) {
-    },
-
-    onMouseWheel (e) {
-      if (!this.scrollable.hovered) return // Only scroll a w-scrollable element that is being hovered.
-
-      // When scrolling beyond limits, release the mousewheel and scroll the parent.
-      if (this.scrollValuePercent <= 0 && e[this.m.deltaXorY] < 0) return
-      else if (this.scrollValuePercent >= 100 - this.thumbSizePercent && e[this.m.deltaXorY] > 0) return
-
-      e.preventDefault() // Hold the scroll in the hovered w-scrollable element.
-
-      this.scrollValuePercent += e[this.m.deltaXorY] * 0.05
-      this.scrollValuePercent = Math.max(0, Math.min(this.scrollValuePercent, 100))
-      this.scroll()
-    },
-
-    computeScroll (cursorPositionXorY) {
-      const { top, left, width, height } = this.$refs.scrollable.getBoundingClientRect()
-      const topOrLeft = this.isHorizontal ? left : top
-      const size = this.isHorizontal ? width : height
-      this.scrollValuePercent = Math.max(0, Math.min(((cursorPositionXorY - topOrLeft) / size) * 100, 100))
-    },
-
-    scroll () {
-      this.$refs.scrollable[this.m.scrollTopOrLeft] = this.scrollValuePercent * this.$refs.scrollable?.[this.m.scrollSize] / 100
-      this.updateThumbPosition()
-    },
-
-    updateThumbPosition () {
-      this.$refs.thumb.style[this.m.topOrLeft] = this.scrollValuePercent
-    }
-  },
+const scrollableStyles = computed(() => ({
+  [m.value.maxSize]: props[m.value.size] ? `${props[m.value.size]}px` : undefined
+}))
 
-  mounted () {
-    this.mounted = true
-    const { top, left } = this.$refs.scrollable.getBoundingClientRect()
-    this.scrollable.top = top
-    this.scrollable.left = left
+const thumbStyles = computed(() => {
+  let topOrLeftValue = scrollValuePercent.value
+  topOrLeftValue = Math.max(0, Math.min(topOrLeftValue, 100 - thumbSizePercent.value))
+  return {
+    [m.value.size]: `${thumbSizePercent.value}%`,
+    [m.value.topOrLeft]: `${topOrLeftValue}%`
+  }
+})
 
-    this.$el.parentNode.style.position = 'relative'
-    this.$el.parentNode.style.padding = 0
+function onTrackMouseDown (e) {
+  if (props.isDisabled || props.isReadonly) return
+  // On touch screen don't listen for both touchstart & mousedown.
+  if ('ontouchstart' in window && e.type === 'mousedown') return
 
-    window.addEventListener('resize', this.onResize)
+  const { top, left, width, height } = trackEl.value.getBoundingClientRect()
+  if (isHorizontal.value) {
+    trackEl.value.width = width
+    trackEl.value.left = left
+  }
+  else {
+    trackEl.value.height = height
+    trackEl.value.top = top
   }
+  dragging.value = true
+
+  computeScroll(e.type === 'touchstart' ? e.touches[0][m.value.clientXorY] : e[m.value.clientXorY])
+  scroll()
+
+  document.addEventListener(e.type === 'touchstart' ? 'touchmove' : 'mousemove', onDrag)
+  document.addEventListener(e.type === 'touchstart' ? 'touchend' : 'mouseup', onMouseUp, { once: true })
+}
+
+function onDrag (e) {
+  computeScroll((e.type === 'touchmove' ? e.touches[0][m.value.clientXorY] : e[m.value.clientXorY]))
+  scroll()
 }
+
+function onMouseUp (e) {
+  dragging.value = false
+  document.removeEventListener(e.type === 'touchend' ? 'touchmove' : 'mousemove', onDrag)
+  if (thumbEl.value) thumbEl.value.focus()
+}
+
+function onMouseEnter () {
+  scrollableState.value.hovered = true
+}
+
+function onMouseLeave () {
+  scrollableState.value.hovered = false
+}
+
+function onMouseWheel (e) {
+  if (!scrollableState.value.hovered) return // Only scroll a w-scrollable element that is being hovered.
+
+  // When scrolling beyond limits, release the mousewheel and scroll the parent.
+  if (scrollValuePercent.value <= 0 && e[m.value.deltaXorY] < 0) return
+  if (scrollValuePercent.value >= 100 - thumbSizePercent.value && e[m.value.deltaXorY] > 0) return
+
+  e.preventDefault() // Hold the scroll in the hovered w-scrollable element.
+
+  scrollValuePercent.value += e[m.value.deltaXorY] * 0.05
+  scrollValuePercent.value = Math.max(0, Math.min(scrollValuePercent.value, 100))
+  scroll()
+}
+
+function computeScroll (cursorPositionXorY) {
+  const { top, left, width, height } = scrollableEl.value.getBoundingClientRect()
+  const topOrLeft = isHorizontal.value ? left : top
+  const size = isHorizontal.value ? width : height
+  scrollValuePercent.value = Math.max(0, Math.min(((cursorPositionXorY - topOrLeft) / size) * 100, 100))
+}
+
+function scroll () {
+  scrollableEl.value[m.value.scrollTopOrLeft] = scrollValuePercent.value * scrollableEl.value?.[m.value.scrollSize] / 100
+  updateThumbPosition()
+}
+
+function updateThumbPosition () {
+  thumbEl.value.style[m.value.topOrLeft] = scrollValuePercent.value
+}
+
+onMounted(() => {
+  mounted.value = true
+  const { top, left } = scrollableEl.value.getBoundingClientRect()
+  scrollableState.value.top = top
+  scrollableState.value.left = left
+
+  window.addEventListener('resize', forceRefreshThumb)
+})
+
+// Clean up event listener.
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', forceRefreshThumb)
+})
+
+defineExpose({ scroll })
 </script>
 
 <style lang="scss">
 .w-scrollable {
-  position: relative;
-  overflow: hidden;
-}
-
-.w-scrollbar {
-  position: absolute;
-  background: #000;
-  user-select: none;
+  display: flex;
+  border-radius: inherit;
 
-  &--horizontal {
-    inset: auto 0 0;
-    height: 8px;
+  &__content {
+    padding: 0;
+    flex: 1 1 auto;
+    overflow: hidden;
   }
-  &--vertical {
-    inset: 0 0 0 auto;
-    width: 8px;
+
+  &__scrollbar {
+    position: relative;
+    flex: 0 0 auto;
+    background: $scrollbar-bg-color;
+    user-select: none;
+
+    &--horizontal {
+      inset: auto 0 0;
+      border-bottom-left-radius: inherit;
+      border-bottom-right-radius: inherit;
+      height: $scrollbar-size;
+    }
+    &--vertical {
+      inset: 0 0 0 auto;
+      border-top-right-radius: inherit;
+      border-bottom-right-radius: inherit;
+      width: $scrollbar-size;
+    }
   }
 
-  &__thumb {
+  &__scrollbar-thumb {
     position: absolute;
-    background: #333;
+    background: $scrollbar-thumb-color;
     border-radius: $border-radius;
     z-index: 1;
     will-change: top left;
 
-    &:hover {background: #444;}
+    &:hover {background: $scrollbar-thumb-color;}
   }
-  &--horizontal &__thumb {
+  &--horizontal &__scrollbar-thumb {
     height: 6px;
     left: 0;
     right: 0;
     margin-top: 1px;
     margin-bottom: 1px;
   }
-  &--vertical &__thumb {
+  &--vertical &__scrollbar-thumb {
     width: 6px;
     top: 0;
     bottom: 0;