diff --git a/core/src/components/AppIcon.vue b/core/src/components/AppIcon.vue
index 09f80f9c65a03..21bbdd15c676d 100644
--- a/core/src/components/AppIcon.vue
+++ b/core/src/components/AppIcon.vue
@@ -93,14 +93,16 @@ $bevel:
}
}
+ // Utility entries ("More apps", "App store") stay subdued: a plain circle
+ // with the icon in the same muted color as the label.
&--outlined {
background: transparent;
background-image: none;
- box-shadow: inset 0 0 0 2px var(--color-border-maxcontrast);
+ box-shadow: inset 0 0 0 2px var(--color-border);
}
&--outlined &__img {
- background-color: var(--color-main-text);
+ background-color: var(--color-text-maxcontrast);
background-image: none;
}
}
diff --git a/core/src/components/AppItem.vue b/core/src/components/AppItem.vue
index 3f8757bab34ed..f7aec5e7f9db2 100644
--- a/core/src/components/AppItem.vue
+++ b/core/src/components/AppItem.vue
@@ -8,6 +8,7 @@
class="app-item"
:class="{
'app-item--active': app.active,
+ 'app-item--outlined': outlined,
}"
:href="app.href"
:target="newTab ? '_blank' : undefined"
@@ -125,5 +126,10 @@ const unreadLabel = computed(() => {
&--active &__label {
font-weight: bold;
}
+
+ // Utility entries ("More apps", "App store") are subdued, they are not apps.
+ &--outlined &__label {
+ color: var(--color-text-maxcontrast);
+ }
}
diff --git a/core/src/components/AppMenu.vue b/core/src/components/AppMenu.vue
index e7aef02d42b35..9e88f1db4568d 100644
--- a/core/src/components/AppMenu.vue
+++ b/core/src/components/AppMenu.vue
@@ -54,19 +54,19 @@
:aria-expanded="opened ? 'true' : 'false'"
@click="onTriggerClick('currentApp')">
-
-
+
+