@cnamts/synapse 1.0.24 → 1.0.25

package/src/assets/overrides/_icons.scss

@@ -1,24 +1,20 @@
-@use '@/assets/apTokens';
-@use '@/assets/amelipro/apTokens2026';
-@use '@/assets/tokens';
-
 .v-theme--ap.v-btn--icon .v-icon {
-	color: apTokens.$colors-icon-accent-primary !important;
+	color: rgb(var(--v-theme-iconAccentPrimary)) !important;
 	transition: color 0.2s ease;
 
 	&:hover {
-		color: apTokens.$colors-icon-accent-secondary !important;
+		color: rgb(var(--v-theme-iconAccentSecondary)) !important;
 	}
 }
 
 .v-theme--ap2026.v-btn--icon .v-icon {
-	color: apTokens2026.$ap-blue-darken1;
+	color: rgb(var(--v-theme-primary));
 	transition: color 0.2s ease;
 }
 
 .v-theme--cnam.v-btn--icon .v-icon,
 .v-theme--pa.v-btn--icon .v-icon {
-	color: tokens.$colors-icon-accent-primary;
+	color: rgb(var(--v-theme-iconAccentPrimary));
 	transition: color 0.2s ease;
 }
 
@@ -41,17 +37,17 @@
 }
 
 .v-theme--ap.v-btn--icon .v-ripple__animation {
-	background-color: apTokens.$colors-icon-accent-primary !important;
+	background-color: rgb(var(--v-theme-iconAccentPrimary)) !important;
 	opacity: 0.18;
 }
 
 .v-theme--ap2026.v-btn--icon .v-ripple__animation {
-	background-color: apTokens2026.$ap-blue-darken1 !important;
+	background-color: rgb(var(--v-theme-primary)) !important;
 	opacity: 0.18;
 }
 
 .v-theme--cnam.v-btn--icon .v-ripple__animation,
 .v-theme--pa.v-btn--icon .v-ripple__animation {
-	background-color: tokens.$colors-icon-accent-primary !important;
+	background-color: rgb(var(--v-theme-iconAccentPrimary)) !important;
 	opacity: 0.18;
 }

package/src/assets/overrides/_otp.scss

@@ -0,0 +1,41 @@
+/* stylelint-disable selector-class-pattern */
+.theme-cnam,
+.theme-pa {
+	.v-otp-input {
+		.v-field__outline__start,
+		.v-field__outline__end,
+		.v-field__outline__notch {
+			border-color: rgb(var(--v-theme-borderAccentPrimary)) !important;
+		}
+
+		.v-field--focused,
+		.v-field--dirty {
+			.v-field__outline__start,
+			.v-field__outline__end,
+			.v-field__outline__notch {
+				border-color: rgb(var(--v-theme-borderAccentPrimaryContrasted)) !important;
+			}
+		}
+	}
+}
+
+.theme-ap,
+.theme-ap2026 {
+	.v-otp-input {
+		.v-field__outline__start,
+		.v-field__outline__end,
+		.v-field__outline__notch {
+			border-color: rgb(var(--v-theme-borderAccentPrimary)) !important;
+		}
+
+		.v-field--focused,
+		.v-field--dirty {
+			.v-field__outline__start,
+			.v-field__outline__end,
+			.v-field__outline__notch {
+				border-color: rgb(var(--v-theme-borderAccentPrimaryContrasted)) !important;
+			}
+		}
+	}
+}
+/* stylelint-enable selector-class-pattern */

package/src/assets/overrides/_tables.scss

@@ -1,9 +1,6 @@
-@use '@/assets/tokens';
-@use '@/assets/apTokens';
-
 .v-data-table thead th .v-data-table-header__content {
 	opacity: 0.65;
-	font-size: 0.875rem;
+	font-size: var(--v-ap-fontSizeXs);
 	font-weight: 700 !important;
 }
 
@@ -14,24 +11,18 @@
 
 	.v-progress-linear__background,
 	.v-progress-linear__indeterminate {
-		background: tokens.$primary-base !important;
+		background: rgb(var(--v-theme-primary)) !important;
 	}
 }
 
-// Pagination color variables
+// Pagination color variables — uses Vuetify theme CSS custom properties, theme-aware
 .theme-cnam,
