@cnamts/synapse 1.0.23 → 1.0.25

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>

package/src/components/Amelipro/AmeliproMailTile/AmeliproMailTile.vue

@@ -264,13 +264,13 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
+@use '@/assets/overrides/breakpoints' as bp;
 
 .mail-status-btn {
 	position: relative;
 	min-width: 3rem;
 	white-space: normal;
-	border: 1px solid apTokens.$ap-grey-lighten2;
+	border: 1px solid rgb(var(--v-theme-ap-grey-lighten-2));
 	border-top-left-radius: 0.5rem;
 	border-bottom-left-radius: 0.5rem;
 
@@ -281,7 +281,7 @@
 		top: calc(50% - 5px);
 		left: calc(50% - 5px);
 		border-radius: 50%;
-		border: 1px solid apTokens.$ap-grey;
+		border: 1px solid rgb(var(--v-theme-ap-grey));
 		background-color: transparent;
 		z-index: 2;
 		content: '';
@@ -290,8 +290,8 @@
 	&.mail-status-btn--not-read,
 	&:hover {
 		&::before {
-			border: 1px solid apTokens.$ap-blue-darken1;
-			background-color: apTokens.$ap-blue-darken1;
+			border: 1px solid rgb(var(--v-theme-primary));
+			background-color: rgb(var(--v-theme-primary));
 		}
 	}
 }
@@ -311,12 +311,12 @@
 	}
 
 	&:hover {
-		color: apTokens.$ap-grey-darken1;
+		color: rgb(var(--v-theme-ap-grey-darken-1));
 		text-decoration: none;
 	}
 
 	&:focus {
-		outline: 1px dotted apTokens.$ap-grey-darken1;
+		outline: 1px dotted rgb(var(--v-theme-ap-grey-darken-1));
 	}
 
 	& :deep(.v-btn__content) {
@@ -351,8 +351,8 @@
 .mail-btn__content {
 	position: relative;
 	padding: 1rem 3rem 1rem 1rem;
-	border: 1px solid apTokens.$ap-grey-lighten2;
-	border-radius: 0.5rem;
+	border: 1px solid rgb(var(--v-theme-ap-grey-lighten-2));
+	border-radius: var(--v-ap-inputRadius);
 
 	.mail-btn--editable & {
 		border-top-left-radius: 0;
@@ -376,8 +376,8 @@
 			top: calc(50% - 5px);
 			left: 1rem;
 			border-radius: 50%;
-			border: 1px solid apTokens.$ap-blue-darken1;
-			background-color: apTokens.$ap-blue-darken1;
+			border: 1px solid rgb(var(--v-theme-primary));
+			background-color: rgb(var(--v-theme-primary));
 			z-index: 2;
 			content: '';
 		}
@@ -385,17 +385,17 @@
 }
 
 .mail-info__text {
-	@media #{apTokens.$media-up-sm} {
+	@media #{bp.$up-sm} {
 		width: 100%;
 	}
 }
 
 .mail-info__date {
-	@media #{apTokens.$media-up-sm} {
+	@media #{bp.$up-sm} {
 		padding: 0 1.25rem;
 	}
 
-	@media #{apTokens.$media-up-lg} {
+	@media #{bp.$up-lg} {
 		padding: 0 3rem 0 1.25rem;
 	}
 }

package/src/components/Amelipro/AmeliproMenu/AmeliproMenu.vue

@@ -310,8 +310,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
-
 ul {
 	list-style: none;
 }
