Personnalisez votre design

Prenez le contrôle, de votre UI

Vue d'ensemble

Par défaut, Sass Swing propose 3 couleurs. Une neutre, une primaire (primary) qui est la couleur de la marque et une secondaire (secondary). Chacune de ces couleurs dispose de 3 variantes. Ces couleurs sont au format HSL (en attendant les spécifications de CSS 4) pour mieux les contrôler.

En supplément, vous avez accès à un jeu de 4 couleurs supplémentaires avec chacune 2 variantes. Ces couleurs servent pour de référence pour les notifications et autres états. Ces états sont succès (success), information (info), attention (warning) et danger (danger). Leurs teintes sont respectivement, le vert, le bleu, l'orange et le rouge.

Sass Swing gère également deux modes de thème. Le mode clair (light) et le mode sombre (dark). Le thème utilisé est en fonction des préférences système de l'utilisateur.

Personnalisation

En fonction, que vous utilisez les fichiers css ou scss, l'approche est un peu différente. En CSS vous devrez configurer les variables css à la racine (:root). Tandis qu'en SCSS, ce seront les variables SCSS à redéfinir.

Avec SCSS

Les variables sont définies dans un fichier "partial" _theme-settings.scss avec des valeurs par défaut. Ce qui signifie, que vous pouvez écraser ces variables.

Les couleurs de base

Dans le dossier "styles/scss" de votre projet créez un fichier theme-settings.scss. Avec les variables suivantes :

@use './vendors/sass-swing/theme/colors' as *;
/* @use '../node_modules/sass-swing/src/scss/theme/colors' as *;
/* neutral light color */
$neutral-light-color: ;   // couleur de référence pour neutral
$on-neutral-light-color-s: ;
$on-neutral-light-color-l: ;
$neutral-shadow:;
$neutral-shadow-alt: ;

$neutral-light-color-variation-1-s: ;
$neutral-light-color-variation-1-l: ;
$on-neutral-light-color-variation-1-s: ;
$on-neutral-light-color-variation-1-l: ;

$neutral-light-color-variation-2-s: ;
$neutral-light-color-variation-2-l: ;
$on-neutral-light-color-variation-2-s: ;
$on-neutral-light-color-variation-2-l: ;

$neutral-light-color-variation-3-s: ;
$neutral-light-color-variation-3-l: ;
$on-neutral-light-color-variation-3-s: ;
$on-neutral-light-color-variation-3-l:;

/* neutral dark color */
$neutral-dark-color: ;
$neutral-dark-color-s: ;
$neutral-dark-color-l: ;
$on-neutral-dark-color-s: ;
$on-neutral-dark-color-l: ;

$neutral-dark-color-variation-1-s: ;
$neutral-dark-color-variation-1-l: ;
$on-neutral-dark-color-variation-1-s: ;
$on-neutral-dark-color-variation-1-l: ;

$neutral-dark-color-variation-2-s: ;
$neutral-dark-color-variation-2-l: ;
$on-neutral-dark-color-variation-2-s: ;
$on-neutral-dark-color-variation-2-l: ;

$neutral-dark-color-variation-3-s: ;
$neutral-dark-color-variation-3-l: ;
$on-neutral-dark-color-variation-3-s: ;
$on-neutral-dark-color-variation-3-l: ;

/* primary light color */
$brand-color: ; // couleur de référence pour primary

$primary-light-color-s: ;
$primary-light-color-l: ;
$primary-shadow: ;
$on-primary-light-color-s: ;
$on-primary-light-color-l: ;

$primary-light-color-variation-1-s: ;
$primary-light-color-variation-1-l: ;
$on-primary-light-color-variation-1-s: ;
$on-primary-light-color-variation-1-l: ;
$primary-shadow-variation-1: ;

$primary-light-color-variation-2-s: ;
$primary-light-color-variation-2-l: ;
$on-primary-light-color-variation-2-s: ;
$on-primary-light-color-variation-2-l: ;
$primary-shadow-variation-2: ;

$primary-light-color-variation-3-s: ;
$primary-light-color-variation-3-l: ;
$on-primary-light-color-variation-3-s:;
$on-primary-light-color-variation-3-l: ;
$primary-shadow-variation-3: ;

