@cnamts/synapse 1.0.25 → 1.0.27

package/src/composantsVuetify/VCard/VCard.mdx

@@ -0,0 +1,59 @@
+import { Meta, Canvas } from '@storybook/blocks'
+import * as VCardStories from './v-card.stories'
+
+<Meta title="Composants/Composants Vuetify/VCard" />
+
+<div className="header">
+    <h1>VCard</h1>
+Ce composant utilise directement le composant natif `v-card` de Vuetify avec les couleurs du thème actif du design system.
+Pour l'API complète du composant, consulter la [documentation Vuetify](https://vuetifyjs.com/en/api/v-card/#props).
+</div>
+
+### Composants associés
+
+- `v-card-title` : Titre de la carte
+- `v-card-subtitle` : Sous-titre de la carte
+- `v-card-text` : Contenu textuel de la carte
+- `v-card-actions` : Zone pour les boutons d'action
+
+## Variantes
+
+Le composant `v-card` propose plusieurs variantes de style :
+
+- **elevated** : Carte avec une ombre (par défaut)
+- **flat** : Carte sans ombre
+- **outlined** : Carte avec une bordure
+- **tonal** : Carte avec un fond coloré léger
+- **text** : Carte sans fond ni bordure
+- **plain** : Carte sans style
+
+### Primary
+
+<Canvas of={VCardStories.Primary} />
+
+### Primary - Elevated
+
+<Canvas of={VCardStories.PrimaryElevated} />
+
+### Primary - Outlined
+
+<Canvas of={VCardStories.PrimaryOutlined} />
+
+### Primary - Tonal
+
+<Canvas of={VCardStories.PrimaryTonal} />
+
+### En chargement
+
+<Canvas of={VCardStories.Loading} />
+
+### Désactivée
+
+<Canvas of={VCardStories.Disabled} />
+
+## Accessibilité
+
+- Utilisez des titres descriptifs pour les cartes
+- Assurez-vous que les images ont un attribut `alt` approprié
+- Les actions dans la carte doivent être accessibles au clavier
+- Utilisez des couleurs avec un contraste suffisant

package/src/composantsVuetify/VCard/v-card.stories.ts

