primer_view_components 0.1.8 → 0.2.0

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

@@ -9,25 +9,25 @@
 /* base button */
 .Button {
   position: relative;
-  font-size: var(--text-body-size-medium, 14px);
-  font-weight: var(--base-text-weight-medium, 500);
+  font-size: var(--text-body-size-medium);
+  font-weight: var(--base-text-weight-medium);
   cursor: pointer;
   user-select: none;
   background-color: transparent;
-  border: var(--borderWidth-thin, 1px) solid;
+  border: var(--borderWidth-thin) solid;
   border-color: transparent;
-  border-radius: var(--borderRadius-medium, 6px);
+  border-radius: var(--borderRadius-medium);
   color: var(--color-btn-text);
   transition: var(--duration-fast) var(--easing-easeInOut);
   transition-property: color, fill, background-color, border-color;
   text-align: center;
-  height: var(--control-medium-size, 32px);
-  padding: 0 var(--control-medium-paddingInline-normal, 12px);
+  height: var(--control-medium-size);
+  padding: 0 var(--control-medium-paddingInline-normal);
   display: inline-flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  gap: var(--base-size-4, 4px);
+  gap: var(--base-size-4);
   min-width: max-content;
 
   /* mobile friendly sizing */
@@ -78,7 +78,7 @@ summary.Button {
   /* padding-bottom: 1px; optical alignment for firefox */
 
   & > :not(:last-child) {
-    margin-right: var(--control-medium-gap, 8px);
+    margin-right: var(--control-medium-gap);
   }
 }
 
@@ -103,7 +103,7 @@ summary.Button {
 .Button-label {
   grid-area: text;
   white-space: nowrap;
-  line-height: var(--text-body-lineHeight-medium, calc(20 / 14));
+  line-height: var(--text-body-lineHeight-medium);
 }
 
 .Button-leadingVisual {
@@ -115,40 +115,40 @@ summary.Button {
 }
 
 .Button-trailingAction {
-  margin-right: calc(var(--base-size-4, 4px) * -1);
+  margin-right: calc(var(--base-size-4) * -1);
 }
 
 /* sizes */
 
 .Button--small {
-  font-size: var(--text-body-size-small, 12px);
-  height: var(--control-small-size, 28px);
-  padding: 0 var(--control-small-paddingInline-condensed, 8px);
-  gap: var(--control-small-gap, 4px);
+  font-size: var(--text-body-size-small);
+  height: var(--control-small-size);
+  padding: 0 var(--control-small-paddingInline-condensed);
+  gap: var(--control-small-gap);
 
   & .Button-label {
-    line-height: var(--text-body-lineHeight-small, calc(20 / 12));
+    line-height: var(--text-body-lineHeight-small);
   }
 
   & .Button-content {
     & > :not(:last-child) {
-      margin-right: var(--control-small-gap, 4px);
+      margin-right: var(--control-small-gap);
     }
   }
 }
 
 .Button--large {
-  height: var(--control-large-size, 40px);
-  padding: 0 var(--control-large-paddingInline-spacious, 16px);
-  gap: var(--control-large-gap, 8px);
+  height: var(--control-large-size);
+  padding: 0 var(--control-large-paddingInline-spacious);
+  gap: var(--control-large-gap);
 
   & .Button-label {
-    line-height: var(--text-body-lineHeight-large, calc(48 / 32));
+    line-height: var(--text-body-lineHeight-large);
   }
 
   & .Button-content {
     & > :not(:last-child) {
-      margin-right: var(--control-large-gap, 8px);
+      margin-right: var(--control-large-gap);
     }
   }
 }
@@ -315,6 +315,11 @@ summary.Button {
     background-color: var(--color-btn-danger-hover-bg);
     border-color: var(--color-btn-danger-hover-border);
     box-shadow: var(--color-btn-danger-hover-shadow), var(--color-btn-danger-hover-inset-shadow);
+
+    & .Counter {
+      color: var(--color-btn-danger-hover-counter-fg);
+      background-color: var(--color-btn-danger-hover-counter-bg);
+    }
   }
 
   &:active:not(:disabled),
@@ -332,6 +337,16 @@ summary.Button {
     fill: var(--color-btn-danger-disabled-text);
     background-color: var(--color-btn-danger-disabled-bg);
     border-color: var(--color-btn-border);
+
+    & .Counter {
+      color: var(--color-btn-danger-disabled-counter-fg);
+      background-color: var(--color-btn-danger-disabled-counter-bg);
+    }
+  }
+
+  & .Counter {
+    color: var(--color-btn-danger-counter-fg);
+    background-color: var(--color-btn-danger-counter-bg);
   }
 }
 
@@ -339,13 +354,13 @@ summary.Button {
   display: inline-grid;
   place-content: center;
   padding: unset;
-  width: var(--control-medium-size, 32px);
+  width: var(--control-medium-size);
 
   &.Button--small {
-    width: var(--control-small-size, 28px);
+    width: var(--control-small-size);
   }
 
   &.Button--large {
-    width: var(--control-large-size, 40px);
+    width: var(--control-large-size);
   }
 }

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

@@ -135,18 +135,21 @@ module Primer
       # @param align_content [Symbol] <%= one_of(Primer::Beta::Button::ALIGN_CONTENT_OPTIONS) %>
       # @param tag [Symbol] (Primer::Beta::BaseButton::DEFAULT_TAG) <%= one_of(Primer::Beta::BaseButton::TAG_OPTIONS) %>
       # @param type [Symbol] (Primer::Beta::BaseButton::DEFAULT_TYPE) <%= one_of(Primer::Beta::BaseButton::TYPE_OPTIONS) %>
+      # @param disabled [Boolean] Whether or not the button is disabled. If true, this option forces `tag:` to `:button`.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       def initialize(
         scheme: DEFAULT_SCHEME,
         size: DEFAULT_SIZE,
         block: false,
         align_content: DEFAULT_ALIGN_CONTENT,
+        disabled: false,
         **system_arguments
       )
         @scheme = scheme
         @block = block
 
         @system_arguments = system_arguments
+        @system_arguments[:disabled] = disabled
 
         @id = @system_arguments[:id]
 

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

@@ -0,0 +1 @@
+.ButtonGroup{display:inline-flex}.ButtonGroup .Button{border-radius:0;margin-inline-end:-1px;position:relative}.ButtonGroup .Button:active,.ButtonGroup .Button:focus,.ButtonGroup .Button:hover{z-index:1}.ButtonGroup>.Button-withTooltip:first-child .Button,.ButtonGroup>:first-child{border-bottom-left-radius:var(--borderRadius-medium,6px);border-top-left-radius:var(--borderRadius-medium,6px)}.ButtonGroup>.Button-withTooltip:last-child .Button,.ButtonGroup>:last-child{border-bottom-right-radius:var(--borderRadius-medium,6px);border-top-right-radius:var(--borderRadius-medium,6px)}

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

@@ -0,0 +1,14 @@
+{
+  "name": "beta/button_group",
+  "selectors": [
+    ".ButtonGroup",
+    ".ButtonGroup .Button",
+    ".ButtonGroup .Button:active",
+    ".ButtonGroup .Button:focus",
+    ".ButtonGroup .Button:hover",
+    ".ButtonGroup>.Button-withTooltip:first-child .Button",
+    ".ButtonGroup>:first-child",
+    ".ButtonGroup>.Button-withTooltip:last-child .Button",
+    ".ButtonGroup>:last-child"
+  ]
+}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["button_group.pcss"],"names":[],"mappings":"AAAA,aACE,mBAyBF,CAvBE,qBAGE,eAAgB,CAFhB,sBAAuB,CACvB,iBAQF,CALE,kFAGE,SACF,CAGF,+EAGE,wDAAqD,CADrD,qDAEF,CAEA,6EAGE,yDAAsD,CADtD,sDAEF","file":"button_group.css","sourcesContent":[".ButtonGroup {\n  display: inline-flex;\n\n  & .Button {\n    margin-inline-end: -1px;\n    position: relative;\n    border-radius: 0;\n\n    &:focus,\n    &:active,\n    &:hover {\n      z-index: 1;\n    }\n  }\n\n  & > :first-child,\n  & > :first-child.Button-withTooltip .Button {\n    border-top-left-radius: var(--borderRadius-medium);\n    border-bottom-left-radius: var(--borderRadius-medium);\n  }\n\n  & > :last-child,\n  & > :last-child.Button-withTooltip .Button {\n    border-top-right-radius: var(--borderRadius-medium);\n    border-bottom-right-radius: var(--borderRadius-medium);\n  }\n}\n"]}

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

