primer-marketing-buttons - npm Package Compare versions

Comparing version 0.1.0-alpha.29cee408 to 0.1.0-alpha.30aafda8

build/index.js

@@ -1,1 +0,1 @@
-module.exports = {"cssstats":{"size":4177,"gzipSize":825,"humanizedSize":"4kB","humanizedGzipSize":"825B","rules":{"total":33,"size":{"graph":[3,1,4,4,5,2,3,1,4,4,5,2,3,1,4,2,2,4,3,1,4,2,2,4,3,1,4,2,2,4,4,4,3],"max":5,"average":2.9393939393939394}},"selectors":{"total":65,"type":0,"class":65,"id":0,"pseudoClass":28,"pseudoElement":0,"values":[".btn-orange",".btn-orange:focus",".btn-orange.focus",".btn-orange:hover",".btn-orange.hover",".btn-orange:active",".btn-orange.selected","[open]>.btn-orange",".btn-orange:disabled",".btn-orange.disabled",".btn-orange .Counter",".btn-blurple",".btn-blurple:focus",".btn-blurple.focus",".btn-blurple:hover",".btn-blurple.hover",".btn-blurple:active",".btn-blurple.selected","[open]>.btn-blurple",".btn-blurple:disabled",".btn-blurple.disabled",".btn-blurple .Counter",".btn-outline-purple",".btn-outline-purple .Counter",".btn-outline-purple:hover",".btn-outline-purple:active",".btn-outline-purple.selected","[open]>.btn-outline-purple",".btn-outline-purple:hover .Counter",".btn-outline-purple:active .Counter",".btn-outline-purple.selected .Counter","[open]>.btn-outline-purple .Counter",".btn-outline-purple:focus",".btn-outline-purple:disabled",".btn-outline-purple.disabled",".btn-outline-orange",".btn-outline-orange .Counter",".btn-outline-orange:hover",".btn-outline-orange:active",".btn-outline-orange.selected","[open]>.btn-outline-orange",".btn-outline-orange:hover .Counter",".btn-outline-orange:active .Counter",".btn-outline-orange.selected .Counter","[open]>.btn-outline-orange .Counter",".btn-outline-orange:focus",".btn-outline-orange:disabled",".btn-outline-orange.disabled",".btn-outline-green",".btn-outline-green .Counter",".btn-outline-green:hover",".btn-outline-green:active",".btn-outline-green.selected","[open]>.btn-outline-green",".btn-outline-green:hover .Counter",".btn-outline-green:active .Counter",".btn-outline-green.selected .Counter","[open]>.btn-outline-green .Counter",".btn-outline-green:focus",".btn-outline-green:disabled",".btn-outline-green.disabled",".btn-transparent",".btn-transparent:hover",".btn-transparent:active",".btn-large"],"specificity":{"max":30,"average":20.76923076923077}},"declarations":{"total":97,"unique":47,"properties":{"color":["#fff","rgba(255,255,255,0.75)","#f46909","#fff","rgba(255,255,255,0.75)","#4350dc","#6f42c1","#fff","#6f42c1","rgba(27,31,35,0.3)","#f66a0a","#fff","#f66a0a","rgba(27,31,35,0.3)","#28a745","#fff","#28a745","rgba(27,31,35,0.3)","#fff","#2f363d"],"background-color":["#d25a08","#c85607","#c65e17","#e9ad83","#fff","#3b41af","#383ea7","#3a43bb","#9da0d7","#fff","#fff","rgba(27,31,35,0.07)","#6f42c1","#fff","#fff","#fff","rgba(27,31,35,0.07)","#f66a0a","#fff","#fff","#fff","rgba(27,31,35,0.07)","#28a745","#fff","#fff","transparent","#fff"],"background-image":["linear-gradient(-180deg, #f7802f 0%, #d25a08 90%)","linear-gradient(-180deg, #f77a25 0%, #c85607 90%)","none","none","linear-gradient(-180deg, #6570e2 0%, #3b41af 90%)","linear-gradient(-180deg, #5c68e0 0%, #383ea7 90%)","none","none","none","none","none","none","none","none","none","none"],"box-shadow":["0 0 0 0.2em rgba(247,128,47,0.3)","inset 0 0.15em 0.3em rgba(27,31,35,0.15)","none","0 0 0 0.2em rgba(101,112,226,0.3)","inset 0 0.15em 0.3em rgba(27,31,35,0.15)","none","0 0 0 0.2em rgba(111,66,193,0.3)","none","0 0 0 0.2em rgba(246,106,10,0.3)","none","0 0 0 0.2em rgba(40,167,69,0.3)","none"],"background-position":["0 -0.5em","0 -0.5em"],"border-color":["rgba(27,31,35,0.5)","rgba(27,31,35,0.5)","rgba(27,31,35,0.2)","rgba(27,31,35,0.5)","rgba(27,31,35,0.5)","rgba(27,31,35,0.2)","#6f42c1","#6f42c1","rgba(27,31,35,0.15)","#f66a0a","#f66a0a","rgba(27,31,35,0.15)","#28a745","#28a745","rgba(27,31,35,0.15)","#fff"],"border":["1px solid rgba(255,255,255,0.5)"],"padding":["0.75em 1.25em"],"font-size":["inherit"],"border-radius":["6px"]}},"mediaQueries":{"total":0,"unique":0,"values":[],"contents":[]}}}
+module.exports = {"cssstats":{"size":3299,"gzipSize":666,"humanizedSize":"3kB","humanizedGzipSize":"666B","rules":{"total":26,"size":{"graph":[3,1,4,4,5,2,3,1,4,2,2,4,3,1,4,2,2,4,3,1,4,2,2,4,4,4],"max":5,"average":2.8846153846153846}},"selectors":{"total":53,"type":0,"class":53,"id":0,"pseudoClass":24,"pseudoElement":0,"values":[".btn-orange",".btn-orange:focus",".btn-orange.focus",".btn-orange:hover",".btn-orange.hover",".btn-orange:active",".btn-orange.selected","[open]>.btn-orange",".btn-orange:disabled",".btn-orange.disabled",".btn-orange .Counter",".btn-outline-purple",".btn-outline-purple .Counter",".btn-outline-purple:hover",".btn-outline-purple:active",".btn-outline-purple.selected","[open]>.btn-outline-purple",".btn-outline-purple:hover .Counter",".btn-outline-purple:active .Counter",".btn-outline-purple.selected .Counter","[open]>.btn-outline-purple .Counter",".btn-outline-purple:focus",".btn-outline-purple:disabled",".btn-outline-purple.disabled",".btn-outline-orange",".btn-outline-orange .Counter",".btn-outline-orange:hover",".btn-outline-orange:active",".btn-outline-orange.selected","[open]>.btn-outline-orange",".btn-outline-orange:hover .Counter",".btn-outline-orange:active .Counter",".btn-outline-orange.selected .Counter","[open]>.btn-outline-orange .Counter",".btn-outline-orange:focus",".btn-outline-orange:disabled",".btn-outline-orange.disabled",".btn-outline-green",".btn-outline-green .Counter",".btn-outline-green:hover",".btn-outline-green:active",".btn-outline-green.selected","[open]>.btn-outline-green",".btn-outline-green:hover .Counter",".btn-outline-green:active .Counter",".btn-outline-green.selected .Counter","[open]>.btn-outline-green .Counter",".btn-outline-green:focus",".btn-outline-green:disabled",".btn-outline-green.disabled",".btn-transparent",".btn-transparent:hover",".btn-transparent:active"],"specificity":{"max":30,"average":21.32075471698113}},"declarations":{"total":75,"unique":36,"properties":{"color":["#fff","rgba(255,255,255,0.75)","#f46909","#6f42c1","#fff","#6f42c1","rgba(27,31,35,0.3)","#f66a0a","#fff","#f66a0a","rgba(27,31,35,0.3)","#28a745","#fff","#28a745","rgba(27,31,35,0.3)","#fff","#2f363d"],"background-color":["#d25a08","#c85607","#c65e17","#e9ad83","#fff","#fff","rgba(27,31,35,0.07)","#6f42c1","#fff","#fff","#fff","rgba(27,31,35,0.07)","#f66a0a","#fff","#fff","#fff","rgba(27,31,35,0.07)","#28a745","#fff","#fff","transparent","#fff"],"background-image":["linear-gradient(-180deg, #f7802f 0%, #d25a08 90%)","linear-gradient(-180deg, #f77a25 0%, #c85607 90%)","none","none","none","none","none","none","none","none","none","none"],"box-shadow":["0 0 0 0.2em rgba(247,128,47,0.3)","inset 0 0.15em 0.3em rgba(27,31,35,0.15)","none","0 0 0 0.2em rgba(111,66,193,0.3)","none","0 0 0 0.2em rgba(246,106,10,0.3)","none","0 0 0 0.2em rgba(40,167,69,0.3)","none"],"background-position":["0 -0.5em"],"border-color":["rgba(27,31,35,0.5)","rgba(27,31,35,0.5)","rgba(27,31,35,0.2)","#6f42c1","#6f42c1","rgba(27,31,35,0.15)","#f66a0a","#f66a0a","rgba(27,31,35,0.15)","#28a745","#28a745","rgba(27,31,35,0.15)","#fff"],"border":["1px solid rgba(255,255,255,0.5)"]}},"mediaQueries":{"total":0,"unique":0,"values":[],"contents":[]}}}

