yattho_view_components 0.0.1

data/app/components/yattho/beta/flash.pcss

@@ -0,0 +1,143 @@
+/* flash */
+
+/* Default flash */
+.flash:not(.Banner) {
+  position: relative;
+  padding: var(--base-size-20, 20px) var(--yattho-control-medium-paddingInline-spacious, 16px);
+  border-style: solid;
+  border-width: var(--yattho-borderWidth-thin, 1px);
+  border-radius: var(--yattho-borderRadius-medium, 6px);
+
+  /* Default color */
+  color: var(--color-fg-default);
+  background-image: linear-gradient(var(--color-accent-subtle), var(--color-accent-subtle));
+  border-color: var(--color-accent-muted);
+
+  & .octicon {
+    color: var(--color-accent-fg);
+    margin-right: var(--base-size-12, 12px);
+  }
+
+  & p:last-child {
+    margin-bottom: 0;
+  }
+}
+
+/* Contain the flash messages */
+.flash-messages {
+  margin-bottom: var(--yattho-stack-gap-spacious, 24px);
+}
+
+/* Close button */
+.flash-close:not(.Banner-close) {
+  float: right;
+  padding: var(--yattho-control-medium-paddingInline-spacious, 16px);
+  margin: calc(var(--yattho-control-medium-paddingInline-spacious, 16px) * -1);
+  text-align: center;
+  cursor: pointer;
+
+  /* Undo `<button>` styles */
+  background: none;
+  border: 0;
+  appearance: none;
+
+  &:hover {
+    opacity: 0.7;
+  }
+
+  &:active {
+    opacity: 0.5;
+  }
+
+  & .octicon {
+    margin-right: 0;
+  }
+}
+
+/* Action button */
+.flash-action:not(.Banner-actions) {
+  float: right;
+  margin-top: -3px;
+  margin-left: var(--yattho-stack-gap-spacious, 24px);
+  background-clip: padding-box;
+
+  &.btn .octicon {
+    margin-right: var(--yattho-control-small-gap, 4px);
+    color: var(--color-fg-muted);
+  }
+
+  &.btn-primary {
+    background-clip: border-box;
+
+    & .octicon {
+      color: inherit;
+    }
+  }
+}
+
+
+/* Color variations */
+
+.flash-warn:not(.Banner) {
+  color: var(--color-fg-default);
+  background-image: linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle));
+  border-color: var(--color-attention-muted);
+
+  & .octicon {
+    color: var(--color-attention-fg);
+  }
+}
+
+.flash-error:not(.Banner) {
+  color: var(--color-fg-default);
+  background-image: linear-gradient(var(--color-danger-subtle), var(--color-danger-subtle));
+  border-color: var(--color-danger-muted);
+
+  & .octicon {
+    color: var(--color-danger-fg);
+  }
+}
+
+.flash-success:not(.Banner) {
+  color: var(--color-fg-default);
+  background-image: linear-gradient(var(--color-success-subtle), var(--color-success-subtle));
+  border-color: var(--color-success-muted);
+
+  & .octicon {
+    color: var(--color-success-fg);
+  }
+}
+
+/* Layout variations */
+
+.flash-full:not(.Banner) {
+  margin-top: calc(var(--yattho-borderWidth-thin, 1px) * -1);
+  border-width: var(--yattho-borderWidth-thin, 1px) 0;
+  border-radius: 0;
+}
+
+/* A banner rendered at the top of the page. */
+.flash-banner {
+  position: fixed;
+  top: 0;
+  z-index: 90;
+  width: 100%;
+  border-top: 0;
+  border-right: 0;
+  border-left: 0;
+  border-radius: 0;
+}
+
+/* Makes sure the background is opaque to cover any content underneath */
+.flash-full,
+.flash-banner {
+  background-color: var(--color-canvas-default);
+}
+
+/* FIXME deprecate this */
+.warning {
+  padding: 0.5em;
+  margin-bottom: 0.8em;
+  font-weight: var(--base-text-weight-semibold, 600);
+  background-color: var(--color-attention-subtle);
+}

data/app/components/yattho/beta/flash.rb

