Migrate Tabs style to PostCSS

components/tabs/config.css

@@ -0,0 +1,13 @@
+:root {
+  --tab-label-disabled-opacity: 0.2;
+  --tab-label-h-padding: calc(1.2 * var(--unit));
+  --tab-label-height: calc(4.8 * var(--unit));
+  --tab-text-height: calc(1.4 * var(--unit));
+  --tab-label-v-padding: calc((var(--tab-label-height) - var(--tab-text-height)) / 2);
+  --tab-navigation-border-color: var(--color-divider);
+  --tab-pointer-color: var(--color-primary);
+  --tab-pointer-height: calc(0.2 * var(--unit));
+  --tab-text: var(--color-black);
+  --tab-text-color: var(--tab-text);
+  --tab-text-inactive-color: color(var(--tab-text), a(70%));
+}

components/tabs/index.js

@@ -3,7 +3,7 @@ import { TABS } from '../identifiers.js';
 import { tabsFactory } from './Tabs.js';
 import { TabContent } from './TabContent.js';
 import { Tab } from './Tab.js';
-import theme from './theme.scss';
+import theme from './theme.css';
 
 const applyTheme = (Component) => themr(TABS, theme)(Component);
 const ThemedTabContent = applyTheme(TabContent);

components/tabs/theme.css

@@ -0,0 +1,68 @@
+@import '../colors.css';
+@import '../variables.css';
+@import './config.css';
+
+.tabs {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.navigation {
+  box-shadow: inset 0 -1px var(--tab-navigation-border-color);
+  display: flex;
+  flex-direction: row;
+}
+
+.label {
+  color: var(--tab-text-inactive-color);
+  font-size: var(--tab-text-height);
+  font-weight: var(--font-weight-semi-bold);
+  line-height: 1;
+  padding: var(--tab-label-v-padding) var(--tab-label-h-padding);
+  text-transform: uppercase;
+  transition-duration: var(--animation-duration);
+  transition-property: box-shadow, color;
+  transition-timing-function: var(--animation-curve-default);
+
+  &.active {
+    color: var(--tab-text-color);
+  }
+
+  &.disabled {
+    opacity: var(--tab-label-disabled-opacity);
+  }
+
+  &:not(.disabled) {
+    cursor: pointer;
+  }
+
+  &.hidden {
+    display: none;
+  }
+}
+
+.pointer {
+  background-color: var(--tab-pointer-color);
+  height: var(--tab-pointer-height);
+  margin-top: calc(-1 * var(--tab-pointer-height));
+  position: absolute;
+  transition-duration: var(--animation-duration);
+  transition-property: left, width;
+  transition-timing-function: var(--animation-curve-default);
+  width: 0;
+}
+
+.tab {
+  display: flex;
+  flex-direction: column;
+  padding: var(--tab-label-v-padding) var(--tab-label-h-padding);
+
+  &:not(.active) {
+    display: none;
+  }
+
+  &.active {
+    display: block;
+  }
+}