@brickflow/ui 0.0.32 → 0.0.34

package/dist/module.json

@@ -4,7 +4,7 @@
   },
   "configKey": "brickflowUi",
   "name": "@brickflow/ui",
-  "version": "0.0.32",
+  "version": "0.0.34",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -1,9 +1,9 @@
-import { defineNuxtModule, createResolver, resolvePath, addTemplate, updateTemplates, addImportsDir, addComponentsDir } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, resolvePath, addTypeTemplate, addTemplate, updateTemplates, addImportsDir, addComponentsDir } from '@nuxt/kit';
 import tailwindcss from '@tailwindcss/vite';
 import { createJiti } from 'jiti';
 import { readdir, mkdir, readFile, writeFile } from 'node:fs/promises';
-import { join, resolve, basename, extname, dirname, relative } from 'node:path';
-import { defineBrickflowUiConfig } from '../dist/runtime/tailwind.js';
+import { join, basename, extname, dirname, resolve, relative } from 'node:path';
+import { isBrickflowUiStyleReference, getBrickflowUiStyleReferencePath, defineBrickflowUiConfig } from '../dist/runtime/tailwind.js';
 import { generateFonts, FontAssetType, OtherAssetType } from 'fantasticon';
 
 const ICON_FILE_PATTERN = /\.svg$/i;
