components.sass

// Button
$btn-font-family: $heading-font-family !default
$btn-font-size: $meta-size !default
$btn-font-size-desktop: $meta-size-desktop !default
$btn-font-weight: normal !default
$btn-text-transform: none !default
$btn-color: var(--color-text) !default
$btn-hover-color: var(--color-text) !default
$btn-background: transparent !default
$btn-hover-background: var(--color-background) !default
$btn-border: pxToRem(1) solid var(--color-border) !default
$btn-hover-border: $btn-border !default
$btn-border-desktop: $btn-border !default
$btn-border-radius: pxToRem(4) !default
$btn-border-radius-desktop: $btn-border-radius !default
$btn-padding: pxToRem(12) pxToRem(10) !default
$btn-padding-desktop: pxToRem(18) pxToRem(16) !default
$btn-min-width: pxToRem(100) !default
$btn-min-width-desktop: pxToRem(190) !default

// Chip
$chip-background: var(--color-background) !default
$chip-background-hover: var(--color-background-alt) !default
$chip-border: 1px solid var(--color-border) !default
$chip-border-radius: $btn-border-radius !default
$chip-color: var(--color-text) !default

// Form
$form-btn-color: var(--color-background) !default
$form-btn-background-color: var(--color-accent) !default
$form-input-border-radius: 4px !default

// Header
$header-color: var(--color-text) !default
$header-hover-color: var(--color-accent) !default // TODO : Réflechir à plus élégant / générique
$header-background: var(--color-background-alt) !default
$header-transition: 0.3s !default
$header-dropdown-full: false !default
$header-dropdown-background: $header-background !default
$header-dropdown-color: $header-color !default
$header-dropdown-transition: $header-transition !default
$header-sticky-enabled: true !default
$header-sticky-background: var(--color-background) !default
$header-sticky-color: $header-color !default
$header-sticky-transition: $header-transition !default
$header-sticky-dropdown-background: $header-sticky-background !default
$header-sticky-dropdown-color: $header-sticky-color !default
$header-nav-padding-y: pxToRem(20) !default
$header-nav-padding-y-desktop: pxToRem(30) !default
$header-logo-height: 32px !default
$header-logo-height-desktop: $header-logo-height !default
$header-height: 87px !default
$header-height-desktop: 96px !default
$header-sticky-invert-logo: false !default
$header-border-bottom-width: 1px !default
$header-upper-menu-background: $header-background !default
$header-upper-menu-sticky-background: $header-sticky-background !default
$header-upper-menu-border-bottom-width: $header-border-bottom-width !default
$header-upper-menu-padding-y: $header-nav-padding-y !default
$header-upper-menu-padding-y-desktop: $header-upper-menu-padding-y !default
$header-upper-menu-mobile-height: pxToRem(50) !default

// Navs
$body-overlay-color: rgba(0, 0, 0, 0.3) !default

// Footer
$footer-color: var(--color-text) !default
$footer-background-color: var(--color-background-alt) !default
$footer-logo-height: $header-logo-height !default
$footer-logo-height-desktop: $footer-logo-height !default
$footer-icons-enabled: true !default
$footer-icons-size: pxToRem(20) !default
$footer-icons-size-desktop: pxToRem(16) !default
$footer-text-hidden: false !default
$dropdown-i18n-background-color: var(--color-background) !default
$dropdown-i18n-color: var(--color-text) !default

// Hero
$hero-height: 300px !default
$hero-height-desktop: 500px !default
$hero-color: var(--color-text) !default
$hero-background-color: var(--color-background-alt) !default
$hero-credit-color: var(--color-text-alt) !default

// Breadcrumb
$breadcrumb-color: $hero-color !default
$breadcrumb-color-active: $hero-color !default
$breadcrumb-icon: "arrow-right-s-line" !default
$breadcrumb-icon-color: var(--color-text-alt) !default

// System

// Lightbox
$lightbox-backdrop: blur(5px) !default
$lightbox-background-color: white !default
$lightbox-button-background-color: var(--color-background) !default
$lightbox-button-color: var(--color-text) !default
$lightbox-button-border-color: var(--color-border) !default
$lightbox-button-disabled-background: var(--color-background-alt) !default
$lightbox-button-disabled-color: var(--color-border) !default
$lightbox-detail-background: var(--color-background) !default
$lightbox-detail-color: var(--color-text) !default
$lightbox-detail-meta-color: var(--color-text-alt) !default
$lightbox-focus-outline-color: black !default

// Table of content
$toc-color: var(--color-text) !default
$toc-active-color: var(--color-accent) !default // TODO : checker ce que ça fait
$toc-background-color: var(--color-background-alt) !default
$toc-font-family: $body-font-family !default
$toc-font-size: $body-size !default
$toc-font-size-desktop: $body-size-desktop !default
$toc-line-height: $body-line-height !default
$toc-title-font-family: $meta-font-family !default
$toc-title-font-size: $meta-size !default
$toc-title-font-size-desktop: $meta-size-desktop !default
$toc-sticky-transition: 0.4s
$toc-overlay-color: $body-overlay-color !default

// Table
$table-head-font-size: $h4-size !default
$table-head-font-size-desktop: $h4-size-desktop !default
$table-body-size: $body-size !default
$table-body-size-desktop: $body-size-desktop !default