83 lines
2.5 KiB
SCSS
83 lines
2.5 KiB
SCSS
@use "sass:color";
|
|
|
|
/* 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 ────────────────────────────────────────────
|
|
|
|
/*
|
|
*
|
|
* */
|
|
|
|
/* Taken from Tailwind: https://tailwindcss.com/docs/container#using-the-container */
|
|
$screen-sizes: (
|
|
"sm": 640px,
|
|
"md": 768px,
|
|
"lg": 1024px,
|
|
"xl": 1280px,
|
|
"2xl": 1536px,
|
|
);
|
|
|
|
$spacings: (
|
|
0 "--prj-spacing-0" 0,
|
|
1 "--prj-spacing-1" 0.25rem,
|
|
2 "--prj-spacing-2" 0.5rem,
|
|
3 "--prj-spacing-3" 1rem,
|
|
4 "--prj-spacing-4" 2rem,
|
|
5 "--prj-spacing-5" 3rem
|
|
);
|
|
|
|
$border-radius: 0.5rem;
|
|
|
|
// Native CSS Variables to allow overridings and usage in external stylesheets
|
|
:root {
|
|
/* Variables prefixed with prj to avoid collisions */
|
|
|
|
/* Colors are inspired by Material Design: https://m2.material.io/design/color/the-color-system.html */
|
|
--prj-bg: #{getColor("mantle")};
|
|
--prj-bg-transparent: #{color.scale(getColor("mantle"), $alpha: -10%)};
|
|
--prj-shadow: #{getColor("crust")};
|
|
--prj-text: #{getColor("text")};
|
|
|
|
--prj-surface-1: #{getColor("base")};
|
|
--prj-surface-2: #{darken(getColor("surface0"), 2%)};
|
|
--prj-surface-3: #{getColor("surface1")};
|
|
--prj-surface-text: #{getColor("text")};
|
|
|
|
--prj-link-text: #{getColor("teal")};
|
|
|
|
--prj-accent-bg: #{getColor("teal")};
|
|
--prj-accent-text: #{getColor("base")};
|
|
|
|
--prj-primary: #{getColor("teal")};
|
|
--prj-primary-text: #{getColor("base")};
|
|
|
|
--prj-secondary: #{getColor("mauve")};
|
|
--prj-secondary-text: #{getColor("base")};
|
|
|
|
--prj-danger: #{getColor("red")};
|
|
--prj-danger-text: #{getColor("base")};
|
|
|
|
--prj-disabled: #{getColor("red")};
|
|
--prj-disabled-text: rgba(#{getColor("raw")}, 0.5);
|
|
|
|
--prj-input: #{getColor("text")};
|
|
--prj-input-text: #{getColor("base")};
|
|
|
|
@each $index, $variable, $value in $spacings {
|
|
#{$variable}: #{$value};
|
|
}
|
|
|
|
--prj-border-radius: #{$border-radius};
|
|
}
|