@@ -85,6 +85,8 @@ ${CUSTOM_DARK_VARIANT}${code.slice(index)}`,
 });
 
 const UI_STYLE_PATTERN = /\bUI_STYLE((?:\.[A-Za-z_$][\w$]*)+)/g;
+const UI_CONFIG_PATTERN = /\bUI_CONFIG((?:\.[A-Za-z_$][\w$]*)+)/g;
+const UI_CONFIG_MACRO = "defineUiConfig";
 const SCRIPT_FILE_PATTERN = /\.(?:[cm]?[jt]sx?|vue)(?:\?.*)?$/;
 const TYPE_INDENT = "  ";
 const refreshUiStyleModules = (server) => {
@@ -109,7 +111,7 @@ const resolveUiStyleConfigPath = (id, path) => {
     return path;
   }
   const componentName = basename(cleanId, extname(cleanId));
-  const configName = componentName === "index" ? basename(dirname(cleanId)) : componentName;
+  const configName = componentName === "index" || componentName.endsWith(".demo") ? basename(dirname(cleanId)) : componentName;
   return [toCamelCase(configName), ...path];
 };
 const resolveStyleValue = (styles, id, path) => {
@@ -123,6 +125,75 @@ const resolveStyleValue = (styles, id, path) => {
   }
   return configPathValue ?? globalValue;
 };
+const resolveUiConfigValue = (config, id, path) => {
+  const configPathValue = readPath(config, resolveUiStyleConfigPath(id, path));
+  return configPathValue ?? readPath(config, path);
+};
+const resolveUiConfigStyleReferences = (value, styles, id) => {
+  if (isBrickflowUiStyleReference(value)) {
+    const stylePath = getBrickflowUiStyleReferencePath(value);
+    const styleValue = resolveStyleValue(styles, id, [...stylePath]);
+    if (typeof styleValue !== "string") {
+      throw new TypeError(`UI_STYLE.${stylePath.join(".")} does not resolve to a string in ${id}.`);
+    }
+    return styleValue;
+  }
+  if (typeof value === "string") {
+    return value;
+  }
+  return Object.fromEntries(
+    Object.entries(value).map(([key, childValue]) => [
+      key,
+      resolveUiConfigStyleReferences(childValue, styles, id)
+    ])
+  );
+};
+const replaceUiConfigMacros = (code, config, styles, id, error) => {
+  let result = "";
+  let cursor = 0;
+  while (cursor < code.length) {
+    const start = code.indexOf(UI_CONFIG_MACRO, cursor);
+    if (start === -1) {
+      return result + code.slice(cursor);
+    }
+    const genericStart = start + UI_CONFIG_MACRO.length;
+    if (code[genericStart] !== "<") {
+      result += code.slice(cursor, genericStart);
+      cursor = genericStart;
+      continue;
+    }
+    let depth = 0;
+    let index = genericStart;
+    for (; index < code.length; index += 1) {
+      if (code[index] === "<") {
+        depth += 1;
+      }
+      if (code[index] === ">") {
+        depth -= 1;
+      }
+      if (depth === 0) {
+        break;
+      }
+    }
+    let callStart = index + 1;
+    while (/\s/u.test(code[callStart] ?? "")) {
+      callStart += 1;
+    }
+    if (code.slice(callStart, callStart + 2) !== "()") {
+      result += code.slice(cursor, callStart);
+      cursor = callStart;
+      continue;
+    }
+    const value = resolveUiConfigValue(config, id, []);
+    if (value === void 0) {
+      error(`defineUiConfig() in ${id} has no matching uiConfig entry.`);
+    }
+    result += code.slice(cursor, start);
+    result += JSON.stringify(resolveUiConfigStyleReferences(value, styles, id));
+    cursor = callStart + 2;
+  }
+  return result;
+};
 const createUiStylePathTree = () => ({
   children: /* @__PURE__ */ new Map()
 });
@@ -134,16 +205,18 @@ const addPathToTree = (tree, path) => {
     currentTree = childTree;
   }
 };
-const renderTypeTree = (tree, level, objectType) => {
+const renderTypeTree = (tree, level, objectType, leafType = "string", path = []) => {
   const lines = [];
   const indent = TYPE_INDENT.repeat(level);
   for (const [key, childTree] of [...tree.children.entries()].sort(([a], [b]) => a.localeCompare(b))) {
     if (childTree.children.size === 0) {
-      lines.push(`${indent}readonly ${key}: string`);
+      const childPath = [...path, key];
+      const childLeafType = typeof leafType === "function" ? leafType(childPath) : leafType;
+      lines.push(`${indent}readonly ${key}: ${childLeafType}`);
       continue;
     }
     lines.push(objectType ? `${indent}readonly ${key}: ${objectType} & {` : `${indent}readonly ${key}: {`);
-    lines.push(...renderTypeTree(childTree, level + 1, objectType));
+    lines.push(...renderTypeTree(childTree, level + 1, objectType, leafType, [...path, key]));
     lines.push(`${indent}}`);
   }
   return lines;
@@ -156,18 +229,111 @@ const collectUiStylePathsFromCode = (code) => {
   return paths.filter((path) => path.length > 0);
 };
 const collectUiStyleConfigPathsFromCode = (code, id) => collectUiStylePathsFromCode(code).map((path) => resolveUiStyleConfigPath(id, path));
-const renderInterfaceDeclaration = (name, paths, objectType) => {
+const collectUiConfigValuePaths = (value, prefix) => {
+  if (typeof value === "string" || isBrickflowUiStyleReference(value)) {
+    return [prefix];
+  }
+  return Object.entries(value).flatMap(
+    ([key, childValue]) => collectUiConfigValuePaths(childValue, [...prefix, key])
+  );
+};
+const collectUiConfigPathsFromCode = (code, id, config) => {
+  const paths = [];
+  for (const match of code.matchAll(UI_CONFIG_PATTERN)) {
+    const path = match[1]?.slice(1).split(".") ?? [];
+    const value = resolveUiConfigValue(config, id, path);
+    paths.push(...value === void 0 ? [path] : collectUiConfigValuePaths(value, path));
+  }
+  return paths.filter((path) => path.length > 0);
+};
+const collectUiConfigComponentPathsFromCode = (code, id, config) => {
+  const paths = [];
+  for (const match of code.matchAll(UI_CONFIG_PATTERN)) {
+    const path = match[1]?.slice(1).split(".") ?? [];
+    const componentPath = resolveUiStyleConfigPath(id, path);
+    const value = readPath(config, componentPath);
+    paths.push(
+      ...value === void 0 ? [componentPath] : collectUiConfigValuePaths(value, componentPath)
+    );
+  }
+  if (code.includes(UI_CONFIG_MACRO)) {
+    const componentPath = resolveUiStyleConfigPath(id, []);
+    const value = readPath(config, componentPath);
+    if (value !== void 0) {
+      paths.push(...collectUiConfigValuePaths(value, componentPath));
+    }
+  }
+  return paths.filter((path) => path.length > 0);
+};
+const collectUiConfigSchemaEntriesFromCode = (code, id) => {
+  const entries = [];
+  let cursor = 0;
+  while (cursor < code.length) {
+    const start = code.indexOf(UI_CONFIG_MACRO, cursor);
+    if (start === -1) {
+      return entries;
+    }
+    const genericStart = start + UI_CONFIG_MACRO.length;
+    if (code[genericStart] !== "<") {
+      cursor = genericStart;
+      continue;
+    }
+    let depth = 0;
+    let genericEnd = genericStart;
+    for (; genericEnd < code.length; genericEnd += 1) {
+      if (code[genericEnd] === "<") {
+        depth += 1;
+      }
+      if (code[genericEnd] === ">") {
+        depth -= 1;
+      }
+      if (depth === 0) {
+        break;
+      }
+    }
+    let callStart = genericEnd + 1;
+    while (/\s/u.test(code[callStart] ?? "")) {
+      callStart += 1;
+    }
+    if (code.slice(callStart, callStart + 2) !== "()") {
+      cursor = callStart;
+      continue;
+    }
+    const schema = code.slice(genericStart + 1, genericEnd).trim();
+    const path = resolveUiStyleConfigPath(id, []);
+    if (schema.startsWith("{") && path.length > 0) {
+      entries.push({ path, schema });
+    }
+    cursor = callStart + 2;
+  }
+  return entries;
+};
+const collectUiConfigStyleReferencePathsFromValue = (value, componentPath) => {
+  if (isBrickflowUiStyleReference(value)) {
+    return [[...componentPath, ...getBrickflowUiStyleReferencePath(value)]];
+  }
+  if (typeof value === "string") {
+    return [];
+  }
+  return Object.values(value).flatMap(
+    (childValue) => collectUiConfigStyleReferencePathsFromValue(childValue, componentPath)
+  );
+};
+const collectUiConfigStyleReferencePaths = (config) => Object.entries(config).flatMap(([key, value]) => collectUiConfigStyleReferencePathsFromValue(value, [key]));
+const renderInterfaceDeclaration = (name, paths, objectType, leafType = "string") => {
   const tree = createUiStylePathTree();
   for (const path of paths) {
     addPathToTree(tree, path);
   }
-  return [`  interface ${name} {`, ...renderTypeTree(tree, 2, objectType), "  }"];
+  return [`  interface ${name} {`, ...renderTypeTree(tree, 2, objectType, leafType), "  }"];
 };
 const createUiStyleTypeDeclaration = (options) => {
   return [
     "declare global {",
     ...renderInterfaceDeclaration("BrickflowUiConfigStylePaths", options.configPaths),
     "",
+    ...renderInterfaceDeclaration("BrickflowUiConfigPaths", options.uiConfigPaths),
+    "",
     ...renderInterfaceDeclaration("BrickflowUiStylePaths", options.paths, "BrickflowUiStyleValue"),
     "}",
     "",
@@ -175,6 +341,39 @@ const createUiStyleTypeDeclaration = (options) => {
     ""
   ].join("\n");
 };
+const createUiConfigLiteralTypeDeclaration = (paths, config) => [
+  "declare global {",
+  ...renderInterfaceDeclaration("BrickflowUiConfigLiteralPaths", paths, void 0, (path) => {
+    const value = config ? readPath(config, path) : void 0;
+    return typeof value === "string" ? toStringLiteral(value) : "string";
+  }),
+  "}",
+  "",
+  "export {}",
+  ""
+].join("\n");
+const createUiConfigSchemaTypeDeclaration = (entries) => {
+  const schemasByPath = /* @__PURE__ */ new Map();
+  for (const { path, schema } of entries) {
+    const pathKey = path.join(".");
+    const schemas = schemasByPath.get(pathKey) ?? [];
+    schemas.push(schema);
+    schemasByPath.set(pathKey, schemas);
+  }
+  return [
+    "declare global {",
+    "  interface BrickflowUiConfigSchema {",
+    ...[...schemasByPath.entries()].sort(([a], [b]) => a.localeCompare(b)).map(([path, schemas]) => {
+      const [componentName] = path.split(".");
+      return `    readonly ${componentName}: ${schemas.map((schema) => `(${schema})`).join(" & ")}`;
+    }),
+    "  }",
+    "}",
+    "",
+    "export {}",
+    ""
+  ].join("\n");
+};
 const brickflowUiStylePlugin = (options) => ({
   buildStart: {
     handler() {
@@ -197,13 +396,39 @@ const brickflowUiStylePlugin = (options) => ({
   },
   name: "brickflow-ui-style",
   async transform(code, id) {
-    if (!SCRIPT_FILE_PATTERN.test(id) || !code.includes("UI_STYLE.")) {
+    if (!SCRIPT_FILE_PATTERN.test(id) || !code.includes("UI_STYLE.") && !code.includes("UI_CONFIG.") && !code.includes(UI_CONFIG_MACRO)) {
       return null;
     }
     this.addWatchFile?.(options.configPath);
     const styles = await options.getStyles();
+    const config = await options.getConfig();
+    const isConfigFile = normalizePath(id.split("?")[0] ?? id) === normalizePath(options.configPath);
+    const hasUiConfigMacro = code.includes(UI_CONFIG_MACRO);
     let changed = false;
-    const transformedCode = code.replace(UI_STYLE_PATTERN, (match, rawPath) => {
+    const codeWithUiConfigMacros = hasUiConfigMacro ? replaceUiConfigMacros(code, config, styles, id, this.error.bind(this)) : code;
+    if (codeWithUiConfigMacros !== code) {
+      changed = true;
+    }
+    const transformedCode = codeWithUiConfigMacros.replace(UI_CONFIG_PATTERN, (match, rawPath) => {
+      if (hasUiConfigMacro) {
+        return match;
+      }
+      const path = rawPath.slice(1).split(".");
+      const value = resolveUiConfigValue(config, id, path);
+      changed = true;
+      if (value === void 0) {
+        return "undefined";
+      }
+      try {
+        const resolvedValue = resolveUiConfigStyleReferences(value, styles, id);
+        return typeof resolvedValue === "string" ? toStringLiteral(resolvedValue) : JSON.stringify(resolvedValue);
+      } catch (error) {
+        this.error(error instanceof Error ? error.message : String(error));
+      }
+    }).replace(UI_STYLE_PATTERN, (match, rawPath) => {
+      if (isConfigFile) {
+        return match;
+      }
       const path = rawPath.slice(1).split(".");
       const value = resolveStyleValue(styles, id, path);
       if (typeof value === "string") {
@@ -459,8 +684,7 @@ const module$1 = defineNuxtModule({
       );
     };
     await loadUiConfig();
-    const uiStyleTypePath = resolve(nuxt.options.buildDir, "types/brickflow-ui-style.d.ts");
-    const generateUiStyleTypes = async () => {
+    const getUiStyleTypeContents = async () => {
       const files = await scanUiStyleFiles(runtimePath);
       const fileContents = await Promise.all(
         files.map(async (file) => ({
@@ -468,19 +692,55 @@ const module$1 = defineNuxtModule({
           file
         }))
       );
-      const paths = fileContents.flatMap(({ content }) => collectUiStylePathsFromCode(content));
+      const uiConfig = (await loadUiConfig()).uiConfig;
+      const uiConfigStyleReferencePaths = collectUiConfigStyleReferencePaths(uiConfig);
+      const paths = [
+        ...fileContents.flatMap(({ content }) => collectUiStylePathsFromCode(content)),
+        ...uiConfigStyleReferencePaths.map((path) => path.slice(1))
+      ];
       const configPaths = fileContents.flatMap(
         ({ content, file }) => collectUiStyleConfigPathsFromCode(content, file)
       );
-      await mkdir(resolve(nuxt.options.buildDir, "types"), { recursive: true });
-      await writeFile(
-        uiStyleTypePath,
-        createUiStyleTypeDeclaration({
-          configPaths,
-          paths
-        })
+      configPaths.push(...uiConfigStyleReferencePaths);
+      const uiConfigPaths = fileContents.flatMap(
+        ({ content, file }) => collectUiConfigPathsFromCode(content, file, uiConfig)
       );
+      return createUiStyleTypeDeclaration({
+        configPaths,
+        paths,
+        uiConfigPaths
+      });
     };
+    const uiStyleTypeTemplate = addTypeTemplate({
+      filename: "types/brickflow-ui-style.d.ts",
+      getContents: getUiStyleTypeContents
+    });
+    const uiConfigLiteralTypeTemplate = addTypeTemplate({
+      filename: "types/brickflow-ui-config-literals.d.ts",
+      getContents: async () => {
+        const files = await scanUiStyleFiles(runtimePath);
+        const uiConfig = (await loadUiConfig()).uiConfig;
+        const paths = await Promise.all(
+          files.map(
+            async (file) => collectUiConfigComponentPathsFromCode(await readFile(file, "utf8"), file, uiConfig)
+          )
+        );
+        return createUiConfigLiteralTypeDeclaration(paths.flat(), uiConfig);
+      }
+    });
+    const uiConfigSchemaTypeTemplate = addTypeTemplate({
+      filename: "types/brickflow-ui-config-contract.d.ts",
+      getContents: async () => {
+        const files = await scanUiStyleFiles(componentsDirectory);
+        const entries = await Promise.all(
+          files.map(async (file) => collectUiConfigSchemaEntriesFromCode(await readFile(file, "utf8"), file))
+        );
+        return createUiConfigSchemaTypeDeclaration(entries.flat());
+      }
+    });
+    nuxt.hook("prepare:types", ({ references }) => {
+      references.push({ path: resolver.resolve("./runtime/config.d.ts") });
+    });
     const iconFontTemplate = addTemplate({
       filename: "brickflow/brickflow-ui-icons.mjs",
       getContents: async () => {
@@ -495,12 +755,14 @@ const module$1 = defineNuxtModule({
     const uiConfigTemplate = addTemplate({
       filename: "brickflow/brickflow-ui-config.mjs",
       getContents: () => [
-        `import rawConfig from ${JSON.stringify(resolvedConfigPath.replaceAll("\\", "/"))}`,
         `import { defineBrickflowUiConfig } from ${JSON.stringify(resolver.resolve("./runtime/tailwind").replaceAll("\\", "/"))}`,
+        `import rawConfig from ${JSON.stringify(resolvedConfigPath.replaceAll("\\", "/"))}`,
         "",
         "const config = defineBrickflowUiConfig(rawConfig)",
         "",
         "export const UI_STYLE = config.uiStyles",
+        "export const UI_CONFIG = config.uiConfig",
+        "export const uiConfig = config.uiConfig",
         "export const uiStyles = config.uiStyles",
         "export default config",
         ""
@@ -608,21 +870,21 @@ const module$1 = defineNuxtModule({
     nuxt.hook("pages:extend", (pages) => {
       pages.push({
         file: resolver.resolve("./runtime/pages/ui.vue"),
+        meta: {
+          layout: false
+        },
         name: "brickflow-ui",
         path: "/ui"
       });
     });
-    await generateUiStyleTypes();
-    nuxt.hook("prepare:types", async ({ references }) => {
-      await generateUiStyleTypes();
-      references.push({ path: uiStyleTypePath });
-    });
     nuxt.hook("builder:watch", async (_event, path) => {
       const absolutePath = resolve(nuxt.options.srcDir, path);
       if (relative(runtimePath, absolutePath).startsWith("..") || !UI_STYLE_FILE_PATTERN.test(path)) {
         return;
       }
-      await generateUiStyleTypes();
+      await updateTemplates({
+        filter: (template) => template.filename === uiStyleTypeTemplate.filename || template.filename === uiConfigLiteralTypeTemplate.filename || template.filename === uiConfigSchemaTypeTemplate.filename
+      });
       if (!relative(componentsDirectory, absolutePath).startsWith("..") && (UI_COMPONENT_FILE_PATTERN.test(path) || UI_DEMO_FILE_PATTERN.test(path))) {
         await updateTemplates({ filter: (template) => template.filename === uiCatalogTemplate.filename });
       }
@@ -641,6 +903,7 @@ const module$1 = defineNuxtModule({
       viteConfig.plugins.push(
         brickflowUiStylePlugin({
           configPath: resolvedConfigPath,
+          getConfig: async () => (await loadUiConfig()).uiConfig,
           getStyles: async () => (await loadUiConfig()).uiStyles
         })
       );

package/dist/runtime/components/Button/index.d.vue.ts

@@ -1,42 +1,48 @@
 import type { RouteLocationRaw } from 'vue-router';
-type __VLS_Props = {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     block?: boolean;
-    color?: ButtonColor;
+    color?: string;
     disabled?: boolean;
     icon?: string;
     loading?: boolean;
     rounded?: boolean;
-    size?: ButtonSize;
+    size?: string;
     square?: boolean;
     to?: RouteLocationRaw;
     trailingIcon?: string;
-    type?: 'button' | 'reset' | 'submit';
-    variant?: ButtonVariant;
-};
-type ButtonColor = 'alt' | 'danger' | 'info' | 'main' | 'plain' | 'warn' | 'win';
-type ButtonSize = 'lg' | 'md' | 'sm' | 'xl' | 'xs';
-type ButtonVariant = 'ghost' | 'glass' | 'soft' | 'solid' | 'subtle';
-declare var __VLS_10: {}, __VLS_22: {}, __VLS_24: {};
-type __VLS_Slots = {} & {
-    leading?: (props: typeof __VLS_10) => any;
-} & {
-    default?: (props: typeof __VLS_22) => any;
-} & {
-    trailing?: (props: typeof __VLS_24) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    size: ButtonSize;
+    type?: "button" | "reset" | "submit";
+    variant?: string;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    block?: boolean;
+    color?: string;
+    disabled?: boolean;
+    icon?: string;
+    loading?: boolean;
+    rounded?: boolean;
+    size?: string;
+    square?: boolean;
+    to?: RouteLocationRaw;
+    trailingIcon?: string;
+    type?: "button" | "reset" | "submit";
+    variant?: string;
+}> & Readonly<{}>, {
+    size: string;
     type: "button" | "reset" | "submit";
+    color: string;
     to: RouteLocationRaw;
-    color: ButtonColor;
     icon: string;
     rounded: boolean;
     trailingIcon: string;
-    variant: ButtonVariant;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-declare const _default: typeof __VLS_export;
-export default _default;
+    variant: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    leading?: (props: {}) => any;
+} & {
+    default?: (props: {}) => any;
+} & {
+    trailing?: (props: {}) => any;
+}>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/Button/index.vue

@@ -1,28 +1,27 @@
+<script>
+const UI_CONFIG = defineUiConfig();
+</script>
+
 <script setup>
 import { computed, shallowRef } from "vue";
 import Icon from "../Icon/index.vue";
 import BaseLink from "../Link/index.vue";
 const props = defineProps({
   block: { type: Boolean, required: false },
-  color: { type: String, required: false, default: "main" },
+  color: { type: String, required: false, default: UI_CONFIG.colorDefault },
   disabled: { type: Boolean, required: false },
   icon: { type: String, required: false, default: void 0 },
   loading: { type: Boolean, required: false },
   rounded: { type: Boolean, required: false, default: false },
-  size: { type: String, required: false, default: "md" },
+  size: { type: String, required: false, default: UI_CONFIG.sizeDefault },
   square: { type: Boolean, required: false },
   to: { type: null, required: false, default: void 0 },
   trailingIcon: { type: String, required: false, default: void 0 },
   type: { type: String, required: false, default: "button" },
-  variant: { type: String, required: false, default: "solid" }
+  variant: { type: String, required: false, default: UI_CONFIG.variantDefault }
 });
-const sizeClasses = {
-  lg: UI_STYLE.size.lg,
-  md: UI_STYLE.size.md,
-  sm: UI_STYLE.size.sm,
-  xl: UI_STYLE.size.xl,
-  xs: UI_STYLE.size.xs
-};
+const colorClasses = UI_CONFIG.colorClasses;
+const sizeClasses = UI_CONFIG.sizeClasses;
 const sizeIconClasses = {
   lg: UI_STYLE.size.lgIcon,
   md: UI_STYLE.size.mdIcon,
@@ -30,57 +29,6 @@ const sizeIconClasses = {
   xl: UI_STYLE.size.xlIcon,
   xs: UI_STYLE.size.xsIcon
 };
-const colorClasses = {
-  alt: {
-    ghost: UI_STYLE.color.alt.ghost,
-    glass: UI_STYLE.color.alt.glass,
-    soft: UI_STYLE.color.alt.soft,
-    solid: UI_STYLE.color.alt.solid,
-    subtle: UI_STYLE.color.alt.subtle
-  },
-  danger: {
-    ghost: UI_STYLE.color.danger.ghost,
-    glass: UI_STYLE.color.danger.glass,
-    soft: UI_STYLE.color.danger.soft,
-    solid: UI_STYLE.color.danger.solid,
-    subtle: UI_STYLE.color.danger.subtle
-  },
-  info: {
-    ghost: UI_STYLE.color.info.ghost,
-    glass: UI_STYLE.color.info.glass,
-    soft: UI_STYLE.color.info.soft,
-    solid: UI_STYLE.color.info.solid,
-    subtle: UI_STYLE.color.info.subtle
-  },
-  main: {
-    ghost: UI_STYLE.color.main.ghost,
-    glass: UI_STYLE.color.main.glass,
-    soft: UI_STYLE.color.main.soft,
-    solid: UI_STYLE.color.main.solid,
-    subtle: UI_STYLE.color.main.subtle
-  },
-  plain: {
-    ghost: UI_STYLE.color.plain.ghost,
-    glass: UI_STYLE.color.plain.glass,
-    soft: UI_STYLE.color.plain.soft,
-    solid: UI_STYLE.color.plain.solid,
-    subtle: UI_STYLE.color.plain.subtle
-  },
-  warn: {
-    ghost: UI_STYLE.color.warn.ghost,
-    glass: UI_STYLE.color.warn.glass,
-    soft: UI_STYLE.color.warn.soft,
-    solid: UI_STYLE.color.warn.solid,
-    subtle: UI_STYLE.color.warn.subtle
-  },
-  win: {
-    ghost: UI_STYLE.color.win.ghost,
-    glass: UI_STYLE.color.win.glass,
-    soft: UI_STYLE.color.win.soft,
-    solid: UI_STYLE.color.win.solid,
-    subtle: UI_STYLE.color.win.subtle
-  }
-};
 const component = computed(() => props.to === void 0 ? "button" : BaseLink);
 const disabled = computed(() => props.disabled || props.loading);
 const isButton = computed(() => props.to === void 0);
@@ -126,7 +74,7 @@ function handleTap() {
       <slot name="leading">
         <Icon
           v-if="props.loading"
-          :name="UI_STYLE.state.loadingIconName"
+          :name="UI_CONFIG.loadingIconName"
           :class="UI_STYLE.state.loading"
           aria-hidden="true"
         />