refactor: reorganize styles

src/chart/index.ts

-import './chart.scss';
 import { makeHtmlElement } from './ui-utils';
 import { makeChartPreview } from './chart-preview';
 import {

src/index.ts

+import './styles/index.scss';
 import chartsData from './data/chart_data.json';
 import { makeChart } from './chart';
 import { IChartData, ChartType } from './chart/chart-state';

src/styles/app.scss

+@import 'common';
+
+body,
+h1 {
+  font-family: Helvetica, sans-serif;
+  margin: 0;
+}
+
+body {
+  color: $fontMainLight;
+  background-color: $bodyBgLight;
+}
+
+body.dark {
+  color: $fontMainDark;
+  background-color: $bodyBgDark;
+}
+
+a {
+  text-decoration: none;
+  @include linkColor($linkColor);
+}
+
+body.dark a {
+  @include linkColor($darkLinkColor);
+}
+
+#root {
+  max-width: 600px;
+  padding: 10px 10px 75px;
+  position: relative;
+  margin: 0 auto;
+
+  @include tablet {
+    padding-bottom: 10px;
+  }
+}

src/chart/chart.scss → src/styles/chart.scss

-$bodyBgLight: #fff;
-$bodyBgDark: rgb(36, 47, 61);
-
-$grey: rgb(165, 175, 182);
-$lightgrey: rgb(221, 234, 242);
-$darkgrey: rgb(51, 64, 79);
-
-$fontMainLight: rgb(67, 72, 75);
-$fontMainDark: #fff;
-
-$linkColor: rgb(41, 145, 225);
-$darkLinkColor: rgb(62, 171, 241);
-
-body,
-h1 {
-  font-family: Helvetica, sans-serif;
-  margin: 0;
-}
-
-body {
-  color: $fontMainLight;
-  background-color: $bodyBgLight;
-}
-
-body.dark {
-  color: $fontMainDark;
-  background-color: $bodyBgDark;
-}
-
-@mixin linkColor($color) {
-  color: $color;
-  &:hover,
-  &:active,
-  &:focus {
-    color: darken($color, 15);
-  }
-}
-
-$tablet-width: 768px;
-
-@mixin mobile {
-  @media (max-width: #{$tablet-width - 1}) {
-    @content;
-  }
-}
-
-@mixin tablet {
-  @media (min-width: #{$tablet-width}) {
-    @content;
-  }
-}
-
-a {
-  text-decoration: none;
-  @include linkColor($linkColor);
-}
-
-body.dark a {
-  @include linkColor($darkLinkColor);
-}
-
-#root {
-  max-width: 600px;
-  padding: 10px 10px 75px;
-  position: relative;
-  margin: 0 auto;
-
-  @include tablet {
-    padding-bottom: 10px;
-  }
-}
-
-.theme-switcher {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  padding: 10px 10px 40px;
-  background-color: $bodyBgLight;
-  z-index: 1;
-
-  text-align: center;
-  font-size: 1.25rem;
-
-  @include tablet {
-    position: absolute;
-    top: 10px;
-    right: 0;
-    bottom: auto;
-    left: auto;
-    padding: 15px 10px;
-
-    text-align: left;
-    font-size: 1rem;
-  }
-}
-
-body.dark .theme-switcher {
-  background-color: $bodyBgDark;
-}
+@import 'common';
 
 .chart-container {
   margin-top: 1rem;

src/styles/common.scss

+$bodyBgLight: #fff;
+$bodyBgDark: rgb(36, 47, 61);
+
+$grey: rgb(165, 175, 182);
+$lightgrey: rgb(221, 234, 242);
+$darkgrey: rgb(51, 64, 79);
+
+$fontMainLight: rgb(67, 72, 75);
+$fontMainDark: #fff;
+
+$linkColor: rgb(41, 145, 225);
+$darkLinkColor: rgb(62, 171, 241);
+
+$tablet-width: 768px;
+
+@mixin linkColor($color) {
+  color: $color;
+  &:hover,
+  &:active,
+  &:focus {
+    color: darken($color, 15);
+  }
+}
+
+@mixin mobile {
+  @media (max-width: #{$tablet-width - 1}) {
+    @content;
+  }
+}
+
+@mixin tablet {
+  @media (min-width: #{$tablet-width}) {
+    @content;
+  }
+}

src/styles/index.scss

+@import 'app';
+@import 'theme-switcher';
+@import 'chart';

src/styles/theme-switcher.scss

+@import 'common';
+
+.theme-switcher {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 10px 10px 40px;
+  background-color: $bodyBgLight;
+  z-index: 1;
+
+  text-align: center;
+  font-size: 1.25rem;
+
+  @include tablet {
+    position: absolute;
+    top: 10px;
+    right: 0;
+    bottom: auto;
+    left: auto;
+    padding: 15px 10px;
+
+    text-align: left;
+    font-size: 1rem;
+  }
+}
+
+body.dark .theme-switcher {
+  background-color: $bodyBgDark;
+}