@ozdao/martyrs 0.2.571 → 0.2.572

package/src/modules/core/views/components/partials/Header.vue

@@ -71,8 +71,7 @@
 			w-100
 			z-index-2 
 			pos-relative pos-t-0
-			br-b
-			br-solid
+			br-b-1px
 		"
 		:class="{
   		't-black br-light': theme === 'light',
@@ -115,20 +114,20 @@
 			aria-label="button_location"
     	class="
     		cursor-pointer
-    		bg-transp 
+    		bg-transparent 
     		pd-micro
     		radius-extra 
     		uppercase 
-    		t-semi
-    		br-solid 
+    		fw-semi
+    		
     		br-2px 
-    		transition-linear
+    		ease-linear
     		t-nowrap
     	
     	"
     	:class="{
-    		'fill-black br-black t-black hover-bg-black hover-t-white hover-fill-white': theme === 'light',
-    		'fill-white br-white t-white hover-bg-white hover-t-black hover-fill-black': theme === 'dark'  
+    		'fill-black br-black t-black hover:bg-black hover:t-white hover:fill-white': theme === 'light',
+    		'fill-white br-white t-white hover:bg-white hover:t-black hover:fill-black': theme === 'dark'  
     	}"
     	@click="openLocationPopup()"
     >
@@ -145,7 +144,7 @@
 		<Button 
 			v-if="router.hasRoute('Search') && route.meta.header_search"
 			aria-label="search"
-			class="pd-zero bg-transp"
+			class="pd-zero bg-transparent"
 			:class="route.meta.header_search_class"
 			:submit="() => router.push({name: 'Search'})"
 			:showSucces="false"
@@ -180,7 +179,7 @@
 
 		<Button 
 			aria-label="profile"
-			class="pd-zero bg-transp"
+			class="pd-zero bg-transparent"
 			:submit="
 				auth.state.access.status === false 
 				? 
@@ -202,7 +201,7 @@
 			v-model:select="$i18n.locale"
 		  :options="$i18n.availableLocales"
 		  :property="'value'"
-      class="pos-relative flex flex-column gap-small uppercase pd-thin t-semi radius-thin"
+      class="pos-relative flex flex-column gap-small uppercase pd-thin fw-semi radius-thin"
       :class="{
     		'bg-light t-black': theme === 'light',
     		'bg-dark t-white': theme === 'dark'  

package/src/modules/core/views/components/partials/LocationSelection.vue

@@ -17,7 +17,7 @@
       placeholder="Enter your address"  
 
       class="
-        bg-white radius-tl-medium radius-tr-medium  t-black br-grey-transp-25 br-solid br-2px pd-medium
+        bg-white radius-tl-medium radius-tr-medium  t-black br-grey-transp-25 br-2px pd-medium
       "
 
       @update:country="newCountry => {

package/src/modules/core/views/components/partials/Navigation.vue

@@ -67,11 +67,12 @@ const processRoute = (routeFn) => {
   }
   return routeFn
 }
+
 </script>
 
 <template>
   <nav
-    class="transition-quint-out o-x-visible  h-100"
+    class="ease-quint-out o-x-visible  h-100"
     :class="[
       stateSidebar ? 'pd-small' : 'pd-micro',
       horizontal ? 'w-100 desktop-only gap-thin flex flex-center flex-nowrap o-y-visible' : 'o-y-scroll gap-medium rows-1',
