@oardi/css-utils 0.22.1 → 0.23.4

package/package.json

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

@@ -1,6 +1,6 @@
 .card {
 	--card-bg-color: var(--white);
-	--card-border-color: transparent;
+	--card-border-color: var(--gray-90);
 	--card-border-width: 1px;
 	--card-body-padding: 1rem;
 

package/scss/components/navbar.scss

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

package/scss/components/table.scss

@@ -0,0 +1,43 @@
+.table {
+	--table-color-type: initial;
+	--table-bg-type: initial;
+	--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
+	--table-active-color: var(--font-color);
+	--table-active-bg: rgba(var(--font-color-rgb), 0.1); // TODO
+	--table-hover-color: var(--font-color);
+	--table-hover-bg: rgba(var(--font-color-rgb), 0.075); // TODO
+	--table-border-width: 1px;
+
+	width: 100%;
+	margin-bottom: 1rem;
+	vertical-align: top;
+	border-color: var(--table-border-color);
+
+	& > thead {
+		vertical-align: bottom;
+	}
+
+	& > :not(caption) > * > * {
+		padding: 0.5rem 0.5rem;
+		color: var(--table-color-state, var(--table-color-type, var(--table-color)));
+		background-color: var(--table-bg);
+		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)));
+	}
+
+	& > tbody {
+		vertical-align: inherit;
+	}
+
+	.table-striped > tbody > tr:nth-of-type(odd) > * {
+		--table-color-type: var(--table-striped-color);
+		--table-bg-type: var(--table-striped-bg);
+	}
+}

package/scss/components.scss

@@ -10,4 +10,5 @@
 @use './components/navbar.scss';
 @use './components/overlay.scss';
 @use './components/tabs.scss';
+@use './components/table.scss';
 @use './components/toast.scss';

package/scss/reboot.scss

@@ -50,6 +50,23 @@ sup {
 
 table {
 	border-color: currentcolor;
+	caption-side: bottom;
+	border-collapse: collapse;
+
+	th {
+		text-align: -webkit-match-parent;
+	}
+}
+
+tbody,
+td,
+tfoot,
+th,
+thead,
+tr {
+	border-color: inherit;
+	border-style: solid;
+	border-width: 0;
 }
 
 button,
@@ -68,6 +85,7 @@ textarea {
 [type='submit'],
 button {
 	-webkit-appearance: button;
+	appearance: button;
 }
 
 legend {
@@ -85,6 +103,7 @@ progress {
 
 [type='search'] {
 	-webkit-appearance: textfield;
+	appearance: textfield;
 	outline-offset: -2px;
 }
 

package/scss/theme.scss

@@ -12,15 +12,15 @@ $theme: (
 		error: #ffffff,
 	),
 	grays: (
-		10: hsl(210, 10%, 10%),
-		20: hsl(210, 10%, 15%),
-		30: hsl(210, 10%, 30%),
-		40: hsl(210, 10%, 40%),
-		50: hsl(210, 10%, 50%),
-		60: hsl(210, 10%, 60%),
-		70: hsl(210, 10%, 70%),
-		80: hsl(210, 10%, 80%),
-		90: hsl(210, 10%, 90%),
+		10: hsl(0, 0%, 10%),
+		20: hsl(0, 0%, 20%),
+		30: hsl(0, 0%, 30%),
+		40: hsl(0, 0%, 40%),
+		50: hsl(0, 0%, 50%),
+		60: hsl(0, 0%, 60%),
+		70: hsl(0, 0%, 70%),
+		80: hsl(0, 0%, 80%),
+		90: hsl(0, 0%, 90%),
 	),
 	directions: (
 		t: top,

package/scss/utilities.scss

@@ -84,6 +84,12 @@
 	background-color: var(--white);
 }
 
+/**
+bg-dark (bottom -> page background),
+bg (middle),
+bg-light(top)?
+*/
+
 .img-responsive {
 	width: 100%;
 }

package/scss/variables.scss

@@ -22,7 +22,7 @@
 	--black: #000000;
 
 	--font-color: var(--gray-10);
-	--body-bg-color: #f9f9f9;
+	--body-bg-color: #ffffff;
 
 	--highlight: rgba(189, 189, 189, 0.1);
 	--border-radius: 6px;