Convert SegmentedButton to CSS modules

Author: shepmaster

ui/frontend/SegmentedButton.module.css

@@ -0,0 +1,70 @@
+$bg-light: #fff;
+$bg-dark: #f9f9f9;
+
+.container {
+  display: flex;
+  align-items: center;
+  border-radius: var(--header-border-radius);
+  box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.4), inset 0 1px 0 white;
+}
+
+.button {
+  composes: -buttonReset from './shared.module.css';
+  border: 1px solid var(--header-main-border);
+  background: linear-gradient($bg-light, $bg-dark);
+  background-color: $bg-light;
+  color: #444;
+
+  &:first-child {
+    border-bottom-left-radius: var(--header-border-radius);
+    border-top-left-radius: var(--header-border-radius);
+  }
+
+  &:last-child {
+    border-bottom-right-radius: var(--header-border-radius);
+    border-top-right-radius: var(--header-border-radius);
+  }
+
+  &:not(:first-child) {
+    border-left: none;
+  }
+
+  &:not(:last-child) {
+    border-right: 1px solid var(--header-main-border);
+  }
+
+  &:hover {
+    background: linear-gradient($bg-light, #f3f3f3);
+    color: #333;
+  }
+
+  &:active {
+    border-top-color: #bababa;
+    border-bottom-color: #d6d6d6;
+    background: linear-gradient($bg-dark, #ededed);
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
+  }
+}
+
+.buttonBuild {
+  composes: button;
+  border-color: hsl(15, 66.7%, 32%);
+  background: var(--rust);
+  color: white;
+
+  &:not(:last-child) {
+    /* Silly specificity */
+    border-right-width: 0;
+  }
+
+  &:hover {
+    background: var(--rust-dark);
+    color: white;
+  }
+
+  &:active {
+    border-top-color: var(--rust-dark);
+    border-bottom-color: var(--rust-dark);
+    background: var(--rust-dark);
+  }
+}

ui/frontend/SegmentedButton.tsx

@@ -2,8 +2,10 @@ import React from 'react';
 
 import Link, { LinkProps } from './uss-router/Link';
 
+import styles from './SegmentedButton.module.css';
+
 export const SegmentedButtonSet: React.SFC = ({ children }) => (
-  <div className="segmented-button">{children}</div>
+  <div className={styles.container}>{children}</div>
 );
 
 type Button = JSX.IntrinsicElements['button'];
@@ -17,7 +19,7 @@ export const SegmentedButton = React.forwardRef<HTMLButtonElement, SegmentedButt
     <button
       ref={ref}
       {...props}
-      className={`segmented-button__button ${isBuild ? 'segmented-button__button--build' : ''}`}
+      className={isBuild ? styles.buttonBuild : styles.button}
     >
       {children}
     </button>
@@ -30,7 +32,7 @@ export const SegmentedLink = React.forwardRef<HTMLAnchorElement, LinkProps>(
     <Link
       ref={ref}
       {...props}
-      className={'segmented-button__button'}
+      className={styles.button}
     >
       {children}
     </Link>

ui/frontend/index.scss

@@ -181,88 +181,9 @@ $header-accent-border: #bdbdbd;
 $header-border-radius: 4px;
 $header-transition: 0.2s ease-in-out;
 
-@mixin active-button($bg-dark) {
-  background: linear-gradient($bg-dark, #ededed);
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
-
-  border-top-color: #bababa;
-  border-bottom-color: #d6d6d6;
-}
-
-.segmented-button {
-  display: flex;
-  align-items: center;
-
-  border-radius: $header-border-radius;
-  box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.4), inset 0 1px 0px white;
-
-  &__button {
-    @include button-reset;
-
-    $bg-light: #fff;
-    $bg-dark: #f9f9f9;
-
-    background-color: $bg-light;
-    background: linear-gradient($bg-light, $bg-dark);
-    color: #444;
-
-    border: 1px solid $header-main-border;
-
-    &:first-child {
-      border-top-left-radius: $header-border-radius;
-      border-bottom-left-radius: $header-border-radius;
-    }
-
-    &:last-child {
-      border-top-right-radius: $header-border-radius;
-      border-bottom-right-radius: $header-border-radius;
-    }
-
-    &:not(:first-child) {
-      border-left: none;
-    }
-
-    &:not(:last-child) {
-      border-right: 1px solid $header-main-border;
-    }
-
-    &:hover {
-      background: linear-gradient($bg-light, #f3f3f3);
-      color: #333;
-    }
-
-    &:active {
-      @include active-button($bg-dark);
-    }
-
-    &--build {
-      $rust-dark: #80331a;
-
-      background: $rust;
-      color: white;
-
-      border-color: hsl(15, 66.7%, 32%);
-
-      &:not(:last-child) {
-        // Silly specificity
-        border-right-width: 0;
-      }
-
-      &:hover {
-        background: $rust-dark;
-        color: white;
-      }
-
-      &:active {
-        background: $rust-dark;
-        border-top-color: $rust-dark;
-        border-bottom-color: $rust-dark;
-      }
-    }
-  }
-}
-
 :root {
+  --rust: #{$rust};
+  --rust-dark: #80331a;
   --border-color: #{$border-color};
   --header-main-border: #{$header-main-border};
   --header-transition: #{$header-transition};