@@ -0,0 +1,27 @@
+.ButtonGroup {
+  display: inline-flex;
+
+  & .Button {
+    margin-inline-end: -1px;
+    position: relative;
+    border-radius: 0;
+
+    &:focus,
+    &:active,
+    &:hover {
+      z-index: 1;
+    }
+  }
+
+  & > :first-child,
+  & > :first-child.Button-withTooltip .Button {
+    border-top-left-radius: var(--borderRadius-medium);
+    border-bottom-left-radius: var(--borderRadius-medium);
+  }
+
+  & > :last-child,
+  & > :last-child.Button-withTooltip .Button {
+    border-top-right-radius: var(--borderRadius-medium);
+    border-bottom-right-radius: var(--borderRadius-medium);
+  }
+}

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

@@ -8,45 +8,45 @@ module Primer
 
       # Required list of buttons to be rendered.
       #
-      # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::ButtonComponent) %> except for `size` and `group_item`.
+      # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::Beta::Button) %>
       renders_many :buttons, lambda { |**kwargs|
-        kwargs[:group_item] = true
         kwargs[:size] = @size
+        kwargs[:scheme] = @scheme
 
-        # rubocop:disable Primer/ComponentNameMigration
-        Primer::ButtonComponent.new(**kwargs)
-        # rubocop:enable Primer/ComponentNameMigration
+        if kwargs[:icon]
+          Primer::Beta::IconButton.new(**kwargs)
+        else
+          Primer::Beta::Button.new(**kwargs)
+        end
       }
 
       # @example Default
       #
       #   <%= render(Primer::Beta::ButtonGroup.new) do |component| %>
-      #     <% component.with_button { "Default" } %>
-      #     <% component.with_button(scheme: :primary) { "Primary" } %>
-      #     <% component.with_button(scheme: :danger) { "Danger" } %>
-      #     <% component.with_button(scheme: :outline) { "Outline" } %>
-      #     <% component.with_button(classes: "custom-class") { "Custom class" } %>
+      #     <% component.with_button { "Button 1" } %>
+      #     <% component.with_button { "Button 2" } %>
+      #     <% component.with_button { "Button 3" } %>
       #   <% end %>
       #
       # @example Sizes
       #
       #   <%= render(Primer::Beta::ButtonGroup.new(size: :small)) do |component| %>
-      #     <% component.with_button { "Default" } %>
-      #     <% component.with_button(scheme: :primary) { "Primary" } %>
-      #     <% component.with_button(scheme: :danger) { "Danger" } %>
-      #     <% component.with_button(scheme: :outline) { "Outline" } %>
+      #     <% component.with_button { "Button 1" } %>
+      #     <% component.with_button { "Button 2" } %>
+      #     <% component.with_button { "Button 3" } %>
       #   <% end %>
       #
-      # @param variant [Symbol] DEPRECATED. <%= one_of(Primer::ButtonComponent::SIZE_OPTIONS) %>
-      # @param size [Symbol] <%= one_of(Primer::ButtonComponent::SIZE_OPTIONS) %>
+      # @param scheme [Symbol] DEPRECATED. <%= one_of(Primer::Beta::Button::SCHEME_OPTIONS) %>
+      # @param size [Symbol] <%= one_of(Primer::Beta::Button::SIZE_OPTIONS) %>
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(variant: nil, size: Primer::ButtonComponent::DEFAULT_SIZE, **system_arguments)
-        @size = variant || size
+      def initialize(scheme: Primer::Beta::Button::DEFAULT_SCHEME, size: Primer::Beta::Button::DEFAULT_SIZE, **system_arguments)
+        @size = size
+        @scheme = scheme
         @system_arguments = deny_tag_argument(**system_arguments)
         @system_arguments[:tag] = :div
 
         @system_arguments[:classes] = class_names(
-          "BtnGroup",
+          "ButtonGroup",
           system_arguments[:classes]
         )
       end

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

@@ -18,8 +18,9 @@ module Primer
       #   <%= render(Primer::Beta::CloseButton.new) %>
       #
       # @param type [Symbol] <%= one_of(Primer::Beta::CloseButton::TYPE_OPTIONS) %>
+      # @param disabled [Boolean] Whether or not the button is disabled.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(type: DEFAULT_TYPE, **system_arguments)
+      def initialize(type: DEFAULT_TYPE, disabled: false, **system_arguments)
         @system_arguments = deny_tag_argument(**system_arguments)
         @system_arguments[:tag] = :button
         @system_arguments[:block] = false
@@ -29,6 +30,7 @@ module Primer
           system_arguments[:classes]
         )
         @system_arguments[:"aria-label"] = aria("label", system_arguments) || "Close"
+        @system_arguments[:disabled] = disabled
       end
 
       def call

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

@@ -1 +1 @@
-.Counter{background-color:var(--color-neutral-muted);border:var(--borderWidth-thin,1px) solid var(--color-counter-border);border-radius:2em;color:var(--color-fg-default);display:inline-block;font-size:var(--text-body-size-small,12px);font-weight:var(--base-text-weight-medium,500);line-height:calc(var(--base-size-20, 20px) - var(--borderWidth-thin, 1px)*2);min-width:var(--base-size-20,20px);padding:0 6px;text-align:center}.Counter:empty{display:none}.Counter .octicon{opacity:.8;vertical-align:text-top}.Counter--primary{background-color:var(--color-neutral-emphasis);color:var(--color-fg-on-emphasis)}.Counter--secondary{background-color:var(--color-neutral-subtle);color:var(--color-fg-muted)}
+.Counter{background-color:var(--color-neutral-muted);border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--color-counter-border);border-radius:2em;color:var(--color-fg-default);display:inline-block;font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-medium,500);line-height:calc(var(--base-size-20,1.25rem) - var(--borderWidth-thin,max(1px, .0625rem))*2);min-width:var(--base-size-20,1.25rem);padding:0 6px;text-align:center}.Counter:empty{display:none}.Counter .octicon{opacity:.8;vertical-align:text-top}.Counter--primary{background-color:var(--color-neutral-emphasis);color:var(--color-fg-on-emphasis)}.Counter--secondary{background-color:var(--color-neutral-subtle);color:var(--color-fg-muted)}

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

