@bccampus/ui-components 0.2.0 → 0.3.0

package/src/styles/typography.css

@@ -18,17 +18,6 @@
     line-height: 1.125em;
   }
 
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    &:not(:first-child) {
-      margin-top: --spacing(4);
-    }
-  }
-
   h1,
   .heading-1 {
     font-size: calc(var(--text-base) * 2.5);
@@ -52,56 +41,16 @@
   p {
     --tw-leading: --spacing(6);
     line-height: --spacing(6);
-
-    &:not(:first-child) {
-      margin-top: --spacing(4);
-    }
-  }
-
-  blockquote {
-    color: var(--primary);
-    font-family: var(--font-sans-accent);
-    font-weight: var(--font-weight-medium);
-
-    margin-inline: --spacing(4);
-    margin-block: --spacing(6);
-
-    & > cite {
-      display: block;
-      text-align: end;
-    }
-
-    @media (width >= 40rem) {
-      margin-inline: --spacing(16);
-    }
-  }
-
-  aside {
-    display: block;
-    float: none;
-    width: var(--container-xs);
-    margin-block-start: --spacing(4);
-    margin-block-end: --spacing(2);
-    margin-inline: auto;
-    padding: --spacing(4);
-    border-block-width: var(--spacing);
-
-    color: var(--color-sidebar-accent-foreground);
-    background-color: var(--color-sidebar-accent);
-    border-color: var(--color-sidebar-border);
-
-    @media (width >= 40rem) {
-      float: inline-end;
-      margin-left: --spacing(2);
-      border-block-width: 0px;
-      border-inline-start-width: var(--spacing);
-    }
   }
 
   a {
     text-decoration-line: underline;
     text-underline-offset: 4px;
 
+    &:hover {
+      @apply text-shadow-lg text-shadow-complement-1-50;
+    }
+
     &:focus-visible {
       outline-color: var(--color-ring);
       outline-style: solid;
@@ -110,371 +59,415 @@
     }
 
     &[data-slot] {
+      @apply text-shadow-none;
       text-decoration-line: none;
     }
   }
 
-  ul,
-  ol {
-    margin-left: --spacing(4);
+  .bcc-typography {
+    blockquote {
+      color: var(--primary);
+      font-family: var(--font-sans-accent);
+      font-weight: var(--font-weight-medium);
 
-    & > li {
-      margin-top: --spacing(2);
-    }
+      margin-inline: --spacing(4);
+      margin-block: --spacing(6);
 
-    @media (width >= 40rem) {
-      margin-left: --spacing(8);
-    }
-  }
-  ul {
-    list-style-type: disc;
-  }
-  li > ul {
-    list-style-type: circle;
-  }
-  li > ul > li > ul {
-    list-style-type: square;
-  }
+      & > cite {
+        display: block;
+        text-align: end;
+      }
 
-  ol {
-    list-style-type: decimal;
-  }
-  li > ol {
-    list-style-type: lower-alpha;
-  }
-  li > ol > li > ol {
-    list-style-type: lower-roman;
-  }
+      @media (width >= 40rem) {
+        margin-inline: --spacing(16);
+      }
+    }
 
-  dl {
-    margin-top: --spacing(2);
-    & > dt {
-      font-family: var(--font-sans-accent);
-      font-weight: var(--font-weight-medium);
-      font-style: italic;
-      margin-top: calc(var(--spacing));
-      &::after {
-        content: ": ";
+    aside {
+      display: block;
+      float: none;
+      width: var(--container-xs);
+      margin-block-start: --spacing(4);
+      margin-block-end: --spacing(2);
+      margin-inline: auto;
+      padding: --spacing(4);
+      border-block-width: var(--spacing);
+
+      color: var(--color-sidebar-accent-foreground);
+      background-color: var(--color-sidebar-accent);
+      border-color: var(--color-sidebar-border);
+
+      @media (width >= 40rem) {
+        float: inline-end;
+        margin-left: --spacing(2);
+        border-block-width: 0px;
+        border-inline-start-width: var(--spacing);
       }
     }
 
-    & > dd {
+    ul,
+    ol {
       margin-left: --spacing(4);
-      font-size: var(--text-sm);
+
+      & > li {
+        margin-top: --spacing(2);
+      }
+
+      @media (width >= 40rem) {
+        margin-left: --spacing(8);
+      }
+    }
+    ul {
+      list-style-type: disc;
+    }
+    li > ul {
+      list-style-type: circle;
+    }
+    li > ul > li > ul {
+      list-style-type: square;
     }
-  }
 
-  details {
-    margin-top: --spacing(4);
-    border-width: 1px;
-    border-radius: var(--radius-container);
+    ol {
+      list-style-type: decimal;
+    }
+    li > ol {
+      list-style-type: lower-alpha;
+    }
+    li > ol > li > ol {
+      list-style-type: lower-roman;
+    }
 
-    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke,
-      --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
-    transition-timing-function: var(--default-transition-timing-function);
-    transition-duration: var(--default-transition-duration);
+    dl {
+      margin-top: --spacing(2);
+      & > dt {
+        font-family: var(--font-sans-accent);
+        font-weight: var(--font-weight-medium);
+        font-style: italic;
+        margin-top: calc(var(--spacing));
+        &::after {
+          content: ": ";
+        }
+      }
 
-    &:hover {
-      background-color: var(--muted);
+      & > dd {
+        margin-left: --spacing(4);
+        font-size: var(--text-sm);
+      }
     }
 
-    & > summary {
+    details {
+      margin-top: --spacing(4);
+      border-width: 1px;
       border-radius: var(--radius-container);
-      padding-inline: --spacing(4);
-      padding-block: --spacing(2);
-      list-style: none;
 
-      &::-webkit-details-marker {
-        display: none;
-      }
+      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke,
+        --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+      transition-timing-function: var(--default-transition-timing-function);
+      transition-duration: var(--default-transition-duration);
 
-      &:focus-visible {
-        outline-color: var(--color-ring);
-        outline-style: solid;
-        outline-offset: 0;
-        outline-width: var(--spacing);
+      &:hover {
+        background-color: var(--muted);
       }
-    }
 
-    &[open] {
-      background-color: var(--muted);
       & > summary {
-        border-bottom-width: 1px;
-
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
+        border-radius: var(--radius-container);
+        padding-inline: --spacing(4);
+        padding-block: --spacing(2);
+        list-style: none;
+
+        &::-webkit-details-marker {
+          display: none;
+        }
+
+        &:focus-visible {
+          outline-color: var(--color-ring);
+          outline-style: solid;
+          outline-offset: 0;
+          outline-width: var(--spacing);
+        }
       }
 
-      & > p {
-        margin: 0;
-        padding: --spacing(4);
+      &[open] {
+        background-color: var(--muted);
+        & > summary {
+          border-bottom-width: 1px;
+
+          border-bottom-left-radius: 0;
+          border-bottom-right-radius: 0;
+        }
+
+        & > p {
+          margin: 0;
+          padding: --spacing(4);
+        }
       }
     }
-  }
-
-  details + details {
-    margin-top: calc(var(--spacing));
-  }
 
-  address {
-    font-style: italic;
-    margin-block: --spacing(4);
-  }
+    details + details {
+      margin-top: calc(var(--spacing));
+    }
 
-  code,
-  kbd,
-  samp {
-    position: relative;
-    color: var(--primary);
-    font-family: var(--font-mono);
-    font-size: var(--text-sm);
-    font-weight: var(--font-weight-medium);
-  }
+    address {
+      font-style: italic;
+      margin-block: --spacing(4);
+    }
 
-  code {
-    background-color: var(--color-muted);
-    border-radius: var(--radius-sm);
+    code,
+    kbd,
+    samp {
+      position: relative;
+      color: var(--primary);
+      font-family: var(--font-mono);
+      font-size: var(--text-sm);
+      font-weight: var(--font-weight-medium);
+    }
 
-    padding-inline: --spacing(2);
-    padding-block: var(--spacing);
-  }
+    code {
+      background-color: var(--color-muted);
+      border-radius: var(--radius-sm);
 
-  kbd {
-    text-shadow: var(--text-shadow-sm);
-    > kbd {
-      white-space: nowrap;
       padding-inline: --spacing(2);
       padding-block: var(--spacing);
-      background-color: var(--color-muted);
-      border-radius: var(--radius-sm);
-      border-width: 1px;
-      box-shadow: 0 1px 1px color-mix(in oklab, var(--color-foreground) 20%, transparent),
-        0 2px 0 0 color-mix(in oklab, var(--color-background) 20%, transparent) inset;
     }
-  }
-
-  pre {
-    background-color: var(--color-muted);
-    border-radius: var(--radius-sm);
-    padding: --spacing(4);
-    line-height: var(--text-lg--line-height);
-    font-size: var(--text-sm);
 
-    &:not(:first-child) {
-      margin-top: --spacing(4);
+    kbd {
+      text-shadow: var(--text-shadow-sm);
+      > kbd {
+        white-space: nowrap;
+        padding-inline: --spacing(2);
+        padding-block: var(--spacing);
+        background-color: var(--color-muted);
+        border-radius: var(--radius-sm);
+        border-width: 1px;
+        box-shadow: 0 1px 1px color-mix(in oklab, var(--color-foreground) 20%, transparent),
+          0 2px 0 0 color-mix(in oklab, var(--color-background) 20%, transparent) inset;
+      }
     }
 
-    code {
-      padding: 0px;
-    }
-  }
+    pre {
+      background-color: var(--color-muted);
+      border-radius: var(--radius-sm);
+      padding: --spacing(4);
+      line-height: var(--text-lg--line-height);
+      font-size: var(--text-sm);
 
-  del {
-    text-decoration: none;
-    background-color: var(--color-red-200);
-    color: var(--foreground);
-    padding-inline: var(--spacing);
-    &:is(.dark *) {
-      background-color: var(--color-red-900);
+      code {
+        padding: 0px;
+      }
     }
-  }
 
-  ins {
-    text-decoration: none;
-    background-color: var(--color-green-200);
-    color: var(--foreground);
-    padding-inline: var(--spacing);
-    &:is(.dark *) {
-      background-color: var(--color-green-900);
+    del {
+      text-decoration: none;
+      background-color: var(--color-red-200);
+      color: var(--foreground);
+      padding-inline: var(--spacing);
+      &:is(.dark *) {
+        background-color: var(--color-red-900);
+      }
     }
-  }
 
-  mark {
-    text-decoration: none;
-    color: var(--foreground);
-    background-color: var(--color-teal-100);
-    padding-inline: var(--spacing);
-    &:is(.dark *) {
-      background-color: var(--color-teal-900);
+    ins {
+      text-decoration: none;
+      background-color: var(--color-green-200);
+      color: var(--foreground);
+      padding-inline: var(--spacing);
+      &:is(.dark *) {
+        background-color: var(--color-green-900);
+      }
     }
-  }
-
-  abbr {
-    text-underline-offset: 4px;
-  }
 
-  small {
-    font-size: var(--text-sm);
-    line-height: --spacing(6);
-  }
+    mark {
+      text-decoration: none;
+      color: var(--foreground);
+      background-color: var(--color-teal-100);
+      padding-inline: var(--spacing);
+      &:is(.dark *) {
+        background-color: var(--color-teal-900);
+      }
+    }
 
-  /* Table */
-  .scroll-enclosure {
-    position: relative;
-    display: block;
-    width: 100%;
-    overflow: auto;
-    &:not(:first-child) {
-      margin-top: --spacing(4);
+    abbr {
+      text-underline-offset: 4px;
     }
-  }
 
-  .bordered-enclosure {
-    border-width: 1px;
-    border-radius: var(--radius-container);
-  }
+    small {
+      font-size: var(--text-sm);
+      line-height: --spacing(6);
+    }
 
-  table {
-    table-layout: auto;
-    position: relative;
-    border-spacing: 0;
-    border-collapse: separate;
-    caption-side: bottom;
-    background-color: var(--background);
-
-    display: block;
-    width: fit-content;
-    max-width: 100%;
-    overflow-x: auto;
-    margin-inline: auto;
-
-    .scroll-enclosure > & {
-      display: table;
-      overflow-x: initial;
+    /* Table */
+    .scroll-enclosure {
+      position: relative;
+      display: block;
       width: 100%;
-      height: 100%;
+      overflow: auto;
     }
 
-    &:not(:first-child) {
-      margin-top: --spacing(4);
+    .bordered-enclosure {
+      border-width: 1px;
+      border-radius: var(--radius-container);
     }
-  }
 
-  caption {
-    color: var(--muted-foreground);
-    margin: 0px;
-    padding: --spacing(2);
-    border-top-width: 1px;
+    table {
+      table-layout: auto;
+      position: relative;
+      border-spacing: 0;
+      border-collapse: separate;
+      caption-side: bottom;
+      background-color: var(--background);
 
-    text-align: center;
-    font-family: var(--font-sans-accent);
-    font-size: var(--text-sm);
-    font-weight: var(--font-weight-medium);
-    line-height: 1.5em;
-  }
+      display: block;
+      width: fit-content;
+      max-width: 100%;
+      overflow-x: auto;
+      margin-inline: auto;
+
+      .scroll-enclosure > & {
+        display: table;
+        overflow-x: initial;
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    caption {
+      color: var(--muted-foreground);
+      margin: 0px;
+      padding: --spacing(2);
+      border-top-width: 1px;
 
-  tr {
-    padding: 0px;
-    margin: 0px;
-  }
-  th,
-  td {
-    padding-inline: --spacing(4);
-    padding-block: --spacing(2);
-    text-align: left;
-    vertical-align: middle;
-    white-space: nowrap;
-
-    &[align="center"] {
       text-align: center;
+      font-family: var(--font-sans-accent);
+      font-size: var(--text-sm);
+      font-weight: var(--font-weight-medium);
+      line-height: 1.5em;
     }
-    &[align="right"] {
-      text-align: right;
+
+    tr {
+      padding: 0px;
+      margin: 0px;
     }
-  }
+    th,
+    td {
+      padding-inline: --spacing(4);
+      padding-block: --spacing(2);
+      text-align: left;
+      vertical-align: middle;
+      white-space: nowrap;
 
-  thead {
-    position: sticky;
-    z-index: 5;
-    top: 0px;
-    & th {
-      border-bottom-width: 1px;
-      font-family: var(--font-sans-accent);
-      font-weight: var(--font-weight-semibold);
-      background-color: var(--color-background);
-      vertical-align: bottom;
+      &[align="center"] {
+        text-align: center;
+      }
+      &[align="right"] {
+        text-align: right;
+      }
     }
-  }
 
-  tbody {
-    & > tr:not(:last-child) {
-      th,
-      td {
+    thead {
+      position: sticky;
+      z-index: 5;
+      top: 0px;
+      & th {
         border-bottom-width: 1px;
+        font-family: var(--font-sans-accent);
+        font-weight: var(--font-weight-semibold);
+        background-color: var(--color-background);
+        vertical-align: bottom;
       }
     }
-  }
 
-  tfoot {
-    position: sticky;
-    z-index: 5;
-    bottom: 0px;
-    th,
-    td {
-      background-color: var(--muted);
-      font-family: var(--font-sans-accent);
-      font-weight: var(--font-weight-medium);
-      border-top-width: 1px;
+    tbody {
+      & > tr:not(:last-child) {
+        th,
+        td {
+          border-bottom-width: 1px;
+        }
+      }
     }
-  }
-
-  /* Media */
-  :is(img, audio, video) {
-    border-width: 1px;
-    border-radius: var(--radius-container);
-    overflow: hidden;
-    max-width: 100%;
-    margin-inline: auto;
-  }
 
-  :is(audio, video)::-webkit-media-controls-enclosure {
-    border-radius: 0px;
-  }
+    tfoot {
+      position: sticky;
+      z-index: 5;
+      bottom: 0px;
+      th,
+      td {
+        background-color: var(--muted);
+        font-family: var(--font-sans-accent);
+        font-weight: var(--font-weight-medium);
+        border-top-width: 1px;
+      }
+    }
 
-  video {
-    object-fit: cover;
-  }
+    /* Media */
+    :is(img, audio, video) {
+      border-width: 1px;
+      border-radius: var(--radius-container);
+      overflow: hidden;
+      max-width: 100%;
+      margin-inline: auto;
+    }
 
-  /* Figure */
-  figure {
-    position: relative;
-    border-width: 1px;
-    border-radius: var(--radius-container);
-    overflow: hidden;
-    margin-inline: auto;
-    width: fit-content;
-    max-width: 100%;
-
-    &:not(:first-child) {
-      margin-top: --spacing(4);
+    :is(audio, video)::-webkit-media-controls-enclosure {
+      border-radius: 0px;
     }
 
-    & > figcaption {
-      color: var(--muted-foreground);
-      margin: 0px;
-      padding: --spacing(2);
-      text-align: center;
-      font-family: var(--font-sans-accent);
-      font-size: var(--text-sm);
-      font-weight: var(--font-weight-medium);
-      line-height: 1.5em;
+    video {
+      object-fit: cover;
+    }
 
-      &:first-child {
-        font-weight: var(--font-weight-bold);
-        border-bottom-width: 1px;
+    /* Figure */
+    figure {
+      position: relative;
+      border-width: 1px;
+      border-radius: var(--radius-container);
+      overflow: hidden;
+      margin-inline: auto;
+      width: fit-content;
+      max-width: 100%;
+
+      & > figcaption {
+        color: var(--muted-foreground);
+        margin: 0px;
+        padding: --spacing(2);
+        text-align: center;
+        font-family: var(--font-sans-accent);
+        font-size: var(--text-sm);
+        font-weight: var(--font-weight-medium);
+        line-height: 1.5em;
+
+        &:first-child {
+          font-weight: var(--font-weight-bold);
+          border-bottom-width: 1px;
+        }
+        &:last-child {
+          border-top-width: 1px;
+        }
       }
-      &:last-child {
-        border-top-width: 1px;
+
+      :is(img, audio, video, .bordered-enclosure) {
+        border-radius: 0;
+        border: none;
       }
-    }
 
-    :is(img, audio, video, .bordered-enclosure) {
-      border-radius: 0;
-      border: none;
+      :is(img, video) {
+        object-fit: contain;
+      }
     }
 
-    :is(img, video) {
-      object-fit: contain;
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    p,
+    table,
+    figure,
+    pre,
+    .scroll-enclosure {
+      &:not(:first-child) {
+        margin-top: --spacing(4);
+      }
     }
   }
 }