Fixes #1127

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%);
   }

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);

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);

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;

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);
   }

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);

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 {

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 {

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);

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;

components/helpers.css

@@ -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;
-  }
-}

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);
   }

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 {

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;
   }

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));
   }

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;
   }

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);
   }

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%;

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));
   }

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);
   }

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;

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 {

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 {

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%);
   }

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;
+    }
+  }
 }