hugo-geekdoc/src/sass/_defaults.scss
Robert Kaussow 80ddd27307
fix: adjust default color scheme to fix some contrast issues (#610)
BREAKING CHANGE: This change has adjusted the default color scheme and brand icon. There is no real functional break, but since the look and feel has changed, you might consider this as such.
2023-04-19 16:28:08 +02:00

99 lines
2.8 KiB
SCSS

// Used in layout
$padding-2: 0.125rem !default;
$padding-4: 0.25rem !default;
$padding-8: 0.5rem !default;
$padding-12: 0.75rem !default;
$padding-16: 1rem !default;
$padding-20: 1.25rem !default;
$padding-24: 1.5rem !default;
$padding-32: 2rem !default;
$padding-48: 3rem !default;
$padding-64: 4rem !default;
$padding-96: 6rem !default;
$font-size-base: 16px !default;
$font-size-12: 0.75rem !default;
$font-size-14: 0.875rem !default;
$font-size-16: 1rem !default;
$font-size-20: 1.25rem !default;
$font-size-24: 1.5rem !default;
$font-size-32: 2rem !default;
$font-size-64: 4rem !default;
$font-size-96: 6rem !default;
$font-size-128: 8rem !default;
$border-1: 1px !default;
$border-2: 1.5px !default;
$border-4: 3px !default;
$border-radius: 0.15rem !default;
// Grayscale
$white: rgba(255, 255, 255, 1) !default;
$gray-100: rgba(248, 249, 250, 1) !default;
$gray-200: rgba(233, 236, 239, 1) !default;
$gray-300: rgba(222, 226, 230, 1) !default;
$gray-400: rgba(206, 212, 218, 1) !default;
$gray-500: rgba(173, 181, 189, 1) !default;
$gray-600: rgba(134, 142, 150, 1) !default;
$gray-700: rgba(73, 80, 87, 1) !default;
$gray-800: rgba(52, 58, 64, 1) !default;
$gray-900: rgba(33, 37, 41, 1) !default;
$black: rgba(0, 0, 0, 1) !default;
$link-color: rgba(10, 83, 154, 1) !default;
$link-color-visited: rgba(119, 73, 191, 1) !default;
$link-color-footer: rgba(246, 107, 14, 1) !default;
$body-background: white !default;
$body-font-color: $gray-800 !default;
$body-font-weight: normal !default;
$body-min-width: 20rem !default;
$code-font-color: rgba(70, 70, 70, 1) !default;
$code-font-color-dark: rgba(185, 185, 185, 1) !default;
$container-max-width: 82rem !default;
$main-color: rgba(32, 83, 117, 1) !default;
$second-color: rgba(17, 43, 60, 1) !default;
$mark-color: rgba(255, 171, 0, 1) !default;
$body-background-dark: mix(invert($body-background, 75%), $second-color) !default;
$body-font-color-dark: $gray-100 !default;
$link-color-dark: rgba(110, 168, 212, 1) !default;
$link-color-visited-dark: rgba(186, 142, 240) !default;
$code-background: $gray-100 !default;
$code-background-dark: darken($body-background-dark, 3) !default;
$header-height: 3.5rem !default;
$menu-width: 18rem !default;
$sm-breakpoint: $menu-width + $body-min-width + 3rem !default;
// Panel colors
$hint-colors: (
info: rgba(0, 145, 234, 1),
note: rgba(0, 145, 234, 1),
ok: rgba(0, 200, 83, 1),
tip: rgba(0, 200, 83, 1),
important: rgba(255, 171, 0, 1),
caution: rgba(115, 0, 211, 1),
danger: rgba(213, 0, 0, 1),
warning: rgba(213, 0, 0, 1)
) !default;
// Panel colors
$hint-icons: (
info: "gdoc_info_outline",
note: "gdoc_info_outline",
ok: "gdoc_check_circle_outline",
tip: "gdoc_check_circle_outline",
important: "gdoc_error_outline",
caution: "gdoc_dangerous",
danger: "gdoc_fire",
warning: "gdoc_fire"
) !default;