@opendesign-plus-test/components 0.0.1-rc.46 → 0.0.1-rc.47

package/src/components/meeting/components/OMeetingPlaybackVideo.vue

@@ -652,12 +652,12 @@ defineExpose({
 
       .vjs-progress-holder {
         margin: 0;
-        background: rgba(var(--o-mixedgray-1), 0.3);
+        background: rgba(var(--o-grey-1), 0.3);
       }
 
       .vjs-load-progress {
         div {
-          background: rgba(var(--o-mixedgray-1), 0.5);
+          background: rgba(var(--o-grey-1), 0.5);
         }
       }
 
@@ -724,7 +724,7 @@ defineExpose({
     background-repeat: no-repeat;
     background-size: cover;
     border: 0.5px solid rgba(var(--o-white), 0.6);
-    background-color: rgba(var(--o-mixedgray-1), 0.2);
+    background-color: rgba(var(--o-grey-1), 0.2);
 
     .vjs-icon-placeholder::before {
       content: none;
@@ -733,8 +733,8 @@ defineExpose({
 
   @include hover {
     .vjs-big-play-button {
-      border: 0.5px solid rgba(var(--o-mixedgray-1), 0.6);
-      background-color: rgba(var(--o-mixedgray-1), 0.2);
+      border: 0.5px solid rgba(var(--o-grey-1), 0.6);
+      background-color: rgba(var(--o-grey-1), 0.2);
     }
   }
 }

package/src/components/meeting/components/OSigMeetingAside.vue

@@ -84,17 +84,17 @@ const changeMonth = (step: number) => {
   display: flex;
   flex-direction: column;
   border-right: 1px solid var(--o-color-control4);
-  @include respond-to('<=pad') {
+  @include respond('<=pad') {
     padding: var(--o-gap-4);
     border-right: none;
   }
-  @include respond-to('phone') {
+  @include respond('phone') {
     padding: 16px;
     .title {
       margin-bottom: var(--o-gap-2);
     }
   }
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     width: 100%;
   }
 
@@ -112,7 +112,7 @@ const changeMonth = (step: number) => {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
 
-      @include respond-to('<=pad_v') {
+      @include respond('<=pad_v') {
         display: flex;
       }
 
@@ -185,11 +185,11 @@ const changeMonth = (step: number) => {
     }
   }
 
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     .day-item {
     }
   }
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     .day-item {
       width: min(128px, calc((100% - var(--o-gap-2)) / 2));
     }

package/src/draft/Banner.vue

@@ -128,7 +128,7 @@ onMounted(() => {
     }
   }
 
-  @include respond-to('pad_h') {
+  @include respond('pad_h') {
     height: 180px;
 
     .banner-title {
@@ -141,7 +141,7 @@ onMounted(() => {
     }
   }
 
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     display: none;
   }
 }
@@ -176,7 +176,7 @@ onMounted(() => {
     }
   }
 
-  @include respond-to('pad_h') {
+  @include respond('pad_h') {
     height: 220px;
 
     .banner-title {
@@ -189,7 +189,7 @@ onMounted(() => {
     }
   }
 
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     height: 120px;
 
     .banner-title {
@@ -234,7 +234,7 @@ onMounted(() => {
     }
   }
 
-  @include respond-to('pad_h') {
+  @include respond('pad_h') {
     height: 320px;
 
     .banner-title {
@@ -247,7 +247,7 @@ onMounted(() => {
     }
   }
 
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     height: 184px;
 
     .banner-title {

package/src/draft/ButtonCards.vue

@@ -96,7 +96,7 @@ const getAction = (action: OperationAction) => {
     margin-left: var(--grid-column-gutter);
   }
 
-  @include respond-to("phone") {
+  @include respond("phone") {
     --card-header-text-size: 16px;
     --card-header-text-height: 24px;
     --card-content-text-size: 14px;

package/src/draft/Feature.vue

@@ -37,7 +37,7 @@ const props = defineProps<{
     row-gap: var(--o3-gap-7);
     border-radius: var(--o3-radius-l);
 
-    @include respond-to('phone') {
+  @include respond('phone') {
         gap: 0;
         display: flex;
         white-space: nowrap;
@@ -62,7 +62,7 @@ const props = defineProps<{
         background-color: rgba(0, 0, 0, 0.1);
         width: 1px;
 
-        @include respond-to('<=pad_v') {
+      @include respond('<=pad_v') {
             top: 16px;
             height: 36px;
         }
@@ -79,13 +79,13 @@ const props = defineProps<{
         .feature-content {
             max-width: 288px;
 
-            @include respond-to('<=laptop') {
+          @include respond('<=laptop') {
                 max-width: 252px;
             }
         }
     }
 
-    @include respond-to('phone') {
+  @include respond('phone') {
         &::after {
             display: none;
         }
@@ -98,7 +98,7 @@ const props = defineProps<{
     display: inline-block;
     max-width: 320px;
 
-    @include respond-to('phone') {
+  @include respond('phone') {
         flex: 0 0 auto;
         width: 25vw;
         padding: 0 24px;
@@ -117,7 +117,7 @@ const props = defineProps<{
     margin-bottom: var(--o3-gap-2);
     color: var(--o-color-info1);
 
-    @include respond-to('phone') {
+  @include respond('phone') {
         white-space: pre-wrap;
 
         @include tip2;

package/src/draft/Footer.vue

@@ -176,7 +176,7 @@ $color: #fff;
     .atom-logo {
       height: 32px;
       margin-top: 12px;
-      @include respond-to('<=pad_v') {
+      @include respond('<=pad_v') {
         margin-top: 16px;
         height: 30px;
       }
@@ -186,7 +186,7 @@ $color: #fff;
   .footer-content {
     @include tip1;
     background: url('@/assets/category/footer/footer-bg.png') no-repeat bottom center;
-    @include respond-to('<=pad_v') {
+    @include respond('<=pad_v') {
       background: url('@/assets/category/footer/footer-bg-mo.png') no-repeat bottom center;
     }
     .quick-nav {
@@ -194,7 +194,7 @@ $color: #fff;
       display: flex;
       justify-content: space-between;
       max-width: 1140px;
-      @include respond-to('<=pad_v') {
+      @include respond('<=pad_v') {
         display: none;
       }
       .category {
@@ -229,7 +229,7 @@ $color: #fff;
       @include tip2;
       //TODO: 颜色变量
       border-bottom: 1px solid rgba(229, 229, 229, 0.12);
-      @include respond-to('<=pad_v') {
+      @include respond('<=pad_v') {
         flex-direction: column;
         padding-bottom: 16px;
         .friendship-link-box {
@@ -239,7 +239,7 @@ $color: #fff;
       .friendship-link-title {
         color: var(--o-color-white);
         margin-right: 38px;
-        @include respond-to('<=pad') {
+        @include respond('<=pad') {
           margin-right: 24px;
           min-width: 48px;
         }
@@ -248,7 +248,7 @@ $color: #fff;
         white-space: nowrap;
         &:not(:last-of-type) {
           margin-right: 24px;
-          @include respond-to('<=pad') {
+          @include respond('<=pad') {
             margin-right: 12px;
           }
         }
@@ -264,7 +264,7 @@ $color: #fff;
       justify-content: space-between;
       padding: 8px 0 32px;
       position: relative;
-      @include respond-to('<=pad_v') {
+      @include respond('<=pad_v') {
         margin: 0 auto;
         padding: 12px 0 24px;
         flex-direction: column;
@@ -284,7 +284,8 @@ $color: #fff;
     .show-mo {
       display: none;
     }
-    @include respond-to('<=pad_v') {
+
+    @include respond('<=pad_v') {
       text-align: center;
       margin: 16px 0;
       .show-pc {
@@ -306,11 +307,11 @@ $color: #fff;
     display: flex;
     gap: var(--o-gap-2);
 
-    @include respond-to('<=pad') {
+    @include respond('<=pad') {
       flex-direction: column;
       gap: 6px;
     }
-    @include respond-to('<=pad_v') {
+    @include respond('<=pad_v') {
       margin-top: 4px;
       gap: 4px;
     }
@@ -338,7 +339,8 @@ $color: #fff;
     span {
       color: rgba(255, 255, 255, 0.6);
     }
-    @include respond-to('<=pad_v') {
+
+    @include respond('<=pad_v') {
       margin-top: 4px;
     }
   }
@@ -353,7 +355,8 @@ $color: #fff;
     .footer-option-item {
       align-items: center;
     }
-    @include respond-to('<=pad_v') {
+
+    @include respond('<=pad_v') {
       order: -1;
     }
   }
@@ -400,7 +403,8 @@ $color: #fff;
             transform: translateX(-50%);
             display: block;
           }
-          @include respond-to('<=pad_v') {
+
+          @include respond('<=pad_v') {
             display: block;
             position: initial;
             background: none;
@@ -419,17 +423,18 @@ $color: #fff;
             display: block;
           }
         }
-        @include respond-to('pad_h') {
+        @include respond('pad_h') {
           height: 18px;
         }
-        @include respond-to('<=pad_v') {
+        @include respond('<=pad_v') {
           height: auto;
           > img {
             display: none;
           }
         }
       }
-      @include respond-to('<=pad_v') {
+
+      @include respond('<=pad_v') {
         justify-content: space-between;
       }
     }
@@ -446,11 +451,11 @@ $color: #fff;
         padding: 0 14px;
         background-color: #2b2b2f;
         border-radius: var(--o-radius-xs);
-        @include respond-to('pad_h') {
+        @include respond('pad_h') {
           height: 26px;
           padding: 0 8px;
         }
-        @include respond-to('<=pad_v') {
+        @include respond('<=pad_v') {
           height: 26px;
           padding: 0 8px;
         }
@@ -458,10 +463,11 @@ $color: #fff;
           object-fit: cover;
         }
       }
-      @include respond-to('pad_h') {
+
+      @include respond('pad_h') {
         margin-left: 32px;
       }
-      @include respond-to('<=pad_v') {
+      @include respond('<=pad_v') {
         justify-content: center;
         display: flex;
         text-align: center;
@@ -474,7 +480,8 @@ $color: #fff;
           padding: 0 9px;
           height: 20px;
         }
-        @include respond-to('<=pad') {
+
+        @include respond('<=pad') {
           display: flex;
           flex-wrap: wrap;
           text-align: center;
@@ -497,7 +504,7 @@ $color: #fff;
   .footer {
     .footer-content {
       .inner {
-        @include respond-to('<=pad_v') {
+        @include respond('<=pad_v') {
           margin: 0 auto;
           max-width: fit-content;
           padding: 14px 0 24px;

package/src/draft/HorizontalAnchor.vue

@@ -54,7 +54,7 @@ useIntersectionObserver(target, ([entry]) => {
   background-color: var(--o-color-control2-light);
   @include text1;
 
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     top: 48px;
     height: 54px;
   }
@@ -67,7 +67,7 @@ useIntersectionObserver(target, ([entry]) => {
     margin: 0 auto;
     height: 68px;
 
-    @include respond-to('<=pad_v') {
+    @include respond('<=pad_v') {
       height: 54px;
     }
 
@@ -119,10 +119,10 @@ useIntersectionObserver(target, ([entry]) => {
   height: 48px;
   backdrop-filter: blur(10px);
   z-index: 10;
-  background-color: rgba($color: var(--o-mixedgray-1), $alpha: 0.25);
+  background-color: rgba($color: var(--o-grey-1), $alpha: 0.25);
   @include text1;
 
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     display: none;
   }
 

package/src/draft/ItemSwiper.vue

@@ -68,7 +68,7 @@ defineProps({
 .swiper-list {
   display: flex;
   animation: marque 100s linear infinite;
-  @include respond-to('>phone') {
+  @include respond('>phone') {
     @include hover {
       animation-play-state: paused;
     }
@@ -124,7 +124,7 @@ defineProps({
   }
 }
 
-@include respond-to('phone') {
+@include respond('phone') {
   .swiper-card {
     width: 160px;
     margin-right: 12px;

package/src/draft/Logo.vue

@@ -110,15 +110,15 @@ const col = computed(() => {
   &+.partner-swiper {
     margin-top: 24px;
 
-    @include respond-to('laptop') {
+    @include respond('laptop') {
       margin-top: 20px;
     }
 
-    @include respond-to('pad_h') {
+    @include respond('pad_h') {
       margin-top: 16px;
     }
 
-    @include respond-to('<=pad_v') {
+    @include respond('<=pad_v') {
       margin-top: 12px;
     }
   }

package/src/draft/LogoCard.vue

@@ -64,11 +64,11 @@ const columns = computed(() => {
         height: 100%;
     }
 
-    @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
         height: 72px;
     }
 
-    @include respond-to('phone') {
+  @include respond('phone') {
         height: 68px;
     }
 }

package/src/draft/MultiCard.vue

@@ -81,7 +81,7 @@ const coverRatio = computed(() => {
         margin-right: 0;
     }
 
-    @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
         :deep(.o-card-cover-img) {
             height: 120px;
         }

package/src/draft/MultiIconCard.vue

@@ -64,7 +64,7 @@ const gridTemplateColumns = computed(() => {
 }
 .o-card {
   --card-content-color: var(--o-color-info3);
-  @include respond-to("phone") {
+  @include respond("phone") {
     --card-header-text-size: 16px;
     --card-header-text-height: 24px;
     --card-content-text-size: 14px;

package/src/draft/OInfoCard.vue

@@ -78,7 +78,7 @@ watch(
   background-size: 100% auto;
   background-repeat: no-repeat;
   position: relative;
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     background-size: auto var(--bg-height);
     height: auto;
     &.has-bg-img {
@@ -92,7 +92,7 @@ watch(
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    @include respond-to('<=pad_v') {
+    @include respond('<=pad_v') {
       padding-bottom: var(--padding-bottom);
     }
   }
@@ -137,7 +137,7 @@ watch(
     }
   }
 
-  @include respond-to('>pad_v') {
+  @include respond('>pad_v') {
     :deep(.o-link-main) {
       overflow: hidden;
       text-overflow: ellipsis;
@@ -163,7 +163,7 @@ watch(
     }
   }
 
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     border-top: 1px solid #edeff2;
     margin: 8px -12 px 0 -12px;
     padding: 0 12px;

package/src/draft/Section.vue

@@ -122,11 +122,11 @@ const props = withDefaults(defineProps<SectionPropsT>(), {
     color: var(--o-color-info2);
     @include text1;
 
-    @include respond-to('pad-laptop') {
+    @include respond('pad-laptop') {
       margin-top: 8px;
     }
 
-    @include respond-to('phone') {
+    @include respond('phone') {
       margin-top: 12px;
       text-align: center;
     }
@@ -151,11 +151,11 @@ const props = withDefaults(defineProps<SectionPropsT>(), {
 
     margin-top: 32px;
 
-    @include respond-to('<=laptop') {
+    @include respond('<=laptop') {
       margin-top: 16px;
     }
 
-    @include respond-to('phone') {
+    @include respond('phone') {
       margin-top: 12px;
     }
   }

package/src/draft/SingleTabCard.vue

@@ -76,7 +76,7 @@ defineProps({
 }
 
 .single-card {
-    @include respond-to('<=pad_v') {
+    @include respond('<=pad_v') {
         :deep(.o-figure-img) {
             height: 184px;
         }

package/src/draft/SliderCard.vue

@@ -67,13 +67,14 @@ const props = defineProps({
       border-radius: 6px;
     }
   }
-  @include respond-to('pc_s') {
+
+  @include respond('pc_s') {
     height: 300px;
   }
-  @include respond-to('<=laptop') {
+  @include respond('<=laptop') {
     height: 280px;
   }
-  @include respond-to('<=pad_v') {
+  @include respond('<=pad_v') {
     --slide-width: calc(100vw - 64px);
     width: calc(var(--slide-gap) + var(--slide-width));
     height: 184px;

package/vite.config.ts

@@ -75,7 +75,7 @@ export default defineConfig(({ mode }) => {
         scss: {
           charset: false,
           additionalData: `
-          @use "@opendesign-plus/styles/mixin/screen.scss" as *;
+          @use '@opensig/opendesign/es/_styles/mixin.scss' as *;
           @use "@opendesign-plus/styles/mixin/font.scss" as *;
           @use "@opendesign-plus/styles/mixin/common.scss" as *;
           @use "@opendesign-plus/styles/mixin/gap.scss" as *;