GUI base navigation & home

theseus_gui/src/styles/components.postcss

@@ -0,0 +1,19 @@
+.nav-item {
+    display: flex;
+    align-items: center;
+    grid-gap: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-radius: var(--rounded-sm);
+    box-shadow: var(--shadow-inset-sm) var(--shadow-raised);
+    transition: background-color 0.2s ease-in-out,
+    color 0.1s ease-in-out;
+    color: var(--color-text-light);
+
+    &:hover, &.active {
+        color: var(--color-text);
+    }
+
+    &.active {
+        background-color: var(--nav-active-bg);
+    }
+}

theseus_gui/src/styles/global.postcss

@@ -0,0 +1,110 @@
+@import 'normalize.postcss';
+@import 'components.postcss';
+
+.theme {
+    --color-brand-light: hsl(155, 54%, 30%);
+    --color-brand-dark: hsl(155, 58%, 25%);
+    --color-brand-contrast: hsl(0, 0%, 100%);
+
+    --shadow-inset-lg: inset 0px -2px 2px hsla(221, 39%, 11%, 0.1);
+    --shadow-inset: inset 0px -2px 2px hsla(221, 39%, 11%, 0.05);
+    --shadow-inset-sm: inset 0px -1px 1px hsla(221, 39%, 11%, 0.25);
+
+    --shadow-raised-lg: 0px 2px 4px hsla(221, 39%, 11%, 0.2);
+    --shadow-raised: 0px -2px 4px hsla(221, 39%, 11%, 0.1);
+
+    --shadow-floating: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
+    rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
+    --shadow-bar: rgba(0,0,0,.3) 0 0 20px 2px;
+
+    --color-text: hsl(221, 10%, 95%);
+    --color-text-light: hsl(215, 14%, 74%);
+    --color-text-lightest: hsl(220, 9%, 70%);
+    --color-heading: hsl(222, 16%, 80%);
+    --color-link: hsl(215, 100%, 75%);
+
+    --color-raised-bg: hsl(220, 13%, 25%);
+    --color-raised-bg-hover: hsl(220, 13%, 20%);
+    --color-divider: hsl(220, 13%, 50%);
+    --color-button-bg: hsl(220, 13%, 35%);
+    --color-button-bg-hover: hsl(220, 13%, 32%);
+
+    --color-badge-gray-text: hsl(0, 2%, 69%);
+    --color-badge-gray-dot: hsl(0, 6%, 77%);
+    --color-badge-red-text: hsl(343, 63%, 67%);
+    --color-badge-red-dot: hsl(342, 70%, 53%);
+    --color-badge-green-text: hsl(156, 53%, 50%);
+    --color-badge-green-dot: hsl(140, 64%, 40%);
+    --color-badge-yellow-text: hsl(40, 57%, 60%);
+    --color-badge-yellow-dot: hsl(40, 92%, 62%);
+
+    --color-table-border: hsl(214, 12%, 35%);
+    --color-table-alternate-row: hsl(216, 12%, 17%);
+
+    --color-code-bg: hsl(217, 12%, 29%);
+
+    --color-danger-bg: hsl(355deg, 70%, 20%);
+    --color-danger-text: hsl(342deg, 70%, 75%);
+
+    --color-input-light: hsl(220, 13%, 20%);
+
+    --color-scrollbar: hsl(220, 13%, 40%);
+
+    /* Launcher added */
+    --status-bg: hsl(216, 5%, 29%);
+    --sidebar-bg: hsl(216, 10%, 3%);
+    --nav-active-bg: hsla(0,0%,100%,0.1);
+    --font-size-sm: 0.75rem;
+    --color-bg: hsl(217, 9%, 18%);
+    --color-brand: hsl(145, 78%, 48%);
+}
+
+html, body {
+    overflow: hidden;
+    padding: 0;
+    margin: 0;
+}
+
+body {
+    @extend .theme;
+    --rounded: 1rem;
+    --rounded-top: 1rem 1rem 0 0;
+    --rounded-bottom: 0 0 1rem 1rem;
+    --rounded-sm: 0.6rem;
+    --rounded-max: 999999999px;
+
+    --font-standard: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Roboto,
+    Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+
+    --font-size-nm: 0.875rem; /* 16px */
+    --font-size-xl: 1.5rem; /* 24px */
+
+    --font-weight-regular: 400;
+    --font-weight-medium: 600;
+    --font-weight-bold: 700;
+
+    display: flex;
+    background-color: var(--color-bg) !important; /* overrides style set on first load */
+    color: var(--color-text);
+    font-family: var(--font-standard);
+    font-size: var(--font-size-nm);
+    font-weight: var(--font-weight-regular);
+    min-height: 100vh;
+    max-height: 100vh;
+
+    scrollbar-color: var(--color-scrollbar) var(--color-bg);
+
+    *::-webkit-scrollbar {
+        width: 14px;
+    }
+
+    *::-webkit-scrollbar-track {
+        background-color: var(--color-bg);
+    }
+
+    *::-webkit-scrollbar-thumb {
+        background-color: var(--color-scrollbar);
+        border-radius: 999px;
+        border: 3px solid var(--color-bg);
+    }
+}

theseus_gui/src/styles/normalize.postcss

@@ -0,0 +1,55 @@
+@import 'sanitize.css';
+@import 'sanitize.css/forms.css';
+@import 'sanitize.css/typography.css';
+
+/* Overrides */
+
+button {
+	margin: 0;
+	padding: 0;
+	font-size: inherit;
+	box-shadow: none;
+	border: none;
+	cursor: pointer;
+}
+
+a {
+	color: inherit;
+	text-decoration: none;
+}
+
+*:focus {
+	outline: none;
+}
+
+button:focus-visible,
+a:focus-visible,
+[tabindex='0']:focus-visible {
+	outline: 0.2rem solid var(--color-brand);
+}
+
+html,
+body,
+#svelte {
+	height: 100%;
+}
+
+html {
+	overflow-y: hidden;
+	overflow-x: hidden;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+	line-height: 100%;
+	margin: 0;
+}
+
+ul {
+  padding: 0 0 0 1.5rem;
+}