@primer/view-components 0.3.0-rc.dc2abcf9 → 0.3.0

package/app/components/primer/alpha/button_marketing.css

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

package/app/components/primer/alpha/button_marketing.css.json

@@ -2,28 +2,28 @@
   "name": "alpha/button_marketing",
   "selectors": [
     ".btn-mktg",
-    ".btn-mktg:before",
+    ".btn-mktg::before",
     ".btn-mktg:hover",
-    ".btn-mktg.focus:before",
-    ".btn-mktg:focus-visible:before",
-    ".btn-mktg:focus:before",
-    ".btn-mktg:hover:before",
+    ".btn-mktg:hover::before",
+    ".btn-mktg:focus::before",
+    ".btn-mktg:focus-visible::before",
+    ".btn-mktg.focus::before",
     ".btn-mktg:focus",
     ".btn-mktg:focus:not(:focus-visible)",
     ".btn-mktg:focus-visible",
-    ".btn-mktg:active:before",
+    ".btn-mktg:active::before",
     ".btn-mktg.disabled",
     ".btn-mktg[disabled]",
     ".btn-muted-mktg",
-    ".btn-muted-mktg:before",
+    ".btn-muted-mktg::before",
     ".btn-muted-mktg:hover",
     ".btn-muted-mktg:active",
     ".btn-muted-mktg:disabled",
     ".btn-subtle-mktg",
-    ".btn-subtle-mktg:before",
+    ".btn-subtle-mktg::before",
     ".btn-subtle-mktg:hover",
     ".btn-signup-mktg",
-    ".btn-signup-mktg:before",
+    ".btn-signup-mktg::before",
     ".btn-signup-mktg:focus",
     ".btn-signup-mktg:focus:not(:focus-visible)",
     ".btn-signup-mktg:focus-visible",