ui icon indicating copy to clipboard operation
ui copied to clipboard

Published 20 hours ago • verified publisher icon nuxt

feat(module): implement CSS variables to control gray shades

Open benjamincanac opened this issue 1 year ago • 3 comments

🔗 Linked issue

❓ Type of change

  • [ ] 📖 Documentation (updates to the documentation or readme)
  • [ ] 🐞 Bug fix (a non-breaking change that fixes an issue)
  • [ ] 👌 Enhancement (improving an existing functionality)
  • [x] ✨ New feature (a non-breaking change that adds functionality)
  • [ ] 🧹 Chore (updates to the build process or auxiliary tools and libraries)
  • [ ] ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

For a long time, I wanted to implement named CSS variables to easily customize the theme without having to override every component in your app.config.ts.

We used to have --ui-background and --ui-foreground variables in Nuxt UI Pro only but those were only used to change the styles applied on <body>.

This PR introduces new CSS variables in Nuxt UI:

body {
  @apply antialiased font-sans text-[--ui-text] bg-[--ui-bg];
}

:root {
  color-scheme: light dark;

  --ui-text-dimmed: var(--color-gray-400);
  --ui-text-muted: var(--color-gray-500);
  --ui-text-toned: var(--color-gray-600);
  --ui-text: var(--color-gray-700);
  --ui-text-highlighted: var(--color-gray-900);

  --ui-bg: var(--color-white);
  --ui-bg-elevated: var(--color-gray-100);
  --ui-bg-accented: var(--color-gray-200);
  --ui-bg-inverted: var(--color-gray-900);

  --ui-border: var(--color-gray-200);
  --ui-border-accented: var(--color-gray-300);
  --ui-border-inverted: var(--color-gray-900);
}

.dark {
  --ui-text-dimmed: var(--color-gray-500);
  --ui-text-muted: var(--color-gray-400);
  --ui-text-toned: var(--color-gray-300);
  --ui-text: var(--color-gray-200);
  --ui-text-highlighted: var(--color-white);

  --ui-bg: var(--color-gray-900);
  --ui-bg-elevated: var(--color-gray-800);
  --ui-bg-accented: var(--color-gray-700);
  --ui-bg-inverted: var(--color-white);

  --ui-border: var(--color-gray-800);
  --ui-border-accented: var(--color-gray-700);
  --ui-border-inverted: var(--color-white);
}

The theme of all components has been rewritten to use those variables, here is the Card theme for example:

export default {
  slots: {
    root: 'bg-[--ui-bg] ring ring-[--ui-border] divide-y divide-[--ui-border] rounded-lg shadow',
    header: 'p-4 sm:px-6',
    body: 'p-4 sm:p-6',
    footer: 'p-4 sm:px-6'
  }
}

Now you can easily change the background of all your components as well as your app by overriding those variables in your app.vue for example:

<style>
@import "tailwindcss";
@import "@nuxt/ui";

@theme {
  --font-family-sans: 'Public Sans', sans-serif;
}

:root {
  --ui-bg: var(--color-gray-100);
  --ui-border: var(--color-gray-300);
}

.dark {
  --ui-bg: var(--color-gray-950);
  --ui-border: var(--color-gray-900);
}
</style>

📝 Checklist

  • [ ] I have linked an issue or discussion.
  • [ ] I have updated the documentation accordingly.

benjamincanac avatar Oct 03 '24 14:10 benjamincanac