Accent css - using Flux colors anywhere #1365

mauritskorse · 2025-03-20T15:22:08Z

mauritskorse
Mar 20, 2025

Since the colors for the badges and other colored components are well thought out (darkmode, enough contrast, etc), I was looking at how to add that to other elements in my app. I noticed there is a <flux::accent> element that you could use to wrap elements in. However, it sometimes complicates layouts because of the extra nesting div that is inserted.

So instead I created a css file to include in app.css that lets me add an accent="color" or accent="color solid" property to any element. Then you would still need to add bg-accent in the class list to apply the color, but it makes it so much easier. As well as storing colors in the database.

<div accent="blue" class="bg-accent text-accent-foreground p-2 *:border-t *:border-white">
    Blue Accent
    <div class="bg-accent text-accent-foreground p-2">Blue Accent</div>
    <div accent="red" class="bg-accent text-accent-foreground p-2">
       Red accent
        <div accent="lime solid">
            <div class="bg-accent text-accent-foreground p-2">Lime Accent</div>
        </div>
   </div>
 </div>

Or an implemenation where I used it in a two-step button where I use the variant="primary" to apply the warning accent to.

<div x-data="{confirm : false}">
  <flux:button 
    accent="warning" 
    variant="primary" 
    tooltip="{{ __('Delete') }}" icon="trash" size="sm" x-show="!confirm" x-on:click="confirm = true">{{ __('Delete') }}</flux:button>
      <flux:button.group x-show="confirm" x-cloak>
      <flux:button variant="danger" icon="trash" size="sm" tooltip="{{ __('Confirm deletion') }}">{{ __('Confirm') }}</flux:button>
      <flux:button icon="arrow-uturn-left" size="sm" x-on:click="confirm = false" tooltip="{{ __('Cancel') }}"></flux:button>
  </flux:button.group>
</div>

Screen.Recording.2025-03-20.161407.mp4

Unfortunately I can't upload the file, so I'll past the code in the comment below.

mauritskorse · 2025-03-20T15:25:51Z

mauritskorse
Mar 20, 2025
Author

Here is the entire accent.css.

/**
  * Predefined color accents for the application using same as Flux
  * Usage: <div accent="red solid" class="bg-accent text-accent-foreground">Red Accent</div>
  */