@@ -0,0 +1,72 @@
+# frozen_string_literal: true
+
+module Yattho
+  module Beta
+    # Use `Flash` to inform users of successful or pending actions.
+    class Flash < Yattho::Component
+      status :beta
+
+      # Optional action content showed on the right side of the component.
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :action, lambda { |**system_arguments|
+        deny_tag_argument(**system_arguments)
+        system_arguments[:tag] = :div
+        system_arguments[:classes] = class_names(system_arguments[:classes], "flash-action")
+
+        Yattho::BaseComponent.new(**system_arguments)
+      }
+
+      DEFAULT_SCHEME = :default
+      SCHEME_MAPPINGS = {
+        DEFAULT_SCHEME => "",
+        :warning => "flash-warn",
+        :danger => "flash-error",
+        :success => "flash-success"
+      }.freeze
+      # @example Schemes
+      #   <%= render(Yattho::Beta::Flash.new) { "This is a flash message!" } %>
+      #   <%= render(Yattho::Beta::Flash.new(scheme: :warning)) { "This is a warning flash message!" } %>
+      #   <%= render(Yattho::Beta::Flash.new(scheme: :danger)) { "This is a danger flash message!" } %>
+      #   <%= render(Yattho::Beta::Flash.new(scheme: :success)) { "This is a success flash message!" } %>
+      #
+      # @example Full width
+      #   <%= render(Yattho::Beta::Flash.new(full: true)) { "This is a full width flash message!" } %>
+      #
+      # @example Dismissible
+      #   <%= render(Yattho::Beta::Flash.new(dismissible: true)) { "This is a dismissible flash message!" } %>
+      #
+      # @example Icon
+      #   <%= render(Yattho::Beta::Flash.new(icon: :people)) { "This is a flash message with an icon!" } %>
+      #
+      # @example With actions
+      #   <%= render(Yattho::Beta::Flash.new) do |component| %>
+      #     This is a flash message with actions!
+      #     <% component.with_action do %>
+      #       <%= render(Yattho::ButtonComponent.new(size: :small)) { "Take action" } %>
+      #     <% end %>
+      #   <% end %>
+      #
+      # @param full [Boolean] Whether the component should take up the full width of the screen.
+      # @param spacious [Boolean] Whether to add margin to the bottom of the component.
+      # @param dismissible [Boolean] Whether the component can be dismissed with an X button.
+      # @param icon [Symbol] Name of Octicon icon to use.
+      # @param scheme [Symbol] <%= one_of(Yattho::Beta::Flash::SCHEME_MAPPINGS.keys) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(full: false, spacious: false, dismissible: false, icon: nil, scheme: DEFAULT_SCHEME,
+                     **system_arguments)
+        @icon = icon
+        @dismissible = dismissible
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @system_arguments[:tag] = :div
+        @system_arguments[:classes] = class_names(
+          @system_arguments[:classes],
+          "flash",
+          SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_MAPPINGS.keys, scheme, DEFAULT_SCHEME)],
+          'flash-full': full
+        )
+        @system_arguments[:mb] ||= spacious ? 4 : nil
+      end
+    end
+  end
+end

data/app/components/yattho/beta/heading.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+module Yattho
+  module Beta
+    # `Heading` should be used to communicate page organization and hierarchy.
+    #
+    # - Set tag to one of `:h1`, `:h2`, `:h3`, `:h4`, `:h5`, `:h6` based on what is appropriate for the page context.
+    # - Use `Heading` as the title of a section or sub section.
+    # - Do not use `Heading` for styling alone. For simply styling text, consider using <%= link_to_component(Yattho::Beta::Text) %> with relevant <%= link_to_typography_docs %>
+    #   such as `font_size` and `font_weight`.
+    # - Do not jump heading levels. For instance, do not follow a `<h1>` with an `<h3>`. Heading levels should increase by one in ascending order.
+    #
+    # @accessibility
+    #   While sighted users rely on visual cues such as font size changes to determine what the heading is, assistive technology users rely on programatic cues that can be read out.
+    #   When text on a page is visually implied to be a heading, ensure that it is coded as a heading. Additionally, visually implied heading level and coded heading level should be
+    #   consistent. [See WCAG success criteria: 1.3.1: Info and Relationships](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html)
+    #
+    #   Headings allow assistive technology users to quickly navigate around a page. Navigation to text that is not meant to be a heading can be a confusing experience.
+    #   <%= link_to_heading_practices %>
+    class Heading < Yattho::Component
+      status :beta
+
+      TAG_FALLBACK = :h2
+      TAG_OPTIONS = [:h1, TAG_FALLBACK, :h3, :h4, :h5, :h6].freeze
+
+      # @example Default
+      #   <%= render(Yattho::Beta::Heading.new(tag: :h1)) { "H1 Text" } %>
+      #   <%= render(Yattho::Beta::Heading.new(tag: :h2)) { "H2 Text" } %>
+      #   <%= render(Yattho::Beta::Heading.new(tag: :h3)) { "H3 Text" } %>
+      #   <%= render(Yattho::Beta::Heading.new(tag: :h4)) { "H4 Text" } %>
+      #   <%= render(Yattho::Beta::Heading.new(tag: :h5)) { "H5 Text" } %>
+      #   <%= render(Yattho::Beta::Heading.new(tag: :h6)) { "H6 Text" } %>
+      #
+      # @param tag [String]  <%= one_of(Yattho::Beta::Heading::TAG_OPTIONS) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(tag:, **system_arguments)
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, TAG_FALLBACK)
+      end
+
+      def call
+        render(Yattho::BaseComponent.new(**@system_arguments)) { content }
+      end
+    end
+  end
+end

