Changes to convert from standard website to using SASS

Master_SASS.diff

diff --git a/.gitignore b/.gitignore
index 11b5385..abb09cf 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,4 +22,7 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-*storybook.log
\ No newline at end of file
+*storybook.log
+
+# generated css files
+/components/*.css
\ No newline at end of file
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index c33be6e..bc15f85 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -38,7 +38,7 @@ export const Button = ({
   return (
     <button
       type="button"
-      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+      className={[`storybook-button--${size}`, mode].join(' ')}
       style={{ backgroundColor }}
       {...props}
     >
diff --git a/src/components/_base.scss b/src/components/_base.scss
new file mode 100644
index 0000000..f04cb16
--- /dev/null
+++ b/src/components/_base.scss
@@ -0,0 +1,8 @@
+$font-stack: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+$color-dark: #333;
+$color-blue: #1ea7fd;
+$font-weight-bold: 700;
+$font-size-small: 12px;
+$font-size-medium: 14px;
+$font-size-large: 16px;
+$font-size-header: 20px;
\ No newline at end of file
diff --git a/src/components/button.css b/src/components/button.scss
similarity index 57%
rename from src/components/button.css
rename to src/components/button.scss
index dc91dc7..adb945c 100644
--- a/src/components/button.css
+++ b/src/components/button.scss
@@ -1,30 +1,39 @@
-.storybook-button {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  font-weight: 700;
+@use 'base';
+
+@mixin storybook-button() {
+  font-family: $font-stack;
+  font-weight: $font-weight-bold;
   border: 0;
   border-radius: 3em;
   cursor: pointer;
   display: inline-block;
   line-height: 1;
 }
+
 .storybook-button--primary {
+  @include storybook-button;
   color: white;
-  background-color: #1ea7fd;
+  background-color: $color-blue;
 }
+
 .storybook-button--secondary {
-  color: #333;
+  @include storybook-button;
+  color: $color-dark;
   background-color: transparent;
   box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
 }
+
 .storybook-button--small {
-  font-size: 12px;
+  font-size: $font-size-small;
   padding: 10px 16px;
 }
+
 .storybook-button--medium {
-  font-size: 14px;
+  font-size: $font-size-medium;
   padding: 11px 20px;
 }
+
 .storybook-button--large {
-  font-size: 16px;
+  font-size: $font-size-large;
   padding: 12px 24px;
-}
+}
\ No newline at end of file
diff --git a/src/components/header.css b/src/components/header.css
deleted file mode 100644
index d9a7052..0000000
--- a/src/components/header.css
+++ /dev/null
@@ -1,32 +0,0 @@
-.storybook-header {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  padding: 15px 20px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.storybook-header svg {
-  display: inline-block;
-  vertical-align: top;
-}
-
-.storybook-header h1 {
-  font-weight: 700;
-  font-size: 20px;
-  line-height: 1;
-  margin: 6px 0 6px 10px;
-  display: inline-block;
-  vertical-align: top;
-}
-
-.storybook-header button + button {
-  margin-left: 10px;
-}
-
-.storybook-header .welcome {
-  color: #333;
-  font-size: 14px;
-  margin-right: 10px;
-}
diff --git a/src/components/header.scss b/src/components/header.scss
new file mode 100644
index 0000000..12824ea
--- /dev/null
+++ b/src/components/header.scss
@@ -0,0 +1,35 @@
+@use 'base';
+
+.storybook-header {
+  font-family: $font-stack;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 15px 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  svg {
+    display: inline-block;
+    vertical-align: top;
+  }
+
+  h1 {
+    font-weight: $font-weight-bold;
+    font-size: $font-size-header;
+    line-height: 1;
+    margin: 6px 0 6px 10px;
+    display: inline-block;
+    vertical-align: top;
+
+  }
+
+  button+button {
+    margin-left: 10px;
+  }
+
+  .welcome {
+    color: $color-dark;
+    font-size: $font-size-medium;
+    margin-right: 10px;
+  }
+}
\ No newline at end of file
diff --git a/src/components/page.css b/src/components/page.css
deleted file mode 100644
index 6205ef3..0000000
--- a/src/components/page.css
+++ /dev/null
@@ -1,110 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-
-.storybook-page {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  font-size: 14px;
-  line-height: 24px;
-  padding: 48px 20px;
-  margin: 0 auto;
-  max-width: 600px;
-  color: #333;
-}
-
-.storybook-page h2 {
-  font-weight: 700;
-  font-size: 32px;
-  line-height: 1;
-  margin: 0 0 4px;
-  display: inline-block;
-  vertical-align: top;
-}
-
-.storybook-page p {
-  margin: 1em 0;
-}
-
-.storybook-page a {
-  text-decoration: none;
-  color: #1ea7fd;
-}
-
-.storybook-page ul {
-  padding-left: 30px;
-  margin: 1em 0;
-}
-
-.storybook-page li {
-  margin-bottom: 8px;
-}
-
-.storybook-page .tip {
-  display: inline-block;
-  border-radius: 1em;
-  font-size: 11px;
-  line-height: 12px;
-  font-weight: 700;
-  background: #e7fdd8;
-  color: #66bf3c;
-  padding: 4px 12px;
-  margin-right: 10px;
-  vertical-align: top;
-}
-
-.storybook-page .tip-wrapper {
-  font-size: 13px;
-  line-height: 20px;
-  margin-top: 40px;
-  margin-bottom: 40px;
-}
-
-.storybook-page .tip-wrapper svg {
-  display: inline-block;
-  height: 12px;
-  width: 12px;
-  margin-right: 4px;
-  vertical-align: top;
-  margin-top: 3px;
-}
-
-.storybook-page .tip-wrapper svg path {
-  fill: #1ea7fd;
-}
\ No newline at end of file
diff --git a/src/components/page.scss b/src/components/page.scss
new file mode 100644
index 0000000..ff3a74f
--- /dev/null
+++ b/src/components/page.scss
@@ -0,0 +1,111 @@
+@use 'base';
+
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.storybook-page {
+  font-family: $font-stack;
+  font-size: $font-size-medium;
+  line-height: 24px;
+  padding: 48px 20px;
+  margin: 0 auto;
+  max-width: 600px;
+  color: $color-dark;
+
+  h2 {
+    font-weight: $font-weight-bold;
+    font-size: 32px;
+    line-height: 1;
+    margin: 0 0 4px;
+    display: inline-block;
+    vertical-align: top;
+  }
+
+  p {
+    margin: 1em 0;
+  }
+
+  a {
+    text-decoration: none;
+    color: $color-blue;
+  }
+
+  ul {
+    padding-left: 30px;
+    margin: 1em 0;
+  }
+
+  li {
+    margin-bottom: 8px;
+  }
+
+  .tip {
+    display: inline-block;
+    border-radius: 1em;
+    font-size: 11px;
+    line-height: 12px;
+    font-weight: $font-weight-bold;
+    background: #e7fdd8;
+    color: #66bf3c;
+    padding: 4px 12px;
+    margin-right: 10px;
+    vertical-align: top;
+  }
+
+  .tip-wrapper {
+    font-size: 13px;
+    line-height: 20px;
+    margin-top: 40px;
+    margin-bottom: 40px;
+
+    svg {
+      display: inline-block;
+      height: 12px;
+      width: 12px;
+      margin-right: 4px;
+      vertical-align: top;
+      margin-top: 3px;
+
+      path {
+        fill: $color-blue;
+      }
+    }
+  }
+}
\ No newline at end of file