Merge pull request #453 from MuckRock/sveltekit-style-reset

sveltekit style reset

.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({

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>

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,26 +98,23 @@ 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;
     line-height: normal;
   }
 
   .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;
     line-height: normal;
   }
 
   .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;

src/routes/(embed)/+layout.svelte

@@ -0,0 +1,6 @@
+<script>
+  import "@/style/variables.css";
+  import "@/style/global.css";
+</script>
+
+<slot />

src/routes/(pages)/+layout.svelte

@@ -0,0 +1,6 @@
+<script>
+  import "@/style/variables.css";
+  import "@/style/global.css";
+</script>
+
+<slot />

src/routes/+layout.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-  // todo: find a better long-term home for styles
-  import "../style/variables.css";
-  import "../style/global.css";
+  import "@/style/kit.css";
 
   import type { LayoutData } from "./$types";
   import type { User } from "@/api/types/orgAndUser.d.ts";

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";
 

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";
 

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";
 

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);
+}

src/style/variables.css

@@ -97,7 +97,7 @@
 
   --sidebarStickyZ: 9;
   --appStickyZ: 10;
-  
+
   --toastOuterZ: 11;
   --sidebarZ: 12;
   --hamburgerZ: 13;