@ozdao/martyrs 0.2.570 → 0.2.572

package/src/modules/music/components/pages/MusicLibrary.vue

@@ -11,7 +11,7 @@
           :key="tab.id"
           @click="activeTab = tab.id"
           :class="[
-            activeTab === tab.id ? 'bg-white t-black' : 'bg-white-transp-50  hover-bg-white',
+            activeTab === tab.id ? 'bg-white t-black' : 'bg-white-transp-50  hover:bg-white',
           ]"
           class="radius-extra pd-small"
           :showLoader="false" 
@@ -24,11 +24,11 @@
     
     <!-- Playlists Tab -->
     <div v-if="activeTab === 'playlists'" class="playlists-tab">
-      <div class="flex-between flex mn-b-small">
+      <div class="flex-justify-between flex mn-b-small">
         <h2 class="">Your Playlists</h2>
         <Button 
           @click="$router.push({ name: 'playlist-create' })"
-          class="bg-main  radius-small pd-small hover-scale-1"
+          class="bg-main  radius-small pd-small hover:scale-[1.05]"
           :showLoader="false" 
           :showSucces="false"
         >
@@ -64,11 +64,11 @@
     
     <!-- Albums Tab -->
     <div v-if="activeTab === 'albums'" class="albums-tab">
-      <div class="flex-between flex mn-b-small">
+      <div class="flex-justify-between flex mn-b-small">
         <h2 class="">Your Albums</h2>
         <Button 
           @click="$router.push({ name: 'album-create' })"
-          class="bg-main  radius-small pd-small hover-scale-1"
+          class="bg-main  radius-small pd-small hover:scale-[1.05]"
           :showLoader="false" 
           :showSucces="false"
         >
@@ -104,11 +104,11 @@
     
     <!-- Artists Tab -->
     <div v-if="activeTab === 'artists'" class="artists-tab">
-      <div class="flex-between flex mn-b-small">
+      <div class="flex-justify-between flex mn-b-small">
         <h2 class="">Your Artists</h2>
         <Button 
           @click="$router.push({ name: 'artist-create' })"
-          class="bg-main  radius-small pd-small hover-scale-1"
+          class="bg-main  radius-small pd-small hover:scale-[1.05]"
           :showLoader="false" 
           :showSucces="false"
         >
@@ -144,11 +144,11 @@
     
     <!-- Tracks Tab -->
     <div v-if="activeTab === 'tracks'" class="tracks-tab">
-      <div class="flex-between flex mn-b-small">
+      <div class="flex-justify-between flex mn-b-small">
         <h2 class="">Your Tracks</h2>
         <Button 
           @click="$router.push({ name: 'track-create' })"
-          class="bg-main  radius-small pd-small hover-scale-1"
+          class="bg-main  radius-small pd-small hover:scale-[1.05]"
           :showLoader="false" 
           :showSucces="false"
         >

package/src/modules/music/components/pages/Playlist.vue

@@ -3,7 +3,7 @@
     <!-- Not Found -->
     <div v-if="hasLoaded && !playlist" class="t-center pd-big">
       <h2 class="">Playlist not found</h2>
-      <p class="t-transp t-medium">The playlist you're looking for doesn't exist or has been removed.</p>
+      <p class="t-transp fw-medium">The playlist you're looking for doesn't exist or has been removed.</p>
     </div>
     
     <!-- Playlist Content -->
@@ -20,7 +20,7 @@
         </div>
 
         <!-- Quick Stats -->
-        <div class="stats-grid grid cols-2 gap-small">
+        <div class="stats-grid d-grid cols-2 gap-small">
           <div class="stat-card bg-light pd-medium radius-medium t-center">
             <div class=" mn-b-thin">{{ playlistTracks.length }}</div>
             <div class="t-small t-transp t-uppercase">Tracks</div>
@@ -36,13 +36,13 @@
       <div class="playlist-details-section">
         <!-- Playlist Type Badge -->
         <div class="flex items-center gap-small mn-b-small">
