@miaixz/ui 0.5.0

package/dist/styles/components.css

@@ -0,0 +1,45 @@
+@layer miaixz-components;
+
+@import url("./components/alert.css") layer(miaixz-components);
+@import url("./components/avatar.css") layer(miaixz-components);
+@import url("./components/badge.css") layer(miaixz-components);
+@import url("./components/breadcrumb.css") layer(miaixz-components);
+@import url("./components/button.css") layer(miaixz-components);
+@import url("./components/choice.css") layer(miaixz-components);
+@import url("./components/combobox.css") layer(miaixz-components);
+@import url("./components/confirm-dialog.css") layer(miaixz-components);
+@import url("./components/data-table.css") layer(miaixz-components);
+@import url("./components/dialog.css") layer(miaixz-components);
+@import url("./components/divider.css") layer(miaixz-components);
+@import url("./components/drawer.css") layer(miaixz-components);
+@import url("./components/dropdown.css") layer(miaixz-components);
+@import url("./components/dropzone.css") layer(miaixz-components);
+@import url("./components/empty-state.css") layer(miaixz-components);
+@import url("./components/file-upload.css") layer(miaixz-components);
+@import url("./components/form-field.css") layer(miaixz-components);
+@import url("./components/icon.css") layer(miaixz-components);
+@import url("./components/inline-message.css") layer(miaixz-components);
+@import url("./components/input.css") layer(miaixz-components);
+@import url("./components/list.css") layer(miaixz-components);
+@import url("./components/loading-overlay.css") layer(miaixz-components);
+@import url("./components/menu.css") layer(miaixz-components);
+@import url("./components/multi-select.css") layer(miaixz-components);
+@import url("./components/navigation.css") layer(miaixz-components);
+@import url("./components/page-layout.css") layer(miaixz-components);
+@import url("./components/pagination.css") layer(miaixz-components);
+@import url("./components/panel.css") layer(miaixz-components);
+@import url("./components/popover.css") layer(miaixz-components);
+@import url("./components/progress.css") layer(miaixz-components);
+@import url("./components/search-input.css") layer(miaixz-components);
+@import url("./components/select.css") layer(miaixz-components);
+@import url("./components/skeleton.css") layer(miaixz-components);
+@import url("./components/spinner.css") layer(miaixz-components);
+@import url("./components/status-indicator.css") layer(miaixz-components);
+@import url("./components/switch.css") layer(miaixz-components);
+@import url("./components/table.css") layer(miaixz-components);
+@import url("./components/tabs.css") layer(miaixz-components);
+@import url("./components/textarea.css") layer(miaixz-components);
+@import url("./components/toast.css") layer(miaixz-components);
+@import url("./components/toolbar.css") layer(miaixz-components);
+@import url("./components/tooltip.css") layer(miaixz-components);
+@import url("./components/tree-view.css") layer(miaixz-components);

package/dist/styles/foundation/controls.css

