@linhey/rhine-design 0.3.0 → 0.5.0

package/components/styles.css

@@ -1,13 +1,19 @@
 @import './tokens.css';
 @import './typography.css';
 @import './common.css';
+@import './patterns.css';
+@import './timeline.css';
+@import './extensions.css';
+@import './background.css';
+@import './charts.css';
 
 .rhine-theme { color:var(--rhine-ink); background:var(--rhine-bg); font:var(--rhine-text-body)/var(--rhine-leading-body) var(--rhine-font); font-synthesis:none; }
+.rhine-theme[data-rhine-theme="rhine"] { color-scheme:light; }
 .rhine-theme *, .rhine-theme *::before, .rhine-theme *::after { box-sizing:border-box; }
 .rhine-theme [hidden] { display:none!important; }
 .rhine-theme :is(button,input,select,textarea,summary,a,[tabindex]):focus-visible { outline:2px solid var(--rhine-green); outline-offset:3px; }
 .rhine-sr-only { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
-.rhine-button { position:relative; display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; padding:10px 16px; border:1px solid var(--rhine-ink); border-radius:var(--rhine-radius-control); font:500 14px/22px var(--rhine-font); background:var(--rhine-ink); color:var(--rhine-surface); cursor:pointer; overflow-wrap:anywhere; transition:background-color var(--rhine-duration-hover) var(--rhine-ease-standard),border-color var(--rhine-duration-hover) var(--rhine-ease-standard),transform var(--rhine-duration-press) var(--rhine-ease-standard); }
+.rhine-button { position:relative; display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; padding:10px 16px; border:1px solid var(--rhine-ink); border-radius:var(--rhine-radius-control); font:var(--rhine-weight-label) var(--rhine-text-body)/var(--rhine-leading-body) var(--rhine-font); background:var(--rhine-ink); color:var(--rhine-surface); cursor:pointer; overflow-wrap:anywhere; transition:background-color var(--rhine-duration-hover) var(--rhine-ease-standard),border-color var(--rhine-duration-hover) var(--rhine-ease-standard),transform var(--rhine-duration-press) var(--rhine-ease-standard); }
 .rhine-button:hover:not(:disabled):not([aria-disabled=true]) { background:var(--rhine-green); border-color:var(--rhine-green); }
 .rhine-button:active:not(:disabled):not([aria-disabled=true]) { transform:translateY(1px); }
 .rhine-button--secondary { background:var(--rhine-surface); color:var(--rhine-ink); border-color:var(--rhine-control); }
@@ -25,18 +31,19 @@
 .rhine-tone-warning { --rhine-tone:var(--rhine-warning); --rhine-tone-bg:var(--rhine-warning-bg); }
 .rhine-tone-error { --rhine-tone:var(--rhine-error); --rhine-tone-bg:var(--rhine-error-bg); }
 .rhine-badge { display:inline-block; padding:2px 8px; border-radius:2px; background:var(--rhine-tone-bg); color:var(--rhine-tone); font:500 12px/20px var(--rhine-font); }
-.rhine-surface { padding:24px; border:1px solid var(--rhine-line); border-radius:var(--rhine-radius-card); background:var(--rhine-surface); min-width:0; }
-.rhine-selection { display:block; border:1px solid var(--rhine-control); background:var(--rhine-surface); border-radius:var(--rhine-radius-card); padding:20px; cursor:pointer; min-width:0; transition:background-color var(--rhine-duration-hover) var(--rhine-ease-standard),border-color var(--rhine-duration-hover) var(--rhine-ease-standard),box-shadow var(--rhine-duration-hover) var(--rhine-ease-standard); }
+.rhine-surface { padding:var(--rhine-space-6); border:1px solid var(--rhine-line); border-radius:var(--rhine-radius-card); background:var(--rhine-surface-bg); color:var(--rhine-surface-text); min-width:0; }
+.rhine-selection { display:block; border:1px solid var(--rhine-control); background:var(--rhine-surface); border-radius:var(--rhine-radius-card); padding:var(--rhine-space-6); cursor:pointer; min-width:0; transition:background-color var(--rhine-duration-hover) var(--rhine-ease-standard),border-color var(--rhine-duration-hover) var(--rhine-ease-standard),box-shadow var(--rhine-duration-hover) var(--rhine-ease-standard); }
 .rhine-selection:hover:not([data-disabled=true]) { border-color:var(--rhine-green); background:#f4f7ef; }
 .rhine-selection[data-selected=true] { border-color:var(--rhine-green); background:var(--rhine-selected); box-shadow:inset 0 0 0 1px var(--rhine-green); }
 .rhine-selection[data-disabled=true] { cursor:default; color:var(--rhine-muted); background:var(--rhine-bg); }
 .rhine-selection:focus-within { outline:2px solid var(--rhine-green); outline-offset:3px; }
-.rhine-selection__heading { display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:16px; overflow-wrap:anywhere; }
+.rhine-selection__heading { display:flex; align-items:center; justify-content:space-between; gap:var(--rhine-space-4); font-size:var(--rhine-text-heading); line-height:var(--rhine-leading-heading); overflow-wrap:anywhere; }
+.rhine-selection__heading>strong { font-weight:var(--rhine-weight-heading); }
 .rhine-selection input { width:18px; height:18px; accent-color:var(--rhine-green); flex-shrink:0; }
-.rhine-selection__content { display:block; margin-top:16px; overflow-wrap:anywhere; }
+.rhine-selection__content { display:block; margin-top:var(--rhine-space-2); overflow-wrap:anywhere; }
 .rhine-field { display:flex; flex-direction:column; gap:8px; min-width:0; }
 .rhine-field>label { font-weight:500; }
-.rhine-field input { width:100%; min-width:0; min-height:44px; padding:10px 12px; color:var(--rhine-ink); background:var(--rhine-surface); border:1px solid var(--rhine-control); border-radius:var(--rhine-radius-control); font:14px/22px var(--rhine-font); transition:border-color var(--rhine-duration-hover) var(--rhine-ease-standard),background-color var(--rhine-duration-hover) var(--rhine-ease-standard); }
+.rhine-field input { width:100%; min-width:0; min-height:44px; padding:10px 12px; color:var(--rhine-ink); background:var(--rhine-surface); border:1px solid var(--rhine-control); border-radius:var(--rhine-radius-control); font:var(--rhine-text-body)/var(--rhine-leading-body) var(--rhine-font); transition:border-color var(--rhine-duration-hover) var(--rhine-ease-standard),background-color var(--rhine-duration-hover) var(--rhine-ease-standard); }
 .rhine-field input::placeholder { color:var(--rhine-muted); }
 .rhine-field input[aria-invalid=true] { border-color:var(--rhine-error); }
 .rhine-field input:disabled { background:var(--rhine-selected); color:var(--rhine-muted); }
@@ -44,7 +51,7 @@
 .rhine-field__hint { color:var(--rhine-muted); }
 .rhine-field__error { color:var(--rhine-error); }
 .rhine-tabs__list { display:flex; flex-wrap:wrap; gap:24px; border-bottom:1px solid var(--rhine-line); }
-.rhine-tabs__list button { position:relative; background:none; border:0; padding:12px 0; min-height:44px; color:var(--rhine-muted); font:500 14px/22px var(--rhine-font); cursor:pointer; transition:color var(--rhine-duration-hover) var(--rhine-ease-standard); }
+.rhine-tabs__list button { position:relative; background:none; border:0; padding:12px 0; min-height:44px; color:var(--rhine-muted); font:var(--rhine-weight-label) var(--rhine-text-body)/var(--rhine-leading-body) var(--rhine-font); cursor:pointer; transition:color var(--rhine-duration-hover) var(--rhine-ease-standard); }
 .rhine-tabs__list button::after { content:''; position:absolute; bottom:-1px; inset-inline:0; height:2px; background:var(--rhine-green); transform:scaleX(0); transform-origin:left; transition:transform var(--rhine-duration-panel) var(--rhine-ease-standard); }
 .rhine-tabs__list button[aria-selected=true] { color:var(--rhine-ink); }
 .rhine-tabs__list button[aria-selected=true]::after { transform:scaleX(1); }
@@ -61,7 +68,7 @@
 .rhine-notice>div { flex:1 1 200px; min-width:0; overflow-wrap:anywhere; }
 .rhine-notice strong { font-size:14px; font-weight:600; }
 .rhine-notice__body { margin-top:4px; font-size:12px; line-height:20px; }
-.rhine-progress__label { display:flex; justify-content:space-between; gap:12px; font-size:12px; margin-bottom:8px; }
+.rhine-progress__label { display:flex; justify-content:space-between; gap:var(--rhine-space-3); font-size:var(--rhine-text-caption); line-height:var(--rhine-leading-caption); margin-bottom:var(--rhine-space-2); }
 .rhine-progress__label strong { font-variant-numeric:tabular-nums; }
 .rhine-progress__track { height:6px; background:var(--rhine-line); overflow:hidden; }
 .rhine-progress__track>span { display:block; height:100%; background:var(--rhine-green); transform-origin:left; transition:transform var(--rhine-duration-progress) var(--rhine-ease-standard); }

package/components/theme-arknights.css

@@ -0,0 +1,306 @@
+/* Component theme. Imported automatically by @linhey/rhine-design/theme, or after styles.css for CSS-only usage. */
+.rhine-theme[data-rhine-theme="arknights"] {
+  /* ---- 色彩：暗舱底 + 信号黄 + 警戒橙 ---- */
+  --rhine-bg: #0b0d10;
+  --rhine-overlay-bg: #1a1d23;
+  --rhine-backdrop-bg: rgba(4, 5, 7, .72);
+  --rhine-background-mark: #20242a;
+  --rhine-background-texture: linear-gradient(var(--rhine-background-mark) 1px, transparent 1px), linear-gradient(90deg, var(--rhine-background-mark) 1px, transparent 1px);
+  --rhine-background-scale: 32px 32px;
+  --rhine-surface: #14161b;
+  --rhine-ink: #eef0ec;
+  --rhine-muted: #878f96;
+  --rhine-line: #272b31;
+  --rhine-control: #454c54;
+  --rhine-selected: #1c2026;
+  --rhine-table-hover-bg: color-mix(in srgb, #ffd400 6%, var(--rhine-surface));
+  --rhine-green: #ffd400;
+  --rhine-signal: #ff6a1a;
+  --rhine-warning: #ffb020;
+  --rhine-error: #ff5449;
+  --rhine-warning-bg: #2a2113;
+  --rhine-error-bg: #2b1715;
+
+  /* ---- 形态：圆角归零 ---- */
+  --rhine-radius-card: 0px;
+  --rhine-radius-control: 0px;
+
+  /* ---- 主题私有变量 ---- */
+  --ak-accent: #ffd400;
+  --ak-accent-ink: #0b0d10;          /* 压在黄底上的深色 */
+  --ak-gridline: rgba(238, 240, 236, .04);
+  --ak-panel: #14161b;
+  --ak-panel-hi: #1a1d23;
+  --ak-cut: 14px;
+  --ak-cut-sm: 8px;
+  --ak-hazard: repeating-linear-gradient(-45deg, var(--ak-accent) 0 8px, transparent 8px 16px);
+
+  color-scheme: dark;
+}
+
+/* 滚动条：细轨道 + 黄 thumb */
+.rhine-theme[data-rhine-theme="arknights"] * { scrollbar-color: var(--rhine-control) transparent; }
+.rhine-theme[data-rhine-theme="arknights"] ::-webkit-scrollbar { width: 8px; height: 8px; }
+.rhine-theme[data-rhine-theme="arknights"] ::-webkit-scrollbar-thumb { background: var(--rhine-control); }
+.rhine-theme[data-rhine-theme="arknights"] ::-webkit-scrollbar-thumb:hover { background: var(--ak-accent); }
+.rhine-theme[data-rhine-theme="arknights"] ::-webkit-scrollbar-track { background: transparent; }
+
+/* 选中文字 */
+.rhine-theme[data-rhine-theme="arknights"] ::selection { background: var(--ak-accent); color: var(--ak-accent-ink); }
+
+/* ================= 字体性格 ================= */
+/* 标签、编号、说明全部等宽化，正文保持无衬线可读性 */
+.rhine-theme[data-rhine-theme="arknights"] .rhine-key-value dt,
+.rhine-theme[data-rhine-theme="arknights"] .rhine-field__hint,
+.rhine-theme[data-rhine-theme="arknights"] .rhine-progress__label {
+  font-family: var(--rhine-mono);
+  letter-spacing: .04em;
+}
+/* 面包屑分隔符换成终端风格 // */
+.rhine-theme[data-rhine-theme="arknights"] .rhine-breadcrumbs li { font-family: var(--rhine-mono); letter-spacing: .05em; }
+.rhine-theme[data-rhine-theme="arknights"] .rhine-breadcrumbs a { color: var(--ak-accent); }
+.rhine-theme[data-rhine-theme="arknights"] .rhine-breadcrumbs [aria-current=page] { color: var(--rhine-ink); }
+
+/* 导航：等宽标签 + 当前项黄块左条 */
+.rhine-theme[data-rhine-theme="arknights"] .rhine-side-nav__group>p {
+  font-family: var(--rhine-mono);
+  letter-spacing: .14em;
+  color: var(--rhine-control);
+}
+.rhine-theme[data-rhine-theme="arknights"] .rhine-side-nav a {
+  border-inline-start-width: 3px;
+  position: relative;
+}
+.rhine-theme[data-rhine-theme="arknights"] .rhine-side-nav a:hover { background: var(--ak-panel-hi); }
+.rhine-theme[data-rhine-theme="arknights"] .rhine-side-nav a[aria-current=page] {
+  background: linear-gradient(90deg, rgba(255, 212, 0, .14), transparent 75%);
+  border-color: var(--ak-accent);
+  color: var(--ak-accent);
+}
+.rhine-theme[data-rhine-theme="arknights"] .rhine-side-nav a[aria-current=page] .rhine-icon { color: var(--ak-accent); }
+
+/* ================= 面板与容器：斜切 + 角标框架 ================= */
+.rhine-theme[data-rhine-theme="arknights"] .rhine-surface,
+.rhine-theme[data-rhine-theme="arknights"] .rhine-empty,
+.rhine-theme[data-rhine-theme="arknights"] .rhine-fieldset {
+  background: var(--rhine-surface-bg);
+  clip-path: polygon(0 0, calc(100% - var(--ak-cut)) 0, 100% var(--ak-cut), 100% 100%, 0 100%);
+}
+/* 左下角小角标点缀 */
+.rhine-theme[data-rhine-theme="arknights"] .rhine-surface { position: relative; }
+.rhine-theme[data-rhine-theme="arknights"] .rhine-surface::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 18px;
+  height: 18px;
+  border-left: 2px solid var(--ak-accent);
+  border-bottom: 2px solid var(--ak-accent);
+  opacity: .55;
+  pointer-events: none;
+}
+
+/* ================= 按钮：平行四边形 ================= */
+.rhine-theme[data-rhine-theme="arknights"] .rhine-button {
+  clip-path: polygon(var(--ak-cut-sm) 0, 100% 0, calc(100% - var(--ak-cut-sm)) 100%, 0 100%);
+  letter-spacing: .06em;
+  font-weight: 600;
+}
+.rhine-theme[data-rhine-theme="arknights"] .rhine-button:not(.rhine-button--secondary):not(.rhine-button--quiet):not(.rhine-button--danger) {
+  background: var(--ak-accent);
+  border-color: var(--ak-accent);
+  color: var(--ak-accent-ink);
+}
+.rhine-theme[data-rhine-theme="arknights"] .rhine-button:hover:not(:disabled):not([aria-disabled=true]) {
+  background: #ffe14d;
+  border-color: #ffe14d;
+  color: var(--ak-accent-ink);
+}
+.rhine-theme[data-rhine-theme="arknights"] .rhine-button--secondary { border-color: var(--rhine-control); }
+.rhine-theme[data-rhine-theme="arknights"] .rhine-button--secondary:hover:not(:disabled):not([aria-disabled=true]),
+.rhine-theme[data-rhine-theme="arknights"] .rhine-button--quiet:hover:not(:disabled):not([aria-disabled=true]) {
+  background: var(--ak-panel-hi);
+  color: var(--ak-accent);
+  border-color: var(--ak-accent);
+}
+.rhine-theme[data-rhine-theme="arknights"] .rhine-button--quiet { color: var(--ak-accent); }
+/* clip-path 会裁掉外 outline，焦点改内描边 */
+.rhine-theme[data-rhine-theme="arknights"] .rhine-button:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--rhine-ink);
+}
+.rhine-theme[data-rhine-theme="arknights"] .rhine-button--danger { background: var(--rhine-error); border-color: var(--rhine-error); color: var(--rhine-ink); }
+.rhine-theme[data-rhine-theme="arknights"] .rhine-button--danger:hover:not(:disabled):not([aria-disabled=true]) { background: #c93a32; border-color: #c93a32; }
+.rhine-theme[data-rhine-theme="arknights"] .rhine-button:active:not(:disabled):not([aria-disabled=true]) { transform:none; }
+
+/* 图标按钮保持方形小切角 */
+.rhine-theme[data-rhine-theme="arknights"] .rhine-icon-button {
+  clip-path: polygon(0 0, calc(100% - var(--ak-cut-sm)) 0, 100% var(--ak-cut-sm), 100% 100%, 0 100%);
+}
+
+/* ================= 链接 / 徽标 ================= */
+.rhine-theme[data-rhine-theme="arknights"] .rhine-link { color: var(--ak-accent); }
+.rhine-theme[data-rhine-theme="arknights"] .rhine-badge {
+  font: 600 11px/20px var(--rhine-mono);
+  letter-spacing: .1em;
+  padding: 2px 10px;
+  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
+}
+
+/* ================= 表单 ================= */
+.rhine-theme[data-rhine-theme="arknights"] .rhine-field>label,
+.rhine-theme[data-rhine-theme="arknights"] .rhine-radio-group legend {
+  font-family: var(--rhine-mono);
+  font-size: 12px;
+  letter-spacing: .1em;
+  color: var(--rhine-muted);
+}
+.rhine-theme[data-rhine-theme="arknights"] .rhine-field input,
+.rhine-theme[data-rhine-theme="arknights"] .rhine-field textarea {
+  background: #101216;
+  border-color: var(--rhine-control);
+}
+.rhine-theme[data-rhine-theme="arknights"] .rhine-field input:focus,
+.rhine-theme[data-rhine-theme="arknights"] .rhine-field textarea:focus {
+  border-color: var(--ak-accent);
+  box-shadow: inset 3px 0 0 var(--ak-accent);
+}
+.rhine-theme[data-rhine-theme="arknights"] .rhine-check input,
+.rhine-theme[data-rhine-theme="arknights"] .rhine-radio-group input { accent-color: var(--ak-accent); }
+
+/* 开关：方轨道方块 */
+.rhine-theme[data-rhine-theme="arknights"] .rhine-switch__track { border-radius: 0; }
+.rhine-theme[data-rhine-theme="arknights"] .rhine-switch__track>span { border-radius: 0; }
+.rhine-theme[data-rhine-theme="arknights"] .rhine-switch input:checked+.rhine-switch__track { background: var(--ak-accent); border-color: var(--ak-accent); }
+.rhine-theme[data-rhine-theme="arknights"] .rhine-switch input:checked+.rhine-switch__track>span { background: var(--ak-accent-ink); }
+
+/* 下拉浮层 */
+.rhine-theme[data-rhine-theme="arknights"] .rhine-combobox__list,
+.rhine-theme[data-rhine-theme="arknights"] .rhine-popover,
+.rhine-theme[data-rhine-theme="arknights"] .rhine-menu {
+  background: var(--rhine-overlay-bg);
+  border-color: var(--rhine-control);
+  border-radius: 0;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, .55);
+}
+.rhine-theme[data-rhine-theme="arknights"] .rhine-combobox__list [role=option][data-active=true],
+.rhine-theme[data-rhine-theme="arknights"] .rhine-combobox__list [role=option][aria-selected=true],
+.rhine-theme[data-rhine-theme="arknights"] .rhine-menu__item[data-highlighted] {
+  background: rgba(255, 212, 0, .12);
+  box-shadow: inset 3px 0 0 var(--ak-accent);
+}
+
+/* ================= 选择卡 ================= */
+.rhine-theme[data-rhine-theme="arknights"] .rhine-selection {
+  background: var(--ak-panel);
+  clip-path: polygon(0 0, calc(100% - var(--ak-cut)) 0, 100% var(--ak-cut), 100% 100%, 0 100%);
+}
+.rhine-theme[data-rhine-theme="arknights"] .rhine-selection:hover:not([data-disabled=true]) {
+  background: var(--ak-panel-hi);
+  border-color: var(--ak-accent);
+}
+.rhine-theme[data-rhine-theme="arknights"] .rhine-selection[data-selected=true] {
+  border-color: var(--ak-accent);
+  background: var(--rhine-selected);
+  box-shadow: inset 0 0 0 1px var(--ak-accent), inset 4px 0 0 var(--ak-accent);
+}
+.rhine-theme[data-rhine-theme="arknights"] .rhine-selection input { accent-color: var(--ak-accent); }
+
+/* ================= Tabs / Segmented ================= */
+.rhine-theme[data-rhine-theme="arknights"] .rhine-tabs__list button { letter-spacing: .05em; }
+.rhine-theme[data-rhine-theme="arknights"] .rhine-tabs__list button[aria-selected=true] { color: var(--ak-accent); }
+.rhine-theme[data-rhine-theme="arknights"] .rhine-tabs__list button::after {
+  background: var(--ak-accent);
+  height: 3px;
+  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
+}
+.rhine-theme[data-rhine-theme="arknights"] .rhine-segmented { border-color: var(--rhine-control); background: #101216; }
+.rhine-theme[data-rhine-theme="arknights"] .rhine-segmented input:checked+span {
+  background: var(--ak-accent);
+  color: var(--ak-accent-ink);
+  font-weight: 600;
+  clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
+}
+
+/* ================= 数据组件 ================= */
+.rhine-theme[data-rhine-theme="arknights"] .rhine-table th {
+  font-family: var(--rhine-mono);
+  letter-spacing: .08em;
+  border-bottom: 2px solid var(--ak-accent);
+}
+.rhine-theme[data-rhine-theme="arknights"] .rhine-metric { font-variant-numeric: tabular-nums; }
+
+/* ================= 反馈 ================= */
+.rhine-theme[data-rhine-theme="arknights"] .rhine-progress__track { height: 8px; background: #1e2126; }
+.rhine-theme[data-rhine-theme="arknights"] .rhine-progress__track>span {
+  background: linear-gradient(90deg, var(--ak-accent), var(--rhine-signal));
+}
+.rhine-theme[data-rhine-theme="arknights"] .rhine-notice,
+.rhine-theme[data-rhine-theme="arknights"] .rhine-toast {
+  border-left-width: 4px;
+  clip-path: polygon(0 0, calc(100% - var(--ak-cut-sm)) 0, 100% var(--ak-cut-sm), 100% 100%, 0 100%);
+}
+.rhine-theme[data-rhine-theme="arknights"] .rhine-skeleton>span[aria-hidden] { background: #22262c; }
+.rhine-theme[data-rhine-theme="arknights"] .rhine-disclosure summary>span { color: var(--ak-accent); }
+
+/* ================= 浮层 / 对话框 ================= */
+.rhine-theme[data-rhine-theme="arknights"] .rhine-overlay { background: var(--rhine-backdrop-bg); }
+.rhine-theme[data-rhine-theme="arknights"] .rhine-dialog {
+  background: var(--rhine-overlay-bg);
+  border-color: var(--rhine-control);
+  border-radius: 0;
+  box-shadow: 0 24px 64px rgba(0, 0, 0, .6);
+  clip-path: polygon(0 0, calc(100% - var(--ak-cut)) 0, 100% var(--ak-cut), 100% 100%, 0 100%);
+}
+.rhine-theme[data-rhine-theme="arknights"] .rhine-tooltip {
+  background: var(--ak-accent);
+  color: var(--ak-accent-ink);
+  border-radius: 0;
+  font-family: var(--rhine-mono);
+  letter-spacing: .04em;
+}
+
+/* ================= 步骤条 ================= */
+.rhine-theme[data-rhine-theme="arknights"] .rhine-steps__number { color: var(--ak-accent); }
+.rhine-theme[data-rhine-theme="arknights"] .rhine-steps li[data-state=current]>div {
+  background: rgba(255, 212, 0, .08);
+  color: var(--ak-accent);
+}
+.rhine-theme[data-rhine-theme="arknights"] .rhine-steps li[data-state=current],
+.rhine-theme[data-rhine-theme="arknights"] .rhine-steps li[data-state=complete] { border-color: var(--ak-accent); }
+
+/* 按钮扫光（滑入的高光层） */
+.rhine-theme[data-rhine-theme="arknights"] .rhine-button {
+  background-image: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%);
+  background-repeat: no-repeat;
+  background-size: 220% 100%;
+  background-position: 130% 0;
+  transition:
+    background-color var(--rhine-duration-hover) var(--rhine-ease-standard),
+    border-color var(--rhine-duration-hover) var(--rhine-ease-standard),
+    transform var(--rhine-duration-press) var(--rhine-ease-standard),
+    background-position 320ms var(--rhine-ease-standard);
+}
+.rhine-theme[data-rhine-theme="arknights"] .rhine-button:hover:not(:disabled):not([aria-disabled=true]) {
+  background-position: -80% 0;
+}
+
+/* 侧栏导航加序号 */
+.rhine-theme[data-rhine-theme="arknights"] .rhine-side-nav ul { counter-reset: ak-nav; }
+.rhine-theme[data-rhine-theme="arknights"] .rhine-side-nav a { counter-increment: ak-nav; }
+.rhine-theme[data-rhine-theme="arknights"] .rhine-side-nav a::before {
+  content: counter(ak-nav, decimal-leading-zero);
+  font: 10px/1 var(--rhine-mono);
+  color: var(--rhine-control);
+  flex: none;
+}
+.rhine-theme[data-rhine-theme="arknights"] .rhine-side-nav a[aria-current=page]::before { color: var(--ak-accent); }
+
+/* 面板悬停：角标点亮 */
+.rhine-theme[data-rhine-theme="arknights"] .rhine-surface { transition: border-color var(--rhine-duration-hover) var(--rhine-ease-standard); }
+.rhine-theme[data-rhine-theme="arknights"] .rhine-surface:hover { border-color: var(--rhine-control); }
+.rhine-theme[data-rhine-theme="arknights"] .rhine-surface:hover::after { opacity: 1; }
+.rhine-theme[data-rhine-theme="arknights"][data-rhine-motion=reduced] .rhine-button {
+  transition: none;
+}

package/components/theme-neo-brutalism.css

@@ -0,0 +1,90 @@
+/* Component theme. Imported automatically by @linhey/rhine-design/theme, or after styles.css for CSS-only usage. */
+.rhine-theme[data-rhine-theme="neo-brutalism"] {
+  color-scheme: light;
+  --rhine-bg: #eaf0f4;
+  --rhine-backdrop-bg: #20232360;
+  --rhine-background-mark: #b7c2cc;
+  --rhine-background-texture: radial-gradient(circle, var(--rhine-background-mark) .8px, transparent .9px);
+  --rhine-background-scale: 14px 14px;
+  --rhine-surface: #fffdf5;
+  --rhine-ink: #202323;
+  --rhine-muted: #59616a;
+  --rhine-line: #b9c1c7;
+  --rhine-control: #202323;
+  --rhine-selected: #fce4cc;
+  --rhine-table-header-bg: #edf0e9;
+  --rhine-table-cell-padding: 16px 12px;
+  --rhine-green: #286043;
+  --rhine-signal: #ff8b3d;
+  --rhine-warning: #854216;
+  --rhine-warning-bg: #fce4cc;
+  --rhine-error: #a02e36;
+  --rhine-error-bg: #fbe1df;
+  --rhine-radius-card: 22px;
+  --rhine-radius-control: 12px;
+  --rhine-weight-heading: 750;
+  --rhine-weight-label: 600;
+  --rhine-text-metric: 36px;
+  --rhine-leading-metric: 44px;
+  --rhine-hard-shadow: 5px 5px 0 var(--rhine-ink);
+  --rhine-tag-green: #dcebd7;
+  --rhine-tag-orange: #fce0c4;
+  --rhine-tag-violet: #e3e0f7;
+  background: var(--rhine-background-texture) 0 0 / var(--rhine-background-scale), var(--rhine-bg);
+}
+
+.rhine-theme[data-rhine-theme="neo-brutalism"] :is(.rhine-surface, .rhine-selection, .rhine-empty, .rhine-fieldset) {
+  border: 2px solid var(--rhine-ink);
+  border-radius: var(--rhine-radius-card);
+  box-shadow: var(--rhine-hard-shadow);
+}
+.rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-button {
+  border: 2px solid var(--rhine-ink);
+  background: var(--rhine-signal);
+  color: var(--rhine-ink);
+  box-shadow: 3px 3px 0 var(--rhine-ink);
+  font-weight: 700;
+  transition: background-color 120ms, transform 80ms, box-shadow 80ms;
+}
+.rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-button--secondary { background: #fff; }
+.rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-button--quiet { background: transparent; border-color: transparent; box-shadow: none; }
+.rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-button--danger { background: var(--rhine-error); color: #fff; }
+.rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-button:hover:not(:disabled):not([aria-disabled=true]) { background: #ffb16e; border-color: var(--rhine-ink); }
+.rhine-theme[data-rhine-theme="neo-brutalism"] :is(.rhine-button--secondary, .rhine-button--quiet):hover:not(:disabled):not([aria-disabled=true]) { background: var(--rhine-selected); }
+.rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-button--danger:hover:not(:disabled):not([aria-disabled=true]) { background: #81262d; }
+.rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-button:active:not(:disabled):not([aria-disabled=true]) { transform: translate(3px, 3px); box-shadow: none; }
+.rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-button:disabled { background: #e1e5e8; color: var(--rhine-muted); border-color: #89929a; box-shadow: none; }
+.rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-button[aria-busy=true] { box-shadow: none; }
+.rhine-theme[data-rhine-theme="neo-brutalism"] :is(button, input, select, textarea, summary, a, [tabindex]):focus-visible { outline: 3px solid var(--rhine-ink); outline-offset: 4px; }
+.rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-tone-success { --rhine-tone-bg: var(--rhine-tag-green); }
+.rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-tone-neutral { --rhine-tone-bg: #e7ebee; }
+.rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-badge { border: 1px solid currentColor; border-radius: 8px; padding: 3px 9px; font-weight: 600; }
+.rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-type-tag { display: inline-flex; padding: 4px 10px; border: 1.5px solid var(--rhine-ink); border-radius: 8px; color: var(--rhine-ink); font-size: 12px; line-height: 20px; font-weight: 700; }
+.rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-type-tag[data-color=green] { background: var(--rhine-tag-green); }
+.rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-type-tag[data-color=orange] { background: var(--rhine-tag-orange); }
+.rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-type-tag[data-color=violet] { background: var(--rhine-tag-violet); }
+.rhine-theme[data-rhine-theme="neo-brutalism"] :is(.rhine-field input, .rhine-field textarea, .rhine-select select, .rhine-segmented) { border-width: 2px; background: #fff; }
+.rhine-theme[data-rhine-theme="neo-brutalism"] :is(.rhine-field input, .rhine-field textarea, .rhine-select select):disabled { background: #e1e5e8; border-color: #89929a; }
+.rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-segmented__option span { border-radius: 8px; }
+.rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-segmented input:checked+span { background: var(--rhine-selected); color: var(--rhine-ink); box-shadow: inset 0 0 0 1px var(--rhine-ink); }
+.rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-selection:hover:not([data-disabled=true]) { background: #fff4e8; border-color: var(--rhine-ink); }
+.rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-selection[data-selected=true] { background: var(--rhine-selected); border-color: var(--rhine-ink); }
+.rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-selection[data-disabled=true] { box-shadow: none; }
+.rhine-theme[data-rhine-theme="neo-brutalism"] :is(.rhine-dialog, .rhine-popover, .rhine-menu, .rhine-combobox__list) { border: 2px solid var(--rhine-ink); border-radius: 18px; box-shadow: var(--rhine-hard-shadow); }
+.rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-dialog { border-radius: 24px; box-shadow: 8px 8px 0 var(--rhine-ink); }
+.rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-drawer { border-radius: 24px 0 0 24px; box-shadow: -5px 0 0 var(--rhine-ink); }
+.rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-overlay { background: var(--rhine-backdrop-bg); backdrop-filter: none; }
+.rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-menu__item { border-radius: 10px; }
+.rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-menu__item[data-highlighted] { box-shadow: inset 0 0 0 2px var(--rhine-ink); }
+.rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-tooltip { border-radius: 8px; }
+.rhine-theme[data-rhine-theme="neo-brutalism"] :is(.rhine-notice, .rhine-toast, .rhine-error-summary) { border: 2px solid var(--rhine-tone, var(--rhine-error)); border-radius: 14px; }
+.rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-table th { color: var(--rhine-ink); background: var(--rhine-table-header-bg); font-weight: 700; border-bottom: 2px solid var(--rhine-ink); }
+.rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-table :is(th, td) { padding: var(--rhine-table-cell-padding); }
+.rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-table td { font-size: 14px; }
+.rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-progress__track { height: 10px; border: 1.5px solid var(--rhine-ink); border-radius: 6px; background: #e7ebee; }
+.rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-progress__track>span { background: var(--rhine-signal); }
+.rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-side-nav a[aria-current=page] { color: var(--rhine-ink); border: 2px solid var(--rhine-ink); background: var(--rhine-selected); font-weight: 700; }
+@media(prefers-reduced-motion:reduce) {
+  .rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-button:active:not(:disabled):not([aria-disabled=true]) { transform: none; }
+}
+.rhine-theme[data-rhine-theme="neo-brutalism"][data-rhine-motion=reduced] .rhine-button:active:not(:disabled):not([aria-disabled=true]) { transform: none; }

package/components/theme.tsx

@@ -0,0 +1,58 @@
+import { createContext, useCallback, useContext, useMemo, useState, type HTMLAttributes } from 'react';
+import './styles.css';
+import './theme-arknights.css';
+import './theme-neo-brutalism.css';
+
+export const themes = [
+  { name: 'rhine', label: '莱茵 · 纸面' },
+  { name: 'arknights', label: '明日方舟 · 战术终端' },
+  { name: 'neo-brutalism', label: '橙趣 · 粗描边' },
+] as const;
+
+export type ThemeName = typeof themes[number]['name'];
+
+export interface ThemeProviderProps extends HTMLAttributes<HTMLDivElement> {
+  defaultTheme?: ThemeName;
+  theme?: ThemeName;
+  onThemeChange?: (theme: ThemeName) => void;
+}
+
+interface ThemeContextValue {
+  theme: ThemeName;
+  setTheme: (theme: ThemeName) => void;
+}
+
+const ThemeContext = createContext<ThemeContextValue | null>(null);
+
+function assertTheme(theme: ThemeName) {
+  if (!themes.some(item => item.name === theme)) {
+    throw new Error(`Unknown Rhine theme: ${String(theme)}. Use a name from themes.`);
+  }
+}
+
+export function ThemeProvider({ theme: controlledTheme, defaultTheme = 'rhine', onThemeChange, className, children, ...rootProps }: ThemeProviderProps) {
+  const parent = useContext(ThemeContext);
+  const [internalTheme, setInternalTheme] = useState(defaultTheme);
+  const theme = controlledTheme ?? internalTheme;
+  const setTheme = useCallback((next: ThemeName) => {
+    assertTheme(next);
+    if (next === theme) return;
+    if (controlledTheme === undefined) setInternalTheme(next);
+    onThemeChange?.(next);
+  }, [controlledTheme, onThemeChange, theme]);
+  const value = useMemo(() => ({ theme, setTheme }), [theme, setTheme]);
+
+  // Descendant CSS selectors cannot isolate nested theme roots yet.
+  if (parent) throw new Error('Nested Rhine ThemeProvider is not supported. Use sibling providers instead.');
+  assertTheme(theme);
+
+  return <ThemeContext.Provider value={value}>
+    <div {...rootProps} className={['rhine-theme', className].filter(Boolean).join(' ')} data-rhine-theme={theme}>{children}</div>
+  </ThemeContext.Provider>;
+}
+
+export function useTheme(): ThemeContextValue {
+  const context = useContext(ThemeContext);
+  if (!context) throw new Error('useTheme must be used within a Rhine ThemeProvider.');
+  return context;
+}

package/components/timeline.css

@@ -0,0 +1,23 @@
+.rhine-timeline { display:grid; gap:var(--rhine-space-1); min-width:0; }
+.rhine-timeline__track { position:relative; height:44px; }
+.rhine-timeline__bars { height:100%; display:flex; gap:1px; align-items:center; }
+.rhine-timeline__bars span { flex:1; min-width:0; height:20px; background:var(--rhine-line); }
+.rhine-timeline [data-status=healthy],.rhine-timeline__legend [data-status=healthy] { background:var(--rhine-health-healthy); }
+.rhine-timeline [data-status=recovered],.rhine-timeline__legend [data-status=recovered] { background:repeating-linear-gradient(135deg,var(--rhine-health-recovered) 0 2px,var(--rhine-surface) 2px 4px); }
+.rhine-timeline [data-status=degraded],.rhine-timeline__legend [data-status=degraded] { background:var(--rhine-health-degraded); }
+.rhine-timeline [data-status=failed],.rhine-timeline__legend [data-status=failed] { background:var(--rhine-health-failed); }
+.rhine-timeline [data-status=unknown],.rhine-timeline__legend [data-status=unknown] { background:var(--rhine-health-unknown); }
+.rhine-timeline__bars [data-selected=true] { height:28px; outline:1px solid var(--rhine-ink); outline-offset:1px; }
+.rhine-timeline__track input { appearance:none; position:absolute; inset:0; margin:0; width:100%; height:44px; background:transparent; cursor:crosshair; color:transparent; }
+.rhine-timeline__track input::-webkit-slider-thumb { appearance:none; width:1px; height:44px; background:transparent; }
+.rhine-timeline__track input::-moz-range-thumb { border:0; width:1px; height:44px; background:transparent; }
+.rhine-timeline__range { display:flex; justify-content:space-between; gap:var(--rhine-space-2); }
+.rhine-timeline__legend { display:flex; flex-wrap:wrap; gap:var(--rhine-space-2) var(--rhine-space-3); margin:0; padding:0; list-style:none; font-size:var(--rhine-text-caption); line-height:var(--rhine-leading-caption); color:var(--rhine-muted); }
+.rhine-timeline__legend li { display:flex; align-items:center; gap:var(--rhine-space-1); }
+.rhine-timeline__legend span { width:8px; height:12px; background:var(--rhine-line); }
+.rhine-timeline--compact { position:relative; gap:0; }
+.rhine-timeline--compact .rhine-timeline__track { height:20px; }
+.rhine-timeline--compact .rhine-timeline__track input { top:-12px; bottom:auto; }
+.rhine-timeline-popover { z-index:50; width:min(360px,calc(100vw - 24px)); max-height:var(--radix-popover-content-available-height); overflow:auto; padding:16px; border:1px solid var(--rhine-control); border-radius:var(--rhine-radius-card); background:var(--rhine-overlay-bg); color:var(--rhine-overlay-text); box-shadow:0 4px 12px #242b2814; overflow-wrap:anywhere; }
+.rhine-timeline-popover .rhine-key-value { margin-block:16px; }
+.rhine-timeline--compact:not(:hover):not(:focus-within) .rhine-timeline__bars [data-selected=true] { height:20px; outline:none; }

package/components/tokens.css

@@ -1,6 +1,25 @@
 /* Canonical tokens for the component library and design previews. */
-:root {
+:root, :where(.rhine-theme[data-rhine-theme]) {
   --rhine-bg: #f2f1e9;
+  --rhine-backdrop-bg: #242b2870;
+  --rhine-content-texture: none;
+  --rhine-sidebar-texture: none;
+  --rhine-surface-texture: none;
+  --rhine-overlay-texture: none;
+  --rhine-media-texture: none;
+  --rhine-background-texture: none;
+  --rhine-background-scale: 24px 24px;
+  --rhine-background-mark: #c5ccc1;
+  --rhine-table-cell-padding: 12px 16px;
+  --rhine-tree-indent: 20px;
+  --rhine-chart-series-3: #477aa8;
+  --rhine-chart-series-4: #8763a7;
+  --rhine-media-canvas: #101214;
+  --rhine-media-overlay: #202428;
+  --rhine-media-text: #f6f7f8;
+  --rhine-media-muted: #bcc3ca;
+  --rhine-media-border: #68727c;
+  --rhine-media-focus: #9bceff;
   --rhine-surface: #fcfcf8;
   --rhine-ink: #242b28;
   --rhine-muted: #59645d;
@@ -11,6 +30,11 @@
   --rhine-signal: #c65c34;
   --rhine-warning: #8a472c;
   --rhine-error: #a13e35;
+  --rhine-health-healthy: #19b88a;
+  --rhine-health-recovered: #42b8c8;
+  --rhine-health-degraded: #efa629;
+  --rhine-health-failed: #ef6464;
+  --rhine-health-unknown: #c5ccd3;
   --rhine-warning-bg: #f4e8dc;
   --rhine-error-bg: #f6e9e4;
   --rhine-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans CJK SC', sans-serif;
@@ -56,3 +80,27 @@
   --rhine-ease-exit: cubic-bezier(.4, 0, 1, 1);
   --rhine-motion-distance: 3px;
 }
+
+/* Resolve palette aliases at CSS-only roots as well as ThemeProvider roots. */
+:root, :where(.rhine-theme) {
+  --rhine-canvas-bg: var(--rhine-bg);
+  --rhine-content-bg: var(--rhine-bg);
+  --rhine-sidebar-bg: var(--rhine-surface);
+  --rhine-surface-bg: var(--rhine-surface);
+  --rhine-overlay-bg: var(--rhine-surface);
+  --rhine-media-bg: var(--rhine-media-canvas);
+  --rhine-canvas-text: var(--rhine-ink);
+  --rhine-content-text: var(--rhine-ink);
+  --rhine-sidebar-text: var(--rhine-ink);
+  --rhine-surface-text: var(--rhine-ink);
+  --rhine-overlay-text: var(--rhine-ink);
+  --rhine-canvas-texture: var(--rhine-background-texture);
+  --rhine-table-header-bg: var(--rhine-surface);
+  --rhine-table-hover-bg: var(--rhine-selected);
+  --rhine-table-selected-bg: var(--rhine-selected);
+  --rhine-field-group-bg: var(--rhine-surface);
+  --rhine-chart-series-1: var(--rhine-green);
+  --rhine-chart-series-2: var(--rhine-signal);
+  --rhine-chart-grid: var(--rhine-line);
+  --rhine-chart-missing: var(--rhine-muted);
+}