gitea_admin/wondif_vue
1
0
Fork 0
generated from gitea_admin/default
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update a lot of change since a while

Browse Source
This commit is contained in:
Julie
2026-01-22 10:29:36 +01:00
parent a4dcb95d83
commit e1c1475f10
78 changed files with 4200 additions and 534 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
design-system/tokens/_colors.scss Normal file
View File

@@ -0,0 +1,31 @@
:root {
/* Texte */
--c-text: #111;
--c-surface: #ffffff;
--c-text-muted: #555;
--c-text-invert: #fff;
/* Marque / accent (ex: rouge ONDIF) */
//--c-brand_rouge: #E30613;
--c-brand_rouge: #E20018;
--c-brand_rouge45: rgba(226, 0, 24, 0.45);
--c-brand_rouge-weak: #e3061391;
--c-backgroud-black: #111;
--c-backgroud-brandreverse: #ACCFCF;
/* États */
--c-success: green;
--c-warning: #E30613;
--c-danger: #E30613;
/* Liens / info (si tu veux) */
--c-info: #0056b3;
--c-bleu_fonce: #0056b3;
--c-bleu_clair: #007bff;
--c-border: rgba(0,0,0,0.10);
--c-border-strong: rgba(0,0,0,0.18);
--c-hover: rgba(0,0,0,0.04);
--c-focus: rgba(227, 6, 19, 0.25);
}

102
design-system/tokens/_fonts.scss Normal file
View File

@@ -0,0 +1,102 @@
@font-face {
font-family: "Roboto Flex";
src: url("@/assets/fonts/robotoflex.ttf") format("truetype");
font-weight: 100 1000;
font-stretch: 25% 151%;
font-style: oblique 0deg 10deg;
font-display: swap;
}
@font-face {
font-family: 'Brandon Text';
src: url('@/assets/fonts/brandontext_bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Brandon Text';
src: url('@/assets/fonts/brandontext_boldItalic.woff2') format('woff2');
font-weight: 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Brandon Text';
src: url('@/assets/fonts/brandontext_mediumItalic.woff2') format('woff2');
font-weight: 500;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Brandon Text';
src: url('@/assets/fonts/brandontext_medium.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Brandon Text';
src: url('@/assets/fonts/brandontext_regularItalic.woff2') format('woff2');
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Brandon Text';
src: url('@/assets/fonts/brandontext_regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Barlow';
src: url('@/assets/fonts/barlow_medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Barlow';
src: url('@/assets/fonts/barlow_semibold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Barlow';
src: url('@/assets/fonts/barlow_regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Barlow';
src: url('@/assets/fonts/barlow_light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Barlow';
src: url('@/assets/fonts/barlow_extrabold.ttf') format('truetype');
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Barlow';
src: url('@/assets/fonts/barlow_bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Barlow';
src: url('@/assets/fonts/barlow_black.ttf') format('truetype');
font-weight: 900;
font-style: normal;
font-display: swap;
}

28
design-system/tokens/_layout.scss Normal file
View File

@@ -0,0 +1,28 @@
:root {
/* Containers – largeur de contenu */
/* padding latéral (respiration) */
--page-padding-mobile: 0.5rem; /* 16px */
--page-padding-tablet: 1.5rem; /* 24px */
--page-padding-desktop: 2rem; /* 32px */
--container-narrow: 48rem; /* 768px → éditorial, texte long */
--container-default: 72rem; /* 1152px → pages standard */
--container-wide: 90rem; /* 1440px → listings, agenda */
--gap-cards: var(--sp-22);
}
@media (min-width: 600px) {
:root {
--gap-cards: var(--sp-16);
}
}
@media (min-width: 1200px) {
:root {
--gap-cards: var(--sp-22);
}
}

4
design-system/tokens/_radius.scss Normal file
View File

@@ -0,0 +1,4 @@
:root {
--r-md: 0.75rem;
--sh-soft: 0 2px 6px rgba(0,0,0,0.06), 0 0 20px rgba(0,0,0,0.08);
}

3
design-system/tokens/_shadow.scss Normal file
View File

@@ -0,0 +1,3 @@
:root {
--sh-md: 0 8px 20px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
}

31
design-system/tokens/_spacing.scss Normal file
View File

@@ -0,0 +1,31 @@
:root {
/* Base unit */
--sp-0: 0;
/* Micro spacing (UI fine) */
--sp-4: 0.25rem; /* 4px */
--sp-6: 0.375rem; /* 6px */
--sp-8: 0.5rem; /* 8px */
--sp-12: 0.75rem; /* 12px */
/* Spacing standard */
--sp-16: 1rem; /* 16px */
--sp-20: 1.25rem; /* 20px */
--sp-22: 1.375rem; /* 22px */
--sp-24: 1.5rem; /* 24px */
/* Spacing fort (sections, titres) */
--sp-32: 2rem; /* 32px */
--sp-40: 2.5rem; /* 40px */
--sp-45: 45px; /* 45px */
--sp-48: 3rem; /* 48px */
/* Spacing très fort (pages, hero) */
--sp-64: 4rem; /* 64px */
--sp-80: 5rem; /* 80px */
--sp-96: 6rem; /* 96px */
--sp-120: 7.5rem; /* 120px */
--sp-180: 11.25rem; /* 120px */
--sp-200: 200px; /* 200px */
--sp-220: 13.75rem; /* 220px */
}

113
design-system/tokens/_typography.scss Normal file
View File

@@ -0,0 +1,113 @@
: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.5;
/* 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);
}
}

8
design-system/tokens/index.scss Normal file
View File

@@ -0,0 +1,8 @@
@use "./fonts";
@use "./typography";
@use "./colors";
@use "./spacing";
@use "./radius";
@use "./shadow";
@use "./layout";