Recreate theme variables with new style values

web/styles/globals.scss

@@ -1,17 +1,88 @@
-@import "@fontsource/open-sans/variable.css";
-@import "@fontsource/poppins/400.css";
-@import "@fontsource/poppins/600.css";
+@import '@fontsource/open-sans/variable.css';
+@import '@fontsource/poppins/400.css';
+@import '@fontsource/poppins/600.css';
 
-// @import "~antd/dist/antd.dark";
-
-html,
 body {
-  padding: 0;
+  font-family: var(--theme-text-body-font-family);
+  font-size: 16px;
+  line-height: 1.5em;
   margin: 0;
-  font-family: var(--theme-font-family), var(--theme-header-font-family), sans-serif;
-  font-size: clamp(14px, 1vw, 17px);
-  background-color: var(--default-bg-color);
-  color: var(--default-text-color);
+  padding: 0;
+
+  color: var(--theme-text-primary);
+  background-color: var(--theme-background-primary);
+
+  div,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p {
+    margin: 0.7em 0 0 0;
+    padding: 0;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: var(--theme-text-display-font-family);
+  }
+
+  h1 {
+    font-size: 2em;
+  }
+
+  h2 {
+    font-size: 1.5em;
+    font-weight: 400;
+  }
+
+  h3 {
+    font-family: var(--theme-text-body-font-family);
+    font-size: 1.25em;
+    font-weight: 500;
+  }
+
+  h4 {
+    font-size: 1em;
+  }
+
+  ul {
+    list-style: square;
+  }
+
+  ul,
+  ol {
+    margin: 0.7em 0 0 0;
+    padding: 0 1em;
+
+    ul,
+    ol {
+      margin: 0;
+    }
+
+    li {
+      margin: 0.175em 0 0 0;
+    }
+  }
+
+  a {
+    color: var(--theme-text-link);
+
+    &:visited {
+      color: var(--theme-text-primary);
+    }
+  }
+
+  strong,
+  b {
+    font-weight: 700;
+  }
 }
 
 @media (max-width: 768px) {
@@ -19,176 +90,3 @@ body {
     overflow: hidden;
   }
 }
-
-// a {
-//   color: inherit;
-//   text-decoration: none;
-//   color: var(--default-link-color);
-
-//   &:hover {
-//     color: var(--default-text-color);
-//   }
-// }
-
-// * {
-//   box-sizing: border-box;
-// }
-
-// p,
-// p.description,
-// .description,
-// .ant-typography {
-//   font-weight: 500;
-//   margin: 1em 0;
-//   color: var(--white-75);
-// }
-
-// .description.reduced-margins {
-//   margin-top: 5px;
-//   margin-bottom: 5px;
-// }
-
-// pre {
-//   display: block;
-//   padding: 1rem;
-//   margin: 0.5rem 0;
-//   background-color: var(--code-bg-color);
-//   color: var(--white-50);
-// }
-
-// code {
-//   color: var(--code-color);
-//   background-color: var(--white-15);
-//   display: inline-block;
-//   padding: 2px 4px;
-//   border-radius: 4px;
-//   font-size: 0.88em;
-// }
-
-// strong {
-//   font-weight: 600;
-// }
-
-// .logo-svg {
-//   height: 2rem;
-//   width: 2rem;
-// }
-
-// .line-chart-container {
-//   margin: 2em auto;
-//   margin-bottom: 0px;
-//   padding: 1em;
-//   border: 1px solid var(--gray-dark);
-
-//   canvas {
-//     max-width: 100%;
-//   }
-// }
-
-// .form-module {
-//   margin: 1em 0;
-//   background-color: var(--container-bg-color);
-//   padding: 2em;
-//   border-radius: var(--container-border-radius);
-
-//   h3 {
-//     &:first-of-type {
-//       margin-top: 0;
-//     }
-//   }
-// }
-
-// .form-module.disabled {
-//   opacity: 0.4;
-//   cursor: not-allowed;
-// }
-
-// .row {
-//   display: flex;
-//   flex-direction: row;
-//   justify-content: space-between;
-//   align-items: flex-start;
-
-//   @media (max-width: 980px) {
-//     flex-direction: column;
-//     .form-module {
-//       width: 100%;
-//     }
-//   }
-// }
-
-// input {
-//   &:not(:focus) {
-//     &:invalid {
-//       color: var(--ant-error);
-//     }
-//   }
-// }
-
-// .table-container {
-//   .ant-table-tbody > tr > td {
-//     transition: background-color 0.15s;
-//   }
-//   .ant-table-tbody > tr.ant-table-row:hover > td {
-//     background-color: var(--gray);
-//   }
-//   .ant-table-small {
-//     .ant-table-cell {
-//       font-size: 12px;
-//     }
-//     .ant-table-selection-column {
-//       width: 20px;
-//       min-width: 20px;
-//     }
-//   }
-//   .ant-table-row.hidden {
-//     .ant-table-cell {
-//       color: var(--black-35);
-//     }
-//     @media (prefers-color-scheme: dark) {
-//       .ant-table-cell {
-//         color: var(--white-25);
-//       }
-//     }
-//   }
-//   .ant-table-cell {
-//     &.actions-col {
-//       text-align: right;
-//     }
-//   }
-//   td.number-col {
-//     text-align: right;
-//   }
-// }
-
-// .ant-tabs-tab {
-//   color: var(--owncast-purple);
-
-//   .ant-tabs-tab-active {
-//     border-color: var(--nav-selected-text);
-//   }
-// }
-
-// .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
-//   color: var(--nav-selected-text);
-// }
-
-// .ant-tabs-ink-bar {
-//   background: var(--nav-selected-text);
-// }
-
-// #fediverse-post-container {
-//   max-width: 50vw;
-//   width: 100%;
-
-//   #fediverse-post-input {
-//     color: var(--white-75);
-//     border-color: var(--owncast-purple);
-//     background-color: var(--default-bg-color);
-//     height: 250px;
-//   }
-
-//   .ant-input-textarea-show-count::after {
-//     color: var(--owncast-purple);
-//   }
-// }