diff --git a/components/layout/_config.scss b/components/layout/_config.scss
deleted file mode 100644
index a1b318f7a..000000000
--- a/components/layout/_config.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-$drawer-background-color: $palette-grey-50 !default;
-$drawer-border-color: $palette-grey-300 !default;
-$drawer-text-color: $palette-grey-800 !default;
-
-$drawer-overlay-color: $color-black !default;
-$drawer-overlay-opacity: .6 !default;
-
-// from: https://www.google.com/design/spec/layout/structure.html#structure-side-nav
-$navigation-drawer-desktop-width: 5 * $standard-increment-desktop !default;
-$navigation-drawer-max-desktop-width: 40 * $unit !default;
-
-// Mobile:
-// Width = Screen width − 56 dp
-// Maximum width: 320dp
-$navigation-drawer-mobile-width: 5 * $standard-increment-mobile !default;
-
-// sass doesn't like use of variable here: calc(100% - $standard-increment-mobile);
-$navigation-drawer-max-mobile-width: calc(100% - 5.6rem) !default;
diff --git a/components/layout/_mixins.scss b/components/layout/_mixins.scss
deleted file mode 100644
index 1ace8de42..000000000
--- a/components/layout/_mixins.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-@mixin open() {
-  transition-delay: $animation-delay;
-  & > .scrim {
-    & > .drawerContent {
-      pointer-events: all;
-      transition-delay: $animation-delay;
-      transform: translateX(0);
-    }
-  }
-}
-
-@mixin permanent() {
-  @include open();
-
-  width: $navigation-drawer-desktop-width;
-  max-width: $navigation-drawer-desktop-width;
-
-  &.wide {
-    width: $navigation-drawer-max-desktop-width;
-    max-width: $navigation-drawer-max-desktop-width;
-  }
-
-  &.active {
-    & > .scrim {
-      width: 0;
-      background-color: rgba($drawer-overlay-color, 0);
-    }
-  }
-}
diff --git a/components/layout/config.css b/components/layout/config.css
new file mode 100644
index 000000000..aa48e5492
--- /dev/null
+++ b/components/layout/config.css
@@ -0,0 +1,21 @@
+:root {
+  --standard-increment-mobile: calc(5.6 * var(--unit));
+  --standard-increment-desktop: calc(6.4 * var(--unit));
+  --drawer-background-color: var(--palette-grey-50);
+  --drawer-border-color: var(--palette-grey-300);
+  --drawer-text-color: var(--palette-grey-800);
+  --drawer-overlay-color: var(--color-black);
+  --drawer-overlay-opacity: 60%;
+
+  /* from: https://www.google.com/design/spec/layout/structure.html#structure-side-nav */
+  --navigation-drawer-desktop-width: calc(5 * var(--standard-increment-desktop));
+  --navigation-drawer-max-desktop-width: calc(40 * var(--unit));
+
+  /**
+   * Mobile:
+   * Width = Screen width − 56 dp
+   * Maximum width: 320dp
+   */
+  --navigation-drawer-mobile-width: calc(5 * var(--standard-increment-mobile));
+  --navigation-drawer-max-mobile-width: calc(100% - 5.6rem);
+}
diff --git a/components/layout/index.js b/components/layout/index.js
index d44ec77d3..44903502f 100644
--- a/components/layout/index.js
+++ b/components/layout/index.js
@@ -4,7 +4,7 @@ import { Layout } from './Layout.js';
 import { Panel } from './Panel.js';
 import { NavDrawer } from './NavDrawer.js';
 import { Sidebar } from './Sidebar.js';
-import theme from './theme.scss';
+import theme from './theme.css';
 
 const ThemedLayout = themr(LAYOUT, theme)(Layout);
 const ThemedPanel = themr(LAYOUT, theme)(Panel);
