vgapp 1.4.2 → 1.4.4

package/app/utils/scss/_tokens.scss

@@ -0,0 +1,170 @@
+@use "sass:map";
+
+// Semantic color tokens. Components should consume the generated --vg-* custom
+// properties instead of binding themselves to a concrete palette.
+$theme-light: (
+	body-bg: #ffffff,
+	body-bg-rgb: 255 255 255,
+	surface-bg: #ffffff,
+	surface-bg-rgb: 255 255 255,
+	surface-transparent: rgba(255, 255, 255, 0),
+	surface-raised-bg: #ffffff,
+	surface-muted-bg: #f5f5f5,
+	surface-hover-bg: #f7f7f7,
+	surface-active-bg: #c7dcf6,
+	surface-inverse-bg: rgba(30, 30, 30, .95),
+	surface-subtle-bg: rgba(0, 0, 0, .025),
+	surface-subtle-hover-bg: rgba(0, 0, 0, .07),
+	text-color: #000000,
+	text-emphasis-color: #3c3c3c,
+	text-muted-color: #6b7280,
+	text-disabled-color: rgba(0, 0, 0, .5),
+	text-placeholder-color: rgba(0, 0, 0, .32),
+	text-inverse-color: #ffffff,
+	border-color: rgba(0, 0, 0, .2),
+	border-strong-color: rgba(0, 0, 0, .32),
+	border-disabled-color: rgba(0, 0, 0, .1),
+	primary-color: #0065ff,
+	primary-hover-color: #0057db,
+	primary-active-color: #0047b3,
+	primary-contrast-color: #ffffff,
+	primary-subtle-bg: rgba(0, 101, 255, .06),
+	primary-muted-bg: rgba(0, 101, 255, .1),
+	primary-outline-color: rgba(0, 101, 255, .55),
+	primary-strong-border-color: rgba(0, 101, 255, .72),
+	secondary-color: #6b7280,
+	secondary-rgb: 107 114 128,
+	secondary-bg: #f5f5f5,
+	secondary-bg-rgb: 245 245 245,
+	shadow-color: rgba(0, 0, 0, .2),
+	shadow-soft-color: rgba(0, 0, 0, .18),
+	box-shadow: 0 8px 14px 5px rgba(0, 0, 0, .2),
+	backdrop-color: #000000,
+	backdrop-subtle-color: rgba(0, 0, 0, .25),
+	control-bg: #ffffff,
+	control-muted-bg: #f1f4f8,
+	control-border-color: #dddddd,
+	control-strong-color: #111827,
+	control-mark-color: #cbd5e1,
+	media-bg: #111111,
+	media-text-color: #ffffff,
+	media-border-color: rgba(255, 255, 255, .12),
+	media-subtle-bg: rgba(255, 255, 255, .06),
+	media-muted-bg: rgba(255, 255, 255, .08),
+	media-active-bg: rgba(255, 255, 255, .16),
+	media-link-color: #93c5fd,
+	success-color: #4fd90b,
+	success-text-color: #40be02,
+	success-border-color: #baf98a,
+	success-bg: #f6ffed,
+	success-close-color: rgb(12.8, 38, .4),
+	success-contrast-color: #ffffff,
+	warning-color: #ffc107,
+	warning-text-color: #ffc107,
+	warning-border-color: #ffde79,
+	warning-bg: #fff6da,
+	warning-close-color: rgb(51, 38.6, 1.4),
+	warning-contrast-color: #111827,
+	danger-color: #ff2a2c,
+	danger-text-color: #df0306,
+	danger-border-color: #ffccc7,
+	danger-bg: #fff2f0,
+	danger-close-color: rgb(44.6, .6, 1.2),
+	danger-contrast-color: #ffffff,
+	danger-subtle-bg: rgba(255, 42, 44, .06),
+	danger-outline-color: rgba(255, 42, 44, .5),
+	info-color: #1f8bff,
+	info-text-color: #0471e5,
+	info-border-color: #f0faff,
+	info-bg: #adddff,
+	info-close-color: rgb(.8, 22.6, 45.8),
+	info-contrast-color: #ffffff,
+) !default;
+
+$theme-dark: (
+	body-bg: #121212,
+	body-bg-rgb: 18 18 18,
+	surface-bg: #1f1f1f,
+	surface-bg-rgb: 31 31 31,
+	surface-transparent: rgba(31, 31, 31, 0),
+	surface-raised-bg: #292929,
+	surface-muted-bg: #272727,
+	surface-hover-bg: #333333,
+	surface-active-bg: #173f73,
+	surface-inverse-bg: rgba(245, 245, 245, .95),
+	surface-subtle-bg: rgba(255, 255, 255, .04),
+	surface-subtle-hover-bg: rgba(255, 255, 255, .1),
+	text-color: #f5f5f5,
+	text-emphasis-color: #ffffff,
+	text-muted-color: #a7a7a7,
+	text-disabled-color: rgba(255, 255, 255, .5),
+	text-placeholder-color: rgba(255, 255, 255, .45),
+	text-inverse-color: #111827,
+	border-color: rgba(255, 255, 255, .2),
+	border-strong-color: rgba(255, 255, 255, .32),
+	border-disabled-color: rgba(255, 255, 255, .12),
+	primary-color: #6ea8fe,
+	primary-hover-color: #8abbff,
+	primary-active-color: #9ec5fe,
+	primary-contrast-color: #08111f,
+	primary-subtle-bg: rgba(110, 168, 254, .08),
+	primary-muted-bg: rgba(110, 168, 254, .14),
+	primary-outline-color: rgba(110, 168, 254, .62),
+	primary-strong-border-color: rgba(110, 168, 254, .78),
+	secondary-color: #a7a7a7,
+	secondary-rgb: 167 167 167,
+	secondary-bg: #272727,
+	secondary-bg-rgb: 39 39 39,
+	shadow-color: rgba(0, 0, 0, .45),
+	shadow-soft-color: rgba(0, 0, 0, .35),
+	box-shadow: 0 8px 14px 5px rgba(0, 0, 0, .45),
+	backdrop-color: #000000,
+	backdrop-subtle-color: rgba(0, 0, 0, .55),
+	control-bg: #292929,
+	control-muted-bg: #333a45,
+	control-border-color: rgba(255, 255, 255, .22),
+	control-strong-color: #f5f5f5,
+	control-mark-color: #64748b,
+	media-bg: #111111,
+	media-text-color: #ffffff,
+	media-border-color: rgba(255, 255, 255, .12),
+	media-subtle-bg: rgba(255, 255, 255, .06),
+	media-muted-bg: rgba(255, 255, 255, .08),
+	media-active-bg: rgba(255, 255, 255, .16),
+	media-link-color: #93c5fd,
+	success-color: #75d944,
+	success-text-color: #8ee85f,
+	success-border-color: #3f6f2c,
+	success-bg: #182d12,
+	success-close-color: #8ee85f,
+	success-contrast-color: #111827,
+	warning-color: #ffd24d,
+	warning-text-color: #ffda66,
+	warning-border-color: #806b29,
+	warning-bg: #30280e,
+	warning-close-color: #ffda66,
+	warning-contrast-color: #111827,
+	danger-color: #ff6b6d,
+	danger-text-color: #ff8587,
+	danger-border-color: #7d3638,
+	danger-bg: #321719,
+	danger-close-color: #ff8587,
+	danger-contrast-color: #111827,
+	danger-subtle-bg: rgba(255, 107, 109, .1),
+	danger-outline-color: rgba(255, 107, 109, .62),
+	info-color: #6eb6ff,
+	info-text-color: #8fc7ff,
+	info-border-color: #315d86,
+	info-bg: #12283c,
+	info-close-color: #8fc7ff,
+	info-contrast-color: #111827,
+) !default;
+
+$themes: (
+	light: $theme-light,
+	dark: $theme-dark,
+) !default;
+
+@function theme-token($theme, $token) {
+	@return map.get($theme, $token);
+}