-.theme-pa {
-	--pagination-color: #{tokens.$primary-base};
-	--pagination-border: #{tokens.$primary-base};
-	--pagination-ellipsis: #{tokens.$primary-base};
-	--pagination-focused-background-color: rgba(tokens.$primary-base, 0.1);
-	--pagination-background-color: #{tokens.$primary-base};
-}
-
-.theme-ap {
-	--pagination-color: #{apTokens.$primary-base};
-	--pagination-border: #{apTokens.$primary-base};
-	--pagination-ellipsis: #{apTokens.$primary-base};
-	--pagination-focused-background-color: rgba(apTokens.$primary-base, 0.1);
-	--pagination-background-color: #{apTokens.$primary-base};
+.theme-pa,
+.theme-ap,
+.theme-ap2026 {
+	--pagination-color: rgb(var(--v-theme-primary));
+	--pagination-border: rgb(var(--v-theme-primary));
+	--pagination-ellipsis: rgb(var(--v-theme-primary));
+	--pagination-focused-background-color: rgba(var(--v-theme-primary), 0.1);
+	--pagination-background-color: rgb(var(--v-theme-primary));
 }

package/src/assets/overrides/_tooltips.scss

@@ -1,16 +1,26 @@
-@use '@/assets/amelipro/apTokens2026';
-@use '@/assets/apTokens';
-
 .v-tooltip .v-overlay__content {
 	background-color: rgb(0 0 0 / 70%);
 }
 
 .v-theme--ap2026.v-tooltip .v-overlay__content {
-	color: apTokens2026.$ap-black;
-	background-color: apTokens2026.$ap-white;
-	border: 1px solid apTokens2026.$ap-parme-darken1;
+	color: rgb(var(--v-theme-apBlack-base));
+	background-color: rgb(var(--v-theme-apWhite-base));
+	border: 1px solid rgb(var(--v-theme-ap-parme-darken-1));
 }
 
 .v-theme--ap.v-tooltip .v-overlay__content {
-	font-size: apTokens.$font-size-link-label;
+	font-size: var(--v-fontSize-liensEtLibelles);
+}
+
+// errreur Aria accessibility
+.v-tooltip[role='tooltip'] {
+	display: none;
+
+	.v-overlay__content {
+		display: block !important;
+	}
+
+	&.v-overlay--active {
+		display: block;
+	}
 }

package/src/assets/overrides/_typography.scss

@@ -1,7 +1,5 @@
 /* Typography styles for CNAM and PA themes */
-@use '@/assets/tokens.scss' as *;
-@use '@/assets/apTokens';
-@use '@/assets/amelipro/apTokens2026' as *;
+@use 'breakpoints' as bp;
 
 .theme-cnam,
 .theme-pa {
@@ -181,28 +179,28 @@
 	}
 
 	.title {
-		font-size: $font-size-title;
+		font-size: var(--v-fontSize-titres);
 	}
 
 	.alt-title {
-		font-size: $font-size-alt-title;
+		font-size: var(--v-fontSize-titresAlternatifs);
 	}
 
 	.body-text {
-		font-size: $font-size-body-text;
+		font-size: var(--v-fontSize-corpsDeTexte);
 	}
 
 	.link-label {
-		font-size: $font-size-link-label;
+		font-size: var(--v-fontSize-liensEtLibelles);
 	}
 }
 
 .theme-ap2026 {
 	a {
-		color: $ap-blue-darken1;
+		color: rgb(var(--v-theme-primary));
 
 		&:hover {
-			color: $ap-blue-darken2;
+			color: rgb(var(--v-theme-secondary));
 		}
 	}
 }
