diff --git a/docs/assets/styles/base.css b/docs/assets/styles/base.css
index aaba6319..5843d59a 100644
--- a/docs/assets/styles/base.css
+++ b/docs/assets/styles/base.css
@@ -13,8 +13,8 @@ body {
   line-height: 24px;
   font-size: 16px;
   font-weight: 400;
-  color: var(--c-text-light-1);
-  background-color: var(--c-white);
+  color: var(--c-text-1);
+  background-color: var(--c-bg);
   direction: ltr;
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -152,17 +152,17 @@ table {
 
 input:-ms-input-placeholder,
 textarea:-ms-input-placeholder {
-  color: var(--c-text-light-3);
+  color: var(--c-text-3);
 }
 
 input::-ms-input-placeholder,
 textarea::-ms-input-placeholder {
-  color: var(--c-text-light-3);
+  color: var(--c-text-3);
 }
 
 input::placeholder,
 textarea::placeholder {
-  color: var(--c-text-light-3);
+  color: var(--c-text-3);
 }
 
 textarea {
diff --git a/docs/assets/styles/variables.css b/docs/assets/styles/variables.css
index 9cfed28c..608c881a 100644
--- a/docs/assets/styles/variables.css
+++ b/docs/assets/styles/variables.css
@@ -1,126 +1,5 @@
-:root {
-
-  /**
-   * Colors
-   * --------------------------------------------------------------------- */
-
-  --c-white: #ffffff;
-  --c-white-soft: #fafafa;
-  --c-white-mute: #f2f2f2;
-
-  --c-black: #000000;
-  --c-black-soft: #1c1c1e;
-  --c-black-mute: #2c2c2e;
-
-  --c-black-elevated: #1c1c1e;
-  --c-black-elevated-soft: #2c2c2e;
-  --c-black-elevated-mute: #3a3a3c;
-
-  --c-gray: #8E8E93;
-
-  --c-gray-dark-1: #636366;
-  --c-gray-dark-2: #48484a;
-  --c-gray-dark-3: #3a3a3c;
-  --c-gray-dark-4: #2c2c2e;
-  --c-gray-dark-5: #1c1c1e;
-
-  --c-gray-light-1: #aeaeb2;
-  --c-gray-light-2: #c7c7cc;
-  --c-gray-light-3: #d1d1d6;
-  --c-gray-light-4: #e5e5ea;
-  --c-gray-light-5: #f2f2f7;
-
-  --c-divider-light: rgba(60, 60, 67, .29);
-  --c-divider-lighter: rgba(60, 60, 67, .12);
-
-  --c-divider-dark: rgba(84, 84, 88, .65);
-  --c-divider-darker: rgba(84, 84, 88, .65);
-
-  --c-text-light-1: var(--c-black);
-  --c-text-light-2: rgba(60, 60, 67, .6);
-  --c-text-light-3: rgba(60, 60, 67, .3);
-  --c-text-light-4: rgba(60, 60, 67, .18);
-
-  --c-text-dark-1: var(--c-white);
-  --c-text-dark-2: rgba(235, 235, 245, .6);
-  --c-text-dark-3: rgba(235, 235, 245, .3);
-  --c-text-dark-4: rgba(235, 235, 245, .18);
-
-  --c-info: #4681c4;
-  --c-info-light: #549ced;
-  --c-info-lighter: #50a2ff;
-  --c-info-dark: #3468a3;
-  --c-info-darker: #255489;
-
-  --c-success: #00b489;
-  --c-success-light: #0fcea0;
-  --c-success-lighter: #27e8ba;
-  --c-success-dark: #068f6e;
-  --c-success-darker: #086b53;
-
-  --c-warning: #ffc517;
-  --c-warning-light: #ffe417;
-  --c-warning-lighter: #ffff17;
-  --c-warning-dark: #e0ad15;
-  --c-warning-darker: #bc9112;
-
-  --c-danger: #ed3c50;
-  --c-danger-light: #f43771;
-  --c-danger-lighter: #fd1d7c;
-  --c-danger-dark: #cd2d3f;
-  --c-danger-darker: #ab2131;
-
-  --c-alternative: #a159a2;
-  --c-alternative-light: #c05fc1;
-  --c-alternative-lighter: #db4fdd;
-  --c-alternative-dark: #823c83;
-  --c-alternative-darker: #602960;
-
-  /**
-   * Typography
-   * --------------------------------------------------------------------- */
-
-  --font-family-base: "Roboto", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif";
-  --font-family-primary: "interstate", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif";
-  --font-family-number: "Roboto", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Helvetica Neue", "Arial", "sans-serif";
-  --font-family-mono: "Source Code Pro", "Menlo", "Monaco", "Consolas", "Courier New", "monospace";
-
-  /**
-   * Z Indexes
-   * --------------------------------------------------------------------- */
-
-  --z-index-header: 1000;
-  --z-index-header-content: 1010;
-  --z-index-screen: 2000;
-  --z-index-backdrop: 3000;
-  --z-index-modal: 3010;
-  --z-index-snackbar: 4000;
-
-  /**
-   * Shadows
-   * --------------------------------------------------------------------- */
-
-  --shadow-depth-1: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .06);
-  --shadow-depth-2: 0 3px 6px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .23);
-  --shadow-depth-3: 0 12px 32px rgba(0, 0, 0, .10), 0 2px 6px rgba(0, 0, 0, .08);
-  --shadow-depth-4: 0 14px 28px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .22);
-  --shadow-depth-5: 0 18px 56px rgba(0, 0, 0, .16), 0 4px 12px rgba(0, 0, 0, .16);
-
-  --shadow-depth-edge-1: 0 2px 2px rgba(0, 0, 0, .08);
-
-  /**
-   * Easings
-   * --------------------------------------------------------------------- */
-
-  --ease-in-quint: cubic-bezier(.755, .05, .855, .06);
-  --ease-in-back: cubic-bezier(1, -.75, 1, 1);
-
-  --ease-out-quint: cubic-bezier(.23, 1, .32, 1);
-  --ease-out-expo: cubic-bezier(.19, 1, .22, 1);
-  --ease-out-back: cubic-bezier(.175, .885, .320, 1.275);
-  --ease-out-back-quint: cubic-bezier(.175, .885, .280, 1.5);
-
-  --ease-in-out-quint: cubic-bezier(.86, 0, .07, 1);
-  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
-
-}
+@import "./variables/colors";
+@import "./variables/easings";
+@import "./variables/shadows";
+@import "./variables/typography";
+@import "./variables/z-indexes";
diff --git a/docs/assets/styles/variables/colors.css b/docs/assets/styles/variables/colors.css
new file mode 100644
index 00000000..4e460f6a
--- /dev/null
+++ b/docs/assets/styles/variables/colors.css
@@ -0,0 +1,101 @@
+:root {
+  --c-white: #ffffff;
+  --c-white-soft: #fafafa;
+  --c-white-mute: #f2f2f2;
+
+  --c-black: #000000;
+  --c-black-soft: #1c1c1e;
+  --c-black-mute: #2c2c2e;
+
+  --c-black-elevated: #1c1c1e;
+  --c-black-elevated-soft: #2c2c2e;
+  --c-black-elevated-mute: #3a3a3c;
+
+  --c-gray: #8E8E93;
+
+  --c-gray-dark-1: #636366;
+  --c-gray-dark-2: #48484a;
+  --c-gray-dark-3: #3a3a3c;
+  --c-gray-dark-4: #2c2c2e;
+  --c-gray-dark-5: #1c1c1e;
+
+  --c-gray-light-1: #aeaeb2;
+  --c-gray-light-2: #c7c7cc;
+  --c-gray-light-3: #d1d1d6;
+  --c-gray-light-4: #e5e5ea;
+  --c-gray-light-5: #f2f2f7;
+
+  --c-divider-light: rgba(60, 60, 67, .29);
+  --c-divider-lighter: rgba(60, 60, 67, .12);
+
+  --c-divider-dark: rgba(84, 84, 88, .65);
+  --c-divider-darker: rgba(84, 84, 88, .65);
+
+  --c-text-light-1: var(--c-black);
+  --c-text-light-2: rgba(60, 60, 67, .6);
+  --c-text-light-3: rgba(60, 60, 67, .3);
+  --c-text-light-4: rgba(60, 60, 67, .18);
+
+  --c-text-dark-1: var(--c-white);
+  --c-text-dark-2: rgba(235, 235, 245, .6);
+  --c-text-dark-3: rgba(235, 235, 245, .3);
+  --c-text-dark-4: rgba(235, 235, 245, .18);
+
+  --c-info: #4681c4;
+  --c-info-light: #549ced;
+  --c-info-lighter: #50a2ff;
+  --c-info-dark: #3468a3;
+  --c-info-darker: #255489;
+
+  --c-success: #00b489;
+  --c-success-light: #0fcea0;
+  --c-success-lighter: #27e8ba;
+  --c-success-dark: #068f6e;
+  --c-success-darker: #086b53;
+
+  --c-warning: #ffc517;
+  --c-warning-light: #ffe417;
+  --c-warning-lighter: #ffff17;
+  --c-warning-dark: #e0ad15;
+  --c-warning-darker: #bc9112;
+
+  --c-danger: #ed3c50;
+  --c-danger-light: #f43771;
+  --c-danger-lighter: #fd1d7c;
+  --c-danger-dark: #cd2d3f;
+  --c-danger-darker: #ab2131;
+
+  --c-alternative: #a159a2;
+  --c-alternative-light: #c05fc1;
+  --c-alternative-lighter: #db4fdd;
+  --c-alternative-dark: #823c83;
+  --c-alternative-darker: #602960;
+}
+
+:root {
+  --c-bg: var(--c-white);
+  --c-bg-soft: var(--c-white-soft);
+  --c-bg-mute: var(--c-white-mute);
+
+  --c-divider: var(--c-divider-light);
+  --c-divider-light: var(--c-divider-lighter);
+
+  --c-text-1: var(--c-text-light-1);
+  --c-text-2: var(--c-text-light-2);
+  --c-text-3: var(--c-text-light-3);
+  --c-text-4: var(--c-text-light-4);
+}
+
+.dark-mode {
+  --c-bg: var(--c-black);
+  --c-bg-soft: var(--c-black-soft);
+  --c-bg-mute: var(--c-black-mute);
+
+  --c-divider: var(--c-divider-dark);
+  --c-divider-light: var(--c-divider-darker);
+
+  --c-text-1: var(--c-text-dark-1);
+  --c-text-2: var(--c-text-dark-2);
+  --c-text-3: var(--c-text-dark-3);
+  --c-text-4: var(--c-text-dark-4);
+}
diff --git a/docs/assets/styles/variables/easings.css b/docs/assets/styles/variables/easings.css
new file mode 100644
index 00000000..3f4345e1
--- /dev/null
+++ b/docs/assets/styles/variables/easings.css
@@ -0,0 +1,12 @@
+:root {
+  --ease-in-quint: cubic-bezier(.755, .05, .855, .06);
+  --ease-in-back: cubic-bezier(1, -.75, 1, 1);
+
+  --ease-out-quint: cubic-bezier(.23, 1, .32, 1);
+  --ease-out-expo: cubic-bezier(.19, 1, .22, 1);
+  --ease-out-back: cubic-bezier(.175, .885, .320, 1.275);
+  --ease-out-back-quint: cubic-bezier(.175, .885, .280, 1.5);
+
+  --ease-in-out-quint: cubic-bezier(.86, 0, .07, 1);
+  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
+}
diff --git a/docs/assets/styles/variables/shadows.css b/docs/assets/styles/variables/shadows.css
new file mode 100644
index 00000000..6301e7a3
--- /dev/null
+++ b/docs/assets/styles/variables/shadows.css
@@ -0,0 +1,6 @@
+:root {
+  --z-index-screen: 1000;
+  --z-index-backdrop: 2000;
+  --z-index-modal: 2010;
+  --z-index-snackbar: 3000;
+}
diff --git a/docs/assets/styles/variables/typography.css b/docs/assets/styles/variables/typography.css
new file mode 100644
index 00000000..eaca83c3
--- /dev/null
+++ b/docs/assets/styles/variables/typography.css
@@ -0,0 +1,6 @@
+:root {
+  --font-family-base: "Roboto", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Helvetica Neue", "Arial", "sans-serif";
+  --font-family-primary: "interstate", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif";
+  --font-family-number: "Roboto", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Helvetica Neue", "Arial", "sans-serif";
+  --font-family-mono: "Source Code Pro", "Menlo", "Monaco", "Consolas", "Courier New", "monospace";
+}
diff --git a/docs/assets/styles/variables/z-indexes.css b/docs/assets/styles/variables/z-indexes.css
new file mode 100644
index 00000000..6301e7a3
--- /dev/null
+++ b/docs/assets/styles/variables/z-indexes.css
@@ -0,0 +1,6 @@
+:root {
+  --z-index-screen: 1000;
+  --z-index-backdrop: 2000;
+  --z-index-modal: 2010;
+  --z-index-snackbar: 3000;
+}
diff --git a/lib/assets/styles/base.css b/lib/assets/styles/base.css
index aaba6319..5843d59a 100644
--- a/lib/assets/styles/base.css
+++ b/lib/assets/styles/base.css
@@ -13,8 +13,8 @@ body {
   line-height: 24px;
   font-size: 16px;
   font-weight: 400;
-  color: var(--c-text-light-1);
-  background-color: var(--c-white);
+  color: var(--c-text-1);
+  background-color: var(--c-bg);
   direction: ltr;
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -152,17 +152,17 @@ table {
 
 input:-ms-input-placeholder,
 textarea:-ms-input-placeholder {
-  color: var(--c-text-light-3);
+  color: var(--c-text-3);
 }
 
 input::-ms-input-placeholder,
 textarea::-ms-input-placeholder {
-  color: var(--c-text-light-3);
+  color: var(--c-text-3);
 }
 
 input::placeholder,
 textarea::placeholder {
-  color: var(--c-text-light-3);
+  color: var(--c-text-3);
 }
 
 textarea {
diff --git a/lib/assets/styles/bootstrap.css b/lib/assets/styles/bootstrap.css
index 5115e804..200c98e4 100644
--- a/lib/assets/styles/bootstrap.css
+++ b/lib/assets/styles/bootstrap.css
@@ -1,5 +1,4 @@
 @import 'simplebar/dist/simplebar.min';
 
 @import "./variables";
-
 @import "./base";
diff --git a/lib/assets/styles/variables.css b/lib/assets/styles/variables.css
index b2f720d2..608c881a 100644
--- a/lib/assets/styles/variables.css
+++ b/lib/assets/styles/variables.css
@@ -1,124 +1,5 @@
-:root {
-
-  /**
-   * Colors
-   * --------------------------------------------------------------------- */
-
-  --c-white: #ffffff;
-  --c-white-soft: #fafafa;
-  --c-white-mute: #f2f2f2;
-
-  --c-black: #000000;
-  --c-black-soft: #1c1c1e;
-  --c-black-mute: #2c2c2e;
-
-  --c-black-elevated: #1c1c1e;
-  --c-black-elevated-soft: #2c2c2e;
-  --c-black-elevated-mute: #3a3a3c;
-
-  --c-gray: #8E8E93;
-
-  --c-gray-dark-1: #636366;
-  --c-gray-dark-2: #48484a;
-  --c-gray-dark-3: #3a3a3c;
-  --c-gray-dark-4: #2c2c2e;
-  --c-gray-dark-5: #1c1c1e;
-
-  --c-gray-light-1: #aeaeb2;
-  --c-gray-light-2: #c7c7cc;
-  --c-gray-light-3: #d1d1d6;
-  --c-gray-light-4: #e5e5ea;
-  --c-gray-light-5: #f2f2f7;
-
-  --c-divider-light: rgba(60, 60, 67, .29);
-  --c-divider-lighter: rgba(60, 60, 67, .12);
-
-  --c-divider-dark: rgba(84, 84, 88, .65);
-  --c-divider-darker: rgba(84, 84, 88, .65);
-
-  --c-text-light-1: var(--c-black);
-  --c-text-light-2: rgba(60, 60, 67, .6);
-  --c-text-light-3: rgba(60, 60, 67, .3);
-  --c-text-light-4: rgba(60, 60, 67, .18);
-
-  --c-text-dark-1: var(--c-white);
-  --c-text-dark-2: rgba(235, 235, 245, .6);
-  --c-text-dark-3: rgba(235, 235, 245, .3);
-  --c-text-dark-4: rgba(235, 235, 245, .18);
-
-  --c-info: #4681c4;
-  --c-info-light: #549ced;
-  --c-info-lighter: #50a2ff;
-  --c-info-dark: #3468a3;
-  --c-info-darker: #255489;
-
-  --c-success: #00b489;
-  --c-success-light: #0fcea0;
-  --c-success-lighter: #27e8ba;
-  --c-success-dark: #068f6e;
-  --c-success-darker: #086b53;
-
-  --c-warning: #ffc517;
-  --c-warning-light: #ffe417;
-  --c-warning-lighter: #ffff17;
-  --c-warning-dark: #e0ad15;
-  --c-warning-darker: #bc9112;
-
-  --c-danger: #ed3c50;
-  --c-danger-light: #f43771;
-  --c-danger-lighter: #fd1d7c;
-  --c-danger-dark: #cd2d3f;
-  --c-danger-darker: #ab2131;
-
-  --c-alternative: #a159a2;
-  --c-alternative-light: #c05fc1;
-  --c-alternative-lighter: #db4fdd;
-  --c-alternative-dark: #823c83;
-  --c-alternative-darker: #602960;
-
-  /**
-   * Typography
-   * --------------------------------------------------------------------- */
-
-  --font-family-base: "Roboto", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Helvetica Neue", "Arial", "sans-serif";
-  --font-family-primary: "interstate", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif";
-  --font-family-number: "Roboto", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Helvetica Neue", "Arial", "sans-serif";
-  --font-family-mono: "Iconsolata", "monospace", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue";
-
-  /**
-   * Z Indexes
-   * --------------------------------------------------------------------- */
-
-  --z-index-screen: 1000;
-  --z-index-backdrop: 2000;
-  --z-index-modal: 2010;
-  --z-index-snackbar: 3000;
-
-  /**
-   * Shadows
-   * --------------------------------------------------------------------- */
-
-  --shadow-depth-1: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .06);
-  --shadow-depth-2: 0 3px 6px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .23);
-  --shadow-depth-3: 0 12px 32px rgba(0, 0, 0, .10), 0 2px 6px rgba(0, 0, 0, .08);
-  --shadow-depth-4: 0 14px 28px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .22);
-  --shadow-depth-5: 0 18px 56px rgba(0, 0, 0, .16), 0 4px 12px rgba(0, 0, 0, .16);
-
-  --shadow-depth-edge-1: 0 2px 2px rgba(0, 0, 0, .08);
-
-  /**
-   * Easings
-   * --------------------------------------------------------------------- */
-
-  --ease-in-quint: cubic-bezier(.755, .05, .855, .06);
-  --ease-in-back: cubic-bezier(1, -.75, 1, 1);
-
-  --ease-out-quint: cubic-bezier(.23, 1, .32, 1);
-  --ease-out-expo: cubic-bezier(.19, 1, .22, 1);
-  --ease-out-back: cubic-bezier(.175, .885, .320, 1.275);
-  --ease-out-back-quint: cubic-bezier(.175, .885, .280, 1.5);
-
-  --ease-in-out-quint: cubic-bezier(.86, 0, .07, 1);
-  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
-
-}
+@import "./variables/colors";
+@import "./variables/easings";
+@import "./variables/shadows";
+@import "./variables/typography";
+@import "./variables/z-indexes";
diff --git a/lib/assets/styles/variables/colors.css b/lib/assets/styles/variables/colors.css
new file mode 100644
index 00000000..4e460f6a
--- /dev/null
+++ b/lib/assets/styles/variables/colors.css
@@ -0,0 +1,101 @@
+:root {
+  --c-white: #ffffff;
+  --c-white-soft: #fafafa;
+  --c-white-mute: #f2f2f2;
+
+  --c-black: #000000;
+  --c-black-soft: #1c1c1e;
+  --c-black-mute: #2c2c2e;
+
+  --c-black-elevated: #1c1c1e;
+  --c-black-elevated-soft: #2c2c2e;
+  --c-black-elevated-mute: #3a3a3c;
+
+  --c-gray: #8E8E93;
+
+  --c-gray-dark-1: #636366;
+  --c-gray-dark-2: #48484a;
+  --c-gray-dark-3: #3a3a3c;
+  --c-gray-dark-4: #2c2c2e;
+  --c-gray-dark-5: #1c1c1e;
+
+  --c-gray-light-1: #aeaeb2;
+  --c-gray-light-2: #c7c7cc;
+  --c-gray-light-3: #d1d1d6;
+  --c-gray-light-4: #e5e5ea;
+  --c-gray-light-5: #f2f2f7;
+
+  --c-divider-light: rgba(60, 60, 67, .29);
+  --c-divider-lighter: rgba(60, 60, 67, .12);
+
+  --c-divider-dark: rgba(84, 84, 88, .65);
+  --c-divider-darker: rgba(84, 84, 88, .65);
+
+  --c-text-light-1: var(--c-black);
+  --c-text-light-2: rgba(60, 60, 67, .6);
+  --c-text-light-3: rgba(60, 60, 67, .3);
+  --c-text-light-4: rgba(60, 60, 67, .18);
+
+  --c-text-dark-1: var(--c-white);
+  --c-text-dark-2: rgba(235, 235, 245, .6);
+  --c-text-dark-3: rgba(235, 235, 245, .3);
+  --c-text-dark-4: rgba(235, 235, 245, .18);
+
+  --c-info: #4681c4;
+  --c-info-light: #549ced;
+  --c-info-lighter: #50a2ff;
+  --c-info-dark: #3468a3;
+  --c-info-darker: #255489;
+
+  --c-success: #00b489;
+  --c-success-light: #0fcea0;
+  --c-success-lighter: #27e8ba;
+  --c-success-dark: #068f6e;
+  --c-success-darker: #086b53;
+
+  --c-warning: #ffc517;
+  --c-warning-light: #ffe417;
+  --c-warning-lighter: #ffff17;
+  --c-warning-dark: #e0ad15;
+  --c-warning-darker: #bc9112;
+
+  --c-danger: #ed3c50;
+  --c-danger-light: #f43771;
+  --c-danger-lighter: #fd1d7c;
+  --c-danger-dark: #cd2d3f;
+  --c-danger-darker: #ab2131;
+
+  --c-alternative: #a159a2;
+  --c-alternative-light: #c05fc1;
+  --c-alternative-lighter: #db4fdd;
+  --c-alternative-dark: #823c83;
+  --c-alternative-darker: #602960;
+}
+
+:root {
+  --c-bg: var(--c-white);
+  --c-bg-soft: var(--c-white-soft);
+  --c-bg-mute: var(--c-white-mute);
+
+  --c-divider: var(--c-divider-light);
+  --c-divider-light: var(--c-divider-lighter);
+
+  --c-text-1: var(--c-text-light-1);
+  --c-text-2: var(--c-text-light-2);
+  --c-text-3: var(--c-text-light-3);
+  --c-text-4: var(--c-text-light-4);
+}
+
+.dark-mode {
+  --c-bg: var(--c-black);
+  --c-bg-soft: var(--c-black-soft);
+  --c-bg-mute: var(--c-black-mute);
+
+  --c-divider: var(--c-divider-dark);
+  --c-divider-light: var(--c-divider-darker);
+
+  --c-text-1: var(--c-text-dark-1);
+  --c-text-2: var(--c-text-dark-2);
+  --c-text-3: var(--c-text-dark-3);
+  --c-text-4: var(--c-text-dark-4);
+}
diff --git a/lib/assets/styles/variables/easings.css b/lib/assets/styles/variables/easings.css
new file mode 100644
index 00000000..3f4345e1
--- /dev/null
+++ b/lib/assets/styles/variables/easings.css
@@ -0,0 +1,12 @@
+:root {
+  --ease-in-quint: cubic-bezier(.755, .05, .855, .06);
+  --ease-in-back: cubic-bezier(1, -.75, 1, 1);
+
+  --ease-out-quint: cubic-bezier(.23, 1, .32, 1);
+  --ease-out-expo: cubic-bezier(.19, 1, .22, 1);
+  --ease-out-back: cubic-bezier(.175, .885, .320, 1.275);
+  --ease-out-back-quint: cubic-bezier(.175, .885, .280, 1.5);
+
+  --ease-in-out-quint: cubic-bezier(.86, 0, .07, 1);
+  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
+}
diff --git a/lib/assets/styles/variables/shadows.css b/lib/assets/styles/variables/shadows.css
new file mode 100644
index 00000000..6301e7a3
--- /dev/null
+++ b/lib/assets/styles/variables/shadows.css
@@ -0,0 +1,6 @@
+:root {
+  --z-index-screen: 1000;
+  --z-index-backdrop: 2000;
+  --z-index-modal: 2010;
+  --z-index-snackbar: 3000;
+}
diff --git a/lib/assets/styles/variables/typography.css b/lib/assets/styles/variables/typography.css
new file mode 100644
index 00000000..eaca83c3
--- /dev/null
+++ b/lib/assets/styles/variables/typography.css
@@ -0,0 +1,6 @@
+:root {
+  --font-family-base: "Roboto", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Helvetica Neue", "Arial", "sans-serif";
+  --font-family-primary: "interstate", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif";
+  --font-family-number: "Roboto", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Helvetica Neue", "Arial", "sans-serif";
+  --font-family-mono: "Source Code Pro", "Menlo", "Monaco", "Consolas", "Courier New", "monospace";
+}
diff --git a/lib/assets/styles/variables/z-indexes.css b/lib/assets/styles/variables/z-indexes.css
new file mode 100644
index 00000000..6301e7a3
--- /dev/null
+++ b/lib/assets/styles/variables/z-indexes.css
@@ -0,0 +1,6 @@
+:root {
+  --z-index-screen: 1000;
+  --z-index-backdrop: 2000;
+  --z-index-modal: 2010;
+  --z-index-snackbar: 3000;
+}