👍 Elementsをいくつか追加

scss/elements/_index.scss

@@ -0,0 +1,5 @@
+@charset "utf-8";
+
+@import "title.scss";
+@import "button.scss";
+@import "container.scss";

scss/elements/button.scss

@@ -0,0 +1,85 @@
+$border-size: 6px;
+
+.button {
+  position: relative;
+  display: inline-block;
+  padding: 10px 12px;
+  margin: $border-size / 2;
+  vertical-align: middle;
+  cursor: pointer;
+  background-color: $background-color;
+  outline: none;
+  box-shadow: inset -4px -4px 0 0 $shadow-color;
+
+  &:hover {
+    background-color: $hover-background-color;
+    box-shadow: inset -6px -6px 0 0 $shadow-color;
+  }
+
+  &:active {
+    box-shadow: inset 4px 4px 0 0 $shadow-color;
+  }
+
+  // border
+  &::before,
+  &::after {
+    position: absolute;
+    box-sizing: content-box;
+    width: 100%;
+    height: 100%;
+    content: "";
+    border-color: $black;
+    border-style: solid;
+  }
+
+  &::before {
+    top: $border-size / 2 * -1;
+    left: 0;
+    border-right: $border-size;
+    border-left: $border-size;
+  }
+
+  &::after {
+    top: 0;
+    left: $border-size / 2 * -1;
+    border-top: $border-size;
+    border-bottom: $border-size;
+  }
+
+  // Button types(type background-color hover:background-color box-shadow)
+  // prettier-ignore
+  $btn-types:
+    "primary" $primary-background-color $primary-hover-background-color $primary-shadow-color,
+    "success" $success-background-color $success-hover-background-color $success-shadow-color,
+    "warning" $warning-background-color $warning-hover-background-color $warning-shadow-color,
+    "error" $error-background-color $error-hover-background-color $error-shadow-color;
+
+  @each $type in $btn-types {
+    &.-#{nth($type, 1)} {
+      color: $white;
+      background-color: nth($type, 2);
+      box-shadow: inset -4px -4px 0 0 nth($type, 4);
+
+      &:hover {
+        background-color: nth($type, 3);
+        box-shadow: inset -6px -6px 0 0 nth($type, 4);
+      }
+
+      &:active {
+        box-shadow: inset 4px 4px 0 0 nth($type, 4);
+      }
+    }
+  }
+
+  // prettier-ignore
+  $btn-sizes:
+    "small" $small-font-size,
+    "medium" $medium-font-size,
+    "large" $large-font-size;
+
+  @each $name, $size in $btn-sizes {
+    &.-#{$name} {
+      font-size: $size;
+    }
+  }
+}

scss/elements/container.scss

@@ -0,0 +1,72 @@
+.container {
+  position: relative;
+  padding: 1.5rem 2rem;
+
+  &::before,
+  &::after {
+    position: absolute;
+    content: "";
+    border-radius: 4px;
+  }
+
+  &::before {
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: -2;
+    background-color: $background-color;
+    border-radius: 4px;
+  }
+
+  &::after {
+    top: 2px;
+    right: 2px;
+    bottom: 2px;
+    left: 2px;
+    z-index: -1;
+    border: 4px solid;
+    border-radius: 4px;
+  }
+
+  &:not(:last-child) {
+    margin-bottom: 1.5rem;
+  }
+
+  &.-with-title {
+    display: flex;
+    justify-content: flex-start;
+    padding-top: 2rem;
+
+    &.-center {
+      justify-content: center;
+    }
+
+    &.-right {
+      justify-content: flex-end;
+    }
+
+    > .title {
+      position: absolute;
+      top: 0;
+      padding: 0 0.5rem;
+      margin: 0;
+      font-size: $h6-font-size;
+      font-weight: 400;
+      background-color: $background-color;
+    }
+  }
+
+  &.-dark {
+    color: $white;
+
+    &::before {
+      background-color: $black;
+    }
+
+    > .title {
+      color: $white;
+      background-color: $black;
+    }
+  }
+}

scss/elements/title.scss

@@ -0,0 +1,50 @@
+.title {
+  font-weight: 700;
+  word-break: break-word;
+
+  &:not(:last-child) {
+    margin-bottom: 1rem;
+  }
+
+  // prettier-ignore
+  $sizes:
+    $h1-font-size,
+    $h2-font-size,
+    $h3-font-size,
+    $h4-font-size,
+    $h5-font-size,
+    $h6-font-size;
+
+  @each $size in $sizes {
+    $i: index($sizes, $size);
+
+    &.-is-#{$i} {
+      font-size: $size;
+    }
+  }
+}
+
+.subtitle {
+  font-weight: 400;
+
+  &:not(:last-child) {
+    margin-bottom: 1.5rem;
+  }
+
+  // prettier-ignore
+  $sizes:
+    $h1-font-size,
+    $h2-font-size,
+    $h3-font-size,
+    $h4-font-size,
+    $h5-font-size,
+    $h6-font-size;
+
+  @each $size in $sizes {
+    $i: index($sizes, $size);
+
+    &.-is-#{$i} {
+      font-size: $size;
+    }
+  }
+}