@@ -0,0 +1,279 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { VCard, VCardTitle, VCardText, VCardActions } from 'vuetify/components'
+import { VBtn } from 'vuetify/components'
+
+const meta: Meta<typeof VCard> = {
+	title: 'Composants/Composants Vuetify/VCard',
+	tags: ['!dev'],
+	component: VCard,
+	parameters: {
+		docs: {
+			source: {
+				transform: (src: string) => {
+					// Extract only the template part
+					const templateMatch = src.match(/template:\s*`([\s\S]*?)`/)
+					if (templateMatch && templateMatch[1]) {
+						return templateMatch[1]
+							.trim()
+							.replace(/<VCard/g, '<v-card')
+							.replace(/<\/VCard>/g, '</v-card>')
+							.replace(/<VCardTitle/g, '<v-card-title')
+							.replace(/<\/VCardTitle>/g, '</v-card-title>')
+							.replace(/<VCardText/g, '<v-card-text')
+							.replace(/<\/VCardText>/g, '</v-card-text>')
+							.replace(/<VCardActions/g, '<v-card-actions')
+							.replace(/<\/VCardActions>/g, '</v-card-actions>')
+							.replace(/<VBtn/g, '<v-btn')
+							.replace(/<\/VBtn>/g, '</v-btn>')
+					}
+					return src
+				},
+			},
+		},
+	},
+	argTypes: {
+		color: {
+			control: { type: 'text' },
+			description: 'Couleur de la carte',
+		},
+		variant: {
+			control: { type: 'select' },
+			options: ['elevated', 'flat', 'tonal', 'outlined', 'text', 'plain'],
+			description: 'Variante de style de la carte',
+		},
+		elevation: {
+			control: { type: 'number' },
+			description: 'Élévation de la carte (ombre)',
+		},
+		disabled: {
+			control: { type: 'boolean' },
+			description: 'Désactive la carte',
+		},
+		loading: {
+			control: { type: 'boolean' },
+			description: 'Affiche un état de chargement',
+		},
+		rounded: {
+			control: { type: 'select' },
+			options: ['0', 'sm', 'md', 'lg', 'xl', 'pill', 'circle'],
+			description: 'Arrondi des coins de la carte',
+		},
+	},
+}
+
+export default meta
+
+type Story = StoryObj<typeof VCard>
+
+export const Primary: Story = {
+	render: args => ({
+		components: { VCard, VCardTitle, VCardText },
+		setup() {
+			return { args }
+		},
+		template: `
+            <VCard v-bind="args" style="max-width: 400px;">
+                <VCardTitle>Carte Primary</VCardTitle>
+                <VCardText>
+                    Cette carte utilise la couleur "primary".
+                </VCardText>
+            </VCard>
+        `,
+	}),
+	args: {
+		color: 'primary',
+	},
+	parameters: {
+		docs: {
+			source: {
+				code: `<v-card color="primary" style="max-width: 400px;">
+    <v-card-title>Carte Primary</v-card-title>
+    <v-card-text>
+        Cette carte utilise la couleur "primary".
+    </v-card-text>
+</v-card>`,
+			},
+		},
+	},
+}
+
+export const PrimaryTonal: Story = {
+	render: args => ({
+		components: { VCard, VCardTitle, VCardText },
+		setup() {
+			return { args }
+		},
+		template: `
+            <VCard v-bind="args" style="max-width: 400px;">
+                <VCardTitle>Carte Primary Tonal</VCardTitle>
+                <VCardText>
+                    Cette carte utilise la couleur "primary" et la variant "tonal".
+                </VCardText>
+            </VCard>
+        `,
+	}),
+	args: {
+		color: 'primary',
+		variant: 'tonal',
+	},
+	parameters: {
+		docs: {
+			source: {
+				code: `<v-card color="primary" variant="tonal" style="max-width: 400px;">
+    <v-card-title>Carte Primary Tonal</v-card-title>
+    <v-card-text>
+        Cette carte utilise la couleur "primary" et la variant "tonal".
+    </v-card-text>
+</v-card>`,
+			},
+		},
+	},
+}
+
+export const PrimaryElevated: Story = {
+	render: args => ({
+		components: { VCard, VCardTitle, VCardText },
+		setup() {
+			return { args }
+		},
+		template: `
+            <VCard v-bind="args" style="max-width: 400px;">
+                <VCardTitle>Carte Primary Elevated</VCardTitle>
+                <VCardText>
+                    Cette carte utilise la couleur "primary" et la variant "elevated".
+                </VCardText>
+            </VCard>
+        `,
+	}),
+	args: {
+		color: 'primary',
+		variant: 'elevated',
+		elevation: 4,
+	},
+	parameters: {
+		docs: {
+			source: {
+				code: `<v-card color="primary" variant="elevated" :elevation="4" style="max-width: 400px;">
+    <v-card-title>Carte Primary Elevated</v-card-title>
+    <v-card-text>
+        Cette carte utilise la couleur "primary" et la variant "elevated".
+    </v-card-text>
+</v-card>`,
+			},
+		},
+	},
+}
+
+export const PrimaryOutlined: Story = {
+	render: args => ({
+		components: { VCard, VCardTitle, VCardText, VCardActions, VBtn },
+		setup() {
+			return { args }
+		},
+		template: `
+            <VCard v-bind="args" style="max-width: 400px;">
+                <VCardTitle>Carte Primary Outlined</VCardTitle>
+                <VCardText>
+                    Cette carte utilise la couleur "primary" et la variant "outlined". Elle contient également des boutons d'action.
+                </VCardText>
+                <VCardActions class="justify-end">
+                    <VBtn variant="text" color="primary">Annuler</VBtn>
+                    <VBtn variant="tonal" color="primary">Confirmer</VBtn>
+                </VCardActions>
+            </VCard>
+        `,
+	}),
+	args: {
+		color: 'primary',
+		variant: 'outlined',
+	},
+	parameters: {
+		docs: {
+			source: {
+				code: `<v-card color="primary" variant="outlined" style="max-width: 400px;">
+    <v-card-title>Carte Primary Outlined</v-card-title>
+    <v-card-text>
+        Cette carte utilise la couleur "primary" et la variant "outlined". Elle contient également des boutons d'action.
+    </v-card-text>
+    <v-card-actions class="justify-end">
+        <v-btn variant="text" color="primary">Annuler</v-btn>
+        <v-btn variant="tonal" color="primary">Confirmer</v-btn>
+    </v-card-actions>
+</v-card>`,
+			},
+		},
+	},
+}
+
+// États
+
+export const Loading: Story = {
+	render: args => ({
+		components: { VCard, VCardTitle, VCardText },
+		setup() {
+			return { args }
+		},
+		template: `
+            <VCard v-bind="args" style="max-width: 400px;">
+                <VCardTitle>Carte Primary en chargement</VCardTitle>
+                <VCardText>
+                    Cette carte utilise la couleur "primary" et affiche un état de chargement.
+                </VCardText>
+            </VCard>
+        `,
+	}),
+	args: {
+		loading: true,
+		color: 'primary',
+	},
+	parameters: {
+		docs: {
+			source: {
+				code: `<v-card :loading="true" color="primary" style="max-width: 400px;">
+    <v-card-title>Carte Primary en chargement</v-card-title>
+    <v-card-text>
+        Cette carte utilise la couleur "primary" et affiche un état de chargement.
+    </v-card-text>
+</v-card>`,
+			},
+		},
+	},
+}
+
+export const Disabled: Story = {
+	render: args => ({
+		components: { VCard, VCardTitle, VCardText, VCardActions, VBtn },
+		setup() {
+			return { args }
+		},
+		template: `
+            <VCard v-bind="args" style="max-width: 400px;">
+                <VCardTitle>Carte désactivée</VCardTitle>
+                <VCardText>
+                    Cette carte est désactivée.
+                </VCardText>
+                <VCardActions class="justify-end">
+                    <VBtn>Action</VBtn>
+                </VCardActions>
+            </VCard>
+        `,
+	}),
+	args: {
+		disabled: true,
+	},
+	parameters: {
+		docs: {
+			source: {
+				code: `<v-card :disabled="true" style="max-width: 400px;">
+    <v-card-title>Carte désactivée</v-card-title>
+    <v-card-text>
+        Cette carte est désactivée.
+    </v-card-text>
+    <v-card-actions class="justify-end">
+        <v-btn>Action</v-btn>
+    </v-card-actions>
+</v-card>`,
+			},
+		},
+	},
+}

