style: refine borders, shadows, and code-block collapse UI

app/themes/laszlo/assets/css/02-element/code.css

@@ -1,7 +1,5 @@
 @layer element {
   code {
-    --inline-color: light-dark(#005cc5, #79c0ff);
-
     color: var(--color-on-surface);
     border-radius: var(--spacing-1);
     background: var(--color-surface-container-high);
@@ -21,7 +19,6 @@
     padding: var(--spacing-1);
     vertical-align: middle;
     word-break: break-word;
-    color: var(--inline-color);
     font-size: 0.8em;
   }
 }

app/themes/laszlo/assets/css/03-component/theme/hljs.css

@@ -97,9 +97,9 @@
     height: var(--spacing-6);
     cursor: pointer;
     text-indent: -9999px;
-    border: 1px solid var(--color-outline-variant);
+    opacity: 0.4;
     border-radius: var(--spacing-1);
-    background-color: var(--color-primary);
+    background-color: var(--color-on-surface-variant);
     padding-inline: var(--spacing-2);
     mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6.6 11.397c0-2.726 0-4.089.843-4.936c.844-.847 2.201-.847 4.917-.847h2.88c2.715 0 4.073 0 4.916.847c.844.847.844 2.21.844 4.936v4.82c0 2.726 0 4.089-.844 4.936c-.843.847-2.201.847-4.916.847h-2.88c-2.716 0-4.073 0-4.917-.847s-.843-2.21-.843-4.936z'/%3E%3Cpath fill='%23000' d='M4.172 3.172C3 4.343 3 6.229 3 10v2c0 3.771 0 5.657 1.172 6.828c.617.618 1.433.91 2.62 1.048c-.192-.84-.192-1.996-.192-3.66v-4.819c0-2.726 0-4.089.843-4.936c.844-.847 2.201-.847 4.917-.847h2.88c1.652 0 2.8 0 3.638.19c-.138-1.193-.43-2.012-1.05-2.632C16.657 2 14.771 2 11 2S5.343 2 4.172 3.172' opacity='0.5'/%3E%3C/svg%3E");
     mask-repeat: no-repeat;

app/themes/laszlo/assets/css/03-component/ui/prose.css

@@ -147,7 +147,6 @@
       calc(0.2727rem + 0.9697vw),
       var(--spacing-8)
     );
-    border: 1px solid var(--color-outline-variant);
     border-radius: var(--spacing-4);
     background: var(--color-surface-container-low);
     gap: clamp(var(--spacing-2), calc(0.2727rem + 0.9697vw), var(--spacing-8));
@@ -176,6 +175,10 @@
     }
   }
 