@@ -0,0 +1,91 @@
+/**
+ * Miaixz control system
+ *
+ * Buttons, fields and selectors share one size, shape, focus and interaction
+ * contract. Product components extend these primitives instead of redefining
+ * control geometry.
+ */
+
+:root {
+  /* Control geometry */
+  --miaixz-control-height-small: 32px;
+  --miaixz-control-height-medium: 40px;
+  --miaixz-control-height-large: 48px;
+  --miaixz-control-min-target-size: 44px;
+  --miaixz-control-textarea-min-height: 96px;
+  --miaixz-control-padding-inline-small: var(--miaixz-space-12);
+  --miaixz-control-padding-inline-medium: var(--miaixz-space-16);
+  --miaixz-control-padding-inline-large: var(--miaixz-space-20);
+  --miaixz-control-padding-block-textarea: var(--miaixz-space-8);
+  --miaixz-control-gap: var(--miaixz-space-8);
+  --miaixz-control-border-width: var(--miaixz-border-width-default);
+  --miaixz-control-radius: var(--miaixz-radius-control);
+  --miaixz-control-focus-width: var(--miaixz-border-width-2);
+  --miaixz-control-focus-offset: var(--miaixz-space-2);
+}
+
+.miaixz-control {
+  display: inline-flex;
+  gap: var(--miaixz-control-gap);
+  align-items: center;
+  justify-content: center;
+  width: auto;
+  min-width: 0;
+  min-height: var(--miaixz-density-control-height);
+  padding-block: 0;
+  padding-inline: var(--miaixz-density-control-padding-inline);
+  font-family: var(--miaixz-font-family-sans);
+  font-size: var(--miaixz-text-body-size);
+  font-weight: var(--miaixz-font-weight-regular);
+  line-height: var(--miaixz-text-body-line-height);
+  vertical-align: middle;
+  color: var(--miaixz-color-text-primary);
+  text-decoration: none;
+  background: var(--miaixz-color-surface);
+  border: var(--miaixz-control-border-width) solid var(--miaixz-color-border);
+  border-radius: var(--miaixz-control-radius);
+  transition-timing-function: var(--miaixz-motion-interaction-easing);
+  transition-duration: var(--miaixz-motion-interaction-duration);
+  transition-property: color, background-color, border-color, box-shadow, transform, opacity;
+}
+
+.miaixz-control:where(:hover:not(:disabled, [aria-disabled="true"])) {
+  border-color: var(--miaixz-color-border-strong);
+}
+
+.miaixz-control:focus-visible {
+  outline: var(--miaixz-control-focus-width) solid var(--miaixz-color-focus);
+  outline-offset: var(--miaixz-control-focus-offset);
+}
+
+.miaixz-control:disabled,
+.miaixz-control[aria-disabled="true"] {
+  cursor: not-allowed;
+}
+
+.miaixz-control-small {
+  min-height: var(--miaixz-control-height-small);
+  padding-inline: var(--miaixz-control-padding-inline-small);
+}
+
+.miaixz-control-medium {
+  min-height: var(--miaixz-control-height-medium);
+  padding-inline: var(--miaixz-control-padding-inline-medium);
+}
+
+.miaixz-control-large {
+  min-height: var(--miaixz-control-height-large);
+  padding-inline: var(--miaixz-control-padding-inline-large);
+}
+
+.miaixz-control-block {
+  width: 100%;
+}
+
+@media (pointer: coarse) {
+  .miaixz-control,
+  .miaixz-control-small,
+  .miaixz-control-medium {
+    min-height: var(--miaixz-control-min-target-size);
+  }
+}

package/dist/styles/foundation/density.css