-          <span class="bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase">
+          <span class="bg-light fw-medium pd-thin radius-thin uppercase t-small t-uppercase">
             Playlist
           </span>
-          <span v-if="playlist.isCollaborative" class="bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase">
+          <span v-if="playlist.isCollaborative" class="bg-light fw-medium pd-thin radius-thin uppercase t-small t-uppercase">
             Collaborative
           </span>
-          <span v-if="playlist.status === 'published'" class="bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase">
+          <span v-if="playlist.status === 'published'" class="bg-light fw-medium pd-thin radius-thin uppercase t-small t-uppercase">
             Published
           </span>
         </div>
@@ -54,7 +54,7 @@
         <ActionButtons :buttons="actionButtons" />
 
         <div class="artists-section mn-b-medium">
-          <h3 class="t-medium mn-b-small">Created by</h3>
+          <h3 class="fw-medium mn-b-small">Created by</h3>
           <div class="flex flex-column gap-small">
             <ArtistCardSmall 
               :artist="{
@@ -73,7 +73,7 @@
 
         <!-- Collaborators -->
         <div v-if="playlist.collaborators && playlist.collaborators.length > 0" class="collaborators-section mn-b-big">
-          <h3 class="t-medium mn-b-small">Collaborators</h3>
+          <h3 class="fw-medium mn-b-small">Collaborators</h3>
           <div class="flex flex-wrap gap-small">
             <div 
               v-for="collaborator in playlist.collaborators"
@@ -91,53 +91,53 @@
         </div>
 
         <!-- Metadata Cards -->
-        <h3 class="t-medium mn-b-small">Metadata</h3>
-        <div class="metadata-grid grid cols-2 gap-small mn-b-medium">
+        <h3 class="fw-medium mn-b-small">Metadata</h3>
+        <div class="metadata-grid d-grid cols-2 gap-small mn-b-medium">
           <!-- Created Date -->
           <div class="metadata-card bg-light pd-medium radius-medium flex items-center gap-regular">
-              <IconCalendar class="i-medium t-primary" />
+              <IconCalendar class="i-medium t-main" />
             <div>
               <div class="t-small t-transp t-uppercase">Created</div>
-              <div class="t-medium ">{{ formatDate(playlist.createdAt) }}</div>
+              <div class="fw-medium ">{{ formatDate(playlist.createdAt) }}</div>
             </div>
           </div>
 
           <!-- Total Duration -->
           <div class="metadata-card bg-light pd-medium radius-medium flex items-center gap-regular">
-              <IconClock class="i-medium t-primary" />
+              <IconClock class="i-medium t-main" />
             <div>
               <div class="t-small t-transp t-uppercase">Duration</div>
-              <div class="t-medium ">{{ totalDuration }}</div>
+              <div class="fw-medium ">{{ totalDuration }}</div>
             </div>
           </div>
 
           <!-- Updated Date -->
           <div class="metadata-card bg-light pd-medium radius-medium flex items-center gap-regular">
-              <IconRefresh class="i-medium t-primary" />
+              <IconRefresh class="i-medium t-main" />
             <div>
               <div class="t-small t-transp t-uppercase">Updated</div>
-              <div class="t-medium ">{{ formatDate(playlist.updatedAt) }}</div>
+              <div class="fw-medium ">{{ formatDate(playlist.updatedAt) }}</div>
             </div>
           </div>
 
           <!-- Visibility -->
           <div class="metadata-card bg-light pd-medium radius-medium flex items-center gap-regular">
-              <IconEye class="i-medium t-primary" />
+              <IconEye class="i-medium t-main" />
             <div>
               <div class="t-small t-transp t-uppercase">Visibility</div>
-              <div class="t-medium ">{{ playlist.isPublic ? 'Public' : 'Private' }}</div>
+              <div class="fw-medium ">{{ playlist.isPublic ? 'Public' : 'Private' }}</div>
             </div>
           </div>
         </div>
 
         <!-- Tags -->
         <div v-if="playlist.tags && playlist.tags.length" class="tags-section mn-b-medium">