@@ -319,9 +317,9 @@ ul {
 .v-btn {
 	display: flex;
 	min-height: unset !important;
-	padding: 0.5rem 1rem !important;
+	padding: var(--v-ap-btnPaddingY) var(--v-ap-btnPaddingX) !important;
 	border-radius: 0 !important;
-	font-size: apTokens.$font-size-sm;
+	font-size: var(--v-ap-fontSizeSm);
 
 	&.amelipro-menu__btn--open {
 		padding: 0 !important;
@@ -345,41 +343,41 @@ ul {
 .menu-btn,
 .home-menu-btn {
 	&:focus {
-		color: apTokens.$ap-blue-darken2 !important;
-		background-color: apTokens.$ap-blue-lighten3 !important;
+		color: rgb(var(--v-theme-secondary)) !important;
+		background-color: rgb(var(--v-theme-ap-blue-lighten-3)) !important;
 	}
 }
 
 .menu-btn {
 	&:focus :deep(.v-icon) {
-		color: apTokens.$ap-blue-darken2 !important;
+		color: rgb(var(--v-theme-secondary)) !important;
 	}
 }
 
 .menu-btn-close {
 	&:focus {
-		outline: 1px dotted apTokens.$ap-blue-lighten3;
+		outline: 1px dotted rgb(var(--v-theme-ap-blue-lighten-3));
 	}
 }
 
 .amelipro-menu__item--level-2,
 .amelipro-menu__item--level-3 {
 	& .v-btn {
-		font-size: apTokens.$font-size-xs;
+		font-size: var(--v-ap-fontSizeXs);
 		text-transform: unset;
-		font-weight: apTokens.$ap-font-weight-regular;
+		font-weight: var(--v-ap-fontWeightRegular);
 	}
 }
 
 .amelipro-menu__item--level-2 {
 	& .v-btn {
-		padding: 0.5rem 1rem !important;
+		padding: var(--v-ap-btnPaddingY) var(--v-ap-btnPaddingX) !important;
 	}
 
 	& .amelipro-menu__item--level-3 {
 		& .v-btn {
-			padding: 0.5rem 1rem 0.5rem 2rem !important;
-			font-weight: apTokens.$ap-font-weight-regular;
+			padding: var(--v-ap-btnPaddingY) var(--v-ap-btnPaddingX) 0.5rem 2rem !important;
+			font-weight: var(--v-ap-fontWeightRegular);
 		}
 	}
 }

package/src/components/Amelipro/AmeliproMessagingLayout/AmeliproDropdownMenu/AmeliproDropdownMenu.vue

@@ -194,14 +194,12 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
-
 .dropdown-menu {
 	position: relative;
 }
 
 .dropdown-menu__open-btn {
-	border: 1px solid apTokens.$ap-grey !important;
+	border: 1px solid rgb(var(--v-theme-ap-grey)) !important;
 
 	& :deep(.v-btn__content) {
 		justify-content: space-between;
@@ -219,7 +217,7 @@
 	top: 100%;
 	left: 0;
 	width: 100%;
-	border: 1px solid apTokens.$ap-grey !important;
+	border: 1px solid rgb(var(--v-theme-ap-grey)) !important;
 	z-index: 10;
 }
 </style>

package/src/components/Amelipro/AmeliproMessagingLayout/AmeliproMessagingLayout.vue

@@ -143,38 +143,38 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
+@use '@/assets/overrides/breakpoints' as bp;
 
 .messaging-menu {
-	@media #{apTokens.$media-only-xs} {
+	@media #{bp.$down-xs} {
 		padding: 0 10px 24px;
 	}
 
-	@media #{apTokens.$media-only-sm} {
+	@media #{bp.$sm-only} {
 		padding: 10px 16px;
 	}
 }
 
 .messaging-menu__new-message {
-	@media #{apTokens.$media-up-md} {
+	@media #{bp.$up-md} {
 		display: flex;
 		justify-content: center;
 		width: 100%;
 		margin: 38px auto;
 	}
 
-	@media #{apTokens.$media-only-xs} {
+	@media #{bp.$down-xs} {
 		width: 100%;
 		margin: 24px 0 16px;
 	}
 
-	@media #{apTokens.$media-only-sm} {
+	@media #{bp.$sm-only} {
 		margin-right: 20px;
 	}
 }
 
 .messaging-menu__new-message-btn {
-	@media #{apTokens.$media-only-xs} {
+	@media #{bp.$down-xs} {
 		width: 100%;
 	}
 
@@ -184,7 +184,7 @@
 }
 
 .messaging-menu--desktop {
-	@media #{apTokens.$media-up-md} {
+	@media #{bp.$up-md} {
 		margin-bottom: 30px;
 	}
 }

package/src/components/Amelipro/AmeliproMultipleFoldingCard/AmeliproMultipleFoldingCard.vue

