example-code/php-laravel/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,
	"light2-grey": #bebebe,
	"light3-grey": rgb(245,245,245),
	"dark-grey": #212121,
	"faded-text": #425466,
	"faded-text2": #6c757d,
	"dark-green": #3bb78f,
	"light-green": #0bab64,
	"green": #63b521,
	"alt-blue-light": #e2f5ff,
	"alt-blue-medium": #2b96cc,
	"text-blue-medium": #425466,
	"alt-red-light": #f3beb8,
	"alt-red-medium": #f09898,
);

@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);
	}
  }

// A linear gradient with the light color at the top left and dark color at
// bottom right, that darkens on hover
@mixin special-button($start, $end) {
	font-family: "PatuaOne";
	height: 2em;
	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%);
	&:hover {
		background-image: linear-gradient(315deg, darkenColor($start) 0%, darkenColor($end) 74%);
	}
}

// A white button with a transparent background that becomes white and orange on hover
@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 inverting-button($primary, $background) {
	text-align: center;
	border: 2px solid $primary;
	border-radius: 4px;
	padding: 5px 10px;
	background-color: $background;
	color: $primary;
	&:hover {
		background-color: $primary;
		color: $background;
	}
}

// A button with a white background and specified accent color that reverses on hover
@mixin brand-button($col) {
	width: 10em;
	height: 2.5em;;
	background-color: white;
	border: 2px solid map.get($theme-colors, $col);
	color: map.get($theme-colors, $col);
	border-radius: 4px;
	font-size: 16px;
	&:hover {
		background-color: map.get($theme-colors, $col);
		color: white;
	}
}

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

@mixin hovering2 {
	padding: 18px 9px;
	border-radius: 4px;
	background: white;
	box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
	transition: transform 0.2s;
}

@mixin hovering3 {
	padding: 18px 9px;
	border-radius: 4px;
	background: white;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
	transition: transform 0.2s;
}

@mixin hovering-light {
	padding: 18px 9px;
	border-radius: 4px;
	background: white;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
	transition: transform 0.2s;
}