openproject-primer_view_components 0.6.3

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

@@ -0,0 +1,142 @@
+/* flash */
+
+/* Default flash */
+.flash:not(.Banner) {
+  position: relative;
+  padding: var(--base-size-20) var(--control-medium-paddingInline-spacious);
+  border-style: solid;
+  border-width: var(--borderWidth-thin);
+  border-radius: var(--borderRadius-medium);
+
+  /* Default color */
+  color: var(--fgColor-default);
+  background-image: linear-gradient(var(--bgColor-accent-muted), var(--bgColor-accent-muted));
+  border-color: var(--borderColor-accent-muted);
+
+  & .octicon {
+    color: var(--fgColor-accent);
+    margin-right: var(--base-size-12);
+  }
+
+  & p:last-child {
+    margin-bottom: 0;
+  }
+}
+
+/* Contain the flash messages */
+.flash-messages {
+  margin-bottom: var(--stack-gap-spacious);
+}
+
+/* Close button */
+.flash-close:not(.Banner-close) {
+  float: right;
+  padding: var(--control-medium-paddingInline-spacious);
+  margin: calc(var(--control-medium-paddingInline-spacious) * -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(--stack-gap-spacious);
+  background-clip: padding-box;
+
+  &.btn .octicon {
+    margin-right: var(--control-small-gap);
+    color: var(--fgColor-muted);
+  }
+
+  &.btn-primary {
+    background-clip: border-box;
+
+    & .octicon {
+      color: inherit;
+    }
+  }
+}
+
+/* Color variations */
+
+.flash-warn:not(.Banner) {
+  color: var(--fgColor-default);
+  background-image: linear-gradient(var(--bgColor-attention-muted), var(--bgColor-attention-muted));
+  border-color: var(--borderColor-attention-muted);
+
+  & .octicon {
+    color: var(--fgColor-attention);
+  }
+}
+
+.flash-error:not(.Banner) {
+  color: var(--fgColor-default);
+  background-image: linear-gradient(var(--bgColor-danger-muted), var(--bgColor-danger-muted));
+  border-color: var(--borderColor-danger-muted);
+
+  & .octicon {
+    color: var(--fgColor-danger);
+  }
+}
+
+.flash-success:not(.Banner) {
+  color: var(--fgColor-default);
+  background-image: linear-gradient(var(--bgColor-success-muted), var(--bgColor-success-muted));
+  border-color: var(--borderColor-success-muted);
+
+  & .octicon {
+    color: var(--fgColor-success);
+  }
+}
+
+/* Layout variations */
+
+.flash-full:not(.Banner) {
+  margin-top: calc(var(--borderWidth-thin) * -1);
+  border-width: var(--borderWidth-thin) 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(--bgColor-default);
+}
+
+/* FIXME deprecate this */
+.warning {
+  padding: 0.5em;
+  margin-bottom: 0.8em;
+  font-weight: var(--base-text-weight-semibold);
+  background-color: var(--bgColor-attention-muted);
+}

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

@@ -0,0 +1,71 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # Use `Flash` to inform users of successful or pending actions.
+    class Flash < Primer::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")
+
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
+      DEFAULT_SCHEME = :default
+      SCHEME_MAPPINGS = {
+        DEFAULT_SCHEME => "",
+        :warning => "flash-warn",
+        :danger => "flash-error",
+        :success => "flash-success"
+      }.freeze
+      # @example Schemes
+      #   <%= render(Primer::Beta::Flash.new) { "This is a flash message!" } %>
+      #   <%= render(Primer::Beta::Flash.new(scheme: :warning)) { "This is a warning flash message!" } %>
+      #   <%= render(Primer::Beta::Flash.new(scheme: :danger)) { "This is a danger flash message!" } %>
+      #   <%= render(Primer::Beta::Flash.new(scheme: :success)) { "This is a success flash message!" } %>
+      #
+      # @example Full width
+      #   <%= render(Primer::Beta::Flash.new(full: true)) { "This is a full width flash message!" } %>
+      #
+      # @example Dismissible
+      #   <%= render(Primer::Beta::Flash.new(dismissible: true)) { "This is a dismissible flash message!" } %>
+      #
+      # @example Icon
+      #   <%= render(Primer::Beta::Flash.new(icon: :people)) { "This is a flash message with an icon!" } %>
+      #
+      # @example With actions
+      #   <%= render(Primer::Beta::Flash.new) do |component| %>
+      #     This is a flash message with actions!
+      #     <% component.with_action do %>
+      #       <%= render(Primer::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(Primer::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/primer/beta/heading.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+module Primer
+  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(Primer::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 < Primer::Component
+      status :beta
+
+      TAG_FALLBACK = :h2
+      TAG_OPTIONS = [:h1, TAG_FALLBACK, :h3, :h4, :h5, :h6].freeze
+
+      # @example Default
+      #   <%= render(Primer::Beta::Heading.new(tag: :h1)) { "H1 Text" } %>
+      #   <%= render(Primer::Beta::Heading.new(tag: :h2)) { "H2 Text" } %>
+      #   <%= render(Primer::Beta::Heading.new(tag: :h3)) { "H3 Text" } %>
+      #   <%= render(Primer::Beta::Heading.new(tag: :h4)) { "H4 Text" } %>
+      #   <%= render(Primer::Beta::Heading.new(tag: :h5)) { "H5 Text" } %>
+      #   <%= render(Primer::Beta::Heading.new(tag: :h6)) { "H6 Text" } %>
+      #
+      # @param tag [String]  <%= one_of(Primer::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(Primer::BaseComponent.new(**@system_arguments)) { content }
+      end
+    end
+  end
+end

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

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

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

@@ -0,0 +1,112 @@
+# frozen_string_literal: true
+
+module Primer
+  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`.
+    #
+    # @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 < Primer::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(Primer::Beta::IconButton.new(icon: :search, "aria-label": "Search", id: "search-button")) %>
+      #
+      # @example Schemes
+      #
+      #   <%= render(Primer::Beta::IconButton.new(icon: :search, "aria-label": "Search")) %>
+      #   <%= render(Primer::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(Primer::Beta::IconButton.new(icon: :bold, "aria-label": "Bold", "aria-description": "Add bold text, Cmd+b")) %>
+      #
+      # @example Custom tooltip direction
+      #
+      #   <%= render(Primer::Beta::IconButton.new(icon: :search, "aria-label": "Search", tooltip_direction: :e)) %>
+      #
+      # @param icon [String] Name of <%= link_to_octicons %> to use.
+      # @param tag [Symbol] <%= one_of(Primer::Beta::BaseButton::TAG_OPTIONS) %>
+      # @param wrapper_arguments [Hash] Optional keyword arguments to be passed to the wrapper `<div>` tag.
+      # @param scheme [Symbol] <%= one_of(Primer::Beta::IconButton::SCHEME_OPTIONS) %>
+      # @param size [Symbol] <%= one_of(Primer::Beta::Button::SIZE_OPTIONS) %>
+      # @param disabled [Boolean] Whether or not the button is disabled. If true, this option forces `tag:` to `:button`.
+      # @param type [Symbol] <%= one_of(Primer::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] (Primer::Alpha::Tooltip::DIRECTION_DEFAULT) <%= one_of(Primer::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: Primer::Alpha::Tooltip::DIRECTION_DEFAULT, size: Primer::Beta::Button::DEFAULT_SIZE, disabled: false, **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[:disabled] = disabled
+
+        @system_arguments[:classes] = class_names(
+          "Button",
+          "Button--iconOnly",
+          SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME)],
+          Primer::Beta::Button::SIZE_MAPPINGS[fetch_or_fallback(Primer::Beta::Button::SIZE_OPTIONS, size, Primer::Beta::Button::DEFAULT_SIZE)],
+          system_arguments[:classes]
+        )
+
+        validate_aria_label
+
+        @aria_label = aria("label", @system_arguments)
+        @aria_description = aria("description", @system_arguments)
+
+        return unless @show_tooltip
+
+        @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/primer/beta/label.css

@@ -0,0 +1 @@
+.labels{position:relative}.Label,.label{border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));border-radius:2em;display:inline-block;font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-medium,500);line-height:18px;padding:0 7px;white-space:nowrap}.Label:hover,.label:hover{text-decoration:none}.Label--large{line-height:22px;padding-left:10px;padding-right:10px}.Label--inline{display:inline;font-size:85%;padding:.12em .5em}.Label--primary{border-color:var(--borderColor-neutral-emphasis,var(--color-fg-subtle));color:var(--fgColor-default,var(--color-fg-default))}.Label--secondary{border-color:var(--borderColor-default,var(--color-border-default));color:var(--fgColor-muted,var(--color-fg-muted))}.Label--accent,.Label--info{border-color:var(--borderColor-accent-emphasis,var(--color-accent-fg));color:var(--fgColor-accent,var(--color-accent-fg))}.Label--success{border-color:var(--borderColor-success-emphasis,var(--color-success-emphasis));color:var(--fgColor-success,var(--color-success-fg))}.Label--attention,.Label--warning{border-color:var(--borderColor-attention-emphasis,var(--color-attention-emphasis));color:var(--fgColor-attention,var(--color-attention-fg))}.Label--severe{border-color:var(--borderColor-severe-emphasis,var(--color-severe-emphasis));color:var(--fgColor-severe,var(--color-severe-fg))}.Label--danger{border-color:var(--borderColor-danger-emphasis,var(--color-danger-emphasis));color:var(--fgColor-danger,var(--color-danger-fg))}.Label--open{border-color:var(--borderColor-open-emphasis,var(--color-open-emphasis));color:var(--fgColor-open,var(--color-open-fg))}.Label--closed{border-color:var(--borderColor-closed-emphasis,var(--color-closed-emphasis));color:var(--fgColor-closed,var(--color-closed-fg))}.Label--done{border-color:var(--borderColor-done-emphasis,var(--color-done-emphasis));color:var(--fgColor-done,var(--color-done-fg))}.Label--sponsors{border-color:var(--borderColor-sponsors-emphasis,var(--color-sponsors-emphasis));color:var(--fgColor-sponsors,var(--color-sponsors-fg))}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["label.pcss"],"names":[],"mappings":"AAGA,QACE,iBACF,CAIA,cAQE,6GAAgE,CAChE,iBAAkB,CAPlB,oBAAqB,CAErB,4CAAsC,CACtC,8CAA2C,CAC3C,gBAAiB,CAHjB,aAAc,CAId,kBAOF,CAHE,0BACE,oBACF,CAKF,cAGE,gBAAiB,CADjB,iBAAkB,CADlB,kBAGF,CAMA,eACE,cAAe,CAEf,aAAc,CADd,kBAEF,CAIA,gBAEE,uEAAiD,CADjD,oDAEF,CAEA,kBAEE,mEAAwC,CADxC,gDAEF,CAIA,4BAGE,sEAAgD,CADhD,kDAEF,CAEA,gBAEE,8EAAiD,CADjD,oDAEF,CAEA,kCAGE,kFAAmD,CADnD,wDAEF,CAEA,eAEE,4EAAgD,CADhD,kDAEF,CAEA,eAEE,4EAAgD,CADhD,kDAEF,CAEA,aAEE,wEAA8C,CAD9C,8CAEF,CAEA,eAEE,4EAAgD,CADhD,kDAEF,CAEA,aAEE,wEAA8C,CAD9C,8CAEF,CAEA,iBAEE,gFAAkD,CADlD,sDAEF","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(--text-body-size-small);\n  font-weight: var(--base-text-weight-medium);\n  line-height: 18px;\n  white-space: nowrap;\n  border: var(--borderWidth-thin) solid var(--borderColor-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(--fgColor-default);\n  border-color: var(--borderColor-neutral-emphasis);\n}\n\n.Label--secondary {\n  color: var(--fgColor-muted);\n  border-color: var(--borderColor-default);\n}\n\n/* Colors */\n\n.Label--info, /* TODO: deprecate */\n.Label--accent {\n  color: var(--fgColor-accent);\n  border-color: var(--borderColor-accent-emphasis);\n}\n\n.Label--success {\n  color: var(--fgColor-success);\n  border-color: var(--borderColor-success-emphasis);\n}\n\n.Label--warning, /* TODO: deprecate */\n.Label--attention {\n  color: var(--fgColor-attention);\n  border-color: var(--borderColor-attention-emphasis);\n}\n\n.Label--severe {\n  color: var(--fgColor-severe);\n  border-color: var(--borderColor-severe-emphasis);\n}\n\n.Label--danger {\n  color: var(--fgColor-danger);\n  border-color: var(--borderColor-danger-emphasis);\n}\n\n.Label--open {\n  color: var(--fgColor-open);\n  border-color: var(--borderColor-open-emphasis);\n}\n\n.Label--closed {\n  color: var(--fgColor-closed);\n  border-color: var(--borderColor-closed-emphasis);\n}\n\n.Label--done {\n  color: var(--fgColor-done);\n  border-color: var(--borderColor-done-emphasis);\n}\n\n.Label--sponsors {\n  color: var(--fgColor-sponsors);\n  border-color: var(--borderColor-sponsors-emphasis);\n}\n"]}

data/app/components/primer/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(--text-body-size-small);
+  font-weight: var(--base-text-weight-medium);
+  line-height: 18px;
+  white-space: nowrap;
+  border: var(--borderWidth-thin) solid var(--borderColor-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(--fgColor-default);
+  border-color: var(--borderColor-neutral-emphasis);
+}
+
+.Label--secondary {
+  color: var(--fgColor-muted);
+  border-color: var(--borderColor-default);
+}
+
+/* Colors */
+
+.Label--info, /* TODO: deprecate */
+.Label--accent {
+  color: var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
+}
+
+.Label--success {
+  color: var(--fgColor-success);
+  border-color: var(--borderColor-success-emphasis);
+}
+
+.Label--warning, /* TODO: deprecate */
+.Label--attention {
+  color: var(--fgColor-attention);
+  border-color: var(--borderColor-attention-emphasis);
+}
+
+.Label--severe {
+  color: var(--fgColor-severe);
+  border-color: var(--borderColor-severe-emphasis);
+}
+
+.Label--danger {
+  color: var(--fgColor-danger);
+  border-color: var(--borderColor-danger-emphasis);
+}
+
+.Label--open {
+  color: var(--fgColor-open);
+  border-color: var(--borderColor-open-emphasis);
+}
+
+.Label--closed {
+  color: var(--fgColor-closed);
+  border-color: var(--borderColor-closed-emphasis);
+}
+
+.Label--done {
+  color: var(--fgColor-done);
+  border-color: var(--borderColor-done-emphasis);
+}
+
+.Label--sponsors {
+  color: var(--fgColor-sponsors);
+  border-color: var(--borderColor-sponsors-emphasis);
+}

data/app/components/primer/beta/label.rb

@@ -0,0 +1,100 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # Use `Label` to add contextual metadata to a design.
+    #
+    # @accessibility
+    #   Use `aria-label` if the `Label` or the context around it don't explain the label.
+    class Label < Primer::Component
+      status :beta
+
+      DEFAULT_TAG = :span
+      TAG_OPTIONS = [DEFAULT_TAG, :summary, :a, :div].freeze
+
+      DEFAULT_SCHEME = :default
+      SCHEME_MAPPINGS = {
+        DEFAULT_SCHEME => "",
+        :primary => "Label--primary",
+        :secondary => "Label--secondary",
+        :accent => "Label--accent",
+        :success => "Label--success",
+        :attention => "Label--attention",
+        :danger => "Label--danger",
+        :severe => "Label--severe",
+        :done => "Label--done",
+        :sponsors => "Label--sponsors",
+        # deprecated
+        :info => "Label--info",
+        :warning => "Label--warning",
+        :orange => "Label--orange",
+        :purple => "Label--purple"
+      }.freeze
+      DEPRECATED_SCHEME_OPTIONS = [:info, :warning, :orange, :purple].freeze
+      SCHEME_OPTIONS = (SCHEME_MAPPINGS.keys - DEPRECATED_SCHEME_OPTIONS).freeze
+
+      DEFAULT_SIZE = :medium
+      SIZE_MAPPINGS = {
+        DEFAULT_SIZE => nil,
+        :large => "Label--large"
+      }.freeze
+      SIZE_OPTIONS = SIZE_MAPPINGS.keys
+
+      DEFAULT_VARIANT = :none
+      VARIANT_OPTIONS = [DEFAULT_VARIANT].freeze
+      DEPRECATED_VARIANT_OPTIONS = [:large, :inline].freeze
+
+      INLINE_CLASS = "Label--inline"
+
+      # @example Schemes
+      #   <%= render(Primer::Beta::Label.new) { "Default" } %>
+      #   <%= render(Primer::Beta::Label.new(scheme: :primary)) { "Primary" } %>
+      #   <%= render(Primer::Beta::Label.new(scheme: :secondary)) { "Secondary" } %>
+      #   <%= render(Primer::Beta::Label.new(scheme: :accent)) { "Accent" } %>
+      #   <%= render(Primer::Beta::Label.new(scheme: :success)) { "Success" } %>
+      #   <%= render(Primer::Beta::Label.new(scheme: :attention)) { "Attention" } %>
+      #   <%= render(Primer::Beta::Label.new(scheme: :danger)) { "Danger" } %>
+      #   <%= render(Primer::Beta::Label.new(scheme: :severe)) { "Severe" } %>
+      #   <%= render(Primer::Beta::Label.new(scheme: :done)) { "Done" } %>
+      #   <%= render(Primer::Beta::Label.new(scheme: :sponsors)) { "Sponsors" } %>
+      #
+      # @example Sizes
+      #   <%= render(Primer::Beta::Label.new) { "Medium" } %>
+      #   <%= render(Primer::Beta::Label.new(size: :large)) { "Large" } %>
+      #
+      # @example Inline
+      #   <%= render(Primer::Beta::Label.new) { "Default" } %>
+      #   <%= render(Primer::Beta::Label.new(inline: true)) { "Inline" } %>
+      #
+      # @param tag [Symbol] <%= one_of(Primer::Beta::Label::TAG_OPTIONS) %>
+      # @param scheme [Symbol] <%= one_of(Primer::Beta::Label::SCHEME_MAPPINGS.keys) %>
+      # @param size [Symbol] <%= one_of(Primer::Beta::Label::SIZE_OPTIONS) %>
+      # @param inline [Boolean] Whether or not to render this label inline.
+      # @param variant [Symbol] <%= one_of(Primer::Beta::Label::VARIANT_OPTIONS + Primer::Beta::Label::DEPRECATED_VARIANT_OPTIONS) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+
+      def initialize(tag: DEFAULT_TAG, scheme: DEFAULT_SCHEME, size: DEFAULT_SIZE, inline: false, variant: DEFAULT_VARIANT, **system_arguments)
+        @system_arguments = system_arguments
+
+        @variant = fetch_or_fallback(VARIANT_OPTIONS, variant, nil, deprecated_values: DEPRECATED_VARIANT_OPTIONS)
+        @scheme = fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME, deprecated_values: DEPRECATED_SCHEME_OPTIONS)
+        @size = fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)
+        @size = :large if @variant == :large
+        @inline = inline || @variant == :inline
+
+        @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
+        @system_arguments[:classes] = class_names(
+          "Label",
+          system_arguments[:classes],
+          SCHEME_MAPPINGS[@scheme],
+          SIZE_MAPPINGS[@size],
+          @inline ? INLINE_CLASS : nil
+        )
+      end
+
+      def call
+        render(Primer::BaseComponent.new(**@system_arguments)) { content }
+      end
+    end
+  end
+end

data/app/components/primer/beta/link.css

@@ -0,0 +1 @@
+.Link{color:var(--fgColor-accent,var(--color-accent-fg))}.Link:hover{cursor:pointer}.Link:focus,.Link:hover{text-decoration:underline}.Link:focus,.Link:focus-visible{outline-offset:0}.Link--primary{color:var(--fgColor-default,var(--color-fg-default))!important}.Link--primary:hover{color:var(--fgColor-accent,var(--color-accent-fg))!important}.Link--secondary{color:var(--fgColor-muted,var(--color-fg-muted))!important}.Link--secondary:hover{color:var(--fgColor-accent,var(--color-accent-fg))!important}.Link--muted{color:var(--fgColor-muted,var(--color-fg-muted))!important}.Link--muted:hover{text-decoration:none}.Link--muted:hover,.Link--onHover:hover{color:var(--fgColor-accent,var(--color-accent-fg))!important}.Link--onHover:hover{cursor:pointer;text-decoration:underline}.Link--muted:hover [class*=color-fg],.Link--primary:hover [class*=color-fg],.Link--secondary:hover [class*=color-fg]{color:inherit!important}

data/app/components/primer/beta/link.css.json

@@ -0,0 +1,19 @@
+{
+  "name": "beta/link",
+  "selectors": [
+    ".Link",
+    ".Link:hover",
+    ".Link:focus",
+    ".Link:focus-visible",
+    ".Link--primary",
+    ".Link--primary:hover",
+    ".Link--secondary",
+    ".Link--secondary:hover",
+    ".Link--muted",
+    ".Link--muted:hover",
+    ".Link--onHover:hover",
+    ".Link--muted:hover [class*=color-fg]",
+    ".Link--primary:hover [class*=color-fg]",
+    ".Link--secondary:hover [class*=color-fg]"
+  ]
+}

data/app/components/primer/beta/link.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["link.pcss"],"names":[],"mappings":"AAEA,MACE,kDAeF,CAbE,YAEE,cACF,CAEA,wBAJE,yBAMF,CAEA,gCAEE,gBACF,CAGF,eACE,8DAKF,CAHE,qBACE,4DACF,CAGF,iBACE,0DAKF,CAHE,uBACE,4DACF,CAGF,aACE,0DAMF,CAJE,mBAEE,oBACF,CAMA,wCARE,4DAYF,CAJA,qBAGE,cAAe,CADf,yBAEF,CAQA,qHACE,uBACF","file":"link.css","sourcesContent":["/* Links */\n\n.Link {\n  color: var(--fgColor-accent);\n\n  &:hover {\n    text-decoration: underline;\n    cursor: pointer;\n  }\n\n  &:focus {\n    text-decoration: underline;\n  }\n\n  &:focus,\n  &:focus-visible {\n    outline-offset: 0;\n  }\n}\n\n.Link--primary {\n  color: var(--fgColor-default) !important;\n\n  &:hover {\n    color: var(--fgColor-accent) !important;\n  }\n}\n\n.Link--secondary {\n  color: var(--fgColor-muted) !important;\n\n  &:hover {\n    color: var(--fgColor-accent) !important;\n  }\n}\n\n.Link--muted {\n  color: var(--fgColor-muted) !important;\n\n  &:hover {\n    color: var(--fgColor-accent) !important;\n    text-decoration: none;\n  }\n}\n\n/* Set the link color only on hover\n   Useful when you want only part of a link to turn blue on hover */\n.Link--onHover {\n  &:hover {\n    color: var(--fgColor-accent) !important;\n    text-decoration: underline;\n    cursor: pointer;\n  }\n}\n\n/* When using a color utility class inside of a link class\n   color should change with link on hover. */\n.Link--secondary,\n.Link--primary,\n.Link--muted {\n  &:hover [class*='color-fg'] {\n    color: inherit !important;\n  }\n}\n"]}