-          <h3 class="t-medium mn-b-small">Tags</h3>
+          <h3 class="fw-medium mn-b-small">Tags</h3>
           <div class="flex gap-thin flex-wrap">
             <span 
               v-for="tag in playlist.tags" 
               :key="tag"
-              class="tag bg-light t-transp pd-thin-big radius-small t-small hover-bg-light cursor-pointer"
+              class="tag bg-light t-transp pd-thin-big radius-small t-small hover:bg-light cursor-pointer"
             >
               #{{ tag }}
             </span>
@@ -146,7 +146,7 @@
 
         <!-- Description -->
         <div v-if="playlist.description" class="description-section bg-light pd-medium radius-medium mn-b-medium">
-          <h3 class="t-medium mn-b-small">About</h3>
+          <h3 class="fw-medium mn-b-small">About</h3>
           <p class="t-transp">{{ playlist.description }}</p>
         </div>
       </div>
@@ -191,7 +191,7 @@
     <section v-else-if="!isLoading && playlist && !playlistTracks.length" class="empty-section mn-t-big">
       <div class="empty-tracks t-center pd-big bg-light radius-medium">
         <h3 class=" mn-b-small">This playlist is empty</h3>
-        <p class="t-transp t-medium mn-b-medium">Add some tracks to get started</p>
+        <p class="t-transp fw-medium mn-b-medium">Add some tracks to get started</p>
         
         <Button 
           v-if="isOwner || isCollaborator"
@@ -211,14 +211,14 @@
         <router-link 
           v-if="playlist.creator"
           :to="getOwnerProfileLink(playlist.creator)" 
-          class="t-primary hover-opacity"
+          class="t-main hover:opacity-70"
         >
           See all
         </router-link>
       </div>
-      <div class="flex flex-nowrap gap-small o-x-scroll overscroll-behavior-x-contain scroll-behavior-smooth scroll-snap-type-x-mandatory scroll-hide">
-        <li v-for="relatedPlaylist in morePlaylists" :key="relatedPlaylist._id" class="flex-none scroll-snap-align-start">
-          <PlaylistCard :playlist="relatedPlaylist" class="w-min-15r transition-cubic-in-out" />
+      <div class="flex flex-nowrap gap-small o-x-scroll overscroll-x-contain scroll-smooth scroll-snap-x-mandatory scroll-hide">
+        <li v-for="relatedPlaylist in morePlaylists" :key="relatedPlaylist._id" class="flex-none scroll-snap-start">
+          <PlaylistCard :playlist="relatedPlaylist" class="w-min-15r ease-cubic-in-out" />
         </li>
       </div>
     </section>

package/src/modules/music/components/pages/SearchResults.vue

@@ -17,7 +17,7 @@
           :key="filter.id"
           @click="setActiveFilter(filter.id)"
           :class="[
-            filter.id === activeFilter ? 'bg-white t-black' : 'bg-white-transp-50 hover-bg-white',
+            filter.id === activeFilter ? 'bg-white t-black' : 'bg-white-transp-50 hover:bg-white',
           ]"
           class="radius-extra pd-small"
           :showLoader="false" 
@@ -33,28 +33,28 @@
     </div>
     
     <div v-else-if="searchError" class="search-error t-center pd-big">
-      <p class="t-fourth t-medium">{{ searchError }}</p>
+      <p class="t-fourth fw-medium">{{ searchError }}</p>
     </div>
     
     <div v-else-if="!searchQuery" class="search-empty t-center pd-big">
       <h2 class="mn-b-small">Search for music</h2>
-      <p class="t-transp t-medium">Find your favorite songs, artists, albums, and playlists</p>
+      <p class="t-transp fw-medium">Find your favorite songs, artists, albums, and playlists</p>
     </div>
     
     <div v-else-if="!hasResults" class="search-no-results t-center pd-big">
       <h2 class="mn-b-small">No results found for "{{ searchQuery }}"</h2>