@@ -0,0 +1,76 @@
+/**
+ * Miaixz interface density system
+ *
+ * Density changes component geometry without changing typography, page scale
+ * or explicit small, medium and large component variants.
+ */
+
+:root {
+  /* Density primitives */
+  --miaixz-density-control-height-compact: 32px;
+  --miaixz-density-control-height-standard: 40px;
+  --miaixz-density-control-height-comfortable: 48px;
+  --miaixz-density-control-padding-inline-compact: var(--miaixz-space-12);
+  --miaixz-density-control-padding-inline-standard: var(--miaixz-space-16);
+  --miaixz-density-control-padding-inline-comfortable: var(--miaixz-space-20);
+  --miaixz-density-component-gap-compact: var(--miaixz-space-8);
+  --miaixz-density-component-gap-standard: var(--miaixz-space-12);
+  --miaixz-density-component-gap-comfortable: var(--miaixz-space-16);
+  --miaixz-density-panel-padding-compact: var(--miaixz-space-16);
+  --miaixz-density-panel-padding-standard: var(--miaixz-space-24);
+  --miaixz-density-panel-padding-comfortable: var(--miaixz-space-32);
+  --miaixz-density-list-item-height-compact: 36px;
+  --miaixz-density-list-item-height-standard: 44px;
+  --miaixz-density-list-item-height-comfortable: 52px;
+  --miaixz-density-table-row-height-compact: 40px;
+  --miaixz-density-table-row-height-standard: 48px;
+  --miaixz-density-table-row-height-comfortable: 56px;
+  --miaixz-density-table-cell-padding-inline-compact: var(--miaixz-space-12);
+  --miaixz-density-table-cell-padding-inline-standard: var(--miaixz-space-16);
+  --miaixz-density-table-cell-padding-inline-comfortable: var(--miaixz-space-20);
+  --miaixz-density-table-cell-padding-block-compact: var(--miaixz-space-8);
+  --miaixz-density-table-cell-padding-block-standard: var(--miaixz-space-12);
+  --miaixz-density-table-cell-padding-block-comfortable: var(--miaixz-space-16);
+
+  /* Active density defaults to standard. */
+  --miaixz-density-control-height: var(--miaixz-density-control-height-standard);
+  --miaixz-density-control-padding-inline: var(--miaixz-density-control-padding-inline-standard);
+  --miaixz-density-component-gap: var(--miaixz-density-component-gap-standard);
+  --miaixz-density-panel-padding: var(--miaixz-density-panel-padding-standard);
+  --miaixz-density-list-item-height: var(--miaixz-density-list-item-height-standard);
+  --miaixz-density-table-row-height: var(--miaixz-density-table-row-height-standard);
+  --miaixz-density-table-cell-padding-inline: var(
+    --miaixz-density-table-cell-padding-inline-standard
+  );
+  --miaixz-density-table-cell-padding-block: var(
+    --miaixz-density-table-cell-padding-block-standard
+  );
+}
+
+:root[data-miaixz-density="compact"] {
+  --miaixz-density-control-height: var(--miaixz-density-control-height-compact);
+  --miaixz-density-control-padding-inline: var(--miaixz-density-control-padding-inline-compact);
+  --miaixz-density-component-gap: var(--miaixz-density-component-gap-compact);
+  --miaixz-density-panel-padding: var(--miaixz-density-panel-padding-compact);
+  --miaixz-density-list-item-height: var(--miaixz-density-list-item-height-compact);
+  --miaixz-density-table-row-height: var(--miaixz-density-table-row-height-compact);
+  --miaixz-density-table-cell-padding-inline: var(
+    --miaixz-density-table-cell-padding-inline-compact
+  );
+  --miaixz-density-table-cell-padding-block: var(--miaixz-density-table-cell-padding-block-compact);
+}
+
+:root[data-miaixz-density="comfortable"] {
+  --miaixz-density-control-height: var(--miaixz-density-control-height-comfortable);
+  --miaixz-density-control-padding-inline: var(--miaixz-density-control-padding-inline-comfortable);
+  --miaixz-density-component-gap: var(--miaixz-density-component-gap-comfortable);
+  --miaixz-density-panel-padding: var(--miaixz-density-panel-padding-comfortable);
+  --miaixz-density-list-item-height: var(--miaixz-density-list-item-height-comfortable);
+  --miaixz-density-table-row-height: var(--miaixz-density-table-row-height-comfortable);
+  --miaixz-density-table-cell-padding-inline: var(
+    --miaixz-density-table-cell-padding-inline-comfortable
+  );
+  --miaixz-density-table-cell-padding-block: var(
+    --miaixz-density-table-cell-padding-block-comfortable
+  );
+}

package/dist/styles/foundation/icons.css

@@ -0,0 +1,29 @@
+/**
+ * Miaixz icon system
+ * Source: Lucide Icons 1.35.0 (ISC License)
+ *
+ * Lucide is the only general-purpose icon library used by the interface.
+ * Brand marks and product-specific illustrations are managed separately.
+ */
+
+:root {
+  /* Primitive icon-size scale */
+  --miaixz-icon-size-12: 12px;
+  --miaixz-icon-size-16: 16px;
+  --miaixz-icon-size-20: 20px;
+  --miaixz-icon-size-24: 24px;
+  --miaixz-icon-size-32: 32px;
+  --miaixz-icon-size-40: 40px;
+
+  /* Semantic icon sizes */
+  --miaixz-icon-size-indicator: var(--miaixz-icon-size-12);
+  --miaixz-icon-size-inline: var(--miaixz-icon-size-16);
+  --miaixz-icon-size-control: var(--miaixz-icon-size-16);
+  --miaixz-icon-size-navigation: var(--miaixz-icon-size-20);
+  --miaixz-icon-size-feature: var(--miaixz-icon-size-24);
+  --miaixz-icon-size-display: var(--miaixz-icon-size-32);
+
+  /* Stroke scale */
+  --miaixz-icon-stroke-regular: 1.75;
+  --miaixz-icon-stroke-strong: 2;
+}