@@ -210,61 +208,61 @@
 .theme-ap,
 .theme-ap2026 {
 	p {
-		font-size: $font-size-xs;
+		font-size: var(--v-ap-fontSizeXs);
 	}
 
 	a {
-		font-size: $font-size-xs;
+		font-size: var(--v-ap-fontSizeXs);
 	}
 
 	[class*='text-'] {
 		font-family: Arial, Helvetica, sans-serif !important;
-		font-weight: $ap-font-weight-regular;
+		font-weight: 400;
 		line-height: 1.3 !important;
 	}
 
 	// sets the service title text style
 	[class*='text-service-title'] {
 		font-family: Arial, Helvetica, sans-serif !important;
-		font-size: $font-size-xxl !important;
-		font-weight: $ap-font-weight-bold !important;
+		font-size: var(--v-ap-fontSizeXxl) !important;
+		font-weight: 700 !important;
 		text-transform: uppercase !important;
 
-		@media #{$media-down-md} {
-			font-size: $font-size-md !important;
+		@media #{bp.$down-sm} {
+			font-size: var(--v-ap-fontSizeMd) !important;
 		}
 	}
 
 	// sets classes font sizes
 	[class*='text-'][class*='-h1'],
 	h1 {
-		font-size: $font-size-xxl !important;
-		font-weight: $ap-font-weight-bold !important;
+		font-size: var(--v-ap-fontSizeXxl) !important;
+		font-weight: 700 !important;
 	}
 
 	[class*='text-'][class*='-h2'],
 	h2 {
-		font-size: $font-size-lg !important;
-		font-weight: $ap-font-weight-bold;
+		font-size: var(--v-ap-fontSizeLg) !important;
+		font-weight: 700;
 	}
 
 	[class*='text-'][class*='-h3'],
 	h3 {
-		font-size: $font-size-md !important;
+		font-size: var(--v-ap-fontSizeMd) !important;
 	}
 
 	[class*='text-'][class*='-h4'],
 	h4 {
-		font-size: $font-size-sm !important;
-		font-weight: $ap-font-weight-bold;
+		font-size: var(--v-ap-fontSizeSm) !important;
+		font-weight: 700;
 	}
 
 	[class*='text-'][class*='-h5'],
 	[class*='text-'][class*='-h6'],
 	h5,
 	h6 {
-		font-size: $font-size-sm !important;
-		font-weight: $ap-font-weight-bold;
+		font-size: var(--v-ap-fontSizeSm) !important;
+		font-weight: 700;
 	}
 
 	[class*='text-'][class*='-subtitle-1'],
