feat: automated replacement

2026-04-27 02:58:40 +02:00 · 2025-10-28 14:13:30 -03:00
parent dd82289488
commit e600d87968
167 changed files with 4442 additions and 2503 deletions
--- a/frontend/src/styles/_animations.scss
+++ b/frontend/src/styles/_animations.scss
@@ -102,7 +102,7 @@
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
-    border-top: 4px solid $primary;
+    //border-top: 4px solid $primary;
    border-radius: 50%;
    animation: spin 1s linear infinite, fade-in 0.1s ease-in forwards;
    animation-delay: 200ms;
--- a/frontend/src/styles/_bootstrap.scss
+++ b/frontend/src/styles/_bootstrap.scss
@@ -1,33 +1,28 @@
@use "sass:map";
-@import "bootstrap/scss/functions";
@import "variables";
+@import "bootstrap/scss/bootstrap-utilities";

 // Import all of Bootstrap's CSS
-@import "bootstrap/scss/bootstrap";
+// @import "bootstrap/scss/bootstrap";
+@import "bootstrap/scss/offcanvas";
+// @import "bootstrap/scss/forms";
+@import "bootstrap/scss/transitions";
+@import "bootstrap/scss/list-group";
+@import "bootstrap/scss/tooltip";
+@import "bootstrap/scss/progress";
+@import "bootstrap/scss/nav";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
+
+// @import "bootstrap/scss/"

 .form-label {
  font-size: $font-size-base; // Fixes crispy-bootstrap5 legend labels being too big
  font-weight: bold;
 }