package.json

 {
-  "version": "0.1.0-alpha.29cee408",
+  "version": "0.1.0-alpha.30aafda8",
   "name": "primer-marketing-buttons",
@@ -31,4 +31,7 @@ "description": "Buttons for marketing websites at GitHub",
   "dependencies": {
-    "primer-support": "4.5.0-alpha.29cee408"
+    "primer-support": "4.5.0-alpha.30aafda8"
   },
+  "peerDependencies": {
+    "primer-buttons": "2.4.1"
+  },
   "keywords": [
@@ -35,0 +38,0 @@ "css",

README.md

@@ -17,26 +17,28 @@ # Primer Marketing CSS Buttons
 
-The buttons on our marketing pages are based on Primer's core with the addition of more color options, color outline buttons, a transparent button, and larger button sizes.
+Marketing buttons extend primer-core buttons with more color and fill styles.
 
 
-## Color
+## Colors
 
-The `btn` has been extended with the marketing color palette:
+Marketing buttons are available in orange.
 
 ```html
-
 <button class="btn btn-orange" type="button">Button button</button>
-<a class="btn btn-purple" href="#url" role="button">Link button</a>
-<button class="btn btn-blurple" type="button">Button button</button>
-
 ```
 
-## Outline buttons
+## Outline button colors
 
-The `btn-outline` has also been extended with the marketing color palette:
+The `btn-outline` has also been extended with orange, purple, and green.
 
 ```html
-
 <button class="btn btn-outline-orange" type="button">Button button</button>
 <a class="btn btn-outline-purple" href="#url" role="button">Link button</a>
 <button class="btn btn-outline-green" type="button">Button button</button>
+```
+
+## Transparent button
+
+A button can also be transparent and displayed with a white border with `btn-transparent`.
+
+```html
 <div class="bg-gray-dark p-4 mt-4">
@@ -48,22 +50,4 @@ <button class="btn btn-transparent" type="button">
 </div>
-
 ```
 
-## Additional sizing
-There are cases where you might want to increase the size of a button, for example when putting a main CTA inside of a jumbotron or major page callout. The `btn-large` class does the following to make a button more prominent:
-
-1. Adds extra additional padding in `ems` so that the padding scales proportionately with the `font-size`
-2. Increases the border radius to 6px
-
-It can optionally be used in combination with a font-size utility (like `f3`) on the parent to increase the font-size.
-
-```html
-
-<p class="f3">
-  <a class="btn btn-large btn-purple" href="#url" role="button">Large link button</a>
-  <button class="btn btn-large btn-outline-blue" type="button">Large button button</button>
-</p>
-
-```
-
 <!-- %enddocs -->
@@ -70,0 +54,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

11955

decreased by-18.76%

Dependency count

2

increased by100%

Lines of code

13

decreased by-23.53%

Number of lines in readme file

90

decreased by-15.09%

Dependency changes

• + Addedprimer-buttons@2.4.1(transitive)

• + Addedprimer-support@4.4.14.5.0-alpha.30aafda8(transitive)

• - Removedprimer-support@4.5.0-alpha.29cee408(transitive)

• Updatedprimer-support@4.5.0-alpha.30aafda8