From 2a853cd770f38523d8439609160f7329cd4def89 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Sat, 18 Jan 2020 01:03:01 -0500
Subject: [PATCH] Rework sass vars to custom properties (wip)

---
 README.md                                     |   4 +-
 package-lock.json                             |   3 +-
 package.json                                  |   2 +-
 src/assets/themes/default.theme.css           | 233 ++++++
 src/components.d.ts                           | 713 ------------------
 src/components/button/button.mixins.scss      |  90 +--
 src/components/button/button.scss             | 433 +++++------
 .../dropdown-divider/dropdown-divider.scss    |   8 +-
 .../dropdown-item/dropdown-item.scss          |  20 +-
 src/components/dropdown/dropdown.scss         |  28 +-
 src/components/spinner/spinner.scss           |  21 +-
 src/index.html                                |  14 +-
 src/styles/functions.scss                     |   9 -
 src/styles/mixins.scss                        |   6 -
 src/styles/reset.scss                         |   6 +-
 src/styles/variables.scss                     | 288 -------
 .../checkbox/checkbox.scss                    |   0
 .../components => todo}/checkbox/checkbox.tsx |   0
 {src/components => todo}/input/input.scss     |   0
 {src/components => todo}/input/input.tsx      |   0
 {src/components => todo}/radio/radio.scss     |   0
 {src/components => todo}/radio/radio.tsx      |   0
 {src/components => todo}/range/range.scss     |   0
 {src/components => todo}/range/range.tsx      |   0
 {src/components => todo}/switch/switch.scss   |   0
 {src/components => todo}/switch/switch.tsx    |   0
 .../textarea/textarea.scss                    |   0
 .../components => todo}/textarea/textarea.tsx |   0
 {src/components => todo}/tooltip/tooltip.scss |   0
 {src/components => todo}/tooltip/tooltip.tsx  |   0
 30 files changed, 489 insertions(+), 1389 deletions(-)
 create mode 100644 src/assets/themes/default.theme.css
 delete mode 100644 src/styles/functions.scss
 delete mode 100644 src/styles/mixins.scss
 delete mode 100644 src/styles/variables.scss
 rename {src/components => todo}/checkbox/checkbox.scss (100%)
 rename {src/components => todo}/checkbox/checkbox.tsx (100%)
 rename {src/components => todo}/input/input.scss (100%)
 rename {src/components => todo}/input/input.tsx (100%)
 rename {src/components => todo}/radio/radio.scss (100%)
 rename {src/components => todo}/radio/radio.tsx (100%)
 rename {src/components => todo}/range/range.scss (100%)
 rename {src/components => todo}/range/range.tsx (100%)
 rename {src/components => todo}/switch/switch.scss (100%)
 rename {src/components => todo}/switch/switch.tsx (100%)
 rename {src/components => todo}/textarea/textarea.scss (100%)
 rename {src/components => todo}/textarea/textarea.tsx (100%)
 rename {src/components => todo}/tooltip/tooltip.scss (100%)
 rename {src/components => todo}/tooltip/tooltip.tsx (100%)

diff --git a/README.md b/README.md
index 15aa44647..983e7e74e 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
-# Shoelace 2
+# Shoelace
 
-A framework agnostic library of Web Components for desktop and mobile.
+A forward-thinking component library built with Web Components.
 
 Designed and developed in New Hampshire by [Cory LaViska](https://twitter.com/claviska).
 
diff --git a/package-lock.json b/package-lock.json
index c2e821af2..403e0c763 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -92,8 +92,7 @@
     "@stencil/sass": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-1.1.1.tgz",
-      "integrity": "sha512-Nny3JiFkpQa0RdXWCa4pzhKQYnHuDNzC9c4w35FcaZHXBVuZ1UHSHc7wI7By9SS1auYcySqpPOBVzgoCqXcYVQ==",
-      "dev": true
+      "integrity": "sha512-Nny3JiFkpQa0RdXWCa4pzhKQYnHuDNzC9c4w35FcaZHXBVuZ1UHSHc7wI7By9SS1auYcySqpPOBVzgoCqXcYVQ=="
     },
     "@types/node": {
       "version": "10.17.13",
diff --git a/package.json b/package.json
index b5f1670eb..31e0f3f8c 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,6 @@
   },
   "devDependencies": {
     "@stencil/core": "^1.8.3",
-    "@stencil/sass": "^1.1.1",
     "tslint": "^5.20.1",
     "tslint-ionic-rules": "0.0.21",
     "tslint-stencil": "^1.0.1",
@@ -31,6 +30,7 @@
   },
   "license": "MIT",
   "dependencies": {
+    "@stencil/sass": "^1.1.1",
     "popper.js": "^1.16.0",
     "tippy.js": "^5.1.3"
   }
