Foundation
Main View
Components
Charts
Dialogs
Framer Animations
Forms
Grids
Typography
Utils
The Basics
Our components were created to help speed up React development so folks doesn't have to build atomic pieces that could be shared, throughout the years we have been adding more components to it, so it's become a lot more complete.
Colorations
We've always work under the idea of having 2 colorations: light and dark. You could choose to stick with only 1 for your app but the support for both is built within every component in the library
These are the main packages that set up all the needed stuff consumed by the components in the library, things like CSS variables, hooks, contexts, providers, etc...
So, you HAVE to have both installed, if you used the automatic script then these are already set up.
As mentioned before the UiView sets CSS variables, without these variables the components won't inherit their correct theme styles.
Also, You need to import each package styles into your global CSS for the CSS to be picked up in your application like this:
Using CSS:
// In CSS: Update the route based on your project. // vvvvvv---- IF YOU ARE GOING TO USE A CUSTOM THEME REMOVE THIS IMPORT ----vvvvvvvv @import url('../node_modules/@uireact/foundation/dist/index.css'); // Include all packages styles @import url('../node_modules/@uireact/view/dist/index.css');
There are frameworks that allow you to import styles from the node modules, if you are using one of them then you could use that. If you do this make sure you ommit the foundation package if you will provide your own theme variables.
CSS Variables usage
As we use CSS Variables, once you import the theme in your global CSS, the variables will be available in your application for you to use, so you can use them for your own components.
For instance you can have a style in a component in your app like this:
.container { background-color: var(--primary-token_100); }
And the variable will bring the value for the primary color with token 100 in the element with class container.
You can check all the variables that the theme brings in this default theme. They follow this pattern:
--{inverse}-{category}-{tokenValue}
The inverse in the name means that when Dark theme is enable then these variables will hold the light values.
Category is the category of the color: primary, secondary, tertiary, etc...
The tokenValue is the level of the coloration: token_10, token_50, token_100, etc...
If you want to use your own values for your own theme you can either copy this in your app and modify it, OR, you can use our step by step form to Create your theme.
If you want to learn more about all the classes that are available from the library you can see this doc UiView styles