Auto view of color codes for palette page.

src/palette.xhtml

@@ -16,15 +16,15 @@
         <br/>
 
         <p>Background</p>
-        <div class="colorbox bg-background-super-dark">Background super dark <a href="index.xhtml">Link</a></div>
-        <div class="colorbox bg-background-very-dark">Background very dark <a href="index.xhtml">Link</a></div>
-        <div class="colorbox bg-background-dark">Background dark <a href="index.xhtml">Link</a></div>
-        <div class="colorbox bg-background-dim">Background dim <a href="index.xhtml">Link</a></div>
-        <div class="colorbox bg-background-medium">Background medium <a href="index.xhtml">Link</a></div>
-        <div class="colorbox bg-background-light">Background light <a href="index.xhtml">Link</a></div>
-        <div class="colorbox bg-background-bright">Background bright <a href="index.xhtml">Link</a></div>
-        <div class="colorbox bg-background-very-bright">Background very bright <a href="index.xhtml">Link</a></div>
-        <div class="colorbox bg-background-super-bright">Background super bright <a href="index.xhtml">Link</a></div>
+        <div class="colorbox bg-background-super-dark">Background super dark</div>
+        <div class="colorbox bg-background-very-dark">Background very dark</div>
+        <div class="colorbox bg-background-dark">Background dark</div>
+        <div class="colorbox bg-background-dim">Background dim</div>
+        <div class="colorbox bg-background-medium">Background medium</div>
+        <div class="colorbox bg-background-light">Background light</div>
+        <div class="colorbox bg-background-bright">Background bright</div>
+        <div class="colorbox bg-background-very-bright">Background very bright</div>
+        <div class="colorbox bg-background-super-bright">Background super bright</div>
         <br/>
 
         <p>Primary</p>
@@ -49,6 +49,9 @@
         <div class="colorbox bg-secondary-medium">Secondary medium</div>
         <div class="colorbox bg-secondary-light">Secondary light</div>
         <div class="colorbox bg-secondary-bright">Secondary bright</div>
+        <div class="colorbox bg-secondary-very-bright">Secondary very bright</div>
+        <div class="colorbox bg-secondary-super-bright">Secondary super bright</div>
+        <div class="colorbox bg-secondary-extreme-bright">Secondary extreme bright</div>
         <br/>
 
         <p>Check</p>

src/style/_colors.sass

@@ -19,6 +19,9 @@
     @for $i from -5 through 5
         .bg-#{$color-name}-#{map-get($shade-names, $i)}
             background-color: get-color($color-name, $i)
+        .colorbox.bg-#{$color-name}-#{map-get($shade-names, $i)}::after
+            font-weight: normal
+            content: " (#{get-color($color-name, $i)})"
         .fg-#{$color-name}-#{map-get($shade-names, $i)}
             color: get-color($color-name, $i)
 

src/style/_palette.scss

@@ -14,7 +14,7 @@ $palette: (
 $mix-intervals: (
     "primary":    (-4: 18%, -3: 18%, -2: 18%, -1: 14%),
     "accent":     (),
-    "secondary":  (-4: 30%, -3: 30%, -2: 30%, -1: 30%, 1: 30%, 2: 30%, 3: 30%, 4: 30%),
+    "secondary":  (-5: 30%, -4: 30%, -3: 30%, -2: 30%, -1: 30%, 1: 30%, 2: 30%, 3: 30%, 4: 30%, 5: 30%),
     "background": (-4: 40%, -3: 35%, -2: 30%, -1: 26%, 1: 30%, 2: 35%, 3: 40%, 4: 50%),
 
     "fail":       (),