@oardi/css-utils 0.19.0

package/scss/theme.scss

@@ -0,0 +1,63 @@
+$theme: (
+	colors: (
+		primary: #715acd,
+		secondary: #595959,
+		success: #16a085,
+		error: #f03e3e,
+	),
+	on-colors: (
+		primary: #ffffff,
+		secondary: #ffffff,
+		success: #ffffff,
+		error: #ffffff,
+	),
+	grays: (
+		10: hsl(210, 10%, 10%),
+		20: hsl(210, 10%, 15%),
+		30: hsl(210, 10%, 30%),
+		40: hsl(210, 10%, 40%),
+		50: hsl(210, 10%, 50%),
+		60: hsl(210, 10%, 60%),
+		70: hsl(210, 10%, 70%),
+		80: hsl(210, 10%, 80%),
+		90: hsl(210, 10%, 90%),
+	),
+	directions: (
+		t: top,
+		r: right,
+		b: bottom,
+		l: left,
+	),
+	spacings: (
+		0: 0rem,
+		1: 1rem,
+		2: 2rem,
+		3: 3rem,
+		4: 4rem,
+		5: 5rem,
+	),
+	positions: (
+		relative,
+		absolute,
+		fixed,
+		static,
+		sticky,
+		inherit,
+		initial,
+		unset,
+	),
+	zIndexLevels: (
+		n1: -1,
+		0: 0,
+		1: 1,
+		2: 2,
+		3: 3,
+	),
+	breakpoints: (
+		sm: 576px,
+		md: 768px,
+		lg: 992px,
+		xl: 1200px,
+		xxl: 1400px,
+	),
+) !default;

package/scss/typography.scss

@@ -0,0 +1,72 @@
+:root {
+	--line-height: 1.5;
+	--font-size: 16px;
+	--font-weight: 400;
+	--font-family: 'Inter', sans-serif;
+
+	--h1: var(--font-weight) 2.3rem var(--font-family);
+	--h2: var(--font-weight) 2rem var(--font-family);
+	--h3: var(--font-weight) 1.8rem var(--font-family);
+	--h4: var(--font-weight) 1.6rem var(--font-family);
+	--h5: var(--font-weight) 1.4rem var(--font-family);
+	--h6: var(--font-weight) 1.2rem var(--font-family);
+}
+
+small {
+	font-size: 0.833rem;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	margin: 0 0 0.5rem 0;
+	line-height: 1.2;
+}
+
+h1,
+.h1 {
+	font: var(--h1);
+	letter-spacing: -1px;
+}
+
+h2,
+.h2 {
+	font: var(--h2);
+}
+
+h3,
+.h3 {
+	font: var(--h3);
+}
+
+h4,
+.h4 {
+	font: var(--h4);
+}
+
+h5,
+.h5 {
+	font: var(--h5);
+}
+
+h6,
+.h6 {
+	font: var(--h6);
+	line-height: var(--line-height);
+}
+
+a {
+	color: var(--primary);
+	fill: var(--primary);
+	text-decoration: none;
+	&:hover {
+		text-decoration: underline;
+	}
+}
+
+p {
+	margin-bottom: 1rem;
+}

package/scss/utilities.scss

