POC for MaterialUI

docker-compose.yml

@@ -69,6 +69,8 @@ x-ocis-server: &ocis-service
     OCM_OCM_SHARE_PROVIDER_INSECURE: 'true'
     OCM_OCM_STORAGE_PROVIDER_INSECURE: 'true'
 
+    WEB_UI_THEME_PATH: './packages/web-runtime/themes/theme.json'
+
   extra_hosts:
     - host.docker.internal:${DOCKER_HOST:-host-gateway}
     - ocis.owncloud.test:${DOCKER_HOST:-host-gateway}

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

@@ -98,7 +98,7 @@ export default defineComponent({
     width: 18px !important;
 
     svg {
-      fill: var(--oc-color-swatch-primary-contrast) !important;
+      fill: var(--oc-color-onPrimary) !important;
       height: 18px !important;
       max-height: 18px !important;
       max-width: 18px !important;

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

@@ -45,9 +45,9 @@ export default defineComponent({
 <style lang="scss">
 .oc-avatar-count {
   align-items: center;
-  background-color: var(--oc-color-swatch-passive-default);
+  background-color: var(--oc-color-secondary);
   border-radius: 50%;
-  color: var(--oc-color-text-inverse);
+  color: var(--oc-color-inverseOnSurface);
   display: flex;
   justify-content: center;
 }

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

@@ -52,7 +52,7 @@ export default defineComponent({
     iconColor: {
       type: String,
       required: false,
-      default: 'var(--oc-color-text-inverse)'
+      default: 'var(--oc-color-inverseOnSurface)'
     },
     /**
      * Fill-type that should be used for the icon
@@ -77,7 +77,7 @@ export default defineComponent({
     background: {
       type: String,
       required: false,
-      default: 'var(--oc-color-swatch-passive-default)'
+      default: 'var(--oc-color-secondary)'
     },
     /**
      * Accessibility label used as alt. Use only in case the avatar is used alone.

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

@@ -181,7 +181,7 @@ export default defineComponent({
     .oc-avatar-count,
     .oc-avatar + .oc-avatar-item,
     .oc-avatar-item + .oc-avatar-item {
-      border: 1px solid var(--oc-color-text-inverse);
+      border: 1px solid var(--oc-color-inverseOnSurface);
       margin-left: -25px;
     }
   }

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

@@ -61,7 +61,7 @@
         />
         <oc-icon
           v-if="index !== displayItems.length - 1"
-          color="var(--oc-color-text-default)"
+          color="var(--oc-color-onSurface)"
           name="arrow-right-s"
           class="oc-mx-xs"
           fill-type="line"
@@ -73,7 +73,7 @@
             :aria-label="contextMenuLabel"
             appearance="raw"
           >
-            <oc-icon name="more-2" color="var(--oc-color-text-default)" />
+            <oc-icon name="more-2" color="var(--oc-color-onSurface)" />
           </oc-button>
           <oc-drop
             drop-id="oc-breadcrumb-contextmenu"
@@ -342,13 +342,9 @@ export default defineComponent({
 .oc-breadcrumb {
   overflow: visible;
   &-item-dragover {
-    transition:
-      background 0.06s,
-      border 0s 0.08s,
-      border-color 0s,
-      border-width 0.06s;
-    background-color: var(--oc-color-background-highlight);
-    box-shadow: 0 0 0 5px var(--oc-color-background-highlight);
+    transition: background 0.06s, border 0s 0.08s, border-color 0s, border-width 0.06s;
+    background-color: var(--oc-color-surfaceBright);
+    box-shadow: 0 0 0 5px var(--oc-color-surfaceBright);
     border-radius: 5px;
   }
   &-item-text {
@@ -396,12 +392,12 @@ export default defineComponent({
     }
 
     > :nth-child(n + 2)::before {
-      color: var(--oc-color-text-default);
+      color: var(--oc-color-onSurface);
       display: inline-block;
     }
 
     > :last-child > span {
-      color: var(--oc-color-text-default);
+      color: var(--oc-color-onSurface);
     }
   }
 
@@ -411,7 +407,7 @@ export default defineComponent({
     button:first-of-type,
     span:first-of-type {
       font-size: var(--oc-font-size-medium);
-      color: var(--oc-color-text-default);
+      color: var(--oc-color-onSurface);
       display: inline-block;
       vertical-align: sub;
       line-height: normal;

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

@@ -391,7 +391,7 @@ export default defineComponent({
 
   &-passive {
     @include oc-button-variation(
-      var(--oc-color-swatch-passive-default),
+      var(--oc-color-secondary),
       var(--oc-color-swatch-passive-hover),
       var(--oc-color-swatch-passive-muted),
       var(--oc-color-swatch-passive-contrast)
@@ -400,40 +400,40 @@ export default defineComponent({
     &-outline {
       &:focus:not([disabled]),
       &:hover:not([disabled]) {
-        color: var(--oc-color-swatch-passive-default);
+        color: var(--oc-color-secondary);
         background-color: var(--oc-color-swatch-passive-hover-outline);
         border-color: var(--oc-color-swatch-passive-hover-outline);
 
         .oc-icon > svg {
-          fill: var(--oc-color-swatch-passive-default);
+          fill: var(--oc-color-secondary);
         }
       }
     }
   }
 
   &-brand {
     @include oc-button-variation(
-      var(--oc-color-swatch-brand-default),
-      var(--oc-color-swatch-brand-hover),
-      var(--oc-color-swatch-brand-muted),
-      var(--oc-color-swatch-brand-contrast)
+      var(--oc-color-primary),
+      var(--oc-color-primaryContainer),
+      var(--oc-color-primaryFixedDim),
+      var(--oc-color-background)
     );
   }
 
   &-primary {
     @include oc-button-variation(
-      var(--oc-color-swatch-primary-default),
-      var(--oc-color-swatch-primary-hover),
-      var(--oc-color-swatch-primary-muted),
-      var(--oc-color-swatch-primary-contrast)
+      var(--oc-color-primary),
+      var(--oc-color-onPrimaryContainer),
+      var(--oc-color-primaryContainer),
+      var(--oc-color-onPrimary)
     );
 
     &-filled {
-      color: var(--oc-color-swatch-primary-contrast) !important;
+      color: var(--oc-color-onPrimary) !important;
       @include oc-background-primary-gradient;
 
       span > svg {
-        fill: var(--oc-color-swatch-primary-contrast) !important;
+        fill: var(--oc-color-onPrimary) !important;
       }
     }
   }
@@ -449,25 +449,25 @@ export default defineComponent({
 
   &-warning {
     @include oc-button-variation(
-      var(--oc-color-swatch-warning-default),
-      var(--oc-color-swatch-warning-hover),
-      var(--oc-color-swatch-warning-muted),
-      var(--oc-color-swatch-warning-contrast)
+      var(--oc-color-error),
+      var(--oc-color-errorContainer),
+      var(--oc-color-onErrorContainer),
+      var(--oc-color-onError)
     );
   }
 
   &-danger {
     @include oc-button-variation(
-      var(--oc-color-swatch-danger-default),
+      var(--oc-color-error),
       var(--oc-color-swatch-danger-hover),
       var(--oc-color-swatch-danger-muted),
-      var(--oc-color-swatch-danger-contrast)
+      var(--oc-color-onError)
     );
 
     &-filled:hover {
-      color: var(--oc-color-swatch-danger-default) !important;
+      color: var(--oc-color-error) !important;
       span > svg {
-        fill: var(--oc-color-swatch-danger-default) !important;
+        fill: var(--oc-color-error) !important;
       }
     }
   }
@@ -480,7 +480,7 @@ export default defineComponent({
   &-group {
     display: inline-flex;
     flex-flow: row wrap;
-    outline: 1px solid var(--oc-color-swatch-passive-default);
+    outline: 1px solid var(--oc-color-secondary);
     outline-offset: -1px;
     border-radius: 5px;
 
@@ -502,12 +502,12 @@ export default defineComponent({
 
         &:first-of-type {
           // TODO: Implement color variations if button group should be used again
-          border-left: 1px solid var(--oc-color-swatch-primary-default);
+          border-left: 1px solid var(--oc-color-primary);
         }
 
         &:last-of-type {
           // TODO: Implement color variations if button group should be used again
-          border-right: 1px solid var(--oc-color-swatch-primary-default);
+          border-right: 1px solid var(--oc-color-primary);
         }
       }
     }

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

@@ -178,7 +178,7 @@ export default defineComponent({
   }
 
   &:focus-visible {
-    outline: var(--oc-color-swatch-primary-default) auto 1px;
+    outline: var(--oc-color-primary) auto 1px;
   }
 
   &-checked,

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

@@ -183,8 +183,8 @@ export default defineComponent({
     const to = this.target
       ? document.querySelector(this.target)
       : this.toggle
-        ? document.querySelector(this.toggle)
-        : this.$el.previousElementSibling
+      ? document.querySelector(this.toggle)
+      : this.$el.previousElementSibling
     const content = this.$refs.drop
 
     if (!to || !content) {
@@ -274,18 +274,18 @@ export default defineComponent({
     button:not([role='switch']) {
       box-sizing: border-box;
       padding: var(--oc-space-small);
-      color: var(--oc-color-swatch-passive-default);
+      color: var(--oc-color-secondary);
 
       &:focus:not([disabled]),
       &:hover:not([disabled]) {
-        background-color: var(--oc-color-background-hover);
+        background-color: var(--oc-color-surfaceContainerHigh);
 
         text-decoration: none !important;
         border-radius: 5px;
       }
 
       &:hover span {
-        color: var(--oc-color-swatch-brand-hover) !important;
+        color: var(--oc-color-primaryContainer) !important;
       }
 
       span {

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

@@ -18,9 +18,9 @@ export default defineComponent({
 <style lang="scss">
 .oc-dropzone {
   align-items: center;
-  background-color: var(--oc-color-background-default);
-  border: 1px dashed var(--oc-color-swatch-primary-muted);
-  color: var(--oc-color-text-default);
+  background-color: var(--oc-color-background);
+  border: 1px dashed var(--oc-color-primaryContainer);
+  color: var(--oc-color-onSurface);
   display: flex;
   font-size: 1.5rem;
   justify-content: center;

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

@@ -76,7 +76,7 @@ export default defineComponent({
     resize: none;
 
     label {
-      color: var(--oc-color-text-muted);
+      color: var(--oc-color-onSurfaceVariant);
     }
   }
 

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

@@ -14,7 +14,7 @@
         :class="filterActive ? 'oc-filter-check-icon-active' : 'oc-filter-check-icon-inactive'"
         name="check"
         size="small"
-        color="var(--oc-color-text-inverse)"
+        color="var(--oc-color-inverseOnSurface)"
       />
       <span
         class="oc-text-truncate oc-filter-chip-label"
@@ -44,7 +44,7 @@
       :aria-label="$gettext('Clear filter')"
       @click="$emit('clearFilter')"
     >
-      <oc-icon name="close" size="small" color="var(--oc-color-text-inverse)" />
+      <oc-icon name="close" size="small" color="var(--oc-color-inverseOnSurface)" />
     </oc-button>
   </div>
 </template>
@@ -134,9 +134,9 @@ export default defineComponent({
 .oc-filter-chip {
   &-button.oc-pill {
     align-items: center;
-    background-color: var(--oc-color-background-default) !important;
-    color: var(--oc-color-text-muted) !important;
-    border: 1px solid var(--oc-color-text-muted);
+    background-color: var(--oc-color-background) !important;
+    color: var(--oc-color-onSurfaceVariant) !important;
+    border: 1px solid var(--oc-color-onSurfaceVariant);
     box-sizing: border-box;
     display: inline-flex;
     gap: var(--oc-space-xsmall);
@@ -149,8 +149,8 @@ export default defineComponent({
   }
   &-button-selected.oc-pill,
   &-button-selected.oc-pill:hover {
-    background-color: var(--oc-color-swatch-primary-default) !important;
-    color: var(--oc-color-text-inverse) !important;
+    background-color: var(--oc-color-primary) !important;
+    color: var(--oc-color-inverseOnSurface) !important;
     border-top-left-radius: 99px !important;
     border-bottom-left-radius: 99px !important;
     border-top-right-radius: 0px !important;
@@ -159,8 +159,8 @@ export default defineComponent({
   }
   &-clear,
   &-clear:hover {
-    background-color: var(--oc-color-swatch-primary-default) !important;
-    color: var(--oc-color-text-inverse) !important;
+    background-color: var(--oc-color-primary) !important;
+    color: var(--oc-color-inverseOnSurface) !important;
     border-top-left-radius: 0px !important;
     border-bottom-left-radius: 0px !important;
     border-top-right-radius: 99px !important;

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

@@ -544,22 +544,22 @@ $grid-divider-border: #e5e5e5 !default;
     Simple boxes
   </h3>
   <oc-grid>
-    <div style="width: 80px; height: 80px; background-color: var(--oc-color-swatch-passive-default)" class="oc-height-small"></div>
+    <div style="width: 80px; height: 80px; background-color: var(--oc-color-secondary)" class="oc-height-small"></div>
     <div style="width: 80px; height: 80px; background-color: var(--oc-color-swatch-success-default)" class="oc-height-small"></div>
-    <div style="width: 80px; height: 80px; background-color: var(--oc-color-swatch-warning-default)" class="oc-height-small"></div>
+    <div style="width: 80px; height: 80px; background-color: var(--oc-color-error)" class="oc-height-small"></div>
   </oc-grid>
 
   <h3 class="oc-heading-divider">
     Simple boxes
   </h3>
   <oc-grid gutter="large">
     <div class="oc-width-1-1 oc-width-large@l">
-      <div style="background-color: var(--oc-color-swatch-passive-default)" class="oc-p-m">
+      <div style="background-color: var(--oc-color-secondary)" class="oc-p-m">
         <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
       </div>
     </div>
     <div class="oc-width-expand">
-      <div style="background-color: var(--oc-color-swatch-passive-default)" class="oc-p-m">
+      <div style="background-color: var(--oc-color-secondary)" class="oc-p-m">
         <p>I'm matching my neightbors height in @l viewports</p>
       </div>
     </div>
@@ -569,7 +569,7 @@ $grid-divider-border: #e5e5e5 !default;
     An application bar
   </h3>
 
-<div style="background-color: var(--oc-color-background-muted)" class="oc-p-s">
+<div style="background-color: var(--oc-color-surfaceDim)" class="oc-p-s">
   <oc-grid flex gutter="small">
     <div class="oc-width-expand">
       <oc-breadcrumb :items="[{text:'First',to:{path:'first'}},{text:'Second'},{text:'Third'}]" />