Colorful tags for classifying lint info (#6362)

src/_includes/linter-rule-cards.md

@@ -25,7 +25,7 @@
 {% if lint.state == "removed" -%}
 <span class="material-symbols removed-lints" title="Lint has been removed" aria-label="Lint has been removed">error</span>
 {% elsif lint.state == "deprecated" -%}
-<span class="material-symbols deprecated-lints" title="Lint is deprecated" aria-label="Lint is deprecated">warning</span>
+<span class="material-symbols deprecated-lints" title="Lint is deprecated" aria-label="Lint is deprecated">report</span>
 {% elsif lint.state == "experimental" -%}
 <span class="material-symbols experimental-lints" title="Lint is experimental" aria-label="Lint is experimental">science</span>
 {% elsif lint.sinceDartSdk contains "wip" -%}

src/_sass/components/_tags.scss

@@ -25,3 +25,39 @@
 .experimental-tag {
   background-color: #DADCE0;
 }
+
+.lint-tags {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+
+  div.tag-label {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    background-color: rgb(194 229 255);
+    gap: 0.25rem;
+    font-size: 1rem;
+    padding: 0.15rem 0.5rem;
+
+    span.material-symbols {
+      fill: currentcolor;
+      position: relative;
+      font-size: 1.25rem;
+      font-variation-settings: "FILL" 1;
+    }
+
+    &.green {
+      background-color: rgb(214, 245, 230);
+    }
+
+    &.orange {
+      background-color: rgb(255, 220, 185);
+    }
+
+    &.red {
+      background-color: rgb(255, 205, 200);
+    }
+  }
+}

src/content/tools/linter-rules/individual-rules.md

@@ -13,68 +13,78 @@ eleventyComputed:
 skipFreshness: true
 ---
 
-{{lint.description}}
-
+<div class="lint-tags">
 {% if lint.sinceDartSdk == "Unreleased" or lint.sinceDartSdk contains "-wip" -%}
-_This rule is currently **experimental**
-and not yet available in a stable SDK._
+<div class="tag-label orange" title="Lint is unreleased or work in progress." aria-label="Lint is unreleased or work in progress.">
+<span class="material-symbols" aria-hidden="true">pending</span>
+<span>Unreleased</span>
+</div>
+{% elsif lint.state == "experimental" -%}
+<div class="tag-label orange" title="Lint is experimental." aria-label="Lint is experimental.">
+<span class="material-symbols" aria-hidden="true">science</span>
+<span>Experimental</span>
+</div>
+{% elsif lint.state == "deprecated" -%}
+<div class="tag-label orange" title="Lint is deprecated." aria-label="Lint is deprecated.">
+<span class="material-symbols" aria-hidden="true">report</span>
+<span>Deprecated</span>
+</div>
 {% elsif lint.state == "removed" -%}
-_This rule has been removed as of the latest Dart releases._
-{% elsif lint.state != "stable" -%}
-_This rule is currently **{{lint.state}}**
-and available as of Dart {{lint.sinceDartSdk}}._
+<div class="tag-label red" title="Lint has been removed." aria-label="Lint has been removed.">
+<span class="material-symbols" aria-hidden="true">error</span>
+<span>Removed</span>
+</div>
 {% else -%}
-_This rule is available as of Dart {{lint.sinceDartSdk}}._
+<div class="tag-label green" title="Lint is stable." aria-label="Lint is stable.">
+<span class="material-symbols" aria-hidden="true">verified_user</span>
+<span>Stable</span>
+</div>
 {% endif -%}
-
-{% if lint.sets != empty -%}
-
-{% assign rule_sets = "" -%}
-
-{% for set in lint.sets -%}
-
-{% if set == "core" or set == "recommended" -%}
-{% assign set_link = "lints" %}
-{% elsif set == "flutter" -%}
-{% assign set_link = "flutter_lints" %}
-{% else -%}
-{% assign set_link = set %}
+{% if lint.sets contains "core" -%}
+<div class="tag-label" title="Lint is included in the core set of rules." aria-label="Lint is included in the core set of rules.">
+<span class="material-symbols" aria-hidden="true">circles</span>
+<span>Core</span>
+</div>
+{% elsif lint.sets contains "recommended" -%}
+<div class="tag-label" title="Lint is included in the recommended set of rules." aria-label="Lint is included in the recommended set of rules.">
+<span class="material-symbols" aria-hidden="true">thumb_up</span>
+<span>Recommended</span>
+</div>
+{% elsif lint.sets contains "flutter" -%}
+<div class="tag-label" title="Lint is included in the Flutter set of rules." aria-label="Lint is included in the Flutter set of rules.">
+<span class="material-symbols" aria-hidden="true">flutter</span>
+<span>Flutter</span>
+</div>
 {% endif -%}
+{% if lint.fixStatus == "hasFix" %}
+<div class="tag-label" title="Lint has one or more quick fixes available." aria-label="Lint has one or more quick fixes available.">
+<span class="material-symbols" aria-hidden="true">build</span>
+<span>Fix available</span>
+</div>
+{% endif %}
+</div>
 
-{%- capture rule_set -%}
-[{{set}}](/tools/linter-rules#{{set_link}}){% if forloop.last == false %},{% endif %}
-{% endcapture -%}
-
-{%- assign rule_sets = rule_sets | append: rule_set -%}
-{% endfor -%}
+{{lint.description}}
 
-<em>Rule sets: {{ rule_sets }}</em>
-{% endif -%}
+## Details
 
-{% if lint.fixStatus == "hasFix" %}
-_This rule has a [quick fix](/tools/linter-rules#quick-fixes) available._
-{% endif %}
+{{lint.details}}
 
 {% if lint.incompatible != empty -%}
-{% assign incompatible_rules = "" -%}
 
-{% for incompatible in lint.incompatible -%}
+## Incompatible rules
 
-{%- capture incompatible_rule -%}
-[{{incompatible}}](/tools/linter-rules/{{incompatible}}){% if forloop.last == false %},{% endif %}
-{% endcapture -%}
+The `{{lint.name}}` rule is incompatible with the following rules:
 
-{% assign incompatible_rules = incompatible_rules | append: incompatible_rule -%}
+{% for incompatible in lint.incompatible -%}
+- [`{{incompatible}}`](/tools/linter-rules/{{incompatible}})
 {% endfor -%}
 
-<em>Incompatible rules: {{ incompatible_rules }}</em>
 {% endif -%}
 
-## Details
-
-{{lint.details}}
+<a id="usage" aria-hidden="true"></a>
 
-## Usage
+## Enable
 
 To enable the `{{lint.name}}` rule,
 add `{{lint.name}}` under **linter > rules** in your