-      <p class="t-transp t-medium">Please try different keywords or check your spelling</p>
+      <p class="t-transp fw-medium">Please try different keywords or check your spelling</p>
     </div>
     
     <div v-else class="search-results">
       <!-- Songs Results -->
       <section v-if="(activeFilter === 'all' || activeFilter === 'tracks') && trackResults.length > 0" class="search-section mn-b-medium">
-        <div class="flex-between flex mn-b-small">
+        <div class="flex-justify-between flex mn-b-small">
           <h2 class="">Songs</h2>
           <Button 
             v-if="trackResults.length > 5 && activeFilter === 'all'"
             @click="setActiveFilter('tracks')"
-            class="t-main bg-transparent border-none hover-bg-white-transp-10 pd-thin"
+            class="t-main bg-transparent border-none hover:bg-white-transp-10 pd-thin"
             :showLoader="false" 
             :showSucces="false"
           >
@@ -76,12 +76,12 @@
       
       <!-- Artists Results -->
       <section v-if="(activeFilter === 'all' || activeFilter === 'artists') && artistResults.length > 0" class="search-section mn-b-medium">
-        <div class="flex-between flex mn-b-small">
+        <div class="flex-justify-between flex mn-b-small">
           <h2 class="">Artists</h2>
           <Button 
             v-if="artistResults.length > 6 && activeFilter === 'all'"
             @click="setActiveFilter('artists')"
-            class="t-main bg-transparent border-none hover-bg-white-transp-10 pd-thin"
+            class="t-main bg-transparent border-none hover:bg-white-transp-10 pd-thin"
             :showLoader="false" 
             :showSucces="false"
           >
@@ -98,12 +98,12 @@
       
       <!-- Albums Results -->
       <section v-if="(activeFilter === 'all' || activeFilter === 'albums') && albumResults.length > 0" class="search-section mn-b-medium">
-        <div class="flex-between flex mn-b-small">
+        <div class="flex-justify-between flex mn-b-small">
           <h2 class="">Albums</h2>
           <Button 
             v-if="albumResults.length > 5 && activeFilter === 'all'"
             @click="setActiveFilter('albums')"
-            class="t-main bg-transparent border-none hover-bg-white-transp-10 pd-thin"
+            class="t-main bg-transparent border-none hover:bg-white-transp-10 pd-thin"
             :showLoader="false" 
             :showSucces="false"
           >
@@ -120,12 +120,12 @@
       
       <!-- Playlists Results -->
       <section v-if="(activeFilter === 'all' || activeFilter === 'playlists') && playlistResults.length > 0" class="search-section mn-b-medium">
-        <div class="flex-between flex mn-b-small">
+        <div class="flex-justify-between flex mn-b-small">
           <h2 class="">Playlists</h2>
           <Button 
             v-if="playlistResults.length > 5 && activeFilter === 'all'"
             @click="setActiveFilter('playlists')"
-            class="t-main bg-transparent border-none hover-bg-white-transp-10 pd-thin"
+            class="t-main bg-transparent border-none hover:bg-white-transp-10 pd-thin"
             :showLoader="false" 
             :showSucces="false"
           >
@@ -142,12 +142,12 @@
       
       <!-- Genres Results -->
       <section v-if="(activeFilter === 'all' || activeFilter === 'genres') && genreResults.length > 0" class="search-section">
-        <div class="flex-between flex mn-b-small">
+        <div class="flex-justify-between flex mn-b-small">
           <h2 class="">Genres</h2>
           <Button 
             v-if="genreResults.length > 4 && activeFilter === 'all'"
             @click="setActiveFilter('genres')"
-            class="t-main bg-transparent border-none hover-bg-white-transp-10 pd-thin"
+            class="t-main bg-transparent border-none hover:bg-white-transp-10 pd-thin"
             :showLoader="false" 
             :showSucces="false"
           >
