added bricolage grotesque and inter fonts, canvas colors and minor ad…

…justments

src/components/canvas.scss

@@ -0,0 +1,9 @@
+body.theme-dark {
+    --canvas-color: var(--gray-rgb);
+    --canvas-color-1: var(--red-rgb);
+    --canvas-color-2: var(--orange-rgb);
+    --canvas-color-3: var(--yellow-rgb);
+    --canvas-color-4: var(--green-rgb);
+    --canvas-color-5: var(--sea-green-rgb);
+    --canvas-color-6: var(--blue-rgb);
+}

src/components/codeblock.scss

@@ -7,4 +7,11 @@ body {
 
 .cm-line.HyperMD-codeblock .code-block-flair {
     color: var(--text-faint);
+}
+
+span.cm-inline-code {
+    --code-background: var(--gray-200);
+    --code-radius: var(--radius-s);
+    padding-left: var(--size-2-2) !important;
+    padding-right: var(--size-2-2) !important;
 }

src/components/headers.scss

@@ -1,11 +1,12 @@
 body {
-	--h1-font: 'Space Grotesk';
-	--h2-font: 'Space Grotesk';
-	--h3-font: 'Space Grotesk';
-	--h4-font: 'Space Grotesk';
-	--h5-font: 'Space Grotesk';
-	--h6-font: 'Space Grotesk';
-	--p-spacing: 8px;
+	--h1-font: 'Bricolage Grotesque';
+	--h2-font: 'Bricolage Grotesque';
+	--h3-font: 'Bricolage Grotesque';
+	--h4-font: 'Bricolage Grotesque';
+	--h5-font: 'Bricolage Grotesque';
+	--h6-font: 'Bricolage Grotesque';
+
+
 }
 
 // .el-h1, .el-h2 {
@@ -22,35 +23,39 @@ body {
 // 	padding-bottom: calc(var(--line-height-normal) * 12px);
 // }
 
+.cm-s-obsidian .cm-line.HyperMD-header {
+	padding-bottom: var(--size-2-1);
+}
+
 .theme-dark {
-	--h1-weight: 450;
+	--h1-weight: 550;
 	--h2-weight: 500;
 	--h3-weight: 550;
-	--h4-weight: 600;
-	--h5-weight: 550;
-	--h6-weight: 600;
+	--h4-weight: 650;
+	--h5-weight: 600;
+	--h6-weight: 650;
 
 	--h1-color: var(--purple-400);
-	--h2-color: var(--pink-400);
-	--h3-color: var(--orange-500);
-	--h4-color: var(--red-400);
+	--h2-color: var(--pink);
+	--h3-color: var(--orange);
+	--h4-color: var(--red);
 	--h5-color: var(--gray-600);
 	--h6-color: var(--gray-600);
 
 }
 
 .theme-light {
-	--h1-weight: 500;
-	--h2-weight: 500;
-	--h3-weight: 550;
-	--h4-weight: 550;
+	--h1-weight: 550;
+	--h2-weight: 550;
+	--h3-weight: 600;
+	--h4-weight: 650;
 	--h5-weight: 500;
 	--h6-weight: 600;
 
 	--h1-color: var(--purple-400);
-	--h2-color: var(--pink-400);
-	--h3-color: var(--orange-300);
-	--h4-color: var(--red-300);
+	--h2-color: var(--pink-300);
+	--h3-color: var(--orange);
+	--h4-color: var(--red);
 	--h5-color: var(--gray-400);
 	--h6-color: var(--gray-400);
 }
@@ -77,34 +82,21 @@ body {
 	text-wrap: balance;
 }
 
-.inline-title, .cm-header, 
-.markdown-rendered h1, 
-.markdown-rendered h2, 
-.markdown-rendered h3, 
-.markdown-rendered h4, 
-.markdown-rendered h5, 
-.markdown-rendered h6 {
-	font-feature-settings: 
-		'ss02' 1,
-		'ss02' 1,
-		'ss03' 1,
-		'ss04' 1,
-		'ss05' 1;
-}
 // .markdown-rendered h1, 
 // .markdown-rendered h2, 
 // .markdown-rendered h3, 
 // .markdown-rendered h4, 
 // .markdown-rendered h5, 
 // .markdown-rendered h6 {
 // 	padding-top: 9px !important;
-// 	font-family: 'Space Grotesk';
+// 	font-family: 'Bricolage Grotesque';
 // }
 
 // .HyperMD-header {
 // 	--p-spacing: 8px;
 // }
 
+
 .cm-formatting-header {
 	color: var(--gray-300);
 	font-weight: 400;

src/components/table.scss

@@ -6,3 +6,18 @@ body {
 //     border-radius: var(--radius-m);
 //     overflow: hidden;
 // }
+
+
+.markdown-rendered thead tr > th {
+    border-bottom: 1px solid var(--gray-200);
+}
+
+.table-view-th {
+    > * {
+        font-size: 1em !important;
+    }
+    .dataview.small-text {
+        color: var(--gray-500);
+        font-weight: 400;
+    }
+}

src/foundations/colors/accent_colors.scss

@@ -1,10 +1,21 @@
 body {
-  --purple: #2d248d;
-  --blue: #2a71eb;
-  --sea-green: #21ffb1;
-  --green: #4ecd2b;
-  --yellow: #f2d003;
-  --orange: #ff7417;
-  --red: #da014d;
-  --pink: #f242ff;
+  --gray: rgb(90, 93, 117);
+  --purple: rgb(45, 36, 141);
+  --blue: rgb(42, 113, 235);
+  --sea-green: rgb(33, 255, 177);
+  --green: rgb(78, 205, 43);
+  --yellow: rgb(242, 208, 3);
+  --orange: rgb(255, 116, 23);
+  --red: rgb(218, 1, 77);
+  --pink: rgb(242, 66, 255);
+
+  --gray-rgb: 90, 93, 117;
+  --purple-rgb: 45, 36, 141;
+  --blue-rgb: 42, 113, 235;
+  --sea-green-rgb: 33, 255, 177;
+  --green-rgb: 78, 205, 43;
+  --yellow-rgb: 242, 208, 3;
+  --orange-rgb: 255, 116, 23;
+  --red-rgb: 218, 1, 77;
+  --pink-rgb: 242, 66, 255;
 }

src/foundations/text.scss

@@ -4,9 +4,14 @@ body {
   --text-faint: var(--gray-500);
   --text-inverse: var(--gray-25);
 
+  --font-text: 'Inter';
+  --file-header-font: 'Inter';
+
   // BOLD, ITALICS
+  --bold-modifier: 200;
   --bold-modifier: 300;
   --semibold-modifier: 200;
+
   .cm-strong, strong {
     letter-spacing: 0.02em;
   }
@@ -32,4 +37,14 @@ body {
 
 .empty-state-action {
   cursor: pointer;
+}
+
+.theme-dark .HyperMD-footnote, span.cm-hmd-barelink.cm-hmd-footnote {
+  color: var(--gray-500);
+  --text-muted: var(--gray-500);
+}
+
+.theme-light .HyperMD-footnote, span.cm-hmd-barelink.cm-hmd-footnote {
+  color: var(--gray-400);
+  --text-muted: var(--gray-400);
 }

src/index.scss

@@ -10,14 +10,20 @@
 
 @use './components/table.scss';
 
+@use './components/canvas.scss';
+
+
 @use './components/tag.scss';
 @use './components/codeblock.scss';
-// @use './foundations/colors_oklch.scss'
-@use './foundations/colors/accent_colors.scss';
 
-@use './foundations/type/space_grotesk.scss';
+// @use './foundations/type/space_grotesk.scss';
+@use './foundations/type/bricolage.scss';
+@use './foundations/type/inter.scss';
 
+
+@use './foundations/colors/accent_colors.scss';
 @use './foundations/colors/light_theme.scss';
 @use './foundations/colors/dark_theme.scss';
+
 @use './foundations/surface.scss';
 @use './foundations/text.scss';