@@ -273,49 +271,49 @@
 	[class*='text-'][class*='-body-2'],
 	[class*='text-'][class*='-button'],
 	[class*='text-'][class*='-overline'] {
-		font-size: $font-size-xs !important;
+		font-size: var(--v-ap-fontSizeXs) !important;
 	}
 
 	[class*='text-'][class*='-caption'] {
-		font-size: $font-size-xxs !important;
+		font-size: var(--v-ap-fontSizeXxs) !important;
 	}
 
 	// sets font weight
 	[class*='text-'][class*='-subtitle-1'],
 	[class*='text-'][class*='-subtitle-2'] {
-		font-weight: $ap-font-weight-bold;
+		font-weight: 700;
 	}
 
 	[class*='font-weight-bold'] {
-		font-weight: $ap-font-weight-bold !important;
+		font-weight: 700 !important;
 	}
 
 	.font-size-xxs {
-		font-size: $font-size-xxs;
+		font-size: var(--v-ap-fontSizeXxs);
 	}
 
 	.font-size-xs {
-		font-size: $font-size-xs;
+		font-size: var(--v-ap-fontSizeXs);
 	}
 
 	.font-size-sm {
-		font-size: $font-size-sm;
+		font-size: var(--v-ap-fontSizeSm);
 	}
 
 	.font-size-md {
-		font-size: $font-size-md;
+		font-size: var(--v-ap-fontSizeMd);
 	}
 
 	.font-size-lg {
-		font-size: $font-size-lg;
+		font-size: var(--v-ap-fontSizeLg);
 	}
 
 	.font-size-xl {
-		font-size: $font-size-xl;
+		font-size: var(--v-ap-fontSizeXl);
 	}
 
 	.font-size-xxl {
-		font-size: $font-size-xxl;
+		font-size: var(--v-ap-fontSizeXxl);
 	}
 
 	.relative {
@@ -347,5 +345,5 @@
 
 // Font Styles
 .theme--ap.v-sheet {
-	color: $ap-grey-darken1;
+	color: rgb(var(--v-theme-ap-grey-darken-1));
 }

package/src/assets/overrides/_utilities.scss

@@ -1,54 +1,50 @@
-@use '@/assets/amelipro/apTokens2026' as *;
-@use '@/assets/apTokens';
-@use '@/assets/tokens';
-
 .theme-cnam,
 .theme-pa {
-	--footer-background: #{tokens.$parma-darken-60};
-	--alert-warning-background: #{tokens.$colors-background-warning};
-	--alert-warning-accent: #{tokens.$colors-border-warning};
-	--alert-warning-border: #{tokens.$colors-border-warning};
-	--alert-warning-icon: #{tokens.$colors-icon-warning};
-	--alert-warning-icon-bg: #{tokens.$colors-background-warning-subdued};
-	--alert-info-background: #{tokens.$colors-background-info};
-	--alert-info-accent: #{tokens.$colors-border-info};
-	--alert-info-border: #{tokens.$colors-border-info};
-	--alert-info-icon: #{tokens.$colors-icon-info};
-	--alert-info-icon-bg: #{tokens.$colors-background-info-subdued};
-	--alert-success-background: #{tokens.$colors-background-success};
-	--alert-success-accent: #{tokens.$colors-border-success};
-	--alert-success-border: #{tokens.$colors-border-success};
-	--alert-success-icon: #{tokens.$colors-icon-success};
-	--alert-success-icon-bg: #{tokens.$colors-background-success-subdued};
-	--alert-error-background: #{tokens.$colors-background-error};
-	--alert-error-accent: #{tokens.$colors-border-error};
-	--alert-error-border: #{tokens.$colors-border-error};
-	--alert-error-icon: #{tokens.$colors-icon-error};
-	--alert-error-icon-bg: #{tokens.$colors-background-error-subdued};
+	--footer-background: rgb(var(--v-theme-parma-darken60));
+	--alert-warning-background: rgb(var(--v-theme-backgroundWarning));
+	--alert-warning-accent: rgb(var(--v-theme-borderWarning));
+	--alert-warning-border: rgb(var(--v-theme-borderWarning));
+	--alert-warning-icon: rgb(var(--v-theme-iconWarning));
+	--alert-warning-icon-bg: rgb(var(--v-theme-backgroundWarningSubdued));
+	--alert-info-background: rgb(var(--v-theme-backgroundInfo));
+	--alert-info-accent: rgb(var(--v-theme-borderInfo));
+	--alert-info-border: rgb(var(--v-theme-borderInfo));
+	--alert-info-icon: rgb(var(--v-theme-iconInfo));
+	--alert-info-icon-bg: rgb(var(--v-theme-backgroundInfoSubdued));
+	--alert-success-background: rgb(var(--v-theme-backgroundSuccess));
+	--alert-success-accent: rgb(var(--v-theme-borderSuccess));
+	--alert-success-border: rgb(var(--v-theme-borderSuccess));
+	--alert-success-icon: rgb(var(--v-theme-iconSuccess));
+	--alert-success-icon-bg: rgb(var(--v-theme-backgroundSuccessSubdued));
+	--alert-error-background: rgb(var(--v-theme-backgroundError));
+	--alert-error-accent: rgb(var(--v-theme-borderError));
+	--alert-error-border: rgb(var(--v-theme-borderError));
+	--alert-error-icon: rgb(var(--v-theme-iconError));
+	--alert-error-icon-bg: rgb(var(--v-theme-backgroundErrorSubdued));
 }
 
 .theme-ap,
 .theme-ap2026 {
-	--footer-background: #{apTokens.$primary-darker};
-	--alert-background: #{apTokens.$primary-darker};
-	--alert-warning-background: #{apTokens.$colors-background-warning};
-	--alert-warning-accent: #{apTokens.$colors-border-warning};
-	--alert-warning-border: #{apTokens.$colors-border-warning};
-	--alert-warning-icon: #{apTokens.$colors-icon-warning};
-	--alert-warning-icon-bg: #{apTokens.$colors-background-warning-subdued};
-	--alert-info-background: #{apTokens.$colors-background-info};
-	--alert-info-accent: #{apTokens.$colors-border-info};
-	--alert-info-border: #{apTokens.$colors-border-info};
-	--alert-info-icon: #{apTokens.$colors-icon-info};
-	--alert-info-icon-bg: #{apTokens.$colors-background-info-subdued};
-	--alert-success-background: #{apTokens.$colors-background-success};
-	--alert-success-accent: #{apTokens.$colors-border-success};
-	--alert-success-border: #{apTokens.$colors-border-success};
-	--alert-success-icon: #{apTokens.$colors-icon-success};
-	--alert-success-icon-bg: #{apTokens.$colors-background-success-subdued};
-	--alert-error-background: #{apTokens.$colors-background-error};
-	--alert-error-accent: #{apTokens.$colors-border-error};
-	--alert-error-border: #{apTokens.$colors-border-error};
-	--alert-error-icon: #{apTokens.$colors-icon-error};
-	--alert-error-icon-bg: #{apTokens.$colors-background-error-subdued};
+	--footer-background: rgb(var(--v-theme-accentPrimaryContrasted));
+	--alert-background: rgb(var(--v-theme-accentPrimaryContrasted));
+	--alert-warning-background: rgb(var(--v-theme-backgroundWarning));
+	--alert-warning-accent: rgb(var(--v-theme-borderWarning));
+	--alert-warning-border: rgb(var(--v-theme-borderWarning));
+	--alert-warning-icon: rgb(var(--v-theme-iconWarning));
+	--alert-warning-icon-bg: rgb(var(--v-theme-backgroundWarningSubdued));
+	--alert-info-background: rgb(var(--v-theme-backgroundInfo));
+	--alert-info-accent: rgb(var(--v-theme-borderInfo));
+	--alert-info-border: rgb(var(--v-theme-borderInfo));
+	--alert-info-icon: rgb(var(--v-theme-iconInfo));
+	--alert-info-icon-bg: rgb(var(--v-theme-backgroundInfoSubdued));
+	--alert-success-background: rgb(var(--v-theme-backgroundSuccess));
+	--alert-success-accent: rgb(var(--v-theme-borderSuccess));
+	--alert-success-border: rgb(var(--v-theme-borderSuccess));
+	--alert-success-icon: rgb(var(--v-theme-iconSuccess));
+	--alert-success-icon-bg: rgb(var(--v-theme-backgroundSuccessSubdued));
+	--alert-error-background: rgb(var(--v-theme-backgroundError));
+	--alert-error-accent: rgb(var(--v-theme-borderError));
+	--alert-error-border: rgb(var(--v-theme-borderError));
+	--alert-error-icon: rgb(var(--v-theme-iconError));
+	--alert-error-icon-bg: rgb(var(--v-theme-backgroundErrorSubdued));
 }

package/src/assets/themes.scss

@@ -9,3 +9,4 @@
 @use 'overrides/tables';
 @use 'overrides/tooltips';
 @use 'overrides/utilities';
+@use 'overrides/otp';

package/src/components/Amelipro/AmeliproAccordion/AmeliproAccordionTemplate/AmeliproAccordionTemplate.vue

@@ -167,7 +167,7 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
+@use '@/assets/overrides/breakpoints' as bp;
 
 .accordion-btn {
 	padding: 0;
@@ -175,7 +175,7 @@
 	border: 0;
 
 	&:focus {
-		outline: 1px dotted apTokens.$ap-grey-darken1;
+		outline: 1px dotted rgb(var(--v-theme-ap-grey-darken-1));
 	}
 }
 
@@ -183,22 +183,22 @@
 	display: block;
 	position: relative;
 	max-width: 100%;
-	border-radius: apTokens.$card-radius;
+	border-radius: var(--v-ap-btnRadius);
 	text-decoration: none;
 	overflow-wrap: break-word;
 	white-space: normal;
 }
 
 .amelipro-accordion__header {
-	padding: apTokens.$card-padding-desktop;
+	padding: 1rem;
 	word-break: break-all;
 
-	@media #{apTokens.$media-down-md} {
-		padding: apTokens.$card-padding-tablet;
+	@media #{bp.$down-sm} {
+		padding: 1rem;
 	}
 
