base6-ui 1.1.1

package/src/config/themes/components/charts/light.ts

@@ -0,0 +1,424 @@
+import { lightBase } from '../../color'
+
+const nameTextStyle = {
+  'color': lightBase['color-gray-10'],
+  'fontWeight': 400,
+  'fontSize': 14,
+  'lineHeight': 20
+}
+
+export const ChartsThemeLight = {
+  'color': [
+    '#5895ff',
+    '#6dd68e',
+    '#f7a55d',
+    '#ef7173',
+    '#cc84ff',
+    '#70c1ff',
+    '#71dad6'
+  ],
+  // 'backgroundColor': 'rgba(0,0,0,0)',
+  'textStyle': {},
+  'title': {
+    'textStyle': {
+      'color': lightBase['color-gray-10'],
+      'fontWeight': 400,
+      'fontSize': 14,
+      'lineHeight': 20
+    },
+    'subtextStyle': {
+      'color': '#93b7e3'
+    }
+  },
+  'line': {
+    'itemStyle': {
+      'borderWidth': '0'
+    },
+    'lineStyle': {
+      'width': '2'
+    },
+    'symbolSize': 0,
+    'symbol': 'circle',
+    'smooth': false
+  },
+  'radar': {
+    'itemStyle': {
+      'borderWidth': '0'
+    },
+    'lineStyle': {
+      'width': '2'
+    },
+    'symbolSize': '0',
+    'symbol': 'circle',
+    'smooth': false
+  },
+  'bar': {
+    'itemStyle': {
+      'barBorderWidth': 0,
+      'barBorderColor': '#ccc',
+      'borderRadius': [4, 4, 0, 0]
+    },
+    'barMaxWidth': 28
+  },
+  'pie': {
+    'padAngle': 1,
+    'itemStyle': {
+      'borderWidth': 0,
+      'borderColor': '#ccc'
+    }
+  },
+  'scatter': {
+    'itemStyle': {
+      'borderWidth': 0,
+      'borderColor': '#ccc'
+    }
+  },
+  'boxplot': {
+    'itemStyle': {
+      'borderWidth': 0,
+      'borderColor': '#ccc'
+    }
+  },
+  'parallel': {
+    'itemStyle': {
+      'borderWidth': 0,
+      'borderColor': '#ccc'
+    }
+  },
+  'sankey': {
+    'itemStyle': {
+      'borderWidth': 0,
+      'borderColor': '#ccc'
+    }
+  },
+  'funnel': {
+    'itemStyle': {
+      'borderWidth': 0,
+      'borderColor': '#ccc'
+    }
+  },
+  'gauge': {
+    'itemStyle': {
+      'borderWidth': 0,
+      'borderColor': '#ccc'
+    }
+  },
+  'candlestick': {
+    'itemStyle': {
+      'color': '#edafda',
+      'color0': 'transparent',
+      'borderColor': '#d680bc',
+      'borderColor0': '#8fd3e8',
+      'borderWidth': '2'
+    }
+  },
+  'graph': {
+    'itemStyle': {
+      'borderWidth': 0,
+      'borderColor': '#ccc'
+    },
+    'lineStyle': {
+      'width': 1,
+      'color': '#aaa'
+    },
+    'symbolSize': '0',
+    'symbol': 'circle',
+    'smooth': false,
+    'color': [
+      '#5895ff',
+      '#6dd68e',
+      '#f7a55d',
+      '#ef7173',
+      '#cc84ff',
+      '#70c1ff',
+      '#71dad6'
+    ],
+    'label': {
+      'color': '#ffffff'
+    }
+  },
+  'map': {
+    'itemStyle': {
+      'areaColor': '#f3f3f3',
+      'borderColor': '#516b91',
+      'borderWidth': 0.5
+    },
+    'label': {
+      'color': '#000'
+    },
+    'emphasis': {
+      'itemStyle': {
+        'areaColor': '#a5e7f0',
+        'borderColor': '#516b91',
+        'borderWidth': 1
+      },
+      'label': {
+        'color': '#516b91'
+      }
+    }
+  },
+  'geo': {
+    'itemStyle': {
+      'areaColor': '#f3f3f3',
+      'borderColor': '#516b91',
+      'borderWidth': 0.5
+    },
+    'label': {
+      'color': '#000'
+    },
+    'emphasis': {
+      'itemStyle': {
+        'areaColor': '#a5e7f0',
+        'borderColor': '#516b91',
+        'borderWidth': 1
+      },
+      'label': {
+        'color': '#516b91'
+      }
+    }
+  },
+  'categoryAxis': {
+    'nameTextStyle': nameTextStyle,
+    'axisLine': {
+      'show': true,
+      'lineStyle': {
+        'color': lightBase['color-gray-4']
+      }
+    },
+    'axisTick': {
+      'show': false,
+      'lineStyle': {
+        'color': '#333'
+      }
+    },
+    'axisLabel': {
+      'show': true,
+      'color': lightBase['color-gray-8']
+    },
+    'splitLine': {
+      'show': false,
+      'lineStyle': {
+        'color': [
+          '#eeeeee'
+        ]
+      }
+    },
+    'splitArea': {
+      'show': false,
+      'areaStyle': {
+        'color': [
+          'rgba(250,250,250,0.05)',
+          'rgba(200,200,200,0.02)'
+        ]
+      }
+    }
+  },
+  'valueAxis': {
+    'nameTextStyle': nameTextStyle,
+    'axisLine': {
+      'show': false,
+      'lineStyle': {
+        'color': lightBase['color-gray-4']
+      }
+    },
+    'axisTick': {
+      'show': false,
+      'lineStyle': {
+        'color': '#333'
+      }
+    },
+    'axisLabel': {
+      'show': true,
+      'color': lightBase['color-gray-8']
+    },
+    'splitLine': {
+      'show': false,
+      'lineStyle': {
+        'color': [
+          '#eeeeee'
+        ]
+      }
+    },
+    'splitArea': {
+      'show': false,
+      'areaStyle': {
+        'color': [
+          'rgba(250,250,250,0.05)',
+          'rgba(200,200,200,0.02)'
+        ]
+      }
+    }
+  },
+  'logAxis': {
+    'nameTextStyle': nameTextStyle,
+    'axisLine': {
+      'show': true,
+      'lineStyle': {
+        'color': lightBase['color-gray-4']
+      }
+    },
+    'axisTick': {
+      'show': false,
+      'lineStyle': {
+        'color': '#333'
+      }
+    },
+    'axisLabel': {
+      'show': true,
+      'color': lightBase['color-gray-8']
+    },
+    'splitLine': {
+      'show': false,
+      'lineStyle': {
+        'color': [
+          '#eeeeee'
+        ]
+      }
+    },
+    'splitArea': {
+      'show': false,
+      'areaStyle': {
+        'color': [
+          'rgba(250,250,250,0.05)',
+          'rgba(200,200,200,0.02)'
+        ]
+      }
+    }
+  },
+  'timeAxis': {
+    'nameTextStyle': nameTextStyle,
+    'axisLine': {
+      'show': true,
+      'lineStyle': {
+        'color': lightBase['color-gray-4']
+      }
+    },
+    'axisTick': {
+      'show': false,
+      'lineStyle': {
+        'color': '#333'
+      }
+    },
+    'axisLabel': {
+      'show': true,
+      'color': lightBase['color-gray-8']
+    },
+    'splitLine': {
+      'show': false,
+      'lineStyle': {
+        'color': [
+          '#eeeeee'
+        ]
+      }
+    },
+    'splitArea': {
+      'show': false,
+      'areaStyle': {
+        'color': [
+          'rgba(250,250,250,0.05)',
+          'rgba(200,200,200,0.02)'
+        ]
+      }
+    }
+  },
+  'toolbox': {
+    'iconStyle': {
+      'borderColor': '#999'
+    },
+    'emphasis': {
+      'iconStyle': {
+        'borderColor': '#666'
+      }
+    }
+  },
+  'legend': {
+    'textStyle': {
+      color: lightBase['color-gray-8'], 'lineHeight': 16, 'fontSize': 12
+    },
+    'itemGap': 16,
+    'itemWidth': 12,
+    'itemHeight': 12,
+    'inactiveColor': lightBase['color-gray-4']
+  },
+  'tooltip': {
+    'borderColor': '#fff',
+    'padding': 12,
+    'textStyle': {
+      'color': lightBase['color-gray-10'],
+      'fontSize': 12,
+      'fontWeight': 400
+    },
+    'axisPointer': {
+      'lineStyle': {
+        'color': '#ccc',
+        'width': 1
+      },
+      'crossStyle': {
+        'color': '#ccc',
+        'width': 1
+      }
+    }
+  },
+  'timeline': {
+    'lineStyle': {
+      'color': '#4c8eff',
+      'width': 1
+    },
+    'itemStyle': {
+      'color': '#4c8eff',
+      'borderWidth': 1
+    },
+    'controlStyle': {
+      'color': '#4c8eff',
+      'borderColor': '#4c8eff',
+      'borderWidth': 0.5
+    },
+    'checkpointStyle': {
+      'color': '#4c8eff',
+      'borderColor': '#8a7ca8'
+    },
+    'label': {
+      'color': '#4c8eff'
+    },
+    'emphasis': {
+      'itemStyle': {
+        'color': '#4c8eff'
+      },
+      'controlStyle': {
+        'color': '#4c8eff',
+        'borderColor': '#4c8eff',
+        'borderWidth': 0.5
+      },
+      'label': {
+        'color': '#4c8eff'
+      }
+    }
+  },
+  'visualMap': {
+    'color': [
+      '#516b91',
+      '#59c4e6',
+      '#a5e7f0'
+    ]
+  },
+  'dataZoom': {
+    'backgroundColor': 'rgba(0,0,0,0)',
+    'dataBackgroundColor': 'rgba(255,255,255,0.3)',
+    'fillerColor': 'rgba(167,183,204,0.4)',
+    'handleColor': '#a7b7cc',
+    'handleSize': '100%',
+    'textStyle': {
+      'color': '#333'
+    }
+  },
+  'markPoint': {
+    'label': {
+      'color': '#ffffff'
+    },
+    'emphasis': {
+      'label': {
+        'color': '#ffffff'
+      }
+    }
+  }
+}

