Move Link styles to PVC

.changeset/olive-vans-think.md

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

app/components/primer/beta/link.pcss

@@ -0,0 +1,62 @@
+/* Link */
+
+.Link {
+  color: var(--color-accent-fg);
+
+  &:hover {
+    text-decoration: underline;
+    cursor: pointer;
+  }
+
+  &:focus,
+  &:focus-visible {
+    outline-offset: 0;
+  }
+}
+
+.Link--primary {
+  color: var(--color-fg-default) !important;
+
+  &:hover {
+    color: var(--color-accent-fg) !important;
+  }
+}
+
+.Link--secondary {
+  color: var(--color-fg-muted) !important;
+
+  &:hover {
+    color: var(--color-accent-fg) !important;
+  }
+}
+
+.Link--muted {
+  color: var(--color-fg-muted) !important;
+
+  &:hover {
+    color: var(--color-accent-fg) !important;
+    text-decoration: none;
+  }
+}
+
+/* Set the link color only on hover
+** Useful when you want only part of a link to turn blue on hover */
+
+.Link--onHover {
+  &:hover {
+    color: var(--color-accent-fg) !important;
+    text-decoration: underline;
+    cursor: pointer;
+  }
+}
+
+/* When using a color utility class inside of a link class,
+** color should change with link on hover. */
+
+.Link--secondary,
+.Link--primary,
+.Link--muted {
+  &:hover [class*='color-fg'] {
+    color: inherit !important;
+  }
+}

app/components/primer/primer.pcss

@@ -10,6 +10,7 @@
 @import "./beta/counter.pcss";
 @import "./beta/flash.pcss";
 @import "./beta/label.pcss";
+@import "./beta/link.pcss";
 @import "./beta/blankslate.pcss";
 @import "./beta/progress_bar.pcss";
 @import "./beta/truncate.pcss";

demo/app/assets/stylesheets/application.css

@@ -9,7 +9,6 @@
  *= require @primer/css/dist/table-object.css
  *= require @primer/css/dist/forms.css
  *= require @primer/css/dist/layout.css
- *= require @primer/css/dist/links.css
  *= require @primer/css/dist/navigation.css
  *= require @primer/css/dist/pagination.css
  *= require @primer/css/dist/tooltips.css

previews/primer/beta/link_preview.rb

@@ -14,14 +14,9 @@ def playground(tag: :a, scheme: :default, muted: false, underline: true)
         render(Primer::Beta::Link.new(href: "#", tag: tag, scheme: scheme, muted: muted, underline: underline)) { "This is a link!" }
       end
 
-      # @label Default Options
-      #
-      # @param underline [Boolean]
-      # @param muted [Boolean]
-      # @param tag [Symbol] select [a, span]
-      # @param scheme [Symbol] select [default, primary, secondary]
-      def default(tag: :a, scheme: :default, muted: false, underline: true)
-        render(Primer::Beta::Link.new(href: "#", tag: tag, scheme: scheme, muted: muted, underline: underline)) { "This is a link!" }
+      # @label Default
+      def default
+        render(Primer::Beta::Link.new(href: "#")) { "This is a link!" }
       end
 
       # @label With Tooltip
@@ -36,6 +31,35 @@ def tooltip(tag: :a, scheme: :default, muted: false, underline: true)
           "Link with tooltip"
         end
       end
+
+      # @!group Options
+      #
+      # @label Default
+      def options_default
+        render(Primer::Beta::Link.new(href: "#")) { "Link" }
+      end
+
+      # @label Primary
+      def options_primary
+        render(Primer::Beta::Link.new(href: "#", scheme: :primary)) { "Link" }
+      end
+
+      # @label Secondary
+      def options_secondary
+        render(Primer::Beta::Link.new(href: "#", scheme: :secondary)) { "Link" }
+      end
+
+      # @label Muted
+      def options_muted
+        render(Primer::Beta::Link.new(href: "#", muted: true)) { "Link" }
+      end
+
+      # @label Without underline
+      def options_underline
+        render(Primer::Beta::Link.new(href: "#", underline: false)) { "Link" }
+      end
+      #
+      # @!endgroup
     end
   end
 end

test/css/component_specific_selectors_test.rb

@@ -71,6 +71,9 @@ class ComponentSpecificSelectorsTest < Minitest::Test
       ".Label--open",
       ".Label--closed"
     ],
+    Primer::Beta::Link => [
+      ".Link"
+    ],
     Primer::Beta::Blankslate => [
       ".blankslate code",
       ".blankslate-large img",