vgapp 1.4.3 → 1.4.5

package/app/modules/vgnestable/scss/_variables.scss

@@ -1,67 +1,69 @@
-$nestable-map: (
-	list-transition: "background-color .15s ease, outline-color .15s ease",
-	list-drop-target-bg: rgba(13, 110, 253, .06),
-	list-drop-target-outline: 1px dashed rgba(13, 110, 253, .45),
+@use "../../../utils/scss" as vg;
+
+$nestable-map: (
+	list-transition: "background-color .15s ease, outline-color .15s ease",
+	list-drop-target-bg: var(--vg-primary-subtle-bg, rgba(13, 110, 253, .06)),
+	list-drop-target-outline: vg.$border-width dashed var(--vg-primary-outline-color, rgba(13, 110, 253, .45)),
 	list-drop-target-outline-offset: 2px,
-	list-drop-denied-bg: rgba(220, 53, 69, .06),
-	list-drop-denied-outline: 1px dashed rgba(220, 53, 69, .5),
+	list-drop-denied-bg: var(--vg-danger-subtle-bg, rgba(220, 53, 69, .06)),
+	list-drop-denied-outline: vg.$border-width dashed var(--vg-danger-outline-color, rgba(220, 53, 69, .5)),
 	list-drop-denied-outline-offset: 2px,
 	list-nested-margin-top: .35rem,
 	list-nested-padding-left: 1.25rem,
-	list-nested-border-left: 1px dashed rgba(0, 0, 0, .12),
+	list-nested-border-left: vg.$border-width dashed var(--vg-border-disabled-color, rgba(0, 0, 0, .12)),
 
 	item-margin: .35rem 0,
 	item-transition: opacity .15s ease,
 	item-dragging-opacity: .85,
 	item-ghost-opacity: .3,
-	item-drop-line: #0d6efd,
-	item-drop-attachable-outline: 1px dashed rgba(13, 110, 253, .55),
-	item-drop-inside-bg: rgba(13, 110, 253, .1),
-	item-drop-inside-border: rgba(13, 110, 253, .72),
-	item-drop-denied: #dc3545,
-	item-disabled-bg: rgba(0, 0, 0, .025),
-	item-disabled-handle-color: rgba(0, 0, 0, .28),
+	item-drop-line: var(--vg-primary-color, #0d6efd),
+	item-drop-attachable-outline: vg.$border-width dashed var(--vg-primary-outline-color, rgba(13, 110, 253, .55)),
+	item-drop-inside-bg: var(--vg-primary-muted-bg, rgba(13, 110, 253, .1)),
+	item-drop-inside-border: var(--vg-primary-strong-border-color, rgba(13, 110, 253, .72)),
+	item-drop-denied: var(--vg-danger-color, #dc3545),
+	item-disabled-bg: var(--vg-surface-subtle-bg, rgba(0, 0, 0, .025)),
+	item-disabled-handle-color: var(--vg-text-placeholder-color, rgba(0, 0, 0, .28)),
 
 	inner-gap: .5rem,
 	inner-min-height: 40px,
 	inner-padding: .45rem .65rem,
-	inner-border: 1px solid rgba(0, 0, 0, .12),
-	inner-bg: #fff,
+	inner-border: vg.$border-width vg.$border-style var(--vg-border-disabled-color, rgba(0, 0, 0, .12)),
+	inner-bg: var(--vg-surface-bg, #{vg.$surface-bg}),
 	inner-border-radius: .45rem,
 
 	handle-size: 1.85rem,
-	handle-border: 1px solid rgba(0, 0, 0, .12),
-	handle-bg: rgba(0, 0, 0, .03),
+	handle-border: vg.$border-width vg.$border-style var(--vg-border-disabled-color, rgba(0, 0, 0, .12)),
+	handle-bg: var(--vg-surface-subtle-bg, rgba(0, 0, 0, .03)),
 	handle-border-radius: .35rem,
 	handle-cursor: grab,
 	handle-active-cursor: grabbing,
 
 	toggle-size: 1.85rem,
-	toggle-border: 1px solid rgba(0, 0, 0, .12),
-	toggle-bg: rgba(0, 0, 0, .03),
+	toggle-border: vg.$border-width vg.$border-style var(--vg-border-disabled-color, rgba(0, 0, 0, .12)),
+	toggle-bg: var(--vg-surface-subtle-bg, rgba(0, 0, 0, .03)),
 	toggle-border-radius: .35rem,
-	toggle-color: rgba(0, 0, 0, .65),
+	toggle-color: var(--vg-text-muted-color, rgba(0, 0, 0, .65)),
 	toggle-font-weight: 700,
 	toggle-line-height: 1,
-	toggle-hover-bg: rgba(0, 0, 0, .07),
+	toggle-hover-bg: var(--vg-surface-subtle-hover-bg, rgba(0, 0, 0, .07)),
 	toggle-svg-size: 16px,
 	toggle-svg-transition: transform .2s ease,
 	toggle-svg-closed-transform: rotate(0deg),
 	toggle-svg-open-transform: rotate(180deg),
 
 	handle-icon-min-width: .9rem,
-	handle-icon-color: rgba(0, 0, 0, .45),
+	handle-icon-color: var(--vg-text-disabled-color, rgba(0, 0, 0, .45)),
 	handle-icon-font-weight: 700,
 	handle-icon-line-height: 1,
 	handle-icon-letter-spacing: .06em,
 
-	placeholder-border: 1px dashed rgba(13, 110, 253, .7),
-	placeholder-bg: rgba(13, 110, 253, .08),
+	placeholder-border: vg.$border-width dashed var(--vg-primary-strong-border-color, rgba(13, 110, 253, .7)),
+	placeholder-bg: var(--vg-primary-subtle-bg, rgba(13, 110, 253, .08)),
 	placeholder-border-radius: .45rem,
 	placeholder-margin: .35rem 0,
 	placeholder-min-height: 40px,
 
 	drag-element-opacity: 1,
 	drag-element-transform: scale(1.01),
-	drag-element-shadow: 0 12px 30px rgba(0, 0, 0, .2)
-);
+	drag-element-shadow: 0 12px 30px var(--vg-shadow-color, rgba(0, 0, 0, .2))
+) !default;

package/app/modules/vgnestable/scss/vgnestable.scss

@@ -6,13 +6,12 @@
 *--------------------------------------------------------------------------
 **/
 
-@import "../../../utils/scss/functions";
-@import "../../../utils/scss/mixin";
-@import "../../../utils/scss/variables";
-@import "variables";
+@forward "variables";
+@use "../../../utils/scss" as vg;
+@use "variables" as vars;
 
 .vg-nestable {
-	@include mix-vars('nestable', $nestable-map);
+	@include vg.mix-vars('nestable', vars.$nestable-map);
 
 	&-list {
 		list-style: none;

package/app/modules/vgrangeslider/scss/_variables.scss

@@ -1,10 +1,12 @@
+@use "../../../utils/scss" as vg;
+
 $range-slider-map: (
-	bg: #f1f4f8,
-	fill: #111827,
-	thumb: #ffffff,
-	thumb-border: #111827,
-	text: #111827,
-	muted: #6b7280,
+	bg: var(--vg-control-muted-bg, #f1f4f8),
+	fill: var(--vg-control-strong-color, #111827),
+	thumb: var(--vg-control-bg, #ffffff),
+	thumb-border: var(--vg-control-strong-color, #111827),
+	text: var(--vg-control-strong-color, #111827),
+	muted: var(--vg-text-muted-color, #6b7280),
 	gap: 10px,
 	height: 6px,
 	radius: 999px,
@@ -19,13 +21,13 @@ $range-slider-map: (
 	input-height: 24px,
 	thumb-size: 18px,
 	thumb-border-width: 2px,
-	thumb-shadow: 0 2px 10px rgba(17, 24, 39, 0.16),
-	tooltip-bg: #111827,
-	tooltip-color: #ffffff,
+	thumb-shadow: 0 2px 10px var(--vg-shadow-soft-color, rgba(17, 24, 39, .16)),
+	tooltip-bg: var(--vg-surface-inverse-bg, #111827),
+	tooltip-color: var(--vg-text-inverse-color, #ffffff),
 	tooltip-padding-y: 4px,
 	tooltip-padding-x: 8px,
 	tooltip-radius: 6px,
-	tooltip-shadow: 0 6px 18px rgba(17, 24, 39, 0.18),
+	tooltip-shadow: 0 6px 18px var(--vg-shadow-soft-color, rgba(17, 24, 39, .18)),
 	tooltip-font-size: 12px,
 	tooltip-line-height: 1.2,
 	labels-gap: 6px,
@@ -34,20 +36,20 @@ $range-slider-map: (
 	label-font-weight: 500,
 	ruler-mark-width: 1px,
 	ruler-mark-height: 8px,
-	ruler-mark-bg: #cbd5e1,
+	ruler-mark-bg: var(--vg-control-mark-color, #cbd5e1),
 	ruler-gap-y: 13px,
 	ruler-label-offset: 8px,
 	ruler-label-font-size: 11px,
 	ruler-label-line-height: 1.2,
-	ruler-label-color: #6b7280,
-	ruler-active-mark-bg: #111827,
-	ruler-active-label-color: #111827,
+	ruler-label-color: var(--vg-text-muted-color, #6b7280),
+	ruler-active-mark-bg: var(--vg-control-strong-color, #111827),
+	ruler-active-label-color: var(--vg-control-strong-color, #111827),
 	ruler-inactive-opacity: .5,
 	ruler-active-opacity: 1,
-	status-success: $success,
-	status-warning: $warning,
-	status-danger: $danger,
-	status-success-contrast: #ffffff,
-	status-warning-contrast: #111827,
-	status-danger-contrast: #ffffff,
-);
+	status-success: var(--vg-success-color, #{vg.$success}),
+	status-warning: var(--vg-warning-color, #{vg.$warning}),
+	status-danger: var(--vg-danger-color, #{vg.$danger}),
+	status-success-contrast: var(--vg-success-contrast-color, #ffffff),
+	status-warning-contrast: var(--vg-warning-contrast-color, #111827),
+	status-danger-contrast: var(--vg-danger-contrast-color, #ffffff),
+) !default;

package/app/modules/vgrangeslider/scss/vgrangeslider.scss

@@ -4,13 +4,12 @@
 *--------------------------------------------------------------------------
 **/
 
-@import "../../../utils/scss/functions";
-@import "../../../utils/scss/mixin";
-@import "../../../utils/scss/variables";
-@import "variables";
+@forward "variables";
+@use "../../../utils/scss" as vg;
+@use "variables" as vars;
 
 .vg-range-slider {
-	@include mix-vars('range-slider', $range-slider-map);
+	@include vg.mix-vars('range-slider', vars.$range-slider-map);
 
 	--vg-range-slider-ruler-height: calc(
 		var(--vg-range-slider-ruler-mark-height) +

package/app/modules/vgrollup/scss/_variables.scss

@@ -1,8 +1,15 @@
-$rollup-map: (
-		transition: $transition-base,
-		fade-height: 100px,
-		fade-background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)
-);
-$rollup-button-map: (
-		align: center
-);
+@use "../../../utils/scss" as vg;
+
+$rollup-map: (
+		transition: vg.$transition-base,
+		fade-height: 100px,
+		fade-background: linear-gradient(
+			180deg,
+			var(--vg-surface-transparent, rgba(255, 255, 255, 0)) 0%,
+			var(--vg-surface-bg, #{vg.$surface-bg}) 100%
+		)
+) !default;
+
+$rollup-button-map: (
+		align: center
+) !default;

package/app/modules/vgrollup/scss/vgrollup.scss

@@ -6,17 +6,16 @@
 *--------------------------------------------------------------------------
 **/
 
-@import "../../../utils/scss/functions";
-@import "../../../utils/scss/mixin";
-@import "../../../utils/scss/variables";
-@import "variables";
+@forward "variables";
+@use "../../../utils/scss" as vg;
+@use "variables" as vars;
 
 .vg-rollup {
-	@include mix-vars('rollup', $rollup-map);
+	@include vg.mix-vars('rollup', vars.$rollup-map);
 	transform: var(--vg-rollup-transition);
 
 	&-button {
-		@include mix-vars('rollup-button', $rollup-button-map);
+		@include vg.mix-vars('rollup-button', vars.$rollup-button-map);
 		text-align: var(--vg-rollup-button-align);
 	}
 
@@ -52,4 +51,4 @@
 			display: none !important;
 		}
 	}
-}
+}

package/app/modules/vgselect/scss/_variables.scss

@@ -1,9 +1,11 @@
-$select-current-map: (
-		background-color: white,
-		color: black,
-		border-width: 1px,
-		border-style: solid,
-		border-color: #dddddd,
+@use "../../../utils/scss" as vg;
+
+$select-current-map: (
+		background-color: var(--vg-control-bg, #ffffff),
+		color: var(--vg-text-color, #{vg.$color}),
+		border-width: vg.$border-width,
+		border-style: vg.$border-style,
+		border-color: var(--vg-control-border-color, #dddddd),
 		border-radius: 5px,
 		padding-left: 16px,
 		padding-right: 40px,
@@ -14,69 +16,69 @@ $select-current-map: (
 		z-index: 10,
 ) !default;
 
-$select-placeholder-map: (
-		placehoder-color: rgba(0, 0, 0, .32),
-		placehoder-font-size: 16px,
-);
+$select-placeholder-map: (
+		placehoder-color: var(--vg-text-placeholder-color, rgba(0, 0, 0, .32)),
+		placehoder-font-size: 16px,
+) !default;
 
 $select-current-svg: '<svg aria-hidden="true" focusable="false" data-prefix="fa-light" data-icon="chevron-down" class="svg-inline--fa fa-chevron-down fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M4 181C7 178 12 176 16 176C20 176 24 177 27 180L224 362L421 180C428 174 438 175 444 181C450 188 449 198 443 204L235 396C229 401 219 401 213 396L5 204C-1 198 -2 188 4 181Z" fill="gray"/></svg>' !default;
 
-$select-dropdown-map: (
-		background-color: white,
-		color: black,
-		border-width: 1px,
-		border-style: solid,
-		border-color: #dddddd,
-		border-radius: $border-radius,
-		box-shadow: 0 7px 12px 1px rgba(68, 68, 68, 0.11),
+$select-dropdown-map: (
+		background-color: var(--vg-control-bg, #ffffff),
+		color: var(--vg-text-color, #{vg.$color}),
+		border-width: vg.$border-width,
+		border-style: vg.$border-style,
+		border-color: var(--vg-control-border-color, #dddddd),
+		border-radius: vg.$border-radius,
+		box-shadow: 0 7px 12px 1px var(--vg-shadow-soft-color, rgba(68, 68, 68, .11)),
 		z-index: 15,
 ) !default;
 
-$select-list-map: (
-		background-color: transparent,
-		color: black,
+$select-list-map: (
+		background-color: transparent,
+		color: var(--vg-text-color, #{vg.$color}),
 		padding-left: 8px,
 		padding-right: 8px,
 		padding-top: 8px,
 		padding-bottom: 8px,
-		border-bottom-width: 1px,
-		border-bottom-style: solid,
-		border-bottom-color: #f5f5f5,
+		border-bottom-width: vg.$border-width,
+		border-bottom-style: vg.$border-style,
+		border-bottom-color: var(--vg-border-disabled-color, #f5f5f5),
 ) !default;
 
-$select-optgroup-map: (
-		background-color: transparent,
-		color: #000,
+$select-optgroup-map: (
+		background-color: transparent,
+		color: var(--vg-text-color, #{vg.$color}),
 		padding-left: 8px,
 		padding-right: 8px,
 		padding-top: 8px,
 		padding-bottom: 8px,
-		border-bottom-width: 1px,
-		border-bottom-style: solid,
-		border-bottom-color: #838383,
+		border-bottom-width: vg.$border-width,
+		border-bottom-style: vg.$border-style,
+		border-bottom-color: var(--vg-border-strong-color, #838383),
 		font-weight: 500,
 ) !default;
 
 $select-list-max-height: 286px !default;
 $select-list-scrollbar-width: 6px !default;
-$select-list-scrollbar-bg: #F5F5F5 !default;
-$select-list-scrollbar-thumb: #999 !default;
+$select-list-scrollbar-bg: var(--vg-surface-muted-bg, #f5f5f5) !default;
+$select-list-scrollbar-thumb: var(--vg-text-muted-color, #999999) !default;
 
-$select-list-hover-map: (
-		background-color: #f7f7f7,
-		color: black,
-		border-bottom-color: #f5f5f5,
+$select-list-hover-map: (
+		background-color: var(--vg-surface-hover-bg, #f7f7f7),
+		color: var(--vg-text-color, #{vg.$color}),
+		border-bottom-color: var(--vg-border-disabled-color, #f5f5f5),
 ) !default;
 
-$select-optgroup-hover-map: (
-		background-color: #f7f7f7,
-		color: black,
-		border-bottom-color: #f5f5f5,
+$select-optgroup-hover-map: (
+		background-color: var(--vg-surface-hover-bg, #f7f7f7),
+		color: var(--vg-text-color, #{vg.$color}),
+		border-bottom-color: var(--vg-border-disabled-color, #f5f5f5),
 ) !default;
 
-$select-search-map: (
-		background-color: #f2f2f2,
-		color: #000000
+$select-search-map: (
+		background-color: var(--vg-control-muted-bg, #f2f2f2),
+		color: var(--vg-text-color, #{vg.$color})
 ) !default;
 
 $select-tags-map: (
@@ -86,15 +88,15 @@ $select-tags-map: (
 		padding: 2px 0
 ) !default;
 
-$select-tag-map: (
-		gap: 4px,
-		background: #0d6efd,
-		color: white,
+$select-tag-map: (
+		gap: 4px,
+		background: var(--vg-primary-color, #0d6efd),
+		color: var(--vg-primary-contrast-color, #ffffff),
 		padding: 2px 6px,
 		border-radius: 4px,
 		font-size: 14px,
 		remove-width: 12px,
 		remove-height: 12px,
-		remove-stroke: white,
+		remove-stroke: var(--vg-primary-contrast-color, #ffffff),
 		remove-stroke-width: 2
 ) !default;

package/app/modules/vgselect/scss/vgselect.scss

@@ -6,10 +6,9 @@
 *--------------------------------------------------------------------------
 **/
 
-@import "../../../utils/scss/functions";
-@import "../../../utils/scss/mixin";
-@import "../../../utils/scss/variables";
-@import "variables";
+@forward "variables";
+@use "../../../utils/scss" as vg;
+@use "variables" as vars;
 
 select {
 	&.vg-select {
@@ -26,20 +25,20 @@ select {
 }
 
 .vg-select {
-	@include mix-vars('select-current', $select-current-map);
-	@include mix-vars('select-current', $select-placeholder-map);
-	@include mix-vars('select-dropdown', $select-dropdown-map);
-	@include mix-vars('select-list', $select-list-map);
-	@include mix-vars('select-optgroup', $select-optgroup-map);
-	@include mix-vars('select-optgroup-hover', $select-optgroup-hover-map);
-	@include mix-vars('select-list-hover', $select-list-hover-map);
-	@include mix-vars('select-search', $select-search-map);
-	@include mix-vars('select-tags', $select-tags-map);
-	@include mix-vars('select-tag', $select-tag-map);
-	--vg-select-list-max-height: #{$select-list-max-height};
-	--vg-select-list-scrollbar-width: #{$select-list-scrollbar-width};
-	--vg-select-list-scrollbar-bg: #{$select-list-scrollbar-bg};
-	--vg-select-list-scrollbar-thumb: #{$select-list-scrollbar-thumb};
+	@include vg.mix-vars('select-current', vars.$select-current-map);
+	@include vg.mix-vars('select-current', vars.$select-placeholder-map);
+	@include vg.mix-vars('select-dropdown', vars.$select-dropdown-map);
+	@include vg.mix-vars('select-list', vars.$select-list-map);
+	@include vg.mix-vars('select-optgroup', vars.$select-optgroup-map);
+	@include vg.mix-vars('select-optgroup-hover', vars.$select-optgroup-hover-map);
+	@include vg.mix-vars('select-list-hover', vars.$select-list-hover-map);
+	@include vg.mix-vars('select-search', vars.$select-search-map);
+	@include vg.mix-vars('select-tags', vars.$select-tags-map);
+	@include vg.mix-vars('select-tag', vars.$select-tag-map);
+	--vg-select-list-max-height: #{vars.$select-list-max-height};
+	--vg-select-list-scrollbar-width: #{vars.$select-list-scrollbar-width};
+	--vg-select-list-scrollbar-bg: #{vars.$select-list-scrollbar-bg};
+	--vg-select-list-scrollbar-thumb: #{vars.$select-list-scrollbar-thumb};
 	position: relative;
 
 	&:not(.show) {
@@ -87,7 +86,7 @@ select {
 	}
 
 	&-current {
-		@each $key, $value in $select-current-map {
+		@each $key, $value in vars.$select-current-map {
 			#{$key}: var(--vg-select-current-#{$key})
 		}
 		box-sizing: border-box;
@@ -105,7 +104,7 @@ select {
 			top: 50%;
 			transform: translateY(-50%);
 			transition: all .4s ease-in-out;
-			background-image: url("data:image/svg+xml, " + $select-current-svg);
+			background-image: url("data:image/svg+xml, " + vars.$select-current-svg);
 			background-repeat: no-repeat;
 			width: 16px;
 			height: 16px;
@@ -118,7 +117,7 @@ select {
 	}
 
 	&-dropdown {
-		@each $key, $value in $select-dropdown-map {
+		@each $key, $value in vars.$select-dropdown-map {
 			#{$key}: var(--vg-select-dropdown-#{$key})
 		}
 		position: absolute;
@@ -158,8 +157,8 @@ select {
 		max-height: var(--vg-select-list-max-height);
 		overflow-y: auto;
 
-		&::-webkit-scrollbar-track {
-			-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+		&::-webkit-scrollbar-track {
+			-webkit-box-shadow: inset 0 0 6px var(--vg-shadow-color, rgba(0, 0, 0, .3));
 			background-color: var(--vg-select-list-scrollbar-bg);
 		}
 
@@ -175,7 +174,7 @@ select {
 		}
 
 		&--option {
-			@each $key, $value in $select-list-map {
+			@each $key, $value in vars.$select-list-map {
 				#{$key}: var(--vg-select-list-#{$key})
 			}
 			display: block;
@@ -188,7 +187,7 @@ select {
 			}
 
 			&:hover, &.selected {
-				@each $key, $value in $select-list-hover-map {
+				@each $key, $value in vars.$select-list-hover-map {
 					#{$key}: var(--vg-select-list-hover-#{$key})
 				}
 			}
@@ -218,7 +217,7 @@ select {
 			}
 
 			&-title {
-				@each $key, $value in $select-optgroup-map {
+				@each $key, $value in vars.$select-optgroup-map {
 					#{$key}: var(--vg-select-optgroup-#{$key})
 				}
 			}
@@ -227,7 +226,7 @@ select {
 
 	&-search {
 		input {
-			@each $key, $value in $select-search-map {
+			@each $key, $value in vars.$select-search-map {
 				#{$key}: var(--vg-select-search-#{$key})
 			}
 			padding: 8px;

package/app/modules/vgsidebar/scss/_variables.scss

@@ -1,4 +1,6 @@
-$sidebar-map: (
+@use "../../../utils/scss" as vg;
+
+$sidebar-map: (
 		horizontal: (
 				width: 400px,
 				height: 100vh,
@@ -7,13 +9,13 @@ $sidebar-map: (
 				width: 100vw,
 				height: 30vh,
 		),
-		bg-color:                  $bg-color,
-		color:                     $color,
-		box-shadow:                $box-shadow,
+		bg-color:                  var(--vg-surface-bg, #{vg.$surface-bg}),
+		color:                     var(--vg-text-color, #{vg.$color}),
+		box-shadow:                var(--vg-box-shadow, #{vg.$box-shadow}),
 		header-height:             60px,
 		footer-height:             70px,
 		padding:                   1rem,
-		border:                    1px solid #{$border-color},
-		z-index:                   $sidebar-index,
-		transition:                $transition-base,
-);
+		border:                    vg.$border-width vg.$border-style var(--vg-border-color, #{vg.$border-color}),
+		z-index:                   vg.$sidebar-index,
+		transition:                vg.$transition-base,
+) !default;

package/app/modules/vgsidebar/scss/vgsidebar.scss

@@ -6,13 +6,12 @@
 *--------------------------------------------------------------------------
 **/
 
-@import "../../../utils/scss/functions";
-@import "../../../utils/scss/mixin";
-@import "../../../utils/scss/variables";
-@import "variables";
+@forward "variables";
+@use "../../../utils/scss" as vg;
+@use "variables" as vars;
 
 .vg-sidebar {
-	@include mix-vars('sidebar', $sidebar-map);
+	@include vg.mix-vars('sidebar', vars.$sidebar-map);
 	position: fixed;
 	width: auto;
 	height: auto;
@@ -91,4 +90,4 @@
 		padding: var(--vg-sidebar-padding);
 		border-top: var(--vg-sidebar-border);
 	}
-}
+}

package/app/modules/vgtabs/scss/_variables.scss

@@ -1,29 +1,32 @@
-$tabs-map: (
-		panel-gap: 10px,
-		panel-margin-bottom: 1.5rem,
-		link-border-radius: $border-radius,
-		link-border-style: $border-style,
-		link-border-width: $border-width,
-		link-border-color: $border-color,
-		link-border-active-color: $border-color-active,
-		link-border-disabled-color: $border-color-disabled,
-		link-color: $color,
-		link-active-color: $color-active,
-		link-focus-color: $color-active,
-		link-disabled-color: $color-disabled,
+@use "../../../utils/scss" as vg;
+
+$tabs-map: (
+		panel-gap: 10px,
+		panel-margin-bottom: 1.5rem,
+		link-border-radius: vg.$border-radius,
+		link-border-style: vg.$border-style,
+		link-border-width: vg.$border-width,
+		link-border-color: var(--vg-border-color, #{vg.$border-color}),
+		link-border-active-color: var(--vg-primary-color, #{vg.$color-active}),
+		link-border-focus-color: var(--vg-primary-color, #{vg.$color-active}),
+		link-border-disabled-color: var(--vg-border-disabled-color, #{vg.$border-color-disabled}),
+		link-color: var(--vg-text-color, #{vg.$color}),
+		link-active-color: var(--vg-primary-color, #{vg.$color-active}),
+		link-focus-color: var(--vg-primary-color, #{vg.$color-active}),
+		link-disabled-color: var(--vg-text-disabled-color, #{vg.$color-disabled}),
 		link-bg: transparent,
 		link-active-bg: transparent,
 		link-focus-bg: transparent,
 		link-disabled-bg: transparent,
 		link-padding-x: 16px,
 		link-padding-y: 8px,
-		link-transition: $transition-base,
-		slider-bg: $color-active,
-		slider-link-color: white,
-		slider-border-radius: $border-radius,
-		slider-transition: $transition-base,
+		link-transition: vg.$transition-base,
+		slider-bg: var(--vg-primary-color, #{vg.$color-active}),
+		slider-link-color: var(--vg-primary-contrast-color, #{vg.$color-inverse}),
+		slider-border-radius: vg.$border-radius,
+		slider-transition: vg.$transition-base,
 		track-slider-padding-x: 6px,
 		track-slider-padding-y: 6px,
 		track-slider-border-radius: 6px,
-		track-slider-bg: rgba(white, .1),
-);
+		track-slider-bg: var(--vg-border-disabled-color, rgba(255, 255, 255, .1)),
+) !default;

package/app/modules/vgtabs/scss/vgtabs.scss

@@ -6,13 +6,12 @@
 *--------------------------------------------------------------------------
 **/
 
-@import "../../../utils/scss/functions";
-@import "../../../utils/scss/mixin";
-@import "../../../utils/scss/variables";
-@import "variables";
+@forward "variables";
+@use "../../../utils/scss" as vg;
+@use "variables" as vars;
 
 .vg-tabs {
-	@include mix-vars('tabs', $tabs-map);
+	@include vg.mix-vars('tabs', vars.$tabs-map);
 
 	&-panel {
 		display: flex;
@@ -109,4 +108,4 @@
 	> .active {
 		display: block;
 	}
-}
+}