fix(web): --lynx-color will be removed

.changeset/violet-chicken-grow.md

@@ -0,0 +1,7 @@
+---
+"@lynx-js/web-style-transformer": patch
+"@lynx-js/web-elements": patch
+"@lynx-js/web-core": patch
+---
+
+fix: --lynx-color will be removed, and if color contains `gradient` it will be processed as transparent.

packages/web-platform/web-elements/src/XText/x-text.css

@@ -8,11 +8,15 @@ x-text {
   display: flex;
   overflow-wrap: break-word;
   align-items: stretch;
-  color: var(--lynx-color);
   background-image: var(--lynx-text-bg-color);
+  color: initial;
 }
+
+x-text > x-text, x-text > lynx-wrapper > x-text {
+  color: inherit;
+}
+
 x-text:not(x-text > x-text):not(x-text > lynx-wrapper > x-text) {
-  --lynx-color: canvastext;
   --lynx-text-bg-color: initial;
 }
 

packages/web-platform/web-style-transformer/src/transformLynxStyles.ts

@@ -242,9 +242,8 @@ const renameRules: {
     },
   ],
   'color': [
-    'color',
     {
-      name: '--lynx-color',
+      name: 'color',
       valueProcessor(value) {
         return value.includes('gradient')
           ? 'transparent'

packages/web-platform/web-tests/tests/react.spec.ts

@@ -1,3 +1,3 @@
 // Copyright 2024 The Lynx Authors. All rights reserved.
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
@@ -103,7 +103,7 @@
       await target.click();
       await expect(await target.getAttribute('style')).toContain('green');
       await target.click();
       await expect(await target.getAttribute('style')).toContain('pink');
     });
     test('basic-class-selector', async ({ page }, { title }) => {
       await goto(page, title);
@@ -369,7 +369,7 @@
         await goto(page, title);
         await wait(100);
         const target = page.locator('#target');
         await target.click();
         await expect(target).toHaveCSS('background-color', 'rgb(0, 128, 0)'); // green
       },
     );
@@ -631,7 +631,7 @@
         document.querySelector('lynx-view')!.remove();
       });
       await wait(50);
       expect(message).toContain('fin');
       expect(page.workers().length).toStrictEqual(1);
     });
 
@@ -1245,9 +1245,9 @@
       await wait(100);
       const target = page.locator('#target');
       await target.click();
       await expect(await target.getAttribute('style')).toContain('green');
       await target.click();
       await expect(await target.getAttribute('style')).toContain('pink');
     });
 
     test(
@@ -1586,6 +1586,12 @@
         await goto(page, title);
         await diffScreenShot(page, 'text', 'word-break');
       });
+
+      test('basic-element-text-color', async ({ page }, { title }) => {
+        await goto(page, title);
+        await wait(100);
+        await diffScreenShot(page, 'text', 'basic-element-text-color');
+      });
     });
     test.describe('image', () => {
       test('basic-element-image-src', async ({ page }, { title }) => {
@@ -2285,7 +2291,7 @@
             inputDom?.setSelectionRange(2, 5);
           });
           const result = await page.locator('.result').first().innerText();
           expect(result).toBe('2-5');
         },
       );
       test(

packages/web-platform/web-tests/tests/react/basic-element-text-color/index.css

@@ -0,0 +1,9 @@
+.a {
+  font-size: 16px;
+  color: red;
+}
+
+.b {
+  font-size: 80px;
+  color: linear-gradient(green, yellow);
+}

packages/web-platform/web-tests/tests/react/basic-element-text-color/index.jsx

@@ -0,0 +1,16 @@
+// Copyright 2023 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { root } from '@lynx-js/react';
+import './index.css';
+
+function App() {
+  return (
+    <view>
+      <text class='a b'>
+        hello lynx
+      </text>
+    </view>
+  );
+}
+root.render(<App></App>);