vgapp 1.4.2 → 1.4.4

package/app/modules/vgmodal/scss/_variables.scss

@@ -1,25 +1,27 @@
-$modal-sm: 300px !default;
+@use "../../../utils/scss" as vg;
+
+$modal-sm: 300px !default;
 $modal-md: 500px !default;
 $modal-lg: 800px !default;
 $modal-xl: 1140px !default;
 
 $modal-dialog-margin-y-sm-up: 1.75rem !default;
-$modal-content-box-shadow-sm-up: $box-shadow !default;
-
-$modal-map: (
-		z-index: $modal-index,
+$modal-content-box-shadow-sm-up: var(--vg-box-shadow, #{vg.$box-shadow}) !default;
+
+$modal-map: (
+		z-index: vg.$modal-index,
 		margin: .5rem,
 		padding: 1rem,
 		width: $modal-md,
-		color: $color,
-		background-color: $bg-color,
-		border-width: $border-width,
-		border-color: transparent,
-		border-style: $border-style,
-		border-radius: $border-radius,
-		box-shadow: $box-shadow,
-		transition: $transition-base,
+		color: var(--vg-text-color, #{vg.$color}),
+		background-color: var(--vg-surface-bg, #{vg.$surface-bg}),
+		border-width: vg.$border-width,
+		border-color: transparent,
+		border-style: vg.$border-style,
+		border-radius: vg.$border-radius,
+		box-shadow: var(--vg-box-shadow, #{vg.$box-shadow}),
+		transition: vg.$transition-base,
 		fade-transform:  translate(0, -50px),
 		show-transform:  none,
-		scale-transform: scale(1.02),
-);
+		scale-transform: scale(1.02),
+) !default;

package/app/modules/vgmodal/scss/vgmodal.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-modal {
-	@include mix-vars('modal', $modal-map);
+	@include vg.mix-vars('modal', vars.$modal-map);
 	position: fixed;
 	left: 0;
 	top: 0;
@@ -122,7 +121,7 @@
 	position: fixed;
 	right: 20px;
 	bottom: 20px;
-	z-index: calc(var(--vg-modal-z-index, #{$modal-index}) + 1);
+	z-index: calc(var(--vg-modal-z-index, #{vg.$modal-index}) + 1);
 	display: flex;
 	flex-direction: column;
 	align-items: flex-end;
@@ -160,8 +159,8 @@
 
 @media screen and (min-width: 576px){
 	.vg-modal {
-		--vg-modal-margin: #{$modal-dialog-margin-y-sm-up};
-		--vg-modal-box-shadow: #{$modal-content-box-shadow-sm-up};
+		--vg-modal-margin: #{vars.$modal-dialog-margin-y-sm-up};
+		--vg-modal-box-shadow: #{vars.$modal-content-box-shadow-sm-up};
 	}
 
 	.vg-modal-dialog {
@@ -171,18 +170,18 @@
 	}
 
 	.vg-modal-sm {
-		--vg-modal-width: #{$modal-sm};
+		--vg-modal-width: #{vars.$modal-sm};
 	}
 }
 
 @media screen and (min-width: 992px){
 	.vg-modal-lg, .vg-modal-xl {
-		--vg-modal-width: #{$modal-lg};
+		--vg-modal-width: #{vars.$modal-lg};
 	}
 }
 
 @media screen and (min-width: 1399px) {
 	.vg-modal-xl {
-		--vg-modal-width: #{$modal-xl};
+		--vg-modal-width: #{vars.$modal-xl};
 	}
 }

package/app/modules/vgnav/scss/_breakpoints.scss

@@ -1,4 +1,8 @@
-// Breakpoint viewport sizes and media queries.
+@use "sass:list";
+@use "sass:map";
+@use "variables" as vars;
+
+// Breakpoint viewport sizes and media queries.
 //
 // Breakpoints are defined as a map of (name: minimum width), order from small to large:
 //
@@ -14,21 +18,27 @@
 //    md
 //    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl xxl))
 //    md
-@function breakpoint-next($name, $breakpoints: $nav-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
-	$n: index($breakpoint-names, $name);
-	@if not $n {
-		@error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
-	}
-	@return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
+@function breakpoint-next($name, $breakpoints: vars.$grid-breakpoints, $breakpoint-names: map.keys($breakpoints)) {
+	$n: list.index($breakpoint-names, $name);
+	@if not $n {
+		@error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
+	}
+	@if $n < list.length($breakpoint-names) {
+		@return list.nth($breakpoint-names, $n + 1);
+	}
+	@return null;
 }
 
 // Minimum breakpoint width. Null for the smallest (first) breakpoint.
 //
 //    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
 //    576px
-@function breakpoint-min($name, $breakpoints: $nav-breakpoints) {
-	$min: map-get($breakpoints, $name);
-	@return if($min != 0, $min, null);
+@function breakpoint-min($name, $breakpoints: vars.$grid-breakpoints) {
+	$min: map.get($breakpoints, $name);
+	@if $min != 0 {
+		@return $min;
+	}
+	@return null;
 }
 
 // Maximum breakpoint width.
@@ -40,9 +50,12 @@
 //
 //    >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
 //    767.98px
-@function breakpoint-max($name, $breakpoints: $nav-breakpoints) {
-	$max: map-get($breakpoints, $name);
-	@return if($max and $max > 0, $max - .02, null);
+@function breakpoint-max($name, $breakpoints: vars.$grid-breakpoints) {
+	$max: map.get($breakpoints, $name);
+	@if $max and $max > 0 {
+		@return $max - .02;
+	}
+	@return null;
 }
 
 // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
@@ -52,13 +65,16 @@
 //    ""  (Returns a blank string)
 //    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
 //    "-sm"
-@function breakpoint-infix($name, $breakpoints: $nav-breakpoints) {
-	@return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
+@function breakpoint-infix($name, $breakpoints: vars.$grid-breakpoints) {
+	@if breakpoint-min($name, $breakpoints) == null {
+		@return "";
+	}
+	@return "-#{$name}";
 }
 
 // Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
 // Makes the @content apply to the given breakpoint and wider.
-@mixin media-breakpoint-up($name, $breakpoints: $nav-breakpoints) {
+@mixin media-breakpoint-up($name, $breakpoints: vars.$grid-breakpoints) {
 	$min: breakpoint-min($name, $breakpoints);
 	@if $min {
 		@media (min-width: $min) {
@@ -71,7 +87,7 @@
 
 // Media of at most the maximum breakpoint width. No query for the largest breakpoint.
 // Makes the @content apply to the given breakpoint and narrower.
-@mixin media-breakpoint-down($name, $breakpoints: $nav-breakpoints) {
+@mixin media-breakpoint-down($name, $breakpoints: vars.$grid-breakpoints) {
 	$max: breakpoint-max($name, $breakpoints);
 	@if $max {
 		@media (max-width: $max) {
@@ -84,7 +100,7 @@
 
 // Media that spans multiple breakpoint widths.
 // Makes the @content apply between the min and max breakpoints
-@mixin media-breakpoint-between($lower, $upper, $breakpoints: $nav-breakpoints) {
+@mixin media-breakpoint-between($lower, $upper, $breakpoints: vars.$grid-breakpoints) {
 	$min: breakpoint-min($lower, $breakpoints);
 	$max: breakpoint-max($upper, $breakpoints);
 
@@ -106,7 +122,7 @@
 // Media between the breakpoint's minimum and maximum widths.
 // No minimum for the smallest breakpoint, and no maximum for the largest one.
 // Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
-@mixin media-breakpoint-only($name, $breakpoints: $nav-breakpoints) {
+@mixin media-breakpoint-only($name, $breakpoints: vars.$grid-breakpoints) {
 	$min: breakpoint-min($name, $breakpoints);
 	$next: breakpoint-next($name, $breakpoints);
 	$max: breakpoint-max($next, $breakpoints);
@@ -124,4 +140,4 @@
 			@content;
 		}
 	}
-}
+}

package/app/modules/vgnav/scss/_hamburger.scss

@@ -1,4 +1,5 @@
-.vg-nav-hamburger {
+@mixin hamburger() {
+.vg-nav-hamburger {
 	display: none;
 	align-items: flex-start;
 
@@ -59,4 +60,6 @@
 			}
 		}
 	}
-}
+}
+
+}

package/app/modules/vgnav/scss/_placement.scss

@@ -1,4 +1,5 @@
-&.vg-nav-horizontal {
+@mixin placement() {
+&.vg-nav-horizontal {
 	.vg-nav-wrapper {
 		flex-direction: row;
 	}
@@ -22,4 +23,6 @@
 			}
 		}
 	}
-}
+}
+
+}

package/app/modules/vgnav/scss/_toggle.scss

@@ -1,4 +1,5 @@
-.toggle {
+@mixin toggle() {
+.toggle {
 	transition: var(--vg-nav-transition);
 	transform: rotate(0);
 
@@ -17,4 +18,6 @@
 			vertical-align: .255em;
 		}
 	}
-}
+}
+
+}

package/app/modules/vgnav/scss/_variables.scss

@@ -1,6 +1,9 @@
-$nav-map: (
-		transition: all .2s ease-in-out,
-);
+@use "sass:map";
+@use "../../../utils/scss" as vg;
+
+$nav-map: (
+		transition: all .2s ease-in-out,
+) !default;
 
 $nav-item-map: (
 		margin: 0,
@@ -8,39 +11,39 @@ $nav-item-map: (
 		font-size: 1rem,
 		font-weight: 400,
 		line-height: 1.4,
-		color: #212529,
+		color: var(--vg-text-color, #212529),
 		decoration: none,
 		display: inline-block,
 		border: none,
 		border-radius: 0,
 		white-space: nowrap,
-		position: relative,
-);
+		position: relative,
+) !default;
 
 $nav-drop-map: (
 		z-index: 10,
-		transition: map-get($nav-map, transition),
+		transition: map.get($nav-map, transition),
 		width: 200px,
 		max-height: 650px,
-		border-color: $border-color,
+		border-color: var(--vg-border-color, #{vg.$border-color}),
 		border-radius: 0,
 		padding: 0,
-		bg: $bg-color,
+		bg: var(--vg-surface-bg, #{vg.$surface-bg}),
 		overflow-y: auto,
-		overflow-x: visible,
-);
+		overflow-x: visible,
+) !default;
 
 $nav-drop-mega-map: (
 		width: 100%,
 		min-height: 300px,
-		bg: $bg-color,
-		border-color: $border-color,
+		bg: var(--vg-surface-bg, #{vg.$surface-bg}),
+		border-color: var(--vg-border-color, #{vg.$border-color}),
 		border-radius: 0,
 		padding: 1rem,
 		z-index: 10,
-		transition: map-get($nav-map, transition),
-		max-height: 600px,
-);
+		transition: map.get($nav-map, transition),
+		max-height: 600px,
+) !default;
 
 $nav-drop-item-map: (
 		padding: .75rem 1rem,
@@ -50,16 +53,16 @@ $nav-drop-item-map: (
 		bg-hover: transparent,
 		color: inherit,
 		color-hover: inherit,
-		transition: map-get($nav-map, transition),
-);
+		transition: map.get($nav-map, transition),
+) !default;
 
 $hamburger-map: (
 		height: 27px,
 		line-width: 35px,
-		line-color: #333333,
+		line-color: var(--vg-text-emphasis-color, #333333),
 		line-height: 3px,
-		line-indent-top: 7px
-);
+		line-indent-top: 7px
+) !default;
 
 $grid-breakpoints: (
 		xs: 576px,
@@ -68,5 +71,5 @@ $grid-breakpoints: (
 		lg: 1200px,
 		xl: 1400px,
 		xxl: 1600px,
-		xxxl: 1800px
-);
+		xxxl: 1800px
+) !default;

package/app/modules/vgnav/scss/vgnav.scss

@@ -6,19 +6,23 @@
 *--------------------------------------------------------------------------
 **/
 
-@import "../../../utils/scss/functions";
-@import "../../../utils/scss/mixin";
-@import "../../../utils/scss/variables";
-@import "variables";
-@import "breakpoints";
+@forward "variables";
+@forward "breakpoints";
+@use "sass:map";
+@use "../../../utils/scss" as vg;
+@use "breakpoints";
+@use "hamburger";
+@use "placement";
+@use "toggle";
+@use "variables" as vars;
 
 .vg-nav {
-	@include mix-vars('nav', $nav-map);
-	@include mix-vars('nav-item', $nav-item-map);
-	@include mix-vars('nav-drop', $nav-drop-map);
-	@include mix-vars('nav-drop-mega', $nav-drop-mega-map);
-	@include mix-vars('nav-drop-item', $nav-drop-item-map);
-	@include mix-vars('nav-hamburger', $hamburger-map);
+	@include vg.mix-vars('nav', vars.$nav-map);
+	@include vg.mix-vars('nav-item', vars.$nav-item-map);
+	@include vg.mix-vars('nav-drop', vars.$nav-drop-map);
+	@include vg.mix-vars('nav-drop-mega', vars.$nav-drop-mega-map);
+	@include vg.mix-vars('nav-drop-item', vars.$nav-drop-item-map);
+	@include vg.mix-vars('nav-hamburger', vars.$hamburger-map);
 
 	.vg-nav-wrapper {
 		display: flex;
@@ -48,7 +52,7 @@
 		li {
 			a {
 				/** set toggle **/
-				@import "toggle";
+				@include toggle.toggle();
 			}
 		}
 
@@ -147,14 +151,14 @@
 	}
 
 	/** set placement **/
-	@import "placement";
+	@include placement.placement();
 
 	/** set hamburger **/
-	@import "hamburger";
+	@include hamburger.hamburger();
 
 	&:not(.vg-nav-expand) {
-		@each $breakpoint in map-keys($grid-breakpoints) {
-			@include media-breakpoint-down($breakpoint, $grid-breakpoints) {
+		@each $breakpoint in map.keys(vars.$grid-breakpoints) {
+			@include breakpoints.media-breakpoint-down($breakpoint, vars.$grid-breakpoints) {
 				&.vg-nav-#{$breakpoint} {
 					.vg-nav-hamburger {
 						display: flex;

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;