✨Updated Publish, Theme, and Contributing Documentation (#42)

Author: Rebbecca Bishop

.gitignore

@@ -10,3 +10,5 @@ Thumbs.db
 .obsidian
 .obsidian/*
 !.obsidian/snippets
+.idea/
+.vscode/

README.md

@@ -3,3 +3,23 @@
 This repository contains the vault for the Obsidian Developer Docs.
 
 A hosted version of this vault is available at https://docs.obsidian.md/.
+
+## Contributing
+
+**You can contribute in several ways**:
+
+- **Fix typos and mistakes**: If you want to fix a typo or other small modifications, you can submit a pull request without creating an issue. For smaller edits, you can use the GitHub web interface instead of cloning the repository.
+- **Add missing, outdated, or clarifying  content**: If you want to add, remove, or expand on current content, please [submit an issue](https://github.com/obsidianmd/obsidian-developer-docs/issues/new) before you start working on it. We will let you know if this is something that should be worked on, or not.
+- Any contributions to the docs must follow our [Style guide](https://help.obsidian.md/Contributing+to+Obsidian/Style+guide).
+
+> [!warning]
+> Any page in `References/TypeScript API` is automatically generated by scripts that pull from our codebase. We **can** accept issues on these files, but **cannot** accept direct PR's on them.
+
+**To make changes to Obsidian Developer docs**:
+
+- Fork the [obsidian-developer-docs](https://github.com/obsidianmd/obsidian-developer-docs) repository
+- In the Obsidian vault switcher, select Open folder as vault
+- Make your change in Obsidian
+- Confirm the change is presentable in **Reading View**
+- Commit your change to your fork
+- Submit your PR to the obsidian-developer-docs repo for final review

en/Home.md

@@ -29,4 +29,7 @@ If you get stuck, or if you're looking for feedback, [join the community](https:
 
 ## Contributing
 
-If you see any errors or room for improvement on this site, feel free to open an issue or pull request on [our GitHub repository](https://github.com/obsidianmd/obsidian-developer-docs). Thank you in advance for contributing!
+If you see any errors or room for improvement on this site, or want to submit a PR, feel free to open an issue on [our GitHub repository](https://github.com/obsidianmd/obsidian-developer-docs).
+Additional details are available on our [readme](https://github.com/obsidianmd/obsidian-developer-docs#readme).
+
+Thank you in advance for contributing!

en/Reference/CSS variables/Publish/Publish.md

@@ -0,0 +1,15 @@
+
+### Introduction
+
+Many of the [[CSS variables]] utilised in the Obsidian app can also be employed in Obsidian Publish (Publish), with corresponding selectors. However, to address to the differing requirements of Publish, the variables in this section were specifically created for Publish, and are to be inserted within the `.published-container` selector. 
+
+See [[Build a Publish theme]] for more details.
+
+### Index
+
+- [[Site fonts]]
+- [[Site header]]
+- [[Site navigation]]
+- [[Site components]]
+- [[Site sidebars]]
+- [[Site pages]]

en/Reference/CSS variables/Publish/Site fonts.md

@@ -26,5 +26,3 @@ Publish-specific variables should be defined on the `.published-container`.
 | `--font-interface-theme` | Font family for interface elements such as navigation |
 | `--font-mermaid`         | Font family for Mermaid diagrams                      |
 | `--page-title-font`      | Font family for [[Site pages\|page titles]]                                                       |
-
-

en/Themes/App themes/Build a theme.md

@@ -108,10 +108,46 @@ Themes can support both light and dark color schemes. Define your CSS variables
 
 You'll see that Obsidian picks the colors based on the color scheme you've selected. Try changing the colors to `red`, `green`, or `blue` for a more dramatic change.
 
+## Step 6: Change the input hover border color
+
+The `:root` selector is commonly used when you want a variable to be accessible by every child element within the theme. This selector is often filled with Plugin variables.
+
+Here's an example to illustrate its usage:
+
+> [!example]
+> Let's consider an input field that can be found in various places within Obsidian, such as settings and note content. To define the variables specific to this input field, we can use the `:root` selector.
+>
+> ```css
+> :root {
+>    --input-focus-border-color: Highlight;
+>    --input-focus-outline: 1px solid Canvas;
+>    --input-unfocused-border-color: transparent;
+>    --input-disabled-border-color: transparent;
+>    --input-hover-border-color: black;
+>    /* Default Input Variables for Root */
+ > }
+ > ```
+
+
+Now, let's modify the hover border color in our CSS:
+
+```css
+:root {
+   --input-hover-border-color: red;
+/* Change from Black to Red */
+}
+```
+
+With this update, when you hover over any input field, the border color will change to a bright red.
+
 > [!tip]
-> Define any style that should be the same for both light and dark under `body`. Only define styles under `.theme-dark` or `.theme-light` if they are specific to that base color scheme.
+> When defining styles that should remain the same for both light and dark themes, it is recommended to use the `body` selector.
+>
+> Only use `.theme-dark` or `.theme-light` selectors if you want the styles to change when switching between light and dark themes.
+>
+> It's also important to use `:root` with caution and consideration. If your variable can be placed within `body`, `.theme-dark`, or `.theme-light` selectors instead, it is recommended to do so.
 
-## Step 6: Discover CSS variables in use
+## Step 7: Discover CSS variables in use
 
 Obsidian exposes more than 400 different CSS variables for customizing different parts of the user interface. In this step, you'll find the CSS variable for changing the ribbon background.
 

en/Themes/App themes/Theme guidelines.md

@@ -9,6 +9,10 @@ Since most of Obsidian's user interface uses CSS variables, you can create highl
 Override general variables under `body`, and colors under `.theme-light` or `.theme-dark`.
 
 ```css
