@cnamts/synapse 1.0.23 → 1.0.25

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>

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"
@@ -93,7 +93,7 @@ exports[`AmeliproHeaderBrandSection > Snapshots > renders the component with onl
     <img
       alt="AmeliPro"
       class="logo-amelipro"
-      src="/src/assets/amelipro/img/amelipro.svg"
+      src="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='99'%20height='64'%20viewBox='0%200%2099%2064'%20fill='none'%3e%3cpath%20fill='%2300a5df'%20d='M68.38%2038.78c.54.32%201.45.63%202.31.63%202.76%200%205.38-1.87%205.38-5.72v-2.86c0-3.59-2.62-5.7-5.7-5.7-3.09%200-5.71%202.11-5.71%205.7v13.73h3.72v-5.78Zm0-2.99v-4.83c0-1.8.85-2.68%202-2.68%201.12%200%201.97.88%201.97%202.68v2.6c0%201.97-.88%202.7-2%202.7-.67%200-1.32-.2-1.97-.47ZM77.97%2039.07h3.7v-8.68c0-1.23.67-2.11%201.84-2.11.63%200%201.28.13%201.85.29l.7-3.02a8.47%208.47%200%200%200-2.57-.42c-3.1%200-5.52%202.11-5.52%205.26v8.68ZM86.43%2033.45c0%203.72%202.44%205.96%205.8%205.96%203.35%200%205.8-2.24%205.8-5.96V31.1c0-3.72-2.45-5.96-5.8-5.96-3.36%200-5.8%202.24-5.8%205.96v2.36Zm3.69-.13v-2.1c0-1.8.52-2.94%202.1-2.94%201.56%200%202.11%201.14%202.11%202.94v2.1c0%201.8-.55%202.94-2.1%202.94-1.57%200-2.11-1.14-2.11-2.94Z'/%3e%3cpath%20fill='%230c419a'%20d='M.47%2035.64c0-2.82%202.38-4.42%207.64-4.97-.08-1.2-.82-1.9-2.27-1.9-1.12%200-2.24.48-3.5%201.23L.94%2027.36a10.75%2010.75%200%200%201%205.67-1.78c3.39%200%205.25%201.97%205.25%206.09v7.72H8.15v-1.3s-1.53%201.64-3.7%201.64C2%2039.69.48%2037.9.48%2035.64Zm7.64-.22v-2.34c-2.8.37-3.88%201.26-3.88%202.27%200%20.85.6%201.3%201.53%201.3.86-.04%201.64-.52%202.35-1.23ZM57.84%2021.75c0-1.22.97-2.08%202.28-2.08%201.3%200%202.27.86%202.27%202.08%200%201.23-.97%202.08-2.27%202.08-1.35%200-2.28-.89-2.28-2.08Zm.3%204.05h3.91v13.48h-3.9V25.8ZM36.24%2032.7c0-4.37%202.76-7.05%206.07-7.05%203.77%200%205.85%202.79%205.85%206.46%200%20.7-.07%201.45-.14%201.79h-7.94c.33%201.97%201.67%202.86%203.43%202.86%201%200%201.86-.41%202.83-.97l1.34%202.49a8.4%208.4%200%200%201-4.7%201.52c-3.87-.04-6.74-2.64-6.74-7.1Zm8.6-1.48c0-1.48-.85-2.56-2.41-2.56-1.23%200-2.1.85-2.35%202.56h4.77ZM18.18%2027.66c1.08-1.08%202.28-2%204.03-2%201.86%200%203.02.77%203.69%202.18%201.15-1.19%202.38-2.19%204.17-2.19%202.9%200%204.21%202.08%204.21%205.39v8.28h-4.14v-7.73c0-1.85-.52-2.41-1.56-2.41-.63%200-1.34.4-2.16%201.23v8.95h-4.18v-7.77c0-1.85-.48-2.41-1.56-2.41-.63%200-1.34.4-2.16%201.23v8.95h-4.14V26.02h3.8v1.64ZM50.52%2035.2V20.34h3.92v15c0%20.86.37%201.12.7%201.12.15%200%20.26%200%20.49-.04l.48%202.94c-.44.18-1.08.33-1.97.33-2.72.04-3.62-1.75-3.62-4.5Z'/%3e%3c/svg%3e"
     />
   </button>
 </div>

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 {