 (defcard avatar-visual-regressions
   (dom/div nil
     (for [color [:none :primary :accent]
-          kind [:none :bordered]
-          size  [:regular :medium :large :xlarge :huge]]
-      (dom/span #js {:key (str "id" color kind size)}
+          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))))))
+        (e/ui-avatar {:color color :kind kind :size size} (icon :supervisor_account))
+        ))))
 
 
 (defcard badges-visual-regressions
   (dom/div nil
-    (e/ui-button {} "Notifications " (e/ui-badge {} "8"))
-    (e/ui-button {:color :primary} "Notifications " (e/ui-badge {} "8"))
-    (e/ui-button {:color :accent} "Notifications " (e/ui-badge {} "5"))
-    (e/ui-badge {:className "hello"} "7")
-    (e/ui-badge {} (icon :arrow_back))
-    (e/ui-badge {} (icon :arrow_back) (icon :arrow_forward))))
+    (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

          color    [:neutral :primary :accent]
          size     [:normal :small]
          disabled [false true]
          active   [false true]]
      (e/ui-flat-button {:className "extra" :color color :active active :disabled disabled
                         :shape     shape :size size  :key (str "btn-flat-" shape color size disabled active)}
        (str shape " " color " " size " " (when disabled "disabled ") (when active "active "))))
    (e/ui-flat-button {} "Label" (icon :arrow_forward))
    (e/ui-flat-button {} (icon :arrow_back) "Label")))

(defcard circular-buttons-visual-regression-testing
  (dom/div nil
    (for [color    [:neutral :primary :accent]
          size     [:normal :small]
          disabled [false true]
          active   [false true]]
      (e/ui-circular-button {:className "extra" :color color :active active :disabled disabled
                             :title     (str (name color) " " (name size) " " (when disabled "disabled ") (when active "active "))
                             :size      size  :key (str "btn-circular-" color size disabled active)}
        (icon :add)))))

(defcard checkbox-visual-regressions
  (dom/div nil
    (dom/div nil
      (dom/label #js {:className "is-optional" :style #js {:width "80px"}} "Normal ")
      (e/ui-checkbox {:id "checkbox-1"})
      (e/ui-checkbox {:id "checkbox-3" :checked true})
      (e/ui-checkbox {:id "checkbox-3" :checked :partial}))
    (dom/div nil
      (dom/label #js {:className "is-optional" :style #js {:width "80px"}} "Disabled ")
      (e/ui-checkbox {:id "checkbox-2" :disabled true})
      (e/ui-checkbox {:id "checkbox-3" :checked true :disabled true})
      (e/ui-checkbox {:id "checkbox-4" :checked :partial :disabled true}))))


(defcard empty-state-visual-regressions

    (e/ui-progress {:className "u-trailer--half"})
    (for [value [0 25 50 75 100]
          size  [:regular :dense]]
      (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
    (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
    (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
