├── .gitignore
├── public
├── favicon.ico
└── index.html
├── src
├── styles
│ ├── _tools.scss
│ ├── index.scss
│ ├── _theme.scss
│ ├── _helpers.scss
│ ├── _swatch.scss
│ ├── _nav.scss
│ ├── _config.scss
│ ├── _terminal.scss
│ ├── _layout.scss
│ ├── _header.scss
│ └── _defaults.scss
├── index.js
├── components
│ ├── Nav.js
│ ├── Tools.js
│ ├── Theme.js
│ ├── Main.js
│ ├── Swatch.js
│ ├── Terminal.js
│ └── App.js
└── data
│ └── themes.json
├── config
├── jest
│ ├── fileTransform.js
│ └── cssTransform.js
├── polyfills.js
├── paths.js
├── env.js
├── webpackDevServer.config.js
├── webpack.config.dev.js
└── webpack.config.prod.js
├── README.md
├── scripts
├── parse-theme-colors
├── test.js
├── build-themes.js
├── start.js
└── build.js
├── LICENSE
└── package.json
/.gitignore:
--------------------------------------------------------------------------------
1 | .vscode
2 | node_modules
3 | /build
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Glitchbone/vscode-base16-term/HEAD/public/favicon.ico
--------------------------------------------------------------------------------
/src/styles/_tools.scss:
--------------------------------------------------------------------------------
1 | .tools {
2 | button {
3 | opacity: .5;
4 | @include crossfade;
5 | &:hover {
6 | opacity: 1;
7 | }
8 | }
9 | }
--------------------------------------------------------------------------------
/src/styles/index.scss:
--------------------------------------------------------------------------------
1 | @import "config";
2 | @import "defaults";
3 | @import "helpers";
4 | @import "layout";
5 | @import "header";
6 | @import "nav";
7 | @import "theme";
8 | @import "terminal";
9 | @import "swatch";
10 | @import "tools";
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import 'normalize.css';
4 | import './styles/index.scss';
5 | import App from './components/App';
6 |
7 | ReactDOM.render( , document.getElementById('root'));
8 |
--------------------------------------------------------------------------------
/src/styles/_theme.scss:
--------------------------------------------------------------------------------
1 | .theme {
2 | text-align: center;
3 | &,
4 | h2 {
5 | @include crossfade;
6 | }
7 | h2 {
8 | font-size: 42px;
9 | font-size: calc(100% + 5vw);
10 | margin: 0;
11 | }
12 | }
--------------------------------------------------------------------------------
/src/styles/_helpers.scss:
--------------------------------------------------------------------------------
1 | .clearfix:after {
2 | content: "";
3 | display: table;
4 | clear: both;
5 | }
6 |
7 | .padded {
8 | padding: 32px;
9 | }
10 |
11 | @mixin crossfade {
12 | transition-property: color, border-color, background-color;
13 | transition-duration: .3s;
14 | }
--------------------------------------------------------------------------------
/src/styles/_swatch.scss:
--------------------------------------------------------------------------------
1 | .swatch {
2 | &__color {
3 | display: inline-block;
4 | width: $swatch-color-size;
5 | height: $swatch-color-size;
6 | border-radius: $swatch-color-size / 2;
7 | margin: 0 4px;
8 | border: 2px solid transparent;
9 | @include crossfade;
10 | }
11 | }
--------------------------------------------------------------------------------
/src/components/Nav.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { NavLink } from 'react-router-dom';
3 |
4 | const Nav = (props) => {
5 |
6 | return (
7 |
8 | {props.items.map((item) => {item.name} )}
9 |
10 | )
11 | }
12 |
13 | export default Nav;
--------------------------------------------------------------------------------
/config/jest/fileTransform.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const path = require('path');
4 |
5 | // This is a custom Jest transformer turning file imports into filenames.
6 | // http://facebook.github.io/jest/docs/en/webpack.html
7 |
8 | module.exports = {
9 | process(src, filename) {
10 | return `module.exports = ${JSON.stringify(path.basename(filename))};`;
11 | },
12 | };
13 |
--------------------------------------------------------------------------------
/src/styles/_nav.scss:
--------------------------------------------------------------------------------
1 | nav {
2 | a {
3 | display: block;
4 | padding: 16px;
5 | text-decoration: none;
6 | color: $default-text-color;
7 | &:hover {
8 | background: $nav-item-bg-color-hover;
9 | }
10 | &.active,
11 | &:focus {
12 | background: $nav-item-bg-color-active;
13 | }
14 | }
15 | }
--------------------------------------------------------------------------------
/config/jest/cssTransform.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | // This is a custom Jest transformer turning style imports into empty objects.
4 | // http://facebook.github.io/jest/docs/en/webpack.html
5 |
6 | module.exports = {
7 | process() {
8 | return 'module.exports = {};';
9 | },
10 | getCacheKey() {
11 | // The output is always the same.
12 | return 'cssTransform';
13 | },
14 | };
15 |
--------------------------------------------------------------------------------
/src/styles/_config.scss:
--------------------------------------------------------------------------------
1 | $default-text-color: #333;
2 | $header-bg-color: #373277;
3 | $header-text-color: #fff;
4 | $nav-item-bg-color-hover: rgba(0, 0, 0, 0.04);
5 | $nav-item-bg-color-active: rgba(0, 0, 0, 0.1);
6 | $base-font-family: 'Roboto', sans-serif;
7 | $terminal-font-family: 'Droid Sans Mono for Powerline', monospace;
8 | $sidebar-width: 260px;
9 | $terminal-font-size: 20px;
10 | $swatch-color-size: 32px;
--------------------------------------------------------------------------------
/src/styles/_terminal.scss:
--------------------------------------------------------------------------------
1 | .terminal {
2 | font-family: $terminal-font-family;
3 | font-size: $terminal-font-size;
4 | line-height: 1.25;
5 | &__screen,
6 | span {
7 | @include crossfade;
8 | }
9 | &__screen {
10 | padding: 16px;
11 | display: inline-block;
12 | border: 1px solid transparent;
13 | }
14 | span {
15 | display: inline-block;
16 | }
17 | }
--------------------------------------------------------------------------------
/src/styles/_layout.scss:
--------------------------------------------------------------------------------
1 | .app {
2 | display: flex;
3 | flex-direction: column;
4 | min-height: 100vh;
5 | }
6 |
7 | main,
8 | header {
9 | margin-left: $sidebar-width;
10 | }
11 |
12 | main {
13 | flex: 1;
14 | display: flex;
15 | align-items: center;
16 | justify-content: center;
17 | position: relative;
18 | }
19 |
20 | .sidebar {
21 | position: fixed;
22 | width: $sidebar-width;
23 | height: 100vh;
24 | overflow-y: scroll;
25 | }
--------------------------------------------------------------------------------
/src/styles/_header.scss:
--------------------------------------------------------------------------------
1 | header {
2 | background: $header-bg-color;
3 | &,
4 | a {
5 | color: $header-text-color;
6 | }
7 | h1 {
8 | display: inline-block;
9 | font-size: 28px;
10 | margin-top: 0;
11 | padding-bottom: 8px;
12 | margin-bottom: 16px;
13 | border-bottom: 1px solid rgba($header-text-color, .2);
14 | small {
15 | font-size: 16px;
16 | }
17 | }
18 | p {
19 | margin-top: 0;
20 | }
21 | }
--------------------------------------------------------------------------------
/src/components/Tools.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {CopyToClipboard} from 'react-copy-to-clipboard';
3 |
4 | const Tools = (props) => {
5 |
6 | const snippet = JSON.stringify(props).slice(1, -1).split(',').join(',\n')
7 |
8 | return (
9 |
10 |
11 | Copy to clipboard
12 |
13 |
14 |
15 | )
16 | }
17 |
18 | export default Tools;
--------------------------------------------------------------------------------
/src/components/Theme.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Terminal from './Terminal';
3 | import Swatch from './Swatch';
4 | import Tools from './Tools';
5 |
6 | const Theme = (props) => {
7 |
8 | return (
9 |
10 |
11 |
{props.name}
12 |
13 |
14 |
15 |
16 |
17 | )
18 | }
19 |
20 | export default Theme;
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Base16 Terminal Colors for Visual Studio Code
2 |
3 | [glitchbone.github.io/vscode-base16-term](https://glitchbone.github.io/vscode-base16-term)
4 |
5 | ## Building the themes
6 |
7 | Clone this repo & the [base16-shell](https://github.com/chriskempson/base16-shell) repo & build the themes.json file by running this command inside this project folder :
8 |
9 | ```sh
10 | npm run build-themes path/to/base16-shell/scripts
11 | ```
12 |
13 | ## Author
14 |
15 | **Adrien Glitchbone**
16 |
17 | + [http://glitchbone.com](http://glitchbone.com)
18 |
19 | ## License
20 |
21 | This project is available under the MIT license. See the [LICENSE](LICENSE) file for more information.
--------------------------------------------------------------------------------
/src/styles/_defaults.scss:
--------------------------------------------------------------------------------
1 | html {
2 | box-sizing: border-box;
3 | }
4 |
5 | *,
6 | *:before,
7 | *:after {
8 | box-sizing: inherit;
9 | }
10 |
11 | body {
12 | -webkit-font-smoothing: antialiased;
13 | color: $default-text-color;
14 | }
15 |
16 | body,
17 | button {
18 | font-family: $base-font-family;
19 | }
20 |
21 | button {
22 | background: transparent;
23 | color: #fff;
24 | padding: 12px 24px;
25 | border: 0;
26 | cursor: pointer;
27 | &:focus {
28 | outline: none;
29 |
30 | }
31 | &:active {
32 | transform: scale(.98);
33 | }
34 | }
35 |
36 | h1,
37 | h2,
38 | h3,
39 | h4 {
40 | font-weight: 300;
41 | }
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | Base16 Terminal Colors for Visual Studio Code
13 |
14 |
15 |
16 |
17 | You need to enable JavaScript to run this app.
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/scripts/parse-theme-colors:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env bash
2 |
3 | print_color() {
4 | eval current_color=\$${1}
5 | current_color=$(echo ${current_color//\//} | tr '[:lower:]' '[:upper:]')
6 | echo "\"$1\":\"#$current_color\"$2"
7 | }
8 |
9 | theme=$1
10 |
11 | if [ -f $theme ]; then
12 | # get the color declarations in said theme, assumes there is a block of text that starts with color00= and ends with new line
13 | eval $(awk '/^color00=/,/^$/ {print}' $theme | sed 's/#.*//')
14 | else
15 | printf "No theme file %s found\n" $theme
16 | fi;
17 |
18 | echo "{"
19 |
20 | for color in `seq -w 0 21`; do
21 | print_color "color${color}" ","
22 | done;
23 |
24 | print_color "color_foreground" ","
25 | print_color "color_background"
26 |
27 | echo "}"
--------------------------------------------------------------------------------
/scripts/test.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | // Do this as the first thing so that any code reading it knows the right env.
4 | process.env.BABEL_ENV = 'test';
5 | process.env.NODE_ENV = 'test';
6 | process.env.PUBLIC_URL = '';
7 |
8 | // Makes the script crash on unhandled rejections instead of silently
9 | // ignoring them. In the future, promise rejections that are not handled will
10 | // terminate the Node.js process with a non-zero exit code.
11 | process.on('unhandledRejection', err => {
12 | throw err;
13 | });
14 |
15 | // Ensure environment variables are read.
16 | require('../config/env');
17 |
18 | const jest = require('jest');
19 | const argv = process.argv.slice(2);
20 |
21 | // Watch unless on CI or in coverage mode
22 | if (!process.env.CI && argv.indexOf('--coverage') < 0) {
23 | argv.push('--watch');
24 | }
25 |
26 |
27 | jest.run(argv);
28 |
--------------------------------------------------------------------------------
/src/components/Main.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import _ from 'lodash';
3 | import Theme from './Theme';
4 |
5 | class Main extends Component {
6 |
7 | constructor(props) {
8 | super(props);
9 | this.state = {
10 | activeTheme: this.props.themes[0]
11 | };
12 | }
13 |
14 | setActiveTheme(id) {
15 |
16 | const theme = _.find(this.props.themes, {id});
17 |
18 | this.setState({
19 | activeTheme: theme ? theme : this.props.themes[0]
20 | });
21 | }
22 |
23 | componentDidMount() {
24 | this.setActiveTheme(this.props.themeId);
25 | }
26 |
27 | componentWillReceiveProps(nextProps) {
28 | this.setActiveTheme(nextProps.themeId);
29 | }
30 |
31 | render() {
32 | return (
33 |
34 | )
35 | }
36 | }
37 |
38 | export default Main;
39 |
--------------------------------------------------------------------------------
/config/polyfills.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | if (typeof Promise === 'undefined') {
4 | // Rejection tracking prevents a common issue where React gets into an
5 | // inconsistent state due to an error, but it gets swallowed by a Promise,
6 | // and the user has no idea what causes React's erratic future behavior.
7 | require('promise/lib/rejection-tracking').enable();
8 | window.Promise = require('promise/lib/es6-extensions.js');
9 | }
10 |
11 | // fetch() polyfill for making API calls.
12 | require('whatwg-fetch');
13 |
14 | // Object.assign() is commonly used with React.
15 | // It will use the native implementation if it's present and isn't buggy.
16 | Object.assign = require('object-assign');
17 |
18 | // In tests, polyfill requestAnimationFrame since jsdom doesn't provide it yet.
19 | // We don't polyfill it in the browser--this is user's responsibility.
20 | if (process.env.NODE_ENV === 'test') {
21 | require('raf').polyfill(global);
22 | }
23 |
--------------------------------------------------------------------------------
/src/components/Swatch.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const Swatch = (props) => {
4 |
5 | const swatchColors = [
6 | 'ansiBlack',
7 | 'ansiBlue',
8 | 'ansiBrightBlack',
9 | 'ansiBrightBlue',
10 | 'ansiBrightCyan',
11 | 'ansiBrightGreen',
12 | 'ansiBrightMagenta',
13 | 'ansiBrightRed',
14 | 'ansiBrightWhite',
15 | 'ansiBrightYellow',
16 | 'ansiCyan',
17 | 'ansiGreen',
18 | 'ansiMagenta',
19 | 'ansiRed',
20 | 'ansiWhite',
21 | 'ansiYellow'
22 | ];
23 |
24 | return (
25 |
26 | {swatchColors.map((key, i) =>
27 |
31 | )}
32 |
33 | )
34 | }
35 |
36 | export default Swatch;
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2018 Adrien Glitchbone
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
--------------------------------------------------------------------------------
/src/components/Terminal.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const Terminal = (props) => {
4 |
5 | return (
6 |
7 |
8 | dschrute@dunder-mifflin
9 |
10 | ~/leads
11 |
12 | master
13 |
14 | ls
15 | █
16 |
17 |
18 | )
19 | }
20 |
21 | export default Terminal;
--------------------------------------------------------------------------------
/src/components/App.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { HashRouter as Router } from 'react-router-dom';
3 | import { Route } from 'react-router-dom';
4 | import themes from '../data/themes.json';
5 | import Nav from './Nav';
6 | import Main from './Main';
7 |
8 | const App = (props) => {
9 |
10 | return (
11 |
12 |
13 |
16 |
21 |
(
22 |
23 | )} />
24 |
25 |
26 | )
27 | }
28 |
29 | export default App;
30 |
--------------------------------------------------------------------------------
/config/paths.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const path = require('path');
4 | const fs = require('fs');
5 | const url = require('url');
6 |
7 | // Make sure any symlinks in the project folder are resolved:
8 | // https://github.com/facebookincubator/create-react-app/issues/637
9 | const appDirectory = fs.realpathSync(process.cwd());
10 | const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
11 |
12 | const envPublicUrl = process.env.PUBLIC_URL;
13 |
14 | function ensureSlash(path, needsSlash) {
15 | const hasSlash = path.endsWith('/');
16 | if (hasSlash && !needsSlash) {
17 | return path.substr(path, path.length - 1);
18 | } else if (!hasSlash && needsSlash) {
19 | return `${path}/`;
20 | } else {
21 | return path;
22 | }
23 | }
24 |
25 | const getPublicUrl = appPackageJson =>
26 | envPublicUrl || require(appPackageJson).homepage;
27 |
28 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer
29 | // "public path" at which the app is served.
30 | // Webpack needs to know it to put the right