diff --git a/components/layout/theme.css b/components/layout/theme.css
new file mode 100644
index 000000000..e4bc4dcec
--- /dev/null
+++ b/components/layout/theme.css
@@ -0,0 +1,336 @@
+@import '../colors.css';
+@import '../media.css';
+@import '../variables.css';
+@import './config.css';
+
+/**
+ * Used to add to a class the open behavior for Drawer.
+ * Needs to be extended for different breakpoints so for now we can't
+ * avoid using the mixin plugin for now.
+ */
+@define-mixin open {
+  transition-delay: var(--animation-delay);
+
+  & > .scrim {
+    & > .drawerContent {
+      pointer-events: all;
+      transform: translateX(0);
+      transition-delay: var(--animation-delay);
+    }
+  }
+}
+
+/**
+ * Used to indicate an specific class needs to keep opened the side
+ * element. This should be extended with different breakpoints so
+ * the mixin plugin cannot be removed for now.
+ */
+@define-mixin permanent {
+  @mixin open;
+  max-width: var(--navigation-drawer-desktop-width);
+  width: var(--navigation-drawer-desktop-width);
+
+  &.wide {
+    max-width: var(--navigation-drawer-max-desktop-width);
+    width: var(--navigation-drawer-max-desktop-width);
+  }
+
+  &.active {
+    & > .scrim {
+      background-color: color(var(--drawer-overlay-color) a(0%));
+      width: 0;
+    }
+  }
+}
+
+.layout {
+  align-items: stretch;
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  justify-content: space-between;
+  overflow-y: hidden;
+  position: relative;
+  width: 100%;
+}
+
+.navDrawer {
+  height: 100%;
+  min-width: 0;
+  overflow-x: hidden;
+  overflow-y: hidden;
+  transition-duration: var(--animation-duration);
+  transition-property: width, min-width;
+  transition-timing-function: var(--animation-curve-default);
+  width: 0;
+
+  & .scrim {
+    background-color: color(var(--drawer-overlay-color) a(0%));
+    bottom: 0;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    transition:
+      background-color var(--animation-duration) var(--animation-curve-default),
+      width 10ms linear var(--animation-duration);
+    width: 0;
+    z-index: var(--z-index-highest);
+  }
+
+  & .drawerContent {
+    align-items: stretch;
+    background-color: var(--drawer-background-color);
+    border-right: 1px solid var(--drawer-border-color);
+    box-shadow: var(--shadow-2p);
+    color: var(--drawer-text-color);
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    justify-content: space-between;
+    overflow-x: hidden;
+    overflow-y: hidden;
+    pointer-events: none;
+    transform: translateX(-100%);
+    transition: transform var(--animation-duration) var(--animation-curve-default);
+    width: var(--navigation-drawer-mobile-width);
+
+    &.scrollY {
+      overflow-y: auto;
+    }
+  }
+
+  &.pinned {
+    @mixin open;
+    max-width: var(--navigation-drawer-max-mobile-width);
+    width: var(--navigation-drawer-mobile-width);
+  }
+
+  &.active {
+    &:not(.pinned) {
+      @mixin open;
+      & .scrim {
+        background-color: color(var(--drawer-overlay-color) a(var(--drawer-overlay-opacity)));
+        transition: background-color var(--animation-duration) var(--animation-curve-default);
+        width: 100%;
+      }
+    }
+  }
+
+  /* Larger than mobile width drawer */
+  @media screen and (--larger-than-xs-viewport) {
+    &.pinned {
+      max-width: var(--navigation-drawer-desktop-width);
+      width: var(--navigation-drawer-desktop-width);
+    }
+
+    & .drawerContent {
+      max-width: var(--navigation-drawer-desktop-width);
+      width: var(--navigation-drawer-desktop-width);
+    }
+
+    &.wide {
+      &.pinned {
+        max-width: var(--navigation-drawer-max-desktop-width);
+        width: var(--navigation-drawer-max-desktop-width);
+      }
+
+      & .drawerContent {
+        max-width: var(--navigation-drawer-max-desktop-width);
+        width: var(--navigation-drawer-max-desktop-width);
+      }
+    }
+  }
+
+  /* Permanent screen, ignore .active and make part of layout */
+  @media screen and (--larger-than-sm-viewport) {
+    &.smPermanent {
+      @mixin permanent;
+    }
+  }
+
+  @media screen and (--larger-than-md-viewport) {
+    &.mdPermanent {
+      @mixin permanent;
+    }
+  }
+
+  @media screen and (--larger-than-lg-viewport) {
+    &.lgPermanent {
+      @mixin permanent;
+    }
+  }
+
+  @media screen and (--larger-than-xl-viewport) {
+    &.xlPermanent {
+      @mixin permanent;
+    }
+  }
+
+  @media screen and (--larger-than-xxl-viewport) {
+    &.xxlPermanent {
+      @mixin permanent;
+    }
+  }
+
+  @media screen and (--larger-than-xxxl-viewport) {
+    &.xxxlPermanent {
+      @mixin permanent;
+    }
+  }
+}
+
+.panel {
+  align-items: stretch;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  height: 100%;
+  justify-content: space-between;
+  overflow-y: hidden;
+  position: relative;
+
+  &.scrollY {
+    overflow-y: auto;
+  }
+}
+
+.sidebarContent {
+  align-items: stretch;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: space-between;
+  overflow-y: hidden;
+
+  &.scrollY {
+    overflow-y: auto;
+  }
+}
+
+.sidebar {
+  background-color: var(--drawer-background-color);
+  bottom: 0;
+  color: var(--drawer-text-color);
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: hidden;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transition-duration: var(--animation-duration);
+  transition-property: width;
+  transition-timing-function: var(--animation-curve-default);
+  width: 0;
+  z-index: calc(var(--z-index-highest - 1));
+
+  @each $increment in 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 {
+    &.width-$(increment) {
+      & .sidebarContent {
+        min-width: 100%;
+      }
+
+      &.pinned {
+        width: 100%;
+      }
+
+      @media screen and (--larger-than-sm-viewport) {
+        position: relative;
+
+        & .sidebarContent {
+          min-width: calc(var(--standard-increment-desktop) * $(increment));
+        }
+
+        &.pinned {
+          width: calc(var(--standard-increment-desktop) * $(increment));
+        }
+      }
+    }
+  }
+
+  @each $increment in 1, 2, 3, 4, 5, 6, 7, 8, 9 {
+    &.width-$(increment) {
+      @media screen and (--larger-than-xs-viewport) and (--landscape) {
+        position: relative;
+
+        & .sidebarContent {
+          min-width: calc(var(--standard-increment-mobile) * $(increment));
+        }
+
+        &.pinned {
+          width: calc(var(--standard-increment-mobile) * $(increment));
+        }
+      }
+
+      @media screen and (--larger-than-xs-viewport) and (orientation: portrait) {
+        position: relative;
+
+        & .sidebarContent {
+          min-width: calc(var(--standard-increment-desktop) * $(increment));
+        }
+
+        &.pinned {
+          width: calc(var(--standard-increment-desktop) * $(increment));
+        }
+      }
+    }
+  }
+
+  @each $increment in 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 {
+    &.width-$(increment) {
+      @media screen and (--larger-than-sm-tablet-viewport) {
+        position: relative;
+
+        & .sidebarContent {
+          min-width: calc(var(--standard-increment-desktop) * $(increment));
+        }
+
+        &.pinned {
+          width: calc(var(--standard-increment-desktop) * $(increment));
+        }
+      }
+    }
+  }
+
+  &.width-100 {
+    position: absolute;
+
+    & .sidebarContent {
+      min-width: 100%;
+    }
+
+    &.pinned {
+      width: 100%;
+    }
+  }
+
+  @each $pct in 25, 33, 50, 66, 75 {
+    &.width-$(pct) {
+      position: absolute;
+
+      & .sidebarContent {
+        min-width: 100%;
+      }
+
+      &.pinned {
+        width: 100%;
+      }
+    }
+  }
+
+  @media screen and (--larger-than-sm-tablet-viewport) {
+    @each $pct in 25, 33, 50, 66, 75 {
+      &.width-$(pct) {
+        position: absolute;
+
+        & .sidebarContent {
+          min-width: calc($(pct) * 1%);
+        }
+
+        &.pinned {
+          width: calc($(pct) * 1%);
+        }
+      }
+    }
+  }
+}
diff --git a/components/layout/theme.scss b/components/layout/theme.scss
deleted file mode 100644
index a07c02924..000000000
--- a/components/layout/theme.scss
+++ /dev/null
@@ -1,311 +0,0 @@
-@import "../colors";
-@import "../globals";
-@import "../mixins";
-@import "./config";
-@import "./mixins";
-
-.layout {
-  position: relative;
-  display: flex;
-  width: 100%;
-  height: 100%;
-  flex-direction: row;
-  align-items: stretch;
-  justify-content: space-between;
-  overflow-y: hidden;
-
-  .navDrawer {
-    width: 0;
-    min-width: 0;
-    height: 100%;
-    overflow-x: hidden;
-    overflow-y: hidden;
-    transition-timing-function: $animation-curve-default;
-    transition-duration: $animation-duration;
-    transition-property: width, min-width;
-
-    .scrim {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      z-index: $z-index-highest;
-      width: 0;
-      height: 100%;
-      background-color: rgba($drawer-overlay-color, 0);
-      transition: background-color $animation-duration $animation-curve-default, width 10ms linear $animation-duration;
-    }
-
-    .drawerContent {
-      @include shadow-2dp();
-      display: flex;
-      width: $navigation-drawer-mobile-width;
-      max-width: $navigation-drawer-max-mobile-width;
-      height: 100%;
-      flex-direction: column;
-      align-items: stretch;
-      justify-content: space-between;
-      overflow-x: hidden;
-      overflow-y: hidden;
-      color: $drawer-text-color;
-      pointer-events: none;
-      background-color: $drawer-background-color;
-      border-right: 1px solid $drawer-border-color;
-      transition: transform $animation-duration $animation-curve-default;
-      transform: translateX(-100%);
-
-      &.scrollY {
-        overflow-y: auto;
-      }
-    }
-
-    &.pinned {
-      @include open();
-      width: $navigation-drawer-mobile-width;
-      max-width: $navigation-drawer-max-mobile-width;
-    }
-
-    &.active {
-      &:not(.pinned) {
-        @include open();
-        .scrim {
-          width: 100%;
-          background-color: rgba($drawer-overlay-color, $drawer-overlay-opacity);
-          transition: background-color $animation-duration $animation-curve-default;
-        }
-      }
-    }
-
-    // Larger than mobile width drawer
-    @media screen and (min-width: $layout-breakpoint-xs) {
-      &.pinned {
-        width: $navigation-drawer-desktop-width;
-        max-width: $navigation-drawer-desktop-width;
-      }
-
-      .drawerContent {
-        width: $navigation-drawer-desktop-width;
-        max-width: $navigation-drawer-desktop-width;
-      }
-
-      &.wide {
-        &.pinned {
-          width: $navigation-drawer-max-desktop-width;
-          max-width: $navigation-drawer-max-desktop-width;
-        }
-
-        .drawerContent {
-          width: $navigation-drawer-max-desktop-width;
-          max-width: $navigation-drawer-max-desktop-width;
-        }
-      }
-    }
-
-    // Permanent screen, ignore .active and make part of layout
-    @media screen and (min-width: $layout-breakpoint-sm) {
-      &.smPermanent {
-        @include permanent();
-      }
-    }
-
-    @media screen and (min-width: $layout-breakpoint-md) {
-      &.mdPermanent {
-        @include permanent();
-      }
-    }
-
-    @media screen and (min-width: $layout-breakpoint-lg) {
-      &.lgPermanent {
-        @include permanent();
-      }
-    }
-
-    @media screen and (min-width: $layout-breakpoint-xl) {
-      &.xlPermanent {
-        @include permanent();
-      }
-    }
-
-    @media screen and (min-width: $layout-breakpoint-xxl) {
-      &.xxlPermanent {
-        @include permanent();
-      }
-    }
-
-    @media screen and (min-width: $layout-breakpoint-xxxl) {
-      &.xxxlPermanent {
-        @include permanent();
-      }
-    }
-  }
-
-  & .layout {
-    .scrim {
-      z-index: $z-index-highest - 1;
-    }
-    & .layout {
-      .scrim {
-        z-index: $z-index-highest - 2;
-      }
-    }
-  }
-
-  .panel {
-    position: relative;
-    display: flex;
-    height: 100%;
-    flex: 1;
-    flex-direction: column;
-    align-items: stretch;
-    justify-content: space-between;
-    overflow-y: hidden;
-
-    &.scrollY {
-      overflow-y: auto;
-    }
-  }
-
-  .sidebar {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    z-index: $z-index-highest - 1;
-    width: 0;
-    height: 100%;
-    overflow-x: hidden;
-    overflow-y: hidden;
-    color: $drawer-text-color;
-    background-color: $drawer-background-color;
-    transition-timing-function: $animation-curve-default;
-    transition-duration: $animation-duration;
-    transition-property: width;
-
-    .sidebarContent {
-      display: flex;
-      height: 100%;
-      flex-direction: column;
-      align-items: stretch;
-      justify-content: space-between;
-      overflow-y: hidden;
-
-      &.scrollY {
-        overflow-y: auto;
-      }
-    }
-
-    $increments: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12);
-
-    @each $increment in $increments {
-      &.width-#{$increment} {
-        $mobile: $standard-increment-mobile * $increment;
-        $desktop: $standard-increment-desktop * $increment;
-
-        .sidebarContent {
-          min-width: 100%;
-        }
-
-        &.pinned {
-          width: 100%;
-        }
-
-        @if $increment < 10 {
-          @media screen and (min-width: $layout-breakpoint-xs) and (orientation: landscape) {
-            position: relative;
-
-            .sidebarContent {
-              min-width: $mobile;
-            }
-
-            &.pinned {
-              width: $mobile;
-            }
-          }
-
-          @media screen and (min-width: $layout-breakpoint-xs) and (orientation: portrait) {
-            position: relative;
-
-            .sidebarContent {
-              min-width: $desktop;
-            }
-
-            &.pinned {
-              width: $desktop;
-            }
-          }
-        }
-
-        @if $increment < 11 {
-          @media screen and (min-width: $layout-breakpoint-sm-tablet) {
-            position: relative;
-
-            .sidebarContent {
-              min-width: $desktop;
-            }
-
-            &.pinned {
-              width: $desktop;
-            }
-          }
-        }
-
-        @media screen and (min-width: $layout-breakpoint-sm) {
-          position: relative;
-
-          .sidebarContent {
-            min-width: $desktop;
-          }
-
-          &.pinned {
-            width: $desktop;
-          }
-        }
-      }
-    }
-
-
-    $percentages: (25, 33, 50, 66, 75);
-
-    &.width-100 {
-      position: absolute;
-
-      .sidebarContent {
-        min-width: 100%;
-      }
-
-      &.pinned {
-        width: 100%;
-      }
-    }
-
-    @each $pct in $percentages {
-      &.width-#{$pct} {
-        position: absolute;
-
-        .sidebarContent {
-          min-width: 100%;
-        }
-
-        &.pinned {
-          width: 100%;
-        }
-      }
-    }
-
-    @media screen and (min-width: $layout-breakpoint-sm-tablet) {
-      @each $pct in $percentages {
-        &.width-#{$pct} {
-          position: relative;
-
-          .sidebarContent {
-            min-width: $pct * 1%;
-          }
-
-          &.pinned {
-            width: $pct * 1%;
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/components/media.css b/components/media.css
index ff55d2e55..1e0e76e28 100644
--- a/components/media.css
+++ b/components/media.css
@@ -1,12 +1,27 @@
+/* Orientation */
 @custom-media --portrait (orientation: portrait);
 @custom-media --landscape (orientation: landscape);
+
+/* Devices (defined by max width) */
 @custom-media --xxs-viewport (max-width: 480px);
 @custom-media --xs-viewport (max-width: 600px);
-@custom-media --sm-tablet-viewport (max-with: 720px);
-@custom-media --sm-viewport (max-with: 840px);
-@custom-media --md-viewport (max-with: 960px);
-@custom-media --lg-tablet-viewport (max-with: 1024px);
-@custom-media --lg-viewport (max-with: 1280px);
-@custom-media --xl-viewport (max-with: 1440px);
-@custom-media --xxl-viewport (max-with: 1600px);
-@custom-media --xxxl-viewport (max-with: 1920px);
+@custom-media --sm-tablet-viewport (max-width: 720px);
+@custom-media --sm-viewport (max-width: 840px);
+@custom-media --md-viewport (max-width: 960px);
+@custom-media --lg-tablet-viewport (max-width: 1024px);
+@custom-media --lg-viewport (max-width: 1280px);
+@custom-media --xl-viewport (max-width: 1440px);
+@custom-media --xxl-viewport (max-width: 1600px);
+@custom-media --xxxl-viewport (max-width: 1920px);
+
+/* Devices (defined by min-width) */
+@custom-media --larger-than-xxs-viewport (min-width: 480px);
+@custom-media --larger-than-xs-viewport (min-width: 600px);
+@custom-media --larger-than-sm-tablet-viewport (min-width: 720px);
+@custom-media --larger-than-sm-viewport (min-width: 840px);
+@custom-media --larger-than-md-viewport (min-width: 960px);
+@custom-media --larger-than-lg-tablet-viewport (min-width: 1024px);
+@custom-media --larger-than-lg-viewport (min-width: 1280px);
+@custom-media --larger-than-xl-viewport (min-width: 1440px);
+@custom-media --larger-than-xxl-viewport (min-width: 1600px);
+@custom-media --larger-than-xxxl-viewport (min-width: 1920px);
diff --git a/components/variables.css b/components/variables.css
index 080dfd218..374606885 100644
--- a/components/variables.css
+++ b/components/variables.css
@@ -77,11 +77,4 @@
   --z-index-normal: 1;
   --z-index-low: -100;
   --z-index-lower: -200;
-
-  --standard-increment-mobile: calc(5.6 * var(--unit));
-  --standard-increment-desktop: calc(6.4 * var(--unit));
-
-  --baseline-grid: calc(0.8 * var(--unit));
-  --layout-gutter-width-sm: calc(2 * var(--baseline-grid));
-  --layout-gutter-width: calc(3 * var(--baseline-grid));
 }