Merge pull request #78 from shopware/general-fixes

General fixes
shopware · Feb 5, 2024 · 1fa6b71 · 1fa6b71
2 parents c593bd6 + aedc3ec
commit 1fa6b71
Show file tree

Hide file tree

Showing 36 changed files with 574 additions and 56 deletions.
diff --git a/.vitepress/config.ts b/.vitepress/config.ts
@@ -78,7 +78,7 @@ export default defineConfigWithTheme<ThemeConfig>({
               items: [
                 { text: 'Typography', link: '/foundations/design/typography' },
                 { text: 'Colors', link: '/foundations/design/colors' },
-                { text: 'Elevation', link: '/foundations/design/elevation' }
+                { text: 'Images', link: '/foundations/design/images' }
               ]
             }
           ]

diff --git a/.vitepress/navigation.ts b/.vitepress/navigation.ts
@@ -19,13 +19,17 @@ const navigation = buildSidebarNav('./src/', [
         text: 'Tokens',
     },
     {
-        link: 'https://brand.shopware.com',
-        text: 'Brand',
+        link: '/meteor-components/',
+        text: 'Components',
     },
     {
         link: '/team/',
         text: 'Design at Shopware',
     },
+    {
+        link: 'https://brand.shopware.com',
+        text: 'Brand',
+    },
     resourcesMenu,
 ], [
     '/', // always have root sidebar

diff --git a/.vitepress/theme/custom.css b/.vitepress/theme/custom.css
@@ -9,7 +9,7 @@ span.font-setting-ss02 {
 }
 
 .main img {
-    border-radius: 8px;
+    @apply rounded-l;
 }
 
 .vp-doc > div > h1, h1.styled {
@@ -103,7 +103,10 @@ span.font-setting-ss02 {
         padding-right: 0;
         padding-top: 0px;
         padding-bottom: 0.25rem;
-        background-color: #fff!important;
+        background-color: #fff;
+        .dark & {
+            background: var(--vp-c-bg);
+        }
         }
 }
 
@@ -117,7 +120,7 @@ span.font-setting-ss02 {
 /* @todo move to global hub components */
 .btn.--contrast, .vp-doc .btn.--contrast {
     --btn-bg: #2D2E32;
-    height: 40px;
+    height: 42px;
     padding: 16px;
     color: #FFF;
 
@@ -199,4 +202,86 @@ span.font-setting-ss02 {
   }
 
 
+  .component-preview {
+    width: 100%;
+    @apply mt-[24px];
+    iframe {
+        border-radius: 12px 12px 0px 0px;
+        border: 1px solid #F0F3FF;
+        border-bottom: 0px;
+    }
+    .component-preview_edit {
+        background-color: #FAFBFE;
+        border-radius: 0px 0px 12px 12px;
+        padding: 6px 16px;
+        align-content: end;
+        @apply flex;
+        justify-content: flex-end;
+        border: 1px solid #F0F3FF;
+        border-top: 0px;
+        font-size: 14px;
+    }
+  }
+
+  .props-preview {
+    width: 100%;
+    @apply mt-[24px];
+    iframe {
+        border-radius: 12px;
+        border: 1px solid #F0F3FF;
+    }
+  }
+
+  /* Card Thumbnail */
+  .section-thumbnails {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    align-self: stretch;
+
+    &--card {
+        display: flex;
+        padding: 20px;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 8px;
+        flex: 1 0 0;
+        align-self: stretch;
+        border-radius: 12px;
+        border: 1px solid #F0F3FF;
+        background: #FAFBFE;
+
+        h3 {
+            color: #0A0D0F;
+            font-family: Inter;
+            font-size: 18px;
+            font-style: normal;
+            font-weight: 600;
+            line-height: normal;
+        }
+
+        p {
+            color: #64748B;
+            font-family: Inter;
+            font-size: 16px;
+            font-style: normal;
+            font-weight: 400;
+            line-height: 26px; /* 162.5% */
+            letter-spacing: 0.08px;
+            margin: 0px;
+        }
+
+        &--image {
+            align-self: stretch;
+            border-radius: 8px;
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            margin-bottom: 16px;
+            z-index: 2;
+        }
+    }
+}
+
+
 
diff --git a/src/components/banner/Contribute.vue b/src/components/banner/Contribute.vue
@@ -46,6 +46,9 @@ const props = defineProps({
     align-items: flex-start;
     gap: 8px;
     margin: 24px 0px;
+    .dark & {
+        filter: invert(1) hue-rotate(-180deg);
+    }
 
     h2 {
         color: #00296A !important;

diff --git a/src/components/banner/Cutdown.vue b/src/components/banner/Cutdown.vue
@@ -54,6 +54,7 @@ const props = defineProps({
     padding: 20px;
     border: 1px solid #F0F3FF;
 
+
     .cutdown__thumbnail {
         background-clip: padding-box;
         border: 1px solid #00000014;
@@ -63,6 +64,7 @@ const props = defineProps({
         overflow: hidden;
         padding: 0;
         position: relative;
+
     }
 
     p {

diff --git a/src/components/getstarted/HowToIntegrateInter.vue b/src/components/getstarted/HowToIntegrateInter.vue
@@ -0,0 +1,55 @@
+<template>
+    <div class="HowToIntegrateInter">
+      <div>
+      <h2 class="h-homepage">How to install Inter</h2>
+      <p>
+      Meteor uses Inter as the default typeface. It’s 100% free to use in all kinds of projects — both personal and commercial.
+        Inter is an free, open-source sans-serif typeface designed by Swedish designer/programmer Rasmus Andersson. It was designed to work well on screens as a UI font and features a large x-height. The family is available in nine weights with matching italics, as well as a variable font version.</p>
+      <picture>
+        <source media="(prefers-color-scheme: dark)" srcset="/foundations/getstarted/[email protected] 4x">
+
+        <img decoding="async" loading="lazy" alt="A sketch of the Accessibility icon. The image is tinted in shades of green." srcset="/foundations/getstarted/foundations-getstarted-inter--download.png 4x" src="/foundations/getstarted/foundations-getstarted-inter--download.png" width="100%" height="auto">
+      </picture>
+      <p>Figma also gives you access to a catalog of Google Web Fonts, which you can use in Figma without having to install anything.</p>
+      <a href="https://rsms.me/inter/">Download Inter -></a>
+    </div>
+    </div>
+  </template>
+
+  <style lang="scss">
+  .HowToIntegrateInter {
+    @apply grid gap-12;
+    gap: 12px;
+    grid-template-columns: 100%;
+    h2 {
+        border-top: 0px;
+    }
+    ul.HowToIntegrateInter_links {
+      @apply flex p-0 m-0 mt-5 gap-12 gap-y-4 flex-wrap;
+      list-style-type: none;
+  
+      li {
+        @apply p-0 m-0;
+        & + li {
+          @apply mt-0;
+        }
+      }
+      a {
+        font-feature-settings: 'ss02' on;
+        font-family: Inter;
+        font-size: 1rem;
+        font-style: normal;
+        font-weight: 500;
+        line-height: normal;
+      }
+    }
+  
+    &_subgrid {
+      @apply grid gap-20 md:grid-cols-2;
+      gap: 12px;
+    }
+  }
+  </style>
+
+  <script setup lang="ts">
+  </script>
diff --git a/src/components/interaction/Label.vue b/src/components/interaction/Label.vue
@@ -1,11 +1,16 @@
 <!-- @todo move to global hub components -->
 <template>
     <div class="label">
-        <span>Soon</span>     
+        <span><slot name="label">Soon</slot></span>     
     </div>
   </template>
 
 <script setup>
+const props = defineProps({
+    label: {
+      type: String
+    }
+  });
 
 </script>
 

diff --git a/src/components/interaction/UsageBlock.vue b/src/components/interaction/UsageBlock.vue
@@ -8,7 +8,7 @@
           </div>
           <h3 class="correct">Do</h3>
         </div>
-        <slot name="correct"></slot>
+        <p><slot name="correct"></slot></p>
       </div>
 
       <div class="incorrect-block incorrect md:max-w-6/12" v-if="hasIncorrectSlot">
@@ -18,7 +18,7 @@
           </div>
           <h3 class="incorrect">Don't</h3>
         </div>
-        <slot name="incorrect"></slot>
+        <p><slot name="incorrect"></slot></p>
       </div>
     </div>
     </div>
@@ -120,13 +120,17 @@
       align-items: flex-start;
       gap: 16px;
   
+  
       &.correct {
         display: flex;
         padding: 24px;
         flex-direction: column;
         align-items: flex-start;
         gap: 16px;
         flex: 1 0 0;
+        .dark & {
+        color: #fff;
+         }
       }
       &.incorrect {
         display: flex;
@@ -135,7 +139,6 @@
         align-items: flex-start;
         gap: 16px;
         flex: 1 0 0;
-
       }
     }
   }

diff --git a/src/components/team/SwagFigmaCursor.vue b/src/components/team/SwagFigmaCursor.vue
@@ -38,10 +38,10 @@ const props = defineProps({
     }
   });
 const cursors = ([
-  { id: 1, name: 'Dennis', bgcolor: '#A694FF', color: '#1C0049', top: '160px', right: '20%', animation: '30s infinite hovering-1' },
+  { id: 1, name: 'Dennis', bgcolor: '#A694FF', color: '#1C0049', top: '175px', right: '20%', animation: '30s infinite hovering-1' },
   { id: 2, name: 'Julian', bgcolor: '#0870FF', color: '#fff', top: '335px', right: '8%', animation: '23s infinite hovering-2' },
-  { id: 3, name: 'Jessica', bgcolor: '#57D998', color: '#001F0F', top: '369px', right: '332px', animation: '25s infinite hovering-3' },
-  { id: 4, name: 'Thong', bgcolor: '#FBAF18', color: '#001F0F', top: '252px', right: '390px', animation: '18s infinite hovering-4' }
+  { id: 3, name: 'Jessica', bgcolor: '#57D998', color: '#001F0F', top: '469px', right: '382px', animation: '25s infinite hovering-3' },
+  { id: 4, name: 'Thong', bgcolor: '#FBAF18', color: '#001F0F', top: '322px', right: '290px', animation: '18s infinite hovering-4' }
 ])
 </script>
 
@@ -65,6 +65,10 @@ font-weight: 600;
 .join-us-cursor-3,
 .join-us-cursor-4 {
     position: absolute;
+    z-index: 10;
+    .dark & {
+        filter: invert(1) hue-rotate(-180deg);
+    }
 }
 
 .join-us-cursor-1 .join-us-name,
@@ -81,7 +85,7 @@ transform: translate3d(0px, 0px, 0px);
 }
 
 10% {
-transform: translate3d(10px, 10px, 0px);
+transform: translate3d(20px, 20px, 0px);
 }
 
 20% {

diff --git a/src/components/team/SwagTeam.vue b/src/components/team/SwagTeam.vue
@@ -39,7 +39,7 @@ const breakpoints = {
 }
  </script>
 <template>
-<div class="sticker">
+<!--<div class="sticker">
   <div draggable="true" class="icr-sticker">
     <svg width="173" height="107" viewBox="0 0 173 107" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g filter="url(#filter0_d_3144_24478)">
@@ -407,8 +407,8 @@ const breakpoints = {
 </svg>
 
   </div>
-</div>
-    <h2 class="h-homepage md:max-w-4/12">Creation is our craft. <br>Deep thinking is the foundation of our success.</h2>
+</div>-->
+    <h2 class="h-homepage md:max-w-4/12">Meet the team</h2>
     <div class="mt-[80px] carousel--container">
     <Carousel :wrap-around="true" :breakpoints="breakpoints" :autoplay="2800" pauseAutoplayOnHover="true">
       <Slide v-for="slide in slides" :key="slide.id">
@@ -418,7 +418,7 @@ const breakpoints = {
             <picture>
               <source media="(prefers-color-scheme: dark)" :srcset="slide.portrait" type="image/png">
 
-              <img decoding="async" :alt="slide.name" :src="slide.portrait" :srcset="slide.portrait" width="100%" height="auto">
+              <img class="class" decoding="async" :alt="slide.name" :src="slide.portrait" :srcset="slide.portrait" width="100%" height="auto">
             </picture>
           </div>
           <div class="carousel__item-right">
@@ -435,7 +435,7 @@ const breakpoints = {
             <picture>
               <source media="(prefers-color-scheme: dark)" :srcset="slide.portrait" type="image/png">
 
-              <img decoding="async" :alt="slide.name" :src="slide.portrait" :srcset="slide.portrait" width="100%" height="auto">
+              <img class="class" decoding="async" :alt="slide.name" :src="slide.portrait" :srcset="slide.portrait" width="100%" height="auto">
             </picture>
           </div>
           <div class="carousel__item-right">
@@ -473,7 +473,7 @@ const breakpoints = {
   }
   p {
     text-align: left;
-    color: #1E293B;
+    color: var(--c-text);
     font-family: Inter;
     font-size: 20px;
     font-style: normal;
@@ -482,7 +482,7 @@ const breakpoints = {
     letter-spacing: 0.6px;
     margin: 0;
     h3 {
-      color: #1E293B;
+      color: var(--c-text);
       font-family: Poppins;
       font-size: 38px;
       font-style: normal;
@@ -554,7 +554,7 @@ const breakpoints = {
 }
 
 .carousel--container:before {
-        background: linear-gradient(90deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%);
+        background: linear-gradient(90deg, var(--vp-c-bg) 0%, rgba(255, 255, 255, 0.00) 100%);
         width: 100px;
         height: 280px;
         position: absolute;
@@ -564,7 +564,7 @@ const breakpoints = {
         z-index: 10;
 }
 .carousel--container:after {
-        background: linear-gradient(-90deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%);
+        background: linear-gradient(-90deg, var(--vp-c-bg) 0%, rgba(255, 255, 255, 0.00) 100%);
         width: 100px;
         height: 280px;
         position: absolute;