Release v1.2.0

Author: adamlaki

CHANGELOG.md

@@ -1,19 +1,33 @@
 # Spruce CSS Changelog
 
+## v1.2.0 (2022-12-27)
+
+### Improvements
+- Introduce `$table-stripe` variable to control the table stripe pattern (odd, even).
+- Enable selector at [`generate-table`](https://github.com/conedevelopment/sprucecss/blob/main/scss/element/_table.scss) mixin.
+- Add `--min-width` variable to `.responsive-table` to control width individually.
+- Add `$font-weight-base` variable.
+- Allow generic value at `spacer-clamp` mixin (not just map key).
+- Add `transition` mixin to get the default transition values easier.
+
+### New features
+- Add `.btn--outline-*` button variants.
+- Add [`font-face`](https://sprucecss.com/docs/sass/mixins#font-face) mixin.
+
 ## v1.1.0 (2022-11-05)
 
 ### Improvements
 - Rework the focus states by adding `focus-ring()` mixin to control the different variations of focus states.
--   Add variables related to focus.
--   Make `$font-size-lead` responsive by default.
--   Add `$form-check-checkbox-border-radius` variable.
--   Change `$form-switch-margin-bottom variable` to `$form-switch-margin-block-start`.
--   Handle null values at color mixin.
--   Hack that date/time input height in webkit.
+- Add variables related to focus.
+- Make `$font-size-lead` responsive by default.
+- Add `$form-check-checkbox-border-radius` variable.
+- Change `$form-switch-margin-bottom variable` to `$form-switch-margin-block-start`.
+- Handle null values at color mixin.
+- Hack that date/time input height in webkit.
 
 ### New features
--   Add `$form-check-vertical-alignment` variable add `.form-check--vertical-center` and `.form-check--vertical-start`.
--   Add `$table-caption-*` variables.
+- Add `$form-check-vertical-alignment` variable add `.form-check--vertical-center` and `.form-check--vertical-start`.
+- Add `$table-caption-*` variables.
 
 ### Breaking changes
 Although this is not a major feature, some moderate breaking changes can be related to the `focus-ring()` mixin and its colors.

css/spruce.css

@@ -742,8 +742,9 @@ samp {
 /* stylelint-disable */
 .btn {
   align-items: center;
-  border: 0;
   border-radius: 0.425rem;
+  border-style: solid;
+  border-width: 1px;
   cursor: pointer;
   display: inline-flex;
   font-size: 1rem;
@@ -755,7 +756,7 @@ samp {
   text-align: start;
   text-decoration: none;
   transition-duration: var(--spruce-transition-duration);
-  transition-property: background-color, box-shadow, color;
+  transition-property: background-color, border-color, box-shadow, color;
   transition-timing-function: var(--spruce-transition-timing-function);
 }
 
@@ -812,62 +813,67 @@ samp {
 
 .btn--primary {
   background-color: var(--spruce-btn-color-primary-background);
-  color: var(--spruce-btn-color-primary-foreground);
-}
-.btn--primary:hover {
-  background-color: var(--spruce-btn-color-primary-background-hover);
+  border-color: var(--spruce-btn-color-primary-background);
   color: var(--spruce-btn-color-primary-foreground);
 }
 .btn--primary:focus-visible {
   outline: 2px solid var(--spruce-btn-color-primary-background);
   outline-offset: 2px;
 }
+.btn--primary:hover {
+  background-color: var(--spruce-btn-color-primary-background-hover);
+  border-color: var(--spruce-btn-color-primary-background-hover);
+  color: var(--spruce-btn-color-primary-foreground);
+}
 
 .btn--secondary {
   background-color: var(--spruce-btn-color-secondary-background);
-  color: var(--spruce-btn-color-secondary-foreground);
-}
-.btn--secondary:hover {
-  background-color: var(--spruce-btn-color-secondary-background-hover);
+  border-color: var(--spruce-btn-color-secondary-background);
   color: var(--spruce-btn-color-secondary-foreground);
 }
 .btn--secondary:focus-visible {
   outline: 2px solid var(--spruce-btn-color-secondary-background);
   outline-offset: 2px;
 }
+.btn--secondary:hover {
+  background-color: var(--spruce-btn-color-secondary-background-hover);
+  border-color: var(--spruce-btn-color-secondary-background-hover);
+  color: var(--spruce-btn-color-secondary-foreground);
+}
 
 .btn--outline-primary {
   background-color: transparent;
-  border: 1px solid currentColor;
+  border-color: var(--spruce-btn-color-primary-background);
   color: var(--spruce-btn-color-primary-background);
 }
-.btn--outline-primary:hover {
-  background-color: var(--spruce-btn-color-primary-background);
-  color: var(--spruce-btn-color-primary-foreground);
-}
 .btn--outline-primary:focus-visible {
   outline: 2px solid var(--spruce-btn-color-primary-background);
   outline-offset: 2px;
 }
+.btn--outline-primary:hover {
+  background-color: var(--spruce-btn-color-primary-background);
+  color: var(--spruce-btn-color-primary-foreground);
+}
 
 .btn--outline-secondary {
   background-color: transparent;
-  border: 1px solid currentColor;
+  border-color: var(--spruce-btn-color-secondary-background);
   color: var(--spruce-btn-color-secondary-background);
 }
-.btn--outline-secondary:hover {
-  background-color: var(--spruce-btn-color-secondary-background);
-  color: var(--spruce-btn-color-secondary-foreground);
-}
 .btn--outline-secondary:focus-visible {
   outline: 2px solid var(--spruce-btn-color-secondary-background);
   outline-offset: 2px;
 }
+.btn--outline-secondary:hover {
+  background-color: var(--spruce-btn-color-secondary-background);
+  color: var(--spruce-btn-color-secondary-foreground);
+}
 
 .form-file::-webkit-file-upload-button {
   align-items: center;
-  border: 0;
   border-radius: 0.425rem;
+  border-style: solid;
+  border-width: 1px;
   cursor: pointer;
   display: inline-flex;
   font-size: 1rem;
@@ -879,15 +885,16 @@ samp {
   text-align: start;
   text-decoration: none;
   transition-duration: var(--spruce-transition-duration);
-  -webkit-transition-property: background-color, box-shadow, color;
-  transition-property: background-color, box-shadow, color;
+  -webkit-transition-property: background-color, border-color, box-shadow, color;
+  transition-property: background-color, border-color, box-shadow, color;
   transition-timing-function: var(--spruce-transition-timing-function);
 }
 
 .form-file::file-selector-button {
   align-items: center;
-  border: 0;
   border-radius: 0.425rem;
+  border-style: solid;
+  border-width: 1px;
   cursor: pointer;
   display: inline-flex;
   font-size: 1rem;
@@ -899,7 +906,7 @@ samp {
   text-align: start;
   text-decoration: none;
   transition-duration: var(--spruce-transition-duration);
-  transition-property: background-color, box-shadow, color;
+  transition-property: background-color, border-color, box-shadow, color;
   transition-timing-function: var(--spruce-transition-timing-function);
 }
 
@@ -987,22 +994,26 @@ samp {
 }
 .form-file::-webkit-file-upload-button {
   background-color: var(--spruce-btn-color-primary-background);
+  border-color: var(--spruce-btn-color-primary-background);
   color: var(--spruce-btn-color-primary-foreground);
   -webkit-margin-end: 1rem;
           margin-inline-end: 1rem;
 }
 .form-file::file-selector-button {
   background-color: var(--spruce-btn-color-primary-background);
+  border-color: var(--spruce-btn-color-primary-background);
   color: var(--spruce-btn-color-primary-foreground);
   -webkit-margin-end: 1rem;
           margin-inline-end: 1rem;
 }
 .form-file::-webkit-file-upload-button:hover {
   background-color: var(--spruce-btn-color-primary-background-hover);
+  border-color: var(--spruce-btn-color-primary-background-hover);
   color: var(--spruce-btn-color-primary-foreground);
 }
 .form-file::file-selector-button:hover {
   background-color: var(--spruce-btn-color-primary-background-hover);
+  border-color: var(--spruce-btn-color-primary-background-hover);
   color: var(--spruce-btn-color-primary-foreground);
 }
 

css/spruce.min.css

@@ -1,6 +1,6 @@
 {
   "name": "sprucecss",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Spruce CSS - Another CSS Framework",
   "keywords": [
     "css",

package.json

@@ -28,7 +28,7 @@ $colors: (
     mark-background: hsl(50 100% 80%),
     mark-foreground: $color-black,
     marker: $color-primary,
-    code-background: hsl(207 64% 21%),
+    code-background: hsl(207 64% 18%),
     code-foreground: $color-white,
     blockquote-border: $color-primary,
     footer-background: hsl(0 0% 0% / 0.15)