@bccampus/ui-components 0.1.0 → 0.2.0

package/src/styles/typography.css

@@ -1,479 +1,480 @@
-/* Typography */
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-family: var(--font-sans-accent);
-  color: var(--primary);
-  text-wrap: balance;
-  letter-spacing: var(--tracking-tight);
-  font-weight: var(--font-weight-medium);
-  --tw-tracking: var(--tracking-tight);
-
-  &:not(:first-child) {
-    margin-top: calc(var(--spacing) * 4);
-  }
-}
-.heading-1,
-.heading-2,
-.heading-3 {
-  font-family: var(--font-sans-accent);
-  color: var(--primary);
-  text-wrap: balance;
-  letter-spacing: var(--tracking-tight);
-  font-weight: var(--font-weight-medium);
-  --tw-tracking: var(--tracking-tight);
-}
-
-h1,
-.heading-1 {
-  font-size: var(--text-4xl);
-  font-weight: var(--font-weight-semibold);
-  line-height: calc(var(--spacing) * 9);
-  scroll-margin-right: calc(var(--spacing) * 18);
-
-  @media (width >= 40rem) {
-    font-size: var(--text-7xl);
-    line-height: calc(var(--spacing) * 18);
-  }
-}
-
-h2,
-.heading-2 {
-  font-size: var(--text-3xl);
-  line-height: calc(var(--spacing) * 9);
-  scroll-margin-right: calc(var(--spacing) * 9);
-}
-
-h3,
-.heading-3 {
-  font-size: var(--text-xl);
-  line-height: calc(var(--spacing) * 6);
-  scroll-margin-right: calc(var(--spacing) * 6);
-}
-
-p {
-  --tw-leading: calc(var(--spacing) * 6);
-  line-height: calc(var(--spacing) * 6);
-
-  &:not(:first-child) {
-    margin-top: calc(var(--spacing) * 4);
-  }
-}
-
-blockquote {
-  color: var(--primary);
-  font-family: var(--font-sans-accent);
-  font-weight: var(--font-weight-medium);
-
-  margin-inline: calc(var(--spacing) * 4);
-  margin-block: calc(var(--spacing) * 6);
-
-  & > cite {
-    display: block;
-    text-align: end;
-  }
-
-  @media (width >= 40rem) {
-    margin-inline: calc(var(--spacing) * 16);
-  }
-}
-
-aside {
-  display: block;
-  float: none;
-  width: var(--container-xs);
-  margin-block-start: calc(var(--spacing) * 4);
-  margin-block-end: calc(var(--spacing) * 2);
-  margin-inline: auto;
-  padding: calc(var(--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: calc(var(--spacing) * 2);
-    border-block-width: 0px;
-    border-inline-start-width: var(--spacing);
-  }
-}
-
-a {
-  text-decoration-line: underline;
-  text-underline-offset: 4px;
-
-  &:focus-visible {
-    outline-color: var(--color-ring);
-    outline-style: solid;
-    outline-offset: 0;
-    outline-width: var(--spacing);
-  }
-
-  &[data-slot] {
-    text-decoration-line: none;
-  }
-}
-
-ul,
-ol {
-  margin-left: calc(var(--spacing) * 4);
-
-  & > li {
-    margin-top: calc(var(--spacing) * 2);
-  }
-
-  @media (width >= 40rem) {
-    margin-left: calc(var(--spacing) * 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 {
-  margin-top: calc(var(--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: ": ";
-    }
-  }
-
-  & > dd {
-    margin-left: calc(var(--spacing) * 4);
-    font-size: var(--text-sm);
-  }
-}
-
-details {
-  margin-top: calc(var(--spacing) * 4);
-  border-width: 1px;
-  border-radius: var(--container-radius);
-
-  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);
-
-  &:hover {
-    background-color: var(--muted);
-  }
-
-  & > summary {
-    border-radius: var(--container-radius);
-    padding-inline: calc(var(--spacing) * 4);
-    padding-block: calc(var(--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);
-    }
-  }
-
-  &[open] {
-    background-color: var(--muted);
-    & > summary {
-      border-bottom-width: 1px;
-
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-
-    & > p {
-      margin: 0;
-      padding: calc(var(--spacing) * 4);
-    }
-  }
-}
-
-details + details {
-  margin-top: calc(var(--spacing));
-}
-
-address {
-  font-style: italic;
-  margin-block: calc(var(--spacing) * 4);
-}
-
-code,
-kbd,
-samp {
-  position: relative;
-  color: var(--primary);
-  font-family: var(--font-mono);
-  font-size: var(--text-sm);
-  font-weight: var(--font-weight-medium);
-}
-
-code {
-  background-color: var(--color-muted);
-  border-radius: var(--radius-sm);
-
-  padding-inline: calc(var(--spacing) * 2);
-  padding-block: var(--spacing);
-}
-
-kbd {
-  text-shadow: var(--text-shadow-sm);
-  > kbd {
-    white-space: nowrap;
-    padding-inline: calc(var(--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: calc(var(--spacing) * 4);
-  line-height: var(--text-lg--line-height);
-  font-size: var(--text-sm);
-
-  &:not(:first-child) {
-    margin-top: calc(var(--spacing) * 4);
-  }
-
-  code {
-    padding: 0px;
-  }
-}
-
-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);
-  }
-}
-
-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);
-  }
-}
-
-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);
-  }
-}
-
-abbr {
-  text-underline-offset: 4px;
-}
-
-/* Table */
-.scroll-enclosure {
-  position: relative;
-  display: block;
-  width: 100%;
-  overflow: auto;
-  &:not(:first-child) {
-    margin-top: calc(var(--spacing) * 4);
-  }
-}
-
-.bordered-enclosure {
-  border-width: 1px;
-  border-radius: var(--container-radius);
-}
-
-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;
-    width: 100%;
-    height: 100%;
-  }
-
-  &:not(:first-child) {
-    margin-top: calc(var(--spacing) * 4);
-  }
-}
-
-caption {
-  color: var(--muted-foreground);
-  margin: 0px;
-  padding: calc(var(--spacing) * 2);
-  border-top-width: 1px;
-
-  text-align: center;
-  font-family: var(--font-sans-accent);
-  font-size: var(--text-sm);
-  font-weight: var(--font-weight-medium);
-  line-height: 1.5em;
-}
-
-tr {
-  padding: 0px;
-  margin: 0px;
-}
-th,
-td {
-  padding-inline: calc(var(--spacing) * 4);
-  padding-block: calc(var(--spacing) * 2);
-  text-align: left;
-  vertical-align: middle;
-  white-space: nowrap;
-
-  &[align="center"] {
-    text-align: center;
-  }
-  &[align="right"] {
-    text-align: right;
-  }
-}
-
-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;
-  }
-}
-
-tbody {
-  & > tr:not(:last-child) {
-    th,
-    td {
-      border-bottom-width: 1px;
-    }
-  }
-}
-
-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;
-  }
-}
-
-/* Media */
-:is(img, audio, video) {
-  border-width: 1px;
-  border-radius: var(--container-radius);
-  overflow: hidden;
-  max-width: 100%;
-  margin-inline: auto;
-}
-
-:is(audio, video)::-webkit-media-controls-enclosure {
-  border-radius: 0px;
-}
-
-video {
-  object-fit: cover;
-}
-
-/* Figure */
-figure {
-  position: relative;
-  border-width: 1px;
-  border-radius: var(--container-radius);
-  overflow: hidden;
-  margin-inline: auto;
-  width: fit-content;
-  max-width: 100%;
-
-  &:not(:first-child) {
-    margin-top: calc(var(--spacing) * 4);
-  }
-
-  & > figcaption {
-    color: var(--muted-foreground);
-    margin: 0px;
-    padding: calc(var(--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;
-    }
-  }
-
-  :is(img, audio, video, .bordered-enclosure) {
-    border-radius: 0;
-    border: none;
-  }
-
-  :is(img, video) {
-    object-fit: contain;
-  }
-}
+@layer base {
+  /* Typography */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  .heading-1,
+  .heading-2,
+  .heading-3 {
+    font-family: var(--font-sans-accent);
+    color: var(--primary);
+    text-wrap: balance;
+    letter-spacing: var(--tracking-tight);
+    font-weight: var(--font-weight-medium);
+    --tw-tracking: var(--tracking-tight);
+    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);
+    font-weight: var(--font-weight-semibold);
+
+    @media (width >= 64rem) {
+      font-size: calc(var(--text-base) * 5);
+    }
+  }
+
+  h2,
+  .heading-2 {
+    font-size: calc(var(--text-base) * 2);
+  }
+
+  h3,
+  .heading-3 {
+    font-size: calc(var(--text-base) * 1.5);
+  }
+
+  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;
+
+    &:focus-visible {
+      outline-color: var(--color-ring);
+      outline-style: solid;
+      outline-offset: 0;
+      outline-width: calc(var(--spacing) * 0.5);
+    }
+
+    &[data-slot] {
+      text-decoration-line: none;
+    }
+  }
+
+  ul,
+  ol {
+    margin-left: --spacing(4);
+
+    & > 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;
+  }
+
+  ol {
+    list-style-type: decimal;
+  }
+  li > ol {
+    list-style-type: lower-alpha;
+  }
+  li > ol > li > ol {
+    list-style-type: lower-roman;
+  }
+
+  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: ": ";
+      }
+    }
+
+    & > dd {
+      margin-left: --spacing(4);
+      font-size: var(--text-sm);
+    }
+  }
+
+  details {
+    margin-top: --spacing(4);
+    border-width: 1px;
+    border-radius: var(--radius-container);
+
+    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);
+
+    &:hover {
+      background-color: var(--muted);
+    }
+
+    & > summary {
+      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);
+      }
+    }
+
+    &[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);
+  }
+
+  code,
+  kbd,
+  samp {
+    position: relative;
+    color: var(--primary);
+    font-family: var(--font-mono);
+    font-size: var(--text-sm);
+    font-weight: var(--font-weight-medium);
+  }
+
+  code {
+    background-color: var(--color-muted);
+    border-radius: var(--radius-sm);
+
+    padding-inline: --spacing(2);
+    padding-block: var(--spacing);
+  }
+
+  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);
+    }
+
+    code {
+      padding: 0px;
+    }
+  }
+
+  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);
+    }
+  }
+
+  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);
+    }
+  }
+
+  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);
+    }
+  }
+
+  abbr {
+    text-underline-offset: 4px;
+  }
+
+  small {
+    font-size: var(--text-sm);
+    line-height: --spacing(6);
+  }
+
+  /* Table */
+  .scroll-enclosure {
+    position: relative;
+    display: block;
+    width: 100%;
+    overflow: auto;
+    &:not(:first-child) {
+      margin-top: --spacing(4);
+    }
+  }
+
+  .bordered-enclosure {
+    border-width: 1px;
+    border-radius: var(--radius-container);
+  }
+
+  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;
+      width: 100%;
+      height: 100%;
+    }
+
+    &:not(:first-child) {
+      margin-top: --spacing(4);
+    }
+  }
+
+  caption {
+    color: var(--muted-foreground);
+    margin: 0px;
+    padding: --spacing(2);
+    border-top-width: 1px;
+
+    text-align: center;
+    font-family: var(--font-sans-accent);
+    font-size: var(--text-sm);
+    font-weight: var(--font-weight-medium);
+    line-height: 1.5em;
+  }
+
+  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;
+    }
+    &[align="right"] {
+      text-align: right;
+    }
+  }
+
+  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;
+    }
+  }
+
+  tbody {
+    & > tr:not(:last-child) {
+      th,
+      td {
+        border-bottom-width: 1px;
+      }
+    }
+  }
+
+  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;
+    }
+  }
+
+  /* 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;
+  }
+
+  video {
+    object-fit: cover;
+  }
+
+  /* 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);
+    }
+
+    & > 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;
+      }
+    }
+
+    :is(img, audio, video, .bordered-enclosure) {
+      border-radius: 0;
+      border: none;
+    }
+
+    :is(img, video) {
+      object-fit: contain;
+    }
+  }
+}