@oardi/css-utils 0.20.0 → 0.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oardi/css-utils",
-	"version": "0.20.0",
+	"version": "0.22.0",
 	"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

@@ -16,7 +16,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';

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;
@@ -72,7 +70,7 @@
 		}
 
 		&:focus {
-			outline: 3px solid var(--#{$name}-light);
+			outline: 2px solid var(--#{$name}-light);
 		}
 	}
 
@@ -90,7 +88,7 @@
 
 		&:focus {
 			color: var(--on-#{$name});
-			outline: 3px solid var(--#{$name}-light);
+			outline: 2px solid var(--#{$name}-light);
 			background-color: var(--#{$name});
 		}
 	}
@@ -99,7 +97,7 @@
 		color: var(--#{$name});
 
 		&:focus {
-			outline: 3px solid var(--#{$name}-light);
+			outline: 2px solid var(--#{$name}-light);
 		}
 	}
 }

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,6 @@
-:root {
+.drawer {
 	--drawer-bg-color: #ffffff;
-}
 
-.drawer {
 	display: flex;
 	flex-direction: column;
 	position: fixed;

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;
@@ -85,7 +83,7 @@ $sizes: (
 		&:hover,
 		&:active,
 		&:focus {
-			outline: 3px solid var(--#{$name}-light);
+			outline: 2px solid var(--#{$name}-light);
 			color: var(--on-#{$name});
 		}
 
@@ -105,12 +103,11 @@ $sizes: (
 		color: var(--on-#{$name});
 		fill: var(--on-#{$name});
 		background-color: var(--#{$name});
-		box-shadow: 0 0 0 0.2rem transparent;
 
 		&:hover,
 		&:active,
 		&:focus {
-			--focus-outline: 3px solid var(--#{$name}-light);
+			outline: 2px solid var(--#{$name}-light);
 			background-color: var(--#{$name}-dark);
 		}
 

package/scss/components/list.scss

@@ -1,19 +1,17 @@
-:root {
-	--list-bg-color: var(--white);
+.list {
 	--list-border-color: transparent;
-	// --list-item-hover-bg-color: var(--highlight);
 	--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 {
-	background-color: var(--list-bg-color);
 	border: var(--list-border-width) solid var(--list-border-color);
 	padding: var(--list-padding);
 	list-style-type: none;
 
 	.list-item {
+		background-color: var(--list-item-bg-color);
 		color: var(--font-color);
 		min-height: 1px;
 		padding: var(--list-item-padding);
@@ -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,8 @@
-:root {
+.tabs {
 	--tab-highlight: var(--highlight);
 	--tab-bg-color: var(--white);
 	--tab-content-bg-color: var(--white);
-}
 
-.tabs {
 	display: flex;
 	cursor: pointer;
 	-webkit-tap-highlight-color: transparent;
@@ -20,6 +18,8 @@
 		border-bottom: 3px solid var(--gray-80);
 		flex: 1 0 auto;
 
+		transition: all 0.3s ease;
+
 		&.active {
 			color: var(--primary);
 			border-bottom: 3px solid var(--primary);
@@ -44,6 +44,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/flex-responsive.scss

@@ -1,10 +1,6 @@
 @use 'sass:map';
 @use './theme.scss';
 
-// TODO
-// add responsive classes for
-// d-flex, d-inline-flex
-
 @each $bp, $bp-value in map.get(theme.$theme, breakpoints) {
 	@media (min-width: #{$bp-value}) {
 		@each $key, $value in map.get(theme.$theme, spacings) {

package/scss/index.scss

@@ -1,5 +1,6 @@
 @use './theme.scss';
 @use './variables.scss';
+@use './reboot.scss';
 @use './typography.scss';
 @use './utilities.scss';
 @use './spacings.scss';

package/scss/reboot.scss

@@ -0,0 +1,106 @@
+*,
+::after,
+::before {
+	box-sizing: border-box;
+}
+
+html {
+	font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+	line-height: 1.15;
+	-webkit-text-size-adjust: 100%;
+	tab-size: 4;
+}
+
+body {
+	margin: 0;
+}
+
+b,
+strong {
+	font-weight: bolder;
+}
+
+code,
+kbd,
+pre,
+samp {
+	font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
+	font-size: 1em;
+}
+
+small {
+	font-size: 80%;
+}
+
+sub,
+sup {
+	font-size: 75%;
+	line-height: 0;
+	position: relative;
+	vertical-align: baseline;
+}
+
+sub {
+	bottom: -0.25em;
+}
+
+sup {
+	top: -0.5em;
+}
+
+table {
+	border-color: currentcolor;
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+	font-family: inherit;
+	font-size: 100%;
+	line-height: 1.15;
+	margin: 0;
+}
+
+[type='button'],
+[type='reset'],
+[type='submit'],
+button {
+	-webkit-appearance: button;
+}
+
+legend {
+	padding: 0;
+}
+
+progress {
+	vertical-align: baseline;
+}
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+	height: auto;
+}
+
+[type='search'] {
+	-webkit-appearance: textfield;
+	outline-offset: -2px;
+}
+
+::-webkit-search-decoration {
+	-webkit-appearance: none;
+}
+
+::-webkit-file-upload-button {
+	-webkit-appearance: button;
+	font: inherit;
+}
+
+summary {
+	display: list-item;
+}
+
+ul {
+	padding-left: 1rem;
+}

package/scss/typography.scss

@@ -22,7 +22,7 @@ h3,
 h4,
 h5,
 h6 {
-	margin: 0 0 0.5rem 0;
+	margin: 0 0 0.75rem 0;
 	line-height: 1.2;
 }
 

package/scss/variables.scss

@@ -3,12 +3,6 @@
 @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};
@@ -24,19 +18,22 @@
 		--gray-#{$name}: #{$value};
 	}
 
+	--white: #ffffff;
+	--black: #000000;
+
+	--font-color: var(--gray-10);
+	--body-bg-color: #f9f9f9;
+
 	--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);
+	--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;
-}