fix: clean up usages of variation and appearance

owncloud · Mar 16, 2023 · e8e0c9b · e8e0c9b
1 parent 7fd4a11
commit e8e0c9b
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 57 deletions.
diff --git a/packages/design-system/src/components/OcStatusIndicators/OcStatusIndicators.vue b/packages/design-system/src/components/OcStatusIndicators/OcStatusIndicators.vue
@@ -10,11 +10,12 @@
         :aria-label="$gettext(indicator.label)"
         :aria-describedby="getIndicatorDescriptionId(indicator)"
         appearance="raw-inverse"
+        variation="primary"
         :data-testid="indicator.id"
         :data-test-indicator-type="indicator.type"
         @click="indicator.handler(resource, indicator.target, $router)"
       >
-        <oc-icon :name="indicator.icon" size="small" fill-type="line" />
+        <oc-icon :name="indicator.icon" size="small" fill-type="line" variation="inherit" />
       </oc-button>
       <oc-icon
         v-else

diff --git a/packages/web-app-files/src/components/AppBar/SharesNavigation.vue b/packages/web-app-files/src/components/AppBar/SharesNavigation.vue
@@ -27,6 +27,7 @@
               :to="navItem.to"
               :class="{ 'oc-background-primary-gradient': navItem.active }"
               :appearance="navItem.active ? 'raw-inverse' : 'raw'"
+              :variation="navItem.active ? 'primary' : 'passive'"
             >
               <span class="icon-box" :class="{ 'icon-box-active': navItem.active }">
                 <oc-icon :name="navItem.icon" />

diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue
@@ -30,25 +30,25 @@
           <oc-button
             :id="`files-recipient-role-drop-btn-${role.name}`"
             ref="roleSelect"
-            appearance="raw"
             justify-content="space-between"
             class="files-recipient-role-drop-btn oc-p-s"
             :class="{
               'oc-background-primary-gradient': isSelectedRole(role),
               selected: isSelectedRole(role)
             }"
-            :variation="isSelectedRole(role) ? 'inverse' : 'passive'"
+            :appearance="isSelectedRole(role) ? 'raw-inverse' : 'raw'"
+            :variation="isSelectedRole(role) ? 'primary' : 'passive'"
             @click="selectRole(role)"
           >
             <span class="oc-flex oc-flex-middle">
-              <oc-icon :name="role.icon" class="oc-pl-s oc-pr-m" />
+              <oc-icon :name="role.icon" class="oc-pl-s oc-pr-m" variation="inherit" />
               <role-item
                 :role="role"
                 :allow-share-permission="allowSharePermission && resharingDefault"
               />
             </span>
             <span class="oc-flex">
-              <oc-icon v-if="isSelectedRole(role)" name="check" />
+              <oc-icon v-if="isSelectedRole(role)" name="check" variation="inherit" />
             </span>
           </oc-button>
         </li>
