docs(darkmode): add demo and Timeline content add color scss variable (#313)

content/start/dark-mode/index-en-US.md

@@ -9,7 +9,7 @@ order: 4
 
 ## Dark mode
 
-Semi's default theme and custom themes configured through Theme Store come with both light and dark modes, which can be easily switched. 
+Semi's default theme and custom themes configured through Theme Store come with both light and dark modes, which can be easily switched. Semi also supports the use of dark mode in a partial area of the page.
 
 ## How to switch
 To use Dark Mode, you could simply add `[theme-mode='dark']` to `body` in any way you prefer. Here is a quick idea:
@@ -27,12 +27,8 @@ For instance:
 import React from 'react';
 import { Button } from '@douyinfe/semi-ui';
 
-class Demo extends React.Component {
-    constructor() {
-        super();
-    }
-
-    switchMode() {
+function Demo() {
+    const switchMode = () => {
         const body = document.body;
         if (body.hasAttribute('theme-mode')) {
             body.removeAttribute('theme-mode');
@@ -45,15 +41,13 @@ class Demo extends React.Component {
         }
     }
 
-    render() {
-        return (
-            <Button
-                onClick={this.switchMode}
-            >
-                Switch Mode
-            </Button>
-        );
-    }
+    return (
+        <Button
+            onClick={switchMode}
+        >
+            Switch Mode
+        </Button>
+    );
 }
 ```
 
@@ -83,3 +77,245 @@ function matchMode(e) {
 
 mql.addListener(matchMode);
 ```
+
+## Block Dark/Light Mode
+
+Semi 2.0 natively supports block dark/bright color mode, and you can add `.semi-always-dark` or `.semi-always-light` to areas that require block dark or bright colors as needed.
+
+> Note: this is not work for pop-up layers or components
+
+```jsx live=true dir="column" hideInDSM
+import React from 'react';
+import { Layout, Nav, Button, Breadcrumb, Skeleton, Avatar } from '@douyinfe/semi-ui';
+import { IconSemiLogo, IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, IconHistogram, IconLive, IconSetting } from '@douyinfe/semi-icons';
+
+() => {
+    const { Header, Footer, Sider, Content } = Layout;
+    const [mode, setMode] = useState('semi-always-dark');
+
+    const switchMode = () => {
+        const newMode = mode === 'semi-always-dark' ? 'semi-always-light' : 'semi-always-dark';
+        setMode(newMode);
+    };
+
+    const rowStyle = { margin: '16px 10px' };
+    const badgeStyle = {
+        width: '42px',
+        height: '42px',
+        borderRadius: '4px',
+        display: 'inline-block',
+    };
+    const tagStyle = { marginRight: 8, marginBottom: 8 };
+
+    return (
+        <>
+            <Button
+                onClick={switchMode}
+                style={{ marginBottom: 4 }}
+            >
+                Switch Content Mode
+            </Button>
+            <Layout style={{ border: '1px solid var(--semi-color-border)' }}>
+                <Header style={{ backgroundColor: 'var(--semi-color-bg-1)' }}>
+                    <div >
+                        <Nav mode='horizontal' defaultSelectedKeys={['Home']}>
+                            <Nav.Header>
+                                <IconSemiLogo style={{ fontSize: 36 }} />
+                            </Nav.Header>
+                            <span
+                                style={{
+                                    color: 'var(--semi-color-text-2)'
+                                }}
+                            >
+                                <span
+                                    style={{
+                                        marginRight: '24px',
+                                        color: 'var(--semi-color-text-0)',
+                                        fontWeight: '600',
+                                    }}>Semi Design</span>
+                                <span style={{ marginRight: '24px' }}>Semi Theme</span>
+                                <span>Semi Blocks</span>
+                            </span>
+                            <Nav.Footer>
+                                <Button
+                                    theme="borderless"
+                                    icon={<IconBell size="large" />}
+                                    style={{
+                                        color: 'var(--semi-color-text-2)',
+                                        marginRight: '12px',
+                                    }}
+                                />
+                                <Button
+                                    theme="borderless"
+                                    icon={<IconHelpCircle size="large" />}
+                                    style={{
+                                        color: 'var(--semi-color-text-2)',
+                                        marginRight: '12px',
+                                    }}
+                                />
+                                <Avatar color='orange' size='small'>YJ</Avatar>
+                            </Nav.Footer>
+                        </Nav>
+                    </div>
+                </Header>
+                <Layout >
+                    <Sider style={{ backgroundColor: 'var(--semi-color-bg-1)' }}>
+                        <Nav
+                            style={{ maxWidth: 220, height: '100%' }}
+                            defaultSelectedKeys={['Home']}
+                            items={[
+                                { itemKey: 'Home', text: 'Home', icon: <IconHome size="large" /> },
+                                { itemKey: 'Histogram', text: 'Histogram', icon: <IconHistogram size="large" /> },
+                                { itemKey: 'Live', text: 'Live', icon: <IconLive size="large" /> },
+                                { itemKey: 'Setting', text: 'Setting', icon: <IconSetting size="large" /> },
+                            ]}
+                            footer={{
+                                collapseButton: true,
+                            }}
+                        />
+                    </Sider>
+                    <Content
+                        className={mode}
+                        style={{
+                            padding: '24px',
+                            backgroundColor: 'var(--semi-color-bg-1)'
+                        }}
+                    >
+                        <Breadcrumb
+                            style={{
+                                marginBottom: '24px'
+                            }}
+                            routes={['Home', 'Page Section', 'Detail']}
+                        />
+                        <div
+                            style={{
+                                borderRadius: '10px',
+                                border: '1px solid var(--semi-color-border)',
+                                height: '700px',
+                                padding: '32px'
+                            }}
+                        >
+                            <Row style={rowStyle}>
+                                <Nav
+                                    mode={'horizontal'}
+                                    items={[
+                                        { itemKey: 'user', text: 'Option1', icon: <IconEdit /> },
+                                        { itemKey: 'union', text: 'Option2', icon: <IconCamera /> },
+                                        {
+                                            itemKey: 'approve-management',
+                                            text: 'Group3',
+                                            icon: <IconList />,
+                                            items: [
+                                                '3-1',
+                                                '3-2'
+                                            ]
+                                        },
+                                    ]}
+                                />
+                                <br /><br />
+                                <Pagination total={80} showSizeChanger></Pagination>
+                                <br />
+                                <Steps current={1}>
+                                    <Steps.Step title="Finished" description="This is a description." />
+                                    <Steps.Step title="In Progress" description="This is a description." />
+                                    <Steps.Step title="Waiting" description="This is a description." />
+                                </Steps>
+                                <br />
+                                <Steps current={1} status="error">
+                                    <Steps.Step title="Finished" description="This is a description" />
+                                    <Steps.Step title="In Process" description="This is a description" />
+                                    <Steps.Step title="Waiting" description="This is a description" />
+                                </Steps>
+                            </Row>
+                            <Row style={rowStyle}>
+                                <div style={{ display: 'flex' }}>
+                                    <div style={{ padding: 8 }}>
+                                        <Badge count={5} theme='solid' >
+                                            <Avatar color='blue' shape='square' style={badgeStyle}>XZ</Avatar>
+                                        </Badge>
+                                    </div>
+                                    <div style={{ padding: 8 }}>
+                                        <Badge count={5} theme='light' >
+                                            <Avatar color='cyan' shape='square' style={badgeStyle}>YB</Avatar>
+                                        </Badge>
+                                    </div>
+                                    <div style={{ padding: 8 }}>
+                                        <Badge count={5} theme='inverted'>
+                                            <Avatar color='indigo' shape='square' style={badgeStyle}>LX</Avatar>
+                                        </Badge>
+                                    </div>
+                                    <div style={{ padding: 8 }}>
+                                        <Badge dot theme='solid' >
+                                            <Avatar color='light-blue' shape='square' style={badgeStyle}>YZ</Avatar>
+                                        </Badge>
+                                    </div>
+                                    <div style={{ padding: 8 }}>
+                                        <Badge dot theme='light' >
+                                            <Avatar color='teal' shape='square' style={badgeStyle}>HW</Avatar>
+                                        </Badge>
+                                    </div>
+                                    <div style={{ padding: '8px', borderRadius: '4px', backgroundColor: 'var(--semi-color-fill-0)' }}>
+                                        <Badge dot theme='inverted'>
+                                            <Avatar color='green' shape='square' style={badgeStyle}>XM</Avatar>
+                                        </Badge>
+                                    </div>
+                                </div>
+                                <br />
+                                <div>
+                                    <Tag color='grey' style={tagStyle}> grey tag </Tag>
+                                    <Tag color='blue' style={tagStyle}> blue tag </Tag>
+                                    <Tag color='blue' type='ghost' style={tagStyle}> ghost tag </Tag>
+                                    <Tag color='blue' type='solid' style={tagStyle}> solid tag </Tag>
+                                    <Tag color='red' style={tagStyle}> red tag </Tag>
+                                    <Tag color='green' style={tagStyle}> green tag </Tag>
+                                    <Tag color='orange' style={tagStyle}> orange tag </Tag>
+                                    <Tag color='teal' style={tagStyle}> teal tag </Tag>
+                                    <Tag color='violet' style={tagStyle}> violet tag </Tag>
+                                    <Tag color='white' style={tagStyle}> white tag </Tag>
+                                </div>
+                                <br />
+                                <div style={{ display: 'flex', alignItems: 'center' }}>
+                                    <Popover content={'hi semi-design'} style={{ padding: 8 }}><Tag style={{ marginRight: 8 }}>I am Popover</Tag></Popover>
+                                    <Tooltip content={'hi semi-design'}>
+                                        <Tag style={{ marginRight: 8 }}>I am Tooltip</Tag>
+                                    </Tooltip>
+                                    <Rating defaultValue={3} size='small' style={{ marginRight: 8 }} />
+                                </div>
+                                <br />
+                                <Timeline>
+                                    <Timeline.Item time='2019-07-14 10:35' type='ongoing'>审核中</Timeline.Item>
+                                    <Timeline.Item time='2019-06-13 16:17' type='success'>发布成功</Timeline.Item>
+                                    <Timeline.Item time='2019-05-14 18:34' type='error'>审核失败</Timeline.Item>
+                                </Timeline>
+                            </Row>
+                        </div>
+                    </Content>
+                </Layout>
+                <Footer
+                    style={{
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        padding: '20px',
+                        color: 'var(--semi-color-text-2)',
+                        backgroundColor: 'rgba(var(--semi-grey-0), 1)',
+                    }}
+                >
+                    <span
+                        style={{
+                            display: 'flex',
+                            alignItems: 'center',
+                        }}
+                    >
+                        <IconBytedanceLogo size="large" style={{ marginRight: '8px' }} />
+                        <span>Copyright © 2019 ByteDance. All Rights Reserved. </span>
+                    </span>
+                    <span>
+                        <span style={{ marginRight: '24px' }}>Customer Service</span>
+                        <span>Feedback</span>
+                    </span>
+                </Footer>
+            </Layout>
+        </>
+    )
+}
+```

content/start/dark-mode/index.md

@@ -9,7 +9,7 @@ order: 4
 
 ## 暗色模式
 
-Semi 的默认主题和通过主题商店配置的定制主题都自带了亮色模式与暗色模式，可以方便地进行切换。
+Semi 的默认主题和通过主题商店配置的定制主题都自带了亮色模式与暗色模式，可以方便地进行切换。Semi 也支持在页面的局部范围使用暗色模式。
 
 ## 如何切换
 Semi 暗色模式的切换是通过给 `body` 添加属性 `[theme-mode='dark']` 来实现的。你可以使用任何你喜欢的方式来进行切换。比如：
@@ -27,14 +27,8 @@ if (body.hasAttribute('theme-mode')) {
 import React from 'react';
 import { Button } from '@douyinfe/semi-ui';
 
-class Demo extends React.Component {
-    constructor() {
-        super();
-        // 为了通知官网记录当前模式，这里引入了监听模式变化
-        // 不同的业务场景可能会采取不同方式，请留意
-    }
-
-    switchMode() {
+function Demo() {
+    const switchMode = () => {
         const body = document.body;
         if (body.hasAttribute('theme-mode')) {
             body.removeAttribute('theme-mode');
@@ -46,15 +40,13 @@ class Demo extends React.Component {
         }
     }
 
-    render() {
-        return (
-            <Button
-                onClick={this.switchMode}
-            >
-                Switch Mode
-            </Button>
-        );
-    }
+    return (
+        <Button
+            onClick={switchMode}
+        >
+            Switch Mode
+        </Button>
+    );
 }
 ```
 
@@ -82,4 +74,252 @@ function matchMode(e) {
 }
 
 mql.addListener(matchMode);
+```
+
+## 局部暗色/亮色模式
+
+Semi 2.0 原生支持局部暗色/亮色模式。使用时，在顶级元素上添加 `.semi-always-dark` 或 `.semi-always-light` 类，这个类下的组件会使用对应模式的颜色变量。
+
+> 注意局部暗色/亮色对弹出层不生效
+
+```jsx live=true dir="column" hideInDSM
+import React from 'react';
+import { Layout, Nav, Button, Breadcrumb, Avatar } from '@douyinfe/semi-ui';
+import { IconSemiLogo, IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, IconHistogram, IconLive, IconSetting } from '@douyinfe/semi-icons';
+
+() => {
+    const { Header, Footer, Sider, Content } = Layout;
+    const [mode, setMode] = useState('semi-always-dark');
+
+    const switchMode = () => {
+        const newMode = mode === 'semi-always-dark' ? 'semi-always-light' : 'semi-always-dark';
+        setMode(newMode);
+    };
+
+    const rowStyle = { margin: '16px 10px' };
+    const badgeStyle = {
+        width: '42px',
+        height: '42px',
+        borderRadius: '4px',
+        display: 'inline-block',
+    };
+    const tagStyle = { marginRight: 8, marginBottom: 8 };
+
+    return (
+        <>
+            <Button
+                onClick={switchMode}
+                style={{ marginBottom: 4 }}
+            >
+                Switch Content Mode
+            </Button>
+            <Layout style={{ border: '1px solid var(--semi-color-border)' }}>
+                <Header style={{ backgroundColor: 'var(--semi-color-bg-1)' }}>
+                    <div>
+                        <Nav mode="horizontal" defaultSelectedKeys={['Home']}>
+                            <Nav.Header>
+                                <IconSemiLogo style={{ width: '96px', height: '36px', fontSize: 36 }} />
+                            </Nav.Header>
+                            <span
+                                style={{
+                                    color: 'var(--semi-color-text-2)',
+                                }}
+                            >
+                                <span
+                                    style={{
+                                        marginRight: '24px',
+                                        color: 'var(--semi-color-text-0)',
+                                        fontWeight: '600',
+                                    }}
+                                >
+                                    模版推荐
+                                </span>
+                                <span style={{ marginRight: '24px' }}>所有模版</span>
+                                <span>我的模版</span>
+                            </span>
+                            <Nav.Footer>
+                                <Button
+                                    theme="borderless"
+                                    icon={<IconBell size="large" />}
+                                    style={{
+                                        color: 'var(--semi-color-text-2)',
+                                        marginRight: '12px',
+                                    }}
+                                />
+                                <Button
+                                    theme="borderless"
+                                    icon={<IconHelpCircle size="large" />}
+                                    style={{
+                                        color: 'var(--semi-color-text-2)',
+                                        marginRight: '12px',
+                                    }}
+                                />
+                                <Avatar color="orange" size="small">
+                                    YJ
+                                </Avatar>
+                            </Nav.Footer>
+                        </Nav>
+                    </div>
+                </Header>
+                <Layout>
+                    <Sider style={{ backgroundColor: 'var(--semi-color-bg-1)' }}>
+                        <Nav
+                            style={{ maxWidth: 220, height: '100%' }}
+                            defaultSelectedKeys={['Home']}
+                            items={[
+                                { itemKey: 'Home', text: '首页', icon: <IconHome size="large" /> },
+                                { itemKey: 'Histogram', text: '基础数据', icon: <IconHistogram size="large" /> },
+                                { itemKey: 'Live', text: '测试功能', icon: <IconLive size="large" /> },
+                                { itemKey: 'Setting', text: '设置', icon: <IconSetting size="large" /> },
+                            ]}
+                            footer={{
+                                collapseButton: true,
+                            }}
+                        />
+                    </Sider>
+                    <Content
+                        className={mode}
+                        style={{
+                            padding: '24px',
+                            backgroundColor: 'var(--semi-color-bg-1)',
+                        }}
+                    >
+                        <Breadcrumb
+                            style={{
+                                marginBottom: '24px',
+                            }}
+                            routes={['首页', '当这个页面标题很长时需要省略', '上一页', '详情页']}
+                        />
+                        <div
+                            style={{
+                                borderRadius: '10px',
+                                border: '1px solid var(--semi-color-border)',
+                                height: '700px',
+                                padding: '32px'
+                            }}
+                        >
+                            <Row style={rowStyle}>
+                                <Nav
+                                    mode={'horizontal'}
+                                    items={[
+                                        { itemKey: 'user', text: 'Option1', icon: <IconEdit /> },
+                                        { itemKey: 'union', text: 'Option2', icon: <IconCamera /> },
+                                        {
+                                            itemKey: 'approve-management',
+                                            text: 'Group3',
+                                            icon: <IconList />,
+                                            items: [
+                                                '3-1',
+                                                '3-2'
+                                            ]
+                                        },
+                                    ]}
+                                />
+                                <br /><br />
+                                <Pagination total={80} showSizeChanger></Pagination>
+                                <br />
+                                <Steps current={1}>
+                                    <Steps.Step title="Finished" description="This is a description." />
+                                    <Steps.Step title="In Progress" description="This is a description." />
+                                    <Steps.Step title="Waiting" description="This is a description." />
+                                </Steps>
+                                <br />
+                                <Steps current={1} status="error">
+                                    <Steps.Step title="Finished" description="This is a description" />
+                                    <Steps.Step title="In Process" description="This is a description" />
+                                    <Steps.Step title="Waiting" description="This is a description" />
+                                </Steps>
+                            </Row>
+                            <Row style={rowStyle}>
+                                <div style={{ display: 'flex' }}>
+                                    <div style={{ padding: 8 }}>
+                                        <Badge count={5} theme='solid' >
+                                            <Avatar color='blue' shape='square' style={badgeStyle}>XZ</Avatar>
+                                        </Badge>
+                                    </div>
+                                    <div style={{ padding: 8 }}>
+                                        <Badge count={5} theme='light' >
+                                            <Avatar color='cyan' shape='square' style={badgeStyle}>YB</Avatar>
+                                        </Badge>
+                                    </div>
+                                    <div style={{ padding: 8 }}>
+                                        <Badge count={5} theme='inverted'>
+                                            <Avatar color='indigo' shape='square' style={badgeStyle}>LX</Avatar>
+                                        </Badge>
+                                    </div>
+                                    <div style={{ padding: 8 }}>
+                                        <Badge dot theme='solid' >
+                                            <Avatar color='light-blue' shape='square' style={badgeStyle}>YZ</Avatar>
+                                        </Badge>
+                                    </div>
+                                    <div style={{ padding: 8 }}>
+                                        <Badge dot theme='light' >
+                                            <Avatar color='teal' shape='square' style={badgeStyle}>HW</Avatar>
+                                        </Badge>
+                                    </div>
+                                    <div style={{ padding: '8px', borderRadius: '4px', backgroundColor: 'var(--semi-color-fill-0)' }}>
+                                        <Badge dot theme='inverted'>
+                                            <Avatar color='green' shape='square' style={badgeStyle}>XM</Avatar>
+                                        </Badge>
+                                    </div>
+                                </div>
+                                <br />
+                                <div>
+                                    <Tag color='grey' style={tagStyle}> grey tag </Tag>
+                                    <Tag color='blue' style={tagStyle}> blue tag </Tag>
+                                    <Tag color='blue' type='ghost' style={tagStyle}> ghost tag </Tag>
+                                    <Tag color='blue' type='solid' style={tagStyle}> solid tag </Tag>
+                                    <Tag color='red' style={tagStyle}> red tag </Tag>
+                                    <Tag color='green' style={tagStyle}> green tag </Tag>
+                                    <Tag color='orange' style={tagStyle}> orange tag </Tag>
+                                    <Tag color='teal' style={tagStyle}> teal tag </Tag>
+                                    <Tag color='violet' style={tagStyle}> violet tag </Tag>
+                                    <Tag color='white' style={tagStyle}> white tag </Tag>
+                                </div>
+                                <br />
+                                <div style={{ display: 'flex', alignItems: 'center' }}>
+                                    <Popover content={'hi semi-design'} style={{ padding: 8 }}><Tag style={{ marginRight: 8 }}>I am Popover</Tag></Popover>
+                                    <Tooltip content={'hi semi-design'}>
+                                        <Tag style={{ marginRight: 8 }}>I am Tooltip</Tag>
+                                    </Tooltip>
+                                    <Rating defaultValue={3} size='small' style={{ marginRight: 8 }} />
+                                </div>
+                                <br />
+                                <Timeline>
+                                    <Timeline.Item time='2019-07-14 10:35' type='ongoing'>审核中</Timeline.Item>
+                                    <Timeline.Item time='2019-06-13 16:17' type='success'>发布成功</Timeline.Item>
+                                    <Timeline.Item time='2019-05-14 18:34' type='error'>审核失败</Timeline.Item>
+                                </Timeline>
+                            </Row>
+                        </div>
+                    </Content>
+                </Layout>
+                <Footer
+                    style={{
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        padding: '20px',
+                        color: 'var(--semi-color-text-2)',
+                        backgroundColor: 'rgba(var(--semi-grey-0), 1)',
+                    }}
+                >
+                    <span
+                        style={{
+                            display: 'flex',
+                            alignItems: 'center',
+                        }}
+                    >
+                        <IconBytedanceLogo size="large" style={{ marginRight: '8px' }} />
+                        <span>Copyright © 2019 ByteDance. All Rights Reserved. </span>
+                    </span>
+                    <span>
+                        <span style={{ marginRight: '24px' }}>平台客服</span>
+                        <span>反馈建议</span>
+                    </span>
+                </Footer>
+            </Layout>
+        </>
+    );
+};
+
 ```

gatsby-node.js

@@ -251,7 +251,8 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
  
     // 在此你可以处理searchData(GraphQL查询的raw数据) 或者传入回调 处理运算后的数据
     processGraphQLData(searchData, processedData => {});
-    fs.copyFileSync('./search/data_client.json', './static/search_data_client.json');
+    // 搜索有用到，但是目前没有搜索，先注释掉，不然影响文档站的本地调试
+    // fs.copyFileSync('./search/data_client.json', './static/search_data_client.json');
     //   console.log('building search data success.')
     // 搜索数据处理结束
     const result = await graphql(`

packages/semi-foundation/timeline/timeline.scss

@@ -94,6 +94,7 @@ $module: #{$prefix}-timeline;
             position: relative;
             margin: $spacing-none $spacing-none $spacing-none $spacing-timeline_content-marginLeft;
             word-break: break-word;
+            color: $color-timeline_item_content-text-default;
 
             &-extra,
             &-time {

packages/semi-foundation/timeline/variables.scss

@@ -6,6 +6,7 @@ $color-timeline_dot_info-bg-default: var(--semi-color-tertiary-light-active); //
 $color-timeline_tail-border: var(--semi-color-text-3); // 时间轴连线颜色
 $color-timeline_time_default-text-default: var(--semi-color-text-2); // 时间轴文字颜色 - 默认
 $color-timeline_item_head-bg: transparent; // 时间轴头部背景颜色
+$color-timeline_item_content-text-default: var(--semi-color-text-0); // 时间轴标题文字颜色
 
 $spacing-timeline-margin: $spacing-none; // 时间轴整体外边距
 $spacing-timeline-padding: $spacing-tight; // 时间轴整体内边距