@manohub/ui 0.10.4 → 1.0.0

package/dist/styles/components/avatar.css

@@ -1,131 +1,131 @@
-/**
- * Avatar —— 头像（四档尺寸 / 文字 / 图标 / 占位 / 方角 / 带框 / 计数 / 头像组 / 角标）。
- *
- * 出处：`@aihub/theme` 的 `playground/components/avatar.css` 与 `src/components/avatar.css`
- * （实测四档 24 / 36 / 60 / 80；字母底色取主色；角标高 20 白描边）。
- *
- * 两条来自规范的硬结论，改前先读：
- * 1. **圆形裁切归图片自身，容器不裁**：角上的角标（`__badge`）与徽章（`__chip`）是绝对定位件，
- *    容器若带 `overflow: hidden`，会沿圆弧把它们各切掉一半（实测反馈）。故容器 `overflow: visible`，
- *    图片用 `border-radius: inherit` 跟着形态自裁。
- * 2. **头像组靠负边距堆叠**（`.mh-avatar-group`），每个头像带 2px 的底描边把相邻项隔开。
- */
-.mh-avatar {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  flex-shrink: 0;
-  overflow: visible; /* 见文件头第 1 条：裁切归图片 */
-  border-radius: var(--ui-radius-full);
-  background: var(--ui-base-400); /* Ne04 占位底 */
-  color: var(--ui-base-100); /* 占位前景 */
-}
-
-/* 图片：撑满 + 跟随形态自裁（否则去掉容器 overflow 后长宽不符的图会外溢）。
-   `display: block` 必须自己写：元素级基线不再把 `img` 转块级（那条会压消费方的 `h-*` / `hidden`），
-   否则行内基线间隙会把圆形头像顶偏。 */
-.mh-avatar > img {
-  display: block;
-  width: 100%;
-  height: 100%;
-  border-radius: inherit;
-  object-fit: cover;
-}
-
-/* ===== 尺寸四档 ===== */
-.mh-avatar--sm {
-  width: var(--ui-avatar-size-sm);
-  height: var(--ui-avatar-size-sm);
-  font-size: var(--ui-font-caption);
-}
-.mh-avatar--md {
-  width: var(--ui-avatar-size-md);
-  height: var(--ui-avatar-size-md);
-  font-size: var(--ui-font-caption);
-}
-.mh-avatar--lg {
-  width: var(--ui-avatar-size-lg);
-  height: var(--ui-avatar-size-lg);
-  font-size: var(--ui-font-title);
-}
-.mh-avatar--xl {
-  width: var(--ui-avatar-size-xl);
-  height: var(--ui-avatar-size-xl);
-  font-size: var(--ui-font-display);
-}
-
-/* ===== 内容形态 ===== */
-/* 文字头像：底取主色（业务要按人名哈希换色时给 `.mh-avatar--letter` 覆盖 background 即可） */
-.mh-avatar--letter {
-  background: var(--ui-primary);
-}
-/* 图标头像：图标由 @manohub/icon 渲染，这里只给尺寸档 */
-.mh-avatar--icon {
-  color: var(--ui-base-100);
-}
-/* 占位：虚线框 + 说明字（虚线线色取线型档，口径「实线 base-300 / 虚线 base-400」） */
-.mh-avatar--placeholder {
-  border: 1px dashed var(--ui-line-dashed);
-  background: var(--ui-base-100);
-  color: var(--ui-base-content-subtle);
-  font-size: var(--ui-font-caption);
-}
-/* 方角（商业图像）：圆角矩形 */
-.mh-avatar--square {
-  border-radius: var(--ui-radius-control);
-}
-/* 带框：靠阴影画出 2px 底环（不占布局，避免与角标抢位） */
-.mh-avatar--framed {
-  box-shadow: 0 0 0 2px var(--ui-base-100), var(--ui-shadow-card);
-}
-/* 计数档（头像组末位的「+N」） */
-.mh-avatar--count {
-  background: var(--ui-base-200);
-  color: var(--ui-base-content-muted);
-  font-size: var(--ui-font-caption);
-}
-
-/* ===== 角上外挂件（见文件头第 1 条：容器不裁，故它们不会被切）===== */
-.mh-avatar__badge {
-  position: absolute;
-  top: 0;
-  right: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: var(--ui-avatar-badge-size);
-  height: var(--ui-avatar-badge-size);
-  padding: 0 var(--ui-space-1);
-  border-radius: var(--ui-radius-full);
-  background: var(--ui-error); /* 红底（规范 Badge 专页实测） */
-  border: 2px solid var(--ui-base-100); /* 白描边 */
-  color: var(--ui-error-content);
-  font-size: var(--ui-font-caption);
-}
-.mh-avatar__chip {
-  position: absolute;
-  right: -2px;
-  bottom: -2px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  border-radius: var(--ui-radius-full);
-  background: var(--ui-primary);
-  border: 2px solid var(--ui-base-100);
-  cursor: pointer;
-}
-
-/* ===== 头像组：负边距堆叠，靠 2px 底描边分隔 ===== */
-.mh-avatar-group {
-  display: inline-flex;
-  align-items: center;
-}
-.mh-avatar-group .mh-avatar {
-  border: 2px solid var(--ui-base-100);
-}
-.mh-avatar-group .mh-avatar + .mh-avatar {
-  margin-left: calc(-1 * var(--ui-avatar-gap));
-}
+/**
+ * Avatar —— 头像（四档尺寸 / 文字 / 图标 / 占位 / 方角 / 带框 / 计数 / 头像组 / 角标）。
+ *
+ * 出处：`@aihub/theme` 的 `playground/components/avatar.css` 与 `src/components/avatar.css`
+ * （实测四档 24 / 36 / 60 / 80；字母底色取主色；角标高 20 白描边）。
+ *
+ * 两条来自规范的硬结论，改前先读：
+ * 1. **圆形裁切归图片自身，容器不裁**：角上的角标（`__badge`）与徽章（`__chip`）是绝对定位件，
+ *    容器若带 `overflow: hidden`，会沿圆弧把它们各切掉一半（实测反馈）。故容器 `overflow: visible`，
+ *    图片用 `border-radius: inherit` 跟着形态自裁。
+ * 2. **头像组靠负边距堆叠**（`.mh-avatar-group`），每个头像带 2px 的底描边把相邻项隔开。
+ */
+.mh-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  flex-shrink: 0;
+  overflow: visible; /* 见文件头第 1 条：裁切归图片 */
+  border-radius: var(--ui-radius-full);
+  background: var(--ui-base-400); /* Ne04 占位底 */
+  color: var(--ui-base-100); /* 占位前景 */
+}
+
+/* 图片：撑满 + 跟随形态自裁（否则去掉容器 overflow 后长宽不符的图会外溢）。
+   `display: block` 必须自己写：元素级基线不再把 `img` 转块级（那条会压消费方的 `h-*` / `hidden`），
+   否则行内基线间隙会把圆形头像顶偏。 */
+.mh-avatar > img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  object-fit: cover;
+}
+
+/* ===== 尺寸四档 ===== */
+.mh-avatar--sm {
+  width: var(--ui-avatar-size-sm);
+  height: var(--ui-avatar-size-sm);
+  font-size: var(--ui-font-caption);
+}
+.mh-avatar--md {
+  width: var(--ui-avatar-size-md);
+  height: var(--ui-avatar-size-md);
+  font-size: var(--ui-font-caption);
+}
+.mh-avatar--lg {
+  width: var(--ui-avatar-size-lg);
+  height: var(--ui-avatar-size-lg);
+  font-size: var(--ui-font-title);
+}
+.mh-avatar--xl {
+  width: var(--ui-avatar-size-xl);
+  height: var(--ui-avatar-size-xl);
+  font-size: var(--ui-font-display);
+}
+
+/* ===== 内容形态 ===== */
+/* 文字头像：底取主色（业务要按人名哈希换色时给 `.mh-avatar--letter` 覆盖 background 即可） */
+.mh-avatar--letter {
+  background: var(--ui-primary);
+}
+/* 图标头像：图标由 @manohub/icon 渲染，这里只给尺寸档 */
+.mh-avatar--icon {
+  color: var(--ui-base-100);
+}
+/* 占位：虚线框 + 说明字（虚线线色取线型档，口径「实线 base-300 / 虚线 base-400」） */
+.mh-avatar--placeholder {
+  border: 1px dashed var(--ui-line-dashed);
+  background: var(--ui-base-100);
+  color: var(--ui-base-content-subtle);
+  font-size: var(--ui-font-caption);
+}
+/* 方角（商业图像）：圆角矩形 */
+.mh-avatar--square {
+  border-radius: var(--ui-radius-control);
+}
+/* 带框：靠阴影画出 2px 底环（不占布局，避免与角标抢位） */
+.mh-avatar--framed {
+  box-shadow: 0 0 0 2px var(--ui-base-100), var(--ui-shadow-card);
+}
+/* 计数档（头像组末位的「+N」） */
+.mh-avatar--count {
+  background: var(--ui-base-200);
+  color: var(--ui-base-content-muted);
+  font-size: var(--ui-font-caption);
+}
+
+/* ===== 角上外挂件（见文件头第 1 条：容器不裁，故它们不会被切）===== */
+.mh-avatar__badge {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--ui-avatar-badge-size);
+  height: var(--ui-avatar-badge-size);
+  padding: 0 var(--ui-space-1);
+  border-radius: var(--ui-radius-full);
+  background: var(--ui-error); /* 红底（规范 Badge 专页实测） */
+  border: 2px solid var(--ui-base-100); /* 白描边 */
+  color: var(--ui-error-content);
+  font-size: var(--ui-font-caption);
+}
+.mh-avatar__chip {
+  position: absolute;
+  right: -2px;
+  bottom: -2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: var(--ui-radius-full);
+  background: var(--ui-primary);
+  border: 2px solid var(--ui-base-100);
+  cursor: pointer;
+}
+
+/* ===== 头像组：负边距堆叠，靠 2px 底描边分隔 ===== */
+.mh-avatar-group {
+  display: inline-flex;
+  align-items: center;
+}
+.mh-avatar-group .mh-avatar {
+  border: 2px solid var(--ui-base-100);
+}
+.mh-avatar-group .mh-avatar + .mh-avatar {
+  margin-left: calc(-1 * var(--ui-avatar-gap));
+}

