keeweb/app/styles/base/_variables.scss

// Typography
$base-font-family: -apple-system, 'BlinkMacSystemFont', 'Segoe UI', '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: 0.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 var(--base-border-color);
}
@function light-border() {
    @return 1px solid var(--light-border-color);
}
@function selected-border-width() {
    @return var(--selected-border-width);
}
@function selected-border() {
    @return selected-border-width() solid var(--action-color);
}
@function selected-hover-border() {
    @return var(--accent-border-width) solid var(--action-color);
}
@function selected-transparent-border() {
    @return var(--accent-border-width) solid transparent;
}
@function focused-outline() {
    @return 1px solid var(--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 var(--focus-shadow-blur) var(--focus-shadow-spread) var(--form-box-shadow-color-focus);
}
@function form-box-shadow-focus-error() {
    @return form-box-shadow(),
        0 0 var(--focus-shadow-blur) var(--focus-shadow-spread)
            var(--form-box-shadow-color-focus-error);
}

// Shadows
@function dropdown-box-shadow() {
    @return 0 0 50px var(--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;