@@ -160,7 +160,7 @@
             v-for="genre in (activeFilter === 'all' ? genreResults.slice(0, 4) : genreResults)" 
             :key="genre._id"
             :to="{ name: 'genre-detail', params: { url: genre.url } }"
-            class="genre-card bg-gradient-color pd-medium radius-medium t-center hover-scale-1 transition-cubic-in-out"
+            class="genre-card bg-gradient-color pd-medium radius-medium t-center hover:scale-[1.05] ease-cubic-in-out"
             :style="{ 
               '--gradient-color': getRandomGradient() 
             }"

package/src/modules/music/components/pages/Track.vue

@@ -9,7 +9,7 @@
     <!-- Not Found -->
     <div v-if="hasLoaded && !track" class="t-center pd-big">
       <h2 class="">Track not found</h2>
-      <p class="t-transp t-medium">The track you're looking for doesn't exist or has been removed.</p>
+      <p class="t-transp fw-medium">The track you're looking for doesn't exist or has been removed.</p>
     </div>
 
     <!-- Track Content -->
@@ -28,7 +28,7 @@
               @click="playTrack"
               color="white"
               size="big"
-              class="w-5r h-5r radius-big bg-main shadow-big hover-scale-110"
+              class="w-5r h-5r radius-big bg-main shadow-big hover:scale-[1.05]10"
             >
               <IconPlay v-if="!isPlaying" fill="rgb(var(--white))" class="i-medium" />
               <IconPause v-else fill="rgb(var(--white))" class="i-medium" />
@@ -39,7 +39,7 @@
           
 
         <!-- Quick Stats -->
-        <div class="stats-grid grid cols-2 gap-small">
+        <div class="stats-grid d-grid cols-2 gap-small">
           <div class="stat-card bg-light pd-medium radius-medium t-center">
             <div class=" mn-b-thin">{{ formatNumber(track.playCount) }}</div>
             <div class="t-small t-transp t-uppercase">Plays</div>
@@ -55,8 +55,8 @@
       <div class="track-details-section">
         <!-- Track Type Badge -->
         <div class="flex items-center gap-small mn-b-small">
-           <span class="bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase">Single</span>
-           <span class="bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase">Explicit</span>
+           <span class="bg-light fw-medium pd-thin radius-thin uppercase t-small t-uppercase">Single</span>
+           <span class="bg-light fw-medium pd-thin radius-thin uppercase t-small t-uppercase">Explicit</span>
         </div>
 
         <!-- Track Title -->
@@ -66,7 +66,7 @@
 
         <!-- Artist Card -->
         <div class="artists-section mn-b-medium">
-          <h3 class="t-medium mn-b-small" v-if="track.artist">Artist</h3>
+          <h3 class="fw-medium mn-b-small" v-if="track.artist">Artist</h3>
           <ArtistCardSmall 
             :key="track.artist._id"
             :artist="track.artist"
@@ -77,78 +77,78 @@
         </div>
 
         <!-- Metadata Cards -->
-        <h3 class="t-medium mn-b-small">Metadata</h3>
-        <div class="metadata-grid grid cols-2 gap-small mn-b-medium">
+        <h3 class="fw-medium mn-b-small">Metadata</h3>
+        <div class="metadata-grid d-grid cols-2 gap-small mn-b-medium">
           <!-- Release Date -->
           <div class="metadata-card bg-light pd-medium radius-medium flex items-center gap-regular">
-            <IconCalendar class="i-medium t-primary" />
+            <IconCalendar class="i-medium t-main" />
             <div>
               <div class="t-small t-transp t-uppercase">Released</div>
-              <div class="t-medium ">{{ formatDate(track.releaseDate) }}</div>
+              <div class="fw-medium ">{{ formatDate(track.releaseDate) }}</div>
             </div>
           </div>
 
           <!-- Total Duration -->
           <div class="metadata-card bg-light pd-medium radius-medium flex items-center gap-regular">
-            <IconClock class="i-medium t-primary" />
+            <IconClock class="i-medium t-main" />
             <div>
               <div class="t-small t-transp t-uppercase">Duration</div>
