1 files changed, 18 insertions, 37 deletions

diff --git a/tpl/views/divider.pug b/tpl/views/divider.pug
index 43a538c..ee7b372 100644
--- a/tpl/views/divider.pug
+++ b/tpl/views/divider.pug
@@ -23,42 +23,23 @@ mixin view-divider
             +divider('medium')
             +divider('faint')
 
-        .c-box
-            +divider('strong')(color='blue')= 'Strong'
-            +divider('medium')(color='blue')= 'Medium'
-            +divider('faint')(color='blue')= 'Faint'
-            +divider('strong')(color='blue')
-            +divider('medium')(color='blue')
-            +divider('faint')(color='blue')
-
-        .c-box
-            +divider('strong')(color='purple')= 'Strong'
-            +divider('medium')(color='purple')= 'Medium'
-            +divider('faint')(color='purple')= 'Faint'
-            +divider('strong')(color='purple')
-            +divider('medium')(color='purple')
-            +divider('faint')(color='purple')
+        each theme in ['blue', 'purple', 'red', 'green', 'yellow']
+            .c-box
+                +divider('strong')(color=theme)= 'Strong'
+                +divider('medium')(color=theme)= 'Medium'
+                +divider('faint')(color=theme)= 'Faint'
+                +divider('strong')(color=theme)
+                +divider('medium')(color=theme)
+                +divider('faint')(color=theme)
 
-        .c-box
-            +divider('strong')(color='red')= 'Strong'
-            +divider('medium')(color='red')= 'Medium'
-            +divider('faint')(color='red')= 'Faint'
-            +divider('strong')(color='red')
-            +divider('medium')(color='red')
-            +divider('faint')(color='red')
+        each theme in ['static-black', 'static-white']
+            -
+                const bg = theme.startsWith('static-black') ? 500 : 1000;
 
-        .c-box
-            +divider('strong')(color='green')= 'Strong'
-            +divider('medium')(color='green')= 'Medium'
-            +divider('faint')(color='green')= 'Faint'
-            +divider('strong')(color='green')
-            +divider('medium')(color='green')
-            +divider('faint')(color='green')
-
-        .c-box
-            +divider('strong')(color='yellow')= 'Strong'
-            +divider('medium')(color='yellow')= 'Medium'
-            +divider('faint')(color='yellow')= 'Faint'
-            +divider('strong')(color='yellow')
-            +divider('medium')(color='yellow')
-            +divider('faint')(color='yellow')
+            .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
+                +divider('strong')(color=theme)= 'Strong'
+                +divider('medium')(color=theme)= 'Medium'
+                +divider('faint')(color=theme)= 'Faint'
+                +divider('strong')(color=theme)
+                +divider('medium')(color=theme)
+                +divider('faint')(color=theme)