package/src/designTokens/tokens/amelipro/apColors2026.ts

@@ -1,4 +1,4 @@
-import type { IndexedObject } from '@/components/Amelipro/types.ts'
+import type { IndexedObject } from '../../../components/Amelipro/types.ts'
 import { buildColorClassMap } from '../../utils/buildColorClassMap'
 
 export const apColorsTokens2026 = {

package/src/designTokens/tokens/amelipro/apContextual.ts

@@ -63,4 +63,10 @@ export const apContextualTokens = {
 		switchWidth: '3.5rem',
 		switchTrackOpacity: '1',
 	},
+	radius: {
+		rounded0: '0',
+		rounded: '12px',
+		roundedLg: '24px',
+		roundedPill: '64px',
+	},
 }

package/src/designTokens/tokens/amelipro/apDarkTheme.ts

@@ -1,5 +1,5 @@
-// import { apColorsTokens } from '../amelipro/apColors'
+import { baseTokens } from '@/designTokens/tokens/baseTokens'
 
 export const apDarkTheme = {
-	// backgroundSurface: apColorsTokens.parma.darken60,
+	backgroundSurface: baseTokens.color.parma.darken60,
 }

package/src/designTokens/tokens/amelipro/apLightTheme.ts

@@ -1,103 +1,75 @@
-import { apSemanticTokens } from './apSemantic'
-import { apColorsTokens } from './apColors'
+import { baseTokens } from '../baseTokens'
 
 export const apLightTheme = {
-	primary: apColorsTokens.cyan.darken20,
-	secondary: apColorsTokens.cyan.darken60,
-	accentPrimaryLight: apColorsTokens.blue.lighten20,
-	accentPrimary: apColorsTokens.cyan.darken20,
-	accentPrimaryContrasted: apColorsTokens.cyan.darken40,
-	accentSecondaryLight: apColorsTokens.cyan.base,
-	accentSecondary: apColorsTokens.cyan.darken60,
-	accentSecondaryContrasted: apColorsTokens.cyan.darken80,
-	accentAlt: apColorsTokens.grey.base,
-	error: apColorsTokens.red.darken20,
-	info: apColorsTokens.parma.darken40,
-	avatar: apColorsTokens.cyan.darken20,
-	success: apColorsTokens.turquoise.darken20,
-	warning: apColorsTokens.yellow.darken60,
-	risquePro: apColorsTokens.red.base,
-	light: apColorsTokens.grey.lighten60,
-	dark: apColorsTokens.grey.darken80,
-	onBackground: apSemanticTokens.colors.background.surface,
-	onSurfaceAlt: apSemanticTokens.colors.background.surfaceAlt,
-	onSurface: apSemanticTokens.colors.background.surface,
-	onWarning: apSemanticTokens.colors.background.warning,
-	overlayFullpage: apSemanticTokens.colors.overlay.fullpage,
-	overlayOnDark: apSemanticTokens.colors.overlay.onDark,
-	overlayOnLight: apSemanticTokens.colors.overlay.onLight,
-	interactiveSelectionEnabled: apSemanticTokens.colors.interactive.selectionEnabled,
-	interactiveSelectionHover: apSemanticTokens.colors.interactive.selectionHover,
-	interactiveSelectionPressed: apSemanticTokens.colors.interactive.selectionPressed,
-	interactiveSelectionSelected: apSemanticTokens.colors.interactive.selectionSelected,
-	interactiveSelectionHoverOnSelected: apSemanticTokens.colors.interactive.selectionHoverOnSelected,
-	interactiveSelectionSelectedAccent: apSemanticTokens.colors.interactive.selectionSelectedAccent,
-	interactiveSelectionHoverOnSelectedAccent: apSemanticTokens.colors.interactive.selectionHoverOnSelectedAccent,
-	interactiveSelectionDisabled: apSemanticTokens.colors.interactive.selectionDisabled,
-	backgroundMain: apSemanticTokens.colors.background.main,
-	backgroundSurface: apSemanticTokens.colors.background.surface,
-	backgroundSurfaceAlt: apSemanticTokens.colors.background.surfaceAlt,
-	backgroundMainAlt: apSemanticTokens.colors.background.mainAlt,
-	backgroundRaised: apSemanticTokens.colors.background.raised,
-	backgroundAccent: apSemanticTokens.colors.background.accent,
-	backgroundAccentContrasted: apSemanticTokens.colors.background.accentContrasted,
-	backgroundAccentAlt: apSemanticTokens.colors.background.accentAlt,
-	backgroundInfo: apSemanticTokens.colors.background.info,
-	backgroundInfoSubdued: apSemanticTokens.colors.background.infoSubdued,
-	backgroundInfoContrasted: apSemanticTokens.colors.background.infoContrasted,
-	backgroundSuccess: apSemanticTokens.colors.background.success,
-	backgroundSuccessSubdued: apSemanticTokens.colors.background.successSubdued,
-	backgroundSuccessContrasted: apSemanticTokens.colors.background.successContrasted,
-	backgroundWarning: apSemanticTokens.colors.background.warning,
-	backgroundWarningSubdued: apSemanticTokens.colors.background.warningSubdued,
-	backgroundWarningContrasted: apSemanticTokens.colors.background.warningContrasted,
-	backgroundError: apSemanticTokens.colors.background.error,
-	backgroundErrorSubdued: apSemanticTokens.colors.background.errorSubdued,
-	backgroundErrorContrasted: apSemanticTokens.colors.background.errorContrasted,
-	backgroundDisabled: apSemanticTokens.colors.background.disabled,
-	backgroundDisabledOnDark: apSemanticTokens.colors.background.disabledOnDark,
-	backgroundAssure: apSemanticTokens.colors.background.assure,
-	backgroundProfessionnel: apSemanticTokens.colors.background.professionnel,
-	backgroundEntreprise: apSemanticTokens.colors.background.entreprise,
-	borderDarker: apSemanticTokens.colors.border.darker,
-	borderBase: apSemanticTokens.colors.border.base,
-	borderSubdued: apSemanticTokens.colors.border.subdued,
-	borderAccentPrimary: apSemanticTokens.colors.border.accentPrimary,
-	borderAccentPrimaryContrasted: apSemanticTokens.colors.border.accentPrimaryContrasted,
-	borderAccentPrimaryOnDark: apSemanticTokens.colors.border.accentPrimaryOnDark,
-	borderAccentSecondary: apSemanticTokens.colors.border.accentSecondary,
-	borderAccentSecondaryContrasted: apSemanticTokens.colors.border.accentSecondaryContrasted,
-	borderInfo: apSemanticTokens.colors.border.info,
-	borderSuccess: apSemanticTokens.colors.border.success,
-	borderWarning: apSemanticTokens.colors.border.warning,
-	borderError: apSemanticTokens.colors.border.error,
-	borderOnDark: apSemanticTokens.colors.border.onDark,
-	borderDisabled: apSemanticTokens.colors.border.disabled,
-	borderDisabledOnDark: apSemanticTokens.colors.border.disabledOnDark,
-	textBase: apSemanticTokens.colors.text.base,
-	textAccentPrimary: apSemanticTokens.colors.text.accentPrimary,
-	textAccentPrimaryContrasted: apSemanticTokens.colors.text.accentPrimaryContrasted,
-	textAccentSecondary: apSemanticTokens.colors.text.accentSecondary,
-	textSubdued: apSemanticTokens.colors.text.subdued,
-	textInfo: apSemanticTokens.colors.text.info,
-	textSuccess: apSemanticTokens.colors.text.success,
-	textWarning: apSemanticTokens.colors.text.warning,
-	textError: apSemanticTokens.colors.text.error,
-	textDisabled: apSemanticTokens.colors.text.disabled,
-	textOnDark: apSemanticTokens.colors.text.onDark,
-	textSubduedOnDark: apSemanticTokens.colors.text.subduedOnDark,
-	textDisabledOnDark: apSemanticTokens.colors.text.disabledOnDark,
-	iconBase: apSemanticTokens.colors.icon.base,
-	iconSubdued: apSemanticTokens.colors.icon.subdued,
-	iconSubduedOnDark: apSemanticTokens.colors.icon.subduedOnDark,
-	iconAccentPrimary: apSemanticTokens.colors.icon.accentPrimary,
-	iconAccentPrimaryContrasted: apSemanticTokens.colors.icon.accentPrimaryContrasted,
-	iconAccentSecondary: apSemanticTokens.colors.icon.accentSecondary,
-	iconInfo: apSemanticTokens.colors.icon.info,
-	iconSuccess: apSemanticTokens.colors.icon.success,
-	iconWarning: apSemanticTokens.colors.icon.warning,
-	iconError: apSemanticTokens.colors.icon.error,
-	iconOnDark: apSemanticTokens.colors.icon.onDark,
-	iconDisabled: apSemanticTokens.colors.icon.disabled,
-	iconDisabledOnDark: apSemanticTokens.colors.icon.disabledOnDark,
+	risquePro: baseTokens.color.red.base,
+
+	// Border
+	border: baseTokens.color.cyan.darken20,
+	borderVariant: baseTokens.color.grey.lighten40,
+	borderBright: baseTokens.color.white.base,
+	borderDim: baseTokens.color.white.alpha40,
+
+	// Disabled
+	disabled: baseTokens.color.grey.lighten80,
+	inverseSurface: baseTokens.color.grey.base,
+	onDisabled: baseTokens.color.grey.lighten40,
+	onDisabledVariant: baseTokens.color.white.alpha40,
+
+	// Primary
+	primary: baseTokens.color.cyan.darken20,
+	onPrimary: baseTokens.color.white.base,
+	primaryVariant: baseTokens.color.cyan.darken40,
+	onPrimaryVariant: baseTokens.color.white.base,
+
+	// Secondary
+	secondary: baseTokens.color.cyan.darken60,
+	onSecondary: baseTokens.color.white.base,
+	secondaryVariant: baseTokens.color.cyan.darken80,
+	onSecondaryVariant: baseTokens.color.white.base,
+
+	// Overlay
+	overlay: baseTokens.color.grey.alpha40,
+
+	// Surface
+	surface: baseTokens.color.white.base,
+	surfaceBright: baseTokens.color.cyan.lighten97,
+	surfaceDim: baseTokens.color.cyan.lighten80,
+	onSurface: baseTokens.color.grey.darken60,
+	onSurfaceVariant: baseTokens.color.grey.base,
+
+	// Background
+	background: baseTokens.color.cyan.lighten97,
+	backgroundVariant: baseTokens.color.white.base,
+	onBackground: baseTokens.color.grey.darken60,
+	onBackgroundVariant: baseTokens.color.grey.lighten40,
+
+	// Feedback
+	info: baseTokens.color.parma.darken40,
+	infoVariant: baseTokens.color.parma.lighten80,
+	onInfo: baseTokens.color.white.base,
+	onInfoVariant: baseTokens.color.parma.darken60,
+	error: baseTokens.color.red.darken20,
+	onError: baseTokens.color.white.base,
+	errorVariant: baseTokens.color.red.lighten90,
+	onErrorVariant: baseTokens.color.red.darken60,
+	success: baseTokens.color.forestGreen.base,
+	onSuccess: baseTokens.color.white.base,
+	successVariant: baseTokens.color.forestGreen.lighten90,
+	onSuccessVariant: baseTokens.color.forestGreen.darken60,
+	warning: baseTokens.color.yellow.base,
+	onWarning: baseTokens.color.grey.darken60,
+	warningVariant: baseTokens.color.yellow.lighten80,
+	onWarningVariant: baseTokens.color.yellow.darken60,
+
+	// Interaction
+	interactionLightenEnabled: baseTokens.color.none,
+	interactionLightenHover: baseTokens.color.white.alpha20,
+	interactionLightenSelected: baseTokens.color.white.alpha20,
+	interactionLightenPressed: baseTokens.color.white.alpha38,
+	interactionDarkEnabled: baseTokens.color.transparentCyan.alpha00,
+	interactionDarkHover: baseTokens.color.transparentCyan.alpha08,
+	interactionDarkPressed: baseTokens.color.transparentCyan.alpha18,
+	interactionDarkenEnabled: baseTokens.color.transparentBlack.alpha00,
+	interactionDarkenHover: baseTokens.color.transparentBlack.alpha20,
+	interactionDarkenPressed: baseTokens.color.transparentBlack.alpha40,
 }

package/src/designTokens/tokens/amelipro/apSemantic.ts

@@ -79,7 +79,7 @@ export const apSemanticTokens = {
 		overlay: {
 			fullpage: apColorsTokens.grey.darken60,
 			onDark: apColorsTokens.cyan.darken40,
-			onLight: apColorsTokens.white.base,
+			onLight: apColorsTokens.cyan.darken20,
 		},
 		interactive: {
 			selectionEnabled: apColorsTokens.white.base,

package/src/designTokens/tokens/baseContextualTokens.ts

@@ -26,12 +26,6 @@ export const baseContextualTokens = {
 		default: '24px',
 		large: '32px',
 	},
-	radius: {
-		rounded0: '0',
-		rounded: '4px',
-		roundedLg: '8px',
-		roundedPill: '64px',
-	},
 	padding: {
 		0: '0',
 		2: '8px',
@@ -43,6 +37,7 @@ export const baseContextualTokens = {
 		14: '56px',
 		16: '64px',
 	},
+
 	fontSize: {
 		titres: '24px',
 		titresAlternatifs: '20px',