Variables

SipaUI offre un lot de variables que vous pouvez réutiliser dans vos projets. Ces variables offrent un double intérêt : un gain de temps lors de la création de vos styles et l’assurance d’utiliser les bonnes valeurs correspondant à la charte.

Certaines de ces variables sont au format CSS (custom properties ou « propriétés personnalisées », préfixées par « -- ») et d’autres au format SCSS (préfixées par « $ »). Les variables CSS ont l’avantage d’être accessibles à tous, du moment que vous faites appel à SipaUI (quelle que soit la méthode). Les variables SCSS sont plus puissantes, mais pour pouvoir les utiliser, il faut impérativement importer SipaUI via npm.

N. B. 1 – Les variables CSS sont en français et répondent à une logique descriptive et les variables SCSS sont en anglais et répondent à une logique fonctionnelle.

N. B. 2 – Il existe quelques variables de couleur éditoriales liées à Ouest-France. Elles ne sont pas visibles sur cette page qui ne référence que les variables du framework SipaUI. Vous pouvez toutefois les trouver sur la page des couleurs

Pour plus de praticité, vous pouvez télécharger une version PDF de ces informations :

Télécharger les variables en PDF

Couleurs

Marques Sipa

Marques	Variable CSS	Valeur
Ouest-France	`--couleur-of-1`	#e2001a
Ouest-France	`--couleur-of-2`	#eb4c5e
Courrier de l’Ouest	`--couleur-co-1`	#e2001a
Courrier de l’Ouest	`--couleur-co-2`	#eb4c5e
Presse Océan	`--couleur-po-1`	#009adc
Presse Océan	`--couleur-po-2`	#33aee3
Maine Libre	`--couleur-ml-1`	#009adc
Maine Libre	`--couleur-ml-2`	#33aee3
Voiles et voiliers	`--couleur-vv-1`	#20407a
Voiles et voiliers	`--couleur-vv-2`	#268bcd
Infomer Le Marin	`--couleur-im-1`	#e30613
Infomer Le Marin	`--couleur-im-2`	#a91516
Lire Magazine	`--couleur-lm-1`	#e30613
Lire Magazine	`--couleur-lm-2`	#e93842
Bretons en Cuisine	`--couleur-bc-1`	#224672
Bretons en Cuisine	`--couleur-bc-2`	#4e6b8e
Breton	`--couleur-br-1`	#1b181c
Breton	`--couleur-br-2`	#494649
Voyages à l’Ouest	`--couleur-vo-1`	#005b90
Voyages à l’Ouest	`--couleur-vo-2`	#337ca6
Terre de jardins	`--couleur-tj-1`	#ea4f52
Terre de jardins	`--couleur-tj-2`	#ee7275
Infoconnect	`--couleur-ic-1`	#e3eaf8
Infoconnect	`--couleur-ic-2`	#29354e
Infoconnect	`--couleur-ic-3`	#6a7283
Prix de la démocratie	`--couleur-pdld-1`	#082e65

Thèmes

Couleurs primaires

Variable CSS	Variable SCSS	Valeur
`--blanc`	`$color-main-1`	#fff
`--gris-plus-clair`	`$color-main-2`	#efefef
`--gris-clair`	`$color-main-3`	#e4e3e1
`--gris`	`$color-main-4`	#d4d4d4
`--gris-fonce`	`$color-main-5`	#858585
`--gris-plus-fonce`	`$color-main-6`	#666
`--anthracite`	`$color-main-7`	#333
`--noir`	`$color-main-8`	#000

Couleurs secondaires

Thème	Variable CSS	Variable SCSS	Valeur
Ouest-France 1	`--couleur-of-1`	`$color-secondary-1`	#e2001a
Ouest-France 2	`--couleur-of-2`	`$color-secondary-2`	#eb4c5e

Pour le thème Voiles et voiliers :

Thème	Variable CSS	Variable SCSS	Valeur
Voiles et voiliers 1	`--couleur-vv-1`	`$color-secondary-1`	#20407a
Voiles et voiliers 2	`--couleur-vv-2`	`$color-secondary-2`	#268bcd

Pour le thème Infoconnect :

Thème	Variable CSS	Variable SCSS	Valeur
Infoconnect 1	`--couleur-ic-2`	`$color-secondary-1`	#29354e
Infoconnect 2	`--couleur-ic-3`	`$color-secondary-2`	#6a7283

Pour le thème Prix de la Démocratie :

Thème	Variable CSS	Variable SCSS	Valeur
Prix de la Démocratie 1	`--couleur-pdld-1`	`$color-secondary-1`	#082e65
Prix de la Démocratie 2	`--couleur-pdld-2`	`$color-secondary-2`	#333

Abonnement

	Variable CSS	Variable SCSS	Valeur
Abbonnement 1	`--jaune`	`$color-subscription-1`	#cba200
Abbonnement 2	`--jaune-2`	`$color-subscription-2`	#d5b533

