Updated

frontend/src/components/Counter/Counter.sass

@@ -1,3 +1,7 @@
+@use 'sass:color'
+@use '../../../configs/design.site' as design
+@use '../../styles/functions' as func
+
 .counter
   font-family: inherit
   font-size: inherit
@@ -10,12 +14,13 @@
   border: 1px solid rgba(22, 34, 60, 0.5)
   padding: 1rem 2rem
   border-radius: 16px
-  background: rgba(134, 152, 217, 0.1)
+  background-color: light-dark(rgba(func.darken-color(design.$lightBackground, 10%), 0.8), rgba(func.lighten-color(design.$darkBackground, 10%), 0.8))
+  transition: background-color 0.6s ease-out
   width: 3rem
 
   &__display
     font-size: 1.75rem
-    font-weight: bold
+    font-weight: 200
 
   &__buttons
     display: flex

frontend/src/components/Counter/Counter.tsx

@@ -1,20 +1,20 @@
-import './Counter.sass'
 import { createSignal } from 'solid-js'
-
-let [count, setCount] = createSignal(0)
-
-const increment = () => {
-  setCount(count() + 1)
-}
-
-const decrement = () => {
-  setCount(count() - 1)
-}
+import './Counter.sass'
 
 export default () => {
+  let [count, setCount] = createSignal(0)
+
+  const increment = () => {
+    setCount(count() + 1)
+  }
+
+  const decrement = () => {
+    setCount(count() - 1)
+  }
+
   return (
     <>
-      <section class="counter">
+      <section class="counter box">
         <div class="counter__display">{count()}</div>
         <div class="counter__buttons">
           <button class="counter__decrement" onClick={decrement}>