From 1f69c0abfc7a39930e39813d2216684752cc86f8 Mon Sep 17 00:00:00 2001
From: lookacat <pneubauer@owncloud.com>
Date: Mon, 14 Feb 2022 16:43:28 +0100
Subject: [PATCH 1/8] redesign sort

---
 src/components/molecules/OcTable/OcTable.vue | 32 ++++++++++++++++++--
 src/mixins/sort.js                           |  1 -
 src/mixins/sort.scss                         | 28 -----------------
 3 files changed, 29 insertions(+), 32 deletions(-)
 delete mode 100644 src/mixins/sort.scss

diff --git a/src/components/molecules/OcTable/OcTable.vue b/src/components/molecules/OcTable/OcTable.vue
index f6ddc2255..e66480438 100644
--- a/src/components/molecules/OcTable/OcTable.vue
+++ b/src/components/molecules/OcTable/OcTable.vue
@@ -19,17 +19,23 @@
           <span
             v-else
             :key="field.name + 'Header'"
-            class="oc-table-thead-content"
+            class="oc-table-thead-content header-text"
             v-text="extractFieldTitle(field)"
           />
           <oc-button
             v-if="field.sortable"
             :aria-label="getSortLabel(field.name)"
             class="oc-button-sort"
-            variant="passive"
+            variation="inverse"
             appearance="raw"
             @click.stop="$emit(constants.EVENT_THEAD_CLICKED, field)"
-          />
+          >
+            <oc-icon
+              :name="sortDir === 'asc' ? 'arrow-down' : 'arrow-up'"
+              fill-type="line"
+              size="small"
+            />
+          </oc-button>
         </oc-th>
       </oc-tr>
     </oc-thead>
@@ -519,6 +525,26 @@ export default {
     }
   }
 }
