update: 2.0 release

docs/api.md

@@ -1,27 +1,41 @@
----
-outline: deep
----
-
 # API
 
  `flexstyled`仅提供了少量的API。
 
-
  ## styled
 
- 核心API`styled`可以用于：
+```ts
 
- - 创建样式对象
- - 封装高阶组件
- - 创建`HTML Tag`样式组件
+// 创建样式对象
+function styled<Props=any,Styles extends CSSRuleObject<Props> = CSSRuleObject<Props>, CombindStyles extends StyledObject[]=StyledObject[]>(styles:Styles,options?:StyledOptions):StyledObject<CSSVars<Styles>> 
+// 创建样式对象，并指定组合样式
+function styled<Props=any,Styles extends CSSRuleObject<Props> = CSSRuleObject<Props>, CombindStyles extends StyledObject[]=StyledObject[]>(styles:Styles,combindStyles:CombindStyles,options?:StyledOptions):StyledObject<CSSVars<Styles>>
+// 封装React组件
+function styled<Props=any,Styles extends CSSRuleObject<Props> = CSSRuleObject<Props>, CombindStyles extends StyledObject[]=StyledObject[]>(FC: StyledComponent<Props>,styles:Styles,options?:StyledOptions):(props:Props)=>ReactElement
+// 封装React组件, 并指定组合样式
+function styled<Props=any,Styles extends CSSRuleObject<Props> = CSSRuleObject<Props>, CombindStyles extends StyledObject[]=StyledObject[]>(FC: StyledComponent<Props>,styles:Styles,combindStyles:CombindStyles,options?:StyledOptions):(props:Props)=>ReactElement
+```
 
-`styled`函数签名如下：
-
+## createTheme
+
+```ts
+type ThemeOptions = {
+    id?:string
+    prefix ?: string                // 为css变量自动添加前缀
+}
+
+type Theme<T extends CSSVariables>  = T & {
+    load(vars:Partial<T>):void
+    update(vars:Partial<T>):void
+    save(fn:(vars:T)=>void):void
+    reset():void
+} 
 
-## keyframes
+function createTheme<T extends CSSVariables = CSSVariables>(vars:T,options?:ThemeOptions):Theme
 
+```
 
 ## useStyled
 
 
-## ThemeManager
+## keyframes

docs/guide/createStyle.md

@@ -6,11 +6,12 @@
 
 ```ts
 type StyledObject ={
-    className: string
-    styleId  : string
-    vars     : Record<string,string | number> 
-    getStyle : (css?:CSSRuleObject,props?:any)=>CSSProperties
-    props    : (css?:CSSRuleObject,options?:{props?:any,className?:string})=>{ className:string,style  : CSSProperties}
+    id            : string
+    className     : string    
+    vars          : Vars    
+    computedStyles: ComputedStyles
+    getStyle      : (css?:CSSRuleObject,props?:any)=>CSSProperties
+    getProps      : (params?:{style?:CSSRuleObject,props?:any,className?:string})=>StyledResult
 }
 ```
 
@@ -40,7 +41,7 @@ interface StyledButtonProps {
 }
 const StyledButton:React:FC = (props)=>{ 
     // 没使用到动态样式和CSS变量时
-    return <button className={btnStyle.className}} /> 
+    return <button className={btnStyle.className} /> 
     // 用到动态样式时需要传入
     return <button className={btnStyle.className} style={btnStyle.getStyle({props})} /> 
     // 用到动态样式时或传入CSS变量

docs/guide/css-vars.md

@@ -11,8 +11,7 @@ interface CardProps{
 const Card = styled<CardProps>((props,{className,getStyle})=>{
     const { title,children,footer} =props
     return (
-      <div className={className} style={getStyle(
-          style:{                       //   [!code ++]
+      <div className={className} style={getStyle({  
             "--padding":props.padding   //   [!code ++]   // 重载css变量
             color:'red'                 //  [!code ++]    // 额外的内联样式
           }                             //   [!code ++]

docs/guide/useStyled.md

@@ -13,7 +13,7 @@ function useStyled<Props=any>(styles: CSSRuleObject<Props> | (()=>CSSRuleObject<
 ```tsx
 import { useStyled } from "flexstyled"
 
-export const Card:React.FC<React.PropsWithChildren<CardProps>> = ((props:CardProps)=>{
+export const Card:React.FC<React.PropsWithChildren<CardProps>> = (props:CardProps)=>{
     const { title } = props
     const [titleColor,setTitleColor] = useState("blue")
     const {className,getStyle } =  useStyled(
@@ -42,7 +42,7 @@ export const Card:React.FC<React.PropsWithChildren<CardProps>> = ((props:CardPro
         <div className="footer">{props.footer}</div>
       </div>
     )
-  })
+  }
 ```
 
 **说明：**

docs/guide/wrapperComponent.md

@@ -35,8 +35,8 @@ const StyledButton = styled<StyledButtonProps>((props,{className,getStyle})=>{
 也可以使用 `styled` 的简化方式给 `StyledButton` 组件的根元素添加`className`和`style`属性。
 
 ```tsx
-const StyledButton = styled<StyledButtonProps>((props,{props:styleProps})=>{ 
-    return <button  {...styleProps({props})} />
+const StyledButton = styled<StyledButtonProps>((props,{getProps})=>{ 
+    return <button  {...getProps({props})} />
 },{...})
 ```
 

docs/index.md

@@ -9,17 +9,25 @@ hero:
   actions:
     - theme: brand
       text: 快速入门
-      link: /get-starts
+      link: /get-started
     - theme: alt
       text: Github
-      link: /api-examples
+      link: https://github.com/zhangfisher/flexstyled
 
 features:
-  - title: Feature A
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
-  - title: Feature B
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
-  - title: Feature C
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+  - title: 简单快速
+    details: 仅4个核心`API`，性能优秀，体积小巧
+  - title: 特性丰富
+    details: 支持动态样式、媒体查询、主题等
+  - title: 类型安全
+    details: 支持完整的Typescript类型检查
+  - title: 动态样式
+    details: 支持通过 `props` 动态生成样式
+  - title: CSS变量
+    details: 支持 `CSS` 变量，方便主题定制
+  - title: 主题定制
+    details: 方便简洁的主题定制功能
+
+
 ---
 

example/src/Card4.tsx

@@ -13,7 +13,7 @@ export const Card4:React.FC<React.PropsWithChildren<CardProps>> = ((props:CardPr
     const [titleColor,setTitleColor] = useState("blue")
 
     return (
-      <div {...style.props({style:{"--title-color":titleColor},props,className:"xxx"})}>
+      <div {...style.getProps({style:{"--title-color":titleColor},props,className:"xxx"})}>
         <div className="title">            
             <span>{title}</span>
             <span className="tools"><button onClick={()=>setTitleColor(getRandColor())}>Change</button></span>

example/src/ColorButton.tsx

@@ -1,8 +1,7 @@
 /**
  * 显示颜色按钮
  */
-
-import React from 'react';
+
 import { styled } from "../../src"