+:root {
+  --input-focus-border-color: Highlight;
+}
+
 body {
   --font-text-size: 18px;
 }

en/Themes/Obsidian Publish themes/Build a Publish theme.md

@@ -1,5 +1,7 @@
 You can build themes for your [Obsidian Publish](https://help.obsidian.md/Obsidian+Publish/Introduction+to+Obsidian+Publish) site. Themes for Obsidian Publish use the same [[CSS variables]] as the Obsidian app along with [[CSS variables#Obsidian Publish|Publish-specific CSS variables]].
 
+> [!tip] See [[Build a theme]] for more in-depth information on the `body`, `:root`, `.theme-dark`, and `.theme-light` selectors.
+
 To build a theme for your site:
 
 1. Add a file called `publish.css` to the root folder of your vault.
@@ -8,18 +10,37 @@ To build a theme for your site:
 **Example:**
 
 ```css
+:root {
+  --input-unfocused-border-color: transparent;
+  --input-disabled-border-color: transparent;
+  --input-hover-border-color: black;
+  
+  /* ... By default, nothing is placed within :root in Publish. However, CSS variables here are considered global, and accessible to all sub-elements such as body and .theme-light. */
+}
+
 .published-container {
-  --readable-width: 1000px;
-  --bold-weight: 600;
-  /* ... CSS variables */
+  --page-width: 800px;
+  --page-side-padding: 48px;
+  
+  /* ... CSS variables for Publish that do not change when light or dark mode is enabled. They sometimes link to color variables in .theme-light or .theme-dark */
+}
+.body {
+  --inline-title-color: var(--h1-color);
+  --h2-color: red;
+
+  /* ... CSS variables that do not change when light or dark mode is enabled. They sometimes link to color variables in .theme-light or .theme-dark */
 }
 .theme-light {
   --background-primary: #ebf2ff;
-  /* ... CSS color variables for light mode */
+  --h1-color: #000000;
+  
+  /* ... CSS color variables for when light mode is enabled */
 }
 .theme-dark {
   --background-primary: #1f2a3f;
-  /* ... CSS color variables for dark mode */
+  --h1-color: #ffffff;
+  
+  /* ... CSS color variables for when dark mode is enabled */
 }
 ```