feat(theme): Better Contrast Colors by Default and dev-utils refactor (#955)

* chore(docs): updated demo sandboxes to include filetype icons

* feat(theme): choose best contrast ratio color by default

This adds a new `function` that is used for default variables within
react-md that tried to guess if the text color should be white or black.
Going forward, this one will use the color that has the biggest contrast
ratio instead of always choosing white if it met the minimum ratio.

* chore: removed unneeded scripts from package.jsons

* temp move

* chore(docs): updated sandboxes

* chore(dev-utils): strict tsconfig

* chore(dev-utils): refactored the dev-utils code and removed unneeded scripts

* chore(tsconfig): simplified tsconfig since strict was enabled

* chore(dev-utils): copied over indexer stuff

* chore(dev-utils): removed the old_src

* chore(dev-utils): cleanup and lint fixes

* chore(sandbox): fixed html comment

Author: mlaursen

package.json

@@ -7,7 +7,7 @@
   "scripts": {
     "release": "dev-utils release",
     "dev-utils": "dev-utils",
-    "sandbox": "yarn workspace documentation sandbox",
+    "sandbox": "dev-utils sandbox",
     "start": "yarn workspace documentation start-dev",
     "dev": "npm-run-all -p watch start",
     "setup": "npm-run-all build-dev-utils force-install build",

packages/alert/package.json

@@ -2,10 +2,6 @@
   "name": "@react-md/alert",
   "version": "2.3.1",
   "description": "Create accessible alerts through snackbars and banners.",
-  "scripts": {
-    "build": "dev-utils build",
-    "clean": "dev-utils clean"
-  },
   "main": "./lib/index.js",
   "module": "./es/index.js",
   "types": "./types/index.d.ts",

packages/app-bar/package.json

@@ -2,10 +2,6 @@
   "name": "@react-md/app-bar",
   "version": "2.3.1",
   "description": "This small package implments the AppBar spec in material design.",
-  "scripts": {
-    "build": "dev-utils build",
-    "clean": "dev-utils clean"
-  },
   "main": "./lib/index.js",
   "module": "./es/index.js",
   "types": "./types/index.d.ts",

packages/autocomplete/package.json

@@ -2,10 +2,6 @@
   "name": "@react-md/autocomplete",
   "version": "2.3.1",
   "description": "",
-  "scripts": {
-    "build": "dev-utils build",
-    "clean": "dev-utils clean"
-  },
   "main": "./lib/index.js",
   "module": "./es/index.js",
   "types": "./types/index.d.ts",

packages/avatar/package.json

@@ -2,10 +2,6 @@
   "name": "@react-md/avatar",
   "version": "2.3.1",
   "description": "This package is used to avatars which are used to symbolize people or objects.",
-  "scripts": {
-    "build": "dev-utils build",
-    "clean": "dev-utils clean"
-  },
   "main": "./lib/index.js",
   "module": "./es/index.js",
   "types": "./types/index.d.ts",

packages/badge/package.json

@@ -2,10 +2,6 @@
   "name": "@react-md/badge",
   "version": "2.3.1",
   "description": "Create a badge that is fixed to another element. This is generally used for notification counts.",
-  "scripts": {
-    "build": "dev-utils build",
-    "clean": "dev-utils clean"
-  },
   "main": "./lib/index.js",
   "module": "./es/index.js",
   "types": "./types/index.d.ts",

packages/button/package.json

@@ -2,10 +2,6 @@
   "name": "@react-md/button",
   "version": "2.3.1",
   "description": "This package is used to create buttons with the material design spec. There is built-in support to be able to render accessible clickable divs that look like buttons, or even apply button styles to any element.",
-  "scripts": {
-    "build": "dev-utils build",
-    "clean": "dev-utils clean"
-  },
   "main": "./lib/index.js",
   "module": "./es/index.js",
   "types": "./types/index.d.ts",

packages/card/package.json

@@ -2,10 +2,6 @@
   "name": "@react-md/card",
   "version": "2.3.1",
   "description": "Create interactable cards from the material design specifications.",
-  "scripts": {
-    "build": "dev-utils build",
-    "clean": "dev-utils clean"
-  },
   "main": "./lib/index.js",
   "module": "./es/index.js",
   "types": "./types/index.d.ts",

packages/chip/package.json

@@ -2,10 +2,6 @@
   "name": "@react-md/chip",
   "version": "2.3.1",
   "description": "",
-  "scripts": {
-    "build": "dev-utils build",
-    "clean": "dev-utils clean"
-  },
   "main": "./lib/index.js",
   "module": "./es/index.js",
   "types": "./types/index.d.ts",

packages/dev-utils/README.md

@@ -6,3 +6,28 @@ re-installing dev dependencies in each project and all the tsconfig files. All
 of it will be handled automatically behind the scenes.
 
 For more info, run `yarn dev-utils --help`.
+
+```sh
+Usage: dev-utils [options] [command]
+
+Options:
+  -h, --help             display help for command
+
+Commands:
+  clean [options]        Cleans all the distributables for all publishable packages.
+  styles [options]       Copies all the SCSS files into the dist folder as well as creating non-webpack specific versions.
+  sassdoc [options]      Creates the sassdoc for the documentation site in all scoped packages.
+  variables [options]    Creates the `src/scssVariables` file in all scoped packages.
+  changelogs [options]   Updates the changelogs to be a bit prettier.
+  configs [options]      Re-generates all the `tsconfig.*` files for the Typescript project references.
+  copy-shared [options]  Copies all the shared markdown files and utils throughout the repo into the documentation folder.
+  doc-index [options]    Indexes (terribly) metadata throughout react-md for the documentation site.
+  release [options]      Goes through the steps of releasing a new version of react-md.
+  sandbox [options]      Creates the `*-Sandbox.json` files in the documentation site.
+  libsize [options]      Prints the gzpped size for the entire library based on the UMD bundles and the pre-compiled themes.
+  themes [options]       Creates all the pre-compiled css themes in the root `/themes` folder. This really shouldn't be run other than during the release script since`the
+                         `/themes` folder is ignored by git until a release is tagged.
+  umd [options]          Compiles the UMD bundles for `react-md`. This really shouldn't be used as it's handled by the `release` script automatically.
+  watch [options]        A custom watch script that handles copying all changed scss files as well as starting tsc watchers.
+  help [command]         display help for command
+```