glasscn-core 0.2.0

package/src/primitives/fallback.css

@@ -0,0 +1,220 @@
+/* ============================================================================
+ * glasscn-core — 降级与无障碍 (Fallback & A11y)
+ * ----------------------------------------------------------------------------
+ * 玻璃拟态的失败模式很危险：backdrop-filter 一旦不生效，
+ * rgba(255,255,255,0.08) 的面板就变成"几乎看不见的框"，
+ * 文字直接压在动画光斑上——不可读。
+ * 所以降级不是锦上添花，是这套库能不能上生产的分界线。
+ *
+ * 降级方向和亮色主题相反：这里要退到**接近不透明的暗色**，
+ * 不是白色。白色 0.94 压在近黑底上会变成一块刺眼的白板。
+ *
+ * 关于这一整层的 !important —— 不是偷懒，是必须的：
+ * 调色用 :root[data-glass-palette="x"]（0,2,0）声明变量，
+ * 会稳压这里的 :root（0,1,0）。不加的话用户一旦切换调色，
+ * 整层无障碍降级就被静默压掉——自动化测不出来，只有真实用户会踩到。
+ * ==========================================================================*/
+
+/* 降级用的实底。跟着调色走，浅色调色里会被覆写成浅底。 */
+:root {
+  --glass-solid: 20 16 12;
+}
+
+:root[data-glass-palette="ocean-frost"] { --glass-solid: 6 16 30; }
+:root[data-glass-palette="soft-bloom"] { --glass-solid: 28 16 32; }
+:root[data-glass-palette="warm-sunset"] { --glass-solid: 30 14 12; }
+:root[data-glass-palette="emerald-mist"] { --glass-solid: 8 28 16; }
+:root[data-glass-palette="liquid-light"] { --glass-solid: 244 240 233; }
+
+/* --- 1. 浏览器不支持 backdrop-filter ------------------------------------- */
+
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .glass-surface,
+  .glass-nav,
+  .glass-menu,
+  [data-slot] {
+    background-color: rgb(var(--glass-solid) / 0.9) !important;
+  }
+}
+
+/* --- 2. 用户要求减少透明度 ------------------------------------------------- */
+/* macOS「减弱透明度」/ Windows 关闭「透明效果」时命中。
+   这是明确的用户意图，优先级高于设计意图。 */
+
+@media (prefers-reduced-transparency: reduce) {
+  :root {
+    --glass-blur-base: 0px !important;
+    --glass-saturate: 100% !important;
+    --glass-shimmer-alpha: 0 !important;
+  }
+
+  .glass-surface,
+  .glass-nav,
+  .glass-menu,
+  [data-slot] {
+    background-color: rgb(var(--glass-solid) / 0.94) !important;
+    -webkit-backdrop-filter: none !important;
+    backdrop-filter: none !important;
+  }
+
+  /* 光斑保留但压暗：完全去掉会让界面变成一块死板，
+     用户要的是"别透"，不是"别有颜色"。 */
+  .glass-backdrop::before,
+  .glass-backdrop::after,
+  .glass-blob-accent::before {
+    opacity: 0.22 !important;
+  }
+}
+
+/* --- 3. 增强对比度 --------------------------------------------------------- */
+
+@media (prefers-contrast: more) {
+  :root {
+    --glass-border-alpha: 0.55 !important;
+    --glass-border-alpha-hover: 0.85 !important;
+    --glass-border-width: 1.5px !important;
+    --glass-shimmer-alpha: 0 !important;
+    --glass-text-secondary: rgb(var(--glass-text-rgb) / 0.92) !important;
+    --glass-text-muted: rgb(var(--glass-text-rgb) / 0.72) !important;
+  }
+
+  .glass-surface,
+  .glass-nav,
+  .glass-menu,
+  [data-slot] {
+    background-color: rgb(var(--glass-solid) / 0.96) !important;
+  }
+}
+
+/* --- 4. 减少动效 ----------------------------------------------------------- */
+/* 技能要求的兜底：所有动画与过渡压到近零，揭示元素立即可见。
+   浮层物化的位移/缩放在此一并归零 -- 减少动效不是没有反馈，
+   面板仍然淡入淡出（opacity 是前庭安全的），只是不再移动。 */
+
+@media (prefers-reduced-motion: reduce) {
+  /* 注意只能对锚定浮层整体归零。居中 modal 的 translate(-50%,-50%)
+     同时承担着定位（shadcn 的 Dialog 靠它居中），整条 transform: none
+     会让面板跳去左上角。对它们只关位移和缩放，保留居中。 */
+  [data-slot="popover-content"],
+  [data-slot="hover-card-content"],
+  [data-slot="dropdown-menu-content"],
+  [data-slot="dropdown-menu-sub-content"],
+  [data-slot="context-menu-content"],
+  [data-slot="menubar-content"],
+  [data-slot="select-content"],
+  [data-slot="tooltip-content"],
+  [data-slot="sheet-content"],
+  [data-slot="drawer-content"] {
+    transform: none !important;
+  }
+
+  [data-slot="dialog-content"],
+  [data-slot="command"] {
+    transform: translate(-50%, -50%) !important;
+  }
+
+  :root {
+    --glass-duration-fast: 0.01ms !important;
+    --glass-duration: 0.01ms !important;
+    --glass-duration-slow: 0.01ms !important;
+    --glass-duration-color: 0.01ms !important;
+    --glass-duration-enter: 0.01ms !important;
+    --glass-duration-exit: 0.01ms !important;
+    --glass-shimmer-duration: 0.01ms !important;
+    --glass-lift: 0px !important;
+    --glass-press: 0px !important;
+    --glass-press-scale: 1 !important;
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+
+  .glass-reveal,
+  .glass-reveal:not(.is-revealed) {
+    opacity: 1 !important;
+    transform: none !important;
+    filter: none !important;
+    animation: none !important;
+  }
+}
+
+/* --- 5. 打印 --------------------------------------------------------------- */
+
+@media print {
+  :root {
+    --glass-blur-base: 0px !important;
+    --glass-text-rgb: 20 16 12 !important;
+  }
+
+  /* 滚动揭示在打印时必须强制可见。
+     打印不产生滚动，scroll-driven 动画的时间轴永远停在起点，
+     整页内容会以 opacity: 0 印出来 —— 一张白纸。
+     同样的坑：打印预览、无头截图服务、部分爬虫。 */
+  .glass-reveal,
+  .glass-reveal:not(.is-revealed) {
+    opacity: 1 !important;
+    transform: none !important;
+    filter: none !important;
+    animation: none !important;
+  }
+
+  .glass-backdrop::before,
+  .glass-backdrop::after,
+  .glass-blob-accent::before {
+    display: none !important;
+  }
+
+  .glass-surface,
+  .glass-nav,
+  .glass-menu,
+  [data-slot] {
+    background: #fff !important;
+    border-color: #999 !important;
+    box-shadow: none !important;
+    -webkit-backdrop-filter: none !important;
+    backdrop-filter: none !important;
+  }
+}
+
+/* --- 6. 性能逃生阀 --------------------------------------------------------- */
+/* backdrop-filter 是逐帧重绘的合成层。长列表 / 低端安卓 / 虚拟滚动里
+   很容易掉帧。任意祖先挂 data-glass-perf="lite"（可由 useGlassPerf 自动挂），
+   整棵子树退回纯色，布局完全不变。 */
+
+[data-glass-perf="lite"] {
+  --glass-blur-base: 0px;
+  --glass-saturate: 100%;
+
+  & .glass-surface,
+  & .glass-nav,
+  & .glass-menu,
+  & [data-slot] {
+    background-color: rgb(var(--glass-solid) / 0.92) !important;
+    -webkit-backdrop-filter: none !important;
+    backdrop-filter: none !important;
+  }
+
+  /* 光斑的 blur(90px) 同样昂贵，一并降级 */
+  & .glass-backdrop::before,
+  & .glass-backdrop::after,
+  & .glass-blob-accent::before {
+    animation: none !important;
+    filter: blur(40px) !important;
+  }
+}
+
+/* --- 7. 文字可读性护栏 ------------------------------------------------------ */
+/* 光斑最亮处压着的正文会被洗掉。极轻的文字阴影成本远低于再加一层遮罩。 */
+
+@utility glass-legible {
+  text-shadow: 0 1px 3px rgb(0 0 0 / 0.45);
+
+  @media (prefers-contrast: more) {
+    text-shadow: none;
+  }
+}

package/src/primitives/interaction.css

@@ -0,0 +1,159 @@
+/* ============================================================================
+ * glasscn-core — 交互原语 (Interaction Primitives)
+ * ----------------------------------------------------------------------------
+ * 规范定的手感：
+ *   hover   translateY(-4px) + 投影变深 + 微光斜扫过表面
+ *   active  translateY(1px) scale(0.97)，80ms 内完成 —— 要"啪"地一下
+ *   focus   描边提亮到 0.30 + 外发光环 + 高光
+ *
+ * 只动 transform 和 opacity。绝不动 backdrop-filter、尺寸或布局属性 ——
+ * 那些每帧都要重新光栅化，一动就掉帧。
+ *
+ * 缓动纪律（对齐 Apple「流体界面」的阻尼比 + 响应）：
+ *   位移 / 投影   阻尼 1.0，240ms -- 悬停不是被甩出去的，不过冲
+ *   颜色反馈      150ms，快一拍 -- 状态确认不需要仪式感
+ *   按压          80ms -- 要"啪"地一下
+ * 过冲曲线（--glass-ease-spring）只保留给带动量的交互：开关拨杆、倾斜回弹。
+ * ==========================================================================*/
+
+@utility glass-interactive {
+  transition-property: transform, box-shadow, background-color, border-color;
+  transition-duration:
+    var(--glass-duration),
+    var(--glass-duration),
+    var(--glass-duration-color),
+    var(--glass-duration-color);
+  transition-timing-function:
+    var(--glass-ease),
+    var(--glass-ease),
+    var(--glass-ease-out),
+    var(--glass-ease-out);
+  will-change: transform;
+
+  &:hover:not(:disabled, [data-disabled], [aria-disabled="true"]) {
+    transform: translateY(calc(var(--glass-lift) * -1));
+    background-color: rgb(var(--glass-white) / var(--glass-fill-hover));
+    border-color: var(--glass-border-hover);
+    box-shadow:
+      var(--glass-specular-size) var(--glass-specular-color) inset,
+      var(--glass-shadow-hover);
+  }
+
+  &:active:not(:disabled, [data-disabled], [aria-disabled="true"]) {
+    transform: translateY(var(--glass-press)) scale(var(--glass-press-scale));
+    transition-duration: var(--glass-duration-fast);
+  }
+
+  &:disabled,
+  &[data-disabled],
+  &[aria-disabled="true"] {
+    opacity: 0.45;
+    cursor: not-allowed;
+    box-shadow: var(--glass-specular-size) var(--glass-specular-color) inset;
+  }
+}
+
+/* --- 微光扫过 (shimmer sweep) --------------------------------------------- */
+/* hover 时一道斜向白光扫过表面。这是"玻璃在光下被转动"的感觉，
+   也是这套设计里最有辨识度的一处动效。
+   用 ::after + overflow 裁切，不占 ::before（那个留给 premium 渐变边）。 */
+
+@keyframes glass-shimmer-sweep {
+  from {
+    transform: translateX(-130%) skewX(var(--glass-shimmer-angle));
+  }
+  to {
+    transform: translateX(230%) skewX(var(--glass-shimmer-angle));
+  }
+}
+
+@utility glass-shimmer {
+  position: relative;
+  overflow: hidden;
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 45%;
+    z-index: 2;
+    pointer-events: none;
+    opacity: 0;
+    background: linear-gradient(
+      90deg,
+      transparent 0%,
+      rgb(var(--glass-white) / var(--glass-shimmer-alpha)) 50%,
+      transparent 100%
+    );
+    transform: translateX(-130%) skewX(var(--glass-shimmer-angle));
+  }
+
+  &:hover::after {
+    opacity: 1;
+    animation: glass-shimmer-sweep var(--glass-shimmer-duration)
+      var(--glass-ease-out);
+  }
+}
+
+/* --- 聚焦环 --------------------------------------------------------------- */
+/* 背景是不可预测的光斑，单层 outline 经常和背景撞色。
+   三层：贴合棱边的亮线 + 强调色细环 + 扩散辉光。 */
+
+@utility glass-ring {
+  &:focus-visible {
+    outline: none;
+    border-color: rgb(var(--glass-white) / 0.3);
+    box-shadow:
+      var(--glass-specular-size) var(--glass-specular-color) inset,
+      0 0 0 1px rgb(var(--glass-white) / 0.3),
+      0 0 0 4px color-mix(in oklab, var(--glass-accent) 35%, transparent),
+      var(--glass-shadow);
+  }
+}
+
+/* --- 列表项高亮 ------------------------------------------------------------ */
+/* 菜单项、选项、命令项。不做位移也不做模糊 —— 一个列表里几十项，
+   每项都起合成层会直接掉帧。只换填充。 */
+
+@utility glass-highlight {
+  transition: background-color var(--glass-duration-fast) var(--glass-ease-out),
+    color var(--glass-duration-fast) var(--glass-ease-out);
+
+  &[data-highlighted],
+  &[data-state="checked"],
+  &:hover:not([data-disabled]) {
+    background-color: rgb(var(--glass-white) / 0.1);
+  }
+}
+
+/* --- 实心 CTA -------------------------------------------------------------- */
+/* 规范明确：主操作是实心强调色，不是玻璃。
+   主按钮做成玻璃会丢失可供性 —— 一屏全是半透明面板时，用户找不到"该点哪个"。 */
+
+@utility glass-cta {
+  background-color: var(--glass-accent);
+  color: var(--glass-accent-fg);
+  border: var(--glass-border-width) solid transparent;
+  border-radius: var(--glass-radius-pill);
+  box-shadow:
+    0 1px 0 0 rgb(var(--glass-white) / 0.25) inset,
+    0 8px 24px -8px color-mix(in oklab, var(--glass-accent) 60%, transparent);
+  transition-property: transform, filter, box-shadow;
+  transition-duration: var(--glass-duration), var(--glass-duration-color), var(--glass-duration);
+  transition-timing-function: var(--glass-ease), var(--glass-ease-out), var(--glass-ease);
+
+  &:hover:not(:disabled, [aria-disabled="true"]) {
+    transform: translateY(-2px);
+    filter: brightness(1.1);
+    box-shadow:
+      0 1px 0 0 rgb(var(--glass-white) / 0.3) inset,
+      0 14px 32px -10px color-mix(in oklab, var(--glass-accent) 70%, transparent);
+  }
+
+  &:active:not(:disabled, [aria-disabled="true"]) {
+    transform: translateY(1px) scale(var(--glass-press-scale));
+    transition-duration: var(--glass-duration-fast);
+  }
+}