package/dist/styles/components/avatar.tokens.css

@@ -1,24 +1,24 @@
-/**
- * avatar —— 单件令牌（**基础值**）。
- *
- * 本件自己的几何 / 尺寸 / 色彩槽位；只服务本件，故不随主题进 `@manohub/theme`。
- *
- * ## 抽出说明
- * 本文件从面文件里抽出（原先混写在 `avatar.css` 顶部）：这些是**基础值**，锚在
- * `[data-manohub-ui]` —— 跨包唯一作用域锚，由入口层无条件写在应用容器上，因此**任何落在
- * 容器里的分件都取得到值**，不再依赖「声明在某个组件根类上」这条脆弱假设
- * （历史症状：跨件消费的 `--ui-*-group-*` 取不到值，组内间距变 0）。
- *
- * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里 —— 它们靠「同一元素上两个
- * 选择器改写同一个令牌」生效，搬到本文件会让档位失效。
- * ⚠️ 新增组件要登记两处：本文件 + `src/styles/index.css`（见其文件头「五处齐备」）。
- */
-[data-manohub-ui] {
-  /* 单件令牌（只服务本件；跨件令牌才进 theme/） */
-  --ui-avatar-size-sm: 24px;
-  --ui-avatar-size-md: 36px;
-  --ui-avatar-size-lg: 60px;
-  --ui-avatar-size-xl: 80px;
-  --ui-avatar-badge-size: 20px; /* 角标高 20，宽按位数撑开 */
-  --ui-avatar-gap: 10px; /* 堆叠重叠量（组件可用 gap 覆盖） */
-}
+/**
+ * avatar —— 单件令牌（**基础值**）。
+ *
+ * 本件自己的几何 / 尺寸 / 色彩槽位；只服务本件，故不随主题进 `@manohub/theme`。
+ *
+ * ## 抽出说明
+ * 本文件从面文件里抽出（原先混写在 `avatar.css` 顶部）：这些是**基础值**，锚在
+ * `[data-manohub-ui]` —— 跨包唯一作用域锚，由入口层无条件写在应用容器上，因此**任何落在
+ * 容器里的分件都取得到值**，不再依赖「声明在某个组件根类上」这条脆弱假设
+ * （历史症状：跨件消费的 `--ui-*-group-*` 取不到值，组内间距变 0）。
+ *
+ * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里 —— 它们靠「同一元素上两个
+ * 选择器改写同一个令牌」生效，搬到本文件会让档位失效。
+ * ⚠️ 新增组件要登记两处：本文件 + `src/styles/index.css`（见其文件头「五处齐备」）。
+ */
+[data-manohub-ui] {
+  /* 单件令牌（只服务本件；跨件令牌才进 theme/） */
+  --ui-avatar-size-sm: 24px;
+  --ui-avatar-size-md: 36px;
+  --ui-avatar-size-lg: 60px;
+  --ui-avatar-size-xl: 80px;
+  --ui-avatar-badge-size: 20px; /* 角标高 20，宽按位数撑开 */
+  --ui-avatar-gap: 10px; /* 堆叠重叠量（组件可用 gap 覆盖） */
+}