From eca80cb8d678ec994abdd9b12b5ab51487eae23f Mon Sep 17 00:00:00 2001
From: Arne Molland <arne@molland.sh>
Date: Sun, 6 Mar 2022 16:32:56 +0100
Subject: [PATCH] styles: migrate to sass-only approach

---
 README.md                                 |  8 +-
 src/styles/classes/breakpoints.scss       | 24 +++---
 src/styles/classes/margins.scss           | 80 ++++++++++----------
 src/styles/classes/padding.scss           | 82 ++++++++++----------
 src/styles/classes/shadows.scss           | 12 +--
 src/styles/classes/shapes.scss            | 16 ++--
 src/styles/classes/transitions.scss       |  8 +-
 src/styles/classes/typography.scss        | 91 ++++++++++++-----------
 src/styles/core/breakpoints.scss          | 32 --------
 src/styles/core/colors.scss               | 70 -----------------
 src/styles/core/index.scss                |  8 --
 src/styles/core/shadows.scss              | 28 -------
 src/styles/core/shapes.scss               | 34 ---------
 src/styles/core/spacing.scss              | 34 ---------
 src/styles/core/transitions.scss          | 26 -------
 src/styles/core/typography.scss           | 53 -------------
 src/styles/global.scss                    | 74 +++++++++---------
 src/styles/index.scss                     |  6 +-
 src/styles/variables/breakpoints.scss     |  7 ++
 src/styles/variables/colors.scss          | 28 +++++++
 src/styles/{core => variables}/fonts.scss |  0
 src/styles/variables/index.scss           |  9 +++
 src/styles/variables/palette.scss         | 45 +++++++++++
 src/styles/variables/shadows.scss         |  5 ++
 src/styles/variables/shapes.scss          |  8 ++
 src/styles/variables/spacing.scss         |  8 ++
 src/styles/variables/transitions.scss     |  4 +
 src/styles/variables/typography.scss      | 18 +++++
 28 files changed, 336 insertions(+), 482 deletions(-)
 delete mode 100644 src/styles/core/breakpoints.scss
 delete mode 100644 src/styles/core/colors.scss
 delete mode 100644 src/styles/core/index.scss
 delete mode 100644 src/styles/core/shadows.scss
 delete mode 100644 src/styles/core/shapes.scss
 delete mode 100644 src/styles/core/spacing.scss
 delete mode 100644 src/styles/core/transitions.scss
 delete mode 100644 src/styles/core/typography.scss
 create mode 100644 src/styles/variables/breakpoints.scss
 create mode 100644 src/styles/variables/colors.scss
 rename src/styles/{core => variables}/fonts.scss (100%)
 create mode 100644 src/styles/variables/index.scss
 create mode 100644 src/styles/variables/palette.scss
 create mode 100644 src/styles/variables/shadows.scss
 create mode 100644 src/styles/variables/shapes.scss
 create mode 100644 src/styles/variables/spacing.scss
 create mode 100644 src/styles/variables/transitions.scss
 create mode 100644 src/styles/variables/typography.scss

diff --git a/README.md b/README.md
index 83efad8a..2491d49b 100644
--- a/README.md
+++ b/README.md
@@ -19,13 +19,9 @@ npm i @gameflow-tv/flume
 
 ### Theming
 
-#### CSS/SCSS
+#### Stylesheets
 
-Flume comes bundled with a global style bundle that sets up some global styles and provides utility CSS classes for vanilla CSS usage;
-
-```jsx
-import styles from '@gameflow-tv/flume/bundle.css'
-```
+Flume operates with our _BYOCSS_ (Bring Your Own CSS) principle; we distribute Sass source files that can be compiled to CSS as wanted/needed.
 
 #### React/JSX
 
