fix(dark-mode): fix 5 component issues in dark mode

- Descriptions: remove hardcoded grey table background, use transparent
- Segmented: add theme tokens for track and active item backgrounds
- Tag: replace hardcoded #fff in "New Tag" demo with CSS variable
- Cascader: add theme tokens for input bg/border/dropdown, replace
  Unicode ▾ with ArrowDown icon component (matching Select)
- Table: add theme tokens for header bg, border, and hover colors

Author: wangdicoder

components/cascader/__tests__/__snapshots__/cascader.test.tsx.snap

@@ -16,7 +16,16 @@ exports[`<Cascader /> should match the snapshot 1`] = `
       <span
         class="ty-cascader__arrow"
       >
-        ▾
+        <svg
+          height="10"
+          viewBox="0 0 1024 1024"
+          width="10"
+        >
+          <path
+            d="M472.064 751.552 72.832 352.32c-22.08-22.08-22.08-57.792 0-79.872 22.016-22.016 57.792-22.08 79.872 0L512 631.744l359.296-359.296c22.016-22.016 57.792-22.08 79.872 0 22.08 22.08 22.016 57.792 0 79.872l-399.232 399.232C529.856 773.568 494.144 773.568 472.064 751.552z"
+            fill="currentcolor"
+          />
+        </svg>
       </span>
     </div>
   </div>

components/cascader/cascader.tsx

@@ -3,6 +3,7 @@ import { createPortal } from 'react-dom';
 import classNames from 'classnames';
 import { ConfigContext } from '../config-provider/config-context';
 import { getPrefixCls } from '../_utils/general';
+import { ArrowDown } from '../_utils/components';
 import { CascaderProps, CascaderOption, CascaderValue } from './types';
 
 const getOptionsByValue = (
@@ -249,7 +250,7 @@ const Cascader = React.forwardRef<HTMLDivElement, CascaderProps>((props, ref) =>
             ✕
           </span>
         )}
-        <span className={`${prefixCls}__arrow`}>▾</span>
+        <span className={`${prefixCls}__arrow`}><ArrowDown size={10} /></span>
       </div>
       {dropdown}
     </div>

components/descriptions/style/_index.scss

@@ -12,7 +12,7 @@
       table-layout: fixed;
       box-sizing: border-box;
       text-align: left;
-      background-color: var(--ty-color-bg-elevated);
+      background-color: transparent;
     }
   }
 

components/style/themes/_dark.scss

@@ -355,4 +355,21 @@ $dark-theme: (
 
   // ---- Component-specific: Textarea ----
   textarea-counter-color: rgba(255, 255, 255, 0.45),
+
+  // ---- Component-specific: Table ----
+  table-header-bg: #262626,
+  table-border: #363636,
+  table-hover: #2a2a2a,
+  table-selected-bg: rgba(144, 101, 208, 0.1),
+
+  // ---- Component-specific: Segmented ----
+  segmented-bg: #2a2a2a,
+  segmented-active-bg: #1f1f1f,
+
+  // ---- Component-specific: Cascader ----
+  cascader-bg: #1f1f1f,
+  cascader-border: #424242,
+  cascader-dropdown-bg: #1f1f1f,
+  cascader-hover: #2a2a2a,
+  cascader-selected-bg: rgba(144, 101, 208, 0.1),
 );

components/style/themes/_light.scss

@@ -355,4 +355,21 @@ $light-theme: (
 
   // ---- Component-specific: Textarea ----
   textarea-counter-color: #666,
+
+  // ---- Component-specific: Table ----
+  table-header-bg: #f6f9fc,
+  table-border: #e9ecef,
+  table-hover: #f6f9fc,
+  table-selected-bg: rgba(110, 65, 191, 0.06),
+
+  // ---- Component-specific: Segmented ----
+  segmented-bg: #e9ecef,
+  segmented-active-bg: #fff,
+
+  // ---- Component-specific: Cascader ----
+  cascader-bg: #fff,
+  cascader-border: #d9d9d9,
+  cascader-dropdown-bg: #fff,
+  cascader-hover: #f5f5f5,
+  cascader-selected-bg: rgba(110, 65, 191, 0.06),
 );

components/tag/demo/dynamic.md

@@ -56,7 +56,7 @@ Adding or removing a set of tags dynamically.
         )
         : 
         (
-          <Tag onClick={showInput} style={{ background: '#fff', borderStyle: 'dashed' }}>
+          <Tag onClick={showInput} style={{ background: 'var(--ty-color-bg-container)', borderStyle: 'dashed' }}>
             <Icon name="plus" size={11}/> New Tag
           </Tag>
         )}