@byline/ui 1.7.1 → 1.7.3

package/src/styles/utils/utility-classes.css

@@ -1,1395 +0,0 @@
-/**
- * UTILITY CLASSES
- *
- * A simple utility class collection. NOT designed as a
- * replacement for Tailwind - but useful for small or simple
- * projects as well as uikit development.
- */
-@layer byline-utilities {
-  .sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border-width: 0;
-  }
-
-  /* ========================================
-     THEME UTILITIES
-  ======================================== */
-
-  .background {
-    background-color: var(--background);
-  }
-
-  .foreground {
-    color: var(--foreground);
-  }
-
-  .text {
-    color: var(--text);
-  }
-
-  .headings {
-    color: var(--headings);
-  }
-
-  .muted {
-    font-size: 0.925rem;
-    color: var(--muted);
-  }
-
-  /* External link */
-  .external-link::after {
-    content: "";
-    display: inline-block;
-    background-image: url("/external-link-light.svg");
-    background-repeat: no-repeat;
-    background-position: 20% 50%;
-    background-size: 65% auto;
-    width: 1.1rem;
-    height: 1.1rem;
-    margin-right: -5px;
-  }
-
-  .dark .external-link::after,
-  [data-theme="dark"] .external-link::after {
-    background-image: url("/external-link-dark.svg");
-  }
-
-  .primary-strong {
-    background-color: var(--fill-primary-strong);
-    color: var(--text-on-primary-strong);
-  }
-
-  .primary-weak {
-    background-color: var(--fill-primary-weak);
-    color: var(--text-on-primary-weak);
-  }
-
-  .secondary-strong {
-    background-color: var(--fill-secondary-strong);
-    color: var(--text-on-secondary-strong);
-  }
-
-  .secondary-weak {
-    background-color: var(--fill-secondary-weak);
-    color: var(--text-on-secondary-weak);
-  }
-
-  .info-strong {
-    background-color: var(--fill-info-strong);
-    color: var(--text-on-info-strong);
-  }
-
-  .info-weak {
-    background-color: var(--fill-info-weak);
-    color: var(--text-on-info-weak);
-  }
-
-  .success-strong {
-    background-color: var(--fill-success-strong);
-    color: var(--text-on-success-strong);
-  }
-
-  .success-weak {
-    background-color: var(--fill-success-weak);
-    color: var(--text-on-success-weak);
-  }
-
-  .warning-strong {
-    background-color: var(--fill-warning-strong);
-    color: var(--text-on-warning-strong);
-  }
-
-  .warning-weak {
-    background-color: var(--fill-warning-weak);
-    color: var(--text-on-warning-weak);
-  }
-
-  .danger-strong {
-    background-color: var(--fill-danger-strong);
-    color: var(--text-on-danger-strong);
-  }
-
-  .danger-weak {
-    background-color: var(--fill-danger-weak);
-    color: var(--text-on-danger-weak);
-  }
-
-  /* ========================================
-     TYPOGRAPHY UTILITIES
-  ======================================== */
-  .text-xs {
-    font-size: var(--font-size-xs);
-  }
-
-  .text-sm {
-    font-size: var(--font-size-sm);
-  }
-
-  .text-base {
-    font-size: var(--font-size-base);
-  }
-
-  .text-lg {
-    font-size: var(--font-size-lg);
-  }
-
-  .text-xl {
-    font-size: var(--font-size-xl);
-  }
-
-  .text-2xl {
-    font-size: var(--font-size-2xl);
-  }
-
-  .text-3xl {
-    font-size: var(--font-size-3xl);
-  }
-
-  .text-4xl {
-    font-size: var(--font-size-4xl);
-  }
-
-  .text-5xl {
-    font-size: var(--font-size-5xl);
-  }
-
-  .text-6xl {
-    font-size: var(--font-size-6xl);
-  }
-
-  .text-7xl {
-    font-size: var(--font-size-7xl);
-  }
-
-  .text-8xl {
-    font-size: var(--font-size-8xl);
-  }
-
-  .font-light {
-    font-weight: var(--font-weight-light);
-  }
-
-  .font-normal {
-    font-weight: var(--font-weight-normal);
-  }
-
-  .font-medium {
-    font-weight: var(--font-weight-medium);
-  }
-
-  .font-semibold {
-    font-weight: var(--font-weight-semibold);
-  }
-
-  .font-bold {
-    font-weight: var(--font-weight-bold);
-  }
-
-  .font-extrabold {
-    font-weight: var(--font-weight-extrabold);
-  }
-
-  .font-ultrabold {
-    font-weight: var(--font-weight-ultrabold);
-  }
-
-  .leading-tight {
-    line-height: var(--line-height-tight);
-  }
-
-  .leading-snug {
-    line-height: var(--line-height-snug);
-  }
-
-  .leading-normal {
-    line-height: var(--line-height-normal);
-  }
-
-  .leading-relaxed {
-    line-height: var(--line-height-relaxed);
-  }
-
-  .leading-loose {
-    line-height: var(--line-height-loose);
-  }
-
-  .tracking-tight {
-    letter-spacing: var(--letter-spacing-tight);
-  }
-
-  .tracking-normal {
-    letter-spacing: var(--letter-spacing-normal);
-  }
-
-  .tracking-wide {
-    letter-spacing: var(--letter-spacing-wide);
-  }
-
-  @media (min-width: 40rem) {
-    .sm\:text-xs {
-      font-size: var(--font-size-xs);
-    }
-
-    .sm\:text-sm {
-      font-size: var(--font-size-sm);
-    }
-
-    .sm\:text-base {
-      font-size: var(--font-size-base);
-    }
-
-    .sm\:text-lg {
-      font-size: var(--font-size-lg);
-    }
-
-    .sm\:text-xl {
-      font-size: var(--font-size-xl);
-    }
-
-    .sm\:text-2xl {
-      font-size: var(--font-size-2xl);
-    }
-
-    .sm\:text-3xl {
-      font-size: var(--font-size-3xl);
-    }
-
-    .sm\:text-4xl {
-      font-size: var(--font-size-4xl);
-    }
-
-    .sm\:text-5xl {
-      font-size: var(--font-size-5xl);
-    }
-
-    .sm\:text-6xl {
-      font-size: var(--font-size-6xl);
-    }
-
-    .sm\:text-7xl {
-      font-size: var(--font-size-7xl);
-    }
-
-    .sm\:text-8xl {
-      font-size: var(--font-size-8xl);
-    }
-
-    .sm\:font-light {
-      font-weight: var(--font-weight-light);
-    }
-
-    .sm\:font-normal {
-      font-weight: var(--font-weight-normal);
-    }
-
-    .sm\:font-medium {
-      font-weight: var(--font-weight-medium);
-    }
-
-    .sm\:font-semibold {
-      font-weight: var(--font-weight-semibold);
-    }
-
-    .sm\:font-bold {
-      font-weight: var(--font-weight-bold);
-    }
-
-    .sm\:font-extrabold {
-      font-weight: var(--font-weight-extrabold);
-    }
-
-    .sm\:font-ultrabold {
-      font-weight: var(--font-weight-ultrabold);
-    }
-
-    .sm\:leading-tight {
-      line-height: var(--line-height-tight);
-    }
-
-    .sm\:leading-snug {
-      line-height: var(--line-height-snug);
-    }
-
-    .sm\:leading-normal {
-      line-height: var(--line-height-normal);
-    }
-
-    .sm\:leading-relaxed {
-      line-height: var(--line-height-relaxed);
-    }
-
-    .sm\:leading-loose {
-      line-height: var(--line-height-loose);
-    }
-
-    .sm\:tracking-tight {
-      letter-spacing: var(--letter-spacing-tight);
-    }
-
-    .sm\:tracking-normal {
-      letter-spacing: var(--letter-spacing-normal);
-    }
-
-    .sm\:tracking-wide {
-      letter-spacing: var(--letter-spacing-wide);
-    }
-  }
-
-  @media (min-width: 48rem) {
-    .md\:text-xs {
-      font-size: var(--font-size-xs);
-    }
-
-    .md\:text-sm {
-      font-size: var(--font-size-sm);
-    }
-
-    .md\:text-base {
-      font-size: var(--font-size-base);
-    }
-
-    .md\:text-lg {
-      font-size: var(--font-size-lg);
-    }
-
-    .md\:text-xl {
-      font-size: var(--font-size-xl);
-    }
-
-    .md\:text-2xl {
-      font-size: var(--font-size-2xl);
-    }
-
-    .md\:text-3xl {
-      font-size: var(--font-size-3xl);
-    }
-
-    .md\:text-4xl {
-      font-size: var(--font-size-4xl);
-    }
-
-    .md\:text-5xl {
-      font-size: var(--font-size-5xl);
-    }
-
-    .md\:text-6xl {
-      font-size: var(--font-size-6xl);
-    }
-
-    .md\:text-7xl {
-      font-size: var(--font-size-7xl);
-    }
-
-    .md\:text-8xl {
-      font-size: var(--font-size-8xl);
-    }
-
-    .md\:font-light {
-      font-weight: var(--font-weight-light);
-    }
-
-    .md\:font-normal {
-      font-weight: var(--font-weight-normal);
-    }
-
-    .md\:font-medium {
-      font-weight: var(--font-weight-medium);
-    }
-
-    .md\:font-semibold {
-      font-weight: var(--font-weight-semibold);
-    }
-
-    .md\:font-bold {
-      font-weight: var(--font-weight-bold);
-    }
-
-    .md\:font-extrabold {
-      font-weight: var(--font-weight-extrabold);
-    }
-
-    .md\:font-ultrabold {
-      font-weight: var(--font-weight-ultrabold);
-    }
-
-    .md\:leading-tight {
-      line-height: var(--line-height-tight);
-    }
-
-    .md\:leading-snug {
-      line-height: var(--line-height-snug);
-    }
-
-    .md\:leading-normal {
-      line-height: var(--line-height-normal);
-    }
-
-    .md\:leading-relaxed {
-      line-height: var(--line-height-relaxed);
-    }
-
-    .md\:leading-loose {
-      line-height: var(--line-height-loose);
-    }
-
-    .md\:tracking-tight {
-      letter-spacing: var(--letter-spacing-tight);
-    }
-
-    .md\:tracking-normal {
-      letter-spacing: var(--letter-spacing-normal);
-    }
-
-    .md\:tracking-wide {
-      letter-spacing: var(--letter-spacing-wide);
-    }
-  }
-
-  /* ========================================
-     SPACING UTILITIES
-  ======================================== */
-  .m-0 {
-    margin: var(--spacing-0);
-  }
-
-  .m-1 {
-    margin: var(--spacing-4);
-  }
-
-  .m-2 {
-    margin: var(--spacing-8);
-  }
-
-  .m-3 {
-    margin: var(--spacing-12);
-  }
-
-  .m-4 {
-    margin: var(--spacing-16);
-  }
-
-  .m-5 {
-    margin: var(--spacing-20);
-  }
-
-  .m-6 {
-    margin: var(--spacing-6);
-  }
-
-  .m-8 {
-    margin: var(--spacing-8);
-  }
-
-  .m-10 {
-    margin: var(--spacing-40);
-  }
-
-  .m-12 {
-    margin: var(--spacing-48);
-  }
-
-  .m-16 {
-    margin: var(--spacing-64);
-  }
-
-  .p-0 {
-    padding: var(--spacing-0);
-  }
-
-  .p-1 {
-    padding: var(--spacing-4);
-  }
-
-  .p-2 {
-    padding: var(--spacing-8);
-  }
-
-  .p-3 {
-    padding: var(--spacing-12);
-  }
-
-  .p-4 {
-    padding: var(--spacing-16);
-  }
-
-  .p-5 {
-    padding: var(--spacing-20);
-  }
-
-  .p-6 {
-    padding: var(--spacing-6);
-  }
-
-  .p-8 {
-    padding: var(--spacing-8);
-  }
-
-  .p-10 {
-    padding: var(--spacing-40);
-  }
-
-  .p-12 {
-    padding: var(--spacing-48);
-  }
-
-  .p-16 {
-    padding: var(--spacing-64);
-  }
-
-  .p-20 {
-    padding: var(--spacing-80);
-  }
-
-  .p-24 {
-    padding: var(--spacing-96);
-  }
-
-  .p-32 {
-    padding: var(--spacing-128);
-  }
-
-  @media (min-width: 40rem) {
-    .sm\:m-0 {
-      margin: var(--spacing-0);
-    }
-
-    .sm\:m-1 {
-      margin: var(--spacing-4);
-    }
-
-    .sm\:m-2 {
-      margin: var(--spacing-8);
-    }
-
-    .sm\:m-3 {
-      margin: var(--spacing-12);
-    }
-
-    .sm\:m-4 {
-      margin: var(--spacing-16);
-    }
-
-    .sm\:m-5 {
-      margin: var(--spacing-20);
-    }
-
-    .sm\:m-6 {
-      margin: var(--spacing-6);
-    }
-
-    .sm\:m-8 {
-      margin: var(--spacing-8);
-    }
-
-    .sm\:m-10 {
-      margin: var(--spacing-40);
-    }
-
-    .sm\:m-12 {
-      margin: var(--spacing-48);
-    }
-
-    .sm\:m-16 {
-      margin: var(--spacing-64);
-    }
-
-    .sm\:p-0 {
-      padding: var(--spacing-0);
-    }
-
-    .sm\:p-1 {
-      padding: var(--spacing-4);
-    }
-
-    .sm\:p-2 {
-      padding: var(--spacing-8);
-    }
-
-    .sm\:p-3 {
-      padding: var(--spacing-12);
-    }
-
-    .sm\:p-4 {
-      padding: var(--spacing-16);
-    }
-
-    .sm\:p-5 {
-      padding: var(--spacing-20);
-    }
-
-    .sm\:p-6 {
-      padding: var(--spacing-6);
-    }
-
-    .sm\:p-8 {
-      padding: var(--spacing-8);
-    }
-
-    .sm\:p-10 {
-      padding: var(--spacing-40);
-    }
-
-    .sm\:p-12 {
-      padding: var(--spacing-48);
-    }
-
-    .sm\:p-16 {
-      padding: var(--spacing-64);
-    }
-
-    .sm\:p-20 {
-      padding: var(--spacing-80);
-    }
-
-    .sm\:p-24 {
-      padding: var(--spacing-96);
-    }
-
-    .sm\:p-32 {
-      padding: var(--spacing-128);
-    }
-  }
-
-  @media (min-width: 48rem) {
-    .md\:m-0 {
-      margin: var(--spacing-0);
-    }
-
-    .md\:m-1 {
-      margin: var(--spacing-4);
-    }
-
-    .md\:m-2 {
-      margin: var(--spacing-8);
-    }
-
-    .md\:m-3 {
-      margin: var(--spacing-12);
-    }
-
-    .md\:m-4 {
-      margin: var(--spacing-16);
-    }
-
-    .md\:m-5 {
-      margin: var(--spacing-20);
-    }
-
-    .md\:m-6 {
-      margin: var(--spacing-6);
-    }
-
-    .md\:m-8 {
-      margin: var(--spacing-8);
-    }
-
-    .md\:m-10 {
-      margin: var(--spacing-40);
-    }
-
-    .md\:m-12 {
-      margin: var(--spacing-48);
-    }
-
-    .md\:m-16 {
-      margin: var(--spacing-64);
-    }
-
-    .md\:p-0 {
-      padding: var(--spacing-0);
-    }
-
-    .md\:p-1 {
-      padding: var(--spacing-4);
-    }
-
-    .md\:p-2 {
-      padding: var(--spacing-8);
-    }
-
-    .md\:p-3 {
-      padding: var(--spacing-12);
-    }
-
-    .md\:p-4 {
-      padding: var(--spacing-16);
-    }
-
-    .md\:p-5 {
-      padding: var(--spacing-20);
-    }
-
-    .md\:p-6 {
-      padding: var(--spacing-6);
-    }
-
-    .md\:p-8 {
-      padding: var(--spacing-8);
-    }
-
-    .md\:p-10 {
-      padding: var(--spacing-40);
-    }
-
-    .md\:p-12 {
-      padding: var(--spacing-48);
-    }
-
-    .md\:p-16 {
-      padding: var(--spacing-64);
-    }
-
-    .md\:p-20 {
-      padding: var(--spacing-80);
-    }
-
-    .md\:p-24 {
-      padding: var(--spacing-96);
-    }
-
-    .md\:p-32 {
-      padding: var(--spacing-128);
-    }
-  }
-
-  /* ========================================
-     FLEXBOX UTILITIES
-  ======================================== */
-  .flex {
-    display: flex;
-  }
-
-  .flex-row {
-    flex-direction: var(--flex-row);
-  }
-
-  .flex-column {
-    flex-direction: var(--flex-column);
-  }
-
-  .flex-wrap {
-    flex-wrap: var(--flex-wrap);
-  }
-
-  .flex-nowrap {
-    flex-wrap: var(--flex-nowrap);
-  }
-
-  .items-center {
-    align-items: var(--flex-center);
-  }
-
-  .justify-center {
-    justify-content: var(--flex-center);
-  }
-
-  @media (min-width: 40rem) {
-    .sm\:flex {
-      display: flex;
-    }
-
-    .sm\:flex-row {
-      flex-direction: var(--flex-row);
-    }
-
-    .sm\:flex-column {
-      flex-direction: var(--flex-column);
-    }
-
-    .sm\:flex-wrap {
-      flex-wrap: var(--flex-wrap);
-    }
-
-    .sm\:flex-nowrap {
-      flex-wrap: var(--flex-nowrap);
-    }
-
-    .sm\:items-center {
-      align-items: var(--flex-center);
-    }
-
-    .sm\:justify-center {
-      justify-content: var(--flex-center);
-    }
-  }
-
-  @media (min-width: 48rem) {
-    .md\:flex {
-      display: flex;
-    }
-
-    .md\:flex-row {
-      flex-direction: var(--flex-row);
-    }
-
-    .md\:flex-column {
-      flex-direction: var(--flex-column);
-    }
-
-    .md\:flex-wrap {
-      flex-wrap: var(--flex-wrap);
-    }
-
-    .md\:flex-nowrap {
-      flex-wrap: var(--flex-nowrap);
-    }
-
-    .md\:items-center {
-      align-items: var(--flex-center);
-    }
-
-    .md\:justify-center {
-      justify-content: var(--flex-center);
-    }
-  }
-
-  /* ========================================
-     GRID UTILITIES
-  ======================================== */
-  .grid {
-    display: grid;
-  }
-
-  .grid-cols-2 {
-    grid-template-columns: repeat(var(--grid-columns-2), minmax(0, 1fr));
-  }
-
-  .grid-cols-3 {
-    grid-template-columns: repeat(var(--grid-columns-3), minmax(0, 1fr));
-  }
-
-  .grid-cols-4 {
-    grid-template-columns: repeat(var(--grid-columns-4), minmax(0, 1fr));
-  }
-
-  .grid-cols-5 {
-    grid-template-columns: repeat(var(--grid-columns-5), minmax(0, 1fr));
-  }
-
-  .grid-cols-6 {
-    grid-template-columns: repeat(var(--grid-columns-6), minmax(0, 1fr));
-  }
-
-  .grid-cols-7 {
-    grid-template-columns: repeat(var(--grid-columns-7), minmax(0, 1fr));
-  }
-
-  .grid-cols-8 {
-    grid-template-columns: repeat(var(--grid-columns-8), minmax(0, 1fr));
-  }
-
-  .grid-cols-9 {
-    grid-template-columns: repeat(var(--grid-columns-9), minmax(0, 1fr));
-  }
-
-  .grid-cols-10 {
-    grid-template-columns: repeat(var(--grid-columns-10), minmax(0, 1fr));
-  }
-
-  .grid-cols-11 {
-    grid-template-columns: repeat(var(--grid-columns-11), minmax(0, 1fr));
-  }
-
-  .grid-cols-12 {
-    grid-template-columns: repeat(var(--grid-columns-12), minmax(0, 1fr));
-  }
-
-  .gap-0 {
-    gap: var(--gap-0);
-  }
-
-  .gap-1 {
-    gap: var(--gap-1);
-  }
-
-  .gap-2 {
-    gap: var(--gap-2);
-  }
-
-  .gap-3 {
-    gap: var(--gap-3);
-  }
-
-  .gap-4 {
-    gap: var(--gap-4);
-  }
-
-  .gap-5 {
-    gap: var(--gap-5);
-  }
-
-  .gap-6 {
-    gap: var(--gap-6);
-  }
-
-  .gap-8 {
-    gap: var(--gap-8);
-  }
-
-  .gap-10 {
-    gap: var(--gap-10);
-  }
-
-  .gap-12 {
-    gap: var(--gap-12);
-  }
-
-  .gap-16 {
-    gap: var(--gap-16);
-  }
-
-  .gap-20 {
-    gap: var(--gap-20);
-  }
-
-  .gap-24 {
-    gap: var(--gap-24);
-  }
-
-  .gap-32 {
-    gap: var(--gap-32);
-  }
-
-  @media (min-width: 40rem) {
-    .sm\:grid {
-      display: grid;
-    }
-
-    .sm\:grid-cols-12 {
-      grid-template-columns: repeat(var(--grid-columns), 1fr);
-    }
-
-    .sm\:gap-0 {
-      gap: 0.5rem;
-    }
-
-    .sm\:gap-0 {
-      gap: var(--gap-0);
-    }
-
-    .sm\:gap-1 {
-      gap: var(--gap-1);
-    }
-
-    .sm\:gap-2 {
-      gap: var(--gap-2);
-    }
-
-    .sm\:gap-3 {
-      gap: var(--gap-3);
-    }
-
-    .sm\:gap-4 {
-      gap: var(--gap-4);
-    }
-
-    .sm\:gap-5 {
-      gap: var(--gap-5);
-    }
-
-    .sm\:gap-6 {
-      gap: var(--gap-6);
-    }
-
-    .sm\:gap-8 {
-      gap: var(--gap-8);
-    }
-
-    .sm\:gap-10 {
-      gap: var(--gap-10);
-    }
-
-    .sm\:gap-12 {
-      gap: var(--gap-12);
-    }
-
-    .sm\:gap-16 {
-      gap: var(--gap-16);
-    }
-
-    .sm\:gap-20 {
-      gap: var(--gap-20);
-    }
-
-    .sm\:gap-24 {
-      gap: var(--gap-24);
-    }
-
-    .sm\:gap-32 {
-      gap: var(--gap-32);
-    }
-  }
-
-  @media (min-width: 48rem) {
-    .md\:grid {
-      display: grid;
-    }
-
-    .md\:grid-cols-12 {
-      grid-template-columns: repeat(var(--grid-columns), 1fr);
-    }
-
-    .md\:gap-0 {
-      gap: 0.5rem;
-    }
-
-    .md\:gap-0 {
-      gap: var(--gap-0);
-    }
-
-    .md\:gap-1 {
-      gap: var(--gap-1);
-    }
-
-    .md\:gap-2 {
-      gap: var(--gap-2);
-    }
-
-    .md\:gap-3 {
-      gap: var(--gap-3);
-    }
-
-    .md\:gap-4 {
-      gap: var(--gap-4);
-    }
-
-    .md\:gap-5 {
-      gap: var(--gap-5);
-    }
-
-    .md\:gap-6 {
-      gap: var(--gap-6);
-    }
-
-    .md\:gap-8 {
-      gap: var(--gap-8);
-    }
-
-    .md\:gap-10 {
-      gap: var(--gap-10);
-    }
-
-    .md\:gap-12 {
-      gap: var(--gap-12);
-    }
-
-    .md\:gap-16 {
-      gap: var(--gap-16);
-    }
-
-    .md\:gap-20 {
-      gap: var(--gap-20);
-    }
-
-    .md\:gap-24 {
-      gap: var(--gap-24);
-    }
-
-    .md\:gap-32 {
-      gap: var(--gap-32);
-    }
-  }
-
-  /* ========================================
-     BORDER UTILITIES
-  ======================================== */
-  .border {
-    border-width: var(--border-width-normal);
-    border-style: var(--border-style-solid);
-    border-color: var(--border-color);
-  }
-
-  .border-thin {
-    border-width: var(--border-width-thin);
-    border-style: var(--border-style-solid);
-    border-color: var(--border-color);
-  }
-
-  .border-thick {
-    border-width: var(--border-width-thick);
-    border-style: var(--border-style-solid);
-    border-color: var(--border-color);
-  }
-
-  .rounded-none {
-    border-radius: var(--border-radius-none);
-  }
-
-  .rounded-sm {
-    border-radius: var(--border-radius-sm);
-  }
-
-  .rounded {
-    border-radius: var(--border-radius-md);
-  }
-
-  .rounded-md {
-    border-radius: var(--border-radius-md);
-  }
-
-  .rounded-lg {
-    border-radius: var(--border-radius-lg);
-  }
-
-  .rounded-xl {
-    border-radius: var(--border-radius-xl);
-  }
-
-  .rounded-2xl {
-    border-radius: var(--border-radius-2xl);
-  }
-
-  .rounded-full {
-    border-radius: var(--border-radius-full);
-  }
-
-  @media (min-width: 40rem) {
-    .sm\:border {
-      border-width: var(--border-width-normal);
-      border-style: var(--border-style-solid);
-      border-color: var(--border-color);
-    }
-
-    .sm\:border-thin {
-      border-width: var(--border-width-thin);
-      border-style: var(--border-style-solid);
-      border-color: var(--border-color);
-    }
-
-    .sm\:border-thick {
-      border-width: var(--border-width-thick);
-      border-style: var(--border-style-solid);
-      border-color: var(--border-color);
-    }
-
-    .sm\:rounded-none {
-      border-radius: var(--border-radius-none);
-    }
-
-    .sm\:rounded-sm {
-      border-radius: var(--border-radius-sm);
-    }
-
-    .sm\:rounded {
-      border-radius: var(--border-radius-sm);
-    }
-
-    .sm\:rounded-md {
-      border-radius: var(--border-radius-sm);
-    }
-
-    .sm\:rounded-lg {
-      border-radius: var(--border-radius-lg);
-    }
-
-    .sm\:rounded-xl {
-      border-radius: var(--border-radius-xl);
-    }
-
-    .sm\:rounded-2xl {
-      border-radius: var(--border-radius-2xl);
-    }
-
-    .sm\:rounded-full {
-      border-radius: var(--border-radius-full);
-    }
-  }
-
-  @media (min-width: 48rem) {
-    .md\:border {
-      border-width: var(--border-width-normal);
-      border-style: var(--border-style-solid);
-      border-color: var(--border-color);
-    }
-
-    .md\:border-thin {
-      border-width: var(--border-width-thin);
-      border-style: var(--border-style-solid);
-      border-color: var(--border-color);
-    }
-
-    .md\:border-thick {
-      border-width: var(--border-width-thick);
-      border-style: var(--border-style-solid);
-      border-color: var(--border-color);
-    }
-
-    .md\:rounded-none {
-      border-radius: var(--border-radius-none);
-    }
-
-    .md\:rounded-sm {
-      border-radius: var(--border-radius-sm);
-    }
-
-    .md\:rounded {
-      border-radius: var(--border-radius-md);
-    }
-
-    .md\:rounded-md {
-      border-radius: var(--border-radius-md);
-    }
-
-    .md\:rounded-lg {
-      border-radius: var(--border-radius-lg);
-    }
-
-    .md\:rounded-xl {
-      border-radius: var(--border-radius-xl);
-    }
-
-    .md\:rounded-2xl {
-      border-radius: var(--border-radius-2xl);
-    }
-
-    .md\:rounded-full {
-      border-radius: var(--border-radius-full);
-    }
-  }
-
-  /* ========================================
-     SHADOW UTILITIES
-  ======================================== */
-  .shadow {
-    box-shadow: var(--shadow);
-  }
-
-  .shadow-xs {
-    box-shadow: var(--shadow-xs);
-  }
-
-  .shadow-sm {
-    box-shadow: var(--shadow-sm);
-  }
-
-  .shadow-md {
-    box-shadow: var(--shadow-md);
-  }
-
-  .shadow-lg {
-    box-shadow: var(--shadow-lg);
-  }
-
-  .shadow-xl {
-    box-shadow: var(--shadow-xl);
-  }
-
-  @media (min-width: 48rem) {
-    .md\:shadow {
-      box-shadow: var(--shadow);
-    }
-
-    .md\:shadow-xs {
-      box-shadow: var(--shadow-xs);
-    }
-
-    .md\:shadow-sm {
-      box-shadow: var(--shadow-sm);
-    }
-
-    .md\:shadow-md {
-      box-shadow: var(--shadow-md);
-    }
-
-    .md\:shadow-lg {
-      box-shadow: var(--shadow-lg);
-    }
-
-    .md\:shadow-xl {
-      box-shadow: var(--shadow-xl);
-    }
-  }
-
-  /* ========================================
-     OPACITY UTILITIES
-  ======================================== */
-  .opacity-0 {
-    opacity: var(--opacity-0);
-  }
-
-  .opacity-25 {
-    opacity: var(--opacity-25);
-  }
-
-  .opacity-50 {
-    opacity: var(--opacity-50);
-  }
-
-  .opacity-75 {
-    opacity: var(--opacity-75);
-  }
-
-  .opacity-100 {
-    opacity: var(--opacity-100);
-  }
-
-  @media (min-width: 48rem) {
-    .md\:opacity-0 {
-      opacity: var(--opacity-0);
-    }
-
-    .md\:opacity-25 {
-      opacity: var(--opacity-25);
-    }
-
-    .md\:opacity-50 {
-      opacity: var(--opacity-50);
-    }
-
-    .md\:opacity-75 {
-      opacity: var(--opacity-75);
-    }
-
-    .md\:opacity-100 {
-      opacity: var(--opacity-100);
-    }
-  }
-
-  /* ========================================
-     TRANSITIONS UTILITIES
-  ======================================== */
-  .transition-fast {
-    transition: var(--transition-fast);
-  }
-
-  .transition-normal {
-    transition: var(--transition-normal);
-  }
-
-  .transition-slow {
-    transition: var(--transition-slow);
-  }
-
-  /* ========================================
-     RING UTILITIES 
-     - special case rings and offsets for fixed color backgrounds
-       that do not change in dark mode
-  ======================================== */
-  .ring-primary-offset-primary:focus:not(.dark *),
-  .ring-primary-offset-primary:active:not(.dark *) {
-    --ring-shadow: var(--ring-inset) 0 0 0 calc(1px + var(--ring-offset-width)) var(--primary-700);
-    --ring-offset-shadow: var(--ring-inset) 0 0 0 var(--ring-offset-width) var(--primary-400);
-    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--shadow, 0 0 #0000);
-  }
-
-  .ring-secondary-offset-secondary:focus:not(.dark *),
-  .ring-secondary-offset-secondary:active:not(.dark *) {
-    --ring-shadow: var(--ring-inset) 0 0 0 calc(1px + var(--ring-offset-width)) var(--secondary-700);
-    --ring-offset-shadow: var(--ring-inset) 0 0 0 var(--ring-offset-width) var(--secondary-400);
-    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--shadow, 0 0 #0000);
-  }
-
-  .ring-accent-offset-accent:focus:not(.dark *),
-  .ring-accent-offset-accent:active:not(.dark *) {
-    --ring-shadow: var(--ring-inset) 0 0 0 calc(1px + var(--ring-offset-width)) var(--accent-700);
-    --ring-offset-shadow: var(--ring-inset) 0 0 0 var(--ring-offset-width) var(--accent-400);
-    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--shadow, 0 0 #0000);
-  }
-}