Retrospring/app/javascript/styles/_variables.scss

105 lines
2.6 KiB
SCSS

// Font settings
$lexend-font-path: "~@fontsource/lexend/files";
$lexend-weights: 500, 600;
$fa-font-path: "~font-awesome/fonts";
$font-family-sans-serif: "Lexend", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-family-serif: Georgia, "DejaVu Serif", "Times New Roman", Times, serif;
$font-family-monospace: "PragmataPro", Monaco, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace;
$font-family-base: $font-family-sans-serif;
$font-size-base: 1rem;
$font-size-large: ceil(($font-size-base * 1.25)); // ~18px
$font-size-small: ceil(($font-size-base * 0.85)); // ~12px
$font-size-h1: floor(($font-size-base * 2.6)); // ~36px
$font-size-h2: floor(($font-size-base * 2.15)); // ~30px
$font-size-h3: ceil(($font-size-base * 1.7)); // ~24px
$font-size-h4: ceil(($font-size-base * 1.25)); // ~18px
$font-size-h5: $font-size-base;
$font-size-h6: ceil(($font-size-base * 0.85)); // ~12px
// Usual navbar height
$navbar-height: 56px;
// Color overrides for Bootstrap
$primary: #5e35b1;
// Cards
$card-border-width: 0;
// List Groups
$list-group-border-width: 0;
// nProgress
$nprogress-color: lighten($primary, 25%);
// Color names for theme generation
$color-names: (
"primary",
"danger",
"warning",
"info",
"success",
"dark",
"light"
);
// Avatar variables
$avatar-border-radius: 4px;
$avatar-sizes: (
"xs": 20px,
"sm": 30px,
"md": 40px,
"lg": 80px,
"xl": 120px,
"xxl": 160px,
);
$spacers: (
10: (1rem * 6)
);
:root {
--background: #f0edf4;
--input-bg: var(--background);
--raised-bg: #ffffff;
--raised-accent: #f7f7f7;
/**
NOTE for all *-text variables
----------------------------------------------
The text-variables are present as triplets
because in some places it's required to adjust
their transparency.
So, for general usage, use:
color: RGB(var(--*-text));
And for transparent usage, use:
color: rgba(var(--*-text), .7);
The uppercase RGB is required because internally
SassC wants more than one argument for rgb(),
hence writing RGB() bypasses that check, but
browsers interpret it correctly.
*/
--primary-text: 255, 255, 255;
--danger-text: 255, 255, 255;
--warning-text: 41, 41, 41;
--info-text: 255, 255, 255;
--success-text: 255, 255, 255;
--dark-text: 255, 255, 255;
--light-text: 0, 0, 0;
--body-text: 0, 0, 0;
--muted-text: 108, 117, 125;
--input-text: 0, 0, 0;
--turbolinks-progress-color: #a58adc; // --primary lightened by 25%
}
$gray: #e2e2e2;