Redefine box styles to be independent of primary/accent for semantics

snikket_web/scss/_theme.scss

@@ -56,6 +56,15 @@ $colours: (
   ]
 );
 
+$box-types: (
+	"primary": "blue",
+	"accent": "yellow",
+	"alert": "alert",
+	"warning": "yellow",
+	"success": "green",
+	"hint": "blue"
+);
+
 $gray-100: nth(map-get($colours, "gray"), 1);
 $gray-200: nth(map-get($colours, "gray"), 2);
 $gray-300: nth(map-get($colours, "gray"), 3);

snikket_web/scss/app.scss

@@ -594,11 +594,11 @@ button.lv-tertiary, .button.lv-tertiary {
 
 	@extend .el-1;
 
-	@each $type, $values in $colours {
+	@each $type, $colour in $box-types {
 		&.#{$type} {
-			border-color: nth($values, 2);
-			background-color: nth($values, 9);
-			color: nth($values, 1);
+			border-color: nth(map-get($colours, $colour), 2);
+			background-color: nth(map-get($colours, $colour), 9);
+			color: nth(map-get($colours, $colour), 1);
 		}
 	}
 }

snikket_web/templates/demo.html

@@ -61,11 +61,11 @@
 	<p>The channel was added to your list.</p>
 	{% endcall %}
 	<p>The following box contains a notice:</p>
-	{% call box("accent", "Quota warning") %}
+	{% call box("warning", "Quota warning") %}
 	<p>You have nearly reached your HTTP upload storage quota.</p>
 	{% endcall %}
 	<p>The following box contains a hint:</p>
-	{% call box("primary", "Update available") %}
+	{% call box("hint", "Update available") %}
 	<p>There is a new version of the Snikket Server available.</p>
 	{% endcall %}
 	<p>Finally, the following box has unspecified content:</p>
@@ -84,11 +84,11 @@
 	<p>The channel was added to your list.</p>
 	{% endcall %}
 	<p>The following box contains a notice:</p>
-	{% call box("accent", "Quota warning", slim=True) %}
+	{% call box("warning", "Quota warning", slim=True) %}
 	<p>You have nearly reached your HTTP upload storage quota.</p>
 	{% endcall %}
 	<p>The following box contains a hint:</p>
-	{% call box("primary", "Update available", slim=True) %}
+	{% call box("hint", "Update available", slim=True) %}
 	<p>There is a new version of the Snikket Server available.</p>
 	{% endcall %}
 	<p>Finally, the following box has unspecified content:</p>