@anydigital/blades 0.27.0-alpha.10

package/src/_tricks.css

@@ -0,0 +1,136 @@
+table {
+  /* Workaround to widen particular columns @TODO: add to tricks-wiki */
+  th {
+    hr {
+      width: 12ch; /* min ~65/12 = ~5 cols */
+      height: 0;
+      margin: 0;
+      visibility: hidden;
+    }
+  }
+}
+
+table.borderless {
+  th,
+  td {
+    border: none;
+  }
+}
+
+/* Header anchors @TODO: add to tricks-wiki */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  position: relative;
+
+  [data-is-anchor] {
+    visibility: hidden;
+    position: absolute;
+    top: 0;
+    right: 100%;
+    padding-right: 0.2ch;
+    color: silver;
+    text-decoration: none;
+  }
+  &:hover {
+    [data-is-anchor] {
+      visibility: visible;
+    }
+  }
+}
+
+/* Helper to handle icons in links */
+a > i {
+  display: inline-block;
+  margin-inline-end: 0.375ch; /* =3/8 */
+  font-style: normal;
+}
+
+/* Favicons in links @TODO: add to tricks-wiki */
+a[data-has-favicon] {
+  display: inline-block;
+
+  > img {
+    max-height: 1.25em;
+    margin-top: calc(-0.25em / 2);
+    margin-inline-end: 0.375ch; /* =3/8 */
+
+    /* for tw-typography (.prose) */
+    display: inline-block;
+    margin-bottom: 0;
+  }
+}
+
+code[data-caption] {
+  &::before {
+    content: attr(data-caption);
+    display: block;
+    margin-bottom: 1rem;
+    opacity: 50%;
+    font-style: italic;
+  }
+}
+
+/* Tailwind tricks */
+.invert {
+  /* Fix the scrollbar color when inverted */
+  ::-webkit-scrollbar {
+    filter: invert(1) !important;
+  }
+}
+
+/* Jump to top trick */
+[data-jump-to="top"] {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  padding-top: 50vh;
+  opacity: 25%;
+
+  &:hover {
+    opacity: 75%;
+  }
+}
+
+/* Table of contents */
+[data-is-toc] {
+  font-size: 87.5%;
+
+  a {
+    text-decoration: none;
+  }
+  > ul {
+    columns: 30ch auto; /* 2 cols max for 65ch container */
+  }
+}
+
+/* @TODO: to TRICKS */
+.columns {
+  columns: 20ch auto; /* 3 cols max for 65ch container */
+}
+
+/* @TODO: to TRICKS */
+ul,
+ol {
+  li[data-marker]::marker {
+    content: attr(data-marker) " ";
+  }
+}
+
+.faded {
+  opacity: 50%;
+  &:hover {
+    opacity: 87.5%;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    .dark-auto {
+      filter: invert(100%) hue-rotate(180deg);
+    }
+  }
+}

package/src/_unreduce-motion.css

@@ -0,0 +1,12 @@
+/* @TODO: tricks-wiki */
+@utility unreduce-animation-* {
+  @media (prefers-reduced-motion: reduce) {
+    &:not([aria-busy="true"]) {
+      animation-duration: --value([ *]) !important;
+      animation-delay: 0 !important;
+      animation-iteration-count: infinite !important;
+    }
+  }
+}
+
+/* Overrides https://github.com/picocss/pico/blob/main/scss/utilities/_reduce-motion.scss */

package/src/blades.css

@@ -0,0 +1,9 @@
+/**
+ * @anydigital/blades
+ * Framework-agnostic CSS utility helpers
+ */
+
+@import "./_classless";
+@import "./breakout";
+@import "./_prism";
+@import "./_tricks";

package/src/blades.theme.css

