T11a loading: spinner in six motions, skeletons that breathe, a shimmer cut to its corners, loading buttons and load more

src/theme/palette.rs

@@ -97,6 +97,7 @@ mixable!(
         info_subtle: Hsla,
         backdrop: Hsla,
         media_backdrop: Hsla,
+        shimmer: Hsla,
         shadow: Hsla,
         tooltip_bg: Hsla,
         tooltip_fg: Hsla,
@@ -146,6 +147,7 @@ impl Palette {
             info_subtle: c(0xebf4ff),
             backdrop: rgba(0x18161352).into(),
             media_backdrop: rgba(0x0e0d0bf8).into(),
+            shimmer: rgba(0xffffffb3).into(),
             shadow: c(0x181613),
             tooltip_bg: c(0x181613),
             tooltip_fg: c(0xfcfaf7),
@@ -212,6 +214,7 @@ impl Palette {
             info_subtle: c(0x19273a),
             backdrop: rgba(0x00000080).into(),
             media_backdrop: rgba(0x000000f8).into(),
+            shimmer: rgba(0xffffff10).into(),
             shadow: c(0x000000),
             tooltip_bg: c(0x373533),
             tooltip_fg: c(0xf3f1f0),

src/theme/tokens.rs

@@ -248,6 +248,11 @@ impl Theme {
         px_to_rems(360.0)
     }
 
+    /// A picture's height in a skeleton card.
+    pub fn skeleton_media(&self) -> Rems {
+        px_to_rems(128.0)
+    }
+
     /// Widest a centered block of prose runs, such as an empty state's help.
     pub fn prose_width(&self) -> Rems {
         px_to_rems(320.0)