foreground now affects text-decoration

index.html

@@ -589,12 +589,12 @@ $sizes: ('auto': auto, 0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 2.5re
 			<div class="mt-4 flex-grow-1 bg-clear shadow p-3">
 				<h3 id="font">Font Style</h3>
 				<h4>Decoration</h4>
-				<div class="inline-code">.fs-[italic|line-through|none|underline]</div>
+				<div class="inline-code">.fs-[italic|none|strike|underline]</div>
 				<br><br>
 				<div>
 					<span class="fs-italic inline-code b-1 p-2">.fs-italic</span>
-					<span class="fs-line-through inline-code b-1 p-2">.fs-line-through</span>
 					<span class="fs-none inline-code b-1 p-2">.fs-none</span>
+					<span class="fs-strike inline-code b-1 p-2">.fs-strike</span>
 					<span class="fs-underline inline-code b-1 p-2">.fs-underline</span>
 				</div>
 				<br>

package-lock.json

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

package.json

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

src/main.scss

@@ -49,9 +49,10 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100);
 
 .fix-anchor, .fix:not(.no-anchor-fix) {
 	a, a:not([href]) {
+		cursor: pointer;
 		color: var(--theme-primary);
-		&:not(:hover) { text-decoration: none; }
+		&:not(:hover):not(:focus) { text-decoration: none; }
-		&:hover { text-decoration: underline; }
+		&:hover, &:focus { text-decoration: underline; }
 	}
 }
 
@@ -78,6 +79,7 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100);
 .fix-focus, .fix:not(.no-focus-fix) {
 	* {
 		outline: inherit;
+		-webkit-tap-highlight-color: transparent;
 	}
 }
 
@@ -85,11 +87,6 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100);
 	color: var(--theme-text);
 	font-family: var(--theme-font), sans-serif;
 
-	* {
-		font-family: inherit;
-		font-size: inherit;
-	}
-
 	p, input, select, textarea, button { font-size: 1rem; }
 	h1, h2, h3, h4, h5, h6, p { margin: 0 0 0.5rem 0; }
 	h1 { font-weight: 500; font-size: 2.5rem; }
@@ -181,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
@@ -196,8 +196,8 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100);
 .fs-italic { font-style: italic !important; }
 .fs-none { font-style: normal !important; }
 .fs-lighter { font-weight: lighter !important; }
-.fs-line-through { text-decoration: line-through !important; }
 .fs-no-dec { text-decoration: none !important; }
+.fs-strike { text-decoration: line-through !important; }
 .fs-underline { text-decoration: underline !important; }
 .fs-7 { font-size: 2.5rem !important; }
 .fs-6 { font-size: 2.25rem !important; }