Fixed border style

package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "@ztimson/css-utils",
-	"version": "1.2.0",
+	"version": "1.2.1",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "@ztimson/css-utils",
-			"version": "1.2.0",
+			"version": "1.2.1",
 			"license": "MIT",
 			"devDependencies": {
 				"sass": "^1.80.6"

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ztimson/css-utils",
-	"version": "1.2.0",
+	"version": "1.3.1",
 	"description": "CSS Utility Classes",
 	"readme": "README.md",
 	"scripts": {

src/main.scss

@@ -16,6 +16,7 @@
 	--theme-white: white;
 
 	// Misc
+	--theme-border: black;
 	--theme-animation: 0.2s linear; // Animation style
 	--theme-content-width: 1100px; // Max width of clamped content
 	--theme-font: Arial, sans-serif;
@@ -110,7 +111,6 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100);
 // Clamp (Restrict page width for large screens)
 .clamp { width: min(var(--theme-content-width), calc(100% - map.get($sizes, 3))); }
 
-
 // Utilities ================================================================================================
 
 // Anchor
@@ -153,7 +153,7 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100);
 .bg-black { background-color: var(--theme-black) !important; }
 .bg-white { background-color: var(--theme-white) !important; }
 .bg-transparent { background-color: transparent !important; }
-.bg-clear {
+.bg-container {
 	background-color: var(--theme-clear) !important;
 	color: var(--theme-text) !important;
 }
@@ -178,7 +178,10 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100);
 
 // Colors - Foreground
 @each $color in ('black', 'clear', 'white', 'text', 'primary', 'accent', 'info', 'success', 'warn', 'danger', 'muted') {
-	.fg-#{$color} { color: var(--theme-#{$color}) !important; }
+	.fg-#{$color} {
+		color: var(--theme-#{$color}) !important;
+		text-decoration-color: var(--theme-#{$color}) !important;
+	}
 }
 
 // Cursors
@@ -397,7 +400,7 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100);
 	.hidden#{$bp} {  visibility: hidden !important; }
 
 	@each $s, $size in $sizes {
-		.b#{$bp}-#{$s} { border: #{$s}px solid var(--theme-muted) !important; } // Border
+		.b#{$bp}-#{$s} { border: #{$s}px solid var(--theme-border) !important; } // Border
 		.m#{$bp}-#{$s} { margin: $size !important; } // Margin
 		.p#{$bp}-#{$s} { padding: $size !important; } // Padding
 		.mx#{$bp}-#{$s} { // Margin
@@ -424,7 +427,7 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100);
 		.m#{$d}#{$bp}-auto { margin-#{$dir}: auto !important; } // Margin
 
 		@each $s, $size in $sizes {
-			.b#{$d}#{$bp}-#{$s} { border-#{$dir}: #{$s}px solid var(--theme-muted) !important; } // Border
+			.b#{$d}#{$bp}-#{$s} { border-#{$dir}: #{$s}px solid var(--theme-border) !important; } // Border
 			.m#{$d}#{$bp}-#{$s} { margin-#{$dir}: $size !important; } // Margin
 			.p#{$d}#{$bp}-#{$s} { padding-#{$dir}: $size !important; } // Padding
 		}