wip
parent
64409dfa09
commit
7821db8d3f
@ -1,210 +1,7 @@
|
||||
# Ew UI
|
||||
## Getting started
|
||||
|
||||
Probably the most opinionated React UI library.
|
||||
Install Tailwind CSS via npm:
|
||||
|
||||
## Type of pages
|
||||
```bash
|
||||
|
||||
1. App pages. Pages behind the login.
|
||||
2. Public pages. Pages accessible to everyone.
|
||||
|
||||
## Dashboard
|
||||
|
||||
You build your own Dashboard using the DashboardContent component and the sidebar, like so:
|
||||
|
||||
```jsx
|
||||
function Dashboard() {
|
||||
return (
|
||||
<>
|
||||
<Sidebar />
|
||||
<DashboardContent />
|
||||
</>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
## Color palette
|
||||
|
||||
You need to define these values:
|
||||
|
||||
```js
|
||||
"ew-primary": {
|
||||
DEFAULT: "#7F5aF0",
|
||||
},
|
||||
"ew-accent": {
|
||||
DEFAULT: "#444652",
|
||||
},
|
||||
"ew-text": {
|
||||
DEFAULT: "#333",
|
||||
},
|
||||
"ew-text-light": {
|
||||
DEFAULT: "#fff",
|
||||
},
|
||||
"ew-link": {
|
||||
DEFAULT: "#006bb8",
|
||||
},
|
||||
"ew-success": {
|
||||
DEFAULT: "#12E999",
|
||||
},
|
||||
"ew-warning": {
|
||||
DEFAULT: "#FBBD23",
|
||||
},
|
||||
"ew-error": {
|
||||
DEFAULT: "#BD271E",
|
||||
},
|
||||
"ew-bg": {
|
||||
DEFAULT: "#fff",
|
||||
},
|
||||
"ew-bg-dark": {
|
||||
DEFAULT: "#333",
|
||||
}
|
||||
```
|
||||
|
||||
Then, generate the shades for each color using https://www.tints.dev/ and fill the objects as:
|
||||
|
||||
```js
|
||||
"ew-primary": {
|
||||
DEFAULT: "#7F5aF0",
|
||||
50: "#F1ECFD",
|
||||
100: "#E6DEFC",
|
||||
200: "#CCBEF9",
|
||||
300: "#B39DF6",
|
||||
400: "#9A7CF3",
|
||||
500: "#7F5AF0",
|
||||
600: "#521FEB",
|
||||
700: "#3A11B6",
|
||||
800: "#270B7A",
|
||||
900: "#13063D",
|
||||
950: "#09031C",
|
||||
},
|
||||
"ew-accent": {
|
||||
DEFAULT: "#444652",
|
||||
50: "#E9EAF1",
|
||||
100: "#D0D2E2",
|
||||
200: "#A1A4C4",
|
||||
300: "#757AA9",
|
||||
400: "#505581",
|
||||
500: "#333652",
|
||||
600: "#292C42",
|
||||
700: "#1F2132",
|
||||
800: "#14151F",
|
||||
900: "#0A0A10",
|
||||
950: "#060609",
|
||||
},
|
||||
"ew-text": {
|
||||
DEFAULT: "#333",
|
||||
50: "#EBEBEB",
|
||||
100: "#D6D6D6",
|
||||
200: "#ADADAD",
|
||||
300: "#858585",
|
||||
400: "#5C5C5C",
|
||||
500: "#333333",
|
||||
600: "#292929",
|
||||
700: "#1F1F1F",
|
||||
800: "#141414",
|
||||
900: "#0A0A0A",
|
||||
950: "#050505",
|
||||
},
|
||||
"ew-text-light": {
|
||||
DEFAULT: "#fff",
|
||||
50: "#FFFFFF",
|
||||
100: "#FFFFFF",
|
||||
200: "#FFFFFF",
|
||||
300: "#FFFFFF",
|
||||
400: "#FFFFFF",
|
||||
500: "#FFFFFF",
|
||||
600: "#CCCCCC",
|
||||
700: "#999999",
|
||||
800: "#666666",
|
||||
900: "#333333",
|
||||
950: "#1A1A1A",
|
||||
},
|
||||
"ew-link": {
|
||||
DEFAULT: "#006bb8",
|
||||
50: "#E0F2FF",
|
||||
100: "#BDE3FF",
|
||||
200: "#7AC8FF",
|
||||
300: "#3DAEFF",
|
||||
400: "#0092FA",
|
||||
500: "#006BB8",
|
||||
600: "#005694",
|
||||
700: "#004170",
|
||||
800: "#002A47",
|
||||
900: "#001524",
|
||||
950: "#000C14",
|
||||
},
|
||||
"ew-success": {
|
||||
DEFAULT: "#12E999",
|
||||
50: "#E7FDF5",
|
||||
100: "#D0FBEB",
|
||||
200: "#A0F8D8",
|
||||
300: "#71F4C4",
|
||||
400: "#3DF0AE",
|
||||
500: "#12E999",
|
||||
600: "#0EB97A",
|
||||
700: "#0B8E5E",
|
||||
800: "#075F3F",
|
||||
900: "#042F1F",
|
||||
950: "#021810",
|
||||
},
|
||||
"ew-warning": {
|
||||
DEFAULT: "#FBBD23",
|
||||
50: "#FFF9EB",
|
||||
100: "#FEF2D2",
|
||||
200: "#FDE4A5",
|
||||
300: "#FDD87D",
|
||||
400: "#FCCB50",
|
||||
500: "#FBBD23",
|
||||
600: "#E1A304",
|
||||
700: "#AA7B03",
|
||||
800: "#6E5002",
|
||||
900: "#372801",
|
||||
950: "#1E1601",
|
||||
},
|
||||
"ew-error": {
|
||||
DEFAULT: "#BD271E",
|
||||
50: "#FBE6E5",
|
||||
100: "#F7D1CF",
|
||||
200: "#EF9E9A",
|
||||
300: "#E77069",
|
||||
400: "#DF3D35",
|
||||
500: "#BD271E",
|
||||
600: "#961E18",
|
||||
700: "#721712",
|
||||
800: "#4B0F0C",
|
||||
900: "#280806",
|
||||
950: "#120403",
|
||||
},
|
||||
"ew-bg": {
|
||||
DEFAULT: "#fff",
|
||||
50: "#FFFFFF",
|
||||
100: "#FFFFFF",
|
||||
200: "#FFFFFF",
|
||||
300: "#FFFFFF",
|
||||
400: "#FFFFFF",
|
||||
500: "#FFFFFF",
|
||||
600: "#CCCCCC",
|
||||
700: "#999999",
|
||||
800: "#666666",
|
||||
900: "#333333",
|
||||
950: "#1A1A1A",
|
||||
},
|
||||
"ew-bg-dark": {
|
||||
DEFAULT: "#333",
|
||||
50: "#EBEBEB",
|
||||
100: "#D6D6D6",
|
||||
200: "#ADADAD",
|
||||
300: "#858585",
|
||||
400: "#5C5C5C",
|
||||
500: "#333333",
|
||||
600: "#292929",
|
||||
700: "#1F1F1F",
|
||||
800: "#141414",
|
||||
900: "#0A0A0A",
|
||||
950: "#050505",
|
||||
},
|
||||
```
|
||||
|
||||
Resources:
|
||||
|
||||
* https://www.webdesignrankings.com/resources/lolcolors/
|
||||
* https://www.happyhues.co/palettes/4
|
||||
@ -1,3 +1 @@
|
||||
import * as Card from "./Card";
|
||||
|
||||
export { Card }
|
||||
export * from "./Card";
|
||||
|
||||
@ -0,0 +1,19 @@
|
||||
import React from "react";
|
||||
import type { Meta, StoryObj } from "@storybook/react";
|
||||
import { SignUp } from "./SignUp";
|
||||
|
||||
const meta: Meta<typeof SignUp> = {
|
||||
title: "Examples / SignUp",
|
||||
component: SignUp,
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof SignUp>;
|
||||
|
||||
export const Default: Story = {
|
||||
render: () => <SignUp />,
|
||||
};
|
||||
|
||||
Default.parameters = {
|
||||
layout: "fullscreen",
|
||||
};
|
||||
@ -0,0 +1,27 @@
|
||||
import * as React from "react";
|
||||
import { Box, Button, Card, Input, cx } from "../../index";
|
||||
|
||||
const SignUp = () => {
|
||||
return (
|
||||
<Box className={cx(["w-1/3", "mx-auto", "p-5"])}>
|
||||
<Card.$ paddless>
|
||||
<Card.Header>
|
||||
<Card.Title>Sign up</Card.Title>
|
||||
<Card.Description>Create a new account.</Card.Description>
|
||||
</Card.Header>
|
||||
|
||||
<Card.Body>
|
||||
<Box>
|
||||
<Input label={"Email address"} />
|
||||
</Box>
|
||||
</Card.Body>
|
||||
|
||||
<Card.Footer>
|
||||
<Button>Sign Up</Button>
|
||||
</Card.Footer>
|
||||
</Card.$>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export { SignUp };
|
||||
Loading…
Reference in New Issue