@zenuml/core 2.0.9 → 2.0.11

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

@@ -19,6 +19,22 @@ Text messages are internally styled at four levels:
 3. text-skin-link: used for links
 4. text-skin-secondary: used for everything else, such as title, participant, divider notes, etc.
 
+When it comes to branding, the following elements are the most important:
+
+1. Canvas background, however, it can easily be overwhelming if you use high contrast color to the
+overall page background.
+2. Title background, participant background and fragment header background are the most attractive
+elements to brand. These are where your brand color should be used.
+3. The background of the occurrence (message bar) is also a good place to use your brand color, but
+less attractive than the above three.
+4. The borders of the frame, participant, fragment, occurrence and lifeline can add a bit
+of color to the diagram.
+5. The color of the message and the arrow  are the most important information on
+the diagram. Choose a striking and comfortable color for them. You can use the brand color here, but
+they should not be the only elements that reflect your brand color. Same principles apply to the
+background and text color for hover state.
+6. Then is the color of link and control. They should avoid attracting too much attention
+
 [%autowidth]
 |===
 |Category | Diagram Frame |Lifeline Layer | Message Layer

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zenuml/core",
-  "version": "2.0.9",
+  "version": "2.0.11",
   "private": false,
   "repository": {
     "url": "https://github.com/ZenUml/core.git"
@@ -21,6 +21,7 @@
     "start": "vue-cli-service serve",
     "git:branch:clean:gone": "git fetch -p && git branch -vv | awk '/: gone]/{print $1}' | xargs git branch -d",
     "git:branch:clean:merged": "git branch --merged|egrep -v \"(\\*|master|main|dev|skip_branch_name)\" | xargs git branch -d",
+    "git:branch:safe-delete": "echo '> git log --graph --left-right --cherry --oneline another-branch...main'",
     "git:forget": "git rm -r --cached . && git add . && git commit -m \"Forget all ignored files\"",
     "test:specs": "echo \"Error: test:specs is not supported\""
   },

package/tailwind.config.js

@@ -6,34 +6,35 @@ module.exports = {
     extend: {
       textColor: {
         skin: {
-          title: 'var(--color-text-title)',
-          participant: 'var(--color-text-participant)',
-          message: 'var(--color-text-message)',
-          "message-arrow": 'var(--color-message-arrow)', // message arrow head
-          "message-hover": 'var(--color-text-message-hover)',
-          comment: 'var(--color-text-comment)',
-          fragment: 'var(--color-text-fragment)',
+          title: 'var(--color-text-title, var(--color-text-message, var(--color-text-base, #000)))',
+          participant: 'var(--color-text-participant, var(--color-text-message, var(--color-text-base, #000)))',
+          message: 'var(--color-text-message, var(--color-text-base, #000))',
+          "message-arrow": 'var(--color-message-arrow, var(--color-border-frame, var(--color-border-base, #000)))', // message arrow head
+          "message-hover": 'var(--color-text-message-hover, var(--color-bg-base, #fff))',
+          comment: 'var(--color-text-comment, var(--color-text-secondary, var(--color-text-base, #000)))',
+          "fragment-header": 'var(--color-text-fragment-header, var(--color-text-message, #000))',
+          fragment: 'var(--color-text-fragment, var(--color-text-message, #000))',
           base: 'var(--color-text-base)',
           header: 'var(--color-text-header)',
           secondary: 'var(--color-text-secondary)',
-          control: 'var(--color-text-control)',
+          control: 'var(--color-text-control, var(--color-text-secondary, var(--color-text-base, #000)))',
           muted: 'var(--color-text-muted)',
           hover: 'var(--color-text-hover)',
-          link: `var(--color-text-link)`,
+          link: `var(--color-text-link, var(--color-text-secondary, var(--color-text-base, #000)))`,
           fill: `var(--color-text-fill)`,
         },
       },
       backgroundColor: {
         skin: {
-          canvas: 'var(--color-bg-canvas)',
-          frame: 'var(--color-bg-frame)',
-          title: 'var(--color-bg-title)',
-          participant: 'var(--color-bg-participant)',
-          lifeline: 'var(--color-border-participant)',
+          canvas: 'var(--color-bg-canvas, var(--color-bg-base, #fff))',
+          frame: 'var(--color-bg-frame, var(--color-bg-canvas, var(--color-bg-base, #fff)))',
+          title: 'var(--color-bg-title, var(--color-bg-frame, var(--color-bg-canvas, var(--color-bg-base, #fff))))',
+          participant: 'var(--color-bg-participant, var(--color-bg-frame, var(--color-bg-canvas, var(--color-bg-base, #fff))))',
+          lifeline: 'var(--color-border-participant, var(--color-border-participant, var(--color-border-frame, var(--color-border-base, #000))))',
           divider: 'var(--color-border-participant)',
-          "message-hover": 'var(--color-bg-message-hover)',
-          "fragment-header": 'var(--color-bg-fragment-header)',
-          occurrence: 'var(--color-bg-occurrence)',
+          "message-hover": 'var(--color-bg-message-hover, var(--color-text-base, #000))',
+          "fragment-header": 'var(--color-bg-fragment-header, transparent)',
+          occurrence: 'var(--color-bg-occurrence, var(--color-bg-participant, var(--color-bg-frame, var(--color-bg-canvas, var(--color-bg-base, #fff)))))',
           base: 'var(--color-bg-base)',
           secondary: 'var(--color-bg-secondary)',
           hover: 'var(--color-bg-hover)',
@@ -42,11 +43,11 @@ module.exports = {
       },
       borderColor: {
         skin: {
-          frame: 'var(--color-border-frame)',
-          participant: 'var(--color-border-participant)',
-          "message-arrow": 'var(--color-message-arrow)', // message arrow line
-          fragment: 'var(--color-border-fragment)',
-          occurrence: 'var(--color-border-occurrence)',
+          frame: 'var(--color-border-frame, var(--color-border-base, #000))',
+          participant: 'var(--color-border-participant, var(--color-border-frame, var(--color-border-base, #000)))',
+          "message-arrow": 'var(--color-message-arrow, var(--color-border-frame,  var(--color-border-base, #000)))', // message arrow line
+          fragment: 'var(--color-border-fragment, var(--color-border-frame,  var(--color-border-base, #000)))',
+          occurrence: 'var(--color-border-occurrence, var(--color-border-frame,  var(--color-border-base, #000)))',
           base: 'var(--color-border-base)',
           secondary: 'var(--color-border-secondary)',
         },