docs: update component demo color related token (#547)

content/feedback/progress/index-en-US.md

@@ -35,9 +35,9 @@ import { Progress } from '@douyinfe/semi-ui';
 
 () => (
     <div style={{ width: 200 }}>
-        <Progress percent={10} stroke="#fc8800" aria-label="disk usage"/>
+       <Progress percent={10} stroke="var(--semi-color-warning)" aria-label="disk usage" />
         <br />
-        <Progress percent={25} stroke="#f93920" aria-label="disk usage"/>
+        <Progress percent={25} stroke="var(--semi-color-danger)" aria-label="disk usage" />
         <br />
         <Progress percent={50} aria-label="disk usage"/>
         <br />
@@ -60,9 +60,9 @@ import { Progress } from '@douyinfe/semi-ui';
 
 () => (
     <div style={{ width: 200 }}>
-        <Progress percent={10} stroke="#fc8800" showInfo={true} aria-label="disk usage"/>
+        <Progress percent={10} stroke="var(--semi-color-warning)" showInfo={true} aria-label="disk usage"/>
         <br />
-        <Progress percent={25} stroke="#f93920" showInfo={true} aria-label="disk usage"/>
+        <Progress percent={25} stroke="var(--semi-color-danger)" showInfo={true} aria-label="disk usage"/>
         <br />
         <Progress percent={50} showInfo={true} aria-label="disk usage"/>
         <br />

content/feedback/progress/index.md

@@ -34,9 +34,9 @@ import { Progress } from '@douyinfe/semi-ui';
 
 () => (
     <div style={{ width: 200 }}>
-        <Progress percent={10} stroke="#fc8800" aria-label="disk usage" />
+        <Progress percent={10} stroke="var(--semi-color-warning)" aria-label="disk usage" />
         <br />
-        <Progress percent={25} stroke="#f93920" aria-label="download progress" />
+        <Progress percent={25} stroke="var(--semi-color-danger)" aria-label="disk usage" />
         <br />
         <Progress percent={50} aria-label="disk usage" />
         <br />
@@ -59,9 +59,9 @@ import { Progress } from '@douyinfe/semi-ui';
 
 () => (
     <div style={{ width: 200 }}>
-        <Progress percent={10} stroke="#fc8800" showInfo={true} aria-label="disk usage" />
+        <Progress percent={10} stroke="var(--semi-color-warning)" showInfo={true} aria-label="disk usage" />
         <br />
-        <Progress percent={25} stroke="#f93920" showInfo={true} aria-label="disk usage" />
+        <Progress percent={25} stroke="var(--semi-color-danger)" showInfo={true} aria-label="disk usage" />
         <br />
         <Progress percent={50} showInfo={true} aria-label="disk usage" />
         <br />
@@ -124,7 +124,7 @@ import { Progress } from '@douyinfe/semi-ui';
                 type="circle"
                 width={100}
                 style={{ margin: 5 }}
-                stroke="#f93920"
+                stroke="var(--semi-color-danger)"
                 aria-label="disk usage"
             />
         </div>

content/input/datepicker/index.md

@@ -654,7 +654,7 @@ function Demo() {
             justifyContent: 'center',
             width: '80%',
             height: '80%',
-            borderRadius: '50%',
+            borderRadius: 'var(--semi-border-radius-circle)',
         };
 
         return (

content/input/form/index-en-US.md

@@ -425,7 +425,7 @@ import { Form, Button, Toast } from '@douyinfe/semi-ui';
                     <Form.Checkbox field='agree' noLabel>I have read and agree to the terms of service</Form.Checkbox>
                     <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                         <p>
-                            <span>Or</span><Button theme='borderless' style={{ color: 'rgb(101, 178, 252)', marginLeft: 10, cursor:'pointer' }}>Sign up</Button>
+                            <span>Or</span><Button theme='borderless' style={{ color: 'var(--semi-color-primary)', marginLeft: 10, cursor:'pointer' }}>Sign up</Button>
                         </p>
                         <Button disabled={!values.agree} htmlType='submit' type="tertiary">Log in</Button>
                     </div>
@@ -458,7 +458,6 @@ import { Form } from '@douyinfe/semi-ui';
 import React from 'react';
 import { Form, Select, Checkbox, Radio } from '@douyinfe/semi-ui';
 
-const { Option } = Select;
 
 class BasicDemo extends React.Component {
     constructor() {
@@ -775,9 +774,8 @@ When submitting, use `formApi.validate()` to centrally verify the Field
 
 ```jsx live=true dir="column"
 import React from 'react';
-import { Form, Modal, Button, Row, Col } from '@douyinfe/semi-ui';
+import { Form, Modal, Select, Button, Row, Col } from '@douyinfe/semi-ui';
 
-const { Option } = Select;
 
 class ModalFormDemo extends React.Component {
     constructor(props) {

content/input/form/index.md

@@ -501,7 +501,7 @@ import { Form, Toast, Button } from '@douyinfe/semi-ui';
                     <Form.Checkbox field='agree' noLabel>I have read and agree to the terms of service</Form.Checkbox>
                     <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                         <p>
-                            <span>Or</span><Button theme='borderless' style={{ color: 'rgb(101, 178, 252)', marginLeft: 10, cursor:'pointer' }}>Sign up</Button>
+                            <span>Or</span><Button theme='borderless' style={{ color: 'var(--semi-color-primary)', marginLeft: 10, cursor:'pointer' }}>Sign up</Button>
                         </p>
                         <Button disabled={!values.agree} htmlType='submit' type="tertiary">Log in</Button>
                     </div>
@@ -967,7 +967,7 @@ class HelpAndExtra extends React.Component {
                     extraText={
                         <div 
                             style={{
-                                color: 'rgba(var(--semi-blue-5), 1)',
+                                color: 'var(--semi-color-link)',
                                 fontSize: 14,
                                 userSelect: 'none',
                                 cursor: 'pointer'

content/input/select/index.md

@@ -333,6 +333,7 @@ import { Select } from '@douyinfe/semi-ui';
 
 () => {
     let innerSlotStyle = {
+        backgroundColor: 'var(--color-white)',
         height: '36px',
         display: 'flex',
         alignItems: 'center',
@@ -340,24 +341,25 @@ import { Select } from '@douyinfe/semi-ui';
         paddingLeft: 32,
         borderTop: '1px solid var(--semi-color-border)',
         borderRadius: '0 0 6px 6px',
+        color: 'var(--semi-color-link)'
         color: 'var(--semi-color-primary)',
-        backgroundColor: 'var(--semi-color-bg-0)'
     };
     let innerSlotNode = (<div style={innerSlotStyle}>
         点击加载更多
     </div>);
     let outSlotStyle = {
+        backgroundColor: 'var(--semi-color-fill-0)',
         height: '36px',
         display: 'flex',
         paddingLeft: 32,
+        color: 'var(--semi-color-link)',
         alignItems: 'center',
         cursor: 'pointer',
         borderTop: '1px solid var(--semi-color-border)',
         borderRadius: '0 0 6px 6px',
-        backgroundColor: 'var(--semi-color-bg-0)'
     };
     let outSlotNode = (<div style={outSlotStyle}>
-        <span style={{color: '#0077FA'}}>未找到应用?</span>
+        <span style={{color: 'var(--semi-color-link)'}}>未找到应用?</span>
     </div>);
 
     return (

content/input/upload/index-en-US.md

@@ -166,13 +166,13 @@ import { IconCamera } from '@douyinfe/semi-icons';
     };
 
     const style = {
-        backgroundColor: 'rgba(0,0,0,.4)',
+        backgroundColor: 'var(--semi-color-overlay-bg)',
         height: '100%',
         width: '100%',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
-        color: '#FFF',
+        color: 'var(--semi-color-white)',
     };
     
     const hoverMask =  (<div style={style}>

content/input/upload/index.md

@@ -164,13 +164,13 @@ import { IconCamera } from '@douyinfe/semi-icons';
     };
 
     const style = {
-        backgroundColor: 'rgba(0,0,0,.4)',
+        backgroundColor: 'var(--semi-color-overlay-bg)',
         height: '100%',
         width: '100%',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
-        color: '#FFF',
+        color: 'var(--semi-color-white)',
     };
     
     const hoverMask =  (<div style={style}>

content/navigation/tabs/index-en-US.md

@@ -67,7 +67,7 @@ class App extends React.Component {
                                 padding: '20px',
                                 border: 'none',
                                 whiteSpace: 'normal',
-                                borderRadius: '6px',
+                                borderRadius: 'var(--semi-border-radius-medium)',
                                 color: 'var(--semi-color-text-1)',
                                 backgroundColor: 'var(--semi-color-fill-0)',
                             }}

content/navigation/tabs/index.md

@@ -64,7 +64,7 @@ import { Tabs, TabPane } from '@douyinfe/semi-ui';
                         padding: '20px',
                         border: 'none',
                         whiteSpace: 'normal',
-                        borderRadius: '6px',
+                        borderRadius: 'var(--semi-border-radius-medium)',
                         color: 'var(--semi-color-text-1)',
                         backgroundColor: 'var(--semi-color-fill-0)',
                     }}

content/show/avatar/index-en-US.md

@@ -127,7 +127,7 @@ import { IconCamera } from '@douyinfe/semi-icons';
 
 () => {
     const style = {
-        backgroundColor: 'rgba(0,0,0,.4)',
+        backgroundColor: 'var(--semi-color-overlay-bg)',
         height: '100%',
         width: '100%',
         display: 'flex',

content/show/avatar/index.md

@@ -125,7 +125,7 @@ import { IconCamera } from '@douyinfe/semi-icons';
 
 () => {
     const style = {
-        backgroundColor: 'rgba(0,0,0,.4)',
+        backgroundColor: 'var(--semi-color-overlay-bg)',
         height: '100%',
         width: '100%',
         display: 'flex',

content/show/popover/index-en-US.md

@@ -437,9 +437,9 @@ function Demo() {
             visible
             showArrow
             style={{
-                backgroundColor: 'rgb(0,119,250)',
-                borderColor: 'rgb(0,98,214)',
-                color: 'rgb(255,255,255)',
+                backgroundColor: 'rgba(var(--semi-blue-4),1)',
+                borderColor: 'rgba(var(--semi-blue-4),1)',
+                color: 'var(--semi-color-white)',
                 borderWidth: 1,
                 borderStyle: 'solid',
             }}

content/show/popover/index.md

@@ -437,9 +437,9 @@ function Demo() {
             visible
             showArrow
             style={{
-                backgroundColor: 'rgb(0,119,250)',
-                borderColor: 'rgb(0,98,214)',
-                color: 'rgb(255,255,255)',
+                backgroundColor: 'rgba(var(--semi-blue-4),1)',
+                borderColor: 'rgba(var(--semi-blue-4),1)',
+                color: 'var(--semi-color-white)',
                 borderWidth: 1,
                 borderStyle: 'solid',
             }}