Merge branch 'develop' into stray-pixels

2025-08-21 13:31:24 +02:00 · 2018-12-07 21:28:43 +02:00
parent 88e3c9c259 659b2b4c57
commit 3abd226b43
42 changed files with 16685 additions and 2306 deletions
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -0,0 +1,199 @@
+version: 2.1
+
+defaults: &defaults
+  docker:
+    - image: circleci/node
+
+  working_directory: ~/app
+
+
+
+
+
+jobs:
+  checkout:
+    <<: *defaults
+
+    steps:
+      - restore_cache:
+          name: Restore Repository Cache
+          keys:
+            - repo-{{ .Branch }}-{{ .Environment.CIRCLE_SHA1 }}
+            - repo-{{ .Branch }}
+            - repo-master
+            - repo-
+
+      - checkout
+
+      - save_cache:
+          name: Save Repository Cache
+          key: repo-{{ .Branch }}-{{ .Environment.CIRCLE_SHA1 }}
+          paths:
+            - .
+
+      - persist_to_workspace:
+          root: .
+          paths:
+            - .
+
+  install-dependencies:
+    <<: *defaults
+
+    steps:
+      - attach_workspace:
+          at: .
+
+      - restore_cache:
+          name: Restore npm Package Cache
+          keys:
+            - npm-{{ checksum "package-lock.json" }}
+            - npm-
+
+      - run:
+          name: Install Dependencies
+          command: npm install
+
+      - save_cache:
+          name: Save npm Package Cache
+          key: npm-{{ checksum "package-lock.json" }}
+          paths:
+            - node_modules
+
+      - persist_to_workspace:
+          root: .
+          paths:
+            - node_modules
+
+  build:
+    <<: *defaults
+
+    steps:
+      - attach_workspace:
+          at: .
+
+      - restore_cache:
+          name: Restore Build Cache
+          keys:
+            - build-{{ .Branch }}-{{ .Environment.CIRCLE_SHA1 }}
+            - build-{{ .Branch }}
+            - build-master
+            - build-
+
+      - run:
+          name: Build the Framework
+          command: npm run build
+
+      - save_cache:
+          name: Save Build Cache
+          key: build-{{ .Branch }}-{{ .Environment.CIRCLE_SHA1 }}
+          paths:
+            - css
+
+      - persist_to_workspace:
+          root: .
+          paths:
+            - css
+
+  commitlint:
+    <<: *defaults
+
+    steps:
+      - attach_workspace:
+          at: .
+
+      - run:
+          name: Lint commit messages
+          command: npx semantic-commitlint -- --ci
+
+  lint:
+    <<: *defaults
+
+    steps:
+      - attach_workspace:
+          at: .
+
+      - run:
+          name: Lint styles
+          command: npx stylelint -- --fix
+
+  # test:
+  #   <<: *defaults
+
+  #   steps:
+  #     - attach_workspace:
+  #         at: .
+
+  #     - run:
+  #         name: Add Yarn Binary Folder To $PATH
+  #         command: export PATH="$PATH:`yarn global bin`"
+
+  #     - run:
+  #         name: Run tests
+  #         command: yarn test
+
+  # coverage:
+  #   <<: *defaults
+
+  #   steps:
+  #     - attach_workspace:
+  #         at: .
+
+  #     - run:
+  #         name: Add Yarn Binary Folder To $PATH
+  #         command: export PATH="$PATH:`yarn global bin`"
+
+  #     - run:
+  #         name: Generate and upload coverage report
+  #         command: yarn test-coverage
+
+  release:
+    <<: *defaults
+
+    steps:
+      - attach_workspace:
+          at: .
+
+      - run:
+          command: mkdir ~/.ssh/ && echo -e "Host github.com\n\tStrictHostKeyChecking no\n" > ~/.ssh/config
+
+      - run:
+          name: Release
+          command: npx semantic-release
+
+
+
+
+
+workflows:
+  version: 2
+
+  main:
+    jobs:
+      - checkout
+      - install-dependencies:
+          requires:
+            - checkout
+      # - test:
+      #     requires:
+      #       - install-dependencies
+      # - coverage:
+      #     requires:
+      #       - install-dependencies
+      - commitlint:
+          requires:
+            - install-dependencies
+      - lint:
+          requires:
+            - install-dependencies
+      - build:
+          requires:
+            - install-dependencies
+      - release:
+          requires:
+            - commitlint
+            - build
+            - lint
+            # - test
+          filters:
+            branches:
+              only: master
--- a/.github/ISSUE_TEMPLATE.md
+++ b/.github/ISSUE_TEMPLATE.md
@@ -1,4 +1,18 @@
-<!-- 
-  I'm not very good at English. So, I'm glad if you write in English as easy as possible.
-  日本語がわかる方はなるべく日本語でお願いします。
-->
+<!-- Please fill your information below the lines starting with `#`. -->
+<!-- You can delete these lines enclosed by `<` and `>` before posting, too. -->
+
+# Description of the issue
+<!-- What is the issue/problem you are facing? -->
+
+# What was expected to be seen
+<!-- What were you expecting to see? -->
+
+# What actually was seen instead
+<!-- What did you actually see? Try to be precise as possible! -->
+
+# Environment
+Browser: <!-- Version of your browser. -->
+Build environment (i.e. NodeJS): <!-- If you have issues building the SCSS into CSS, add your information here. Delete this otherwise. -->
+
+# Suggestion(s) for fixing this issue
+<!-- What are your thoughts? How could this possibly be resolved? -->
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -1,4 +1,11 @@
-<!-- 
-  I'm not very good at English. So, I'm glad if you write in English as easy as possible.
-  日本語がわかる方はなるべく日本語でお願いします。
-->
+<!-- Please fill your information below the lines starting with `#`. -->
+<!-- You can delete these lines enclosed by `<` and `>` before posting, too. -->
+
+# Description
+<!-- What does this PR do, what does it want to achieve? -->
+
+# Compatibility
+<!-- Elaborate on how this PR affects the compatibility. Is it breaking, or not? -->
+
+# Caveats
+<!-- Is there something specific you'd like to mention before merge? -->
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,4 @@
 node_modules
 .vscode
