Updated

frontend/configs/design.site.sass

@@ -1,2 +1,2 @@
-$lightBackground: #daf8fa
+$lightBackground: #dae6f6
-$darkBackground: #08051d
+$darkBackground: #10121a

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'
-
+import './Counter.sass'
-let [count, setCount] = createSignal(0)
-
-const increment = () => {
-  setCount(count() + 1)
-}
-
-const decrement = () => {
-  setCount(count() - 1)
-}
 
 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}>

frontend/src/routes/index.sass

@@ -1,4 +1,5 @@
 @use '../styles/variables' as vars
 
-.h1
+h4
-  color: vars.$accentColor
+  font-size: 1.1rem
+  font-weight: 300

frontend/src/routes/index.tsx

@@ -1,13 +1,13 @@
-import './index.sass'
+import { Column, Page } from '~/@dasig'
 import Counter from '~/components/Counter/Counter'
-import { Page, Column } from '~/@dasig'
+import './index.sass'
 
 export default () => {
   return (
     <Page title="Dasig - Index">
       <Column>
         <h1>DASIG</h1>
-        <h4>A next level development for pure speed</h4>
+        <h4 class='text'>An architectural framework for pure speed fullstack development</h4>
         <Counter />
       </Column>
     </Page>

frontend/src/styles/app.sass

@@ -8,8 +8,8 @@
   background-color: light-dark(design.$lightBackground, design.$darkBackground)
   transition: background-color 0.6s ease-out
 
-.title
+.text
-  color: light-dark(color.adjust(design.$lightBackground, $blackness: 70%), color.adjust(design.$darkBackground, $lightness: 70%))
+  color: light-dark(color.adjust(design.$lightBackground, $blackness: 90%), color.adjust(design.$darkBackground, $lightness: 90%))
   transition: background-color 0.6s ease-out
 
 a

frontend/src/styles/functions.sass

@@ -0,0 +1,5 @@
+@function lighten-color($hex, $amount)
+  @return mix(white, $hex, $amount)
+
+@function darken-color($hex, $amount)
+  @return mix(black, $hex, $amount)

frontend/src/styles/variables.sass

@@ -1,4 +1,5 @@
 @use 'sass:color'
+@use '../../configs/design.site' as design
 
 $background: #09111f
 $textColor: #f0f8ff