package/src/config/themes/components/checkbox/common.ts

@@ -0,0 +1,7 @@
+import { CheckboxProps } from 'naive-ui'
+
+export const CheckboxThemeCommon: CheckboxProps['themeOverrides'] = {
+  borderRadius: '4px',
+
+  boxShadowFocus: 'none'
+}

package/src/config/themes/components/checkbox/dark.ts

@@ -0,0 +1,23 @@
+import { CheckboxProps } from 'naive-ui'
+import { darkBase } from '../../color'
+import { darkToken } from '../../token'
+import { CheckboxThemeCommon } from './common'
+
+export const CheckboxThemeDark: CheckboxProps['themeOverrides'] = {
+  ...CheckboxThemeCommon,
+  border: `1.5px solid ${darkBase['color-gray-4']}`,
+  borderChecked: `1.5px solid ${darkBase['color-primary-6']}`,
+  borderDisabled: `1.5px solid ${darkBase['color-gray-4']}`,
+  borderDisabledChecked: `1.5px solid ${darkBase['color-primary-3']}`,
+  borderFocus: `1.5px solid ${darkBase['color-primary-5']}`,
+
+  colorChecked: darkBase['color-primary-6'],
+  colorDisabled: darkToken['fill-color-2'],
+  colorDisabledChecked: darkBase['color-primary-3'],
+
+  checkMarkColor: darkToken['color-text-1'],
+  checkMarkColorDisabledChecked: darkToken['color-white-disabled-opacity'],
+
+  textColor: darkToken['color-text-1'],
+  textColorDisabled: darkToken['color-text-4']
+}

package/src/config/themes/components/checkbox/light.ts

@@ -0,0 +1,22 @@
+import { CheckboxProps } from 'naive-ui'
+import { lightBase } from '../../color'
+import { lightToken } from '../../token'
+import { CheckboxThemeCommon } from './common'
+
+export const CheckboxThemeLight: CheckboxProps['themeOverrides'] = {
+  ...CheckboxThemeCommon,
+  border: `1.5px solid ${lightBase['color-gray-4']}`,
+  borderChecked: `1.5px solid ${lightBase['color-primary-6']}`,
+  borderDisabled: `1.5px solid ${lightBase['color-gray-4']}`,
+  borderDisabledChecked: `1.5px solid ${lightBase['color-primary-3']}`,
+  borderFocus: `1.5px solid ${lightBase['color-primary-5']}`,
+
+  colorChecked: lightBase['color-primary-6'],
+  colorDisabled: lightBase['color-gray-3'],
+  colorDisabledChecked: lightBase['color-primary-3'],
+
+  checkMarkColorDisabledChecked: lightToken['color-text-1'],
+
+  textColor: lightBase['color-gray-10'],
+  textColorDisabled: lightBase['color-gray-4']
+}

package/src/config/themes/components/dataTable/dark.ts

@@ -0,0 +1,14 @@
+import { DataTableProps } from 'naive-ui'
+import { darkBase } from '../../color'
+import { darkToken } from '../../token'
+// import { commonBase } from '../../common'
+
+export const DataTableThemeDark: DataTableProps['themeOverrides'] = {
+  tdColor: darkToken['bg-color-2'],
+  tdColorStriped: darkToken['fill-color-5'],
+  tdTextColor: darkBase['color-gray-10'],
+  thColor: darkToken['bg-color-2'],
+  thTextColor: darkToken['color-text-2']
+  // borderColor: darkBase['color-gray-4'],
+  // borderRadius: commonBase['borderRadiusMedium']
+}

package/src/config/themes/components/dataTable/light.ts

@@ -0,0 +1,14 @@
+import { DataTableProps } from 'naive-ui'
+import { lightBase } from '../../color'
+import { lightToken } from '../../token'
+// import { commonBase } from '../../common'
+
+export const DataTableThemeLight: DataTableProps['themeOverrides'] = {
+  tdColor: lightToken['bg-color-2'],
+  tdColorStriped: lightBase['color-gray-1'],
+  tdTextColor: lightBase['color-gray-10'],
+  thColor: lightToken['bg-color-2'],
+  thTextColor: lightBase['color-gray-8']
+  // borderColor: lightBase['color-gray-4'],
+  // borderRadius: commonBase['borderRadiusMedium']
+}

package/src/config/themes/components/datePicker/dark.ts

@@ -0,0 +1,10 @@
+import { DatePickerProps } from 'naive-ui'
+import { darkBase } from '../../color'
+
+export const DatePickerThemeDark: DatePickerProps['themeOverrides'] = {
+  itemColorActive: darkBase['color-primary-6'],
+  itemColorIncluded: darkBase['color-primary-1'],
+  itemColorHover: darkBase['color-primary-1'],
+  itemTextColorCurrent: darkBase['color-primary-6'],
+  itemBorderRadius: '4px'
+}

package/src/config/themes/components/datePicker/light.ts

@@ -0,0 +1,10 @@
+import { DatePickerProps } from 'naive-ui'
+import { lightBase } from '../../color'
+
+export const DatePickerThemeLight: DatePickerProps['themeOverrides'] = {
+  itemColorActive: lightBase['color-primary-6'],
+  itemColorIncluded: lightBase['color-primary-1'],
+  itemColorHover: lightBase['color-primary-1'],
+  itemTextColorCurrent: lightBase['color-primary-6'],
+  itemBorderRadius: '4px'
+}

package/src/config/themes/components/dialog/common.ts

@@ -0,0 +1,8 @@
+export const DialogThemeCommon = {
+  closeMargin: '29px 24px 0 0',
+  contentMargin: '24px 0',
+  padding: '24px 24px 16px',
+  titleFontSize: '24px',
+  iconMargin: '0 6px 0 0',
+  iconSize: '24px'
+}

package/src/config/themes/components/dialog/dark.ts

@@ -0,0 +1,14 @@
+import { darkBase } from '../../color'
+import { darkToken } from '../../token'
+import { DialogThemeCommon } from './common'
+
+export const DialogThemeDark = {
+  ...DialogThemeCommon,
+  closeIconColor: darkToken['color-text-1'],
+  titleTextColor: darkToken['color-text-1'],
+  textColor: darkToken['color-text-1'],
+  iconColorError: darkBase['color-red-6'],
+  iconColorInfo: darkBase['color-primary-6'],
+  iconColorSuccess: darkBase['color-green-6'],
+  iconColorWarning: darkBase['color-origin-6']
+}

package/src/config/themes/components/dialog/light.ts

@@ -0,0 +1,13 @@
+import { lightBase } from '../../color'
+import { DialogThemeCommon } from './common'
+
+export const DialogThemeLight = {
+  ...DialogThemeCommon,
+  closeIconColor: lightBase['color-gray-10'],
+  titleTextColor: lightBase['color-gray-10'],
+  textColor: lightBase['color-gray-10'],
+  iconColorError: lightBase['color-red-6'],
+  iconColorInfo: lightBase['color-primary-6'],
+  iconColorSuccess: lightBase['color-green-6'],
+  iconColorWarning: lightBase['color-origin-6']
+}

package/src/config/themes/components/dropdown/dark.ts

@@ -0,0 +1,7 @@
+import { DropdownProps } from 'naive-ui'
+import { darkToken } from '../../token'
+
+export const DropdownThemeDark: DropdownProps['themeOverrides'] = {
+  optionColorHover: darkToken['fill-color-5'],
+  optionTextColor: darkToken['color-text-1']
+}

package/src/config/themes/components/dropdown/light.ts

@@ -0,0 +1,7 @@
+import { DropdownProps } from 'naive-ui'
+import { lightBase } from '../../color'
+
+export const DropdownThemeLight: DropdownProps['themeOverrides'] = {
+  optionColorHover: lightBase['color-primary-2'],
+  optionTextColor: lightBase['color-gray-10']
+}