data/app/components/yattho/beta/icon_button.html.erb

@@ -0,0 +1,6 @@
+<%= render Yattho::ConditionalWrapper.new(condition: render_tooltip?, tag: :div, classes: "Button-withTooltip", **@wrapper_arguments) do %>
+  <%= render Yattho::Beta::BaseButton.new(**@system_arguments) do -%>
+    <%= render Yattho::Beta::Octicon.new(icon: @icon, classes: "Button-visual") %>
+  <% end -%>
+  <%= render Yattho::Alpha::Tooltip.new(**@tooltip_arguments) if render_tooltip? %>
+<% end %>

data/app/components/yattho/beta/icon_button.rb

@@ -0,0 +1,110 @@
+# frozen_string_literal: true
+
+module Yattho
+  module Beta
+    # Use `IconButton` to render Icon-only buttons without the default button styles.
+    #
+    # `IconButton` will always render with a tooltip unless the tag is `:summary`.
+    # `IconButton` will always render with a tooltip unless the tag is `:summary`.
+    # @accessibility
+    #   `IconButton` requires an `aria-label`, which will provide assistive technologies with an accessible label.
+    #   The `aria-label` should describe the action to be invoked rather than the icon itself. For instance,
+    #   if your `IconButton` renders a magnifying glass icon and invokes a search action, the `aria-label` should be
+    #   `"Search"` instead of `"Magnifying glass"`.
+    #   Either `aria-label` or `aria-description` will be used for the `Tooltip` text, depending on which one is present.
+    #   Either `aria-label` or `aria-description` will be used for the `Tooltip` text, depending on which one is present.
+    #   [Learn more about best functional image practices (WAI Images)](https://www.w3.org/WAI/tutorials/images/functional)
+    class IconButton < Yattho::Component
+      status :beta
+
+      DEFAULT_SCHEME = :default
+      SCHEME_MAPPINGS = {
+        DEFAULT_SCHEME => "Button--secondary",
+        :danger => "Button--danger",
+        :invisible => "Button--invisible"
+      }.freeze
+      SCHEME_OPTIONS = SCHEME_MAPPINGS.keys
+
+      # @example Default
+      #
+      #   <%= render(Yattho::Beta::IconButton.new(icon: :search, "aria-label": "Search", id: "search-button", id: "search-button")) %>
+      #
+      # @example Schemes
+      #
+      #   <%= render(Yattho::Beta::IconButton.new(icon: :search, "aria-label": "Search")) %>
+      #   <%= render(Yattho::Beta::IconButton.new(icon: :trash, "aria-label": "Delete", scheme: :danger)) %>
+      #
+      # @example With an `aria-description`
+      #   @description
+      #     If you need to have a longer description for the icon button, use both the `aria-label` and `aria-description`
+      #     attributes. A label should be short and concise, while the description can be longer as it is intended to provide
+      #     more context and information. See the accessibility section for more information.
+      #   @code
+      #     <%= render(Yattho::Beta::IconButton.new(icon: :bold, "aria-label": "Bold", "aria-description": "Add bold text, Cmd+b")) %>
+      #
+      # @example Custom tooltip direction
+      #
+      #   <%= render(Yattho::Beta::IconButton.new(icon: :search, "aria-label": "Search", tooltip_direction: :e)) %>
+      #
+      # @param icon [String] Name of <%= link_to_octicons %> to use.
+      # @param wrapper_arguments [Hash] Optional keyword arguments to be passed to the wrapper `<div>` tag.
+      # @param scheme [Symbol] <%= one_of(Yattho::Beta::IconButton::SCHEME_OPTIONS) %>
+      # @param size [Symbol] <%= one_of(Yattho::Beta::Button::SIZE_OPTIONS) %>
+      # @param tag [Symbol] <%= one_of(Yattho::Beta::BaseButton::TAG_OPTIONS) %>
+      # @param type [Symbol] <%= one_of(Yattho::Beta::BaseButton::TYPE_OPTIONS) %>
+      # @param aria-label [String] String that can be read by assistive technology. A label should be short and concise. See the accessibility section for more information.
+      # @param aria-description [String] String that can be read by assistive technology. A description can be longer as it is intended to provide more context and information. See the accessibility section for more information.
+      # @param show_tooltip [Boolean] Whether or not to show a tooltip when this button is hovered. Tooltips should only be hidden if the aria label is redundant, i.e. if the icon has a widely understood definition.
+      # @param tooltip_direction [Symbol] (Yattho::Alpha::Tooltip::DIRECTION_DEFAULT) <%= one_of(Yattho::Alpha::Tooltip::DIRECTION_OPTIONS) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(icon:, scheme: DEFAULT_SCHEME, wrapper_arguments: {}, show_tooltip: true,
+                     tooltip_direction: Yattho::Alpha::Tooltip::DIRECTION_DEFAULT, size: Yattho::Beta::Button::DEFAULT_SIZE, **system_arguments)
+        @icon = icon
+
+        @wrapper_arguments = wrapper_arguments
+        @show_tooltip = show_tooltip
+        @system_arguments = system_arguments
+        @system_arguments[:id] ||= self.class.generate_id
+
+        @system_arguments[:classes] = class_names(
+          "Button",
+          "Button--iconOnly",
+          SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME)],
+          Yattho::Beta::Button::SIZE_MAPPINGS[fetch_or_fallback(Yattho::Beta::Button::SIZE_OPTIONS, size,
+                                                                Yattho::Beta::Button::DEFAULT_SIZE)],
+          system_arguments[:classes]
+        )
+
+        validate_aria_label
+
+        @aria_label = aria("label", @system_arguments)
+        @aria_description = aria("description", @system_arguments)
+
+        @tooltip_arguments = {
+          for_id: @system_arguments[:id],
+          direction: tooltip_direction
+        }
+
+        # If we have both an `aria-label` and a `aria-description`, we create a `Tooltip` with the description type and keep the `aria-label` in the button.
+        # Otherwise, the `aria-label` is used as the tooltip text, which is the `aria-labelled-by` of the button, so we don't set it in the button.
+        if @aria_label.present? && @aria_description.present?
+          @system_arguments.delete(:'aria-description')
+          @system_arguments[:aria].delete(:description) if @system_arguments.include?(:aria)
+          @tooltip_arguments[:text] = @aria_description
+          @tooltip_arguments[:type] = :description
+        else
+          @system_arguments.delete(:'aria-label')
+          @system_arguments[:aria].delete(:label) if @system_arguments.include?(:aria)
+          @tooltip_arguments[:text] = @aria_label
+          @tooltip_arguments[:type] = :label
+        end
+      end
+
+      private
+
+      def render_tooltip?
+        @show_tooltip && @system_arguments[:tag] != :summary
+      end
+    end
+  end
+end

