Template:Color: Difference between revisions

Latest revision as of 04:19, 4 August 2023

Adds an in-line dot of color when included on a page. Often this is intended for Infoboxes.

Template parameters
This template prefers inline formatting of parameters.
Parameter		Description	Type	Status
Color	`1` `color`	The color to make the dot. RGB Hex is preferred, but other CSS color values are accepted. Example \|color=#4FC600 Auto value `magenta`	Content	required
Dot Size	`size`	The size to draw the dot. Will default to 2rem. Pixels are suggested, but any valid HTML size is accepted. Example \|size=30px Auto value `2rem`	Content	optional

@@ Line 1: / Line 1: @@
-<div style="background-color:{{{1|{{{color|magenta}}}}}}; border: 2.5px solid #fff; border-radius:50%; width:{{{size|25px}}}; height:{{{size|25px}}}; display: inline-block;"></div>
+<div style="background-color:{{{1|{{{color|magenta}}}}}}; border: 2px solid var(--color-surface-0); border-radius:var(--border-radius--medium); width:{{{size|2rem}}}; height:{{{size|2rem}}}; display: inline-block;"></div><noinclude>
+<templatedata>
+{
+	"params": {
+		"1": {
+			"aliases": [
+				"color"
+			],
+			"label": "Color",
+			"description": "The color to make the dot. RGB Hex is preferred, but other CSS color values are accepted.",
+			"example": "|color=#4FC600",
+			"type": "content",
+			"autovalue": "magenta",
+			"required": true
+		},
+		"size": {
+			"label": "Dot Size",
+			"description": "The size to draw the dot. Will default to 2rem. Pixels are suggested, but any valid HTML size is accepted.",
+			"example": "|size=30px",
+			"type": "content",
+			"autovalue": "2rem"
+		}
+	},
+	"description": "Adds an in-line dot of color when included on a page. Often this is intended for Infoboxes.",
+	"format": "inline",
+	"paramOrder": [
+		"1",
+		"size"
+	]
+}
+</templatedata>
+</noinclude>