generated from gitea_admin/default
114 lines
3.0 KiB
SCSS
114 lines
3.0 KiB
SCSS
:root {
|
||
/* Font stacks (remplace Inter si tu as une font ONDIF) */
|
||
--font-roboto: "Roboto Flex", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
|
||
--font-brandon: 'Brandon Text',
|
||
system-ui,
|
||
-apple-system,
|
||
"Segoe UI",
|
||
Roboto,
|
||
Arial,
|
||
sans-serif;
|
||
--font-barlow: 'Barlow',
|
||
system-ui,
|
||
-apple-system,
|
||
"Segoe UI",
|
||
Roboto,
|
||
Arial,
|
||
sans-serif;
|
||
|
||
/* Font weights */
|
||
--fw-extralight: 200;
|
||
--fw-light: 300;
|
||
--fw-regular: 400;
|
||
--fw-medium: 500;
|
||
--fw-semibold: 600;
|
||
--fw-bold: 700;
|
||
--fw-extrabold: 800;
|
||
--fw-black: 900;
|
||
|
||
/* Optical size (opsz) : utile avec Roboto Flex */
|
||
--opsz-body: 14;
|
||
--opsz-title: 28;
|
||
|
||
/* Line heights */
|
||
--lh-tight: 1.15;
|
||
--lh-snug: 1.25;
|
||
--lh-base: 1.3;
|
||
|
||
/* Letter spacing (optionnel mais utile) */
|
||
--ls-tight: -0.01em;
|
||
--ls-normal: 0;
|
||
--ls-wide: 0.02em;
|
||
|
||
/* Scale (mobile-first) */
|
||
--fs-12: 0.75rem; /* 12 */
|
||
--fs-14: 0.875rem; /* 14 */
|
||
--fs-16: 1rem; /* 16 */
|
||
--fs-17: 1.0625rem; /* 17 */
|
||
--fs-18: 1.125rem; /* 18 */
|
||
--fs-20: 1.25rem; /* 20 */
|
||
--fs-23: 1.4375rem; /* 23 */
|
||
--fs-24: 1.5rem; /* 24 */
|
||
--fs-28: 1.75rem; /* 28 */
|
||
--fs-30: 1.875rem; /* 30 */
|
||
--fs-32: 2rem; /* 32 */
|
||
--fs-40: 2.5rem; /* 40 */
|
||
|
||
/* Semantic mapping (ça c’est ton “API” DS) */
|
||
--text-xs: var(--fs-12);
|
||
--text-sm: var(--fs-14);
|
||
--text-md: var(--fs-16);
|
||
--text-lg: var(--fs-18);
|
||
|
||
--title-xs: var(--fs-16);
|
||
--title-xs2: var(--fs-17);
|
||
--title-sm: var(--fs-18);
|
||
--title-md: var(--fs-20);
|
||
--title-md2: var(--fs-23);
|
||
--title-lg: var(--fs-24);
|
||
--title-lg2: var(--fs-30);
|
||
--title-xl: var(--fs-32);
|
||
--title-2xl: var(--fs-40);
|
||
}
|
||
|
||
/* Option : ajustements desktop */
|
||
@media (max-width: 700px) {
|
||
:root {
|
||
--title-xs: var(--fs-12);
|
||
--title-xs2: var(--fs-14);
|
||
--title-sm: var(--fs-14);
|
||
--title-md: var(--fs-16);
|
||
--title-md2: var(--fs-17);
|
||
--title-lg: var(--fs-18);
|
||
--title-lg2: var(--fs-20);
|
||
--title-xl: var(--fs-20);
|
||
--title-2xl: var(--fs-24);
|
||
}
|
||
}
|
||
@media (min-width: 700px) {
|
||
:root {
|
||
--title-xs: var(--fs-14);
|
||
--title-xs2: var(--fs-16);
|
||
--title-sm: var(--fs-16);
|
||
--title-md: var(--fs-18);
|
||
--title-md2: var(--fs-20);
|
||
--title-lg: var(--fs-20);
|
||
--title-lg2: var(--fs-24);
|
||
--title-xl: var(--fs-24);
|
||
--title-2xl: var(--fs-32);
|
||
}
|
||
}
|
||
@media (min-width: 1024px) {
|
||
:root {
|
||
--title-xs: var(--fs-16);
|
||
--title-xs2: var(--fs-17);
|
||
--title-sm: var(--fs-18);
|
||
--title-md: var(--fs-20);
|
||
--title-md2: var(--fs-23);
|
||
--title-lg: var(--fs-24);
|
||
--title-lg2: var(--fs-30);
|
||
--title-xl: var(--fs-32);
|
||
--title-2xl: var(--fs-40);
|
||
}
|
||
}
|