From e9ceffac2b9546ee7c72995329f3284d9ac68cee Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Thu, 22 Feb 2024 17:42:08 -0500
Subject: [PATCH 1/2] Create a (pages) group and move legacy styles into
 layouts that don't touch the new routes

---
 src/routes/(embed)/+layout.svelte               | 6 ++++++
 src/routes/(pages)/+layout.svelte               | 6 ++++++
 src/routes/{ => (pages)}/[...path]/+page.js     | 0
 src/routes/{ => (pages)}/[...path]/+page.svelte | 0
 src/routes/{ => (pages)}/home/+page.js          | 0
 src/routes/{ => (pages)}/home/+page.svelte      | 0
 src/routes/+layout.svelte                       | 4 ----
 7 files changed, 12 insertions(+), 4 deletions(-)
 create mode 100644 src/routes/(embed)/+layout.svelte
 create mode 100644 src/routes/(pages)/+layout.svelte
 rename src/routes/{ => (pages)}/[...path]/+page.js (100%)
 rename src/routes/{ => (pages)}/[...path]/+page.svelte (100%)
 rename src/routes/{ => (pages)}/home/+page.js (100%)
 rename src/routes/{ => (pages)}/home/+page.svelte (100%)

diff --git a/src/routes/(embed)/+layout.svelte b/src/routes/(embed)/+layout.svelte
new file mode 100644
index 000000000..5b5cb66d2
--- /dev/null
+++ b/src/routes/(embed)/+layout.svelte
@@ -0,0 +1,6 @@
+<script>
+  import "@/style/variables.css";
+  import "@/style/global.css";
+</script>
+
+<slot />
diff --git a/src/routes/(pages)/+layout.svelte b/src/routes/(pages)/+layout.svelte
new file mode 100644
index 000000000..5b5cb66d2
--- /dev/null
+++ b/src/routes/(pages)/+layout.svelte
@@ -0,0 +1,6 @@
+<script>
+  import "@/style/variables.css";
+  import "@/style/global.css";
+</script>
+
+<slot />
diff --git a/src/routes/[...path]/+page.js b/src/routes/(pages)/[...path]/+page.js
similarity index 100%
rename from src/routes/[...path]/+page.js
rename to src/routes/(pages)/[...path]/+page.js
diff --git a/src/routes/[...path]/+page.svelte b/src/routes/(pages)/[...path]/+page.svelte
similarity index 100%
rename from src/routes/[...path]/+page.svelte
rename to src/routes/(pages)/[...path]/+page.svelte
diff --git a/src/routes/home/+page.js b/src/routes/(pages)/home/+page.js
similarity index 100%
rename from src/routes/home/+page.js
rename to src/routes/(pages)/home/+page.js
diff --git a/src/routes/home/+page.svelte b/src/routes/(pages)/home/+page.svelte
similarity index 100%
rename from src/routes/home/+page.svelte
rename to src/routes/(pages)/home/+page.svelte
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 9df33de7b..f7821ac7d 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,8 +1,4 @@
 <script lang="ts">
-  // todo: find a better long-term home for styles
-  import "../style/variables.css";
-  import "../style/global.css";
-
   import type { LayoutData } from "./$types";
   import type { User } from "@/api/types/orgAndUser.d.ts";
 

From aca4d26b48d3bb3d024c1ed678cafc6c8241de4b Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Fri, 23 Feb 2024 10:43:02 -0500
Subject: [PATCH 2/2] Start a new kit.css stylesheet with only new styles

---
 .storybook/preview.ts                         |  3 +-
 src/lib/components/common/KV.svelte           | 18 ++++-----
 .../documents/DocumentListItem.svelte         | 18 ++++-----
 src/routes/+layout.svelte                     |  2 +
 src/routes/stories/note-embed.stories.svelte  |  4 ++
 src/routes/stories/page-embed.stories.svelte  |  4 ++
 .../stories/project-embed.stories.svelte      |  4 ++
 src/style/kit.css                             | 37 +++++++++++++++++++
 src/style/variables.css                       |  2 +-
 9 files changed, 67 insertions(+), 25 deletions(-)
 create mode 100644 src/style/kit.css

diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index 655eb084f..d29f80202 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -2,9 +2,8 @@ import type { Preview } from "@storybook/svelte";
 import { initialize, mswLoader } from "msw-storybook-addon";
 import { mockDateDecorator } from "storybook-mock-date-decorator";
 
+import "@/style/kit.css";
 import "../src/lib/i18n/index.js";
-import "../src/style/variables.css";
-import "../src/style/global.css";
 
 // Initialize MSW
 initialize({
diff --git a/src/lib/components/common/KV.svelte b/src/lib/components/common/KV.svelte
index 245bd1298..b45485714 100644
--- a/src/lib/components/common/KV.svelte
+++ b/src/lib/components/common/KV.svelte
@@ -27,25 +27,21 @@
     gap: 0.625rem;
 
     border-radius: 0.25rem;
-    border: 1px solid #b5ceed;
-    background: #eef3f9;
+    border: 1px solid var(--color-blue-gray, #b5ceed);
+    background: var(--color-gray-light, #eef3f9);
   }
 
-  .key {
-    color: rgba(21, 51, 89, 0.6);
-    font-family: "Source Sans Pro";
-    font-size: 0.625rem;
+  .key,
+  .value {
+    color: var(--color-blue-dark, rgba(21, 51, 89, 0.6));
+    font-size: var(--font-size-tiny, 0.625rem);
     font-style: italic;
     font-weight: 400;
     line-height: normal;
   }
 
   .value {
-    color: #153359;
-    font-family: "Source Sans Pro";
-    font-size: 0.625rem;
+    color: var(--color-blue-dark, #153359);
     font-style: normal;
-    font-weight: 400;
-    line-height: normal;
   }
 </style>
diff --git a/src/lib/components/documents/DocumentListItem.svelte b/src/lib/components/documents/DocumentListItem.svelte
index bc3086ad0..0406fca47 100644
--- a/src/lib/components/documents/DocumentListItem.svelte
+++ b/src/lib/components/documents/DocumentListItem.svelte
@@ -82,8 +82,8 @@ It's deliberately minimal and can be wrapped in other components to add addition
 
   .thumbnail {
     border-radius: 0.125rem;
-    border: 1px solid #cbcbcb;
-    background: #fff;
+    border: 1px solid var(--color-gray-light, #cbcbcb);
+    background: var(--color-white, #fff);
     box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
   }
 
@@ -98,8 +98,7 @@ It's deliberately minimal and can be wrapped in other components to add addition
   }
 
   h4 {
-    color: #000;
-    font-family: "Source Sans Pro";
+    color: var(--color-black, #000);
     font-size: 1rem;
     font-style: normal;
     font-weight: 600;
@@ -107,8 +106,7 @@ It's deliberately minimal and can be wrapped in other components to add addition
   }
 
   .meta {
-    color: rgba(0, 0, 0, 0.6);
-    font-family: "Source Sans Pro";
+    color: var(--color-gray, rgba(0, 0, 0, 0.6));
     font-size: 0.75rem;
     font-style: normal;
     font-weight: 400;
@@ -116,8 +114,7 @@ It's deliberately minimal and can be wrapped in other components to add addition
   }
 
   .description {
-    color: #000;
-    font-family: "Source Sans Pro";
+    color: var(--color-black, #000);
     font-size: 0.75rem;
     font-style: normal;
     font-weight: 400;
@@ -137,10 +134,9 @@ It's deliberately minimal and can be wrapped in other components to add addition
 
   .open {
     overflow: hidden;
-    color: var(--primary, #4294f0);
+    color: var(--color-primary, #4294f0);
     text-overflow: ellipsis;
-    font-family: "Source Sans Pro";
-    font-size: 0.75rem;
+    font-size: var(--font-size-small, 0.75rem);
     font-style: normal;
     font-weight: 700;
     line-height: normal;
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index f7821ac7d..5408622da 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import "@/style/kit.css";
+
   import type { LayoutData } from "./$types";
   import type { User } from "@/api/types/orgAndUser.d.ts";
 
diff --git a/src/routes/stories/note-embed.stories.svelte b/src/routes/stories/note-embed.stories.svelte
index 6378593e1..bf5a75f98 100644
--- a/src/routes/stories/note-embed.stories.svelte
+++ b/src/routes/stories/note-embed.stories.svelte
@@ -1,4 +1,8 @@
 <script context="module">
+  // legacy css
+  import "@/style/variables.css";
+  import "@/style/global.css";
+
   import { Story } from "@storybook/addon-svelte-csf";
   import NoteEmbed from "../(embed)/documents/[id]/annotations/[note_id]/+page.svelte";
 
diff --git a/src/routes/stories/page-embed.stories.svelte b/src/routes/stories/page-embed.stories.svelte
index cb3c262a7..334d8e4f3 100644
--- a/src/routes/stories/page-embed.stories.svelte
+++ b/src/routes/stories/page-embed.stories.svelte
@@ -1,4 +1,8 @@
 <script context="module">
+  // legacy css
+  import "@/style/variables.css";
+  import "@/style/global.css";
+
   import { Story } from "@storybook/addon-svelte-csf";
   import PageEmbed from "../(embed)/documents/[id]/pages/[page]/+page.svelte";
 
diff --git a/src/routes/stories/project-embed.stories.svelte b/src/routes/stories/project-embed.stories.svelte
index 5722252bb..557c4a886 100644
--- a/src/routes/stories/project-embed.stories.svelte
+++ b/src/routes/stories/project-embed.stories.svelte
@@ -1,4 +1,8 @@
 <script context="module">
+  // legacy css
+  import "@/style/variables.css";
+  import "@/style/global.css";
+
   import { Story } from "@storybook/addon-svelte-csf";
   import ProjectEmbed from "../(embed)/projects/[project_id]/+page.svelte";
 
diff --git a/src/style/kit.css b/src/style/kit.css
new file mode 100644
index 000000000..db62fdf95
--- /dev/null
+++ b/src/style/kit.css
@@ -0,0 +1,37 @@
+/* 
+Updated variables and styles for new SvelteKit routes
+*/
+
+:root {
+  /* fonts */
+  --font-sans: "Source Sans Pro";
+  --font-size-tiny: 0.625rem;
+  --font-size-small: 0.75rem;
+  --font-size-normal: 1rem;
+  --font-size-large: 1.25rem;
+  --font-size-largest: 1.5rem;
+
+  /* colors */
+  --color-black: #000;
+  --color-white: #fff;
+
+  --color-gray-light: #eef3f9;
+  --color-gray: #555555;
+  --color-gray-dark: #153359;
+
+  --color-yellow: #ffe325;
+  --color-green: #93e48f;
+  --color-green-shiny: #24cc99;
+  --color-blue: #4294f0;
+  --color-blue-light: #ff785c;
+  --color-blue-dark: #1e508c;
+  --color-blue-gray: #b5ceed;
+  --color-purple: #5c1e8c;
+
+  /* semantic aliases */
+  --color-primary: var(--color-blue);
+  --color-premium: var(--color-green-shiny);
+  --color-note-public: var(--color-yellow);
+  --color-note-private: var(--color-blue-light);
+  --color-note-org: var(--color-green);
+}
diff --git a/src/style/variables.css b/src/style/variables.css
index 029996eca..8686f8655 100644
--- a/src/style/variables.css
+++ b/src/style/variables.css
@@ -97,7 +97,7 @@
 
   --sidebarStickyZ: 9;
   --appStickyZ: 10;
-  
+
   --toastOuterZ: 11;
   --sidebarZ: 12;
   --hamburgerZ: 13;