vgapp 1.4.2 → 1.4.4

package/app/modules/vgdynamictable/scss/_skeleton.scss

@@ -1,3 +1,4 @@
+@mixin skeleton() {
 .skeleton-row td {
 	padding: var(--vg-dynamic-table-skeleton-padding);
 	background: var(--vg-dynamic-table-skeleton-row-bg);
@@ -53,8 +54,10 @@
 	}
 }
 
-@keyframes skeleton-glow {
+@keyframes skeleton-glow {
 	100% {
 		transform: translateX(120%);
 	}
-}
+}
+
+}

package/app/modules/vgdynamictable/scss/_sortable.scss

@@ -1,3 +1,4 @@
+@mixin sortable() {
 &.table-sortable {
 	&[data-sort-hide-unsorted-arrows="1"] {
 		th[data-sortable="1"]:not([data-sort-direction]) {
@@ -59,5 +60,7 @@
 			box-shadow: 0 1px 0 var(--vg-dynamic-table-cell-border-color);
 		}
 	}
-}
+}
+
+}
 

package/app/modules/vgdynamictable/scss/_table.scss

@@ -1,4 +1,5 @@
-&  table {
+@mixin table() {
+& table {
 	width: 100%;
 	border-collapse: separate;
 	border-spacing: 0;
@@ -154,4 +155,6 @@
 		border-bottom-right-radius: var(--vg-dynamic-table-wrap-border-radius);
 	}
 }
+
+}
 

package/app/modules/vgdynamictable/scss/_variables.scss

