Add dark/tinted icon variants (#9241)

* add tinted icon style

* new dark icon

* use icon composer file

* rename some icons, ensure default ios is still there

* use solid fill instead of auto gradient

* fix web build

* back to gradient

* add . for consistency

* rename `default_old` to `legacy`

.gitignore

@@ -119,3 +119,8 @@ src/locale/locales/**/*.js
 
 # ogcard assets
 bskyogcard/src/assets/fonts/noto-*
+
+# bskyweb build output
+bskyweb/static/media/*.webp
+bskyweb/static/media/*.jpg
+bskyweb/static/media/*.png

app.config.js

@@ -11,7 +11,7 @@ module.exports = function (_config) {
    *
    * @see https://docs.expo.dev/build-reference/variables/#built-in-environment-variables
    */
-  const PLATFORM = process.env.EAS_BUILD_PLATFORM
+  const PLATFORM = process.env.EAS_BUILD_PLATFORM ?? 'web'
 
   const IS_TESTFLIGHT = process.env.EXPO_PUBLIC_ENV === 'testflight'
   const IS_PRODUCTION = process.env.EXPO_PUBLIC_ENV === 'production'
@@ -50,6 +50,10 @@ module.exports = function (_config) {
         config: {
           usesNonExemptEncryption: false,
         },
+        icon:
+          PLATFORM === 'web' // web build doesn't like .icon files
+            ? './assets/app-icons/ios_icon_default_next.png'
+            : './assets/app-icons/ios_icon_default.icon',
         infoPlist: {
           UIBackgroundModes: ['remote-notification'],
           NSCameraUsageDescription:
@@ -171,7 +175,7 @@ module.exports = function (_config) {
         barStyle: 'light-content',
       },
       android: {
-        icon: './assets/app-icons/android_icon_default_next.png',
+        icon: './assets/app-icons/android_icon_default_light.png',
         adaptiveIcon: {
           foregroundImage: './assets/icon-android-foreground.png',
           monochromeImage: './assets/icon-android-foreground.png',
@@ -323,18 +327,13 @@ module.exports = function (_config) {
              * Default set
              */
             default_light: {
-              ios: './assets/app-icons/ios_icon_default_light.png',
-              android: './assets/app-icons/android_icon_default_light.png',
+              ios: './assets/app-icons/ios_icon_legacy_light.png',
+              android: './assets/app-icons/android_icon_legacy_light.png',
               prerendered: true,
             },
             default_dark: {
-              ios: './assets/app-icons/ios_icon_default_dark.png',
-              android: './assets/app-icons/android_icon_default_dark.png',
-              prerendered: true,
-            },
-            next: {
-              ios: './assets/app-icons/ios_icon_default_next.png',
-              android: './assets/app-icons/android_icon_default_next.png',
+              ios: './assets/app-icons/ios_icon_legacy_dark.png',
+              android: './assets/app-icons/android_icon_legacy_dark.png',
               prerendered: true,
             },
 

assets/app-icons/ios_icon_default.icon/icon.json

@@ -0,0 +1,31 @@
+{
+  "fill" : {
+    "automatic-gradient" : "srgb:0.00000,0.41569,1.00000,1.00000"
+  },
+  "groups" : [
+    {
+      "layers" : [
+        {
+          "fill" : "none",
+          "glass" : false,
+          "image-name" : "iOS transparent.png",
+          "name" : "iOS transparent"
+        }
+      ],
+      "shadow" : {
+        "kind" : "neutral",
+        "opacity" : 0.5
+      },
+      "translucency" : {
+        "enabled" : true,
+        "value" : 0.5
+      }
+    }
+  ],
+  "supported-platforms" : {
+    "circles" : [
+      "watchOS"
+    ],
+    "squares" : "shared"
+  }
+}

src/screens/Settings/AppIconSettings/useAppIconSets.ts

@@ -14,12 +14,12 @@ export function useAppIconSets() {
         name: _(msg({context: 'Name of app icon variant', message: 'Light'})),
         iosImage: () => {
           return require(
-            `../../../../assets/app-icons/ios_icon_default_light.png`,
+            `../../../../assets/app-icons/ios_icon_legacy_light.png`,
           )
         },
         androidImage: () => {
           return require(
-            `../../../../assets/app-icons/android_icon_default_light.png`,
+            `../../../../assets/app-icons/android_icon_legacy_light.png`,
           )
         },
       },
@@ -28,26 +28,12 @@ export function useAppIconSets() {
         name: _(msg({context: 'Name of app icon variant', message: 'Dark'})),
         iosImage: () => {
           return require(
-            `../../../../assets/app-icons/ios_icon_default_dark.png`,
+            `../../../../assets/app-icons/ios_icon_legacy_dark.png`,
           )
         },
         androidImage: () => {
           return require(
-            `../../../../assets/app-icons/android_icon_default_dark.png`,
-          )
-        },
-      },
-      {
-        id: 'next',
-        name: _(msg({context: 'Name of app icon variant', message: 'Next'})),
-        iosImage: () => {
-          return require(
-            `../../../../assets/app-icons/ios_icon_default_next.png`,
-          )
-        },
-        androidImage: () => {
-          return require(
-            `../../../../assets/app-icons/android_icon_default_next.png`,
+            `../../../../assets/app-icons/android_icon_legacy_dark.png`,
           )
         },
       },