@olostecnologia/norma v0.1.8
@Olos/Live-DS
Design System of Olos products https://www.olos.com.br.
Introduction
Olos/Live-DS is a UI kit built with React and TypeScript. It provides a customizable and accessible library of components that can be used to speed up React application development.
Getting started
Include the common styles and fonts in index.js
.
import '@olos/live-ds/lib/styles/normalize.css';
import '@olos/live-ds/lib/styles/fonts.css';
import '@olos/live-ds/lib/styles/common.css';
Include the basic providers in App.js
.
<ThemeProvider themeId={light | dark}>
<AccessibilityProvider>
<Modals>hello world</Modals>
</AccessibilityProvider>
</ThemeProvider>
The Olos/Live-DS CSS files have also been published separately so that they can be used outside of React, or included in a custom React component.
Contribution guidelines for this project
Themes
Olos/Live-D comes with a light theme and a dark theme. The primary accent color is a medium orange #FC7F11e
in light and dark mode.
These accent colors can be changed globally or on a per-component basis using CSS custom properties. For example:
:root {
--norma-ds-color: #642da0;
--norma-ds-color-contrast: #ffffff;
--norma-ds-color-L10: #803DC8;
--norma-ds-color-L20: #9D69D5;
--norma-ds-color-L30: #B995E1;
--norma-ds-color-D10: #57278C;
--norma-ds-color-D20: #4B2278;
--norma-ds-color-D30: #3E1C64;
--norma-ds-color-shade: #F3EFF8;
--norma-ds-color-O5: rgba(100, 45, 160, 0.05);
--phork-contrast-color: #642da0;
}
The documentation toolbar includes a widget to generate these colors.