Implémentation des custom properties (font, heading, color, border et space) + changer unité des fonts (px -> rem)

[raphpare]

Description

Voici un résumé des modifications qui ont été apportées:

• Implémentation des variable CSS (custom-proterties) pour les couleurs et les taille de font.
• Supprimer toutes les fonction SASS (@function)
  • Le dossier modul-components/src/styles/fonctions et les fichiers du dossier ont été supprimer
  • Les @function m-color(), map-has-deep-key() et m-spacing ont été supprimer
• Renommer et déplacer le fichier .scss d'importation des fonts avec des @font-face
  • Ancien chemin d'accès
  • modul-components/src/styles/font/_font.scss
  • Nouveau chemin d'accès
  • modul-components/src/styles/base/_font-setup.scss
• Suppression des mixins SASS suivantes:
  • m-h1-font-style()
  • m-h2-font-style()
  • m-h3-font-style()
  • m-h4-font-style()
  • m-h5-font-style()
  • m-h6-font-style()
• Suppression des variables SASS commençant par $m-padding... et $m-margin...
• Suppression des variables CSS (custom-properties) commençant par --m-base...
• Changement dans les noms de classe utilitaire
  • Les classes CSS commençant par 'm-u--' ont été remplacé par 'mu-'.
  • Voir les tableaux de comparatifs de changement de noms de classes CSS.
• Utilisation de l'unité rem dans le font-size.
  • Toutes les valeurs en pixel pour la définition du font-size ont été remplacer par l'unité rem.
  • Il faut utiliser la mixin SASS m-font-size('<dimension>') pour changer la taille d'une font.

Mixin SASS m-font-size('<dimension>')

Valeurs possibles du paramètre <dimension>

Valeur	Description
'h1'	Permet d'obtenir le font-size d'un titre de niveau 1
'h2'	Permet d'obtenir le font-size d'un titre de niveau 2
'h3'	Permet d'obtenir le font-size d'un titre de niveau 3
'h4'	Permet d'obtenir le font-size d'un titre de niveau 4
'h5'	Permet d'obtenir le font-size d'un titre de niveau 5
'h6'	Permet d'obtenir le font-size d'un titre de niveau 6
'base'	Permet d'obtenir le font-size de base à la racine du site
'xl'	Permet d'obtenir le font-size très large (22px)
'lg'	Permet d'obtenir le font-size large (20px)
'md'	Permet d'obtenir le font-size medium (18px)
'sm'	Permet d'obtenir le font-size petit (14px)
'xs'	Permet d'obtenir le font-size très petit (12px)

Tableaux comparatifs des changements de noms de variables

Variables de font-size

Nom variable SASS	Nouveau nom de variable SASS	Nom variable CSS	Nouvelle valeur
$m-font-family	Variable supprimée	--m-font-family	Aucun changement
$m-font-family--fallback	Variable supprimée	--m-font-family-fallback	Aucun changement
----------	----------	----------	----------
-	$m-font-size-xl	-	22
$m-font-size--l (18px)	$m-font-size-lg	-	20
-	$m-font-size-md	-	18
$m-font-size (16px)	$m-font-size	-	16
$m-font-size--s (14px)	$m-font-size-sm	-	14
$m-font-size--xs (12px)	$m-font-size-xs	-	12
----------	----------	----------	----------
$m-font-size--h1	$m-font-size-h1	--m-font-size-h1	Mobile: 26 / Desktop: 36
$m-font-size--h2	$m-font-size-h2	--m-font-size-h2	Mobile: 24 / Desktop: 32
$m-font-size--h3	$m-font-size-h3	--m-font-size-h3	Mobile: 22 / Desktop: 28
$m-font-size--h4	$m-font-size-h4	--m-font-size-h4	Mobile: 20 / Desktop: 24
$m-font-size--h5	$m-font-size-h5	--m-font-size-h5	Mobile: 18 / Desktop: 20
$m-font-size--h6	$m-font-size-h6	--m-font-size-h6	Mobile: 16 / Desktop: 16
----------	----------	----------	----------
$m-font-size--mobile-h1	Variable supprimée	-	-
$m-font-size--mobile-h2	Variable supprimée	-	-
$m-font-size--mobile-h3	Variable supprimée	-	-
$m-font-size--mobile-h4	Variable supprimée	-	-
$m-font-size--mobile-h5	Variable supprimée	-	-
$m-font-size--mobile-h6	Variable supprimée	-	-

