Merge branch 'develop' into add-psone-controller-icon

.storybook/webpack.config.js

@@ -10,8 +10,7 @@ module.exports = {
       },
       {
         test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
-        loader: 'file-loader',
+        loader: 'url-loader',
-        // loader: 'url-loader?limit=100000',
       },
     ],
   },

docs/inputs.stories.js

@@ -14,11 +14,19 @@ stories.add('input.radio', () => `
         <input type="radio" class="nes-radio" name="answer" />
         <span>No</span>
       </label>`)
-  .add('input.checkbox', () => `
+  .add('input.checkbox', () => {
-      <label>
+    const selectedClass = radios('class', {
-        <input type="checkbox" class="nes-checkbox" checked />
+      default: '',
+      'is-dark': 'is-dark',
+    }, '');
+
+    return (
+      `<label>
+        <input type="checkbox" class="nes-checkbox ${selectedClass}" checked />
         <span>Enable</span>
-      </label>`)
+      </label>`
+    );
+  })
   .add('input', () => {
     const selectedClass = radios('class', {
       default: '',

package.json

@@ -61,7 +61,6 @@
     "eslint": "^5.9.0",
     "eslint-config-airbnb-base": "^13.1.0",
     "eslint-plugin-import": "^2.14.0",
-    "file-loader": "^2.0.0",
     "git-rev-sync": "^1.12.0",
     "husky": "^1.0.0",
     "lint-staged": "^7.3.0",
@@ -78,7 +77,8 @@
     "stylelint-config-recess-order": "^2.0.0",
     "stylelint-config-standard": "^18.2.0",
     "stylelint-prettier": "^1.0.5",
-    "stylelint-scss": "^3.3.1"
+    "stylelint-scss": "^3.3.1",
+    "url-loader": "^1.1.2"
   },
   "browserslist": [
     "> 1%"

scss/base/variables.scss

@@ -5,8 +5,9 @@ $font-size: 16px !default;
 $base-color: $color-black;
 $background-color: $color-white;
 
-$cursor-url: url(https://unpkg.com/nes.css/assets/cursor.png);
+$cursor-url: url(../assets/cursor.png);
-$cursor-click-url: url(https://unpkg.com/nes.css/assets/cursor-click.png);
+$cursor-click-url: url(../assets/cursor-click.png);
+
 $border-size: 4px;
 
 $default-colors: (

scss/form/checkboxes.scss

@@ -46,6 +46,7 @@
     (2,2,2,2,2,2,2,2,0,0)
   );
   $colors: ($base-color, map-get($default-colors, "shadow"));
+  $colors-checkbox-dark: ($color-white, map-get($default-colors, "shadow"));
 
   margin-left: 28px;
   -webkit-appearance: none;
@@ -80,4 +81,24 @@
   &:checked:focus + span::before {
     @include pixelize(2px, $checkbox-checked-focus, $colors);
   }
+  &.is-dark {
+    + span {
+      color: $color-white;
+    }
+    // prettier-ignore
+    + span::before { /* stylelint-disable-line no-descending-specificity */
+      color: $color-white;
+    }
+
+    &:checked + span::before {
+      @include pixelize(2px, $checkbox-checked-focus, $colors-checkbox-dark);
+
+      color: $color-white;
+    }
+    &:checked:focus + span::before {
+      @include pixelize(2px, $checkbox-checked-focus, $colors-checkbox-dark);
+
+      color: $color-white;
+    }
+  }
 }