WIP

CHANGELOG.md

@@ -1,5 +1,13 @@
 # Spruce CSS Changelog
 
+## v2.1.0 (2023-05-28)
+
+### What's Changed
+- Use `*-inline-size` and `*-block-size`.
+
+### Bugfix
+- Fix responsive table size.
+
 ## v2.0.0 (2023-05-04)
 
 ### What's Changed

css/spruce.css

@@ -514,12 +514,12 @@ figure figcaption {
 }
 
 .table-responsive {
-  --min-inline-size: var(--spruce-responsive-inline-size);
+  --inline-size: 40rem;
   -webkit-overflow-scrolling: touch;
   overflow-x: auto;
 }
 .table-responsive table {
-  min-inline-size: var(--min-inline-size);
+  min-inline-size: var(--inline-size);
 }
 
 .table {
@@ -790,18 +790,18 @@ samp {
 
 .btn {
   --spruce-border-radius: 0.325rem;
+  --spruce-border-width: 1px;
   --spruce-font-size: 1rem;
   --spruce-font-weight: 500;
   --spruce-gap: 0.5rem;
   --spruce-icon-padding: 0.75em;
   --spruce-icon-size: 1em;
-  --spruce-outline-inline-size: 1px;
   --spruce-padding: 0.75em 1em;
-  --spruce-shadow-inline-size: 0.25rem;
+  --spruce-shadow-size: 0.25rem;
   align-items: center;
   border-radius: var(--spruce-border-radius);
   border-style: solid;
-  border-width: var(--spruce-outline-inline-size);
+  border-width: var(--spruce-border-width);
   cursor: pointer;
   display: inline-flex;
   font-size: var(--spruce-font-size);
@@ -930,18 +930,18 @@ samp {
 
 .form-file::file-selector-button {
   --spruce-border-radius: 0.325rem;
+  --spruce-border-width: 1px;
   --spruce-font-size: 1rem;
   --spruce-font-weight: 500;
   --spruce-gap: 0.5rem;
   --spruce-icon-padding: 0.75em;
   --spruce-icon-size: 1em;
-  --spruce-outline-inline-size: 1px;
   --spruce-padding: 0.75em 1em;
-  --spruce-shadow-inline-size: 0.25rem;
+  --spruce-shadow-size: 0.25rem;
   align-items: center;
   border-radius: var(--spruce-border-radius);
   border-style: solid;
-  border-width: var(--spruce-outline-inline-size);
+  border-width: var(--spruce-border-width);
   cursor: pointer;
   display: inline-flex;
   font-size: var(--spruce-font-size);

preview/assets/scss/config/_config.scss

@@ -18,7 +18,7 @@ $spacer: 1.25rem;
   ),
   $dark-colors: dark.$colors,
   $settings: (
-    'css-custom-properties': true,
+    'css-custom-properties': false,
     'color-fallback': false,
     'html-smooth-scrolling': true,
     'hyphens': true,

preview/assets/scss/layout/_main.scss

@@ -4,13 +4,7 @@
   padding-block: spacer-clamp('l', 'xl');
 
   &__inner {
-    display: grid;
-    gap: spacer('l') spacer('xl');
-    grid-template-columns: minmax(0, 1fr);
-
-    @include breakpoint('sm') {
-      grid-template-columns: minmax(0, 12rem) minmax(0, 3.5fr);
-    }
+    @include layout-sidebar('xl', 12rem);
   }
 
   &__sidebar {