-	@media #{apTokens.$media-down-sm} {
-		padding: apTokens.$card-padding-mobile;
+	@media #{bp.$down-xs} {
+		padding: 0.75rem;
 	}
 
 	.btn-wrapper {
@@ -206,31 +206,31 @@
 	}
 
 	.amelipro-accordion--opened & {
-		padding-bottom: apTokens.$card-padding-mobile;
+		padding-bottom: 0.75rem;
 	}
 }
 
 .amelipro-accordion__wrapper {
 	width: 100%;
-	padding: 0 apTokens.$card-padding-desktop;
-	font-size: apTokens.$font-size-xs;
-	font-weight: apTokens.$ap-font-weight-regular;
+	padding: 0 1rem;
+	font-size: var(--v-ap-fontSizeXs);
+	font-weight: var(--v-ap-fontWeightRegular);
 
-	@media #{apTokens.$media-down-md} {
-		padding: 0 apTokens.$card-padding-tablet;
+	@media #{bp.$down-sm} {
+		padding: 0 1rem;
 	}
 
-	@media #{apTokens.$media-down-sm} {
-		padding: 0 apTokens.$card-padding-mobile;
+	@media #{bp.$down-xs} {
+		padding: 0 0.75rem;
 	}
 }
 
 .amelipro-accordion__content {
-	padding-top: apTokens.$card-padding-desktop;
-	padding-bottom: apTokens.$card-padding-tablet;
+	padding-top: 1rem;
+	padding-bottom: 1rem;
 
-	@media #{apTokens.$media-down-sm} {
-		padding-bottom: apTokens.$card-padding-mobile;
+	@media #{bp.$down-xs} {
+		padding-bottom: 0.75rem;
 	}
 }
 