/* primary dark color */
$primary-dark-color-s: ;
$primary-dark-color-l: ;
$on-primary-dark-color-s: ;
$on-primary-dark-color-l: ;

$primary-dark-color-variation-1-s: ;
$primary-dark-color-variation-1-l: ;
$on-primary-dark-color-variation-1-s: ;
$on-primary-dark-color-variation-1-l: ;

$primary-dark-color-variation-2-s: ;
$primary-dark-color-variation-2-l: ;
$on-primary-dark-color-variation-2-s: ;
$on-primary-dark-color-variation-2-l: ;

$primary-dark-color-variation-3-s: ;
$primary-dark-color-variation-3-l: ;
$on-primary-dark-color-variation-3-s: ;
$on-primary-dark-color-variation-3-l: ;


/* Secondary light color */
$secondary-color: ;  //couleur de référence pour secondary"
$secondary-light-color-s: ;
$secondary-light-color-l: ;
$on-secondary-light-color-s: ;
$on-secondary-light-color-l: ;
$secondary-shadow: ;

$secondary-light-color-variation-1-s: ;
$secondary-light-color-variation-1-l: ;
$on-secondary-light-color-variation-1-s: ;
$on-secondary-light-color-variation-1-l: ;
$secondary-shadow-variation-1: ;

$secondary-light-color-variation-2-s: ;
$secondary-light-color-variation-2-l: ;
$on-secondary-light-color-variation-2-s: ;
$on-secondary-light-color-variation-2-l: ;
$secondary-shadow-variation-2: ;

$secondary-light-color-variation-3-s: ;
$secondary-light-color-variation-3-l: ;
$on-secondary-light-color-variation-3-s: ;
$on-secondary-light-color-variation-3-l: ;
$secondary-shadow-variation-3: ;

/* Secondary dark color */
$secondary-dark-color-s: ;
$secondary-dark-color-l: ;
$on-secondary-dark-color-s: ;
$on-secondary-dark-color-l: ;

$secondary-dark-color-variation-1-s: ;
$secondary-dark-color-variation-1-l: ;
$on-secondary-dark-color-variation-1-s: ;
$on-secondary-dark-color-variation-1-l: ;

$secondary-dark-color-variation-2-s: ;
$secondary-dark-color-variation-2-l: ;
$on-secondary-dark-color-variation-2-s: ;
$on-secondary-dark-color-variation-2-l: ;

$secondary-dark-color-variation-3-s: ;
$secondary-dark-color-variation-3-l: ;
$on-secondary-dark-color-variation-3-s: ;
$on-secondary-dark-color-variation-3-l: ;

La première ligne sert à importer une liste de couleurs prédéfinies. Vous n'êtes bien sûr pas obliger de l'utiliser et donc de l'importer

Comme vous l'avez remarqué, chaque couleur et variante ont une sous couleur préfixée avec on-. Celles-ci correspondent à la couleur contrastée pour l'écriture.

Dans la majorité des cas ont ne modifiera pas la saturation, celle-ci reste inchangée. Sass nous fournit des fonctions utiles pour manipuler des couleurs pour nous aider tel que saturation (que vous vous servirez très souvent) et lightness (très peu utiliser, voir pas du tout) qui nous renvoie la valeur en % de la saturation et de la luminosité.

C'est très simple de les utiliser. Exemple : $neutral-dark-color-s: saturation($neutral-dark-color);

Pour un thème optimal pour l'utilisateur et surtout pour les personnes ayant des capacités visuelles amoindries vous pouvez vous aider d'outils en ligne comme contrast-ratio pour vérifier que la norme WCAG soit respectée.

Vous l'aurez peut-être remarqué vous pouvez également définir les ombres. Variables comportant le mot clef : shadow.

Les couleurs supplémentaires

Comme cité plus haut vous pouvez personnaliser les couleurs supplémentaires.
Et là encore le format retenu est le HSL.

/* Success color */
$success-color: ; // couleur de référence pour success
$on-success-color-s: ;
$on-success-color-l: ;

$success-color-variation-1-s: ;
$success-color-variation-1-l: ;
$on-success-color-variation-1-s: ;
$on-success-color-variation-1-l: ;

