🌈 Themer Component / Designer Page

[bennymi]

Have a themer component that people can implement on their website. They can bind to a string variable with all the css variables. The string could for example be stored in a database for each user or tenant, so that each tenant has their own look and feel.

TODOs

• [x] select theme colors (primary, secondary, tertiary, success, error, warning, surface, neutral)
  • [x] have main colors shown right next to each other (https://www.creatopy.com/blog/color-combinations-in-display-ads/) as well as gradients between the primary secondary and tertiary colors (maybe in a circle) and then the entire row of shades below
  • [x] gradient div should be animated (https://codepen.io/P1N2O/pen/pyBNzX)
  • [x] mesh gradient as background
  • [x] add aria attributes to sidebar collapse groups
  • [x] add aria current page to current page in sidebar
• [x] select text colors on theme colors
  • [x] automatically create on-colors for all shades
  • [x] show contrast grid (https://codepen.io/MrGrigri/pen/yqbyzK)
• [x] show all shades for each theme color
• [ ] show components as examples
• [x] copy button
• [ ] be able to open the designer on any page (maybe through a modal?)
• [ ] be able to change base and container roundedness
• [ ] button sizes:
  • [x] radius
  • [ ] font size
  • [x] padding in x and y
  • [ ] border size?
• [ ] be able to change fonts
• [ ] same color picker tool across all browsers (check which libraries there are for this... needs to be accessible)
• [x] mobile friendly
• [ ] be able to store and delete themes into local storage
• [ ] save user's preferences of theme and dark/light in local storage
• [ ] randomize colour feature
  • [ ] a lock button for colours that the user likes
• [ ] have a list of best background colours for each shade (if used on text), along with the contrast ratio
• [ ] shuffle button in navbar dropdown?
• [ ] maybe make button tokens with descriptive names for theme generator since some of these button names are super long and difficult to remember
  • something like btn-main, btn-accent, btn-submit btn-unique btn-cancel (maybe we need like 5-8?)
  • surface-content/main, surface-nav, surface-card, surface-overlay, ...
  • provide the code for it that can be copied into the unocss.config.ts shortcuts

Create designer page:

• Radix theme playground: https://www.radix-ui.com/themes/playground
• color swatch: https://mantine.dev/core/color-swatch/
• https://tailwind.ink/context
• https://uicolors.app/create
• https://www.tints.dev/blue/3B82F6
• https://designer.primeng.org/#/
• https://hypercolor.dev/
• https://daisyui.com/theme-generator/
• https://www.skeleton.dev/docs/generator
• https://themes.ionevolve.com/
• animated gradient shadows: https://codepen.io/ahmad_hania/pen/rRPKbZ

Readability / Contrast

• https://github.com/bgrins/TinyColor
• https://codepen.io/MrGrigri/pen/yqbyzK
• https://github.com/Qix-/color
• https://github.com/gka/chroma.js/

Resources

• Coloris: https://www.npmjs.com/package/@melloware/coloris?activeTab=dependencies
• Pickr: https://www.npmjs.com/package/@simonwep/pickr
• Palettes: https://hookagency.com/blog/website-color-schemes-2020/
• Shades: https://github.com/javisperez/tailwindcolorshades
• https://github.blog/2023-05-11-unlocking-inclusive-design-how-primers-color-system-is-making-github-com-more-inclusive/
• https://www.creatopy.com/blog/color-combinations-in-display-ads/
• https://stackoverflow.com/questions/11167281/webkit-css-to-control-the-box-around-the-color-in-an-inputtype-color
• https://www.rainbowkit.com/

[bennymi]

Could use this API to get a colour palette:

• https://www.simeongriggs.dev/using-the-tailwind-css-palette-generator-and-api
• https://github.com/SimeonGriggs/tints.dev

[bennymi]

https://uicolors.app/create