breadboard.scss in sass-zero-1.4.0

- old
+ new

@@ -28,22 +28,27 @@
 
 *, ::before, ::after {
   border-color: var(--color-border);
 }
 
-html {
+body {
   accent-color: var(--color-primary);
   background: var(--color-bg--main);
   color: var(--color-text);
   font-family: $font-family;
 }
 
+@media (max-width: $breakpoint-md - 1) {
+  body { font-size: $text-sm; }
+}
+
 .btn {
   border-radius: $radius-primary;
   border-width: $border;
   display: inline-block;
-  padding: $size-2 $size-3;
+  padding: $size-1-5 $size-4;
+  font-weight: $font-medium;
   cursor: pointer;
 
   &--primary {
     background-color: var(--color-primary);
     border-color: var(--color-primary);
@@ -79,11 +84,11 @@
   appearance: none;
   resize: none;
   background-color: var(--color-bg--surface);
   border-radius: $radius-secondary;
   border-width: $border;
-  padding: $size-2 $size-3;
+  padding: $size-2-5;
   width: $w-full;
 
   &--select {
     background-image:
       linear-gradient(45deg, transparent 49%, var(--color-text) 51%),
@@ -100,23 +105,23 @@
 }
 
 .dropdown {
   background-color: var(--color-bg--surface);
   border-width: $border; border-radius: $radius-primary;
-  padding: $size-3 $size-4;
+  padding: $size-6;
   box-shadow: $shadow-lg;
   position: absolute;
   z-index: $z-10;
 }
 
 [type="checkbox"], [type="radio"] {
-  transform: scale(1.2); margin: $size-1;
+  transform: scale(1.7); margin: $size-1;
 }
 
 blockquote {
   border-left-width: $border-4;
-  padding: $size-3 $size-4;
+  padding: $size-3;
 }
 
 code {
   background-color: var(--color-bg--main);
   border-radius: $rounded;
@@ -131,11 +136,11 @@
   overflow-y: hidden;
 
   > code {
     border-radius: $rounded-none;
     display: block;
-    padding: $size-2 $size-3;
+    padding: $size-3;
     white-space: pre;
   }
 }
 
 kbd {
@@ -156,11 +161,11 @@
 hr {
   margin: $size-6 $size-0;
 }
 
 menu, ul, ol {
-  padding-left: $size-10;
+  padding-left: $size-8;
 }
 
 menu, ul {
   list-style: disc outside;
 }
@@ -171,46 +176,34 @@
 
 dt {
   font-weight: $font-bold;
 }
 
-label, legend, dt, dd, li {
-  margin-bottom: $size-1;
+fieldset, .input {
+  margin-bottom: $size-6;
 }
 
 h1, h2, h3, h4, h5, h6, .hdg {
-  margin-bottom: $size-4;
-}
-
-fieldset, .input {
   margin-bottom: $size-6;
 }
 
-table, progress, blockquote, figure, pre, menu, ul, ol, dl, p {
+table, progress, blockquote, pre, menu, ul, ol, dl, p {
   margin-bottom: $size-6;
 }
 
 dialog {
   background-color: var(--color-bg--surface);
   border-width: $border; border-radius: $radius-primary;
-  padding: $size-3 $size-4;
+  padding: $size-6;
   box-shadow: $shadow-lg;
   color: inherit;
 }
 
 dialog::backdrop {
   background-color: rgba($gray-500, $opacity-75);
 }
 
-progress {
-  background-color: var(--color-bg--main);
-}
-
-@include progress-bar {
-  background-color: var(--color-primary);
-}
-
 details {
   display: inline-block;
 }
 
 summary {
@@ -219,43 +212,43 @@
 
 summary::-webkit-details-marker {
   display: none;
 }
 
-table, progress {
+table {
   width: $w-full;
 }
 
 td, th {
   border-bottom-width: $border;
-  padding: $size-3 $size-4;
+  padding: $size-4;
   text-align: left;
 }
 
 h1, h2, h3, h4, h5, h6, .hdg {
   font-weight: $font-bold;
   line-height: $leading-tight;
 }
 
-h1, .hdg--4xl {
+h1, .hdg--xx-large {
+  font-size: $text-5xl;
+}
+
+h2, .hdg--x-large {
   font-size: $text-4xl;
 }
 
-h2, .hdg--3xl {
+h3, .hdg--large {
   font-size: $text-3xl;
 }
 
-h3, .hdg--2xl {
+h4, .hdg--medium {
   font-size: $text-2xl;
 }
 
-h4, .hdg--xl {
+h5, .hdg--small {
   font-size: $text-xl;
 }
 
-h5, .hdg--lg {
+h6, .hdg--x-small {
   font-size: $text-lg;
-}
-
-h6, .hdg--base {
-  font-size: $text-base;
 }