@oardi/css-utils 0.23.4 → 0.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oardi/css-utils",
-	"version": "0.23.4",
+	"version": "0.24.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/scss/components/breadcrumb.scss

@@ -5,8 +5,6 @@
 	--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);
@@ -17,7 +15,6 @@
 	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 {

package/scss/components/card.scss

@@ -1,17 +1,11 @@
 .card {
-	--card-bg-color: var(--white);
-	--card-border-color: var(--gray-90);
 	--card-border-width: 1px;
 	--card-body-padding: 1rem;
 
-	background-color: var(--card-bg-color);
-	border: var(--card-border-width) solid var(--card-border-color);
+	background-color: var(--card-bg-color, var(--bg-surface));
+	border: var(--card-border-width) solid var(--card-border-color, var(--border-color));
 	border-radius: var(--border-radius);
 
-	.card-title {
-		// font-weight: bold;
-	}
-
 	.card-title + * {
 		margin-top: 1rem;
 	}

package/scss/components/chip.scss

@@ -3,10 +3,9 @@
 
 .chip-base {
 	--chip-label-padding: 0 7px;
-	--chip-border-width: 2px;
 	--chip-text-highlight: var(--gray-90);
+	--chip-border-width: 2px;
 	--chip-border-radius: 16px;
-	--chip-disabled-bg-color: var(--gray-80);
 
 	display: inline-flex;
 	border-width: var(--button-border-width);
@@ -23,9 +22,11 @@
 		text-decoration: none;
 	}
 
-	&[data-disabled]:hover,
-	[data-disabled]:focus {
+	&.disabled:hover,
+	.disabled:focus {
 		cursor: not-allowed;
+		// background-color: var(--chip-disabled-bg-color, var(--bg-surface));
+		// border-color: var(--chip-border-color, var(--border-color));
 	}
 }
 
@@ -40,13 +41,13 @@
 		border-color: var(--button-text-highlight);
 	}
 
-	&[data-disabled],
-	&[data-disabled]:hover,
+	&.disabled,
+	&.disabled:hover,
 	&[active]:hover {
 		color: var(--gray-30);
 		outline: 0;
-		background-color: var(--button-disabled-bg-color);
-		border-color: var(--button-disabled-bg-color);
+		background-color: var(--disabled-bg-color);
+		border-color: var(--disabled-border-color);
 	}
 
 	.chip-label {

package/scss/components/drawer.scss

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

package/scss/components/expansion-panel.scss

@@ -4,17 +4,13 @@
 	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: 1px solid var(--expansion-panel-border-color, var(--border-color));
 		border-radius: var(--border-radius);
-		background-color: var(--expansion-panel-header-bg-color);
+		background-color: var(--expansion-panel-header-bg-color, var(--bg-surface));
 		transition: all 0.3s ease;
 
 		&:focus {
@@ -55,7 +51,7 @@
 		}
 
 		.expansion-panel-content {
-			background-color: var(--expansion-panel-content-bg-color);
+			background-color: var(--expansion-panel-content-bg-color, var(--bg-surface));
 			border-bottom-left-radius: var(--border-radius);
 			border-bottom-right-radius: var(--border-radius);
 

package/scss/components/form.scss

@@ -1,7 +1,5 @@
 .form-control {
-	--input-bg-color: #ffffff;
 	--input-border-width: 1px;
-	--input-border-color: var(--gray-80);
 
 	display: block;
 	width: 100%;
@@ -13,14 +11,14 @@
 	-moz-appearance: none;
 	appearance: none;
 	color: var(--font-color);
-	background-color: var(--input-bg-color);
+	background-color: var(--input-bg-color, var(--bg-surface));
 	background-clip: padding-box;
-	border: var(--input-border-width) solid var(--input-border-color);
+	border: var(--input-border-width) solid var(--input-border-color, var(--border-color));
 	border-radius: var(--border-radius);
 	transition: transform 0.2s ease;
 
 	&:focus {
-		background-color: var(--input-bg-color);
+		background-color: var(--input-bg-color, var(--bg-surface));
 		border-color: var(--primary-dark);
 		outline: var(--focus-outline);
 		outline-offset: var(--focus-offset);
@@ -41,7 +39,8 @@
 	&[disabled]:focus {
 		cursor: not-allowed;
 		outline: 0;
-		background-color: var(--gray-90);
+		background-color: var(--disabled-bg-color);
+		border-color: var(--disabled-border-color);
 	}
 
 	&::placeholder {
@@ -54,9 +53,7 @@ textarea.form-control {
 }
 
 .form-check {
-	--input-bg-color: #ffffff;
 	--input-border-width: 1px;
-	--input-border-color: var(--gray-80);
 
 	display: flex;
 	flex-direction: row;
@@ -69,10 +66,10 @@ textarea.form-control {
 		-webkit-appearance: none;
 		width: 16px;
 		height: 16px;
-		border: var(--input-border-width) solid var(--input-border-color);
+		border: var(--input-border-width) solid var(--input-border-color, var(--border-color));
 		border-radius: 4px;
 		position: relative;
-		background-color: var(--input-bg-color);
+		background-color: var(--input-bg-color, var(--bg-surface));
 		cursor: pointer;
 		transition: transform 0.2s ease;
 
@@ -117,6 +114,7 @@ textarea.form-control {
 			cursor: not-allowed;
 			outline: 0;
 			background-color: var(--gray-90);
+			border-color: var(--disabled-border-color);
 		}
 	}
 

package/scss/components/list.scss

@@ -1,17 +1,14 @@
 .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);
 
-	border: var(--list-border-width) solid var(--list-border-color);
+	border: var(--list-border-width) solid var(--list-border-color, var(--border-color));
 	padding: var(--list-padding);
 	list-style-type: none;
 
 	.list-item {
-		background-color: var(--list-item-bg-color);
+		background-color: var(--list-item-bg-color, var(--bg-surface));
 		color: var(--font-color);
 		min-height: 1px;
 		padding: var(--list-item-padding);

package/scss/components/navbar.scss

@@ -1,14 +1,11 @@
 .navbar {
-	--nav-bg-color: #ffffff;
-	--nav-border-bottom: var(--gray-90);
-
 	padding-top: 0.6rem;
 	padding-bottom: 0.6rem;
-	background-color: var(--nav-bg-color);
+	background-color: var(--nav-bg-color, var(--bg-surface));
 	min-height: 60px;
 	display: flex;
 	align-items: center;
-	border-bottom: 1px solid var(--nav-border-bottom);
+	border-bottom: 1px solid var(--nav-border-bottom, var(--border-color));
 }
 
 .navbar .logo:hover {

package/scss/components/table.scss

@@ -4,8 +4,6 @@
 	--table-color-state: initial;
 	--table-bg-state: initial;
 	--table-color: var(--font-color);
-	--table-bg: var(--body-bg-color);
-	--table-border-color: var(--gray-80);
 	--table-accent-bg: transparent;
 	--table-striped-color: var(--font-color);
 	--table-striped-bg: rgba(var(--font-color-rgb), 0.05); // TODO
@@ -18,7 +16,7 @@
 	width: 100%;
 	margin-bottom: 1rem;
 	vertical-align: top;
-	border-color: var(--table-border-color);
+	border-color: var(--table-border-color, --border-color);
 
 	& > thead {
 		vertical-align: bottom;
@@ -27,7 +25,7 @@
 	& > :not(caption) > * > * {
 		padding: 0.5rem 0.5rem;
 		color: var(--table-color-state, var(--table-color-type, var(--table-color)));
-		background-color: var(--table-bg);
+		background-color: var(--table-bg, var(--bg-surface));
 		border-bottom-width: var(--table-border-width);
 		box-shadow: inset 0 0 0 9999px var(--table-bg-state, var(--table-bg-type, var(--table-accent-bg)));
 	}

package/scss/components/tabs.scss

@@ -1,8 +1,5 @@
 .tabs {
 	--tab-highlight: var(--highlight);
-	--tab-bg-color: var(--white);
-	--tab-content-bg-color: var(--white);
-	--tab-border-color: var(--gray-80);
 
 	display: flex;
 	cursor: pointer;
@@ -12,11 +9,11 @@
 
 	.tab {
 		color: var(--font-color);
-		background-color: var(--tab-bg-color);
+		background-color: var(--tab-bg-color, var(--bg-surface));
 		text-align: center;
 
 		padding: 16px 20px;
-		border-bottom: 3px solid var(--tab-border-color);
+		border-bottom: 3px solid var(--tab-border-color, var(--border-color));
 		flex: 1 0 auto;
 
 		transition: all 0.3s ease;
@@ -43,7 +40,7 @@
 .tab-content {
 	display: none;
 	padding: 20px;
-	background-color: var(--tab-content-bg-color);
+	background-color: var(--tab-content-bg-color, var(--bg-surface));
 
 	transition: all 0.3s ease;
 

package/scss/reboot.scss

@@ -1,6 +1,8 @@
 *,
 ::after,
 ::before {
+	margin: 0;
+	padding: 0;
 	box-sizing: border-box;
 }
 

package/scss/utilities.scss

@@ -166,6 +166,10 @@ bg-light(top)?
 	height: 100%;
 }
 
+.border-0 {
+	border: 0 !important;
+}
+
 // width, height, display with breakpoints and directions
 @each $bp, $bp-value in map.get(theme.$theme, breakpoints) {
 	@media (min-width: #{$bp-value}) {

package/scss/variables.scss

@@ -21,12 +21,18 @@
 	--white: #ffffff;
 	--black: #000000;
 
+	--bg-surface: var(--white);
+
 	--font-color: var(--gray-10);
 	--body-bg-color: #ffffff;
 
 	--highlight: rgba(189, 189, 189, 0.1);
+	--border-color: var(--gray-90);
 	--border-radius: 6px;
 
+	--disabled-bg-color: var(--gray-80);
+	--disabled-border-color: var(--gray-80);
+
 	--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.025);