diff --git a/src/styles/classes/breakpoints.scss b/src/styles/classes/breakpoints.scss
index a0ed74aa..1b5b36b0 100644
--- a/src/styles/classes/breakpoints.scss
+++ b/src/styles/classes/breakpoints.scss
@@ -2,74 +2,74 @@
 
 // min-width based visiblity
 .flume-only-under-xs {
-  @media (min-width: map.get($flume-breakpoints, 'xs')) {
+  @media (min-width: $flume-breakpoint-xs) {
     display: none;
   }
 }
 
 .flume-only-under-sm {
-  @media (min-width: map.get($flume-breakpoints, 'sm')) {
+  @media (min-width: $flume-breakpoint-sm) {
     display: none;
   }
 }
 
 .flume-only-under-md {
-  @media (min-width: map.get($flume-breakpoints, 'md')) {
+  @media (min-width: $flume-breakpoint-md) {
     display: none;
   }
 }
 
 .flume-only-under-lg {
-  @media (min-width: map.get($flume-breakpoints, 'lg')) {
+  @media (min-width: $flume-breakpoint-lg) {
     display: none;
   }
 }
 
 .flume-only-under-xl {
-  @media (min-width: map.get($flume-breakpoints, 'xl')) {
+  @media (min-width: $flume-breakpoint-xl) {
     display: none;
   }
 }
 
 .flume-only-under-xxl {
-  @media (min-width: map.get($flume-breakpoints, 'xxl')) {
+  @media (min-width: $flume-breakpoint-xxl) {
     display: none;
   }
 }
 
 // max-width based visibility
 .flume-only-over-xs {
-  @media (max-width: map.get($flume-breakpoints, 'xs')) {
+  @media (max-width: $flume-breakpoint-xs) {
     display: none;
   }
 }
 
 .flume-only-over-sm {
-  @media (max-width: map.get($flume-breakpoints, 'sm')) {
+  @media (max-width: $flume-breakpoint-sm) {
     display: none;
   }
 }
 
 .flume-only-over-md {
-  @media (max-width: map.get($flume-breakpoints, 'md')) {
+  @media (max-width: $flume-breakpoint-md) {
     display: none;
   }
 }
 
 .flume-only-over-lg {
-  @media (max-width: map.get($flume-breakpoints, 'lg')) {
+  @media (max-width: $flume-breakpoint-lg) {
     display: none;
   }
 }
 
 .flume-only-over-xl {
-  @media (max-width: map.get($flume-breakpoints, 'xl')) {
+  @media (max-width: $flume-breakpoint-xl) {
     display: none;
   }
 }
 
 .flume-only-over-xxl {
-  @media (max-width: map.get($flume-breakpoints, 'xxl')) {
+  @media (max-width: $flume-breakpoint-xxl) {
     display: none;
   }
 }
diff --git a/src/styles/classes/margins.scss b/src/styles/classes/margins.scss
index 47c96bab..5ffbfcf0 100644
--- a/src/styles/classes/margins.scss
+++ b/src/styles/classes/margins.scss
@@ -1,164 +1,164 @@
 // Left margins
 .flume-margin-left-xxxs {
-  margin-left: var(--flume-spacing-xxxs);
+  margin-left: $flume-spacing-xxxs;
 }
 
 .flume-margin-left-xxs {
-  margin-left: var(--flume-spacing-xxs);
+  margin-left: $flume-spacing-xxs;
 }
 
 .flume-margin-left-xs {
-  margin-left: var(--flume-spacing-xs);
+  margin-left: $flume-spacing-xs;
 }
 
 .flume-margin-left-sm {
-  margin-left: var(--flume-spacing-sm);
+  margin-left: $flume-spacing-sm;
 }
 
 .flume-margin-left-md {
-  margin-left: var(--flume-spacing-md);
+  margin-left: $flume-spacing-md;
 }
 
 .flume-margin-left-lg {
-  margin-left: var(--flume-spacing-lg);
+  margin-left: $flume-spacing-lg;
 }
 
 .flume-margin-left-xl {
-  margin-left: var(--flume-spacing-xl);
+  margin-left: $flume-spacing-xl;
 }
 
 .flume-margin-left-xxl {
-  margin-left: var(--flume-spacing-xxl);
+  margin-left: $flume-spacing-xxl;
 }
 
 // Right margins
 .flume-margin-right-xxxs {
-  margin-right: var(--flume-spacing-xxxs);
+  margin-right: $flume-spacing-xxxs;
 }
 
 .flume-margin-right-xxs {
-  margin-right: var(--flume-spacing-xxs);
+  margin-right: $flume-spacing-xxs;
 }
 
 .flume-margin-right-xs {
-  margin-right: var(--flume-spacing-xs);
+  margin-right: $flume-spacing-xs;
 }
 
 .flume-margin-right-sm {
-  margin-right: var(--flume-spacing-sm);
+  margin-right: $flume-spacing-sm;
 }
 
 .flume-margin-right-md {
-  margin-right: var(--flume-spacing-md);
+  margin-right: $flume-spacing-md;
 }
 
 .flume-margin-right-lg {
-  margin-right: var(--flume-spacing-lg);
+  margin-right: $flume-spacing-lg;
 }
 
 .flume-margin-right-xl {
-  margin-right: var(--flume-spacing-xl);
+  margin-right: $flume-spacing-xl;
 }
 
 .flume-margin-right-xxl {
-  margin-right: var(--flume-spacing-xxl);
+  margin-right: $flume-spacing-xxl;
 }
 
 // Top margins
 .flume-margin-top-xxxs {
-  margin-top: var(--flume-spacing-xxxs);
+  margin-top: $flume-spacing-xxxs;
 }
 
 .flume-margin-top-xxs {
-  margin-top: var(--flume-spacing-xxs);
+  margin-top: $flume-spacing-xxs;
 }
 
 .flume-margin-top-xs {
-  margin-top: var(--flume-spacing-xs);
+  margin-top: $flume-spacing-xs;
 }
 
 .flume-margin-top-sm {
-  margin-top: var(--flume-spacing-sm);
+  margin-top: $flume-spacing-sm;
 }
 
 .flume-margin-top-md {
-  margin-top: var(--flume-spacing-md);
+  margin-top: $flume-spacing-md;
 }
 
 .flume-margin-top-lg {
-  margin-top: var(--flume-spacing-lg);
+  margin-top: $flume-spacing-lg;
 }
 
 .flume-margin-top-xl {
-  margin-top: var(--flume-spacing-xl);
+  margin-top: $flume-spacing-xl;
 }
 
 .flume-margin-top-xxl {
-  margin-top: var(--flume-spacing-xxl);
+  margin-top: $flume-spacing-xxl;
 }
 
 // Bottom margins
 .flume-margin-bottom-xxxs {
-  margin-bottom: var(--flume-spacing-xxxs);
+  margin-bottom: $flume-spacing-xxxs;
 }
 
 .flume-margin-bottom-xxs {
-  margin-bottom: var(--flume-spacing-xxs);
+  margin-bottom: $flume-spacing-xxs;
 }
 
 .flume-margin-bottom-xs {
-  margin-bottom: var(--flume-spacing-xs);
+  margin-bottom: $flume-spacing-xs;
 }
 
 .flume-margin-bottom-sm {
-  margin-bottom: var(--flume-spacing-sm);
+  margin-bottom: $flume-spacing-sm;
 }
 
 .flume-margin-bottom-md {
-  margin-bottom: var(--flume-spacing-md);
+  margin-bottom: $flume-spacing-md;
 }
 
 .flume-margin-bottom-lg {
-  margin-bottom: var(--flume-spacing-lg);
+  margin-bottom: $flume-spacing-lg;
 }
 
 .flume-margin-bottom-xl {
-  margin-bottom: var(--flume-spacing-xl);
+  margin-bottom: $flume-spacing-xl;
 }
 
 .flume-margin-bottom-xxl {
-  margin-bottom: var(--flume-spacing-xxl);
+  margin-bottom: $flume-spacing-xxl;
 }
 
 // All margins
 .flume-margin-xxxs {
-  margin: var(--flume-spacing-xxxs);
+  margin: $flume-spacing-xxxs;
 }
 
 .flume-margin-xxs {
-  margin: var(--flume-spacing-xxs);
+  margin: $flume-spacing-xxs;
 }
 
 .flume-margin-xs {
-  margin: var(--flume-spacing-xs);
+  margin: $flume-spacing-xs;
 }
 
 .flume-margin-sm {
-  margin: var(--flume-spacing-sm);
+  margin: $flume-spacing-sm;
 }
 
 .flume-margin-md {
-  margin: var(--flume-spacing-md);
+  margin: $flume-spacing-md;
 }
 
 .flume-margin-lg {
-  margin: var(--flume-spacing-lg);
+  margin: $flume-spacing-lg;
 }
 
 .flume-margin-xl {
-  margin: var(--flume-spacing-xl);
+  margin: $flume-spacing-xl;
 }
 
 .flume-margin-xxl {
-  margin: var(--flume-spacing-xxl);
+  margin: $flume-spacing-xxl;
 }
diff --git a/src/styles/classes/padding.scss b/src/styles/classes/padding.scss
index 63afb316..fe7f197b 100644
--- a/src/styles/classes/padding.scss
+++ b/src/styles/classes/padding.scss
@@ -1,164 +1,166 @@
+@import '../variables/spacing.scss';
+
 // Left padding
 .flume-padding-left-xxxs {
-  padding-left: var(--flume-spacing-xxxs);
+  padding-left: $flume-spacing-xxxs;
 }
 
 .flume-padding-left-xxs {
-  padding-left: var(--flume-spacing-xxs);
+  padding-left: $flume-spacing-xxs;
 }
 
 .flume-padding-left-xs {
-  padding-left: var(--flume-spacing-xs);
+  padding-left: $flume-spacing-xs;
 }
 
 .flume-padding-left-sm {
-  padding-left: var(--flume-spacing-sm);
+  padding-left: $flume-spacing-sm;
 }
 
 .flume-padding-left-md {
-  padding-left: var(--flume-spacing-md);
+  padding-left: $flume-spacing-md;
 }
 
 .flume-padding-left-lg {
-  padding-left: var(--flume-spacing-lg);
+  padding-left: $flume-spacing-lg;
 }
 
 .flume-padding-left-xl {
-  padding-left: var(--flume-spacing-xl);
+  padding-left: $flume-spacing-xl;
 }
 
 .flume-padding-left-xxl {
-  padding-left: var(--flume-spacing-xxl);
+  padding-left: $flume-spacing-xxl;
 }
 
 // Right padding
 .flume-padding-right-xxxs {
-  padding-right: var(--flume-spacing-xxxs);
+  padding-right: $flume-spacing-xxxs;
 }
 
 .flume-padding-right-xxs {
-  padding-right: var(--flume-spacing-xxs);
+  padding-right: $flume-spacing-xxs;
 }
 
 .flume-padding-right-xs {
-  padding-right: var(--flume-spacing-xs);
+  padding-right: $flume-spacing-xs;
 }
 
 .flume-padding-right-sm {
-  padding-right: var(--flume-spacing-sm);
+  padding-right: $flume-spacing-sm;
 }
 
 .flume-padding-right-md {
-  padding-right: var(--flume-spacing-md);
+  padding-right: $flume-spacing-md;
 }
 
 .flume-padding-right-lg {
-  padding-right: var(--flume-spacing-lg);
+  padding-right: $flume-spacing-lg;
 }
 
 .flume-padding-right-xl {
-  padding-right: var(--flume-spacing-xl);
+  padding-right: $flume-spacing-xl;
 }
 
 .flume-padding-right-xxl {
-  padding-right: var(--flume-spacing-xxl);
+  padding-right: $flume-spacing-xxl;
 }
 
 // Top padding
 .flume-padding-top-xxxs {
-  padding-top: var(--flume-spacing-xxxs);
+  padding-top: $flume-spacing-xxxs;
 }
 
 .flume-padding-top-xxs {
-  padding-top: var(--flume-spacing-xxs);
+  padding-top: $flume-spacing-xxs;
 }
 
 .flume-padding-top-xs {
-  padding-top: var(--flume-spacing-xs);
+  padding-top: $flume-spacing-xs;
 }
 
 .flume-padding-top-sm {
-  padding-top: var(--flume-spacing-sm);
+  padding-top: $flume-spacing-sm;
 }
 
 .flume-padding-top-md {
-  padding-top: var(--flume-spacing-md);
+  padding-top: $flume-spacing-md;
 }
 
 .flume-padding-top-lg {
-  padding-top: var(--flume-spacing-lg);
+  padding-top: $flume-spacing-lg;
 }
 
 .flume-padding-top-xl {
-  padding-top: var(--flume-spacing-xl);
+  padding-top: $flume-spacing-xl;
 }
 
 .flume-padding-top-xxl {
-  padding-top: var(--flume-spacing-xxl);
+  padding-top: $flume-spacing-xxl;
 }
 
 // Bottom padding
 .flume-padding-bottom-xxxs {
-  padding-bottom: var(--flume-spacing-xxxs);
+  padding-bottom: $flume-spacing-xxxs;
 }
 
 .flume-padding-bottom-xxs {
-  padding-bottom: var(--flume-spacing-xxs);
+  padding-bottom: $flume-spacing-xxs;
 }
 
 .flume-padding-bottom-xs {
-  padding-bottom: var(--flume-spacing-xs);
+  padding-bottom: $flume-spacing-xs;
 }
 
 .flume-padding-bottom-sm {
-  padding-bottom: var(--flume-spacing-sm);
+  padding-bottom: $flume-spacing-sm;
 }
 
 .flume-padding-bottom-md {
-  padding-bottom: var(--flume-spacing-md);
+  padding-bottom: $flume-spacing-md;
 }
 
 .flume-padding-bottom-lg {
-  padding-bottom: var(--flume-spacing-lg);
+  padding-bottom: $flume-spacing-lg;
 }
 
 .flume-padding-bottom-xl {
-  padding-bottom: var(--flume-spacing-xl);
+  padding-bottom: $flume-spacing-xl;
 }
 
 .flume-padding-bottom-xxl {
-  padding-bottom: var(--flume-spacing-xxl);
+  padding-bottom: $flume-spacing-xxl;
 }
 
 // All padding
 .flume-padding-xxxs {
-  padding: var(--flume-spacing-xxxs);
+  padding: $flume-spacing-xxxs;
 }
 
 .flume-padding-xxs {
-  padding: var(--flume-spacing-xxs);
+  padding: $flume-spacing-xxs;
 }
 
 .flume-padding-xs {
-  padding: var(--flume-spacing-xs);
+  padding: $flume-spacing-xs;
 }
 
 .flume-padding-sm {
-  padding: var(--flume-spacing-sm);
+  padding: $flume-spacing-sm;
 }
 
 .flume-padding-md {
-  padding: var(--flume-spacing-md);
+  padding: $flume-spacing-md;
 }
 
 .flume-padding-lg {
-  padding: var(--flume-spacing-lg);
+  padding: $flume-spacing-lg;
 }
 
 .flume-padding-xl {
-  padding: var(--flume-spacing-xl);
+  padding: $flume-spacing-xl;
 }
 
 .flume-padding-xxl {
-  padding: var(--flume-spacing-xxl);
+  padding: $flume-spacing-xxl;
 }
diff --git a/src/styles/classes/shadows.scss b/src/styles/classes/shadows.scss
index 9d3e98b4..e486cfca 100644
--- a/src/styles/classes/shadows.scss
+++ b/src/styles/classes/shadows.scss
@@ -1,19 +1,21 @@
+@import '../variables/shadows.scss';
+
 .flume-shadows-xs {
-  box-shadow: var(--flume-shadow-xs);
+  box-shadow: $flume-shadow-xs;
 }
 
 .flume-shadows-sm {
-  box-shadow: var(--flume-shadow-sm);
+  box-shadow: $flume-shadow-sm;
 }
 
 .flume-shadow-md {
-  box-shadow: var(--flume-shadow-md);
+  box-shadow: $flume-shadow-md;
 }
 
 .flume-shadow-lg {
-  box-shadow: var(--flume-shadow-lg);
+  box-shadow: $flume-shadow-lg;
 }
 
 .flume-shadow-glow {
-  box-shadow: var(--flume-shadow-glow);
+  box-shadow: $flume-shadow-glow;
 }
diff --git a/src/styles/classes/shapes.scss b/src/styles/classes/shapes.scss
index 2be84990..2f497c5c 100644
--- a/src/styles/classes/shapes.scss
+++ b/src/styles/classes/shapes.scss
@@ -1,27 +1,29 @@
+@import '../variables/shapes.scss';
+
 .flume-shape-none {
-  border-radius: var(--flume-border-none);
+  border-radius: $flume-shape-none;
 }
 
 .flume-shape-xxs {
-  border-radius: var(--flume-border-xxs);
+  border-radius: $flume-shape-xxs;
 }
 
 .flume-shape-xs {
-  border-radius: var(--flume-border-xs);
+  border-radius: $flume-shape-xs;
 }
 
 .flume-shape-md {
-  border-radius: var(--flume-border-md);
+  border-radius: $flume-shape-md;
 }
 
 .flume-shape-pill {
-  border-radius: var(--flume-border-pill);
+  border-radius: $flume-shape-pill;
 }
 
 .flume-shape-full {
-  border-radius: var(--flume-border-full);
+  border-radius: $flume-shape-full;
 }
 
 .flume-shape-handle {
-  border-radius: var(--flume-border-handle);
+  border-radius: $flume-shape-handle;
 }
diff --git a/src/styles/classes/transitions.scss b/src/styles/classes/transitions.scss
index f6a6d7ee..37938c67 100644
--- a/src/styles/classes/transitions.scss
+++ b/src/styles/classes/transitions.scss
@@ -1,11 +1,13 @@
+@import '../variables/transitions.scss';
+
 .flume-transition-short {
-  transition: all var(--flume-transition-short);
+  transition: all $flume-transition-short;
 }
 
 .flume-transition-medium {
-  transition: all var(--flume-transition-medium);
+  transition: all $flume-transition-medium;
 }
 
 .flume-transition-long {
-  transition: all var(--flume-transition-long);
+  transition: all $flume-transition-long;
 }
diff --git a/src/styles/classes/typography.scss b/src/styles/classes/typography.scss
index c86a0d88..0287c03f 100644
--- a/src/styles/classes/typography.scss
+++ b/src/styles/classes/typography.scss
@@ -1,80 +1,81 @@
-@use 'sass:map';
+@import '../variables/typography.scss';
+@import '../variables/breakpoints.scss';
 
 .flume-typography-header1 {
-  font-family: var(--flume-font-family-header);
-  font-weight: var(--flume-font-weight-semi-bold);
-  font-size: var(--flume-font-size-header1);
-  line-height: var(--flume-line-height-default);
+  font-family: $flume-font-family-header;
+  font-weight: $flume-font-weight-semi-bold;
+  font-size: $flume-font-size-header1;
+  line-height: $flume-line-height-default;
 
-  @media screen and (max-width: map.get($flume-breakpoints, 'sm')) {
-    font-size: calc(var(--flume-font-size-header1) * 0.75);
+  @media screen and (max-width: $flume-breakpoint-sm) {
+    font-size: calc($flume-font-size-header1 * 0.75);
   }
 }
 
 .flume-typography-header2 {
-  font-family: var(--flume-font-family-header);
-  font-weight: var(--flume-font-weight-medium);
-  font-size: var(--flume-font-size-header2);
-  line-height: var(--flume-line-height-default);
+  font-family: $flume-font-family-header;
+  font-weight: $flume-font-weight-medium;
+  font-size: $flume-font-size-header2;
+  line-height: $flume-line-height-default;
 
-  @media screen and (max-width: map.get($flume-breakpoints, 'sm')) {
-    font-size: calc(var(--flume-font-size-header2) * 0.75);
+  @media screen and (max-width: $flume-breakpoint-sm) {
+    font-size: calc($flume-font-size-header2 * 0.75);
   }
 }
 
 .flume-typography-header3 {
-  font-family: var(--flume-font-family-header);
-  font-weight: var(--flume-font-weight-semi-bold);
-  font-size: var(--flume-font-size-header3);
-  line-height: var(--flume-line-height-default);
+  font-family: $flume-font-family-header;
+  font-weight: $flume-font-weight-semi-bold;
+  font-size: $flume-font-size-header3;
+  line-height: $flume-line-height-default;
 
-  @media screen and (max-width: map.get($flume-breakpoints, 'sm')) {
-    font-size: calc(var(--flume-font-size-header3) * 0.75);
+  @media screen and (max-width: $flume-breakpoint-sm) {
+    font-size: calc($flume-font-size-header3 * 0.75);
   }
 }
 
 .flume-typography-header4 {
-  font-family: var(--flume-font-family-header);
-  font-weight: var(--flume-font-weight-medium);
-  font-size: var(--flume-font-size-header4);
-  line-height: var(--flume-line-height-default);
+  font-family: $flume-font-family-header;
+  font-weight: $flume-font-weight-medium;
+  font-size: $flume-font-size-header4;
+  line-height: $flume-line-height-default;
 
-  @media screen and (max-width: map.get($flume-breakpoints, 'sm')) {
-    font-size: calc(var(--flume-font-size-header4) * 0.75);
+  @media screen and (max-width: $flume-breakpoint-sm) {
+    font-size: calc($flume-font-size-header4 * 0.75);
   }
 }
 
 .flume-typography-header5 {
-  font-family: var(--flume-font-family-header);
-  font-weight: var(--flume-font-weight-medium);
-  font-size: var(--flume-font-size-header5);
-  line-height: var(--flume-line-height-default);
+  font-family: $flume-font-family-header;
+  font-weight: $flume-font-weight-medium;
+  font-size: $flume-font-size-header5;
+  line-height: $flume-line-height-default;
 }
 
 .flume-typography-body1 {
-  font-family: var(--flume-font-family-body);
-  font-weight: var(--flume-font-weight-regular);
-  font-size: var(--flume-font-size-body1);
-  line-height: var(--flume-line-height-default);
+  font-family: $flume-font-family-body;
+  font-weight: $flume-font-weight-regular;
+  font-size: $flume-font-size-body1;
+  line-height: $flume-line-height-default;
 }
 
 .flume-typography-body2 {
-  font-family: var(--flume-font-family-body);
-  font-weight: var(--flume-font-weight-regular);
-  font-size: var(--flume-font-size-body2);
-  line-height: var(--flume-line-height-default);
+  font-family: $flume-font-family-body;
+  font-weight: $flume-font-weight-regular;
+  font-size: $flume-font-size-body2;
+  line-height: $flume-line-height-default;
 }
 
 .flume-typography-body3 {
-  font-family: var(--flume-font-family-body);
-  font-weight: var(--flume-font-weight-medium);
-  font-size: var(--flume-font-size-body3);
-  line-height: var(--flume-line-height-default);
+  font-family: $flume-font-family-body;
+  font-weight: $flume-font-weight-medium;
+  font-size: $flume-font-size-body3;
+  line-height: $flume-line-height-default;
 }
 
 .flume-typography-button {
-  font-family: var(--flume-font-family-header);
-  font-weight: var(--flume-font-weight-medium);
-  font-size: var(--flume-font-size-button);
-  line-height: var(--flume-line-height-default);
+  font-family: $flume-font-family-header;
+  font-weight: $flume-font-weight-medium;
+  font-size: $flume-font-size-button;
+  line-height: $flume-line-height-default;
 }
diff --git a/src/styles/core/breakpoints.scss b/src/styles/core/breakpoints.scss
deleted file mode 100644
index 1fa36400..00000000
--- a/src/styles/core/breakpoints.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-@mixin getDefaultBreakpoints {
-  --flume-breakpoint-default: 0rem;
-  --flume-breakpoint-xs: 29rem;
-  --flume-breakpoint-sm: 36rem;
-  --flume-breakpoint-md: 48rem;
-  --flume-breakpoint-lg: 62rem;
-  --flume-breakpoint-xl: 75rem;
-  --flume-breakpoint-xxl: 90rem;
-
-  $flume-breakpoints: (
-    default: var(--flume-breakpoint-default),
-    xs: var(--flume-breakpoint-xs),
-    sm: var(--flume-breakpoint-sm),
-    md: var(--flume-breakpoint-md),
-    lg: var(--flume-breakpoint-lg),
-    xl: var(--flume-breakpoint-xl),
-    xxl: var(--flume-breakpoint-xxl)
-  ) !default;
-}
-
-@mixin setBreakpoints() {
-  :root {
-    @content;
-  }
-}
-
-$hasCustomBreakpoints: false !default;
-@if $hasCustomBreakpoints == false {
-  :root {
-    @include getDefaultBreakpoints();
-  }
-}
diff --git a/src/styles/core/colors.scss b/src/styles/core/colors.scss
deleted file mode 100644
index 66902e9f..00000000
--- a/src/styles/core/colors.scss
+++ /dev/null
@@ -1,70 +0,0 @@
-@mixin getDefaultColors {
-  --flume-color-primary: #ffbf00;
-  --flume-color-on-primary: #242729;
-  --flume-color-secondary: #36393b;
-  --flume-color-on-secondary: #eee;
-  --flume-color-signal: #de3131;
-  --flume-color-on-signal: #fff;
-  --flume-color-icon: #eee;
-  --flume-color-header: #fff;
-  --flume-color-body: #eee;
-  --flume-color-subtitle: #ccc;
-  --flume-color-button-focus: #fff;
-  --flume-color-success: #34d058;
-  --flume-color-on-success: #144630;
-  --flume-color-warning: #f9c513;
-  --flume-color-on-warning: #735c0f;
-  --flume-color-error: #e24736;
-  --flume-color-on-error: #86181d;
-  --flume-color-shadow: #000;
-  --flume-color-highlight: rgba(255, 255, 255, 0.1);
-  --flume-color-inactive: rgba(255, 255, 255, 0.5);
-  --flume-color-overlay: rgba(0, 0, 0, 0.7);
-  --flume-color-win: #00a828;
-  --flume-color-loss: #e24736;
-  --flume-color-winner: #ddcb40;
-  --flume-color-runnerup: #c2d5e2;
-  --flume-color-elimination: #ccc;
-
-  $flume-colors: (
-    on-primary: var(--flume-color-on-primary),
-    primary: var(--flume-color-primary),
-    secondary: var(--flume-color-secondary),
-    on-secondary: var(--flume-color-on-secondary),
-    signal: var(--flume-color-signal),
-    on-signal: var(--flume-color-on-signal),
-    icon: var(--flume-color-icon),
-    header: var(--flume-color-header),
-    body: var(--flume-color-body),
-    subtitle: var(--flume-color-subtitle),
-    button-focus: var(--flume-color-button-focus),
-    success: var(--flume-color-success),
-    on-success: var(--flume-color-on-success),
-    warning: var(--flume-color-warning),
-    on-warning: var(--flume-color-on-warning),
-    error: var(--flume-color-error),
-    on-error: var(--flume-color-on-error),
-    shadow: var(--flume-color-shadow),
-    highlight: var(--flume-color-highlight),
-    inactive: var(--flume-color-inactive),
-    overlay: var(--flume-color-overlay),
-    win: var(--flume-color-win),
-    loss: var(--flume-color-loss),
-    winner: var(--flume-color-winner),
-    runnerup: var(--flume-color-runnerup),
-    elimination: var(--flume-color-elimination)
-  ) !default;
-}
-
-@mixin setColors() {
-  :root {
-    @content;
-  }
-}
-
-$hasCustomColors: false !default;
-@if $hasCustomColors == false {
-  :root {
-    @include getDefaultColors();
-  }
-}
diff --git a/src/styles/core/index.scss b/src/styles/core/index.scss
deleted file mode 100644
index 56be45cd..00000000
--- a/src/styles/core/index.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@import './fonts.scss';
-@import './colors.scss';
-@import './shapes.scss';
-@import './breakpoints.scss';
-@import './shadows.scss';
-@import './transitions.scss';
-@import './typography.scss';
-@import './spacing.scss';
diff --git a/src/styles/core/shadows.scss b/src/styles/core/shadows.scss
deleted file mode 100644
index 82e5f576..00000000
--- a/src/styles/core/shadows.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-@mixin getDefaultShadows {
-  --flume-shadow-xs: 0 2px 0.4rem rgba(0, 0, 0, 0.1);
-  --flume-shadow-sm: 0 4px 0.5rem rgba(0, 0, 0, 0.2);
-  --flume-shadow-md: 0 4px 1rem rgba(0, 0, 0, 0.3);
-  --flume-shadow-lg: 0 4px 1.5rem rgba(0, 0, 0, 0.4);
-  --flume-shadow-glow: 0px 0px 1px 2px rgba(255, 255, 255, 1);
-
-  $flume-shadows: (
-    xs: var(--flume-shadow-xs),
-    sm: var(--flume-shadow-sm),
-    md: var(--flume-shadow-md),
-    lg: var(--flume-shadow-lg),
-    glow: var(--flume-shadow-glow)
-  ) !default;
-}
-
-@mixin setShadows() {
-  :root {
-    @content;
-  }
-}
-
-$hasCustomShadows: false !default;
-@if $hasCustomShadows == false {
-  :root {
-    @include getDefaultShadows();
-  }
-}
diff --git a/src/styles/core/shapes.scss b/src/styles/core/shapes.scss
deleted file mode 100644
index f4418f03..00000000
--- a/src/styles/core/shapes.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-@mixin getDefaultShapes {
-  --flume-shape-none: 0px;
-  --flume-shape-xxs: 1px;
-  --flume-shape-xs: 2px;
-  --flume-shape-sm: 4px;
-  --flume-shape-md: 6px;
-  --flume-shape-pill: 100px;
-  --flume-shape-full: 50%;
-  --flume-shape-handle: 0px 4px 0px 4px;
-
-  $flume-shapes: (
-    none: var(--flume-shape-none),
-    xxs: var(--flume-shape-xxs),
-    xs: var(--flume-shape-xs),
-    sm: var(--flume-shape-sm),
-    md: var(--flume-shape-md),
-    pill: var(--flume-shape-pill),
-    full: var(--flume-shape-full),
-    handle: var(--flume-shape-handle)
-  ) !default;
-}
-
-@mixin setShapes() {
-  :root {
-    @content;
-  }
-}
-
-$hasCustomShapes: false !default;
-@if $hasCustomShapes == false {
-  :root {
-    @include getDefaultShapes();
-  }
-}
diff --git a/src/styles/core/spacing.scss b/src/styles/core/spacing.scss
deleted file mode 100644
index a2251a06..00000000
--- a/src/styles/core/spacing.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-@mixin getDefaultSpacing {
-  --flume-spacing-xxxs: 2px;
-  --flume-spacing-xxs: 4px;
-  --flume-spacing-xs: 8px;
-  --flume-spacing-sm: 12px;
-  --flume-spacing-md: 16px;
-  --flume-spacing-lg: 24px;
-  --flume-spacing-xl: 32px;
-  --flume-spacing-xxl: 48px;
-
-  $flume-spacing: (
-    xxxs: var(--flume-spacing-xxxs),
-    xxs: var(--flume-spacing-xxs),
-    xs: var(--flume-spacing-xs),
-    sm: var(--flume-spacing-sm),
-    md: var(--flume-spacing-md),
-    lg: var(--flume-spacing-lg),
-    xl: var(--flume-spacing-xl),
-    xxl: var(--flume-spacing-xxl)
-  ) !default;
-}
-
-@mixin setSpacing() {
-  :root {
-    @content;
-  }
-}
-
-$hasCustomSpacing: false !default;
-@if $hasCustomSpacing == false {
-  :root {
-    @include getDefaultSpacing();
-  }
-}
diff --git a/src/styles/core/transitions.scss b/src/styles/core/transitions.scss
deleted file mode 100644
index bdc658f2..00000000
--- a/src/styles/core/transitions.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-$bezier-curve: cubic-bezier(0.215, 0.61, 0.355, 1);
-
-@mixin getDefaultTransitions {
-  --flume-transition-short: 0.1s $bezier-curve;
-  --flume-transition-medium: 0.2s $bezier-curve;
-  --flume-transition-long: 0.3s $bezier-curve;
-
-  $flume-transitions: (
-    short: var(--flume-transition-short),
-    medium: var(--flume-transition-medium),
-    long: var(--flume-transition-long)
-  ) !default;
-}
-
-@mixin setTransitions() {
-  :root {
-    @content;
-  }
-}
-
-$hasCustomTransitions: false !default;
-@if $hasCustomTransitions == false {
-  :root {
-    @include getDefaultTransitions();
-  }
-}
diff --git a/src/styles/core/typography.scss b/src/styles/core/typography.scss
deleted file mode 100644
index 337026f2..00000000
--- a/src/styles/core/typography.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-$bezier-curve: cubic-bezier(0.215, 0.61, 0.355, 1);
-
-@mixin getDefaultTypography {
-  --flume-font-weight-regular: 400;
-  --flume-font-weight-medium: 500;
-  --flume-font-weight-semi-bold: 600;
-
-  --flume-line-height-default: 1.2;
-
-  --flume-font-family-header: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  --flume-font-family-body: 'Mulish', sans-serif;
-
-  --flume-font-size-header1: 2.25rem;
-  --flume-font-size-header2: 1.5rem;
-  --flume-font-size-header3: 1.125rem;
-  --flume-font-size-header4: 1rem;
-  --flume-font-size-header5: 0.875rem;
-  --flume-font-size-body1: 0.875rem;
-  --flume-font-size-body2: 0.75rem;
-  --flume-font-size-body3: 0.625rem;
-  --flume-font-size-button: 0.875rem;
-
-  $flume-typography: (
-    font-weight-regular: var(--flume-font-weight-regular),
-    font-weight-medium: var(--flume-font-weight-medium),
-    font-weight-semi-bold: var(--flume-font-weight-semi-bold),
-    line-height-default: var(--flume-line-height-default),
-    font-family-header: var(--flume-font-family-header),
-    font-family-body: var(--flume-font-family-body),
-    font-size-header1: var(--flume-font-size-header1),
-    font-size-header2: var(--flume-font-size-header2),
-    font-size-header3: var(--flume-font-size-header3),
-    font-size-header4: var(--flume-font-size-header4),
-    font-size-header5: var(--flume-font-size-header5),
-    font-size-body1: var(--flume-font-size-body1),
-    font-size-body2: var(--flume-font-size-body2),
-    font-size-body3: var(--flume-font-size-body3),
-    font-size-button: var(--flume-font-size-button)
-  ) !default;
-}
-
-@mixin setTypography() {
-  :root {
-    @content;
-  }
-}
-
-$hasCustomTypography: false !default;
-@if $hasCustomTypography == false {
-  :root {
-    @include getDefaultTypography();
-  }
-}
diff --git a/src/styles/global.scss b/src/styles/global.scss
index f876901f..70345e83 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -1,66 +1,68 @@
 @use 'sass:map';
 
+@import 'variables/index.scss';
+
 h1 {
-  font-family: var(--flume-font-family-header);
-  font-weight: var(--flume-font-weight-semi-bold);
-  font-size: var(--flume-font-size-header1);
-  line-height: var(--flume-line-height-default);
+  font-family: $flume-font-family-header;
+  font-weight: $flume-font-weight-semi-bold;
+  font-size: $flume-font-size-header1;
+  line-height: $flume-line-height-default;
 
-  @media screen and (max-width: map.get($flume-breakpoints, 'sm')) {
-    font-size: calc(var(--flume-font-size-header1) * 0.75);
+  @media screen and (max-width: $flume-breakpoint-sm) {
+    font-size: calc($flume-font-size-header1 * 0.75);
   }
 }
 
 h2 {
-  font-family: var(--flume-font-family-header);
-  font-weight: var(--flume-font-weight-medium);
-  font-size: var(--flume-font-size-header2);
-  line-height: var(--flume-line-height-default);
+  font-family: $flume-font-family-header;
+  font-weight: $flume-font-weight-medium;
+  font-size: $flume-font-size-header2;
+  line-height: $flume-line-height-default;
 
-  @media screen and (max-width: map.get($flume-breakpoints, 'sm')) {
-    font-size: calc(var(--flume-font-size-header2) * 0.75);
+  @media screen and (max-width: $flume-breakpoint-sm) {
+    font-size: calc($flume-font-size-header2 * 0.75);
   }
 }
 
 h3 {
-  font-family: var(--flume-font-family-header);
-  font-weight: var(--flume-font-weight-semi-bold);
-  font-size: var(--flume-font-size-header3);
-  line-height: var(--flume-line-height-default);
+  font-family: $flume-font-family-header;
+  font-weight: $flume-font-weight-semi-bold;
+  font-size: $flume-font-size-header3;
+  line-height: $flume-line-height-default;
 
-  @media screen and (max-width: map.get($flume-breakpoints, 'sm')) {
-    font-size: calc(var(--flume-font-size-header3) * 0.75);
+  @media screen and (max-width: $flume-breakpoint-sm) {
+    font-size: calc($flume-font-size-header3 * 0.75);
   }
 }
 
 h4 {
-  font-family: var(--flume-font-family-header);
-  font-weight: var(--flume-font-weight-medium);
-  font-size: var(--flume-font-size-header4);
-  line-height: var(--flume-line-height-default);
+  font-family: $flume-font-family-header;
+  font-weight: $flume-font-weight-medium;
+  font-size: $flume-font-size-header4;
+  line-height: $flume-line-height-default;
 
-  @media screen and (max-width: map.get($flume-breakpoints, 'sm')) {
-    font-size: calc(var(--flume-font-size-header4) * 0.75);
+  @media screen and (max-width: $flume-breakpoint-sm) {
+    font-size: calc($flume-font-size-header4 * 0.75);
   }
 }
 
 h5 {
-  font-family: var(--flume-font-family-header);
-  font-weight: var(--flume-font-weight-medium);
-  font-size: var(--flume-font-size-header5);
-  line-height: var(--flume-line-height-default);
+  font-family: $flume-font-family-header;
+  font-weight: $flume-font-weight-medium;
+  font-size: $flume-font-size-header5;
+  line-height: $flume-line-height-default;
 }
 
 p {
-  font-family: var(--flume-font-family-body);
-  font-weight: var(--flume-font-weight-regular);
-  font-size: var(--flume-font-size-body1);
-  line-height: var(--flume-line-height-default);
+  font-family: $flume-font-family-body;
+  font-weight: $flume-font-weight-regular;
+  font-size: $flume-font-size-body1;
+  line-height: $flume-line-height-default;
 }
 
 button {
-  font-family: var(--flume-font-family-header);
-  font-weight: var(--flume-font-weight-medium);
-  font-size: var(--flume-font-size-button);
-  line-height: var(--flume-line-height-default);
+  font-family: $flume-font-family-header;
+  font-weight: $flume-font-weight-medium;
+  font-size: $flume-font-size-button;
+  line-height: $flume-line-height-default;
 }
diff --git a/src/styles/index.scss b/src/styles/index.scss
index e0540f2b..7daa665a 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,3 +1,3 @@
-@import './classes/index.scss';
-@import './core/index.scss';
-@import './global.scss';
+@import 'classes/index.scss';
+@import 'variables/index.scss';
+@import 'global.scss';
diff --git a/src/styles/variables/breakpoints.scss b/src/styles/variables/breakpoints.scss
new file mode 100644
index 00000000..10ffb68e
--- /dev/null
+++ b/src/styles/variables/breakpoints.scss
@@ -0,0 +1,7 @@
+$flume-breakpoint-default: 0rem;
+$flume-breakpoint-xs: 29rem;
+$flume-breakpoint-sm: 36rem;
+$flume-breakpoint-md: 48rem;
+$flume-breakpoint-lg: 62rem;
+$flume-breakpoint-xl: 75rem;
+$flume-breakpoint-xxl: 90rem;
diff --git a/src/styles/variables/colors.scss b/src/styles/variables/colors.scss
new file mode 100644
index 00000000..eba8a1fe
--- /dev/null
+++ b/src/styles/variables/colors.scss
@@ -0,0 +1,28 @@
+@import 'palette.scss';
+
+$flume-color-primary: $amber-orange !default;
+$flume-color-on-primary: $abbey-blue !default;
+$flume-color-secondary: $emperor-gray !default;
+$flume-color-on-secondary: $off-white !default;
+$flume-color-signal: $punch-red !default;
+$flume-color-on-signal: $white !default;
+$flume-color-icon: $off-white !default;
+$flume-color-header: $white !default;
+$flume-color-body: $off-white !default;
+$flume-color-subtitle: $light-gray !default;
+$flume-color-button-focus: $white !default;
+$flume-color-success: $emerald-green !default;
+$flume-color-on-success: $parsley-green !default;
+$flume-color-warning: $lightning-yellow !default;
+$flume-color-on-warning: $mustard-yellow !default;
+$flume-color-error: $cinnabar-red !default;
+$flume-color-on-error: $falu-red !default;
+$flume-color-shadow: $black !default;
+$flume-color-highlight: $white-10 !default;
+$flume-color-inactive: $white-50 !default;
+$flume-color-overlay: $black-70 !default;
+$flume-color-win: $bracket-green !default;
+$flume-color-loss: $bracket-red !default;
+$flume-color-winner: $wattle-gold !default;
+$flume-color-runnerup: $misty-gray !default;
+$flume-color-elimination: $light-gray !default;
diff --git a/src/styles/core/fonts.scss b/src/styles/variables/fonts.scss
similarity index 100%
rename from src/styles/core/fonts.scss
rename to src/styles/variables/fonts.scss
diff --git a/src/styles/variables/index.scss b/src/styles/variables/index.scss
new file mode 100644
index 00000000..da93d8a1
--- /dev/null
+++ b/src/styles/variables/index.scss
@@ -0,0 +1,9 @@
+@import 'fonts.scss';
+@import 'palette.scss';
+@import 'colors.scss';
+@import 'shapes.scss';
+@import 'breakpoints.scss';
+@import 'shadows.scss';
+@import 'transitions.scss';
+@import 'typography.scss';
+@import 'spacing.scss';
diff --git a/src/styles/variables/palette.scss b/src/styles/variables/palette.scss
new file mode 100644
index 00000000..3f1b4563
--- /dev/null
+++ b/src/styles/variables/palette.scss
@@ -0,0 +1,45 @@
+// Primary colors
+$amber-orange: #ffbf00;
+$emperor-gray: #36393b;
+$abbey-blue: #242729;
+
+// Secondary colors
+$abbey-gray: #525556;
+$cod-gray: #434647;
+$punch-red: #de3131;
+$bracket-red: #e24736;
+$bracket-green: #00a828;
+$lightning-yellow: #f9c513;
+$emerald-green: #34d058;
+$cinnabar-red: #e24736;
+$mustard-yellow: #735c0f;
+$parsley-green: #144620;
+$falu-red: #86181d;
+$wattle-gold: #ddcb40;
+
+// Game colors
+$counter-strike: #ef8914;
+$league-of-legends: #3c46a2;
+$dota: #cc3c21;
+$valorant: #ff4655;
+$rocket-league: #3983bb;
+$call-of-duty: #bebebe;
+$overwatch: #f99e1a;
+$rainbow-six: #bcbcbc;
+$fifa: #ddddde;
+$hearthstone: #586b8e;
+$starcraft: #86b3e0;
+$halo: #5c74a3;
+
+// Neutral colors
+$white: #fff;
+$off-white: #eee;
+$light-gray: #ccc;
+$dusty-gray: #999;
+$misty-gray: #c2d5e2;
+$black: #000;
+
+// Alpha variations
+$white-10: rgba(255, 255, 255, 0.1);
+$white-50: rgba(255, 255, 255, 0.5);
+$black-70: rgba(0, 0, 0, 0.7);
diff --git a/src/styles/variables/shadows.scss b/src/styles/variables/shadows.scss
new file mode 100644
index 00000000..214554c0
--- /dev/null
+++ b/src/styles/variables/shadows.scss
@@ -0,0 +1,5 @@
+$flume-shadow-xs: 0 2px 0.4rem rgba(0, 0, 0, 0.1);
+$flume-shadow-sm: 0 4px 0.5rem rgba(0, 0, 0, 0.2);
+$flume-shadow-md: 0 4px 1rem rgba(0, 0, 0, 0.3);
+$flume-shadow-lg: 0 4px 1.5rem rgba(0, 0, 0, 0.4);
+$flume-shadow-glow: 0px 0px 1px 2px rgba(255, 255, 255, 1);
diff --git a/src/styles/variables/shapes.scss b/src/styles/variables/shapes.scss
new file mode 100644
index 00000000..a617f31d
--- /dev/null
+++ b/src/styles/variables/shapes.scss
@@ -0,0 +1,8 @@
+$flume-shape-none: 0px;
+$flume-shape-xxs: 1px;
+$flume-shape-xs: 2px;
+$flume-shape-sm: 4px;
+$flume-shape-md: 6px;
+$flume-shape-pill: 100px;
+$flume-shape-full: 50%;
+$flume-shape-handle: 0px 4px 0px 4px;
diff --git a/src/styles/variables/spacing.scss b/src/styles/variables/spacing.scss
new file mode 100644
index 00000000..a17d04ab
--- /dev/null
+++ b/src/styles/variables/spacing.scss
@@ -0,0 +1,8 @@
+$flume-spacing-xxxs: 2px;
+$flume-spacing-xxs: 4px;
+$flume-spacing-xs: 8px;
+$flume-spacing-sm: 12px;
+$flume-spacing-md: 16px;
+$flume-spacing-lg: 24px;
+$flume-spacing-xl: 32px;
+$flume-spacing-xxl: 48px;
diff --git a/src/styles/variables/transitions.scss b/src/styles/variables/transitions.scss
new file mode 100644
index 00000000..1072528a
--- /dev/null
+++ b/src/styles/variables/transitions.scss
@@ -0,0 +1,4 @@
+$flume-curve: cubic-bezier(0.215, 0.61, 0.355, 1);
+$flume-transition-short: 0.1s $flume-curve;
+$flume-transition-medium: 0.2s $flume-curve;
+$flume-transition-long: 0.3s $flume-curve;
diff --git a/src/styles/variables/typography.scss b/src/styles/variables/typography.scss
new file mode 100644
index 00000000..1372a9f1
--- /dev/null
+++ b/src/styles/variables/typography.scss
@@ -0,0 +1,18 @@
+$flume-font-weight-regular: 400;
+$flume-font-weight-medium: 500;
+$flume-font-weight-semi-bold: 600;
+
+$flume-line-height-default: 1.2;
+
+$flume-font-family-header: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+$flume-font-family-body: 'Mulish', sans-serif;
+
+$flume-font-size-header1: 2.25rem;
+$flume-font-size-header2: 1.5rem;
+$flume-font-size-header3: 1.125rem;
+$flume-font-size-header4: 1rem;
+$flume-font-size-header5: 0.875rem;
+$flume-font-size-body1: 0.875rem;
+$flume-font-size-body2: 0.75rem;
+$flume-font-size-body3: 0.625rem;
+$flume-font-size-button: 0.875rem;