app/assets/stylesheets/sass-zero/breadboard.scss in sass-zero-1.0.7 vs app/assets/stylesheets/sass-zero/breadboard.scss in sass-zero-1.0.8

@@ -1,30 +1,30 @@
 @import "sass-zero/variables";
 @import "sass-zero/mixins";
 
 $font-family: $font-sans;
 
-$radius-input:  $rounded;
-$radius-button: $rounded;
+$radius-input:   $rounded;
+$radius-default: $rounded;
 
 :root {
   --color-bg--main:      #{$white};
   --color-bg--surface:   #{$gray-100};
   --color-bg--highlight: #{$gray-200};
   --color-primary:       #{$gray-900};
   --color-text:          #{$gray-900};
-  --color-focus-ring:    #{rgba($black, $opacity-60)};
+  --color-focus-ring:    #{rgba($black, $opacity-50)};
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
     --color-bg--main:      #{$gray-900};
     --color-bg--surface:   #{$gray-800};
     --color-bg--highlight: #{$gray-700};
     --color-primary:       #{$white};
     --color-text:          #{$white};
-    --color-focus-ring:    #{rgba($white, $opacity-60)};
+    --color-focus-ring:    #{rgba($white, $opacity-50)};
   }
 }
 
 html {
   accent-color: var(--color-primary);
@@ -32,11 +32,11 @@
   color: var(--color-text);
   font-family: $font-family;
 }
 
 .btn {
-  border-radius: $radius-button;
+  border-radius: $radius-default;
   border-width: $border;
   display: inline-block;
   font-weight: $font-bold;
   padding: $size-2 $size-3;
   cursor: pointer;
@@ -48,11 +48,10 @@
   }
 
   &--secondary {
     background-color: var(--color-bg--main);
     border-color: var(--color-primary);
-    color: var(--color-primary);
   }
 
   &--tertiary {
     background-color: $transparent;
     border-color: $transparent;
@@ -198,21 +197,33 @@
 
 table, progress, details, blockquote, figure, pre, ul, ol, dl, p {
   margin-bottom: $size-6;
 }
 
-@include progress-bar {
-  background-color: var(--color-primary);
+dialog {
+  background-color: var(--color-bg--surface);
+  border-radius: $radius-default;
+  padding: $size-3 $size-4;
+  box-shadow: $shadow-md;
+  color: inherit;
 }
 
+dialog::backdrop {
+  background-color: rgba($gray-500, $opacity-75);
+}
+
 progress {
   background-color: var(--color-bg--surface);
 }
 
+@include progress-bar {
+  background-color: var(--color-primary);
+}
+
 details {
-  padding: $size-2 $size-3;
   background-color: var(--color-bg--surface);
   border-left-width: $border-4;
+  padding: $size-2 $size-3;
 }
 
 summary {
   padding: $size-1 $size-0;
   font-weight: $font-bold;