Simplify design system css layout

Author: hojberg

src/css/code.css

@@ -2,4 +2,6 @@
 @import "./code/finder.css";
 @import "./code/workspace.css";
 @import "./code/definition-doc.css";
+@import "./code/fully-qualified-name.css";
 @import "./code/project-listing.css";
+@import "./code/hashvatar.css";

src/css/ui/elements/fully-qualified-name.css renamed to src/css/code/fully-qualified-name.css

@@ -1,13 +1,18 @@
+
 .project-listing {
   display: flex;
   flex-direction: row;
   align-items: center;
-}
-
-.project-listing .hashvatar {
-  margin-right: 0.5rem;
+  height: 2rem;
+  padding: 0 0.25rem;
+  border-radius: var(--border-radius-base);
 }
 
 .project-listing:hover {
   text-decoration: none;
+  background: var(--color-main-hover-bg);
+}
+
+.project-listing .hashvatar {
+  margin-right: 0.5rem;
 }

src/css/ui/elements/hashvatar.css renamed to src/css/code/hashvatar.css

@@ -30,6 +30,5 @@
 @import "./ui/fonts.css";
 @import "./ui/base.css";
 @import "./ui/animations.css";
-@import "./ui/elements.css";
-@import "./ui/composites.css";
+@import "./ui/components.css";
 @import "./ui/page-layout.css";

src/css/code/project-listing.css

@@ -41,3 +41,18 @@ body {
   background: var(--color-main-bg);
   color: var(--color-main-fg);
 }
+
+input {
+  border: 0;
+  border-radius: 0;
+  font-family: var(--font-sans-serif);
+  caret-color: var(--color-main-focus-fg);
+}
+
+::placeholder {
+  color: var(--color-main-subtle-fg);
+}
+
+li::marker {
+  color: var(--color-main-subtle-fg-em);
+}

src/css/ui.css

@@ -0,0 +1,15 @@
+@import "./components/icon.css";
+@import "./components/text.css";
+@import "./components/button.css";
+@import "./components/tooltip.css";
+@import "./components/fold-toggle.css";
+@import "./components/card.css";
+@import "./components/toolbar.css";
+@import "./components/app-header.css";
+@import "./components/modal.css";
+@import "./components/codebase-tree.css";
+@import "./components/copy-field.css";
+@import "./components/keyboard-shortcuts.css";
+@import "./components/badges.css";
+@import "./components/divider.css";
+@import "./components/loading-placeholder.css";

src/css/ui/base.css

@@ -0,0 +1,40 @@
+.badge {
+  color: var(--color-badge-fg);
+  background: var(--color-badge-bg);
+  border: 1px solid var(--color-badge-border);
+  font-size: var(--font-size-small);
+  height: 1.5rem;
+  display: flex;
+  align-items: center;
+  padding: 0 0.5rem;
+  border-radius: var(--border-radius-base);
+}
+
+.option-badge {
+  padding: 0 0.75rem;
+  align-items: center;
+  display: inline-flex;
+  flex-direction: row;
+  height: 1.5rem;
+  border-radius: calc(1.5rem / 2);
+  border: 1px solid var(--color-option-badge-border);
+  background: var(--color-option-badge-bg);
+  color: var(--color-option-badge-fg);
+  font-size: var(--font-size-small);
+  cursor: pointer;
+}
+
+.option-badge .icon {
+  font-size: 0.625rem;
+  color: var(--color-option-badge-icon);
+  margin-right: 0.375rem;
+  line-height: 1;
+}
+
+.option-badge:hover .icon {
+  color: var(--color-option-badge-hover-icon);
+}
+
+.option-badge .subtle {
+  color: var(--color-option-badge-subtle-fg);
+}