     (e/ui-progress {:className "u-trailer--half"})
     (for [value [0 25 50 75 100]
           size  [:regular :dense]]
-      (e/ui-progress {:max "100" :value value :size size :className "u-trailer--half" :key (str "id-" value size)}))))
+      (dom/div nil
+        (e/ui-progress {:max "100" :value value :size size :className "u-trailer--half" :key (str "id-" value size)})
+        ))
+    (dom/div #js {:className "t-dark"}
+      (for [value [0 25 50 75 100]
+           size  [:regular :dense]]
+        (e/ui-progress {:max "100" :value value :size size :className "u-trailer--half" :key (str "id-" value size)})))))
 
 
 (defcard radio-visual-regressions
   (dom/div nil
-    (e/ui-radio {:id "radio-1"})
-    (e/ui-radio {:id "radio-1" :checked true})
-    (e/ui-radio {:id "radio-2" :disabled true})
-    (e/ui-radio {:id "radio-2" :disabled true :checked true})))
+    (for [checked  [false true]
+         disabled [false true]
+         dark     [false true]]
+     (dom/div #js {:className (when dark "t-dark") :key (str "radio-" checked disabled dark) :style #js {:display "inline-block"}}
+       (e/ui-radio {:id "radio-1" :checked checked :disabled disabled})))))
 
 
 (defcard switch-visual-regressions
   (dom/div nil
-    (e/ui-switch {:checked false :id "switch-1"})
-    (e/ui-switch {:checked true :id "switch-1"})
-    (e/ui-switch {:checked false :id "switch-1" :disabled true})
-    (e/ui-switch {:checked true :id "switch-1" :disabled true})))
+    (for [checked  [false true]
+         disabled [false true]
+         dark     [false true]]
+     (dom/div #js {:className (when dark "t-dark") :key (str "switch-" checked disabled dark) :style #js {:display "inline-block"}}
+       (e/ui-switch {:checked checked :id "switch-1" :disabled disabled})))))
 
 
 (defcard tab-visual-regressions

        (dom/link #js {:rel "stylesheet" :href "css/untangled-ui.css"})
        (e/ui-empty-state {})))

    (dom/h1 nil "Custom specification")
    (e/ui-iframe {:width "100%" :height "400px"}
     (dom/div nil
       (dom/link #js {:rel "stylesheet" :href "css/untangled-ui.css"})
       (e/ui-empty-state {:glyph :widgets :title "No widgets yet" :message "Create a widget to get started"}))))
  )

(defcard field-visual-regressions
  (dom/div nil
    (for [size [:normal :small :medium :large]
          states [:valid :invalid :error]]
      (e/ui-field {:size size :state states :key (str size states (rand-int 256))} (str (name size) " " (name states) " field")))))


(defcard icon-colors-visual-regressions
  (dom/div nil
    (e/ui-icon {} (icon :alarm))
    (e/ui-icon {:color :active} (icon :alarm))
    (e/ui-icon {:color :passive} (icon :alarm))
    (e/ui-icon {:size :huge :color :passive} (icon :alarm))))


(defcard icon-sizes-visual-regressions
  (dom/div nil
    (e/ui-icon {:size :small} (icon :alarm))
    (e/ui-icon {} (icon :alarm))
    (e/ui-icon {:size :medium} (icon :alarm))
    (e/ui-icon {:size :large} (icon :alarm))
    (e/ui-icon {:size :xlarge} (icon :alarm))
    (e/ui-icon {:size :huge} (icon :alarm))))


(defcard icon-bar-visual-regressions
  (dom/div nil
    (e/ui-icon-bar {}
      (e/ui-icon-bar-item {:glyph :home :label "Home" :active true})
      (e/ui-icon-bar-item {:glyph :description :label "Docs" :color :passive})
      (e/ui-icon-bar-item {:glyph :feedback :label "Support"})
      )
    (e/ui-icon-bar {:shifting true}
      (e/ui-icon-bar-item {:glyph :home :label "Home" :active true})
      (e/ui-icon-bar-item {:glyph :description :label "Docs" :color :passive})
      (e/ui-icon-bar-item {:glyph :feedback :label "Support"})
      )
    (dom/br nil)
    (e/ui-icon-bar {:orientation :vertical}
      (e/ui-icon-bar-item {:glyph :home :label "Home" :active true})
      (e/ui-icon-bar-item {:glyph :description :label "Docs" :color :passive})
      (e/ui-icon-bar-item {:glyph :feedback :label "Support"}))))

(defcard labels-visual-regressions
  (dom/div nil
    (for [color [:none :primary :accent]
          icon ["" (icon :add)]]
      (e/ui-label {:color color :key (str color icon (rand-int 256))} icon "Default"))))


(defcard loader-visual-regressions
  (l/row {}
    (l/col {:width 4 :halign :center}
      (e/ui-loader {}))
    (l/col {:width 4 :halign :center}
      (e/ui-loader {:color :primary}))
    (l/col {:width 4 :halign :center}
      (e/ui-loader {:color :accent}))))


(defcard messages-visual-regressions
  (dom/div nil
    (for [color [:none :primary :accent]
          class ["" "u-font-size--semi-medium"]]
      (e/ui-message {:color color :className class :key (str "messages-" (name color) (name class))}
        (str "This is a " (name color) " message.")))
    (e/ui-message {}
      (str "This is a message with an icon.") (e/ui-icon {:size :small :glyph :arrow_forward}))))


(defcard modal
  (dom/div nil
    (e/ui-iframe {:height "200" :width "100%"}
      (dom/div #js {}
        (dom/link #js {:rel "stylesheet" :href "css/untangled-ui.css"})
        (e/ui-dialog {:visible true}
          (e/ui-dialog-title {} "Informative")
          (e/ui-dialog-body {} "You have been notified.")
          (e/ui-dialog-actions {}
            (e/ui-flat-button {:color :primary} "Cancel")
            (e/ui-flat-button {:color :primary} "Ok")))))))


(defcard notifications-visual-regressions
  (dom/div nil
    (for [kind [:normal :informative :success :warning :error]
          width [:normal :wide]]
      (dom/div #js {:key (str "id-" kind width)}
        (e/ui-notification {:kind kind :width width}
         ;; TODO Warning key prop needed on NotificationTitle but simply setting one doesn't suppress the error.
         (e/ui-notification-title {} (str (when (= width :wide) (str/capitalize (name width))) " " (str/capitalize (name kind))))

(defcard avatar-visual-regressions
  (dom/div nil
    (for [color [:none :primary :accent]
          kind  [:none :bordered]
          size  [:regular :medium :large :xlarge :huge]
          dark  [false true]]
      (dom/div #js {:className (if dark "t-dark" "") :style #js {:display "inline-block"} :key (str "id-" color kind size dark)}
        (e/ui-avatar {:color color :kind kind :size size} "AV")
        (e/ui-avatar {:color color :kind kind :size size} (icon :supervisor_account))
        ))))


(defcard badges-visual-regressions
  (dom/div nil
    (for [color [:none :primary :accent]
          dark [false true]]
     (dom/div #js {:className (if dark "t-dark" "") :style #js {:display "inline-block"} :key (str "badge-" color dark)}
       (e/ui-button {:color color} "Notifications " (e/ui-badge {} "8"))
       (e/ui-badge {:color color :className "hello"} "7")
       (e/ui-badge {:color color} (icon :arrow_back))
       (e/ui-badge {:color color} (icon :arrow_back) (icon :arrow_forward))
       )))
  )


(defcard buttons-visual-regression-testing