package/dist/styles/foundation/layout.css

@@ -0,0 +1,150 @@
+/**
+ * Miaixz global layout system
+ *
+ * This is the single source of truth for spacing, application shell,
+ * page geometry, responsive grids and scroll regions.
+ * Page-level styles must consume these tokens instead of redefining them.
+ */
+
+:root {
+  /* Spacing scale */
+  --miaixz-space-0: 0;
+  --miaixz-space-2: 2px;
+  --miaixz-space-4: 4px;
+  --miaixz-space-8: 8px;
+  --miaixz-space-12: 12px;
+  --miaixz-space-16: 16px;
+  --miaixz-space-20: 20px;
+  --miaixz-space-24: 24px;
+  --miaixz-space-32: 32px;
+  --miaixz-space-40: 40px;
+  --miaixz-space-48: 48px;
+  --miaixz-space-64: 64px;
+
+  /* Responsive reference values; media queries below mirror these values. */
+  --miaixz-breakpoint-mobile: 767px;
+  --miaixz-breakpoint-tablet: 1023px;
+  --miaixz-breakpoint-desktop: 1279px;
+  --miaixz-breakpoint-wide: 1440px;
+
+  /* Application shell */
+  --miaixz-shell-header-height: 72px;
+  --miaixz-shell-sidebar-width: 72px;
+  --miaixz-shell-sidebar-compact-width: 64px;
+  --miaixz-shell-mobile-navigation-height: 64px;
+  --miaixz-page-max-width: 1680px;
+  --miaixz-page-gutter: clamp(var(--miaixz-space-16), 2.2vw, var(--miaixz-space-32));
+  --miaixz-page-block-padding: var(--miaixz-space-32);
+  --miaixz-layout-section-gap: var(--miaixz-space-24);
+  --miaixz-layout-grid-gap: var(--miaixz-space-20);
+  --miaixz-layout-panel-min-width: 280px;
+  --miaixz-layout-panel-wide-min-width: 360px;
+  --miaixz-layout-split-primary-size: 1fr;
+  --miaixz-layout-split-secondary-size: 1fr;
+  --miaixz-layout-local-sidebar-width: 280px;
+  --miaixz-layout-sticky-offset: var(--miaixz-space-16);
+
+  /* Safe areas */
+  --miaixz-safe-area-top: env(safe-area-inset-top, 0px);
+  --miaixz-safe-area-right: env(safe-area-inset-right, 0px);
+  --miaixz-safe-area-bottom: env(safe-area-inset-bottom, 0px);
+  --miaixz-safe-area-left: env(safe-area-inset-left, 0px);
+  --miaixz-safe-area-inline-start: var(--miaixz-safe-area-left);
+  --miaixz-safe-area-inline-end: var(--miaixz-safe-area-right);
+
+  /* Layer order */
+  --miaixz-z-base: 0;
+  --miaixz-z-sticky: 20;
+  --miaixz-z-navigation: 40;
+  --miaixz-z-overlay: 60;
+  --miaixz-z-modal: 80;
+  --miaixz-z-toast: 100;
+}
+
+:root[dir="rtl"] {
+  --miaixz-safe-area-inline-start: var(--miaixz-safe-area-right);
+  --miaixz-safe-area-inline-end: var(--miaixz-safe-area-left);
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  min-width: 320px;
+  min-height: 100%;
+  text-size-adjust: 100%;
+}
+
+body {
+  min-width: 320px;
+  min-height: 100vh;
+  min-height: 100dvh;
+  margin: 0;
+}
+
+img,
+svg,
+video,
+canvas {
+  display: block;
+  max-width: 100%;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+.miaixz-visually-hidden {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+  clip-path: inset(50%) !important;
+}
+
+/* Compact desktop: 1024–1279 */
+@media (width <= 1279px) {
+  :root {
+    --miaixz-page-block-padding: var(--miaixz-space-24);
+    --miaixz-layout-section-gap: var(--miaixz-space-20);
+    --miaixz-layout-grid-gap: var(--miaixz-space-16);
+  }
+}
+
+/* Tablet: 768–1023 */
+@media (width <= 1023px) {
+  :root {
+    --miaixz-shell-header-height: 64px;
+    --miaixz-shell-sidebar-width: var(--miaixz-shell-sidebar-compact-width);
+    --miaixz-page-block-padding: var(--miaixz-space-20);
+  }
+}
+
+/* Mobile: 320–767 */
+@media (width <= 767px) {
+  :root {
+    --miaixz-page-block-padding: var(--miaixz-space-16);
+    --miaixz-layout-section-gap: var(--miaixz-space-16);
+    --miaixz-layout-grid-gap: var(--miaixz-space-12);
+  }
+}
+
+/* Wide screens */
+@media (width >= 1440px) {
+  :root {
+    --miaixz-page-gutter: var(--miaixz-space-32);
+  }
+}

package/dist/styles/foundation/motion.css

@@ -0,0 +1,58 @@
+/**
+ * Miaixz motion system
+ *
+ * Motion communicates interaction and state changes. Components must select a
+ * semantic duration and must not use transition: all.
+ */
+
+:root {
+  /* Duration scale */
+  --miaixz-duration-instant: 0ms;
+  --miaixz-duration-fast: 120ms;
+  --miaixz-duration-normal: 180ms;
+  --miaixz-duration-slow: 240ms;
+  --miaixz-duration-slower: 320ms;
+
+  /* Easing scale */
+  --miaixz-easing-standard: cubic-bezier(0.2, 0, 0, 1);
+  --miaixz-easing-enter: cubic-bezier(0, 0, 0, 1);
+  --miaixz-easing-exit: cubic-bezier(0.3, 0, 1, 1);
+  --miaixz-easing-emphasized: cubic-bezier(0.2, 0, 0, 1.2);
+
+  /* Semantic motion */
+  --miaixz-motion-interaction-duration: var(--miaixz-duration-fast);
+  --miaixz-motion-state-duration: var(--miaixz-duration-normal);
+  --miaixz-motion-overlay-duration: var(--miaixz-duration-slow);
+  --miaixz-motion-interaction-easing: var(--miaixz-easing-standard);
+  --miaixz-motion-enter-easing: var(--miaixz-easing-enter);
+  --miaixz-motion-exit-easing: var(--miaixz-easing-exit);
+}
+
+.miaixz-motion-colors {
+  transition-timing-function: var(--miaixz-motion-interaction-easing);
+  transition-duration: var(--miaixz-motion-interaction-duration);
+  transition-property: color, background-color, border-color, outline-color, box-shadow, opacity;
+}
+
+.miaixz-motion-transform {
+  transition-timing-function: var(--miaixz-motion-interaction-easing);
+  transition-duration: var(--miaixz-motion-state-duration);
+  transition-property: transform, opacity;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --miaixz-motion-interaction-duration: 0.01ms;
+    --miaixz-motion-state-duration: 0.01ms;
+    --miaixz-motion-overlay-duration: 0.01ms;
+  }
+
+  *,
+  *::before,
+  *::after {
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+  }
+}

