Remove highlight with fix-focus

package-lock.json

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

package.json

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

src/main.scss

@@ -47,30 +47,22 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100);
 
 // Optional opinionated styling to clean up CSS defaults
 
-.fix-anchor, .fix {
+.fix-anchor, .fix:not(.no-anchor-fix) {
 	a, a:not([href]) {
 		color: var(--theme-primary);
 		&:not(:hover) { text-decoration: none; }
 		&:hover { text-decoration: underline; }
+		cursor: pointer;
 	}
 }
 
-.fix-button, .fix {
+.fix-button, .fix:not(.no-button-fix) {
 	button:not(:disabled) {
 		cursor: pointer;
 	}
 }
 
-.fix-code code, code.fix {
-	display: block;
-	white-space: pre;
-	font-family: monospace;
-	background: rgb(30, 30, 30);
-	color: #00cb00;
-	overflow: auto;
-}
-
-.fix-dom, .fix {
+.fix-dom, .fix:not(.no-dom-fix) {
 	&, html, body {
 		height: 100%;
 		width: 100%;
@@ -81,29 +73,22 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100);
 		background-color: var(--theme-backdrop);
 	}
 
-	hr {
-		border-bottom: 1px solid black;
-		width: 100%;
-		opacity: 50%;
-	}
 	* { box-sizing: border-box; }
 }
 
-.fix-focus, .fix {
+.fix-focus, .fix:not(.no-focus-fix) {
 	* {
-		outline: none !important;
-		box-shadow: none !important;
+		outline: inherit;
+		-webkit-tap-highlight-color: transparent;
 	}
 }
 
-.fix-font, .fix {
-	* { font-family: var(--theme-font), sans-serif; }
+.fix-font, .fix:not(.no-font-fix) {
+	color: var(--theme-text);
+	font-family: var(--theme-font), sans-serif;
+
 	p, input, select, textarea, button { font-size: 1rem; }
-	span { font-size: inherit; }
-	h1, h2, h3, h4, h5, h6, p {
-		margin-top: 0;
-		margin-bottom: 0.5rem;
-	}
+	h1, h2, h3, h4, h5, h6, p { margin: 0 0 0.5rem 0; }
 	h1 { font-weight: 500; font-size: 2.5rem; }
 	h2 { font-weight: 500; font-size: 2rem; }
 	h3 { font-weight: 500; font-size: 1.75rem; }
@@ -112,8 +97,6 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100);
 	h6 { font-weight: 500; font-size: 1rem; }
 }
 
-option { color: black !important; }
-
 // Misc =====================================================================================================
 
 // Center
@@ -187,7 +170,7 @@ option { color: black !important; }
 		right: 0;
 		bottom: 0;
 		background-color: var(--theme-#{$color});
-		filter: saturate(.5) brightness(250%);
+		filter: saturate(.5) brightness(150%);
 		border-radius: inherit;
 		z-index: -1;
 	}