+css
+storybook-static
--- a/.npmignore
+++ b/.npmignore
@@ -0,0 +1,3 @@
+node_modules
+.vscode
+storybook-static
--- a/.storybook/addons.js
+++ b/.storybook/addons.js
@@ -0,0 +1 @@
+import '@storybook/addon-knobs/register'; // eslint-disable-line import/no-extraneous-dependencies
--- a/.storybook/config.js
+++ b/.storybook/config.js
@@ -0,0 +1,11 @@
+import { configure } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
+
+import '../css/nes.min.css';
+
+// automatically import all files ending in *.stories.js
+const req = require.context('../docs', true, /.stories.js$/);
+function loadStories() {
+  req.keys().forEach(filename => req(filename));
+}
+
+configure(loadStories, module);
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -0,0 +1 @@
+<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
--- a/README-jp.md
+++ b/README-jp.md
@@ -0,0 +1,126 @@
+<div align="center">
+  <a href="https://nostalgic-css.github.io/NES.css/" target="_blank"><img src="https://user-images.githubusercontent.com/5305599/49061716-da649680-f254-11e8-9a89-d95a7407ec6a.png" alt="NES.css: NES-style  CSS framework" style="max-width:100%;" width="600" height="315"></a>
+
+  <a href="README.md">English</a> / <a href="README-jp.md">日本語</a>
+</div>
+
+NES.cssは **ファミコン風(8bit ライク)** なCSSフレームワークです。
+
+[![Gitter][gitter-badge]][gitter] [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
+
+## Install
+
+### CDN
+
+```html
+<!-- minify -->
+<link href="https://unpkg.com/nes.css@0.0.2/css/nes.min.css" rel="stylesheet" />
+<!-- latest -->
+<link href="https://unpkg.com/nes.css/css/nes.min.css" rel="stylesheet" />
+```
+
+OR
+
+```html
+<!-- non-minified -->
+<link href="https://unpkg.com/nes.css@0.0.2/css/nes.css" rel="stylesheet" />
+<!-- latest -->
+<link href="https://unpkg.com/nes.css/css/nes.css" rel="stylesheet" />
+```
+
+### npm
+
+TODO: npm での使用方法を書く
+
+
+## Usage
+
+NES.cssはコンポーネントのスタイルのみを提供しています。レイアウトはみなさんが好きなように定義してください。
+
+デフォルトのフォントは[Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P?selection.family=Press+Start+2P)を使っています。英語以外（日本語など）で利用される場合は、別途フォントを読み込んで使ってください。 フォントを読み込む方法は、Google Fontsの[Get Started](https://developers.google.com/fonts/docs/getting_started)を参照するか、または以下のように読み込んでください。
+
+```html
+<head>
+    <link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
+    <link href="https://unpkg.com/nes.css/css/nes.css" rel="stylesheet" />
+    <style>
+      html, body, pre, code, kbd, samp {
+          font-family: "font-family you want to use";
+      }
+    </style>
+</head>
+```
+
+### Recommended Fonts
+
+|言語|フォント|
+|----|----|
+|(デフォルト)|[Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P)|
+|英語|[Kongtext](https://www.dafont.com/kongtext.font)|
+|日本語|[美咲フォント](http://www.geocities.jp/littlimi/misaki.htm)|
+|日本語|[Nu もち](http://kokagem.sakura.ne.jp/font/mochi/)|
+
+
+## CSS Only
+
+NES.cssはCSSのみで構成されています。JavaScriptは不要です。
+
+
+## Browser Support
+
+次のブラウザの最新バージョンをサポートしています。
+
+* Chrome
+* Firefox
+* Safari
+
+未確認
+* IE/Edge
+
+
+## Development
+
+### Commands
+```sh
+git clone git@github.com:BcRikko/NES.css.git
+cd NES.css
+
+npm i
+
+npm run watch
+npm run build
+```
+
+pre-commit hookにより、コミット時に自動でLint→format→buildが走り、`css`ディレクトリにファイルが出力されます。
+TODO: ビルドはCIでするように変更したい
+
+### Directories
+```sh
+.
+├── index.html: Demo page
+├── style.css: Demo page style
+├── css: Distribution files
+└── scss: Source
+    ├── base
+    │   ├── reboot.scss: Don't change! (Bootstrap Reboot)
+    │   ├── generic.scss: Generic style and reboot.css
+    │   └── variables.scss: Common variables
+    ├── elements
+    ├── form
+    ├── icons: 16x16 icons
+    ├── pixel-arts: For icons other than 16x16.
+    └── utilities
+```
+
+
+
+## Copyright and license
+
+Code and documentation copyright 2018 [B.C.Rikko](https://github.com/BcRikko). Code released under the MIT License. Docs released under Creative Commons.
+
+
+
+
+
+[gitter]: https://gitter.im/nostalgic-css/Lobby
+[gitter-badge]: https://img.shields.io/gitter/room/nostalgic-css/Lobby.svg
--- a/README.md
+++ b/README.md
@@ -1,12 +1,12 @@
 <div align="center">
-  <a href="https://bcrikko.github.io/NES.css/" target="_blank"><img src="https://user-images.githubusercontent.com/5305599/49061716-da649680-f254-11e8-9a89-d95a7407ec6a.png" alt="NES.css: NES-style  CSS framework" style="max-width:100%;" width="600" height="315"></a>
+  <a href="https://nostalgic-css.github.io/NES.css/" target="_blank"><img src="https://user-images.githubusercontent.com/5305599/49061716-da649680-f254-11e8-9a89-d95a7407ec6a.png" alt="NES.css: NES-style  CSS framework" style="max-width:100%;" width="600" height="315"></a>

-  <a href="README.md">English</a> / <a href="README.md">日本語</a>
+  <a href="README.md">English</a> / <a href="README-jp.md">日本語</a>
 </div>

 NES.css is a **NES-style(8bit-like)** CSS Framework.
-NES.cssは **ファミコン風(8bit ライク)** なCSSフレームワークです。

+[![Gitter][gitter-badge]][gitter] [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)

 ## Install

@@ -32,30 +32,47 @@ OR

 TODO: npm での使用方法を書く

-
 ## Usage

-NES.cssはコンポーネントのスタイルのみを提供しています。レイアウトはみなさんが好きなように定義してください。
+NES.css only provides components. You will need to define your own layout.

-デフォルトでは`Press Start 2P`フォントを使っています。英語以外（日本語など）で利用される場合は、別途フォントを読み込んで使ってください。
+The default font is [Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P?selection.family=Press+Start+2P) which only supports English characters. When you're using this framework with any language except English, please use another font. Please follow the [instructions](https://developers.google.com/fonts/docs/getting_started) from Google Fonts about how to include them, or simply include it as below:

-TODO: 詳細を書く
+```html
+<head>
+    <link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
+    <link href="https://unpkg.com/nes.css/css/nes.css" rel="stylesheet" />
+    <style>
+      html, body, pre, code, kbd, samp {
+          font-family: "font-family you want to use";
+      }
+    </style>
+</head>
+```
+
+### Recommended Fonts
+
+|Language|Font|
+|----|----|
+|(Default)|[Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P)|
+|English|[Kongtext](https://www.dafont.com/kongtext.font)|
+|Japanese|[美咲フォント](http://www.geocities.jp/littlimi/misaki.htm)|
+|Japanese|[Nu もち](http://kokagem.sakura.ne.jp/font/mochi/)|


 ## CSS Only

-NES.cssはCSSのみで構成されています。JavaScriptは不要です。
+NES.css only requires CSS and doesn't depend on any JavaScript.


 ## Browser Support

-次のブラウザの最新バージョンをサポートしています。
-
+NES.css is compatible with the newest version of the following browsers.
 * Chrome
 * Firefox
 * Safari

-未確認
+Untested
 * IE/Edge


@@ -72,25 +89,31 @@ npm run watch
 npm run build
 ```

-pre-commit hookにより、コミット時に自動でLint→format→buildが走り、`css`ディレクトリにファイルが出力されます。
+#### Run Storybook
+```
+npm run storybook
+```
+
+Linting, formatting and building runs automatically in the pre-commit hook.
 TODO: ビルドはCIでするように変更したい

 ### Directories
-```
+```sh
 .
-|- index.html: Demo page
-|- style.css: Demo page style
-|- css: Distribution files
-|-　scss: Source
-    |- base
-    |   |- reboot.scss: **Don't change!** (Bootstrap Reboot)
-    |   |- generic.scss: Generic style and overwrite reboot.css
-    |   |- variables.scss: Common variables
-    |- elements
-    |- form
-    |- icons: For 16x16 icon
-    |- pixel-arts: For icon other than 16x16 icon.
-    |- utilities
+├── index.html: Demo page
+├── style.css: Demo page style
+├── css: Distribution files
+├── docs: Storybook stories
+└── scss: Source
+    ├── base
+    │   ├── reboot.scss: Don't change! (Bootstrap Reboot)
+    │   ├── generic.scss: Generic style and reboot.css
+    │   └── variables.scss: Common variables
+    ├── elements
+    ├── form
+    ├── icons: 16x16 icons
+    ├── pixel-arts: For icons other than 16x16.
+    └── utilities
 ```


@@ -98,3 +121,10 @@ TODO: ビルドはCIでするように変更したい
 ## Copyright and license

 Code and documentation copyright 2018 [B.C.Rikko](https://github.com/BcRikko). Code released under the MIT License. Docs released under Creative Commons.
+
+
+
+
+
+[gitter]: https://gitter.im/nostalgic-css/Lobby
+[gitter-badge]: https://img.shields.io/gitter/room/nostalgic-css/Lobby.svg
--- a/assets/cursor-click.png
+++ b/assets/cursor-click.png
--- a/assets/cursor.png
+++ b/assets/cursor.png
--- a/commitlint.config.js
+++ b/commitlint.config.js
@@ -0,0 +1,8 @@
+/* eslint-env node */
+
+module.exports = {
+  extends: ['@commitlint/config-conventional'],
+
+  // Add your own rules. See http://marionebl.github.io/commitlint
+  rules: {},
+};
--- a/docs/balloons.stories.js
+++ b/docs/balloons.stories.js
@@ -0,0 +1,16 @@
+import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
+import { // eslint-disable-line import/no-extraneous-dependencies
+  withKnobs, radios,
+} from '@storybook/addon-knobs';
+
+const stories = storiesOf('Ballons', module);
+stories.addDecorator(withKnobs);
+
+stories.add('balloon', () => {
+  const selectedClass = radios('direction', {
+    default: '',
+    'from-left': 'from-left',
+    'from-right': 'from-right',
+  }, '');
+  return `<div class="balloon ${selectedClass}"> <p>Hello NES.css</p> </div>`;
+});
--- a/docs/buttons.stories.js
+++ b/docs/buttons.stories.js
@@ -0,0 +1,19 @@
+import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
+import { // eslint-disable-line import/no-extraneous-dependencies
+  withKnobs, radios,
+} from '@storybook/addon-knobs';
+
+const stories = storiesOf('Buttons', module);
+stories.addDecorator(withKnobs);
+
+stories.add('button', () => {
+  const extraClass = radios('class', {
+    default: '',
+    'is-primary': 'is-primary',
+    'is-success': 'is-success',
+    'is-warning': 'is-warning',
+    'is-error': 'is-error',
+    'is-disabled': 'is-disabled',
+  }, '');
+  return `<button type="button" class="btn ${extraClass}">Normal</button>`;
+});
--- a/docs/containers.stories.js
+++ b/docs/containers.stories.js
@@ -0,0 +1,24 @@
+import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
+import { // eslint-disable-line import/no-extraneous-dependencies
+  withKnobs, boolean, radios,
+} from '@storybook/addon-knobs';
+
+const stories = storiesOf('Containers', module);
+stories.addDecorator(withKnobs);
+
+stories.add('container', () => {
+  const withTitle = boolean('with-title', false) ? 'with-title' : '';
+  const isDark = boolean('is-dark', false) ? 'is-dark' : '';
+  const isRounded = boolean('is-rounded', false) ? 'is-rounded' : '';
+  const alignment = radios('alignment', {
+    default: '',
+    'is-center': 'is-center',
+    'is-right': 'is-right',
+  }, '');
+  const selectedClasses = [withTitle, isDark, isRounded, alignment];
+
+  return `<div class="container ${selectedClasses.join(' ')}">
+      <p class="title">Container</p>
+      <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
+  </div>`;
+});
--- a/docs/icons.stories.js
+++ b/docs/icons.stories.js
@@ -0,0 +1,31 @@
+import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
+import { // eslint-disable-line import/no-extraneous-dependencies
+  withKnobs, select, radios,
+} from '@storybook/addon-knobs';
+
+const stories = storiesOf('Icons', module);
+stories.addDecorator(withKnobs);
+
+stories.add('icon', () => {
+  const selectedClass = select('class', {
+    'icon twitter': 'icon twitter',
+    'icon facebook': 'icon facebook',
+    'icon github': 'icon github',
+    'icon google': 'icon google',
+    'icon youtube': 'icon youtube',
+    'icon close': 'icon close',
+    'octocat animate': 'octocat animate',
+    'icon trophy': 'icon trophy',
+    'nes-logo': 'nes-logo',
+    'nes-jp-logo': 'nes-jp-logo',
+    'snes-logo': 'snes-logo',
+    'snes-jp-logo': 'snes-jp-logo',
+  }, 'icon twitter');
+  const selectedSize = radios('size', {
+    default: '',
+    'is-medium': 'is-medium',
+    'is-large': 'is-large',
+  }, '');
+
+  return `<i class="${selectedClass} ${selectedSize}"></i>`;
+});
--- a/docs/inputs.stories.js
+++ b/docs/inputs.stories.js
@@ -0,0 +1,31 @@
+import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
+import { // eslint-disable-line import/no-extraneous-dependencies
+  withKnobs, radios,
+} from '@storybook/addon-knobs';
+
+const stories = storiesOf('Inputs', module);
+stories.addDecorator(withKnobs);
+
+stories.add('input.radio', () => `
+      <label>
+        <input type="radio" class="radio" name="answer" checked />
+        <span>Yes</span>
+      </label> <label>
+        <input type="radio" class="radio" name="answer" />
+        <span>No</span>
+      </label>`)
+  .add('input.checkbox', () => `
+      <label>
+        <input type="checkbox" class="checkbox" checked />
+        <span>Enable</span>
+      </label>`)
+  .add('input', () => {
+    const selectedClass = radios('class', {
+      default: '',
+      'is-success': 'is-success',
+      'is-warning': 'is-warning',
+      'is-error': 'is-error',
+    }, '');
+
+    return `<input type="text" id="name_field" class="input ${selectedClass}" placeholder="NES.css">`;
+  });
--- a/docs/table.stories.js
+++ b/docs/table.stories.js
@@ -0,0 +1,37 @@
+import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
+import { // eslint-disable-line import/no-extraneous-dependencies
+  withKnobs, boolean,
+} from '@storybook/addon-knobs';
+
+const stories = storiesOf('Tables', module);
+stories.addDecorator(withKnobs);
+
+stories.add('table', () => {
+  const isBordered = boolean('is-bordered', true) ? 'is-bordered' : '';
+  const isCentered = boolean('is-centered', false) ? 'is-centered' : '';
+  const isDark = boolean('is-dark', false) ? 'is-dark' : '';
+
+  const selectedClasses = [isBordered, isCentered, isDark];
+
+  return `<table class="table ${selectedClasses.join(' ')}" style="margin:15px 4px 5px 4px">
+        <thead>
+          <tr>
+            <th>Table.is-dark</th>
+            <th>Table.is-bordered</th>
+            <th>Table.is-centered</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>Thou hast had a good morning</td>
+            <td>Thou hast had a good afternoon</td>
+            <td>Thou hast had a good night</td>
+          </tr>
+          <tr>
+            <td>Thou hast had a good morning</td>
+            <td>Thou hast had a good afternoon</td>
+            <td>Thou hast had a good night</td>
+          </tr>
+        </tbody>
+      </table>`;
+});
--- a/index.html
+++ b/index.html
@@ -11,6 +11,7 @@

    <title>NES.css - NES-style CSS Framework</title>

+    <link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
    <link href="./css/nes.css" rel="stylesheet" />
    <link href="./style.css" rel="stylesheet" />

@@ -47,6 +48,7 @@
        <button type="button" class="btn is-success">Success</button>
        <button type="button" class="btn is-warning">Warning</button>
        <button type="button" class="btn is-error">Error</button>
+        <button type="button" class="btn is-disabled">Disabled</button>
      </div>
    </section>

@@ -130,6 +132,31 @@
      </div>
    </section>

+    <section class="container with-title">
+      <h2 class="title">Table</h2>
+      <table class="table is-bordered is-centered" style="margin:15px 4px 5px 4px">
+        <thead>
+          <tr>
+            <th>Table</th>
+            <th>Table.is-bordered</th>
+            <th>Table.is-centered</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>Thou hast had a good morning</td>
+            <td>Thou hast had a good afternoon</td>
+            <td>Thou hast had a good night</td>
+          </tr>
+          <tr>
+            <td>Thou hast had a good morning</td>
+            <td>Thou hast had a good afternoon</td>
+            <td>Thou hast had a good night</td>
+          </tr>
+        </tbody>
+      </table>
+    </section>
+
    <section class="container with-title">
      <h2 class="title">Icons</h2>
      <section class="container with-title">
@@ -138,14 +165,17 @@
          <i class="icon heart"></i>
          <i class="icon heart is-medium"></i>
          <i class="icon heart is-large"></i>
+          <i class="icon heart is-empty"></i>

          <i class="icon star"></i>
          <i class="icon star is-medium"></i>
          <i class="icon star is-large"></i>
+          <i class="icon star is-empty"></i>

          <i class="icon like"></i>
          <i class="icon like is-medium"></i>
          <i class="icon like is-large"></i>
+          <i class="icon like is-empty"></i>
        </div>
      </section>
      <section class="container with-title">
@@ -162,6 +192,14 @@
          <i class="icon github"></i>
          <i class="icon github is-medium"></i>
          <i class="icon github is-large"></i>
+
+          <i class="icon youtube"></i>
+          <i class="icon youtube is-medium"></i>
+          <i class="icon youtube is-large"></i>
+
+          <i class="icon google"></i>
+          <i class="icon google is-medium"></i>
+          <i class="icon google is-large"></i>
        </div>
      </section>

@@ -173,6 +211,10 @@
          <i class="icon close is-large"></i>

          <i class="octocat animate"></i>
+
+          <i class="icon trophy"></i>
+          <i class="icon trophy is-medium"></i>
+          <i class="icon trophy is-large"></i>
        </div>
      </section>

--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,21 +1,28 @@
 {
  "name": "nes.css",
-  "version": "0.0.2",
+  "version": "0.0.0-development",
  "description": "NES.css is NES-style CSS Framework.",
  "scripts": {
    "watch": "npm run build:sass -- --watch",
-    "build": "npm run build:clean && npm run build:stylelint && npm run build:sass && npm run build:autoprefix && npm run build:cleancss",
+    "build": "npm run build:clean && npm run build:stylelint && npm run build:sass && npm run build:autoprefix && npm run build:cleancss && npm run build:storybook",
    "stylelint": "stylelint scss/**/*.scss",
    "build:stylelint": "npm run stylelint -- --fix",
    "build:clean": "rimraf css",
    "build:sass": "node-sass --output-style expanded --source-map true scss/nes.scss css/nes.css",
    "build:autoprefix": "postcss --use autoprefixer --map false --output css/nes.css css/nes.css",
    "build:cleancss": "cleancss -o css/nes.min.css css/nes.css",
-    "deploy": "npm run build"
+    "storybook": "start-storybook -p 6006",
+    "build:storybook": "build-storybook",
+    "deploy": "npm run build",
+    "semantic-commitlint": "semantic-commitlint",
+    "semantic-release": "semantic-release",
+    "commit": "git-cz",
+    "commit:retry": "git-cz --retry",
+    "commitmsg": "commitlint -e"
  },
  "repository": {
    "type": "git",
-    "url": "git+https://github.com/BcRikko/NES.css.git"
+    "url": "https://github.com/nostalgic-css/NES.css.git"
  },
  "keywords": [
    "css",
@@ -26,18 +33,30 @@
  "author": "BcRikko (https://github.com/Bcrikko)",
  "license": "MIT",
  "bugs": {
-    "url": "https://github.com/BcRikko/NES.css/issues"
+    "url": "https://github.com/nostalgic-css/NES.css/issues"
  },
-  "homepage": "https://github.com/BcRikko/NES.css#readme",
+  "homepage": "https://github.com/nostalgic-css/NES.css#readme",
  "devDependencies": {
+    "@commitlint/cli": "^7.2.1",
+    "@commitlint/config-conventional": "^7.1.2",
+    "@storybook/addon-knobs": "^4.0.11",
+    "@storybook/html": "^4.0.11",
    "autoprefixer": "^9.1.5",
+    "babel-loader": "^8.0.4",
    "clean-css-cli": "^4.2.1",
+    "commitizen": "^3.0.5",
+    "eslint": "^5.9.0",
+    "eslint-config-airbnb-base": "^13.1.0",
+    "eslint-plugin-import": "^2.14.0",
+    "cz-conventional-changelog": "^2.1.0",
    "husky": "^1.0.0",
    "lint-staged": "^7.3.0",
    "node-sass": "^4.9.3",
    "postcss-cli": "^6.0.0",
    "prettier": "^1.15.2",
    "rimraf": "^2.6.2",
+    "semantic-commitlint": "^1.3.2",
+    "semantic-release": "^15.12.3",
    "stylelint": "^9.5.0",
    "stylelint-config-prettier": "^4.0.0",
    "stylelint-config-recess-order": "^2.0.0",
@@ -48,21 +67,36 @@
  "browserslist": [
    "> 1%"
  ],
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
  "husky": {
    "hooks": {
-      "pre-commit": "lint-staged"
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
+      "pre-commit": "lint-staged",
+      "prepare-commit-msg": "npm run semantic-commitlint -- -h"
    }
  },
  "lint-staged": {
    "scss/**/*.scss": [
      "npm run build",
-      "git add ./css",
+      "git add"
+    ],
+    "*.js": [
+      "eslint '.storybook/**/*.js' 'docs/**/*.js'",
      "git add"
    ]
  },
  "prettier": {
    "printWidth": 100
  },
+  "release": {
+    "verifyRelease": [
+      "semantic-commitlint"
+    ]
+  },
  "stylelint": {
    "plugins": [
      "stylelint-scss",
@@ -79,5 +113,13 @@
      "at-rule-no-unknown": null,
      "scss/at-rule-no-unknown": true
    }
+  },
+  "eslintConfig": {
+    "extends": "airbnb-base"
+  },
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
  }
 }
--- a/scss/base/_index.scss
+++ b/scss/base/_index.scss
@@ -1,5 +1,6 @@
@charset "utf-8";

@import "reboot.scss";
+@import "color-palette.scss";
@import "variables.scss";
@import "generic.scss";
--- a/scss/base/color-palette.scss
+++ b/scss/base/color-palette.scss
@@ -0,0 +1,72 @@
+// https://en.wikipedia.org/wiki/List_of_video_game_console_palettes#NES
+
+$color-black: #212529;
+$color-white: #fff;
+
+$color-00: #7c7c7c;
+$color-01: #0000fc;
+$color-02: #0000bc;
+$color-03: #4428bc;
+$color-04: #940084;
+$color-05: #a80020;
+$color-06: #a81000;
+$color-07: #881400;
+$color-08: #503000;
+$color-09: #007800;
+$color-0A: #006800;
+$color-0B: #005800;
+$color-0C: #004058;
+$color-0D: #000;
+$color-0E: #000;
+$color-0F: #000;
+
+$color-10: #bcbcbc;
+$color-11: #0078f8;
+$color-12: #0058f8;
+$color-13: #6844fc;
+$color-14: #d800cc;
+$color-15: #e40058;
+$color-16: #f83800;
+$color-17: #e45c10;
+$color-18: #ac7c00;
+$color-19: #00b800;
+$color-1A: #00a800;
+$color-1B: #00a844;
+$color-1C: #088;
+$color-1D: #000;
+$color-1E: #000;
+$color-1F: #000;
+
+$color-20: #f8f8f8;
+$color-21: #3cbcfc;
+$color-22: #6888fc;
+$color-23: #9878f8;
+$color-24: #f878f8;
+$color-25: #f85898;
+$color-26: #f87858;
+$color-27: #fca044;
+$color-28: #f8b800;
+$color-29: #b8f818;
+$color-2A: #58d854;
+$color-2B: #58f898;
+$color-2C: #00e8d8;
+$color-2D: #787878;
+$color-2E: #000;
+$color-2F: #000;
+
+$color-30: #fcfcfc;
+$color-31: #a4e4fc;
+$color-32: #b8b8f8;
+$color-33: #d8b8f8;
+$color-34: #f8b8f8;
+$color-35: #f8a4c0;
+$color-36: #f0d0b0;
+$color-37: #fbdfa6;
+$color-38: #f8d878;
+$color-39: #d8f878;
+$color-3A: #b8f8b8;
+$color-3B: #b8f8d8;
+$color-3C: #00fcfc;
+$color-3D: #d8d8d8;
+$color-3E: #000;
+$color-3F: #000;
--- a/scss/base/generic.scss
+++ b/scss/base/generic.scss
@@ -9,6 +9,10 @@ samp {
  font-family: $font-family;
 }

+html {
+  cursor: $cursor-url, auto;
+}
+
 body {
  font-size: $font-size;
  color: $base-color;
@@ -16,6 +20,15 @@ body {
  -webkit-font-smoothing: none;
 }

+label {
+  cursor: inherit;
+}
+
+a,
+button {
+  cursor: $cursor-click-url, pointer;
+}
+
 button,
 [type="button"],
 [type="reset"],
--- a/scss/base/variables.scss
+++ b/scss/base/variables.scss
@@ -1,7 +1,9 @@
 // Font
-@import url("https://fonts.googleapis.com/css?family=Press+Start+2P");
 $font-family: "Press Start 2P" !default;
 $font-size: 16px !default;

-$base-color: #212529;
-$background-color: #fff;
+$base-color: $color-black;
+$background-color: $color-white;
+
+$cursor-url: url(../assets/cursor.png);
+$cursor-click-url: url(../assets/cursor-click.png);
--- a/scss/elements/_index.scss
+++ b/scss/elements/_index.scss
@@ -5,3 +5,4 @@
@import "radios.scss";
@import "checkboxes.scss";
@import "balloons.scss";
+@import "tables.scss";
--- a/scss/elements/buttons.scss
+++ b/scss/elements/buttons.scss
@@ -14,6 +14,65 @@
  }
 }

+@mixin btn-extra-pixelize-style($color, $background, $hover-background, $shadow) {
+  color: $color;
+  background-color: $background;
+
+  &:hover,
+  &:focus {
+    background-color: $hover-background;
+    outline: 0;
+    // prettier-ignore
+    box-shadow: 
+      0 -4px $hover-background,
+      inset 0 -2px $shadow,
+      0 -8px #212529,
+      4px 0 $shadow,
+      4px -4px #212529, 
+      8px 0 #212529, 
+      0 4px $shadow, 
+      4px 4px #212529, 
+      0 8px #212529,
+      -4px 0 $hover-background, 
+      inset -2px 0 $shadow, 
+      -4px -4px #212529, 
+      -8px 0 #212529,
+      -4px 4px #212529;
+  }
+
+  &:active {
+    // prettier-ignore
+    box-shadow: 
+      0 -4px $shadow, 
+      0 -8px #212529, 
+      4px 0 $hover-background, 
+      4px -4px #212529,
+      8px 0 #212529, 
+      0 4px $hover-background, 
+      4px 4px #212529, 
+      0 8px #212529, 
+      -4px 0 $shadow,
+      -4px -4px #212529, 
+      -8px 0 #212529, 
+      -4px 4px #212529;
+  }
+
+  // prettier-ignore
+  box-shadow: 
+    0 -4px $background, 
+    0 -8px #212529, 
+    4px 0 $shadow, 
+    4px -4px #212529, 
+    8px 0 #212529,
+    0 4px $shadow, 
+    4px 4px #212529, 
+    0 8px #212529, 
+    -4px 0 $background, 
+    -4px -4px #212529,
+    -8px 0 #212529, 
+    -4px 4px #212529;
+}
+
 // Default style
 .btn {
  $border-size: 4px;
@@ -24,7 +83,7 @@
  margin: $border-size;
  text-align: center;
  vertical-align: middle;
-  cursor: pointer;
+  cursor: $cursor-click-url, pointer;
  user-select: none;

  @include btn-style($base-color, #fff, #e7e7e7, #adafbc);
@@ -59,11 +118,21 @@
    outline: 0;
  }

+  &.is-disabled,
+  &.is-disabled:hover,
+  &.is-disabled:focus {
+    color: $base-color;
+    cursor: not-allowed;
+    background-color: #d3d3d3;
+    box-shadow: inset -4px -4px #adafbc;
+    opacity: 0.6;
+  }
+
  // Other styles
  // prettier-ignore
  $types:
-    "primary" #fff #92cc41 #76c442 #4aa52e,
-    "success" #fff #209cee #108de0 #006bb3,
+    "primary" #fff #209cee #108de0 #006bb3,
+    "success" #fff #92cc41 #76c442 #4aa52e,
    "warning" $base-color #f7d51d #f2c409 #e59400,
    "error" #fff #e76e55 #ce372b #8c2022;

@@ -72,4 +141,25 @@
      @include btn-style(nth($type, 2), nth($type, 3), nth($type, 4), nth($type, 5));
    }
  }
+
+  &.is-rounded {
+    box-sizing: content-box;
+    padding: 6px 8px;
+    @include btn-extra-pixelize-style($base-color, #fff, #e7e7e7, #adafbc);
+
+    &::before,
+    &::after {
+      border-width: 0;
+    }
+    @each $type in $types {
+      &.is-#{nth($type, 1)} {
+        @include btn-extra-pixelize-style(
+          nth($type, 2),
+          nth($type, 3),
+          nth($type, 4),
+          nth($type, 5)
+        );
+      }
+    }
+  }
 }
--- a/scss/elements/checkboxes.scss
+++ b/scss/elements/checkboxes.scss
@@ -54,7 +54,7 @@

  & + span {
    position: relative;
-    cursor: pointer;
+    cursor: $cursor-click-url, pointer;
  }

  & + span::before,
--- a/scss/elements/containers.scss
+++ b/scss/elements/containers.scss
@@ -72,27 +72,41 @@
    }
  }

+  &.is-center {
+    text-align: center;
+  }
+
+  &.is-right {
+    text-align: right;
+  }
+
  &.with-title {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
    padding-top: 2rem;

    > .title {
-      position: absolute;
-      top: 0;
+      display: table;
      padding: 0 0.5rem;
-      margin: 0;
+      margin: -2rem 0 1rem;
      font-size: 1rem;
      background-color: $background-color;
    }

+    &.is-rounded {
+      > .title {
+        margin-top: -2.4rem;
+      }
+    }
+
    &.is-center {
-      align-items: center;
+      > .title {
+        margin: -2.4rem auto 1rem;
+      }
    }

    &.is-right {
-      align-items: right;
+      > .title {
+        margin: -2.4rem 0 1rem auto;
+      }
    }
  }

@@ -105,9 +119,11 @@
      border-color: #fff;
    }

+    &.with-title {
      > .title {
        color: $background-color;
        background-color: $base-color;
      }
    }
+  }
 }
--- a/scss/elements/radios.scss
+++ b/scss/elements/radios.scss
@@ -28,7 +28,7 @@

  & + span {
    position: relative;
-    cursor: pointer;
+    cursor: $cursor-click-url, pointer;
  }

  &:checked + span::before {
--- a/scss/elements/tables.scss
+++ b/scss/elements/tables.scss
@@ -0,0 +1,54 @@
+.table {
+  table-layout: fixed;
+  background-color: $background-color;
+  @mixin thsAndTdsBoxShadow($color) {
+    th,
+    td {
+      padding: 0.5rem;
+      word-wrap: break-word;
+    }
+
+    tr {
+      th + th {
+        box-shadow: -4px 0 $color;
+      }
+      td {
+        box-shadow: 0 -4px $color;
+      }
+      td:not(:first-child) {
+        box-shadow: -4px 0 $color, 0 -4px $color;
+      }
+    }
+  }
+  &.is-centered th {
+    text-align: center;
+  }
+  &.is-bordered {
+    box-shadow: 4px 0 $base-color, 0 -4px $base-color, -4px 0 $base-color, 0 4px $base-color;
+    @include thsAndTdsBoxShadow($base-color);
+  }
+  &.is-dark {
+    position: relative;
+    color: $background-color;
+    background-color: $base-color;
+    box-shadow: 4px -4px $base-color, -4px -4px $base-color, -4px 4px $base-color,
+      4px 4px $base-color;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      content: "";
+      background: linear-gradient(to left, transparent 4px, $background-color 4px) no-repeat,
+        linear-gradient(to bottom, transparent 4px, $background-color 4px) no-repeat,
+        linear-gradient(to right, transparent 4px, $background-color 4px) no-repeat,
+        linear-gradient(to top, transparent 4px, $background-color 4px) no-repeat;
+      background-position: 100% 0, 100% 0, 0 100%, 0 100%;
+      background-size: calc(100% - 4px) 4px, 4px calc(100% - 4px);
+    }
+
+    @include thsAndTdsBoxShadow($background-color);
+  }
+}
--- a/scss/form/inputs.scss
+++ b/scss/form/inputs.scss
@@ -17,7 +17,7 @@
  @include border-style($base-color, #e7e7e7);

  &.is-success {
-    @include border-style(#209cee, #108de0);
+    @include border-style(#92cc41, #76c442);
  }
  &.is-warning {
    @include border-style(#f7d51d, #f2c409);
--- a/scss/icons/google.scss
+++ b/scss/icons/google.scss
@@ -0,0 +1,20 @@
+$icon-google-colors: (#4285f4, #fff, #db4437, #f4b400, #0f9d58);
+// prettier-ignore
+$icon-google: (
+  ( 0,2,2,2,2,2,2,2,2,2,2,2,2,2,2,0 ),
+  ( 2,2,2,2,2,3,3,3,3,3,3,2,2,2,2,2 ),
+  ( 2,2,2,3,3,3,3,3,3,3,3,3,3,2,2,2 ),
+  ( 2,2,3,3,3,3,3,3,3,3,3,3,2,2,2,2 ),
+  ( 2,3,3,3,3,2,2,2,2,2,3,2,2,2,2,2 ),
+  ( 4,3,3,3,2,2,2,2,2,2,2,2,2,2,2,2 ),
+  ( 4,4,3,2,2,2,2,2,2,2,2,2,2,2,2,2 ),
+  ( 4,4,4,2,2,2,2,2,1,1,1,1,1,1,1,2 ),
+  ( 4,4,4,2,2,2,2,2,1,1,1,1,1,1,1,2 ),
+  ( 4,4,4,2,2,2,2,2,1,1,1,1,1,1,1,2 ),
+  ( 4,4,5,2,2,2,2,2,2,2,2,2,1,1,1,2 ),
+  ( 4,5,5,5,2,2,2,2,2,2,2,1,1,1,1,2 ),
+  ( 2,5,5,5,5,2,2,2,2,2,5,1,1,1,2,2 ),
+  ( 2,2,5,5,5,5,5,5,5,5,5,5,1,1,2,2 ),
+  ( 2,2,2,5,5,5,5,5,5,5,5,5,5,2,2,2 ),
+  ( 0,2,2,2,2,5,5,5,5,5,5,2,2,2,2,0 )
+);
--- a/scss/icons/heart.scss
+++ b/scss/icons/heart.scss
@@ -18,3 +18,24 @@ $icon-heart: (
  (0,0,0,0,0,0,0,2,0,0,0,0,0,0,0,0),
  (0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
 );
+
+$icon-heart-empty-colors: (#adafbb);
+// prettier-ignore
+$icon-heart-empty: (
+  (0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0),
+  (0,0,1,1,1,0,0,0,0,0,1,1,1,0,0,0),
+  (0,1,0,0,0,1,0,0,0,1,0,0,0,1,0,0),
+  (1,0,0,0,0,0,1,0,1,0,0,0,0,0,1,0),
+  (1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,0),
+  (1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0),
+  (1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0),
+  (1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0),
+  (0,1,0,0,0,0,0,0,0,0,0,0,0,1,0,0),
+  (0,0,1,0,0,0,0,0,0,0,0,0,1,0,0,0),
+  (0,0,0,1,0,0,0,0,0,0,0,1,0,0,0,0),
+  (0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0),
+  (0,0,0,0,0,1,0,0,0,1,0,0,0,0,0,0),
+  (0,0,0,0,0,0,1,0,1,0,0,0,0,0,0,0),
+  (0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0),
+  (0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
+);
--- a/scss/icons/icons.scss
+++ b/scss/icons/icons.scss
@@ -7,9 +7,12 @@
@import "twitter.scss";
@import "facebook.scss";
@import "github.scss";
+@import "youtube.scss";
+@import "google.scss";

 // others
@import "close.scss";
+@import "trophy.scss";

 .icon {
  position: relative;
@@ -35,14 +38,27 @@
    &.heart::before {
      @include pixelize($icon-heart, $icon-heart-colors, $px);
    }
+    &.heart.is-empty::before {
+      @include pixelize($icon-heart-empty, $icon-heart-empty-colors, $px);
+    }

    &.star::before {
      @include pixelize($icon-star, $icon-star-colors, $px);
    }
+    &.star.is-empty::before {
+      @include pixelize($icon-star-empty, $icon-star-empty-colors, $px);
+    }
+
+    &.trophy::before {
+      @include pixelize($icon-trophy, $icon-trophy-colors, $px);
+    }

    &.like::before {
      @include pixelize($icon-like, $icon-like-colors, $px);
    }
+    &.like.is-empty::before {
+      @include pixelize($icon-like-empty, $icon-like-empty-colors, $px);
+    }

    &.twitter::before {
      @include pixelize($icon-twitter, $icon-twitter-colors, $px);
@@ -59,6 +75,14 @@
    &.close::before {
      @include pixelize($icon-close, $icon-close-colors, $px);
    }
+
+    &.youtube::before {
+      @include pixelize($icon-youtube, $icon-youtube-colors, $px);
+    }
+
+    &.google::before {
+      @include pixelize($icon-google, $icon-google-colors, $px);
+    }
  }

  // default
--- a/scss/icons/like.scss
+++ b/scss/icons/like.scss
@@ -18,3 +18,24 @@ $icon-like: (
  (0,2,2,2,0,2,2,2,2,2,2,2,2,0,0,0),
  (0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
 );
+
+$icon-like-empty-colors: (#adafbb);
+// prettier-ignore
+$icon-like-empty: (
+  (0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0),
+  (0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0),
+  (0,0,0,0,0,0,0,1,0,1,0,0,0,0,0,0),
+  (0,0,0,0,0,0,0,1,0,1,0,0,0,0,0,0),
+  (0,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0),
+  (0,0,0,0,0,0,1,0,0,1,1,1,1,1,1,0),
+  (0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,1),
+  (0,1,1,1,0,1,0,0,0,0,0,0,0,0,0,1),
+  (1,0,0,0,1,0,0,0,0,0,0,0,0,0,0,1),
+  (1,0,0,0,1,0,0,0,0,0,0,0,0,0,1,0),
+  (1,0,0,0,1,0,0,0,0,0,0,0,0,0,1,0),
+  (1,0,0,0,1,0,0,0,0,0,0,0,0,0,1,0),
+  (1,0,0,0,1,0,0,0,0,0,0,0,0,1,0,0),
+  (1,0,0,0,1,0,0,0,0,0,0,0,0,1,0,0),
+  (0,1,1,1,0,1,1,1,1,1,1,1,1,0,0,0),
+  (0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)
+);
--- a/scss/icons/star.scss
+++ b/scss/icons/star.scss
@@ -18,3 +18,24 @@ $icon-star: (
  (2,4,4,2,2,0,0,0,0,0,2,2,4,4,2,0),
  (2,2,2,0,0,0,0,0,0,0,0,0,2,2,2,0)
 );
+
+$icon-star-empty-colors: (#adafbb);
+// prettier-ignore
+$icon-star-empty: (
+  (0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0),
+  (0,0,0,0,0,0,1,0,1,0,0,0,0,0,0,0),
+  (0,0,0,0,0,0,1,0,1,0,0,0,0,0,0,0),
+  (0,0,0,0,0,1,0,0,0,1,0,0,0,0,0,0),
+  (0,0,0,0,0,1,0,0,0,1,0,0,0,0,0,0),
+  (1,1,1,1,1,1,0,0,0,0,1,1,1,1,1,0),
+  (1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0),
+  (0,1,0,0,0,0,0,0,0,0,0,0,0,1,0,0),
+  (0,0,1,0,0,0,0,0,0,0,0,0,1,0,0,0),
+  (0,0,0,1,0,0,0,0,0,0,0,1,0,0,0,0),
+  (0,0,1,0,0,0,0,0,0,0,0,0,1,0,0,0),
+  (0,0,1,0,0,0,0,0,0,0,0,0,1,0,0,0),
+  (0,1,0,0,0,0,0,1,0,0,0,0,0,1,0,0),
+  (0,1,0,0,0,1,1,0,1,1,0,0,0,1,0,0),
+  (1,0,0,1,1,0,0,0,0,0,1,1,0,0,1,0),
+  (1,1,1,0,0,0,0,0,0,0,0,0,1,1,1,0)
+);
--- a/scss/icons/trophy.scss
+++ b/scss/icons/trophy.scss
@@ -0,0 +1,25 @@
+$icon-trophy-colors: (#fff, #444, #ebe527, #f59f54);
+// prettier-ignore
+$icon-trophy: (
+  (0,0,2,2,2,2,2,2,2,2,2,2,2,0,0,0),
+  (0,0,2,3,3,3,3,3,3,3,3,4,2,0,0,0),
+  (2,2,2,3,1,3,3,3,3,3,3,4,2,2,2,0),
+  (2,0,2,3,1,3,3,3,3,3,3,4,2,0,2,0),
+  (2,0,2,3,1,3,3,3,3,3,3,4,2,0,2,0),
+  (0,2,2,3,1,3,3,3,3,3,3,4,2,2,0,0),
+  (0,0,2,3,1,3,3,3,3,3,3,4,2,0,0,0),
+  (0,0,2,3,3,3,3,3,3,3,3,4,2,0,0,0),
+  (0,0,0,2,3,3,3,3,3,3,4,2,0,0,0,0),
+  (0,0,0,0,2,3,3,3,3,4,2,0,0,0,0,0),
+  (0,0,0,0,0,2,3,3,4,2,0,0,0,0,0,0),
+  (0,0,0,0,0,0,2,3,2,0,0,0,0,0,0,0),
+  (0,0,0,0,0,0,2,3,2,0,0,0,0,0,0,0),
+  (0,0,0,0,0,2,2,3,2,2,0,0,0,0,0,0),
+  (0,0,0,0,2,3,3,3,3,4,2,0,0,0,0,0),
+  (0,0,0,0,2,2,2,2,2,2,2,0,0,0,0,0),
+);
+
+// 2 black
+// 3 yellow
+// 1 white
+// 4 orange
--- a/scss/icons/youtube.scss
+++ b/scss/icons/youtube.scss
@@ -0,0 +1,20 @@
+$icon-youtube-colors: (#fff, #f00);
+// prettier-ignore
+$icon-youtube: (
+  ( 0,2,2,2,2,2,2,2,2,2,2,2,2,2,2,0 ),
+  ( 2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2 ),
+  ( 2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2 ),
+  ( 2,2,2,2,2,2,1,2,2,2,2,2,2,2,2,2 ),
+  ( 2,2,2,2,2,2,1,1,2,2,2,2,2,2,2,2 ),
+  ( 2,2,2,2,2,2,1,1,1,2,2,2,2,2,2,2 ),
+  ( 2,2,2,2,2,2,1,1,1,1,2,2,2,2,2,2 ),
+  ( 2,2,2,2,2,2,1,1,1,1,1,2,2,2,2,2 ),
+  ( 2,2,2,2,2,2,1,1,1,1,2,2,2,2,2,2 ),
+  ( 2,2,2,2,2,2,1,1,1,2,2,2,2,2,2,2 ),
+  ( 2,2,2,2,2,2,1,1,2,2,2,2,2,2,2,2 ),
+  ( 2,2,2,2,2,2,1,2,2,2,2,2,2,2,2,2 ),
+  ( 2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2 ),
+  ( 2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2 ),
+  ( 2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2 ),
+  ( 0,2,2,2,2,2,2,2,2,2,2,2,2,2,2,0 )
+);
--- a/scss/pixel-arts/snes-icon.scss
+++ b/scss/pixel-arts/snes-icon.scss
@@ -1,6 +1,6 @@
 .snes-logo {
  $px: 3px;
-  $logo-colors: (#333, #d7d7d7, #8932e5);
+  $logo-colors: (#333, #d7d7d7, #8932e5, #ad6df0);

  // prettier-ignore
  $logo: (
@@ -9,8 +9,8 @@
    (0,0,0,0,0,0,0,1,0,0,0,0,0,0,0),
    (0,0,1,1,1,1,1,1,1,1,1,1,1,0,0),
    (0,1,2,2,2,2,2,2,2,2,2,2,2,1,0),
-    (1,2,2,1,2,2,2,2,2,2,2,3,2,2,1),
-    (1,2,1,1,1,2,2,2,2,2,3,2,3,2,1),
+    (1,2,2,1,2,2,2,2,2,2,2,4,2,2,1),
+    (1,2,1,1,1,2,2,2,2,2,4,2,3,2,1),
    (1,2,2,1,2,2,1,2,1,2,2,3,2,2,1),
    (0,1,2,2,2,2,2,2,2,2,2,2,2,1,0),
    (0,0,1,1,1,1,1,1,1,1,1,1,1,0,0)
--- a/scss/utilities/icon-mixin.scss
+++ b/scss/utilities/icon-mixin.scss
@@ -1,5 +1,6 @@
@mixin pixelize($matrix, $colors, $size) {
  $ret: "";
+  $moz: "";

  @for $i from 1 through length($matrix) {
    $row: nth($matrix, $i);
@@ -10,10 +11,12 @@
      @if $dot != 0 {
        @if $ret != "" {
          $ret: $ret + ",";
+          $moz: $moz + ",";
        }

        $color: nth($colors, $dot);
        $ret: $ret + ($j * $size) + " " + ($i * $size) + " " + $color;
+        $moz: $moz + ($j * $size)+" "+ ($i * $size)+" 0 0.020em " + $color;
      }
    }
  }
@@ -21,4 +24,7 @@
  width: $size;
  height: $size;
  box-shadow: unquote($ret);
+  @-moz-document url-prefix() {
+    -webkit-box-shadow: unquote($moz);
+  }
 }
				`@@ -0,0 +1 @@`
				`import '@storybook/addon-knobs/register'; // eslint-disable-line import/no-extraneous-dependencies`
				`@@ -0,0 +1 @@`
				`<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">`