Tag object

Fixes #1

architype.css

@@ -18,6 +18,13 @@
   --input: rgba(0,0,0,0.1);
   --input-focus: rgba(255,0,0,0.2);
   --line: #000000;
+
+  --tag0: hsl(180, 100%, 75%);
+  --tag1: hsl(240, 100%, 75%);
+  --tag2: hsl(300, 100%, 75%);
+  --tag3: hsl(  0, 100%, 75%);
+  --tag4: hsl( 60, 100%, 75%);
+  --tag5: hsl(120, 100%, 75%);
 }
 
 .theme-dark {
@@ -40,6 +47,13 @@
   --input: rgba(255,255,255,0.2);
   --input-focus: rgba(255,0,0,0.2);
   --line: #ffffff;
+
+  --tag0: hsl(180, 100%, 25%);
+  --tag1: hsl(240, 100%, 25%);
+  --tag2: hsl(300, 100%, 25%);
+  --tag3: hsl(  0, 100%, 25%);
+  --tag4: hsl( 60, 100%, 25%);
+  --tag5: hsl(120, 100%, 25%);
 }
 
 :root {
@@ -256,6 +270,70 @@ body {
   z-index: 3;
 }
 
+.gridNode.tag0 {
+  background: var(--tag0);
+}
+
+.gridNode.tag1 {
+  background: var(--tag1);
+}
+
+.gridNode.tag2 {
+  background: var(--tag2);
+}
+
+.gridNode.tag3 {
+  background: var(--tag3);
+}
+
+.gridNode.tag4 {
+  background: var(--tag4);
+}
+
+.gridNode.tag5 {
+  background: var(--tag5);
+}
+
+.gridNode.highlight {
+  border-color: var(--focus);
+  border-width: 3px;
+}
+
+.gridGraphLabel {
+  height: 100%;
+  width: 100%;
+  font-size: 30px;
+  text-align: center;
+}
+
+.gridGraphLabel.highlight {
+  color: var(--focus);
+}
+
+.gridGroup {
+  width: 100%;
+  height: 100%;
+  background: var(--group-background);
+  justify-content: flex-start;
+  border: 1px dashed var(--line);
+  z-index: 1;
+}
+
+.gridGroup.highlight {
+  border-color: var(--focus);
+  border-width: 3px;
+}
+
+.gridGroupLabel {
+  max-width: 90%;
+  max-height: 90%;
+  justify-content: center;
+  font-size: 20px;
+  overflow: hidden;
+  overflow-wrap: anywhere;
+  z-index: 1;
+}
+
 .gridNode.highlight {
   border-color: var(--focus);
   border-width: 3px;