data/app/components/yattho/beta/label.css

@@ -0,0 +1,105 @@
+/* Labels */
+
+/* Provide a wrapper to ensure labels stick together */
+
+.labels {
+  position: relative;
+}
+
+/* Default 20px */
+
+.label, /* TODO: Deprecate */
+.Label {
+  display: inline-block;
+  padding: 0 7px;
+  font-size: var(--yattho-text-body-size-small, 12px);
+  font-weight: var(--base-text-weight-medium, 500);
+  line-height: 18px;
+  white-space: nowrap;
+  border: var(--yattho-borderWidth-thin, 1px) solid var(--color-border-default);
+  border-radius: 2em;
+}
+
+.label:hover, .Label:hover {
+    text-decoration: none;
+  }
+
+/* Large 24px */
+
+.Label--large {
+  padding-right: 10px;
+  padding-left: 10px;
+  line-height: 22px;
+}
+
+/* Inline */
+
+/* Doesn't increase height of parent element
+** Can be used with different font-sizes */
+
+.Label--inline {
+  display: inline;
+  padding: 0.12em 0.5em;
+  font-size: 85%;
+}
+
+/* Contrast */
+
+.Label--primary {
+  color: var(--color-fg-default);
+  border-color: var(--color-neutral-emphasis);
+}
+
+.Label--secondary {
+  color: var(--color-fg-muted);
+  border-color: var(--color-border-default);
+}
+
+/* Colors */
+
+.Label--info, /* TODO: deprecate */
+.Label--accent {
+  color: var(--color-accent-fg);
+  border-color: var(--color-accent-emphasis);
+}
+
+.Label--success {
+  color: var(--color-success-fg);
+  border-color: var(--color-success-emphasis);
+}
+
+.Label--warning, /* TODO: deprecate */
+.Label--attention {
+  color: var(--color-attention-fg);
+  border-color: var(--color-attention-emphasis);
+}
+
+.Label--severe {
+  color: var(--color-severe-fg);
+  border-color: var(--color-severe-emphasis);
+}
+
+.Label--danger {
+  color: var(--color-danger-fg);
+  border-color: var(--color-danger-emphasis);
+}
+
+.Label--open {
+  color: var(--color-open-fg);
+  border-color: var(--color-open-emphasis);
+}
+
+.Label--closed {
+  color: var(--color-closed-fg);
+  border-color: var(--color-closed-emphasis);
+}
+
+.Label--done {
+  color: var(--color-done-fg);
+  border-color: var(--color-done-emphasis);
+}
+
+.Label--sponsors {
+  color: var(--color-sponsors-fg);
+  border-color: var(--color-sponsors-emphasis);
+}

