Add flat-square action badge style (#34062)

Adds the `flat-square` style to action badges. Styles can be selected by
adding `?style=<style>` to the badge endpoint. If no style query is
given, or if the query is invalid, the style defaults to `flat`.

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

templates/devtest/badge-actions-svg.tmpl

@@ -3,9 +3,16 @@
 	<div>
 		<h1>Actions SVG</h1>
 		<form class="tw-my-3">
-			{{range $fontName := .BadgeFontFamilyNames}}
-				<label><input name="font" type="radio" value="{{$fontName}}" {{Iif (eq $.SelectedFontFamilyName $fontName) "checked"}}>{{$fontName}}</label>
-			{{end}}
+			<div class="tw-mb-2">
+				{{range $fontName := .BadgeFontFamilyNames}}
+					<label><input name="font" type="radio" value="{{$fontName}}" {{Iif (eq $.SelectedFontFamilyName $fontName) "checked"}}>{{$fontName}}</label>
+				{{end}}
+			</div>
+			<div class="tw-mb-2">
+				{{range $style := .BadgeStyles}}
+					<label><input name="style" type="radio" value="{{$style}}" {{Iif (eq $.SelectedStyle $style) "checked"}}>{{$style}}</label>
+				{{end}}
+			</div>
 			<button>submit</button>
 		</form>
 		<div class="flex-text-block tw-flex-wrap">

templates/shared/actions/runner_badge_flat-square.tmpl

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="{{.Badge.Width}}" height="20"
+	role="img" aria-label="{{.Badge.Label.Text}}: {{.Badge.Message.Text}}">
+	<title>{{.Badge.Label.Text}}: {{.Badge.Message.Text}}</title>
+	<g shape-rendering="crispEdges">
+		<rect width="{{.Badge.Label.Width}}" height="20" fill="#555" />
+		<rect x="{{.Badge.Label.Width}}" width="{{.Badge.Message.Width}}" height="20" fill="{{.Badge.Color}}" />
+	</g>
+	<g fill="#fff" text-anchor="middle" font-family="{{.Badge.FontFamily}}"
+		text-rendering="geometricPrecision" font-size="{{.Badge.FontSize}}">
+		<text x="{{.Badge.Label.X}}" y="140"
+			transform="scale(.1)" fill="#fff" textLength="{{.Badge.Label.TextLength}}">{{.Badge.Label.Text}}</text>
+		<text x="{{.Badge.Message.X}}" y="140" transform="scale(.1)" fill="#fff"
+			textLength="{{.Badge.Message.TextLength}}">{{.Badge.Message.Text}}</text>
+	</g>
+</svg>