fix: change from scss variables to css variables and appearance fixes.

catppuccin · Apr 5, 2022 · ad4c3a7 · ad4c3a7
1 parent a610002
commit ad4c3a7
Show file tree

Hide file tree

Showing 18 changed files with 1,019 additions and 809 deletions.
diff --git a/README.md b/README.md
@@ -17,7 +17,7 @@
 
 ## About
 
-This theme covers my use case for the app. That said! Part of what makes Obsidian so fantastic is its many features and extended universe of user-created plugins. As time goes on, I would like to add more compatibility between the theme and some of the more popular plugins. Additionally, Obsidian now has a legacy editor. There be dragons, but none too bad: Most of the css was written before the new editor's beta. Currently the theme uses css from [Kepano's Hider](https://github.com/kepano/obsidian-hider) plugin. That will change soon, but you may need to do some cmd/ctrl+p-ing in the meantime if you are used to buttons. (:
+This theme covers my use case for the app. That said! Part of what makes Obsidian so fantastic is its many features and extended universe of user-created plugins. As time goes on, I would like to add more compatibility between the theme and some of the more popular plugins. Additionally, Obsidian now has a legacy editor. There be dragons, but none too bad: Most of the css was written before the new editor's beta. Currently the theme uses some css from [Kepano's Hider](https://github.com/kepano/obsidian-hider) plugin. That will change soon, but you may need to do some cmd/ctrl+p-ing in the meantime if you are used to buttons. (:
 
 ## Usage
 
@@ -35,21 +35,17 @@ Open Obisidian and go to `Preferences` >> `Appearance`, click `Manage` and scrol
 
 ## Development
 
+See the [Releases](https://github.com/catppuccin/obsidian/releases) page for the latest news.
+
 ### The shape of things to come
 
-+ [ ] Style Settings plugin compatibility
++ [x] Style Settings plugin compatibility
++ [x] Behind the scenes cleanup of scss/css
 + [ ] Tweaks to improve theme consistency throughout UI
-+ [ ] Behind the scenes cleanup of scss/css
 + [ ] Mobile version
 
 PRs and constructive feedback more than welcome.
 
-### Known issues
-
-* Bullet indentations under checkboxes are not deep enough
-* Some infrequently seen icons still need to be styled/replaced
-* Legacy editor blockquote is not consistent with the new editor's
-
 ## 💝 Thanks to
 
 + [mbeckrich](https://github.com/mbeckrich)

diff --git a/obsidian.css b/obsidian.css
diff --git a/scss/_base.scss b/scss/_base.scss
@@ -3,30 +3,25 @@
 /* @use "abstracts/colors"; */
 
 @use "abstracts/fonts";
-
-@use "abstracts/mixins";
-
-@use "base/codeblocks";
+@use "abstracts/variables";
+@use "base/admonitions-and-codeblocks";
 @use "base/links";
 @use "base/typography";
-
 @use "components/icons";
 @use "components/lines";
-
 @use "layouts/input-and-buttons";
 @use "layouts/settings";
 @use "layouts/sidebar";
 @use "layouts/tabs";
 @use "layouts/titlebar";
-
 @use "vendors/plugins";
 @use "vendors/style-settings";
 
 /* stylelint-disable property-no-vendor-prefix */
 :root {
     --default-font: "Vollkorn", "Gentium Book Basic", -apple-system, blinkmacsystemfont, "Segoe UI", "Microsoft YaHei Light", sans-serif;
     --font-monospace: "Mononoki Nerd Font Mono", sfmono-regular, consolas, "Roboto Mono", monospace;
-    --not-editor: "Public Sans", "Gill Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    --not-editor: "Public Sans", "Gill Sans", -apple-system, system-ui, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
     --preview-font: var(--default-font);
     --editor-font: var(--default-font);
     --header-font-pre: var(--preview-font);

diff --git a/scss/abstracts/_colors.scss b/scss/abstracts/_colors.scss
@@ -1,4 +1,4 @@
-/* make any changes to colors in base.scss. instead */
+/* make any changes to colors in base.scss instead */
 
 /* cursor, urls */
 $rosewater: hsl(10deg 56% 91%);
@@ -8,7 +8,7 @@ $mauve: hsl(279deg 70% 83%);
 /* active tab in foreground */
 $pink: hsl(316deg 72% 86%);
 $maroon: hsl(349deg 60% 77%);
-$red: hsl(342deg 79% 75%);
+$red: hsl(342deg 80% 75%);
 $peach: hsl(24deg 88% 78%);
 $yellow: hsl(41deg 88% 84%);
 $green: hsl(128deg 58% 79%);

diff --git a/scss/abstracts/_fonts.scss b/scss/abstracts/_fonts.scss
diff --git a/scss/abstracts/_mixins.scss b/scss/abstracts/_mixins.scss
diff --git a/scss/abstracts/_variables.scss b/scss/abstracts/_variables.scss
@@ -0,0 +1,115 @@
+:root {/* Dark theme colors, adjust in _base.scss for now. */
+    --background-primary: hsl(240deg 21% 15%);
+    --background-primary-alt: hsl(249deg 23% 12%);
+    --background-secondary: hsl(240deg 21% 15%);
+    --background-secondary-alt: hsl(249deg 23% 12%);
+    --background-modifier-border: hsl(249deg 23% 12%);
+    --background-modifier-form-field: hsl(235deg 17% 29% 30%);
+    --background-modifier-form-field-highlighted: hsl(235deg 17% 29% 30%);
+    --background-modifier-box-shadow: hsl(235deg 17% 29% 30%);
+    --background-modifier-success: hsl(128deg 58% 79%);
+    --background-modifier-error: hsl(342deg 79% 75%);
+    --background-modifier-error-rgb: 226 140 140;
+    --background-modifier-error-hover: hsl(342deg 79% 60%);
+    --background-modifier-cover: rgb(0 0 0 80%);
+    --text-accent: hsl(128deg 58% 79%);
+    --text-accent-hover: hsl(128deg 58% 79%);
+    --text-normal: hsl(220deg 38% 89%);
+    --text-normal-transparent: hsl(220deg 38% 89% / 60%);
+    --text-muted: hsl(285deg 10% 75%);
+    --text-muted-rgb: 195, 186, 198;
+    --text-faint: hsl(274deg 11% 59%);
+    --text-error: hsl(342deg 79% 75%);
+    --text-error-hover: hsl(342deg 79% 60%);
+    --text-highlight-bg: hsl(41deg 88% 84%);
+    --text-highlight-bg-active: hsl(223.2deg 70.1% 79%);
+    --text-selection: hsl(254deg 12% 36%);
+    --text-on-accent: hsl(254deg 25% 10%);
+    --interactive-normal: hsl(171deg 53% 81%);
+    --interactive-hover: hsl(171deg 53% 81%);
+    --interactive-accent: hsl(128deg 58% 79%);
+    --interactive-accent-rgb: 171, 233, 179;
+    --interactive-accent-hover: hsl(128deg 58% 79%);
+    --interactive-success: hsl(128deg 58% 79%);
+    --scrollbar-active-thumb-bg: rgb(255 255 255 / 20%);
+    --scrollbar-bg: rgb(255 255 255 / 5%);
+    --scrollbar-thumb-bg: rgb(255 255 255 / 10%);
+    --code-blocks: hsl(10deg 56% 91%);
+    --border: hsl(249deg 18% 22%);
+    --border-inset: hsl(254deg 12% 36%);
+    --active-interaction: hsl(316deg 72% 86%);
+    --highlight-mix-blend-mode: lighten;
+    --internal-buttons: hsl(24deg 88% 78%);
+    --text-selection-opaque: hsl(238deg 100% 89%);
+    --rosewater: hsl(9deg 57% 91%);
+    --maroon: hsl(349deg 61% 77%);
+    --pink: hsl(316deg 72% 86%);
+    --lavender: hsl(220deg 38% 89%);
+    --black-0: hsl(254deg 25% 10%);
+    --black-1: hsl(249deg 23% 12%);
+    --black-2: hsl(240deg 21% 15%);
+    --black-3: hsl(249deg 18% 22%);
+    --black-4: hsl(254deg 12% 36%);
+
+    /* Link effects */
+    --link-transition: background-color 0.3s ease-in-out, color 0.3s ease-in;
+
+    /* Box shadows */
+    --box-shadow-inset-small: 0 2px 4px inset hsl(254deg 25% 10%);
+    --box-shadow-inset-small-hover:
+        0 2px 4px inset hsl(254deg 25% 10%),
+        0 4px 8px inset hsl(254deg 25% 10%);
+    --box-shadow-inset-large:
+        0 2px 4px inset hsl(254deg 25% 10%),
+        0 4px 8px inset hsl(254deg 25% 10%),
+        0 8px 16px inset hsl(254deg 25% 10%);
+    --box-shadow-large:
+        0 0 4px hsl(254deg 25% 10%),
+        0 0 8px hsl(254deg 25% 10%),
+        0 0 16px hsl(254deg 25% 10%);
+    --box-shadow-small:
+        0 2px 2px hsl(254deg 25% 10%),
+        0 4px 4px hsl(254deg 25% 10%);
+    --box-shadow-small-hover:
+        0 2px 2px hsl(254deg 25% 10%),
+        0 4px 4px hsl(254deg 25% 10%);
+
+    /* Text */
+    --text-underline: 2px;
+    --text-decoration-standard: 0.15rem underline var(--interactive-accent);
+    --text-decoration-external-link: 0.15em underline var(--interactive-normal);
+    --text-decoration-broken-link: 0.15rem underline var(--maroon);
+    --text-decoration-titlebar: 0.15rem underline var(--active-interaction);
+
+    /* Padding */
+    --padding-small: 3px;
+    --padding-medium: 6px;
+    --padding-large: 10px;
+
+    /* Margin */
+    --margin-small: 2px;
+
+    /* Borders */
+    --border-default: hsl(249deg 18% 22%) 1px solid;
+    --border-left-small: 1px solid var(--rosewater);
+    --border-left: solid 6px var(--active-interaction);
+    --border-left-hover: solid 6px var(--black-4);
+    --border-side-misc: 0.15rem solid var(--border);
+
+    /* Border radius */
+    --border-radius-small: 4px;
+    --border-radius-medium: 8px;
+
+    /* Indentation guide */
+    .markdown-source-view.mod-cm6 .cm-indent::before {
+        --indentation-guide: var(--black-3);
+    }
+
+    /* Icons */
+    --icon-height-small: 16px;
+    --icon-width-small: 16px;
+    --icon-height-medium: 20px;
+    --icon-width-medium: 20px;
+    --icon-background-size: 16px 16px;
+    --icon-margin-right: 8px;
+}
diff --git a/scss/base/_admonitions-and-codeblocks.scss b/scss/base/_admonitions-and-codeblocks.scss
@@ -0,0 +1,69 @@
+/* Admonitions */
+
+/* TODO: Remove border-radius from admonitions
+being edited */
+
+.markdown-source-view.mod-cm6 .cm-embed-block {
+    padding: var(--padding-medium);
+    border-radius: var(--border-radius-medium);
+}
+
+.callout-title {
+    color: var(--rosewater);
+}
+
+.callout {
+    /* uses rgb of catppuccin red */
+    --callout-color: 242, 141, 171;
+
+    .callout-title {
+        border-top-right-radius: var(--border-radius-medium);
+        border-bottom-right-radius: var(--border-radius-medium);
+    }
+
+    border-radius: var(--border-radius-medium);
+    border-bottom: var(--border-default);
+}
+
+.markdown-source-view.mod-cm6 .cm-embed-block:hover {
+    /* TODO: remove or adjust border/move effect on hover */
+}
+
+.markdown-source-view.mod-cm6 .edit-block-button {
+    background-color: var(--internal-buttons);
+    box-shadow: var(--box-shadow-small);
+    color: var(--text-on-accent);
+    border-radius: var(--border-radius-medium);
+}
+
+/* Codeblocks */
+
+/* div. from app.css */
+
+.cm-s-obsidian div.HyperMD-codeblock-bg {
+    border-left: var(--border-side-misc);
+    border-right: var(--border-side-misc);
+    padding-left: 2rem;
+}
+
+.cm-s-obsidian div.HyperMD-codeblock-begin-bg {
+    border-top: var(--border-side-misc);
+    border-top-left-radius: var(--border-radius-medium);
+    border-top-right-radius: var(--border-radius-medium);
+}
+
+.cm-s-obsidian div.HyperMD-codeblock-end-bg {
+    border-bottom: var(--border-side-misc);
+    border-bottom-left-radius: var(--border-radius-medium);
+    border-bottom-right-radius: var(--border-radius-medium);
+}
+
+.cm-s-obsidian .HyperMD-codeblock-begin,
+.cm-s-obsidian .HyperMD-codeblock-end {
+    color: var(--text-accent);
+}
+
+.markdown-preview-view pre {
+    border-radius: var(--border-radius-medium);
+    padding-left: 25px;
+}
diff --git a/scss/base/_codeblocks.scss b/scss/base/_codeblocks.scss