advance-semi-theme 1.0.0

package/dist/antd/styles/components/button.css

@@ -0,0 +1,528 @@
+/**
+ * Button 按钮 - Semi Design 风格
+ * 
+ * 无感映射：使用 Ant Design Vue 原生 API，自动获得 Semi Design 风格
+ * 
+ * ┌────────────────────────────────┬──────────────────────────────────────┐
+ * │ Ant Design Vue API             │ Semi Design 风格                      │
+ * ├────────────────────────────────┼──────────────────────────────────────┤
+ * │ type="primary"                 │ Primary Solid (蓝色实心)              │
+ * │ 默认 / type="default"          │ Tertiary Light (灰色填充)             │
+ * │ type="dashed"                  │ Outline (边框)                        │
+ * │ type="text"                    │ Borderless (无边框)                   │
+ * │ type="link"                    │ 链接样式                              │
+ * │ ghost                          │ Outline (透明 + 彩色边框)             │
+ * │ danger                         │ Danger Light (浅红填充)               │
+ * │ type="primary" danger          │ Danger Solid (红色实心)               │
+ * └────────────────────────────────┴──────────────────────────────────────┘
+ * 
+ * 扩展能力（可选）：通过 data-theme 和 data-type 属性实现 Semi 完整的按钮系统
+ * 
+ * <a-button data-theme="light" data-type="primary">Primary Light</a-button>
+ * <a-button data-theme="outline" data-type="warning">Warning Outline</a-button>
+ */
+
+/* ========== 选择器说明 ==========
+ * .semi:where([data-semi="all"], [data-semi-button]) 表示：
+ * - 全局模式：data-semi="all" 时生效
+ * - 组件模式：data-semi-button 属性存在时生效
+ */
+
+/* ========== 基础样式 ========== */
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  transition: all var(--semi-transition-duration) var(--semi-transition-timing);
+  box-shadow: none;
+  font-weight: 600;
+  border-radius: var(--semi-border-radius-small);
+  font-size: var(--semi-font-size-regular);
+  line-height: 20px;
+  padding: 6px 12px;
+  height: 32px;
+}
+
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn-lg {
+  height: 40px;
+  padding: 10px 16px;
+  font-size: var(--semi-font-size-regular);
+  border-radius: var(--semi-border-radius-small);
+}
+
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn-sm {
+  height: 24px;
+  padding: 2px 12px;
+  font-size: var(--semi-font-size-small);
+  border-radius: var(--semi-border-radius-small);
+}
+
+/* ========== type="primary" → Primary Solid ========== */
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn-primary:not(:disabled):not(.ant-btn-dangerous):not(.ant-btn-background-ghost) {
+  background: var(--semi-color-primary);
+  border-color: var(--semi-color-primary);
+  color: #fff;
+}
+
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn-primary:not(:disabled):not(.ant-btn-dangerous):not(.ant-btn-background-ghost):hover {
+  background: var(--semi-color-primary-hover);
+  border-color: var(--semi-color-primary-hover);
+  color: #fff;
+}
+
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn-primary:not(:disabled):not(.ant-btn-dangerous):not(.ant-btn-background-ghost):active {
+  background: var(--semi-color-primary-active);
+  border-color: var(--semi-color-primary-active);
+  transform: scale(0.98);
+}
+
+/* ========== 默认按钮 → Tertiary Light (灰色填充) ========== */
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn-default:not(:disabled):not(.ant-btn-dangerous):not(.ant-btn-background-ghost) {
+  background: var(--semi-color-fill-0);
+  border-color: transparent;
+  color: var(--semi-color-text-0);
+}
+
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn-default:not(:disabled):not(.ant-btn-dangerous):not(.ant-btn-background-ghost):hover {
+  background: var(--semi-color-fill-1);
+  border-color: transparent;
+  color: var(--semi-color-text-0);
+}
+
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn-default:not(:disabled):not(.ant-btn-dangerous):not(.ant-btn-background-ghost):active {
+  background: var(--semi-color-fill-2);
+  border-color: transparent;
+  transform: scale(0.98);
+}
+
+/* ========== type="dashed" → Outline ========== */
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn-dashed:not(:disabled):not(.ant-btn-dangerous) {
+  background: transparent;
+  border-color: var(--semi-color-border);
+  border-style: solid;
+  color: var(--semi-color-text-0);
+}
+
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn-dashed:not(:disabled):not(.ant-btn-dangerous):hover {
+  background: var(--semi-color-fill-0);
+  border-color: var(--semi-color-border-hover);
+  color: var(--semi-color-text-0);
+}
+
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn-dashed:not(:disabled):not(.ant-btn-dangerous):active {
+  background: var(--semi-color-fill-1);
+  transform: scale(0.98);
+}
+
+/* ========== type="text" → Borderless ========== */
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn-text:not(:disabled):not(.ant-btn-dangerous) {
+  background: transparent;
+  border-color: transparent;
+  color: var(--semi-color-text-0);
+}
+
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn-text:not(:disabled):not(.ant-btn-dangerous):hover {
+  background: var(--semi-color-fill-0);
+  color: var(--semi-color-text-0);
+}
+
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn-text:not(:disabled):not(.ant-btn-dangerous):active {
+  background: var(--semi-color-fill-1);
+  transform: scale(0.98);
+}
+
+/* ========== type="link" → 链接样式 ========== */
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn-link:not(:disabled):not(.ant-btn-dangerous) {
+  background: transparent;
+  border-color: transparent;
+  color: var(--semi-color-primary);
+}
+
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn-link:not(:disabled):not(.ant-btn-dangerous):hover {
+  background: transparent;
+  color: var(--semi-color-primary-hover);
+}
+
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn-link:not(:disabled):not(.ant-btn-dangerous):active {
+  color: var(--semi-color-primary-active);
+}
+
+/* ========== ghost → Primary Outline ========== */
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn-primary.ant-btn-background-ghost:not(:disabled):not(.ant-btn-dangerous) {
+  background: transparent;
+  border-color: var(--semi-color-primary);
+  border-width: 1px;
+  color: var(--semi-color-primary);
+}
+
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn-primary.ant-btn-background-ghost:not(:disabled):not(.ant-btn-dangerous):hover {
+  background: var(--semi-color-primary-light-default);
+  border-color: var(--semi-color-primary-hover);
+  color: var(--semi-color-primary-hover);
+}
+
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn-primary.ant-btn-background-ghost:not(:disabled):not(.ant-btn-dangerous):active {
+  background: var(--semi-color-primary-light-hover);
+  border-color: var(--semi-color-primary-active);
+  color: var(--semi-color-primary-active);
+  transform: scale(0.98);
+}
+
+/* ========== ghost default → Tertiary Outline ========== */
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn-default.ant-btn-background-ghost:not(:disabled):not(.ant-btn-dangerous) {
+  background: transparent;
+  border-color: var(--semi-color-border);
+  border-width: 1px;
+  color: var(--semi-color-text-0);
+}
+
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn-default.ant-btn-background-ghost:not(:disabled):not(.ant-btn-dangerous):hover {
+  background: var(--semi-color-fill-0);
+  border-color: var(--semi-color-border-hover);
+  color: var(--semi-color-text-0);
+}
+
+/* ========== type="primary" danger → Danger Solid ========== */
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn-primary.ant-btn-dangerous:not(:disabled):not(.ant-btn-background-ghost) {
+  background: var(--semi-color-danger);
+  border-color: var(--semi-color-danger);
+  color: #fff;
+}
+
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn-primary.ant-btn-dangerous:not(:disabled):not(.ant-btn-background-ghost):hover {
+  background: var(--semi-color-danger-hover);
+  border-color: var(--semi-color-danger-hover);
+}
+
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn-primary.ant-btn-dangerous:not(:disabled):not(.ant-btn-background-ghost):active {
+  background: var(--semi-color-danger-active);
+  transform: scale(0.98);
+}
+
+/* ========== danger (非 primary) → Danger Light ========== */
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn-default.ant-btn-dangerous:not(:disabled):not(.ant-btn-background-ghost),
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn-dashed.ant-btn-dangerous:not(:disabled):not(.ant-btn-background-ghost) {
+  background: var(--semi-color-danger-light-default);
+  border-color: transparent;
+  color: var(--semi-color-danger);
+}
+
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn-default.ant-btn-dangerous:not(:disabled):not(.ant-btn-background-ghost):hover,
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn-dashed.ant-btn-dangerous:not(:disabled):not(.ant-btn-background-ghost):hover {
+  background: var(--semi-color-danger-light-hover);
+  border-color: transparent;
+  color: var(--semi-color-danger);
+}
+
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn-default.ant-btn-dangerous:not(:disabled):not(.ant-btn-background-ghost):active,
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn-dashed.ant-btn-dangerous:not(:disabled):not(.ant-btn-background-ghost):active {
+  background: var(--semi-color-danger-light-active);
+  transform: scale(0.98);
+}
+
+/* ========== type="text" danger / type="link" danger → Danger Borderless ========== */
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn-text.ant-btn-dangerous:not(:disabled),
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn-link.ant-btn-dangerous:not(:disabled) {
+  background: transparent;
+  border-color: transparent;
+  color: var(--semi-color-danger);
+}
+
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn-text.ant-btn-dangerous:not(:disabled):hover,
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn-link.ant-btn-dangerous:not(:disabled):hover {
+  background: var(--semi-color-danger-light-default);
+  color: var(--semi-color-danger);
+}
+
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn-text.ant-btn-dangerous:not(:disabled):active,
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn-link.ant-btn-dangerous:not(:disabled):active {
+  background: var(--semi-color-danger-light-hover);
+  transform: scale(0.98);
+}
+
+/* ========== danger ghost → Danger Outline ========== */
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn-dangerous.ant-btn-background-ghost:not(:disabled) {
+  background: transparent;
+  border-color: var(--semi-color-danger);
+  border-width: 1px;
+  color: var(--semi-color-danger);
+}
+
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn-dangerous.ant-btn-background-ghost:not(:disabled):hover {
+  background: var(--semi-color-danger-light-default);
+  border-color: var(--semi-color-danger);
+  color: var(--semi-color-danger);
+}
+
+/* ========== 禁用状态 ========== */
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn-disabled,
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn[disabled] {
+  background-color: var(--semi-color-disabled-bg);
+  border-color: transparent;
+  color: var(--semi-color-disabled-text);
+  cursor: not-allowed;
+}
+
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn-disabled:hover,
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn[disabled]:hover {
+  background-color: var(--semi-color-disabled-bg);
+  border-color: transparent;
+  color: var(--semi-color-disabled-text);
+}
+
+/* 禁用状态 - Primary */
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn-primary.ant-btn-disabled,
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn-primary[disabled] {
+  background-color: var(--semi-color-disabled-bg);
+  border-color: transparent;
+  color: var(--semi-color-disabled-text);
+}
+
+/* 禁用状态 - Light 主题 */
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn-text.ant-btn-disabled,
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn-text[disabled] {
+  background-color: transparent;
+  color: var(--semi-color-disabled-text);
+}
+
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn-link.ant-btn-disabled,
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn-link[disabled] {
+  background-color: transparent;
+  color: var(--semi-color-disabled-text);
+}
+
+/* ========== 加载状态 ========== */
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn-loading {
+  opacity: 0.8;
+}
+
+/* ========== 图标按钮 ========== */
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn-icon-only {
+  width: 32px;
+  padding: 0;
+}
+
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn-icon-only.ant-btn-lg {
+  width: 40px;
+}
+
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn-icon-only.ant-btn-sm {
+  width: 24px;
+}
+
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn-circle {
+  border-radius: var(--semi-border-radius-full);
+}
+
+/* ========== 按钮组 ========== */
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn-group .ant-btn {
+  border-radius: 0;
+}
+
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn-group .ant-btn:first-child {
+  border-top-left-radius: var(--semi-border-radius-medium);
+  border-bottom-left-radius: var(--semi-border-radius-medium);
+}
+
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn-group .ant-btn:last-child {
+  border-top-right-radius: var(--semi-border-radius-medium);
+  border-bottom-right-radius: var(--semi-border-radius-medium);
+}
+
+/* ==========================================================================
+   扩展能力：通过 data-theme 和 data-type 属性实现 Semi 完整的按钮系统
+   
+   用法示例：
+   <a-button data-theme="light" data-type="primary">Primary Light</a-button>
+   <a-button data-theme="outline" data-type="warning">Warning Outline</a-button>
+   <a-button data-theme="borderless" data-type="danger">Danger Borderless</a-button>
+   ========================================================================== */
+
+/* ===== data-type="primary" ===== */
+/* Solid (默认主题) */
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn[data-type="primary"]:not([data-theme]) {
+  background: var(--semi-color-primary);
+  border-color: var(--semi-color-primary);
+  color: #fff;
+}
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn[data-type="primary"]:not([data-theme]):hover {
+  background: var(--semi-color-primary-hover);
+  border-color: var(--semi-color-primary-hover);
+}
+
+/* Light */
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn[data-type="primary"][data-theme="light"] {
+  background: var(--semi-color-primary-light-default);
+  border-color: transparent;
+  color: var(--semi-color-primary);
+}
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn[data-type="primary"][data-theme="light"]:hover {
+  background: var(--semi-color-primary-light-hover);
+}
+
+/* Outline */
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn[data-type="primary"][data-theme="outline"] {
+  background: transparent;
+  border-color: var(--semi-color-primary);
+  color: var(--semi-color-primary);
+}
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn[data-type="primary"][data-theme="outline"]:hover {
+  background: var(--semi-color-primary-light-default);
+}
+
+/* Borderless */
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn[data-type="primary"][data-theme="borderless"] {
+  background: transparent;
+  border-color: transparent;
+  color: var(--semi-color-primary);
+}
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn[data-type="primary"][data-theme="borderless"]:hover {
+  background: var(--semi-color-primary-light-default);
+}
+
+/* ===== data-type="secondary" ===== */
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn[data-type="secondary"]:not([data-theme]) {
+  background: var(--semi-color-secondary);
+  border-color: var(--semi-color-secondary);
+  color: #fff;
+}
+
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn[data-type="secondary"][data-theme="light"] {
+  background: var(--semi-color-secondary-light-default);
+  border-color: transparent;
+  color: var(--semi-color-secondary);
+}
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn[data-type="secondary"][data-theme="light"]:hover {
+  background: var(--semi-color-secondary-light-hover);
+}
+
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn[data-type="secondary"][data-theme="outline"] {
+  background: transparent;
+  border-color: var(--semi-color-secondary);
+  color: var(--semi-color-secondary);
+}
+
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn[data-type="secondary"][data-theme="borderless"] {
+  background: transparent;
+  border-color: transparent;
+  color: var(--semi-color-secondary);
+}
+
+/* ===== data-type="tertiary" ===== */
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn[data-type="tertiary"]:not([data-theme]) {
+  background: var(--semi-color-tertiary);
+  border-color: var(--semi-color-tertiary);
+  color: #fff;
+}
+
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn[data-type="tertiary"][data-theme="light"] {
+  background: var(--semi-color-tertiary-light-default);
+  border-color: transparent;
+  color: var(--semi-color-text-0);
+}
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn[data-type="tertiary"][data-theme="light"]:hover {
+  background: var(--semi-color-tertiary-light-hover);
+}
+
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn[data-type="tertiary"][data-theme="outline"] {
+  background: transparent;
+  border-color: var(--semi-color-border);
+  color: var(--semi-color-text-0);
+}
+
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn[data-type="tertiary"][data-theme="borderless"] {
+  background: transparent;
+  border-color: transparent;
+  color: var(--semi-color-text-0);
+}
+
+/* ===== data-type="warning" ===== */
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn[data-type="warning"]:not([data-theme]) {
+  background: var(--semi-color-warning);
+  border-color: var(--semi-color-warning);
+  color: #fff;
+}
+
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn[data-type="warning"][data-theme="light"] {
+  background: var(--semi-color-warning-light-default);
+  border-color: transparent;
+  color: var(--semi-color-warning);
+}
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn[data-type="warning"][data-theme="light"]:hover {
+  background: var(--semi-color-warning-light-hover);
+}
+
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn[data-type="warning"][data-theme="outline"] {
+  background: transparent;
+  border-color: var(--semi-color-warning);
+  color: var(--semi-color-warning);
+}
+
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn[data-type="warning"][data-theme="borderless"] {
+  background: transparent;
+  border-color: transparent;
+  color: var(--semi-color-warning);
+}
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn[data-type="warning"][data-theme="borderless"]:hover {
+  background: var(--semi-color-warning-light-default);
+}
+
+/* ===== data-type="danger" ===== */
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn[data-type="danger"]:not([data-theme]) {
+  background: var(--semi-color-danger);
+  border-color: var(--semi-color-danger);
+  color: #fff;
+}
+
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn[data-type="danger"][data-theme="light"] {
+  background: var(--semi-color-danger-light-default);
+  border-color: transparent;
+  color: var(--semi-color-danger);
+}
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn[data-type="danger"][data-theme="light"]:hover {
+  background: var(--semi-color-danger-light-hover);
+}
+
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn[data-type="danger"][data-theme="outline"] {
+  background: transparent;
+  border-color: var(--semi-color-danger);
+  color: var(--semi-color-danger);
+}
+
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn[data-type="danger"][data-theme="borderless"] {
+  background: transparent;
+  border-color: transparent;
+  color: var(--semi-color-danger);
+}
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn[data-type="danger"][data-theme="borderless"]:hover {
+  background: var(--semi-color-danger-light-default);
+}
+
+/* ===== data-type="success" ===== */
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn[data-type="success"]:not([data-theme]) {
+  background: var(--semi-color-success);
+  border-color: var(--semi-color-success);
+  color: #fff;
+}
+
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn[data-type="success"][data-theme="light"] {
+  background: var(--semi-color-success-light-default);
+  border-color: transparent;
+  color: var(--semi-color-success);
+}
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn[data-type="success"][data-theme="light"]:hover {
+  background: var(--semi-color-success-light-hover);
+}
+
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn[data-type="success"][data-theme="outline"] {
+  background: transparent;
+  border-color: var(--semi-color-success);
+  color: var(--semi-color-success);
+}
+
+.semi:where([data-semi="all"], [data-semi-button]) .ant-btn[data-type="success"][data-theme="borderless"] {
+  background: transparent;
+  border-color: transparent;
+  color: var(--semi-color-success);
+}