@@ -283,86 +283,86 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
+@use '@/assets/overrides/breakpoints' as bp;
 
 .amelipro-card--multi-folding {
 	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-card--multi-folding-header {
-	padding-top: apTokens.$card-padding-desktop;
-	padding-left: apTokens.$card-padding-desktop;
-	padding-right: apTokens.$card-padding-desktop;
+	padding-top: var(--v-ap-cardPaddingDesktop);
+	padding-left: var(--v-ap-cardPaddingDesktop);
+	padding-right: var(--v-ap-cardPaddingDesktop);
 	padding-bottom: 0 !important;
 	word-break: break-all;
 
-	@media #{apTokens.$media-down-md} {
-		padding-top: apTokens.$card-padding-tablet;
-		padding-left: apTokens.$card-padding-tablet;
-		padding-right: apTokens.$card-padding-tablet;
+	@media #{bp.$down-sm} {
+		padding-top: var(--v-ap-cardPaddingDesktop);
+		padding-left: var(--v-ap-cardPaddingDesktop);
+		padding-right: var(--v-ap-cardPaddingDesktop);
 	}
 
-	@media #{apTokens.$media-down-sm} {
-		padding-top: apTokens.$card-padding-mobile;
-		padding-left: apTokens.$card-padding-mobile;
-		padding-right: apTokens.$card-padding-mobile;
+	@media #{bp.$down-xs} {
+		padding-top: var(--v-ap-cardPaddingMobile);
+		padding-left: var(--v-ap-cardPaddingMobile);
+		padding-right: var(--v-ap-cardPaddingMobile);
 	}
 }
 
 .amelipro-card--multi-folding-content {
 	width: 100%;
-	padding: apTokens.$card-padding-desktop;
-	font-size: apTokens.$font-size-xs;
-	font-weight: apTokens.$ap-font-weight-regular;
-
-	@media #{apTokens.$media-down-md} {
-		padding-left: apTokens.$card-padding-tablet;
-		padding-right: apTokens.$card-padding-tablet;
-		padding-bottom: apTokens.$card-padding-tablet;
+	padding: var(--v-ap-cardPaddingDesktop);
+	font-size: var(--v-ap-fontSizeXs);
+	font-weight: var(--v-ap-fontWeightRegular);
+
+	@media #{bp.$down-sm} {
+		padding-left: var(--v-ap-cardPaddingDesktop);
+		padding-right: var(--v-ap-cardPaddingDesktop);
+		padding-bottom: var(--v-ap-cardPaddingDesktop);
 	}
 
