@icen.ai/ui 0.2.0 → 0.3.0

package/dist/tokens/retro-effects.css

@@ -0,0 +1,264 @@
+/*
+ * @icen.ai/ui — Retro 效果层（按需引入）
+ *
+ * 与 tokens.css 不同，本文件 **不** 进 tokens.css 拼合，需显式 import：
+ *   import '@icen.ai/ui/retro-effects.css';
+ *
+ * 仅在 <html class="style-retro">（或叠加 .dark）激活时生效，对其它风格无副作用：
+ *   - CRT 扫描线 + 暗角 + 颗粒噪点
+ *   - 屏幕闪烁 / 抖动 / 游走扫描光
+ *   - RGB 色散 / 霓虹发光（暗色）
+ *   - 像素边框 / 像素按钮 / 像素分隔线工具类
+ *   - 开机自检 / 打字机光标 / 页面闪白动画
+ *
+ * 所有动画尊重 prefers-reduced-motion：在 reduce 下由 base.css 的全局兜底降为 0.01ms。
+ */
+
+/* ══════════════════════════════════════════════════════════════
+   CRT 显示器效果
+   ══════════════════════════════════════════════════════════════ */
+
+/* CRT 扫描线 overlay */
+.style-retro body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 9999;
+  opacity: 0.14;
+  background:
+    repeating-linear-gradient(
+      0deg,
+      transparent,
+      transparent 2px,
+      rgba(0, 0, 0, 0.35) 2px,
+      rgba(0, 0, 0, 0.35) 4px
+    );
+  mix-blend-mode: multiply;
+}
+
+.style-retro.dark body::before {
+  opacity: 0.22;
+  mix-blend-mode: screen;
+}
+
+/* CRT 暗角 + 轻微曲面 */
+.style-retro body::after {
+  content: "";
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 9998;
+  background:
+    radial-gradient(
+      ellipse at center,
+      transparent 55%,
+      rgba(0, 0, 0, 0.18) 100%
+    );
+  opacity: 0.55;
+}
+
+/* 屏幕闪烁（备用工具类，需要时挂在元素上） */
+@keyframes retro-flicker {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.985; }
+}
+
+/* 屏幕轻微抖动（备用工具类） */
+@keyframes retro-jitter {
+  0%, 100% { transform: translate(0, 0); }
+  25% { transform: translate(0.5px, 0); }
+  50% { transform: translate(-0.5px, 0.5px); }
+  75% { transform: translate(0, -0.5px); }
+}
+
+/* CRT 颗粒噪点 */
+@keyframes retro-grain {
+  0%, 100% { background-position: 0 0; }
+  10% { background-position: -5% -10%; }
+  20% { background-position: -15% 5%; }
+  30% { background-position: 7% -25%; }
+  40% { background-position: -5% 25%; }
+  50% { background-position: -15% 10%; }
+  60% { background-position: 15% 0%; }
+  70% { background-position: 0% 15%; }
+  80% { background-position: 3% 35%; }
+  90% { background-position: -10% 10%; }
+}
+
+.style-retro .retro-crt-grain {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 9997;
+  opacity: 0.06;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
+  animation: retro-grain 0.5s steps(10) infinite;
+}
+
+/* ══════════════════════════════════════════════════════════════
+   全局动画关键帧 + 游走扫描光
+   ══════════════════════════════════════════════════════════════ */
+
+@keyframes retro-blink {
+  0%, 49% { opacity: 1; }
+  50%, 100% { opacity: 0; }
+}
+
+@keyframes retro-scanline-slide {
+  0% { transform: translateY(-100%); }
+  100% { transform: translateY(100vh); }
+}
+
+/* 游走的扫描线（偶尔闪过）—— 挂到 .style-retro 下的显式节点 */
+.style-retro .retro-scanline-beam,
+.retro-scanline-beam {
+  position: fixed;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: linear-gradient(
+    180deg,
+    transparent,
+    color-mix(in srgb, var(--token-accent) 30%, transparent),
+    transparent
+  );
+  pointer-events: none;
+  z-index: 9996;
+  opacity: 0.4;
+  animation: retro-scanline-slide 4s linear infinite;
+}
+
+/* ══════════════════════════════════════════════════════════════
+   开机自检 / 打字机效果
+   ══════════════════════════════════════════════════════════════ */
+
+@keyframes retro-boot-text {
+  0% { opacity: 0; transform: translateY(4px); }
+  10% { opacity: 1; transform: translateY(0); }
+  90% { opacity: 1; transform: translateY(0); }
+  100% { opacity: 0; transform: translateY(-4px); }
+}
+
+.retro-boot-line {
+  opacity: 0;
+  animation: retro-boot-text 0.3s steps(1) forwards;
+}
+
+.retro-boot-line:nth-child(1) { animation-delay: 0.1s; }
+.retro-boot-line:nth-child(2) { animation-delay: 0.25s; }
+.retro-boot-line:nth-child(3) { animation-delay: 0.4s; }
+.retro-boot-line:nth-child(4) { animation-delay: 0.55s; }
+.retro-boot-line:nth-child(5) { animation-delay: 0.7s; }
+
+/* 打字机光标 */
+.retro-cursor::after {
+  content: "█";
+  display: inline-block;
+  margin-left: 2px;
+  color: var(--token-accent);
+  animation: retro-blink 1s step-end infinite;
+}
+
+/* ══════════════════════════════════════════════════════════════
+   RGB 色散 / 霓虹发光（暗色下尤其出彩）
+   ══════════════════════════════════════════════════════════════ */
+
+.style-retro.dark .retro-glow {
+  text-shadow:
+    -1px 0 0 rgba(255, 0, 0, 0.4),
+    1px 0 0 rgba(0, 255, 255, 0.4),
+    0 0 2px var(--token-accent),
+    0 0 8px var(--token-accent);
+}
+
+.style-retro.dark .retro-glow-cold {
+  text-shadow:
+    -1px 0 0 rgba(255, 0, 0, 0.4),
+    1px 0 0 rgba(0, 255, 255, 0.4),
+    0 0 2px var(--token-accent-cold),
+    0 0 8px var(--token-accent-cold);
+}
+
+/* 亮色模式下发光退化为单层硬投影，保持像素感而不刺眼 */
+.style-retro:not(.dark) .retro-glow {
+  text-shadow:
+    1px 1px 0 color-mix(in srgb, var(--token-accent) 30%, transparent);
+}
+
+/* ══════════════════════════════════════════════════════════════
+   像素边框工具类（任意风格下可用，但与 retro 最契合）
+   ══════════════════════════════════════════════════════════════ */
+
+.retro-pixel-border {
+  border: 2px solid var(--token-line);
+  box-shadow:
+    2px 2px 0 var(--token-line-strong),
+    inset 2px 2px 0 var(--token-surface-strong),
+    inset -2px -2px 0 var(--token-line-soft);
+}
+
+.retro-pixel-border-accent {
+  border: 2px solid var(--token-accent);
+  box-shadow:
+    2px 2px 0 var(--token-accent-cold),
+    inset 2px 2px 0 color-mix(in srgb, var(--token-accent) 20%, transparent),
+    inset -2px -2px 0 color-mix(in srgb, var(--token-accent) 40%, transparent);
+}
+
+/* 像素按钮：硬投影 + 按下内移 */
+.retro-pixel-button {
+  position: relative;
+  border: 2px solid var(--token-line-strong);
+  box-shadow:
+    inset -2px -2px 0 var(--token-line-soft),
+    inset 2px 2px 0 var(--token-surface-strong),
+    2px 2px 0 var(--token-line);
+  transition: none;
+}
+
+.retro-pixel-button:active {
+  transform: translate(2px, 2px);
+  box-shadow:
+    inset -2px -2px 0 var(--token-line-soft),
+    inset 2px 2px 0 var(--token-surface-strong);
+}
+
+/* ══════════════════════════════════════════════════════════════
+   选中文字 / 像素分隔线
+   ══════════════════════════════════════════════════════════════ */
+
+.style-retro ::selection {
+  background: var(--token-accent);
+  color: var(--token-on-accent);
+}
+
+.retro-pixel-rule {
+  height: 0;
+  border: 0;
+  border-top: 2px dashed var(--token-line);
+  image-rendering: pixelated;
+}
+
+/* ══════════════════════════════════════════════════════════════
+   页面切换 / 闪白效果
+   ══════════════════════════════════════════════════════════════ */
+
+@keyframes retro-flash {
+  0% { opacity: 0; }
+  10% { opacity: 0.8; }
+  100% { opacity: 0; }
+}
+
+.retro-page-flash {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 10000;
+  background: var(--token-bg);
+  opacity: 0;
+}
+
+.retro-page-flash.active {
+  animation: retro-flash 0.2s steps(3) forwards;
+}