package/dist/antd/styles/components/calendar.css

@@ -0,0 +1,55 @@
+/**
+ * Calendar 日历 - Semi Design 风格
+ */
+
+.semi:where([data-semi="all"], [data-semi-calendar]) .ant-picker-calendar {
+  background: var(--semi-color-bg-0);
+}
+
+.semi:where([data-semi="all"], [data-semi-calendar]) .ant-picker-calendar-header {
+  padding: 12px;
+}
+
+.semi:where([data-semi="all"], [data-semi-calendar]) .ant-picker-calendar-header .ant-select {
+  min-width: 80px;
+}
+
+/* 日期单元格 */
+.semi:where([data-semi="all"], [data-semi-calendar]) .ant-picker-cell {
+  color: var(--semi-color-text-1);
+}
+
+.semi:where([data-semi="all"], [data-semi-calendar]) .ant-picker-cell-in-view {
+  color: var(--semi-color-text-0);
+}
+
+.semi:where([data-semi="all"], [data-semi-calendar]) .ant-picker-cell:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end) .ant-picker-cell-inner {
+  background: var(--semi-color-fill-0);
+}
+
+.semi:where([data-semi="all"], [data-semi-calendar]) .ant-picker-cell-selected .ant-picker-cell-inner,
+.semi:where([data-semi="all"], [data-semi-calendar]) .ant-picker-cell-range-start .ant-picker-cell-inner,
+.semi:where([data-semi="all"], [data-semi-calendar]) .ant-picker-cell-range-end .ant-picker-cell-inner {
+  background: var(--semi-color-primary);
+  color: #fff;
+}
+
+.semi:where([data-semi="all"], [data-semi-calendar]) .ant-picker-cell-today .ant-picker-cell-inner::before {
+  border-color: var(--semi-color-primary);
+  border-radius: var(--semi-border-radius-small);
+}
+
+/* 卡片模式 */
+.semi:where([data-semi="all"], [data-semi-calendar]) .ant-picker-calendar-mini {
+  border-radius: var(--semi-border-radius-medium);
+}
+
+.semi:where([data-semi="all"], [data-semi-calendar]) .ant-picker-calendar-mini .ant-picker-calendar-header {
+  padding: 8px;
+}
+
+.semi:where([data-semi="all"], [data-semi-calendar]) .ant-picker-calendar-mini .ant-picker-cell-inner {
+  height: 24px;
+  line-height: 24px;
+  border-radius: var(--semi-border-radius-small);
+}

