From b4aa5194e8464e05de765a1f15fc7e8c72a802d6 Mon Sep 17 00:00:00 2001 From: Mark Hendriksen Date: Mon, 22 Sep 2025 09:26:06 +0200 Subject: [PATCH] Adjust color styles for checkboxes and text utilities (#152) * Adjust color styles for checkboxes and text utilities Updated checkbox hover and checked states for light and dark themes, including background and SVG fill colors. Modified text and foreground utility classes to use different gray shades in dark mode for improved contrast and consistency. * Update selection bar and checkbox styles Refines the selection bar appearance by updating its background, border, and text color classes. Adjusts the checkbox to use the light variant and improves disabled and checked state styles in the design system CSS, including correcting SVG fill colors for checkboxes. --- app/assets/tailwind/maybe-design-system.css | 13 +++++++------ .../maybe-design-system/foreground-utils.css | 4 ++-- .../tailwind/maybe-design-system/text-utils.css | 4 ++-- app/views/entries/_selection_bar.html.erb | 4 ++-- 4 files changed, 13 insertions(+), 12 deletions(-) diff --git a/app/assets/tailwind/maybe-design-system.css b/app/assets/tailwind/maybe-design-system.css index 9bb3046dc..de87765fa 100644 --- a/app/assets/tailwind/maybe-design-system.css +++ b/app/assets/tailwind/maybe-design-system.css @@ -394,7 +394,7 @@ .checkbox--light { &[type='checkbox'] { - @apply border-alpha-black-200 checked:bg-gray-900 checked:ring-gray-900 focus:ring-gray-900 focus-visible:ring-gray-900 checked:hover:bg-gray-500; + @apply border-alpha-black-200 checked:bg-gray-900 checked:ring-gray-900 focus:ring-gray-900 focus-visible:ring-gray-900 checked:hover:bg-gray-300 hover:bg-gray-300; } &[type='checkbox']:disabled { @@ -404,16 +404,17 @@ @variant theme-dark { &[type='checkbox'] { @apply ring-gray-900 checked:text-white; - background-color: var(--color-gray-600); + background-color: var(--color-gray-100); } &[type='checkbox']:disabled { - @apply cursor-not-allowed opacity-80 ring-gray-600; + @apply cursor-not-allowed opacity-80; + background-color: var(--color-gray-600); } &[type='checkbox']:checked { - background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); - background-color: var(--color-gray-600); + background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23808080' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); + background-color: var(--color-gray-100); } } } @@ -428,7 +429,7 @@ } &[type='checkbox']:checked { - background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='111827' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); + background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23111827' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); } } diff --git a/app/assets/tailwind/maybe-design-system/foreground-utils.css b/app/assets/tailwind/maybe-design-system/foreground-utils.css index 6bc76aa18..5697d2e9a 100644 --- a/app/assets/tailwind/maybe-design-system/foreground-utils.css +++ b/app/assets/tailwind/maybe-design-system/foreground-utils.css @@ -42,7 +42,7 @@ @apply text-gray-50; @variant theme-dark { - @apply text-gray-700; + @apply text-gray-400; } } @@ -50,7 +50,7 @@ @apply text-gray-100; @variant theme-dark { - @apply text-gray-600; + @apply text-gray-500; } } diff --git a/app/assets/tailwind/maybe-design-system/text-utils.css b/app/assets/tailwind/maybe-design-system/text-utils.css index 1a35dfffe..7aa8f2e67 100644 --- a/app/assets/tailwind/maybe-design-system/text-utils.css +++ b/app/assets/tailwind/maybe-design-system/text-utils.css @@ -18,7 +18,7 @@ @apply text-gray-500; @variant theme-dark { - @apply text-gray-400; + @apply text-gray-300; } } @@ -26,7 +26,7 @@ @apply text-gray-400; @variant theme-dark { - @apply text-gray-600; + @apply text-gray-500; } } diff --git a/app/views/entries/_selection_bar.html.erb b/app/views/entries/_selection_bar.html.erb index a1faca091..48648c2a4 100644 --- a/app/views/entries/_selection_bar.html.erb +++ b/app/views/entries/_selection_bar.html.erb @@ -1,6 +1,6 @@ -
+
- <%= check_box_tag "entry_selection", 1, true, class: "checkbox checkbox--dark", data: { action: "bulk-select#deselectAll" } %> + <%= check_box_tag "entry_selection", 1, true, class: "checkbox checkbox--light", data: { action: "bulk-select#deselectAll" } %>