@zvoove/unity-ui 2.19.1

package/README.md

@@ -0,0 +1,175 @@
+<div align="center">
+
+<br />
+
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="./public/logo-unity-ui-white.svg">
+    <img alt="UnityUI by zvoove" src="./public/logo-unity-ui.svg" width="600px">
+  </picture>
+
+<br /><br />
+
+[UnityUI](dub.sh/unity-ui) is a React implementation of [zvoove's](https://zvoove.de/) Design System. All React implementations can/should be built using this package.
+
+<br />
+
+</div>
+
+# Getting Started
+
+To get started with the Unity UI project, follow these steps:
+
+## Adding UnityUI to your project
+
+### npm registry (recommended)
+
+The `unity-ui` is available as a public package on [npmjs](https://www.npmjs.com/package/@zvoove/unity-ui). You can install it directly:
+
+```shell
+npm i @zvoove/unity-ui
+```
+
+### GitHub Packages registry (legacy)
+
+> **Note:** We are transitioning to the public npm registry (`@zvoove/unity-ui`). The GitHub Packages registry (`@zvoove-org/unity-ui`) will be discontinued in the future. We recommend migrating to the npm registry as soon as possible.
+
+The `unity-ui` is also available on [our private package registry on GitHub](https://github.com/orgs/zvoove-org/packages?repo_name=unity-ui). To install from GitHub Packages, you'll need to [setup a personal access token](https://github.com/settings/tokens) with the `read:packages` permission.
+
+Configure the token for `npm`: `npm config set //npm.pkg.github.com/:_authToken $TOKEN`.
+
+Then create a `.npmrc` file in the root of your project:
+
+```shell
+@zvoove-org:registry=https://npm.pkg.github.com/zvoove-org
+```
+
+Then install:
+
+```shell
+npm i @zvoove-org/unity-ui
+```
+
+---
+
+`@zvoove/unity-ui` (or `@zvoove-org/unity-ui`) has required peer dependencies for `react` and `react-dom`. If your project doesn't have them already, make sure you have installed using at least **v18**
+
+## Styles
+
+The `unity-ui` uses [tailwindcss](https://tailwindcss.com/docs/installation/framework-guides) for styling, so you have to include the compiled `unity-ui.css` file in your project. This file contains all the compiled css to make the components to look like they should.
+
+In case you want to install `tailwindcss` in your project and have access to the UnityUI theme, you can install [tailwindcss](https://tailwindcss.com/docs/installation/framework-guides) in your project and import the `theme.css` file in your `index.css` to have access to the pre-defined design tokens of the Design system.
+
+```css
+/* index.css or main.css etc... */
+
+@import '@zvoove-org/unity-ui/theme.css';
+@import '@zvoove-org/unity-ui/unity-ui.css';
+```
+
+The `theme.css` file contains all the design tokens used in the project, so you can use them in your styles.
+
+After that you can use the components in your project and you can also use the design tokens in your styles. (Check our [Design Tokens](https://main--67c03f013fea08bb2f926e5f.chromatic.com/?path=/docs/design-tokens--docs) section for more information)
+
+```jsx
+import { Button } from '@zvoove-org/unity-ui';
+
+const App = () => {
+  return (
+    <div className="bg-primary text-on-primary">
+      <Button>Click me</Button>
+    </div>
+  );
+};
+
+export default App;
+```
+
+## Dark Mode
+
+The `unity-ui` has a dark mode that can be enabled by adding the `dark` data attribute to the root element of your application.
+
+```jsx
+import { Button } from '@zvoove-org/unity-ui';
+
+const App = () => {
+  return (
+    <div data-theme="dark">
+      <Button>Click me</Button>
+    </div>
+  );
+};
+```
+
+if you are using it in a NextJS project, you can set it up in the top level `layout.tsx` file.
+
+```jsx
+const Layout = ({ children }) => {
+  return <div data-theme="dark">{children}</div>;
+};
+
+export default Layout;
+```
+
+you can also force a specific component to be in dark mode by adding the `dark` data attribute to the component.
+
+```jsx
+import { Button } from '@zvoove-org/unity-ui';
+
+<Button data-theme="dark">Click me</Button>;
+```
+
+## Fonts
+
+Our project uses the `Source Sans` font family available at [google fonts](https://fonts.google.com/specimen/Source+Sans+3), you can include it in your project by adding the following lines to your `<head>` tag:
+
+```html
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap"
+  rel="stylesheet"
+/>
+```
+
+## Fonts in NextJS
+
+For `NextJS` you can load the fonts using `next/font` like this:
+
+```jsx
+import './globals.css';
+import { Source_Sans_3 } from 'next/font/google';
+
+const sourceSans3 = Source_Sans_3({
+  subsets: ['latin'],
+  variable: '--font-source-sans-3',
+});
+
+export default async function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="de-DE" className={sourceSans3.variable}>
+      <body data-theme="light">{children}</body>
+    </html>
+  );
+}
+```
+
+And then you update your `globals.css` with:
+
+```css
+@import '@zvoove-org/unity-ui/theme.css';
+@import '@zvoove-org/unity-ui/unity-ui.css';
+
+@layer base {
+  html {
+    font-family: var(--font-source-sans-3);
+  }
+}
+```
+
+## Installing (Development)
+
+To learn how to develop and contribute with this project, please check our [`CONTRIBUTING`](https://main--67c03f013fea08bb2f926e5f.chromatic.com/?path=/docs/contributing--docs) session on storybook.