+.header-text:hover + .oc-button-sort {
+  opacity: 1;
+}
+.header-text {
+  vertical-align: middle;
+  display: inline-table;
+  color: var(--oc-color-swatch-inverse-default);
+  &:hover {
+    text-decoration: underline;
+  }
+}
+.oc-button-sort {
+  opacity: 0;
+  display: inline-table;
+  vertical-align: middle;
+  .oc-icon {
+    display: table-cell !important;
+    vertical-align: middle !important;
+  }
+}
 </style>
 <docs>
 ```js
diff --git a/src/mixins/sort.js b/src/mixins/sort.js
index 4c031652c..5f5f820c7 100644
--- a/src/mixins/sort.js
+++ b/src/mixins/sort.js
@@ -1,5 +1,4 @@
 import { EVENT_THEAD_CLICKED } from "../helpers/constants"
-import "./sort.scss"
 
 const SORT_DIRECTION_ASC = "asc"
 const SORT_DIRECTION_DESC = "desc"
diff --git a/src/mixins/sort.scss b/src/mixins/sort.scss
deleted file mode 100644
index 98061fc3d..000000000
--- a/src/mixins/sort.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-.oc-thead {
-  th {
-    &[aria-sort] .oc-button-sort {
-      background-position: center;
-      background-repeat: no-repeat;
-      background-size: 0.65em 1em;
-      cursor: pointer;
-      display: inline;
-      height: 1em;
-      margin-left: var(--oc-space-xsmall);
-      padding: 0;
-      vertical-align: middle;
-      width: 0.65em;
-    }
-
-    &[aria-sort='none'] .oc-button-sort {
-      background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" stroke="white" stroke-width="12" width="101" height="101" preserveAspectRatio="none"%3E%3Cpath opacity=".3" d="M51 1l25 23 24 22H1l25-22zm0 100l25-23 24-22H1l25 22z"/%3E%3C/svg%3E');
-    }
-
-    &[aria-sort='descending'] .oc-button-sort {
-      background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" stroke="white" stroke-width="12" width="101" height="101" preserveAspectRatio="none"%3E%3Cpath opacity=".3" d="M51 1l25 23 24 22H1l25-22z"/%3E%3Cpath d="M51 101l25-23 24-22H1l25 22z"/%3E%3C/svg%3E');
-    }
-
-    &[aria-sort='ascending'] .oc-button-sort {
-      background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" stroke="white" stroke-width="12" width="101" height="101" preserveAspectRatio="none"%3E%3Cpath d="M51 1l25 23 24 22H1l25-22z"/%3E%3Cpath opacity=".3" d="M51 101l25-23 24-22H1l25 22z"/%3E%3C/svg%3E');
-    }
-  }
-}

From 2b314c9b5fea7900ac3a7d28f4206e49fda6ce76 Mon Sep 17 00:00:00 2001
From: lookacat <pneubauer@owncloud.com>
Date: Wed, 16 Feb 2022 12:36:41 +0100
Subject: [PATCH 2/8] click on icon behaves now like click on resource name

---
 .../organisms/OcResource/OcResource.vue       | 31 +++++++++++++------
 1 file changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/components/organisms/OcResource/OcResource.vue b/src/components/organisms/OcResource/OcResource.vue
index 9fd700e0c..1ddef7321 100644
--- a/src/components/organisms/OcResource/OcResource.vue
+++ b/src/components/organisms/OcResource/OcResource.vue
@@ -1,14 +1,24 @@
 <template>
   <div class="oc-resource oc-text-overflow">
-    <oc-img
-      v-if="hasThumbnail"
-      :key="thumbnail"
-      :src="thumbnail"
-      class="oc-resource-thumbnail"
-      width="40"
-      height="40"
-    />
-    <oc-resource-icon v-else :resource="resource" />
+    <component
+      :is="componentType"
+      v-bind="componentProps"
+      v-if="isResourceClickable"
+      :target="linkTargetBlank"
+      :aria-describedby="opensInNewWindowDescriptionId"
+      @click.stop="emitClick"
+      @click.native.stop
+    >
+      <oc-img
+        v-if="hasThumbnail"
+        :key="thumbnail"
+        :src="thumbnail"
+        class="oc-resource-thumbnail"
+        width="40"
+        height="40"
+      />
+      <oc-resource-icon v-else :resource="resource" />
+    </component>
     <div class="oc-resource-details oc-text-overflow">
       <component
         :is="componentType"
@@ -205,6 +215,9 @@ export default {
   },
 
   methods: {
+    hover() {
+      console.log("hover")
+    },
     emitClick() {
       if (this.isFolder) {
         return

From dd74f6c71359b11fbc15e845b0b423f0223e75cc Mon Sep 17 00:00:00 2001
From: lookacat <pneubauer@owncloud.com>
Date: Thu, 17 Feb 2022 11:26:59 +0100
Subject: [PATCH 3/8] replace highlight with secondary color

---
 src/components/atoms/OcDrop/OcDrop.vue | 2 +-
 src/styles/theme/background.scss       | 4 ++++
 src/tokens/ods/color.yaml              | 2 ++
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/atoms/OcDrop/OcDrop.vue b/src/components/atoms/OcDrop/OcDrop.vue
index e3ce5b177..7b1b6403f 100644
--- a/src/components/atoms/OcDrop/OcDrop.vue
+++ b/src/components/atoms/OcDrop/OcDrop.vue
@@ -7,7 +7,7 @@
   >
     <div
       v-if="$slots.default"
-      :class="['oc-card oc-card-body oc-rounded oc-background-highlight', paddingClass]"
+      :class="['oc-card oc-card-body oc-rounded oc-background-secondary', paddingClass]"
     >
       <slot />
     </div>
diff --git a/src/styles/theme/background.scss b/src/styles/theme/background.scss
index 01d67739d..fcf12046e 100644
--- a/src/styles/theme/background.scss
+++ b/src/styles/theme/background.scss
@@ -11,6 +11,10 @@
   border-color: linear-gradient(90deg, var(--oc-color-swatch-primary-muted) 0%, var(--oc-color-swatch-primary-gradient) 100%);
 }
 
+.oc-background-secondary {
+  background-color: var(--oc-color-background-secondary) !important;
+}
+
 .oc-background-muted {
   background-color: var(--oc-color-background-muted) !important;
 }
diff --git a/src/tokens/ods/color.yaml b/src/tokens/ods/color.yaml
index 5d4833eb4..54240ad78 100644
--- a/src/tokens/ods/color.yaml
+++ b/src/tokens/ods/color.yaml
@@ -77,6 +77,8 @@ color:
   background:
     default:
       value: rgb(255, 255, 255)
+    secondary:
+      value: rgb(10, 10, 10)
     muted:
       value: rgb(248, 248, 248)
     highlight:

From 228d417ec5da98843ecc8b79143969acad4b4fc8 Mon Sep 17 00:00:00 2001
From: lookacat <pneubauer@owncloud.com>
Date: Thu, 17 Feb 2022 13:01:34 +0100
Subject: [PATCH 4/8] Add hover to OcTable

---
 src/components/molecules/OcTable/OcTable.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/molecules/OcTable/OcTable.vue b/src/components/molecules/OcTable/OcTable.vue
index e66480438..2718318f9 100644
--- a/src/components/molecules/OcTable/OcTable.vue
+++ b/src/components/molecules/OcTable/OcTable.vue
@@ -474,6 +474,10 @@ export default {
     height: var(--oc-size-height-table-row);
   }
 
+  tr:hover {
+    background-color: var(--oc-color-background-secondary);
+  }
+
   tr + tr {
     border-top: 1px solid var(--oc-color-border);
   }
@@ -483,7 +487,7 @@ export default {
   }
 
   &-highlighted {
-    background-color: var(--oc-color-background-highlight);
+    background-color: var(--oc-color-background-highlight) !important;
   }
 
   &-accentuated {

From ca6739494bcf31be0aa6f4211381a01aab9443c8 Mon Sep 17 00:00:00 2001
From: lookacat <pneubauer@owncloud.com>
Date: Thu, 17 Feb 2022 16:47:23 +0100
Subject: [PATCH 5/8] Beautify & clean OcCheckbox

---
 .../atoms/OcCheckbox/OcCheckbox.vue           | 15 +++++------
 src/styles/theme/oc-form.scss                 | 26 +++++--------------
 2 files changed, 14 insertions(+), 27 deletions(-)

diff --git a/src/components/atoms/OcCheckbox/OcCheckbox.vue b/src/components/atoms/OcCheckbox/OcCheckbox.vue
index 8e3bad858..61429f05b 100644
--- a/src/components/atoms/OcCheckbox/OcCheckbox.vue
+++ b/src/components/atoms/OcCheckbox/OcCheckbox.vue
@@ -133,18 +133,17 @@ export default {
 
 .oc-checkbox {
   @include oc-form-check-size(1);
-
   -webkit-appearance: none;
   -moz-appearance: none;
-  background-color: var(--oc-color-input-bg);
-  background-position: 50% 50%;
-  background-repeat: no-repeat;
-  background-size: 80%;
-  border: 1px solid var(--oc-color-input-border);
-  border-radius: 3px;
+
+  background-position: 50% 50% !important;
+  background-repeat: no-repeat !important;
+  border: 2px solid var(--oc-color-input-border);
+  border-radius: 5px;
   display: inline-block;
   overflow: hidden;
   vertical-align: middle;
+  background: transparent;
 
   &-s {
     @include oc-form-check-size(0.7);
@@ -164,7 +163,7 @@ export default {
 
   &:checked,
   &:indeterminate {
-    background-color: var(--oc-color-swatch-brand-default);
+    background-color: var(--oc-color-swatch-inverse-default);
   }
 
   &:checked {
diff --git a/src/styles/theme/oc-form.scss b/src/styles/theme/oc-form.scss
index 4653c4512..f793a6379 100644
--- a/src/styles/theme/oc-form.scss
+++ b/src/styles/theme/oc-form.scss
@@ -77,7 +77,7 @@ $form-datalist-icon-color: var(--oc-color-text-default) !default;
 $form-radio-background: var(--oc-color-background-muted) !default;
 
 $form-radio-checked-background: $oc-color-swatch-primary-default !default;
-$form-radio-checked-icon-color: $oc-color-text-inverse !default;
+$form-radio-checked-icon-color: var(--oc-color-input-border) !default;
 
 $form-radio-checked-focus-background: $oc-color-swatch-primary-default !default;
 
@@ -195,8 +195,7 @@ $internal-form-checkbox-indeterminate-image: "data:image/svg+xml;charset=UTF-8,%
  * Improves consistency of cursor style for clickable elements
  */
 
-.oc-radio:not(:disabled),
-.oc-checkbox:not(:disabled) { cursor: pointer; }
+.oc-radio:not(:disabled) { cursor: pointer; }
 
 /* Input, select and textarea
  * Allowed: `text`, `password`, `datetime`, `datetime-local`, `date`,  `month`,
@@ -446,8 +445,7 @@ select.oc-form-width-xsmall { width: ($form-width-xsmall + 25px); }
  * 6. Center icons
  */
 
-.oc-radio,
-.oc-checkbox {
+.oc-radio{
   /* 4 */
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -470,8 +468,7 @@ select.oc-form-width-xsmall { width: ($form-width-xsmall + 25px); }
 .oc-radio { border-radius: 50%; }
 
 /* Focus */
-.oc-radio:focus,
-.oc-checkbox:focus {
+.oc-radio:focus {
   outline: none;
 }
 
@@ -479,16 +476,12 @@ select.oc-form-width-xsmall { width: ($form-width-xsmall + 25px); }
  * Checked
  */
 
-.oc-radio:checked,
-.oc-checkbox:checked,
-.oc-checkbox:indeterminate {
+.oc-radio:checked {
   background-color: $form-radio-checked-background;
 }
 
 /* Focus */
-.oc-radio:checked:focus,
-.oc-checkbox:checked:focus,
-.oc-checkbox:indeterminate:focus {
+.oc-radio:checked:focus {
   background-color: $form-radio-checked-focus-background;
 }
 
@@ -497,20 +490,15 @@ select.oc-form-width-xsmall { width: ($form-width-xsmall + 25px); }
  */
 
 .oc-radio:checked { @include svg-fill($internal-form-radio-image, "#000", $form-radio-checked-icon-color); }
-.oc-checkbox:checked { @include svg-fill($internal-form-checkbox-image, "#000", $form-radio-checked-icon-color); }
-.oc-checkbox:indeterminate { @include svg-fill($internal-form-checkbox-indeterminate-image, "#000", $form-radio-checked-icon-color); }
 
 /*
  * Disabled
  */
 
-.oc-radio:disabled,
-.oc-checkbox:disabled {
+.oc-radio:disabled {
   background-color: $form-radio-disabled-background;
 }
 
 .oc-radio:disabled:checked { @include svg-fill($internal-form-radio-image, "#000", $form-radio-disabled-icon-color); }
-.oc-checkbox:disabled:checked { @include svg-fill($internal-form-checkbox-image, "#000", $form-radio-disabled-icon-color); }
-.oc-checkbox:disabled:indeterminate { @include svg-fill($internal-form-checkbox-indeterminate-image, "#000", $form-radio-disabled-icon-color); }
 
 /* stylelint-enable */

From 4a5a672e786afd7759aaa7c71da3897e5815dadf Mon Sep 17 00:00:00 2001
From: lookacat <pneubauer@owncloud.com>
Date: Thu, 17 Feb 2022 17:09:21 +0100
Subject: [PATCH 6/8] Cleanup OcTable, Adjust tests, Add changelog

---
 .../unreleased/enhancement-redesign-filestable    |  7 +++++++
 .../OcDrop/__snapshots__/OcDrop.spec.js.snap      |  6 +++---
 .../molecules/OcTable/OcTable.sort.spec.js        | 15 ++++++++++++---
 src/components/molecules/OcTable/OcTable.vue      | 13 +++++--------
 4 files changed, 27 insertions(+), 14 deletions(-)
 create mode 100644 changelog/unreleased/enhancement-redesign-filestable

diff --git a/changelog/unreleased/enhancement-redesign-filestable b/changelog/unreleased/enhancement-redesign-filestable
new file mode 100644
index 000000000..3068bf85a
--- /dev/null
+++ b/changelog/unreleased/enhancement-redesign-filestable
@@ -0,0 +1,7 @@
+Enhancement: Redesign FilesTable
+
+We've adjusted OcTable, OcResource, OcDrop and OcCheckbox
+to fit the redesign.
+
+https://github.com/owncloud/owncloud-design-system/pull/1958
+https://github.com/owncloud/web/issues/6207
\ No newline at end of file
diff --git a/src/components/atoms/OcDrop/__snapshots__/OcDrop.spec.js.snap b/src/components/atoms/OcDrop/__snapshots__/OcDrop.spec.js.snap
index ed36b266b..8031a74a6 100644
--- a/src/components/atoms/OcDrop/__snapshots__/OcDrop.spec.js.snap
+++ b/src/components/atoms/OcDrop/__snapshots__/OcDrop.spec.js.snap
@@ -36,7 +36,7 @@ exports[`OcDrop tippy renders tippy 1`] = `
           id="oc-drop-15"
         >
           <div
