Skip to content

Commit

Permalink
fix: change from scss variables to css variables and appearance fixes.
Browse files Browse the repository at this point in the history
  • Loading branch information
mkb committed Apr 5, 2022
1 parent a610002 commit ad4c3a7
Show file tree
Hide file tree
Showing 18 changed files with 1,019 additions and 809 deletions.
14 changes: 5 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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)
Expand Down
661 changes: 409 additions & 252 deletions obsidian.css

Large diffs are not rendered by default.

11 changes: 3 additions & 8 deletions scss/_base.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
4 changes: 2 additions & 2 deletions scss/abstracts/_colors.scss
Original file line number Diff line number Diff line change
@@ -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%);
Expand All @@ -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%);
Expand Down
360 changes: 180 additions & 180 deletions scss/abstracts/_fonts.scss

Large diffs are not rendered by default.

4 changes: 0 additions & 4 deletions scss/abstracts/_mixins.scss

This file was deleted.

115 changes: 115 additions & 0 deletions scss/abstracts/_variables.scss
Original file line number Diff line number Diff line change
@@ -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;
}
69 changes: 69 additions & 0 deletions scss/base/_admonitions-and-codeblocks.scss
Original file line number Diff line number Diff line change
@@ -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;
}
29 changes: 0 additions & 29 deletions scss/base/_codeblocks.scss

This file was deleted.

Loading

0 comments on commit ad4c3a7

Please sign in to comment.