$success-color-variation-2-s: ;
$success-color-variation-2-l: ;
$on-success-color-variation-2-s: ;
$on-success-color-variation-2-l: ;

/* Info color */
$info-color: ; // couleur de référence pour info
$on-info-color-s: ;
$on-info-color-l: ;

$info-color-variation-1-s: ;
$info-color-variation-1-l: ;
$on-info-color-variation-1-s: ;
$on-info-color-variation-1-l: ;

$info-color-variation-2-s: ;
$info-color-variation-2-l: ;
$on-info-color-variation-2-s: ;
$on-info-color-variation-2-l: ;

/* Warning color */
$warning-color: ; // couleur de référence pour warning
$on-warning-color-s: ;
$on-warning-color-l: ;

$warning-color-variation-1-s: ;
$warning-color-variation-1-l: ;
$on-warning-color-variation-1-s: ;
$on-warning-color-variation-1-l: ;

$warning-color-variation-2-s: ;
$warning-color-variation-2-l: ;
$on-warning-color-variation-2-s: ;
$on-warning-color-variation-2-l: ;

/* Danger color */
$danger-color: ; // couleur de référence pour danger
$on-danger-color-s: ;
$on-danger-color-l: ;

$danger-color-variation-1-s: ;
$danger-color-variation-1-l: ;
$on-danger-color-variation-1-s: ;
$on-danger-color-variation-1-l: ;

$danger-color-variation-2-s: ;
$danger-color-variation-2-l: ;
$on-danger-color-variation-2-s: ;
$on-danger-color-variation-2-l: ;

Ou bien encore, les couleurs des blocs de type <code> ou la couleur des titres <Hx> par exemple. Ici le format de couleur vous appartient. Hexadécimale, rgb/rgba, hsl/hsla.

/* misc colors */
$code-color-background: ;
$code-color-text: ;
$code-color-tag: ;
$code-color-property: ;
$code-color-value: ;
$code-color-var: ;
$code-color-comment: ;
$code-color-lang-background: ;
$code-color-lang-text: ;

$kbd-color-background: ;
$kbd-color-text: ;

$ins-color-background: ;
$ins-color-text: ;

$del-color-background: ;
$del-color-text: ;

$divider-light-color: ;
$divider-dark-color: ;

$h1-light-color: ;
$h2-light-color: ;
$h3-light-color: ;
$h4-light-color: ;
$h5-light-color: ;
$h6-light-color: ;

$h1-dark-color: ;
$h2-dark-color: ;
$h3-dark-color: ;
$h4-dark-color: ;
$h5-dark-color: ;
$h6-dark-color: ;

Sass Swing met à disposition quelques fonctions qui pourront vous être utile.

