@oardi/css-utils 0.21.0 → 0.22.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oardi/css-utils",
-	"version": "0.21.0",
+	"version": "0.22.1",
 	"author": "Ardian Shala",
 	"homepage": "https://css-utils.oardi.com",
 	"description": "Powerful set of semantic css classes with support for breakpoints, directions and spacings",

package/readme.md

@@ -4,7 +4,8 @@ Powerful set of CSS Utility classes for Colors, Typography, Spacings, Flex and C
 
 ## Showcase
 
-Browse the Showcase [here](https://css-utils.oardi.com/)
+- Browse the Showcase [here](https://css-utils.oardi.com/)
+- Stackblitz Demo [here](https://stackblitz.com/edit/oardi-css-utils/)
 
 ## Setup
 
@@ -16,7 +17,7 @@ npm i @oardi/css-utils
 
 ### Import SCSS files
 
-This will import the theme with all utility classes and their responsive classes as well as predefined components. This will result in a bundle size around 44kb.
+This will import the theme with all utility classes and their responsive classes as well as predefined components.
 
 ```scss
 @use '@oardi/css-utilss/scss/index.scss';
@@ -32,7 +33,7 @@ This will import the theme with all utility classes and their responsive classes
 This will render a centered text:
 
 <div class="text-center">
-	some text
+	some text centered
 </div>
 
 ### Use predefined component classes

package/scss/components/breadcrumb.scss

@@ -0,0 +1,39 @@
+@use 'sass:map';
+@use '../theme.scss';
+
+.breadcrumb {
+	--breadcrumb-padding-x: 0;
+	--breadcrumb-padding-y: 0;
+	--breadcrumb-margin-bottom: 1rem;
+	--breadcrumb-bg: ;
+	--breadcrumb-border-radius: ;
+	--breadcrumb-divider-color: var(--secondary);
+	--breadcrumb-item-padding-x: 0.5rem;
+	--breadcrumb-item-active-color: var(--secondary);
+
+	display: flex;
+	flex-wrap: wrap;
+	padding: var(--breadcrumb-padding-y) var(--breadcrumb-padding-x);
+	margin-bottom: var(--breadcrumb-margin-bottom);
+	font-size: var(--breadcrumb-font-size);
+	list-style: none;
+	background-color: var(--breadcrumb-bg);
+	border-radius: var(--breadcrumb-border-radius);
+
+	.breadcrumb-item {
+		&.active {
+			color: var(--breadcrumb-item-active-color);
+		}
+
+		& + .breadcrumb-item {
+			padding-left: var(--breadcrumb-item-padding-x);
+
+			&::before {
+				float: left;
+				padding-right: var(--breadcrumb-item-padding-x);
+				color: var(--breadcrumb-divider-color);
+				content: var(--breadcrumb-divider, '/');
+			}
+		}
+	}
+}

package/scss/components/button.scss

@@ -1,15 +1,13 @@
 @use 'sass:map';
 @use '../theme.scss' as theme;
 
-:root {
+.btn-base {
 	--button-padding: 5px 14px;
 	--button-border-width: 2px;
 	--button-text-highlight: var(--gray-90);
 	--button-icon-highlight: var(--gray-90);
 	--button-disabled-bg-color: var(--gray-80);
-}
 
-.btn-base {
 	border-width: var(--button-border-width);
 	border-style: solid;
 	background-color: transparent;

package/scss/components/card.scss

@@ -1,11 +1,9 @@
-:root {
+.card {
 	--card-bg-color: var(--white);
 	--card-border-color: transparent;
 	--card-border-width: 1px;
 	--card-body-padding: 1rem;
-}
 
-.card {
 	background-color: var(--card-bg-color);
 	border: var(--card-border-width) solid var(--card-border-color);
 	border-radius: var(--border-radius);

package/scss/components/chip.scss

@@ -1,15 +1,13 @@
 @use 'sass:map';
 @use '../theme.scss';
 
-:root {
+.chip-base {
 	--chip-label-padding: 0 7px;
 	--chip-border-width: 2px;
 	--chip-text-highlight: var(--gray-90);
 	--chip-border-radius: 16px;
 	--chip-disabled-bg-color: var(--gray-80);
-}
 
-.chip-base {
 	display: inline-flex;
 	border-width: var(--button-border-width);
 	border-style: solid;
@@ -70,10 +68,6 @@
 			background-color: var(--#{$name}-dark);
 			border-color: var(--#{$name}-dark);
 		}
-
-		// &:focus {
-		// 	box-shadow: 0 0 0 0.2rem var(--#{$name}-light);
-		// }
 	}
 
 	.chip-#{$name}-outline {
@@ -87,9 +81,5 @@
 			background-color: var(--#{$name}-dark);
 			border-color: var(--#{$name}-dark);
 		}
-
-		// &:focus {
-		// 	box-shadow: 0 0 0 0.2rem var(--#{$name}-light);
-		// }
 	}
 }

package/scss/components/drawer.scss

@@ -1,8 +1,7 @@
-:root {
+.drawer {
 	--drawer-bg-color: #ffffff;
-}
+	--drawer-border-right-color: var(--gray-90);
 
-.drawer {
 	display: flex;
 	flex-direction: column;
 	position: fixed;
@@ -11,9 +10,9 @@
 	height: 100dvh;
 	width: min(20rem, 100%);
 	z-index: 1045;
-	border-right: 2px solid var(--gray-90);
+	border-right: 2px solid var(--drawer-border-right-color);
 	justify-content: start;
-	background-color: var(--white);
+	background-color: var(--drawer-bg-color);
 	transition: left 250ms ease-out;
 
 	&.open ~ .overlay {

package/scss/components/expansion-panel.scss

@@ -1,18 +1,16 @@
-:root {
-	--expansion-panel-border-color: var(--gray-90);
-	--expansion-panel-header-bg-color: #ffffff;
-	--expansion-panel-content-bg-color: #ffffff;
-	--expansion-panel-header-hover-bg-color: var(--highlight);
-	--expansion-panel-header-padding: 1.25rem 2.5rem 1.25rem 1.25rem;
-	--expansion-panel-inner-padding: 1.25rem;
-}
-
 .expansion-panel-container {
 	display: flex;
 	flex-direction: column;
 	gap: 0.5rem;
 
 	.expansion-panel {
+		--expansion-panel-border-color: var(--gray-90);
+		--expansion-panel-header-bg-color: #ffffff;
+		--expansion-panel-content-bg-color: #ffffff;
+		--expansion-panel-header-hover-bg-color: var(--highlight);
+		--expansion-panel-header-padding: 1.25rem 2.5rem 1.25rem 1.25rem;
+		--expansion-panel-inner-padding: 1.25rem;
+
 		color: var(--font-color);
 		border: 1px solid var(--expansion-panel-border-color);
 		border-radius: var(--border-radius);

package/scss/components/form.scss

@@ -1,10 +1,8 @@
-:root {
+.form-control {
 	--input-bg-color: #ffffff;
 	--input-border-width: 1px;
 	--input-border-color: var(--gray-80);
-}
 
-.form-control {
 	display: block;
 	width: 100%;
 	padding: 0.375rem 0.75rem;
@@ -56,6 +54,10 @@ textarea.form-control {
 }
 
 .form-check {
+	--input-bg-color: #ffffff;
+	--input-border-width: 1px;
+	--input-border-color: var(--gray-80);
+
 	display: flex;
 	flex-direction: row;
 	align-items: center;

package/scss/components/icon-button.scss

@@ -8,14 +8,12 @@ $sizes: (
 	lg: 44px,
 );
 
-:root {
+.icon-btn {
 	--icon-button-padding: 0.25rem;
 	--icon-button-border-width: 2px;
 	--icon-button-highlight: var(--gray-90);
 	--icon-button-disabled-bg-color: none;
-}
 
-.icon-btn {
 	fill: var(--font-color);
 	padding: var(--icon-button-padding);
 	min-width: 40px;

package/scss/components/list.scss

@@ -1,13 +1,11 @@
-:root {
+.list {
 	--list-border-color: transparent;
 	--list-border-width: 1px;
 	--list-padding: 0rem;
 	--list-item-padding: 1rem;
 	--list-item-bg-color: var(--white);
 	// --list-item-hover-bg-color: var(--highlight);
-}
 
-.list {
 	border: var(--list-border-width) solid var(--list-border-color);
 	padding: var(--list-padding);
 	list-style-type: none;
@@ -24,7 +22,6 @@
 		&.is-active,
 		&:hover {
 			cursor: pointer;
-			// background-color: var(--list-item-hover-bg-color);
 			color: var(--primary);
 			fill: var(--primary);
 			text-decoration: none;

package/scss/components/navbar.scss

@@ -0,0 +1,15 @@
+.navbar {
+	--nav-bg-color: #ffffff;
+
+	padding-top: 0.6rem;
+	padding-bottom: 0.6rem;
+	background-color: var(--nav-bg-color);
+	min-height: 60px;
+	display: flex;
+	align-items: center;
+}
+
+.navbar .logo:hover {
+	text-decoration: none;
+	color: var(--primary-dark);
+}

package/scss/components/tabs.scss

@@ -1,10 +1,9 @@
-:root {
+.tabs {
 	--tab-highlight: var(--highlight);
 	--tab-bg-color: var(--white);
 	--tab-content-bg-color: var(--white);
-}
+	--tab-border-color: var(--gray-80);
 
-.tabs {
 	display: flex;
 	cursor: pointer;
 	-webkit-tap-highlight-color: transparent;
@@ -17,9 +16,11 @@
 		text-align: center;
 
 		padding: 16px 20px;
-		border-bottom: 3px solid var(--gray-80);
+		border-bottom: 3px solid var(--tab-border-color);
 		flex: 1 0 auto;
 
+		transition: all 0.3s ease;
+
 		&.active {
 			color: var(--primary);
 			border-bottom: 3px solid var(--primary);
@@ -44,6 +45,8 @@
 	padding: 20px;
 	background-color: var(--tab-content-bg-color);
 
+	transition: all 0.3s ease;
+
 	&.active {
 		display: block;
 	}

package/scss/components.scss

@@ -1,3 +1,4 @@
+@use './components/breadcrumb.scss';
 @use './components/button.scss';
 @use './components/card.scss';
 @use './components/chip.scss';
@@ -6,7 +7,7 @@
 @use './components/form.scss';
 @use './components/icon-button.scss';
 @use './components/list.scss';
-@use './components/nav.scss';
+@use './components/navbar.scss';
 @use './components/overlay.scss';
 @use './components/tabs.scss';
 @use './components/toast.scss';

package/scss/variables.scss

@@ -29,11 +29,11 @@
 
 	--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);
+	--shadow-light: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.025);
 
 	--focus-outline: 2px solid var(--primary-light);
 	--focus-outline-error: 2px solid var(--error-light);
 	--focus-offset: -2px;
 
-	--container: 780px;
+	--container: 900px;
 }

package/scss/components/nav.scss

@@ -1,61 +0,0 @@
-:root {
-	--nav-bg-color: #ffffff;
-}
-
-nav {
-	padding-top: 0.6rem;
-	padding-bottom: 0.6rem;
-	background-color: var(--nav-bg-color);
-	min-height: 60px;
-	display: flex;
-	align-items: center;
-}
-
-nav .logo:hover {
-	text-decoration: none;
-	color: var(--primary-dark);
-}
-
-nav .nav-open,
-nav .nav-close {
-	display: none;
-	border: none;
-}
-
-nav .nav-open svg,
-nav .nav-close svg {
-	height: 20px;
-}
-
-nav .nav-open:hover,
-nav .nav-close:hover {
-	background-color: var(--gray-90);
-}
-
-nav .menu {
-	background-color: var(--white);
-}
-
-nav .menu ul {
-	display: flex;
-	align-items: center;
-	list-style: none;
-}
-
-nav .menu ul li {
-	display: flex;
-	border-radius: var(--border-radius);
-}
-
-nav .menu ul li:hover {
-	background-color: var(--gray-90);
-}
-
-nav .menu ul li:hover a {
-	color: var(--primary-dark);
-}
-
-nav .menu ul li a {
-	padding: 0.75rem 0.75rem;
-	text-decoration: none;
-}