Merge pull request #120 from eoneill/eoneill-mod-registry

nocanoa · web-flow · commit 9bb1524ed8bb · 2025-02-07T19:58:44.000Z
rename Themes -&gt; Mods
diff --git a/content/contribute/CONTRIBUTING.md b/content/contribute/CONTRIBUTING.md
@@ -1,7 +1,7 @@
 ---
 title: Contributing to Zen Browser
 draft: false
-lastmod: 2024-08-26
+lastmod: 2025-02-07
 ---
 
 Thank you for considering contributing to Zen Browser! We appreciate your time and effort in improving this project. The following is a set of guidelines for contributing to Zen Browser. These guidelines are intended to make it easier for you to get involved.
@@ -23,7 +23,7 @@ To help you get started with contributing, we have created separate guides for e
 - [[www | Getting Started with Zen's Homepage Development]]
 - [[docs | Getting Started with Documentation Contributions]]
 - [[translation | Getting Started with Translations]]
-  
+
 Please follow the appropriate guide based on the repository you want to contribute to.
 
 ### Reporting Bugs
@@ -33,15 +33,15 @@ If you find a bug, please open an issue and describe the problem in detail. Incl
 >[!important]
 >Open the issue in it's corresponding GitHub repository:
 >- [Desktop Browser App](https://github.com/zen-browser/desktop/issues)
->- [Zen's Custom Themes](https://github.com/zen-browser/theme-store)
+>- [Zen's Custom Mods](https://github.com/zen-browser/theme-store)
 >- [Zen's Homepage Website](https://github.com/zen-browser/www)
 >- [This documentation Website](https://github.com/zen-browser/docs)
 
 ### Suggesting Features
 
 ![[discuss.png]]
 
-We welcome suggestions for new features or improvements to existing ones. To suggest a feature, please start a new Github discussion in the Ideas category. 
+We welcome suggestions for new features or improvements to existing ones. To suggest a feature, please start a new Github discussion in the Ideas category.
 *Use the correct Github Repository based on the list above*
 
 ---
diff --git a/content/index.md b/content/index.md
@@ -9,7 +9,7 @@ Welcome to **Zen Browser's Documentation!** Here, you'll find everything you nee
 * #### [[building|Building Zen Browser 📦]]
 * #### [[user-manual/index|User Manual 📖]]
 * #### [[guides/index|Guides 🛠️]]
-* #### [[themes-store/index|Theme Store 🎨]]
+* #### [[themes-store/index|Mods Registry 🎨]]
 * #### [[faq | Frequently Asked Questions ❓]]
 * #### [[benchmarks | Performance Benchmarks 📊]]
 * #### [[contribute/index | Contribution Guides 🌟]]
diff --git a/content/themes-store/index.md b/content/themes-store/index.md
@@ -1,3 +1,3 @@
 ---
-title: Themes Store 🎨
+title: Mods Registry 🎨
 ---
diff --git a/content/themes-store/themes-marketplace-preferences.md b/content/themes-store/themes-marketplace-preferences.md
@@ -1,17 +1,17 @@
 ---
-title: Themes Store Preferences ⚙️
-lastmod: 2024-09-16
+title: Mods Registry Preferences ⚙️
+lastmod: 2025-02-07
 ---
 
-The `preferences.json` file allows theme developers to define custom preferences that control the behavior and appearance of themes in the Zen Browser. Each preference is defined with a `property`, a `label`, a `type`, and optionally `options` (for dropdown preferences), `defaultValue`, `placeholder` (to configure preference placeholder) and `disabledOn` (to disable property on selected OS). The `preferences.json` file contains a list of these preference objects at its root.
+The `preferences.json` file allows mod developers to define custom preferences that control the behavior and appearance of mods in the Zen Browser. Each preference is defined with a `property`, a `label`, a `type`, and optionally `options` (for dropdown preferences), `defaultValue`, `placeholder` (to configure preference placeholder) and `disabledOn` (to disable property on selected OS). The `preferences.json` file contains a list of these preference objects at its root.
 
 ## Preferences fields
 
 ### Field: `property` - Property name
 
 The `property` field is a string that should follow Firefox's preference naming schema, similar to `about:config` entries. The `property` name can be any valid string that aligns with this schema.
 
-For example: `theme.mytheme.background_color`
+For example: `mod.mymod.background_color`
 
 
 ### Field: `label` - Label
@@ -35,7 +35,7 @@ The `checkbox` type allows a togglable input to enable or disable a property.
 
 ```json title="Checkbox Example"
 {
-  "property": "theme.mytheme.enable_dark_mode",
+  "property": "mod.mymod.enable_dark_mode",
   "label": "Enable dark mode",
   "type": "checkbox"
 }
@@ -47,7 +47,7 @@ The `dropdown` type allows to select a single choice on multiple options.
 
 ```json title="Dropdown Example"
 {
-  "property": "theme.mytheme.background_color",
+  "property": "mod.mymod.background_color",
   "label": "Background color",
   "type": "dropdown",
   "options": [
@@ -70,7 +70,7 @@ The `string` type is a text input that allows to insert valid css values without
 
 ```json title="String Example"
 {
-  "property": "theme.mytheme.tab_padding",
+  "property": "mod.mymod.tab_padding",
   "label": "Set tab padding",
   "type": "string"
 }
@@ -161,18 +161,18 @@ For example: `e.g: 10px`
 <details>
   <summary><font weight="bold" size=4.75><b>See Full Example</b></font></summary>
 
-Below is a full example of what a `preferences.json` file might look like with multiple preference objects in its root. Each object represents a preference defined for a theme:
+Below is a full example of what a `preferences.json` file might look like with multiple preference objects in its root. Each object represents a preference defined for a mod:
 
 ```json
 [
   {
-    "property": "theme.mytheme.enable_dark_mode",
+    "property": "mod.mymod.enable_dark_mode",
     "label": "Enable dark mode",
     "type": "checkbox",
     "defaultValue": true
   },
   {
-    "property": "theme.mytheme.background_color",
+    "property": "mod.mymod.background_color",
     "label": "Background color",
     "type": "dropdown",
     "placeholder": "Select a color",
@@ -189,7 +189,7 @@ Below is a full example of what a `preferences.json` file might look like with m
     ]
   },
   {
-    "property": "theme.mytheme.show_bookmarks_bar",
+    "property": "mod.mymod.show_bookmarks_bar",
     "label": "Show bookmarks bar",
     "type": "string",
     "disabledOn": ["macos"]
@@ -207,19 +207,19 @@ In this example:
 
 ---
 
-## Using preferences in the theme's CSS
+## Using preferences in the mod's CSS
 
-Once you have defined your preferences in the `preferences.json` file, you can use them in your theme’s CSS to modify the appearance or behavior based on the user’s selections.
+Once you have defined your preferences in the `preferences.json` file, you can use them in your mod’s CSS to modify the appearance or behavior based on the user’s selections.
 
 ### Checkbox Preferences
 
 Checkbox preferences can be detected in your CSS using the `-moz-bool-pref` media query, which evaluates the boolean value (`true` or `false`) of a checkbox preference.
 
-For example, if you have a preference to enable dark mode in your theme:
+For example, if you have a preference to enable dark mode in your mod:
 
 ```json
 {
-  "property": "theme.mytheme.enable_dark_mode",
+  "property": "mod.mymod.enable_dark_mode",
   "label": "Enable dark mode",
   "type": "checkbox"
 }
@@ -228,7 +228,7 @@ For example, if you have a preference to enable dark mode in your theme:
 You can use the following CSS to change the background color when the dark mode preference is enabled:
 
 ```css {1}
-@media (-moz-bool-pref: "theme.mytheme.enable_dark_mode") {
+@media (-moz-bool-pref: "mod.mymod.enable_dark_mode") {
   body {
     background-color: #000;
     color: #fff;
@@ -238,16 +238,16 @@ You can use the following CSS to change the background color when the dark mode
 
 You can also have negative conditions
 ```css {1}
-@media not (-moz-bool-pref: "theme.mytheme.enable_dark_mode")
+@media not (-moz-bool-pref: "mod.mymod.enable_dark_mode")
 ```
 
 
 ### Dropdown Preferences
 
 > [!attention]
-> `property` fields defined in `preferences.json` using the `"dropdown"` type will have one key difference when used in your themes CSS: **dots (`.`) in the `property` name are replaced with hyphens (`-`)**.
+> `property` fields defined in `preferences.json` using the `"dropdown"` type will have one key difference when used in your mod’s CSS: **dots (`.`) in the `property` name are replaced with hyphens (`-`)**.
 >
-> E.g. `theme.mytheme.background_color` becomes `theme-mytheme-background_color` in the CSS file.
+> E.g. `mod.mymod.background_color` becomes `mod-mymod-background_color` in the CSS file.
 > This transformation ensures that the property can be used as an attribute selector or inside a media query.
 
 For dropdown preferences, you can detect the selected value using the `:has(){:css}` CSS pseudo-class, which applies styles based on the selected attribute and value in the DOM.
@@ -256,7 +256,7 @@ For example, if you have a preference to select the background color from a drop
 
 ```json
 {
-  "property": "theme.mytheme.background_color",
+  "property": "mod.mymod.background_color",
   "label": "Background color",
   "type": "dropdown",
   "options": [
@@ -276,21 +276,21 @@ You can use the following CSS to change the background color based on the select
 
 ```css {2,8,14}
 /* Green background */
-body:has(#theme-mytheme[theme-mytheme-background_color="green"]) {
+body:has(#mod-mymod[mod-mymod-background_color="green"]) {
   background-color: #008000;
   color: #000;
 }
 
 /* Blue background */
-body:has(#theme-mytheme[theme-mytheme-background_color="blue"]) {
+body:has(#mod-mymod[mod-mymod-background_color="blue"]) {
   background-color: #0000ff;
   color: #fff;
 }
 ```
 
 In this example:
 - The background color and text color change based on the value selected in the `background_color` dropdown.
-- The selector `body:has(#theme-mytheme[background_color="value"]){:css}` checks the `background_color` attribute and applies the relevant styles based on the selected option.
+- The selector `body:has(#mod-mymod[background_color="value"]){:css}` checks the `background_color` attribute and applies the relevant styles based on the selected option.
 
 ---
 
@@ -302,12 +302,12 @@ Suppose your `preferences.json` file includes these two preferences:
 ```json
 [
   {
-    "property": "theme.mytheme.enable_dark_mode",
+    "property": "mod.mymod.enable_dark_mode",
     "label": "Enable dark mode",
     "type": "checkbox"
   },
   {
-    "property": "theme.mytheme.background_color",
+    "property": "mod.mymod.background_color",
     "label": "Background color",
     "type": "dropdown",
     "options": [
@@ -328,20 +328,20 @@ You can combine the CSS like this:
 
 ```css
 /* Checkbox for dark mode */
-@media (-moz-bool-pref: "theme.mytheme.enable_dark_mode") {
+@media (-moz-bool-pref: "mod.mymod.enable_dark_mode") {
   body {
     background-color: #000;
     color: #fff;
   }
 }
 
 /* Dropdown for background color selection */
-body:has(#theme-mytheme[theme-mytheme-background_color="green"]) {
+body:has(#mod-mymod[mod-mymod-background_color="green"]) {
   background-color: #008000;
   color: #000;
 }
 
-body:has(#theme-mytheme[theme-mytheme-background_color="blue"]) {
+body:has(#mod-mymod[mod-mymod-background_color="blue"]) {
   background-color: #0000ff;
   color: #fff;
 }
@@ -358,16 +358,16 @@ This allows users to:
 String preferences can be detected in your CSS using the `var(--property)` operator. The preference property is saved at `:root` level.
 
 > [!attention]
-> `property` fields defined in `preferences.json` using the `"string"` type will have one key difference when used in your themes CSS: **dots (`.`) in the `property` name are replaced with hyphens (`-`)**.
+> `property` fields defined in `preferences.json` using the `"string"` type will have one key difference when used in your mod’s CSS: **dots (`.`) in the `property` name are replaced with hyphens (`-`)**.
 >
-> E.g. `theme.mytheme.background_color` becomes `theme-mytheme-background_color` in the CSS file.
+> E.g. `mod.mymod.background_color` becomes `mod-mymod-background_color` in the CSS file.
 > This transformation ensures that the property can be used as an attribute selector or inside a media query.
 
-For example, if you have a preference to enable dark mode in your theme:
+For example, if you have a preference to enable dark mode in your mod:
 
 ```json
 {
-  "property": "theme.mytheme.background_color",
+  "property": "mod.mymod.background_color",
   "label": "Background color",
   "type": "string"
 }
@@ -377,6 +377,6 @@ You can use the following CSS to change the background color when the dark mode
 
 ```css {2}
 .myClass {
-  background-color: var(--theme-mytheme-background_color)
+  background-color: var(--mod-mymod-background_color)
 }
 ```
diff --git a/content/themes-store/themes-marketplace-submission-guidelines.md b/content/themes-store/themes-marketplace-submission-guidelines.md
@@ -1,33 +1,33 @@
 ---
-title: Themes Store Submission Guidelines 📋
-lastmod: 2024-08-19
+title: Mods Registry Submission Guidelines 📋
+lastmod: 2025-02-07
 ---
 
-If you are a theme developer and would like to submit your theme, please follow these guidelines:
+If you are a [mod developer] and would like to submit your mod, please follow these guidelines:
 
-1. **Theme requirements**:
-    - Your theme must be compatible with Zen Browser.
-    - Your theme must be open-source.
-    - Your theme must not contain any malicious code.
-    - Your theme must not violate any copyright laws.
+1. **Mod requirements**:
+    - Your mod must be compatible with Zen Browser.
+    - Your mod must be open-source.
+    - Your mod must not contain any malicious code.
+    - Your mod must not violate any copyright laws.
 
-2. **Theme Validation**:
-    - Your theme's name must be unique and less than `25` characters.
-    - Your theme's description must be less than `100` characters.
-    - Your theme's screenshot must be a `PNG` with a size of `300x200` (it can be resized after upload).
-    - Your theme must contain a valid `README` describing the theme and how to use it.
-    - If your theme has any preferences values, they must be set in the `preferences` text area as a `JSON` object.
+2. **Mod Validation**:
+    - Your mod's name must be unique and less than `25` characters.
+    - Your mod's description must be less than `100` characters.
+    - Your mod's screenshot must be a `PNG` with a size of `300x200` (it can be resized after upload).
+    - Your mod must contain a valid `README` describing the mod and how to use it.
+    - If your mod has any preferences values, they must be set in the `preferences` text area as a `JSON` object.
       - See how preferences work [here](themes-store/themes-marketplace-preferences.md).
 
-3. **Theme Submission**:
-    - To submit your theme, please create an issue [here](https://github.com/zen-browser/theme-store/issues/new?assignees=&labels=new-theme&projects=&template=create-theme.yml&title=%5Bcreate-theme%5D%3A+)
+3. **Mod Submission**:
+    - To submit your mod, please create an issue [here](https://github.com/zen-browser/theme-store/issues/new?assignees=&labels=new-theme&projects=&template=create-theme.yml&title=%5Bcreate-theme%5D%3A+)
     - Fill out the template with the required information.
-    - Once you have submitted your theme, it will be analyzed by a bot and a pull request will be created.
-    - If your theme is approved, it will be added to the Themes Marketplace.
+    - Once you have submitted your mod, it will be analyzed by a bot and a pull request will be created.
+    - If your mod is approved, it will be added to the Mods Registry.
 
-4. **Theme Update**:
-    - If you would like to update your theme, please create an issue [here](https://github.com/zen-browser/theme-store/issues/new)
+4. **Mod Update**:
+    - If you would like to update your mod, please create an issue [here](https://github.com/zen-browser/theme-store/issues/new)
     - Please explain the changes you have made.
 
 > [!info]
-> Themes are automatically updated and generated by the bot. If your theme is not approved, you will receive a message with the reason why it was not approved.
+> Mods are automatically updated and generated by the bot. If your mod is not approved, you will receive a message with the reason why it was not approved.
diff --git a/content/themes-store/themes-marketplace.md b/content/themes-store/themes-marketplace.md
@@ -1,16 +1,16 @@
 ---
-title: Information about Themes Store ℹ️
-lastmod: 2024-09-19
+title: Information about Mods Registry ℹ️
+lastmod: 2025-02-07
 ---
 
-The Themes Store is a place where you can find and install themes for Zen Browser.
+The Mods Registry is a place where you can find and install mods for Zen Browser.
 
-## How to install a theme
+## How to install a mod
 
 1. Open Zen Browser.
-2. Click on the theme you would like to install on the [Themes Store](https://www.zen-browser.app/themes).
+2. Click on the mod you would like to install on the [Mods Registry](https://www.zen-browser.app/mods).
 3. Click on the "Install" button.
 
-## For theme developers
+## For mod developers
 
-If you are a theme developer and would like to submit your theme, please follow the instructions on the [Submission Guidelines](themes-store/themes-marketplace-submission-guidelines.md) page.
+If you are a mod developer and would like to submit your mod, please follow the instructions on the [Submission Guidelines](themes-store/themes-marketplace-submission-guidelines.md) page.

-Original file line number
+Diff line change
@@ @@ -1,3 +1,3 @@ @@
 ---
 -title: Themes Store 🎨
 +title: Mods Registry 🎨
 ---