trendplays/resources/scss/_vars.scss

@use "sass:map";
@use "sass:color";

$theme-colors: (
	"red-alert": #ce0018,
	"red-orangish": #de493b,
	"blue": #0736a4,
	"light-blue": #a4bfd9,
	"medium-blue": #1877f2,
	"dark-blue": #09c6f9,
	"orange": #ec9f05,
	"dark-orange": #ff4e00,
	"brand-orange": #f67602,
	"grey": #e6ebf1,
	"light-grey": #e9e9e9,
	"faded-text": #425466,
	"faded-text2": #6c757d,
);

@function getColor($col) {
	@return map.get($theme-colors, $col);
}

@function darkenColor($col) {
	$oldCol : map.get($theme-colors, $col);
	$newCol : color.scale($oldCol, $lightness: -45%);
	@return $newCol;
}

@function lightenColor($col) {
	$oldCol : map.get($theme-colors, $col);
	$newCol : color.scale($oldCol, $lightness: 15%);
	@return $newCol;
}

@mixin button($col) {
	display: inline-block;
	//font-family: $btn-font-family;
	font-weight: 400;
	background-color: getColor($col);
	text-align: center;
	vertical-align: middle;
	user-select: none;
	border: none;
	padding: 7px 15px;
	border-radius: 5px;
	&:hover{
	background-color: darkenColor($col);
	}
  }
@mixin special-button($start, $end) {
	font-family: "PatuaOne";
	border: none;
	border-radius: 4px;
	padding: 3px;
	color: white;
	background-color: #045de9;
	background-image: linear-gradient(315deg, map.get($theme-colors, $start) 0%, map.get($theme-colors, $end) 74%);
}

@mixin transparent-button {
	text-align: center;
	font-size: 20px;
	border: 2px solid white;
	border-radius: 4px;
	padding: 10px;
	background-color: transparent;
	color: white;
	&:hover {
		background-color: white;
		color: map.get($theme-colors, "orange");
	}
}

@mixin hovering {
	padding: 18px 9px;
	border-radius: 4px;
	background: white;
	box-shadow: 7px 10px 8px rgb(156 166 175 / 22%);
	transition: transform 0.2s;
}