style: allow verbose background customization with --green-check-bg

vnphanquang · Aug 2, 2024 · cfa75d6 · cfa75d6
1 parent 6b5aaad
commit cfa75d6
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 36 deletions.
diff --git a/.changeset/long-moles-stare.md b/.changeset/long-moles-stare.md
@@ -0,0 +1,5 @@
+---
+'@vnphanquang/green-check': patch
+---
+
+allow verbose background customization with `--green-check-bg`
diff --git a/src/template.css b/src/template.css
@@ -1,27 +1,3 @@
-@property --green-check-fg {
-	inherits: true;
-	initial-value: #000;
-	syntax: '<color>';
-}
-
-@property --green-check-bg-gradient-start {
-	inherits: true;
-	initial-value: #06ff06;
-	syntax: '<color>';
-}
-
-@property --green-check-bg-gradient-stop {
-	inherits: true;
-	initial-value: #dffcdd;
-	syntax: '<color>';
-}
-
-@property --green-check-bg {
-	inherits: true;
-	initial-value: #fff;
-	syntax: '<color>';
-}
-
 @font-face {
 	font-family: 'TWK Everett';
 	src: url('https://www.thegreenwebfoundation.org/wp-content/themes/tgwf-2020/assets/fonts/twkeverett/twkeverett-regular.woff2')
@@ -30,9 +6,12 @@
 
 :host {
 	--green-check-fg: #000;
-	--green-check-bg-gradient-start: #6c6c6c;
-	--green-check-bg-gradient-stop: #dedede;
-	--green-check-bg: #fff;
+	--green-check-bg: linear-gradient(
+		45deg,
+		#6c6c6c 4%,
+		#dedede 24%,
+		#fff 32%
+	);
 
 	display: block;
 	width: fit-content;
@@ -42,9 +21,12 @@
 
 :host([green]:not([green='false'])) {
 	--green-check-fg: #000;
-	--green-check-bg-gradient-start: #06ff06;
-	--green-check-bg-gradient-stop: #dffcdd;
-	--green-check-bg: #fff;
+	--green-check-bg: linear-gradient(
+		45deg,
+		#06ff06 4%,
+		#dffcdd 24%,
+		#fff 32%
+	);
 }
 
 * {
@@ -67,12 +49,7 @@ a {
 	color: var(--green-check-fg);
 	letter-spacing: 0;
 
-	background-image: linear-gradient(
-		45deg,
-		var(--green-check-bg-gradient-start) 4%,
-		var(--green-check-bg-gradient-stop) 24%,
-		var(--green-check-bg) 32%
-	);
+	background: var(--green-check-bg);
 	border: 2px solid currentcolor;
 	border-radius: 8px;
 }