@@ -0,0 +1,74 @@
+a {
+  &:not([href^="#"]) {
+    text-decoration-thickness: 1px;
+    &:hover {
+      text-decoration-thickness: 2px;
+    }
+  }
+}
+
+h1 {
+  font-size: 2.5em; /* for pico.css & tw-typography */
+  margin-bottom: 1rem; /* for tw-typography */
+}
+
+hr {
+  margin-block: 2em; /* for pico.css & tw-typography */
+}
+
+ul {
+  ul {
+    font-size: 87.5%;
+  }
+}
+
+pre {
+  small {
+    opacity: 75%;
+    font-weight: lighter;
+  }
+}
+
+table {
+  th {
+    vertical-align: bottom;
+    font-weight: bold;
+  }
+  td {
+    vertical-align: top;
+  }
+  pre {
+    margin-bottom: 0.25rem;
+  }
+}
+
+[data-jump-to="top"] {
+  > i {
+    display: inline-block;
+    padding: 0.25rem;
+    margin: 0.5rem;
+    font-size: 0.75rem;
+    color: black;
+    border-color: black;
+  }
+}
+
+[data-is-toc] {
+  > ul > * > a {
+    font-weight: 500;
+  }
+}
+
+.breakout,
+.breakout-all {
+  > img,
+  > figure {
+    margin-bottom: 1rem;
+  }
+}
+
+.faded {
+  a {
+    text-decoration-style: dotted;
+  }
+}

package/src/breakout.css

@@ -0,0 +1,107 @@
+/* Breakout CSS - Framework-agnostic utilities for breaking out images and figures */
+
+.breakout,
+.breakout-all {
+  /* Prepare the container for breakout elements */
+  padding-inline: 10%;
+  max-width: calc(10% + 65ch + 10%);
+
+  /* Breakout direct children only */
+  & > * {
+    &:is(
+      table,
+      pre,
+      figure, video, iframe, canvas,
+      img, picture,
+      /* Custom utility classes for other tags that need to be broken out */
+      .breakout-item,
+      .breakout-item-max
+    ) {
+      width: fit-content;
+      min-width: 100%;
+      max-width: 125%;
+      margin-left: 50%;
+      transform: translateX(-50%);
+    }
+
+    /* Respect img/picture min-width */
+    &:is(img, picture) {
+      min-width: auto;
+    }
+
+    /* <!--section:responsive-table-without-wrapper-->
+    ### Responsive tables without wrapper
+    ```css */
+    &:is(table):not(.does-not-exist) {
+      /* Let them full-bleed */
+      width: max-content;
+      min-width: auto;
+      max-width: 100vw;
+      padding-inline: 7.5%;
+
+      /* Let them scroll */
+      display: block;
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch; /* Smooth scroll for iOS */
+
+      th,
+      td {
+        padding-inline-start: 0;
+      }
+    }
+    /*```
+    #### Soft-increase selector specificity
+    `&:is(table):not(.does-not-exist)` trick (inspired by postcss) is used here to increase specificity against selectors like `&:is(table, .table)`
+    <!--section--> */
+
+    /* Max out the width of the element */
+    &.breakout-item-max {
+      width: 125% !important; /* !important is for cases like figure.breakout-item-max @TODO */
+    }
+  }
+}
+
+.breakout-all > * {
+  &:is(h2, h3, h4, hr):not([class]) {
+    position: relative;
+
+    &::before {
+      content: "";
+      display: block;
+      position: absolute;
+      background: gray;
+      opacity: 12.5%;
+    }
+  }
+
+  &:is(h2, h3, h4):not([class]) {
+    &::before {
+      width: 10em;
+      right: 100%;
+      margin-right: 0.8ch;
+      height: 0.25em;
+      top: 50%;
+      transform: translateY(-50%);
+      background: linear-gradient(to left, gray, transparent);
+    }
+
+    /* @TODO: add to tricks-wiki why `*` works here, but `&` fails */
+    &:where(hr + *) {
+      &::before {
+        display: none !important;
+      }
+    }
+  }
+  &:is(hr) {
+    height: 0.5rem;
+    border: none;
+    overflow: visible;
+
+    &::before {
+      width: 100vw;
+      left: 50%;
+      height: 100%;
+      transform: translateX(-50%);
+    }
+  }
+}