diff --git a/components/app_bar/theme.css b/components/app_bar/theme.css
index 4dfcf3ab..177b6543 100644
--- a/components/app_bar/theme.css
+++ b/components/app_bar/theme.css
@@ -6,7 +6,6 @@
 .appBar {
   background: var(--appbar-color);
   color: var(--appbar-contrast);
-  composes: reset from '../helpers.css';
   font-family: var(--preferred-font);
   height: var(--appbar-height);
   padding: 0 var(--appbar-h-padding);
@@ -14,6 +13,8 @@
   transition-property: transform;
   transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
 
+  @apply --reset;
+
   &.scrollHide {
     transform: translateY(-100%);
   }
diff --git a/components/autocomplete/theme.css b/components/autocomplete/theme.css
index 4c4ef2be..f6c943cd 100644
--- a/components/autocomplete/theme.css
+++ b/components/autocomplete/theme.css
@@ -4,10 +4,11 @@
 @import './config.css';
 
 .autocomplete {
-  composes: reset from '../helpers.css';
   padding: var(--unit) 0;
   position: relative;
 
+  @apply --reset;
+
   &.focus {
     & .suggestions {
       box-shadow: var(--zdepth-shadow-1);
diff --git a/components/avatar/theme.css b/components/avatar/theme.css
index a0116991..ce5653ca 100644
--- a/components/avatar/theme.css
+++ b/components/avatar/theme.css
@@ -6,7 +6,6 @@
   background-color: var(--avatar-background);
   border-radius: 50%;
   color: var(--avatar-color);
-  composes: reset from '../helpers.css';
   display: inline-block;
   font-size: var(--avatar-font-size);
   height: var(--avatar-size);
@@ -16,6 +15,8 @@
   vertical-align: middle;
   width: var(--avatar-size);
 
+  @apply --reset;
+
   & > svg {
     fill: currentColor;
     height: var(--avatar-size);
diff --git a/components/button/theme.css b/components/button/theme.css
index 78b5402b..61757074 100644
--- a/components/button/theme.css
+++ b/components/button/theme.css
@@ -6,7 +6,6 @@
   align-content: center;
   align-items: center;
   border: 0;
-  composes: reset from '../helpers.css';
   cursor: pointer;
   display: inline-block;
   flex-direction: row;
@@ -28,6 +27,8 @@
     color 0.2s var(--animation-curve-default);
   white-space: nowrap;
 
+  @apply --reset;
+
   & > input {
     height: 0.1px;
     margin: 0;
diff --git a/components/card/theme.css b/components/card/theme.css
index d827ae3e..e343e9be 100644
--- a/components/card/theme.css
+++ b/components/card/theme.css
@@ -6,13 +6,14 @@
   background: var(--card-background-color);
   border-radius: calc(0.2 * var(--unit));
   box-shadow: var(--shadow-2p);
-  composes: reset from '../helpers.css';
   display: flex;
   flex-direction: column;
   font-size: var(--card-font-size);
   overflow: hidden;
   width: 100%;
 
+  @apply --reset;
+
   &.raised {
     box-shadow: var(--shadow-8p);
   }
diff --git a/components/checkbox/theme.css b/components/checkbox/theme.css
index d6ccfb52..748c0926 100644
--- a/components/checkbox/theme.css
+++ b/components/checkbox/theme.css
@@ -3,13 +3,14 @@
 @import './config.css';
 
 .field {
-  composes: reset from '../helpers.css';
   display: block;
   height: var(--checkbox-size);
   margin-bottom: var(--checkbox-field-margin-bottom);
   position: relative;
   white-space: nowrap;
 
+  @apply --reset;
+
   & .ripple {
     background-color: var(--checkbox-color);
     opacity: 0.3;
@@ -60,7 +61,6 @@
   border-radius: 2px;
   border-style: solid;
   border-width: 2px;
-  composes: reset from '../helpers.css';
   cursor: pointer;
   display: inline-block;
   height: var(--checkbox-size);
@@ -71,6 +71,8 @@
   vertical-align: top;
   width: var(--checkbox-size);
 
+  @apply --reset;
+
   &.checked {
     background-color: var(--checkbox-color);
     border-color: var(--checkbox-color);
diff --git a/components/chip/theme.css b/components/chip/theme.css
index 279d6424..c0a5f37f 100644
--- a/components/chip/theme.css
+++ b/components/chip/theme.css
@@ -6,7 +6,6 @@
   background-color: var(--chip-background);
   border-radius: var(--chip-height);
   color: var(--chip-color);
-  composes: reset from '../helpers.css';
   display: inline-block;
   font-size: var(--chip-font-size);
   line-height: var(--chip-height);
@@ -17,6 +16,8 @@
   position: relative;
   text-overflow: ellipsis;
   white-space: nowrap;
+
+  @apply --reset;
 }
 
 .avatar {
diff --git a/components/dialog/theme.css b/components/dialog/theme.css
index 903a3d71..3895f103 100644
--- a/components/dialog/theme.css
+++ b/components/dialog/theme.css
@@ -5,7 +5,6 @@
 
 .wrapper {
   align-items: center;
-  composes: reset from '../helpers.css';
   display: flex;
   height: 100vh;
   justify-content: center;
@@ -13,6 +12,8 @@
   top: 0;
   width: 100vw;
   z-index: var(--z-index-higher);
+
+  @apply --reset;
 }
 
 .dialog {
diff --git a/components/drawer/theme.css b/components/drawer/theme.css
index f38ca6c2..fc8152f7 100644
--- a/components/drawer/theme.css
+++ b/components/drawer/theme.css
@@ -12,7 +12,6 @@
   background-color: var(--drawer-background-color);
   box-shadow: var(--shadow-2p);
   color: var(--drawer-text-color);
-  composes: reset from '../helpers.css';
   display: block;
   height: 100vh;
   overflow-x: hidden;
@@ -26,6 +25,8 @@
   width: var(--drawer-mobile-width);
   will-change: transform;
 
+  @apply --reset;
+
   &.active {
     pointer-events: all;
     transform: translateX(0);
diff --git a/components/dropdown/theme.css b/components/dropdown/theme.css
index a9e37c16..0625a736 100644
--- a/components/dropdown/theme.css
+++ b/components/dropdown/theme.css
@@ -4,9 +4,10 @@
 @import './config.css';
 
 .dropdown {
-  composes: reset from '../helpers.css';
   position: relative;
 
+  @apply --reset;
+
   &:not(.active) {
     & > .values {
       max-height: 0;
diff --git a/components/helpers.css b/components/helpers.css
deleted file mode 100644
index cc420a2f..00000000
--- a/components/helpers.css
+++ /dev/null
@@ -1,19 +0,0 @@
-@import './variables.css';
-
-.reset {
-  box-sizing: border-box;
-  font-family: var(--preferred-font);
-  -webkit-font-smoothing: antialiased;
-  font-smoothing: antialiased;
-  text-size-adjust: 100%;
-
-  & *,
-  & *::after,
-  & *::before {
-    box-sizing: border-box;
-    -webkit-font-smoothing: antialiased;
-    font-smoothing: antialiased;
-    text-size-adjust: 100%;
-    -webkit-touch-callout: none;
-  }
-}
diff --git a/components/input/theme.css b/components/input/theme.css
index a4b59a4b..8f269d2c 100644
--- a/components/input/theme.css
+++ b/components/input/theme.css
@@ -3,10 +3,11 @@
 @import './config.css';
 
 .input {
-  composes: reset from '../helpers.css';
   padding: var(--input-padding) 0;
   position: relative;
 
+  @apply --reset;
+
   &.withIcon {
     margin-left: var(--input-icon-size);
   }
diff --git a/components/layout/theme.css b/components/layout/theme.css
index be2f9296..33a36b0c 100644
--- a/components/layout/theme.css
+++ b/components/layout/theme.css
@@ -10,7 +10,6 @@
 
 .layout {
   align-items: stretch;
-  composes: reset from '../helpers.css';
   display: flex;
   flex: 1;
   flex-direction: column;
@@ -18,6 +17,8 @@
   min-height: 100vh;
   min-width: 100%;
   position: relative;
+
+  @apply --reset;
 }
 
 .panel {
diff --git a/components/link/theme.css b/components/link/theme.css
index 30246422..b7af696f 100644
--- a/components/link/theme.css
+++ b/components/link/theme.css
@@ -9,7 +9,6 @@
 .link {
   align-content: center;
   align-items: center;
-  composes: reset from '../helpers.css';
   cursor: pointer;
   display: flex;
   flex-direction: row;
@@ -18,6 +17,8 @@
   position: relative;
   transition: opacity var(--animation-duration) var(--animation-curve-default);
 
+  @apply --reset;
+
   &:not(.active) {
     opacity: 0.5;
   }
diff --git a/components/list/theme.css b/components/list/theme.css
index 4ec4fd74..28118184 100644
--- a/components/list/theme.css
+++ b/components/list/theme.css
@@ -3,7 +3,6 @@
 @import './config.css';
 
 .list {
-  composes: reset from '../helpers.css';
   display: inline-block;
   list-style: none;
   margin: 0;
@@ -13,6 +12,8 @@
   white-space: nowrap;
   width: 100%;
 
+  @apply --reset;
+
   & + .divider {
     margin-top: calc(-1 * var(--list-vertical-padding));
   }
diff --git a/components/menu/theme.css b/components/menu/theme.css
index 3b3606af..13e1e727 100644
--- a/components/menu/theme.css
+++ b/components/menu/theme.css
@@ -3,11 +3,12 @@
 @import './config.css';
 
 .iconMenu {
-  composes: reset from '../helpers.css';
   display: inline-block;
   position: relative;
   text-align: center;
 
+  @apply --reset;
+
   & .icon {
     cursor: pointer;
   }
diff --git a/components/navigation/theme.css b/components/navigation/theme.css
index 3cf23c36..e0c4a3cc 100644
--- a/components/navigation/theme.css
+++ b/components/navigation/theme.css
@@ -20,9 +20,10 @@
 
 .vertical,
 .horizontal {
-  composes: reset from '../helpers.css';
   padding: calc(var(--navigation-space) / 2);
 
+  @apply --reset;
+
   & > [data-react-toolbox='link'] {
     color: var(--navigation-color);
   }
diff --git a/components/radio/theme.css b/components/radio/theme.css
index f6792268..17263ce5 100644
--- a/components/radio/theme.css
+++ b/components/radio/theme.css
@@ -5,7 +5,6 @@
 .radio {
   border: calc(0.2 * var(--unit)) solid var(--radio-text-color);
   border-radius: 50%;
-  composes: reset from '../helpers.css';
   cursor: pointer;
   display: inline-block;
   height: var(--radio-button-size);
@@ -13,6 +12,8 @@
   vertical-align: top;
   width: var(--radio-button-size);
 
+  @apply --reset;
+
   &::before {
     background-color: var(--radio-inner-color);
     border-radius: 50%;
diff --git a/components/slider/theme.css b/components/slider/theme.css
index 7bad0089..c147618c 100644
--- a/components/slider/theme.css
+++ b/components/slider/theme.css
@@ -3,13 +3,14 @@
 @import './config.css';
 
 .container {
-  composes: reset from '../helpers.css';
   height: var(--slider-knob-size);
   margin-right: var(--slider-knob-size);
   position: relative;
   user-select: none;
   width: calc(100% - var(--slider-knob-size));
 
+  @apply --reset;
+
   &:not(:last-child) {
     margin-right: calc(var(--slider-side-separation) + var(--slider-knob-size));
   }
diff --git a/components/snackbar/theme.css b/components/snackbar/theme.css
index 069a0d58..94fb5aee 100644
--- a/components/snackbar/theme.css
+++ b/components/snackbar/theme.css
@@ -19,7 +19,6 @@
   border-radius: var(--snackbar-border-radius);
   bottom: 0;
   color: var(--snackbar-color);
-  composes: reset from '../helpers.css';
   display: flex;
   left: var(--snackbar-horizontal-offset);
   margin: var(--snackbar-vertical-offset) auto 0;
@@ -29,6 +28,8 @@
   transition: all var(--animation-duration) var(--animation-curve-default) var(--animation-duration);
   z-index: var(--z-index-higher);
 
+  @apply --reset;
+
   &.accept .button {
     color: var(--snackbar-color-accept);
   }
diff --git a/components/switch/theme.css b/components/switch/theme.css
index 4aa3a666..6e1b9483 100644
--- a/components/switch/theme.css
+++ b/components/switch/theme.css
@@ -3,11 +3,12 @@
 @import './config.css';
 
 .field {
-  composes: reset from '../helpers.css';
   display: block;
   margin-bottom: var(--switch-field-margin-bottom);
   position: relative;
   white-space: normal;
+
+  @apply --reset;
 }
 
 .text {
@@ -22,7 +23,6 @@
 
 .thumb {
   border-radius: 50%;
-  composes: reset from '../helpers.css';
   cursor: pointer;
   height: var(--switch-thumb-size);
   position: absolute;
@@ -32,6 +32,8 @@
   transition-timing-function: var(--animation-curve-default);
   width: var(--switch-thumb-size);
 
+  @apply --reset;
+
   & .ripple {
     background-color: var(--switch-color);
     opacity: 0.3;
diff --git a/components/table/theme.css b/components/table/theme.css
index b53ffa42..985380d6 100644
--- a/components/table/theme.css
+++ b/components/table/theme.css
@@ -22,9 +22,10 @@
 .table {
   background-color: var(--color-white);
   border-collapse: collapse;
-  composes: reset from '../helpers.css';
   font-size: var(--table-font-size);
   width: 100%;
+
+  @apply --reset;
 }
 
 .head {
diff --git a/components/tabs/theme.css b/components/tabs/theme.css
index 8cb478ea..cff083e8 100644
--- a/components/tabs/theme.css
+++ b/components/tabs/theme.css
@@ -3,9 +3,10 @@
 @import './config.css';
 
 .tabs {
-  composes: reset from '../helpers.css';
   display: flex;
   flex-direction: column;
+
+  @apply --reset;
 }
 
 .navigation {
diff --git a/components/tooltip/theme.css b/components/tooltip/theme.css
index bc9a2af8..57ae37d1 100644
--- a/components/tooltip/theme.css
+++ b/components/tooltip/theme.css
@@ -3,7 +3,6 @@
 @import './config.css';
 
 .tooltip {
-  composes: reset from '../helpers.css';
   display: block;
   font-family: var(--preferred-font);
   font-size: var(--tooltip-font-size);
@@ -20,6 +19,8 @@
   transition: var(--animation-curve-default) var(--tooltip-animation-duration) transform;
   z-index: var(--z-index-higher);
 
+  @apply --reset;
+
   &.tooltipActive {
     transform: scale(1) translateX(-50%);
   }
diff --git a/components/variables.css b/components/variables.css
index 3c1a0a08..24a00ab3 100644
--- a/components/variables.css
+++ b/components/variables.css
@@ -77,4 +77,22 @@
   --z-index-normal: 1;
   --z-index-low: -100;
   --z-index-lower: -200;
+
+  --reset: {
+    box-sizing: border-box;
+    font-family: var(--preferred-font);
+    -webkit-font-smoothing: antialiased;
+    font-smoothing: antialiased;
+    text-size-adjust: 100%;
+
+    & *,
+    & *::after,
+    & *::before {
+      box-sizing: border-box;
+      -webkit-font-smoothing: antialiased;
+      font-smoothing: antialiased;
+      text-size-adjust: 100%;
+      -webkit-touch-callout: none;
+    }
+  }
 }