Merge pull request #309 from hacker0limbo/hacker0limbo-resource-readme

Add resource section on readme

README.md

@@ -12,12 +12,12 @@
 
 - [Table of contents](#table-of-contents)
 - [Quick-start](#quick-start)
-- [Status](#status)
 - [Content of the framework](#content-of-the-framework)
 - [Documentation](#documentation)
 - [Customizing](#customizing)
 - [Contributing](#contributing)
 - [About](#about)
+- [Resources](#resources)
 - [Credits and license](#credits-and-license)
 
 ## Quick-start
@@ -29,15 +29,8 @@ There are several options available:
 - Install with npm: `npm install papercss`
 - Install with yarn: `yarn add papercss`
 - Import it using a CDN (it will automatically download the latest version):
-    - `https://unpkg.com/papercss/dist/paper.min.css`
-    - `https://unpkg.com/papercss/dist/paper.css`
-
-## Status
-
-[![Build status](https://travis-ci.org/papercss/papercss.svg?branch=master)](https://travis-ci.org/papercss/papercss)
-[![Dependencies](https://img.shields.io/david/papercss/papercss.svg)](https://david-dm.org/papercss/papercss)
-[![Peer dependencies](https://img.shields.io/david/peer/papercss/papercss.svg)](https://david-dm.org/papercss/papercss?type=peer)
-[![Dev dependencies](https://img.shields.io/david/dev/papercss/papercss.svg)](https://david-dm.org/papercss/papercss?type=dev)
+  - `https://unpkg.com/papercss/dist/paper.min.css`
+  - `https://unpkg.com/papercss/dist/paper.css`
 
 ## Content of the framework
 
@@ -85,7 +78,7 @@ Note: If you have a hotfix (usually typos and minor documentation tweaks), creat
 
 ## About
 
-PaperCSS was originally made by [@rhyneav](https://github.com/rhyneav) to be something different than the typical mODerN STylEs and clean pages found in every other CSS framework. It was built with LESS and deployed on a single index.html page before being open sourced. It has since evolved; The CSS source has been rewritten in SCSS and the documentation is now built with Hugo (all thanks to some [wonderful contributors](https://github.com/papercss/papercss/graphs/contributors)). In addition to the original creator, it is maintained by [@Fraham](https://github.com/Fraham) and [@TotomInc](https://github.com/TotomInc).
+PaperCSS was originally made by [@rhyneav](https://github.com/rhyneav) to be something different than the typical mODerN STylEs and clean pages found in every other CSS framework. It was built with LESS and deployed on a single index.html page before being open sourced. It has since evolved; The CSS source has been rewritten in SCSS and the documentation is now built with Hugo (all thanks to some [wonderful contributors](https://github.com/papercss/papercss/graphs/contributors)). It is currently maintained by the [PaperCSS team](https://github.com/orgs/papercss/people).
 
 The goal of PaperCSS is to be as minimal as possible when adding classes. For example, a button should just look like a paper button. There shouldn't be a need to add a class such as `paper-button`. Because of this, adding PaperCSS to a markdown generated page should instantly paper-ize it.
 
@@ -93,6 +86,22 @@ Feel free to use it for wireframes, web apps, blogs, or whatever else you can th
 
 If you are new to Git or SCSS, this would be a great project to get your feet wet with. I'd be happy to help walk you through the pull request process.
 
+## Resources
+
+Components:
+
+- [react-papercss-design](https://hacker0limbo.github.io/react-papercss-design/en-US) a React component library based on PaperCSS
+- [Spaper](https://oli8.github.io/spaper/) PaperCSS components for Svelte
+- [vue-papercss](https://github.com/papercss/vue-papercss) A vue-plugin for the less formal CSS framework
+- [RailsPapercss](https://github.com/papercss/rails_papercss_gem) Rails gem for Papercss framework
+- [react-native-paper-css](https://github.com/papercss/react-native-paper-css) PaperCSS for react-native
+- [React PaperCSS](https://papercss.github.io/React-Paper-CSS-Page/) Another react component library implementation for PaperCSS
+
+Icons:
+
+- [handdrawn.css](https://fxaeberhard.github.io/handdrawn.css/) Another hand-drawn css library with rich icons included
+- [hand-drawn-icons](https://github.com/nikhilol/hand-drawn-icons) Icon pack with a hand-drawn style
+
 ## Credits and license
 
 Code and documentation under [ISC license](https://github.com/papercss/papercss/blob/master/license).

dist/paper.css

@@ -100,7 +100,7 @@ html.dark {
   --success-text: #265927;
   --warning-text: #71651c;
   --danger-text: #7c161e;
-  --muted-text: #313538;
+  --muted-text: #949ba2;
   --shadow-color-regular: rgba(0, 0, 0, 0.2);
   --shadow-color-hover: rgba(0, 0, 0, 0.3);
   --primary-inverse: #41403e;
@@ -1375,13 +1375,13 @@ table.table-alternating tbody tr:nth-of-type(even) {
 .alert .btn-close {
   transition: all 235ms ease-in-out 0s;
   color: #41403e;
-  color: var(--primary-light-10);
+  color: var(--primary-text);
   cursor: pointer;
   margin-left: 0.75rem;
 }
 .alert .btn-close:hover, .alert .btn-close:active, .alert .btn-close:focus {
   color: #41403e;
-  color: var(--primary-dark-10);
+  color: var(--primary-dark);
 }
 
 .alert-primary {
@@ -1394,11 +1394,11 @@ table.table-alternating tbody tr:nth-of-type(even) {
 }
 .alert-primary .btn-close {
   color: #41403e;
-  color: var(--primary-light-10);
+  color: var(--primary-text);
 }
 .alert-primary .btn-close:hover, .alert-primary .btn-close:active, .alert-primary .btn-close:focus {
   color: #41403e;
-  color: var(--primary-dark-10);
+  color: var(--primary-dark);
 }
 
 .alert-secondary {
@@ -1411,11 +1411,11 @@ table.table-alternating tbody tr:nth-of-type(even) {
 }
 .alert-secondary .btn-close {
   color: #41403e;
-  color: var(--secondary-light-10);
+  color: var(--secondary-text);
 }
 .alert-secondary .btn-close:hover, .alert-secondary .btn-close:active, .alert-secondary .btn-close:focus {
   color: #41403e;
-  color: var(--secondary-dark-10);
+  color: var(--secondary-dark);
 }
 
 .alert-success {
@@ -1428,11 +1428,11 @@ table.table-alternating tbody tr:nth-of-type(even) {
 }
 .alert-success .btn-close {
   color: #41403e;
-  color: var(--success-light-10);
+  color: var(--success-text);
 }
 .alert-success .btn-close:hover, .alert-success .btn-close:active, .alert-success .btn-close:focus {
   color: #41403e;
-  color: var(--success-dark-10);
+  color: var(--success-dark);
 }
 
 .alert-warning {
@@ -1445,11 +1445,11 @@ table.table-alternating tbody tr:nth-of-type(even) {
 }
 .alert-warning .btn-close {
   color: #41403e;
-  color: var(--warning-light-10);
+  color: var(--warning-text);
 }
 .alert-warning .btn-close:hover, .alert-warning .btn-close:active, .alert-warning .btn-close:focus {
   color: #41403e;
-  color: var(--warning-dark-10);
+  color: var(--warning-dark);
 }
 
 .alert-danger {
@@ -1462,11 +1462,11 @@ table.table-alternating tbody tr:nth-of-type(even) {
 }
 .alert-danger .btn-close {
   color: #41403e;
-  color: var(--danger-light-10);
+  color: var(--danger-text);
 }
 .alert-danger .btn-close:hover, .alert-danger .btn-close:active, .alert-danger .btn-close:focus {
   color: #41403e;
-  color: var(--danger-dark-10);
+  color: var(--danger-dark);
 }
 
 .alert-muted {
@@ -1479,11 +1479,11 @@ table.table-alternating tbody tr:nth-of-type(even) {
 }
 .alert-muted .btn-close {
   color: #41403e;
-  color: var(--muted-light-10);
+  color: var(--muted-text);
 }
 .alert-muted .btn-close:hover, .alert-muted .btn-close:active, .alert-muted .btn-close:focus {
   color: #41403e;
-  color: var(--muted-dark-10);
+  color: var(--muted-dark);
 }
 
 .alert-state {
@@ -1812,15 +1812,17 @@ button.btn-muted:hover:active,
 button.btn-primary-outline,
 .paper-btn.btn-primary-outline,
 [type=button].btn-primary-outline {
-  background-color: white;
-  border-color: #b4b3b0;
+  background-color: #41403e;
+  background-color: var(--main-background);
   color: #41403e;
+  color: var(--primary);
+  border-color: #41403e;
+  border-color: var(--primary);
 }
 button.btn-primary-outline:hover,
 .paper-btn.btn-primary-outline:hover,
 [type=button].btn-primary-outline:hover {
   background-color: #cdcccb;
-  border-color: #41403e;
 }
 button.btn-primary-outline:hover:active,
 .paper-btn.btn-primary-outline:hover:active,
@@ -1831,15 +1833,17 @@ button.btn-primary-outline:hover:active,
 button.btn-secondary-outline,
 .paper-btn.btn-secondary-outline,
 [type=button].btn-secondary-outline {
-  background-color: white;
-  border-color: #a7d3fa;
-  color: #085aa5;
+  background-color: #41403e;
+  background-color: var(--main-background);
+  color: #41403e;
+  color: var(--secondary);
+  border-color: #41403e;
+  border-color: var(--secondary);
 }
 button.btn-secondary-outline:hover,
 .paper-btn.btn-secondary-outline:hover,
 [type=button].btn-secondary-outline:hover {
   background-color: #d8ebfd;
-  border-color: #0b74d5;
 }
 button.btn-secondary-outline:hover:active,
 .paper-btn.btn-secondary-outline:hover:active,
@@ -1850,15 +1854,17 @@ button.btn-secondary-outline:hover:active,
 button.btn-success-outline,
 .paper-btn.btn-success-outline,
 [type=button].btn-success-outline {
-  background-color: white;
-  border-color: #bccca8;
-  color: #4a5a35;
+  background-color: #41403e;
+  background-color: var(--main-background);
+  color: #41403e;
+  color: var(--success);
+  border-color: #41403e;
+  border-color: var(--success);
 }
 button.btn-success-outline:hover,
 .paper-btn.btn-success-outline:hover,
 [type=button].btn-success-outline:hover {
   background-color: #d5dfc8;
-  border-color: #86a361;
 }
 button.btn-success-outline:hover:active,
 .paper-btn.btn-success-outline:hover:active,
@@ -1869,15 +1875,17 @@ button.btn-success-outline:hover:active,
 button.btn-warning-outline,
 .paper-btn.btn-warning-outline,
 [type=button].btn-warning-outline {
-  background-color: white;
-  border-color: #ede49b;
-  color: #746a15;
+  background-color: #41403e;
+  background-color: var(--main-background);
+  color: #41403e;
+  color: var(--warning);
+  border-color: #41403e;
+  border-color: var(--warning);
 }
 button.btn-warning-outline:hover,
 .paper-btn.btn-warning-outline:hover,
 [type=button].btn-warning-outline:hover {
   background-color: #f5f0c6;
-  border-color: #ddcd45;
 }
 button.btn-warning-outline:hover:active,
 .paper-btn.btn-warning-outline:hover:active,
@@ -1888,15 +1896,17 @@ button.btn-warning-outline:hover:active,
 button.btn-danger-outline,
 .paper-btn.btn-danger-outline,
 [type=button].btn-danger-outline {
-  background-color: white;
-  border-color: #e6a5a1;
-  color: #7f2722;
+  background-color: #41403e;
+  background-color: var(--main-background);
+  color: #41403e;
+  color: var(--danger);
+  border-color: #41403e;
+  border-color: var(--danger);
 }
 button.btn-danger-outline:hover,
 .paper-btn.btn-danger-outline:hover,
 [type=button].btn-danger-outline:hover {
   background-color: #f0cbc9;
-  border-color: #a7342d;
 }
 button.btn-danger-outline:hover:active,
 .paper-btn.btn-danger-outline:hover:active,
@@ -1907,15 +1917,17 @@ button.btn-danger-outline:hover:active,
 button.btn-muted-outline,
 .paper-btn.btn-muted-outline,
 [type=button].btn-muted-outline {
-  background-color: white;
-  border-color: #caced1;
-  color: #6c757d;
+  background-color: #41403e;
+  background-color: var(--main-background);
+  color: #41403e;
+  color: var(--muted);
+  border-color: #41403e;
+  border-color: var(--muted);
 }
 button.btn-muted-outline:hover,
 .paper-btn.btn-muted-outline:hover,
 [type=button].btn-muted-outline:hover {
   background-color: #e6e7e9;
-  border-color: #868e96;
 }
 button.btn-muted-outline:hover:active,
 .paper-btn.btn-muted-outline:hover:active,
@@ -2519,7 +2531,8 @@ fieldset.form-group {
 [popover-bottom]:hover::after,
 [popover-left]:hover::after {
   opacity: 1;
-  transition: opacity 0.2s ease-out;
+  transition: opacity 235ms ease-in-out, visibility 0s linear;
+  visibility: visible;
 }
 [popover-top]::after,
 [popover-right]::after,
@@ -2529,14 +2542,14 @@ fieldset.form-group {
   border-bottom-right-radius: 225px 15px;
   border-top-left-radius: 255px 15px;
   border-top-right-radius: 15px 225px;
-  transition: opacity 235ms ease-in-out 0s;
   background-color: #41403e;
   background-color: var(--light-dark);
   border-color: #41403e;
-  border-color: var(--primary);
+  border-color: var(--light-dark);
+  color: #41403e;
+  color: var(--primary-inverse);
   border-style: solid;
   border-width: 2px;
-  color: white;
   font-size: 0.7em;
   left: 50%;
   min-width: 80px;
@@ -2546,6 +2559,8 @@ fieldset.form-group {
   text-align: center;
   top: -6px;
   transform: translateX(-50%) translateY(-100%);
+  transition: opacity 235ms ease-in-out, visibility 0s linear 235ms;
+  visibility: hidden;
 }
 
 [popover-left]::before {

docs/content/_index.md

@@ -6,18 +6,18 @@ weight: -270
 
 #### Download
 
-Download the latest version (1.9.0) using either of the links below. Or
+Download the latest version (1.9.2) using either of the links below. Or
 download an older release via GitHub.
 
 <div class="row flex-spaces text-center">
-  <a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases/download/v1.9.0/paper.css">CSS File</a>
-  <a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases/download/v1.9.0/paper.min.css">Minified CSS File</a>
+  <a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases/download/v1.9.2/paper.css">CSS File</a>
+  <a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases/download/v1.9.2/paper.min.css">Minified CSS File</a>
   <a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases">GitHub Releases</a>
 </div>
 
 #### NPM
 
-PaperCSS is available on NPM, current version 1.9.0. Install with <code>npm install papercss --save</code> and find the CSS in:
+PaperCSS is available on NPM, current version 1.9.2. Install with <code>npm install papercss --save</code> and find the CSS in:
 
 - node_modules/papercss/dist/paper.css
 - node_modules/papercss/dist/paper.min.css
@@ -27,8 +27,8 @@ PaperCSS is available on NPM, current version 1.9.0. Install with <code>npm inst
 Don't want to download it? That's cool. You can just link to PaperCSS via
 [unpkg's CDN](https://unpkg.com/#/). You can use either:
 
-- [https://unpkg.com/papercss@1.9.0/dist/paper.css](https://unpkg.com/papercss@1.9.0/dist/paper.css)
-- [https://unpkg.com/papercss@1.9.0/dist/paper.min.css](https://unpkg.com/papercss@1.9.0/dist/paper.min.css)
+- [https://unpkg.com/papercss@1.9.2/dist/paper.css](https://unpkg.com/papercss@1.9.2/dist/paper.css)
+- [https://unpkg.com/papercss@1.9.2/dist/paper.min.css](https://unpkg.com/papercss@1.9.2/dist/paper.min.css)
 
 Here's a quick snippet to get started with PaperCSS:
 
@@ -41,7 +41,7 @@ Here's a quick snippet to get started with PaperCSS:
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <link
       rel="stylesheet"
-      href="https://unpkg.com/papercss@1.9.0/dist/paper.min.css"
+      href="https://unpkg.com/papercss@1.9.2/dist/paper.min.css"
     />
     <title>Document</title>
   </head>

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "papercss",
-  "version": "1.9.0",
+  "version": "1.9.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "papercss",
-  "version": "1.9.0",
+  "version": "1.9.2",
   "description": "The less formal CSS framework.",
   "main": "dist/paper.css",
   "scripts": {

src/components/_alerts.scss

@@ -1,10 +1,10 @@
 @mixin btn-close-color($base-color-name) {
-  @include color('color', #{$base-color-name}-light-10);
+  @include color('color', #{$base-color-name}-text);
 
   &:hover,
   &:active,
   &:focus {
-    @include color('color', #{$base-color-name}-dark-10);
+    @include color('color', #{$base-color-name}-dark);
   }
 }
 

src/components/_buttons.scss

@@ -98,17 +98,12 @@ a {
   button.btn-#{$colorName}-outline,
   .paper-btn.btn-#{$colorName}-outline,
   [type='button'].btn-#{$colorName}-outline {
-    background-color: $white;
-    border-color: darken($color-light, 10%);
-    @if $colorName == primary {
-      color: $color;
-    } @else {
-      color: $color-text;
-    }
+    @include color('background-color', main-background);
+    @include color('color', #{$colorName});
+    @include color('border-color', #{$colorName});
 
     &:hover {
       background-color: $color-light;
-      border-color: $color;
     }
 
     &:hover {

src/components/_popovers.scss

@@ -10,19 +10,19 @@
   &:hover {
     &::after {
       opacity: 1;
-      transition: opacity 0.2s ease-out;
+      transition: opacity 235ms ease-in-out, visibility 0s linear;
+      visibility: visible;
     }
   }
 
   // Creating popover::after element
   &::after {
     @include border-style();
-    @include transition(opacity);
     @include color('background-color', 'light-dark');
-    @include color('border-color', 'primary');
+    @include color('border-color', 'light-dark');
+    @include color('color', 'primary-inverse');
     border-style: solid;
     border-width: 2px;
-    color: $white;
     font-size: 0.7em;
     left: 50%;
     min-width: 80px;
@@ -32,6 +32,8 @@
     text-align: center;
     top: -6px;
     transform: translateX(-50%) translateY(-100%);
+    transition: opacity 235ms ease-in-out, visibility 0s linear 235ms;
+    visibility: hidden;
   }
 }
 

src/core/_config.scss

@@ -125,7 +125,7 @@ $dark-secondary-text: $dark-secondary-dark !default;
 $dark-success-text: $dark-success-dark !default;
 $dark-warning-text: $dark-warning-dark !default;
 $dark-danger-text: $dark-danger-dark !default;
-$dark-muted-text: $dark-muted-dark !default;
+$dark-muted-text: $dark-muted-light !default;
 
 $dark-shadow-color-regular: hsla(0, 0%, 0%, 0.2) !default;
 $dark-shadow-color-hover: hsla(0, 0%, 0%, 0.3) !default;