@katlux/toolkit 0.1.0-beta.0 → 0.1.0-beta.11

package/dist/runtime/composables/useFilterLogic.js

@@ -0,0 +1,170 @@
+import { EDataFilterOperator } from "@katlux/providers";
+export const useFilterLogic = () => {
+  const evaluateFilter = (filter, row) => {
+    if (filter.operator === EDataFilterOperator.And || filter.operator === EDataFilterOperator.Or || filter.operator === EDataFilterOperator.Nand || filter.operator === EDataFilterOperator.Nor) {
+      return !filter.active || applyOperator(filter.operator, row, filter.field);
+    }
+    if ("operator" in filter.field && "field" in filter.field) {
+      return !filter.active || evaluateFilter(filter.field, row);
+    }
+    const field = filter.field;
+    const fieldKeys = Object.keys(field);
+    return !filter.active || fieldKeys.every((key) => {
+      const filterValue = field[key];
+      const rowValue = row[key];
+      return applyOperator(filter.operator, rowValue, filterValue);
+    });
+  };
+  const applyOperator = (operator, rowValue, filterValue) => {
+    switch (operator) {
+      case EDataFilterOperator.And:
+        return compareAnd(rowValue, filterValue);
+      case EDataFilterOperator.Or:
+        return compareOr(rowValue, filterValue);
+      case EDataFilterOperator.Nand:
+        return !compareAnd(rowValue, filterValue);
+      case EDataFilterOperator.Nor:
+        return !compareOr(rowValue, filterValue);
+      case EDataFilterOperator.Equal:
+        return compareEqual(rowValue, filterValue);
+      case EDataFilterOperator.NotEqual:
+        return !compareEqual(rowValue, filterValue);
+      case EDataFilterOperator.GreaterThan:
+        return compareValues(rowValue, filterValue) > 0;
+      case EDataFilterOperator.LessThan:
+        return compareValues(rowValue, filterValue) < 0;
+      case EDataFilterOperator.GreaterThanOrEqual:
+        return compareValues(rowValue, filterValue) >= 0;
+      case EDataFilterOperator.LessThanOrEqual:
+        return compareValues(rowValue, filterValue) <= 0;
+      case EDataFilterOperator.In:
+        return compareIn(rowValue, filterValue);
+      case EDataFilterOperator.NotIn:
+        return !compareIn(rowValue, filterValue);
+      default:
+        return compareEqual(rowValue, filterValue);
+    }
+  };
+  const compareAnd = (row, nested) => {
+    const subFilters = Array.isArray(nested) ? nested : nested && typeof nested === "object" ? Object.values(nested) : [];
+    const validFilters = subFilters.filter((f) => f && typeof f === "object" && "operator" in f && "field" in f);
+    if (validFilters.length === 0) return true;
+    return validFilters.every((f) => {
+      const active = f.active !== false;
+      return active ? evaluateFilter(f, row) : true;
+    });
+  };
+  const compareOr = (row, nested) => {
+    const subFilters = Array.isArray(nested) ? nested : nested && typeof nested === "object" ? Object.values(nested) : [];
+    const validFilters = subFilters.filter((f) => f && typeof f === "object" && "operator" in f && "field" in f);
+    const activeFilters = validFilters.filter((f) => f.active !== false);
+    if (activeFilters.length === 0) return true;
+    return activeFilters.some((f) => {
+      return evaluateFilter(f, row);
+    });
+  };
+  const compareIn = (rowValue, filterValue) => {
+    if (typeof rowValue === "string" && typeof filterValue === "string") {
+      return rowValue.toLowerCase().includes(filterValue.toLowerCase());
+    }
+    return false;
+  };
+  const compareEqual = (rowValue, filterValue) => {
+    if (typeof rowValue === "string" && typeof filterValue === "string") {
+      return rowValue.toLowerCase() == filterValue.toLowerCase();
+    }
+    if (typeof rowValue === "number" && typeof filterValue === "number") {
+      return rowValue === filterValue;
+    }
+    if (typeof rowValue === "boolean" && typeof filterValue === "boolean") {
+      return rowValue === filterValue;
+    }
+    return rowValue === filterValue;
+  };
+  const compareValues = (rowValue, filterValue) => {
+    if (rowValue == null || filterValue == null) {
+      return rowValue == null ? -1 : 1;
+    }
+    if (typeof rowValue === "string" && typeof filterValue === "string") {
+      return rowValue.localeCompare(filterValue);
+    }
+    if (typeof rowValue === "number" && typeof filterValue === "number") {
+      return rowValue - filterValue;
+    }
+    return String(rowValue).localeCompare(String(filterValue));
+  };
+  const filterTreeData = (nodes, filter, options) => {
+    const { idKey, parentKey } = options;
+    const nodeMap = new Map(nodes.map((node) => [node[idKey], node]));
+    const childrenMap = /* @__PURE__ */ new Map();
+    nodes.forEach((node) => {
+      const pId = node[parentKey];
+      if (pId != null) {
+        if (!childrenMap.has(pId)) {
+          childrenMap.set(pId, []);
+        }
+        childrenMap.get(pId).push(node);
+      }
+    });
+    const matchingNodeIds = /* @__PURE__ */ new Set();
+    const expandedNodes = /* @__PURE__ */ new Set();
+    const visibleNodeIds = /* @__PURE__ */ new Set();
+    nodes.forEach((node) => {
+      const evalRow = node.data ? { ...node.data, ...node } : node;
+      if (evaluateFilter(filter, evalRow)) {
+        matchingNodeIds.add(node[idKey]);
+      }
+    });
+    const addDescendants = (nodeId) => {
+      const children = childrenMap.get(nodeId);
+      if (children && children.length > 0) {
+        expandedNodes.add(nodeId);
+        children.forEach((child) => {
+          visibleNodeIds.add(child[idKey]);
+          addDescendants(child[idKey]);
+        });
+      }
+    };
+    matchingNodeIds.forEach((id) => {
+      visibleNodeIds.add(id);
+      addDescendants(id);
+      let currentId = id;
+      while (currentId != null) {
+        visibleNodeIds.add(currentId);
+        const node = nodeMap.get(currentId);
+        if (node) {
+          if (node[parentKey] != null) {
+            expandedNodes.add(node[parentKey]);
+            currentId = node[parentKey];
+          } else {
+            currentId = null;
+          }
+        } else {
+          break;
+        }
+      }
+    });
+    const visibleNodes = nodes.filter((node) => visibleNodeIds.has(node[idKey]));
+    return {
+      visibleNodes,
+      expandedNodes
+    };
+  };
+  const filterData = (data, filter, options) => {
+    if (options?.treeOptions) {
+      const { visibleNodes, expandedNodes } = filterTreeData(
+        data,
+        filter,
+        options.treeOptions
+      );
+      return { results: visibleNodes, expandedNodes };
+    }
+    const results = data.filter((row) => evaluateFilter(filter, row));
+    return { results };
+  };
+  return {
+    evaluateFilter,
+    filterTreeData,
+    filterData
+  };
+};