package/dist/antd/styles/components/card.css

@@ -0,0 +1,113 @@
+/**
+ * Card 卡片 - Semi Design 风格
+ */
+
+.semi:where([data-semi="all"], [data-semi-card]) .ant-card {
+  background: var(--semi-color-bg-0);
+  border: 1px solid var(--semi-color-border);
+  border-radius: var(--semi-border-radius-medium);
+  box-shadow: none;
+  transition: all var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+/* 可悬停卡片 */
+.semi:where([data-semi="all"], [data-semi-card]) .ant-card-hoverable:hover {
+  border-color: var(--semi-color-border-hover);
+  box-shadow: var(--semi-shadow-elevated);
+}
+
+/* 无边框 */
+.semi:where([data-semi="all"], [data-semi-card]) .ant-card-bordered {
+  border: 1px solid var(--semi-color-border);
+}
+
+/* 卡片头部 */
+.semi:where([data-semi="all"], [data-semi-card]) .ant-card-head {
+  background: transparent;
+  border-bottom: 1px solid var(--semi-color-border);
+  padding: 0 20px;
+  min-height: 48px;
+}
+
+.semi:where([data-semi="all"], [data-semi-card]) .ant-card-head-title {
+  color: var(--semi-color-text-0);
+  font-size: 16px;
+  font-weight: 600;
+  padding: 12px 0;
+}
+
+.semi:where([data-semi="all"], [data-semi-card]) .ant-card-extra {
+  color: var(--semi-color-text-1);
+  padding: 12px 0;
+}
+
+/* 卡片内容 */
+.semi:where([data-semi="all"], [data-semi-card]) .ant-card-body {
+  padding: 20px;
+  color: var(--semi-color-text-1);
+}
+
+/* 卡片元信息 */
+.semi:where([data-semi="all"], [data-semi-card]) .ant-card-meta-title {
+  color: var(--semi-color-text-0);
+  font-weight: 600;
+}
+
+.semi:where([data-semi="all"], [data-semi-card]) .ant-card-meta-description {
+  color: var(--semi-color-text-2);
+}
+
+/* 卡片操作 */
+.semi:where([data-semi="all"], [data-semi-card]) .ant-card-actions {
+  background: transparent;
+  border-top: 1px solid var(--semi-color-border);
+}
+
+.semi:where([data-semi="all"], [data-semi-card]) .ant-card-actions > li {
+  color: var(--semi-color-text-2);
+}
+
+.semi:where([data-semi="all"], [data-semi-card]) .ant-card-actions > li:hover {
+  color: var(--semi-color-primary);
+}
+
+.semi:where([data-semi="all"], [data-semi-card]) .ant-card-actions > li:not(:last-child) {
+  border-inline-end: 1px solid var(--semi-color-border);
+}
+
+/* 网格卡片 */
+.semi:where([data-semi="all"], [data-semi-card]) .ant-card-grid {
+  border: none;
+  box-shadow: 
+    1px 0 0 0 var(--semi-color-border),
+    0 1px 0 0 var(--semi-color-border),
+    1px 1px 0 0 var(--semi-color-border),
+    1px 0 0 0 var(--semi-color-border) inset,
+    0 1px 0 0 var(--semi-color-border) inset;
+  padding: 20px;
+  transition: background var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+.semi:where([data-semi="all"], [data-semi-card]) .ant-card-grid:hover {
+  background: var(--semi-color-fill-0);
+}
+
+/* 加载状态 */
+.semi:where([data-semi="all"], [data-semi-card]) .ant-card-loading-content {
+  padding: 20px;
+}
+
+/* 小尺寸 */
+.semi:where([data-semi="all"], [data-semi-card]) .ant-card-small .ant-card-head {
+  padding: 0 12px;
+  min-height: 36px;
+}
+
+.semi:where([data-semi="all"], [data-semi-card]) .ant-card-small .ant-card-head-title {
+  font-size: 14px;
+  padding: 8px 0;
+}
+
+.semi:where([data-semi="all"], [data-semi-card]) .ant-card-small .ant-card-body {
+  padding: 12px;
+}