From d3cb0139aca65ef0eda80264188c674a679cc262 Mon Sep 17 00:00:00 2001 From: "S. MohammadMahdi Zamanian" Date: Wed, 5 Jun 2024 11:18:29 +0330 Subject: [PATCH] feat: complete palette page --- README.md | 51 +++++++++++++++ index.html | 2 +- package.json | 2 + src/signal/color.context.ts | 49 +-------------- src/ui/app-index.ts | 2 +- src/ui/assets/svg/dark.svg | 1 + src/ui/assets/svg/download.svg | 1 + src/ui/assets/svg/light.svg | 1 + src/ui/components/footer.ts | 11 ++-- src/ui/components/header.ts | 63 ++++++++++++++++++- src/ui/components/palette-reference-colors.ts | 39 ++++++++++++ ...lette.page.ts => palette-system-colors.ts} | 9 +-- src/ui/pages/builder.page.ts | 9 --- src/ui/pages/palette.page.ts | 18 ++++++ src/ui/router.ts | 13 +++- vite.config.mts | 3 +- yarn.lock | 8 +++ 17 files changed, 210 insertions(+), 72 deletions(-) create mode 100644 src/ui/assets/svg/dark.svg create mode 100644 src/ui/assets/svg/download.svg create mode 100644 src/ui/assets/svg/light.svg create mode 100644 src/ui/components/palette-reference-colors.ts rename src/ui/components/{palette.page.ts => palette-system-colors.ts} (91%) delete mode 100644 src/ui/pages/builder.page.ts create mode 100644 src/ui/pages/palette.page.ts diff --git a/README.md b/README.md index e57d581..94bdfc0 100644 --- a/README.md +++ b/README.md @@ -1 +1,52 @@ +# Hybrid UI Theme Builder + +Welcome to the Hybrid UI Theme Builder! This powerful tool empowers developers to create custom themes for their Hybrid UI applications with ease and flexibility. + +## Description + +Hybrid UI Theme Builder is a dedicated theme builder designed specifically for Hybrid UI. It provides developers with an intuitive and user-friendly interface to create, customize, and manage themes for their applications. With this tool, you can give your Hybrid UI applications a unique look and feel that aligns with your brand or personal preference. + +## Features + +- **Customization**: Tailor every aspect of your Hybrid UI application's theme, from colors and typography to layout and spacing. +- **Ease of Use**: The Hybrid UI Theme Builder is designed with simplicity in mind, making it easy for developers of all skill levels to use. +- **Theme Management**: Create, save, and manage multiple themes for different applications or use cases. +- **Real-time Preview**: See your changes in real-time as you customize your theme, ensuring you get the perfect look. +- **Export Themes**: Once you're satisfied with your theme, you can easily export it for use in your Hybrid UI applications. + +## Keywords + +- Hybrid-UI +- Theme +- Builder +- Customization +- Theming +- UI-Components + +## Installation + +To get started with the Hybrid UI Theme Builder, follow the installation instructions provided in the [Installation Guide](link-to-installation-guide). + +## Usage + +For detailed instructions on how to use the Hybrid UI Theme Builder, please refer to the [Usage Guide](link-to-usage-guide). + +## Contributing + +We welcome contributions from the community. If you wish to contribute, please take a moment to review our [Contributing Guidelines](link-to-contributing-guidelines). + +## License + +The Hybrid UI Theme Builder is open-source software licensed under the [MIT License](LICENSE). + +## Support + +If you encounter any problems or have any questions, please open an issue on our [Issues](link-to-issues) page. + +## Acknowledgements + +We would like to thank the Hybrid UI community for their support and contributions to this project. + +Happy theming with the Hybrid UI Theme Builder! + [Icon Kitchen](https://icon.kitchen/i/H4sIAAAAAAAAAx2PQWvDMAyF%2F0rQrhmsrIOR21IYgx2X2yhFiRXXRLFTOW4Jpf%2B9sk9Cn957ku5wRU4UobmDQZm6M80EzYgcqYbRHtgtKGseR9ICEpI3UIMbgtd2CBzkxOQjPGro7d8ZF%2FVDvCQnA5Mqe3vIIoUv5nO%2F270rW2JrM9gPOH68FfAdfFkz4ux40%2BHXhBtWv%2BjR4IQ5fomdWzWzgZ%2BuLaYOLTtfyNaLM1W5v2qTY0OSPXMwifN%2F%2F3CjXk3ojQRn1msOYNxe4xqE4Ph4Ah%2BcQuMLAQAA) \ No newline at end of file diff --git a/index.html b/index.html index be39a90..778c68c 100644 --- a/index.html +++ b/index.html @@ -20,5 +20,5 @@ - + diff --git a/package.json b/package.json index acf0c19..e603abe 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,6 @@ { "name": "hybrid-theme-builder", + "description": "A theme builder for Hybrid UI, allowing developers to create custom themes for their applications.", "type": "module", "prettier": "@alwatr/prettier-config", "eslintConfig": { @@ -44,6 +45,7 @@ "@typescript-eslint/eslint-plugin": "7.8.0", "@typescript-eslint/parser": "7.8.0", "autoprefixer": "^10.4.19", + "chroma.ts": "^1.0.10", "cssnano": "^7.0.1", "cssnano-preset-advanced": "^7.0.1", "eslint": "8.57.0", diff --git a/src/signal/color.context.ts b/src/signal/color.context.ts index 2db53cf..8517099 100644 --- a/src/signal/color.context.ts +++ b/src/signal/color.context.ts @@ -1,7 +1,7 @@ import {ContextSignal} from '@gecut/signal'; import debounce from '@gecut/utilities/debounce.js'; import json from '@gecut/utilities/local-storage-json.js'; -import {hexFromArgb, argbFromRgb} from '@material/material-color-utilities'; +import * as chroma from 'chroma.ts'; import {themeContext} from './theme.context.js'; @@ -21,10 +21,7 @@ colorContext.setValue({ colorContext.subscribe( debounce((color: HSLColor) => { - const rgb = hslToRgb(Number(color.hue), Number(color.saturation), Number(color.lightness)); - const argb = argbFromRgb(rgb.red, rgb.green, rgb.blue); - const hex = hexFromArgb(argb); - + const hex = chroma.hsl(Number(color.hue), Number(color.saturation) / 100, Number(color.lightness) / 100).hex('rgb'); themeContext.setValue(hex); json.set('HTB.HUE', color.hue); @@ -36,45 +33,3 @@ colorContext.subscribe( receivePrevious: true, }, ); - -function hslToRgb(hue: number, saturation: number, lightness: number) { - hue = hue % 360; // Ensure hue is in the range of 0 to 360 - const chroma = saturation * Math.min(lightness, 1 - lightness); - const huePrime = hue / 60; - const x = chroma * (1 - Math.abs((huePrime % 2) - 1)); - let red = 0, - green = 0, - blue = 0; - - if (huePrime >= 0 && huePrime < 1) { - red = chroma; - green = x; - } - else if (huePrime >= 1 && huePrime < 2) { - red = x; - green = chroma; - } - else if (huePrime >= 2 && huePrime < 3) { - green = chroma; - blue = x; - } - else if (huePrime >= 3 && huePrime < 4) { - green = x; - blue = chroma; - } - else if (huePrime >= 4 && huePrime < 5) { - red = x; - blue = chroma; - } - else if (huePrime >= 5 && huePrime < 6) { - red = chroma; - blue = x; - } - - const m = lightness - 0.5 * chroma; - red = Math.round((red + m) * 255); - green = Math.round((green + m) * 255); - blue = Math.round((blue + m) * 255); - - return {red, green, blue}; -} diff --git a/src/ui/app-index.ts b/src/ui/app-index.ts index 743cec2..6cfb45d 100644 --- a/src/ui/app-index.ts +++ b/src/ui/app-index.ts @@ -13,7 +13,7 @@ document.documentElement.classList.add('color-scheme-light'); render( html` ${header()} -
${gecutContext(routerContext, (page) => page)}
+
${gecutContext(routerContext, (page) => page)}
${footer()} `, document.body, diff --git a/src/ui/assets/svg/dark.svg b/src/ui/assets/svg/dark.svg new file mode 100644 index 0000000..bcd49f5 --- /dev/null +++ b/src/ui/assets/svg/dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/ui/assets/svg/download.svg b/src/ui/assets/svg/download.svg new file mode 100644 index 0000000..c70ecd3 --- /dev/null +++ b/src/ui/assets/svg/download.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/ui/assets/svg/light.svg b/src/ui/assets/svg/light.svg new file mode 100644 index 0000000..98ab506 --- /dev/null +++ b/src/ui/assets/svg/light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/ui/components/footer.ts b/src/ui/components/footer.ts index fe69e25..36fd72f 100644 --- a/src/ui/components/footer.ts +++ b/src/ui/components/footer.ts @@ -1,10 +1,11 @@ import {gecutContext} from '@gecut/lit-helper/directives/context.js'; import debounce from '@gecut/utilities/debounce.js'; +import {hexFromArgb} from '@material/material-color-utilities'; import {styleMap} from 'lit/directives/style-map.js'; import {html} from 'lit/html.js'; import {colorContext} from '../../signal/color.context.js'; -import {themeContext} from '../../signal/theme.context.js'; +import {paletteContext} from '../../signal/palette.context.js'; const colorPickerChange = debounce((event: InputEvent) => { const target = event.target as HTMLInputElement; @@ -25,7 +26,7 @@ export function footer() { return html`