data/app/components/yattho/beta/label.css.json

@@ -0,0 +1 @@
+{"name":"beta/label","selectors":[".labels",".label"," \n.Label",".label:hover"," .Label:hover",".Label--large",".Label--inline",".Label--primary",".Label--secondary",".Label--info"," \n.Label--accent",".Label--success",".Label--warning"," \n.Label--attention",".Label--severe",".Label--danger",".Label--open",".Label--closed",".Label--done",".Label--sponsors"]}

data/app/components/yattho/beta/label.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["label.pcss"],"names":[],"mappings":"AAAA,WAAW;;AAEX,sDAAsD;;AACtD;EACE,kBAAkB;AACpB;;AAEA,iBAAiB;;AAEjB;;EAEE,qBAAqB;EACrB,cAAc;EACd,mDAAmD;EACnD,gDAAgD;EAChD,iBAAiB;EACjB,mBAAmB;EACnB,6EAA6E;EAC7E,kBAAkB;AAKpB;;AAHE;IACE,qBAAqB;EACvB;;AAGF,eAAe;;AAEf;EACE,mBAAmB;EACnB,kBAAkB;EAClB,iBAAiB;AACnB;;AAEA,WAAW;;AAEX;0CAC0C;;AAC1C;EACE,eAAe;EACf,qBAAqB;EACrB,cAAc;AAChB;;AAEA,aAAa;;AAEb;EACE,8BAA8B;EAC9B,2CAA2C;AAC7C;;AAEA;EACE,4BAA4B;EAC5B,yCAAyC;AAC3C;;AAEA,WAAW;;AAEX;;EAEE,6BAA6B;EAC7B,0CAA0C;AAC5C;;AAEA;EACE,8BAA8B;EAC9B,2CAA2C;AAC7C;;AAEA;;EAEE,gCAAgC;EAChC,6CAA6C;AAC/C;;AAEA;EACE,6BAA6B;EAC7B,0CAA0C;AAC5C;;AAEA;EACE,6BAA6B;EAC7B,0CAA0C;AAC5C;;AAEA;EACE,2BAA2B;EAC3B,wCAAwC;AAC1C;;AAEA;EACE,6BAA6B;EAC7B,0CAA0C;AAC5C;;AAEA;EACE,2BAA2B;EAC3B,wCAAwC;AAC1C;;AAEA;EACE,+BAA+B;EAC/B,4CAA4C;AAC9C","file":"label.css","sourcesContent":["/* Labels */\n\n/* Provide a wrapper to ensure labels stick together */\n.labels {\n  position: relative;\n}\n\n/* Default 20px */\n\n.label, /* TODO: Deprecate */\n.Label {\n  display: inline-block;\n  padding: 0 7px;\n  font-size: var(--yattho-text-body-size-small, 12px);\n  font-weight: var(--base-text-weight-medium, 500);\n  line-height: 18px;\n  white-space: nowrap;\n  border: var(--yattho-borderWidth-thin, 1px) solid var(--color-border-default);\n  border-radius: 2em;\n\n  &:hover {\n    text-decoration: none;\n  }\n}\n\n/* Large 24px */\n\n.Label--large {\n  padding-right: 10px;\n  padding-left: 10px;\n  line-height: 22px;\n}\n\n/* Inline */\n\n/* Doesn't increase height of parent element\n** Can be used with different font-sizes */\n.Label--inline {\n  display: inline;\n  padding: 0.12em 0.5em;\n  font-size: 85%;\n}\n\n/* Contrast */\n\n.Label--primary {\n  color: var(--color-fg-default);\n  border-color: var(--color-neutral-emphasis);\n}\n\n.Label--secondary {\n  color: var(--color-fg-muted);\n  border-color: var(--color-border-default);\n}\n\n/* Colors */\n\n.Label--info, /* TODO: deprecate */\n.Label--accent {\n  color: var(--color-accent-fg);\n  border-color: var(--color-accent-emphasis);\n}\n\n.Label--success {\n  color: var(--color-success-fg);\n  border-color: var(--color-success-emphasis);\n}\n\n.Label--warning, /* TODO: deprecate */\n.Label--attention {\n  color: var(--color-attention-fg);\n  border-color: var(--color-attention-emphasis);\n}\n\n.Label--severe {\n  color: var(--color-severe-fg);\n  border-color: var(--color-severe-emphasis);\n}\n\n.Label--danger {\n  color: var(--color-danger-fg);\n  border-color: var(--color-danger-emphasis);\n}\n\n.Label--open {\n  color: var(--color-open-fg);\n  border-color: var(--color-open-emphasis);\n}\n\n.Label--closed {\n  color: var(--color-closed-fg);\n  border-color: var(--color-closed-emphasis);\n}\n\n.Label--done {\n  color: var(--color-done-fg);\n  border-color: var(--color-done-emphasis);\n}\n\n.Label--sponsors {\n  color: var(--color-sponsors-fg);\n  border-color: var(--color-sponsors-emphasis);\n}"]}