package/src/primitives/reveal.css

@@ -0,0 +1,168 @@
+/* ============================================================================
+ * glasscn-core — 揭示与加载态 (Reveal & Loading)
+ * ----------------------------------------------------------------------------
+ * 滚动揭示：卡片从下方 24px 处带着 8px 模糊浮入。
+ * 模糊一起动是关键 —— 单纯的位移淡入看着像贴纸滑进来，
+ * 带模糊才像"一块玻璃从景深里推到眼前"。
+ *
+ * 两种驱动方式：
+ *   1. 纯 CSS —— animation-timeline: view()，新浏览器原生支持，零 JS
+ *   2. JS —— IntersectionObserver 加 .is-revealed 类，
+ *      走 registry 的 use-glass-reveal hook，兼容老浏览器
+ * 两者共用同一套视觉，先声明纯 CSS，JS 那条作为渐进增强。
+ * ==========================================================================*/
+
+@utility glass-reveal {
+  opacity: 0;
+  transform: translateY(24px);
+  filter: blur(8px);
+  transition:
+    opacity var(--glass-duration-slow) var(--glass-ease),
+    transform var(--glass-duration-slow) var(--glass-ease),
+    filter calc(var(--glass-duration-slow) * 0.85) var(--glass-ease-out);
+
+  /* JS 驱动 */
+  &.is-revealed {
+    opacity: 1;
+    transform: none;
+    filter: none;
+  }
+}
+
+/* 纯 CSS 驱动：支持滚动驱动动画的浏览器直接接管，不需要 JS。
+   放在 @supports 里，不支持的浏览器落到上面的 JS 路径。 */
+@supports (animation-timeline: view()) {
+  @keyframes glass-reveal-in {
+    from {
+      opacity: 0;
+      transform: translateY(24px);
+      filter: blur(8px);
+    }
+    to {
+      opacity: 1;
+      transform: none;
+      filter: none;
+    }
+  }
+
+  .glass-reveal:not(.is-revealed) {
+    opacity: 1;
+    transform: none;
+    filter: none;
+    animation: glass-reveal-in linear both;
+    animation-timeline: view();
+    animation-range: entry 5% cover 22%;
+  }
+}
+
+/* 同级错峰：一排卡片依次浮入，而不是齐刷刷一起动 */
+@utility glass-reveal-stagger {
+  & > * {
+    transition-delay: 0ms;
+  }
+  & > *:nth-child(2) { transition-delay: 80ms; }
+  & > *:nth-child(3) { transition-delay: 160ms; }
+  & > *:nth-child(4) { transition-delay: 240ms; }
+  & > *:nth-child(5) { transition-delay: 320ms; }
+  & > *:nth-child(n + 6) { transition-delay: 400ms; }
+}
+
+/* --- 浮层物化 keyframes ---------------------------------------------------- */
+/* 给 bridge/auto.css 用。设计原则见 auto.css 里的注释块；
+   定义放这里是因为 registry 的 css 字段按文件收集 @keyframes，
+   集中放一处，生成器不会漏。 */
+
+/* 遮罩：纯淡入淡出 -- 它是氛围不是面板 */
+@keyframes glass-fade-in {
+  from { opacity: 0; }
+}
+@keyframes glass-fade-out {
+  to { opacity: 0; }
+}
+
+/* 居中 modal：scale 0.96->1，位移只动 2%（y 轴微抬）。
+   基准 translate(-50%,-50%) 是 shadcn Dialog 的居中手段，必须带上。 */
+@keyframes glass-modal-in {
+  from { opacity: 0; transform: translate(-50%, -52%) scale(0.96); }
+}
+@keyframes glass-modal-out {
+  to { opacity: 0; transform: translate(-50%, -52%) scale(0.96); }
+}
+
+/* 锚定浮层：从触发方向 4px + scale 0.98 物化。
+   transform-origin 由 Radix 的 --radix-*-transform-origin 给出，
+   面板从触发按钮那一侧长出来。 */
+@keyframes glass-pop-in {
+  from { opacity: 0; transform: translateY(4px) scale(0.98); }
+}
+@keyframes glass-pop-out {
+  to { opacity: 0; transform: translateY(4px) scale(0.98); }
+}
+
+/* tooltip：更快更轻 */
+@keyframes glass-tip-in {
+  from { opacity: 0; transform: translateY(2px) scale(0.97); }
+}
+@keyframes glass-tip-out {
+  to { opacity: 0; transform: translateY(2px) scale(0.97); }
+}
+
+/* Sheet / Drawer：沿各自方向滑入，对称滑出（从哪来回哪去）。
+   16px 起步 -- 比 modal 的 scale 更"整块"，抽屉是刚性平移不是膨胀。 */
+@keyframes glass-sheet-in-bottom {
+  from { opacity: 0; transform: translateY(16px); }
+}
+@keyframes glass-sheet-out-bottom {
+  to { opacity: 0; transform: translateY(16px); }
+}
+@keyframes glass-sheet-in-top {
+  from { opacity: 0; transform: translateY(-16px); }
+}
+@keyframes glass-sheet-out-top {
+  to { opacity: 0; transform: translateY(-16px); }
+}
+@keyframes glass-sheet-in-left {
+  from { opacity: 0; transform: translateX(-16px); }
+}
+@keyframes glass-sheet-out-left {
+  to { opacity: 0; transform: translateX(-16px); }
+}
+@keyframes glass-sheet-in-right {
+  from { opacity: 0; transform: translateX(16px); }
+}
+@keyframes glass-sheet-out-right {
+  to { opacity: 0; transform: translateX(16px); }
+}
+
+/* 手风琴：高度沿 grid-template-rows 0fr->1fr 展开。
+   不支持 grid rows 插值的浏览器退成两帧 -- 仍然可见，无断裂。 */
+@keyframes glass-accordion-in {
+  from { grid-template-rows: 0fr; opacity: 0.4; }
+}
+@keyframes glass-accordion-out {
+  to { grid-template-rows: 0fr; opacity: 0.4; }
+}
+
+/* --- 骨架屏 --------------------------------------------------------------- */
+/* 异步加载期间保持玻璃质感。用 background-position 扫而不是 transform，
+   这样不需要额外的裁切容器，也不会和 glass-shimmer 的 ::after 打架。 */
+
+@keyframes glass-skeleton-sweep {
+  from { background-position: 200% 0; }
+  to { background-position: -200% 0; }
+}
+
+@utility glass-skeleton {
+  position: relative;
+  overflow: hidden;
+  border-radius: var(--glass-radius-md);
+  background-color: rgb(var(--glass-white) / var(--glass-fill-flat));
+  background-image: linear-gradient(
+    100deg,
+    transparent 20%,
+    rgb(var(--glass-white) / 0.08) 50%,
+    transparent 80%
+  );
+  background-size: 200% 100%;
+  animation: glass-skeleton-sweep 1.8s linear infinite;
+}