diff --git a/src/assets/themes/default.theme.css b/src/assets/themes/default.theme.css
new file mode 100644
index 000000000..333c1b795
--- /dev/null
+++ b/src/assets/themes/default.theme.css
@@ -0,0 +1,233 @@
+:root {
+  /*********************************************************************************************************************
+  *
+  *  👟 Shoelace: A forward-thinking component library built with Web Components.
+  *
+  *  Designed and developed in New Hampshire by [Cory LaViska](https://twitter.com/claviska).
+  *
+  *  Learn more at https://shoelace.style/
+  *
+  *********************************************************************************************************************/
+
+  /*********************************************************************************************************************
+  * Colors
+  *********************************************************************************************************************/
+
+  --color-primary-hue: 203;
+  --color-primary-saturation: 100%;
+  --color-primary-05: hsl(var(--color-primary-hue), var(--color-primary-saturation), 5%);
+  --color-primary-10: hsl(var(--color-primary-hue), var(--color-primary-saturation), 10%);
+  --color-primary-15: hsl(var(--color-primary-hue), var(--color-primary-saturation), 15%);
+  --color-primary-20: hsl(var(--color-primary-hue), var(--color-primary-saturation), 20%);
+  --color-primary-25: hsl(var(--color-primary-hue), var(--color-primary-saturation), 25%);
+  --color-primary-30: hsl(var(--color-primary-hue), var(--color-primary-saturation), 30%);
+  --color-primary-35: hsl(var(--color-primary-hue), var(--color-primary-saturation), 35%);
+  --color-primary-40: hsl(var(--color-primary-hue), var(--color-primary-saturation), 40%);
+  --color-primary-45: hsl(var(--color-primary-hue), var(--color-primary-saturation), 45%);
+  --color-primary-50: hsl(var(--color-primary-hue), var(--color-primary-saturation), 50%);
+  --color-primary-55: hsl(var(--color-primary-hue), var(--color-primary-saturation), 55%);
+  --color-primary-60: hsl(var(--color-primary-hue), var(--color-primary-saturation), 60%);
+  --color-primary-65: hsl(var(--color-primary-hue), var(--color-primary-saturation), 65%);
+  --color-primary-70: hsl(var(--color-primary-hue), var(--color-primary-saturation), 70%);
+  --color-primary-75: hsl(var(--color-primary-hue), var(--color-primary-saturation), 75%);
+  --color-primary-80: hsl(var(--color-primary-hue), var(--color-primary-saturation), 80%);
+  --color-primary-85: hsl(var(--color-primary-hue), var(--color-primary-saturation), 85%);
+  --color-primary-90: hsl(var(--color-primary-hue), var(--color-primary-saturation), 90%);
+  --color-primary-95: hsl(var(--color-primary-hue), var(--color-primary-saturation), 95%);
+
+  --color-success-hue: 100;
+  --color-success-saturation: 60%;
+  --color-success-05: hsl(var(--color-success-hue), var(--color-success-saturation), 5%);
+  --color-success-10: hsl(var(--color-success-hue), var(--color-success-saturation), 10%);
+  --color-success-15: hsl(var(--color-success-hue), var(--color-success-saturation), 15%);
+  --color-success-20: hsl(var(--color-success-hue), var(--color-success-saturation), 20%);
+  --color-success-25: hsl(var(--color-success-hue), var(--color-success-saturation), 25%);
+  --color-success-30: hsl(var(--color-success-hue), var(--color-success-saturation), 30%);
+  --color-success-35: hsl(var(--color-success-hue), var(--color-success-saturation), 35%);
+  --color-success-40: hsl(var(--color-success-hue), var(--color-success-saturation), 40%);
+  --color-success-45: hsl(var(--color-success-hue), var(--color-success-saturation), 45%);
+  --color-success-50: hsl(var(--color-success-hue), var(--color-success-saturation), 50%);
+  --color-success-55: hsl(var(--color-success-hue), var(--color-success-saturation), 55%);
+  --color-success-60: hsl(var(--color-success-hue), var(--color-success-saturation), 60%);
+  --color-success-65: hsl(var(--color-success-hue), var(--color-success-saturation), 65%);
+  --color-success-70: hsl(var(--color-success-hue), var(--color-success-saturation), 70%);
+  --color-success-75: hsl(var(--color-success-hue), var(--color-success-saturation), 75%);
+  --color-success-80: hsl(var(--color-success-hue), var(--color-success-saturation), 80%);
+  --color-success-85: hsl(var(--color-success-hue), var(--color-success-saturation), 85%);
+  --color-success-90: hsl(var(--color-success-hue), var(--color-success-saturation), 90%);
+  --color-success-95: hsl(var(--color-success-hue), var(--color-success-saturation), 95%);
+
+  --color-info-hue: 220;
+  --color-info-saturation: 10%;
+  --color-info-05: hsl(var(--color-info-hue), var(--color-info-saturation), 5%);
+  --color-info-10: hsl(var(--color-info-hue), var(--color-info-saturation), 10%);
+  --color-info-15: hsl(var(--color-info-hue), var(--color-info-saturation), 15%);
+  --color-info-20: hsl(var(--color-info-hue), var(--color-info-saturation), 20%);
+  --color-info-25: hsl(var(--color-info-hue), var(--color-info-saturation), 25%);
+  --color-info-30: hsl(var(--color-info-hue), var(--color-info-saturation), 30%);
+  --color-info-35: hsl(var(--color-info-hue), var(--color-info-saturation), 35%);
+  --color-info-40: hsl(var(--color-info-hue), var(--color-info-saturation), 40%);
+  --color-info-45: hsl(var(--color-info-hue), var(--color-info-saturation), 45%);
+  --color-info-50: hsl(var(--color-info-hue), var(--color-info-saturation), 50%);
+  --color-info-55: hsl(var(--color-info-hue), var(--color-info-saturation), 55%);
+  --color-info-60: hsl(var(--color-info-hue), var(--color-info-saturation), 60%);
+  --color-info-65: hsl(var(--color-info-hue), var(--color-info-saturation), 65%);
+  --color-info-70: hsl(var(--color-info-hue), var(--color-info-saturation), 70%);
+  --color-info-75: hsl(var(--color-info-hue), var(--color-info-saturation), 75%);
+  --color-info-80: hsl(var(--color-info-hue), var(--color-info-saturation), 80%);
+  --color-info-85: hsl(var(--color-info-hue), var(--color-info-saturation), 85%);
+  --color-info-90: hsl(var(--color-info-hue), var(--color-info-saturation), 90%);
+  --color-info-95: hsl(var(--color-info-hue), var(--color-info-saturation), 95%);
+
+  --color-warning-hue: 36;
+  --color-warning-saturation: 90%;
+  --color-warning-05: hsl(var(--color-warning-hue), var(--color-warning-saturation), 5%);
+  --color-warning-10: hsl(var(--color-warning-hue), var(--color-warning-saturation), 10%);
+  --color-warning-15: hsl(var(--color-warning-hue), var(--color-warning-saturation), 15%);
+  --color-warning-20: hsl(var(--color-warning-hue), var(--color-warning-saturation), 20%);
+  --color-warning-25: hsl(var(--color-warning-hue), var(--color-warning-saturation), 25%);
+  --color-warning-30: hsl(var(--color-warning-hue), var(--color-warning-saturation), 30%);
+  --color-warning-35: hsl(var(--color-warning-hue), var(--color-warning-saturation), 35%);
+  --color-warning-40: hsl(var(--color-warning-hue), var(--color-warning-saturation), 40%);
+  --color-warning-45: hsl(var(--color-warning-hue), var(--color-warning-saturation), 45%);
+  --color-warning-50: hsl(var(--color-warning-hue), var(--color-warning-saturation), 50%);
+  --color-warning-55: hsl(var(--color-warning-hue), var(--color-warning-saturation), 55%);
+  --color-warning-60: hsl(var(--color-warning-hue), var(--color-warning-saturation), 60%);
+  --color-warning-65: hsl(var(--color-warning-hue), var(--color-warning-saturation), 65%);
+  --color-warning-70: hsl(var(--color-warning-hue), var(--color-warning-saturation), 70%);
+  --color-warning-75: hsl(var(--color-warning-hue), var(--color-warning-saturation), 75%);
+  --color-warning-80: hsl(var(--color-warning-hue), var(--color-warning-saturation), 80%);
+  --color-warning-85: hsl(var(--color-warning-hue), var(--color-warning-saturation), 85%);
+  --color-warning-90: hsl(var(--color-warning-hue), var(--color-warning-saturation), 90%);
+  --color-warning-95: hsl(var(--color-warning-hue), var(--color-warning-saturation), 95%);
+
+  --color-danger-hue: 0;
+  --color-danger-saturation: 90%;
+  --color-danger-05: hsl(var(--color-danger-hue), var(--color-danger-saturation), 5%);
+  --color-danger-10: hsl(var(--color-danger-hue), var(--color-danger-saturation), 10%);
+  --color-danger-15: hsl(var(--color-danger-hue), var(--color-danger-saturation), 15%);
+  --color-danger-20: hsl(var(--color-danger-hue), var(--color-danger-saturation), 20%);
+  --color-danger-25: hsl(var(--color-danger-hue), var(--color-danger-saturation), 25%);
+  --color-danger-30: hsl(var(--color-danger-hue), var(--color-danger-saturation), 30%);
+  --color-danger-35: hsl(var(--color-danger-hue), var(--color-danger-saturation), 35%);
+  --color-danger-40: hsl(var(--color-danger-hue), var(--color-danger-saturation), 40%);
+  --color-danger-45: hsl(var(--color-danger-hue), var(--color-danger-saturation), 45%);
+  --color-danger-50: hsl(var(--color-danger-hue), var(--color-danger-saturation), 50%);
+  --color-danger-55: hsl(var(--color-danger-hue), var(--color-danger-saturation), 55%);
+  --color-danger-60: hsl(var(--color-danger-hue), var(--color-danger-saturation), 60%);
+  --color-danger-65: hsl(var(--color-danger-hue), var(--color-danger-saturation), 65%);
+  --color-danger-70: hsl(var(--color-danger-hue), var(--color-danger-saturation), 70%);
+  --color-danger-75: hsl(var(--color-danger-hue), var(--color-danger-saturation), 75%);
+  --color-danger-80: hsl(var(--color-danger-hue), var(--color-danger-saturation), 80%);
+  --color-danger-85: hsl(var(--color-danger-hue), var(--color-danger-saturation), 85%);
+  --color-danger-90: hsl(var(--color-danger-hue), var(--color-danger-saturation), 90%);
+  --color-danger-95: hsl(var(--color-danger-hue), var(--color-danger-saturation), 95%);
+
+  --color-gray-hue: var(--color-primary-hue);
+  --color-gray-saturation: 20%;
+  --color-gray-05: hsl(var(--color-gray-hue), var(--color-gray-saturation), 5%);
+  --color-gray-10: hsl(var(--color-gray-hue), var(--color-gray-saturation), 10%);
+  --color-gray-15: hsl(var(--color-gray-hue), var(--color-gray-saturation), 15%);
+  --color-gray-20: hsl(var(--color-gray-hue), var(--color-gray-saturation), 20%);
+  --color-gray-25: hsl(var(--color-gray-hue), var(--color-gray-saturation), 25%);
+  --color-gray-30: hsl(var(--color-gray-hue), var(--color-gray-saturation), 30%);
+  --color-gray-35: hsl(var(--color-gray-hue), var(--color-gray-saturation), 35%);
+  --color-gray-40: hsl(var(--color-gray-hue), var(--color-gray-saturation), 40%);
+  --color-gray-45: hsl(var(--color-gray-hue), var(--color-gray-saturation), 45%);
+  --color-gray-50: hsl(var(--color-gray-hue), var(--color-gray-saturation), 50%);
+  --color-gray-55: hsl(var(--color-gray-hue), var(--color-gray-saturation), 55%);
+  --color-gray-60: hsl(var(--color-gray-hue), var(--color-gray-saturation), 60%);
+  --color-gray-65: hsl(var(--color-gray-hue), var(--color-gray-saturation), 65%);
+  --color-gray-70: hsl(var(--color-gray-hue), var(--color-gray-saturation), 70%);
+  --color-gray-75: hsl(var(--color-gray-hue), var(--color-gray-saturation), 75%);
+  --color-gray-80: hsl(var(--color-gray-hue), var(--color-gray-saturation), 80%);
+  --color-gray-85: hsl(var(--color-gray-hue), var(--color-gray-saturation), 85%);
+  --color-gray-90: hsl(var(--color-gray-hue), var(--color-gray-saturation), 90%);
+  --color-gray-95: hsl(var(--color-gray-hue), var(--color-gray-saturation), 95%);
+
+  /*********************************************************************************************************************
+  * Fonts
+  *********************************************************************************************************************/
+
+  --font-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
+    'Helvetica Neue', sans-serif;
+  --font-serif: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+  --font-monospace: Menlo, Monaco, 'Courier New', monospace;
+  --font-weight--light: 300;
+  --font-weight--normal: 400;
+  --font-weight--bold: 500;
+
+  /*********************************************************************************************************************
+  * Typography
+  *********************************************************************************************************************/
+
+  --text-color-primary: var(--color-gray-20);
+  --text-color-secondary: var(--color-gray-60);
+
+  --text-size-default: 16px;
+
+  /*********************************************************************************************************************
+  * Form controls
+  *********************************************************************************************************************/
+
+  --form-control-font-family: var(--font-sans-serif);
+  --form-control-font-weight: var(--font-weight--normal);
+  --form-control-font-size--small: 12px;
+  --form-control-font-size--medium: 14px;
+  --form-control-font-size--large: 16px;
+  --form-control-color: var(--color-gray-40);
+  --form-control-placeholder-color: var(--color-gray-70);
+
+  --form-control-height--small: 32px;
+  --form-control-height--medium: 38px;
+  --form-control-height--large: 44px;
+
+  --form-control-border-width: 1px;
+  --form-control-border-color: var(--color-gray-80);
+  --form-control-border-color--hover: var(--color-gray-80);
+  --form-control-border-color--focus: var(--color-primary-50);
+  --form-control-border-color--disabled: var(--color-gray-80);
+
+  --form-control-border-radius--small: 4px;
+  --form-control-border-radius--medium: 4px;
+  --form-control-border-radius--large: 4px;
+
+  --form-control-background-color: white;
+  --form-control-background-color--hover: white;
+  --form-control-background-color--focus: white;
+  --form-control-background-color-disabled: var(--color-gray-90);
+
+  --form-control-transition-speed: 150ms;
+
+  --focus-ring-width: 2px;
+  --focus-ring-alpha: 33%;
+
+  /*********************************************************************************************************************
+  * Menus (dropdown, select, popover, et al)
+  *********************************************************************************************************************/
+
+  --menu-font-family: var(--font-sans-serif);
+  --menu-font-weight: var(--font-weight--normal);
+  --menu-font-size: var(--text-size-default);
+
+  --menu-border-color: var(--color-gray-95);
+  --menu-background-color: white;
+  --menu-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+
+  --menu-transition-speed: 150ms;
+
+  --menu-item-color: var(--color-gray-40);
+  --menu-item-color--active: var(--color-primary-50);
+  --menu-item-color--disabled: var(--color-gray-70);
+
+  --menu-item-background-color: white;
+  --menu-item-background-color--active: var(--color-primary-95);
+  --menu-item-background-color--disabled: white;
+
+  --menu-item-transition-speed: 150ms;
+
+  --menu-divider-border-color: var(--color-gray-90);
+
+  --menu-padding-x: 30px;
+  --menu-padding-y: 10px;
+}
diff --git a/src/components.d.ts b/src/components.d.ts
index 644a64772..6930d04f5 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -56,36 +56,6 @@ export namespace Components {
     */
     'type': string;
   }
