Moving CSS for Link and Marketing Button, to PVC (#1620)

Co-authored-by: mxriverlynn <mxriverlynn@users.noreply.github.com>
Co-authored-by: simurai <simurai@github.com>

.changeset/curly-cows-push.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+adding css source for Marketing Button and Link, from Primer CSS

app/components/primer/alpha/button_marketing.pcss

@@ -0,0 +1,175 @@
+.btn-mktg {
+  position: relative;
+  z-index: 1;
+  display: inline-block;
+
+  /* stylelint-disable-next-line primer/spacing */
+  padding: 0.9rem 1.5rem 1.1rem;
+
+  /* stylelint-disable-next-line primer/typography */
+  font-size: 1rem;
+  font-weight: var(--base-text-weight-semibold, 600);
+  line-height: 1;
+  color: var(--color-canvas-default);
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  user-select: none;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 15%) 0%, rgba(255, 255, 255, 0%) 100%),
+    var(--color-mktg-btn-bg) !important;
+  border: 0;
+
+  /* stylelint-disable-next-line primer/borders */
+  border-radius: 0.375rem;
+  transition: box-shadow 0.2s, outline 0.2s ease;
+  appearance: none !important;
+
+  &::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: -1;
+    content: '';
+
+    /* stylelint-disable-next-line primer/colors */
+    background: linear-gradient(180deg, rgba(255, 255, 255, 15%) 0%, rgba(255, 255, 255, 0%) 100%) !important;
+    border-radius: inherit;
+    opacity: 0;
+    transition: opacity 0.2s;
+    background-blend-mode: normal;
+  }
+
+  &:hover {
+    text-decoration: none;
+    box-shadow: var(--color-mktg-btn-shadow-hover) !important;
+  }
+
+  &:hover,
+  &:focus,
+  &:focus-visible,
+  &.focus {
+    &::before {
+      opacity: 1;
+    }
+  }
+
+  /* fallback :focus state */
+  &:focus {
+    @mixin focusOutline 2px, var(--color-accent-fg);
+
+    /* remove fallback :focus if :focus-visible is supported */
+    &:not(:focus-visible) {
+      outline: solid 1px transparent;
+      box-shadow: none;
+    }
+  }
+
+  /* default focus state */
+  &:focus-visible {
+    @mixin focusOutline 2px, var(--color-accent-fg) ;
+  }
+
+  &:active {
+    &::before {
+      opacity: 0.5 !important;
+    }
+  }
+
+  &.disabled,
+  &[disabled] {
+    pointer-events: none;
+    cursor: default;
+    opacity: 0.5;
+  }
+}
+
+.btn-muted-mktg {
+  color: var(--color-fg-default) !important;
+  background: none !important;
+  box-shadow: var(--color-mktg-btn-shadow-outline);
+
+  &::before {
+    display: none;
+  }
+
+  &:hover {
+    box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;
+  }
+
+  &:active {
+
+    /* stylelint-disable-next-line primer/box-shadow */
+    box-shadow: var(--color-fg-default) 0 0 0 3px inset !important;
+  }
+
+  &:disabled {
+
+    /* stylelint-disable-next-line primer/box-shadow */
+    box-shadow: var(--color-fg-subtle) 0 0 0 1px inset !important;
+  }
+}
+
+.btn-subtle-mktg {
+  color: var(--color-fg-default) !important;
+  background: none !important;
+  box-shadow: none !important;
+
+  &::before {
+    background: none !important;
+  }
+
+  &:hover {
+    box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;
+  }
+}
+
+.btn-signup-mktg {
+
+  /* stylelint-disable-next-line primer/colors */
+  color: #fff;
+
+  /* stylelint-disable-next-line primer/colors */
+  background: linear-gradient(180deg, rgba(52, 183, 89, 15%) 0%, rgba(46, 164, 79, 0%) 100%), rgb(46, 164, 79) !important;
+
+  &::before {
+
+    /* stylelint-disable-next-line primer/colors */
+    background: linear-gradient(180deg, rgba(52, 183, 89, 15%) 0%, rgba(46, 164, 79, 0%) 100%) !important;
+  }
+
+  /* fallback :focus state */
+  &:focus {
+    @mixin focusOutline 2px, var(--color-accent-fg) ;
+
+    /* remove fallback :focus if :focus-visible is supported */
+    &:not(:focus-visible) {
+      outline: solid 1px transparent;
+      box-shadow: none;
+    }
+  }
+
+  /* default focus state */
+  &:focus-visible {
+    @mixin focusOutline 2px, var(--color-accent-fg) ;
+  }
+}
+
+/* Size modifiers */
+
+.btn-small-mktg {
+
+  /* stylelint-disable-next-line primer/spacing */
+  padding: 0.625rem 1rem 0.8125rem;
+}
+
+.btn-large-mktg {
+
+  /* stylelint-disable-next-line primer/spacing */
+  padding: 16px 30px 20px !important;
+
+  /* stylelint-disable-next-line primer/typography */
+  font-size: 1.25rem;
+}