@@ -272,7 +272,7 @@ export default defineComponent({
       this.publishChange()
     },
 
-    isSelectedRole(role) {
+    isSelectedRole(role: ShareRole) {
       return this.selectedRole.name === role.name
     },
 
@@ -367,15 +367,6 @@ export default defineComponent({
     width: 400px;
 
     &-list {
-      &:hover .files-recipient-role-drop-btn.selected:not(:hover),
-      &:focus .files-recipient-role-drop-btn.selected:not(:focus) {
-        color: var(--oc-color-swatch-passive-default);
-
-        ::v-deep .oc-icon > svg {
-          fill: var(--oc-color-swatch-passive-default);
-        }
-      }
-
       li {
         margin: var(--oc-space-xsmall) 0;
       }
@@ -388,17 +379,8 @@ export default defineComponent({
       &:hover,
       &:focus {
         background-color: var(--oc-color-background-hover);
-        color: var(--oc-color-swatch-passive-default);
         text-decoration: none;
       }
-
-      &.selected {
-        color: var(--oc-color-swatch-passive-contrast) !important;
-
-        ::v-deep .oc-icon > svg {
-          fill: var(--oc-color-swatch-passive-contrast) !important;
-        }
-      }
     }
   }
 

diff --git a/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue b/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue
@@ -20,18 +20,15 @@
         mode="click"
       >
         <oc-list class="roleDropdownList">
-          <li
-            v-for="roleOption in availableRoleOptions"
-            :key="`role-dropdown-${roleOption.label.toLowerCase()}`"
-          >
+          <li v-for="roleOption in availableRoleOptions" :key="`role-dropdown-${roleOption.key}`">
             <oc-button
-              :id="`files-role-${roleOption.label.toLowerCase()}`"
+              :id="`files-role-${roleOption.key}`"
               :class="{
-                selected: link.permissions === roleOption.bitmask(false),
-                'oc-background-primary-gradient': link.permissions === roleOption.bitmask(false)
+                selected: isSelectedRole(roleOption),
+                'oc-background-primary-gradient': isSelectedRole(roleOption)
               }"
-              appearance="raw"
-              :variation="link.permissions === roleOption.bitmask(false) ? 'inverse' : 'passive'"
+              :appearance="isSelectedRole(roleOption) ? 'raw-inverse' : 'raw'"
+              :variation="isSelectedRole(roleOption) ? 'primary' : 'passive'"
               justify-content="space-between"
               class="oc-p-s"
               @click="
@@ -45,7 +42,7 @@
               "
             >
               <span class="oc-flex oc-flex-middle">
-                <oc-icon :name="roleOption.icon" class="oc-pl-s oc-pr-m" />
+                <oc-icon :name="roleOption.icon" class="oc-pl-s oc-pr-m" variation="inherit" />
                 <span>
                   <span
                     class="oc-text-bold oc-display-block oc-width-1-1"
@@ -55,7 +52,7 @@
                 </span>
               </span>
               <span class="oc-flex">
-                <oc-icon v-if="link.permissions === roleOption.bitmask(false)" name="check" />
+                <oc-icon v-if="isSelectedRole(roleOption)" name="check" variation="inherit" />
               </span>
             </oc-button>
           </li>
@@ -402,6 +399,10 @@ export default defineComponent({
   methods: {
     ...mapActions(['createModal', 'hideModal', 'setModalInputErrorMessage']),
 
+    isSelectedRole(role: ShareRole) {
+      return this.link.permissions === role.bitmask(false)
+    },
+
     updateLink({
       link = this.link,
       dropRef = this.$refs.editPublicLinkDropdown,
@@ -503,17 +504,8 @@ export default defineComponent({
     &:hover,
     &:focus {
       background-color: var(--oc-color-background-hover);
-      color: var(--oc-color-swatch-passive-default);
       text-decoration: none;
     }
-
-    &.selected {
-      color: var(--oc-color-swatch-passive-contrast) !important;
-
-      ::v-deep .oc-icon > svg {
-        fill: var(--oc-color-swatch-passive-contrast) !important;
-      }
-    }
   }
 }
 

diff --git a/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue b/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
@@ -15,7 +15,7 @@
       :data-nav-name="navName"
     >
       <span class="oc-flex">
-        <oc-icon :name="icon" :fill-type="fillType" />
+        <oc-icon :name="icon" :fill-type="fillType" variation="inherit" />
         <span class="oc-ml-m text" :class="{ 'text-invisible': collapsed }" v-text="name" />
       </span>
       <oc-tag v-if="tag" class="oc-py-rm" size="small">{{ tag }}</oc-tag>

diff --git a/packages/web-runtime/src/components/Topbar/ApplicationsMenu.vue b/packages/web-runtime/src/components/Topbar/ApplicationsMenu.vue
@@ -36,10 +36,10 @@
             :class="{ 'oc-background-primary-gradient router-link-active': n.active }"
           >
             <span class="icon-box">
-              <oc-icon :name="n.icon" />
+              <oc-icon :name="n.icon" variation="inherit" />
             </span>
             <span v-text="$gettext(n.title)" />
-            <oc-icon v-if="n.active" name="check" class="active-check" />
+            <oc-icon v-if="n.active" name="check" class="active-check" variation="inherit" />
           </oc-button>
         </li>
       </oc-list>
@@ -104,7 +104,6 @@ export default defineComponent({
     &:focus,
     &:hover {
       background-color: var(--oc-color-background-hover);
-      color: var(--oc-color-swatch-passive-default);
       text-decoration: none;
     }
 
@@ -121,13 +120,5 @@ export default defineComponent({
       right: 1rem;
     }
   }
-
-  a.router-link-active,
-  button.router-link-active {
-    &:focus,
-    &:hover {
-      color: var(--oc-color-swatch-passive-contrast);
-    }
-  }
 }
 </style>
diff --git a/packages/web-runtime/src/components/Topbar/ThemeSwitcher.vue b/packages/web-runtime/src/components/Topbar/ThemeSwitcher.vue
@@ -8,7 +8,7 @@
     @click="toggleTheme"
   >
     <span class="oc-visible@s" :aria-label="switchLabel" />
-    <oc-icon :name="switchIcon" fill-type="line" />
+    <oc-icon :name="switchIcon" fill-type="line" variation="inherit" />
   </oc-button>
 </template>
 <script lang="ts">