Prerelease

conedevelopment · Jul 17, 2023 · 9f6b0bf · 9f6b0bf
1 parent bc5b90f
commit 9f6b0bf
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 39 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,25 @@
 # Spruce CSS Changelog
 
+## v2.2.0 (2023-07-17)
+
+In this release we have a lot of small changes and fixes with some improvement.
+
+### What's Changed
+- `.form-group--row`: now uses container query.
+- `.form-group--row`: add vertical alignment option.
+- Add disabled state range input.
+- Add `color-value` function to get only the color value.
+- `form-check`: add font-weight option.
+- Add drop-shadow button variants.
+- Change outline button generator, make it more customizable.
+- Add global font `scaler` option.
+- Add pointer-events: none; to the `.btn__icon`.
+
+### Bugfix
+- `form-label`: font-family not worked.
+- `form-description`: make it explicit.
+- And many more...
+
 ## v2.1.0 (2023-05-28)
 
 ### What's Changed

diff --git a/css/spruce.css b/css/spruce.css
@@ -352,6 +352,8 @@ template {
   --spruce-form-color-check-background: hsl(262, 71%, 49%);
   --spruce-form-color-check-focus-ring: hsl(262, 71%, 49%);
   --spruce-form-color-check-foreground: hsl(0, 0%, 100%);
+  --spruce-form-color-group-label-background: hsl(210, 60%, 98%);
+  --spruce-form-color-group-label-foreground: hsl(208, 9%, 42%);
   --spruce-form-color-invalid: hsl(0, 71%, 51%);
   --spruce-form-color-invalid-focus-ring: rgba(219, 41, 41, 0.25);
   --spruce-form-color-label: hsl(205, 100%, 2%);
@@ -843,6 +845,7 @@ samp {
   block-size: var(--spruce-icon-size);
   flex-shrink: 0;
   inline-size: var(--spruce-icon-size);
+  pointer-events: none;
 }
 .btn__icon--sm {
   block-size: var(--spruce-icon-size);
@@ -886,7 +889,7 @@ samp {
   color: var(--spruce-btn-color-primary-foreground);
 }
 .btn--primary-shadow {
-  box-shadow: 0 0.55rem 1rem -0.2rem var(--spruce-btn-color-primary-shadow), 0 0.15rem 0.35rem -0.185rem var(--spruce-btn-color-primary-shadow);
+  box-shadow: 0 0.55em 1em -0.2em var(--spruce-btn-color-primary-shadow), 0 0.15em 0.35em -0.185em var(--spruce-btn-color-primary-shadow);
 }
 
 .btn--secondary {
@@ -904,7 +907,7 @@ samp {
   color: var(--spruce-btn-color-secondary-foreground);
 }
 .btn--secondary-shadow {
-  box-shadow: 0 0.55rem 1rem -0.2rem var(--spruce-btn-color-secondary-shadow), 0 0.15rem 0.35rem -0.185rem var(--spruce-btn-color-secondary-shadow);
+  box-shadow: 0 0.55em 1em -0.2em var(--spruce-btn-color-secondary-shadow), 0 0.15em 0.35em -0.185em var(--spruce-btn-color-secondary-shadow);
 }
 
 .btn--outline-primary {
@@ -1020,7 +1023,7 @@ samp {
   color: var(--spruce-btn-color-primary-foreground);
 }
 .form-file::file-selector-button-shadow {
-  box-shadow: 0 0.55rem 1rem -0.2rem var(--spruce-btn-color-primary-shadow), 0 0.15rem 0.35rem -0.185rem var(--spruce-btn-color-primary-shadow);
+  box-shadow: 0 0.55em 1em -0.2em var(--spruce-btn-color-primary-shadow), 0 0.15em 0.35em -0.185em var(--spruce-btn-color-primary-shadow);
 }
 
 .form-label {
@@ -1357,6 +1360,18 @@ legend {
   font-weight: var(--spruce-legend-font-weight);
 }
 
+.form-group-label {
+  --spruce-border-radius: 0.325rem;
+  --spruce-border-width: 1px;
+  align-items: center;
+  background-color: var(--spruce-form-color-group-label-background);
+  border: var(--spruce-border-width) solid var(--spruce-form-color-border);
+  border-radius: var(--spruce-border-radius);
+  color: var(--spruce-form-color-group-label-foreground);
+  display: flex;
+  padding-inline: 1rem;
+}
+
 .form-group {
   --spruce-gap: 0.5rem;
   display: flex;
@@ -1386,10 +1401,10 @@ legend {
   gap: var(--spruce-gap);
   grid-template-columns: minmax(0, 1fr);
 }
-.form-group--row-vertical-center {
+.form-group--row\:vertical-center {
   align-items: center;
 }
-.form-group--row-vertical-start {
+.form-group--row\:vertical-start {
   align-items: flex-start;
 }
 @container form-group-container (inline-size > 38rem) {
@@ -1405,43 +1420,27 @@ legend {
 }
 .form-group--stacked {
   display: flex;
-  flex-direction: column;
 }
-@media (min-width: 48em) {
-  .form-group--stacked {
-    flex-direction: row;
-  }
+.form-group--stacked > * {
+  /* stylelint-disable */
+  /* stylelint-enable */
 }
 .form-group--stacked > * + * {
-  border-start-end-radius: 0;
-  border-start-start-radius: 0;
-  -webkit-margin-before: -1px;
-          margin-block-start: -1px;
-}
-@media (min-width: 48em) {
-  .form-group--stacked > * + * {
-    border-end-start-radius: 0;
-    border-start-end-radius: var(--spruce-border-radius);
-    -webkit-margin-before: 0;
-            margin-block-start: 0;
-    -webkit-margin-start: -1px;
-            margin-inline-start: -1px;
-  }
+  border-radius: 0;
+  -webkit-margin-start: -1px;
+          margin-inline-start: -1px;
 }
-.form-group--stacked > *:not(:last-child) {
+.form-group--stacked > *:first-child {
+  border-start-end-radius: 0;
+  border-start-start-radius: var(--spruce-border-radius);
   border-end-end-radius: 0;
-  border-end-start-radius: 0;
+  border-end-start-radius: var(--spruce-border-radius);
 }
-@media (min-width: 48em) {
-  .form-group--stacked > *:not(:last-child) {
-    border-end-end-radius: 0;
-    border-start-end-radius: 0;
-  }
-}
-@media (min-width: 48em) {
-  .form-group--stacked > *:first-child {
-    border-end-start-radius: var(--spruce-border-radius);
-  }
+.form-group--stacked > *:last-child {
+  border-start-end-radius: var(--spruce-border-radius);
+  border-start-start-radius: 0;
+  border-end-end-radius: var(--spruce-border-radius);
+  border-end-start-radius: 0;
 }
 .form-group--stacked > *:focus {
   z-index: 2;

diff --git a/css/spruce.min.css b/css/spruce.min.css
diff --git a/scss/mixin/_button.scss b/scss/mixin/_button.scss
@@ -70,8 +70,8 @@
 
   @if map.has-key($colors, 'btn', $type + '-shadow') {
     &-shadow {
-      box-shadow: 0 0.55rem 1rem -0.2rem color($type + '-shadow', 'btn'),
-                  0 0.15rem 0.35rem -0.185rem color($type + '-shadow', 'btn');
+      box-shadow: 0 0.55em 1em -0.2em color($type + '-shadow', 'btn'),
+                  0 0.15em 0.35em -0.185em color($type + '-shadow', 'btn');
     }
   }
 }