@cnamts/synapse 1.0.23 → 1.0.25

package/src/assets/amelipro/apTokens2026.scss

@@ -20,8 +20,8 @@ $media-only-lg: '(min-width: #{$md + 0.01}px) and (max-width: #{$lg}px)'; // 126
 $media-only-xl: '(min-width: #{$lg + 0.01}px)'; // >= 1904px
 
 // AMELIPRO COLORS
-$ap-primary: #00749c; // bleu-4
-$ap-secondary: #00516d; // bleu-1
+$ap-primary: #0084b2; // bleu-4
+$ap-secondary: #004259; // bleu-1
 $ap-error: #b33f2e; // rouge-3
 $ap-informations: #4d547d; // parme-1
 $ap-succes: #007863; // turquoise-3
@@ -32,7 +32,7 @@ $ap-grey: #545859; // gris-2
 $ap-blue: #0c419a; // bleu-9
 $ap-yellow: #f0b323; // jaune-2
 $ap-green: #56c271; // vert-3
-$ap-red: #b33f2e; // rouge-3
+$ap-red: $ap-error; // rouge-3
 $ap-turquoise: #33bca5; // turquoise-4
 $ap-parme: #dde6fb; // parme-2
 $ap-pink: #d00063; // rose-1
@@ -50,8 +50,8 @@ $ap-grey-lighten6: #f4f8f9; // gris-8 app background
 
 // AMELIPRO BLUE VARIANT
 // DARKEN
-$ap-blue-darken1: #00749c; // bleu-4
-$ap-blue-darken2: #00516d; // bleu-1
+$ap-blue-darken1: $ap-primary; // bleu-4
+$ap-blue-darken2: $ap-secondary; // bleu-1
 // LIGHTEN
 $ap-blue-lighten1: #99dbf2; // bleu-6
 $ap-blue-lighten2: #ccedf9; // bleu-7

package/src/assets/overrides/_breakpoints.scss

@@ -0,0 +1,25 @@
+// Shared responsive breakpoints
+// Usage: @use '@/assets/overrides/breakpoints' as bp;
+//        @media #{bp.$up-md} { ... }
+
+// Up variants (mobile-first)
+$up-sm: '(width >= 600px)';
+$up-md: '(width >= 960px)';
+$up-lg: '(width >= 1264px)';
+
+// Down variants
+$down-xs: '(width <= 599.99px)';
+$down-sm: '(width <= 959.99px)';
+$down-md: '(width <= 1263.99px)';
+
+// Range variants
+$sm-only: '(width >= 600px) and (width <= 959.99px)';
+$md-only: '(width >= 960px) and (width <= 1263.99px)';
+
+// Component-specific (AmeliproDentalChart)
+$up-dental: '(width >= 1240px)';
+$down-dental: '(width <= 1239.999px)';
+
+// Component-specific (SocialMediaLinks)
+$up-tablet: '(width >= 768px)';
+$down-mobile: '(width <= 767px)';

package/src/assets/overrides/_btns.scss

@@ -1,5 +1,3 @@
-@use '@/assets/apTokens';
-
 .v-btn {
 	text-transform: inherit !important;
 	font-weight: 700 !important;
@@ -15,9 +13,3 @@
 .v-btn.v-tab {
 	text-transform: uppercase !important;
 }
-
-.theme-ap .v-btn {
-	&:hover {
-		background-color: apTokens.$colors-interactive-positive-secondary-action-hover !important;
-	}
-}

package/src/assets/overrides/_forms.scss

@@ -1,7 +1,5 @@
-@use '@/assets/tokens';
-
 .v-messages {
-	font-size: 14px !important;
+	font-size: var(--v-fontSize-liensEtLibelles) !important;
 
 	.v-messages__message {
 		line-height: 16px !important;

package/src/assets/overrides/_icons.scss

@@ -1,20 +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;
+	color: rgb(var(--v-theme-iconAccentPrimary)) !important;
 	transition: color 0.2s ease;
+
+	&:hover {
+		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;
 }
 
@@ -25,6 +25,10 @@
 	opacity: 0.08;
 }
 
+.v-theme--cnam .v-btn--icon:hover {
+	opacity: 0.8;
+}
+
 .v-theme--ap.v-icon,
 .v-theme--ap2026.v-icon,
 .v-theme--cnam.v-icon,
@@ -33,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,34 +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;
-	}
-}
-
-.theme-ap {
-	a {
-		color: apTokens.$colors-text-accent-primary;
+		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));
 		}
 	}
 }
@@ -216,65 +208,61 @@
 .theme-ap,
 .theme-ap2026 {
 	p {
-		font-size: $font-size-xs;
+		font-size: var(--v-ap-fontSizeXs);
 	}
 
 	a {
-		font-size: $font-size-xs;
-
-		&:hover {
-			text-decoration: underline;
-		}
+		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'],
@@ -283,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 {
@@ -357,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;
 	}
 }