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. Certaines variables CSS de couleurs peuvent toutefois suivre la 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`	#eb4d5f
Courrier de l’Ouest	`--couleur-co-1`	#e2001a
Courrier de l’Ouest	`--couleur-co-2`	#eb4d5f
Presse Océan	`--couleur-po-1`	#009adc
Presse Océan	`--couleur-po-2`	#4db8e6
Maine Libre	`--couleur-ml-1`	#009adc
Maine Libre	`--couleur-ml-2`	#4db8e6
Voiles et voiliers	`--couleur-vv-1`	#20407a
Voiles et voiliers	`--couleur-vv-2`	#457aeb
Infomer Le Marin	`--couleur-im-1`	#e30613
Infomer Le Marin	`--couleur-im-2`	#eb515a
Lire Magazine	`--couleur-lm-1`	#e30613
Lire Magazine	`--couleur-lm-2`	#eb515a
Bretons en Cuisine	`--couleur-bc-1`	#224672
Bretons en Cuisine	`--couleur-bc-2`	#647e9c
Breton	`--couleur-br-1`	#1b181c
Breton	`--couleur-br-2`	#5f5d60
Voyages à l’Ouest	`--couleur-vo-1`	#005b90
Voyages à l’Ouest	`--couleur-vo-2`	#4d8cb1
Terre de jardins	`--couleur-tj-1`	#ea4f52
Terre de jardins	`--couleur-tj-2`	#f08486
Infoconnect	`--couleur-ic-1`	#e3eaf8
Infoconnect	`--couleur-ic-2`	#29354e
Infoconnect	`--couleur-ic-3`	#6a7283
Prix de la démocratie	`--couleur-pdld-1`	#082e65

Palette SipaUI

Gamme primitive

Variable CSS	Variable SCSS	Valeur
`--blanc`	`$color-main-1`	#fff
`--quasi-blanc`		#fafafa
`--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
`--quasi-noir`		#121212
`--noir`	`$color-main-8`	#000

Gamme secondaire

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`	#457aeb

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

Gamme d’accroche

	Variable CSS	Variable SCSS	Valeur
Abbonnement 1	`--jaune-1`, `--couleur-abo-1`	`$color-subscription-1`	#cba200
	`--jaune-2`, `--couleur-abo-2`	`$color-subscription-2`	#dbbe4d
	`--jaune-3`		#faf6e6
Erreur	`--rouge-1`, `--couleur-erreur-1`	`$color-error`	#e2001a
	`--rouge-2`		#eb4d5f
	`--rouge-3`		#fce5e8
Réussite	`--vert-1`, `--couleur-succes-1`	`$color-success`	#3aaa35
	`--vert-2`		#75c472
	`--vert-3`		#ebf7eb
Contenu sponsorisé	`--gris-plus-clair`, `--couleur-sponso-1`	`$color-sponsorised-1`	#efefef
Contenu mis en avant	`--bleuet-1`, `--couleur-projecteur-1`	`$color-featured-1`	#122431
	`--bleuet-2`, `--couleur-projecteur-2`	`$color-featured-2`	#59666F

Réseaux sociaux et marques externes

Nom	Variable CSS	Valeur
Amazon Music	`--amazon-music`	#34D1D9
Apple	`--apple`	#000
Apple Podcast	`--apple-podcast`	#852DC4
Bluesky	`--bluesky`	#1185FE
Dailymotion	`--dailymotion`	#333436
Deezer	`--deezer`	#A238FF
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
Spotify	`--spotify`	#1ED760
Tumblr	`--tumblr`	#000
twitch	`--twitch`	#6441a4
Viadeo	`--viadeo`	#f07355
Whatsapp	`--whatsapp`	#28d146
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)

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)

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%)
Taille des coins arrondis standards		`--border-radius-standard`	8px
Taille des petits coins arrondis		`--border-radius-small`	3px