adds space grotesk, adjusts headers and adds new components (table, c…

…odeblock, tags)

src/components/callouts.scss

@@ -61,10 +61,10 @@ body {  // ABSTRACT // TLDR // SUMMARY
 }
 
 body { // INFO
-  --callout-info: var(--gray-300);
+  --callout-info: var(--gray-400);
   .callout[data-callout="info"] {
-    --callout-title-color: var(--gray-400);
-    --callout-content: var(--gray-700);
+    --callout-title-color: var(--gray-900);
+    --callout-content: var(--gray-600);
   }
 }
 
@@ -127,7 +127,7 @@ body { // WARNING, ATTENTION, CAUTION
 body { // FAILURE, FAIL, MISSING
   --callout-fail: var(--red-300);
 
-  .callout,[data-callout="fail"],
+  .callout[data-callout="fail"],
   .callout[data-callout="failure"],
   .callout[data-callout="missing"] {
     --callout-title-color: var(--red-400);
@@ -162,14 +162,16 @@ body { // EXAMPLE
  }
 }
 
-body { // QUOTE
+body { // QUOTE, CITE
   --callout-quote: var(--gray-300);
 
-  .callout[data-callout="quote"] {
+  .callout[data-callout="quote"],
+  .callout[data-callout="cite"] {
     --callout-title-color: var(--gray-500);
     --callout-content: var(--gray-700);
   }   
 }
+
 // .callout-content p {
 //   margin-top: 6px !important;
 //   margin-bottom: 2px !important;

src/components/codeblock.scss

@@ -0,0 +1,10 @@
+body {
+    --code-radius: var(--radius-m)
+}
+.markdown-source-view.mod-cm6 .cm-line.HyperMD-codeblock {
+    padding-inline-start: var(--size-4-6)
+}
+
+.cm-line.HyperMD-codeblock .code-block-flair {
+    color: var(--text-faint);
+}

src/components/headers.scss

@@ -1,39 +1,139 @@
 body {
-	--h1-weight: 400;
-	--h2-weight: 600;
-	--h3-weight: 600;
+	--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;
+}
+
+// .el-h1, .el-h2 {
+// 	padding-top: calc(var(--p-spacing) + 1px);
+// 	padding-bottom: calc(var(--p-spacing) / 2)
+// }
+
+// .cm-s-obsidian .cm-line.HyperMD-header {
+// 	padding-top: calc(var(--p-spacing));
+// 	padding-bottom: calc(var(--p-spacing) / 2)
+// }
+
+// .cm-s-obsidian .cm-line.HyperMD-header + .cm-line:not(.HyperMD-header):not(:has(>br:only-child)) {
+// 	padding-bottom: calc(var(--line-height-normal) * 12px);
+// }
+
+.theme-dark {
+	--h1-weight: 450;
+	--h2-weight: 500;
+	--h3-weight: 550;
 	--h4-weight: 600;
-	--h5-weight: 600;
+	--h5-weight: 550;
 	--h6-weight: 600;
+
+	--h1-color: var(--purple-400);
+	--h2-color: var(--pink-400);
+	--h3-color: var(--orange-500);
+	--h4-color: var(--red-400);
+	--h5-color: var(--gray-600);
+	--h6-color: var(--gray-600);
 
-	--h4-color: var(--Gray1000);
-	--h5-color: var(--Gray900);
-	--h6-color: var(--Gray800);
-	--heading-spacing: 16px;
 }
 
+.theme-light {
+	--h1-weight: 500;
+	--h2-weight: 500;
+	--h3-weight: 550;
+	--h4-weight: 550;
+	--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);
+	--h5-color: var(--gray-400);
+	--h6-color: var(--gray-400);
+}
 
 // .markdown-rendered {
-// 	h1, h2, h3, h4, h5, h6 {
-// 		margin: 0;
-// 		margin-block-start: 0;
-// 		margin-block-end: 0;
-// 		margin-bottom: 6px;
-// 	}
 // 	p {
 // 		margin: 0 !important;
 // 		margin-block-start: 0;
 // 		margin-block-end: 0;
 // 	}
 // }
 
-.cm-header.cm-header-5,
-.markdown-rendered h5 {
-	text-transform: uppercase;	
+.cm-header-1, .markdown-rendered h1 {
+	letter-spacing: -0.025em;
+}
+
+.cm-header-2, .markdown-rendered h2 {
+	letter-spacing: -0.02em;
+}
+
+.cm-header,
+.inline-title {
+	// TODO: balance not worling on headers for some reason
+	text-wrap: balance;
 }
 
-.cm-header.cm-header-6,
+.inline-title, .cm-header, 
+.markdown-rendered h1, 
+.markdown-rendered h2, 
+.markdown-rendered h3, 
+.markdown-rendered h4, 
+.markdown-rendered h5, 
 .markdown-rendered h6 {
-	text-transform: uppercase;
-	letter-spacing: 1px;
+	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';
+// }
+
+// .HyperMD-header {
+// 	--p-spacing: 8px;
+// }
+
+.cm-formatting-header {
+	color: var(--gray-300);
+	font-weight: 400;
+}
+
+span.cm-formatting-link.cm-formatting-link-end,
+span.cm-formatting-link.cm-formatting-link-start,
+span.cm-formatting-link.cm-link {
+	color: var(--gray-300); 
+}
+
+span.cm-link-alias-pipe {
+	margin-left: var(--size-2-1);
+	margin-right: var(--size-2-1);
+}
+
+span.cm-formatting-link-string {
+	margin-right: 1px;
+	margin-left: 1px;
+}
+
+span.cm-formatting-link.cm-formatting-link-start {
+	margin-right: 1px;
+}
+
+span.cm-formatting-link.cm-formatting-link-end {
+	margin-left: 1px;
+}
+
+.cm-comment-start, .cm-comment-end {
+	color: var(--gray-300);
 }

src/components/hider.scss

@@ -1,3 +1,7 @@
 .view-header {
   display: none;
+}
+
+.nav-header {
+  display: none;
 }

src/components/menus.scss

@@ -0,0 +1,63 @@
+.sidebar-toggle-button.mod-left {
+    border-right: 1px solid var(--divider-color);
+}
+
+.nav-files-container {
+    padding: var(--size-4-2);
+}
+
+.tag-container {
+    padding: var(--size-4-2);
+}
+
+.outgoing-link-pane {
+    padding: var(--size-4-2);
+}
+
+.workspace-leaf-content .view-content {
+    padding: var(--size-4-2);
+}
+
+.workspace-leaf-content[data-type='outline'] .view-content {
+    padding-top: var(--size-4-2);
+}
+
+.is-flashing {
+    color: var(--text-inverse);
+    padding: 0 4px;
+}
+
+.theme-dark {
+    --interactive-normal: var(--gray-100);
+    --interactive-hover: var(--gray-200);
+    --interactive-accent: var(--blue-200);
+    --interactive-accent-hover: var(--blue-300);
+}
+
+.theme-light {
+    --interactive-normal: var(--gray-25)
+}
+// .workspace-tab-header-container {
+//     transition: height 200ms ease;
+//     height: 6px;
+//     > * {
+//         opacity: 0;
+//         transition: opacity 200ms ease;
+//     }
+//     &:hover {
+//         > * {
+//             opacity: 1;
+//         }
+
+//         height: var(--header-height);
+//     }
+// }
+
+// .workspace-tab-header-container-inner {
+//     margin: 0 !important;
+//     padding: var(--size-2-2) !important;
+// }
+
+// body {
+//     --tab-container-background: var(--gray-50)
+// }

src/components/note.scss

@@ -1,3 +1,8 @@
 body {
-  --file-margins: var(--size-4-8) var(--size-4-8);
-}
+  --file-margins: var(--size-4-10) var(--size-4-8);
+  --file-line-width: 700px;
+}
+
+// .markdown-preview-view {
+//   white-space: break-spaces;
+// }

src/components/table.scss

@@ -0,0 +1,8 @@
+body {
+    --table-header-background: var(--gray-100);
+}
+
+// .table-editor {
+//     border-radius: var(--radius-m);
+//     overflow: hidden;
+// }

src/components/tabs.scss

@@ -11,12 +11,13 @@ body {
 .mod-root .workspace-tab-header-container-inner {
   margin: 0;
   margin-top: -1px;
+  margin-bottom: -1px;
+
   padding: 0;
   padding-right: var(--size-4-2);
 
-  &:has(.workspace-tab-header.is-active) {
-    margin-bottom: -1px;
 
+  &:has(.workspace-tab-header.is-active) {
     .workspace-tab-header.is-active {
       border-bottom: 1px solid rgb(from var(--gray-100) r g b / 0.5);
     }
@@ -27,6 +28,7 @@ body {
   &:hover {
     border-radius: var(--radius-s);
   }
+
 }
 .workspace-tab-header.is-active {
   box-shadow: 0 0 0 var(--tab-outline-width) var(--tab-outline-color) inset;
@@ -44,6 +46,7 @@ body {
 
 .workspace-tab-header-container {
   padding-left: 0;
+
   padding-right: 0;
   // padding-top: 2px;
 
@@ -52,7 +55,7 @@ body {
   padding: var(--size-2-2);
 }
 .workspace-tab-header {
-
+  border-bottom: 1px solid transparent;
   &::before {
     content: unset;
   }

src/components/tag.scss

@@ -0,0 +1,16 @@
+body {
+    --tag-background: var(--blue-200);
+    --tag-color: var(--blue-600);
+}
+
+.cm-formatting-hashtag {
+    color: rgb(from var(--tag-color) r g b / 0.6);
+    padding-right: var(--size-2-1);
+}
+
+// TODO: consider a series of custom styles for specific common used tags to help facilitate visaul identification
+
+// .cm-tag-books {
+//     --tag-background: var(--red-200);
+//     --tag-color: var(--red-500);
+// }

src/foundations/surface.scss

@@ -9,5 +9,19 @@ body {
 
   --titlebar-background: var(--gray-50);
   --titlebar-background-focused: var(--gray-75);
+  --background-modifier-border-focus: var(--gray-400);
+  --icon-color: var(--gray-400);
   // --background-secondary-alt: var(--gray-200); Não achei nenhum lugar que usa ainda
 }
+
+.theme-dark {
+  --background-modifier-form-field: var(--gray-25);
+  --background-modifier-border-hover: var(--gray-200)
+}
+select:focus, .dropdown:focus, button:focus-visible, button.mod-cta:focus-visible {
+  box-shadow: 0 0 0 2px var(--background-modifier-border-focus);
+}
+
+.checkbox-container {
+  transition: unset;
+}

src/foundations/text.scss

@@ -24,7 +24,7 @@ body {
   }
 
   &.theme-dark {
-    --text-highlight-bg: var(--yellow-500);
+    --text-highlight-bg: var(--yellow-600);
     --highlight-text-color: var(--text-inverse);
   }
 }