@@ -1,4 +1,7 @@
-$spacer: 1rem !default;
+@use "sass:map";
+@use "../../../utils/scss" as vg;
+
+$spacer: 1rem !default;
 $spacers: (
 		0: 0,
 		1: $spacer * .25,
@@ -8,12 +11,12 @@ $spacers: (
 		5: $spacer * 3,
 ) !default;
 
-$sizes-0: map-get($spacers, 0);
-$sizes-1: map-get($spacers, 1);
-$sizes-2: map-get($spacers, 2);
-$sizes-3: map-get($spacers, 3);
-$sizes-4: map-get($spacers, 4);
-$sizes-5: map-get($spacers, 5);
+$sizes-0: map.get($spacers, 0);
+$sizes-1: map.get($spacers, 1);
+$sizes-2: map.get($spacers, 2);
+$sizes-3: map.get($spacers, 3);
+$sizes-4: map.get($spacers, 4);
+$sizes-5: map.get($spacers, 5);
 
 $dynamic-table-map: (
 	wrap: (
@@ -28,22 +31,22 @@ $dynamic-table-map: (
 		font-size: $sizes-3,
 		row-content-height: 20px,
 		border-color: transparent,
-		text-color: #1f1f1f,
+		text-color: var(--vg-text-color, #1f1f1f),
 	),
 	header: (
 		font-weight: 600,
-		background: #f7f4ef,
-		text-color: #1f1f1f,
+		background: var(--vg-surface-muted-bg, #f7f4ef),
+		text-color: var(--vg-text-color, #1f1f1f),
 	),
 	bordered: (
 		border-width: 1px,
-		border-color: rgba(0, 0, 0, 0.1),
+		border-color: var(--vg-border-disabled-color, rgba(0, 0, 0, .1)),
 	),
 	striped: (
-		background: rgba(0, 0, 0, 0.03),
+		background: var(--vg-surface-subtle-bg, rgba(0, 0, 0, .03)),
 	),
 	hover: (
-		background: rgba(0, 0, 0, 0.05),
+		background: var(--vg-surface-subtle-hover-bg, rgba(0, 0, 0, .05)),
 	),
 	table: (
 		min-width: 640px,
@@ -82,21 +85,21 @@ $dynamic-table-map: (
 		jump-width: 64px,
 		jump-gap: 6px,
 		jump-button-min-width: 54px,
-		border-color: rgba(0, 0, 0, 0.08),
-		toolbar-bg: #faf8f4,
-		label-color: #5f5a52,
-		button-border: 1px solid rgba(0, 0, 0, 0.12),
-		button-border-color: rgba(0, 0, 0, 0.12),
-		button-bg: #ffffff,
-		button-text: #2e2a24,
-		button-hover-bg: #f1ece4,
-		button-hover-border: rgba(0, 0, 0, 0.2),
-		button-active-bg: #24201b,
-		button-active-text: #ffffff,
-		button-active-border: #24201b,
-		per-page-bg: #ffffff,
-		per-page-border-color: rgba(0, 0, 0, 0.12),
-		per-page-text: #2e2a24,
+		border-color: var(--vg-border-disabled-color, rgba(0, 0, 0, .08)),
+		toolbar-bg: var(--vg-surface-muted-bg, #faf8f4),
+		label-color: var(--vg-text-muted-color, #5f5a52),
+		button-border: vg.$border-width vg.$border-style var(--vg-border-disabled-color, rgba(0, 0, 0, .12)),
+		button-border-color: var(--vg-border-disabled-color, rgba(0, 0, 0, .12)),
+		button-bg: var(--vg-control-bg, #ffffff),
+		button-text: var(--vg-text-color, #2e2a24),
+		button-hover-bg: var(--vg-surface-hover-bg, #f1ece4),
+		button-hover-border: var(--vg-border-color, rgba(0, 0, 0, .2)),
+		button-active-bg: var(--vg-primary-color, #24201b),
+		button-active-text: var(--vg-primary-contrast-color, #ffffff),
+		button-active-border: var(--vg-primary-color, #24201b),
+		per-page-bg: var(--vg-control-bg, #ffffff),
+		per-page-border-color: var(--vg-border-disabled-color, rgba(0, 0, 0, .12)),
+		per-page-text: var(--vg-text-color, #2e2a24),
 	),
 	sortable: (
 		header-padding-right: 1.8rem,
@@ -109,22 +112,27 @@ $dynamic-table-map: (
 		arrow-opacity: 0.35,
 		arrow-active-opacity: 1,
 		arrow-color: currentColor,
-		column-highlight-background: rgba(191, 153, 92, 0.14),
+		column-highlight-background: var(--vg-primary-subtle-bg, rgba(191, 153, 92, .14)),
 	),
 	fixed: (
 		shadow-width: 14px,
-		shadow-color: rgba(0, 0, 0, 0.16),
-		cell-background: rgba(247, 244, 239, 0.92),
+		shadow-color: var(--vg-shadow-soft-color, rgba(0, 0, 0, .16)),
+		cell-background: var(--vg-surface-bg, rgba(247, 244, 239, .92)),
 	),
 	skeleton: (
 		padding: 12px 14px,
 		line-height: 10px,
 		radius: 999px,
 		duration: 1.2s,
-		row-bg: rgba(255, 255, 255, 0.5),
-		border-color: rgba(0, 0, 0, 0.04),
-		glow: rgba(255, 255, 255, 0.55),
-		gradient-1: #ebe6df,
-		gradient-2: #f5f1ea,
-	),
-);
+		row-bg: rgb(var(--vg-surface-bg-rgb, 255 255 255) / .5),
+		border-color: var(--vg-border-disabled-color, rgba(0, 0, 0, .04)),
+		glow: rgb(var(--vg-surface-bg-rgb, 255 255 255) / .55),
+		gradient-1: var(--vg-control-border-color, #ebe6df),
+		gradient-2: var(--vg-surface-muted-bg, #f5f1ea),
+	),
+	actions: (
+		drag-indicator: var(--vg-primary-color, #3f8cff),
+		danger-color: var(--vg-danger-color, #a22929),
+		danger-contrast: var(--vg-danger-contrast-color, #ffffff),
+	),
+) !default;

package/app/modules/vgdynamictable/scss/vgdynamictable.scss

@@ -6,13 +6,17 @@
 *--------------------------------------------------------------------------
 **/
 
-@import "../../../utils/scss/functions";
-@import "../../../utils/scss/mixin";
-@import "../../../utils/scss/variables";
-@import "variables";
+@forward "variables";
+@use "../../../utils/scss" as vg;
+@use "actions";
+@use "pagination";
+@use "skeleton";
+@use "sortable";
+@use "table" as table-styles;
+@use "variables" as vars;
 
 .vg-dynamic-table {
-	@include mix-vars('dynamic-table', $dynamic-table-map);
+	@include vg.mix-vars('dynamic-table', vars.$dynamic-table-map);
 	background: var(--vg-dynamic-table-wrap-background);
 	border-radius: var(--vg-dynamic-table-wrap-border-radius);
 	box-shadow: var(--vg-dynamic-table-wrap-box-shadow);
@@ -56,11 +60,11 @@
 		}
 	}
 
-	@import "pagination";
-	@import "sortable";
-	@import "table";
-	@import "skeleton";
-	@import "actions";
+	@include pagination.pagination();
+	@include sortable.sortable();
+	@include table-styles.table();
+	@include skeleton.skeleton();
+	@include actions.actions();
 
 	&.table-striped {
 		tbody {

package/app/modules/vgfilepreview/scss/_variables.scss

@@ -1,12 +1,14 @@
+@use "../../../utils/scss" as vg;
+
 $filepreview-map: (
 		panel: (
-				bg: #111,
-				color: #fff,
-				border: 1px solid rgba(255, 255, 255, .12),
+				bg: var(--vg-media-bg, #111111),
+				color: var(--vg-media-text-color, #ffffff),
+				border: vg.$border-width vg.$border-style var(--vg-media-border-color, rgba(255, 255, 255, .12)),
 		),
 		modal: (
-				content-bg: #111,
-				content-color: #fff,
+				content-bg: var(--vg-media-bg, #111111),
+				content-color: var(--vg-media-text-color, #ffffff),
 				close-top: 10px,
 				close-right: 10px,
 				body-padding: 1rem 0 0,
@@ -20,11 +22,11 @@ $filepreview-map: (
 				toggle-size: 24px,
 				icon-size: 18px,
 				toggle-radius: 999px,
-				toggle-bg: rgba(255, 255, 255, .12),
-				toggle-color: #fff,
+				toggle-bg: var(--vg-media-border-color, rgba(255, 255, 255, .12)),
+				toggle-color: var(--vg-media-text-color, #ffffff),
 				name-line-height: 1.2,
-				progress-track: rgba(255, 255, 255, .06),
-				progress-fill: rgba(255, 255, 255, .16),
+				progress-track: var(--vg-media-subtle-bg, rgba(255, 255, 255, .06)),
+				progress-fill: var(--vg-media-active-bg, rgba(255, 255, 255, .16)),
 				progress-radius: 6px,
 				progress-padding-x: 4px,
 		),
@@ -33,7 +35,7 @@ $filepreview-map: (
 				padding: 8px 12px,
 				font-size: 13px,
 				font-weight: 600,
-				color: #fff,
+				color: var(--vg-media-text-color, #ffffff),
 				image-bg: #0f766e,
 				text-bg: #334155,
 				video-bg: #7c3aed,
@@ -52,7 +54,7 @@ $filepreview-map: (
 		text: (
 				content-padding: 12px,
 				content-max-height: calc(84vh - 90px),
-				content-bg: rgba(255, 255, 255, .06),
+				content-bg: var(--vg-media-subtle-bg, rgba(255, 255, 255, .06)),
 				content-radius: 8px,
 				content-font-size: 13px,
 				content-line-height: 1.45,
@@ -61,8 +63,8 @@ $filepreview-map: (
 				markdown-list-margin: 0 0 10px 20px,
 				markdown-code-padding: 10px,
 				markdown-code-radius: 6px,
-				markdown-code-bg: rgba(255, 255, 255, .08),
-				markdown-link-color: #93c5fd,
+				markdown-code-bg: var(--vg-media-muted-bg, rgba(255, 255, 255, .08)),
+				markdown-link-color: var(--vg-media-link-color, #93c5fd),
 		),
 		video: (
 				player-width: min(92vw, 1240px),
@@ -77,7 +79,7 @@ $filepreview-map: (
 				btn-padding: 6px 10px,
 				btn-font-size: 12px,
 				btn-font-weight: 600,
-				btn-bg: rgba(255, 255, 255, .12),
+				btn-bg: var(--vg-media-border-color, rgba(255, 255, 255, .12)),
 				meta-font-size: 12px,
 				meta-opacity: .75,
 				frame-width: min(96vw, 1280px),
@@ -98,16 +100,16 @@ $filepreview-map: (
 				btn-padding: 6px 10px,
 				btn-font-size: 12px,
 				btn-font-weight: 600,
-				btn-bg: rgba(255, 255, 255, .12),
+				btn-bg: var(--vg-media-border-color, rgba(255, 255, 255, .12)),
 		),
 		zip: (
 				content-max-height: calc(84vh - 90px),
-				content-bg: rgba(255, 255, 255, .06),
+				content-bg: var(--vg-media-subtle-bg, rgba(255, 255, 255, .06)),
 				content-radius: 8px,
 				content-padding: 10px,
 				table-font-size: 12px,
 				table-cell-padding: 6px 8px,
-				table-border: 1px solid rgba(255, 255, 255, .12),
+				table-border: vg.$border-width vg.$border-style var(--vg-media-border-color, rgba(255, 255, 255, .12)),
 				status-font-size: 13px,
 		),
-);
+) !default;

package/app/modules/vgfilepreview/scss/vgfilepreview.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-filepreview-vars {
-	@include mix-vars('filepreview', $filepreview-map);
+	@include vg.mix-vars('filepreview', vars.$filepreview-map);
 }
 
 @mixin filepreview-trigger($bg) {

package/app/modules/vgfiles/scss/_mixins.scss

@@ -35,8 +35,8 @@
 		}
 	}
 
-	&.loading {
-		--vg-button-color: var(--vg-body-color);
+	&.loading {
+		--vg-button-color: var(--vg-text-color, var(--vg-body-color));
 
 		> *:not(.file-remove) {
 			opacity: .52;
@@ -55,12 +55,12 @@
 		}
 	}
 
-	&.completed {
-		--vg-button-color: var(--vg-success);
-	}
-
-	&.failing {
-		--vg-button-color: var(--vg-danger);
+	&.completed {
+		--vg-button-color: var(--vg-success-color, var(--vg-success));
+	}
+
+	&.failing {
+		--vg-button-color: var(--vg-danger-color, var(--vg-danger));
 
 		> * {
 			opacity: .62;
@@ -70,4 +70,4 @@
 			opacity: 1;
 		}
 	}
-}
+}

package/app/modules/vgfiles/scss/_variables.scss

@@ -1,8 +1,10 @@
-$files-map: (
-	// label (уже используется в vgfiles.scss)
-	label-bg: #242424,
-	label-color: #ffffff,
-	label-border-color: #343434,
+@use "../../../utils/scss" as vg;
+
+$files-map: (
+	// label (уже используется в vgfiles.scss)
+	label-bg: var(--vg-surface-inverse-bg, #242424),
+	label-color: var(--vg-text-inverse-color, #ffffff),
+	label-border-color: var(--vg-border-strong-color, #343434),
 	label-border-radius: 4px,
 	label-padding: 8px 24px,
 	label-padding-icon: 8px 16px,
@@ -12,21 +14,21 @@ $files-map: (
 	errors-font-size: 16px,
 
 	// drop zone
-	drop-bg: var(--vg-secondary-bg),
+	drop-bg: var(--vg-secondary-bg, #{vg.$surface-muted-bg}),
 	drop-border-width: 2px,
 	drop-border-style: dashed,
-	drop-border-color: var(--vg-secondary),
+	drop-border-color: var(--vg-secondary-color, var(--vg-secondary, #{vg.$color-muted})),
 	drop-radius: 8px,
 	drop-height: 250px,
 	drop-transition: all 0.2s ease,
 
 	drop-after-font-size: 14px,
-	drop-after-color: #007bff,
+	drop-after-color: var(--vg-primary-color, #007bff),
 	drop-after-bottom: 10px,
 
-	drop-hover-border-color: #007bff,
-	drop-hover-bg: #e3f2fd,
-	drop-hover-shadow: 0 0 10px rgba(0, 123, 255, 0.2),
+	drop-hover-border-color: var(--vg-primary-color, #007bff),
+	drop-hover-bg: var(--vg-primary-subtle-bg, #e3f2fd),
+	drop-hover-shadow: 0 0 10px var(--vg-primary-outline-color, rgba(0, 123, 255, .2)),
 
 	drop-stripes-alpha: 0.03,
 	drop-stripes-size: 30px 30px,
@@ -36,9 +38,9 @@ $files-map: (
 	drop-message-gap: 8px,
 	drop-message-font-size: 14px,
 	drop-message-line-height: 22px,
-	drop-message-color: #999999,
+	drop-message-color: var(--vg-text-muted-color, #999999),
 	drop-message-icon-size: 48px,
-	drop-message-icon-color: #999999,
+	drop-message-icon-color: var(--vg-text-muted-color, #999999),
 	drop-message-padding: 1rem,
 	drop-message-margin: 0 0 1rem,
 
@@ -52,13 +54,13 @@ $files-map: (
 	drop-remove-offset: 10px,
 	drop-remove-size: 36px,
 	drop-remove-radius: 3px,
-	drop-remove-hover-bg: rgba(var(--vg-body-bg-rgb), .4),
+	drop-remove-hover-bg: rgb(var(--vg-body-bg-rgb, 255 255 255) / .4),
 
 	// stat
 	stat-padding: 12px 8px,
 	stat-gap: 1rem,
 	stat-mb: 1rem,
-	stat-border-color: var(--vg-secondary-bg),
+	stat-border-color: var(--vg-secondary-bg, #{vg.$surface-muted-bg}),
 	stat-title-fw: 600,
 	stat-count-font-size: 14px,
 	stat-count-ms: 6px,
@@ -66,16 +68,16 @@ $files-map: (
 
 	// info
 	info-mt: 1rem,
-	info-border-color: var(--vg-secondary-bg),
+	info-border-color: var(--vg-secondary-bg, #{vg.$surface-muted-bg}),
 	info-radius: 4px,
 	info-list-max-height: 360px,
 
 	info-gap: 8px,
 	info-padding: 8px,
-	info-border-bottom-color: var(--vg-secondary-bg),
-	info-hover-bg: rgba(var(--vg-secondary-bg-rgb), .4),
-	info-audio-progress-track: rgba(var(--vg-secondary-bg-rgb), .3),
-	info-audio-progress-fill: #000,
+	info-border-bottom-color: var(--vg-secondary-bg, #{vg.$surface-muted-bg}),
+	info-hover-bg: rgb(var(--vg-secondary-bg-rgb, 245 245 245) / .4),
+	info-audio-progress-track: rgb(var(--vg-secondary-bg-rgb, 245 245 245) / .3),
+	info-audio-progress-fill: var(--vg-text-color, #{vg.$color}),
 	info-audio-progress-opacity: .33,
 	info-audio-row-min-height: 64px,
 	info-audio-image-size: 48px,
@@ -94,22 +96,22 @@ $files-map: (
 
 	// legacy (оставлено для совместимости со старым API темы)
 	info-mb: 10px,
-	info-title-color: darkgreen,
+	info-title-color: var(--vg-success-text-color, darkgreen),
 	info-count-fw: 400,
 	info-count-fs: 14px,
-	info-count-color: #999999,
+	info-count-color: var(--vg-text-muted-color, #999999),
 	info-dismiss-fs: 14px,
 	info-dismiss-ms: 10px,
 	info-image-width: 100px,
 	info-image-me: 15px,
 	info-image-mb: 15px,
 	info-image-padding: 5px,
-	info-image-border: 1px solid #e0e0e0,
+	info-image-border: vg.$border-width vg.$border-style var(--vg-control-border-color, #e0e0e0),
 	info-list-fs: 15px,
 	info-list-mt: 7px,
 	info-list-span-fs: 12px,
-	info-list-span-color: #999999,
+	info-list-span-color: var(--vg-text-muted-color, #999999),
 	info-list-span-me: 6px,
 	info-list-button-fs: 12px,
-	info-list-button-color: #999999,
-);
+	info-list-button-color: var(--vg-text-muted-color, #999999),
+) !default;

package/app/modules/vgfiles/scss/vgfiles.scss

@@ -6,15 +6,14 @@
 *--------------------------------------------------------------------------
 **/
 
-@import "../../../utils/scss/functions";
-@import "../../../utils/scss/mixin";
-@import "../../../utils/scss/variables";
-@import "./_animations";
-@import "./_mixins";
-@import "variables";
+@forward "variables";
+@use "../../../utils/scss" as vg;
+@use "animations";
+@use "mixins" as files;
+@use "variables" as vars;
 
 .vg-files {
-	@include mix-vars('files', $files-map);
+	@include vg.mix-vars('files', vars.$files-map);
 	position: relative;
 
 	a {
@@ -271,8 +270,8 @@
 				transition: all .2s ease-in-out;
 				position: relative;
 
-				@include vgfiles-sortable();
-				@include vgfiles-state();
+				@include files.vgfiles-sortable();
+				@include files.vgfiles-state();
 
 				&:last-child {
 					border-bottom: none;
@@ -559,11 +558,11 @@
 			animation: stripes var(--vg-files-drop-stripes-duration) linear infinite;
 			background-image: linear-gradient(
 							-45deg,
-							rgba(var(--vg-secondary-rgb), var(--vg-files-drop-stripes-alpha)) 25%,
+							rgb(var(--vg-secondary-rgb, 107 114 128) / var(--vg-files-drop-stripes-alpha)) 25%,
 							transparent 0,
 							transparent 50%,
-							rgba(var(--vg-secondary-rgb), var(--vg-files-drop-stripes-alpha)) 0,
-							rgba(var(--vg-secondary-rgb), var(--vg-files-drop-stripes-alpha)) 75%,
+							rgb(var(--vg-secondary-rgb, 107 114 128) / var(--vg-files-drop-stripes-alpha)) 0,
+							rgb(var(--vg-secondary-rgb, 107 114 128) / var(--vg-files-drop-stripes-alpha)) 75%,
 							transparent 0,
 							transparent
 			);
@@ -645,8 +644,8 @@
 				flex: 0 0 var(--vg-files-drop-file-flex);
 				height: var(--vg-files-drop-file-height);
 
-				@include vgfiles-sortable();
-				@include vgfiles-state();
+				@include files.vgfiles-sortable();
+				@include files.vgfiles-state();
 
 				.file-image {
 					width: 100%;

package/app/modules/vgformsender/scss/_variables.scss

@@ -1,3 +1,5 @@
-$form-sender-map: (
-		'eye-color': $color
-);
+@use "../../../utils/scss" as vg;
+
+$form-sender-map: (
+		'eye-color': var(--vg-text-color, #{vg.$color})
+) !default;

package/app/modules/vgformsender/scss/vgformsender.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-form-sender {
-	@include mix-vars('form-sender', $form-sender-map);
+	@include vg.mix-vars('form-sender', vars.$form-sender-map);
 
 	&-modal {
 		.vg-modal-content {
@@ -43,7 +42,7 @@
 		width: 22px;
 		height: 22px;
 		cursor: pointer;
-		transition: $transition-base;
+		transition: vg.$transition-base;
 
 		svg {
 			path {
@@ -72,15 +71,15 @@
 }
 
 .vg-form-sender-alert {
-	@include mix-alert-color-mode($class: vg-form-sender-alert);
+	@include vg.mix-alert-color-mode($class: vg-form-sender-alert);
 	background-color: var(--vg-form-sender-alert-background-color);
 	border: 1px solid var(--vg-form-sender-alert-border-color) ;
-	border-radius: var(--vg-border-radius);
+	border-radius: var(--vg-border-radius, #{vg.$border-radius});
 
 	.vg-btn-close {
 		svg {
 			path {
-				fill: var(--vg-form-sender-alert-close)
+				fill: var(--vg-form-sender-alert-close);
 			}
 		}
 	}

package/app/modules/vglawcookie/scss/_variables.scss

@@ -1,14 +1,16 @@
-$lawcookie-map: (
-		background-color:          $bg-color,
-		color:                     $color,
-		box-shadow:                $box-shadow,
-		padding:                   1rem,
-		border:                    1px solid #{$border-color},
-		border-radius:             $border-radius,
-		z-index:                   $lawcookie-index,
-		transition:                $transition-base,
+@use "../../../utils/scss" as vg;
+
+$lawcookie-map: (
+		background-color:          var(--vg-surface-bg, #{vg.$surface-bg}),
+		color:                     var(--vg-text-color, #{vg.$color}),
+		box-shadow:                var(--vg-box-shadow, #{vg.$box-shadow}),
+		padding:                   1rem,
+		border:                    vg.$border-width vg.$border-style var(--vg-border-color, #{vg.$border-color}),
+		border-radius:             vg.$border-radius,
+		z-index:                   vg.$lawcookie-index,
+		transition:                vg.$transition-base,
 		max-width:                 50%,
 		padding-outer:             1rem,
 		font-size:                 14px,
-		title-font-size:           16px
-);
+		title-font-size:           16px
+) !default;

package/app/modules/vglawcookie/scss/vglawcookie.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-lawcookie {
-	@include mix-vars('lawcookie', $lawcookie-map);
+	@include vg.mix-vars('lawcookie', vars.$lawcookie-map);
 	position: fixed;
 	display: none;
 	padding: var(--vg-lawcookie-padding-outer);
@@ -88,4 +87,4 @@
 			font-size: var(--vg-lawcookie-title-font-size);
 		}
 	}
-}
+}