@opendesign-plus-test/components 0.0.1-rc.50 → 0.0.1-rc.51

package/src/components/OThemeSwitcher.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { computed } from 'vue';
-import { OIcon, OSwitch, OIconSun, OIconMoon } from '@opensig/opendesign';
+import { Component, computed } from 'vue';
+import { OIcon, OSwitch } from '@opensig/opendesign';
 import { useScreen } from '@opendesign-plus/composables';
 
 import IconSun from '~icons/components/icon-sun.svg';
@@ -11,7 +11,8 @@ export interface OThemeSwitcherPropsT {
   type?: 'auto' | 'common' | 'mobile';
   lightValue?: string;
   darkValue?: string;
-  disabled?: boolean;
+  lightIcon?: Component;
+  darkIcon?: Component;
 }
 
 export interface OThemeSwitcherEmitsT {
@@ -24,7 +25,8 @@ const props = withDefaults(defineProps<OThemeSwitcherPropsT>(), {
   type: 'auto',
   lightValue: 'light',
   darkValue: 'dark',
-  disabled: false,
+  lightIcon: IconSun,
+  darkIcon: IconMoon,
 });
 
 const emit = defineEmits<OThemeSwitcherEmitsT>();
@@ -35,7 +37,7 @@ const switchVal = computed({
   get() {
     return props.theme;
   },
-  set(val: string) {
+  set(val) {
     emit('update:theme', val);
     emit('change', val);
   },
@@ -46,17 +48,13 @@ const isCommon = computed(() => {
 });
 
 const toggleTheme = () => {
-  if (props.disabled) {
-    return;
-  }
-
   switchVal.value = switchVal.value === props.lightValue ? props.darkValue : props.lightValue;
 };
 </script>
 
 <template>
   <div class="o-theme-switcher">
-    <div v-if="isCommon" class="o-theme-switcher-common" :class="{ disabled }" @click="toggleTheme">
+    <div v-if="isCommon" class="o-theme-switcher-common" @click="toggleTheme">
       <OIcon class="o-theme-icon">
         <IconMoon v-if="switchVal === lightValue" />
         <IconSun v-else />
@@ -64,18 +62,16 @@ const toggleTheme = () => {
     </div>
 
     <div v-else class="o-theme-switcher-mobile">
-      <OSwitch v-model="switchVal" class="o-theme-switch" :checked-value="lightValue" :unchecked-value="darkValue" :disabled="disabled">
-        <template #inactive>
-          <OIconMoon />
-        </template>
-        <template #active>
-          <OIconSun />
+      <OSwitch v-model="switchVal" class="o-theme-switch" :checked-value="darkValue" :unchecked-value="lightValue">
+        <template #on>
+          <OIcon class="o-theme-icon">
+            <IconSun />
+          </OIcon>
         </template>
         <template #off>
-          <OIconSun />
-        </template>
-        <template #on>
-          <OIconMoon />
+          <OIcon class="o-theme-icon">
+            <IconMoon />
+          </OIcon>
         </template>
       </OSwitch>
     </div>
@@ -84,49 +80,29 @@ const toggleTheme = () => {
 
 <style lang="scss" scoped>
 .o-theme-switcher-common {
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
   display: flex;
   align-items: center;
-  width: var(--o-icon_size-m);
-  height: var(--o-icon_size-m);
-  font-size: var(--o-icon_size-m);
-
-  @include respond-to('pad_h') {
-    width: var(--o-icon_size-s);
-    height: var(--o-icon_size-s);
-    font-size: var(--o-icon_size-s);
-  }
-}
-
-.o-theme-switcher-common:not(.disabled) {
-  cursor: pointer;
 
   .o-theme-icon {
-    color: var(--o-color-info2);
+    font-size: 24px;
+    color: var(--o-color-info1);
 
     @include hover {
-      color: var(--o-color-primary2);
-      background-color: var(--o-color-control2-light);
-      border-radius: var(--o-radius-xs);
-    }
-
-    &:active {
-      color: var(--o-color-primary3);
+      color: var(--o-color-primary1);
     }
   }
 }
 
-.o-theme-switcher-common.disabled {
-  cursor: not-allowed;
-
-  .o-theme-icon {
-    color: var(--o-color-info4);
-  }
-}
-
 .o-theme-switcher-mobile {
   .o-theme-switch {
-    --switch-handler-color: var(--o-color-white);
-    --switch-color: var(--o-color-info4);
+    background-color: var(--o-color-control1-light);
+
+    .o-theme-icon {
+      color: var(--o-color-white);
+    }
   }
 }
 </style>

package/src/components/activity/OActivityApproval.vue

@@ -569,8 +569,6 @@ const reviewActions = computed<DialogActionT[]>(() => {
 
 <style lang="scss">
 .o-activity-table {
-  --activity-card-radius: var(--o-radius-xs);
-  --activity-input-radius: var(--o-radius-xs);
   .table-wrapper {
     .el-table {
       border-top: none;
@@ -697,7 +695,7 @@ const reviewActions = computed<DialogActionT[]>(() => {
     @include text1;
 
     .el-table__header-wrapper {
-      border-radius: var(--activity-card-radius) var(--activity-card-radius) 0 0;
+      border-radius: 12px 12px 0 0;
 
       .el-table__cell {
         padding: 12px 0 11px;
@@ -727,7 +725,7 @@ const reviewActions = computed<DialogActionT[]>(() => {
   }
 
   .o-textarea {
-    --_box-radius: var(--activity-input-radius);
+    --_box-radius: 16px;
   }
 
   .dialog-footer {
@@ -758,7 +756,7 @@ const reviewActions = computed<DialogActionT[]>(() => {
 
     .o-collapse {
       padding: 0;
-      border-radius: var(--activity-card-radius);
+      border-radius: 12px;
 
       .o-collapse-item {
         --collapse-item-header-padding: 8px 0 12px;
@@ -828,12 +826,11 @@ const reviewActions = computed<DialogActionT[]>(() => {
 
 <style lang="scss">
 .handle-dialog-approval {
-  --activity-card-radius: var(--o-radius-xs);
   --dlg-width: 450px;
-  --dlg-radius: var(--activity-card-radius);
+  --dlg-radius: var(--o-radius-xs);
   @include respond('<=pad_v') {
     width: 100%;
-    --dlg-radius: var(--activity-card-radius) var(--activity-card-radius) 0 0;
+    --dlg-radius: var(--o-radius-xs) var(--o-radius-xs) 0 0;
   }
 }
 
@@ -844,7 +841,6 @@ const reviewActions = computed<DialogActionT[]>(() => {
 }
 .review-dialog {
   --dlg-width: 690px;
-  --activity-input-radius: var(--o-radius-xs);
 
   .o-form {
     width: 450px;
@@ -856,7 +852,7 @@ const reviewActions = computed<DialogActionT[]>(() => {
 
     .o-textarea {
       width: 100%;
-      --_box-radius: var(--activity-input-radius);
+      --_box-radius: var(--o-radius-xs);
     }
   }
 

package/src/components/activity/OActivityForm.vue

@@ -444,8 +444,6 @@ defineExpose({
 
 <style lang="scss">
 .o-activity-form {
-  --activity-card-radius: var(--o-radius-xs);
-  --activity-input-radius: var(--o-radius-xs);
   .form-wrapper {
     & > .o-form-item {
       max-width: 620px;
@@ -482,7 +480,7 @@ defineExpose({
     }
 
     .o-textarea {
-      --_box-radius: var(--activity-input-radius);
+      --_box-radius: var(--o-radius-xs);
       width: 100%;
     }
 
@@ -491,7 +489,7 @@ defineExpose({
     }
 
     .el-input__wrapper {
-      border-radius: var(--activity-input-radius);
+      border-radius: var(--o-radius-xs);
     }
 
     .time-config {
@@ -499,7 +497,7 @@ defineExpose({
       background-color: color-mix(in srgb, var(--o-color-control2-light) 40%, transparent);
       padding: var(--o-gap-5);
       padding-right: calc(var(--o-gap-4) + var(--o-gap-5));
-      border-radius: var(--activity-card-radius);
+      border-radius: var(--o-radius-xs);
       @include respond('<=pad_v') {
         padding: var(--o-gap-4);
       }

package/src/components/activity/{OActivityMyCalendar.vue → OMyActivityCalendar.vue}

@@ -21,6 +21,7 @@ import dayjs from 'dayjs';
 import { useDebounceFn } from '@vueuse/core';
 
 import IconCopy from '~icons/meeting/icon-copy.svg';
+import IconEvent from '~icons/meeting/icon-event.svg';
 
 import type { ActivityItemT, MyActivityCalendarPropsT, ParamsItemT } from './types';
 import { useScreen } from '@opendesign-plus/composables';
@@ -29,12 +30,10 @@ import { useActivityConfig } from './composables/useActivityConfig';
 import { CalendarDataType, MeetingItemT, PageParamsT } from '../meeting/types';
 import OMeetingDetail from '@/components/meeting/components/OMeetingDetail.vue';
 import { useI18n, Locales } from '@/i18n';
-import { useMeetingConfig } from '@/components/meeting/composables/useMeetingConfig.ts';
 
 const { t, locale } = useI18n();
 const isZh = computed(() => locale.value === Locales.ZH);
 const { statusMap, activityTypeMap } = useActivityConfig();
-const { getConfig } = useMeetingConfig();
 
 const formatMonthYear = (date: string | Date) => {
   const d = dayjs(date || new Date());
@@ -546,9 +545,6 @@ const deleteActions = computed<DialogActionT[]>(() => {
                 clickable: allDateList.includes(data.day),
                 approved: calcIfApproved(data.day),
               }"
-              :style="{
-                '--dot-bg': `${getConfig(CalendarDataType.EVENTS, 'color')}`
-              }"
             >
               <div class="date-cell-text">
                 {{ Number(data.day.split('-')[2]) }}
@@ -606,14 +602,9 @@ const deleteActions = computed<DialogActionT[]>(() => {
                   >
                     <template #title>
                       <div class="item-header-left">
-                        <div
-                          class="act-icon"
-                          :style="{
-                            backgroundColor: `${getConfig(CalendarDataType.EVENTS, 'color')}`
-                          }"
-                        >
+                        <div class="act-icon">
                           <OIcon>
-                            <component :is="getConfig(CalendarDataType.EVENTS, 'icon')" />
+                            <IconEvent />
                           </OIcon>
                         </div>
                         <div class="header-info">
@@ -643,12 +634,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
                       </div>
                       <div class="item-header-right"
                            v-if="row.content_url && !row.is_delete && [3,4,5,6].includes(row.status)">
-                        <OLink
-                          :hover-underline="false"
-                          v-if="row.content_url"
-                          :href="row.content_url"
-                          target="_blank"
-                          rel="noopener noreferrer">
+                        <OLink v-if="row.content_url" :href="row.content_url" target="_blank" rel="noopener noreferrer">
                           {{ t('meeting.activityDetail') }}
                           <template #suffix>
                             <OIcon>
@@ -657,7 +643,6 @@ const deleteActions = computed<DialogActionT[]>(() => {
                           </template>
                         </OLink>
                         <OLink
-                          :hover-underline="false"
                           v-if="
                           row.register_url && (
                             row.status === 3 ||
@@ -750,8 +735,6 @@ const deleteActions = computed<DialogActionT[]>(() => {
 <style lang="scss">
 
 .o-my-activity-calendar {
-  --activity-card-radius: var(--o-radius-xs);
-  --activity-cell-radius: var(--o-radius-xs);
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -870,9 +853,9 @@ const deleteActions = computed<DialogActionT[]>(() => {
 
     .el-calendar {
       min-height: 460px;
-      height: 100%;
+      height: calc(100% - 54px);
       background-color: color-mix(in srgb, var(--o-color-control2-light) 40%, transparent);
-      border-radius: var(--activity-card-radius);
+      border-radius: var(--o-radius-xs);
 
       .el-calendar__header {
         border-bottom: 1px solid var(--o-color-control4);
@@ -901,7 +884,6 @@ const deleteActions = computed<DialogActionT[]>(() => {
 
       .el-calendar__body {
         .el-calendar-table {
-          display: table;
           width: 100%;
 
           th {
@@ -947,7 +929,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
             .date-cell-text {
               font-size: 14px;
               line-height: 36px;
-              border-radius: var(--activity-cell-radius);
+              border-radius: var(--o-radius-xs);
               background-color: var(--o-color-control2-light);
               border: 1px solid transparent;
             }
@@ -999,7 +981,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
               }
 
               &.approved::after {
-                background-color: var(--dot-bg);
+                background-color: rgba(var(--o-cyan-6));
               }
 
               &.expired::after {
@@ -1212,14 +1194,18 @@ const deleteActions = computed<DialogActionT[]>(() => {
       }
 
       .height-placeholder {
+        height: 0;
+        transition: margin var(--o-easing-standard) var(--o-duration-s);
+      }
+
+      .o-collapse-item-expanded + .height-placeholder {
         height: var(--o-gap-4);
       }
 
       .o-collapse-item {
         padding: var(--o-gap-4) var(--o-gap-5);
-        padding-bottom: calc(var(--o-gap-5) - var(--o-gap-4));
         border-top: none;
-        border-radius: var(--activity-card-radius);
+        border-radius: var(--o-radius-xs);
         transition: margin var(--o-easing-standard) var(--o-duration-s);
         --copy-display: none;
         --icon-size: 24px;
@@ -1228,9 +1214,6 @@ const deleteActions = computed<DialogActionT[]>(() => {
         }
 
         &:hover {
-          .title-text {
-            color: var(--o-color-primary1);
-          }
           @include respond('>pad_v') {
             --copy-display: inline-flex;
           }
@@ -1241,20 +1224,19 @@ const deleteActions = computed<DialogActionT[]>(() => {
         }
 
         &.o-collapse-item-expanded {
-          border-bottom: none;
-          background-color: color-mix(in srgb, var(--o-color-control2-light) 40%, transparent);
           @include respond('<=pad_v') {
             --copy-display: inline-flex;
           }
+        }
 
-          .o-collapse-item-header {
-            border-bottom: 1px solid var(--o-color-control4);
-          }
+
+        &.o-collapse-item-expanded {
+          background-color: color-mix(in srgb, var(--o-color-control2-light) 40%, transparent);
         }
       }
 
       .o-collapse-item-header {
-        border-bottom: none;
+        border-bottom: 1px solid var(--o-color-control4);
         padding-top: 0;
         padding-bottom: var(--o-gap-4);
         display: flex;
@@ -1343,7 +1325,7 @@ const deleteActions = computed<DialogActionT[]>(() => {
 
                 .o-tag {
                   margin-left: 8px;
-                  --tag-radius: var(--activity-cell-radius);
+                  --tag-radius: 4px;
                   font-weight: 500;
                   padding: 0 8px;
                   height: 24px;
@@ -1386,7 +1368,6 @@ const deleteActions = computed<DialogActionT[]>(() => {
                 color: var(--o-color-info3);
                 display: flex;
                 align-items: center;
-                font-weight: 400;
                 @include tip1;
 
                 .date-range {
@@ -1405,7 +1386,6 @@ const deleteActions = computed<DialogActionT[]>(() => {
             gap: var(--o-gap-4);
             margin-top: var(--o-gap-2);
             width: 100%;
-            font-weight: 400;
 
             .o-link {
               font-size: 14px;
@@ -1429,7 +1409,6 @@ const deleteActions = computed<DialogActionT[]>(() => {
             height: 18px;
             width: 18px;
             display: var(--copy-display);
-            color: var(--o-color-info1);
             @include respond('phone') {
               bottom: var(--o-gap-2);
               transform: revert;
@@ -1504,9 +1483,8 @@ const deleteActions = computed<DialogActionT[]>(() => {
 
 <style lang="scss">
 .handle-dialog-active {
-  --activity-card-radius: var(--o-radius-xs);
   width: 450px;
-  --dlg-radius: var(--activity-card-radius);
+  --dlg-radius: var(--o-radius-xs);
 
   .o-dlg-header {
     margin-bottom: var(--o-gap-5);

package/src/components/activity/index.ts

@@ -1,6 +1,6 @@
 import _OActivityForm from './OActivityForm.vue';
 import _OActivityApproval from './OActivityApproval.vue';
-import _OActivityMyCalendar from './OActivityMyCalendar.vue';
+import _OMyActivityCalendar from './OMyActivityCalendar.vue';
 import type { App } from 'vue';
 
 
@@ -14,11 +14,11 @@ const OActivityApproval = Object.assign(_OActivityApproval, {
     app.component('OActivityApproval', _OActivityApproval);
   },
 });
-const OActivityMyCalendar = Object.assign(_OActivityMyCalendar, {
+const OMyActivityCalendar = Object.assign(_OMyActivityCalendar, {
   install(app: App) {
-    app.component('OActivityMyCalendar', OActivityMyCalendar);
+    app.component('OMyActivityCalendar', _OMyActivityCalendar);
   },
 });
 
-export { OActivityForm, OActivityApproval, OActivityMyCalendar };
+export { OActivityForm, OActivityApproval, OMyActivityCalendar };
 export * from './types';

package/src/components/events/OEventsApply.vue

@@ -67,7 +67,6 @@ defineProps<EventsApplyPropsT>();
 
 <style lang="scss">
 .o-events-apply {
-  --events-card-radius: var(--o-radius-xs);
   width: 100%;
   // 移动端时间线序号
   .timeline-number {
@@ -127,7 +126,7 @@ defineProps<EventsApplyPropsT>();
 
     .step-item {
       background: var(--o-color-fill2);
-      border-radius: var(--events-card-radius);
+      border-radius: var(--o-radius-xs);
       display: flex;
       flex-direction: column; // 垂直排列子元素
       --idx-size: 20px;

package/src/components/events/OEventsCalendar.vue

@@ -236,11 +236,9 @@ const getIcon = (item: CalendarItemT) => {
 
 <style lang="scss">
 .o-events-calendar {
-  --events-card-radius: var(--o-radius-xs);
-  --events-name-radius: var(--o-radius-xs);
   .month-list {
     display: flex;
-    border-radius: var(--events-card-radius) var(--events-card-radius) 0 0;
+    border-radius: var(--o-radius_control-l) var(--o-radius_control-l) 0 0;
     background-color: var(--o-color-control2-light);
     color: var(--o-color-info1);
 
@@ -261,12 +259,12 @@ const getIcon = (item: CalendarItemT) => {
 
   .o-collapse {
     --collapse-padding: 0;
-    --collapse-radius: 0 0 var(--events-card-radius) var(--events-card-radius);
+    --collapse-radius: 0 0 var(--o-radius_control-l) var(--o-radius_control-l);
     @include respond('pad_v') {
-      --collapse-radius: var(--events-card-radius);
+      --collapse-radius: var(--o-radius_control-l);
     }
     @include respond('phone') {
-      --collapse-radius: var(--events-card-radius);
+      --collapse-radius: var(--o-radius_control-l);
     }
 
     .o-collapse-item {
@@ -495,7 +493,7 @@ const getIcon = (item: CalendarItemT) => {
         color: var(--o-color-info1);
         min-height: 32px;
         padding: 2px var(--o-gap-2);
-        border-radius: var(--events-name-radius);
+        border-radius: 4px;
         word-break: normal;
         overflow-wrap: anywhere;
         background: linear-gradient(to right, rgba(var(--bg-color), 0.06) 0%, rgba(var(--bg-color), 0.2) 100%), var(--o-color-fill2); // 底层实色背景遮住分割线

package/src/components/events/OEventsList.vue

@@ -186,15 +186,13 @@ const list = computed(() => {
 
 <style lang="scss">
 .o-events-list {
-  --events-card-radius: var(--o-radius-xs);
-  --events-tag-radius: var(--o-radius-xs);
   .filter-wrapper {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
     justify-content: space-between;
     background-color: var(--o-color-fill2);
-    border-radius: var(--events-card-radius);
+    border-radius: var(--o-radius-xs);
     padding: var(--o-gap-5) var(--o-gap-6);
     gap: var(--o-gap-3) var(--o-gap-2);
     @include text1;
@@ -223,7 +221,7 @@ const list = computed(() => {
       .o-toggle {
         --toggle-size: 32px;
         --toggle-padding: 3px 15px;
-        --toggle-radius: var(--events-tag-radius);
+        --toggle-radius: 4px;
         max-height: 32px;
         --toggle-bg-color: var(--o-color-fill1);
         --toggle-bg-color-hover: var(--o-color-control2-light);
@@ -318,7 +316,7 @@ const list = computed(() => {
           position: absolute;
           top: var(--o-gap-3);
           right: var(--o-gap-3);
-          border-radius: var(--events-tag-radius);
+          border-radius: var(--o-radius-xs);
           @include respond('<=pad_v') {
             --tag-padding: var(--o-gap-1);
           }
@@ -370,7 +368,7 @@ const list = computed(() => {
     }
 
     .event-card {
-      border-radius: var(--events-card-radius);
+      border-radius: var(--o-radius-xs);
       color: rgb(var(--o-white));
       background-size: cover;
       background-repeat: no-repeat;

package/src/components/meeting/OMeetingCalendar.vue

@@ -402,14 +402,11 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
 </template>
 <style lang="scss">
 .o-meeting-calendar {
-  --meeting-card-radius: var(--o-radius-xs);
-  --meeting-input-radius: var(--o-radius-xs);
-  --meeting-cell-radius: var(--o-radius-xs);
 
   .o-select {
     flex-grow: 1;
     max-width: 320px;
-    --select-radius: var(--meeting-input-radius);
+    --select-radius: var(--o-radius-xs);
   }
 
   .el-calendar-table {
@@ -420,7 +417,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
 
   .calendar-body {
     display: flex;
-    border-radius: var(--meeting-card-radius);
+    border-radius: var(--o-radius-xs);
     background-color: var(--o-color-fill2);
     overflow: hidden;
     @include respond('<=pad_v') {
@@ -436,7 +433,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
         width: 100%;
         flex-direction: column;
         background-color: var(--o-color-fill2);
-        border-radius: var(--meeting-card-radius);
+        border-radius: var(--o-radius-xs);
       }
 
       .el-calendar__header {
@@ -551,13 +548,13 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
             }
 
             th:first-child {
-              border-top-left-radius: var(--meeting-cell-radius);
-              border-bottom-left-radius: var(--meeting-cell-radius);
+              border-top-left-radius: var(--o-radius-xs);
+              border-bottom-left-radius: var(--o-radius-xs);
             }
 
             th:last-child {
-              border-top-right-radius: var(--meeting-cell-radius);
-              border-bottom-right-radius: var(--meeting-cell-radius);
+              border-top-right-radius: var(--o-radius-xs);
+              border-bottom-right-radius: var(--o-radius-xs);
             }
           }
           tr:last-child {
@@ -587,7 +584,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
 
         .out-box {
           position: relative;
-          border-radius: var(--meeting-cell-radius);
+          border-radius: var(--o-radius-xs);
           padding: 8px 12px;
           width: 100%;
           height: 100%;
@@ -712,7 +709,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
                 height: 24px;
                 width: 40px;
                 background-color: var(--o-color-control3-light);
-                border-radius: var(--meeting-cell-radius);
+                border-radius: var(--o-radius-l);
                 border: 1px solid var(--o-color-primary1);
               }
             }
@@ -748,7 +745,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
               transform: translate(-50%, -50%);
               height: 24px;
               width: 40px;
-              border-radius: var(--meeting-cell-radius);
+              border-radius: var(--o-radius-l);
               z-index: -1;
             }
           }
@@ -765,7 +762,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
         padding-top: 16px;
         background-color: var(--o-color-fill2);
         width: 100%;
-        border-radius: var(--meeting-card-radius);
+        border-radius: var(--o-radius-xs);
       }
       @include respond('phone') {
 
@@ -783,7 +780,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
           margin: 16px 16px 12px;
           padding: 7px 12px;
           justify-content: center;
-          border-radius: var(--meeting-card-radius);
+          border-radius: var(--o-radius-xs);
           background-color: var(--o-color-control4-light);
           @include text2;
         }