@@ -1 +1 @@
-{"version":3,"sources":["counter.pcss"],"names":[],"mappings":"AAEA,SASE,2CAA4C,CAC5C,oEAAsE,CACtE,iBAAkB,CAJlB,6BAA8B,CAN9B,oBAAqB,CAGrB,0CAA4C,CAC5C,8CAAgD,CAChD,4EAA+E,CAJ/E,kCAAoC,CACpC,aAAc,CAKd,iBAcF,CATE,eACE,YACF,CAGA,kBAEE,UAAY,CADZ,uBAEF,CAGF,kBAEE,8CAA+C,CAD/C,iCAEF,CAEA,oBAEE,4CAA6C,CAD7C,2BAEF","file":"counter.css","sourcesContent":["/* Counter */\n\n.Counter {\n  display: inline-block;\n  min-width: var(--base-size-20, 20px); /* makes sure it's a circle with just one digit */\n  padding: 0 6px;\n  font-size: var(--text-body-size-small, 12px);\n  font-weight: var(--base-text-weight-medium, 500);\n  line-height: calc(var(--base-size-20, 20px) - var(--borderWidth-thin, 1px) * 2); /* 20px - 2px for the borders */\n  color: var(--color-fg-default);\n  text-align: center;\n  background-color: var(--color-neutral-muted);\n  border: var(--borderWidth-thin, 1px) solid var(--color-counter-border);\n  border-radius: 2em;\n\n  &:empty {\n    display: none;\n  }\n\n  /* Is this selector used? could not find any use of it */\n  & .octicon {\n    vertical-align: text-top;\n    opacity: 0.8;\n  }\n}\n\n.Counter--primary {\n  color: var(--color-fg-on-emphasis);\n  background-color: var(--color-neutral-emphasis);\n}\n\n.Counter--secondary {\n  color: var(--color-fg-muted);\n  background-color: var(--color-neutral-subtle);\n}\n"]}
+{"version":3,"sources":["counter.pcss"],"names":[],"mappings":"AAEA,SASE,2CAA4C,CAC5C,kFAAiE,CACjE,iBAAkB,CAJlB,6BAA8B,CAN9B,oBAAqB,CAGrB,4CAAsC,CACtC,8CAA2C,CAC3C,4FAAoE,CAJpE,qCAA8B,CAC9B,aAAc,CAKd,iBAcF,CATE,eACE,YACF,CAGA,kBAEE,UAAY,CADZ,uBAEF,CAGF,kBAEE,8CAA+C,CAD/C,iCAEF,CAEA,oBAEE,4CAA6C,CAD7C,2BAEF","file":"counter.css","sourcesContent":["/* Counter */\n\n.Counter {\n  display: inline-block;\n  min-width: var(--base-size-20); /* makes sure it's a circle with just one digit */\n  padding: 0 6px;\n  font-size: var(--text-body-size-small);\n  font-weight: var(--base-text-weight-medium);\n  line-height: calc(var(--base-size-20) - var(--borderWidth-thin) * 2); /* 20px - 2px for the borders */\n  color: var(--color-fg-default);\n  text-align: center;\n  background-color: var(--color-neutral-muted);\n  border: var(--borderWidth-thin) solid var(--color-counter-border);\n  border-radius: 2em;\n\n  &:empty {\n    display: none;\n  }\n\n  /* Is this selector used? could not find any use of it */\n  & .octicon {\n    vertical-align: text-top;\n    opacity: 0.8;\n  }\n}\n\n.Counter--primary {\n  color: var(--color-fg-on-emphasis);\n  background-color: var(--color-neutral-emphasis);\n}\n\n.Counter--secondary {\n  color: var(--color-fg-muted);\n  background-color: var(--color-neutral-subtle);\n}\n"]}

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