-	@media #{apTokens.$media-down-sm} {
-		padding-left: apTokens.$card-padding-mobile;
-		padding-right: apTokens.$card-padding-mobile;
-		padding-bottom: apTokens.$card-padding-mobile;
+	@media #{bp.$down-xs} {
+		padding-left: var(--v-ap-cardPaddingMobile);
+		padding-right: var(--v-ap-cardPaddingMobile);
+		padding-bottom: var(--v-ap-cardPaddingMobile);
 	}
 }
 
 .classic-btn {
 	position: relative;
-	padding: apTokens.$multi-folding-btn-padding-y apTokens.$multi-folding-btn-padding-x;
-	border: 1px solid apTokens.$ap-blue-darken1;
-	border-radius: apTokens.$multi-folding-btn-radius;
-	background-color: apTokens.$ap-white;
-	color: apTokens.$ap-blue-darken1;
-	font-size: apTokens.$font-size-sm;
-	font-weight: apTokens.$multi-folding-btn-font-weight;
+	padding: var(--v-ap-multiFoldingBtnPaddingY) var(--v-ap-multiFoldingBtnPaddingX);
+	border: 1px solid rgb(var(--v-theme-primary));
+	border-radius: var(--v-ap-btnRadius);
+	background-color: rgb(var(--v-theme-surface));
+	color: rgb(var(--v-theme-primary));
+	font-size: var(--v-ap-fontSizeSm);
+	font-weight: var(--v-ap-fontWeightBold);
 	cursor: pointer;
 
 	&.active-btn {
-		background-color: apTokens.$ap-blue-lighten3;
+		background-color: rgb(var(--v-theme-ap-blue-lighten-3));
 	}
 
 	&.checked-btn {
-		border: 1px solid apTokens.$ap-turquoise-darken1;
-		background-color: apTokens.$ap-turquoise-lighten1;
-		color: apTokens.$ap-turquoise-darken1;
+		border: 1px solid rgb(var(--v-theme-success));
+		background-color: rgb(var(--v-theme-ap-turquoise-lighten-1));
+		color: rgb(var(--v-theme-success));
 	}
 
 	&.error-btn {
-		border: 1px solid apTokens.$ap-red-darken1;
-		background-color: apTokens.$ap-red-lighten3;
-		color: apTokens.$ap-red-darken1;
+		border: 1px solid rgb(var(--v-theme-ap-red-darken-1));
+		background-color: rgb(var(--v-theme-ap-red-lighten-3));
+		color: rgb(var(--v-theme-ap-red-darken-1));
 	}
 
 	&:focus {
-		outline: 1px dotted apTokens.$ap-grey-darken1;
+		outline: 1px dotted rgb(var(--v-theme-ap-grey-darken-1));
 	}
 
 	&:disabled {

package/src/components/Amelipro/AmeliproNumberedCard/AmeliproNumberedCard.vue

@@ -101,7 +101,7 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
+@use '@/assets/overrides/breakpoints' as bp;
 
 .amelipro-card--numbered-wrapper {
 	padding-top: 1rem;
@@ -110,26 +110,26 @@
 .amelipro-card--numbered {
 	display: block;
 	position: relative;
-	padding: apTokens.$card-padding-desktop;
+	padding: 1rem;
 	max-width: 100%;
-	border-radius: apTokens.$card-radius;
+	border-radius: var(--v-ap-btnRadius);
 	text-decoration: none;
 	overflow-wrap: break-word;
 	white-space: normal;
 
-	@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;
 	}
 }
 
 .amelipro-card--numbered-content {
 	width: 100%;
-	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);
 }
 
 .numbered-card-item__wrapper {
@@ -143,10 +143,10 @@
 .number {
 	display: block;
 	width: 100%;
-	font-size: apTokens.$font-size-sm;
+	font-size: var(--v-ap-fontSizeSm);
 
-	@media #{apTokens.$media-down-sm} {
-		font-size: apTokens.$font-size-xs;
+	@media #{bp.$down-xs} {
+		font-size: var(--v-ap-fontSizeXs);
 	}
 
 	&::before {
@@ -156,12 +156,12 @@
 		width: 2rem;
 		height: 2rem;
 		border-radius: 50%;
-		border: 1px solid apTokens.$ap-blue-darken1;
-		background-color: apTokens.$ap-white;
+		border: 1px solid rgb(var(--v-theme-primary));
+		background-color: rgb(var(--v-theme-surface));
 		content: '';
 		z-index: 1;
 
-		@media #{apTokens.$media-down-sm} {
+		@media #{bp.$down-xs} {
 			left: calc(50% - 0.75rem);
 			width: 1.5rem;
 			height: 1.5rem;
@@ -173,11 +173,11 @@
 		position: absolute;
 		top: 0.25rem;
 		width: 100%;
-		font-weight: apTokens.$ap-font-weight-bold;
+		font-weight: var(--v-ap-fontWeightBold);
 		text-align: center;
 		z-index: 2;
 
-		@media #{apTokens.$media-down-sm} {
+		@media #{bp.$down-xs} {
 			top: 0.375rem;
 		}
 	}
@@ -190,7 +190,7 @@
 		max-width: calc(50% - 5px);
 
 		&:nth-child(2n+2) {
-			@media #{apTokens.$media-up-md} {
+			@media #{bp.$up-md} {
 				margin-left: 10px;
 			}
 		}
@@ -199,27 +199,27 @@
 
 .items-per-line-3 {
 	& > li {
-		@media #{apTokens.$media-up-lg} {
+		@media #{bp.$up-lg} {
 			width: calc((100% - 20px) / 3);
 			min-width: calc((100% - 20px) / 3);
 			max-width: calc((100% - 20px) / 3);
 		}
 
-		@media #{apTokens.$media-only-md} {
+		@media #{bp.$md-only} {
 			width: calc(50% - 5px);
 			min-width: calc(50% - 5px);
 			max-width: calc(50% - 5px);
 		}
 
 		&:nth-child(2n+2) {
-			@media #{apTokens.$media-only-md} {
+			@media #{bp.$md-only} {
 				margin-left: 10px;
 			}
 		}
 
 		&:nth-child(3n+2),
 		&:nth-child(3n+3) {
-			@media #{apTokens.$media-up-lg} {
+			@media #{bp.$up-lg} {
 				margin-left: 10px;
 			}
 		}
