@linhey/rhine-design 0.2.0 → 0.4.0

package/components/theme-arknights.css

@@ -0,0 +1,301 @@
+/* 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-surface: #14161b;
+  --rhine-ink: #eef0ec;
+  --rhine-muted: #878f96;
+  --rhine-line: #272b31;
+  --rhine-control: #454c54;
+  --rhine-selected: #1c2026;
+  --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(--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-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(--ak-panel-hi);
+  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-table tbody tr:hover { background: rgba(255, 212, 0, .06); }
+.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: rgba(4, 5, 7, .72); }
+.rhine-theme[data-rhine-theme="arknights"] .rhine-dialog {
+  background: var(--ak-panel);
+  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,84 @@
+/* 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-surface: #fffdf5;
+  --rhine-ink: #202323;
+  --rhine-muted: #59616a;
+  --rhine-line: #b9c1c7;
+  --rhine-control: #202323;
+  --rhine-selected: #fce4cc;
+  --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: radial-gradient(circle, #b7c2cc .8px, transparent .9px) 0 0 / 14px 14px, 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: #20232360; 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: #edf0e9; font-weight: 700; border-bottom: 2px solid var(--rhine-ink); }
+.rhine-theme[data-rhine-theme="neo-brutalism"] .rhine-table :is(th, td) { padding: 16px 12px; }
+.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--compact .rhine-timeline__detail { position:absolute; z-index:2; top:100%; inset-inline:0; padding:4px 8px; border:1px solid var(--rhine-line); background:var(--rhine-surface); box-shadow:0 4px 12px #242b2814; pointer-events:none; visibility:hidden; }
+.rhine-timeline--compact:hover .rhine-timeline__detail,.rhine-timeline--compact:focus-within .rhine-timeline__detail { visibility:visible; }
+.rhine-timeline--compact:not(:hover):not(:focus-within) .rhine-timeline__bars [data-selected=true] { height:20px; outline:none; }

package/components/tokens.css

@@ -1,58 +1,63 @@
 /* Canonical tokens for the component library and design previews. */
-:root {
-  --tod-bg: #f2f1e9;
-  --tod-surface: #fcfcf8;
-  --tod-ink: #242b28;
-  --tod-muted: #59645d;
-  --tod-line: #c5ccc1;
-  --tod-control: #78857b;
-  --tod-selected: #e5ece3;
-  --tod-green: #425c4b;
-  --tod-signal: #c65c34;
-  --tod-warning: #8a472c;
-  --tod-error: #a13e35;
-  --tod-warning-bg: #f4e8dc;
-  --tod-error-bg: #f6e9e4;
-  --tod-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans CJK SC', sans-serif;
-  --tod-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
-  --tod-text-title: 30px;
-  --tod-leading-title: 38px;
-  --tod-text-section: 18px;
-  --tod-leading-section: 26px;
-  --tod-text-heading: 16px;
-  --tod-leading-heading: 24px;
-  --tod-text-body: 14px;
-  --tod-leading-body: 22px;
-  --tod-text-caption: 12px;
-  --tod-leading-caption: 18px;
-  --tod-text-metric: 26px;
-  --tod-leading-metric: 32px;
-  --tod-text-metric-compact: 20px;
-  --tod-leading-metric-compact: 26px;
-  --tod-text-code: 12px;
-  --tod-leading-code: 20px;
-  --tod-weight-regular: 400;
-  --tod-weight-label: 500;
-  --tod-weight-heading: 600;
-  --tod-space-1: 4px;
-  --tod-space-2: 8px;
-  --tod-space-3: 12px;
-  --tod-space-4: 16px;
-  --tod-space-6: 24px;
-  --tod-space-8: 32px;
-  --tod-space-12: 48px;
-  --tod-radius-card: 4px;
-  --tod-radius-control: 3px;
-  --tod-duration-hover: 120ms;
-  --tod-duration-press: 80ms;
-  --tod-duration-panel: 180ms;
-  --tod-duration-notice: 200ms;
-  --tod-duration-progress: 240ms;
-  --tod-duration-brand: 240ms;
-  --tod-duration-overlay: 160ms;
-  --tod-duration-loading: 1000ms;
-  --tod-duration-skeleton: 1400ms;
-  --tod-ease-standard: cubic-bezier(.2, 0, 0, 1);
-  --tod-ease-exit: cubic-bezier(.4, 0, 1, 1);
-  --tod-motion-distance: 3px;
+:root, :where(.rhine-theme[data-rhine-theme]) {
+  --rhine-bg: #f2f1e9;
+  --rhine-surface: #fcfcf8;
+  --rhine-ink: #242b28;
+  --rhine-muted: #59645d;
+  --rhine-line: #c5ccc1;
+  --rhine-control: #78857b;
+  --rhine-selected: #e5ece3;
+  --rhine-green: #425c4b;
+  --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;
+  --rhine-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
+  --rhine-text-title: 30px;
+  --rhine-leading-title: 38px;
+  --rhine-text-section: 18px;
+  --rhine-leading-section: 26px;
+  --rhine-text-heading: 16px;
+  --rhine-leading-heading: 24px;
+  --rhine-text-body: 14px;
+  --rhine-leading-body: 22px;
+  --rhine-text-caption: 12px;
+  --rhine-leading-caption: 18px;
+  --rhine-text-metric: 26px;
+  --rhine-leading-metric: 32px;
+  --rhine-text-metric-compact: 20px;
+  --rhine-leading-metric-compact: 26px;
+  --rhine-text-code: 12px;
+  --rhine-leading-code: 20px;
+  --rhine-weight-regular: 400;
+  --rhine-weight-label: 500;
+  --rhine-weight-heading: 600;
+  --rhine-space-1: 4px;
+  --rhine-space-2: 8px;
+  --rhine-space-3: 12px;
+  --rhine-space-4: 16px;
+  --rhine-space-6: 24px;
+  --rhine-space-8: 32px;
+  --rhine-space-12: 48px;
+  --rhine-radius-card: 4px;
+  --rhine-radius-control: 3px;
+  --rhine-duration-hover: 120ms;
+  --rhine-duration-press: 80ms;
+  --rhine-duration-panel: 180ms;
+  --rhine-duration-notice: 200ms;
+  --rhine-duration-progress: 240ms;
+  --rhine-duration-brand: 240ms;
+  --rhine-duration-overlay: 160ms;
+  --rhine-duration-loading: 1000ms;
+  --rhine-duration-skeleton: 1400ms;
+  --rhine-ease-standard: cubic-bezier(.2, 0, 0, 1);
+  --rhine-ease-exit: cubic-bezier(.4, 0, 1, 1);
+  --rhine-motion-distance: 3px;
 }