package/dist/runtime/composables/usePresetComponent.d.ts

@@ -0,0 +1,2 @@
+import { type Component } from 'vue';
+export declare function usePresetComponent(componentBaseName: string, defaultComponent: Component): import("vue").ComputedRef<any>;

package/dist/runtime/composables/usePresetComponent.js

@@ -0,0 +1,36 @@
+import { computed, defineAsyncComponent } from "vue";
+import { useAppConfig } from "#app";
+const componentCache = /* @__PURE__ */ new Map();
+const modernComponents = import.meta.glob("../../../../katlux-preset-modern/src/runtime/components/**/*.vue");
+const toolkitPresets = import.meta.glob("../presets/**/*.vue");
+export function usePresetComponent(componentBaseName, defaultComponent) {
+  const appConfig = useAppConfig();
+  const activePreset = computed(() => appConfig.katluxToolkit?.activePreset || "default");
+  return computed(() => {
+    if (activePreset.value === "default") {
+      return defaultComponent;
+    }
+    const cacheKey = `${activePreset.value}:${componentBaseName}`;
+    if (componentCache.has(cacheKey)) {
+      return componentCache.get(cacheKey);
+    }
+    let loader;
+    if (activePreset.value === "modern") {
+      const path = `../../../../katlux-preset-modern/src/runtime/components/${componentBaseName}/${componentBaseName}.vue`;
+      loader = modernComponents[path];
+    } else {
+      const path = `../presets/${activePreset.value}/components/${componentBaseName}/${componentBaseName}.vue`;
+      loader = toolkitPresets[path];
+    }
+    if (!loader) {
+      console.warn(`[${componentBaseName}] Preset "${activePreset.value}" not found, falling back to default`);
+      return defaultComponent;
+    }
+    const asyncComp = defineAsyncComponent({
+      loader,
+      errorComponent: defaultComponent
+    });
+    componentCache.set(cacheKey, asyncComp);
+    return asyncComp;
+  });
+}