package/dist/tokens/style-profiles.css

@@ -10,6 +10,10 @@
  *   1. 这些类挂在 <html> 上，与 .clay/.piano/.art/.vangogh/.ink/.retro 共存。
  *   2. 只覆盖与“风格”相关的变量：字体、圆角、阴影硬度、抗锯齿、图像渲染。
  *   3. 颜色仍由 preset 决定，保持正交。
+ *
+ * 注：选择器引用的是 base.css 的交互基元（.pressable / .control / .lift），
+ *     而非源项目 opengal 的 .og-* 命名——切换 profile 时这些基元自动获得
+ *     对应风格的几何/边框/阴影形态。
  */
 
 /* ══════════════════════════════════════════════════════════════
@@ -164,6 +168,19 @@
   /* ── 滚动条 ── */
   --token-scrollbar-size: 10px;
 
+  /* ── icen 原语覆盖：retro 的聚焦环/按下/悬停全部像素化 ── */
+  --icen-ring: 2px solid var(--token-accent);
+  --icen-ring-soft: 2px solid var(--token-accent);
+  --icen-ring-error: 2px solid var(--token-error);
+  --icen-ring-success: 2px solid var(--token-success);
+  --icen-press: translate(2px, 2px);
+  --icen-press-soft: translate(1px, 1px);
+  --icen-hover-border: var(--token-accent);
+  --icen-hover-border-strong: var(--token-accent);
+  --icen-control-focus-shadow: inset 2px 2px 0 var(--token-line-soft), inset -1px -1px 0 var(--token-surface-strong);
+  --icen-control-focus-border: var(--token-accent);
+  --icen-control-error-shadow: inset 2px 2px 0 var(--token-line-soft), inset -1px -1px 0 var(--token-surface-strong);
+
   /* ── 渲染 ── */
   image-rendering: pixelated;
   -webkit-font-smoothing: none;
