Adds support for using (CSS/HTML) named colors instead of hex color c…

…odes.
structurizr · Jan 15, 2023 · 4bfcaae · 4bfcaae
1 parent fbf4d59
commit 4bfcaae
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 31 deletions.
diff --git a/build.gradle b/build.gradle
@@ -9,7 +9,7 @@ repositories {
 }
 
 dependencies {
-    api 'com.structurizr:structurizr-client:1.17.0'
+    api 'com.structurizr:structurizr-client:1.18.0'
     implementation 'com.structurizr:structurizr-documentation:1.0.2'
 
     testImplementation 'org.codehaus.groovy:groovy-jsr223:3.0.13'
@@ -27,7 +27,7 @@ targetCompatibility = 1.8
 
 description = 'Structurizr DSL'
 group = 'com.structurizr'
-version = '1.22.0'
+version = '1.23.0'
 
 test {
     useJUnitPlatform()

diff --git a/docs/changelog.md b/docs/changelog.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## 1.23.0 (15th January 2023)
+
+- Adds support for using (CSS/HTML) named colors instead of hex color codes.
+
 ## 1.22.0 (5th January 2023)
 
 - Fixes #194 (Disabling the online DSL editor).

diff --git a/docs/language-reference.md b/docs/language-reference.md
@@ -1260,18 +1260,19 @@ Permitted children:
 
 ### element style
 
-The `element` keyword is used to define an element style. All nested properties (`shape`, `icon`, etc) are optional, see [Structurizr - Notation](https://structurizr.com/help/notation) for details about how tags and styles work.
+The `element` keyword is used to define an element style.
+All nested properties (`shape`, `icon`, etc) are optional.
 
 ```
 element <tag> {
     shape <Box|RoundedBox|Circle|Ellipse|Hexagon|Cylinder|Pipe|Person|Robot|Folder|WebBrowser|MobileDevicePortrait|MobileDeviceLandscape|Component>
     icon <file|url>
     width <integer>
     height <integer>
-    background <#rrggbb>
-    color <#rrggbb>
-    colour <#rrggbb>
-    stroke <#rrggbb>
+    background <#rrggbb|color name>
+    color <#rrggbb|color name>
+    colour <#rrggbb|color name>
+    stroke <#rrggbb|color name>
     strokeWidth <integer: 1-10>
     fontSize <integer>
     border <solid|dashed|dotted>
@@ -1284,20 +1285,28 @@ element <tag> {
 }
 ```
 
-Please note that element styles are designed to work with the Structurizr cloud service/on-premises installation/Lite, and may not be fully supported by the PlantUML, Mermaid, etc export formats.
+See the following links for details about how to use element styles:
 
-Important note: see [Help - Icons](https://structurizr.com/help/icons) if you are specifying an element style icon via a URL. 
+- [DSL cookbook - Element styles](https://github.com/structurizr/dsl/tree/master/docs/cookbook/element-styles)
+- [DSL cookbook - Groups](https://github.com/structurizr/dsl/tree/master/docs/cookbook/groups)
+- [Structurizr - Notation](https://structurizr.com/help/notation)
+
+Notes:
+
+- Colors can be specified as a hex code (e.g. `#ffff00`) or a CSS/HTML named color (e.g. `yellow`).
+- See [Help - Icons](https://structurizr.com/help/icons) for information about HTTPS/CORS if you are using the Structurizr cloud service/on-premises installation/Lite and specifying an element style icon via a URL.
+- Element styles are designed to work with the Structurizr cloud service/on-premises installation/Lite, and may not be fully supported by the [PlantUML, Mermaid, etc export formats](https://github.com/structurizr/export) (e.g. shapes and icons).
 
-            
 ### relationship style
 
-The `relationship` keyword is used to define a relationship style. All nested properties (`thickness`, `color`, etc) are optional, see [Structurizr - Notation](https://structurizr.com/help/notation)  for details about how tags and styles work.
+The `relationship` keyword is used to define a relationship style.
+All nested properties (`thickness`, `color`, etc) are optional.
 
 ```
 relationship <tag> {
     thickness <integer>
-    color #777777
-    colour #777777
+    color <#rrggbb|color name>
+    colour <#rrggbb|color name>
     style <solid|dashed|dotted>
     routing <Direct|Orthogonal|Curved>
     fontSize <integer>
@@ -1310,7 +1319,15 @@ relationship <tag> {
 }
 ```
 
-Please note that relationship styles are designed to work with the Structurizr cloud service/on-premises installation/Lite, and may not be fully supported by the PlantUML, Mermaid, etc export formats. 
+See the following links for details about how to use element styles:
+
+- [DSL cookbook - Relationship styles](https://github.com/structurizr/dsl/tree/master/docs/cookbook/relationship-styles)
+- [Structurizr - Notation](https://structurizr.com/help/notation)
+
+Notes:
+
+- Colors can be specified as a hex code (e.g. `#ffff00`) or a CSS/HTML named color (e.g. `yellow`).
+- Relationship styles are designed to work with the Structurizr cloud service/on-premises installation/Lite, and may not be fully supported by the [PlantUML, Mermaid, etc export formats](https://github.com/structurizr/export) (e.g. line/arrow colours). 
 
 ### theme
 

diff --git a/src/main/java/com/structurizr/dsl/ElementStyleParser.java b/src/main/java/com/structurizr/dsl/ElementStyleParser.java
@@ -66,29 +66,29 @@ void parseBackground(ElementStyleDslContext context, Tokens tokens) {
         ElementStyle style = context.getStyle();
 
         if (tokens.hasMoreThan(FIRST_PROPERTY_INDEX)) {
-            throw new RuntimeException("Too many tokens, expected: background <#rrggbb>");
+            throw new RuntimeException("Too many tokens, expected: background <#rrggbb|color name>");
         }
 
         if (tokens.includes(FIRST_PROPERTY_INDEX)) {
             String colour = tokens.get(1);
             style.setBackground(colour);
         } else {
-            throw new RuntimeException("Expected: background <#rrggbb>");
+            throw new RuntimeException("Expected: background <#rrggbb|color name>");
         }
     }
 
     void parseStroke(ElementStyleDslContext context, Tokens tokens) {
         ElementStyle style = context.getStyle();
 
         if (tokens.hasMoreThan(FIRST_PROPERTY_INDEX)) {
-            throw new RuntimeException("Too many tokens, expected: stroke <#rrggbb>");
+            throw new RuntimeException("Too many tokens, expected: stroke <#rrggbb|color name>");
         }
 
         if (tokens.includes(FIRST_PROPERTY_INDEX)) {
             String colour = tokens.get(1);
             style.setStroke(colour);
         } else {
-            throw new RuntimeException("Expected: stroke <#rrggbb>");
+            throw new RuntimeException("Expected: stroke <#rrggbb|color name>");
         }
     }
 
@@ -117,14 +117,14 @@ void parseColour(ElementStyleDslContext context, Tokens tokens) {
         ElementStyle style = context.getStyle();
 
         if (tokens.hasMoreThan(FIRST_PROPERTY_INDEX)) {
-            throw new RuntimeException("Too many tokens, expected: colour <#rrggbb>");
+            throw new RuntimeException("Too many tokens, expected: colour <#rrggbb|color name>");
         }
 
         if (tokens.includes(FIRST_PROPERTY_INDEX)) {
             String colour = tokens.get(1);
             style.setColor(colour);
         } else {
-            throw new RuntimeException("Expected: colour <#rrggbb>");
+            throw new RuntimeException("Expected: colour <#rrggbb|color name>");
         }
     }
 

diff --git a/src/main/java/com/structurizr/dsl/RelationshipStyleParser.java b/src/main/java/com/structurizr/dsl/RelationshipStyleParser.java
@@ -55,18 +55,18 @@ void parseThickness(RelationshipStyleDslContext context, Tokens tokens) {
     }
 
     void parseColour(RelationshipStyleDslContext context, Tokens tokens) {
-        // colour #rrggbb
+        // colour #rrggbb|color name
         RelationshipStyle style = context.getStyle();
 
         if (tokens.hasMoreThan(FIRST_PROPERTY_INDEX)) {
-            throw new RuntimeException("Too many tokens, expected: colour <#rrggbb>");
+            throw new RuntimeException("Too many tokens, expected: colour <#rrggbb|color name>");
         }
 
         if (tokens.includes(FIRST_PROPERTY_INDEX)) {
             String colour = tokens.get(1);
             style.setColor(colour);
         } else {
-            throw new RuntimeException("Expected: colour <#rrggbb>");
+            throw new RuntimeException("Expected: colour <#rrggbb|color name>");
         }
     }
 

diff --git a/src/test/java/com/structurizr/dsl/ElementStyleParserTests.java b/src/test/java/com/structurizr/dsl/ElementStyleParserTests.java
@@ -102,7 +102,7 @@ void test_parseBackground_ThrowsAnException_WhenThereAreTooManyTokens() {
             parser.parseBackground(elementStyleDslContext(), tokens("background", "hex", "extra"));
             fail();
         } catch (Exception e) {
-            assertEquals("Too many tokens, expected: background <#rrggbb>", e.getMessage());
+            assertEquals("Too many tokens, expected: background <#rrggbb|color name>", e.getMessage());
         }
     }
 
@@ -112,7 +112,7 @@ void test_parseBackground_ThrowsAnException_WhenTheBackgroundIsMissing() {
             parser.parseBackground(elementStyleDslContext(), tokens("background"));
             fail();
         } catch (Exception e) {
-            assertEquals("Expected: background <#rrggbb>", e.getMessage());
+            assertEquals("Expected: background <#rrggbb|color name>", e.getMessage());
         }
     }
 
@@ -128,7 +128,7 @@ void test_parseStroke_ThrowsAnException_WhenThereAreTooManyTokens() {
             parser.parseStroke(elementStyleDslContext(), tokens("stroke", "hex", "extra"));
             fail();
         } catch (Exception e) {
-            assertEquals("Too many tokens, expected: stroke <#rrggbb>", e.getMessage());
+            assertEquals("Too many tokens, expected: stroke <#rrggbb|color name>", e.getMessage());
         }
     }
 
@@ -138,7 +138,7 @@ void test_parseStroke_ThrowsAnException_WhenTheStrokeIsMissing() {
             parser.parseStroke(elementStyleDslContext(), tokens("stroke"));
             fail();
         } catch (Exception e) {
-            assertEquals("Expected: stroke <#rrggbb>", e.getMessage());
+            assertEquals("Expected: stroke <#rrggbb|color name>", e.getMessage());
         }
     }
 
@@ -190,7 +190,7 @@ void test_parseColour_ThrowsAnException_WhenThereAreTooManyTokens() {
             parser.parseColour(elementStyleDslContext(), tokens("colour", "hex", "extra"));
             fail();
         } catch (Exception e) {
-            assertEquals("Too many tokens, expected: colour <#rrggbb>", e.getMessage());
+            assertEquals("Too many tokens, expected: colour <#rrggbb|color name>", e.getMessage());
         }
     }
 
@@ -200,7 +200,7 @@ void test_parseColour_ThrowsAnException_WhenTheColourIsMissing() {
             parser.parseColour(elementStyleDslContext(), tokens("colour"));
             fail();
         } catch (Exception e) {
-            assertEquals("Expected: colour <#rrggbb>", e.getMessage());
+            assertEquals("Expected: colour <#rrggbb|color name>", e.getMessage());
         }
     }
 

diff --git a/src/test/java/com/structurizr/dsl/RelationshipStyleParserTests.java b/src/test/java/com/structurizr/dsl/RelationshipStyleParserTests.java
@@ -101,7 +101,7 @@ void test_parseColour_ThrowsAnException_WhenThereAreTooManyTokens() {
             parser.parseColour(relationshipStyleDslContext(), tokens("colour", "hex", "extra"));
             fail();
         } catch (Exception e) {
-            assertEquals("Too many tokens, expected: colour <#rrggbb>", e.getMessage());
+            assertEquals("Too many tokens, expected: colour <#rrggbb|color name>", e.getMessage());
         }
     }
 
@@ -111,7 +111,7 @@ void test_parseColour_ThrowsAnException_WhenTheColourIsMissing() {
             parser.parseColour(relationshipStyleDslContext(), tokens("colour"));
             fail();
         } catch (Exception e) {
-            assertEquals("Expected: colour <#rrggbb>", e.getMessage());
+            assertEquals("Expected: colour <#rrggbb|color name>", e.getMessage());
         }
     }