@@ -228,20 +228,20 @@
 
 .items-per-line-4 {
 	& > li {
-		@media #{apTokens.$media-up-lg} {
+		@media #{bp.$up-lg} {
 			width: calc(25% - 9px);
 			min-width: calc(25% - 9px);
 			max-width: calc(25% - 9px);
 		}
 
-		@media #{apTokens.$media-only-md} {
+		@media #{bp.$md-only} {
 			width: calc(50% - 5px);
 			min-width: calc(50% - 5px);
 			max-width: calc(50% - 5px);
 		}
 
 		&:nth-child(2n+2) {
-			@media #{apTokens.$media-only-md} {
+			@media #{bp.$md-only} {
 				margin-left: 10px;
 			}
 		}
@@ -249,7 +249,7 @@
 		&:nth-child(4n+2),
 		&:nth-child(4n+3),
 		&:nth-child(4n+4) {
-			@media #{apTokens.$media-up-lg} {
+			@media #{bp.$up-lg} {
 				margin-left: 12px;
 			}
 		}
@@ -260,7 +260,7 @@
 .items-per-line-3,
 .items-per-line-4 {
 	& > li {
-		@media #{apTokens.$media-down-md} {
+		@media #{bp.$down-sm} {
 			width: 100%;
 			min-width: 100%;
 			max-width: 100%;

package/src/components/Amelipro/AmeliproOnboarding/AmeliproOnboarding.vue

@@ -214,8 +214,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
-
 .amelipro-ondoarding-content {
 	min-height: 350px;
 }
@@ -228,11 +226,11 @@
 	width: 14px;
 	height: 14px;
 	border-radius: 50%;
-	border: 2px solid apTokens.$ap-blue-darken1;
-	background-color: apTokens.$ap-white;
+	border: 2px solid rgb(var(--v-theme-primary));
+	background-color: rgb(var(--v-theme-surface));
 
 	&.amelipro-onboarding__active-dot {
-		background-color: apTokens.$ap-blue-darken1;
+		background-color: rgb(var(--v-theme-primary));
 	}
 }
 

package/src/components/Amelipro/AmeliproPageLayout/AmeliproPageLayout.vue

@@ -235,8 +235,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
-
 .body-content {
 	position: relative;
 	height: auto;
@@ -247,8 +245,8 @@
 	position: absolute;
 	top: 0;
 	left: 0;
-	color: apTokens.$ap-blue-darken1;
-	background-color: apTokens.$ap-white;
+	color: rgb(var(--v-theme-primary));
+	background-color: rgb(var(--v-theme-surface));
 	text-decoration: underline;
 	z-index: 10;
 }

package/src/components/Amelipro/AmeliproPagination/AmeliproPagination.vue

@@ -145,14 +145,12 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
-
 ol {
-	border: 1px solid apTokens.$ap-grey-lighten3;
+	border: 1px solid rgb(var(--v-theme-ap-grey-lighten-3));
 }
 
 li:not(:last-child) {
-	border-right: 1px solid apTokens.$ap-grey-lighten3;
+	border-right: 1px solid rgb(var(--v-theme-ap-grey-lighten-3));
 }
 
 :deep(.amelipro-icon) {

package/src/components/Amelipro/AmeliproPagination/AmeliproPaginationBtn/AmeliproPaginationBtn.vue

@@ -61,15 +61,13 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
-
 .v-btn {
 	padding: 0 !important;
 	border-radius: 0 !important;
-	min-height: 2.5rem !important;
+	min-height: var(--v-ap-btnMinHeight) !important;
 	min-width: 2.5rem !important;
-	font-size: apTokens.$font-size-md !important;
-	font-weight: apTokens.$ap-font-weight-bold !important;
+	font-size: var(--v-ap-fontSizeMd) !important;
+	font-weight: var(--v-ap-fontWeightBold) !important;
 	text-align: center !important;
 
 	& :deep(.v-btn__content) {