diff --git a/.babelrc.js b/.babelrc.js
new file mode 100644
index 000000000..eb9c740ff
--- /dev/null
+++ b/.babelrc.js
@@ -0,0 +1,16 @@
+module.exports = {
+ presets: [
+ [
+ '@babel/env',
+ {
+ exclude: ['transform-typeof-symbol'],
+ loose: true,
+ modules: false
+ }
+ ]
+ ],
+ plugins: [
+ process.env.PLUGINS && 'transform-es2015-modules-strip',
+ '@babel/proposal-object-rest-spread'
+ ].filter(Boolean)
+};
diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 000000000..71c3258a8
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1,3 @@
+**/*.min.js
+**/addons/*
+js/*
diff --git a/Gemfile b/Gemfile
index 788658a48..b80761f88 100644
--- a/Gemfile
+++ b/Gemfile
@@ -1,8 +1,8 @@
source 'https://rubygems.org'
group :development, :test do
- gem 'jekyll', '~> 3.5.1'
- gem 'jekyll-redirect-from', '~> 0.12.1'
+ gem 'jekyll', '~> 3.7.0'
+ gem 'jekyll-redirect-from', '~> 0.13.0'
gem 'jekyll-sitemap', '~> 1.1.1'
- gem 'jekyll-toc', '~> 0.3.0.pre1'
+ gem 'jekyll-toc', '~> 0.5.1'
end
diff --git a/Gemfile.lock b/Gemfile.lock
index 53b52fdf0..28b223ea2 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -1,50 +1,62 @@
GEM
remote: https://rubygems.org/
specs:
- addressable (2.5.1)
- public_suffix (~> 2.0, >= 2.0.2)
+ addressable (2.5.2)
+ public_suffix (>= 2.0.2, < 4.0)
colorator (1.1.0)
+ concurrent-ruby (1.0.5)
+ em-websocket (0.5.1)
+ eventmachine (>= 0.12.9)
+ http_parser.rb (~> 0.6.0)
+ eventmachine (1.2.5)
ffi (1.9.18)
forwardable-extended (2.6.0)
- jekyll (3.5.2)
+ http_parser.rb (0.6.0)
+ i18n (0.9.1)
+ concurrent-ruby (~> 1.0)
+ jekyll (3.7.0)
addressable (~> 2.4)
colorator (~> 1.0)
+ em-websocket (~> 0.5)
+ i18n (~> 0.7)
jekyll-sass-converter (~> 1.0)
- jekyll-watch (~> 1.1)
- kramdown (~> 1.3)
+ jekyll-watch (~> 2.0)
+ kramdown (~> 1.14)
liquid (~> 4.0)
mercenary (~> 0.3.3)
pathutil (~> 0.9)
- rouge (~> 1.7)
+ rouge (>= 1.7, < 4)
safe_yaml (~> 1.0)
- jekyll-redirect-from (0.12.1)
+ jekyll-redirect-from (0.13.0)
jekyll (~> 3.3)
- jekyll-sass-converter (1.5.0)
+ jekyll-sass-converter (1.5.1)
sass (~> 3.4)
jekyll-sitemap (1.1.1)
jekyll (~> 3.3)
- jekyll-toc (0.3.0)
+ jekyll-toc (0.5.1)
nokogiri (~> 1.6)
- jekyll-watch (1.5.0)
- listen (~> 3.0, < 3.1)
- kramdown (1.14.0)
+ jekyll-watch (2.0.0)
+ listen (~> 3.0)
+ kramdown (1.16.2)
liquid (4.0.0)
- listen (3.0.8)
+ listen (3.1.5)
rb-fsevent (~> 0.9, >= 0.9.4)
rb-inotify (~> 0.9, >= 0.9.7)
+ ruby_dep (~> 1.2)
mercenary (0.3.6)
- mini_portile2 (2.2.0)
- nokogiri (1.8.0)
- mini_portile2 (~> 2.2.0)
- pathutil (0.14.0)
+ mini_portile2 (2.3.0)
+ nokogiri (1.8.1)
+ mini_portile2 (~> 2.3.0)
+ pathutil (0.16.1)
forwardable-extended (~> 2.6)
- public_suffix (2.0.5)
+ public_suffix (3.0.1)
rb-fsevent (0.10.2)
rb-inotify (0.9.10)
ffi (>= 0.5.0, < 2)
- rouge (1.11.1)
+ rouge (3.1.0)
+ ruby_dep (1.5.0)
safe_yaml (1.0.4)
- sass (3.5.1)
+ sass (3.5.5)
sass-listen (~> 4.0.0)
sass-listen (4.0.0)
rb-fsevent (~> 0.9, >= 0.9.4)
@@ -54,10 +66,10 @@ PLATFORMS
ruby
DEPENDENCIES
- jekyll (~> 3.5.1)
- jekyll-redirect-from (~> 0.12.1)
+ jekyll (~> 3.7.0)
+ jekyll-redirect-from (~> 0.13.0)
jekyll-sitemap (~> 1.1.1)
- jekyll-toc (~> 0.3.0.pre1)
+ jekyll-toc (~> 0.5.1)
BUNDLED WITH
- 1.15.4
+ 1.16.0
diff --git a/Gruntfile.js b/Gruntfile.js
deleted file mode 100644
index 2d445f5c6..000000000
--- a/Gruntfile.js
+++ /dev/null
@@ -1,336 +0,0 @@
-module.exports = function(grunt) {
- 'use strict'
-
- require('load-grunt-tasks')(grunt)
- require('time-grunt')(grunt)
-
- // project configuration
- grunt.initConfig({
- pkg: grunt.file.readJSON('package.json'),
-
- banner: '/*!\n' +
- ' * Material v<%= pkg.version %> (<%= pkg.homepage %>)\n' +
- ' * Copyright <%= grunt.template.today("yyyy") %> <%= pkg.author %>\n' +
- ' * Licensed under MIT (https://github.com/Daemonite/material/blob/master/LICENSE)\n' +
- ' */\n\n' +
- 'if (typeof jQuery === \'undefined\') {\n' +
- ' throw new Error(\'Material\\\'s JavaScript requires jQuery\')\n' +
- '}\n\n' +
- '+function ($) {\n' +
- ' var version = $.fn.jquery.split(\' \')[0].split(\'.\')\n' +
- ' if (version[0] < 3 || version[0] >= 4) {\n' +
- ' throw new Error(\'Material\\\'s JavaScript requires at least jQuery v3.0.0 but less than v4.0.0\')\n' +
- ' }\n' +
- '}(jQuery);\n',
-
- babel: {
- material: {
- options: {
- 'babelrc': false,
- 'plugins': [
- 'transform-es2015-modules-strip'
- ],
- 'presets': [
- [
- 'es2015',
- {
- 'loose': true,
- 'modules': false
- }
- ]
- ]
- },
- dest: '<%= concat.init.dest %>',
- src: '<%= concat.init.dest %>'
- }
- },
-
- concat: {
- init: {
- options: {
- banner: '+function () {\n',
- footer: '\n}();',
- process: function (src) {
- return src.replace(/^(export|import).*/gm, '')
- }
- },
- dest: 'assets/js/src.js',
- src: 'assets/js/src/**/*.js'
- },
- material: {
- options: {
- banner: '<%= banner %>\n',
- process: function (src) {
- return src.replace('"function"==typeof define&&define.amd?define("picker",["jquery"],a):"object"==typeof exports?module.exports=a(require("jquery")):', '').replace('"function"==typeof define&&define.amd?define(["picker","jquery"],a):"object"==typeof exports?module.exports=a(require("./picker.js"),require("jquery")):', '')
- },
- stripBanners: {
- block: false,
- line: true
- }
- },
- dest: 'js/material.js',
- src: [
- 'assets/js/addons/picker.js',
- 'assets/js/addons/picker.date.js',
- 'assets/js/addons/textarea-autosize.js',
- 'assets/js/addons/waves.js',
- 'assets/js/addons-materialise/picker.js',
- 'assets/js/addons-materialise/textarea-autosize.js',
- 'assets/js/addons-materialise/waves.js',
- '<%= babel.material.dest %>',
- ]
- },
- project: {
- dest: 'js/project.js',
- src: 'assets/js-project/**/*.js'
- }
- },
-
- connect: {
- live: {
- options: {
- base: 'gh-pages/',
- keepalive: true,
- hostname: '0.0.0.0',
- port: '9999'
- }
- },
- once: {
- options: {
- base: 'gh-pages/',
- keepalive: false,
- hostname: '0.0.0.0',
- port: '9999'
- }
- }
- },
-
- copy: {
- doc: {
- files: [
- {
- dest: 'gh-pages/material/', // workaround for our GitHub Pages hosting
- expand: true,
- src: [
- 'bs/**',
- 'css/**',
- 'js/**'
- ]
- }
- ]
- }
- },
-
- cssmin: {
- options: {
- rebaseTo: 'css',
- report: 'gzip',
- sourceMap: true
- },
- material: {
- dest: 'css/material.min.css',
- src: '<%= postcss.material.dest %>'
- },
- project: {
- dest: 'css/project.min.css',
- src: '<%= postcss.project.dest %>'
- }
- },
-
- jekyll: {
- options: {
- bundleExec: true,
- config: '_config.yml',
- incremental: false
- },
- doc: {}
- },
-
- postcss: {
- options: {
- map: {
- annotation: true,
- inline: false,
- sourcesContent: true
- },
- processors: [
- require('autoprefixer')({
- browsers: [
- 'Android >= 4.4',
- 'Chrome >= 45',
- 'Edge >= 12',
- 'Explorer >= 10',
- 'Firefox ESR',
- 'iOS >= 9',
- 'Opera >= 30',
- 'Safari >= 9'
- ]
- })
- ]
- },
- material: {
- dest: 'css/material.css',
- src: '<%= sass.material.dest %>'
- },
- project: {
- dest: 'css/project.css',
- src: '<%= sass.project.dest %>'
- }
- },
-
- prettify: {
- options: {
- indent_inner_html: false
- },
- doc: {
- cwd: 'gh-pages/',
- dest: 'gh-pages/',
- expand: true,
- ext: '.html',
- src: ['**/*.html']
- }
- },
-
- qunit: {
- options: {
- inject: 'assets/js/tests/unit/phantom.js'
- },
- files: 'assets/js/tests/index.html'
- },
-
- sass: {
- options: {
- precision: 6,
- style: 'expanded'
- },
- material: {
- dest: 'css/material.css',
- src: 'assets/sass/material.scss'
- },
- project: {
- dest: 'css/project.css',
- src: 'assets/sass-project/project.scss'
- }
- },
-
- scsslint: {
- options: {
- config: 'assets/sass/.scss-lint.yml'
- },
- material: ['assets/sass/**/*.scss'],
- project: ['assets/sass-project/**/*.scss']
- },
-
- uglify: {
- material: {
- dest: 'js/material.min.js',
- src: '<%= concat.material.dest %>'
- },
- project: {
- dest: 'js/project.min.js',
- src: '<%= concat.project.dest %>'
- }
- },
-
- watch: {
- default: {
- files: [
- 'assets/**/*.js',
- 'assets/**/*.scss'
- ],
- tasks: [
- 'default'
- ]
- },
- material: {
- files: [
- 'assets/js/**/*.js',
- 'assets/sass/**/*.scss'
- ],
- tasks: [
- 'material'
- ]
- },
- project: {
- files: [
- 'assets/js-project/**/*.js',
- 'assets/sass-project/**/*.scss'
- ],
- tasks: [
- 'project'
- ]
- }
- }
- })
-
- // task registration
- grunt.registerTask(
- 'default',
- [
- 'material',
- 'project'
- ]
- )
-
- grunt.registerTask(
- 'doc',
- [
- 'default',
- 'jekyll:doc',
- 'prettify:doc',
- 'connect:live'
- ]
- )
-
- grunt.registerTask(
- 'material',
- [
- 'material-css',
- 'material-js'
- ]
- )
-
- grunt.registerTask(
- 'material-css',
- [
- 'sass:material',
- 'postcss:material',
- 'cssmin:material'
- ]
- )
-
- grunt.registerTask(
- 'material-js',
- [
- 'concat:init',
- 'babel:material',
- 'concat:material',
- 'uglify:material'
- ]
- )
-
- grunt.registerTask(
- 'project',
- [
- 'project-css',
- 'project-js'
- ]
- )
-
- grunt.registerTask(
- 'project-css',
- [
- 'sass:project',
- 'postcss:project',
- 'cssmin:project'
- ]
- )
-
- grunt.registerTask(
- 'project-js',
- [
- 'concat:project',
- 'uglify:project'
- ]
- )
-}
diff --git a/README.md b/README.md
index cfd507ab4..09fc3387c 100644
--- a/README.md
+++ b/README.md
@@ -1,86 +1,99 @@
# Material
-Daemonite's Material UI is a cross-platform and fully responsive front-end interface based on __Google Material Design__. This lightweight framework is built using __Bootstrap 4__. The basic idea behind this project is to combine the visual language of Google Material Design with the front-end technology of the popular Bootstrap framework.
+Daemonite's Material UI is a cross-platform and fully responsive front-end interface based on Google Material Design developed using Bootstrap 4.
+
+The basic idea behind this project is to combine the front-end technology of the popular Bootstrap framework with the visual language of Google Material Design.
> A visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science. This is material design.
> http://www.google.com/design/spec/material-design/introduction.html
-Detailed [documentation site](http://daemonite.github.io/material/) is work in progress. Let us know what you think at the [Daemon Labs](http://labs.daemon.com.au) forum.
+Feel free to check out our [documentation site](http://daemonite.github.io/material/) or let us know what you think at the [Daemon Labs](http://labs.daemon.com.au) forum.
-## Goals
+The primary goal of this project is to give all Bootstrap components and elements a Google Material Design look, so it allows web developers to continue using the exact same Bootstrap HTML markup they are familiar with, but presents them a final outcome that is in line with the principles and specifics of Google Material Design.
-### Primary
+A secondary goal of this project is to add support for some unique Google Material Design components such as floating buttons, pickers, and steppers, to name a few, which cannot be achieved by transforming existing Bootstrap components.
-The primary goal of this project is to give all Bootstrap components and elements a Google Material Design look, so it allows web developers to continue using the exact same Bootstrap HTML markup they are familiar with, but presents them a final outcome that is in line with the principles and specifics of Google Material Design.
+Because these components will require additional markup (some may require additional JavaScript), they will be documented separately in Material's documentation.
+
+## Table of contents
+
+- [Content](#content)
+- [Documentation](#documentation)
+- [Quick start](#quick-start)
+- [Roadmap](#roadmap)
+
+## Content
+
+Within the download you will find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:
+
+```
+daemonite-material/
+├── css/
+│ ├── material.css
+│ ├── material.css.map
+│ ├── material.min.css
+│ └── material.min.css.map
+└── js/
+ ├── material.js
+ ├── material.js.map
+ ├── material.min.js
+ └── material.min.js.map
+```
+
+We provide compiled CSS and JavaScript (`material.*`), as well as compiled and minified CSS and JavaScript (`material.min.*`). CSS and JavaScript source maps (`material.*.map`) are available for use with certain browsers' developer tools.
+
+The Material source code download includes the precompiled CSS and JavaScript, along with documentation and source assets. More specifically, it includes the following and more:
+
+```
+daemonite-material/
+├── assets/
+│ ├── js/
+│ └── scss/
+├── css/
+│ ├── material.css
+│ ├── material.css.map
+│ ├── material.min.css
+│ └── material.min.css.map
+├── docs/
+│ └── 4.0/
+└── js/
+ ├── material.js
+ ├── material.js.map
+ ├── material.min.js
+ └── material.min.js.map
+```
+
+## Documentation
+
+Material's documentation, included in this repo in the root directory, is built with [Jekyll](https://jekyllrb.com/) and publicly hosted on GitHub Pages at . The docs may also be run locally.
+
+### Running documentation locally
+
+1. Run through the [tooling setup](http://daemonite.github.io/material/docs/4.0/getting-started/tooling/#getting-started) to install Jekyll and other Ruby dependencies with `bundle install`.
+2. Run `npm install` to install Node.js dependencies.
+3. Run `npm run dist` and `npm run docs` to rebuild distributed CSS and JavaScript files, as well as docs assets.
+4. From the root `/daemonite-material` directory, run `npm run docs-serve` in the command line.
+5. Open `http://localhost:9999/material` in your browser, and voilà.
+
+## Quick start
+
+Several quick start options are available:
+
+- Clone the repo: `git clone https://github.com/Daemonite/material.git`
+- Download the [latest release](https://github.com/Daemonite/material/releases)
+- Install with [bower](https://bower.io/): `bower install daemonite-material`
+- Install with [npm](https://www.npmjs.com/): `npm install daemonite-material`
+
+## Roadmap
+
+### Near-term
+
+Bug fixes and updates alongside Bootstrap 4's continuous releases.
+
+### Mid-term
+
+Add missing support for some Google Material Design components (e.g. snackbars).
+
+### Long-term
-### Secondary
-
-A secondary goal of this project is to add support for some unique Google Material Design components such as floating buttons and labels, pickers, and steppers, to name a few, which cannot be achieved by transforming existing Bootstrap components.
-
-Because these components will require additional markup (some may require additional JavaScript), they will be documented separately in Material's documentation (work-in-progress).
-
-## Supported Bootstrap 4 Components
-
-Currently based on __Bootstrap v4.0.0-beta__.
-
-| Bootstrap 4 Components | Equivalent Google Material Design Components |
-| --- | --- |
-| Alerts | _None, but supported with our own interpretation_ |
-| Badge | _None, but supported with our own interpretation_ |
-| Breadcrumb | _None, but supported with our own interpretation_ |
-| Buttons | [Buttons](https://material.google.com/components/buttons.html) |
-| Button group | [Toggle buttons](https://material.io/guidelines/components/buttons.html#buttons-toggle-buttons) |
-| Card | [Cards](https://material.google.com/components/cards.html) |
-| Carousel | _None, but supported with our own interpretation_ |
-| Collapse | _None, but supported with our own interpretation_ |
-| Dropdowns | [Menus](https://material.google.com/components/menus.html) |
-| Forms | [Text fields](https://material.google.com/components/text-fields.html) |
-| Input group | [Text fields](https://material.google.com/components/text-fields.html) |
-| Jumbotron | _None, but supported with our own interpretation_ |
-| List group | [Expansion panels](https://material.google.com/components/expansion-panels.html) |
-| Modal | [Dialogs](https://material.google.com/components/dialogs.html) |
-| Navs | _None, but supported with our own interpretation_ |
-| Navbar | [Toolbars](https://material.google.com/components/toolbars.html) |
-| Pagination | _None, but supported with our own interpretation_ |
-| Popovers | _None, but supported with our own interpretation_ |
-| Progress | [Progress & activity](https://material.google.com/components/progress-activity.html) |
-| Scrollspy | _None, but supported with our own interpretation_ |
-| Tooltips | [Tooltips](https://material.google.com/components/tooltips.html) |
-
-### Additional Supported Bootstrap 4 Elements
-* Bootstrap 4's grid system is supported, but breakpoints have been changed according to Google Material Design's [Responsive UI Guidlines](https://material.google.com/layout/responsive-ui.html#responsive-ui-breakpoints).
-* Bootstrap 4's layout components such as `.media` are all supported.
-* Bootstrap 4's typography classes and other content related elements (such as code, figures and images) are all supported.
-* Bootstrap 4's utility classes are all supported.
-
-## Supported Material Components
-
-| Material Components | Equivalent Bootstrap 4 Components | Additional Information |
-| --- | --- | --- |
-| Bottom navigation | _None_ | Todo: currently not supported. |
-| Bottom sheets | _None_ | Todo: currently not supported. |
-| Buttons | [Buttons](https://getbootstrap.com/docs/4.0/components/buttons/) | `.btn` for raised buttons, `.btn-outline` for flat buttons. |
-| Buttons: Floating Action Button | _None_ | Add `.btn-float` on top of a `.btn` for floating action buttons. |
-| Cards | [Cards](https://getbootstrap.com/docs/4.0/components/card/) | Additional `.card-actions` added to style supplemental action area. |
-| Chips | _None_ | `.chip` (Material) works slightly different to `.badge` (Bootstrap) and has more functionalities. |
-| Data tables | [Tables](https://getbootstrap.com/docs/4.0/content/tables/) | _None_ |
-| Dialogs | [Modal](https://getbootstrap.com/docs/4.0/components/modal/) | Additional `.modal-footer-stacked` added to style stacked full-width buttons. |
-| Dividers | _None_ | Generally, use `
` with margin utility classes to create dividers. Some specific components have dividers built in. |
-| Expansion panels | [List group](https://getbootstrap.com/docs/4.0/components/list-group/) | Additional `.expansion-*` classes added to extend default `.list-group-item`. |
-| Grid lists | _None_ | Use Bootstrap 4's grid system with padding utility classes to create grid lists. |
-| Lists | [Media object](https://getbootstrap.com/docs/4.0/layout/media-object/) | Margin, padding, and vertical-alignment utility classes may be required. |
-| Lists: Controls | [Media object](https://getbootstrap.com/docs/4.0/layout/media-object/) | Margin, padding, and vertical-alignment utility classes may be required. |
-| Menus | [Dropdowns](https://getbootstrap.com/docs/4.0/components/dropdowns/) | Both `.dropdown-menu` (Bootstrap) and `.menu` (Material) work the same apart from their opening positions. `.dropdown-menu-sm` and `.menu-cascading` are added for a cascading menu variation defined in Google Material Design. |
-| Navigation drawer | _None_ | A default navigation drawer always opens above all other content with a tranparent black backdrop. Permanent (including its different variations), persistent, and temporary navigation drawers are supported, but the mini variant is currently not supported. |
-| Pickers | _None_ | Only date picker is currently supported. Todo: landscape picker. |
-| Progress & activity | [Progress](https://getbootstrap.com/docs/4.0/components/progress/) | Circular and indeterminate linear progress are added on top of default linear progress. |
-| Selection controls | [Forms](https://getbootstrap.com/docs/4.0/components/forms/#custom-forms) | The slide toggle defined in Google Material Design is supported with `.custom-switch`. |
-| Sliders | _None_ | Todo: currently not supported. |
-| Snackbars & toasts | _None_ | Todo: add snackbars & toasts support back. |
-| Steppers | _None_ | Only non-clickable stepper is currently supported. |
-| Subheaders | _None_ | Use colour and typography utility classes to create subheaders. |
-| Tabs | [Navs](https://getbootstrap.com/docs/4.0/components/navs/#tabs) | `.nav-tabs-scrollable` is added for scrollable tab bars. |
-| Text fields | [Forms](https://getbootstrap.com/docs/4.0/components/forms/) | `.floating-label`, `.textarea-autosize` and `.textfield-box` are added. |
-| Toolbars | [Navbar](https://getbootstrap.com/docs/4.0/components/navbar/) | `.toolbar-waterfall` requires some custom JavaScript to add/remove `.waterfall` class on `scroll` since Bootstrap 4 removes the affix plugin. |
-| Tooltips | [Tooltips](https://getbootstrap.com/docs/4.0/components/tooltips/) | _None_ |
-| Widgets | _None_ | This component is not relevant to web development, so we will not actively look into this. |
+Rewrite all JavaScript plugins in ES6 to take advantage of the newest JavaScript enhancements.
diff --git a/_config.yml b/_config.yml
index 0392ed9e0..7fa1dbead 100644
--- a/_config.yml
+++ b/_config.yml
@@ -7,29 +7,35 @@
# permalinks
permalink: pretty
+# plugins
+ plugins:
+ - jekyll-redirect-from
+ - jekyll-sitemap
+ - jekyll-toc
+
# server
baseurl: "/material" # workaround for our GitHub Pages hosting
destination: "gh-pages/material" # workaround for our GitHub Pages hosting
encoding: "UTF-8"
exclude:
+ - .babelrc.js
+ - .eslintignore
- .git
- .gitignore
- - .sass-cache
+ - .sass-cache/
- assets/
- bower.json
+ - build/
+ - docs-assets/
- Gemfile
- Gemfile.lock
- gh-pages/
- - Gruntfile.js
- lint-vars.sh
- node_modules/
- - npm-shrinkwrap.json
- package.json
+ - package-lock.json
+ - README.md
host: 0.0.0.0
- plugins:
- - jekyll-redirect-from
- - jekyll-sitemap
- - jekyll-toc
port: 9999
source: "."
url: "http://daemonite.github.io/material"
@@ -41,18 +47,22 @@
# vars
cdn:
+ bs_css: "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
+ bs_css_docs: "https://getbootstrap.com/assets/css/docs.min.css"
+ bs_js: "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
+ bs_js_docs: "https://getbootstrap.com/assets/js/docs.min.js"
jquery: "https://code.jquery.com/jquery-3.2.1.slim.min.js"
jquery_hash: "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
md_font: "https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i"
md_icon: "https://fonts.googleapis.com/icon?family=Material+Icons"
- popper: "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"
- popper_hash: "sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh"
- current_version: "4.0.0-beta"
+ popper: "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
+ popper_hash: "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
+ current_version: "4.0.0"
docs_version: "4.0"
download:
- source: "https://github.com/Daemonite/material/archive/v4.0.0-beta.zip"
- dist: "https://github.com/Daemonite/material/releases/download/v4.0.0-beta/material-4.0.0-beta-dist.zip"
+ source: "https://github.com/Daemonite/material/archive/v4.0.0.zip"
+ dist: "https://github.com/Daemonite/material/releases/download/v4.0.0/material-4.0.0-dist.zip"
id:
- navbar: "doc_navbar"
- navdrawer: "doc_navdrawer"
+ navbar: "doc-navbar"
+ navdrawer: "doc-navdrawer"
repo: "https://github.com/Daemonite/material"
diff --git a/_data/colors.yml b/_data/colors.yml
new file mode 100644
index 000000000..96b5cb718
--- /dev/null
+++ b/_data/colors.yml
@@ -0,0 +1,818 @@
+- name: amber
+ levels:
+ - name: 50
+ hex: "#fff8e1"
+ text: "#212121"
+ - name: 100
+ hex: "#ffecb3"
+ text: "#212121"
+ - name: 200
+ hex: "#ffe082"
+ text: "#212121"
+ - name: 300
+ hex: "#ffd54f"
+ text: "#212121"
+ - name: 400
+ hex: "#ffca28"
+ text: "#212121"
+ - name: 500
+ hex: "#ffc107"
+ text: "#212121"
+ - name: 600
+ hex: "#ffb300"
+ text: "#212121"
+ - name: 700
+ hex: "#ffa000"
+ text: "#212121"
+ - name: 800
+ hex: "#ff8f00"
+ text: "#212121"
+ - name: 900
+ hex: "#ff6f00"
+ text: "#212121"
+ - name: a100
+ hex: "#ffe57f"
+ text: "#212121"
+ - name: a200
+ hex: "#ffd740"
+ text: "#212121"
+ - name: a400
+ hex: "#ffc400"
+ text: "#212121"
+ - name: a700
+ hex: "#ffab00"
+ text: "#212121"
+
+- name: blue
+ levels:
+ - name: 50
+ hex: "#e3f2fd"
+ text: "#212121"
+ - name: 100
+ hex: "#bbdefb"
+ text: "#212121"
+ - name: 200
+ hex: "#90caf9"
+ text: "#212121"
+ - name: 300
+ hex: "#64b5f6"
+ text: "#212121"
+ - name: 400
+ hex: "#42a5f5"
+ text: "#212121"
+ - name: 500
+ hex: "#2196f3"
+ text: "#212121"
+ - name: 600
+ hex: "#1e88e5"
+ text: "#ffffff"
+ - name: 700
+ hex: "#1976d2"
+ text: "#ffffff"
+ - name: 800
+ hex: "#1565c0"
+ text: "#ffffff"
+ - name: 900
+ hex: "#0d47a1"
+ text: "#ffffff"
+ - name: a100
+ hex: "#82b1ff"
+ text: "#212121"
+ - name: a200
+ hex: "#448aff"
+ text: "#ffffff"
+ - name: a400
+ hex: "#2979ff"
+ text: "#ffffff"
+ - name: a700
+ hex: "#2962ff"
+ text: "#ffffff"
+
+- name: blue grey
+ levels:
+ - name: 50
+ hex: "#eceff1"
+ text: "#212121"
+ - name: 100
+ hex: "#cfd8dc"
+ text: "#212121"
+ - name: 200
+ hex: "#b0bec5"
+ text: "#212121"
+ - name: 300
+ hex: "#90a4ae"
+ text: "#212121"
+ - name: 400
+ hex: "#78909c"
+ text: "#ffffff"
+ - name: 500
+ hex: "#607d8b"
+ text: "#ffffff"
+ - name: 600
+ hex: "#546e7a"
+ text: "#ffffff"
+ - name: 700
+ hex: "#455a64"
+ text: "#ffffff"
+ - name: 800
+ hex: "#37474f"
+ text: "#ffffff"
+ - name: 900
+ hex: "#263238"
+ text: "#ffffff"
+
+- name: brown
+ levels:
+ - name: 50
+ hex: "#efebe9"
+ text: "#212121"
+ - name: 100
+ hex: "#d7ccc8"
+ text: "#212121"
+ - name: 200
+ hex: "#bcaaa4"
+ text: "#212121"
+ - name: 300
+ hex: "#a1887f"
+ text: "#ffffff"
+ - name: 400
+ hex: "#8d6e63"
+ text: "#ffffff"
+ - name: 500
+ hex: "#795548"
+ text: "#ffffff"
+ - name: 600
+ hex: "#6d4c41"
+ text: "#ffffff"
+ - name: 700
+ hex: "#5d4037"
+ text: "#ffffff"
+ - name: 800
+ hex: "#4e342e"
+ text: "#ffffff"
+ - name: 900
+ hex: "#3e2723"
+ text: "#ffffff"
+
+- name: cyan
+ levels:
+ - name: 50
+ hex: "#e0f7fa"
+ text: "#212121"
+ - name: 100
+ hex: "#b2ebf2"
+ text: "#212121"
+ - name: 200
+ hex: "#80deea"
+ text: "#212121"
+ - name: 300
+ hex: "#4dd0e1"
+ text: "#212121"
+ - name: 400
+ hex: "#26c6da"
+ text: "#212121"
+ - name: 500
+ hex: "#00bcd4"
+ text: "#212121"
+ - name: 600
+ hex: "#00acc1"
+ text: "#212121"
+ - name: 700
+ hex: "#0097a7"
+ text: "#ffffff"
+ - name: 800
+ hex: "#00838f"
+ text: "#ffffff"
+ - name: 900
+ hex: "#006064"
+ text: "#ffffff"
+ - name: a100
+ hex: "#84ffff"
+ text: "#212121"
+ - name: a200
+ hex: "#18ffff"
+ text: "#212121"
+ - name: a400
+ hex: "#00e5ff"
+ text: "#212121"
+ - name: a700
+ hex: "#00b8d4"
+ text: "#212121"
+
+- name: deep orange
+ levels:
+ - name: 50
+ hex: "#fbe9e7"
+ text: "#212121"
+ - name: 100
+ hex: "#ffccbc"
+ text: "#212121"
+ - name: 200
+ hex: "#ffab91"
+ text: "#212121"
+ - name: 300
+ hex: "#ff8a65"
+ text: "#212121"
+ - name: 400
+ hex: "#ff7043"
+ text: "#212121"
+ - name: 500
+ hex: "#ff5722"
+ text: "#212121"
+ - name: 600
+ hex: "#f4511e"
+ text: "#ffffff"
+ - name: 700
+ hex: "#e64a19"
+ text: "#ffffff"
+ - name: 800
+ hex: "#d84315"
+ text: "#ffffff"
+ - name: 900
+ hex: "#bf360c"
+ text: "#ffffff"
+ - name: a100
+ hex: "#ff9e80"
+ text: "#212121"
+ - name: a200
+ hex: "#ff6e40"
+ text: "#212121"
+ - name: a400
+ hex: "#ff3d00"
+ text: "#ffffff"
+ - name: a700
+ hex: "#dd2c00"
+ text: "#ffffff"
+
+- name: deep purple
+ levels:
+ - name: 50
+ hex: "#ede7f6"
+ text: "#212121"
+ - name: 100
+ hex: "#d1c4e9"
+ text: "#212121"
+ - name: 200
+ hex: "#b39ddb"
+ text: "#212121"
+ - name: 300
+ hex: "#9575cd"
+ text: "#ffffff"
+ - name: 400
+ hex: "#7e57c2"
+ text: "#ffffff"
+ - name: 500
+ hex: "#673ab7"
+ text: "#ffffff"
+ - name: 600
+ hex: "#5e35b1"
+ text: "#ffffff"
+ - name: 700
+ hex: "#512da8"
+ text: "#ffffff"
+ - name: 800
+ hex: "#4527a0"
+ text: "#ffffff"
+ - name: 900
+ hex: "#311b92"
+ text: "#ffffff"
+ - name: a100
+ hex: "#b388ff"
+ text: "#212121"
+ - name: a200
+ hex: "#7c4dff"
+ text: "#ffffff"
+ - name: a400
+ hex: "#651fff"
+ text: "#ffffff"
+ - name: a700
+ hex: "#6200ea"
+ text: "#ffffff"
+
+- name: green
+ levels:
+ - name: 50
+ hex: "#e8f5e9"
+ text: "#212121"
+ - name: 100
+ hex: "#c8e6c9"
+ text: "#212121"
+ - name: 200
+ hex: "#a5d6a7"
+ text: "#212121"
+ - name: 300
+ hex: "#81c784"
+ text: "#212121"
+ - name: 400
+ hex: "#66bb6a"
+ text: "#212121"
+ - name: 500
+ hex: "#4caf50"
+ text: "#212121"
+ - name: 600
+ hex: "#43a047"
+ text: "#ffffff"
+ - name: 700
+ hex: "#388e3c"
+ text: "#ffffff"
+ - name: 800
+ hex: "#2e7d32"
+ text: "#ffffff"
+ - name: 900
+ hex: "#1b5e20"
+ text: "#ffffff"
+ - name: a100
+ hex: "#b9f6ca"
+ text: "#212121"
+ - name: a200
+ hex: "#69f0ae"
+ text: "#212121"
+ - name: a400
+ hex: "#00e676"
+ text: "#212121"
+ - name: a700
+ hex: "#00c853"
+ text: "#212121"
+
+- name: grey
+ levels:
+ - name: 50
+ hex: "#fafafa"
+ text: "#212121"
+ - name: 100
+ hex: "#f5f5f5"
+ text: "#212121"
+ - name: 200
+ hex: "#eeeeee"
+ text: "#212121"
+ - name: 300
+ hex: "#e0e0e0"
+ text: "#212121"
+ - name: 400
+ hex: "#bdbdbd"
+ text: "#212121"
+ - name: 500
+ hex: "#9e9e9e"
+ text: "#212121"
+ - name: 600
+ hex: "#757575"
+ text: "#ffffff"
+ - name: 700
+ hex: "#616161"
+ text: "#ffffff"
+ - name: 800
+ hex: "#424242"
+ text: "#ffffff"
+ - name: 900
+ hex: "#212121"
+ text: "#ffffff"
+
+- name: indigo
+ levels:
+ - name: 50
+ hex: "#e8eaf6"
+ text: "#212121"
+ - name: 100
+ hex: "#c5cae9"
+ text: "#212121"
+ - name: 200
+ hex: "#9fa8da"
+ text: "#212121"
+ - name: 300
+ hex: "#7986cb"
+ text: "#ffffff"
+ - name: 400
+ hex: "#5c6bc0"
+ text: "#ffffff"
+ - name: 500
+ hex: "#3f51b5"
+ text: "#ffffff"
+ - name: 600
+ hex: "#3949ab"
+ text: "#ffffff"
+ - name: 700
+ hex: "#303f9f"
+ text: "#ffffff"
+ - name: 800
+ hex: "#283593"
+ text: "#ffffff"
+ - name: 900
+ hex: "#1a237e"
+ text: "#ffffff"
+ - name: a100
+ hex: "#8c9eff"
+ text: "#212121"
+ - name: a200
+ hex: "#536dfe"
+ text: "#ffffff"
+ - name: a400
+ hex: "#3d5afe"
+ text: "#ffffff"
+ - name: a700
+ hex: "#304ffe"
+ text: "#ffffff"
+
+- name: light blue
+ levels:
+ - name: 50
+ hex: "#e1f5fe"
+ text: "#212121"
+ - name: 100
+ hex: "#b3e5fc"
+ text: "#212121"
+ - name: 200
+ hex: "#81d4fa"
+ text: "#212121"
+ - name: 300
+ hex: "#4fc3f7"
+ text: "#212121"
+ - name: 400
+ hex: "#29b6f6"
+ text: "#212121"
+ - name: 500
+ hex: "#03a9f4"
+ text: "#212121"
+ - name: 600
+ hex: "#039be5"
+ text: "#212121"
+ - name: 700
+ hex: "#0288d1"
+ text: "#ffffff"
+ - name: 800
+ hex: "#0277bd"
+ text: "#ffffff"
+ - name: 900
+ hex: "#01579b"
+ text: "#ffffff"
+ - name: a100
+ hex: "#80d8ff"
+ text: "#212121"
+ - name: a200
+ hex: "#40c4ff"
+ text: "#212121"
+ - name: a400
+ hex: "#00b0ff"
+ text: "#212121"
+ - name: a700
+ hex: "#0091ea"
+ text: "#ffffff"
+
+- name: light green
+ levels:
+ - name: 50
+ hex: "#f1f8e9"
+ text: "#212121"
+ - name: 100
+ hex: "#dcedc8"
+ text: "#212121"
+ - name: 200
+ hex: "#c5e1a5"
+ text: "#212121"
+ - name: 300
+ hex: "#aed581"
+ text: "#212121"
+ - name: 400
+ hex: "#9ccc65"
+ text: "#212121"
+ - name: 500
+ hex: "#8bc34a"
+ text: "#212121"
+ - name: 600
+ hex: "#7cb342"
+ text: "#212121"
+ - name: 700
+ hex: "#689f38"
+ text: "#212121"
+ - name: 800
+ hex: "#558b2f"
+ text: "#212121"
+ - name: 900
+ hex: "#33691e"
+ text: "#ffffff"
+ - name: a100
+ hex: "#ccff90"
+ text: "#212121"
+ - name: a200
+ hex: "#b2ff59"
+ text: "#212121"
+ - name: a400
+ hex: "#76ff03"
+ text: "#212121"
+ - name: a700
+ hex: "#64dd17"
+ text: "#212121"
+
+- name: lime
+ levels:
+ - name: 50
+ hex: "#f9fbe7"
+ text: "#212121"
+ - name: 100
+ hex: "#f0f4c3"
+ text: "#212121"
+ - name: 200
+ hex: "#e6ee9c"
+ text: "#212121"
+ - name: 300
+ hex: "#dce775"
+ text: "#212121"
+ - name: 400
+ hex: "#d4e157"
+ text: "#212121"
+ - name: 500
+ hex: "#cddc39"
+ text: "#212121"
+ - name: 600
+ hex: "#c0ca33"
+ text: "#212121"
+ - name: 700
+ hex: "#afb42b"
+ text: "#212121"
+ - name: 800
+ hex: "#9e9d24"
+ text: "#212121"
+ - name: 900
+ hex: "#827717"
+ text: "#ffffff"
+ - name: a100
+ hex: "#f4ff81"
+ text: "#212121"
+ - name: a200
+ hex: "#eeff41"
+ text: "#212121"
+ - name: a400
+ hex: "#c6ff00"
+ text: "#212121"
+ - name: a700
+ hex: "#aeea00"
+ text: "#212121"
+
+- name: orange
+ levels:
+ - name: 50
+ hex: "#fff3e0"
+ text: "#212121"
+ - name: 100
+ hex: "#ffe0b2"
+ text: "#212121"
+ - name: 200
+ hex: "#ffcc80"
+ text: "#212121"
+ - name: 300
+ hex: "#ffb74d"
+ text: "#212121"
+ - name: 400
+ hex: "#ffa726"
+ text: "#212121"
+ - name: 500
+ hex: "#ff9800"
+ text: "#212121"
+ - name: 600
+ hex: "#fb8c00"
+ text: "#212121"
+ - name: 700
+ hex: "#f57c00"
+ text: "#212121"
+ - name: 800
+ hex: "#ef6c00"
+ text: "#212121"
+ - name: 900
+ hex: "#e65100"
+ text: "#ffffff"
+ - name: a100
+ hex: "#ffd180"
+ text: "#212121"
+ - name: a200
+ hex: "#ffab40"
+ text: "#212121"
+ - name: a400
+ hex: "#ff9100"
+ text: "#212121"
+ - name: a700
+ hex: "#ff6d00"
+ text: "#212121"
+
+- name: pink
+ levels:
+ - name: 50
+ hex: "#fce4ec"
+ text: "#212121"
+ - name: 100
+ hex: "#f8bbd0"
+ text: "#212121"
+ - name: 200
+ hex: "#f48fb1"
+ text: "#212121"
+ - name: 300
+ hex: "#f06292"
+ text: "#212121"
+ - name: 400
+ hex: "#ec407a"
+ text: "#ffffff"
+ - name: 500
+ hex: "#e91e63"
+ text: "#ffffff"
+ - name: 600
+ hex: "#d81b60"
+ text: "#ffffff"
+ - name: 700
+ hex: "#c2185b"
+ text: "#ffffff"
+ - name: 800
+ hex: "#ad1457"
+ text: "#ffffff"
+ - name: 900
+ hex: "#880e4f"
+ text: "#ffffff"
+ - name: a100
+ hex: "#ff80ab"
+ text: "#212121"
+ - name: a200
+ hex: "#ff4081"
+ text: "#ffffff"
+ - name: a400
+ hex: "#f50057"
+ text: "#ffffff"
+ - name: a700
+ hex: "#c51162"
+ text: "#ffffff"
+
+- name: purple
+ levels:
+ - name: 50
+ hex: "#f3e5f5"
+ text: "#212121"
+ - name: 100
+ hex: "#e1bee7"
+ text: "#212121"
+ - name: 200
+ hex: "#ce93d8"
+ text: "#212121"
+ - name: 300
+ hex: "#ba68c8"
+ text: "#ffffff"
+ - name: 400
+ hex: "#ab47bc"
+ text: "#ffffff"
+ - name: 500
+ hex: "#9c27b0"
+ text: "#ffffff"
+ - name: 600
+ hex: "#8e24aa"
+ text: "#ffffff"
+ - name: 700
+ hex: "#7b1fa2"
+ text: "#ffffff"
+ - name: 800
+ hex: "#6a1b9a"
+ text: "#ffffff"
+ - name: 900
+ hex: "#4a148c"
+ text: "#ffffff"
+ - name: a100
+ hex: "#ea80fc"
+ text: "#212121"
+ - name: a200
+ hex: "#e040fb"
+ text: "#ffffff"
+ - name: a400
+ hex: "#d500f9"
+ text: "#ffffff"
+ - name: a700
+ hex: "#aa00ff"
+ text: "#ffffff"
+
+- name: red
+ levels:
+ - name: 50
+ hex: "#ffebee"
+ text: "#212121"
+ - name: 100
+ hex: "#ffcdd2"
+ text: "#212121"
+ - name: 200
+ hex: "#ef9a9a"
+ text: "#212121"
+ - name: 300
+ hex: "#e57373"
+ text: "#212121"
+ - name: 400
+ hex: "#ef5350"
+ text: "#ffffff"
+ - name: 500
+ hex: "#f44336"
+ text: "#ffffff"
+ - name: 600
+ hex: "#e53935"
+ text: "#ffffff"
+ - name: 700
+ hex: "#d32f2f"
+ text: "#ffffff"
+ - name: 800
+ hex: "#c62828"
+ text: "#ffffff"
+ - name: 900
+ hex: "#b71c1c"
+ text: "#ffffff"
+ - name: a100
+ hex: "#ff8a80"
+ text: "#212121"
+ - name: a200
+ hex: "#ff5252"
+ text: "#ffffff"
+ - name: a400
+ hex: "#ff1744"
+ text: "#ffffff"
+ - name: a700
+ hex: "#d50000"
+ text: "#ffffff"
+
+- name: teal
+ levels:
+ - name: 50
+ hex: "#e0f2f1"
+ text: "#212121"
+ - name: 100
+ hex: "#b2dfdb"
+ text: "#212121"
+ - name: 200
+ hex: "#80cbc4"
+ text: "#212121"
+ - name: 300
+ hex: "#4db6ac"
+ text: "#212121"
+ - name: 400
+ hex: "#26a69a"
+ text: "#212121"
+ - name: 500
+ hex: "#009688"
+ text: "#ffffff"
+ - name: 600
+ hex: "#00897b"
+ text: "#ffffff"
+ - name: 700
+ hex: "#00796b"
+ text: "#ffffff"
+ - name: 800
+ hex: "#00695c"
+ text: "#ffffff"
+ - name: 900
+ hex: "#004d40"
+ text: "#ffffff"
+ - name: a100
+ hex: "#a7ffeb"
+ text: "#212121"
+ - name: a200
+ hex: "#64ffda"
+ text: "#212121"
+ - name: a400
+ hex: "#1de9b6"
+ text: "#212121"
+ - name: a700
+ hex: "#00bfa5"
+ text: "#212121"
+
+- name: yellow
+ levels:
+ - name: 50
+ hex: "#fffde7"
+ text: "#212121"
+ - name: 100
+ hex: "#fff9c4"
+ text: "#212121"
+ - name: 200
+ hex: "#fff59d"
+ text: "#212121"
+ - name: 300
+ hex: "#fff176"
+ text: "#212121"
+ - name: 400
+ hex: "#ffee58"
+ text: "#212121"
+ - name: 500
+ hex: "#ffeb3b"
+ text: "#212121"
+ - name: 600
+ hex: "#fdd835"
+ text: "#212121"
+ - name: 700
+ hex: "#fbc02d"
+ text: "#212121"
+ - name: 800
+ hex: "#f9a825"
+ text: "#212121"
+ - name: 900
+ hex: "#f57f17"
+ text: "#212121"
+ - name: a100
+ hex: "#ffff8d"
+ text: "#212121"
+ - name: a200
+ hex: "#ffff00"
+ text: "#212121"
+ - name: a400
+ hex: "#ffea00"
+ text: "#212121"
+ - name: a700
+ hex: "#ffd600"
+ text: "#212121"
diff --git a/_data/nav.yml b/_data/nav.yml
index e1e5bb573..d4cfc71b5 100644
--- a/_data/nav.yml
+++ b/_data/nav.yml
@@ -1,6 +1,8 @@
- title: Getting started
pages:
- title: Introduction
+ - title: Theming
+ - title: Tooling
- title: Components
pages:
@@ -67,7 +69,9 @@
- title: Data tables
- title: Dialogs
- title: Expansion panels
+ - title: Icons
- title: Menu
+ - title: Navigation drawer
- title: Pickers
- title: Progress
- title: Selection controls
@@ -76,4 +80,4 @@
- title: Text fields
- title: Toolbars
- title: Tooltips
- - title: Waves
+ - title: Typography
diff --git a/_data/theme-colors.yml b/_data/theme-colors.yml
index d0fdbca3f..afb130b38 100644
--- a/_data/theme-colors.yml
+++ b/_data/theme-colors.yml
@@ -1,16 +1,80 @@
- name: primary
- hex: "#673ab7"
+ hex: "#9c27b0"
+ text: "#ffffff"
+ levels:
+ - name: dark
+ hex: "#7b1fa2"
+ text: "#ffffff"
+ - name: light
+ hex: "#e1bee7"
+ text: "#212121"
- name: secondary
hex: "#ff4081"
-- name: success
- hex: "#4caf50"
+ text: "#ffffff"
+ levels:
+ - name: dark
+ hex: "#f50057"
+ text: "#ffffff"
+ - name: light
+ hex: "#ff80ab"
+ text: "#212121"
- name: danger
hex: "#f44336"
-- name: warning
- hex: "#ff9800"
+ text: "#ffffff"
+ levels:
+ - name: dark
+ hex: "#d32f2f"
+ text: "#ffffff"
+ - name: light
+ hex: "#ffcdd2"
+ text: "#212121"
- name: info
hex: "#2196f3"
+ text: "#212121"
+ levels:
+ - name: dark
+ hex: "#1976d2"
+ text: "#ffffff"
+ - name: light
+ hex: "#bbdefb"
+ text: "#212121"
+- name: success
+ hex: "#4caf50"
+ text: "#212121"
+ levels:
+ - name: dark
+ hex: "#388e3c"
+ text: "#ffffff"
+ - name: light
+ hex: "#c8e6c9"
+ text: "#212121"
+- name: warning
+ hex: "#ff9800"
+ text: "#212121"
+ levels:
+ - name: dark
+ hex: "#f57c00"
+ text: "#212121"
+ - name: light
+ hex: "#ffe0b2"
+ text: "#212121"
+- name: dark
+ hex: "#424242"
+ text: "#ffffff"
+ levels:
+ - name: dark
+ hex: "#212121"
+ text: "#ffffff"
+ - name: light
+ hex: "#757575"
+ text: "#ffffff"
- name: light
hex: "#f5f5f5"
-- name: dark
- hex: "#212121"
+ text: "#212121"
+ levels:
+ - name: dark
+ hex: "#e0e0e0"
+ text: "#212121"
+ - name: light
+ hex: "#fafafa"
+ text: "#212121"
diff --git a/_includes/callout-info-mediaqueries-breakpoints.md b/_includes/callout-info-mediaqueries-breakpoints.md
new file mode 100644
index 000000000..ddf2b3745
--- /dev/null
+++ b/_includes/callout-info-mediaqueries-breakpoints.md
@@ -0,0 +1,3 @@
+{% callout info %}
+Note that since browsers do not currently support [range context queries](https://www.w3.org/TR/mediaqueries-4/#range-context), we work around the limitations of [`min-` and `max-` prefixes](https://www.w3.org/TR/mediaqueries-4/#mq-min-max) and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision for these comparisons.
+{% endcallout %}
\ No newline at end of file
diff --git a/_includes/footer.html b/_includes/footer.html
index 9feb64f62..6b1286855 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -1,12 +1,11 @@
-
-
+
-
-
+
+
diff --git a/_includes/header.html b/_includes/header.html
index d6e4a3f73..ca593e514 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -11,8 +11,8 @@
-
-
+
+
diff --git a/_includes/nav-navdrawer.html b/_includes/nav-navdrawer.html
index bb9b9e1e7..ba13959c3 100644
--- a/_includes/nav-navdrawer.html
+++ b/_includes/nav-navdrawer.html
@@ -1,4 +1,4 @@
-