Update to Spruce CSS v2.2.0

Author: adamlaki

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "sprucecss-eleventy-documentation-template",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "author": "Cone (https://conedevelopment.com)",
   "main": ".eleventy.js",
   "scripts": {
@@ -34,7 +34,7 @@
     "npm-run-all": "^4.1.5",
     "pagefind": "^0.12.0",
     "sass": "^1.62.1",
-    "sprucecss": "^2.1.0",
+    "sprucecss": "^2.2.0",
     "stylelint": "^15.6.2",
     "stylelint-config-sass-guidelines": "^10.0.0",
     "stylelint-order": "^6.0.3"

package.json

@@ -25,7 +25,7 @@
 
     a {
       align-items: center;
-      color: color(text);
+      color: color('text');
       display: inline-flex;
       gap: spacer('xs');
       text-decoration: none;
@@ -39,10 +39,9 @@
           background-color: color('primary');
           border-end-end-radius: config('border-radius-sm', $display);
           border-start-end-radius: config('border-radius-sm', $display);
-          bottom: 0;
           content: '';
           inline-size: 0.3rem;
-          inset-block-start: 0;
+          inset-block: 0;
           inset-inline-start: -1rem;
           position: absolute;
         }

src/css/main.css

@@ -24,6 +24,10 @@ $color-secondary: hsl(186deg 100% 60%);
       'heading': hsl(232deg 68% 11%),
       'text': hsl(208, 21%, 39%),
     ),
+    'btn': (
+      'secondary-foreground': color.adjust($color-secondary, $lightness: -50%),
+      'secondary-shadow': color.adjust($color-secondary, $lightness: 20%),
+    ),
     'breadcrumb': (
       'separator': hsl(0deg 0% 80%),
     ),

src/scss/component/_sidebar-section.scss

@@ -35,9 +35,11 @@ $colors: (
     'primary-background': $dark-color-primary,
     'primary-background-hover': hsl(186deg 100% 45%),
     'primary-foreground': hsl(186deg 100% 5%),
+    'primary-shadow': hsl(186deg 100% 25%),
     'secondary-background': $dark-color-secondary,
     'secondary-background-hover': color.adjust($dark-color-secondary, $lightness: 5%),
     'secondary-foreground': $dark-color-white,
+    'secondary-shadow': color.adjust($dark-color-secondary, $lightness: -20%),
   ),
   'card': (
     'background': $dark-color-black,
@@ -67,19 +69,13 @@ $colors: (
   'footer': (
     'background': hsl(245deg 38% 10%),
   ),
-  'invoice': (
-    'background': hsl(234deg 49% 6%),
-  ),
   'navigation': (
     'arrow': hsl(0deg 0% 100% / 15%),
     'icon-background': hsl(245deg 38% 10%),
     'icon-background-hover': $dark-color-primary,
     'icon-foreground': $dark-color-primary,
     'icon-foreground-hover': hsl(186deg 100% 5%),
   ),
-  'tab': (
-    'background': hsl(207deg 84% 10%),
-  ),
   'prism': (
     'color': hsl(217deg 34% 88%),
     'background': hsl(245deg 38% 7%),