Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
222 lines (188 sloc) 7.5 KB
//------------------------------------------------------------------------------
// @setting: Default
//------------------------------------------------------------------------------
// @description
//
//------------------------------------------------------------------------------
//
// @settings
$mode: light;
$default-font-size: 16px !default;
$default-line-height: 24px !default;
$default-border-size: 1px !default;
$default-border-radius: 2px !default;
$default-grid-gutter: 16px !default;
// Grid
$sm: 540px !default;
$md: 720px !default;
$lg: 960px !default;
$xl: 1140px !default;
$bp-sm: 576px !default;
$bp-md: 768px !default;
$bp-lg: 992px !default;
$bp-xl: 1200px !default;
// Spacing
$default-spacing: 8px !default;
// Object heights
$default-height: 56px !default;
$default-height-dense: 36px !default;
// icons
$default-icon-sm: 18px !default;
$default-icon-md: 24px !default;
$default-icon-lg: 40px !default;
// Fonts
$default-font: Roboto, Helvetica, Arial, sans-serif !default;
$default-code-font: Monaco, Andale Mono, Courier New, Courier, Mono !default;
// opacity
$default-opacity: 1 !default;
$default-opacity-87: 0.87 !default;
$default-opacity-54: 0.54 !default;
$default-opacity-38: 0.38 !default;
$default-opacity-12: 0.12 !default;
// Map light/dark colors
@function mode($arr: 'background', $key: 'light', $variant: 'color') {
$map: map-get($defaults, $arr);
$map: map-get($map, $key);
@return map-get($map, $variant);
}
// color scheme Light/Dark prestaged
$default-background-color: null;
$default-background-alt-color: null;
$default-background-item-color: null;
$default-surface-color: null;
$default-surface-alt-color: null;
$default-surface-item-color: null;
$default-border-color: null;
$default-shadow-color: null;
// color scheme Light/Dark variables
$defaults: (
'background': (
'dark': (
'color': $gray-900,
'alt': lighten($gray-900, 4%),
'item': darken($white, 12%)
),
'light': (
'color': $white,
'alt': darken($white, 4%),
'item': $gray-900
)
),
'surface': (
'dark': (
'color': lighten($gray-900, 8%),
'alt': lighten($gray-900, 12%),
'item': lighten($gray-900, 24%)
),
'light': (
'color': darken($white, 8%),
'alt': darken($white, 12%),
'item': darken($white, 36%)
)
),
'border': (
'dark': (
'color': rgba($white, 0.125)
),
'light': (
'color': rgba($black, 0.125)
)
),
'shadow': (
'dark': (
'color': $black
),
'light': (
'color': $black
)
),
);
@if $mode == dark {
// color scheme Background
$default-background-color: mode('background', 'dark', 'color');
$default-background-alt-color: mode('background', 'dark', 'alt');
$default-background-item-color: mode('background', 'dark', 'item');
// color scheme Surface
$default-surface-color: mode('surface', 'dark', 'color');
$default-surface-alt-color: mode('surface', 'dark', 'alt');
$default-surface-item-color: mode('surface', 'dark', 'item');
// color scheme Border
$default-border-color: mode('border', 'dark', 'color');
// color scheme Shadow
$default-shadow-color: mode('shadow', 'dark', 'color');
} @else if $mode == light {
// color scheme Background
$default-background-color: mode('background', 'light', 'color');
$default-background-alt-color: mode('background', 'light', 'alt');
$default-background-item-color: mode('background', 'light', 'item');
// color scheme Surface
$default-surface-color: mode('surface', 'light', 'color');
$default-surface-alt-color: mode('surface', 'light', 'alt');
$default-surface-item-color: mode('surface', 'light', 'item');
// color scheme Border
$default-border-color: mode('border', 'light', 'color');
// color scheme Shadow
$default-shadow-color: mode('shadow', 'light', 'color');
} @else if $mode == null {
// color scheme Background
$default-background-color: mode('background', 'light', 'color');
$default-background-alt-color: mode('background', 'light', 'alt');
$default-background-item-color: mode('background', 'light', 'item');
// color scheme Surface
$default-surface-color: mode('surface', 'light', 'color');
$default-surface-alt-color: mode('surface', 'light', 'alt');
$default-surface-item-color: mode('surface', 'light', 'item');
// color scheme Border
$default-border-color: mode('border', 'light', 'color');
// color scheme Shadow
$default-shadow-color: mode('shadow', 'light', 'color');
}
// color scheme Grays
$default-gray-light: $black-12 !default; // 12%
$default-gray: $black-38 !default; // 38%
$default-gray-dark: $black-54 !default; // 54%
$default-black: $black-87 !default; // 87%
// color scheme Primary
$default-primary-color: $blue-500 !default;
$default-primary-dark-color: $blue-700 !default;
$default-primary-light-color: $blue-300 !default;
$default-primary-item-color: $white !default;
$default-primary-item-light-color: $default-black !default;
// color scheme Secondary
$default-secondary-color: $pink-500 !default;
$default-secondary-dark-color: $pink-700 !default;
$default-secondary-light-color: $pink-300 !default;
$default-secondary-item-color: $white !default;
$default-secondary-item-light-color: $default-black !default;
// color shceme Error
$default-error-color: $red-500 !default;
$default-error-dark-color: $red-700 !default;
$default-error-light-color: $red-300 !default;
$default-error-item-color: $white !default;
$default-error-item-light-color: $default-black !default;
// color scheme Success
$default-success-color: $green-500 !default;
$default-success-dark-color: $green-700 !default;
$default-success-light-color: $green-300 !default;
$default-success-item-color: $white !default;
$default-success-item-light-color: $default-black !default;
// color scheme Warning
$default-warning-color: $amber-500 !default;
$default-warning-dark-color: $amber-700 !default;
$default-warning-light-color: $amber-300 !default;
$default-warning-item-color: $white !default;
$default-warning-item-light-color: $default-black !default;
// color scheme Info
$default-info-color: $blue-gray-500 !default;
$default-info-dark-color: $blue-gray-700 !default;
$default-info-light-color: $blue-gray-300 !default;
$default-info-item-color: $white !default;
$default-info-item-light-color: $default-black !default;
// color scheme
$default-link-color: $default-primary-color !default;
$default-link-color-hover: $default-primary-dark-color !default;
$default-action-bg: $default-surface-color !default;
$default-action-bg-hover: $default-surface-alt-color !default;
$default-action-color: $default-surface-item-color !default;
$default-action-color-hover: $default-primary-color !default;
$default-action-icon-color: $default-surface-item-color !default;
You can’t perform that action at this time.