bennymi / ato-ui Goto Github PK
View Code? Open in Web Editor NEWThe elemental UI component library for Svelte, built with UnoCSS and Melt UI.
Home Page: https://ato-ui.vercel.app
License: MIT License
The elemental UI component library for Svelte, built with UnoCSS and Melt UI.
Home Page: https://ato-ui.vercel.app
License: MIT License
Add examples:
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
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
, ...Create designer page:
Readability / Contrast
Resources
Inspiration:
TODOs
Sections
Particles should transition smoothly from one to the other when theme is changed and change colors accordingly.
Inspiration
Color Themes:
Resources:
TODOs
Getting Started
uno.css
file (serves as a file that the css will be loaded into), etc.Shortcut Search
Buttons
Spinners
Inspiration
Code Blocks
Resources
http://localhost:5173/documentation/buttons
Create CSS shortcuts for it:
btn-r-primary-500/50-secondary-800/50
)
?:
like so: ^btn-(primary|secondary)(?:-(100|200|300)(?:\/([1-9][0-9]?|0|100))?)?$
btn-(primary|secondary)(?:-(100|200|300))?(?:\/(0|100|[1-9][0-9]?))?
because it also allows emitting the shade value, so we can write this as well: btn-primary/25
and shade 500
will be the defaultExamples
Button Groups
A custom menu that opens on right click in a specified area.
Example:
A 4th color... could be named accent
or neutral
. People can use it if they want to have more than 3 available colors.
Another idea, have the 3 main color, but allow users to add extra colors with the click of a button. They could then be passed to the preset as an option.
Edit: Add an info
color. 3 main colors plus info, success, warning, error should be enough.
TODOs
Examples:
Maybe add spinners as rules so they can simply be added with a css variable: s-loader-circle
Things to mention
Inspiration:
It's because we're using @apply
in a rule, which won't get picked up by Uno.
Probably have to re-write it as pure CSS.
Resources
Should be an SVG icon. Just for the letter A or something more general.
Inspiration:
Channels:
Bots:
Resources
Idea:
professional
, playful
, etc)Actions
Install form preset and create documentation site with examples.
I need this for the Shortcut search anyway, so it could be turned into a component.
Input data should be arbitrary. The fields that should be searchable can be passed through an array.
Resources:
Will be part of the library that others can use. Provides extension of colors for primary, secondary, success, etc... And the tokens that provide easy switching between light and dark mode, rounded corners, fonts, etc.
TODOs
BROWSER
instead of browser
in ToC: https://kit.svelte.dev/docs/packagingheadless
and styled
pageExamples
Hamburger menu animations
Resources
Discord discussion on how to publish packages with version 2.0: https://discord.com/channels/457912077277855764/1085932841252163654/1085932841252163654
Things to do
Themes
I want to get rid of prettier and simply have everything defined in ESLint.
TODOs
airbnb
eslint style guide.vscode
folder with recommendation for extensions that should be installed
Resources:
airbnb/base
and airbnb-typescript/base
: https://github.com/airbnb/javascriptlint-staged
: https://www.youtube.com/watch?v=Rf9Z_arma4oFeatures
Examples
Resources:
Examples:
TODOs:
Maybe add activity stats:
Other examples:
Things to mention
pnpm
not npm
To get started quickly
Inverse tokens use different color for light and dark mode. You can create some dynamic shortcuts for these. For example:
'text-inverse-primary(-<num>)-secondary(-<num>)': 'text-primary-500 dark:text-secondary-500'
TODOs
primary-500 = bg-primary-500 text-on-primary-500
(https://youtu.be/RhScu3uqGd0?t=1272)bg-gradient-...
(consistent naming across all tokens)Forgot to update some buttons when I added the opacity option
https://captaincodeman.github.io/svelte-headlessui/disclosure/
TODOs
Examples:
Chips should be a style but maybe should also be a radio button to support proper keyboard controls?
Features
Examples
Features:
Tilt effect:
Examples:
Features
Examples:
Resources:
There's a bug that we can't change the opacity of theme colors. Possible solution might be #16 since this then should definitely use the Tailwind and Windi shortcuts once we simply extend that theme, but I was also thinking that the current configuration should already do that.
Used in btn-glass
for example
List of shortcut features to provide:
bg-gradient-(direction)-(from)-(via)-(to)
cards
cards-bg-(base)
<- do we need those or should they just be class="card bg-primary-500"
?cards-bg-(direction)
button
Convenience Shortcuts
class="..."
. Example text-[red,2xl] font-[bold,mono]
turns into text-red text-2xl font-bold font-mono
Markdown is here: https://www.contributor-covenant.org/
Release notes should also be integrated into the documentation website
For automatic release notes
https://github.com/changesets/changesets
Dependabot:
Information:
So: -on-primary-100
-on-primary-200
, etc.
Features:
top-left | top-center | top-right | bottom-left | bottom-center | bottom-right
)Resources
Examples:
Sections
Feature Request
Bug
Resources
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.