Note

• L'unité px a été retirer pour obtenir que des valeurs relatives à la font de base de 1rem équivalent à 16px.

Variables font-weight

Nom variable SASS	Nouveau nom de variable SASS
$m-font-weight--black	$m-font-weight-black
$m-font-weight--bold	$m-font-weight-bold
$m-font-weight--semi-bold	$m-font-weight-semi-bold
$m-font-weight--regular	$m-font-weight-regular
$m-font-weight	$m-font-weight
$m-font-weight--light	$m-font-weight-light

Variables colors

Nom variable SASS	Nouveau nom de variable SASS	Nom variable CSS	Valeur
$m-color--ul-blue	$m-color-ul-blue	--m-color-ul-blue	#09f
$m-color--ul-yellow	$m-color-ul-yellow	--m-color-ul-yellow	#ffc103
$m-color--ul-red	$m-color-ul-red	--m-color-ul-red	#e30513
----------	----------	----------	----------
$m-color--grey-black	$m-color-grey-black	--m-color-grey-black	#1f1f1f
$m-color--grey-darkest	$m-color-grey-darkest	--m-color-grey-darkest	#2e2e2e
$m-color--grey-darker	$m-color-grey-darker	--m-color-grey-darker	#3d3d3d
$m-color--grey-dark	$m-color-grey-dark	--m-color-grey-dark	#696969
$m-color--grey	$m-color-grey	--m-color-grey	#929292
$m-color--grey-light	$m-color-grey-light	--m-color-grey-light	#d7d7d7
$m-color--grey-lighter	$m-color-grey-lighter	--m-color-grey-lighter	#f4f4f4
$m-color--grey-lightest	$m-color-grey-lightest	--m-color-grey-lightest	#f9f9f9
----------	----------	----------	----------
$m-color--black	$m-color-black	--m-color-black	#000
$m-color--white	$m-color-white	--m-color-white	#fff
$m-color--text	$m-color-text	--m-color-text	#000
$m-color--text-light	$m-color-text-light	--m-color-text-light	#757575
----------	----------	----------	----------
$m-color--success-dark	$m-color-success-dark	--m-color-success-dark	#009962
$m-color--success	$m-color-success	--m-color-success	#00c77f
$m-color--success-light	$m-color-success-light	--m-color-success-light	#cdf3e3
$m-color--success-lightest	$m-color-success-lightest	--m-color-success-lightest	#eaf9f1
----------	----------	----------	----------
$m-color--warning	$m-color-warning	--m-color-warning	#ffc103
$m-color--warning-lightest	$m-color-warning-lightest	--m-color-warning-lightest	#fff8e6
----------	----------	----------	----------
$m-color--error-dark	$m-color-error-dark	--m-color-error-dark	#b3040f
$m-color--error	$m-color-error	--m-color-error	#e30513
$m-color--error-lightest	$m-color-error-lightest	--m-color-error-lightest	#fcf2f3
----------	----------	----------	----------
$m-color--interactive-darker	$m-color-interactive-darker	--m-color-interactive-darker	#0b46ac
$m-color--interactive-dark	$m-color-interactive-dark	--m-color-interactive-dark	#1854be
$m-color--interactive	$m-color-interactive	--m-color-interactive	#096edf
$m-color--interactive-light	$m-color-interactive-light	--m-color-interactive-light	#09f
$m-color--interactive-lighter	$m-color-interactive-lighter	--m-color-interactive-lighter	#6ed2ff
$m-color--interactive-lightest	$m-color-interactive-lightest	--m-color-interactive-lightest	#dffaff
$m-color--information	$m-color-information	--m-color-information	#eaf5ff
----------	----------	----------	----------
$m-color--accent-dark	$m-color-accent-dark	--m-color-accent-dark	#
$m-color--accent	$m-color-accent	--m-color-accent	#
$m-color--accent-light	$m-color-accent-light	--m-color-accent-light	#
$m-color--accent-lightest	$m-color-accent-lightest	--m-color-accent-lightest	#
----------	----------	----------	----------
$m-color--active	$m-color-active	--m-color-active	#ffc103
----------	----------	----------	----------
$m-color--disabled-dark	$m-color-disabled-dark	--m-color-disabled-dark	#696969
$m-color--disabled	$m-color-disabled	--m-color-disabled	#929292
$m-color--disabled-light	$m-color-disabled-light	--m-color-disabled-light	#d7d7d7
----------	----------	----------	----------
$m-color--scrollbar	$m-color-scrollbar	--m-color-scrollbar	#929292
$m-color--scrollbar-light	$m-color-scrollbar-light	--m-color-scrollbar-light	#d7d7d7
----------	----------	----------	----------
$m-color--border-dark	$m-color-border-dark	--m-color-border-dark	#696969
$m-color--border	$m-color-border	--m-color-border	#d7d7d7
$m-color--border-light	$m-color-border-light	--m-color-border-light	#f4f4f4

