@pubinfo/config 2.0.0-beta.25 → 2.0.0-beta.27

package/src/themes/utils.ts

@@ -0,0 +1,81 @@
+import { hex2rgba } from './unocss-utils';
+
+type CSSColorValue = string;
+type manColor =
+  | 'bg'
+  | 'container-bg'
+  | 'border-color';
+
+type headerColor =
+  | 'header-bg'
+  | 'header-color'
+  | 'header-menu-color'
+  | 'header-menu-hover-bg'
+  | 'header-menu-hover-color'
+  | 'header-menu-active-bg'
+  | 'header-menu-active-color';
+
+type mainSidebarColor =
+  | 'main-sidebar-bg'
+  | 'main-sidebar-menu-color'
+  | 'main-sidebar-menu-hover-bg'
+  | 'main-sidebar-menu-hover-color'
+  | 'main-sidebar-menu-active-bg'
+  | 'main-sidebar-menu-active-color';
+
+type subSidebarColor =
+  | 'sub-sidebar-bg'
+  | 'sub-sidebar-logo-bg'
+  | 'sub-sidebar-logo-color'
+  | 'sub-sidebar-menu-color'
+  | 'sub-sidebar-menu-hover-bg'
+  | 'sub-sidebar-menu-hover-color'
+  | 'sub-sidebar-menu-active-bg'
+  | 'sub-sidebar-menu-active-color';
+
+type tabbarColor =
+  | 'tabbar-dividers-bg'
+  | 'tabbar-tab-color'
+  | 'tabbar-tab-hover-bg'
+  | 'tabbar-tab-hover-color'
+  | 'tabbar-tab-active-color';
+
+type themeScheme = 'light' | 'dark';
+type customColor = typeof customColorKey[number];
+type benchmark = `--g-${manColor | headerColor | mainSidebarColor | subSidebarColor | tabbarColor}`;
+export type cssVarKey = customColor | benchmark;
+
+export type colorScheme = Record<cssVarKey, CSSColorValue> & { 'color-scheme': themeScheme } & { label?: string };
+
+export interface themeOptions {
+  name: string
+  colors: colorScheme
+}
+
+export const customColorKey = ['--ui-primary', '--ui-text'] as const;
+
+export interface globalTheme {
+  [key: string]: colorScheme
+}
+
+let themeColorMap: globalTheme = {};
+
+export function getThemes() {
+  return themeColorMap;
+}
+
+function normalizeColor(colors: colorScheme) {
+  for (const key of customColorKey) {
+    const colorValue = colors[key];
+    colors[key] = hex2rgba(colorValue)!.join(' ');
+  }
+  return colors;
+}
+
+export function defineTheme(theme: themeOptions): globalTheme {
+  const { name, colors } = theme;
+  const colorScheme: globalTheme = Object.create(null);
+  colorScheme[name] = normalizeColor(colors);
+  themeColorMap = Object.assign(themeColorMap, colorScheme);
+  return colorScheme;
+}

package/src/unocss/index.ts

@@ -0,0 +1,61 @@
+import type { globalTheme } from '../themes';
+import {
+  definePreset,
+  presetAttributify,
+  presetIcons,
+  presetTypography,
+  presetUno,
+  transformerDirectives,
+} from 'unocss';
+import { presetThemes } from './presetThemes';
+
+export default definePreset<{ themes?: globalTheme[] }>((options) => {
+  return {
+    name: 'preset-pubinfo',
+    presets: [
+      presetThemes({ themes: options?.themes }),
+      presetUno(),
+      presetAttributify(),
+      presetTypography(),
+      presetIcons({
+        extraProperties: {
+          'display': 'inline-block',
+          'vertical-align': 'middle',
+        },
+      }),
+    ],
+    transformers: [
+      transformerDirectives(),
+    ],
+    shortcuts: [
+      {
+        'flex-center': 'flex justify-center items-center',
+        'flex-col-center': 'flex flex-col justify-center items-center',
+      },
+    ],
+    theme: {
+      colors: {
+        'ui-primary': 'rgb(var(--ui-primary))',
+        'ui-text': 'rgb(var(--ui-text))',
+      },
+      breakpoints: {
+        'sm': '768px',
+        'smd': '1024px',
+        'md': '1366px',
+        'lg': '1440px',
+        'xl': '1600px',
+        '2xl': '1920px',
+      },
+    },
+
+    // TOFIX 此文件中该配置不生效
+    content: {
+      pipeline: {
+        include: [
+          /\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
+          'src/routes/**/*.ts',
+        ],
+      },
+    },
+  };
+});

package/src/unocss/presetThemes.ts

@@ -0,0 +1,57 @@
+import type { globalTheme } from '../themes';
+import { definePreset, entriesToCss, toArray } from '@unocss/core';
+import { getThemes } from '../themes';
+
+type colorScheme = 'light' | 'dark';
+
+const suffix = [['', ' *', '::before', '::after'], ['::backdrop']];
+
+function createCssVar(key: colorScheme, themeName: string) {
+  function createSuffixScheme(preSuffix: string, suffixMap = suffix) {
+    return suffixMap.reduce<string[]>((acc, suffix) => acc.concat(suffix.map(s => `${preSuffix}${s}`).join(',')), []);
+  }
+  const map = {
+    light(key: string) {
+      const preSuffix = `[data-theme="${key}"]`;
+      return createSuffixScheme(preSuffix);
+    },
+    dark(key: string) {
+      const preSuffix = `html.dark [data-theme="${key}"]`;
+      return createSuffixScheme(preSuffix);
+    },
+  };
+  return map[key](themeName);
+}
+
+function mergeTheme(themes: globalTheme[]): globalTheme {
+  const themeColor = Object.assign({}, ...themes);
+  return themeColor;
+}
+
+function normalizePreflights(_themes: globalTheme[] = []) {
+  return {
+    getCSS: () => {
+      const injectionCss: string[] = [];
+      const themes = Object.assign(getThemes(), mergeTheme(_themes));
+      Object.keys(themes).forEach((key) => {
+        delete themes[key].label;
+        const css = entriesToCss(Object.entries(themes[key]));
+        const themeColorScheme = themes[key]['color-scheme'] as colorScheme;
+        const roots = toArray(
+          createCssVar(themeColorScheme, key),
+        );
+        injectionCss.push(roots.map(root => `${root}{${css}}`).join(''));
+      });
+      return injectionCss.join('');
+    },
+  };
+}
+
+export const presetThemes = definePreset<{ themes?: globalTheme[] }>((options) => {
+  return {
+    name: '@wsys/preset-themes',
+    preflights: [
+      normalizePreflights(options?.themes),
+    ],
+  };
+});