+  .prose sup {
+    line-height: 0;
+  }
+
   .prose .footnote-ref {
     text-decoration: none;
     font: var(--typography-body-small);

app/themes/laszlo/components/content/article-card/article-card.css

@@ -10,12 +10,13 @@
     padding: var(--spacing-4);
     transition: all 0.25s cubic-bezier(0.39, 0.58, 0.57, 1);
     color: var(--color-on-surface);
-    border: 1px solid var(--color-outline-variant);
+    border: 1px solid
+      color-mix(in sRGB, var(--color-outline-variant), transparent 50%);
     border-radius: var(--spacing-4);
     outline: var(--default-focus-outline-width) solid transparent;
     background: var(--color-surface-container-lowest);
     gap: var(--spacing-6);
-    box-shadow: color-mix(in sRGB, var(--color-shadow), transparent 90%) 0 2px
+    box-shadow: color-mix(in sRGB, var(--color-shadow), transparent 96%) 0 2px
       8px 0;
 
     &:focus-within,

app/themes/laszlo/components/content/article/article.css

@@ -3,7 +3,8 @@
     --_article-spacing: var(--spacing-8);
     --_article-header-background: var(--color-surface-container-lowest);
     --_article-main-background: var(--color-surface-container-lowest);
-    --article-border: 1px solid var(--color-outline-variant);
+    --article-border: 1px solid
+      color-mix(in sRGB, var(--color-outline-variant), transparent 50%);
     --article-border-radius: var(--spacing-4);
     --article-box-shadow:
       color-mix(in sRGB, var(--color-shadow), transparent 95%) 0px 4px 16px,

app/themes/laszlo/components/ui/breadcrumb-item/breadcrumb-item.css

@@ -18,11 +18,7 @@
       background-color 150ms ease-in-out;
     text-decoration: none;
     color: var(--arrow-color);
-    background-color: color-mix(
-      in sRGB,
-      var(--arrow-background-color),
-      transparent 50%
-    );
+    background-color: var(--arrow-background-color);
     backdrop-filter: blur(var(--spacing-4));
     font: var(--typography-label-large);
     clip-path: polygon(

app/themes/laszlo/components/ui/callout/callout.css

@@ -8,13 +8,11 @@
     flex-direction: column;
     padding: var(--spacing-6);
     color: var(--color-on-surface);
-    border: 2px solid
-      color-mix(in sRGB, var(--_callout-color), var(--color-surface) 30%);
     border-radius: var(--spacing-3);
     background-image: linear-gradient(
       to bottom,
-      color-mix(in sRGB, var(--_callout-color), var(--color-surface) 90%),
-      color-mix(in sRGB, var(--_callout-color), var(--color-surface) 85%)
+      color-mix(in sRGB, var(--_callout-color), var(--color-surface) 85%),
+      color-mix(in sRGB, var(--_callout-color), var(--color-surface) 80%)
     );
     gap: var(--spacing-4);
   }

app/themes/laszlo/components/ui/code-block/code-block.css

@@ -1,6 +1,6 @@
 @layer component.ui {
   .code-block {
-    --collapse-height: 60px;
+    --collapse-height: 100px;
 
     display: flex;
     flex-direction: column;
@@ -23,14 +23,24 @@
       transition: opacity 0.2s;
       pointer-events: none;
       opacity: 0;
-      border-top: 1px solid var(--color-outline-variant);
       border-radius: 0 0 var(--spacing-2) var(--spacing-2);
-      background: color-mix(
-        in sRGB,
-        var(--color-secondary-fixed),
-        transparent 50%
+      background: linear-gradient(
+        to bottom,
+        color-mix(
+            in sRGB,
+            var(--color-surface-container-high),
+            transparent 100%
+          )
+          0%,
+        color-mix(in sRGB, var(--color-surface-container-high), transparent 85%)
+          25%,
+        color-mix(in sRGB, var(--color-surface-container-high), transparent 60%)
+          50%,
+        color-mix(in sRGB, var(--color-surface-container-high), transparent 20%)
+          70%,
+        var(--color-surface-container-high) 80%,
+        var(--color-surface-container-high) 100%
       );
-      backdrop-filter: blur(var(--spacing-2));
     }
   }
 
@@ -63,17 +73,29 @@
   }
 
   .code-block__button {
-    all: unset;
     position: absolute;
     z-index: 10;
     right: 0;
     bottom: 0;
     left: 0;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
     height: var(--collapse-height);
+    padding-bottom: var(--spacing-3);
     cursor: pointer;
-    text-align: center;
-    text-transform: uppercase;
-    color: var(--color-on-secondary-fixed);
-    font: var(--typography-label-large);
+    text-decoration: underline;
+    color: var(--color-on-surface-variant);
+    border-radius: 0 0 var(--spacing-2) var(--spacing-2);
+    font: var(--typography-label-medium);
+    all: unset;
+    text-underline-offset: 3px;
+    &:hover {
+      background-image: linear-gradient(
+        to bottom,
+        transparent,
+        color-mix(in sRGB, var(--color-shadow), transparent 88%)
+      );
+    }
   }
 }

app/themes/laszlo/components/ui/lightbox/lightbox.css

@@ -25,12 +25,7 @@
     right: var(--spacing-2);
     transition: opacity 0.25s linear;
     opacity: 0;
-    color: var(--color-on-tertiary-container);
-    border-radius: var(--spacing-2);
-    background-color: var(--color-tertiary-container);
-    box-shadow:
-      color-mix(in sRGB, var(--color-scrim), transparent 90%) 0 10px 15px -3px,
-      color-mix(in sRGB, var(--color-scrim), transparent 95%) 0 4px 6px -2px;
+    color: var(--color-on-surface);
   }
 
   .lightbox:hover .lightbox__icon {