@oinone/kunlun-theme 6.4.2 → 7.1.0

package/dist/types/src/style/default-minimalism/tag/index.d.ts

@@ -0,0 +1,5 @@
+export declare const component = "tag";
+export declare const cssVars: {
+    color: string;
+    'background-color': string;
+};

package/dist/types/src/style/default-minimalism/textarea/textarea.d.ts

@@ -1,27 +1,27 @@
-export declare const component = "textarea";
-export declare const cssVars: {
-    background: string;
-    'border-width': string;
-    'border-style': string;
-    'border-color': string;
-    'border-radius': string;
-    outline: string;
-    shadow: string;
-    'text-color': string;
-    'background-hover': string;
-    'border-width-hover': string;
-    'border-style-hover': string;
-    'border-color-hover': string;
-    'border-radius-hover': string;
-    'outline-hover': string;
-    'shadow-hover': string;
-    'text-color-hover': string;
-    'background-focus': string;
-    'border-width-focus': string;
-    'border-style-focus': string;
-    'border-color-focus': string;
-    'border-radius-focus': string;
-    'outline-focus': string;
-    'shadow-focus': string;
-    'text-color-focus': string;
-};
+export declare const component = "textarea";
+export declare const cssVars: {
+    background: string;
+    'border-width': string;
+    'border-style': string;
+    'border-color': string;
+    'border-radius': string;
+    outline: string;
+    shadow: string;
+    'text-color': string;
+    'background-hover': string;
+    'border-width-hover': string;
+    'border-style-hover': string;
+    'border-color-hover': string;
+    'border-radius-hover': string;
+    'outline-hover': string;
+    'shadow-hover': string;
+    'text-color-hover': string;
+    'background-focus': string;
+    'border-width-focus': string;
+    'border-style-focus': string;
+    'border-color-focus': string;
+    'border-radius-focus': string;
+    'outline-focus': string;
+    'shadow-focus': string;
+    'text-color-focus': string;
+};

package/dist/types/src/style/default-minimalism/transfer/transfer.d.ts

@@ -1,5 +1,5 @@
-export declare const component = "transfer";
-export declare const cssVars: {
-    'background-color': string;
-    'header-border-color': string;
-};
+export declare const component = "transfer";
+export declare const cssVars: {
+    'background-color': string;
+    'header-border-color': string;
+};

package/dist/types/src/style/default-minimalism/tree-select/tree-select.d.ts

@@ -1 +1 @@
-export declare const component = "tree-select";
+export declare const component = "tree-select";

package/dist/types/src/style/default-minimalism/upload/upload.d.ts

@@ -1,27 +1,27 @@
-export declare const component = "upload";
-export declare const cssVars: {
-    background: string;
-    'border-width': string;
-    'border-style': string;
-    'border-color': string;
-    'border-radius': string;
-    outline: string;
-    shadow: string;
-    'text-color': string;
-    'background-hover': string;
-    'border-width-hover': string;
-    'border-style-hover': string;
-    'border-color-hover': string;
-    'border-radius-hover': string;
-    'outline-hover': string;
-    'shadow-hover': string;
-    'text-color-hover': string;
-    'background-focus': string;
-    'border-width-focus': string;
-    'border-style-focus': string;
-    'border-color-focus': string;
-    'border-radius-focus': string;
-    'outline-focus': string;
-    'shadow-focus': string;
-    'text-color-focus': string;
-};
+export declare const component = "upload";
+export declare const cssVars: {
+    background: string;
+    'border-width': string;
+    'border-style': string;
+    'border-color': string;
+    'border-radius': string;
+    outline: string;
+    shadow: string;
+    'text-color': string;
+    'background-hover': string;
+    'border-width-hover': string;
+    'border-style-hover': string;
+    'border-color-hover': string;
+    'border-radius-hover': string;
+    'outline-hover': string;
+    'shadow-hover': string;
+    'text-color-hover': string;
+    'background-focus': string;
+    'border-width-focus': string;
+    'border-style-focus': string;
+    'border-color-focus': string;
+    'border-radius-focus': string;
+    'outline-focus': string;
+    'shadow-focus': string;
+    'text-color-focus': string;
+};

package/dist/types/src/style/index.d.ts

@@ -1,4 +1,4 @@
-export * from './default';
-export * from './default-minimalism';
-export * from './dark';
-export * from './dark-minimalism';
+export * from './default';
+export * from './default-minimalism';
+export * from './dark';
+export * from './dark-minimalism';

