swaf/src/assets/scss/base.scss

@import "vars";
@import "helpers";

@import "fonts";
@import "../../../node_modules/normalize.css/normalize";


// --- Css variables, dark mode ---
:root {
	// Primary
	--primary: #{$primary};
	--primary-light: #{$primaryLight};
	--on-primary: #{$onPrimary};
	--primary-on-background: #{$primaryOnBackground};
	--primary-light-on-background: #{$primaryLightOnBackground};
	--primary-on-surface: #{$primaryOnSurface};
	--primary-light-on-surface: #{$primaryLightOnSurface};

	// Secondary
	--secondary: #{$secondary};
	--on-secondary: #{$onSecondary};

	// Background
	--background: #{$background};
	--on-background: #{$onBackground};

	// Surface
	--surface: #{$surface};
	--on-surface: #{$onSurface};

	// Input
	--input: #{$input};
	--on-input: #{$onInput};


	// States
	--info: #{$info};
	--success: #{$success};
	--warning: #{$warning};
	--error: #{$error};

	// States text
	--on-info: #{$onInfo};
	--on-success: #{$onSuccess};
	--on-warning: #{$onWarning};
	--on-error: #{$onError};

	// States text on background
	--info-on-background: #{$infoOnBackground};
	--success-on-background: #{$successOnBackground};
	--warning-on-background: #{$warningOnBackground};
	--error-on-background: #{$errorOnBackground};

	// States text on surface
	--info-on-surface: #{$infoOnSurface};
	--success-on-surface: #{$successOnSurface};
	--warning-on-surface: #{$warningOnSurface};
	--error-on-surface: #{$errorOnSurface};

	@include darkMode {
		// Primary
		--primary: #{$primaryDarkMode};
		--primary-light: #{$primaryLightDarkMode};
		--on-primary: #{$onPrimaryDarkMode};
		--primary-on-background: #{$primaryOnBackgroundDarkMode};
		--primary-light-on-background: #{$primaryLightOnBackgroundDarkMode};
		--primary-on-surface: #{$primaryOnSurfaceDarkMode};
		--primary-light-on-surface: #{$primaryLightOnSurfaceDarkMode};

		// Secondary
		--secondary: #{$secondaryDarkMode};
		--on-secondary: #{$onSecondaryDarkMode};

		// Background
		--background: #{$backgroundDarkMode};
		--on-background: #{$onBackgroundDarkMode};

		// Surface
		--surface: #{$surfaceDarkMode};
		--on-surface: #{$onSurfaceDarkMode};

		// Input
		--input: #{$inputDarkMode};
		--on-input: #{$onInputDarkMode};


		// States
		--info: #{$infoDarkMode};
		--success: #{$successDarkMode};
		--warning: #{$warningDarkMode};
		--error: #{$errorDarkMode};

		// States text
		--on-info: #{$onInfoDarkMode};
		--on-success: #{$onSuccessDarkMode};
		--on-warning: #{$onWarningDarkMode};
		--on-error: #{$onErrorDarkMode};

		// States text on background
		--info-on-background: #{$infoOnBackgroundDarkMode};
		--success-on-background: #{$successOnBackgroundDarkMode};
		--warning-on-background: #{$warningOnBackgroundDarkMode};
		--error-on-background: #{$errorOnBackgroundDarkMode};

		// States text on surface
		--info-on-surface: #{$infoOnSurfaceDarkMode};
		--success-on-surface: #{$successOnSurfaceDarkMode};
		--warning-on-surface: #{$warningOnSurfaceDarkMode};
		--error-on-surface: #{$errorOnSurfaceDarkMode};
	}

	--color: var(--on-background);
	--background-color: var(--background);
}

:focus-visible,
button:focus-visible,
[type="button"]:focus-visible,
[type="reset"]:focus-visible,
[type="submit"]:focus-visible {
	outline: 3px solid var(--primary-light);
	outline-offset: 2px;
}

* {
	box-sizing: border-box;
}

body {
	font-family: sans-serif;
	color: var(--color);
	background-color: var(--background-color);

	a {
		color: var(--primary-on-background);

		&:hover {
			color: var(--primary-light-on-background);
		}
	}
}

h1 {
	text-align: center;
}

a {
	text-decoration: none;

	.feather.feather-external-link { //todo add js
		--icon-size: 16px;
		margin-left: 4px;
		margin-top: -3px;
	}
}

ul {
	list-style-type: '- ';
}

.primary, .bold {
	--color: var(--primary-on-background);
	--background-color: var(--background);

	&.bold {
		--color: var(--on-primary);
		--background-color: var(--primary);
	}
}

.info {
	--color: var(--info-on-background);
	--background-color: var(--background);

	&.bold {
		--color: var(--on-info);
		--background-color: var(--info);
	}
}

.success {
	--color: var(--success-on-background);
	--background-color: var(--background);

	&.bold {
		--color: var(--on-success);
		--background-color: var(--success);
	}
}

.warning {
	--color: var(--warning-on-background);
	--background-color: var(--background);

	&.bold {
		--color: var(--on-warning);
		--background-color: var(--warning);
	}
}

.error, .danger {
	--color: var(--error-on-background);
	--background-color: var(--background);

	&.bold {
		--color: var(--on-error);
		--background-color: var(--error);
	}
}


button, .button {
	position: relative;
	display: inline-flex;
	margin: 8px;
	padding: 12px 16px;
	border: 1px solid var(--color);

	color: var(--color);
	background-color: var(--background-color);
	cursor: pointer;
	text-transform: uppercase;
	font-size: 16px;
	line-height: 16px;
	font-weight: bolder;

	border-radius: 5px;
	overflow: hidden;

	&.bold {
		border: 0;
	}

	.feather {
		--icon-size: 16px;
		margin-right: 8px;
	}

	.feather.last {
		margin-right: 0;
		margin-left: 8px;
	}

	&:hover::after {
		content: "";

		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: var(--on-background);
		opacity: 0.2;
	}
}