-              <div class="t-medium ">{{ formatDuration(track.duration) }}</div>
+              <div class="fw-medium ">{{ formatDuration(track.duration) }}</div>
             </div>
           </div>
 
           <!-- Label -->
           <div class="metadata-card bg-light pd-medium radius-medium flex items-center gap-regular">
-            <IconCheck class="i-medium t-primary" />
+            <IconCheck class="i-medium t-main" />
             <div>
               <div class="t-small t-transp t-uppercase">Status</div>
-              <div class="t-medium ">{{ track.status }}</div>
+              <div class="fw-medium ">{{ track.status }}</div>
             </div>
           </div>
 
           <!-- Visibility -->
           <div class="metadata-card bg-light pd-medium radius-medium flex items-center gap-regular">
-            <IconEye class="i-medium t-primary" />
+            <IconEye class="i-medium t-main" />
             <div>
               <div class="t-small t-transp t-uppercase">Visibility</div>
-              <div class="t-medium ">{{ track.isPublic ? 'Public' : 'Private' }}</div>
+              <div class="fw-medium ">{{ track.isPublic ? 'Public' : 'Private' }}</div>
             </div>
           </div>
         </div>
 
 
         <!-- Album Info -->
-        <h3 v-if="track.album" class="t-medium mn-b-small">From Album</h3>
+        <h3 v-if="track.album" class="fw-medium mn-b-small">From Album</h3>
         <div v-if="track.album" class="album-card bg-light pd-medium radius-medium mn-b-medium">
          
           <router-link 
             :to="`/album/${track.album.url}`"
-            class="flex flex-v-center gap-thin hover-opacity"
+            class="flex flex-v-center gap-thin hover:opacity-70"
           >
             <Media 
               :url="track.album.coverArt || '/logo/logo-placeholder.jpg'"
               :alt="track.album.title"
               class="w-3r h-3r radius-thin o-hidden object-cover"
             />
-            <span class="t-medium ">{{ track.album.title }}</span>
+            <span class="fw-medium ">{{ track.album.title }}</span>
           </router-link>
         </div>
 
         <!-- Genres & Tags -->
         <div v-if="(track.genre && track.genre.length) || (track.tags && track.tags.length)" class="tags-section mn-b-medium">
-          <h3 class="t-medium mn-b-small">Genres & Tags</h3>
+          <h3 class="fw-medium mn-b-small">Genres & Tags</h3>
           <div class="flex gap-thin flex-wrap">
             <span 
               v-for="genre in track.genre" 
               :key="genre"
-              class="tag bg-main t-medium pd-thin radius-thin t-small cursor-pointer"
+              class="tag bg-main fw-medium pd-thin radius-thin t-small cursor-pointer"
             >
               {{ genre.name || genre }}
             </span>
             <span 
               v-for="tag in track.tags" 
               :key="tag"
-              class="tag bg-light t-transp pd-thin-big radius-small t-small hover-bg-light cursor-pointer"
+              class="tag bg-light t-transp pd-thin-big radius-small t-small hover:bg-light cursor-pointer"
             >
               #{{ tag.name || tag }}
             </span>
@@ -157,13 +157,13 @@
 
         <!-- Description -->
         <div v-if="track.description" class="description-section bg-light pd-medium radius-medium mn-b-medium">
-          <h3 class="t-medium mn-b-small">About</h3>
+          <h3 class="fw-medium mn-b-small">About</h3>
           <p class="t-transp">{{ track.description }}</p>
         </div>
 
         <!-- Lyrics -->
         <div v-if="track.lyrics" class="lyrics-section bg-light pd-medium radius-medium">
-          <h3 class="t-medium mn-b-small">Lyrics</h3>
+          <h3 class="fw-medium mn-b-small">Lyrics</h3>
           <pre class="t-transp t-small">{{ track.lyrics }}</pre>
         </div>
       </div>