package/dist/runtime/composables/useRemainingTime.d.ts

@@ -0,0 +1,3 @@
+export declare const useRemainingTime: () => {
+    formatRemainingTime: (ms: number) => string;
+};

package/dist/runtime/composables/useRemainingTime.js

@@ -0,0 +1,17 @@
+export const useRemainingTime = () => {
+  const formatRemainingTime = (ms) => {
+    if (ms <= 0) return "expired";
+    const seconds = Math.floor(ms / 1e3);
+    const minutes = Math.floor(seconds / 60);
+    const hours = Math.floor(minutes / 60);
+    const days = Math.floor(hours / 24);
+    if (days > 0) return `${days}d`;
+    if (hours > 0) return `${hours}h`;
+    if (minutes > 0) return `${minutes}m`;
+    if (seconds > 0) return `${seconds}s`;
+    return "0s";
+  };
+  return {
+    formatRemainingTime
+  };
+};

package/dist/runtime/composables/useSortLogic.d.ts

@@ -0,0 +1,4 @@
+import type { TDataRow, IDataSort } from '@katlux/providers';
+export declare const useSortLogic: () => {
+    sortData: (sortList: IDataSort[], rows: TDataRow[]) => TDataRow[];
+};

package/dist/runtime/composables/useSortLogic.js

@@ -0,0 +1,55 @@
+export const useSortLogic = () => {
+  const sortData = (sortList, rows) => {
+    if (!sortList || sortList.length === 0 || !rows || rows.length === 0) {
+      return rows;
+    }
+    const sortedRows = [...rows];
+    const compare = (a, b) => {
+      for (const sort of sortList) {
+        const aVal = a[sort.field];
+        const bVal = b[sort.field];
+        if (aVal === null || aVal === void 0) {
+          if (bVal === null || bVal === void 0) continue;
+          return sort.direction === "asc" ? -1 : 1;
+        }
+        if (bVal === null || bVal === void 0) {
+          return sort.direction === "asc" ? 1 : -1;
+        }
+        if (aVal < bVal) {
+          return sort.direction === "asc" ? -1 : 1;
+        } else if (aVal > bVal) {
+          return sort.direction === "asc" ? 1 : -1;
+        }
+      }
+      return 0;
+    };
+    const merge = (left, right) => {
+      const result = [];
+      let leftIndex = 0;
+      let rightIndex = 0;
+      while (leftIndex < left.length && rightIndex < right.length) {
+        if (compare(left[leftIndex], right[rightIndex]) <= 0) {
+          result.push(left[leftIndex]);
+          leftIndex++;
+        } else {
+          result.push(right[rightIndex]);
+          rightIndex++;
+        }
+      }
+      return result.concat(left.slice(leftIndex)).concat(right.slice(rightIndex));
+    };
+    const mergeSort = (arr) => {
+      if (arr.length <= 1) {
+        return arr;
+      }
+      const mid = Math.floor(arr.length / 2);
+      const left = mergeSort(arr.slice(0, mid));
+      const right = mergeSort(arr.slice(mid));
+      return merge(left, right);
+    };
+    return mergeSort(sortedRows);
+  };
+  return {
+    sortData
+  };
+};