package/dist/types/src/typing.d.ts

@@ -1,21 +1,21 @@
-export declare type ThemeType = 'default' | 'dark';
-export declare type ThemeSize = 'large' | 'medium' | 'small';
-export interface DefaultSideBarTheme {
-    mode?: ThemeType;
-}
-export declare enum DefaultThemeName {
-    DEFAULT_LARGE = "default-large",
-    DEFAULT_MEDIUM = "default-medium",
-    DEFAULT_SMALL = "default-small",
-    DEFAULT_MINIMALISM_LARGE = "default-minimalism-large",
-    DEFAULT_MINIMALISM_MEDIUM = "default-minimalism-medium",
-    DEFAULT_MINIMALISM_SMALL = "default-minimalism-small",
-    DARK_LARGE = "dark-large",
-    DARK_MEDIUM = "dark-medium",
-    DARK_SMALL = "dark-small",
-    DARK_MINIMALISM_LARGE = "dark-minimalism-large",
-    DARK_MINIMALISM_MEDIUM = "dark-minimalism-medium",
-    DARK_MINIMALISM_SMALL = "dark-minimalism-small"
-}
-export declare type ThemeName = 'default-large' | 'default-medium' | 'default-small' | 'default-minimalism-large' | 'default-minimalism-medium' | 'default-minimalism-small' | 'dark-large' | 'dark-medium' | 'dark-small' | 'dark-minimalism-large' | 'dark-minimalism-medium' | 'dark-minimalism-small' | string;
-export declare const isSystemTheme: (name: ThemeName) => boolean;
+export type ThemeType = 'default' | 'dark';
+export type ThemeSize = 'large' | 'medium' | 'small';
+export interface DefaultSideBarTheme {
+    mode?: ThemeType;
+}
+export declare enum DefaultThemeName {
+    DEFAULT_LARGE = "default-large",
+    DEFAULT_MEDIUM = "default-medium",
+    DEFAULT_SMALL = "default-small",
+    DEFAULT_MINIMALISM_LARGE = "default-minimalism-large",
+    DEFAULT_MINIMALISM_MEDIUM = "default-minimalism-medium",
+    DEFAULT_MINIMALISM_SMALL = "default-minimalism-small",
+    DARK_LARGE = "dark-large",
+    DARK_MEDIUM = "dark-medium",
+    DARK_SMALL = "dark-small",
+    DARK_MINIMALISM_LARGE = "dark-minimalism-large",
+    DARK_MINIMALISM_MEDIUM = "dark-minimalism-medium",
+    DARK_MINIMALISM_SMALL = "dark-minimalism-small"
+}
+export type ThemeName = 'default-large' | 'default-medium' | 'default-small' | 'default-minimalism-large' | 'default-minimalism-medium' | 'default-minimalism-small' | 'dark-large' | 'dark-medium' | 'dark-small' | 'dark-minimalism-large' | 'dark-minimalism-medium' | 'dark-minimalism-small' | string;
+export declare const isSystemTheme: (name: ThemeName) => boolean;

package/dist/types/src/utils/ColorHelper.d.ts

