@dolanske/vui 1.0.3 → 1.1.0

package/src/style/typography.scss

@@ -1,415 +1,415 @@
-// Base style definitions
-
-// Definitions should be self contained. No element should ever expect there
-// will be more. Anything like margins and actual article spacings should be
-// defined within the <article> element
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  display: block;
-  font-weight: 800;
-}
-
-h1 {
-  font-size: var(--font-size-xxxxl);
-}
-
-h2 {
-  font-size: var(--font-size-xxxl);
-}
-
-h3 {
-  font-size: var(--font-size-xxl);
-}
-
-h4 {
-  font-size: var(--font-size-xl);
-}
-
-h5 {
-  font-size: var(--font-size-l);
-}
-
-h6 {
-  font-size: var(--font-size-m);
-}
-
-figcaption,
-table th,
-table td,
-blockquote,
-p {
-  font-size: var(--font-size-m);
-  line-height: 1.4em;
-  font-weight: 400;
-
-  & > * {
-    line-height: inherit;
-    font-size: inherit;
-  }
-
-  a {
-    color: var(--color-text);
-    text-decoration: underline;
-    text-underline-offset: 3px;
-
-    &:hover {
-      text-decoration: none;
-    }
-  }
-
-  code {
-    font-family: var(--global-font-mono);
-    border-radius: var(--border-radius-s);
-    background-color: var(--color-bg-raised);
-    color: var(--color-text);
-    border: 1px solid var(--color-border);
-    padding: 0px 3px;
-    font-weight: var(--font-weight);
-    font-size: var(--font-size-s);
-  }
-
-  strong,
-  b {
-    font-weight: var(--font-weight-700);
-  }
-
-  i {
-    font-style: italic;
-  }
-
-  u {
-    text-decoration: line-through;
-  }
-}
-
-hr {
-  border-bottom: 1px solid var(--color-border);
-}
-
-span,
-strong,
-p {
-  font-size: var(--font-size-m);
-}
-
-blockquote {
-  display: block;
-  padding-block: var(--space-s);
-  padding-left: var(--space-l);
-  border-left: 3px solid var(--color-border);
-}
-
-pre {
-  font-family: var(--global-font-mono);
-  font-size: var(--font-size-s);
-  font-weight: 300;
-  line-height: 1.2em;
-  padding: var(--space-m);
-  border: 1px solid var(--color-border);
-  border-radius: var(--border-radius-m);
-  white-space: pre-wrap;
-  background-color: var(--color-bg-raised);
-  z-index: 1;
-  position: relative;
-
-  &[data-lang]::after {
-    content: attr(data-lang);
-    font-family: var(--global-font);
-    display: block;
-    position: absolute;
-    font-weight: 500;
-    top: 6px;
-    right: 6px;
-    padding: 5px;
-    text-align: center;
-    text-transform: uppercase;
-    border-radius: var(--border-radius-s);
-    font-size: var(--font-size-xs);
-    color: var(--color-text-light);
-    border: 1px solid var(--color-border);
-    background-color: var(--color-bg-lowered);
-  }
-}
-
-table {
-  text-indent: 0;
-  border-collapse: separate;
-  overflow-x: auto;
-  max-width: 100%;
-
-  // TODO: add alternating row colors
-
-  // TODO add only separating header and body with a border, not between rows
-
-  // &.bg-dark {
-  //   background-color: var(--color-bg-lowered);
-  // }
-
-  // &.bg-light {
-  //   background-color: var(--color-bg-lighter);
-  // }
-
-  // &.no-borders {
-  //   th,
-  //   td {
-  //     border: 0 !important;
-  //   }
-  // }
-
-  thead {
-    th {
-      border-bottom: 1px solid var(--color-border);
-      border-top: 1px solid var(--color-border);
-      white-space: nowrap;
-
-      &:first-child {
-        border-top-left-radius: var(--border-radius-s);
-        border-bottom-left-radius: 0 !important;
-      }
-
-      &:last-child {
-        border-top-right-radius: var(--border-radius-s);
-        border-bottom-right-radius: 0 !important;
-      }
-    }
-  }
-
-  tbody {
-    th {
-      border-radius: 0;
-      border-bottom: 1px solid var(--color-border);
-    }
-
-    &:first-child tr:first-child {
-      td {
-        border-top: 1px solid var(--color-border);
-
-        &:first-child {
-          border-top-left-radius: var(--border-radius-s);
-        }
-
-        &:last-child {
-          border-top-right-radius: var(--border-radius-s);
-        }
-      }
-    }
-  }
-
-  th,
-  td {
-    text-align: left;
-    padding-inline: var(--space-m);
-    padding-block: var(--space-s);
-    min-width: 80px;
-    font-size: var(--font-size-m);
-    line-height: 1.4em;
-    font-variant-numeric: tabular-nums;
-    vertical-align: top;
-
-    &:first-child {
-      border-left: 1px solid var(--color-border);
-    }
-
-    border-right: 1px solid var(--color-border);
-  }
-
-  th {
-    font-weight: 600;
-    font-size: var(--font-size-xs);
-    text-transform: uppercase;
-  }
-
-  tr {
-    td {
-      border-bottom: 1px solid var(--color-border);
-      font-weight: 400;
-    }
-
-    &:first-child {
-      th {
-        border-top: 1px solid var(--color-border);
-
-        &:first-child {
-          border-top-left-radius: var(--border-radius-s);
-        }
-
-        &:last-child {
-          border-top-right-radius: var(--border-radius-s);
-        }
-      }
-    }
-
-    &:last-child {
-      th {
-        &:first-child {
-          border-bottom-left-radius: var(--border-radius-s);
-        }
-
-        &:last-child {
-          border-bottom-right-radius: var(--border-radius-s);
-        }
-      }
-
-      td {
-        &:first-child {
-          border-bottom-left-radius: var(--border-radius-s);
-        }
-
-        &:last-child {
-          border-bottom-right-radius: var(--border-radius-s);
-        }
-      }
-    }
-  }
-}
-
-dl {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(9ch, max-content));
-  column-gap: var(--space-l);
-
-  dt,
-  dd {
-    padding-inline: var(--space-m);
-    margin-bottom: var(--space-l);
-
-    &:last-of-type {
-      margin-bottom: 0;
-    }
-  }
-
-  dt {
-    padding-left: 0;
-    color: var(--color-text-lighter);
-    font-weight: 500;
-    font-size: var(--font-size-m);
-    grid-column-start: 1;
-  }
-
-  dd {
-    color: var(--color-text);
-    font-size: var(--font-size-m);
-  }
-}
-
-article,
-.typeset {
-  width: 100%;
-
-  ol,
-  ul {
-    ol,
-    ul {
-      margin-block: var(--space-l) !important;
-    }
-
-    li {
-      margin-bottom: var(--space-m);
-      font-size: var(--font-size-m);
-      position: relative;
-      padding-left: 28px;
-
-      & > ul {
-        margin-top: 0;
-      }
-
-      &:before {
-        content: '';
-        position: absolute;
-        top: 5px;
-        left: 12px;
-      }
-
-      &:last-of-type {
-        margin: 0;
-      }
-    }
-  }
-
-  ul {
-    li {
-      &:before {
-        width: 6px;
-        height: 6px;
-        border-radius: 100%;
-        background-color: var(--color-text-lighter);
-      }
-    }
-  }
-
-  ol {
-    counter-reset: ol;
-    li {
-      counter-increment: ol;
-
-      &:before {
-        content: counter(ol) '.';
-        top: 0;
-        left: 8px;
-        text-align: left;
-        color: var(--color-text-light);
-      }
-    }
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    &:not(:first-child) {
-      margin-top: var(--space-xxl);
-    }
-
-    margin-bottom: var(--space-xs);
-  }
-
-  span,
-  strong,
-  p {
-    font-size: var(--font-size-m);
-  }
-
-  dl,
-  pre,
-  img,
-  table,
-  ol,
-  ul,
-  blockquote,
-  p {
-    margin-top: var(--space-l);
-
-    // &:first-child {
-    //   margin-top: 0;
-    // }
-  }
-
-  hr {
-    margin-block: var(--space-l);
-  }
-
-  img {
-    border-radius: var(--border-radius-m);
-    overflow: hidden;
-    max-width: 100%;
-  }
-
-  figure {
-    img {
-      margin-bottom: var(--space-xs);
-    }
-
-    figcaption {
-      text-align: center;
-      font-size: var(--font-size-s);
-      color: var(--color-text-lighter);
-    }
-  }
-}
+// Base style definitions
+
+// Definitions should be self contained. No element should ever expect there
+// will be more. Anything like margins and actual article spacings should be
+// defined within the <article> element
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  display: block;
+  font-weight: 800;
+}
+
+h1 {
+  font-size: var(--font-size-xxxxl);
+}
+
+h2 {
+  font-size: var(--font-size-xxxl);
+}
+
+h3 {
+  font-size: var(--font-size-xxl);
+}
+
+h4 {
+  font-size: var(--font-size-xl);
+}
+
+h5 {
+  font-size: var(--font-size-l);
+}
+
+h6 {
+  font-size: var(--font-size-m);
+}
+
+figcaption,
+table th,
+table td,
+blockquote,
+p {
+  font-size: var(--font-size-m);
+  line-height: 1.4em;
+  font-weight: 400;
+
+  & > * {
+    line-height: inherit;
+    font-size: inherit;
+  }
+
+  a {
+    color: var(--color-text);
+    text-decoration: underline;
+    text-underline-offset: 3px;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  code {
+    font-family: var(--global-font-mono);
+    border-radius: var(--border-radius-s);
+    background-color: var(--color-bg-raised);
+    color: var(--color-text);
+    border: 1px solid var(--color-border);
+    padding: 0px 3px;
+    font-weight: var(--font-weight);
+    font-size: var(--font-size-s);
+  }
+
+  strong,
+  b {
+    font-weight: var(--font-weight-700);
+  }
+
+  i {
+    font-style: italic;
+  }
+
+  u {
+    text-decoration: line-through;
+  }
+}
+
+hr {
+  border-bottom: 1px solid var(--color-border);
+}
+
+span,
+strong,
+p {
+  font-size: var(--font-size-m);
+}
+
+blockquote {
+  display: block;
+  padding-block: var(--space-s);
+  padding-left: var(--space-l);
+  border-left: 3px solid var(--color-border);
+}
+
+pre {
+  font-family: var(--global-font-mono);
+  font-size: var(--font-size-s);
+  font-weight: 300;
+  line-height: 1.2em;
+  padding: var(--space-m);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius-m);
+  white-space: pre-wrap;
+  background-color: var(--color-bg-raised);
+  z-index: 1;
+  position: relative;
+
+  &[data-lang]::after {
+    content: attr(data-lang);
+    font-family: var(--global-font);
+    display: block;
+    position: absolute;
+    font-weight: 500;
+    top: 6px;
+    right: 6px;
+    padding: 5px;
+    text-align: center;
+    text-transform: uppercase;
+    border-radius: var(--border-radius-s);
+    font-size: var(--font-size-xs);
+    color: var(--color-text-light);
+    border: 1px solid var(--color-border);
+    background-color: var(--color-bg-lowered);
+  }
+}
+
+table {
+  text-indent: 0;
+  border-collapse: separate;
+  overflow-x: auto;
+  max-width: 100%;
+
+  // TODO: add alternating row colors
+
+  // TODO add only separating header and body with a border, not between rows
+
+  // &.bg-dark {
+  //   background-color: var(--color-bg-lowered);
+  // }
+
+  // &.bg-light {
+  //   background-color: var(--color-bg-lighter);
+  // }
+
+  // &.no-borders {
+  //   th,
+  //   td {
+  //     border: 0 !important;
+  //   }
+  // }
+
+  thead {
+    th {
+      border-bottom: 1px solid var(--color-border);
+      border-top: 1px solid var(--color-border);
+      white-space: nowrap;
+
+      &:first-child {
+        border-top-left-radius: var(--border-radius-s);
+        border-bottom-left-radius: 0 !important;
+      }
+
+      &:last-child {
+        border-top-right-radius: var(--border-radius-s);
+        border-bottom-right-radius: 0 !important;
+      }
+    }
+  }
+
+  tbody {
+    th {
+      border-radius: 0;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    &:first-child tr:first-child {
+      td {
+        border-top: 1px solid var(--color-border);
+
+        &:first-child {
+          border-top-left-radius: var(--border-radius-s);
+        }
+
+        &:last-child {
+          border-top-right-radius: var(--border-radius-s);
+        }
+      }
+    }
+  }
+
+  th,
+  td {
+    text-align: left;
+    padding-inline: var(--space-m);
+    padding-block: var(--space-s);
+    min-width: 80px;
+    font-size: var(--font-size-m);
+    line-height: 1.4em;
+    font-variant-numeric: tabular-nums;
+    vertical-align: top;
+
+    &:first-child {
+      border-left: 1px solid var(--color-border);
+    }
+
+    border-right: 1px solid var(--color-border);
+  }
+
+  th {
+    font-weight: 600;
+    font-size: var(--font-size-xs);
+    text-transform: uppercase;
+  }
+
+  tr {
+    td {
+      border-bottom: 1px solid var(--color-border);
+      font-weight: 400;
+    }
+
+    &:first-child {
+      th {
+        border-top: 1px solid var(--color-border);
+
+        &:first-child {
+          border-top-left-radius: var(--border-radius-s);
+        }
+
+        &:last-child {
+          border-top-right-radius: var(--border-radius-s);
+        }
+      }
+    }
+
+    &:last-child {
+      th {
+        &:first-child {
+          border-bottom-left-radius: var(--border-radius-s);
+        }
+
+        &:last-child {
+          border-bottom-right-radius: var(--border-radius-s);
+        }
+      }
+
+      td {
+        &:first-child {
+          border-bottom-left-radius: var(--border-radius-s);
+        }
+
+        &:last-child {
+          border-bottom-right-radius: var(--border-radius-s);
+        }
+      }
+    }
+  }
+}
+
+dl {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(9ch, max-content));
+  column-gap: var(--space-l);
+
+  dt,
+  dd {
+    padding-inline: var(--space-m);
+    margin-bottom: var(--space-l);
+
+    &:last-of-type {
+      margin-bottom: 0;
+    }
+  }
+
+  dt {
+    padding-left: 0;
+    color: var(--color-text-lighter);
+    font-weight: 500;
+    font-size: var(--font-size-m);
+    grid-column-start: 1;
+  }
+
+  dd {
+    color: var(--color-text);
+    font-size: var(--font-size-m);
+  }
+}
+
+article,
+.typeset {
+  width: 100%;
+
+  ol,
+  ul {
+    ol,
+    ul {
+      margin-block: var(--space-l) !important;
+    }
+
+    li {
+      margin-bottom: var(--space-m);
+      font-size: var(--font-size-m);
+      position: relative;
+      padding-left: 28px;
+
+      & > ul {
+        margin-top: 0;
+      }
+
+      &:before {
+        content: '';
+        position: absolute;
+        top: 5px;
+        left: 12px;
+      }
+
+      &:last-of-type {
+        margin: 0;
+      }
+    }
+  }
+
+  ul {
+    li {
+      &:before {
+        width: 6px;
+        height: 6px;
+        border-radius: 100%;
+        background-color: var(--color-text-lighter);
+      }
+    }
+  }
+
+  ol {
+    counter-reset: ol;
+    li {
+      counter-increment: ol;
+
+      &:before {
+        content: counter(ol) '.';
+        top: 0;
+        left: 8px;
+        text-align: left;
+        color: var(--color-text-light);
+      }
+    }
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    &:not(:first-child) {
+      margin-top: var(--space-xxl);
+    }
+
+    margin-bottom: var(--space-xs);
+  }
+
+  span,
+  strong,
+  p {
+    font-size: var(--font-size-m);
+  }
+
+  dl,
+  pre,
+  img,
+  table,
+  ol,
+  ul,
+  blockquote,
+  p {
+    margin-top: var(--space-l);
+
+    // &:first-child {
+    //   margin-top: 0;
+    // }
+  }
+
+  hr {
+    margin-block: var(--space-l);
+  }
+
+  img {
+    border-radius: var(--border-radius-m);
+    overflow: hidden;
+    max-width: 100%;
+  }
+
+  figure {
+    img {
+      margin-bottom: var(--space-xs);
+    }
+
+    figcaption {
+      text-align: center;
+      font-size: var(--font-size-s);
+      color: var(--color-text-lighter);
+    }
+  }
+}