46 lines
1.2 KiB
SCSS
46 lines
1.2 KiB
SCSS
@use 'sass:meta';
|
|
@use 'sass:list';
|
|
@use 'sass:string';
|
|
|
|
@mixin element-variant($namespace, $variant: '', $map: ()) {
|
|
@if meta.type-of($map) == 'map' {
|
|
$withDarkVariant: false;
|
|
$variantPrefix: if(string.length($variant) > 0, '-' + $variant, '');
|
|
|
|
@at-root {
|
|
:root,
|
|
.light-theme {
|
|
@each $property, $value in $map {
|
|
@if meta.type-of($value) == 'list' {
|
|
@if $withDarkVariant == false and list.length($value) > 1 {
|
|
$withDarkVariant: true;
|
|
}
|
|
|
|
$value: list.nth($value, 1);
|
|
}
|
|
|
|
--#{$namespace}#{$variantPrefix}-#{$property}: #{$value};
|
|
}
|
|
}
|
|
|
|
@if $withDarkVariant {
|
|
.dark-theme {
|
|
@each $property, $value in $map {
|
|
@if meta.type-of($value) == 'list' and list.length($value) > 1 {
|
|
--#{$namespace}#{$variantPrefix}-#{$property}: #{list.nth($value, 2)};
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@if (string.length($variant) > 0) {
|
|
&-#{$variantPrefix} {
|
|
@each $property, $value in $map {
|
|
--#{$namespace}-#{$property}: var(--#{$namespace}#{$variantPrefix}-#{$property});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|