package/app/utils/scss/default.scss

@@ -1,78 +1,11 @@
-@import "../../utils/scss/functions";
-@import "../../utils/scss/variables";
-@import "../../utils/scss/mixin";
-@import "../../utils/scss/animation";
-@import "../../utils/scss/placement";
-
-.vg-backdrop {
-	@include mix-vars('backdrop', $backdrop-map);
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100vw;
-	height: 100vh;
-	background: var(--vg-backdrop-bg);
-	transition: var(--vg-backdrop-transition);
-	opacity: 0;
-	z-index: var(--vg-backdrop-z-index);
-
-	&.fade.show {
-		opacity: var(--vg-backdrop-opacity);
-	}
-}
-
-.vg-btn-close {
-	position: absolute;
-	width: 30px;
-	height: 30px;
-	right: 15px;
-	top: 15px;
-	border: none;
-	background: transparent;
-	border-radius: 50%;
-	padding: 0;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-
-	svg {
-		width: 20px;
-		height: 20px;
-		fill: $color;
-	}
-}
-
-.vg-collapse {
-	&:not(.show) {
-		display: none;
-	}
-}
-
-.vg-collapsing {
-	height: 0;
-	overflow: hidden;
-	transition: $transition-base;
-}
-
-/**
-* Loader
- */
-.vg-loader, .vg.loader:after {
-	border-radius: 50%;
-	width: 7em;
-	height: 7em;
-}
-
-.vg-loader {
-	@include mix-vars('loader', $loader-map);
-	margin: var(--vg-loader-margin);
-	font-size: var(--vg-loader-font-size);
-	position: relative;
-	text-indent: -9999em;
-	border-top: var(--vg-loader-border-width) var(--vg-loader-border-style) var(--vg-loader-border-color);
-	border-right: var(--vg-loader-border-width) var(--vg-loader-border-style) var(--vg-loader-border-color);
-	border-bottom: var(--vg-loader-border-width) var(--vg-loader-border-style) var(--vg-loader-border-color);
-	border-left: var(--vg-loader-border-width) var(--vg-loader-border-style) var(--vg-loader-color);
-	transform: var(--vg-loader-transform);
-	animation: var(--vg-loader-animation);
-}
+@forward "index";
+
+@forward "index";
+
+@use "animation";
+@use "placement";
+@use "theme-default";
+@use "backdrop";
+@use "closable";
+@use "collapsable";
+@use "loaders";

