119 lines
4.3 KiB
SCSS
119 lines
4.3 KiB
SCSS
@use "sass:color";
|
|
@use "sass:map";
|
|
@use "colors";
|
|
|
|
/* Using catppuccin for now, make a theme switcher later */
|
|
@use "../themes/catppuccin/catppuccin";
|
|
|
|
@function getColor($color) {
|
|
$ctp-theme: map.get(catppuccin.$palette, "macchiato");
|
|
@return map.get($ctp-theme, $color);
|
|
}
|
|
|
|
/*
|
|
╭───────────────────────────────────────────────────────────╮
|
|
│ Mini-Strap Design Tokens │
|
|
╰───────────────────────────────────────────────────────────╯
|
|
*/
|
|
|
|
// ── Structure and convention ────────────────────────────────────────────
|
|
|
|
/*
|
|
* The token follow the following syntax: "prefix-group-property-value", where:
|
|
* - prefix: always "msp" the project prefix to avoid clashes with other styles.
|
|
* - group: the topic, Ex: "border", "color", "space".
|
|
* - property: the property of the group we are modifying. Optional.
|
|
* - value: depends of the property, but its the final modifier and the actual value.
|
|
* */
|
|
|
|
/* Taken from Tailwind: https://tailwindcss.com/docs/container#using-the-container */
|
|
$msp-breakpoints: (
|
|
"sm": 640px,
|
|
"md": 768px,
|
|
"lg": 1024px,
|
|
"xl": 1280px,
|
|
"2xl": 1536px,
|
|
);
|
|
|
|
$spacings: (
|
|
0 "--msp-spacing-0" 0,
|
|
1 "--msp-spacing-1" 0.25rem,
|
|
2 "--msp-spacing-2" 0.5rem,
|
|
3 "--msp-spacing-3" 1rem,
|
|
4 "--msp-spacing-4" 2rem,
|
|
5 "--msp-spacing-5" 3rem
|
|
);
|
|
|
|
$border-radius: 0.5rem;
|
|
|
|
/* Colors are inspired by Material Design: https://m2.material.io/design/color/the-color-system.html */
|
|
$msp-colors: (
|
|
"--msp-color-bg": #{getColor("mantle")},
|
|
"--msp-color-bg-transparent": #{color.scale(getColor("mantle"), $alpha: -10%)},
|
|
"--msp-color-bg-surface-1": #{getColor("base")},
|
|
"--msp-color-bg-surface-2": #{color.adjust(
|
|
getColor("surface0"),
|
|
$lightness: -2%
|
|
)},
|
|
"--msp-color-bg-surface-3": #{getColor("surface1")},
|
|
|
|
"--msp-color-bg-accent": #{getColor("teal")},
|
|
"--msp-color-bg-primary": #{getColor("mauve")},
|
|
"--msp-color-bg-secondary": #{getColor("lavender")},
|
|
"--msp-color-bg-danger": #{getColor("red")},
|
|
"--msp-color-bg-disabled": #{color.scale(getColor("text"), $alpha: -10%)},
|
|
"--msp-color-bg-input": #{getColor("text")},
|
|
"--msp-color-bg-checkbox": #{getColor("teal")},
|
|
"--msp-color-bg-range": #{getColor("surface1")},
|
|
"--msp-color-bg-btn": #{getColor("teal")},
|
|
"--msp-color-bg-table": #{getColor("base")},
|
|
|
|
"--msp-color-text": #{getColor("text")},
|
|
"--msp-color-text-transparent": #{color.scale(getColor("text"), $alpha: -50%)},
|
|
"--msp-color-text-surface": #{getColor("text")},
|
|
"--msp-color-text-link": #{getColor("teal")},
|
|
"--msp-color-text-accent": #{getColor("base")},
|
|
"--msp-color-text-primary": #{getColor("base")},
|
|
"--msp-color-text-secondary": #{getColor("base")},
|
|
"--msp-color-text-danger": #{getColor("base")},
|
|
"--msp-color-text-disabled": #{color.scale(getColor("text"), $alpha: -30%)},
|
|
"--msp-color-text-input": #{getColor("base")},
|
|
"--msp-color-text-input-disabled": #{color.scale(
|
|
getColor("base"),
|
|
$alpha: -30%
|
|
)},
|
|
"--msp-color-text-checkbox": #{getColor("surface1")},
|
|
"--msp-color-text-range": #{getColor("teal")},
|
|
"--msp-color-text-btn": #{getColor("base")},
|
|
"--msp-color-text-table": #{getColor("text")},
|
|
|
|
"--msp-color-shadow": #{getColor("crust")},
|
|
"--msp-color-transparent": transparent,
|
|
);
|
|
|
|
$anim: (
|
|
"--msp-anim-duration-sm": 0.4s,
|
|
"--msp-anim-duration-md": 0.8s,
|
|
"--msp-anim-duration-lg": 1s,
|
|
);
|
|
|
|
// Native CSS Variables to allow overridings and usage in external stylesheets
|
|
:root {
|
|
@each $variable, $value in $msp-colors {
|
|
#{$variable}: #{$value};
|
|
}
|
|
|
|
@each $index, $variable, $value in $spacings {
|
|
#{$variable}: #{$value};
|
|
}
|
|
|
|
@each $variable, $value in $anim {
|
|
#{$variable}: #{$value};
|
|
}
|
|
|
|
// ── Borders ─────────────────────────────────────────────────────────────
|
|
--msp-border-width: 1px;
|
|
--msp-border-color: var(--msp-color-text-transparent);
|
|
--msp-border-style: solid;
|
|
--msp-border-radius: 0.2rem;
|
|
}
|