Improve FileDrop View

packages/design-system/src/components/OcButton/OcButton.vue

@@ -209,8 +209,8 @@ export default defineComponent({
     background-color: transparent;
     border-style: none;
     color: $color;
-    font-size: var(--oc-font-size-medium);
-    font-weight: normal;
+    font-size: inherit;
+    font-weight: inherit;
     min-height: 0;
     padding: 0;
 

packages/design-system/src/styles/theme/_variables.scss

@@ -28,5 +28,12 @@ $weights: (
   "black": $oc-font-weight-black
 );
 
+$breakpoints: (
+  "s": $oc-breakpoint-small-default,
+  "m": $oc-breakpoint-medium-default,
+  "l": $oc-breakpoint-large-default,
+  "xl": $oc-breakpoint-xlarge
+);
+
 $global-control-height: 15px;
 $global-border-width: 2px;

packages/design-system/src/styles/theme/oc-position.scss

@@ -1,3 +1,44 @@
+.oc-inset-0,
+.oc-inset-x-0 {
+  right:0;
+  left:0
+}
+
+.oc-inset-0,
+.oc-inset-y-0
+{
+  top:0;
+  bottom:0
+}
+
+.oc-top-0 {
+  top:0
+}
+
+.oc-right-0 {
+  right:0
+}
+
+.oc-bottom-0 {
+  bottom:0
+}
+
+.oc-left-0 {
+  left:0
+}
+
+@each $directionKey, $directionValues in $directions {
+  .oc-#{$directionKey} {
+    @each $sizeKey, $sizeValue in $sizes {
+      &-#{$sizeKey} {
+        @each $direction in $directionValues {
+          #{$direction}: $sizeValue !important;
+        }
+      }
+    }
+  }
+}
+
 [class*="oc-float-"] {
   max-width: 100%;
 }

packages/design-system/src/styles/theme/oc-spacing.scss

@@ -14,10 +14,6 @@ $directives: ("m": "margin", "p": "padding");
               #{$directiveValue}-#{$direction}: $sizeValue !important;
             }
           }
-
-          &-rm {
-            #{$directiveValue}-#{$direction}: 0 !important;
-          }
         }
       }
     }
@@ -27,6 +23,48 @@ $directives: ("m": "margin", "p": "padding");
         #{$directiveValue}: $sizeValue !important;
       }
     }
+  }
+}
+
+// Add responsive spacing
+@each $breakpointKey, $breakpointValue in $breakpoints {
+  @media (min-width: $breakpointValue) {
+    @each $directiveKey, $directiveValue in $directives {
+      .oc-#{$directiveKey} {
+        @each $sizeKey, $sizeValue in $sizes {
+          &-#{$sizeKey}\@#{$breakpointKey} {
+            #{$directiveValue}: $sizeValue !important;
+          }
+        }
+
+        @each $directionKey, $directionValues in $directions {
+          &#{$directionKey} {
+            @each $direction in $directionValues {
+              @each $sizeKey, $sizeValue in $sizes {
+                &-#{$sizeKey}\@#{$breakpointKey} {
+                  #{$directiveValue}-#{$direction}: $sizeValue !important;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+// Add classes to remove spacing
+@each $directiveKey, $directiveValue in $directives {
+  .oc-#{$directiveKey} {
+    @each $directionKey, $directionValues in $directions {
+      &#{$directionKey} {
+        @each $direction in $directionValues {
+          &-rm {
+            #{$directiveValue}-#{$direction}: 0 !important;
+          }
+        }
+      }
+    }
 
     &-rm {
       #{$directiveValue}: 0 !important;

packages/design-system/src/styles/theme/oc-text.scss

@@ -9,6 +9,10 @@ p {
   color: var(--oc-color-text-default);
 }
 
+p {
+  line-height: 1.625;
+}
+
 html * {
   font-family: var(--oc-font-family);
 }

packages/design-system/src/tokens/ods/font.yaml

@@ -17,22 +17,22 @@ font:
       value: 1.29rem
   weight:
     default:
-      value: '400'
+      value: 400 !important
     thin:
-      value: '100'
+      value: 100 !important
     extralight:
-      value: '200'
+      value: 200 !important
     light:
-      value: '300'
+      value: 300 !important
     normal:
-      value: '400'
+      value: 400 !important
     medium:
-      value: '500'
+      value: 500 !important
     semibold:
-      value: '600'
+      value: 600 !important
     bold:
-      value: '700'
+      value: 700 !important
     extrabold:
-      value: '800'
+      value: 800 !important
     black:
-      value: '900'
+      value: 900 !important

packages/web-app-files/src/components/AppBar/Upload/ResourceUpload.vue

@@ -1,9 +1,13 @@
 <template>
   <div>
-    <oc-button :class="btnClass" justify-content="left" appearance="raw" @click="triggerUpload">
-      <oc-resource-icon :resource="{ extension: '', isFolder }" size="medium" />
-      <span :id="uploadLabelId">{{ buttonLabel }}</span>
-    </oc-button>
+    <slot :triggerUpload="triggerUpload" :uploadLabelId="uploadLabelId" >
+      <div>
+        <oc-button :class="btnClass" justify-content="left" appearance="raw" @click="triggerUpload">
+          <oc-resource-icon :resource="{ extension: '', isFolder }" size="medium" />
+          <span :id="uploadLabelId">{{ buttonLabel }}</span>
+        </oc-button>
+      </div>
+    </slot>
     <input
       :id="inputId"
       ref="input"
@@ -84,9 +88,16 @@ export default defineComponent({
 })
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .upload-input-target {
   position: absolute;
   left: -99999px;
 }
+
+button {
+  color: var(--oc-color-swatch-primary-default);
+  font-weight: 600;
+
+
+}
 </style>