KNACSS/sass/abstracts/_variables-sass.scss

// ----------------
// Config Sass et variables
// ----------------

// ----------------
// Valeurs de Breakpoints
// ----------------

// Hypothèse : smartphone portrait/paysage < 576px < gros smartphone paysage + tablette portrait < 992px < tablette paysage < 1330px < laptop et plus
$breakpoints: (sm: 576px,
  md: 992px,
  lg: 1400px,
) !default;

$small: map-get($breakpoints, sm) !default;
$medium: map-get($breakpoints, md) !default;
$large: map-get($breakpoints, lg) !default;

// ----------------
// Spacers
// ----------------

$spacers: ("0": 0,
  // none
  "2": 0.125rem,
  // tiny
  "5": 0.313rem,
  // tiny-plus
  "8": 0.5rem,
  // small
  "10": 0.625rem,
  // small-plus
  "16": 1rem,
  // medium
  "20": 1.25rem,
  // medium-plus
  "24": 1.5rem,
  // large
  "36": 2.25rem,
  // large-plus
  "auto": auto,
) !default;

$spacer-none: map-get($spacers, "0") !default;
$spacer-tiny: map-get($spacers, "2") !default;
$spacer-tiny-plus: map-get($spacers, "5") !default;
$spacer-small: map-get($spacers, "8") !default;
$spacer-small-plus: map-get($spacers, "10") !default;
$spacer-medium: map-get($spacers, "16") !default;
$spacer-medium-plus: map-get($spacers, "20") !default;
$spacer-large: map-get($spacers, "24") !default;
$spacer-large-plus: map-get($spacers, "36") !default;

// ----------------
// Grid layout
// ----------------

$grid-columns: 6 !default;

$gaps: ("0": 0,
  "5": 0.313rem,
  "10": 0.625rem,
  "16": 1rem,
  "20": 1.25rem,
  "36": 2.25rem,
) !default;

// ----------------
// Fonts
// ----------------

// Familles de fonts
$font-family-base: system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Oxygen-Sans,
Ubuntu,
Cantarell,
"Helvetica Neue",
sans-serif;
$font-family-headings: sans-serif;
$font-family-monospace: consolas,
courier,
monospace;
$line-height-base: 1.5;

// Font sizes
$font-size: ("10": 0.625rem,
  "11": 0.6875rem,
  "12": 0.75rem,
  "14": 0.875rem,
  "16": 1rem,
  "18": 1.125rem,
  "20": 1.25rem,
  "24": 1.5rem,
  "30": 1.875rem,
  "36": 2.25rem,
  "base": 1rem,
  "inherit": inherit,
);

$font-size-html: 100%;
$font-size-base: 1rem;

// Graisses des Fonts
$weight-light: 200;
$weight-book: 300;
$weight-regular: 400;
$weight-medium: 500;
$weight-bold: 700;

// ----------------
// Couleurs
// ----------------

// Variables niveaux de gris

$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$white: #FFFFFF;
$black: #0F0F0F;


// Variables couleurs globales

$body-color: $gray-900;
$body-bg: $white;

$primary: #6fa939; // Couleur dominante. Elle peut s'appliquer à la fois à des surfaces ou à des contenus.
$primary-accent: #4e920f; // Modifieur de couleur dominante (survol, bordure)
$on-primary: $white; // Contenus (texte, lien, icône) affichés par-dessus une couche $primary

$secondary: #008cba; // Couleur d'accentuation. Elle s'applique généralement aux liens, mais peut s'appliquer à la fois à des surfaces ou à des contenus.
$secondary-accent: #027da7; // Modifieur de couleur d'accentuation (survol, bordure)
$on-secondary: $white; // Contenus affichés par-dessus une couche $secondary

// Variables couleurs statuts

$success: #dff0d9;
$success-border: #d6e9c6;
$on-success: #28a745; // contenu sur couche success
$on-success-accent: #4d9c4d; // lien sur couche success

$info: #d9edf7;
$info-border: #bce8f1;
$on-info: #17a2b8;
$on-info-accent: #4fa8c4;

$warning: #fcf8e3;
$warning-border: #faebcc;
$on-warning: #ffc107;
$on-warning-accent: #d19644;

$error: #fff2f2;
$error-border: #ebccd1;
$on-error: #d9534f;
$on-error-accent: #be4945;


// Links
$link-decoration: underline;
$link-decoration-hover: underline;

// Border radius
$radius-none: 0;
$radius-small: 0.5rem;
$radius-medium: 1rem;
$radius-large: 2rem;
$radius-circle: 50%;

// ----------------
// Liste des propriétés utilitaires (note display: grid se trouve dans Grillade)
// ----------------
$utils: ((hidden, display, none),
  (block, display, block),
  (inline, display, inline),
  (inline-block, display, inline-block),
  (flex, display, flex),
  (flex-row, flex-direction, row),
  (flex-col, flex-direction, column),
  (flex-wrap, flex-wrap, wrap),
  (flex-no-wrap, flex-wrap, nowrap),
  (flex-shrink, flex-shrink, 1),
  (flex-no-shrink, flex-shrink, 0),
  (flex-grow, flex-grow, 1),
  (flex-no-grow, flex-grow, 0),
  (float-left, float, left),
  (float-right, float, right),
  (float-none, float, none),
  (text-bold, font-weight, bold),
  (text-italic, font-style, italic),
  (text-uppercase, text-transform, uppercase),
  (text-lowercase, text-transform, lowercase),
  (text-smaller, font-size, smaller),
  (text-bigger, font-size, bigger),
  (text-left, text-align, left),
  (text-center, text-align, center),
  (text-right, text-align, right),
  (text-justify, text-align, justify),
  (text-wrap, overflow-wrap, break-word),
  (justify-start, justify-content, flex-start),
  (justify-end, justify-content, flex-end),
  (justify-center, justify-content, center),
  (justify-between, justify-content, space-between),
  (justify-around, justify-content, space-around),
  (justify-evenly, justify-content, space-evenly),
  (justify-items-start, justify-items, start),
  (justify-items-end, justify-items, end),
  (justify-items-center, justify-items, center),
  (align-start, align-content, start),
  (align-end, align-content, end),
  (align-center, align-content, center),
  (align-between, align-content, space-between),
  (align-around, align-content, space-around),
  (align-evenly, align-content, space-evenly),
  (align-items-start, align-items, flex-start),
  (align-items-end, align-items, flex-end),
  (align-items-center, align-items, center),
  (place-center, place-content, center),
  (justify-self-auto, justify-self, auto),
  (justify-self-start, justify-self, start),
  (justify-self-end, justify-self, end),
  (justify-self-center, justify-self, center),
  (justify-self-stretch, justify-self, stretch),
  (align-self-auto, align-self, auto),
  (align-self-start, align-self, flex-start),
  (align-self-end, align-self, flex-end),
  (align-self-center, align-self, center),
  (align-self-stretch, align-self, stretch),
  (align-top, vertical-align, top),
  (align-bottom, vertical-align, bottom),
  (align-middle, vertical-align, middle),
  (item-first, order, -100),
  (item-last, order, 100)) !default;