@endfield-ui/react 0.0.0-stage → 0.2.0

package/src/styles/utilities.css

@@ -0,0 +1,241 @@
+/*
+ * endfield-ui 母题工具类
+ *
+ * 画法与取值的依据写在 docs/design/elements/ 下的对应文档里。
+ * 这些类只画形状，不带语义：谁能切角、哪里能放斜纹，见各篇文档的"什么时候用"。
+ */
+
+/* ------------------------------------------------------------------ */
+/* 斜纹：6px 方格、-45°。默认是"粗"档，用在跟随主题的条带上：            */
+/* 斜带取墨色的 5%，亮色下约等于实测的黑 5%，暗色下是比底色亮一档的浅带   */
+/* ------------------------------------------------------------------ */
+
+@utility hatch {
+  background-image: repeating-linear-gradient(
+    -45deg,
+    var(--hatch-color, color-mix(in srgb, var(--ef-ink) 5%, transparent)) 0
+      var(--hatch-width, 1.9px),
+    transparent 0 calc(var(--hatch-size) * 0.7071)
+  );
+}
+
+/* "中"档：比底色亮一档的斜带，压在深色控件上（返回按钮） */
+@utility hatch-mid {
+  --hatch-color: var(--color-neutral-700);
+  --hatch-width: 1.5px;
+}
+
+/* "细"档：很细的墨色斜带，填未探索的区域、最高一档的稀有度 */
+@utility hatch-fine {
+  --hatch-color: color-mix(in srgb, var(--ef-ink) 60%, transparent);
+  --hatch-width: 0.75px;
+}
+
+/* ------------------------------------------------------------------ */
+/* 警示条纹：黄黑相间的 45° 宽条。两个主题下相同，只做 6 – 12px 高的窄条 */
+/* ------------------------------------------------------------------ */
+
+@utility hazard {
+  background-image: repeating-linear-gradient(
+    -45deg,
+    var(--color-signal) 0 var(--hazard-size, 12px),
+    var(--color-neutral-900) var(--hazard-size, 12px)
+      calc(var(--hazard-size, 12px) * 2)
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/* 切角：把矩形的一个角沿 45° 切掉。cut-sm / cut-md / cut-lg 定切口大小  */
+/*                                                                    */
+/* clip-path 会把焦点环和阴影一起裁掉。可聚焦的元素不要直接切，          */
+/* 把切角画在伪元素的底上：                                             */
+/*   relative isolate before:absolute before:inset-0 before:-z-10      */
+/*   before:cut-tr before:bg-action                                    */
+/* ------------------------------------------------------------------ */
+
+@utility cut-* {
+  --cut: --value(--cut-*, [length]);
+}
+
+@utility cut-tr {
+  clip-path: polygon(
+    0 0,
+    calc(100% - var(--cut, var(--cut-md))) 0,
+    100% var(--cut, var(--cut-md)),
+    100% 100%,
+    0 100%
+  );
+}
+
+@utility cut-br {
+  clip-path: polygon(
+    0 0,
+    100% 0,
+    100% calc(100% - var(--cut, var(--cut-md))),
+    calc(100% - var(--cut, var(--cut-md))) 100%,
+    0 100%
+  );
+}
+
+@utility cut-diagonal {
+  clip-path: polygon(
+    var(--cut, var(--cut-md)) 0,
+    100% 0,
+    100% calc(100% - var(--cut, var(--cut-md))),
+    calc(100% - var(--cut, var(--cut-md))) 100%,
+    0 100%,
+    0 var(--cut, var(--cut-md))
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/* 斜楔：把左右两条边斜切，文字保持正立。--wedge 是斜边的水平宽度，      */
+/* 所以倾角跟着元素的高度变（40px 高、10px 宽约 14°）。                  */
+/* 和切角一样，可聚焦的元素把它画在伪元素的底上                          */
+/* ------------------------------------------------------------------ */
+
+@utility wedge {
+  clip-path: polygon(
+    var(--wedge, var(--cut-md)) 0,
+    100% 0,
+    calc(100% - var(--wedge, var(--cut-md))) 100%,
+    0 100%
+  );
+}
+
+/* 只斜切左边，右边贴边 */
+@utility wedge-l {
+  clip-path: polygon(var(--wedge, var(--cut-md)) 0, 100% 0, 100% 100%, 0 100%);
+}
+
+/* 只斜切右边，左边贴边 */
+@utility wedge-r {
+  clip-path: polygon(
+    0 0,
+    100% 0,
+    calc(100% - var(--wedge, var(--cut-md))) 100%,
+    0 100%
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/* 角括号：四角各一个 L 形短线，用 ::after 的背景画，不占用 outline。    */
+/* 宿主要自己定位（relative 或 absolute）；括号画在宿主之外，            */
+/* 所以宿主和它的裁切祖先之间要留出 --bracket-offset 的空隙             */
+/* ------------------------------------------------------------------ */
+
+@utility corner-brackets {
+  &::after {
+    --_c: var(--bracket-color, var(--ef-ink));
+    --_w: var(--bracket-width, 2px);
+    --_l: var(--bracket-arm, 12px);
+    content: "";
+    position: absolute;
+    inset: calc(var(--bracket-offset, 4px) * -1);
+    pointer-events: none;
+    background:
+      linear-gradient(var(--_c) 0 0) 0 0 / var(--_l) var(--_w),
+      linear-gradient(var(--_c) 0 0) 0 0 / var(--_w) var(--_l),
+      linear-gradient(var(--_c) 0 0) 100% 0 / var(--_l) var(--_w),
+      linear-gradient(var(--_c) 0 0) 100% 0 / var(--_w) var(--_l),
+      linear-gradient(var(--_c) 0 0) 0 100% / var(--_l) var(--_w),
+      linear-gradient(var(--_c) 0 0) 0 100% / var(--_w) var(--_l),
+      linear-gradient(var(--_c) 0 0) 100% 100% / var(--_l) var(--_w),
+      linear-gradient(var(--_c) 0 0) 100% 100% / var(--_w) var(--_l);
+    background-repeat: no-repeat;
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/* 镂空字：字形透明，只留斜纹或描边。                                    */
+/* 文字颜色已经是透明的，斜纹与描边不能写 currentColor，                 */
+/* 要换颜色就在容器上给 --ghost-ink                                     */
+/* ------------------------------------------------------------------ */
+
+@utility ghost-hatch {
+  color: transparent;
+  background-image: repeating-linear-gradient(
+    -45deg,
+    var(--ghost-ink, var(--ef-ink)) 0 0.75px,
+    transparent 0 calc(var(--hatch-size) * 0.7071)
+  );
+  -webkit-background-clip: text;
+  background-clip: text;
+  opacity: 0.6;
+}
+
+@utility ghost-outline {
+  color: transparent;
+  -webkit-text-stroke: 1.5px
+    var(--ghost-ink, color-mix(in srgb, var(--ef-ink) 22%, transparent));
+}
+
+/* ------------------------------------------------------------------ */
+/* 底纹：点阵、工程网格、等高线。一个视口选一种，画在独立的装饰层上，    */
+/* 不要让它穿过正文。颜色都取墨色的一个比例，跟着主题走                  */
+/* ------------------------------------------------------------------ */
+
+/* 点阵：印刷网点。用在面上（弹窗内容区、空状态的背景），窄条用斜纹 */
+@utility dot-grid {
+  background-image: radial-gradient(
+    circle,
+    var(--dot-color, color-mix(in srgb, var(--ef-ink) 10%, transparent))
+      var(--dot-size, 1px),
+    transparent calc(var(--dot-size, 1px) + 0.5px)
+  );
+  background-size: var(--dot-gap, 16px) var(--dot-gap, 16px);
+}
+
+/* 工程网格：大间距的细线，必须弱于界面里任何一条真实的线 */
+@utility blueprint-grid {
+  --_g: var(--grid-color, color-mix(in srgb, var(--ef-ink) 6%, transparent));
+  background-image:
+    linear-gradient(var(--_g) 1px, transparent 1px),
+    linear-gradient(90deg, var(--_g) 1px, transparent 1px);
+  background-size: var(--grid-gap, 72px) var(--grid-gap, 72px);
+}
+
+/*
+ * 等高线：八圈原创的闭合曲线，圈距不均匀、一侧贴近。贴在右下角被容器截断，
+ * 朝左上方淡出；要放到别的角，把这一层翻转（-scale-x-100、-scale-y-100）。
+ * 曲线是遮罩，颜色由底色给——所以它会把元素自己的内容一起遮掉，
+ * 只能用在空的装饰层上（<Texture variant="contour" /> 就是）
+ */
+@utility contour {
+  background-color: var(
+    --contour-color,
+    color-mix(in srgb, var(--ef-ink) 18%, transparent)
+  );
+  -webkit-mask: var(--contour-image) var(--contour-position, 100% 100%) /
+    var(--contour-size, 30rem) no-repeat;
+  mask: var(--contour-image) var(--contour-position, 100% 100%) /
+    var(--contour-size, 30rem) no-repeat;
+  /* 曲线本体。一行很长，所以放在最后；想换成自己的图就覆盖这个变量 */
+  --contour-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 480' fill='none'%3E%3Cdefs%3E%3CradialGradient id='f' gradientUnits='userSpaceOnUse' cx='480' cy='480' r='480'%3E%3Cstop offset='.5' stop-color='%23000'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath stroke='url(%23f)' vector-effect='non-scaling-stroke' d='M358 338C359 343 356 350 353 355C350 359 344 363 340 365C335 368 330 369 325 370C320 371 315 370 311 369C307 368 302 365 299 362C296 359 293 355 291 351C288 347 285 343 283 338C282 333 280 326 281 320C283 315 288 308 292 306C297 303 305 304 311 305C316 306 320 311 324 313C328 314 331 315 335 317C339 319 345 320 349 323C353 327 357 333 358 338ZM398 333C399 343 394 355 389 364C383 372 373 378 364 383C356 387 347 390 338 391C330 393 320 392 312 389C304 387 297 382 291 376C284 371 280 364 275 357C270 350 265 342 262 333C259 324 255 311 258 301C261 291 269 279 278 274C287 270 302 272 311 274C321 276 328 283 336 286C343 290 348 291 356 295C363 298 374 300 381 306C388 312 397 323 398 333ZM455 328C457 344 448 366 439 380C429 393 412 403 398 411C384 419 369 425 355 427C340 429 324 427 310 422C297 418 285 409 274 400C264 391 256 381 248 369C240 357 232 344 227 328C222 312 215 290 220 274C224 258 238 237 253 229C268 222 293 226 309 229C326 232 338 244 350 249C362 255 371 258 384 263C396 269 414 272 426 283C438 294 453 312 455 328ZM491 323C494 343 482 369 471 386C459 403 437 415 420 424C403 434 385 443 367 445C349 447 329 444 313 439C296 433 281 423 268 412C255 401 244 388 235 373C225 358 216 342 211 323C205 304 196 277 201 256C206 236 223 210 242 201C260 192 291 198 311 202C331 206 346 219 361 226C376 233 387 236 403 243C418 250 439 254 454 268C469 281 488 303 491 323ZM565 318C570 346 552 385 535 409C518 433 487 449 462 463C437 477 412 491 386 495C361 498 332 492 308 484C285 476 263 461 245 445C226 430 209 412 195 391C181 369 170 346 162 318C154 290 140 252 147 222C155 193 179 155 206 142C232 129 278 139 307 145C335 151 356 168 378 178C400 188 416 193 438 203C460 213 489 220 510 239C531 258 561 290 565 318ZM655 313C661 352 636 405 612 438C588 471 545 491 511 511C477 531 443 551 409 556C374 561 334 551 301 539C269 528 240 508 214 487C188 466 164 442 145 413C126 384 113 352 102 313C92 274 71 222 81 182C90 142 124 89 160 72C197 54 260 69 299 77C339 86 367 108 397 120C427 133 449 141 479 155C509 169 547 179 577 205C606 232 649 274 655 313ZM757 308C765 359 730 428 699 471C667 514 610 540 566 566C522 593 479 622 433 628C388 634 335 619 293 604C250 588 213 562 179 535C144 508 110 478 86 440C62 402 47 359 33 308C20 257 -9 189 3 136C15 83 59 13 107 -9C155 -32 238 -9 290 1C342 12 379 38 418 55C457 71 486 82 525 101C564 120 613 133 651 168C690 202 749 257 757 308ZM886 303C897 369 850 460 808 515C766 571 692 604 634 638C577 673 522 715 463 723C404 731 335 708 279 687C224 666 177 634 131 598C86 563 39 525 8 476C-23 427 -39 369 -56 303C-74 237 -114 148 -98 79C-83 10 -26 -83 36 -112C99 -141 209 -108 276 -94C344 -80 391 -49 443 -28C494 -7 533 7 583 32C633 57 694 76 744 121C795 166 876 237 886 303Z'/%3E%3C/svg%3E");
+}
+
+/* ------------------------------------------------------------------ */
+/* 竖条变箭头：同一个元素的 clip-path 在两个四点多边形之间过渡           */
+/* 顶点数必须相同才能插值，所以三角形写成四个点（最后两个重合）          */
+/* ------------------------------------------------------------------ */
+
+@utility marker-bar {
+  clip-path: polygon(
+    0 0,
+    var(--marker-bar, 3px) 0,
+    var(--marker-bar, 3px) 100%,
+    0 100%
+  );
+}
+
+@utility marker-arrow {
+  clip-path: polygon(0 20%, 100% 50%, 0 80%, 0 80%);
+}
+
+/* ------------------------------------------------------------------ */
+/* 菱形表单符号（方案 B）的开关：和主题一样写在 <html> 或局部容器上，   */
+/*   <html data-choice="diamond">                                      */
+/* 复选与单选一起换成菱形。全库选一套，不要和方形混用                    */
+/* ------------------------------------------------------------------ */
+
+@custom-variant choice-diamond (&:where([data-choice="diamond"], [data-choice="diamond"] *));