@zenuml/core 2.0.8 → 2.0.9

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

@@ -4,6 +4,73 @@ 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.
+
+[%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.9",
   "private": false,
   "repository": {
     "url": "https://github.com/ZenUml/core.git"

package/tailwind.config.js

@@ -3,7 +3,61 @@ module.exports = {
   content: ['./public/**/*.html', './src/**/*.vue'],
   darkMode: false, // or 'media' or 'class'
   theme: {
-    extend: {},
+    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)',
+          base: 'var(--color-text-base)',
+          header: 'var(--color-text-header)',
+          secondary: 'var(--color-text-secondary)',
+          control: 'var(--color-text-control)',
+          muted: 'var(--color-text-muted)',
+          hover: 'var(--color-text-hover)',
+          link: `var(--color-text-link)`,
+          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)',
+          divider: 'var(--color-border-participant)',
+          "message-hover": 'var(--color-bg-message-hover)',
+          "fragment-header": 'var(--color-bg-fragment-header)',
+          occurrence: 'var(--color-bg-occurrence)',
+          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)',
+          participant: 'var(--color-border-participant)',
+          "message-arrow": 'var(--color-message-arrow)', // message arrow line
+          fragment: 'var(--color-border-fragment)',
+          occurrence: 'var(--color-border-occurrence)',
+          base: 'var(--color-border-base)',
+          secondary: 'var(--color-border-secondary)',
+        },
+      },
+      gradientColorStops: {
+        skin: {
+          base: 'var(--color-bg-base)',
+          secondary: 'var(--color-bg-secondary)',
+        },
+      },
+    },
   },
   variants: {
     extend: {