@bccampus/ui-components 0.9.17 → 0.9.19

package/src/styles/typography.css

@@ -1,410 +1,420 @@
-@layer base {
-  /* Typography */
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  .heading-1,
-  .heading-2,
-  .heading-3 {
-    @apply font-sans-accent font-normal text-balance leading-[1.25em] text-brand-1 dark:text-complement-1-50;
-  }
-
-  h1,
-  .heading-1 {
-    font-size: calc(var(--text-base) * 2.5);
-
-    @variant lg {
-      font-size: calc(var(--text-base) * 4);
-    }
-  }
-
-  h1.big,
-  .heading-1.big {
-    @variant lg {
-      font-size: calc(var(--text-base) * 5);
-    }
-  }
-
-  h2,
-  .heading-2 {
-    @apply font-semibold;
-
-    font-size: calc(var(--text-base) * 1.5);
-
-    @variant lg {
-      font-size: calc(var(--text-base) * 1.875);
-    }
-  }
-
-  h2.big,
-  .heading-2.big {
-    font-size: calc(var(--text-base) * 1.875);
-
-    @variant lg {
-      font-size: calc(var(--text-base) * 4);
-    }
-  }
-
-  h3,
-  .heading-3 {
-    @apply font-medium;
-
-    font-size: calc(var(--text-base) * 1.25);
-
-    @variant lg {
-      font-size: calc(var(--text-base) * 1.5);
-    }
-  }
-
-  p {
-    @apply leading-6 text-foreground;
-  }
-
-  a {
-    @apply underline underline-offset-4 rounded-xs;
-
-    &:hover {
-      @apply text-complement-1-500;
-    }
-
-    &:focus-visible {
-      @apply outline-ring outline-offset-2 outline-solid outline-2;
-    }
-
-    &[data-slot] {
-      @apply no-underline;
-    }
-  }
-
-  footer {
-    a {
-      @apply no-underline;
-
-      &:hover {
-        @apply underline outline-none text-foreground;
-      }
-
-      &[data-slot] {
-        @apply no-underline;
-      }
-    }
-  }
-
-  a:not([data-slot="button-icon"], .no-external)[href^="http"]::after,
-  .external::after {
-    @apply bg-current inline-block w-4 h-4 ml-1 mr-1 -mb-0.75;
-
-    content: "";
-    mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWV4dGVybmFsLWxpbmstaWNvbiBsdWNpZGUtZXh0ZXJuYWwtbGluayI+PHBhdGggZD0iTTE1IDNoNnY2Ii8+PHBhdGggZD0iTTEwIDE0IDIxIDMiLz48cGF0aCBkPSJNMTggMTN2NmEyIDIgMCAwIDEtMiAySDVhMiAyIDAgMCAxLTItMlY4YTIgMiAwIDAgMSAyLTJoNiIvPjwvc3ZnPg==");
-    mask-position: bottom center;
-    mask-repeat: no-repeat;
-    mask-size: contain;
-  }
-
-  .bcc-typography {
-    blockquote {
-      @apply text-primary font-sans-accent mx-4 my-6;
-
-      & > cite {
-        display: block;
-        text-align: end;
-      }
-
-      @variant sm {
-        @apply mx-16;
-      }
-    }
-
-    aside {
-      @apply w-xs mt-4 mb-2 mx-auto p-4 border-y-4 text-sidebar-accent-foreground bg-sidebar-accent border-sidebar-border;
-
-      display: block;
-      float: none;
-
-      @variant sm {
-        @apply mx-16;
-      }
-
-      @media (width >= 40rem) {
-        @apply ml-2 border-y-0 border-s-4;
-
-        float: inline-end;
-      }
-    }
-
-    ul,
-    ol {
-      @apply ml-4 text-foreground;
-
-      & > li {
-        @apply mt-2;
-      }
-
-      @variant sm {
-        @apply ml-8;
-      }
-    }
-    ul {
-      list-style-type: disc;
-    }
-    li > ul {
-      list-style-type: circle;
-    }
-    li > ul > li > ul {
-      list-style-type: square;
-    }
-
-    ol {
-      list-style-type: decimal;
-    }
-    li > ol {
-      list-style-type: lower-alpha;
-    }
-    li > ol > li > ol {
-      list-style-type: lower-roman;
-    }
-
-    dl {
-      @apply mt-2 text-foreground;
-
-      & > dt {
-        @apply font-sans-accent font-medium italic mt-1;
-
-        &::after {
-          content: ": ";
-        }
-      }
-
-      & > dd {
-        @apply ml-4 text-sm;
-      }
-    }
-
-    details {
-      @apply text-foreground mt-4 border rounded transition ease-in duration-200;
-
-      &:hover {
-        @apply bg-muted;
-      }
-
-      &:focus-within {
-        @apply outline-offset-0 outline-ring outline-2 outline-solid;
-      }
-
-      & > summary {
-        @apply rounded px-4 py-2 list-none;
-
-        &::-webkit-details-marker {
-          display: none;
-        }
-
-        &:focus-visible {
-          @apply outline-none;
-        }
-      }
-
-      &[open] {
-        @apply bg-muted;
-
-        & > summary {
-          @apply border-b rounded-br-none rounded-bl-none;
-        }
-
-        & > p {
-          @apply m-0 p-4;
-        }
-      }
-    }
-
-    details + details {
-      @apply mt-1;
-    }
-
-    address {
-      @apply text-foreground italic my-4;
-    }
-
-    code,
-    kbd,
-    samp {
-      @apply relative text-sm text-primary font-mono font-medium;
-    }
-
-    code {
-      @apply bg-muted rounded-sm px-2 py-1;
-    }
-
-    kbd {
-      @apply text-shadow-sm;
-
-      > kbd {
-        @apply px-2 py-1 bg-muted rounded-sm border whitespace-nowrap;
-
-        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 {
-      @apply bg-muted text-foreground rounded-sm p-4 leading-6 text-sm;
-
-      code {
-        @apply p-0;
-      }
-    }
-
-    del {
-      @apply no-underline bg-red-200 text-foreground px-1;
-
-      @variant dark {
-        @apply bg-red-900;
-      }
-    }
-
-    ins {
-      @apply no-underline bg-green-200 text-foreground px-1;
-
-      @variant dark {
-        @apply bg-green-900;
-      }
-    }
-
-    mark {
-      @apply no-underline bg-amber-100 text-foreground px-1;
-
-      @variant dark {
-        @apply bg-amber-900;
-      }
-    }
-
-    abbr {
-      @apply underline-offset-4;
-    }
-
-    small {
-      @apply text-sm leading-4;
-    }
-
-    /* Table */
-    .scroll-enclosure {
-      @apply relative block w-full overflow-auto;
-    }
-
-    .bordered-enclosure {
-      @apply border rounded;
-    }
-
-    table.no-wrap {
-      td {
-        @apply whitespace-nowrap;
-      }
-    }
-
-    table {
-      @apply table-auto relative block border-spacing-0 border-separate caption-bottom bg-background text-foreground w-fit max-w-full overflow-x-auto mx-auto;
-
-      .scroll-enclosure > & {
-        @apply table overflow-x-auto w-full h-full;
-      }
-    }
-
-    caption {
-      @apply text-muted-foreground m-0 p-2 border-t text-center font-sans-accent text-sm font-medium leading-5;
-    }
-
-    tr {
-      @apply p-0 m-0;
-    }
-    th,
-    td {
-      @apply px-4 py-2 text-left align-top whitespace-pre-wrap;
-
-      &[align="center"] {
-        @apply text-center;
-      }
-      &[align="right"] {
-        @apply text-right;
-      }
-    }
-
-    thead {
-      @apply sticky z-5 top-0;
-      & th {
-        @apply bg-background text-foreground align-bottom font-sans-accent font-semibold border-b;
-      }
-    }
-
-    tbody {
-      & > tr:not(:last-child) {
-        th,
-        td {
-          @apply border-b;
-        }
-      }
-    }
-
-    tfoot {
-      @apply sticky z-5 bottom-0;
-      th,
-      td {
-        @apply bg-muted text-foreground font-sans-accent font-medium border-t;
-      }
-    }
-
-    /* Media */
-    :is(img, audio, video, iframe) {
-      @apply border rounded overflow-hidden max-w-full mx-auto;
-    }
-
-    :is(audio, video, iframe)::-webkit-media-controls-enclosure {
-      @apply rounded-none;
-    }
-
-    video,
-    iframe {
-      @apply object-cover;
-    }
-
-    /* Figure */
-    figure {
-      @apply relative border rounded overflow-hidden mx-auto w-fit max-w-full;
-
-      & > figcaption {
-        @apply text-muted-foreground m-0 p-2 text-center font-sans-accent text-sm font-medium leading-6;
-
-        &:first-child {
-          @apply font-bold border-b;
-        }
-        &:last-child {
-          @apply border-t;
-        }
-      }
-
-      :is(img, audio, video, iframe, .bordered-enclosure) {
-        @apply border-none rounded-none;
-      }
-
-      :is(img, video, iframe) {
-        @apply object-contain;
-      }
-    }
-
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6,
-    p,
-    pre,
-    figure {
-      &:not(:first-child) {
-        @apply mt-4;
-      }
-    }
-  }
-}
+@layer base {
+  /* Typography */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  .heading-1,
+  .heading-2,
+  .heading-3 {
+    @apply font-sans-accent font-normal text-balance leading-[1.25em] text-brand-1 dark:text-complement-1-50;
+  }
+
+  h1,
+  .heading-1 {
+    font-size: calc(var(--text-base) * 2.5);
+
+    @variant lg {
+      font-size: calc(var(--text-base) * 4);
+    }
+  }
+
+  h1.big,
+  .heading-1.big {
+    @variant lg {
+      font-size: calc(var(--text-base) * 5);
+    }
+  }
+
+  h2,
+  .heading-2 {
+    @apply font-semibold;
+
+    font-size: calc(var(--text-base) * 1.5);
+
+    @variant lg {
+      font-size: calc(var(--text-base) * 1.875);
+    }
+  }
+
+  h2.big,
+  .heading-2.big {
+    font-size: calc(var(--text-base) * 1.875);
+
+    @variant lg {
+      font-size: calc(var(--text-base) * 4);
+    }
+  }
+
+  h3,
+  .heading-3 {
+    @apply font-medium;
+
+    font-size: calc(var(--text-base) * 1.25);
+
+    @variant lg {
+      font-size: calc(var(--text-base) * 1.5);
+    }
+  }
+
+  p {
+    @apply leading-6 text-foreground;
+  }
+
+  a {
+    @apply underline underline-offset-4 rounded-xs;
+
+    &:hover {
+      @apply text-complement-1-500;
+    }
+
+    &:focus-visible {
+      @apply outline-ring outline-offset-2 outline-solid outline-2;
+    }
+
+    &[data-slot] {
+      @apply no-underline;
+    }
+  }
+
+  footer {
+    a {
+      @apply no-underline;
+
+      &:hover {
+        @apply underline outline-none text-foreground;
+      }
+
+      &[data-slot] {
+        @apply no-underline;
+      }
+    }
+  }
+
+  a:not([data-slot="button-icon"], .no-external)[href^="http"]::after,
+  .external::after {
+    @apply bg-current inline-block w-4 h-4 ml-1 mr-1 -mb-0.75;
+
+    content: "";
+    mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWV4dGVybmFsLWxpbmstaWNvbiBsdWNpZGUtZXh0ZXJuYWwtbGluayI+PHBhdGggZD0iTTE1IDNoNnY2Ii8+PHBhdGggZD0iTTEwIDE0IDIxIDMiLz48cGF0aCBkPSJNMTggMTN2NmEyIDIgMCAwIDEtMiAySDVhMiAyIDAgMCAxLTItMlY4YTIgMiAwIDAgMSAyLTJoNiIvPjwvc3ZnPg==");
+    mask-position: bottom center;
+    mask-repeat: no-repeat;
+    mask-size: contain;
+  }
+
+  .bcc-typography {
+    blockquote {
+      @apply text-primary font-sans-accent mx-4 my-6;
+
+      & > cite {
+        display: block;
+        text-align: end;
+      }
+
+      @variant sm {
+        @apply mx-16;
+      }
+    }
+
+    aside {
+      @apply w-xs mt-4 mb-2 mx-auto p-4 border-y-4 text-sidebar-accent-foreground bg-sidebar-accent border-sidebar-border;
+
+      display: block;
+      float: none;
+
+      @variant sm {
+        @apply mx-16;
+      }
+
+      @media (width >= 40rem) {
+        @apply ml-2 border-y-0 border-s-4;
+
+        float: inline-end;
+      }
+    }
+
+    ul,
+    ol {
+      @apply ml-4 text-foreground;
+
+      & > li {
+        @apply mt-2;
+      }
+
+      @variant sm {
+        @apply ml-8;
+      }
+    }
+    ul {
+      list-style-type: disc;
+    }
+    li > ul {
+      list-style-type: circle;
+    }
+    li > ul > li > ul {
+      list-style-type: square;
+    }
+
+    ol {
+      list-style-type: decimal;
+    }
+    li > ol {
+      list-style-type: lower-alpha;
+    }
+    li > ol > li > ol {
+      list-style-type: lower-roman;
+    }
+
+    dl {
+      @apply mt-2 text-foreground;
+
+      & > dt {
+        @apply font-sans-accent font-medium italic mt-1;
+
+        &::after {
+          content: ": ";
+        }
+      }
+
+      & > dd {
+        @apply ml-4 text-sm;
+      }
+    }
+
+    details {
+      @apply text-foreground mt-4 border rounded transition ease-in duration-200;
+
+      &:hover {
+        @apply bg-muted;
+      }
+
+      &:focus-within {
+        @apply outline-offset-0 outline-ring outline-2 outline-solid;
+      }
+
+      & > summary {
+        @apply rounded px-4 py-2 list-none;
+
+        &::-webkit-details-marker {
+          display: none;
+        }
+
+        &:focus-visible {
+          @apply outline-none;
+        }
+      }
+
+      &[open] {
+        @apply bg-muted;
+
+        & > summary {
+          @apply border-b rounded-br-none rounded-bl-none;
+        }
+
+        & > p {
+          @apply m-0 p-4;
+        }
+      }
+    }
+
+    details + details {
+      @apply mt-1;
+    }
+
+    address {
+      @apply text-foreground italic my-4;
+    }
+
+    code,
+    kbd,
+    samp {
+      @apply relative text-sm text-primary font-mono font-medium;
+    }
+
+    code {
+      @apply bg-muted rounded-sm px-2 py-1;
+    }
+
+    kbd {
+      @apply text-shadow-sm;
+
+      > kbd {
+        @apply px-2 py-1 bg-muted rounded-sm border whitespace-nowrap;
+
+        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 {
+      @apply bg-muted text-foreground rounded-sm p-4 leading-6 text-sm;
+
+      code {
+        @apply p-0;
+      }
+    }
+
+    del {
+      @apply no-underline bg-red-200 text-foreground px-1;
+
+      @variant dark {
+        @apply bg-red-900;
+      }
+    }
+
+    ins {
+      @apply no-underline bg-green-200 text-foreground px-1;
+
+      @variant dark {
+        @apply bg-green-900;
+      }
+    }
+
+    mark {
+      @apply no-underline bg-amber-100 text-foreground px-1;
+
+      @variant dark {
+        @apply bg-amber-900;
+      }
+    }
+
+    abbr {
+      @apply underline-offset-4;
+    }
+
+    small {
+      @apply text-sm leading-4;
+    }
+
+    .scroll-enclosure {
+      @apply relative block w-full overflow-auto;
+    }
+
+    .bordered-enclosure {
+      @apply border rounded-sm;
+    }
+
+    /* Table */
+    table.no-wrap {
+      td {
+        @apply whitespace-nowrap;
+      }
+    }
+
+    table {
+      @apply table-auto relative block border rounded-sm border-spacing-0 border-separate caption-bottom bg-background text-foreground w-fit max-w-full overflow-x-auto mx-auto;
+
+      .scroll-enclosure > & {
+        @apply table overflow-x-auto w-full h-full;
+      }
+      figure &,
+      .bordered-enclosure > & {
+        @apply border-0;
+      }
+    }
+
+    caption {
+      @apply text-muted-foreground m-0 p-2 border-t text-center font-sans-accent text-sm font-medium leading-5;
+    }
+
+    tr {
+      @apply p-0 m-0;
+    }
+    th,
+    td {
+      @apply px-4 py-2 text-left align-top whitespace-pre-wrap;
+
+      &[align="center"] {
+        @apply text-center;
+      }
+      &[align="right"] {
+        @apply text-right;
+      }
+    }
+
+    thead {
+      @apply sticky z-5 top-0;
+      & th {
+        @apply bg-background text-foreground align-bottom font-sans-accent font-semibold border-b;
+      }
+    }
+
+    tbody {
+      & > tr:not(:last-child) {
+        th,
+        td {
+          @apply border-b;
+        }
+      }
+      & th {
+        @apply bg-background text-foreground align-bottom font-sans-accent font-semibold border-b;
+      }
+    }
+
+    tfoot {
+      @apply sticky z-5 bottom-0;
+      th,
+      td {
+        @apply bg-muted text-foreground font-sans-accent font-medium border-t;
+      }
+    }
+
+    /* Media */
+    :is(img, audio, video, iframe) {
+      @apply border rounded overflow-hidden max-w-full mx-auto;
+    }
+
+    :is(audio, video, iframe)::-webkit-media-controls-enclosure {
+      @apply rounded-none;
+    }
+
+    video,
+    iframe {
+      @apply object-cover;
+    }
+
+    /* Figure */
+    figure {
+      @apply relative border rounded-sm overflow-hidden mx-auto w-fit max-w-full;
+
+      & > figcaption {
+        @apply text-muted-foreground m-0 p-2 text-center font-sans-accent text-sm font-medium leading-6;
+
+        &:first-child {
+          @apply font-bold border-b;
+        }
+        &:last-child {
+          @apply border-t;
+        }
+      }
+
+      :is(img, audio, video, iframe, .bordered-enclosure) {
+        @apply border-none rounded-none;
+      }
+
+      :is(img, video, iframe) {
+        @apply object-contain;
+      }
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    p,
+    pre,
+    table,
+    figure,
+    .scroll-enclosure,
+    .bordered-enclosure {
+      &:not(:first-child) {
+        @apply mt-4;
+      }
+    }
+  }
+}