Variables spaces

Nom variable SASS	Nouveau nom de variable SASS	Nouvelle valeur
$m-spacing--xxxxl (64px)	$m-space-4xl	64px
$m-spacing--xxxl (56px)	$m-space-3xl	56px
$m-spacing--xxl (48px)	$m-space-2xl	48px
$m-spacing--xl (40px)	$m-space-xl	40px
$m-spacing--l (32px)	$m-space-lg	32px
$m-spacing--m (24px)	$m-space-md	24px
$m-spacing (16px)	$m-space	16px
$m-spacing--s (8px)	$m-space-sm	12px
$m-spacing--xs (4px)	$m-space-xs	8px
-	$m-space-2xs	4px

Variables borders

Nom variable SASS	Nouveau nom de variable SASS
$m-border-width--l	$m-border-width-lg
$m-border-width	$m-border-width
$m-border-width--s	$m-border-width-sm
----------	----------	----------
$m-border-radius--l	$m-border-radius-lg
$m-border-radius	$m-border-radius
$m-border-radius--s	$m-border-radius-sm

Variables transitions

Nom variable SASS	Nouveau nom de variable SASS
$m-transition-duration--xl	$m-transition-duration-xl
$m-transition-duration--l	$m-transition-duration-lg
$m-transition-duration	$m-transition-duration
$m-transition-duration--s	$m-transition-duration-sm
$m-transition-duration--xs	$m-transition-duration-xs

Variables media queries

Nom variable SASS	Nouveau nom de variable SASS
$m-mq--min--xl	$m-mq-min-xl
$m-mq--min--l	$m-mq-min-lg
$m-mq--min--m	$m-mq-min-md
$m-mq--min--s	$m-mq-min-sm
$m-mq--min--xs	$m-mq-min-xs
----------	----------
$m-mq--max--xl	$m-mq-max-xl
$m-mq--max--l	$m-mq-max-lg
$m-mq--max--m	$m-mq-max-md
$m-mq--max--s	$m-mq-max-sm
$m-mq--max--xs	$m-mq-max-xs

Variables box-shadow

Nom variable SASS	Nouveau nom de variable SASS
$m-box-shadow--l	$m-box-shadow-lg
$m-box-shadow	$m-box-shadow
$m-box-shadow--s	$m-box-shadow-sm

Variables touch-size

Nom variable SASS	Nouveau nom de variable SASS
$m-touch-size--l	$m-touch-size-lg
$m-touch-size	$m-touch-size
$m-touch-size--s	$m-touch-size-sm

Variables max-width

Nom variable SASS	Nouveau nom de variable SASS
$m-max-width--xl	$m-max-width-xl
$m-max-width--l	$m-max-width-lg
$m-max-width	$m-max-width
$m-max-width--s	$m-max-width-sm
$m-max-width--xs	$m-max-width-xs
$m-max-width--text	$m-max-width-text
$m-box--min-height	$m-min-height-box

Tableaux de comparatifs de changement de noms de classes CSS

Classes margin

