@oardi/css-utils 0.39.2 → 0.40.1

package/package.json

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

@@ -1,13 +1,12 @@
 @use 'sass:map';
-@use '../theme.scss';
 
 .breadcrumb {
 	--breadcrumb-padding-x: 0;
 	--breadcrumb-padding-y: 0;
 	--breadcrumb-margin-bottom: var(--spacer-3);
-	--breadcrumb-divider-color: var(--secondary);
+	--breadcrumb-divider-color: var(--text-subtle);
 	--breadcrumb-item-padding-x: var(--spacer-2);
-	--breadcrumb-item-active-color: var(--secondary);
+	--breadcrumb-item-active-color: var(--font-color-muted);
 
 	display: flex;
 	flex-wrap: wrap;

package/scss/components/card.scss

@@ -1,12 +1,10 @@
-@use '../spacings.scss';
-
 .card {
 	--card-body-padding: var(--spacer-3);
 	--card-bg-color: var(--bg-surface);
 	--card-border-width: var(--border-width);
 	--card-border-color: var(--border-color);
 	--card-border-radius: var(--border-radius);
-	--card-bg-hover-color: var(--gray-900);
+	--card-bg-hover-color: var(--gray-50);
 	--card-title-spacer-y: var(--spacer-2);
 
 	background-color: var(--card-bg-color);
@@ -15,7 +13,7 @@
 
 	&.is-hoverable:hover {
 		background-color: var(--card-bg-hover-color);
-		cursor: pointer;
+		box-shadow: var(--shadow-sm);
 	}
 
 	.card-title {
@@ -23,7 +21,7 @@
 	}
 
 	.card-subtitle {
-		color: var(--gray-500);
+		color: var(--gray-700);
 		margin-top: calc(-0.5 * var(--card-title-spacer-y));
 		margin-bottom: var(--card-title-spacer-y);
 	}

package/scss/components/icon-button.scss

@@ -76,6 +76,7 @@ $sizes: (
 		outline: var(--icon-button-focus-outline-width) var(--icon-button-focus-outline-style)
 			var(--icon-button-focus-outline-color);
 		outline-offset: var(--focus-offset);
+		background-color: var(--icon-button-highlight, var(--highlight));
 	}
 }
 

package/scss/components/list.scss

@@ -14,7 +14,7 @@
 		min-height: 1px;
 		padding: var(--list-item-padding);
 		display: flex;
-		align-items: start;
+		align-items: center;
 		gap: var(--spacer-2);
 
 		&.is-active,

package/scss/components/overlay.scss

@@ -1,5 +1,7 @@
 .overlay {
-	background: rgba(0, 0, 0, 0.5);
+	--overlay-highlight: var(--highlight);
+
+	background: var(--overlay-highlight);
 	position: fixed;
 	inset: 0;
 	z-index: 1040;

package/scss/theme.scss

@@ -48,25 +48,25 @@ $default-theme: (
 		),
 	),
 	grays: (
-		50: hsl(0, 0%, 5%),
-		100: hsl(0, 0%, 10%),
-		150: hsl(0, 0%, 15%),
-		200: hsl(0, 0%, 20%),
-		250: hsl(0, 0%, 25%),
-		300: hsl(0, 0%, 30%),
-		350: hsl(0, 0%, 35%),
-		400: hsl(0, 0%, 40%),
-		450: hsl(0, 0%, 45%),
+		50: hsl(0, 0%, 95%),
+		100: hsl(0, 0%, 90%),
+		150: hsl(0, 0%, 85%),
+		200: hsl(0, 0%, 80%),
+		250: hsl(0, 0%, 75%),
+		300: hsl(0, 0%, 70%),
+		350: hsl(0, 0%, 65%),
+		400: hsl(0, 0%, 60%),
+		450: hsl(0, 0%, 55%),
 		500: hsl(0, 0%, 50%),
-		550: hsl(0, 0%, 55%),
-		600: hsl(0, 0%, 60%),
-		650: hsl(0, 0%, 65%),
-		700: hsl(0, 0%, 70%),
-		750: hsl(0, 0%, 75%),
-		800: hsl(0, 0%, 80%),
-		850: hsl(0, 0%, 85%),
-		900: hsl(0, 0%, 90%),
-		950: hsl(0, 0%, 95%),
+		550: hsl(0, 0%, 45%),
+		600: hsl(0, 0%, 40%),
+		650: hsl(0, 0%, 35%),
+		700: hsl(0, 0%, 30%),
+		750: hsl(0, 0%, 25%),
+		800: hsl(0, 0%, 20%),
+		850: hsl(0, 0%, 15%),
+		900: hsl(0, 0%, 10%),
+		950: hsl(0, 0%, 5%),
 	),
 	directions: (
 		t: top,

package/scss/utilities.scss

@@ -17,7 +17,6 @@
 	width: 100%;
 }
 
-// add responsive
 .text-center {
 	text-align: center !important;
 }
@@ -38,6 +37,22 @@
 	color: var(--black) !important;
 }
 
+.text-body {
+	color: var(--font-color);
+}
+
+.text-muted {
+	color: var(--font-color-muted);
+}
+
+.text-subtle {
+	color: var(--font-color-subtle);
+}
+
+.text-inherit {
+	color: inherit;
+}
+
 .bg-opacity-10 {
 	--bg-opacity: 0.1 !important;
 }
@@ -69,8 +84,8 @@
 
 @each $name, $value in map.get(theme.$theme, grays) {
 	.text-gray-#{$name} {
-		color: var(--gray-#{$name}) !important;
-		fill: var(--gray-#{$name}) !important;
+		color: var(--gray-#{$name});
+		fill: var(--gray-#{$name});
 	}
 
 	.bg-gray-#{$name} {

package/scss/variables.scss

@@ -31,19 +31,25 @@
 		--spacer-#{$name}: #{$value};
 	}
 
+	--body-bg-color: var(--gray-50);
+
 	--bg-surface: var(--white);
-	--body-bg-color: var(--white);
-	--font-color: var(--gray-100);
+	--bg-surface-hover: var(--gray-50);
+	--bg-surface-active: var(--gray-100);
+
+	--font-color: var(--gray-900);
+	--font-color-muted: var(--gray-500);
+	--font-color-subtle: var(--gray-400);
 
-	--highlight: rgba(0, 0, 0, 0.08);
+	--highlight: rgba(0, 0, 0, 0.15);
 
 	--border-width: 1px;
-	--border-color: var(--gray-900);
+	--border-color: var(--gray-100);
 	--border-radius: 8px;
 
 	--disabled-font-color: var(--gray-600);
-	--disabled-bg-color: var(--gray-800);
-	--disabled-border-color: var(--gray-850);
+	--disabled-bg-color: var(--gray-300);
+	--disabled-border-color: var(--gray-50);
 
 	--shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
 	--shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.15);