@zenuml/core 2.0.8 → 2.0.10

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

@@ -4,6 +4,89 @@ Since the elements on the rendered diagram is based on HTML Dom (and svg), it is
 to create your own theme. There is a repository on GitHub that have some themes collected
 by third party. You may be able to get some inspiration from there. https://github.com/abruzzi/zenuml-css-overrides
 
+== The Information Architecture
+image::./images/three-layer-info-arch.png[width=600]
+
+The diagram is rendered in two layers. The back layer is the lifeline layer. The front layer
+is the message layer.
+
+Key information on the diagram can be grouped in the following structure:
+
+Text messages are internally styled at four levels:
+
+1. text-skin-base: used for all messages
+2. text-skin-muted: used for comments
+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
+
+h|Text Info
+a|* Title
+* Brand
+a|* Participant name
+* Stereotype
+* Comment
+
+a|* Message name
+* Fragment type
+* Fragment condition
+* Comment
+* Divider name
+
+h|Shapes
+a|* Security (icon)
+* Tips (icon)
+a|* Participant box (rectangle)
+* Lifeline (vertical line)
+a|* Message arrow (line and head)
+* Fragment (rectangle)
+* Divider line (left and right)
+
+|===
+
+Each of the elements has a semantic selector that can be used to customize the appearance.
+
+The component has basic styling in itself mostly to support layout and positioning. Then
+the core renderer comes with a default theme that defines the appearance of the elements.
+
+[source,css]
+----
+
+----
+
+A typical custom theme will be like below:
+
+[source,css]
+----
+----
+
+== What can a theme change?
+
+A theme can change two aspects of the diagram:
+
+1. colors
+2. slightly change the layout (e.g. padding, margin, etc.). For example, you can make the
+diagram more compact by reducing the padding.
+
 == where can I apply themes
 
 You can apply themes on the follow products:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zenuml/core",
-  "version": "2.0.8",
+  "version": "2.0.10",
   "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

@@ -3,7 +3,62 @@ module.exports = {
   content: ['./public/**/*.html', './src/**/*.vue'],
   darkMode: false, // or 'media' or 'class'
   theme: {
-    extend: {},
+    extend: {
+      textColor: {
+        skin: {
+          title: 'var(--color-text-title, var(--color-text-message, var(--color-text-base, #000)))',
+          participant: 'var(--color-text-participant)',
+          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, var(--color-text-secondary, var(--color-text-base, #000)))',
+          muted: 'var(--color-text-muted)',
+          hover: 'var(--color-text-hover)',
+          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, 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, 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)',
+          fill: 'var(--color-bg-fill)',
+        },
+      },
+      borderColor: {
+        skin: {
+          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)',
+        },
+      },
+      gradientColorStops: {
+        skin: {
+          base: 'var(--color-bg-base)',
+          secondary: 'var(--color-bg-secondary)',
+        },
+      },
+    },
   },
   variants: {
     extend: {