@cnamts/synapse 1.0.24 → 1.0.25

package/src/components/Amelipro/AmeliproAccordionResult/AmeliproAccordionResultTemplate/AmeliproAccordionResultTemplate.vue

@@ -104,7 +104,7 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
+@use '@/assets/overrides/breakpoints' as bp;
 
 .amelipro-accordion-result {
 	display: block;
@@ -119,15 +119,15 @@
 .amelipro-accordion-result__content {
 	width: 100%;
 	padding: 1rem;
-	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);
 }
 
 .heading-content {
 	width: 100%;
 	padding: 1rem 0 0 1rem;
 
-	@media #{apTokens.$media-up-md} {
+	@media #{bp.$up-md} {
 		width: calc(100% - 30px);
 		padding: 1rem 0 1rem 1rem;
 	}
@@ -136,7 +136,7 @@
 .heading-content-btn {
 	padding: 1rem;
 
-	@media #{apTokens.$media-down-md} {
+	@media #{bp.$down-sm} {
 		width: 100% !important;
 		margin-top: 0.5rem;
 		padding: 0.5rem 1rem 1rem;

package/src/components/Amelipro/AmeliproAccordionResultList/AmeliproAccordionResultList.vue

@@ -275,12 +275,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>

package/src/components/Amelipro/AmeliproAutoCompleteField/AmeliproAutoCompleteField.vue

@@ -364,8 +364,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
-
 .amelipro-text-field {
 	& :deep(.v-field__outline) {
 		border-color: v-bind(inputBorderStyle);
@@ -379,14 +377,14 @@
 }
 
 .amelipro-autocomplete__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);
 }
 
 .v-input {
 	& :deep(.v-field__input) {
-		padding-left: 12px;
-		padding-right: 12px;
+		padding-left: var(--v-padding-3);
+		padding-right: var(--v-padding-3);
 	}
 
 	& :deep(.v-field--disabled) {

package/src/components/Amelipro/AmeliproBadge/AmeliproBadge.vue

@@ -52,15 +52,13 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
-
 .amelipro-badge {
 	display: inline-block;
 	margin-left: 0.5rem;
-	padding: 0.5rem 1rem !important;
+	padding: var(--v-ap-btnPaddingY) var(--v-ap-btnPaddingX) !important;
 
 	&.round-custom {
-		border-radius: 0.5rem 1rem 1rem 0.5rem;
+		border-radius: var(--v-ap-inputRadius) 1rem 1rem 0.5rem;
 	}
 
 	&.round-classic {
@@ -70,7 +68,7 @@
 
 .amelipro-badge__content {
 	display: inline-block;
-	font-size: apTokens.$font-size-sm !important;
-	font-weight: apTokens.$ap-font-weight-bold !important;
+	font-size: var(--v-ap-fontSizeSm) !important;
+	font-weight: var(--v-ap-fontWeightBold) !important;
 }
 </style>

package/src/components/Amelipro/AmeliproBreadcrumb/AmeliproBreadcrumb.vue

@@ -80,13 +80,11 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
-
 .breadcrumb__separator {
 	display: block;
 	width: 0;
 	height: 1.25rem;
 	margin: 0 0.5rem;
-	border-left: 1px solid apTokens.$ap-grey-darken1;
+	border-left: 1px solid rgb(var(--v-theme-ap-grey-darken-1));
 }
 </style>

package/src/components/Amelipro/AmeliproBtn/AmeliproBtn.vue

@@ -306,11 +306,9 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
-
 .v-btn {
 	letter-spacing: 0.64px;
-	font-weight: apTokens.$ap-font-weight-bold;
+	font-weight: var(--v-ap-fontWeightBold);
 	text-indent: unset;
 
 	& :deep(.v-btn__overlay),
@@ -335,7 +333,7 @@
 	}
 
 	&.amelipro-btn--style {
-		padding: apTokens.$btn-padding-y apTokens.$btn-padding-x;
+		padding: var(--v-ap-btnPaddingY) var(--v-ap-btnPaddingX);
 	}
 
 	&.v-btn--active::before,
@@ -346,7 +344,7 @@
 	}
 
 	&:focus {
-		outline: 1px dotted apTokens.$ap-grey-darken1;
+		outline: 1px dotted rgb(var(--v-theme-ap-grey-darken-1));
 	}
 
 	&.v-btn--text {
@@ -370,7 +368,7 @@
 		min-height: 1.25rem;
 		padding: 0 0.125rem;
 		border-radius: 50%;
-		font-size: apTokens.$font-size-xxs;
+		font-size: var(--v-ap-fontSizeXxs);
 		z-index: 1;
 
 		& span {

package/src/components/Amelipro/AmeliproCallback/AmeliproCallback.vue

@@ -158,12 +158,12 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
+@use '@/assets/overrides/breakpoints' as bp;
 
 .amelipro-callback__retry-btn {
 	margin-left: 0;
 
-	@media #{apTokens.$media-up-sm} {
+	@media #{bp.$up-sm} {
 		margin-left: 1rem;
 	}
 }

package/src/components/Amelipro/AmeliproCard/AmeliproCard.vue

@@ -227,53 +227,53 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
+@use '@/assets/overrides/breakpoints' as bp;
 
 .amelipro-card {
 	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__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;
 }
 
 .amelipro-card__header-content {
-	padding-bottom: 1rem;
+	padding-bottom: var(--v-ap-cardPaddingDesktop);
 }
 
 .amelipro-card__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-tablet;
+	@media #{bp.$down-xs} {
+		padding-left: var(--v-ap-cardPaddingMobile);
+		padding-right: var(--v-ap-cardPaddingMobile);
+		padding-bottom: var(--v-ap-cardPaddingDesktop);
 	}
 }
 
 .amelipro-card__header--left,
 .amelipro-card__content--left {
-	@media #{apTokens.$media-up-md} {
-		padding-right: 1rem;
+	@media #{bp.$up-md} {
+		padding-right: var(--v-ap-cardPaddingDesktop);
 	}
 }
 
@@ -282,31 +282,31 @@
 }
 
 .amelipro-card__right-part {
-	padding: apTokens.$card-padding-desktop apTokens.$card-padding-desktop apTokens.$card-padding-desktop 0;
+	padding: var(--v-ap-cardPaddingDesktop) 1rem 1rem 0;
 
-	@media #{apTokens.$media-down-md} {
-		padding: 0 apTokens.$card-padding-tablet apTokens.$card-padding-tablet apTokens.$card-padding-tablet;
+	@media #{bp.$down-sm} {
+		padding: 0 1rem 1rem;
 	}
 
