@excom/valence 0.1.0

package/src/content/table.css

@@ -0,0 +1,144 @@
+/**
+ * Table
+ *
+ * Reboot from normalize.css v8.0.1 (MIT) and sanitize.css v13.0.0 (CC0).
+ */
+
+@define-mixin module-table $table: :--table, $thead: :--thead, $tbody: :--tbody,
+  $tfoot: :--tfoot, $tr: :--tr, $th: :--th, $td: :--td, $th--sort: :--th--sort,
+  $th--sort-asc: :--th--sort-asc, $th--sort-desc: :--th--sort-desc {
+  /* 1. Collapse border-spacing (opinionated)
+     2. Drop table text-indent in Chrome, Edge, Safari */
+  :where($(table)) {
+    width: 100%;
+    border-collapse: collapse; /* 1 */
+    border-spacing: 0;
+    text-indent: 0; /* 2 */
+  }
+
+  $(table) {
+    display: table;
+    margin-bottom: var(--v-typography-spacing-vertical);
+
+    $(thead) {
+      display: table-header-group;
+    }
+
+    $(th) {
+      &:is($(th--sort)) {
+        cursor: pointer;
+        user-select: none;
+        &::after {
+          white-space: pre-wrap;
+          content: "▲\A▼";
+          font-size: 0.6em;
+          opacity: 0.5;
+          margin-left: calc(var(--v-spacing) * 0.5);
+          display: inline-block;
+          vertical-align: text-bottom;
+          text-align: center;
+          width: 20px;
+          line-height: 1em;
+        }
+      }
+      &:is($(th--sort-asc))::after {
+        content: "▲";
+        font-size: 0.85em;
+        vertical-align: baseline;
+      }
+      &:is($(th--sort-desc))::after {
+        content: "▼";
+        font-size: 0.85em;
+        vertical-align: baseline;
+      }
+    }
+
+    $(tbody) {
+      display: table-row-group;
+    }
+
+    $(tfoot) {
+      display: table-footer-group;
+    }
+
+    $(tr) {
+      display: table-row;
+    }
+
+    $(th),
+    $(td) {
+      display: table-cell;
+    }
+
+    /* Corner cell radii */
+    $(tr):first-of-type:not(:is($(thead) ~ *, $(tbody) ~ *) > $(tr)) {
+      > :first-child {
+        border-top-left-radius: var(--v-border-radius);
+      }
+      > :last-child {
+        border-top-right-radius: var(--v-border-radius);
+      }
+    }
+    $(tr):last-of-type:not(*:has(~ $(tfoot), ~ $(tbody)) > $(tr)) {
+      > * {
+        border-bottom-width: 0;
+      }
+      > :first-child {
+        border-bottom-left-radius: var(--v-border-radius);
+      }
+      > :last-child {
+        border-bottom-right-radius: var(--v-border-radius);
+      }
+    }
+    /* Cells */
+    $(th),
+    $(td) {
+      padding: calc(var(--v-spacing) / 2) var(--v-spacing);
+      border-bottom: var(--v-border-width) solid var(--v-table-border-color);
+      background-color: var(--v-background-color);
+      color: var(--v-color);
+      font-weight: var(--v-font-weight);
+      text-align: left;
+      text-align: start;
+    }
+
+    /* Header */
+    $(thead) {
+      $(th),
+      $(td) {
+        border-bottom: var(--v-border-width) solid var(--v-table-border-color);
+        border-top: 0;
+      }
+      /**
+       * Sticky table header row.
+       * @cssclass sticky
+       */
+      &.sticky $(th) {
+        position: sticky;
+        z-index: 2;
+        top: var(--v-table-sticky-top);
+      }
+    }
+
+    /* Footer */
+    $(tfoot) {
+      $(th),
+      $(td) {
+        border-top: var(--v-border-width) solid var(--v-table-border-color);
+        border-bottom: 0;
+      }
+    }
+
+    /**
+     * Alternating row background.
+     * @cssclass striped
+     */
+    /* Striped */
+    &.striped {
+      $(tbody) $(tr):nth-child(odd) $(th),
+      $(tbody) $(tr):nth-child(odd) $(td) {
+        background-color: var(--v-table-row-stripped-background-color);
+      }
+    }
+  }
+}

package/src/content/typography.css

