example-code/styles/mysite-sass/vars/_vars.scss

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

$theme-colors: (
    "primary":    #e2e2e7,
    "fade-grey":  #828287,
    "light-grey":  #f0f0f0,
    'link-grey':  #525257,
    'h2':  black,
    'p':  #424242,
    "col3":  #eee,
    "col1":  #ffffff,
    "col4":  #434547,
    "col5":  #2a2c2d,
    "nav":  #feca1d,
    "nav-light":  #ffda01,
    "nav2":  #daa520,
	'blk': #000,
	'navy-blue': #3e4b75,
	'pale-yellow': #f8ebc2,
	'lightGrey': #fafafc,
	'formGrey': #3b3f44,
	'special_blue': #6573ff,
	'indigo': #6610f2
);

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