Merge pull request openSUSE#16604 from hellcp-work/label-partial

Create a label partial

src/api/app/assets/stylesheets/webui/application.scss

@@ -75,6 +75,7 @@
 @import 'tokens';
 @import 'subscriptions';
 @import 'build-log';
+@import 'label';
 @import 'mixin';
 
 html {

src/api/app/assets/stylesheets/webui/label.scss

@@ -0,0 +1,5 @@
+.label {
+  padding: 0.25rem 0.5rem;
+  border-radius: var(--bs-border-radius);
+  display: inline-block;
+}

src/api/app/helpers/webui/webui_helper.rb

@@ -342,6 +342,28 @@ def contact_link
     url = ::Configuration.contact_url || "mailto:#{::Configuration.admin_email}"
     link_to(name, url)
   end
+
+  # Calculates a text color that will contrast well with the given color
+  def contrast_text(color)
+    blue_component = color % 0x100
+    color_without_blue = ((color - blue_component) / 0x100)
+    green_component = color_without_blue % 0x100
+    red_component = ((color_without_blue - green_component) / 0x100)
+
+    red = relative_luminance(red_component / 255.0)
+    green = relative_luminance(green_component / 255.0)
+    blue = relative_luminance(blue_component / 255.0)
+
+    # https://www.w3.org/TR/WCAG20/#contrast-ratiodef
+    ((0.2126 * red) + (0.7152 * green) + (0.0722 * blue)) > 0.179 ? 'black' : 'white'
+  end
+
+  # https://www.w3.org/TR/WCAG20/#relativeluminancedef
+  def relative_luminance(color)
+    return color / 12.92 if color <= 0.03928
+
+    ((color + 0.055) / 1.055)**2.4
+  end
 end
 
 # rubocop:enable Metrics/ModuleLength

src/api/app/views/webui/shared/_label.html.haml

@@ -0,0 +1,7 @@
+:css
+  .label-#{label.id} {
+    color: #{contrast_text(label.color)};
+    background-color: ##{label.color.to_s(16).rjust(6, "0")};
+  }
+%span.label{ class: "label-#{label.id}" }
+  = label.name