package/dist/runtime/composables/useTemplate.d.ts

@@ -0,0 +1,47 @@
+import { type Ref } from 'vue';
+import type { TemplateMetadata } from '../utils/TemplateResolver.js';
+export interface UseTemplateOptions {
+    componentName: string;
+    fallbackToDefault?: boolean;
+}
+export interface UseTemplateReturn {
+    metadata: Ref<TemplateMetadata>;
+    isCustomTemplate: Ref<boolean>;
+    templateName: Ref<string>;
+    isLoading: Ref<boolean>;
+    error: Ref<Error | null>;
+    refreshTemplate: () => void;
+}
+/**
+ * useTemplate - Composable for managing component template resolution
+ *
+ * This composable provides:
+ * - Template resolution logic for components
+ * - Reactive template state
+ * - Template loading and error handling
+ * - Template refresh capability
+ *
+ * @param options - Configuration options
+ * @returns Template state and utilities
+ *
+ * @example
+ * ```typescript
+ * const { metadata, isCustomTemplate } = useTemplate({
+ *   componentName: 'KButton'
+ * })
+ * ```
+ */
+export declare function useTemplate(options: UseTemplateOptions): UseTemplateReturn;
+/**
+ * useTemplateStyles - Composable for loading custom template styles
+ *
+ * This composable handles dynamic loading of custom SCSS styles
+ *
+ * @param componentName - Name of the component
+ * @returns Style loading state
+ */
+export declare function useTemplateStyles(componentName: string): {
+    isLoaded: Ref<boolean, boolean>;
+    error: Ref<Error | null, Error | null>;
+    loadStyles: () => Promise<void>;
+};

package/dist/runtime/composables/useTemplate.js

@@ -0,0 +1,70 @@
+import { ref, computed, onMounted } from "vue";
+import { useTemplateResolver } from "../utils/TemplateResolver";
+export function useTemplate(options) {
+  const { componentName, fallbackToDefault = true } = options;
+  const resolver = useTemplateResolver();
+  const metadata = ref(resolver.resolveTemplate(componentName));
+  const isLoading = ref(false);
+  const error = ref(null);
+  const isCustomTemplate = computed(() => {
+    return metadata.value.hasCustomTemplate && metadata.value.templateName !== "default";
+  });
+  const templateName = computed(() => {
+    return metadata.value.templateName;
+  });
+  const refreshTemplate = () => {
+    try {
+      isLoading.value = true;
+      error.value = null;
+      resolver.clearCache();
+      metadata.value = resolver.resolveTemplate(componentName);
+    } catch (e) {
+      error.value = e;
+      console.error(`Failed to refresh template for ${componentName}:`, e);
+      if (fallbackToDefault) {
+        console.warn(`Falling back to default template for ${componentName}`);
+        resolver.setActiveTemplate("default");
+        metadata.value = resolver.resolveTemplate(componentName);
+      }
+    } finally {
+      isLoading.value = false;
+    }
+  };
+  onMounted(() => {
+    refreshTemplate();
+  });
+  return {
+    metadata,
+    isCustomTemplate,
+    templateName,
+    isLoading,
+    error,
+    refreshTemplate
+  };
+}
+export function useTemplateStyles(componentName) {
+  const resolver = useTemplateResolver();
+  const metadata = resolver.resolveTemplate(componentName);
+  const isLoaded = ref(false);
+  const error = ref(null);
+  const loadStyles = async () => {
+    if (!metadata.hasCustomStyles || !metadata.stylesPath) {
+      isLoaded.value = true;
+      return;
+    }
+    try {
+      isLoaded.value = true;
+    } catch (e) {
+      error.value = e;
+      console.error(`Failed to load styles for ${componentName}:`, e);
+    }
+  };
+  onMounted(() => {
+    loadStyles();
+  });
+  return {
+    isLoaded,
+    error,
+    loadStyles
+  };
+}

