85 lines
2.2 KiB
SCSS
85 lines
2.2 KiB
SCSS
@use 'sass:map';
|
|
|
|
@use 'config';
|
|
@use 'function' as *;
|
|
@use '../common/var' as *;
|
|
|
|
// set css var value
|
|
// @include set-css-var-value(('color', 'primary'), red)
|
|
// --tn-color-primary: red
|
|
@mixin set-css-var-value($name, $value) {
|
|
#{joinVarName($name)}: #{$value};
|
|
}
|
|
|
|
// @include set-css-var-type('color', 'primary', $map)
|
|
// --tn-color-primary: #{map.get($map, 'primary')}
|
|
@mixin set-css-var-type($name, $type, $variables) {
|
|
#{getCssVarName($name, $type)}: #{map.get($variables, $type)};
|
|
}
|
|
|
|
@mixin set-css-color-type($colors, $type) {
|
|
@include set-css-var-value(('color', $type), map.get($colors, $type, 'base'));
|
|
|
|
@each $i in (3, 5, 7, 8, 9) {
|
|
@include set-css-var-value(
|
|
('color', $type, 'light', $i),
|
|
map.get($colors, $type, 'light-#{$i}')
|
|
);
|
|
}
|
|
|
|
@include set-css-var-value(
|
|
('color', $type, 'dark-2'),
|
|
map.get($colors, $type, 'dark-2')
|
|
);
|
|
}
|
|
|
|
@mixin set-css-var-inner-color($name, $type, $variables) {
|
|
@include set-css-color-type($name, $type, $variables);
|
|
}
|
|
|
|
@mixin set-css-color-inner($colors, $name) {
|
|
@include set-css-var-value(('color', $name), map.get($colors, $name, 'base'));
|
|
|
|
@each $type in (dark, light, disabled) {
|
|
@include set-css-var-value(
|
|
('color', $name, $type),
|
|
map.get($colors, $name, $type)
|
|
);
|
|
}
|
|
}
|
|
|
|
// set all css var for coponent by map
|
|
@mixin set-component-css-var($name, $variables) {
|
|
@each $attribute, $value in $variables {
|
|
@if $attribute == 'default' {
|
|
#{getCssVarName($name)}: #{$value};
|
|
} @else {
|
|
#{getCssVarName($name, $attribute)}: #{$value};
|
|
}
|
|
}
|
|
}
|
|
|
|
// set component default var value
|
|
@mixin set-component-default-css-var($name, $value) {
|
|
#{getCssVarName($name)}: #{$value};
|
|
}
|
|
|
|
@mixin set-css-color-rgb($colors, $type) {
|
|
$color: map.get($colors, $type, 'base');
|
|
@include set-css-var-value(
|
|
('color', $type, 'rgb'),
|
|
#{red($color),
|
|
green($color),
|
|
blue($color)}
|
|
);
|
|
}
|
|
|
|
// generate css var from existing css var
|
|
// @include css-var-from-global(('button', 'text-color'), ('color', $type))
|
|
// --tn-button-text-color: var(--tn-color-#{$type})
|
|
@mixin css-var-from-global($var, $gVar) {
|
|
$varName: joinVarName($var);
|
|
$gVarName: joinVarName($gVar);
|
|
#{$varName}: var(#{$gVarName});
|
|
}
|