-            class="oc-card oc-card-body oc-rounded oc-background-highlight oc-p-m"
+            class="oc-card oc-card-body oc-rounded oc-background-secondary oc-p-m"
           >
             show
           </div>
@@ -82,7 +82,7 @@ exports[`OcDrop tippy renders tippy 2`] = `
           id="oc-drop-15"
         >
           <div
-            class="oc-card oc-card-body oc-rounded oc-background-highlight oc-p-m"
+            class="oc-card oc-card-body oc-rounded oc-background-secondary oc-p-m"
           >
             show
           </div>
@@ -129,7 +129,7 @@ exports[`OcDrop tippy renders tippy 3`] = `
           id="oc-drop-15"
         >
           <div
-            class="oc-card oc-card-body oc-rounded oc-background-highlight oc-p-m"
+            class="oc-card oc-card-body oc-rounded oc-background-secondary oc-p-m"
           >
             show
           </div>
diff --git a/src/components/molecules/OcTable/OcTable.sort.spec.js b/src/components/molecules/OcTable/OcTable.sort.spec.js
index 0d89497fd..29e574a33 100644
--- a/src/components/molecules/OcTable/OcTable.sort.spec.js
+++ b/src/components/molecules/OcTable/OcTable.sort.spec.js
@@ -48,8 +48,11 @@ describe("OcTable.sort", () => {
     const wrapper = mount(Table, {
       propsData: {
         fields: [...tableFields],
-        data,
+        data
       },
+      stubs: {
+        "oc-icon": true
+      }
     })
     const headers = wrapper.findAll("thead th")
     it("has any [aria-sort] attribute on all sortable column headers", () => {
@@ -114,8 +117,11 @@ describe("OcTable.sort", () => {
           fields: tableFields,
           sortBy: tableFieldId.name,
           sortDir: tableFieldId.sortDir,
-          data,
+          data
         },
+        stubs: {
+          "oc-icon": true
+        }
       })
 
       const headers = wrapper.findAll("thead th")
@@ -156,8 +162,11 @@ describe("OcTable.sort", () => {
             fields: tableFields,
             data,
             sortBy: sortByOld,
-            sortDir: sortDirOld,
+            sortDir: sortDirOld
           },
+          stubs: {
+            "oc-icon": true
+          }
         })
 
         const headers = wrapper.findAll("thead th")
diff --git a/src/components/molecules/OcTable/OcTable.vue b/src/components/molecules/OcTable/OcTable.vue
index 2718318f9..52bbf4936 100644
--- a/src/components/molecules/OcTable/OcTable.vue
+++ b/src/components/molecules/OcTable/OcTable.vue
@@ -516,6 +516,11 @@ export default {
 
   &-thead-content {
     vertical-align: middle;
+    display: inline-table;
+    color: var(--oc-color-swatch-passive-default);
+    &:hover {
+      text-decoration: underline;
+    }
   }
 
   &-footer {
@@ -532,14 +537,6 @@ export default {
 .header-text:hover + .oc-button-sort {
   opacity: 1;
 }
-.header-text {
-  vertical-align: middle;
-  display: inline-table;
-  color: var(--oc-color-swatch-inverse-default);
-  &:hover {
-    text-decoration: underline;
-  }
-}
 .oc-button-sort {
   opacity: 0;
   display: inline-table;

From 43258b55781723e6df61eb177b7b1861b0b99c81 Mon Sep 17 00:00:00 2001
From: lookacat <pneubauer@owncloud.com>
Date: Fri, 18 Feb 2022 15:04:53 +0100
Subject: [PATCH 7/8] Fixing PR issues

---
 ...ent-redesign-filestable-related-components} |  2 +-
 src/components/atoms/OcCheckbox/OcCheckbox.vue |  3 +--
 .../molecules/OcTable/OcTable.sort.spec.js     | 18 +++++++++---------
 .../organisms/OcResource/OcResource.vue        |  3 ---
 src/tokens/ods/color.yaml                      |  2 +-
 5 files changed, 12 insertions(+), 16 deletions(-)
 rename changelog/unreleased/{enhancement-redesign-filestable => enhancement-redesign-filestable-related-components} (77%)

diff --git a/changelog/unreleased/enhancement-redesign-filestable b/changelog/unreleased/enhancement-redesign-filestable-related-components
similarity index 77%
rename from changelog/unreleased/enhancement-redesign-filestable
rename to changelog/unreleased/enhancement-redesign-filestable-related-components
index 3068bf85a..7c2425dbb 100644
--- a/changelog/unreleased/enhancement-redesign-filestable
+++ b/changelog/unreleased/enhancement-redesign-filestable-related-components
@@ -1,4 +1,4 @@
-Enhancement: Redesign FilesTable
+Enhancement: Redesign files table related components
 
 We've adjusted OcTable, OcResource, OcDrop and OcCheckbox
 to fit the redesign.
diff --git a/src/components/atoms/OcCheckbox/OcCheckbox.vue b/src/components/atoms/OcCheckbox/OcCheckbox.vue
index 61429f05b..ae38be944 100644
--- a/src/components/atoms/OcCheckbox/OcCheckbox.vue
+++ b/src/components/atoms/OcCheckbox/OcCheckbox.vue
@@ -101,7 +101,7 @@ export default {
       },
     },
     classes() {
-      return ["oc-checkbox", "oc-checkbox-" + getSizeClass(this.size)]
+      return ["oc-checkbox", "oc-rounded", "oc-checkbox-" + getSizeClass(this.size)]
     },
     labelClasses() {
       return {
@@ -139,7 +139,6 @@ export default {
   background-position: 50% 50% !important;
   background-repeat: no-repeat !important;
   border: 2px solid var(--oc-color-input-border);
-  border-radius: 5px;
   display: inline-block;
   overflow: hidden;
   vertical-align: middle;
diff --git a/src/components/molecules/OcTable/OcTable.sort.spec.js b/src/components/molecules/OcTable/OcTable.sort.spec.js
index 29e574a33..7cfbe3e28 100644
--- a/src/components/molecules/OcTable/OcTable.sort.spec.js
+++ b/src/components/molecules/OcTable/OcTable.sort.spec.js
@@ -48,11 +48,11 @@ describe("OcTable.sort", () => {
     const wrapper = mount(Table, {
       propsData: {
         fields: [...tableFields],
-        data
+        data,
       },
       stubs: {
-        "oc-icon": true
-      }
+        "oc-icon": true,
+      },
     })
     const headers = wrapper.findAll("thead th")
     it("has any [aria-sort] attribute on all sortable column headers", () => {
@@ -117,11 +117,11 @@ describe("OcTable.sort", () => {
           fields: tableFields,
           sortBy: tableFieldId.name,
           sortDir: tableFieldId.sortDir,
-          data
+          data,
         },
         stubs: {
-          "oc-icon": true
-        }
+          "oc-icon": true,
+        },
       })
 
       const headers = wrapper.findAll("thead th")
@@ -162,11 +162,11 @@ describe("OcTable.sort", () => {
             fields: tableFields,
             data,
             sortBy: sortByOld,
-            sortDir: sortDirOld
+            sortDir: sortDirOld,
           },
           stubs: {
-            "oc-icon": true
-          }
+            "oc-icon": true,
+          },
         })
 
         const headers = wrapper.findAll("thead th")
diff --git a/src/components/organisms/OcResource/OcResource.vue b/src/components/organisms/OcResource/OcResource.vue
index 1ddef7321..7978aa283 100644
--- a/src/components/organisms/OcResource/OcResource.vue
+++ b/src/components/organisms/OcResource/OcResource.vue
@@ -215,9 +215,6 @@ export default {
   },
 
   methods: {
-    hover() {
-      console.log("hover")
-    },
     emitClick() {
       if (this.isFolder) {
         return
diff --git a/src/tokens/ods/color.yaml b/src/tokens/ods/color.yaml
index 54240ad78..e290f4180 100644
--- a/src/tokens/ods/color.yaml
+++ b/src/tokens/ods/color.yaml
@@ -78,7 +78,7 @@ color:
     default:
       value: rgb(255, 255, 255)
     secondary:
-      value: rgb(10, 10, 10)
+      value: rgb(236, 236, 236)
     muted:
       value: rgb(248, 248, 248)
     highlight:

From 6721cb1fb074362e2a350dae6c8ce16556da8a4a Mon Sep 17 00:00:00 2001
From: lookacat <pneubauer@owncloud.com>
Date: Mon, 21 Feb 2022 12:53:12 +0100
Subject: [PATCH 8/8] Add new hover color token, fix light mode colors & bugs

---
 src/components/atoms/OcCheckbox/OcCheckbox.vue | 2 +-
 src/components/molecules/OcTable/OcTable.vue   | 5 +++--
 src/styles/theme/helper.scss                   | 2 +-
 src/tokens/ods/color.yaml                      | 4 +++-
 4 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/atoms/OcCheckbox/OcCheckbox.vue b/src/components/atoms/OcCheckbox/OcCheckbox.vue
index ae38be944..43591d803 100644
--- a/src/components/atoms/OcCheckbox/OcCheckbox.vue
+++ b/src/components/atoms/OcCheckbox/OcCheckbox.vue
@@ -142,7 +142,7 @@ export default {
   display: inline-block;
   overflow: hidden;
   vertical-align: middle;
-  background: transparent;
+  background-color: transparent;
 
   &-s {
     @include oc-form-check-size(0.7);
diff --git a/src/components/molecules/OcTable/OcTable.vue b/src/components/molecules/OcTable/OcTable.vue
index 52bbf4936..098b9a872 100644
--- a/src/components/molecules/OcTable/OcTable.vue
+++ b/src/components/molecules/OcTable/OcTable.vue
@@ -26,7 +26,7 @@
             v-if="field.sortable"
             :aria-label="getSortLabel(field.name)"
             class="oc-button-sort"
-            variation="inverse"
+            variation="passive"
             appearance="raw"
             @click.stop="$emit(constants.EVENT_THEAD_CLICKED, field)"
           >
@@ -34,6 +34,7 @@
               :name="sortDir === 'asc' ? 'arrow-down' : 'arrow-up'"
               fill-type="line"
               size="small"
+              variation="passive"
             />
           </oc-button>
         </oc-th>
@@ -475,7 +476,7 @@ export default {
   }
 
   tr:hover {
-    background-color: var(--oc-color-background-secondary);
+    background-color: var(--oc-color-background-hover);
   }
 
   tr + tr {
diff --git a/src/styles/theme/helper.scss b/src/styles/theme/helper.scss
index 8c57fda3b..61d2f1b25 100644
--- a/src/styles/theme/helper.scss
+++ b/src/styles/theme/helper.scss
@@ -29,7 +29,7 @@
 }
 
 .oc-box-shadow-medium {
-  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 3px 8px 1px rgb(0 0 0 / 14%);
 }
 
 .oc-overflow-auto {
diff --git a/src/tokens/ods/color.yaml b/src/tokens/ods/color.yaml
index e290f4180..a5ef29bef 100644
--- a/src/tokens/ods/color.yaml
+++ b/src/tokens/ods/color.yaml
@@ -78,13 +78,15 @@ color:
     default:
       value: rgb(255, 255, 255)
     secondary:
-      value: rgb(236, 236, 236)
+      value: rgb(255, 255, 255)
     muted:
       value: rgb(248, 248, 248)
     highlight:
       value: rgb(237, 243, 250)
     accentuate:
       value: rgba(255, 255, 5, 0.1)
+    hover:
+      value: rgb(236, 236, 236)
   border:
     value: rgb(236, 235, 238)
   text: