LocoLoca
Guide des styles
Un bouton de sélection permet de switcher d'un thème à l'autre en haut à droite de cette fenêtre.
/ Couleurs
Primary
--color-primary-lighter
--color-primary-light
--color-primary
--color-primary-dark
--color-primary-darker
Accent
--color-accent-lighter
--color-accent-light
--color-accent
--color-accent-dark
--color-accent-darker
Secondary
--color-secondary-lighter
--color-secondary-light
--color-secondary
--color-secondary-dark
--color-secondary-darker
Black
--color-black
White
--color-white
Success
--color-success-lighter
--color-success-light
--color-success
--color-success-dark
--color-success-darker
Error
--color-error-lighter
--color-error-light
--color-error
--color-error-dark
--color-error-darker
Warning
--color-warning-lighter
--color-warning-light
--color-warning
--color-warning-dark
--color-warning-darker
Échelle des contrastes
--color-bg-lighter
--color-bg-light
--color-bg
--color-bg-dark
--color-bg-darker
--color-bg
--color-contrast-lower
--color-contrast-low
--color-contrast-medium
--color-contrast-high
--color-contrast-higher
/ Typographie
Font Family
--font-primary
'Sofia' system-ui, sans-serif
Le tourisme est mort, vive le voyage !
Titre & Corps du texte
Le tourisme est mort, vive le voyage !
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit ad, veniam voluptatibus molestias impedit dolore eligendi modi dicta, sint nulla consequuntur nisi alias distinctio vero expedita est at soluta et. Sapiente veritatis esse dolore ratione doloremque. Accusantium maiores maxime eum eaque voluptates nisi qui unde, dolores minima repudiandae quos perferendis?
Échelle typo
--text-xxxxl
Display Text Huge
--text-xxxl
Display Text
--text-xxl
Titre h1
--text-xl
Titre h2
--text-lg
Titre h3
--text-md
Titre h4
--text-base
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis modi, voluptate temporibus, voluptas dicta quibusdam iste dolores repudiandae aperiam tenetur, delectus laborum nobis nostrum consectetur error perspiciatis. Cum laudantium velit provident veritatis corrupti reiciendis iure, architecto ab perferendis, laboriosam voluptatum minima vero.
--text-sm
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis modi, voluptate temporibus, voluptas dicta quibusdam iste dolores repudiandae aperiam tenetur, delectus laborum nobis nostrum consectetur error perspiciatis.
--text-xs
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis modi, voluptate temporibus, voluptas dicta quibusdam iste dolores repudiandae aperiam tenetur, delectus laborum nobis nostrum consectetur error perspiciatis.
/ Boutons
Themes
Feedback
Sizes
/ Forms
/ Icons
| Class | Custom Property | Size | |
|---|---|---|---|
| icon--xxxs | var(--icon-xxxs) | 8px | |
| icon--xxs | var(--icon-xxs) | 12px | |
| icon--xs | var(--icon-xs) | 16px | |
| icon--sm | var(--icon-sm) | 24px | |
| icon--md | var(--icon-md) | 32px | |
| icon--lg | var(--icon-lg) | 48px | |
| icon--xl | var(--icon-xl) | 64px | |
| icon--xxl | var(--icon-xxl) | 96px | |
| icon--xxxl | var(--icon-xxxl) | 128px |