Accent css - using Flux colors anywhere #1365
mauritskorse
started this conversation in
Showcase
Replies: 1 comment 1 reply
-
|
Here is the entire accent.css. /**
predefined color accents for the application
that have enough contrast
*/
@layer base
{
/**
* warning => orange
* success => green
* info => cyan
* danger => red
*/
*,
.light &,
.light {
&[accent~="gray"],[accent~="zinc"],[data-accent~="gray"],[data-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"], &[data-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"], [data-accent~="red"], [data-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"], [data-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 &,
.dark{
&[accent~="gray"],[accent~="zinc"], [data-accent~="gray"],[data-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"], [data-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"], [data-accent~="red"],[data-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"], [data-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) |
Beta Was this translation helpful? Give feedback.
1 reply
-
|
@mauritskorse Very interesting. Thanks for sharing. |
Beta Was this translation helpful? Give feedback.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
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"oraccent="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.Here is the gist: https://gist.github.com/mauritskorse/324fa3a5f0aa518510b1806597468cad
Beta Was this translation helpful? Give feedback.
All reactions