Move labels styles to PVC (#1587)

Co-authored-by: Jon Rohan <[email protected]>

.changeset/red-peaches-tickle.md

@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Move labels styles to PVC

app/components/primer/beta/counter.pcss

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

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(--primer-text-body-size-small, 12px);
+  font-weight: var(--base-text-weight-medium, 500);
+  line-height: 18px;
+  white-space: nowrap;
+  border: var(--primer-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);
+}

app/components/primer/primer.pcss

@@ -1,9 +1,12 @@
 /* CSS component styles here */
 @import "./alpha/action_list.pcss";
 @import "./alpha/banner.pcss";
-@import './alpha/segmented_control.pcss';
+@import "./alpha/segmented_control.pcss";
 @import "./beta/button.pcss";
+@import "./beta/counter.pcss";
+@import "./beta/label.pcss";
 @import "./beta/blankslate.pcss";
 @import "./beta/progress_bar.pcss";
 @import "./beta/truncate.pcss";
+@import "./state_component.pcss";
 @import "./truncate.pcss";

app/components/primer/state_component.pcss

@@ -0,0 +1,50 @@
+/* State */
+
+/* Default 32px */
+
+.state, /* TODO: Deprecate */
+.State {
+  display: inline-block;
+  padding: 5px var(--primer-control-medium-paddingInline-normal, 12px);
+  font-size: var(--primer-text-body-size-medium, 14px);
+  font-weight: var(--base-text-weight-medium, 500);
+  line-height: var(--primer-control-medium-lineBoxHeight, 20px);
+  text-align: center;
+  white-space: nowrap;
+  border-radius: 2em;
+}
+
+.state, /* TODO: Deprecate */
+.State,
+.State--draft {
+  color: var(--color-fg-on-emphasis);
+  background-color: var(--color-neutral-emphasis);
+  border: var(--primer-borderWidth-thin, 1px) solid transparent;
+}
+
+.State--open {
+  color: var(--color-fg-on-emphasis);
+  background-color: var(--color-open-emphasis);
+}
+
+.State--merged {
+  color: var(--color-fg-on-emphasis);
+  background-color: var(--color-done-emphasis);
+}
+
+.State--closed {
+  color: var(--color-fg-on-emphasis);
+  background-color: var(--color-closed-emphasis);
+}
+
+/* Small 24px */
+
+.State--small {
+  padding: 0 10px;
+  font-size: var(--primer-text-body-size-small, 12px);
+  line-height: var(--base-size-24, 24px);
+
+  & .octicon {
+    width: 1em; /* Ensures different icons don't change State indicator width */
+  }
+}

demo/app/assets/stylesheets/application.css

@@ -22,7 +22,6 @@
  *= require @primer/css/dist/branch-name.css
  *= require @primer/css/dist/dropdown.css
  *= require @primer/css/dist/header.css
- *= require @primer/css/dist/labels.css
  *= require @primer/css/dist/loaders.css
  *= require @primer/css/dist/markdown.css
  *= require @primer/css/dist/popover.css