package/app/utils/scss/functions.scss

@@ -1,44 +1,26 @@
-@function is-map($var){
-	@return type-of($var) == 'map';
-}
+@use "sass:color";
+@use "sass:map";
+@use "sass:meta";
+
+@function is-map($var){
+	@return meta.type-of($var) == 'map';
+}
 
 // Merge multiple maps
 @function map-merge-multiple($maps...) {
-	$merged-maps: ();
-
-	@each $map in $maps {
-		$merged-maps: map-merge($merged-maps, $map);
-	}
-	@return $merged-maps;
-}
+	$merged-maps: ();
+
+	@each $map in $maps {
+		$merged-maps: map.merge($merged-maps, $map);
+	}
+	@return $merged-maps;
+}
 
 // mix colors
-@function shade-color($color, $weight) {
-	@return mix(black, $color, $weight);
-}
-
-@function tint-color($color, $weight) {
-	@return mix(white, $color, $weight);
-}
-
-@function get-alert-color($type) {
-	@if $type == success {
-		@return $success-map;
-	}
-
-	@if $type == danger {
-		@return $danger-map;
-	}
-
-	@if $type == warning {
-		@return $warning-map;
-	}
-
-	@if $type == info {
-		@return $info-map;
-	}
-
-	@if $type == dark {
-		@return $dark-map;
-	}
-}
+@function shade-color($color, $weight) {
+	@return color.mix(black, $color, $weight);
+}
+
+@function tint-color($color, $weight) {
+	@return color.mix(white, $color, $weight);
+}

package/app/utils/scss/index.scss

@@ -0,0 +1,4 @@
+@forward "theme";
+@forward "functions";
+@forward "variables";
+@forward "mixin";

package/app/utils/scss/mixin.scss