package/dist/runtime/directives/clickOutside.d.ts

@@ -0,0 +1,7 @@
+import type { Directive } from 'vue';
+export declare const clickOutside: Directive;
+declare global {
+    interface HTMLElement {
+        _clickOutside?: (event: Event) => void;
+    }
+}

package/dist/runtime/directives/clickOutside.js

@@ -0,0 +1,45 @@
+export const clickOutside = {
+  // Handle SSR by providing empty props
+  getSSRProps() {
+    return {};
+  },
+  // Only run on client side
+  mounted(el, binding) {
+    if (typeof window === "undefined" || !binding.value) return;
+    el._clickOutside = (event) => {
+      const target = event.target;
+      if (el === target || el.contains(target)) return;
+      let handler;
+      let extraInside;
+      const value = binding.value;
+      if (typeof value === "function") {
+        handler = value;
+      } else if (value && typeof value === "object" && typeof value.handler === "function") {
+        handler = value.handler;
+        extraInside = value.extraInside;
+      } else {
+        return;
+      }
+      let isInsideExtra = false;
+      if (extraInside) {
+        if (typeof extraInside === "string") {
+          const extraEl = document.querySelector(extraInside);
+          if (extraEl && (extraEl === target || extraEl.contains(target))) isInsideExtra = true;
+        } else if (extraInside instanceof HTMLElement) {
+          if (extraInside === target || extraInside.contains(target)) isInsideExtra = true;
+        } else if (typeof extraInside === "function") {
+          if (extraInside(target)) isInsideExtra = true;
+        }
+      }
+      if (isInsideExtra) return;
+      handler(event);
+    };
+    document.addEventListener("click", el._clickOutside, true);
+  },
+  unmounted(el) {
+    if (el._clickOutside) {
+      document.removeEventListener("click", el._clickOutside, true);
+      delete el._clickOutside;
+    }
+  }
+};

package/dist/runtime/directives/index.d.ts

@@ -0,0 +1 @@
+export { clickOutside } from './clickOutside.js';

package/dist/runtime/directives/index.js

@@ -0,0 +1 @@
+export { clickOutside } from "./clickOutside.js";

package/dist/runtime/plugins/PresetPlugin.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Katlux Preset Plugin
+ *
+ * This plugin initializes the preset system on app startup:
+ * - Creates the PresetResolver singleton
+ * - Discovers available presets
+ * - Sets up preset watchers in dev mode
+ * - Provides global preset utilities
+ */
+declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/dist/runtime/plugins/PresetPlugin.js

@@ -0,0 +1,34 @@
+import { defineNuxtPlugin, useHead, useAppConfig } from "#app";
+import { watch } from "vue";
+import { PresetResolver } from "../utils/PresetResolver.js";
+export default defineNuxtPlugin((nuxtApp) => {
+  const resolver = new PresetResolver();
+  const activePreset = resolver.getActivePreset();
+  const appConfig = useAppConfig();
+  if (activePreset && appConfig.katluxToolkit) {
+    appConfig.katluxToolkit.activePreset = activePreset;
+  }
+  const updateRootAttribute = (preset) => {
+    useHead({
+      htmlAttrs: {
+        "data-template": preset
+      }
+    });
+  };
+  updateRootAttribute(activePreset);
+  if (appConfig.katluxToolkit) {
+    watch(() => appConfig.katluxToolkit?.activePreset, (newPreset) => {
+      if (newPreset) {
+        updateRootAttribute(newPreset);
+        resolver.setActivePreset(newPreset);
+      }
+    });
+  }
+  nuxtApp.provide("presetResolver", resolver);
+  if (process.dev && import.meta.hot) {
+    import.meta.hot.accept(() => {
+      console.log("[Katlux] Preset files changed, clearing cache");
+      resolver.clearCache();
+    });
+  }
+});