@@ -186,7 +186,7 @@
             class: 'pd-medium bg-light radius-medium'
           }
         }"
-        class="grid cols-2 cols-m-3 cols-l-4 gap-regular"
+        class="d-grid cols-2 cols-m-3 cols-l-4 gap-regular"
       >
         <template #default="{ items }">
           <div class="bg-light radius-medium o-hidden">

package/src/modules/music/components/player/FullscreenPlayer.vue

@@ -7,7 +7,7 @@
       class="pos-relative gap-small flex-nowrap flex-column flex-center flex z-index-1"
     >
       <!-- COVER -->
-      <div class="mn-b-thin h-max-30r br-2px br-solid br-black-transp-10  radius-extra w-100 pos-relative aspect-1x1 flex-center flex "
+      <div class="mn-b-thin h-max-30r br-2px br-black-transp-10  radius-extra w-100 pos-relative aspect-1x1 flex-center flex "
         style="
           background: linear-gradient(180deg, #BDBDBD 0%, #D9D9D9 79.69%, #A5A5A5 100%);
           box-shadow: 0 2px 0px 2px #aaaaaa;
@@ -24,7 +24,7 @@
           </div>
           <div
             ref="disk"
-            :class="['radius-100 rotate-gradient flex-center flex']"
+            :class="['radius-extra rotate-gradient flex-center flex']"
             :style="{
               transform: `rotate(${playerState.rotationAngle}deg)`,
               width: '24rem',
@@ -56,7 +56,7 @@
                 backgroundPosition: 'center center',
                 backgroundSize: '106%',
               }"
-              class="radius-extra br-solid br-black-transp-10 br-1px"
+              class="radius-extra br-black-transp-10 br-1px"
             >
             </div>
           </div>
@@ -103,10 +103,10 @@
             class="i-medium cursor-pointer"
             :class="{'no-events': isLoading}"
           />
-          <p class="t-semi h4">{{ isLiked ? 'Liked' : 'Like' }}</p>
+          <p class="fw-semi h4">{{ isLiked ? 'Liked' : 'Like' }}</p>
         </div>
 
-        <p class="t-semi h4" :class="{'mn-l-auto': authState.user}">{{ likesCount }} {{ likesCount === 1 ? 'person' : 'people' }} liked</p>
+        <p class="fw-semi h4" :class="{'mn-l-auto': authState.user}">{{ likesCount }} {{ likesCount === 1 ? 'person' : 'people' }} liked</p>
       </div>
 
       <!-- CONTROLS -->

package/src/modules/notifications/components/blocks/NotificationItem.vue

