@cnamts/synapse 1.0.24 → 1.0.25

package/src/components/Amelipro/AmeliproCustomSelector/AmeliproCustomSelector.vue

@@ -263,18 +263,18 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
+@use '@/assets/overrides/breakpoints' as bp;
 
 .amelipro-custom-selector__label {
-	font-size: apTokens.$font-size-sm;
-	font-weight: apTokens.$ap-font-weight-bold;
+	font-size: var(--v-ap-fontSizeSm);
+	font-weight: var(--v-ap-fontWeightBold);
 }
 
 .amelipro-custom-selector__item {
 	width: 100%;
 
 	&.item-per-line-2 {
-		@media #{apTokens.$media-up-sm} {
+		@media #{bp.$up-sm} {
 			width: calc(50% - 8px);
 			margin-left: 8px;
 
@@ -285,7 +285,7 @@
 	}
 
 	&.item-per-line-3 {
-		@media #{apTokens.$media-up-sm} {
+		@media #{bp.$up-sm} {
 			width: calc((100% / 3) - (16px / 3));
 			margin-left: 8px;
 
@@ -315,14 +315,14 @@ input {
 		position: relative;
 		padding: 0.75rem 3rem 0.75rem 1rem;
 		border-radius: 5px;
-		border: 1px solid apTokens.$ap-grey;
-		background-color: apTokens.$ap-white;
+		border: 1px solid rgb(var(--v-theme-ap-grey));
+		background-color: rgb(var(--v-theme-surface));
 		cursor: pointer;
 	}
 
 	input:checked + &,
 	.checkbox-input[aria-checked='true'] & {
-		background-color: apTokens.$ap-blue-lighten3;
+		background-color: rgb(var(--v-theme-ap-blue-lighten-3));
 
 		&::after {
 			position: absolute;
@@ -330,8 +330,8 @@ input {
 			right: 1rem;
 			width: 1rem;
 			height: 0.5rem;
-			border-bottom: 2px solid apTokens.$ap-blue-darken1;
-			border-left: 2px solid apTokens.$ap-blue-darken1;
+			border-bottom: 2px solid rgb(var(--v-theme-primary));
+			border-left: 2px solid rgb(var(--v-theme-primary));
 			transform: rotate(-50deg);
 			content: '';
 		}
@@ -339,12 +339,12 @@ input {
 
 	input:disabled + &,
 	.checkbox-input[aria-disabled='true'] & {
-		background-color: apTokens.$ap-grey-lighten2;
+		background-color: rgb(var(--v-theme-ap-grey-lighten-2));
 		cursor: default;
 
 		&::after {
-			border-bottom-color: apTokens.$ap-grey-darken1;
-			border-left-color: apTokens.$ap-grey-darken1;
+			border-bottom-color: rgb(var(--v-theme-ap-grey-darken-1));
+			border-left-color: rgb(var(--v-theme-ap-grey-darken-1));
 		}
 	}
 }

package/src/components/Amelipro/AmeliproDentalChart/AmeliproDentalChart.vue

@@ -145,16 +145,18 @@
 </template>
 
 <style lang="scss" scoped>
+@use '@/assets/overrides/breakpoints' as bp;
+
 .tooth-item {
 	min-width: 2.5rem;
 	margin-left: 4px;
 	margin-right: 4px;
 
-	@media (width <= 1239.999px) {
+	@media #{bp.$down-dental} {
 		width: 2.5rem;
 	}
 
-	@media (width >= 1240px) {
+	@media #{bp.$up-dental} {
 		width: 3.125rem;
 		margin-left: 8px;
 		margin-right: 8px;

package/src/components/Amelipro/AmeliproDentalChart/AmeliproTooth/AmeliproTooth.vue

@@ -147,7 +147,7 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
+@use '@/assets/overrides/breakpoints' as bp;
 
 .tooth-btn {
 	border-radius: 8px;
@@ -155,18 +155,18 @@
 	min-height: 100%;
 
 	&:hover {
-		background-color: apTokens.$ap-blue-lighten4;
+		background-color: rgb(var(--v-theme-ap-blue-lighten-4));
 	}
 
 	& img {
 		max-width: 90%;
 		margin: 8px 0;
 
-		@media (width <= 1239.999px) {
+		@media #{bp.$down-dental} {
 			width: 2.5rem;
 		}
 
-		@media (width >= 1240px) {
+		@media #{bp.$up-dental} {
 			width: 3.125rem;
 		}
 	}

package/src/components/Amelipro/AmeliproDialog/AmeliproDialog.vue

@@ -303,29 +303,27 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
-
 .v-dialog {
 	& :deep(.v-overlay__content) {
 		overflow-y: auto !important;
 	}
 
 	&.dialog-radius :deep(.v-overlay__content) {
-		border-radius: apTokens.$card-radius;
+		border-radius: var(--v-ap-btnRadius);
 	}
 }
 
 .dialog {
-	padding: apTokens.$dialog-padding;
+	padding: var(--v-ap-dialogPadding);
 }
 
 .dialog__header {
-	padding-bottom: 0.5rem;
-	border-bottom: 1px solid apTokens.$ap-grey-lighten3;
+	padding-bottom: var(--v-ap-btnPaddingY);
+	border-bottom: 1px solid rgb(var(--v-theme-ap-grey-lighten-3));
 }
 
 .dialog__title {
 	width: calc(100% - 60px);
-	font-size: apTokens.$font-size-lg;
+	font-size: var(--v-ap-fontSizeLg);
 }
 </style>

package/src/components/Amelipro/AmeliproDisclosure/AmeliproDisclosure.vue

@@ -64,15 +64,13 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
-
 .accordion-btn {
 	padding: 0;
 	background-color: transparent;
 	border: 0;
 
 	&:focus {
-		outline: 1px dotted apTokens.$ap-grey-darken1;
+		outline: 1px dotted rgb(var(--v-theme-ap-grey-darken-1));
 	}
 }
 </style>

package/src/components/Amelipro/AmeliproErrorTemplate/AmeliproErrorTemplate.vue

@@ -170,18 +170,16 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
-
 .w-70 {
 	width: 70% !important;
 }
 
 .amelipro-error-template__title,
 .amelipro-error-template-content-title {
-	font-size: apTokens.$font-size-md;
+	font-size: var(--v-ap-fontSizeMd);
 }
 
 .amelipro-error-template-content-btn {
-	font-size: apTokens.$font-size-sm;
+	font-size: var(--v-ap-fontSizeSm);
 }
 </style>

package/src/components/Amelipro/AmeliproFilePreview/AmeliproFilePreview.vue

@@ -140,8 +140,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
-
 .download-file-link {
 	&:hover {
 		text-decoration: none;
@@ -149,12 +147,12 @@
 }
 
 .download-file-link-text {
-	color: apTokens.$ap-blue-darken1;
-	font-size: apTokens.$font-size-sm;
-	font-weight: apTokens.$ap-font-weight-bold;
+	color: rgb(var(--v-theme-primary));
+	font-size: var(--v-ap-fontSizeSm);
+	font-weight: var(--v-ap-fontWeightBold);
 
 	a:hover & {
-		color: apTokens.$ap-blue-darken2;
+		color: rgb(var(--v-theme-secondary));
 		text-decoration: underline;
 	}
 }

package/src/components/Amelipro/AmeliproFilters/AmeliproFilters.vue

@@ -153,11 +153,11 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
+@use '@/assets/overrides/breakpoints' as bp;
 
 .item-spacing {
 	&:not(:last-child) {
-		@media #{apTokens.$media-up-sm} {
+		@media #{bp.$up-sm} {
 			margin-right: 16px;
 		}
 	}
@@ -176,22 +176,22 @@ input {
 }
 
 .filter {
-	padding: apTokens.$filter-padding-y apTokens.$filter-padding-x;
-	font-weight: apTokens.$filter-font-weight;
+	padding: 0.75rem 2rem;
+	font-weight: var(--v-ap-fontWeightBold);
 
 	input + &,
 	.amelipro-filters__filter-input & {
 		position: relative;
-		border-radius: apTokens.$filter-radius;
-		border: 1px solid apTokens.$ap-blue-darken1;
-		background-color: apTokens.$ap-white;
-		color: apTokens.$ap-blue-darken1;
+		border-radius: var(--v-ap-btnRadius);
+		border: 1px solid rgb(var(--v-theme-primary));
+		background-color: rgb(var(--v-theme-surface));
+		color: rgb(var(--v-theme-primary));
 		cursor: pointer;
 	}
 
 	input:checked + &,
 	.amelipro-filters__filter-input[aria-checked='true'] & {
-		background-color: apTokens.$ap-blue-lighten3;
+		background-color: rgb(var(--v-theme-ap-blue-lighten-3));
 
 		&::after {
 			position: absolute;
@@ -199,8 +199,8 @@ input {
 			left: 1.1rem;
 			width: 1rem;
 			height: 0.5rem;
-			border-bottom: 2px solid apTokens.$ap-blue-darken1;
-			border-left: 2px solid apTokens.$ap-blue-darken1;
+			border-bottom: 2px solid rgb(var(--v-theme-primary));
+			border-left: 2px solid rgb(var(--v-theme-primary));
 			transform: rotate(-50deg);
 			content: '';
 		}
@@ -208,11 +208,11 @@ input {
 
 	input:focus + &,
 	.amelipro-filters__filter-input:focus & {
-		outline: 1px dotted apTokens.$ap-grey-darken1;
+		outline: 1px dotted rgb(var(--v-theme-ap-grey-darken-1));
 	}
 }
 
 .amelipro-filters__label {
-	font-weight: apTokens.$label-font-weight;
+	font-weight: var(--v-ap-fontWeightBold);
 }
 </style>

package/src/components/Amelipro/AmeliproFirstLogin/AmeliproFirstLogin.vue

@@ -283,8 +283,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
-
 .rounded {
 	border-radius: 2.5rem !important;
 }
@@ -305,11 +303,11 @@
 }
 
 .fs-14 {
-	font-size: apTokens.$font-size-xs;
+	font-size: var(--v-ap-fontSizeXs);
 }
 
 .fs-18 {
-	font-size: apTokens.$font-size-md;
+	font-size: var(--v-ap-fontSizeMd);
 }
 
 .custom-marker {
@@ -320,7 +318,7 @@
 		height: 7px;
 		margin-top: 7px;
 		border-radius: 50%;
-		background-color: apTokens.$ap-blue-darken2;
+		background-color: rgb(var(--v-theme-secondary));
 	}
 }
 

package/src/components/Amelipro/AmeliproFooter/AmeliproFooter.vue

@@ -401,10 +401,8 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
-
 :deep(.v-btn):focus {
-	outline-color: apTokens.$ap-white;
+	outline-color: rgb(var(--v-theme-apWhite-base));
 }
 
 :deep(.v-btn).v-btn--size-default {

package/src/components/Amelipro/AmeliproHeader/AmeliproHeader.vue

@@ -461,12 +461,10 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
-
 .header-separator {
 	width: 1px;
 	height: 38px;
-	background-color: apTokens.$ap-blue-darken1;
+	background-color: rgb(var(--v-theme-primary));
 }
 
 .header-bar-container {
@@ -475,7 +473,7 @@
 		padding: 0 38px;
 
 		& .v-btn:focus {
-			outline-color: apTokens.$ap-white;
+			outline-color: rgb(var(--v-theme-apWhite-base));
 		}
 	}
 

package/src/components/Amelipro/AmeliproHeader/AmeliproHeaderBar/AmeliproHeaderBar.vue

@@ -113,8 +113,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
-
 .header-bar {
 	z-index: 1;
 	height: auto;
@@ -129,6 +127,6 @@
 }
 
 .navigation-bar {
-	background-color: apTokens.$ap-blue-darken1;
+	background-color: rgb(var(--v-theme-primary));
 }
 </style>

package/src/components/Amelipro/AmeliproHeader/AmeliproHeaderBar/AmeliproHeaderBrandSection/AmeliproHeaderBrandSection.vue

@@ -4,7 +4,7 @@
 	import type { LogoInfo } from './types'
 	import { LogoSizeEnum } from '../AmeliproLogoAm/LogoSizeEnum'
 	import { type RouteLocationRaw } from 'vue-router'
-	import { convertToHex } from '@/utils/functions/convertToHex'
+	import { apColorsTokens2026 } from '@/designTokens/tokens/amelipro/apColors2026'
 	import { dividerDimensionsMapping } from './dividerDimensionsMapping'
 	import { locales } from './locales'
 	import { useDisplay } from 'vuetify'
@@ -79,7 +79,11 @@
 
 	const showDivider = computed<boolean>(() => Boolean(ameliproLogo.value || props.serviceTitle))
 	const showServiceSubTitle = computed<boolean>(() => Boolean(props.serviceTitle && props.serviceSubTitle))
-	const dividerColor = computed<string>(() => (props.themeAmelipro ? '#006386' : convertToHex('ap-blue')))
+	// SVG fill requires a hex literal — use token references directly instead of going through convertToHex
+	const dividerColor = computed<string>(() => props.themeAmelipro
+		? apColorsTokens2026.apBlue.darken2 // = theme secondary
+		: apColorsTokens2026.apBlue.base, // = ap-blue
+	)
 	const dividerDimensions = computed(() => {
 		const { xSmall, small, normal } = dividerDimensionsMapping
 
@@ -179,7 +183,7 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
+@use '@/assets/overrides/breakpoints' as bp;
 
 .header-brand-section {
 	overflow: hidden;
@@ -189,30 +193,30 @@
 	}
 
 	h1.header-title {
-		font-size: apTokens.$font-size-xxl !important;
+		font-size: var(--v-ap-fontSizeXxl) !important;
 		letter-spacing: -0.48px !important;
 
-		@media #{apTokens.$media-down-md} {
-			font-size: apTokens.$font-size-lg !important;
+		@media #{bp.$down-sm} {
+			font-size: var(--v-ap-fontSizeLg) !important;
 			letter-spacing: -0.4px !important;
 		}
 
-		@media #{apTokens.$media-only-xs} {
-			font-size: apTokens.$font-size-md !important;
+		@media #{bp.$down-xs} {
+			font-size: var(--v-ap-fontSizeMd) !important;
 			letter-spacing: -0.32px !important;
 		}
 	}
 
 	h2.header-title {
-		font-size: apTokens.$font-size-md !important;
-		color: apTokens.$ap-grey-darken1;
+		font-size: var(--v-ap-fontSizeMd) !important;
+		color: rgb(var(--v-theme-ap-grey-darken-1));
 
-		@media #{apTokens.$media-down-md} {
-			font-size: apTokens.$font-size-sm !important;
+		@media #{bp.$down-sm} {
+			font-size: var(--v-ap-fontSizeSm) !important;
 		}
 
-		@media #{apTokens.$media-only-xs} {
-			font-size: apTokens.$font-size-xs !important;
+		@media #{bp.$down-xs} {
+			font-size: var(--v-ap-fontSizeXs) !important;
 		}
 	}
 
@@ -225,11 +229,11 @@
 	.logo-amelipro {
 		width: 98px;
 
-		@media #{apTokens.$media-down-md} {
+		@media #{bp.$down-sm} {
 			width: 77px;
 		}
 
-		@media #{apTokens.$media-only-xs} {
+		@media #{bp.$down-xs} {
 			width: 52px;
 		}
 	}

package/src/components/Amelipro/AmeliproHeader/AmeliproHeaderBar/AmeliproHeaderBrandSection/__tests__/__snapshots__/AmeliproHeaderBrandSection.spec.ts.snap

@@ -80,7 +80,7 @@ exports[`AmeliproHeaderBrandSection > Snapshots > renders the component with onl
     <svg
       aria-hidden="true"
       class="header-home-link__divider"
-      fill="#006386"
+      fill="#00516D"
       focusable="false"
       height="64"
       role="img"

package/src/components/Amelipro/AmeliproIconBtn/AmeliproIconBtn.vue

@@ -275,8 +275,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
-
 .v-btn {
 	background-color: transparent;
 	letter-spacing: unset;
@@ -292,7 +290,7 @@
 	}
 
 	&:focus {
-		outline: 1px dotted apTokens.$ap-black;
+		outline: 1px dotted #000;
 	}
 }
 
@@ -308,7 +306,7 @@
 	min-height: 1.25rem;
 	padding: 0 0.125rem;
 	border-radius: 50%;
-	font-size: apTokens.$font-size-xxs;
+	font-size: var(--v-ap-fontSizeXxs);
 
 	& span {
 		display: block;

package/src/components/Amelipro/AmeliproIllustratedDataTile/AmeliproIllustratedDataTile.vue

@@ -142,10 +142,8 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
-
 .illustrated-data-tile__wrapper {
-	border-radius: 0.5rem;
+	border-radius: var(--v-ap-inputRadius);
 	transform: translateY(0);
 	transition: transform 0.1s ease-in-out;
 
@@ -157,14 +155,14 @@
 .illustrated-data-tile__label-line-1 {
 	margin-top: 2rem;
 	margin-bottom: 1rem;
-	font-size: apTokens.$font-size-sm;
-	font-weight: apTokens.$ap-font-weight-bold;
+	font-size: var(--v-ap-fontSizeSm);
+	font-weight: var(--v-ap-fontWeightBold);
 }
 
 .illustrated-data-tile__label-line-2 {
 	margin-bottom: 2rem;
-	font-size: apTokens.$font-size-xs;
-	font-weight: apTokens.$ap-font-weight-regular;
+	font-size: var(--v-ap-fontSizeXs);
+	font-weight: var(--v-ap-fontWeightRegular);
 }
 
 .illustrated-data-tile__img {

package/src/components/Amelipro/AmeliproIllustratedRadioGroup/AmeliproIllustratedRadioGroup.vue

@@ -179,15 +179,13 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
-
 .icon-radio__wrapper {
 	border-radius: 10px;
 }
 
 .amelipro-illustrated-radio-group__label {
-	font-size: apTokens.$font-size-xs;
-	font-weight: apTokens.$label-font-weight;
+	font-size: var(--v-ap-fontSizeXs);
+	font-weight: var(--v-ap-fontWeightBold);
 }
 
 input {
@@ -198,7 +196,7 @@ input {
 
 	&:focus {
 		& + span {
-			outline: 1px dotted apTokens.$ap-grey-darken1;
+			outline: 1px dotted rgb(var(--v-theme-ap-grey-darken-1));
 		}
 	}
 
@@ -214,7 +212,7 @@ input {
 			width: 1.625rem;
 			height: 1.625rem;
 			border-radius: 50%;
-			border: 3px solid apTokens.$ap-blue-darken1;
+			border: 3px solid rgb(var(--v-theme-primary));
 			background-color: transparent;
 			content: '';
 		}
@@ -229,7 +227,7 @@ input {
 				width: 0.825rem;
 				height: 0.825rem;
 				border-radius: 50%;
-				background-color: apTokens.$ap-blue-darken1;
+				background-color: rgb(var(--v-theme-primary));
 				content: '';
 			}
 		}
@@ -247,6 +245,6 @@ input {
 }
 
 .amelipro-illustrated-radio-group__item-label-text {
-	font-weight: apTokens.$label-font-weight;
+	font-weight: var(--v-ap-fontWeightBold);
 }
 </style>