1 files changed, 103 insertions, 0 deletions
diff --git a/src/_variables.scss b/src/_variables.scss
new file mode 100644
index 0000000..15f2903
--- /dev/null
+++ b/src/_variables.scss
@@ -0,0 +1,103 @@
+// Core variables
+// Colors
+// Core colors
+$primary-color: #5764c6;
+$primary-color-dark: darken($primary-color, 3%);
+$primary-color-light: lighten($primary-color, 3%);
+$secondary-color: lighten($primary-color, 40%);
+$secondary-color-dark: darken($secondary-color, 3%);
+$secondary-color-light: lighten($secondary-color, 3%);
+
+$link-color: $primary-color;
+$link-color-dark: darken($link-color, 5%);
+
+// Gray colors
+$dark-color: #454d5d;
+$light-color: #fff;
+$gray-color: lighten($dark-color, 40%);
+$gray-color-dark: darken($gray-color, 20%);
+$gray-color-light: lighten($gray-color, 20%);
+
+$border-color: lighten($dark-color, 60%);
+$border-color-dark: darken($border-color, 10%);
+$bg-color: lighten($dark-color, 66%);
+$bg-color-dark: darken($bg-color, 3%);
+$bg-color-light: $light-color;
+
+// Control colors
+$success-color: #32b643;
+$warning-color: #ffb700;
+$error-color: #e85600;
+
+// Other colors
+$code-color: #e06870;
+$highlight-color: #ffe9b3;
+$body-bg: $bg-color-light;
+$body-font-color: lighten($dark-color, 5%);
+
+// Fonts
+// Credit: https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
+$base-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto;
+$mono-font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace;
+$fallback-font-family: "Helvetica Neue", sans-serif;
+$cjk-zh-font-family: $base-font-family, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", $fallback-font-family;
+$cjk-jp-font-family: $base-font-family, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, $fallback-font-family;
+$cjk-ko-font-family: $base-font-family, "Malgun Gothic", $fallback-font-family;
+$body-font-family: $base-font-family, $fallback-font-family;
+
+// Unit sizes
+$unit-o: .05rem;
+$unit-h: .1rem;
+$unit-1: .2rem;
+$unit-2: .4rem;
+$unit-3: .6rem;
+$unit-4: .8rem;
+$unit-5: 1rem;
+$unit-6: 1.2rem;
+$unit-7: 1.4rem;
+$unit-8: 1.6rem;
+$unit-9: 1.8rem;
+$unit-10: 2rem;
+$unit-12: 2.4rem;
+$unit-16: 3.2rem;
+
+// Font sizes
+$html-font-size: 20px;
+$html-line-height: 1.428571429;
+$font-size: .7rem;
+$font-size-sm: .6rem;
+$font-size-lg: .8rem;
+$line-height: 1rem;
+
+// Sizes
+$layout-spacing: $unit-2;
+$layout-spacing-sm: $unit-1;
+$layout-spacing-lg: $unit-4;
+$border-radius: $unit-h;
+$border-width: $unit-o;
+$border-width-lg: $unit-h;
+$control-size: $unit-8;
+$control-size-sm: $unit-6;
+$control-size-lg: $unit-10;
+$control-padding-h: $unit-2;
+$control-padding-v: ($control-size - $line-height) / 2 - $border-width;
+$control-padding-v-sm: ($control-size-sm - $line-height) / 2 - $border-width;
+$control-padding-v-lg: ($control-size-lg - $line-height) / 2 - $border-width;
+$control-icon-size: .7rem; 
+$control-min-width: 180px;
+$control-max-width: 320px;
+
+// Responsive breakpoints
+$size-xs: 480px;
+$size-sm: 600px;
+$size-md: 840px;
+$size-lg: 960px;
+$size-xl: 1280px;
+$size-2x: 1440px;
+
+// Z-index
+$zindex-0: 1;
+$zindex-1: 100;
+$zindex-2: 200;
+$zindex-3: 300;
+$zindex-4: 400;