feat: add css-var prefix

src/components/segmented/index.en.md

@@ -40,8 +40,8 @@ This component is available since `[email protected]`.
 | --- | --- | --- |
 | Name | Description | Default |
 | ------------------- | ---------------------- | ----------------------- |
-| --background | Background color | `var(--adm-color-fill-content)` |
-| --segment-color | Text color of segment item | `var(--adm-color-text-secondary)` |
-| --segment-selected-background | Background color of selected segment | `var(--adm-color-background)` |
-| --segment-selected-color | Text color of selected segment item | `var(--adm-color-text)` |
-| --segment-disabled-color | Text color of disabled segment item | `var(--adm-color-weak)` |
+| --segmented-background | Background color | `var(--adm-color-fill-content)` |
+| --segmented-item-color | Text color of segment item | `var(--adm-color-text-secondary)` |
+| --segmented-item-selected-background | Background color of selected segment | `var(--adm-color-background)` |
+| --segmented-item-selected-color | Text color of selected segment item | `var(--adm-color-text)` |
+| --segmented-item-disabled-color | Text color of disabled segment item | `var(--adm-color-weak)` |

src/components/segmented/index.zh.md

@@ -38,8 +38,8 @@
 
 | 属性 | 说明 | 默认值 |
 | --- | --- | --- |
-| --background | 背景色 | `var(--adm-color-fill-content)` |
-| --segment-color | 分段项的文本颜色 | `var(--adm-color-text-secondary)` |
-| --segment-selected-background | 被选中分段的背景色 | `var(--adm-color-background)` |
-| --segment-selected-color | 被选中分段项的文本颜色 | `var(--adm-color-text)` |
-| --segment-disabled-color | 禁用分段项的文本颜色 | `var(--adm-color-weak)` |
+| --segmented-background | 背景色 | `var(--adm-color-fill-content)` |
+| --segmented-item-color | 分段项的文本颜色 | `var(--adm-color-text-secondary)` |
+| --segmented-item-selected-background | 被选中分段的背景色 | `var(--adm-color-background)` |
+| --segmented-item-selected-color | 被选中分段项的文本颜色 | `var(--adm-color-text)` |
+| --segmented-item-disabled-color | 禁用分段项的文本颜色 | `var(--adm-color-weak)` |

src/components/segmented/segmented.less

@@ -1,17 +1,17 @@
 @class-prefix-segmented: ~'adm-segmented';
 
 .@{class-prefix-segmented} {
-  --background: var(--adm-color-fill-content);
-  --segment-color: var(--adm-color-text-secondary);
-  --segment-selected-background: var(--adm-color-background);
-  --segment-selected-color: var(--adm-color-text);
-  --segment-disabled-color: var(--adm-color-weak);
+  --segmented-background: var(--adm-color-fill-content);
+  --segmented-item-color: var(--adm-color-text-secondary);
+  --segmented-item-selected-background: var(--adm-color-background);
+  --segmented-item-selected-color: var(--adm-color-text);
+  --segmented-item-disabled-color: var(--adm-color-weak);
   --transition-time-function: cubic-bezier(0.645, 0.045, 0.355, 1);
 
   display: inline-block;
   padding: 2px;
-  color: var(--segment-color);
-  background-color: var(--background);
+  color: var(--segmented-item-color);
+  background-color: var(--segmented-background);
   border-radius: 2px;
   transition: all 0.3s var(--transition-time-function);
 
@@ -42,7 +42,7 @@
 
     &-selected {
       .segmented-item-selected();
-      color: var(--segment-selected-color);
+      color: var(--segmented-item-selected-color);
     }
 
     &-label {
@@ -87,22 +87,25 @@
 
   // transition effect when `appear-active`
   &-thumb-motion-appear-active {
-    transition: transform 0.3s var(--transition-time-function),
+    transition:
+      transform 0.3s var(--transition-time-function),
       width 0.3s var(--transition-time-function);
     will-change: transform, width;
   }
 }
 
 /* ---- mixins part starts ---- */
 .segmented-disabled-item {
-  color: var(--segment-disabled-color);
+  color: var(--segmented-item-disabled-color);
   cursor: not-allowed;
 }
 
 .segmented-item-selected {
-  background-color: var(--segment-selected-background);
+  background-color: var(--segmented-item-selected-background);
   border-radius: 2px;
-  box-shadow: 0 2px 8px -2px fade(#000, 5%), 0 1px 4px -1px fade(#000, 7%),
+  box-shadow:
+    0 2px 8px -2px fade(#000, 5%),
+    0 1px 4px -1px fade(#000, 7%),
     0 0 1px 0 fade(#000, 8%);
 }
 

src/components/segmented/segmented.tsx

@@ -47,11 +47,11 @@ interface InternalSegmentedProps
 
 export type SegmentedProps = InternalSegmentedProps &
   NativeProps<
-    | '--background'
-    | '--segment-color'
-    | '--segment-selected-background'
-    | '--segment-selected-color'
-    | '--segment-disabled-color'
+    | '--segmented-background'
+    | '--segmented-item-color'
+    | '--segmented-item-selected-background'
+    | '--segmented-item-selected-color'
+    | '--segmented-item-disabled-color'
   >
 
 const classPrefix = `adm-segmented`