data/app/components/yattho/beta/label.pcss

@@ -0,0 +1,103 @@
+/* Labels */
+
+/* Provide a wrapper to ensure labels stick together */
+.labels {
+  position: relative;
+}
+
+/* Default 20px */
+
+.label, /* TODO: Deprecate */
+.Label {
+  display: inline-block;
+  padding: 0 7px;
+  font-size: var(--yattho-text-body-size-small, 12px);
+  font-weight: var(--base-text-weight-medium, 500);
+  line-height: 18px;
+  white-space: nowrap;
+  border: var(--yattho-borderWidth-thin, 1px) solid var(--color-border-default);
+  border-radius: 2em;
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+/* Large 24px */
+
+.Label--large {
+  padding-right: 10px;
+  padding-left: 10px;
+  line-height: 22px;
+}
+
+/* Inline */
+
+/* Doesn't increase height of parent element
+** Can be used with different font-sizes */
+.Label--inline {
+  display: inline;
+  padding: 0.12em 0.5em;
+  font-size: 85%;
+}
+
+/* Contrast */
+
+.Label--primary {
+  color: var(--color-fg-default);
+  border-color: var(--color-neutral-emphasis);
+}
+
+.Label--secondary {
+  color: var(--color-fg-muted);
+  border-color: var(--color-border-default);
+}
+
+/* Colors */
+
+.Label--info, /* TODO: deprecate */
+.Label--accent {
+  color: var(--color-accent-fg);
+  border-color: var(--color-accent-emphasis);
+}
+
+.Label--success {
+  color: var(--color-success-fg);
+  border-color: var(--color-success-emphasis);
+}
+
+.Label--warning, /* TODO: deprecate */
+.Label--attention {
+  color: var(--color-attention-fg);
+  border-color: var(--color-attention-emphasis);
+}
+
+.Label--severe {
+  color: var(--color-severe-fg);
+  border-color: var(--color-severe-emphasis);
+}
+
+.Label--danger {
+  color: var(--color-danger-fg);
+  border-color: var(--color-danger-emphasis);
+}
+
+.Label--open {
+  color: var(--color-open-fg);
+  border-color: var(--color-open-emphasis);
+}
+
+.Label--closed {
+  color: var(--color-closed-fg);
+  border-color: var(--color-closed-emphasis);
+}
+
+.Label--done {
+  color: var(--color-done-fg);
+  border-color: var(--color-done-emphasis);
+}
+
+.Label--sponsors {
+  color: var(--color-sponsors-fg);
+  border-color: var(--color-sponsors-emphasis);
+}