Merge pull request #27 from GRA0007/feat/custom-palettes

Add custom palette support

Author: GRA0007

.changes/add-palettes.md

@@ -0,0 +1,5 @@
+---
+"obsidian-css-inlay-colors": minor:feat
+---
+
+Adds support for custom palettes that let you use standard color charts like RAL (e.g. `(RAL 1004)` or `(aci 91)`)

.changes/fix-preview-border.md

@@ -0,0 +1,5 @@
+---
+"obsidian-css-inlay-colors": patch:fix
+---
+
+Ensure borders between the preview and text are hidden with certain themes in the live preview mode

.gitignore

@@ -7,5 +7,8 @@ main.js
 # Exclude sourcemaps
 *.map
 
-# obsidian
+# Obsidian
 data.json
+
+# Dev
+palette-colors.json

README.md

@@ -10,6 +10,8 @@ To use, just put any [valid CSS color syntax](https://developer.mozilla.org/en-U
 
 <img src="example.jpg" alt="Example of the extension running for all CSS color formats" width="200">
 
+## Features
+
 ### Color Picker
 
 Enable the color picker setting to change a color using a color picker in live preview mode. Note that the color picker does not support opacity, and will only let you select from sRGB colors. It will attempt to preserve the existing format you have written, as well as any existing opacity.
@@ -24,6 +26,33 @@ Surround a color with square brackets (\`[\#663399]\`) to hide the color name an
 
 There's also an option in the plugin settings to hide all color names globally.
 
+### Custom Palettes
+
+This plugin supports custom color palettes which you can use by enabling the setting and creating a [CSS snippet](https://help.obsidian.md/snippets) file that targets the palette names you want to support.
+
+Enabling the setting exposes classes for every inline code block surrounded by parentheses, replacing all spaces with hyphens, and converting to lowercase. For example, \`(RAL 170 50 10)\` exposes the class `.ral-170-50-10`. If that class gets a `color` set, it will show a color inlay.
+
+Note, the plugin detects classes that target `.css-color-inlay` only, see the example below.
+
+```css
+.css-color-inlay.my-cool-color { color: #663399; }
+/* Or, use CSS nesting */
+.css-color-inlay {
+  &.my-hot-color { color: orangered; }
+}
+/* Now `(my cool color)` and `(my hot color)` will have inlays */
+```
+
+#### Predefined Palettes
+
+There are 6 [predefined color palettes](./palettes.css) you can download using the button in the settings, and it includes the following:
+
+- AutoCAD Color Index
+- Australian Color Standard (AS 2700)
+- British Standard Colors (BS 381, BS 4800)
+- Federal Standard (FS 595C, ANA)
+- RAL Colors (Classic, Design, Effect, Plastics)
+
 ### Custom CSS
 
 Customize the inlays by targeting the `.css-color-inlay` class. For example, you can make them circular with the following snippet:

biome.json

@@ -25,5 +25,8 @@
       "quoteStyle": "single",
       "semicolons": "asNeeded"
     }
+  },
+  "files": {
+    "includes": ["**", "!palettes.css"]
   }
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "obsidian-css-inlay-colors",
   "version": "1.3.1",
-  "packageManager": "pnpm@10.17.1+sha512.17c560fca4867ae9473a3899ad84a88334914f379be46d455cbf92e5cf4b39d34985d452d2583baf19967fa76cb5c17bc9e245529d0b98745721aa7200ecaf7a",
+  "packageManager": "pnpm@10.18.3+sha512.bbd16e6d7286fd7e01f6b3c0b3c932cda2965c06a908328f74663f10a9aea51f1129eea615134bf992831b009eabe167ecb7008b597f40ff9bc75946aadfb08d",
   "description": "Show inline color hints for CSS colors",
   "main": "main.js",
   "scripts": {
@@ -20,7 +20,8 @@
     "inlay",
     "picker",
     "hex",
-    "rgb"
+    "rgb",
+    "palette"
   ],
   "author": "Benji Grant",
   "license": "MIT",
@@ -29,20 +30,20 @@
     "url": "https://github.com/GRA0007/obsidian-css-inlay-colors.git"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.2.4",
+    "@biomejs/biome": "^2.2.6",
     "@types/culori": "^4.0.1",
-    "@types/node": "^24.5.2",
+    "@types/node": "^24.8.1",
     "builtin-modules": "5.0.0",
     "covector": "^0.12.4",
-    "esbuild": "0.25.10",
+    "esbuild": "0.25.11",
     "obsidian": "latest",
     "tslib": "2.8.1",
-    "typescript": "5.9.2"
+    "typescript": "5.9.3"
   },
   "dependencies": {
     "@codemirror/language": "^6.11.3",
     "@codemirror/state": "^6.5.2",
-    "@codemirror/view": "^6.38.3",
+    "@codemirror/view": "^6.38.6",
     "culori": "^4.0.2"
   }
 }