ditorodev
commented
4 months ago In regards of Icons, we are already using Lucide, has whirly recommended these icons? If so then lets change them, but for now lucide has been great, pretty simple to use and keeps the size of the page in control
In regards to theming I have generated all the CSS vars in regards of the colors designed by whirly. Now we need to change the way we themed the app and start using the proper theming guidelines by shadcn https://ui.shadcn.com/docs/theming and add all those variations we did not take into consideration. From our figma file examples we can see that components are sharing some values, the way to think about this is to identify the common elements (in terms of css property) that each components use, for example: card(a rounded rectangle that has bg, border, foreground), button(a rounded rectangle that has bg, border, hover-bg, active-bg, hover-border, active-bg). It does not really matter to keep it dry, the idea is that we can change the base colors (called system-) and this would theme the entire app with good contrasts and such. Whirly did an awesome job at documenting which color number does what and he used them across the components of the app.
We should now implement this into our code which is not very themeable right now. Once the base of colors is done, then we will be able to just load a style tag with :root{... new color variables} and we should now have different themes across the board.
Bonus: On the designs, we also have different background and image assets based on the themes whirly made, for the time being it would be a "good to have" but not really needed to have them into system variables in the CSS.
Heres the new tailwind.css file that has the new colors and their usage
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
/* System Colors */
--system-color-1: 173 24% 7%; /* App background */
--system-color-2: 175 24% 9%; /* Subtle background */
--system-color-3: 174 55% 11%; /* UI element background */
--system-color-4: 176 93% 12%; /* Hovered UI element */
--system-color-5: 175 80% 16%; /* Active/selected UI element background */
--system-color-6: 174 63% 21%; /* Subtle borders and separators */
--system-color-7: 174 58% 26%; /* UI element border and focus */
--system-color-8: 173 59% 31%; /* Hovered UI element border */
--system-color-9: 173 80% 36%; /* Solid backgrounds */
--system-color-10: 172 85% 38%; /* Hovered solid background */
--system-color-11: 170 90% 45%; /* Low contrast text */
--system-color-12: 163 69% 81%; /* High contrast text */
--background: var(--system-color-1);
--foreground: var(--system-color-12);
--card: var(--system-color-3);
--card-foreground: var(--system-color-11);
--popover: var(--system-color-3);
--popover-foreground: var(--system-color-11);
--primary: 242 51% 14%;
--primary-1: 241 90% 82%;
--primary-2: 241 21% 42%;
--primary-dark: 240 33% 4%;
--primary-foreground: 0 0% 88%;
--primary-1-foreground: 240 50% 9%;
--secondary: var(--system-color-3);
--secondary-1: var(--system-color-5);
--secondary-foreground: var(--system-color-11);
--secondary-1-foreground: var(--system-color-12);
--muted: var(--system-color-2);
--muted-foreground: var(--system-color-11);
--accent: var(--system-color-3);
--accent-foreground: var(--system-color-11);
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 72% 51%;
--border: var(--system-color-6);
--input: var(--system-color-6);
--input-placeholder: var(--system-color-11);
--ring: var(--system-color-4);
--radius: 5px;
}
.dark {
/* System Colors */
/* We just change the system colors as this should should follow our guidelines based on the figma: https://www.figma.com/design/2BTJg00ikyVZMj82I9sSYB/Lume-JAN?node-id=592-105&t=yiE0WOgxpqhzfzTz-0 */
--system-color-1: 0 0% 3.9%;
--system-color-2: 0 0% 14.9%;
--system-color-3: 0 0% 14.9%;
--system-color-4: 0 0% 83.1%;
--system-color-5: 0 0% 14.9%;
--system-color-6: 0 0% 14.9%;
--system-color-7: 0 0% 14.9%;
--system-color-8: 0 0% 14.9%;
--system-color-9: 0 0% 14.9%;
--system-color-10: 0 0% 14.9%;
--system-color-11: 0 0% 98%;
--system-color-12: 0 0% 9%;
}
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground font-sans h-screen;
}
}
Eronred
pcfreak30
Figma File: https://www.figma.com/design/2BTJg00ikyVZMj82I9sSYB/Lume-JAN
Recommended Icons?: https://www.iconfinder.com/iconsets/fluent-solid-24px-vol-4