@oardi/css-utils 0.39.1 → 0.40.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oardi/css-utils",
-	"version": "0.39.1",
+	"version": "0.40.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,9 +5,9 @@
 	--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

@@ -6,7 +6,7 @@
 	--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 +15,7 @@
 
 	&.is-hoverable:hover {
 		background-color: var(--card-bg-hover-color);
-		cursor: pointer;
+		box-shadow: var(--shadow-sm);
 	}
 
 	.card-title {
@@ -23,7 +23,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/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);
 
 	--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);
@@ -51,9 +57,9 @@
 
 	--focus-outline-color: rgba(var(--primary-rgb), 0.5);
 	--focus-outline-style: solid;
-	--focus-outline-width: 2px;
+	--focus-outline-width: 2.5px;
 	// create focus outline for every theme color
-	--focus-outline-error: var(--focus-outline-width) var(focus-outline-style) rgba(var(--error-rgb), 0.5);
+	--focus-outline-error: var(--focus-outline-width) var(--focus-outline-style) rgba(var(--error-rgb), 0.5);
 	--focus-offset: 0px;
 
 	--container: 900px;