@zenuml/core 2.0.5 → 2.0.6

package/docs/asciidoc/create-my-own-theme.adoc

@@ -11,7 +11,48 @@ You can apply themes on the follow products:
 . JetBrains plugins (Intellij IDEA, WebStore, PhpStore, etc.)
 . https://app.zenuml.com
 
-With stylebot browser extension, you can apply themes in any browsers.
+With https://chrome.google.com/webstore/detail/user-css/okpjlejfhacmgjkmknjhadmkdbcldfcb[User CSS]
+browser extension, you can apply themes anywhere (e.g. https://zenuml.cn).
+
+== Principles of creating themes
+
+=== 1. Do not override tailwind classes
+The tailwind classes directly applied on the elements are important for layout so
+they are NOT meant be overridden.
+
+For example,
+[html]
+....
+// Participant.vue
+<div class="participant relative flex flex-col justify-center z-10 h-10"
+....
+
+=== 2. Use provided class selectors
+Important elements are provided with a semantic class selector. You can use them
+to override the style.
+
+For the above example, the class selector is `participant`. You can override the
+style by using this selector.
+
+[css]
+....
+// use `.zenuml .sequence-diagram` to increase specificity
+.zenuml .sequence-diagram .participant {
+  background-color: #f00;
+}
+....
+
+=== 3. Debug your theme
+
+You can use the browser extension https://chrome.google.com/webstore/detail/user-css/okpjlejfhacmgjkmknjhadmkdbcldfcb[User CSS]
+to debug your theme.
+
+image::user-css.png[User CSS]
+
+Alternatively, you can use our web app https://app.zenuml.com[app.zenuml.com]. Go to the CSS tab
+and paste your theme there. You can see the result immediately.
+
+image::theme-debug-web-app.png[]
 
 === JetBrains
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zenuml/core",
-  "version": "2.0.5",
+  "version": "2.0.6",
   "private": false,
   "repository": {
     "url": "https://github.com/ZenUml/core.git"
@@ -27,7 +27,6 @@
   "main": "./dist/zenuml/core.umd.min.js",
   "types": "./types/index.d.ts",
   "dependencies": {
-    "@tailwindcss/postcss7-compat": "^2.0.2",
     "@types/assert": "^1.5.4",
     "@types/ramda": "^0.28.0",
     "antlr4": "~4.8.0",
@@ -39,9 +38,9 @@
     "lodash": "^4.17.20",
     "marked": "^2.0.0",
     "pino": "^8.7.0",
-    "postcss": "^7",
+    "postcss": "^8.4.19",
     "ramda": "^0.28.0",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
+    "tailwindcss": "^3.2.4",
     "vue": "2.6.12",
     "vue-gtag": "^1.16.1",
     "vue-template-compiler": "2.6.12",
@@ -71,6 +70,7 @@
     "@vue/eslint-config-typescript": "^5.0.2",
     "@vue/test-utils": "^1.1.3",
     "@vue/vue2-jest": "^29.1.1",
+    "autoprefixer": "^10.4.13",
     "babel-eslint": "^10.1.0",
     "core-js": "^3.8.3",
     "cypress": "^9.4.1",

package/tailwind.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   important: '.zenuml',
-  purge: { content: ['./public/**/*.html', './src/**/*.vue'] },
+  content: ['./public/**/*.html', './src/**/*.vue'],
   darkMode: false, // or 'media' or 'class'
   theme: {
     extend: {},