package/dist/runtime/plugins/registerDirectives.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/dist/runtime/plugins/registerDirectives.js

@@ -0,0 +1,5 @@
+import { defineNuxtPlugin } from "#app";
+import { clickOutside } from "../directives/index.js";
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.directive("click-outside", clickOutside);
+});

package/dist/runtime/presets/default/assets/scss/css-variables.css

@@ -0,0 +1,151 @@
+:root,
+[data-template=default] {
+  --primary-100: #e0f2f7;
+  --primary-300: #a7d9ed;
+  --primary-500: #2196f3;
+  --primary-700: #1976d2;
+  --primary-900: #0d47a1;
+  --accent-100: #e8f5e9;
+  --accent-300: #c8e6c9;
+  --accent-500: #4caf50;
+  --accent-700: #388e3c;
+  --accent-900: #1b5e20;
+  --neutral-50: #fafafa;
+  --neutral-100: #f5f5f5;
+  --neutral-200: #eeeeee;
+  --neutral-300: #e0e0e0;
+  --neutral-400: #bdbdbd;
+  --neutral-500: #9e9e9e;
+  --neutral-600: #757575;
+  --neutral-700: #616161;
+  --neutral-800: #424242;
+  --neutral-900: #212121;
+  --success-color: var(--accent-500);
+  --success-color-light: var(--accent-100);
+  --warning-color: #ffc107;
+  --warning-color-light: #fff3e0;
+  --error-color: #f44336;
+  --error-color-light: #fbe9e7;
+  --info-color: var(--primary-500);
+  --info-color-light: var(--primary-100);
+  --font-color-primary: var(--neutral-800);
+  --font-color-secondary: var(--neutral-600);
+  --font-color-heading: var(--neutral-900);
+  --font-color-light: var(--neutral-50);
+  --background-color: var(--neutral-50);
+  --background-color-light: var(--neutral-50);
+  --background-color-medium: var(--neutral-400);
+  --background-color-dark: var(--neutral-800);
+  --border-color-light: var(--neutral-200);
+  --border-color-medium: var(--neutral-400);
+  --border-color-dark: var(--neutral-600);
+  --gap-sm: 10px;
+  --gap-md: 20px;
+  --gap-lg: 30px;
+  --gap-xl: 40px;
+  --border-radius-sm: 4px;
+  --border-radius-md: 8px;
+  --border-radius-lg: 16px;
+  --border-radius-xl: 32px;
+  --border-radius-full: 9999px;
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  --font-size-xs: 10px;
+  --font-size-sm: 12px;
+  --font-size-md: 14px;
+  --font-size-lg: 16px;
+  --font-size-xl: 18px;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-family: Roboto, sans-serif;
+  --transition-fast: 0.15s ease;
+  --transition-normal: 0.3s ease;
+  --transition-slow: 0.5s ease;
+  --transition-bounce: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  --button-border-radius: var(--border-radius-sm);
+  --button-font-size-sm: var(--font-size-sm);
+  --button-font-size-md: var(--font-size-md);
+  --button-font-size-lg: var(--font-size-lg);
+  --button-bg-default: var(--neutral-900);
+  --button-text-default: var(--font-color-light);
+  --button-hover-bg-default: var(--neutral-700);
+  --button-bg-primary: var(--primary-500);
+  --button-text-primary: var(--font-color-light);
+  --button-hover-bg-primary: var(--primary-700);
+  --button-bg-success: var(--success-color);
+  --button-text-success: var(--font-color-light);
+  --button-hover-bg-success: var(--accent-700);
+  --button-bg-warning: var(--warning-color);
+  --button-text-warning: var(--neutral-900);
+  --button-hover-bg-warning: #e6ac00;
+  --button-bg-danger: var(--error-color);
+  --button-text-danger: var(--font-color-light);
+  --button-hover-bg-danger: #d32f2f;
+  --button-bg-info: var(--info-color);
+  --button-text-info: var(--font-color-light);
+  --button-hover-bg-info: var(--primary-300);
+  --button-bg-light: var(--neutral-50);
+  --button-text-light: var(--neutral-900);
+  --button-hover-bg-light: var(--neutral-200);
+  --button-bg-dark: var(--neutral-900);
+  --button-text-dark: var(--font-color-light);
+  --button-hover-bg-dark: var(--neutral-700);
+  --input-border-radius: var(--border-radius-sm);
+  --input-border-color: var(--border-color-medium);
+  --input-focus-border-color: var(--primary-500);
+  --input-focus-shadow: 0 0 0 3px rgba(33, 150, 243, 0.2);
+  --table-header-bg: var(--neutral-100);
+  --table-header-color: var(--neutral-700);
+  --table-border-color: var(--neutral-300);
+  --table-row-hover: var(--neutral-100);
+  --table-row-selected: #e3f2fd;
+  --checkbox-bg: var(--neutral-50);
+  --checkbox-checked-bg: var(--primary-500);
+  --checkbox-border-color: var(--border-color-medium);
+  --box-border-radius: var(--border-radius-md);
+  --box-border: 1px solid var(--border-color-medium);
+  --box-shadow: var(--shadow-md);
+  --box-padding: var(--gap-md);
+  --grid-gap: var(--gap-md);
+  --component-gap: var(--gap-sm);
+  --layover: var(--neutral-600);
+  --modal-overlay-bg: rgba(0, 0, 0, 0.5);
+  --layout-header-height: 60px;
+  --layout-header-bg: var(--background-color);
+  --layout-sidebar-width: 200px;
+  --layout-sidebar-bg: var(--background-color);
+  --layout-content-bg: var(--background-color-light);
+  --icon-color-light: var(--neutral-200);
+  --icon-color-medium: var(--neutral-400);
+  --icon-color-dark: var(--neutral-600);
+  --input-border: 1px solid var(--border-color-medium);
+  --input-button-bg: var(--neutral-300);
+  --input-button-hover-bg: var(--neutral-400);
+  --input-button-font-color: var(--font-color-primary);
+  --input-focus-border-color: var(--primary-500);
+  --button-hover-bg-danger: #d32f2f;
+  --button-hover-bg-info: var(--primary-300);
+  --button-hover-bg-light: var(--neutral-200);
+  --button-hover-bg-primary: var(--primary-700);
+  --button-hover-bg-success: var(--accent-700);
+  --button-hover-bg-warning: #e6ac00;
+  --button-hover-bg-dark: var(--neutral-700);
+  --button-text-danger: var(--font-color-light);
+  --button-text-primary: var(--font-color-light);
+  --button-text-success: var(--font-color-light);
+  --button-text-warning: var(--neutral-900);
+  --button-text-info: var(--font-color-light);
+  --button-text-light: var(--neutral-900);
+  --button-text-dark: var(--font-color-light);
+  --button-hover-text-danger: var(--button-text-danger);
+  --button-hover-text-primary: var(--button-text-primary);
+  --button-hover-text-success: var(--button-text-success);
+  --button-hover-text-warning: var(--button-text-warning);
+  --button-hover-text-info: var(--button-text-info);
+  --button-hover-text-light: var(--button-text-light);
+  --button-hover-text-dark: var(--button-text-dark);
+}