feat: reform style of components

hrsdef · Jan 4, 2022 · 7038895 · 7038895
1 parent 70b9546
commit 7038895
Show file tree

Hide file tree

Showing 44 changed files with 1,269 additions and 1,151 deletions.
diff --git a/components/affix/styles.ts b/components/affix/styles.ts
@@ -1,12 +1,15 @@
 import {css} from '@emotion/css';
-import {theme} from '../../styles/theme';
+import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults} from '../../styles/utils';
 import '../../styles/global';
 
-const {affix} = deepDefaults(theme, {
-    affix: {
-        zIndex: 9
-    }
+const defaults = {
+    zIndex: 9
+};
+
+let affix: any;
+setDefault(() => {
+    affix = deepDefaults(theme, {affix: defaults}).affix;
 });
 
 export function makeStyles() {

diff --git a/components/badge/styles.ts b/components/badge/styles.ts
@@ -1,19 +1,22 @@
 import {css, cx} from '@emotion/css';
-import {theme, ThemeValue} from '../../styles/theme';
+import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults, palette}  from '../../styles/utils';
 import '../../styles/global';
 
-const {badge} = deepDefaults(theme, {
-    badge: {
-        width: '8px',
-        get height() { return badge.width },
-        bgColor: '#ff4133',
-
-        // has-text
-        textHeight: '16px',
-        textPadding: '5px',
-        textColor: '#fff',
-    },
+const defaults = {
+    width: '8px',
+    get height() { return badge.width },
+    bgColor: '#ff4133',
+
+    // has-text
+    textHeight: '16px',
+    textPadding: '5px',
+    textColor: '#fff',
+};
+
+let badge: any;
+setDefault(() => {
+    badge = deepDefaults(theme, {badge: defaults}).badge;
 });
 
 export default function makeStyles() {

diff --git a/components/breadcrumb/styles.ts b/components/breadcrumb/styles.ts
@@ -1,17 +1,20 @@
 import {css, cx} from '@emotion/css';
 import {deepDefaults, darken} from '../../styles/utils';
-import {theme} from '../../styles/theme';
+import {theme, setDefault} from '../../styles/theme';
 import '../../styles/global';
 
-const {breadcrumb} = deepDefaults(theme, {
-    breadcrumb: {
-        fontSize: '14px',
-        get color() { return theme.color.lightBlack },
-        get hoverColor() {return theme.color.primary },
-        gap: '6px',
-        activeFontWeight: 'normal',
-        activeColor: `#262626`,
-    }
+const defaults = {
+    fontSize: '14px',
+    get color() { return theme.color.lightBlack },
+    get hoverColor() {return theme.color.primary },
+    gap: '6px',
+    activeFontWeight: 'normal',
+    activeColor: `#262626`,
+};
+
+let breadcrumb: any;
+setDefault(() => {
+    breadcrumb = deepDefaults(theme, {breadcrumb: defaults}).breadcrumb;
 });
 
 export default function makeStyles() {

diff --git a/components/button/styles.ts b/components/button/styles.ts
@@ -139,7 +139,7 @@ const defaults = deepDefaults(
 let button: any;
 setDefault(() => {
     button = deepDefaults(theme, {button: defaults}).button;
-})
+});
 
 export {button};
 

diff --git a/components/card/styles.ts b/components/card/styles.ts
@@ -10,12 +10,12 @@ const defaults = {
     headerHeight: '48px',
     headerFontSize: '14px',
     bgColor: '#fff',
-}
+};
 
 let card: any;
 setDefault(() => {
     card = deepDefaults(theme, {card: defaults}).card;
-})
+});
 
 export function makeStyles() {
     return css`

diff --git a/components/carousel/styles.ts b/components/carousel/styles.ts
@@ -1,39 +1,42 @@
 import {css} from '@emotion/css';
-import {theme} from '../../styles/theme';
+import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults} from '../../styles/utils';
 import '../../styles/global';
 
-const {carousel} = deepDefaults(theme, {
-    carousel: {
-        transition: `.5s ease`,
-        height: `300px`,
+const defaults = {
+    transition: `.5s ease`,
+    height: `300px`,
 
-        indicator: {
-            bottom: `8px`,
-            height: `20px`,
-        },
-        dot: {
-            paddingTop: `8px`,
-            margin: `0 2px`,
-            height: `3px`,
-            width: `16px`,
-            opacity: `.3`,
-            bgColor: `#fff`,
-            active: {
-                opacity: `1`,
-                width: `24px`,
-            }
-        },
-
-        arrow: {
-            bgColor: `rgba(0, 0, 0, .5)`,
-            color: `#fff`,
-            opacity: `.5`,
-            hoverOpacity: `1`,
-            left: `10px`,
-            right: `10px`,
+    indicator: {
+        bottom: `8px`,
+        height: `20px`,
+    },
+    dot: {
+        paddingTop: `8px`,
+        margin: `0 2px`,
+        height: `3px`,
+        width: `16px`,
+        opacity: `.3`,
+        bgColor: `#fff`,
+        active: {
+            opacity: `1`,
+            width: `24px`,
         }
+    },
+
+    arrow: {
+        bgColor: `rgba(0, 0, 0, .5)`,
+        color: `#fff`,
+        opacity: `.5`,
+        hoverOpacity: `1`,
+        left: `10px`,
+        right: `10px`,
     }
+};
+
+let carousel: any;
+setDefault(() => {
+    carousel = deepDefaults(theme, {carousel: defaults}).carousel;
 });
 
 export function makeStyles() {

diff --git a/components/cascader/styles.ts b/components/cascader/styles.ts
@@ -1,30 +1,33 @@
 import {css} from '@emotion/css';
-import {theme} from '../../styles/theme';
+import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults, sizes, Sizes, getRight, getLeft} from '../../styles/utils';
 import '../../styles/global';
 
-const {cascader} = deepDefaults(theme, {
-    cascader: {
-        width: '140px',
-        height: '160px',
-        loadingGap: '20px',
-        arrowGap: '8px',
-        get selectedColor() { return theme.color.primary },
-        get activeBgColor() { return theme.color.bg },
+const defaults = {
+    width: '140px',
+    height: '160px',
+    loadingGap: '20px',
+    arrowGap: '8px',
+    get selectedColor() { return theme.color.primary },
+    get activeBgColor() { return theme.color.bg },
 
-        // empty
-        empty: {
-            padding: `16px`,
-            get color() { return theme.color.placeholder },
-        },
+    // empty
+    empty: {
+        padding: `16px`,
+        get color() { return theme.color.placeholder },
+    },
 
-        // filter
-        filter: {
-            get highlightColor() { return theme.color.danger },
-            minWidth: '300px',
-            maxHeight: '200px',
-        }
+    // filter
+    filter: {
+        get highlightColor() { return theme.color.danger },
+        minWidth: '300px',
+        maxHeight: '200px',
     }
+};
+
+let cascader: any;
+setDefault(() => {
+    cascader = deepDefaults(theme, {cascader: defaults}).cascader;
 });
 
 export function makeMenuStyles() {

diff --git a/components/checkbox/styles.ts b/components/checkbox/styles.ts
@@ -1,48 +1,51 @@
 import {css, cx} from '@emotion/css';
-import {theme, ThemeValue} from '../../styles/theme';
+import {theme, ThemeValue, setDefault} from '../../styles/theme';
 import {deepDefaults, palette, getLeft}  from '../../styles/utils';
 import '../../styles/global';
 
-const {checkbox} = deepDefaults(theme, {
-    checkbox: {
-        width: '14px',
-        get borderColor() { return theme.color.darkBorder },
-        get borderRadius() { return theme.borderRadius },
-        get transition() { return theme.transition },
-        bgColor: '#fff',
-
-        // text
-        text: {
-            gap: '8px',
-        },
-
-        // checked
-        checked: {
-            get borderColor() { return theme.color.primary },
-            get bgColor() { return checkbox.checked.borderColor },
-        },
+const defaults = {
+    width: '14px',
+    get borderColor() { return theme.color.darkBorder },
+    get borderRadius() { return theme.borderRadius },
+    get transition() { return theme.transition },
+    bgColor: '#fff',
+
+    // text
+    text: {
+        gap: '8px',
+    },
 
-        inner: {
-            width: '5px',
-            height: '10px',
-            top: '-1px',
-            left: '4px',
-            border: '1px solid #fff',
-        },
+    // checked
+    checked: {
+        get borderColor() { return theme.color.primary },
+        get bgColor() { return checkbox.checked.borderColor },
+    },
 
-        // disabled
-        disabled: {
-            get color() { return theme.color.disabled },
-            get borderColor() { return theme.color.disabledBorder },
-            get bgColor() { return theme.color.disabledBg }, 
-            get innerColor() { return theme.color.disabledBorder }, 
-        },
+    inner: {
+        width: '5px',
+        height: '10px',
+        top: '-1px',
+        left: '4px',
+        border: '1px solid #fff',
+    },
 
-        // indeterminate
-        indeterminate: {
-            innerLeft: '3px'
-        }
+    // disabled
+    disabled: {
+        get color() { return theme.color.disabled },
+        get borderColor() { return theme.color.disabledBorder },
+        get bgColor() { return theme.color.disabledBg }, 
+        get innerColor() { return theme.color.disabledBorder }, 
     },
+
+    // indeterminate
+    indeterminate: {
+        innerLeft: '3px'
+    }
+};
+
+let checkbox: any;
+setDefault(() => {
+    checkbox = deepDefaults(theme, {checkbox: defaults}).checkbox;
 });
 
 export default function makeStyles() {

diff --git a/components/collapse/styles.ts b/components/collapse/styles.ts
@@ -1,23 +1,26 @@
 import {deepDefaults}  from '../../styles/utils';
-import {theme} from '../../styles/theme';
+import {theme, setDefault} from '../../styles/theme';
 import {css} from '@emotion/css';
 import '../../styles/global';
 
 export const kls = (className: string) => `k-collapse-${className}`;
 
-const {collapse} = deepDefaults(theme, {
-    collapse: {
-        fontSize: '12px',
-        titleMarginRight: '8px',
-        borderPadding: '0 24px',
-        collBorder: '1px solid #eee',
+const defaults = {
+    fontSize: '12px',
+    titleMarginRight: '8px',
+    borderPadding: '0 24px',
+    collBorder: '1px solid #eee',
 
-        item: {
-            borderBottom: '1px solid #e5e5e5',
-            titleHeight: '40px',
-            contentPadding: '0 16px 16px'
-        }
+    item: {
+        borderBottom: '1px solid #e5e5e5',
+        titleHeight: '40px',
+        contentPadding: '0 16px 16px'
     }
+};
+
+let collapse: any;
+setDefault(() => {
+    collapse = deepDefaults(theme, {collapse: defaults}).collapse;
 });
 
 export function makeStyles() {