mosaic-headless 1.3.0 → 1.4.0

package/sites/_moksa.py

@@ -72,10 +72,22 @@ def T(tag, text, _t=None, _m=None, **st):
             "style": bp(st, _t, _m) if (st or _t or _m) else None}
 
 
-def box(attr, style, children, hover=None, _t=None, _m=None):
+# The keyboard is a state too.
+#
+# `focus-visible` was verified by sweep_style_states.py to compile to
+# `.M_EL<n>:FOCUS-VISIBLE` - note the UPPERCASE pseudo-class Mosaic emits, which is
+# why grepping a delivered stylesheet for ":focus-visible" finds nothing at all. Of
+# the seven globally usable states this page used exactly one, `hover`, which means
+# every route through it was invisible to anyone not using a mouse.
+FOCUS_RING = {"customStyles": "outline:2px solid rgb(255,90,54);outline-offset:3px;"}
+
+
+def box(attr, style, children, hover=None, focus=None, _t=None, _m=None):
     s = bp(style, _t, _m) or {"&": {"_": {}}}
     if hover:
         s["hover"] = {"_": hover}
+    if focus:
+        s["focus-visible"] = {"_": focus}
     return {"type": "div", "data": {"attrID": attr}, "style": s, "children": children}
 
 
@@ -632,7 +644,8 @@ HEADER = box("mk-shell-top", {}, [
                                              "transitionAll": "160ms ease",
                                              "cursor": "pointer"},
                                        "_m": {"fontSize": "12px"}},
-                                 "hover": {"_": {"color": {"token": "--mk-accent"}}}},
+                                 "hover": {"_": {"color": {"token": "--mk-accent"}}},
+                                 "focus-visible": {"_": FOCUS_RING}},
                        "text": text}
                       for i, (text, href) in enumerate(NAV)
                   ]},
@@ -656,7 +669,8 @@ HEADER = box("mk-shell-top", {}, [
                                                    "color": "rgb(255,90,54)"},
                                         "transitionAll": "180ms ease"}},
                             "hover": {"_": {"backgroundColor": {"token": "--mk-accent"},
-                                            "color": {"token": "--mk-ink"}}}},
+                                            "color": {"token": "--mk-ink"}}},
+                            "focus-visible": {"_": FOCUS_RING}},
                   "text": "START A PROJECT"},
              ]}
         ])]),
@@ -790,6 +804,7 @@ MASTHEAD = section("mk-mast", [wrap("mk-mast-in", [
                                "border-bottom-color:rgb(22,24,28);"},
               fontSize="13px", fontFamily=MONO, letterSpacing="0.1em",
               radius="0px", cursor="pointer", transitionAll="180ms ease")},
+                    "focus-visible": {"_": FOCUS_RING},
                     "hover": {"_": ({"backgroundColor": {"token": "--mk-ink"},
                                      "customStyles": "border:1px solid rgb(22,24,28);"}
                                     if n == 1
@@ -937,7 +952,15 @@ STACK_SEC = section("stack", [wrap("mk-stack-in", [
                     {"display": "grid", "gridCols": "160px 1fr", "columnGap": "24px",
                      "alignItems": "baseline",
                      "paddingTop": "18px", "paddingBottom": "18px",
-                     "customStyles": "border-top:1px solid " + RULE + ";"},
+                     # Each row arrives on its own, staggered by pushing its
+                     # animation-range further down the scroll rather than by a
+                     # delay: a scroll-driven animation has no clock to delay
+                     # against, so the offset has to live in the range.
+                     "customStyles":
+                         "border-top:1px solid " + RULE + ";"
+                         "animation:mk-rise both;animation-timeline:view();"
+                         "animation-range:entry %d%% cover %d%%;"
+                         % (2 + i * 4, 18 + i * 4)},
                     _m={"gridCols": "1fr", "rowGap": "10px",
                         "paddingTop": "16px", "paddingBottom": "16px"},
                     children=[
@@ -1176,7 +1199,8 @@ INDEX = box("mk-index", {}, [
                            "fontFamily": MONO, "fontSize": "10px",
                            "letterSpacing": "0.14em",
                            "transitionAll": "220ms ease"}},
-               "hover": {"_": {"color": {"token": "--mk-ink"}}}},
+               "hover": {"_": {"color": {"token": "--mk-ink"}}},
+               "focus-visible": {"_": FOCUS_RING}},
      "text": "§" + num + "  " + name}
     for i, (num, name, href, _tl) in enumerate(CLAUSES)
 ])

package/sites/moksa.json

@@ -262,6 +262,11 @@
                  "token": "--mk-accent"
                 }
                }
