@byline/ui 0.9.3 → 0.10.1

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

@@ -0,0 +1,1395 @@
+/**
+ * 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);
+  }
+}