package/dist/styles/foundation/surface.css

@@ -0,0 +1,60 @@
+/**
+ * Miaixz surface system
+ *
+ * Shape, border and elevation values are defined here. Color values come from
+ * theme.css so every surface follows the active user theme.
+ */
+
+:root {
+  /* Corner radius */
+  --miaixz-radius-0: 0;
+  --miaixz-radius-4: 4px;
+  --miaixz-radius-8: 8px;
+  --miaixz-radius-12: 12px;
+  --miaixz-radius-16: 16px;
+  --miaixz-radius-round: 9999px;
+
+  /* Semantic radius */
+  --miaixz-radius-control: var(--miaixz-radius-8);
+  --miaixz-radius-panel: var(--miaixz-radius-12);
+  --miaixz-radius-dialog: var(--miaixz-radius-16);
+
+  /* Border width */
+  --miaixz-border-width-0: 0;
+  --miaixz-border-width-1: 1px;
+  --miaixz-border-width-2: 2px;
+  --miaixz-border-width-default: var(--miaixz-border-width-1);
+  --miaixz-border-width-strong: var(--miaixz-border-width-2);
+
+  /* Elevation */
+  --miaixz-shadow-none: none;
+  --miaixz-shadow-low: 0 1px 2px var(--miaixz-color-shadow);
+  --miaixz-shadow-medium: 0 6px 18px var(--miaixz-color-shadow);
+  --miaixz-shadow-high: 0 16px 36px var(--miaixz-color-shadow-strong);
+  --miaixz-shadow-overlay: 0 24px 64px var(--miaixz-color-shadow-strong);
+}
+
+.miaixz-surface {
+  color: var(--miaixz-color-text-primary);
+  background: var(--miaixz-color-surface);
+  border: var(--miaixz-border-width-default) solid var(--miaixz-color-border);
+  border-radius: var(--miaixz-radius-panel);
+  box-shadow: var(--miaixz-shadow-none);
+}
+
+.miaixz-surface-raised {
+  box-shadow: var(--miaixz-shadow-medium);
+}
+
+.miaixz-surface-padded {
+  padding: var(--miaixz-density-panel-padding);
+}
+
+.miaixz-surface-overlay {
+  border-radius: var(--miaixz-radius-dialog);
+  box-shadow: var(--miaixz-shadow-overlay);
+}
+
+.miaixz-surface-round {
+  border-radius: var(--miaixz-radius-round);
+}