+              },
+              "focus-visible": {
+               "_": {
+                "customStyles": "outline:2px solid rgb(255,90,54);outline-offset:3px;"
+               }
               }
              },
              "text": "服務"
@@ -295,6 +300,11 @@
                  "token": "--mk-accent"
                 }
                }
+              },
+              "focus-visible": {
+               "_": {
+                "customStyles": "outline:2px solid rgb(255,90,54);outline-offset:3px;"
+               }
               }
              },
              "text": "作品"
@@ -328,6 +338,11 @@
                  "token": "--mk-accent"
                 }
                }
+              },
+              "focus-visible": {
+               "_": {
+                "customStyles": "outline:2px solid rgb(255,90,54);outline-offset:3px;"
+               }
               }
              },
              "text": "產品"
@@ -361,6 +376,11 @@
                  "token": "--mk-accent"
                 }
                }
+              },
+              "focus-visible": {
+               "_": {
+                "customStyles": "outline:2px solid rgb(255,90,54);outline-offset:3px;"
+               }
               }
              },
              "text": "聯絡"
@@ -412,6 +432,11 @@
                "token": "--mk-ink"
               }
              }
+            },
+            "focus-visible": {
+             "_": {
+              "customStyles": "outline:2px solid rgb(255,90,54);outline-offset:3px;"
+             }
             }
            },
            "text": "START A PROJECT"
@@ -1081,6 +1106,11 @@
               "token": "--mk-ink"
              }
             }
+           },
+           "focus-visible": {
+            "_": {
+             "customStyles": "outline:2px solid rgb(255,90,54);outline-offset:3px;"
+            }
            }
           },
           "text": "§01  SERVICES"
@@ -1113,6 +1143,11 @@
               "token": "--mk-ink"
              }
             }
+           },
+           "focus-visible": {
+            "_": {
+             "customStyles": "outline:2px solid rgb(255,90,54);outline-offset:3px;"
+            }
            }
           },
           "text": "§02  PROCESS"
@@ -1145,6 +1180,11 @@
               "token": "--mk-ink"
              }
             }
+           },
+           "focus-visible": {
+            "_": {
+             "customStyles": "outline:2px solid rgb(255,90,54);outline-offset:3px;"
+            }
            }
           },
           "text": "§03  WORKS"
@@ -1177,6 +1217,11 @@
               "token": "--mk-ink"
              }
             }
+           },
+           "focus-visible": {
+            "_": {
+             "customStyles": "outline:2px solid rgb(255,90,54);outline-offset:3px;"
+            }
            }
           },
           "text": "§04  STACK"
@@ -1209,6 +1254,11 @@
               "token": "--mk-ink"
              }
             }
+           },
+           "focus-visible": {
+            "_": {
+             "customStyles": "outline:2px solid rgb(255,90,54);outline-offset:3px;"
+            }
            }
           },
           "text": "§05  PRODUCTS"
@@ -1241,6 +1291,11 @@
               "token": "--mk-ink"
              }
             }
+           },
+           "focus-visible": {
+            "_": {
+             "customStyles": "outline:2px solid rgb(255,90,54);outline-offset:3px;"
+            }
            }
           },
           "text": "§06  VOICES"
@@ -1273,6 +1328,11 @@
               "token": "--mk-ink"
              }
             }
+           },
+           "focus-visible": {
+            "_": {
+             "customStyles": "outline:2px solid rgb(255,90,54);outline-offset:3px;"
+            }
            }
           },
           "text": "§07  CONTACT"
@@ -1705,6 +1765,11 @@
                      "transitionAll": "180ms ease"
                     }
                    },