-	@media #{apTokens.$media-down-sm} {
-		padding: 0 apTokens.$card-padding-mobile apTokens.$card-padding-mobile apTokens.$card-padding-mobile;
+	@media #{bp.$down-xs} {
+		padding: 0 0.75rem 0.75rem;
 	}
 }
 
 .amelipro-card__right-part-content {
-	@media #{apTokens.$media-up-md} {
-		padding-left: 1rem;
+	@media #{bp.$up-md} {
+		padding-left: var(--v-ap-cardPaddingDesktop);
 		min-height: 100%;
 		border-left: 1px solid v-bind(borderColorValue);
 	}
 
-	@media #{apTokens.$media-down-md} {
-		padding-top: apTokens.$card-padding-tablet;
+	@media #{bp.$down-sm} {
+		padding-top: var(--v-ap-cardPaddingDesktop);
 		border-top: 1px solid v-bind(borderColorValue);
 	}
 
-	@media #{apTokens.$media-down-sm} {
-		padding-top: apTokens.$card-padding-mobile;
+	@media #{bp.$down-xs} {
+		padding-top: var(--v-ap-cardPaddingMobile);
 	}
 }
 </style>

package/src/components/Amelipro/AmeliproCarousel/AmeliproCarousel.vue

@@ -211,19 +211,17 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
-
 .v-btn {
 	&.btn-previous,
 	&.btn-next {
 		&:disabled {
-			color: apTokens.$ap-blue-darken1 !important;
+			color: rgb(var(--v-theme-primary)) !important;
 			background-color: transparent !important;
 			opacity: 0.7;
 			cursor: default;
 
 			& .v-icon {
-				color: apTokens.$ap-blue-darken1 !important;
+				color: rgb(var(--v-theme-primary)) !important;
 			}
 		}
 	}
@@ -263,11 +261,11 @@
 	width: 1rem;
 	height: 1rem;
 	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));
 
 	&.active-dot {
-		background-color: apTokens.$ap-blue-darken1;
+		background-color: rgb(var(--v-theme-primary));
 	}
 }
 </style>

package/src/components/Amelipro/AmeliproCheckbox/AmeliproCheckbox.vue