package/dist/styles/foundation/theme.css

@@ -0,0 +1,166 @@
+/**
+ * Miaixz color and theme system
+ *
+ * Components consume semantic color tokens only. User-defined themes override
+ * the editable tokens at runtime through Miaixz.theme instead of editing CSS.
+ */
+
+:root {
+  color-scheme: light;
+
+  /* Brand */
+  --miaixz-color-brand: #58b832;
+  --miaixz-color-on-brand: #10160d;
+  --miaixz-color-brand-hover: #4ba02a;
+  --miaixz-color-brand-active: #428c24;
+  --miaixz-color-brand-soft: #ecf7e8;
+  --miaixz-color-brand-soft-hover: #e2f3dd;
+
+  /* Backgrounds and surfaces */
+  --miaixz-color-background: #f8faf7;
+  /* stylelint-disable-next-line color-hex-length -- SDK theme contract freezes six digits. */
+  --miaixz-color-surface: #ffffff;
+  --miaixz-color-surface-secondary: #f3f6f1;
+  --miaixz-color-surface-hover: #eef3eb;
+  --miaixz-color-surface-active: #e6ede2;
+  --miaixz-color-surface-selected: #ebf8e7;
+
+  /* Text */
+  --miaixz-color-text-primary: #1d211b;
+  --miaixz-color-text-secondary: #667061;
+  --miaixz-color-text-muted: #6b7567;
+  --miaixz-color-text-disabled: #9da69a;
+  --miaixz-color-text-inverse: #f8faf7;
+
+  /* Borders and focus */
+  --miaixz-color-border: #dce4d8;
+  --miaixz-color-border-strong: #74806f;
+  --miaixz-color-focus: #3f8f22;
+
+  /* Semantic status */
+  --miaixz-color-success: #267a39;
+  --miaixz-color-success-soft: #eef8f0;
+  --miaixz-color-warning: #8a5500;
+  --miaixz-color-warning-soft: #fff6e5;
+  --miaixz-color-danger: #b03030;
+  --miaixz-color-danger-soft: #fceeee;
+  --miaixz-color-info: #2568b5;
+  --miaixz-color-info-soft: #edf5fd;
+
+  /* Overlays and native controls */
+  --miaixz-color-backdrop: #11180f7a;
+  --miaixz-color-shadow: #1d211b1a;
+  --miaixz-color-shadow-strong: #1d211b2e;
+  --miaixz-color-selection: #e1f2da;
+  --miaixz-opacity-disabled: 0.48;
+  --miaixz-opacity-muted: 0.72;
+}
+
+:root[data-miaixz-color-mode="dark"] {
+  color-scheme: dark;
+
+  --miaixz-color-brand: #6bc548;
+  --miaixz-color-on-brand: #10160d;
+  --miaixz-color-brand-hover: #5cab3d;
+  --miaixz-color-brand-active: #509735;
+  --miaixz-color-brand-soft: #0b1d05;
+  --miaixz-color-brand-soft-hover: #142d0a;
+  --miaixz-color-background: #121510;
+  --miaixz-color-surface: #191d17;
+  --miaixz-color-surface-secondary: #20251e;
+  --miaixz-color-surface-hover: #272d24;
+  --miaixz-color-surface-active: #30372c;
+  --miaixz-color-surface-selected: #233a1c;
+  --miaixz-color-text-primary: #edf1eb;
+  --miaixz-color-text-secondary: #b6c0b2;
+  --miaixz-color-text-muted: #929d8e;
+  --miaixz-color-text-disabled: #6f796c;
+  --miaixz-color-text-inverse: #161a14;
+  --miaixz-color-border: #343c31;
+  --miaixz-color-border-strong: #697a64;
+  --miaixz-color-focus: #8adb69;
+  --miaixz-color-success: #7ad18c;
+  --miaixz-color-success-soft: #18321f;
+  --miaixz-color-warning: #e5b45f;
+  --miaixz-color-warning-soft: #382a16;
+  --miaixz-color-danger: #f08a8a;
+  --miaixz-color-danger-soft: #3a1f1f;
+  --miaixz-color-info: #8abcf2;
+  --miaixz-color-info-soft: #192c40;
+  --miaixz-color-backdrop: #000000a3;
+  --miaixz-color-shadow: #00000047;
+  --miaixz-color-shadow-strong: #00000070;
+  --miaixz-color-selection: #294a20;
+}
+
+html {
+  background: var(--miaixz-color-background);
+}
+
+body {
+  color: var(--miaixz-color-text-primary);
+  accent-color: var(--miaixz-color-brand);
+  caret-color: var(--miaixz-color-brand);
+  background: var(--miaixz-color-background);
+}
+
+::selection {
+  color: var(--miaixz-color-text-primary);
+  background: var(--miaixz-color-selection);
+}
+
+::placeholder {
+  color: var(--miaixz-color-text-muted);
+  opacity: 1;
+}
+
+:focus-visible {
+  outline: 2px solid var(--miaixz-color-focus);
+  outline-offset: 2px;
+}
+
+[aria-disabled="true"],
+:disabled {
+  opacity: var(--miaixz-opacity-disabled);
+}
+
+@media (forced-colors: active) {
+  :root {
+    color-scheme: light dark;
+
+    --miaixz-color-brand: ButtonText !important;
+    --miaixz-color-on-brand: ButtonFace !important;
+    --miaixz-color-brand-hover: ButtonText !important;
+    --miaixz-color-brand-active: ButtonText !important;
+    --miaixz-color-brand-soft: Canvas !important;
+    --miaixz-color-brand-soft-hover: Canvas !important;
+    --miaixz-color-background: Canvas !important;
+    --miaixz-color-surface: Canvas !important;
+    --miaixz-color-surface-secondary: Canvas !important;
+    --miaixz-color-surface-hover: Canvas !important;
+    --miaixz-color-surface-active: Canvas !important;
+    --miaixz-color-surface-selected: Canvas !important;
+    --miaixz-color-text-primary: CanvasText !important;
+    --miaixz-color-text-secondary: CanvasText !important;
+    --miaixz-color-text-muted: CanvasText !important;
+    --miaixz-color-text-disabled: GrayText !important;
+    --miaixz-color-text-inverse: CanvasText !important;
+    --miaixz-color-border: GrayText !important;
+    --miaixz-color-border-strong: CanvasText !important;
+    --miaixz-color-focus: Highlight !important;
+    --miaixz-color-success: CanvasText !important;
+    --miaixz-color-success-soft: Canvas !important;
+    --miaixz-color-warning: CanvasText !important;
+    --miaixz-color-warning-soft: Canvas !important;
+    --miaixz-color-danger: CanvasText !important;
+    --miaixz-color-danger-soft: Canvas !important;
+    --miaixz-color-info: CanvasText !important;
+    --miaixz-color-info-soft: Canvas !important;
+    --miaixz-color-backdrop: CanvasText !important;
+    --miaixz-color-shadow: transparent !important;
+    --miaixz-color-shadow-strong: transparent !important;
+    --miaixz-color-selection: Highlight !important;
+    --miaixz-opacity-disabled: 1 !important;
+    --miaixz-opacity-muted: 1 !important;
+  }
+}