plain-ui/src/scss/_variables.scss

/**
 *  variables
 *
 *
 *
 *  @author Björn Hase, Tentakelfabrik
 *  @license http://opensource.org/licenses/MIT The MIT License
 *  @link https://github.com/tentakelfabrik/plain-ui-css
 *
 */


/**
 *  breakpoints
 *
 */

$plain-ui__xs : 576px !default;
$plain-ui__sm : 768px !default;
$plain-ui__md : 992px !default;
$plain-ui__lg : 1200px !default;
$plain-ui__xlg: 1600px !default;

/**
 *  fonts
 *
 */

$plain-ui__direction: ltr !default;

$plain-ui__font-family: 'IBM Plex Mono', sans-serif !default;
$plain-ui__font-weight: normal !default;
$plain-ui__font-size: 0.9rem !default;
$plain-ui__font-size-breakpoints: (
    $plain-ui__md: 1rem
) !default;

$plain-ui__font-sizes: (
    'default': $plain-ui__font-size,
    'small'  : $plain-ui__font-size * 0.75,
    'medium' : $plain-ui__font-size * 1.5,
    'large'  : $plain-ui__font-size * 2,
    'big'    : $plain-ui__font-size * 3
) !default;

$plain-ui__line-height: 1.618;
$plain-ui__line-height__breakpoints: (
    $plain-ui__md: 1.8
) !default;


/**
 *  colors
 *
 *
 */

$plain-ui__white: #ffffff !default;
$plain-ui__black: #212121 !default;

$plain-ui__primary: #3e3e3e !default;
$plain-ui__primary-contrast: $plain-ui__primary !default;

$plain-ui__active: lighten($plain-ui__primary, 20%) !default;
$plain-ui__active-contrast: #ffffff !default;

$plain-ui__background: $plain-ui__primary !default;
$plain-ui__background-contrast: #ffffff !default;

$plain-ui__body: #f9f9f9 !default;
$plain-ui__text: #363636 !default;
$plain-ui__text-contrast: #ffffff !default;

$plain-ui__border: $plain-ui__primary !default;
$plain-ui__border-contrast: #ffffff !default;

$plain-ui__success: #64ac64 !default;
$plain-ui__success-contrast: lighten($plain-ui__success, 20%) !default;
$plain-ui__warning: #f0ad4e !default;
$plain-ui__warning-contrast: lighten($plain-ui__warning, 20%) !default;
$plain-ui__danger: #d95959 !default;
$plain-ui__danger-contrast: lighten($plain-ui__danger, 20%) !default;
$plain-ui__info: #0090d4 !default;
$plain-ui__info-contrast: lighten($plain-ui__info, 20%) !default;

$plain-ui__link: $plain-ui__text !default;
$plain-ui__link-hover: $plain-ui__danger !default;

$plain-ui__colors: (
    --body,
    --text,
    --text-contrast,
    --primary,
    --primary-contrast,
    --active,
    --active-contrast,
    --link,
    --link-hover,
    --danger,
    --danger-contrast,
    --info,
    --info-constrast,
    --success,
    --success-contrast,
    --warning,
    --warning-contrast,
    --background,
    --background-contrast,
    --border,
    --border-contrast
) !default;

:root {
    --body: #{$plain-ui__body};
    --text: #{$plain-ui__text};
    --text-contrast: #{$plain-ui__text-contrast};
    --primary: #{$plain-ui__primary};
    --primary-contrast: #{$plain-ui__primary-contrast};
    --active: #{$plain-ui__active};
    --active-contrast: #{$plain-ui__active-contrast};
    --link: #{$plain-ui__link};
    --link-hover: #{$plain-ui__link-hover};
    --danger: #{$plain-ui__danger};
    --danger-contrast: #{$plain-ui__danger-contrast};
    --info: #{$plain-ui__info};
    --info-constrast: #{$plain-ui__danger-contrast};
    --success: #{$plain-ui__success};
    --success-contrast: #{$plain-ui__success-contrast};
    --warning: #{$plain-ui__warning};
    --warning-contrast: #{$plain-ui__warning-contrast};
    --background: #{$plain-ui__background};
    --background-contrast: #{$plain-ui__background-contrast};
    --border: #{$plain-ui__border};
    --border-contrast: #{$plain-ui__border-contrast};
}

/**
 *  margin
 *
 */

$plain-ui__margin: 0 0 1rem !default;
$plain-ui__margin-breakpoints: (
    $plain-ui__md: 0 0 0.8rem
) !default;

/**
 *  padding
 *
 */

$plain-ui__padding: 0.6rem 0.8rem !default;
$plain-ui__padding-breakpoints: (
    $plain-ui__md: 0.8rem 1rem
) !default;

/**
 *  border
 *
 */

$plain-ui__border-radius: 2px;
$plain-ui__border: 1px solid var(--primary);