Release v2.3.0

conedevelopment · Dec 17, 2023 · 256a645 · 256a645
1 parent ab55d4c
commit 256a645
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 19 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,6 @@
 # Spruce CSS Changelog
 
-## v2.3.0 (2023-12-16)
+## v2.3.0 (2023-12-17)
 
 ### What's Changed
 - **NEW** `$form-fieldset`: add `legend-font-family` property.
@@ -9,9 +9,10 @@
 - **BUG** `layout-center()` mixin: add `inline-size: 100%;`.
 - **IMPROVEMENT** `layout-grid()`, `layout-flex()`, `layout-sidebar()` mixins: enable multiple `$gap` value like `'m:l'` to control both block and inline values.
 - **IMPROVEMENT** `spacer()` function: enable multiple value shorthand like `'m:l'` to control both block and inline values.
-- Remove the `transition()` function.
+- **BREAKING CHANGE** Remove the `transition()` function (you can migrate overt `config()` function or `transition()` mixin.).
 - **IMPROVEMENT** `transition()` mixin: enable multiple values for `property` with quotes.
 - **NEW** `focus-ring()` mixin: add a new mixin as a shorthand to access the two basic ring styling on focus quickly (input, button).
+- Modify the defaults for `config('border-radius-sm', $display)` and `config('border-radius-lg', $display)`.
 
 ## v2.2.2 (2023-08-17)
 

diff --git a/css/spruce.css b/css/spruce.css
@@ -329,6 +329,7 @@ template {
   --spruce-base-color-marker: hsl(262, 71%, 49%);
   --spruce-base-color-primary: hsl(262, 71%, 49%);
   --spruce-base-color-secondary: hsl(227, 92%, 55%);
+  --spruce-base-color-strong: hsl(205, 100%, 2%);
   --spruce-base-color-text: hsl(208, 9%, 42%);
 }
 
@@ -390,7 +391,8 @@ template {
 }
 
 :root {
-  --spruce-font-family-base: eravek, Gill Sans Nova, Ubuntu, Calibri, DejaVu Sans, source-sans-pro, sans-serif;
+  --spruce-border-radius: 0.425rem;
+  --spruce-font-family-base: Seravek, Gill Sans Nova, Ubuntu, Calibri, DejaVu Sans, source-sans-pro, sans-serif;
   --spruce-font-family-cursive: ui-monospace, Cascadia Code, Source Code Pro, Menlo, Consolas, DejaVu Sans Mono, monospace;
   --spruce-font-family-heading: Avenir, Avenir Next LT Pro, Montserrat, Corbel, URW Gothic, source-sans-pro, sans-serif;
   --spruce-font-size-base: 1rem;
@@ -399,15 +401,14 @@ template {
   --spruce-font-size-ratio: 1.25;
   --spruce-font-size-sm: 0.875rem;
   --spruce-font-weight-heading: 700;
-  --spruce-inline-border-radius: 0.325rem;
   --spruce-inline-padding: 0.1em 0.3em;
   --spruce-line-height-base: 1.8;
   --spruce-line-height-heading: calc(2px + 2ex + 2px);
   --spruce-line-height-lg: 1.8;
   --spruce-line-height-md: 1.5;
   --spruce-line-height-sm: 1.2;
-  --spruce-border-radius-lg: 0.725rem;
-  --spruce-border-radius-sm: 0.325rem;
+  --spruce-border-radius-lg: 0.925rem;
+  --spruce-border-radius-sm: 0.425rem;
   --spruce-container-inline-size: 84rem;
   --spruce-page-margin: 2cm;
   --spruce-hidden-elements: header, footer, aside, nav, form, iframe, [class^="aspect-ratio"];
@@ -745,7 +746,7 @@ abbr[title] {
 
 mark {
   background-color: var(--spruce-base-color-mark-background);
-  border-radius: var(--spruce-inline-border-radius);
+  border-radius: var(--spruce-border-radius);
   color: var(--spruce-base-color-mark-foreground);
   padding: var(--spruce-inline-padding);
 }
@@ -754,11 +755,15 @@ code,
 kbd,
 samp {
   background-color: var(--spruce-base-color-code-background);
-  border-radius: var(--spruce-inline-border-radius);
+  border-radius: var(--spruce-border-radius);
   color: var(--spruce-base-color-code-foreground);
   padding: var(--spruce-inline-padding);
 }
 
+strong {
+  color: var(--spruce-base-color-strong);
+}
+
 .lead {
   font-size: var(--spruce-font-size-lead);
 }
@@ -793,7 +798,7 @@ samp {
 }
 
 .btn {
-  --spruce-border-radius: 0.325rem;
+  --spruce-border-radius: 0.425rem;
   --spruce-border-width: 1px;
   --spruce-font-size: 1rem;
   --spruce-font-weight: 500;
@@ -941,7 +946,7 @@ samp {
 }
 
 .form-file::file-selector-button {
-  --spruce-border-radius: 0.325rem;
+  --spruce-border-radius: 0.425rem;
   --spruce-border-width: 1px;
   --spruce-font-size: 1rem;
   --spruce-font-weight: 500;
@@ -1034,7 +1039,7 @@ samp {
 
 .form-control {
   --webkit-date-line-height: 1.375;
-  --spruce-border-radius: 0.325rem;
+  --spruce-border-radius: 0.425rem;
   --spruce-border-width: 1px;
   --spruce-font-size: 1rem;
   --spruce-line-height: 1.5;
@@ -1166,7 +1171,7 @@ html[dir=rtl] select.form-control:not([multiple]):not([size]) {
 }
 
 .form-check {
-  --spruce-border-radius: 0.325rem;
+  --spruce-border-radius: 0.425rem;
   --spruce-border-width: 1px;
   --spruce-font-size: 1.125rem;
   --spruce-line-height: 1.5;
@@ -1361,7 +1366,7 @@ legend {
 }
 
 .form-group-label {
-  --spruce-border-radius: 0.325rem;
+  --spruce-border-radius: 0.425rem;
   --spruce-border-width: 1px;
   align-items: center;
   background-color: var(--spruce-form-color-group-label-background);

diff --git a/css/spruce.min.css b/css/spruce.min.css
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sprucecss",
-  "version": "2.2.2",
+  "version": "2.3.0",
   "description": "Spruce CSS - Another CSS Framework",
   "keywords": [
     "css",

diff --git a/preview/assets/scss/config/_config.scss b/preview/assets/scss/config/_config.scss
@@ -38,7 +38,6 @@ $spacer: 1.25rem;
     ),
   ),
   $btn-lg: (
-    'border-radius': 0.25em,
     'text-transform': uppercase,
   ),
   $form-fieldset: (

diff --git a/preview/assets/scss/layout/_main.scss b/preview/assets/scss/layout/_main.scss
@@ -4,7 +4,7 @@
   padding-block: spacer-clamp('l', 'xl');
 
   &__inner {
-    @include layout-sidebar('xl', 12rem);
+    @include layout-sidebar('m:xl', 12rem);
   }
 
   &__sidebar {

diff --git a/scss/config/_display.scss b/scss/config/_display.scss
@@ -3,8 +3,8 @@
 $display: () !default;
 $display: map.merge(
   (
-    'border-radius-lg': 0.725rem,
-    'border-radius-sm': 0.325rem,
+    'border-radius-lg': 0.925rem,
+    'border-radius-sm': 0.425rem,
   ),
   $display
 );