@anydigital/bricks 0.26.0-alpha.2 → 0.27.0-alpha.10

package/assets/bricks.css

@@ -3,11 +3,13 @@
  * Framework-agnostic CSS utility helpers
  */
 
-/* Prevent horizontal overflow and scrolling, modern way */
-
-html,
-body {
+html {
+  /* Prevent horizontal overflow and scrolling, modern way */
   overflow-x: clip;
+
+  /* Font smoothing */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 body {
@@ -17,194 +19,58 @@ body {
   /* Make the body a flex container with column layout; main fills space */
   display: flex;
   flex-direction: column;
-}
-
-body  > main {
+  > main {
     flex-grow: 1;
   }
 
-body {
-
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  /* Hyphenation */
   hyphens: auto;
   /* Links and tables are better (safer) without hyphenation */
-}
-
-body a,body table {
+  a,
+  table {
     hyphens: none;
   }
-
-.prose {
-  /* Container-like behavior with auto margins */
-  width: 100%;
-  margin-inline: auto;
-
-  /* Helper for multi-line subtitles */
 }
 
-.prose sub {
-    vertical-align: top;
-    bottom: -0.05em;
-    line-height: 1.1;
-    font-weight: 300;
-    /* Workaround to prevent underline inside links */
-    display: inline-block;
-    width: 100%;
-  }
-
-.prose a {
-    text-underline-offset: 0.1em;
-    text-decoration-thickness: 1px;
-    /* Don't underline links that point to anchors */
-  }
-
-.prose a[href^="#"] {
-      text-decoration: none;
-    }
-
-.prose a:hover {
-      text-decoration-thickness: 2px;
-    }
-
-/* Helper to insert icons in links */
-
-.prose a i {
-      height: 1em;
-      margin-right: 0.25em;
-      font-style: normal;
-      /* Workaround to prevent underline */
-      display: inline-block;
-    }
-
-.prose a i img {
-        height: 100%;
-        margin: 0;
-        position: relative;
-        bottom: -0.15em;
-      }
-
-.prose img:not(:where(.prose > img,.prose > p > img)) {
-      margin-top: 0;
-      margin-bottom: 1em;
-    }
-
-/* Support for markdown anchors */
-
-.prose h1,.prose h2,.prose h3,.prose h4,.prose h5,.prose h6 {
-    position: relative;
-  }
-
-.prose h1 .header-anchor,.prose h2 .header-anchor,.prose h3 .header-anchor,.prose h4 .header-anchor,.prose h5 .header-anchor,.prose h6 .header-anchor {
-      display: none;
-      position: absolute;
-      right: 100%;
-      top: 0;
-      padding-right: 0.2ch;
-      color: rgba(0, 0, 0, 0.25);
-    }
-
-.prose h1:hover .header-anchor,.prose h2:hover .header-anchor,.prose h3:hover .header-anchor,.prose h4:hover .header-anchor,.prose h5:hover .header-anchor,.prose h6:hover .header-anchor {
-        display: block;
-      }
-
-/* Support for `breakout-css` headings */
-
-.prose h1:hover::before {
-        margin-right: 1.5ch !important;
-      }
-
-.prose h2:hover::before {
-        margin-right: 1.5ch !important;
-      }
-
-.prose h3:hover::before {
-        margin-right: 1.5ch !important;
-      }
-
-.prose h4:hover::before {
-        margin-right: 1.5ch !important;
-      }
-
-.prose h5:hover::before {
-        margin-right: 1.5ch !important;
-      }
-
-.prose h6:hover::before {
-        margin-right: 1.5ch !important;
-      }
-
-.prose h1 {
-    margin-bottom: 0.5em !important;
-  }
+pre {
+  padding: 1rem 1.5rem;
+  padding-inline-end: 2rem;
 
-.prose h1 sub {
-      font-size: 50%;
-    }
-
-.prose th,.prose td {
-    /* Keep extra space on the right for better horizontal scroll on mobile */
-    padding: 1rem 2rem 1rem 0;
-    vertical-align: top;
-    /* Workaround to widen particular columns */
+  code {
+    padding: 0;
   }
 
-.prose th hr,.prose td hr {
-      width: 12ch;
-      height: 0;
-      margin: 0;
-      visibility: hidden;
-      /* &.ch16 {
-        width: 16ch;
-      } */
-    }
-
-/* Workaround for headings in Markdown tables */
-
-.prose th big,.prose td big {
-      font-weight: bold;
-    }
-
-.prose th {
-    vertical-align: bottom;
+  @media screen and (max-width: 767px) {
+    border-radius: 0;
   }
+}
 
-.prose blockquote {
-    font-weight: 300;
+small {
+  [role="button"] {
+    padding: 0.75em 1em;
+    font-size: inherit;
   }
-
-.prose blockquote  + figcaption {
-      margin-top: -1em;
-      text-align: right;
-      font-style: italic;
-      font-weight: 300;
-    }
-
-.prose blockquote + figcaption::before {
-        content: "—";
-        margin-right: 0.25em;
-      }
-
-.prose code[data-caption]::before {
-      content: attr(data-caption);
-      display: block;
-      margin-bottom: 1.5em;
-      opacity: 0.5;
-      font-style: italic;
-    }
+}
 
 /* Breakout CSS - Framework-agnostic utilities for breaking out images and figures */
 
-.breakout {
+.breakout,
+.breakout-all {
   /* Prepare the container for breakout elements */
   padding-inline: 10%;
   max-width: calc(10% + 65ch + 10%);
 
-  /* Direct children, or wrapped in <p> for Markdown support */
-}
-
-.breakout > img:not(does-not-exist):not(.does-not-exist),.breakout > picture:not(does-not-exist):not(.does-not-exist),.breakout > figure:not(does-not-exist):not(.does-not-exist),.breakout > canvas:not(does-not-exist):not(.does-not-exist),.breakout > audio:not(does-not-exist):not(.does-not-exist),.breakout > table:not(does-not-exist):not(.does-not-exist),.breakout > pre:not(does-not-exist):not(.does-not-exist),.breakout > iframe:not(does-not-exist):not(.does-not-exist),.breakout > object:not(does-not-exist):not(.does-not-exist),.breakout > embed:not(does-not-exist):not(.does-not-exist),.breakout > video:not(does-not-exist):not(.does-not-exist),.breakout > .breakout-item:not(does-not-exist),.breakout > .breakout-item-max:not(does-not-exist),.breakout > p > img:not(.does-not-exist),.breakout > p > picture:not(.does-not-exist),.breakout > p > figure:not(.does-not-exist),.breakout > p > canvas:not(.does-not-exist),.breakout > p > audio:not(.does-not-exist),.breakout > p > table:not(.does-not-exist),.breakout > p > pre:not(.does-not-exist),.breakout > p > iframe:not(.does-not-exist),.breakout > p > object:not(.does-not-exist),.breakout > p > embed:not(.does-not-exist),.breakout > p > video:not(.does-not-exist),.breakout > p > .breakout-item,.breakout > p > .breakout-item-max {
-      width: -moz-fit-content;
+  /* 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%;
@@ -212,19 +78,16 @@ body a,body table {
       transform: translateX(-50%);
     }
 
-/*** .does-not-exist is used below to avoid !important-s @TODO ***/
-
-/* Respect inline blocks' min-width */
-
-.breakout > img:not(does-not-exist):not(.does-not-exist),.breakout > picture:not(does-not-exist):not(.does-not-exist),.breakout > figure:not(does-not-exist):not(.does-not-exist),.breakout > canvas:not(does-not-exist):not(.does-not-exist),.breakout > audio:not(does-not-exist):not(.does-not-exist),.breakout > p > img:not(.does-not-exist),.breakout > p > picture:not(.does-not-exist),.breakout > p > figure:not(.does-not-exist),.breakout > p > canvas:not(.does-not-exist),.breakout > p > audio:not(.does-not-exist) {
+    /* Respect img/picture min-width */
+    &:is(img, picture) {
       min-width: auto;
     }
 
-/* Tables are so special :( */
-
-.breakout > table:not(does-not-exist):not(.does-not-exist),.breakout > p > table:not(.does-not-exist) {
+    /* <!--section:responsive-table-without-wrapper-->
+    ### Responsive tables without wrapper
+    ```css */
+    &:is(table):not(.does-not-exist) {
       /* Let them full-bleed */
-      width: -moz-max-content;
       width: max-content;
       min-width: auto;
       max-width: 100vw;
@@ -234,149 +97,226 @@ body a,body table {
       display: block;
       overflow-x: auto;
       -webkit-overflow-scrolling: touch; /* Smooth scroll for iOS */
-    }
 
-/* Max out the width of the element */
+      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--> */
 
-.breakout > .breakout-item-max:not(does-not-exist),.breakout > p > .breakout-item-max {
+    /* Max out the width of the element */
+    &.breakout-item-max {
       width: 125% !important; /* !important is for cases like figure.breakout-item-max @TODO */
     }
-
-.breakout-headings h2:not([class]),.breakout-headings h3:not([class]),.breakout-headings h4:not([class]),.breakout-headings hr {
-    position: relative;
   }
+}
 
-.breakout-headings h2:not([class])::before {
-      content: "";
-      display: block;
-      position: absolute;
-      background-color: rgba(0, 0, 0, 5%);
-    }
-
-.breakout-headings h3:not([class])::before {
-      content: "";
-      display: block;
-      position: absolute;
-      background-color: rgba(0, 0, 0, 5%);
-    }
-
-.breakout-headings h4:not([class])::before {
-      content: "";
-      display: block;
-      position: absolute;
-      background-color: rgba(0, 0, 0, 5%);
-    }
+.breakout-all > * {
+  &:is(h2, h3, h4, hr):not([class]) {
+    position: relative;
 
-.breakout-headings hr:not(.does-not-exist)::before {
+    &::before {
       content: "";
       display: block;
       position: absolute;
-      background-color: rgba(0, 0, 0, 5%);
-    }
-
-.breakout-headings h2:not([class])::before {
-      width: 10em;
-      right: 100%;
-      margin-right: 1rem;
-      height: 0.3em;
-      top: 50%;
-      transform: translateY(-50%);
-      background: linear-gradient(
-        to left,
-        rgba(0, 0, 0, 10%),
-        rgba(0, 0, 0, 5%) 10%,
-        transparent
-      );
+      background: gray;
+      opacity: 12.5%;
     }
+  }
 
-.breakout-headings h3:not([class])::before {
+  &:is(h2, h3, h4):not([class]) {
+    &::before {
       width: 10em;
       right: 100%;
-      margin-right: 1rem;
-      height: 0.3em;
+      margin-right: 0.8ch;
+      height: 0.25em;
       top: 50%;
       transform: translateY(-50%);
-      background: linear-gradient(
-        to left,
-        rgba(0, 0, 0, 10%),
-        rgba(0, 0, 0, 5%) 10%,
-        transparent
-      );
+      background: linear-gradient(to left, gray, transparent);
     }
 
-.breakout-headings h4:not([class])::before {
-      width: 10em;
-      right: 100%;
-      margin-right: 1rem;
-      height: 0.3em;
-      top: 50%;
-      transform: translateY(-50%);
-      background: linear-gradient(
-        to left,
-        rgba(0, 0, 0, 10%),
-        rgba(0, 0, 0, 5%) 10%,
-        transparent
-      );
+    /* @TODO: add to tricks-wiki why `*` works here, but `&` fails */
+    &:where(hr + *) {
+      &::before {
+        display: none !important;
+      }
     }
-
-.breakout-headings hr {
-    height: 0.75rem;
+  }
+  &:is(hr) {
+    height: 0.5rem;
     border: none;
     overflow: visible;
-  }
 
-.breakout-headings hr::before {
+    &::before {
       width: 100vw;
       left: 50%;
       height: 100%;
       transform: translateX(-50%);
     }
+  }
+}
+
+/* Prism.js */
+
+.token.treeview-part {
+  .entry-line {
+    width: 2.5em !important;
+    opacity: 25%;
+  }
+  .entry-name:last-child {
+    opacity: 50%;
 
-.breakout-headings hr + h2::before {
+    &::before {
       display: none !important;
     }
+  }
+}
 
-.breakout-headings hr + h3::before {
-      display: none !important;
+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;
     }
+  }
+}
 
-.breakout-headings hr + h4::before {
-      display: none !important;
+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;
     }
+  }
+}
 
-/* after prose to override it */
+/* Helper to handle icons in links */
 
-/* Prism.js */
+a > i {
+  display: inline-block;
+  margin-inline-end: 0.375ch; /* =3/8 */
+  font-style: normal;
+}
 
-.token.treeview-part .entry-line {
-    width: 2.5em !important;
-    opacity: 25%;
+/* 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;
   }
+}
 
-.token.treeview-part .entry-name:last-child {
+code[data-caption] {
+  &::before {
+    content: attr(data-caption);
+    display: block;
+    margin-bottom: 1rem;
     opacity: 50%;
+    font-style: italic;
   }
+}
 
-.token.treeview-part .entry-name:last-child::before {
-      display: none !important;
-    }
+/* Tailwind tricks */
 
-/* Utility classes and fixes */
+.invert {
+  /* Fix the scrollbar color when inverted */
+  ::-webkit-scrollbar {
+    filter: invert(1) !important;
+  }
+}
 
-/* Fix the scrollbar color when inverted */
+/* Jump to top trick */
 
-.invert ::-webkit-scrollbar {
-    filter: invert(1) !important;
+[data-jump-to="top"] {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  padding-top: 50vh;
+  opacity: 25%;
+
+  &:hover {
+    opacity: 75%;
   }
+}
 
-/* Workaround for icon to stay with text in links */
+/* Table of contents */
 
-a.whitespace-nowrap {
-  white-space: nowrap;
-  /* Fix for Safari :( why Safari, why? */
-  display: inline-block;
+[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) " ";
+  }
 }
 
-a.whitespace-nowrap span {
-    white-space: normal;
+.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/assets/bricks.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/bricks.gemspec

@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |spec|
   spec.name          = "bricks"
-  spec.version       = "0.25.0"
+  spec.version       = "0.27.0-alpha.10"
   spec.authors       = ["Anton Staroverov"]
 
   spec.summary       = "Framework-agnostic CSS utilities and single-file Liquid 'bricks' for modern web development."

package/package.json

@@ -1,15 +1,17 @@
 {
   "name": "@anydigital/bricks",
-  "version": "0.26.0-alpha.2",
+  "version": "0.27.0-alpha.10",
   "description": "Framework-agnostic CSS utilities and single-file Liquid 'bricks' for modern web development.",
   "style": "./src/bricks.css",
   "exports": {
     ".": "./src/bricks.css",
+    "./theme": "./src/bricks.theme.css",
+    "./unreduce-motion": "./src/_unreduce-motion.css",
     "./dist": "./dist/bricks.css"
   },
   "scripts": {
-    "postcss": "postcss src/bricks.css -o assets/bricks.css",
-    "build": "npm run postcss -- --no-map && cp ./node_modules/@anydigital/breakout-css/dist/breakout.css ./assets/",
+    "postcss": "postcss './src/!(_)*.css' --dir ./assets",
+    "build": "npm run postcss -- --no-map",
     "start": "npm run postcss -- --watch",
     "prepublishOnly": "npm run build"
   },
@@ -30,10 +32,6 @@
     "postcss": "^8.4.33",
     "postcss-cli": "^11.0.0",
     "postcss-import": "^16.1.1",
-    "postcss-preset-env": "^10.6.0",
     "prettier-plugin-jinja-template": "^2.1.0"
-  },
-  "dependencies": {
-    "@anydigital/breakout-css": "^0.11.1"
   }
 }