-$theme-colors: map.merge(
-  $theme-colors,
-  (
-    "primary": $primary
-  )
-);
-
-@media all and (min-width: 992px) {
-  .navbar .nav-item .dropdown-menu {
-    display: none;
-    margin-top: 0;
-  }
-
-  .navbar .nav-item:hover .dropdown-menu {
-    display: block;
-    left: 0;
-  }
-}
+$theme-colors: map.merge($theme-colors,
+    ("primary": $primary ));

 .table .col-auto {
  width: 1%;
@@ -42,7 +37,8 @@ $theme-colors: map.merge(
  --#{$prefix}offcanvas-width: min(95vw, 90vw) !important;
 }

-.offcanvas-size-md { /* add Responsivenes to default offcanvas */
+.offcanvas-size-md {
+  /* add Responsivenes to default offcanvas */
  --#{$prefix}offcanvas-width: min(95vw, 400px) !important;
 }

@@ -51,5 +47,5 @@ $theme-colors: map.merge(
 }

 .dropdown-toggle.dropdown-toggle-no-icon::after {
-  display:none;
-}
+  display: none;
+}
--- a/frontend/src/styles/_font-awesome.scss
+++ b/frontend/src/styles/_font-awesome.scss
@@ -1,4 +1 @@
-@import "@fortawesome/fontawesome-free/css/fontawesome.min.css";
-@import "@fortawesome/fontawesome-free/css/solid.min.css";
-@import "@fortawesome/fontawesome-free/css/regular.min.css";
-@import "@fortawesome/fontawesome-free/css/brands.min.css";
+@use "@fortawesome/fontawesome-free/css/all.css";
--- a/frontend/src/styles/_scrollbar.scss
+++ b/frontend/src/styles/_scrollbar.scss
@@ -1,4 +1,4 @@
-@import "variables";
+@use "variables";

 /* custom scrollbar */
 ::-webkit-scrollbar {
@@ -6,16 +6,16 @@
 }

 ::-webkit-scrollbar-track {
-  background-color: $gray-800;
+  //background-color: $gray-800;
 }

 ::-webkit-scrollbar-thumb {
-  background-color: $gray-600;
+  //background-color: $gray-600;
  border-radius: 20px;
  border: 4px solid transparent;
  background-clip: content-box;
 }

 ::-webkit-scrollbar-thumb:hover {
-  background-color: $primary;
+  //background-color: $primary;
 }
--- a/frontend/src/styles/_tom-select.scss
+++ b/frontend/src/styles/_tom-select.scss
@@ -1,56 +1,57 @@
-@import "tom-select/dist/css/tom-select.bootstrap5.min.css";
-@import "variables";
-
-/* FIX BOOTSTRAP STYLING FOR TOM SELECT */
-.ts-dropdown,
-.ts-control,
-.ts-control input {
-  color: var(--bs-body-color);
-}
-
-/* stylelint-disable-next-line selector-class-pattern */
-.ts-wrapper.plugin-remove_button .item .remove {
-  color: $red;
-}
-
-/* stylelint-disable-next-line selector-class-pattern */
-.plugin-clear_button .clear-button {
-  color: $red;
-  right: 60px;
-}
-
-.ts-wrapper.multi .ts-control > div.active {
-  background: $primary;
-  color: $body-color;
-  border: 0 solid #0000;
-}
-
-.focus .ts-control {
-  color: $input-focus-color;
-  background-color: $input-focus-bg;
-  border-color: $input-focus-border-color;
-  outline: 0;
-
-  @if $enable-shadows {
-    @include box-shadow($input-box-shadow, $input-focus-box-shadow);
-  } @else {
-    // Avoid using mixin so we can pass custom focus shadow properly
-    box-shadow: $input-focus-box-shadow;
-  }
-}
-
-.focus.ts-wrapper {
-  border-color: $form-select-focus-border-color;
-  outline: 0;
-
-  @if $enable-shadows {
-    @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
-  } @else {
-    // Avoid using mixin so we can pass custom focus shadow properly
-    box-shadow: $form-select-focus-box-shadow;
-  }
-}
-
-.ts-control > .clear-button {
-  color: $red !important;
-}
+//@use "tom-select/dist/css/tom-select.default.min.css";
+//@use "tom-select/dist/css/tom-select.bootstrap5.min.css";
+//@use "variables";
+//
+///* FIX BOOTSTRAP STYLING FOR TOM SELECT */
+//.ts-dropdown,
+//.ts-control,
+//.ts-control input {
+//  color: var(--bs-body-color);
+//}
+//
+///* stylelint-disable-next-line selector-class-pattern */
+////.ts-wrapper.plugin-remove_button .item .remove {
+////  color: $red;
+////}
+//
+///* stylelint-disable-next-line selector-class-pattern */
+////.plugin-clear_button .clear-button {
+////  color: $red;
+////  right: 60px;
+////}
+//
+//.ts-wrapper.multi .ts-control > div.active {
+//  //background: $primary;
+//  //color: $body-color;
+//  border: 0 solid #0000;
+//}
+//
+//.focus .ts-control {
+//  //color: $input-focus-color;
+//  //background-color: $input-focus-bg;
+//  //border-color: $input-focus-border-color;
+//  outline: 0;
+//
+//  @if $enable-shadows {
+//    @include box-shadow($input-box-shadow, $input-focus-box-shadow);
+//  } @else {
+//    // Avoid using mixin so we can pass custom focus shadow properly
+//    box-shadow: $input-focus-box-shadow;
+//  }
+//}
+//
+//.focus.ts-wrapper {
+//  border-color: $form-select-focus-border-color;
+//  outline: 0;
+//
+//  @if $enable-shadows {
+//    @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
+//  } @else {
+//    // Avoid using mixin so we can pass custom focus shadow properly
+//    box-shadow: $form-select-focus-box-shadow;
+//  }
+//}
+//
+//.ts-control > .clear-button {
+//  color: $red !important;
+//}
--- a/frontend/src/styles/style.scss
+++ b/frontend/src/styles/style.scss
@@ -1,11 +1,10 @@
-@import "variables";
-@import "font-awesome";
-@import "bootstrap";
-@import "datepicker";
-@import "tom-select";
-@import "animations";
-@import "scrollbar";
-@import "./tailwind.css";
+@use "variables";
+@use "font-awesome";
+@use "bootstrap";
+@use "datepicker";
+@use "tom-select";
+@use "animations";
+@use "scrollbar";

 .sticky-sidebar {
  position: sticky;
@@ -21,17 +20,17 @@ select[multiple] {
  max-height: 50vh;
 }

-.font-base {
-  font-family: $font-family-base;
-}
+//.font-base {
+//  font-family: bootstrap.$font-family-base;
+//}

 ::selection {
-  color: $gray-800;
-  background-color: $primary;
+  color: variables.$gray-800;
+  background-color: variables.$primary;
 }

 .dotted-line {
-  border-bottom: 2px dotted $gray-700;
+  border-bottom: 2px dotted variables.$gray-700;
  margin: 0 5px;
  position: relative;
 }
@@ -50,9 +49,9 @@ select[multiple] {
  padding: 0 8px !important;
 }

-.transaction:has(input[type="checkbox"]:checked) > div > .transaction-item {
-  background-color: $primary-bg-subtle-dark;
-}
+//.transaction:has(input[type="checkbox"]:checked) > div > .transaction-item {
+//  background-color: bootstrap.$primary-bg-subtle-dark;
+//}

 .offline {
  text-align: center;
@@ -88,4 +87,4 @@ select[multiple] {

 div:where(.swal2-container) {
  z-index: 1100 !important;
-}
+}
--- a/frontend/src/styles/tailwind.css
+++ b/frontend/src/styles/tailwind.css
@@ -1,16 +1,103 @@
@import "tailwindcss" prefix(tw) source("../../../app/templates/");
-@custom-variant dark (&:where([data-bs-theme=dark], [data-bs-theme=dark] *));
+
+@plugin "daisyui" {
+  themes: dark --default, light;
+  logs: true;
+}
+@plugin "tw-bootstrap-grid";
+
+@plugin "daisyui/theme" {
+  name: "light";
+  default: false;
+  prefersdark: false;
+  color-scheme: "light";
+  --color-base-100: oklch(100% 0 0);
+  --color-base-200: oklch(98% 0 0);
+  --color-base-300: oklch(95% 0 0);
+  --color-base-content: oklch(21% 0.006 285.885);
+  --color-primary: oklch(87% 0.169 91.605);
+  --color-primary-content: oklch(41% 0.112 45.904);
+  --color-secondary: oklch(44% 0.043 257.281);
+  --color-secondary-content: oklch(98% 0.003 247.858);
+  --color-accent: oklch(70% 0.01 56.259);
+  --color-accent-content: oklch(14% 0.004 49.25);
+  --color-neutral: oklch(14% 0.005 285.823);
+  --color-neutral-content: oklch(92% 0.004 286.32);
+  --color-info: oklch(74% 0.16 232.661);
+  --color-info-content: oklch(29% 0.066 243.157);
+  --color-success: oklch(76% 0.177 163.223);
+  --color-success-content: oklch(37% 0.077 168.94);
+  --color-warning: oklch(82% 0.189 84.429);
+  --color-warning-content: oklch(41% 0.112 45.904);
+  --color-error: oklch(71% 0.194 13.428);
+  --color-error-content: oklch(27% 0.105 12.094);
+  --radius-selector: 0.5rem;
+  --radius-field: 0.5rem;
+  --radius-box: 0.5rem;
+  --size-selector: 0.25rem;
+  --size-field: 0.25rem;
+  --border: 1px;
+  --depth: 0;
+  --noise: 0;
+}
+
+
+@plugin "daisyui/theme" {
+  name: "dark";
+  default: true;
+  prefersdark: true;
+  color-scheme: "dark";
+  --color-base-100: oklch(25.33% 0.016 252.42);
+  --color-base-200: oklch(23.26% 0.014 253.1);
+  --color-base-300: oklch(21.15% 0.012 254.09);
+  --color-base-content: oklch(97.807% 0.029 256.847);
+  --color-primary: oklch(87% 0.169 91.605);
+  --color-primary-content: oklch(41% 0.112 45.904);
+  --color-secondary: oklch(44% 0.043 257.281);
+  --color-secondary-content: oklch(98% 0.003 247.858);
+  --color-accent: oklch(70% 0.01 56.259);
+  --color-accent-content: oklch(14% 0.004 49.25);
+  --color-neutral: oklch(14% 0.005 285.823);
+  --color-neutral-content: oklch(92% 0.004 286.32);
+  --color-info: oklch(74% 0.16 232.661);
+  --color-info-content: oklch(29% 0.066 243.157);
+  --color-success: oklch(76% 0.177 163.223);
+  --color-success-content: oklch(37% 0.077 168.94);
+  --color-warning: oklch(82% 0.189 84.429);
+  --color-warning-content: oklch(41% 0.112 45.904);
+  --color-error: oklch(71% 0.194 13.428);
+  --color-error-content: oklch(27% 0.105 12.094);
+  --radius-selector: 0.5rem;
+  --radius-field: 0.5rem;
+  --radius-box: 0.5rem;
+  --size-selector: 0.25rem;
+  --size-field: 0.25rem;
+  --border: 1px;
+  --depth: 0;
+  --noise: 0;
+}
+
+
+@custom-variant dark (&:where([data-bs-theme=dark], [data-bs-theme=dark] *), &:where([data-theme=dark], [data-theme=dark] *));
@custom-variant hover (&:hover);

-.sidebar-active {
-    @apply tw:bg-gray-700 tw:text-white;
+
+@layer utilities {
+    .transaction:has(input[type="checkbox"]:checked) > div > .transaction-item {
+        background-color: --alpha(var(--color-primary) / 15%);
+    }
 }

-.sidebar-item:not(.sidebar-active) {
-    @apply tw:text-gray-300 tw:hover:text-white;
-}

@layer components {
+    .sidebar-active {
+        @apply tw:text-primary-content tw:bg-primary;
+    }
+
+    .sidebar-item:not(.sidebar-active) {
+        @apply tw:text-base-content/80 tw:hover:text-base-content;
+    }
+
    .sidebar {
        @apply tw:z-1020 tw:fixed tw:top-0 tw:start-0 tw:h-full tw:transition-all tw:duration-100;
    }