feat: add super colors theme toggle (#28)

* add super colors theme toggle * changed link color * updated yarn.lock --------- Co-authored-by: marcaux <contact@marcaux.de>
standardnotes · Feb 26, 2024 · 4283f3f · 4283f3f
1 parent 6fcc1e8
commit 4283f3f
Show file tree

Hide file tree

Showing 8 changed files with 133 additions and 0 deletions.
diff --git a/cdn/plugins.json b/cdn/plugins.json
@@ -66,5 +66,9 @@
   {
     "identifier": "wtf.laux.theme.monokai-ristretto",
     "staticFiles": ["dist", "package.json"]
+  },
+  {
+    "identifier": "wtf.laux.theme.super-colors",
+    "staticFiles": ["dist", "package.json"]
   }
 ]
diff --git a/packages/wtf.laux.theme.super-colors/.gitignore b/packages/wtf.laux.theme.super-colors/.gitignore
diff --git a/packages/wtf.laux.theme.super-colors/CHANGELOG.md b/packages/wtf.laux.theme.super-colors/CHANGELOG.md
@@ -0,0 +1,5 @@
+# Change Log
+
+# 1.0.0 (2024-02-26)
+
+- init
diff --git a/packages/wtf.laux.theme.super-colors/LICENSE.md b/packages/wtf.laux.theme.super-colors/LICENSE.md
diff --git a/packages/wtf.laux.theme.super-colors/README.md b/packages/wtf.laux.theme.super-colors/README.md
@@ -0,0 +1,2 @@
+# Super Colors
+
diff --git a/packages/wtf.laux.theme.super-colors/package.json b/packages/wtf.laux.theme.super-colors/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "@standardnotes/super-colors",
+  "version": "1.0.0",
+  "main": "dist/dist.css",
+  "author": "Marco Laux",
+  "publishConfig": {
+    "access": "public"
+  },
+  "sn": {
+    "name": "Super Colors",
+    "content_type": "SN|Theme",
+    "description": "Theme agnostic toggle to colorize different elements of the Super Editor",
+    "area": "themes",
+    "main": "dist/dist.css",
+    "layerable": true,
+    "showInGallery": true
+  },
+  "scripts": {
+    "build": "webpack --entry ./src/main.scss --config ../theme.webpack.config.js",
+    "test": "echo \"Error: no test specified\" && exit 0"
+  },
+  "devDependencies": {
+    "webpack": "*"
+  }
+}
diff --git a/packages/wtf.laux.theme.super-colors/src/main.scss b/packages/wtf.laux.theme.super-colors/src/main.scss
@@ -0,0 +1,89 @@
+body { // add another element to make sure the hiearchy is higher
+  .Lexical__h1,
+  .Lexical__h2,
+  .Lexical__h3,
+  .Lexical__h4,
+  .Lexical__h5 {
+    color: var(--sn-stylekit-accessory-tint-color-3);
+  }
+
+  .Lexical__textBold{
+    color: var(--sn-stylekit-accessory-tint-color-2);
+  }
+
+  .Lexical__textItalic {
+    color: var(--sn-stylekit-accessory-tint-color-5);
+  }
+
+  .Lexical__link {
+    color: var(--sn-stylekit-accessory-tint-color-4);
+  }
+
+  .Lexical__ul, 
+  .Lexical__ol {
+    > li {
+      color: var(--sn-stylekit-accessory-tint-color-1);
+
+      > .Lexical__ul, 
+      > .Lexical__ol {
+        > li {
+          color: var(--sn-stylekit-accessory-tint-color-2);
+
+          > .Lexical__ul, 
+          > .Lexical__ol {
+            > li {
+              color: var(--sn-stylekit-accessory-tint-color-3);
+
+              > .Lexical__ul, 
+              > .Lexical__ol {
+                > li {
+                  color: var(--sn-stylekit-accessory-tint-color-4);
+
+                  > .Lexical__ul, 
+                  > .Lexical__ol {
+                    > li {
+                      color: var(--sn-stylekit-accessory-tint-color-5);
+
+                      > .Lexical__ul, 
+                      > .Lexical__ol {
+                        > li {
+                          color: var(--sn-stylekit-accessory-tint-color-6);
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .Lexical__code {
+    .Lexical__tokenSelector {
+      color: var(--sn-stylekit-accessory-tint-color-5);
+    }
+
+    .Lexical__tokenProperty {
+      color: var(--sn-stylekit-accessory-tint-color-6);
+    }
+
+    .Lexical__tokenFunction {
+      color: var(--sn-stylekit-accessory-tint-color-5);
+    }
+
+    .Lexical__tokenVariable {
+      color: var(--sn-stylekit-accessory-tint-color-2);
+    }
+
+    .Lexical__tokenAttr {
+      color: var(--sn-stylekit-accessory-tint-color-4);
+    }
+
+    .Lexical__tokenOperator {
+      color: var(--sn-stylekit-accessory-tint-color-2);
+    }
+  }
+}
diff --git a/yarn.lock b/yarn.lock
@@ -7593,6 +7593,14 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@standardnotes/super-colors@workspace:packages/wtf.laux.theme.super-colors":
+  version: 0.0.0-use.local
+  resolution: "@standardnotes/super-colors@workspace:packages/wtf.laux.theme.super-colors"
+  dependencies:
+    webpack: "*"
+  languageName: unknown
+  linkType: soft
+
 "@standardnotes/utils@npm:1.9.0":
   version: 1.9.0
   resolution: "@standardnotes/utils@npm:1.9.0"