@@ -192,9 +209,13 @@
 
 /* ══════════════════════════════════════════════════════════════
    按钮 / 可点击元素 — 8-bit 像素按钮
+   base.css 的 .pressable / 原生 button / [role=button] / 复位按钮
+   注：聚焦环 / 按下形变 / 悬停边框 由 --icen-* 原语驱动，
+       在 .style-retro 块里已统一覆盖；这里只补"按钮的像素投影"，
+       这是 .pressable::after 高光无法表达的形态。
    ══════════════════════════════════════════════════════════════ */
 
-.style-retro .og-pressable,
+.style-retro .pressable,
 .style-retro button,
 .style-retro [role="button"],
 .style-retro input[type="button"],
@@ -210,42 +231,42 @@
   transition: all var(--duration-fast) var(--ease-out);
 }
 
-.style-retro .og-pressable::after,
+/* 禁用 .pressable::after 的现代渐变高光，retro 用硬投影表达层级 */
+.style-retro .pressable::after,
 .style-retro button::after {
   display: none;
 }
 
-/* 悬停：像素高亮 */
-.style-retro .og-pressable:hover,
-.style-retro button:hover {
-  outline: 2px solid var(--token-accent);
-  outline-offset: -2px;
+/* 悬停：边框高亮（聚焦环由 --icen-ring 接管，不再硬覆盖 outline） */
+.style-retro .pressable:hover,
+.style-retro button:hover,
+.style-retro [role="button"]:hover {
+  border-color: var(--token-accent);
 }
 
-/* 按下：内移 + 阴影消失 */
-.style-retro .og-pressable:active,
+/* 按下：内移 + 阴影消失（位移值由 --icen-press 驱动） */
+.style-retro .pressable:active,
 .style-retro button:active,
 .style-retro [role="button"]:active {
-  transform: translate(2px, 2px);
   box-shadow:
     inset -2px -2px 0 var(--token-line-soft),
     inset 2px 2px 0 var(--token-surface-strong);
 }
 
 /* 禁用状态 */
-.style-retro .og-pressable:where(:disabled, [aria-disabled="true"], [data-disabled]),
+.style-retro .pressable:where(:disabled, [aria-disabled="true"], [data-disabled]),
 .style-retro button:disabled {
-  transform: none;
   box-shadow: none;
   outline: none;
-  opacity: 0.5;
 }
 
 /* ══════════════════════════════════════════════════════════════
    输入框 / 表单元素 — 像素输入框
+   base.css 的 .control 是 wrapper 基元；原生 input/textarea/select 同样适用
+   注：聚焦阴影/边框已由 --icen-control-focus-* 接管，这里只补像素 inset 阴影
    ══════════════════════════════════════════════════════════════ */
 
-.style-retro .og-control,
+.style-retro .control,
 .style-retro input,
 .style-retro textarea,
 .style-retro select {
@@ -258,18 +279,12 @@
   transition: none;
 }
 
-.style-retro .og-control::after {
-  display: none;
-}
-
-/* 被 og-control / vn-editable-field 容器包裹的输入框：自身边框透明化，
+/* 被 .control 容器包裹的输入框：自身边框透明化，
    完全交给外层容器承担像素边框，避免常驻/聚焦状态出现双层内框。 */
-.style-retro .og-control input:not([type="checkbox"]):not([type="radio"]),
-.style-retro .og-control textarea,
-.style-retro .og-control select,
-.style-retro .vn-editable-field input:not([type="checkbox"]):not([type="radio"]),
-.style-retro .vn-editable-field textarea,
-.style-retro .vn-editable-field [contenteditable="true"] {
+.style-retro .control input:not([type="checkbox"]):not([type="radio"]),
+.style-retro .control textarea,
+.style-retro .control select,
+.style-retro .control [contenteditable="true"] {
   border-color: transparent !important;
   box-shadow: none !important;
   background: transparent !important;
@@ -278,22 +293,12 @@
 .style-retro input:hover,
 .style-retro textarea:hover,
 .style-retro select:hover,
-.style-retro .og-control:hover,
-.style-retro .vn-editable-field:hover {
-  border-color: var(--token-accent);
+.style-retro .control:hover {
+  border-color: var(--icen-hover-border);
 }
 
-.style-retro .og-control:focus-within,
-.style-retro .vn-editable-field:focus-within {
-  border-color: var(--token-accent);
-  box-shadow:
-    inset 2px 2px 0 var(--token-line-soft),
-    inset -1px -1px 0 var(--token-surface-strong);
-  outline: 2px solid var(--token-accent);
-  outline-offset: -2px;
-}
-
-/* 文本输入区自身无焦点环，完全交给外层容器 */
+/* 文本输入区自身无焦点环，完全交给外层容器；
+   .control:focus-within 的 box-shadow / border 由 --icen-control-focus-* 自动驱动 */
 .style-retro input:focus,
 .style-retro textarea:focus,
 .style-retro select:focus,
@@ -377,8 +382,8 @@
   border-color: var(--token-line-strong);
 }
 
-/* 禁用平滑悬停提升 */
-.style-retro .og-surface-lift:hover {
+/* 禁用平滑悬停提升；.lift 在 retro 下用硬投影 + 边框色变化表达悬停 */
+.style-retro .lift:hover {
   transform: none;
   box-shadow:
     2px 2px 0 var(--token-accent);
@@ -495,7 +500,7 @@
   box-shadow: var(--token-shadow-card);
 }
 
-/* 非文本元素的硬像素焦点环（已在 retro-effects.css 有基础，这里强化 specificity） */
+/* 非文本元素的硬像素焦点环 */
 .style-retro :focus-visible:not(input):not(textarea):not(select):not([contenteditable="true"]) {
   outline: 2px solid var(--token-accent);
   outline-offset: -2px;
@@ -503,11 +508,6 @@
   border-radius: var(--radius-md);
 }
 
-/* 非输入按钮在 retro 下禁用现代渐变高光（::after 渐变由 .og-pressable 提供） */
-.style-retro .og-pressable::after {
-  display: none;
-}
-
 /* ══════════════════════════════════════════════════════════════
    TERMINAL — 命令行 / CRT 终端（预留，可组合任意 dark preset）
    ══════════════════════════════════════════════════════════════ */