package/src/components/Amelipro/AmeliproAccordionFrieze/AmeliproAccordionFrieze.vue

@@ -352,8 +352,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
-
 .frieze {
 	position: relative;
 	width: 100%;
@@ -370,37 +368,37 @@
 
 .item-btn {
 	box-sizing: border-box !important;
-	padding: 12px;
-	border: 1px solid apTokens.$ap-grey-lighten3;
+	padding: var(--v-padding-3);
+	border: 1px solid rgb(var(--v-theme-ap-grey-lighten-3));
 	border-radius: 8px;
 	text-align: center;
-	background-color: apTokens.$ap-white;
+	background-color: rgb(var(--v-theme-surface));
 
 	&:hover,
 	&:focus {
 		padding: 11px 12px;
-		background-color: apTokens.$ap-blue-lighten3;
-		border: 2px solid apTokens.$ap-blue-darken1;
+		background-color: rgb(var(--v-theme-ap-blue-lighten-3));
+		border: 2px solid rgb(var(--v-theme-primary));
 	}
 }
 
 .item-btn__link-style-text {
-	color: apTokens.$ap-blue-darken1;
-	font-size: apTokens.$font-size-xs;
+	color: rgb(var(--v-theme-primary));
+	font-size: var(--v-ap-fontSizeXs);
 	text-decoration: underline;
 }
 
 .item-empty {
 	box-sizing: border-box !important;
-	padding: 12px;
-	border: 1px solid apTokens.$ap-grey-lighten2;
+	padding: var(--v-padding-3);
+	border: 1px solid rgb(var(--v-theme-ap-grey-lighten-2));
 	border-radius: 8px;
-	color: apTokens.$ap-grey;
+	color: rgb(var(--v-theme-ap-grey));
 	text-align: center;
-	background-color: apTokens.$ap-grey-lighten2;
+	background-color: rgb(var(--v-theme-ap-grey-lighten-2));
 
 	& .item-btn__link-style-text {
-		color: apTokens.$ap-grey;
+		color: rgb(var(--v-theme-ap-grey));
 	}
 }
 

package/src/components/Amelipro/AmeliproAccordionList/AmeliproAccordionList.vue

@@ -287,12 +287,10 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
-
 .total-counter {
-	background-color: apTokens.$ap-grey-lighten2;
-	border: 1px solid apTokens.$ap-grey-darken1;
-	border-radius: apTokens.$btn-radius;
-	padding: 0.75rem 1rem;
+	background-color: rgb(var(--v-theme-ap-grey-lighten-2));
+	border: 1px solid rgb(var(--v-theme-ap-grey-darken-1));
+	border-radius: var(--v-ap-btnRadius);
+	padding: var(--v-ap-cardPaddingMobile) var(--v-ap-cardPaddingDesktop);
 }
 </style>