Merge pull request #460 from acelaya-forks/feature/tests-with-tailwind

Define new brand colors for dark and light modes

Author: acelaya

CHANGELOG.md

@@ -4,13 +4,17 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org).
 
-## [Unreleased]
+## [0.9.0] - 2025-05-08
 ### Added
 * Add tailwind-based `CopyToClipboardButton` component.
 * Allow `CardModal`'s `title` to be any `ReactNode` not just a `string`.
 
 ### Changed
-* *Nothing*
+* Define accessible brand colors for light and dark mode.
+
+  The one used for dark mode is the same previously used, but for light mode we use a slightly darker shade of blue that ensures proper color contrast.
+
+  As a consequence, the `--color-brand` and `--color-brand-dark` CSS variables have been removed, and specific ones have been defined for light and dark modes.
 
 ### Deprecated
 * *Nothing*

dev/tailwind/navigation/PaginatorPage.tsx

@@ -1,7 +1,6 @@
 import type { FC } from 'react';
 import { useState } from 'react';
-import { SimpleCard } from '../../../src';
-import { Paginator } from '../../../src/tailwind';
+import { Paginator, SimpleCard } from '../../../src/tailwind';
 
 export const PaginatorPage: FC = () => {
   const [currentPage, setCurrentPage] = useState(3);

src/tailwind/feedback/Result.tsx

@@ -20,7 +20,7 @@ export const Result: FC<ResultProps> = ({ variant, className, size = 'md', child
         'tw:p-4': size === 'md',
         'tw:p-6': size === 'lg',
         'tw:[&]:text-white': variant !== 'warning',
-        'tw:bg-brand': variant === 'success',
+        'tw:bg-lm-brand tw:dark:bg-dm-brand': variant === 'success',
         'tw:bg-danger': variant === 'error',
         'tw:bg-warning tw:text-black': variant === 'warning',
       },

src/tailwind/form/BooleanControl.tsx

@@ -19,7 +19,7 @@ export const BooleanControl = forwardRef<HTMLInputElement, BooleanControlProps>(
       className={clsx(
         'tw:appearance-none tw:focus-ring tw:cursor-[inherit]',
         'tw:border-1 tw:border-lm-input-border tw:dark:border-dm-input-border',
-        'tw:bg-lm-primary tw:dark:bg-dm-primary tw:checked:bg-brand tw:bg-no-repeat',
+        'tw:bg-lm-primary tw:dark:bg-dm-primary tw:checked:bg-lm-brand tw:dark:checked:bg-dm-brand tw:bg-no-repeat',
         // Use different background color when rendered inside a card
         'tw:group-[&]/card:bg-lm-input tw:group-[&]/card:dark:bg-dm-input',
         className,

src/tailwind/form/Button.tsx

@@ -53,16 +53,18 @@ export const Button: FC<ButtonProps> = ({
           'tw:px-4 tw:py-2 tw:text-lg': size === 'lg',
         },
         {
-          'tw:border-brand tw:text-brand': variant === 'primary',
+          'tw:border-lm-brand tw:dark:border-dm-brand': variant === 'primary',
+          'tw:text-lm-brand tw:dark:text-dm-brand': variant === 'primary' && !solid,
           'tw:border-zinc-500': variant === 'secondary',
           'tw:text-zinc-500': variant === 'secondary' && !solid,
           'tw:border-danger': variant === 'danger',
           'tw:text-danger': variant === 'danger' && !solid,
         },
         solid && {
           'tw:text-white': true,
-          'tw:bg-brand': variant === 'primary',
-          'tw:highlight:bg-brand-dark tw:highlight:border-brand-dark': variant === 'primary',
+          'tw:bg-lm-brand tw:dark:bg-dm-brand': variant === 'primary',
+          'tw:highlight:bg-lm-brand-dark tw:dark:highlight:bg-dm-brand-dark': variant === 'primary',
+          'tw:highlight:border-lm-brand-dark tw:dark:highlight:border-dm-brand-dark': variant === 'primary',
 
           'tw:bg-zinc-500': variant === 'secondary',
           'tw:highlight:bg-zinc-600 tw:highlight:border-zinc-600': variant === 'secondary',
@@ -72,7 +74,7 @@ export const Button: FC<ButtonProps> = ({
         },
         !disabled && {
           'tw:highlight:text-white': !solid,
-          'tw:highlight:bg-brand': variant === 'primary',
+          'tw:highlight:bg-lm-brand tw:dark:highlight:bg-dm-brand': variant === 'primary',
           'tw:highlight:bg-zinc-500': variant === 'secondary',
           'tw:highlight:bg-danger': variant === 'danger',
         },

src/tailwind/navigation/LinkButton.tsx

@@ -11,7 +11,8 @@ export const LinkButton: FC<LinkButtonProps> = ({ className, disabled, size = 'm
   <button
     className={clsx(
       'tw:inline-flex tw:rounded-md tw:focus-ring',
-      'tw:text-brand tw:highlight:text-brand-dark tw:highlight:underline',
+      'tw:text-lm-brand tw:dark:text-dm-brand',
+      'tw:highlight:text-lm-brand-dark tw:dark:highlight:text-dm-brand-dark tw:highlight:underline',
       {
         'tw:px-1.5 tw:py-1 tw:text-sm': size === 'sm',
         'tw:px-3 tw:py-1.5': size === 'md',

src/tailwind/navigation/NavPills.tsx

@@ -18,10 +18,13 @@ const Pill: FC<PillProps> = ({ className, to, ...rest }) => {
       to={to}
       className={({ isActive }) => clsx(
         'tw:px-4 tw:pt-2 tw:pb-[calc(0.5rem-3px)] tw:border-b-3',
-        'tw:font-bold tw:no-underline tw:text-center tw:highlight:text-brand tw:transition-colors',
-        'tw:rounded-none tw:outline-none tw:focus-visible:inset-ring-2 tw:focus-visible:inset-ring-brand/50',
+        'tw:highlight:text-lm-brand tw:dark:highlight:text-dm-brand',
+        'tw:font-bold tw:text-center tw:no-underline tw:transition-colors',
+        'tw:rounded-none tw:outline-none tw:focus-visible:inset-ring-2',
+        'tw:focus-visible:inset-ring-lm-brand/50 tw:dark:focus-visible:inset-ring-dm-brand/50',
         {
-          'tw:border-b-brand active': isActive,
+          'tw:text-lm-brand tw:dark:text-dm-brand': isActive,
+          'tw:border-b-lm-brand tw:dark:border-b-dm-brand active': isActive,
           'tw:border-b-transparent tw:text-gray-500': !isActive,
           'tw:flex-grow': context?.fill,
         },

src/tailwind/navigation/Paginator.tsx

@@ -16,10 +16,12 @@ const buildPaginatorItemClasses = (active = false) => clsx(
   commonClasses,
   'tw:px-3 py-2 tw:cursor-pointer tw:no-underline',
   'tw:focus-ring tw:focus-visible:z-1',
-  {
-    'tw:highlight:bg-lm-secondary tw:dark:highlight:bg-dm-secondary tw:text-brand': !active,
-    'tw:bg-lm-brand tw:dark:bg-dm-brand tw:text-white': active,
-  },
+  !active && [
+    'tw:text-lm-brand tw:dark:text-dm-brand',
+    'tw:bg-lm-primary tw:dark:bg-dm-primary',
+    'tw:highlight:bg-lm-secondary tw:dark:highlight:bg-dm-secondary',
+  ],
+  active && 'tw:bg-lm-main tw:dark:bg-dm-main tw:text-white',
 );
 
 const DisabledPaginatorItem: FC<PropsWithChildren> = ({ children }) => (

src/tailwind/tailwind.preset.css

@@ -6,49 +6,44 @@
 
 @theme static inline {
     /* Light mode */
-    /*--color-lm-main: #2078CF;*/ /*Properly accessible with white background*/
-    --color-lm-main: #4696e5; /* TODO Rename to "brand" */
-    --color-lm-main-dark: #1f69c0;
+    --color-lm-brand: #2078CF;
+    --color-lm-brand-dark: color-mix(in srgb, black 20%, var(--tw-color-lm-brand) 80%);
     --color-lm-primary: #ffffff;
     --color-lm-primary-alfa: rgb(var(--tw-color-lm-primary) / .5);
     --color-lm-secondary: #f5f6fe;
     --color-lm-text: #232323;
     --color-lm-border: rgb(0 0 0 / .125);
     --color-lm-table-border: #dee2e6;
     --color-lm-active: #eeeeee;
-    --color-lm-brand: var(--tw-color-lm-main); /* TODO Rename to "main" */
+    --color-lm-main: var(--tw-color-lm-brand);
     --color-lm-input: var(--tw-color-lm-primary);
     --color-lm-disabled-input: var(--tw-color-lm-secondary);
     --color-lm-input-text: #495057;
     --color-lm-input-border: rgb(0 0 0 / .19);
     --color-lm-table-highlight: rgb(0 0 0 / .075);
 
     /* Dark mode */
-    --color-dm-main: #4696e5; /* TODO Rename to "brand" */
-    --color-dm-main-dark: #1f69c0;
+    --color-dm-brand: #4696e5;
+    --color-dm-brand-dark: color-mix(in srgb, black 25%, var(--tw-color-dm-brand) 75%);
     --color-dm-primary: #161b22;
     --color-dm-primary-alfa: rgb(var(--tw-color-dm-primary) / .8);
     --color-dm-secondary: #0f131a;
     --color-dm-text: rgb(201 209 217);
     --color-dm-border: rgb(255 255 255 / .15);
     --color-dm-table-border: #393d43;
     --color-dm-active: var(--tw-color-dm-secondary);
-    --color-dm-brand: #0b2d4e; /* TODO Rename to "main" */
+    --color-dm-main: #0b2d4e;
     --color-dm-input: rgb(17.9928571429 22.0821428571 27.8071428571);
     --color-dm-disabled-input: rgb(26.0071428571 31.9178571429 40.1928571429);
     --color-dm-input-text: var(--tw-color-dm-text);
     --color-dm-input-border: var(--tw-color-dm-border);
     --color-dm-table-highlight: var(--tw-color-dm-border);
 
-    /* TODO Remove these two colors */
-    --color-brand: #4696e5;
-    --color-brand-dark: #1f69c0;
-
     /* General color palette */
     --color-danger: #dc3545;
-    --color-danger-dark: #bb2d3b;
+    --color-danger-dark: color-mix(in srgb, black 20%, var(--tw-color-danger) 80%);
     --color-warning: #ffc107;
-    --color-warning-dark: #ffca2c;
+    --color-warning-dark: color-mix(in srgb, black 20%, var(--tw-color-warning) 80%);
     --color-placeholder: #6c757d;
 
     /* Override breakpoints with the values from bootstrap, to keep sizing until fully migrated */
@@ -59,6 +54,7 @@
     --breakpoint-2xl: 1400px;
 }
 
+/* Deprecated. TODO Remove with bootstrap support */
 @layer base {
     html:not([data-theme='dark']) {
         --primary-color: var(--tw-color-lm-primary);
@@ -67,7 +63,7 @@
         --text-color: var(--tw-color-lm-text);
         --border-color: var(--tw-color-lm-border);
         --active-color: var(--tw-color-lm-active);
-        --brand-color: var(--tw-color-lm-brand);
+        --brand-color: var(--tw-color-lm-main);
         --input-color: var(--tw-color-lm-input);
         --input-disabled-color: var(--tw-color-lm-disabled-input);
         --input-text-color: var(--tw-color-lm-input-text);
@@ -121,7 +117,10 @@
         color: var(--tw-color-brand);
         border-radius: var(--tw-radius-xs);
 
-        @apply tw:focus-visible:outline-3 tw:focus-visible:outline-brand/50 tw:focus-visible:outline-offset-3 tw:focus-visible:z-1;
+        @apply
+            tw:focus-visible:outline-3 tw:focus-visible:outline-offset-3
+            tw:focus-visible:outline-lm-brand/50 tw:dark:focus-visible:outline-dm-brand/50
+            tw:focus-visible:z-1;
     }
 
     h1 {
@@ -161,7 +160,7 @@
 }
 
 @utility focus-ring {
-    @apply tw:focus-ring-base tw:focus-visible:ring-brand/50;
+    @apply tw:focus-ring-base tw:focus-visible:ring-lm-brand/50 tw:dark:focus-visible:ring-dm-brand/50;
 }
 
 @utility focus-ring-danger {

test/tailwind/feedback/__snapshots__/CardModal.test.tsx.snap

@@ -285,13 +285,13 @@ exports[`<CardModal /> > renders expected variant 1`] = `
         data-testid="footer"
       >
         <button
-          class="tw:inline-flex tw:rounded-md tw:focus-ring tw:text-brand tw:highlight:text-brand-dark tw:highlight:underline tw:px-3 tw:py-1.5"
+          class="tw:inline-flex tw:rounded-md tw:focus-ring tw:text-lm-brand tw:dark:text-dm-brand tw:highlight:text-lm-brand-dark tw:dark:highlight:text-dm-brand-dark tw:highlight:underline tw:px-3 tw:py-1.5"
           type="button"
         >
           Cancel
         </button>
         <button
-          class="tw:flex tw:gap-2 tw:items-center tw:justify-center tw:border tw:rounded-md tw:no-underline tw:transition-colors tw:focus-ring tw:px-3 tw:py-1.5 tw:border-brand tw:text-brand tw:text-white tw:bg-brand tw:highlight:bg-brand-dark tw:highlight:border-brand-dark tw:highlight:bg-brand"
+          class="tw:flex tw:gap-2 tw:items-center tw:justify-center tw:border tw:rounded-md tw:no-underline tw:transition-colors tw:focus-ring tw:px-3 tw:py-1.5 tw:border-lm-brand tw:dark:border-dm-brand tw:text-white tw:bg-lm-brand tw:dark:bg-dm-brand tw:highlight:bg-lm-brand-dark tw:dark:highlight:bg-dm-brand-dark tw:highlight:border-lm-brand-dark tw:dark:highlight:border-dm-brand-dark tw:highlight:bg-lm-brand tw:dark:highlight:bg-dm-brand"
           type="button"
         >
           Confirm
@@ -359,7 +359,7 @@ exports[`<CardModal /> > renders expected variant 2`] = `
         data-testid="footer"
       >
         <button
-          class="tw:inline-flex tw:rounded-md tw:focus-ring tw:text-brand tw:highlight:text-brand-dark tw:highlight:underline tw:px-3 tw:py-1.5"
+          class="tw:inline-flex tw:rounded-md tw:focus-ring tw:text-lm-brand tw:dark:text-dm-brand tw:highlight:text-lm-brand-dark tw:dark:highlight:text-dm-brand-dark tw:highlight:underline tw:px-3 tw:py-1.5"
           type="button"
         >
           Cancel