@cnamts/synapse 1.0.24 → 1.0.25

package/src/components/Amelipro/AmeliproPatientLogin/AmeliproPatientLogin.vue

@@ -216,15 +216,15 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
+@use '@/assets/overrides/breakpoints' as bp;
 
 .ident-title {
-	font-size: apTokens.$font-size-xs !important;
+	font-size: var(--v-ap-fontSizeXs) !important;
 	text-align: center;
-	font-weight: apTokens.$ap-font-weight-bold;
+	font-weight: var(--v-ap-fontWeightBold);
 	text-transform: uppercase;
 
-	@media #{apTokens.$media-up-md} {
+	@media #{bp.$up-md} {
 		text-align: left;
 	}
 }

package/src/components/Amelipro/AmeliproPatientLogin/AmeliproPatientLoginForm/AmeliproPatientLoginForm.vue

@@ -235,12 +235,10 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
-
 .loader {
 	width: 30px;
 	height: 30px;
-	border: 4px solid apTokens.$ap-blue-darken1;
+	border: 4px solid rgb(var(--v-theme-primary));
 	border-bottom-color: transparent;
 	border-radius: 50%;
 	display: inline-block;

package/src/components/Amelipro/AmeliproPostalAddressField/AmeliproPostalAddressCityRow/AmeliproPostalAddressCityRow.vue

@@ -499,8 +499,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
-
 .postal-code-field {
 	min-width: 140px;
 	width: 140px;
@@ -531,14 +529,14 @@
 
 	label {
 		margin-bottom: 4px;
-		font-weight: apTokens.$label-font-weight;
+		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/AmeliproPostalAddressField/AmeliproPostalAddressField.vue

@@ -312,15 +312,13 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
-
 .address-field {
 	min-width: 200px;
 	width: 100%;
 
 	label {
 		margin-bottom: 4px;
-		font-weight: apTokens.$label-font-weight;
+		font-weight: var(--v-ap-fontWeightBold);
 	}
 }
 
@@ -349,8 +347,8 @@
 
 .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/AmeliproRadioGroup/AmeliproRadioGroup.vue

@@ -254,10 +254,10 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
+@use '@/assets/overrides/breakpoints' as bp;
 
 .margin-label {
-	@media #{apTokens.$media-up-md} {
+	@media #{bp.$up-md} {
 		margin-top: 3px;
 	}
 }
@@ -275,7 +275,7 @@ input {
 
 	&:focus {
 		& + span {
-			outline: 1px dotted apTokens.$ap-grey-darken1;
+			outline: 1px dotted rgb(var(--v-theme-ap-grey-darken-1));
 		}
 	}
 
@@ -299,7 +299,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: '';
 		}
@@ -314,7 +314,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: '';
 			}
 		}
