# Variabili

Variabili CSS

Questa versione predilige l'uso delle variabili native CSS 😉.
Se non ne conosci l'uso o semplicemente vuoi approfondire la questione, vedi questa pagina https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties (opens new window)

Nella versione 5 del tema child sono state introdotte le variabili native css.
Ovviamente le variabili SCSS non sono state abbandonate, anzi, è da queste che tutto lo stile, variabili css incluse, viene generato.
Ci sono però delle cose da capire su come è stato organizzato il nuovo sistema delle variabili, che è completamente cambiato rispetto alla versione 4.

Di fatto le variabili SCSS servono per semplificare la compilazione delle variabili CSS, che sono però quelle che dovranno essere usate all'interno delle regole di stile che verranno scritte nei file SCSS.
È importante dunque abbandonare l'uso delle variabili SCSS nelle regole di stile!

Prefisso delle variabili

Per evitare conflitti con le variabili css del tema parent o di altre librerie e/o plugin, tutte le variabili css del DiviChild hanno il prefisso --fc-
Puoi cambiare questo prefisso modificando la variabile scss $prefix

# Un esempio pratico

Prendendo ad esempio la regola del color del selettore body{} l'uso della variabile css è il seguente:

body{
    color: var(--fc-font-color-base);
}

Per evitare di dover ogni volta inserire il prefisso manualmente, e soprattutto renderlo dinamico (grazie all'apposita variabile) è stata resa disponibile una funzione SCSS:
css-var([string]nome-della-variabile-senza-prefisso).

body{
    color: css-var("font-color-base");
}

# Dove trovo le variabili?

Non esiste un file in cui sono elencate tutte le variabili CSS 😦
Queste vengono di fatte compilate nel file /core/_root.scss ma seguono una regola: hanno tutte lo stesso nome della variabile scss.

Attenzione! nonostante la regola appena accennata, molte variabili vengono generate da dei loop applicati a degli array di variabili scss, ottenute attraverso il mixin
make_css_vars_from_map($array,$base_variable_name,$prefix)
Ad esempio, le variabili del colore primario vengono ottenute in questo modo:

@include make_css_vars_from_map($primary,"primary",$prefix);

dove $primary è l'array dei colori primari contenuto nel file delle variabili SCSS:

$primary: (
    "50":  $primary-50,
    "100": $primary-100,
    "200": $primary-200,
    "300": $primary-300,
    "400": $primary-400,
    "500": $primary-500,
    "600": $primary-600,
    "700": $primary-700,
    "800": $primary-800,
    "900": $primary-900
);

Il mixin genererà tutte le seguenti variabili

--fc-primary-50: #e1f6fd;
--fc-primary-100: #b4e7fb;
--fc-primary-200: #82d7f8;
--fc-primary-300: #52c6f5;
--fc-primary-400: #2dbaf4;
--fc-primary-500: #05aef3;
--fc-primary-600: #00a0e4;
--fc-primary-700: #008dd0;
--fc-primary-800: #007bbc;
--fc-primary-900: #005b9b;

# Override delle variabili

Per sovrascrivere le variabili native, è sufficiente riscriverle, mantenendo lo stesso nome ma attibuendogli il nuovo valore, nel file:
/custom/_variables--override.scss

# Variabili custom

Le variabili custom vanno aggiunte nel file:
/custom/_variables--custom.scss
e poi "trasformate" in variabili css all'interno della regola :root{} nel file:
/custom/_root--custom.scss

Esempio:
Inserire nel file /custom/_variables--custom.scss la nuova variabile scss:

$nuova-variabile: 1rem;

Nel file /custom/_root--custom.scss la variabile dovrà poi essere trasformata in css:

--#{$prefix}nuova-variabile: #{$nuova-variabile};
/**
Questo genererà la nuova variabile css
--fc-nuova-variabile: 1rem;
*/

Userete poi la nuova variabile in questo modo:

.selettore {
    margin: css-var('nuova-variabile')
}

# Elenco delle variabili CSS

Di seguito l'elenco delle variabili CSS con i valori di default.

Attenzione!

Questo elenco potrebbe essere cambiato. Puoi trovare l'elenco sempre completo delle variabili ispezionando il codice cercando le specifiche in :root{}

# Lightmode

:root {
    --fc-spacer: 1.25rem;
    --fc-spacer-xxs: 0.25rem;
    --fc-spacer-xs: 0.3125rem;
    --fc-spacer-s: 0.625rem;
    --fc-spacer-m: 1.25rem;
    --fc-spacer-l: 2.5rem;
    --fc-spacer-xl: 3.75rem;
    --fc-spacer-xxl: 5rem;
    --fc-white: #fff;
    --fc-black: #000;
    --fc-neutral-50: #f6fbff;
    --fc-neutral-100: #f1f6fc;
    --fc-neutral-200: #ecf2f7;
    --fc-neutral-300: #dfe5ea;
    --fc-neutral-400: #bdc2c7;
    --fc-neutral-500: #9fa3a9;
    --fc-neutral-600: #757a7f;
    --fc-neutral-700: #61666a;
    --fc-neutral-800: #42464b;
    --fc-neutral-900: #212529;
    --fc-neutral-light: #ecf2f7;
    --fc-neutral-main: #9fa3a9;
    --fc-neutral-dark: #212529;
    --fc-primary-50: #e1f6fd;
    --fc-primary-100: #b4e7fb;
    --fc-primary-200: #82d7f8;
    --fc-primary-300: #52c6f5;
    --fc-primary-400: #2dbaf4;
    --fc-primary-500: #05aef3;
    --fc-primary-600: #00a0e4;
    --fc-primary-700: #008dd0;
    --fc-primary-800: #007bbc;
    --fc-primary-900: #005b9b;
    --fc-primary-light: #82d7f8;
    --fc-primary-main: #05aef3;
    --fc-primary-dark: #005b9b;
    --fc-secondary-50: #fbe4ef;
    --fc-secondary-100: #f6bbd7;
    --fc-secondary-200: #f38fbd;
    --fc-secondary-300: #f060a2;
    --fc-secondary-400: #ee3a8c;
    --fc-secondary-500: #ee0076;
    --fc-secondary-600: #dc0072;
    --fc-secondary-700: #c5036b;
    --fc-secondary-800: #b00366;
    --fc-secondary-900: #8a035d;
    --fc-secondary-light: #f38fbd;
    --fc-secondary-main: #ee0076;
    --fc-secondary-dark: #8a035d;
    --fc-error-light: #f44336;
    --fc-error-main: #f44336;
    --fc-error-dark: #d32f2f;
    --fc-warning-light: #ffb74d;
    --fc-warning-main: #ffa726;
    --fc-warning-dark: #f57c00;
    --fc-info-light: #4fc3f7;
    --fc-info-main: #29b6f6;
    --fc-info-dark: #0288d1;
    --fc-success-light: #81c784;
    --fc-success-main: #66bb6a;
    --fc-success-dark: #388e3c;
    --fc-background-primary: #fff;
    --fc-background-secondary: #dfe5ea;
    --fc-border-base-width: 1px;
    --fc-border-base-style: solid;
    --fc-border-base-color: #9fa3a9;
    --fc-border-default-light: 1px solid #ecf2f7;
    --fc-border-default: 1px solid #9fa3a9;
    --fc-border-default-dark: 1px solid #212529;
    --fc-border-color-light: #ecf2f7;
    --fc-border-color-main: #9fa3a9;
    --fc-border-color-dark: #212529;
    --fc-font-weight-thin: 200;
    --fc-font-weight-light: 300;
    --fc-font-weight-regular: 400;
    --fc-font-weight-semibold: 500;
    --fc-font-weight-bold: 700;
    --fc-font-weight-black: 900;
    --fc-font-color-base: #212529;
    --fc-font-color-light: #bdc2c7;
    --fc-font-color-medium: #757a7f;
    --fc-font-color-dark: #212529;
    --fc-font-family-base: Helvetica, Arial, sans-serif;
    --fc-font-size-base: 16px;
    --fc-line-height-base: 1.2em;
    --fc-title-1-size-xs: 1.7rem;
    --fc-title-1-size-sm: 1.8rem;
    --fc-title-1-size-md: 2rem;
    --fc-title-1-size-lg: 2.1rem;
    --fc-title-1-size-xl: 2.2rem;
    --fc-title-2-size-xs: 1.3rem;
    --fc-title-2-size-sm: 1.4rem;
    --fc-title-2-size-md: 1.5rem;
    --fc-title-2-size-lg: 1.6rem;
    --fc-title-2-size-xl: 1.7rem;
    --fc-title-3-size-xs: 1.06rem;
    --fc-title-3-size-sm: 1.07rem;
    --fc-title-3-size-md: 1.17rem;
    --fc-title-3-size-lg: 1.27rem;
    --fc-title-3-size-xl: 1.37rem;
    --fc-title-4-size-xs: 0.8rem;
    --fc-title-4-size-sm: 0.9rem;
    --fc-title-4-size-md: 1rem;
    --fc-title-4-size-lg: 1.1rem;
    --fc-title-4-size-xl: 1.2rem;
    --fc-title-5-size-xs: 0.63rem;
    --fc-title-5-size-sm: 0.73rem;
    --fc-title-5-size-md: 0.83rem;
    --fc-title-5-size-lg: 0.93rem;
    --fc-title-5-size-xl: 1.03rem;
    --fc-title-6-size-xs: 0.47rem;
    --fc-title-6-size-sm: 0.57rem;
    --fc-title-6-size-md: 0.67rem;
    --fc-title-6-size-lg: 0.87rem;
    --fc-title-6-size-xl: 0.97rem;
    --fc-link-color-base: #05aef3;
    --fc-link-color-hover: #82d7f8;
    --fc-link-color-visited: #005b9b;
    --fc-link-color-active: #05aef3;
    --fc-link-color-focus: #05aef3;
}

# Darkmode

Di seguito l'elenco delle variabili soggette a variazione nel Darkmode (se attivo).

TIP

Vedi maggiori info sul Darkmode nell'apposita sezione della documentazione.

:root {
    --fc-neutral-light: #f6fbff;
    --fc-neutral-main: #ecf2f7;
    --fc-neutral-dark: #9fa3a9;
    --fc-font-color-base: #f1f6fc;
    --fc-font-color-light: #ecf2f7;
    --fc-font-color-medium: #bdc2c7;
    --fc-font-color-dark: #9fa3a9;
    --fc-background-primary: #000;
    --fc-background-secondary: #757a7f;
    --fc-border-base-color: #dfe5ea;
    --fc-border-default-light: 1px solid #f6fbff;
    --fc-border-default: 1px solid #dfe5ea;
    --fc-border-default-dark: 1px solid #dfe5ea;
    --fc-border-color-light: #f6fbff;
    --fc-border-color-main: #dfe5ea;
    --fc-border-color-dark: #dfe5ea;
    --fc-link-color-base: #05aef3;
    --fc-link-color-hover: #82d7f8;
    --fc-link-color-visited: #005b9b;
    --fc-link-color-active: #05aef3;
    --fc-link-color-focus: #05aef3;
}

← Codice Custom Breakpoints →