ds-likec4-reusable-style 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +26 -0
  2. package/ds-reusable-style.ts +165 -0
  3. package/package.json +26 -0
package/README.md ADDED
@@ -0,0 +1,26 @@
1
+ # ds-likec4-reusable-style
2
+
3
+ A [LikeC4 reusable style](https://likec4.dev/dsl/config/programmatic/#reusable-styles) package providing the doubleSlash color theme for LikeC4 architecture diagrams.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ npm install ds-likec4-reusable-style
9
+ ```
10
+
11
+ > **Peer dependency:** requires `likec4 >= 1.56.0`
12
+
13
+ ## Usage
14
+
15
+ Import the style in your `likec4.config.ts` and pass it to `defineConfig`:
16
+
17
+ ```ts
18
+ import { defineConfig } from 'likec4/config'
19
+ import styles from 'ds-likec4-reusable-style'
20
+
21
+ export default defineConfig({
22
+ name: 'my-project',
23
+ title: 'My Project',
24
+ styles,
25
+ })
26
+ ```
package/ds-reusable-style.ts ADDED
@@ -0,0 +1,165 @@
1
+ import { defineStyle, defineTheme } from 'likec4/config'
2
+
3
+ const themeLight = defineTheme({
4
+ colors: {
5
+ context: {
6
+ elements: {
7
+ fill: '#FFFFFF',
8
+ stroke: '#00A5E1',
9
+ hiContrast: '#000000',
10
+ loContrast: '#000000',
11
+ },
12
+ relationships: {
13
+ line: '#6D6D6D',
14
+ label: '#000000',
15
+ labelBg: 'none',
16
+ },
17
+ },
18
+ system: {
19
+ elements: {
20
+ fill: '#FFFFFF',
21
+ stroke: '#00A5E1',
22
+ hiContrast: '#000000',
23
+ loContrast: '#000000',
24
+ },
25
+ relationships: {
26
+ line: '#6D6D6D',
27
+ label: '#000000',
28
+ labelBg: 'none',
29
+ },
30
+ },
31
+ container: {
32
+ elements: {
33
+ fill: '#EEF8FE',
34
+ stroke: '#FFFFFF',
35
+ hiContrast: '#000000',
36
+ loContrast: '#000000',
37
+ },
38
+ relationships: {
39
+ line: '#6D6D6D',
40
+ label: '#000000',
41
+ labelBg: 'none',
42
+ },
43
+ },
44
+ component: {
45
+ elements: {
46
+ fill: '#D7E9F4',
47
+ stroke: '#FFFFFF',
48
+ hiContrast: '#000000',
49
+ loContrast: '#000000',
50
+ },
51
+ relationships: {
52
+ line: '#6D6D6D',
53
+ label: '#000000',
54
+ labelBg: 'none',
55
+ },
56
+ },
57
+ module: {
58
+ elements: {
59
+ fill: '#AFC1C7',
60
+ stroke: '#FFFFFF',
61
+ hiContrast: '#000000',
62
+ loContrast: '#000000',
63
+ },
64
+ relationships: {
65
+ line: '#6D6D6D',
66
+ label: '#000000',
67
+ labelBg: 'none',
68
+ },
69
+ },
70
+ code: {
71
+ elements: {
72
+ fill: '#84999F',
73
+ stroke: '#FFFFFF',
74
+ hiContrast: '#FFFFFF',
75
+ loContrast: '#FFFFFF',
76
+ },
77
+ relationships: {
78
+ line: '#6D6D6D',
79
+ label: '#000000',
80
+ labelBg: 'none',
81
+ },
82
+ },
83
+ agent: {
84
+ elements: {
85
+ fill: '#EFEFEF',
86
+ stroke: '#FFFFFF',
87
+ hiContrast: '#000000',
88
+ loContrast: '#000000',
89
+ },
90
+ relationships: {
91
+ line: '#6D6D6D',
92
+ label: '#000000',
93
+ labelBg: 'none',
94
+ },
95
+ },
96
+ external: {
97
+ elements: {
98
+ fill: '#EFEFEF',
99
+ stroke: '#FFFFFF',
100
+ hiContrast: '#000000',
101
+ loContrast: '#000000',
102
+ },
103
+ relationships: {
104
+ line: '#6D6D6D',
105
+ label: '#000000',
106
+ labelBg: 'none',
107
+ },
108
+ },
109
+ database: {
110
+ elements: {
111
+ fill: '#D7E9F4',
112
+ stroke: '#FFFFFF',
113
+ hiContrast: '#000000',
114
+ loContrast: '#000000',
115
+ },
116
+ relationships: {
117
+ line: '#6D6D6D',
118
+ label: '#000000',
119
+ labelBg: 'none',
120
+ },
121
+ },
122
+ interface: {
123
+ elements: {
124
+ fill: '#00A5E1',
125
+ stroke: '#FFFFFF',
126
+ hiContrast: '#000000',
127
+ loContrast: '#000000',
128
+ },
129
+ relationships: {
130
+ line: '#6D6D6D',
131
+ label: '#000000',
132
+ labelBg: 'none',
133
+ },
134
+ },
135
+ 'external-interface': {
136
+ elements: {
137
+ fill: '#6D6D6D',
138
+ stroke: '#FFFFFF',
139
+ hiContrast: '#000000',
140
+ loContrast: '#000000',
141
+ },
142
+ relationships: {
143
+ line: '#6D6D6D',
144
+ label: '#000000',
145
+ labelBg: 'none',
146
+ },
147
+ },
148
+ },
149
+ })
150
+
151
+ export default defineStyle({
152
+ theme: themeLight,
153
+ defaults: {
154
+ border: 'solid',
155
+ opacity: 100,
156
+ group: {
157
+ border: 'solid',
158
+ },
159
+ relationship: {
160
+ color: 'context',
161
+ line: 'solid',
162
+ arrow: 'vee',
163
+ },
164
+ },
165
+ })
package/package.json ADDED
@@ -0,0 +1,26 @@
1
+ {
2
+ "name": "ds-likec4-reusable-style",
3
+ "version": "0.0.1",
4
+ "description": "LikeC4 reusable style theme for doubleSlash projects",
5
+ "homepage": "https://www.doubleslash.de",
6
+ "license": "doubleSlash Net Business GmbH",
7
+ "author": "doubleSlash Net Business GmbH",
8
+ "private": false,
9
+ "files": [
10
+ "ds-reusable-style.ts"
11
+ ],
12
+ "main": "./ds-reusable-style.ts",
13
+ "types": "./ds-reusable-style.ts",
14
+ "exports": {
15
+ ".": {
16
+ "types": "./ds-reusable-style.ts",
17
+ "default": "./ds-reusable-style.ts"
18
+ }
19
+ },
20
+ "peerDependencies": {
21
+ "likec4": ">=1.56.0"
22
+ },
23
+ "scripts": {
24
+ "prepublishOnly": "echo 'Publishing ds-likec4-reusable-style to npm...'"
25
+ }
26
+ }