zaydek

@use "sass:list";

@function v($selector, $v) {
    @if $v == none {
        @return "#{$selector}";
    } @else if $v == hover {
        @return "hover\\:#{$selector}:hover";
    } @else if $v == focus {
        @return "focus\\:#{$selector}:focus";
    }

zaydek

@use "sass:list";

@mixin variants($variants) {
    @content(".", "");
    @if list.index($variants, hover) {
        @content(".hover\\:", ":hover");
    }
    @if list.index($variants, "hover") {
        @content(".focus\\:", ":focus");
    }

zaydek

@use "sass:list";

@mixin variants($variants) {
    @content(".", "");
    @if list.index($variants, hover) {
        @content(".hover\\:", ":hover");
    }
    @if list.index($variants, "hover") {
        @content(".focus\\:", ":focus");
    }

zaydek

@use "sass:list";

@mixin variants($variants) {

    @content(".", "");

    @if list.index($variants, hover) {
        @content(".hover\\:", ":hover");
    }

zaydek

@use "sass:list";

@mixin variants($variants) {

    @content(".", "");

    @if list.index($variants, hover) {
        @content(".hover\\:", ":hover");
    }

zaydek

@use "sass:string";

@mixin responsive {
	@each $key, $n in (sm: 640, md: 768) {
	    /* >= #{$n + px} (#{$key}) */
		@media (min-width: $n + px) {
			.#{$key} {
				@content;
			}
		}

zaydek

body {
  --primary-text: #fff;
  --primary-bg: #fff;
  --secondary-text: #aaa;
  --secondary-bg: #aaa;
  --tertiary-text: #fff;
  --tertiary-bg: #fff;
}

body[data-theme=dark], body [data-theme=dark] {

zaydek

@function semantic($str) {
  @if $str == "color" {
    @return "text";
  } @else if $str == "background-color" {
    @return "bg";
  } @else if $str == "box-shadow" {
		@return "shadow";
	}
  @return $str;
}

zaydek

$breakpoints: (
  "xs": 640,
  "sm": 768,
  "md": 896,
  "lg": 1024,
  "xl": 1280,
);

// prettier-ignore
$pxs:

zaydek

$breakpoints: (
  "xs": 640,
  "sm": 768,
  "md": 896,
  "lg": 1024,
  "xl": 1280,
);

// prettier-ignore
$pxs: