feat(projects): 1.0 beta

src/theme/settings.ts

@@ -0,0 +1,56 @@
+/**
+ * default theme settings
+ */
+export const themeSettings: App.Theme.ThemeSetting = {
+  themeScheme: 'light',
+  themeColor: '#646cff',
+  otherColor: {
+    info: '#2080f0',
+    success: '#52c41a',
+    warning: '#faad14',
+    error: '#f5222d'
+  },
+  isInfoFollowPrimary: true,
+  layout: {
+    mode: 'vertical',
+    scrollMode: 'content'
+  },
+  page: {
+    animate: true,
+    animateMode: 'fade-slide'
+  },
+  header: {
+    height: 56,
+    breadcrumb: {
+      visible: true,
+      showIcon: true
+    }
+  },
+  tab: {
+    visible: true,
+    cache: true,
+    height: 44,
+    mode: 'chrome'
+  },
+  fixedHeaderAndTab: true,
+  sider: {
+    inverted: false,
+    width: 220,
+    collapsedWidth: 64,
+    mixWidth: 90,
+    mixCollapsedWidth: 64,
+    mixChildMenuWidth: 200
+  },
+  footer: {
+    visible: true,
+    fixed: false,
+    height: 48,
+    right: true
+  }
+};
+
+/**
+ * override theme settings
+ * @description if publish new version, use `overrideThemeSettings` to override certain theme settings
+ */
+export const overrideThemeSettings: Partial<App.Theme.ThemeSetting> = {};

src/theme/vars.ts

@@ -0,0 +1,39 @@
+/**
+ * create color palette vars
+ */
+function createColorPaletteVars() {
+  const colors: App.Theme.ThemeColorKey[] = ['primary', 'info', 'success', 'warning', 'error'];
+  const colorPaletteNumbers: App.Theme.ColorPaletteNumber[] = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+
+  const colorPaletteVar = {} as App.Theme.ThemePaletteColor;
+
+  colors.forEach(color => {
+    colorPaletteVar[color] = `rgb(var(--${color}-color))`;
+    colorPaletteNumbers.forEach(number => {
+      colorPaletteVar[`${color}-${number}`] = `rgb(var(--${color}-${number}-color))`;
+    });
+  });
+
+  return colorPaletteVar;
+}
+
+const colorPaletteVars = createColorPaletteVars();
+
+/**
+ * theme vars
+ */
+export const themeVars: App.Theme.ThemeToken = {
+  colors: {
+    ...colorPaletteVars,
+    nprogress: 'rgb(var(--nprogress-color))',
+    container: 'rgb(var(--container-bg-color))',
+    layout: 'rgb(var(--layout-bg-color))',
+    inverted: 'rgb(var(--inverted-bg-color))',
+    base_text: 'rgb(var(--base-text-color))'
+  },
+  boxShadow: {
+    header: 'var(--header-box-shadow)',
+    sider: 'var(--sider-box-shadow)',
+    tab: 'var(--tab-box-shadow)'
+  }
+};