@composy/keyboard-vue 0.0.1 → 0.0.2

package/dist/index.css

@@ -1,275 +1,425 @@
 /* style/index.less */
 
-/*# sourceMappingURL=src/style/index.less.map */
+/*# sourceMappingURL=src\style\index.less.map */
 
 /* styles/index.less */
 /**
- * LDesign Keyboard 样式
- * @module styles
+ * LDesign Keyboard styles
  */
-/* 核心样式 */
-@import 'keyboard.css';
-/* 主题样式 */
-@import 'themes.css';
-/* 深色主题 */
-.dark,
-[data-theme="dark"] {
-  --keyboard-bg: #374151;
-  --keyboard-key-bg: #4b5563;
-  --keyboard-key-color: #f9fafb;
-  --keyboard-key-active-bg: #6b7280;
-  --keyboard-fn-key-bg: #1f2937;
-  --keyboard-fn-key-color: #f9fafb;
-  --keyboard-fn-key-active-bg: #111827;
-  --keyboard-primary-bg: #2563eb;
-  --keyboard-primary-active-bg: #1d4ed8;
-}
-/* iOS 风格主题 */
-.keyboard-theme-ios {
-  --keyboard-bg: #d1d5db;
-  --keyboard-key-bg: #ffffff;
-  --keyboard-key-color: #000000;
-  --keyboard-key-active-bg: #c4c7cc;
-  --keyboard-fn-key-bg: #adb3bc;
-  --keyboard-fn-key-color: #000000;
-  --keyboard-fn-key-active-bg: #8e9399;
-  --keyboard-primary-bg: #007aff;
-  --keyboard-primary-active-bg: #0062cc;
-  --keyboard-key-radius: 5px;
-}
-/* Android 风格主题 */
-.keyboard-theme-android {
-  --keyboard-bg: #263238;
-  --keyboard-key-bg: #37474f;
-  --keyboard-key-color: #ffffff;
-  --keyboard-key-active-bg: #455a64;
-  --keyboard-fn-key-bg: #455a64;
-  --keyboard-fn-key-color: #90a4ae;
-  --keyboard-fn-key-active-bg: #546e7a;
-  --keyboard-primary-bg: #4285f4;
-  --keyboard-primary-active-bg: #3367d6;
-  --keyboard-key-radius: 4px;
-}
-/* 基础重置 */
+/**
+ * LDesign Keyboard shared styles.
+ */
+:root {
+  --keyboard-bg: var(--ld-bg-surface);
+  --keyboard-key-bg: var(--ld-bg-container);
+  --keyboard-key-color: var(--ld-text-primary);
+  --keyboard-key-active-bg: var(--ld-primary-50);
+  --keyboard-key-border: var(--ld-border);
+  --keyboard-fn-key-bg: var(--ld-bg-elevated);
+  --keyboard-fn-key-color: var(--ld-text-secondary);
+  --keyboard-fn-key-active-bg: var(--ld-primary-100);
+  --keyboard-primary-bg: var(--ld-primary-500);
+  --keyboard-primary-active-bg: var(--ld-primary-600);
+  --keyboard-primary-color: var(--ld-text-inverse);
+  --keyboard-mask-bg: color-mix(in srgb, var(--ld-black) 40%, var(--ld-transparent));
+  --keyboard-key-height: var(--ld-px-48);
+  --keyboard-key-radius: var(--ld-radius-md);
+  --keyboard-key-gap: var(--ld-spacing-sm);
+  --keyboard-font-size: var(--ld-font-lg);
+  --keyboard-fn-font-size: var(--ld-font-sm);
+  --keyboard-padding: var(--ld-spacing-sm);
+  --keyboard-key-shadow: var(--ld-shadow-sm, none);
+}
 .virtual-keyboard,