@@ -143,8 +143,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
-
 .amelipro-checkbox-input {
 	& .checkbox-label {
 		position: relative;
@@ -160,7 +158,7 @@
 			width: 1.5rem;
 			height: 1.5rem;
 			border-radius: 0.4rem;
-			border: 3px solid apTokens.$ap-blue-darken1;
+			border: 3px solid rgb(var(--v-theme-primary));
 			background-color: transparent;
 			content: '';
 		}
@@ -169,7 +167,7 @@
 	&[aria-checked='true'] {
 		& .checkbox-label {
 			&::before {
-				background-color: apTokens.$ap-blue-darken1;
+				background-color: rgb(var(--v-theme-primary));
 			}
 
 			&::after {
@@ -179,8 +177,8 @@
 				width: 0.9rem;
 				height: 0.5rem;
 				border-radius: 2px;
-				border-bottom: 3px solid apTokens.$ap-white;
-				border-left: 3px solid apTokens.$ap-white;
+				border-bottom: 3px solid #fff;
+				border-left: 3px solid #fff;
 				transform: rotate(-50deg);
 				content: '';
 			}
@@ -211,22 +209,22 @@
 			padding-left: 4rem;
 
 			&::before {
-				height: apTokens.$switch-track-height;
-				width: apTokens.$switch-track-width;
-				top: apTokens.$switch-track-top;
+				height: 2rem;
+				width: 3.5rem;
+				top: 0;
 				border-radius: 24px;
-				background-color: apTokens.$ap-grey;
+				background-color: rgb(var(--v-theme-ap-grey));
 				border: 0;
 			}
 
 			&::after {
 				position: absolute;
-				height: apTokens.$switch-thumb-height;
-				width: apTokens.$switch-thumb-width;
-				top: apTokens.$switch-thumb-top;
+				height: 1.5rem;
+				width: 1.5rem;
+				top: 0.25rem;
 				left: 4px;
 				border-radius: 24px;
-				background-color: apTokens.$ap-white;
+				background-color: rgb(var(--v-theme-surface));
 				border: 0;
 				transition: transform 0.3s ease-in-out;
 				content: '';
@@ -236,7 +234,7 @@
 		&[aria-checked='true'] {
 			& .checkbox-label {
 				&::before {
-					background-color: apTokens.$ap-blue-darken1;
+					background-color: rgb(var(--v-theme-primary));
 				}
 
 				&::after {

package/src/components/Amelipro/AmeliproCheckboxGroup/AmeliproCheckboxGroup.vue

@@ -267,7 +267,7 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
+@use '@/assets/overrides/breakpoints' as bp;
 
 .amelipro-checkbox-group__item-input {
 	& .checkbox-label {
@@ -297,7 +297,7 @@
 			width: 1.5rem;
 			height: 1.5rem;
 			border-radius: 0.4rem;
-			border: 3px solid apTokens.$ap-blue-darken1;
+			border: 3px solid rgb(var(--v-theme-primary));
 			background-color: transparent;
 			content: '';
 		}
@@ -306,7 +306,7 @@
 	&[aria-checked='true'] {
 		& .checkbox-label {
 			&::before {
-				background-color: apTokens.$ap-blue-darken1;
+				background-color: rgb(var(--v-theme-primary));
 			}
 
 			&::after {
@@ -316,8 +316,8 @@
 				width: 0.9rem;
 				height: 0.5rem;
 				border-radius: 2px;
-				border-bottom: 3px solid apTokens.$ap-white;
-				border-left: 3px solid apTokens.$ap-white;
+				border-bottom: 3px solid #fff;
+				border-left: 3px solid #fff;
 				transform: rotate(-50deg);
 				content: '';
 			}
@@ -338,23 +338,23 @@
 .amelipro-checkbox-group.pills {
 	& .amelipro-checkbox-group__item-input {
 		& .checkbox-label {
-			font-size: apTokens.$font-size-sm;
-			font-weight: apTokens.$filter-font-weight;
-			padding: apTokens.$filter-padding-y apTokens.$filter-padding-x;
-			border-radius: apTokens.$filter-radius;
-			border: 1px solid apTokens.$ap-blue-darken1;
-			background-color: apTokens.$ap-white;
-			color: apTokens.$ap-blue-darken1;
+			font-size: var(--v-ap-fontSizeSm);
+			font-weight: var(--v-ap-fontWeightBold);
+			padding: 0.75rem 2rem;
+			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));
 
 			&.amelipro-checkbox-group__item-label-span-error {
-				background-color: apTokens.$ap-red-lighten4;
-				border-color: apTokens.$ap-red;
+				background-color: rgb(var(--v-theme-ap-red-lighten-4));
+				border-color: rgb(var(--v-theme-error));
 			}
 		}
 
 		&[aria-checked='true'] {
 			& .checkbox-label {
-				background-color: apTokens.$ap-blue-lighten3;
+				background-color: rgb(var(--v-theme-ap-blue-lighten-3));
 
 				&::after {
 					position: absolute;
@@ -362,8 +362,8 @@
 					left: 0.75rem;
 					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: '';
 				}
@@ -372,12 +372,12 @@
 
 		&[aria-disabled='true'] {
 			& .checkbox-label {
-				background-color: apTokens.$ap-grey-lighten2;
-				border-color: apTokens.$ap-grey;
+				background-color: rgb(var(--v-theme-ap-grey-lighten-2));
+				border-color: rgb(var(--v-theme-ap-grey));
 
 				&::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));
 				}
 			}
 		}
@@ -385,11 +385,11 @@
 }
 
 .amelipro-checkbox-group__label {
-	font-weight: apTokens.$label-font-weight;
+	font-weight: var(--v-ap-fontWeightBold);
 }
 
 .margin-label {
-	@media #{apTokens.$media-up-md} {
+	@media #{bp.$up-md} {
 		margin-top: 3px;
 	}
 }

package/src/components/Amelipro/AmeliproChips/AmeliproChips.vue

@@ -41,11 +41,9 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
-
 .amelipro-chips {
 	padding: 0.75rem;
 	border-radius: 8px;
-	background-color: apTokens.$ap-blue-lighten3;
+	background-color: rgb(var(--v-theme-ap-blue-lighten-3));
 }
 </style>

package/src/components/Amelipro/AmeliproClickableTile/AmeliproClickableTile.vue

@@ -62,6 +62,13 @@
 	const hover = ref(false)
 	const focus = ref(false)
 
+	const elevationValue = computed<number>(() => {
+		if (hover.value || focus.value || props.disabled) {
+			return 0
+		}
+		return 2
+	})
+
 	const tileClasses = computed(() => ({
 		'amelipro-clickable-tile--hover': (hover.value || focus.value) && !props.disabled && !props.onlyIconIsClickable,
 		'amelipro-clickable-tile--disabled': props.disabled,
@@ -131,7 +138,7 @@
 		:id="uniqueId"
 		:class="containerClasses"
 		:disabled="disabled"
-		:elevation="0"
+		:elevation="elevationValue"
 		height="auto"
 		:href="href"
 		:ripple="false"
@@ -242,31 +249,29 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
-
 .amelipro-clickable-tile {
 	position: relative;
 	display: flex;
-	background-color: apTokens.$ap-white;
-	border: 1px solid apTokens.$ap-blue-darken1 !important;
+	background-color: rgb(var(--v-theme-surface));
+	border: 1px solid rgb(var(--v-theme-primary)) !important;
 	border-radius: var(--radius-md) !important;
 	white-space: normal;
-	font-size: 1rem;
+	font-size: var(--v-ap-fontSizeSm);
 	font-weight: 600;
 	text-align: left;
 	align-items: center;
 	justify-content: space-between;
-	color: apTokens.$ap-grey-darken1;
+	color: rgb(var(--v-theme-ap-grey-darken-1));
 	padding: 1rem;
 
 	&--hover {
-		border-color: apTokens.$ap-blue-darken2 !important;
+		border-color: rgb(var(--v-theme-secondary)) !important;
 	}
 
 	&--disabled {
-		color: apTokens.$ap-grey-darken1 !important;
-		background-color: apTokens.$ap-grey-lighten2 !important;
-		border-color: apTokens.$ap-grey-lighten2 !important;
+		color: rgb(var(--v-theme-ap-grey-darken-1)) !important;
+		background-color: rgb(var(--v-theme-ap-grey-lighten-2)) !important;
+		border-color: rgb(var(--v-theme-ap-grey-lighten-2)) !important;
 	}
 
 	&__icon-button {
@@ -307,7 +312,7 @@
 	}
 
 	&:focus {
-		outline: 1px dotted apTokens.$ap-grey-darken1;
+		outline: 1px dotted rgb(var(--v-theme-ap-grey-darken-1));
 	}
 
 	& :deep(.v-btn__content) {

package/src/components/Amelipro/AmeliproClickableTile/tests/__snapshots__/AmeliproClickableTile.spec.ts.snap

@@ -10,7 +10,7 @@ exports[`AmeliproClickableTile > Snapshots > renders the component with all prop
   "
   density="default"
   disabled="false"
-  elevation="0"
+  elevation="2"
   exact="false"
   flat="false"
   height="auto"
@@ -40,7 +40,7 @@ exports[`AmeliproClickableTile > Snapshots > renders the component with only req
   "
   density="default"
   disabled="false"
-  elevation="0"
+  elevation="2"
   exact="false"
   flat="false"
   height="auto"

package/src/components/Amelipro/AmeliproCopyBtn/AmeliproCopyBtn.vue

@@ -52,8 +52,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
-
 .amelipro-copy-btn-wrapper {
 	position: relative;
 	display: inline-block;
@@ -63,11 +61,11 @@
 	position: absolute;
 	top: -10px;
 	right: 30px;
-	padding: 8px 16px;
+	padding: var(--v-padding-2) var(--v-padding-4);
 	max-width: 200px;
-	background: apTokens.$ap-white;
-	border: 1px solid apTokens.$ap-grey-lighten3;
-	border-radius: apTokens.$card-radius;
+	background: rgb(var(--v-theme-surface));
+	border: 1px solid rgb(var(--v-theme-ap-grey-lighten-3));
+	border-radius: var(--v-ap-btnRadius);
 	z-index: 10;
 }
 </style>