mirror of
https://github.com/papercss/papercss
synced 2024-05-03 14:33:17 +02:00
301 lines
10 KiB
SCSS
301 lines
10 KiB
SCSS
/**
|
|
Global PaperCSS Config
|
|
*/
|
|
|
|
// The src for fonts (false to disable)
|
|
$font-src: 'https://fonts.googleapis.com/css?family=Neucha|Patrick+Hand+SC&display=swap' !default;
|
|
|
|
// Imports
|
|
@if $font-src {
|
|
@import url($font-src);
|
|
}
|
|
|
|
// Set theme colors
|
|
$primary: #41403e !default;
|
|
$secondary: #0b74d5 !default;
|
|
|
|
$success: #86a361 !default;
|
|
$warning: #ddcd45 !default;
|
|
$danger: #a7342d !default;
|
|
$muted: #868e96 !default;
|
|
|
|
$primary-light: lighten($primary, 55%) !default;
|
|
$secondary-light: lighten($secondary, 48%) !default;
|
|
$success-light: lighten($success, 32%) !default;
|
|
$warning-light: lighten($warning, 30%) !default;
|
|
$danger-light: lighten($danger, 45%) !default;
|
|
$muted-light: lighten($muted, 35%) !default;
|
|
|
|
$primary-dark: darken($primary, 50%) !default;
|
|
$secondary-dark: darken($secondary, 50%) !default;
|
|
$success-dark: darken($success, 30%) !default;
|
|
$warning-dark: darken($warning, 30%) !default;
|
|
$danger-dark: darken($danger, 45%) !default;
|
|
$muted-dark: darken($muted, 35%) !default;
|
|
|
|
$primary-light-10: lighten($primary, 10%) !default;
|
|
$secondary-light-10: lighten($secondary, 10%) !default;
|
|
$success-light-10: lighten($success, 10%) !default;
|
|
$warning-light-10: lighten($warning, 10%) !default;
|
|
$danger-light-10: lighten($danger, 10%) !default;
|
|
$muted-light-10: lighten($muted, 10%) !default;
|
|
|
|
$primary-dark-10: darken($primary, 10%) !default;
|
|
$secondary-dark-10: darken($secondary, 10%) !default;
|
|
$success-dark-10: darken($success, 23%) !default;
|
|
$warning-dark-10: darken($warning, 30%) !default;
|
|
$danger-dark-10: darken($danger, 10%) !default;
|
|
$muted-dark-10: darken($muted, 10%) !default;
|
|
|
|
$primary-shaded-70: lighten($primary, 70%) !default;
|
|
$primary-shaded-50: lighten($primary, 50%) !default;
|
|
|
|
$white-dark: rgba(#000, 0.03) !default;
|
|
$white-dark-light-80: lighten($white-dark, 80%) !default;
|
|
$light-dark: rgba(#000, 0.7) !default;
|
|
$white: rgba(#fff, 1) !default;
|
|
$main-background: rgba(#fff, 1) !default;
|
|
$black: rgba(#000, 1) !default;
|
|
$main-background-light: lighten($main-background, 50%) !default;
|
|
|
|
$primary-text: $primary-dark-10 !default;
|
|
$secondary-text: $secondary-dark-10 !default;
|
|
$success-text: $success-dark-10 !default;
|
|
$warning-text: $warning-dark-10 !default;
|
|
$danger-text: $danger-dark-10 !default;
|
|
$muted-text: $muted-dark-10 !default;
|
|
|
|
$shadow-color-regular: hsla(0, 0%, 0%, 0.2) !default;
|
|
$shadow-color-hover: hsla(0, 0%, 0%, 0.3) !default;
|
|
|
|
$primary-inverse: #fff !default;
|
|
|
|
|
|
// Set dark theme colors
|
|
|
|
$dark-primary: #fff !default;
|
|
$dark-secondary: #5595ce !default;
|
|
|
|
$dark-success: #70c272 !default;
|
|
$dark-warning: #d4c252 !default;
|
|
$dark-danger: #df4c57 !default;
|
|
$dark-muted: #868e96 !default;
|
|
|
|
$dark-primary-light: lighten($dark-primary, 5%) !default;
|
|
$dark-secondary-light: lighten($dark-secondary, 5%) !default;
|
|
$dark-success-light: lighten($dark-success, 5%) !default;
|
|
$dark-warning-light: lighten($dark-warning, 5%) !default;
|
|
$dark-danger-light: lighten($dark-danger, 5%) !default;
|
|
$dark-muted-light: lighten($dark-muted, 5%) !default;
|
|
|
|
$dark-primary-dark: darken($dark-primary, 50%) !default;
|
|
$dark-secondary-dark: darken($dark-secondary, 30%) !default;
|
|
$dark-success-dark: darken($dark-success, 35%) !default;
|
|
$dark-warning-dark: darken($dark-warning, 30%) !default;
|
|
$dark-danger-dark: darken($dark-danger, 30%) !default;
|
|
$dark-muted-dark: darken($dark-muted, 35%) !default;
|
|
|
|
$dark-primary-light-10: lighten($dark-primary, 10%) !default;
|
|
$dark-secondary-light-10: lighten($dark-secondary, 10%) !default;
|
|
$dark-success-light-10: lighten($dark-success, 10%) !default;
|
|
$dark-warning-light-10: lighten($dark-warning, 10%) !default;
|
|
$dark-danger-light-10: lighten($dark-danger, 10%) !default;
|
|
$dark-muted-light-10: lighten($dark-muted, 10%) !default;
|
|
|
|
$dark-primary-dark-10: darken($dark-primary, 10%) !default;
|
|
$dark-secondary-dark-10: darken($dark-secondary, 10%) !default;
|
|
$dark-success-dark-10: darken($dark-success, 10%) !default;
|
|
$dark-warning-dark-10: darken($dark-warning, 10%) !default;
|
|
$dark-danger-dark-10: darken($dark-danger, 10%) !default;
|
|
$dark-muted-dark-10: darken($dark-muted, 10%) !default;
|
|
|
|
$dark-primary-shaded-70: darken($primary, 7%) !default;
|
|
$dark-primary-shaded-50: darken($primary, 5%) !default;
|
|
|
|
$dark-white-dark: rgba(#fff, 0.03) !default;
|
|
$dark-white-dark-light-80: lighten($dark-white-dark, 80%) !default;
|
|
$dark-light-dark: rgba(#fff, 0.7) !default;
|
|
$dark-white: rgba(#fff, 1) !default;
|
|
$dark-main-background: rgba($primary, 1) !default;
|
|
$dark-main-background-light: lighten($dark-main-background, 50%) !default;
|
|
$dark-black: rgba(#000, 1) !default;
|
|
|
|
$dark-primary-text: $primary !default;
|
|
$dark-secondary-text: $dark-secondary-dark !default;
|
|
$dark-success-text: $dark-success-dark !default;
|
|
$dark-warning-text: $dark-warning-dark !default;
|
|
$dark-danger-text: $dark-danger-dark !default;
|
|
$dark-muted-text: $dark-muted-light !default;
|
|
|
|
$dark-shadow-color-regular: hsla(0, 0%, 0%, 0.2) !default;
|
|
$dark-shadow-color-hover: hsla(0, 0%, 0%, 0.3) !default;
|
|
|
|
$dark-primary-inverse: $primary !default;
|
|
|
|
|
|
|
|
$theme-map: (
|
|
light: (
|
|
primary: $primary,
|
|
secondary: $secondary,
|
|
success: $success,
|
|
warning: $warning,
|
|
danger: $danger,
|
|
muted: $muted,
|
|
primary-light: $primary-light,
|
|
secondary-light:$secondary-light,
|
|
success-light:$success-light,
|
|
warning-light:$warning-light,
|
|
danger-light:$danger-light,
|
|
muted-light:$muted-light,
|
|
primary-dark: $primary-dark,
|
|
secondary-dark:$secondary-dark,
|
|
success-dark:$success-dark,
|
|
warning-dark:$warning-dark,
|
|
danger-dark:$danger-dark,
|
|
muted-dark:$muted-dark,
|
|
primary-light-10:$primary-light-10,
|
|
secondary-light-10:$secondary-light-10,
|
|
success-light-10:$success-light-10,
|
|
warning-light-10:$warning-light-10,
|
|
danger-light-10:$danger-light-10,
|
|
muted-light-10:$muted-light-10,
|
|
primary-dark-10:$primary-dark-10,
|
|
secondary-dark-10:$secondary-dark-10,
|
|
success-dark-10:$success-dark-10,
|
|
warning-dark-10:$warning-dark-10,
|
|
danger-dark-10:$danger-dark-10,
|
|
muted-dark-10:$muted-dark-10,
|
|
primary-shaded-50: $primary-shaded-50,
|
|
primary-shaded-70: $primary-shaded-70,
|
|
white-dark:$white-dark,
|
|
white-dark-light-80:$white-dark-light-80,
|
|
light-dark:$light-dark,
|
|
'white':$white,
|
|
main-background: $main-background,
|
|
main-background-light: $main-background-light,
|
|
'black': $black,
|
|
primary-text:$primary-text,
|
|
secondary-text:$secondary-text,
|
|
success-text:$success-text,
|
|
warning-text:$warning-text,
|
|
danger-text:$danger-text,
|
|
muted-text:$muted-text,
|
|
shadow-color-regular: $shadow-color-regular,
|
|
shadow-color-hover: $shadow-color-hover,
|
|
primary-inverse: $primary-inverse,
|
|
),
|
|
dark: (
|
|
primary: $dark-primary,
|
|
secondary: $dark-secondary,
|
|
success: $dark-success,
|
|
warning: $dark-warning,
|
|
danger: $dark-danger,
|
|
muted: $dark-muted,
|
|
primary-light: $dark-primary-light,
|
|
secondary-light:$dark-secondary-light,
|
|
success-light:$dark-success-light,
|
|
warning-light:$dark-warning-light,
|
|
danger-light:$dark-danger-light,
|
|
muted-light:$dark-muted-light,
|
|
primary-dark: $dark-primary-dark,
|
|
secondary-dark:$dark-secondary-dark,
|
|
success-dark:$dark-success-dark,
|
|
warning-dark:$dark-warning-dark,
|
|
danger-dark:$dark-danger-dark,
|
|
muted-dark:$dark-muted-dark,
|
|
primary-light-10:$dark-primary-light-10,
|
|
secondary-light-10:$dark-secondary-light-10,
|
|
success-light-10:$dark-success-light-10,
|
|
warning-light-10:$dark-warning-light-10,
|
|
danger-light-10:$dark-danger-light-10,
|
|
muted-light-10:$dark-muted-light-10,
|
|
primary-dark-10:$dark-primary-dark-10,
|
|
secondary-dark-10:$dark-secondary-dark-10,
|
|
success-dark-10:$dark-success-dark-10,
|
|
warning-dark-10:$dark-warning-dark-10,
|
|
danger-dark-10:$dark-danger-dark-10,
|
|
muted-dark-10:$dark-muted-dark-10,
|
|
primary-shaded-50: $dark-primary-shaded-50,
|
|
primary-shaded-70: $dark-primary-shaded-70,
|
|
white-dark:$dark-white-dark,
|
|
white-dark-light-80:$dark-white-dark-light-80,
|
|
light-dark:$dark-light-dark,
|
|
'white':$dark-white,
|
|
main-background: $dark-main-background,
|
|
main-background-light: $dark-main-background-light,
|
|
'black': $dark-black,
|
|
primary-text:$dark-primary-text,
|
|
secondary-text:$dark-secondary-text,
|
|
success-text:$dark-success-text,
|
|
warning-text:$dark-warning-text,
|
|
danger-text:$dark-danger-text,
|
|
muted-text:$dark-muted-text,
|
|
shadow-color-regular: $dark-shadow-color-regular,
|
|
shadow-color-hover: $dark-shadow-color-hover,
|
|
primary-inverse: $dark-primary-inverse,
|
|
)
|
|
);
|
|
|
|
|
|
html {
|
|
@each $var in map-keys(map-get($theme-map, 'light')) {
|
|
--#{$var}: #{map-get(map-get($theme-map, 'light'), $var)};
|
|
}
|
|
}
|
|
|
|
html.dark {
|
|
@each $var in map-keys(map-get($theme-map, 'dark')) {
|
|
--#{$var}: #{map-get(map-get($theme-map, 'dark'), $var)};
|
|
}
|
|
}
|
|
|
|
|
|
@mixin color($property, $varName) {
|
|
// IE falls back to light theme always
|
|
#{$property}: #{map-get(map-get($theme-map, 'light'), 'primary')};
|
|
#{$property}: var(--#{$varName});
|
|
}
|
|
|
|
// Map to set your color names
|
|
/* stylelint-disable */
|
|
$colors: (primary, $primary, $primary-light, $primary-text),
|
|
(secondary, $secondary, $secondary-light, $secondary-text),
|
|
(success, $success, $success-light, $success-text),
|
|
(warning, $warning, $warning-light, $warning-text),
|
|
(danger, $danger, $danger-light, $danger-text),
|
|
(muted, $muted, $muted-light, $muted-text);
|
|
/* stylelint-enable */
|
|
|
|
/**
|
|
This Loop will generate the various .text- and .background- classes
|
|
based on the $colors map above.
|
|
*/
|
|
@each $colorName, $color, $color-light in $colors {
|
|
.text-#{$colorName} {
|
|
@include color('color',#{$colorName});
|
|
}
|
|
|
|
.background-#{$colorName} {
|
|
@include color('background-color',#{$colorName}-light);
|
|
}
|
|
}
|
|
|
|
// Font settings
|
|
$global-font-size: 20px !default;
|
|
$header-font: 'Patrick Hand SC' !default;
|
|
$body-font: 'Neucha' !default;
|
|
$font-color: $primary !default;
|
|
|
|
// Responsive breakpoints
|
|
$large-screen: 1200px !default;
|
|
$medium-screen: 992px !default;
|
|
$small-screen: 768px !default;
|
|
$xsmall-screen: 480px !default;
|
|
|
|
// Sizes for shadows
|
|
$shadow-small: 10px 19px 17px -13px $shadow-color-regular !default;
|
|
$shadow-regular: 15px 28px 25px -18px $shadow-color-regular !default;
|
|
$shadow-large: 20px 38px 34px -26px $shadow-color-regular !default;
|
|
$shadow-hover: 2px 8px 8px -5px $shadow-color-hover !default;
|