homepage/styles/lib/_colors.scss

@use 'sass:color';

$gray-900: #1d1d1d;
$gray-800: #212121;
$gray-600: #707070;
$gray-300: #d6d6d6;
$gray-100: #f9f9f9;
$gray-50: #ffffff;

$brown-800: #55433c;
$brown-500: #866152;

$teal-800: #4d8b87;
$teal-600: #6bc2bd;
$teal-500: #4edcca;
$teal-300: #caf4ef;

$blue-800: #484d6d;
$blue-500: #08b2e3;

$yellow-600: #e8d823;
$yellow-500: #ffff00;
$yellow-300: #ffffa4;

$green-600: #c4e823;
$green-500: #aaff00;
$green-300: #dbffa4;

$orange-500: #f45520;
$orange-400: #f59273;
$orange-300: #fef0ec;
$orange-100: #fffaf7;

$main-text: $gray-800;
$main-background: $gray-50;
$inverse-text: $gray-50;

@mixin block-shadow {
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

@mixin card-shadow($base-color: $gray-900) {
	box-shadow:
		0.1rem 0.4rem 0.4rem #{color.scale($base-color, $alpha: -90%)},
		0.25rem 1rem 1rem #{color.scale($base-color, $alpha: -90%)};
}

@mixin coderdojo-theme {
	@at-root [data-coderdojo] & {
		@content;
	}
}