@@ -1,23 +1,26 @@
-@mixin mix-vars($module, $properties) {
-	@each $key, $value in $properties {
-		@if (is-map($value)) {
-			@each $k, $v in $value {
-				--vg-#{$module}-#{$key}-#{$k}: #{$v}
-			}
-		} @else {
-			--vg-#{$module}-#{$key}: #{$value}
-		}
+@use "sass:meta";
+@use "variables" as vars;
+
+@mixin mix-vars($module, $properties) {
+	@each $key, $value in $properties {
+		@if (meta.type-of($value) == 'map') {
+			@each $k, $v in $value {
+				--vg-#{$module}-#{$key}-#{$k}: #{$v};
+			}
+		} @else {
+			--vg-#{$module}-#{$key}: #{$value};
+		}
 	}
 }
 
 @mixin mix-alert-color-mode($class) {
 	$colors: ['success', 'info', 'warning', 'danger', 'dark'];
 
-	@each $value in $colors {
-		&.#{$class}-#{$value} {
-			@each $property, $val in get-alert-color($value) {
+	@each $value in $colors {
+		&.#{$class}-#{$value} {
+			@each $property, $val in vars.get-alert-color($value) {
 				--#{$class}-#{$property}: #{$val};
 			}
 		}
 	}
-}
+}

package/app/utils/scss/variables.scss

@@ -1,29 +1,45 @@
-// -- Backgrounds
-$bg-color:           #fff !default;
-$bg-color-active:    #c7dcf6 !default;
-
-// -- Colors
-$color:              #000000 !default;
-$color-emphasis:     #3c3c3c !default;
-$color-active:       #0065ff !default;
-$color-disabled:     rgba(#000000, .5) !default;
-
-// -- Shadows
-$box-shadow:         0 8px 14px 5px rgba(0, 0, 0, 0.2) !default;
-
-// -- Borders
-$border-color:          rgba(0, 0, 0, .2) !default;
-$border-color-active:   rgba(#0065ff, 1) !default;
-$border-color-disabled: rgba(0, 0, 0, .1) !default;
-$border-radius:         .375rem !default;
-$border-width:          1px !default;
-$border-style:          solid;
+@use "sass:map";
+@use "functions" as fn;
+@use "tokens";
+
+// Semantic base values for Sass consumers. Runtime theme-aware components
+// should use the matching --vg-* custom properties.
+$body-bg:            tokens.theme-token(tokens.$theme-light, body-bg) !default;
+$surface-bg:         tokens.theme-token(tokens.$theme-light, surface-bg) !default;
+$surface-raised-bg:  tokens.theme-token(tokens.$theme-light, surface-raised-bg) !default;
+$surface-muted-bg:   tokens.theme-token(tokens.$theme-light, surface-muted-bg) !default;
+$surface-hover-bg:   tokens.theme-token(tokens.$theme-light, surface-hover-bg) !default;
+$surface-active-bg:  tokens.theme-token(tokens.$theme-light, surface-active-bg) !default;
+
+// Legacy aliases. Keep these until every component has moved to semantic tokens.
+$bg-color:           $surface-bg !default;
+$bg-color-active:    $surface-active-bg !default;
+
+// -- Colors
+$color:              tokens.theme-token(tokens.$theme-light, text-color) !default;
+$color-emphasis:     tokens.theme-token(tokens.$theme-light, text-emphasis-color) !default;
+$color-muted:        tokens.theme-token(tokens.$theme-light, text-muted-color) !default;
+$color-active:       tokens.theme-token(tokens.$theme-light, primary-color) !default;
+$color-disabled:     tokens.theme-token(tokens.$theme-light, text-disabled-color) !default;
+$color-inverse:      tokens.theme-token(tokens.$theme-light, text-inverse-color) !default;
+
+// -- Shadows
+$box-shadow:         tokens.theme-token(tokens.$theme-light, box-shadow) !default;
+
+// -- Borders
+$border-color:          tokens.theme-token(tokens.$theme-light, border-color) !default;
+$border-color-strong:   tokens.theme-token(tokens.$theme-light, border-strong-color) !default;
+$border-color-active:   tokens.theme-token(tokens.$theme-light, primary-color) !default;
+$border-color-disabled: tokens.theme-token(tokens.$theme-light, border-disabled-color) !default;
+$border-radius:         .375rem !default;
+$border-width:          1px !default;
+$border-style:          solid !default;
 
 // -- Transitions
 $transition-base:    all .5s ease-in-out !default;
 
 // -- Backdrop
-$backdrop-bg:        rgba(0, 0, 0, 1) !default;
+$backdrop-bg:        tokens.theme-token(tokens.$theme-light, backdrop-color) !default;
 $backdrop-opacity:   .4 !default;
 
 // Z-indexes
@@ -54,66 +70,78 @@ $loader-map: (
 );
 
 // Colors Status
-$danger:        #FF2A2C !default;
-$danger-border: #FFCCC7 !default;
-$danger-text:   #DF0306 !default;
-$danger-bg:     #FFF2F0 !default;
-
-$success: #4FD90B;
-$success-border: #BAF98A !default;
-$success-text:   #40BE02 !default;
-$success-bg:     #F6FFED !default;
-
-$warning: #FFC107;
-$warning-border: #FFDE79 !default;
-$warning-text:   #FFC107 !default;
-$warning-bg:     #FFF6DA !default;
-
-$info: #1F8BFF;
-$info-border: #F0FAFF !default;
-$info-text:   #0471E5 !default;
-$info-bg:     #ADDDFF !default;
+$danger:        tokens.theme-token(tokens.$theme-light, danger-color) !default;
+$danger-border: tokens.theme-token(tokens.$theme-light, danger-border-color) !default;
+$danger-text:   tokens.theme-token(tokens.$theme-light, danger-text-color) !default;
+$danger-bg:     tokens.theme-token(tokens.$theme-light, danger-bg) !default;
+
+$success:        tokens.theme-token(tokens.$theme-light, success-color) !default;
+$success-border: tokens.theme-token(tokens.$theme-light, success-border-color) !default;
+$success-text:   tokens.theme-token(tokens.$theme-light, success-text-color) !default;
+$success-bg:     tokens.theme-token(tokens.$theme-light, success-bg) !default;
+
+$warning:        tokens.theme-token(tokens.$theme-light, warning-color) !default;
+$warning-border: tokens.theme-token(tokens.$theme-light, warning-border-color) !default;
+$warning-text:   tokens.theme-token(tokens.$theme-light, warning-text-color) !default;
+$warning-bg:     tokens.theme-token(tokens.$theme-light, warning-bg) !default;
+
+$info:        tokens.theme-token(tokens.$theme-light, info-color) !default;
+$info-border: tokens.theme-token(tokens.$theme-light, info-border-color) !default;
+$info-text:   tokens.theme-token(tokens.$theme-light, info-text-color) !default;
+$info-bg:     tokens.theme-token(tokens.$theme-light, info-bg) !default;
 
 $dark: #232323;
-$dark-border: shade-color($dark, 60%) !default;
-$dark-text:   tint-color($dark, 60%) !default;
-$dark-bg:     shade-color($dark, 80%) !default;
-
-$success-map: (
-		icon: $success,
-		color: $success-text,
-		border-color: $success-border,
-		background-color: $success-bg,
-		close: shade-color($success-text, 80%)
-);
-
-$danger-map: (
-		icon: $danger,
-		color: $danger-text,
-		border-color: $danger-border,
-		background-color: $danger-bg,
-		close: shade-color($danger-text, 80%)
-);
-
-$warning-map: (
-		icon: $warning,
-		color: $warning-text,
-		border-color: $warning-border,
-		background-color: $warning-bg,
-		close: shade-color($warning-text, 80%)
-);
-
-$info-map: (
-		icon: $info,
-		color: $info-text,
-		border-color: $info-border,
-		background-color: $info-bg,
-		close: shade-color($info-text, 80%)
-);
+$dark-border: fn.shade-color($dark, 60%) !default;
+$dark-text:   fn.tint-color($dark, 60%) !default;
+$dark-bg:     fn.shade-color($dark, 80%) !default;
+
+$success-map: (
+		icon: var(--vg-success-color, #{$success}),
+		color: var(--vg-success-text-color, #{$success-text}),
+		border-color: var(--vg-success-border-color, #{$success-border}),
+		background-color: var(--vg-success-bg, #{$success-bg}),
+		close: var(--vg-success-close-color, #{fn.shade-color($success-text, 80%)})
+);
+
+$danger-map: (
+		icon: var(--vg-danger-color, #{$danger}),
+		color: var(--vg-danger-text-color, #{$danger-text}),
+		border-color: var(--vg-danger-border-color, #{$danger-border}),
+		background-color: var(--vg-danger-bg, #{$danger-bg}),
+		close: var(--vg-danger-close-color, #{fn.shade-color($danger-text, 80%)})
+);
+
+$warning-map: (
+		icon: var(--vg-warning-color, #{$warning}),
+		color: var(--vg-warning-text-color, #{$warning-text}),
+		border-color: var(--vg-warning-border-color, #{$warning-border}),
+		background-color: var(--vg-warning-bg, #{$warning-bg}),
+		close: var(--vg-warning-close-color, #{fn.shade-color($warning-text, 80%)})
+);
+
+$info-map: (
+		icon: var(--vg-info-color, #{$info}),
+		color: var(--vg-info-text-color, #{$info-text}),
+		border-color: var(--vg-info-border-color, #{$info-border}),
+		background-color: var(--vg-info-bg, #{$info-bg}),
+		close: var(--vg-info-close-color, #{fn.shade-color($info-text, 80%)})
+);
 
 $dark-map: (
 		color: $dark-text,
 		border-color: $dark-border,
 		background-color: $dark-bg,
-		close: shade-color($dark-text, 80%)
-);
+		close: fn.shade-color($dark-text, 80%)
+);
+
+$alert-colors: (
+	success: $success-map,
+	info: $info-map,
+	warning: $warning-map,
+	danger: $danger-map,
+	dark: $dark-map,
+) !default;
+
+@function get-alert-color($type) {
+	@return map.get($alert-colors, $type);
+}