@@ -2,15 +2,15 @@
 
 .Counter {
   display: inline-block;
-  min-width: var(--base-size-20, 20px); /* makes sure it's a circle with just one digit */
+  min-width: var(--base-size-20); /* makes sure it's a circle with just one digit */
   padding: 0 6px;
-  font-size: var(--text-body-size-small, 12px);
-  font-weight: var(--base-text-weight-medium, 500);
-  line-height: calc(var(--base-size-20, 20px) - var(--borderWidth-thin, 1px) * 2); /* 20px - 2px for the borders */
+  font-size: var(--text-body-size-small);
+  font-weight: var(--base-text-weight-medium);
+  line-height: calc(var(--base-size-20) - var(--borderWidth-thin) * 2); /* 20px - 2px for the borders */
   color: var(--color-fg-default);
   text-align: center;
   background-color: var(--color-neutral-muted);
-  border: var(--borderWidth-thin, 1px) solid var(--color-counter-border);
+  border: var(--borderWidth-thin) solid var(--color-counter-border);
   border-radius: 2em;
 
   &:empty {

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

@@ -1,4 +1,8 @@
-<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+<% if disabled? %>
   <%= summary %>
-  <%= body %>
+<% else %>
+  <%= render(Primer::BaseComponent.new(**@system_arguments)) do %>
+    <%= summary %>
+    <%= body %>
+  <% end %>
 <% end %>

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

@@ -15,19 +15,24 @@ module Primer
         :dark => "details-overlay details-overlay-dark"
       }.freeze
 
-      # Use the Summary slot as a trigger to reveal the content.
-      #
-      # @param button [Boolean] (true) Whether to render the Summary as a button or not.
-      # @param kwargs [Hash] The same arguments as <%= link_to_system_arguments_docs %>.
+      attr_reader :disabled
+      alias disabled? disabled
+
       renders_one :summary, lambda { |button: true, **system_arguments|
         system_arguments[:tag] = :summary
         system_arguments[:role] = "button"
 
-        return Primer::BaseComponent.new(**system_arguments) unless button
-
-        # rubocop:disable Primer/ComponentNameMigration
-        Primer::ButtonComponent.new(**system_arguments)
-        # rubocop:enable Primer/ComponentNameMigration
+        if disabled?
+          # rubocop:disable Primer/ComponentNameMigration
+          Primer::ButtonComponent.new(**system_arguments, disabled: true)
+          # rubocop:enable Primer/ComponentNameMigration
+        elsif button
+          # rubocop:disable Primer/ComponentNameMigration
+          Primer::ButtonComponent.new(**system_arguments)
+          # rubocop:enable Primer/ComponentNameMigration
+        else
+          Primer::BaseComponent.new(**system_arguments)
+        end
       }
 
       # Use the Body slot as the main content to be shown when triggered by the Summary.
@@ -53,8 +58,9 @@ module Primer
       #
       # @param overlay [Symbol] Dictates the type of overlay to render with. <%= one_of(Primer::Beta::Details::OVERLAY_MAPPINGS.keys) %>
       # @param reset [Boolean] Defaults to false. If set to true, it will remove the default caret and remove style from the summary element
+      # @param disabled [Boolean] Whether or not to disable the summary button.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(overlay: NO_OVERLAY, reset: false, **system_arguments)
+      def initialize(overlay: NO_OVERLAY, reset: false, disabled: false, **system_arguments)
         @system_arguments = deny_tag_argument(**system_arguments)
         @system_arguments[:tag] = :details
         @system_arguments[:classes] = class_names(
@@ -62,6 +68,8 @@ module Primer
           OVERLAY_MAPPINGS[fetch_or_fallback(OVERLAY_MAPPINGS.keys, overlay, NO_OVERLAY)],
           "details-reset" => reset
         )
+        @disabled = disabled
+        @summary_info = nil
       end
 
       def render?

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

@@ -1 +1 @@
-.flash:not(.Banner){background-image:linear-gradient(var(--color-accent-subtle),var(--color-accent-subtle));border-color:var(--color-accent-muted);border-radius:var(--borderRadius-medium,6px);border-style:solid;border-width:var(--borderWidth-thin,1px);color:var(--color-fg-default);padding:var(--base-size-20,20px) var(--control-medium-paddingInline-spacious,16px);position:relative}.flash:not(.Banner) .octicon{color:var(--color-accent-fg);margin-right:var(--base-size-12,12px)}.flash:not(.Banner) p:last-child{margin-bottom:0}.flash-messages{margin-bottom:var(--stack-gap-spacious,24px)}.flash-close:not(.Banner-close){-webkit-appearance:none;appearance:none;background:none;border:0;cursor:pointer;float:right;margin:calc(var(--control-medium-paddingInline-spacious, 16px)*-1);padding:var(--control-medium-paddingInline-spacious,16px);text-align:center}.flash-close:not(.Banner-close):hover{opacity:.7}.flash-close:not(.Banner-close):active{opacity:.5}.flash-close:not(.Banner-close) .octicon{margin-right:0}.flash-action:not(.Banner-actions){background-clip:padding-box;float:right;margin-left:var(--stack-gap-spacious,24px);margin-top:-3px}.flash-action.btn:not(.Banner-actions) .octicon{color:var(--color-fg-muted);margin-right:var(--control-small-gap,4px)}.flash-action.btn-primary:not(.Banner-actions){background-clip:initial}.flash-action.btn-primary:not(.Banner-actions) .octicon{color:inherit}.flash-warn:not(.Banner){background-image:linear-gradient(var(--color-attention-subtle),var(--color-attention-subtle));border-color:var(--color-attention-muted);color:var(--color-fg-default)}.flash-warn:not(.Banner) .octicon{color:var(--color-attention-fg)}.flash-error:not(.Banner){background-image:linear-gradient(var(--color-danger-subtle),var(--color-danger-subtle));border-color:var(--color-danger-muted);color:var(--color-fg-default)}.flash-error:not(.Banner) .octicon{color:var(--color-danger-fg)}.flash-success:not(.Banner){background-image:linear-gradient(var(--color-success-subtle),var(--color-success-subtle));border-color:var(--color-success-muted);color:var(--color-fg-default)}.flash-success:not(.Banner) .octicon{color:var(--color-success-fg)}.flash-full:not(.Banner){border-radius:0;border-width:var(--borderWidth-thin,1px) 0;margin-top:calc(var(--borderWidth-thin, 1px)*-1)}.flash-banner{border-left:0;border-radius:0;border-right:0;border-top:0;position:fixed;top:0;width:100%;z-index:90}.flash-banner,.flash-full{background-color:var(--color-canvas-default)}.warning{background-color:var(--color-attention-subtle);font-weight:var(--base-text-weight-semibold,600);margin-bottom:.8em;padding:.5em}
+.flash:not(.Banner){background-image:linear-gradient(var(--color-accent-subtle),var(--color-accent-subtle));border-color:var(--color-accent-muted);border-radius:var(--borderRadius-medium,6px);border-style:solid;border-width:var(--borderWidth-thin,max(1px,.0625rem));color:var(--color-fg-default);padding:var(--base-size-20,1.25rem) var(--control-medium-paddingInline-spacious,1rem);position:relative}.flash:not(.Banner) .octicon{color:var(--color-accent-fg);margin-right:var(--base-size-12,.75rem)}.flash:not(.Banner) p:last-child{margin-bottom:0}.flash-messages{margin-bottom:var(--stack-gap-spacious,1.5rem)}.flash-close:not(.Banner-close){-webkit-appearance:none;appearance:none;background:none;border:0;cursor:pointer;float:right;margin:calc(var(--control-medium-paddingInline-spacious,1rem)*-1);padding:var(--control-medium-paddingInline-spacious,1rem);text-align:center}.flash-close:not(.Banner-close):hover{opacity:.7}.flash-close:not(.Banner-close):active{opacity:.5}.flash-close:not(.Banner-close) .octicon{margin-right:0}.flash-action:not(.Banner-actions){background-clip:padding-box;float:right;margin-left:var(--stack-gap-spacious,1.5rem);margin-top:-3px}.flash-action.btn:not(.Banner-actions) .octicon{color:var(--color-fg-muted);margin-right:var(--control-small-gap,.25rem)}.flash-action.btn-primary:not(.Banner-actions){background-clip:initial}.flash-action.btn-primary:not(.Banner-actions) .octicon{color:inherit}.flash-warn:not(.Banner){background-image:linear-gradient(var(--color-attention-subtle),var(--color-attention-subtle));border-color:var(--color-attention-muted);color:var(--color-fg-default)}.flash-warn:not(.Banner) .octicon{color:var(--color-attention-fg)}.flash-error:not(.Banner){background-image:linear-gradient(var(--color-danger-subtle),var(--color-danger-subtle));border-color:var(--color-danger-muted);color:var(--color-fg-default)}.flash-error:not(.Banner) .octicon{color:var(--color-danger-fg)}.flash-success:not(.Banner){background-image:linear-gradient(var(--color-success-subtle),var(--color-success-subtle));border-color:var(--color-success-muted);color:var(--color-fg-default)}.flash-success:not(.Banner) .octicon{color:var(--color-success-fg)}.flash-full:not(.Banner){border-radius:0;border-width:var(--borderWidth-thin,max(1px,.0625rem)) 0;margin-top:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}.flash-banner{border-left:0;border-radius:0;border-right:0;border-top:0;position:fixed;top:0;width:100%;z-index:90}.flash-banner,.flash-full{background-color:var(--color-canvas-default)}.warning{background-color:var(--color-attention-subtle);font-weight:var(--base-text-weight-semibold,600);margin-bottom:.8em;padding:.5em}

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

@@ -1 +1 @@
-{"version":3,"sources":["flash.pcss"],"names":[],"mappings":"AAGA,oBASE,uFAAyF,CACzF,sCAAuC,CALvC,4CAA8C,CAF9C,kBAAmB,CACnB,wCAA0C,CAI1C,6BAA8B,CAN9B,kFAAqF,CADrF,iBAmBF,CARE,6BACE,4BAA6B,CAC7B,qCACF,CAEA,iCACE,eACF,CAIF,gBACE,4CACF,CAGA,gCAUE,uBAAgB,CAAhB,eAAgB,CAFhB,eAAgB,CAChB,QAAS,CAJT,cAAe,CAJf,WAAY,CAEZ,kEAAqE,CADrE,yDAA2D,CAE3D,iBAmBF,CAXE,sCACE,UACF,CAEA,uCACE,UACF,CAEA,yCACE,cACF,CAIF,mCAIE,2BAA4B,CAH5B,WAAY,CAEZ,0CAA4C,CAD5C,eAgBF,CAZE,gDAEE,2BAA4B,CAD5B,yCAEF,CAEA,+CACE,uBAKF,CAHE,wDACE,aACF,CAMJ,yBAEE,6FAA+F,CAC/F,yCAA0C,CAF1C,6BAOF,CAHE,kCACE,+BACF,CAGF,0BAEE,uFAAyF,CACzF,sCAAuC,CAFvC,6BAOF,CAHE,mCACE,4BACF,CAGF,4BAEE,yFAA2F,CAC3F,uCAAwC,CAFxC,6BAOF,CAHE,qCACE,6BACF,CAKF,yBAGE,eAAgB,CADhB,0CAA4C,CAD5C,gDAGF,CAGA,cAOE,aAAc,CACd,eAAgB,CAFhB,cAAe,CADf,YAAa,CAJb,cAAe,CACf,KAAM,CAEN,UAAW,CADX,UAMF,CAGA,0BAEE,4CACF,CAGA,SAIE,8CAA+C,CAD/C,gDAAkD,CADlD,kBAAoB,CADpB,YAIF","file":"flash.css","sourcesContent":["/* flash */\n\n/* Default flash */\n.flash:not(.Banner) {\n  position: relative;\n  padding: var(--base-size-20, 20px) var(--control-medium-paddingInline-spacious, 16px);\n  border-style: solid;\n  border-width: var(--borderWidth-thin, 1px);\n  border-radius: var(--borderRadius-medium, 6px);\n\n  /* Default color */\n  color: var(--color-fg-default);\n  background-image: linear-gradient(var(--color-accent-subtle), var(--color-accent-subtle));\n  border-color: var(--color-accent-muted);\n\n  & .octicon {\n    color: var(--color-accent-fg);\n    margin-right: var(--base-size-12, 12px);\n  }\n\n  & p:last-child {\n    margin-bottom: 0;\n  }\n}\n\n/* Contain the flash messages */\n.flash-messages {\n  margin-bottom: var(--stack-gap-spacious, 24px);\n}\n\n/* Close button */\n.flash-close:not(.Banner-close) {\n  float: right;\n  padding: var(--control-medium-paddingInline-spacious, 16px);\n  margin: calc(var(--control-medium-paddingInline-spacious, 16px) * -1);\n  text-align: center;\n  cursor: pointer;\n\n  /* Undo `<button>` styles */\n  background: none;\n  border: 0;\n  appearance: none;\n\n  &:hover {\n    opacity: 0.7;\n  }\n\n  &:active {\n    opacity: 0.5;\n  }\n\n  & .octicon {\n    margin-right: 0;\n  }\n}\n\n/* Action button */\n.flash-action:not(.Banner-actions) {\n  float: right;\n  margin-top: -3px;\n  margin-left: var(--stack-gap-spacious, 24px);\n  background-clip: padding-box;\n\n  &.btn .octicon {\n    margin-right: var(--control-small-gap, 4px);\n    color: var(--color-fg-muted);\n  }\n\n  &.btn-primary {\n    background-clip: border-box;\n\n    & .octicon {\n      color: inherit;\n    }\n  }\n}\n\n/* Color variations */\n\n.flash-warn:not(.Banner) {\n  color: var(--color-fg-default);\n  background-image: linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle));\n  border-color: var(--color-attention-muted);\n\n  & .octicon {\n    color: var(--color-attention-fg);\n  }\n}\n\n.flash-error:not(.Banner) {\n  color: var(--color-fg-default);\n  background-image: linear-gradient(var(--color-danger-subtle), var(--color-danger-subtle));\n  border-color: var(--color-danger-muted);\n\n  & .octicon {\n    color: var(--color-danger-fg);\n  }\n}\n\n.flash-success:not(.Banner) {\n  color: var(--color-fg-default);\n  background-image: linear-gradient(var(--color-success-subtle), var(--color-success-subtle));\n  border-color: var(--color-success-muted);\n\n  & .octicon {\n    color: var(--color-success-fg);\n  }\n}\n\n/* Layout variations */\n\n.flash-full:not(.Banner) {\n  margin-top: calc(var(--borderWidth-thin, 1px) * -1);\n  border-width: var(--borderWidth-thin, 1px) 0;\n  border-radius: 0;\n}\n\n/* A banner rendered at the top of the page. */\n.flash-banner {\n  position: fixed;\n  top: 0;\n  z-index: 90;\n  width: 100%;\n  border-top: 0;\n  border-right: 0;\n  border-left: 0;\n  border-radius: 0;\n}\n\n/* Makes sure the background is opaque to cover any content underneath */\n.flash-full,\n.flash-banner {\n  background-color: var(--color-canvas-default);\n}\n\n/* FIXME deprecate this */\n.warning {\n  padding: 0.5em;\n  margin-bottom: 0.8em;\n  font-weight: var(--base-text-weight-semibold, 600);\n  background-color: var(--color-attention-subtle);\n}\n"]}
+{"version":3,"sources":["flash.pcss"],"names":[],"mappings":"AAGA,oBASE,uFAAyF,CACzF,sCAAuC,CALvC,4CAAyC,CAFzC,kBAAmB,CACnB,sDAAqC,CAIrC,6BAA8B,CAN9B,qFAAyE,CADzE,iBAmBF,CARE,6BACE,4BAA6B,CAC7B,uCACF,CAEA,iCACE,eACF,CAIF,gBACE,8CACF,CAGA,gCAUE,uBAAgB,CAAhB,eAAgB,CAFhB,eAAgB,CAChB,QAAS,CAJT,cAAe,CAJf,WAAY,CAEZ,iEAA+D,CAD/D,yDAAqD,CAErD,iBAmBF,CAXE,sCACE,UACF,CAEA,uCACE,UACF,CAEA,yCACE,cACF,CAIF,mCAIE,2BAA4B,CAH5B,WAAY,CAEZ,4CAAsC,CADtC,eAgBF,CAZE,gDAEE,2BAA4B,CAD5B,4CAEF,CAEA,+CACE,uBAKF,CAHE,wDACE,aACF,CAMJ,yBAEE,6FAA+F,CAC/F,yCAA0C,CAF1C,6BAOF,CAHE,kCACE,+BACF,CAGF,0BAEE,uFAAyF,CACzF,sCAAuC,CAFvC,6BAOF,CAHE,mCACE,4BACF,CAGF,4BAEE,yFAA2F,CAC3F,uCAAwC,CAFxC,6BAOF,CAHE,qCACE,6BACF,CAKF,yBAGE,eAAgB,CADhB,wDAAuC,CADvC,8DAGF,CAGA,cAOE,aAAc,CACd,eAAgB,CAFhB,cAAe,CADf,YAAa,CAJb,cAAe,CACf,KAAM,CAEN,UAAW,CADX,UAMF,CAGA,0BAEE,4CACF,CAGA,SAIE,8CAA+C,CAD/C,gDAA6C,CAD7C,kBAAoB,CADpB,YAIF","file":"flash.css","sourcesContent":["/* flash */\n\n/* Default flash */\n.flash:not(.Banner) {\n  position: relative;\n  padding: var(--base-size-20) var(--control-medium-paddingInline-spacious);\n  border-style: solid;\n  border-width: var(--borderWidth-thin);\n  border-radius: var(--borderRadius-medium);\n\n  /* Default color */\n  color: var(--color-fg-default);\n  background-image: linear-gradient(var(--color-accent-subtle), var(--color-accent-subtle));\n  border-color: var(--color-accent-muted);\n\n  & .octicon {\n    color: var(--color-accent-fg);\n    margin-right: var(--base-size-12);\n  }\n\n  & p:last-child {\n    margin-bottom: 0;\n  }\n}\n\n/* Contain the flash messages */\n.flash-messages {\n  margin-bottom: var(--stack-gap-spacious);\n}\n\n/* Close button */\n.flash-close:not(.Banner-close) {\n  float: right;\n  padding: var(--control-medium-paddingInline-spacious);\n  margin: calc(var(--control-medium-paddingInline-spacious) * -1);\n  text-align: center;\n  cursor: pointer;\n\n  /* Undo `<button>` styles */\n  background: none;\n  border: 0;\n  appearance: none;\n\n  &:hover {\n    opacity: 0.7;\n  }\n\n  &:active {\n    opacity: 0.5;\n  }\n\n  & .octicon {\n    margin-right: 0;\n  }\n}\n\n/* Action button */\n.flash-action:not(.Banner-actions) {\n  float: right;\n  margin-top: -3px;\n  margin-left: var(--stack-gap-spacious);\n  background-clip: padding-box;\n\n  &.btn .octicon {\n    margin-right: var(--control-small-gap);\n    color: var(--color-fg-muted);\n  }\n\n  &.btn-primary {\n    background-clip: border-box;\n\n    & .octicon {\n      color: inherit;\n    }\n  }\n}\n\n/* Color variations */\n\n.flash-warn:not(.Banner) {\n  color: var(--color-fg-default);\n  background-image: linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle));\n  border-color: var(--color-attention-muted);\n\n  & .octicon {\n    color: var(--color-attention-fg);\n  }\n}\n\n.flash-error:not(.Banner) {\n  color: var(--color-fg-default);\n  background-image: linear-gradient(var(--color-danger-subtle), var(--color-danger-subtle));\n  border-color: var(--color-danger-muted);\n\n  & .octicon {\n    color: var(--color-danger-fg);\n  }\n}\n\n.flash-success:not(.Banner) {\n  color: var(--color-fg-default);\n  background-image: linear-gradient(var(--color-success-subtle), var(--color-success-subtle));\n  border-color: var(--color-success-muted);\n\n  & .octicon {\n    color: var(--color-success-fg);\n  }\n}\n\n/* Layout variations */\n\n.flash-full:not(.Banner) {\n  margin-top: calc(var(--borderWidth-thin) * -1);\n  border-width: var(--borderWidth-thin) 0;\n  border-radius: 0;\n}\n\n/* A banner rendered at the top of the page. */\n.flash-banner {\n  position: fixed;\n  top: 0;\n  z-index: 90;\n  width: 100%;\n  border-top: 0;\n  border-right: 0;\n  border-left: 0;\n  border-radius: 0;\n}\n\n/* Makes sure the background is opaque to cover any content underneath */\n.flash-full,\n.flash-banner {\n  background-color: var(--color-canvas-default);\n}\n\n/* FIXME deprecate this */\n.warning {\n  padding: 0.5em;\n  margin-bottom: 0.8em;\n  font-weight: var(--base-text-weight-semibold);\n  background-color: var(--color-attention-subtle);\n}\n"]}

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

@@ -3,10 +3,10 @@
 /* Default flash */
 .flash:not(.Banner) {
   position: relative;
-  padding: var(--base-size-20, 20px) var(--control-medium-paddingInline-spacious, 16px);
+  padding: var(--base-size-20) var(--control-medium-paddingInline-spacious);
   border-style: solid;
-  border-width: var(--borderWidth-thin, 1px);
-  border-radius: var(--borderRadius-medium, 6px);
+  border-width: var(--borderWidth-thin);
+  border-radius: var(--borderRadius-medium);
 
   /* Default color */
   color: var(--color-fg-default);
@@ -15,7 +15,7 @@
 
   & .octicon {
     color: var(--color-accent-fg);
-    margin-right: var(--base-size-12, 12px);
+    margin-right: var(--base-size-12);
   }
 
   & p:last-child {
@@ -25,14 +25,14 @@
 
 /* Contain the flash messages */
 .flash-messages {
-  margin-bottom: var(--stack-gap-spacious, 24px);
+  margin-bottom: var(--stack-gap-spacious);
 }
 
 /* Close button */
 .flash-close:not(.Banner-close) {
   float: right;
-  padding: var(--control-medium-paddingInline-spacious, 16px);
-  margin: calc(var(--control-medium-paddingInline-spacious, 16px) * -1);
+  padding: var(--control-medium-paddingInline-spacious);
+  margin: calc(var(--control-medium-paddingInline-spacious) * -1);
   text-align: center;
   cursor: pointer;
 
@@ -58,11 +58,11 @@
 .flash-action:not(.Banner-actions) {
   float: right;
   margin-top: -3px;
-  margin-left: var(--stack-gap-spacious, 24px);
+  margin-left: var(--stack-gap-spacious);
   background-clip: padding-box;
 
   &.btn .octicon {
-    margin-right: var(--control-small-gap, 4px);
+    margin-right: var(--control-small-gap);
     color: var(--color-fg-muted);
   }
 
@@ -110,8 +110,8 @@
 /* Layout variations */
 
 .flash-full:not(.Banner) {
-  margin-top: calc(var(--borderWidth-thin, 1px) * -1);
-  border-width: var(--borderWidth-thin, 1px) 0;
+  margin-top: calc(var(--borderWidth-thin) * -1);
+  border-width: var(--borderWidth-thin) 0;
   border-radius: 0;
 }
 
@@ -137,6 +137,6 @@
 .warning {
   padding: 0.5em;
   margin-bottom: 0.8em;
-  font-weight: var(--base-text-weight-semibold, 600);
+  font-weight: var(--base-text-weight-semibold);
   background-color: var(--color-attention-subtle);
 }

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

@@ -5,7 +5,7 @@ module Primer
     # 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,
@@ -47,23 +47,25 @@ module Primer
       #   <%= 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 tag [Symbol] <%= one_of(Primer::Beta::BaseButton::TAG_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, **system_arguments)
+      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",
@@ -78,6 +80,8 @@ module Primer
         @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

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

@@ -1 +1 @@
-.labels{position:relative}.Label,.label{border:var(--borderWidth-thin,1px) solid var(--color-border-default);border-radius:2em;display:inline-block;font-size:var(--text-body-size-small,12px);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(--color-neutral-emphasis);color:var(--color-fg-default)}.Label--secondary{border-color:var(--color-border-default);color:var(--color-fg-muted)}.Label--accent,.Label--info{border-color:var(--color-accent-emphasis);color:var(--color-accent-fg)}.Label--success{border-color:var(--color-success-emphasis);color:var(--color-success-fg)}.Label--attention,.Label--warning{border-color:var(--color-attention-emphasis);color:var(--color-attention-fg)}.Label--severe{border-color:var(--color-severe-emphasis);color:var(--color-severe-fg)}.Label--danger{border-color:var(--color-danger-emphasis);color:var(--color-danger-fg)}.Label--open{border-color:var(--color-open-emphasis);color:var(--color-open-fg)}.Label--closed{border-color:var(--color-closed-emphasis);color:var(--color-closed-fg)}.Label--done{border-color:var(--color-done-emphasis);color:var(--color-done-fg)}.Label--sponsors{border-color:var(--color-sponsors-emphasis);color:var(--color-sponsors-fg)}
+.labels{position:relative}.Label,.label{border:var(--borderWidth-thin,max(1px,.0625rem)) solid 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(--color-neutral-emphasis);color:var(--color-fg-default)}.Label--secondary{border-color:var(--color-border-default);color:var(--color-fg-muted)}.Label--accent,.Label--info{border-color:var(--color-accent-emphasis);color:var(--color-accent-fg)}.Label--success{border-color:var(--color-success-emphasis);color:var(--color-success-fg)}.Label--attention,.Label--warning{border-color:var(--color-attention-emphasis);color:var(--color-attention-fg)}.Label--severe{border-color:var(--color-severe-emphasis);color:var(--color-severe-fg)}.Label--danger{border-color:var(--color-danger-emphasis);color:var(--color-danger-fg)}.Label--open{border-color:var(--color-open-emphasis);color:var(--color-open-fg)}.Label--closed{border-color:var(--color-closed-emphasis);color:var(--color-closed-fg)}.Label--done{border-color:var(--color-done-emphasis);color:var(--color-done-fg)}.Label--sponsors{border-color:var(--color-sponsors-emphasis);color:var(--color-sponsors-fg)}

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

@@ -1 +1 @@
-{"version":3,"sources":["label.pcss"],"names":[],"mappings":"AAGA,QACE,iBACF,CAIA,cAQE,oEAAsE,CACtE,iBAAkB,CAPlB,oBAAqB,CAErB,0CAA4C,CAC5C,8CAAgD,CAChD,gBAAiB,CAHjB,aAAc,CAId,kBAOF,CAHE,0BACE,oBACF,CAKF,cAGE,gBAAiB,CADjB,iBAAkB,CADlB,kBAGF,CAMA,eACE,cAAe,CAEf,aAAc,CADd,kBAEF,CAIA,gBAEE,0CAA2C,CAD3C,6BAEF,CAEA,kBAEE,wCAAyC,CADzC,2BAEF,CAIA,4BAGE,yCAA0C,CAD1C,4BAEF,CAEA,gBAEE,0CAA2C,CAD3C,6BAEF,CAEA,kCAGE,4CAA6C,CAD7C,+BAEF,CAEA,eAEE,yCAA0C,CAD1C,4BAEF,CAEA,eAEE,yCAA0C,CAD1C,4BAEF,CAEA,aAEE,uCAAwC,CADxC,0BAEF,CAEA,eAEE,yCAA0C,CAD1C,4BAEF,CAEA,aAEE,uCAAwC,CADxC,0BAEF,CAEA,iBAEE,2CAA4C,CAD5C,8BAEF","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, 12px);\n  font-weight: var(--base-text-weight-medium, 500);\n  line-height: 18px;\n  white-space: nowrap;\n  border: var(--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}\n"]}
+{"version":3,"sources":["label.pcss"],"names":[],"mappings":"AAGA,QACE,iBACF,CAIA,cAQE,kFAAiE,CACjE,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,0CAA2C,CAD3C,6BAEF,CAEA,kBAEE,wCAAyC,CADzC,2BAEF,CAIA,4BAGE,yCAA0C,CAD1C,4BAEF,CAEA,gBAEE,0CAA2C,CAD3C,6BAEF,CAEA,kCAGE,4CAA6C,CAD7C,+BAEF,CAEA,eAEE,yCAA0C,CAD1C,4BAEF,CAEA,eAEE,yCAA0C,CAD1C,4BAEF,CAEA,aAEE,uCAAwC,CADxC,0BAEF,CAEA,eAEE,yCAA0C,CAD1C,4BAEF,CAEA,aAEE,uCAAwC,CADxC,0BAEF,CAEA,iBAEE,2CAA4C,CAD5C,8BAEF","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(--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}\n"]}

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

@@ -11,11 +11,11 @@
 .Label {
   display: inline-block;
   padding: 0 7px;
-  font-size: var(--text-body-size-small, 12px);
-  font-weight: var(--base-text-weight-medium, 500);
+  font-size: var(--text-body-size-small);
+  font-weight: var(--base-text-weight-medium);
   line-height: 18px;
   white-space: nowrap;
-  border: var(--borderWidth-thin, 1px) solid var(--color-border-default);
+  border: var(--borderWidth-thin) solid var(--color-border-default);
   border-radius: 2em;
 
   &:hover {

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

@@ -1 +1 @@
-.Popover{position:absolute;z-index:100}.Popover-message{background-color:var(--color-canvas-overlay);border:var(--borderWidth-thin,1px) solid var(--color-border-default);border-radius:var(--borderRadius-medium,6px);margin-left:auto;margin-right:auto;position:relative;width:232px}.Popover-message:after,.Popover-message:before{content:"";display:inline-block;left:50%;position:absolute}.Popover-message:before{border:8px solid #0000;border-bottom:8px solid var(--color-border-default);margin-left:-9px;top:-16px}.Popover-message:after{border:7px solid #0000;border-bottom:7px solid var(--color-canvas-overlay);margin-left:-8px;top:-14px}.Popover-message--no-caret:after,.Popover-message--no-caret:before{display:none}.Popover-message--bottom-left:after,.Popover-message--bottom-left:before,.Popover-message--bottom-right:after,.Popover-message--bottom-right:before,.Popover-message--bottom:after,.Popover-message--bottom:before{border-bottom-color:#0000;top:auto}.Popover-message--bottom-left:before,.Popover-message--bottom-right:before,.Popover-message--bottom:before{border-top-color:var(--color-border-default);bottom:-16px}.Popover-message--bottom-left:after,.Popover-message--bottom-right:after,.Popover-message--bottom:after{border-top-color:var(--color-canvas-overlay);bottom:-14px}.Popover-message--bottom-right,.Popover-message--top-right{margin-right:0;right:-9px}.Popover-message--bottom-right:after,.Popover-message--bottom-right:before,.Popover-message--top-right:after,.Popover-message--top-right:before{left:auto;margin-left:0}.Popover-message--bottom-right:before,.Popover-message--top-right:before{right:20px}.Popover-message--bottom-right:after,.Popover-message--top-right:after{right:21px}.Popover-message--bottom-left,.Popover-message--top-left{left:-9px;margin-left:0}.Popover-message--bottom-left:after,.Popover-message--bottom-left:before,.Popover-message--top-left:after,.Popover-message--top-left:before{left:24px;margin-left:0}.Popover-message--bottom-left:after,.Popover-message--top-left:after{left:25px}.Popover-message--left-bottom:after,.Popover-message--left-bottom:before,.Popover-message--left-top:after,.Popover-message--left-top:before,.Popover-message--left:after,.Popover-message--left:before,.Popover-message--right-bottom:after,.Popover-message--right-bottom:before,.Popover-message--right-top:after,.Popover-message--right-top:before,.Popover-message--right:after,.Popover-message--right:before{border-bottom-color:#0000;left:auto;margin-left:0;top:50%}.Popover-message--left-bottom:before,.Popover-message--left-top:before,.Popover-message--left:before,.Popover-message--right-bottom:before,.Popover-message--right-top:before,.Popover-message--right:before{margin-top:-9px}.Popover-message--left-bottom:after,.Popover-message--left-top:after,.Popover-message--left:after,.Popover-message--right-bottom:after,.Popover-message--right-top:after,.Popover-message--right:after{margin-top:-8px}.Popover-message--right-bottom:before,.Popover-message--right-top:before,.Popover-message--right:before{border-left-color:var(--color-border-default);right:-16px}.Popover-message--right-bottom:after,.Popover-message--right-top:after,.Popover-message--right:after{border-left-color:var(--color-canvas-overlay);right:-14px}.Popover-message--left-bottom:before,.Popover-message--left-top:before,.Popover-message--left:before{border-right-color:var(--color-border-default);left:-16px}.Popover-message--left-bottom:after,.Popover-message--left-top:after,.Popover-message--left:after{border-right-color:var(--color-canvas-overlay);left:-14px}.Popover-message--left-top:after,.Popover-message--left-top:before,.Popover-message--right-top:after,.Popover-message--right-top:before{top:24px}.Popover-message--left-bottom:after,.Popover-message--left-bottom:before,.Popover-message--right-bottom:after,.Popover-message--right-bottom:before{top:auto}.Popover-message--left-bottom:before,.Popover-message--right-bottom:before{bottom:16px}.Popover-message--left-bottom:after,.Popover-message--right-bottom:after{bottom:17px}@media (min-width:544px){.Popover-message--large{min-width:320px}}@media (max-width:767.98px){.Popover{bottom:0!important;left:0!important;position:fixed;right:0!important;top:auto!important}.Popover-message{bottom:auto;left:auto;margin:var(--stack-gap-condensed,8px);right:auto;top:auto;width:auto!important}.Popover-message>.btn-octicon{padding:var(--control-medium-paddingInline-normal,12px)!important}.Popover-message:after,.Popover-message:before{display:none}}
+.Popover{position:absolute;z-index:100}.Popover-message{background-color:var(--color-canvas-overlay);border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--color-border-default);border-radius:var(--borderRadius-medium,6px);margin-left:auto;margin-right:auto;position:relative;width:232px}.Popover-message:after,.Popover-message:before{content:"";display:inline-block;left:50%;position:absolute}.Popover-message:before{border:8px solid #0000;border-bottom:8px solid var(--color-border-default);margin-left:-9px;top:-16px}.Popover-message:after{border:7px solid #0000;border-bottom:7px solid var(--color-canvas-overlay);margin-left:-8px;top:-14px}.Popover-message--no-caret:after,.Popover-message--no-caret:before{display:none}.Popover-message--bottom-left:after,.Popover-message--bottom-left:before,.Popover-message--bottom-right:after,.Popover-message--bottom-right:before,.Popover-message--bottom:after,.Popover-message--bottom:before{border-bottom-color:#0000;top:auto}.Popover-message--bottom-left:before,.Popover-message--bottom-right:before,.Popover-message--bottom:before{border-top-color:var(--color-border-default);bottom:-16px}.Popover-message--bottom-left:after,.Popover-message--bottom-right:after,.Popover-message--bottom:after{border-top-color:var(--color-canvas-overlay);bottom:-14px}.Popover-message--bottom-right,.Popover-message--top-right{margin-right:0;right:-9px}.Popover-message--bottom-right:after,.Popover-message--bottom-right:before,.Popover-message--top-right:after,.Popover-message--top-right:before{left:auto;margin-left:0}.Popover-message--bottom-right:before,.Popover-message--top-right:before{right:20px}.Popover-message--bottom-right:after,.Popover-message--top-right:after{right:21px}.Popover-message--bottom-left,.Popover-message--top-left{left:-9px;margin-left:0}.Popover-message--bottom-left:after,.Popover-message--bottom-left:before,.Popover-message--top-left:after,.Popover-message--top-left:before{left:24px;margin-left:0}.Popover-message--bottom-left:after,.Popover-message--top-left:after{left:25px}.Popover-message--left-bottom:after,.Popover-message--left-bottom:before,.Popover-message--left-top:after,.Popover-message--left-top:before,.Popover-message--left:after,.Popover-message--left:before,.Popover-message--right-bottom:after,.Popover-message--right-bottom:before,.Popover-message--right-top:after,.Popover-message--right-top:before,.Popover-message--right:after,.Popover-message--right:before{border-bottom-color:#0000;left:auto;margin-left:0;top:50%}.Popover-message--left-bottom:before,.Popover-message--left-top:before,.Popover-message--left:before,.Popover-message--right-bottom:before,.Popover-message--right-top:before,.Popover-message--right:before{margin-top:-9px}.Popover-message--left-bottom:after,.Popover-message--left-top:after,.Popover-message--left:after,.Popover-message--right-bottom:after,.Popover-message--right-top:after,.Popover-message--right:after{margin-top:-8px}.Popover-message--right-bottom:before,.Popover-message--right-top:before,.Popover-message--right:before{border-left-color:var(--color-border-default);right:-16px}.Popover-message--right-bottom:after,.Popover-message--right-top:after,.Popover-message--right:after{border-left-color:var(--color-canvas-overlay);right:-14px}.Popover-message--left-bottom:before,.Popover-message--left-top:before,.Popover-message--left:before{border-right-color:var(--color-border-default);left:-16px}.Popover-message--left-bottom:after,.Popover-message--left-top:after,.Popover-message--left:after{border-right-color:var(--color-canvas-overlay);left:-14px}.Popover-message--left-top:after,.Popover-message--left-top:before,.Popover-message--right-top:after,.Popover-message--right-top:before{top:24px}.Popover-message--left-bottom:after,.Popover-message--left-bottom:before,.Popover-message--right-bottom:after,.Popover-message--right-bottom:before{top:auto}.Popover-message--left-bottom:before,.Popover-message--right-bottom:before{bottom:16px}.Popover-message--left-bottom:after,.Popover-message--right-bottom:after{bottom:17px}@media (min-width:544px){.Popover-message--large{min-width:320px}}@media (max-width:767.98px){.Popover{bottom:0!important;left:0!important;position:fixed;right:0!important;top:auto!important}.Popover-message{bottom:auto;left:auto;margin:var(--stack-gap-condensed,.5rem);right:auto;top:auto;width:auto!important}.Popover-message>.btn-octicon{padding:var(--control-medium-paddingInline-normal,.75rem)!important}.Popover-message:after,.Popover-message:before{display:none}}