app/components/primer/beta/link.pcss

@@ -0,0 +1,60 @@
+/* Links */
+
+.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

@@ -3,6 +3,7 @@
 @import "./alpha/auto_complete.pcss";
 @import "./alpha/banner.pcss";
 @import "./alpha/tab_nav.pcss";
+@import "./alpha/button_marketing.pcss";
 @import "./alpha/toggle_switch.pcss";
 @import "./alpha/underline_nav.pcss";
 @import "./alpha/segmented_control.pcss";
@@ -13,6 +14,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

@@ -8,7 +8,6 @@
  *= require @primer/css/dist/buttons.css
  *= require @primer/css/dist/forms.css
  *= require @primer/css/dist/layout.css
- *= require @primer/css/dist/links.css
  *= require @primer/css/dist/overlay.css
  *= require @primer/css/dist/utilities.css
  *= require @primer/css/dist/markdown.css

previews/primer/alpha/button_marketing_preview.rb

@@ -21,6 +21,42 @@ def playground(tag: :button, type: :button, scheme: :default, variant: :default)
       def default(tag: :button, type: :button, scheme: :default, variant: :default)
         render(Primer::Alpha::ButtonMarketing.new(tag: tag, type: type, scheme: scheme, variant: variant)) { "Default" }
       end
+
+      # @!group Size Variants
+      #
+      # @label Default
+      def sizes_default
+        render(Primer::Alpha::ButtonMarketing.new) { "Default" }
+      end
+
+      # @label Large
+      def sizes_large
+        render(Primer::Alpha::ButtonMarketing.new(variant: :large)) { "Large" }
+      end
+      # @!endgroup
+
+      # @!group Schemes
+      #
+      # @label Default
+      def scheme_default
+        render(Primer::Alpha::ButtonMarketing.new) { "Default" }
+      end
+
+      # @label Primary
+      def scheme_primary
+        render(Primer::Alpha::ButtonMarketing.new(scheme: :primary)) { "Primary" }
+      end
+
+      # @label Outline
+      def scheme_outline
+        render(Primer::Alpha::ButtonMarketing.new(scheme: :outline)) { "Outline" }
+      end
+
+      # @label Transparent
+      def scheme_transparent
+        render(Primer::Alpha::ButtonMarketing.new(scheme: :transparent)) { "Transparent" }
+      end
+      # @!endgroup
     end
   end
 end

previews/primer/beta/link_preview.rb

@@ -36,6 +36,34 @@ def tooltip(tag: :a, scheme: :default, muted: false, underline: true)
           "Link with tooltip"
         end
       end
+
+      # @!group Color Scheme
+      #
+      # @label Default
+      def color_scheme_default
+        render(Primer::Beta::Link.new(href: "#")) { "This is a default link color." }
+      end
+
+      # @label Primary
+      def color_scheme_primary
+        render(Primer::Beta::Link.new(href: "#", scheme: :primary)) { "This is a primary link color." }
+      end
+
+      # @label Primary, Muted
+      def color_scheme_primary_muted
+        render(Primer::Beta::Link.new(href: "#", scheme: :primary, muted: true)) { "This is a muted primary link color." }
+      end
+
+      # @label Secondary
+      def color_scheme_secondary
+        render(Primer::Beta::Link.new(href: "#", scheme: :secondary)) { "This is a secondary link color." }
+      end
+
+      # @label Secondary, Muted
+      def color_scheme_secondary_muted
+        render(Primer::Beta::Link.new(href: "#", scheme: :secondary, muted: true)) { "This is a muted secondary link color." }
+      end
+      # @!endgroup
     end
   end
 end