+                   "focus-visible": {
+                    "_": {
+                     "customStyles": "outline:2px solid rgb(255,90,54);outline-offset:3px;"
+                    }
+                   },
                    "hover": {
                     "_": {
                      "backgroundColor": {
@@ -1742,6 +1807,11 @@
                      "transitionAll": "180ms ease"
                     }
                    },
+                   "focus-visible": {
+                    "_": {
+                     "customStyles": "outline:2px solid rgb(255,90,54);outline-offset:3px;"
+                    }
+                   },
                    "hover": {
                     "_": {
                      "color": {
@@ -6315,7 +6385,7 @@
                    "alignItems": "baseline",
                    "paddingTop": "18px",
                    "paddingBottom": "18px",
-                   "customStyles": "border-top:1px solid rgba(22,24,28,.16);"
+                   "customStyles": "border-top:1px solid rgba(22,24,28,.16);animation:mk-rise both;animation-timeline:view();animation-range:entry 2% cover 18%;"
                   },
                   "_m": {
                    "gridCols": "1fr",
@@ -6555,7 +6625,7 @@
                    "alignItems": "baseline",
                    "paddingTop": "18px",
                    "paddingBottom": "18px",
-                   "customStyles": "border-top:1px solid rgba(22,24,28,.16);"
+                   "customStyles": "border-top:1px solid rgba(22,24,28,.16);animation:mk-rise both;animation-timeline:view();animation-range:entry 6% cover 22%;"
                   },
                   "_m": {
                    "gridCols": "1fr",
@@ -6795,7 +6865,7 @@
                    "alignItems": "baseline",
                    "paddingTop": "18px",
                    "paddingBottom": "18px",
-                   "customStyles": "border-top:1px solid rgba(22,24,28,.16);"
+                   "customStyles": "border-top:1px solid rgba(22,24,28,.16);animation:mk-rise both;animation-timeline:view();animation-range:entry 10% cover 26%;"
                   },
                   "_m": {
                    "gridCols": "1fr",
@@ -7035,7 +7105,7 @@
                    "alignItems": "baseline",
                    "paddingTop": "18px",
                    "paddingBottom": "18px",
-                   "customStyles": "border-top:1px solid rgba(22,24,28,.16);"
+                   "customStyles": "border-top:1px solid rgba(22,24,28,.16);animation:mk-rise both;animation-timeline:view();animation-range:entry 14% cover 30%;"
                   },
                   "_m": {
                    "gridCols": "1fr",
@@ -7275,7 +7345,7 @@
                    "alignItems": "baseline",
                    "paddingTop": "18px",
                    "paddingBottom": "18px",
-                   "customStyles": "border-top:1px solid rgba(22,24,28,.16);"
+                   "customStyles": "border-top:1px solid rgba(22,24,28,.16);animation:mk-rise both;animation-timeline:view();animation-range:entry 18% cover 34%;"
                   },
                   "_m": {
                    "gridCols": "1fr",

package/tools/mo.py

@@ -410,13 +410,40 @@ def cmd_css(a):
 
 
 def cmd_states(a):
-    out = [r for r in rows("style-states")
-           if matches(r["state"], a.grep) or matches(r["selector_template"], a.grep)]
-    emit(out, lambda: (
-        table(["state", "selector", "scope"],
-              [[r["state"], r["selector_template"], r["scope"]] for r in out]),
+    """A state joined to whether it was ever seen to compile.
+
+    `style-states.csv` is what the source declares. `--verified` is the view that
+    answers the question you actually have when you are about to write one: a state
+    whose only host takes the whole page down is not a style you can use."""
+    ver = index("style-state-verification", "state")
+    out = []
+    for r in rows("style-states"):
+        if not (matches(r["state"], a.grep)
+                or matches(r["selector_template"], a.grep)):
+            continue
+        v = ver.get(r["state"], {})
+        status = v.get("status", "base state" if r["state"] == "&" else "")
+        if a.verified and status != "COMPILED":
+            continue
+        out.append({"state": r["state"], "selector": r["selector_template"],
+                    "scope": r["scope"], "host": v.get("host", ""),
+                    "status": status, "compiled_to": v.get("evidence", "")})
+
+    def render():
+        table(["state", "scope", "host", "swept", "selector"],
+              [[r["state"], r["scope"], r["host"], r["status"], r["selector"][:50]]
+               for r in out])
+        usable = [r for r in out
+                  if r["scope"] == "global" and r["status"] == "COMPILED"]
         print("\n%d states. `&` is the base state; the breakpoint axis is separate "
-              "(_ / _t / _m)." % len(out))))
+              "(_ / _t / _m)." % len(out))
+        if usable:
+            print("%d go on ANY element: %s"
+                  % (len(usable), ", ".join(r["state"] for r in usable)))
+        print("The pseudo-class is emitted UPPERCASE (`.M_EL9:HOVER`), so grepping a "
+              "stylesheet\nfor `:hover` finds nothing.")
+
+    emit(out, render)
 
 
 def cmd_classes(a):
@@ -654,6 +681,8 @@ def main():
 
     p = add("states", cmd_states, "style states and their selectors")
     p.add_argument("--grep")
+    p.add_argument("--verified", action="store_true",
+                   help="only states measured to compile to their promised selector")
 
     p = add("classes", cmd_classes, "element classes (theme-global)")
     p.add_argument("--grep")