-  interface SlCheckbox {
-    /**
-    * Set to true to draw the checkbox in a checked state.
-    */
-    'checked': boolean;
-    /**
-    * Set to true to disable the checkbox.
-    */
-    'disabled': boolean;
-    /**
-    * Set to true to draw the checkbox in an indeterminate state.
-    */
-    'indeterminate': boolean;
-    /**
-    * A native input's name attribute.
-    */
-    'name': string;
-    /**
-    * Removes focus from the checkbox.
-    */
-    'removeFocus': () => Promise<void>;
-    /**
-    * Sets focus on the checkbox.
-    */
-    'setFocus': () => Promise<void>;
-    /**
-    * The native input's value attribute.
-    */
-    'value': string;
-  }
   interface SlDropdown {
     'close': () => Promise<void>;
     'open': () => Promise<void>;
@@ -109,327 +79,12 @@ export namespace Components {
     */
     'disabled': boolean;
   }
-  interface SlInput {
-    /**
-    * The input's autocaptialize attribute.
-    */
-    'autocapitalize': string;
-    /**
-    * The input's autocomplete attribute.
-    */
-    'autocomplete': string;
-    /**
-    * The input's autocorrect attribute.
-    */
-    'autocorrect': string;
-    /**
-    * The input's autofocus attribute.
-    */
-    'autofocus': boolean;
-    /**
-    * Set to true to add a clear button when the input is populated.
-    */
-    'clearable': boolean;
-    /**
-    * Set to true to disable the input.
-    */
-    'disabled': boolean;
-    /**
-    * The input's inputmode attribute.
-    */
-    'inputmode': string;
-    /**
-    * The input's max attribute.
-    */
-    'max': number;
-    /**
-    * The input's maxlength attribute.
-    */
-    'maxlength': number;
-    /**
-    * The input's min attribute.
-    */
-    'min': number;
-    /**
-    * The input's minlength attribute.
-    */
-    'minlength': number;
-    /**
-    * The input's name attribute.
-    */
-    'name': string;
-    /**
-    * The input's pattern attribute.
-    */
-    'pattern': string;
-    /**
-    * The input's placeholder text.
-    */
-    'placeholder': string;
-    /**
-    * Set to true for a readonly input.
-    */
-    'readonly': boolean;
-    /**
-    * Removes focus from the input.
-    */
-    'removeFocus': () => Promise<void>;
-    /**
-    * The input's required attribute.
-    */
-    'required': boolean;
-    /**
-    * Sets focus on the input.
-    */
-    'setFocus': () => Promise<void>;
-    /**
-    * The input's size, one of `small`, `medium`, or `large`.
-    */
-    'size': string;
-    /**
-    * The input's step attribute.
-    */
-    'step': number;
-    /**
-    * The input's type, one of `text`, `number`, `email`, etc.
-    */
-    'type': string;
-    /**
-    * The input's value attribute.
-    */
-    'value': string;
-  }
-  interface SlRadio {
-    /**
-    * Set to true to draw the radio in a checked state.
-    */
-    'checked': boolean;
-    /**
-    * Set to true to disable the radio.
-    */
-    'disabled': boolean;
-    /**
-    * A native input's name attribute.
-    */
-    'name': string;
-    /**
-    * Removes focus from the radio.
-    */
-    'removeFocus': () => Promise<void>;
-    /**
-    * Sets focus on the radio.
-    */
-    'setFocus': () => Promise<void>;
-    /**
-    * The native input's value attribute.
-    */
-    'value': string;
-  }
-  interface SlRange {
-    /**
-    * Set to true to disable the input.
-    */
-    'disabled': boolean;
-    /**
-    * The input's max attribute.
-    */
-    'max': number;
-    /**
-    * The input's min attribute.
-    */
-    'min': number;
-    /**
-    * The input's name attribute.
-    */
-    'name': string;
-    /**
-    * Removes focus from the input.
-    */
-    'removeFocus': () => Promise<void>;
-    /**
-    * Sets focus on the input.
-    */
-    'setFocus': () => Promise<void>;
-    /**
-    * The input's step attribute.
-    */
-    'step': number | 'any';
-    /**
-    * The input's value attribute.
-    */
-    'value': string;
-  }
   interface SlSpinner {
     /**
     * The spinner's size.
     */
     'size': string;
   }
-  interface SlSwitch {
-    /**
-    * Set to true to draw the switch in a checked state.
-    */
-    'checked': boolean;
-    /**
-    * Set to true to disable the switch.
-    */
-    'disabled': boolean;
-    /**
-    * A native input's name attribute.
-    */
-    'name': string;
-    /**
-    * Removes focus from the switch.
-    */
-    'removeFocus': () => Promise<void>;
-    /**
-    * Sets focus on the switch.
-    */
-    'setFocus': () => Promise<void>;
-    /**
-    * The native input's value attribute.
-    */
-    'value': string;
-  }
-  interface SlTextarea {
-    /**
-    * The textarea's autocaptialize attribute.
-    */
-    'autocapitalize': string;
-    /**
-    * The textarea's autocomplete attribute.
-    */
-    'autocomplete': string;
-    /**
-    * The textarea's autocorrect attribute.
-    */
-    'autocorrect': string;
-    /**
-    * The textarea's autofocus attribute.
-    */
-    'autofocus': boolean;
-    /**
-    * Set to true to disable the textarea.
-    */
-    'disabled': boolean;
-    /**
-    * The textarea's inputmode attribute.
-    */
-    'inputmode': string;
-    /**
-    * The textarea's maxlength attribute.
-    */
-    'maxlength': number;
-    /**
-    * The textarea's name attribute.
-    */
-    'name': string;
-    /**
-    * The textarea's placeholder text.
-    */
-    'placeholder': string;
-    /**
-    * Set to true for a readonly textarea.
-    */
-    'readonly': boolean;
-    /**
-    * Removes focus fromt the textarea.
-    */
-    'removeFocus': () => Promise<void>;
-    /**
-    * The textarea's required attribute.
-    */
-    'required': boolean;
-    /**
-    * Controls how the textarea can be resized.
-    */
-    'resize': 'none' | 'vertical' | 'auto';
-    /**
-    * The number of rows to display by default.
-    */
-    'rows': number;
-    /**
-    * Sets focus on the textarea.
-    */
-    'setFocus': () => Promise<void>;
-    /**
-    * The textarea's size, one of `small`, `medium`, or `large`.
-    */
-    'size': string;
-    /**
-    * The textarea's value attribute.
-    */
-    'value': string;
-  }
-  interface SlTooltip {
-    /**
-    * Set to true to draw the the tooltip with an arrow.
-    */
-    'arrow': boolean;
-    /**
-    * Set to true to disable the tooltip so it won't show when triggered.
-    */
-    'disabled': boolean;
-    /**
-    * The distance in pixels from which to draw the tooltip from its target element.
-    */
-    'distance': number;
-    /**
-    * Shows the tooltip.
-    */
-    'hide': () => Promise<void>;
-    /**
-    * The delay in ms before the tooltip hides.
-    */
-    'hideDelay': number;
-    /**
-    * The duration in ms of the tooltip's hide transition.
-    */
-    'hideDuration': number;
-    /**
-    * The maximum width in pixels the tooltip can be before its content wraps.
-    */
-    'maxWidth': number;
-    /**
-    * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip inside of the viewport.
-    */
-    'placement': | 'top'
-    | 'top-start'
-    | 'top-end'
-    | 'right'
-    | 'right-start'
-    | 'right-end'
-    | 'bottom'
-    | 'bottom-start'
-    | 'bottom-end'
-    | 'left'
-    | 'left-start'
-    | 'left-end';
-    /**
-    * Shows the tooltip.
-    */
-    'show': () => Promise<void>;
-    /**
-    * The delay in ms before showing the tooltip.
-    */
-    'showDelay': number;
-    /**
-    * The duration in ms of the tooltip's show transition.
-    */
-    'showDuration': number;
-    /**
-    * A selector or element to use as the tooltip's target. This is the element that will trigger the tooltip to show upon interaction. If no target is specified, the previous sibling element of the tooltip will be used. A common way to link a tooltip to a target is to give the target an `id` and pass `#id` to the `target` prop.
-    */
-    'target': string | HTMLElement;
-    /**
-    * The events that cause a tooltip to show, separated by a space. Possible values include any combination of `mouseenter`, `focus`, `click`, and `manual`. Use `manual` if you only want to show and hide the tooltip programmatically.
-    */
-    'trigger': string;
-    /**
-    * Sets the tooltip's z-index.
-    */
-    'zIndex': number;
-  }
 }
 
 declare global {
@@ -441,12 +96,6 @@ declare global {
     new (): HTMLSlButtonElement;
   };
 
-  interface HTMLSlCheckboxElement extends Components.SlCheckbox, HTMLStencilElement {}
-  var HTMLSlCheckboxElement: {
-    prototype: HTMLSlCheckboxElement;
-    new (): HTMLSlCheckboxElement;
-  };
-
   interface HTMLSlDropdownElement extends Components.SlDropdown, HTMLStencilElement {}
   var HTMLSlDropdownElement: {
     prototype: HTMLSlDropdownElement;
@@ -465,60 +114,17 @@ declare global {
     new (): HTMLSlDropdownItemElement;
   };
 
-  interface HTMLSlInputElement extends Components.SlInput, HTMLStencilElement {}
-  var HTMLSlInputElement: {
-    prototype: HTMLSlInputElement;
-    new (): HTMLSlInputElement;
-  };
-
-  interface HTMLSlRadioElement extends Components.SlRadio, HTMLStencilElement {}
-  var HTMLSlRadioElement: {
-    prototype: HTMLSlRadioElement;
-    new (): HTMLSlRadioElement;
-  };
-
-  interface HTMLSlRangeElement extends Components.SlRange, HTMLStencilElement {}
-  var HTMLSlRangeElement: {
-    prototype: HTMLSlRangeElement;
-    new (): HTMLSlRangeElement;
-  };
-
   interface HTMLSlSpinnerElement extends Components.SlSpinner, HTMLStencilElement {}
   var HTMLSlSpinnerElement: {
     prototype: HTMLSlSpinnerElement;
     new (): HTMLSlSpinnerElement;
   };
-
-  interface HTMLSlSwitchElement extends Components.SlSwitch, HTMLStencilElement {}
-  var HTMLSlSwitchElement: {
-    prototype: HTMLSlSwitchElement;
-    new (): HTMLSlSwitchElement;
-  };
-
-  interface HTMLSlTextareaElement extends Components.SlTextarea, HTMLStencilElement {}
-  var HTMLSlTextareaElement: {
-    prototype: HTMLSlTextareaElement;
-    new (): HTMLSlTextareaElement;
-  };
-
-  interface HTMLSlTooltipElement extends Components.SlTooltip, HTMLStencilElement {}
-  var HTMLSlTooltipElement: {
-    prototype: HTMLSlTooltipElement;
-    new (): HTMLSlTooltipElement;
-  };
   interface HTMLElementTagNameMap {
     'sl-button': HTMLSlButtonElement;
-    'sl-checkbox': HTMLSlCheckboxElement;
     'sl-dropdown': HTMLSlDropdownElement;
     'sl-dropdown-divider': HTMLSlDropdownDividerElement;
     'sl-dropdown-item': HTMLSlDropdownItemElement;
-    'sl-input': HTMLSlInputElement;
-    'sl-radio': HTMLSlRadioElement;
-    'sl-range': HTMLSlRangeElement;
     'sl-spinner': HTMLSlSpinnerElement;
-    'sl-switch': HTMLSlSwitchElement;
-    'sl-textarea': HTMLSlTextareaElement;
-    'sl-tooltip': HTMLSlTooltipElement;
   }
 }
 
@@ -561,28 +167,6 @@ declare namespace LocalJSX {
     */
     'type'?: string;
   }
-  interface SlCheckbox {
-    /**
-    * Set to true to draw the checkbox in a checked state.
-    */
-    'checked'?: boolean;
-    /**
-    * Set to true to disable the checkbox.
-    */
-    'disabled'?: boolean;
-    /**
-    * Set to true to draw the checkbox in an indeterminate state.
-    */
-    'indeterminate'?: boolean;
-    /**
-    * A native input's name attribute.
-    */
-    'name'?: string;
-    /**
-    * The native input's value attribute.
-    */
-    'value'?: string;
-  }
   interface SlDropdown {
     /**
     * The preferred placement of the dropdown menu. Note that the actual placement may vary as needed to keep the menu inside of the viewport.
@@ -605,309 +189,19 @@ declare namespace LocalJSX {
     'disabled'?: boolean;
     'onShoelaceSelect'?: (event: CustomEvent<any>) => void;
   }
-  interface SlInput {
-    /**
-    * The input's autocaptialize attribute.
-    */
-    'autocapitalize'?: string;
-    /**
-    * The input's autocomplete attribute.
-    */
-    'autocomplete'?: string;
-    /**
-    * The input's autocorrect attribute.
-    */
-    'autocorrect'?: string;
-    /**
-    * The input's autofocus attribute.
-    */
-    'autofocus'?: boolean;
-    /**
-    * Set to true to add a clear button when the input is populated.
-    */
-    'clearable'?: boolean;
-    /**
-    * Set to true to disable the input.
-    */
-    'disabled'?: boolean;
-    /**
-    * The input's inputmode attribute.
-    */
-    'inputmode'?: string;
-    /**
-    * The input's max attribute.
-    */
-    'max'?: number;
-    /**
-    * The input's maxlength attribute.
-    */
-    'maxlength'?: number;
-    /**
-    * The input's min attribute.
-    */
-    'min'?: number;
-    /**
-    * The input's minlength attribute.
-    */
-    'minlength'?: number;
-    /**
-    * The input's name attribute.
-    */
-    'name'?: string;
-    /**
-    * The input's pattern attribute.
-    */
-    'pattern'?: string;
-    /**
-    * The input's placeholder text.
-    */
-    'placeholder'?: string;
-    /**
-    * Set to true for a readonly input.
-    */
-    'readonly'?: boolean;
-    /**
-    * The input's required attribute.
-    */
-    'required'?: boolean;
-    /**
-    * The input's size, one of `small`, `medium`, or `large`.
-    */
-    'size'?: string;
-    /**
-    * The input's step attribute.
-    */
-    'step'?: number;
-    /**
-    * The input's type, one of `text`, `number`, `email`, etc.
-    */
-    'type'?: string;
-    /**
-    * The input's value attribute.
-    */
-    'value'?: string;
-  }
-  interface SlRadio {
-    /**
-    * Set to true to draw the radio in a checked state.
-    */
-    'checked'?: boolean;
-    /**
-    * Set to true to disable the radio.
-    */
-    'disabled'?: boolean;
-    /**
-    * A native input's name attribute.
-    */
-    'name'?: string;
-    /**
-    * The native input's value attribute.
-    */
-    'value'?: string;
-  }
-  interface SlRange {
-    /**
-    * Set to true to disable the input.
-    */
-    'disabled'?: boolean;
-    /**
-    * The input's max attribute.
-    */
-    'max'?: number;
-    /**
-    * The input's min attribute.
-    */
-    'min'?: number;
-    /**
-    * The input's name attribute.
-    */
-    'name'?: string;
-    /**
-    * The input's step attribute.
-    */
-    'step'?: number | 'any';
-    /**
-    * The input's value attribute.
-    */
-    'value'?: string;
-  }
   interface SlSpinner {
     /**
     * The spinner's size.
     */
     'size'?: string;
   }
-  interface SlSwitch {
-    /**
-    * Set to true to draw the switch in a checked state.
-    */
-    'checked'?: boolean;
-    /**
-    * Set to true to disable the switch.
-    */
-    'disabled'?: boolean;
-    /**
-    * A native input's name attribute.
-    */
-    'name'?: string;
-    /**
-    * The native input's value attribute.
-    */
-    'value'?: string;
-  }
-  interface SlTextarea {
-    /**
-    * The textarea's autocaptialize attribute.
-    */
-    'autocapitalize'?: string;
-    /**
-    * The textarea's autocomplete attribute.
-    */
-    'autocomplete'?: string;
-    /**
-    * The textarea's autocorrect attribute.
-    */
-    'autocorrect'?: string;
-    /**
-    * The textarea's autofocus attribute.
-    */
-    'autofocus'?: boolean;
-    /**
-    * Set to true to disable the textarea.
-    */
-    'disabled'?: boolean;
-    /**
-    * The textarea's inputmode attribute.
-    */
-    'inputmode'?: string;
-    /**
-    * The textarea's maxlength attribute.
-    */
-    'maxlength'?: number;
-    /**
-    * The textarea's name attribute.
-    */
-    'name'?: string;
-    /**
-    * The textarea's placeholder text.
-    */
-    'placeholder'?: string;
-    /**
-    * Set to true for a readonly textarea.
-    */
-    'readonly'?: boolean;
-    /**
-    * The textarea's required attribute.
-    */
-    'required'?: boolean;
-    /**
-    * Controls how the textarea can be resized.
-    */
-    'resize'?: 'none' | 'vertical' | 'auto';
-    /**
-    * The number of rows to display by default.
-    */
-    'rows'?: number;
-    /**
-    * The textarea's size, one of `small`, `medium`, or `large`.
-    */
-    'size'?: string;
-    /**
-    * The textarea's value attribute.
-    */
-    'value'?: string;
-  }
-  interface SlTooltip {
-    /**
-    * Set to true to draw the the tooltip with an arrow.
-    */
-    'arrow'?: boolean;
-    /**
-    * Set to true to disable the tooltip so it won't show when triggered.
-    */
-    'disabled'?: boolean;
-    /**
-    * The distance in pixels from which to draw the tooltip from its target element.
-    */
-    'distance'?: number;
-    /**
-    * The delay in ms before the tooltip hides.
-    */
-    'hideDelay'?: number;
-    /**
-    * The duration in ms of the tooltip's hide transition.
-    */
-    'hideDuration'?: number;
-    /**
-    * The maximum width in pixels the tooltip can be before its content wraps.
-    */
-    'maxWidth'?: number;
-    /**
-    * Emitted when the tooltip has fully transitioned out and gets unmounted from the DOM.
-    */
-    'onSlHidden'?: (event: CustomEvent<any>) => void;
-    /**
-    * Emitted when the tooltip begins to hide.
-    */
-    'onSlHide'?: (event: CustomEvent<any>) => void;
-    /**
-    * Emitted when the tooltip begins to show, but before it gets mounted to the DOM.
-    */
-    'onSlShow'?: (event: CustomEvent<any>) => void;
-    /**
-    * Emitted when the tooltip has fully transitioned in.
-    */
-    'onSlShown'?: (event: CustomEvent<any>) => void;
-    /**
-    * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip inside of the viewport.
-    */
-    'placement'?: | 'top'
-    | 'top-start'
-    | 'top-end'
-    | 'right'
-    | 'right-start'
-    | 'right-end'
-    | 'bottom'
-    | 'bottom-start'
-    | 'bottom-end'
-    | 'left'
-    | 'left-start'
-    | 'left-end';
-    /**
-    * The delay in ms before showing the tooltip.
-    */
-    'showDelay'?: number;
-    /**
-    * The duration in ms of the tooltip's show transition.
-    */
-    'showDuration'?: number;
-    /**
-    * A selector or element to use as the tooltip's target. This is the element that will trigger the tooltip to show upon interaction. If no target is specified, the previous sibling element of the tooltip will be used. A common way to link a tooltip to a target is to give the target an `id` and pass `#id` to the `target` prop.
-    */
-    'target'?: string | HTMLElement;
-    /**
-    * The events that cause a tooltip to show, separated by a space. Possible values include any combination of `mouseenter`, `focus`, `click`, and `manual`. Use `manual` if you only want to show and hide the tooltip programmatically.
-    */
-    'trigger'?: string;
-    /**
-    * Sets the tooltip's z-index.
-    */
-    'zIndex'?: number;
-  }
 
   interface IntrinsicElements {
     'sl-button': SlButton;
-    'sl-checkbox': SlCheckbox;
     'sl-dropdown': SlDropdown;
     'sl-dropdown-divider': SlDropdownDivider;
     'sl-dropdown-item': SlDropdownItem;
-    'sl-input': SlInput;
-    'sl-radio': SlRadio;
-    'sl-range': SlRange;
     'sl-spinner': SlSpinner;
-    'sl-switch': SlSwitch;
-    'sl-textarea': SlTextarea;
-    'sl-tooltip': SlTooltip;
   }
 }
 