@@ -67,7 +67,7 @@ const handleClick = () => {
       {{ notificationIcon }}
     </div>
     <div class="notification-content">
-      <p class="p-regular t-medium mn-b-small">{{ notification.title }}</p>
+      <p class="p-regular fw-medium mn-b-small">{{ notification.title }}</p>
       <p class="p-small mn-b-small">{{ notification.body }}</p>
       <p class="pd-thin w-max radius-thin bg-white">{{ formattedDate }}</p>
     </div>

package/src/modules/notifications/components/elements/NotificationBadge.vue

@@ -174,6 +174,6 @@ onMounted(() => {
 .notifications-empty {
   padding: 24px;
   text-align: center;
-  color: rgb(var(--text-light));
+  color: rgb(var(--texfw-light));
 }
 </style>

package/src/modules/orders/components/blocks/CardApplication.vue

@@ -15,7 +15,7 @@
 
     <div class="mn-b-small pd-small bg-white radius-small flex-nowrap flex"> 
       <div class="w-100">
-        <p class="t-truncate">{{ application.type || 'Unknown' }}</p> 
+        <p class="truncate">{{ application.type || 'Unknown' }}</p> 
         <small class="t-transp">Type</small>
       </div>
 

package/src/modules/orders/components/blocks/CardCustomer.vue

@@ -15,7 +15,7 @@
 
     <div class="mn-b-small pd-small bg-white radius-small flex-nowrap flex"> 
       <div class="w-100">
-        <p class="t-truncate">{{ customer.source || 'Unknown' }}</p> 
+        <p class="truncate">{{ customer.source || 'Unknown' }}</p> 
         <small class="t-transp">Source</small>
       </div>
 

package/src/modules/orders/components/blocks/CardOrder.vue

@@ -6,11 +6,11 @@
 				<img loading="lazy" v-if="order.status === 'Awaiting shipment'" 			class="mn-r-small" src="@/assets/icons/status/paid.svg"/>
 				<img loading="lazy" v-if="order.status === 'In delivery'" 		class="mn-r-small" src="@/assets/icons/status/finished.svg"/>
 				<img loading="lazy" v-if="order.status === 'Finished'" 		class="mn-r-small" src="@/assets/icons/status/finished.svg"/> -->
-	    <span class="w-100 t-medium p-medium">{{order.status}}</span>
+	    <span class="w-100 fw-medium p-medium">{{order.status}}</span>
 	  </p>
 	  
 	  <div class="flex-nowrap flex">
-	  	<div class="mn-r-bold pd-r-big br-right-dark w-66">
+	  	<div class="mn-r-bold pd-r-big br-r-1px br-dark w-66">
 	  		<ul class="mn-semi">
 	        <!-- <li v-for="(product, index) in orderProducts(order.items.slice(0,2))" :key="product.id" class="shop-cart-item">
 	        	<img loading="lazy" v-if="product.images" :src="require( `@/assets/images/products/${product.images[0]}`)">
@@ -27,14 +27,14 @@
 	                <span v-if="product.color" class="">{{ product.color}}</span>
 	              </div>
 	              
-	              <p class="t-demi">$ {{product.quantity}} x {{product.price}}</p>
+	              <p class="fw-demi">$ {{product.quantity}} x {{product.price}}</p>
 	            </div>
 
 	          </div>
 
 	    		</li> -->
 	      </ul>
-	      <p class="mn-small t-medium p-medium">
+	      <p class="mn-small fw-medium p-medium">
 	      	Adress and delivery
 	      </p>
 	      <p class="mn-small">
@@ -55,7 +55,7 @@
 
 
 	    <div class="w-40">
-	    	<p class="mn-small w-100 t-medium p-medium">
+	    	<p class="mn-small w-100 fw-medium p-medium">
 	        <span class="t-transp">Order:</span> №{{order._id.slice(0,8)}} 
 	      </p>
 	       <p  v-if="order.delivery.type === 'Post'" class="mn-medium w-100">
@@ -81,10 +81,10 @@
 	      </div>
 	      <div class="mn-semi intotal flex-bottom flex">
 	        <p  class="t-transp">In total to pay</p>
-	        <p v-if="order.delivery.type === ''" class="p-medium t-semi">$ {{ cartTotalPrice }}</p>
-	        <p v-if="order.delivery.type === 'Pickup'" class="p-medium t-semi">$ {{ cartTotalPrice}} ₽</p>
-	        <p v-if="order.delivery.type === 'Courier'" class="p-medium t-semi">$ {{ cartTotalPrice + 20 }}</p>
-	        <p v-if="order.delivery.type === 'Post'" class="p-medium t-semi">$ {{ cartTotalPrice + 10 }}</p>
+	        <p v-if="order.delivery.type === ''" class="p-medium fw-semi">$ {{ cartTotalPrice }}</p>
+	        <p v-if="order.delivery.type === 'Pickup'" class="p-medium fw-semi">$ {{ cartTotalPrice}} ₽</p>
+	        <p v-if="order.delivery.type === 'Courier'" class="p-medium fw-semi">$ {{ cartTotalPrice + 20 }}</p>
+	        <p v-if="order.delivery.type === 'Post'" class="p-medium fw-semi">$ {{ cartTotalPrice + 10 }}</p>
 	      </div>
 	      <hr  v-if="order.status === 'Confirmed'" class="mn-semi" >
 	     <!-- 	<button