@@ -1,33 +1,33 @@
-export interface RGB {
-    r: number;
-    g: number;
-    b: number;
-}
-export declare class ColorHelper {
-    /**
-     * 将十六进制颜色转换为RGB对象
-     * @param {string} hex - 十六进制颜色字符串，如 '#035DFF'
-     * @returns {Object} RGB对象，包含r, g, b属性，值为0-255
-     */
-    static hexToRgb(hex: string): RGB;
-    /**
-     * 将RGB对象转换为十六进制颜色
-     * @param {Object} rgb - RGB对象，包含r, g, b属性，值为0-255
-     * @returns {string} 十六进制颜色字符串，如 '#E6EFFE'
-     */
-    static rgbToHex(rgb: RGB): string;
-    /**
-     * 将单个颜色分量转换为两位十六进制数
-     * @param {number} c - 颜色分量，值为0-255
-     * @returns {string} 两位十六进制字符串
-     */
-    private static componentToHex;
-    /**
-     * 计算半透明颜色在背景色上的等效不透明颜色
-     * @param {string} color - 半透明颜色的十六进制字符串，如 '#035DFF'
-     * @param {number} alpha - 透明度，0-1之间的数值，如0.1
-     * @param {string} backgroundColor - 背景色的十六进制字符串，默认为白色 '#FFFFFF'
-     * @returns {string} 等效的不透明颜色的十六进制字符串
-     */
-    static getAlphaColor(color: string, alpha: number, backgroundColor?: string): string;
-}
+export interface RGB {
+    r: number;
+    g: number;
+    b: number;
+}
+export declare class ColorHelper {
+    /**
+     * 将十六进制颜色转换为RGB对象
+     * @param {string} hex - 十六进制颜色字符串，如 '#035DFF'
+     * @returns {Object} RGB对象，包含r, g, b属性，值为0-255
+     */
+    static hexToRgb(hex: string): RGB;
+    /**
+     * 将RGB对象转换为十六进制颜色
+     * @param {Object} rgb - RGB对象，包含r, g, b属性，值为0-255
+     * @returns {string} 十六进制颜色字符串，如 '#E6EFFE'
+     */
+    static rgbToHex(rgb: RGB): string;
+    /**
+     * 将单个颜色分量转换为两位十六进制数
+     * @param {number} c - 颜色分量，值为0-255
+     * @returns {string} 两位十六进制字符串
+     */
+    private static componentToHex;
+    /**
+     * 计算半透明颜色在背景色上的等效不透明颜色
+     * @param {string} color - 半透明颜色的十六进制字符串，如 '#035DFF'
+     * @param {number} alpha - 透明度，0-1之间的数值，如0.1
+     * @param {string} backgroundColor - 背景色的十六进制字符串，默认为白色 '#FFFFFF'
+     * @returns {string} 等效的不透明颜色的十六进制字符串
+     */
+    static getAlphaColor(color: string, alpha: number, backgroundColor?: string): string;
+}

package/package.json

@@ -1,17 +1,28 @@
 {
   "name": "@oinone/kunlun-theme",
-  "version": "6.4.2",
-  "main": "index.ts",
+  "version": "7.1.0",
+  "type": "module",
+  "main": "dist/oinone-kunlun-theme.esm.js",
   "scripts": {
     "prebuild": "rimraf dist",
     "build": "rollup -c",
     "dist": "npm run prepublishOnly",
     "index": "npm run postpublish",
-    "x-prepublishOnly": "node ../../scripts/prepublish-only.js",
-    "x-postpublish": "node ../../scripts/postpublish.js"
+    "format": "prettier --write --experimental-cli src/",
+    "test": "jest",
+    "prepublishOnly": "node ../../../../scripts/prepublish-only.cjs",
+    "deploy": "npm publish --exact",
+    "postpublish": "node ../../../../scripts/postpublish.cjs"
   },
   "dependencies": {
-    "@oinone/kunlun-config": "6.4.2"
+    "@oinone/kunlun-config": "7.1.0"
   },
-  "gitHead": "2b4c0c7911626c105ca71c2d41e54af470e2e079"
-}
+  "gitHead": "2b4c0c7911626c105ca71c2d41e54af470e2e079",
+  "module": "dist/oinone-kunlun-theme.esm.js",
+  "typings": "dist/types/index.d.ts",
+  "files": [
+    "dist",
+    "index.ts",
+    "src"
+  ]
+}

package/src/init/currentTheme.ts

@@ -1,4 +1,4 @@
-import { ThemeType } from '../typing';
+import type { ThemeType } from '../typing';
 
 export let currentOioThemeType: ThemeType = 'default';
 

package/src/init/initTheme.ts