@@ -918,17 +212,10 @@ declare module "@stencil/core" {
   export namespace JSX {
     interface IntrinsicElements {
       'sl-button': LocalJSX.SlButton & JSXBase.HTMLAttributes<HTMLSlButtonElement>;
-      'sl-checkbox': LocalJSX.SlCheckbox & JSXBase.HTMLAttributes<HTMLSlCheckboxElement>;
       'sl-dropdown': LocalJSX.SlDropdown & JSXBase.HTMLAttributes<HTMLSlDropdownElement>;
       'sl-dropdown-divider': LocalJSX.SlDropdownDivider & JSXBase.HTMLAttributes<HTMLSlDropdownDividerElement>;
       'sl-dropdown-item': LocalJSX.SlDropdownItem & JSXBase.HTMLAttributes<HTMLSlDropdownItemElement>;
-      'sl-input': LocalJSX.SlInput & JSXBase.HTMLAttributes<HTMLSlInputElement>;
-      'sl-radio': LocalJSX.SlRadio & JSXBase.HTMLAttributes<HTMLSlRadioElement>;
-      'sl-range': LocalJSX.SlRange & JSXBase.HTMLAttributes<HTMLSlRangeElement>;
       'sl-spinner': LocalJSX.SlSpinner & JSXBase.HTMLAttributes<HTMLSlSpinnerElement>;
-      'sl-switch': LocalJSX.SlSwitch & JSXBase.HTMLAttributes<HTMLSlSwitchElement>;
-      'sl-textarea': LocalJSX.SlTextarea & JSXBase.HTMLAttributes<HTMLSlTextareaElement>;
-      'sl-tooltip': LocalJSX.SlTooltip & JSXBase.HTMLAttributes<HTMLSlTooltipElement>;
     }
   }
 }