@@ -81,7 +82,7 @@ const processRoute = (routeFn) => {
       v-for="section in props.navigationItems" 
       v-show="!section.visible || (typeof section.visible === 'function' ? section.visible(auth.state, route) : true)"
       :key="section.category" 
-      class="transition-quint-out"
+      class="ease-quint-out"
       :class="[
         horizontal ? 'w-max  flex-child-default flex flex-nowrap' : '',
         stateSidebar && !horizontal ? '' : '',
@@ -89,7 +90,7 @@ const processRoute = (routeFn) => {
     >
       <div
         v-if="section.category && stateSidebar && !horizontal"
-        class="uppercase t-medium t-transp p-small"
+        class="uppercase fw-medium t-transp p-small"
         :class="{
           't-black': theme === 'light',
           't-white':  theme === 'dark'
@@ -118,14 +119,14 @@ const processRoute = (routeFn) => {
         >
           <template #label>
             <button
-              class="transition-quint-out w-100 flex radius-small flex-nowrap cursor-pointer flex-v-center pd-thin"
+              class="ease-quint-out w-100 flex radius-small flex-nowrap cursor-pointer flex-v-center pd-thin"
               @click="item.route ? router.push(processRoute(item.route)) : null"
               :class="[
                 item.route && route.path === processRoute(item.route) ? theme === 'light' ? 'bg-light' : 'bg-dark' : '',
-                theme === 'light' ? 'hover-bg-light' : 'hover-bg-dark'
+                theme === 'light' ? 'hover:bg-light' : 'hover:bg-dark'
               ]"
             >
-              <span class="t-medium">{{ item.title }}</span>
+              <span class="fw-medium">{{ item.title }}</span>
               <!-- <IconChevronBottom :fill="theme === 'dark' ? 'rgb(var(--white))': 'rgb(var(--black))'" class="i-small mn-l-thin"/> -->
             </button>
           </template>
@@ -134,17 +135,17 @@ const processRoute = (routeFn) => {
               <a
                 @click="subItem.route ? router.push(processRoute(subItem.route)) : null"
                 href="#"
-                class="transition-quint-out flex flex-v-center flex-nowrap gap-thin pd-thin radius-small"
+                class="ease-quint-out flex flex-v-center flex-nowrap gap-thin pd-thin radius-small"
                 :class="[
                   subItem.route && route.path === processRoute(subItem.route) ? theme === 'light' ? 'bg-light' : 'bg-dark' : '',
-                  theme === 'light' ? 'hover-bg-light' : 'hover-bg-dark'
+                  theme === 'light' ? 'hover:bg-light' : 'hover:bg-dark'
                 ]"
               >
                 <component
                   v-if="subItem.iconComponent"
                   :is="subItem.iconComponent"
                   class="i-medium"
-                  :fill="store.core.state.theme.darkmode || theme === 'dark' ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.25)'"
+                  fill="rgba(var(--black), 0.25)"
                 />
                 <span v-else class="">{{ subItem.icon }}</span>
                 <span class="w-100">{{ subItem.title }}</span>
@@ -154,12 +155,12 @@ const processRoute = (routeFn) => {
         </Dropdown>
         <button
           v-else
-          class="transition-quint-out w-100 flex radius-small flex-nowrap cursor-pointer flex-v-center"
+          class="ease-quint-out w-100 flex radius-small flex-nowrap cursor-pointer flex-v-center"
           @click="item.route ? (isPhone ? (stateSidebar = false) : null, route.path !== processRoute(item.route) ? router.push(processRoute(item.route)) : null) : null"
           :class="[
               horizontal ? 'pd-thin' : '',
               item.route && route.path === processRoute(item.route) ? theme === 'light' ? 'bg-light' : 'bg-dark' : '',
-              theme === 'light' ? 'hover-bg-light' : 'hover-bg-dark'
+              theme === 'light' ? 'hover:bg-light' : 'hover:bg-dark'
             ]"
         >
           <div v-if="!horizontal" class="w-100 flex-child-default w-max-big flex flex-center aspect-1x1">
@@ -167,7 +168,7 @@ const processRoute = (routeFn) => {
               v-if="item.iconComponent"
               :is="item.iconComponent"
               class="i-medium flex-child-default"
-              :fill="store.core.state.theme.darkmode || theme === 'dark' ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.25)'"
+              fill="rgba(var(--black), 0.25)"
             />
             <span
               v-if="!item.iconComponent "
@@ -178,7 +179,7 @@ const processRoute = (routeFn) => {
           </div>
 
           <span
-            class="transition-quint-out w-100 t-left t-medium"
+            class="ease-quint-out w-100 t-left fw-medium"
             :class="{ 'hidden': !stateSidebar && !horizontal, 'visible': stateSidebar || horizontal }"
           >
             {{ item.title }}
@@ -187,10 +188,10 @@ const processRoute = (routeFn) => {
           <span
             v-if="item.subItems && stateSidebar && !horizontal"
             class="mn-l-auto mn-r-small sidebar-dropdown-icon"
-            :class="{ 'rotate-180': isSectionExpanded(item.title) }"
+            :class="{ 'rotate-180deg': isSectionExpanded(item.title) }"
             @click.stop="toggleSection(item.title)"
           >
-             <IconChevronBottom :class="{ 'rotate-180 mn-t-micro-negative': isOpen }" :fill=" theme === 'dark' ? 'rgb(var(--white))': 'rgb(var(--black))'" class="i-small"/>
+             <IconChevronBottom :class="{ 'rotate-180deg mn-t-micro-negative': isOpen }" :fill=" theme === 'dark' ? 'rgb(var(--white))': 'rgb(var(--black))'" class="i-small"/>
           </span>
         </button>
         <transition
@@ -210,17 +211,17 @@ const processRoute = (routeFn) => {
               <a
                @click="subItem.route ? (isPhone ? (stateSidebar = false) : null, route.path !== processRoute(subItem.route) ? router.push(processRoute(subItem.route)) : null) : null"
                 href="#"
-                class="transition-quint-out flex flex-v-center flex-nowrap gap-thin pd-thin radius-small"
+                class="ease-quint-out flex flex-v-center flex-nowrap gap-thin pd-thin radius-small"
                 :class="[
                   subItem.route && route.path === processRoute(subItem.route) ? theme === 'light' ? 'bg-light' : 'bg-dark' : '',
-                    theme === 'light' ? 'hover-bg-light' : 'hover-bg-dark'
+                    theme === 'light' ? 'hover:bg-light' : 'hover:bg-dark'
                     ]"
               >
                 <component
                   v-if="subItem.iconComponent"
                   :is="subItem.iconComponent"
                   class="i-medium"
-                 :fill="store.core.state.theme.darkmode || theme === 'dark' ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.25)'"
+                  fill="rgba(var(--black), 0.25)"
                 />
                 <span v-else class="">{{ subItem.icon }}</span>
                 <span class="w-100">{{ subItem.title }}</span>
@@ -236,7 +237,7 @@ const processRoute = (routeFn) => {
 
 <style scoped>
 
-.rotate-180 {
+.rotate-180deg {
   transform: rotate(180deg);
 }
 

package/src/modules/core/views/components/partials/NavigationBar.vue

@@ -6,7 +6,7 @@
 			<svg 
 				v-if="!route.meta.title_hide"
 				@click="handleBackNavigation()" 
-				class="pos-absolute cursor-pointer i-medium pos-l-medium"
+				class="pos-absolute cursor-pointer i-medium pos-l-small"
 				width="12"
 				height="22"
 				viewBox="0 0 12 22"
@@ -25,13 +25,13 @@
 				  :theme="theme"
 				/>
 
-				<span v-else class="t-semi lh-semi h5 d-block" >
+				<span v-else class="fw-semi lh-semi h5 d-block" >
 					{{ formateText(store.core.state.navigation_bar.name || route.meta?.title?.[locale.toLowerCase()] || route.name) }}
 				</span>
 			</div>
 		</transition>
 
-		<div class="flex-nowrap flex gap-regular pos-absolute pos-r-medium">
+		<div class="flex-nowrap flex gap-regular pos-absolute pos-r-small">
 			<transition name="slideIn"  mode="out-in">
 				<Button
 					v-if="route.meta.title_hide || route.meta.showShopCart"

package/src/modules/core/views/components/partials/Sidebar.vue

@@ -86,7 +86,7 @@ router.beforeEach((to, from) => {
 <template>
   <aside
     data-sidebar
-    class="transition-quint-out w-min-0 o-hidden flex-child-default z-index-2  br-r br-solid  flex flex-column h-100"
+    class="ease-quint-out w-min-0 o-hidden flex-child-default z-index-2  br-r-1px  flex flex-column h-100"
     :class="[
       { 'mobile-opened': isManuallyOpened },
       stateSidebar
@@ -110,13 +110,13 @@ router.beforeEach((to, from) => {
     <slot name="footer"></slot>
     <div v-if="MOBILE_APP" @click="() => toggleSidebar()"  class="pos-relative">
       <div class="bg-light radius-medium pd-medium">
-        <p  class="t-medium t-black-transp-60">
+        <p  class="fw-medium t-black-transp-60">
           Close Menu
         </p>
       </div>
     </div>
     <div 
-      class="br-solid w-100 br-t"
+      class="w-100 br-t-1px"
       :class="{ 
         'pd-micro': !stateSidebar, 
         'pd-small': stateSidebar,
@@ -126,14 +126,14 @@ router.beforeEach((to, from) => {
     >
       <button
         @click="() => store.core.actions.toggleTheme()"
-        class="transition-quint-out flex w-100 flex-center radius-small cursor-pointer flex-nowrap"
+        class="ease-quint-out flex w-100 flex-center radius-small cursor-pointer flex-nowrap"
         :class="[
           stateSidebar ? 'pd-thin justify-between' : 'w-100 justify-center',
-          theme === 'light' ? 'hover-bg-light' : 'hover-bg-dark'
+          theme === 'light' ? 'hover:bg-light' : 'hover:bg-dark'
         ]"
       >
         <span
-          class="w-100 t-nowrap transition-quint-out  t-left t-medium mn-r-thin"
+          class="w-100 t-nowrap ease-quint-out  t-left fw-medium mn-r-thin"
           :class="{ 'hidden': !stateSidebar, 'visible': stateSidebar }"
         >
           Dark Mode

package/src/modules/core/views/components/sections/SectionPageTitle.vue

@@ -11,7 +11,7 @@
           v-if="action.to"
           :key="action.to"
           :to="action.to"
-          :class="action.class || 'radius-extra pd-small pd-r-medium pd-l-medium p-regular uppercase t-medium hover-scale-1 transition-ease cursor-pointer t-white bg-second flex-center flex'"
+          :class="action.class || 'radius-extra pd-small pd-r-medium pd-l-medium p-regular uppercase fw-medium hover:scale-[1.05] ease cursor-pointer t-white bg-second flex-center flex'"
         >
           {{ action.label }}
         </router-link>
@@ -19,7 +19,7 @@
         <button
           v-if="action.method"
           @click="action.method"
-          :class="action.class || 'radius-extra pd-thin uppercase t-medium hover-scale-1 transition-ease cursor-pointer t-white bg-second flex-center flex'"
+          :class="action.class || 'radius-extra pd-thin uppercase fw-medium hover:scale-[1.05] ease cursor-pointer t-white bg-second flex-center flex'"
         >
           {{ action.label }}
         </button>

package/src/modules/core/views/components/sections/filters/FilterCheckbox.vue

@@ -8,7 +8,7 @@
       :label="option.label"
       :value="option.value"
       mode="checkbox"
-      class="br-solid br-1px br-light pd-small radius-small mn-b-micro"
+      class="br-1px br-light pd-small radius-small mn-b-micro"
       @update:radio="emit('apply')"
     />
   </div>

package/src/modules/core/views/components/sections/filters/FilterDateRange.vue

@@ -8,7 +8,7 @@
       :key="option.value"
       @click="selectOption(option.value)"
       :class="{ 'bg-light': selectedOption === option.value }"
-      class="pd-small radius-small cursor-pointer hover-bg-light transition-all mn-b-micro"
+      class="pd-small radius-small cursor-pointer hover:bg-light ease mn-b-micro"
     >
       {{ option.label }}
     </div>
@@ -17,7 +17,7 @@
     <div
       @click="() => { showCalendar = true }"
       :class="{ 'bg-light': model }"
-      class="pd-small field-wrapper radius-small bg-light cursor-pointer hover-bg-light transition-all flex-v-center flex gap-thin"
+      class="pd-small field-wrapper radius-small bg-light cursor-pointer hover:bg-light ease flex-v-center flex gap-thin"
     >
       <IconCalendar class="i-medium" />
       <span>{{ dateRangeLabel }}</span>

package/src/modules/core/views/components/sections/filters/FilterPrice.vue

@@ -6,7 +6,7 @@
         type="number"
         v-model:field="localValue.min"
         placeholder="Min"
-        class="flex-1 bg-light pd-medium radius-small"
+        class="flex-child-1 bg-light pd-medium radius-small"
         @blur="updateValue"
       />
       <span class="t-small">—</span>
@@ -14,7 +14,7 @@
         type="number"
         v-model:field="localValue.max"
         placeholder="Max"
-        class="flex-1 bg-light pd-medium radius-small"
+        class="flex-child-1 bg-light pd-medium radius-small"
         @blur="updateValue"
       />
     </div>

package/src/modules/core/views/components/sections/filters/FilterRange.vue

@@ -7,7 +7,7 @@
         v-model:field="localValue.min"
         :placeholder="minPlaceholder"
         :label="label"
-        class="flex-1 bg-light pd-regular radius-small"
+        class="flex-child-1 bg-light pd-regular radius-small"
         @blur="updateValue"
       />
       <span class="t-small">—</span>
@@ -16,7 +16,7 @@
         v-model:field="localValue.max"
         :placeholder="maxPlaceholder"
         :label="label"
-        class="flex-1 bg-light pd-regular radius-small"
+        class="flex-child-1 bg-light pd-regular radius-small"
         @blur="updateValue"
       />
     </div>

package/src/modules/core/views/store/core.store.js

@@ -15,31 +15,6 @@ async function getAsyncLocalStorage() {
   return asyncLocalStorage;
 }
 
-// ============================================================================
-// HELPER FUNCTIONS
-// ============================================================================
-
-function invertColors(variableNames, originalColors, isDarkMode) {
-  variableNames.forEach(variableName => {
-    const baseColor = originalColors[variableName];
-    const colorArray = baseColor.split(',').map(Number);
-
-    let invertedColor;
-
-    if (variableName === '--white') {
-      invertedColor = colorArray.map(value => 255 - value / 1.075);
-    } else if (variableName === '--black') {
-      invertedColor = colorArray.map(value => 255 - value);
-    } else if (variableName === '--grey') {
-      invertedColor = colorArray.map(value => 255 - value * 2);
-    } else {
-      invertedColor = colorArray.map(value => 255 - value / 1.075);
-    }
-    // Устанавливаем новые значения переменных CSS
-    document.documentElement.style.setProperty(variableName, isDarkMode ? invertedColor.join(', ') : baseColor);
-  });
-}
-
 // ============================================================================
 // GLOBAL FUNCTIONS (используют useStore() для доступа к state)
 // ============================================================================
@@ -148,7 +123,7 @@ export function createStore() {
     search: null,
 
     theme: {
-      darkmode: false,
+      mode: 'system',   // 'light' | 'dark' | 'system'
     },
 
     navigation_bar: {
@@ -186,51 +161,52 @@ export function createStore() {
       state.loading = status;
     },
 
-    // Black/White Theme
-    async setTheme(isDarkMode) {
-      // Cache root element
-      if (!state.theme.rootElement) {
-        state.theme.rootElement = document.documentElement;
-      }
-      const root = state.theme.rootElement;
-
-      state.theme.darkmode = isDarkMode;
-
-      await Preferences.set({
-        key: 'darkmode',
-        value: JSON.stringify(state.theme.darkmode),
-      });
+    // Theme: 'light' | 'dark' | 'system'
+    async setTheme(mode) {
+      state.theme.mode = mode;
 
-      if (isDarkMode) {
-        root.classList.add('dark-theme');
+      // Cookie/Preferences ТОЛЬКО для явного выбора light/dark
+      // system — не сохраняем, пусть работает CSS media query
+      if (mode === 'light' || mode === 'dark') {
+        if (typeof document !== 'undefined') {
+          document.cookie = `theme=${mode}; path=/; max-age=31536000; SameSite=Lax`;
+        }
+        await Preferences.set({ key: 'theme', value: mode });
       } else {
-        root.classList.remove('dark-theme');
+        // system — удаляем cookie чтобы SSR не фиксировал тему
+        if (typeof document !== 'undefined') {
+          document.cookie = `theme=; path=/; max-age=0`;
+        }
+        await Preferences.remove({ key: 'theme' });
       }
 
-      const variableNames = ['--white', '--light', '--grey', '--dark', '--black'];
+      const root = document.documentElement;
 
-      // Проверяем, сохранены ли оригинальные цвета
-      if (!state.theme.originalColors) {
-        // Сохраняем оригинальные цвета один раз
-        state.theme.originalColors = {};
-        const computedStyle = getComputedStyle(root);
-        variableNames.forEach(variableName => {
-          state.theme.originalColors[variableName] = computedStyle.getPropertyValue(variableName).trim();
-        });
-      }
+      // Убираем старые атрибуты
+      root.classList.remove('dark-theme', 'light-theme');
+      root.removeAttribute('data-theme');
 
-      if (isDarkMode) {
-        invertColors(variableNames, state.theme.originalColors, isDarkMode);
+      if (mode === 'dark') {
+        root.classList.add('dark-theme');
+        root.setAttribute('data-theme', 'dark');
+        root.setAttribute('color-scheme', 'dark');
+      } else if (mode === 'light') {
+        root.classList.add('light-theme');
+        root.setAttribute('data-theme', 'light');
+        root.setAttribute('color-scheme', 'light');
       } else {
-        // Восстанавливаем оригинальные цвета батчем
-        variableNames.forEach(variableName => {
-          root.style.setProperty(variableName, state.theme.originalColors[variableName]);
-        });
+        // system - без классов, CSS media query сработает
+        root.setAttribute('color-scheme', 'light dark');
       }
+
     },
 
     toggleTheme() {
-      this.setTheme(!state.theme.darkmode);
+      // Прямое переключение между light и dark
+      const isDark = state.theme.mode === 'dark' ||
+        (state.theme.mode === 'system' && typeof window !== 'undefined' &&
+         window.matchMedia('(prefers-color-scheme: dark)').matches);
+      this.setTheme(isDark ? 'light' : 'dark');
     },
 
     add(array, item) {

package/src/modules/core/views/utils/vue-app-renderer.js

@@ -146,7 +146,7 @@ export function renderAndMountApp({ createApp, hooks = {} }) {
   return start();
 }
 
-export async function render({ url, cookies,  ssrContext, createApp}) {
+export async function render({ url, cookies, headers, ssrContext, createApp }) {
   // [LOADING 26] SSR render starting
   performance.mark('loading-26-start');
   console.log('[LOADING 26] SSR render starting...');
@@ -220,6 +220,36 @@ export async function render({ url, cookies,  ssrContext, createApp}) {
 
   // After render, ctx.modules will be populated with used module identifiers
   const html = await renderToString(app, ctx);
+
+  // Добавляем атрибуты темы через meta API перед renderSSRHead
+  let theme = cookies?.theme;
+  if (!theme) {
+    // Fallback на sec-ch-prefers-color-scheme если нет cookie
+    const prefersColorScheme = headers?.['sec-ch-prefers-color-scheme'];
+    theme = prefersColorScheme === 'dark' ? 'system-dark' : 'system';
+  }
+
+  const themeAttrs = {};
+  if (theme === 'dark') {
+    themeAttrs.class = 'dark-theme';
+    themeAttrs['data-theme'] = 'dark';
+    themeAttrs['color-scheme'] = 'dark';
+  } else if (theme === 'light') {
+    themeAttrs.class = 'light-theme';
+    themeAttrs['data-theme'] = 'light';
+    themeAttrs['color-scheme'] = 'light';
+  } else {
+    // system/system-dark - без класса, CSS media query сработает
+    themeAttrs['color-scheme'] = 'light dark';
+  }
+
+  meta.push({ htmlAttrs: themeAttrs });
+
+  // Синхронизируем store state с определённой темой для SSR
+  store.core.state.theme.mode = (theme === 'dark') ? 'dark'
+    : (theme === 'light') ? 'light'
+    : 'system';
+
   const payload = await renderSSRHead(meta, {});
   const initialState = await store.getInitialState();
 

package/src/modules/events/components/blocks/CardEvent.vue

@@ -47,31 +47,31 @@
     >
       
 			<h4
-      	class="mn-b-regular t-trim"
+      	class="mn-b-regular truncate"
       >
     		{{ event.name }}
     	</h4>
 
 
     	<p
-    		class="mn-b-medium p-regular t-trim-3"
+    		class="mn-b-medium p-regular line-clamp-3"
     	>
     		{{ event.description }}
     	</p>
 
       <slot></slot>
 <!-- 
-      <div v-if="event.status === 'draft'" class="pd-micro t-white uppercase t-semi p-small flex-center flex pd-r-small pd-l-small mn-l-thin w-min bg-second radius-extra">
+      <div v-if="event.status === 'draft'" class="pd-micro t-white uppercase fw-semi p-small flex-center flex pd-r-small pd-l-small mn-l-thin w-min bg-second radius-extra">
 				{{event.status}}
 			</div> -->
 
       <div
-      	class="flex-wrap mn-micro-negative flex-child-default gap-thin t-zero justify-start align-center t-trim-2"
+      	class="flex-wrap mn-micro-negative flex-child-default gap-thin t-zero justify-start align-center line-clamp-2"
       >
        	<span
        		v-if="event.date?.start"
           :key="index"
-          class="d-inline-flex mn-nano pd-thin radius-small p-regular t-medium bg-white"
+          class="d-inline-flex mn-nano pd-thin radius-small p-regular fw-medium bg-white"
         >
           {{ formattedDate }} | {{ formattedTimeRange }}
         </span>
@@ -79,7 +79,7 @@
         <span
           v-for="(chip, index) in event.tags"
           :key="index"
-          class="d-inline-flex mn-nano pd-thin radius-small p-regular t-medium bg-main"
+          class="d-inline-flex mn-nano pd-thin radius-small p-regular fw-medium bg-main"
         >
           {{ chip }}
         </span>

package/src/modules/events/components/blocks/CardEventShort.vue

@@ -24,19 +24,19 @@
     		class="order-2 mn-l-thin flex-v-center flex-nowrap flex"
     	>
 			<span
-		    	class="t-semi t-truncate uppercase"
+		    	class="fw-semi truncate uppercase"
 		    >
         	{{ event.name }}
 		    </span>
 		</div>
 
       <div
-      	class="order-1 flex-wrap mn-micro-negative flex-child-default gap-thin t-zero justify-start align-center t-trim-2"
+      	class="order-1 flex-wrap mn-micro-negative flex-child-default gap-thin t-zero justify-start align-center line-clamp-2"
       >
        	<span
        		v-if="event.date?.start"
           :key="index"
-          class="p-regular d-inline-flex p-medium t-medium mn-nano pd-thin radius-small bg-white"
+          class="p-regular d-inline-flex p-medium fw-medium mn-nano pd-thin radius-small bg-white"
         >
           {{ formattedDate }}
         </span>

package/src/modules/events/components/pages/EditEvent.vue

@@ -157,7 +157,7 @@
 
       
       <h5 v-if="selectedOrganization" class="mn-b-thin">Options:</h5>
-      <div v-if="selectedOrganization" class="mn-b-medium br-grey-transp-25 br-2px br-solid pd-small radius-big">
+      <div v-if="selectedOrganization" class="mn-b-medium br-grey-transp-25 br-2px pd-small radius-big">
         <Checkbox 
           :label="'Hide Author'"
           :radio="event.creator.hidden"