From 764c70b48c29f2e064cd5dd91228748d661f425c Mon Sep 17 00:00:00 2001 From: DIYgod Date: Sat, 25 Jul 2026 18:20:36 +0800 Subject: [PATCH] fix(mobile): restore dark mode text colors --- apps/mobile/package.json | 2 +- apps/mobile/scripts/uikit-colors.test.ts | 37 ++++++++++++++++++++++++ pnpm-lock.yaml | 33 +++++++++++++++++++-- 3 files changed, 69 insertions(+), 3 deletions(-) create mode 100644 apps/mobile/scripts/uikit-colors.test.ts diff --git a/apps/mobile/package.json b/apps/mobile/package.json index be6faa61c..a54e0cfe8 100644 --- a/apps/mobile/package.json +++ b/apps/mobile/package.json @@ -135,7 +135,7 @@ "react-native-sheet-transitions": "0.1.2", "react-native-svg": "15.15.5", "react-native-track-player": "4.1.2", - "react-native-uikit-colors": "1.0.0", + "react-native-uikit-colors": "0.6.2", "react-native-volume-manager": "2.0.8", "react-native-web": "0.21.2", "react-native-webview": "14.0.1", diff --git a/apps/mobile/scripts/uikit-colors.test.ts b/apps/mobile/scripts/uikit-colors.test.ts new file mode 100644 index 000000000..a635d8531 --- /dev/null +++ b/apps/mobile/scripts/uikit-colors.test.ts @@ -0,0 +1,37 @@ +import postcss from "postcss" +import { cssToReactNativeRuntime } from "react-native-css-interop/css-to-rn" +import { withUIKit } from "react-native-uikit-colors/tailwind" +import tailwindcss from "tailwindcss" +import { describe, expect, it } from "vitest" + +const alphaColorClasses = [ + "border-separator", + "border-non-opaque-separator", + "bg-system-fill", + "bg-secondary-system-fill", + "bg-tertiary-system-fill", + "bg-quaternary-system-fill", + "text-secondary-label", + "text-tertiary-label", + "text-quaternary-label", +] + +describe("UIKit alpha colors", () => { + it("compiles semantic colors for the native runtime", async () => { + const config = withUIKit({ + content: [{ raw: alphaColorClasses.join(" ") }], + }) + const { css } = await postcss([tailwindcss(config)]).process("@tailwind utilities;", { + from: undefined, + }) + const compiled = cssToReactNativeRuntime(css) + + for (const className of alphaColorClasses) { + const ruleSet = compiled.rules?.[className] + const hasDeclarations = ruleSet?.n?.some((rule) => (rule.d?.length ?? 0) > 0) + + expect(ruleSet?.warnings, className).toBeUndefined() + expect(hasDeclarations, className).toBe(true) + } + }) +}) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index adb583e4a..e56e52f59 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1398,8 +1398,8 @@ importers: specifier: 4.1.2 version: 4.1.2(patch_hash=dc51df1dccb62feafc2369115ba8e02dba9b261d9cf397f4db6c57d6b4acefe5)(react-native@0.86.0(@babel/core@7.29.0)(@react-native/metro-config@0.86.0(@babel/core@7.29.0))(@types/react@19.2.17)(bufferutil@4.1.0)(react@19.2.7))(react@19.2.7) react-native-uikit-colors: - specifier: 1.0.0 - version: 1.0.0(nativewind@4.2.6(ea162fae5d41964a07e45415df8f37cb))(react-native@0.86.0(@babel/core@7.29.0)(@react-native/metro-config@0.86.0(@babel/core@7.29.0))(@types/react@19.2.17)(bufferutil@4.1.0)(react@19.2.7))(react@19.2.7)(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.15.43(@swc/helpers@0.5.18))(@types/node@26.1.1)(typescript@6.0.3))) + specifier: 0.6.2 + version: 0.6.2(nativewind@4.2.6(ea162fae5d41964a07e45415df8f37cb))(react-native@0.86.0(@babel/core@7.29.0)(@react-native/metro-config@0.86.0(@babel/core@7.29.0))(@types/react@19.2.17)(bufferutil@4.1.0)(react@19.2.7))(react@19.2.7)(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.15.43(@swc/helpers@0.5.18))(@types/node@26.1.1)(typescript@6.0.3))) react-native-volume-manager: specifier: 2.0.8 version: 2.0.8(react-native@0.86.0(@babel/core@7.29.0)(@react-native/metro-config@0.86.0(@babel/core@7.29.0))(@types/react@19.2.17)(bufferutil@4.1.0)(react@19.2.7))(react@19.2.7) @@ -10314,6 +10314,9 @@ packages: os: [darwin] hasBin: true + apple-uikit-colors@0.6.2: + resolution: {integrity: sha512-sv0b92krbTZGNt4AJQLAPioUvuEI/wW2cLqGuEBWl3KpU2JK/odOftx8+dGSC5jGWhdB5qnwBqF96X2FA8FUQA==} + apple-uikit-colors@1.0.0: resolution: {integrity: sha512-G2Ti2ogMOOC1phfHacSrLacDiE0RcLI7IG3aNoaw7Ack23WI8/9QczmUuhxxkU9BoIR2euCZ2G4lD5qJ+OknwA==} @@ -16811,6 +16814,14 @@ packages: shaka-player: optional: true + react-native-uikit-colors@0.6.2: + resolution: {integrity: sha512-qcsQOb/0+3eoYPS/pJG8R5Idxnk+o/UKPwTfa4wCxJ/gFJEcShm1q0wsw9D7BgceXo8tK+aMDebeguvNJYt6Og==} + peerDependencies: + nativewind: '>=4.1.0' + react: 19.2.7 + react-native: '>=0.76.0' + tailwindcss: '>=3.0.0' + react-native-uikit-colors@1.0.0: resolution: {integrity: sha512-DEEc/OTrNNkIgfgbjSsG4pL0pvBaqtwmjN4FCITHQYeJFupxPOcGJehatMfPE6x3QItyIe45C0sYZz/ish+x6w==} peerDependencies: @@ -17902,6 +17913,9 @@ packages: peerDependencies: tailwindcss: ^4.0.0 + tailwindcss-uikit-colors@0.6.2: + resolution: {integrity: sha512-RfF3VVB2nHvJwPZ2ZSTMgKYbZjRny/KW3rP6ufg6/bopxINDQ9TpN/fJXxvKnD86hIU0F2oLIfAv2r6o/ZWcZw==} + tailwindcss-uikit-colors@1.0.0: resolution: {integrity: sha512-18MGdMVSoXFKjcVkUIu7Q5USqdenAvgFJT9DEocPmdS94b8d/z3s0Uw8LvaNDINfDN9ls24hfg6/hyFqpcZpxw==} @@ -29534,6 +29548,8 @@ snapshots: repeat-string: 1.6.1 optional: true + apple-uikit-colors@0.6.2: {} + apple-uikit-colors@1.0.0: {} archiver-utils@2.1.0: @@ -37499,6 +37515,15 @@ snapshots: react: 19.2.7 react-native: 0.86.0(@babel/core@7.29.0)(@react-native/metro-config@0.86.0(@babel/core@7.29.0))(@types/react@19.2.17)(bufferutil@4.1.0)(react@19.2.7) + react-native-uikit-colors@0.6.2(nativewind@4.2.6(ea162fae5d41964a07e45415df8f37cb))(react-native@0.86.0(@babel/core@7.29.0)(@react-native/metro-config@0.86.0(@babel/core@7.29.0))(@types/react@19.2.17)(bufferutil@4.1.0)(react@19.2.7))(react@19.2.7)(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.15.43(@swc/helpers@0.5.18))(@types/node@26.1.1)(typescript@6.0.3))): + dependencies: + apple-uikit-colors: 0.6.2 + nativewind: 4.2.6(ea162fae5d41964a07e45415df8f37cb) + react: 19.2.7 + react-native: 0.86.0(@babel/core@7.29.0)(@react-native/metro-config@0.86.0(@babel/core@7.29.0))(@types/react@19.2.17)(bufferutil@4.1.0)(react@19.2.7) + tailwindcss: 3.4.17(ts-node@10.9.2(@swc/core@1.15.43(@swc/helpers@0.5.18))(@types/node@26.1.1)(typescript@6.0.3)) + tailwindcss-uikit-colors: 0.6.2 + react-native-uikit-colors@1.0.0(nativewind@4.2.6(ea162fae5d41964a07e45415df8f37cb))(react-native@0.86.0(@babel/core@7.29.0)(@react-native/metro-config@0.86.0(@babel/core@7.29.0))(@types/react@19.2.17)(bufferutil@4.1.0)(react@19.2.7))(react@19.2.7)(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.15.43(@swc/helpers@0.5.18))(@types/node@26.1.1)(typescript@6.0.3))): dependencies: apple-uikit-colors: 1.0.0 @@ -38886,6 +38911,10 @@ snapshots: dependencies: tailwindcss: 4.3.2 + tailwindcss-uikit-colors@0.6.2: + dependencies: + apple-uikit-colors: 0.6.2 + tailwindcss-uikit-colors@1.0.0: dependencies: apple-uikit-colors: 1.0.0