Ancienne valeur	Nouvelle valeur
m-u--margin--xxxxl	mu-m-4xl
m-u--margin--xxxl	mu-m-3xl
m-u--margin--xxl	mu-m-2xl
m-u--margin--xl	mu-m-xl
m-u--margin--l	mu-m-lg
m-u--margin--m	mu-m-md
m-u--margin (16px)	mu-m
-	mu-m-sm (12px)
m-u--margin--s (8px)	mu-m-xs (8px)
m-u--margin--xs (4px)	mu-m-2xs (4px)
----------	----------
m-u--margin-top	mu-mt
----------	----------
m-u--margin-left	mu-ml
----------	----------
m-u--margin-bottom	mu-mb
----------	----------
m-u--margin-right	mu-mr

Classes padding

Ancienne valeur	Nouvelle valeur
m-u--padding--xxxxl	mu-p-4xl
m-u--padding--xxxl	mu-p-3xl
m-u--padding--xxl	mu-p-2xl
m-u--padding--xl	mu-p-xl
m-u--padding--l	mu-p-lg
m-u--padding--m	mu-p-md
m-u--padding(16px)	mu-p
-	mu-p-sm (12px)
m-u--padding--s (8px)	mu-p-xs (8px)
m-u--padding--xs (4px)	mu-p-2xs (4px)
----------	----------
m-u--padding-top	mu-pt
----------	----------
m-u--padding-left	mu-pl
----------	----------
m-u--padding-bottom	mu-pb
----------	----------
m-u--padding-right	mu-pr

Classes display

Ancienne valeur	Nouvelle valeur
m-u--display--block	mu-d-block
m-u--display--flex	mu-d-flex
m-u--display--inline	mu-d-inline
m-u--display--inline-block	mu-d-inline-block
m-u--display--inline-flex	mu-d-inline-flex

Classes max-width et min-width

Ancienne valeur	Nouvelle valeur
m-u--max-width	mu-max-w
m-u--max-width--xs	mu-max-w-xs
m-u--max-width--s	mu-max-w-sm
m-u--max-width--l	mu-max-w-lg
m-u--max-width--text	mu-max-w-text
----------	----------
m-u--min-width	mu-min-w

Classes link

Ancienne valeur	Nouvelle valeur
m-u--link	mu-link
m-u--link-text	mu-link-text
m-u--link-icon-left	mu-link-icon-left
m-u--link-icon-right	mu-link-icon-right
m-u--link-unvisited	mu-link-unvisited

Classes button

Ancienne valeur	Nouvelle valeur
m-u--button-primary	mu-button-primary
m-u--button-secondary	mu-button-secondary
m-u--button-disabled	mu-link-button-disabled
m-u--button-waiting	mu-button-waiting

Classes header

Ancienne valeur	Nouvelle valeur
m-u--header	mu-header

Classes font

Ancienne valeur	Nouvelle valeur
m-u--font-size	mu-font-size
-	mu-font-size-lg
m-u--font-size--l	mu-font-size-md
m-u--font-size--s	mu-font-size-sm
m-u--font-size--xs	mu-font-size-xs
----------	----------
m-u--font-style--normal	mu-font-style-normal
m-u--font-style--italic	mu-font-style-italic
----------	----------
m-u--font-weight--black	mu-font-weight-black
m-u--font-weight--bold	mu-font-weight-bold
m-u--font-weight--semi-bold	mu-font-weight-semi-bold
m-u--font-weight--regular	mu-font-weight-regular
m-u--font-weight--light	mu-font-weight-light
----------	----------
m-u--typo--precision	mu-typo-precision
m-u--typo--precision-italic	mu-typo-precision-italic
m-u--typo--highlighting	mu-typo-highlighting

Classes titre

Ancienne valeur	Nouvelle valeur
m-u--h1	mu-h1
m-u--h2	mu-h2
m-u--h3	mu-h3
m-u--h4	mu-h4
m-u--h5	mu-h5
m-u--h6	mu-h6
----------	----------
m-u--p	mu-p

Autres classes utilitaires

Ancienne valeur	Nouvelle valeur
m-u--app-body	mu-app-root
m-u--visually-hidden	mu-visually-hidden
m-u--bullet-list	mu-bullet-list
m-u--table	mu-table
m-u--label	mu-label
m-u--asterisk	mu-asterisk
m-u--require	mu-require