Add styles for default flags.

modules/ui/theme/css/flag.css

@@ -0,0 +1,38 @@
+/**
+ * @file
+ * Styling for farmOS flags.
+ */
+
+/*
+ * Default style for flags.
+ *
+ * Based on the Claro + Gin button--small.
+ */
+.flag {
+  display: inline-block;
+  margin: 0.25rem 0;
+  padding: .3rem .5rem;
+  text-align: center;
+  text-decoration: none;
+  color: var(--colorGinButtonText);
+  border: 2px solid var(--colorGinPrimary);
+  border-radius: 12px;
+  background-color: var(--colorGinPrimary);
+  font-size: .79rem;
+  font-weight: 700;
+  line-height: 1rem;
+  -webkit-appearance: none;
+  -webkit-font-smoothing: antialiased;
+}
+.flag--monitor {
+  background-color: var(--colorGinPrimary);
+  border-color: var(--colorGinPrimary);
+}
+.flag--monitor {
+  background-color: var(--colorGinDanger);
+  border-color: var(--colorGinDanger);
+}
+.flag--review {
+  background-color: var(--colorGinWarning);
+  border-color: var(--colorGinWarning);
+}

modules/ui/theme/farm_ui_theme.libraries.yml

@@ -6,3 +6,7 @@ footer:
   css:
     theme:
       css/footer.css: {}
+flag:
+  css:
+    theme:
+      css/flag.css: {}

modules/ui/theme/farm_ui_theme.module

@@ -20,3 +20,10 @@ function farm_ui_theme_preprocess_toolbar(&$variables) {
 function farm_ui_theme_block_view_farm_powered_by_block_alter(array &$build, BlockPluginInterface $block) {
   $build['#attached']['library'][] = 'farm_ui_theme/footer';
 }
+
+/**
+ * Implements hook_preprocess_HOOK().
+ */
+function farm_ui_theme_preprocess_field__flag(array &$variables) {
+  $variables['#attached']['library'][] = 'farm_ui_theme/flag';
+}