set-color-opacity($color, $opacity) : Modifie l'opacité d'une couleur RGB ou RGBA.
Avec $opacity compris entre 0 et 100
color-yiq($color, $threshold : 0.40) : Retourne la couleur contrastée en fonction de $color
Avec $threshold compris entre 0 et 1
create-neutral($color) : Retourne la couleur complémentaire en fonction de la température de $color
neutral-desaturate($color) : Retourne la couleur désaturée en fonction de la température de $color
make-shadow($preset:'custom', $color: #000, $inset: false, $left: 0, $top: 1, $blur: 1, $spread: 0, $unit: 'px')
Cette fonction va créer une ombre. Le paramètre $preset peut prendre les valeurs suivantes :
custom, realistic, smooth, smooth-light, medium, long, diffuse, sharp, dreamy, shorter ou longer

Ces fonctions sont disponibles dans le fichier functions.scss qu'il vous suffit d'importer avec @use "./vendors/sass-swing/abstract/function" as * au début de votre fichier.

Autres options personnalisables

En plus des couleurs, vous avez la possibilité de configurer quelques variables générales.

Ces variables, servent à définir les polices de caractères, la fluidité des tailles de police d'écriture des éléments. Ou encore le rythme vertical entre les différentes sections et éléments composants votre page.

// Famille des polices de caractères
$font-family-monospace: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace !default;
//consolas, 'Lucida Console', Monaco, courier, monospace !default;
$font-family-serif: Georgia, Times, 'Times New Roman', serif !default;
$font-family-sans: Roboto, Noto, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif !default;

$default-font-family: $font-family-sans !default;
$default-font-family-alt: $font-family-serif !default;

/* Hauteur entre les lignes de texte */
$default-line-height: ;
$default-line-height-ratio: 161.8033% !default; // cette valeur est exprimé en %

/* Taille de fluide pour le corps de la page */
$min-heading-font-size: ;
$max-heading-font-size: ;

/* Empattement des titres et global */
$default-heading-font-weight: 500 !default;
$default-font-weight: 400 !default;

/* Rythme vertical */
$vertical-flow-space-ratio: ;
$vertical-heading-flow-space-ratio: ;

$spacing: ;
$flow-spacing: ;
$block-spacing-vertical: ;
$min-block-spacing-vertical: ;

/* largeur minimal pour une colonne dans une grille */
$min-grid-col-width: 0 !default;

/* aspect général des blocs et bordure */
$global-border-width: 1px !default;
$global-outline-width: 2px !default;
$global-border-radius: 0.35rem !default;

Sass Swing fournit une fonction type-ratio pour vous aider à choisir les valeurs des variables contenant le mot clef ratio. Cette fonction prend en paramètre une chaine de caractère. Les paramètres disponibles sont :
minorSecond, majorSecond, minorThird, majorThird, perfectFourth, augmentedFourth, perfectFifth, goldenRatio et goldenSquareRatio

Cette fonction est disponible dans le fichier functions.scss qu'il vous suffit d'importer avec @use "./vendors/sass-swing/abstract/function" as * au début de votre fichier.

Avec CSS

La méthodologie est sensiblement la même qu'avec le SCSS. Les noms de variables sont exactement les mêmes que plus haut que nous allons remplacer le $ par --. Et de les englobées dans le sélecteur CSS :root et l'attribut. [theme-mode="theme-name"] dans un fichier css à part.

Pour le mode clair (light) il suffit de configurer les variables de cette manière :

[theme-mode="light"], :root,  {
  --neutral-color-h: ;
  --neutral-color-s: ;
  --neutral-color-l: ;
  --neutral-color: ;
    ...
}

Pour le mode sombre (dark) il faut ajouter la règle comme ceci :

@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --neutral-color-h: ;
    --neutral-color-s: ;
    --neutral-color-l: ;
    --neutral-color: ;
      ...
}

[data-theme='dark'] {
  --neutral-color-h: ;
  --neutral-color-s: ;
  --neutral-color-l: ;
  --neutral-color: ;
    ...
}

Il ne vous restera plus qu'à charger ce fichier APRES le fichier sass-swing.min.css dans le <head> de votre page

Créer ses propres classes

Une autre méthode pour personnaliser les éléments, est d'écrire une nouvelle classe. Chaque élément dans Sass Swing est configurable directement via des variables CSS locales. Les noms de ces classes sont faciles à retenir. En effet, elles reprennent le nom des propriétés CSS. Par exemple pour modifier la couleur de fond, dans votre classe, vous devrez simplement définir la variable --background-color.

Pour les éléments HTML comportant des états tel que Hover, Focus ect... Il suffira de préfixer les variables adéquats. Par exemple, vous souhaitez modifier la couleur d'un lien au survol de la souris. Rien de plus facile, ajoutez simplement la variable --hover-color

Bon à savoir, certains éléments comme les liens contiennent des variables propres supplémentaires pour modifier certaines propriétés.

De base, dans la majorité des cas, les éléments contiennent les variables locales suivantes :

--background-color : Changement de la couleur de fond
--color : Changement de la couleur d'écriture
--border-width : Changement de l'épaisseur des bordures
--border-color : Changement de la couleur des bordures
--border-radius : Changement du rayon de bordure

Exemples :

.myLink {
  --color: #4E342E;
  --decoration-color: #4E342E;

  --hover-color: #795548;
  --hover-decoration-color: #795548;
}

.myButton {
  --background-color: #A1887F;
  --border-color:#3E2723;
  --color:#1B2631;

  --active-background-color:#4E342E;
  --active-color:#D7CCC8;

  --hover-background-color:#4E342E;
  --hover-color:#D7CCC8;
  --hover-border-color:#795548;
}

Pour les informations détaillées sur la personnalisation de chaques éléments, veuillez vous reporter aux différentes sections de cette documentation.