@layer base
{
    /**
     * warning => orange
     * success => green
     * info => cyan
     * danger => red
     */

    [accent~="gray"],[accent~="zinc"]{
        --color-accent: --alpha(var(--color-gray-400) / 20% );
        --color-accent-content: var(--color-gray-600);
        --color-accent-foreground: var(--color-gray-700);
    
        &[accent~="solid"]{
            --color-accent: var(--color-gray-500);
            --color-accent-content: var(--color-gray-600);
            --color-accent-foreground: var(--color-white);
        }
    }

    [accent~="red"], [accent~="danger"]{
        --color-accent: --alpha(var(--color-red-400) / 20%);
        --color-accent-content: var(--color-red-600);
        --color-accent-foreground: var(--color-red-700);
        
        &[accent~="solid"]{
            --color-accent: var(--color-red-500);
            --color-accent-content: var(--color-red-600);
            --color-accent-foreground: var(--color-white);
        }
    }
    
    [accent~="orange"],[accent~="warning"]{
        --color-accent: --alpha(var(--color-orange-400) / 20% );
        --color-accent-content: var(--color-orange-600);
        --color-accent-foreground: var(--color-orange-700);

        &[accent~="solid"]{
            --color-accent: var(--color-orange-500);
            --color-accent-content: var(--color-orange-600);
            --color-accent-foreground: var(--color-white);
        }
    }

    [accent~="amber"]{
        --color-accent: --alpha(var(--color-amber-400) / 25% );
        --color-accent-content: var(--color-amber-600);
        --color-accent-foreground: var(--color-amber-700);
        
        /* text-white bg-amber-500 */
        &[accent~="solid"]{
            --color-accent: var(--color-amber-500);
            --color-accent-content: var(--color-amber-600);
            --color-accent-foreground: var(--color-white);
        }
    }

    [accent~="yellow"]{
        --color-accent: --alpha(var(--color-yellow-400) / 25% );
        --color-accent-content: var(--color-yellow-600);
        --color-accent-foreground: var(--color-yellow-700);
        
        /* text-white bg-yellow-500 */
        &[accent~="solid"]{
            --color-accent: var(--color-yellow-500);
            --color-accent-content: var(--color-yellow-600);
            --color-accent-foreground: var(--color-white);
        }
    }

    [accent~="lime"]{
        --color-accent: --alpha(var(--color-lime-400) / 25% );
        --color-accent-content: var(--color-lime-600);
        --color-accent-foreground: var(--color-lime-700);
        
        /* text-white bg-lime-500 */
        &[accent~="solid"]{
            --color-accent: var(--color-lime-500);
            --color-accent-content: var(--color-lime-600);
            --color-accent-foreground: var(--color-white);
        }
    }

    [accent~="green"],[accent~="success"]{
        --color-accent: --alpha(var(--color-green-400) / 20% );
        --color-accent-content: var(--color-green-600);
        --color-accent-foreground: var(--color-green-700);
        
        /* text-white bg-green-500 */
        &[accent~="solid"]{
            --color-accent: var(--color-green-500);
            --color-accent-content: var(--color-green-600);
            --color-accent-foreground: var(--color-white);
        }
    }

    [accent~="emerald"]{
        --color-accent: --alpha(var(--color-emerald-400) / 20% );
        --color-accent-content: var(--color-emerald-600);
        --color-accent-foreground: var(--color-emerald-700);
        
        /* text-white bg-emerald-500 */
        &[accent~="solid"]{
            --color-accent: var(--color-emerald-500);
            --color-accent-content: var(--color-emerald-600);
            --color-accent-foreground: var(--color-white);
        }
    }

    [accent~="teal"]{
        --color-accent: --alpha(var(--color-teal-400) / 20% );
        --color-accent-content: var(--color-teal-600);
        --color-accent-foreground: var(--color-teal-700);
        
        /* text-white bg-teal-500 */
        &[accent~="solid"]{
            --color-accent: var(--color-teal-500);
            --color-accent-content: var(--color-teal-600);
            --color-accent-foreground: var(--color-white);
        }
    }

    [accent~="cyan"],[accent~="info"]{
        --color-accent: --alpha(var(--color-cyan-400) / 20% );
        --color-accent-content: var(--color-cyan-600);
        --color-accent-foreground: var(--color-cyan-700);
        
        /* text-white bg-cyan-500 */
        &[accent~="solid"]{
            --color-accent: var(--color-cyan-500);
            --color-accent-content: var(--color-cyan-600);
            --color-accent-foreground: var(--color-white);
        }
    }

    [accent~="sky"]{
        --color-accent: --alpha(var(--color-sky-400) / 20% );
        --color-accent-content: var(--color-sky-600);
        --color-accent-foreground: var(--color-sky-700);
        
        /* text-white bg-sky-500 */
        &[accent~="solid"]{
            --color-accent: var(--color-sky-500);
            --color-accent-content: var(--color-sky-600);
            --color-accent-foreground: var(--color-white);
        }
    }

    [accent~="blue"]{
        --color-accent: --alpha(var(--color-blue-400) / 20% );
        --color-accent-content: var(--color-blue-600);
        --color-accent-foreground: var(--color-blue-700);
        
        /* text-white bg-blue-500 */
        &[accent~="solid"]{
            --color-accent: var(--color-blue-500);
            --color-accent-content: var(--color-blue-600);
            --color-accent-foreground: var(--color-white);
        }
    }

    [accent~="indigo"]{
        --color-accent: --alpha(var(--color-indigo-400) / 20% );
        --color-accent-content: var(--color-indigo-600);
        --color-accent-foreground: var(--color-indigo-700);
        
        /* text-white bg-indigo-500 */
        &[accent~="solid"]{
            --color-accent: var(--color-indigo-500);
            --color-accent-content: var(--color-indigo-600);
            --color-accent-foreground: var(--color-white);
        }
    }

    [accent~="violet"]{
        --color-accent: --alpha(var(--color-violet-400) / 20% );
        --color-accent-content: var(--color-violet-600);
        --color-accent-foreground: var(--color-violet-700);
        
        /* text-white bg-violet-500 */
        &[accent~="solid"]{
            --color-accent: var(--color-violet-500);
            --color-accent-content: var(--color-violet-600);
            --color-accent-foreground: var(--color-white);
        }
    }

    [accent~="purple"]{
        --color-accent: --alpha(var(--color-purple-400) / 20% );
        --color-accent-content: var(--color-purple-600);
        --color-accent-foreground: var(--color-purple-700);
        
        /* text-white bg-purple-500 */
        &[accent~="solid"]{
            --color-accent: var(--color-purple-500);
            --color-accent-content: var(--color-purple-600);
            --color-accent-foreground: var(--color-white);
        }
    }

    [accent~="fuchsia"]{
        --color-accent: --alpha(var(--color-fuchsia-400) / 20% );
        --color-accent-content: var(--color-fuchsia-600);
        --color-accent-foreground: var(--color-fuchsia-700);
        
        /* text-white bg-fuchsia-500 */
        &[accent~="solid"]{
            --color-accent: var(--color-fuchsia-500);
            --color-accent-content: var(--color-fuchsia-600);
            --color-accent-foreground: var(--color-white);
        }
    }

    [accent~="pink"]{
        --color-accent: --alpha(var(--color-pink-400) / 20% );
        --color-accent-content: var(--color-pink-600);
        --color-accent-foreground: var(--color-pink-700);
        
        /* text-white bg-pink-500 */
        &[accent~="solid"]{
            --color-accent: var(--color-pink-500);
            --color-accent-content: var(--color-pink-600);
            --color-accent-foreground: var(--color-white);
        }
    }

    [accent~="rose"]{
        --color-accent: --alpha(var(--color-rose-400) / 20% );
        --color-accent-content: var(--color-rose-600);
        --color-accent-foreground: var(--color-rose-700);
        
        /* text-white bg-rose-500 */
        &[accent~="solid"]{
            --color-accent: var(--color-rose-500);
            --color-accent-content: var(--color-rose-600);
            --color-accent-foreground: var(--color-white);
        }
    }

    .dark{
        [accent~="gray"],[accent~="zinc"]{
            --color-accent: --alpha(var(--color-gray-400) / 40% );
            --color-accent-content: var(--color-gray-100);
            --color-accent-foreground: var(--color-gray-200);

            /* dark:text-white dark:bg-gray-600 */
            &[accent~="solid"] {
                --color-accent: var(--color-gray-600);
                --color-accent-content: var(--color-gray-600);
                --color-accent-foreground: var(--color-white);
            }
        }

        /* dark:text-red-200 dark:bg-red-400/40', */
        [accent~="red"],[accent~="danger"]{
            --color-accent: --alpha(var(--color-red-400) / 40% );
            --color-accent-content: var(--color-red-100);
            --color-accent-foreground: var(--color-red-200);

            /* dark:text-white dark:bg-red-600 */
            &[accent~="solid"] {
                --color-accent: var(--color-red-600);
                --color-accent-content: var(--color-red-600);
                --color-accent-foreground: var(--color-white);
            }
        }

        [accent~="orange"],[accent~="warning"]{
            --color-accent: --alpha(var(--color-orange-400) / 40% );
            --color-accent-content: var(--color-orange-100);
            --color-accent-foreground: var(--color-orange-200);

            /* dark:text-white dark:bg-orange-600 */
            &[accent~="solid"] {
                --color-accent: var(--color-orange-600);
                --color-accent-content: var(--color-orange-600);
                --color-accent-foreground: var(--color-white);
            }
        }

        [accent~="amber"]{
            --color-accent: --alpha(var(--color-amber-400) / 40% );
            --color-accent-content: var(--color-amber-100);
            --color-accent-foreground: var(--color-amber-200);

                /* dark:text-white dark:bg-amber-500 */
            &[accent~="solid"] {
                --color-accent: var(--color-amber-500);
                --color-accent-content: var(--color-amber-600);
                --color-accent-foreground: var(--color-white);
            }
        }

        [accent~="yellow"]{
            --color-accent: --alpha(var(--color-yellow-400) / 40% );
            --color-accent-content: var(--color-yellow-100);
            --color-accent-foreground: var(--color-yellow-200);

            /* dark:text-white dark:bg-yellow-400 */
            &[accent~="solid"] {
                --color-accent: var(--color-yellow-400);
                --color-accent-content: var(--color-yellow-600);
                --color-accent-foreground: var(--color-white);
            }
        }

        [accent~="lime"]{
            --color-accent: --alpha(var(--color-lime-400) / 40% );
            --color-accent-content: var(--color-lime-100);
            --color-accent-foreground: var(--color-lime-200);

            /* dark:text-white dark:bg-lime-500 */
            &[accent~="solid"] {
                --color-accent: var(--color-lime-500);
                --color-accent-content: var(--color-lime-600);
                --color-accent-foreground: var(--color-white);
            }
        }

        [accent~="green"],[accent~="success"]{
            --color-accent: --alpha(var(--color-green-400) / 40% );
            --color-accent-content: var(--color-green-100);
            --color-accent-foreground: var(--color-green-200);
            
            /* dark:text-white dark:bg-green-500 */
            &[accent~="solid"] {
                --color-accent: var(--color-green-500);
                --color-accent-content: var(--color-green-600);
                --color-accent-foreground: var(--color-white);
            }
        }

        [accent~="emerald"]{
                --color-accent: --alpha(var(--color-emerald-400) / 40% );
                --color-accent-content: var(--color-emerald-100);
                --color-accent-foreground: var(--color-emerald-200);
            
            /* dark:text-white dark:bg-emerald-500 */
            &[accent~="solid"] {
                --color-accent: var(--color-emerald-500);
                --color-accent-content: var(--color-emerald-600);
                --color-accent-foreground: var(--color-white);
            }
        }

        [accent~="teal"]{
            --color-accent: --alpha(var(--color-teal-400) / 40% );
            --color-accent-content: var(--color-teal-100);
            --color-accent-foreground: var(--color-teal-200);
            
            /* dark:text-white dark:bg-teal-500 */
            &[accent~="solid"] {
                --color-accent: var(--color-teal-500);
                --color-accent-content: var(--color-teal-600);
                --color-accent-foreground: var(--color-white);
            }
        }

        [accent~="cyan"],[accent~="info"]{
            --color-accent: --alpha(var(--color-cyan-400) / 40% );
            --color-accent-content: var(--color-cyan-100);
            --color-accent-foreground: var(--color-cyan-200);
            
            /* dark:text-white dark:bg-cyan-500 */
            &[accent~="solid"] {
                --color-accent: var(--color-cyan-500);
                --color-accent-content: var(--color-cyan-600);
                --color-accent-foreground: var(--color-white);
            }
        }

        [accent~="sky"]{
            --color-accent: --alpha(var(--color-sky-400) / 40% );
            --color-accent-content: var(--color-sky-100);
            --color-accent-foreground: var(--color-sky-200);
            
            /* dark:text-white dark:bg-sky-500 */
            &[accent~="solid"] {
                --color-accent: var(--color-sky-500);
                --color-accent-content: var(--color-sky-600);
                --color-accent-foreground: var(--color-white);
            }
        }

        [accent~="blue"]{
            --color-accent: --alpha(var(--color-blue-400) / 40% );
            --color-accent-content: var(--color-blue-100);
            --color-accent-foreground: var(--color-blue-200);
            
            /* dark:text-white dark:bg-blue-500 */
            &[accent~="solid"] {
                --color-accent: var(--color-blue-500);
                --color-accent-content: var(--color-blue-600);
                --color-accent-foreground: var(--color-white);
            }
        }

        [accent~="indigo"]{
            --color-accent: --alpha(var(--color-indigo-400) / 40% );
            --color-accent-content: var(--color-indigo-100);
            --color-accent-foreground: var(--color-indigo-200);
            
            /* dark:text-white dark:bg-indigo-500 */
            &[accent~="solid"] {
                --color-accent: var(--color-indigo-500);
                --color-accent-content: var(--color-indigo-600);
                --color-accent-foreground: var(--color-white);
            }
        }

        [accent~="violet"]{
            --color-accent: --alpha(var(--color-violet-400) / 40% );
            --color-accent-content: var(--color-violet-100);
            --color-accent-foreground: var(--color-violet-200);
            
            /* dark:text-white dark:bg-violet-500 */
            &[accent~="solid"] {
                --color-accent: var(--color-violet-500);
                --color-accent-content: var(--color-violet-600);
                --color-accent-foreground: var(--color-white);
            }
        }

        [accent~="purple"]{
            --color-accent: --alpha(var(--color-purple-400) / 40% );
            --color-accent-content: var(--color-purple-100);
            --color-accent-foreground: var(--color-purple-200);
            
            /* dark:text-white dark:bg-purple-500 */
            &[accent~="solid"] {
                --color-accent: var(--color-purple-500);
                --color-accent-content: var(--color-purple-600);
                --color-accent-foreground: var(--color-white);
            }
        }

        [accent~="fuchsia"]{
            --color-accent: --alpha(var(--color-fuchsia-400) / 40% );
            --color-accent-content: var(--color-fuchsia-100);
            --color-accent-foreground: var(--color-fuchsia-200);
            
            /* dark:text-white dark:bg-fuchsia-500 */
            &[accent~="solid"] {
                --color-accent: var(--color-fuchsia-500);
                --color-accent-content: var(--color-fuchsia-600);
                --color-accent-foreground: var(--color-white);
            }
        }

        [accent~="pink"]{
            --color-accent: --alpha(var(--color-pink-400) / 40% );
            --color-accent-content: var(--color-pink-100);
            --color-accent-foreground: var(--color-pink-200);
            
            /* dark:text-white dark:bg-pink-500 */
            &[accent~="solid"] {
                --color-accent: var(--color-pink-500);
                --color-accent-content: var(--color-pink-600);
                --color-accent-foreground: var(--color-white);
            }
        }

        [accent~="rose"]{
            --color-accent: --alpha(var(--color-rose-400) / 40% );
            --color-accent-content: var(--color-rose-100);
            --color-accent-foreground: var(--color-rose-200);
            
            /* dark:text-white dark:bg-rose-500 */
            &[accent~="solid"] {
                --color-accent: var(--color-rose-500);
                --color-accent-content: var(--color-rose-600);
                --color-accent-foreground: var(--color-white);
            }
        } 
    }
}

You can use it by importing it in your app.css file like so (in case accent.css is in the same directory as app.css)

@import './accent.css';

1 reply

jeffchown Mar 20, 2025

@mauritskorse Very interesting. Thanks for sharing.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Accent css - using Flux colors anywhere #1365

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 1 reply

{{title}}

{{title}}

Select a reply

Accent css - using Flux colors anywhere #1365

mauritskorse Mar 20, 2025

Replies: 1 comment · 1 reply

mauritskorse Mar 20, 2025 Author

jeffchown Mar 20, 2025

mauritskorse
Mar 20, 2025

Replies: 1 comment 1 reply

mauritskorse
Mar 20, 2025
Author