-.virtual-keyboard * {
+.virtual-keyboard *,
+.keyboard-popup,
+.keyboard-popup * {
   box-sizing: border-box;
+  margin: 0;
+  padding: 0;
 }
 .virtual-keyboard {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: var(--keyboard-padding);
+  background-color: var(--keyboard-bg);
+  font-family: var(--ld-font-family);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-}
-/* 禁止选中 */
-.virtual-keyboard,
-.keyboard-popup {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -moz-user-select: none;
        user-select: none;
 }
-/* 禁止 iOS 点击高亮 */
+.virtual-keyboard__row,
+.numpad-row {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  gap: var(--keyboard-key-gap);
+  margin-bottom: var(--keyboard-key-gap);
+}
+.virtual-keyboard__row:last-child {
+  margin-bottom: 0;
+}
 .keyboard-key {
+  display: inline-flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  height: var(--keyboard-key-height);
+  padding: 0 var(--ld-spacing-xs);
+  border: 0;
+  border-radius: var(--keyboard-key-radius);
+  background-color: var(--keyboard-key-bg);
+  color: var(--keyboard-key-color);
+  font-size: var(--keyboard-font-size);
+  font-weight: 500;
+  cursor: pointer;
+  touch-action: manipulation;
+  transition: background-color var(--ld-duration-fast), transform var(--ld-duration-fast);
   -webkit-tap-highlight-color: transparent;
+  box-shadow: var(--keyboard-key-shadow);
 }
-/* 移动端优化 */
-@media (max-width: 768px) {
-  :root {
-    --keyboard-key-height: 46px;
-    --keyboard-font-size: 18px;
-  }
+.keyboard-key:active {
+  background-color: var(--keyboard-key-active-bg);
+  transform: scale(0.98);
+}
+.keyboard-key--disabled {
+  opacity: 0;
+  cursor: default;
+  pointer-events: none;
+}
+.keyboard-key--backspace,
+.keyboard-key--shift,
+.keyboard-key--tab,
+.keyboard-key--clear,
+.keyboard-key--close {
+  background-color: var(--keyboard-fn-key-bg);
+  color: var(--keyboard-fn-key-color);
+  font-size: var(--keyboard-fn-font-size);
+  font-weight: 400;
+}
+.keyboard-key--backspace:active,
+.keyboard-key--shift:active,
+.keyboard-key--tab:active,
+.keyboard-key--clear:active,
+.keyboard-key--close:active {
+  background-color: var(--keyboard-fn-key-active-bg);
+}
+.keyboard-key--shift.keyboard-key--active,
+.keyboard-key--done,
+.keyboard-key--enter {
+  background-color: var(--keyboard-primary-bg);
+  color: var(--keyboard-primary-color);
+}
+.keyboard-key--done:active,
+.keyboard-key--enter:active {
+  background-color: var(--keyboard-primary-active-bg);
+}
+.keyboard-key--space {
+  flex: 4;
+}
+.key-placeholder {
+  background-color: transparent;
+  box-shadow: none;
+  cursor: default;
+  pointer-events: none;
+}
+.numpad-row .keyboard-key {
+  height: var(--ld-px-56);
+  font-size: var(--ld-font-xl);
+}
+.key-num,
+.key-plate-province,
+.key-plate-letter,
+.key-plate-number {
+  background-color: var(--keyboard-key-bg);
+  color: var(--keyboard-key-color);
+}
+.key-numpad-fn,
+.key-plate-fn,
+.key-plate-switch {
+  background-color: var(--keyboard-fn-key-bg);
+  color: var(--keyboard-fn-key-color);
+  font-size: var(--keyboard-fn-font-size);
+}
+.key-numpad-done,
+.key-plate-done {
+  background-color: var(--keyboard-primary-bg);
+  color: var(--keyboard-primary-color);
+  font-size: var(--keyboard-fn-font-size);
+  box-shadow: none;
+}
+.key-numpad-done:active,
+.key-plate-done:active {
+  background-color: var(--keyboard-primary-active-bg);
+}
+.virtual-keyboard:has(.plate-keyboard-row) {
+  min-width: var(--ld-px-280);
+}
+.plate-keyboard-row {
+  display: flex;
+  flex-wrap: nowrap;
+  width: 100%;
+  gap: var(--ld-spacing-xs);
+}
+.plate-keyboard-row .keyboard-key {
+  flex: 1 1 0;
+  min-width: var(--ld-px-28);
+  height: var(--ld-px-42);
+  padding: 0 var(--ld-px-2);
+  font-size: var(--ld-font-sm);
+  border-radius: var(--ld-radius-sm);
+}
+.key-plate-fn {
+  flex: 1.2 1 0 !important;
+}
+.key-plate-done {
+  flex: 1.5 1 0 !important;
+}
+.key-plate-switch {
+  flex: 1.3 1 0 !important;
+}
+.key-plate-special {
+  background-color: var(--ld-warning-50);
+  color: var(--ld-warning-700);
+}
+.keyboard-popup {
+  position: fixed;
+  z-index: 1000;
+  overflow: hidden;
+  background-color: var(--keyboard-bg);
+}
+.keyboard-popup--desktop {
+  min-width: var(--ld-px-280);
+  border-radius: var(--ld-radius-lg);
+  box-shadow: var(--ld-shadow-lg, none);
+}
+.keyboard-popup--mobile {
+  right: 0;
+  bottom: 0;
+  left: 0;
+  border-radius: 0;
+  border-top-left-radius: var(--ld-radius-lg);
+  border-top-right-radius: var(--ld-radius-lg);
+  box-shadow: var(--ld-shadow-md, none);
+}
+.keyboard-mask {
+  position: fixed;
+  inset: 0;
+  z-index: 999;
+  background-color: var(--keyboard-mask-bg);
+}
+.keyboard-mask-enter-active,
+.keyboard-mask-leave-active {
+  transition: opacity var(--ld-duration-fast);
+}
+.keyboard-mask-enter-from,
+.keyboard-mask-leave-to {
+  opacity: 0;
+}
+.keyboard-fade-enter-active,
+.keyboard-fade-leave-active {
+  transition: opacity var(--ld-duration-fast), transform var(--ld-duration-fast);
+}
+.keyboard-fade-enter-from,
+.keyboard-fade-leave-to {
+  opacity: 0;
+  transform: translateY(calc(-1 * var(--ld-px-4))) scale(0.98);
+}
+.keyboard-slide-enter-active,
+.keyboard-slide-leave-active {
+  transition: transform var(--ld-duration-normal);
+}
+.keyboard-slide-enter-from,
+.keyboard-slide-leave-to {
+  transform: translateY(100%);
+}
+@media (max-width: 48em) {
   .virtual-keyboard {
-    padding: 6px 2px;
+    padding: var(--ld-spacing-xs);
   }
   .keyboard-key {
-    margin: 3px;
+    height: var(--ld-px-48);
   }
 }
-/* 横屏优化 */
-@media (orientation: landscape) and (max-height: 500px) {
-  :root {
-    --keyboard-key-height: 36px;
-    --keyboard-font-size: 14px;
-  }
-  .virtual-keyboard {
-    padding: 4px 2px;
+@media (orientation: landscape) and (max-height: 32em) {
+  .keyboard-key {
+    height: var(--ld-px-36);
+    font-size: var(--ld-font-base);
   }
 }
-/* 安全区域适配 */
 @supports (padding-bottom: env(safe-area-inset-bottom)) {
   .keyboard-popup--mobile {
-    padding-bottom: calc(8px + env(safe-area-inset-bottom));
+    padding-bottom: env(safe-area-inset-bottom);
   }
 }
-/* =========================
-   数字键盘专用样式
-   ========================= */
-.number-keyboard-row {
-  display: flex;
-  justify-content: center;
-  width: 100%;
-}
-.number-keyboard-row .keyboard-key {
-  flex: 1;
-  max-width: 25%;
-  height: 52px;
-  font-size: 22px;
-  font-weight: 500;
-}
-.number-keyboard-row .key-number {
-  background-color: var(--keyboard-key-bg, #fff);
-  color: var(--keyboard-key-color, #333);
+/**
+ * Keyboard theme tokens.
+ * Theme values intentionally reference the shared LDesign color and size runtime.
+ */
+[data-theme="miui"],
+.keyboard-theme-miui {
+  --keyboard-bg: var(--ld-bg-surface);
+  --keyboard-key-bg: var(--ld-bg-container);
+  --keyboard-key-color: var(--ld-text-primary);
+  --keyboard-key-active-bg: var(--ld-warning-50);
+  --keyboard-fn-key-bg: var(--ld-bg-elevated);
+  --keyboard-fn-key-color: var(--ld-text-secondary);
+  --keyboard-fn-key-active-bg: var(--ld-warning-100);
+  --keyboard-primary-bg: var(--ld-warning-500);
+  --keyboard-primary-active-bg: var(--ld-warning-600);
+  --keyboard-primary-color: var(--ld-text-inverse);
+  --keyboard-mask-bg: color-mix(in srgb, var(--ld-black) 40%, var(--ld-transparent));
+  --keyboard-key-border: var(--ld-border);
+  --keyboard-key-radius: var(--ld-radius-md);
+  --keyboard-key-gap: var(--ld-spacing-sm);
+  --keyboard-key-height: var(--ld-px-48);
+  --keyboard-font-size: var(--ld-font-lg);
+  --keyboard-fn-font-size: var(--ld-font-sm);
+  --keyboard-padding: var(--ld-spacing-sm);
+  --keyboard-key-shadow: var(--ld-shadow-sm, none);
 }
-.number-keyboard-row .key-side {
-  background-color: var(--keyboard-fn-key-bg, #d4d6dc);
-  color: var(--keyboard-fn-key-color, #333);
-  font-size: 14px;
+[data-theme="ios"],
+.keyboard-theme-ios {
+  --keyboard-bg: var(--ld-bg-surface);
+  --keyboard-key-bg: var(--ld-bg-container);
+  --keyboard-key-color: var(--ld-text-primary);
+  --keyboard-key-active-bg: var(--ld-primary-50);
+  --keyboard-fn-key-bg: var(--ld-bg-elevated);
+  --keyboard-fn-key-color: var(--ld-text-primary);
+  --keyboard-fn-key-active-bg: var(--ld-primary-100);
+  --keyboard-primary-bg: var(--ld-primary-500);
+  --keyboard-primary-active-bg: var(--ld-primary-600);
+  --keyboard-primary-color: var(--ld-text-inverse);
+  --keyboard-mask-bg: color-mix(in srgb, var(--ld-black) 40%, var(--ld-transparent));
+  --keyboard-key-border: var(--ld-border);
+  --keyboard-key-radius: var(--ld-radius-sm);
+  --keyboard-key-gap: var(--ld-spacing-sm);
+  --keyboard-key-height: var(--ld-px-42);
+  --keyboard-font-size: var(--ld-font-xl);
+  --keyboard-fn-font-size: var(--ld-font-base);
+  --keyboard-padding: var(--ld-spacing-xs);
+  --keyboard-key-shadow: var(--ld-shadow-sm, none);
 }
-.number-keyboard-row .key-side:active {
-  background-color: var(--keyboard-fn-key-active-bg, #b8bac0);
+[data-theme="material"],
+.keyboard-theme-material {
+  --keyboard-bg: var(--ld-bg-elevated);
+  --keyboard-key-bg: var(--ld-bg-container);
+  --keyboard-key-color: var(--ld-text-primary);
+  --keyboard-key-active-bg: var(--ld-success-50);
+  --keyboard-fn-key-bg: var(--ld-bg-surface);
+  --keyboard-fn-key-color: var(--ld-text-secondary);
+  --keyboard-fn-key-active-bg: var(--ld-success-100);
+  --keyboard-primary-bg: var(--ld-success-500);
+  --keyboard-primary-active-bg: var(--ld-success-600);
+  --keyboard-primary-color: var(--ld-text-inverse);
+  --keyboard-mask-bg: color-mix(in srgb, var(--ld-black) 40%, var(--ld-transparent));
+  --keyboard-key-border: var(--ld-border);
+  --keyboard-key-radius: var(--ld-radius-sm);
+  --keyboard-key-gap: var(--ld-spacing-xs);
+  --keyboard-key-height: var(--ld-px-48);
+  --keyboard-font-size: var(--ld-font-lg);
+  --keyboard-fn-font-size: var(--ld-font-sm);
+  --keyboard-padding: var(--ld-spacing-sm);
+  --keyboard-key-shadow: var(--ld-shadow-sm, none);
 }
-.number-keyboard-row .key-done {
-  background-color: var(--keyboard-primary-bg, #007aff);
-  color: #fff;
+[data-theme="minimal"],
+.keyboard-theme-minimal {
+  --keyboard-bg: var(--ld-bg-surface);
+  --keyboard-key-bg: var(--ld-bg-container);
+  --keyboard-key-color: var(--ld-text-primary);
+  --keyboard-key-active-bg: var(--ld-primary-50);
+  --keyboard-fn-key-bg: var(--ld-bg-surface);
+  --keyboard-fn-key-color: var(--ld-text-secondary);
+  --keyboard-fn-key-active-bg: var(--ld-primary-100);
+  --keyboard-primary-bg: var(--ld-text-primary);
+  --keyboard-primary-active-bg: var(--ld-text-secondary);
+  --keyboard-primary-color: var(--ld-bg-container);
+  --keyboard-key-border: var(--ld-border-subtle);
+  --keyboard-key-radius: var(--ld-radius-lg);
+  --keyboard-key-gap: var(--ld-spacing-sm);
+  --keyboard-key-height: var(--ld-px-48);
+  --keyboard-font-size: var(--ld-font-base);
+  --keyboard-fn-font-size: var(--ld-font-sm);
+  --keyboard-padding: var(--ld-spacing-md);
+  --keyboard-key-shadow: none;
 }
-.number-keyboard-row .key-done:active {
-  background-color: var(--keyboard-primary-active-bg, #0062cc);
+[data-theme="dark"],
+.keyboard-theme-dark {
+  --keyboard-bg: var(--ld-bg-surface);
+  --keyboard-key-bg: var(--ld-bg-elevated);
+  --keyboard-key-color: var(--ld-text-primary);
+  --keyboard-key-active-bg: var(--ld-primary-100);
+  --keyboard-fn-key-bg: var(--ld-bg-container);
+  --keyboard-fn-key-color: var(--ld-text-secondary);
+  --keyboard-fn-key-active-bg: var(--ld-primary-200);
+  --keyboard-primary-bg: var(--ld-primary-500);
+  --keyboard-primary-active-bg: var(--ld-primary-600);
+  --keyboard-primary-color: var(--ld-text-inverse);
+  --keyboard-mask-bg: color-mix(in srgb, var(--ld-black) 40%, var(--ld-transparent));
+  --keyboard-key-border: var(--ld-border);
+  --keyboard-key-radius: var(--ld-radius-md);
+  --keyboard-key-gap: var(--ld-spacing-sm);
+  --keyboard-key-height: var(--ld-px-48);
+  --keyboard-font-size: var(--ld-font-lg);
+  --keyboard-fn-font-size: var(--ld-font-sm);
+  --keyboard-padding: var(--ld-spacing-sm);
+  --keyboard-key-shadow: var(--ld-shadow-sm, none);
 }
-.number-keyboard-row .key-decimal,
-.number-keyboard-row .key-double-zero {
-  background-color: var(--keyboard-key-bg, #fff);
-  font-size: 18px;
+[data-theme="green"],
+.keyboard-theme-green {
+  --keyboard-primary-bg: var(--ld-success-500);
+  --keyboard-primary-active-bg: var(--ld-success-600);
 }
-.number-keyboard-row .key-placeholder {
-  background-color: transparent;
-  box-shadow: none;
-  cursor: default;
+[data-theme="blue"],
+.keyboard-theme-blue {
+  --keyboard-primary-bg: var(--ld-info-500);
+  --keyboard-primary-active-bg: var(--ld-info-600);
 }
-.number-keyboard-row .key-placeholder:active {
-  transform: none;
-  background-color: transparent;
+.keyboard-theme-light {
+  color-scheme: light;
 }
-/* =========================
-   PC端专用样式
-   ========================= */
-.keyboard-popup--desktop {
-  min-width: 320px;
-}
-.keyboard-popup--desktop .keyboard-key {
-  height: 40px;
-  font-size: 15px;
-  border-radius: 5px;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
-}
-.keyboard-popup--desktop .keyboard-key:hover {
-  background-color: var(--keyboard-key-active-bg, #e5e7eb);
-}
-.keyboard-popup--desktop .keyboard-key--backspace:hover,
-.keyboard-popup--desktop .keyboard-key--shift:hover,
-.keyboard-popup--desktop .keyboard-key--tab:hover,
-.keyboard-popup--desktop .keyboard-key--clear:hover,
-.keyboard-popup--desktop .keyboard-key--close:hover {
-  background-color: var(--keyboard-fn-key-active-bg, #b8bac0);
-}
-.keyboard-popup--desktop .keyboard-key--done:hover,
-.keyboard-popup--desktop .keyboard-key--enter:hover {
-  background-color: var(--keyboard-primary-active-bg, #0062cc);
-}
-/* PC端数字键盘 */
-.keyboard-popup--desktop .number-keyboard-row .keyboard-key {
-  height: 44px;
-  font-size: 18px;
-}
-.keyboard-popup--desktop .number-keyboard-row .key-side {
-  font-size: 13px;
-}
-/* =========================
-   移动端专用样式
-   ========================= */
-.keyboard-popup--mobile {
-  width: 100%;
+.keyboard-theme-dark {
+  color-scheme: dark;
 }
-.keyboard-popup--mobile .keyboard-key {
-  height: 46px;
-  font-size: 18px;
-  border-radius: 6px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
-/* 移动端数字键盘 */
-.keyboard-popup--mobile .number-keyboard-row .keyboard-key {
-  height: 54px;
-  font-size: 24px;
-  border-radius: 8px;
-}
-.keyboard-popup--mobile .number-keyboard-row .key-side {
-  font-size: 15px;
-}
-/* =========================
-   键盘顶部栅栏（移动端）
-   ========================= */
-.keyboard-toolbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 8px 16px;
-  background-color: var(--keyboard-bg, #d1d5db);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-}
-.keyboard-toolbar__title {
-  font-size: 14px;
-  color: var(--keyboard-fn-key-color, #666);
-}
-.keyboard-toolbar__done {
-  padding: 6px 16px;
-  background: none;
-  border: none;
-  color: var(--keyboard-primary-bg, #007aff);
-  font-size: 15px;
-  font-weight: 500;
-  cursor: pointer;
+.keyboard-popup,
+.virtual-keyboard {
+  transition: background-color var(--ld-duration-fast);
 }
-.keyboard-toolbar__done:active {
-  opacity: 0.7;
+.keyboard-key {
+  transition: background-color var(--ld-duration-fast), transform var(--ld-duration-fast);
 }
-/*# sourceMappingURL=src/styles/index.less.map */
+/*# sourceMappingURL=src\styles\index.less.map */
 
 /* styles/keyboard.less */
 /**
- * LDesign Keyboard - 核心样式
- * 简洁现代的默认主题
+ * LDesign Keyboard shared styles.
  */
-/* ====================
-   CSS 变量 - 简洁主题
-   ==================== */
 :root {
-  /* 键盘背景 */
-  --keyboard-bg: #f7f7f7;
-  /* 普通按键 */
-  --keyboard-key-bg: #ffffff;
-  --keyboard-key-color: #333333;
-  --keyboard-key-active-bg: #e5e5e5;
-  --keyboard-key-border: #e0e0e0;
-  /* 功能键 */
-  --keyboard-fn-bg: #e8e8e8;
-  --keyboard-fn-color: #666666;
-  --keyboard-fn-active-bg: #d8d8d8;
-  /* 主色调按键 */
-  --keyboard-primary-bg: #2563eb;
-  --keyboard-primary-active-bg: #1d4ed8;
-  --keyboard-primary-color: #ffffff;
-  /* 按键尺寸 */
-  --keyboard-key-height: 48px;
-  --keyboard-key-radius: 8px;
-  --keyboard-key-gap: 6px;
-  /* 字体 */
-  --keyboard-font-size: 20px;
-  --keyboard-fn-font-size: 14px;
-  /* 动画 */
-  --keyboard-transition: 80ms ease-out;
-}
-/* ====================
-   基础重置
-   ==================== */
+  --keyboard-bg: var(--ld-bg-surface);
+  --keyboard-key-bg: var(--ld-bg-container);
+  --keyboard-key-color: var(--ld-text-primary);
+  --keyboard-key-active-bg: var(--ld-primary-50);
+  --keyboard-key-border: var(--ld-border);
+  --keyboard-fn-key-bg: var(--ld-bg-elevated);
+  --keyboard-fn-key-color: var(--ld-text-secondary);
+  --keyboard-fn-key-active-bg: var(--ld-primary-100);
+  --keyboard-primary-bg: var(--ld-primary-500);
+  --keyboard-primary-active-bg: var(--ld-primary-600);
+  --keyboard-primary-color: var(--ld-text-inverse);
+  --keyboard-mask-bg: color-mix(in srgb, var(--ld-black) 40%, var(--ld-transparent));
+  --keyboard-key-height: var(--ld-px-48);
+  --keyboard-key-radius: var(--ld-radius-md);
+  --keyboard-key-gap: var(--ld-spacing-sm);
+  --keyboard-font-size: var(--ld-font-lg);
+  --keyboard-fn-font-size: var(--ld-font-sm);
+  --keyboard-padding: var(--ld-spacing-sm);
+  --keyboard-key-shadow: var(--ld-shadow-sm, none);
+}
 .virtual-keyboard,
 .virtual-keyboard *,
 .keyboard-popup,
@@ -279,7 +429,12 @@
   padding: 0;
 }
 .virtual-keyboard {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: var(--keyboard-padding);
+  background-color: var(--keyboard-bg);
+  font-family: var(--ld-font-family);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -webkit-touch-callout: none;
@@ -287,17 +442,8 @@
   -moz-user-select: none;
        user-select: none;
 }
-/* ====================
-   键盘容器
-   ==================== */
-.virtual-keyboard {
-  display: flex;
-  flex-direction: column;
-  padding: 8px;
-  background-color: var(--keyboard-bg);
-  width: 100%;
-}
-.virtual-keyboard__row {
+.virtual-keyboard__row,
+.numpad-row {
   display: flex;
   justify-content: center;
   width: 100%;
@@ -307,18 +453,15 @@
 .virtual-keyboard__row:last-child {
   margin-bottom: 0;
 }
-/* ====================
-   按键基础样式
-   ==================== */
 .keyboard-key {
   display: inline-flex;
+  flex: 1;
   align-items: center;
   justify-content: center;
-  flex: 1;
-  height: var(--keyboard-key-height);
   min-width: 0;
-  padding: 0 4px;
-  border: none;
+  height: var(--keyboard-key-height);
+  padding: 0 var(--ld-spacing-xs);
+  border: 0;
   border-radius: var(--keyboard-key-radius);
   background-color: var(--keyboard-key-bg);
   color: var(--keyboard-key-color);
@@ -326,9 +469,9 @@
   font-weight: 500;
   cursor: pointer;
   touch-action: manipulation;
-  transition: background-color var(--keyboard-transition), transform var(--keyboard-transition);
+  transition: background-color var(--ld-duration-fast), transform var(--ld-duration-fast);
   -webkit-tap-highlight-color: transparent;
-  box-shadow: 0 1px 0 var(--keyboard-key-border);
+  box-shadow: var(--keyboard-key-shadow);
 }
 .keyboard-key:active {
   background-color: var(--keyboard-key-active-bg);
@@ -339,192 +482,130 @@
   cursor: default;
   pointer-events: none;
 }
-/* ====================
-   功能键样式
-   ==================== */
 .keyboard-key--backspace,
 .keyboard-key--shift,
 .keyboard-key--tab,
 .keyboard-key--clear,
 .keyboard-key--close {
-  background-color: var(--keyboard-fn-bg);
-  color: var(--keyboard-fn-color);
+  background-color: var(--keyboard-fn-key-bg);
+  color: var(--keyboard-fn-key-color);
   font-size: var(--keyboard-fn-font-size);
   font-weight: 400;
-  box-shadow: 0 1px 0 var(--keyboard-key-border);
 }
 .keyboard-key--backspace:active,
 .keyboard-key--shift:active,
 .keyboard-key--tab:active,
 .keyboard-key--clear:active,
 .keyboard-key--close:active {
-  background-color: var(--keyboard-fn-active-bg);
-}
-/* Shift 激活状态 */
-.keyboard-key--shift.keyboard-key--active {
-  background-color: var(--keyboard-primary-bg);
-  color: var(--keyboard-primary-color);
+  background-color: var(--keyboard-fn-key-active-bg);
 }
-/* ====================
-   主色按键（完成/确认）
-   ==================== */
+.keyboard-key--shift.keyboard-key--active,
 .keyboard-key--done,
 .keyboard-key--enter {
   background-color: var(--keyboard-primary-bg);
   color: var(--keyboard-primary-color);
-  font-size: var(--keyboard-fn-font-size);
-  font-weight: 500;
-  box-shadow: none;
 }
 .keyboard-key--done:active,
 .keyboard-key--enter:active {
   background-color: var(--keyboard-primary-active-bg);
 }
-/* ====================
-   空格键
-   ==================== */
 .keyboard-key--space {
   flex: 4;
 }
-/* ====================
-   占位键（透明）
-   ==================== */
 .key-placeholder {
-  background-color: transparent !important;
-  box-shadow: none !important;
+  background-color: transparent;
+  box-shadow: none;
   cursor: default;
   pointer-events: none;
 }
-/* ====================
-   数字键盘通用样式
-   ==================== */
-.numpad-row {
-  display: flex;
-  gap: var(--keyboard-key-gap);
-  width: 100%;
-}
 .numpad-row .keyboard-key {
-  flex: 1;
-  height: 54px;
-  font-size: 24px;
-  font-weight: 500;
+  height: var(--ld-px-56);
+  font-size: var(--ld-font-xl);
 }
-/* 数字键 */
-.key-num {
+.key-num,
+.key-plate-province,
+.key-plate-letter,
+.key-plate-number {
   background-color: var(--keyboard-key-bg);
   color: var(--keyboard-key-color);
 }
-/* 功能键 */
-.key-numpad-fn {
-  background-color: var(--keyboard-fn-bg);
-  color: var(--keyboard-fn-color);
-  font-size: 14px;
-  font-weight: 400;
+.key-numpad-fn,
+.key-plate-fn,
+.key-plate-switch {
+  background-color: var(--keyboard-fn-key-bg);
+  color: var(--keyboard-fn-key-color);
+  font-size: var(--keyboard-fn-font-size);
 }
-/* 完成键 */
-.key-numpad-done {
+.key-numpad-done,
+.key-plate-done {
   background-color: var(--keyboard-primary-bg);
   color: var(--keyboard-primary-color);
-  font-size: 16px;
-  font-weight: 500;
+  font-size: var(--keyboard-fn-font-size);
   box-shadow: none;
 }
-.key-numpad-done:active {
+.key-numpad-done:active,
+.key-plate-done:active {
   background-color: var(--keyboard-primary-active-bg);
 }
-/* ====================
-   车牌键盘样式
-   ==================== */
 .virtual-keyboard:has(.plate-keyboard-row) {
-  min-width: 340px;
+  min-width: var(--ld-px-280);
 }
 .plate-keyboard-row {
   display: flex;
-  gap: 3px;
-  width: 100%;
   flex-wrap: nowrap;
+  width: 100%;
+  gap: var(--ld-spacing-xs);
 }
 .plate-keyboard-row .keyboard-key {
   flex: 1 1 0;
-  height: 42px;
-  min-width: 28px;
-  max-width: none;
-  padding: 0 2px;
-  font-size: 15px;
-  font-weight: 500;
-  border-radius: 5px;
-}
-.key-plate-province,
-.key-plate-letter,
-.key-plate-number {
-  background-color: var(--keyboard-key-bg);
+  min-width: var(--ld-px-28);
+  height: var(--ld-px-42);
+  padding: 0 var(--ld-px-2);
+  font-size: var(--ld-font-sm);
+  border-radius: var(--ld-radius-sm);
 }
 .key-plate-fn {
-  background-color: var(--keyboard-fn-bg);
-  font-size: 12px;
   flex: 1.2 1 0 !important;
 }
 .key-plate-done {
-  background-color: var(--keyboard-primary-bg);
-  color: var(--keyboard-primary-color);
-  font-size: 13px;
-  box-shadow: none;
   flex: 1.5 1 0 !important;
 }
 .key-plate-switch {
-  background-color: var(--keyboard-fn-bg);
-  font-size: 12px;
   flex: 1.3 1 0 !important;
 }
 .key-plate-special {
-  background-color: #fef3c7;
-  color: #92400e;
+  background-color: var(--ld-warning-50);
+  color: var(--ld-warning-700);
 }
-/* ====================
-   弹出层样式
-   ==================== */
 .keyboard-popup {
   position: fixed;
   z-index: 1000;
-  background-color: var(--keyboard-bg);
   overflow: hidden;
+  background-color: var(--keyboard-bg);
 }
 .keyboard-popup--desktop {
-  border-radius: 12px;
-  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05);
-  min-width: 300px;
+  min-width: var(--ld-px-280);
+  border-radius: var(--ld-radius-lg);
+  box-shadow: var(--ld-shadow-lg, none);
 }
 .keyboard-popup--mobile {
-  position: fixed;
-  left: 0;
   right: 0;
   bottom: 0;
+  left: 0;
   border-radius: 0;
-  border-top-left-radius: 12px;
-  border-top-right-radius: 12px;
-  box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.08);
+  border-top-left-radius: var(--ld-radius-lg);
+  border-top-right-radius: var(--ld-radius-lg);
+  box-shadow: var(--ld-shadow-md, none);
 }
-/* 安全区域 */
-@supports (padding-bottom: env(safe-area-inset-bottom)) {
-  .keyboard-popup--mobile {
-    padding-bottom: env(safe-area-inset-bottom);
-  }
-}
-/* ====================
-   遮罩层
-   ==================== */
 .keyboard-mask {
   position: fixed;
   inset: 0;
-  background-color: rgba(0, 0, 0, 0.3);
   z-index: 999;
+  background-color: var(--keyboard-mask-bg);
 }
-/* ====================
-   动画
-   ==================== */
 .keyboard-mask-enter-active,
 .keyboard-mask-leave-active {
-  transition: opacity 0.2s ease;
+  transition: opacity var(--ld-duration-fast);
 }
 .keyboard-mask-enter-from,
 .keyboard-mask-leave-to {
@@ -532,266 +613,177 @@
 }
 .keyboard-fade-enter-active,
 .keyboard-fade-leave-active {
-  transition: opacity 0.15s ease, transform 0.15s ease;
+  transition: opacity var(--ld-duration-fast), transform var(--ld-duration-fast);
 }
 .keyboard-fade-enter-from,
 .keyboard-fade-leave-to {
   opacity: 0;
-  transform: translateY(-4px) scale(0.98);
+  transform: translateY(calc(-1 * var(--ld-px-4))) scale(0.98);
 }
 .keyboard-slide-enter-active,
 .keyboard-slide-leave-active {
-  transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
+  transition: transform var(--ld-duration-normal);
 }
 .keyboard-slide-enter-from,
 .keyboard-slide-leave-to {
   transform: translateY(100%);
 }
-/* ====================
-   移动端适配
-   ==================== */
-@media (max-width: 768px) {
+@media (max-width: 48em) {
   .virtual-keyboard {
-    padding: 6px;
+    padding: var(--ld-spacing-xs);
   }
   .keyboard-key {
-    height: 44px;
-  }
-  .numpad-row .keyboard-key {
-    height: 52px;
-    font-size: 22px;
-  }
-  .plate-keyboard-row .keyboard-key {
-    height: 40px;
-    font-size: 15px;
+    height: var(--ld-px-48);
   }
 }
-/* ====================
-   横屏适配
-   ==================== */
-@media (orientation: landscape) and (max-height: 500px) {
+@media (orientation: landscape) and (max-height: 32em) {
   .keyboard-key {
-    height: 36px;
-    font-size: 16px;
+    height: var(--ld-px-36);
+    font-size: var(--ld-font-base);
   }
-  .numpad-row .keyboard-key {
-    height: 42px;
-    font-size: 18px;
+}
+@supports (padding-bottom: env(safe-area-inset-bottom)) {
+  .keyboard-popup--mobile {
+    padding-bottom: env(safe-area-inset-bottom);
   }
 }
-/*# sourceMappingURL=src/styles/keyboard.less.map */
+/*# sourceMappingURL=src\styles\keyboard.less.map */
 
 /* styles/themes.less */
 /**
- * LDesign Keyboard - 主题预设
- * 简洁 · 现代 · 优雅
+ * Keyboard theme tokens.
+ * Theme values intentionally reference the shared LDesign color and size runtime.
  */
-/* ====================
-   MIUI 主题 - 小米风格（默认）
-   ==================== */
 [data-theme="miui"],
 .keyboard-theme-miui {
-  --keyboard-bg: #f5f5f5;
-  --keyboard-key-bg: #ffffff;
-  --keyboard-key-color: #1a1a1a;
-  --keyboard-key-active-bg: #e8e8e8;
-  --keyboard-fn-key-bg: #e0e0e0;
-  --keyboard-fn-key-color: #666666;
-  --keyboard-fn-key-active-bg: #d0d0d0;
-  --keyboard-primary-bg: #ff6700;
-  --keyboard-primary-active-bg: #e55d00;
-  --keyboard-primary-color: #ffffff;
-  --keyboard-key-radius: 8px;
-  --keyboard-key-gap: 6px;
-  --keyboard-key-height: 46px;
-  --keyboard-font-size: 18px;
-  --keyboard-fn-font-size: 14px;
-  --keyboard-padding: 8px;
-  --keyboard-key-shadow: none;
-}
-[data-theme="miui"] .keyboard-key,
-.keyboard-theme-miui .keyboard-key {
-  font-weight: 500;
+  --keyboard-bg: var(--ld-bg-surface);
+  --keyboard-key-bg: var(--ld-bg-container);
+  --keyboard-key-color: var(--ld-text-primary);
+  --keyboard-key-active-bg: var(--ld-warning-50);
+  --keyboard-fn-key-bg: var(--ld-bg-elevated);
+  --keyboard-fn-key-color: var(--ld-text-secondary);
+  --keyboard-fn-key-active-bg: var(--ld-warning-100);
+  --keyboard-primary-bg: var(--ld-warning-500);
+  --keyboard-primary-active-bg: var(--ld-warning-600);
+  --keyboard-primary-color: var(--ld-text-inverse);
+  --keyboard-mask-bg: color-mix(in srgb, var(--ld-black) 40%, var(--ld-transparent));
+  --keyboard-key-border: var(--ld-border);
+  --keyboard-key-radius: var(--ld-radius-md);
+  --keyboard-key-gap: var(--ld-spacing-sm);
+  --keyboard-key-height: var(--ld-px-48);
+  --keyboard-font-size: var(--ld-font-lg);
+  --keyboard-fn-font-size: var(--ld-font-sm);
+  --keyboard-padding: var(--ld-spacing-sm);
+  --keyboard-key-shadow: var(--ld-shadow-sm, none);
 }
-/* ====================
-   iOS 主题 - 苹果风格
-   ==================== */
 [data-theme="ios"],
 .keyboard-theme-ios {
-  --keyboard-bg: #d1d3d9;
-  --keyboard-key-bg: #ffffff;
-  --keyboard-key-color: #000000;
-  --keyboard-key-active-bg: #c8cad0;
-  --keyboard-key-border: #a8aab4;
-  --keyboard-fn-key-bg: #adb0b8;
-  --keyboard-fn-key-color: #000000;
-  --keyboard-fn-key-active-bg: #9ea1a9;
-  --keyboard-primary-bg: #007aff;
-  --keyboard-primary-active-bg: #0066d6;
-  --keyboard-primary-color: #ffffff;
-  --keyboard-key-radius: 5px;
-  --keyboard-key-gap: 6px;
-  --keyboard-key-height: 43px;
-  --keyboard-font-size: 23px;
-  --keyboard-fn-font-size: 15px;
-  --keyboard-padding: 4px;
-  --keyboard-key-shadow: 0 1px 0 #a8aab4;
-}
-[data-theme="ios"] .keyboard-key,
-.keyboard-theme-ios .keyboard-key {
-  font-weight: 400;
+  --keyboard-bg: var(--ld-bg-surface);
+  --keyboard-key-bg: var(--ld-bg-container);
+  --keyboard-key-color: var(--ld-text-primary);
+  --keyboard-key-active-bg: var(--ld-primary-50);
+  --keyboard-fn-key-bg: var(--ld-bg-elevated);
+  --keyboard-fn-key-color: var(--ld-text-primary);
+  --keyboard-fn-key-active-bg: var(--ld-primary-100);
+  --keyboard-primary-bg: var(--ld-primary-500);
+  --keyboard-primary-active-bg: var(--ld-primary-600);
+  --keyboard-primary-color: var(--ld-text-inverse);
+  --keyboard-mask-bg: color-mix(in srgb, var(--ld-black) 40%, var(--ld-transparent));
+  --keyboard-key-border: var(--ld-border);
+  --keyboard-key-radius: var(--ld-radius-sm);
+  --keyboard-key-gap: var(--ld-spacing-sm);
+  --keyboard-key-height: var(--ld-px-42);
+  --keyboard-font-size: var(--ld-font-xl);
+  --keyboard-fn-font-size: var(--ld-font-base);
+  --keyboard-padding: var(--ld-spacing-xs);
+  --keyboard-key-shadow: var(--ld-shadow-sm, none);
 }
-[data-theme="ios"] .keyboard-key:active,
-.keyboard-theme-ios .keyboard-key:active {
-  transform: none;
-}
-/* ====================
-   Material 主题 - 质感设计
-   ==================== */
 [data-theme="material"],
 .keyboard-theme-material {
-  --keyboard-bg: #263238;
-  --keyboard-key-bg: #37474f;
-  --keyboard-key-color: #ffffff;
-  --keyboard-key-active-bg: #455a64;
-  --keyboard-fn-key-bg: #455a64;
-  --keyboard-fn-key-color: #b0bec5;
-  --keyboard-fn-key-active-bg: #546e7a;
-  --keyboard-primary-bg: #4caf50;
-  --keyboard-primary-active-bg: #43a047;
-  --keyboard-primary-color: #ffffff;
-  --keyboard-key-radius: 4px;
-  --keyboard-key-gap: 4px;
-  --keyboard-key-height: 48px;
-  --keyboard-font-size: 20px;
-  --keyboard-fn-font-size: 14px;
-  --keyboard-padding: 6px;
-  --keyboard-key-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-}
-[data-theme="material"] .keyboard-key,
-.keyboard-theme-material .keyboard-key {
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
-}
-[data-theme="material"] .keyboard-key:active,
-.keyboard-theme-material .keyboard-key:active {
-  transform: none;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-}
-/* ====================
-   Minimal 极简主题 - 无边框
-   ==================== */
+  --keyboard-bg: var(--ld-bg-elevated);
+  --keyboard-key-bg: var(--ld-bg-container);
+  --keyboard-key-color: var(--ld-text-primary);
+  --keyboard-key-active-bg: var(--ld-success-50);
+  --keyboard-fn-key-bg: var(--ld-bg-surface);
+  --keyboard-fn-key-color: var(--ld-text-secondary);
+  --keyboard-fn-key-active-bg: var(--ld-success-100);
+  --keyboard-primary-bg: var(--ld-success-500);
+  --keyboard-primary-active-bg: var(--ld-success-600);
+  --keyboard-primary-color: var(--ld-text-inverse);
+  --keyboard-mask-bg: color-mix(in srgb, var(--ld-black) 40%, var(--ld-transparent));
+  --keyboard-key-border: var(--ld-border);
+  --keyboard-key-radius: var(--ld-radius-sm);
+  --keyboard-key-gap: var(--ld-spacing-xs);
+  --keyboard-key-height: var(--ld-px-48);
+  --keyboard-font-size: var(--ld-font-lg);
+  --keyboard-fn-font-size: var(--ld-font-sm);
+  --keyboard-padding: var(--ld-spacing-sm);
+  --keyboard-key-shadow: var(--ld-shadow-sm, none);
+}
 [data-theme="minimal"],
 .keyboard-theme-minimal {
-  --keyboard-bg: rgba(250, 250, 250, 0.95);
-  --keyboard-key-bg: transparent;
-  --keyboard-key-color: #333333;
-  --keyboard-key-active-bg: rgba(0, 0, 0, 0.08);
-  --keyboard-fn-key-bg: transparent;
-  --keyboard-fn-key-color: #888888;
-  --keyboard-fn-key-active-bg: rgba(0, 0, 0, 0.08);
-  --keyboard-primary-bg: #333333;
-  --keyboard-primary-active-bg: #1a1a1a;
-  --keyboard-primary-color: #ffffff;
-  --keyboard-key-radius: 12px;
-  --keyboard-key-gap: 8px;
-  --keyboard-key-height: 44px;
-  --keyboard-font-size: 17px;
-  --keyboard-fn-font-size: 13px;
-  --keyboard-padding: 12px;
+  --keyboard-bg: var(--ld-bg-surface);
+  --keyboard-key-bg: var(--ld-bg-container);
+  --keyboard-key-color: var(--ld-text-primary);
+  --keyboard-key-active-bg: var(--ld-primary-50);
+  --keyboard-fn-key-bg: var(--ld-bg-surface);
+  --keyboard-fn-key-color: var(--ld-text-secondary);
+  --keyboard-fn-key-active-bg: var(--ld-primary-100);
+  --keyboard-primary-bg: var(--ld-text-primary);
+  --keyboard-primary-active-bg: var(--ld-text-secondary);
+  --keyboard-primary-color: var(--ld-bg-container);
+  --keyboard-key-border: var(--ld-border-subtle);
+  --keyboard-key-radius: var(--ld-radius-lg);
+  --keyboard-key-gap: var(--ld-spacing-sm);
+  --keyboard-key-height: var(--ld-px-48);
+  --keyboard-font-size: var(--ld-font-base);
+  --keyboard-fn-font-size: var(--ld-font-sm);
+  --keyboard-padding: var(--ld-spacing-md);
   --keyboard-key-shadow: none;
 }
-[data-theme="minimal"] .keyboard-key,
-.keyboard-theme-minimal .keyboard-key {
-  box-shadow: none;
-}
-[data-theme="minimal"] .keyboard-key:active,
-.keyboard-theme-minimal .keyboard-key:active {
-  transform: scale(0.95);
-}
-/* ====================
-   Dark 深色主题
-   ==================== */
 [data-theme="dark"],
 .keyboard-theme-dark {
-  --keyboard-bg: #1c1c1e;
-  --keyboard-key-bg: #3a3a3c;
-  --keyboard-key-color: #ffffff;
-  --keyboard-key-active-bg: #4a4a4c;
-  --keyboard-fn-key-bg: #2c2c2e;
-  --keyboard-fn-key-color: #ebebf5;
-  --keyboard-fn-key-active-bg: #3c3c3e;
-  --keyboard-primary-bg: #0a84ff;
-  --keyboard-primary-active-bg: #0070e0;
-  --keyboard-primary-color: #ffffff;
-  --keyboard-key-radius: 8px;
-  --keyboard-key-gap: 6px;
-  --keyboard-key-height: 45px;
-  --keyboard-font-size: 18px;
-  --keyboard-fn-font-size: 14px;
-  --keyboard-padding: 8px;
-  --keyboard-key-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
-}
-[data-theme="dark"] .keyboard-key,
-.keyboard-theme-dark .keyboard-key {
-  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
-}
-/* 深色车牌键盘特殊样式 */
-[data-theme="dark"] .key-plate-special,
-.keyboard-theme-dark .key-plate-special {
-  background-color: #4a3728;
-  color: #fcd34d;
-}
-/* ====================
-   Green 护眼主题
-   ==================== */
+  --keyboard-bg: var(--ld-bg-surface);
+  --keyboard-key-bg: var(--ld-bg-elevated);
+  --keyboard-key-color: var(--ld-text-primary);
+  --keyboard-key-active-bg: var(--ld-primary-100);
+  --keyboard-fn-key-bg: var(--ld-bg-container);
+  --keyboard-fn-key-color: var(--ld-text-secondary);
+  --keyboard-fn-key-active-bg: var(--ld-primary-200);
+  --keyboard-primary-bg: var(--ld-primary-500);
+  --keyboard-primary-active-bg: var(--ld-primary-600);
+  --keyboard-primary-color: var(--ld-text-inverse);
+  --keyboard-mask-bg: color-mix(in srgb, var(--ld-black) 40%, var(--ld-transparent));
+  --keyboard-key-border: var(--ld-border);
+  --keyboard-key-radius: var(--ld-radius-md);
+  --keyboard-key-gap: var(--ld-spacing-sm);
+  --keyboard-key-height: var(--ld-px-48);
+  --keyboard-font-size: var(--ld-font-lg);
+  --keyboard-fn-font-size: var(--ld-font-sm);
+  --keyboard-padding: var(--ld-spacing-sm);
+  --keyboard-key-shadow: var(--ld-shadow-sm, none);
+}
 [data-theme="green"],
 .keyboard-theme-green {
-  --keyboard-bg: #e8f5e9;
-  --keyboard-key-bg: #ffffff;
-  --keyboard-key-color: #2e7d32;
-  --keyboard-key-active-bg: #c8e6c9;
-  --keyboard-key-border: #a5d6a7;
-  --keyboard-fn-bg: #c8e6c9;
-  --keyboard-fn-color: #388e3c;
-  --keyboard-fn-active-bg: #a5d6a7;
-  --keyboard-primary-bg: #43a047;
-  --keyboard-primary-active-bg: #388e3c;
-  --keyboard-primary-color: #ffffff;
-  --keyboard-key-radius: 8px;
-}
-/* ====================
-   Blue 蓝色主题
-   ==================== */
+  --keyboard-primary-bg: var(--ld-success-500);
+  --keyboard-primary-active-bg: var(--ld-success-600);
+}
 [data-theme="blue"],
 .keyboard-theme-blue {
-  --keyboard-bg: #e3f2fd;
-  --keyboard-key-bg: #ffffff;
-  --keyboard-key-color: #1565c0;
-  --keyboard-key-active-bg: #bbdefb;
-  --keyboard-key-border: #90caf9;
-  --keyboard-fn-bg: #bbdefb;
-  --keyboard-fn-color: #1976d2;
-  --keyboard-fn-active-bg: #90caf9;
-  --keyboard-primary-bg: #1976d2;
-  --keyboard-primary-active-bg: #1565c0;
-  --keyboard-primary-color: #ffffff;
-  --keyboard-key-radius: 8px;
-}
-/* ====================
-   主题工具类
-   ==================== */
+  --keyboard-primary-bg: var(--ld-info-500);
+  --keyboard-primary-active-bg: var(--ld-info-600);
+}
 .keyboard-theme-light {
   color-scheme: light;
 }
 .keyboard-theme-dark {
   color-scheme: dark;
 }
-/* 平滑主题切换 */
 .keyboard-popup,
 .virtual-keyboard {
-  transition: background-color 0.2s ease;
+  transition: background-color var(--ld-duration-fast);
 }
 .keyboard-key {
-  transition: background-color var(--keyboard-transition) ease, transform var(--keyboard-transition) ease;
+  transition: background-color var(--ld-duration-fast), transform var(--ld-duration-fast);
 }
-/*# sourceMappingURL=src/styles/themes.less.map */
+/*# sourceMappingURL=src\styles\themes.less.map */