@@ -0,0 +1,218 @@
+/**
+ * Typography
+ *
+ * Reboot from normalize.css v8.0.1 (MIT) and sanitize.css v13.0.0 (CC0).
+ */
+
+@define-mixin module-typography {
+  /* Inline text primitives as bare tags (custom elements rarely emit these) */
+
+  /* Correct font-weight in Chrome, Edge, Safari */
+  :--b,
+  :--strong {
+    display: inline;
+    font-weight: bolder;
+  }
+
+  /* Keep `sub` / `sup` from changing line-height */
+  :--sub,
+  :--sup {
+    display: inline;
+    position: relative;
+    font-size: var(--v-font-size);
+    line-height: 0;
+    vertical-align: baseline;
+  }
+  :--sub {
+    bottom: -0.25em;
+  }
+  :--sup {
+    top: -0.5em;
+  }
+
+  :--small {
+    display: inline;
+    font-size: var(--v-font-size);
+    &:--note {
+      @mixin util-small-note;
+    }
+  }
+
+  :--address,
+  :--blockquote,
+  :--dl,
+  :--form,
+  :--list,
+  :--p,
+  :--pre {
+    display: block;
+  }
+
+  :--address,
+  :--blockquote,
+  :--dl,
+  :--list,
+  :--p,
+  :--pre,
+  :--table {
+    margin-top: 0;
+    margin-bottom: var(--v-typography-spacing-vertical);
+    color: var(--v-color);
+    font-style: normal;
+    font-weight: var(--v-font-weight);
+  }
+
+  /* Headings */
+  :--heading {
+    display: block;
+    margin-top: 0;
+    margin-bottom: var(--v-typography-spacing-vertical);
+    color: var(--v-color);
+    font-weight: var(--v-font-weight);
+    font-size: var(--v-font-size);
+    line-height: var(--v-line-height);
+    font-family: var(--v-font-family);
+  }
+
+  :--h1 {
+    --v-color: var(--v-h1-color);
+  }
+  :--h2 {
+    --v-color: var(--v-h2-color);
+  }
+  :--h3 {
+    --v-color: var(--v-h3-color);
+  }
+  :--h4 {
+    --v-color: var(--v-h4-color);
+  }
+  :--h5 {
+    --v-color: var(--v-h5-color);
+  }
+  :--h6 {
+    --v-color: var(--v-h6-color);
+  }
+
+  /* Margin-top for headings after a block */
+  :where(
+    :--article,
+    :--address,
+    :--blockquote,
+    :--dl,
+    :--figure,
+    :--form,
+    :--list,
+    :--p,
+    :--pre,
+    :--table
+  ) {
+    ~ :--heading {
+      margin-top: var(--v-typography-spacing-top);
+    }
+  }
+
+  /* Paragraphs */
+  :--p {
+    margin-bottom: var(--v-typography-spacing-vertical);
+  }
+
+  /* Heading group */
+  :--hgroup {
+    display: block;
+    margin-bottom: var(--v-typography-spacing-vertical);
+
+    > * {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+
+    > *:not(:first-child):last-child {
+      --v-color: var(--v-muted-color);
+      --v-font-weight: unset;
+      font-size: 1rem;
+    }
+  }
+
+  /* Lists */
+  :--li {
+    display: list-item;
+  }
+
+  :where(:--list) {
+    :--li {
+      margin-bottom: calc(var(--v-typography-spacing-vertical) * 0.25);
+    }
+  }
+
+  /* Nested-list spacing
+     1. Drop nested-list margin in Chrome, Edge, IE, Safari */
+  :where(:--dl, :--list) :where(:--dl, :--list) {
+    margin: 0; /* 1 */
+    margin-top: calc(var(--v-typography-spacing-vertical) * 0.25);
+  }
+
+  /* Tag-specific list aliases (`.tag-ul` / `.tag-ol` aren't in `:--list`) */
+  :--ul,
+  :--ol {
+    display: block;
+  }
+
+  /* Square markers only on `ul`-flavored lists (not generic `:--list`). */
+  :--ul :--li {
+    list-style: square;
+  }
+
+  /* Highlighted text */
+  :--mark {
+    display: inline;
+    padding: 0.125rem 0.25rem;
+    background-color: var(--v-mark-background-color);
+    color: var(--v-mark-color);
+    vertical-align: baseline;
+  }
+
+  /* Blockquote */
+  :--blockquote {
+    margin: var(--v-typography-spacing-vertical) 0;
+    padding: var(--v-spacing);
+    border-right: none;
+    border-left: 0.25rem solid var(--v-blockquote-border-color);
+    border-inline-start: 0.25rem solid var(--v-blockquote-border-color);
+    border-inline-end: none;
+
+    :--footer {
+      margin-top: calc(var(--v-typography-spacing-vertical) * 0.5);
+      color: var(--v-blockquote-footer-color);
+    }
+  }
+
+  /* Abbreviations
+     1. Drop underline in Chrome, Edge, IE, Opera, Safari */
+  :--abbr {
+    display: inline;
+  }
+
+  :--abbr[title] {
+    border-bottom: 1px dotted;
+    text-decoration: none; /* 1 */
+    cursor: help;
+  }
+
+  /* Ins */
+  :--ins {
+    display: inline;
+    color: var(--v-ins-color);
+    text-decoration: none;
+  }
+
+  /* Del */
+  :--del {
+    display: inline;
+    color: var(--v-del-color);
+  }
+
+  /* Selection */
+  ::selection {
+    background-color: var(--v-text-selection-color);
+  }
+}