Align styles with source.coop

src/styles/colors.css

@@ -14,12 +14,14 @@
   --gray-10: #838383;
   --gray-11: #646464;
   --gray-12: #202020;
+
+  --gray-a11: #0000009b;
 }
 @media (prefers-color-scheme: dark) {
   :root {
     --black: #ffffff;
-    --white: #000000;
     --gray-1: #111111;
+    --white: var(--gray-1);/* #000000; */
     --gray-2: #191919;
     --gray-3: #222222;
     --gray-4: #2a2a2a;
@@ -31,5 +33,7 @@
     --gray-10: #7b7b7b;
     --gray-11: #b4b4b4;
     --gray-12: #eeeeee;
+
+    --gray-a11: #ffffffaf;
   }
 }

src/styles/fonts.css

@@ -1,27 +1,27 @@
 @font-face {
   font-family: 'Berkeley Mono';
-  src: local('Berkeley Mono'), url('/fonts/BerkeleyMono-Regular.woff2') format('woff2');
+  src: local('Berkeley Mono'), url('../assets/fonts/BerkeleyMono-Regular.woff2') format('woff2');
   font-weight: 400;
   font-style: normal;
   font-display: swap;
 }
 @font-face {
   font-family: 'Berkeley Mono';
-  src: local('Berkeley Mono'),url('/fonts/BerkeleyMono-Bold.woff2') format('woff2');
+  src: local('Berkeley Mono'),url('../assets/fonts/BerkeleyMono-Bold.woff2') format('woff2');
   font-weight: 700;
   font-style: normal;
   font-display: swap;
 }
 @font-face {
   font-family: 'Berkeley Mono';
-  src: local('Berkeley Mono'),url('/fonts/BerkeleyMono-Italic.woff2') format('woff2');
+  src: local('Berkeley Mono'),url('../assets/fonts/BerkeleyMono-Italic.woff2') format('woff2');
   font-weight: 400;
   font-style: italic;
   font-display: swap;
 }
 @font-face {
   font-family: 'Berkeley Mono';
-  src: local('Berkeley Mono'),url('/fonts/BerkeleyMono-BoldItalic.woff2') format('woff2');
+  src: local('Berkeley Mono'),url('../assets/fonts/BerkeleyMono-BoldItalic.woff2') format('woff2');
   font-weight: 700;
   font-style: italic;
   font-display: swap;
@@ -33,7 +33,7 @@
   font-style: normal;
   font-weight: 400;
   font-stretch: 100%;
-  src: local('IBM Plex Sans'), url('/fonts/IBMPlexSans-LatinExt.woff2') format('woff2');
+  src: local('IBM Plex Sans'), url('../assets/fonts/IBMPlexSans-LatinExt.woff2') format('woff2');
   unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
@@ -42,7 +42,7 @@
   font-style: normal;
   font-weight: 400;
   font-stretch: 100%;
-  src: local('IBM Plex Sans'), url('/fonts/IBMPlexSans-Latin.woff2') format('woff2');
+  src: local('IBM Plex Sans'), url('../assets/fonts/IBMPlexSans-Latin.woff2') format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 

src/styles/hightable.css

@@ -1,23 +1,71 @@
 /* Theme for hightable */
 .hightable {
-  --hy-color-1: var(--black);
-  --hy-color-2: var(--gray-12);
-  --hy-color-3: var(--gray-11);
-  --hy-color-5: var(--gray-10);
-  --hy-color-7: var(--gray-9);
-  --hy-color-8: var(--gray-7);
-  --hy-color-9: var(--gray-2);
-  --hy-color-10: var(--gray-1);
-
-  --hy-accent-1: var(--gray-12);
-  --hy-accent-2: var(--gray-11);
-  --hy-accent-3: var(--gray-8);
-  --hy-accent-4: var(--gray-4);
-  --hy-accent-5: var(--gray-3);
-
-  --hy-highlight-1: var(--gray-3);
-  --hy-highlight-2: var(--gray-2);
-
+  /* texts */
+  --header-color: var(--gray-12);
+  --menu-color: var(--gray-12);
+  --menu-item-color: var(--gray-12);
+  --menu-button-color: var(--gray-12);
+  --text-color: var(--gray-12);
+  --primary-sort-icon-color: inherit;
+
+  --row-number-color: var(--gray-a11);
+
+  --secondary-sort-icon-color: var(--gray-5);
+
+  /* backgrounds */
+  --background-color: var(--white);
+  --menu-item-background-color: var(--white);
+
+  --header-background-color: var(--gray-2);
+  --focusable-background-color: var(--gray-2);
+  --menu-button-hovered-background-color: var(--gray-2);
+  --menu-button-focused-background-color: var(--gray-2);
+  --row-hovered-background-color: var(--gray-2);
+
+  --menu-background-color: var(--gray-2);
+  --menu-button-background-color: var(--gray-2);
+  --menu-item-hovered-background-color: var(--gray-2);
+  --row-number-background-color: var(--gray-2);
+  --corner-cell-background-color: var(--gray-2);
+  --row-selected-background-color: var(--gray-2);
+
+  --focus-background-color: var(--gray-3);
+  --row-number-hovered-background-color: var(--gray-3);
+  --row-number-selected-background-color: var(--gray-3);
+
+  --resize-indicator-background-color: var(--gray-12);
+
+  /* borders */
+  --cell-border-color: var(--gray-5);
+  --cell-hovered-right-border-color: var(--gray-5);
+  --header-bottom-border-color: var(--gray-5);
+  --menu-border-color: var(--gray-5);
+  --menu-inner-border-color: var(--gray-5);
+  --row-number-hovered-right-border-color: var(--gray-5);
+  --corner-cell-right-border-color: var(--gray-5);
+  --row-number-right-border-color : var(--gray-5);
+
+  --top-border-color: var(--gray-12);
+  --focus-border-color: var(--gray-12);
+  --focusable-border-color: var(--gray-12);
+  --resizer-hovered-right-border-color: var(--gray-12);
+
+  --top-border-height: 1px;
+  --focus-border-width: 1px;
+
+  /* other tweaks */
+  thead {
+    th {
+      border-bottom-width: 1px;
+      [role="spinbutton"]:focus, [role="spinbutton"]:hover {
+        margin: 0;
+      }
+    }
+    td:first-child {
+      box-shadow: none;
+    }
+  }
+
   tbody {
     [role="rowheader"] {
       text-align: right;

src/styles/index.css

@@ -27,20 +27,6 @@ h2 {
 p {
   margin: 15px 0;
 }
-code {
-  font-family: var(--code-font-family);
-  padding: 10px;
-  white-space: pre-wrap;
-  word-break: break-all;
-}
-sub {
-  align-items: center;
-  display: flex;
-  gap: 5px;
-}
-sub img {
-  cursor: pointer;
-}
 
 /* dropzone */
 .dropzone {
@@ -53,7 +39,8 @@ sub img {
 }
 .overlay {
   font-size: 125%;
-  position: fixed;
+  justify-content: center;
+  position: absolute;
   top: 0;
   bottom: 0;
   right: 0;
@@ -75,12 +62,19 @@ sub img {
   width: 100%;
 }
 
+/* file upload */
+input[type="file"] {
+  display: none;
+}
+
 /* content area */
 main {
   display: flex;
   flex-direction: column;
   flex: 1;
   min-width: 0;
+  color: var(--gray-12);
+  background: var(--gray-1);
 }
 
 #app {
@@ -107,8 +101,7 @@ main {
 
 .top-header {
   align-items: center;
-  border-bottom: 1px solid #ddd;
-  background: #eee;
+  border-bottom: 1px solid var(--gray-5);
   display: flex;
   font-family: var(--code-font-family);
   font-size: 16px;
@@ -123,8 +116,7 @@ main {
 
 .view-header {
   align-items: center;
-  background-color: #f2f2f2;
-  color: #444;
+  color: var(--gray-11);
   display: flex;
   gap: 16px;
   height: 24px;
@@ -133,13 +125,6 @@ main {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.viewer {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  white-space: pre-wrap;
-  overflow-y: auto;
-}
 
 /* welcome */
 #welcome {
@@ -176,7 +161,6 @@ main {
   display: flex;
   min-width: 0;
   border: 1px solid var(--gray-5);
-  background: var(--gray-1);
 
   a {
     text-decoration: none;
@@ -185,11 +169,11 @@ main {
     }
   }
   &:hover {
-    border-color: var(--accent-8);
+    border-color: var(--gray-12);
   }
 }
 .quick-links a {
-  color: var(--accent-11);
+  color: var(--gray-12);
   overflow: hidden;
   padding: 12px;
   padding-left: 36px;
@@ -198,67 +182,6 @@ main {
   width: 100%;
 }
 
-/* file upload */
-input[type="file"] {
-  display: none;
-}
-.overlay {
-  font-size: 125%;
-  justify-content: center;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  background-color: rgba(240, 240, 240, 0.6);
-  backdrop-filter: blur(4px);
-  display: none;
-  padding: 12px;
-  z-index: 40;
-}
-.over .overlay {
-  display: flex;
-}
-
-/* layout */
-.layout {
-  margin: 10px;
-  max-width: 480px;
-}
-.layout .group,
-.layout .cell {
-  background-color: rgba(100, 100, 100, 0.05);
-  border: 1px solid #ccc;
-  font-size: 12px;
-  padding: 4px 20px;
-  margin-top: 8px;
-  word-break: break-all;
-}
-.cell,
-.group-header {
-  display: flex;
-}
-.group-header > label,
-.cell > label {
-  display: flex;
-  flex: 1;
-  font-size: 12px;
-  font-weight: normal;
-  justify-content: flex-start;
-}
-.group-header > span {
-  font-size: 10px;
-}
-
-.layout div ul {
-  list-style: none;
-}
-.layout div li {
-  font-size: 10px;
-  padding: 2px 4px;
-  text-align: right;
-}
-
 .loading {
   align-items: center;
   display: flex;
@@ -269,9 +192,3 @@ input[type="file"] {
 .loading::after {
   content: "Loading…";
 }
-
-.json {
-  background-color: #22222b;
-  padding-left: 20px;
-}
-