diff --git a/src/components/button/button.mixins.scss b/src/components/button/button.mixins.scss
index a5cf27e5e..3478679eb 100644
--- a/src/components/button/button.mixins.scss
+++ b/src/components/button/button.mixins.scss
@@ -1,59 +1,51 @@
-@mixin button(
-  $color,
-  $color--hover,
-  $color--focus,
-  $color--active,
-  $background-color,
-  $background-color--hover,
-  $background-color--focus,
-  $background-color--active,
-  $border-color,
-  $border-color--hover,
-  $border-color--focus,
-  $border-color--active,
-  $border-width,
-  $focus-ring-width,
-  $focus-ring-color
-) {
-  display: inline-block;
-  font-family: var(--input-font-sans-serif);
-  font-weight: var(--input-font-weight);
-  color: $color;
-  background-color: $background-color;
-  border: solid $border-width $border-color;
-  transition: var(--input-transition-speed) background-color, var(--input-transition-speed) color,
-    var(--input-transition-speed) border;
-  user-select: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  cursor: pointer;
-
-  &::-moz-focus-inner {
-    border: 0;
-  }
+@mixin solid-button($theme-color) {
+  background-color: var(--color-#{$theme-color}-50);
+  border-color: var(--color-#{$theme-color}-50);
+  color: white;
 
   &:hover:not(:disabled) {
-    background-color: $background-color--hover;
-    border-color: $border-color--hover;
-    color: $color--hover;
+    background-color: var(--color-#{$theme-color}-55);
+    border-color: var(--color-#{$theme-color}-55);
+    color: white;
   }
 
   &:focus:not(:disabled) {
-    background-color: $background-color--focus;
-    border-color: $border-color--focus;
-    color: $color--focus;
-    outline: none;
-    box-shadow: 0 0 0 $focus-ring-width $focus-ring-color;
+    background-color: var(--color-#{$theme-color}-55);
+    border-color: var(--color-#{$theme-color}-55);
+    color: white;
+    box-shadow: 0 0 0 var(--focus-ring-width)
+      hsla(var(--color-#{$theme-color}-hue), var(--color-#{$theme-color}-saturation), 50%, var(--focus-ring-alpha));
   }
 
   &:active:not(:disabled) {
-    background-color: $background-color--active;
-    border-color: $border-color--active;
-    color: $color--active;
-  }
-
-  &[disabled] {
-    opacity: 0.5;
-    cursor: not-allowed;
+    background-color: var(--color-#{$theme-color}-45);
+    border-color: var(--color-#{$theme-color}-45);
+    color: white;
+  }
+}
+
+@mixin outline-button($theme-color) {
+  background-color: var(--color-#{$theme-color}-90);
+  border-color: var(--color-#{$theme-color}-80);
+  color: var(--color-#{$theme-color}-50);
+
+  &:hover:not(:disabled) {
+    background-color: var(--color-#{$theme-color}-50);
+    border-color: var(--color-#{$theme-color}-50);
+    color: white;
+  }
+
+  &:focus:not(:disabled) {
+    background-color: var(--color-#{$theme-color}-50);
+    border-color: var(--color-#{$theme-color}-50);
+    color: white;
+    box-shadow: 0 0 0 var(--focus-ring-width)
+      hsla(var(--color-#{$theme-color}-hue), var(--color-#{$theme-color}-saturation), 50%, var(--focus-ring-alpha));
+  }
+
+  &:active:not(:disabled) {
+    background-color: var(--color-#{$theme-color}-45);
+    border-color: var(--color-#{$theme-color}-45);
+    color: white;
   }
 }
diff --git a/src/components/button/button.scss b/src/components/button/button.scss
index dad9b7324..eb135c3e1 100644
--- a/src/components/button/button.scss
+++ b/src/components/button/button.scss
@@ -1,376 +1,272 @@
 @import 'reset';
-@import 'variables';
 @import 'button.mixins';
 
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
 :host {
   --button-padding-x--small: 14px;
   --button-padding-x--medium: 20px;
   --button-padding-x--large: 26px;
+
   --button-spinner-animation: 1s linear infinite spin;
   --button-spinner-border-width: 1px;
 
   display: inline-block;
 }
 
+////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+// Base styles
+////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
 .sl-button {
   display: flex;
   align-items: center;
   justify-content: center;
+  border-style: solid;
+  border-width: var(--form-control-border-width);
+  font-family: var(--form-control-font-sans-serif);
+  font-weight: var(--form-control-font-weight);
+  user-select: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  transition: var(--form-control-transition-speed) background-color, var(--form-control-transition-speed) color,
+    var(--form-control-transition-speed) border;
+  cursor: pointer;
 
-  .sl-button__prefix:empty,
-  .sl-button__suffix:empty {
-    display: none;
+  &::-moz-focus-inner {
+    border: 0;
   }
 
-  .sl-button__prefix:not(:empty) {
-    margin-left: -0.25em;
-    margin-right: 0.25em;
+  &:focus {
+    outline: none;
   }
 
-  .sl-button__suffix:not(:empty) {
-    margin-left: 0.25em;
-    margin-right: -0.25em;
+  &[disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .sl-button__prefix {
+    ::slotted(*) {
+      margin-left: -0.25em;
+      margin-right: 0.5em;
+    }
+  }
+
+  .sl-button__suffix {
+    ::slotted(*) {
+      margin-left: 0.5em;
+      margin-right: -0.25em;
+    }
   }
 }
 
-// Standard buttons
+////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+// Solid buttons
+////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
 .sl-button:not(.sl-button--outline) {
   &.sl-button--default {
-    @include button(
-      $color: var(--input-color),
-      $color--hover: var(--color-primary-500),
-      $color--focus: var(--color-primary-500),
-      $color--active: var(--color-primary-450),
-      $background-color: var(--input-background-color),
-      $background-color--hover: var(--color-primary-900),
-      $background-color--focus: var(--color-primary-900),
-      $background-color--active: var(--color-primary-900),
-      $border-color: var(--input-border-color),
-      $border-color--hover: var(--color-primary-800),
-      $border-color--focus: var(--color-primary-600),
-      $border-color--active: var(--color-primary-500),
-      $border-width: var(--input-border-width),
-      $focus-ring-width: var(--input-focus-ring-width),
-      $focus-ring-color: var(--color-focus-primary)
-    );
+    background-color: var(--form-control-background-color);
+    border-color: var(--form-control-border-color);
+    color: var(--form-control-color);
+
+    &:hover:not(:disabled) {
+      background-color: var(--color-primary-95);
+      border-color: var(--color-primary-80);
+      color: var(--color-primary-50);
+    }
+
+    &:focus:not(:disabled) {
+      background-color: var(--color-primary-95);
+      border-color: var(--color-primary-70);
+      color: var(--color-primary-50);
+      box-shadow: 0 0 0 var(--focus-ring-width)
+        hsla(var(--color-primary-hue), var(--color-primary-saturation), 50%, var(--focus-ring-alpha));
+    }
+
+    &:active:not(:disabled) {
+      background-color: var(--color-primary-95);
+      border-color: var(--color-primary-60);
+      color: var(--color-primary-45);
+    }
   }
 
   &.sl-button--primary {
-    @include button(
-      $color: var(--color-white),
-      $color--hover: var(--color-white),
-      $color--focus: var(--color-white),
-      $color--active: var(--color-white),
-      $background-color: var(--color-primary),
-      $background-color--hover: var(--color-primary-550),
-      $background-color--focus: var(--color-primary-550),
-      $background-color--active: var(--color-primary-450),
-      $border-color: var(--color-primary),
-      $border-color--hover: var(--color-primary-550),
-      $border-color--focus: var(--color-primary-550),
-      $border-color--active: var(--color-primary-450),
-      $border-width: var(--input-border-width),
-      $focus-ring-width: var(--input-focus-ring-width),
-      $focus-ring-color: var(--color-focus-primary)
-    );
+    @include solid-button(primary);
   }
 
   &.sl-button--success {
-    @include button(
-      $color: var(--color-white),
-      $color--hover: var(--color-white),
-      $color--focus: var(--color-white),
-      $color--active: var(--color-white),
-      $background-color: var(--color-success),
-      $background-color--hover: var(--color-success-550),
-      $background-color--focus: var(--color-success-550),
-      $background-color--active: var(--color-success-450),
-      $border-color: var(--color-success),
-      $border-color--hover: var(--color-success-550),
-      $border-color--focus: var(--color-success-550),
-      $border-color--active: var(--color-success-450),
-      $border-width: var(--input-border-width),
-      $focus-ring-width: var(--input-focus-ring-width),
-      $focus-ring-color: var(--color-focus-success)
-    );
+    @include solid-button(success);
   }
 
   &.sl-button--info {
-    @include button(
-      $color: var(--color-white),
-      $color--hover: var(--color-white),
-      $color--focus: var(--color-white),
-      $color--active: var(--color-white),
-      $background-color: var(--color-info),
-      $background-color--hover: var(--color-info-550),
-      $background-color--focus: var(--color-info-550),
-      $background-color--active: var(--color-info-450),
-      $border-color: var(--color-info),
-      $border-color--hover: var(--color-info-550),
-      $border-color--focus: var(--color-info-550),
-      $border-color--active: var(--color-info-450),
-      $border-width: var(--input-border-width),
-      $focus-ring-width: var(--input-focus-ring-width),
-      $focus-ring-color: var(--color-focus-info)
-    );
+    @include solid-button(info);
   }
 
   &.sl-button--warning {
-    @include button(
-      $color: var(--color-white),
-      $color--hover: var(--color-white),
-      $color--focus: var(--color-white),
-      $color--active: var(--color-white),
-      $background-color: var(--color-warning),
-      $background-color--hover: var(--color-warning-550),
-      $background-color--focus: var(--color-warning-550),
-      $background-color--active: var(--color-warning-450),
-      $border-color: var(--color-warning),
-      $border-color--hover: var(--color-warning-550),
-      $border-color--focus: var(--color-warning-550),
-      $border-color--active: var(--color-warning-450),
-      $border-width: var(--input-border-width),
-      $focus-ring-width: var(--input-focus-ring-width),
-      $focus-ring-color: var(--color-focus-warning)
-    );
+    @include solid-button(warning);
   }
 
   &.sl-button--danger {
-    @include button(
-      $color: var(--color-white),
-      $color--hover: var(--color-white),
-      $color--focus: var(--color-white),
-      $color--active: var(--color-white),
-      $background-color: var(--color-danger),
-      $background-color--hover: var(--color-danger-550),
-      $background-color--focus: var(--color-danger-550),
-      $background-color--active: var(--color-danger-450),
-      $border-color: var(--color-danger),
-      $border-color--hover: var(--color-danger-550),
-      $border-color--focus: var(--color-danger-550),
-      $border-color--active: var(--color-danger-450),
-      $border-width: var(--input-border-width),
-      $focus-ring-width: var(--input-focus-ring-width),
-      $focus-ring-color: var(--color-focus-danger)
-    );
+    @include solid-button(danger);
   }
 }
 
+////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 // Outline buttons
+////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
 .sl-button.sl-button--outline {
   &.sl-button--default {
-    @include button(
-      $color: var(--input-color),
-      $color--hover: var(--color-primary-500),
-      $color--focus: var(--color-primary-500),
-      $color--active: var(--color-primary-450),
-      $background-color: var(--color-white),
-      $background-color--hover: var(--color-white),
-      $background-color--focus: var(--color-white),
-      $background-color--active: var(--color-white),
-      $border-color: $form-control-border-color,
-      $border-color--hover: var(--color-primary-600),
-      $border-color--focus: var(--color-primary-600),
-      $border-color--active: var(--color-primary-450),
-      $border-width: var(--input-border-width),
-      $focus-ring-width: var(--input-focus-ring-width),
-      $focus-ring-color: var(--color-focus-primary)
-    );
+    background-color: white;
+    border-color: var(--form-control-border-color);
+    color: var(--form-control-color);
+
+    &:hover:not(:disabled) {
+      background-color: var(--color-white);
+      border-color: var(--color-primary-60);
+      color: var(--color-primary-50);
+    }
+
+    &:focus:not(:disabled) {
+      background-color: var(--color-white);
+      border-color: var(--color-primary-60);
+      color: var(--color-primary-50);
+      box-shadow: 0 0 0 var(--focus-ring-width)
+        hsla(var(--color-primary-hue), var(--color-primary-saturation), 50%, var(--focus-ring-alpha));
+    }
+
+    &:active:not(:disabled) {
+      background-color: var(--color-white);
+      border-color: var(--color-primary-45);
+      color: var(--color-primary-45);
+    }
   }
 
   &.sl-button--primary {
-    @include button(
-      $color: var(--color-primary),
-      $color--hover: var(--color-white),
-      $color--focus: var(--color-white),
-      $color--active: var(--color-white),
-      $background-color: var(--color-primary-900),
-      $background-color--hover: var(--color-primary-500),
-      $background-color--focus: var(--color-primary-500),
-      $background-color--active: var(--color-primary-450),
-      $border-color: var(--color-primary-800),
-      $border-color--hover: var(--color-primary),
-      $border-color--focus: var(--color-primary),
-      $border-color--active: var(--color-primary-450),
-      $border-width: var(--input-border-width),
-      $focus-ring-width: var(--input-focus-ring-width),
-      $focus-ring-color: var(--color-focus-primary)
-    );
+    @include outline-button(primary);
   }
 
   &.sl-button--success {
-    @include button(
-      $color: var(--color-success),
-      $color--hover: var(--color-white),
-      $color--focus: var(--color-white),
-      $color--active: var(--color-white),
-      $background-color: var(--color-success-900),
-      $background-color--hover: var(--color-success-500),
-      $background-color--focus: var(--color-success-500),
-      $background-color--active: var(--color-success-450),
-      $border-color: var(--color-success-800),
-      $border-color--hover: var(--color-success),
-      $border-color--focus: var(--color-success),
-      $border-color--active: var(--color-success-450),
-      $border-width: var(--input-border-width),
-      $focus-ring-width: var(--input-focus-ring-width),
-      $focus-ring-color: var(--color-focus-success)
-    );
+    @include outline-button(success);
   }
 
   &.sl-button--info {
-    @include button(
-      $color: var(--color-info),
-      $color--hover: var(--color-white),
-      $color--focus: var(--color-white),
-      $color--active: var(--color-white),
-      $background-color: var(--color-info-900),
-      $background-color--hover: var(--color-info-500),
-      $background-color--focus: var(--color-info-500),
-      $background-color--active: var(--color-info-450),
-      $border-color: var(--color-info-800),
-      $border-color--hover: var(--color-info),
-      $border-color--focus: var(--color-info),
-      $border-color--active: var(--color-info-450),
-      $border-width: var(--input-border-width),
-      $focus-ring-width: var(--input-focus-ring-width),
-      $focus-ring-color: var(--color-focus-info)
-    );
+    @include outline-button(info);
   }
 
   &.sl-button--warning {
-    @include button(
-      $color: var(--color-warning),
-      $color--hover: var(--color-white),
-      $color--focus: var(--color-white),
-      $color--active: var(--color-white),
-      $background-color: var(--color-warning-900),
-      $background-color--hover: var(--color-warning-500),
-      $background-color--focus: var(--color-warning-500),
-      $background-color--active: var(--color-warning-450),
-      $border-color: var(--color-warning-800),
-      $border-color--hover: var(--color-warning),
-      $border-color--focus: var(--color-warning),
-      $border-color--active: var(--color-warning-450),
-      $border-width: var(--input-border-width),
-      $focus-ring-width: var(--input-focus-ring-width),
-      $focus-ring-color: var(--color-focus-warning)
-    );
+    @include outline-button(warning);
   }
 
   &.sl-button--danger {
-    @include button(
-      $color: var(--color-danger),
-      $color--hover: var(--color-white),
-      $color--focus: var(--color-white),
-      $color--active: var(--color-white),
-      $background-color: var(--color-danger-900),
-      $background-color--hover: var(--color-danger-500),
-      $background-color--focus: var(--color-danger-500),
-      $background-color--active: var(--color-danger-450),
-      $border-color: var(--color-danger-800),
-      $border-color--hover: var(--color-danger),
-      $border-color--focus: var(--color-danger),
-      $border-color--active: var(--color-danger-450),
-      $border-width: var(--input-border-width),
-      $focus-ring-width: var(--input-focus-ring-width),
-      $focus-ring-color: var(--color-focus-danger)
-    );
+    @include outline-button(danger);
   }
 }
 
-// Text buttons
+////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+// Text buttons modifier
+////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
 .sl-button--text {
-  @include button(
-    $color: var(--color-gray-200),
-    $color--hover: var(--color-gray-400),
-    $color--focus: var(--color-gray-400),
-    $color--active: var(--color-gray-100),
-    $background-color: transparent,
-    $background-color--hover: transparent,
-    $background-color--focus: transparent,
-    $background-color--active: transparent,
-    $border-color: transparent,
-    $border-color--hover: transparent,
-    $border-color--focus: transparent,
-    $border-color--active: transparent,
-    $border-width: var(--input-border-width),
-    $focus-ring-width: var(--input-focus-ring-width),
-    $focus-ring-color: var(--input-focus-ring-color)
-  );
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--color-primary-50);
+
+  &:hover:not(:disabled) {
+    background-color: transparent;
+    border-color: transparent;
+    color: var(--color-primary-60);
+  }
+
+  &:focus:not(:disabled) {
+    background-color: transparent;
+    border-color: transparent;
+    color: var(--color-primary-60);
+    box-shadow: 0 0 0 var(--focus-ring-width)
+      hsla(var(--color-primary-hue), var(--color-primary-saturation), 50%, var(--focus-ring-alpha));
+  }
+
+  &:active:not(:disabled) {
+    background-color: transparent;
+    border-color: transparent;
+    color: var(--color-primary-40);
+  }
 }
 
+////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 // Block modifier
+////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
 .sl-button--block {
   width: 100%;
 }
 
+////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 // Size modifiers
+////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
 .sl-button--small {
-  font-size: var(--input-font-size--small);
-  height: var(--input-height--small);
-  line-height: calc(var(--input-height--small) - var(--input-border-width) * 2);
-  border-radius: var(--input-border-radius--small);
+  font-size: var(--form-control-font-size--small);
+  height: var(--form-control-height--small);
+  line-height: calc(var(--form-control-height--small) - var(--form-control-border-width) * 2);
+  border-radius: var(--form-control-border-radius--small);
   padding: 0 var(--button-padding-x--small);
 }
 
 .sl-button--medium {
-  font-size: var(--input-font-size--medium);
-  height: var(--input-height--medium);
-  line-height: calc(var(--input-height--medium) - var(--input-border-width) * 2);
-  border-radius: var(--input-border-radius--medium);
+  font-size: var(--form-control-font-size--medium);
+  height: var(--form-control-height--medium);
+  line-height: calc(var(--form-control-height--medium) - var(--form-control-border-width) * 2);
+  border-radius: var(--form-control-border-radius--medium);
   padding: 0 var(--button-padding-x--medium);
 }
 
 .sl-button--large {
-  font-size: var(--input-font-size--large);
-  height: var(--input-height--large);
-  line-height: calc(var(--input-height--large) - var(--input-border-width) * 2);
-  border-radius: var(--input-border-radius--large);
+  font-size: var(--form-control-font-size--large);
+  height: var(--form-control-height--large);
+  line-height: calc(var(--form-control-height--large) - var(--form-control-border-width) * 2);
+  border-radius: var(--form-control-border-radius--large);
   padding: 0 var(--button-padding-x--large);
 }
 
+////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 // Round modifier
+////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
 .sl-button--round {
   &.sl-button--small {
-    border-radius: var(--input-height--small);
+    border-radius: var(--form-control-height--small);
   }
 
   &.sl-button--medium {
-    border-radius: var(--input-height--medium);
+    border-radius: var(--form-control-height--medium);
   }
 
   &.sl-button--large {
-    border-radius: var(--input-height--large);
+    border-radius: var(--form-control-height--large);
   }
 }
 
+////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 // Circle modifier
+////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
 .sl-button--circle {
   padding-left: 0;
   padding-right: 0;
 
   &.sl-button--small {
-    width: var(--input-height--small);
+    width: var(--form-control-height--small);
     border-radius: 50%;
   }
 
   &.sl-button--medium {
-    width: var(--input-height--medium);
+    width: var(--form-control-height--medium);
     border-radius: 50%;
   }
 
   &.sl-button--large {
-    width: var(--input-height--large);
+    width: var(--form-control-height--large);
     border-radius: 50%;
   }
 
@@ -383,12 +279,11 @@
 
 // Caret modifier
 .sl-button--caret {
-  .sl-button__suffix,
-  .sl-button__caret:empty {
+  .sl-button__suffix {
     display: none;
   }
 
-  .sl-button__caret:not(:empty) {
+  .sl-button__caret {
     position: relative;
     margin-left: 0.75em;
     margin-right: 0;
@@ -403,7 +298,10 @@
   }
 }
 
+////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 // Loading modifier
+////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
 .sl-button--loading {
   position: relative;
   pointer-events: none;
@@ -427,3 +325,12 @@
     animation: var(--button-spinner-animation);
   }
 }
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/components/dropdown-divider/dropdown-divider.scss b/src/components/dropdown-divider/dropdown-divider.scss
index 2a9c585a0..bfc0d6d37 100644
--- a/src/components/dropdown-divider/dropdown-divider.scss
+++ b/src/components/dropdown-divider/dropdown-divider.scss
@@ -1,14 +1,10 @@
 @import 'reset';
-@import 'variables';
-
-$dropdown-divider-border-color: tint($form-control-border-color, 50%) !default;
-$dropdown-divider-margin-y: 10px !default;
 
 :host {
   display: block;
 }
 
 .sl-dropdown-divider {
-  border-top: solid 1px $dropdown-divider-border-color;
-  margin: $dropdown-divider-margin-y 0;
+  border-top: solid 1px var(--menu-divider-border-color);
+  margin: var(--menu-padding-y) 0;
 }
diff --git a/src/components/dropdown-item/dropdown-item.scss b/src/components/dropdown-item/dropdown-item.scss
index 6e9ca0819..c38cd762d 100644
--- a/src/components/dropdown-item/dropdown-item.scss
+++ b/src/components/dropdown-item/dropdown-item.scss
@@ -1,9 +1,4 @@
 @import 'reset';
-@import 'variables';
-
-$dropdown-item-padding-x: $menu-padding-x !default;
-$dropdown-item-padding-y: $menu-padding-y !default;
-$dropdown-item-transition-speed: 100ms !default;
 
 :host {
   display: block;
@@ -13,20 +8,23 @@ $dropdown-item-transition-speed: 100ms !default;
   position: relative;
   display: flex;
   align-items: center;
-  padding: $dropdown-item-padding-y $dropdown-item-padding-x;
-  transition: $dropdown-item-transition-speed color, $dropdown-item-transition-speed background-color,
-    $dropdown-item-transition-speed fill;
+  background-color: var(--menu-item-background-color);
+  color: var(--menu-item-color);
+  padding: var(--menu-padding-y) var(--menu-padding-x);
+  transition: var(--menu-item-transition-speed) color, var(--menu-item-transition-speed) background-color,
+    var(--menu-item-transition-speed) fill;
   user-select: none;
   white-space: nowrap;
   cursor: pointer;
 
   &.sl-dropdown-item--active:not(.sl-dropdown-item--disabled) {
-    background-color: $menu-background-color--hover;
-    color: $menu-color--hover;
+    background-color: var(--menu-item-background-color--active);
+    color: var(--menu-item-color--active);
   }
 
   &.sl-dropdown-item--disabled {
-    color: $menu-color--disabled;
+    background-color: var(--menu-item-background-color--disabled);
+    color: var(--menu-item-color--disabled);
     cursor: not-allowed;
   }
 
diff --git a/src/components/dropdown/dropdown.scss b/src/components/dropdown/dropdown.scss
index c99e46881..7bf27936f 100644
--- a/src/components/dropdown/dropdown.scss
+++ b/src/components/dropdown/dropdown.scss
@@ -1,13 +1,4 @@
 @import 'reset';
-@import 'variables';
-
-$dropdown-font-family: $menu-font-family !default;
-$dropdown-font-weight: $menu-font-weight !default;
-$dropdown-font-size: $menu-font-size !default;
-$dropdown-border-color: $menu-border-color !default;
-$dropdown-background-color: $menu-background-color !default;
-$dropdown-box-shadow: $menu-box-shadow !default;
-$dropdown-color: $menu-color !default;
 
 :host {
   display: inline-block;
@@ -26,19 +17,18 @@ $dropdown-color: $menu-color !default;
   position: absolute;
   z-index: 9999;
   max-height: 50vh;
-  font-family: $dropdown-font-family;
-  font-weight: $dropdown-font-weight;
-  font-size: $dropdown-font-size;
-  color: $dropdown-color;
-  background-color: $dropdown-background-color;
-  border: solid 1px $dropdown-border-color;
+  font-family: var(--menu-font-family);
+  font-weight: var(--menu-font-weight);
+  font-size: var(--menu-font-size);
+  background-color: var(--menu-background-color);
+  border: solid 1px var(--menu-border-color);
   border-radius: 4px;
-  box-shadow: $dropdown-box-shadow;
-  padding-top: $menu-padding-y;
-  padding-bottom: $menu-padding-y;
+  box-shadow: var(--menu-box-shadow);
+  padding-top: var(--menu-padding-y);
+  padding-bottom: var(--menu-padding-y);
   opacity: 0;
   overflow-y: auto;
-  transition: 100ms opacity;
+  transition: var(--menu-transition-speed) opacity;
 }
 
 .sl-dropdown--open .sl-dropdown__menu {
diff --git a/src/components/spinner/spinner.scss b/src/components/spinner/spinner.scss
index 6fb821d1f..67da4780b 100644
--- a/src/components/spinner/spinner.scss
+++ b/src/components/spinner/spinner.scss
@@ -1,19 +1,9 @@
 @import 'reset';
-@import 'variables';
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
 
 :host {
   --spinner-animation: 1s linear infinite spin;
   --spinner-border-width: 2px;
-  --spinner-color: var(--color-primary);
+  --spinner-color: var(--color-primary-50);
   --spinner-margin-x: 4px;
 
   display: inline-block;
@@ -28,3 +18,12 @@
   vertical-align: middle;
   animation: var(--spinner-animation);
 }
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/index.html b/src/index.html
index 0961a2dc8..6614ef39b 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,12 +1,14 @@
 <!DOCTYPE html>
 <html dir="ltr" lang="en">
   <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
-    <meta name="description" content="For when you don’t need the whole boot." />
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
+    <meta name="description" content="For when you don’t need the whole boot.">
     <title>Shoelace: A forward-thinking component library built with Web Components</title>
-    <link rel="icon" href="/assets/images/favicon.png" />
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
+    <link rel="icon" href="/assets/images/favicon.png">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+
+    <link rel="stylesheet" href="/assets/themes/default.theme.css">
     <script type="module" src="/build/shoelace.esm.js"></script>
     <script nomodule src="/build/shoelace.js"></script>
 
@@ -37,7 +39,7 @@
     </style>
   </head>
   <body>
-    <h1><img src="/assets/images/wordmark.svg" alt="Shoelace" /></h1>
+    <h1><img src="/assets/images/wordmark.svg" alt="Shoelace"></h1>
 
     <h2>Button</h2>
 
diff --git a/src/styles/functions.scss b/src/styles/functions.scss
deleted file mode 100644
index 76807d9e1..000000000
--- a/src/styles/functions.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-// Slightly darken a color
-@function shade($color, $percentage) {
-  @return mix(black, $color, $percentage);
-}
-
-// Slightly lighten a color
-@function tint($color, $percentage) {
-  @return mix(white, $color, $percentage);
-}
diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss
deleted file mode 100644
index dbee5d5a7..000000000
--- a/src/styles/mixins.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-// Given a map, outputs a list of custom properties scoped to the provided selector
-@mixin generateCustomProperties($map, $prefix: '') {
-  @each $key, $value in $map {
-    --#{$prefix}#{$key}: #{$value};
-  }
-}
diff --git a/src/styles/reset.scss b/src/styles/reset.scss
index 3fa38aad9..dbcd1c820 100644
--- a/src/styles/reset.scss
+++ b/src/styles/reset.scss
@@ -2,9 +2,9 @@
 :host {
   box-sizing: border-box;
 
-  *,
-  *:before,
-  *:after {
+  & *,
+  & *:before,
+  & *:after {
     box-sizing: inherit;
   }
 }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
deleted file mode 100644
index 7167c2521..000000000
--- a/src/styles/variables.scss
+++ /dev/null
@@ -1,288 +0,0 @@
-@import 'functions';
-@import 'mixins';
-
-$theme-colors: (
-  primary: #409eff,
-  success: #67c23a,
-  info: #909399,
-  warning: #e6a23c,
-  danger: #f56c6c,
-  white: #fff,
-  black: #00070b
-);
-
-$gray-colors: (
-  100: tint(map-get($theme-colors, black), 10%),
-  150: tint(map-get($theme-colors, black), 15%),
-  200: tint(map-get($theme-colors, black), 20%),
-  250: tint(map-get($theme-colors, black), 25%),
-  300: tint(map-get($theme-colors, black), 30%),
-  350: tint(map-get($theme-colors, black), 35%),
-  400: tint(map-get($theme-colors, black), 40%),
-  450: tint(map-get($theme-colors, black), 45%),
-  500: tint(map-get($theme-colors, black), 50%),
-  550: tint(map-get($theme-colors, black), 55%),
-  600: tint(map-get($theme-colors, black), 60%),
-  650: tint(map-get($theme-colors, black), 65%),
-  700: tint(map-get($theme-colors, black), 70%),
-  750: tint(map-get($theme-colors, black), 75%),
-  800: tint(map-get($theme-colors, black), 80%),
-  850: tint(map-get($theme-colors, black), 85%),
-  900: tint(map-get($theme-colors, black), 90%)
-);
-
-$primary-colors: (
-  100: shade(map-get($theme-colors, primary), 90%),
-  150: shade(map-get($theme-colors, primary), 78.75%),
-  200: shade(map-get($theme-colors, primary), 67.5%),
-  250: shade(map-get($theme-colors, primary), 56.25%),
-  300: shade(map-get($theme-colors, primary), 45%),
-  350: shade(map-get($theme-colors, primary), 33.75%),
-  400: shade(map-get($theme-colors, primary), 22.5%),
-  450: shade(map-get($theme-colors, primary), 11.25%),
-  500: map-get($theme-colors, primary),
-  550: tint(map-get($theme-colors, primary), 11.25%),
-  600: tint(map-get($theme-colors, primary), 22.5%),
-  650: tint(map-get($theme-colors, primary), 33.75%),
-  700: tint(map-get($theme-colors, primary), 45%),
-  750: tint(map-get($theme-colors, primary), 56.25%),
-  800: tint(map-get($theme-colors, primary), 67.5%),
-  850: tint(map-get($theme-colors, primary), 78.75%),
-  900: tint(map-get($theme-colors, primary), 90%)
-);
-
-$success-colors: (
-  100: shade(map-get($theme-colors, success), 90%),
-  150: shade(map-get($theme-colors, success), 78.75%),
-  200: shade(map-get($theme-colors, success), 67.5%),
-  250: shade(map-get($theme-colors, success), 56.25%),
-  300: shade(map-get($theme-colors, success), 45%),
-  350: shade(map-get($theme-colors, success), 33.75%),
-  400: shade(map-get($theme-colors, success), 22.5%),
-  450: shade(map-get($theme-colors, success), 11.25%),
-  500: map-get($theme-colors, success),
-  550: tint(map-get($theme-colors, success), 11.25%),
-  600: tint(map-get($theme-colors, success), 22.5%),
-  650: tint(map-get($theme-colors, success), 33.75%),
-  700: tint(map-get($theme-colors, success), 45%),
-  750: tint(map-get($theme-colors, success), 56.25%),
-  800: tint(map-get($theme-colors, success), 67.5%),
-  850: tint(map-get($theme-colors, success), 78.75%),
-  900: tint(map-get($theme-colors, success), 90%)
-);
-
-$info-colors: (
-  100: shade(map-get($theme-colors, info), 90%),
-  150: shade(map-get($theme-colors, info), 78.75%),
-  200: shade(map-get($theme-colors, info), 67.5%),
-  250: shade(map-get($theme-colors, info), 56.25%),
-  300: shade(map-get($theme-colors, info), 45%),
-  350: shade(map-get($theme-colors, info), 33.75%),
-  400: shade(map-get($theme-colors, info), 22.5%),
-  450: shade(map-get($theme-colors, info), 11.25%),
-  500: map-get($theme-colors, info),
-  550: tint(map-get($theme-colors, info), 11.25%),
-  600: tint(map-get($theme-colors, info), 22.5%),
-  650: tint(map-get($theme-colors, info), 33.75%),
-  700: tint(map-get($theme-colors, info), 45%),
-  750: tint(map-get($theme-colors, info), 56.25%),
-  800: tint(map-get($theme-colors, info), 67.5%),
-  850: tint(map-get($theme-colors, info), 78.75%),
-  900: tint(map-get($theme-colors, info), 90%)
-);
-
-$warning-colors: (
-  100: shade(map-get($theme-colors, warning), 90%),
-  150: shade(map-get($theme-colors, warning), 78.75%),
-  200: shade(map-get($theme-colors, warning), 67.5%),
-  250: shade(map-get($theme-colors, warning), 56.25%),
-  300: shade(map-get($theme-colors, warning), 45%),
-  350: shade(map-get($theme-colors, warning), 33.75%),
-  400: shade(map-get($theme-colors, warning), 22.5%),
-  450: shade(map-get($theme-colors, warning), 11.25%),
-  500: map-get($theme-colors, warning),
-  550: tint(map-get($theme-colors, warning), 11.25%),
-  600: tint(map-get($theme-colors, warning), 22.5%),
-  650: tint(map-get($theme-colors, warning), 33.75%),
-  700: tint(map-get($theme-colors, warning), 45%),
-  750: tint(map-get($theme-colors, warning), 56.25%),
-  800: tint(map-get($theme-colors, warning), 67.5%),
-  850: tint(map-get($theme-colors, warning), 78.75%),
-  900: tint(map-get($theme-colors, warning), 90%)
-);
-
-$danger-colors: (
-  100: shade(map-get($theme-colors, danger), 90%),
-  150: shade(map-get($theme-colors, danger), 78.75%),
-  200: shade(map-get($theme-colors, danger), 67.5%),
-  250: shade(map-get($theme-colors, danger), 56.25%),
-  300: shade(map-get($theme-colors, danger), 45%),
-  350: shade(map-get($theme-colors, danger), 33.75%),
-  400: shade(map-get($theme-colors, danger), 22.5%),
-  450: shade(map-get($theme-colors, danger), 11.25%),
-  500: map-get($theme-colors, danger),
-  550: tint(map-get($theme-colors, danger), 11.25%),
-  600: tint(map-get($theme-colors, danger), 22.5%),
-  650: tint(map-get($theme-colors, danger), 33.75%),
-  700: tint(map-get($theme-colors, danger), 45%),
-  750: tint(map-get($theme-colors, danger), 56.25%),
-  800: tint(map-get($theme-colors, danger), 67.5%),
-  850: tint(map-get($theme-colors, danger), 78.75%),
-  900: tint(map-get($theme-colors, danger), 90%)
-);
-
-$focus-colors: (
-  primary: rgba(map-get($theme-colors, primary), 0.33),
-  success: rgba(map-get($theme-colors, success), 0.33),
-  info: rgba(map-get($theme-colors, info), 0.33),
-  warning: rgba(map-get($theme-colors, warning), 0.33),
-  danger: rgba(map-get($theme-colors, danger), 0.33),
-  white: rgba(map-get($theme-colors, white), 0.33),
-  black: rgba(map-get($theme-colors, black), 0.33)
-);
-
-$fonts: (
-  sans-serif:
-    "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif",
-  serif: "Cambria, Cochin, Georgia, Times, 'Times New Roman', serif",
-  monospace: "Menlo, Monaco, 'Courier New', monospace",
-  weight--light: 300,
-  weight--normal: 400,
-  weight--bold: 500,
-  color-primary: map-get($gray-colors, 200),
-  color-secondary: map-get($gray-colors, 600)
-);
-
-$inputs: (
-  font-family: map-get($fonts, sans-serif),
-  font-weight: map-get($fonts, weight--normal),
-  font-size--small: 12px,
-  font-size--medium: 14px,
-  font-size--large: 16px,
-  color: map-get($gray-colors, 400),
-  height--small: 32px,
-  height--medium: 38px,
-  height--large: 44px,
-  border-width: 1px,
-  border-color: map-get($gray-colors, 800),
-  border-color--hover: map-get($gray-colors, 700),
-  border-color--focus: map-get($theme-colors, primary),
-  border-color--disabled: map-get($gray-colors, 800),
-  border-radius--small: 4px,
-  border-radius--medium: 4px,
-  border-radius--large: 4px,
-  background-color: map-get($theme-colors, white),
-  background-color--hover: map-get($theme-colors, white),
-  background-color--focus: map-get($theme-colors, white),
-  background-color-disabled: map-get($gray-colors, 900),
-  focus-ring-width: 2px,
-  focus-ring-color: map-get($focus-colors, primary),
-  placeholder-color: map-get($gray-colors, 700),
-  transition-speed: 150ms
-);
-
-$menus: (
-  font-family: map-get($fonts, sans-serif),
-  font-weight: map-get($fonts, weight--normal),
-  font-size: 16px,
-  border-color: map-get($gray-colors, 900),
-  background-color: map-get($theme-colors, white),
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1),
-  color: map-get($gray-colors, 400),
-  color--selected: map-get($theme-colors, primary),
-  color--disabled: map-get($gray-colors, 700),
-  padding-x: 30px,
-  padding-y: 10px
-);
-
-// Generate custom styles scoped to each component's host element
-:host {
-  @include generateCustomProperties($theme-colors, 'color-');
-  @include generateCustomProperties($gray-colors, 'color-gray-');
-  @include generateCustomProperties($primary-colors, 'color-primary-');
-  @include generateCustomProperties($success-colors, 'color-success-');
-  @include generateCustomProperties($info-colors, 'color-info-');
-  @include generateCustomProperties($warning-colors, 'color-warning-');
-  @include generateCustomProperties($danger-colors, 'color-danger-');
-  @include generateCustomProperties($focus-colors, 'color-focus-');
-  @include generateCustomProperties($fonts, 'font-');
-  @include generateCustomProperties($inputs, 'input-');
-  @include generateCustomProperties($menus, 'menu-');
-}
-
-// TODO: remove all SCSS vars!
-
-////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-// Colors
-////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-
-$color-primary: #409eff !default;
-$color-success: #67c23a !default;
-$color-info: #909399 !default;
-$color-warning: #e6a23c !default;
-$color-danger: #f56c6c !default;
-$color-white: #fff !default;
-$color-black: #00070b !default;
-
-$color-gray-10: tint($color-black, 10%) !default;
-$color-gray-20: tint($color-black, 20%) !default;
-$color-gray-30: tint($color-black, 30%) !default;
-$color-gray-40: tint($color-black, 40%) !default;
-$color-gray-50: tint($color-black, 50%) !default;
-$color-gray-60: tint($color-black, 60%) !default;
-$color-gray-70: tint($color-black, 70%) !default;
-$color-gray-80: tint($color-black, 80%) !default;
-$color-gray-90: tint($color-black, 90%) !default;
-
-////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-// Fonts
-////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-
-$font-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
-  'Helvetica Neue', sans-serif !default;
-$font-serif: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif !default;
-$font-monospace: Menlo, Monaco, Courier New, monospace !default;
-$font-size: 16px !default;
-$font-weight-light: 300 !default;
-$font-weight-normal: 400 !default;
-$font-weight-bold: 500 !default;
-
-$text-color-primary: $color-gray-20 !default;
-$text-color-secondary: $color-gray-60 !default;
-
-////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-// Form controls (inputs, textareas, buttons, et al)
-////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-
-$form-control-font-family: $font-sans-serif !default;
-$form-control-font-weight: $font-weight-normal !default;
-
-$form-control-font-size--small: 12px !default;
-$form-control-font-size--medium: 14px !default;
-$form-control-font-size--large: 16px !default;
-
-$form-control-height--small: 32px !default;
-$form-control-height--medium: 38px !default;
-$form-control-height--large: 44px !default;
-
-$form-control-border-color: tint($color-black, 85%) !default;
-$form-control-color: $color-gray-40 !default;
-
-$form-control-transition-speed: 150ms;
-
-////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-// Menus (dropdowns, selects, et al)
-////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-
-$menu-font-family: $font-sans-serif !default;
-$menu-font-weight: $font-weight-normal !default;
-$menu-font-size: $font-size !default;
-$menu-border-color: tint($form-control-border-color, 50%) !default;
-$menu-background-color: $color-white !default;
-$menu-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1) !default;
-$menu-color: $color-gray-40 !default;
-$menu-background-color--hover: tint($color-primary, 90%) !default;
-$menu-color--hover: $color-primary !default;
-$menu-color--disabled: $color-gray-70 !default;
-$menu-padding-x: 30px !default;
-$menu-padding-y: 10px !default;
diff --git a/src/components/checkbox/checkbox.scss b/todo/checkbox/checkbox.scss
similarity index 100%
rename from src/components/checkbox/checkbox.scss
rename to todo/checkbox/checkbox.scss
diff --git a/src/components/checkbox/checkbox.tsx b/todo/checkbox/checkbox.tsx
similarity index 100%
rename from src/components/checkbox/checkbox.tsx
rename to todo/checkbox/checkbox.tsx
diff --git a/src/components/input/input.scss b/todo/input/input.scss
similarity index 100%
rename from src/components/input/input.scss
rename to todo/input/input.scss
diff --git a/src/components/input/input.tsx b/todo/input/input.tsx
similarity index 100%
rename from src/components/input/input.tsx
rename to todo/input/input.tsx
diff --git a/src/components/radio/radio.scss b/todo/radio/radio.scss
similarity index 100%
rename from src/components/radio/radio.scss
rename to todo/radio/radio.scss
diff --git a/src/components/radio/radio.tsx b/todo/radio/radio.tsx
similarity index 100%
rename from src/components/radio/radio.tsx
rename to todo/radio/radio.tsx
diff --git a/src/components/range/range.scss b/todo/range/range.scss
similarity index 100%
rename from src/components/range/range.scss
rename to todo/range/range.scss
diff --git a/src/components/range/range.tsx b/todo/range/range.tsx
similarity index 100%
rename from src/components/range/range.tsx
rename to todo/range/range.tsx
diff --git a/src/components/switch/switch.scss b/todo/switch/switch.scss
similarity index 100%
rename from src/components/switch/switch.scss
rename to todo/switch/switch.scss
diff --git a/src/components/switch/switch.tsx b/todo/switch/switch.tsx
similarity index 100%
rename from src/components/switch/switch.tsx
rename to todo/switch/switch.tsx
diff --git a/src/components/textarea/textarea.scss b/todo/textarea/textarea.scss
similarity index 100%
rename from src/components/textarea/textarea.scss
rename to todo/textarea/textarea.scss
diff --git a/src/components/textarea/textarea.tsx b/todo/textarea/textarea.tsx
similarity index 100%
rename from src/components/textarea/textarea.tsx
rename to todo/textarea/textarea.tsx
diff --git a/src/components/tooltip/tooltip.scss b/todo/tooltip/tooltip.scss
similarity index 100%
rename from src/components/tooltip/tooltip.scss
rename to todo/tooltip/tooltip.scss
diff --git a/src/components/tooltip/tooltip.tsx b/todo/tooltip/tooltip.tsx
similarity index 100%
rename from src/components/tooltip/tooltip.tsx
rename to todo/tooltip/tooltip.tsx