main-donation-box-message.html

@@ -45,7 +45,7 @@
             </div>
           </div>
           <div class="col-lg-6 col-12 col-msg">
-            <h2 class="fs-0 fw-bold mb-3 mb-sm-5">
+            <h2 class="fs-xl fw-bold mb-3 mb-sm-5">
               Donate to the Blender project!
             </h2>
             <p class="fs-5">
@@ -98,7 +98,7 @@
             </div>
           </div>
           <div class="col-lg-6 col-12 col-msg">
-            <h2 class="fs-0 fw-bold mb-3 mb-sm-5">
+            <h2 class="fs-xl fw-bold mb-3 mb-sm-5">
               Donate to the Blender project!
             </h2>
             <p class="fs-5">

sass/custom.sass

@@ -9,16 +9,11 @@ $spacer: 8px // Sizes are pxs to not clash with root em that might vary
 // TODO: consider changing to npm install
 @import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css')
 
-// TODO: refactor style custom
 .dfdb
   --border-radius: var(--spacer)
   --border-radius-lg: calc(var(--spacer) * 2)
 
-  +media-lg
-    --fs-base: 16px
-
-  +media-sm
-    --fs-sm: 14px
+  --box-text-color: var(--color-text)
 
   --fs-h1: 32px
   --fs-h2: 28px
@@ -28,6 +23,12 @@ $spacer: 8px // Sizes are pxs to not clash with root em that might vary
   --fs-h6: var(--fs-base)
   --fs-lg: 48px
 
+  +media-sm
+    --fs-sm: 14px
+
+  +media-lg
+    --fs-base: 16px
+
   +media-xs
     --fs-lg: 32px
 
@@ -49,42 +50,11 @@ $spacer: 8px // Sizes are pxs to not clash with root em that might vary
       // --color-bg, opacity 0.8
       --color-bg-primary: rgba(41, 45, 50, 0.8)
 
-  // TODO: consider changing to Sass include from Web Assets instead
   &.is-dark-mode
-    // TODO: check Web Assets v2 upgrade colours dark mode
-    --color-bg: hsl(213, 10%, 18%)
-    --color-bg-primary: hsl(213, 10%, 21%)
-    --color-bg-secondary: hsl(213, 10%, 16%)
-    --color-bg-tertiary: hsl(213, 10%, 14%)
-
-    --text-color: hsl(213, 10%, 80%)
-    --text-color-primary: hsl(213, 10%, 98%)
-    --text-color-secondary: hsl(213, 10%, 58%)
-    --text-color-tertiary: hsl(213, 10%, 48%)
-
-    --code-color-bg: hsl(297deg, 70%, 50%, .08)
-    --code-color: hsl(297deg, 30%, 78%)
-
-    --color-info: hsl(207deg, 95%, 65%)
-    --color-info-text: hsl(212deg, 85%, 62%)
-    --color-info-bg: hsl(212deg, 85%, 62%, .2)
-    --color-warning-text: hsl(42, 79%, 80%)
-    --color-warning-bg: hsla(42, 79%, 60%, .4)
-
-    --color-admin-text: hsl(285deg 59% 65%)
-    --color-admin-bg: hsla(285deg, 29%, 36%, .6)
-    --color-admin-bg-hover: hsla(285deg, 39%, 32%, .8)
-
-    --box-shadow-card-lg: hsla(210deg, 8%, 2%, .2) 0px 8px 24px
-
-    --btn-bg: hsl(213, 10%, 28%)
-    --btn-bg-hover: hsl(213, 10%, 30%)
-    --btn-color: hsl(213, 16%, 78%)
-
-    --navbar-bg: var(--color-bg)
-    --navbar-link-color-active: #fff
+    +theme-dark
 
   &.smaller
+    // TODO: check spacer value
     --spacer: #{$spacer * 0.8}
     --fs-base: 14px
     --fs-h1: 28px
@@ -101,23 +71,12 @@ a
   text-decoration: underline
 
 h2
-  // TODO: convert rules to Web Assets mixins if possible
-  font-variation-settings: "wght" var(--fw-normal)
+  +fw-normal
 
 /* Custom utilities. */
 .fade
   transition-duration: var(--transition-speed-slow)
 
-// TODO: rename class 'fs-0'
-.fs-0
-  font-size: var(--fs-lg)
-  line-height: calc(var(--spacer) * 7)
-
-// TODO: check if definitions 'line-height' are needed after Web Assets v2 upgrade
-+media-xs
-  .fs-0
-    line-height: calc(var(--spacer) * 6)
-
 .fs-1,
 .fs-2
   line-height: calc(var(--spacer) * 5)
@@ -134,7 +93,15 @@ h2
   font-size: var(--fs-sm)
   line-height: calc(var(--spacer) * 2)
 
-// TODO: add to Web Assets
+.fs-xl
+  font-size: var(--fs-lg) !important
+  line-height: calc(var(--spacer) * 7)
+
++media-xs
+  .fs-xl
+    line-height: calc(var(--spacer) * 6)
+
+// TODO: add style utility to Web Assets
 .h-0
   height: 0
 
@@ -165,12 +132,12 @@ input
 
 /* Custom components. */
 .box
-  padding: calc(var(--spacer) * 4)
+  +padding(4)
 
   &.donation-box-message
     border-bottom-left-radius: 0
     border-bottom-right-radius: 0
-    padding-top: var(--spacer-4)
+    +padding(4, top)
     z-index: 2147483647 // z-index maximum
 
     // Transform column vertically to improve vertical align, while keeping msg markup and JavaScript coupled with donation-box.html
@@ -194,21 +161,20 @@ input
   &:active,
   &:focus,
   &:hover
-    border-color: var(--color-accent) !important
     --btn-color: var(--color-accent)
 
-  &.active
     border-color: var(--color-accent) !important
+
+  &.active
     --btn-color-bg: transparent !important
     --btn-color: var(--color-accent) !important
 
+    border-color: var(--color-accent) !important
+
 .btn-sm
   @extend .fs-7
-  padding: var(--spacer)
 
-.btn-xl
-  @extend .fs-2
-  padding: var(--spacer)
+  +padding(3)
 
 .btn-row
   gap: var(--spacer-2)
@@ -216,12 +182,13 @@ input
 .btn-row-grid
   gap: calc(var(--spacer) * 2)
 
+  // TODO: change to CSS grid definition
   .btn
     min-width: calc(100% / 3 - var(--spacer) * 2)
 
 .btn-row-tabbed
   background-color: var(--btn-color-bg)
-  padding: var(--spacer-2)
+  +padding(2)
 
 .btn-primary
   --btn-color-bg: var(--color-accent)
@@ -233,11 +200,14 @@ input
 .btn-tabbed
   @extend .btn-primary
   @extend .fs-5
-  border-radius: var(--border-radius-lg)
+
   --btn-color-bg: transparent
   --btn-color: var(--color-accent)
+
+  border-radius: var(--border-radius-lg)
   flex-grow: 1
-  padding: var(--spacer-4) var(--spacer)
+  +padding(4, y)
+  +padding(3, x)
 
   &:active,
   &.active,
@@ -255,6 +225,7 @@ input
     .container
       max-width: var(--container-width)
 
+// TODO: consider adding style utilities for CSS grid layout to Web Assets
 .donate-row
   display: grid
   gap: calc(var(--spacer) * 2)