keeweb/app/styles/base/_variables.scss

// Typography
$base-font-family: -apple-system, "BlinkMacSystemFont", "Helvetica Neue", "Helvetica", "Roboto", "Arial", "Microsoft YaHei", "微软雅黑", "PingFang SC", "Hiragino Sans GB", "STXihei", "华文细黑", sans-serif;
$heading-font-family: $base-font-family;
$monospace-font-family: "SFMono-Regular",Monaco,Consolas,"Lucida Console",monospace;

// Font Sizes
$base-font-size: 12px;
$large-pass-font-size: 22px;

// Line height
$base-line-height: 1.5;
$heading-line-height: 1.2;

// Other Sizes
$base-border-radius: 1px;
$base-spacing: $base-line-height * 1em;
$small-spacing: $base-spacing / 2;
$base-z-index: 0;
$base-padding-v: .5em;
$base-padding-h: 1em;
$mobile-back-button-height: 3em;
$base-padding: $base-padding-v $base-padding-h;
$medium-padding-v: 1em;
$medium-padding-h: 1.2em;
$medium-padding: $medium-padding-v $medium-padding-h;
$base-padding-px: 5px 10px;
$modal-icon-size: 6em;
$large-padding: 2em;
$titlebar-padding-small: 24px;
$titlebar-padding-large: 40px;

// Borders
@function base-border() { @return 1px solid th(base-border-color); };
@function light-border() { @return 1px solid th(light-border-color); };
@function selected-border-width() { @return 3px; }
@function selected-border() { @return selected-border-width() solid th(action-color); }
@function selected-hover-border() { @return 1px solid th(action-color); }
@function selected-transparent-border() { @return 1px solid transparent; }
@function focused-outline() { @return 1px solid th(action-color); }

// Forms
@function form-box-shadow() { @return inset 0 1px 3px rgba(0, 0, 0, 0.06); }
@function form-box-shadow-focus() { @return form-box-shadow(), 0 0 3px th(form-box-shadow-color-focus); }
@function form-box-shadow-focus-error() { @return form-box-shadow(), 0 0 3px th(form-box-shadow-color-focus-error); }

// Shadows
@function dropdown-box-shadow() { @return 0 0 50px th(dropdown-box-shadow-color); }

// Animations
$base-duration: 150ms;
$base-timing: ease;
$slow-transition-in: $base-duration*2 ease-in;
$slow-transition-out: $base-duration ease-out;
$tip-transition-in: 500ms $ease-in-expo;
$tip-transition-out: $slow-transition-out;

// Math
$sqrt2: 1.41;

$z-index-no-modal:  10000;
$z-index-modal:     100000;

// Screen sizes
$tablet-width: 736px;
$mobile-width: 620px;