Migrate Switch style to PostCSS

components/switch/config.css

@@ -0,0 +1,24 @@
+:root {
+  --switch-color: var(--color-primary);
+  --switch-text-color: var(--color-black);
+  --switch-thumb-off-color: var(--palette-grey-50);
+  --switch-track-on-color: color(var(--color-primary) a(50%));
+  --switch-track-off-color: color(var(--color-black) a(26%));
+  --switch-off-ripple-color: color(var(--color-black) a(40%));
+  --switch-on-focus-color: color(var(--color-primary) a(26%));
+  --switch-off-focus-color: color(var(--color-black) a(10%));
+  --switch-disabled-thumb-color: var(--palette-grey-400);
+  --switch-disabled-track-color: color(var(--color-black) a(12%));
+  --switch-disabled-text-color: color(var(--color-black) a(26%));
+  --switch-total-height: calc(2.4 * var(--unit));
+  --switch-track-length: calc(3.6 * var(--unit));
+  --switch-track-height: calc(1.4 * var(--unit));
+  --switch-thumb-size: calc(2 * var(--unit));
+  --switch-thumb-on-color: var(--switch-color);
+  --switch-focus-init-size: calc(0.8 * var(--unit));
+  --switch-focus-size: calc(var(--switch-total-height) * 2);
+  --switch-focus-diff: calc((var(--switch-focus-size) - var(--switch-focus-init-size)) / 2);
+  --switch-ripple-duration: 650ms;
+  --switch-font-size: var(--font-size-small);
+  --switch-field-margin-bottom: calc(1.5 * var(--unit));
+}

components/switch/index.js

@@ -3,7 +3,7 @@ import { switchFactory } from './Switch.js';
 import { SWITCH } from '../identifiers.js';
 import thumbFactory from './Thumb.js';
 import themedRippleFactory from '../ripple';
-import theme from './theme.scss';
+import theme from './theme.css';
 
 const applyTheme = (Component) => themr(SWITCH, theme)(Component);
 const ripple = themedRippleFactory({ centered: true, spread: 2.6 });

components/switch/theme.css

@@ -0,0 +1,129 @@
+@import '../colors.css';
+@import '../variables.css';
+@import './config.css';
+
+.field {
+  display: block;
+  height: var(--switch-total-height);
+  margin-bottom: var(--switch-field-margin-bottom);
+  position: relative;
+  white-space: nowrap;
+}
+
+.text {
+  color: var(--switch-text-color);
+  display: inline-block;
+  font-size: var(--switch-font-size);
+  line-height: var(--switch-total-height);
+  padding-left: var(--unit);
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+.thumb {
+  border-radius: 50%;
+  cursor: pointer;
+  height: var(--switch-thumb-size);
+  position: absolute;
+  top: calc((var(--switch-track-height) - var(--switch-thumb-size)) / 2);
+  transition-duration: 0.28s;
+  transition-property: left;
+  transition-timing-function: var(--animation-curve-default);
+  width: var(--switch-thumb-size);
+
+  & .ripple {
+    background-color: var(--switch-color);
+    opacity: 0.3;
+    transition-duration: var(--switch-ripple-duration);
+  }
+}
+
+.on,
+.off {
+  border-radius: var(--switch-track-height);
+  cursor: pointer;
+  display: inline-block;
+  height: var(--switch-track-height);
+  margin-top: calc((var(--switch-total-height) - var(--switch-track-height)) / 2);
+  position: relative;
+  vertical-align: top;
+  width: var(--switch-track-length);
+}
+
+.on {
+  background: var(--switch-track-on-color);
+
+  & .thumb {
+    background: var(--switch-thumb-on-color);
+    box-shadow: var(--shadow-3p);
+    left: calc(var(--switch-track-length) - var(--switch-thumb-size));
+  }
+}
+
+.off {
+  background: var(--switch-track-off-color);
+
+  & .thumb {
+    background: var(--switch-thumb-off-color);
+    box-shadow: var(--shadow-2p);
+    left: 0;
+  }
+
+  & .ripple {
+    background: var(--switch-off-ripple-color);
+  }
+}
+
+.input {
+  height: 0;
+  opacity: 0;
+  overflow: hidden;
+  width: 0;
+
+  &:focus:not(:active) {
+    & + .switch-on > .thumb::before,
+    & + .switch-off > .thumb::before {
+      background-color: transparent;
+      border-radius: 50%;
+      box-sizing: border-box;
+      content: '';
+      display: inline-block;
+      height: var(--switch-focus-init-size);
+      left: 50%;
+      position: absolute;
+      top: 50%;
+      transform: translate(calc(-1 * var(--switch-focus-init-size) / 2), calc(-1 * var(--switch-focus-init-size) / 2));
+      width: var(--switch-focus-init-size);
+    }
+
+    & + .switch-on > .thumb::before {
+      background-color: var(--switch-on-focus-color);
+      box-shadow: 0 0 0 var(--switch-focus-diff) var(--switch-on-focus-color);
+    }
+
+    & + .switch-off > .thumb::before {
+      background-color: var(--switch-off-focus-color);
+      box-shadow: 0 0 0 var(--switch-focus-diff) var(--switch-off-focus-color);
+    }
+  }
+}
+
+.disabled {
+  composes: field;
+
+  & .text {
+    color: var(--switch-disabled-text-color);
+  }
+
+  & .on,
+  & .off {
+    background: var(--switch-disabled-track-color);
+    cursor: auto;
+  }
+
+  & .thumb {
+    background-color: var(--switch-disabled-thumb-color);
+    border-color: transparent;
+    cursor: auto;
+  }
+}