@@ -1,10 +1,5 @@
-import {
-  registerDarkThemeFn,
-  registerDefaultThemeFn,
-  registerDefaultModernThemeFn,
-  registerDarkModernThemeFn
-} from '../style';
-import { DefaultSideBarTheme, ThemeType } from '../typing';
+import { registerDarkThemeFn, registerDefaultThemeFn, registerDefaultModernThemeFn, registerDarkModernThemeFn } from '../style';
+import type { DefaultSideBarTheme, ThemeType } from '../typing';
 import { setCurrentThemeType } from './currentTheme';
 
 interface DefaultComponentTheme {

package/src/mount/index.ts

@@ -1,6 +1,6 @@
 import { ConfigProviderSPI } from '@oinone/kunlun-config';
 import { getTheme } from '../register';
-import { DefaultThemeName, ThemeName } from '../typing';
+import { DefaultThemeName, type ThemeName } from '../typing';
 import { DEFAULT_PREFIX } from './constant';
 
 /**

package/src/register/index.ts

@@ -1,4 +1,4 @@
-import { ThemeName } from '../typing';
+import type { ThemeName } from '../typing';
 
 const themeMap = new Map<string, Record<string, unknown>>();
 

package/src/style/dark/ai-chat/chat-bubbles.ts

@@ -0,0 +1,4 @@
+export const ChatBubblesCssVars = {
+  'bubble-background-color': 'var(--oio-body-background)',
+  'bubble-user-background-color': 'var(--oio-body-background)'
+};

package/src/style/dark/ai-chat/conversation.ts

@@ -0,0 +1,6 @@
+export const ConversationCssVars = {
+  config: {
+    backgroundImage: 'AIChartBg-dark.png'
+  }
+  //TODO 黑色模式颜色
+};

package/src/style/dark/ai-chat/index.ts

@@ -0,0 +1,13 @@
+import { ChatBubblesCssVars } from './chat-bubbles';
+import { ConversationCssVars } from './conversation';
+
+export const component = 'ai-chat';
+
+export const cssVars = {
+  color: 'var(--oio-primary-color)',
+  ...ChatBubblesCssVars,
+  ...ConversationCssVars,
+  config: {
+    ...ConversationCssVars.config
+  }
+};

package/src/style/dark/component-theme.ts

@@ -20,8 +20,10 @@ import {
   smallTabsSizeVars,
   smallTreeSelectSizeVars
 } from '../../size';
+import { component as AiChat, cssVars as AiChatCSSVars } from './ai-chat';
 import { component as AppSwitch, cssVars as AppSwitchCSSVars } from './app-switch/app-switch';
 import { component as Button, cssVars as ButtonCSSVars } from './button';
+import { component as Card, cssVars as CardCSSVars } from './card/card';
 import { component as Checkbox, cssVars as checkboxCSSVars } from './checkbox/checkbox';
 import { component as Drawer, cssVars as DrawerCSSVars } from './drawer/drawer';
 import { component as Dropdown, cssVars as DropdownCSSVars } from './dropdown';
@@ -39,142 +41,150 @@ import { component as Select, cssVars as SelectCSSVars } from './select/select';
 import { component as Switch, cssVars as switchCSSVars } from './switch/switch';
 import { component as Table, cssVars as TableCSSVars } from './table/table';
 import { component as Tabs, cssVars as TabsCSSVars } from './tabs/tabs';
+import { component as Tag, cssVars as TagCSSVars } from './tag';
 import { component as Textarea, cssVars as TextareaCSSVars } from './textarea/textarea';
 import { component as Transfer, cssVars as TransferCSSVars } from './transfer/transfer';
 import { component as TreeSelect } from './tree-select/tree-select';
 import { component as Upload, cssVars as UploadCSSVars } from './upload/upload';
-import { component as Card, cssVars as CardCSSVars } from './card/card';
 
-export const getComponentTheme = () => {
-  return {
-    [MultiTab]: {
-      large: { ...MultiTabCSSVars },
-      medium: { ...MultiTabCSSVars },
-      small: { ...MultiTabCSSVars }
-    },
-    [Button]: {
-      large: ButtonCSSVars,
-      medium: ButtonCSSVars,
-      small: ButtonCSSVars
-    },
-    [Input]: {
-      large: {
-        ...InputCSSVars,
-        ...largeInputSizeVars
-      },
-      medium: {
-        ...InputCSSVars,
-        ...mediumInputSizeVars
-      },
-      small: {
-        ...InputCSSVars,
-        ...mediumInputSizeVars
-      }
-    },
-    [Checkbox]: {
-      large: { ...checkboxCSSVars },
-      medium: { ...checkboxCSSVars },
-      small: { ...checkboxCSSVars }
-    },
-    [Switch]: {
-      large: { ...switchCSSVars },
-      medium: { ...switchCSSVars },
-      small: { ...switchCSSVars }
-    },
-    [Pagination]: {
-      large: { ...PaginationCSSVars, ...largePaginationSizeVars },
-      medium: { ...PaginationCSSVars, ...mediumPaginationSizeVars },
-      small: { ...PaginationCSSVars, ...smallPaginationSizeVars }
-    },
-    [Select]: {
-      large: { ...SelectCSSVars, ...largeSelectSizeVars },
-      medium: { ...SelectCSSVars, ...mediumSelectSizeVars },
-      small: { ...SelectCSSVars, ...smallSelectSizeVars }
-    },
-    [Textarea]: {
-      large: TextareaCSSVars,
-      medium: TextareaCSSVars,
-      small: TextareaCSSVars
-    },
-    [Upload]: {
-      large: UploadCSSVars,
-      medium: UploadCSSVars,
-      small: UploadCSSVars
-    },
-    [Menu]: {
-      large: { ...MenuCSSVars(), ...largeMenuSizeVars },
-      medium: { ...MenuCSSVars(), ...mediumMenuSizeVars },
-      small: { ...MenuCSSVars(), ...smallMenuSizeVars }
-    },
-    [AppSwitch]: {
-      large: AppSwitchCSSVars,
-      medium: AppSwitchCSSVars,
-      small: AppSwitchCSSVars
-    },
-    [Table]: {
-      large: { ...TableCSSVars, ...largeTableSizeVars },
-      medium: { ...TableCSSVars, ...mediumTableSizeVars },
-      small: { ...TableCSSVars, ...smallTableSizeVars }
-    },
-    [Header]: {
-      large: HeaderCSSVars,
-      medium: HeaderCSSVars,
-      small: HeaderCSSVars
-    },
-    [Modal]: {
-      large: ModalCSSVars,
-      medium: ModalCSSVars,
-      small: ModalCSSVars
-    },
-    [Popconfirm]: {
-      large: PopconfirmCSSVars,
-      medium: PopconfirmCSSVars,
-      small: PopconfirmCSSVars
-    },
-    [TreeSelect]: {
-      large: largeTreeSelectSizeVars,
-      medium: mediumTreeSelectSizeVars,
-      small: smallTreeSelectSizeVars
-    },
-    [Transfer]: {
-      large: TransferCSSVars,
-      medium: TransferCSSVars,
-      small: TransferCSSVars
-    },
-    [Scrollbar]: {
-      large: ScrollbarCSSVars,
-      medium: ScrollbarCSSVars,
-      small: ScrollbarCSSVars
-    },
-    [Drawer]: {
-      large: DrawerCSSVars,
-      medium: DrawerCSSVars,
-      small: DrawerCSSVars
-    },
-    [Dropdown]: {
-      large: DropdownCSSVars,
-      medium: DropdownCSSVars,
-      small: DropdownCSSVars
-    },
-    [FormItem]: {
-      large: FormItemCSSVars,
-      medium: FormItemCSSVars,
-      small: FormItemCSSVars
-    },
-    [RichText]: {
-      large: RichTextCSSVars,
-      medium: RichTextCSSVars,
-      small: RichTextCSSVars
-    },
-    [Tabs]: {
-      large: { ...largeTabsSizeVars, ...TabsCSSVars },
-      medium: { ...mediumTabsSizeVars, ...TabsCSSVars },
-      small: { ...smallTabsSizeVars, ...TabsCSSVars }
-    },
-    [Card]: {
-      large: CardCSSVars,
-      medium: CardCSSVars,
-      small: CardCSSVars
+export const getComponentTheme = () => ({
+  [MultiTab]: {
+    large: { ...MultiTabCSSVars },
+    medium: { ...MultiTabCSSVars },
+    small: { ...MultiTabCSSVars }
+  },
+  [Button]: {
+    large: ButtonCSSVars,
+    medium: ButtonCSSVars,
+    small: ButtonCSSVars
+  },
+  [Input]: {
+    large: {
+      ...InputCSSVars,
+      ...largeInputSizeVars
+    },
+    medium: {
+      ...InputCSSVars,
+      ...mediumInputSizeVars
+    },
+    small: {
+      ...InputCSSVars,
+      ...mediumInputSizeVars
     }
-  };
-};
+  },
+  [Checkbox]: {
+    large: { ...checkboxCSSVars },
+    medium: { ...checkboxCSSVars },
+    small: { ...checkboxCSSVars }
+  },
+  [Switch]: {
+    large: { ...switchCSSVars },
+    medium: { ...switchCSSVars },
+    small: { ...switchCSSVars }
+  },
+  [Pagination]: {
+    large: { ...PaginationCSSVars, ...largePaginationSizeVars },
+    medium: { ...PaginationCSSVars, ...mediumPaginationSizeVars },
+    small: { ...PaginationCSSVars, ...smallPaginationSizeVars }
+  },
+  [Select]: {
+    large: { ...SelectCSSVars, ...largeSelectSizeVars },
+    medium: { ...SelectCSSVars, ...mediumSelectSizeVars },
+    small: { ...SelectCSSVars, ...smallSelectSizeVars }
+  },
+  [Textarea]: {
+    large: TextareaCSSVars,
+    medium: TextareaCSSVars,
+    small: TextareaCSSVars
+  },
+  [Upload]: {
+    large: UploadCSSVars,
+    medium: UploadCSSVars,
+    small: UploadCSSVars
+  },
+  [Menu]: {
+    large: { ...MenuCSSVars(), ...largeMenuSizeVars },
+    medium: { ...MenuCSSVars(), ...mediumMenuSizeVars },
+    small: { ...MenuCSSVars(), ...smallMenuSizeVars }
+  },
+  [AppSwitch]: {
+    large: AppSwitchCSSVars,
+    medium: AppSwitchCSSVars,
+    small: AppSwitchCSSVars
+  },
+  [Table]: {
+    large: { ...TableCSSVars, ...largeTableSizeVars },
+    medium: { ...TableCSSVars, ...mediumTableSizeVars },
+    small: { ...TableCSSVars, ...smallTableSizeVars }
+  },
+  [Header]: {
+    large: HeaderCSSVars,
+    medium: HeaderCSSVars,
+    small: HeaderCSSVars
+  },
+  [Modal]: {
+    large: ModalCSSVars,
+    medium: ModalCSSVars,
+    small: ModalCSSVars
+  },
+  [Popconfirm]: {
+    large: PopconfirmCSSVars,
+    medium: PopconfirmCSSVars,
+    small: PopconfirmCSSVars
+  },
+  [TreeSelect]: {
+    large: largeTreeSelectSizeVars,
+    medium: mediumTreeSelectSizeVars,
+    small: smallTreeSelectSizeVars
+  },
+  [Transfer]: {
+    large: TransferCSSVars,
+    medium: TransferCSSVars,
+    small: TransferCSSVars
+  },
+  [Scrollbar]: {
+    large: ScrollbarCSSVars,
+    medium: ScrollbarCSSVars,
+    small: ScrollbarCSSVars
+  },
+  [Drawer]: {
+    large: DrawerCSSVars,
+    medium: DrawerCSSVars,
+    small: DrawerCSSVars
+  },
+  [Dropdown]: {
+    large: DropdownCSSVars,
+    medium: DropdownCSSVars,
+    small: DropdownCSSVars
+  },
+  [FormItem]: {
+    large: FormItemCSSVars,
+    medium: FormItemCSSVars,
+    small: FormItemCSSVars
+  },
+  [RichText]: {
+    large: RichTextCSSVars,
+    medium: RichTextCSSVars,
+    small: RichTextCSSVars
+  },
+  [Tabs]: {
+    large: { ...largeTabsSizeVars, ...TabsCSSVars },
+    medium: { ...mediumTabsSizeVars, ...TabsCSSVars },
+    small: { ...smallTabsSizeVars, ...TabsCSSVars }
+  },
+  [Card]: {
+    large: CardCSSVars,
+    medium: CardCSSVars,
+    small: CardCSSVars
+  },
+  [Tag]: {
+    large: TagCSSVars,
+    medium: TagCSSVars,
+    small: TagCSSVars
+  },
+  [AiChat]: {
+    large: AiChatCSSVars,
+    medium: AiChatCSSVars,
+    small: AiChatCSSVars
+  }
+});

package/src/style/dark/registry.ts

@@ -1,7 +1,7 @@
 import { darkVars } from '../../color';
 import { registerTheme } from '../../register';
 import { defaultLargeSizeVars, defaultMediumSizeVars, defaultSmallSizeVars } from '../../size';
-import { ThemeSize } from '../../typing';
+import type { ThemeSize } from '../../typing';
 import { getComponentTheme } from './component-theme';
 
 function registerComponentThemeWithBase(baseCssVars) {

package/src/style/dark/tag/index.ts

@@ -0,0 +1,6 @@
+export const component = 'tag';
+
+export const cssVars = {
+  color: 'var(--oio-primary-color)',
+  'background-color': '#2e415e'
+};