@@ -0,0 +1,194 @@
+@use 'sass:map';
+@use './theme.scss';
+
+.d-none {
+	display: none;
+}
+
+// positions
+@each $value in map.get(theme.$theme, positions) {
+	.position-#{$value} {
+		position: $value !important;
+	}
+}
+
+.container {
+	max-width: var(--container);
+	margin-left: auto;
+	margin-right: auto;
+	padding-left: 2rem;
+	padding-right: 2rem;
+	width: 100%;
+
+	// use breakpoint utility
+	@media (max-width: 576px) {
+		padding-left: 1.25rem;
+		padding-right: 1.25rem;
+	}
+}
+
+.text-center {
+	text-align: center;
+}
+
+.text-left {
+	text-align: left;
+}
+
+.text-right {
+	text-align: right;
+}
+
+.text-white {
+	color: var(--white);
+}
+
+.text-dark {
+	color: var(--black);
+}
+
+@each $name, $value in map.get(theme.$theme, colors) {
+	.text-#{$name} {
+		color: var(--#{$name});
+	}
+
+	.bg-#{$name}-light {
+		background-color: var(--#{$name}-light);
+		color: var(--on-#{$name});
+	}
+
+	.bg-#{$name} {
+		background-color: var(--#{$name});
+		color: var(--on-#{$name});
+	}
+
+	.bg-#{$name}-dark {
+		background-color: var(--#{$name}-dark);
+		color: var(--on-#{$name});
+	}
+}
+
+@each $name, $value in map.get(theme.$theme, grays) {
+	.text-gray-#{$name} {
+		color: var(--gray-#{$name});
+	}
+
+	.bg-gray-#{$name} {
+		background-color: var(--gray-#{$name});
+	}
+}
+
+.bg-white {
+	background-color: var(--white);
+}
+
+.img-responsive {
+	width: 100%;
+}
+
+.rounded-circle {
+	border-radius: 50%;
+}
+
+.shadow-light {
+	box-shadow: var(--shadow-light);
+}
+
+.shadow {
+	box-shadow: var(--shadow);
+}
+
+.shadow-dark {
+	box-shadow: var(--shadow-dark);
+}
+
+.w-100 {
+	width: 100%;
+}
+
+.w-60 {
+	width: 60%;
+}
+
+.w-50 {
+	width: 50%;
+}
+
+.w-40 {
+	width: 40%;
+}
+
+.h-100 {
+	height: 100%;
+}
+
+// TODO - check if more classes are needed
+.top-0 {
+	top: 0px;
+}
+
+.right-0 {
+	right: 0px;
+}
+
+.bottom-0 {
+	bottom: 0px;
+}
+
+.left-0 {
+	left: 0px;
+}
+
+.fixed-top {
+	position: fixed;
+	top: 0;
+	right: 0;
+	left: 0;
+	z-index: 1030;
+}
+
+.overflow-y-scroll {
+	overflow-y: scroll;
+}
+
+.no-scroll {
+	overflow: hidden;
+	position: fixed;
+	width: 100%;
+	height: 100%;
+}
+
+// width, height, display with breakpoints and directions
+@each $bp, $bp-value in map.get(theme.$theme, breakpoints) {
+	@media (min-width: #{$bp-value}) {
+		.w-#{$bp}-100 {
+			width: 100% !important;
+		}
+
+		.w-#{$bp}-60 {
+			width: 60% !important;
+		}
+
+		.w-#{$bp}-50 {
+			width: 50% !important;
+		}
+
+		.w-#{$bp}-40 {
+			width: 40% !important;
+		}
+
+		.w-#{$bp}-30 {
+			width: 30% !important;
+		}
+
+		.d-#{$bp}-block {
+			display: block !important;
+		}
+	}
+}
+
+@each $name, $value in map.get(theme.$theme, zIndexLevels) {
+	.z-index-#{$name} {
+		z-index: $value;
+	}
+}

package/scss/variables.scss

@@ -0,0 +1,38 @@
+@use 'sass:color';
+@use 'sass:map';
+@use './theme.scss';
+
+:root {
+	--white: #ffffff;
+	--black: #000000;
+
+	--font-color: #000000;
+	--body-bg-color: #f9f9f9;
+
+	@each $name, $value in map.get(theme.$theme, colors) {
+		--#{$name}-light: #{color.adjust($value, $lightness: 15%)};
+		--#{$name}: #{$value};
+		--#{$name}-dark: #{color.adjust($value, $lightness: -15%)};
+		--text-#{$name}: #{$value};
+	}
+
+	@each $name, $value in map.get(theme.$theme, on-colors) {
+		--on-#{$name}: #{$value};
+	}
+
+	@each $name, $value in map.get(theme.$theme, grays) {
+		--gray-#{$name}: #{$value};
+	}
+
+	--highlight: rgba(189, 189, 189, 0.1);
+	--border-radius: 6px;
+
+	--shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.075);
+	--shadow-dark: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.1);
+	--shadow-light: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.005);
+
+	--box-shadow: 0 0 0 0.2rem var(--primary-light);
+	--box-shadow-error: 0 0 0 0.2rem var(--error-light);
+
+	--container: 900px;
+}