增加ActionIcon基础样式的支持。

src/component.css

@@ -1,7 +1,5 @@
 @layer base {
-  a,
+  :where(a, a:hover, a:visited) {
-  a:hover,
-  a:visited {
     text-decoration: none;
     color: var(--color-typo-dark);
   }
@@ -26,16 +24,17 @@
     padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
     font-size: var(--font-size-s);
     line-height: 1.5em;
-    color: var(--color-typo-dark);
+    color: var(--color-fg);
     background-color: var(--button-neutral-bg);
-    &:hover {
+    &:hover:not([disabled]) {
       background-color: oklch(from var(--button-neutral-bg) calc(l + (1 - l) * 0.2) c h);
     }
-    &:active {
+    &:active:not([disabled]) {
       background-color: oklch(from var(--button-neutral-bg) calc(l * 0.9) c h);
     }
     &[disabled] {
-      color: var(--color-typo-dark-darkness);
+      cursor: not-allowed;
+      color: oklch(from var(--color-fg) calc(l * 0.5) calc(c * 0.3) h);
       background-color: oklch(from var(--button-neutral-bg) calc(l * 0.8) calc(c * 0.1) h);
     }
     &.small {
@@ -48,75 +47,103 @@
       font-size: var(--font-size-l);
     }
     &.primary {
-      color: var(--color-typo-dark-lightness);
+      color: var(--color-fg);
       background-color: var(--color-primary);
-      &:hover {
+      &:hover:not([disabled]) {
         background-color: var(--color-primary-hover);
       }
-      &:active {
+      &:active:not([disabled]) {
         background-color: var(--color-primary-active);
       }
       &[disabled] {
-        color: var(--color-typo-dark-darkness);
+        color: oklch(from var(--color-fg) calc(l * 0.5) calc(c * 0.3) h);
         background-color: var(--color-primary-disabled);
       }
     }
     &.secondary {
-      color: var(--color-typo-dark-lightness);
+      color: var(--color-fg);
       background-color: var(--color-secondary);
-      &:hover {
+      &:hover:not([disabled]) {
         background-color: var(--color-secondary-hover);
       }
-      &:active {
+      &:active:not([disabled]) {
         background-color: var(--color-secondary-active);
       }
       &[disabled] {
-        color: var(--color-typo-dark-darkness);
+        color: oklch(from var(--color-fg) calc(l * 0.5) calc(c * 0.3) h);
         background-color: var(--color-secondary-disabled);
       }
     }
     &.accent {
-      color: var(--color-typo-dark-lightness);
+      color: var(--color-fg);
       background-color: var(--color-accent);
-      &:hover {
+      &:hover:not([disabled]) {
         background-color: var(--color-accent-hover);
       }
-      &:active {
+      &:active:not([disabled]) {
         background-color: var(--color-accent-active);
       }
       &[disabled] {
-        color: var(--color-typo-dark-darkness);
+        color: oklch(from var(--color-fg) calc(l * 0.5) calc(c * 0.3) h);
         background-color: var(--color-accent-disabled);
       }
     }
     &.danger {
-      color: var(--color-typo-dark-lightness);
+      color: var(--color-fg);
       background-color: var(--color-danger);
-      &:hover {
+      &:hover:not([disabled]) {
         background-color: var(--color-danger-hover);
       }
-      &:active {
+      &:active:not([disabled]) {
         background-color: var(--color-danger-active);
       }
       &[disabled] {
-        color: var(--color-typo-dark-darkness);
+        color: oklch(from var(--color-fg) calc(l * 0.5) calc(c * 0.3) h);
         background-color: var(--color-danger-disabled);
       }
     }
     &.warn {
-      color: var(--color-typo-dark-lightness);
+      color: var(--color-fg);
       background-color: var(--color-warn);
-      &:hover {
+      &:hover:not([disabled]) {
         background-color: var(--color-warn-hover);
       }
-      &:active {
+      &:active:not([disabled]) {
         background-color: var(--color-warn-active);
       }
       &[disabled] {
-        color: var(--color-typo-dark-darkness);
+        color: oklch(from var(--color-fg) calc(l * 0.5) calc(c * 0.3) h);
         background-color: var(--color-warn-disabled);
       }
     }
+    &.success {
+      color: var(--color-fg);
+      background-color: var(--color-success);
+      &:hover:not([disabled]) {
+        background-color: var(--color-success-hover);
+      }
+      &:active:not([disabled]) {
+        background-color: var(--color-success-active);
+      }
+      &[disabled] {
+        color: oklch(from var(--color-fg) calc(l * 0.5) calc(c * 0.3) h);
+        background-color: var(--color-success-disabled);
+      }
+    }
+    &.info {
+      color: var(--color-fg);
+      background-color: var(--color-info);
+      &:hover:not([disabled]) {
+        background-color: var(--color-info-hover);
+      }
+      &:active:not([disabled]) {
+        background-color: var(--color-info-active);
+      }
+      &[disabled] {
+        color: oklch(from var(--color-fg) calc(l * 0.5) calc(c * 0.3) h);
+        background-color: var(--color-info-disabled);
+      }
+    }
   }
 
   /* 输入框以及输入框组合体默认样式 */
@@ -151,4 +178,150 @@
     padding: calc(var(--spacing) * 2);
     background-color: oklch(from var(--color-bg) calc(l * 0.8) c h);
   }
+
+  /* 仅展示一个图标的ActionIcon */
+  :where(.action_icon) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: calc(var(--spacing) * 2);
+    border-radius: var(--border-radius-xxs);
+    background-color: transparent;
+    cursor: pointer;
+    svg {
+      width: 1em;
+      height: 1em;
+      color: var(--color-neutral);
+    }
+    &:hover:not([disabled]) {
+      background-color: var(--color-neutral-hover);
+      svg {
+        color: var(--color-fg);
+      }
+    }
+    &:active:not([disabled]) {
+      background-color: var(--color-neutral-active);
+      svg {
+        color: var(--color-fg);
+      }
+    }
+    &[disabled] {
+      cursor: not-allowed;
+      svg {
+        color: var(--color-neutral-disabled);
+      }
+    }
+    &.primary {
+      svg {
+        color: var(--color-primary);
+      }
+      &:hover:not([disabled]) {
+        background-color: var(--color-primary-hover);
+      }
+      &:active:not([disabled]) {
+        background-color: var(--color-primary-active);
+      }
+      &[disabled] {
+        svg {
+          color: var(--color-primary-disabled);
+        }
+      }
+    }
+    &.secondary {
+      svg {
+        color: var(--color-secondary);
+      }
+      &:hover:not([disabled]) {
+        background-color: var(--color-secondary-hover);
+      }
+      &:active:not([disabled]) {
+        background-color: var(--color-secondary-active);
+      }
+      &[disabled] {
+        svg {
+          color: var(--color-secondary-disabled);
+        }
+      }
+    }
+    &.accent {
+      svg {
+        color: var(--color-accent);
+      }
+      &:hover:not([disabled]) {
+        background-color: var(--color-accent-hover);
+      }
+      &:active:not([disabled]) {
+        background-color: var(--color-accent-active);
+      }
+      &[disabled] {
+        svg {
+          color: var(--color-accent-disabled);
+        }
+      }
+    }
+    &.danger {
+      svg {
+        color: var(--color-danger);
+      }
+      &:hover:not([disabled]) {
+        background-color: var(--color-danger-hover);
+      }
+      &:active:not([disabled]) {
+        background-color: var(--color-danger-active);
+      }
+      &[disabled] {
+        svg {
+          color: var(--color-danger-disabled);
+        }
+      }
+    }
+    &.warn {
+      svg {
+        color: var(--color-warn);
+      }
+      &:hover:not([disabled]) {
+        background-color: var(--color-warn-hover);
+      }
+      &:active:not([disabled]) {
+        background-color: var(--color-warn-active);
+      }
+      &[disabled] {
+        svg {
+          color: var(--color-warn-disabled);
+        }
+      }
+    }
+    &.success {
+      svg {
+        color: var(--color-success);
+      }
+      &:hover:not([disabled]) {
+        background-color: var(--color-success-hover);
+      }
+      &:active:not([disabled]) {
+        background-color: var(--color-success-active);
+      }
+      &[disabled] {
+        svg {
+          color: var(--color-success-disabled);
+        }
+      }
+    }
+    &.info {
+      svg {
+        color: var(--color-info);
+      }
+      &:hover:not([disabled]) {
+        background-color: var(--color-info-hover);
+      }
+      &:active:not([disabled]) {
+        background-color: var(--color-info-active);
+      }
+      &[disabled] {
+        svg {
+          color: var(--color-info-disabled);
+        }
+      }
+    }
+  }
 }