package/src/config/themes/components/form/dark.ts

@@ -0,0 +1,7 @@
+import { FormProps } from 'naive-ui'
+import { darkBase } from '../../color'
+
+export const FormThemeDark: FormProps['themeOverrides'] = {
+  asteriskColor: darkBase['color-red-6'],
+  feedbackTextColorError: darkBase['color-red-6']
+}

package/src/config/themes/components/form/light.ts

@@ -0,0 +1,7 @@
+import { FormProps } from 'naive-ui'
+import { lightBase } from '../../color'
+
+export const FormThemeLight: FormProps['themeOverrides'] = {
+  asteriskColor: lightBase['color-red-6'],
+  feedbackTextColorError: lightBase['color-red-6']
+}

package/src/config/themes/components/input/common.ts

@@ -0,0 +1,13 @@
+import { InputProps } from 'naive-ui'
+import { commonBase } from '../../common'
+
+export const InputThemeCommon: InputProps['themeOverrides'] = {
+
+  borderRadius: commonBase.borderRadiusMedium,
+
+  fontSizeLarge: commonBase.fontSizeLarge,
+
+  heightLarge: commonBase.heightLarge,
+  heightMedium: commonBase.heightMedium,
+  heightSmall: commonBase.heightSmall
+}

package/src/config/themes/components/input/dark.ts

@@ -0,0 +1,25 @@
+import { InputProps } from 'naive-ui'
+import { darkBase } from '../../color'
+import { darkToken } from '../../token'
+import { InputThemeCommon } from './common'
+
+export const InputThemeDark: InputProps['themeOverrides'] = {
+  ...InputThemeCommon,
+  border: `1px solid ${darkBase['color-gray-4']}`,
+  borderDisabled: '1px solid #0000',
+  borderError: `1px solid ${darkBase['color-red-6']}`,
+  borderFocus: `1.5px solid ${darkBase['color-primary-6']}`,
+  borderHover: `1px solid ${darkBase['color-primary-5']}`,
+
+  colorDisabled: darkToken['fill-color-1'],
+
+  groupLabelBorder: `1px solid ${darkBase['color-gray-4']}`,
+  groupLabelColor: darkBase['color-gray-2'],
+  groupLabelTextColor: darkBase['color-gray-10'],
+
+  placeholderColor: darkBase['color-gray-6'],
+  placeholderColorDisabled: darkToken['color-text-4'],
+
+  textColor: darkBase['color-gray-10'],
+  textColorDisabled: darkToken['color-text-4']
+}

package/src/config/themes/components/input/light.ts

@@ -0,0 +1,24 @@
+import { InputProps } from 'naive-ui'
+import { lightBase } from '../../color'
+import { InputThemeCommon } from './common'
+
+export const InputThemeLight: InputProps['themeOverrides'] = {
+  ...InputThemeCommon,
+  border: `1px solid ${lightBase['color-gray-4']}`,
+  borderDisabled: '1px solid #0000',
+  borderError: `1px solid ${lightBase['color-red-6']}`,
+  borderFocus: `1.5px solid ${lightBase['color-primary-6']}`,
+  borderHover: `1px solid ${lightBase['color-primary-5']}`,
+
+  colorDisabled: lightBase['color-gray-2'],
+
+  groupLabelBorder: `1px solid ${lightBase['color-gray-4']}`,
+  groupLabelColor: lightBase['color-gray-2'],
+  groupLabelTextColor: lightBase['color-gray-10'],
+
+  placeholderColor: lightBase['color-gray-6'],
+  placeholderColorDisabled: lightBase['color-gray-4'],
+
+  textColor: lightBase['color-gray-10'],
+  textColorDisabled: lightBase['color-gray-4']
+}

package/src/config/themes/components/inputNumber/common.ts

@@ -0,0 +1,14 @@
+import { InputNumberProps } from 'naive-ui'
+import { ExtendInputNumber } from '@/types/themes/extendThemes'
+
+export const InputNumberThemeCommon: InputNumberProps['themeOverrides'] & ExtendInputNumber = {
+  innerControlsLargeWidth: '24px',
+  innerControlsMediumWidth: '24px',
+  innerControlsSmallWidth: '16px',
+  innerControlsLargeHeight: '12px',
+  innerControlsMediumHeight: '12px',
+  innerControlsSmallHeight: '8px',
+  innerControlsLargeBorderRadius: '4px',
+  innerControlsMediumBorderRadius: '4px',
+  innerControlsSmallBorderRadius: '2.67px'
+}