rubyevents · marcoroth · Feb 2, 2025 · Feb 2, 2025 · Feb 3, 2025 · Feb 3, 2025
diff --git a/Gemfile b/Gemfile
@@ -92,7 +92,7 @@ group :development do
 
   gem "error_highlight", ">= 0.4.0", platforms: [:ruby]
   gem "ruby-lsp-rails", require: false
-  gem "standardrb", "~> 1.0", require: false
+  gem "standardrb", require: false
   gem "erb_lint", require: false
   gem "authentication-zero", require: false
 end

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -675,7 +675,7 @@ DEPENDENCIES
   solid_queue
   sqlite3 (>= 2.1.0)
   stackprof
-  standardrb (~> 1.0)
+  standardrb
   thruster
   turbo-rails
   tzinfo-data

diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
@@ -1,22 +1,81 @@
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
-
-@import "components/button.css";
-@import "components/diff.css";
-@import "components/dropdown.css";
-@import "components/form.css";
-@import "components/markdown.css";
-@import "components/modal.css";
-@import "components/nav.css";
-@import "components/pagination.css";
-@import "components/tabs.css";
-@import "components/skeleton.css";
-@import "components/spotlight.css";
-@import "components/transition.css";
-@import "components/typography.css";
-@import "components/video.css";
-
-@import "vlitejs/vlite.css";
-
-@import "bridge/components";
+@import "tailwindcss";
+@import "./bridge/components.css";
+
+@plugin "daisyui" {
+  themes: light --default, dark --prefersdark;
+}
+
+@plugin "daisyui/theme" {
+  name: "light";
+  default: true; /* set as default */
+  prefersdark: false; /* set as default dark mode (prefers-color-scheme:dark) */
+  color-scheme: light; /* color of browser-provided UI */
+
+  --color-base-100: oklch(98.16% 0.0017 247.84);
+  --color-base-200: oklch(94.76% 0.0058 247.84);
+  --color-base-300: oklch(91.30% .001588 247.84);
+  --color-base-content: oklch(21% 0.006 285.885);
+  --color-primary: oklch(57.12% 0.2219 20.09);
+  --color-primary-content: oklch(98% 0.003 247.858);
+  --color-secondary: oklch(53.12% 0.1743 297.64);
+  --color-secondary-content: oklch(97% 0.014 254.604);
+  --color-accent: '#1DA1F2';
+  --color-accent-content: '#ffffff';
+  --color-neutral: '#261B23';
+  --color-neutral-content: '#ffffff';
+
+  /* border radius */
+  --radius-selector: 0.5rem;
+  --radius-field: 0.5rem;
+  --radius-box: 0.5rem;
+
+  /* base sizes */
+  --size-selector: 0.25rem;
+  --size-field: 0.25rem;
+
+  /* border size */
+  --border: 1px;
+
+  /* effects */
+  --depth: 0;
+  --noise: 1;
+
+  --card-p: 1rem;
+}
+
+@import './components/button.css';
+@import './components/diff.css';
+@import './components/dropdown.css';
+@import './components/form.css';
+@import './components/markdown.css';
+@import './components/modal.css';
+@import './components/nav.css';
+@import './components/pagination.css';
+@import './components/tabs.css';
+@import './components/skeleton.css';
+@import './components/spotlight.css';
+@import './components/transition.css';
+@import './components/typography.css' layer(utilities);
+@import './components/video.css';
+
+@import "../../../node_modules/vlitejs/dist/vlite.css";
+
+@config '../../../tailwind.config.js';
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-base-300);
+  }
+}
diff --git a/app/assets/stylesheets/application.utilities.css b/app/assets/stylesheets/application.utilities.css
@@ -0,0 +1 @@
+@import './components/typography.utilities.css'
diff --git a/app/assets/stylesheets/components/button.css b/app/assets/stylesheets/components/button.css
@@ -1,24 +1,47 @@
-@layer components {
-  .btn {
-    @apply fill-current;
-  }
+@utility btn {
+  @apply fill-current;
 
-  .btn:not(.btn-sm) {
+  &:not(.btn-sm) {
     height: 2.5rem;
     min-height: 2.5rem;
   }
 
-  .btn-rounded {
-    @apply btn-outline rounded-full border border-gray-400 bg-white hover:border-gray-500 hover:bg-gray-100 hover:text-base-content/80;
+  /* for the toolbar buttons */
+  &.btn-pill {
+    @apply btn-rounded btn-outline;
+    @apply flex-nowrap whitespace-nowrap;
+
+    /* for the watched button */
+    &.active {
+      @apply border-primary bg-primary text-primary-content;
+    }
+
+    &.btn-sm {
+      @apply text-sm font-normal;
+    }
+  }
+
+  &.btn-secondary {
+    @apply whitespace-nowrap border-primary bg-white fill-primary text-primary hover:bg-gray-100 hover:text-primary/90;
   }
 
-  .btn-circle {
-    @apply btn-rounded;
-    @apply h-10 w-10;
+  &.btn-neutral {
+    @apply bg-white hover:fill-neutral/80 hover:text-neutral/80;
   }
+}
 
+@utility btn-rounded {
+  @apply btn-outline rounded-full border border-gray-400 bg-white hover:border-gray-500 hover:bg-gray-100 text-base-content hover:text-base-content/80;
+}
+
+@utility btn-circle {
+  @apply btn-rounded;
+  @apply h-10 w-10;
+}
+
+@utility btn-pill {
   /* for the toolbar buttons */
-  .btn.btn-pill {
+  &.btn {
     @apply btn-rounded btn-outline;
     @apply flex-nowrap whitespace-nowrap;
 
@@ -31,12 +54,16 @@
       @apply text-sm font-normal;
     }
   }
+}
 
-  .btn.btn-secondary {
+@utility btn-secondary {
+  &.btn {
     @apply whitespace-nowrap border-primary bg-white fill-primary text-primary hover:bg-gray-100 hover:text-primary/90;
   }
+}
 
-  .btn.btn-neutral {
+@utility btn-neutral {
+  &.btn {
     @apply bg-white hover:fill-neutral/80 hover:text-neutral/80;
   }
 }
diff --git a/app/assets/stylesheets/components/diff.css b/app/assets/stylesheets/components/diff.css
@@ -1,11 +1,9 @@
-@layer components {
-  .diff {
-    del {
-      @apply text-error;
-    }
+@utility diff {
+  del {
+    @apply text-error;
+  }
 
-    ins {
-      @apply text-success;
-    }
+  ins {
+    @apply text-success;
   }
 }
diff --git a/app/assets/stylesheets/components/dropdown.css b/app/assets/stylesheets/components/dropdown.css
@@ -1,20 +1,39 @@
-@layer components {
-  details > summary {
-    list-style: none;
+@utility menu {
+  /* fix the dropdown button to links, by default daisyui adds padding to the form element */
+  /* therefore the inner button does not fill the dropdown item */
+  /* and only the text of the button is clickable */
+  & li form.button_to {
+    padding: 0;
+    display: block;
   }
 
+  & li form.button_to button {
+    display: block;
+    width: 100%;
+    text-align: start;
+    padding: 0.5rem 1rem;
+  }
+}
+
+@utility button_to {
   /* fix the dropdown button to links, by default daisyui adds padding to the form element */
   /* therefore the inner button does not fill the dropdown item */
   /* and only the text of the button is clickable */
-  .menu li form.button_to {
+  .menu li &form {
     padding: 0;
     display: block;
   }
 
-  .menu li form.button_to button {
+  .menu li &form button {
     display: block;
     width: 100%;
     text-align: start;
     padding: 0.5rem 1rem;
   }
 }
+
+@layer components {
+  details > summary {
+    list-style: none;
+  }
+}
diff --git a/app/assets/stylesheets/components/form.css b/app/assets/stylesheets/components/form.css
@@ -1,12 +1,15 @@
+@utility input {
+  /* because setting --rounded-btn to 1.9rem makes also all input field fully rounded  */
+  /* we override this behaviour */
+  @apply rounded-lg border border-gray-200 bg-white;
+}
+
+@utility textarea {
+  @apply rounded-lg border border-gray-200 bg-white;
+}
+
 @layer components {
   label {
     @apply font-semibold;
   }
-
-  /* because setting --rounded-btn to 1.9rem makes also all input field fully rounded  */
-  /* we override this behaviour */
-  .input,
-  .textarea {
-    @apply rounded-lg border border-gray-200 bg-white;
-  }
 }
diff --git a/app/assets/stylesheets/components/markdown.css b/app/assets/stylesheets/components/markdown.css
@@ -1,37 +1,35 @@
-@layer components {
-  .markdown {
-    p {
-      @apply mb-2;
-    }
+@utility markdown {
+  p {
+    @apply mb-2;
+  }
 
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      @apply mb-4 mt-8;
-    }
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @apply mb-4 mt-8;
+  }
 
-    h1,
-    h2,
-    h3 {
-      @apply text-primary;
-    }
+  h1,
+  h2,
+  h3 {
+    @apply text-primary;
+  }
 
-    ul {
-      @apply mb-4;
-      li {
-        @apply ml-6 list-disc;
-      }
+  ul {
+    @apply mb-4;
+    li {
+      @apply ml-6 list-disc;
     }
+  }
 
-    ol {
-      @apply mb-4;
-    }
+  ol {
+    @apply mb-4;
+  }
 
-    a {
-      @apply text-primary;
-    }
+  a {
+    @apply text-primary;
   }
 }
diff --git a/app/assets/stylesheets/components/modal.css b/app/assets/stylesheets/components/modal.css
@@ -1,9 +1,17 @@
-@layer components {
-  .modal-box {
-    @apply bg-white;
+@utility modal-box {
+  @apply bg-white;
+}
+
+@utility modal-top {
+  &.spotlight {
+    .modal-box {
+      @apply absolute left-0 right-0 top-4 mx-4 w-auto rounded-lg lg:top-8 lg:mx-8;
+    }
   }
+}
 
-  .modal-top.spotlight {
+@utility spotlight {
+  &.modal-top {
     .modal-box {
       @apply absolute left-0 right-0 top-4 mx-4 w-auto rounded-lg lg:top-8 lg:mx-8;
     }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		@import './components/typography.utilities.css'