106 lines
2.5 KiB
Rust
106 lines
2.5 KiB
Rust
use sabry::sassy;
|
|
|
|
sassy!(style "src/style.scss");
|
|
|
|
sassy!(utils {"
|
|
@mixin flex($direction, $align, $justify, $gap: .5rem) {
|
|
display: flex;
|
|
list-style: none;
|
|
gap: $gap;
|
|
flex-direction: $direction;
|
|
|
|
@if $align == start{
|
|
align-items: flex-start;
|
|
}
|
|
@else if $align == end{
|
|
align-items: flex-end;
|
|
}
|
|
@else{
|
|
align-items: $align;
|
|
}
|
|
|
|
@if $justify == start {
|
|
justify-content: flex-start;
|
|
}
|
|
@else if $justify == end {
|
|
justify-content: flex-end;
|
|
}
|
|
@else {
|
|
justify-content: $justify;
|
|
}
|
|
}
|
|
"});
|
|
|
|
sassy!(theme {"
|
|
$thm-surface-primary: #2b2a29;
|
|
$thm-surface-secondary: #6C6C6C;
|
|
$thm-surface-tertiary: #4C4C4C;
|
|
$thm-surface-accent: #B0CB1F;
|
|
|
|
$thm-text-primary: #ffffff;
|
|
$thm-text-secondary: #ffffff;
|
|
$thm-text-tertiary: #ffffff;
|
|
$thm-text-accent: #B0CB1F;
|
|
|
|
@mixin surface($style: primary) {
|
|
@if $style == primary {
|
|
@include txt(primary);
|
|
background-color: $thm-surface-primary;
|
|
}
|
|
@else if $style == secondary {
|
|
@include txt(secondary);
|
|
background-color: $thm-surface-secondary;
|
|
}
|
|
@else if $style == accent {
|
|
@include txt;
|
|
background-color: $thm-surface-accent;
|
|
}
|
|
}
|
|
|
|
@mixin txt($style: primary) {
|
|
@if $style == primary {
|
|
font-weight: 500;
|
|
color: $thm-text-primary;
|
|
}
|
|
@else if $style == secondary {
|
|
font-weight: 400;
|
|
color: $thm-text-secondary;
|
|
}
|
|
@else if $style == tertiary {
|
|
font-weight: 400;
|
|
color: $thm-text-tertiary;
|
|
}
|
|
@else if $style == accent {
|
|
font-weight: 500;
|
|
color: $thm-text-accent;
|
|
}
|
|
}
|
|
"});
|
|
|
|
sassy!(tokens {"
|
|
@use 'theme';
|
|
|
|
@mixin clickable($style: accent, $scale: 1.2, $clickscale: 0.9){
|
|
@if $style == accent{
|
|
@include theme.surface(accent);
|
|
}
|
|
@else if $style == secondary {
|
|
@include theme.surface(secondary);
|
|
}
|
|
|
|
cursor: pointer;
|
|
outline: none;
|
|
-webkit-tap-highlight-color: #00000000;
|
|
transition: transform .07s, filter .07s;
|
|
&:hover{
|
|
transform: scale($scale);
|
|
}
|
|
&:focus-visible {
|
|
outline: 2px solid #fff;
|
|
}
|
|
&:active {
|
|
filter: brightness(.9);
|
|
transform: scale($clickscale);
|
|
}
|
|
}
|
|
"});
|