Contenu spponsorisé (Communication)

	Variable CSS	Variable SCSS	Valeur
Contenu sponsorisé	`$color-sponsorised-1`	`--gris-plus-clair`	#efefef

Avertissements

	Variable CSS	Variable SCSS	Valeur
Erreur	`--rouge`	`$color-error`	#e2001a
Réussite	`--vert`	`$color-success`	#3aaa35

Réseaux sociaux et marques externes

Nom	Variable CSS	Valeur
Apple	`--apple`	#000
Dailymotion	`--dailymotion`	#333436
Facebook	`--facebook`	#1877f2
Flickr	`--flickr`	#0063dc
Flipboard	`--flipboard`	#e12828
Flux RSS	`--fluxrss`	#f0801a
Google	`--google`	#db4437
Instagram	`--instagram`	#fd0075
Linkedin	`--linkedin`	#2867b2
Pinterest	`--pinterest`	#bd081c
Snapchat	`--snapchat`	#fffc00
Soundcloud	`--soundcloud`	#f50
Tumblr	`--tumblr`	#000
twitch	`--twitch`	#6441a4
Viadeo	`--viadeo`	#f07355
X	`--x`	#000
Youtube	`--youtube`	#f00

Autres

Nom	Variable SCSS	Valeur
Important	`$color-important`	$color-secondary-1 (#e2001a)
Metadonnées	`$color-metadata`	$color-main-5 (#858585)
Fond de page	`$background-body`	$color-main-1 (#fff)
Texte standard	`$font-color-standard`	$color-main-7 (#333)
Lien standard	`$color-link-standard`	$font-color-standard (#333)
Lien std hover	`$color-link-standard-hover`	$color-main-6 (#666666)

Pour le thème Voiles et voiliers :

Nom		Variable SCSS	Valeur
Lien standard		`$color-link-standard`	#20407a
Lien std hover		`$color-link-standard-hover`	#268bcd

Typographie

	Variable CSS	Variable SCSS	Valeur
Fonte pour le texte standard		`$font-family-base`	Arial, Helvetica, sans-serif
Fonte pour les titres		`$font-family-secondaire`	Oswald, $font-family-base
Corps de texte	`--font-size-xs`		1.2rem
	`--font-size-s`		1.4rem
	`--font-size-ms`		1.6rem
	`--font-size-m`		1.8rem
	`--font-size-ml`		2rem
	`--font-size-l`		2.2rem
	`--font-size-xl`		2.4rem
	`--font-size-xxl`		3rem
	`--font-size-xxxl`		4rem
(pour tous les textes standards)		`$font-size-standard`	--font-size-ms (1.6rem)
(pour les icônes)		`$font-size-icons-standard`	2.4rem
Graisse de texte	`--font-weight-thin`		200
	`--font-weight-normal`		400
	`--font-weight-medium`		500
	`--font-weight-bold`		700
(graisse standard)		`$font-weight-standard`	--font-weight-normal (400)
Interlignage de texte	`--line-height-xs`		1
	`--line-height-s`		1.2
	`--line-height-m`		1.35
	`--line-height-l`		1.5
	`--line-height-xl`		2
(interlignage standard)		`$line-height-standard`	--line-height-m (1.35)
(interlignage pour le texte éditorial)		`$line-height-edito`	--line-height-l (1.5)

Pour le thème Voiles et voiliers :

		Variable SCSS	Valeur
Fonte pour le texte standard		`$font-family-base`	Montserrat, Arial, Helvetica, sans-serif
Fonte pour les titres		`$font-family-secondaire`	Montserrat, Arial, Helvetica, sans-serif

Marges

Variable CSS	Valeur
`--marge-xs`	5px
`--marge-s`	10px
`--marge-m`	20px
`--marge-l`	30px
`--marge-xl`	40px
`--marge-xxl`	50px
`--marge-xxxl`	100px

Divers

	Variable SCSS	Variable CSS	Valeur
Breakpoint mini d’écran	`$min-breakpoint-sm`		22.5em (360px)
	`$min-breakpoint-md`		48em (768px)
	`$min-breakpoint-lg`		61.25em (980px)
	`$min-breakpoint-xl`		80em (1280px)
Breakpoint maxi d’écran	`$max-breakpoint-xs`		22.438em (359px)
	`$max-breakpoint-sm`		47.938em (767px)
	`$max-breakpoint-md`		61.188em (979px)
	`$max-breakpoint-lg`		79.938em (1279px)
Taille standard à donner aux zones cliquables		`--taille-tactile`	44px
Taille minimale à donner aux zones cliquables		`--taille-tactile-mini`	34px
Valeur d’opacité pour un objet inactif		`--opacite-inactif`	.5 (50%)
Valeur d’opacité pour un objet au survol		`--opacite-survol`	.7 (70%)