@@ -332,7 +332,7 @@ input {
 .amelipro-radio-group.pills {
 	& label {
 		&:not(:last-child) {
-			@media #{apTokens.$media-up-sm} {
+			@media #{bp.$up-sm} {
 				margin-right: 16px;
 			}
 		}
@@ -340,23 +340,23 @@ input {
 
 	& input {
 		& + span {
-			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));
 
 			&.radio-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));
 			}
 		}
 
 		&:checked {
 			& + span {
-				background-color: apTokens.$ap-blue-lighten3;
+				background-color: rgb(var(--v-theme-ap-blue-lighten-3));
 
 				&::after {
 					position: absolute;
@@ -364,8 +364,8 @@ input {
 					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: '';
 				}
@@ -374,12 +374,12 @@ input {
 
 		&:disabled {
 			& + span {
-				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));
 				}
 			}
 		}
@@ -387,6 +387,6 @@ input {
 }
 
 .radio-group__label {
-	font-weight: apTokens.$label-font-weight;
+	font-weight: var(--v-ap-fontWeightBold);
 }
 </style>

package/src/components/Amelipro/AmeliproResultList/AmeliproResultList.vue

@@ -226,12 +226,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/AmeliproSelect/AmeliproSelect.vue

@@ -5,7 +5,7 @@
 	import { computed, onMounted, onUnmounted, type PropType, ref } from 'vue'
 	import AmeliproMessage from '../AmeliproMessage/AmeliproMessage.vue'
 	import type { ValidationRule } from '@/utils/rules/types'
-	import { convertToHex } from '@/utils/functions/convertToHex'
+	import { apColorsTokens2026 } from '@/designTokens/tokens/amelipro/apColors2026'
 	import { isRequired } from '@/utils/rules/isRequired'
 
 	const props = defineProps({
@@ -185,17 +185,11 @@
 	})
 
 	const inputBorderStyle = computed<string>(() => {
-		let borderColor = convertToHex('ap-grey-darken-1')
-		if (focused.value) {
-			borderColor = convertToHex('ap-blue-darken-1')
-		}
-		if (displayError.value) {
-			borderColor = convertToHex('ap-red')
-		}
-		if (props.disabled) {
-			borderColor = convertToHex('ap-grey-lighten-2')
-		}
-		return borderColor
+		const { apBlue, apGrey, apRed } = apColorsTokens2026
+		if (props.disabled) return apGrey.lighten2
+		if (displayError.value) return apRed.base
+		if (focused.value) return apBlue.darken1
+		return apGrey.darken1
 	})
 
 	const fixAccessibility = () => {
@@ -335,8 +329,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
-
 .v-select {
 	& :deep(.v-select__selection--comma) {
 		line-height: 1.5rem;
@@ -358,8 +350,8 @@
 }
 
 :deep(.v-input__slot) {
-	min-height: apTokens.$input-min-height !important;
-	border-radius: apTokens.$input-radius;
+	min-height: var(--v-ap-inputMinHeight) !important;
+	border-radius: var(--v-ap-inputRadius);
 
 	fieldset {
 		border: 0;
@@ -367,8 +359,8 @@
 }
 
 .amelipro-select__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-list {
@@ -379,13 +371,11 @@
 </style>
 
 <style lang="scss">
-@use '@/assets/amelipro/apTokens2026' as apTokens;
-
 .amelipro-select-menu {
 	.v-list-item--active .v-list-item__overlay,
 	.v-list-item--selected .v-list-item__overlay,
 	.v-list-item[aria-selected='true'] .v-list-item__overlay {
-		background-color: apTokens.$ap-blue-lighten3 !important;
+		background-color: rgb(var(--v-theme-ap-blue-lighten-3)) !important;
 		opacity: 1;
 	}
 
@@ -407,7 +397,7 @@
 	.v-list-item[aria-selected='true'] .v-list-item-subtitle,
 	.v-list-item[aria-selected='true'] .v-list-item__title,
 	.v-list-item[aria-selected='true'] .v-list-item__subtitle {
-		color: apTokens.$ap-blue-darken1 !important;
+		color: rgb(var(--v-theme-primary)) !important;
 		position: relative;
 		z-index: 1;
 	}

package/src/components/Amelipro/AmeliproStateTile/AmeliproStateTile.vue

@@ -290,21 +290,19 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
-
 .amelipro-state-tile__pdf-download {
-	color: apTokens.$ap-blue-darken1;
+	color: rgb(var(--v-theme-primary));
 }
 
 .amelipro-state-tile__pdf-download--white {
-	color: apTokens.$ap-white;
+	color: rgb(var(--v-theme-apWhite-base));
 }
 
 .amelipro-state-tile {
 	position: relative;
 	display: flex;
 	flex-direction: column;
-	background-color: apTokens.$ap-white;
+	background-color: rgb(var(--v-theme-surface));
 
 	& span {
 		white-space: normal;
@@ -312,12 +310,12 @@
 
 	&:hover {
 		& .amelipro-state-tile__pdf-download {
-			color: apTokens.$ap-blue-darken2;
+			color: rgb(var(--v-theme-secondary));
 			text-decoration: underline;
 		}
 
 		& .amelipro-state-tile__pdf-download--white {
-			color: apTokens.$ap-white;
+			color: rgb(var(--v-theme-apWhite-base));
 		}
 	}
 }
@@ -328,10 +326,10 @@
 }
 
 .btn-styled-text {
-	min-height: apTokens.$btn-min-height;
-	padding: 12px 24px;
-	border-radius: apTokens.$btn-radius;
-	font-size: apTokens.$font-size-sm;
+	min-height: var(--v-ap-btnMinHeight);
+	padding: var(--v-padding-3) 24px;
+	border-radius: var(--v-ap-btnRadius);
+	font-size: var(--v-ap-fontSizeSm);
 }
 
 .state-tile-icon {
@@ -352,7 +350,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/AmeliproStepper/AmeliproStepper.vue

@@ -318,7 +318,7 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
+@use '@/assets/overrides/breakpoints' as bp;
 
 .amelipro-stepper__list li {
 	&:first-child {
@@ -335,7 +335,7 @@
 }
 
 .step-number {
-	font-size: apTokens.$font-size-sm;
+	font-size: var(--v-ap-fontSizeSm);
 
 	&::before {
 		position: absolute;
@@ -344,8 +344,8 @@
 		width: 2rem;
 		height: 2rem;
 		border-radius: 50%;
-		background-color: apTokens.$ap-blue-lighten3;
-		border: 1px solid apTokens.$ap-green-lighten2;
+		background-color: rgb(var(--v-theme-ap-blue-lighten-3));
+		border: 1px solid rgb(var(--v-theme-ap-green-lighten-2));
 		content: '';
 		z-index: -1;
 	}
@@ -354,28 +354,28 @@
 		position: absolute;
 		left: calc(50% - 0.3rem);
 		bottom: -0.7rem;
-		color: apTokens.$ap-grey-darken1;
+		color: rgb(var(--v-theme-ap-grey-darken-1));
 	}
 
 	&.step-number--active {
 		&::before {
-			background-color: apTokens.$ap-blue-darken1;
+			background-color: rgb(var(--v-theme-primary));
 			border: 0;
 		}
 
 		& span {
-			color: apTokens.$ap-white;
+			color: rgb(var(--v-theme-apWhite-base));
 		}
 	}
 
 	&.step-number--disabled {
 		&::before {
-			background-color: apTokens.$ap-grey-lighten2;
+			background-color: rgb(var(--v-theme-ap-grey-lighten-2));
 			border: 0;
 		}
 
 		& span {
-			color: apTokens.$ap-grey-darken1;
+			color: rgb(var(--v-theme-ap-grey-darken-1));
 		}
 	}
 }
@@ -387,29 +387,29 @@
 .active-step-title {
 	position: relative;
 	width: calc(100% - 96px);
-	background-color: apTokens.$ap-blue-darken1;
+	background-color: rgb(var(--v-theme-primary));
 	border-top-left-radius: 8px;
 	border-top-right-radius: 8px;
-	color: apTokens.$ap-white;
+	color: rgb(var(--v-theme-apWhite-base));
 	text-align: center;
 	z-index: 1;
 }
 
 .next-step-btn__wrapper {
-	@media #{apTokens.$media-only-xs} {
+	@media #{bp.$down-xs} {
 		width: 100%;
 	}
 }
 
 .amelipro-stepper__content--default {
-	padding: 3rem apTokens.$card-padding-tablet apTokens.$card-padding-tablet apTokens.$card-padding-tablet;
-	background-color: apTokens.$ap-white;
-	border: 1px solid apTokens.$ap-green-lighten2;
+	padding: 3rem 1rem 1rem;
+	background-color: rgb(var(--v-theme-surface));
+	border: 1px solid rgb(var(--v-theme-ap-green-lighten-2));
 	border-radius: 8px;
 	border-top-left-radius: 0;
 
-	@media #{apTokens.$media-down-md} {
-		padding: 3rem apTokens.$card-padding-mobile apTokens.$card-padding-mobile apTokens.$card-padding-mobile;
+	@media #{bp.$down-sm} {
+		padding: 3rem 0.75rem 0.75rem;
 		border-top-left-radius: 8px;
 	}
 }

package/src/components/Amelipro/AmeliproTable/AmeliproTable.vue

@@ -416,11 +416,9 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
-
 .amelipro-table__wrapper--desktop > div,
 .amelipro-table__wrapper--mobile > div {
-	border: 1px solid apTokens.$ap-grey;
+	border: 1px solid rgb(var(--v-theme-ap-grey));
 	border-radius: 8px;
 }
 
@@ -434,7 +432,7 @@ table {
 th,
 td {
 	padding: 0.5rem 0.75rem;
-	border-bottom: 1px solid apTokens.$ap-grey;
+	border-bottom: 1px solid rgb(var(--v-theme-ap-grey));
 
 	.amelipro-table__wrapper--mobile table tr:last-child & {
 		border-bottom: 0;
@@ -443,7 +441,7 @@ td {
 
 .amelipro-table__wrapper--mobile {
 	& td {
-		border-left: 1px solid apTokens.$ap-grey;
+		border-left: 1px solid rgb(var(--v-theme-ap-grey));
 	}
 
 	& table tr:first-child th {
@@ -468,8 +466,8 @@ td {
 .vertical-border {
 	td,
 	th {
-		border-left: 1px solid apTokens.$ap-grey;
-		border-right: 1px solid apTokens.$ap-grey;
+		border-left: 1px solid rgb(var(--v-theme-ap-grey));
+		border-right: 1px solid rgb(var(--v-theme-ap-grey));
 	}
 
 	& tr td:first-child,
@@ -488,9 +486,9 @@ tr:last-child td {
 }
 
 .total-counter {
-	background-color: apTokens.$ap-grey-lighten2;
-	border: 1px solid apTokens.$ap-grey-darken1;
-	border-radius: apTokens.$btn-radius;
+	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: 0.5rem 0.75rem;
 }
 

package/src/components/Amelipro/AmeliproTabs/AmeliproTabBtn/AmeliproTabBtn.vue

@@ -143,8 +143,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
-
 .check-icon {
 	position: absolute;
 	top: calc(50% - 18px);
@@ -153,10 +151,10 @@
 
 .amelipro-tab__btn--pills {
 	position: relative;
-	border-radius: apTokens.$tabs-pill-radius;
+	border-radius: var(--v-ap-btnRadius);
 	cursor: pointer;
-	padding: apTokens.$tabs-pill-padding-y apTokens.$tabs-pill-padding-x;
-	font-weight: apTokens.$tabs-pill-font-weight;
+	padding: 0.5rem 2rem;
+	font-weight: var(--v-ap-fontWeightBold);
 
 	&.selected {
 		&::after {
@@ -165,8 +163,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: '';
 		}
@@ -189,7 +187,7 @@
 		width: 1.6rem;
 		height: 1.6rem;
 		border-radius: 50%;
-		background-color: apTokens.$ap-pink;
+		background-color: rgb(var(--v-theme-ap-pink));
 		z-index: -1;
 	}
 }

package/src/components/Amelipro/AmeliproTabs/AmeliproTabs.vue

@@ -325,7 +325,7 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
+@use '@/assets/overrides/breakpoints' as bp;
 
 .first-tab-btn {
 	border-top-left-radius: 8px;
@@ -337,17 +337,17 @@
 
 .tabpanel {
 	&:focus {
-		outline: 1px dotted apTokens.$ap-grey-darken1;
+		outline: 1px dotted rgb(var(--v-theme-ap-grey-darken-1));
 	}
 }
 
 .tab-panel-default {
 	border-radius: 8px;
-	border: 1px solid apTokens.$ap-grey-lighten2;
+	border: 1px solid rgb(var(--v-theme-ap-grey-lighten-2));
 }
 
 .border-top-left {
-	@media #{apTokens.$media-up-md} {
+	@media #{bp.$up-md} {
 		border-top-left-radius: 0;
 	}
 }

package/src/components/Amelipro/AmeliproTextArea/AmeliproTextArea.vue

@@ -291,8 +291,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
-
 .amelipro-textarea-input {
 	& :deep(.v-field__outline) {
 		border-color: v-bind(inputBorderStyle);
@@ -306,14 +304,14 @@
 }
 
 .amelipro-textarea__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/AmeliproTextField/AmeliproTextField.vue

@@ -446,8 +446,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/amelipro/apTokens2026' as apTokens;
-
 .amelipro-text-field {
 	& :deep(.v-field__outline) {
 		border-color: v-bind(inputBorderStyle);
@@ -465,25 +463,25 @@
 }
 
 .amelipro-validation-rules {
-	font-size: apTokens.$font-size-xs;
-	color: apTokens.$ap-grey;
+	font-size: var(--v-ap-fontSizeXs);
+	color: rgb(var(--v-theme-ap-grey));
 
 	.amelipro-validation-rule {
 		&.is-valid {
-			color: apTokens.$ap-turquoise-darken1;
+			color: rgb(var(--v-theme-success));
 		}
 	}
 }
 
 .amelipro-text-field__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) {